/* Self-hosted because the production CSP's font-src 'self' blocks fonts.gstatic.com; root-absolute because MapFallback serves this page at every path. */
@font-face{font-family:'Outfit'; font-style:normal; font-weight:500 800; font-display:swap; src:url('/apex-fonts/outfit-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist'; font-style:normal; font-weight:400 600; font-display:swap; src:url('/apex-fonts/geist-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Geist Mono'; font-style:normal; font-weight:400 500; font-display:swap; src:url('/apex-fonts/geist-mono-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --navy-950:#0A1730; --navy-900:#0F1F3D; --navy:#12274D; --navy-700:#1D3768; --navy-600:#2A467E;
  --orange-1:#F4560B; --orange-2:#FF8A1A; --orange-3:#FFB93D; --orange:#FF7A1A;
  --gradient-arrow:linear-gradient(100deg,var(--orange-1) 0%,var(--orange-2) 55%,var(--orange-3) 100%);

  --paper:#F7F8FC; --paper-alt:#EFF2F9; --white:#FFFFFF;
  --ink:#0F172A; --ink-soft:#3C465C; --muted:#5B6478;
  --border:#E3E7F0; --border-strong:#CFD6E4;
  /* Mock's #1C8A5A is 3.86:1 on --success-bg (fails AA for the 11px "Paid" pill); #15734A is 5.21:1. */
  --success:#15734A; --success-bg:#E7F5EC;
  --warn:#9A3D05; --warn-bg:#FFF1E6;
  --info:#1D3768; --info-bg:#EAF0FA;

  --shadow-xs:0 1px 2px rgba(15,23,42,.05);
  --shadow-frame:0 1px 2px rgba(15,23,42,.04), 0 24px 60px -24px rgba(18,39,77,.28);
  --font-display:'Outfit',ui-sans-serif,system-ui,sans-serif;
  --font:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{scroll-behavior:smooth; scroll-padding-top:80px; -webkit-text-size-adjust:100%}
body{margin:0; background:var(--white); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
ul,ol{margin:0; padding:0; list-style:none}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3{font-family:var(--font-display); font-weight:600; letter-spacing:-.025em; text-wrap:balance}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; touch-action:manipulation}
::selection{background:#FFE3CC; color:var(--navy)}
:focus-visible{outline:2px solid var(--navy); outline-offset:3px; border-radius:4px}
main:focus{outline:none}
.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}
.icon{width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.icon-sm{width:15px; height:15px}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}

.wrap{width:100%; max-width:1200px; margin-inline:auto; padding-inline:24px}
.skip-link{position:absolute; left:16px; top:-60px; z-index:1000; background:var(--navy); color:#fff; padding:10px 16px; border-radius:8px; font-weight:500; transition:top .2s var(--ease)}
.skip-link:focus{top:16px}
section{padding-block:clamp(72px,9vw,120px)}

.section-head{max-width:640px; margin-bottom:48px}
.section-head.center{margin-inline:auto; text-align:center}
.section-head h2{font-size:clamp(1.875rem,3.4vw,2.75rem); line-height:1.1}
.section-head p{margin-top:16px; font-size:1.125rem; color:var(--muted)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 20px; border-radius:10px; font-size:.9375rem; font-weight:500; white-space:nowrap; transition:background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease), transform .12s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--navy); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 1px 2px rgba(10,23,48,.25)}
.btn-primary:hover{background:var(--navy-900)}
.btn-secondary{background:var(--white); color:var(--ink); border:1px solid var(--border); border-bottom-color:var(--border-strong); box-shadow:var(--shadow-xs)}
.btn-secondary:hover{background:var(--paper); border-color:var(--border-strong)}
.btn-ghost{color:var(--ink-soft); padding:0 14px}
.btn-ghost:hover{color:var(--ink); background:var(--paper)}
.btn-sm{min-height:36px; padding:0 14px; font-size:.875rem; border-radius:8px}
.btn-lg{min-height:48px; padding:0 24px; font-size:1rem}
.btn-nested{padding-right:6px; gap:12px}
.btn-chip{width:36px; height:36px; border-radius:8px; display:grid; place-items:center; background:var(--gradient-arrow); color:var(--navy-950); transition:transform .2s var(--ease)}
.btn-nested:hover .btn-chip{transform:translateX(2px)}
.btn-chip .icon{stroke-width:2}

/* Mock overflows at 320px (nowrap header row ~323px vs 272px); 16px gutters + wrapping buttons keep every control whole down to 320 and under 1.4.12 spacing. */
@media (max-width:420px){
  .wrap{padding-inline:16px}
  .btn{white-space:normal; text-align:center}
}

/* ---------- Header ---------- */
header.site{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.85); -webkit-backdrop-filter:saturate(1.4) blur(14px); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid var(--border)}
.nav-row{display:flex; align-items:center; gap:24px; height:64px}
.brand{display:flex; align-items:center; gap:9px; border-radius:6px}
.brand svg{height:36px; width:auto}
.brand-word{font-family:var(--font-display); font-weight:800; font-size:1.3125rem; letter-spacing:-.045em; line-height:1}
.brand-word .b1{color:var(--navy)}
.brand-word .b2{color:var(--orange)}
nav.primary-links{display:flex; align-items:center; gap:2px}
nav.primary-links a{padding:8px 12px; border-radius:8px; font-size:.9375rem; color:var(--ink-soft); transition:color .15s var(--ease), background-color .15s var(--ease)}
nav.primary-links a:hover{color:var(--ink); background:var(--paper)}
.nav-actions{margin-left:auto; display:flex; align-items:center; gap:6px}
.nav-menu{display:none}
.nav-toggle{display:grid; width:44px; height:44px; place-items:center; border-radius:8px; list-style:none; cursor:pointer}
.nav-toggle::-webkit-details-marker{display:none}
.nav-toggle::marker{content:""}
.nav-toggle:hover{background:var(--paper)}
.nav-menu .icon-close,.nav-menu[open] .icon-open{display:none}
.nav-menu[open] .icon-close{display:block}
.mobile-panel{position:absolute; left:0; right:0; top:100%; display:flex; flex-direction:column; gap:2px; padding:12px 24px 20px; border-block:1px solid var(--border); background:var(--white); box-shadow:var(--shadow-frame)}
.mobile-panel a:not(.btn){padding:12px 8px; border-radius:8px; font-weight:500}
.mobile-panel a:not(.btn):hover{background:var(--paper)}
.mobile-panel .mobile-cta{display:none; margin-top:8px}
.mobile-panel a.mobile-signin{display:none}
@media (max-width:900px){
  /* Not sticky here: the open mobile panel must scroll away with the header after an in-page jump instead of covering the target section. */
  header.site{position:relative}
  html{scroll-padding-top:16px}
  nav.primary-links{display:none}
  .nav-menu{display:block}
}
@media (max-width:420px){
  .nav-row{gap:12px}
  .nav-actions > .btn-primary{display:none}
  .nav-actions > .signin-link{display:none}
  .mobile-panel{padding-inline:16px}
  .mobile-panel .mobile-cta{display:inline-flex}
  .mobile-panel a.mobile-signin{display:block}
}

.hero-cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; margin-top:32px}
.hero-cta .btn-secondary .icon{color:var(--orange-1)}

/* ---------- Final CTA ---------- */
.final{position:relative; padding:clamp(56px,7vw,88px) 24px; border-radius:20px; background:var(--navy-950); color:#fff; text-align:center; overflow:hidden}
.final::before{content:""; position:absolute; inset:0; background-image:linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px); background-size:48px 48px; -webkit-mask-image:radial-gradient(ellipse 60% 70% at 50% 100%, #000, transparent 75%); mask-image:radial-gradient(ellipse 60% 70% at 50% 100%, #000, transparent 75%)}
.final > *{position:relative}
.final h2{max-width:18ch; margin-inline:auto; font-size:clamp(2rem,3.8vw,3rem); line-height:1.06; letter-spacing:-.035em; color:#fff}
.final p{margin-top:16px; font-size:1.0625rem; color:rgba(255,255,255,.72)}
.final .hero-cta{margin-top:32px}
@media (max-width:420px){ .final{padding-inline:16px} }

/* ---------- Footer ---------- */
footer.site{padding-block:64px 32px; border-top:1px solid var(--border)}
.footer-grid{display:grid; grid-template-columns:1.5fr repeat(4,minmax(0,1fr)); gap:32px}
.footer-brand .brand{margin-bottom:16px}
.footer-brand p{max-width:32ch; font-size:.875rem; color:var(--muted)}
.footer-col h2{margin-bottom:14px; font-family:var(--font); font-size:.875rem; font-weight:500; letter-spacing:normal; color:var(--ink)}
.footer-col ul{display:flex; flex-direction:column; gap:10px}
.footer-col a{font-size:.875rem; color:var(--muted); border-radius:3px; transition:color .15s var(--ease)}
.footer-col a:hover{color:var(--ink)}
.footer-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; margin-top:56px; padding-top:24px; border-top:1px solid var(--border); font-size:.8125rem; color:var(--muted)}
@media (max-width:900px){ .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .footer-brand{grid-column:1 / -1} }

/* ---------- Info-page hero (breadcrumb + title) ---------- */
/* A <div>, not a <section>, so the global section padding rule above doesn't stack onto this one. */
.page-hero{position:relative; isolation:isolate; overflow:hidden; padding-block:clamp(40px,5vw,64px) clamp(8px,1.5vw,16px)}
/* Same grid texture as the home .hero; isolation above keeps the z-index:-1 layer inside this band. */
.page-hero::before{content:""; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px); background-size:64px 64px; background-position:center top; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%); opacity:.7}
.page-hero h1{margin-top:20px; font-size:clamp(2.25rem,4.6vw,3.25rem); line-height:1.05; letter-spacing:-.035em; color:var(--navy-950)}
.page-hero .lede{margin-top:14px; max-width:56ch; font-size:clamp(1.0625rem,1.4vw,1.125rem); color:var(--muted)}

/* Pill trail echoing the home hero's .badge. */
.crumbs{display:inline-flex; max-width:100%; min-height:30px; padding:4px 14px; border:1px solid var(--border); border-radius:999px; background:var(--white); box-shadow:var(--shadow-xs)}
.crumbs ol{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:.8125rem; line-height:1.4; color:var(--muted)}
.crumbs li{display:inline-flex; align-items:center; gap:10px}
.crumbs li + li::before{content:""; width:5px; height:5px; border-top:1.5px solid var(--border-strong); border-right:1.5px solid var(--border-strong); transform:rotate(45deg)}
.crumbs a{border-radius:4px; color:inherit; transition:color .15s var(--ease)}
.crumbs a:hover{color:var(--ink)}
.crumbs li[aria-current]{font-weight:500; color:var(--ink)}

/* ---------- Info-page document layout ---------- */
.doc{display:grid; grid-template-columns:220px minmax(0,1fr); gap:48px; padding-block:40px 64px}
.doc:not(:has(.doc-toc)){grid-template-columns:minmax(0,1fr)}
.doc-toc{position:sticky; top:88px; align-self:start; max-height:calc(100vh - 120px); overflow-y:auto}
.doc-toc-title{font-size:.8125rem; font-weight:600; color:var(--ink)}
.doc-toc ol{margin-top:12px; border-left:1px solid var(--border)}
.doc-toc a{position:relative; display:block; min-height:44px; padding:6px 0 6px 14px; margin-left:-1px; border-left:1px solid transparent; font-size:.875rem; color:var(--muted); transition:color .15s var(--ease), border-color .15s var(--ease)}
.doc-toc a:hover{color:var(--ink)}
.doc-content{max-width:42rem}
.legal-notice{display:flex; align-items:flex-start; gap:12px; max-width:42rem; margin-bottom:32px; padding:16px 20px; background:var(--info-bg); border-left:4px solid var(--info); border-radius:10px; color:var(--ink-soft); font-size:.9375rem; line-height:1.6}
.legal-notice .icon{flex:none; margin-top:3px; color:var(--info)}
/* .doc-section is a <section>, so it inherits the global section{padding-block:clamp(72px,9vw,120px)} rule above unless reset here. */
.doc-section{padding-block:0}
.doc-section + .doc-section{margin-top:40px; padding-top:40px; border-top:1px solid var(--border)}
.doc-section h2{display:flex; align-items:center; font-size:1.25rem}
.doc-badge{display:inline-flex; align-items:center; justify-content:center; flex:none; min-width:34px; height:34px; margin-right:14px; padding:0 6px; border:1px solid var(--border); border-radius:9px; background:var(--paper); box-shadow:var(--shadow-xs); font-family:var(--mono); font-size:.8125rem; font-weight:600; color:var(--muted)}
.doc-section p{margin-top:0; color:var(--ink-soft); line-height:1.75}
.doc-content{overflow-wrap:break-word}
.doc-section h2 + :is(p,ul,ol,h3){margin-top:14px}
.doc-section :is(p,ul,ol) + :is(p,ul,ol){margin-top:14px}
.doc-section :is(p,ul,ol) + h3{margin-top:28px}
.doc-section h3{font-size:1.0625rem; letter-spacing:-.01em; color:var(--ink)}
.doc-section h3 + :is(p,ul,ol){margin-top:8px}
/* The global reset strips list markers; legal lists need them back to read as lists. */
.doc-section ul{list-style:disc; padding-left:1.35em; color:var(--ink-soft); line-height:1.75}
.doc-section ol{list-style:decimal; padding-left:1.5em; color:var(--ink-soft); line-height:1.75}
.doc-section li + li{margin-top:6px}
.doc-section li::marker{color:var(--muted)}
/* Underline restores what the global a{text-decoration:none} reset removed, so in-prose links aren't distinguished by color alone (WCAG 1.4.1). */
.doc-section a,.legal-notice a{color:var(--navy); font-weight:500; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; border-radius:2px}
.doc-section a:hover,.legal-notice a:hover{text-decoration-thickness:2px}
.doc-section a:focus-visible,.legal-notice a:focus-visible{outline:2px solid var(--navy); outline-offset:2px; text-decoration-thickness:2px}
@media (max-width:960px){
  .doc{grid-template-columns:minmax(0,1fr); gap:32px; padding-block:32px 48px}
  .doc-toc{position:static; padding:16px 18px; border:1px solid var(--border); border-radius:12px; background:var(--paper); max-height:none; overflow-y:visible}
  .doc-toc ol{columns:2; column-gap:24px; border-left:0}
  .doc-toc a{padding:5px 0; border-left:0; margin-left:0}
}
@media (max-width:520px){ .doc-toc ol{columns:1} }