/* Nova Method – public site. Tokens from Brand Guidelines v1.3. Self-hosted fonts, no external requests. */
@font-face{font-family:"Michroma";src:url("/fonts/michroma-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/fonts/instrument-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/fonts/instrument-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("/fonts/instrument-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --bg:#F6F7F8;          /* Cloud */
  --panel:#FFFFFF;       /* White */
  --line:#D5DCE2;
  --fg:#16191D;          /* Ink */
  --muted:#3E5468;       /* Slate */
  --link:#3E5468;
  --accent:#3E5468;
  --accent-fg:#FFFFFF;
  --chip:#E6ECF1;        /* Slate Mist */
  --chip-fg:#2B3A48;     /* Deep Slate */
  --stage:#1F2A37;       /* Logo Midnight */
  --stage-fg:#8199B5;    /* Logo Steel */
  --font-display:"Michroma","Eurostile","Arial",sans-serif;
  --font-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#16191D;--panel:#1F2A37;--line:#2B3A48;--fg:#E6ECF1;--muted:#A9B1B9;--link:#E6ECF1;
    --accent:#E6ECF1;--accent-fg:#16191D;--chip:#2B3A48;--chip-fg:#E6ECF1;color-scheme:dark;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:17px;line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
.wrap{width:100%;max-width:880px;margin-inline:auto;padding-inline:20px}
a{color:var(--link);text-underline-offset:3px}
a:focus-visible{outline:2px solid var(--link);outline-offset:3px;border-radius:2px}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-.01em;line-height:1.2;font-weight:600}
p{margin:0 0 1em;max-width:65ch}
.eyebrow{font-family:var(--font-display);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}

.skip{position:absolute;left:-999px}
.skip:focus{left:12px;top:12px;background:var(--panel);padding:8px 12px;z-index:10}

header.bar{border-bottom:1px solid var(--line)}
header.bar .wrap{display:flex;align-items:center;gap:20px;padding-block:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg)}
.brand svg{width:24px;height:23px;color:var(--muted);flex:none}
@media (prefers-color-scheme:dark){.brand svg{color:#8199B5}}
.brand span{font-family:var(--font-display);font-size:11px;letter-spacing:.26em;text-transform:uppercase}
nav{display:flex;gap:20px;margin-left:auto;font-size:15px}
nav a{color:var(--muted);text-decoration:none;padding-block:4px}
nav a:hover,nav a[aria-current="page"]{color:var(--fg);text-decoration:underline}

main{flex:1}
.hero{padding-block:72px 56px;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(32px,5vw,48px);margin-top:14px}
.hero p.lead{font-size:19px;color:var(--muted);margin-top:18px}
.stage{background:var(--stage);color:var(--stage-fg);border-radius:6px;aspect-ratio:1/1;display:grid;place-items:center;padding:14%}
.stage svg{width:100%;height:auto}
.btn{display:inline-block;background:var(--accent);color:var(--accent-fg);text-decoration:none;font-weight:600;font-size:16px;padding:12px 20px;border-radius:10px;margin-top:8px}
.btn:hover{opacity:.92}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;padding-block:8px 64px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px}
.card h2{font-size:19px;margin-bottom:8px}
.card p{margin:0;color:var(--muted);font-size:16px}

.doc{padding-block:56px 72px}
.doc h1{font-size:clamp(28px,4vw,38px);margin:12px 0 20px}
.doc h2{font-size:21px;margin:36px 0 10px}
.doc h3{font-size:17px;margin:24px 0 6px}
.doc ul{padding-left:1.2em;max-width:65ch}
.doc li{margin-bottom:.4em}
.doc dt{font-weight:600;margin-top:22px}
.doc dd{margin:6px 0 0;color:var(--muted);max-width:65ch}
.chip{display:inline-block;background:var(--chip);color:var(--chip-fg);font-size:13px;font-weight:500;padding:4px 12px;border-radius:999px}
.draft{border:1px solid var(--line);border-left:3px solid var(--accent);background:var(--panel);border-radius:6px;padding:14px 18px;margin:0 0 28px;max-width:65ch;font-size:15px}
.draft strong{display:block}
.meta{color:var(--muted);font-size:14px}

footer{border-top:1px solid var(--line);margin-top:auto}
footer .wrap{padding-block:24px;display:flex;gap:8px 24px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
footer a{color:var(--muted)}
footer .links{margin-left:auto;display:flex;gap:18px}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding-block:40px 40px}
  .stage{aspect-ratio:4/3;padding:10%;order:-1}
  nav{margin-left:0;width:100%}
  footer .links{margin-left:0}
}

/* Additions: home actions, about section */
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.actions .btn{margin-top:0}
.btn.secondary{background:transparent;color:var(--fg);border:1px solid var(--line)}
.btn:focus-visible{outline:2px solid var(--link);outline-offset:3px}
.about{border-top:1px solid var(--line);padding-block:40px 64px}
.about h2{font-size:21px;margin-bottom:12px}
.about p{color:var(--muted)}
.doc .meta{margin-top:-8px;margin-bottom:20px}
.doc strong{color:var(--fg)}