/* UltraCare grainy-grid design system — shared across calculators + evidence page.
   Tokens/grain/grid mirror index.html. Aeonik Pro self-hosts from /fonts (Hanken Grotesk carries it until present). */
@font-face{font-family:"Aeonik Pro";src:url("/fonts/AeonikPro-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Aeonik Pro";src:url("/fonts/AeonikPro-Medium.woff2")  format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Aeonik Pro";src:url("/fonts/AeonikPro-Bold.woff2")    format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#F2EFE7; --paper-2:#EAE6DA; --paper-3:#E4DFD0;
  --line:#DAD5C6; --line-strong:#C7C1AE;
  --grid:rgba(70,50,140,.10); --grid-2:rgba(70,50,140,.20);
  --ink:#191627; --ink-2:#38334C; --muted:#6E6880; --muted-2:#736D88;
  --indigo:#281464; --violet:#4632B4; --cornflower:#5A78FA; --corn-2:#7C90FF; --peri:#A9B6FF;
  --ink-950:#0B0620; --ink-900:#140A34;
  --mint:#2FBF8F; --amber:#C9902B; --alert:#E5455C;
  --sans:"Aeonik Pro","Hanken Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --display:"Aeonik Pro","Hanken Grotesk",system-ui,sans-serif;
  --tech:"Space Grotesk",ui-monospace,SFMono-Regular,Menlo,monospace;
  --cell:28px;
  --grad:linear-gradient(115deg,#4632B4,#5A78FA);
  --plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112'%3E%3Cg stroke='%234632B4' stroke-opacity='0.30' stroke-width='1'%3E%3Cpath d='M56 51.5v9M51.5 56h9'/%3E%3C/g%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background-color:var(--paper);line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
.grid-bg{background-image:var(--plus),
  repeating-linear-gradient(to right,var(--grid) 0 1px,transparent 1px var(--cell)),
  repeating-linear-gradient(to bottom,var(--grid) 0 1px,transparent 1px var(--cell));
  background-size:112px 112px,auto,auto}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--peri);color:var(--indigo)}
:focus-visible{outline:2px solid var(--cornflower);outline-offset:2px}
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.22;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:260px 260px}

.wrap{max-width:1120px;margin-inline:auto;padding-inline:26px}
.wrap-narrow{max-width:820px}
.sec{padding-block:clamp(40px,6vw,72px);position:relative}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:12px 18px;z-index:200;font-family:var(--tech);font-size:12px}
.skip:focus{left:16px;top:16px}

/* type */
.eyebrow{font-family:var(--tech);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--violet);
  display:inline-flex;align-items:center;gap:11px;margin:0 0 16px;font-weight:600}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.55}
.h1{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.04;margin:0;
  font-size:clamp(2rem,4.6vw,3.2rem);color:var(--ink)}
.h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.h2{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.12;margin:0 0 14px;
  font-size:clamp(1.4rem,2.6vw,1.9rem);color:var(--ink)}
.h3{font-family:var(--display);font-weight:600;font-size:1.12rem;letter-spacing:-.01em;margin:0 0 8px;color:var(--ink)}
.lead{font-size:clamp(1.02rem,1.4vw,1.14rem);color:var(--ink-2);max-width:70ch;margin:16px 0 0;line-height:1.6}
.tech{font-family:var(--tech)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--tech);font-weight:600;font-size:12.5px;
  letter-spacing:.06em;text-transform:uppercase;padding:13px 20px;border:1px solid transparent;cursor:pointer;
  border-radius:0;transition:background .18s,color .18s,border-color .18s,filter .18s;line-height:1}
.btn-primary{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 6px 18px -8px rgba(70,50,180,.55)}
.btn-primary:hover{filter:brightness(1.09)}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{color:var(--violet);border-color:var(--violet)}
.btn .arw{transition:transform .18s}.btn:hover .arw{transform:translateX(3px)}
.btn-sm{padding:9px 14px;font-size:11px}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(242,239,231,.82);backdrop-filter:blur(9px) saturate(1.2);
  -webkit-backdrop-filter:blur(9px) saturate(1.2);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:58px}
.brand{display:flex;align-items:center;gap:10px}
.brand-logo{height:24px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:24px;font-family:var(--tech);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase}
.nav-links a{color:var(--ink-2);opacity:.85;transition:color .15s,opacity .15s}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--violet);opacity:1}
@media(max-width:720px){.nav-links a.hide-sm{display:none}}

/* breadcrumb */
.crumb{font-family:var(--tech);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);margin:0 0 18px}
.crumb a:hover{color:var(--violet)}
.crumb span{color:var(--muted-2);margin:0 6px}

/* ---------- calculator instrument ---------- */
.calc{display:grid;grid-template-columns:1fr .82fr;gap:1px;background:var(--line-strong);
  border:1px solid var(--line-strong);margin-top:26px}
.calc-in{background:var(--paper);padding:22px 22px 24px}
.calc-out{background:var(--paper-3);padding:0;position:relative}
@media(max-width:840px){.calc{grid-template-columns:1fr}}

.fgroup{border-top:1px solid var(--line);padding-top:16px;margin-top:18px}
.fgroup:first-child{border-top:none;padding-top:0;margin-top:0}
.fgroup-h{font-family:var(--tech);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--violet);margin:0 0 12px;font-weight:600}
.field{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:7px 0}
.field > label{font-size:.92rem;color:var(--ink-2);flex:1;min-width:0}
.field .sub{display:block;font-family:var(--tech);font-size:9.5px;letter-spacing:.03em;color:var(--muted-2);margin-top:2px;text-transform:none}
.ctrl{display:flex;align-items:center;gap:8px;flex:none}
.ctrl input[type=number],.ctrl select,.ctrl input[type=text]{font-family:var(--tech);font-size:13px;color:var(--ink);
  background:var(--paper);border:1px solid var(--line-strong);border-radius:0;padding:8px 9px;width:96px;text-align:right}
.ctrl select{text-align:left;width:auto;max-width:210px;padding-right:22px}
.ctrl .unit{font-family:var(--tech);font-size:10px;letter-spacing:.04em;color:var(--muted);min-width:44px}
.ctrl input:focus,.ctrl select:focus{outline:none;border-color:var(--cornflower)}
.seg{display:inline-flex;border:1px solid var(--line-strong)}
.seg button{font-family:var(--tech);font-size:10.5px;letter-spacing:.03em;text-transform:uppercase;background:var(--paper);
  color:var(--muted);border:none;padding:8px 11px;cursor:pointer;border-left:1px solid var(--line)}
.seg button:first-child{border-left:none}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.chk{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:.9rem;color:var(--ink-2)}
.chk input{width:16px;height:16px;accent-color:var(--violet)}
.full-select{width:100%}
.field.stack{flex-direction:column;align-items:stretch}
.field.stack .ctrl{width:100%}.field.stack select{width:100%;max-width:none}

/* readout card */
.readout{position:relative;padding:22px 22px 24px}
.ro-hd{font-family:var(--tech);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:16px}
.ro-total{display:flex;align-items:baseline;gap:8px;font-family:var(--tech)}
.ro-total .score{font-size:4.2rem;font-weight:600;line-height:.9;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ro-total .range{font-size:1rem;color:var(--muted-2)}
.ro-band{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-family:var(--tech);font-size:12px;font-weight:600;
  letter-spacing:.02em;padding:7px 13px;border:1px solid;border-radius:0}
.ro-band::before{content:"";width:8px;height:8px;border-radius:50%;flex:none}
.ro-band.mint{color:#1E8A63;border-color:rgba(47,191,143,.5);background:rgba(47,191,143,.12)}
.ro-band.mint::before{background:var(--mint)}
.ro-band.amber{color:#8A6316;border-color:rgba(201,144,43,.5);background:rgba(201,144,43,.12)}
.ro-band.amber::before{background:var(--amber)}
.ro-band.alert{color:#B23046;border-color:rgba(229,69,92,.5);background:rgba(229,69,92,.12)}
.ro-band.alert::before{background:var(--alert)}
.ro-bd-hd{font-family:var(--tech);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:22px 0 6px}
.ro-bd{width:100%;border-collapse:collapse;font-size:12px}
.ro-bd td{padding:7px 0;border-top:1px solid var(--line);vertical-align:top}
.ro-bd tr:first-child td{border-top:none}
.ro-bd .l{color:var(--ink-2);width:52%}
.ro-bd .v{font-family:var(--tech);color:var(--muted);text-align:right;font-size:11px}
.ro-bd .p{font-family:var(--tech);color:var(--ink);font-weight:600;text-align:right;width:44px;font-variant-numeric:tabular-nums}
.ro-bd .p.pos{color:var(--violet)}
.ro-bd tr.meta td{color:var(--muted-2)}
.ro-bd tr.total td{border-top:2px solid var(--line-strong);padding-top:9px;font-weight:600;color:var(--ink)}
.ro-reset{margin-top:18px}
.corner{position:absolute;width:13px;height:13px;z-index:3}
.corner::before,.corner::after{content:"";position:absolute;background:var(--violet);opacity:.5}
.corner::before{left:50%;top:0;width:1px;height:100%;transform:translateX(-.5px)}
.corner::after{top:50%;left:0;height:1px;width:100%;transform:translateY(-.5px)}
.c1{top:-7px;left:-7px}.c2{top:-7px;right:-7px}.c3{bottom:-7px;left:-7px}.c4{bottom:-7px;right:-7px}

/* prose */
.prose{max-width:74ch}
.prose p{color:var(--ink-2);margin:0 0 14px}
.prose h2{margin-top:36px}
.prose ul{margin:0 0 14px;padding-left:0;list-style:none}
.prose li{position:relative;padding:5px 0 5px 20px;color:var(--ink-2)}
.prose li::before{content:"";position:absolute;left:0;top:13px;width:7px;height:1px;background:var(--violet)}
.prose a{color:var(--violet);text-decoration:underline;text-underline-offset:3px}
.refs{border-top:1px solid var(--line-strong);margin-top:20px;padding-top:18px;counter-reset:r}
.refs li{padding-left:26px;font-size:.9rem;color:var(--ink-2)}
.refs li::before{counter-increment:r;content:counter(r);top:6px;width:16px;height:16px;background:rgba(124,144,255,.16);
  color:var(--violet);border-radius:5px;font-family:var(--tech);font-size:9px;font-weight:600;display:grid;place-items:center}

/* CTA */
.cta{position:relative;overflow:hidden;background:var(--ink-950);color:#EDEBF6;border:1px solid var(--line-strong);
  margin-top:40px;padding:clamp(28px,4vw,44px)}
.cta .grid-b{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='112'%3E%3Cg stroke='%23A9B6FF' stroke-opacity='0.20' stroke-width='1'%3E%3Cpath d='M56 51.5v9M51.5 56h9'/%3E%3C/g%3E%3C/svg%3E"),
    repeating-linear-gradient(to right,rgba(169,182,255,.07) 0 1px,transparent 1px 28px),
    repeating-linear-gradient(to bottom,rgba(169,182,255,.07) 0 1px,transparent 1px 28px);background-size:112px 112px,auto,auto}
.cta > *{position:relative;z-index:2}
.cta .eyebrow{color:var(--peri)}
.cta h2{color:#F4F2FB;max-width:26ch}
.cta p{color:#B9B4D6;max-width:60ch;margin:12px 0 22px}
.cta .row{display:flex;flex-wrap:wrap;gap:12px}
.cta .btn-ghost{border-color:rgba(169,182,255,.34);color:#EDEBF6}
.cta .btn-ghost:hover{border-color:var(--peri);color:var(--peri)}

/* related */
.related{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);margin-top:16px}
.related a{background:var(--paper);padding:16px 15px;display:block;transition:background .15s}
.related a:hover{background:var(--paper-2)}
.related .k{font-family:var(--tech);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet)}
.related .t{font-weight:600;margin-top:5px;font-size:.98rem}
@media(max-width:720px){.related{grid-template-columns:repeat(2,1fr)}}

/* footer / disclaimer */
.foot{background:var(--paper-2);border-top:1px solid var(--line-strong);padding-block:36px 30px;margin-top:44px}
.foot-links{display:flex;flex-wrap:wrap;gap:22px;font-family:var(--tech);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.foot-links a:hover{color:var(--violet)}
.disclaimer{font-family:var(--tech);font-size:11px;line-height:1.7;color:var(--muted);max-width:78ch;margin-top:20px;letter-spacing:.01em}
.foot-meta{font-family:var(--tech);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-top:14px}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* multi-device: prevent iOS zoom-on-focus, comfortable tap targets */
@media(max-width:640px){
  .ctrl input[type=number],.ctrl select,.ctrl input[type=text]{font-size:16px;width:104px}
  .ctrl select{width:auto}
  .seg button{padding:11px 12px}
  .faq summary{padding-block:20px}
}
@media(max-width:520px){.wrap{padding-inline:20px}.ro-total .score{font-size:3.4rem}
  .field{flex-wrap:wrap}.related a{padding:14px 13px}}