/* ═══════════════════════════════════════════════════════════════════════════
   Rise — demo build. Layers on styles.css; inherits every token from it.
   Fewer words, bigger targets, one thing per screen.
   ═══════════════════════════════════════════════════════════════════════════ */

.demo .nav-doc {
  color: var(--ink-3); font-family: var(--font-mono); font-size: .7rem;
  letter-spacing: .06em;
}
.demo .nav-doc:hover { color: var(--sem-ours); background: transparent; }
.demo .nav-links { display: flex; }
@media (max-width: 620px) { .demo .nav-links a:not(.nav-doc) { display: none; } }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.d-hero { position: relative; padding: 100px 0 84px; overflow: hidden; }
.d-hero::before {
  content: ''; position: absolute; inset: -60% -20% auto; height: 700px;
  background: radial-gradient(ellipse at 50% 0%,
    color-mix(in srgb, var(--zone-steady) 20%, transparent), transparent 62%);
  pointer-events: none;
}
.d-hero .wrap { position: relative; }
.d-hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.4rem); font-weight: 300;
  margin-bottom: 22px; max-width: 16ch; line-height: 1.08;
}
.d-hero .lede { max-width: 56ch; font-size: clamp(1.05rem, 1.9vw, 1.28rem); }

.d-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.d-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 10px;
  font-family: var(--font-body); font-size: .95rem; font-weight: 500;
  text-decoration: none; border: 1px solid var(--line-strong); color: var(--ink);
  background: var(--surface); transition: transform .16s var(--ease), background .16s var(--ease);
}
.d-btn:hover { transform: translateY(-2px); background: var(--surface-2); }
.d-btn-primary {
  background: var(--zone-steady); border-color: var(--zone-steady); color: #fff;
}
.d-btn-primary:hover { background: color-mix(in srgb, var(--zone-steady) 85%, #fff); }
.d-hint { margin-top: 20px; font-size: .84rem; color: var(--ink-3); }

/* ── Sections ───────────────────────────────────────────────────────────── */
.d-sec { padding: 74px 0; border-top: 1px solid var(--line); }
.d-sec-alt { background: var(--bg-1); }
.d-hd { margin-bottom: 34px; max-width: 66ch; }
.d-n {
  font-family: var(--font-mono); font-size: .72rem; color: var(--zone-steady);
  letter-spacing: .12em; display: block; margin-bottom: 10px;
}
.d-hd h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.d-hd p { color: var(--ink-2); margin: 12px 0 0; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.d-card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
  transition: transform .2s var(--ease), border-color .2s var(--ease);
}
.d-sec-alt .d-card { background: var(--bg); }
.d-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.d-card h3 { font-size: 1.05rem; margin-bottom: 10px; }
.d-card p { font-size: .92rem; color: var(--ink-2); }
.d-ico {
  width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center;
  font-size: 1.35rem; margin-bottom: 14px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}

/* ── Suggested prompts ──────────────────────────────────────────────────── */
.d-prompts { display: flex; flex-wrap: wrap; gap: 9px; }
.d-prompt {
  background: color-mix(in srgb, var(--sem-ours) 11%, transparent);
  border: 1px solid color-mix(in srgb, var(--sem-ours) 30%, transparent);
  color: var(--ink); border-radius: 999px; padding: 11px 18px;
  font-family: var(--font-body); font-size: .88rem; font-weight: 400;
  cursor: pointer; min-height: 44px;
  transition: background .16s var(--ease), transform .16s var(--ease);
}
.d-prompt:hover {
  background: color-mix(in srgb, var(--sem-ours) 24%, transparent);
  transform: translateY(-2px);
}
.d-prompt:focus-visible { outline: 3px solid var(--sem-ours); outline-offset: 2px; }

.d-disc {
  margin: 26px 0 0; padding: 15px 18px; font-size: .82rem; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-s); line-height: 1.6;
}

/* ── Demo tweaks to shared components ───────────────────────────────────── */
.demo .ci { background: var(--bg-2); }
.demo .sc { background: var(--bg-1); }
.demo .sc-read { top: 88px; }