/* Hover, touch screens, narrower screens and reduced motion, for every section, so these load last. */
/* ---------- Hover, only where hovering exists ---------- */

@media (hover: hover) {
  .btn:hover { background: var(--accent-hover); }
  .top-nav a:hover { color: var(--text); }
  .screen-track:hover { background: rgb(233 228 217 / 0.06); }
  .prog:hover { background: rgb(233 228 217 / 0.12); }
  .track-row:hover { background: rgb(233 228 217 / 0.05); }
  .day:hover { color: var(--text); }
  .pause:hover, .undo:hover { background: rgb(233 228 217 / 0.18); color: var(--text); }
  .undo-toast-btn:hover { background: rgb(18 17 16 / 0.08); }
  .fates-pick:hover { opacity: 1; }
  .link-btn:hover { text-decoration-thickness: 2px; }
}

/* ---------- Touch screens: every control at least 44px each way (§7.3) ---------- */

@media (pointer: coarse) {
  .pause { width: 44px; height: 44px; }
  .btn-small { height: 44px; }
  .day, .link-btn { min-height: 44px; }
}

/* ---------- Narrower screens ---------- */

@media (max-width: 1100px) {
  .top-nav { display: none; }
  .top .btn { margin-left: auto; }
  .feature-grid, .feature-grid-flip { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .feature-copy h2 { max-width: 14ch; }
  .questions-grid, .close-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .questions h2 { position: static; }
  .tr { grid-template-columns: minmax(0, 2.2fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr); }
  .th-status, .c-status { display: none; }
  /* Stacked, every feature reads heading, demo, then words: the heading says what you're looking
     at, and the product, working, comes before the explanation. The wrappers step aside so the
     two can sit either side of the demo; the DOM order, and the focus order, stay as they are.
     The list keeps its words first: its demo is the table, screens long. */
  .feature-copy, .fates-head, .upcoming-head { display: contents; }
  .feature-fates > .wrap, .feature-upcoming > .wrap { display: grid; grid-template-columns: minmax(0, 1fr); }
  .feature-copy h2, .fates-head h2, .upcoming-head h2 { order: -2; }
  .feature-visual, .scene-fates, .scene-upcoming { order: -1; margin-top: clamp(28px, 4vw, 44px); }
  .fates-head p, .upcoming-head p { margin-top: 24px; }
}

@media (max-width: 1100px) {
  /* The lede's second sentence is the "One tap" section's job; where the hero is tight, it waits for it. */
  .lede-more { display: none; }
}

@media (max-width: 860px) {
  .hero-intro { grid-template-columns: minmax(0, 1fr); row-gap: clamp(14px, 2.2svh, 22px); }
}

@media (max-width: 760px) {
  :root { --top-h: 60px; --section: 64px; }
  body { font-size: 17px; }
  /* Section words a size down: 16px, the floor for body text on a phone, and 15px for the quieter
     lines after them. */
  .feature-copy p, .fates-head p, .list-copy p, .upcoming-head p, .qa details p, .close h2 + p { font-size: 16px; }
  .feature-copy .feature-aside, .promises dd, .timeline-caption { font-size: 15px; }
  .top-inner { gap: 12px; }
  .hero { --hero-top: 14px; }
  .hero-grid { gap: clamp(14px, 2.4svh, 22px); }
  .hero-intro { row-gap: clamp(10px, 1.8svh, 16px); }
  .hero-cta { height: 48px; }
  .mark { width: 30px; height: 30px; }
  .wordmark { font-size: 27px; }
  .join-row { flex-direction: column; }
  .join input[type='email'] { flex: none; width: 100%; }
  .join .btn { width: 100%; }
  .c-next.is-empty { display: none; }
  .screen-wrap { min-height: 340px; max-height: 620px; }
  .screen-frame { border-radius: 18px; }
  .screen-row { padding: 0 18px 14px; }
  .screen-track { flex-wrap: wrap; gap: 12px; }
  .screen-meta { min-width: 0; margin-left: 0; order: -1; text-align: left; font-size: 26px; }
  .strip-hero { --gap: 2px; --sgap: 6px; --r: 3px; --h: 22px; --cell-min: 8px; flex-basis: 100%; }
  /* The meta sits right above the strip here and reads live while you slide. */
  .strip-hero .strip-tag { display: none; }
  .cu-add { flex: 1 1 100%; justify-content: center; }
  .programme-bar { padding: 10px; }
  .prog { min-height: 46px; padding-right: 12px; }
  .prog img { width: 22px; height: 33px; }
  .prog-meta { display: none; }
  /* Fates: the glyph beside its word, as on wider screens, only smaller. The word is sized so the
     longest, "Awaiting renewal" (about 6.1em at these sizes), fits on one line beside it, and the
     detail keeps room for two lines, so the frame never changes height from one fate to the next. */
  .fates-stage {
    --fate-mark: 56px;
    --fate-size: clamp(28px, calc((100vw - 2 * var(--gutter) - 2 * var(--pad) - var(--fate-mark) - 14px) / 6.1), 46px);
    column-gap: 14px; padding-inline: 0;
  }
  .fates-detail { min-height: calc(2 * 1.55em); text-wrap: balance; }
  .fates-picker { margin-left: -10px; }
  .scene-bar { min-height: calc(48px + var(--corner)); }
  /* The list: the note is a small slip beside the words. */
  .list-head { grid-template-columns: minmax(0, 1fr) auto; gap: 0 14px; align-items: start; }
  .list-copy { display: contents; }
  .list-copy h2 { grid-column: 1 / -1; }
  .list-copy p { margin-top: 20px; }
  .note { width: clamp(112px, 34vw, 150px); margin-top: 22px; padding: 12px 12px 14px; font-size: 12px; line-height: 1.45; }
  .note-title { font-size: 15px; margin-bottom: 4px; }
  /* The days fill the width, each on one line, down to 320px. */
  .timeline-days { display: flex; width: 100%; }
  .day { flex: 1 1 auto; padding: 0 8px; font-size: 13px; white-space: nowrap; }
  /* Each row is one show: the poster in its own column, the title, strip and what's next beside
     it, as in the app's row. */
  .table-head { display: none; }
  .tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'show where' 'progress progress' 'next status'; row-gap: 0; }
  .table-row { --row-pad: 10px; position: relative; padding: 12px var(--row-pad) 12px calc(var(--row-pad) + 48px); }
  .c-show { grid-area: show; display: block; align-self: baseline; }
  .c-show img { position: absolute; left: var(--row-pad); top: 12px; }
  .c-progress { grid-area: progress; }
  .c-where { grid-area: where; justify-self: end; align-self: baseline; }
  .c-next { grid-area: next; font-size: 14px; }
  .c-status { grid-area: status; display: flex; justify-self: end; font-size: 14px; }
  /* Upcoming runs down the page, and the marker rides the line beside the dates. */
  .cal { grid-template-columns: minmax(0, 1fr); padding: 44px 0 0 72px; gap: 22px; }
  .cal-track { left: 29px; right: auto; top: 14px; bottom: 6px; width: 2px; height: auto; }
  .cal-fill { transform-origin: center top; }
  .cal-now { top: 0; left: 30px; }
  .cal-now i { display: none; }
  .doc-body { font-size: 12px; }
  .close h2 { font-size: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .ep.is-next::before { animation: none; opacity: 0.3; }
  /* The toast still waits its five seconds; it just doesn't draw them running down. */
  .undo-toast-time { display: none; }
}