/* ==========================================================================
   LYRIXSA AI BUNDLE — $317
   STANDALONE offer page. Not an OTO, not a funnel step: a visitor can land
   here cold and the page has to explain the whole offer on its own. It must
   never assume a prior purchase or a prior page.

   LAYOUT follows the reference the owner supplied
   (https://contentclawai.com/xbundle/): a centred hero column running
   headline -> subhead -> saving -> WEBINAR REPLAY VIDEO -> price -> CTA, then
   the add-it-up stack, stacked component cards that each close on a value
   line, the workflow, the two-ways comparison, the ledger, a risk-reversal
   section, the deal block with a trust strip, and the FAQ.

   The video slot is section 1a below. It ships EMPTY and reserves its 16:9
   box; adding the embed is one class (.has-video) and nothing else moves.
   Read that block's comment before touching it — the ::before bloom will
   swallow clicks on a real player if .has-video is not applied.

   Section comments are numbered to match index.html's sections. The BLOCKS
   are not in that order (3 and 4 were swapped when the page was rebuilt, and
   the old hero-card rules were removed from between them); that is safe
   because no two blocks style the same selector, so the cascade does not
   depend on their order. Keep it that way — if you add a rule that overrides
   an earlier block, put it in the block that owns the selector rather than
   relying on position.

   Tokens are lifted verbatim from public/commercials/index.html and
   public/fastpass/assets/css/fastpass.css so all three read as one brand.

   VERIFIED FIGURES ONLY (see index.html head comment for provenance).
   PATHS: root-absolute. /prelaunch and /thank-you both shipped broken from
   relative paths (commits 9e66cc7, a8aade0) — do not use ./assets here.
   ========================================================================== */

:root{
  /* Surfaces — the sales page's ladder */
  --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:#F7C86B;
  --accent-soft:rgba(242,169,60,.12);
  --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);

  /* Certificate palette, for the licence card */
  --cert-gold:#C9A24B;
  /* --cert-rule was here: the hairline for the certificate proof's frame in
     section 1c. Both went with the hero proofs on 2026-09-26. If that block
     comes back, the value is #2A2A2E, from /partners (jv.css :root
     --cert-rule) — cooler and darker than --border, which is what stops the
     certificate's own paper-white from making the frame look like a rendering
     mistake. Do not collapse it into --border. */

  /* 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;

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

  /* Sticky bar height, for scroll-margin */
  --bar:0px;
}

*,*::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}
@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
   ========================================================================== */
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(29px,4.9vw,54px);line-height:1.08}
h2{font-size:clamp(25px,3.5vw,40px)}
h3{font-size:clamp(17px,2vw,22px);letter-spacing:-.01em}
h4{font-size:15.5px;letter-spacing:-.005em}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}
em{font-style:normal;color:var(--accent)}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  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;flex:none}

.lede{font-size:clamp(15.5px,1.45vw,18.5px);color:var(--t2);max-width:62ch;margin:0 0 26px;line-height:1.68}

.sec{padding:82px 0;border-top:1px solid var(--border);position:relative}
.sec-alt{background:var(--s1)}
.sec-head{margin-bottom:48px;max-width:68ch}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .eyebrow{justify-content:center}
.sec-head.center .lede{margin-left:auto;margin-right:auto}
@media(max-width:860px){.sec{padding:64px 0}.sec-head{margin-bottom:36px}}
@media(max-width:560px){.sec{padding:54px 0}.sec-head{margin-bottom:30px}}

/* ==========================================================================
   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:46px;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:none}
.btn-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  color:var(--ink-on-accent);
  box-shadow:0 4px 18px rgba(242,169,60,.24);
}
.btn-primary:hover{box-shadow:0 8px 30px rgba(242,169,60,.34)}
.btn-ghost{background:var(--s2);color:var(--t1);border-color:var(--border-strong)}
.btn-ghost:hover{border-color:var(--t3);background:var(--s3)}
.btn-block{width:100%}
.btn-lg{padding:16px 28px;font-size:15.5px;border-radius:12px;min-height:52px}
.btn-xl{padding:19px 30px;font-size:clamp(14px,2.1vw,17px);border-radius:13px;min-height:58px;font-weight:700;letter-spacing:.015em}
/* Long CTA labels must wrap rather than overflow at 320px. */
.btn-xl,.btn-lg{white-space:normal}

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-head{border-bottom:1px solid var(--border);background:rgba(16,17,20,.9);backdrop-filter:blur(10px)}

/* --- .eb-nav REMOVED ------------------------------------------------------
   An early-bird countdown strip used to sit above .head-row on /bundle: a 66%
   pill, "Early Bird Discount Ends & Price Increases In:", and a clock sharing
   one deadline with the hero's .eb block. Added 2026-09-27 on the owner's
   instruction, removed 2026-10-01 on the owner's instruction. See the matching
   note where section 1e used to be, and the head comment of
   public/bundle/index.html, which again describes a page with no countdown.

   Nothing replaces it. .site-head now contains only .head-row — which is what
   /bundle-launchpad and /bundle-gumroad always rendered from this shared
   stylesheet, so removing it could not affect them. */
.head-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 24px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand img{width:auto;height:26px}
.brand-tag{
  font:500 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-border);
  padding:5px 9px;border-radius:20px;white-space:nowrap;
}
.head-note{
  margin:0;font:500 12px/1.4 var(--sans);color:var(--t2);
  display:flex;align-items:center;gap:8px;
}
.head-note b{color:var(--t1);font-weight:600}
@media(max-width:640px){
  .head-row{padding:13px 18px;gap:10px}
  .head-note{font-size:11px}
}
@media(max-width:440px){
  .head-note{display:none}
}

/* ==========================================================================
   1 · HERO
   ========================================================================== */
.hero{
  padding:52px 0 72px;position:relative;overflow:hidden;
  /* Centred bloom, because the hero column is centred — the old off-centre
     pair of gradients was aimed at a two-column hero that no longer exists
     and left the right side of the video glowing and the left side flat. */
  background:
    radial-gradient(1000px 520px at 50% -8%,rgba(242,169,60,.11),transparent 64%),
    radial-gradient(760px 400px at 50% 22%,rgba(242,169,60,.045),transparent 62%);
}
@media(max-width:640px){.hero{padding:40px 0 56px}}
.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:.20;
  mask-image:radial-gradient(720px 380px at 50% 0,#000,transparent 72%);
  -webkit-mask-image:radial-gradient(720px 380px at 50% 0,#000,transparent 72%);
}
.hero>*{position:relative;z-index:1}

.hero-kicker{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--accent);
  font:600 11.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  padding:9px 17px;border-radius:24px;margin-bottom:24px;
}
.hero-kicker i{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 4px rgba(242,169,60,.16)}

/* The hero is ONE CENTRED COLUMN, following the reference layout the owner
   supplied: headline -> subhead -> saving line -> "watch the replay" ->
   VIDEO -> price -> buy button -> workflow rail. The video is the hero's
   centre of gravity, so nothing sits beside it competing for the same
   glance. The old two-column hero (copy left, sticky offer card right) is
   gone; the offer card's job is done by .hero-buy under the video and by the
   full deal block in section 8. */
.hero-mid{max-width:880px;margin:0 auto;text-align:center}
.hero-mid .hero-kicker{margin-bottom:22px}

/* The pre-head sits ABOVE the h1 and is deliberately NOT a heading, so the
   outline keeps exactly one h1. It is the offer line — "From Idea to
   Royalties … — $317" — and is sized DOWN from the h1 on the owner's
   instruction ("a bit smaller to the headline"): it reads as part of the
   headline block and announces the offer, but never out-shouts the h1 it
   introduces. Was itself the headline text until 2026-09-26; see the comment
   on this block in index.html for why the two swapped places. */
.hero-pre{
  margin:0 auto 14px;max-width:44ch;
  font-size:clamp(15px,1.7vw,20px);line-height:1.38;color:var(--t2);
  font-family:var(--display);font-weight:600;letter-spacing:-.008em;
}
.hero-pre b{color:var(--accent);font-weight:700}

/* The h1 is now a full sentence rather than the old five-word line, so it
   needs a wider measure than the 24ch it used to have and a slightly gentler
   top end than the global h1 clamp — at 54px a sentence this long eats the
   fold on a laptop before the video is anywhere in sight. 26ch/1.12 keeps it
   to a tight stack of lines that still scans as one headline. */
.hero h1{
  margin:0 auto 14px;max-width:26ch;
  font-size:clamp(27px,4vw,45px);line-height:1.12;
}
.hero h1 .hl{
  color:var(--accent);
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
/* The $11B figure never appears unattributed — see the comment on the
   headline block in index.html. Small and quiet, but directly under the
   headline that now carries the number, which is why this is its own
   paragraph and not a span inside the pre-head as it was before. */
.hero-src{
  margin:0 auto 20px;max-width:70ch;
  font:400 11.5px/1.5 var(--mono);letter-spacing:.02em;color:var(--t3);
}
@media(max-width:560px){
  .hero-pre{max-width:32ch;margin-bottom:12px}
  .hero h1{max-width:22ch}
  .hero-src{font-size:10.5px}
}
/* 32px, not the 18px this carried before: .hero-save used to sit between the
   subhead and .hero-watch and supplied that gap. With it gone the subhead has to
   hold the space itself, or the handover line rides up against the paragraph. */
.hero-sub{color:var(--t2);font-size:clamp(15.5px,1.5vw,18.5px);line-height:1.68;max-width:60ch;margin:0 auto 32px}
.hero-sub b{color:var(--t1);font-weight:600}

/* .hero-save IS GONE. It was the saving as a sentence — "Bought separately
   these parts come to $942. Together they are $317 — you keep $625, 66% off" —
   sitting where the reference puts its "Save 65%" line, between the subhead and
   the video. Removed with the subhead's closing clause on 2026-09-26 at the
   owner's request; the class had no other user on any page.

   What it stood for still holds if anything like it comes back: no deadline, and
   the figures must match section 2's ledger and the checkout card. The line said
   what the price IS, never how long it lasts, because the JV rules forbid
   invented scarcity. Section 1d's comment refers back here for that distinction
   — the vendor's real coupon ships, invented urgency does not. */

/* 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);
}

/* ==========================================================================
   1a · WEBINAR REPLAY VIDEO SLOT
   ==========================================================================
   The frame ships EMPTY and reserves its box, so dropping the embed in later
   shifts nothing. Two states:

     .vidframe            — placeholder: gradient panel, accent play dot, label
     .vidframe.has-video  — real embed: black letterbox, placeholder hidden

   The ::before bloom is position:absolute; inset:0, and an absolutely
   positioned pseudo-element paints ABOVE in-flow content — so with a real
   embed inside it would cover the player and swallow every click, play
   included. .has-video therefore removes it. Same trap, same fix, as
   /commercials #lyrixa-vsl-video.

   aspect-ratio (not padding-top) holds the 16:9 box, and the inner element is
   absolutely positioned so any embed shape — <iframe>, <video>,
   <wistia-player>, a vendor <script> that injects its own div — fills the
   frame without needing to know about it. */
.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;
}
/* whatever the vendor drops in fills the frame */
.vidframe-in > iframe,
.vidframe-in > video,
.vidframe-in > wistia-player,
.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: add has-video alongside the embed ---- */
.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;
}

/* ==========================================================================
   1b · PRICE + CTA, directly beneath the video
   ==========================================================================
   The reference stacks price then button immediately under the player, and
   that order is the point: the visitor finishes the replay and the next thing
   in the scroll is what it costs and how to get it. */
.hero-buy{
  margin:34px auto 0;max-width:560px;
  background:linear-gradient(180deg,var(--s2),var(--s1));
  border:1px solid var(--accent-border);border-radius:var(--r-xl);
  padding:28px 26px 24px;
  box-shadow:0 26px 74px rgba(0,0,0,.5),0 0 0 1px rgba(242,169,60,.08);
}
@media(max-width:560px){.hero-buy{padding:24px 18px 20px;border-radius:var(--r-lg)}}

.hb-price{display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.hb-price b{
  font-family:var(--display);font-size:clamp(52px,9vw,78px);font-weight:700;line-height:.9;
  letter-spacing:-.035em;color:var(--accent);font-variant-numeric:tabular-nums;
}
.hb-price s{
  font-family:var(--display);font-size:clamp(20px,3vw,26px);color:var(--t3);
  text-decoration-thickness:2px;
}
.hb-sub{
  margin:0;font:500 11px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--t2);
}
.hb-sub b{color:var(--success);font-weight:700}
.hb-foot{margin:0;font-size:12px;color:var(--t3);line-height:1.6}

/* ==========================================================================
   1d · COUPON CALLOUT — "Use Coupon Code lyrix For $50 OFF TODAY!"
   ==========================================================================
   A VENDOR-ISSUED discount code, added on the owner's instruction 2026-09-24,
   and it is not the thing the rest of this page refuses to do. Read section 1a
   and the .hero-save note above: this page deliberately dropped the countdown
   iframe, "discount expires in" and "Limited Copies Left" because those were
   invented scarcity. A coupon that actually exists at the vendor's checkout is
   a real term of the offer, so it ships. The distinction is provenance, not
   tone — do not treat this block as permission to reintroduce a timer, a
   copies-remaining counter, or any deadline the vendor has not actually set.

   ONE CAVEAT that is the owner's call and is not settled: the wording ends in
   "TODAY!", which does imply the code lapses tonight. It ships verbatim
   because the owner supplied it verbatim. If the code is in fact open-ended,
   "TODAY" is the single word to drop, and dropping it needs no other change.

   The block sits between the price and the buy button in all three checkout
   points (hero .hero-buy, .deal, .faq-cta) — after the visitor knows the
   price, before they leave for JVZoo, since the code has to be entered THERE.
   One rule set serves all three, so the callout cannot drift between them;
   the only per-context difference is the width cap, which each parent's own
   max-width already supplies.

   PRICE FIGURES ARE DELIBERATELY ABSENT. The page's $317 / $942 / $625 / 66%
   ledger is stated in eight places and cross-checked in the head comment; it
   describes the list price, which the coupon does not change. Writing "$267"
   anywhere would fork that ledger and contradict the begin_checkout value of
   317 at the foot of index.html. The coupon states its own discount and
   nothing else.

   VISIBILITY WAS THE FIRST VERSION'S FAILURE, and the fix is worth recording
   so it is not undone by tidying. v1 used a 1px dashed hairline, the
   --accent-softer fill (6% alpha) and --t2 body text at 14px — defensible in
   isolation, invisible in place: it sat between a 78px price and JVZoo's
   saturated yellow BUY NOW image, and read as fine print between two loud
   things. The owner could not see it. What this version changes, in order of
   how much each contributed:

     1. CONTRAST OF THE TEXT ITSELF. --t2 grey became --t1, and the size went
        to ~17px. A discount the visitor must act on cannot be dimmer than the
        guarantee note under it.
     2. THE CODE IS NOW A FILLED CHIP, accent background with --ink-on-accent
        on it, instead of accent text on a 14%-alpha wash. It is the one thing
        on the page the visitor has to carry to another site, so it is the
        highest-contrast element in the block.
     3. A SOLID 2px ACCENT-LEANING BORDER plus an outer glow, so the panel
        reads as its own object against .hero-buy's own gradient rather than
        as a faint area inside it.
     4. SEPARATION. Bigger top margin and a dedicated bottom margin, so it is
        not visually swallowed by the price above or the button below.

   Deliberately NOT used to solve this: any wording change, and any size that
   competes with the $317. The price stays the largest thing in the card.
   ========================================================================== */
.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;
}

/* The tear-line of a physical coupon, drawn rather than imported: one dashed
   rule inset from the solid border, so it reads as a perforation instead of a
   second frame. It is the cheapest cue that says "coupon" without spending a
   word of extra copy, and it is what makes the panel legible as a voucher at a
   glance rather than as a generic notice box.

   pointer-events:none matters — this is an absolutely positioned pseudo-element
   and .coupon contains a real <button>. Without it the perforation would paint
   over the top of the code chip and eat taps on it near the upper edge. Same
   trap as .vidframe::before in section 1a, same fix. */
.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 column in
   .hero-buy broke it after "OFF" and left "TODAY!" alone on line two, which
   read as a stray word rather than part of the offer. The phrase is short
   enough to fit one line at 320px, so it simply moves down whole instead. */
.coupon-line b{
  color:var(--accent);font-weight:700;white-space:nowrap;
  font-family:var(--display);letter-spacing:-.01em;
  font-size:1.08em;
}

/* The code is a <button> so it can be tapped to copy, and it is now FILLED —
   accent ground, dark ink — because it is the one string the visitor has to
   carry to JVZoo's checkout and it was the least legible thing in the block
   when it was accent-on-transparent. appearance:none and the explicit
   font/colour are required: a bare <button> would otherwise inherit the UA's
   grey box and centre-aligned system font.

   text-transform is NOT set. The code is lowercase "lyrix" as the vendor
   issued it; JVZoo's coupon field may or may not fold case, so the page shows
   exactly what was given and copies exactly that (see data-coupon). The
   sticky bar's short form is the one place it appears uppercased, and that is
   .bar-txt's blanket text-transform, not a decision about the code. */
.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);
}

/* The note doubles as the copy confirmation: the script swaps its text and
   restores it from data-idle, so this line must keep a stable height whichever
   string is in it. min-height holds a line at the mobile measure so the buy
   button never jumps when the visitor taps the code. --t2 not --t3: it is an
   instruction the visitor needs at checkout, not a legal aside. */
.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}
}

/* --- SECTION 1e · EARLY-BIRD ROUNDEL + COUNTDOWN — REMOVED -----------------
   This section styled a "66% Off" roundel with a 2-hour countdown beside it,
   sitting in the hero between the price and the coupon (.eb, .eb-disc, .eb-body,
   .eb-k, .eb-clock, .eb-u, .eb-sep, .eb-over, .is-soon), plus the .eb-nav strip
   whose rules were in the HEADER section above.

   Added 2026-09-27 on the owner's explicit written instruction, which overrode
   the rule recorded in index.html's head comment: this page deliberately omitted
   the reference page's countdown because a timer restarting every visit while
   the price never moves is the false scarcity the JV rules forbid.

   Removed 2026-10-01 on the owner's instruction. The rule the override
   suspended is simply back in force, so the head comment of index.html now
   describes the page accurately again — it was never edited to pretend
   otherwise, which is why nothing there had to be walked back.

   NOTHING ELSE DEPENDED ON IT. The 66% figure the roundel displayed is derived
   (625/942 = 66.35%) and is still printed by the hero sub, the price ledger and
   the .deal block. The timer never wrote to the $317/$942/$625/66% ledger or the
   begin_checkout value — it was presentation only — so no arithmetic moves with
   it. The section number is kept as a placeholder so the 1a..1f ordering of this
   file's comments does not silently renumber. */

/* SECTION 1c IS DELETED. It held the proof pair that sat beside the checkout
   — the Publisher payout screen (.reg-shot) and the licence certificate
   (.reg-cert), ported from /partners section 01 — plus .hero-deal, the
   two-column breakout that laid them out. The owner asked for both proofs
   removed completely on 2026-09-26, so the markup went from index.html and
   every rule that served only it went from here.

   .hero-buy is once again the hero's own centred 560px card and needs nothing
   extra; its section 1b rules already do the whole job.

   If the pair is ever wanted back, take it from /partners/index.html #register
   and /partners/assets/css/jv.css (.reg-split / .reg-shot / .reg-cert), which
   is where this copy came from and is still live — not from this file's
   history. And reinstate the earnings disclaimer beside the payout screenshot
   along with it. */

/* the rail closes the hero — what the one payment switches on, in order */
.hero-mid .rail{justify-content:center;margin-top:34px}
@media(max-width:560px){.hero-mid .rail{margin-top:26px}}

/* ==========================================================================
   2 · WHAT ONE PAYMENT COVERS — the add-it-up stack
   ==========================================================================
   The tally is the page's main argument, so the numbers are the loudest thing
   in the block: right-aligned in a mono column so they read as a column of
   figures a buyer can total themselves, rather than as prose. */
.stack{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:34px;align-items:start}
@media(max-width:900px){.stack{grid-template-columns:1fr;gap:26px}}

.stack-note{
  background:var(--s2);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--r-lg);padding:26px 26px 24px;
}
@media(max-width:480px){.stack-note{padding:21px 18px}}
.stack-note h3{margin:0 0 11px}
.stack-note p{font-size:13.5px;color:var(--t2);line-height:1.68;margin:0 0 14px}
.stack-note p b{color:var(--t1);font-weight:600}
.stack-note .btn{margin-top:6px}

.tally{
  background:var(--s2);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:8px 10px;
}
.ty-row,.ty-tot,.ty-pay{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:9px 8px;min-width:0;
}
.ty-row+.ty-row{border-top:1px solid rgba(255,255,255,.045)}
.ty-row span{font-size:13.5px;color:var(--t2);line-height:1.5;min-width:0}
.ty-row b{
  font-family:var(--display);font-size:16px;font-weight:600;color:var(--t1);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.ty-tot{margin-top:5px;border-top:1px solid var(--border-strong)}
.ty-tot span{
  font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--t2);
}
.ty-tot b{
  font-family:var(--display);font-size:clamp(21px,2.9vw,26px);font-weight:700;color:var(--t3);
  text-decoration:line-through;text-decoration-thickness:2px;white-space:nowrap;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.ty-pay{
  margin-top:4px;background:var(--accent-soft);border:1px solid var(--accent-border);
  border-radius:var(--r);align-items:center;
}
.ty-pay span{
  font:500 10.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
}
.ty-pay b{
  font-family:var(--display);font-size:clamp(30px,4.6vw,40px);font-weight:700;color:var(--accent);
  letter-spacing:-.03em;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;
}
@media(max-width:420px){
  .ty-row span{font-size:12.5px}
  .ty-row b{font-size:15px}
}

/* Workflow rail — what the Bundle turns on, in order */
.rail{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.rail li{
  display:flex;align-items:center;gap:9px;min-width:0;
  background:var(--s2);border:1px solid var(--border);border-radius:22px;
  padding:8px 15px 8px 12px;font-size:12.5px;color:var(--t2);
}
.rail li b{font-family:var(--display);font-size:12.5px;font-weight:600;color:var(--t1);letter-spacing:.01em}
.rail li i{width:5px;height:5px;border-radius:50%;background:var(--t3);flex:none}
.rail li.on i{background:var(--accent);box-shadow:0 0 0 3px rgba(242,169,60,.18)}
.rail li.on{border-color:rgba(242,169,60,.34)}
.rail li.on b{color:var(--accent)}

/* Offer kicker — the hero's sticky offer card is gone (the video owns the
   hero now), but section 8's .deal block still opens with this chip. */
.offer-k{
  display:inline-flex;font:500 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-border);
  padding:6px 11px;border-radius:20px;margin-bottom:16px;
}
/* ==========================================================================
   5 · TWO WAYS TO BUY IT
   ========================================================================== */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch}
@media(max-width:900px){.vs{grid-template-columns:1fr;gap:20px}}

.vs-col{
  border:1px solid var(--border);border-radius:var(--r-xl);padding:30px 28px;
  background:var(--s2);display:flex;flex-direction:column;
}
@media(max-width:480px){.vs-col{padding:24px 19px;border-radius:var(--r-lg)}}
.vs-col.is-pieces{background:linear-gradient(180deg,var(--s2),#191A1F)}
.vs-col.is-full{
  background:linear-gradient(180deg,rgba(242,169,60,.075),rgba(242,169,60,.015));
  border-color:var(--accent-border);
  box-shadow:0 20px 60px rgba(0,0,0,.38);
}

.vs-k{
  display:inline-flex;align-self:flex-start;align-items:center;gap:7px;
  font:500 9.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  padding:6px 11px;border-radius:20px;margin-bottom:15px;
}
.is-pieces .vs-k{color:var(--t2);background:var(--s3);border:1px solid var(--border-strong)}
.is-full .vs-k{color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-border)}
.vs-col h3{margin:0 0 8px}
.vs-col>p{font-size:13.5px;color:var(--t2);margin:0 0 24px;line-height:1.62}

/* Stepped path — each decision drops a level and to the right */
.steps{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:9px}
.steps li{
  display:flex;align-items:center;gap:12px;min-width:0;
  background:var(--s3);border:1px solid var(--border);border-radius:var(--r);
  padding:12px 15px;font-size:13.5px;color:var(--t1);
  position:relative;
}
/* the indent is the argument: each decision sits further from where you started */
.steps li:nth-child(2){margin-left:14px}
.steps li:nth-child(3){margin-left:28px}
.steps li:nth-child(4){margin-left:42px}
.steps li:nth-child(5){margin-left:56px}
.steps li:nth-child(6){margin-left:70px}
@media(max-width:560px){
  .steps li:nth-child(2){margin-left:8px}
  .steps li:nth-child(3){margin-left:16px}
  .steps li:nth-child(4){margin-left:24px}
  .steps li:nth-child(5){margin-left:32px}
  .steps li:nth-child(6){margin-left:40px}
}
.steps li span{flex:1;min-width:0}
.steps li b{font-weight:600}
.steps li em{
  font:500 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--t3);flex:none;
}
.steps li.wall{border-color:rgba(232,115,95,.32);background:rgba(232,115,95,.055)}
.steps li.wall em{color:var(--danger)}
.steps li .lock{width:14px;height:14px;flex:none;color:var(--t3)}
.steps li.wall .lock{color:var(--danger)}

/* One continuous line — the Bundle side */
.line{list-style:none;margin:0 0 22px;padding:0 0 0 26px;display:grid;gap:9px;position:relative}
.line::before{
  content:'';position:absolute;left:7px;top:12px;bottom:12px;width:2px;
  background:linear-gradient(180deg,var(--accent),rgba(242,169,60,.28));border-radius:2px;
}
.line li{
  display:flex;align-items:center;gap:12px;min-width:0;
  background:rgba(255,255,255,.028);border:1px solid rgba(242,169,60,.24);border-radius:var(--r);
  padding:12px 15px;font-size:13.5px;color:var(--t1);position:relative;
}
.line li::before{
  content:'';position:absolute;left:-24px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 3px rgba(242,169,60,.16);
}
.line li span{flex:1;min-width:0}
.line li b{font-weight:600}
.line li em{font:500 9.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);flex:none}
.line li svg{width:14px;height:14px;flex:none;color:var(--accent)}

.vs-out{
  margin-top:auto;padding-top:20px;border-top:1px solid var(--border);
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.vs-out span{font-size:12.5px;color:var(--t2);line-height:1.5}
/* Inline emphasis inside the sentence — must not pick up the big figure
   styling from the sibling .vs-out b that sits beside it. */
.vs-out span b{font-family:var(--sans);font-size:inherit;color:var(--t1);font-weight:700;white-space:nowrap}
.vs-out b{font-family:var(--display);font-size:clamp(17px,2.2vw,21px);font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.is-pieces .vs-out b{color:var(--t2)}
.is-full .vs-out b{color:var(--accent)}
.is-full .vs-out{border-top-color:rgba(242,169,60,.24)}

.vs-foot{
  margin-top:26px;display:flex;gap:14px;align-items:flex-start;
  background:var(--s2);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--r);padding:18px 20px;
}
.vs-foot svg{width:19px;height:19px;flex:none;color:var(--accent);margin-top:2px}
.vs-foot p{margin:0;font-size:13.5px;color:var(--t2);line-height:1.66}
.vs-foot b{color:var(--t1);font-weight:600}

/* ==========================================================================
   4 · THE COMPLETE WORKFLOW — the visual centrepiece
   ========================================================================== */
.flow{position:relative;display:grid;gap:20px}

.fl{
  display:grid;grid-template-columns:82px minmax(0,1fr) minmax(0,1.22fr);
  gap:26px;align-items:center;
  background:var(--s2);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:22px 26px;position:relative;
  transition:border-color .18s,transform .18s;
}
.fl:hover{border-color:var(--border-strong)}
@media(max-width:960px){
  .fl{grid-template-columns:64px minmax(0,1fr);gap:18px 20px;padding:20px}
  .fl-shot{grid-column:1/-1;margin-top:4px}
}
@media(max-width:480px){
  .fl{grid-template-columns:1fr;gap:14px;padding:19px 17px;border-radius:var(--r-lg)}
}

/* the connector between stages */
.fl::after{
  content:'';position:absolute;left:calc(26px + 41px);bottom:-20px;width:2px;height:20px;
  background:linear-gradient(180deg,var(--accent),rgba(242,169,60,.18));
}
.fl:last-child::after{display:none}
@media(max-width:960px){.fl::after{left:calc(20px + 32px)}}
@media(max-width:480px){.fl::after{left:38px}}

.fl-step{
  width:82px;height:82px;border-radius:20px;flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:linear-gradient(160deg,rgba(242,169,60,.16),rgba(242,169,60,.04));
  border:1px solid var(--accent-border);
}
.fl-step u{
  font:500 9px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);text-decoration:none;opacity:.85;
}
.fl-step b{font-family:var(--display);font-size:26px;font-weight:700;color:var(--accent);line-height:1}
@media(max-width:960px){
  .fl-step{width:64px;height:64px;border-radius:16px}
  .fl-step b{font-size:21px}
}
@media(max-width:480px){.fl-step{width:56px;height:56px}}

.fl-copy h3{margin:0 0 6px;font-size:clamp(17px,2vw,21px)}
.fl-copy h3 span{color:var(--accent);font-size:12px;font-family:var(--mono);letter-spacing:.1em;
  text-transform:uppercase;display:block;margin-bottom:5px;font-weight:500}
.fl-copy p{margin:0;font-size:13.5px;color:var(--t2);line-height:1.66}
.fl-copy .fl-src{
  display:inline-flex;margin-top:11px;font:500 9.5px/1 var(--mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--t3);background:var(--s3);border:1px solid var(--border);
  padding:6px 10px;border-radius:5px;
}
.fl-copy .fl-src.is-core{color:var(--t2)}
.fl-copy .fl-src.is-add{color:var(--accent);background:var(--accent-soft);border-color:rgba(242,169,60,.32)}

.fl-shot{
  border:1px solid var(--border-strong);border-radius:var(--r);overflow:hidden;
  background:var(--bg);box-shadow:0 14px 40px rgba(0,0,0,.42);
  /* A consistent band so six differently-shaped captures read as one system.
     These are thumbnails on the spine — the full-size versions live in
     section 4, so cropping is acceptable here. */
  aspect-ratio:3/2;
}
.fl-shot img{width:100%;height:100%;object-fit:cover;object-position:top center}
.fl-shot.pin-mid img{object-position:center}

.flow-out{
  margin-top:30px;text-align:center;
  background:linear-gradient(180deg,rgba(242,169,60,.08),transparent);
  border:1px solid rgba(242,169,60,.26);border-radius:var(--r-xl);padding:30px 26px;
}
.flow-out strong{
  display:block;font-family:var(--display);font-size:clamp(17px,2.3vw,23px);font-weight:700;
  letter-spacing:-.01em;margin-bottom:9px;
}
.flow-out strong em{color:var(--accent)}
.flow-out p{margin:0 auto;max-width:60ch;font-size:13.5px;color:var(--t2);line-height:1.68}

/* ==========================================================================
   3 · WHAT'S INSIDE — the component cards
   ========================================================================== */
.mods{display:grid;gap:22px}
.mod{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:34px;align-items:center;
  background:var(--s2);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:30px;overflow:hidden;
}
.mod:nth-child(even) .mod-copy{order:2}
.mod:nth-child(even) .mod-shot{order:1}
@media(max-width:900px){
  .mod{grid-template-columns:1fr;gap:22px;padding:24px}
  .mod:nth-child(even) .mod-copy{order:1}
  .mod:nth-child(even) .mod-shot{order:2}
}
@media(max-width:480px){.mod{padding:21px 17px;border-radius:var(--r-lg)}}

.mod-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:13px}
.mod-num{
  font:500 9.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-border);
  padding:6px 10px;border-radius:5px;
}
.mod-val{
  font:500 10px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--t3);margin-left:auto;white-space:nowrap;
}
.mod-val b{font-family:var(--display);font-size:14px;color:var(--t2);font-weight:600;letter-spacing:0}
/* Publisher's $297 is a CONFIRMED standalone price, not a component value, so
   it carries the accent the other three haven't earned. */
.mod-val.is-hi{color:var(--accent)}
.mod-val.is-hi b{color:var(--accent);font-size:15px}
@media(max-width:420px){.mod-val{white-space:normal;text-align:right}}
.mod-copy h3{margin:0 0 8px}
.mod-lead{font-size:14.5px;color:var(--t1);line-height:1.6;margin:0 0 14px}
.mod-copy>p:not(.mod-lead){font-size:13.5px;color:var(--t2);line-height:1.66;margin:0 0 15px}

.chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.chips li{
  font:500 11px/1.35 var(--sans);color:var(--t2);
  background:var(--s3);border:1px solid var(--border);border-radius:6px;padding:6px 10px;
}
.chips li.hi{color:var(--accent);background:var(--accent-soft);border-color:rgba(242,169,60,.30)}

/* The value line that closes each component card — the reference's
   "total value / currently selling for" pair, reduced to the one figure this
   page can actually verify: what the part sells for on its own. The second
   line is the payoff, so it carries the accent rather than the price.

   Publisher's card takes .is-hi: its $297 is the whole "$20 more" argument,
   and it is the one component whose standalone price approaches the price of
   the entire Bundle. */
.mod-price{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:5px;
}
.mod-price b{
  font-family:var(--display);font-size:15px;font-weight:600;color:var(--t2);
  letter-spacing:-.005em;
}
.mod-price span{
  font:500 10px/1.5 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);
}
.mod-price.is-hi{border-top-color:var(--accent-border)}
.mod-price.is-hi b{color:var(--accent);font-size:17px;font-weight:700}
/* the long sentence on Publisher's card would look shouted in all-caps mono */
.mod-price.is-hi span{
  font-family:var(--sans);font-size:12.5px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--t2);line-height:1.6;
}

/* No fixed aspect ratio here. These captures carry readable UI text, so
   cropping them to a uniform box slices words in half — show them whole. */
.mod-shot{
  border:1px solid var(--border-strong);border-radius:var(--r);overflow:hidden;background:var(--bg);
  box-shadow:0 18px 50px rgba(0,0,0,.45);align-self:center;
}
.mod-shot img{width:100%;height:auto}
/* Wide desktop captures shrink to illegible type on a phone. Rather than a
   brittle zoom-crop, cap the height and let the visual read as a product
   artifact — the words next to it carry the meaning. */
@media(max-width:640px){
  /* Scale to full width, then clip the bottom. object-fit:cover would scale
     up to fill the height too and lose the sides, so leave it off. */
  .mod-shot{max-height:240px;overflow:hidden;display:block}
}

/* --- .has-px: a SCREENSHOT card that also carries a price badge -------------
   Component 05 keeps its certificate capture (see .is-box below for why), but
   it still needs the same circular price badge as the four box cards so all
   five prices read as one set going down the section.

   Why this needs a structural change rather than just another absolute child:
   .mod-shot's own `overflow:hidden` is load-bearing — it clips the capture to
   the rounded border, and the <=640px rule reuses it to clip the image height.
   A badge straddling the corner is exactly what that rule exists to cut off, so
   nesting one directly inside gets it sliced in half.

   So the FRAME moves inward to .shot-frame (border, radius, background, shadow
   and the clipping), and the figure becomes a bare positioning context. The
   badge is then a sibling of the frame, outside the clip. Visually identical to
   before — verified against the pre-change render — and the base .mod-shot
   rules are untouched, which matters because /bundle-launchpad and
   /bundle-gumroad link this stylesheet and use the plain class with no wrapper.

   This deliberately mirrors how .is-box uses .box-stage: both wrap the real
   visual in an inner element so the badge can anchor to the ARTWORK's edge
   rather than the figure's full column width. */
.mod-shot.has-px{
  border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;
  position:relative;display:block;
}
.mod-shot.has-px .shot-frame{
  /* the frame .mod-shot used to be, now one level in */
  border:1px solid var(--border-strong);border-radius:var(--r);overflow:hidden;
  background:var(--bg);box-shadow:0 18px 50px rgba(0,0,0,.45);
  display:block;
}
.mod-shot.has-px .shot-frame img{display:block;width:100%;height:auto}
@media(max-width:640px){
  /* The height cap that .mod-shot applies to its captures on a phone has to
     move to the frame too, or the certificate stops being clipped and the card
     grows. max-height on the figure itself would clip the badge instead. */
  .mod-shot.has-px{max-height:none;overflow:visible}
  .mod-shot.has-px .shot-frame{max-height:240px;overflow:hidden}
  /* Push this one badge further out than the box cards' (-10px).
     The certificate art carries its OWN gold seal in the header, whose right
     edge sits ~14.7% of the image width in from the frame's right edge. That is
     66px on a 451px desktop frame — comfortably clear of an 84px badge — but
     only ~35px on the 238px frame a 390px phone renders, so at -10px the badge
     lands on top of the seal and hides "COMMERCIAL LICENSE / UNLOCKED": two
     overlapping gold roundels. -28px leaves ~3px of seal under the badge's ring,
     matching the desktop overlap, and still fits the ~58px of card gutter to the
     right of the frame at the narrowest width. */
  .mod-shot.has-px .px-tag{right:-28px}
}

/* --- .is-box: a component card illustrated by BOX ART, not a screenshot ------
   Components 01–04 show the product box for the part being sold; component 05
   (song creation & commercial licensing) keeps its certificate capture, because
   the certificate IS the thing that card is claiming and no box can show it.
   So this is a variant of .mod-shot rather than a replacement for it — the
   mirrors (/bundle-launchpad, /bundle-gumroad) also still link this stylesheet
   and use plain .mod-shot.

   Everything .mod-shot adds for a screenshot is actively wrong for a box:
   the source renders are transparent cut-outs, so the border + --bg fill + card
   shadow draw a rectangular PANEL behind a product that already has its own
   edges and its own shadow — reading as a second box around the box. This is
   the same correction the bonuses row already made (see .bx-art below); the
   treatment is deliberately shared with it so the two rows of Lyrixsa boxes on
   this page look like the same object photographed the same way. */
.mod-shot.is-box{
  border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;
  position:relative;display:grid;place-items:end center;
  /* The box art is much taller-than-wide next to a 1500x634 screenshot, so at
     the figure's full column width it towers over the copy beside it. Held to
     a readable size and centred in the column instead. */
  padding:8px 0 4px;
}
/* The max-width lives on .box-stage, not on the img, so the price badge can be
   positioned against the BOX's edge instead of the figure's. The figure is as
   wide as its grid column (~450px at 1440), the art is capped at 340 — anchoring
   the badge to the figure would float it out in the empty margin beside the
   box. .box-stage shrinks to exactly the art's width, so `right:-14px` means
   14px past the box, at every viewport, with no magic numbers per breakpoint. */
.mod-shot.is-box .box-stage{
  position:relative;
  width:100%;max-width:340px;margin:0 auto;
}
.mod-shot.is-box img{
  position:relative;z-index:1;
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.6));
}

/* --- the price badge -------------------------------------------------------
   WHAT THE NUMBER IS, AND WHY IT IS LABELLED
   This is the part's STANDALONE price — the same figure the card's .mod-price
   line, section 2's tally and section 6's ledger all carry ($47 / $67 / $197 /
   $297). It is NOT a discounted per-part price, because no such price exists:
   the funnel discounts the BUNDLE ($942 of parts for $317, save $625 / 66%),
   not the individual components. So the badge reads "Value $47", never "was
   $47 now $X" and never a struck-through figure — a strike would imply this
   part is individually marked down, which nothing on this page establishes.
   The discount argument is carried by the contrast the badges create: five
   visible prices adding to $942 against the one $317 the page asks for.

   aria-hidden because the same price is already in this card's .mod-price as a
   full sentence ("Sold on its own for $47"). A screen reader hitting both would
   hear the figure twice per card, once with no sentence around it.

   Scoped to .mod-shot rather than .mod-shot.is-box so the box cards (01-04, via
   .box-stage) and the screenshot card (05, via .has-px/.shot-frame) share ONE
   definition — five badges that must look identical are worth exactly one rule,
   and a second copy is a guarantee they drift apart on the next edit. */
.mod-shot .px-tag{
  position:absolute;z-index:3;
  /* Straddles the top-right corner of the artwork so it reads as applied TO the
     product. The box art's own drop-shadow falls down-left, so the top-right is
     the one corner where a badge doesn't sit in shadow and go muddy. */
  top:-10px;right:-14px;
  width:84px;height:84px;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);
  /* Double ring: the dark --bg ring cuts the badge out of whatever it overlaps
     (box face, backdrop, or the edge between them) so the circle stays legible
     wherever the art puts it. The outer accent ring then re-seats it on the
     page's palette rather than leaving a black halo. */
  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);
}
.mod-shot .px-tag i{
  font-style:normal;
  font:600 8px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  opacity:.72;
}
.mod-shot .px-tag b{
  font-family:var(--display);font-size:23px;font-weight:700;letter-spacing:-.02em;
}
/* Publisher's $297 is four glyphs where the others are three; at 23px it would
   touch the ring. Tightened rather than shrinking every badge to fit the widest. */
.mod-shot .px-tag.is-wide b{font-size:20.5px;letter-spacing:-.03em}
/* the pedestal — same pool of accent light the bonus boxes stand on, scaled up
   for the larger art. ::before is the light, ::after the tighter contact shadow
   that makes the box meet a surface rather than hover over one. */
.mod-shot.is-box::before,
.mod-shot.is-box::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  border-radius:50%;pointer-events:none;
}
.mod-shot.is-box::before{
  bottom:0;width:min(360px,86%);height:34px;
  background:radial-gradient(ellipse at 50% 50%,rgba(242,169,60,.26),transparent 70%);
  filter:blur(4px);
}
.mod-shot.is-box::after{
  bottom:9px;width:min(240px,58%);height:10px;
  background:rgba(0,0,0,.55);filter:blur(7px);
}
@media(max-width:640px){
  /* .mod-shot's phone rule clips its screenshots to 240px. A box is not a wide
     capture with expendable bottom rows — clipping it cuts the product in half,
     so the cap is lifted and the art is simply scaled down. */
  .mod-shot.is-box{max-height:none;overflow:visible}
  .mod-shot.is-box .box-stage{max-width:224px}
  .mod-shot.is-box::before{height:24px}
  .mod-shot.is-box::after{bottom:6px;height:8px}
  /* The art drops 340->224 (~66%); the badge only goes 84->66 (~79%). Scaling it
     proportionally would make the price smaller on the screen that has least
     room for it to be missed, and "visible" is the whole point of the element. */
  .mod-shot .px-tag{width:66px;height:66px;top:-8px;right:-10px}
  .mod-shot .px-tag b{font-size:18.5px}
  .mod-shot .px-tag.is-wide b{font-size:16.5px}
  .mod-shot .px-tag i{font-size:7px;letter-spacing:.1em}
}


/* bonuses row */
.bonus{
  margin-top:22px;background:var(--s2);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:30px;
}
@media(max-width:480px){.bonus{padding:22px 17px;border-radius:var(--r-lg)}}
.bonus-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.bonus h3{margin:0}
.bonus>p{font-size:13.5px;color:var(--t2);margin:0 0 24px;max-width:66ch;line-height:1.66}
.bonus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:760px){.bonus-grid{grid-template-columns:1fr;gap:14px}}
.bx{
  background:var(--s3);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:18px;display:flex;flex-direction:column;gap:13px;
}
/* Box art, presented the way /commercials section 26 presents the same three
   assets (#pricing .bx-art there): the box stands on a pool of accent light
   instead of sitting inside a framed tile.

   The old rules here boxed the art in a --bg panel with a border-radius and
   object-fit:contain. That was right for the previous 600x720 art, which had
   its own dark backdrop; these PNG-sourced boxes are transparent cut-outs, so a
   panel behind them reads as a second, rectangular box around the product. The
   frame is gone and the pedestal does the work of seating the object.

   No aspect-ratio: the assets are a known 600x556 and carry the width/height
   attributes to match, so the intrinsic ratio already reserves the right space.
   Forcing 5/4 over a 1.079 image would letterbox it. */
.bx-art{position:relative;display:grid;place-items:end center}
/* the pedestal — a soft pool of accent light under the box */
.bx-art::before{
  content:'';position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:92%;height:26px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(242,169,60,.28),transparent 70%);
  filter:blur(3px);
}
/* and the contact shadow, tighter and darker, so the box meets a surface */
.bx-art::after{
  content:'';position:absolute;left:50%;bottom:9px;transform:translateX(-50%);
  width:62%;height:8px;border-radius:50%;
  background:rgba(0,0,0,.55);filter:blur(6px);
}
.bx-art img{
  position:relative;z-index:1;
  display:block;width:100%;height:auto;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.6));
}
.bx b{font-family:var(--display);font-size:14.5px;font-weight:600;letter-spacing:-.005em}
.bx p{margin:0;font-size:12.5px;color:var(--t2);line-height:1.6}
@media(max-width:760px){
  .bx{flex-direction:row;align-items:center;gap:16px}
  /* Side by side with the copy the art gets small, and at ~104px the pedestal
     is wider than the box looks tall — it stops reading as light and starts
     reading as a smudge. Dropped, and the drop-shadow alone carries the lift. */
  .bx-art{width:104px;flex:none}
  .bx-art::before,.bx-art::after{display:none}
  .bx-txt{min-width:0}
}

/* ==========================================================================
   6 · WHY $317 MAKES SENSE
   ========================================================================== */
.worth{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);gap:40px;align-items:start}
@media(max-width:960px){.worth{grid-template-columns:1fr;gap:32px}}

.worth-copy h2{margin-bottom:16px}
.worth-copy p{font-size:14.5px;color:var(--t2);line-height:1.72;margin:0 0 16px}
.worth-copy p b{color:var(--t1);font-weight:600}
.worth-copy .pull{
  margin:24px 0 0;padding:20px 22px;background:var(--s2);
  border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r);
  font-family:var(--display);font-size:clamp(15px,1.9vw,18.5px);font-weight:600;
  letter-spacing:-.01em;line-height:1.48;color:var(--t1);
}
.worth-copy .pull em{color:var(--accent)}
.worth-copy .pull b{color:var(--t1);font-weight:700}
.worth-copy p em{font-style:italic;color:var(--t1)}

/* Fair-to-the-core-offer note */
.fair{
  margin-top:22px;display:flex;gap:13px;align-items:flex-start;
  background:var(--success-soft);border:1px solid rgba(127,217,168,.26);border-radius:var(--r);
  padding:17px 19px;
}
.fair svg{width:18px;height:18px;flex:none;color:var(--success);margin-top:2px}
.fair p{margin:0;font-size:13px;color:var(--t2);line-height:1.66}
.fair b{color:var(--t1);font-weight:600}

/* Ledger */
.ledger{
  background:linear-gradient(180deg,var(--s2),var(--s1));
  border:1px solid var(--accent-border);border-radius:var(--r-xl);padding:28px;
  box-shadow:0 22px 64px rgba(0,0,0,.44);
}
@media(max-width:480px){.ledger{padding:22px 18px;border-radius:var(--r-lg)}}
.ledger-k{
  display:inline-flex;font:500 9.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-border);
  padding:6px 11px;border-radius:20px;margin-bottom:20px;
}
.lg-rows{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.lg-rows li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  background:var(--s2);padding:13px 16px;
}
.lg-rows li span{font-size:13.5px;color:var(--t2);min-width:0;line-height:1.5}
.lg-rows li span i{display:block;font-style:normal;font-size:11px;color:var(--t3);margin-top:2px}
.lg-rows li b{font-family:var(--display);font-size:15px;font-weight:600;color:var(--t1);white-space:nowrap}

.lg-sum{margin-top:18px;display:grid;gap:11px}
.lg-line{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.lg-line span{font-size:13px;color:var(--t2)}
.lg-line b{font-family:var(--display);font-weight:700;white-space:nowrap}
.lg-line.was b{font-size:22px;color:var(--t3);text-decoration:line-through;text-decoration-thickness:2px}
.lg-line.now{
  padding-top:13px;border-top:1px solid var(--border);align-items:center;
}
.lg-line.now span{font-size:13.5px;color:var(--t1);font-weight:600}
.lg-line.now b{font-size:clamp(36px,5.6vw,46px);color:var(--accent);letter-spacing:-.03em;line-height:1}
.lg-save{
  margin-top:15px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--success-soft);border:1px solid rgba(127,217,168,.3);border-radius:var(--r);
  padding:13px 16px;
}
.lg-save span{font:500 10.5px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;color:var(--success)}
.lg-save b{font-family:var(--display);font-size:21px;font-weight:700;color:var(--success);letter-spacing:-.01em}
.lg-save u{
  text-decoration:none;font:700 11px/1 var(--mono);letter-spacing:.09em;
  color:var(--ink-on-accent);background:var(--success);padding:6px 9px;border-radius:5px;
}
/* Optional paid add-on. Deliberately NOT styled like an included row — it sits
   outside the ledger's sum and must never read as part of the $317. Neutral
   surface, no accent fill, so it cannot be mistaken for a value line. */
.addon{
  margin-top:16px;background:var(--s3);border:1px dashed var(--border-strong);
  border-radius:var(--r);padding:15px 16px;
}
.ad-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.ad-k{
  font:500 9.5px/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--t2);
}
.ad-top b{
  font-family:var(--display);font-size:19px;font-weight:700;color:var(--t1);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.addon p{margin:0;font-size:12.5px;color:var(--t2);line-height:1.66}
.addon p b{color:var(--t1);font-weight:600}

.ledger-foot{margin:18px 0 0;font-size:11.5px;color:var(--t3);line-height:1.62}

/* ==========================================================================
   8 · OFFER / DECISION + TRUST STRIP
   ========================================================================== */
.close{
  padding:88px 0;border-top:1px solid var(--border);position:relative;overflow:hidden;
  background:
    radial-gradient(760px 400px at 50% 0,rgba(242,169,60,.11),transparent 66%),
    var(--s1);
}
@media(max-width:640px){.close{padding:62px 0}}
.close>*{position:relative;z-index:1}

.deal{
  max-width:760px;margin:0 auto;
  background:linear-gradient(180deg,var(--s2),var(--s1));
  border:1px solid var(--accent-border);border-radius:var(--r-xl);
  padding:38px 36px;text-align:center;
  box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 0 1px rgba(242,169,60,.08);
}
@media(max-width:560px){.deal{padding:28px 20px;border-radius:var(--r-lg)}}
.deal h2{margin:0 0 6px;font-size:clamp(23px,3.4vw,34px)}
.deal h2 span{color:var(--accent)}
.deal-tag{font-size:13.5px;color:var(--t2);margin:0 0 26px}

.deal-price{display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.deal-price b{
  font-family:var(--display);font-size:clamp(58px,10vw,86px);font-weight:700;line-height:.9;
  letter-spacing:-.035em;color:var(--accent);
}
.deal-price s{font-family:var(--display);font-size:clamp(20px,3vw,26px);color:var(--t3);text-decoration-thickness:2px}
.deal-sub{
  font:500 11px/1 var(--mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--t2);margin:0 0 28px;
}
.deal-sub b{color:var(--success);font-weight:700}

.deal-inc{
  list-style:none;margin:0 0 30px;padding:26px 0 0;border-top:1px solid var(--border);
  display:grid;grid-template-columns:1fr 1fr;gap:12px 22px;text-align:left;
}
@media(max-width:600px){.deal-inc{grid-template-columns:1fr;gap:11px}}
.deal-inc li{display:flex;gap:11px;font-size:13.5px;color:var(--t2);line-height:1.55;min-width:0}
.deal-inc li b{color:var(--t1);font-weight:600}
.deal-inc li em{color:var(--accent);font-style:normal;font-weight:600}
.deal-inc svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--accent)}

.deal-foot{margin:16px 0 0;font-size:12.5px;color:var(--t3);line-height:1.66}

/* Trust strip — the reference's three-item row above the footer. Pipes are
   borders on the flex items rather than characters, so they vanish correctly
   when the row wraps to one item per line. */
.trust{
  list-style:none;margin:30px auto 0;padding:0;max-width:820px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:0 20px;row-gap:12px;
}
.trust li{
  display:flex;align-items:center;gap:9px;min-width:0;
  font-size:13px;color:var(--t2);
}
.trust li + li{padding-left:20px;border-left:1px solid var(--border-strong)}
.trust svg{width:15px;height:15px;flex:none;color:var(--success)}
@media(max-width:700px){
  .trust{display:grid;justify-items:center;gap:11px}
  .trust li + li{padding-left:0;border-left:0}
}

/* ==========================================================================
   7 · RISK REVERSAL
   ==========================================================================
   The reference gives the guarantee a section of its own rather than a strip
   under the CTA, and on a $317 standalone offer that is the right weight: it
   is the answer to "what if I'm wrong about this", which is the last real
   objection left once the price has been explained. */
.risk{
  max-width:940px;margin:0 auto;
  display:grid;grid-template-columns:150px minmax(0,1fr);gap:32px;align-items:start;
  background:var(--s2);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:32px 34px;
}
@media(max-width:760px){
  .risk{grid-template-columns:1fr;gap:20px;justify-items:center;text-align:center;padding:26px 20px}
}
@media(max-width:480px){.risk{border-radius:var(--r-lg)}}
.risk > img{width:150px;height:auto;flex:none}
@media(max-width:760px){.risk > img{width:112px}}
.risk-copy h3{margin:0 0 12px}
.risk-copy p{font-size:13.5px;color:var(--t2);line-height:1.7;margin:0 0 14px}
.risk-copy p b{color:var(--t1);font-weight:600}

.risk-list{
  list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--border);
  display:grid;gap:11px;
}
.risk-list li{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--t2);line-height:1.55;text-align:left}
.risk-list svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--success)}
@media(max-width:760px){.risk-list{width:100%}}

/* ==========================================================================
   9 · FAQ
   ========================================================================== */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.qa{
  background:var(--s2);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  transition:border-color .16s;
}
.qa[open]{border-color:var(--accent-border);background:var(--s2)}
.qa summary{
  list-style:none;cursor:pointer;padding:19px 54px 19px 22px;position:relative;
  font-family:var(--display);font-size:clamp(14.5px,1.7vw,17px);font-weight:600;
  letter-spacing:-.005em;line-height:1.42;color:var(--t1);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:'';position:absolute;right:22px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s;
}
.qa[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.qa summary:hover{color:var(--accent)}
.qa-a{padding:0 22px 21px}
.qa-a p{margin:0 0 12px;font-size:13.5px;color:var(--t2);line-height:1.72}
.qa-a p:last-child{margin-bottom:0}
.qa-a b{color:var(--t1);font-weight:600}
@media(max-width:480px){
  .qa summary{padding:17px 46px 17px 17px}
  .qa-a{padding:0 17px 18px}
}

.faq-cta{margin:44px auto 0;max-width:560px;text-align:center}
/* NOTE the descendant selector, and do not "fix" it to `.faq-cta > p` without
   reading this. It is too broad: this block holds the FAQ's closing line plus
   shared components that contain their own <p> — the coupon callout (section
   1d) and the JVZoo buy button — and at 0,1,1 it outranks .coupon-line,
   .coupon-note and .jvz-buy-label (0,1,0), repainting them all at 14px with a
   20px bottom margin. The coupon's override is below; .jvz-buy-label is still
   caught and renders larger here than in .hero-buy and .deal.
   That is left alone deliberately: `>` would fix both at once, but this
   stylesheet is ALSO linked by /bundle-launchpad, whose .faq-cta has the same
   nested .jvz-buy-label — so narrowing this selector silently restyles a page
   the owner asked to leave untouched (2026-09-24), and that page's own <link>
   is unversioned, so it cannot even be cache-busted into a known state. Scope
   new rules to their own component instead, as section 1d's override does. */
.faq-cta p{font-size:14px;color:var(--t2);margin:0 0 20px;line-height:1.66}
.faq-cta p b{color:var(--t1);font-weight:600}

/* Coupon callout override — puts section 1d's own type back after the rule
   above has overreached. Matches .coupon-line/.coupon-note exactly rather than
   inventing a third look, so the callout reads identically at all three
   checkout points; see section 1d. Margins are restated because the rule above
   also sets a 20px bottom that would double the gap before the buy button.

   KEEP THESE IN SYNC WITH SECTION 1d. They restate its values rather than
   adding to them; if you change the type there and not here, this one block
   silently reverts to .faq-cta p's 14px grey and the callout stops matching
   the other two. */
.faq-cta .coupon-line{
  font-size:clamp(15px,1.6vw,17px);line-height:1.45;font-weight:600;
  color:var(--t1);margin:0;
}
.faq-cta .coupon-note{
  font:500 10.5px/1.5 var(--mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--t2);margin:9px 0 0;
}
.faq-cta .coupon-note.is-copied{color:var(--success)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-foot{border-top:1px solid var(--border);background:var(--bg);padding:38px 0}
.foot-row{display:flex;align-items:flex-start;gap:26px;flex-wrap:wrap;justify-content:space-between}
.foot-row img{width:auto;height:24px;opacity:.85}
.foot-legal{margin:0;font-size:11.5px;color:var(--t3);line-height:1.72;max-width:74ch}
.foot-legal a{color:var(--t2)}
.foot-legal b{color:var(--t2);font-weight:600}

/* Legal & policies — the three documents as one linear row, matching the main
   sales page at /commercials/. list-style is switched off here rather than
   globally; the dividers are borders on the flex items so they disappear
   correctly when the row wraps. */
.foot-docs-wrap{margin:26px 0 0;padding-top:24px;border-top:1px solid var(--border)}
.foot-docs-wrap h4{
  font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--t3);margin:0 0 16px}
.ft-docs{display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;row-gap:10px;
  list-style:none;margin:0;padding:0}
.ft-docs > li{margin:0}
.ft-docs > li + li{padding-left:18px;border-left:1px solid var(--border)}
/* the legal links are buttons, not anchors — they open a dialog rather than
   navigate — so they need the anchor's appearance put back */
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}
button.ft-doc:hover{color:var(--accent)}
button.ft-doc:focus-visible{outline:2px solid var(--accent-border);outline-offset:3px;border-radius:3px}
.ft-legal-note{margin:16px 0 0;max-width:520px;font-size:11.5px;line-height:1.65;color:var(--t3)}
@media(max-width:520px){
  /* stacked below 520: a three-across row would break mid-title */
  .ft-docs{display:block}
  .ft-docs > li + li{margin-top:11px;padding-left:0;border-left:0}
}

/* JVZoo-required disclaimer — reproduced verbatim from "JVZOO DISCLAIMER.txt".
   Deliberately larger than the rest of the footer type (14px vs 11.5px) so it
   reads as clear and conspicuous, never minimised. Do not shrink or reword it.
   Padding is set on all four sides on purpose so the block stays legible even
   if a global section rule is ever introduced. */
.foot-disclaimer{margin:26px 0 0;padding:22px 24px;text-align:center;
  background:var(--s1);border:1px solid var(--border);border-radius:var(--r-lg,12px)}
/* margin:0 auto centres the measure itself — without it the 80ch column stays
   pinned left inside the full-width box and only the text within it centres. */
.foot-disclaimer p{margin:0 auto;font-size:14px;color:var(--t2);line-height:1.72;max-width:80ch}
.foot-disclaimer p+p{margin-top:14px}
@media(max-width:560px){
  /* padding only — the type stays 14px so it stays readable on mobile */
  .foot-disclaimer{padding:19px 18px}
}

/* ==========================================================================
   STICKY MOBILE CTA — keeps the one decision reachable on small screens
   ========================================================================== */
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;display:none;
  background:rgba(23,24,29,.96);backdrop-filter:blur(12px);
  border-top:1px solid var(--border-strong);
  padding:11px 16px calc(11px + env(safe-area-inset-bottom));
  gap:13px;align-items:center;
}
.bar-txt{min-width:0;flex:none}
.bar-txt b{display:block;font-family:var(--display);font-size:20px;font-weight:700;color:var(--accent);line-height:1}
.bar-txt span{display:block;font:500 9px/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-top:3px}
/* The coupon in the bar replaces the old "One-time" caption rather than being
   added beneath it — the bar is a fixed two-line strip and a third line would
   push the 48px tap target out of it. "One payment" is still stated in the
   .deal block this button scrolls to, so nothing is lost. The code is accented
   to match .coupon-code in section 1d but is plain text here, not a button:
   copy-on-tap next to the CTA would be a second tap target in a 16px gap. */
.bar-coupon b{
  display:inline;font-family:var(--mono);font-size:inherit;line-height:inherit;
  color:var(--accent);letter-spacing:.06em;
}
.bar .btn{flex:1;min-width:0;padding:13px 14px;font-size:13.5px;min-height:48px}
/* Shown only once the hero's own CTA has scrolled away — see the script.
   Rendering it over the hero would put two identical buttons on one screen. */
@media(max-width:900px){
  .bar{display:flex;transform:translateY(105%);transition:transform .26s ease;visibility:hidden}
  .bar.up{transform:none;visibility:visible}
  body{padding-bottom:0}
  body.bar-on{padding-bottom:82px}
}
@media(max-width:360px){
  .bar{gap:9px;padding-left:12px;padding-right:12px}
  .bar-txt b{font-size:17px}
  .bar .btn{font-size:12.5px;padding:12px 10px}
}

/* ==========================================================================
   SCROLL REVEAL — subtle, and only when motion is welcome
   ========================================================================== */
@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}
}


/* ==========================================================================
   LEGAL MODAL
   Copied byte-identical from public/unlimited/index.html so the dialog matches
   the other JV pages. It reads the same --s1/--s2/--border/--accent/--t1-3
   tokens this page already defines, so a future update there can be re-copied
   straight over the top. Do not restyle to taste.
   ========================================================================== */
/* ══ LEGAL MODAL ══
   Renders /assets/js/legal-docs.js through /assets/js/legal-modal.js, exactly as
   the root page and the other JV pages do. Rules follow the authoritative sales
   page: they read the same --s1/--s2/--border/--accent/--t1-3 tokens this page
   already defines, so keeping them byte-identical to the source means a future
   update there can be re-copied straight over the top. Do not restyle to taste. */
#legal-modal[hidden]{display:none;}
#legal-modal{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
#legal-modal .lg-scrim{
  position:absolute; inset:0; background:rgba(6,6,8,.82);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
#legal-modal .lg-box{
  position:relative; z-index:1;
  width:100%; max-width:820px; max-height:88vh;
  display:flex; flex-direction:column;
  background:var(--s1); border:1px solid var(--border-strong);
  border-radius:16px; overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95);
}
#legal-modal .lg-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:22px 24px 16px; border-bottom:1px solid var(--border); flex:none;
}
#legal-modal .lg-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
  display:block; margin-bottom:8px;
}
#legal-modal h2{font-size:clamp(18px,2.4vw,23px); margin:0;}
#legal-modal .lg-date{font-size:12px; color:var(--t3); margin:7px 0 0;}
#legal-modal .lg-x{
  flex:none; width:34px; height:34px; border-radius:9px; cursor:pointer;
  background:var(--s2); border:1px solid var(--border); color:var(--t2);
  display:grid; place-items:center; transition:.15s;
}
#legal-modal .lg-x:hover{color:var(--t1); border-color:var(--border-strong);}
#legal-modal .lg-x svg{width:17px; height:17px;}
#legal-modal .lg-tabs{
  display:flex; gap:7px; padding:14px 24px; flex:none;
  border-bottom:1px solid var(--border);
  overflow-x:auto; scrollbar-width:none;
}
#legal-modal .lg-tabs::-webkit-scrollbar{display:none;}
#legal-modal .lg-tab{
  flex:none; cursor:pointer; white-space:nowrap;
  background:var(--s2); border:1px solid var(--border); color:var(--t2);
  border-radius:20px; padding:7px 14px; font-size:12.5px; font-weight:500;
  transition:.15s;
}
#legal-modal .lg-tab:hover{color:var(--t1);}
#legal-modal .lg-tab[aria-selected="true"]{
  background:var(--accent-soft); border-color:var(--accent-border); color:var(--accent);
}
#legal-modal .lg-body{
  padding:22px 24px 30px; overflow-y:auto; flex:1 1 auto;
  font-size:13.8px; color:var(--t2); line-height:1.72;
  overscroll-behavior:contain;
}
/* legal-docs.js numbers its headings as <h3><span>1</span>Terms</h3>, so the
   span needs to be a badge with a gap — without these rules it renders as
   "1Terms" run together. */
#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);
}
#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:first-child{margin-top:0;}
#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;
}
#legal-modal .lg-body p{margin:0 0 12px;}
/* 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 12px; padding-left:20px; list-style:disc;}
#legal-modal .lg-body ol{list-style:decimal;}
#legal-modal .lg-body li{margin-bottom:7px;}
#legal-modal .lg-body strong{color:var(--t1);}
#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-body table{width:100%; border-collapse:collapse; margin:0 0 14px; font-size:12.5px;}
#legal-modal .lg-body th,
#legal-modal .lg-body td{
  border:1px solid var(--border); padding:8px 10px; text-align:left; vertical-align:top;
}
#legal-modal .lg-body th{color:var(--t1); background:var(--s2); font-weight:600;}
@media (max-width:560px){
  #legal-modal{padding:12px;}
  #legal-modal .lg-box{max-height:92vh; border-radius:13px;}
  #legal-modal .lg-head{padding:18px 17px 14px;}
  #legal-modal .lg-tabs{padding:12px 17px;}
  #legal-modal .lg-body{padding:18px 17px 26px; font-size:13.5px;}
}

/* ==========================================================================
   LEGACY HERO-CARD RULES — /bundle-launchpad ONLY
   /bundle no longer uses any selector in this block. The redesign replaced
   the two-column hero (copy left, sticky .offer card right, .hero-shot
   below) with the centred column in section 1, so these rules are inert
   here.

   They are kept because public/bundle-launchpad/index.html links THIS
   stylesheet and still carries that older hero markup plus the .gtee
   guarantee row. Deleting them silently broke that page: with no .offer
   rule the aside stopped being a sticky bordered card and stretched to
   ~7300px, dragging the hero with it.

   Restored verbatim from the committed version (bundle.css at 108823b) —
   not rewritten, so /bundle-launchpad renders exactly as it did before the
   /bundle redesign.

   If /bundle-launchpad is ever rebuilt on the new centred hero, or given its
   own stylesheet, delete this whole block. Nothing else references it.
   ========================================================================== */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.16fr) minmax(0,.84fr);gap:52px;align-items:start}
@media(max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:40px}}

/* Offer card */
.offer{
  background:linear-gradient(180deg,var(--s2),var(--s1));
  border:1px solid var(--accent-border);border-radius:var(--r-xl);
  padding:30px 28px;position:sticky;top:24px;
  box-shadow:0 24px 70px rgba(0,0,0,.5),0 0 0 1px rgba(242,169,60,.08);
}
@media(max-width:1000px){.offer{position:static;top:auto}}
@media(max-width:480px){.offer{padding:26px 20px;border-radius:var(--r-lg)}}
.offer h2{font-size:clamp(21px,2.5vw,26px);margin:0 0 4px}
.offer h2 span{color:var(--accent)}
.offer-tag{font-size:13px;color:var(--t2);margin:0 0 20px}

.offer-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.offer-price b{
  font-family:var(--display);font-size:clamp(46px,7.4vw,64px);font-weight:700;line-height:.92;
  letter-spacing:-.03em;color:var(--accent);
}
.offer-price s{font-family:var(--display);font-size:20px;color:var(--t3);text-decoration-thickness:2px}
.offer-save{
  display:inline-flex;align-items:center;gap:7px;
  font:600 11px/1 var(--mono);letter-spacing:.09em;text-transform:uppercase;
  color:var(--success);background:var(--success-soft);border:1px solid rgba(127,217,168,.32);
  padding:6px 11px;border-radius:6px;margin-bottom:20px;
}
.offer-note{font-size:12.5px;color:var(--t2);margin:0 0 20px}

.offer-list{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:11px;
  border-top:1px solid var(--border);padding-top:20px}
.offer-list li{display:flex;gap:11px;font-size:13.5px;color:var(--t2);line-height:1.55}
.offer-list li b{color:var(--t1);font-weight:600}
.offer-list svg{width:15px;height:15px;flex:none;margin-top:3px;color:var(--accent)}

.offer-foot{
  margin:16px 0 0;font-size:12px;color:var(--t3);line-height:1.6;text-align:center;
}

/* Hero product visual */
.hero-shot{margin-top:64px}
@media(max-width:860px){.hero-shot{margin-top:44px}}
.shot{
  border:1px solid var(--border-strong);border-radius:var(--r-lg);overflow:hidden;
  background:var(--s2);box-shadow:0 30px 90px rgba(0,0,0,.55);
}
.shot-bar{
  display:flex;align-items:center;gap:7px;padding:10px 14px;
  background:var(--s3);border-bottom:1px solid var(--border);
}
.shot-bar i{width:9px;height:9px;border-radius:50%;background:var(--border-strong);flex:none}
.shot-bar em{
  font:400 11px/1 var(--mono);color:var(--t3);font-style:normal;margin-left:8px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.shot img{width:100%;display:block}
.shot-cap{
  margin:14px auto 0;font-size:12.5px;color:var(--t3);text-align:center;max-width:70ch;line-height:1.6;
}
.shot-cap b{color:var(--t2);font-weight:600}

/* Guarantee row in the old deal block */
.gtee{
  max-width:760px;margin:26px auto 0;
  display:flex;align-items:center;gap:20px;
  background:var(--s2);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 24px;
}
.gtee img{width:76px;height:auto;flex:none}
.gtee b{display:block;font-family:var(--display);font-size:15px;font-weight:600;margin-bottom:4px}
.gtee p{margin:0;font-size:12.5px;color:var(--t2);line-height:1.62}
@media(max-width:560px){
  .gtee{flex-direction:column;text-align:center;gap:14px;padding:22px 18px}
  .gtee img{width:66px}
}