/* ==========================================================================
   Jacob Joseph — Chair, Camera, Cash
   Shared styles: VSL page + application + confirmation

   Same architecture as the Gavin Larnard funnel (same class names, same
   structure) so anyone can move between the two projects without relearning
   anything. What changes is the brand and the audience.

   Palette: white · near-black · gold
   Taken from Jacob's own brand — josephsignatureline.com is a white ground
   with black type and gold accents, and his best-selling product is literally
   the "gold set". This page should look like it came from the same company.

   Rule that makes this work: GOLD IS ONLY EVER THE ACTION.
   Buttons are gold. Nothing else on any page in this funnel is gold except
   the small mono eyebrows that label a section. If everything is an accent,
   nothing is.

   Audience note — this is the big difference from the Gavin build.
   Gavin's audience is 55+, skeptical, reading on an iPad: 18px base, Georgia
   headings, lots of air, calm over hype. Jacob's audience is barbers roughly
   20–45 reading on a phone between clients. So: 17px base, a tight modern
   grotesque, denser rhythm, and every tap target sized for a thumb.
   ========================================================================== */

:root {
  /* Neutrals — the brand is mostly this */
  --white: #ffffff;
  --bg: #f7f6f3;
  --bg-2: #f1efea;
  --ink: #101010;
  --ink-soft: #3c3833;
  --text: #3c3833;
  --text-muted: #767068;
  --text-light: #9a948b;
  --border: #e4e0d8;
  --border-2: #cdc7bb;

  /* Gold — ACTION ONLY */
  --gold: #a67c2a;
  --gold-bright: #c9a24e;
  --gold-hover: #b98d34;
  --gold-deep: #7e5c18;
  --gold-tint: #f8f2e4;
  --gold-line: rgba(201, 162, 78, 0.34);

  /* Semantic */
  --ok: #4c7a55;
  --ok-tint: #eef5ef;

  --maxw: 1000px;
  --measure: 66ch;
  --radius: 12px;
  --shadow-sm: 0 1px 3px rgba(16, 16, 16, 0.06);
  --shadow: 0 4px 20px rgba(16, 16, 16, 0.08);
  --shadow-lg: 0 18px 50px rgba(16, 16, 16, 0.24);
  --shadow-btn: 0 4px 0 var(--gold-deep), 0 12px 26px rgba(166, 124, 42, 0.28);

  --font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-read: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

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

img, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.038em;
  color: var(--ink);
  margin: 0 0 0.5em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 7.4vw, 4.4rem); letter-spacing: -0.048em; line-height: 0.96; }
h2 { font-size: clamp(1.55rem, 4.2vw, 2.3rem); }
h3 { font-size: 1.16rem; letter-spacing: -0.02em; line-height: 1.25; }

p { margin: 0 0 1em; overflow-wrap: break-word; }
p:last-child { margin-bottom: 0; }
a { color: var(--gold); }
strong { color: var(--ink); font-weight: 600; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- Layout ---------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.wrap--narrow { max-width: 720px; }

.section { padding: 58px 0; }
.section--white { background: var(--white); }
.section--tint { background: var(--gold-tint); }

.lede {
  font-family: var(--font-read);
  font-size: 1.14rem;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 54ch;
}

/* ---------- Topbar ---------- */
.topbar {
  display: flex; flex-wrap: wrap; gap: 10px 20px;
  align-items: center; justify-content: space-between;
  max-width: var(--maxw); margin: 0 auto;
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--border);
}
.topbar .brand {
  font-weight: 800; font-size: 0.86rem; letter-spacing: -0.01em;
  text-transform: uppercase; color: var(--ink);
}
.topbar .brand i { color: var(--gold); font-style: normal; }
.topbar .meta {
  font-family: var(--font-mono); font-size: 0.63rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-light);
}

/* ---------- Hero ---------- */
.hero { padding: 64px 0 8px; }   /* topbar removed — hero carries the top spacing now */

/* The "we're talking about YOU" line. First thing on the page. Its only
   job is instant self-identification — a barber should know in one second
   whether the next 14 minutes are for him. */
.audience-callout {
  font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold); font-weight: 500;
  margin: 0 0 16px;
}
/* Headline reads as one spoken sentence, centred. Nothing stacked, no rule —
   the guarantee is just the end of the line, in gold. Centring only applies to
   the eyebrow, headline and subhead; everything below stays left. */
.hero .audience-callout,
.hero h1,
.hero .sub { text-align: center; margin-left: auto; margin-right: auto; }

.hero h1 {
  max-width: 21ch;
  margin-bottom: 24px;
  line-height: 1.04;
  letter-spacing: -0.038em;
  text-wrap: balance;
}
.hero h1 .accent { color: var(--gold); }

.hero .sub { max-width: 46ch; }

@media (max-width: 560px) {
  .hero h1 { max-width: 15ch; line-height: 1.06; }
}
.sub {
  font-family: var(--font-read);
  font-size: clamp(1.1rem, 2.5vw, 1.34rem); line-height: 1.5;
  color: var(--ink-soft); max-width: 50ch; margin-bottom: 30px;
}
.sub b { color: var(--ink); font-weight: 600; }

/* Offer facts strip — the four things every prospect asks before watching. */
.facts { display: flex; flex-wrap: wrap; border: 1px solid var(--border); background: var(--white); margin-bottom: 34px; }
.facts div { flex: 1 1 116px; padding: 13px 16px; border-right: 1px solid var(--border); min-width: 0; }
.facts div:last-child { border-right: 0; }
.facts dt { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-light); margin-bottom: 3px; }
.facts dd { margin: 0; font-weight: 700; font-size: 0.92rem; color: var(--ink); letter-spacing: -0.01em; }

/* ---------- Buttons — GOLD IS ONLY EVER THE ACTION ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em;
  background: var(--gold); color: var(--white); text-decoration: none;
  padding: 16px 32px; border: 0; border-radius: 4px; cursor: pointer;
  box-shadow: var(--shadow-btn);
  transition: background .16s, transform .16s, box-shadow .16s;
}
.btn:hover { background: var(--gold-hover); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-deep); }
.btn--xl { font-size: 1.1rem; padding: 19px 40px; width: 100%; }
.btn-ghost {
  background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--border-2);
  padding: 13px 26px; font-size: 0.94rem;
}
.btn-ghost:hover { background: var(--bg-2); }
.btn-note { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-muted); letter-spacing: 0.05em; }

.cta-block { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 26px 0 0; }

/* ---------- Video ---------- */
.video-wrap { margin: 0 0 8px; }
.video-frame {
  position: relative; aspect-ratio: 16 / 9;
  background: linear-gradient(160deg, #191919 0%, #0c0c0c 60%, #1c1a16 100%);
  border: 1px solid var(--ink); border-radius: 6px; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.video-frame video, .video-frame iframe { width: 100%; height: 100%; display: block; border: 0; }
.video-caption {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em;
  color: var(--text-light); text-align: center; margin: 12px 0 0;
}

/* Custom player chrome. Native controls are off so the timeline can be
   chaptered — same approach as the Gavin build. No third-party player
   script, so an ad blocker can never take the video out. */
.vplayer { cursor: pointer; }
.vp-bigplay, .vp-unmute {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5;
  border: 0; cursor: pointer; font: inherit;
}
.vp-bigplay {
  width: 78px; height: 78px; border-radius: 50%;
  background: rgba(201, 162, 78, 0.92); color: #101010; font-size: 1.7rem;
  display: flex; align-items: center; justify-content: center; padding-left: 5px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
.vp-bigplay[hidden], .vp-unmute[hidden] { display: none; }
.vp-unmute {
  background: rgba(16, 16, 16, 0.88); color: #fff; border-radius: 100px;
  padding: 13px 26px; font-size: 1rem; font-weight: 700;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.vp-unmute:hover { background: rgba(16, 16, 16, 0.97); }

.vp-controls {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  padding: 22px 14px 10px;
  background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,0));
  opacity: 0; transition: opacity .2s;
}
.vplayer:hover .vp-controls, .vplayer:focus-within .vp-controls, .vp-controls.is-on { opacity: 1; }
.vp-timeline { position: relative; display: flex; gap: 2px; height: 16px; align-items: center; cursor: pointer; }
.vp-seg { position: relative; flex: 1; height: 4px; background: rgba(255,255,255,.28); border-radius: 2px; overflow: hidden; transition: height .12s; }
.vp-timeline:hover .vp-seg { height: 7px; }
.vp-seg-fill { position: absolute; inset: 0; width: 0; background: var(--gold-bright); }
.vp-tip {
  position: absolute; bottom: 22px; transform: translateX(-50%);
  background: rgba(16,16,16,.95); color: #fff; border-radius: 4px;
  padding: 5px 9px; font-family: var(--font-mono); font-size: .64rem; white-space: nowrap; pointer-events: none;
}
.vp-tip[hidden] { display: none; }
.vp-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; color: #fff; }
.vp-btn { background: none; border: 0; color: #fff; font-size: 1rem; cursor: pointer; padding: 4px; line-height: 1; }
.vp-time, .vp-chapter { font-family: var(--font-mono); font-size: .66rem; color: rgba(255,255,255,.85); }
.vp-chapter { color: var(--gold-bright); }
.vp-push { margin-left: auto; }

/* ---------- VSL gate ---------- */
/* Deliberately softer than the Gavin build. His VSL is 4½ minutes, so locking
   the form until the very end costs nothing. Jacob's is ~14½, and hard-locking
   a 14-minute video would bury the application behind a wall most people never
   reach. This unlocks at GATE_AT (see index.html) — far enough in that they've
   heard the price and the honesty section, early enough that we don't lose them. */
.vsl-lock {
  max-width: 620px; margin: 26px auto 0;
  background: var(--gold-tint); border: 2px dashed var(--gold-line); border-radius: var(--radius);
  padding: 28px 24px; text-align: center;
}
.vsl-lock-title { font-weight: 700; font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--ink); margin: 0 0 8px; }
.vsl-lock-count { font-family: var(--font-mono); font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 600; color: var(--gold); margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.vsl-lock-sub { font-size: .95rem; color: var(--text-muted); margin: 0 auto; max-width: 42ch; }

.apply-embed { margin-top: 28px; }
.apply-embed[hidden] { display: none; }
.apply-embed.is-in { animation: applyIn .5s ease both; }
@keyframes applyIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.apply-kicker { text-align: center; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 14px; }
.apply-embed iframe { width: 100%; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--white); display: block; }

/* ---------- Testimonials ---------- */
/* PARKED: the testimonials section was pulled from index.html for now.
   These rules are intentionally left in place — the section is expected
   back once Jacob has collected real barber testimonials. Don't delete. */
.testimonials { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 26px; }
@media (min-width: 680px) { .testimonials { grid-template-columns: 1fr 1fr; } }
.testimonial { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 22px 18px; }
.testimonial .quote { font-family: var(--font-read); font-size: 1.03rem; line-height: 1.55; color: var(--ink); margin: 0 0 14px; }
.testimonial .who { display: flex; align-items: center; gap: 11px; border-top: 1px solid var(--border); padding-top: 12px; margin: 0; }
.testimonial .av {
  width: 32px; height: 32px; border-radius: 50%; background: var(--bg-2);
  border: 1px solid var(--border-2); flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .66rem; color: var(--text-muted); font-weight: 600;
}
.testimonial .nm { font-weight: 600; font-size: .86rem; color: var(--ink); line-height: 1.3; }
.testimonial .src { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-light); line-height: 1.4; }

/* Placeholder slots for testimonials we don't have yet. Visually obvious on
   purpose — nobody should be able to ship these by accident. */
.placeholder {
  border: 1px dashed var(--border-2); border-radius: var(--radius);
  background: repeating-linear-gradient(135deg, var(--white) 0 10px, var(--bg-2) 10px 20px);
  padding: 22px; display: flex; flex-direction: column; gap: 11px;
}
.placeholder-tag {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold); background: var(--gold-tint); border: 1px solid var(--gold-line);
  padding: 3px 7px; align-self: flex-start;
}
.placeholder h3 { margin: 0; font-size: .95rem; }
.placeholder p { font-size: .88rem; color: var(--text-muted); margin: 0; }
.placeholder ul { margin: 0; padding-left: 17px; }
.placeholder li { font-family: var(--font-mono); font-size: .66rem; color: var(--text-muted); margin-bottom: 4px; line-height: 1.5; }

.callout { border-left: 2px solid var(--gold); padding: 2px 0 2px 18px; margin: 30px 0 0; }
.callout p { font-family: var(--font-read); font-size: 1.06rem; line-height: 1.55; }

/* ---------- Application (apply.html) ---------- */
.progress { position: sticky; top: 0; z-index: 20; height: 4px; background: var(--border); }
.progress-bar { height: 100%; width: 0; background: var(--gold); transition: width .3s ease; }

.app-main { padding: 34px 0 70px; }
.app-body { background: var(--white); }
.stage { min-height: 320px; }
.q-count { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0 0 12px; }
.q-title { font-size: clamp(1.3rem, 3.6vw, 1.85rem); font-weight: 800; letter-spacing: -.032em; line-height: 1.14; color: var(--ink); margin: 0 0 8px; }
.q-help { font-family: var(--font-read); font-size: .98rem; color: var(--text-muted); margin: 0 0 22px; max-width: 50ch; }
.q-error { color: #a33; font-size: .9rem; margin: 12px 0 0; }

.opts { display: flex; flex-direction: column; gap: 9px; }
.opt {
  display: flex; align-items: center; gap: 13px;
  background: var(--white); border: 1px solid var(--border-2); border-radius: 6px;
  padding: 15px 17px; cursor: pointer; font-size: 1rem; color: var(--ink);
  text-align: left; width: 100%; font-family: var(--font);
  transition: border-color .12s, background .12s;
}
.opt:hover { border-color: var(--gold-bright); background: var(--gold-tint); }
.opt[aria-checked="true"] { border-color: var(--gold); background: var(--gold-tint); box-shadow: inset 0 0 0 1px var(--gold); }
.opt-key {
  flex: none; width: 24px; height: 24px; border-radius: 4px;
  background: var(--bg-2); border: 1px solid var(--border-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted);
}
.opt[aria-checked="true"] .opt-key { background: var(--gold); border-color: var(--gold); color: #fff; }

.field-group { display: grid; grid-template-columns: 1fr; gap: 15px; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 15px; }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field-label { display: block; font-weight: 600; font-size: .92rem; color: var(--ink); margin-bottom: 6px; }
.field {
  width: 100%; background: var(--white); color: var(--ink);
  border: 1px solid var(--border-2); border-radius: 6px;
  font-family: var(--font); font-size: 1rem; line-height: 1.5; padding: 13px 14px;
}
textarea.field { font-family: var(--font-read); font-size: 1.05rem; min-height: 130px; resize: vertical; }
.field::placeholder { color: #a9a29a; }
.field--select {
  appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

.consent-row { display: flex; gap: 11px; align-items: flex-start; margin-top: 6px; }
.consent-row input { width: 18px; height: 18px; flex: none; margin-top: 3px; accent-color: var(--gold); }
.consent-text { font-size: .82rem; color: var(--text-muted); line-height: 1.5; }

.app-nav { display: flex; gap: 12px; align-items: center; margin-top: 26px; }
.app-nav .btn { flex: 1; }
.app-hint { font-family: var(--font-mono); font-size: .66rem; color: var(--text-light); margin-top: 14px; letter-spacing: .04em; }

.done { text-align: left; padding: 40px 0; }
.done-tick {
  width: 52px; height: 52px; border-radius: 50%; background: var(--ok-tint);
  border: 1px solid var(--ok); color: var(--ok);
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 18px;
}

/* ---------- Confirmation ---------- */
.success { background: var(--ink); color: var(--white); padding: 52px 0; }
.success h1 { color: var(--white); font-size: clamp(1.9rem, 5.4vw, 3rem); max-width: 18ch; }
.success .sub { color: rgba(255,255,255,.8); }
.success .audience-callout { color: var(--gold-bright); }

.step { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 24px 0; border-top: 1px solid var(--border); }
.step:last-of-type { border-bottom: 1px solid var(--border); }
.step-head { display: flex; align-items: baseline; gap: 13px; }
.step-n { font-family: var(--font-mono); font-size: .72rem; font-weight: 600; color: var(--gold); flex: none; }
.step-head h3 { margin: 0; }
.step-text { padding-left: 0; }
@media (min-width: 640px) { .step-text { padding-left: 32px; } }
.cal-wrap { margin-top: 16px; border: 1px solid var(--border-2); border-radius: var(--radius); background: var(--white); padding: 18px; }

/* ---------- Disclaimer + footer ---------- */
.disclaimer { background: var(--bg-2); padding: 40px 0; border-top: 1px solid var(--border); }
.disclaimer h3 { font-size: .78rem; font-family: var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; margin-bottom: 14px; }
.disclaimer p { font-size: .8rem; line-height: 1.7; color: var(--text-muted); max-width: 78ch; }

.footer { background: var(--ink); color: rgba(255,255,255,.55); padding: 30px 0 40px; font-size: .78rem; }
.footer a { color: rgba(255,255,255,.75); margin-right: 18px; text-decoration: none; }
.footer a:hover { color: var(--gold-bright); }

/* ---------- Sticky CTA ---------- */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: rgba(255,255,255,.97); border-top: 1px solid var(--border-2);
  padding: 10px 18px; display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap;
  transform: translateY(105%); transition: transform .25s ease;
}
.sticky-cta.is-on { transform: translateY(0); }
.sticky-cta .t { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--text-muted); }
.sticky-cta .btn { padding: 11px 24px; font-size: .88rem; box-shadow: none; }

/* Build-note block. Dashed and loud so it can't ship by accident. */
.proto-warn {
  margin: 30px 0 0; border: 1px dashed var(--border-2); background: var(--white);
  border-radius: var(--radius); padding: 20px 22px;
}
.proto-warn h3 { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); font-weight: 500; margin-bottom: 12px; }
.proto-warn ul { margin: 0; padding-left: 18px; }
.proto-warn li { font-size: .82rem; color: var(--text-muted); margin-bottom: 7px; line-height: 1.55; }
.proto-warn b { color: var(--ink); }

/* ==========================================================================
   Confirmation page — booked, pre-call video, FAQ videos, lightbox.
   Same structure as the Gavin confirmation-video page, in Jacob's brand.
   ========================================================================== */

.step-badge {
  display: inline-block;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  background: var(--gold); color: #fff;
  padding: 7px 13px; border-radius: 3px; margin-bottom: 18px;
}
.conf-lead {
  font-family: var(--font-read);
  font-size: clamp(1.05rem, 2.3vw, 1.24rem); line-height: 1.55;
  color: rgba(255,255,255,.82); max-width: 56ch; margin: 0 0 26px;
}
.conf-lead strong { color: #fff; font-weight: 600; }

.step-preview { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.step-preview li {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: 100px; padding: 9px 18px 9px 9px;
  font-size: .93rem; color: rgba(255,255,255,.9);
}
.step-preview li span {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 600;
}

.step-sub {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted); margin: 0 0 18px;
}

/* ---------- FAQ video grid ---------- */
.faq-videos { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 30px; }
@media (min-width: 700px) { .faq-videos { grid-template-columns: 1fr 1fr; } }

.faq-video {
  display: flex; flex-direction: column; gap: 0;
  width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--white); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,16,16,.04);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.faq-video:hover {
  border-color: var(--gold-bright);
  box-shadow: 0 10px 30px -12px rgba(16,16,16,.22);
  transform: translateY(-2px);
}

/* thumbnail */
.faq-shot {
  position: relative; display: block; border-radius: 8px; overflow: hidden;
  background: #101010; aspect-ratio: 16 / 9;
}
.faq-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }

.faq-video .play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--gold); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.28);
  transition: transform .16s, background .16s;
}
.faq-video:hover .play { transform: translate(-50%,-50%) scale(1.07); background: var(--gold-hover); }

.faq-len {
  position: absolute; right: 8px; bottom: 8px;
  font-family: var(--font-mono); font-size: .68rem; font-weight: 500; color: #fff;
  background: rgba(16,16,16,.82); padding: 3px 7px; border-radius: 4px;
  font-variant-numeric: tabular-nums;
}

/* question underneath */
.faq-q {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 14px 4px 4px;
  font-weight: 700; font-size: 1.02rem; line-height: 1.3;
  letter-spacing: -.015em; color: var(--ink);
}
.faq-num {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .72rem; font-weight: 600;
  margin-top: 1px;
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(16,16,16,.93);
  display: flex; align-items: center; justify-content: center; padding: 22px;
}
.lightbox[hidden] { display: none; }
.lightbox-inner { width: 100%; max-width: 880px; }
.lightbox-inner .video-frame { box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); }
.lightbox-close {
  position: absolute; top: 18px; right: 20px;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.28);
  color: #fff; font-size: 1.1rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: rgba(255,255,255,.2); }
.lightbox-title {
  font-family: var(--font); font-weight: 600; font-size: 1rem;
  color: #fff; margin: 16px 0 0; text-align: center;
}

/* --------------------------------------------------------------------------
   Confirmation page runs centred, top to bottom. Scoped to .conf so nothing
   else in the funnel is affected.
   -------------------------------------------------------------------------- */
.conf .success .wrap { text-align: center; }
.conf .success h1 { max-width: 22ch; margin-left: auto; margin-right: auto; }
.conf .conf-lead { margin-left: auto; margin-right: auto; }
.conf .step-badge { margin-left: auto; margin-right: auto; }
.conf .step-preview { justify-content: center; }

.conf .section .wrap > h2,
.conf .section .wrap > .lede,
.conf .section .wrap > .step-sub { text-align: center; }
.conf .section .wrap > h2 { max-width: 24ch; margin-left: auto; margin-right: auto; }
.conf .section .wrap > .lede { margin-left: auto; margin-right: auto; }

.conf .faq-video h3 { justify-content: center; text-align: center; }

.conf .placeholder { text-align: center; align-items: center; }
.conf .placeholder-tag { align-self: center; }
.conf .placeholder p { margin-left: auto; margin-right: auto; }

.conf .disclaimer .wrap { text-align: center; }
.conf .disclaimer p { margin-left: auto; margin-right: auto; }
.conf .footer .wrap { text-align: center; }

/* Pre-call video breaks out wider than the text column — it's the whole
   point of the page, so it shouldn't be boxed into a reading measure. */
.video-xl {
  max-width: 1180px;
  margin: 26px auto 0;
  padding: 0;
}
@media (min-width: 1240px) {
  .video-xl { max-width: 1320px; }
}

/* ---------- YouTube-style chapter list under the VSL ---------- */
.chapters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 16px 0 0;
}
.chapter {
  display: flex; align-items: baseline; gap: 9px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 100px; padding: 8px 16px 8px 12px;
  font-family: var(--font); font-size: .86rem; color: var(--text-muted);
  cursor: pointer; transition: border-color .14s, background .14s, color .14s;
}
.chapter:hover { border-color: var(--gold-bright); background: var(--gold-tint); color: var(--ink); }
.chapter .ch-t {
  font-family: var(--font-mono); font-size: .72rem; font-variant-numeric: tabular-nums;
  color: var(--text-light); flex: none;
}
.chapter .ch-l { font-weight: 600; letter-spacing: -.01em; }
.chapter.is-on {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.chapter.is-on .ch-t { color: var(--gold-bright); }
@media (max-width: 560px) {
  .chapters { gap: 6px; }
  .chapter { padding: 7px 13px 7px 10px; font-size: .8rem; }
}

/* Lightbox controls — fullscreen is an explicit choice, never automatic. */
.lightbox-ctrls {
  position: absolute; top: 18px; right: 20px;
  display: flex; gap: 10px; align-items: center;
}
.lb-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
  color: #fff; border-radius: 100px; padding: 9px 16px;
  font-family: var(--font); font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.lb-btn:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); }
.lb-btn.lb-x { padding: 9px 14px; font-size: 1rem; line-height: 1; }
@media (max-width: 560px) {
  .lightbox-ctrls { top: 12px; right: 12px; gap: 8px; }
  .lb-btn { padding: 8px 13px; font-size: .76rem; }
  .lb-btn span { display: none; }
}

/* A card that's playing: the thumbnail is replaced by the player itself. */
.faq-video.is-playing { cursor: default; }
.faq-video.is-playing:hover { transform: none; }
.faq-player { width: 100%; height: 100%; display: block; background: #000; }

/* Stop the lightbox styles applying now that it's gone. */
.lightbox, .lightbox-ctrls { display: none !important; }

/* ---------- Case study ----------
   Portrait phone clip. The offset gold outline and the glow behind it give a
   single vertical video enough presence to hold a full-width section on its
   own, without pretending it's something it isn't. */
.casestudy {
  position: relative;
  max-width: 440px;
  margin: 44px auto 12px;
  padding: 18px 18px 22px;
}
/* soft glow behind the whole thing */
.casestudy::after {
  content: "";
  position: absolute; inset: -8% -14% -6%;
  background: radial-gradient(60% 50% at 50% 45%, rgba(201,162,78,.30), rgba(201,162,78,0) 72%);
  z-index: 0; pointer-events: none;
}

.cs-frame { position: relative; z-index: 1; }

/* the offset outline that sits behind and to the side */
.cs-frame::before {
  content: "";
  position: absolute;
  top: -16px; left: -16px; right: 16px; bottom: 16px;
  border: 2px solid var(--gold);
  border-radius: 20px;
  z-index: 0;
  pointer-events: none;
}

.cs-frame video {
  position: relative; z-index: 1;
  width: 100%; display: block;
  aspect-ratio: 720 / 1280;
  border-radius: 16px;
  background: #000;
  border: 1px solid var(--ink);
  box-shadow: 0 26px 60px -22px rgba(16,16,16,.55);
}

/* label chip straddling the top edge */
.cs-chip {
  position: absolute; z-index: 2;
  top: -13px; left: 22px;
  font-family: var(--font-mono);
  font-size: .6rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: #fff; background: var(--ink);
  padding: 7px 13px; border-radius: 100px;
  box-shadow: 0 2px 10px rgba(16,16,16,.28);
}

@media (max-width: 520px) {
  .casestudy { max-width: 340px; padding: 14px 14px 18px; }
  .cs-frame::before { top: -12px; left: -12px; right: 12px; bottom: 12px; }
}