:root{
  --paper:#EDF1EF;
  --paper-2:#E2E8E5;
  --ink:#14231F;
  --ink-2:#4F5E59;
  --rule:#C6D0CC;
  --accent:#2A45C9;
  --accent-ink:#FFFFFF;
  --accent-soft:#DCE2FA;
  --gap:#B7780C;
  --gap-soft:#F6E7C8;
  --ok:#2F7A55;
  --surface:#FFFFFF;
  color-scheme: light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0F1A17; --paper-2:#15231F; --ink:#E4EBE8; --ink-2:#9AAAA4; --rule:#2A3A35;
    --accent:#7F93F2; --accent-ink:#0F1A17; --accent-soft:#1F2A55;
    --gap:#E3AA45; --gap-soft:#3A2D12; --ok:#6CC39A; --surface:#172622; color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0F1A17; --paper-2:#15231F; --ink:#E4EBE8; --ink-2:#9AAAA4; --rule:#2A3A35;
  --accent:#7F93F2; --accent-ink:#0F1A17; --accent-soft:#1F2A55;
  --gap:#E3AA45; --gap-soft:#3A2D12; --ok:#6CC39A; --surface:#172622; color-scheme: dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  font-size:1.0625rem; line-height:1.55;
  font-feature-settings:"tnum" 1;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:4px}

.wrap{max-width:1180px; margin:0 auto; padding:0 clamp(20px,4vw,48px)}

/* nav */
.nav{display:flex; align-items:center; justify-content:space-between; padding:22px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:600; font-size:1.2rem; letter-spacing:-.01em; text-decoration:none}
.nav-links{display:flex; align-items:center; gap:28px; font-size:.95rem}
.nav-links a:not(.btn){text-decoration:none; color:var(--ink-2)}
.nav-links a:not(.btn):hover{color:var(--ink)}
@media (max-width:640px){ .nav-links a:not(.btn){display:none} }

.btn{
  display:inline-block; background:var(--accent); color:var(--accent-ink);
  padding:12px 20px; border-radius:6px; font-weight:600; text-decoration:none; font-size:.98rem;
}
.btn:hover{filter:brightness(1.08)}
.btn-quiet{background:transparent; color:var(--ink); padding:12px 4px; text-decoration:underline; text-underline-offset:4px; font-weight:500}

/* hero */
.hero{display:grid; grid-template-columns: 1fr 1.02fr; gap:clamp(32px,5vw,72px); align-items:center; padding:clamp(40px,7vw,96px) 0 clamp(48px,6vw,80px)}
@media (max-width:960px){ .hero{grid-template-columns:1fr} }
.for{color:var(--ink-2); font-size:.98rem; margin:0 0 18px}
h1{
  font-size:clamp(2.4rem,5.2vw,4.1rem); line-height:1.02; letter-spacing:-.03em;
  font-weight:600; margin:0 0 22px; max-width:14ch;
}
.promise{font-size:clamp(1.25rem,2vw,1.5rem); line-height:1.3; font-weight:500; margin:0 0 20px; max-width:30ch; letter-spacing:-.01em}
.explainer{color:var(--ink-2); max-width:52ch; margin:0 0 30px}
.cta-row{display:flex; gap:18px; align-items:center; flex-wrap:wrap}

/* trace visual */
.trace{
  background:var(--surface); border:1px solid var(--rule); border-radius:14px;
  padding:clamp(18px,2.4vw,28px);
}
.trace-cap{font-size:.9rem; color:var(--ink-2); margin:0 0 14px}
.record{
  border:1.5px solid var(--ink); border-radius:10px; padding:16px 18px;
  display:grid; grid-template-columns:1fr auto; gap:4px 16px; align-items:baseline;
}
.record .name{font-weight:600}
.record .val{font-weight:700; font-size:1.45rem; letter-spacing:-.02em}
.record .meta{grid-column:1 / -1; color:var(--ink-2); font-size:.88rem}
.links{position:relative; height:34px}
.links svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.links path{fill:none; stroke:var(--rule); stroke-width:1.5}
.links path.on{stroke:var(--accent); stroke-width:2}
.links path.gapline.on{stroke:var(--gap)}
@media (prefers-reduced-motion:no-preference){
  .links path{stroke-dasharray:80; stroke-dashoffset:80; animation:draw .7s ease-out forwards}
  .links path:nth-child(2){animation-delay:.12s}
  .links path:nth-child(3){animation-delay:.24s}
  .links path:nth-child(4){animation-delay:.36s}
  @keyframes draw{to{stroke-dashoffset:0}}
}
.reqs{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.req{
  width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer;
  background:transparent; border:1px solid var(--rule); border-radius:8px;
  padding:11px 14px; display:grid; grid-template-columns:1fr auto; gap:2px 12px; align-items:center;
}
.req:hover{border-color:var(--ink-2)}
.req[aria-expanded="true"]{border-color:var(--accent); background:var(--accent-soft)}
.req.gap[aria-expanded="true"]{border-color:var(--gap); background:var(--gap-soft)}
.req .who{font-weight:600; font-size:.97rem}
.req .what{grid-column:1 / 2; color:var(--ink-2); font-size:.88rem}
.status{grid-row:1 / span 2; grid-column:2; font-size:.85rem; font-weight:600; display:flex; align-items:center; gap:6px; white-space:nowrap}
.status.ok{color:var(--ok)}
.status.miss{color:var(--gap)}
.dot{width:8px; height:8px; border-radius:50%; background:currentColor; display:inline-block}
.detail{
  margin-top:14px; border-top:1px dashed var(--rule); padding-top:14px;
  font-size:.92rem; color:var(--ink-2); min-height:5.2em;
}
.detail dl{display:grid; grid-template-columns:auto 1fr; gap:4px 14px; margin:0}
.detail dt{color:var(--ink-2)}
.detail dd{margin:0; color:var(--ink)}

/* scene */
.scene{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:clamp(28px,4vw,44px) 0}
.scene p{margin:0; font-size:clamp(1.3rem,2.6vw,1.95rem); line-height:1.25; letter-spacing:-.015em; max-width:32ch; font-weight:500}
.scene span{color:var(--ink-2)}

section{padding:clamp(56px,8vw,104px) 0}
h2{font-size:clamp(1.8rem,3.4vw,2.6rem); line-height:1.08; letter-spacing:-.025em; font-weight:600; margin:0 0 18px; max-width:22ch}
.lede{color:var(--ink-2); max-width:58ch; margin:0}

/* problem */
.problem{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:start}
@media (max-width:900px){ .problem{grid-template-columns:1fr} }
.sources{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule)}
.sources li{display:grid; grid-template-columns:1fr auto; padding:13px 0; border-bottom:1px solid var(--rule); align-items:baseline}
.sources .src{color:var(--ink-2)}
.sources .n{font-weight:600}
.sources-cap{font-size:.9rem; color:var(--ink-2); margin:10px 0 0}

/* steps */
.steps{list-style:none; margin:40px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px); counter-reset:s}
@media (max-width:860px){ .steps{grid-template-columns:1fr} }
.steps li{counter-increment:s; border-top:2px solid var(--ink); padding-top:18px}
.steps li::before{content:counter(s); display:block; font-weight:700; font-size:1.05rem; color:var(--accent); margin-bottom:10px}
.steps h3{font-size:1.25rem; letter-spacing:-.015em; margin:0 0 8px; font-weight:600}
.steps p{margin:0; color:var(--ink-2)}

.band{background:var(--paper-2)}

/* why */
.why{display:grid; grid-template-columns:1fr 1.4fr; gap:clamp(32px,5vw,72px)}
@media (max-width:860px){ .why{grid-template-columns:1fr} }
.why-list{list-style:none; margin:0; padding:0}
.why-list li{padding:20px 0; border-bottom:1px solid var(--rule)}
.why-list li:first-child{padding-top:0}
.why-list strong{display:block; font-size:1.15rem; letter-spacing:-.01em; margin-bottom:4px}
.why-list span{color:var(--ink-2)}

/* cemetery + proof */
.after{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); align-items:end}
@media (max-width:860px){ .after{grid-template-columns:1fr} }
.proof{font-size:clamp(1.1rem,1.8vw,1.3rem); line-height:1.4; margin:0; max-width:34ch}
.proof b{font-size:clamp(2.2rem,4vw,3rem); display:block; letter-spacing:-.03em; line-height:1; margin-bottom:6px}

/* closing */
.close{text-align:left; padding:clamp(72px,10vw,128px) 0}
.close h2{font-size:clamp(2.2rem,5vw,3.8rem); max-width:16ch; margin-bottom:14px}
.close p{color:var(--ink-2); margin:0 0 30px; font-size:1.2rem}

footer{border-top:1px solid var(--rule); padding:28px 0 40px; color:var(--ink-2); font-size:.9rem}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px}