/* =================================================================
   Trip Report — landing page
   Real app screenshots / video in highly accurate CSS device frames:
   iPhone 17 (Dynamic Island, titanium rail, Action + Camera Control
   buttons), iPad Pro M4 (uniform bezel, landscape camera), and
   MacBook Pro (notch, hinge, aluminum deck). Pinned, perspective hero
   where the cluster settles flat and the iPhone slides aside to
   highlight the free iPhone viewer. Everything degrades gracefully
   under ≤900px and prefers-reduced-motion.
   ================================================================= */

:root {
  --ink:        #0b1f2a;
  --ink-soft:   #4a626e;
  --ink-faint:  #7c919b;
  --bg:         #ffffff;
  --bg-alt:     #f4f8fa;
  --sky:        #e6f1f6;
  --line:       #e3eaee;
  --error:      #a23a3a;
  --error-bg:   #fff2f2;
  --success:    #176b43;
  --success-bg: #edf9f2;
  --field-line: #ccd9df;
  --field-ring: rgba(14,124,153,.18);
  --modal-backdrop: rgba(7,59,76,.42);
  --ocean:      #0e7c99;
  --ocean-deep: #0a5a71;
  --ocean-ink:  #073b4c;

  --sailing: #2f80ed;
  --boating: #0ca5a5;
  --road:    #f2994a;
  --hike:    #27ae60;

  --radius:    20px;
  --radius-sm: 13px;

  /* layered "floating product" shadow — soft ambient + tighter contact */
  --shadow:    0 2px 4px rgba(11,31,42,.06),
               0 12px 24px -10px rgba(11,31,42,.20),
               0 40px 80px -28px rgba(11,31,42,.34);
  --shadow-sm: 0 1px 2px rgba(11,31,42,.05),
               0 10px 26px -14px rgba(11,31,42,.22);

  --maxw: 1200px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg);
  line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3 { line-height: 1.08; letter-spacing: -0.022em; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; }
:focus-visible { outline: 2.5px solid var(--ocean); outline-offset: 3px; border-radius: 4px; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 12.5px; font-weight: 700; color: var(--ocean); margin: 0 0 14px; }
.grad { background: linear-gradient(100deg, var(--ocean) 0%, var(--sailing) 55%, var(--hike) 110%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 15px; padding: 11px 21px; border-radius: 999px; transition: transform .16s ease, box-shadow .16s ease, background .16s ease; cursor: pointer; white-space: nowrap; }
.btn--lg { padding: 14px 28px; font-size: 16px; }
.btn--primary { background: var(--ocean); color: #fff; box-shadow: 0 6px 18px -6px rgba(14,124,153,.6); }
.btn--primary:hover { background: var(--ocean-deep); transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(14,124,153,.7); }
.btn--ghost { background: rgba(14,124,153,.09); color: var(--ocean-deep); }
.btn--ghost:hover { background: rgba(14,124,153,.16); }
.btn--light { background: #fff; color: var(--ocean-deep); box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); }
.btn--light:hover { transform: translateY(-1px); }
.btn--ghost-light { background: rgba(255,255,255,.14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.btn--ghost-light:hover { background: rgba(255,255,255,.22); }

/* ---------- Nav ---------- */
/* The lead is the nav's sticky context: the nav pins while the hero is on
   screen, then scrolls away with the lead once the page moves past it. */
site-nav { display: contents; }
.lead { position: relative; }
.nav { position: sticky; top: 0; z-index: 60; background: rgba(255,255,255,.72); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--line); }
.nav__inner { position: relative; display: flex; align-items: center; gap: 24px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.brand__mark { width: 30px; height: 30px; border-radius: 8px; display: block; box-shadow: var(--shadow-sm); }
.brand__name { font-size: 16.5px; letter-spacing: -.01em; }
.nav__links { display: flex; gap: 26px; margin-left: auto; font-size: 14.5px; color: var(--ink-soft); }
.nav__links a { position: relative; transition: color .15s ease; }
.nav__links a:hover { color: var(--ink); }
.nav__toggle {
  display: none; width: 44px; height: 44px; padding: 0; flex: 0 0 44px;
  border: 1px solid var(--line); border-radius: 50%; background: var(--bg);
  color: var(--ink); cursor: pointer;
}
.nav__toggle span,
.nav__toggle span::before,
.nav__toggle span::after {
  display: block; width: 18px; height: 2px; margin: auto;
  border-radius: 999px; background: currentColor;
  transition: transform .18s ease, opacity .18s ease;
}
.nav__toggle span { position: relative; }
.nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; }
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.nav__cta { margin-left: 6px; }
.language-switch {
  display: inline-flex; flex: 0 0 auto; padding: 3px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-alt);
}
.language-switch a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 28px; padding: 0 8px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-soft); font: 700 11px/1 var(--font);
  letter-spacing: .08em;
}
.language-switch a[aria-current="page"] {
  background: var(--bg); color: var(--ocean-deep); box-shadow: var(--shadow-sm);
}

/* =================================================================
   ACCURATE DEVICE FRAMES
   Frames are built from nested spans so the screenshot sits inside a
   bezel inside a metal rail. Shadows are layered (ambient + contact),
   rails use top-light / bottom-shade insets to read as brushed metal.
   ================================================================= */

.device { display: block; position: relative; }

/* ---- MacBook Pro -------------------------------------------------
   lid (aluminum) → black bezel (with notch) → screen.  Then a thin
   hinge gap and the aluminum deck/base with the front-edge lip.
   One soft, shape-hugging drop shadow on the whole unit. */
.device-mac { width: 100%; filter: drop-shadow(0 28px 34px rgba(11,31,42,.26)) drop-shadow(0 6px 10px rgba(11,31,42,.12)); }
.device-mac__lid {
  position: relative; display: block;
  background: linear-gradient(157deg, #dfe2e6 0%, #c2c7cd 48%, #aeb4bb 100%);
  padding: .7%;
  border-radius: 22px 22px 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 0 0 1px rgba(0,0,0,.08),
    0 -1px 1px rgba(255,255,255,.5);
}
.device-mac__bezel {
  position: relative; display: block;
  background: #060608;
  padding: 1.05%;
  border-radius: 16px 16px 4px 4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 3px rgba(0,0,0,.8);
}
.device-mac__bezel img,
.device-mac__bezel video {
  display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover;
  border-radius: 6px; background: var(--sky);
}
/* The hero uses a full native MacBook screenshot, including its menu bar. */
.device-mac--dashboard .device-mac__bezel img {
  aspect-ratio: 3024/1964; object-fit: contain; object-position: top center;
}
.device-mac__notch {
  position: absolute; top: 1.05%; left: 50%; transform: translateX(-50%);
  width: 15.5%; height: 1.85%; min-height: 8px; max-height: 14px;
  background: #060608; border-radius: 0 0 7px 7px; z-index: 3;
}
/* hinge + aluminum deck */
.device-mac__base {
  position: relative; display: block;
  left: 50%; transform: translateX(-50%);
  width: 113.5%; height: 0; padding-bottom: 2.7%;
  background: linear-gradient(#cfd4da 0%, #b7bdc4 18%, #9aa1a9 60%, #7f868e 100%);
  border-radius: 3px 3px 11px 11px / 3px 3px 9px 9px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.65),
    inset 0 -1px 2px rgba(0,0,0,.25);
}
/* thin dark hinge shadow line where lid meets deck */
.device-mac__base::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 88.1%; height: 2px; background: #4a4f55; border-radius: 0 0 2px 2px;
  box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
/* front-edge finger lip (the open-cutout notch) */
.device-mac__lip {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 13%; height: 34%; min-height: 4px;
  background: linear-gradient(#aab0b8, #cdd2d8);
  border-radius: 0 0 6px 6px;
}

/* ---- iPad Pro M4 -------------------------------------------------
   one thin uniform bezel inside a slim aluminum rail; landscape
   front camera centered on the top long edge. */
.device-ipad {
  display: inline-block; width: 100%;
  background: linear-gradient(150deg, #d7dbe0, #b9bfc6 55%, #a7adb5);
  border-radius: 26px; padding: .55%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 0 0 1px rgba(0,0,0,.06),
    0 6px 12px -6px rgba(11,31,42,.18),
    0 30px 50px -20px rgba(11,31,42,.34);
}
.device-ipad__screen {
  position: relative; display: block;
  background: #0a0a0c; padding: 1.5%;
  border-radius: 23px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.device-ipad__screen img,
.device-ipad__screen video {
  display: block; width: 100%; aspect-ratio: 800/551; object-fit: cover;
  border-radius: 15px; background: var(--sky);
}
.device-ipad__cam {
  position: absolute; top: .72%; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4b4f57, #16181c 70%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08); z-index: 3;
}

/* ---- iPhone 17 ---------------------------------------------------
   titanium rail → thin black bezel → screen with Dynamic Island.
   Side buttons: Action + Volume (left), Side + Camera Control (right). */
.device-phone {
  display: inline-block; width: 100%;
  background: linear-gradient(145deg, #6b7076 0%, #3a3d42 40%, #1a1c1f 100%);
  border-radius: 19% / 9%; padding: 2.6%;
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.35),
    inset 0 0 0 1px rgba(0,0,0,.4),
    0 4px 10px -4px rgba(11,31,42,.30),
    0 26px 44px -16px rgba(11,31,42,.44);
}
.device-phone__screen {
  position: relative; display: block; background: #000;
  border-radius: 15.5% / 7.4%; padding: 2.6%;
}
.device-phone__screen img,
.device-phone__screen video {
  display: block; width: 100%; aspect-ratio: 9/19.5; object-fit: cover;
  object-position: top center; border-radius: 13% / 5.9%; background: var(--sky);
}
.device-phone__island {
  position: absolute; top: 2.8%; left: 50%; transform: translateX(-50%);
  width: 31%; height: 3.6%; min-height: 14px; max-height: 22px;
  background: #050505; border-radius: 999px; z-index: 4;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
/* side buttons — positioned by % so they scale with the frame.
   Left rail: Action (short) + Volume Up/Down. Right: Side/Power + Camera Control. */
.device-phone__btn { position: absolute; width: 2.4px; border-radius: 1.5px; z-index: 2; }
.device-phone__btn--action,
.device-phone__btn--volup,
.device-phone__btn--voldn { left: -1.4px; background: linear-gradient(90deg, #14161a, #34373d); border-radius: 2px 0 0 2px; box-shadow: -1px 0 1px rgba(0,0,0,.3); }
.device-phone__btn--power,
.device-phone__btn--cam   { right: -1.4px; background: linear-gradient(270deg, #14161a, #34373d); border-radius: 0 2px 2px 0; box-shadow: 1px 0 1px rgba(0,0,0,.3); }
.device-phone__btn--action { top: 21%; height: 5.2%; }
.device-phone__btn--volup  { top: 31%; height: 7.4%; }
.device-phone__btn--voldn  { top: 40.5%; height: 7.4%; }
.device-phone__btn--power  { top: 25.5%; height: 11.5%; }
.device-phone__btn--cam    { top: 41%; height: 6.4%; }

/* =================================================================
   HERO — pinned device stage with two captions.
   .hero is a tall runway; the stage (and Beat B caption) pin while the
   runway scrolls. Beat A scrolls naturally up and away. Beat B is pinned
   WITH the phone, fades in before Beat A leaves, then (once composed) the
   whole pinned scene — phone + Beat B text — scrolls up together as the
   sticky releases. Device + caption transforms driven by JS.
   ================================================================= */
.hero { position: relative; height: 260vh; }
.hero__sticky {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center; z-index: 1;
  background:
    radial-gradient(120% 90% at 84% -8%, var(--sky) 0%, rgba(230,241,246,0) 55%),
    radial-gradient(90% 70% at 6% 108%, rgba(47,128,237,.07) 0%, rgba(47,128,237,0) 60%),
    #ffffff;
}
.hero__scene { position: relative; width: 100%; height: min(82vh, 780px); }

.hero__cap { display: flex; align-items: center; pointer-events: none; will-change: opacity; }
/* Beat A: scrolls naturally over the pinned stage */
.hero__cap--intro  { position: absolute; left: 0; right: 0; top: 0; height: 100vh; z-index: 5; }
/* Beat B: lives inside .hero__sticky, so it pins with the phone */
.hero__cap--iphone { position: absolute; inset: 0; z-index: 6; opacity: 0; }
/* Narrow column so the body copy wraps clear of the device stage (which
   starts at ~36%); the headline keeps its two lines via nowrap. */
.hero__copy { width: 33%; max-width: 430px; pointer-events: auto; }
.hero__title { font-size: clamp(34px, 4.6vw, 60px); font-weight: 800; letter-spacing: -.03em; white-space: nowrap; }
.hero__sub { font-size: clamp(16px, 1.5vw, 19px); color: var(--ink-soft); margin-top: 20px; }
.hero__actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero__note { margin-top: 16px; font-size: 13px; color: var(--ink-faint); }

/* French hero lines are longer; scale them within the desktop copy lane so
   they stay clear of the device stage at medium widths and browser zoom. */
@media (min-width: 901px) {
  html[lang="fr"] .hero__title { font-size: clamp(32px, 3.8vw, 52px); }
}

/* perspective device stage */
.stage { position: absolute; top: 0; right: 0; width: 64%; height: 100%; perspective: 1900px; perspective-origin: 60% 40%; }
.stage__dev { position: absolute; margin: 0; transform-style: preserve-3d; will-change: transform; }
.stage__dev--ipad   { left: -1%; top: 30%; width: 46%;  z-index: 1; }
.stage__dev--mac    { left: 27%; top: 11%; width: 73%;  z-index: 2; }
.stage__dev--iphone { left: 36%; top: 42%; width: 20.5%; z-index: 3; }

/* =================================================================
   GENERIC SECTIONS
   ================================================================= */
.section { padding: clamp(72px, 9vw, 116px) 0; }
.section.video, .section.gallery { background: var(--bg-alt); }
.section.sync { background: linear-gradient(180deg, #fff 0%, var(--bg-alt) 100%); }
.section__head { text-align: center; max-width: 38em; margin: 0 auto clamp(40px, 5vw, 60px); }
.section__head .eyebrow { display: block; }
.section__head h2 { font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; }
.section__head p { font-size: clamp(16px, 1.5vw, 18.5px); color: var(--ink-soft); margin-top: 16px; }

/* Profiles */
.profile-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.profile-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; transition: transform .22s ease, box-shadow .22s ease; }
.profile-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--accent); }
.profile-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.profile-card__icon { font-size: 32px; line-height: 1; }
.profile-card h3 { font-size: 21px; margin: 14px 0 9px; color: var(--accent); }
.profile-card p { font-size: 15px; color: var(--ink-soft); }

/* Steps */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; counter-reset: step; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 24px; box-shadow: var(--shadow-sm); }
.step__num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(150deg, var(--ocean), var(--ocean-deep)); color: #fff; font-weight: 800; box-shadow: 0 6px 14px -6px rgba(14,124,153,.6); }
.step h3 { font-size: 19px; margin: 16px 0 9px; }
.step p { font-size: 15px; color: var(--ink-soft); }

/* Video grid (two clips) */
.video-grid { display: grid; grid-template-columns: 1.32fr 1fr; gap: 40px; align-items: center; }
.video-item { margin: 0; }
.video-item figcaption { text-align: center; margin-top: 20px; color: var(--ink-soft); font-size: 14.5px; }
.device-mac--wide .device-mac__bezel video { aspect-ratio: 16/9; }
.device-ipad--video .device-ipad__screen video { aspect-ratio: 16/10; }

/* Sync / devices */
.sync__inner { display: grid; grid-template-columns: 1.02fr 1fr; gap: 56px; align-items: center; }
.sync__copy h2 { font-size: clamp(28px, 3.8vw, 40px); font-weight: 800; }
.sync__copy p { font-size: clamp(16px, 1.5vw, 18.5px); color: var(--ink-soft); margin-top: 18px; }
.sync__stage { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 340px; }
.sync__ipad { margin: 0; width: 78%; }
.sync__phone { margin: 0; position: relative; width: 27%; margin-left: -11%; margin-bottom: -3%; z-index: 2; }

.ticks { list-style: none; padding: 0; margin: 24px 0 28px; display: grid; gap: 13px; }
.ticks li { position: relative; padding-left: 32px; font-size: 16px; }
.ticks li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 23px; height: 23px; border-radius: 50%; background: rgba(39,174,96,.14); color: var(--hike); font-size: 13px; font-weight: 800; display: grid; place-items: center; }
.ticks--lg li { font-size: 17px; padding-left: 34px; }

/* Public sailing logbook */
.publish { background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%); }
.publish__inner { display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(44px, 7vw, 88px); align-items: center; }
.publish__copy h2 { max-width: 11em; font-size: clamp(30px, 4vw, 46px); font-weight: 800; }
.publish__copy > p:not(.eyebrow) { margin-top: 20px; color: var(--ink-soft); font-size: clamp(16px, 1.5vw, 18.5px); }
.publish__copy .btn { gap: 9px; }
.publish-preview { min-width: 0; margin: 0; }
.publish-preview__link { display: block; border-radius: var(--radius); }
.publish-preview img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.publish-preview figcaption { margin-top: 15px; color: var(--ink-soft); font-size: 13.5px; text-align: center; }

/* Gallery */
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.shot { margin: 0; }
.shot img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .22s ease, box-shadow .22s ease; }
.shot:hover img { transform: translateY(-4px); box-shadow: var(--shadow); }
.shot figcaption { text-align: center; margin-top: 14px; color: var(--ink-soft); font-size: 14.5px; }

/* Privacy */
.privacy { background: linear-gradient(180deg, #fff 0%, var(--sky) 100%); }
.privacy__inner { text-align: center; max-width: 36em; margin: 0 auto; }
.privacy__icon { font-size: 42px; }
.privacy__inner h2 { font-size: clamp(28px, 3.8vw, 42px); font-weight: 800; margin: 16px 0; }
.privacy__inner p { font-size: clamp(16px, 1.5vw, 18.5px); color: var(--ink-soft); }

/* CTA */
.cta { background: linear-gradient(160deg, var(--ocean-deep) 0%, var(--ocean-ink) 100%); color: #fff; text-align: center; }
.cta__inner { max-width: 40em; margin: 0 auto; }
.cta__inner h2 { font-size: clamp(30px, 4.4vw, 48px); font-weight: 800; }
.cta__inner p { font-size: 18px; opacity: .82; margin-top: 14px; }
.cta__actions { display: flex; gap: 12px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }

/* Footer */
.footer { padding: 34px 0; border-top: 1px solid var(--line); }
.footer__inner { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: var(--ink-soft); }
.footer__brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--ink); }
.footer__brand img { width: 22px; height: 22px; border-radius: 6px; display: block; }
.footer a:hover { color: var(--ocean-deep); }

/* =================================================================
   FAQ / HELP PAGE
   ================================================================= */
.help-hero {
  padding: clamp(64px, 9vw, 108px) 0;
  background:
    radial-gradient(80% 130% at 90% 0%, var(--sky) 0%, transparent 64%),
    var(--bg-alt);
  border-bottom: 1px solid var(--line);
}
.help-hero__inner { max-width: 760px; }
.help-hero h1 { font-size: clamp(40px, 7vw, 68px); font-weight: 800; }
.help-hero p:not(.eyebrow) { margin-top: 20px; color: var(--ink-soft); font-size: clamp(17px, 2vw, 20px); }
.help-hero__action { margin-top: 28px; }
.help-hero--support { padding: clamp(48px, 6vw, 76px) 0; }

.help-page { padding: clamp(56px, 8vw, 96px) 0; }
.help-layout { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: clamp(42px, 7vw, 88px); align-items: start; }
.help-toc {
  position: sticky; top: 28px; padding: 22px;
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.help-toc h2 { font-size: 14px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-faint); }
.help-toc ul { list-style: none; margin: 15px 0 0; padding: 0; display: grid; gap: 10px; }
.help-toc a { color: var(--ink-soft); font-size: 14.5px; }
.help-toc a:hover { color: var(--ocean-deep); }

.help-content { min-width: 0; }
.help-section { scroll-margin-top: 24px; }
.help-section + .help-section { margin-top: clamp(64px, 8vw, 92px); }
.help-section > h2 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; }
.help-section > p { margin-top: 14px; color: var(--ink-soft); font-size: 17px; }

.faq-list { margin-top: 28px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 22px 42px 22px 0;
  position: relative; font-size: 18px; font-weight: 700;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 4px; top: 18px;
  color: var(--ocean); font-size: 25px; line-height: 1;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item__answer { padding: 0 34px 24px 0; color: var(--ink-soft); }
.faq-item__answer p + p, .faq-item__answer p + ul, .faq-item__answer p + ol { margin-top: 12px; }
.faq-item__answer ul, .faq-item__answer ol { margin-bottom: 0; padding-left: 22px; }
.faq-item__answer li + li { margin-top: 7px; }

.setup-grid { display: grid; gap: 18px; margin-top: 30px; }
.setup-card {
  padding: clamp(22px, 4vw, 30px); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-sm);
}
.setup-card__num {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--ocean); color: var(--bg); font-weight: 800;
}
.setup-card h3 { margin-top: 17px; font-size: 21px; }
.setup-card p, .setup-card ol, .setup-card ul { margin-bottom: 0; color: var(--ink-soft); }
.setup-card p { margin-top: 10px; }
.setup-card ol, .setup-card ul { padding-left: 22px; margin-top: 14px; }
.setup-card li + li { margin-top: 8px; }
.setup-card a { color: var(--ocean-deep); text-decoration: underline; text-underline-offset: 3px; }
.code-block {
  display: block; overflow-x: auto; margin: 16px 0 0; padding: 15px 17px;
  border-radius: var(--radius-sm); background: var(--ocean-ink); color: var(--bg);
  font: 14px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.help-note {
  margin-top: 22px; padding: 18px 20px; border-left: 4px solid var(--ocean);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--bg-alt); color: var(--ink-soft);
}
.help-note strong { color: var(--ink); }

/* =================================================================
   PRIVACY PAGE
   ================================================================= */
.legal-page {
  padding: clamp(56px, 8vw, 96px) 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
}
.legal-content { max-width: 760px; }
.legal-content > p { color: var(--ink-soft); font-size: 17px; }
.legal-content > p + p { margin-top: 18px; }
.legal-content section { margin-top: clamp(36px, 5vw, 48px); }
.legal-content h2 { font-size: clamp(21px, 3vw, 26px); font-weight: 800; }
.legal-content section p,
.legal-content section ul { margin-bottom: 0; color: var(--ink-soft); font-size: 17px; }
.legal-content section p { margin-top: 12px; }
.legal-content section ul { margin-top: 12px; padding-left: 24px; }
.legal-content section li + li { margin-top: 8px; }
.legal-content a { color: var(--ocean-deep); text-decoration: underline; text-underline-offset: 3px; }

/* =================================================================
   SUPPORT PAGE
   ================================================================= */
.support-page {
  padding: clamp(56px, 8vw, 96px) 0;
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
}
.support-layout {
  display: grid; grid-template-columns: minmax(260px, .78fr) minmax(520px, 1.45fr);
  gap: clamp(40px, 7vw, 84px); align-items: start; max-width: 1120px;
}
.support-options { padding-top: 22px; }
.support-kicker {
  display: inline-flex; padding: 6px 10px; border-radius: 999px;
  background: var(--sky); color: var(--ocean-deep); font-size: 12px;
  font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.support-options h2, .support-form-wrap h2 { font-size: clamp(28px, 4vw, 38px); font-weight: 800; }
.support-options h2 { margin-top: 18px; }
.support-options > p { margin-top: 14px; color: var(--ink-soft); font-size: 17px; }
.support-card {
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center;
  margin-top: 30px; padding: 20px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-sm);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.support-card:hover { transform: translateY(-2px); border-color: var(--ocean); box-shadow: var(--shadow); }
.support-card__icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: var(--ocean); color: var(--bg); font-size: 23px; font-weight: 800;
}
.support-card__content { display: grid; gap: 4px; min-width: 0; }
.support-card__content strong { font-size: 17px; }
.support-card__content > span { color: var(--ink-soft); font-size: 14px; line-height: 1.45; }
.support-card__arrow { color: var(--ocean); font-size: 25px; transition: transform .18s ease; }
.support-card:hover .support-card__arrow { transform: translateX(3px); }
.support-topics { display: grid; gap: 11px; margin: 26px 0 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: 14.5px; }
.support-topics li { position: relative; padding-left: 25px; }
.support-topics li::before {
  content: "✓"; position: absolute; left: 0; top: 0; color: var(--ocean); font-weight: 800;
}
.support-form-wrap {
  padding: clamp(26px, 4vw, 42px); border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 6px); background: var(--bg); box-shadow: var(--shadow);
}
.support-form-head { display: flex; gap: 16px; align-items: flex-start; }
.support-form-head__icon {
  display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px;
  border-radius: 15px; background: var(--sky); color: var(--ocean-deep);
}
.support-form-head p { margin-top: 8px; color: var(--ink-soft); font-size: 16px; }
.support-form { display: grid; gap: 22px; margin-top: 32px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: grid; gap: 8px; min-width: 0; }
.form-field label { font-weight: 700; font-size: 15px; }
.form-required { color: var(--ocean); }
.form-optional {
  margin-left: 7px; color: var(--ink-faint); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
}
.form-field small { color: var(--ink-faint); font-size: 12.5px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; min-width: 0; min-height: 50px; padding: 12px 14px;
  border: 1px solid var(--field-line); border-radius: 12px; background: var(--bg);
  color: var(--ink); font: inherit; box-shadow: inset 0 1px 2px rgba(11,31,42,.035);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--ink-faint); opacity: .8; }
.form-field textarea { min-height: 170px; resize: vertical; line-height: 1.55; }
.form-field input:hover, .form-field select:hover, .form-field textarea:hover { border-color: var(--ink-faint); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  border-color: var(--ocean); outline: 0; box-shadow: 0 0 0 4px var(--field-ring);
}
.form-field--website, .form-field--website[hidden] { display: none; }
.form-status { margin-top: 22px; padding: 14px 16px; border-radius: var(--radius-sm); }
.form-status[data-state="success"] { color: var(--success); background: var(--success-bg); }
.form-status[data-state="error"] { color: var(--error); background: var(--error-bg); }
.support-form__privacy {
  display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px;
  border-radius: var(--radius-sm); background: var(--bg-alt); color: var(--ink-soft);
}
.support-form__privacy p { font-size: 12.5px; line-height: 1.5; }
.support-form__actions { display: flex; align-items: center; gap: 18px; }
.support-form__actions > span { color: var(--ink-faint); font-size: 12.5px; }
.support-form .btn { gap: 10px; border: 0; }
.support-form .btn:disabled { cursor: wait; opacity: .72; transform: none; }
.sending-dialog {
  width: min(440px, calc(100% - 40px)); padding: 0; border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ink); background: var(--bg); box-shadow: var(--shadow);
}
.sending-dialog::backdrop { background: var(--modal-backdrop); }
.sending-dialog__content { display: flex; gap: 20px; align-items: center; padding: 30px; }
.sending-dialog h2 { font-size: 23px; }
.sending-dialog p { margin-top: 7px; color: var(--ink-soft); font-size: 14px; }
.sending-dialog__spinner {
  flex: 0 0 38px; width: 38px; height: 38px; border: 4px solid var(--line);
  border-top-color: var(--ocean); border-radius: 50%; animation: support-spin .8s linear infinite;
}
@keyframes support-spin { to { transform: rotate(360deg); } }

/* Reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease var(--delay,0s), transform .7s cubic-bezier(.16,.84,.44,1) var(--delay,0s); }
.reveal.is-in { opacity: 1; transform: none; }

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 900px) {
  .profile-grid, .steps, .shots { grid-template-columns: 1fr 1fr; }
  .video-grid, .sync__inner, .publish__inner { grid-template-columns: 1fr; gap: 44px; }
  .publish__copy { max-width: 680px; }
  .nav__inner { gap: 10px; }
  .nav__toggle { display: block; margin-left: auto; }
  .nav__links {
    display: none; position: absolute; top: calc(100% + 8px); left: 24px; right: 24px;
    gap: 0; margin: 0; padding: 8px; background: var(--bg);
    border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);
  }
  .nav__links.is-open { display: grid; }
  .nav__links a { padding: 12px 14px; border-radius: 8px; }
  .nav__links a:hover { background: var(--bg-alt); }
  .nav__cta { margin-left: 0; }
  .help-layout { grid-template-columns: 1fr; }
  .help-toc { position: static; }
  .help-toc ul { display: flex; flex-wrap: wrap; gap: 10px 18px; }
  .support-layout { grid-template-columns: 1fr; max-width: 720px; }
  .support-options { padding-top: 0; }
}
@media (max-width: 560px) {
  .nav__inner { padding-left: 16px; padding-right: 16px; }
  .nav__links { left: 16px; right: 16px; }
  .brand__name { display: none; }
  .language-switch a { min-width: 29px; padding: 0 6px; }
  .profile-grid, .steps, .shots { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .support-form-wrap { padding: 24px 20px; border-radius: var(--radius); }
  .support-form-head__icon { display: none; }
  .support-form__actions { align-items: stretch; flex-direction: column; gap: 10px; }
  .support-form__actions .btn { width: 100%; }
  .support-form__actions > span { text-align: center; }
  .footer__inner { align-items: flex-start; gap: 16px; }
  .footer__copy { text-align: right; }
}

/* Hero on phones — same scroll-driven two-beat, re-laid-out vertically:
   caption text rides the top, the device cluster sits in the lower band.
   The two never overlap: text lives above ~46vh, devices below. */
@media (max-width: 900px) {
  .hero { height: 205vh; }
  .hero__scene { height: 100vh; }
  .stage { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: 58vh; perspective: 1300px; perspective-origin: 50% 44%; }
  .stage__dev--mac    { left: 24%; top: 2%;  width: 70%;  z-index: 2; }
  .stage__dev--ipad   { left: -4%; top: 18%; width: 47%;  z-index: 1; }
  .stage__dev--iphone { left: 31%; top: 22%; width: 31%;  z-index: 3; }
  .hero__cap { align-items: flex-start; }
  .hero__cap > .container { padding-top: 7vh; }
  .hero__copy { width: 100%; max-width: 540px; margin: 0 auto; text-align: center; }
  .hero__title { font-size: clamp(30px, 8.6vw, 40px); }
  .hero__sub { margin: 16px auto 0; font-size: 16px; max-width: 30em; }
  .hero__actions { margin-top: 22px; justify-content: center; }
  .hero__note { display: none; }
  .hero__cap .ticks { width: max-content; max-width: 100%; margin: 22px auto 0; text-align: left; }
}
/* Short / narrow phones — tighten the caption and drop the device band lower
   so the buttons clear it. (Placed after the ≤900 hero block so it wins.) */
@media (max-width: 560px) {
  .hero__cap > .container { padding-top: 5vh; }
  .hero__title { font-size: clamp(26px, 8vw, 34px); }
  .hero__sub { font-size: 15.5px; margin-top: 12px; }
  .hero__actions { margin-top: 16px; }
  .hero__cap--intro .hero__actions { flex-direction: column; align-items: center; }
  .hero__cap--intro .hero__actions .btn { width: 100%; max-width: 320px; }
  .stage { height: 50vh; }
  .stage__dev--mac    { top: 3%; }
  .stage__dev--ipad   { top: 20%; }
  .stage__dev--iphone { top: 24%; }
}

/* In narrow portrait view, Beat B reads in scroll order: device first, then
   its explanation. This also covers narrow desktop browser windows. */
@media (max-width: 900px) and (orientation: portrait) {
  .hero { height: 235vh; }
  .hero__cap--iphone > .container { padding-top: 56vh; }
}

/* Keep the full Beat B copy comfortably inside a small phone viewport. */
@media (max-width: 560px) and (orientation: portrait) {
  .hero__cap--iphone > .container { padding-top: 53vh; }
  .hero__cap--iphone .eyebrow { margin-bottom: 8px; }
  .hero__cap--iphone .hero__sub {
    max-width: 25em;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.4;
  }
  .hero__cap--iphone .ticks {
    gap: 8px;
    margin-top: 14px;
  }
  .hero__cap--iphone .ticks--lg li {
    padding-left: 28px;
    font-size: 14px;
    line-height: 1.35;
  }
  .hero__cap--iphone .ticks li::before { width: 20px; height: 20px; }
}

/* =================================================================
   REDUCED MOTION — no pin, no scroll choreography; static stacked hero
   ================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { transition: none; }
  .sending-dialog__spinner { animation: none; border-color: var(--line); border-top-color: var(--ocean); }

  .hero { height: auto; }
  .hero__sticky { position: static; height: auto; display: block; padding: 48px 0 88px; }
  .hero__scene { height: auto; }
  .hero__cap { position: static; height: auto; display: block; }
  .hero__cap--iphone { display: none; }
  .hero__copy { width: 100%; max-width: 640px; margin: 0 auto; text-align: center; }
  .hero__actions { justify-content: center; }
  .stage { position: relative; right: auto; top: auto; bottom: auto; width: 100%; height: auto; perspective: none; margin-top: 48px; padding-bottom: 8%; }
  .stage__dev { transform: none !important; opacity: 1 !important; }
  .stage__dev--mac { position: relative; left: auto; top: auto; width: 90%; margin: 0 auto; z-index: 1; }
  .stage__dev--ipad { position: absolute; left: 0; bottom: 0; top: auto; width: 38%; z-index: 2; }
  .stage__dev--iphone { position: absolute; right: 1%; bottom: -2%; top: auto; left: auto; width: 20%; z-index: 3; }
}