/* ════════════════════════════════════════════════════════════════
   FIDNT · Brand Design System — ACCESSIBLE NEUMORPHISM
   Single source of truth for every public surface.
   Soft extruded surfaces · readable dark ink (WCAG-aware) · FIDNT blue accent.
   App surfaces (/app /dashboard /me /console) keep the sidebar shell.
   ════════════════════════════════════════════════════════════════ */

:root{
  /* neumorphic base */
  --nb:#E6EBF4; --n-lite:#FFFFFF; --n-dark:#BBC6DB;
  --rise:-7px -7px 15px var(--n-lite), 7px 7px 15px var(--n-dark), 0 0 28px rgba(120,160,235,.11);
  --rise-sm:-4px -4px 9px var(--n-lite), 4px 4px 9px var(--n-dark);
  --press:inset -4px -4px 9px var(--n-lite), inset 5px 5px 11px var(--n-dark), inset 0 0 18px rgba(120,160,235,.07);

  /* ink — kept dark for readability (seniors / PWD) */
  --ink:#27314C; --ink-2:#55617D; --ink-3:#7B879F;
  --line:#D3DBE9; --line-2:#DEE4F0;
  --paper:#E6EBF4; --paper-2:#E6EBF4; --paper-3:#DCE3EF;
  --accent:#1742E5; --accent-ink:#0E2DA8; --accent-soft:#D6DFF3;
  --green:#0A7B43; --gold:#8A5A00; --red:#B91C1C; --hl:#8FB6FF;
  --r:22px; --shadow:var(--rise);
  --foot-bg:linear-gradient(180deg,#0E1A3A 0%,#0A1430 100%);
  --sans:"Inter","Segoe UI Variable",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --head:"Plus Jakarta Sans","Inter","Segoe UI Variable",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
img,svg,video,canvas{max-width:100%}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body.fb{font-family:var(--sans);color:var(--ink);font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;background:var(--nb)}
.fb h1,.fb h2,.fb h3,.fb h4{font-family:var(--head);letter-spacing:-.02em;line-height:1.12;color:var(--ink)}
.fb a{color:var(--accent-ink);text-decoration:none}
.fb a:hover{text-decoration:underline}
.fb p{color:var(--ink-2)}
.fb code{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:.92em;background:var(--nb);box-shadow:var(--press);padding:2px 8px;border-radius:7px;color:var(--accent-ink)}
.fb .ico{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.fb-wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.fb-narrow{max-width:760px}
/* accessibility: always-visible focus */
.fb a:focus-visible,.fb button:focus-visible,.fb-btn:focus-visible{outline:2.5px solid var(--accent);outline-offset:3px;border-radius:8px}

/* ── header ── */
.fb-top{height:54px;display:flex;align-items:center;justify-content:space-between;max-width:none;margin:0;padding:0 max(28px,calc(50% - 562px));width:100%;position:sticky;top:0;z-index:50;background:var(--nb)}
.fb-top.solid{background:var(--nb);transition:background .25s ease,box-shadow .25s ease,backdrop-filter .25s ease}
.fb-top.scrolled{background:rgba(230,235,244,.6);backdrop-filter:saturate(170%) blur(14px);-webkit-backdrop-filter:saturate(170%) blur(14px);box-shadow:0 6px 22px rgba(10,20,45,.09)}
.fb-top .brand-logo{height:22px;width:auto;display:block}
.fb-top nav{display:flex;align-items:center;gap:24px}
.fb-top nav a{font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none}
.fb-top nav a:hover{color:var(--accent-ink)}
.fb-top .cta{background:linear-gradient(135deg,#2452F0,#0E2DA8);color:#fff;padding:9px 16px;border-radius:13px;font-size:14px;font-weight:700;box-shadow:5px 5px 12px var(--n-dark),-5px -5px 12px var(--n-lite)}
.fb-top .cta:hover{filter:brightness(1.06);text-decoration:none}
.fb-top .cta:active{box-shadow:var(--press)}
@media(max-width:680px){.fb-top nav a.hide-sm{display:none}}

/* ── sections ── */
.fb-section{padding:52px 0}
.fb-hero{padding:54px 0 32px;text-align:center}
.fb-hero h1{font-size:clamp(30px,5.2vw,50px);font-weight:850;line-height:1.06;margin:18px auto 0;max-width:18ch}
.fb-hero p{font-size:clamp(16px,2.1vw,19px);color:var(--ink-2);max-width:62ch;margin:16px auto 0}
.fb-sec-h{max-width:64ch;margin:0 auto 34px;text-align:center}
.fb-sec-h .k{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.fb-sec-h h2{font-size:clamp(23px,3.4vw,32px);font-weight:850;margin-top:8px}
.fb-sec-h p{color:var(--ink-2);margin-top:10px;font-size:15.5px}

/* ── badges / pills (pressed) ── */
.fb-badge{display:inline-flex;align-items:center;gap:8px;background:var(--nb);box-shadow:var(--press);color:var(--accent-ink);font-size:12.5px;font-weight:700;padding:9px 16px;border-radius:999px}
.fb-badge .ico{width:15px;height:15px;stroke:var(--accent)}

/* ── buttons (raised) ── */
.fb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:800;font-size:15px;padding:14px 24px;border-radius:16px;cursor:pointer;border:0;background:var(--nb);color:var(--accent-ink);box-shadow:var(--rise);transition:box-shadow .18s,transform .18s,filter .18s;text-decoration:none}
.fb-btn:hover{text-decoration:none}
.fb-btn:active{box-shadow:var(--press);transform:translateY(1px)}
.fb-btn-primary{background:linear-gradient(135deg,#2452F0,#0E2DA8);color:#fff;box-shadow:6px 6px 15px var(--n-dark),-6px -6px 15px var(--n-lite)}
.fb-btn-primary:hover{filter:brightness(1.06)}
.fb-btn .ico{width:18px;height:18px}

/* ── cards / grids (raised) ── */
.fb-grid{display:grid;gap:24px}
.fb-g2{grid-template-columns:repeat(2,1fr)}
.fb-g3{grid-template-columns:repeat(3,1fr)}
.fb-g4{grid-template-columns:repeat(4,1fr)}
.fb-card{background:var(--nb);border:0;border-radius:24px;padding:24px;box-shadow:var(--rise)}
.fb-card h3{font-size:16.5px;font-weight:800}
.fb-card p{font-size:14px;color:var(--ink-2);margin-top:7px}
.fb-card .ic{width:54px;height:54px;border-radius:16px;background:var(--nb);box-shadow:var(--rise-sm);color:var(--accent);display:grid;place-items:center;margin-bottom:15px}
.fb-card .ic .ico{width:24px;height:24px;stroke-width:2}
.fb-card .cite{margin-top:11px;font-size:11.5px;color:var(--ink-3);font-weight:600}
.fb-panel{background:var(--nb);border:0;border-radius:24px;box-shadow:var(--rise)}
/* alternating in/out — every other card carved in */
.fb-grid>.fb-card:nth-child(even){box-shadow:var(--press)}

/* ── table (raised panel) ── */
/* wrap any wide table in <div class="fb-table-wrap"> so it scrolls on mobile instead of overflowing the page */
.fb-table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.fb-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--nb);border:0;border-radius:20px;overflow:hidden;font-size:14px;box-shadow:var(--rise)}
.fb-table th,.fb-table td{text-align:left;padding:13px 18px;border-top:1px solid var(--line-2)}
.fb-table thead th{background:var(--paper-3);font-family:var(--head);font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);border-top:0}
.fb-table tbody tr:hover{background:var(--paper-3)}

/* ── global footer (dark — the contrast anchor) ── */
.site-foot{background:var(--foot-bg);color:#E6ECFB;font-family:var(--sans);font-size:14px;line-height:1.6;padding:0;border:0;margin:0}
.site-foot a{color:#AFC4F2;text-decoration:none;transition:color .15s}
.site-foot a:hover{color:#fff}
.site-foot .sf-wrap{max-width:1180px;margin:0 auto;padding:54px 28px 0}
.site-foot .sf-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:34px}
.site-foot .sf-brand .logo{height:24px;filter:brightness(0) invert(1);display:block}
.site-foot .sf-brand p{color:#90A2CC;font-size:13.5px;margin-top:16px;max-width:36ch}
.site-foot .sf-col h4{font-family:var(--head);font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7E90BC;margin-bottom:14px}
.site-foot .sf-col a{display:block;padding:6px 0;font-size:13.5px;font-weight:550}
.site-foot .sf-col a .b{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.04em;color:#0E1A3A;background:#6BB1EC;border-radius:5px;padding:1px 5px;margin-left:7px;vertical-align:middle;text-transform:uppercase}
.site-foot .sf-decl{margin-top:46px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:26px 0;border-top:1px solid rgba(255,255,255,.10);border-bottom:1px solid rgba(255,255,255,.10)}
.site-foot .decl{display:flex;gap:12px}
.site-foot .decl .ic{width:34px;height:34px;border-radius:9px;background:rgba(159,194,255,.12);color:#9FC2FF;display:grid;place-items:center;flex:none}
.site-foot .decl .ic .ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.site-foot .decl b{display:block;font-size:13px;font-weight:750;color:#EAF0FF}
.site-foot .decl span{font-size:12px;color:#8FA1CB;line-height:1.5}
.site-foot .sf-legal{padding:28px 0;border-top:1px solid rgba(255,255,255,.10);font-size:13px;color:#8FA1CB;line-height:1.6;display:grid;grid-template-columns:1fr 1fr;gap:26px}
.site-foot .sf-legal .reg p{margin:0 0 10px}.site-foot .sf-legal .reg p:last-child{margin-bottom:0}
.site-foot .sf-bot{border-top:1px solid rgba(255,255,255,.10);padding:20px 0 40px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:12px;color:#7E90BC}
.site-foot .sf-bot .seals{color:#8FA1CB}
@media(max-width:880px){.site-foot .sf-top{grid-template-columns:1fr 1fr;gap:28px}.site-foot .sf-brand{grid-column:1 / -1}.site-foot .sf-decl{grid-template-columns:1fr 1fr}.site-foot .sf-legal{grid-template-columns:1fr}.site-foot .sf-legal .laws{text-align:left}}
@media(max-width:520px){.site-foot .sf-top,.site-foot .sf-decl{grid-template-columns:1fr}}

@media(max-width:760px){.fb-g2,.fb-g3,.fb-g4{grid-template-columns:1fr}}

/* ════════ MOBILE FIT (≤640px) — content must precisely fit the screen ════════ */
@media(max-width:640px){
  /* tighter side gutters so cards/text reach the edges cleanly */
  .fb-wrap{padding:0 18px}
  /* header: smaller gap + CTA so the brand + nav fit on a 360px row */
  .fb-top{height:52px;padding:0 18px}
  .fb-top nav{gap:14px}
  .fb-top .cta{padding:8px 13px;font-size:13px}
  /* let long headings wrap instead of forcing width */
  .fb h1,.fb h2,.fb h3,.fb h4{overflow-wrap:anywhere;word-break:break-word}
  /* dial back vertical rhythm */
  .fb-section{padding:36px 0}
  .fb-hero{padding:36px 0 22px}
  .fb-hero h1{max-width:100%}
  /* cards/panels never exceed the viewport; break long tokens (hashes, IDs) */
  .fb-card,.fb-panel{max-width:100%;padding:20px}
  .fb-card p,.fb p{overflow-wrap:anywhere}
  .fb code{overflow-wrap:anywhere;word-break:break-word}
  /* any bare .fb-table gets horizontal scroll as a fallback if not wrapped */
  .fb-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
}
@media(max-width:380px){
  .fb-wrap{padding:0 14px}
  .fb-top{padding:0 14px}
  .fb-top nav{gap:10px}
}