/* ─────────────────────────────────────────────────────────────────────────
   Ostler homepage v7.5 - Hero + Front Page fold
   Ported from the approved v7.5 full-page mockup.
   Loaded ONLY on index.html (and its per-locale twins). Do not include
   from other pages - the tokens/veil/parallax field is homepage-only.

   Sections in this file:
     1. Hero shell overrides (kills the legacy 320vh scroll-jack)
     2. Parallax token field (.tokens / .tok / .veil)
     3. Chat demo card (.hero-demo / .chat / .chrome / .stream / bubbles)
     4. Ask-mini proactive variant
     5. Section-frontpage (.section-frontpage / .fp-window / .fp-card etc.)
   ───────────────────────────────────────────────────────────────────── */


/* ── 1. HERO SHELL - content-sized, no scroll-jack ── */
.hero {
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
}
.hero-sticky {
  position: relative !important;
  min-height: 100svh !important;
  height: auto !important;
  top: auto !important;
  padding: clamp(76px, 10svh, 96px) 0 clamp(24px, 3svh, 40px) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  overflow: hidden !important;
  z-index: 2 !important;
}
/* Widow protection on the sub-copy. */
.hero-sub { text-wrap: balance; }
/* Any scroll-jack scaffolding that slips through gets suppressed. */
.hero-scene-line, .hsl-connector { display: none !important; }

.hero-demo {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(18px, 2.5svh, 26px) 32px 0;
  min-height: 0;
  gap: 14px;
}
@media (max-width: 720px) {
  .hero-demo { padding: 16px 20px 0; }
}


/* ── 2. DEPTH FIELD: 3 parallax planes ── */
.tokens {
  position: absolute; inset: 0;
  pointer-events: none;
  contain: strict;
}
.tokens-far  { z-index: 0; }
.tokens-mid  { z-index: 0; }
.tokens-near { z-index: 0; }

.tok {
  position: absolute; top: 0; left: 0;
  white-space: nowrap;
  will-change: transform;
  transform: translate3d(var(--x, 0), 110vh, 0);
  animation: drift var(--dur, 78s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.tok-far {
  color: rgba(20,18,14,0.14);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 10.5px;
  letter-spacing: 0.01em;
  filter: blur(5.5px);
}

.tok-mid {
  color: rgba(20,18,14,0.24);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.005em;
  filter: blur(2.2px);
}

.tok-near {
  color: rgba(20,18,14,0.32);
  font-family: 'IBM Plex Serif', 'IBM Plex Sans', system-ui, serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.005em;
  filter: none;
  transition: color 520ms ease, font-weight 520ms ease;
}
.tok-near.flare {
  color: var(--accent);
  font-weight: 600;
}

@keyframes drift {
  from { transform: translate3d(var(--x, 0), 110vh, 0); }
  to   { transform: translate3d(var(--x, 0), -20vh, 0); }
}

/* Veil sits above the parallax field, softens the horizontal centre so
   the chat card sits on a clean canvas. */
.veil {
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 65% 32% at 50% 22%,
      rgba(248,248,244,0.75) 0%,
      rgba(248,248,244,0.30) 45%,
      transparent 78%),
    linear-gradient(180deg,
      var(--chassis) 0%,
      transparent 12%,
      transparent 88%,
      var(--chassis) 100%);
}


/* ── 3. CHAT CARD demo (dynamic per-scenario) ── */
.chat {
  width: min(64vw, 640px);
  max-width: 100%;
  background: var(--panel);
  border: 1px solid var(--hairline-faint);
  border-radius: 14px;
  box-shadow: var(--shadow-card-soft);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 340px;
  position: relative;
  z-index: 3;
}

.chrome {
  display: grid;
  grid-template-columns: 68px 1fr 90px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline-faint);
  background: var(--panel);
}
.lights { display: flex; gap: 8px; }
.lights span {
  width: 12px; height: 12px; border-radius: 50%;
  display: block; border: 0.5px solid rgba(0,0,0,0.1);
}
.lights .light-close { background: #FF5F57; }
.lights .light-min   { background: #FEBC2E; }
.lights .light-max   { background: #28C840; }
.chrome-title {
  text-align: center;
  font-family: var(--font-display);
  font-size: 12px;
  color: rgba(20,18,14,0.45);
  font-weight: 500;
}
.chrome-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(20,18,14,0.45);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: right;
}

.stream {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  min-height: 260px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transition: opacity 0.35s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 2px;
}
.eyebrow.visible { opacity: 0.92; }
.eyebrow::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}

.msg-row {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.35s ease;
  width: 100%;
}
.msg-row.visible { opacity: 1; }
.msg-row.user  { justify-content: flex-end; }
.msg-row.agent { justify-content: flex-start; }

/* Scoped inside .stream so we do not collide with the legacy .bubble
   classes on scroll-jacked panels elsewhere on the site. */
.stream .bubble {
  padding: 10px 14px;
  border-radius: 14px;
  max-width: 84%;
  width: auto;
  flex: 0 1 auto;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
  text-align: left;
}
.stream .user .bubble {
  background: #F2EEE4;
  color: var(--ink);
  border-bottom-right-radius: 4px;
  font-weight: 450;
}
.stream .agent .bubble {
  background: transparent;
  border: 1px solid var(--hairline-faint);
  border-bottom-left-radius: 4px;
}

.typing-bubble {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--hairline-faint);
  border-bottom-left-radius: 4px;
  background: transparent;
}
.typing-bubble span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(20,18,14,0.45);
  animation: heroDemoBounce 1.15s ease infinite;
}
.typing-bubble span:nth-child(2) { animation-delay: 0.15s; }
.typing-bubble span:nth-child(3) { animation-delay: 0.30s; }
@keyframes heroDemoBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30% { transform: translateY(-4px); opacity: 0.95; }
}

.cite {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.02em;
  padding-left: 4px;
  padding-top: 4px;
  opacity: 0;
  transition: opacity 0.45s ease;
  min-height: 1.2em;
  font-variant-numeric: tabular-nums;
}
.cite.visible { opacity: 0.92; }

.demo-caption {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(20,18,14,0.55);
  text-align: center;
  max-width: min(64vw, 640px);
  opacity: 0;
  transition: opacity 0.5s ease;
  min-height: 1.4em;
}
.demo-caption.visible { opacity: 1; }

@media (max-width: 720px) {
  .chat { width: 100%; min-height: 380px; }
  .chrome { grid-template-columns: 60px 1fr 80px; }
  .stream .bubble { font-size: 14.5px; }
  .cite { font-size: 12px; }
  .demo-caption { font-size: 9.5px; letter-spacing: 0.12em; }
  .veil {
    background:
      radial-gradient(ellipse 92% 30% at 50% 22%,
        rgba(248,248,244,0.80) 0%,
        rgba(248,248,244,0.30) 46%,
        transparent 82%),
      linear-gradient(180deg,
        var(--chassis) 0%,
        transparent 10%,
        transparent 90%,
        var(--chassis) 100%);
  }
  .tokens-mid { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tok {
    animation: none;
    transform: translate3d(var(--x, 0), var(--static-y, 50vh), 0);
    transition: none;
  }
  .tok-near.flare { color: rgba(20,18,14,0.32); font-weight: 500; }
  .typing-bubble span { animation: none; opacity: 0.55; }
  .msg-row, .cite, .eyebrow, .demo-caption { transition: none; }
}


/* ── 4. Ask-mini proactive variant (marker: filled dot, not quote) ── */
.ask-mini--proactive .ask-mini-mark {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.3;
  padding-top: 4px;
  color: var(--accent);
}


/* ── 5. FRONT PAGE fold ── */
.section-frontpage { padding: clamp(64px, 8svh, 96px) 0 clamp(48px, 6svh, 72px); }
.section-frontpage .section-head { text-align: center; margin-bottom: 40px; }
.section-frontpage .section-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 3.4vw, 2.5rem); letter-spacing: -.025em; text-wrap: balance; color: var(--ink); }
.section-frontpage .section-head h2 strong { color: var(--accent); font-weight: 700; }
.section-frontpage .section-head p { font-family: var(--font-body); font-size: clamp(1rem, 1.4vw, 1.15rem); color: rgba(20,18,14,0.60); margin-top: 12px; max-width: 620px; margin-left: auto; margin-right: auto; text-wrap: balance; }

.fp-window {
  max-width: 1080px; margin: 0 auto;
  background: var(--panel);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--hairline-faint);
  overflow: hidden;
}
.fp-window-header {
  display: grid;
  grid-template-columns: 68px 1fr 110px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--hairline-faint);
  background: var(--panel);
}
.fp-lights { display: flex; gap: 8px; }
.fp-lights span { width: 12px; height: 12px; border-radius: 50%; display: block; border: 0.5px solid rgba(0,0,0,0.1); }
.fp-lights .fp-light-close { background: #FF5F57; }
.fp-lights .fp-light-min   { background: #FEBC2E; }
.fp-lights .fp-light-max   { background: #28C840; }
.fp-window-title { text-align: center; font-family: var(--font-display); font-size: 12px; color: rgba(20,18,14,0.45); font-weight: 500; }
.fp-window-badge { font-family: var(--font-mono); font-size: 10px; color: rgba(20,18,14,0.45); letter-spacing: 0.06em; text-transform: uppercase; text-align: right; }

.fp-window-body { padding: 22px 24px 26px; text-align: left; background: var(--chassis); }

.fp-masthead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 4px 0 4px; }
.fp-masthead h3 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; margin: 0; }
.fp-date { font-family: var(--font-mono); font-size: 12px; color: rgba(20,18,14,0.55); font-variant-numeric: tabular-nums; }
.fp-lede { font-family: var(--font-body); font-size: 14.5px; color: rgba(20,18,14,0.55); margin: 6px 0 8px; max-width: 62ch; }

.fp-band-head { display: flex; align-items: center; gap: 12px; margin: 32px 0 14px; }
.fp-band-head:first-of-type { margin-top: 24px; }
.fp-band-title { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.4vw, 1.15rem); letter-spacing: -.005em; color: var(--band-c, var(--ink)); }
.fp-band-count { font-family: var(--font-display); font-weight: 700; font-size: 12px; min-width: 23px; height: 23px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--band-c, var(--ink)); }
.fp-band-rule { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--band-c, var(--ink)), transparent); opacity: .5; }
.fp-band--now { --band-c: var(--accent-warm); }
.fp-band--you { --band-c: var(--accent-2); }
.fp-band--set { --band-c: rgba(20,18,14,0.40); }
.fp-band--now .fp-band-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-warm); box-shadow: 0 0 0 4px rgba(168,42,42,0.20); }
.fp-band--set .fp-band-title { color: rgba(20,18,14,0.55); font-size: 1rem; }

.fp-masonry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; grid-auto-flow: dense; align-items: start; }
@media (max-width: 900px) { .fp-masonry { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .fp-masonry { grid-template-columns: 1fr; } .fp-card--wide { grid-column: span 1 !important; } }

.fp-card { background: var(--panel); border-radius: 12px; box-shadow: var(--shadow-card-soft); padding: 16px 17px 15px; border: 1px solid var(--hairline-faint); }
.fp-card--wide { grid-column: span 2; }
.fp-card--hunch .fp-eyebrow { color: var(--accent-warm); }
.fp-card--setup { background: rgba(122,31,31,0.05); border: 1px solid rgba(122,31,31,0.15); box-shadow: none; }
.fp-card--setup .fp-card-ic { color: var(--accent); }
.fp-card--setup .fp-card-title { color: var(--accent); }
.fp-card--tint { background: color-mix(in srgb, var(--accent-c) 6%, var(--panel)); border-color: color-mix(in srgb, var(--accent-c) 20%, transparent); }

.fp-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.fp-card-ic { color: var(--accent-c); flex-shrink: 0; display: flex; }
.fp-card-ic svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.fp-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(20,18,14,0.40); font-weight: 500; }
.fp-l2 { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-display); font-weight: 600; font-size: 10px; letter-spacing: .02em; color: var(--accent-2); padding: 2px 7px 2px 5px; border: 1px solid rgba(30,44,82,0.34); border-radius: 6px; background: rgba(30,44,82,0.07); }
.fp-l2 svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }

.fp-card-title { font-family: var(--font-display); font-weight: 600; font-size: 15.5px; line-height: 1.28; letter-spacing: -.01em; text-wrap: balance; color: var(--ink); }
.fp-card--wide .fp-card-title { font-size: 17.5px; }
.fp-card-body { font-family: var(--font-body); font-size: 13px; line-height: 1.5; color: rgba(20,18,14,0.72); margin-top: 5px; }
.fp-card--wide .fp-card-body { font-size: 14px; }
.fp-evidence { font-family: var(--font-mono); font-size: 11px; color: rgba(20,18,14,0.55); margin-top: 10px; letter-spacing: 0.01em; }

.fp-strength { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.fp-strength-bar { width: 74px; height: 6px; border-radius: 3px; background: rgba(20,18,14,0.09); overflow: hidden; display: block; }
.fp-strength-bar i { display: block; height: 100%; border-radius: 3px; background: var(--accent-c); }
.fp-strength-sword { font-family: var(--font-display); font-weight: 600; font-size: 12px; color: rgba(20,18,14,0.72); }
.fp-strength-ev { font-family: var(--font-mono); font-size: 10.5px; color: rgba(20,18,14,0.40); }

.fp-act { margin-top: 12px; font-family: var(--font-display); font-weight: 600; font-size: 13px; padding: 8px 15px; border-radius: 10px; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; background: var(--accent); color: #fff !important; }
.fp-act:hover { background: var(--accent-hover); }
.fp-act svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.fp-fb { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hairline-faint); flex-wrap: wrap; }
.fp-fb-q { font-family: var(--font-body); font-size: 12px; font-weight: 500; color: rgba(20,18,14,0.72); margin-right: 2px; }
.fp-fbtn { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--ink); background: color-mix(in srgb, var(--accent-c) 7%, transparent); border: 1.5px solid color-mix(in srgb, var(--accent-c) 42%, transparent); border-radius: 9px; padding: 6px 11px; cursor: pointer; transition: .14s; }
.fp-fbtn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--accent-c); }
.fp-fbtn:hover { border-color: var(--accent-c); background: color-mix(in srgb, var(--accent-c) 13%, transparent); }
.fp-fbtn--icon { padding: 6px 8px; margin-left: auto; }

.fp-prog { margin-top: 12px; height: 8px; border-radius: 5px; background: rgba(20,18,14,0.08); overflow: hidden; }
.fp-prog i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--accent), var(--accent-warm)); }
.fp-prog-label { font-family: var(--font-mono); font-size: 11px; color: rgba(20,18,14,0.55); margin-top: 7px; }

.fp-areas { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.fp-area-row { display: flex; flex-direction: column; gap: 4px; }
.fp-area-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.fp-area-an { font-family: var(--font-display); font-weight: 600; font-size: 12.5px; color: var(--ink); }
.fp-area-ap { font-family: var(--font-mono); font-size: 11px; color: rgba(20,18,14,0.55); font-variant-numeric: tabular-nums; }
.fp-area-bar { height: 6px; border-radius: 3px; background: rgba(20,18,14,0.09); overflow: hidden; }
.fp-area-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--accent), var(--accent-warm)); }

.fp-caption { font-family: var(--font-mono); font-size: 11px; color: rgba(20,18,14,0.45); letter-spacing: 0.16em; text-transform: uppercase; text-align: right; margin-top: 18px; max-width: 1080px; margin-left: auto; margin-right: auto; padding: 0 32px; }

/* Hide desktop-fill cards on mobile - the row-2 holes they solve only
   exist in the 3-col layout; single-col mobile does not need them. */
@media (max-width: 900px) {
  .fp-card--desktop-fill { display: none !important; }
}
.fp-eyebrow--navy   { color: var(--accent-2); }
.fp-eyebrow--forest { color: var(--accent-3); }
@media (max-width: 720px) {
  .fp-window {
    margin-left: 8px !important;
    margin-right: 8px !important;
    max-width: calc(100% - 16px) !important;
  }
}