/* ==========================================================================
   FUNNEL — the shared decision environment for /book, /offer, /offer/upsell-1
   and /offer/upsell-2.

   These four pages are one sales argument told over four steps, so they are now
   one visual system rather than four pages that happened to be built by the same
   person. Before this file each page carried its own copy of the button, the
   offer box, the guarantee row, the FAQ and the testimonial strip, and they had
   drifted: three different golds, two different button shadows, a serif headline
   at three different weights. A buyer cannot name that, but they feel it as
   "this got cheaper as I went along" — which is the opposite of what should
   happen as the price climbs.

   THE SKY. Every funnel page sits in the same painted deep-space background as
   Spencer AI on the home page and /ai (/assets/css/cosmos.css and
   /assets/js/cosmos.js, a `.cosmos-sky` behind the whole page), and in the same
   room as the members area those buyers land in afterwards. So the palette here
   is the dark one: cream type, frosted night surfaces, gold for value and action.
   The variable names are older than the theme — `--ink` is the reading colour and
   `--paper` the surface, whatever shade those happen to be.

   COLOUR IS MEANING HERE, not decoration. Anything that reads as colour on these
   pages is doing one of five jobs, and only that job:

     action (--red)    the one action. CTAs and nothing else — a warm gold now,
                       the same object as the button in the members area.
     gold   (--gold)   value, the offer, what is included.
     green  (--green)  proof, confirmation, safety, the guarantee.
     dark   (--night)  the problem, the old way, the current state.
     frost  (--paper)  the new way, relief, simplicity.

   The rule to keep: if a new element needs a colour, it needs one of these five
   for one of these five reasons. A sixth colour means the system has stopped
   organising anything and is just decorating.
   ========================================================================== */

:root{
  /* Type */
  color-scheme:dark;

  /* Type */
  --ink:#F3ECDD;
  --ink-soft:#D6CEBE;
  --ink-mute:#A69E90;
  --paper:#0B0A14;
  --paper-warm:rgba(30,26,48,0.78);

  /* The five meanings */
  --red:#E3C266;
  --red-dark:#8E7030;
  --gold:#C9A84C;
  --gold-soft:#DCC383;
  --green:#8FE0AE;
  --green-pale:rgba(60,140,95,0.16);
  --night:#07070D;

  --gold-bright:#F0D488;
  --gold-line:#C9A34E;

  /* The frosted night surface every box sits on, so the sky never gets in the way of reading */
  --frost:linear-gradient(180deg, rgba(30,26,48,0.8), rgba(16,16,24,0.84));

  --line:rgba(190,175,255,0.18);
  --line-soft:rgba(190,175,255,0.1);
  --hi:rgba(201,168,76,0.32);

  --serif:'Merriweather', Georgia, serif;
  --sans:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --hand:'Caveat', cursive;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--night);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;}

/* A dark veil down the reading column, over the sky and under the words, so a long
   letter stays easy on the eyes while the edges of the page keep their stars. */
.cosmos-sky::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg, rgba(7,7,13,0.15), rgba(7,7,13,0.62) 22%, rgba(7,7,13,0.62) 78%, rgba(7,7,13,0.15));
}
@media (max-width:760px){ .cosmos-sky::after{background:rgba(7,7,13,0.6);} }

/* Frosted surfaces: the same glass the Spencer AI screens use. */
.stack-box,.offer-box,.card,.fit-col,.versus-new,.guarantee-row,.value-block{
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
a{color:inherit;}

/* Measure. 680px is roughly 60-70 characters at 17px, which is where a long
   letter stops being work to read. `.col-wide` is for things that are grids
   rather than prose and look starved at that width. */
.col{max-width:680px;margin:0 auto;padding:0 20px;}
.col-wide{max-width:860px;margin:0 auto;padding:0 20px;}

/* --------------------------------------------------------------------------
   THE ONE-SECOND BAND

   Every page in the funnel opens on the same dark band. It does three jobs:
   it separates the promise from the page so the headline is read as a
   statement rather than as the top of an article; it gives the eye somewhere
   unambiguous to land first; and it makes step 2 of the funnel recognisable as
   step 2 of the same thing rather than a different company.

   It carries no artwork of its own: the headline sits straight on the same
   cosmos sky as the rest of the page, so the top of every page reads clear
   and simple rather than as type over a blurred product shot.
   -------------------------------------------------------------------------- */
.band{
  position:relative;isolation:isolate;overflow:hidden;
  background:transparent;color:#fff;
  padding:34px 20px 40px;text-align:center;
  border-bottom:1px solid var(--line-soft);
}
.band-inner{max-width:760px;margin:0 auto;}

/* Who this is for, said before anything else. The single highest-leverage line
   on a cold page: it is what lets the right person decide the next four seconds
   are theirs, and the wrong person leave without costing anything. */
.icp{
  font-size:12.5px;font-weight:700;
  letter-spacing:0.11em;text-transform:uppercase;
  color:var(--gold-bright);
  margin:0 0 14px;line-height:1.5;
}
.band h1{
  font-family:var(--serif);font-weight:900;
  font-size:clamp(25px,5vw,40px);
  line-height:1.21;letter-spacing:-0.01em;
  text-wrap:balance;
  margin:0 0 16px;
}
/* Peripheral readability: the highlight has to survive being seen rather than
   read. Solid gold on the dark band, a marker stripe on paper — a gradient
   that fades toward the background colour is how the last third of a headline
   quietly stops existing. */
.band h1 .hi{color:var(--gold-bright);}
.band-sub{
  font-size:clamp(15.5px,2.1vw,17.5px);
  color:#d9d9e2;max-width:600px;margin:0 auto 24px;
  text-wrap:pretty;
}
.band-sub strong{color:#fff;font-weight:600;}
.band-sub .say{color:var(--gold-bright);font-weight:600;}

/* Small print inside the band has to go light or it vanishes. */
.band .cta-sub,.band .card-note{color:#c2c2cc;}
.band .risk{color:#cfcfd8;}

/* --------------------------------------------------------------------------
   VIDEO
   -------------------------------------------------------------------------- */
.vsl-box{
  max-width:640px;margin:0 auto 10px;aspect-ratio:16/9;
  background:#05050a;border:3px solid var(--gold-line);border-radius:6px;
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 0 rgba(184,134,11,0.45);
}
.vsl-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
/* Sits over the player and takes every click, so the share and "Watch on
   YouTube" overlays underneath can't be reached. Added by script only once the
   player has answered — with no script there is no cover and the video plays
   normally. */
.vsl-cover{
  position:absolute;inset:0;width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;padding:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}
.vsl-cover:focus-visible{outline:3px solid var(--gold-bright);outline-offset:-4px;}
/* Only shown once the viewer has paused. Before the first play YouTube draws
   its own, and two play buttons stacked together looks like a mistake. */
.vsl-play{
  width:64px;height:64px;border-radius:50%;
  background:var(--red);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 8px rgba(255,255,255,0.08);
  opacity:0;transition:opacity .15s ease;
}
.vsl-play::after{
  content:"";border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #191408;margin-left:4px;
}
.vsl-box.is-paused .vsl-play{opacity:1;}
.vsl-caption{
  text-align:center;color:#c2c2cc;
  font-size:12px;letter-spacing:0.05em;text-transform:uppercase;
  margin:0 auto 20px;
}
/* On paper rather than in the band. */
.on-paper .vsl-caption{color:var(--ink-mute);}

/* --------------------------------------------------------------------------
   THE ACTION

   One shape, one colour, everywhere in the funnel, at every price. A buyer
   should never have to work out which thing on the page is the button, and the
   button on the $997 page should be the same object as the button on the free
   one — a different-looking button reads as a different, less certain company.

   `margin` on .cta-wrap keeps its `auto` sides: this rule sits after `.col` in
   the sheet, so a plain `margin:24px 0` silently cancels that centring.
   -------------------------------------------------------------------------- */
.cta-wrap{text-align:center;margin:24px auto 0;}
.btn{
  display:inline-block;width:100%;max-width:480px;
  background:linear-gradient(180deg, #F0D488, #C9A34E);color:#191408;
  font-family:var(--sans);font-weight:800;font-size:18px;line-height:1.3;
  padding:19px 26px;border:1px solid rgba(255,230,160,0.6);border-radius:10px;
  box-shadow:0 5px 0 var(--red-dark), 0 18px 40px -16px rgba(240,212,136,0.55);
  cursor:pointer;text-align:center;text-decoration:none;
  transition:transform .08s ease;
}
.btn:hover{filter:brightness(1.06);}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--red-dark);}
.btn:disabled{opacity:0.6;cursor:not-allowed;}
.btn small{display:block;font-size:12px;font-weight:600;opacity:0.92;margin-top:5px;letter-spacing:0.01em;}
.btn.tight{max-width:520px;}

.cta-sub{font-size:13px;color:var(--ink-mute);margin-top:11px;}
.cta-sub::before{content:"🔒 ";}
/* A line of copy that sells the click, directly above it. Every CTA past the
   first one gets one: a button on its own asks the reader to remember why they
   were going to press it. */
.cta-lead{
  font-family:var(--serif);font-weight:700;
  font-size:clamp(17px,2.6vw,21px);line-height:1.35;
  text-align:center;max-width:560px;margin:0 auto 18px;
  color:var(--ink);
}
.cta-lead .hi{color:var(--red);}
.cta-break{text-align:center;padding:6px 0;}

/* --------------------------------------------------------------------------
   SECTION FURNITURE

   The skim layer. These headlines are the page as far as most visitors are
   concerned, so they are sized to be absorbed without being read, and they are
   written to make sense in sequence with nothing between them.
   -------------------------------------------------------------------------- */
section{margin-bottom:44px;}
.eyebrow{
  text-align:center;font-size:11.5px;font-weight:800;
  letter-spacing:0.14em;text-transform:uppercase;
  color:var(--gold-soft);margin:0 0 10px;
}
.section-head{
  font-family:var(--serif);font-weight:900;
  font-size:clamp(22px,3.9vw,30px);line-height:1.22;
  text-align:center;text-wrap:balance;
  max-width:640px;margin:0 auto 12px;color:var(--ink);
}
.section-head .hi{color:var(--red);}
.section-head .win{color:var(--green);}
.section-sub{
  text-align:center;font-size:15px;color:var(--ink-mute);
  max-width:540px;margin:0 auto 26px;text-wrap:pretty;
}
/* Sells consumption of the next section rather than summarising this one. */
.hook{
  text-align:center;font-family:var(--hand);
  font-size:24px;color:var(--red);
  margin:0 auto 20px;transform:rotate(-1deg);
}
.rule{height:1px;background:var(--line);border:0;margin:44px auto;max-width:180px;}

/* --------------------------------------------------------------------------
   PROSE
   -------------------------------------------------------------------------- */
.letter{padding:2px 0 4px;}
.letter p{font-size:17px;color:var(--ink-soft);margin-bottom:21px;}
.letter p:last-child{margin-bottom:0;}
.letter h3{
  font-family:var(--serif);font-weight:900;
  font-size:clamp(20px,3vw,24px);line-height:1.25;
  margin:34px 0 15px;color:var(--ink);
}
/* Highlighting is a claim about importance, so it is spent only on the lines
   that carry the argument. A page where a third of the sentences are
   highlighted has highlighted nothing. */
.letter strong{
  color:var(--ink);font-weight:700;
  background:linear-gradient(180deg, transparent 64%, var(--hi) 64%);
}
.letter em{font-style:italic;}
/* The drop cap is a float over a short opening line, so without a block
   formatting context it spills downward and indents the paragraphs beneath. */
.letter p.lead{display:flow-root;}
.letter p.lead::first-letter{
  font-family:var(--serif);font-size:58px;font-weight:900;
  float:left;line-height:0.75;padding:6px 10px 0 0;color:var(--ink);
}
.hand-note{
  font-family:var(--hand);font-size:26px;color:var(--red);
  text-align:right;margin:-4px 0 26px;transform:rotate(-2deg);
}

.tick-list{list-style:none;margin:26px 0;}
.tick-list li{
  display:flex;gap:13px;padding:13px 0;
  border-bottom:1px dashed var(--line);
  font-size:16.5px;color:var(--ink-soft);
}
.tick-list li::before{
  content:"✔";color:var(--red);font-weight:800;
  flex-shrink:0;font-size:15px;margin-top:3px;
}
.tick-list li b,.tick-list li strong{color:var(--ink);font-weight:700;}

/* --------------------------------------------------------------------------
   CONTRAST — the old way against the new one

   The brain reads difference faster than it reads explanation, so the argument
   is made in the layout before a word of it is read: the problem side is dark,
   crowded and struck through; the answer side is paper, light and short. It
   should be obvious which side is better from across the room.
   -------------------------------------------------------------------------- */
.versus{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin:8px 0 4px;
}
.versus-col{border-radius:10px;padding:22px 20px;}
.versus-col h4{
  font-family:var(--serif);font-weight:900;font-size:16.5px;
  margin-bottom:14px;line-height:1.3;
}
.versus-col ul{list-style:none;}
.versus-col li{font-size:14.5px;line-height:1.5;padding:7px 0;display:flex;gap:9px;}
.versus-col li::before{flex-shrink:0;font-weight:800;}

.versus-old{background:rgba(5,5,10,0.72);border:1px solid rgba(255,255,255,0.06);color:#b9b8c4;}
.versus-old h4{color:#ff9c93;}
.versus-old li::before{content:"✕";color:#e0645a;}
.versus-old li{text-decoration:none;}

.versus-new{background:var(--frost);border:1px solid rgba(201,168,76,0.4);color:var(--ink-soft);}
.versus-new h4{color:var(--green);}
.versus-new li::before{content:"✔";color:var(--green);}

@media(max-width:600px){
  .versus{grid-template-columns:1fr;gap:12px;}
}

/* --------------------------------------------------------------------------
   PROOF

   Screenshots of real messages, each with the one line worth reading pulled
   out above it in type large enough to skim. Before this the strip was seven
   raw screenshots: credible, but a fast scroller absorbed nothing from them,
   because reading a screenshot is deliberate work. The pulled line is what
   makes proof survive a skim.
   -------------------------------------------------------------------------- */
.proof-strip{margin:0 auto 8px;}
.proof-grid{display:flex;gap:14px;align-items:flex-start;}
.proof-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:16px;}
.proof-item{margin:0;}
.proof-said{
  font-family:var(--serif);font-weight:700;
  font-size:15.5px;line-height:1.4;color:var(--ink);
  margin-bottom:8px;
}
.proof-said::before{content:"“";}
.proof-said::after{content:"”";}
.proof-who{
  display:block;font-family:var(--sans);font-weight:600;
  font-size:12px;letter-spacing:0.04em;text-transform:uppercase;
  color:var(--green);margin-top:6px;
}
.proof-who::before{content:"✔ ";}
/* The screenshots arrive at whatever size they arrive at, so the two columns
   are balanced by hand in the markup rather than by the browser. CSS columns
   used to do it, and re-ran the balance every time another lazy screenshot
   resolved its height — so the strip visibly shuffled itself while the page
   settled. Fixed columns have nothing to re-balance, and width/height on every
   image reserves its box before it loads, so nothing below moves either. */
.proof-shot{
  border:1px solid var(--line);border-radius:8px;
  overflow:hidden;background:#111;
  box-shadow:0 18px 40px -22px rgba(0,0,0,0.9);
}
.proof-shot img{display:block;width:100%;height:auto;}
.proof-note{
  text-align:center;font-size:12.5px;color:var(--ink-mute);
  margin:18px auto 0;max-width:520px;
}
@media(max-width:640px){ .proof-grid{flex-direction:column;} }

/* Two screenshots, high on the page, before the argument has been made.
   Credibility has to be visible before anyone has agreed to read anything. */
.proof-quick{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin:0 auto;
}
@media(max-width:640px){ .proof-quick{grid-template-columns:1fr;gap:18px;} }

/* --------------------------------------------------------------------------
   TRUST STRIP
   `margin` keeps its `auto` sides — this rule follows `.col-wide`, so a plain
   `margin:22px 0` silently cancels its centring.
   -------------------------------------------------------------------------- */
.trust-strip{
  display:flex;justify-content:center;align-items:center;
  gap:12px 28px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-mute);font-weight:600;text-align:center;
  padding:16px 0 14px;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin:22px auto;
}
.trust-strip span{display:inline-flex;align-items:center;justify-content:center;gap:6px;}
.trust-strip b{color:var(--green);}

/* --------------------------------------------------------------------------
   THE OFFER

   Gold, because gold means value everywhere else in the funnel. The value has
   to land before the price does or the price is just a number sitting on its
   own, so it gets its own framed block above: a label saying what the figure
   is, then the figure struck through at nearly the size of the price.
   -------------------------------------------------------------------------- */
.stack-box{
  border:2px dashed var(--gold);border-radius:10px;
  background:var(--frost);
  padding:30px 26px;margin:32px 0;
}
.stack-box h3{
  font-family:var(--serif);font-weight:900;
  text-align:center;font-size:21px;line-height:1.3;
  margin-bottom:20px;
}
.stack-mock{
  width:100%;max-width:215px;height:auto;margin:0 auto 20px;
  filter:drop-shadow(0 16px 30px rgba(26,26,26,0.22));
}
.stack-line{
  display:flex;justify-content:space-between;gap:16px;
  font-size:15.5px;padding:9px 0;
  border-bottom:1px dotted var(--line);
}
.stack-line b{font-weight:700;}
.stack-line .price{font-weight:700;white-space:nowrap;}
.stack-math{
  text-align:center;font-family:var(--hand);font-size:22px;
  color:var(--ink);margin-top:18px;
}
.stack-math .strike{text-decoration:line-through;color:var(--ink-mute);}
.stack-math .final{color:var(--red);font-size:30px;font-weight:700;}

.offer-box{
  border:2px dashed var(--gold);border-radius:10px;
  background:var(--frost);
  padding:32px 26px 30px;text-align:center;
  margin-bottom:22px;position:relative;
}
.discount-badge{
  position:absolute;top:-16px;left:50%;transform:translateX(-50%);
  background:var(--red);color:#191408;font-weight:800;font-size:13px;
  padding:7px 18px;border-radius:20px;
  box-shadow:0 4px 18px rgba(0,0,0,0.45);white-space:nowrap;
}
.value-block{
  max-width:340px;margin:8px auto 18px;padding:12px 16px 14px;
  border:1px solid rgba(201,168,76,0.35);border-radius:8px;background:rgba(201,168,76,0.08);
}
.value-label{
  font-size:11.5px;font-weight:800;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--gold-soft);margin-bottom:2px;
}
.value-amount{
  font-family:var(--serif);font-size:36px;font-weight:900;line-height:1.12;
  color:#8F887B;text-decoration:line-through;
  text-decoration-color:#E46A6A;text-decoration-thickness:3px;
}
.price-label{
  font-size:11.5px;font-weight:800;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--ink-mute);
}
.price-line{
  font-family:var(--serif);font-size:44px;font-weight:900;
  color:var(--red);line-height:1.1;margin-bottom:4px;
}
.price-note{font-size:12.5px;color:var(--ink-mute);margin-bottom:22px;}

/* --------------------------------------------------------------------------
   SAFETY — green, because green is proof and reassurance in this system
   -------------------------------------------------------------------------- */
.confirm-bar{
  background:var(--green-pale);color:var(--green);
  text-align:center;font-size:13.5px;font-weight:700;
  padding:12px 16px;border-bottom:1px solid rgba(110,200,140,0.28);
}
.confirm-bar::before{content:"✔ ";}

.guarantee-row{
  display:flex;gap:18px;align-items:center;
  border:1px solid rgba(143,224,174,0.35);border-radius:10px;
  background:var(--frost);
  padding:22px;margin:0;
}
.guarantee-badge{
  width:78px;height:78px;border-radius:50%;
  border:3px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:900;font-size:11px;
  text-align:center;line-height:1.3;flex-shrink:0;color:var(--gold);
}
.guarantee-row p{font-size:15px;color:var(--ink-soft);}
.guarantee-row strong{
  display:block;font-family:var(--serif);font-size:17px;
  color:var(--ink);margin-bottom:6px;
}
@media(max-width:600px){ .guarantee-row{flex-direction:column;text-align:center;} }

/* --------------------------------------------------------------------------
   OBJECTIONS
   Open by default is deliberate on a funnel page: an accordion hides the
   answers to the questions that stop the sale, and a closed row asks the
   reader to work for reassurance. These open on tap and shut the others, but
   the question itself is always readable.
   -------------------------------------------------------------------------- */
.faq-list{margin:0 auto;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
  padding:17px 0;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-weight:700;font-size:15.5px;line-height:1.4;
}
.faq-q::after{content:"+";color:var(--red);font-size:20px;flex-shrink:0;}
.faq-item.open .faq-q::after{content:"–";}
.faq-a{
  max-height:0;overflow:hidden;
  font-size:14.5px;line-height:1.65;color:var(--ink-mute);
  transition:max-height .25s ease;
}
.faq-item.open .faq-a{max-height:340px;padding-bottom:17px;}

/* --------------------------------------------------------------------------
   QUALIFICATION

   Naming who this is not for is what makes "this is for you" mean anything.
   It also stops the wrong buyer — the one looking for a jackpot — from
   arriving, refunding, and teaching the page's numbers a lie.
   -------------------------------------------------------------------------- */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.fit-col{border-radius:10px;padding:22px 20px;border:1px solid var(--line);background:var(--frost);}
.fit-col.no{background:rgba(5,5,10,0.6);}
.fit-col h4{
  font-family:var(--serif);font-weight:900;font-size:16px;
  margin-bottom:13px;line-height:1.3;
}
.fit-col.yes h4{color:var(--green);}
.fit-col.no h4{color:var(--ink-mute);}
.fit-col ul{list-style:none;}
.fit-col li{font-size:14.5px;line-height:1.5;padding:6px 0;display:flex;gap:9px;color:var(--ink-soft);}
.fit-col li::before{flex-shrink:0;font-weight:800;}
.fit-col.yes li::before{content:"✔";color:var(--green);}
.fit-col.no li::before{content:"—";color:#6F6A62;}
@media(max-width:600px){ .fit{grid-template-columns:1fr;gap:12px;} }

/* --------------------------------------------------------------------------
   CARDS / PS / FOOTER
   -------------------------------------------------------------------------- */
.card{
  background:var(--frost);border:1px solid var(--line);border-radius:12px;
  padding:28px 26px;
}
.ps-block{
  font-size:15.5px;color:var(--ink-soft);
  border-top:1px solid var(--line);
  padding-top:20px;margin-top:34px;
}
.ps-block b{color:var(--ink);}

/* Errors and card notes belong to the upsell buttons. Hidden until they have
   something to say. */
.error-note{
  display:none;max-width:480px;margin:14px auto 0;
  background:rgba(120,58,58,0.22);border:1px solid rgba(220,120,120,0.35);color:#F2B8B8;
  font-size:13.5px;line-height:1.55;padding:12px 14px;border-radius:6px;text-align:center;
}
.card-note{
  display:none;max-width:480px;margin:10px auto 0;
  font-size:12px;line-height:1.5;color:var(--ink-mute);text-align:center;
}

/* The way out. Neutral on purpose: a decline link that mocks the reader for
   declining ("no thanks, I'll keep struggling") buys a flinch and spends
   trust, and the reader is a customer either way — they may still be reading
   the next page. */
.no-thanks{
  display:block;text-align:center;margin:24px auto 46px;
  font-size:13.5px;color:var(--ink-mute);text-decoration:underline;
  cursor:pointer;max-width:360px;line-height:1.5;
}
.no-thanks:hover{color:var(--ink);}

/* ===== LEGAL FOOTER =====
   Stripe expects a buyer to be able to reach the terms and the refund policy
   from the page they are buying on, and Meta's ad review looks for the same
   links plus the results disclaimer. These are the only outbound links a
   funnel page is allowed: they are required, so they are as quiet as they can
   be while still being findable. */
.legal{
  border-top:1px solid var(--line);
  margin-top:44px;padding:28px 20px 36px;
  text-align:center;font-size:13px;line-height:1.7;color:var(--ink-mute);
  background:rgba(7,7,13,0.55);
}
.legal a{color:var(--ink-mute);text-decoration:underline;margin:0 9px;white-space:nowrap;}
.legal .disclaimer{max-width:640px;margin:0 auto 12px;}

/* --------------------------------------------------------------------------
   STICKY ACTION — phones only

   On a phone the CTA is off screen for most of the scroll, and the page is
   long. This keeps the one action reachable from anywhere without adding a
   second competing action.
   -------------------------------------------------------------------------- */
.sticky-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:50;
  background:rgba(14,13,24,0.88);border-top:1px solid rgba(201,168,76,0.4);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:9px 14px;
  display:none;align-items:center;justify-content:space-between;gap:12px;
  box-shadow:0 -10px 30px rgba(0,0,0,0.5);
}
.sticky-bar .sb-txt{font-size:12.5px;font-weight:700;line-height:1.3;text-align:left;}
.sticky-bar .sb-txt small{display:block;font-weight:500;color:var(--ink-mute);font-size:11px;}
.sticky-bar .btn{
  width:auto;max-width:none;flex-shrink:0;
  padding:12px 20px;font-size:15px;box-shadow:0 3px 0 var(--red-dark);
}

@media (max-width:600px){
  .sticky-bar{display:flex;}
  body.has-sticky{padding-bottom:78px;}
  .band{padding:26px 18px 32px;}
  .col,.col-wide{padding:0 18px;}
  section{margin-bottom:38px;}
  .letter p{font-size:16.5px;}
  .stack-box,.offer-box{padding:26px 18px;}
  .card{padding:24px 18px;}
}

/* Reduced motion: the only motion in the funnel is the button press and the
   FAQ, and neither is load-bearing. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition-duration:0.01ms !important;animation-duration:0.01ms !important;}
}