/* Page-scoped styles extracted from 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;
}