/* Castaway Media — shared stylesheet
   One file for all four pages. Palette is taken from the wordmark's own gradient,
   so the site and the logo are literally the same colours. */

:root {
  --ink:        #121014;
  --ink-raised: #1a1820;
  --ink-card:   #1b1922;
  --text:       #f2f1f5;
  --text-2:     #b6b4c0;
  --text-3:     #8f8d99;
  /* Lightened from #5f5e69, which measured 2.97:1 against the background and
     failed WCAG AA. This is the dimmest text on the site — footer meta, search
     placeholder, help group labels — so it's exactly the value most likely to
     be waved through on the grounds that it "looks fine". It measures 4.62:1. */
  --text-4:     #7e7c88;
  --line:       rgba(255, 255, 255, 0.09);
  --line-strong:rgba(255, 255, 255, 0.16);

  /* The spectrum. Order matters — it runs pink to cyan across the wordmark. */
  --s1: #FC3EA6;
  --s2: #B03BE0;
  --s3: #8C3BFC;
  --s4: #3A70FE;
  --s5: #33CBE2;
  --spectrum: linear-gradient(100deg, var(--s1), var(--s2), var(--s3), var(--s4), var(--s5));

  --measure: 1140px;
  /* One line length for running text, everywhere.
     Roughly 68 characters at 17px, which sits inside the 45–75 range where the eye
     reliably finds the start of the next line. The container is deliberately much
     wider than this — it holds grids and screenshots, which want the room; prose
     doesn't.

     There used to be four different caps (560, 640, 660, 760) plus help topics with
     none at all, so the same kind of paragraph set to a different length depending
     which page it was on. They were picked by eye, one at a time. This is the single
     value they should all have been. */
  --measure-text: 68ch;
  --radius: 18px;
  --radius-lg: 28px;

  /* Syncopate is a display face built for short bursts — very wide letterforms,
     two weights, no text-setting design. It sets a two-word label beautifully and
     a 46-character sentence badly, so it's confined to the small uppercase labels
     (.eyebrow, .help-nav .group) and nothing else. Headings use the body font.

     It used to be on every h1/h2/h3, which is why two separate overrides existed
     pulling .feature h3 and .topic h3 back to the body font — exactly the places
     where headings run long. Those overrides were the tell; this is the fix. */
  --font-label: "Syncopate", "Avenir Next", "Helvetica Neue", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--measure); margin: 0 auto; padding: 0 28px; }

/* Anything genuinely decorative is hidden from screen readers; anything that
   carries meaning gets a real label instead. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 200;
  background: var(--s3); color: #fff; padding: 10px 18px;
  border-radius: 10px; text-decoration: none; font-weight: 600;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

/* ---------------- Navigation ---------------- */

.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(18, 16, 20, 0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease;
}
.nav.is-stuck { border-bottom-color: var(--line); }

.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: 72px;
}
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-brand img.mark { width: 34px; height: 34px; }
.nav-brand img.word { height: 19px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  text-decoration: none; color: var(--text-2); font-size: 15px;
  padding: 9px 15px; border-radius: 10px; white-space: nowrap;
  transition: color .18s ease, background .18s ease;
}
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.06); }
.nav-links a.is-current { color: var(--text); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-strong);
  color: var(--text); width: 42px; height: 42px; border-radius: 11px;
  cursor: pointer; font-size: 18px; line-height: 1;
}

@media (max-width: 800px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: rgba(18,16,20,0.97);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    padding: 12px 20px 20px;
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { padding: 13px 14px; font-size: 16px; }
}

/* ---------------- Aurora ---------------- */

/* Three slow-drifting blobs behind the hero. Heavily blurred, low opacity —
   the effect should read as "there's colour back there somewhere", never as
   three identifiable circles. */
.aurora { position: absolute; inset: -20% -10% auto; height: 900px; z-index: 0; pointer-events: none; filter: blur(90px); opacity: .55; }
.aurora span { position: absolute; display: block; border-radius: 50%; }
.aurora .a1 { width: 620px; height: 620px; background: var(--s1); top: 4%;  left: 2%;  animation: drift1 26s ease-in-out infinite alternate; }
.aurora .a2 { width: 700px; height: 700px; background: var(--s3); top: 0;   left: 38%; animation: drift2 32s ease-in-out infinite alternate; }
.aurora .a3 { width: 560px; height: 560px; background: var(--s5); top: 18%; left: 68%; animation: drift3 29s ease-in-out infinite alternate; }

@keyframes drift1 { to { transform: translate3d(90px, 60px, 0) scale(1.15); } }
@keyframes drift2 { to { transform: translate3d(-70px, 90px, 0) scale(1.1); } }
@keyframes drift3 { to { transform: translate3d(-110px, 40px, 0) scale(1.18); } }

/* ---------------- Hero ---------------- */

.hero { position: relative; overflow: hidden; padding: 96px 0 104px; text-align: center; }
.hero-inner { position: relative; z-index: 1; }
.hero img.mark { width: 116px; height: 116px; margin: 0 auto 30px; }
.hero img.word { width: min(430px, 78vw); margin: 0 auto 26px; }

.tagline {
  font-size: clamp(19px, 2.6vw, 25px);
  color: var(--text-2); margin: 0 auto 14px; max-width: var(--measure-text); line-height: 1.55;
}
.hero-sub { color: var(--text-3); font-size: 16px; margin: 0 auto 40px; max-width: var(--measure-text); }

.rule { height: 3px; width: 190px; margin: 0 auto 40px; border-radius: 3px; background: var(--spectrum); }

.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 28px; border-radius: 999px; text-decoration: none;
  font-size: 16px; font-weight: 600; border: 1px solid transparent;
  transition: transform .16s ease, background .2s ease, border-color .2s ease;
}
.btn:active { transform: scale(.975); }
.btn-primary { background: var(--spectrum); color: #fff; }
.btn-primary:hover { filter: brightness(1.09); }
.btn-ghost { border-color: var(--line-strong); color: var(--text); }
.btn-ghost:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.28); }

/* ---------------- Sections ---------------- */

section { position: relative; padding: 92px 0; }
section + section { border-top: 1px solid var(--line); }

.eyebrow {
  font-family: var(--font-label); font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--text-3); margin: 0 0 14px;
}
h1, h2, h3 { font-family: var(--font-body); font-weight: 650; letter-spacing: -0.02em; }
h2 { font-size: clamp(26px, 3.6vw, 38px); line-height: 1.25; margin: 0 0 18px; }
h3 { font-size: 17px; line-height: 1.4; margin: 0 0 9px; letter-spacing: 0; }

.lede { font-size: 18px; color: var(--text-2); max-width: var(--measure-text); margin: 0 0 52px; }
.section-head { margin-bottom: 52px; }

/* ---------------- Cards ---------------- */

.grid { display: grid; gap: 18px; }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.card p { color: var(--text-2); font-size: 15.5px; margin: 0; line-height: 1.65; }

.card-icon {
  width: 46px; height: 46px; border-radius: 13px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff;
}

/* ---------------- Screenshots ---------------- */

.shots {
  display: grid; gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
}

.shot { border: 0; background: none; padding: 0; cursor: zoom-in; font: inherit; color: inherit; text-align: left; }

/* The device frame. A real iPhone bezel is a superellipse; a plain radius at
   this size is indistinguishable and far cheaper than an SVG mask. */
.shot-frame {
  position: relative; border-radius: 34px; padding: 9px;
  background: linear-gradient(160deg, #3a3844, #1c1a22);
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
  transition: transform .24s ease, box-shadow .24s ease;
}
.shot:hover .shot-frame, .shot:focus-visible .shot-frame {
  transform: translateY(-6px); box-shadow: 0 26px 60px rgba(0,0,0,.62);
}
.shot-frame img { border-radius: 26px; width: 100%; }

/* The notch. Decorative only. */
.shot-frame::after {
  content: ""; position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
  width: 32%; height: 15px; border-radius: 999px; background: #0b0a0e;
}

.shot-label { margin: 14px 2px 0; font-size: 14px; color: var(--text-3); }
.shot-label strong { display: block; color: var(--text); font-size: 15px; font-weight: 600; }

/* ---------------- Lightbox ---------------- */

.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(8, 7, 10, 0.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  display: none; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.lightbox.is-open { display: flex; }
.lightbox img {
  max-height: 86vh; max-width: min(430px, 92vw);
  border-radius: 26px; box-shadow: 0 30px 90px rgba(0,0,0,.7);
}
.lb-caption {
  position: absolute; bottom: 26px; left: 0; right: 0; text-align: center;
  color: var(--text-2); font-size: 15px;
}
.lb-btn {
  position: absolute; background: rgba(255,255,255,0.08);
  border: 1px solid var(--line-strong); color: var(--text);
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  font-size: 21px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .18s ease;
}
.lb-btn:hover { background: rgba(255,255,255,0.17); }
.lb-close { top: 24px; right: 24px; }
.lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 24px; top: 50%; transform: translateY(-50%); }

@media (max-width: 700px) {
  .lb-prev { left: 12px; } .lb-next { right: 12px; }
  .lb-btn { width: 44px; height: 44px; font-size: 18px; }
}

/* ---------------- Feature list ---------------- */

.features { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }
.feature { display: flex; gap: 15px; align-items: flex-start; padding: 18px 4px; }
.feature-dot {
  flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%;
  margin-top: 9px; background: var(--spectrum);
}
.feature h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.feature p { margin: 0; color: var(--text-3); font-size: 14.5px; line-height: 1.6; }

/* ---------------- Servers panel ---------------- */

.panel {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 48px 44px;
  background:
    radial-gradient(900px 320px at 12% 0%, rgba(140, 59, 252, 0.14), transparent 62%),
    radial-gradient(760px 300px at 92% 100%, rgba(51, 203, 226, 0.11), transparent 62%),
    var(--ink-raised);
}
@media (max-width: 640px) { .panel { padding: 32px 24px; } }

/* ---------------- Help ---------------- */

.help-layout { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 52px; align-items: start; }
@media (max-width: 900px) { .help-layout { grid-template-columns: 1fr; gap: 28px; } }

.help-side { position: sticky; top: 96px; }
@media (max-width: 900px) { .help-side { position: static; } }

.help-search {
  width: 100%; padding: 12px 15px; border-radius: 12px; margin-bottom: 20px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line);
  color: var(--text); font-size: 15px; font-family: inherit;
}
.help-search:focus { outline: none; border-color: var(--s3); background: rgba(255,255,255,0.08); }
.help-search::placeholder { color: var(--text-4); }

.help-nav { list-style: none; margin: 0; padding: 0; }
.help-nav li { margin: 0; }
.help-nav .group {
  font-family: var(--font-label); font-size: 10.5px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-4);
  margin: 22px 0 8px; padding-left: 13px;
}
.help-nav a {
  display: block; padding: 8px 13px; border-radius: 9px;
  color: var(--text-2); text-decoration: none; font-size: 15px;
  border-left: 2px solid transparent;
  transition: color .16s ease, background .16s ease;
}
.help-nav a:hover { color: var(--text); background: rgba(255,255,255,0.055); }
.help-nav a.is-active { color: var(--text); border-left-color: var(--s3); background: rgba(140,59,252,.1); }

.topic { padding-bottom: 52px; margin-bottom: 52px; border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
.topic:last-child { border-bottom: 0; }
.topic h2 { font-size: 25px; margin-bottom: 16px; }
.topic h3 { font-size: 17px; font-weight: 600; margin: 30px 0 9px; letter-spacing: 0; }
.topic p { color: var(--text-2); margin: 0 0 16px; max-width: var(--measure-text); }
.topic ul { color: var(--text-2); padding-left: 22px; margin: 0 0 16px; max-width: var(--measure-text); }
.topic li { margin-bottom: 9px; }
.topic strong { color: var(--text); font-weight: 600; }
.topic code {
  background: rgba(255,255,255,0.08); padding: 2px 7px; border-radius: 6px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .88em; color: var(--s5);
}
.topic.is-hidden { display: none; }

.note {
  border-left: 3px solid var(--s3); border-radius: 0;
  background: rgba(140, 59, 252, 0.09);
  padding: 16px 20px; margin: 0 0 18px;
}
.note p:last-child { margin-bottom: 0; }

.no-results { color: var(--text-3); padding: 30px 0; display: none; }
.no-results.is-shown { display: block; }

/* ---------------- Prose (privacy, support) ---------------- */

.prose { max-width: var(--measure-text); }
.prose h2 { font-size: 23px; margin: 46px 0 14px; }
.prose h2:first-of-type { margin-top: 0; }
.prose p, .prose li { color: var(--text-2); }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 9px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose a { color: var(--s5); }
.updated { color: var(--text-4); font-size: 14.5px; margin-bottom: 40px; }

/* ---------------- Footer ---------------- */

.footer { border-top: 1px solid var(--line); padding: 52px 0 68px; }
.footer-inner { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; align-items: flex-start; }
.footer img.word { height: 17px; width: auto; margin-bottom: 14px; opacity: .85; }
.footer p { color: var(--text-4); font-size: 14px; margin: 0; }
.footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
.footer-links a { color: var(--text-3); text-decoration: none; font-size: 15px; }
.footer-links a:hover { color: var(--text); }

/* ---------------- Motion ---------------- */

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* Someone who has asked their OS for less motion gets a static page — the
   aurora and every reveal stop entirely rather than merely slowing down. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aurora span { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

:focus-visible { outline: 2px solid var(--s5); outline-offset: 3px; border-radius: 4px; }