/* Normantic's public site. Same visual language as the application: a serif
   display face for headings, the teal stage palette from the traceability
   graph, and generous white space so the chain graphic carries the page. */
:root{
  --bg:#F1F3F1;
  --surface:#FFFFFF;
  --surface-sunken:#E9EDEA;
  --border:#D9E0DB;
  --text:#182420;
  --text-muted:#57655D;
  --line:#B7C2BC;
  --line-active:#0E7C74;
  --stage-1:#0B4E49; --stage-4:#29948A;
  --good:#2E7D32;
  --warn:#9A6A12;
  --shadow:0 1px 2px rgba(15,30,25,0.06), 0 6px 16px -10px rgba(15,30,25,0.16);
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"SFMono-Regular",Consolas,"Cascadia Mono",Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0F1512; --surface:#151F1B; --surface-sunken:#1B2621; --border:#2A3A34; --line:#3C4C45;
    --line-active:#3FD6C4; --stage-1:#12564F; --stage-4:#29A99C;
    --text:#E6EEE9; --text-muted:#9CAFA5; --good:#6FCF7A; --warn:#E3B156;
    --shadow:0 1px 2px rgba(0,0,0,0.35), 0 6px 16px -10px rgba(0,0,0,0.5);
    color-scheme:dark;
  }
}
*{box-sizing:border-box;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;text-wrap:balance;margin:0;}
p{margin:0;}
a{color:var(--line-active);}
a:focus-visible,.button:focus-visible{outline:2px solid var(--line-active);outline-offset:3px;border-radius:4px;}

.topbar{
  position:sticky;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;padding:14px 28px;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border-bottom:1px solid var(--border);backdrop-filter:blur(8px);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);}
.brand span{font-family:var(--serif);font-size:1.15rem;font-weight:600;}
.topbar nav{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
.topbar nav a{color:var(--text-muted);text-decoration:none;font-size:0.94rem;}
.topbar nav a:hover{color:var(--line-active);}
.topbar nav .cta{
  color:var(--surface);background:var(--line-active);border-radius:999px;
  padding:7px 16px;font-weight:600;
}
.topbar nav .cta:hover{filter:brightness(1.08);color:var(--surface);}
@media (max-width:620px){ .topbar nav a:not(.cta){display:none;} }

main{max-width:1080px;margin:0 auto;padding:0 28px;}
section{padding:76px 0;border-bottom:1px solid var(--border);}
section:last-of-type{border-bottom:0;}
h2{font-size:clamp(1.5rem,3vw,2rem);margin-bottom:28px;}

.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;padding-top:64px;}
@media (max-width:900px){ .hero{grid-template-columns:1fr;gap:36px;} }
.eyebrow{
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--line-active);margin-bottom:14px;
}
.hero h1{font-size:clamp(2rem,4.4vw,3rem);}
.lede{margin-top:20px;font-size:1.08rem;color:var(--text-muted);max-width:52ch;}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;}
.button{
  display:inline-block;padding:11px 22px;border-radius:8px;text-decoration:none;font-weight:600;
  background:var(--line-active);color:var(--surface);border:1px solid var(--line-active);
}
.button:hover{filter:brightness(1.08);}
.button-quiet{background:transparent;color:var(--line-active);border-color:var(--border);}
.button-quiet:hover{border-color:var(--line-active);filter:none;}

.chain{margin:0;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px;box-shadow:var(--shadow);}
.chain svg{width:100%;height:auto;display:block;}
.chain-edges path{fill:none;stroke:var(--line);stroke-width:2;}
.chain-nodes rect{fill:var(--surface-sunken);stroke:var(--border);stroke-width:1.5;}
.chain-nodes text{font-family:var(--mono);font-size:13px;fill:var(--text);}
.chain-nodes text.muted{font-size:11px;fill:var(--text-muted);}
.chain-scores circle{fill:var(--surface);stroke-width:2;}
.chain-scores text{font-family:var(--mono);font-size:11px;text-anchor:middle;}
.chain-scores .good circle{stroke:var(--good);} .chain-scores .good text{fill:var(--good);}
.chain-scores .weak circle{stroke:var(--warn);} .chain-scores .weak text{fill:var(--warn);}
figcaption{margin-top:14px;font-size:0.88rem;color:var(--text-muted);}

.steps ol{list-style:none;counter-reset:step;padding:0;margin:0;display:grid;gap:26px;}
/* The marker sits in the first column and spans both rows, so the heading and
   its paragraph stay together in the second column. */
.steps li{
  counter-increment:step;display:grid;
  grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;
  column-gap:20px;row-gap:6px;align-items:start;
}
.steps li::before{
  content:counter(step);font-family:var(--mono);font-size:0.85rem;
  grid-column:1;grid-row:1 / span 2;
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--line-active);color:var(--line-active);
}
.steps li h3{grid-column:2;grid-row:1;}
.steps li p{grid-column:2;grid-row:2;}
.steps h3{font-size:1.15rem;}
.steps p{color:var(--text-muted);max-width:66ch;}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;}
.feature-grid article{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:22px;}
.feature-grid h3{font-size:1.08rem;margin-bottom:8px;}
.feature-grid p{color:var(--text-muted);font-size:0.97rem;}

.audience p{color:var(--text-muted);max-width:70ch;font-size:1.03rem;}
.standards{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.standards span{
  font-family:var(--mono);font-size:0.76rem;letter-spacing:0.04em;
  padding:6px 12px;border-radius:999px;border:1px solid var(--border);color:var(--text-muted);
  background:var(--surface);
}

.closing{text-align:center;}
.closing p{margin:0 auto 26px;max-width:56ch;color:var(--text-muted);}

footer{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  max-width:1080px;margin:0 auto;padding:26px 28px 44px;
  color:var(--text-muted);font-size:0.9rem;border-top:1px solid var(--border);
}