/* SoldIQ landing page — cinematic layer on top of style.css.
   Loaded ONLY by index.html; the legal pages stay on the base sheet alone.
   No external requests: every url() here points at /media or /fonts.

   Two registers on one page:
   · the theme-following register (light or dark, from style.css tokens)
   · .dark-zone — always dark, regardless of prefers-color-scheme, because it
     sits over dark footage. The night clip averages #0f1b20, so --bg here is
     picked to bleed into it with no visible seam. */

.dark-zone {
  --bg:          #0A1317;
  --bg-alt:      #0E1B23;
  --card:        #101F28;
  --border:      #22343E;
  --text:        #EAF3F7;
  --sub:         #9DB3C0;
  --accent:      #5CC9DB;
  --accent-fg:   #05202A;
  --accent-ink:  #8FE0EC;
  --accent-soft: #0F2C34;
  --green:       #4ED08C;
  --green-soft:  #0D2A1E;
  --amber:       #E9A23B;
  --shadow: 0 1px 2px rgba(0,0,0,.55), 0 24px 60px -30px rgba(0,0,0,.95);
  background: var(--bg);
  color: var(--text);
}
.dark-zone .btn-ghost { background: transparent; color: var(--text); border-color: #33505E; }
.dark-zone .btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.dark-zone + .dark-zone { border-top: 0; }

/* Section seams are for light zones only — a hairline across dark footage
   is exactly the hard edge we're avoiding. */
section.dark-zone + section { border-top: 0; }

/* ==========================================================================
   HERO — ambient night plate + a thread that tells the story in real type

   The clip is wallpaper. Everything that carries meaning is text, so it stays
   sharp at any resolution, is legible to a screen reader, and can be reworded
   without re-rendering a frame. Two acts, both CSS gates set by an
   IntersectionObserver; only opacity and transform ever change.
   ========================================================================== */

/* On the landing page only, lift the bar out of flow so the hero starts at the
   true top of the viewport. */
.site-head { position: fixed; inset: 0 0 auto; }
/* anchor targets must clear the fixed bar */
html { scroll-padding-top: 5.5rem; }
@media (max-width: 640px) {
  .site-head { position: absolute; }   /* two-line bar is too tall to pin */
  html { scroll-padding-top: 0; }
}

.hero { padding-block: 0; }   /* the stage owns its own spacing */

.hero-stage {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; align-items: center;
  /* top padding clears the fixed bar and keeps the copy off the centre line */
  padding-block: clamp(6rem, 14vh, 8.5rem) clamp(3.5rem, 9vh, 5.5rem);
  overflow: hidden;   /* also clips the glow, so it can never widen the page */
}

.hero-media {
  position: absolute; inset: 0; z-index: 0;
  /* The poster is also the last-resort background: if the <video> never gets a
     source — no JS, reduced motion, a codec miss — this is what the visitor
     sees. Never blank. */
  background: #0A1317 url('/media/web/night-poster.jpg') center / cover no-repeat;
}
.hero-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* pull the frame slightly right so the phone stays in shot when a narrow
     viewport crops a 16:9 source */
  object-position: 52% 50%;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(101deg,
      rgba(6,12,16,.95) 0%, rgba(6,12,16,.87) 34%,
      rgba(6,12,16,.55) 64%, rgba(6,12,16,.74) 100%),
    /* bleed into the next dark section — craft note: no hard seam */
    linear-gradient(to bottom, rgba(6,12,16,.55) 0%, transparent 26%, transparent 66%, #0A1317 100%);
}
@media (max-width: 939px) {
  .hero-scrim {
    background:
      linear-gradient(to bottom, rgba(6,12,16,.92) 0%, rgba(6,12,16,.80) 40%,
        rgba(6,12,16,.88) 62%, #0A1317 100%);
  }
}

/* .wrap centres itself with margin-inline:auto, so the grid lives on the wrap
   and the two columns keep the page gutters. */
.hero-inner {
  position: relative; z-index: 2;
  display: grid; gap: clamp(2.25rem, 4vw, 3.25rem); align-items: center;
}
@media (min-width: 940px) {
  .hero-inner { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); }
}

.hero h1 {
  /* the ch measure has to live on the h1 itself — on a 17px wrapper it
     resolves against the wrapper's font and collapses the column */
  max-width: 13ch;
  font-size: clamp(2.3rem, 5.4vw, 4.15rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-bottom: 1.3rem;
  text-wrap: balance;
}
/* beside a card the headline has half the room, so it takes half the size, and
   the column itself is the measure — a ch cap on top of it only ragged it */
@media (min-width: 940px) {
  .hero h1 { font-size: clamp(2.4rem, 3.9vw, 3.5rem); max-width: none; }
}
.hero .lede { max-width: 58ch; color: #C3D4DE; font-size: clamp(1rem, 1.3vw, 1.09rem); line-height: 1.6; }
.hero .btn-row { margin-top: 1.5rem; }
.hero .fineprint { max-width: 62ch; margin-top: 1.25rem; }
/* a short laptop is the tightest real case — drop the optional line, keep the
   headline, the promise, the buttons and the whole thread */
@media (min-width: 940px) and (max-height: 820px) {
  .hero .fineprint { display: none; }
  .hero .lede { max-width: 54ch; }
}
/* Stacked, the same line puts another 150px between the headline and the thread
   for something the pricing note and the contact card both say again further
   down. It goes. */
@media (max-width: 939px) { .hero .fineprint { display: none; } }

/* ---------- the thread ---------------------------------------------------- */

.hero-thread {
  position: relative; z-index: 2; margin: 0;
  max-width: 30rem; width: 100%; margin-inline: auto;
}
/* The glow, in two layers because the card covers the middle of any halo drawn
   behind it: a wide bloom that spills past the edges, and a rim on the card
   itself. Both are opacity-and-transform only. */
.hero-thread::before {
  content: ""; position: absolute; z-index: -1; inset: -24% -28%;
  background: radial-gradient(ellipse at 50% 46%,
    rgba(92,201,219,.30) 0%, rgba(92,201,219,.15) 40%, transparent 72%);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
  transition-delay: .16s;
}
.js .hero-thread::before { opacity: 0; transform: scale(.86); }
.hero.act2 .hero-thread::before { opacity: 1; transform: none; }

/* .thread / .thread-head / .bubble / .draft all come from style.css and pick up
   the .dark-zone tokens for free. Only the differences live here. */
.hero-thread .thread {
  position: relative;
  background: color-mix(in srgb, var(--card) 93%, transparent);
  padding: 1.15rem 1.15rem 1.25rem;
}
/* the rim — the half of the glow that is actually legible, because the card
   does not sit on top of it */
.hero-thread .thread::after {
  content: ""; position: absolute; inset: -1px; pointer-events: none;
  border: 1px solid rgba(92,201,219,.5); border-radius: var(--radius);
  box-shadow: 0 0 0 4px rgba(92,201,219,.06), 0 26px 70px -30px rgba(92,201,219,.5);
  transition: opacity .7s ease; transition-delay: .22s;
}
.js .hero-thread .thread::after { opacity: 0; }
.hero.act2 .hero-thread .thread::after { opacity: 1; }
.hero-thread .thread-head { font-size: .74rem; }
.hero-thread .thread-head .stamp { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hero-thread .thread-head .tag { margin-right: .4rem; }
.hero-thread .bubble { line-height: 1.45; }
.hero-thread .bubble + .bubble { margin-top: 0; }
.hero-thread .draft { margin-top: 1rem; background: var(--bg); }
.hero-thread .draft p { margin: 0; line-height: 1.45; }
/* the strongest of the three chips reads as the one a human is about to press */
.hero-thread .draft-actions span:first-child {
  background: var(--accent-soft); color: var(--accent-ink); font-weight: 800;
}
/* the channel change, called out the way .fstep .hard calls out a hard rule */
.hero-thread .divider {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem;
  margin: 1.05rem 0 .7rem; padding-left: .8rem;
  border-left: 2px solid var(--green);
  font-size: .72rem; font-weight: 650; color: var(--sub);
}
.hero-thread figcaption { padding-inline: .15rem; }

/* The silence. Beats 2 and 3 reserve their box from the start so nothing below
   them shifts; this sits over that reserved box and says why it's empty. It is
   removed outright wherever every beat is shown at once, because there it
   would contradict the reply sitting underneath it. */
.hb-later { position: relative; }
.hb-wait { display: none; }
/* sits just under the last thing the buyer said, the way a status line would in
   a real thread — the empty room below it is the rest of the night */
.js .hb-wait {
  display: flex; flex-direction: column; gap: .3rem;
  position: absolute; inset: 1.5rem 0 auto; margin: 0; padding-inline: .2rem;
  font-size: .82rem; line-height: 1.5; color: var(--sub);
  opacity: 0; transition: opacity .7s ease;
}
.js .hb-wait b { color: #B9CBD6; font-weight: 750; font-size: .92rem; letter-spacing: -0.012em; }
.hero.act1 .hb-wait { opacity: 1; transition-delay: 1.25s; }
.hero.act2 .hb-wait { opacity: 0; transition-duration: .3s; transition-delay: 0s; }

/* ---------- the two acts -------------------------------------------------- */
/* Start states are gated on .js. With scripting off none of this applies: the
   copy, the card and all three beats are simply there, finished and still. */
.hero-copy > *, .hero-thread, .hb {
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.js .hero-copy > *, .js .hero-thread { opacity: 0; transform: translateY(18px); }
.js .hb { opacity: 0; transform: translateY(12px); }

.hero.act1 .hero-copy > *, .hero.act1 .hero-thread, .hero.act2 .hb2, .hero.act2 .hb3 {
  opacity: 1; transform: none;
}
.hero.act1 .hero-copy > *:nth-child(1) { transition-delay: .06s; }
.hero.act1 .hero-copy > *:nth-child(2) { transition-delay: .14s; }
.hero.act1 .hero-copy > *:nth-child(3) { transition-delay: .24s; }
.hero.act1 .hero-copy > *:nth-child(4) { transition-delay: .34s; }
.hero.act1 .hero-copy > *:nth-child(5) { transition-delay: .42s; }
.hero.act1 .hero-thread  { transition-delay: .30s; }
.hero.act1 .hb1 { opacity: 1; transform: none; transition-delay: .78s; }
/* The payoff has to be over inside the first flick — the hero does not pin, so
   it cannot outlast a normal scroll. Whole of act 2 lands inside ~0.9s. */
.hb2, .hb3 { transition-duration: .55s; }
.hero.act2 .hb2 { transition-delay: .03s; }
.hero.act2 .hb3 { transition-delay: .30s; }

/* the little "scroll" tell — it is the invitation to trigger act 2 */
.scroll-cue {
  position: absolute; left: 50%; bottom: 1.5rem; z-index: 2;
  transform: translateX(-50%);
  display: none; align-items: center; gap: .55rem;
  font-size: .7rem; font-weight: 750; letter-spacing: .16em; text-transform: uppercase;
  color: #7E97A5;
}
.js .scroll-cue { display: flex; }
.scroll-cue i {
  display: block; width: 1px; height: 26px; background: linear-gradient(#5CC9DB, transparent);
  transform-origin: top;
  animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue { 0%,100% { transform: scaleY(.35); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }
/* zero-height marker at the foot of the stage; act2's observer watches it */
.hero-cue { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; }

/* Reduced motion: every beat painted where it ends up, nothing moves, and the
   ambient plate is never even fetched (the JS skips it). */
@media (prefers-reduced-motion: reduce) {
  .js .hero-copy > *, .js .hero-thread, .js .hb {
    opacity: 1; transform: none; transition: none;
  }
  .js .hero-thread::before,
  .js .hero-thread .thread::after { opacity: 1; transform: none; transition: none; }
  .js .hb-wait { display: none; }
}

/* ==========================================================================
   CHANNEL STRIP
   ========================================================================== */

.channels { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.channel-row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem 1.35rem; margin-top: 1.1rem;
}
.channel-row li {
  font-size: clamp(.95rem, 2.2vw, 1.15rem); font-weight: 700;
  letter-spacing: -0.015em; color: var(--text);
}
.channel-row li + li::before {
  content: "·"; color: var(--accent); margin-right: 1.35rem; font-weight: 800;
}
.channels ul { list-style: none; padding: 0; margin: 0; }
.channels .note { margin-top: 1.1rem; font-size: .89rem; color: var(--sub); max-width: 64ch; }

/* ==========================================================================
   PINNED FEATURES over the handoff clip
   ========================================================================== */

.pinned { position: relative; padding-block: 0; }
/* The pin is an absolutely-positioned layer the exact size of the section,
   with the sticky pane inside it. A sticky element pulled back with a negative
   margin instead can travel a whole viewport past its parent and overhang the
   next section — so no negative margins here, and no overflow on this element
   either (it would become the scroll container and kill the stick). */
.pin-bg { position: absolute; inset: 0; z-index: 0; }
.pin-pane {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background: #0A1317 url('/media/web/handoff-poster.jpg') center / cover no-repeat;
}
/* The clip's on-screen text is model-generated gibberish. Blurred, dimmed and
   scrimmed it reads as mood; bare and full-bleed it reads as fake. Never bare.
   scale(1.08) hides the soft edge the blur leaves at the frame boundary. */
.pin-pane video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: blur(3px) brightness(.42) saturate(.8);
  transform: scale(1.08);
}
/* one blur pass only — a backdrop-filter here would composite the whole sticky
   layer again every frame for no visible gain */
.pin-pane::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(8,15,19,.92) 0%, rgba(8,15,19,.80) 52%, rgba(8,15,19,.70) 100%),
    linear-gradient(to bottom, #0A1317 0%, transparent 16%, transparent 84%, #0A1317 100%);
}
.pin-body { position: relative; z-index: 1; padding-block: clamp(3.5rem, 9vw, 7rem); }
.pin-intro { min-height: 46svh; display: flex; flex-direction: column; justify-content: center; }

.feature-steps { list-style: none; padding: 0; margin: 0; counter-reset: f; }
.fstep {
  counter-increment: f;
  min-height: 78svh;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 40rem;
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.js .fstep { opacity: 0; transform: translateY(28px); }
.fstep.in { opacity: 1; transform: none; }
.fstep .num {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: .74rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1rem;
}
.fstep .num::before {
  content: "0" counter(f);
  font-size: .74rem; color: var(--accent-ink);
  border: 1px solid var(--accent); border-radius: 6px; padding: .2rem .45rem;
}
.fstep h3 {
  font-size: clamp(1.8rem, 5.2vw, 3rem); font-weight: 800; letter-spacing: -0.032em;
  line-height: 1.05; margin-bottom: .9rem;
}
.fstep p { font-size: clamp(1rem, 2.2vw, 1.15rem); color: #C3D4DE; max-width: 40ch; }
.fstep .hard {
  margin-top: 1.1rem; font-size: .88rem; color: var(--sub);
  border-left: 2px solid var(--accent); padding-left: .85rem; max-width: 46ch;
}
@media (prefers-reduced-motion: reduce) {
  .js .fstep { opacity: 1; transform: none; transition: none; }
  .fstep { min-height: 0; margin-bottom: 3rem; }
  .pin-intro { min-height: 0; }
}

/* ==========================================================================
   PRODUCT FACTS
   ========================================================================== */

.facts { list-style: none; padding: 0; margin: 2.5rem 0 0; }
/* fixed key column so the four statements share one left edge — an auto column
   ragged them by the width of the longest label */
.facts li {
  display: grid; grid-template-columns: 1fr; gap: .35rem 1.1rem; align-items: baseline;
  padding-block: 1.15rem;
  border-top: 1px solid var(--border);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.js .facts li { opacity: 0; transform: translateY(14px); }
.facts.in li { opacity: 1; transform: none; }
.facts.in li:nth-child(1) { transition-delay: .00s; }
.facts.in li:nth-child(2) { transition-delay: .10s; }
.facts.in li:nth-child(3) { transition-delay: .20s; }
.facts.in li:nth-child(4) { transition-delay: .30s; }
.facts li:last-child { border-bottom: 1px solid var(--border); }
.facts .k {
  font-size: .72rem; font-weight: 800; letter-spacing: .16em; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.facts .v {
  font-size: clamp(1.15rem, 3.2vw, 1.75rem); font-weight: 700; letter-spacing: -0.026em;
  line-height: 1.2;
}
.facts .why { font-size: .89rem; color: var(--sub); max-width: 56ch; }
@media (min-width: 620px) {
  .facts li { grid-template-columns: 5.75rem minmax(0, 1fr); gap: 0 1.1rem; }
  .facts .why { grid-column: 2; margin-top: .35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .js .facts li { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   PRODUCT — browser frame + wall board, built in HTML/CSS
   ========================================================================== */

.product-stage {
  display: grid; gap: 1.25rem; margin-top: 2.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 940px) { .product-stage { grid-template-columns: 1.35fr .85fr; align-items: start; } }

.browser {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow); overflow: hidden;
}
.browser-bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .8rem; border-bottom: 1px solid var(--border); background: var(--bg-alt);
}
.browser-bar .dots { display: flex; gap: .32rem; flex: 0 0 auto; }
.browser-bar .dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.browser-bar .url {
  flex: 1; min-width: 0; font-size: .72rem; color: var(--sub); font-weight: 650;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: .22rem .7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.screen { padding: 1.15rem 1.15rem 1.3rem; }
.screen-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem;
  flex-wrap: wrap; margin-bottom: 1rem;
}
.screen-head h3 { font-size: 1.3rem; letter-spacing: -0.03em; }
.screen-head .when { font-size: .78rem; color: var(--sub); font-weight: 650; }

.screen-tabs {
  display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1.1rem;
  font-size: .74rem; font-weight: 700;
}
.screen-tabs span {
  padding: .26rem .6rem; border-radius: 7px; color: var(--sub); border: 1px solid transparent;
}
.screen-tabs span[aria-current] {
  background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent);
}

.q-label {
  font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--sub); margin: 1.15rem 0 .5rem;
}
.q-label:first-of-type { margin-top: 0; }
.q { display: grid; gap: .45rem; }
.q-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: .7rem; align-items: start;
  border: 1px solid var(--border); border-radius: 10px; padding: .55rem .7rem;
  background: var(--bg);
}
/* the pip reads as a status light on the name, so it lines up with the name,
   not with the centre of a two-line row */
.q-row .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--sub); margin-top: .45rem; }
.q-row .age { margin-top: .1rem; }
.q-row.hot .pip { background: var(--amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--amber) 20%, transparent); }
.q-row.esc .pip { background: #E5484D; box-shadow: 0 0 0 3px rgba(229,72,77,.2); }
.q-row.ok .pip { background: var(--green); }
.q-row .who { font-weight: 700; font-size: .88rem; letter-spacing: -0.01em; }
.q-row .what { display: block; font-weight: 500; font-size: .78rem; color: var(--sub); }
.q-row .age { font-size: .72rem; font-weight: 750; color: var(--sub); white-space: nowrap; font-variant-numeric: tabular-nums; }
.q-row.esc .age { color: #E5484D; }

/* the dark half — the wall board on the sales-office TV */
.wall {
  background: #08121A; color: #E6F2F7;
  border: 1px solid #1B2E39; border-radius: 14px;
  padding: 1.35rem 1.3rem 1.4rem; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.wall::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 70% at 50% -10%, rgba(92,201,219,.16), transparent 62%);
  pointer-events: none;
}
.wall > * { position: relative; }
.wall .board-label {
  font-size: .66rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase;
  color: #5CC9DB; margin: 0 0 .9rem;
}
.wall .count {
  font-size: clamp(4.5rem, 14vw, 7rem); font-weight: 800; line-height: .84;
  letter-spacing: -0.055em; font-variant-numeric: tabular-nums; margin: 0;
}
.wall .count-label {
  font-size: .82rem; font-weight: 750; color: #93AAB7; margin: .55rem 0 1.35rem;
  letter-spacing: .01em;
}
.wall .aging { list-style: none; padding: 0; margin: 0; display: grid; gap: .42rem; }
.wall .aging li {
  display: flex; justify-content: space-between; gap: .8rem;
  font-size: .84rem; padding: .42rem 0; border-top: 1px solid #1B2E39;
}
.wall .aging b { font-weight: 700; }
.wall .aging span { color: #93AAB7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.wall .foot {
  margin: 1.15rem 0 0; padding-top: .9rem; border-top: 1px solid #1B2E39;
  font-size: .76rem; color: #7E97A5;
}

.stage-caption { font-size: .8rem; color: var(--sub); margin-top: 1.1rem; max-width: 74ch; }

/* ==========================================================================
   PRICING
   ========================================================================== */

/* equal-height cards so the three CTAs land on one line — the featured card's
   lift is the only thing allowed to break that line */
.tiers { display: grid; gap: 1.1rem; margin-top: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.5rem 1.4rem 1.6rem; display: flex; flex-direction: column;
}
.tier.featured {
  border-color: var(--accent); box-shadow: var(--shadow);
  outline: 1px solid var(--accent); outline-offset: 0;
}
@media (min-width: 900px) { .tier.featured { transform: translateY(-.85rem); padding-block: 1.9rem 2rem; } }
.tier .badge {
  align-self: flex-start; font-size: .66rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; background: var(--accent); color: var(--accent-fg);
  border-radius: 999px; padding: .24rem .6rem; margin-bottom: .8rem;
}
.tier h3 { font-size: 1.1rem; letter-spacing: -0.02em; }
.tier .price {
  display: flex; align-items: baseline; gap: .35rem; margin: .7rem 0 .2rem;
  font-weight: 800; letter-spacing: -0.04em;
}
.tier .price .amt { font-size: clamp(2.2rem, 6vw, 2.9rem); line-height: 1; }
.tier .price .per { font-size: .92rem; font-weight: 700; color: var(--sub); letter-spacing: 0; }
.tier .seats { font-size: .86rem; color: var(--sub); margin: 0 0 1.15rem; }
.tier ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .5rem; }
.tier li { position: relative; padding-left: 1.5rem; font-size: .92rem; color: var(--sub); }
.tier li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: .48rem; height: .48rem; border-radius: 2px; background: var(--accent);
}
.tier li.adds { color: var(--text); font-weight: 650; }
.tier .btn { margin-top: auto; width: 100%; }
.pricing-note { margin-top: 1.75rem; font-size: .9rem; color: var(--sub); max-width: 68ch; }

/* ==========================================================================
   FAQ
   ========================================================================== */

/* heading left, accordion right — a 74ch column alone leaves half the row empty */
.faq-grid { display: grid; gap: 1rem 3.5rem; }
@media (min-width: 900px) {
  .faq-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: start; }
  .faq-grid > .faq { margin-top: 0; }
  .faq-grid .faq-head { position: sticky; top: 6.5rem; }
}
.faq { margin-top: 1.75rem; max-width: 68ch; }
.faq details {
  border-top: 1px solid var(--border);
}
.faq details:last-of-type { border-bottom: 1px solid var(--border); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-weight: 700; font-size: clamp(1rem, 2.4vw, 1.12rem); letter-spacing: -0.018em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .35rem; top: 1.55rem;
  width: 11px; height: 11px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.75rem; }
.faq summary:hover { color: var(--accent); }
.faq .a { padding: 0 0 1.35rem; color: var(--sub); font-size: .98rem; max-width: 66ch; }
.faq .a p + p { margin-top: .75rem; }

/* ==========================================================================
   FINAL CTA over the morning clip
   ========================================================================== */

.cta { position: relative; overflow: hidden; padding-block: clamp(5rem, 14vw, 9rem); }
.cta-media {
  position: absolute; inset: 0; z-index: 0;
  background: #0A1317 url('/media/web/morning-poster.jpg') center / cover no-repeat;
}
.cta-media video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  /* the clip is warm brown-gold (#71695b avg) and fights the teal accent.
     Pull the saturation, keep the warmth. */
  filter: saturate(.85) brightness(.62);
}
.cta-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(98deg, rgba(8,15,19,.92) 0%, rgba(8,15,19,.74) 46%, rgba(8,15,19,.42) 100%),
    linear-gradient(to bottom, #0A1317 0%, transparent 22%, transparent 78%, #0A1317 100%);
}
.cta .wrap { position: relative; z-index: 1; }
.cta h2 {
  font-size: clamp(1.9rem, 5.6vw, 3.2rem); letter-spacing: -0.034em; line-height: 1.06;
  max-width: 18ch;
}
.cta .lede { margin-top: 1.15rem; color: #C3D4DE; }

/* ==========================================================================
   small shared bits
   ========================================================================== */

/* Hidden ONLY when scripting is on to un-hide it again. Without .js these
   elements never leave their finished state — a scriptless visitor gets the
   whole page, not an empty one. */
[data-reveal] { transition: opacity .65s ease, transform .65s cubic-bezier(.22,.61,.36,1); }
.js [data-reveal] { opacity: 0; transform: translateY(18px); }
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .scroll-cue i { animation: none; }
}

.rule-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; }