/* VARIANT C — B's dark/amber visual system on A's structural spine.
   Local mockup. No external deps, no webfonts, no build step. Shared by index.html and day7.html.
   Note on "%": none of the rendered copy carries a percent sign. The handful below are CSS
   gradient stops and sizing only, never text the prospect reads. */

:root{
  --bg:#0a0b0f;
  --bg2:#101219;
  --card:#161922;
  --card2:#1d212c;
  --line:#272c39;
  --line2:#343b4c;
  --ink:#f4f5f7;
  --ink2:#aeb5c2;
  --ink3:#7b8494;
  --amber:#ff9410;
  --amber2:#ffb54d;
  --amberdim:#2a1c07;
  --good:#3ddc97;
  --bad:#ff6b5e;
  --r:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(900px 420px at 50% -140px, rgba(255,148,16,.16), transparent 70%),
    radial-gradient(600px 300px at 100% 0%, rgba(255,148,16,.06), transparent 70%);
}
.wrap{position:relative;z-index:1;max-width:560px;margin:0 auto;padding:0 16px 40px}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;gap:10px;padding:14px 0 10px;min-height:56px}
.brandmark{
  width:26px;height:26px;border-radius:7px;flex:0 0 auto;
  background:linear-gradient(150deg,var(--amber),#ff6a00);
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 4px 14px rgba(255,110,0,.35);
}
.brand{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.spacer{flex:1}
.backbtn{
  appearance:none;border:1px solid var(--line);background:transparent;color:var(--ink2);
  font:inherit;font-size:14px;border-radius:999px;padding:7px 13px;cursor:pointer;text-decoration:none;
}
.backbtn:hover{border-color:var(--line2);color:var(--ink)}
.backbtn[hidden]{display:none}
.daytag{
  border:1px solid #6b4409;background:var(--amberdim);color:var(--amber2);
  font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:6px 11px;border-radius:999px;
}

/* ---------- progress ---------- */
.prog{margin:2px 0 20px}
.prog[hidden]{display:none}
.progtop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:12px}
.progstep{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);font-weight:700}
.proglab{font-size:13px;color:var(--ink2)}
.progbar{height:4px;border-radius:99px;background:var(--line);overflow:hidden}
.progfill{
  height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,#ff6a00,var(--amber2));
  transform:scaleX(0);transform-origin:left center;transition:transform .45s cubic-bezier(.2,.7,.3,1);
}

/* ---------- type ---------- */
h1{font-size:30px;line-height:1.12;margin:0 0 10px;letter-spacing:-.02em;font-weight:800}
h2{font-size:22px;line-height:1.2;margin:0 0 8px;letter-spacing:-.01em;font-weight:800}
h3{font-size:15px;margin:0 0 6px;font-weight:700}
p{margin:0 0 14px;color:var(--ink2)}
.lead{font-size:17px;color:var(--ink2)}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);font-weight:800;margin:0 0 10px}
.fine{font-size:13px;color:var(--ink3);line-height:1.5}
.strong{color:var(--ink);font-weight:700}
.amber{color:var(--amber2)}
/* The positive accent. One job only: the weekly price in the S5 price beats (operator 2026-08-05). */
.pos{color:var(--good);font-weight:700}
hr.sep{border:0;border-top:1px solid var(--line);margin:18px 0}

section[data-step],section[data-view]{display:none;animation:in .3s ease both}
section[data-step].on,section[data-view].on{display:block}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.card + .card{margin-top:12px}
.card.flat{background:var(--bg2)}
.card.warm{border-color:#6b4409;background:linear-gradient(160deg,#221703,var(--card))}

/* ---------- buttons ---------- */
.btn{
  appearance:none;width:100%;display:block;border:0;cursor:pointer;
  font:inherit;font-size:17px;font-weight:800;letter-spacing:-.01em;
  padding:17px 18px;border-radius:12px;color:#1a1003;
  background:linear-gradient(180deg,var(--amber2),#ff7d00);
  box-shadow:0 8px 22px rgba(255,110,0,.28);
  transition:transform .12s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.32;cursor:not-allowed;box-shadow:none}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line2);box-shadow:none;font-size:16px;font-weight:700}
.btn.ghost:hover{border-color:var(--ink3)}
.btnnote{text-align:center;font-size:12.5px;color:var(--ink3);margin:10px 0 0}
.linkish{
  appearance:none;background:none;border:0;font:inherit;font-size:14px;font-weight:700;
  color:var(--amber2);text-decoration:underline;cursor:pointer;padding:2px 0;
}

/* ---------- tap targets ---------- */
.taps{display:grid;gap:10px;margin:0 0 6px}
.taps.two{grid-template-columns:1fr 1fr}
.tap{
  appearance:none;text-align:left;font:inherit;cursor:pointer;
  background:var(--card2);border:1px solid var(--line);color:var(--ink);
  border-radius:12px;padding:15px 16px;font-size:16px;font-weight:600;
  display:flex;align-items:flex-start;gap:11px;transition:border-color .15s,background .15s;
}
.tap:hover{border-color:var(--line2)}
.tap .box{
  width:20px;height:20px;border-radius:6px;border:2px solid var(--line2);flex:0 0 auto;margin-top:2px;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:#1a1003;font-weight:900;
}
.tap.round .box{border-radius:50%}
.tap[aria-pressed="true"],.tap.sel{border-color:var(--amber);background:var(--amberdim)}
.tap[aria-pressed="true"] .box,.tap.sel .box{background:var(--amber);border-color:var(--amber)}
.tap[aria-pressed="true"] .box::after,.tap.sel .box::after{content:"\2713"}
.tap small{display:block;font-weight:500;font-size:13px;color:var(--ink3);margin-top:2px}

/* ---------- per-day hours · S3, when should the phone ring (operator item 10) ----------
   Seven rows, each its own toggle and its own clock. Turning a day off DISABLES its selects rather
   than removing them, so the grid keeps its height and nothing under it jumps as he taps. */
.dayrows{display:grid;gap:8px;margin:12px 0 0}
.dayrow{display:grid;grid-template-columns:104px 1fr auto 1fr;align-items:center;gap:8px}
.daytoggle{
  appearance:none;font:inherit;font-size:14px;font-weight:700;text-align:left;cursor:pointer;
  display:flex;align-items:center;gap:9px;background:var(--card);border:1px solid var(--line);
  color:var(--ink);border-radius:10px;padding:9px 10px;
}
.daytoggle:hover{border-color:var(--line2)}
.daytoggle .box{
  width:18px;height:18px;flex:0 0 auto;border-radius:5px;border:2px solid var(--line2);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;color:#1a1003;
}
.daytoggle[aria-pressed="true"]{border-color:var(--amber);background:var(--amberdim)}
.daytoggle[aria-pressed="true"] .box{background:var(--amber);border-color:var(--amber)}
.daytoggle[aria-pressed="true"] .box::after{content:"\2713"}
.dayrow .dto{font-size:12.5px;color:var(--ink3);text-align:center}
select.dsel{margin:0;padding:9px 8px;font-size:14px}
select.dsel:disabled{opacity:.35;cursor:not-allowed}
.dayrow.off .dto{opacity:.35}
@media (max-width:420px){
  .dayrow{grid-template-columns:86px 1fr auto 1fr;gap:6px}
  select.dsel{padding:9px 4px;font-size:13px}
}

/* .daychips / .daychip and .split2 were deleted with the one-clock-for-the-whole-week picker
   (operator item 10). Nothing renders them any more; the seven .dayrow rows above replaced both. */
select{
  width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--bg2);
  border:1px solid var(--line);border-radius:11px;padding:13px 36px 13px 14px;outline:0;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink3) 50%),linear-gradient(135deg,var(--ink3) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
select:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,148,16,.13)}
#hoursCustom[hidden]{display:none}

/* ---------- fields ----------
   Placeholder text is deliberately styled so it can never read as a filled-in value:
   italic, dimmer than the ink, and instruction-shaped rather than example-shaped. */
label.fld{display:block;margin:0 0 14px}
/* display:block beats the UA's [hidden]{display:none}, so the forward-to field needs this to stay
   hidden while "calls forward here too" is ticked (item 17). */
label.fld[hidden]{display:none}
label.fld:last-child{margin-bottom:0}
label.fld > span{display:block;font-size:13px;font-weight:700;color:var(--ink2);margin:0 0 6px}
input[type=text],input[type=tel],input[type=email]{
  width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--bg2);
  border:1px solid var(--line);border-radius:11px;padding:14px;outline:0;
}
input:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(255,148,16,.13)}
input::placeholder{color:#5a6273;font-style:italic;font-size:14px;opacity:1}
.fldhint{display:block;font-size:12.5px;color:var(--ink3);margin-top:6px;line-height:1.45}

/* The ZIP box is the whole no-param screen, so it is sized like it. One field, thumb-sized,
   numeric keypad on a phone. Its placeholder stays instruction-shaped per the note above. */
/* input[type=text] above is (0,1,1); this has to match it or the base font-size wins. */
input.zipinput{
  font-size:30px;font-weight:800;letter-spacing:.18em;text-align:center;
  padding:18px 14px 18px 20px;font-variant-numeric:tabular-nums;
}
input.zipinput::placeholder{font-size:17px;font-weight:600;letter-spacing:.04em;font-style:italic}

/* ---------- S0 hero + the city check ---------- */
.hero{
  margin:6px 0 0;padding:26px 20px 24px;border-radius:18px;
  background:linear-gradient(170deg,#191d28,#0e1016 70%);
  border:1px solid var(--line);position:relative;overflow:hidden;
}
.hero::after{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--amber),transparent);opacity:.7;
}
.scanwrap{margin:16px 0 0;border-radius:12px;border:1px solid var(--line);background:#0c0e14;padding:16px;position:relative;overflow:hidden}
.scanbar{
  position:absolute;top:0;bottom:0;width:190px;left:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,148,16,.14),transparent);
  animation:sweep 1.45s cubic-bezier(.36,.1,.28,1) 1 both;
}
@keyframes sweep{from{transform:translateX(-200px)}to{transform:translateX(560px)}}
.scanline{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink3);padding:5px 0;opacity:.3;transition:opacity .25s,color .25s}
.scanline.done{opacity:1;color:var(--ink2)}
.scanline .dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--line2);flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:9px;color:#0a0b0f;font-weight:900}
.scanline.done .dot{background:var(--good);border-color:var(--good)}
.scanline.done .dot::after{content:"\2713"}

.verdict{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px;border-radius:999px}
.verdict.open{background:rgba(61,220,151,.12);color:var(--good);border:1px solid rgba(61,220,151,.3)}
.verdict.sold{background:rgba(255,107,94,.12);color:var(--bad);border:1px solid rgba(255,107,94,.3)}
.verdict.wait{background:var(--amberdim);color:var(--amber2);border:1px solid #6b4409}

/* ZIP → city bridge. Says out loud why a Belleview ZIP lands on an Ocala page. */
.bridge{margin:13px 0 0;font-size:14px;color:var(--ink2)}
.bridge[hidden]{display:none}
/* The real queue position on the waitlist path (item 22). Rendered only when the queue is readable
   — see paintQueue() in app.js; there is no styling here for an invented number because there is
   no invented number. */
.queue{margin:13px 0 0;font-size:15px;color:var(--ink2)}
/* His week, priced at his own numbers (day 7). Computed, never authored — see paintHisMath. */
.hismath{margin:10px 0 0;font-size:15px;color:var(--ink);font-weight:600}
.hismath[hidden]{display:none}

.band{
  margin:16px 0 0;padding:20px 18px;border-radius:16px;text-align:center;
  background:linear-gradient(160deg,#3a2205,#1a1206);border:1px solid #6b4409;
}
/* The label ON the big number, above it, mirroring .u below it. Deliberately quiet: it says which
   kind of claim the number is, and it must never outweigh the guarantee line under the pair. */
.band .lbl{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#b8975f;margin-bottom:8px}
.band .n{font-size:44px;line-height:1;font-weight:900;letter-spacing:-.03em;color:#fff;font-variant-numeric:tabular-nums}
.band .u{font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--amber2);margin-top:8px}
.band .sub{font-size:14px;color:#e2c79a;margin-top:9px}
/* The estimate/guarantee separator (flat-5 ruling): the big number above is what we EXPECT, the
   block below is what we PROMISE. They are different claims and they must not read as one.
   ⛔ The guarantee is never the dimmest text in this block. It was 12.5px in the block's faintest
   gold, under a bigger estimate — which read as small print on the promise. .grthead outranks the
   estimate label now, and any restyling here keeps that order.
   (.band .est went with the duplicate "The guarantee: 5." teaser line — see index.html.) */
.band .grt{font-size:13px;color:#c9a66f;margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,181,77,.22);text-align:left}
.band .grthead{font-size:15px;margin-bottom:9px}
.band ul.ladder{margin:0;padding-left:18px}
.band ul.ladder li{margin-bottom:6px;line-height:1.45}
.band ul.ladder li:last-child{margin-bottom:0}

/* ---------- the claim (operator items 15 + 21) ----------
   A premium invitation with real stakes, and the stakes are TRUE: one per city, first come. The
   glow is the only "urgency" device on the page and it is decoration, not a claim — it counts
   nothing down, reserves nothing and expires never. ⛔ No timer, no countdown, no fake hold: any
   element that implies a deadline we are not actually keeping is the dead rule and gets cut.
   The pulse is slow (4s) and low-contrast on purpose — refined, not a buy-now banner — and it stops
   entirely under prefers-reduced-motion. */
.claim{margin:20px 0 0;padding:16px 16px 14px;border-radius:var(--r);border:1px solid #6b4409;
  background:linear-gradient(160deg,#241802,var(--card));text-align:center}
.claim .eyebrow{margin:0 0 8px}
.claimline{margin:0;font-size:17px;line-height:1.35;font-weight:700;color:var(--ink)}
.btn.glow{box-shadow:0 8px 26px rgba(255,148,16,.3);animation:glow 4s ease-in-out infinite}
@keyframes glow{
  0%,100%{box-shadow:0 8px 26px rgba(255,148,16,.26)}
  50%{box-shadow:0 8px 34px rgba(255,148,16,.5)}
}
@media (prefers-reduced-motion:reduce){.btn.glow{animation:none}}

/* ---------- the hold clock (day 7 only) ----------
   ⚠️ READ THE RULE ABOVE BEFORE ASSUMING THIS CONTRADICTS IT. The .claim block's "no timer, no
   countdown" is about index.html's S0, where nothing is held for anybody. This is day7.html, where
   the city genuinely is off the market and the server genuinely stops taking the charge at the hour
   this prints (operator ruling 2026-08-06). Same words, opposite facts. Do not copy this class onto
   the funnel page.
   Styled as a FACT, not a klaxon: the hero's own furniture, one amber accent, no red, no pulse and
   nothing that grows as the number falls. tabular-nums so the digits do not jitter each second —
   the width of "1" and "8" differ in the system font, and a clock that twitches is a clock that
   pulls the eye off the call log this page opens with. */
.holdclock{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;
  margin:16px 0 0;padding:12px 14px;border-radius:12px;
  background:var(--amberdim);border:1px solid #6b4409;
}
.holdclock[hidden]{display:none}   /* display:flex beats the UA's [hidden] — same trap as .mocknote */
.holdclock .hcl{font-size:14.5px;font-weight:700;color:#e2c79a}
.holdclock .hcsep{color:#8d7145}
.holdclock .hct{
  font-size:21px;font-weight:900;letter-spacing:.02em;color:var(--amber2);
  font-variant-numeric:tabular-nums;margin-left:auto;
}
@media (max-width:380px){.holdclock .hct{margin-left:0}}

/* ---------- the state-law block (S3, config-driven) ----------
   Calm, not alarming: it is the same card furniture as everything else on the screen with one
   quiet accent edge. A man reading "the law requires it" does not need a red box as well. */
.lawblock{display:flex;gap:12px;align-items:flex-start;margin:22px 0 0;padding:16px;
  border-radius:var(--r);background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--amber)}
.lawblock[hidden]{display:none}
.lawblock .ic{font-size:18px;line-height:1.2;flex:0 0 auto}
.lawblock .lawbody{flex:1 1 auto;min-width:0}
.lawblock p{font-size:14.5px;margin:0 0 8px}
/* The cited statute (operator 2026-08-06). Quiet — one line, the block's own type, a linked citation
   and nothing else. ⛔ No `display` here: a <p> is already block, and setting one would beat the UA's
   [hidden] rule the same way .lawblock and .mocknote had to work around it. */
.lawcite{color:var(--ink3)}
.lawcite a{white-space:nowrap}

.note{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:13px 14px;border-radius:12px;background:var(--bg2);border:1px solid var(--line)}
.note .ic{font-size:16px;line-height:1.3;flex:0 0 auto}
.note div{font-size:13.5px;color:var(--ink2)}

/* ---------- S1 beats ----------
   Four rows that light up one after another, ~600ms apart, CSS only. The animation starts when the
   step is shown rather than on page load, because the section is display:none until it gets .on and
   a display:none element does not run animations. No JS, nothing to keep in sync, and it replays if
   he taps back. The button is never gated on it. */
.beats{display:grid;gap:12px;margin:18px 0 0}
.beat{
  display:flex;gap:14px;align-items:center;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;
  position:relative;opacity:0;animation:beatin .5s cubic-bezier(.2,.7,.3,1) both;
}
.beat:nth-child(1){animation-delay:.05s}
.beat:nth-child(2){animation-delay:.65s}
.beat:nth-child(3){animation-delay:1.25s}
.beat:nth-child(4){animation-delay:1.85s}
.beat::before{
  content:"";position:absolute;left:37px;top:100%;height:12px;width:2px;
  background:linear-gradient(var(--line2),transparent);
}
.beat:last-child::before{display:none}
.beat .ic{
  width:44px;height:44px;flex:0 0 auto;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--amberdim);border:1px solid #4a3410;font-size:21px;
}
.beat .bt{font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.35}
@keyframes beatin{
  from{opacity:0;transform:translateY(12px)}
  60%{opacity:1}
  to{opacity:1;transform:none}
}
/* ---------- .casc · the shared stagger ----------
   One primitive for every sequenced reveal on both pages (REWRITE-PASS §D): the S0 guarantee
   ladder, the S4 ramp strip, the S4 trial-clock timeline, the S5 price beats, the paid-screen rows
   and the day-7 "what keeps running" list. Same mechanism as .beats above and for the same reason:
   a section is display:none until it gets .on, and a display:none element does not run animations,
   so the cascade starts when the screen is shown and replays if he taps back. Nothing is gated on
   it — every button is live from the first frame. */
.casc > *{opacity:0;animation:beatin .42s cubic-bezier(.2,.7,.3,1) both}
.casc > *:nth-child(1){animation-delay:.04s}
.casc > *:nth-child(2){animation-delay:.36s}
.casc > *:nth-child(3){animation-delay:.68s}
.casc > *:nth-child(4){animation-delay:1s}
.casc > *:nth-child(5){animation-delay:1.32s}
.casc > *:nth-child(6){animation-delay:1.64s}
.casc > *:nth-child(7){animation-delay:1.96s}
.casc > *:nth-child(8){animation-delay:2.28s}

@media (prefers-reduced-motion:reduce){
  .beat{opacity:1;animation:none}
  .casc > *{opacity:1;animation:none}
  section[data-step],section[data-view]{animation:none}
}

/* Bulleted prose that replaced paragraphs across the shortening pass. Tighter than a default list
   because the whole point of the rewrite was fewer words on screen, not the same words indented. */
ul.tight{margin:0;padding-left:19px}
ul.tight li{font-size:14.5px;color:var(--ink2);line-height:1.5;margin-bottom:6px}
ul.tight li:last-child{margin-bottom:0}
ul.tight .strong,ul.tight b{color:var(--ink);font-weight:700}

/* ---------- whale ---------- */
.whale{margin:16px 0 0;border:1px solid var(--amber);border-radius:var(--r);background:linear-gradient(165deg,#2a1c07,#161922);padding:18px}
.whale[hidden]{display:none}
.cal{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 0}
.calday{border:1px solid var(--line2);border-radius:12px;background:#12141c;padding:12px}
.calday .d{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--amber2);margin-bottom:9px}
.slot{appearance:none;display:block;width:100%;font:inherit;font-size:14px;font-weight:600;text-align:center;
  background:var(--card2);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:9px 6px;cursor:pointer;margin-bottom:7px}
.slot:last-child{margin-bottom:0}
.slot:hover{border-color:var(--line2)}
.slot.sel{background:var(--amber);border-color:var(--amber);color:#1a1003}

/* ---------- greeked operator placeholders ----------
   Anything inside .greek is NOT copy. It marks a decision the operator still owes.
   ⚠️ ZERO USERS as of 2026-08-06: the last one was the whale card's "[Bigger plans start at $X/mo —
   ASK 4 pending]", closed by the $2,500 ruling. Kept because the mechanism is how this funnel is
   allowed to ship with a hole in it — a greeked slot is visibly not copy, and every alternative
   (inventing a number, leaving the sentence out) is worse. Re-use it; do not re-invent it. */
.greek{
  margin:14px 0 0;border:1px dashed var(--line2);border-radius:12px;padding:13px 14px;
  color:#8f97a7;font-size:13px;line-height:1.55;
  background:repeating-linear-gradient(135deg,#12141b,#12141b 9px,#161923 9px,#161923 18px);
}
.greek b{display:block;color:var(--amber2);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.greek .slotline{color:#c3cad6;font-weight:700}

/* ---------- ramp ---------- */
.ramp{display:grid;gap:0;margin:0}
.rampitem{display:flex;gap:13px;align-items:flex-start;padding:0 0 18px;position:relative}
.rampitem:last-child{padding-bottom:0}
.rampitem::before{content:"";position:absolute;left:12px;top:26px;bottom:0;width:2px;background:linear-gradient(var(--line2),transparent)}
.rampitem:last-child::before{display:none}
.rampdot{width:26px;height:26px;flex:0 0 auto;border-radius:50%;background:var(--card2);border:2px solid var(--line2);position:relative;z-index:1}
.rampitem.hot .rampdot,.rampitem.next .rampdot{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 5px rgba(255,148,16,.14)}
.rampitem.done .rampdot{background:var(--good);border-color:var(--good)}
.rampitem.done .rampdot::after{content:"\2713";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#08120c;font-weight:900;font-size:13px}
.rampitem b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin-bottom:2px}
.rampitem.hot b,.rampitem.next b{color:var(--amber2)}
.rampitem.done b{color:var(--good)}
.rampitem span{font-size:15.5px;color:var(--ink);font-weight:600}

/* ---------- S4 · your week, drawn (the trial clock) ----------
   The concept text kept failing to land: the 7 days start at the FIRST CALL, not at payment and not
   at switch-on. Vertical rail on a phone, horizontal 4-node strip from 520px up. The ⭐ bracket is
   its own list item so it can be placed under node 3 (First call) in BOTH layouts — explicit grid
   placement in the wide one, natural document order in the narrow one.
   ⚠️ The nth-child rules below are keyed to FIVE list items: 4 nodes + the bracket. Build and
   switch-on are ONE node (they shared a day marker); adding or removing a node means editing these
   rules and the markup together. */
.tl{list-style:none;margin:0;padding:0;display:grid;gap:0}
.tl > li{position:relative;padding:0 90px 15px 32px}
.tl > li:last-child{padding-bottom:0}
.tl > li::before{content:"";position:absolute;left:10px;top:25px;bottom:0;width:2px;background:linear-gradient(var(--line2),transparent)}
.tl > li:last-child::before,.tl > li.flag::before{display:none}
.tldot{position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--card2);border:2px solid var(--line2)}
.tl b{display:block;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);font-weight:800;margin-bottom:1px}
.tl .w{display:block;font-size:14.5px;color:var(--ink);font-weight:600;line-height:1.35}
.tl > li.start .tldot{background:var(--amber);border-color:var(--amber);box-shadow:0 0 0 5px rgba(255,148,16,.14)}
.tl > li.start b{color:var(--amber2)}
.tl > li.start .w{color:var(--amber2)}
/* The cumulative day rail: days-from-payment, read as a ruler beside (phone) or above (wide) the
   nodes. Deliberately a different weight and colour from the node labels — it is a measure, not a
   step. Its job is the last marker: the decision lands ~a week and a half to two weeks out. */
.tl .day{
  position:absolute;right:0;top:1px;width:84px;text-align:right;
  font-size:10px;line-height:1.35;letter-spacing:.07em;text-transform:uppercase;
  font-weight:800;color:var(--ink3);font-variant-numeric:tabular-nums;
}
.tl > li.start .day{color:var(--amber2)}
.tl > li.flag{padding-left:32px;padding-right:0}
.tl .fl{
  display:block;position:relative;border:1px solid #6b4409;background:var(--amberdim);
  color:var(--amber2);border-radius:9px;padding:8px 11px;text-align:center;
  font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
}
.tl .fl::before{
  content:"";position:absolute;left:14px;top:-6px;width:11px;height:11px;transform:rotate(45deg);
  background:var(--amberdim);border-left:1px solid #6b4409;border-top:1px solid #6b4409;
}
@media (min-width:520px){
  .tl{grid-template-columns:repeat(4,1fr);column-gap:8px;row-gap:14px}
  .tl > li{padding:68px 2px 0;text-align:center}
  .tl > li::before{left:50%;top:48px;bottom:auto;width:100%;height:2px;background:linear-gradient(90deg,var(--line2),transparent)}
  .tldot{left:50%;top:38px;transform:translateX(-50%)}
  /* The rail becomes a ruler ACROSS THE TOP here: one dashed segment per column, above the dots.
     The box is a fixed height with the text bottom-aligned, so a two-line marker ("usually Day
     10–13") grows upward into reserved space instead of down onto the dot. */
  .tl .day{
    left:0;right:auto;top:0;width:100%;height:32px;text-align:center;
    font-size:9.5px;line-height:1.25;letter-spacing:.02em;
    display:flex;align-items:flex-end;justify-content:center;
    padding-bottom:5px;border-bottom:1px dashed var(--line);
  }
  .tl b{font-size:9.5px;letter-spacing:.06em}
  .tl .w{font-size:12.5px;line-height:1.3}
  .tl > li:nth-child(1){grid-column:1;grid-row:1}
  .tl > li:nth-child(2){grid-column:2;grid-row:1}
  .tl > li:nth-child(3){grid-column:3;grid-row:1}
  /* The ⭐ bracket, under First call and running to the end of the row. */
  .tl > li:nth-child(4){grid-column:3 / 5;grid-row:2;padding:0}
  .tl > li:nth-child(5){grid-column:4;grid-row:1}
  .tl .fl{font-size:10.5px;letter-spacing:.06em;padding:7px 8px}
}

/* ---------- ticks ----------
   Collapsed shape (REWRITE-PASS §C1): a bold headline on the screen, the full clause one tap away
   in a native <details>. The checkbox sits OUTSIDE the disclosure — it is a sibling of it, not a
   descendant — so opening a clause can never tick it and the DOM tick count is unaffected.
   Cursor is on the two labels and the summary only; the card itself is not a control any more. */
.tick{display:flex;gap:13px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px;margin:0 0 10px}
.tick:hover{border-color:var(--line2)}
.tick.checked{border-color:var(--amber);background:#1b1a15}
.tick input{
  appearance:none;-webkit-appearance:none;margin:1px 0 0;flex:0 0 auto;
  width:22px;height:22px;border-radius:6px;border:2px solid var(--line2);background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.tick input:checked{background:var(--amber);border-color:var(--amber)}
.tick input:checked::after{content:"\2713";color:#1a1003;font-size:14px;font-weight:900;line-height:1}
.tbody{flex:1 1 auto;min-width:0}
.tick .t{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--amber);margin:0 0 5px;cursor:pointer}
.tick .hl{display:block;font-size:15.5px;line-height:1.4;font-weight:700;color:var(--ink);cursor:pointer}
.tick details{margin-top:9px}
.tick summary{
  list-style:none;cursor:pointer;display:inline-block;
  font-size:13px;font-weight:700;color:var(--amber2);padding:3px 0;
}
.tick summary::-webkit-details-marker{display:none}
.tick summary::after{content:" +";font-weight:900}
.tick details[open] summary::after{content:" \2013"}
/* T-B, the price acknowledgment: the loudest element in the set by operator ruling. It is the
   self-qualification — a man who cannot carry $1,500 a month has to meet that number here, before
   his card comes out, not on day 7. */
.tick.loud{border-color:var(--amber);background:linear-gradient(160deg,#241802,var(--card));
  padding:18px;margin-bottom:16px;box-shadow:0 6px 20px rgba(255,148,16,.10)}
.tick.loud .t{color:var(--amber2)}
.tick .hl.big{font-size:19px;line-height:1.3;font-weight:800;letter-spacing:-.01em}
.tick .ack{display:block;margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--ink2);cursor:pointer}
.tick .ack .strong{color:var(--amber2)}
.tick .b{font-size:14.5px;color:var(--ink2);line-height:1.52;margin-top:6px}
.tick .b .strong{color:var(--ink);font-weight:700}
.tick ul{margin:9px 0 0;padding-left:19px}
.tick li{margin-bottom:5px}
.tick .after{display:block;margin-top:10px}

/* ---------- FAQ (S4.5) ----------
   Native <details>/<summary>: it opens on a tap with no JS, so a question can never be a dead
   control. Same card skin as .tick so the section reads as part of the same page. */
.faq{display:grid;gap:10px}
.faq details{
  background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.faq details[open]{border-color:var(--line2)}
.faq summary{
  list-style:none;cursor:pointer;padding:15px 44px 15px 16px;position:relative;
  font-size:15.5px;font-weight:700;color:var(--ink);line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:15px;top:50%;transform:translateY(-50%);
  font-size:20px;font-weight:800;line-height:1;color:var(--amber2);transition:transform .15s ease;
}
.faq details[open] summary::after{content:"\2013";transform:translateY(-50%)}
.faq summary:hover{color:var(--amber2)}
.faq .a{
  padding:14px 16px 16px;font-size:14.5px;line-height:1.55;color:var(--ink2);
  border-top:1px solid var(--line);
}
.faq .a .strong{color:var(--ink);font-weight:700}

/* ---------- checkout ---------- */
.price{display:flex;align-items:baseline;gap:10px;margin:0 0 4px;flex-wrap:wrap}
.price .big{font-size:42px;font-weight:900;letter-spacing:-.03em;line-height:1}
/* The anchor: the real weekly rate, struck through beside the trial price. Muted and smaller so
   the $199 stays the number he reads first — the strike is the argument, not the headline. */
.price .was{
  font-size:24px;font-weight:800;line-height:1;color:var(--ink3);
  text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--bad);
}
.price .per{font-size:14px;color:var(--ink3)}
.anchor{font-size:14px;color:var(--ink2);margin:10px 0 0}
/* ---------- proof (operator-authorised call-log screenshots) ----------
   Wide screenshots (~2860px) shown small and sharp; the detail is one tap away in a new tab. The
   white plate behind them is deliberate — they are light-UI screenshots and dimming them to match
   the page would read as retouching evidence. */
.proof .proofgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0 0}
@media (max-width:460px){.proof .proofgrid{grid-template-columns:1fr}}
.proof .shotcard{margin:0}
/* Contain-fit inside a modest fixed height: the WHOLE screenshot is visible at a glance, which is
   the shape the operator settled on. Reading happens in the lightbox, not here. */
.proof .shot{display:block;border:1px solid var(--line2);border-radius:10px;overflow:hidden;
  background:#fff;padding:6px;transition:border-color .15s;cursor:zoom-in}
.proof .shot:hover{border-color:var(--amber)}
.proof .shot img{display:block;width:100%;height:132px;object-fit:contain;object-position:center}
.proof figcaption{text-align:center;margin-top:6px}
.zoombtn{
  appearance:none;background:none;border:0;font:inherit;font-size:13px;font-weight:700;
  color:var(--amber2);text-decoration:underline;cursor:pointer;padding:4px 6px;
}
.zoombtn:hover{color:var(--amber)}

/* ---------- lightbox ----------
   Fixed overlay, above everything, on the same page. Nothing here navigates. */
.lightbox{position:fixed;inset:0;z-index:50;background:rgba(4,5,8,.94);display:flex;
  align-items:center;justify-content:center;padding:52px 8px 40px}
.lightbox[hidden]{display:none}
.lbscroll{max-width:100%;max-height:100%;overflow:auto;-webkit-overflow-scrolling:touch;border-radius:8px}
.lbscroll img{display:block;width:100%;height:auto;cursor:zoom-in;background:#fff}
/* 1:1 — the state where a single call row is readable. Panning is the container's own scroll. */
.lightbox.zoom .lbscroll img{width:auto;max-width:none;cursor:zoom-out}
.lbclose{
  position:absolute;top:10px;right:10px;appearance:none;cursor:pointer;
  width:42px;height:42px;border-radius:50%;border:1px solid var(--line2);
  background:var(--card);color:var(--ink);font:inherit;font-size:17px;line-height:1;
}
.lbclose:hover{border-color:var(--amber);color:var(--amber2)}
.lbhint{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:12px;color:#7b8494}

.stripeish{border:1px solid var(--line);border-radius:12px;background:var(--bg2);overflow:hidden}
.stripeish label.fld{margin:0;border-bottom:1px solid var(--line)}
.stripeish label.fld:last-child{border-bottom:0}
.stripeish label.fld > span{margin:0;padding:11px 14px 0;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.stripeish input{border:0;border-radius:0;background:transparent;padding:6px 14px 13px}
.stripeish input:focus{box-shadow:none}
.split{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.split label.fld{border-bottom:0}
.split label.fld:first-child{border-right:1px solid var(--line)}
/* Expiry · CVC · ZIP on one row — the Stripe AVS shape (item 18). No billing address, ever. */
.split.three{grid-template-columns:1.1fr .95fr .95fr}
.split.three label.fld + label.fld{border-left:1px solid var(--line)}
.split.three label.fld:first-child{border-right:0}
.mockstamp{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bad);border:1px dashed rgba(255,107,94,.55);border-radius:8px;padding:5px 9px;margin:0 0 12px;
}
.lock{display:flex;gap:8px;align-items:center;justify-content:center;font-size:12.5px;color:var(--ink3);margin:12px 0 0}

/* ---------- paid screen · save-our-number + the verify chip ----------
   All of this lives inside row 1 of the "what happens next" list, so the block bits below are
   margin-tuned to sit under the sentence rather than start a new card. */
.savebtn{
  appearance:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font:inherit;
  font-size:13.5px;font-weight:800;color:var(--ink);background:var(--card2);
  border:1px solid var(--line2);border-radius:10px;padding:9px 13px;margin:9px 0 0;
}
.savebtn:hover{border-color:var(--amber);color:var(--amber2)}
.savebtn:active{transform:translateY(1px)}
.savehint{display:block;font-size:12.5px;color:var(--ink3);margin:5px 0 0}
/* Block, not inline: the verified string is long enough to overflow the card on a phone if it is
   allowed to sit on the sentence's line and refuse to wrap. Its own line, sized to its content. */
.verify{
  display:block;width:fit-content;max-width:100%;font-size:11.5px;font-weight:800;letter-spacing:.06em;
  border-radius:999px;padding:5px 11px;margin:8px 0 0;
  border:1px solid #6b4409;background:var(--amberdim);color:var(--amber2);
  animation:pulse 1.8s ease-in-out infinite;
}
.verify[data-state="ok"]{
  border-color:rgba(61,220,151,.35);background:rgba(61,220,151,.12);color:var(--good);animation:none;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.verify{animation:none}}

/* ---------- terminal marks ---------- */
.ok{text-align:center;padding:14px 0 0}
.okmark{width:66px;height:66px;margin:0 auto 16px;border-radius:50%;background:rgba(61,220,151,.12);border:2px solid var(--good);
  display:flex;align-items:center;justify-content:center;font-size:30px;color:var(--good);font-weight:900}
.okmark::after{content:"\2713"}
.okmark.sm{width:36px;height:36px;margin:0;font-size:18px;flex:0 0 auto}
.dead{text-align:center;padding:10px 0}
.deadmark{width:60px;height:60px;margin:0 auto 16px;border-radius:50%;background:rgba(255,107,94,.1);border:2px solid rgba(255,107,94,.45);
  display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--bad)}

/* ---------- day 7: call log ---------- */
.log{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);overflow:hidden}
.logrow{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line)}
.logrow:last-child{border-bottom:0}
.logrow .when{flex:1 1 auto;min-width:0}
.logrow .when b{display:block;font-size:14.5px;color:var(--ink);font-weight:700}
.logrow .when span{display:block;font-size:12.5px;color:var(--ink3)}
.logrow .dur{font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
/* The playback stand-in. Inert on purpose — it replaced a window.alert, which froze the tab on the
   one screen that has to stay scrollable. `.logrow .when span` sets display:block, which beats the
   UA's [hidden], so the row below is what actually keeps it hidden until the tap. */
.logrow .when .pnote{color:var(--amber2);font-weight:700;margin-top:2px}
.logrow .when .pnote[hidden]{display:none}
.play{
  appearance:none;flex:0 0 auto;width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:1px solid var(--line2);background:var(--card2);color:var(--amber2);font-size:12px;
  display:flex;align-items:center;justify-content:center;
}
.play:hover{border-color:var(--amber)}
.play::after{content:"\25B6"}

/* ---------- day 7: the one price ----------
   The .plans / .plan card styles were DELETED with the two-plan picker (operator ruling
   2026-08-05): there is one price on that page and it uses the shared .card.warm price block from
   S5, so the two pricing surfaces cannot drift apart visually either. */

.receipt{border:1px solid var(--line);border-radius:var(--r);background:var(--bg2);overflow:hidden}
.receipt .rh{padding:16px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px}
.receipt .rb{padding:16px 18px}
.row{display:flex;justify-content:space-between;gap:16px;font-size:14.5px;padding:7px 0;color:var(--ink2)}
.row b{color:var(--ink);text-align:right}
.row.tot{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;font-size:16px}
.row.tot b{font-size:19px;font-weight:900}
ul.deliver{margin:0;padding-left:20px}
ul.deliver li{font-size:14.5px;color:var(--ink2);margin-bottom:6px}
a.plain{color:var(--amber2)}
.cancelpanel{margin-top:12px;border:1px solid var(--line);border-radius:12px;background:var(--card);padding:16px}
.cancelpanel[hidden]{display:none}

/* ---------- ⭐ THE ONE MOCK GATE ----------------------------------------------
   Deploy ships this folder VERBATIM. Before this rule existed there was exactly one hide in the
   whole funnel — `app.js` set `.stripeish { display:none }` when live — so every sibling of that
   block shipped to a paying client: the red MOCKUP stamp, "Local demo. Nothing is sent anywhere.",
   an empty "Card" heading, and three operator navigation strips including one that let a client
   flip the delivery-verified chip himself.

   ⛔ MOCK CONTENT IS HIDDEN BY DEFAULT AND REVEALED, NOT THE OTHER WAY ROUND. The attribute is set
   by `brand.js`, which every page loads at the END of the body — so a rule that HID on a live flag
   would render the mockup stamp on a real client's screen for the length of one page parse. Keyed
   this way, live mode never paints a pixel of it and the mock click-through is the one that flickers.
   That is the correct side to be wrong on.

   `!important` because these elements carry their own display values (`.mockstamp` is inline-block,
   `.lock` is flex) and this rule must beat all of them without knowing any of them. */
:root:not([data-mock]) .mockonly{display:none !important}
/* Its twin: copy that is true ONLY of the live build, kept off the operator's click-through so the
   mockup does not make a promise it cannot keep. Same attribute, same one mechanism. */
:root[data-mock] .liveonly{display:none !important}

/* ---------- mockup navigation (operator only, never customer copy) ---------- */
.mocknav{margin:26px 0 0;border-top:1px dashed var(--line2);padding-top:12px;text-align:center;font-size:12px;color:#5b6474}
.mocknav a{color:#8d96a8}
/* Operator note inside the strip — day-7's "the city you are looking at is not the one you asked
   for". Brighter than the strip around it because its whole job is to be noticed; still operator
   language, still deleted with the strip before M2. */
.mocknote{display:block;margin-top:6px;color:var(--amber2);font-weight:700}
.mocknote[hidden]{display:none}   /* display:block beats the UA's [hidden] — same trap as label.fld */

/* ---------- legitimacy footer (every screen, both pages) ----------
   ASK 3 closed 2026-08-05: the company, quietly — no name, no face, no address. Small and dim on
   purpose. It is there to be found when a man goes looking for who he is paying, not to decorate.
   The founder-photo styles (.face / .who / .pending) went with the ruling. */
.contact{margin:28px 0 0;border-top:1px solid var(--line);padding-top:16px}
.contact .legal{font-size:12.5px;color:#79818f;line-height:1.7;text-align:center}
.contact .legal a{color:#8f97a7;text-decoration:none}
.contact .legal a:hover{color:var(--amber2)}
/* .contact .legal .slotline is GONE: the footer's last greeked slot (the phone) closed 2026-08-05
   and there is no placeholder left in this block to style. The live .greek .slotline rule above is
   a different one — it belongs to the ASK-4 placeholder on S2. */

/* ---------- legal pages (terms.html, privacy.html) ----------
   Same furniture as the funnel, three additions only. A legal page that looks like a different
   product is a legal page a man does not believe belongs to what he just bought, so nothing here
   introduces a new colour, a new radius or a new type scale — it reuses the card, the rule, the
   tight list and the .lawblock accent that S3's state-law block already uses for "this is a fact
   about the law, stated calmly". */
.doc h2{font-size:20px;margin:26px 0 8px}
.doc h2:first-child{margin-top:0}
/* The version chip. A terms page whose version is not on the face of it cannot be checked against
   the consent record, which is the only thing that makes the record worth storing. */
.vtag{display:inline-block;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;
  color:var(--ink3);border:1px solid var(--line2);border-radius:999px;padding:5px 11px}
/* VERBATIM CLICK-WRAP TEXT. Visually distinct on purpose: what is inside this block is transcribed
   byte-for-byte from the ticks and may not be edited for tone, length or house style. The border is
   the reminder. */
.verbatim{border-left:3px solid var(--line2);background:var(--bg2);border-radius:0 12px 12px 0;
  padding:14px 16px;margin:12px 0}
.verbatim .vlbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--ink3);margin:0 0 8px}
.verbatim p{font-size:14.5px;color:var(--ink2);line-height:1.5;margin:0}
.verbatim b{color:var(--ink);font-weight:700}
.doc .lawblock{margin:14px 0 0}

@media (min-width:600px){
  h1{font-size:36px}
  .wrap{padding-top:6px}
}

.confbost{margin-top:12px;padding-top:12px;border-top:1px solid rgba(251,191,36,.25);font-size:14.5px}
.confbost .good{color:#4ade80;font-weight:700}
.confbost .warm{color:#fbbf24;font-weight:600}