/* ==========================================================================
   HIDDEN PROFITS — funnel design tokens

   The brief was "more professional, clearer, more reassuring" while staying
   roughly in the same tones. So this is deliberately NOT the alarm-page look
   the current CB N°298 pages use (red banners, "DO NOT CLOSE THIS PAGE",
   flashing countdowns). Those read as a trap, and a buyer who feels trapped
   refunds — or charges back, which is worse.

   What replaces it:
     · Light ground, generous whitespace, one violet signal colour.
     · A visible order-progress bar. Knowing where you are in a checkout is
       the single cheapest anxiety reduction there is.
     · Prices in a plain box: what it is, what it costs, that it is one-time.
     · The guarantee stated in full, not in 8px grey under the button.
     · The decline link is a real, readable link. Hiding it is what makes a
       page feel like a trap.

   Same palette as the member area on purpose — the buyer lands there minutes
   later and it has to be the same product.
   ========================================================================== */

:root{
  --ink:#16121f;            /* plum-black */
  --ink-2:#5f5a6b;
  --ink-3:#8b8697;
  --line:#e7e4ef;
  --line-2:#d8d4e4;
  --bg:#ffffff;
  --soft:#f8f7fc;           /* cool near-white */
  --soft-2:#f2effa;

  --brand:#6D3BE4;          /* the switch */
  --brand-d:#5a2ec7;
  --brand-soft:#f1ecfd;

  --ok:#128a6e;             /* money that landed */
  --ok-soft:#e6f5f1;
  --go:#1f9d4d;             /* the YES button. Green, per the owner 2026-09-09 */
  --go-d:#17803e;
  --go-soft:#eaf7ef;
  --gold:#b8912f;
  --gold-l:#e0bf62;
  --gold-soft:#fdfaf0;
  --warn:#a8641a;
  --warn-soft:#fdf3e6;

  --radius:14px;
  --radius-s:10px;
  --shadow:0 1px 2px rgba(22,18,31,.05), 0 8px 24px -12px rgba(22,18,31,.18);

  --body:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --display:'Sora','Manrope',system-ui,sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--soft); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--brand-d); }
h1,h2,h3{ font-family:var(--display); line-height:1.18; letter-spacing:-.022em; margin:0; font-weight:700; }
h1{ font-size:clamp(27px,5.2vw,40px); }
h2{ font-size:clamp(21px,3.6vw,28px); }
h3{ font-size:clamp(17px,2.4vw,20px); }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }

.wrap{ max-width:760px; margin:0 auto; padding:0 20px; }
.wrap-wide{ max-width:960px; margin:0 auto; padding:0 20px; }

/* ---------- header + order progress ---------------------------------- */
.hdr{ background:var(--bg); border-bottom:1px solid var(--line); }
.hdr .wrap{ display:flex; align-items:center; gap:12px; height:60px; }
.brand{ display:flex; align-items:center; gap:9px; font-family:var(--display); font-weight:700; font-size:17px; letter-spacing:-.02em; text-decoration:none; color:var(--ink); }
.brand .sw{ width:34px; height:20px; border-radius:999px; background:var(--brand); position:relative; flex:none; }
.brand .sw::after{ content:""; position:absolute; top:3px; right:3px; width:14px; height:14px; border-radius:50%; background:#fff; }
.hdr .secure{ margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink-3); white-space:nowrap; }

.steps{ background:var(--bg); border-bottom:1px solid var(--line); }
.steps .wrap{ display:flex; align-items:center; gap:6px; padding-top:11px; padding-bottom:11px; overflow-x:auto; scrollbar-width:none; }
.steps .wrap::-webkit-scrollbar{ display:none; }
.steps b{ font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-right:4px; white-space:nowrap; }
.pip{ flex:none; height:5px; width:34px; border-radius:999px; background:var(--line-2); }
.pip.done{ background:var(--ok); }
.pip.now{ background:var(--brand); }

/* ---------- blocks ---------------------------------------------------- */
.section{ padding:34px 0; }
.section.tight{ padding:22px 0; }
.card{ background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.card .in{ padding:22px; }
@media(min-width:640px){ .card .in{ padding:28px; } }

.eyebrow{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--brand-d); background:var(--brand-soft); padding:6px 12px; border-radius:999px; }
.lede{ font-size:clamp(16px,2.4vw,18.5px); color:var(--ink-2); }
.muted{ color:var(--ink-2); }
.small{ font-size:14px; }
.tiny{ font-size:12.5px; color:var(--ink-3); }

/* ---------- video ----------------------------------------------------- */
.video{ background:#0f0b18; border-radius:var(--radius); overflow:hidden; }
.video-ph{ aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; color:#b9b2c9; font-size:14px; border:1px dashed #3a3348; border-radius:var(--radius); background:#16111f; }

/* ---------- list ------------------------------------------------------ */
ul.ticks{ list-style:none; margin:0; padding:0; }
ul.ticks li{ display:flex; gap:11px; padding:11px 0; border-top:1px solid var(--line); font-size:15.5px; line-height:1.55; }
ul.ticks li:first-child{ border-top:0; }
ul.ticks svg{ flex:none; margin-top:3px; }

/* ---------- price ----------------------------------------------------- */
.price{ border:1px solid var(--line-2); border-radius:var(--radius); overflow:hidden; background:var(--bg); }
.price .row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:13px 18px; border-top:1px solid var(--line); font-size:15px; }
.price .row:first-child{ border-top:0; }
.price .row .lbl{ color:var(--ink-2); }
.price .row.total{ background:var(--soft-2); font-weight:700; font-size:17px; }
.price .row.total .amt{ font-family:var(--display); font-size:26px; letter-spacing:-.03em; }
.was{ color:var(--ink-3); text-decoration:line-through; font-weight:500; }

/* ---------- buttons --------------------------------------------------- */
.btn{
  display:block; width:100%; text-align:center; text-decoration:none;
  background:var(--brand); color:#fff; font-family:var(--display); font-weight:700;
  font-size:clamp(16px,2.6vw,19px); letter-spacing:-.01em;
  padding:17px 20px; border-radius:var(--radius-s); border:0; cursor:pointer;
  box-shadow:0 6px 18px -8px rgba(109,59,228,.65);
  transition:background .15s ease, transform .06s ease;
}
.btn:hover{ background:var(--brand-d); }
.btn:active{ transform:translateY(1px); }
.btn .sub{ display:block; font-family:var(--body); font-weight:600; font-size:13px; opacity:.9; margin-top:4px; letter-spacing:0; }
.btn-quiet{ background:var(--bg); color:var(--ink); border:1px solid var(--line-2); box-shadow:none; }
.btn-quiet:hover{ background:var(--soft); }

.decline{ display:block; text-align:center; margin-top:16px; font-size:14.5px; color:var(--ink-2); text-decoration:underline; text-underline-offset:3px; background:none; border:0; width:100%; cursor:pointer; font-family:var(--body); }
.decline:hover{ color:var(--ink); }

/* ---------- guarantee ------------------------------------------------- */
.guarantee{ background:var(--ok-soft); border:1px solid rgba(18,138,110,.22); border-radius:var(--radius); padding:20px 22px; }
.guarantee h3{ color:#0b6552; margin-bottom:8px; }
.guarantee p{ font-size:15px; color:#155f50; }

/* ---------- modal ----------------------------------------------------- */
.modal-bg{ position:fixed; inset:0; background:rgba(22,18,31,.55); backdrop-filter:blur(2px); display:none; align-items:center; justify-content:center; padding:20px; z-index:80; }
.modal-bg.open{ display:flex; }
.modal{ background:var(--bg); border-radius:var(--radius); max-width:440px; width:100%; padding:26px 24px; box-shadow:0 24px 60px -20px rgba(22,18,31,.5); }
.modal h3{ margin-bottom:10px; }
.modal p{ font-size:15px; color:var(--ink-2); }
.modal .btn{ margin-top:18px; }
.modal .decline{ margin-top:12px; font-size:14px; }

/* The decline modal is the last word before the buyer leaves the offer, so it
   is written as a loss, not as a question. "Are you sure?" invites a yes; a
   list of what is about to be given up does not. */
.modal .m-warn{
  display:block; margin:-6px 0 12px; padding:8px 12px; border-radius:var(--radius-s);
  background:#fdecea; border:1px solid #f3b9b3; color:#a3170f;
  font-size:11.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  text-align:center; line-height:1.45;
}
.modal h3 em{ font-style:normal; color:#c8102e; }

.modal .m-lose{ list-style:none; margin:14px 0 0; padding:0; }
.modal .m-lose li{
  position:relative; padding:0 0 0 26px; margin-top:9px;
  font-size:14px; line-height:1.45; color:var(--ink-2);
}
/* A cross, not a bullet: every line is something being taken away. */
.modal .m-lose li::before{
  content:"\00d7"; position:absolute; left:6px; top:-1px;
  color:#c8102e; font-weight:800; font-size:17px; line-height:1.35;
}
.modal .m-lose li b{ color:var(--ink); font-weight:800; }

.modal .m-final{
  margin-top:14px; padding-top:12px; border-top:1px solid var(--line);
  font-size:14.5px; font-weight:700; color:var(--ink);
}

/* End-of-video decision (funnel.js §5). The marker stays hidden until the
   VTurb "show hidden element" CTA reveals it at the last second. The
   decision itself is one question and two buttons; the No is a real
   button, as easy to hit as the Yes. */
.hp-end-decision{ display:none; }
.end-bg .end-k{ text-align:center; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:-4px 0 8px; }
.end-bg .end-h{ text-align:center; font-size:24px; line-height:1.25; margin:0; }
.end-bg .end-h em{ font-style:normal; color:var(--go); }
.end-bg .nobar{
  margin-top:12px; padding:15px 16px; border-radius:var(--radius);
  background:#eceaf1; color:#3d3a47; text-decoration:none; font-weight:700; font-size:15px;
}
.end-bg .nobar:hover{ background:#e0dde8; color:#2a2732; }

/* ---------- footer ---------------------------------------------------- */
.ftr{ background:var(--bg); border-top:1px solid var(--line); margin-top:40px; padding:26px 0 34px; }
.ftr .links{ display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:center; margin-bottom:14px; }
.ftr a{ font-size:13.5px; color:var(--ink-2); text-decoration:none; }
.ftr a:hover{ text-decoration:underline; }
.ftr p{ font-size:12.5px; color:var(--ink-3); text-align:center; max-width:640px; margin:0 auto 8px; line-height:1.6; }

/* ---------- sticky cta ------------------------------------------------ */
.sticky{ position:fixed; left:0; right:0; bottom:0; z-index:60; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-top:1px solid var(--line); padding:10px 20px calc(10px + env(safe-area-inset-bottom)); transform:translateY(110%); transition:transform .22s ease; }
.sticky.on{ transform:none; }
.sticky .in{ max-width:760px; margin:0 auto; }


/* ==========================================================================
   CTA — owner passes, 2026-09-09
   Green, big, and the main line does the selling: an aggressive first-person
   claim, not a description. The price lives in a SMALL sub-line with the
   anchor struck through immediately before it, so the contrast between the two
   numbers is what the eye lands on rather than the price itself.
   ========================================================================== */
.btn{
  position:relative; overflow:hidden;
  background:var(--go); box-shadow:0 6px 18px -8px rgba(31,157,77,.6);
  font-size:clamp(18px,3.9vw,23px); line-height:1.2; padding:19px 18px;
  text-shadow:0 1px 0 rgba(0,0,0,.13); letter-spacing:-.01em;
}
.btn:hover{ background:var(--go-d); }
.btn .sub{
  display:block; margin-top:7px; font-family:var(--body); font-weight:600;
  font-size:clamp(12.5px,2.4vw,14px); letter-spacing:0; text-shadow:none; opacity:.96;
}
.btn .sub .anchor{ text-decoration:line-through; opacity:.62; font-weight:500; margin-right:7px; }
.btn .sub b{ font-weight:800; }

/* Attention, not a disco. A slow breath plus a sheen that crosses every few
   seconds — enough to catch the eye on a static page, not enough to read as a
   flashing ad. Both stop dead for anyone who has asked for reduced motion. */
@keyframes hp-breathe{
  0%,100%{ transform:scale(1); box-shadow:0 6px 18px -8px rgba(31,157,77,.6); }
  50%    { transform:scale(1.018); box-shadow:0 10px 26px -8px rgba(31,157,77,.75); }
}
/* The band is 32% of the button, so it only clears the right edge once it has
   travelled (100-32)/32 = 212.5% of its own width. The first version stopped at
   260% and parked HALF THE BAND on the right edge for the whole pause. It has
   to end fully outside, and wait there. */
@keyframes hp-sheen{
  0%      { transform:translateX(-125%) skewX(-18deg); }
  45%,100%{ transform:translateX(330%)  skewX(-18deg); }
}
.btn{ animation:hp-breathe 2.6s ease-in-out infinite; }
.btn::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:32%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),transparent);
  animation:hp-sheen 4.6s cubic-bezier(.4,0,.5,1) infinite; pointer-events:none;
}
.btn:hover{ animation-play-state:paused; }
@media (prefers-reduced-motion: reduce){
  .btn{ animation:none; }
  .btn::after{ display:none; }
}

/* The decline. Visible, but quiet — light blue, centred. It has to be findable:
   a decline the buyer cannot find is what turns a refusal into a chargeback. */
.nobar{
  display:block; width:100%; margin-top:16px; padding:12px 16px;
  background:none; border:0; color:#5b8fc9;
  font-family:var(--body); font-size:14px; line-height:1.45; font-weight:500;
  text-align:center; text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.nobar:hover{ color:#3f74ae; }

/* The one-click note. Present, but quiet — a reassurance, not a claim. */
.oneclick{ text-align:center; font-size:11.5px; color:var(--ink-3); margin-top:10px; letter-spacing:.01em; }

/* ==========================================================================
   Payment reassurance badge
   The full "GUARANTEED SAFE CHECKOUT" plate, drawn once as
   assets/safe-checkout.svg and shown large — the owner asked for that badge,
   at that size, seals included. It scales to the column width and stays crisp.
   Note the seals it carries: Norton Secured, McAfee Secure and Stripe are paid
   third-party certifications. Displaying one the business does not actually
   hold is a false trust claim, and the badge should be trimmed if those
   subscriptions are not in place.
   ========================================================================== */
/* Reassurance, not a billboard. At full width the seal plate shouted louder
   than the button above it, and a payment badge that shouts reads as a page
   that expects to be doubted. Small, centred, slightly held back. */
.trust{ margin-top:16px; }
.trust img{ display:block; width:100%; max-width:270px; height:auto; margin:0 auto; opacity:.72; }

/* ==========================================================================
   Guarantee certificate
   Inline SVG, not an <img> — inline is what lets it inherit the handwriting
   webfont below AND lets a script write the buyer's name into it. Both were
   impossible with the file-based version this replaces.
   ========================================================================== */
.cert{ display:block; width:100%; max-width:420px; margin:0 auto; height:auto;
  border-radius:6px; box-shadow:0 1px 2px rgba(22,18,31,.05), 0 16px 40px -24px rgba(120,95,25,.55); }
.cert .cr{ font-family:Georgia,'Times New Roman',Times,serif; }
.cert .cs{ font-family:Georgia,'Times New Roman',Times,serif; font-weight:700; letter-spacing:2.6px; }
.cert .hand{ font-family:'Great Vibes','Snell Roundhand','Apple Chancery',cursive; }
/* The seal's bottom line. `.cs` tracking is 2.6px, which pushed "MONEY BACK"
   past the inner ring — the chord there is only ±51.8 of the 72 radius. */
.cert .sm{ letter-spacing:1.6px; }

/* ==========================================================================
   Footers — Adam's arrangement. A long dead space above them so the footer is
   not the second thing a buyer sees, then the links.
   ========================================================================== */
.foot-oto{ text-align:center; padding:500px 16px 150px; font-size:12px; line-height:1.5; }
.foot-oto a{ color:#7c8696; text-decoration:underline; text-underline-offset:2px; font-weight:500; }

.foot-full{ padding:340px 16px 120px; text-align:center; }
.foot-full .legal{ font-size:13px; line-height:2; color:var(--ink-3); }
.foot-full .legal a{ color:#7c8696; text-decoration:underline; text-underline-offset:2px; }
.foot-full .disc{ display:block; max-width:680px; margin:22px auto 0; font-size:11.5px; line-height:1.65; color:#9a95a6; text-align:left; }
.foot-full .disc a{ color:#8b8697; }


/* ==========================================================================
   .offer-block — everything below the video, in one container.
   VTurb reveals this at a timecode, so it must have no margins of its own:
   a collapsing margin on a hidden element leaves a gap under the player before
   the offer appears, and a jump when it does.
   ========================================================================== */
.offer-block{ margin:0; padding:0; }
.offer-block > *:first-child{ margin-top:0; }
.offer-block > *:last-child{ margin-bottom:0; }

/* ==========================================================================
   Seat counter — it has to read as draining under pressure, not as a printed
   number. Four things move: the bar creeps down continuously between whole
   seats, a shimmer crosses it, the number slams in when it drops, and a "-1"
   flies off it so the loss is something you SEE happen rather than notice
   afterwards. Under ten it escalates into a warning.
   ========================================================================== */
@keyframes seat-tick{
  0%  { transform:translateY(-18px) scale(1.3); opacity:0; }
  55% { transform:none; opacity:1; }
  100%{ transform:none; opacity:1; }
}
.seats .n.tick{ animation:seat-tick .5s cubic-bezier(.2,1.45,.4,1) both; }

@keyframes seat-throb{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }

@keyframes seat-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.25; transform:scale(.72); } }
.seats .live .dot{ animation:seat-pulse 1.1s ease-in-out infinite; }

/* A seat going: its block swells red for an instant, then drains. */
@keyframes pip-out{
  0%  { background:#e0231a; transform:scale(1); }
  35% { background:#ff2d20; transform:scale(1.3); }
  100%{ background:#f2d9d6; transform:scale(1); }
}

/* The "-1" that flies off the number when a seat goes. */
@keyframes seat-minus{
  0%  { opacity:0; transform:translate(0,4px) scale(.8); }
  22% { opacity:1; transform:translate(0,-6px) scale(1); }
  100%{ opacity:0; transform:translate(0,-46px) scale(1); }
}
.seats .minus{
  position:absolute; left:50%; top:0; margin-left:36px;
  font-family:var(--display); font-weight:800; font-size:22px; color:#c8102e;
  pointer-events:none; animation:seat-minus 1.5s ease-out forwards;
}

/* One flash across the box, so a drop registers even peripherally. */
@keyframes seat-flash{ 0%,100%{ box-shadow:0 0 0 0 rgba(200,16,46,0); } 30%{ box-shadow:0 0 0 7px rgba(200,16,46,.2); } }
.seats.flash{ animation:seat-flash .7s ease-out; }

@media (prefers-reduced-motion: reduce){
  .seats .n.tick, .seats.low .n, .seats .live .dot, .seats.flash{ animation:none; }
  .seats .minus{ display:none; }
  .seats .pips i.going{ animation:none; }
}
}