/* Consumer Story — shared stylesheet (v3.1, 2026-09-20, critique items 1/2/6/8/9/11/12 folded in; v3.2 typographic hero + contact line). Legibility floor: body 20px, line-height 1.6, near-black on white. */
:root{--ink:#0b1220;--navy:#012c42;--green:#07b890;--mint:#e6f8f2;--link:#0f766e;--muted:#475569;--rule:#cbd5e1;--amber:#f5b942}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:20px;line-height:1.6;color:var(--ink);background:#fff;margin:0}
.topbar{height:6px;background:linear-gradient(90deg,var(--navy) 0 60%,var(--green) 60% 100%)}
.wrap{max-width:960px;margin:0 auto;padding:24px 16px 48px}
.narrow{max-width:720px}
header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;margin:0 0 28px;padding:0 0 18px;border-bottom:1px solid var(--rule)}
.logo{display:block}
.logo img{display:block;width:100%;max-width:300px;height:auto}
nav{font-size:18px;display:flex;flex-wrap:wrap;gap:8px 22px}
nav a{color:var(--navy);text-decoration:none;white-space:nowrap;font-weight:600;padding:6px 0;border-bottom:3px solid transparent}
nav a:hover,nav a:focus{border-bottom-color:var(--green)}
nav a[aria-current="page"]{border-bottom-color:var(--navy)}
.eyebrow{font-size:18px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--link);margin:36px 0 0}
.eyebrow + h2{margin-top:2px}
.updated,.note{font-size:18px;color:var(--muted)}
h1{font-size:34px;line-height:1.2;margin:0 0 14px;color:var(--navy);letter-spacing:-0.01em}
h2{font-size:24px;line-height:1.3;margin:36px 0 12px;color:var(--navy)}
h3{font-size:21px;line-height:1.35;margin:0 0 6px;color:var(--navy)}
p{margin:0 0 18px}
.lead{font-size:22px;line-height:1.5;color:#1e293b}
.muted{color:var(--muted)}
ol,ul{padding-left:26px;margin:0 0 18px}
li{margin:0 0 12px}
strong{font-weight:700}
a{color:var(--link)}
/* homepage hero — typographic (Marc 2026-09-20: option C, no illustration until a story supplies a real photo) */
.hero{margin:8px 0 40px;padding:36px 36px 34px;background:var(--navy);color:#fff;border-radius:16px;border-left:10px solid var(--green)}
.hero h1{font-size:44px;line-height:1.12;margin:0 0 16px;color:#fff;max-width:18ch}
.hero .lead{margin:0 0 24px;color:#e6f8f2;max-width:52ch}
.hero .ctas{margin:0}
.cta{display:inline-block;font-size:18px;font-weight:700;color:var(--navy);background:#fff;padding:12px 20px;border-radius:8px;text-decoration:none}
.cta:hover,.cta:focus{background:var(--mint)}
.cta.secondary{color:#fff;background:transparent;border:2px solid #fff;margin-left:12px}
.cta.secondary:hover,.cta.secondary:focus{background:rgba(255,255,255,.12)}
/* how it works */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 40px;padding:0;list-style:none}
.steps li{margin:0;padding:20px 22px;border:1px solid var(--rule);border-radius:12px;background:#fff}
.steps .n{display:inline-block;width:36px;height:36px;line-height:36px;text-align:center;border-radius:50%;background:var(--green);color:var(--navy);font-weight:800;font-size:18px;margin:0 0 10px}
.steps p{margin:0;font-size:19px;line-height:1.5;color:#1e293b}
/* stories list + empty state */
.stories{list-style:none;padding:0;margin:0 0 18px}
.stories li{padding:18px 0;border-top:1px solid var(--rule)}
.stories li:last-child{border-bottom:1px solid var(--rule)}
.stories .t{font-size:22px;font-weight:700;line-height:1.3}
.stories .m{color:var(--muted);font-size:18px;margin-top:4px}
.empty{padding:22px 24px;border-left:5px solid var(--green);border-radius:0 12px 12px 0;color:#1e293b;background:#f8fafc}
.badge{display:inline-block;font-size:16px;font-weight:600;line-height:1;padding:6px 12px;border-radius:999px;vertical-align:middle}
.badge.open{background:#fff7ed;color:#9a3412}
.badge.replied{background:#eff6ff;color:#1d4ed8}
.badge.resolved{background:var(--green);color:var(--navy)}
/* definition lists (template + story pages) */
dl{margin:0 0 18px}
dl dt{font-weight:700;margin-top:20px;color:var(--navy)}
dl dd{margin:4px 0 0 0;color:#334155}
dl dt.headline{color:var(--link)}
dl dt.headline::after{content:" — the headline";font-weight:400;color:var(--muted);font-size:18px}
dl dt.headline + dd{color:var(--ink)}
blockquote{margin:0 0 18px;padding:14px 20px;border-left:5px solid var(--green);background:var(--mint);border-radius:0 10px 10px 0}
/* promise strip */
.promise{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:0 0 8px;padding:22px 26px;border-radius:12px;background:var(--navy);color:#fff}
.promise div{font-size:19px;line-height:1.45}
.promise strong{display:block;color:#fff;font-size:20px;margin-bottom:4px}
.promise a{color:#c9f2e6}
footer{margin-top:56px;font-size:18px;line-height:1.5;color:var(--muted);border-top:1px solid var(--rule);padding-top:16px;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between}
footer strong{color:var(--ink)}
footer a{color:var(--link)}
@media (max-width:760px){
  .hero{padding:26px 20px 24px}
  .hero h1{font-size:34px}
  .steps,.promise{grid-template-columns:1fr}
  header{display:block}
  .logo img{max-width:300px}
  nav{margin-top:14px}
  .cta.secondary{margin-left:0;margin-top:10px}
}