/* ==========================================================================
   Closing More Clients Sales Workshop — business owners (v2)
   Art direction: PAPER & PHONE. An owner's day is printed paper (bills, receipts, tickets)
   and one phone screen (the chat list where sales go quiet). Words are set like a front page:
   a heavy serif for what is said, mono for what is printed, yellow highlighter for what matters.
   Mobile first. Motion is transform/opacity (plus two tiny dashed streams) and off under
   prefers-reduced-motion.
   ========================================================================== */

:root {
  --paper: #F3EEE3;
  --kraft: #E8E0CF;
  --white: #FFFEFA;
  --ink: #131210;
  --ink-2: #24221E;
  --wall: #E7DFD3;
  --text: #1B1A17;
  --muted: #615B50;
  --rule: rgba(19, 18, 16, .2);

  --hot: #F04E1B;
  --hot-deep: #B5360D;
  --hl: #FFE14D;
  --red: #C8281E;
  --green: #1C7C45;
  --wa: #25D366;
  --wa-head: #075E54;
  --wa-out: #D9FDD3;
  --wa-tick: #2B9BD8;
  --water: #2B8FD8;
  --calm: #E9EEE6;
  --calm-ink: #1E3327;

  --f-d: "Libre Franklin", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
  --f-s: Georgia, "Noto Serif", "Times New Roman", serif;
  --f-b: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --f-m: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --pad: 20px;
  --sec-y: 64px;
  --paper-shadow: 0 1px 1px rgba(19, 18, 16, .08), 0 14px 30px -14px rgba(19, 18, 16, .4);
}
@media (min-width: 760px) { :root { --pad: 36px; --sec-y: 112px; } }
@media (min-width: 1100px) { :root { --sec-y: 144px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 20px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 17.5px/1.6 var(--f-b);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
body.modal-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
strong, b { font-weight: 700; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--hot); outline-offset: 3px; }

.ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nw { white-space: nowrap; }
.center { text-align: center; margin-inline: auto; }
.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: #fff; color: var(--ink); padding: 10px 14px; font-weight: 700; }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--pad); }
.wrap--mid { max-width: 860px; }
.wrap--chat { max-width: 640px; }

/* Reading progress: a hairline, so a long page never feels endless */
.readbar { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 70; pointer-events: none; }
.readbar i { display: block; height: 100%; background: var(--hot); transform: scaleX(0); transform-origin: left; }

/* ---------- Sections ---------- */
.sec { position: relative; padding-block: var(--sec-y); background: var(--paper); }
.sec--kraft { background: var(--kraft); }
.sec--white { background: var(--white); }
.sec--ink { background: var(--ink); color: #fff; }
.sec--calm { background: var(--calm); color: var(--calm-ink); }
/* A pinked paper edge where one sheet ends and the next begins */
.torn::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 11px; z-index: 1;
  background:
    linear-gradient(135deg, var(--above) 8px, transparent 0) 0 0 / 16px 11px repeat-x,
    linear-gradient(225deg, var(--above) 8px, transparent 0) 0 0 / 16px 11px repeat-x;
}

/* ---------- Type ---------- */
.kick { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font: 700 11px/1.3 var(--f-m); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.kick::before { content: ""; flex: none; width: 26px; height: 2px; background: currentColor; }
.kick .ic { font-size: 13px; color: var(--hl); }
.kick--light { color: rgba(255, 255, 255, .62); }
.kick--center { justify-content: center; }

.h2 {
  font: 900 clamp(35px, 9.6vw, 60px)/1 var(--f-d);
  font-optical-sizing: auto;
  letter-spacing: -.02em;
  max-width: 13em;
  text-wrap: balance;
}
.h2--xl { font-size: clamp(35px, 9.6vw, 76px); max-width: 14em; }
.h2.center { max-width: 13em; }
.lead {
  margin-top: 20px; padding-left: 14px; border-left: 4px solid var(--hot);
  font: 600 clamp(20px, 5.4vw, 28px)/1.28 var(--f-d);
  letter-spacing: -.012em; max-width: 22em; text-wrap: pretty;
}
.lead--light { color: rgba(255, 255, 255, .9); }
.hot { color: var(--hot); }

/* Highlighter: one swipe per headline, on the words that carry the point */
.hl {
  background: linear-gradient(100deg, rgba(255, 225, 77, 0) 0, var(--hl) 3%, var(--hl) 96%, rgba(255, 225, 77, 0) 100%) no-repeat 0 62% / 100% 74%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding-inline: .1em; margin-inline: -.06em;
}
.hl--red { background-image: linear-gradient(100deg, rgba(200, 40, 30, 0) 0, rgba(200, 40, 30, .26) 3%, rgba(200, 40, 30, .26) 96%, rgba(200, 40, 30, 0) 100%); }
.sec--ink .hl { color: var(--ink); }

.bigline {
  margin: 64px auto 0; max-width: 15em; text-align: center;
  font: 900 clamp(29px, 7.8vw, 52px)/1.05 var(--f-d); letter-spacing: -.02em; text-wrap: balance;
}
.bigline--light { color: #fff; }
.link { color: var(--hot-deep); font-weight: 700; text-underline-offset: 3px; display: inline-flex; align-items: center; gap: 4px; }

/* ---------- Buttons: flat, heavy, no glow ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 58px; padding: 0 26px;
  border: 0; border-bottom: 4px solid #9C2C09; border-radius: 10px;
  background: var(--hot); color: #14110E;
  font: 700 17.5px/1.15 var(--f-b); letter-spacing: -.01em;
  text-decoration: none; text-align: center;
  transition: transform .1s ease, border-bottom-width .1s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn .ic { width: 1.15em; height: 1.15em; stroke-width: 2.8; transition: transform .2s ease; }
@media (hover: hover) { .btn:hover { background: #FF5B26; } .btn:hover .ic { transform: translateX(5px); } }
.btn:active { transform: translateY(3px); border-bottom-width: 1px; }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.sec--ink .btn:focus-visible, .sticky .btn:focus-visible { outline-color: #fff; }
.btn--xl { min-height: 66px; font-size: 20px; font-weight: 800; padding-inline: 30px; width: 100%; }
.btn--sm { min-height: 44px; padding: 0 16px; font-size: 15px; border-bottom-width: 3px; border-radius: 8px; white-space: nowrap; }
.btn--block { width: 100%; }
.btn--max { min-height: 72px; padding: 14px 20px; font-size: clamp(18px, 4.9vw, 22px); line-height: 1.18; }
@media (min-width: 760px) { .btn--xl { width: auto; } .btn--block, .btn--max { width: 100%; } }

.cta-wrap { margin-top: 26px; }
.cta-wrap--center { text-align: center; margin-top: 44px; }
.micro { margin-top: 12px; font: 500 13px/1.4 var(--f-b); color: var(--muted); }
.micro i, .dateline i, .sticky i { font-style: normal; opacity: .45; margin-inline: 2px; }
.sec--ink .micro { color: rgba(255, 255, 255, .66); }
.micro__star { margin-right: 1px; color: #E9A100; }
.assure__rated { gap: 4px !important; }
.assure__rated .micro__star { font-size: 14px; }

/* ---------- Review notes (only with ?review=1) ---------- */
.rv, [data-rv-block] { display: none !important; }
.is-review .rv {
  display: block !important; margin: 14px 0 0; padding: 8px 12px;
  background: #FFF3BF; color: #513C00; border: 1.5px dashed #C9A227;
  font: 600 12.5px/1.45 var(--f-m); text-align: left; max-width: none;
}
.is-review .rv::before { content: "REVIEW  "; font-weight: 800; }
.is-review [data-rv-block] { display: block !important; outline: 2px dashed #C9A227; outline-offset: 3px; }
.is-review .qa__item--rv { display: grid !important; }

/* ---------- Scroll reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   1. HERO — the top fold. Built for a thumb and a three-second glance:
   who it's for, their problem in their words, the story in four beats, three ticks, one button.
   Aaron stands on the to-scale bar; the big number crosses in front of him.
   ========================================================================== */
.hero { background: var(--paper); overflow: hidden; }
.ticker { padding: 8px 6px; background: var(--ink); color: #fff; font: 700 clamp(7.8px, 2.42vw, 10.5px)/1.5 var(--f-m); letter-spacing: .06em; white-space: nowrap; text-transform: uppercase; text-align: center; }
.ticker i { font-style: normal; opacity: .45; margin-inline: 2px; }
.live-dot { position: relative; display: inline-block; width: 8px; height: 8px; margin-right: 9px; vertical-align: .02em; border-radius: 50%; background: #FF3B3B; }
.live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid #FF3B3B; opacity: 0; animation: ping 1.8s ease-out infinite; }
@keyframes ping { 0% { transform: scale(.5); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }

.mast { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0 9px; border-bottom: 3px solid var(--ink); }
.mast__brand { display: flex; align-items: center; gap: 9px; line-height: 1; }
.mast__brand b { font: 900 clamp(14px, 4.35vw, 17px)/1.05 var(--f-d); letter-spacing: -.02em; white-space: nowrap; }
.mast__brand span { padding: 4px 7px 3px; background: var(--ink); color: #fff; font: 700 9px/1 var(--f-m); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.mast__brand--foot { flex-direction: column; align-items: flex-start; gap: 6px; }
.mast__brand--foot span { background: rgba(255, 255, 255, .14); }
.mast__cta { display: none; }
.hero .mast__by { display: none; }
.mast__by { font-size: 12.5px; line-height: 1.2; color: var(--muted); }
.mast__by b { color: var(--text); }

.hero__copy { --art-h: min(70vw, 300px); }
.hero__stage { position: relative; }
.hero__art { position: absolute; z-index: 0; right: calc(var(--pad) * -1); bottom: calc(var(--below, 88px)); width: calc(var(--art-h) * .74); height: var(--art-h); pointer-events: none; }
.hero__art::before { content: ""; position: absolute; right: 0; left: 20%; top: 8%; bottom: 19%; background: var(--hot); transform-origin: bottom; }
.hero__art img { position: absolute; right: 0; bottom: 0; height: 100%; width: auto; max-width: none; }
.hero__art em { position: absolute; right: 0; top: 8%; padding: 5px 8px 5px 9px; background: var(--ink); color: #fff; font: 700 9px/1 var(--f-m); font-style: normal; letter-spacing: .16em; text-transform: uppercase; }
.js .hero__art::before { animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; }
.js .hero__art img { animation: stand .6s cubic-bezier(.2, .8, .2, 1) .15s both; }
@keyframes rise { from { transform: scaleY(0); } }
@keyframes stand { from { opacity: 0; transform: translateY(14px); } }

.callout { position: relative; z-index: 1; display: inline-block; margin-top: 13px; padding: 5px 9px 4px; background: var(--hl); font: 800 10.5px/1 var(--f-m); letter-spacing: .14em; text-transform: uppercase; }
.prehead { position: relative; z-index: 1; margin-top: 9px; max-width: 46%; font: 700 clamp(16px, 4.5vw, 19px)/1.22 var(--f-d); letter-spacing: -.012em; color: var(--text); }

.h1 { position: relative; z-index: 1; margin-top: 11px; font: 900 clamp(26px, 8.1vw, 58px)/1.02 var(--f-d); letter-spacing: -.022em; }
.h1__line, .h1__me { display: block; }
.h1 > .h1__line:first-child, .h1__me { -webkit-text-stroke: 7px var(--paper); paint-order: stroke fill; }
.h1__me { color: #8C8475; white-space: nowrap; font-size: .9em; }
.h1__with { display: flex; align-items: center; gap: 8px; font-size: clamp(17px, 5vw, 26px); font-weight: 800; letter-spacing: -.012em; }
.h1__with--me { margin: 3px 0 10px; }
.h1__with--me i { flex: none; width: calc((100% + var(--pad)) * .0263); height: 10px; background: #8C8475; transform-origin: left; transition: transform .35s ease-out; }
.h1__him { display: block; position: relative; z-index: 2; margin-left: -.03em; font-size: clamp(46px, 14.6vw, 124px); line-height: .92; letter-spacing: -.04em; color: var(--hot); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
/* The two marks are drawn to scale: 20,000 / 760,000 = 2.63% */
.h1__bar { display: block; position: relative; z-index: 1; height: 10px; margin-top: 2px; width: calc(100% + var(--pad)); background: var(--hot); transform-origin: left; transition: transform 1.3s cubic-bezier(.2, .8, .2, 1) .3s; }
.js .h1:not(.is-in) .h1__bar, .js .h1:not(.is-in) .h1__with--me i { transform: scaleX(0); }
.h1__with--him { justify-content: space-between; margin-top: 6px; }
.h1__with--him em { font: 700 9px/1 var(--f-m); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.h1__twist { margin-top: 8px; font-size: clamp(34px, 9.8vw, 68px); letter-spacing: -.028em; }

.hero__sub { margin-top: 13px; font-size: 16.5px; line-height: 1.42; max-width: 30em; }
.hero__learn { margin-top: 9px; display: grid; gap: 6px; }
.hero__learn li { display: flex; align-items: flex-start; gap: 9px; font: 600 15.5px/1.3 var(--f-b); }
.hero__learn .ic { flex: none; width: 20px; height: 20px; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--ink); color: var(--hl); stroke-width: 3.6; }
.hero__learn strong { font-weight: 700; white-space: nowrap; }

/* Button, reassurance and countdown: one centred unit */
.hero__act { margin-top: 15px; text-align: center; }
.hero__cta { margin-top: 0; }
.assure { margin-top: 13px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; }
.assure li { display: inline-flex; align-items: center; gap: 5px; font: 600 13.5px/1.2 var(--f-b); color: var(--text); white-space: nowrap; }
.assure .ic { color: var(--green); stroke-width: 3.4; font-size: 14px; }
.sec--ink .assure li { color: rgba(255, 255, 255, .9); }
.sec--ink .assure .ic { color: var(--hl); }

.cd { margin-top: 20px; display: grid; justify-items: center; gap: 9px; font-family: var(--f-m); }
.cd__label { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.cd__label::before, .cd__label::after { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.cd__units { display: inline-flex; gap: 7px; }
.cd__units > span { display: grid; justify-items: center; min-width: 62px; padding: 9px 6px 7px; background: var(--ink); color: #fff; }
.cd__units b { font-size: 27px; font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.cd__units i { margin-top: 5px; font: 700 8.5px/1 var(--f-m); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.cd--light .cd__label { color: rgba(255, 255, 255, .7); }
.cd--light .cd__units > span { background: #F7F2E6; color: var(--ink); }
.cd--light .cd__units i { color: var(--muted); }

/* Proof, moving on its own, edge to edge */
.proofbar { margin-top: 26px; background: var(--white); border-block: 3px solid var(--ink); overflow: hidden; }
.proofbar__track { display: flex; width: max-content; animation: slide 30s linear infinite; }
.proofbar__group { flex: none; display: flex; align-items: center; min-width: 100vw; justify-content: space-around; }
.proofbar__group li { flex: none; display: flex; align-items: center; gap: 10px; padding: 12px 22px; white-space: nowrap; }
.proofbar__group li + li { border-left: 1px solid var(--rule); }
.proofbar__group li:first-child { border-left: 1px solid var(--rule); }
.proofbar .brand-logo { width: 30px; height: 30px; }
.proofbar img { width: 62px; height: 42px; object-fit: cover; }
.proofbar p { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 7px; justify-content: start; }
.proofbar b { font: 900 21px/1.05 var(--f-d); letter-spacing: -.02em; }
.proofbar .stars { font-size: 14px; }
.proofbar small { grid-column: 1 / -1; font: 600 12.5px/1.25 var(--f-b); color: var(--muted); }
.proofbar li:has(img) p { grid-template-columns: auto; }
.proofbar li:has(img) small { order: -1; font: 700 9.5px/1.3 var(--f-m); letter-spacing: .14em; text-transform: uppercase; }
.proofbar li:has(img) b { font-size: 17px; }
@keyframes slide { to { transform: translateX(-50%); } }
@media (hover: hover) { .proofbar:hover .proofbar__track { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) {
  .proofbar__track { width: auto; }
  .proofbar__group { min-width: 0; flex-wrap: wrap; justify-content: center; }
  .proofbar__group[aria-hidden="true"] { display: none; }
}

.cover { display: none; }
@media (min-width: 600px) {
  .hero__copy { --art-h: min(60vw, 500px); }
  .prehead { font-size: 23px; max-width: 48%; }
  .callout { font-size: 12px; margin-top: 26px; }
  .hero__art em { font-size: 11px; padding: 7px 11px; }
  .hero__learn li { font-size: 18px; }
  .hero__sub { font-size: 18.5px; }
  .hero__act { max-width: 520px; margin-inline: auto; }
}
@media (min-width: 1000px) {
  .ticker { font-size: 11.5px; padding: 10px 14px; }
  .mast { padding: 14px 0 13px; gap: 22px; }
  .mast__brand { margin-right: auto; gap: 12px; }
  .mast__brand b { font-size: 23px; }
  .mast__brand span { font-size: 10.5px; padding: 5px 9px 4px; }
  .hero .mast__by { display: block; font-size: 14px; }
  .mast__cta { display: inline-flex; }
  .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; align-items: center; padding-top: 6px; }
  .hero__art { display: none; }
  .callout { font-size: 12.5px; margin-top: 20px; padding: 7px 12px 6px; }
  .prehead { font-size: 28px; max-width: none; margin-top: 10px; }
  .h1 { font-size: 56px; margin-top: 16px; }
  .h1 > .h1__line:first-child, .h1__me { -webkit-text-stroke: 0; }
  .h1__with { font-size: 28px; }
  .h1__him { font-size: clamp(72px, 6.75vw, 98px); }
  .h1__bar { width: 100%; }
  .h1__with--me i { width: 2.63%; }
  .h1__with--him em { font-size: 10.5px; }
  .hero__sub { font-size: 20px; margin-top: 18px; }
  .hero__learn { margin-top: 14px; gap: 10px; }
  .hero__learn li { font-size: 19.5px; }
  .hero__learn .ic { width: 24px; height: 24px; padding: 5px; }
  .hero__act { margin: 22px 0 0; max-width: 470px; }
  .hero__act .btn--xl { width: 100%; }
  .cover { display: block; }
  .cover__frame { position: relative; aspect-ratio: 4 / 5.1; }
  .cover__frame::before { content: ""; position: absolute; inset: 11% 0 0 0; background: var(--hot); }
  .cover__frame img { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); }
  .cover__cap { padding: 13px 16px 15px; background: var(--ink); color: #fff; }
  .cover__cap b { display: block; font: 900 24px/1.1 var(--f-d); letter-spacing: -.02em; }
  .cover__cap span { display: block; margin-top: 5px; font: 700 10.5px/1.45 var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
  .proofbar { margin-top: 44px; }
  .proofbar__group li { padding: 16px 30px; gap: 13px; }
  .proofbar b { font-size: 25px; }
  .proofbar li:has(img) b { font-size: 20px; }
  .proofbar small { font-size: 13.5px; }
  .proofbar img { width: 84px; height: 54px; }
  .proofbar .brand-logo { width: 36px; height: 36px; }
}

/* ---------- In 10 seconds ---------- */
.glance-sec { background: var(--paper); padding: 30px 0 12px; }
.glance { background: var(--white); border: 2px solid var(--ink); border-top-width: 0; }
.glance__tab { padding: 9px 14px; background: var(--ink); color: #fff; font: 700 11px/1 var(--f-m); letter-spacing: .18em; text-transform: uppercase; }
.glance__rows { display: grid; grid-template-columns: 1fr 1fr; }
.glance__rows > div { padding: 12px 14px 14px; border-top: 1px solid var(--rule); }
.glance__rows > div:nth-child(-n+2) { border-top: 0; }
.glance__rows > div:nth-child(even) { border-left: 1px solid var(--rule); }
.glance__rows dt { padding-bottom: 5px; font: 700 10px/1.35 var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.glance__rows dd { font-size: 15.5px; line-height: 1.36; }
.glance__rows .link .ic { animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(-1px); } 50% { transform: translateY(3px); } }
.stars { display: inline-flex; gap: 1px; color: #E9A100; font-size: 15px; }
.stars--tp { color: #00B67A; }
@media (min-width: 900px) {
  .glance-sec { padding-top: 56px; }
  .glance__rows { grid-template-columns: 1fr 1.15fr 1fr 1.15fr; }
  .glance__rows > div { padding: 22px 20px 24px; border-top: 0; border-left: 1px solid var(--rule); }
  .glance__rows > div:first-child { border-left: 0; }
  .glance__rows dt { padding: 0 0 8px; }
  .glance__rows dd { font-size: 17px; }
}

/* ==========================================================================
   2. THE CHAT LIST
   ========================================================================== */
.inbox-sec { padding-top: 60px; padding-bottom: 0; }
.inbox { margin: 28px calc(var(--pad) * -1) 0; background: #fff; border-top: 1px solid var(--rule); }
.inbox__bar { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px 12px; background: var(--wa-head); color: #fff; }
.inbox__bar b { font: 600 20px/1 var(--f-b); letter-spacing: -.01em; }
.inbox__pill { padding: 5px 10px; border-radius: 99px; background: rgba(255, 255, 255, .16); font: 700 10px/1 var(--f-m); letter-spacing: .12em; text-transform: uppercase; }
.tick {
  width: 100%; display: flex; align-items: center; gap: 12px;
  min-height: 74px; padding: 11px 16px;
  background: #fff; border: 0; border-bottom: 1px solid #ECE8E0;
  text-align: left; transition: background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.tick__box { flex: none; width: 27px; height: 27px; border-radius: 50%; border: 2px solid #B4AEA2; display: grid; place-items: center; font-size: 16px; color: #fff; transition: background .15s ease, border-color .15s ease, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.tick__box .ic { stroke-width: 3.4; opacity: 0; transform: scale(.3); transition: opacity .12s ease, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.tick__ava { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #C9D3D9; color: #fff; font-size: 30px; overflow: hidden; }
.tick__ava .ic { margin-top: 6px; }
.tick__ava--2 { background: #D9C9B8; } .tick__ava--3 { background: #BFD0C2; } .tick__ava--4 { background: #D3C6DA; }
.tick__ava--5 { background: #C4CCDD; } .tick__ava--6 { background: #E1CFA6; } .tick__ava--7 { background: #CDCDCD; }
.tick__main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tick__who { font: 600 12.5px/1.2 var(--f-b); color: #667781; }
.tick__text { font: 600 16.5px/1.32 var(--f-b); color: var(--text); }
.tick__aside { color: var(--muted); font-weight: 500; }
.bluetick { color: var(--wa-tick); white-space: nowrap; }
.bluetick .ic { display: inline-block; width: 1.4em; height: .9em; vertical-align: -.05em; stroke-width: 2.4; }
@media (hover: hover) { .tick:hover { background: #F7F5F0; } }
.tick:focus-visible { outline-offset: -3px; }
.tick[aria-checked="true"] { background: #EAF7EE; }
/* Until the first tap, the first circle breathes: this list is meant to be touched */
.chats:not(.is-touched) li:first-child .tick__box { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .0); border-color: #B4AEA2; } 50% { box-shadow: 0 0 0 7px rgba(37, 211, 102, .22); border-color: var(--wa); } }
.tick[aria-checked="true"] .tick__box { background: var(--wa); border-color: var(--wa); transform: scale(1.08); }
.tick[aria-checked="true"] .tick__box .ic { opacity: 1; transform: none; }

.verdict { margin-inline: calc(var(--pad) * -1); padding: 26px var(--pad) 30px; text-align: center; background: var(--paper); transition: background .3s ease, color .3s ease; }
.verdict__count { margin-bottom: 8px; font: italic 900 30px/1 var(--f-d); color: var(--hot-deep); }
.verdict__line { font: 900 clamp(22px, 5.9vw, 30px)/1.12 var(--f-d); letter-spacing: -.02em; text-wrap: balance; max-width: 17em; margin-inline: auto; }
.verdict__line strong { font-weight: 900; }
.verdict__priv { margin-top: 12px; font: 500 11px/1.4 var(--f-m); letter-spacing: .04em; color: var(--muted); }
.verdict.is-hit { background: var(--ink); color: #fff; }
.verdict.is-hit .verdict__count { color: var(--hl); }
.verdict.is-hit .verdict__priv { color: rgba(255, 255, 255, .55); }
.verdict.is-bump .verdict__count { animation: bump .35s ease; }
@keyframes bump { 40% { transform: scale(1.12); } }
@media (min-width: 900px) {
  .inbox-sec { padding-bottom: var(--sec-y); }
  .inbox-sec__grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; grid-template-areas: "head inbox" "verdict inbox"; gap: 0 80px; align-items: start; }
  .inbox-sec__head { grid-area: head; padding-top: 30px; }
  .inbox { grid-area: inbox; margin: 0; border: 10px solid var(--ink); border-radius: 38px; overflow: hidden; box-shadow: var(--paper-shadow); }
  .verdict { grid-area: verdict; margin: 40px 0 0; padding: 26px 28px 28px; text-align: left; background: var(--kraft); }
  .verdict__line { margin-inline: 0; }
}

/* ==========================================================================
   3. THE BILL
   ========================================================================== */
.bill-head { display: grid; gap: 32px; }
.twobills { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.slipbill__paper { position: relative; height: 128px; padding: 14px 12px; font-family: var(--f-m); }
.slipbill__paper b { display: block; font-size: 15px; font-weight: 800; letter-spacing: .12em; }
.slipbill__paper i { display: block; height: 6px; margin-top: 10px; background: #DEDAD0; }
.slipbill__paper i:nth-of-type(2) { width: 76%; } .slipbill__paper i:nth-of-type(3) { width: 58%; }
.slipbill__paper span { position: absolute; right: 8px; bottom: 10px; padding: 3px 6px; border: 2px solid var(--green); color: var(--green); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; transform: rotate(-8deg); }
.slipbill--seen .slipbill__paper { background: #fff; box-shadow: var(--paper-shadow); }
.slipbill--ghost .slipbill__paper { border: 2px dashed rgba(19, 18, 16, .34); color: rgba(19, 18, 16, .3); }
.slipbill--ghost .slipbill__paper b { font: 900 34px/.8 var(--f-d); letter-spacing: 0; }
.slipbill--ghost .slipbill__paper i { background: none; border-top: 2px dashed rgba(19, 18, 16, .2); height: 0; margin-top: 14px; }
.slipbill figcaption { margin-top: 12px; font-size: 16.5px; line-height: 1.42; }

.bills { margin-top: 48px; display: grid; gap: 30px; }
.printer { position: relative; }
.printer__slot { position: relative; z-index: 2; height: 16px; border-radius: 8px; background: var(--ink); box-shadow: inset 0 -5px 0 rgba(255, 255, 255, .12); }
.receipt, .calc { position: relative; background: #fff; color: #17171A; font-family: var(--f-m); box-shadow: var(--paper-shadow); }
.receipt { margin: -7px 14px 0; padding: 28px 20px 30px; }
.receipt::after, .calc::after, .calc::before {
  content: ""; position: absolute; left: 0; right: 0; height: 10px;
  background: linear-gradient(135deg, #fff 5px, transparent 0) 0 0 / 10px 10px repeat-x, linear-gradient(225deg, #fff 5px, transparent 0) 0 0 / 10px 10px repeat-x;
}
.receipt::after, .calc::after { bottom: -10px; }
.calc::before { top: -10px; transform: scaleY(-1); }
/* It prints: the invisible bill becomes visible */
.js .printer:not(.is-in) .receipt { clip-path: inset(0 0 100% 0); }
.printer.is-in .receipt { clip-path: inset(0 0 -14px 0); transition: clip-path 1.9s steps(16, end); }
.receipt__tag { display: inline-block; padding: 3px 9px; border: 1.5px solid currentColor; font: 700 11px/1.2 var(--f-m); letter-spacing: .16em; text-transform: uppercase; }
.receipt__title { margin-top: 14px; font: 700 17px/1.35 var(--f-m); letter-spacing: -.03em; }
.receipt__rows { margin-top: 14px; border-top: 1.5px dashed #9A9A9A; }
.receipt__rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1.5px dashed #BDBDBD; font-size: 14px; letter-spacing: -.02em; }
.receipt__rows b { font-size: 19px; }
.receipt__rows .is-loss b { color: var(--red); }
.receipt__rows .is-kept b { color: var(--green); }
.receipt__math { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; padding: 9px 11px; background: #F0EDE4; font-size: 14px; letter-spacing: -.02em; }
.receipt__math b { font-size: 19px; white-space: nowrap; }
.receipt__lost { margin-top: 20px; font: 800 12.5px/1.3 var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.receipt__lost + .receipt__totals { margin-top: 8px; }
.receipt__totals small { flex-basis: 100%; text-align: right; font-size: 11px; letter-spacing: .02em; color: #6E6A61; }
.receipt__what { margin-top: 16px; font-size: 14px; line-height: 1.55; letter-spacing: -.02em; }
.receipt__totals { margin-top: 16px; border-top: 2.5px solid #17171A; }
.receipt__totals li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; padding-top: 10px; }
.receipt__totals b { margin-left: auto; }
.receipt__totals span { font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.receipt__totals b { font-size: 22px; letter-spacing: -.028em; }
.receipt__totals .is-big b { font-size: clamp(32px, 9.4vw, 46px); font-weight: 800; color: var(--red); line-height: 1; }
.receipt__stamp { display: inline-block; margin-top: 20px; padding: 7px 12px; border: 2.5px solid var(--red); color: var(--red); font: 700 12.5px/1.35 var(--f-m); letter-spacing: .05em; text-transform: uppercase; transform: rotate(-3deg); }
.receipt__stamp span { display: block; font-weight: 800; font-size: 15.5px; }

.calc { margin: 0 14px; padding: 24px 20px 26px; }
.calc__field { margin-top: 20px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: end; }
.calc__field label { font: 600 15.5px/1.35 var(--f-b); }
.calc__val { font: 800 24px/1 var(--f-m); letter-spacing: -.05em; text-align: right; min-width: 4.6ch; }
.range, .range__ends { grid-column: 1 / -1; }
.range__ends { display: flex; justify-content: space-between; font-size: 10.5px; color: #77736A; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 42px; margin: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.range::-webkit-slider-runnable-track { height: 6px; background: linear-gradient(to right, var(--ink) var(--p, 0%), #D9D4C8 var(--p, 0%)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 32px; height: 32px; margin-top: -13px; border-radius: 50%; background: var(--hot); border: 3px solid var(--ink); }
.range::-moz-range-track { height: 6px; background: #D9D4C8; }
.range::-moz-range-progress { height: 6px; background: var(--ink); }
.range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--hot); border: 3px solid var(--ink); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(240, 78, 27, .35); }
.calc__out { margin-top: 20px; padding-top: 18px; border-top: 2.5px solid #17171A; text-align: center; }
.calc__if { font: 500 15px/1.4 var(--f-b); }
.tenrow { display: flex; justify-content: center; gap: 5px; margin: 12px 0 12px; color: #D5CFC1; }
.tenrow i { width: 18px; height: 24px; background: radial-gradient(circle at 50% 26%, currentColor 0 5.2px, transparent 5.8px), radial-gradient(9px 10px at 50% 100%, currentColor 97%, transparent); }
.tenrow i.on { color: var(--hot); animation: nod 1.8s ease-in-out infinite; }
@keyframes nod { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.calc__heads { font: 500 15px/1.4 var(--f-b); text-wrap: balance; }
.calc__heads b { font-weight: 800; white-space: nowrap; }
.calc__month { margin-top: 12px; font: 500 15px/1.3 var(--f-b); }
.calc__month b { display: block; margin: 2px 0; font: 800 clamp(40px, 11.6vw, 54px)/1.02 var(--f-m); letter-spacing: -.07em; }
.calc__year { margin-top: 8px; font: 500 15px/1.3 var(--f-b); }
.calc__year b { font: 800 23px/1 var(--f-m); letter-spacing: -.05em; color: var(--red); }
.calc__fine { margin-top: 14px; font: 500 12px/1.4 var(--f-b); color: #77736A; }
.bridge { margin: 52px auto 0; max-width: 20em; text-align: center; font: italic 500 clamp(21px, 5.6vw, 28px)/1.3 var(--f-d); }
.bridge strong { font-weight: 800; }
.bridge .ic, .objection__reply .ic { display: block; margin: 14px auto 0; font-size: 28px; color: var(--hot-deep); animation: bob 1.6s ease-in-out infinite; }
@media (min-width: 900px) {
  .bill-head { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 72px; align-items: end; }
  .slipbill__paper { height: 150px; }
  .bills { grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; margin-top: 72px; max-width: 940px; margin-inline: auto; }
  .calc { margin-top: 16px; }
}

/* ==========================================================================
   4. THE STORY
   ========================================================================== */
.story .h2 { color: #fff; }
.story__sum { margin-top: 16px; font: 700 12px/1.7 var(--f-m); letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.story__sum i { font-style: normal; margin-inline: 3px; color: rgba(255, 255, 255, .4); }
.story__sum b { color: var(--hot); }
.story .payoff + .cta-wrap { margin-top: 34px; }
.acts { margin-top: 40px; display: grid; gap: 30px; max-width: 640px; }
.act p, .tbeat p { font: 400 clamp(20px, 5.3vw, 25px)/1.42 var(--f-d); color: rgba(255, 255, 255, .88); }
.act p + p { margin-top: 10px; }
.act strong, .tbeat strong { color: #fff; font-weight: 800; }
.num { white-space: nowrap; }
.polaroid { float: right; width: 122px; margin: 0 0 8px 16px; padding: 6px 6px 5px; background: #fff; transform: rotate(3deg); box-shadow: 0 18px 30px -14px #000; }
.polaroid img { aspect-ratio: 1 / 1; object-fit: cover; object-position: 42% 40%; width: 100%; filter: saturate(.8); }
.polaroid figcaption { padding-top: 4px; text-align: center; font: italic 500 13px/1.2 var(--f-d); color: var(--ink); }
.said { display: inline-block; margin-top: 12px; max-width: 20em; padding: 13px 16px; border-radius: 4px 20px 20px 20px; font: 600 18px/1.4 var(--f-b); }
.said--her { background: #fff; color: var(--ink); }
.said--him { background: var(--hl); color: var(--ink); }
.said--you { background: var(--ink); color: #fff; border-radius: 20px 20px 4px 20px; font-size: 19px; }

.peak { margin-top: 64px; font: 900 clamp(30px, 8vw, 54px)/1.05 var(--f-d); letter-spacing: -.02em; }
.peak__num { display: block; margin: 4px 0 6px -.03em; font-size: clamp(44px, 14vw, 168px); line-height: .9; letter-spacing: -.04em; color: var(--hot); white-space: nowrap; }
.peak__sub { display: block; font-style: italic; }

/* The two receipts. One line = RM20,000 = my whole sale. Mine: 1 line, pinned. His: 38 lines, scrolled. */
.rc { margin-top: 52px; }
.rc__kick { font: 700 11px/1.3 var(--f-m); letter-spacing: .16em; text-transform: uppercase; color: var(--hl); }
.rc__rule { margin-top: 10px; font: 900 clamp(34px, 9.6vw, 64px)/1 var(--f-d); letter-spacing: -.024em; color: #fff; }
.rc__explain { margin-top: 12px; font-size: 19px; line-height: 1.42; color: rgba(255, 255, 255, .86); max-width: 24em; }
.rc__explain b { color: #fff; font-weight: 800; white-space: nowrap; }
.rc__explain .rc__hot { color: var(--hot); }
.rc__grid { margin-top: 26px; display: grid; grid-template-columns: 36% minmax(0, 1fr); gap: 14px; align-items: start; }
.rc__mine { position: sticky; top: 16px; z-index: 2; }
.rc__paper { position: relative; background: #fff; color: #17171A; font-family: var(--f-m); }
.rc__paper::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 9px; background: linear-gradient(135deg, #fff 4.5px, transparent 0) 0 0 / 9px 9px repeat-x, linear-gradient(225deg, #fff 4.5px, transparent 0) 0 0 / 9px 9px repeat-x; }
.rc__paper--mine { padding: 10px 9px 11px; box-shadow: 0 14px 26px -12px #000; }
.rc__paper--his { padding: 12px 12px 18px; }
.rc__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-bottom: 7px; border-bottom: 1.5px dashed #8E8E8E; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.rc__head em { font-style: normal; font-weight: 700; font-size: 8.5px; letter-spacing: .1em; color: #6B665B; }
.rc__line, .rc__end { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.rc__line { padding: 8px 0 7px; font-size: 10.5px; color: #6B665B; }
.rc__line b { font-size: 14px; font-weight: 800; letter-spacing: -.04em; color: #17171A; }
.rc__end { padding-top: 7px; border-top: 2.5px solid #17171A; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.rc__end b { font-size: 14px; font-weight: 800; letter-spacing: -.04em; }
.rc__cap { margin-top: 18px; font-size: 14px; line-height: 1.35; color: rgba(255, 255, 255, .78); }
.rc__cap b { color: #fff; }

.rc__lines li { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 8px; margin-inline: -12px; padding: 5px 12px 4px; border-bottom: 1px dashed #D2D2D2; }
.rc__lines span { font-size: 11px; font-weight: 700; color: #7A7568; white-space: nowrap; }
.rc__lines b { text-align: right; font-size: 15px; font-weight: 800; letter-spacing: -.04em; }
.rc__lines em { grid-column: 1 / -1; margin-top: 2px; font: 700 12.5px/1.25 var(--f-b); font-style: normal; }
.rc__lines .is-first { background: #ECE8DF; }
.rc__lines .is-first em { color: #5A554A; }
.rc__lines .is-first { padding-block: 8px 7px; }
.rc__lines .is-mark { padding-block: 10px 9px; background: var(--hot); border-bottom: 0; }
.rc__lines .is-mark span { color: #2A1206; }
.rc__lines .is-mark b { font-size: 19px; }
.rc__end--his { display: grid; grid-template-columns: auto 1fr; margin-top: 6px; padding-top: 12px; border-top: 3px solid #17171A; }
.rc__end--his span { align-self: center; font-size: 11px; }
.rc__end--his b { text-align: right; font-size: clamp(25px, 7.2vw, 40px); line-height: 1; color: var(--red); }
.rc__end--his em { grid-column: 1 / -1; margin-top: 6px; text-align: right; font-style: normal; font-size: 9.5px; color: #5A554A; }
.rc__end--his i { font-style: normal; opacity: .5; }

.rc__sum { margin-top: 40px; font: 900 clamp(24px, 6.6vw, 44px)/1.12 var(--f-d); letter-spacing: -.02em; }
.rc__sum span { display: block; }
.rc__sum-me { color: #A69F90; }
.rc__sum-him { color: var(--hot); }
.rc__sum-x { margin-top: 6px; color: #fff; }

.tbeats { margin-top: 64px; display: grid; gap: 40px; max-width: 640px; }
.tbeat p.tbeat__big { font: 900 clamp(32px, 8.6vw, 62px)/1.02 var(--f-d); letter-spacing: -.022em; color: #fff; }
.tbeat p.tbeat__big--hot { margin-top: 6px; font-style: italic; color: var(--hl); }
.paid { padding: 16px 18px; border: 1.5px dashed rgba(255, 255, 255, .4); }
.paid .num { color: var(--hl); font-weight: 900; font-size: 1.15em; }
.payoff { margin: 72px auto 0; max-width: 15em; text-align: center; font: 500 clamp(28px, 7.6vw, 54px)/1.08 var(--f-d); letter-spacing: -.02em; color: rgba(255, 255, 255, .92); text-wrap: balance; }
.payoff strong { font-weight: 900; color: #fff; }
@media (min-width: 900px) {
  .acts { margin-top: 64px; gap: 40px; }
  .polaroid { width: 170px; margin-left: 28px; }
  .polaroid figcaption { font-size: 16px; }
  .peak { margin-top: 96px; }
  .rc { margin-top: 80px; max-width: 880px; }
  .rc__explain { font-size: 23px; }
  .rc__grid { grid-template-columns: 300px minmax(0, 440px); gap: 64px; margin-top: 40px; }
  .rc__mine { top: 28px; }
  .rc__paper--mine { padding: 18px 18px 20px; }
  .rc__paper--his { padding: 20px 22px 26px; }
  .rc__head { font-size: 14px; padding-bottom: 11px; }
  .rc__head em { font-size: 10.5px; }
  .rc__line { font-size: 13px; padding: 12px 0 11px; }
  .rc__line b, .rc__end b { font-size: 20px; }
  .rc__end { font-size: 11.5px; padding-top: 11px; }
  .rc__cap { font-size: 18px; margin-top: 24px; }
  .rc__lines li { margin-inline: -22px; padding: 9px 22px 8px; }
  .rc__lines span { font-size: 13px; }
  .rc__lines b { font-size: 18px; }
  .rc__lines em { font-size: 14.5px; }
  .rc__lines .is-mark b { font-size: 24px; }
  .rc__end--his em { font-size: 11.5px; }
  .rc__end--his b { font-size: 44px; }
  .rc__end--his span { font-size: 13px; }
  .tbeats { margin-top: 96px; gap: 56px; }
  .payoff { margin-top: 120px; }
}

/* ==========================================================================
   5. THE SECRET
   ========================================================================== */
.shops { margin-top: 44px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 26px; align-items: start; --dot: 6px; --gap: 2px; }
.shop { display: grid; justify-items: start; }
.shop__name { padding: 4px 8px; background: var(--ink); color: #fff; font: 700 11px/1.2 var(--f-m); letter-spacing: .14em; text-transform: uppercase; }
.shop__ask, .shop__buy { font: 700 10.5px/1.3 var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.shop__ask { margin-top: 12px; }
.shop__ask b { display: block; font: 900 clamp(56px, 15.6vw, 128px)/.86 var(--f-d); letter-spacing: -.034em; color: var(--text); text-transform: none; }
.shop__dots { display: grid; grid-template-columns: repeat(var(--cols), var(--dot)); gap: var(--gap); margin: 16px 0 14px; }
.shop--a { --cols: 10; }
.shop--b { --cols: 20; }
.shop__dots i { width: var(--dot); height: var(--dot); border-radius: 50%; background: #CFC6B2; }
.shop__dots i.on { background: var(--hot); transition: background .3s ease var(--d, 0ms); }
.js .shop:not(.is-counted) .shop__dots i.on { background: #CFC6B2; }
.shop__buy b { display: block; font: 900 clamp(40px, 11vw, 72px)/.9 var(--f-d); letter-spacing: -.028em; color: var(--hot-deep); text-transform: none; }
.shop__rate { margin-top: 10px; padding: 5px 9px 4px; border: 2px solid var(--ink); font: 800 14px/1.2 var(--f-b); white-space: nowrap; }
.shop--a .shop__rate { background: var(--hl); }
.caption { margin-top: 30px; font-size: 19px; line-height: 1.45; max-width: 26em; }
.which { margin-top: 8px; font: italic 900 clamp(34px, 9.2vw, 64px)/1.02 var(--f-d); letter-spacing: -.022em; }
.pair { margin-top: 32px; display: grid; gap: 22px; max-width: 900px; }
.pair__item { padding-top: 14px; border-top: 4px solid var(--muted); font-size: 18.5px; line-height: 1.5; }
.pair__item::before { display: block; margin-bottom: 6px; font: 700 11px/1.2 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pair__item--b::before { content: "Shop B"; }
.pair__item--a { border-top-color: var(--hot); }
.pair__item--a::before { content: "Shop A"; color: var(--hot-deep); }
.objection { margin-top: 60px; text-align: center; }
.objection__reply { margin-top: 18px; font: italic 500 clamp(24px, 6.4vw, 36px)/1.2 var(--f-d); }
.objection__reply strong { font-weight: 900; }
@media (min-width: 760px) {
  .shops { --dot: 9px; --gap: 3px; gap: 0 56px; margin-top: 64px; }
  .pair { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (min-width: 1040px) { .shops { gap: 0 72px; } .shop--b { --cols: 40; } }

/* ==========================================================================
   6. THE LAPTOP
   ========================================================================== */
.laptop { margin-top: 40px; display: grid; gap: 36px; }
.steps3 { border-bottom: 1px solid var(--rule); }
.steps3 li { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: start; padding: 18px 0 20px; border-top: 1px solid var(--rule); }
.steps3__n { font: italic 900 56px/.82 var(--f-d); color: var(--hot); }
.steps3 p { font-size: 18.5px; line-height: 1.5; }

.phone { width: 100%; max-width: 372px; margin-inline: auto; border: 9px solid var(--ink); border-radius: 36px; overflow: hidden; background: var(--wall); box-shadow: var(--paper-shadow); }
.phone__bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--wa-head); color: #fff; }
.phone__bar b { display: block; font-size: 15.5px; line-height: 1.2; }
.phone__bar small { display: block; font-size: 12px; line-height: 1.3; color: rgba(255, 255, 255, .75); }
.phone__ava { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #A7B4BB; color: #fff; font-size: 25px; overflow: hidden; }
.phone__ava .ic { margin-top: 5px; }
.phone__body { display: flex; flex-direction: column; gap: 5px; padding: 12px 12px 18px; }
.phone__who { margin-top: 8px; font: 700 9.5px/1.2 var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: #7B7365; }
.phone__who--me { align-self: flex-end; }
.bub { position: relative; align-self: flex-start; max-width: 86%; padding: 9px 12px; border-radius: 4px 16px 16px 16px; background: #fff; font-size: 16.5px; line-height: 1.4; color: var(--ink); box-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
.bub--me { align-self: flex-end; border-radius: 16px 4px 16px 16px; background: var(--wa-out); }
.phone__done { align-self: center; margin-top: 16px; padding: 9px 13px; border-radius: 9px; background: #FFF3BD; color: #4A3E08; font-size: 14px; line-height: 1.35; text-align: center; box-shadow: 0 1px 0 rgba(0, 0, 0, .1); }
/* The chat plays in order, the way it happened */
.js [data-inview]:not(.is-in) .seq { opacity: 0; transform: translateY(10px); }
[data-inview].is-in .seq { transition: opacity .35s ease, transform .35s ease; transition-delay: calc(var(--i) * .6s + .2s); }
@media (min-width: 900px) { .laptop { grid-template-columns: minmax(0, 1fr) 372px; gap: 88px; align-items: start; margin-top: 64px; } .steps3 li { grid-template-columns: 76px 1fr; padding: 26px 0 28px; } .steps3__n { font-size: 84px; } .steps3 p { font-size: 20px; } }

.phone--dark { background: #0B141A; border-color: #2A2823; }
.phone--dark .phone__bar { background: #1F2C34; }
.phone--dark .phone__bar small { color: #8696A0; }
.phone--dark .phone__ava { background: #51616B; }
.phone--dark .phone__body { padding: 16px 12px 24px; gap: 8px; }
.phone--dark .bub { background: #202C33; color: #E9EDEF; box-shadow: none; }
.phone--dark .bub--me { background: #005C4B; }
.bub--redact { min-width: 170px; }
.bub--redact i { display: block; height: 8px; margin: 5px 0; border-radius: 4px; background: rgba(255, 255, 255, .3); }
.bub--redact i:nth-child(2) { width: 62%; }
.bub__meta { display: flex; justify-content: flex-end; margin-top: 4px; color: #53BDEB; font-size: 17px; }
.bub__meta .ic { width: 1.4em; height: .9em; }
.phone__gap { align-self: center; margin: 8px 0; padding: 5px 11px; border-radius: 8px; background: #182229; font: 500 10.5px/1 var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: #8696A0; }
.bub--locked { min-width: 236px; padding: 18px 14px; overflow: hidden; box-shadow: 0 0 0 2.5px var(--hl) !important; }
.bub--locked i { display: block; height: 9px; margin: 7px 0; border-radius: 4px; background: rgba(255, 255, 255, .5); filter: blur(3.5px); }
.bub--locked i:nth-child(2) { width: 88%; } .bub--locked i:nth-child(3) { width: 56%; }
.bub__lock { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 3px; background: rgba(0, 62, 51, .66); font: 700 15.5px/1.2 var(--f-b); color: #fff; text-align: center; }
.bub__lock .ic { font-size: 18px; color: var(--hl); margin-bottom: 2px; }
.bub__lock small { font-size: 12px; font-weight: 500; color: #CFE9E2; }

/* ==========================================================================
   7. THE 3 FIXES — three streams, one bucket
   ========================================================================== */
.pours { position: relative; margin-top: 48px; }
.pours__list { position: relative; display: grid; gap: 34px; padding-left: 74px; }
.pours__list::before {
  content: ""; position: absolute; left: 34px; top: 20px; bottom: -70px; width: 8px; border-radius: 4px;
  background: repeating-linear-gradient(180deg, var(--water) 0 12px, transparent 12px 24px) 0 0 / 8px 24px;
  animation: flow .8s linear infinite;
}
@keyframes flow { to { background-position: 0 24px; } }
.pour { position: relative; }
.pour__n { position: absolute; left: -63px; top: -6px; z-index: 1; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; background: var(--kraft); border: 3px solid var(--red); color: var(--red); font: 900 28px/1 var(--f-d); }
.pour__t { font: 900 clamp(27px, 7.3vw, 44px)/1.3 var(--f-d); letter-spacing: -.02em; }
.pour__t span { text-decoration: underline wavy transparent; text-decoration-thickness: 2.5px; text-underline-offset: 7px; -webkit-text-decoration-skip: none; text-decoration-skip-ink: none; transition: text-decoration-color .5s ease .4s; }
.pours.is-in .pour__t span, .no-js .pour__t span { text-decoration-color: var(--red); }
.pours.is-in .pour:nth-child(2) .pour__t span { transition-delay: .8s; }
.pours.is-in .pour:nth-child(3) .pour__t span { transition-delay: 1.2s; }
.pour p { margin-top: 8px; font-size: 18.5px; line-height: 1.5; color: #35322B; }
.pours__bucket { position: relative; z-index: 1; margin-top: 44px; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; }
.bucket { overflow: visible; }
.bk-body { fill: none; stroke: currentColor; stroke-width: 5; stroke-linejoin: round; }
.bk-rim { fill: none; stroke: currentColor; stroke-width: 8; stroke-linecap: round; }
.bk-water { fill: #8CC7F0; }
.bucket--leak { width: 104px; margin-left: -14px; color: var(--ink); }
.bk-holes circle { fill: var(--kraft); stroke: var(--ink); stroke-width: 2.5; }
.bk-drips path { fill: none; stroke: var(--water); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 9 12; animation: drip .9s linear infinite; }
.bk-drips path:nth-child(2) { animation-delay: -.3s; } .bk-drips path:nth-child(3) { animation-delay: -.6s; }
@keyframes drip { to { stroke-dashoffset: -21; } }
.pours__line { font: 500 clamp(23px, 6.1vw, 40px)/1.1 var(--f-d); letter-spacing: -.016em; text-wrap: balance; }
.pours__line strong { font-weight: 900; }
@media (min-width: 760px) {
  .pours__list { padding-left: 110px; gap: 48px; }
  .pours__list::before { left: 46px; }
  .pour__n { left: -96px; width: 72px; height: 72px; font-size: 38px; top: -10px; }
  .pour p { font-size: 20px; }
  .pours__bucket { grid-template-columns: 150px minmax(0, 1fr); gap: 34px; margin-top: 56px; }
  .bucket--leak { width: 150px; margin-left: -25px; }
}

/* ==========================================================================
   8. STAFF
   ========================================================================== */
.versus { margin-top: 36px; display: grid; gap: 28px; }
.versus__item { padding-top: 14px; border-top: 4px solid var(--muted); font-size: 18.5px; line-height: 1.5; }
.versus__k { margin-bottom: 6px; font: 700 11px/1.2 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.versus__item--old { color: #4A463D; }
/* Training fades. */
.versus__item--old::after { content: ""; display: block; height: 46px; margin-top: 16px; background: repeating-linear-gradient(180deg, #A9A191 0 7px, transparent 7px 16px); -webkit-mask-image: linear-gradient(100deg, #000 5%, transparent 78%); mask-image: linear-gradient(100deg, #000 5%, transparent 78%); }
.versus__item--new { border-top-color: var(--hot); }
.versus__item--new .versus__k { color: var(--hot-deep); }
/* A system gets copied. */
.copies { display: flex; gap: 8px; margin-top: 16px; }
.copies span { flex: 1; max-width: 120px; padding: 9px 9px 7px; border-radius: 3px 12px 12px 12px; background: var(--wa-out); box-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
.copies i { display: block; height: 6px; margin-bottom: 5px; border-radius: 3px; background: rgba(7, 94, 84, .35); }
.copies i:last-child { width: 60%; }

.mm-proof { margin-top: 52px; padding: 0 0 26px; background: #fff; border: 2px solid var(--ink); max-width: 620px; }
.mm-proof__head { padding: 16px 18px; background: var(--ink); color: rgba(255, 255, 255, .88); font-size: 17px; line-height: 1.5; }
.mm-proof__head strong { color: #fff; }
.sent { margin: 22px 18px 0; display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; }
.sent i { aspect-ratio: 1.15; border-radius: 9px 9px 2px 9px; background: #DDD7C9; }
.sent i.on { background: var(--wa); border-radius: 9px 9px 9px 2px; transition: background .3s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.sent i.on:nth-of-type(8) { transition-delay: .3s; } .sent i.on:nth-of-type(15) { transition-delay: .6s; } .sent i.on:nth-of-type(19) { transition-delay: .9s; }
.js .mm-proof:not(.is-in) .sent i.on { background: #DDD7C9; transform: scale(.7); }
.mm-proof__nums { margin-top: 18px; display: flex; align-items: flex-end; justify-content: center; gap: 20px; color: var(--muted); }
.mm-proof__nums span { font: 700 10.5px/1.2 var(--f-m); letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.mm-proof__nums b { display: block; font: 900 clamp(62px, 17vw, 96px)/.86 var(--f-d); letter-spacing: -.034em; color: var(--text); }
.mm-proof__nums .is-on b { color: var(--green); }
.mm-proof__nums .ic { font-size: 30px; margin-bottom: 26px; color: #A39B8B; }
.mm-proof__foot { margin: 14px 18px 0; text-align: center; font-size: 17px; line-height: 1.5; }
.stats { margin-top: 44px; border-bottom: 1px solid var(--rule); }
.stats li { padding: 22px 0 24px; border-top: 1px solid var(--rule); }
.stats__n { display: block; font: 900 clamp(46px, 12.6vw, 84px)/.92 var(--f-d); letter-spacing: -.02em; font-variant-numeric: lining-nums; color: var(--hot-deep); }
.stats__n span { font-weight: 500; font-style: italic; font-size: .6em; color: var(--muted); }
.stats small { font-size: .86em; color: var(--muted); white-space: nowrap; }
.stats p { margin-top: 10px; font-size: 17.5px; line-height: 1.5; max-width: 26em; }
@media (min-width: 900px) {
  .versus { grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 56px; max-width: 900px; }
  .mm-proof { margin-top: 72px; }
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; margin-top: 64px; border-bottom: 0; }
  .stats li { border-bottom: 1px solid var(--rule); }
}

/* ==========================================================================
   9. TWO NIGHTS — two tickets, one bucket
   ========================================================================== */
.nights .h2 { color: #fff; }
.nights__head { display: grid; gap: 28px; }
.nights__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 30%; }
.nights__photo { border: 6px solid #fff; }
@media (min-width: 900px) { .nights__head { grid-template-columns: minmax(0, 1fr) 420px; gap: 72px; align-items: end; } }
.tickets { margin-top: 40px; display: grid; gap: 22px; }
.tk { position: relative; background: #F7F2E6; color: var(--ink); }
.tk__stub { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; align-items: end; padding: 18px 20px 16px; border-bottom: 2px dashed rgba(19, 18, 16, .45); }
.tk__stub::before, .tk__stub::after { content: ""; position: absolute; bottom: -11px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); }
.tk__stub::before { left: -11px; } .tk__stub::after { right: -11px; }
.tk__night { grid-column: 1; font: 700 12px/1 var(--f-m); letter-spacing: .2em; text-transform: uppercase; }
.tk__night b { display: block; margin-top: 2px; font: 900 96px/.78 var(--f-d); letter-spacing: -.034em; text-transform: none; }
.tk--1 .tk__night b { color: var(--red); }
.tk--2 .tk__night b { color: var(--green); }
.tk__meta { grid-column: 1; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 4px 12px; font: 700 13.5px/1.2 var(--f-m); letter-spacing: -.03em; }
.tk__meta span:last-child { padding: 1px 6px; background: var(--ink); color: #fff; }
.tk__stub .bucket { grid-column: 2; grid-row: 1 / 3; width: 92px; color: var(--ink); align-self: center; }
.bk-hole { fill: #F7F2E6; stroke: var(--ink); stroke-width: 2.5; }
.bk-ring { fill: none; stroke: var(--red); stroke-width: 5; stroke-linecap: round; }
.bucket--found .bk-water { opacity: .55; }
.bk-patch { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.bucket--fixed .bk-water { d: path("M25 34h70l-7 58a6 6 0 0 1-6 5H38a6 6 0 0 1-6-5z"); }
.tk__body { padding: 20px 20px 26px; }
.tk__title { font: 900 clamp(34px, 9vw, 46px)/1 var(--f-d); letter-spacing: -.022em; }
.tk__body ul { margin-top: 16px; display: grid; gap: 12px; }
.tk__body li { position: relative; padding-left: 26px; font-size: 17.5px; line-height: 1.45; }
.tk__body li::before { content: ""; position: absolute; left: 0; top: .62em; width: 14px; height: 3px; background: var(--hot); }
.smallline { margin: 34px auto 0; max-width: 26em; text-align: center; font: italic 400 19px/1.45 var(--f-d); color: rgba(255, 255, 255, .78); }
@media (min-width: 900px) { .tickets { grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 64px; } .tk__stub { padding: 26px 30px 22px; } .tk__body { padding: 28px 30px 36px; } .tk__night b { font-size: 132px; } .tk__stub .bucket { width: 124px; } }

/* ==========================================================================
   10. THE MAGIC MESSAGE
   ========================================================================== */
.magic { padding-top: 0; }
.magic > .wrap { padding-top: var(--sec-y); border-top: 1px solid rgba(255, 255, 255, .16); }
.magic .h2 { color: #fff; }
.magic__grid { display: grid; gap: 34px; }
.mm-list { display: grid; gap: 12px; }
.mm-list li { position: relative; padding-left: 28px; font-size: 18.5px; line-height: 1.5; color: rgba(255, 255, 255, .86); max-width: 26em; }
.mm-list li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 13px; height: 11px; border-radius: 7px 7px 7px 1px; background: var(--wa); }
.mm-list strong { color: #fff; }
@media (min-width: 900px) {
  .magic__grid { grid-template-columns: minmax(0, 1fr) 372px; grid-template-areas: "head phone" "list phone"; gap: 28px 88px; align-items: start; }
  .magic__head { grid-area: head; } .magic__grid .phone { grid-area: phone; align-self: center; } .magic__grid .mm-list { grid-area: list; }
}

/* ==========================================================================
   11. PROOF — a results page
   ========================================================================== */
.proof .lead { max-width: 20em; }
.plabel { margin-top: 44px; display: flex; align-items: center; gap: 12px; font: 700 11px/1.3 var(--f-m); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.plabel::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.owners { margin: 14px calc(var(--pad) * -1) 0; display: grid; gap: 3px; }
.owner { min-width: 0; padding: 24px var(--pad) 24px; background: var(--ink); color: #fff; }
.owner__tag, .win__tag { display: inline-block; padding: 4px 8px 3px; font: 700 10.5px/1.2 var(--f-m); letter-spacing: .14em; text-transform: uppercase; }
.owner__tag { background: var(--hl); color: var(--ink); }
.owner__num { margin-top: 16px; font: 900 clamp(38px, 12.2vw, 96px)/.92 var(--f-d); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; color: #fff; }
.owner__what { margin-top: 10px; font: italic 500 clamp(21px, 5.6vw, 28px)/1.2 var(--f-d); color: rgba(255, 255, 255, .9); }
.owner__what b { font-style: normal; font-weight: 900; color: var(--hl); }
.owner__what small { display: block; margin-top: 4px; font: 500 14.5px/1.3 var(--f-b); color: rgba(255, 255, 255, .62); }
.owner__who { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .2); display: flex; align-items: center; gap: 12px; font: 700 10.5px/1.5 var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.owner__who b { display: block; font: 700 18px/1.25 var(--f-b); letter-spacing: 0; text-transform: none; color: #fff; }
.owner__ava { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--hot); color: var(--ink); font: 900 16px/1 var(--f-d); letter-spacing: 0; }
.is-review .owner--slot { background: #FFF8DA; color: var(--ink); }
.is-review .owner--slot .owner__what, .is-review .owner--slot .owner__who, .is-review .owner--slot .owner__who b { color: var(--ink); }

.wins { margin-top: 14px; display: grid; gap: 10px; }
.win { min-width: 0; padding: 18px 16px 18px; background: var(--paper); border: 2px solid var(--ink); display: flex; flex-direction: column; }
.win__tag { align-self: flex-start; background: var(--ink); color: #fff; }
.win__num { margin-top: 14px; font: 900 clamp(32px, 9.2vw, 44px)/1 var(--f-d); letter-spacing: -.028em; font-variant-numeric: lining-nums; }
.win__num--long { font-size: clamp(22px, 7.3vw, 44px); white-space: nowrap; }
.win__arr { color: var(--hot); }
.win__what { margin-top: 8px; font-size: 16.5px; line-height: 1.4; }
.win__who { margin-top: auto; padding-top: 14px; font: 700 10.5px/1.4 var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bars { margin-top: 16px; display: grid; gap: 8px; }
.bars p { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 8px; }
.bars em { font: 700 10px/1 var(--f-m); letter-spacing: .1em; text-transform: uppercase; font-style: normal; color: var(--muted); }
.bars i { display: block; height: 16px; width: var(--w); background: #B9AF9A; transform-origin: 0 50%; }
.bars .is-after i { background: var(--hot); }
.bars .is-after em { color: var(--hot-deep); }
.js .bars:not(.is-in) i { transform: scaleX(0); }
.bars.is-in i { transition: transform .9s cubic-bezier(.2, .7, .2, 1) .15s; }
.months { margin-top: 16px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; }
.months i { aspect-ratio: 1; border: 1.5px dashed #A99F8A; }
.months i.on { border: 0; background: var(--hot); }
.js .months:not(.is-in) i.on { opacity: 0; }
.months.is-in i.on { transition: opacity .3s ease; }
.months.is-in i.on:nth-of-type(9) { transition-delay: .12s; }
.months.is-in i.on:nth-of-type(10) { transition-delay: .24s; }
.months.is-in i.on:nth-of-type(11) { transition-delay: .36s; }
.months.is-in i.on:nth-of-type(12) { transition-delay: .48s; }
.months span { margin-top: 4px; font: 700 9.5px/1.3 var(--f-m); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.months__a { grid-column: span 7; }
.months__b { grid-column: span 5; color: var(--hot-deep) !important; }
.bars-note { margin-top: 10px; font: 700 9.5px/1.4 var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.trust { margin-top: 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.rated { border: 2px solid var(--ink); background: #fff; }
.rated__head { display: flex; align-items: center; gap: clamp(10px, 3.6vw, 16px); padding: 18px clamp(12px, 4vw, 18px) 16px; background: var(--ink); color: #fff; }
.rated__score { font: 900 clamp(64px, 21vw, 84px)/.82 var(--f-d); letter-spacing: -.045em; color: var(--hl); font-variant-numeric: lining-nums; }
.rated__stars { font-size: clamp(20px, 6.4vw, 26px); gap: 2px; }
.rated__count { margin-top: 6px; font: 500 clamp(15.5px, 4.6vw, 18px)/1.2 var(--f-b); color: rgba(255, 255, 255, .86); }
.rated__count b { font-weight: 800; color: #fff; }
.rated__list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 16px; border-top: 1px solid var(--rule); }
.rated__list li:first-child { border-top: 0; }
.rated__list .brand-logo { width: 30px; height: 30px; }
.rated__list b { display: block; font: 700 17px/1.2 var(--f-b); }
.rated__list p small { font-size: 13px; color: var(--muted); }
.rated__val { display: inline-flex; align-items: center; gap: 4px; font: 900 24px/1 var(--f-d); letter-spacing: -.02em; }
.rated__val .ic { font-size: 18px; color: #E9A100; }
.rated__val--tp .ic { color: #00B67A; }
.rated__val--fb { flex-direction: column; align-items: flex-end; gap: 2px; }
.rated__val--fb small { font: 700 10px/1 var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: #1464CF; }

.onstage { border: 2px solid var(--ink); background: var(--paper); }
.onstage__photo { position: relative; }
.onstage__photo img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 30% 50%; }
.onstage__photo figcaption, .room figcaption { position: absolute; left: 0; bottom: 0; padding: 7px 11px 6px; background: var(--hl); color: var(--ink); font: 700 10.5px/1.2 var(--f-m); letter-spacing: .14em; text-transform: uppercase; }
.credits li { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--rule); }
.credits img { width: 56px; height: 56px; object-fit: cover; }
.credits b { display: block; font: 800 17.5px/1.2 var(--f-d); letter-spacing: -.01em; }
.credits span { display: block; margin-top: 3px; font: 700 10px/1.3 var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.room { position: relative; margin-top: 14px; border: 2px solid var(--ink); }
.room img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 45%; }
.brand-logo { width: 28px; height: 28px; flex: none; }
.fineprint { margin: 24px auto 0; max-width: 40em; text-align: center; font-size: 13px; line-height: 1.5; color: var(--muted); }
@media (min-width: 700px) {
  .owners { margin-inline: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .owner { padding: 30px 30px 28px; }
  .owner__num { font-size: clamp(34px, 4.6vw, 72px); }
  .wins { grid-template-columns: 1fr 1fr; gap: 14px; }
  .win { padding: 22px 22px 20px; }
}
@media (min-width: 900px) {
  .plabel { margin-top: 64px; }
  .trust { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; align-items: stretch; margin-top: 72px; }
  .rated { display: flex; flex-direction: column; }
  .rated__list { flex: 1; display: grid; }
  .rated__head { padding: 26px 24px 24px; }
  .rated__score { font-size: 112px; }
  .onstage { display: grid; grid-template-columns: 1.15fr 1fr; }
  .onstage__photo img { height: 100%; aspect-ratio: auto; }
  .credits { display: grid; }
  .credits li:first-child { border-top: 0; }
  .credits li { border-left: 2px solid var(--ink); }
  .room img { aspect-ratio: 3 / 1; object-position: 50% 66%; }
}

/* ==========================================================================
   12. WHY IT'S FREE — a signed letter
   ========================================================================== */
.letter { max-width: 720px; margin-inline: auto; padding: 26px 22px 28px; background: var(--white); box-shadow: 0 1px 1px rgba(30, 51, 39, .1), 0 22px 44px -22px rgba(30, 51, 39, .4); }
.letter__head { display: flex; align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid rgba(30, 51, 39, .22); }
.letter__head img { width: 56px; height: 56px; border-radius: 50%; }
.letter__head b { display: block; font: 700 16.5px/1.2 var(--f-b); }
.letter__head span { display: block; margin-top: 3px; font: 700 10px/1.2 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: #5C6F62; }
.letter__title { margin-top: 26px; font: 600 clamp(29px, 7.7vw, 46px)/1.08 var(--f-d); letter-spacing: -.018em; text-wrap: balance; }
.letter__lead { margin-top: 18px; font: italic 700 clamp(20px, 5.3vw, 25px)/1.34 var(--f-s); color: #2A5B40; }
.letter > p:not([class]) { margin-top: 16px; font: 400 19.5px/1.6 var(--f-s); color: #263A2E; }
.terms { margin-top: 30px; border-top: 1px solid rgba(30, 51, 39, .22); }
.terms__col { padding: 22px 0 6px; }
.terms__col + .terms__col { border-top: 1px solid rgba(30, 51, 39, .22); margin-top: 18px; }
.terms h3 { font: 700 11px/1.2 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: #2A5B40; }
.terms__col--wont h3 { color: #56606A; }
.terms ul { margin-top: 16px; display: grid; gap: 14px; }
.terms li { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; line-height: 1.45; color: #22352A; }
.tb-ic { flex: none; width: 26px; height: 26px; margin-top: 1px; display: grid; place-items: center; border-radius: 50%; font-size: 14px; }
.tb-ic .ic { stroke-width: 3; }
.terms__col--will .tb-ic { background: #D6EADB; color: var(--green); }
.terms__col--wont .tb-ic { background: #E6EAEC; color: #56606A; }
.letter__foot { margin-top: 26px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.letter__sig { font: italic 700 52px/1 var(--f-s); letter-spacing: -.028em; color: #1E3327; transform: rotate(-5deg); transform-origin: left bottom; }
.letter__snap { width: 150px; padding: 5px; background: #fff; box-shadow: 0 10px 22px -10px rgba(30, 51, 39, .6); transform: rotate(3deg); }
.letter__snap img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 55% 40%; filter: saturate(.3) contrast(1.05); }
@media (min-width: 760px) {
  .letter { padding: 48px 56px 52px; }
  .terms { display: grid; grid-template-columns: 1fr 1.2fr; gap: 0 44px; }
  .terms__col + .terms__col { border-top: 0; margin-top: 0; padding-left: 44px; border-left: 1px solid rgba(30, 51, 39, .22); }
  .letter__snap { width: 220px; }
}

/* ==========================================================================
   13. TWO FUTURES — one road, two lanes
   ========================================================================== */
.fork { display: block; width: 100%; height: 62px; margin-top: 26px; overflow: visible; }
.fork path { fill: none; stroke-width: 4; vector-effect: non-scaling-stroke; }
.fork__l { stroke: #B1A999; stroke-dasharray: 3 7; stroke-linecap: round; }
.fork__r { stroke: var(--hot); }
.futures__head, .futures__row { display: grid; grid-template-columns: 1fr 1fr; }
.futures__head p { padding: 12px 6px 12px; text-align: center; font: 700 clamp(9.5px, 2.7vw, 11px)/1.2 var(--f-m); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.futures__head .futures__skip { color: #6B665B; }
.futures__head .futures__come { color: var(--hot-deep); }
.futures__row p { display: flex; align-items: center; padding: 14px 12px; font-size: 16px; line-height: 1.36; border-top: 1px solid var(--rule); }
.futures__row .futures__skip { color: #6B665B; }
.futures__row .futures__come { font-weight: 700; color: var(--text); background: rgba(240, 78, 27, .09); box-shadow: inset 4px 0 0 var(--hot); padding-left: 16px; }
.futures__row:last-child p { border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) { .fork { height: 84px; margin-top: 36px; } .futures__row p { padding: 20px 26px; font-size: 19px; } .futures__row .futures__come { padding-left: 30px; } }

/* ==========================================================================
   14. FOR YOU
   ========================================================================== */
.fit { display: grid; gap: 40px; }
.fit__t { font: 900 clamp(38px, 10.4vw, 72px)/.98 var(--f-d); letter-spacing: -.022em; }
.fit__col--no .fit__t { font: 700 11.5px/1.3 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.fit ul { margin-top: 24px; display: grid; gap: 16px; }
.fit__col--yes li { display: flex; align-items: flex-start; gap: 14px; font: 600 clamp(22px, 5.9vw, 30px)/1.2 var(--f-d); letter-spacing: -.015em; }
.fit__col--no ul { margin-top: 14px; gap: 10px; }
.fit__col--no li { display: flex; align-items: flex-start; gap: 12px; font-size: 17.5px; line-height: 1.4; color: #4A463D; }
.fit__ic { flex: none; display: grid; place-items: center; border-radius: 50%; }
.fit__ic .ic { stroke-width: 3.4; }
.fit__col--yes .fit__ic { width: 32px; height: 32px; margin-top: 1px; background: var(--ink); color: var(--hl); font-size: 17px; }
.fit__col--no .fit__ic { width: 24px; height: 24px; background: #D5CDBB; color: #6B665B; font-size: 13px; }
.fit__col--no { padding-top: 26px; border-top: 1px solid var(--rule); }
@media (min-width: 760px) { .fit { grid-template-columns: 1.4fr .6fr; gap: 72px; align-items: end; } .fit__col--no { padding: 0 0 6px 40px; border-top: 0; border-left: 1px solid var(--rule); } }

/* ==========================================================================
   15. QUICK QUESTIONS — a chat with Aaron
   ========================================================================== */
.faq { background: var(--wall) radial-gradient(rgba(19, 18, 16, .055) 1.4px, transparent 1.6px) 0 0 / 22px 22px; padding-top: 0; }
.faq__bar { position: relative; display: flex; align-items: center; gap: 12px; margin-inline: calc(var(--pad) * -1); padding: 12px var(--pad); background: var(--wa-head); color: #fff; font: 700 19px/1.2 var(--f-b); letter-spacing: -.01em; }
.faq__bar img { width: 46px; height: 46px; border-radius: 50%; }
.faq__bar small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, .78); }
.qa { margin-top: 26px; display: grid; gap: 20px; }
.qa__item { display: grid; gap: 7px; }
.qa__q { justify-self: end; max-width: 88%; padding: 10px 14px; border-radius: 18px 4px 18px 18px; background: var(--wa-out); font: 600 17px/1.38 var(--f-b); box-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
.qa__a { justify-self: start; max-width: 90%; padding: 11px 14px; border-radius: 4px 18px 18px 18px; background: #fff; font-size: 17px; line-height: 1.5; box-shadow: 0 1px 0 rgba(0, 0, 0, .12); }
@media (min-width: 760px) { .faq { padding-top: var(--sec-y); } .faq__bar { margin-inline: 0; padding: 14px 20px; border-radius: 18px 18px 0 0; } .qa { gap: 24px; margin-top: 34px; } .qa__q, .qa__a { max-width: 78%; font-size: 18px; padding: 13px 18px; } }

/* ==========================================================================
   16. FINAL — two doors
   ========================================================================== */
.final { padding-bottom: calc(var(--sec-y) - 14px); }
.h2--final { max-width: none; font-size: clamp(33px, 8.9vw, 84px); color: #fff; }
.final__a, .final__b { display: block; }
.final__a { font-size: .7em; font-weight: 500; font-style: italic; color: rgba(255, 255, 255, .66); }
.final__n1 { white-space: nowrap; }
.final__b { margin-top: .16em; }
.final__n2 { color: var(--hot); white-space: nowrap; }
.doors { margin: 44px auto 0; max-width: 940px; display: grid; gap: 14px; }
.door { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 18px; align-items: center; padding: 20px 18px; font-size: 18px; line-height: 1.48; }
.door__k { margin-bottom: 6px; font: 700 11.5px/1.2 var(--f-m); letter-spacing: .16em; text-transform: uppercase; }
.door__art { position: relative; width: 66px; height: 100px; border: 3px solid currentColor; border-bottom-width: 6px; }
.door__art i { position: absolute; inset: 0; background: currentColor; opacity: .16; }
.door__art::after { content: ""; position: absolute; right: 8px; top: 52%; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.door--1 { border: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .58); }
.door--2 { background: #F7F2E6; color: var(--ink); font-weight: 600; }
.door--2 .door__k { color: var(--hot-deep); }
.door--2 .door__art { background: var(--hl); }
.door--2 .door__art i { inset: -3px auto -6px -3px; width: 62%; opacity: 1; background: var(--ink); transform: skewY(9deg); transform-origin: left top; }
.door--2 .door__art::after { display: none; }
.cases { margin: 34px auto 0; max-width: 28em; text-align: center; text-wrap: balance; font: 400 clamp(19px, 5.1vw, 23px)/1.45 var(--f-d); color: rgba(255, 255, 255, .86); }
.cases p + p { margin-top: 8px; }
.cases__k { font-weight: 800; font-style: italic; color: #fff; }
.cases__k--best { color: var(--hl); }
.final__cta { position: relative; margin: 40px auto 0; max-width: 720px; }
.final__cta::before { content: ""; position: absolute; left: 50%; top: 22px; width: 216px; height: 214px; margin-left: -108px; background: var(--hot); }
.final__photo { position: relative; display: block; width: 222px; margin: 0 auto; -webkit-mask-image: linear-gradient(#000 76%, transparent 98%); mask-image: linear-gradient(#000 76%, transparent 98%); }
.final__box { position: relative; margin-top: -58px; text-align: center; }
.final__box .cta-wrap { margin-top: 0; }
.final__box .cd { margin-top: 22px; }
.ps { margin: 60px auto 0; max-width: 34em; display: grid; gap: 20px; padding-top: 34px; border-top: 1px solid rgba(255, 255, 255, .2); }
.ps p { font: 400 19px/1.5 var(--f-d); color: rgba(255, 255, 255, .86); }
.ps b { display: block; margin-bottom: 3px; font: 700 11.5px/1.4 var(--f-m); letter-spacing: .12em; color: var(--hl); }
.ps strong { color: #fff; font-weight: 800; }
.sig { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.sig img { width: 64px; height: 64px; border-radius: 50%; }
.ps__cta { margin-top: 18px; text-align: center; }
.ps .micro { font: 500 13px/1.4 var(--f-b); color: rgba(255, 255, 255, .66); }
.ps .sig span { font: italic 700 44px/1 var(--f-s); letter-spacing: -.028em; color: #fff; transform: rotate(-5deg); }
@media (min-width: 760px) {
  .doors { grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 64px; }
  .door { padding: 30px 28px; grid-template-columns: 84px minmax(0, 1fr); gap: 24px; font-size: 19px; }
  .door__art { width: 84px; height: 128px; }
  .final__cta { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 36px; align-items: end; margin-top: 64px; }
  .final__cta::before { left: 0; top: 30px; width: 230px; height: auto; bottom: 0; margin-left: 0; }
  .final__photo { width: 230px; margin: 0; -webkit-mask-image: none; mask-image: none; }
  .final__box { margin-top: 0; text-align: center; padding-bottom: 26px; }
}

/* ---------- Footer ---------- */
.footer { background: #0A0908; color: rgba(255, 255, 255, .56); padding: 44px 0 124px; font-size: 12.5px; line-height: 1.6; }
.footer p { margin-top: 12px; max-width: 60em; }
.mast__brand--foot { margin: 0 !important; }
.mast__brand--foot b { color: #fff; }
.footer__links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13.5px; }
.footer__links a { color: rgba(255, 255, 255, .84); text-underline-offset: 3px; }
@media (min-width: 1000px) { .footer { padding-bottom: 110px; } }

/* ==========================================================================
   STICKY CTA
   ========================================================================== */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom));
  background: var(--ink); border-top: 1px solid rgba(255, 255, 255, .16);
  transform: translateY(110%); transition: transform .28s ease; visibility: hidden;
}
.sticky.is-visible { transform: none; visibility: visible; }
.sticky__text { font: 600 clamp(11.5px, 3.45vw, 13.5px)/1.3 var(--f-b); color: #fff; white-space: nowrap; }
.sticky__text b { color: var(--hl); }
.sticky__more { display: none; }
@media (max-width: 359px) { .sticky__date { display: none; } }
@media (min-width: 1000px) {
  .sticky { justify-content: center; gap: 28px; padding: 11px 24px; }
  .sticky__more { display: inline; }
  .sticky__text { font-size: 15px; }
}

/* ==========================================================================
   REGISTRATION — the ticket prints their name
   ========================================================================== */
.modal { position: fixed; inset: 0; z-index: 100; display: grid; align-items: start; justify-items: center; padding: 10px 10px 0; overflow-y: auto; overscroll-behavior: contain; }
.modal__overlay { position: fixed; inset: 0; background: rgba(10, 9, 8, .78); animation: fade .2s ease; }
.modal__dialog {
  position: relative; width: 100%; max-width: 460px; margin-bottom: 10px;
  padding: 20px 18px 16px;
  background: var(--paper); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  animation: pop .26s cubic-bezier(.2, .9, .3, 1.15);
}
@keyframes pop { from { transform: scale(.92) translateY(14px); opacity: 0; } }
@keyframes fade { from { opacity: 0; } }
.modal__close { position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--kraft); font-size: 18px; color: var(--ink); }
.modal__title { padding-right: 48px; font: 900 30px/1 var(--f-d); letter-spacing: -.022em; }
.modal__sub { margin-top: 6px; font-size: 15px; line-height: 1.4; color: var(--muted); }
.stub { position: relative; margin-top: 14px; background: var(--ink); color: #fff; }
.stub__main { min-width: 0; padding: 11px 14px 11px; }
.stub__k { display: flex; justify-content: space-between; gap: 10px; font: 700 9.5px/1 var(--f-m); letter-spacing: .16em; text-transform: uppercase; color: var(--hl); white-space: nowrap; }
.stub__k span + span { color: rgba(255, 255, 255, .78); letter-spacing: .1em; }
.stub__k i { font-style: normal; opacity: .5; }
.stub__dates { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--hl); color: var(--ink); border-top: 2px dashed var(--ink); }
.stub__dates::before, .stub__dates::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); }
.stub__dates::before { left: -8px; } .stub__dates::after { right: -8px; }
.stub__dates p { min-width: 0; padding: 9px 10px 10px 14px; }
.stub__dates p + p { border-left: 2px dashed rgba(19, 18, 16, .35); }
.stub__dates span { display: block; font: 700 9.5px/1 var(--f-m); letter-spacing: .16em; text-transform: uppercase; opacity: .72; }
.stub__dates b { display: block; margin-top: 5px; font: 900 clamp(16px, 5.1vw, 22px)/1 var(--f-d); letter-spacing: -.02em; white-space: nowrap; }
.stub__name { margin-top: 5px; font: 900 27px/1.05 var(--f-d); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stub__name.is-empty { color: rgba(255, 255, 255, .32); font-style: italic; font-weight: 500; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field { margin-top: 13px; }
.field > label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 10px; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.field > label span { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.field-fix { margin-top: 7px; padding: 8px 11px; background: #FFF6CC; border: 1.5px solid #E8C93A; border-radius: 8px; font-size: 14px; line-height: 1.4; }
.field-fix button { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; word-break: break-all; }
.form-proof { margin-top: 9px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px 7px; font-size: 13px; color: var(--text); }
.form-proof b { font-weight: 800; }
.form-proof .stars { font-size: 13px; }
.input, .select {
  width: 100%; height: 54px; padding: 0 14px;
  border: 2px solid #BDB5A4; border-radius: 8px; background: #fff;
  font: 500 17px/1.2 var(--f-b); color: var(--ink);
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.select { padding-right: 26px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23615B50' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 16px; }
.input::placeholder { color: #A9A08C; }
.input:focus, .select:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--hl); }
.input[aria-invalid="true"] { border-color: var(--red); background: #FFF6F5; }
.field.is-ok .input:not([aria-invalid="true"]) { border-color: var(--green); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C7C45' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; padding-right: 40px; }
.phone-in { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; }
.field-error { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: #A01F17; }
.form-alert { margin-top: 14px; padding: 12px 14px; background: #FDECEA; border: 2px solid #E9A9A3; font-size: 14.5px; line-height: 1.45; color: #A01F17; }
.form-submit { margin-top: 16px; }
.spinner { display: none; width: 20px; height: 20px; border-radius: 50%; border: 3px solid rgba(20, 17, 14, .25); border-top-color: #14110E; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-submit.is-loading .spinner { display: inline-block; }
.form-submit.is-loading .ic { display: none; }
.form-submit:disabled { cursor: progress; filter: saturate(.8); }
.privacy-note { margin-top: 12px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 13.5px; font-weight: 600; }
.privacy-note .ic { color: var(--green); }
.consent { margin-top: 8px; text-align: center; font-size: 12px; line-height: 1.5; color: var(--muted); }
@media (min-width: 640px) {
  .modal { align-items: center; padding: 24px; }
  .modal__dialog { margin-bottom: 0; padding: 30px 30px 24px; }
  .modal__title { font-size: 34px; }
}

/* ==========================================================================
   THANK-YOU PAGE
   ========================================================================== */
.ty-body { background: var(--paper); }
.ty__top { padding-bottom: 8px; }
.ty .mast { margin-bottom: 4px; }
.ty .mast__by { white-space: nowrap; }
@media (max-width: 479px) { .ty .mast__by { display: none; } }
.ty__stamp { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; padding: 6px 12px 6px 7px; border: 2px solid var(--green); color: var(--green); font: 800 11.5px/1 var(--f-m); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-2deg); }
.ty__stamp .ic { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--green); color: #fff; stroke-width: 3.6; }
.ty__h1 { margin-top: 16px; font: 900 clamp(48px, 13.4vw, 92px)/.94 var(--f-d); letter-spacing: -.034em; }
.ty__h1-2 { display: block; margin-top: .16em; font-size: .56em; font-style: italic; letter-spacing: -.02em; }
.pass { position: relative; margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); color: #fff; }
.pass__name { grid-column: 1 / -1; padding: 14px 16px 12px; border-bottom: 2px dashed rgba(255, 255, 255, .4); font: 700 9.5px/1 var(--f-m); letter-spacing: .18em; text-transform: uppercase; color: var(--hl); }
.pass__name b { display: block; margin-top: 5px; font: 900 28px/1.05 var(--f-d); letter-spacing: -.02em; text-transform: none; color: #fff; }
.pass__night { padding: 16px 16px 16px; }
.pass__night + .pass__night { border-left: 2px dashed rgba(255, 255, 255, .4); }
.pass__k { font: 700 11px/1 var(--f-m); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .66); }
.pass__d { margin-top: 7px; font: 900 clamp(20px, 5.6vw, 30px)/1.05 var(--f-d); letter-spacing: -.02em; }
.pass__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 10px 16px; background: var(--hl); color: var(--ink); font: 800 11px/1.3 var(--f-m); letter-spacing: .08em; text-transform: uppercase; }
.ty__progress { margin-top: 34px; display: flex; align-items: baseline; gap: 8px; padding-bottom: 12px; border-bottom: 3px solid var(--ink); font: 700 11.5px/1 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.ty__progress b { font: 900 34px/1 var(--f-d); letter-spacing: -.028em; color: var(--hot-deep); }
.all-done .ty__progress b { color: var(--green); }
.todo__item { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 10px; padding: 24px 0 26px; border-bottom: 1px solid var(--rule); }
.todo__n { position: relative; font: italic 900 68px/.8 var(--f-d); color: var(--hot); transition: color .25s ease; }
.todo__n i { font-style: inherit; }
.todo__n .ic { position: absolute; left: 34px; top: -8px; width: 28px; height: 28px; padding: 6px; border-radius: 50%; background: var(--green); color: #fff; stroke-width: 3.6; opacity: 0; transform: scale(.3); transition: opacity .2s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.todo__body { min-width: 0; }
.todo__t { font: 900 clamp(26px, 7vw, 38px)/1.04 var(--f-d); letter-spacing: -.02em; }
.todo__p { margin-top: 8px; font-size: 18px; line-height: 1.5; }
.todo__actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.btn-line { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 16px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; color: var(--ink); font: 700 15.5px/1.2 var(--f-b); text-decoration: none; transition: transform .1s ease; }
.btn-line:active { transform: translateY(2px); }
.btn-line .ic { font-size: 18px; }
.btn-line--solid { background: var(--ink); color: #fff; min-height: 56px; font-size: 17px; padding-inline: 18px; }
.btn-line--solid .ic:last-child { color: var(--hl); }
.todo__item.is-done .todo__n { color: #B9B1A0; }
.todo__item.is-done .todo__n .ic { opacity: 1; transform: none; }
.todo__item.is-done .todo__t { text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--green); }
.mynum { margin-top: 16px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 14px; padding: 14px 16px; background: #fff; border: 2px dashed #B4AC9C; }
.mynum label { font: 700 11.5px/1.2 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mynum__in { width: 100%; min-width: 0; height: 62px; padding: 0 12px; border: 2px solid var(--ink); border-radius: 8px; background: #fff; font: 900 38px/1 var(--f-d); letter-spacing: -.028em; color: var(--ink); text-align: center; -moz-appearance: textfield; appearance: textfield; }
.mynum__in::-webkit-outer-spin-button, .mynum__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mynum__in::placeholder { color: #D2CABA; }
.mynum__in:focus { outline: none; box-shadow: 0 0 0 3px var(--hl); }
.mynum__note { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
.ty__zoom { margin-top: 28px; display: flex; align-items: flex-start; gap: 14px; padding: 18px; background: var(--ink); color: rgba(255, 255, 255, .92); font-size: 17px; line-height: 1.5; }
.ty__zoom-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: var(--hl); color: var(--ink); font-size: 20px; }
.ty__foot { margin: 28px 0 0; padding-bottom: 40px; font-size: 12.5px; line-height: 1.6; color: var(--muted); text-align: center; }
@media (min-width: 760px) { .pass__night { padding: 22px 24px; } .pass__name { padding: 18px 24px 0; } .pass__foot { padding: 12px 24px; } .todo__item { grid-template-columns: 84px minmax(0, 1fr); padding: 34px 0 36px; } .todo__n { font-size: 96px; } .todo__n .ic { left: 50px; } }

/* ---------- Thank-you v2: two bonuses. Show up (the Magic Message), then WhatsApp the team (the guide). ---------- */
.ty2 { padding-bottom: 96px; }
.bonus-done .ty2 { padding-bottom: 0; }
.ty__lead { margin-top: 14px; max-width: 22em; font: 500 clamp(19px, 5.2vw, 24px)/1.34 var(--f-d); }
.ty__lead strong { font-weight: 800; }
.ty2 .pass { margin-top: 22px; }
.cd--ty { margin-top: 18px; }

.plan { margin-top: 28px; border: 2px solid var(--ink); background: #fff; }
.plan__head { display: flex; align-items: baseline; gap: 8px; padding: 10px 14px 9px; background: var(--ink); color: rgba(255, 255, 255, .78); font: 700 11px/1 var(--f-m); letter-spacing: .14em; text-transform: uppercase; }
.plan__head b { font: 900 24px/1 var(--f-d); letter-spacing: -.02em; color: var(--hl); }
.plan__head span { margin-left: auto; color: rgba(255, 255, 255, .55); }
.all-done .plan__head b { color: #6FE39A; }
.plan ol { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.plan li + li { border-left: 1px solid var(--rule); }
.plan a { display: grid; justify-items: center; gap: 7px; padding: 12px 4px 12px; text-decoration: none; color: var(--ink); font: 700 clamp(12px, 3.4vw, 14.5px)/1.2 var(--f-b); text-align: center; }
.plan__n { position: relative; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--hot); color: var(--hot-deep); font: 900 17px/1 var(--f-d); transition: background .2s ease, border-color .2s ease; }
.plan__n i { font-style: normal; }
.plan__n .ic { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; color: #fff; stroke-width: 3.6; opacity: 0; }
.plan li.is-done .plan__n { background: var(--green); border-color: var(--green); }
.plan li.is-done .plan__n i { opacity: 0; }
.plan li.is-done .plan__n .ic { opacity: 1; }
.plan li.is-done a { color: var(--muted); }

.gift { margin-top: 30px; scroll-margin-top: 12px; }
.gift__k { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px 4px; background: var(--hl); color: var(--ink); font: 800 11px/1.2 var(--f-m); letter-spacing: .12em; text-transform: uppercase; }
.gift__k i { font-style: normal; opacity: .5; }
.gift__k .ic { font-size: 13px; stroke-width: 2.6; }
.gift__k--now { background: var(--hot); }
.gift__t { margin-top: 16px; font: 900 clamp(36px, 10.2vw, 60px)/.98 var(--f-d); letter-spacing: -.03em; text-wrap: balance; }
.gift__t--sm { margin-top: 14px; font-size: clamp(28px, 7.8vw, 42px); line-height: 1.02; letter-spacing: -.024em; }

/* Bonus 1: dark, locked */
.gift--lock { margin-inline: calc(var(--pad) * -1); padding: 30px var(--pad) 30px; background: var(--ink); color: #fff; }
.gift--lock .hl { color: var(--ink); }
.locked { margin-top: 22px; padding: 14px 14px 16px; border-radius: 14px; background: #0B141A; display: grid; gap: 4px; max-width: 420px; }
.locked__in { justify-self: start; padding: 8px 12px; border-radius: 3px 12px 12px 12px; background: #202C33; font-size: 15.5px; color: #E9EDEF; }
.locked__gap { justify-self: center; margin: 6px 0; padding: 5px 11px; border-radius: 8px; background: #182229; font: 500 10.5px/1 var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: #8696A0; }
.locked__out { position: relative; justify-self: end; width: min(100%, 260px); padding: 18px 14px; border-radius: 12px 3px 12px 12px; background: #005C4B; overflow: hidden; box-shadow: 0 0 0 2.5px var(--hl); }
.locked__out i { display: block; height: 9px; margin: 7px 0; border-radius: 4px; background: rgba(255, 255, 255, .5); filter: blur(3.5px); }
.locked__out i:nth-child(2) { width: 88%; } .locked__out i:nth-child(3) { width: 56%; }
.locked__out span { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 3px; background: rgba(0, 62, 51, .66); font: 700 16px/1.2 var(--f-b); color: #fff; text-align: center; }
.locked__out .ic { font-size: 19px; color: var(--hl); margin-bottom: 2px; }
.locked__out small { font-size: 12.5px; font-weight: 500; color: #CFE9E2; }
.gift__list { margin-top: 22px; display: grid; gap: 11px; }
.gift__list li { position: relative; padding-left: 28px; font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, .86); max-width: 26em; }
.gift__list li::before { content: ""; position: absolute; left: 2px; top: .5em; width: 13px; height: 11px; border-radius: 7px 7px 7px 1px; background: var(--wa); }
.gift__list strong { color: #fff; }
.gift__proof { margin-top: 24px; padding: 16px 16px 14px; background: #1E1C18; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 16px; }
.gift__proof span { font: 700 10.5px/1.2 var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.gift__proof b { display: block; font: 900 clamp(52px, 14vw, 72px)/.86 var(--f-d); letter-spacing: -.034em; color: #fff; }
.gift__proof .is-on b { color: #5BE38C; }
.gift__proof > .ic { font-size: 26px; margin-bottom: 20px; color: rgba(255, 255, 255, .45); }
.gift__proof em { flex-basis: 100%; margin-top: 6px; font: 500 15px/1.4 var(--f-b); font-style: normal; color: rgba(255, 255, 255, .8); }
.gift__rule { margin-top: 22px; padding-left: 14px; border-left: 4px solid var(--hl); font: 600 clamp(19px, 5.2vw, 24px)/1.3 var(--f-d); max-width: 22em; }
.gift__rule strong { color: var(--hl); font-weight: 800; }
.gift__act { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .2); }
.gift__do { display: flex; align-items: center; gap: 8px; font: 800 clamp(20px, 5.4vw, 24px)/1.2 var(--f-d); letter-spacing: -.012em; }
.gift__do .ic { color: var(--hl); animation: bob 1.6s ease-in-out infinite; }
.gift__btns { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; }
.gift__btns .btn-line { flex: 1 1 calc(50% - 4px); justify-content: center; padding: 0 8px; min-width: 0; font-size: clamp(14px, 3.9vw, 15.5px); white-space: nowrap; }
.gift--lock .btn-line { border-color: #fff; }

/* Bonus 2: the guide, and the WhatsApp button */
.gift--now { padding: 22px 16px 22px; background: #fff; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.guide { margin-top: 18px; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 20px; align-items: center; }
.guide__cover { position: relative; aspect-ratio: 3 / 4; padding: 12px 10px 10px; display: flex; flex-direction: column; background: var(--ink); color: #fff; box-shadow: 4px 4px 0 var(--hot); transform: rotate(-3deg); }
.guide__kick { font: 700 6.5px/1.2 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--hl); }
.guide__title { margin-top: 8px; font: 900 12.5px/1.06 var(--f-d); letter-spacing: -.01em; }
.guide__title em { font-style: normal; color: var(--hl); }
.guide__lines { margin-top: auto; display: grid; gap: 4px; }
.guide__lines i { height: 3px; background: rgba(255, 255, 255, .28); }
.guide__lines i:last-child { width: 60%; }
.guide__by { margin-top: 8px; font: 700 7px/1 var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.guide__stamp { position: absolute; right: -12px; bottom: 22px; padding: 4px 7px 3px; border: 2px solid var(--red); background: #fff; color: var(--red); font: 800 8px/1 var(--f-m); letter-spacing: .1em; text-transform: uppercase; transform: rotate(9deg); }
.guide__lead { font-size: 17px; line-height: 1.45; }
.inside { margin-top: 20px; border-top: 2px solid var(--ink); }
.inside li { padding: 11px 0 12px; border-bottom: 1px solid var(--rule); }
.inside b { display: block; font: 800 17.5px/1.25 var(--f-d); letter-spacing: -.01em; }
.inside span { display: block; margin-top: 3px; font-size: 15px; line-height: 1.4; color: var(--muted); }
.gift__ticks { margin-top: 16px; display: grid; gap: 7px; }
.gift__ticks li { display: flex; align-items: flex-start; gap: 8px; font: 600 15px/1.35 var(--f-b); }
.gift__ticks .ic { flex: none; margin-top: 2px; color: var(--green); stroke-width: 3.4; font-size: 15px; }
.gift__wa { margin-top: 20px; }
.btn-wa { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; min-height: 62px; padding: 8px 18px; border-radius: 10px; border-bottom: 4px solid #128C4B; background: var(--wa); color: #06280F; font: 800 clamp(16.5px, 4.6vw, 19px)/1.15 var(--f-b); letter-spacing: -.01em; text-align: center; text-decoration: none; transition: transform .1s ease; -webkit-tap-highlight-color: transparent; }
.btn-wa:active { transform: translateY(2px); }
.btn-wa .ic { flex: none; font-size: 24px; }
.gift__micro { margin-top: 10px; text-align: center; font-size: 14px; line-height: 1.4; color: var(--muted); }
.gift__micro strong { color: var(--text); }
.bonus-done .gift--now .btn-wa { background: #fff; border: 2px solid var(--green); border-bottom-width: 4px; color: var(--green); }

/* The two smaller things, and what each night is for */
.after { margin-top: 40px; }
.after__t { padding-bottom: 12px; border-bottom: 3px solid var(--ink); font: 900 clamp(26px, 7vw, 36px)/1.04 var(--f-d); letter-spacing: -.022em; }
.after__item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 22px 0 24px; border-bottom: 1px solid var(--rule); scroll-margin-top: 12px; }
.after__n { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--hot); color: var(--hot-deep); font: 900 20px/1 var(--f-d); }
.after__n--hw { border-style: dashed; border-color: #B4AC9C; color: var(--muted); }
.after__item h3 { font: 900 clamp(23px, 6.2vw, 30px)/1.06 var(--f-d); letter-spacing: -.02em; }
.after__item p { margin-top: 6px; font-size: 17px; line-height: 1.5; }
.after__item .btn-line { margin-top: 14px; }
.twonights { margin-top: 32px; display: grid; gap: 10px; }
.twonights__n { padding: 16px 16px 18px; background: var(--kraft); border-left: 6px solid var(--hot); }
.twonights__n + .twonights__n { border-left-color: var(--green); }
.twonights__k { font: 700 11px/1.3 var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.twonights__k i { font-style: normal; opacity: .5; }
.twonights h3 { margin-top: 6px; font: 900 clamp(24px, 6.6vw, 32px)/1.04 var(--f-d); letter-spacing: -.02em; }
.twonights p:last-child { margin-top: 6px; font-size: 16.5px; line-height: 1.45; }

/* WhatsApp bar: at the bottom until the bonus is claimed */
.wa-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 9px 12px calc(9px + env(safe-area-inset-bottom)); background: var(--ink); border-top: 1px solid rgba(255, 255, 255, .16); }
.btn-wa--bar { min-height: 52px; max-width: 520px; margin-inline: auto; font-size: 16.5px; }
.bonus-done .wa-bar { display: none; }
@media (min-width: 760px) {
  .gift--lock { margin-inline: 0; padding: 40px 40px 40px; }
  .gift--now { padding: 34px 36px 34px; }
  .guide { grid-template-columns: 150px minmax(0, 1fr); gap: 28px; }
  .guide__title { font-size: 16px; } .guide__kick { font-size: 8px; } .guide__by { font-size: 8.5px; } .guide__stamp { font-size: 10px; }
  .inside { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; }
  .twonights { grid-template-columns: 1fr 1fr; }
  .plan a { flex-direction: row; display: flex; justify-content: center; align-items: center; gap: 10px; padding: 14px 8px; font-size: 15.5px; }
}

/* ---------- Thank-you v3: the lock. Dark, loud, one action: WhatsApp the team. ---------- */
.ty-dark { background: var(--ink); }
.tape { overflow: hidden; background: var(--hl); color: var(--ink); border-bottom: 3px solid var(--ink); }
.tape__track { display: flex; width: max-content; animation: slide 28s linear infinite; }
.tape span { display: flex; align-items: center; gap: 14px; padding: 8px 0 7px 14px; font: 800 11px/1 var(--f-m); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.tape span::after { content: ""; width: 34px; height: 11px; background: repeating-linear-gradient(-45deg, var(--ink) 0 4px, transparent 4px 8px); }

.fo-hero { padding-bottom: 34px; background: var(--ink); color: #fff; }
.mast--dark { border-bottom-color: rgba(255, 255, 255, .9); }
.mast--dark .mast__brand b { color: #fff; }
.mast--dark .mast__brand span { background: var(--hl); color: var(--ink); }
.mast--dark .mast__by { color: rgba(255, 255, 255, .6); }
.mast--dark .mast__by b { color: #fff; }
.ty__stamp--dark { border-color: #5BE38C; color: #5BE38C; }
.ty__stamp--dark .ic { background: #5BE38C; color: var(--ink); }
.fo-h1 { color: #fff; }
.fo-h1 .hl { color: var(--ink); }
.fo-sub { margin-top: 16px; max-width: 22em; font: 500 clamp(19px, 5.2vw, 24px)/1.34 var(--f-d); color: rgba(255, 255, 255, .88); }
.fo-sub strong { font-weight: 800; color: #fff; }
.fo-sub__loss { display: block; margin-top: 10px; font: 900 clamp(26px, 7.2vw, 38px)/1.02 var(--f-d); letter-spacing: -.024em; color: var(--hot); }

.vault { position: relative; margin-top: 26px; padding: 14px 14px 16px; border: 2px solid var(--hl); background: #0B141A; box-shadow: 0 0 0 6px rgba(255, 225, 77, .12), 0 0 70px rgba(255, 225, 77, .2); }
.vault__k { display: inline-flex; align-items: center; gap: 7px; padding: 5px 9px 4px; background: var(--hl); color: var(--ink); font: 800 10.5px/1.2 var(--f-m); letter-spacing: .12em; text-transform: uppercase; }
.vault__k i { font-style: normal; opacity: .5; }
.vault__k .ic { font-size: 13px; stroke-width: 2.6; }
.vault__chat { margin-top: 14px; display: grid; gap: 4px; }
.vault .locked__out { width: 100%; padding: 34px 14px; animation: glow 2.2s ease-in-out infinite; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 2.5px var(--hl), 0 0 0 0 rgba(255, 225, 77, .5); } 55% { box-shadow: 0 0 0 2.5px var(--hl), 0 0 0 13px rgba(255, 225, 77, 0); } }
.vault .locked__out span { font: 900 clamp(22px, 6.2vw, 28px)/1.1 var(--f-d); letter-spacing: -.02em; }
.vault .locked__out .ic { font-size: 30px; margin-bottom: 4px; }
.vault .locked__out small { margin-top: 2px; font: 500 13px/1.3 var(--f-b); letter-spacing: 0; }
.vault__cd { margin-top: 18px; display: grid; justify-items: center; gap: 9px; }
.vault__cd-label { font: 800 11px/1 var(--f-m); letter-spacing: .18em; text-transform: uppercase; color: var(--hl); }
.vault__units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; width: 100%; }
.vault__units > span { display: grid; justify-items: center; padding: 10px 4px 8px; background: var(--hl); color: var(--ink); }
.vault__units b { font: 800 clamp(30px, 9vw, 46px)/1 var(--f-m); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.vault__units i { margin-top: 5px; font: 700 9px/1 var(--f-m); font-style: normal; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.vault__when { margin-top: 12px; text-align: center; font: 700 12px/1.4 var(--f-m); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.vault__when b { color: #fff; } .vault__when i { font-style: normal; opacity: .5; }

/* The one thing to do now */
.fo-now { padding: 30px 0 30px; background: var(--hl); color: var(--ink); }
.fo-now__k { display: inline-block; padding: 5px 9px 4px; background: var(--ink); color: var(--hl); font: 800 11px/1.2 var(--f-m); letter-spacing: .12em; text-transform: uppercase; }
.fo-now__k i { font-style: normal; opacity: .5; }
.fo-now__t { margin-top: 14px; font: 900 clamp(38px, 10.8vw, 64px)/.96 var(--f-d); letter-spacing: -.032em; }
.fo-now__t span { display: block; }
.guide--now { margin-top: 22px; grid-template-columns: 96px minmax(0, 1fr); }
.guide--now .guide__cover { box-shadow: 4px 4px 0 var(--hot); }
.guide--now .guide__title { font-size: 10.5px; }
.guide--now .guide__stamp { bottom: 18px; }
.guide__name { font: 900 clamp(19px, 5.2vw, 24px)/1.08 var(--f-d); letter-spacing: -.016em; }
.guide--now .guide__lead { margin-top: 6px; font-size: 15.5px; line-height: 1.42; }
.btn-wa--xl { margin-top: 24px; min-height: 70px; border: 3px solid var(--ink); border-bottom-width: 7px; font-size: clamp(18px, 5.3vw, 23px); animation: nudge 2.8s ease-in-out infinite; }
.btn-wa--xl .ic { font-size: 28px; }
@keyframes nudge { 0%, 84%, 100% { transform: none; } 89% { transform: translateY(-4px); } 94% { transform: translateY(1px); } }
.btn-wa__done { display: none; }
.bonus-done .btn-wa--xl { animation: none; background: #fff; border-color: var(--green); color: var(--green); }
.bonus-done .btn-wa--xl .btn-wa__label { display: none; }
.bonus-done .btn-wa--xl .btn-wa__done { display: inline; font-size: .82em; }
.fo-now__micro { margin-top: 11px; text-align: center; font-size: 14.5px; line-height: 1.4; }
.fo-now__ticks { margin-top: 16px; display: grid; gap: 6px; }
.fo-now__ticks li { display: flex; align-items: flex-start; gap: 8px; font: 700 15px/1.35 var(--f-b); }
.fo-now__ticks .ic { flex: none; margin-top: 2px; stroke-width: 3.6; font-size: 15px; }

/* What they lose */
.fo-miss { padding: 42px 0 42px; background: var(--paper); color: var(--text); }
.fo-t { font: 900 clamp(36px, 10.2vw, 60px)/.98 var(--f-d); letter-spacing: -.03em; text-wrap: balance; }
.fo-t--light { color: #fff; }
.fo-t--light .hl { color: var(--ink); }
.vs { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: stretch; }
.vs__col { position: relative; min-width: 0; padding: 14px 12px 16px; }
.vs__col--out { background: #E4DCCB; border: 2px dashed #9D9483; color: #5F5A50; }
.vs__col--in { background: var(--ink); color: #fff; border: 2px solid var(--ink); box-shadow: 5px 5px 0 var(--hot); }
.vs__k { font: 800 11px/1.2 var(--f-m); letter-spacing: .12em; text-transform: uppercase; }
.vs__col--in .vs__k { color: var(--hl); }
.vs ul { margin-top: 14px; display: grid; gap: 11px; }
.vs li { display: grid; grid-template-columns: 17px minmax(0, 1fr); gap: 7px; font: 700 clamp(14px, 3.9vw, 17.5px)/1.25 var(--f-b); }
.vs .ic { margin-top: 2px; font-size: 16px; stroke-width: 3.6; }
.vs__col--out .ic { color: var(--red); }
.vs__col--in .ic { color: #5BE38C; }
.vs__void { position: absolute; right: 6px; top: 7px; padding: 3px 6px 2px; border: 2.5px solid var(--red); background: rgba(255, 255, 255, .55); color: var(--red); font: 800 10px/1 var(--f-m); letter-spacing: .12em; text-transform: uppercase; transform: rotate(8deg); }
.fo-proof { margin-top: 26px; padding: 20px 16px 18px; background: #fff; border: 2px solid var(--ink); text-align: center; }
.fo-proof__nums { display: flex; justify-content: center; align-items: flex-end; gap: 18px; }
.fo-proof__nums span { font: 700 10.5px/1.2 var(--f-m); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.fo-proof__nums b { display: block; font: 900 clamp(64px, 18vw, 100px)/.86 var(--f-d); letter-spacing: -.034em; color: var(--text); }
.fo-proof__nums .is-on b { color: var(--green); }
.fo-proof__nums .ic { font-size: 30px; margin-bottom: 26px; color: #A39B8B; }
.fo-proof__line { margin-top: 12px; font-size: 16.5px; line-height: 1.45; }
.fo-line { margin-top: 28px; font: 800 clamp(24px, 6.6vw, 36px)/1.12 var(--f-d); letter-spacing: -.02em; text-wrap: balance; }

/* Lock the date */
.fo-date { padding: 42px 0 42px; background: var(--ink); color: #fff; }
.fo-date .pass { margin-top: 24px; border: 2px solid rgba(255, 255, 255, .9); }
.pass__sub { margin-top: 6px; font: 700 13px/1.2 var(--f-b); color: var(--hl); }
.fo-date__btns { margin-top: 16px; }
.fo-date .btn-line { border-color: #fff; }
.fo-date__done { display: none; margin-top: 14px; align-items: center; gap: 8px; font: 700 16px/1.3 var(--f-b); color: #5BE38C; }
.fo-date__done .ic { stroke-width: 3.4; }
.calendar-done .fo-date__done { display: flex; }

/* Today's bonus in full, the homework, the small print */
.fo-guide { padding: 42px 0 0; background: var(--paper); color: var(--text); }
.fo-guide .fo-t { margin-top: 14px; font-size: clamp(30px, 8.4vw, 48px); line-height: 1.02; }
.fo-guide .inside { margin-top: 22px; }
.fo-guide .btn-wa--xl { margin-top: 24px; }
.hw { margin-top: 44px; padding-top: 22px; border-top: 3px solid var(--ink); }
.hw__k { font: 700 11px/1.3 var(--f-m); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hw__t { margin-top: 8px; font: 900 clamp(28px, 7.6vw, 40px)/1.02 var(--f-d); letter-spacing: -.024em; }
.hw__p { margin-top: 8px; font-size: 17px; line-height: 1.5; }
.ty3 .ty__foot { padding-bottom: 112px; }
.bonus-done .ty3 .ty__foot { padding-bottom: 40px; }

.wa-bar { display: flex; align-items: center; gap: 10px; }
.wa-bar__text { flex: 1; min-width: 0; font: 600 13px/1.25 var(--f-b); color: rgba(255, 255, 255, .85); }
.wa-bar__text b { color: var(--hl); }
.btn-wa--bar { flex: none; width: auto; max-width: none; min-height: 50px; margin: 0; padding-inline: 14px; font-size: 15.5px; }
.btn-wa--bar .ic { font-size: 21px; }
@media (min-width: 760px) {
  .fo-hero { padding-bottom: 56px; }
  .vault { padding: 24px 28px 26px; }
  .vault__chat { max-width: 520px; margin-inline: auto; }
  .vault__units { max-width: 520px; margin-inline: auto; }
  .fo-now, .fo-miss, .fo-date { padding: 64px 0 64px; }
  .fo-guide { padding-top: 64px; }
  .guide--now { grid-template-columns: 140px minmax(0, 1fr); }
  .vs { gap: 16px; } .vs__col { padding: 24px 24px 26px; } .vs li { gap: 10px; }
  .btn-wa--xl { max-width: 520px; margin-inline: auto; }
  .wa-bar { justify-content: center; } .wa-bar__text { flex: none; font-size: 15px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .printer:not(.is-in) .receipt { clip-path: none; }
  .js [data-inview]:not(.is-in) .seq { opacity: 1; transform: none; }
}