/* GridReady landing page styles.
 *
 * These live in a file rather than in a <style> block for one reason: the
 * apex ships a Content-Security-Policy of style-src 'self', and an inline
 * block would need 'unsafe-inline', which buys close to nothing against
 * injection while reading as protection that is not there. The app's four
 * public pages made the same move. See deploy/RUNBOOK.md section 6 in the
 * prototype repository.
 *
 * Extracted verbatim from index.html on 28 July 2026. No rule was changed.
 */
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("fonts/space-grotesk-latin.woff2") format("woff2");
}
@font-face{
  font-family:'Public Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("fonts/public-sans-latin.woff2") format("woff2");
}
@font-face{
  font-family:'Public Sans';
  font-style:italic;
  font-weight:400 700;
  font-display:swap;
  src:url("fonts/public-sans-italic-latin.woff2") format("woff2");
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 600;
  font-display:swap;
  src:url("fonts/jetbrains-mono-latin.woff2") format("woff2");
}
:root{
  color-scheme:light dark;
  --s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --fs-xs:0.75rem;--fs-sm:0.875rem;--fs-base:1rem;--fs-md:1.25rem;--fs-lg:1.563rem;--fs-2xl:2.441rem;
  --font-display:'Space Grotesk',system-ui,sans-serif;
  --font-body:'Public Sans',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --r-md:8px;--r-lg:12px;--r-pill:100px;
  --bg:#EAE4D7;--surface:#F6F2E9;--text:#1A1B1E;--muted:#62625A;
  --border:#DAD3C3;--border-strong:#C8BFAD;--on-accent:#F6F2E9;
  --shadow:0 1px 2px rgba(26,27,30,.05),0 12px 30px -16px rgba(26,27,30,.20);
  --accent:#1F5D4C;--accent-deep:#164539;--accent-tint:#D8E7E0;--accent-subtle:#B4D2C6;
  --seq1:#D8E7E0;--seq2:#9BC3B4;--seq3:#4E9078;--seq4:#1F5D4C;--seq5:#123D31;
}
@media(prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --bg:#0D1626;--surface:#16233A;--text:#E7ECF5;--muted:#8C99AE;
    --border:#243449;--border-strong:#34475F;--on-accent:#06101F;
    --shadow:0 2px 6px rgba(0,0,0,.55),0 20px 48px -20px rgba(0,0,0,.8);
    --accent:#4FC0A0;--accent-deep:#7FD9BF;--accent-tint:#143A30;--accent-subtle:#2A5F50;
    --seq1:#1E5445;--seq2:#2C7A64;--seq3:#3FA184;--seq4:#4FC0A0;--seq5:#8FE5CE;
  }
}
:root[data-mode="light"]{
  color-scheme:light;
  --bg:#EAE4D7;--surface:#F6F2E9;--text:#1A1B1E;--muted:#62625A;
  --border:#DAD3C3;--border-strong:#C8BFAD;--on-accent:#F6F2E9;
  --shadow:0 1px 2px rgba(26,27,30,.05),0 12px 30px -16px rgba(26,27,30,.20);
  --accent:#1F5D4C;--accent-deep:#164539;--accent-tint:#D8E7E0;--accent-subtle:#B4D2C6;
  --seq1:#D8E7E0;--seq2:#9BC3B4;--seq3:#4E9078;--seq4:#1F5D4C;--seq5:#123D31;
}
:root[data-mode="dark"]{
  color-scheme:dark;
  --bg:#0D1626;--surface:#16233A;--text:#E7ECF5;--muted:#8C99AE;
  --border:#243449;--border-strong:#34475F;--on-accent:#06101F;
  --shadow:0 2px 6px rgba(0,0,0,.55),0 20px 48px -20px rgba(0,0,0,.8);
  --accent:#4FC0A0;--accent-deep:#7FD9BF;--accent-tint:#143A30;--accent-subtle:#2A5F50;
  --seq1:#1E5445;--seq2:#2C7A64;--seq3:#3FA184;--seq4:#4FC0A0;--seq5:#8FE5CE;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:var(--fs-base);line-height:1.65;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
.wrap{width:100%;max-width:720px;margin:0 auto;padding:0 var(--s5)}
header{border-bottom:1px solid var(--border)}
.topbar{display:flex;align-items:center;justify-content:space-between;max-width:720px;margin:0 auto;padding:var(--s4) var(--s5)}
.name{font-family:var(--font-display);font-weight:600;letter-spacing:-0.02em;font-size:var(--fs-md)}
.name .dot{color:var(--accent)}
#modeToggle{min-width:44px;min-height:44px;border:1px solid var(--border-strong);border-radius:var(--r-pill);background:var(--surface);color:var(--text);cursor:pointer;font-size:var(--fs-base);display:flex;align-items:center;justify-content:center}
#modeToggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
main{flex:1}
.hero{padding:var(--s8) 0 var(--s6)}
.eyebrow{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:0.08em;text-transform:uppercase;color:var(--muted)}
h1{font-family:var(--font-display);font-weight:700;letter-spacing:-0.02em;font-size:clamp(1.8rem,5.5vw,var(--fs-2xl));line-height:1.15;margin:var(--s4) 0 var(--s4)}
h1 em{font-style:normal;color:var(--accent)}
.hero p{max-width:58ch}
.band{display:flex;height:6px;border-radius:var(--r-pill);overflow:hidden;margin:var(--s6) 0 0;max-width:280px}
.band span{flex:1}
.band .b1{background:var(--seq1)}.band .b2{background:var(--seq2)}.band .b3{background:var(--seq3)}.band .b4{background:var(--seq4)}.band .b5{background:var(--seq5)}
.steps{padding:var(--s6) 0}
.stepgrid{display:grid;gap:var(--s4)}
.step{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s5);box-shadow:var(--shadow)}
.step .k{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:0.08em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:var(--s2)}
.step h2{font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;font-size:var(--fs-md);margin-bottom:var(--s2)}
.step p{color:var(--muted)}
.who{padding:var(--s2) 0 var(--s6)}
.who p{max-width:58ch}
.contact{padding:var(--s2) 0 var(--s8)}
.contact h2{font-family:var(--font-display);font-weight:600;font-size:var(--fs-lg);letter-spacing:-0.01em;margin-bottom:var(--s3)}
.contact p{max-width:58ch;margin-bottom:var(--s4)}
.links{display:flex;flex-wrap:wrap;gap:var(--s3)}
.links a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s5);border-radius:var(--r-pill);text-decoration:none;font-weight:500;font-size:var(--fs-sm)}
.links a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.links .primary{background:var(--accent);color:var(--on-accent)}
.links .primary:hover{background:var(--accent-deep)}
.links .ghost{border:1px solid var(--border-strong);color:var(--text);background:var(--surface)}
.links .ghost:hover{border-color:var(--accent)}
footer{border-top:1px solid var(--border)}
footer .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);justify-content:space-between;padding:var(--s5) 0;color:var(--muted);font-size:var(--fs-sm)}
footer nav{display:flex;flex-wrap:wrap;gap:var(--s4)}
footer nav a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}
footer nav a:hover{color:var(--text)}
footer nav a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
footer .mono{font-family:var(--font-mono);font-size:var(--fs-xs)}