/* ===== HERO TALLY (Website/vendor/hero-tally.js) — port of the app door ticket ===== */
/* ===== WELCOME · "What it replaces" tally (modules/ui/welcome-tally.js) =====
   Lives in the carousel slot (#wc-carousel, order 3). Paper, ink, gilt. No
   emoji, no bitmaps. Stepper marks are roman numerals in the display face;
   the final mark is a lock that becomes a seal. Everything sized so the CTA
   stays above the fold on a 6.1" phone. */
.hero-tally{--wt-red:#9E2A2A;--wt-paper:#FCFAF4;--wt-line:#E4DCC4;--wt-perf:#D9C485;--wt-ink:#2E2C26;--wt-ink2:#5F5E5A;--wt-ink3:#888780;--wt-gold:#C9A84C;--wt-gold-deep:#9B7E26;--wt-fd:'Playfair Display',Georgia,serif;--wt-fb:'DM Sans',system-ui,sans-serif;width:100%;margin:0 0 26px}
.wt{width:100%;max-width:420px;margin:0;text-align:center;font-family:var(--wt-fb);--wt-green:#2E6B3F}
/* one ticket around the whole ledger */
.wt-ticket{position:relative;padding:18px 16px 12px;background:var(--wt-paper);border:1px solid var(--wt-line);border-radius:16px;box-shadow:0 18px 44px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.8) inset}
.wt-notch{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;background:var(--ink,#08080A);border:1px solid var(--wt-line);transform:translateY(-50%);z-index:3;pointer-events:none;box-shadow:inset 0 2px 3px rgba(40,30,10,.06)}
.wt-notch-l{left:-9px}.wt-notch-r{right:-9px}
.is-final .wt-ticket{border-color:rgba(201,168,76,.6);box-shadow:0 14px 36px rgba(155,126,38,.16),0 1px 0 rgba(255,255,255,.8) inset}

/* ── Replaced vs The Stage ─────────────────────────────────────────────── */
.wt-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:8px}
.wt-side{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left}
.wt-side-r{align-items:flex-end;text-align:right}
.wt-k{white-space:nowrap;font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:var(--wt-ink3);font-weight:500}
.wt-k-gold{color:var(--wt-gold-deep)}
.wt-v{font-family:var(--wt-fd);font-size:30px;line-height:1;letter-spacing:-.6px;color:var(--wt-red);font-variant-numeric:tabular-nums;white-space:nowrap}
.wt-v small{font-family:var(--wt-fb);font-size:12px;color:var(--wt-ink3);letter-spacing:0;margin-left:3px}
.wt-v-q{color:var(--wt-ink3)}
.wt-v .wt-answer{display:inline-block;color:var(--wt-green);animation:wtAnswer .7s cubic-bezier(.2,1.3,.4,1) forwards}
@keyframes wtAnswer{0%{opacity:0;transform:translateY(6px) scale(.92)}100%{opacity:1;transform:none}}
.is-final .wt-side-r .wt-k{color:var(--wt-green)}
.wt-mid{display:flex;align-items:center;gap:6px;padding-bottom:7px}
.wt-mid em{font-family:var(--wt-fd);font-style:italic;font-size:15px;color:var(--wt-gold-deep)}
.wt-mid-rule{width:14px;height:1px;background:var(--wt-gold);opacity:.6}

/* ── Stepper (dots; the seal is the only glyph) ───────────────────────── */
.wt-steps{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:14px;height:22px}
.wt-mark{cursor:pointer;outline:none;flex:none;width:7px;height:7px;border-radius:4px;background:rgba(26,26,26,.16);transition:width .35s cubic-bezier(.16,1,.3,1),background .35s,transform .35s}
.wt-mark:hover{background:var(--wt-gold)}
.wt-mark:focus-visible{box-shadow:0 0 0 2px var(--wt-gold)}
.wt-mark.is-done{background:var(--wt-gold)}
.wt-mark.is-now{width:22px;background:var(--wt-gold-deep)}
.wt-mark-final{width:22px;height:22px;border-radius:50%;background:var(--wt-paper);border:1px solid var(--wt-line);color:var(--wt-ink3);position:relative;margin-left:3px;display:flex;align-items:center;justify-content:center}
.wt-mark-final:hover{border-color:var(--wt-gold);color:var(--wt-gold-deep);background:var(--wt-paper)}
.wt-mark-final i{display:flex;position:absolute;inset:0;align-items:center;justify-content:center;transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
.wt-mark-final .wt-seal{opacity:0;transform:scale(.5) rotate(-40deg)}
.wt-mark-final.is-now,.is-final .wt-mark-final{width:22px;border-color:var(--wt-gold-deep);background:var(--wt-gold);color:#3a2e0a;transform:scale(1.14);box-shadow:0 4px 14px rgba(201,168,76,.5)}
.is-final .wt-mark-final .wt-lock{opacity:0;transform:scale(.6)}
.is-final .wt-mark-final .wt-seal{opacity:1;transform:none}


/* hidden costs (Context · Momentum · Time) */
.wt-toll{margin:14px auto 0;max-width:330px;text-align:left}
.wt-toll>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-top:1px dashed var(--wt-perf)}
.wt-toll>div:first-child{border-top:0}
.wt-toll dt{font-size:14px;color:var(--wt-ink2);line-height:1.3}
.wt-toll dd{margin:0;font-family:var(--wt-fd);font-style:italic;font-size:19px;color:var(--wt-red);white-space:nowrap;opacity:0;transform:translateX(8px)}
.is-on .wt-toll dd{animation:wtToll .5s cubic-bezier(.16,1,.3,1) forwards}
.is-on .wt-toll>div:nth-child(2) dd{animation-delay:.35s}
.is-on .wt-toll>div:nth-child(3) dd{animation-delay:.7s}
@keyframes wtToll{to{opacity:1;transform:none}}

/* final: the offer, listicle pricing pattern */
.wt-badge{display:inline-flex;align-items:center;gap:6px;background:var(--wt-ink);color:#FFF4CF;border-radius:999px;padding:5px 12px;white-space:nowrap;box-shadow:0 6px 16px rgba(0,0,0,.22);transform:rotate(-2deg);margin-bottom:8px}
.wt-badge .b-k{font-family:var(--wt-fd);font-style:italic;font-weight:500;font-size:13.5px;color:var(--wt-gold)}
.wt-badge .b-t{font-family:var(--wt-fb);font-weight:500;text-transform:uppercase;letter-spacing:.09em;font-size:10.5px}
.wt-price{margin-top:8px;line-height:1;display:flex;align-items:baseline;justify-content:center;gap:6px}
.wt-price s{font-family:var(--wt-fd);font-size:20px;color:var(--wt-ink3);text-decoration-color:var(--wt-red);text-decoration-thickness:1.5px}
.wt-price-num{font-family:var(--wt-fd);font-size:54px;letter-spacing:-2px;color:var(--wt-green)}
.wt-price-per{font-family:var(--wt-fb);font-size:15px;color:var(--wt-green);opacity:.8}
.wt-bill{font-size:13.5px;color:var(--wt-ink2);margin-top:6px}
.wt-bill b{color:var(--wt-ink);font-weight:500}
.wt-alt{font-size:12.5px;color:var(--wt-ink3);margin-top:4px}
.wt-strike{font-family:var(--wt-fd);font-size:14.5px;color:var(--wt-ink3);margin-top:10px;white-space:nowrap}
.wt-strike s{color:var(--wt-red);text-decoration:none;position:relative;display:inline-block}
.wt-strike s::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1.5px;background:var(--wt-red);transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.16,1,.3,1) .5s}
.is-final .wt-strike s::after{transform:scaleX(1)}

/* ── The card (a ticket) ───────────────────────────────────────────────── */
.wt-card{position:relative;margin-top:8px;height:min(224px,29dvh);min-height:200px;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent;outline:none}
.wt-card:focus-visible .wt-dwell{background:var(--wt-gold)}
.wt-slide{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:16px 8px 20px;opacity:0;transform:translateX(14px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1);pointer-events:none}
.wt-slide.is-past{transform:translateX(-14px)}
.wt-slide.is-on{opacity:1;transform:none;pointer-events:auto}
.wt-slide-in{width:100%}
.wt-cost{margin-top:10px;min-height:36px;display:flex;justify-content:center;align-items:center}
.wt-stamp{display:inline-block;font-family:var(--wt-fd);font-size:32px;line-height:1;color:var(--wt-red);letter-spacing:-.5px;transform:scale(1.35) rotate(-4deg);opacity:0;transition:none}
.is-on .wt-stamp{animation:wtStamp .55s cubic-bezier(.2,1.4,.4,1) .18s forwards}
@keyframes wtStamp{0%{opacity:0;transform:scale(1.35) rotate(-4deg)}60%{opacity:1;transform:scale(.96) rotate(-1.5deg)}100%{opacity:1;transform:scale(1) rotate(-1.5deg)}}
.wt-stamp small{font-family:var(--wt-fb);font-size:12px;color:var(--wt-ink3);margin-left:3px;letter-spacing:0}
.wt-cost-free{font-family:var(--wt-fd);font-style:italic;font-size:18px;color:var(--wt-gold-deep)}
.wt-rule{width:24px;height:1px;background:var(--wt-gold);margin:10px auto}
.wt-now{font-family:var(--wt-fd);font-style:italic;font-size:15.5px;line-height:1.4;color:var(--wt-ink2);margin:0 auto;max-width:280px}


/* dwell line + skip */
.wt-dwell{position:absolute;left:50%;bottom:0;width:120px;height:1px;background:var(--wt-line);transform:translateX(-50%)}
.wt-dwell i{display:block;height:100%;width:100%;background:var(--wt-gold);transform:scaleX(0);transform-origin:left}
.wt-dwell i.is-run{animation:wtDwell var(--wt-dwell,2600ms) linear forwards}
@keyframes wtDwell{to{transform:scaleX(1)}}
.is-final .wt-dwell{opacity:0}

/* dark welcome (.wc-dark) — tally stays on paper; nothing to do. */
@media (prefers-reduced-motion:reduce){
  .wt-slide,.wt-mark,.wt-seg,.wt-strike s::after{transition:none}
  .is-on .wt-stamp{animation:none;opacity:1;transform:rotate(-1.5deg)}
  .wt-v .wt-answer{animation:none}
  .is-on .wt-toll dd{animation:none;opacity:1;transform:none}
}
@media (min-width:900px){
  .wt{max-width:100%}
  .wt-card{height:236px}
  .wt-now{font-size:17px;max-width:340px}
}

/* narrow phones (SE, Mini, 318-360) */
@media (max-width:374px){
  .wt-ticket{padding:14px 12px 10px}
  .wt-k{font-size:9px;letter-spacing:2px}
  .wt-v{font-size:24px}
  .wt-mid em{font-size:13px}.wt-mid-rule{width:8px}
  .wt-card{height:232px;min-height:232px}
  .wt-stamp{font-size:27px}
  .wt-now{font-size:14px}
  .wt-price-num{font-size:44px}.wt-price s{font-size:17px}
  .wt-strike{font-size:12.5px}
  .wt-toll dt{font-size:13px}.wt-toll dd{font-size:17px}
}

/* ===== LANDER SKIN: blend into the ink hero. Overrides the paper ticket above.
   Panel = the hero's own surface with a gold hairline; type in --fg / --fg-dim;
   stamps in a warm red that holds on black; The Stage answer in gold-hi.
   Tighter vertical budget so Get Started stays the brightest thing on screen. */
.hero-tally{--wt-ink:var(--fg,#F2EFE9);--wt-ink2:var(--fg-dim,#ADA89D);--wt-ink3:var(--fg-faint,#8A857A);
  --wt-red:#E07A6A;--wt-green:var(--gold-hi,#E7CF82);--wt-gold:var(--gold,#D9BA61);--wt-gold-deep:var(--gold-hi,#E7CF82);
  --wt-paper:transparent;--wt-line:rgba(201,168,76,.22);--wt-perf:rgba(201,168,76,.32);margin:0 0 22px}
.hero-tally .wt-ticket{padding:14px 16px 8px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.015));border:1px solid var(--line,rgba(201,168,76,.22));border-radius:14px;box-shadow:none}
.hero-tally .is-final .wt-ticket{border-color:rgba(217,186,97,.55);box-shadow:0 0 0 1px rgba(217,186,97,.12),0 18px 40px rgba(217,186,97,.08)}
.hero-tally .wt-notch{display:none}
.hero-tally .wt-mark{background:rgba(242,239,233,.16)}
.hero-tally .wt-mark.is-done{background:var(--gold,#D9BA61)}
.hero-tally .wt-mark.is-now{background:var(--gold-hi,#E7CF82)}
.hero-tally .wt-mark-final{background:transparent;border-color:rgba(201,168,76,.4);color:var(--fg-dim,#ADA89D)}
.hero-tally .wt-mark-final.is-now,.hero-tally .is-final .wt-mark-final{background:var(--gold,#D9BA61);border-color:var(--gold-hi,#E7CF82);color:#3D3008}
.hero-tally .wt-v{color:var(--wt-red)}
.hero-tally .wt-v-q{color:var(--fg-faint,#8A857A)}
.hero-tally .wt-v .wt-answer{color:var(--gold-hi,#E7CF82)}
.hero-tally .is-final .wt-side-r .wt-k{color:var(--gold-hi,#E7CF82)}
.hero-tally .wt-mid em{color:var(--gold,#D9BA61)}
.hero-tally .wt-mid-rule{background:var(--gold,#D9BA61);opacity:.5}
.hero-tally .wt-now{color:var(--fg-dim,#ADA89D)}
.hero-tally .wt-cost-free{color:var(--gold-hi,#E7CF82)}
.hero-tally .wt-toll dt{color:var(--fg-dim,#ADA89D)}
.hero-tally .wt-toll>div{border-top-color:rgba(201,168,76,.22)}
.hero-tally .wt-badge{background:var(--gold,#D9BA61);color:#3D3008;box-shadow:0 6px 16px rgba(0,0,0,.35)}
.hero-tally .wt-badge .b-k{color:#3D3008}
.hero-tally .wt-price s{color:var(--fg-faint,#8A857A)}
.hero-tally .wt-price-num,.hero-tally .wt-price-per{color:var(--gold-hi,#E7CF82)}
.hero-tally .wt-bill{color:var(--fg-dim,#ADA89D)}.hero-tally .wt-bill b{color:var(--fg,#F2EFE9)}
.hero-tally .wt-alt,.hero-tally .wt-strike{color:var(--fg-faint,#8A857A)}
.hero-tally .wt-dwell{background:rgba(201,168,76,.18)}
.hero-tally .wt-dwell i{background:var(--gold,#D9BA61)}
/* vertical budget: the ticket must not out-compete the CTA below it */
.hero-tally .wt-card{height:196px;min-height:196px;margin-top:4px}
.hero-tally .wt-steps{margin-top:10px;height:18px}
.hero-tally .wt-v{font-size:26px}
.hero-tally .wt-stamp{font-size:28px}
.hero-tally .wt-now{font-size:14.5px}
.hero-tally .wt-price-num{font-size:46px}
.hero-tally .wt-toll{margin-top:8px}.hero-tally .wt-toll>div{padding:6px 0}
.hero-tally .wt-toll dt{font-size:13px}.hero-tally .wt-toll dd{font-size:17px}
@media (min-width:900px){
  .hero-tally .wt-card{height:208px;min-height:208px}
}
/* under the CTA: breathing room from the button, tighter to the proof quote */
.hero-copy .cta-wrap + .hero-tally{margin:22px 0 6px}

/* final: two plan cards, listicle pattern (Monthly | Yearly hi) */
.wt-plans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px;align-items:stretch;text-align:center}
.wt-plan{position:relative;background:var(--wt-paper);border:1.5px solid rgba(0,0,0,.10);border-radius:12px;padding:14px 8px 10px}
.wt-plan.hi{border-color:var(--wt-gold);box-shadow:0 12px 30px rgba(155,126,38,.20)}
.wt-plan .pn{font-family:var(--wt-fb,var(--fb));font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--wt-ink3,var(--ink3))}
.wt-plan .pp{font-family:var(--wt-fd,var(--fd));font-weight:700;font-size:30px;line-height:1;margin-top:6px;color:var(--wt-ink,var(--ink));letter-spacing:-.5px}
.wt-plan .pp small{font-family:var(--wt-fb,var(--fb));font-weight:500;font-size:.4em;color:var(--wt-ink2,var(--ink2));letter-spacing:0;margin-left:1px}
.wt-plan .pp s{font-size:.5em;font-weight:400;color:var(--wt-ink3,var(--ink3));margin-right:4px;text-decoration-color:var(--wt-red)}
.wt-plan.hi .pp{color:var(--wt-green)}
.wt-plan .pe{margin-top:6px;font-family:var(--wt-fb,var(--fb));font-size:12px;line-height:1.3;color:var(--wt-ink2,var(--ink2))}
.wt-plan .pe b{font-family:var(--wt-fd,var(--fd));font-size:15px;color:var(--wt-ink,var(--ink));font-weight:500}
.wt-plan .wt-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-2deg);margin:0;padding:4px 10px}
.wt-plan .wt-badge .b-k{font-size:12px}.wt-plan .wt-badge .b-t{font-size:9.5px}
.wt-final .wt-strike{margin-top:10px;font-size:12.5px;white-space:normal}

.hero-tally .wt-plan{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.hero-tally .wt-plan.hi{border-color:var(--gold,#D9BA61);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.hero-tally .wt-plan .pp{color:var(--fg,#F2EFE9)}
.hero-tally .wt-plan.hi .pp{color:var(--gold-hi,#E7CF82)}
.hero-tally .wt-plan .pe b{color:var(--fg,#F2EFE9)}
.hero-tally .wt-card{height:226px;min-height:226px}

@media (max-width:374px){
  .wt-plans{gap:8px;margin-top:12px}
  .wt-plan{padding:12px 5px 8px;min-width:0}
  .wt-plan .pn{font-size:9px;letter-spacing:.1em}
  .wt-plan .pp{font-size:23px;letter-spacing:-.4px}
  .wt-plan .pp s{font-size:.5em;margin-right:2px}
  .wt-plan .pe{font-size:10.5px}.wt-plan .pe b{font-size:13px}
  .wt-plan .wt-badge{top:-11px;padding:3px 8px}.wt-plan .wt-badge .b-k{font-size:10.5px}.wt-plan .wt-badge .b-t{font-size:8.5px}
  .wt-final .wt-strike{font-size:11.5px;margin-top:8px}
}
.wt-plans>*{min-width:0}

/* the two plans are a choice, not a selection: same border, an "or" between them */
.wt-plans{grid-template-columns:1fr auto 1fr;gap:6px}
.wt-plan.hi{border-color:rgba(0,0,0,.10);box-shadow:none}
.wt-or{align-self:center;font-family:var(--wt-fd,var(--fd));font-style:italic;font-size:17px;color:var(--wt-ink3,var(--ink3));padding:0 2px}

.hero-tally .wt-plan.hi{border-color:rgba(255,255,255,.12);box-shadow:none}
.hero-tally .wt-or{color:var(--gold,#D9BA61)}

.wt-plan .pe{font-size:12px}
.wt-plan .pe s{color:var(--wt-ink3,var(--ink3));text-decoration-color:var(--wt-red)}
.wt-plan .pe b{font-family:var(--wt-fd,var(--fd));font-size:14px;font-weight:500}

.wt-final .wt-plans{margin-top:16px}
.wt-fine{margin-top:12px;font-family:var(--wt-fb,var(--fb));font-size:11.5px;letter-spacing:.04em;color:var(--wt-ink3,var(--ink3))}

/* ===== final: the listicle offer, stacked (yearly hero → or → monthly) ===== */
.wt-offer{max-width:360px;margin:8px auto 0}
.wt-offer-h{font-size:22px}
.wt-offer .wt-plan{position:relative;background:none;border:0;box-shadow:none;padding:22px 12px 12px;text-align:center}
.wt-offer .wt-plan.hi{background:rgba(201,168,76,.10);border-radius:16px;padding-top:26px}
.wt-offer .wt-plan .pn{font-family:var(--wt-fb,var(--fb));font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--wt-ink3,var(--ink3))}
.wt-offer .wt-plan .pp{font-family:var(--wt-fd,var(--fd));font-weight:700;line-height:1;margin-top:6px;color:var(--wt-ink,var(--ink));letter-spacing:-1px}
.wt-offer .wt-plan.hi .pp{font-size:clamp(40px,11vw,54px)}
.wt-offer .wt-plan.mo{padding:8px 12px 4px}
.wt-offer .wt-plan.mo .pp{font-size:clamp(30px,8vw,38px)}
.wt-offer .wt-plan .pp small{font-family:var(--wt-fb,var(--fb));font-weight:500;font-size:.4em;color:var(--wt-ink2,var(--ink2));letter-spacing:0}
.wt-offer .wt-plan .pe{margin-top:6px;font-family:var(--wt-fb,var(--fb));font-size:13.5px;color:var(--wt-ink2,var(--ink2))}
.wt-offer .wt-plan .pe s{color:var(--wt-ink3,var(--ink3));text-decoration-color:var(--wt-red)}
.wt-offer .wt-plan .pe b{font-family:var(--wt-fd,var(--fd));font-size:17px;font-weight:600;color:var(--wt-ink,var(--ink))}
.wt-offer .wt-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%) rotate(-2deg);margin:0}
.wt-f-or{display:flex;align-items:center;gap:14px;margin:6px 0 0}
.wt-f-or::before,.wt-f-or::after{content:'';flex:1;border-top:1.5px dashed rgba(0,0,0,.16)}
.wt-f-or span{font-family:var(--wt-fc,'Caveat',cursive);font-weight:700;font-size:28px;line-height:1;color:var(--wt-gold-deep,var(--gold-deep));transform:rotate(-4deg)}
.wt-fine{margin-top:8px}
/* the offer is taller than the item slides: let the well grow for it */
.wt-slide.wt-final.is-on{position:relative}
.is-final .wt-card{height:auto;min-height:0;transition:height .4s cubic-bezier(.16,1,.3,1)}
.is-final .wt-dwell{display:none}

.hero-tally .wt-offer .wt-plan.hi{background:rgba(217,186,97,.10)}
.hero-tally .wt-f-or::before,.hero-tally .wt-f-or::after{border-top-color:rgba(201,168,76,.28)}
.hero-tally .wt-f-or span{color:var(--gold,#D9BA61)}
.hero-tally .wt-offer .wt-plan .pp,.hero-tally .wt-offer .wt-plan .pe b{color:var(--fg,#F2EFE9)}
.hero-tally .wt-offer .wt-plan.hi .pp{color:var(--gold-hi,#E7CF82)}

/* headline clears the badge: the badge hangs 13px above the yearly card */
.wt-offer{margin-top:22px}
.wt-offer-h{margin-bottom:0}

/* ── Homepage language (2026-09-16) ───────────────────────────────────────────
   The app door and the paid lander now run the same walk: a numbered rail,
   a headline, the Replaces line, one mini-beat, and the product shot. The
   shots carry real alpha, which is the only reason they can sit on this dark
   page at all — a multiply-blended PNG composites to black here. */
.hero-tally .wt-mark-n{
  width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--fb,system-ui);font-weight:700;font-size:12px;
  color:var(--fg-faint,#8A857A);
  background:#191921;border:1.5px solid rgba(201,168,76,.32);
  transition:transform .2s var(--ease),background .2s,color .2s,border-color .2s;
}
.hero-tally .wt-mark-n.is-done{
  background:linear-gradient(160deg,var(--gold-hi,#E7CF82),var(--gold-deep,#9B7E26) 82%);
  border-color:var(--gold,#D9BA61);color:#2A2107;
}
.hero-tally .wt-mark-n.is-now{
  background:var(--fg,#F2EFE9);border-color:var(--fg,#F2EFE9);color:var(--ink,#08080A);
  transform:scale(1.16);box-shadow:0 0 0 3px rgba(217,186,97,.22);
}
.hero-tally .wt-h{
  font-family:var(--fd,Georgia,serif);font-weight:600;
  font-size:clamp(20px,5.4vw,26px);line-height:1.16;letter-spacing:-.02em;
  margin:0 0 6px;color:var(--fg,#F2EFE9);text-align:center;
}
.hero-tally .wt-rep{
  margin:0 0 12px;font-size:clamp(11px,3vw,13px);line-height:1.35;
  color:var(--fg-dim,#ADA89D);text-align:center;
}
.hero-tally .wt-rep em{
  font-style:normal;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:#E0756B;margin-right:5px;
}
.hero-tally .wt-rep b{font-family:var(--fd,Georgia,serif);font-weight:600;color:#E0756B;white-space:nowrap}
.hero-tally .wt-bul{
  display:flex;align-items:center;gap:12px;text-align:left;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);
  border-radius:16px;padding:13px 15px;margin:0 0 14px;
}
.hero-tally .wt-bul .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hero-tally .wt-bul .tx b{font-size:15px;line-height:1.24;color:var(--fg,#F2EFE9);font-weight:700}
.hero-tally .wt-bul .tx span{font-size:13px;line-height:1.34;color:var(--fg-faint,#8A857A)}
.hero-tally .wt-bul .tag{
  flex:0 0 auto;align-self:flex-start;font-size:10.5px;letter-spacing:.06em;
  font-weight:700;color:#E0756B;white-space:nowrap;
}
.hero-tally .wt-shot{width:100%;margin:0;display:block}
.hero-tally .wt-shot img{width:100%;height:auto;display:block}
@media (max-width:420px){
  .hero-tally .wt-mark-n{width:22px;height:22px;font-size:11px}
  .hero-tally .wt-bul{padding:11px 13px}
  .hero-tally .wt-bul .tx b{font-size:14px}
  .hero-tally .wt-bul .tx span{font-size:12.5px}
}

/* --- listicle-style shots inside the tally card --- */
.hero-tally .wt-card{height:min(430px,54dvh);min-height:372px}
.hero-tally .wt-slide{align-items:stretch;padding:14px 10px 0}
.hero-tally .wt-slide-in{height:100%;display:flex;flex-direction:column;gap:8px}
.hero-tally .wt-slide-in.wt-noshot{justify-content:center;gap:10px}
.hero-tally .wt-shot{flex:1 1 auto;min-height:0;width:100%;margin:2px 0 0}
.hero-tally .wt-shot img{width:100%;height:100%;display:block;object-fit:contain;object-position:center bottom}
@media (max-width:420px){
  .hero-tally .wt-card{height:min(400px,52dvh);min-height:344px}
}
/* tighter stack so the shot gets the room */
.hero-tally .wt-h{font-size:clamp(19px,4.9vw,25px);margin:0 0 4px}
.hero-tally .wt-rep{margin:0 0 9px;font-size:clamp(10px,2.75vw,12.5px);line-height:1.3}
.hero-tally .wt-bul{padding:10px 12px;margin:0 0 8px;border-radius:14px;gap:10px}
.hero-tally .wt-bul .tx b{font-size:14px;line-height:1.2}
.hero-tally .wt-bul .tx span{font-size:12px;line-height:1.3}

/* ===== CREAM PANEL (2026-09-16) ==============================================
   The shots are alpha-baked to DARKEN what's behind them (black at
   alpha = 255 - luminance) — that's the multiply trick made permanent. On the
   ink hero they composite to mud. So the card gets its own cream panel, the
   same paper the app door stands on, and the hero stays dark around it. */
.hero-tally{
  --wt-ink:#2E2C26;--wt-ink2:#5F5E5A;--wt-ink3:#8B897F;
  --wt-red:#9E2A2A;--wt-green:#2E6B3F;
  --wt-gold:#C9A84C;--wt-gold-deep:#9B7E26;
  --wt-paper:#FCFAF4;--wt-line:#E4DCC4;--wt-perf:#D9C485;
}
.hero-tally .wt-ticket{
  padding:16px 14px 10px;background:#FBF7EB;
  border:1px solid rgba(155,126,38,.28);border-radius:18px;
  box-shadow:0 22px 50px rgba(0,0,0,.45),0 1px 0 rgba(255,255,255,.85) inset;
}
.hero-tally .is-final .wt-ticket{border-color:rgba(155,126,38,.55);box-shadow:0 22px 50px rgba(0,0,0,.45),0 0 0 1px rgba(155,126,38,.18)}

/* header row */
.hero-tally .wt-k{color:var(--wt-ink3)}
.hero-tally .wt-k-gold{color:var(--wt-gold-deep)}
.hero-tally .wt-v{color:var(--wt-red)}
.hero-tally .wt-v small{color:var(--wt-ink3)}
.hero-tally .wt-v-q{color:var(--wt-ink3)}
.hero-tally .wt-v .wt-answer{color:var(--wt-green)}
.hero-tally .is-final .wt-side-r .wt-k{color:var(--wt-green)}
.hero-tally .wt-mid em{color:var(--wt-gold-deep)}
.hero-tally .wt-mid-rule{background:var(--wt-gold);opacity:.6}

/* numbered rail on paper */
.hero-tally .wt-mark-n{
  background:#FFFDF6;border:1.5px solid rgba(155,126,38,.30);color:var(--wt-ink3);
  box-shadow:0 1px 2px rgba(60,48,12,.06);
}
.hero-tally .wt-mark-n.is-done{
  background:linear-gradient(160deg,#E8D08A,var(--wt-gold-deep) 88%);
  border-color:var(--wt-gold-deep);color:#3A2E0A;
}
.hero-tally .wt-mark-n.is-now{
  background:#2E2C26;border-color:#2E2C26;color:#FFF4CF;
  transform:scale(1.16);box-shadow:0 0 0 3px rgba(155,126,38,.20);
}
.hero-tally .wt-mark-final{background:#FFFDF6;border-color:rgba(155,126,38,.30);color:var(--wt-ink3)}
.hero-tally .wt-mark-final.is-now,.hero-tally .is-final .wt-mark-final{background:var(--wt-gold);border-color:var(--wt-gold-deep);color:#3A2E0A}

/* beat typography */
.hero-tally .wt-h{color:var(--wt-ink)}
.hero-tally .wt-rep{color:var(--wt-ink2)}
.hero-tally .wt-rep em,.hero-tally .wt-rep b{color:var(--wt-red)}
.hero-tally .wt-bul{
  background:#fff;border:1px solid rgba(0,0,0,.07);
  box-shadow:0 10px 26px rgba(60,48,12,.10);
}
.hero-tally .wt-bul .tx b{color:var(--wt-ink)}
.hero-tally .wt-bul .tx span{color:var(--wt-ink3)}
.hero-tally .wt-bul .tag{color:var(--wt-red)}

/* hidden-costs beat */
.hero-tally .wt-toll dt{color:var(--wt-ink2)}
.hero-tally .wt-toll dd{color:var(--wt-red)}
.hero-tally .wt-toll>div{border-top-color:var(--wt-perf)}

/* dwell bar */
.hero-tally .wt-dwell{background:rgba(155,126,38,.16)}
.hero-tally .wt-dwell i{background:var(--wt-gold-deep)}

/* ===== the offer, two columns (yearly leads, "or" between) ================= */
.hero-tally .wt-offer{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;
  max-width:420px;width:100%;margin:16px auto 0;
}
.hero-tally .wt-offer .wt-plan{background:none;border:0;box-shadow:none;padding:18px 4px 8px;text-align:center}
.hero-tally .wt-offer .wt-plan.hi{background:rgba(155,126,38,.10);border-radius:16px;padding:22px 6px 10px}
.hero-tally .wt-offer .wt-plan.mo{align-self:start;padding:22px 4px 10px}
.hero-tally .wt-offer .wt-plan .pn{color:var(--wt-ink3)}
.hero-tally .wt-offer .wt-plan .pp{color:var(--wt-ink)}
.hero-tally .wt-offer .wt-plan.hi .pp{font-size:clamp(27px,7.6vw,36px);color:var(--wt-ink)}
.hero-tally .wt-offer .wt-plan.mo .pp{font-size:clamp(23px,6.2vw,30px)}
.hero-tally .wt-offer .wt-plan .pp small{color:var(--wt-ink2)}
.hero-tally .wt-offer .wt-plan .pe{margin-top:5px;font-size:12px;line-height:1.3;color:var(--wt-ink2);white-space:nowrap}
.hero-tally .wt-offer .wt-plan .pe b{color:var(--wt-gold-deep);font-size:15px}
.hero-tally .wt-f-or{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;margin:0;padding:0 8px;
}
.hero-tally .wt-f-or::before,.hero-tally .wt-f-or::after{
  content:'';flex:1;width:0;border-top:0;border-left:1.5px dashed rgba(60,48,12,.20);
}
.hero-tally .wt-f-or span{font-size:24px;color:var(--wt-gold-deep)}
.hero-tally .wt-badge{background:#2E2C26;color:#FFF4CF;box-shadow:0 6px 16px rgba(0,0,0,.28)}
.hero-tally .wt-badge .b-k{color:var(--wt-gold)}
.hero-tally .wt-fine{color:var(--wt-ink3);margin-top:10px}
@media (max-width:360px){
  .hero-tally .wt-f-or{padding:0 4px}
  .hero-tally .wt-f-or span{font-size:20px}
  .hero-tally .wt-offer .wt-plan .pe{font-size:11px}
}

/* sits between the headline and Get Started now, not under it */
.hero-copy .hero-tally{margin:18px 0 20px}

/* ===== stubs, arrows, and the shot above the beat (2026-09-16) ============= */
/* the ticket is punched again — the notches read as holes in the cream */
.hero-tally .wt-notch{
  display:block;background:var(--ink,#08080A);
  border:1px solid rgba(155,126,38,.28);
  box-shadow:inset 0 2px 3px rgba(40,30,10,.10);
}
.hero-tally .wt-notch-l{left:-9px}
.hero-tally .wt-notch-r{right:-9px}
/* perforation between the stub (header + rail) and the body */
.hero-tally .wt-card{
  border-top:1px dashed var(--wt-perf);
  padding-top:6px;margin-top:10px;
}

/* quiet arrow discs, vertically centred on the deck — the app door's slider */
.hero-tally .wt-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:34px;height:34px;border-radius:50%;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:#FCF9EF;border:1px solid rgba(155,126,38,.30);color:#8B897F;
  box-shadow:0 2px 10px rgba(0,0,0,.10);
  cursor:pointer;appearance:none;-webkit-appearance:none;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .2s,background .2s,border-color .2s,transform .2s cubic-bezier(.16,1,.3,1);
}
.hero-tally .wt-prev{left:-4px}
.hero-tally .wt-next{right:-4px}
.hero-tally .wt-arrow svg{width:17px;height:17px;display:block}
.hero-tally .wt-arrow:hover{background:#FFFDF6;border-color:rgba(155,126,38,.50);color:#5F5E5A}
.hero-tally .wt-arrow:active{transform:translateY(-50%) scale(.94)}
.hero-tally .wt-arrow:disabled{opacity:.2;pointer-events:none}
.hero-tally .wt-next:not(:disabled){animation:wtDiscPulse 2.4s ease-in-out infinite}
@keyframes wtDiscPulse{
  0%,100%{box-shadow:0 2px 10px rgba(0,0,0,.10),0 0 0 0 rgba(155,126,38,.34)}
  50%{box-shadow:0 2px 10px rgba(0,0,0,.10),0 0 0 11px rgba(155,126,38,0)}
}
@media (prefers-reduced-motion:reduce){.hero-tally .wt-next{animation:none}}
/* keep the beats clear of the discs */
.hero-tally .wt-slide{padding:12px 34px 0}

/* shot leads, the beat card sits under it */
.hero-tally .wt-shot{flex:1 1 auto;min-height:0;margin:2px 0 0}
.hero-tally .wt-bul{margin:8px 0 2px;flex:0 0 auto}
.hero-tally .wt-shot-viz{display:flex;align-items:center;justify-content:center}
.hero-tally .wt-funnel{width:100%;height:100%;display:block;max-height:100%}

/* notches ride the tear line, not the middle — --wt-tear is set on mount */
.hero-tally .wt-notch{top:var(--wt-tear,50%);width:15px;height:15px}
/* arrows live inside the well so they never collide with the stub notches */
.hero-tally .wt-prev{left:4px}
.hero-tally .wt-next{right:4px}
.hero-tally .wt-slide{padding:12px 40px 0}
/* the funnel fills the width it's given, not the height */
.hero-tally .wt-shot-viz{align-items:center}
.hero-tally .wt-funnel{width:100%;height:auto;max-height:100%}
/* the beat card is a footnote to the shot, not the other way round */
.hero-tally .wt-bul .tx b{font-size:13.5px}
.hero-tally .wt-bul .tx span{font-size:11.5px;line-height:1.28}
.hero-tally .wt-bul{padding:9px 11px}
/* the funnel is a block, not a flex child — it takes the full column width */
.hero-tally .wt-shot-viz{display:block;align-self:center;width:100%}
.hero-tally .wt-funnel{width:100%;height:auto;max-height:100%;margin:0 auto}
/* arrows overlay the shot (the app door's behaviour) — the beats keep the full column */
.hero-tally .wt-slide{padding:12px 10px 0}
.hero-tally .wt-prev{left:0}
.hero-tally .wt-next{right:0}
.hero-tally .wt-bul{margin-inline:6px}
/* the offer sizes to itself, and the slider rails step out of its way */
.hero-tally .is-final .wt-card{height:auto;min-height:0}
.hero-tally .is-final .wt-arrow{opacity:0;pointer-events:none}
.hero-tally .is-final .wt-slide.wt-final{padding-bottom:10px}

/* ===== ticket-stub testimonials, inside the beat they're about ============= */
.hero-tally .wt-bul .tag{display:none}          /* "Replaces" already carries the money */
.hero-tally .wt-bul{gap:0}
.hero-tally .wt-tm{
  --wt-tm-stub:74px;
  flex:0 0 auto;margin:8px 6px 2px;
  display:grid;grid-template-columns:var(--wt-tm-stub) 1fr;align-items:stretch;
  position:relative;background:#FCFAF4;border:.5px solid #E5E2D8;border-radius:6px;
  text-align:left;filter:drop-shadow(0 6px 14px rgba(60,48,12,.16));
  transform:rotate(-1.2deg);
}
.hero-tally .wt-tm::before,.hero-tally .wt-tm::after{
  content:"";position:absolute;left:var(--wt-tm-stub);z-index:2;
  width:10px;height:10px;border-radius:50%;background:#FBF7EB;
  transform:translateX(-50%);pointer-events:none;
}
.hero-tally .wt-tm::before{top:-5px}
.hero-tally .wt-tm::after{bottom:-5px}
.hero-tally .wt-tm-side{
  padding:9px 6px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  border-right:1.5px dashed #D9C485;border-radius:6px 0 0 6px;min-width:0;
  background:linear-gradient(180deg,#FBF1D2 0%,#FDF7E5 100%);
}
.hero-tally .wt-tm-side img{
  width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:center 18%;
  display:block;border:1.5px solid rgba(155,126,38,.4);box-shadow:0 2px 5px rgba(0,0,0,.14);
}
.hero-tally .wt-tm-side figcaption{
  margin:0;font-family:var(--wt-fd);font-size:10px;font-style:italic;font-weight:500;
  color:#4F4B43;line-height:1.15;text-align:center;
}
.hero-tally .wt-tm-body{padding:9px 11px;display:flex;align-items:center;background:#FCFAF4;border-radius:0 6px 6px 0}
.hero-tally .wt-tm blockquote{
  margin:0;font-family:var(--wt-fd);font-weight:500;
  font-size:13px;line-height:1.34;color:#2E2C26;
}
/* the walk carries more now — give it the room */
.hero-tally .wt-card{height:min(500px,60dvh);min-height:406px}
@media (max-width:420px){.hero-tally .wt-card{height:min(470px,58dvh);min-height:384px}}
/* the rails ride the shot — --wt-arrow-y is set on every step */
.hero-tally .wt-arrow{top:var(--wt-arrow-y,50%)}
/* compact stub: proof, not a paragraph */
.hero-tally .wt-tm{--wt-tm-stub:66px;margin:7px 6px 2px}
.hero-tally .wt-tm-side{padding:7px 5px;gap:4px}
.hero-tally .wt-tm-side img{width:36px;height:36px}
.hero-tally .wt-tm-side figcaption{font-size:9px}
.hero-tally .wt-tm-body{padding:7px 10px}
.hero-tally .wt-tm blockquote{font-size:12px;line-height:1.3}
.hero-tally .wt-bul{padding:8px 11px}
/* the shot never collapses below a readable size, whatever else is on the beat */
.hero-tally .wt-shot{min-height:96px}

/* ===== rail, in-card CTA, tighter to the headline (2026-09-16) ============= */
/* the discs are strung on a line that fills as the walk advances */
.hero-tally .wt-steps{position:relative;--wt-n:0;--wt-seg:9}
.hero-tally .wt-rail{
  position:absolute;left:13px;right:13px;top:50%;height:2px;margin-top:-1px;
  background:rgba(155,126,38,.22);border-radius:2px;z-index:0;
}
.hero-tally .wt-rail-fill{
  position:absolute;left:0;top:0;height:100%;border-radius:2px;
  width:calc(100% * var(--wt-n) / var(--wt-seg));
  background:linear-gradient(90deg,var(--wt-gold-deep),var(--wt-gold));
  transition:width .45s cubic-bezier(.16,1,.3,1);
}
.hero-tally .wt-mark{position:relative;z-index:1}

/* the offer closes with the button, inside the ticket */
.hero-tally .wt-cta{
  display:block;width:100%;max-width:340px;margin:14px auto 0;
  text-align:center;padding:13px 18px;border-radius:999px;
  font-family:var(--wt-fb);font-weight:700;font-size:16px;letter-spacing:-.01em;
  color:#2A2107;text-decoration:none;
  background:linear-gradient(180deg,#E8D08A,#C9A84C 52%,#A98A2E);
  border:1px solid rgba(155,126,38,.55);
  box-shadow:0 10px 24px rgba(155,126,38,.28),0 1px 0 rgba(255,255,255,.5) inset;
}
.hero-tally .wt-cta:hover{filter:brightness(1.05)}
.hero-tally .wt-cta:active{transform:translateY(1px)}
.hero-tally .wt-fine{margin-top:9px}

/* the rails have no business on the offer */
.hero-tally .is-final .wt-arrow{display:none}

/* sits closer under the headline */
.hero-copy .hero-tally{margin:6px 0 18px}
/* the hero button steps aside for the one inside the offer */
.hero-copy.wt-offer-open .cta-wrap{display:none}

/* ===== the quote gets the whole card, like the listicle's quote beat ======= */
.hero-tally .wt-quote .wt-slide-in{justify-content:center;gap:0}
.hero-tally .wt-quote .wt-tm{
  --wt-tm-stub:104px;margin:0 2px;transform:rotate(-1.4deg);
  filter:drop-shadow(0 10px 22px rgba(60,48,12,.20));
}
.hero-tally .wt-quote .wt-tm-side{padding:14px 9px;gap:8px}
.hero-tally .wt-quote .wt-tm-side img{width:64px;height:64px}
.hero-tally .wt-quote .wt-tm-side figcaption{font-size:12px}
.hero-tally .wt-quote .wt-tm-body{padding:18px 16px}
.hero-tally .wt-quote .wt-tm blockquote{font-size:clamp(15px,4.2vw,19px);line-height:1.38}
.hero-tally .wt-quote .wt-tm::before,.hero-tally .wt-quote .wt-tm::after{width:12px;height:12px}
/* the beats carry the shot again, so the card goes back to the shorter budget */
.hero-tally .wt-card{height:min(440px,54dvh);min-height:368px}
@media (max-width:420px){.hero-tally .wt-card{height:min(415px,52dvh);min-height:348px}}
/* the quote stub keeps clear of the rails and holds a readable measure */
.hero-tally .wt-quote .wt-slide-in{padding-inline:26px;box-sizing:border-box}
.hero-tally .wt-quote .wt-tm{--wt-tm-stub:min(92px,32%);max-width:420px;margin-inline:auto}
.hero-tally .wt-quote .wt-tm-side img{width:clamp(44px,13vw,60px);height:clamp(44px,13vw,60px)}
.hero-tally .wt-quote .wt-tm blockquote{font-size:clamp(13.5px,3.7vw,18px);line-height:1.34;text-wrap:pretty}

/* ===== the ticket is the hero: headline in, one CTA, clean cross-fade ====== */
/* no two beats on screen at once — the outgoing one leaves instantly */
.hero-tally .wt-slide{transition:none;transform:none}
.hero-tally .wt-slide.is-on{transition:opacity .26s ease}
.hero-tally .wt-slide.is-past{opacity:0}

/* the page headline, restyled for cream */
.hero-tally .wt-h1{
  margin:0 0 12px;padding:0;text-align:center;
  font-family:var(--wt-fd);font-weight:700;letter-spacing:-.02em;
  font-size:clamp(20px,5.4vw,27px);line-height:1.18;color:var(--wt-ink);
  opacity:1;transform:none;
}
.hero-tally .wt-h1 .hero-line{display:block}
.hero-tally .wt-h1 .hero-gold{color:var(--wt-gold-deep);margin-top:2px}
.hero-tally .wt-h1 .n{font-variant-numeric:tabular-nums}
.hero-headline:empty{display:none}

/* the ticket's own Get Started — the only one in the hero */
.hero-tally .wt-cta{margin:12px auto 2px}
.hero-tally .wt-ticket{padding-bottom:14px}

/* ===== tighter top, tier-2 button (2026-09-16) ============================ */
/* the ticket is the hero now — it doesn't need the old headline's air above it */
.hero > .body{padding-top:16px}
.hero-copy .hero-tally{margin:0 0 18px}
.hero-tally .wt-ticket{padding-top:12px}
.hero-tally .wt-h1{margin-bottom:10px}

/* the app's tier-2 CTA on light: brushed gold, not the saturated slab */
.hero-tally .wt-cta{
  background:linear-gradient(160deg,#FAF2D9,#E8D08B 78%);
  color:#5C4A10;
  border:.5px solid rgba(155,126,38,.55);
  box-shadow:inset 0 1px .5px rgba(255,252,235,.85),0 1px 0 #9B7E26,0 6px 16px rgba(201,168,76,.22);
  font-weight:700;
}
.hero-tally .wt-cta:hover{
  background:linear-gradient(160deg,#FDF7E6,#EDD89A 78%);
  border-color:rgba(155,126,38,.7);
}
.hero-tally .wt-cta:active{transform:translateY(1px);box-shadow:inset 0 1px .5px rgba(255,252,235,.85),0 1px 0 #9B7E26}
/* ten marks have to fit the narrowest ticket, so the rail shrinks with it */
@media (max-width:390px){
  .hero-tally .wt-steps{gap:5px;height:24px}
  .hero-tally .wt-mark-n{width:23px;height:23px;font-size:11px}
  .hero-tally .wt-mark-final{width:23px;height:23px;margin-left:0}
  .hero-tally .wt-rail{left:11.5px;right:11.5px}
}
@media (max-width:344px){
  .hero-tally .wt-steps{gap:3px;height:22px}
  .hero-tally .wt-mark-n{width:20px;height:20px;font-size:10px}
  .hero-tally .wt-mark-final{width:20px;height:20px}
  .hero-tally .wt-mark-final svg{width:11px;height:11px}
  .hero-tally .wt-rail{left:10px;right:10px}
  .hero-tally .wt-ticket{padding-inline:11px}
}

/* ===== rail to the top, header compressed (2026-09-16) ==================== */
/* progress reads first, like the listicle's miles strip */
.hero-tally .wt-steps{margin:0 0 10px}

/* headline: tighter leading, one step down */
.hero-tally .wt-h1{
  font-size:clamp(18px,4.9vw,25px);line-height:1.12;margin:0 0 8px;
  text-wrap:balance;
}
.hero-tally .wt-h1 .hero-gold{margin-top:1px}

/* the ledger row on one line a side, not a stacked label + number */
.hero-tally .wt-vs{align-items:center;gap:6px}
.hero-tally .wt-side{flex-direction:row;align-items:baseline;gap:6px;flex-wrap:wrap}
.hero-tally .wt-side-r{justify-content:flex-end}
.hero-tally .wt-k{font-size:9px;letter-spacing:1.8px}
.hero-tally .wt-v{font-size:22px}
.hero-tally .wt-v small{font-size:11px}
.hero-tally .wt-mid{padding-bottom:0}
.hero-tally .wt-mid em{font-size:13px}
.hero-tally .wt-mid-rule{width:10px}

/* and the tear line comes up with it */
.hero-tally .wt-card{margin-top:8px;padding-top:5px}
@media (max-width:344px){
  .hero-tally .wt-side{gap:4px}
  .hero-tally .wt-v{font-size:19px}
}

/* ===== the rooms marquee, inside the ticket ================================ */
.hero-tally .wt-ribbon{
  margin:-4px -14px 10px;padding:0 0 0;
  border-radius:18px 18px 0 0;
}
.hero-tally .wt-ribbon .track span{
  color:#8B897F;font-size:9.5px;letter-spacing:2.6px;padding:0 16px;
}
.hero-tally .wt-ribbon .track span:hover{color:var(--wt-gold-deep)}
.hero-tally .wt-ribbon .track span:after{margin-left:16px;color:rgba(155,126,38,.42)}
.hero-tally .wt-ribbon .rrule{
  margin-top:9px;height:.5px;
  background:linear-gradient(90deg,transparent,rgba(155,126,38,.42),transparent);
}
@media (max-width:344px){
  .hero-tally .wt-ribbon{margin-inline:-11px}
  .hero-tally .wt-ribbon .track span{font-size:9px;letter-spacing:2.2px;padding:0 13px}
}
/* the rail belongs under the ledger row, where it was */
.hero-tally .wt-steps{margin:9px 0 0}

/* ===== the listicle's mini-beat stack + funnel card ======================== */
.hero-tally .wt-slides{
  flex:0 0 auto;width:100%;max-width:520px;margin:0 auto;
  padding:0 2px 4px;box-sizing:border-box;position:relative;z-index:2;
}
.hero-tally .wt-bul{
  list-style:none;margin:0;padding:0;position:relative;height:92px;cursor:pointer;
  display:block;background:none;border:0;box-shadow:none;
}
.hero-tally .wt-bul li{
  position:absolute;left:0;right:0;top:0;box-sizing:border-box;
  display:flex;align-items:center;gap:10px;background:#fff;
  border:1px solid rgba(0,0,0,.07);border-radius:16px;padding:11px 13px;
  box-shadow:0 12px 28px rgba(60,48,12,.11);min-height:78px;text-align:left;
  transition:transform .42s cubic-bezier(.16,1,.3,1),opacity .42s cubic-bezier(.16,1,.3,1);
  transform-origin:center top;
}
.hero-tally .wt-bul li.on{z-index:3;transform:translateY(0) scale(1);opacity:1}
.hero-tally .wt-bul li.p1{z-index:2;transform:translateY(8px) scale(.955);opacity:.85}
.hero-tally .wt-bul li.p2{z-index:1;transform:translateY(15px) scale(.91);opacity:.6}
.hero-tally .wt-bul li.off{z-index:0;transform:translateY(15px) scale(.91);opacity:0}
.hero-tally .wt-bul li.leave{z-index:4;transform:translateY(-24px) scale(1.02);opacity:0}
.hero-tally .wt-bul .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hero-tally .wt-bul .tx b{font-size:14px;line-height:1.22;color:var(--wt-ink);font-weight:700;letter-spacing:-.01em}
.hero-tally .wt-bul .tx span{font-size:12.5px;line-height:1.3;color:var(--wt-ink3);font-weight:400;text-wrap:pretty}
.hero-tally .wt-bul .tag{
  flex:0 0 auto;align-self:flex-start;font-size:10px;letter-spacing:.1em;
  font-weight:700;color:var(--wt-ink3);
}
.hero-tally .wt-bul-dots{display:flex;justify-content:center;gap:5px;margin-top:7px}
.hero-tally .wt-bul-dots i{width:5px;height:5px;border-radius:50%;background:rgba(60,48,12,.20);display:block;cursor:pointer}
.hero-tally .wt-bul-dots i.on{background:var(--wt-gold-deep)}

/* the shot sits flush on the stack, the way the listicle blends them */
.hero-tally .wt-shot{margin:0;min-height:80px}
.hero-tally .wt-shot img{object-position:center bottom}
.hero-tally .wt-slide-in{gap:0}
.hero-tally .wt-h{margin:0 0 3px}
.hero-tally .wt-rep{margin:0 0 6px}

/* funnel, as its own card — the listicle's viz */
.hero-tally .wt-viz{width:100%;flex:1 1 auto;min-height:0;margin:0 0 6px;display:flex}
.hero-tally .wt-viz-card{
  background:#fff;border:.5px solid rgba(0,0,0,.08);border-radius:14px;
  padding:10px 11px 9px;max-width:560px;margin:0 auto;width:100%;box-sizing:border-box;
  display:flex;flex-direction:column;min-height:0;box-shadow:0 10px 24px rgba(60,48,12,.09);
}
.hero-tally .wt-viz-h{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;
  font-weight:700;color:var(--wt-gold-deep);margin-bottom:2px;
}
.hero-tally .wt-viz-h .wt-viz-r{
  font-family:var(--wt-fd);text-transform:none;letter-spacing:0;
  font-size:12px;font-weight:600;color:var(--wt-ink3);
}
.hero-tally .wt-funnel{width:100%;height:auto;display:block;margin-top:3px;flex:1 1 auto;min-height:0;max-height:min(26svh,180px)}
.hero-tally .wt-viz-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px;text-align:center}
.hero-tally .wt-viz-stats > div{background:#FCFAF4;border:.5px solid rgba(0,0,0,.08);border-radius:9px;padding:6px 3px}
.hero-tally .wt-viz-stats b{display:block;font-family:var(--wt-fd);font-size:16px;color:var(--wt-ink);line-height:1}
.hero-tally .wt-viz-stats div:nth-child(2) b{color:#2E6B3F}
.hero-tally .wt-viz-stats span{display:block;font-size:9px;line-height:1.2;color:var(--wt-ink3);margin-top:3px}

/* the walk carries the stack now, so the well grows a little */
.hero-tally .wt-card{height:min(500px,60dvh);min-height:430px}
@media (max-width:420px){.hero-tally .wt-card{height:min(480px,58dvh);min-height:408px}}
@media (max-width:360px){
  .hero-tally .wt-bul{height:86px}
  .hero-tally .wt-bul li{min-height:72px;padding:10px 12px}
  .hero-tally .wt-bul .tx b{font-size:13px}
  .hero-tally .wt-bul .tx span{font-size:11.5px}
}
/* the funnel card has to fit the well with its stats, so the chart yields first */
.hero-tally .wt-funnel{max-height:min(19svh,148px)}
.hero-tally .wt-viz-stats{margin-top:6px;gap:5px}
.hero-tally .wt-viz-stats > div{padding:5px 3px}
.hero-tally .wt-viz-stats b{font-size:14px}
.hero-tally .wt-viz-card{padding:9px 10px 8px}

/* the ticket centres in its column — it was pinned left on tablet */
.hero-tally{display:flex;justify-content:center}
.hero-tally .wt{margin:0 auto}
@media (min-width:600px){
  .hero-tally .wt{max-width:460px}
}

/* ===== the opening beat: the whole bill, in one frame ====================== */
.hero-tally .wt-math .wt-slide-in{justify-content:center;gap:0;padding-inline:4px}
.hero-tally .wt-math .wt-h{font-size:clamp(17px,4.4vw,22px);margin:0 0 8px}
.hero-tally .wt-m-list{
  background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:14px;
  padding:4px 12px;box-shadow:0 10px 24px rgba(60,48,12,.09);
}
.hero-tally .wt-m-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:6px 0;border-top:1px dashed rgba(60,48,12,.14);text-align:left;
}
.hero-tally .wt-m-row:first-child{border-top:0}
.hero-tally .wt-m-row span{font-size:12.5px;line-height:1.25;color:var(--wt-ink2)}
.hero-tally .wt-m-row b{font-family:var(--wt-fd);font-size:14px;font-weight:600;color:var(--wt-red);white-space:nowrap}
.hero-tally .wt-m-sum{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-top:9px;padding:0 4px;
}
.hero-tally .wt-m-sum span{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;font-weight:700;color:var(--wt-ink3)}
.hero-tally .wt-m-sum b{font-family:var(--wt-fd);font-size:clamp(24px,6.6vw,32px);line-height:1;color:var(--wt-red);letter-spacing:-.5px}
.hero-tally .wt-m-foot{
  margin:8px 0 0;font-size:11.5px;line-height:1.3;color:var(--wt-ink3);text-align:center;
}
@media (max-width:360px){
  .hero-tally .wt-m-row span{font-size:11.5px}
  .hero-tally .wt-m-row b{font-size:13px}
  .hero-tally .wt-m-list{padding:3px 10px}
}

/* ===== frame one: the outcome bullets, and the question that moves you right */
@keyframes wtAskPulse{0%,100%{opacity:.62;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.hero-tally .wt-ask-q{animation:none;opacity:1}}

/* ===== the "$" beat: what they pay for, separately ======================== */
.hero-tally .wt-hidden .wt-slide-in{justify-content:center;gap:0}
.hero-tally .wt-m-h{font-size:clamp(16px,4.2vw,20px);margin:0 0 8px}
.hero-tally .wt-toll-line{
  margin-top:10px;padding-top:9px;border-top:1px dashed var(--wt-perf);
  display:flex;flex-direction:column;gap:2px;align-items:center;
}
.hero-tally .wt-toll-line em{
  font-style:normal;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:var(--wt-red);
}
.hero-tally .wt-toll-line span{
  font-family:var(--wt-fd);font-style:italic;font-size:16px;color:var(--wt-ink2);
}
/* nothing runs under the rails on the opener */

/* ===== frame one shows no score: the ledger and rail open with the walk ==== */
.hero-tally .is-pre .wt-vs,
.hero-tally .wt-vs,
.hero-tally .wt-steps{
  transition:opacity .34s ease,height .34s cubic-bezier(.16,1,.3,1),margin .34s cubic-bezier(.16,1,.3,1);
}
.hero-tally .wt-notch{transition:opacity .3s ease}

/* bullets: one row each */
@media (max-width:360px){.hero-tally .wt-ol li span{font-size:12px}}
/* the ledger is one row, always — it never wraps the label off the number */
.hero-tally .wt-vs{gap:4px;flex-wrap:nowrap}
.hero-tally .wt-side{flex-wrap:nowrap;white-space:nowrap;min-width:0}
.hero-tally .wt-k{font-size:clamp(7.5px,2.1vw,9.5px);letter-spacing:clamp(.8px,.35vw,1.8px)}
.hero-tally .wt-v{font-size:clamp(17px,4.9vw,23px);white-space:nowrap}
.hero-tally .wt-v small{font-size:clamp(9px,2.5vw,11px);margin-left:2px}
.hero-tally .wt-mid{gap:4px}
.hero-tally .wt-mid em{font-size:clamp(11px,3vw,13px)}
.hero-tally .wt-mid-rule{width:clamp(6px,2vw,12px)}
/* the money list clears the rails too */
.hero-tally .wt-hidden .wt-slide-in{padding-inline:28px;box-sizing:border-box}

/* ===== frame one: one thumb-sized way forward ============================= */
/* no dead air — the ticket sizes to the opener */

/* the control: quiet next to Get Started, but unmistakably a button */
@keyframes wtGoPulse{
  0%,100%{box-shadow:0 6px 18px rgba(60,48,12,.10),0 0 0 0 rgba(155,126,38,.30)}
  50%{box-shadow:0 6px 18px rgba(60,48,12,.10),0 0 0 10px rgba(155,126,38,0)}
}
@media (prefers-reduced-motion:reduce){.hero-tally .wt-go{animation:none}}
/* the rails are for the walk; frame one has its own control */

/* ===== the control lives inside the list, at its centre ==================== */
/* the second half of the list starts clean */
/* the list is narrower inside the ticket than it was across the hero — size to fit */

/* the offer still lets you step back — only the forward rail retires there */
.hero-tally .is-final .wt-arrow{display:none}
.hero-tally .is-final .wt-prev{display:inline-flex}

/* the money beat has to fit a 375x667 phone without clipping its last line */
.hero-tally .wt-hidden .wt-slide-in{padding-inline:22px}
.hero-tally .wt-m-list{padding:2px 10px}
.hero-tally .wt-m-row{padding:5px 0;gap:8px}
.hero-tally .wt-m-row span{font-size:clamp(10.5px,3vw,12.5px);line-height:1.2}
.hero-tally .wt-m-row b{font-size:clamp(12px,3.4vw,14px)}
.hero-tally .wt-m-h{font-size:clamp(14.5px,3.9vw,20px);margin:0 0 6px}
.hero-tally .wt-m-sum{margin-top:7px}
.hero-tally .wt-m-sum b{font-size:clamp(21px,5.8vw,32px)}
.hero-tally .wt-toll-line{margin-top:8px;padding-top:7px}
.hero-tally .wt-toll-line span{font-size:clamp(13px,3.7vw,16px)}

/* ===== restored: .wt-old was collateral damage from a substring match ======
   A dead-CSS pass keyed on ".wt-ol" (the opener list) also matched ".wt-old",
   which is live — it styles the offer heading and the hidden-costs eyebrow. */
.wt-old{font-family:var(--wt-fd);font-weight:400;font-size:22px;line-height:1.18;letter-spacing:-.3px;color:var(--wt-ink);margin:8px 0 0}
.wt-old em{font-style:italic;color:var(--wt-gold-deep)}
.wt-old-k{font-size:10.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--wt-ink3);font-weight:500}
.wt-final .wt-old{font-size:21px;margin-top:4px}
.wt-hidden .wt-old-k{color:var(--wt-red)}
.hero-tally .wt-old,.hero-tally .wt-offer-h{color:var(--wt-ink)}
.hero-tally .wt-old em{color:var(--wt-gold-deep)}
.hero-tally .wt-old-k{color:var(--wt-ink3)}
.hero-tally .wt-hidden .wt-old-k{color:var(--wt-red)}
.hero-tally .wt-old{font-size:20px}
@media (min-width:900px){ .hero-tally .wt-old{font-size:22px} }

/* ===== the offer keeps a VISIBLE way back ==================================
   The forward rail retires on the offer, the back one does not. This needs to
   undo opacity AND pointer-events, not just display — an earlier rule set
   opacity:0 on both, so "display:inline-flex" alone left it invisible. */
.hero-tally .is-final .wt-arrow{display:none}
.hero-tally .is-final .wt-prev{
  display:inline-flex !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
/* on the offer it stays vertically centred like every other beat — the offer
   gets symmetric inline padding instead, so the columns clear the disc without
   drifting off centre. */
.hero-tally .is-final .wt-prev{
  top:50%;bottom:auto;left:0;transform:translateY(-50%);
}
.hero-tally .is-final .wt-prev:active{transform:translateY(-50%) scale(.94)}
/* only the back disc is on this beat, so the clearance is asymmetric: the
   offer keeps its width instead of being squeezed into the "or" divider. */
.hero-tally .wt-final .wt-slide-in{padding:0 8px 0 34px;box-sizing:border-box}
.hero-tally .wt-final .wt-offer{max-width:none}
.hero-tally .wt-final .wt-f-or{padding:0 5px}
.hero-tally .wt-final .wt-plan{padding-inline:2px}
.hero-tally .wt-final .wt-plan.hi{padding-inline:4px}

/* ===== price upfront (2026-09-17) =========================================
   People were reaching Stripe and abandoning: the checkout card form was the
   first number they had ever seen. The ledger moved below the deck (it is a
   result of the walk, not a header), and the plans are now permanent. */
.hero-tally .wt-tallyline{
  display:flex;align-items:baseline;justify-content:center;gap:8px;
  margin:9px 0 0;padding-top:8px;border-top:1px dashed var(--wt-perf);
}
.hero-tally .wt-tk{
  font-size:9.5px;letter-spacing:1.6px;text-transform:uppercase;
  font-weight:500;color:var(--wt-ink3);white-space:nowrap;
}
.hero-tally .wt-tv{
  font-family:var(--wt-fd);font-size:clamp(19px,5.2vw,25px);line-height:1;
  color:var(--wt-red);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.hero-tally .wt-tv small{font-family:var(--wt-fb);font-size:11px;color:var(--wt-ink3);margin-left:2px}

/* the plans, permanent, yearly leading */
.hero-tally .wt-offer-fixed{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;
  max-width:420px;width:100%;margin:12px auto 0;
}
.hero-tally .wt-offer-fixed .wt-plan{background:none;border:0;box-shadow:none;padding:16px 4px 8px;text-align:center}
.hero-tally .wt-offer-fixed .wt-plan.mo{align-self:start;padding:19px 4px 9px}
.hero-tally .wt-offer-fixed .pn{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--wt-ink3)}
.hero-tally .wt-offer-fixed .pp{font-family:var(--wt-fd);font-weight:700;line-height:1;margin-top:4px;color:var(--wt-ink);letter-spacing:-.5px}
.hero-tally .wt-offer-fixed .wt-plan.hi .pp{font-size:clamp(25px,7vw,33px)}
.hero-tally .wt-offer-fixed .wt-plan.mo .pp{font-size:clamp(21px,5.8vw,28px)}
.hero-tally .wt-offer-fixed .pp small{font-family:var(--wt-fb);font-weight:500;font-size:.38em;color:var(--wt-ink2);letter-spacing:0}
.hero-tally .wt-offer-fixed .pe{margin-top:4px;font-size:11.5px;line-height:1.25;color:var(--wt-ink2);white-space:nowrap}
.hero-tally .wt-offer-fixed .pe b{color:var(--wt-gold-deep);font-family:var(--wt-fd);font-size:14px;font-weight:600}
.hero-tally .wt-offer-fixed .wt-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-2deg);margin:0;padding:4px 9px}
.hero-tally .wt-offer-fixed .wt-plan{position:relative}
.hero-tally .wt-cta{margin-top:12px}
.hero-tally .wt-fine{margin-top:8px;text-align:center}

/* the closing beat is the comparison, not a second copy of the offer */
.hero-tally .wt-swap{
  width:100%;max-width:330px;margin:4px auto 0;
  background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:14px;
  padding:4px 14px;box-shadow:0 10px 24px rgba(60,48,12,.10);
}
.hero-tally .wt-swap-row{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 0;border-top:1px dashed rgba(60,48,12,.14);
}
.hero-tally .wt-swap-row:first-child{border-top:0}
.hero-tally .wt-swap-row span{font-size:12.5px;color:var(--wt-ink2);text-align:left}
.hero-tally .wt-swap-row b{font-family:var(--wt-fd);font-size:clamp(20px,5.4vw,26px);line-height:1;white-space:nowrap}
.hero-tally .wt-swap-row b small{font-family:var(--wt-fb);font-size:.42em;font-weight:500;margin-left:1px}
.hero-tally .wt-swap-row .was{color:var(--wt-red)}
.hero-tally .wt-swap-row .now{color:#2E6B3F}
.hero-tally .wt-swap-row.is-now span{color:var(--wt-ink);font-weight:600}
.hero-tally .wt-swap-foot{margin:9px 0 0;font-size:11.5px;color:var(--wt-ink3);text-align:center}
@media (max-width:360px){
  .hero-tally .wt-offer-fixed .pe{font-size:10.5px}
  .hero-tally .wt-tk{font-size:9px;letter-spacing:1.2px}
}
/* the price block costs ~140px, so the well gives it back — the whole ticket
   still has to land on one screen, price included */
.hero-tally .wt-card{height:min(392px,46dvh);min-height:330px}
@media (max-width:420px){.hero-tally .wt-card{height:min(372px,45dvh);min-height:312px}}
.hero-tally .wt-tallyline{margin-top:7px;padding-top:6px}
.hero-tally .wt-offer-fixed{margin-top:9px}
.hero-tally .wt-offer-fixed .wt-plan{padding:13px 4px 6px}
.hero-tally .wt-offer-fixed .wt-plan.mo{padding:16px 4px 7px}
.hero-tally .wt-cta{margin-top:10px;padding:12px 18px}
.hero-tally .wt-fine{margin-top:6px}
.hero-tally .wt-h1{margin-bottom:6px}
/* the Fall Special badge hangs 12px above the yearly card — give it the room
   instead of letting it sit on the running total */
.hero-tally .wt-offer-fixed{margin-top:22px}
.hero-tally .wt-tallyline{margin-top:6px;padding-top:6px}

/* ===== the ledger IS the closing beat (2026-09-17) ========================
   Label, number and the vs each get their own row, so the handoff from "what
   you pay separately" to "what The Stage costs" reads in one glance. */
.hero-tally .wt-steps{margin:10px 0 0}
.hero-tally .wt-tallyline{
  display:flex;flex-direction:column;align-items:center;gap:1px;
  margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--wt-perf);
}
.hero-tally .wt-tk{
  font-size:10px;letter-spacing:2.2px;text-transform:uppercase;
  font-weight:600;color:var(--wt-ink3);white-space:nowrap;
}
.hero-tally .wt-tv{
  font-family:var(--wt-fd);font-size:clamp(28px,7.6vw,38px);line-height:1.04;
  color:var(--wt-red);font-variant-numeric:tabular-nums;white-space:nowrap;
  letter-spacing:-.5px;
}
.hero-tally .wt-tv small{
  font-family:var(--wt-fb);font-size:.33em;font-weight:500;
  color:var(--wt-ink3);margin-left:3px;letter-spacing:0;
}
.hero-tally .wt-tvs{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;max-width:190px;margin:9px 0 0;
}
.hero-tally .wt-tvs i{flex:1;height:1px;background:var(--wt-gold);opacity:.45}
.hero-tally .wt-tvs em{
  font-family:var(--wt-fd);font-style:italic;font-size:15px;
  color:var(--wt-gold-deep);line-height:1;
}
/* the vs already spaces the handoff, so the plans sit closer */
.hero-tally .wt-offer-fixed{margin-top:18px}

/* ===== the plans are a PRICE LIST, not a segmented control =================
   The filled panel on Yearly read as a selected radio — a dead affordance,
   since nothing here is tappable and the plan is chosen later. Emphasis now
   comes from the badge, the type size and a gold rule, none of which imply
   "pick one of these two". */

.hero-tally .wt-offer-fixed .wt-plan.mo{
  border-bottom:2px solid rgba(60,48,12,.12);
  padding:16px 4px 7px;
}
.hero-tally .wt-offer-fixed .wt-plan.hi .pn{color:var(--wt-gold-deep)}
.hero-tally .wt-offer-fixed .wt-plan.hi .pp{color:var(--wt-ink)}
/* the stacked ledger costs ~50px more than the one-liner did; the well pays */
.hero-tally .wt-card{height:min(360px,43dvh);min-height:306px}
@media (max-width:420px){.hero-tally .wt-card{height:min(344px,42dvh);min-height:292px}}
.hero-tally .wt-tallyline{margin-top:11px;padding-top:10px}
.hero-tally .wt-tvs{margin-top:7px}

/* ===== beat cards read centred, like the headline above them ============== */
.hero-tally .wt-bul li{justify-content:center;text-align:center}
.hero-tally .wt-bul .tx{align-items:center;text-align:center;flex:0 1 auto}
.hero-tally .wt-bul .tx b,
.hero-tally .wt-bul .tx span{text-align:center;text-wrap:balance}

/* ===== no rules under the plans ===========================================
   The fill read as a selected radio and the underline read as the same thing,
   quieter. Yearly is carried by the badge and the type size alone — nothing
   here should look like a control, because nothing here is one. */
.hero-tally .wt-offer-fixed .wt-plan.hi,
.hero-tally .wt-offer-fixed .wt-plan.mo{border-bottom:0}
.hero-tally .wt-offer-fixed .wt-plan.mo{padding:16px 4px 8px}

/* ===== short phones (SE, 375x667) =========================================
   The well is 42dvh there — 280px — and the money beat wants 331. Everything
   on that beat gets tighter rather than letting the last line clip. */
@media (max-height:720px){
  .hero-tally .wt-m-h{font-size:14px;margin:0 0 4px}
  .hero-tally .wt-m-list{padding:1px 9px}
  .hero-tally .wt-m-row{padding:3px 0}
  .hero-tally .wt-m-row span{font-size:11px;line-height:1.15}
  .hero-tally .wt-m-row b{font-size:11.5px}
  .hero-tally .wt-m-sum{margin-top:5px}
  .hero-tally .wt-m-sum b{font-size:19px}
  .hero-tally .wt-m-sum span{font-size:9px}
  /* the toll collapses to one line so it can never be the thing that clips */
  .hero-tally .wt-toll-line{
    flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px;
    margin-top:6px;padding-top:5px;
  }
  .hero-tally .wt-toll-line em{font-size:8.5px;letter-spacing:.1em}
  .hero-tally .wt-toll-line span{font-size:12.5px}
  /* and the rest of the walk gives back a little too */
  .hero-tally .wt-bul{height:78px}
  .hero-tally .wt-bul li{min-height:66px;padding:8px 11px}
  .hero-tally .wt-bul .tx b{font-size:12.5px}
  .hero-tally .wt-bul .tx span{font-size:11px;line-height:1.25}
  .hero-tally .wt-quote .wt-tm blockquote{font-size:13px;line-height:1.28}
  .hero-tally .wt-quote .wt-tm-side img{width:44px;height:44px}
  .hero-tally .wt-viz-stats b{font-size:12px}
  .hero-tally .wt-funnel{max-height:min(16svh,120px)}
}

/* ===== the costs beat sizes the ticket, it does not get clipped ===========
   Real-device check on an SE still cut "Context · Momentum · Time". The well
   is fixed-height with overflow:hidden, so on this one beat the slide leaves
   the absolute stack and the card grows to it. */
.hero-tally .is-money .wt-card{height:auto;min-height:0;transition:height .3s cubic-bezier(.16,1,.3,1)}
.hero-tally .is-money .wt-slide.wt-hidden.is-on{position:relative}
.hero-tally .is-money .wt-slide:not(.is-on){display:none}
.hero-tally .wt-hidden .wt-slide-in{padding-block:2px 6px}

/* ===== the comparison, like for like (2026-09-17) =========================
   Equal 50/50 columns made "vs" meaningless — a year of apps read against a
   month of The Stage. Yearly now answers the $1,663/yr in the SAME unit and
   owns the emphasis; monthly is a quiet line, still one tap away at checkout. */
.hero-tally .wt-stage-side{
  display:flex;flex-direction:column;align-items:center;gap:0;
  margin:10px auto 0;width:100%;max-width:340px;
}
.hero-tally .wt-ss-k{
  font-size:10px;letter-spacing:2.2px;text-transform:uppercase;
  font-weight:600;color:var(--wt-gold-deep);margin-bottom:8px;
}
.hero-tally .wt-plan-box{
  position:relative;width:100%;box-sizing:border-box;
  padding:12px 16px 13px;text-align:center;
  background:rgba(155,126,38,.07);
  border:1.5px solid rgba(155,126,38,.42);
  border-radius:14px;
}
.hero-tally .wt-pb-k{
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--wt-ink2);
}
.hero-tally .wt-pb-k i{font-style:normal;color:var(--wt-gold-deep);margin:0 2px}
.hero-tally .wt-pb-k b{color:var(--wt-red);font-weight:800}
.hero-tally .wt-pb-amt{
  font-family:var(--wt-fd);font-weight:700;letter-spacing:-1px;line-height:1;
  font-size:clamp(34px,9.2vw,44px);color:#2E6B3F;margin-top:5px;
}
.hero-tally .wt-pb-amt small{
  font-family:var(--wt-fb);font-weight:500;font-size:.3em;letter-spacing:0;
  color:var(--wt-ink3);margin-left:3px;
}
.hero-tally .wt-pb-sub{
  margin-top:6px;font-size:12.5px;line-height:1.3;color:var(--wt-ink2);
}
.hero-tally .wt-pb-sub b{color:var(--wt-ink);font-weight:700}
.hero-tally .wt-pb-alt{
  margin-top:9px;font-size:12px;color:var(--wt-ink3);letter-spacing:.01em;
}
@media (max-height:720px){
  .hero-tally .wt-plan-box{padding:10px 14px 11px}
  .hero-tally .wt-pb-amt{font-size:clamp(30px,8.4vw,38px)}
  .hero-tally .wt-pb-sub{font-size:11.5px;margin-top:5px}
  .hero-tally .wt-pb-alt{margin-top:7px;font-size:11.5px}
  .hero-tally .wt-ss-k{margin-bottom:6px}
}

/* ===== two columns, no boxes (2026-09-17) =================================
   Back to the cleaner side-by-side. No borders and no fills — the gold pill
   carries Yearly's emphasis, so nothing here reads as a selected radio. */
.hero-tally .wt-cols{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  width:100%;max-width:400px;margin:0 auto;
}
.hero-tally .wt-col{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.hero-tally .wt-col-pill{
  display:inline-block;max-width:100%;box-sizing:border-box;
  padding:5px 11px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(160deg,#E8D08A,#C9A84C 82%);
  color:#3A2E0A;font-weight:800;
  font-size:clamp(9px,2.5vw,11px);letter-spacing:.06em;text-transform:uppercase;
  box-shadow:0 2px 6px rgba(155,126,38,.28);
}
.hero-tally .wt-col-lbl{
  display:inline-block;padding:5px 0;
  font-size:clamp(9px,2.5vw,11px);letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--wt-ink3);
}
.hero-tally .wt-col-amt{
  font-family:var(--wt-fd);font-weight:700;letter-spacing:-1px;line-height:1;
  font-size:clamp(27px,7.6vw,38px);color:var(--wt-ink);margin-top:9px;
  white-space:nowrap;
}
.hero-tally .wt-col-hi .wt-col-amt{color:var(--wt-ink)}
.hero-tally .wt-col-amt small{
  font-family:var(--wt-fb);font-weight:500;font-size:.32em;letter-spacing:0;
  color:var(--wt-ink2);margin-left:1px;
}
.hero-tally .wt-col-rule{
  width:82%;height:1px;margin:10px auto 0;
  background:rgba(60,48,12,.16);
}
.hero-tally .wt-col-hi .wt-col-rule{background:rgba(155,126,38,.42)}
.hero-tally .wt-col-sub{
  margin-top:8px;font-size:clamp(10.5px,2.9vw,12.5px);line-height:1.25;
  color:var(--wt-ink2);
}
.hero-tally .wt-col-sub b{color:var(--wt-gold-deep);font-family:var(--wt-fd);font-size:1.15em;font-weight:700}
@media (max-height:720px){
  .hero-tally .wt-col-amt{font-size:clamp(24px,7vw,32px);margin-top:7px}
  .hero-tally .wt-col-rule{margin-top:8px}
  .hero-tally .wt-col-sub{margin-top:6px}
}

/* ===== back to the earlier offer: or-divider, tilted badge, no rules ======= */
.hero-tally .wt-stage-side .wt-offer-fixed{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;
  max-width:400px;width:100%;margin:2px auto 0;
}
.hero-tally .wt-offer-fixed .wt-plan{
  position:relative;background:none;border:0;box-shadow:none;text-align:center;
  padding:8px 4px 0;
}
/* the badge names the plan, so Yearly has no label row — pad to match Monthly's */
.hero-tally .wt-offer-fixed .wt-plan.hi{padding-top:25px}
.hero-tally .wt-offer-fixed .wt-plan.mo{align-self:start;padding-top:8px}
.hero-tally .wt-offer-fixed .pn{
  font-size:clamp(9px,2.5vw,11px);letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--wt-ink3);display:block;line-height:1;padding-bottom:6px;
}
/* prices back to the earlier scale — they had ballooned */
.hero-tally .wt-offer-fixed .pp{
  font-family:var(--wt-fd);font-weight:700;line-height:1;margin-top:0;
  color:var(--wt-ink);letter-spacing:-.5px;white-space:nowrap;
}
.hero-tally .wt-offer-fixed .wt-plan.hi .pp{font-size:clamp(25px,7vw,33px)}
.hero-tally .wt-offer-fixed .wt-plan.mo .pp{font-size:clamp(21px,5.8vw,28px)}
.hero-tally .wt-offer-fixed .pp small{
  font-family:var(--wt-fb);font-weight:500;font-size:.36em;letter-spacing:0;
  color:var(--wt-ink2);margin-left:1px;
}
.hero-tally .wt-offer-fixed .pe{
  margin-top:6px;font-size:clamp(10.5px,2.9vw,12px);line-height:1.25;
  color:var(--wt-ink2);white-space:nowrap;
}
.hero-tally .wt-offer-fixed .pe b{
  color:var(--wt-gold-deep);font-family:var(--wt-fd);font-size:1.2em;font-weight:700;
}
/* the tilted badge, same motif as before, now naming the plan */
.hero-tally .wt-offer-fixed .wt-badge{
  position:absolute;top:0;left:50%;transform:translateX(-50%) rotate(-2deg);
  margin:0;padding:4px 10px;white-space:nowrap;
  display:inline-flex;align-items:baseline;gap:5px;
  background:#2E2C26;color:#FFF4CF;border-radius:999px;
  box-shadow:0 5px 14px rgba(0,0,0,.26);
}
.hero-tally .wt-offer-fixed .wt-badge .b-k{
  font-family:var(--wt-fd);font-style:italic;font-weight:600;
  font-size:clamp(11px,3vw,13px);color:var(--wt-gold);
}
.hero-tally .wt-offer-fixed .wt-badge .b-t{
  font-family:var(--wt-fb);font-weight:800;text-transform:uppercase;
  letter-spacing:.07em;font-size:clamp(8.5px,2.3vw,10px);
}
.hero-tally .wt-stage-side .wt-f-or{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;margin:0;padding:0 9px;
}
.hero-tally .wt-stage-side .wt-f-or::before,
.hero-tally .wt-stage-side .wt-f-or::after{
  content:'';flex:1;width:0;border-top:0;border-left:1.5px dashed rgba(60,48,12,.20);
}
.hero-tally .wt-stage-side .wt-f-or span{
  font-family:var(--wt-fd);font-style:italic;font-weight:700;
  font-size:clamp(19px,5vw,24px);line-height:1;color:var(--wt-gold-deep);
  transform:rotate(-4deg);
}
@media (max-height:720px){
  .hero-tally .wt-offer-fixed .wt-plan.hi{padding-top:23px}
  .hero-tally .wt-offer-fixed .pe{margin-top:5px}
}
/* the base .wt-offer skin still fills and rounds .hi — this markup carries both
   classes, so kill it explicitly rather than relying on the earlier overrides */
.hero-tally .wt-stage-side .wt-offer .wt-plan.hi,
.hero-tally .wt-stage-side .wt-offer .wt-plan.mo{
  background:none;border:0;border-radius:0;box-shadow:none;
}
/* and line the two prices up on the same baseline */
.hero-tally .wt-stage-side .wt-offer-fixed .wt-plan.hi{padding-top:19px}
@media (max-height:720px){
  .hero-tally .wt-stage-side .wt-offer-fixed .wt-plan.hi{padding-top:18px}
}

/* the running total swells then settles as it climbs — ported from the
   listicle's #wl-n.bump so both doors behave the same */
.hero-tally #wt-n{display:inline-block;transform-origin:center}
.hero-tally #wt-n.bump{animation:wtTallyBump .9s cubic-bezier(.16,1,.3,1)}
@keyframes wtTallyBump{
  0%{transform:scale(1);color:var(--wt-red)}
  25%{transform:scale(1.45);color:#D9382E;text-shadow:0 0 18px rgba(217,56,46,.45)}
  60%{transform:scale(1.1);color:#C4302B}
  100%{transform:scale(1);color:var(--wt-red);text-shadow:none}
}
@media (prefers-reduced-motion:reduce){.hero-tally #wt-n.bump{animation:none}}
/* both prices the same size, and the badge gets real clearance above $8.25 */
.hero-tally .wt-stage-side .wt-offer-fixed .wt-plan.hi .pp,
.hero-tally .wt-stage-side .wt-offer-fixed .wt-plan.mo .pp{font-size:clamp(21px,5.8vw,28px)}
.hero-tally .wt-stage-side .wt-offer-fixed .wt-plan.hi{padding-top:31px}
@media (max-height:720px){
  .hero-tally .wt-stage-side .wt-offer-fixed .wt-plan.hi{padding-top:29px}
}
/* the badge needs more headroom than Monthly's label does, so Monthly drops to
   meet it rather than the badge crowding $8.25 */
.hero-tally .wt-stage-side .wt-offer-fixed .wt-plan.mo{padding-top:15px}
@media (max-height:720px){
  .hero-tally .wt-stage-side .wt-offer-fixed .wt-plan.mo{padding-top:14px}
}
/* both sub-rows are now bold-figure + descriptor, so they share one treatment;
   monthly's figure stays neutral so it does not compete with the gold $99 */
.hero-tally .wt-stage-side .wt-offer-fixed .wt-plan.mo .pe b{color:var(--wt-ink2)}

/* ===== one column: yearly is the offer, monthly rides beside it =========== */
/* one plain line, no dot separator and no manufactured gap */
/* the two prices carry the emphasis, the words around them stay quiet;
   $15 keeps the same weight but not the gold, so yearly still leads */
/* the gold $99 is 1.2em, so its line box is taller than Monthly's plain row —
   pin the line height so both sub-rows share a baseline */
.hero-tally .wt-stage-side .wt-offer-fixed .pe{line-height:18px}
.hero-tally .wt-stage-side .wt-offer-fixed .pe b{line-height:1;vertical-align:baseline}

/* ===== matched labels, so the prices align by construction ================
   The tilted black badge was far heavier than "MONTHLY" and pulled the left
   column visually upward. Yearly now uses the same label treatment with a
   small pill beside it, both label rows sit in flow at the same height, and
   the two prices land on one baseline without a padding fudge. */
.hero-tally .wt-stage-side .wt-offer-fixed .wt-plan.hi,
.hero-tally .wt-stage-side .wt-offer-fixed .wt-plan.mo{padding-top:8px}
.hero-tally .wt-stage-side .wt-offer-fixed .pn{
  display:flex;align-items:center;justify-content:center;gap:5px;
  flex-wrap:nowrap;white-space:nowrap;min-height:17px;padding-bottom:6px;
}
.hero-tally .wt-save{
  display:inline-block;padding:2px 6px;border-radius:999px;
  background:linear-gradient(160deg,#E8D08A,#C9A84C 84%);
  color:#3A2E0A;font-family:var(--wt-fb);font-weight:800;
  font-size:clamp(7px,1.9vw,8.5px);letter-spacing:.05em;text-transform:uppercase;
  line-height:1.25;box-shadow:0 1px 3px rgba(155,126,38,.30);
}

/* the saving is an angled stub ABOVE the label, out of flow — both columns get
   the same top padding so the labels, prices and sub-rows stay on one line */
.hero-tally .wt-stage-side .wt-offer-fixed .wt-plan.hi,
.hero-tally .wt-stage-side .wt-offer-fixed .wt-plan.mo{padding-top:23px}
.hero-tally .wt-stage-side .wt-offer-fixed .pn{
  display:block;min-height:0;padding-bottom:6px;white-space:nowrap;
}
.hero-tally .wt-save{
  position:absolute;top:0;left:50%;
  transform:translateX(-50%) rotate(-4deg);transform-origin:center;
  padding:3px 9px;border-radius:3px 7px 7px 3px;
  background:linear-gradient(160deg,#E8D08A,#C9A84C 84%);
  color:#3A2E0A;font-family:var(--wt-fb);font-weight:800;
  font-size:clamp(7.5px,2vw,9px);letter-spacing:.06em;text-transform:uppercase;
  line-height:1.3;white-space:nowrap;
  border:1px solid rgba(155,126,38,.55);
  box-shadow:0 2px 5px rgba(155,126,38,.28);
}
/* the stub's punch, same motif as the ticket's own notches */
.hero-tally .wt-save::before{
  content:'';position:absolute;left:0;top:50%;
  width:5px;height:5px;border-radius:50%;background:#FBF7EB;
  transform:translate(-50%,-50%);
}
@media (max-height:720px){
  .hero-tally .wt-stage-side .wt-offer-fixed .wt-plan.hi,
  .hero-tally .wt-stage-side .wt-offer-fixed .wt-plan.mo{padding-top:21px}
}

/* ===== the "or" rule, drawn not grown ====================================
   It was two flex:1 pseudo-elements with width:0, so their height came from
   free space in the flex column. Chrome hands them that space; Safari sizes
   the container to its content, leaving none — so the line vanished on the
   phone and only the "or" showed. Now it is one absolutely positioned dashed
   line spanning the full column, with the word sitting on the ticket's own
   background to break it. No flex-grow, nothing to resolve differently. */
.hero-tally .wt-stage-side .wt-f-or{
  position:relative;display:flex;align-items:center;justify-content:center;
  padding:0 9px;margin:0;
}
.hero-tally .wt-stage-side .wt-f-or::before{
  content:'';position:absolute;left:50%;top:0;bottom:0;
  width:0;border-left:1.5px dashed rgba(60,48,12,.20);
  transform:translateX(-50%);
}
.hero-tally .wt-stage-side .wt-f-or::after{content:none}
.hero-tally .wt-stage-side .wt-f-or span{
  position:relative;z-index:1;
  background:#FBF7EB;padding:6px 3px;
  font-family:var(--wt-fd);font-style:italic;font-weight:700;
  font-size:clamp(19px,5vw,24px);line-height:1;color:var(--wt-gold-deep);
  transform:rotate(-4deg);
}

/* ===== one line, not two =================================================
   A solid rail track with a dashed divider 10px under it read as two rules
   doing one job. The rail's own track is the perforation now: it spans the
   full ticket, dashed where the walk hasn't reached and solid gold where it
   has, so progress and the tear line are the same stroke. */
.hero-tally .wt-rail{
  left:0;right:0;height:1.5px;margin-top:-.75px;border-radius:0;
  background:none;
  background-image:repeating-linear-gradient(90deg,
    var(--wt-perf) 0 6px, transparent 6px 12px);
}
.hero-tally .wt-rail-fill{
  height:1.5px;border-radius:0;
  background:linear-gradient(90deg,var(--wt-gold-deep),var(--wt-gold));
}
.hero-tally .wt-tallyline{border-top:0;padding-top:4px;margin-top:8px}
/* the traversed part changes COLOUR, not texture: a half-solid perforation
   stops reading as a perforation, and the discs already carry progress */
.hero-tally .wt-rail-fill{
  background:none;
  background-image:repeating-linear-gradient(90deg,
    var(--wt-gold-deep) 0 6px, transparent 6px 12px);
}

/* ===== the stub signs itself off ========================================= */
.hero-tally .wt-admit{
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin-top:9px;padding-top:8px;
  border-top:1px dashed var(--wt-perf);
}
.hero-tally .wt-admit span{
  font-family:var(--wt-fb);font-weight:800;
  font-size:9px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--wt-gold-deep);opacity:.78;padding-left:.26em;
}
.hero-tally .wt-admit i{
  font-style:normal;font-size:8px;line-height:1;
  color:var(--wt-gold);opacity:.7;
}

/* ===== playbill flourish at the head of the stub ========================= */
.hero-tally .wt-crown{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:-2px 0 6px;line-height:1;
}
.hero-tally .wt-crown i{
  font-style:normal;display:block;color:var(--wt-ink);opacity:.55;
}
.hero-tally .wt-crown .s1{font-size:13px;opacity:.68}
.hero-tally .wt-crown .s2{font-size:9.5px}
.hero-tally .wt-crown .s3{font-size:6.5px;opacity:.42}
@media (max-height:720px){
  .hero-tally .wt-crown{margin-bottom:4px;gap:5px}
  .hero-tally .wt-crown .s1{font-size:12px}
}

/* ===== a real torn stub: scalloped top and bottom =========================
   Semicircles are CUT out with a two-layer mask (intersect), not painted over
   in the page colour — the hero has a gradient and a beam behind this, so
   painted notches would band. The border and radius go with it: a torn edge
   can't carry an outline along the arcs, and the reference stubs don't. */
.hero-tally .wt-ticket{
  --sc:9px;
  border:0;border-radius:0;box-shadow:none;
  -webkit-mask-image:
    radial-gradient(circle var(--sc) at 50% 0, transparent 98%, #000 100%),
    radial-gradient(circle var(--sc) at 50% 100%, transparent 98%, #000 100%);
  mask-image:
    radial-gradient(circle var(--sc) at 50% 0, transparent 98%, #000 100%),
    radial-gradient(circle var(--sc) at 50% 100%, transparent 98%, #000 100%);
  -webkit-mask-size:calc(var(--sc) * 2) 100%, calc(var(--sc) * 2) 100%;
  mask-size:calc(var(--sc) * 2) 100%, calc(var(--sc) * 2) 100%;
  -webkit-mask-repeat:repeat-x, repeat-x;
  mask-repeat:repeat-x, repeat-x;
  -webkit-mask-position:0 0, 0 100%;
  mask-position:0 0, 0 100%;
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
  padding-top:18px;padding-bottom:20px;
}
/* the drop shadow has to follow the torn silhouette, so it moves to the parent */
.hero-tally .wt{filter:drop-shadow(0 16px 30px rgba(0,0,0,.42))}
/* the side punches sat on a border that no longer exists */
.hero-tally .wt-notch{border-color:rgba(155,126,38,.22)}
.hero-tally .wt-crown{margin-top:0}
/* the flourish introduces the headline, so it sits under the marquee */
.hero-tally .wt-crown{margin:2px 0 8px}
/* the stub's trimmings cost ~35px; the well and the scallop gutters pay it back */
.hero-tally .wt-ticket{padding-top:13px;padding-bottom:14px}
.hero-tally .wt-card{height:min(332px,40dvh);min-height:282px}
@media (max-width:420px){.hero-tally .wt-card{height:min(318px,39dvh);min-height:270px}}
.hero-tally .wt-crown{margin:0 0 6px}
.hero-tally .wt-admit{margin-top:7px;padding-top:6px}
.hero-tally .wt-fine{margin-top:5px}

/* ===== one torn edge, not two ============================================
   A stub is torn from the book on ONE side. Scallops top and bottom read as
   a sheet of stamps, and the top ones crowded the marquee. Clean top, torn
   bottom — and the top gutter comes back with it. */
.hero-tally .wt-ticket{
  -webkit-mask-image:radial-gradient(circle var(--sc) at 50% 100%, transparent 98%, #000 100%);
  mask-image:radial-gradient(circle var(--sc) at 50% 100%, transparent 98%, #000 100%);
  -webkit-mask-size:calc(var(--sc) * 2) 100%;
  mask-size:calc(var(--sc) * 2) 100%;
  -webkit-mask-repeat:repeat-x;
  mask-repeat:repeat-x;
  -webkit-mask-position:0 100%;
  mask-position:0 100%;
  -webkit-mask-composite:source-over;
  mask-composite:add;
  border-radius:16px 16px 0 0;
  padding-top:11px;
}

/* ===== every dash in the ticket is the same dash =========================
   The tear line under the header used the browser's default `dashed`, which
   is much finer than the rail's. Same 6/6 stroke now, so the two perforations
   read as one perforation. */
.hero-tally .wt-card{
  border-top:0;
  background-image:repeating-linear-gradient(90deg,
    var(--wt-perf) 0 6px, transparent 6px 12px);
  background-repeat:no-repeat;
  background-size:100% 1.5px;
  background-position:0 0;
}
.hero-tally .is-pre .wt-card{background-image:none}
.hero-tally .wt-admit{
  border-top:0;
  background-image:repeating-linear-gradient(90deg,
    var(--wt-perf) 0 6px, transparent 6px 12px);
  background-repeat:no-repeat;
  background-size:100% 1.5px;
  background-position:0 0;
}

/* Full-screen viewer: tap the shot (or the small chip beside it) to open every beat edge to edge */
.hero-tally .wt-shot-box{position:relative;display:block;height:100%;max-width:100%;aspect-ratio:1/1;margin:0 auto;cursor:zoom-in}
.hero-tally .wt-shot-box picture{display:block;width:100%;height:100%}
.hero-tally .wt-expand{position:absolute;top:0;right:0;z-index:6;width:44px;height:44px;padding:0;border:0!important;background:none!important;box-shadow:none!important;outline:none;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hero-tally .wt-expand span{width:28px;height:28px;border-radius:50%;background:rgba(252,250,244,.92);border:1px solid rgba(155,126,38,.38);display:flex;align-items:center;justify-content:center;color:#9B7E26;transition:background .15s,color .15s}
.hero-tally .wt-expand:hover span{background:#9B7E26;color:#FCFAF4}
.hero-tally .wt-expand:focus-visible span{outline:2px solid #C9A84C;outline-offset:2px}
.hero-tally .wt-expand svg{width:12px;height:12px}
.hero-tally .wt-slide:not(.is-on) .wt-shot-box{pointer-events:none}
.hero-tally .wt-expand{top:2px;right:2px}
.wtf-toll{margin-top:14px}

.wtf{--wtf-p:#FBF7EB;--wtf-ink:#2E2C26;--wtf-ink2:#5F5E5A;--wtf-ink3:#888780;--wtf-red:#A32D2D;--wtf-line:#E4DCC4;--wtf-gold-d:#9B7E26;--wtf-fd:'Playfair Display',Georgia,serif;--wtf-fb:'DM Sans',system-ui,sans-serif;position:fixed;inset:0;z-index:2147483000;background:var(--wtf-p);color:var(--wtf-ink);display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s;font-family:var(--wtf-fb)}
.wtf.on{opacity:1;visibility:visible;transition:opacity .22s ease}
.wtf .hero-tally{margin:0;width:auto}
.wtf-x{position:absolute;z-index:5;top:calc(env(safe-area-inset-top,0px) + 4px);right:4px;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--wtf-ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.wtf-x svg{width:22px;height:22px}
.wtf-stage{position:relative;flex:1 1 auto;min-height:0;padding-top:env(safe-area-inset-top,0px);-webkit-tap-highlight-color:transparent}
.wtf-track{position:absolute;inset:0;top:env(safe-area-inset-top,0px)}
.wtf-pane{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:14px 0 10px;box-sizing:border-box;overflow-y:auto;overscroll-behavior-y:contain;opacity:0;transform:translateX(18px);transition:opacity .35s cubic-bezier(.16,1,.3,1),transform .4s cubic-bezier(.16,1,.3,1);pointer-events:none}
.wtf-pane.is-past{transform:translateX(-18px)}
.wtf-pane.is-on{opacity:1;transform:none;pointer-events:auto}
.wtf-pane-c{justify-content:center}
.wtf-hd{flex:none;width:100%;max-width:560px;box-sizing:border-box;padding:0 52px;text-align:center}
.wtf-hd h3{margin:0 0 5px;font:700 25px/1.15 var(--wtf-fd);letter-spacing:-.01em;color:var(--wtf-ink);display:flex;align-items:flex-end;justify-content:center}
.wtf-rep{margin:0 0 4px;font-size:13px;line-height:1.4;color:var(--wtf-ink2)}
.wtf-rep em{font-style:normal;font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--wtf-red);margin-right:6px}
.wtf-rep b{color:var(--wtf-red);font-weight:600}
.wtf-img{flex:1 1 auto;min-height:150px;width:100%;max-width:540px;display:flex;align-items:center;justify-content:center}
.wtf-img picture{display:block;width:100%;height:100%}
.wtf-img img{display:block;width:100%;height:100%;object-fit:contain}
.wtf-viz{box-sizing:border-box;padding:4px 16px 0}
.wtf-viz .wt-viz-card{width:100%;max-width:480px;background:#fff;border:.5px solid rgba(0,0,0,.08);border-radius:14px;padding:12px 14px 10px;box-shadow:0 10px 24px rgba(60,48,12,.09)}
.wtf-viz .wt-viz-h{display:flex;justify-content:space-between;align-items:baseline;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;font-weight:700;color:var(--wtf-gold-d)}
.wtf-viz .wt-viz-r{font-family:var(--wtf-fd);text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--wtf-ink3)}
.wtf-viz .wt-funnel{width:100%;height:auto;display:block;margin-top:6px;max-height:20svh}
.wtf-viz .wt-viz-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px;text-align:center}
.wtf-viz .wt-viz-stats>div{background:#FCFAF4;border:.5px solid rgba(0,0,0,.08);border-radius:9px;padding:7px 3px}
.wtf-viz .wt-viz-stats b{display:block;font-family:var(--wtf-fd);font-size:18px;color:var(--wtf-ink);line-height:1}
.wtf-viz .wt-viz-stats div:nth-child(2) b{color:#2E6B3F}
.wtf-viz .wt-viz-stats span{display:block;font-size:10px;line-height:1.2;color:var(--wtf-ink3);margin-top:3px}
.wtf .hero-tally.wtf-beats{flex:none;width:100%;max-width:520px;box-sizing:border-box;padding:0 16px;margin-top:6px}
.wtf .hero-tally.wtf-q{width:100%;max-width:520px;box-sizing:border-box;padding:0 54px}
.wtf-money{width:100%;max-width:460px;box-sizing:border-box;padding:0 54px;text-align:center}
.wtf-money h3{margin:0 0 10px;font:500 22px/1.2 var(--wtf-fd);color:var(--wtf-ink)}
.wtf-m-list>div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed var(--wtf-line);font-size:13px;color:var(--wtf-ink2);text-align:left}
.wtf-m-list b{color:var(--wtf-red);font-weight:600;white-space:nowrap}
.wtf-m-total{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--wtf-ink3)}
.wtf-m-total b{font-family:var(--wtf-fd);font-size:24px;letter-spacing:0;text-transform:none;color:var(--wtf-red)}
.wtf-nav{position:absolute;z-index:3;top:var(--wtf-ay,45%);margin-top:-20px;width:40px;height:40px;padding:0;border-radius:50%;border:1px solid rgba(155,126,38,.3);background:rgba(252,250,244,.94);color:var(--wtf-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.08);-webkit-tap-highlight-color:transparent}
.wtf-nav svg{width:18px;height:18px}
.wtf-nav:disabled{opacity:.3;cursor:default}
.wtf-prev{left:8px}.wtf-next{right:8px}
@media (min-width:700px){.wtf-prev{left:calc(50% - 330px)}.wtf-next{right:calc(50% - 330px)}}
.wtf-foot{flex:none;background:var(--wtf-p);padding:0 16px calc(env(safe-area-inset-bottom,0px) + 8px)}
.wtf-foot .wt{max-width:440px;margin:0 auto}
.wtf-foot .wt-ticket{background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0!important;border-radius:0!important;-webkit-mask:none!important;mask:none!important}
.wtf-foot .wt-ticket::before,.wtf-foot .wt-ticket::after{display:none!important}
.wtf-foot .wt-steps{margin:4px 0 0}
.wtf-foot .wt-mark{cursor:pointer}
/* the "or" splits the dashed rule with a gap, not a painted box, so it sits on any background */
.hero-tally .wt-stage-side .wt-f-or{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.hero-tally .wt-stage-side .wt-f-or::before,.hero-tally .wt-stage-side .wt-f-or::after{content:'';position:static;flex:1;width:0;transform:none;border-left:1.5px dashed rgba(60,48,12,.20)}
.hero-tally .wt-stage-side .wt-f-or span{background:none;padding:0}
.wtf-n{display:inline-block;transform-origin:center}
.wtf-n.bump{animation:wtfbump .9s cubic-bezier(.16,1,.3,1)}
@keyframes wtfbump{0%{transform:scale(1)}25%{transform:scale(1.35);color:#D9382E;text-shadow:0 0 18px rgba(217,56,46,.4)}60%{transform:scale(1.08)}100%{transform:scale(1);text-shadow:none}}
.wtf button:focus,.wtf a:focus,.wtf .wt-mark:focus{outline:none}
.wtf button:focus-visible,.wtf a:focus-visible,.wtf .wt-mark:focus-visible{outline:2px solid #C9A84C;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.wtf,.wtf.on,.wtf-pane{transition:none}.wtf-n.bump{animation:none}}
@media (max-height:740px){.wtf-viz .wt-viz-stats{display:none}.wtf-viz .wt-funnel{max-height:15svh}}
.wtf:focus{outline:none}
.hero-tally .wt-slide:not(.wt-hidden):not(.wt-quote) .wt-h{display:flex;flex-direction:column;justify-content:flex-end}
.wtf-hd{padding:0 12px}
.wtf-hd h3{padding:0 40px}
.wtf-rep{white-space:nowrap;font-size:clamp(10px,3vw,13px)}
.wtf-rep em{font-size:.82em;letter-spacing:.12em;margin-right:5px}
.hero-tally .wt-arrow:focus:not(:focus-visible){outline:none}
.hero-tally .wt-arrow:focus-visible{outline:2px solid #C9A84C;outline-offset:2px}
/* short phones (SE): the price block tightens so the shot gets the room */
@media (max-height:700px){
  .wtf .wtf-foot{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 4px)}
  .wtf .wtf-foot .wt-steps{margin-top:2px;height:20px}
  .wtf .wtf-foot .wt-mark-n{width:19px;height:19px;font-size:9.5px}
  .wtf .wtf-foot .wt-tallyline{margin-top:4px;padding-top:0;border-top:0}
  .wtf .wtf-foot .wt-tk{font-size:8.5px;letter-spacing:1.6px}
  .wtf .wtf-foot .wt-tv{font-size:24px}
  .wtf .wtf-foot .wt-tvs{margin-top:3px}
  .wtf .wtf-foot .wt-tvs em{font-size:12px}
  .wtf .wtf-foot .wt-ss-k{font-size:9px;margin:2px 0 0}
  .wtf .wtf-foot .wt-offer-fixed{margin-top:10px}
  .wtf .wtf-foot .wt-offer .wt-plan{padding-top:14px!important;padding-bottom:2px!important}
  .wtf .wtf-foot .wt-offer .wt-plan .pn{font-size:9px}
  .wtf .wtf-foot .wt-offer .wt-plan.hi .pp{font-size:24px}
  .wtf .wtf-foot .wt-offer .wt-plan.mo .pp{font-size:20px}
  .wtf .wtf-foot .wt-offer .wt-plan .pe{font-size:10.5px;margin-top:2px}
  .wtf .wtf-foot .wt-offer .wt-plan .pe b{font-size:12.5px}
  .wtf .wtf-foot .wt-save{transform:translateX(-50%) rotate(-4deg) scale(.9)}
  .wtf .wtf-foot .wt-cta{margin-top:8px;padding:10px 16px;font-size:15px}
  .wtf .wtf-foot .wt-fine{margin-top:4px;font-size:10px}
}
.wtf-hd h3{padding:0 4px;white-space:normal}
.wtf .wtf-nav:focus-visible,.wtf .wtf-x:focus-visible{outline:none}
@media (max-height:700px){
  .wtf .wtf-foot .wt-offer .wt-plan{padding-top:22px!important}
  .wtf .wtf-foot .wt-tallyline{margin-top:7px}
}