
:root{
 --navy:#13223F;--navy2:#2E4876;--crimson:#C8102E;--crimson-dark:#9C0C24;
 --paper:#F5F5F3;--card:#FFFFFF;--ink:#201E1E;--muted:#5f5c5c;--line:#E0DCDA;
 --shadow:0 1px 0 rgba(19,34,63,.04),0 8px 24px -18px rgba(19,34,63,.35);
 --disp:'Fraunces',Georgia,serif;--sans:'Public Sans',-apple-system,Segoe UI,Roboto,sans-serif;
 --mono:'Spline Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:16px;line-height:1.7;color:var(--ink);background:var(--paper)}
img{max-width:100%}
a{color:var(--crimson)}a:hover{color:var(--crimson-dark)}
.wrap{max-width:1000px;margin:0 auto;padding:0 1.25rem}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;
 font-weight:700;color:var(--crimson)}
.demo{background:var(--navy);color:#fff;text-align:center;padding:.35rem;font-size:.8rem;letter-spacing:.02em}

.topbar{position:sticky;top:0;z-index:20;background:rgba(245,245,243,.86);backdrop-filter:blur(8px);
 border-bottom:1px solid var(--line)}
.topbar .bar{display:flex;align-items:center;gap:.6rem 1.1rem;min-height:60px;padding:.4rem 1.6rem}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--disp);font-weight:600;font-size:1.05rem;
 color:var(--navy);text-decoration:none;white-space:nowrap}
.brand .mark{width:26px;height:26px;object-fit:contain;display:block}
.chip{font-family:var(--mono);font-size:.62rem;font-weight:600;letter-spacing:.08em;background:var(--crimson);
 color:#fff;padding:.12rem .4rem;border-radius:3px;text-transform:uppercase}
.mainnav{margin-left:auto;display:flex;flex-wrap:nowrap;gap:.05rem}
.mainnav a{font-size:.88rem;font-weight:600;color:var(--navy);text-decoration:none;padding:.4rem .55rem;
 border-radius:6px;white-space:nowrap}
.mainnav a:hover{background:rgba(46,72,118,.1)}
.mainnav a[aria-current=page]{color:var(--crimson);box-shadow:inset 0 -2px 0 var(--crimson)}
.navtoggle{display:none;margin-left:auto;width:42px;height:38px;border:1px solid var(--line);border-radius:8px;
 background:var(--card);flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer}
.navtoggle span{display:block;width:20px;height:2px;background:var(--navy);border-radius:2px;transition:transform .2s,opacity .2s}
.navtoggle[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.navtoggle[aria-expanded=true] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.hero{position:relative;overflow:hidden;background:var(--navy);color:#eef0f4}
.hero .topo{position:absolute;inset:0;width:100%;height:100%;color:#fff;opacity:.10}
.hero .inner{position:relative;padding:3.4rem 0 0}
.hero .eyebrow{color:#ff8a9b}
.hero h1{font-family:var(--disp);font-weight:600;font-size:clamp(2.3rem,6vw,4rem);line-height:1.04;
 letter-spacing:-.01em;margin:.5rem 0 .4rem;color:#fff;max-width:16ch}
.hero p.lead{font-size:1.12rem;max-width:52ch;color:#d7dbe4}
.ctarow{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.4rem 0 2.4rem}
.btn{font-family:var(--sans);font-weight:600;font-size:.95rem;text-decoration:none;padding:.62rem 1.1rem;
 border-radius:7px;border:1.5px solid transparent;display:inline-flex;align-items:center;gap:.4rem}
.btn.primary{background:var(--crimson);color:#fff}.btn.primary:hover{background:var(--crimson-dark)}
.btn.ghost{border-color:rgba(255,255,255,.5);color:#fff}.btn.ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.ledger{position:relative;display:flex;flex-wrap:wrap;gap:.2rem 1.6rem;font-family:var(--mono);font-size:.76rem;
 letter-spacing:.06em;color:#b7bfd0;border-top:1px solid rgba(255,255,255,.18);padding:.8rem 0 1.2rem;text-transform:uppercase}
.ledger b{color:#ff8a9b;font-weight:600}

.pagehead{position:relative;overflow:hidden;background:var(--navy);color:#fff}
.pagehead .topo{position:absolute;inset:0;width:100%;height:100%;color:#fff;opacity:.08}
.pagehead .inner{position:relative;padding:2rem 0}
.pagehead h1{font-family:var(--disp);font-weight:600;font-size:clamp(1.8rem,4vw,2.6rem);margin:.3rem 0 .2rem}
.pagehead p{margin:0;color:#cdd3e0;max-width:60ch}

main{padding:2.2rem 0 1rem}
.section{margin:2.2rem 0}
h2{font-family:var(--disp);font-weight:600;font-size:1.55rem;color:var(--navy);margin:0 0 .2rem}
h2 + .eyebrow{margin-bottom:1rem}
h3{font-family:var(--sans);font-weight:700;font-size:1.02rem;color:var(--navy);margin:0 0 .3rem}

.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:1.2rem 1.35rem;
 box-shadow:var(--shadow);margin:1rem 0}
.panel.accent{border-left:4px solid var(--crimson)}
.cols{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.callout{background:#fdeced;border:1px solid #f3c9cd;border-left:4px solid var(--crimson);border-radius:8px;
 padding:.9rem 1.1rem}

.steps{list-style:none;margin:0;padding:0}
.steps li{position:relative;padding:0 0 1.1rem 3rem;border-left:2px dashed var(--line);margin-left:1.1rem}
.steps li:last-child{border-left-color:transparent;padding-bottom:0}
.steps li .mile{position:absolute;left:-1.1rem;top:-.15rem;width:2.2rem;height:2.2rem;border-radius:50%;
 background:var(--navy);color:#fff;font-family:var(--mono);font-weight:600;font-size:.8rem;
 display:flex;align-items:center;justify-content:center;border:2px solid var(--crimson)}
.steps li h3{margin-top:.1rem}

table{width:100%;border-collapse:collapse;margin:.4rem 0;font-size:.95rem}
th,td{border-bottom:1px solid var(--line);padding:.55rem .6rem;text-align:left;vertical-align:top}
thead th{background:transparent;color:var(--navy);font-family:var(--sans);font-weight:700;
 border-bottom:2px solid var(--crimson);text-transform:uppercase;letter-spacing:.04em;font-size:.78rem}
tbody tr:hover{background:#faf3f3}

.pill{display:inline-block;background:#fdeced;color:var(--crimson-dark);border-radius:999px;padding:.2rem .7rem;
 font-size:.8rem;font-weight:600;margin:.12rem}
.banner{width:100%;border-radius:10px;border:1px solid var(--line);display:block;margin:.4rem 0}
.flyer{max-width:330px;width:100%;border-radius:9px;border:1px solid var(--line)}

details.faq{border-bottom:1px solid var(--line);padding:.7rem .2rem}
details.faq summary{font-weight:600;color:var(--navy);cursor:pointer;list-style:none;
 display:flex;align-items:center;gap:.5rem}
details.faq summary::before{content:"›";font-family:var(--mono);color:var(--crimson);font-size:1.1rem;
 transition:transform .15s}
details.faq[open] summary::before{transform:rotate(90deg)}
details.faq p{margin:.5rem 0 0 1.4rem;color:var(--muted)}

.guide{list-style:none;padding:0;margin:.4rem 0}
.guide li{display:flex;gap:.8rem;align-items:flex-start;border:1px solid var(--line);border-radius:9px;
 padding:.7rem .9rem;margin:.5rem 0;background:var(--card)}
.guide .doc{font-family:var(--mono);font-size:.62rem;font-weight:600;background:var(--navy);color:#fff;
 padding:.3rem .4rem;border-radius:4px;letter-spacing:.06em;white-space:nowrap}
.guide a{font-weight:700;color:var(--navy);text-decoration:none}.guide a:hover{color:var(--crimson)}
.guide .meta{color:var(--muted);font-size:.86rem}

.facts{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:.6rem 0}
.facts .f{border:1px solid var(--line);border-radius:9px;padding:.8rem .9rem;background:var(--card)}
.facts .f b{font-family:var(--disp);font-weight:600;font-size:1.5rem;color:var(--crimson);display:block;line-height:1.1}
.facts .f span{font-size:.85rem;color:var(--muted)}

footer{background:var(--navy);color:#cdd3e0;margin-top:2.5rem}
footer .row{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;padding:1.6rem 0;font-size:.85rem}
footer .brand{color:#fff}footer .mark{color:#ff8a9b;filter:brightness(1.32) saturate(1.1)}
footer a{color:#ff8a9b}

:focus-visible{outline:3px solid var(--crimson);outline-offset:2px;border-radius:4px}
@media (max-width:860px){
 .topbar .bar{position:relative;padding:.4rem 1rem;gap:.5rem}
 .brand{font-size:.92rem;gap:.4rem;min-width:0}
 .brand .mark{width:22px;height:22px}
 .navtoggle{display:flex}
 .mainnav{position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--paper);
  border-bottom:1px solid var(--line);padding:.4rem .7rem .8rem;box-shadow:var(--shadow);
  max-height:0;overflow:hidden;opacity:0;pointer-events:none;transition:max-height .26s ease,opacity .2s ease}
 .mainnav.open{max-height:78vh;opacity:1;pointer-events:auto}
 .mainnav a{padding:.72rem .6rem;font-size:1rem;border-radius:6px;width:100%}
 .mainnav a[aria-current=page]{box-shadow:inset 3px 0 0 var(--crimson)}
 .brand .chip{display:none}  /* demo is already signalled by the banner above */
 .cols,.facts{grid-template-columns:1fr}
 .cols>*,.facts>*{min-width:0}
 .steps li{padding-left:2.6rem}
 /* wide tables scroll inside their own box instead of stretching the page */
 table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}

.panel,.facts .f,.guide li{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.panel:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(19,34,63,.05),0 16px 34px -20px rgba(19,34,63,.5)}
.facts .f:hover,.guide li:hover{transform:translateY(-2px);border-color:var(--crimson)}
.btn{transition:transform .12s ease,background .16s ease,border-color .16s ease}
.btn:active{transform:translateY(1px)}

@media (prefers-reduced-motion:no-preference){
 .hero h1,.hero p.lead,.ctarow,.ledger{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}
 .hero p.lead{animation-delay:.06s}.ctarow{animation-delay:.12s}.ledger{animation-delay:.18s}
 .hero .topo path,.pagehead .topo path{stroke-dasharray:2400;stroke-dashoffset:2400;
  animation:draw 2.4s cubic-bezier(.3,.6,.2,1) forwards}
 .hero .topo path:nth-child(2n){animation-delay:.15s}.hero .topo path:nth-child(3n){animation-delay:.3s}
 .pagehead .topo path:nth-child(2n){animation-delay:.12s}.pagehead .topo path:nth-child(3n){animation-delay:.24s}
 .js .section{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
 .js .section.in{opacity:1;transform:none}
}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes draw{to{stroke-dashoffset:0}}
