/* The marketing "lit" hero skin - separated so the chat/answer CSS
   never depends on it (modularize F2). */
  /* ══ LIT SKIN (2026-07): dark, product-first homepage shell. ══════════
     The previous marketing homepage is preserved verbatim in
     homepage_classic.html. Every rule the chat/answer JS depends on still
     lives in the block above; this block only reskins the shell around
     the product (chrome, hero, bands, footer). The white "sheet" exists
     because the tab JS and every injected answer card assume a light
     ground: the product window stays light, the world around it goes dark. */

  :root {
    --lit-bg: #060D16;
    --lit-ink: #EAF1F7;
    --lit-mut: #9DAFC0;
    --lit-faint: #64798D;
    --lit-line: rgba(234, 241, 247, .08);
    --lit-blue: #6FB1E5;
    --lit-orange: #E8872A;
  }

  body { background: var(--lit-bg); }
  /* The dedicated /chat surface was designed on a light ground; keep it so.
     :has() is progressive enhancement; the #hero.chat-page rule below
     covers the visible area on browsers without it. */
  body:has(#hero.chat-page) { background: var(--lit-bg); }

  /* ── Chrome: same bar, night finish ── */
  .site-strip { background: #030910; border-bottom: 1px solid rgba(255, 255, 255, .05); }
  .site-topbar {
    background: rgba(6, 13, 22, .78);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--lit-line);
    position: sticky; top: 0; z-index: 60;
  }
  .site-topbar .brand { color: #fff; }
  .site-topbar .nav a, .site-topbar .nav-parent { color: #DEE7F0; }
  .site-topbar .nav a:hover, .site-topbar .nav-parent:hover { color: #fff; }
  .site-topbar .nav a.active { color: #fff; }
  /* The dropdown menu is a white card ON DESKTOP ONLY; its items keep
     light-theme ink there. The mobile block below undoes this, because
     inline in the dark sheet there is no card to sit on. */
  .site-topbar .nav-menu a { color: #3A4A5C; }
  .site-topbar .nav-menu a:hover { color: #003A66; }
  .site-topbar .nav-caret { color: inherit; opacity: .65; }
  /* City+ pill: the homepage's own topbar lacks the shared macro's CTA slot. */
  .site-topbar .right { color: var(--lit-faint); cursor: pointer; }
  .site-topbar .right kbd { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); color: #C6D4E2; }
  /* Hamburger + mobile accordion, night finish. */
  .site-topbar .nav-toggle { border-color: rgba(255, 255, 255, .16); }
  .site-topbar .nav-toggle span { background: #A9BACB; }
  @media (max-width: 760px) {
    .site-topbar .nav a,
    .site-topbar .nav-parent { border-top-color: rgba(255, 255, 255, .08); }
    /* No white card inline, so the dark-ink rule above must not apply. */
    .site-topbar .nav-menu { background: transparent; }
    .site-topbar .nav-menu a { color: #AEBECE; }
    .site-topbar .nav-menu a:hover,
    .site-topbar .nav-menu a:hover .nm-title { color: #fff; }
    .site-topbar .nav-menu .nm-title { color: inherit; }
  }

  /* ── Hero ── */
  .hero-lit { position: relative; overflow: hidden; background: var(--lit-bg); }
  #lit-sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
  .hero-lit::before {
    /* atmosphere: cold blue aurora up top, faint ember horizon below */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(1100px 520px at 50% -140px, rgba(45, 106, 153, .35), transparent 65%),
      radial-gradient(900px 420px at 82% 108%, rgba(232, 135, 42, .10), transparent 60%),
      radial-gradient(700px 380px at 12% 96%, rgba(45, 106, 153, .14), transparent 60%);
  }
  .hero-lit .hero-grid {
    position: relative; z-index: 2;
    max-width: 920px; margin: 0 auto;
    padding: clamp(34px, 6vh, 84px) 24px clamp(36px, 7vh, 90px);
    display: flex; flex-direction: column; align-items: center; text-align: center;
  }
  /* Mobile: drop the empty decorative top strip and trim the hero's top padding
     so more content sits above the fold. */
  @media (max-width: 640px) {
    .site-strip { display: none; }
    .hero-lit .hero-grid { padding-top: clamp(14px, 2vh, 26px); }
  }
  .lit-kicker {
    font-family: var(--mono); font-size: 11px; font-weight: 600;
    letter-spacing: .32em; text-transform: uppercase; color: var(--lit-blue);
    margin-bottom: clamp(14px, 2.4vh, 26px);
  }
  .lit-kicker .dot {
    display: inline-block; width: 6px; height: 6px; border-radius: 50%;
    background: var(--lit-orange); margin: 0 12px 2px; vertical-align: middle;
    box-shadow: 0 0 12px rgba(232, 135, 42, .9);
  }
  .lit-h1 {
    font-weight: 800; color: var(--lit-ink);
    font-size: clamp(36px, 5.2vw, 58px);
    line-height: 1.04; letter-spacing: -0.035em;
    text-wrap: balance; margin-bottom: 14px;
  }
  /* every rotating variant ("county" is the longest) stays on one line */
  @media (min-width: 760px) { .lit-h1 { white-space: nowrap; } }
  /* On mobile the rotating word changes length, so a natural wrap flips the
     headline between one and two lines and reflows the page. Force a fixed
     break after "Ask your" so it is ALWAYS two lines, whatever word rotates in
     and whatever the device width. Desktop keeps its single nowrap line. */
  .hero-br { display: none; }
  @media (max-width: 759px) { .hero-br { display: inline; } }
  /* The rotating geography sits in a slot whose width ANIMATES to each
     word's natural width: no snap reflow when the word changes, and no
     county-sized air pocket around short words like "city". The hidden
     ghost carries the current word and provides the measurement. */
  /* Rotating word slot, reusable anywhere: the ghost carries the current
     word and provides the width, which the slot eases to; the visible word
     crossfades. Shared clock in the rotator script below. */
  .rot-slot { display: inline-block; position: relative; white-space: nowrap; transition: width .38s ease; }
  .rot-ghost { visibility: hidden; display: inline-block; }
  .rot-word {
    position: absolute; left: 0; right: 0; top: 0; text-align: center;
    transition: opacity .32s ease, transform .32s ease;
  }
  .rot-word.is-swapping { opacity: 0; transform: translateY(-.16em); }
  .lit-h1 .glow {
    color: transparent;
    background: linear-gradient(100deg, #8FC4EE 0%, #E8872A 100%);
    -webkit-background-clip: text; background-clip: text;
  }
  .lit-sub {
    font-family: var(--mono); font-size: 14px; letter-spacing: .08em;
    color: var(--lit-orange); margin-bottom: 14px; min-height: 21px;
  }
  .lit-lede {
    max-width: 56ch; color: var(--lit-mut); font-size: 16px;
    line-height: 1.6; margin: 0 auto clamp(20px, 3.6vh, 40px);   /* auto: the box is narrower than the headline column */
  }
  .lit-lede b { display: block; margin-top: 8px; color: #D7E4F0; font-weight: 600; }
  /* Once a conversation starts, drop the lede so the sheet takes the stage. */
  .hero-lit.chat-active .lit-lede { display: none; }
  /* Phones: scale the whole hero cluster down TOGETHER so "community anything."
     fits the fixed two lines AND the headline:kicker:sub:lede ratios stay
     constant (each size is the headline's clamp times that element's ratio, so
     they scale in lockstep). They reach their original sizes by ~553px, so
     tablets and desktop are untouched. Placed after the base rules so it wins. */
  @media (max-width: 600px) {
    .lit-h1     { font-size: clamp(26px,   6.5vw,  36px); }
    .lit-kicker { font-size: clamp(8px,    2.0vw,  11px); }
    .lit-sub    { font-size: clamp(10px,   2.5vw,  14px); }
    .lit-lede   { font-size: clamp(11.5px, 2.9vw,  16px); }
  }

  /* ── The sheet: the light product window all existing controls live on ── */
  .hero-lit .search-col { width: 100%; }
  .lit-sheet {
    position: relative;
    /* The Tailwind CDN's preflight leaves inherited text on the system
       font stack, so anything not explicitly styled (helper lines, the
       inputs) drifted off-brand. Anchor the whole sheet to the page face;
       form controls do not inherit, so they are named too. */
    font-family: var(--sans);
    /* Frosted blue-gray, not stark white: the page's tones flow into the
       card, and the true-white composer and chips pop on top of it.
       Injected answer cards (white) still sit on a light ground. */
    background: linear-gradient(180deg, rgba(233, 240, 248, .97), rgba(222, 231, 241, .97));
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border-radius: 22px;
    padding: 18px 20px 22px;
    width: 100%; max-width: 860px; margin: 0 auto;
    text-align: left;
    box-shadow:
      0 30px 70px -28px rgba(2, 8, 16, .75),
      0 12px 30px -16px rgba(2, 8, 16, .55),
      0 0 0 1px rgba(255, 255, 255, .06);
  }
  .lit-sheet::before {
    /* hairline gradient ring: blue into ember, quieter than v1 */
    content: ""; position: absolute; inset: -1px; border-radius: 23px; padding: 1px;
    background: linear-gradient(135deg, rgba(143, 196, 238, .4), rgba(232, 135, 42, .3) 45%, rgba(143, 196, 238, .08) 75%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    pointer-events: none;
  }
  #hero:not(.chat-page) #ask-input,
  #hero:not(.chat-page) #place-input,
  #hero:not(.chat-page) #city-input { font-size: 16.5px; }
  /* fold fit: tighter examples block so the sheet lands above 100% viewport.
     Shared across all three tabs (Ask, Compare your city, Find a place) so the
     content hugs the input the same way in each. */
  #hero:not(.chat-page) .hero-examples { margin-top: 12px; min-height: 0 !important; }
  #hero:not(.chat-page) .hero-examples > span { margin-bottom: 7px; }
  #hero:not(.chat-page) .hero-examples .flex { gap: 7px; }

  /* Segmented control for the two modes (replaces the old floating pills).
     White track with a real border so the control reads as a clickable
     component against the sheet; inactive segments keep full-contrast navy
     text — gray-on-gray read as disabled next to the See it / Ask CTAs. */
  #hero-tabs {
    display: inline-flex; align-items: center;
    background: #fff; border: 1px solid #D0D5DD; border-radius: 999px;
    padding: 4px; gap: 3px;
    box-shadow: inset 0 1px 2px rgba(15, 27, 42, .06);
    margin-bottom: 12px;
  }
  .lit-tab {
    display: inline-flex; align-items: center; gap: 8px;
    border: 0; background: transparent; cursor: pointer;
    font-family: var(--sans); font-size: 14.5px; font-weight: 700;
    color: #003A66; padding: 10px 22px; border-radius: 999px;
    transition: color .15s, background .15s, box-shadow .15s;
  }
  .lit-tab:hover { background: rgba(13, 42, 64, .06); color: #003A66; }
  .lit-tab .material-icons-outlined { font-size: 18px; color: #2D6A99; }
  /* Active segment matches the Ask button, so the control and the
     composer read as one family (no stark white on white). */
  .lit-tab.is-active {
    background: linear-gradient(180deg, #0E5182, #003A66); color: #fff;
    box-shadow: 0 2px 6px rgba(0, 58, 102, .25);
  }
  .lit-tab.is-active:hover { color: #fff; }
  .lit-tab.is-active .material-icons-outlined { color: #F5A860; }

  .lit-sheet input, .lit-sheet textarea, .lit-sheet button { font-family: var(--sans); }

  /* ── Concealed-chat hero card (DW_CHAT_UI off) ──
     A one-tab bar reads as noise, so a value-led header replaces the
     tablist, and payoff chips preview the City+ vocabulary below the
     search field. All of it disappears when chat is revealed. */
  .sheet-head { display: flex; align-items: center; gap: 12px; margin: 2px 4px 16px; }
  .sheet-badge {
    flex: none; width: 40px; height: 40px; border-radius: 13px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #0E5182, #003A66);
    box-shadow: 0 2px 6px rgba(0, 58, 102, .25);
  }
  .sheet-badge .material-icons-outlined { color: #F5A860; font-size: 22px; }
  .sheet-head h2 {
    font-family: var(--sans); font-size: 20px; font-weight: 800;
    color: #0D2A40; letter-spacing: -0.01em; margin: 0 0 1px;
  }
  .sheet-head p { font-family: var(--sans); font-size: 13px; color: #64748B; margin: 0; }
  .payoff-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 14px; }
  .pf-label {
    font-family: var(--sans); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.14em; color: #94A3B8;
    margin-right: 2px;
  }
  /* One quiet family (white / navy / orange icon) - the page's own palette,
     no per-chip colors competing with the dark hero. */
  .pf-chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: var(--sans); font-size: 12px; font-weight: 600;
    padding: 4px 11px; border-radius: 999px;
    color: #1E3A52; background: #fff; border: 1px solid #D8DEE6;
    white-space: nowrap;
  }
  .pf-chip .material-icons-outlined { font-size: 14px; color: #E8872A; }

  /* Composer polish: softer border, faint inset, deeper Ask button.
     One PINNED height for all three composers and their buttons: a
     textarea (ask) and an input (city, place) derive different natural
     heights from font metrics, so left alone the three tabs render
     visibly different rows. Explicit geometry ends that. */
  #hero:not(.chat-page) #ask-form > .flex,
  #hero:not(.chat-page) #place-form > .flex,
  #hero:not(.chat-page) #city-form > .flex {
    border-color: #E4EAF1;
    box-shadow: inset 0 1px 2px rgba(15, 27, 42, .04);
    min-height: 68px; align-items: center;
  }
  /* Icon-only send buttons: a compact up-arrow squircle (the ChatGPT/Claude
     composer idiom) instead of text pills, one square size for all three. */
  #hero:not(.chat-page) #ask-submit,
  #hero:not(.chat-page) #city-form button[type="submit"],
  #hero:not(.chat-page) #place-form button[type="submit"] {
    width: 46px; height: 46px; padding: 0; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 15px;
    background: linear-gradient(180deg, #0E5182, #003A66);
    box-shadow: 0 2px 8px rgba(0, 58, 102, .28);
  }
  #hero:not(.chat-page) #ask-submit .material-icons-outlined,
  #hero:not(.chat-page) #city-form button[type="submit"] .material-icons-outlined,
  #hero:not(.chat-page) #place-form button[type="submit"] .material-icons-outlined {
    font-size: 22px;
  }
  /* Concealed-chat mode: the city composer's button becomes a labeled
     Search pill (lookup grammar), overriding the up-arrow squircle. */
  #hero:not(.chat-page) #city-form button.city-search-btn[type="submit"] {
    width: auto; padding: 0 20px 0 15px; gap: 6px;
    border-radius: 999px; font-size: 14.5px; font-weight: 700;
  }
  #hero:not(.chat-page) #city-form button.city-search-btn[type="submit"] .material-icons-outlined {
    font-size: 19px;
  }
  /* A flex-1 input keeps its intrinsic min-width, so on narrow phones the row
     couldn't shrink and pushed the Ask button off-screen. Let it shrink, and
     trim the composer padding on the smallest widths. */
  #ask-input, #place-input, #city-input { min-width: 0; }
  .ask-break { display: none; }   /* forces the button to a new row on mobile only */
  /* The question box is now a textarea that grows with the question (JS sets the
     height); keep the page font, a comfortable line-height, and no resize grip. */
  textarea#ask-input { font-family: inherit; line-height: 1.45; resize: none; overflow-y: hidden; }
  #ask-form > .flex, #place-form > .flex, #city-form > .flex { max-width: 100%; }
  /* On phones the inline Ask/Search button leaves the input too narrow to read
     the question. Turn the pill into a small stacked card: input (+ help) on
     the top row, the button full-width below, so the input gets the whole row. */
  @media (max-width: 640px) {
    /* Center the headline cluster in roughly the TOP HALF of the screen (not the
       whole viewport, which left a big empty zone up top and hid the box), so the
       hero leads and the composer peeks in below it. */
    .hero-lit .mission-col {
      min-height: 50svh;
      display: flex; flex-direction: column; justify-content: center;
    }
    .hero-lit .search-col { margin-top: 0; }
    /* Scale the whole composer DOWN to match the smaller hero (it was dwarfing it). */
    .lit-sheet { padding: 13px 13px 15px; border-radius: 18px; }
    /* Full-width segmented control: three equal tabs, icons dropped and labels
       on one line each, so they stop cramming and wrapping against each other. */
    #hero-tabs { display: flex; align-items: stretch; width: 100%; padding: 3px; gap: 3px; margin-bottom: 10px; }
    .lit-tab { flex: 1; justify-content: center; align-items: center; text-align: center; font-size: 11.5px; line-height: 1.2; padding: 9px 4px; gap: 0; }
    .lit-tab .material-icons-outlined { display: none; }
    /* All three composers (City+, Ask, Find a place) keep the same single-row
       pill on mobile: input left, compact button inline right. The Ask textarea
       still grows downward with a long question; the button stays centered. */
    #hero:not(.chat-page) #ask-form > .flex > button[type="submit"],
    #hero:not(.chat-page) #place-form > .flex > button[type="submit"],
    #hero:not(.chat-page) #city-form > .flex > button[type="submit"] {
      flex: 0 0 auto; width: 40px; height: 40px; padding: 0; border-radius: 12px;
    }
    #hero:not(.chat-page) #ask-form > .flex > button[type="submit"] .material-icons-outlined,
    #hero:not(.chat-page) #place-form > .flex > button[type="submit"] .material-icons-outlined,
    #hero:not(.chat-page) #city-form > .flex > button[type="submit"] .material-icons-outlined {
      display: inline-flex; font-size: 20px;
    }
    /* Concealed-chat mode keeps the labeled Search pill on phones too. */
    #hero:not(.chat-page) #city-form > .flex > button.city-search-btn[type="submit"] {
      width: auto; padding: 0 14px 0 11px; border-radius: 999px;
      font-size: 13px; font-weight: 700;
    }
    /* Phones: one-line header (badge + title), no subline or label row,
       so the whole card fits the first viewport. */
    .sheet-head { gap: 9px; margin: 1px 1px 11px; }
    .sheet-badge { width: 32px; height: 32px; border-radius: 10px; }
    .sheet-badge .material-icons-outlined { font-size: 18px; }
    .sheet-head h2 { font-size: 16.5px; }
    .sheet-head p { display: none; }
    .payoff-row { gap: 5px; margin-top: 11px; }
    .pf-label { display: none; }
    .pf-chip { font-size: 11px; padding: 3px 8px; }
    #hero:not(.chat-page) #ask-input, #hero:not(.chat-page) #place-input, #hero:not(.chat-page) #city-input { font-size: 13.5px; }
    /* The inline chip lists (all three panels) are replaced on mobile by the
       trigger + bottom sheet pattern. */
    #ask-examples, #panel-city .hero-examples, #panel-place .hero-examples { display: none; }
  }

  /* ── Sample-questions bottom sheet (mobile) ── desktop keeps the inline chips. */
  .q-trigger, .q-sheet, .q-backdrop { display: none; }
  @media (max-width: 640px) {
    .q-trigger {
      display: inline-flex; align-items: center; gap: 8px; width: 100%;
      margin-top: 14px; padding: 10px 14px; border-radius: 12px;
      background: rgba(13, 42, 64, .05); border: 1px solid #E1E7EE;
      color: #1E3A52; font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer;
    }
    .q-trigger .material-icons-outlined { font-size: 17px; color: #E8872A; }
    .q-trigger .q-arrow { margin-left: auto; font-size: 18px; color: #94A3B8; }
    /* The /chat page is dark: the trigger needs light text and a visible frame. */
    #hero.chat-page .q-trigger { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #C6D4E2; }
    #hero.chat-page .q-trigger .q-arrow { color: #8A99AC; }
    .q-backdrop {
      display: block; position: fixed; inset: 0; z-index: 300;
      background: rgba(4, 9, 15, .55); opacity: 0; pointer-events: none; transition: opacity .28s ease;
    }
    .q-backdrop.open { opacity: 1; pointer-events: auto; }
    .q-sheet {
      display: flex; flex-direction: column;
      position: fixed; left: 0; right: 0; bottom: 0; z-index: 301;
      background: #fff; border-radius: 20px 20px 0 0;
      padding: 8px 18px calc(20px + env(safe-area-inset-bottom));
      max-height: 82vh; overflow-y: auto;
      /* visibility:hidden guarantees it's gone when closed (translateY alone can
         peek above the iOS toolbar); it flips visible on open, hidden after the
         slide-out finishes. */
      transform: translateY(100%); visibility: hidden;
      transition: transform .3s cubic-bezier(.2, .85, .25, 1), visibility 0s linear .3s;
      box-shadow: 0 -14px 44px rgba(2, 8, 16, .45);
    }
    .q-sheet.open {
      transform: translateY(0); visibility: visible;
      transition: transform .3s cubic-bezier(.2, .85, .25, 1), visibility 0s;
    }
    .q-grip { width: 40px; height: 4px; border-radius: 2px; background: #D5DBE3; margin: 8px auto 12px; flex: none; }
    .q-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
    .q-title { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6A7585; }
    .q-close { border: 0; background: transparent; color: #94A3B8; cursor: pointer; padding: 4px; display: inline-flex; }
    .q-close .material-icons-outlined { font-size: 22px; }
    .q-list { display: flex; flex-direction: column; }
    .q-sheet .q-row {
      display: flex; align-items: center; width: 100%; margin: 0;
      background: transparent; border: 0; border-bottom: 1px solid #EEF1F5; border-radius: 0;
      padding: 9px 2px; font-size: 14.5px; line-height: 1.3; color: #1E293B; white-space: normal;
    }
    .q-sheet .q-row:last-child { border-bottom: 0; }
    .q-sheet .q-row:hover { background: transparent; color: #2D6A99; box-shadow: none; }
    .q-sheet .go-chip.q-row .material-icons-outlined { font-size: 17px; margin-right: 10px; }
    .q-seeall { display: block; margin-top: 10px; padding: 12px 2px 2px; color: #2D6A99; font-weight: 600; font-size: 13.5px; text-decoration: none; }
  }

  /* ══ /chat v3: Claude-desktop grammar in the homepage's night. ══════
     One continuous canvas: assistant prose sits directly on the dark in
     light ink; the crown is a dark glass panel; every chart/stat card is
     a floating moonlit artifact; a fixed sidebar replaces the top nav.
     The bare embed (?bare=1) keeps stock light components throughout. ── */
  #hero.chat-page { background: var(--lit-bg); }
  #hero.chat-page #lit-sky { display: none; }
  #hero.chat-page::before {
    background:
      radial-gradient(1000px 420px at 50% -160px, rgba(45, 106, 153, .28), transparent 65%),
      radial-gradient(800px 380px at 85% 110%, rgba(232, 135, 42, .07), transparent 60%);
  }
  /* Locked (canned-only) mode: the parent page's minted question menu is
     the only input - the composer and suggestion chips disappear. Set by
     the dwlock postMessage from the City+ drawer. */
  body.dw-locked #ask-form,
  body.dw-locked #ask-examples,
  body.dw-locked .ai-chips,
  body.dw-locked .q-trigger { display: none !important; }

  #hero.chat-page .lit-sheet {
    background: transparent; border-radius: 0; padding: 0;
    max-width: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  #hero.chat-page .lit-sheet::before { display: none; }
  #hero.chat-page .hero-grid {
    max-width: 1160px; align-items: stretch; text-align: left;
  }
  #hero.chat-page #chat-log { padding: 8px 2px 20px; }

  /* ── sidebar ── */
  .chat-side {
    position: fixed; left: 0; top: 0; bottom: 0; width: 264px; z-index: 70;
    background: #081019; border-right: 1px solid rgba(234, 241, 247, .07);
    display: flex; flex-direction: column; gap: 4px; padding: 18px 14px 16px;
  }
  .cs-brand { font-weight: 700; color: #fff; font-size: 15px; letter-spacing: -0.01em;
    text-decoration: none; padding: 2px 10px 14px; }
  .cs-brand span { color: var(--lit-orange); }
  .cs-new {
    display: flex; align-items: center; gap: 9px;
    font-size: 13.5px; font-weight: 600; color: #EAF1F7;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(234, 241, 247, .12);
    border-radius: 10px; padding: 9px 12px; text-decoration: none; margin-bottom: 10px;
  }
  .cs-new:hover { background: rgba(255, 255, 255, .10); }
  .cs-new .material-icons-outlined { font-size: 17px; color: var(--lit-blue); }
  .cs-nav { display: flex; flex-direction: column; gap: 2px; }
  .cs-nav a {
    display: flex; align-items: center; gap: 10px;
    font-size: 13.5px; color: #A9BACB; text-decoration: none;
    padding: 8px 10px; border-radius: 8px;
  }
  .cs-nav a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
  .cs-nav .material-icons-outlined { font-size: 17px; color: #64798D; }
  .cs-nav a:hover .material-icons-outlined { color: var(--lit-blue); }
  .cs-sec {
    font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase; color: #64798D; padding: 16px 10px 6px;
  }
  .cs-note { font-size: 12px; line-height: 1.55; color: #64798D; padding: 0 10px; }
  #cs-recents { display: flex; flex-direction: column; gap: 1px; overflow-y: auto; min-height: 0; }
  .cs-item {
    display: flex; align-items: center; gap: 6px;
    padding: 7px 10px; border-radius: 8px; cursor: pointer;
    color: #A9BACB; font-size: 13px; text-align: left;
    background: transparent; border: none; font-family: inherit; width: 100%;
  }
  .cs-item .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cs-item:hover { background: rgba(255, 255, 255, .05); color: #fff; }
  .cs-item.active { background: rgba(255, 255, 255, .07); color: #fff; }
  /* Origin badge: where an embedded conversation started (City+ drawer);
     links back to that page, full label in the tooltip. */
  .cs-origin {
    flex: none; font-size: 10px; font-weight: 700; letter-spacing: .04em;
    color: #E8872A; border: 1px solid rgba(232, 135, 42, .45);
    border-radius: 999px; padding: 1px 7px; text-decoration: none;
    line-height: 1.4;
  }
  .cs-origin:hover { background: rgba(232, 135, 42, .15); }
  .cs-del {
    flex: none; border: none; background: transparent; cursor: pointer;
    color: #64798D; font-size: 14px; line-height: 1; padding: 2px 4px;
    border-radius: 5px; visibility: hidden; font-family: inherit;
  }
  .cs-item:hover .cs-del { visibility: visible; }
  .cs-del:hover { color: #fff; background: rgba(255, 255, 255, .09); }
  .cs-foot {
    margin-top: auto; display: flex; align-items: center; gap: 10px;
    padding: 12px 10px 2px; border-top: 1px solid rgba(234, 241, 247, .07);
    color: #C6D4E2; font-size: 13px;
  }
  .cs-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255, 255, 255, .08); color: #AFC2D4;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 700;
  }
  html.chat-bare .chat-side { display: none; }
  @media (max-width: 900px) { .chat-side { display: none; } }
  @media (min-width: 901px) {
    html:not(.chat-bare) body:has(.chat-side) .site-strip,
    html:not(.chat-bare) body:has(.chat-side) .site-topbar { display: none; }
    html:not(.chat-bare) #hero.chat-page { margin-left: 264px; }
  }

  /* ── landing ── */
  #hero.chat-page .chat-hero-head { margin: 30px 0 10px; }
  #hero.chat-page .chat-hero-head h1 { color: var(--lit-ink); letter-spacing: -0.03em; }
  #hero.chat-page .chat-hero-head p { color: var(--lit-mut); }
  html:not(.chat-bare) #hero.chat-page #ask-form { border-top: none; padding-top: 14px; }
  html:not(.chat-bare) #hero.chat-page #ask-form > .flex {
    border-color: transparent;
    box-shadow: 0 24px 60px -20px rgba(2, 8, 16, .9), 0 0 0 1px rgba(255, 255, 255, .10);
  }
  html:not(.chat-bare) #hero.chat-page #ask-input { font-size: 15px; }
  html:not(.chat-bare) #hero.chat-page .ask-chip {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .13);
    color: #AFC2D4;
  }
  html:not(.chat-bare) #hero.chat-page .ask-chip:hover {
    background: rgba(255, 255, 255, .09);
    border-color: rgba(255, 255, 255, .32);
    color: #fff; box-shadow: none;
  }
  html:not(.chat-bare) #hero.chat-page #ask-examples > span { color: var(--lit-faint); }

  /* ── conversation: prose directly on the night ── */
  html:not(.chat-bare) #hero.chat-page .chat-msg { margin: 26px 0; }
  html:not(.chat-bare) #hero.chat-page .chat-msg.user .bubble {
    background: linear-gradient(180deg, #0E5182, #003A66);
    box-shadow: 0 12px 30px -14px rgba(2, 8, 16, .8), 0 0 0 1px rgba(255, 255, 255, .07);
  }
  html:not(.chat-bare) #hero.chat-page .chat-msg.assistant .ai-sparkle {
    color: var(--lit-orange); margin-top: 6px;
    filter: drop-shadow(0 0 6px rgba(232, 135, 42, .55));
  }
  html:not(.chat-bare) #hero.chat-page .ai-text { color: #D5E1ED; font-size: 15.5px; line-height: 1.7; max-width: 78ch; }
  html:not(.chat-bare) #hero.chat-page .ask-log-line { color: #7E93A9; }
  html:not(.chat-bare) #hero.chat-page .ask-log-line:last-child {
    background-image: linear-gradient(100deg, #8FA5BC 42%, #F2F8FE 50%, #8FA5BC 58%); }
  html:not(.chat-bare) #hero.chat-page .ai-text a { color: #7FB7E8; }
  html:not(.chat-bare) #hero.chat-page .ai-text a:hover { color: #A9D0F5; }
  html:not(.chat-bare) #hero.chat-page .ai-thinking span { background: #64798D; }

  /* ── the crown: a dark glass panel ── */
  html:not(.chat-bare) #hero.chat-page .dwc-crown {
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(234, 241, 247, .09);
    border-radius: 14px; box-shadow: none; margin: 2px 0 16px;
  }
  html:not(.chat-bare) #hero.chat-page .dwc-seam {
    background: transparent; border: none; border-left: 3px solid rgba(232, 178, 101, .6);
    border-radius: 0; color: #DFB27A; padding: 2px 0 2px 12px;
  }
  html:not(.chat-bare) #hero.chat-page .dwc-foot { background: transparent; border-top: none; padding: 4px 10px 10px; margin-top: 2px; }
  html:not(.chat-bare) #hero.chat-page .dwc-linkplace { color: #93A5B7; }
  html:not(.chat-bare) #hero.chat-page .dwc-linkrow a { color: #7FB7E8; border-bottom-color: rgba(127,183,232,.35); }
  html:not(.chat-bare) #hero.chat-page .dwc-linkrow a:hover { border-bottom-color: #7FB7E8; }
  html:not(.chat-bare) #hero.chat-page .dwc-copy { background: transparent; border-color: transparent; color: #7FA8CC; }
  html:not(.chat-bare) #hero.chat-page .dwc-copy:hover { background: rgba(255, 255, 255, .06); border-color: transparent; color: #fff; }
  /* the casual crown ("conversation + receipts"): its light-theme colors were
     never adapted, so the reply paragraph rendered near-black on the dark glass.
     Mirror the structured crown's night palette. */
  html:not(.chat-bare) #hero.chat-page .dwc-reply { color: #E2EAF3; }
  html:not(.chat-bare) #hero.chat-page .dwc-srcline { color: #93A5B7; }
  html:not(.chat-bare) #hero.chat-page .dwc-srcline .dwc-srclink { color: #AEBECD; border-bottom-color: rgba(234, 241, 247, .22); }
  html:not(.chat-bare) #hero.chat-page .dwc-srcline .dwc-srclink:hover { color: #7FB7E8; border-bottom-color: #7FB7E8; }
  html:not(.chat-bare) #hero.chat-page .dwc-how { background: transparent; border-color: rgba(234, 241, 247, .16); color: #93A5B7; }
  html:not(.chat-bare) #hero.chat-page .dwc-how:hover { color: #DCE7F2; border-color: #6FB1E5; }
  html:not(.chat-bare) #hero.chat-page .dwc-panel { border-top-color: rgba(234, 241, 247, .1); }
  html:not(.chat-bare) #hero.chat-page .dwc-methods { background: rgba(255, 255, 255, .03); border-color: rgba(234, 241, 247, .1); color: #AEBECD; }

  /* clarify options on the night */
  html:not(.chat-bare) #hero.chat-page .dwc-clarify-q { color: #E2EAF3; }
  html:not(.chat-bare) #hero.chat-page .dwc-clarify-opt { background: rgba(255, 255, 255, .04); border-color: rgba(234, 241, 247, .12); }
  html:not(.chat-bare) #hero.chat-page .dwc-clarify-opt:hover:not(:disabled) { background: rgba(255, 255, 255, .08); border-color: #6FB1E5; }
  html:not(.chat-bare) #hero.chat-page .dwc-clarify-opt.chosen { background: rgba(111, 177, 229, .14); border-color: #6FB1E5; }
  html:not(.chat-bare) #hero.chat-page .dwc-clarify-label { color: #DCE7F2; }
  html:not(.chat-bare) #hero.chat-page .dwc-clarify-why { color: #93A5B7; }
  html:not(.chat-bare) #hero.chat-page .dwc-clarify-form input { background: rgba(255, 255, 255, .06); color: #E2EAF3; border-color: rgba(234, 241, 247, .14); }

  /* ── artifacts: every data card floats as moonlit paper ── */
  html:not(.chat-bare) #hero.chat-page .ai-cards { gap: 14px; }
  html:not(.chat-bare) #hero.chat-page .ai-card, html:not(.chat-bare) #hero.chat-page .rk-card {
    background: linear-gradient(180deg, #EEF2F8, #E3EAF2);
    border: none; border-radius: 14px;
    box-shadow: 0 22px 55px -26px rgba(2, 8, 16, .9), 0 0 0 1px rgba(255, 255, 255, .07);
  }
  html:not(.chat-bare) #hero.chat-page .ai-card { padding: 16px 18px; }

  /* chart and table interiors: hairline frames, one accent, no gray boxes */
  html:not(.chat-bare) #hero.chat-page .aimap-wrap { background: transparent; border: none; padding: 0; }
  html:not(.chat-bare) #hero.chat-page .tract-stat { background: rgba(15, 27, 42, .05); }
  html:not(.chat-bare) #hero.chat-page .demo-scroll { border-color: rgba(15, 27, 42, .08); }
  html:not(.chat-bare) #hero.chat-page .demo-table th, html:not(.chat-bare) #hero.chat-page .dw-table th { background: #E9EEF5; }
  html:not(.chat-bare) #hero.chat-page .demo-table tbody tr:nth-child(even) { background: rgba(15, 27, 42, .025); }
  html:not(.chat-bare) #hero.chat-page .aic-axis { stroke: rgba(15, 27, 42, .12); }
  html:not(.chat-bare) #hero.chat-page .aic-area { opacity: .1; }
  html:not(.chat-bare) #hero.chat-page .ai-data-btn { background: transparent; border-color: rgba(15, 27, 42, .14); }
  html:not(.chat-bare) #hero.chat-page .ai-source { color: #8A96A5; }

  /* ── stat-card layout: the chart is the hero, not the text stack.
     Block flow lets the source and actions share ONE quiet footer row
     instead of four stacked rows; a lone stat card widens so the line
     graph stretches; Explore deeper calms to a ghost chip. ── */
  html:not(.chat-bare) #hero.chat-page .ai-card { display: block; }
  html:not(.chat-bare) #hero.chat-page .ai-card .ai-value { font-size: 26px; margin-top: 2px; }
  html:not(.chat-bare) #hero.chat-page .ai-card .ai-chart { margin-top: 14px; }
  html:not(.chat-bare) #hero.chat-page .ai-card .ai-source,
  html:not(.chat-bare) #hero.chat-page .ai-card .ai-data-btn,
  html:not(.chat-bare) #hero.chat-page .ai-card .ai-link,
  html:not(.chat-bare) #hero.chat-page .ai-card > .ai-rich {
    display: inline-flex; align-items: center; vertical-align: middle;
    margin: 12px 14px 0 0; font-size: 12px;
  }
  html:not(.chat-bare) #hero.chat-page .ai-card .ai-link { font-weight: 600; }
  html:not(.chat-bare) #hero.chat-page .ai-card > .ai-rich {
    background: transparent; border-color: rgba(176, 100, 15, .35);
    box-shadow: none; padding: 3px 10px; font-size: 12px;
  }
  html:not(.chat-bare) #hero.chat-page .ai-cards:has(> .ai-card:only-child:not(.aimap-card):not(.ml-card):not(.demo-card):not(.tract-card)) {
    grid-template-columns: minmax(0, 480px) !important;
  }

  /* follow-ups and in-prose rich links on the night */
  html:not(.chat-bare) #hero.chat-page .ai-chip { background: rgba(255, 255, 255, .04); border-color: rgba(127, 183, 232, .35); color: #9CC4E8; }
  html:not(.chat-bare) #hero.chat-page .ai-chip:hover { background: rgba(127, 183, 232, .12); border-color: #7FB7E8; }
  html:not(.chat-bare) #hero.chat-page .ai-text .ai-rich {
    background: rgba(232, 135, 42, .10); border-color: rgba(232, 135, 42, .35);
    color: #F0BE8A; box-shadow: none;
    margin: 0 2px; padding: 2px 9px; vertical-align: 1px;
  }
  html:not(.chat-bare) #hero.chat-page .ai-text .ai-rich:hover { border-color: #F0A868; box-shadow: none; }

  /* ── bare embed (?bare=1): flat light, stock components ── */
  html.chat-bare body, html.chat-bare body:has(#hero.chat-page) { background: #F8FAFC; }
  html.chat-bare #hero.chat-page { background: #F8FAFC; }
  html.chat-bare #hero.chat-page::before { display: none; }

  /* ── Proof band ── */
  .lit-band {
    border-top: 1px solid var(--lit-line);
    background: linear-gradient(180deg, rgba(45, 106, 153, .07), transparent);
  }
  .lit-band-in {
    max-width: 1080px; margin: 0 auto; padding: 58px 24px;
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 32px 24px; text-align: center;
  }
  @media (max-width: 760px) { .lit-band-in { grid-template-columns: repeat(2, 1fr); padding: 44px 20px; } }
  .lit-fig {
    font-family: var(--mono); font-weight: 600; letter-spacing: -0.02em;
    font-size: clamp(30px, 4vw, 44px); color: var(--lit-ink); line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .lit-fig .suf { color: var(--lit-orange); }
  .lit-fig-l { margin-top: 10px; font-size: 13px; color: var(--lit-faint); line-height: 1.45; }

  /* ── Partner band: speaks to the institutions that fund a city ── */
  .lit-partner { border-top: 1px solid var(--lit-line); }
  .lit-partner-in { max-width: 880px; margin: 0 auto; padding: 96px 24px 104px; text-align: center; }
  .lit-partner .lit-kicker { color: var(--lit-orange); letter-spacing: .26em; margin-bottom: 22px; }
  .lit-h2 {
    font-weight: 800; color: var(--lit-ink);
    font-size: clamp(30px, 4.6vw, 46px);
    letter-spacing: -0.03em; line-height: 1.08;
    text-wrap: balance; margin-bottom: 18px;
  }
  .lit-partner p.body {
    max-width: 62ch; margin: 0 auto 40px;
    color: var(--lit-mut); font-size: 16.5px; line-height: 1.7;
  }
  .lit-partner p.body b { color: #D7E4F0; font-weight: 600; }
  .lit-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
  .lit-cta {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--lit-orange); color: #14100A; font-weight: 700; font-size: 15px;
    padding: 13px 26px; border-radius: 999px; text-decoration: none;
    box-shadow: 0 10px 34px -8px rgba(232, 135, 42, .55);
    transition: transform .15s, box-shadow .15s, background .15s;
  }
  .lit-cta:hover { background: #F09540; transform: translateY(-1px); box-shadow: 0 14px 40px -8px rgba(232, 135, 42, .65); }
  .lit-cta-ghost {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--lit-ink); font-weight: 600; font-size: 15px;
    padding: 13px 24px; border-radius: 999px; text-decoration: none;
    border: 1px solid rgba(234, 241, 247, .22);
    transition: border-color .15s, background .15s;
  }
  .lit-cta-ghost:hover { border-color: rgba(234, 241, 247, .5); background: rgba(255, 255, 255, .04); }
  .lit-note {
    margin-top: 26px; font-family: var(--mono); font-size: 11.5px;
    letter-spacing: .06em; color: var(--lit-faint);
  }
  .lit-note a { color: var(--lit-blue); text-decoration: none; }
  .lit-note a:hover { text-decoration: underline; }

  /* ── Footer ── */
  .lit-footer { border-top: 1px solid var(--lit-line); background: #04090F; }
  .lit-footer-in {
    max-width: 1080px; margin: 0 auto; padding: 54px 24px 46px;
    display: grid; grid-template-columns: 1fr auto auto; align-items: start;
    gap: 40px 64px; font-size: 13.5px;
  }
  @media (max-width: 760px) {
    .lit-footer-in { grid-template-columns: 1fr; gap: 28px; }
  }
  .lit-footer .fbrand { font-weight: 700; color: #fff; font-size: 15px; margin-bottom: 10px; }
  .lit-footer .fbrand span { color: var(--lit-orange); }
  .lit-footer p { color: var(--lit-faint); line-height: 1.65; max-width: 40ch; }
  .lit-footer h4 {
    color: #C6D4E2; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .14em; margin-bottom: 12px;
  }
  .lit-footer ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px; color: var(--lit-mut);
  }
  /* Data and Contact are two left-aligned link columns grouped on the right. */
  .lit-footer .foot-contact { text-align: left; }
  .lit-footer ul a { color: var(--lit-mut); text-decoration: none; }
  .lit-footer ul a:hover { color: #fff; }
  .lit-footer .fbase {
    max-width: 1080px; margin: 0 auto; padding: 0 24px 34px;
    font-family: var(--mono); font-size: 11px; color: #465B6F; letter-spacing: .05em;
  }

  @media (prefers-reduced-motion: reduce) {
    .lit-cta, .lit-cta-ghost { transition: none; }
  }