/* home.css — Shingan, the merged decision page. Paper, ink, thread, guard. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/space-grotesk-latin.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/assets/fonts/inter-latin.woff2') format('woff2');}

:root{
  --paper:#F7F5F0; --paper2:#FBF9F5; --card:#FFFFFF; --ink:#0E1626; --ink2:#344054;
  --muted:#5F6C7E; --faint:#5F6C7E; --line:rgba(14,22,38,.12); --line2:rgba(14,22,38,.2);
  --indigo:#3B4CCA; --indigo2:#5B6BE8; --teal:#0E7C86; --teal2:#12B5A5; --tealsoft:#E7F3F1;
  --coral:#E8452A; --coral2:#FF5A36; --lime:#C6F24E; --sky:#EEF2FF;
  --display:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --body:'Inter',ui-sans-serif,system-ui,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --r:18px; --r2:26px;
  --shadow:0 1px 2px rgba(14,22,38,.05),0 22px 60px rgba(14,22,38,.09);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,select,input{font-family:inherit}
::selection{background:var(--lime);color:var(--ink)}
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:8px}
.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}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:0 0 10px 0}
.skip:focus{left:0}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.03em;margin:0;line-height:1.08}
p{margin:0}
.eyebrow{font-family:var(--display);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--teal);font-weight:600}
.muted{color:var(--muted)}

/* ------------------------------------------------------------------ nav */
.site-nav{position:sticky;top:0;z-index:50;background:rgba(247,245,240,.9);backdrop-filter:blur(16px) saturate(1.2);border-bottom:1px solid var(--line)}
.navin{max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:26px;padding:15px 28px;position:relative}
.brand{display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;letter-spacing:.16em;font-size:.8rem;color:var(--ink)}
.mark{width:26px;height:26px;color:var(--indigo);flex:0 0 auto}
.navlinks{display:flex;align-items:center;gap:24px}
.navlinks a{font-size:.88rem;color:var(--ink2);font-weight:500}
.navlinks a:hover{color:var(--indigo)}
.navlinks a.on{color:var(--ink)}
.navlinks a.on::after{content:"";display:block;height:2px;background:var(--coral);border-radius:2px;margin-top:2px}
.navright{margin-left:auto;display:flex;align-items:center;gap:14px}
.quiet{font-size:.88rem;color:var(--ink2)}
.quiet:hover{color:var(--indigo)}
.menubtn{display:none;margin-left:auto;background:none;border:1px solid var(--line2);border-radius:9px;padding:7px 12px;color:var(--ink);font-size:.8rem;cursor:pointer}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:12px 19px;
  font-weight:600;font-size:.92rem;border:1px solid var(--line2);background:transparent;color:var(--ink);cursor:pointer;
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,background .14s ease}
.btn:hover{transform:translateY(-1px)}
.btn.ink{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.ink:hover{box-shadow:0 10px 24px rgba(14,22,38,.22);background:#1A2438}
.btn.teal{background:var(--teal);border-color:var(--teal);color:#fff}
.btn.teal:hover{box-shadow:0 10px 24px rgba(14,124,134,.26);background:#0B6B74}
.btn.line{background:var(--card);border-color:var(--line2)}
.btn.line:hover{border-color:var(--ink)}
.btn.sm{padding:8px 13px;font-size:.82rem;border-radius:10px}
.textlink{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:.9rem;color:var(--ink)}
.textlink span{color:var(--coral);transition:transform .15s}
.textlink:hover span{transform:translateX(3px)}
.textlink.small{font-size:.8rem}
.textlink.small span{font-size:.9rem}

/* ----------------------------------------------------------------- hero */
.hero{position:relative;isolation:isolate;max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.04fr .96fr;gap:40px;align-items:center;padding:76px 28px 54px}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(14,22,38,.12) 1px,transparent 1px);background-size:26px 26px;opacity:.22;mask-image:radial-gradient(60% 60% at 30% 20%,#000,transparent 75%)}
.kicker{display:inline-flex;align-items:center;gap:9px;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600}
.kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--teal2);box-shadow:0 0 0 4px rgba(18,181,165,.14)}
.hero h1{font-size:clamp(3rem,6.2vw,6rem);font-weight:600;letter-spacing:-.055em;line-height:.94;margin:18px 0 24px}
.hero h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;
  background:linear-gradient(180deg,transparent 63%,var(--lime) 63%);padding:0 .05em}
.lead{max-width:42ch;color:var(--ink2);font-size:1.06rem;line-height:1.65}
.decision{display:inline-flex;flex-wrap:wrap;gap:3px;background:#EFEDE7;border:1px solid var(--line);border-radius:13px;padding:4px;margin:28px 0 18px}
.decision button{border:0;background:transparent;color:var(--muted);font-size:.82rem;font-weight:600;padding:8px 12px;border-radius:9px;cursor:pointer;transition:background .15s,color .15s}
.decision button:hover{color:var(--ink)}
.decision button[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:0 1px 2px rgba(14,22,38,.2)}
.hero-cta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.micro{margin-top:14px;font-size:.78rem;color:var(--muted);max-width:48ch}

/* hero art */
.hero-art{position:relative;min-height:560px}
.thread{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.thread .draw{stroke-dasharray:900;stroke-dashoffset:900;animation:draw 2.6s cubic-bezier(.2,.7,.2,1) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.thread .nodes circle{opacity:0;animation:pop .5s ease forwards}
.thread .nodes circle:nth-child(1){animation-delay:.6s}.thread .nodes circle:nth-child(2){animation-delay:1s}
.thread .nodes circle:nth-child(3){animation-delay:1.4s}.thread .nodes circle:nth-child(4){animation-delay:1.8s}
@keyframes pop{to{opacity:1}}
.float-card{position:absolute;z-index:2;border-radius:16px;padding:16px 18px;box-shadow:var(--shadow);font-size:.86rem}
.path-card{top:6%;left:0;width:min(310px,74%);background:var(--card);border:1px solid var(--line);transform:rotate(-2deg)}
.guard-card{bottom:9%;right:0;width:min(300px,72%);background:var(--ink);color:var(--paper);border:1px solid rgba(255,255,255,.12);transform:rotate(1.4deg)}
.fc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.fc-k{font-family:var(--display);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.guard-card .fc-k{color:rgba(247,245,240,.6)}
.fc-tag{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--coral);border:1px solid rgba(232,69,42,.3);border-radius:999px;padding:2px 7px;background:rgba(232,69,42,.06)}
.guard-card .fc-tag{color:var(--teal2);border-color:rgba(18,181,165,.4);background:rgba(18,181,165,.1)}
.float-card b{font-family:var(--display);font-size:1.02rem;display:block}
.float-card p{color:var(--muted);font-size:.8rem;margin:2px 0 10px}
.guard-card p{color:rgba(247,245,240,.66)}
.fc-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}
.guard-card .fc-row{border-color:rgba(255,255,255,.12);color:rgba(247,245,240,.68)}
.fc-row b{font-size:.78rem;color:var(--ink)}
.guard-card .fc-row b{color:var(--paper)}
.fc-row.small{font-size:.72rem}
.fc-bar{height:4px;border-radius:4px;background:rgba(14,22,38,.08);overflow:hidden;margin:8px 0 4px}
.fc-bar i{display:block;height:100%;background:var(--indigo)}
.warn{color:var(--coral2)!important}
.ring-wrap{display:flex;align-items:center;gap:12px;padding:6px 0 10px}
.score-ring{width:64px;height:64px;flex:0 0 auto}
.ring-wrap b{display:block;font-size:.92rem}
.ring-wrap p{font-size:.72rem;margin:1px 0 0}
.loop-label{position:absolute;bottom:2%;left:8%;z-index:2;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
body[data-track="earn"] .guard-card{opacity:.55;transform:rotate(1.4deg) scale(.97)}
body[data-track="guard"] .path-card{opacity:.55;transform:rotate(-2deg) scale(.97)}
body[data-track="guard"] .hero h1 em{background:linear-gradient(180deg,transparent 63%,rgba(18,181,165,.3) 63%)}

/* --------------------------------------------------------------- qnav */
.qnav{position:sticky;top:63px;z-index:40;display:flex;gap:10px;overflow-x:auto;padding:10px max(28px,calc((100vw - var(--max))/2 + 28px));background:rgba(247,245,240,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);scrollbar-width:none}
.qnav::-webkit-scrollbar{display:none}
.qnav a{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:.76rem;font-weight:600;color:var(--muted);padding:5px 10px;border-radius:8px}
.qnav a b{font-family:var(--display);font-size:.68rem;color:var(--coral);letter-spacing:.06em}
.qnav a:hover{color:var(--ink);background:rgba(14,22,38,.04)}
.qnav a.on{color:var(--ink);background:var(--card);border:1px solid var(--line)}

/* ------------------------------------------------------------ sections */
.qsection{padding:86px 28px;position:relative;scroll-margin-top:96px}
.history,.learnpromo,.closing{scroll-margin-top:96px}
.qsection > *{max-width:var(--max);margin-left:auto;margin-right:auto}
.qsection.alt{background:var(--paper2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.qsection.ink{background:var(--ink);color:var(--paper);border:0}
.qhead{display:grid;grid-template-columns:74px 1fr;gap:18px;align-items:start;margin-bottom:42px}
.qnum{font-family:var(--display);font-size:.86rem;font-weight:700;color:var(--coral);border:1px solid rgba(232,69,42,.28);background:rgba(232,69,42,.05);border-radius:9px;padding:5px 8px;width:max-content;letter-spacing:.04em}
.qhead h2{font-size:clamp(2.1rem,4vw,3.3rem);font-weight:600;letter-spacing:-.045em;margin:0 0 12px}
.qsub{max-width:70ch;color:var(--muted);font-size:1rem}
.qhead.light h2{color:var(--paper)}
.qhead.light .qsub{color:rgba(247,245,240,.68)}
.qhead.light .qnum{color:var(--coral2);border-color:rgba(255,90,54,.4);background:rgba(255,90,54,.08)}

/* -------------------------------------------------------------- problem */
.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.pbl{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:28px;box-shadow:0 1px 2px rgba(14,22,38,.04)}
.pbl-k{font-family:var(--display);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--coral)}
.pbl-k.guard{color:var(--teal)}
.pbl h3{font-size:1.45rem;margin:10px 0 8px;letter-spacing:-.02em}
.pbl p{color:var(--muted);font-size:.92rem}
.optionstack{display:grid;gap:7px;margin:20px 0 18px}
.opt{border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:.82rem;color:var(--muted);background:var(--paper2)}
.opt.crossed{text-decoration:line-through;opacity:.6}
.opt.picked{background:var(--ink);border-color:var(--ink);color:var(--paper);text-decoration:none;opacity:1;font-weight:600;transform:rotate(-1deg)}
.wallet-demo{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:20px 0 18px;background:var(--paper2)}
.wd-top{display:flex;justify-content:space-between;font-size:.74rem;color:var(--muted);padding-bottom:8px;border-bottom:1px solid var(--line)}
.wd-addr{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink2)}
.wd-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;font-size:.8rem;color:var(--muted)}
.wd-row b{color:var(--ink);font-weight:600}
.wd-alert{margin-top:8px;background:rgba(232,69,42,.07);border:1px solid rgba(232,69,42,.28);border-radius:9px;padding:8px 10px;font-size:.76rem;color:var(--coral)}
.loop{display:flex;gap:18px;align-items:baseline;margin-top:18px;background:var(--tealsoft);border:1px solid rgba(14,124,134,.18);border-radius:16px;padding:18px 22px}
.loop-k{font-family:var(--display);font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);flex:0 0 auto}
.loop p{color:var(--ink2);font-size:.94rem}

/* ---------------------------------------------------------------- demos */
.demo-shell{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);box-shadow:var(--shadow);overflow:hidden}
.demo-tabs{display:flex;gap:4px;padding:10px;background:var(--paper2);border-bottom:1px solid var(--line)}
.demo-tabs button{border:0;background:transparent;padding:9px 14px;border-radius:9px;font-size:.84rem;font-weight:600;color:var(--muted);cursor:pointer}
.demo-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.demo-panel{padding:26px 26px 22px}
.demo-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.demo-badge{display:inline-block;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--coral);border:1px solid rgba(232,69,42,.3);background:rgba(232,69,42,.05);border-radius:999px;padding:3px 8px;font-weight:700}
.demo-note{font-size:.78rem;color:var(--muted)}
.demo-form{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:end}
.demo-form label{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:grid;gap:5px}
.demo-form select{width:100%;background:var(--paper2);border:1px solid var(--line2);border-radius:10px;padding:10px 11px;font-size:.86rem;color:var(--ink)}
.demo-form .btn{white-space:nowrap}
.demo-result{margin-top:20px;min-height:150px;border-top:1px solid var(--line);padding-top:18px}
.demo-result h3{font-size:1.35rem;margin-bottom:4px}
.demo-result .why{color:var(--muted);font-size:.88rem;max-width:78ch}
.path-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}
.path-meta div{background:var(--paper2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.path-meta small{display:block;font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.path-meta b{font-size:.84rem}
.path-steps{display:grid;gap:6px;margin:12px 0}
.path-step{display:flex;gap:10px;align-items:flex-start;font-size:.84rem;color:var(--ink2)}
.path-step i{font-family:var(--display);font-style:normal;font-size:.68rem;font-weight:700;color:var(--indigo);background:var(--sky);border:1px solid rgba(59,76,202,.2);border-radius:6px;padding:2px 5px;flex:0 0 auto}
.cand-wrap{margin-top:14px;overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.cand{width:100%;border-collapse:collapse;font-size:.78rem;min-width:580px}
.cand th,.cand td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--line)}
.cand th:first-child,.cand td:first-child{text-align:left}
.cand thead th{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--paper2)}
.cand tr.win td{background:rgba(198,242,78,.18);font-weight:600}
.cand tr:last-child td{border-bottom:0}
.scanbar{display:flex;gap:8px;margin-bottom:14px}
.scanbar input{flex:1;min-width:0;background:var(--paper2);border:1px solid var(--line2);border-radius:10px;padding:11px 12px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.82rem;color:var(--ink)}
.scan-summary{display:flex;gap:18px;align-items:center;flex-wrap:wrap;background:var(--paper2);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px}
.scan-score{font-family:var(--display);font-size:2.6rem;font-weight:700;line-height:1}
.scan-score small{font-size:.8rem;color:var(--muted);font-weight:500}
.scan-grade b{display:block;font-size:.95rem}
.scan-grade span{font-size:.78rem;color:var(--muted)}
.approvals{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.approvals table{width:100%;border-collapse:collapse;font-size:.78rem;min-width:560px}
.approvals th,.approvals td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--line)}
.approvals thead th{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--paper2)}
.approvals tr:last-child td{border-bottom:0}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.76rem}
.demo-foot{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px 26px;background:var(--paper2);border-top:1px solid var(--line);font-size:.76rem;color:var(--muted)}
.demo-foot span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--teal2);margin-right:7px;vertical-align:1px}
.whatgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.what{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
.what h3{font-size:1rem;margin-bottom:10px}
.what ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.what li{font-size:.82rem;color:var(--muted);padding-left:14px;position:relative}
.what li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:1px;background:var(--coral)}
.what:nth-child(2) li::before{background:var(--teal2)}
.what:nth-child(3) li::before{background:var(--indigo)}

/* ------------------------------------------------------------- incident */
.incident-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.incident-tabs button{border:1px solid rgba(247,245,240,.2);background:transparent;color:rgba(247,245,240,.7);padding:8px 13px;border-radius:999px;font-size:.8rem;font-weight:600;cursor:pointer}
.incident-tabs button[aria-selected="true"]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.incident-body{display:grid;grid-template-columns:1.05fr .95fr;gap:18px}
.chat{background:#131E30;border:1px solid rgba(247,245,240,.12);border-radius:18px;padding:18px;display:grid;gap:12px;align-content:start;min-height:320px}
.bubble{background:rgba(247,245,240,.06);border:1px solid rgba(247,245,240,.12);border-radius:14px;padding:13px 15px;max-width:94%}
.bubble.out{background:rgba(59,76,202,.16);border-color:rgba(91,107,232,.35);justify-self:end}
.bubble .bt{display:flex;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:rgba(247,245,240,.55);margin-bottom:7px}
.sev{display:inline-block;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:2px 7px;font-weight:700;border:1px solid}
.sev.crit{color:#FF8A73;border-color:rgba(255,90,54,.5);background:rgba(255,90,54,.12)}
.sev.high{color:#FFC46B;border-color:rgba(245,166,35,.45);background:rgba(245,166,35,.1)}
.sev.med{color:#9CC7FF;border-color:rgba(91,140,255,.4);background:rgba(91,140,255,.1)}
.sev.info{color:#9FE3D3;border-color:rgba(18,181,165,.4);background:rgba(18,181,165,.1)}
.bubble b{color:var(--paper);font-size:.92rem;display:block;margin-bottom:5px}
.bubble .lines{display:grid;gap:3px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.74rem;color:rgba(247,245,240,.72)}
.bubble p{font-size:.8rem;color:rgba(247,245,240,.7);margin-top:6px}
.bubble .actions{display:flex;gap:6px;margin-top:9px}
.bubble .actions span{border:1px solid rgba(247,245,240,.22);border-radius:7px;padding:3px 9px;font-size:.68rem;color:rgba(247,245,240,.78)}
.plan{display:grid;gap:10px;align-content:start}
.plan-card{background:rgba(247,245,240,.05);border:1px solid rgba(247,245,240,.12);border-radius:14px;padding:15px 17px}
.plan-card h3{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal2);margin-bottom:8px}
.plan-card p,.plan-card li{font-size:.84rem;color:rgba(247,245,240,.74)}
.plan-card ul{margin:0;padding-left:16px;display:grid;gap:5px}
.incident-foot{margin-top:14px;font-size:.76rem;color:rgba(247,245,240,.55)}
.incident-foot a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------- trust */
.trust-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.trust-tabs button{border:1px solid var(--line);background:var(--card);color:var(--muted);padding:8px 13px;border-radius:999px;font-size:.8rem;font-weight:600;cursor:pointer}
.trust-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.trust-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:26px;box-shadow:0 1px 2px rgba(14,22,38,.04)}
.calc{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start}
.calc-controls{display:grid;gap:10px}
.calc-controls label{display:flex;align-items:center;gap:10px;font-size:.8rem;color:var(--ink2)}
.calc-controls input[type=range]{flex:1;accent-color:var(--indigo)}
.calc-controls output{font-family:var(--display);font-weight:700;font-size:.82rem;min-width:24px;text-align:right}
.calc-out{background:var(--paper2);border:1px solid var(--line);border-radius:16px;padding:18px}
.scorebox{display:flex;align-items:baseline;gap:12px;margin-bottom:10px}
#h-score{font-family:var(--display);font-size:3.4rem;font-weight:700;line-height:1;letter-spacing:-.04em}
#h-grade{font-family:var(--display);font-size:1rem;font-weight:700;color:var(--teal);border:1px solid rgba(14,124,134,.3);border-radius:8px;padding:3px 8px}
.deductions{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:.78rem;color:var(--muted)}
.deductions b{color:var(--coral)}
.formula{margin-top:16px;font-size:.8rem;color:var(--muted);line-height:1.7;border-top:1px solid var(--line);padding-top:14px}
.limit{margin-top:10px;font-size:.78rem;color:var(--muted)}
.limit a{color:var(--indigo);text-decoration:underline;text-underline-offset:3px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px}
.rules{width:100%;border-collapse:collapse;font-size:.8rem;min-width:560px}
.rules th,.rules td{padding:9px 11px;text-align:left;border-bottom:1px solid var(--line)}
.rules thead th{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--paper2)}
.rules tr:last-child td{border-bottom:0}
.rules tr.win td{background:rgba(198,242,78,.18)}
.datagrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.datagrid h3{font-size:1rem;margin-bottom:8px}
.datagrid ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:.84rem;color:var(--muted)}
.record{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}
.record-card{background:var(--paper2);border:1px solid var(--line);border-radius:16px;padding:20px}
.record-card p{font-size:.86rem;color:var(--muted);margin:8px 0 10px}
.record-links{display:grid;gap:7px;margin-top:8px}
.record-links a{display:flex;justify-content:space-between;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:.82rem;font-weight:600}
.record-links a span{font-weight:400;color:var(--muted);font-size:.74rem;text-align:right}
.record-links a:hover{border-color:var(--indigo)}

/* ------------------------------------------------------------------ try */
.trygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.trycard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:24px;transition:transform .16s,border-color .16s,box-shadow .16s}
.trycard:hover{transform:translateY(-3px);border-color:var(--indigo);box-shadow:var(--shadow)}
.tryk{font-family:var(--display);font-size:.64rem;letter-spacing:.18em;text-transform:uppercase;color:var(--coral)}
.tryk.guard{color:var(--teal)}
.trycard h3{font-size:1.3rem;margin:10px 0 8px}
.trycard p{font-size:.86rem;color:var(--muted);flex:1}
.trymeta{display:flex;gap:10px;margin:14px 0;font-size:.72rem;color:var(--muted)}
.trymeta span{border:1px solid var(--line);border-radius:999px;padding:3px 9px}
.trygo{font-weight:700;font-size:.86rem;color:var(--ink)}
.trygo i{font-style:normal;color:var(--coral);transition:transform .15s}
.trycard:hover .trygo i{display:inline-block;transform:translateX(3px)}
.trynote{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px;padding:18px 22px;background:var(--card);border:1px solid var(--line);border-radius:16px;font-size:.86rem;color:var(--muted)}
.trynote b{color:var(--ink)}

/* -------------------------------------------------------------- history */
.history{max-width:var(--max);margin:0 auto;padding:78px 28px;border-top:1px solid var(--line)}
.history-head{display:flex;justify-content:space-between;align-items:flex-end;gap:18px;flex-wrap:wrap;margin-bottom:28px}
.history-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-top:6px}
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:14px;position:relative}
.timeline::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--line2)}
.timeline li{position:relative;padding-top:22px;display:grid;gap:4px;align-content:start}
.timeline li::before{content:"";position:absolute;left:0;top:2px;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2px solid var(--indigo)}
.timeline li:last-child::before{background:var(--coral);border-color:var(--coral)}
.timeline time{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.68rem;color:var(--muted)}
.timeline b{font-size:.9rem}
.timeline span{font-size:.78rem;color:var(--muted)}

/* ------------------------------------------------------------ learnpromo */
.learnpromo{max-width:var(--max);margin:0 auto 20px;padding:34px;background:var(--tealsoft);border:1px solid rgba(14,124,134,.18);border-radius:var(--r2);display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}
.learn-copy h2{font-size:clamp(1.8rem,3vw,2.5rem);margin:8px 0 10px}
.learn-copy p{color:var(--ink2);font-size:.92rem;margin-bottom:16px;max-width:48ch}
.modules{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.modules li{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.72);border:1px solid rgba(14,124,134,.16);border-radius:11px;padding:10px 13px;font-size:.86rem;font-weight:600}
.modules li span{font-family:var(--display);font-size:.68rem;color:var(--teal);border:1px solid rgba(14,124,134,.3);border-radius:6px;padding:2px 5px}

/* ------------------------------------------------------------------ faq */
.faqgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.faqgrid details{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:14px 16px}
.faqgrid summary{cursor:pointer;font-weight:600;font-size:.9rem;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faqgrid summary::-webkit-details-marker{display:none}
.faqgrid summary::after{content:"+";color:var(--coral);font-weight:700}
.faqgrid details[open] summary::after{content:"–"}
.faqgrid p{color:var(--muted);font-size:.84rem;margin-top:10px}

/* --------------------------------------------------------------- closing */
.closing{max-width:var(--max);margin:0 auto;padding:80px 28px 90px;display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;border-top:1px solid var(--line)}
.closing h2{font-size:clamp(2.2rem,4.4vw,3.6rem);margin:8px 0 12px}
.closing h2 em{font-family:var(--serif);font-style:italic;font-weight:400;background:linear-gradient(180deg,transparent 63%,var(--lime) 63%)}
.closing p{color:var(--muted);margin-bottom:20px}
.closing-loop{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.clstep{display:grid;justify-items:center;gap:6px;font-size:.64rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;text-align:center}
.clstep b{font-family:var(--display);font-weight:600;color:var(--ink);letter-spacing:.02em}
.cl-dot{width:12px;height:12px;border-radius:50%}
.cl-dot.earn{background:var(--indigo)}.cl-dot.pay{background:var(--coral)}.cl-dot.guard{background:var(--teal2)}
.cl-line{height:1px;background:var(--line2)}

/* ---------------------------------------------------------------- footer */
.site-foot{background:var(--ink);color:rgba(247,245,240,.72);padding:56px 28px 24px}
.footin{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:26px}
.foot-brand .brand{color:var(--paper);margin-bottom:12px}
.foot-brand .mark{color:var(--teal2)}
.foot-brand p{font-size:.84rem;max-width:30ch;margin-bottom:12px}
.foot-brand .fine{font-size:.7rem;color:rgba(247,245,240,.45);max-width:36ch}
.site-foot h4{font-family:var(--display);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(247,245,240,.45);margin-bottom:10px}
.site-foot a{display:block;font-size:.84rem;color:rgba(247,245,240,.72);margin-bottom:7px}
.site-foot a:hover{color:var(--paper)}
.footbase{max-width:var(--max);margin:34px auto 0;padding-top:18px;border-top:1px solid rgba(247,245,240,.12);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:.72rem;color:rgba(247,245,240,.45)}
.statusdot{display:inline-flex;align-items:center;gap:7px}
.statusdot i{width:7px;height:7px;border-radius:50%;background:var(--teal2);display:inline-block}

/* ---------------------------------------------------------------- motion */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .thread .draw,.thread .nodes circle{animation:none!important;stroke-dashoffset:0!important;opacity:1!important}
  .js .reveal{opacity:1!important;transform:none!important}
  *{scroll-behavior:auto!important}
}

/* ------------------------------------------------------------ responsive */
@media (max-width:1080px){
  .hero{grid-template-columns:1fr;padding-top:54px;gap:20px}
  .hero-art{min-height:520px;max-width:640px;width:100%;margin:0 auto}
  .navlinks{gap:18px}
  .demo-form{grid-template-columns:1fr 1fr}
  .demo-form .btn{grid-column:1/-1}
  .whatgrid{grid-template-columns:1fr}
  .incident-body{grid-template-columns:1fr}
  .calc{grid-template-columns:1fr}
  .learnpromo{grid-template-columns:1fr}
  .closing{grid-template-columns:1fr}
  .footin{grid-template-columns:1.5fr 1fr 1fr}
}
@media (max-width:900px){
  .navlinks{display:none}
  .navlinks.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:var(--paper);border-bottom:1px solid var(--line);padding:10px 20px 16px;z-index:60}
  .navlinks.open a{padding:9px 8px;border-radius:8px}
  .menubtn{display:block}
  .navright .quiet{display:none}
  .qhead{grid-template-columns:1fr;gap:10px}
  .problem-grid{grid-template-columns:1fr}
  .trygrid{grid-template-columns:1fr}
  .trynote{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr 1fr}
  .timeline::before{display:none}
  .faqgrid{grid-template-columns:1fr}
  .record{grid-template-columns:1fr}
  .datagrid{grid-template-columns:1fr}
  .demo-foot{grid-template-columns:1fr}
  .footin{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16px}
  .navin{padding:12px 18px;gap:10px}
  .navright .btn{display:none}
  .qnav{top:57px;padding:8px 18px}
  .qsection{padding:62px 18px}
  .hero{padding:42px 18px 34px}
  .hero h1{font-size:clamp(2.6rem,11vw,3.6rem)}
  .hero-art{min-height:470px}
  .path-card{width:74%;left:0;top:2%}
  .guard-card{width:76%;right:0;bottom:4%}
  .loop-label{display:none}
  .demo-panel{padding:20px 18px}
  .demo-head{gap:8px}
  .demo-form{grid-template-columns:1fr 1fr}
  .path-meta{grid-template-columns:1fr}
  .what{padding:18px}
  .trust-panel{padding:20px 16px}
  .calc-controls label{flex-wrap:wrap}
  .calc-controls input[type=range]{min-width:150px}
  .learnpromo{padding:24px 18px;margin-left:18px;margin-right:18px}
  .history{padding:60px 18px}
  .timeline{grid-template-columns:1fr}
  .closing{padding:60px 18px}
  .site-foot{padding:44px 18px 20px}
  .footin{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
  .record-links a{flex-direction:column;gap:2px}
  .record-links a span{text-align:left}
}
@media (max-width:460px){
  .decision{display:grid;grid-template-columns:1fr;width:100%}
  .decision button{width:100%;text-align:left;padding:9px 12px}
  .hero-cta .btn{width:100%}
  .demo-form{grid-template-columns:1fr}
  .trycard{padding:20px}
  .footin{grid-template-columns:1fr}
  .closing-loop{padding:16px}
}