*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;background:var(--steel)}
body{color:#FFFFFF;font-family:var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--hazard);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--orange)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

.page{min-height:100vh;display:flex;flex-direction:column}
.page > main{flex:1}
.tape{height:var(--hazard-tape-h);background:var(--hazard-tape)}
.wrap{max-width:1120px;width:100%;margin:0 auto;padding-left:24px;padding-right:24px}

/* Header */
.site-header{padding-top:18px;padding-bottom:18px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;color:#FFFFFF;text-decoration:none}
.brand:hover{color:#FFFFFF}
.brand img{width:40px;height:40px;border-radius:10px;display:block}
.wordmark{font-family:var(--display);font-size:22px;letter-spacing:.02em;display:flex;align-items:center;gap:6px}
.wordmark span{background:var(--hazard);color:var(--ink);padding:0 6px;border-radius:var(--radius-chip)}
.nav{display:flex;gap:6px;flex-wrap:wrap}
.nav a{padding:8px 14px;border-radius:var(--radius-button);font-weight:700;font-size:15px;color:#FFFFFF;text-decoration:none}
.nav a:hover{background:rgba(255,255,255,.09);color:#FFFFFF}
.nav a[aria-current="page"]{background:var(--hazard);color:var(--ink)}

/* Shared type */
.eyebrow{font-weight:800;font-size:13px;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--hazard)}
.display{margin:0;font-family:var(--display);font-weight:400}
.lede{margin:0;font-size:18px;line-height:1.5;font-weight:600;color:var(--mist);text-wrap:pretty}

/* Button (DS Button, primary) */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:13px 24px;border:0;border-radius:var(--radius-button);
  background:var(--hazard);color:var(--ink);box-shadow:var(--shadow-primary);font-family:var(--display);font-weight:400;font-size:16px;
  letter-spacing:.03em;text-decoration:none;cursor:pointer;transition:transform .08s;-webkit-tap-highlight-color:transparent}
.btn:hover{color:var(--ink)}
.btn:active{transform:translateY(2px)}

/* Hero */
.hero{padding-top:48px;padding-bottom:72px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:48px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:22px}
.hero h1{font-size:clamp(44px,7vw,76px);line-height:.98;text-wrap:balance}
.hero .lede{font-size:20px;line-height:1.45;max-width:30em}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.hero-stage-wrap{display:flex;justify-content:center}
.stage{width:min(100%,340px);aspect-ratio:400/620;border-radius:var(--radius-stage);
  background:linear-gradient(180deg,var(--zone-golden-top),var(--zone-golden-bot));box-shadow:var(--shadow-card);
  position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.stage-pill{position:absolute;top:10px}
.stage-pill.left{left:10px}
.stage-pill.right{right:10px}
.tower{display:flex;flex-direction:column;align-items:center}
.tower .floor{height:27px;overflow:hidden}
.tower .floor canvas{margin-top:-16.5px}
.ground{width:100%;height:44px;background:var(--ground);border-top:6px solid var(--ground-curb)}

/* HUD pills (DS StagePill / ComboPill) */
.pill{display:inline-flex;gap:6px;align-items:center;padding:5px 10px;border-radius:var(--radius-pill);background:var(--pill-bg);color:#fff;
  font-family:var(--body);font-weight:800;font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.pill.hot{background:var(--combo-hot)}
.pill b{font-family:var(--display);font-weight:400;font-size:14px;line-height:1}

/* How to build */
.band-light{background:var(--soft);color:var(--ink)}
.how{padding-top:72px;padding-bottom:72px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px;align-items:start}
.how-copy{display:flex;flex-direction:column;gap:14px}
.how h2{font-size:36px;line-height:1.05}
.how p{margin:0;font-size:18px;line-height:1.5;font-weight:600;color:var(--ink-2);max-width:26em}

/* DS SignCard */
.sign-card{position:relative;width:100%;max-width:520px;background:var(--card);color:var(--ink);border-radius:var(--radius-card);
  padding:30px 20px 18px;display:flex;flex-direction:column;gap:13px;box-shadow:var(--shadow-card);overflow:hidden}
.sign-card::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--hazard-tape-h);background:var(--hazard-tape)}

/* DS Steps */
.steps{display:grid;gap:7px;margin:0;padding:0;list-style:none;counter-reset:step}
.steps li{display:flex;gap:10px;align-items:center;font-size:14px;font-weight:700;color:var(--ink);counter-increment:step}
.steps li::before{content:counter(step);width:24px;height:24px;flex:none;border-radius:var(--radius-chip);background:var(--ink);color:var(--hazard);
  display:grid;place-items:center;font-size:12px;font-weight:800}

/* DS RuleChips */
.chips{display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0;list-style:none}
.chips li{font-size:12px;font-weight:800;padding:4px 8px;border-radius:var(--radius-chip);background:var(--soft);color:var(--ink)}
.chips li.hot{background:var(--hot-bg);color:var(--hot-fg)}

/* Zones */
.zones-section{padding-top:72px;padding-bottom:72px;display:flex;flex-direction:column;gap:28px}
.section-head{display:flex;flex-direction:column;gap:10px}
.section-head h2{font-size:36px}
.section-head .lede{max-width:34em}
.zones{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.zone{border-radius:var(--radius-card);padding:18px 16px;min-height:130px;display:flex;flex-direction:column;justify-content:space-between;gap:12px}
.zone-icon{font-size:30px;line-height:1}
.zone-name{font-family:var(--display);font-size:17px;color:#FFFFFF;text-shadow:0 2px 0 rgba(0,0,0,.25)}
.zone.downtown{background:linear-gradient(180deg,var(--zone-downtown-top),var(--zone-downtown-bot))}
.zone.golden{background:linear-gradient(180deg,var(--zone-golden-top),var(--zone-golden-bot))}
.zone.night{background:linear-gradient(180deg,var(--zone-night-top),var(--zone-night-bot))}
.zone.cloud{background:linear-gradient(180deg,var(--zone-cloud-top),var(--zone-cloud-bot))}
.zone.orbit{background:linear-gradient(180deg,var(--zone-orbit-top),var(--zone-orbit-bot))}

/* Feature cards */
.features{padding-bottom:72px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:24px}
.feature{border-radius:var(--radius-card);padding:30px 28px;display:flex;flex-direction:column;gap:12px;color:var(--ink)}
.feature h3{font-size:28px;line-height:1.05}
.feature p{margin:0;font-size:17px;line-height:1.5;font-weight:600}
.feature .kicker{font-weight:800;font-size:13px;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase}
.feature.daily{background:var(--hazard);box-shadow:var(--shadow-primary)}
.feature.materials{background:var(--card);gap:16px}
.feature.materials .kicker{color:var(--muted)}
.feature.materials p{font-size:15px;color:var(--muted)}
.materials-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.materials-grid li{background:var(--soft);border-radius:var(--radius-tile);padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:6px;
  font-size:12px;font-weight:700;text-align:center}

/* Doc pages */
.doc{max-width:760px;margin:0 auto;padding:40px 24px 80px;display:flex;flex-direction:column;gap:24px}
.doc-head{display:flex;flex-direction:column;gap:8px}
.doc h1{font-size:clamp(36px,6vw,54px);line-height:1}
.callout{background:var(--hazard);color:var(--ink);border-radius:var(--radius-card);padding:22px 24px;display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap;box-shadow:var(--shadow-primary)}
.callout-copy{display:flex;flex-direction:column;gap:4px}
.callout-title{font-family:var(--display);font-size:20px}
.callout-sub{font-size:16px;font-weight:700}
.callout a{font-family:var(--display);font-size:18px;background:var(--ink);color:var(--hazard);padding:10px 16px;border-radius:var(--radius-button);
  text-decoration:none;overflow-wrap:anywhere}
.callout a:hover{color:#FFFFFF}
.doc-card{background:var(--card);color:var(--ink);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card)}
.doc-body{padding:12px 28px 28px;display:flex;flex-direction:column}
.doc-body section{padding:20px 0;border-bottom:2px solid var(--soft);display:flex;flex-direction:column;gap:8px}
.doc-body h2{margin:0;font-family:var(--body);font-weight:800;font-size:19px;line-height:1.3}
.doc-body p{margin:0;font-size:16px;line-height:1.6;font-weight:500;color:var(--ink-2);text-wrap:pretty}
.doc-body a{color:var(--ink);text-decoration-color:var(--hazard-dk)}
.doc-foot{padding-top:18px;font-size:14px;font-weight:600;color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid var(--hud-chip-line)}
.footer-inner{padding-top:28px;padding-bottom:28px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:14px;font-weight:600;color:var(--mist)}
.footer-links{display:flex;gap:18px;flex-wrap:wrap}
.footer-links a{color:#FFFFFF;font-weight:700;text-decoration:none}
.footer-links a:hover{color:var(--hazard)}

@media (max-width:480px){
  .wrap,.doc{padding-left:16px;padding-right:16px}
  .doc-body{padding:12px 20px 24px}
  .materials-grid{gap:8px}
  .callout{padding:20px}
  .callout a{font-size:14px;padding:10px 12px}
}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}