/* Brand accent from the approved 19 September reference: #D5FB66. */
:root {
  --paper: #e7ebdb; --white: #eff2e5; --ink: #20291d; --muted: #5c6856;
  --line: #d5dfce; --surface: #eff2e5; --soft-surface: #eef3e7;
  --scene-surface: #e3ebd8; --chat-surface: #edf3e5; --field-surface: #eff2e5;
  --switch-surface: #e3ebd9; --message-surface: #e2edce; --surface-line: #cedbc2;
  --small-ink: #536449; --heading-muted: #69755f; --accent-ink: #42651b;
  --blue: #42651b; --blue-dark: #355415; --ice: #e5efcf; --lime: #d5fb66;
  --card-shadow: #31472035; --use-bar: #dbe8c6;
  --brand-fill: #d5fb66; --brand-fill-hover: #e1ff91; --brand-on-fill: #20291d;
}
:root[data-theme="dark"] {
  --paper: #181b19; --ink: #f7f9f2; --muted: #b4bdb0;
  --line: #394338; --surface: #242c24; --soft-surface: #1c231d;
  --scene-surface: #293628; --chat-surface: #1c281d; --field-surface: #2c392b;
  --switch-surface: #172217; --message-surface: #364829; --surface-line: #45543c;
  --small-ink: #bdcdb0; --heading-muted: #a7b79a; --accent-ink: #d5fb66;
  --blue: #d5fb66; --blue-dark: #e1ff91; --ice: #35482c;
  --card-shadow: #00000065; --use-bar: #415432;
}
.button-blue, .button-lime { background: var(--brand-fill); color: var(--brand-on-fill); }
@media (hover:hover) and (pointer:fine) {
  .button-blue:hover, .button-lime:hover { background: var(--brand-fill-hover); color: var(--brand-on-fill); box-shadow: 0 10px 26px -15px #526e27; }
}
.habit-ribbon { background: var(--brand-fill); color: var(--brand-on-fill); }
.final-section { background: #263d20; color: #f1f5ed; }
.final-section .button-white { background: #f7f9f2; color: #20291d; }
.header-slot .header { --glass-tint: rgba(231,235,219,.8); --glass-edge: rgba(255,255,248,.9); }
[data-theme="dark"] .header-slot .header { --glass-tint: rgba(24,27,25,.76); --glass-edge: rgba(229,246,208,.16); }
.hero-cards .transaction {
  background: linear-gradient(125deg, #f1f4e6cf, #dce5cd99); border-color: #a8bb945e;
  box-shadow: 0 12px 28px -22px #30442155, inset 0 1px 0 #ffffffc0;
}
[data-theme="dark"] .hero-cards .transaction {
  background: linear-gradient(125deg, #34412db5, #232b2278); border-color: #a0b98b42;
  box-shadow: 0 12px 28px -22px #0009, inset 0 1px 0 #efffde19;
}
.hero-cards .balance-card, [data-theme="dark"] .hero-cards .balance-card {
  background: linear-gradient(145deg, #e7ffacef, #c4e769e6); border-color: #bbd37c;
  color: #20291d;
}
.hero-cards .balance-card .mini-chart i { background: #344721; }
.hero-cards > .is-hovered { border-color: #9eba7d; box-shadow: 0 26px 44px -22px #3c542b65, 0 8px 18px -12px #2c442c44, inset 0 1px 0 #fffffff0; }
[data-theme="dark"] .hero-cards > .is-hovered { border-color: #b7d69380; box-shadow: 0 26px 48px -22px #000c, 0 3px 18px -9px #b6d36f45, inset 0 1px 0 #ffffff45; }
.hero-assembled .hero-chat { box-shadow: 0 30px 50px -18px #36472b55, 0 9px 18px -10px #30472033; }
.hero-cards .event-check { border-color: #7f9d38; color: var(--accent-ink); }
.send-icon, .chat-title .mini-brand { background: var(--brand-fill); color: var(--brand-on-fill); }
.demo-chat-head .mini-brand { background: #33482a; }
.use-bars i:nth-child(6) { background: #9db77c; }
.demo-dashboard, .trend-panel { background: #222b22; }
.trend-switch { background: #172017; }
.trend-switch button[aria-pressed="true"] { background: var(--brand-fill); color: var(--brand-on-fill); }
.trend-point { fill: #222b22; stroke: #b2ce91; }
.trend-point.active { fill: var(--brand-fill); stroke: var(--brand-fill); }
.trend-points button[aria-pressed="true"], .trend-points button:hover { background: #34452f; border-color: #617957; }

/* Quieter bot identity and direct links in the walkthrough. */
.story-window .chat-title .mini-brand { background: #263d20; }
[data-theme="dark"] .story-window .chat-title .mini-brand { background: #181b19; }
.story-bot-link { display: grid; gap: 4px; color: var(--ink); text-decoration: none; width: fit-content; }
.story-bot-link:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.story-note a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.story-bot-link:focus-visible, .story-note a:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 4px; border-radius: 2px; }

.story-bot-open { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; margin: -8px -8px -8px 0; border-radius: 50%; color: var(--accent-ink); }
.story-bot-open svg { width: 21px; height: 21px; }
.story-bot-open:hover { background: var(--ice); }
.story-bot-open:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; }

.story-messages .story-next { min-height: 42px; padding: 10px 16px; margin-top: auto; align-self: flex-start; flex-shrink: 0; font-size: 13px; gap: 16px; }
.story-next svg { width: 18px; height: 18px; }

/* Keep the sticky walkthrough below the 90px floating header, with breathing room. */
@media (min-width: 801px) { .story-grid .story-visual { top: 114px; } }
.story-summary > strong { font-variant-numeric: tabular-nums; }
.story-summary .stacked-bar { background: var(--soft-surface); }
.story-summary .stacked-bar i { transform-origin: left center; background: #d5fb66; }
.story-summary .stacked-bar i:nth-child(2) { background: #a9cc62; }
.story-summary .stacked-bar i:nth-child(3) { background: #7eaa51; }
.story-summary .stacked-bar i:nth-child(4) { background: #577b3d; }
.story-summary .stacked-bar i:nth-child(5) { background: #dce8bd; }