/* Countersign marketing site. Vault-dark by default, light theme supported. */
:root{
  --bg:#0A0F1C; --bg-2:#0D1424; --surface:#121A2C; --surface-2:#18223A; --surface-3:#1E2A46;
  --text:#E8ECF4; --muted:#8C96AE; --faint:#8892AB;
  --line:rgba(140,150,174,.16); --line-2:rgba(140,150,174,.30);
  --primary:#F26A6E; --primary-fill:#C8353B; --primary-ink:#fff; --primary-soft:rgba(229,72,77,.14);
  --accent:#D9B45A; --accent-ink:#1A1405; --accent-soft:rgba(217,180,90,.14);
  --ok:#3DD68C; --ok-soft:rgba(61,214,140,.14);
  --warn:#F0A43A; --warn-soft:rgba(240,164,58,.14);
  --info:#6EA8FE; --info-soft:rgba(110,168,254,.14);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -20px rgba(0,0,0,.6);
  --radius:14px; --radius-sm:9px;
  --head:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  --body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --grid-line:rgba(140,150,174,.07);
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#F6F4EF; --bg-2:#EFECE4; --surface:#FFFFFF; --surface-2:#F3F1EA; --surface-3:#E9E5DA;
  --text:#121829; --muted:#535C74; --faint:#5F677D;
  --line:rgba(18,24,41,.10); --line-2:rgba(18,24,41,.20);
  --primary:#B02C32; --primary-fill:#B02C32; --primary-soft:rgba(176,44,50,.10);
  --accent:#7F5E17; --accent-ink:#fff; --accent-soft:rgba(127,94,23,.12);
  --ok:#0E6E40; --ok-soft:rgba(14,110,64,.10);
  --warn:#875007; --warn-soft:rgba(135,80,7,.10);
  --info:#2E62C9; --info-soft:rgba(46,98,201,.10);
  --shadow:0 18px 40px -26px rgba(18,24,41,.35);
  --grid-line:rgba(18,24,41,.05);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--body);overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--text)}
h1,h2,h3,h4{font-family:var(--head);line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.2vw,3.7rem);font-weight:700}
h2{font-size:clamp(1.6rem,3.4vw,2.4rem);font-weight:700}
h3{font-size:1.18rem;font-weight:600}
h4{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:600}
p{margin:0 0 1em}
code,.mono{font-family:var(--mono);font-size:.88em}
code{background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:.05em .35em}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 16px}
@media(min-width:720px){.wrap{padding:0 28px}}
.muted{color:var(--muted)} .small{font-size:.875rem} .tiny{font-size:.78rem}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--accent-ink);padding:8px 12px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-family:var(--head);font-weight:700;font-size:1.12rem;letter-spacing:-.01em}
.brand svg{flex:none}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav-links a:not(.btn){color:var(--muted);text-decoration:none;font-size:.93rem;padding:8px 11px;border-radius:8px}
.nav-links a:not(.btn):hover,.nav-links a[aria-current="page"]:not(.btn){color:var(--text);background:var(--surface)}
.nav-cta{margin-left:8px}
.menu-btn,.theme-btn{background:none;border:1px solid var(--line-2);color:var(--text);border-radius:9px;width:38px;height:38px;display:inline-grid;place-items:center;cursor:pointer}
.theme-btn{margin-left:6px}
.theme-btn::before{content:"";width:16px;height:16px;border-radius:50%;background:linear-gradient(90deg,var(--text) 50%,transparent 50%);border:1.6px solid var(--text)}
.menu-btn{display:none;margin-left:auto}
@media(max-width:900px){
  .menu-btn{display:inline-grid}
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--bg);border-bottom:1px solid var(--line);padding:10px 16px 16px;gap:2px}
  .nav-links.open{display:flex}
  .nav-cta{margin:8px 0 0}
  .theme-btn{margin:8px 0 0;width:100%}
}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 .95rem/1 var(--body);padding:13px 18px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);color:var(--text);text-decoration:none;cursor:pointer;transition:transform .12s,background .15s,border-color .15s}
.btn:hover{border-color:var(--muted);color:var(--text);transform:translateY(-1px)}
.btn-primary{background:var(--primary-fill);border-color:var(--primary-fill);color:var(--primary-ink)}
.btn-primary:hover{background:color-mix(in srgb,var(--primary-fill) 85%,#000);border-color:transparent;color:#fff}
.btn-gold{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn-gold:hover{color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 88%,#fff)}
.btn-ghost{background:transparent}
.btn-sm{padding:9px 13px;font-size:.86rem;border-radius:9px}

/* sections */
section{padding:84px 0}
.section-tight{padding:56px 0}
.eyebrow{font:600 .74rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:14px;display:inline-flex;align-items:center;gap:8px}
.eyebrow.red{color:var(--primary)}
.lede{font-size:clamp(1.05rem,1.7vw,1.22rem);color:var(--muted);max-width:62ch}
.section-head{max-width:760px;margin-bottom:40px}
.alt{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);min-width:0}
.card h3{margin-top:0}
.card.flat{box-shadow:none}
.icon-tile{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);margin-bottom:16px}
.icon-tile.red{background:var(--primary-soft);color:var(--primary)}
.icon-tile.ok{background:var(--ok-soft);color:var(--ok)}
.proj{display:inline-block;font:600 .66rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--warn);background:var(--warn-soft);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);padding:4px 7px;border-radius:999px;vertical-align:middle}
.tag{display:inline-flex;align-items:center;gap:6px;font:600 .72rem/1 var(--mono);padding:5px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--muted)}
.tag.red{color:var(--primary);background:var(--primary-soft);border-color:transparent}
.tag.gold{color:var(--accent);background:var(--accent-soft);border-color:transparent}
.tag.ok{color:var(--ok);background:var(--ok-soft);border-color:transparent}
.note{border-left:3px solid var(--accent);background:var(--accent-soft);padding:14px 16px;border-radius:0 10px 10px 0;font-size:.92rem}
.note.red{border-color:var(--primary);background:var(--primary-soft)}
.src{font-size:.78rem;color:var(--faint)} .src a{color:var(--muted)}

/* hero */
.hero{position:relative;padding:72px 0 64px;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at 70% 30%,#000 10%,transparent 70%);pointer-events:none}
.hero::after{content:"";position:absolute;width:620px;height:620px;right:-160px;top:-220px;background:radial-gradient(circle,rgba(229,72,77,.18),transparent 62%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr}}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero-meta{display:flex;flex-wrap:wrap;gap:18px;margin-top:28px;color:var(--muted);font-size:.84rem}
.hero-meta span{display:inline-flex;gap:8px;align-items:center}
.page-hero{padding:64px 0 36px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-hero::after{content:"";position:absolute;width:520px;height:520px;right:-180px;top:-260px;background:radial-gradient(circle,rgba(217,180,90,.14),transparent 62%);pointer-events:none}

/* terminal mock */
.term{background:#070B15;border:1px solid rgba(140,150,174,.22);border-radius:16px;box-shadow:0 30px 70px -30px rgba(0,0,0,.8);overflow:hidden;color:#DCE2EE;font:13px/1.55 var(--mono)}
.term-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid rgba(140,150,174,.16);background:#0C1220;color:#8C96AE;font-size:11.5px}
.term-bar i{width:9px;height:9px;border-radius:50%;background:#2A3350;display:inline-block}
.term-bar .live{margin-left:auto;color:#E5484D;display:inline-flex;align-items:center;gap:6px}
.term-bar .live::before{content:"";width:7px;height:7px;border-radius:50%;background:#E5484D;animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.25}}
.term-body{padding:14px 16px;min-height:300px}
.tl{margin:0 0 10px;white-space:pre-wrap;word-break:break-word}
.tl .who{display:inline-block;min-width:74px;font-weight:600}
.tl.atk .who{color:#E5484D} .tl.bot .who{color:#6EA8FE} .tl.judge .who{color:#D9B45A}
.tl.judge{border-left:2px solid #D9B45A;padding-left:10px;color:#C9CFDC}
.tl .ok{color:#3DD68C} .tl .bad{color:#E5484D}
.caret::after{content:"▍";color:#D9B45A;animation:pulse 1s infinite}

/* steps */
.steps{counter-reset:s;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.step{position:relative;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
.step::before{counter-increment:s;content:"0" counter(s);font:600 .8rem var(--mono);color:var(--accent);display:block;margin-bottom:12px}
.step h3{font-size:1.05rem}
.step p{color:var(--muted);font-size:.93rem;margin:0}

/* stats */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:14px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 18px;min-width:0}
.kpi .v{font:700 1.7rem/1.1 var(--head);letter-spacing:-.02em}
.kpi .l{color:var(--muted);font-size:.82rem;margin-top:6px}
.kpi .s{font-size:.72rem;color:var(--faint);margin-top:6px}
.kpi.red .v{color:var(--primary)} .kpi.gold .v{color:var(--accent)}

/* forms & tools */
.tool{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:var(--shadow)}
.tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:28px}
@media(max-width:860px){.tool-grid{grid-template-columns:1fr}}
.field{margin-bottom:18px}
.field label,.field .lbl{display:flex;justify-content:space-between;gap:12px;font-size:.88rem;font-weight:600;margin-bottom:8px}
.field label output,.field .lbl output{font-family:var(--mono);color:var(--accent);font-weight:600}
.field .hint{font-size:.78rem;color:var(--muted);margin-top:6px}
input[type=range]{width:100%;accent-color:var(--accent);height:28px}
select,input[type=text],input[type=number],input[type=email],input[type=url],textarea{width:100%;font:inherit;font-size:.93rem;color:var(--text);background:var(--bg);border:1px solid var(--line-2);border-radius:9px;padding:10px 12px}
textarea{min-height:90px;resize:vertical}
.seg{display:inline-flex;flex-wrap:wrap;background:var(--bg);border:1px solid var(--line-2);border-radius:11px;padding:4px;gap:4px}
.seg button{background:none;border:0;color:var(--muted);font:600 .86rem var(--body);padding:9px 14px;border-radius:8px;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface-3);color:var(--text);box-shadow:0 0 0 1px var(--line-2) inset}
.seg.scen button[data-s="bear"][aria-pressed="true"]{color:var(--primary)}
.seg.scen button[data-s="bull"][aria-pressed="true"]{color:var(--ok)}
.seg.scen button[data-s="base"][aria-pressed="true"]{color:var(--accent)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;padding:8px 0;cursor:pointer}
.check input{margin-top:4px;accent-color:var(--accent)}
.result-big{font:700 clamp(2.2rem,5vw,3.2rem)/1 var(--head);letter-spacing:-.03em}
.bar{height:10px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:999px;transition:width .3s}

/* CI visual */
.ci-track{position:relative;height:46px;margin:14px 0 4px;border-radius:10px;background:linear-gradient(90deg,var(--ok-soft),var(--warn-soft) 50%,var(--primary-soft));border:1px solid var(--line)}
.ci-band{position:absolute;top:9px;bottom:9px;background:color-mix(in srgb,var(--accent) 35%,transparent);border:1.5px solid var(--accent);border-radius:6px;transition:left .25s,width .25s}
.ci-pt{position:absolute;top:4px;bottom:4px;width:3px;background:var(--text);border-radius:2px;transform:translateX(-1px);transition:left .25s}
.ci-thr{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed var(--primary)}
.ci-axis{display:flex;justify-content:space-between;font:11px var(--mono);color:var(--faint)}

/* tables */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;margin:18px 0;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.88rem}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{font-weight:600;color:var(--muted);font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;background:var(--surface-2);white-space:nowrap}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:color-mix(in srgb,var(--surface-2) 60%,transparent)}

/* pricing */
.price-card{display:flex;flex-direction:column}
.price-card .price{font:700 1.9rem/1.1 var(--head);margin:6px 0 2px}
.price-card ul{padding-left:18px;color:var(--muted);font-size:.92rem;margin:12px 0 18px}
.price-card li{margin:5px 0}
.price-card .btn{margin-top:auto}
.price-card.featured{border-color:color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 30%,transparent),var(--shadow)}

/* faq */
details{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:10px}
summary{cursor:pointer;padding:16px 18px;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--mono);color:var(--accent);font-size:1.1rem}
details[open] summary::after{content:"–"}
details>div{padding:0 18px 16px;color:var(--muted)}

/* cta band */
.cta-band{background:radial-gradient(ellipse at 20% 0%,var(--primary-soft),transparent 60%),radial-gradient(ellipse at 90% 100%,var(--accent-soft),transparent 60%),var(--surface);border:1px solid var(--line-2);border-radius:22px;padding:44px 32px;text-align:center}
.cta-band p{color:var(--muted);max-width:60ch;margin:0 auto 22px}

/* doc (plan) */
.doc-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;align-items:start}
@media(max-width:980px){.doc-layout{grid-template-columns:1fr}.toc{position:static!important;max-height:none!important}}
.toc{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow:auto;font-size:.84rem;border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--surface)}
.toc a{display:block;color:var(--muted);text-decoration:none;padding:5px 8px;border-radius:6px;line-height:1.35}
.toc a.sub{padding-left:20px;font-size:.8rem}
.toc a:hover,.toc a.active{color:var(--text);background:var(--surface-2)}
.doc{min-width:0;max-width:880px}
.doc h2{margin-top:2.2em;padding-top:1.2em;border-top:1px solid var(--line);scroll-margin-top:80px}
.doc h3{margin-top:1.6em;scroll-margin-top:80px}
.doc p,.doc li{color:color-mix(in srgb,var(--text) 88%,var(--muted))}
.doc li{margin:6px 0}
.doc hr{display:none}
.doc blockquote{margin:18px 0;border-left:3px solid var(--warn);background:var(--warn-soft);padding:12px 16px;border-radius:0 10px 10px 0}
.doc blockquote p{margin:0}
.doc table{font-size:.83rem}
.doc a{word-break:break-word}
.chart-box{position:relative;height:280px;margin-top:12px}
.chart-box.tall{height:340px}
.legend{display:flex;flex-wrap:wrap;gap:14px;font-size:.8rem;color:var(--muted);margin-top:10px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:12px;height:3px;border-radius:2px;display:inline-block}
.progress{position:fixed;top:0;left:0;height:3px;background:var(--accent);z-index:60;width:0}

/* diagram */
.diagram{width:100%;height:auto;display:block}
.diagram text{font-family:var(--body);fill:var(--text)}
.diagram .m{fill:var(--muted);font-size:11px}

/* footer */
footer.site{border-top:1px solid var(--line);padding:48px 0 28px;margin-top:40px;background:var(--bg-2)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:420px){.foot-grid{grid-template-columns:1fr}}
.foot-grid a:not(.brand){display:block;color:var(--muted);text-decoration:none;font-size:.9rem;padding:3px 0}
.foot-grid a:not(.brand):hover{color:var(--text)}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:.8rem;color:var(--faint)}

@media print{
  .nav,footer.site,.toc,.no-print,.progress{display:none!important}
  body{background:#fff;color:#000}
  .doc-layout{display:block}
  .card,.table-wrap{box-shadow:none}
}