/* One story per viewport. Keep document scrolling, anchors and native input. */
html[data-concept="stoic"] main > section:not(.hero) {
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-block: 112px 40px;
}
html[data-concept="stoic"] main > section:not(.hero) > .wrap {
  width: min(1180px, 100% - 80px);
}
html[data-concept="stoic"] main > section:not(.hero) h2 {
  font-family: var(--sans);
  font-size: var(--hero-display);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.035em;
}
html[data-concept="stoic"] :is(.section-lead, .beta-card p) {
  font-size: var(--hero-body);
  line-height: 1.85;
}
html[data-concept="stoic"] .belief .section-lead { line-height: 2.2; }
html[data-concept="stoic"] .faq-list { margin-top: 28px; gap: 8px; }
html[data-concept="stoic"] .faq-list summary { padding-block: 16px; font-size: var(--hero-body); }
html[data-concept="stoic"] .faq-list details p { font-size: var(--hero-body); }

@media (min-width: 901px) and (min-height: 700px) {
  html[data-concept="stoic"] {
    scroll-snap-type: y mandatory;
    scroll-padding-top: 0;
  }
  html[data-concept="stoic"] main > section {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  html[data-concept="stoic"] .site-footer { scroll-snap-align: end; }
  html[data-concept="stoic"] .hero {
    display: flex;
    align-items: center;
    padding-block: 112px 32px;
  }
  html[data-concept="stoic"] .hero > .wrap { min-height: 550px; }
  html[data-concept="stoic"] :is(.app-view, .calendar, .wrist, .share) > .wrap { gap: 48px; }

  /* Compact the device's spacing rather than shrinking an entire screenshot. */
  html[data-concept="stoic"] .app-view .phone-col {
    min-height: 0;
    padding: 20px 24px;
    border-radius: 32px;
  }
  html[data-concept="stoic"] .app-view .phone { width: 328px; }
  html[data-concept="stoic"] .app-view .screen {
    min-height: 0;
    padding: 12px 16px 18px;
  }
  html[data-concept="stoic"] .app-view .island { height: 22px; margin-bottom: 8px; }
  html[data-concept="stoic"] .app-view .screen-state img { width: 90px; }
  html[data-concept="stoic"] .app-view .screen-state h3 { font-size: var(--hero-title); }
  html[data-concept="stoic"] .app-view .screen-state p { font-size: var(--hero-caption); }
  html[data-concept="stoic"] .app-view .screen-card { margin-top: 12px; padding: 12px; }
  html[data-concept="stoic"] .app-view .screen-score { margin-top: 4px; }
  html[data-concept="stoic"] .app-view .screen-score b { font-family: var(--sans); font-size: var(--hero-display); }
  html[data-concept="stoic"] .app-view :is(.screen-card small, .screen-score span, .slots, .chip, .screen-tip) {
    font-family: var(--sans);
    font-size: var(--hero-caption);
  }
  html[data-concept="stoic"] .app-view .slots { gap: 8px; margin-top: 12px; }
  html[data-concept="stoic"] .app-view .chip { padding: 2px 8px; }
  html[data-concept="stoic"] .app-view .screen-tip { margin-top: 12px; }
  html[data-concept="stoic"] .app-view .section-head h2 { max-width: 8em; }
  html[data-concept="stoic"] .app-view .state-row { margin-top: 32px; }
  html[data-concept="stoic"] .app-view .state-pill { font-size: var(--hero-caption); }

  html[data-concept="stoic"] .calendar > .wrap { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  html[data-concept="stoic"] .cal { padding: 18px 18px 16px 12px; }
  html[data-concept="stoic"] .cal-body { height: clamp(440px, calc(100svh - 270px), 660px); column-gap: 8px; }
  html[data-concept="stoic"] .cal-head { padding-bottom: 10px; }
  html[data-concept="stoic"] .cal-note { margin-top: 10px; font-size: var(--hero-caption); }
  html[data-concept="stoic"] .event {
    min-height: 34px;
    padding: 1px 5px;
    border-radius: 6px;
    font-size: var(--hero-caption);
    line-height: 15px;
  }
  html[data-concept="stoic"] .event small { display: inline; margin-right: 5px; font-family: var(--sans); }
  html[data-concept="stoic"] .event .advice { margin-top: 0; }
  html[data-concept="stoic"] .event.short { min-height: 18px; padding-block: 0; gap: 4px; }
  html[data-concept="stoic"] .event.short small { margin-right: 0; }
  html[data-concept="stoic"] .forces { margin-top: 28px; }
  html[data-concept="stoic"] .force h3 { font-size: var(--hero-title); }
}
@media (min-width: 901px) and (max-width: 1100px) and (min-height: 700px) {
  html[data-concept="stoic"] .calendar > .wrap {
    grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr);
    gap: 32px;
  }
}

/* Narrow/short windows retain the same chapter layout without forced stops. */
@media (max-width: 900px), (max-height: 699px) {
  html[data-concept="stoic"] { scroll-snap-type: none; scroll-padding-top: 96px; }
}
@media (max-width: 900px) {
  html[data-concept="stoic"] main > section:not(.hero) { padding-block: 104px 56px; }
  html[data-concept="stoic"] main > section:not(.hero) > .wrap { width: calc(100% - 40px); }
  html[data-concept="stoic"] .devices { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-concept="stoic"] { scroll-behavior: auto; scroll-snap-type: none; }
}