/* Phone and tablet layer for The Aliveness Index.
   Every rule lives inside a max-width media query, so nothing here applies at 1024px and above;
   desktop renders through the template's inline styles only. Declarations use !important because
   they override inline styles. Band A (<=1023): imagery, veils, frames, motion, footer.
   Band B (<=559): layout, rhythm, type, quiz, strip, chooser, results, about. */

/* =========================== Band A: <= 1023px =========================== */
@media (max-width: 1023px) {
  /* v5: no veils anywhere (the plan, GROUNDS); the shared tokens sheet repaints grounds from these two under 1024, so they are pinned to the two grounds */
  :root { --surface-undertone: #fff; --surface-undertone-dark: #000; }
  .af-hero { z-index: 1; }
  .af-sec-equinox { z-index: 1; }

  /* Frames: the parallax wrapper becomes a sticky viewport-height frame; no overscan, no transforms. */
  [data-parallax] { position: sticky !important; top: 0 !important; bottom: auto !important; left: auto !important; right: auto !important;
    height: 100vh !important; height: 100svh !important; grid-area: 1 / 1 !important; align-self: start !important; transform: none !important; will-change: auto !important; }
  #story, #movement, #equinox, .af-quiz { overflow: clip !important; }
  /* round three: the parallax frames (laptop only) sit still and fill their photograph exactly on the phone; the sticky rule above is the main page's */
  .v5-photo > [data-parallax] { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; height: auto !important; grid-area: auto !important; align-self: auto !important; transform: none !important; will-change: auto !important; }
  /* the lights (round two): each phone light is a flow block between the headline and its callout, as tall as its
     file (--ar per light); the callout stands at x 52 so its crosshair's centre lands at 31, inside the gutter */
  .af-light { min-height: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; padding: 72px 24px 96px !important; gap: 24px !important; }   /* v6: as tall as its content, a 96px foot; no screen but the hero is pinned to the viewport */
  .af-light { --fm: .5 !important; --cl: 1600ms !important; --rest: 1700ms !important; }   /* push 7: the forming at half time (mobile.css loads before v5.css, hence !important); a crisp 58 by 1.55s, its caption at 1.6s */
  .af-light-wake { --cl: 1800ms !important; --rest: 1900ms !important; }
  .af-light .af-light-hl { order: 1; }
  .af-light-num { position: relative !important; left: auto !important; bottom: auto !important; width: calc(100% + 48px) !important; margin-left: -24px !important; aspect-ratio: var(--ar, 16 / 10) !important; order: 2; flex: none; }   /* edge to edge: the file's left ink lands on the 24px gutter */
  .af-light > .af-cl { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; margin-left: 28px !important; max-width: 22ch !important; order: 3; }
  .af-cl { max-width: 30ch !important; }
  .af-cl .af-cl-lbl { white-space: nowrap; }
  .af-cl[data-arr="tr-bl"]::before { top: -4.2em !important; bottom: auto !important; }
  .af-cl[data-arr="tr-bl"]::after { top: auto !important; bottom: -1.6em !important; border-top: 0 !important; border-bottom: 1px solid currentColor !important; }
  .af-light-foot { position: relative !important; left: auto !important; bottom: auto !important; margin-top: 0 !important; padding-top: 24px !important; order: 4; }
  /* the 31% / 8% screen on the phone: the head, then the stacked light (the 8% over the 31%) with each end's answer and line at its
     right, the axis folded into the footnote (no line), the footnote last */
  .af-wake-head { order: 1 !important; gap: 14px !important; }
  .af-wake-head .af-light-hl { order: 1 !important; }
  .af-wake-stage { display: block !important; position: relative !important; order: 2 !important; width: calc(100% + 48px) !important; margin-left: -24px !important; }
  .af-wake-stage .af-light-num { width: 100% !important; margin-left: 0 !important; order: 0; }
  .af-wake-ends { position: absolute !important; inset: 0 !important; width: auto !important; aspect-ratio: auto !important; }
  .af-wake-ans-lo, .af-wake-each-lo { left: 62% !important; right: 24px !important; text-align: left !important; }
  .af-wake-ans-hi, .af-wake-each-hi { left: 62% !important; right: 24px !important; text-align: left !important; }
  .af-wake-ans-lo { top: 22% !important; } .af-wake-each-lo { top: calc(22% + 2.2em) !important; }
  .af-wake-ans-hi { top: 54% !important; } .af-wake-each-hi { top: calc(54% + 2.2em) !important; }
  .af-wake-each { font-size: 15px !important; max-width: none !important; }
  .af-wake-axis { display: none !important; }
  .af-wake-foot { position: relative !important; left: auto !important; bottom: auto !important; order: 3 !important; margin-top: 8px !important; max-width: 40ch !important; }
  #wake > .v5-sr { order: 0; }
  /* movement (round two): the arch as a 60svh photograph with the headline alone; the 45% as a row on black under it */
  .af-arch { display: flex !important; flex-direction: column !important; min-height: 0 !important; }
  .af-arch-photo { position: relative !important; inset: auto !important; height: 60svh !important; flex: none; }
  .af-arch-photo img { object-position: 62% 12% !important; }
  .af-arch-hl { position: absolute !important; top: 96px !important; left: 24px !important; right: 24px !important; margin: 0 !important; z-index: 1; }
  .af-move-block { position: relative !important; right: auto !important; bottom: auto !important; width: auto !important; padding: 40px 24px !important; background: #000 !important; color: #fff !important; gap: 16px !important; }
  /* The Equinox close is shorter than a viewport: its frame simply fills the section instead of pinning. */
  #equinox [data-parallax] { position: absolute !important; inset: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; height: auto !important; align-self: stretch !important; justify-self: stretch !important; grid-area: auto !important; }
  /* Placeholder under white type while the frame loads. */
  [data-parallax] > .sc-host-x > div { background: #000 !important; }

  /* No blend layers on phones: grain is baked into the phone derivatives. */
  [style*="mix-blend-mode"] { display: none !important; }
  /* Ambient breathe off on full-bleed imagery (the tile glow keeps its breathe). */
  img[style*="al-breathe"] { animation: none !important; transform: none !important; }

  /* Section 3 source table spans the row. */
  .af-inway-row > dl { grid-column: 1 / -1 !important; }
  .af-inway-band { min-height: 380px !important; height: 56svh !important; }   /* v6: the first row starts on the same screen as the headline */
  .af-sec-inway { padding-top: 32px !important; }
  .af-inway-row { grid-template-columns: 1fr !important; padding: 24px 0 !important; row-gap: 12px !important; border-top: 1px solid rgba(255,255,255,.14); }
  .af-inway-row:first-child { border-top: 0; }
  /* the spread (2026-09-15): under 1024px no photograph bleeds past the section's padding or dissolves at its edges */
  /* the diptych stacks: each photograph full width and 60svh, the block at the 24px inset, the links as rows */
  .af-diptych { grid-template-columns: 1fr !important; }
  .af-card-photo { height: 60svh !important; min-height: 0 !important; }
  .af-card-on { left: 24px !important; top: 24px !important; }
  .af-card-on .v5-short { font-size: 18px !important; }
  .af-card-body { padding: 16px 24px 24px !important; }
  .af-sec-feeling { padding-bottom: 40px !important; }
  .af-card-actions { flex-direction: column !important; gap: 0 !important; }

  /* Footer: mark, hairline index of links, mono close. */
  .af-footer-wrap { padding: 24px clamp(24px, 4.5vw, 64px) 24px !important; gap: 16px !important; }
  .af-footer-toprow { flex-direction: column !important; align-items: flex-start !important; gap: 16px !important; }
  .af-footer-nav { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 0 !important; width: 100% !important; line-height: normal !important; border-top: 1px solid rgba(255,255,255,0.14) !important; }
  .af-footer-nav a { display: flex !important; align-items: center !important; width: 100% !important; min-height: 44px !important; border-bottom: 1px solid rgba(255,255,255,0.14) !important; }
  .af-footer-meta { flex-direction: column !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 0 !important; border-top: 0 !important; padding-top: 0 !important; }
  .af-footer-meta span { display: block !important; line-height: 1.6 !important; text-wrap: balance; }
  /* Results chooser on tablets and landscape phones: two columns so labels never run under the next glow. */
  #results .af-chooser { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #results .af-choice { padding: 12px 0 !important; gap: 8px !important; }
  #results .af-choice > span[aria-hidden] { width: 32px !important; height: 32px !important; }
  #results .af-choice > span[aria-hidden] i { font-size: 17px !important; }
  /* No browser tap flash: the controls carry their own pressed states. */
  a, button, [role="radio"], [role="tab"] { -webkit-tap-highlight-color: transparent; }
}
/* Between 560 and 767px the top-bar label has no room beside the name; keep the CTA on one line and drop the name as under 560. */
@media (max-width: 767px) {
  header nav > .sc-host-x > button, header nav > .sc-host-x > a { white-space: nowrap !important; }
  header > a > span { display: none !important; }
}
/* Tablets keep the footer index but in two columns, with the mono close on one row. */
@media (min-width: 768px) and (max-width: 1023px) {
  .af-footer-nav { display: grid !important; grid-template-columns: 1fr 1fr !important; column-gap: 32px !important; }
  .af-footer-meta { flex-direction: row !important; flex-wrap: wrap !important; justify-content: space-between !important; gap: 8px 16px !important; }
}

/* =========================== Band B: <= 559px =========================== */
@media (max-width: 559px) {
  /* v6: the phone's bottom quiz button: fixed at the foot once the hero's button has scrolled away; hidden while another quiz button, the footer, a poster or a picture is on screen (v5.js keeps .is-on) */
  .af-sticky-cta { position: fixed; left: 24px; right: 24px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 45; transform: translateY(calc(100% + 24px)); transition: transform 200ms var(--ease); pointer-events: none; }
  .af-sticky-cta.is-on { transform: none; pointer-events: auto; }
  .af-sticky-cta .sc-host-x, .af-sticky-cta .sc-host-x > button, .af-sticky-cta .sc-host-x > a { width: 100% !important; display: flex !important; justify-content: center !important; }
  html.dim-open .af-sticky-cta { transform: translateY(calc(100% + 24px)) !important; pointer-events: none !important; }

  /* Top bar */
  header { padding: 10px 20px !important; }
  header nav > .sc-host-x > button, header nav > .sc-host-x > a { padding: 0 !important; min-height: 44px !important; font-size: 12px !important; letter-spacing: 0.10em !important; white-space: nowrap !important; }   /* a text link (round two): its right edge on the gutter; fits beside the mark at 360 */

  /* Section 1 hero */
  #story { min-height: 92svh !important; }   /* the top of the next screen peeks under the button */
  .af-hero { padding: 20svh 24px 40px !important; gap: 28px !important; }   /* v6: the headline starts on the photograph's darker field (measured: 6:1 at 375, 390, 414 and 430; 2.9:1 at 96px on the pale top at 430) */
  .af-hero-block { gap: 12px !important; width: 100%; }
  .af-hero-block p { font-size: 16px !important; font-weight: 400 !important; max-width: 30ch !important; opacity: 1 !important; }
  .af-hero-block .af-eyebrow { margin-top: 8px; }
  #story .v5-photo img { object-position: 50% 22% !important; }   /* the dark hair behind the paragraph */
  .af-hero-block .af-btnrow { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; width: 100%; }

  /* Global rhythm */
  .af-sec-feeling, .af-sec-inway, .af-sec-findings, .af-sec-movement, .af-sec-next { padding-top: 64px !important; padding-bottom: 64px !important; }
  .af-sec-findings { min-height: 0 !important; justify-content: flex-start !important; }
  .af-six-head { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; }
  .v5-doors-cue { text-align: left !important; margin: 0 !important; }
  .af-next-copy { padding-top: 0 !important; }
  .af-sec-feeling, .af-sec-inway, .af-sec-next, .af-sec-movement { gap: 32px !important; }
  .af-sec-findings { gap: 28px !important; }
  #equinox { min-height: 100svh !important; }
  .af-sec-equinox { padding: 96px 24px 40px !important; }
  .af-equinox-block { gap: 20px !important; max-width: 28ch; }
  .af-equinox-block .af-closer { font-size: 28px !important; }
  .af-equinox-block p:not(.af-closer) { font-size: 16px !important; max-width: 28ch !important; }
  .af-equinox-block .af-btnrow { flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; }
  .af-benchmark { padding: 48px 24px !important; gap: 24px !important; }
  .af-benchmark span[style*="max-width: 16ch"], .af-sec-about span[style*="max-width: 16ch"] { max-width: none !important; }
  .af-sec-next > div:first-child { gap: 24px !important; }
  #chooser { gap: 20px !important; }
  .af-sec-movement > div:first-child { gap: 20px !important; }
  .af-sec-movement > div:last-child { gap: 16px !important; }
  .af-wake-row { padding: 14px 0 !important; }
  .af-footer-wrap { padding-left: 24px !important; padding-right: 24px !important; }

  /* Section headlines */
  .af-sec h2, .af-sec-about h2 { max-width: none !important; text-wrap: balance; }

  /* Section 2 cards */


  /* Section 3 rows */
  .af-inway-row { grid-template-columns: 1fr !important; gap: 12px 16px !important; padding: 24px 0 !important; align-items: start !important; border-top: 1px solid rgba(255,255,255,.14); }   /* v6: stacked */
  .af-inway-main { grid-column: 2; }
  .af-inway-main > p { font-size: 18px !important; }
  .af-inway-actions { gap: 0 16px !important; }
  .af-inway-id { display: contents !important; }
  .af-inway-id > div:first-child { grid-column: 1 / -1; }
  .af-inway-id > .v5-stat { grid-column: 1; align-self: start; }
  .af-inway-actions { grid-column: 1 / -1; justify-content: flex-start !important; gap: 4px 16px !important; }
  .af-inway-row > dl { grid-column: 1 / -1; }


  /* Section 6 chooser + invitation (home and results) */
  .af-chooser { column-gap: 16px !important; row-gap: 4px !important; }
  .af-choice { padding: 12px 0 !important; gap: 8px !important; min-height: 56px !important; }
  .af-choice > span[aria-hidden] { width: 32px !important; height: 32px !important; }
  .af-choice > span[aria-hidden] i { font-size: 17px !important; }
  #invitation, #invitation-results { display: flex !important; flex-direction: column; gap: 24px !important; }

  /* Quiz */
  .af-quiz { min-height: 100svh !important; }
  .af-quiz-body { padding: 76px 24px 24px !important; }
  .af-quiz-band ~ .af-quiz-body { padding-top: 24px !important; }   /* under the band the bar is off the question */
  .af-quiz[data-quiz-screen="intro"] .af-quiz-body { padding-top: 120px !important; }   /* room for the top-left way back */
  .af-quiz-intro { margin: 0 !important; align-items: start !important; }   /* the block high on the veil: its pale field is the top (measured 2026-09-16) */
  .af-quiz-q { gap: 12px !important; margin: 0 auto auto !important; }
  .af-quiz-head { gap: 8px 12px !important; }
  .af-quiz-head > div:first-child { gap: 10px !important; }
  .af-quiz-head span[aria-hidden] { width: 36px !important; height: 36px !important; }
  .af-quiz-head span[aria-hidden] i { font-size: 18px !important; }
  .af-quiz-chapter { line-height: 1.45 !important; }
  #quiz-question { font-size: 22px !important; line-height: 1.2 !important; }
  .af-quiz-options { gap: 6px !important; }
  .af-quiz-option { padding: 12px 14px !important; min-height: 44px !important; line-height: 1.25 !important; }
  .af-quiz-nav { display: grid !important; grid-template-columns: 1fr auto !important; gap: 12px 16px !important; align-items: center !important; }
  .af-quiz-nav-left { display: contents !important; }
  .af-quiz-nav-left > .sc-host-x:nth-child(2) > button { grid-row: 1; grid-column: 1 / -1; justify-self: start; }
  .af-quiz-nav-left > .sc-host-x:nth-child(1) > button { grid-row: 2; grid-column: 1; justify-self: start; }
  .af-quiz-nav > .sc-host-x:last-child > button { grid-row: 2; grid-column: 2; justify-self: end; padding: 14px 28px !important; font-size: 12px !important; }
  .af-quiz-foot { flex-direction: column !important; gap: 4px !important; }
  .af-quiz-foot a { display: inline-flex !important; align-items: center !important; min-height: 44px !important; }
  .af-quiz[data-quiz-screen="question"] ~ footer { display: none !important; }
  .af-missing { min-height: 44px !important; padding: 14px 16px !important; }

  /* Results + About */
  .af-sec-results, .af-sec-about { padding-top: 120px !important; gap: 40px !important; }   /* room for the top-left way back at y 88 */
  .af-grid2 { row-gap: 24px !important; }
  .af-ring { align-items: flex-start !important; }
  .af-res-row { grid-template-columns: 36px minmax(0, 1fr) max-content !important; gap: 8px 12px !important; }
  .af-res-row > :nth-child(4) { white-space: nowrap !important; }
  .af-res-row > span[aria-hidden] { grid-row: 1 / 3; }
  .af-res-row > :nth-child(3) { grid-column: 2 / -1; grid-row: 2; }
  .af-res-detail { grid-template-columns: minmax(0, 1fr) !important; padding: 12px 0 20px !important; }
  .af-btnrow > .sc-host-x > button:not([style*="border: 1px solid transparent"]), .af-btnrow > .sc-host-x > a:not([style*="border: 1px solid transparent"]) { width: 100% !important; justify-content: center !important; }
  .af-review-row { grid-template-columns: 36px minmax(0, 1fr) !important; row-gap: 4px !important; }
  .af-review-row > .sc-host-x > button { grid-column: 2; justify-self: start; }
  .af-review-edit { padding-left: 0 !important; }
  .af-register-row { grid-template-columns: 56px minmax(0, 1fr) !important; row-gap: 6px !important; }
  .af-register-row > :nth-child(3) { grid-column: 2 !important; justify-self: start !important; }
  .af-register-row > :nth-child(3) > span:first-child { width: 24px !important; height: 24px !important; }
  .af-register-row > :nth-child(3) i { font-size: 13px !important; }
  .af-about-photo { min-height: 240px !important; }
  .af-about-photo > * { height: 240px !important; min-height: 0 !important; }
}