/* Front page. Builds on style.css tokens. Layout: utility bar, sticky header, hero with sign-in card, alternating bands. */
body.landing { background: var(--surface); }
.landing .wrap { max-width: 1160px; }
.landing a { text-decoration: none; }
.landing p { margin: 0; }

.utility { background: var(--fg); color: var(--bg); font-size: 13px; }
.utility a { color: var(--bg); }
.utility-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; padding-block: 7px; }
.utility-links { display: flex; gap: 18px; font-weight: 600; }
.utility-links a:hover, .utility a:hover { text-decoration: underline; }

.lhead { position: sticky; top: 0; z-index: 10; background: var(--surface); border-bottom: 1px solid var(--line); }
.lhead-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; padding-block: 14px; }
.lhead .brand { font-size: 20px; }
.lnav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; font-weight: 600; font-size: 14.5px; }
.lnav a:not(.btn) { color: var(--fg); }
.lnav a:not(.btn):hover { color: var(--accent); }
@media (max-width: 640px) { .lnav a:not(.btn) { display: none; } }

.hero { background: var(--bg); border-bottom: 1px solid var(--line); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; background-position: -1px -1px; }
.hero-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 400px); gap: 40px; align-items: center; padding-block: 64px; }
@media (max-width: 900px) { .hero-in { grid-template-columns: minmax(0, 1fr); padding-block: 40px; gap: 28px; } }
.hero-copy { display: grid; gap: 18px; min-width: 0; }
.hero h1 { font-size: clamp(34px, 5vw, 56px); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; }
.hero-lead { font-size: 17.5px; color: var(--muted); max-width: 54ch; line-height: 1.6; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.btn.big { padding: 12px 20px; font-size: 15px; }
.btn.block { display: block; width: 100%; text-align: center; padding: 11px 16px; }
.hero-points { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--fg); }
.hero-points li { display: grid; gap: 2px; padding: 12px 14px 0 0; font-size: 13.5px; }
.hero-points li + li { padding-left: 14px; border-left: 1px solid var(--line); }
.hero-points span { color: var(--muted); }
@media (max-width: 560px) { .hero-points { grid-template-columns: minmax(0, 1fr); } .hero-points li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 10px; } }

.login-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px 22px; display: grid; gap: 14px; box-shadow: 0 18px 40px -24px rgba(16, 40, 48, .45); position: relative; scroll-margin-top: 90px; }
.login-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--accent); border-radius: var(--radius) var(--radius) 0 0; }
.login-card h2 { font-size: 24px; font-weight: 800; }
.login-tab { margin-bottom: -6px; }
.login-links { font-size: 13.5px; }
.login-links a { color: var(--accent); font-weight: 600; }
.login-new { display: grid; gap: 8px; border-top: 1px dashed var(--line); padding-top: 14px; font-size: 13.5px; color: var(--muted); }
.login-new b { color: var(--fg); }

.band { padding-block: 64px; }
.band.alt { background: var(--bg); border-block: 1px solid var(--line); }
@media (max-width: 700px) { .band { padding-block: 44px; } }
.sec-head { display: grid; gap: 6px; margin-bottom: 26px; }
.sec-head h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; letter-spacing: -0.02em; }

.cards4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 960px) { .cards4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .cards4 { grid-template-columns: minmax(0, 1fr); } }
.scard { border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; display: grid; gap: 8px; align-content: start; background: var(--surface); }
.scard svg { width: 40px; height: 40px; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; margin-bottom: 4px; }
.scard h3 { font-size: 17px; }
.scard p { color: var(--muted); font-size: 14.5px; }

.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
.steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 0; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.steps li:last-child { border-bottom: 1px solid var(--line); }
.steps li::before { content: counter(s, decimal-leading-zero); grid-row: 1 / 3; font-family: var(--mono); font-size: 15px; color: var(--accent); padding-top: 2px; }
.steps b { font-size: 16px; }
.steps span { color: var(--muted); font-size: 14.5px; }

.emergency { background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--emergency); border-radius: var(--radius); padding: 24px; display: grid; gap: 10px; }
.emergency h3 { font-size: 20px; }
.emergency p { color: var(--muted); }
.emergency p b { color: var(--emergency); }
.emergency-phone { font-size: 28px; color: var(--emergency); font-weight: 500; }
.emergency .small { font-size: 13.5px; }

.owner-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--fg); }
.owner-grid > div { padding: 18px 22px 0 0; display: grid; gap: 6px; align-content: start; }
.owner-grid > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.owner-grid h3 { font-size: 17px; }
.owner-grid p { color: var(--muted); font-size: 14.5px; }
@media (max-width: 760px) { .owner-grid { grid-template-columns: minmax(0, 1fr); } .owner-grid > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 16px; } .owner-grid > div { padding-bottom: 16px; } }
.owner-cta { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 22px 24px; background: var(--accent-soft); border-radius: var(--radius); }
.owner-cta p { font-weight: 600; font-size: 16px; flex: 1 1 260px; }

.lfoot { background: var(--fg); color: var(--bg); padding-block: 44px 24px; }
.lfoot a { color: var(--bg); }
.lfoot a:hover { text-decoration: underline; }
.lfoot .brand { color: var(--bg); }
.lfoot .brand .mark { border-color: var(--bg); }
.lfoot .brand .mark::after { background: var(--bg); }
.lfoot .label { color: var(--bg); opacity: .7; display: block; margin-bottom: 8px; }
.lfoot .muted { color: var(--bg); opacity: .7; margin-top: 8px; }
.lfoot-in { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 28px; }
.lfoot-in p + p { margin-top: 4px; }
@media (max-width: 700px) { .lfoot-in { grid-template-columns: minmax(0, 1fr); } }
.fine { margin-top: 34px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.18); font-size: 12.5px; opacity: .7; }
@media (prefers-color-scheme: dark) { .fine { border-top-color: rgba(0,0,0,.2); } }

/* ---------- Accessibility helpers ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.landing :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.landing address { font-style: normal; }
.landing .lfoot h2.label { font-size: 11.5px; margin: 0 0 8px; }
.fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; }
.fine-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.fine-links a { text-decoration: underline; text-underline-offset: 3px; }
.lfoot-in address { opacity: .8; margin: 6px 0; }

/* ---------- Contact ---------- */
.lead-p { font-size: 16px; color: var(--muted); max-width: 52ch; }
.contact-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 18px; margin: 22px 0 0; font-size: 15px; }
.contact-dl dt { font-weight: 600; }
.contact-dl dd { margin: 0; }
.contact-dl a, .small-note a, .notice a, .prose a, .login-links a { text-decoration: underline; text-underline-offset: 3px; }
.small-note { margin-top: 16px; font-size: 14px; }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 14px; scroll-margin-top: 90px; }
.contact-card .banner ul { margin: 6px 0 0; padding-left: 18px; }
.contact-card .banner a { color: var(--fg); text-decoration: underline; }
.req-note { font-size: 13px; color: var(--muted); }
.req { color: var(--emergency); }
.ferr { color: var(--emergency); font-size: 13px; font-weight: 600; }
[aria-invalid="true"] { border-color: var(--emergency) !important; box-shadow: inset 0 0 0 1px var(--emergency); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.notice { font-size: 13px; color: var(--muted); }
.contact-card .btn { justify-self: start; min-height: 44px; }
.login-card .btn, .lnav .btn, .hero-ctas .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Policy pages ---------- */
.doc { background: var(--surface); }
.doc-in { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; padding-block: 48px 72px; align-items: start; }
.doc-in.single { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 860px) { .doc-in { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-block: 32px 56px; } }
.toc { position: sticky; top: 90px; border-left: 2px solid var(--line); padding-left: 16px; }
@media (max-width: 860px) { .toc { position: static; } }
.toc h2 { margin: 0 0 10px; }
.toc ol { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; }
.toc a { color: var(--fg); }
.prose { max-width: 72ch; display: grid; gap: 14px; min-width: 0; }
.prose h1 { font-size: clamp(30px, 4vw, 42px); font-weight: 800; letter-spacing: -0.02em; }
.prose h2 { font-size: 21px; margin-top: 18px; scroll-margin-top: 90px; }
.prose p, .prose li { font-size: 16px; line-height: 1.65; }
.prose ul { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.prose .meta { color: var(--muted); font-size: 14px; }
.callout { background: var(--accent-soft); border-radius: var(--radius); padding: 14px 16px; }
.prose .table-wrap { margin: 4px 0; }
.prose .tbl th[scope="row"] { font-weight: 600; text-align: left; white-space: normal; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--fg); }
.prose .tbl td { font-size: 14px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-ink) !important; padding: 10px 16px; border-radius: var(--radius); font-weight: 600; }
.skip:focus { top: 12px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* fine print at the very bottom */
.fine { flex-direction: column; align-items: stretch; }
.legal { display: grid; gap: 6px; max-width: 90ch; font-size: 12.5px; line-height: 1.55; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }