/* v4 home base (redesign-v4 §8 tokens). Home loads only this bundle; other pages use tokens.css + styles.css. */
@font-face{font-family:"Inter";src:url(/assets/fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter Fallback";src:local("Arial");size-adjust:107%;ascent-override:90%;descent-override:22%;line-gap-override:0%}
:root{color-scheme:light;
  --line-strong:#7A889E;
  --navy:#0B1F3A;--navy-2:#132B4F;--navy-line:#24406B;--ink:#0B1F3A;--muted:#3E4D63;--line:#E2E8F0;--line-2:#CBD5E1;
  --ground:#F7F9FC;--card:#FFFFFF;--surface:#F1F5F9;
  --teal:#0F766E;--teal-strong:#0B5E58;--teal-soft:#E7F5F3;--teal-line:#A8D9D2;
  --ok:#0F766E;--ok-soft:#E7F5F3;--ok-ink:#0B4F4A;
  --late:#B42318;--late-soft:#FDECEA;--late-ink:#7A1610;
  --wait:#B45309;--wait-soft:#FEF4E6;--wait-ink:#7C3A06;
  --shadow:0 1px 2px rgba(11,31,58,.06),0 16px 40px -16px rgba(11,31,58,.22);
  --ease:cubic-bezier(.2,.7,.2,1);
  --font:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:400 16px/1.5 var(--font);color:var(--ink);background:var(--ground);-webkit-font-smoothing:antialiased}
a{color:var(--teal-strong)}
h1,h2,h3{text-wrap:balance}
.wrap{max-width:1152px;margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* v4 chrome: header (3-item nav) + navy footer. Shared by every page. */
.skip{position:absolute;left:8px;top:-60px;background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px;z-index:20;text-decoration:none}
.skip:focus{top:8px;left:8px}
.v4-top{position:relative;z-index:3;font-family:var(--font)}
body:not(.page-home) .v4-top{background:var(--ground);border-bottom:1px solid var(--line)}
.v4-top .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:1152px;margin:0 auto;padding:0 24px}
.v4-logo{white-space:nowrap;display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em;color:var(--ink);text-decoration:none;font-size:17px;min-height:44px}
.v4-logo b{display:block;flex:none;width:32px;height:32px}
.v4-logo b svg{display:block;width:100%;height:100%}
.v4-nav{display:flex;gap:4px;align-items:center}
.v4-nav a{color:var(--ink);text-decoration:none;font-weight:500;font-size:15px;padding:0 14px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
.v4-nav a:hover{background:rgba(11,31,58,.06)}
.v4-tag{font-size:12px;font-weight:600;color:var(--muted);border:1px solid #CBD5E1;border-radius:999px;padding:2px 10px;margin-left:8px}
.v4-foot{background:var(--navy);color:#C9D4E5;padding:56px 0 48px;font-size:14px;line-height:1.5;font-family:var(--font)}
.v4-foot .wrap{max-width:1152px;margin:0 auto;padding:0 24px}
.v4-foot a{color:#fff;text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:32px}
.v4-foot .fcols{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-bottom:32px}
.v4-foot .fh{color:#fff;font-size:14px;font-weight:700;margin:0 0 8px;letter-spacing:0;line-height:1.4}
.v4-foot .fcols ul+.fh{margin-top:20px}
.v4-foot ul{list-style:none;padding:0;margin:0}
.v4-foot li{margin:0 0 4px}
.v4-foot .footer-legal{border-top:1px solid var(--navy-line);padding-top:24px;margin:0;background:none;color:#C9D4E5;font-size:14px}
.v4-foot .footer-legal p{margin:0 0 8px;max-width:90ch;color:#C9D4E5}
@media (max-width:900px){.v4-foot .fcols{grid-template-columns:1fr;gap:16px}}
@media (max-width:600px){
  .v4-top .wrap{height:60px;padding:0 20px}
  .v4-logo{font-size:15px}.v4-logo b{width:28px;height:28px}
  .v4-nav a{padding:0 10px;font-size:14px}.v4-nav .hide-s,.v4-tag{display:none}
  .v4-foot .wrap{padding:0 20px}
}
/* interior pages: v4 bits on top of styles.css */
.learn-cards{list-style:none;padding:0;margin:24px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.learn-card{padding:20px}.learn-card a{font-size:17px}.learn-card p{margin:6px 0 0}
.src-list li{margin:0 0 12px}.src-list ul{margin:6px 0}
.faq-groups ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0}.faq-groups a{display:inline-flex;min-height:44px;align-items:center;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:var(--card);text-decoration:none}
.example details>summary{list-style:none;cursor:pointer}.example details>summary::-webkit-details-marker{display:none}.example details>summary h2{display:inline;margin:0}.example details>summary::after{content:" +";font-weight:600;color:var(--accent-strong)}.example details[open]>summary::after{content:" –"}
.results[data-state=ok] [data-empty-msg],.results[data-state=invalid] [data-empty-msg]{display:none}
.not-found h1{margin-top:0}
.pre-intro+.pre-intro{font-weight:600;color:var(--ink)}
.v4-foot .footer-legal .footer-entity{color:#fff!important;font-weight:500}

/* ===== Gate v4-r1 changes (25 Oct) ===== */
/* 12: JS-only controls hidden without JavaScript (the js class is set inline in <head>) */
html:not(.js) [data-js-only]{display:none!important}
/* 10: quiz shows question 1 only until app.js marks it ready, so nothing shifts on load */
.js [data-quiz]:not(.ready) .quiz-q~.quiz-q{display:none}
/* 7: solid focus ring on interior inputs too */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--teal,#0F766E);outline-offset:0}
/* 8: pricing — 1-up under 600, 2-up 600–1279, 5-up at 1280+ */
.price-cards.five{grid-template-columns:minmax(0,1fr)}
@media(min-width:600px){.price-cards.five{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:600px){.price-cards.five h2{min-height:56px}}
@media(min-width:1280px){.price-cards.five{grid-template-columns:repeat(5,minmax(0,1fr))}}
.price-cards.five h2{font-size:20px;line-height:28px;margin:0}
.price-cards.five .price .amt{font-size:34px;line-height:40px}
/* 9: interior type scale (H2 34/40, 26/32 on mobile) and round step numbers */
.content-page h2{font-size:34px;line-height:40px}
.content-page .result-card h2,.content-page .example h2,.content-page .sheet-head h2{font-size:1.5rem;line-height:1.25}
@media(max-width:600px){.content-page h2{font-size:26px;line-height:32px}}
.step-n{border-radius:50%}
.ea-plan-line{margin:0 0 16px}

/* gate v4-r1 follow-up: nothing wraps in the 5-up pricing row */
.price-cards.five .btn{white-space:nowrap;padding-inline:14px;font-size:15px}
.price-cards.five .plan-enterprise .price .amt{font-size:26px;line-height:32px}

/* gate v4-r2 N3: calculator-page and interior type */
.calc .prose h2,.calc .faq h2,.calc .sources h2,.calc .assumptions h2,.calc .related h2{font-size:34px;line-height:40px}
@media(max-width:600px){.calc .prose h2,.calc .faq h2,.calc .sources h2,.calc .assumptions h2,.calc .related h2{font-size:26px;line-height:32px}}
main h1{font-size:48px;line-height:56px}
@media(max-width:600px){main h1{font-size:36px;line-height:40px}}
.noscript{font-size:14px;font-weight:600;color:var(--ink);margin:12px 0}

/* 320px header (25 Oct): header fits without sideways scroll on the smallest phones */
@media(max-width:374px){.v4-top .wrap{padding:0 16px;gap:8px}.v4-logo{white-space:normal;line-height:1.15;font-size:14px;min-width:0;gap:8px}.v4-logo b{flex:none}.v4-nav a{padding:0 8px}}
/* v4 home: ported from design/redesign-v4/mock/home.html */
/* ===== Animated background: hero only, transform-only, CSS (~1.9KB raw) ===== */
.hero{position:relative;isolation:isolate;overflow:hidden}
.mesh{position:absolute;inset:0;z-index:-1;pointer-events:none;contain:strict;background:linear-gradient(180deg,#EEF3F9 0%,#F7F9FC 100%);-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent)}
.mesh i{position:absolute;display:block;border-radius:50%;will-change:transform}
.mesh .b1{width:900px;height:900px;left:-240px;top:-420px;background:radial-gradient(closest-side,rgba(15,118,110,.24),rgba(15,118,110,0));animation:d1 32s ease-in-out infinite alternate}
.mesh .b2{width:1000px;height:1000px;right:-360px;top:-260px;background:radial-gradient(closest-side,rgba(19,43,79,.09),rgba(19,43,79,0));animation:d2 38s ease-in-out infinite alternate}
.mesh .b3{width:760px;height:760px;left:34%;top:240px;background:radial-gradient(closest-side,rgba(94,234,212,.26),rgba(94,234,212,0));animation:d3 26s ease-in-out infinite alternate}
.mesh .grid{position:absolute;inset:-48px 0 0 0;border-radius:0;background-image:linear-gradient(rgba(11,31,58,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(11,31,58,.04) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent);mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000,transparent);animation:g 40s linear infinite}
@keyframes d1{to{transform:translate3d(180px,120px,0) scale(1.08)}}
@keyframes d2{to{transform:translate3d(-160px,140px,0) scale(.94)}}
@keyframes d3{to{transform:translate3d(-220px,-90px,0) scale(1.12)}}
@keyframes g{to{transform:translate3d(0,48px,0)}}
.hero.still .mesh *,.hero.off .mesh *{animation-play-state:paused}            /* paused while typing / off-screen */
@media (prefers-reduced-motion:reduce){.mesh *,.mesh i{animation:none!important}}

/* ===== Hero + checker ===== */
.hero-in{max-width:880px;margin:0 auto;text-align:center;padding:12px 0 64px}
h1{font-size:60px;line-height:1.04;letter-spacing:-.035em;font-weight:700;margin:0 0 16px}
.sub{font-size:19px;line-height:1.5;color:var(--muted);margin:0 auto 20px;max-width:40ch}
.src{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--teal-strong);background:rgba(255,255,255,.8);border:1px solid var(--teal-line);border-radius:999px;padding:2px 10px;margin-left:6px;text-decoration:none;vertical-align:2px;white-space:nowrap}
.checker{text-align:left;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:20px}
.fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:16px;align-items:end}
.f label{display:block;font-size:14px;font-weight:600;margin:0 0 6px}
.f label small{font-weight:500;color:var(--muted);font-size:13px}
.f input,.f select{width:100%;min-width:0;height:52px;border:1px solid var(--line-strong);border-radius:12px;padding:0 14px;font:500 16px var(--font);color:var(--ink);background:#fff;font-variant-numeric:tabular-nums}
.f input:focus{border-color:var(--teal)}
.f input:focus-visible{outline:3px solid var(--teal);outline-offset:0}
.money{position:relative}
.money::before{content:"$";position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:500}
.money input{padding-left:28px!important}
.btn{height:52px;border:0;border-radius:12px;background:var(--navy);color:#fff;font:600 16px var(--font);padding:0 24px;cursor:pointer;white-space:nowrap;box-shadow:0 6px 16px -6px rgba(11,31,58,.5);transition:background .15s}
.btn:hover{background:var(--navy-2)}
.under{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin-top:14px;font-size:14px}
.linkbtn{background:none;border:0;padding:0;font:600 14px var(--font);color:var(--teal-strong);cursor:pointer}
.opts{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:14px}
.opts label{display:flex;gap:8px;align-items:flex-start;margin:0 0 8px}
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;list-style:none;padding:0;margin:0;font-size:13.5px;color:var(--muted)}
.trust li{display:flex;align-items:center;gap:8px}
.trust li::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%230F766E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}

/* ===== Result card (appears after input) ===== */
.result{text-align:left;margin-top:16px;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);padding:16px 28px;position:relative;overflow:hidden;animation:rin .35s var(--ease) both}
@keyframes rin{from{opacity:0;transform:translateY(8px)}}
.result::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--st)}
.result[data-state=ok]{--st:var(--ok);--st-soft:var(--ok-soft);--st-ink:var(--ok-ink)}
.result[data-state=late]{--st:var(--late);--st-soft:var(--late-soft);--st-ink:var(--late-ink)}
.result[data-state=pending]{--st:var(--wait);--st-soft:var(--wait-soft);--st-ink:var(--wait-ink)}
.r-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start}
.r-grid.one{grid-template-columns:minmax(0,1fr)}
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--st-soft);color:var(--st-ink);font-weight:700;font-size:15px;line-height:1.3;border-radius:999px;padding:6px 14px 6px 8px;animation:fade .4s .1s var(--ease) both}
.chip svg{flex:none;width:20px;height:20px}
@keyframes fade{from{opacity:0}}
.lbl{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:14px 0 2px;display:flex;align-items:center;gap:6px}
.big{font-size:40px;line-height:1.08;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums;margin:0}
.tip{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--muted);color:var(--muted);font:700 11px/1 var(--font);background:none;cursor:help;padding:0;text-transform:none;letter-spacing:0}
.tip span{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);width:240px;background:var(--navy);color:#fff;font-weight:500;font-size:13px;line-height:1.45;text-align:left;border-radius:8px;padding:8px 10px;opacity:0;pointer-events:none;transition:opacity .15s}
.tip:hover span,.tip:focus span{opacity:1}
/* deadline bar */
.bar{margin:16px 0 4px}
.track{position:relative;height:8px;border-radius:99px;background:var(--surface)}
.fill{position:absolute;inset:0 auto 0 0;border-radius:99px;background:var(--st);width:var(--w,0%);transition:width .9s var(--ease)}
.pin{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;border:3px solid var(--st);left:var(--p,0%)}
.ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}
.tile{background:var(--surface);border-radius:14px;padding:18px}
.tile .lbl{margin-top:0}
.tile .big{font-size:34px}
.tile .estimate{font-size:12px;font-weight:600;background:#fff;border:1px solid var(--line-2);border-radius:999px;padding:1px 8px;text-transform:none;letter-spacing:0;color:var(--muted)}
.final{font-size:14px;color:var(--muted);margin:8px 0 0}
.amt-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin-top:10px}
.amt-row input{height:44px}
.amt-row .btn{height:44px;padding:0 16px;font-size:15px;box-shadow:none}
.r-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;border-top:1px solid var(--line);margin-top:16px;padding-top:14px}
.act{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.btn-t{box-sizing:border-box;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:12px;background:var(--teal);color:#fff;font-weight:600;font-size:15px;text-decoration:none}
.btn-t em{font-style:normal;font-size:11px;font-weight:700;background:rgba(255,255,255,.2);border-radius:99px;padding:1px 7px}
.discl{display:flex;gap:12px;flex-wrap:wrap}
details summary{cursor:pointer;list-style:none;font-weight:600;color:var(--teal-strong);display:inline-flex;align-items:center;gap:6px;font-size:14px}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-size:18px;line-height:1;font-weight:500}
details[open] summary::after{content:"–"}
.panel{font-size:14px;color:var(--muted);margin-top:12px;flex-basis:100%}
.panel ol,.panel ul{padding-left:20px;margin:8px 0}
.panel li{margin:4px 0}
.notice,.output-notice{font-size:12.5px;color:var(--muted);margin:10px 0 0}
.empty{display:none}

/* ===== Sections ===== */
section{padding:80px 0}
.h2{font-size:34px;line-height:40px;letter-spacing:-.02em;font-weight:700;margin:0 0 8px}
.lead{color:var(--muted);margin:0 0 36px;font-size:17px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px}
.steps li::before{content:counter(s);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--navy);color:#fff;font-weight:700;font-size:15px;margin-bottom:16px}
.steps h3{font-size:18px;margin:0 0 6px;letter-spacing:-.01em}
.steps p{margin:0;color:var(--muted);font-size:15px}
.band{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cmp{width:100%;border-collapse:separate;border-spacing:0;font-size:15px;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.cmp th,.cmp td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp tr:last-child td,.cmp tr:last-child th{border-bottom:0}
.cmp thead th{background:var(--surface);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.cmp thead th:last-child{color:var(--teal-strong)}
.cmp tbody th{font-weight:600;width:22%}
.cmp td{color:var(--muted)}
.cmp td:last-child{color:var(--ink);background:rgba(231,245,243,.45)}
.cmp a{font-size:13px;font-weight:600;white-space:nowrap}
.pstrip{display:flex;align-items:center;justify-content:space-between;gap:24px;background:var(--navy);color:#fff;border-radius:20px;padding:32px 40px}
.pstrip h2{font-size:22px;margin:0 0 8px;letter-spacing:-.01em;max-width:32ch}
.pstrip p{margin:0;color:#C9D4E5;font-size:15px}
.prices{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.prices span{font-size:14px;border:1px solid var(--navy-line);border-radius:999px;padding:4px 12px}
.btn-l{display:inline-flex;align-items:center;height:48px;padding:0 24px;border-radius:12px;background:#fff;color:var(--navy);font-weight:600;text-decoration:none;white-space:nowrap}
.faq{max-width:760px}
.faq details{border-bottom:1px solid var(--line);padding:20px 0;display:block}
.faq summary{color:var(--ink);font-size:17px;display:flex;justify-content:space-between}
.faq p{color:var(--muted);margin:12px 0 0}
@media (max-width:900px){
  .steps{grid-template-columns:1fr}
  .r-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .pstrip{flex-direction:column;align-items:flex-start;padding:28px 24px}
  .cmp thead{display:none}.cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp tbody th{width:auto;padding-bottom:4px;border:0}
  .cmp td{border:0;padding-top:4px;padding-bottom:4px}.cmp td::before{content:attr(data-h) ": ";font-weight:600;color:var(--ink)}
  .cmp tr{border-bottom:1px solid var(--line);padding:8px 0}
}
@media (max-width:600px){
  .wrap{padding:0 20px}
  .mesh .b1{width:520px;height:520px;left:-200px;top:-220px}
  .mesh .b2{width:560px;height:560px;right:-260px;top:120px}
  .mesh .b3{width:480px;height:480px;left:10%;top:420px}
  .hero-in{padding:4px 0 40px}
  h1{font-size:36px;margin-bottom:10px}
  .sub{font-size:16px;margin-bottom:16px}
  .src{margin-left:0}
  .checker{padding:16px;border-radius:16px}
  .fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  .fields .btn{grid-column:1/-1;height:50px}
  .f label{font-size:13px;margin-bottom:4px}
  .f input{height:48px;padding:0 10px}
  .under{margin-top:10px;font-size:13px}
  .under .trust{order:3;flex-basis:100%;justify-content:flex-start;font-size:12.5px}
  .under .trust li:nth-child(2){display:none}
  .f label{white-space:nowrap}
  .f label small{font-size:12px}
  .result{padding:16px 18px;margin-top:12px}
  .r-grid{gap:12px}
  .chip{font-size:14px}
  .bar{margin-top:10px}
  .lbl{margin-top:12px;font-size:12px}
  .big{font-size:32px}
  .tile{padding:14px}.tile .big{font-size:28px}
  .r-foot{margin-top:14px;padding-top:14px}
  .act{flex-basis:100%;min-width:0}
  .btn-t{font-size:14px;padding:0 12px;flex:1 1 100%;min-width:0;justify-content:center}
  section{padding:56px 0}
  .h2{font-size:26px;line-height:32px}
  .discl summary{font-size:13px}
}

/* v4 build additions */
.hero{margin-top:-72px;padding:72px 0 0}
.hero-in h1{font-size:60px;line-height:64px;letter-spacing:-.035em;font-weight:700;margin:0 0 12px}
.prices{list-style:none;padding:0}
.prices li{font-size:14px;border:1px solid var(--navy-line);border-radius:999px;padding:4px 12px}
.err{color:var(--late);font-weight:600;font-size:14px;margin:10px 0 0}
.linkbtn{min-height:44px;display:inline-flex;align-items:center;text-decoration:none}
.final.first{margin-top:0}
.bd-line{margin:0 0 6px}
.all-q{margin:24px 0 0}.all-q a{font-weight:600}
.faq p a{color:var(--teal-strong)}
.lsl-home{margin:10px 0 0;font-size:14px}
@media (max-width:600px){.hero{margin-top:-60px;padding:60px 0 0}.hero-in h1{font-size:36px;line-height:40px;margin-bottom:10px}}

/* ===== Gate v4-r1 changes (25 Oct) ===== */
/* 1: the remind CTA wraps instead of clipping at 360–430 */
@media(max-width:600px){.btn-t{flex-direction:column;height:auto;min-height:56px;padding:10px 16px;row-gap:4px;white-space:normal;text-align:center}}
/* 4: reduced motion means none */
@media(prefers-reduced-motion:reduce){.result,.chip{animation:none!important}.fill,.btn,.tip span{transition:none!important}}
/* 6: tooltip stays inside the card; 24px target; Esc closes it (home.js adds .tip-x) */
.tip{width:24px;height:24px}
.tip span{left:-8px;transform:none;width:min(240px,calc(100vw - 72px))}
.tip.tip-x span{opacity:0!important}
/* Harvey (25 Oct): hint when the due date has passed and no received date was entered */
.hint{font-size:14px;line-height:1.5;color:var(--ink);background:var(--surface);border-radius:10px;padding:10px 12px;margin:12px 0 0}
.noscript{font-size:14px;font-weight:600;color:var(--ink);margin:12px 0 0}

/* gate v4-r2 N1: page height */
@media(min-width:601px){main>section:not(#hero){padding-top:64px;padding-bottom:64px}}
@media(max-width:600px){main>section:not(#hero){padding-top:40px;padding-bottom:40px}}
.result>.hint{margin:12px 0 0;font-size:14px;line-height:20px}
@media(max-width:600px){.r-foot .discl{display:flex;flex-wrap:wrap;align-items:center;column-gap:16px}}
/* Theo gate 3c008de9 (7), also in dfbc6ae3: from 901px the result card sits in the ~434px checker column, so the two-column
   r-grid squeezed the charge tile ('Estimate only' pill ran over 'ESTIMATED CHARGE', the amount box shrank to ~35px) and the
   nowrap .btn-t pushed .act 7px out of the card (529 vs 522 at 1280). Size by the card, not the viewport: stack the grid and
   let the button wrap its badge whenever the card is narrow. Phones (<=600px) keep their own rules above. */
.result{container-type:inline-size}
.lbl{flex-wrap:wrap;row-gap:4px}
.tile .estimate{white-space:nowrap}
@media(min-width:601px){@container (max-width:560px){
  .r-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .act{min-width:0;max-width:100%}
  .btn-t{max-width:100%;flex-wrap:wrap;white-space:normal;height:auto;min-height:44px;padding:10px 16px;row-gap:4px}
}}
/* gate v4-r2 N3: home pricing heading */
.pstrip h2{line-height:32px}

/* ===== character-v1 hero date fields (Theo, 25 Oct): iOS date inputs overflowed the checker card; one column at <=640px (the iOS worst case overlaps at 601-640) ===== */
.fields>.f{min-width:0}                                  /* grid items default to min-width:auto, so let them shrink */
.f input[type=date]{
  display:block;width:100%;min-width:0;max-width:100%;box-sizing:border-box;
  -webkit-appearance:none;appearance:none;               /* drops iOS's intrinsic ~175px control width */
  min-height:48px;line-height:46px;text-align:left;
  background-color:#fff;color:var(--ink);font-size:16px          /* 16px+ stops iOS zooming on focus */
}
.f input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0;min-height:1.5em} /* iOS: keeps the field from collapsing when empty */
.f input[type=date]::-webkit-datetime-edit{padding:0}
/* iOS Safari shows a blank box when a date field is empty: add a calendar icon (iOS only; desktop browsers keep their own picker icon) */
@supports (-webkit-touch-callout:none){
  .f input[type=date]{
    padding-right:44px;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E4D63' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E") right 14px center/20px no-repeat
  }
}
@media (max-width:640px){
  .fields{grid-template-columns:minmax(0,1fr);gap:12px}  /* one column: each date field gets the full card width */
  .fields .btn{grid-column:auto}
  .f label{white-space:normal}
}
/* Blank-field hint held for Harvey; see the character-v1 design notes */
/* Theo (25 Oct): "Add another payday +" stays right-aligned when it wraps on the smallest phones */
@media(max-width:374px){.under #add-pd{margin-left:auto}}

/* Result breakdown + method panel (Theo, 25 Oct; _qa/aa2a88da/proposed-nojs-breakdown.css). Same markup with and without JS:
   real <h3> headings (visible only without JS, where the toggles are hidden) and one <div> per row, "Due by" as .due */
.panel .pan-h{display:block;margin:0 0 8px;font-size:15px;line-height:1.3;font-weight:700;color:var(--ink)}
html.js .panel .pan-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
#p-bd dl{margin:4px 0 0;border-top:1px solid var(--line);font-size:15px;line-height:1.4}
#p-bd dl>div{display:grid;grid-template-columns:auto 1fr;border-bottom:1px solid var(--line)}
#p-bd dt,#p-bd dd{margin:0;padding:10px 0}
#p-bd dt{color:var(--muted);font-weight:500}
#p-bd dd{padding-left:16px;color:var(--ink);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
#p-bd .due dt,#p-bd .due dd{color:var(--st-ink)}
#p-how{font-size:14px;line-height:1.5}
#p-how ol,#p-how ul{margin:8px 0 0;padding-left:20px}
#p-how li+li{margin-top:6px}
#p-how #r-steps{color:var(--ink);font-weight:500}
html:not(.js) .result .discl{display:none}
html:not(.js) #p-how{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
/* ===== Sam (character-v2, Theo's clay rig), the hero mascot. Decorative only: aria-hidden, no copy, CSS-only motion. =====
   Placement (25 Oct steering): wherever the hero is one column (below 900px), Sam sits IN the hero ABOVE the checker card,
   centred and compact; from 900px he is the large visual in the right column. His box is reserved with a set
   width + aspect-ratio, so nothing shifts when the SVG paints. */
.mascot-wrap{pointer-events:none;display:block;width:min(242px,70vw);aspect-ratio:var(--sam-ar,360 / 250);margin:4px auto 14px;position:relative}
.mascot-wrap svg{display:block;width:100%;height:100%}
/* Mobile is sized by height (Theo gate 6144dd76): a taller viewBox can't push the card down. Never bigger than 168px. */
@media(max-width:899px){.mascot-wrap{width:auto;height:168px;max-width:70vw}}
/* Short phones (360x740 and similar, Theo gate 7159d678): a smaller Sam keeps the whole card on the first screen. */
@media (max-width:899px) and (max-height:760px){.mascot-wrap{height:144px;margin-bottom:10px}}
.mascot-wrap .pose-relieved,.mascot-wrap .pose-worried{display:none}
.mascot-wrap.sam-ok .pose-work,.mascot-wrap.sam-late .pose-work{display:none}
.mascot-wrap.sam-ok .pose-relieved,.mascot-wrap.sam-late .pose-worried{display:block}
/* Desktop (Sudheera, 25 Oct): from 900px Sam is the big visual on the right, the headline, sub and checker on the left,
   both centred vertically. His column is sized as a share of the hero, and his height comes from the art's aspect-ratio
   (about 330px tall at 900, 435px at 1280 and 450px at 1440, capped at 520px). */
@media (min-width:900px){
  .hero-in{max-width:1152px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.45fr);column-gap:40px;text-align:left;align-items:center}
  .hero-in>*{grid-column:1}
  .hero-in>.mascot-wrap{grid-column:2;grid-row:1 / span 3;align-self:center;justify-self:center;width:100%;max-height:520px;margin:0}
  .hero-in .sub{margin-left:0}
  .hero-in .fields{grid-template-columns:minmax(0,1fr)}          /* the narrower left column: fields stack */
  .hero-in .fields .btn{grid-column:auto}
}
@media (min-width:1100px){
  .hero-in .fields{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero-in .fields .btn{grid-column:1 / -1}
}
/* Motion: one shared 10s cycle (lamp on 0-50%, off 50-100%) with one shared start offset, so every part stays in sync.
   Lamp off -> head scratch (55-70%). Lamp back on -> a 1s 'okay' hand (1-11%). Typing the rest of the time. Blink every 2s. */
.mascot-wrap svg *{transform-box:view-box}
.mascot-wrap .lamp-light,.mascot-wrap .bulb{animation:sam-lamp 10s steps(1,end) infinite}
.mascot-wrap .bulb-off{animation:sam-lamp-off 10s steps(1,end) infinite}
.mascot-wrap .arm-scratch{animation:sam-scratch 10s steps(1,end) infinite}
.mascot-wrap .scratch-hand{animation:sam-wiggle 10s linear infinite}
.mascot-wrap .pose-work .head{transform-origin:160px 118px;animation:sam-tilt 10s ease-in-out infinite}
.mascot-wrap .arm-ok{animation:sam-ok 10s steps(1,end) infinite}
.mascot-wrap .ok-hand{transform-origin:216px 116px;animation:sam-ok-pop 10s ease-out infinite}
.mascot-wrap .pose-work .arm-r{animation:sam-arm-r 10s steps(1,end) infinite}
.mascot-wrap .pose-work .hand-l,.mascot-wrap .pose-work .hand-r{animation:sam-type .4s ease-in-out infinite alternate}
.mascot-wrap .pose-work .hand-r{animation-delay:-.2s}
.mascot-wrap .eyes{transform-origin:160px 88px;animation:sam-blink 2s linear infinite}
.mascot-wrap .lamp-light,.mascot-wrap .bulb,.mascot-wrap .bulb-off,.mascot-wrap .arm-scratch,.mascot-wrap .scratch-hand,.mascot-wrap .pose-work .head,.mascot-wrap .arm-ok,.mascot-wrap .ok-hand,.mascot-wrap .pose-work .arm-r{animation-delay:-1.5s}
/* On-time result: a small seated celebration, the thumbs-up pops in once and the grin stays. No raised fist. */
.mascot-wrap .thumbs-up{transform-origin:178px 146px;animation:sam-thumb .7s cubic-bezier(.3,1.5,.5,1) both}
.mascot-wrap .thumbs-up{transform-origin:222px 144px}   /* v2 rig: the thumb sits at the right hand */
.mascot-wrap .pose-relieved .lamp-light,.mascot-wrap .pose-relieved .bulb,.mascot-wrap .pose-relieved .bulb-off,
.mascot-wrap .pose-worried .lamp-light,.mascot-wrap .pose-worried .bulb,.mascot-wrap .pose-worried .bulb-off{animation:none}
@keyframes sam-lamp{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
@keyframes sam-lamp-off{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
@keyframes sam-scratch{0%{opacity:0}55%{opacity:1}70%{opacity:0}100%{opacity:0}}
@keyframes sam-arm-r{0%{opacity:1}1%{opacity:0}11%{opacity:1}55%{opacity:0}70%{opacity:1}100%{opacity:1}}
@keyframes sam-ok{0%{opacity:0}1%{opacity:1}11%{opacity:0}100%{opacity:0}}
@keyframes sam-ok-pop{0%,1%{transform:scale(.85)}3%{transform:scale(1.05)}5%,100%{transform:none}}
@keyframes sam-tilt{0%,55%{transform:none}58%,67%{transform:rotate(-4deg)}70%,100%{transform:none}}
@keyframes sam-wiggle{0%,57%{transform:none}59%{transform:rotate(-12deg)}61%{transform:rotate(8deg)}63%{transform:rotate(-12deg)}65%{transform:rotate(8deg)}67%,100%{transform:none}}
@keyframes sam-type{from{transform:translateY(0)}to{transform:translateY(-3px)}}
@keyframes sam-blink{0%,90%,100%{transform:none}94%{transform:scaleY(.1)}}
@keyframes sam-thumb{from{transform:translateY(8px) scale(.85)}to{transform:none}}
/* Nothing moves while someone types (.still) or when the hero is off-screen (.off). */
.hero.still .mascot-wrap *,.hero.off .mascot-wrap *{animation-play-state:paused!important}
/* Reduced motion: completely static, lamp on, typing pose (the SVG's own attributes: lamp on, scratch and okay arms hidden). */
@media (prefers-reduced-motion:reduce){.mascot-wrap *{animation:none!important}}
/* 900-1099px: the left column is narrow, so the headline steps down a size to keep the checker high on the screen. */
@media (min-width:900px) and (max-width:1099px){.hero-in h1{font-size:44px;line-height:48px}}   /* keeps 'More options' above the fold at 1000x720 */
/* Trust lines close the card, left-aligned under the two text links (Theo gate). */
.checker .trust{justify-content:flex-start;flex-basis:100%}
/* From 900 the 'Source: ATO' pill has no indent when it wraps (Theo gate 7159d678); from 1100 it sits on its own line under the sub. */
@media (min-width:900px){.hero-in .sub .src{margin-left:0}}
@media (min-width:1100px){.hero-in .sub .src{display:flex;width:fit-content;margin:8px 0 0}}
/* ===== Clay Sam (samStyle "clay", design/clay/README.md). Shipped only in the clay build. =====
   Pose stills are <picture> layers that choose the file; with JS the pixels are painted to <canvas> layers (a canvas is
   never an LCP candidate, so the headline/checker stay LCP). The box is the same reserved .mascot-wrap (no CLS).
   Z-order = DOM order: idle < idle-off < scratch < ok < blink < video < grin < worried. A lower layer switches off only
   after the layer above has faded in, so transparent cutouts never show two poses at once for more than ~100ms. */
.mascot-wrap[data-sam=clay]{isolation:isolate}
.mascot-wrap[data-sam=clay] .sl{position:absolute;inset:0;width:100%;height:100%;display:block}
.mascot-wrap[data-sam=clay] picture.sl img{display:block;width:100%;height:100%;object-fit:contain}
.js .mascot-wrap[data-sam=clay] picture.sl{opacity:0}
html:not(.js) .mascot-wrap[data-sam=clay] picture.sl:not(.p-idle),html:not(.js) .mascot-wrap[data-sam=clay] canvas,html:not(.js) .mascot-wrap[data-sam=clay] .c-gate{display:none}
.mascot-wrap[data-sam=clay] canvas.sl{opacity:0}
.mascot-wrap[data-sam=clay] canvas.c-idle.ready{opacity:1;transition:opacity .3s}
.mascot-wrap[data-sam=clay].clay-video canvas.c-video.ready{opacity:1}
/* The 10s loop (same shared -1.5s offset as the SVG Sam): lamp on 0-5s (idle), off 5-10s (idle-off), scratch 5.5-7s,
   okay hand 0.1-1.1s; blink every 2s (~160ms), hidden while the okay hand or the scratch shows. Lamp off/on is a 200ms
   ease-in-out opacity crossfade (same pose, lighting only); the okay hand (and the "yes" beat, same .c-ok layer) fades
   in/out over 120ms (Theo gate 3c008de9: shorter ghost arm). Scratch <-> idle-off is a HARD CUT at 5.6s and 7.0s (step-end
   keyframes, both layers flip on the same frame): the scratch head isn't registered to idle-off, so any crossfade showed
   two heads. The incoming layer fades in OVER the outgoing one, which switches off only once it is covered. Runs only once
   every layer is painted. */
.mascot-wrap[data-sam=clay].clay-anim .c-idle{animation:clay-idle 10s ease-in-out -1.5s infinite}
.mascot-wrap[data-sam=clay].clay-anim .c-idle-off{animation:clay-off 10s ease-in-out -1.5s infinite}
.mascot-wrap[data-sam=clay].clay-anim .c-scratch{animation:clay-scratch 10s ease-in-out -1.5s infinite}
.mascot-wrap[data-sam=clay].clay-anim .c-ok{animation:clay-ok 10s ease-in-out -1.5s infinite}
.mascot-wrap[data-sam=clay].clay-anim .c-gate{animation:clay-gate 10s linear -1.5s infinite}
.mascot-wrap[data-sam=clay].clay-anim .c-blink{animation:clay-blink 2s ease-in-out infinite}
/* Alternate beat (samClay.beat "yes"): seated thumbs-up + a 600ms nod on the whole stack, the only transform (Theo §3). */
.mascot-wrap[data-sam=clay][data-beat=yes].clay-anim{animation:clay-nod 10s ease-in-out -1.5s infinite}
/* While the loop video plays it covers the stills; the stills stop. */
.mascot-wrap[data-sam=clay].clay-video .sl:not(.c-video){animation:none!important;opacity:0}
@keyframes clay-idle{0%,2.2%{opacity:1}2.21%,9.99%{opacity:0}10%,51%{opacity:1}51.01%,97.99%{opacity:0}98%,100%{opacity:1}}
@keyframes clay-off{0%,49%{opacity:0}51%{opacity:1;animation-timing-function:step-end}56%{opacity:0;animation-timing-function:step-end}70%,98%{opacity:1}100%{opacity:0}}
@keyframes clay-scratch{0%{opacity:0;animation-timing-function:step-end}56%{opacity:1;animation-timing-function:step-end}70%,100%{opacity:0}}
@keyframes clay-ok{0%,1%{opacity:0}2.2%,10%{opacity:1}11.2%,100%{opacity:0}}
@keyframes clay-gate{0%,0.99%{opacity:1}1%,11.2%{opacity:0}11.21%,54.99%{opacity:1}55%,71%{opacity:0}71.01%,100%{opacity:1}}
@keyframes clay-blink{0%,88%{opacity:0}90%,96%{opacity:1}98%,100%{opacity:0}}
@keyframes clay-nod{0%,1%{transform:none}2.5%{transform:translateY(3px)}4%{transform:none}5.5%{transform:translateY(2px)}7%,100%{transform:none}}
/* Results: on time -> grin + thumbs-up (data-ok), late -> data-late pose; pops in once, everything else stops and hides. */
.mascot-wrap[data-sam=clay].sam-ok .sl,.mascot-wrap[data-sam=clay].sam-late .sl,.mascot-wrap[data-sam=clay].sam-ok canvas.sl.ready,.mascot-wrap[data-sam=clay].sam-late canvas.sl.ready{animation:none!important;opacity:0}
.mascot-wrap[data-sam=clay].sam-ok[data-ok=grin] canvas.c-grin.ready,.mascot-wrap[data-sam=clay].sam-ok[data-ok=worried] canvas.c-worried.ready,
.mascot-wrap[data-sam=clay].sam-late[data-late=worried] canvas.c-worried.ready,.mascot-wrap[data-sam=clay].sam-late[data-late=grin] canvas.c-grin.ready,
.mascot-wrap[data-sam=clay].sam-ok[data-ok=idle] canvas.c-idle.ready,.mascot-wrap[data-sam=clay].sam-late[data-late=idle] canvas.c-idle.ready{opacity:1}
@media (prefers-reduced-motion:no-preference){.mascot-wrap[data-sam=clay].sam-ok canvas.c-grin.ready:not(.x){transform-origin:50% 80%;animation:clay-pop .25s ease-out both!important}}
.mascot-wrap[data-sam=clay].sam-ok canvas.c-video,.mascot-wrap[data-sam=clay].sam-late canvas.c-video{opacity:0!important}
/* Late: worried fades in over 250ms (no pop). */
@media (prefers-reduced-motion:no-preference){.mascot-wrap[data-sam=clay].sam-late canvas.c-worried.ready:not(.x){animation:clay-fade .25s ease-in-out both!important}}
@keyframes clay-fade{from{opacity:0}to{opacity:1}}
/* Result pose not painted yet: keep showing idle meanwhile. */
.mascot-wrap[data-sam=clay].sam-ok:not(.has-ok) canvas.c-idle.ready,.mascot-wrap[data-sam=clay].sam-late:not(.has-late) canvas.c-idle.ready{opacity:1}
@keyframes clay-pop{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
/* .hero.still/.off pause and reduced motion (animation:none) come from sam.css, which covers every .mascot-wrap descendant. */
.hero.still .mascot-wrap[data-sam=clay],.hero.off .mascot-wrap[data-sam=clay]{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.mascot-wrap[data-sam=clay]{animation:none!important}}