/* Page-scoped styles extracted from es/index.html. */

/* ============ Homepage-scoped styles ============ */

/* ----- Section 1: hook ----- */
.home-hook { padding-top: var(--s-7); }
.home-hook .context-label {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--ink-soft);
  margin-bottom: var(--s-5);
  max-width: 60ch;
}
.home-hook h1 { max-width: 24ch; margin-bottom: var(--s-5); }
.home-hook .home-hook-support { max-width: 44ch; }

/* ----- Shared small print for status notes (illustrative/modeled labels) ----- */
.status-note {
  font-size: var(--fs-13);
  color: var(--ink-soft);
  margin: 0;
}

/* ----- Section 2: demo hero ----- */
.home-demo .section-head { margin-bottom: var(--s-5); }
.home-demo .section-head h2 { margin-bottom: var(--s-2); }
.home-demo-grid {
  display: grid;
  gap: var(--s-5);
  align-items: start;
}
@media (min-width: 900px) {
  .home-demo-grid { grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); }
}
.home-demo-frame {
  position: relative;
  aspect-ratio: 1.62 / 1; /* MacBook-like proportion; keeps the prototype's window-lane logic side-by-side (see live en-index.css reference) */
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--blue-soft);
  box-shadow: var(--shadow-lift);
}
.home-demo-frame iframe,
.home-demo-frame .home-demo-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.home-demo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-demo-fallback img { width: 72px; height: 72px; border-radius: 50%; }
.demo-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-3);
  align-content: start;
}
.demo-chip {
  background: var(--bg);
  border: 1px solid var(--line-hair);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-16);
  font-weight: var(--weight-medium);
  color: var(--ink-muted);
  transition: border-color var(--dur-ui) var(--ease), background var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease);
}
.demo-chip.is-active {
  border-color: var(--blue);
  background: var(--blue-soft);
  color: var(--ink);
}
.demo-chips.is-mobile .demo-chip { padding: var(--s-3) var(--s-4); font-size: var(--fs-14); }

/* ----- Shared: arrowed section link ----- */
.link-arrow { font-weight: var(--weight-semibold); }

/* ----- Section 3: what Lucy is ----- */
.home-what .callout { margin-block: var(--s-5); }
.home-what .callout p {
  color: var(--ink);
  font-size: var(--fs-18);
  font-weight: var(--weight-medium);
}

/* ----- Section 4: three steps (icons, not paragraphs) ----- */
.steps-strip {
  list-style: none;
  counter-reset: step;
  margin: 0 0 var(--s-6);
  padding: 0;
  display: grid;
  gap: var(--s-5);
}
@media (min-width: 720px) {
  .steps-strip { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); }
}
.step { display: flex; flex-direction: column; gap: var(--s-3); }
.step-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  background: var(--blue-soft);
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-icon svg { width: 24px; height: 24px; }
.step p { margin: 0; color: var(--ink); font-weight: var(--weight-medium); max-width: 30ch; }

/* ----- Section 5: the 10-to-100x typographic band -----
   Largest type on the page after the hook: the clamp stays
   strictly below the h1 clamp at every viewport width. */
.home-cost .cost-figure {
  font-size: clamp(2rem, 5vw, 3.75rem);
  font-weight: var(--weight-bold);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--on-ink);
  margin: 0 0 var(--s-5);
}
.home-cost .home-cost-body { font-size: var(--fs-18); }

/* ----- Section 6: the six-scene use-case picker -----
   Six <details> tiles: the picker is presentation only. Every
   scene's full text is static HTML in the DOM at all times;
   closed tiles are visually collapsed, never removed (same
   AEO posture as the site FAQ pattern). First scene is open
   by default so the default state shows one full scene. */
.scene-picker { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); }
@media (min-width: 720px) { .scene-picker { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1020px) { .scene-picker { grid-template-columns: repeat(3, 1fr); } }
.scene {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur-ui) var(--ease), box-shadow var(--dur-ui) var(--ease);
}
.scene[open] {
  grid-column: 1 / -1;
  border-color: var(--blue);
  box-shadow: var(--shadow-card);
}
.scene summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
}
.scene summary::-webkit-details-marker { display: none; }
.scene summary h3 { margin: 0; font-size: var(--fs-18); flex: 1; }
.scene-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-sm);
  background: var(--blue-soft);
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.scene-icon svg { width: 22px; height: 22px; }
.scene-toggle {
  font-family: var(--font-mono);
  color: var(--blue);
  flex-shrink: 0;
}
.scene-toggle::before { content: "+"; }
.scene[open] .scene-toggle::before { content: "\2212"; }
.scene-body { padding: 0 var(--s-5) var(--s-5); }
.scene-body p:first-child { margin-bottom: var(--s-3); max-width: 72ch; }
.scene-closing { color: var(--ink); font-weight: var(--weight-medium); }

/* ----- Section 8: capstone + Talk to Lucy CTA ----- */
.home-capstone .capstone-text {
  font-size: clamp(1.375rem, 3vw, var(--fs-32));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--weight-semibold);
  color: var(--ink);
  max-width: 34ch;
  margin-bottom: var(--s-6);
  text-wrap: balance;
}
/* Inline chat mount (IMPLEMENTATION-NOTES section 6): the min-height
   applies only once the widget has booted into the mount, so the
   dormant preview state leaves no dead band. Full width of the
   band's content column on mobile. */
.home-chat-mount:not(:empty) {
  min-height: clamp(480px, 70vh, 640px);
  width: 100%;
  margin-top: var(--s-6);
}

/* ----- Section 9: FAQ ----- */
.home-faq .faq summary h3 {
  font: inherit;
  margin: 0;
  flex: 1;
}


/* Claude August content-pass preview reconstruction */
.home-demo .section-head h2 { margin-bottom: var(--s-2); font-size: clamp(1.5rem, 2.1vw, 2rem); }
.home-demo .demo-disclaimer { margin: var(--s-5) 0 0; max-width: 72ch; font-size: .75rem !important; line-height: 1.4; color: var(--ink-soft); }
.home-cost .section-head .eyebrow,
.home-cost .section-head .lede { color: var(--on-ink-soft); }
.home-cost .whynow { position: relative; margin-top: var(--s-7); display: grid; gap: var(--s-6); }
.home-cost .whynow-figure { margin: 0; display: grid; gap: var(--s-4); }
.home-cost .whynow-labels,
.home-cost .whynow-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--s-4); }
.home-cost .whynow-plot { display: block; width: 100%; height: auto; min-height: 260px; border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-md); background: rgba(4,8,35,.34); }
.home-cost .whynow-plot-bg { fill: rgba(255,255,255,.018); }
.home-cost .whynow-grid { stroke: rgba(255,255,255,.09); stroke-width: 1; vector-effect: non-scaling-stroke; }
.home-cost .whynow-axis-line { stroke: rgba(255,255,255,.46); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.home-cost .whynow-guide { stroke: rgba(255,255,255,.28); stroke-width: 1; stroke-dasharray: 7 8; vector-effect: non-scaling-stroke; }
.home-cost .whynow-curve { stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.home-cost .whynow-curve-cost { stroke: rgba(255,255,255,.68); }
.home-cost .whynow-curve-cap { stroke: var(--blue); }
.home-cost .whynow-glow-outer { fill: rgba(255,255,255,.10); }
.home-cost .whynow-glow-mid { fill: rgba(53,89,242,.45); }
.home-cost .whynow-glow-core { fill: var(--blue); }
.home-cost .whynow-label { margin: 0; font-size: var(--fs-14); color: var(--on-ink-soft); max-width: 24ch; }
.home-cost .whynow-key { display: block; font-size: var(--fs-12); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; margin-bottom: var(--s-1); }
.home-cost .whynow-label-cost .whynow-key { color: var(--on-ink); }
.home-cost .whynow-label-cap { text-align: right; margin-left: auto; }
.home-cost .whynow-label-cap .whynow-key { color: var(--blue); }
.home-cost .whynow-plot-label { font-family: var(--font-mono); font-size: 18px; letter-spacing: .08em; text-transform: uppercase; fill: var(--on-ink-soft); }
.home-cost .whynow-plot-label--cap { fill: #6f8cff; }
.home-cost .whynow-axis-label { font-family: var(--font-mono); font-size: 16px; letter-spacing: .08em; text-transform: uppercase; fill: var(--on-ink-faint); }
.home-cost .whynow-threshold-label { font-family: var(--font-sans); font-size: 18px; font-weight: var(--weight-semibold); fill: var(--on-ink); }
.home-cost .whynow-chip { display: inline-block; max-width: 100%; padding: var(--s-2) var(--s-4); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.06); font-size: var(--fs-14); font-weight: var(--weight-semibold); }
.home-cost .whynow-callout { display: grid; gap: var(--s-3); align-content: start; }
.home-cost .cost-figure { margin: 0; }
.home-cost .home-cost-body { font-size: var(--fs-18); margin: 0; }
.home-cost .cost-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-7); padding: var(--s-5) var(--s-6); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); background: rgba(255,255,255,.04); }
.home-cost .cost-note p { margin: 0; color: var(--on-ink); font-weight: var(--weight-medium); max-width: 62ch; }
.home-scenes .scenes-footnote { margin-top: var(--s-4); font-size: .875rem !important; }
.home-what .lede-emph { font-weight: var(--weight-semibold); color: var(--blue-deep); text-decoration-color: var(--blue); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.home-what .lede-emph:hover { color: var(--blue); }
.home-capstone .capstone-ask { font-size: clamp(1.75rem, 4vw, var(--fs-44)); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); font-weight: var(--weight-bold); color: var(--blue); max-width: 22ch; margin: 0 0 var(--s-6); text-wrap: balance; }
@media (min-width: 900px) {
  .home-cost .whynow { grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap: var(--s-8); }
}