/* home flow (Concept C tokens) */
.fl-hero{padding:var(--s-5) 0 var(--s-7)}
.fl-hero h1{max-width:16ch}
.fl-card{background:var(--c-card);border:1px solid var(--c-line);border-radius:28px;box-shadow:var(--sh-2);padding:26px}
.fl-card ol{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:q}
.fl-card li{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;counter-increment:q}
.fl-card li:before{content:counter(q);width:34px;height:34px;border-radius:50%;background:var(--c-green-tint);color:var(--c-green);font-weight:700;display:grid;place-items:center;margin-top:24px}
.fl-card label{display:block;font-weight:600;margin-bottom:6px}
.fl-card select,.fl-card .money{width:100%}
.fl-go{display:flex;width:100%;justify-content:center;margin-top:20px;min-height:52px;font-size:17px}
.fl-fine{font-size:13.5px;color:var(--c-ink-2);margin:12px 0 0;text-align:center}
.fl-costs{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:22px}
.fl-cost{background:var(--c-card);border:1px solid var(--c-line);border-radius:16px;padding:12px;font-size:14px;text-decoration:none;color:var(--c-ink)}
.fl-cost b{display:block;font-family:Fraunces,serif;font-size:16px}
.fl-cost.ev{background:var(--c-peach);border-color:var(--c-coral)}
.fl-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--c-sun-tint);color:var(--c-sun-ink);border-radius:999px;padding:2px 8px}
.fl-handoff{margin-top:18px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:var(--c-green);color:#fff;border-radius:20px;padding:18px 22px}
.fl-handoff p{margin:0;color:var(--c-on-dark-2)}.fl-handoff b{color:#fff}
.fl-handoff .btn{background:#fff;color:var(--c-green)}
.fl-band{background:var(--c-green);color:#fff;padding:28px 0}
.fl-band .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
.fl-band h2{color:#fff;margin:6px 0 8px}.fl-band p{color:var(--c-on-dark-2);margin:0}
.fl-band form{display:grid;grid-template-columns:1fr auto;gap:10px;background:rgba(255,255,255,.08);padding:14px;border-radius:18px}
.fl-band label{grid-column:1/-1;font-weight:600;color:#fff}
.fl-band .field{background:#fff}
.fl-band .btn{background:var(--c-sun);color:var(--c-ink);min-height:48px}
.fl-band ul{list-style:none;padding:0;margin:12px 0 0;display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--c-on-dark-2)}
.fl-band .eyebrow{color:var(--c-sun-tint)}
.fl-sticky{display:none}
.fl-next{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fl-next a{background:var(--c-card);border:1px solid var(--c-line);border-radius:20px;padding:18px;text-decoration:none;color:var(--c-ink)}
.fl-next b{display:block;font-family:Fraunces,serif;font-size:19px;margin-bottom:4px}
@media(max-width:1060px){.fl-costs{grid-template-columns:repeat(4,1fr)}.fl-band .wrap{grid-template-columns:1fr}}
@media(max-width:640px){
 .site-nav a.fl-navcalc{display:inline-flex!important;font-weight:700;color:var(--c-green)}
 .fl-hero{padding:var(--s-2) 0 var(--s-6)}.fl-card{padding:18px;border-radius:22px}
 .fl-costs{grid-template-columns:repeat(2,1fr)}.fl-next{grid-template-columns:1fr}
 .fl-band form{grid-template-columns:1fr}
 .fl-sticky{display:flex;position:fixed;left:10px;right:10px;bottom:10px;z-index:50;justify-content:space-between;align-items:center;gap:10px;background:var(--c-green);color:#fff;border-radius:16px;padding:10px 12px 10px 16px;box-shadow:var(--sh-2);text-decoration:none;font-weight:600;font-size:15px}
 .fl-sticky span:last-child{background:var(--c-sun);color:var(--c-ink);border-radius:10px;padding:8px 12px;font-weight:700}
 body{padding-bottom:72px}
}
.fl-band .btn{color:var(--c-ink)!important}.fl-band .money{width:100%}
.fl-handoff .btn{background:var(--c-sun)!important;color:var(--c-ink)!important}
/* phones: one-line header links and sticky bar (QA P2-1). "Free alerts" shows at 390px and up; from 390 to 480 the
   header uses the compact logo, 14px links and the short "Calculator" label so all three fit. Below 390 "Free alerts" hides;
   the footer "Free rule-change alerts" link and the in-page #news form stay reachable. */
@media(max-width:640px){.site-nav a.fl-navcalc,.site-nav a.btn{white-space:nowrap;min-height:44px;align-items:center}.fl-sticky span:last-child{white-space:nowrap}}
@media(max-width:389.98px){.site-nav a.btn{display:none}}
@media(max-width:360px){.site-nav a.fl-navcalc{font-size:14px}.fl-sticky{font-size:14px;padding:8px 8px 8px 12px;gap:8px}.fl-sticky span:last-child{padding:8px 10px}}
/* brand §7.5b: 320px header. Short "Calculator" label and a smaller logo at ≤360px so the logo and the nav never touch. */
.site-header .wrap{gap:12px}.fl-navcalc{white-space:nowrap}.fl-navcalc .nl-short{display:none}
@media(max-width:360px){.logo{font-size:18px;gap:8px}.logo .ico{width:26px;height:26px}.fl-navcalc .nl-long{display:none}.fl-navcalc .nl-short{display:inline}}
@media(min-width:390px) and (max-width:480px){.logo{font-size:18px;gap:8px}.logo .ico{width:26px;height:26px}.fl-navcalc .nl-long{display:none}.fl-navcalc .nl-short{display:inline}.site-nav{gap:8px}.site-nav a.fl-navcalc,.site-nav a.btn{font-size:14px}.site-nav a.btn{padding:0 16px}}