/* ==========================================================================
   Lyrixsa AI — FASTPASS ($230)
   Post-purchase funnel page. Shown after the $37 Commercial checkout and
   before the numbered OTO sequence — so it is deliberately short and reads
   as a decision, not a second sales letter.

   Tokens are lifted verbatim from /partners/assets/css/jv.css and the main
   sales page so all three read as one brand.
   ========================================================================== */

:root{
  /* Surfaces — same ladder as the sales page */
  --bg:#101114; --s1:#17181D; --s2:#1E2026; --s3:#262930;
  --border:#2A2D35; --border-strong:#3A3E48;

  /* Ink */
  --t1:#EDEDEC; --t2:#9B9FA8; --t3:#63666F;

  /* Accent */
  --accent:#F2A93C;
  /* --accent-2 is the lighter stop of every accent gradient on the page — the
     coupon chip and the video placeholder's play dot both read as lit objects
     rather than flat fills because of it. Value is taken verbatim from
     bundle.css:45, which is where the components below were ported from. */
  --accent-2:#F7C86B;
  --accent-soft:rgba(242,169,60,.12);
  /* Added with the .eb countdown port: the only token bundle.css had that this
     file was missing. Same value as bundle.css:47, so the block needed no
     retuning. */
  --accent-softer:rgba(242,169,60,.06);
  --accent-border:rgba(242,169,60,.55);
  --ink-on-accent:#1A1300;

  /* Semantic */
  --success:#7FD9A8; --success-soft:rgba(127,217,168,.12);
  --danger:#E8735F;  --danger-soft:rgba(232,115,95,.12);
  --info:#7FB2D9;    --info-soft:rgba(127,178,217,.12);

  /* Type */
  --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:'Space Grotesk','Inter',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --emoji:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji','Twemoji Mozilla','Segoe UI Symbol',sans-serif;

  /* Rhythm */
  --wrap:1180px; --wrap-narrow:820px;
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:26px;
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

body{
  margin:0;background:var(--bg);color:var(--t1);
  font:400 16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img,svg{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:var(--wrap-narrow)}
@media(max-width:640px){.wrap{padding:0 18px}}
@media(max-width:380px){.wrap{padding:0 14px}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--accent);color:var(--ink-on-accent);
  padding:10px 16px;border-radius:var(--r-sm);font-weight:700;transition:top .18s}
.skip:focus{top:12px;text-decoration:none}

/* ==========================================================================
   TYPE SCAFFOLD
   ========================================================================== */
h1,h2,h3,h4{font-family:var(--display);font-weight:700;letter-spacing:-.02em;margin:0 0 14px;line-height:1.14}
h1{font-size:clamp(28px,5.2vw,52px)}
h2{font-size:clamp(24px,3.6vw,38px)}
h3{font-size:clamp(17px,2.1vw,22px);letter-spacing:-.01em}
h4{font-size:15.5px;letter-spacing:-.005em}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin:0 0 16px;
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--accent);opacity:.6}
.eyebrow.no-rule::before{display:none}

.lede{font-size:clamp(15.5px,1.5vw,18.5px);color:var(--t2);max-width:64ch;margin:0 0 26px;line-height:1.68}
.sec{padding:76px 0;border-top:1px solid var(--border)}
.sec-alt{background:var(--s1)}
.sec-head{margin-bottom:44px;max-width:70ch}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
@media(max-width:640px){.sec{padding:56px 0}.sec-head{margin-bottom:34px}}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font:600 14.5px/1.25 var(--sans);letter-spacing:.01em;
  padding:13px 22px;border-radius:10px;border:1px solid transparent;cursor:pointer;
  transition:transform .14s,box-shadow .16s,background .16s,border-color .16s;
  text-align:center;min-height:44px;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:none}
.btn-primary{background:var(--accent);color:var(--ink-on-accent);box-shadow:0 4px 18px rgba(242,169,60,.22)}
.btn-primary:hover{background:#F7B754;box-shadow:0 7px 26px rgba(242,169,60,.3)}
.btn-ghost{background:var(--s2);color:var(--t1);border-color:var(--border-strong)}
.btn-ghost:hover{background:var(--s3);border-color:var(--accent-border)}
.btn-xl{padding:20px 38px;font-size:clamp(15px,2.1vw,19px);border-radius:14px}
@media(max-width:420px){
  .btn-xl{padding-left:18px;padding-right:18px}
}

/* ---------- THE DECLINE BUTTONS ----------------------------------------------
   Both ways out of this page — the hero exit inside the offer card, and the
   closing "Continue without it" card — styled as real buttons rather than fine
   print, and styled the SAME, so a buyer who passed the first one recognises the
   second. A grey ghost button separates from the #101114 page by only 1.16:1
   (fill) / 1.76:1 (border): legible once found, not findable. This is the same
   amber outline as the other six OTO pages: edge 3.6:1 against the page here,
   label 9.45:1.

   An outline rather than a fill, on purpose. The buy button is a full-colour
   JVZoo slab; same colour family at a lighter weight is the usual primary /
   secondary pairing, and it stays unmistakably the second choice. This has to be
   findable, not competitive.

   Self-contained rather than .btn.btn-ghost so the rule stays byte-identical to
   the other six pages and all seven can be changed in one pass. */
.pass-btn{
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-sizing:border-box; width:100%; max-width:480px; margin:16px auto 0;
  min-height:56px; padding:16px 24px;
  font-family:inherit; font-size:16px; font-weight:600; line-height:1.3;
  text-align:center; text-decoration:none;
  color:var(--accent); background:transparent;
  /* 2px, not 1.5: Chromium floors a fractional border to 1px at dsf=1 and
     dsf=2 alike, so 1.5 silently rendered as the hairline it replaced. */
  border:2px solid var(--accent-border); border-radius:12px;
  cursor:pointer; transition:background .16s, border-color .16s, color .16s;
}
/* Hover goes further INTO the accent rather than to grey, so the affordance is
   unambiguous: the wash fills in and the border reaches full --accent. The
   base a:hover on this page adds an underline; this has to cancel it. */
.pass-btn:hover{
  background:var(--accent-soft); border-color:var(--accent);
  color:var(--accent); text-decoration:none;
}
.pass-btn:focus-visible{outline:2px solid var(--accent-border); outline-offset:3px}
/* Matches .btn:hover .arw elsewhere in the funnel. .pass-btn is not a .btn by
   design, so no shared arrow rule reaches it. */
.pass-btn .arw{transition:transform .16s ease}
.pass-btn:hover .arw{transform:translateX(3px)}
/* Extra breathing room where it follows the offer's closing fine print, so the
   exit does not read as one more line of the pitch. */
.offer-foot + .pass-btn{margin-top:20px}
/* The reassurance under it. Answers "what happens to what I already bought?"
   at the moment of the click. */
.pass-note{
  max-width:480px; margin:9px auto 0;
  font-size:13px; line-height:1.5; text-align:center; color:var(--t3);
}
@media(max-width:420px){
  .pass-btn{font-size:15px; padding:15px 16px}
}

/* ==========================================================================
   OFFICIAL JVZOO BUY BUTTONS
   Ported from the /commercials/ `lyrixa-jvzoo-buy-image` block so both pages
   present checkout identically. The button image JVZoo serves for the product
   (i.jvzoo.com/{funnel}/{product}/{button}) wrapped in that product's
   jvzoo.com/b/... link, exactly as the embed code supplies it — the image is
   the checkout control itself, with a short label above it.

   The images are 533x281 PNGs. width/height are declared in the markup so the
   browser reserves the correct box before the bytes arrive (no layout shift),
   and the width below keeps them inside their card at every viewport instead
   of overflowing at the native size.

   The anchors still carry data-fastpass-* and the smart-click script keys off
   the href, so using an image instead of a text label changes neither.
   ========================================================================== */
.jvz-buy{margin:22px 0 0;text-align:center;}

.jvz-buy-label{
  margin:0 0 10px;
  font:500 10.5px/1.25 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--t3);
}

.jvz-buy-link{
  display:inline-block;
  width:min(420px,100%);
  border-radius:12px;
  /* If i.jvzoo.com is ever unreachable (blocked host, outage) the alt text is
     all that renders — the fixed width above keeps the anchor a tappable block
     instead of collapsing to a bare line of text. */
  color:var(--t1);
  font-weight:600;
  transition:transform .18s ease,box-shadow .18s ease;
}
.jvz-buy-link img{
  display:block;width:100%;height:auto;border:0;border-radius:12px;
}
.jvz-buy-link:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(0,0,0,.45);}
.jvz-buy-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

/* Post-click state applied by jvzoo-checkout-state.js while the redirect to
   JVZoo is in flight — the image should read as spent, not hoverable. */
.jvz-buy-link.jvz-checkout-locked{opacity:.55;transform:none;box-shadow:none;}
/* The vendor script also sets aria-disabled; block the pointer so a locked
   image can't take the second click that causes a duplicate purchase. */
.jvz-buy-link[aria-disabled="true"]{cursor:default;pointer-events:none;}

/* ==========================================================================
   CHIPS
   ========================================================================== */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font:500 10.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  padding:5px 9px;border-radius:5px;border:1px solid var(--border-strong);
  background:var(--s3);color:var(--t2);white-space:nowrap;
}
.chip-owned{border-color:rgba(127,217,168,.45);background:var(--success-soft);color:var(--success)}
.chip-fast{border-color:var(--accent-border);background:var(--accent-soft);color:var(--accent)}

/* ==========================================================================
   HEADER — no nav. This is a funnel page; the only ways out are the two
   decisions at the bottom, so a link bar would only leak attention.
   ========================================================================== */
.site-head{
  position:sticky;top:0;z-index:90;
  background:rgba(16,17,20,.86);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--border);
}
.head-row{display:flex;align-items:center;gap:16px;min-height:60px;padding:11px 0}
.brand{display:flex;align-items:center;gap:10px;flex:0 0 auto;min-width:0}
.brand img{height:28px;width:auto}
.brand-tag{
  font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  border:1px solid var(--accent-border);background:var(--accent-soft);padding:4px 7px;border-radius:5px;
  white-space:nowrap;
}
.head-status{
  margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  font:500 11px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--success);
  background:var(--success-soft);border:1px solid rgba(127,217,168,.4);
  padding:7px 12px;border-radius:999px;white-space:nowrap;
}
.head-status i{width:6px;height:6px;border-radius:50%;background:var(--success);flex:0 0 auto}
@media(max-width:560px){
  .brand-tag{display:none}
  .head-status{font-size:10px;padding:6px 9px;letter-spacing:.06em}
}
@media(max-width:380px){
  .head-status span{display:none}
  .brand img{height:24px}
}

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;padding:56px 0 64px;
  background:
    radial-gradient(920px 470px at 76% -10%,rgba(242,169,60,.15),transparent 62%),
    radial-gradient(700px 400px at 4% 6%,rgba(127,178,217,.06),transparent 60%);
}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:64px 64px;opacity:.16;
  mask-image:radial-gradient(ellipse 80% 64% at 50% 30%,#000,transparent);
  -webkit-mask-image:radial-gradient(ellipse 80% 64% at 50% 30%,#000,transparent);
}
.hero > *{position:relative;z-index:1}
@media(max-width:640px){.hero{padding:40px 0 52px}}

.hero-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:22px}
.hero-confirm{
  display:inline-flex;align-items:center;gap:9px;
  font:500 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--success);background:var(--success-soft);
  border:1px solid rgba(127,217,168,.45);border-radius:999px;padding:8px 14px;
}
.hero-confirm svg{width:13px;height:13px;flex:0 0 auto}

.hero h1{margin-bottom:20px;max-width:20ch}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-sub{font-size:clamp(15.5px,1.7vw,19px);color:var(--t2);max-width:58ch;margin:0 0 30px;line-height:1.62}
.hero-sub b{color:var(--t1);font-weight:600}

.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:52px;align-items:center}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:40px}}

/* ---------------------------------------------------- the three-door rail */
/* The whole offer in one glance: what you own, the shortcut, the full set.
   This is the page's thesis, so it sits above the fold on every width. */
.doors{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:stretch;gap:0;
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;
}
.door{padding:22px 22px;display:flex;flex-direction:column;gap:9px;min-width:0;position:relative}
.door + .door{border-left:0}
/* Just a separator with a direction on it — a boxed-in gutter made the rail
   read as three unrelated tiles instead of one path. */
.door-arrow{
  display:grid;place-items:center;width:46px;color:var(--t3);font-size:14px;
  border-left:1px solid var(--border);
  background:linear-gradient(90deg,rgba(0,0,0,.16),transparent);
}
.door-k{font:500 9.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--t3)}
.door-price{font:600 clamp(24px,3.2vw,34px)/1 var(--display);letter-spacing:-.035em;color:var(--t2);font-variant-numeric:tabular-nums}
.door-name{font:600 13.5px/1.35 var(--display);color:var(--t1)}
.door-note{font-size:11.5px;line-height:1.5;color:var(--t3)}

.door.is-owned .door-price{color:var(--success)}
.door.is-owned::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--success);opacity:.65;
}
.door.is-fast{background:linear-gradient(180deg,rgba(242,169,60,.13),transparent 70%)}
.door.is-fast .door-price{color:var(--accent)}
.door.is-fast .door-k{color:var(--accent)}
.door.is-fast::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);
}
@media(max-width:1080px){
  .door{padding:20px 16px}
  .door-arrow{width:34px}
}
@media(max-width:820px){
  .doors{grid-template-columns:1fr;border-radius:var(--r)}
  .door{padding:20px 18px}
  .door-arrow{
    width:auto;height:32px;border-left:0;
    border-top:1px solid var(--border);
    background:linear-gradient(180deg,rgba(0,0,0,.16),transparent);
    transform:rotate(90deg);
  }
}

/* --------------------------------------------------------- hero offer card */
.offer{
  position:relative;isolation:isolate;
  background:
    radial-gradient(120% 84% at 100% 0,rgba(242,169,60,.14),transparent 58%),
    linear-gradient(180deg,var(--s2),var(--s1) 46%);
  border:1px solid var(--border-strong);border-radius:var(--r-xl);
  padding:28px 26px 24px;
  box-shadow:0 26px 60px rgba(0,0,0,.44),inset 0 1px 0 rgba(255,255,255,.035);
}
/* Lit rim on the top edge only, inset from the corners — light falling on the
   card rather than a gold box. Same treatment as the JV page's .lw card. */
.offer::before{
  content:'';position:absolute;left:26px;right:26px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent-border) 20%,var(--accent) 50%,var(--accent-border) 80%,transparent);
  opacity:.9;
}
.offer-k{display:block;font:500 10px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--t3);margin-bottom:14px}
.offer-name{font:600 clamp(20px,2.6vw,26px)/1.1 var(--display);letter-spacing:-.025em;margin:0 0 16px;color:var(--t1)}
.offer-name span{color:var(--accent)}

.offer-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.offer-price b{font:600 clamp(44px,7vw,62px)/1 var(--display);letter-spacing:-.04em;color:var(--accent);font-variant-numeric:tabular-nums}
.offer-price s{font:500 19px/1 var(--mono);color:var(--t3);text-decoration-thickness:1px}
.offer-price-note{font:500 11px/1.5 var(--mono);letter-spacing:.06em;color:var(--t2);margin:0 0 20px}

.offer-list{list-style:none;margin:0 0 22px;padding:20px 0 0;border-top:1px solid var(--border);display:grid;gap:11px}
.offer-list li{position:relative;padding-left:28px;font-size:14px;color:var(--t2);line-height:1.5}
.offer-list li::before{
  content:'✓';position:absolute;left:0;top:1px;width:19px;height:19px;border-radius:5px;
  display:grid;place-items:center;font-size:10.5px;
  background:var(--success-soft);color:var(--success);border:1px solid rgba(127,217,168,.4);
}
.offer-list li b{color:var(--t1);font-weight:600}
.offer-foot{margin:16px 0 0;font-size:11.5px;line-height:1.6;color:var(--t3)}
@media(max-width:520px){
  .offer{padding:24px 18px 20px;border-radius:var(--r-lg)}
  .offer::before{left:18px;right:18px}
}

/* ------------------------------------------------------- workflow mini-rail */
.flow{
  display:flex;align-items:center;gap:0;flex-wrap:nowrap;
  margin:34px 0 0;padding:0;list-style:none;
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r);
  overflow:hidden;
}
.flow li{
  flex:1 1 0;min-width:0;padding:14px 10px;text-align:center;
  font:500 11px/1.3 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--t2);
  position:relative;
}
.flow li + li{border-left:1px solid var(--border)}
.flow li b{display:block;font:600 13px/1.3 var(--display);letter-spacing:-.01em;color:var(--t1);margin-bottom:4px;text-transform:none}
/* One workflow, not two alternating teams. The stages FastPass adds are lit;
   the stages you already own stay quiet. Tinting both made the rail zig-zag. */
.flow li.is-owned{color:var(--t3)}
.flow li.is-owned b{color:var(--success)}
.flow li.is-fast{background:rgba(242,169,60,.09);color:var(--accent)}
.flow li.is-fast b{color:var(--accent)}
.flow li.is-fast::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);opacity:.85;
}
@media(max-width:640px){
  .flow{flex-wrap:wrap}
  .flow li{flex:1 1 50%;min-width:50%}
  .flow li:nth-child(3){border-left:0}
  .flow li:nth-child(n+3){border-top:1px solid var(--border)}
  .flow li{font-size:10px;padding:12px 8px}
}

/* ==========================================================================
   2 · THE UPGRADE MAZE
   The visual argument: four separate decisions, four separate moments,
   scattered. Deliberately cluttered and desaturated.
   ========================================================================== */
.maze{
  position:relative;
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:34px 30px 30px;overflow:hidden;
}
.maze-start{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--s3);border:1px solid var(--border-strong);border-radius:999px;
  padding:9px 16px;font:500 11px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--t2);
  margin-bottom:8px;
}
.maze-start i{width:7px;height:7px;border-radius:50%;background:var(--success);flex:0 0 auto}

.maze-svg{width:100%;height:64px;display:block;color:var(--border-strong)}
@media(max-width:820px){.maze-svg{display:none}}

.maze-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.maze-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.maze-cards{grid-template-columns:1fr}}

.mz{
  background:var(--s2);border:1px dashed var(--border-strong);border-radius:var(--r);
  padding:16px 15px;display:flex;flex-direction:column;gap:9px;
  filter:saturate(.35);opacity:.9;
}
.mz-k{font:500 9.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--t3)}
.mz-name{font:600 13.5px/1.3 var(--display);color:var(--t1)}
.mz-price{font:500 15px/1 var(--mono);color:var(--t2);font-variant-numeric:tabular-nums}
.mz-price small{display:block;font-size:9.5px;letter-spacing:.06em;color:var(--t3);margin-top:5px;text-transform:uppercase}
.mz-decide{
  margin-top:auto;font:500 10px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--t3);border-top:1px dashed var(--border-strong);padding-top:9px;
}
.maze-foot{
  display:flex;align-items:flex-start;gap:12px;margin:22px 0 0;padding:16px 18px;
  background:rgba(232,115,95,.06);border:1px solid rgba(232,115,95,.28);
  border-left:3px solid var(--danger);border-radius:var(--r);
}
.maze-foot span{font-size:14px;line-height:1.6;color:var(--t2)}
.maze-foot span b{color:var(--t1);font-weight:600}
.maze-foot svg{width:18px;height:18px;flex:0 0 auto;color:var(--danger);margin-top:2px}
@media(max-width:560px){
  .maze{padding:24px 18px 22px;border-radius:var(--r-lg)}
}

/* ==========================================================================
   3 · THE FASTPASS — the same four paths, collapsed into one rail
   ========================================================================== */
.collapse{
  position:relative;
  background:
    radial-gradient(700px 300px at 50% 0,rgba(242,169,60,.11),transparent 66%),
    var(--s1);
  border:1px solid var(--border-strong);border-radius:var(--r-xl);
  padding:34px 30px 30px;overflow:hidden;
}
.col-tops{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:0}
.col-top{
  background:var(--s2);border:1px solid var(--border);border-radius:var(--r-sm);
  padding:11px 12px;text-align:center;
  font:500 11px/1.35 var(--display);font-weight:600;color:var(--t1);
}
@media(max-width:640px){
  .col-tops{grid-template-columns:repeat(2,1fr);gap:9px}
  .col-top{font-size:10.5px;padding:10px 8px}
}

.funnel-svg{width:100%;height:74px;display:block;color:var(--accent)}
@media(max-width:640px){.funnel-svg{height:46px}}

.col-out{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(180deg,rgba(242,169,60,.16),rgba(242,169,60,.05));
  border:1px solid var(--accent-border);border-radius:var(--r);
  padding:18px 22px;text-align:center;
}
.col-out b{font:600 clamp(17px,2.4vw,22px)/1.2 var(--display);letter-spacing:-.02em;color:var(--t1)}
.col-out .col-price{font:600 clamp(22px,3vw,30px)/1 var(--display);color:var(--accent);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.col-out span{font:500 11px/1 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--t2)}

.col-gains{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
@media(max-width:820px){.col-gains{grid-template-columns:1fr}}
.gain{background:var(--s2);border:1px solid var(--border);border-radius:var(--r);padding:18px 18px}
.gain h4{margin:0 0 7px;color:var(--t1)}
.gain p{font-size:13.5px;color:var(--t2);line-height:1.6;margin:0}
.gain-ico{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:15px;margin-bottom:13px;
  background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--accent);
}
@media(max-width:560px){
  .collapse{padding:24px 18px 22px;border-radius:var(--r-lg)}
}

/* ==========================================================================
   4 · WHAT FASTPASS UNLOCKS — real UI, not paragraphs
   ========================================================================== */
.unlocks{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
@media(max-width:900px){.unlocks{grid-template-columns:1fr}}

.ul-card{
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .18s,transform .18s;
}
.ul-card:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.ul-head{display:flex;align-items:flex-start;gap:13px;padding:20px 20px 16px}
.ul-num{
  flex:0 0 auto;font:500 10.5px/1 var(--mono);letter-spacing:.1em;color:var(--accent);
  border:1px solid var(--accent-border);background:var(--accent-soft);border-radius:5px;padding:6px 9px;
}
.ul-head h3{margin:0 0 5px}
.ul-head p{font-size:13.5px;color:var(--t2);line-height:1.55;margin:0}
.ul-shot{
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:var(--s2);position:relative;
}
.ul-bar{display:flex;align-items:center;gap:6px;padding:8px 11px;border-bottom:1px solid var(--border);background:var(--s3)}
.ul-bar i{width:8px;height:8px;border-radius:50%;background:var(--border-strong);flex:0 0 auto}
.ul-bar em{margin-left:6px;font:400 10.5px/1 var(--mono);color:var(--t3);font-style:normal;letter-spacing:.03em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Fixed-ratio window with the capture pinned to the top edge: these are tall
   app screenshots, and letting them run full height would make each card
   metres long. object-position keeps the meaningful UI in frame. */
.ul-shot-win{aspect-ratio:16/10;overflow:hidden;background:var(--bg)}
.ul-shot-win img{width:100%;height:100%;object-fit:cover;object-position:top center}
.ul-list{list-style:none;margin:0;padding:18px 20px 20px;display:grid;gap:9px}
.ul-list li{position:relative;padding-left:26px;font-size:13.5px;color:var(--t2);line-height:1.5}
.ul-list li::before{
  content:'✓';position:absolute;left:0;top:0;width:18px;height:18px;border-radius:5px;
  display:grid;place-items:center;font-size:10px;
  background:var(--success-soft);color:var(--success);border:1px solid rgba(127,217,168,.4);
}
.unlock-note{
  margin:22px 0 0;padding:16px 18px;background:var(--s2);
  border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r);
  font-size:13.5px;line-height:1.65;color:var(--t2);
}
.unlock-note b{color:var(--t1);font-weight:600}

/* ==========================================================================
   5 · BUYING LOGIC — the ledger
   ========================================================================== */
/* Both cards run full height so the two totals sit on the same line — the
   comparison only works if the eye can travel straight across. */
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
@media(max-width:900px){.ledger{grid-template-columns:1fr}}

.lg{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--s1);overflow:hidden;display:flex;flex-direction:column}
.lg-head{padding:20px 22px 18px;border-bottom:1px solid var(--border)}
.lg-head h3{margin:0}
.lg-head h3 + p{margin-top:6px}
.lg-head p{font-size:13px;color:var(--t3);margin:0;line-height:1.55}
/* Rows share the leftover height evenly rather than pooling it as one dead gap
   at the bottom — that way row 1 lines up with row 1 across both cards. */
.lg-rows{list-style:none;margin:0;padding:0;flex:1;display:flex;flex-direction:column}
.lg-rows li{
  flex:1 0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 22px;border-bottom:1px solid var(--border);font-size:14px;color:var(--t2);
}
.lg-rows li span{min-width:0}
.lg-rows li b{
  font:500 14.5px/1 var(--mono);color:var(--t1);white-space:nowrap;flex:0 0 auto;
  font-variant-numeric:tabular-nums;
}
.lg-rows li i{display:block;font-style:normal;font-size:11px;color:var(--t3);margin-top:4px;letter-spacing:.02em}
.lg-total{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:18px 22px;background:var(--s2);border-top:1px solid var(--border-strong);
}
.lg-total span{font:500 10.5px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--t2)}
.lg-total b{font:600 clamp(22px,3vw,28px)/1 var(--display);letter-spacing:-.03em;color:var(--t1);
  font-variant-numeric:tabular-nums;white-space:nowrap}

.lg.is-maze{filter:saturate(.5)}
.lg.is-maze .lg-total b{color:var(--t2)}
.lg.is-fast{border-color:var(--accent-border);box-shadow:0 18px 44px rgba(0,0,0,.34)}
.lg.is-fast .lg-head{background:linear-gradient(180deg,rgba(242,169,60,.13),transparent)}
.lg.is-fast .lg-total{background:linear-gradient(180deg,rgba(242,169,60,.14),rgba(242,169,60,.05))}
.lg.is-fast .lg-total b{color:var(--accent)}
.lg-flag{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:11px;
  font:500 10px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  padding:6px 10px;border-radius:5px;
}
.lg.is-maze .lg-flag{color:var(--t3);background:var(--s3);border:1px solid var(--border-strong)}
.lg.is-fast .lg-flag{color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-border)}

.logic-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
@media(max-width:820px){.logic-notes{grid-template-columns:1fr}}
.ln{background:var(--s2);border:1px solid var(--border);border-radius:var(--r);padding:17px 18px}
.ln b{display:block;font:600 14px/1.3 var(--display);color:var(--t1);margin-bottom:7px}
.ln p{font-size:13px;color:var(--t2);line-height:1.6;margin:0}
.ln-hi{border-color:var(--accent-border);background:linear-gradient(180deg,rgba(242,169,60,.1),transparent)}

/* ==========================================================================
   6 · OBJECTIONS
   ========================================================================== */
.objs{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:820px){.objs{grid-template-columns:1fr}}
.obj{background:var(--s1);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px 22px}
.obj h3{
  margin:0 0 11px;font:600 16px/1.35 var(--display);color:var(--t1);
  display:flex;align-items:flex-start;gap:10px;letter-spacing:-.01em;
}
.obj h3::before{
  content:'?';flex:0 0 auto;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  font:600 12px/1 var(--mono);background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-border);
  margin-top:1px;
}
.obj p{font-size:14px;color:var(--t2);line-height:1.65;margin:0}
.obj p b{color:var(--t1);font-weight:600}

/* ==========================================================================
   7 · FINAL DECISION
   ========================================================================== */
.close{
  position:relative;overflow:hidden;border-top:1px solid var(--border);
  padding:80px 0 84px;
  background:
    radial-gradient(880px 440px at 50% -6%,rgba(242,169,60,.16),transparent 64%),
    var(--bg);
}
.close::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:64px 64px;opacity:.14;
  mask-image:radial-gradient(ellipse 74% 60% at 50% 24%,#000,transparent);
  -webkit-mask-image:radial-gradient(ellipse 74% 60% at 50% 24%,#000,transparent);
}
.close > *{position:relative;z-index:1}
@media(max-width:640px){.close{padding:56px 0 60px}}

.close h2{max-width:24ch;margin-left:auto;margin-right:auto}

/* Two visually unequal doors. The decline is the same full-size amber .pass-btn
   as every other exit in the funnel — one decline style across all eight pages,
   so a buyer who passed the hero button recognises this one. The emphasis gap is
   carried by the cards, not by shrinking the exit. No shrinking, no guilt copy.
   This card intentionally has no .pass-note: its own paragraph already promises
   the Commercial access is untouched, and saying it twice in one card reads as
   nervousness. */
.decide{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;max-width:900px;margin:38px auto 0;align-items:stretch}
@media(max-width:760px){.decide{grid-template-columns:1fr}}

.dc{
  border-radius:var(--r-xl);padding:26px 24px;display:flex;flex-direction:column;gap:14px;
  border:1px solid var(--border);background:var(--s1);text-align:left;
}
.dc-yes{
  border-color:var(--accent-border);
  background:
    radial-gradient(120% 90% at 100% 0,rgba(242,169,60,.16),transparent 60%),
    linear-gradient(180deg,var(--s2),var(--s1) 50%);
  box-shadow:0 24px 56px rgba(0,0,0,.44);
}
.dc-k{font:500 10px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--t3)}
.dc-yes .dc-k{color:var(--accent)}
.dc h3{margin:0;font-size:clamp(18px,2.4vw,23px)}
.dc p{font-size:13.5px;color:var(--t2);line-height:1.6;margin:0}
/* Bottom-aligns the CTA so the decline card's button lines up with the buy
   button in the taller card beside it (.decide is align-items:stretch).
   Was .dc .btn; .pass-btn is deliberately not a .btn, so the selector had
   to follow the swap or the button would ride up under the paragraph. */
.dc .pass-btn{margin-top:auto}
.dc-price{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
}
.dc-price b{font:600 clamp(34px,5.4vw,46px)/1 var(--display);letter-spacing:-.04em;color:var(--accent);font-variant-numeric:tabular-nums}
.dc-price s{font:500 16px/1 var(--mono);color:var(--t3)}

.close-guarantee{
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  max-width:900px;margin:30px auto 0;padding:18px 22px;
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r-lg);
}
.close-guarantee img{width:66px;height:66px;object-fit:contain;flex:0 0 auto}
.close-guarantee div{text-align:left;min-width:0}
.close-guarantee b{display:block;font:600 14.5px/1.3 var(--display);color:var(--t1);margin-bottom:4px}
.close-guarantee p{font-size:12.5px;color:var(--t3);line-height:1.55;margin:0;max-width:52ch}
@media(max-width:520px){
  .close-guarantee{flex-direction:column;text-align:center;gap:12px}
  .close-guarantee div{text-align:center}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-foot{border-top:1px solid var(--border);background:var(--s1);padding:34px 0}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-brand img{height:26px;width:auto;opacity:.8}
.foot-legal{font-size:12px;color:var(--t3);line-height:1.6;max-width:66ch}
.foot-legal a{color:var(--t2)}
.foot-legal a:hover{color:var(--accent)}
@media(max-width:640px){.foot-row{flex-direction:column;align-items:flex-start;gap:14px}}

/* Required JVZoo disclaimer. Deliberately larger and higher-contrast than
   .foot-legal so it reads as clear and conspicuous, never fine print. */
.foot-disclaimer{
  margin-top:26px;padding:20px 22px;
  border:1px solid var(--border-strong);border-radius:var(--r);
  background:var(--s2);
}
.foot-disclaimer p{
  margin:0;font-size:15px;line-height:1.7;color:var(--t1);
}
.foot-disclaimer p + p{margin-top:14px}
@media(max-width:640px){
  .foot-disclaimer{margin-top:20px;padding:16px}
  .foot-disclaimer p{font-size:15px;line-height:1.75}
}

/* ==========================================================================
   LEGAL & POLICIES  —  ported verbatim from /commercials/ so both pages read
   as one brand. The three documents open in the #legal-modal dialog rather
   than navigating, so the funnel page is never left.

   The column rules are rescoped from #site-footer (the commercials footer id)
   to .site-foot .ft-legal: as written they also matched h4/ul/li/a generally,
   which here would restyle .foot-legal and the brand row.
   ========================================================================== */
.site-foot .ft-legal{margin-top:30px}
  /* ---- the three documents, linear ----
     One row rather than a stacked list, per the request. list-style is already
     off on .site-foot ul; the dividers are borders on the flex items so they
     disappear correctly when the row wraps. */
  .site-foot .ft-docs{
    display:flex; flex-wrap:wrap; align-items:center;
    gap:0 18px; row-gap:10px;
  }
  /* .ft-legal is in the selector so this reset outranks the generic
     `.site-foot .ft-legal li + li{margin-top:11px}` below it. In the
     /commercials/ original the reset carried an id and won on that; rescoping
     to a class dropped it under the stacking rule, which pushed items 2 and 3
     down 11px and knocked their dividers out of line with the first item. */
  .site-foot .ft-legal .ft-docs > li{margin:0;}
  .site-foot .ft-legal .ft-docs > li + li{
    margin-top:0; padding-left:18px; border-left:1px solid var(--border);
  }
  .site-foot .ft-legal-note{
    margin:16px 0 0; max-width:520px;
    font-size:11.5px; line-height:1.65; color:var(--t3);
  }
  .site-foot .ft-legal h4{
    font-family:'IBM Plex Mono',monospace; font-weight:400; font-size:10px;
    letter-spacing:.12em; text-transform:uppercase; color:var(--t3);
    margin:0 0 16px;
  }
  .site-foot .ft-legal ul{list-style:none; margin:0; padding:0;}
  .site-foot .ft-legal li + li{margin-top:11px;}
  .site-foot .ft-legal a{
    color:var(--t2); text-decoration:none; font-size:13px;
    transition:color .15s ease;
  }
  .site-foot .ft-legal a:hover{color:var(--accent);}
  .site-foot .ft-legal a:focus-visible{
    outline:2px solid var(--accent-border); outline-offset:3px; border-radius:3px;
  }
  /* the legal links are buttons, not anchors — they open a dialog rather than
     navigate — so they need the anchor's appearance put back */
  .site-foot button.ft-doc{
    appearance:none; background:none; border:0; padding:0; cursor:pointer;
    font-family:inherit; font-size:13px; color:var(--t2); text-align:left;
    transition:color .15s ease;
  }
  .site-foot button.ft-doc:hover{color:var(--accent);}

  /* stacked below 520, as on /commercials/: a three-across row breaks
     mid-title at phone widths */
  @media (max-width:520px){
    .site-foot .ft-legal .ft-docs{display:block;}
    /* matches the reset above selector-for-selector, so the 11px gap the
       stacked list wants is applied rather than lost to it */
    .site-foot .ft-legal .ft-docs > li + li{
      margin-top:11px; padding-left:0; border-left:0;
    }
  }

/* ==========================================================================
   THE DOCUMENT DIALOG  —  verbatim from /commercials/, except var(--symbol)
   (defined only in that page's inline head) swapped for var(--sans).
   ========================================================================== */
  /* ==========================================================================
     the document dialog
     ========================================================================== */
  #legal-modal[hidden]{display:none;}
  #legal-modal{position:fixed; inset:0; z-index:9000;}
  #legal-modal .lg-scrim{
    position:absolute; inset:0; background:rgba(0,0,0,.78);
    backdrop-filter:blur(3px);
  }
  #legal-modal .lg-box{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:min(920px, calc(100vw - 32px));
    height:min(86vh, 900px);
    display:flex; flex-direction:column;
    background:var(--s1); border:1px solid var(--border-strong);
    border-radius:18px; overflow:hidden;
    box-shadow:0 40px 90px rgba(0,0,0,.7);
  }

  #legal-modal .lg-head{
    flex:none; display:flex; align-items:flex-start; gap:16px;
    padding:22px 24px 18px; border-bottom:1px solid var(--border);
    background:var(--s2);
  }
  #legal-modal .lg-head > div{min-width:0; flex:1;}
  #legal-modal .lg-eyebrow{
    display:block; font-family:'IBM Plex Mono',monospace; font-size:10px;
    letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
    margin-bottom:7px;
  }
  #legal-modal h2{
    font-size:21px; letter-spacing:-.015em; margin:0 0 6px; color:var(--t1);
  }
  #legal-modal .lg-date{
    margin:0; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
    letter-spacing:.05em; color:var(--t3);
  }
  #legal-modal .lg-x{
    flex:none; appearance:none; cursor:pointer;
    width:34px; height:34px; border-radius:9px;
    background:var(--s3); border:1px solid var(--border-strong);
    color:var(--t2); font-family:var(--sans); font-size:14px; line-height:1;
  }
  #legal-modal .lg-x:hover{color:var(--t1); border-color:var(--accent-border);}

  /* the switcher, so someone reading the Terms can get to the Licence without
     closing the dialog and hunting the footer again */
  #legal-modal .lg-tabs{
    flex:none; display:flex; gap:7px; overflow-x:auto;
    padding:12px 24px; border-bottom:1px solid var(--border);
    background:rgba(0,0,0,.28);
  }
  #legal-modal .lg-tabs button{
    flex:none; appearance:none; cursor:pointer;
    padding:7px 12px; border-radius:999px;
    background:transparent; border:1px solid var(--border-strong);
    font-family:'IBM Plex Mono',monospace; font-size:9.5px;
    letter-spacing:.08em; text-transform:uppercase; color:var(--t2);
    transition:all .15s ease;
  }
  #legal-modal .lg-tabs button:hover{color:var(--t1); border-color:var(--t3);}
  #legal-modal .lg-tabs button[aria-selected="true"]{
    background:var(--accent-soft); border-color:var(--accent-border);
    color:var(--accent);
  }

  /* ---- the document body ---- */
  #legal-modal .lg-body{
    flex:1; min-height:0; overflow-y:auto;
    padding:26px 30px 40px;
    /* a legal document is long-form reading, so it gets a measure, not the full
       920px of the dialog */
    font-size:13.5px; line-height:1.75; color:var(--t2);
    overscroll-behavior:contain;
  }
  #legal-modal .lg-body > *{max-width:74ch;}
  #legal-modal .lg-body p{margin:0 0 13px;}
  #legal-modal .lg-body h3{
    display:flex; align-items:baseline; gap:11px;
    font-size:15.5px; letter-spacing:-.01em; color:var(--t1);
    margin:32px 0 12px; padding-top:18px;
    border-top:1px solid var(--border);
    scroll-margin-top:8px;
  }
  #legal-modal .lg-body h3:first-child{margin-top:0; padding-top:0; border-top:0;}
  #legal-modal .lg-body h3 > span{
    flex:none; min-width:26px; height:26px; border-radius:7px;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--accent-soft); border:1px solid var(--accent-border);
    color:var(--accent);
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; font-weight:400;
  }
  #legal-modal .lg-body h4{
    display:flex; align-items:baseline; gap:9px;
    font-size:13.5px; color:var(--t1); margin:22px 0 9px;
  }
  #legal-modal .lg-body h4 > span{
    flex:none; font-family:'IBM Plex Mono',monospace; font-size:10px;
    letter-spacing:.05em; color:var(--t3);
  }
  #legal-modal .lg-body h4.lg-plain{
    font-family:'IBM Plex Mono',monospace; font-size:10.5px;
    letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
    margin-top:30px;
  }
  /* numbered clauses (1.1, 3.2 …) hang their number in the margin so the clause
     text still forms a straight left edge */
  #legal-modal .lg-body p.lg-cl{
    padding-left:46px; position:relative; margin-bottom:11px;
  }
  #legal-modal .lg-body p.lg-cl > b{
    position:absolute; left:0; top:0; font-weight:400;
    font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--t3);
  }
  #legal-modal .lg-body ul,#legal-modal .lg-body ol{
    margin:0 0 15px; padding-left:22px;
  }
  #legal-modal .lg-body li{margin-bottom:7px;}
  #legal-modal .lg-body ul{list-style:none; padding-left:18px;}
  #legal-modal .lg-body ul > li{position:relative; padding-left:14px;}
  #legal-modal .lg-body ul > li::before{
    content:''; position:absolute; left:0; top:.62em;
    width:5px; height:5px; border-radius:50%; background:var(--accent);
    opacity:.65;
  }
  #legal-modal .lg-body em{font-style:normal; font-weight:600; color:var(--t1);}
  #legal-modal .lg-body a{color:var(--accent); text-decoration:none;
    border-bottom:1px solid var(--accent-border); word-break:break-word;}
  #legal-modal .lg-body a:hover{border-bottom-color:var(--accent);}

  #legal-modal .lg-foot{
    flex:none; display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:12px;
    padding:14px 24px; border-top:1px solid var(--border);
    background:var(--s2);
  }
  #legal-modal .lg-foot p{
    margin:0; font-size:10.5px; line-height:1.6; color:var(--t3); max-width:600px;
  }
  #legal-modal .lg-foot .btn{flex:none;}

  @media (max-width:640px){
    #legal-modal .lg-box{
      width:100vw; height:100vh; max-height:none;
      border-radius:0; border:0;
    }
    #legal-modal .lg-head{padding:18px 18px 15px;}
    #legal-modal h2{font-size:18px;}
    #legal-modal .lg-tabs{padding:11px 18px;}
    #legal-modal .lg-body{padding:20px 18px 34px; font-size:13px;}
    #legal-modal .lg-foot{padding:12px 18px;}
  }

  /* body scroll is locked while the dialog is open, or the page scrolls behind it */
  body.lg-open{overflow:hidden;}

/* ==========================================================================
   RESTRUCTURE 2026-09-27 — components ported from /bundle
   ==========================================================================
   The page was repositioned from "$230 post-purchase FastPass" to "skip the
   funnel, get the whole Bundle for $317 with the lyrix coupon". Four things
   came across from public/bundle/assets/css/bundle.css, which shares this
   file's token block verbatim so nothing needed retuning:

     1 · .hero-watch / .vidframe / .vidframe-cap   the webinar replay slot
     2 · .coupon / .coupon-code / .coupon-note     the lyrix coupon callout
     3 · .otos / .ob / .ob-art                     the OTO box grid (new here)
     4 · .bar                                      sticky mobile decision bar

   Where a rule is a straight copy the original comment is reduced to a
   pointer, because bundle.css is the file that will be edited if the shared
   component changes. Where this page needs something bundle.css does not have
   — the OTO grid, which has no counterpart there — the reasoning is written
   out in full.
   ========================================================================== */

/* ---- 1 · WEBINAR REPLAY (bundle.css sections 1 + 1a) --------------------- */

/* the line that hands the reader over to the video */
.hero-watch{
  margin:0 0 14px;
  font:600 11px/1 var(--mono);letter-spacing:.17em;text-transform:uppercase;
  color:var(--accent);
}

/* aspect-ratio (not padding-top) reserves the 16:9 box, and .vidframe-in is
   absolutely positioned so any embed shape fills the frame without knowing
   about it. Two states: bare .vidframe is the empty placeholder, .has-video is
   a real embed.

   .has-video removing ::before is LOAD-BEARING, not cosmetic. The bloom is
   inset:0 absolute, so over a real iframe it paints on top and swallows every
   click, play included. Same trap as /commercials #lyrixa-vsl-video. */
.vidframe{
  position:relative;width:100%;margin:0 auto;aspect-ratio:16/9;
  background:linear-gradient(150deg,var(--s2),var(--s1));
  border:1px solid var(--border-strong);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.6);
}
.vidframe::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 50% 28%,var(--accent-soft),transparent 62%);
}
.vidframe-in{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
}
.vidframe-in > iframe,
.vidframe-in > video,
.vidframe-in > div,
.vidframe-in > object,
.vidframe-in > embed{width:100%;height:100%;border:0;display:block}

/* ---- empty state ---- */
.vidframe-dot{
  position:relative;width:74px;height:74px;border-radius:50%;flex:none;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  box-shadow:0 10px 34px rgba(242,169,60,.34);
}
.vidframe-dot::after{
  content:'';position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-style:solid;border-width:13px 0 13px 21px;
  border-color:transparent transparent transparent var(--ink-on-accent);
}
.vidframe-label{
  font:500 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--t3);
}
@media(max-width:560px){
  .vidframe{border-radius:var(--r)}
  .vidframe-dot{width:58px;height:58px}
  .vidframe-dot::after{border-width:10px 0 10px 16px}
}

/* ---- filled state ---- */
.vidframe.has-video{background:#000}
.vidframe.has-video::before{content:none}
.vidframe.has-video .vidframe-dot,
.vidframe.has-video .vidframe-label{display:none}

.vidframe-cap{
  margin:14px auto 0;max-width:64ch;
  font-size:12.5px;color:var(--t3);line-height:1.6;text-align:center;
}

/* The replay is the centrepiece of the new hero, so it gets its own centred
   column above the two-column .hero-grid rather than living inside either
   side of it. Capped below the 1180px wrap: a 16:9 box at full wrap width is
   664px tall and pushes the price and the buy button under the fold. */
.hero-replay{max-width:760px;margin:0 auto 40px;text-align:center}
@media(max-width:900px){.hero-replay{margin-bottom:32px}}

/* ---- 2 · COUPON CALLOUT (bundle.css section 1d) -------------------------- */

/* "Use Coupon Code lyrix For $50 OFF TODAY!" — a REAL vendor-issued discount
   at JVZoo checkout, which is why it ships on a page that otherwise refuses
   countdowns and copies-remaining counters. The distinction is provenance:
   this block is not permission to reintroduce invented scarcity.

   Sits between the price and the buy button at every checkout point, because
   the code has to be entered THERE, not here. No price figures inside it — the
   $317 ledger describes the list price, which the coupon does not change, and
   printing a post-coupon figure would fork it and contradict begin_checkout.

   ::before is the drawn perforation. pointer-events:none is required: .coupon
   contains a real <button> and the pseudo-element would otherwise eat taps on
   the code chip near its upper edge. */
.coupon{
  margin:24px 0 20px;padding:16px 18px;
  border:2px solid var(--accent-border);border-radius:var(--r-lg);
  background:
    linear-gradient(180deg,rgba(242,169,60,.16),rgba(242,169,60,.07)),
    var(--s3);
  box-shadow:0 0 0 4px rgba(242,169,60,.07),0 10px 30px rgba(0,0,0,.35);
  text-align:center;
  position:relative;overflow:hidden;
}
.coupon::before{
  content:'';position:absolute;pointer-events:none;
  left:10px;right:10px;top:7px;height:0;
  border-top:1px dashed rgba(242,169,60,.34);
}

.coupon-line{
  margin:0;
  font-size:clamp(15px,1.6vw,17px);line-height:1.45;font-weight:600;
  color:var(--t1);
}
/* nowrap holds "$50 OFF TODAY!" together — without it the narrow offer column
   breaks after "OFF" and leaves "TODAY!" alone on line two. */
.coupon-line b{
  color:var(--accent);font-weight:700;white-space:nowrap;
  font-family:var(--display);letter-spacing:-.01em;
  font-size:1.08em;
}

/* Filled chip, not accent-on-transparent: this is the one string the visitor
   has to carry to another site, so it is the highest-contrast thing in the
   block. text-transform is deliberately NOT set — the code is lowercase
   "lyrix" as the vendor issued it, and the page copies exactly what it shows
   (see data-coupon). */
.coupon-code{
  appearance:none;-webkit-appearance:none;
  display:inline-block;margin:0 3px;padding:4px 12px;vertical-align:baseline;
  border:0;border-radius:7px;
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  font:700 1.05em/1.4 var(--mono);letter-spacing:.08em;
  color:var(--ink-on-accent);
  box-shadow:0 3px 10px rgba(242,169,60,.34);
  cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.coupon-code:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(242,169,60,.46);filter:brightness(1.06)}
.coupon-code:active{transform:none}
.coupon-code.is-copied{
  background:linear-gradient(180deg,#9FE6C0,var(--success));
  box-shadow:0 3px 10px rgba(127,217,168,.4);
}

/* Doubles as the copy confirmation — the script swaps its text and restores it
   from data-idle, so min-height holds a line at the mobile measure and the buy
   button never jumps when the code is tapped. */
.coupon-note{
  margin:9px 0 0;min-height:1.5em;
  font:500 10.5px/1.5 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--t2);
}
.coupon-note.is-copied{color:var(--success)}

@media(max-width:560px){
  .coupon{margin:20px 0 18px;padding:14px 14px;border-radius:var(--r)}
  .coupon-note{letter-spacing:.07em;font-size:10px}
}

/* ---- 3 · OTO BOX GRID --------------------------------------------------- */

/* NEW ON THIS PAGE — /bundle has no counterpart, because /bundle sells its
   components as prose cards. This page's whole argument is "the funnel is four
   separate paid decisions and this skips them", so the four OTOs have to be
   visible AS products with their prices on them. The box art is what makes
   them read as four things you would otherwise buy rather than four bullets.

   Assets are the vendor's OTO BOXES renders, converted to 600x623 WebP under
   /fastpass/assets/img/oto-*.webp. The width/height attributes in the markup
   must stay in step with that or the grid reserves the wrong box and the row
   jumps on load.

   ONLY THE FOUR INCLUDED OTOs ARE HERE. OTO5 Unlimited ($497/yr) and OTO6
   Reseller License ($297) are NOT part of the $317 Bundle and are deliberately
   absent from this grid — a buyer must not be able to read them as included.
   Unlimited is still named in the FAQ and the footer as a separate offer. */
.otos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:26px}
@media(max-width:1000px){.otos{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media(max-width:520px){.otos{grid-template-columns:1fr}}

.ob{
  background:var(--s2);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:18px 18px 20px;
  display:flex;flex-direction:column;gap:12px;min-width:0;
  position:relative;
}
/* The included badge is the accent rail down the left edge, so the four cards
   read as one included set at a glance without four repeated word-labels. */
.ob::after{
  content:'';position:absolute;left:0;top:18px;bottom:18px;width:2px;
  border-radius:0 2px 2px 0;background:var(--accent);opacity:.55;
}

.ob-num{font:500 9.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--t3)}

/* Box art on a pool of accent light rather than inside a framed tile — the
   PNG-sourced renders are transparent cut-outs, so a panel behind one reads as
   a second rectangular box around the product. The pedestal seats the object
   instead: ::before is the light, ::after the tighter contact shadow that makes
   the box meet a surface rather than hover over one. Same treatment as
   .bx-art in bundle.css so both pages' boxes look photographed the same way.

   No aspect-ratio — the assets are a known 600x623 and carry matching
   width/height, so the intrinsic ratio already reserves the right space. */
.ob-art{position:relative;display:grid;place-items:end center;padding:2px 0 6px}
.ob-art img{
  position:relative;z-index:1;
  display:block;width:100%;max-width:196px;height:auto;margin:0 auto;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.55));
}
.ob-art::before{
  content:'';position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:90%;height:22px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%,rgba(242,169,60,.28),transparent 70%);
  filter:blur(3px);
}
.ob-art::after{
  content:'';position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  width:58%;height:8px;border-radius:50%;pointer-events:none;
  background:rgba(0,0,0,.55);filter:blur(6px);
}

.ob-name{font:600 14px/1.35 var(--display);color:var(--t1);margin:0}
.ob-what{font-size:12.5px;line-height:1.6;color:var(--t2);margin:0}

/* The price is the reason this grid exists, so it is the loudest thing in the
   card after the art — tabular-nums so the four cards' figures align down the
   row even at different digit counts. */
.ob-price{
  margin-top:auto;padding-top:13px;border-top:1px solid var(--border);
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
}
.ob-price b{
  font:600 25px/1 var(--display);letter-spacing:-.03em;color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.ob-price span{font:500 9.5px/1.3 var(--mono);letter-spacing:.11em;text-transform:uppercase;color:var(--t3)}
.ob-inc{
  font:500 9.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--success);display:flex;align-items:center;gap:5px;
}
.ob-inc svg{width:11px;height:11px;flex:none;color:var(--success)}

/* The add-it-up line under the grid. This is the page's core arithmetic, so it
   is a visible total a buyer can check against the four cards above it:
   37 + 297 + 67 + 197 = 598, and the Bundle is $317 before the coupon. */
.oto-sum{
  background:linear-gradient(180deg,var(--s2),var(--s1));
  border:1px solid var(--border-strong);border-radius:var(--r-lg);
  padding:22px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.oto-sum-l{min-width:0;flex:1 1 320px}
.oto-sum-l b{display:block;font:600 16px/1.35 var(--display);color:var(--t1);margin-bottom:5px}
.oto-sum-l p{margin:0;font-size:12.5px;line-height:1.6;color:var(--t2);max-width:56ch}
.oto-sum-r{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;flex:0 0 auto}
.oto-sum-r s{font:500 19px/1 var(--mono);color:var(--t3);font-variant-numeric:tabular-nums}
.oto-sum-r b{
  font:600 clamp(32px,4vw,42px)/1 var(--display);letter-spacing:-.035em;
  color:var(--accent);font-variant-numeric:tabular-nums;
}
@media(max-width:640px){
  .oto-sum{padding:18px 17px;flex-direction:column;align-items:flex-start}
}

/* ---- 4 · STICKY DECISION BAR (bundle.css) -------------------------------- */

/* Small screens only, and only once the hero's own checkout is off screen, so
   the visitor never sees two buy controls at once (the .up class is toggled by
   the IntersectionObserver at the foot of index.html).
   .bar-coupon is the coupon in its shortest form — the bar is height-capped on
   phones, so it gets the code alone rather than the full sentence. */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  display:none;align-items:center;gap:12px;
  padding:11px 16px;
  background:rgba(23,24,29,.96);
  border-top:1px solid var(--border-strong);
  box-shadow:0 -8px 30px rgba(0,0,0,.5);
  transform:translateY(100%);transition:transform .24s ease;
}
@supports(backdrop-filter:blur(8px)){
  .bar{background:rgba(23,24,29,.86);backdrop-filter:blur(10px)}
}
.bar.up{transform:none}
.bar-txt{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;min-width:0;flex:1 1 auto}
.bar-txt>b{
  font:600 22px/1 var(--display);letter-spacing:-.03em;color:var(--t1);
  font-variant-numeric:tabular-nums;
}
.bar-coupon{
  font:500 9.5px/1.3 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--t2);
}
.bar-coupon b{color:var(--accent)}
.bar .btn{flex:0 0 auto;padding:12px 18px;font-size:13.5px}
@media(max-width:820px){
  .bar{display:flex}
  /* room for the bar so it never covers the last line of the footer */
  body.bar-on{padding-bottom:74px}
}

/* ---------------------------------------------- 5 · .hero-lead
   The restructured hero speaks to everybody before it splits into the
   argument/price columns, so the headline and subhead get their own centred
   row above .hero-grid.

   Both overrides below are deliberate. .hero h1 is capped at 20ch because the
   old headline was short and sat in a half-width column; the new one runs
   ~56 characters and would break into six ragged lines at that cap, so it gets
   a wider measure. .hero-sub is left-aligned and capped at 58ch for the same
   reason — centred here, and centred text needs the auto margins to actually
   centre once max-width bites. ------------------------------------------- */
.hero-lead{max-width:920px;margin:0 auto 38px;text-align:center}
.hero-lead h1{max-width:34ch;margin-left:auto;margin-right:auto}
.hero-lead .hero-sub{max-width:66ch;margin-left:auto;margin-right:auto;margin-bottom:0}
.hero-lead + .hero-replay{margin-top:0}
@media(max-width:900px){.hero-lead{margin-bottom:30px}}
@media(max-width:560px){.hero-lead{text-align:left}.hero-lead h1,.hero-lead .hero-sub{max-width:none}}

/* The hero's own .chip pair replaces the old "Payment received" badge, which
   assumed the visitor had already bought. .chip / .chip-fast / .chip-owned all
   already exist above; nothing new is needed for them. */

/* The coupon code inline in a .ln paragraph. Cannot be a <b>: .ln b is the
   block-level card heading. Mono + accent so it still reads as a code the way
   the .coupon-code chips do, without being a second thing to click. */
.ln-code{
  font:500 12.5px/1 var(--mono);letter-spacing:.06em;color:var(--accent);
  background:var(--accent-soft);border:1px solid var(--accent-border);
  border-radius:5px;padding:2px 6px;white-space:nowrap;
}

/* ---------------------------------------------------- .dc-list, closing card
   The four standalone prices inside the "go through the funnel" card. The .dc
   cards are flex columns, so margin-top:auto on the decline button is what
   pushes the exit to the bottom and lets this list sit directly under the
   paragraph it belongs to instead of floating in the middle of a tall card. */
.dc-list{margin:2px 0 0;padding:0;list-style:none;border-top:1px solid var(--border)}
.dc-list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:10px 0;border-bottom:1px solid var(--border);
  font-size:13px;line-height:1.45;color:var(--t2);
}
.dc-list li b{
  flex:none;font:500 14px/1 var(--mono);color:var(--t1);
  font-variant-numeric:tabular-nums;
}
.dc-list-foot{
  margin:0;font:500 10px/1.4 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--t3);
}
.dc-list-foot b{color:var(--t2)}
/* Keeps the two exits on the same baseline whatever the cards contain. */
.dc .pass-btn{margin-top:auto}

/* -------------------------------------------------------------- .hero-offer
   The restructured hero stacks instead of splitting: headline, replay, buy,
   comparison. .hero-grid is left in the stylesheet because the two-column
   layout may come back, but this hero does not use it.

   760px matches .hero-replay above it, so the video and the card below it share
   one edge-to-edge measure and the hero reads as a single column rather than
   three differently-inset blocks. The rail and .flow below get the full wrap
   width — they are comparisons, and comparisons want the room. ------------- */
.hero-offer{max-width:760px;margin:0 auto 38px}
@media(max-width:900px){.hero-offer{margin-bottom:30px}}

/* ------------------------------------------- .oto-cta and the scroll reveal */
/* The OTO grid ends a long way from the hero's buy button, so the section gets
   its own way to the close rather than making the reader scroll back. */
.oto-cta{margin:26px 0 0;text-align:center}

/* Ported from bundle.css:1449. Gated on prefers-reduced-motion:no-preference,
   which also means the no-JS / reduced-motion case is content visible at full
   opacity with no .in class ever needed — the reveal is decoration, never the
   thing that makes content appear. */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
  .rv.in{opacity:1;transform:none}
}

/* Two-door rail. The base .doors track list is 1fr auto 1fr auto 1fr — five
   cells for three doors and two arrows. The restructured hero compares two
   things (the long way vs this page), so it needs three cells. Without this
   override the two doors would be pinned into columns 1 and 3 and the rail
   would end in a dead 1fr of empty panel. */
.doors-2{grid-template-columns:1fr auto 1fr}
@media(max-width:820px){.doors-2{grid-template-columns:1fr}}
/* The struck-through side of the comparison: a price you are being shown in
   order not to pay it, so it reads muted rather than as an option. */
.door.is-long .door-price{color:var(--t3);text-decoration:line-through;text-decoration-thickness:1.5px}

/* ===========================================================================
   EARLY-BIRD ROUNDEL + COUNTDOWN
   ===========================================================================
   A circular "47% OFF" disc with a 36-minute countdown beside it, in the hero
   offer card between the price and the coupon. Ported verbatim from bundle.css
   section 1e — the two files share byte-identical :root tokens, so the only
   change needed was adding --accent-softer above.

   READ THE .eb COMMENT IN index.html BEFORE EDITING. The short version: this
   funnel's rules forbid a countdown, that rule has not changed, and this element
   is here because the owner asked for it. Do not copy it onward to the OTO /
   launchpad / gumroad mirrors or to anything affiliate-facing, and do not wire it
   to anything that changes the real price — nothing in the script writes to the
   $317/$598/$281/47% ledger.

   The 47% is this page's own verified discount (281/598 = 46.99%), the same
   figure .logic-notes and the .collapse gain already print. The roundel restates
   it; it does not invent it, and it is NOT bundle's 66%.

   Layout: disc and timer side by side on one row, disc fixed, timer taking the
   rest. Below 560px they stack centred, because the digit groups plus the disc
   cannot both hold their type size in a 320px column. */
.eb{
  display:flex;align-items:center;gap:16px;
  margin:0 0 18px;padding:14px 16px;
  background:var(--accent-softer);
  border:1px solid var(--accent-border);border-radius:var(--r-lg);
}

/* The disc. Same radial fill and ring treatment as the .ob-price accent on the
   OTO boxes, so the circular marks on the page read as one family. flex:none or
   the disc squashes before the text does. */
.eb-disc{
  flex:none;width:86px;height:86px;border-radius:50%;
  display:grid;place-content:center;gap:1px;text-align:center;
  background:radial-gradient(circle at 34% 28%,var(--accent-2),var(--accent) 62%);
  color:var(--ink-on-accent);
  box-shadow:
    0 0 0 4px var(--bg),
    0 0 0 5px var(--accent-border),
    0 10px 22px rgba(0,0,0,.55),
    0 0 26px rgba(242,169,60,.34);
}
.eb-disc b{
  font-family:var(--display);font-size:25px;font-weight:700;letter-spacing:-.03em;line-height:1;
}
.eb-disc i{
  font-style:normal;font:700 8.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  opacity:.8;
}

/* text-align:left is not a default here — .offer centres everything in the hero
   card, which left the label's second line indented under the first and looking
   like a stray. The disc/clock row is flex so it was unaffected; only the
   wrapping text needed resetting. */
.eb-body{min-width:0;text-align:left}
/* Two lines of label, because "Early Bird Discount Ends & Price Increases In:"
   is too long for one line anywhere under ~900px and breaking it mid-phrase
   read as a typo. The <br> in the markup puts the break at the ampersand. */
.eb-k{
  margin:0 0 7px;
  font:600 10.5px/1.45 var(--mono);letter-spacing:.12em;text-transform:uppercase;
  color:var(--t2);
}

/* The clock. Tabular figures are the point: without them the digits are
   proportional and the whole row shifts left and right once a second, which
   looks broken and drags the eye off the price. */
.eb-clock{
  display:flex;align-items:flex-start;gap:7px;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.eb-u{
  display:grid;place-items:center;gap:3px;
  min-width:52px;padding:7px 6px 6px;
  background:var(--s3);border:1px solid var(--border-strong);border-radius:9px;
}
.eb-u b{
  font-family:var(--display);font-size:24px;font-weight:700;line-height:1;
  color:var(--t1);letter-spacing:-.02em;
}
.eb-u i{
  font-style:normal;font:500 8px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--t3);
}
.eb-sep{
  font-family:var(--display);font-size:20px;font-weight:700;color:var(--t3);
  line-height:1;padding-top:8px;
}

/* Last 5 minutes. Colour only — no flashing, no shake: this page's whole pitch
   is being the calm way past the funnel, and a shaking clock undoes that. */
.eb.is-soon{border-color:rgba(232,115,95,.5);background:var(--danger-soft)}
.eb.is-soon .eb-u b{color:var(--danger)}
.eb.is-soon .eb-k{color:var(--danger)}

/* Expired: the script swaps the clock for one line of text. The disc stays,
   because 47% off is still the true discount on the page either way. */
.eb-over{
  margin:0;font:600 12px/1.5 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent);
}

@media(max-width:560px){
  .eb{flex-direction:column;text-align:center;gap:13px;padding:15px 13px}
  .eb-body{text-align:center}
  .eb-disc{width:74px;height:74px}
  .eb-disc b{font-size:21px}
  .eb-k{letter-spacing:.09em;font-size:10px}
  .eb-clock{justify-content:center}
  .eb-u{min-width:46px}
  .eb-u b{font-size:21px}
}
@media(max-width:360px){
  .eb-u{min-width:40px;padding:6px 4px 5px}
  .eb-u b{font-size:19px}
  .eb-clock{gap:5px}
}

/* ===========================================================================
   EARLY-BIRD IN THE HEADER (.eb-head)
   ===========================================================================
   The countdown was moved out of the hero offer card and into .site-head on
   request. This is a DIFFERENT SHAPE from the .eb block above, not a variant
   toggle: the header row is 60px tall, and .eb's 86px disc with its label
   stacked over the clock cannot fit at any type size. So .eb-head is one
   horizontal strip — small disc, label, h:m:s digits — sized to sit inside the
   existing row without growing it.

   The .eb rules above are deliberately kept. They are what /bundle uses and
   what this page would need if the block is ever moved back into the hero.

   Shares the descendant class names (.eb-disc/.eb-k/.eb-clock/.eb-u/.eb-sep)
   because ONE script drives whichever exists — #fastpass-page-behaviour queries
   '.eb, .eb-head' and writes [data-eb] cells. Every rule here is therefore
   scoped under .eb-head so it overrides the hero sizes without touching them.

   Order in the row: brand · countdown · status. The countdown takes the free
   space, and .head-status is the first thing dropped as the row narrows — the
   $317 it repeats is printed in full in the hero a few hundred pixels below,
   while the clock is the thing that was asked to be up here.

   FLAT: no pill, no border, no fill. The strip sits directly on the nav, so the
   only boxes left are the digit cells — those keep a hairline because tabular
   digits changing once a second need an edge to sit against, and without one the
   row reads as text twitching rather than a clock running. Removing those too
   is a one-line change (.eb-head .eb-u{background:none;border:0}) if the flat
   look should go all the way. */
.eb-head{
  margin-left:auto;display:inline-flex;align-items:center;gap:10px;
  padding:0;background:none;border:0;border-radius:0;
  white-space:nowrap;
}

/* 34px, down from 86. Still a filled disc with the same radial fill so it reads
   as the same object as the hero version did, but the ring stack is dropped to
   a single hairline — four stacked shadows at this size render as mud. */
.eb-head .eb-disc{
  flex:none;width:34px;height:34px;border-radius:50%;
  display:grid;place-content:center;gap:0;text-align:center;
  background:radial-gradient(circle at 34% 28%,var(--accent-2),var(--accent) 62%);
  color:var(--ink-on-accent);
  box-shadow:0 1px 6px rgba(0,0,0,.4),0 0 0 1px var(--accent-border);
}
.eb-head .eb-disc b{font:700 11.5px/1 var(--display);letter-spacing:-.02em}
/* "Off" at 5.5px would be unreadable, so the disc carries the figure alone and
   the word is folded into the label instead. Kept in the markup for the case
   where this block is moved back to the hero. */
.eb-head .eb-disc i{display:none}

.eb-head .eb-k{
  margin:0;font:500 10px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--t2);
}

.eb-head .eb-clock{
  display:inline-flex;align-items:center;gap:4px;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
/* Digits only in the header: the MIN/SEC captions under each cell are what make
   the hero version two lines tall, and the colon plus a label already say what
   the numbers are. */
.eb-head .eb-u{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;padding:3px 5px;gap:0;
  background:var(--s3);border:1px solid var(--border-strong);border-radius:6px;
}
.eb-head .eb-u b{font:700 13px/1 var(--display);color:var(--t1);letter-spacing:-.01em}
.eb-head .eb-u i{display:none}
.eb-head .eb-sep{font:700 12px/1 var(--display);color:var(--t3);padding:0}

/* Last 5 minutes — colour only, no flash or shake, same restraint as the hero
   version had. With the strip flat there is no pill left to tint, so the signal
   moves onto the digit cells themselves. */
.eb-head.is-soon .eb-u{border-color:rgba(232,115,95,.5);background:var(--danger-soft)}
.eb-head.is-soon .eb-u b{color:var(--danger)}
.eb-head.is-soon .eb-k{color:var(--danger)}
.eb-head.is-soon .eb-sep{color:var(--danger)}

/* Expired: the script swaps the clock for one line. In the header that line has
   to stay short or it wraps the row, so the copy is the terse variant and the
   full sentence lives in the hero's own expiry text. */
.eb-head .eb-over{
  margin:0;font:600 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);
}

/* ---- narrowing order ------------------------------------------------------
   The full label ("Early Bird Discount Ends & Price Increases In:") plus three
   digit cells is a wide strip, so it sheds parts earlier than the 36-minute
   version did. What must survive to 320px is the digits — everything else is
   context that the hero repeats.

   1180px: the status pill goes. It duplicates the hero price; the clock does not.
    980px: the label wraps to two short lines instead of one long one. The row can
           afford ~34px of label; it cannot afford 300px of it on one line.
    820px: the label goes entirely, leaving disc + digits, still a countdown.
    430px: the disc goes. Digits only from here down. */
@media(max-width:1180px){
  .head-row .head-status{display:none}
  .eb-head{margin-left:auto}
}
@media(max-width:980px){
  /* The label is allowed to break, but only ONTO TWO LINES — at 15ch it wrapped
     to four and pushed the 60px row to 68px, which is the one thing this strip
     must not do. A shorter label at a wider measure fits in two lines whose
     combined height is under the row's content box, so the header height is
     unchanged. The clock itself keeps nowrap. */
  .eb-head{white-space:normal;gap:9px}
  .eb-head .eb-k{
    white-space:normal;max-width:26ch;line-height:1.2;letter-spacing:.04em;
    font-size:9px;
  }
  .eb-head .eb-clock{white-space:nowrap}
}
@media(max-width:820px){
  .eb-head .eb-k{display:none}
  .eb-head{gap:8px}
}
@media(max-width:430px){
  .eb-head .eb-disc{display:none}
  .eb-head{gap:6px}
  .eb-head .eb-u{min-width:24px;padding:3px 4px}
  .eb-head .eb-u b{font-size:12.5px}
}
/* 360px and below: three cells plus two colons is the widest the clock gets, and
   the brand lockup is still in the row. Tighten rather than drop a unit — an
   hours cell that vanishes mid-countdown would look like a bug. */
@media(max-width:360px){
  .eb-head .eb-u{min-width:21px;padding:2px 3px}
  .eb-head .eb-u b{font-size:12px}
  .eb-head .eb-sep{font-size:11px}
  .eb-head{gap:5px}
}