/*
 * Home page — single-viewport hero with mouse-reactive background.
 * Loaded only when body.home-page is present.
 */

/* ── Kill the topnav padding-top and container gutters so hero fills 100vh ── */
.home-page .content {
  padding-top: 0;
  background: var(--varial-nav, #0D1B2E);
}

.home-page .content > .container-fluid {
  /* !important: base.html's wrapper carries Bootstrap's .py-3, which sets
     padding with !important; this is the only way to zero it out. */
  padding: 0 !important;
  max-width: none;
}


/* ── Hero section ──────────────────────────────────────────────────────── */
.home-hero {
  position: relative;
  z-index: 1;
  height: 100vh;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Layered radial glows — depth without texture */
  background:
    radial-gradient(ellipse 55% 55% at 68% 42%, rgba(37, 99, 235, 0.14) 0%, transparent 65%),
    radial-gradient(ellipse 35% 40% at 20% 75%, rgba(245, 158, 11, 0.05) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 50% 0%,  rgba(37, 99, 235, 0.07) 0%, transparent 70%),
    var(--varial-nav, #0D1B2E);
  color: var(--varial-white, #ffffff);
}

/* Dot-grid texture — paints before hero children so no z-index needed */
.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

/* ── Brand strip ─────────────────────────────────────────────────────── */
.home-brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  flex-shrink: 0;
}

.home-brand-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.home-brand-logo {
  height: 32px;
  width: auto;
  display: block;
}

.home-nav-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Top-nav links (Contact, Login) — plain amber text, no button chrome. */
.home-nav-link,
.home-nav-login {
  display: inline-flex;
  align-items: center;
  font-family: var(--varial-font-heading, 'Space Grotesk', sans-serif);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--varial-amber, #f59e0b);
  text-decoration: none;
  transition: color 0.15s ease;
}

.home-nav-link:hover,
.home-nav-login:hover {
  color: var(--varial-amber-light, #fcd34d);
}

/* ── Content — two-column hero: headline left, demo right ── */
.home-content {
  flex: 1;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 3.5rem;
  min-height: 0;
}

/* ── Left: headline, copy, CTA ───────────────────────────────────────── */
.home-left {
  flex: 0 0 33%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 0;
  padding: 2.5rem 3rem 2.5rem 0;
}

/* Eyebrow sits snug above the headline — they read as one unit */
.home-left .home-eyebrow {
  margin-bottom: 0.5rem;
}

/* Headline needs generous breathing room before the body copy */
.home-left .home-h1 {
  margin-bottom: 1.5rem;
}

/* Body copy and proof items are a pair */
.home-left .home-sub {
  margin-bottom: 0.75rem;
}

.home-left .home-proof {
  margin-bottom: 2rem;
}

.home-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--varial-amber, #F59E0B);
  margin: 0;
}

/* Scoped under .home-page so this (0,2,0) beats branding.css's
   `.content h1` heading-colour rule (0,1,1) without !important. */
.home-page .home-h1 {
  font-family: 'Space Grotesk', sans-serif;
  /* Sized so the longest cycled word ("valuations") fits "Build your <word>"
     on one line across widths; nowrap stops it dropping to a new line. */
  font-size: clamp(1.6rem, 2.3vw, 2.4rem);
  white-space: nowrap;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--varial-white, #ffffff);
  margin: 0;
  /* Preserve the pre-rescope computed margin: .home-left .home-h1 (1.5rem,
     equal specificity, earlier in source) used to win this contest. */
  margin-bottom: 1.5rem;
}

.home-h1-cycle {
  color: var(--varial-white, #ffffff);
}

.home-h1-cycle::after {
  content: '|';
  color: var(--varial-amber, #F59E0B);
  font-weight: 300;
  animation: home-cursor-blink 0.85s step-end infinite;
  margin-left: 1px;
}

@keyframes home-cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.home-sub {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.68);
  margin: 0;
}

.home-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.proof-item {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.50);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 99px;
  padding: 0.2rem 0.65rem;
  white-space: nowrap;
}

.proof-sep {
  display: none;
}

/* Two equal-width CTAs at every screen size (#4066). A 2-column grid forces exactly
   equal columns regardless of the wrapper asymmetry — the blue button is nested in
   .btn-cta-wrap while the green one is a bare .btn — capped so they don't stretch wide
   on the desktop hero. */
.home-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 1.25rem;
  max-width: 30rem;
  /* Query container so the CTA labels can scale to the width the buttons actually
     get (container query units below), not the viewport — the row is width-capped,
     so viewport units kept growing the font after the buttons stopped growing. */
  container-type: inline-size;
}

.home-cta-row .btn,
.home-cta-row .btn-cta-wrap {
  width: 100%;
  min-width: 0;
}

/* Keep each CTA on a single line, and scale the label to the width each button
   actually gets — cqi units are a share of the row's inline size, and the row is
   width-capped, so this tracks the button, not the viewport. Clamped so both labels
   fit with even padding at EVERY width, desktop included. The .home-page prefix
   out-specifies branding.css's hero-CTA font. (#4066) */
.home-page .home-cta-row .btn {
  white-space: nowrap;
  font-size: clamp(0.66rem, 3.2cqi, 0.98rem);
}

.btn-cta-wrap {
  position: relative;
  display: inline-flex;
  align-self: flex-start;
}

/* ── How it works — persona journey ──────────────────────────────────── */
.home-usecases {
  background: var(--varial-nav, #0D1B2E);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 4rem 3rem 4.5rem;
}

.home-usecases-inner {
  max-width: 1180px;
  margin: 0 auto;
}

.home-usecases-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto 2.75rem;
}

/* Scoped past branding.css's `.content h2` (0,1,1) — same pattern as the hero
   h1's `.home-page .home-h1` — so the heading stays white on the dark band. */
.home-usecases .home-usecases-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--varial-white, #ffffff);
  margin: 0.5rem 0 0.75rem;
}

.home-usecases-sub {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.60);
  margin: 0;
}

/* Persona-per-row comparison table: a label column (customer type) on the
   left, Spot and VAR running across as the two data columns so the same
   persona's row reads straight across both products. Flat grid children in
   row-major DOM order (no per-row wrapper) — nth-child math below draws the
   column/row dividers. Wrapped in a horizontal-scroll container rather than
   reflowing to stacked cards on narrow viewports (same "keep the table
   shape, scroll it" pattern used for data tables elsewhere in the app). */
.usecase-table-wrap {
  overflow-x: auto;
}

.usecase-table {
  display: grid;
  grid-template-columns: minmax(140px, 190px) minmax(280px, 1fr);
  min-width: 520px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 0.75rem;
  overflow: hidden;
}

.usecase-table-cell {
  display: flex;
  align-items: center;
  padding: 1rem 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.64);
}

/* Vertical divider between the label column and the single VAR column —
   the second cell (even) of each 2-column row. */
.usecase-table-cell:nth-child(2n) {
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}

/* Horizontal dividers between rows — every row after the header (the first
   2 cells). */
.usecase-table-cell:nth-child(n+3) {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.usecase-table-cell--label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--varial-white, #ffffff);
  background: rgba(255, 255, 255, 0.02);
}

/* "You" (header row) and "Try us today!" (CTA row) frame the table rather
   than name a persona — lift them to the same size/weight as the product
   taglines they sit alongside, and keep the brighter label background that
   used to be shared with the persona rows. */
.usecase-table-cell--label-lead {
  font-size: 0.9375rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.03);
}

.usecase-table-cell--head {
  gap: 0.6rem;
}

.usecase-product-tagline {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.92);
}

/* Inline persona heading inside each answer — only used by the mobile
   product-first reflow; the desktop grid names the persona in its label
   column, so hide it here. */
.usecase-answer-persona {
  display: none;
}

/* CTA row — zero out the cell padding so the bled full-width CTA links
   (below) own their own padding instead. */
.usecase-table-cell--cta {
  padding: 0;
  display: flex;
  flex-direction: column;
  /* Override the base cell's align-items:center — on a column flex that's
     the cross (horizontal) axis, which was shrink-centering the CTA links
     instead of letting them stretch full width. */
  align-items: stretch;
}

.usecase-table-cell--cta .usecase-cta-row {
  margin: 0;
  padding: 0.85rem 1.25rem;
}

/* Product badge — colour-matched to each product's identity. */
.usecase-tag {
  flex: none;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 99px;
}

.usecase-tag--var {
  background: rgba(245, 158, 11, 0.14);
  color: var(--varial-amber, #f59e0b);
  border: 1px solid rgba(245, 158, 11, 0.30);
}

.usecase-tag--spot {
  background: rgba(96, 165, 250, 0.14);
  color: var(--varial-primary-light, #60A5FA);
  border: 1px solid rgba(96, 165, 250, 0.30);
}

/* Each action is a full-width row, divided from the persona rows above it
   and from its sibling CTA row, so it reads as an attached footer rather
   than a floating button. */
.usecase-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 -1.6rem;
  padding: 0.85rem 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-family: 'Space Grotesk', sans-serif;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.usecase-cta-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.usecase-cta-title {
  font-size: 0.875rem;
  font-weight: 600;
}

.usecase-cta-sub {
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
}

.usecase-cta-row svg {
  flex: none;
  transition: transform 0.15s;
}

.usecase-cta-row:hover svg {
  transform: translateX(2px);
}

/* Scoped under .home-usecases to out-specify branding.css's `.content a`. */
.home-usecases .usecase-cta-row--spot {
  color: var(--varial-primary-light, #60A5FA);
}

.home-usecases .usecase-cta-row--spot:hover {
  background: rgba(96, 165, 250, 0.10);
  color: #93c5fd;
}

.home-usecases .usecase-cta-row--var {
  color: var(--varial-amber, #f59e0b);
}

.home-usecases .usecase-cta-row--var:hover {
  background: rgba(245, 158, 11, 0.10);
  color: var(--varial-amber-light, #fcd34d);
}

/* Primary (paid) action carries a persistent tint so it reads as the headline
   action, above the free teaser link. */
.home-usecases .usecase-cta-row--primary.usecase-cta-row--spot {
  background: rgba(96, 165, 250, 0.08);
}

.home-usecases .usecase-cta-row--primary.usecase-cta-row--spot:hover {
  background: rgba(96, 165, 250, 0.15);
}

.home-usecases .usecase-cta-row--primary.usecase-cta-row--var {
  background: rgba(245, 158, 11, 0.08);
}

.home-usecases .usecase-cta-row--primary.usecase-cta-row--var:hover {
  background: rgba(245, 158, 11, 0.14);
}

@media (max-width: 640px) {
  .home-usecases {
    padding: 3rem 1.5rem 3.25rem;
  }

  /* On a phone the label column can't share the row, so drop it and let each
     VAR answer carry its persona name inline (the usecase-answer-persona span).
     The single VAR column stacks in source order: header, answers, CTA. */
  .usecase-table-wrap {
    overflow-x: visible;
  }

  /* Drop the single outer frame so the two product groups can each read as their
     own card (built from the cells' side borders + the header/CTA end caps). */
  .usecase-table {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: none;
    border: none;
    border-radius: 0;
    overflow: visible;
  }

  /* Drop the grid dividers (they assumed three columns) and the persona label
     column + the "You"/"Try us today!" lead cells — the product headers and the
     inline persona names carry the structure now. Each visible cell paints the
     card's fill + side walls; the header/CTA cells cap the top/bottom. */
  .usecase-table-cell {
    display: block;
    padding: 0.7rem 1rem;
    background: rgba(255, 255, 255, 0.045);
    border: none;
    border-left: 1px solid rgba(255, 255, 255, 0.09);
    border-right: 1px solid rgba(255, 255, 255, 0.09);
  }

  .usecase-table-cell--label {
    display: none;
  }

  /* Product header band — caps the top of the card. */
  .usecase-table-cell--head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.05);
    padding: 0.85rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
  }

  /* Persona name heading above each answer (the label column is hidden). */
  .usecase-answer-persona {
    display: block;
    margin-bottom: 0.2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--varial-white, #fff);
  }

  .usecase-table-cell:not(.usecase-table-cell--label):not(.usecase-table-cell--head):not(.usecase-table-cell--cta) {
    font-size: 0.8125rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* CTA cell caps the bottom of each card; keep its own padding and add a
     "Try us today" heading above the action links. */
  .usecase-table-cell--cta {
    padding: 0;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    border-bottom-left-radius: 0.75rem;
    border-bottom-right-radius: 0.75rem;
  }

  .usecase-table-cell--cta::before {
    content: "Try us today";
    display: block;
    padding: 0.85rem 1rem 0.2rem;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
  }
}

/* ── Right: in-hero product demo ─────────────────────────────────────── */
.home-right {
  flex: 0 0 67%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2.5rem 0 2.5rem 3rem;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.home-right .home-eyebrow {
  margin-bottom: 0;
  text-align: center;
}

.home-right .product-tabs {
  align-self: center;
}

/* Window fills the 67% column; the inner .product-screen owns the aspect. */
.home-right .product-screen-wrap {
  width: 100%;
  flex: none;
}

/* ── Per-product value props (swap with the active tab) ──────────────── */
.product-meta {
  width: 100%;
  align-self: stretch;
}

.product-bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.75rem;
}

.product-bullets[hidden] {
  display: none;
}

/* Each value prop reads as a distinct, obvious feature chip. */
.product-bullets li {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem 0.6rem 0.6rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 2px solid #10b981;
  border-radius: 0.5rem;
}

/* Filled green check badge */
.product-bullets li::before {
  content: '\2713';
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  margin-top: 0.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--varial-nav, #0d1b2e);
  background: #10b981;
  border-radius: 50%;
}

/* ── Tab bar ─────────────────────────────────────────────────────────── */
.product-tabs {
  display: flex;
  gap: 0.375rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.75rem;
  padding: 0.375rem;
  align-self: center;
}

.product-tab {
  display: flex;
  flex: 0 0 12rem;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.6rem 1rem;
  border: none;
  background: transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.38);
  transition: background 0.15s, color 0.15s;
}

.product-tab:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.70);
}

.product-tab.is-active {
  background: rgba(255, 255, 255, 0.10);
  color: var(--varial-white, #ffffff);
}

.product-tab-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.product-tab-sub {
  font-size: 0.6875rem;
  color: rgba(255, 255, 255, 0.28);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.product-tab.is-active .product-tab-sub {
  color: rgba(255, 255, 255, 0.50);
}

.product-tab-avail {
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  margin-top: 0.1rem;
}

.product-tab-avail--live {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.product-tab-avail--soon {
  background: rgba(245, 158, 11, 0.12);
  color: var(--varial-amber, #F59E0B);
  border: 1px solid rgba(245, 158, 11, 0.22);
}

/* ── Screen area ─────────────────────────────────────────────────────── */
.product-screen-wrap {
  width: 100%;
  display: flex;
  flex-direction: column;
  border-radius: 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 20, 38, 0.75);
  backdrop-filter: blur(10px);
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.60),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

/* Browser/app-window chrome so the screenshot reads as live software,
   not a pasted image. */
.browser-chrome {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 2.25rem;
  padding: 0.3rem 0.85rem;
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.browser-dots {
  position: absolute;
  left: 0.85rem;
  display: inline-flex;
  gap: 0.4rem;
}

.browser-dots i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}

.browser-url {
  font-family: var(--varial-font-mono, 'JetBrains Mono', monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.40);
}

.browser-url[hidden] {
  display: none;
}

/* Header jump-nav — sits in the window chrome, scrolls to a chart. */
.product-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  max-width: calc(100% - 5rem);
}

.product-nav[hidden] {
  display: none;
}

.demo-jump {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.50);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 99px;
  padding: 0.15rem 0.6rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.demo-jump:hover:not(.is-active) {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
}

.demo-jump.is-active {
  color: var(--varial-amber, #f59e0b);
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.10);
}

/* Locked categories — dimmed, with a small padlock; click opens the sign-up gate. */
.demo-jump.is-locked {
  color: rgba(255, 255, 255, 0.34);
}

.demo-jump.is-locked::after {
  content: '';
  display: inline-block;
  width: 0.58rem;
  height: 0.58rem;
  margin-left: 0.28rem;
  vertical-align: -1px;
  opacity: 0.65;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
}

.demo-jump.is-locked.is-active {
  color: var(--varial-amber, #f59e0b);
}

/* ── Sign-up gate (shown when a locked chart is selected) ─────────────── */
.demo-gate {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.25rem;
  background: rgba(10, 20, 38, 0.72);
  backdrop-filter: blur(3px);
}

.demo-gate[hidden] { display: none; }

.demo-gate-inner {
  max-width: 22rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.demo-gate-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(245, 158, 11, 0.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / 1.1rem no-repeat;
}

.demo-gate-title {
  margin: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--varial-white, #fff);
}

.demo-gate-sub {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.66);
}

/* The window viewport — scrolls through the stacked charts; owns the
   16:7.2 footprint so the chrome bar adds height on top. */
.product-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 7.2;
  overflow: hidden;
}

.product-panel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.product-panel[hidden] {
  display: none;
}

/* No-JS fallback screenshot fills the window. */
.product-panel .product-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ── Chart stage (Spot / VAR) — one chart at a time, header nav switches ── */
.demo-block {
  position: absolute;
  inset: 0;
  display: none;
  padding: 0.5rem 0.65rem;
}

.demo-block.is-shown {
  display: block;
}

/* Benchmark metric sub-nav — a small pill row over the chart's top margin. */
.demo-subnav {
  position: absolute;
  top: 0.5rem;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
}

.demo-subjump {
  font-size: 0.625rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(30, 41, 59, 0.70);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 99px;
  padding: 0.1rem 0.45rem;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.demo-subjump:hover:not(.is-active) {
  color: rgba(255, 255, 255, 0.85);
}

.demo-subjump.is-active {
  color: var(--varial-amber, #f59e0b);
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(245, 158, 11, 0.14);
}

/* A static view-type label (no toggle behind it) on charts with only one view. */
.demo-subjump--static {
  cursor: default;
}

/* Skeleton shimmer until the shown chart renders (no screenshot bait-and-switch). */
.demo-block.is-shown:not(.is-live)::after {
  content: '';
  position: absolute;
  inset: 0.5rem 0.65rem;
  border-radius: 0.5rem;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0.03) 30%,
    rgba(255, 255, 255, 0.07) 50%,
    rgba(255, 255, 255, 0.03) 70%);
  background-size: 200% 100%;
  animation: demo-shimmer 1.3s ease-in-out infinite;
}

.demo-block.is-live::after,
.demo-block.is-error::after { display: none; }

@keyframes demo-shimmer {
  0%   { background-position: 150% 0; }
  100% { background-position: -50% 0; }
}

.demo-live {
  width: 100%;
  height: 100%;
}

/* ── Live map (Positions) ────────────────────────────────────────────── */
.demo-map {
  position: absolute;
  inset: 0;
  background: var(--varial-nav, #0d1b2e);
}

/* Zoom control + attribution — dimmed to sit quietly on the dark basemap
   instead of the default bright-white chips. */
.demo-map .leaflet-bar {
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.demo-map .leaflet-control-zoom a {
  background: rgba(13, 27, 46, 0.7);
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(2px);
}
.demo-map .leaflet-control-zoom a:hover {
  background: rgba(13, 27, 46, 0.95);
  color: #fff;
}
.demo-map .leaflet-control-attribution {
  background: rgba(13, 27, 46, 0.45);
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.625rem;
  backdrop-filter: blur(2px);
}
.demo-map .leaflet-control-attribution a {
  color: rgba(255, 255, 255, 0.45);
}

/* Permanent amber name labels on the sample portfolio markers. */
.leaflet-tooltip.demo-map-label {
  background: rgba(13, 27, 46, 0.92);
  border: 1px solid rgba(245, 158, 11, 0.55);
  color: var(--varial-amber-light, #fcd34d);
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  box-shadow: none;
  white-space: nowrap;
}

.leaflet-tooltip.demo-map-label::before { display: none; }

/* Generator hover tooltip — dark to match the chart hovers (default is white). */
.leaflet-tooltip.demo-map-hover {
  background: rgba(30, 41, 59, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #f8f7f5;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 4px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  white-space: nowrap;
}

.leaflet-tooltip.demo-map-hover::before { display: none; }

/* Portfolio list overlaying the (empty western) map space — shows breadth. */
.demo-pos-list {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 500;
  width: 12.5rem;
  max-width: 45%;
  background: rgba(10, 20, 38, 0.86);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 0.6rem;
  padding: 0.5rem 0.6rem;
  pointer-events: none;
}

.pos-list-hd {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 0.4rem;
}

.demo-pos-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
}

.demo-pos-list li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.88);
}

.pos-tag {
  flex: none;
  width: 3.1rem;
  text-align: center;
  font-size: 0.5625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.1rem 0;
  border-radius: 4px;
  color: #fff;
}

/* Fuel-based colours (match the map markers): blue wind, amber solar,
   red gas, purple battery; financial/retail are neutral. */
.pos-tag--wind  { background: #3b82f6; }
.pos-tag--solar { background: #f59e0b; color: var(--varial-nav, #0d1b2e); }
.pos-tag--bess  { background: #8b5cf6; }
.pos-tag--gas   { background: #ef4444; }
.pos-tag--fin   { background: rgba(255, 255, 255, 0.20); }

.pos-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-mw { flex: none; color: rgba(255, 255, 255, 0.55); font-variant-numeric: tabular-nums; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .home-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0 2.5rem;
  }

  .home-left {
    flex: none;
    width: 100%;
    padding: 2rem 0 1.5rem;
  }

  .home-right {
    flex: none;
    width: 100%;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 1.5rem 0 2rem;
    align-items: center;
  }

  .home-right .product-screen-wrap {
    flex: none;
    max-width: 100%;
  }

  .home-right .product-screen {
    aspect-ratio: 16 / 9;
  }

  .home-hero {
    height: auto;
    max-height: none;
    min-height: 100svh;
  }

  /* Narrow single-column hero: trim the button padding so the container-scaled label
     (see base rule) has more room. Font itself scales via cqi in the base rule. */
  .home-page .home-cta-row .btn {
    padding: 0.65rem 0.5rem;
  }

}

@media (max-width: 700px) {
  .home-brand {
    padding: 1rem 1.25rem;
  }

  .home-content {
    padding: 2rem 1.25rem;
    gap: 2rem;
  }

  .home-h1 {
    font-size: 1.8rem;
  }

  /* Tighten the equal-width CTA grid (base rule) for phones: smaller gap and
     button padding so both single-line labels fit comfortably. The label font
     itself is handled by the viewport clamp in the ≤1100 block above. */
  .home-cta-row {
    gap: 0.5rem;
  }

  .home-page .home-cta-row .btn {
    padding: 0.55rem 0.5rem;
  }

  /* One chart per product on a phone. The multi-pill chart switcher wrapped
     into an unreadable stack and the frozen figures overflow when squeezed, so
     drop the switcher and any in-chart toggles and just show the single default
     view full-size — legibility over breadth on narrow screens. */
  .product-nav,
  .demo-subnav {
    display: none;
  }

  /* Chrome bar carries only the window dots now — tighten it so it reads as a
     slim titlebar rather than an empty gap. */
  .browser-chrome {
    min-height: 1.75rem;
  }

  /* Full-width tab bar on mobile — tabs stretch to fill, no scrolling */
  .product-tabs {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
  }

  .product-tab {
    flex: 1;
    padding: 0.5rem 0.5rem;
  }

  .product-tab-sub,
  .product-tab-avail {
    display: none;
  }

  /* Give the single chart generous height on a phone so its axes and labels
     stay legible now that it no longer competes with the switcher. */
  .home-right .product-screen {
    aspect-ratio: unset;
    height: 72vw;
    min-height: 260px;
    max-height: 370px;
  }

  /* On a phone, keep the map clean — hide the overlay list and the pinned
     name labels so only the coloured markers remain. */
  .demo-pos-list,
  .leaflet-tooltip.demo-map-label {
    display: none;
  }

  /* Stack the value props — 3-up is too tight on a phone */
  .product-bullets {
    flex-direction: column;
    gap: 0.5rem;
  }
}