/* =====================================================================
   TALLY — "cash, itemized." Newsprint, typewriter mono, poster type,
   perforated tickets, rubber stamps. The request prints like a receipt.
   ===================================================================== */
:root{
  --news:#e9e4d8;
  --news-2:#dfd9ca;
  --paper:#fbf8f1;
  --ink:#1a1a1a;
  --ink-2:#3a3833;
  --muted:#6b6558;
  --faint:#9c9584;
  --rule:#1a1a1a;
  --red:#ff4d2e;
  --red-d:#e53a1b;
  --red-tint:#ffe6e0;
  --green:#1f7a4a;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --poster:'Archivo Black','Arial Black','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* custom select aliases — the themed dropdown every other template uses
     (assets/js/select.js + assets/css/select-cs.css) reads these */
  --cs-accent:var(--ink);--cs-accent-d:#000;
  --cs-ink:var(--ink);--cs-body:var(--ink-2);--cs-muted:var(--muted);
  --cs-border:var(--ink);--cs-field-bg:#fff;--cs-card:var(--paper);
  --cs-on-accent:var(--paper);--cs-red:var(--red-d);
  --cs-shadow:4px 4px 0 var(--ink);
  --cs-radius:0;--cs-panel-radius:0;--cs-opt-radius:0;
  --cs-border-w:2px;--cs-panel-border-w:2px;--cs-pad:12px 13px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--mono);background:var(--news);color:var(--ink);line-height:1.65;font-size:15px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* paper grain */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.35;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .32 0 0 0 0 .26 0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body > *{position:relative;z-index:1}
h1,h2,h3{font-family:var(--poster);font-weight:400;text-transform:uppercase;letter-spacing:-.025em;line-height:.95}
a{color:inherit}
button{font-family:inherit;color:inherit}
.shell{max-width:1200px;margin:0 auto;padding:0 32px}
.ico{width:18px;height:18px;flex:none;display:inline-block;vertical-align:middle}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px dashed var(--red);outline-offset:3px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);font-family:var(--poster);font-size:16px;text-transform:uppercase;letter-spacing:.05em;padding:15px 26px;cursor:pointer;text-decoration:none;transition:transform .1s,background .15s,box-shadow .15s;box-shadow:4px 4px 0 var(--red)}
.btn:hover{background:#000;transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--red)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--red)}
.btn-paper{background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.btn-paper:hover{background:#fff;box-shadow:5px 5px 0 var(--ink)}
.btn-red{background:var(--red);border-color:var(--ink);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.btn-red:hover{background:var(--red-d);box-shadow:5px 5px 0 var(--ink)}
.btn[hidden]{display:none}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.link{background:none;border:0;padding:0;font-family:var(--mono);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.link:hover{color:var(--red-d)}

/* ---------- nav ---------- */
.nav{border-bottom:2px dashed var(--rule)}
.nav .shell{height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{font-family:var(--poster);font-size:clamp(19px,2.6vw,28px);text-transform:uppercase;letter-spacing:-.02em;text-decoration:none;line-height:1.1;min-width:0;overflow-wrap:anywhere}
.navl{display:flex;gap:28px;font-size:13px;text-transform:uppercase;letter-spacing:.04em}
.navl a{text-decoration:none}
.navl a:hover{text-decoration:underline;text-underline-offset:4px}
.nav .start{font-size:13px;text-transform:uppercase;text-decoration:none;border:2px solid var(--ink);padding:8px 14px;background:var(--paper);white-space:nowrap}
.nav .start:hover{background:var(--ink);color:var(--paper)}

/* ---------- hero ---------- */
.hero .shell{display:grid;grid-template-columns:1.08fr .92fr;gap:64px;align-items:start;padding-top:52px;padding-bottom:70px}
.meta{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;text-transform:uppercase;margin-bottom:22px;align-items:center}
.meta b{background:var(--red);color:#fff;padding:2px 9px;font-weight:700}
.hero h1{font-size:clamp(44px,7vw,88px);margin-bottom:26px}
.hero h1 em{font-style:normal;color:var(--red)}
.lede{font-size:15.5px;max-width:48ch;margin-bottom:28px}
.items{max-width:440px;font-size:14px}
.items div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dotted var(--ink)}
.items b{font-weight:700}

/* ---------- ticket component ---------- */
.ticket{background:var(--paper);padding:34px 30px 28px;position:relative;filter:drop-shadow(0 22px 26px rgba(26,26,26,.18))}
.ticket::before,.ticket::after{content:"";position:absolute;left:0;right:0;height:14px;background:radial-gradient(circle at 7px 7px,var(--news) 6px,transparent 6.5px) 0 0/14px 14px repeat-x}
.ticket::before{top:-7px}
.ticket::after{bottom:-7px}
.ticket.tilt{transform:rotate(1.2deg)}
.tk-h{text-align:center;font-family:var(--poster);font-size:21px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px}
.tk-d{text-align:center;font-size:12px;text-transform:uppercase;color:var(--muted)}
.cut{border:0;border-top:2px dashed var(--ink);margin:16px 0}
.line{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;font-size:14px}
.line > span:first-child{white-space:nowrap}
.line b{font-weight:700;text-align:right}
.big{display:flex;justify-content:space-between;align-items:center;gap:12px}
.big .lbl{font-family:var(--poster);font-size:30px;text-transform:uppercase}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{width:34px;height:34px;border:2px solid var(--ink);background:var(--paper);font-family:var(--poster);font-size:18px;line-height:1;cursor:pointer}
.stepper button:hover{background:var(--ink);color:var(--paper)}
.stepper output{font-family:var(--poster);font-size:34px;min-width:5ch;text-align:right;line-height:1}
.tsel,.tinp{font-family:var(--mono);font-size:14px;font-weight:700;text-transform:uppercase;color:var(--ink);background:transparent;border:0;border-bottom:2px solid var(--ink);padding:3px 22px 3px 4px;text-align:right;-webkit-appearance:none;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='3.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;max-width:62%}
.tinp{background-image:none;padding-right:4px;width:7ch;cursor:text;letter-spacing:.2em}
.tinp::placeholder{color:var(--faint);letter-spacing:.2em}
.tsel:focus,.tinp:focus{outline:0;background-color:#fff3c4}
.tinp.bad,.tsel.bad{border-bottom-color:var(--red);background-color:var(--red-tint)}
.terr{display:none;font-size:12px;color:var(--red-d);text-align:right;margin-top:-2px}
.terr.on{display:block}
.ticket .btn{width:100%;margin-top:20px}
.barcode{height:46px;margin-top:20px;background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 7px,transparent 7px 9px,var(--ink) 9px 10px,transparent 10px 14px,var(--ink) 14px 17px,transparent 17px 18px)}
.barcode-n{text-align:center;font-size:11px;letter-spacing:.4em;margin-top:6px;color:var(--muted)}
.stamp{position:absolute;border:3px solid var(--red);color:var(--red);font-family:var(--poster);text-transform:uppercase;letter-spacing:.06em;padding:6px 11px;transform:rotate(-12deg);background:rgba(251,248,241,.8);pointer-events:none;mix-blend-mode:multiply}
.ticket .stamp{left:26px;bottom:38px;font-size:15px}
.fine{font-size:11.5px;color:var(--muted);text-align:center;margin-top:12px;line-height:1.5}

/* ---------- dark band ---------- */
.band{background:var(--ink);color:var(--news)}
.band .shell{display:grid;grid-template-columns:repeat(3,1fr)}
.band .s{padding:32px 30px;border-left:2px dashed #4a4740}
.band .s:first-child{border-left:0;padding-left:0}
.band h3{font-size:21px;color:#fff;margin-bottom:8px}
.band h3 span{color:var(--red);margin-right:8px}
.band p{font-size:13.5px;color:#bdb6a6}

/* ---------- sections ---------- */
.sec{padding:80px 0}
.sec-h{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:36px;flex-wrap:wrap;border-bottom:2px solid var(--ink);padding-bottom:18px}
.sec-h h2{font-size:clamp(34px,5vw,56px)}
.sec-h p{font-size:14px;max-width:44ch;color:var(--ink-2)}
.sec-h .no{font-size:13px;text-transform:uppercase;color:var(--red-d);font-weight:700;display:block;margin-bottom:10px;letter-spacing:.06em}

.costs{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.costs .ticket{transform:rotate(-.8deg)}
.costs .slide{margin:6px 0 4px}
.costs input[type=range]{width:100%;accent-color:var(--ink)}
.costs .total{display:flex;justify-content:space-between;font-family:var(--poster);font-size:26px;text-transform:uppercase;padding-top:4px}
.explain h3{font-size:28px;margin-bottom:14px}
.explain p{margin-bottom:14px;color:var(--ink-2)}
.explain .k{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px;border-top:2px solid var(--ink);padding-top:16px;margin-top:20px}
.explain .k b{font-weight:700}

.need{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:2px solid var(--ink);background:var(--paper)}
.need div{padding:22px 20px;border-left:2px dashed var(--ink)}
.need div:first-child{border-left:0}
.need .n{font-family:var(--poster);font-size:44px;color:var(--red);line-height:1;display:block;margin-bottom:12px}
.need b{display:block;font-size:14.5px;margin-bottom:4px;text-transform:uppercase}
.need span{font-size:13px;color:var(--muted)}

.terms-list{border-top:2px solid var(--ink)}
.term{border-bottom:1px dashed var(--ink)}
.term summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:60px 1fr 30px;gap:14px;align-items:center;padding:20px 0;font-weight:700;font-size:16px}
.term summary::-webkit-details-marker{display:none}
.term summary .n{font-family:var(--poster);font-size:20px;color:var(--red)}
.term summary::after{content:"+";font-family:var(--poster);font-size:22px;text-align:center;transition:transform .2s var(--ease)}
.term[open] summary::after{transform:rotate(45deg)}
.term .a{padding:0 44px 22px 74px;color:var(--ink-2);font-size:14.5px}

.stub{padding:10px 0 90px}
.stub-in{display:grid;grid-template-columns:1fr 230px;background:var(--red);border:2px solid var(--ink);position:relative;box-shadow:8px 8px 0 var(--ink)}
.stub-l{padding:44px 44px}
.stub-l .no{font-size:13px;text-transform:uppercase;margin-bottom:10px;display:block;letter-spacing:.06em}
.stub-l h2{font-size:clamp(34px,5vw,58px);color:var(--ink);margin-bottom:12px}
.stub-l p{font-size:15px;max-width:44ch}
.stub-r{border-left:3px dashed var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;background:var(--paper)}
.stub-r .adm{font-family:var(--poster);font-size:24px;text-transform:uppercase;text-align:center;line-height:1}
.stub-r .btn{width:100%;padding:14px 10px;font-size:14px}

.foot{border-top:2px dashed var(--ink);padding:40px 0 30px;font-size:12.5px}
.foot-top{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;text-transform:uppercase;font-size:12.5px}
.foot-links a{text-decoration:none}
.foot-links a:hover{text-decoration:underline}
.foot p{color:var(--ink-2);line-height:1.7;margin-bottom:12px;max-width:118ch}
.foot p b{color:var(--ink)}

/* =====================================================================
   REQUEST — the receipt that prints as you go
   ===================================================================== */
body.apply .nav .shell{height:66px}
.ap-meta{display:flex;align-items:center;gap:8px;font-size:12.5px;text-transform:uppercase;white-space:nowrap}
.ap-meta .ico{width:15px;height:15px}
.printer{max-width:680px;margin:0 auto;padding:40px 20px 120px}
.slot-top{height:18px;background:var(--ink);border-radius:9px 9px 3px 3px;margin:0 -14px;box-shadow:inset 0 -6px 0 #000}
.receipt{background:var(--paper);padding:30px 34px 34px;position:relative;filter:drop-shadow(0 22px 26px rgba(26,26,26,.16));margin-top:-6px}
.receipt::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:14px;background:radial-gradient(circle at 7px 7px,var(--news) 6px,transparent 6.5px) 0 0/14px 14px repeat-x}
.r-head{text-align:center;margin-bottom:6px}
.r-head .t{font-family:var(--poster);font-size:24px;text-transform:uppercase;letter-spacing:.04em}
.r-head .d{font-size:12px;color:var(--muted);text-transform:uppercase}
.r-prog{display:flex;gap:4px;margin:18px 0 6px}
.r-prog i{flex:1;height:6px;background:var(--news-2);transition:background .3s}
.r-prog i.on{background:var(--ink)}
.r-prog i.now{background:var(--red)}
.r-count{display:flex;justify-content:space-between;font-size:12px;text-transform:uppercase;color:var(--muted);gap:12px}

.part{border-top:2px dashed var(--ink);margin-top:20px;padding-top:18px}
.part[hidden]{display:none}
.part-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:4px}
.part-h h2{font-size:22px}
.part-h .no{font-size:12px;color:var(--red-d);font-weight:700;text-transform:uppercase;white-space:nowrap}
.part .why{font-size:13px;color:var(--muted);margin-bottom:18px}

/* printed (collapsed) state */
.part.printed .body{display:none}
.part .sum{display:none}
.part.printed .sum{display:block;animation:print .45s steps(6) both}
.part.printed .why{display:none}
@keyframes print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.sum .line{padding:3px 0;font-size:13.5px;overflow:hidden}
.sum .line span:first-child::after{content:" ....................................................";color:var(--faint);overflow:hidden}
.sum .line span:first-child{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
.sum .line b{flex:none;max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.part.open{animation:feed .5s var(--ease) both}
@keyframes feed{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.fields .full{grid-column:1/-1}
.fields.g3{grid-template-columns:1.5fr 1fr .8fr}
.f label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:700;margin-bottom:6px}
.f .rq{color:var(--red-d)}
.f input,.f select{width:100%;font-family:var(--mono);font-size:16px;font-weight:700;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:0;padding:12px 13px;-webkit-appearance:none;appearance:none;transition:box-shadow .12s,background .12s}
.f input::placeholder{color:var(--faint);font-weight:400}
.f input:focus,.f select:focus{outline:0;background:#fffbea;box-shadow:4px 4px 0 var(--red)}
.f input.ok,.f select.ok{background:#f6fbf3}
.f input.bad,.f select.bad{border-color:var(--red);background:var(--red-tint)}
.f select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='3.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:38px}
.f input[type=date]{min-height:52px}
.f .err{display:none;font-size:12px;color:var(--red-d);margin-top:5px;font-weight:700}
.f .bad ~ .err{display:block}
.f .hint{font-size:12px;color:var(--muted);margin-top:5px}
.f.rv{position:relative}
.f.rv input{padding-right:72px}
.f .eye{position:absolute;right:8px;top:31px;border:2px solid var(--ink);background:var(--paper);font-family:var(--mono);font-size:11px;font-weight:700;text-transform:uppercase;padding:5px 8px;cursor:pointer}
.ticks{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ticks.t4{grid-template-columns:1fr 1fr}
.ticks.t5{grid-template-columns:repeat(5,1fr)}
.ticks button{border:2px solid var(--ink);background:#fff;padding:12px 8px;font-family:var(--mono);font-weight:700;font-size:14px;text-transform:uppercase;cursor:pointer;text-align:left;display:flex;align-items:center;gap:10px;transition:background .12s}
.ticks.t5 button{justify-content:center;text-align:center;padding:12px 4px;font-family:var(--poster);font-size:15px}
.ticks button::before{content:"";width:14px;height:14px;border:2px solid var(--ink);flex:none;background:#fff}
.ticks.t5 button::before{display:none}
.ticks button:hover{background:#fffbea}
.ticks button.on{background:var(--ink);color:var(--paper)}
.ticks button.on::before{background:var(--red);border-color:var(--paper)}
.seg-wrap .err{display:none;font-size:12px;color:var(--red-d);margin-top:5px;font-weight:700}
.seg-wrap.bad .err{display:block}
.seg-wrap.bad .ticks button{border-color:var(--red)}
.p-act{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px}
.p-act .btn{padding:13px 20px;font-size:14px}
.p-note{font-size:12.5px;color:var(--muted);margin-top:16px;display:flex;gap:8px}
.p-note .ico{width:15px;height:15px;margin-top:2px;color:var(--green)}

.total{border-top:3px double var(--ink);border-bottom:3px double var(--ink);margin-top:24px;padding:10px 0}
.total .line{font-size:15px}
.total .grand{display:flex;justify-content:space-between;font-family:var(--poster);font-size:24px;text-transform:uppercase;padding:4px 0}
.alert{display:none;border:2px solid var(--red);background:var(--red-tint);padding:11px 13px;font-size:13.5px;font-weight:700;margin-top:16px}
.alert.on{display:block}

.result{text-align:center;padding:10px 0 4px;position:relative;overflow:clip}
.result h2{font-size:clamp(30px,5vw,44px);margin:10px 0 10px}
.result p{color:var(--ink-2);max-width:46ch;margin:0 auto 18px}
.result .stamp.big{position:relative;display:inline-block;font-size:30px;padding:10px 20px;border-width:4px;animation:thump .5s cubic-bezier(.2,1.6,.4,1) both}
@keyframes thump{0%{transform:rotate(-12deg) scale(2.4);opacity:0}100%{transform:rotate(-12deg) scale(1);opacity:1}}
.result .next{text-align:left;border-top:2px dashed var(--ink);margin-top:18px}
.result .next .line{border-bottom:1px dotted var(--ink);padding:10px 0;align-items:flex-start}
.result .next .line b{font-family:var(--poster);color:var(--red);font-size:16px;margin-right:12px;flex:none}
.result .next .line span{text-align:left;white-space:normal}
.printing{text-align:center;padding:14px 0}
.printing .dots{font-family:var(--poster);font-size:28px;text-transform:uppercase}
.printing .dots::after{content:"";animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.printing p{color:var(--muted);font-size:13px;margin-top:8px}
.printing .steps{text-align:left;max-width:420px;margin:22px auto 0;border-top:2px dashed var(--ink)}
.printing .steps > div{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px dotted var(--ink);opacity:.4;transition:opacity .25s}
.printing .steps > div.on{opacity:1}
.printing .steps .s{font-family:var(--poster);color:var(--red);font-size:15px;flex:none;width:22px}
.printing .steps b{display:block;font-size:13.5px;text-transform:uppercase}
.printing .steps span{font-size:12.5px;color:var(--muted)}
.ap-fine{text-align:center;font-size:11.5px;color:var(--muted);max-width:620px;margin:22px auto 0;line-height:1.6}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .hero .shell{grid-template-columns:1fr;gap:44px}
  .ticket.tilt{max-width:520px;width:100%;justify-self:center;transform:rotate(.6deg)}
  .costs{grid-template-columns:1fr;gap:36px}
  .need{grid-template-columns:1fr 1fr}
  .need div:nth-child(3){border-left:0}
  .need div:nth-child(n+3){border-top:2px dashed var(--ink)}
  .band .shell{grid-template-columns:1fr}
  .band .s{border-left:0;border-top:2px dashed #4a4740;padding:24px 0}
  .band .s:first-child{border-top:0}
}
@media (max-width:640px){
  body{font-size:14.5px}
  .shell{padding:0 18px}
  .navl{display:none}
  .nav .shell{height:62px}
  .hero .shell{padding-top:30px;padding-bottom:50px}
  .ticket{padding:28px 18px 24px}
  .big .lbl{font-size:22px}
  .stepper output{font-size:28px}
  .tsel{max-width:58%}
  .sec{padding:56px 0}
  .need{grid-template-columns:1fr}
  .need div{border-left:0!important;border-top:2px dashed var(--ink)}
  .need div:first-child{border-top:0}
  .term summary{grid-template-columns:40px 1fr 24px;font-size:15px}
  .term .a{padding:0 0 20px 54px}
  .stub-in{grid-template-columns:1fr;box-shadow:5px 5px 0 var(--ink)}
  .stub-l{padding:30px 22px}
  .stub-r{border-left:0;border-top:3px dashed var(--ink)}
  .printer{padding:22px 10px 90px}
  .slot-top{margin:0 -6px}
  .receipt{padding:24px 16px 28px}
  .fields,.fields.g3{grid-template-columns:1fr}
  .ticks.t5{grid-template-columns:repeat(5,1fr);gap:6px}
  .ticks.t5 button{font-size:12.5px;padding:11px 2px}
  .ticks.t4{grid-template-columns:1fr 1fr}
  .p-act{flex-direction:column-reverse;align-items:stretch}
  .p-act .btn{width:100%}
  .sum .line b{max-width:56%}
  .ap-meta span{display:none}
  .r-count span:last-child{display:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* narrow-phone guards */
.hero .shell > *{min-width:0}
@media (max-width:380px){
  .hero h1{font-size:38px}
  .big .lbl{font-size:18px}
  .stepper output{font-size:24px}
  .stepper button{width:30px;height:30px}
}

/* =====================================================================
   LEADROUTER ADDITIONS
   What this template needs to work inside LeadRouter: the skip link, the
   shared legal pages, the approved consent block, the toast and the
   no-JavaScript note.
   ===================================================================== */
.skip-link{position:absolute;left:14px;top:-60px;z-index:400;background:var(--ink);color:var(--paper);
  padding:10px 16px;font-family:var(--poster);text-transform:uppercase;font-size:13px;text-decoration:none;transition:top .18s}
.skip-link:focus{top:0}

/* three-up next pay date — month / day / year */
.dob-group{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:10px}
.dob-group select{width:100%}
@media (max-width:420px){.dob-group{grid-template-columns:1fr 1fr 1fr;gap:6px}}

/* compliance-approved consent, directly above the submit button */
.lr-consent{background:#fff;border:2px solid var(--ink);border-radius:0;padding:18px;margin-top:20px;color:var(--ink-2);font-family:var(--mono)}
.lr-consent .c-tick{font-size:13.5px;font-weight:700;color:var(--ink);border-bottom:1px dotted var(--ink);padding-bottom:12px;margin-bottom:12px}
.lr-consent .c-tick input{accent-color:var(--ink)}
.lr-consent .c-tick input.bad{outline:2px solid var(--red-d);outline-offset:2px}
.lr-consent .c-tick .rq{color:var(--red-d)}
.lr-consent .c-lead{font-family:var(--poster);text-transform:uppercase;font-size:13px;letter-spacing:.03em;color:var(--ink);margin-bottom:10px}
.lr-consent .c-list li{font-size:12px;line-height:1.65;color:var(--ink-2)}
.lr-consent .c-list a{color:var(--ink);text-decoration:underline}
.lr-consent .c-note{font-size:11.5px;color:var(--muted)}
.lr-consent .c-err{color:var(--red-d);font-weight:700;font-size:12.5px}

/* toast */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);z-index:300;
  display:flex;gap:10px;align-items:center;max-width:min(92vw,440px);
  background:var(--ink);color:var(--paper);padding:13px 18px;font-size:13.5px;
  border:2px solid var(--ink);box-shadow:5px 5px 0 var(--red);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast svg{flex:none;color:var(--red)}

.noscript-note{max-width:680px;margin:0 auto 18px;padding:14px 18px;border:2px solid var(--ink);background:#fff3c4;font-size:13px;color:var(--ink)}

/* shared legal pages (about, faqs, privacy, terms, ad disclosure, e-consent) */
.container{max-width:1200px;margin:0 auto;padding:0 32px}
.page-hero{padding:48px 0 34px;border-bottom:2px solid var(--ink)}
.page-hero h1{font-size:clamp(32px,5vw,50px);margin:0}
.page-hero p{margin-top:8px;font-size:13px;text-transform:uppercase;color:var(--muted)}
.crumbs{font-size:12.5px;text-transform:uppercase;margin-bottom:10px;color:var(--muted)}
.crumbs a{text-decoration:underline}
.prose{max-width:780px;margin:0 auto;padding:40px 0 60px;line-height:1.8;color:var(--ink-2);font-size:14.5px}
.prose h2{font-size:21px;margin:34px 0 10px;padding-top:16px;border-top:2px dashed var(--ink)}
.prose h3{font-size:17px;margin:24px 0 8px}
.prose p{margin:0 0 16px}
.prose ul{margin:0 0 16px;padding-left:24px}
.prose li{margin-bottom:6px}
.prose a{text-decoration:underline}
/* the shared FAQ page uses .faqs/.faq, not the landing page's .terms-list */
.faqs{max-width:820px;margin:0 auto;border-top:2px solid var(--ink)}
.faq{border-bottom:1px dashed var(--ink)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-weight:700;font-size:15.5px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-family:var(--poster);font-size:22px;color:var(--red-d);transition:transform .2s var(--ease)}
.faq[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .a{padding:0 40px 20px 0;color:var(--ink-2);font-size:14.5px}

.bottom-cta{text-align:center;padding:52px 22px;background:var(--red);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink)}
.bottom-cta h2{margin:0 0 8px;font-size:clamp(28px,4vw,42px)}
.bottom-cta p{margin:0 0 20px;font-size:14px}
.bottom-cta .btn-primary{display:inline-flex;align-items:center;gap:10px;padding:15px 30px;background:var(--ink);color:var(--paper);border:2px solid var(--ink);
  font-family:var(--poster);text-transform:uppercase;letter-spacing:.05em;font-size:15px;text-decoration:none;box-shadow:4px 4px 0 var(--paper)}

/* public/404.php is written against the classic theme's names, so give it
   this palette's equivalents rather than letting it render unstyled */
:root{--ff-display:var(--poster);--pine:var(--ink);--pine-soft:var(--news-2);--mut:var(--muted)}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);
  font-family:var(--poster);font-size:15px;text-transform:uppercase;letter-spacing:.05em;padding:15px 26px;text-decoration:none;box-shadow:4px 4px 0 var(--red)}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:2px solid var(--ink);background:var(--paper);color:var(--ink);
  font-family:var(--poster);font-size:15px;text-transform:uppercase;letter-spacing:.05em;padding:15px 26px;text-decoration:none;box-shadow:4px 4px 0 var(--ink)}