:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #171714;
  background: #f4f4ef;
  font-synthesis: none;
  --ink: #171714;
  --muted: #666760;
  --line: #d9dcd4;
  --mint: #dff5ee;
  --green: #08785f;
  --paper: rgba(255, 255, 252, .9);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 75% 5%, #e8f3ec 0, transparent 32rem), #f4f4ef; }
.bar { height: 76px; padding: 0 clamp(22px, 5vw, 78px); border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,252,.74); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font-weight: 700; }
.mark { width: 31px; height: 31px; display: grid; place-items: center; color: white; background: var(--green); border-radius: 10px 10px 14px 14px; font-size: 14px; }
.rule { width: 1px; height: 24px; background: var(--line); }
.environment, .pill { border: 1px solid #b9d8cd; border-radius: 999px; background: var(--mint); color: #176c58; padding: 7px 12px; font: 700 11px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; text-transform: uppercase; }
main { width: min(1180px, calc(100% - 44px)); margin: 0 auto; padding: clamp(48px, 7vw, 90px) 0 34px; }
.hero { max-width: 960px; }
.eyebrow, .card-label { color: #72736b; font: 700 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; }
h1 { max-width: 920px; margin: 17px 0 20px; font-size: clamp(42px, 6vw, 74px); line-height: .98; letter-spacing: -.055em; font-weight: 650; }
.lede { max-width: 830px; margin: 0; color: #4d4f49; font-size: clamp(18px, 2vw, 23px); line-height: 1.45; }
.guardrails { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.guardrails span { border: 1px solid var(--line); background: rgba(255,255,252,.7); border-radius: 999px; padding: 9px 13px; font-size: 13px; font-weight: 650; }
.dot { display: inline-block; width: 7px; height: 7px; background: #bf861a; border-radius: 50%; margin-right: 7px; }
.grid { margin-top: 56px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(310px, .8fr); gap: 20px; align-items: start; }
.card, .truth { border: 1px solid var(--line); background: var(--paper); border-radius: 22px; box-shadow: 0 18px 55px rgba(40,50,42,.06); }
.card { padding: 30px; }
.card h2, .truth h2 { margin: 11px 0 13px; font-size: clamp(25px, 3vw, 35px); line-height: 1.08; letter-spacing: -.035em; }
.card p, .truth p { color: var(--muted); line-height: 1.55; }
.steps { list-style: none; padding: 0; margin: 30px 0 0; border-top: 1px solid var(--line); }
.steps li { display: flex; gap: 16px; align-items: flex-start; padding: 19px 0; border-bottom: 1px solid var(--line); }
.steps li > span { flex: none; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: var(--green); background: var(--mint); font: 700 11px/1 ui-monospace, monospace; }
.steps strong, .steps small { display: block; }
.steps strong { font-size: 15px; }
.steps small { color: var(--muted); margin-top: 5px; line-height: 1.4; }
.stack { display: grid; gap: 20px; }
.status-card { background: linear-gradient(145deg, #f7fffb, #e3f4ed); border-color: #bdd8ce; }
.status-top { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; }
.status-card h2 { font-size: 25px; }
.pill { white-space: nowrap; }
.pill.pending { background: #efeee7; border-color: #d7d4c8; color: #6a675e; }
.pill.ready { background: #d8f5e9; color: #06634e; }
.pill.unavailable { background: #f8e7df; border-color: #e8c9ba; color: #8b3c27; }
button { cursor: pointer; border: 1px solid #aabbb4; background: white; color: var(--ink); border-radius: 12px; padding: 10px 14px; font: inherit; font-weight: 650; }
dl { margin: 19px 0 0; }
dl div { padding: 13px 0; border-top: 1px solid var(--line); }
dt { color: var(--muted); font-size: 12px; }
dd { margin: 5px 0 0; font: 600 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.truth { margin-top: 20px; padding: 28px 30px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 30px; align-items: center; }
.truth h2 { margin-bottom: 0; }.truth p { margin: 0; }
footer { display: flex; justify-content: space-between; gap: 20px; padding: 27px 3px 0; color: #73756f; font-size: 12px; }
@media (max-width: 760px) {
  .environment { display: none; }
  main { width: min(100% - 28px, 600px); padding-top: 42px; }
  .grid, .truth { grid-template-columns: 1fr; }
  .grid { margin-top: 38px; }
  .truth { gap: 7px; }
  footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }