/* Shared design tokens and site chrome (nav + footer) for every page.
   Loaded by the homepage, the use case pages and the React legal pages, so colours, type scale,
   spacing and buttons can't drift between them. Page-specific styles live in each page. */
:root{
  --ink:#0A2540;--slate:#425466;--mist:#8898AA;--line:#E3E8EE;--haze:#F6F9FC;--navy:#12345A;--navy-hover:#0A2540;--signal:#2D6CDF;
  /* type scale */
  --fs-hero:clamp(36px,4.9vw,64px);   /* homepage headline */
  --fs-page:clamp(34px,4.4vw,54px);   /* headline on every other page */
  --fs-h2:clamp(30px,3.6vw,44px);     /* section headings */
  --fs-card:19px;                     /* card and step titles */
  --fs-lede:18px;                     /* paragraph under a page headline */
  --fs-sub:17px;                      /* paragraph under a section heading */
  --fs-body:16px;
  --ls-display:-.035em;
  /* spacing and shape */
  --sec-pad:112px;--sec-pad-m:72px;--wrap:1120px;--gutter:24px;
  --btn-h:44px;--btn-r:6px;--btn-w:600;
  --sh-sm:0 1px 1px rgba(10,37,64,.03),0 2px 5px -1px rgba(50,50,93,.1),0 1px 3px -1px rgba(0,0,0,.06);
  --sh-md:0 13px 27px -5px rgba(50,50,93,.18),0 8px 16px -8px rgba(0,0,0,.18);
  --sh-lg:0 50px 100px -20px rgba(50,50,93,.25),0 30px 60px -30px rgba(0,0,0,.3)
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0}

/* nav */
.sn{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:14px 28px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);font-family:Geist,system-ui,sans-serif}
.sn-brand,.sf-brand{display:inline-flex;align-items:center;gap:.2em;font:600 23px/1 Outfit,Geist,sans-serif;letter-spacing:-.035em;color:var(--navy);text-decoration:none;white-space:nowrap}
.sn-brand svg,.sf-brand svg{width:.92em;height:.92em;display:block;flex:none}
.sn-links{display:flex;gap:28px;font-size:14px;font-weight:500;margin-left:auto;margin-right:22px;color:var(--slate)}
.sn-links a{color:inherit;text-decoration:none}
.sn-links a:hover,.sn-links a[aria-current]{color:var(--ink)}
.sn-cta{display:inline-flex;align-items:center;gap:6px;min-height:38px;font:var(--btn-w) 13.5px/1 Geist,sans-serif;letter-spacing:-.01em;padding:10px 12px 10px 15px;border-radius:var(--btn-r);background:var(--navy);color:#fff;text-decoration:none;white-space:nowrap}
.sn-cta:hover{background:var(--navy-hover)}
.sn-cta svg{width:13px;height:13px}

/* footer */
.sf{border-top:1px solid var(--line);padding:16px 28px 20px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;font:12px/1.5 Geist,system-ui,sans-serif;color:var(--mist);max-width:var(--wrap);margin:0 auto}
.sf-brand{font-size:17px}
.sf-links{display:flex;flex-wrap:wrap;align-items:center;gap:2px 18px}
.sf-links a{color:inherit;text-decoration:none;padding:4px 0}
.sf-links a:hover{color:var(--ink)}

@media (max-width:760px){
  .sn{padding:10px 16px}.sn-brand{font-size:24px}.sn-links{display:none}
  .sn-cta{min-height:36px;padding:8px 10px 8px 13px;font-size:13px}
  .sf{flex-direction:column;align-items:flex-start;padding:16px 16px 22px;gap:10px}.sf-links{gap:2px 16px}.sf-c{order:1;flex-basis:100%;margin-top:2px}
}

/* mobile menu (built by /shared/mobile-nav.js) */
.mn-btn,.mn-panel{display:none}
@media (max-width:760px){
  .sn-cta,body > nav > .btn{display:none}
  .mn-btn{display:grid;place-items:center;width:42px;height:42px;margin-left:auto;padding:0;border:0;border-radius:var(--btn-r);background:var(--navy);color:#fff;cursor:pointer}
  .mn-btn svg{width:20px;height:20px}
  .mn-panel:not([hidden]){position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;padding:10px 16px calc(24px + env(safe-area-inset-bottom));background:#fff;font-family:Geist,system-ui,sans-serif;overflow-y:auto;animation:mn-in .2s ease}
  .mn-top{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-bottom:20px}
  .mn-brand{display:flex;font-size:24px;color:var(--navy)}
  .mn-brand a{color:inherit;text-decoration:none}
  .mn-close{display:grid;place-items:center;width:42px;height:42px;padding:0;border:0;border-radius:var(--btn-r);background:#EEF3FB;color:var(--signal);cursor:pointer}
  .mn-close svg{width:18px;height:18px}
  .mn-list{list-style:none;margin:0;padding:0}
  .mn-list a{display:flex;align-items:center;justify-content:space-between;padding:18px 2px;border-bottom:1px dashed var(--line);font-size:22px;font-weight:500;letter-spacing:-.015em;color:var(--ink);text-decoration:none}
  .mn-list svg,.mn-actions svg{width:16px;height:16px;color:var(--signal)}
  .mn-actions{margin-top:auto;padding-top:32px;display:flex;align-items:center;justify-content:center;gap:24px}
  .mn-primary{display:inline-flex;align-items:center;gap:6px;min-height:var(--btn-h);padding:0 16px 0 20px;border-radius:var(--btn-r);background:var(--navy);color:#fff;font-size:16px;font-weight:var(--btn-w);text-decoration:none}
  .mn-primary svg{color:#fff}
  .mn-secondary{display:inline-flex;align-items:center;gap:6px;font-size:16px;font-weight:var(--btn-w);color:var(--ink);text-decoration:none}
  html.mn-open,html.mn-open body{overflow:hidden}
}
@keyframes mn-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.mn-panel{animation:none!important}}