/* ==========================================================================
   vscaling.com — the 0805 offer funnel
   /vsl (watch, then apply) and /thank-you (booked, now confirm)

   Motion is lifted from live www.vscaling.com so the funnel moves like the
   rest of the company: --ease-out-expo on everything, the .reveal /
   .is-visible scroll system, pulse-glow, ping, and dash-flow on the chain.

   Neutrals, faces and the ember accent are continuous with the live site.
   ========================================================================== */

:root {
  --accent: #ff6a3c;
  --accent-soft: #ff8a4c;
  --accent-deep: #e04e1f;

  --ink: #08080a;
  --slab: #0d0d11;
  --raise: #131319;
  --raise-hi: #191920;
  --hair: #ffffff14;
  --hair-hi: #ffffff26;
  --bone: #f6f6f4;
  --ash: #a6a6b0;
  --ash-dim: #7c7c86;
  --good: #55d1a0;
  --warn: #ffb02e;

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Borrowed verbatim from the live site's token set. */
  --ease-out-expo: cubic-bezier(.16, 1, .3, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);

  --shell: 1120px;
  --wide: 1320px;
  --measure: 60ch;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

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

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  color: var(--bone);
  letter-spacing: -0.028em;
  line-height: 1.06;
  font-weight: 800;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.wrap-wide { max-width: var(--wide); }

/* ==========================================================================
   MOTION — the live site's system, reproduced
   ========================================================================== */

@keyframes pulse-glow {
  0%, to { opacity: .55; transform: scale(1); }
  50%    { opacity: 1;   transform: scale(1.06); }
}
@keyframes ping {
  75%, to { opacity: 0; transform: scale(2); }
}
@keyframes dash-flow {
  to { stroke-dashoffset: -1000px; }
}
@keyframes hin {
  to { opacity: 1; transform: none; }
}

/* Scroll reveal. The failsafe in the page adds .is-visible after 2.6s so a
   stripped script can never leave the page invisible. */
.has-js .reveal { opacity: 0; transform: translateY(22px); }
.has-js .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo);
}

/* Hero entrance stagger. */
.has-js .hin { opacity: 0; transform: translateY(16px); animation: hin .8s var(--ease-out-expo) forwards; }
.has-js .hin.d1 { animation-delay: .06s; }
.has-js .hin.d2 { animation-delay: .14s; }
.has-js .hin.d3 { animation-delay: .24s; }
.has-js .hin.d4 { animation-delay: .38s; }
.has-js .hin.d5 { animation-delay: .52s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .has-js .reveal, .has-js .hin {
    opacity: 1 !important; transform: none !important;
    animation: none !important; transition: none !important;
  }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==========================================================================
   TYPE UTILITIES
   ========================================================================== */

.mark, .kicker, .deck-tag, .deck-len, .q-i, .stat-k, .step-i, .tick, .todo-i, .chain-tag {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 500;
}

.mark { display: inline-flex; align-items: center; gap: 9px; color: var(--ash-dim); margin: 0; }
.mark i {
  width: 7px; height: 7px; border-radius: 50%; display: block; flex: none;
  background: var(--accent);
  animation: pulse-glow 3.2s ease-in-out infinite;
}

.kicker { color: var(--accent); display: block; margin-bottom: 18px; }

.h-sec { font-size: clamp(28px, 3.8vw, 44px); max-width: 20ch; }
.h-sec .turn { color: var(--accent); }
.lede { margin-top: 18px; max-width: var(--measure); font-size: 17px; }
.sec-head { margin-bottom: 48px; }
.band { padding: 96px 0; border-top: 1px solid var(--hair); }

/* ==========================================================================
   HERO + PLAYER
   ========================================================================== */

.hero { padding: 34px 0 0; text-align: center; }
.hero h1 { font-size: clamp(32px, 4.7vw, 52px); margin: 26px auto 0; max-width: 24ch; }
/* The turn is a whole clause, so it gets its own line rather than starting
   the colour change mid-line and leaving the first line stranded short.
   Each block still balances its own rag. */
.hero h1 .turn { color: var(--accent); display: block; }
.hero-sub {
  margin: 22px auto 0; max-width: 58ch;
  font-size: clamp(16px, 1.7vw, 18.5px);
  /* Centred copy reads badly with a two-word last line. */
  text-wrap: balance;
}
.hero-sub b { color: var(--bone); font-weight: 600; }

.gate {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 26px auto 0; padding: 8px 15px;
  border: 1px solid var(--hair); border-radius: 999px;
  background: var(--slab); color: var(--ash);
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em;
}
.gate i {
  position: relative; width: 6px; height: 6px; flex: none;
  border-radius: 50%; background: var(--good);
}
.gate i::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--good); animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
}

.deck {
  margin: 34px auto 0; max-width: 960px;
  border: 1px solid var(--hair); border-radius: 14px;
  background: var(--slab); overflow: hidden; text-align: left;
  box-shadow: 0 40px 90px -50px #000, 0 0 0 1px #ffffff08 inset;
}

/* Fold-sized player. A 16:9 box, so the height left under the copy converts
   straight into a width. The vh line is the fallback for browsers without
   svh; svh is what keeps a phone honest while the URL bar is showing.
   Opt-in class, because /thank-you and /scale size their decks by width. */
.deck-fold {
  margin: 20px auto 0;
  width: clamp(300px, calc((100vh - var(--fold-chrome, 430px)) * 16 / 9), 960px);
  width: clamp(300px, calc((100svh - var(--fold-chrome, 430px)) * 16 / 9), 960px);
  max-width: 100%;
}

.deck-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 15px; border-bottom: 1px solid var(--hair); background: #0a0a0e;
}
.deck-tag, .deck-len { color: var(--ash-dim); }
.deck-bar .fill { flex: 1; }

.player { position: relative; aspect-ratio: 16 / 9; background: #000; }
.player video {
  width: 100%; height: 100%; display: block; object-fit: cover; background: #000;
  color: var(--bone); font-family: var(--body); padding: 24px; text-align: center;
}
.player video a { color: var(--accent-soft); }

.play-veil {
  position: absolute; inset: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding-top: 15%; gap: 16px; cursor: pointer; border: 0;
  background-color: #000; background-size: cover; background-position: center; background-repeat: no-repeat;
  color: var(--bone); font-family: var(--mono); font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
}
.play-veil[hidden] { display: none; }
.play-veil::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 50% 50%, #0000 0%, #000000a6 100%);
}
.play-veil > * { position: relative; }
.play-veil .orb {
  width: 78px; height: 78px; border-radius: 50%; background: var(--accent);
  display: grid; place-items: center;
  box-shadow: 0 18px 50px -12px #ff6a3c8c;
  transition: transform .22s var(--ease-out-expo), background .22s var(--ease-std);
}
.play-veil .orb::after {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  border: 1px solid #ff6a3c40; animation: pulse-glow 3.2s ease-in-out infinite;
}
.play-veil:hover .orb { transform: scale(1.06); background: var(--accent-soft); }
.play-veil .orb svg { width: 26px; height: 26px; margin-left: 4px; fill: #14060a; }

.transport {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 15px; border-top: 1px solid var(--hair); background: #0a0a0e;
}
.transport[hidden] { display: none; }
.t-btn {
  border: 1px solid var(--hair); background: var(--raise); color: var(--bone);
  width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center;
  cursor: pointer; flex: none; transition: border-color .18s var(--ease-std), background .18s var(--ease-std);
}
.t-btn:hover { border-color: var(--hair-hi); background: var(--raise-hi); }
.t-btn svg { width: 14px; height: 14px; fill: currentColor; }
.scrub { flex: 1; height: 5px; border-radius: 999px; background: #ffffff1c; position: relative; cursor: pointer; }
.scrub-fill { position: absolute; inset: 0 auto 0 0; width: 0%; background: var(--accent); border-radius: 999px; }
.t-time { font-family: var(--mono); font-size: 11.5px; color: var(--ash-dim); flex: none; font-variant-numeric: tabular-nums; }

.deck-foot {
  padding: 12px 15px; border-top: 1px solid var(--hair); background: #0a0a0e;
  color: var(--ash-dim); font-size: 13.5px;
}

/* ==========================================================================
   VSL HERO — one fold
   The offer page has to land the gate line, the headline, the offer line,
   the player and the button inside the first screen, so its hero runs
   tighter type than /scale's. Scoped to the page: /scale and /thank-you
   keep the original sizing.
   --fold-chrome is the measured height of everything in the hero that is
   NOT the video (padding, gate row, two headline lines, two offer lines,
   the deck bar, the CTA block). .deck-fold turns the remainder into a
   width. Add a line up there and this number goes up with it.
   ========================================================================== */

[data-page="vsl"] .hero { padding: 24px 0 30px; --fold-chrome: 410px; }

[data-page="vsl"] .hero-top {
  display: flex; align-items: center; justify-content: center;
  gap: 10px 16px; flex-wrap: wrap;
}
[data-page="vsl"] .hero h1 { font-size: clamp(30px, 3.5vw, 40px); margin: 15px auto 0; max-width: 26ch; }
[data-page="vsl"] .hero-sub {
  margin: 13px auto 0; max-width: 62ch;
  font-size: clamp(15px, 1.4vw, 16.5px); line-height: 1.55;
}
[data-page="vsl"] .hero .gate { margin: 0; padding: 7px 14px; }
[data-page="vsl"] .cta-row { margin-top: 18px; gap: 9px; }

@media (max-width: 780px) {
  /* Narrower column, so the headline and the offer line each take a line
     more and the chrome above the player grows with them. */
  [data-page="vsl"] .hero { padding: 20px 0 26px; --fold-chrome: 486px; }
  [data-page="vsl"] .hero-top { gap: 8px 12px; }
}
@media (max-width: 520px) {
  /* Both of these wrapped onto a second line at 390px, which reads as a
     layout fault rather than a label. Mono at 10px keeps each on one. */
  [data-page="vsl"] .hero .gate { font-size: 10px; letter-spacing: .06em; padding: 6px 12px; gap: 8px; }
  [data-page="vsl"] .deck-fold .deck-tag,
  [data-page="vsl"] .deck-fold .deck-len { font-size: 10px; letter-spacing: .07em; }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  padding: 17px 30px; border: 0; border-radius: 10px;
  background: var(--accent); color: #150609;
  font-family: var(--body); font-size: 16.5px; font-weight: 600;
  text-decoration: none; cursor: pointer; line-height: 1.2;
  box-shadow: 0 16px 40px -18px #ff6a3c9e;
  transition: background .18s var(--ease-std), transform .18s var(--ease-out-expo), box-shadow .18s var(--ease-std);
}
.btn:hover { background: var(--accent-soft); transform: translateY(-2px); box-shadow: 0 22px 46px -18px #ff6a3cb8; }
.btn .arw { transition: transform .18s var(--ease-out-expo); }
.btn:hover .arw { transform: translateX(3px); }
.btn-ghost { background: transparent; color: var(--bone); border: 1px solid var(--hair-hi); box-shadow: none; }
.btn-ghost:hover { background: var(--raise); border-color: var(--ash-dim); }
.btn-block { width: 100%; }

.cta-row { margin-top: 32px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cta-note { font-size: 13.5px; color: var(--ash-dim); }

/* Proof snippet under the hero CTA. */
.snip {
  margin: 30px auto 0; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 26px; font-size: 14px; color: var(--ash-dim);
}
.snip span { display: inline-flex; align-items: center; gap: 8px; }
.snip b { color: var(--bone); font-weight: 600; }
.snip i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); flex: none; }

/* ==========================================================================
   THE MIRROR — specific conditions, checkable
   ========================================================================== */

/* The reader ticks these themselves. Self-identification beats being told,
   and the running count in the foot turns nine claims into their own number. */
.mirror { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; }
.mirror label {
  display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start;
  padding: 15px 0; border-bottom: 1px solid var(--hair);
  font-size: 16px; color: var(--ash); cursor: pointer;
  transition: color .18s var(--ease-std);
}
.mirror label:hover { color: var(--bone); }
.mirror label b { color: var(--bone); font-weight: 600; }
.mirror input { position: absolute; opacity: 0; width: 0; height: 0; }
.mirror .box {
  width: 19px; height: 19px; margin-top: 3px; border-radius: 5px;
  border: 1.5px solid var(--hair-hi); display: grid; place-items: center; flex: none;
  transition: background .18s var(--ease-std), border-color .18s var(--ease-std), transform .18s var(--ease-out-expo);
}
.mirror label:hover .box { border-color: var(--accent); }
.mirror .box svg {
  width: 11px; height: 11px; fill: none; stroke: #150609;
  stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0; transform: scale(.6);
  transition: opacity .18s var(--ease-std), transform .22s var(--ease-out-expo);
}
.mirror input:checked + .box { background: var(--accent); border-color: var(--accent); transform: scale(1.06); }
.mirror input:checked + .box svg { opacity: 1; transform: none; }
.mirror input:focus-visible + .box { outline: 2px solid var(--accent); outline-offset: 3px; }

.mirror-foot { margin-top: 34px; font-size: 17px; color: var(--bone); max-width: 62ch; }
.mirror-foot .tally {
  display: inline-flex; align-items: baseline; gap: 7px; margin-right: 10px;
  font-family: var(--mono); font-size: 13px; letter-spacing: .1em;
  color: var(--accent); padding: 5px 11px; border: 1px solid #ff6a3c33;
  border-radius: 999px; background: #150c0a;
}
.mirror-foot .tally[hidden] { display: none; }

/* ==========================================================================
   THE CHAIN — six handoffs, with the live site's flowing dash
   ========================================================================== */

.chain {
  margin-top: 12px; border: 1px solid var(--hair); border-radius: 14px;
  background: var(--slab); padding: 30px 26px 26px;
}
.chain-tag { color: var(--ash-dim); display: block; margin-bottom: 22px; }
/* Seven nodes plus six gaps have to clear 1070px of inner width, so the node
   is sized to fit rather than to breathe. Below that it scrolls. */
.chain-flow { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding-bottom: 8px; }
.chain-node { flex: none; width: 96px; text-align: center; }
.chain-node .dot {
  width: 13px; height: 13px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--accent); position: relative;
}
.chain-node .dot::after {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 1px solid #ff6a3c33; animation: pulse-glow 3.2s ease-in-out infinite;
}
.chain-node span { font-size: 12px; color: var(--ash); line-height: 1.35; display: block; }
.chain-gap { flex: 1; min-width: 34px; padding-top: 5px; position: relative; }
.chain-gap svg { width: 100%; height: 4px; display: block; overflow: visible; }
.chain-gap line {
  stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 7;
  animation: dash-flow 3s linear infinite;
}
.chain-gap em {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-deep); font-style: normal; white-space: nowrap;
}
.chain-foot { margin-top: 30px; font-size: 15.5px; color: var(--ash-dim); }

/* ==========================================================================
   TWO COLUMN + QUOTES
   ========================================================================== */

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 42px; align-items: start; }
.quotes { display: grid; gap: 12px; }
.quotes li { border-left: 2px solid var(--hair-hi); padding: 4px 0 4px 18px; font-size: 16px; color: var(--bone); }
.quotes li span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ash-dim); }

/* ==========================================================================
   PROOF WALL
   ========================================================================== */

.proof-top { margin-bottom: 34px; }
.handles { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.handles li {
  font-family: var(--mono); font-size: 12px; color: var(--ash);
  padding: 6px 12px; border: 1px solid var(--hair); border-radius: 999px; background: var(--slab);
}

/* GRID, not columns. Under `columns` the browser balances tiles by height, and
   a lazy <img> has no height until it decodes — so every image that loaded
   while you scrolled pushed tiles into different columns and the wall appeared
   to shuffle itself. A grid of fixed-height cards has nothing to rebalance, and
   it also makes "first" mean the top row rather than the top of column one. */
.wall {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; align-items: start;
}
/* The confirm page runs in a 900px column, so four would read too small. */
.wall-ty { grid-template-columns: repeat(3, 1fr); }
.shot {
  margin: 0; padding: 0;
  border: 1px solid var(--hair); border-radius: 9px; overflow: hidden;
  background: var(--slab); cursor: zoom-in; display: block; width: 100%;
  position: relative; height: 400px;
  transition: border-color .18s var(--ease-std), transform .18s var(--ease-out-expo);
}
.shot:hover { border-color: var(--accent); transform: translateY(-2px); }
/* Tall screenshots are anchored to the top, where the claim always sits. */
.shot img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; }
/* A wide capture cropped to a tall box loses the numbers that make it proof. */
.shot img.wide { object-fit: contain; object-position: center; background: #08080b; }
.shot::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px;
  background: linear-gradient(to top, var(--slab) 12%, #0d0d1100 100%);
  pointer-events: none; opacity: 1; transition: opacity .2s var(--ease-std);
}

/* The wall opens on one batch and pages from there, so it needs a foot. */
.wall-foot {
  margin-top: 22px; display: flex; flex-direction: column;
  align-items: center; gap: 10px;
}
.wall-foot .btn { min-width: 220px; justify-content: center; }
.wall-foot .btn .arw { transition: transform .18s var(--ease-out-expo); }
.wall-foot .btn:hover .arw { transform: translateY(2px); }
.wall-count {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ash-dim);
}
#wall-more[hidden] { display: none; }

/* Clips read as clips before anyone clicks. */
.shot-clip { cursor: pointer; }
.clip-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #0b0b0fb8; border: 1px solid var(--hair-hi);
  backdrop-filter: blur(3px); pointer-events: none; z-index: 2;
  transition: transform .18s var(--ease-out-expo), background .18s var(--ease-std);
}
.clip-badge svg { width: 20px; height: 20px; margin-left: 3px; fill: var(--bone); }
.shot-clip:hover .clip-badge { transform: translate(-50%, -50%) scale(1.08); background: var(--accent); }
.shot-clip:hover .clip-badge svg { fill: #0b0b0f; }


.lightbox:not([open]) { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 60; width: 100%; height: 100%;
  max-width: 100vw; max-height: 100vh;
  background: #05050799; backdrop-filter: blur(10px);
  display: grid; place-items: center; padding: 28px; border: 0;
}
.lightbox::backdrop { background: #050507cc; }
.lightbox img,
.lightbox video {
  max-width: min(760px, 92vw); max-height: 88vh; width: auto;
  border-radius: 10px; border: 1px solid var(--hair-hi); box-shadow: 0 40px 90px -30px #000;
}
/* [hidden] alone loses to the grid display the dialog sets on its children. */
.lightbox img[hidden],
.lightbox video[hidden] { display: none; }
.lightbox video { background: #000; }
.lb-close {
  position: absolute; top: 20px; right: 22px; width: 40px; height: 40px;
  border-radius: 9px; border: 1px solid var(--hair-hi); background: var(--slab);
  color: var(--bone); cursor: pointer; display: grid; place-items: center; font-size: 19px; line-height: 1;
}
.lb-close:hover { background: var(--raise); }

/* ==========================================================================
   STATS
   ========================================================================== */

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--hair); border: 1px solid var(--hair); border-radius: 12px; overflow: hidden;
}
.stats li { background: var(--slab); padding: 26px 22px; }
.stat-v {
  font-family: var(--display); font-size: clamp(27px, 3.2vw, 36px);
  font-weight: 800; color: var(--bone); letter-spacing: -0.03em; line-height: 1;
}
.stat-k { display: block; margin-top: 11px; color: var(--ash-dim); line-height: 1.5; }

/* ==========================================================================
   TRACKS
   ========================================================================== */

.tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.track {
  border: 1px solid var(--hair); border-radius: 13px; background: var(--slab);
  padding: 32px 30px 34px;
}
.track-hi { border-color: #ff6a3c40; background: linear-gradient(180deg, #150c0a 0%, var(--slab) 58%); }
.track h3 { font-size: 22px; margin-top: 14px; }
.track-band { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.track p { margin-top: 14px; font-size: 15.5px; }

.checks { margin-top: 22px; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; font-size: 15.5px; color: var(--ash); align-items: start; }
.checks svg { width: 15px; height: 15px; margin-top: 5px; stroke: var(--accent); fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ==========================================================================
   THE MATH
   ========================================================================== */

.calc { border: 1px solid var(--hair); border-radius: 13px; background: var(--slab); overflow: hidden; max-width: 720px; }
.calc-head {
  padding: 13px 22px; border-bottom: 1px solid var(--hair); background: #0a0a0e;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ash-dim);
}
.calc ul { padding: 8px 0; }
.calc li { display: flex; align-items: baseline; gap: 16px; padding: 10px 22px; font-size: 15.5px; }
.calc li .k { flex: 1; }
.calc li .v { font-family: var(--mono); font-size: 14.5px; color: var(--bone); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc li.turnline { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); margin-top: 8px; background: #0a0a0e; color: var(--accent); }
.calc li.turnline .v { color: var(--accent); }
.calc li.total { padding-top: 16px; padding-bottom: 18px; color: var(--bone); font-weight: 600; }
.calc li.total .v { font-family: var(--display); font-size: 25px; font-weight: 800; color: var(--accent); letter-spacing: -.02em; }
.calc-foot { padding: 14px 22px 16px; border-top: 1px solid var(--hair); background: #0a0a0e; font-size: 13.5px; color: var(--ash-dim); }

/* ==========================================================================
   THE DEAL
   ========================================================================== */

.deal {
  border: 1px solid var(--hair); border-radius: 14px;
  background: linear-gradient(180deg, #14100e 0%, var(--slab) 60%);
  padding: 46px 44px; text-align: center;
}
.deal-num { font-family: var(--display); font-weight: 800; font-size: clamp(46px, 7.6vw, 82px); color: var(--accent); letter-spacing: -.04em; line-height: 1; }
.deal-sub { margin-top: 12px; font-size: 18px; color: var(--bone); }
.deal .lede { margin-left: auto; margin-right: auto; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 34px; text-align: left; }
.split div { border: 1px solid var(--hair); border-radius: 11px; background: #0a0a0e; padding: 24px; }
.split h4 { margin: 0; font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ash-dim); font-weight: 500; }
.split p { margin-top: 12px; font-size: 15.5px; }

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

.faq { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; }
.faq details { background: var(--slab); }
.faq summary {
  padding: 24px 28px; cursor: pointer; list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  font-family: var(--display); font-weight: 800; font-size: 18.5px; color: var(--bone);
  letter-spacing: -.02em; line-height: 1.3;
  transition: color .18s var(--ease-std);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.faq summary .pm {
  flex: none; width: 20px; height: 20px; margin-top: 2px; position: relative;
  transition: transform .28s var(--ease-out-expo);
}
.faq summary .pm::before, .faq summary .pm::after {
  content: ""; position: absolute; background: var(--accent); border-radius: 2px;
}
.faq summary .pm::before { left: 0; right: 0; top: 9px; height: 2px; }
.faq summary .pm::after { top: 0; bottom: 0; left: 9px; width: 2px; transition: opacity .28s var(--ease-std); }
.faq details[open] summary .pm { transform: rotate(180deg); }
.faq details[open] summary .pm::after { opacity: 0; }
.faq .ans { padding: 0 28px 26px; font-size: 15.5px; max-width: 68ch; }
.faq .ans p + p { margin-top: 12px; }

/* ==========================================================================
   FORM
   ========================================================================== */

.form-card {
  border: 1px solid var(--hair); border-radius: 14px; background: var(--slab);
  padding: 38px 36px 40px; max-width: 720px; margin: 0 auto;
}
.form-note { font-size: 14.5px; color: var(--ash-dim); padding-bottom: 24px; margin-bottom: 28px; border-bottom: 1px solid var(--hair); }

/* Section 08 now holds only the trigger; the form lives in #formbox. */
.form-card-cta { max-width: 620px; }
.form-card-cta .btn { margin-top: 4px; }

/* ==========================================================================
   FORM DIALOG
   The GHL form measures ~2,300px, taller than any viewport, so the dialog
   scrolls internally and the close control is pinned to the viewport rather
   than to the top of the form.
   ========================================================================== */

.formbox:not([open]) { display: none; }
.formbox {
  position: fixed; inset: 0; z-index: 70;
  width: 100%; height: 100%; max-width: 100vw; max-height: 100vh;
  background: #05050799; backdrop-filter: blur(10px);
  border: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain;
}
.formbox::backdrop { background: #050507cc; }
.formbox-inner {
  width: min(760px, calc(100% - 32px));
  margin: 64px auto 48px;
  background: var(--slab);
  border: 1px solid var(--hair);
  border-radius: 14px;
  padding: 24px 20px;
  box-shadow: 0 40px 90px -30px #000;
}
.formbox iframe { width: 100%; border: 0; display: block; background: transparent; }
/* Pinned, so it stays reachable however far down the form you are. */
.formbox .lb-close { position: fixed; top: 18px; right: 20px; z-index: 2; }

@media (max-width: 780px) {
  .formbox-inner { margin: 58px auto 32px; padding: 16px 12px; width: calc(100% - 20px); }
  .formbox .lb-close { top: 12px; right: 12px; }
}
.field { margin-bottom: 22px; }
.field label { display: block; color: var(--bone); font-size: 15.5px; font-weight: 500; margin-bottom: 10px; line-height: 1.45; }
.q-i { color: var(--accent); margin-right: 10px; font-size: 11px; }
.field input, .field select, .field textarea {
  width: 100%; background: #08080b; border: 1px solid var(--hair); border-radius: 9px;
  color: var(--bone); font-family: var(--body); font-size: 16px; padding: 13px 15px;
  transition: border-color .16s var(--ease-std), box-shadow .16s var(--ease-std);
}
.field textarea { min-height: 88px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px #ff6a3c24;
}
.field select {
  appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--ash) 50%), linear-gradient(135deg, var(--ash) 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.err { display: none; color: var(--accent-soft); font-size: 13.5px; margin-top: 7px; }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--accent-deep); }
.field.bad .err { display: block; }
.form-foot { margin-top: 28px; }
.privacy { margin-top: 16px; font-size: 13px; color: var(--ash-dim); text-align: center; }

/* ==========================================================================
   THANK YOU
   ========================================================================== */

.confirm { padding: 60px 0 100px; }
.confirm-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.confirm h1 { font-size: clamp(33px, 5.2vw, 54px); margin-top: 22px; }
.confirm h1 .turn { color: var(--accent); }

.tick {
  display: inline-flex; align-items: center; gap: 9px; margin: 24px 0 0;
  padding: 8px 16px; border-radius: 999px; border: 1px solid #55d1a038;
  background: #55d1a012; color: var(--good);
}
.tick svg { width: 14px; height: 14px; }

.todo { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 12px; overflow: hidden; text-align: left; margin-top: 12px; }
.todo li { background: var(--slab); padding: 26px 28px; display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; }
.todo-i { color: var(--accent); padding-top: 4px; }
/* A single-item list has nothing to number against. */
.todo-solo li { grid-template-columns: 1fr; }
.todo h3 { font-size: 19px; }
.todo p { margin-top: 8px; font-size: 15.5px; }
.todo .acts { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.acts .btn { padding: 11px 18px; font-size: 14.5px; }

.warn {
  margin-top: 22px; border: 1px solid #ff6a3c33; border-left: 3px solid var(--accent);
  border-radius: 11px; background: #150c0a; padding: 26px 28px; text-align: left;
}
.warn h3 { font-size: 19px; }
.warn p { margin-top: 10px; font-size: 15.5px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.foot { border-top: 1px solid var(--hair); padding: 40px 0; text-align: center; color: var(--ash-dim); font-size: 13.5px; }
.foot .mark { margin-bottom: 14px; }
/* #6c6c76 measured 3.85:1 on the ink ground. This clears AA. */
.foot .dis { max-width: 70ch; margin: 14px auto 0; font-size: 12.5px; line-height: 1.6; color: #8b8b95; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1000px) {
  .wall { grid-template-columns: repeat(3, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .two-col { grid-template-columns: 1fr; gap: 32px; }
  .calc { max-width: none; }
  .mirror { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .band { padding: 68px 0; }
  .hero { padding: 32px 0 0; }
  .tracks, .split, .two-up { grid-template-columns: 1fr; }
  .wall { grid-template-columns: repeat(2, 1fr); }
  .deal { padding: 34px 24px; }
  .form-card { padding: 28px 22px 30px; }
  .todo li { grid-template-columns: 1fr; gap: 10px; }
  .faq summary { padding: 20px 20px; font-size: 17px; }
  .faq .ans { padding: 0 20px 22px; }
  .chain { padding: 24px 18px 20px; }
}
@media (max-width: 520px) {
  .wall { grid-template-columns: repeat(2, 1fr); gap: 9px; }
  .shot { height: 320px; }
  .stats { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .transport { gap: 9px; padding: 10px 11px; }
  .play-veil { font-size: 10px; letter-spacing: .08em; gap: 11px; padding-top: 12%; }
  .play-veil .orb { width: 58px; height: 58px; }
  .play-veil .orb svg { width: 20px; height: 20px; margin-left: 3px; }
}