/* ═══════════════════════════════════════════════════════════════════════════
   Nightjar — production site design system
   Single source of truth: tokens + base + components. Extended from the holding
   site's inline styles (navy on warm paper, one typeface). Gold is retired.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Brand face (self-hosted; no third-party font CDN) ────────────────────── */
@font-face{
  font-family:"Albert Sans";
  src:url("/assets/fonts/AlbertSans-SemiBold.ttf") format("truetype");
  font-weight:600; font-style:normal; font-display:swap;
}

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root{
  /* Navy + warm-paper ramps (Brand Foundations §02) */
  --navy-900:#050b26; --navy-800:#08113b; --navy-700:#101a4d;
  --navy-400:#5a6699; --navy-300:#8b93b8; --navy-200:#c2c7db;
  --paper-0:#ffffff;  --paper-50:#faf9f6; --paper-100:#f0eee7;
  --paper-300:#ddd9cf; --paper-500:#8f8a7d; --paper-600:#605c52;
  --ink:#08113b;

  /* Type */
  --disp:"Albert Sans", -apple-system, system-ui, sans-serif;
  --body:-apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;

  /* Fluid type scale */
  --fs-display:clamp(40px, 6.2vw, 70px);
  --fs-h2:clamp(28px, 3.6vw, 46px);
  --fs-h3:clamp(20px, 2vw, 27px);
  --fs-lede:clamp(17px, 1.6vw, 20px);
  --fs-body:17px;
  --fs-small:13.5px;
  --fs-eyebrow:12.5px;

  /* Layout */
  --maxw:1120px;
  --maxw-narrow:820px;
  --gutter:clamp(22px, 5vw, 44px);
  /* Tightened from clamp(72px,9vw,128px): 128px top+bottom stacked to 256px of dead
     background between adjacent sections. 88px halves that to 176px. */
  --section-y:clamp(56px, 6vw, 88px);

  /* Radii + depth */
  --r-sm:9px; --r-md:12px; --r-lg:16px; --r-xl:22px;
  --shadow-card:0 1px 2px rgba(8,17,59,.06), 0 12px 30px -18px rgba(8,17,59,.28);
  --shadow-frame:0 30px 70px -34px rgba(5,11,38,.55), 0 2px 8px rgba(5,11,38,.08);
  --hair-dark:rgba(255,255,255,.12);
  --hair-light:var(--paper-300);

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ── Reset + base ─────────────────────────────────────────────────────────── */
*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--body);
  background:var(--paper-50);
  color:var(--ink);
  font-size:var(--fs-body);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
img,video,svg{display:block; max-width:100%}
:focus-visible{outline:2px solid currentColor; outline-offset:3px; border-radius:3px}

/* ── Surfaces (alternate for rhythm) ──────────────────────────────────────── */
.s-navy{background:var(--navy-800); color:var(--paper-50)}
.s-navy-deep{background:var(--navy-900); color:var(--paper-50)}
.s-paper{background:var(--paper-50); color:var(--ink)}
.s-paper-alt{background:var(--paper-100); color:var(--ink)}

/* ── Layout primitives ────────────────────────────────────────────────────── */
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.container--narrow{max-width:var(--maxw-narrow)}
.section{padding-block:var(--section-y)}
.section--tight{padding-block:clamp(48px,6vw,80px)}
.stack > * + *{margin-top:var(--flow, 1rem)}

/* ── Typography ───────────────────────────────────────────────────────────── */
.display{
  font-family:var(--disp); font-weight:600;
  font-size:var(--fs-display); line-height:1.02; letter-spacing:-.02em;
  text-wrap:balance;
}
h1,h2,h3{font-family:var(--disp); font-weight:600; letter-spacing:-.018em; line-height:1.08}
.h2{font-size:var(--fs-h2); line-height:1.08; letter-spacing:-.02em; text-wrap:balance}
.h3{font-size:var(--fs-h3); line-height:1.14}
.lede{font-size:var(--fs-lede); line-height:1.5; color:var(--paper-600)}
.s-navy .lede,.s-navy-deep .lede{color:var(--navy-200)}
.prose{max-width:60ch}
.prose p + p{margin-top:1em}
.eyebrow{
  font-family:var(--disp); font-weight:600;
  font-size:var(--fs-eyebrow); letter-spacing:.16em; text-transform:uppercase;
  color:var(--paper-500);
}
.s-navy .eyebrow,.s-navy-deep .eyebrow{color:var(--navy-300)}
.text-strong{color:var(--ink); font-weight:600}
.s-navy .text-strong,.s-navy-deep .text-strong{color:var(--paper-0)}
.measure{max-width:52ch}
.center{text-align:center}
.center .lede,.center .measure{margin-inline:auto}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--disp); font-weight:600; font-size:16px; line-height:1;
  padding:14px 22px; border-radius:var(--r-md); border:1px solid transparent;
  cursor:pointer; white-space:nowrap; text-align:center;
  transition:transform .12s var(--ease), background .16s var(--ease),
             border-color .16s var(--ease), color .16s var(--ease);
}
.btn:active{transform:translateY(1px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55; cursor:default; pointer-events:none}
/* Paper button — for navy surfaces */
.btn--solid{background:var(--paper-50); color:var(--navy-800)}
.btn--solid:hover{background:#fff}
/* Ink button — for paper surfaces */
.btn--ink{background:var(--navy-800); color:var(--paper-50)}
.btn--ink:hover{background:var(--navy-700)}
/* Ghost — outline, surface-aware via currentColor */
.btn--ghost{background:transparent; border-color:currentColor; color:inherit}
.s-navy .btn--ghost{border-color:var(--navy-400); color:var(--paper-50)}
.s-navy .btn--ghost:hover{background:rgba(255,255,255,.08); border-color:var(--paper-50)}
.btn--ghost:hover{background:rgba(8,17,59,.05)}
.btn--lg{padding:16px 28px; font-size:17px}

/* Quiet inline link with arrow */
.link-arrow{
  display:inline-flex; align-items:center; gap:.35em;
  font-family:var(--disp); font-weight:600; font-size:15.5px;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb, currentColor 35%, transparent);
}
.link-arrow svg{transition:transform .16s var(--ease)}
.link-arrow:hover svg{transform:translateX(3px)}

/* ── Sticky nav ───────────────────────────────────────────────────────────── */
.nav{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--navy-800) 90%, transparent);
  backdrop-filter:saturate(140%) blur(12px);
  -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--hair-dark);
  color:var(--paper-50);
}
.nav-inner{
  max-width:var(--maxw); margin-inline:auto; padding:14px var(--gutter);
  display:flex; align-items:center; gap:24px;
}
.brand{display:inline-flex; align-items:center; gap:12px}
.brandmark{
  width:30px; height:30px; flex:0 0 auto; background:var(--paper-50);
  -webkit-mask:url("/assets/img/nightjar-bird.png") no-repeat center / contain;
          mask:url("/assets/img/nightjar-bird.png") no-repeat center / contain;
}
/* Hero brandmark: the bird, in white, standing in for the old "Coming soon" eyebrow.
   Same mask trick as .brandmark so it inherits the flat white silhouette. */
.hero-mark{
  display:block; width:clamp(72px,9vw,104px); aspect-ratio:1;
  margin-inline:auto; background:var(--paper-50);
  -webkit-mask:url("/assets/img/nightjar-bird.png") no-repeat center / contain;
          mask:url("/assets/img/nightjar-bird.png") no-repeat center / contain;
}
.brand .wm{
  font-family:var(--disp); font-weight:600; font-size:19px;
  letter-spacing:.2em; text-transform:uppercase; padding-left:.2em; color:var(--paper-50);
}
.nav-links{display:flex; align-items:center; gap:6px; margin-left:auto}
.nav-links a{
  font-family:var(--disp); font-weight:600; font-size:15px;
  color:var(--navy-200); padding:8px 12px; border-radius:8px;
  transition:color .15s var(--ease), background .15s var(--ease);
}
.nav-links a:hover{color:var(--paper-50); background:rgba(255,255,255,.06)}
.nav-links a[aria-current="page"]{color:var(--paper-50)}
.nav-cta{margin-left:8px}
.nav-cta .btn{padding:10px 18px; font-size:15px}
/* `.nav-links a` (0,1,1) outranks `.btn--solid` (0,1,0), so without these the CTA
   inherits navy-200 text on its paper background: 1.6:1, effectively invisible.
   Same for :hover, which would otherwise paint white text on a white button. */
.nav-cta .btn--solid{color:var(--navy-800)}
.nav-cta .btn--solid:hover{color:var(--navy-800); background:#fff}
.nav-toggle{display:none}

@media (max-width:800px){
  .nav-toggle{
    display:inline-grid; place-items:center; margin-left:auto;
    width:42px; height:42px; border-radius:10px;
    background:rgba(255,255,255,.06); border:1px solid var(--hair-dark); color:var(--paper-50);
  }
  .nav-links{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:2px; margin:0;
    padding:10px var(--gutter) 18px;
    background:var(--navy-800); border-bottom:1px solid var(--hair-dark);
    display:none;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 12px; font-size:16px}
  .nav-cta{margin:8px 0 0}
  .nav-cta .btn{width:100%; padding:14px 18px; font-size:16px}
}

/* ── macOS window frame (media presentation) ──────────────────────────────── */
.frame{
  position:relative; width:100%;
  border-radius:var(--r-lg); overflow:hidden;
  background:var(--navy-900);
  border:1px solid var(--hair-dark);
  box-shadow:var(--shadow-frame);
}
.s-paper .frame,.s-paper-alt .frame{border-color:rgba(8,17,59,.10)}
.frame--chrome::before{
  content:""; position:absolute; z-index:3; top:0; left:0; right:0; height:34px;
  background:linear-gradient(var(--navy-800), color-mix(in srgb,var(--navy-800) 88%, var(--navy-900)));
  border-bottom:1px solid rgba(255,255,255,.07);
}
.frame--chrome::after{
  content:""; position:absolute; z-index:4; top:12px; left:15px;
  width:10px; height:10px; border-radius:50%;
  background:#f5655b;
  box-shadow:18px 0 0 #f5bf4f, 36px 0 0 #62c554;
}
.frame--chrome .media-stage{padding-top:34px}

/* Media stage: reserves aspect ratio so nothing shifts as clips load */
.media{margin:0}
.media-stage{position:relative; width:100%; aspect-ratio:16/10; background:var(--navy-900)}
.media[data-aspect="4/3"] .media-stage{aspect-ratio:4/3}
.media[data-aspect="1/1"] .media-stage{aspect-ratio:1/1}
.media[data-aspect="21/9"] .media-stage{aspect-ratio:21/9}
.media-video,.media-poster{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.frame--chrome .media-video,.frame--chrome .media-poster{inset:34px 0 0}

/* Placeholder shown until a real clip is dropped in (doubles as the capture brief) */
.media-ph{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; text-align:center;
  padding:24px;
  color:var(--navy-200);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(90,102,153,.14), transparent 60%),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px),
    var(--navy-900);
}
.frame--chrome .media-ph{inset:34px 0 0}
.media-ph .play{
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
}
.media-ph .play svg{width:20px; height:20px; margin-left:2px; fill:var(--paper-50)}
.media-ph .cap{font-family:var(--disp); font-weight:600; font-size:14px; color:var(--paper-50)}
.media-ph .meta{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--navy-300)}

/* ── Feature moment layouts (varied, not 8× the same) ─────────────────────── */
.feature{
  display:grid; grid-template-columns:1fr 1.08fr; gap:clamp(28px,5vw,64px);
  align-items:center;
}
.feature--reverse .feature-media{order:-1}
.feature-copy{max-width:46ch}
.feature-copy .h3{margin-bottom:12px}
.feature-copy .lede{font-size:var(--fs-body)}
.feature + .feature{margin-top:clamp(56px,7vw,104px)}

/* Stacked hero-style moment: centered copy above wide media */
.feature--stack{grid-template-columns:1fr; text-align:center; gap:clamp(28px,4vw,48px)}
.feature--stack .feature-copy{max-width:60ch; margin-inline:auto}

/* Compact secondary-feature grid ("there's more") */
/* Four secondary features → a balanced 2×2 (no lopsided trailing row) */
.grid-more{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(18px,2.4vw,26px);
}
@media (max-width:640px){ .grid-more{grid-template-columns:1fr} }
.more-card{
  border:1px solid var(--hair-light); border-radius:var(--r-lg);
  padding:22px 22px 24px; background:var(--paper-0);
}
.s-navy .more-card,.s-navy-deep .more-card{
  border-color:var(--hair-dark); background:rgba(255,255,255,.03);
}
.more-card .h3{font-size:18px; margin-bottom:8px}
.more-card p{font-size:15px; color:var(--paper-600)}
.s-navy .more-card p{color:var(--navy-200)}
.more-card .ico{
  width:34px; height:34px; margin-bottom:14px; color:var(--navy-700);
}
.s-navy .more-card .ico{color:var(--navy-200)}

/* ── Data-source credibility strip ────────────────────────────────────────── */
.sources{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px 26px; color:var(--navy-300);
}
.sources .lbl{font-size:var(--fs-small); letter-spacing:.04em}
.sources ul{display:flex; flex-wrap:wrap; gap:8px 22px; list-style:none}
.sources li{
  font-family:var(--disp); font-weight:600; font-size:14.5px; color:var(--navy-200);
}

/* ── Facts row (privacy / trust) ──────────────────────────────────────────── */
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px)}
.fact .h3{font-size:19px; margin-bottom:8px}
.fact p{font-size:15.5px; color:var(--navy-200)}
.fact{border-top:2px solid var(--navy-700); padding-top:18px}

/* ── Pricing teaser card ──────────────────────────────────────────────────── */
.price-teaser{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,4vw,56px);
  align-items:center;
  border:1px solid var(--hair-light); border-radius:var(--r-xl);
  padding:clamp(28px,4vw,52px); background:var(--paper-0);
  box-shadow:var(--shadow-card);
}
.price-amount{font-family:var(--disp); font-weight:600; font-size:clamp(40px,6vw,60px); letter-spacing:-.02em}
.price-amount .cur{font-size:.5em; vertical-align:.35em; color:var(--paper-500)}
.ph-token{
  font-family:var(--body); font-weight:600; font-size:.5em; letter-spacing:.02em;
  color:var(--paper-500); background:var(--paper-100);
  padding:.15em .5em; border-radius:6px; vertical-align:.25em;
}
.price-list{list-style:none; display:flex; flex-direction:column; gap:11px}
.price-list li{display:flex; gap:11px; align-items:flex-start; font-size:15.5px; color:var(--paper-600)}
.price-list svg{flex:0 0 auto; width:19px; height:19px; margin-top:1px; color:var(--navy-700)}

/* ── Segment vignettes ────────────────────────────────────────────────────── */
.vignettes{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px)}
.vignette .num{
  font-family:var(--disp); font-weight:600; font-size:14px;
  color:var(--navy-300); letter-spacing:.1em;
}
.vignette h3{font-size:var(--fs-h3); margin:14px 0 10px}
.vignette p{color:var(--navy-200); font-size:15.5px; line-height:1.55}
.vignette{border-top:1px solid var(--hair-dark); padding-top:20px}

/* ── Waitlist capture (carried from holding site, tokenised) ──────────────── */
.capture{width:100%; max-width:460px}
.capture.center{margin-inline:auto}
.capture form{width:100%}
.capture .row{display:flex; gap:10px; width:100%}
.capture input[type=email]{
  flex:1 1 auto; min-width:0; font-family:var(--body); font-size:16px;
  color:var(--paper-50); background:rgba(255,255,255,.06);
  border:1px solid var(--navy-400); border-radius:var(--r-md); padding:14px 16px;
  transition:border-color .15s var(--ease), background .15s var(--ease);
}
.capture input[type=email]::placeholder{color:var(--navy-300)}
.capture input[type=email]:focus{outline:none; border-color:var(--paper-50); background:rgba(255,255,255,.10)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.cf-turnstile{margin-top:14px; min-height:0}
.consent{font-size:12.5px; line-height:1.5; color:var(--navy-300); max-width:460px; margin-top:14px}
.consent a{color:var(--navy-200); text-decoration:underline; text-underline-offset:2px}
.formnote{font-size:12.5px; color:var(--navy-300); margin-top:10px; min-height:1.2em}
.formnote.err{color:#ff9d8a}
.status-ok{display:none; max-width:460px; font-family:var(--disp); font-weight:600; font-size:19px; color:var(--paper-50)}
/* Mirrors `.capture.center` above. Without this the 460px block is pinned left inside
   the centred container, so the success text centres against the wrong box. `.center`
   only gives text-align plus auto-margins for .lede/.measure, not for this. */
.status-ok.center{margin-inline:auto}
/* Matches the form's own margin-top:30px. The form is what normally holds this space;
   once it hides, the success text would otherwise butt straight up against the lede
   and read as part of that sentence. */
.status-ok{margin-top:30px}
.status-ok span{display:block; font-family:var(--body); font-weight:400; font-size:15px; color:var(--navy-200); margin-top:8px}
body.done .capture{display:none}
body.done .status-ok{display:block}

/* ── Footer ───────────────────────────────────────────────────────────────── */
.footer{background:var(--navy-900); color:var(--navy-200); padding-block:clamp(48px,6vw,80px)}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(28px,4vw,56px); align-items:start}
.footer .brand .wm{color:var(--paper-50)}
.footer-tag{margin-top:14px; font-size:14.5px; color:var(--navy-300); max-width:34ch}
.footer-col h4{font-family:var(--disp); font-weight:600; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--navy-300); margin-bottom:14px}
.footer-col ul{list-style:none; display:flex; flex-direction:column; gap:10px}
.footer-col a{font-size:15px; color:var(--navy-200)}
.footer-col a:hover{color:var(--paper-50)}
.footer-bottom{
  margin-top:clamp(36px,5vw,56px); padding-top:26px; border-top:1px solid var(--hair-dark);
  display:flex; flex-wrap:wrap; gap:14px 26px; align-items:center; justify-content:space-between;
}
.footer-bottom p{font-size:12.5px; line-height:1.6; color:var(--navy-300); max-width:70ch}
.footer-bottom a{color:var(--navy-200); text-decoration:underline; text-underline-offset:2px}

/* ── Reveal-on-scroll (progressive; content is visible without JS) ────────── */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease), transform .6s var(--ease)}
.reveal.in{opacity:1; transform:none}
.no-js .reveal,.reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important; transform:none !important; transition:none}
  *{scroll-behavior:auto}
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:860px){
  .feature{grid-template-columns:1fr; gap:26px}
  .feature--reverse .feature-media{order:0}
  .feature-copy{max-width:none}
  .price-teaser{grid-template-columns:1fr; gap:28px}
  .facts{grid-template-columns:1fr; gap:22px}
  .vignettes{grid-template-columns:1fr; gap:22px}
  .footer-top{grid-template-columns:1fr 1fr; gap:28px}
}
@media (max-width:560px){
  .capture .row{flex-direction:column}
  .capture .row .btn{width:100%}
  .footer-top{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms !important}}

/* ═══════════════════════════════════════════════════════════════════════════
   Features page (/features.html)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Smaller display heading for list items */
.h4{font-family:var(--disp); font-weight:600; font-size:17px; line-height:1.2; letter-spacing:-.01em}

/* Anchor offset so the sticky nav never covers a jumped-to heading */
section[id]{scroll-margin-top:84px}

/* Anchor pills (features hero jump-nav) */
.pills{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:30px}
.pill{
  font-family:var(--disp); font-weight:600; font-size:14px;
  padding:9px 16px; border-radius:999px;
  border:1px solid var(--navy-400); color:var(--navy-200);
  transition:background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.pill:hover{background:rgba(255,255,255,.08); color:var(--paper-50); border-color:var(--paper-50)}

/* Feature group header + body */
.group-head{max-width:42ch}
.group-head .lede{max-width:54ch}
.group-body{margin-top:clamp(40px,5vw,72px)}

/* Borderless feature-list grid (preferred over cards; groups with space, not boxes) */
.feat-cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,3vw,40px) clamp(36px,5vw,64px)}
.feat-item .h4{margin-bottom:7px}
.feat-item p{font-size:15px; color:var(--paper-600); line-height:1.56}
.s-navy .feat-item p,.s-navy-deep .feat-item p{color:var(--navy-200)}

/* Import / export two-column headed lists */
.io-cols{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4vw,56px)}
.io h4{font-family:var(--disp); font-weight:600; font-size:15px; color:var(--ink); margin-bottom:14px}
.s-navy .io h4,.s-navy-deep .io h4{color:var(--paper-50)}
.io ul{list-style:none; display:flex; flex-direction:column; gap:10px}
.io li{font-size:15.5px; color:var(--paper-600); line-height:1.5}
.s-navy .io li,.s-navy-deep .io li{color:var(--navy-200)}

@media (max-width:640px){
  .feat-cols{grid-template-columns:1fr}
  .io-cols{grid-template-columns:1fr; gap:28px}
}

/* ── Clip-collection grid (short-clip cards, screen.studio-style) ─────────── */
.clip-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.6vw,32px)}
.clip-card h3{font-size:17px; margin-top:16px; letter-spacing:-.01em}
.clip-card p{font-size:14.5px; line-height:1.5; color:var(--paper-600); margin-top:5px}
.s-navy .clip-card p,.s-navy-deep .clip-card p{color:var(--navy-200)}
.clip-card .media{margin:0}
/* Small cards use the plain rounded frame (no window chrome); lighter placeholder */
.clip-card .media-ph{gap:8px; padding:14px}
.clip-card .media-ph .cap{display:none}
.clip-card .media-ph .play{width:42px; height:42px}
.clip-card .media-ph .meta{font-size:11px}
@media (max-width:860px){ .clip-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .clip-grid{grid-template-columns:1fr} }

/* ── Tabbed feature region ───────────────────────────────────────────────────
   A list of sub-features on the left drives ONE large media viewer on the right.
   Selecting a feature raises its card and swaps the clip. Only the active clip
   plays. (Pattern: screen.studio feature regions.)                              */
/* Headline sits in the left column above the feature list; the viewer fills the
   right column top-to-bottom, so there is no empty quadrant. */
.region-grid{
  display:grid;
  grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  grid-template-areas:"head media" "list media";
  column-gap:clamp(28px,4vw,60px);
  align-items:start;
}
.region-grid .region-head{grid-area:head; max-width:38ch; margin-bottom:clamp(18px,2.4vw,28px)}
.region-grid .region-list{grid-area:list}
.region-grid .region-stage{grid-area:media; align-self:center}

/* Showcase variant (home gallery). The base layout centres the viewer across BOTH
   the headline and the list rows, which floats it ~103px above the first tab and
   leaves it 74px shorter than the list. Here the headline spans the top instead, so
   the viewer and the tabs start on the same line, and the viewer takes the larger
   share of a slightly wider container. Result: viewer 700x438 against a 432px list,
   i.e. top AND bottom line up to within ~6px.
   Must stay ABOVE the max-width:820px block below, so the mobile collapse still wins. */
.region-grid--showcase{
  max-width:1240px;
  grid-template-columns:minmax(0,0.72fr) minmax(0,1.28fr);
  grid-template-areas:"head head" "list media";
}
.region-grid--showcase .region-stage{align-self:start}

/* Headless gallery: no headline of its own, so collapse the empty head row.
   (No margin-top: it now sits in its own section, whose padding does the spacing.) */
.region-grid--stacked{
  grid-template-areas:"list media";
}

.region-list{display:flex; flex-direction:column; gap:6px}
.region-tab{
  display:block; width:100%; text-align:left; cursor:pointer;
  padding:16px 18px; border-radius:var(--r-lg);
  border:1px solid transparent; background:transparent;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.region-tab .tab-title{
  display:block; font-family:var(--disp); font-weight:600;
  font-size:17.5px; letter-spacing:-.01em; margin-bottom:5px;
}
.region-tab .tab-desc{display:block; font-size:14.5px; line-height:1.5}
.s-paper .region-tab .tab-title,.s-paper-alt .region-tab .tab-title{color:var(--ink)}
.s-paper .region-tab .tab-desc,.s-paper-alt .region-tab .tab-desc{color:var(--paper-600)}
.s-navy .region-tab .tab-title,.s-navy-deep .region-tab .tab-title{color:var(--paper-50)}
.s-navy .region-tab .tab-desc,.s-navy-deep .region-tab .tab-desc{color:var(--navy-200)}
/* inactive descriptions read a touch dimmer than the active card */
.region-tab[aria-selected="false"] .tab-desc{opacity:.72}
.region-tab:hover{background:rgba(8,17,59,.04)}
.s-navy .region-tab:hover,.s-navy-deep .region-tab:hover{background:rgba(255,255,255,.04)}
/* active = raised card */
.s-paper .region-tab[aria-selected="true"],.s-paper-alt .region-tab[aria-selected="true"]{
  background:var(--paper-0); border-color:var(--hair-light); box-shadow:var(--shadow-card);
}
.s-navy .region-tab[aria-selected="true"],.s-navy-deep .region-tab[aria-selected="true"]{
  background:rgba(255,255,255,.06); border-color:var(--hair-dark);
}
.region-tab:focus-visible{outline:2px solid currentColor; outline-offset:2px}

/* Media viewer: one panel visible at a time (same aspect keeps height stable) */
.region-stage{position:relative}
.region-panel{display:none}
.region-panel.is-active{display:block}
.no-js .region-panel:first-child{display:block}

@media (max-width:820px){
  .region-grid{grid-template-columns:1fr; grid-template-areas:"head" "list" "media"; row-gap:20px}
  .region-grid .region-stage{align-self:stretch}
}

/* ── Typographic interlude (rhythm between collections) ───────────────────── */
.interlude{padding-block:clamp(44px,7vw,88px); text-align:center}
.interlude p{
  font-family:var(--disp); font-weight:600;
  font-size:clamp(26px,4.2vw,48px); line-height:1.1; letter-spacing:-.02em;
  max-width:22ch; margin-inline:auto; text-wrap:balance;
}

/* ── Q&A list (FAQ, pricing questions) ───────────────────────────────────── */
.qa{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(26px,3vw,44px) clamp(36px,5vw,64px)}
.qa--single{grid-template-columns:1fr; max-width:70ch}
.qa-item h3{font-size:17.5px; margin-bottom:8px; letter-spacing:-.01em}
.qa-item p{font-size:15.5px; line-height:1.6; color:var(--paper-600)}
.s-navy .qa-item p,.s-navy-deep .qa-item p{color:var(--navy-200)}
.qa-item p + p{margin-top:.7em}
@media (max-width:760px){ .qa{grid-template-columns:1fr} }

/* ── Simple explainer steps (numbered, no card slop) ─────────────────────── */
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(24px,3vw,44px)}
.step{border-top:1px solid var(--hair-light); padding-top:16px}
.s-navy .step,.s-navy-deep .step{border-top-color:var(--hair-dark)}
.step .n{font-family:var(--disp); font-weight:600; font-size:13px; color:var(--paper-500)}
.s-navy .step .n,.s-navy-deep .step .n{color:var(--navy-300)}
.step h3{font-size:17.5px; margin:8px 0 7px}
.step p{font-size:15px; line-height:1.55; color:var(--paper-600)}
.s-navy .step p,.s-navy-deep .step p{color:var(--navy-200)}
@media (max-width:760px){ .steps{grid-template-columns:1fr; gap:22px} }

/* ── "There's more" compact label grid ───────────────────────────────────── */
.more-list{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2.2vw,26px)}
.more-list .mi{border-top:1px solid var(--hair-dark); padding-top:14px}
.s-paper .more-list .mi,.s-paper-alt .more-list .mi{border-top-color:var(--hair-light)}
.more-list .mi h3{font-size:15.5px}
.more-list .mi p{font-size:13.5px; line-height:1.45; color:var(--navy-200); margin-top:5px}
.s-paper .more-list .mi p,.s-paper-alt .more-list .mi p{color:var(--paper-600)}
@media (max-width:820px){ .more-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:460px){ .more-list{grid-template-columns:1fr} }