/* Uchi Energy — "Try with real data" demo + app CTA. Ported from the Claude Design
   handoff (ui_kits/marketing/demo.css). Reuses the Sky & Sun tokens from landing.css;
   dark mode comes from `.dark .landing` (which re-points those tokens), so only a few
   rgba overrides are restated here. Everything is scoped under .landing. */

.landing { --demo-line: var(--ink-soft); }
.dark .landing { --demo-line:#7fb0d4; }

/* Wider container for the demo (enlarged per request). */
.demo-wrap { max-width:1280px; margin:0 auto; padding:0 40px; }

/* ---------- section frame ---------- */
.demo-section { padding:80px 0 40px; }
.demo-head { text-align:center; max-width:680px; margin:0 auto 40px; }
.demo-head .eyebrow { display:block; }
.demo-title { font-size:46px; font-weight:700; line-height:1.18; letter-spacing:-0.02em; margin:14px 0 0; text-wrap:balance; }
.demo-lede { font-size:16.5px; line-height:1.55; color:var(--ink-muted); margin:18px auto 0; max-width:52ch; }

/* ---------- scenario chooser ---------- */
/* scroll-margin so jumping to #choose lands the grid just under the 68px sticky nav */
.demo-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; scroll-margin-top:88px; }
.demo-card { display:block; text-align:left; text-decoration:none; background:var(--paper); border:1px solid var(--rule);
  border-radius:18px; padding:22px 22px 20px; cursor:pointer; font-family:var(--font-ui);
  transition:border-color .15s ease, background .15s ease, transform .12s ease, box-shadow .15s ease;
  box-shadow:0 1px 0 rgba(28,39,48,0.03), 0 8px 22px rgba(28,39,48,0.05); }
.demo-card:hover { transform:translateY(-2px); border-color:var(--blue-soft); }
.demo-card[aria-pressed="true"] { border-color:var(--sun-amber); background:var(--sun-tint);
  box-shadow:0 1px 0 rgba(243,160,46,0.06), 0 10px 26px rgba(238,123,47,0.12); }
.demo-card-ic { display:inline-flex; color:var(--ink-faint); margin-bottom:16px; transition:color .15s ease; }
.demo-card[aria-pressed="true"] .demo-card-ic { color:var(--sun-orange); }
.demo-card h3 { font-size:18px; font-weight:600; letter-spacing:-0.01em; line-height:1.3; word-break:keep-all; color:var(--ink); }
.demo-card p { font-size:13.5px; color:var(--ink-muted); line-height:1.5; margin-top:8px; }
.demo-card-mini { display:flex; gap:11px; color:var(--ink-faint); margin-top:16px; }

/* ---------- selected detail ---------- */
.demo-detail { margin-top:38px; }
.demo-summary { background:var(--paper); border:1px solid var(--rule); border-radius:18px;
  padding:26px 28px; box-shadow:0 1px 0 rgba(28,39,48,0.03), 0 8px 22px rgba(28,39,48,0.05); }
.demo-summary-top { display:flex; justify-content:space-between; align-items:flex-start; gap:20px 24px; flex-wrap:wrap; }
.demo-id { display:flex; align-items:flex-start; gap:13px; min-width:0; }
.demo-detail-ic { display:inline-flex; color:var(--sun-orange); margin-top:3px; flex:none; }
.demo-id-text { min-width:0; }
.demo-id-text h3 { font-size:24px; font-weight:600; letter-spacing:-0.01em; line-height:1.25; word-break:keep-all; color:var(--ink); }
.demo-meta { font-size:12.5px; letter-spacing:0.04em; color:var(--ink-muted); margin-top:7px; word-break:keep-all; }
.demo-chips { display:flex; flex-wrap:wrap; gap:10px; flex:none; }
.demo-chip { display:inline-flex; align-items:center; gap:7px; background:var(--rule-soft);
  border-radius:999px; padding:7px 14px; font-size:13.5px; font-weight:500; color:var(--ink-soft); white-space:nowrap; }
.demo-chip svg { color:var(--ink-muted); }
.demo-note { font-size:15.5px; line-height:1.55; color:var(--ink-soft); margin-top:18px; max-width:64ch; }
.demo-equip-block { margin-top:22px; padding-top:22px; border-top:1px solid var(--rule-soft); }
.demo-equip-label { display:block; margin:0 0 14px; }
.demo-equip { display:flex; flex-wrap:wrap; gap:10px; }
.demo-equip .it { display:flex; align-items:center; gap:10px; padding:9px 14px 9px 9px;
  background:var(--sky-soft); border:1px solid var(--rule); border-radius:12px; }
.demo-equip .ic { width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--blue-tint); color:var(--blue-deep); flex:none; }
.demo-equip .lab { font-size:13px; font-weight:500; color:var(--ink-soft); white-space:nowrap; }

/* ---------- stat row ---------- */
.demo-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:28px; }
.demo-stat { background:var(--paper); border:1px solid var(--rule); border-radius:16px; padding:20px 22px; }
.demo-stat .v { font-size:32px; font-weight:700; letter-spacing:-0.02em; color:var(--ink); line-height:1; font-family:var(--font-mono); }
.demo-stat .v[data-tone="orange"] { color:var(--sun-orange); }
.demo-stat .v[data-tone="blue"] { color:var(--blue-deep); }
.demo-stat .v .u { font-size:14px; font-weight:600; color:var(--ink-muted); margin-left:5px; letter-spacing:0; }
.demo-stat .l { font-size:13.5px; color:var(--ink-muted); margin-top:9px; }

/* ---------- chart ---------- */
.demo-chartcard { background:var(--paper); border:1px solid var(--rule); border-radius:18px; padding:24px 26px 18px; margin-top:24px; }
.demo-plot { position:relative; height:230px; }
.demo-band { position:absolute; top:0; bottom:18px; border-radius:3px; }
.demo-band.is-clean { background:rgba(106,128,144,0.16); }
.demo-band.is-cheap { background:rgba(243,160,46,0.16); }
.dark .landing .demo-band.is-clean { background:rgba(150,170,185,0.10); }
.dark .landing .demo-band.is-cheap { background:rgba(243,160,46,0.13); }
.demo-bars { position:absolute; inset:0 0 18px; display:flex; align-items:flex-end; gap:2px; }
.demo-bar { flex:1; min-height:3px; background:var(--sun-amber); border-radius:2px 2px 0 0; }
.demo-line { position:absolute; inset:0 0 18px; width:100%; height:calc(100% - 18px); overflow:visible; }
.demo-axis { display:flex; justify-content:space-between; font-size:11px; color:var(--ink-faint); margin-top:8px; font-family:var(--font-mono); }
.demo-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:22px; margin-top:16px; padding-top:14px; border-top:1px solid var(--rule-soft); }
.demo-legend .li { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-muted); }
.demo-legend .sw { display:inline-block; }
.demo-legend .sw-bar { width:11px; height:11px; border-radius:2px; background:var(--sun-amber); }
.demo-legend .sw-line { width:18px; height:0; border-top:2.5px solid var(--demo-line); border-radius:2px; }
.demo-legend .sw-clean { width:11px; height:11px; border-radius:2px; background:rgba(106,128,144,0.4); }
.demo-legend .sw-cheap { width:11px; height:11px; border-radius:2px; background:rgba(243,160,46,0.4); }

/* ---------- nudge + comparison + foot ---------- */
.demo-nudge { display:flex; align-items:center; gap:13px; margin-top:22px; background:var(--sun-tint);
  border:1px solid rgba(243,160,46,0.3); border-radius:14px; padding:15px 18px; font-size:15px; line-height:1.5; color:var(--ink-soft); }
.demo-nudge .ic { display:inline-flex; color:var(--sun-orange); flex:none; }
.demo-compare { display:flex; align-items:flex-start; gap:10px; margin-top:24px; font-size:15px; line-height:1.55; color:var(--ink-soft); }
.demo-compare .ic { display:inline-flex; color:var(--ink-faint); margin-top:2px; flex:none; }
.demo-foot { font-size:13px; line-height:1.55; color:var(--ink-faint); margin-top:24px; padding-top:22px; border-top:1px solid var(--rule-soft); max-width:70ch; }

/* ---------- app download CTA ---------- */
.appcta-section { padding:0 0 88px; }
.appcta { display:flex; align-items:center; justify-content:space-between; gap:28px 40px; flex-wrap:wrap;
  background:var(--sun-tint); border:1px solid var(--sun-soft); border-radius:24px; padding:40px 44px; }
.appcta-copy { max-width:52ch; }
.appcta-copy .eyebrow { display:block; }
.appcta-title { font-size:30px; font-weight:700; line-height:1.22; letter-spacing:-0.015em; margin:12px 0 0; text-wrap:balance; color:var(--ink); }
.appcta-lede { font-size:15.5px; line-height:1.5; color:var(--ink-muted); margin:12px 0 0; }
.appcta-btns { display:flex; gap:14px; flex-wrap:wrap; flex:none; }
/* Two-class selectors so the button text colour outranks `.landing a { color:inherit }`. */
.appcta .store-btn { display:inline-flex; align-items:center; gap:12px; background:var(--ink); color:var(--sky-soft);
  border-radius:13px; padding:11px 20px 11px 18px; text-decoration:none; transition:transform .12s ease, background .15s ease; }
.appcta .store-btn:hover { transform:translateY(-2px); }
.store-btn svg { flex:none; }
.store-btn .sb-text { display:flex; flex-direction:column; line-height:1.15; text-align:left; }
.store-btn .sb-text small { font-size:10.5px; letter-spacing:0.02em; opacity:0.82; }
.store-btn .sb-text strong { font-size:17px; font-weight:600; letter-spacing:-0.01em; margin-top:1px; }
.dark .landing .store-btn { background:var(--mist); color:var(--ink); }

@media (max-width:880px) {
  .demo-cards { grid-template-columns:1fr; }
  .demo-stats { grid-template-columns:1fr 1fr; }
  .demo-title { font-size:34px; }
  .demo-wrap { padding:0 22px; }
}
@media (max-width:620px) {
  .appcta { padding:32px 26px; }
  .appcta-btns { width:100%; }
  .store-btn { flex:1; justify-content:center; }
}