@font-face{
  font-family: Public Sans;
  src: url('../assets/fonts/PublicSans-400.ttf') format('truetype');
  font-weight: 400;
  font-display: swap
}

@font-face{
  font-family: Public Sans;
  src: url('../assets/fonts/PublicSans-500.ttf') format('truetype');
  font-weight: 500;
  font-display: swap
}

@font-face{
  font-family: Public Sans;
  src: url('../assets/fonts/PublicSans-600.ttf') format('truetype');
  font-weight: 600;
  font-display: swap
}

@font-face{
  font-family: Barlow Condensed;
  src: url('../assets/fonts/BarlowCondensed-600.ttf') format('truetype');
  font-weight: 600;
  font-display: swap
}

:root{
  --paper: #f5f4ed;
  --surface: #fffefa;
  --ink: #1c2828;
  --muted: #596660;
  --line: #d2d6ca;
  --accent: #245c48;
  --tint: #e4eacb;
  --on-accent: #fff;
  --radius: 8px;
  color: var(--ink);
  background: var(--paper);
  font-family: Public Sans, Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth
}

*{
  box-sizing: border-box
}

body{
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: var(--ink)
}

body.dark{
  --paper: #151918;
  --surface: #1e2422;
  --ink: #f1f0e8;
  --muted: #b3bbb3;
  --line: #39423b;
  --accent: #daeb91;
  --tint: #2c3425;
  --on-accent: #20281b;
  --radius: 3px
}

::selection{
  background: var(--accent);
  color: var(--on-accent)
}

button, select, input{
  font: inherit
}

button, a{
  -webkit-tap-highlight-color: transparent
}

button{
  cursor: pointer;
  color: inherit
}

a{
  color: inherit;
  text-underline-offset: 5px
}

button:disabled{
  cursor: default
}

a, button, summary{
  touch-action: manipulation
}

:focus-visible{
  outline: 3px solid var(--accent);
  outline-offset: 5px
}

button:focus-visible{
  outline-color: #a278dc
}

p, h1, h2, h3, figure{
  margin: 0
}

p{
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted)
}

h1, h2, h3{
  font-weight: 500
}

h1, h2{
  text-wrap: balance
}

h1{
  font-size: clamp(3.6rem, 6.1vw, 6.4rem);
  letter-spacing: -.067em;
  line-height: 1.02
}

h1 em{
  font-family: Georgia, serif;
  font-weight: 400;
  letter-spacing: -.065em;
  color: var(--accent)
}

h2{
  font-size: clamp(2.25rem, 4vw, 4.1rem);
  letter-spacing: -.055em;
  line-height: 1.08
}

h3{
  font-size: 1.3rem;
  letter-spacing: -.025em;
  line-height: 1.3
}

.wrap{
  width: min(1400px, calc(100% - 112px));
  margin-inline: auto
}

.skip-link{
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 12px;
  background: var(--accent);
  color: var(--on-accent);
  transform: translateY(-150%)
}

.skip-link:focus{
  transform: none
}

.masthead{
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 20px 40px;
  border-bottom: 1px solid var(--line);
  background: var(--paper)
}

.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0
}

.brand>span{
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.03em
}

.brand-sub{
  display: block;
  color: var(--muted);
  font-size: .75rem;
  letter-spacing: 0;
  font-weight: 400;
  margin-top: 2px
}

.page-nav{
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-left: auto;
  font-size: .875rem
}

.page-nav a, .nav-cta{
  text-decoration: none
}

.page-nav a:hover{
  color: var(--accent)
}

.variants{
  display: flex;
  gap: 3px;
  border: 1px solid var(--line);
  padding: 3px;
  border-radius: 6px;
  margin-left: 20px
}

.variants a{
  display: grid;
  place-items: center;
  width: 36px;
  height: 34px;
  font-size: .875rem;
  text-decoration: none;
  border-radius: 3px
}

.variants a[aria-current]{
  background: var(--ink);
  color: var(--paper)
}

.variants a:hover:not([aria-current]){
  background: var(--tint)
}

.nav-cta{
  font-size: .875rem;
  border-left: 1px solid var(--line);
  padding-left: 24px;
  display: flex;
  gap: 20px
}

.eyebrow{
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .75rem;
  line-height: 1.4;
  color: var(--accent);
  font-weight: 600
}

.tiny-mark{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent)
}

.hero{
  display: grid;
  grid-template-columns: .93fr 1.07fr;
  gap: 0 50px;
  padding-top: 78px;
  align-items: center
}

.hero .eyebrow{
  margin-bottom: 26px
}

.hero-description{
  margin-top: 27px
}

.lede{
  font-size: 1.2rem;
  color: var(--ink);
  line-height: 1.6;
  max-width: 36ch
}

.hero-detail{
  max-width: 44ch;
  margin-top: 15px
}

.actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px
}

.button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  min-height: 50px;
  padding: 13px 20px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform .2s, background .2s
}

.primary{
  background: var(--accent);
  color: var(--on-accent)
}

.secondary{
  background: transparent;
  border-color: var(--line);
  color: var(--ink)
}

.button:hover{
  transform: translateY(-2px)
}

.secondary:hover{
  background: var(--tint)
}

.requirements{
  font-size: .875rem;
  margin-top: 22px;
  line-height: 1.6
}

.hero-art{
  min-width: 0;
  position: relative;
  padding-top: 22px
}

.preview{
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 50px #1a332112;
  scroll-margin-top: 110px
}

.preview-top, .preview-bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 16px 20px
}

.preview-top{
  font-size: .75rem;
  color: var(--muted)
}

.preview-top>span:first-child{
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: .875rem;
  color: var(--ink)
}

.preview-top>span:last-child{
  letter-spacing: .09em
}

.status-dot{
  width: 7px;
  height: 7px;
  background: var(--accent);
  border-radius: 50%
}

.product-shot{
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #101619
}

.product-shot img{
  position: absolute;
  max-width: none;
  width: 131.15%;
  height: auto;
  left: -15.57%;
  top: -11.65%
}

/*
 * prelude.webp frames the quiz card differently than opening.webp frames the
 * paused video underneath it -- the two images were captured separately, not
 * as the same browser window with only the overlay toggled -- so the shared
 * crop above, tuned by eye against the base layer, left this one with a
 * top margin roughly 2.5x its bottom margin. Nudged down until both sides
 * measured out equal against a real capture.
 */
.auto-quiz-demo .auto-quiz-overlay{
  top: -19.4%
}

/*
 * The hero walkthrough cycles three captures through one element
 * (`setScene` in fresh-site.js swaps the `src` and this data attribute).
 * answer.webp's card is taller than evidence.webp's or final.webp's --
 * it carries a revealed verdict and explanation box the plain question
 * views don't -- so the crop tuned for those two cut its Rewatch/Report
 * row off at the bottom. This scene gets its own, far less aggressive
 * crop rather than a compromise that would recut the other two.
 */
.hero-shot[data-scene-name="answer"] img{
  width: 105%;
  left: -2.57%;
  top: -5.36%
}

.preview-bottom{
  align-items: flex-start
}

.preview-bottom p{
  font-size: .875rem;
  max-width: 28ch;
  line-height: 1.5
}

.play-control{
  background: none;
  border: none;
  font-size: .875rem;
  display: flex;
  gap: 8px;
  align-items: center;
  text-align: left;
  padding: 0;
  min-height: 40px;
  flex-shrink: 0;
  color: var(--accent)
}

.scene-nav{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line)
}

.scene-nav button{
  border: 0;
  border-right: 1px solid var(--line);
  padding: 16px 12px;
  background: transparent;
  font-size: .875rem;
  text-align: left;
  line-height: 1.4;
  position: relative
}

.scene-nav button:last-child{
  border-right: 0
}

.scene-nav span{
  display: block;
  font-size: .75rem;
  color: var(--muted);
  margin-bottom: 6px
}

.scene-nav [aria-pressed=true]{
  background: var(--tint)
}

.scene-nav [aria-pressed=true]::before{
  content: '';
  height: 3px;
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  background: var(--accent)
}

.margin-note{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 25px 20px 0 35px
}

.margin-note>span{
  font-size: 2.5rem;
  color: var(--accent);
  line-height: 1
}

.margin-note p{
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.1rem
}

.hero-foot{
  grid-column: 1/-1;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 36px 0;
  margin-top: 58px;
  border-top: 1px solid var(--line);
  font-size: .875rem;
  color: var(--muted)
}

.hero-foot i{
  font-style: normal;
  color: var(--accent);
  padding: 0 12px
}

.footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding-block: 36px;
  border-top: 1px solid var(--line)
}

.footer p, .footer>a{
  font-size: .875rem
}

.dark .masthead{
  padding-block: 20px
}

.dark .hero{
  display: block;
  padding-top: 62px
}

.dark .hero-copy{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 0 60px;
  align-items: end
}

.dark .hero .eyebrow{
  grid-column: 1/-1;
  margin-bottom: 20px
}

.dark h1{
  font-size: clamp(5rem, 9.4vw, 9.5rem);
  line-height: .87;
  letter-spacing: -.055em
}

.dark h1 em{
  font-family: inherit;
  font-style: normal;
  letter-spacing: inherit
}

.dark .hero-description{
  margin: 0;
  max-width: 470px;
  padding-bottom: 5px
}

.dark .hero-art{
  margin-top: 48px;
  padding-top: 0
}

.dark .preview{
  border-radius: var(--radius);
  box-shadow: none
}

.dark .preview .product-shot{
  aspect-ratio: 2.65
}

.dark .preview .product-shot img{
  width: 100%;
  left: 0;
  top: -21%
}

.dark .preview-bottom p{
  max-width: none
}

.dark .scene-nav button{
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px
}

.dark .scene-nav span{
  margin: 0;
  color: var(--accent)
}

.dark .hero-foot{
  margin-top: 32px
}

.dark .hero-foot>span:first-child{
  color: var(--ink)
}

@media(min-width:1600px){
  .hero{
    padding-top: 100px;
    padding-bottom: 20px
  }
}

@media(max-width:1100px){
  .wrap{
    width: calc(100% - 64px)
  }

  .masthead{
    padding-inline: 24px;
    gap: 20px
  }

  .page-nav{
    gap: 20px
  }

  .variants{
    margin-left: 0
  }

  .hero{
    gap: 30px;
    padding-top: 60px
  }

  .hero-detail{
    font-size: 1rem
  }

  .preview-top>span:last-child{
    display: none
  }

  .preview-bottom{
    display: block
  }

  .play-control{
    margin-top: 8px
  }

  .dark .preview-bottom{
    display: flex
  }

  .dark .hero-copy{
    gap: 0 35px
  }

  .dark .hero-description .lede{
    font-size: 1.1rem
  }

  .nav-cta{
    display: none
  }
}

@media(max-width:760px){
  .wrap{
    width: calc(100% - 40px)
  }

  .masthead{
    padding: 14px 20px;
    gap: 12px
  }

  .page-nav{
    display: none
  }

  .variants{
    margin-left: auto
  }

  .hero{
    grid-template-columns: 1fr;
    padding-top: 44px;
    gap: 20px
  }

  h1{
    font-size: clamp(3.4rem, 11vw, 5.5rem)
  }

  .hero-art{
    padding-top: 16px
  }

  .hero-foot{
    margin-top: 16px;
    flex-direction: column;
    padding-block: 25px;
    font-size: .8rem;
    gap: 14px
  }

  .margin-note{
    margin: 18px 10px 0
  }

  .hero .eyebrow{
    font-size: .75rem
  }

  .footer{
    flex-wrap: wrap;
    gap: 20px
  }

  .footer p{
    order: 3;
    width: 100%
  }

  .dark .hero{
    padding-top: 42px
  }

  .dark .hero-copy{
    display: block
  }

  .dark h1{
    font-size: clamp(5.2rem, 18vw, 8rem)
  }

  .dark .hero-description{
    margin-top: 28px;
    max-width: none
  }

  .dark .hero-art{
    margin-top: 30px
  }

  .dark .preview .product-shot{
    aspect-ratio: 16/9
  }

  .dark .preview .product-shot img{
    width: 131.15%;
    left: -15.57%;
    top: -11.65%
  }

  .dark .preview-bottom{
    display: block
  }

  .dark .scene-nav button{
    display: block;
    padding: 14px 10px
  }

  .dark .scene-nav span{
    margin-bottom: 6px
  }

  .scene-nav button{
    font-size: .875rem
  }

  .hero-foot i{
    padding: 0 7px
  }
}

@media(prefers-reduced-motion:reduce){
  :root{
    scroll-behavior: auto
  }

  *, *::before, *::after{
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important
  }
}

/* The timeline remains at a single world coordinate. The whole world pans. */
.story-window{
  overflow: clip;
  border-top: 1px solid var(--line)
}

.story-world{
  --edge: clamp(30px, 3.5vw, 52px);
  --camera-x: calc(-1 * var(--edge));
  position: relative;
  width: 200%;
  transform: translate3d(var(--camera-x), 0, 0);
  will-change: transform
}

.story-rail{
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
  pointer-events: none
}

.story-rail>span{
  position: absolute;
  left: -1.5px;
  top: 0;
  width: 4px;
  height: var(--rail-fill, 0px);
  background: var(--accent)
}

.story-chapter{
  position: relative;
  min-height: 100svh;
  padding: 86px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  scroll-margin-top: 90px
}

.scene-inner{
  width: calc(50% - 3 * var(--edge));
  margin-left: calc(2 * var(--edge));
  min-width: 0
}

.story-chapter[data-side=right] .scene-inner{
  margin-left: calc(50% + var(--edge))
}

.chapter-marker{
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 23px;
  width: 23px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--accent);
  display: grid;
  place-items: center
}

.chapter-marker::after{
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--paper)
}

.chapter-marker>span{
  position: absolute;
  font-size: .75rem;
  right: 35px;
  color: var(--muted);
  background: var(--paper);
  padding: 5px
}

.story-chapter[data-side=right] .chapter-marker>span{
  right: auto;
  left: 35px
}

.is-reached .chapter-marker::after{
  background: var(--accent)
}

.scene-inner>.eyebrow{
  margin-bottom: 30px
}

.section-number{
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--accent);
  padding-bottom: 3px;
  margin-right: 8px
}

.scene-heading{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 60px;
  margin-bottom: 46px
}

.scene-heading>p{
  max-width: 54ch;
  font-size: 1.125rem
}

.scene-heading em{
  font-family: Georgia, serif;
  color: var(--accent);
  font-weight: 400
}

.explained-media{
  display: grid;
  grid-template-columns: 1.8fr 1fr;
  gap: 40px;
  align-items: center
}

figure{
  min-width: 0
}

figure>.product-shot{
  border: 1px solid var(--line);
  border-radius: var(--radius)
}

figcaption{
  display: grid;
  gap: 5px;
  margin-top: 15px;
  font-size: .875rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 74ch
}

figcaption strong{
  font-weight: 500;
  color: var(--ink)
}

.reading-guide{
  border-top: 1px solid var(--line)
}

.reading-guide>.eyebrow{
  margin-top: 18px
}

.reading-guide>div{
  display: flex;
  gap: 15px;
  margin-top: 23px
}

.reading-guide>div>span{
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: .75rem;
  color: var(--accent)
}

.reading-guide p{
  font-size: 1rem
}

.reading-guide strong{
  display: block;
  color: var(--ink);
  font-weight: 500;
  margin-bottom: 5px
}

.evidence-chapter{
  background: var(--tint)
}

.evidence-chapter .chapter-marker, .evidence-chapter .chapter-marker>span{
  background: var(--tint)
}

.evidence-example{
  display: grid;
  grid-template-columns: 1.65fr 1fr;
  gap: 50px;
  align-items: center
}

.return-flow{
  list-style: none;
  padding: 0;
  margin: 0
}

.return-flow li{
  position: relative;
  padding: 10px 0 28px 50px
}

.return-flow li:not(:last-child)::before{
  content: '';
  position: absolute;
  top: 27px;
  bottom: -10px;
  left: 14px;
  width: 1px;
  background: var(--accent);
  opacity: .3
}

.return-flow li>span{
  position: absolute;
  left: 0;
  top: 9px;
  background: var(--tint);
  color: var(--accent);
  font-size: .75rem;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 50%
}

.return-flow strong{
  font-weight: 500;
  display: block;
  margin-bottom: 7px
}

.return-flow p{
  font-size: 1rem
}

.pace-layout{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 50px
}

.pace-example{
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 32px;
  border-radius: var(--radius)
}

.artifact-title{
  padding-bottom: 25px;
  border-bottom: 1px solid var(--line)
}

.artifact-title p{
  font-size: 1rem;
  margin-top: 12px
}

.session-timeline{
  list-style: none;
  padding: 0;
  margin: 28px 0 0
}

.session-timeline li{
  padding: 0 0 26px 33px;
  position: relative
}

.session-timeline li:last-child{
  padding-bottom: 0
}

.session-timeline li:not(:last-child)::before{
  content: '';
  position: absolute;
  top: 10px;
  bottom: -6px;
  left: 5px;
  width: 1px;
  background: var(--line)
}

.session-dot{
  position: absolute;
  left: 0;
  top: 6px;
  width: 11px;
  height: 11px;
  background: var(--accent);
  border: 3px solid var(--surface);
  outline: 1px solid var(--accent);
  border-radius: 50%
}

.session-dot.final-dot{
  border-radius: 0;
  rotate: 45deg
}

.session-timeline strong{
  font-weight: 500
}

.session-timeline p{
  margin-top: 6px;
  font-size: 1rem
}

.pace-settings{
  padding: 28px 0
}

.pace-settings>p{
  margin-top: 12px
}

.sample-controls{
  margin-top: 22px;
  border-top: 1px solid var(--line)
}

.sample-controls label{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 80px;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 1rem
}

.sample-controls select{
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 12px;
  font-size: .875rem;
  border-radius: 4px;
  max-width: 100%
}

.sample-controls .checkbox-label{
  justify-content: flex-start;
  cursor: pointer
}

.checkbox-label input{
  accent-color: var(--accent);
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin: 0
}

.sample-result{
  background: var(--tint);
  padding: 18px;
  color: var(--ink)
}

.sample-note{
  font-size: .875rem !important
}

.settings-details{
  margin-top: 20px
}

.quality-layout, .privacy-layout{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px
}

.quality-layout>div>p, .privacy-layout>div>p{
  max-width: 52ch;
  margin-top: 25px
}

.quality-list{
  border-top: 1px solid var(--line);
  padding-top: 25px
}

.quality-list dl{
  margin: 20px 0
}

.quality-list dl div{
  border-bottom: 1px solid var(--line);
  padding: 20px 0
}

.quality-list dt{
  font-weight: 500;
  margin-bottom: 8px
}

.quality-list dd{
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65
}

.quality-list>p{
  font-size: 1rem
}

.model-options{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}

.model-options article{
  padding: 32px 45px 32px 0
}

.model-options article+article{
  border-left: 1px solid var(--line);
  padding-left: 45px;
  padding-right: 0
}

.option-label{
  font-size: .75rem;
  letter-spacing: .09em;
  color: var(--accent)
}

.model-options h3{
  font-size: 1.6rem;
  margin: 16px 0 12px
}

.model-options>article>p{
  max-width: 45ch
}

.model-options dl{
  margin: 20px 0
}

.model-options dl>div{
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px;
  border-top: 1px solid var(--line);
  padding: 17px 0;
  font-size: 1rem;
  line-height: 1.65
}

.model-options dt{
  font-weight: 500
}

.model-options dd{
  margin: 0;
  color: var(--muted)
}

details img{
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius)
}

summary{
  cursor: pointer;
  min-height: 48px;
  padding-block: 13px;
  line-height: 1.5;
  font-size: 1rem
}

summary:hover{
  color: var(--accent)
}

.privacy-ledger article{
  border-top: 1px solid var(--line);
  padding: 25px 0
}

.privacy-ledger p{
  margin-top: 12px
}

.closing{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 90px;
  padding-block: 100px
}

.close-copy>.eyebrow{
  margin-bottom: 25px
}

.close-copy>p{
  margin-top: 25px;
  max-width: 50ch
}

.availability{
  margin-top: 30px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .875rem
}

.availability strong{
  font-weight: 500;
  line-height: 1.6
}

.availability p{
  font-size: .875rem;
  margin-top: 7px
}

.support-copy{
  margin-top: 38px
}

.support-copy h3{
  font-size: 1rem
}

.support-copy p{
  font-size: .875rem;
  margin-top: 9px;
  max-width: 55ch
}

.faq>h3{
  margin-bottom: 25px
}

.faq details{
  border-top: 1px solid var(--line)
}

.faq details:last-child{
  border-bottom: 1px solid var(--line)
}

.faq summary{
  padding-block: 20px
}

.faq details p{
  padding: 0 0 22px;
  font-size: 1rem
}

.dark h2{
  font-family: Public Sans, Arial, sans-serif;
  font-size: clamp(2.3rem, 4.5vw, 4.7rem)
}

.dark .scene-heading em{
  font-family: inherit;
  font-style: normal
}

.dark .story-chapter{
  padding-block: 90px;
  min-height: 108svh
}

.dark .evidence-chapter{
  background: var(--paper)
}

.dark .evidence-chapter .chapter-marker, .dark .evidence-chapter .chapter-marker>span{
  background: var(--paper)
}

.dark .evidence-example{
  grid-template-columns: 1.65fr 1fr
}

.dark .return-flow li>span{
  background: var(--paper)
}

.dark .scene-heading{
  margin-bottom: 50px
}

.dark .reading-guide strong{
  color: var(--accent)
}

.dark .quality-list dt{
  color: var(--accent)
}

.dark .preview .product-shot{
  aspect-ratio: 16/9
}

.dark .preview .product-shot img{
  width: 131.15%;
  left: -15.57%;
  top: -11.65%
}

.dark .hero-art{
  max-width: 1100px;
  margin-inline: auto
}

@media(min-width:1700px){
  .scene-inner{
    padding-inline: calc((50vw - 800px)/2)
  }
}

@media(max-width:1100px){
  .explained-media, .evidence-example, .dark .evidence-example{
    grid-template-columns: 1.4fr 1fr;
    gap: 28px
  }

  .scene-heading{
    gap: 40px
  }

  .scene-heading>p{
    font-size: 1rem
  }

  .reading-guide>div{
    margin-top: 14px
  }

  .reading-guide p{
    font-size: .875rem
  }

  .pace-layout{
    gap: 30px
  }

  .pace-example{
    padding: 25px
  }

  .quality-layout, .privacy-layout{
    gap: 45px
  }

  .model-options article{
    padding-right: 25px
  }

  .model-options article+article{
    padding-left: 25px
  }

  .model-options dl>div{
    grid-template-columns: 1fr;
    gap: 5px
  }

  .closing{
    gap: 45px
  }

  .sample-controls label{
    flex-wrap: wrap;
    gap: 12px
  }
}

@media(max-width:760px){
  .story-world{
    width: 100%;
    transform: none !important;
    will-change: auto
  }

  .story-rail{
    left: 20px
  }

  .story-chapter, .dark .story-chapter{
    padding: 58px 0;
    min-height: auto;
    scroll-margin-top: 76px
  }

  .scene-inner, .story-chapter[data-side=right] .scene-inner{
    width: calc(100% - 62px);
    margin-left: 42px
  }

  .chapter-marker{
    left: 20px;
    top: 65px;
    width: 17px;
    height: 17px
  }

  .chapter-marker>span{
    display: none
  }

  .chapter-marker::after{
    width: 7px;
    height: 7px
  }

  .scene-inner>.eyebrow{
    margin-bottom: 24px
  }

  .scene-heading{
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 30px
  }

  .explained-media, .evidence-example, .dark .evidence-example{
    grid-template-columns: 1fr;
    gap: 28px
  }

  .reading-guide{
    margin-top: 0
  }

  .reading-guide p{
    font-size: 1rem
  }

  .reading-guide>div{
    margin-top: 20px
  }

  .pace-layout, .quality-layout, .privacy-layout{
    grid-template-columns: 1fr;
    gap: 28px
  }

  .return-flow li{
    padding-bottom: 22px
  }

  .pace-example{
    padding: 20px
  }

  .pace-settings{
    padding-top: 0
  }

  .model-options{
    grid-template-columns: 1fr
  }

  .model-options article{
    padding: 28px 0
  }

  .model-options article+article{
    padding: 28px 0;
    border-left: 0;
    border-top: 1px solid var(--line)
  }

  .model-options dl>div{
    grid-template-columns: 1fr
  }

  .closing{
    grid-template-columns: 1fr;
    padding-block: 60px;
    gap: 45px
  }

  .dark h2{
    font-size: clamp(2.2rem, 8vw, 3.8rem)
  }

  .dark .scene-heading{
    margin-bottom: 28px
  }

  .scene-nav button{
    padding-inline: 10px
  }

  .preview-top, .preview-bottom{
    padding-inline: 14px
  }

  .scene-heading h2 br{
    display: none
  }

  .quality-layout h2 br, .privacy-layout h2 br{
    display: none
  }
}

@media(prefers-reduced-motion:reduce) and (min-width:761px){
  .story-world{
    width: 100%;
    transform: none !important;
    will-change: auto
  }

  .story-rail{
    left: auto;
    right: 26px
  }

  .scene-inner, .story-chapter[data-side=right] .scene-inner{
    width: calc(100% - 110px);
    margin-inline: 40px 70px
  }

  .chapter-marker{
    left: auto;
    right: 15px;
    transform: translateY(-50%)
  }

  .chapter-marker>span{
    display: none
  }
}

.evidence-context{
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0
}

.evidence-context .eyebrow{
  margin-bottom: 13px
}

.evidence-context h3{
  font-size: 1.125rem;
  line-height: 1.55;
  max-width: 58ch
}

.evidence-demo>.product-shot{
  border-radius: 0
}

.evidence-demo-controls{
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius)
}

.evidence-demo-controls>p{
  font-size: .875rem;
  min-height: 1.7em
}

.evidence-demo-controls .button{
  margin-top: 14px
}

.evidence-chapter .scene-heading{
  align-items: center
}

.evidence-chapter{
  min-height: 115svh
}

.dark .evidence-chapter{
  min-height: 115svh
}

@media(max-width:760px){
  .evidence-context, .evidence-demo-controls{
    padding: 18px
  }

  .evidence-context h3{
    font-size: 1rem
  }

  .evidence-demo-controls .button{
    padding-inline: 12px;
    gap: 8px;
    width: 100%;
    text-align: left
  }

  .evidence-chapter, .dark .evidence-chapter{
    min-height: auto
  }
}

/* Shared alignment: every two-column section uses the same reading grid. */
:root{
  --content-columns: minmax(0, 3fr) minmax(0, 2fr);
  --content-gap: clamp(32px, 4.4vw, 64px);
  --section-space: clamp(64px, 7vw, 104px);
}

.story-world{
  transition: none;
}

.story-chapter,
.dark .story-chapter,
.evidence-chapter,
.dark .evidence-chapter{
  min-height: 0;
  padding-block: var(--section-space);
  align-items: flex-start;
}

.scene-heading,
.dark .scene-heading,
.evidence-chapter .scene-heading,
.explained-media,
.evidence-example,
.dark .evidence-example,
.pace-layout,
.quality-layout,
.privacy-layout{
  grid-template-columns: var(--content-columns);
  gap: var(--content-gap);
  align-items: start;
}

.scene-heading,
.dark .scene-heading{
  margin-bottom: 40px;
}

.scene-heading>p{
  max-width: 46ch;
}

.scene-heading h2{
  max-width: 18ch;
}

.scene-heading h2 br,
.quality-layout h2 br,
.privacy-layout h2 br{
  display: none;
}

.scene-heading em{
  display: block;
}

.scene-inner>.eyebrow{
  margin-bottom: 24px;
}

.reading-guide{
  padding-top: 0;
}

.reading-guide>.eyebrow{
  margin-top: 0;
  padding-block: 16px;
  border-bottom: 1px solid var(--line);
}

.reading-guide>div{
  margin-top: 24px;
}

.return-flow{
  padding-top: 0;
}

.return-flow li{
  padding-top: 0;
  padding-bottom: 30px;
}

.return-flow li>span{
  top: 0;
}

.return-flow li:last-child{
  padding-bottom: 0;
}

.pace-example,
.pace-settings{
  padding: 28px;
}

.pace-settings{
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.quality-list{
  padding-top: 0;
  border-top: 0;
}

.quality-list>h3{
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.quality-list dl{
  margin-top: 0;
}

.privacy-ledger article:first-child{
  padding-top: 0;
  border-top: 0;
}

.privacy-ledger article:last-child{
  padding-bottom: 0;
}

#models .scene-heading{
  grid-template-columns: 1fr;
  gap: 20px;
}

#models .scene-heading h2{
  max-width: 24ch;
}

#models .scene-heading>p{
  max-width: 72ch;
}

.model-options{
  column-gap: var(--content-gap);
}

.model-options article,
.model-options article+article{
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 7;
  padding: 28px 0;
  border-left: 0;
}

.model-options dl{
  display: contents;
}

.model-options article>p{
  padding-bottom: 24px;
  max-width: none;
}

.model-options dl>div{
  margin: 0;
}

.model-options details{
  margin-top: 12px;
}

.model-options summary{
  padding-block: 12px;
}

.model-options h3{
  margin: 14px 0 12px;
}

.closing{
  grid-template-columns: var(--content-columns);
  gap: var(--content-gap);
  align-items: start;
}

.faq{
  padding-top: 45px;
}

.dark .hero-art{
  max-width: none;
}

.dark .hero-copy{
  align-items: start;
}

.light .hero{
  align-items: start;
}

.light .hero-art{
  padding-top: 43px;
}

.margin-note{
  margin-left: 0;
}

@media (max-width: 1000px){
  :root{
    --content-columns: minmax(0, 1fr) minmax(0, 1fr);
    --content-gap: 28px;
  }

  .pace-example, .pace-settings{
    padding: 22px;
  }

  .sample-controls label{
    align-items: flex-start;
  }

  .sample-controls select{
    width: 100%;
  }

  .scene-heading h2{
    font-size: 2.5rem;
  }
}

@media (max-width: 760px){
  :root{
    --content-columns: minmax(0, 1fr);
    --section-space: 52px;
  }

  .story-world{
    transition: none;
  }

  .scene-heading, .dark .scene-heading{
    margin-bottom: 28px;
    gap: 20px;
  }

  .scene-heading h2{
    max-width: 20ch;
    font-size: clamp(2rem, 8vw, 3.25rem);
  }

  .scene-heading>p{
    max-width: none;
  }

  .scene-inner>.eyebrow{
    margin-bottom: 20px;
  }

  .model-options{
    display: block;
  }

  .model-options article, .model-options article+article{
    display: block;
    padding-block: 26px;
  }

  .model-options article+article{
    border-top: 1px solid var(--line);
  }

  .model-options dl{
    display: block;
    margin-top: 0;
  }

  .model-options article>p{
    padding-bottom: 20px;
  }

  .model-options h3{
    margin-block: 14px 12px;
  }

  .closing{
    padding-block: 52px;
    gap: 36px;
  }

  .faq{
    padding-top: 0;
  }

  .light .hero-art{
    padding-top: 12px;
  }
}

@media (prefers-reduced-motion: reduce){
  .story-world{
    transition: none;
  }
}

/* Give the major chapters a full-width title; keep quieter chapters compact. */
#how .scene-heading,
#evidence .scene-heading,
#models .scene-heading{
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

#how .scene-heading h2,
#evidence .scene-heading h2,
#models .scene-heading h2{
  max-width: none;
  font-size: clamp(2.5rem, 5.2vw, 5.25rem);
  text-wrap: pretty;
}

#how .scene-heading>p,
#evidence .scene-heading>p,
#models .scene-heading>p{
  max-width: 72ch;
}

#evidence .scene-heading em{
  display: inline;
}

@media (max-width: 760px){

  #how .scene-heading h2,
  #evidence .scene-heading h2,
  #models .scene-heading h2{
    font-size: clamp(2.25rem, 9vw, 3.6rem);
  }
}

/* Open sections: a chapter, a demonstration, then its reading notes. */
.layout-open .scene-heading,
.layout-open .explained-media,
.layout-open .evidence-example,
.layout-open .quality-layout,
.layout-open .privacy-layout{
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.layout-open .scene-heading h2,
.layout-open .quality-layout h2,
.layout-open .privacy-layout h2{
  max-width: none;
  font-size: clamp(2.5rem, 5.2vw, 5.25rem);
}

.layout-open .scene-heading>p,
.layout-open .quality-layout>div>p,
.layout-open .privacy-layout>div>p{
  max-width: 72ch;
}

.layout-open .reading-guide{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px;
}

.layout-open .reading-guide>.eyebrow{
  grid-column: 1 / -1;
}

.layout-open .return-flow{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.layout-open .return-flow li{
  padding: 16px 0 0;
  border-top: 1px solid var(--accent);
}

.layout-open .return-flow li::before{
  display: none;
}

.layout-open .return-flow li>span{
  position: static;
  margin-bottom: 16px;
}

.layout-open .pace-layout{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.layout-open .quality-list dl{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.layout-open .quality-list dl>div{
  border-bottom: 0;
}

.layout-open .privacy-ledger{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.layout-open .privacy-ledger article,
.layout-open .privacy-ledger article:first-child{
  padding: 24px 0 0;
  border-top: 1px solid var(--line);
}

.layout-open .evidence-context h3{
  max-width: none;
}

.layout-open .evidence-demo-controls{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.layout-open .evidence-demo-controls .button{
  margin-top: 0;
  flex-shrink: 0;
}

/* Guided sections: keep each explanation together beside its artifact. */
.layout-guided .scene-inner{
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  column-gap: var(--content-gap);
  row-gap: 22px;
  align-items: start;
}

.layout-guided .scene-inner>.eyebrow{
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}

.layout-guided .scene-inner>.scene-heading{
  grid-column: 1;
  grid-row: 2;
  display: block;
  margin: 0;
}

.layout-guided .scene-heading h2,
.layout-guided#how .scene-heading h2,
.layout-guided#evidence .scene-heading h2,
.layout-guided#models .scene-heading h2{
  font-size: clamp(2.4rem, 4vw, 4.2rem);
  max-width: none;
  line-height: 1.1;
}

.layout-guided .scene-heading>p{
  margin-top: 24px;
  max-width: none;
  font-size: 1rem;
}

.layout-guided .scene-inner> :is(.explained-media, .evidence-example, .pace-layout, .model-options){
  grid-column: 2;
  grid-row: 1 / span 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.layout-guided .reading-guide>.eyebrow{
  padding-top: 16px;
}

.layout-guided .reading-guide>div{
  margin-top: 18px;
}

.layout-guided .quality-layout,
.layout-guided .privacy-layout{
  display: contents;
}

.layout-guided :is(.quality-layout, .privacy-layout)>div:first-child{
  grid-column: 1;
  grid-row: 2;
}

.layout-guided :is(.quality-layout, .privacy-layout)>div:last-child{
  grid-column: 2;
  grid-row: 1 / span 2;
}

.layout-guided :is(.quality-layout, .privacy-layout) h2{
  font-size: clamp(2.4rem, 4vw, 4.2rem);
}

.layout-guided .model-options{
  border: 0;
}

.layout-guided .model-options article,
.layout-guided .model-options article+article{
  display: block;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.layout-guided .model-options dl{
  display: block;
}

.layout-guided .model-options article>p{
  padding-bottom: 20px;
}

.layout-guided .return-flow{
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.layout-guided .pace-example, .layout-guided .pace-settings{
  padding: 24px;
}

@media (max-width: 1100px){
  .masthead{
    gap: 20px;
  }

  .page-nav{
    gap: 18px;
  }
}

@media (max-width: 900px){
  .page-nav{
    display: none;
  }

  .variants{
    margin-left: auto;
  }
}

@media (max-width: 760px){
  .masthead{
    gap: 8px;
    padding-inline: 16px;
  }

  .brand{
    gap: 7px;
  }

  .brand>span{
    font-size: 1rem;
  }

  .variants{
    gap: 0;
    padding: 2px;
  }

  .variants a{
    width: 29px;
    height: 34px;
  }

  .layout-open .reading-guide,
  .layout-open .return-flow,
  .layout-open .pace-layout,
  .layout-open .quality-list dl,
  .layout-open .privacy-ledger{
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .layout-open .reading-guide>div{
    margin-top: 0;
  }

  .layout-open .scene-heading h2,
  .layout-open .quality-layout h2,
  .layout-open .privacy-layout h2{
    font-size: clamp(2.25rem, 9vw, 3.6rem);
  }

  .layout-open .evidence-demo-controls{
    display: block;
  }

  .layout-open .evidence-demo-controls .button{
    margin-top: 16px;
  }

  .layout-guided .scene-inner{
    display: block;
  }

  .layout-guided .scene-inner>.eyebrow{
    margin-bottom: 20px;
  }

  .layout-guided .scene-inner>.scene-heading{
    margin-bottom: 28px;
  }

  .layout-guided .scene-inner> :is(.explained-media, .evidence-example, .pace-layout, .model-options){
    display: grid;
  }

  .layout-guided .quality-layout,
  .layout-guided .privacy-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .layout-guided :is(.quality-layout, .privacy-layout)>div{
    grid-column: auto !important;
    grid-row: auto !important;
  }
}

@media (max-width: 359px){
  .masthead{
    padding-inline: 10px;
  }

  .brand img{
    width: 28px;
    height: 28px;
  }

  .variants a{
    width: 26px;
  }

  .brand-sub{
    font-size: .7rem;
  }
}

.layout-guided .scene-inner{
  grid-template-rows: min-content 1fr;
}

/* E/F: let the label column size to its longest label, with shared row alignment. */
.light .hero-art{
  padding-top: 0;
}

@media (min-width: 1000px){
  .layout-open .model-options article{
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 24px;
  }

  .layout-open .model-options article> :is(.option-label, h3, p, details){
    grid-column: 1 / -1;
  }

  .layout-open .model-options dl>div,
  .layout-guided .model-options dl>div{
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: inherit;
    align-items: baseline;
  }

  .layout-guided .model-options dl{
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 24px;
  }

  .layout-open .model-options dt,
  .layout-guided .model-options dt{
    white-space: nowrap;
  }

  .layout-open .model-options dd,
  .layout-guided .model-options dd{
    min-width: 0;
  }
}

/* E uses crisp containers and puts walkthrough controls directly above the image. */
body.light{
  --radius: 1px;
}

.light :is(.preview, .variants, .variants a, .sample-controls select){
  border-radius: var(--radius);
}

.light .preview-top{
  padding-block: 10px;
  flex-wrap: wrap;
}

.light .preview-top .play-control{
  margin: 0 0 0 auto;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .055em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--on-accent);
  border-color: transparent;
}

.light .preview-top .play-control:hover{
  background: var(--accent);
}

.light .hero-shot::after{
  content: '';
  position: absolute;
  inset: 55% 0 0;
  background: linear-gradient(transparent, #000c);
  pointer-events: none;
}

.light .hero-shot [data-scene-caption]{
  position: absolute;
  z-index: 1;
  left: 20px;
  right: 20px;
  bottom: 16px;
  color: #fff;
  font-size: clamp(.875rem, 1.25vw, 1.125rem);
  line-height: 1.4;
  font-weight: 600;
  text-shadow: 0 1px 5px #000;
}

@media (max-width: 760px){
  .light .hero-shot [data-scene-caption]{
    left: 14px;
    right: 14px;
    bottom: 12px;
  }
}

/* F keeps its original type and card treatment in the horizontal sections. */
.dark #how .scene-heading h2,
.dark #evidence .scene-heading h2,
.dark #pace .scene-heading h2,
.dark #models .scene-heading h2{
  font-size: clamp(2.4rem, 4vw, 4.2rem);
  line-height: 1.1;
}

.dark .layout-open .scene-heading{
  gap: 24px;
}

.dark .layout-open .scene-heading>p{
  font-size: 1rem;
}

.dark .layout-open .pace-example,
.dark .layout-open .pace-settings{
  padding: 24px;
}

:is(.light, .dark) .model-options{
  border: 0;
}

:is(.light, .dark) .model-options article,
:is(.light, .dark) .model-options article+article{
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

:is(.light, .dark) .model-options article>p{
  padding-bottom: 20px;
}

@media (max-width: 760px){
  :is(.light, .dark) .model-options article+article{
    margin-top: 28px;
  }
}

/* Match E's explanatory items to the source-return steps in the next chapter. */
.light .reading-guide{
  border-top: 0;
  row-gap: 20px;
}

.light .reading-guide>.eyebrow{
  margin: 0;
  padding: 0;
  border: 0;
}

.light .reading-guide>div{
  display: block;
  margin-top: 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--accent);
}

.light .reading-guide>div>span{
  width: 28px;
  height: 28px;
  margin-bottom: 16px;
  border-color: var(--accent);
  background: var(--paper);
}

.light .reading-guide strong{
  margin-bottom: 7px;
}

/* Keep the Git example caption attached to its image in E. */
.light #how .explained-media figure>.product-shot{
  border-radius: var(--radius) var(--radius) 0 0;
}

.light #how figcaption{
  margin-top: 0;
  max-width: none;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
}

@media (max-width: 760px){
  .light #how figcaption{
    padding: 18px;
  }
}

/* Persistent selection-style emphasis in E. */
.light .text-highlight{
  background: var(--accent);
  color: var(--on-accent);
  padding-inline: .045em;
  margin-inline-start: -.045em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

:is(.light, .dark) .nav-cta{
  background: var(--accent);
  color: var(--on-accent);
  border: 1px solid transparent;
  padding: 12px 16px;
  min-height: 44px;
  white-space: nowrap;
}

.light #evidence .scene-heading{
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 22px 40px;
}

.light #evidence .scene-heading h2{
  grid-column: 1 / -1;
}

.light #evidence .scene-heading>p{
  grid-column: 1;
  max-width: 72ch;
}

.light #evidence .evidence-reply{
  grid-column: 2;
  align-self: center;
  justify-self: end;
  font-family: inherit;
  font-style: normal;
  font-size: clamp(2.5rem, 5.2vw, 5.25rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.055em;
  color: var(--on-accent);
  white-space: nowrap;
}

/* F's first chapters use a centered demonstration with equal-width notes below. */
.dark :is(#how, #evidence) .scene-heading{
  text-align: center;
}

.dark :is(#how, #evidence) .scene-heading>p{
  margin-inline: auto;
}

.dark :is(#how, #evidence) .scene-inner>.eyebrow{
  justify-content: center;
}

.dark :is(#how, #evidence) .scene-inner> :is(.explained-media, .evidence-example){
  gap: 32px;
}

.dark :is(#how, #evidence) figure{
  width: 100%;
  max-width: 1100px;
  margin-inline: auto;
}

.dark #how .reading-guide{
  border-top: 0;
  row-gap: 20px;
}

.dark #how .reading-guide>.eyebrow{
  padding: 0;
  border: 0;
}

.dark #how .reading-guide>div{
  margin: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.dark #evidence .return-flow li{
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

@media (max-width: 760px){
  .light #evidence .scene-heading{
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .light #evidence .evidence-reply{
    grid-column: 1;
    font-size: clamp(2.25rem, 9vw, 3.6rem);
  }

  .dark :is(#how, #evidence) .scene-heading{
    text-align: left;
  }

  .dark :is(#how, #evidence) .scene-inner>.eyebrow{
    justify-content: flex-start;
  }
}

/* E/G retain the selected tab fill, without the green line above it. */
.light .scene-nav [aria-pressed=true]::before{
  display: none;
}

.light #evidence .scene-heading>p{
  align-self: center;
}

/* The last three items share one visual treatment in the two new F experiments. */
.dark #how .reading-guide>div{
  display: block;
}

.dark #how .reading-guide>div>span{
  width: 28px;
  height: 28px;
  border-color: var(--accent);
  margin-bottom: 16px;
  background: var(--surface);
}

.dark #how .reading-guide strong{
  color: var(--ink);
  margin-bottom: 7px;
}

.dark #evidence .return-flow li>span{
  background: var(--surface);
}

.dark :is(#how, #evidence) .scene-inner>.eyebrow{
  justify-content: flex-start;
}

.dark :is(#how, #evidence) .scene-heading{
  text-align: left;
}

.dark :is(#how, #evidence) .scene-heading>p{
  margin-inline: 0;
}

.dark :is(#how, #evidence) figure{
  max-width: none;
}

/* A keeps the evidence introduction in the same vertical rhythm as Pace. */
.dark #evidence .scene-heading{
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.dark #evidence .scene-heading em{
  display: inline;
}

/* B: equally sized copy and demonstration panels, with notes across both below. */
@media (min-width: 1001px){
  .dark #how .scene-inner{
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 28px var(--content-gap);
    grid-template-rows: min-content 1fr auto;
    align-items: start;
  }

  .dark #how .scene-inner>.eyebrow{
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }

  .dark #how .scene-heading{
    display: block;
    grid-column: 1;
    grid-row: 2;
    margin: 0;
  }

  .dark #how .scene-heading>p{
    margin-top: 28px;
    font-size: 1.125rem;
  }

  .dark #how .scene-inner> :is(.explained-media, .evidence-example){
    display: contents;
  }

  .dark #how figure{
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .dark #how :is(.reading-guide, .return-flow){
    grid-column: 1 / -1;
    margin-top: 8px;
  }

}

@media (max-width: 760px){
  .dark #evidence .scene-heading{
    gap: 24px;
  }

  .variants a{
    width: 25px;
  }
}

@media (max-width: 359px){
  .masthead{
    flex-wrap: wrap;
  }

  .variants{
    width: 100%;
    justify-content: space-between;
  }

  .variants a{
    flex: 1;
  }
}

/* G sweeps the background and contrasting text color together, like a selection. */
@property --highlight-sweep{
  syntax: '<percentage>';
  inherits: false;
  initial-value: 100%;
}

.light .text-highlight{
  --highlight-sweep: 100%;
  color: transparent;
  background: linear-gradient(to right, var(--on-accent) 0 var(--highlight-sweep), var(--ink) var(--highlight-sweep) 100%),
    linear-gradient(to right, var(--accent) 0 var(--highlight-sweep), transparent var(--highlight-sweep) 100%);
  -webkit-background-clip: text, border-box;
  background-clip: text, border-box;
}

.light .text-highlight.is-highlight-pending{
  --highlight-sweep: 0%;
}

.light .text-highlight.is-highlight-revealed{
  animation: highlight-reveal 950ms cubic-bezier(.22, .65, .3, 1) both;
}

.light #evidence .evidence-reply{
  color: transparent;
}

@keyframes highlight-reveal{
  from{
    --highlight-sweep: 0%;
  }

  to{
    --highlight-sweep: 100%;
  }
}

@media (prefers-reduced-motion: reduce){
  .light .text-highlight.is-highlight-revealed{
    animation: none;
  }
}

/* A uses a left-to-right italic reveal for dark-theme emphasis. The upright
   text remains underneath so the heading never shifts as the italic face arrives. */
.dark .dark-emphasis{
  position: relative;
  display: inline-block;
  color: var(--accent);
  font-family: inherit;
  font-style: normal;
}

.dark .dark-emphasis-italic{
  position: absolute;
  inset: 0;
  color: var(--accent);
  font-style: italic;
  clip-path: inset(0);
}

.dark .dark-emphasis.is-highlight-pending .dark-emphasis-italic{
  clip-path: inset(0 100% 0 0);
}

.dark .dark-emphasis.is-highlight-revealed .dark-emphasis-italic{
  animation: italic-reveal 850ms cubic-bezier(.22, .65, .3, 1) both;
}

@keyframes italic-reveal{
  from{
    clip-path: inset(0 100% 0 0);
  }

  to{
    clip-path: inset(0);
  }
}

@media (prefers-reduced-motion: reduce){
  .dark .dark-emphasis.is-highlight-revealed .dark-emphasis-italic{
    animation: none;
  }
}

/* Lift the complete preview card, including its header and scene controls. */
.light .preview{
  box-shadow: 0 10px 24px #1633281a, 0 28px 64px -16px #16332833;
}

/* Final header and closing refinements shared by the retained directions. */
.brand-sub sup{
  margin-left: .08em;
  font-size: .62em;
  line-height: 0;
  vertical-align: super;
}

@media (min-width: 761px){
  /* Indent with padding, not an offset: an offset moves the box itself and
     eats the gap the layout reserved against the viewport edge. */
  .dark .hero-description{
    width: calc(100% + 11px);
    max-width: 542px;
    padding-left: 32px;
  }

  .dark .hero-description .lede,
  .dark .hero-description .hero-detail{
    max-width: 48ch;
  }

  .dark .hero-description .actions .button{
    padding-inline: 28px;
  }
}

.support-copy{
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
}

.support-copy .support-kicker{
  display: block;
  color: var(--accent);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .09em;
  line-height: 1.4;
  text-transform: uppercase;
}

.support-copy h3{
  font-size: 1.3rem;
}

.support-copy>p{
  margin: 0;
}

.support-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.support-actions .button{
  min-height: 44px;
  padding: 11px 16px;
  gap: 12px;
}

.support-copy .sponsor-status{
  margin: 2px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  font-size: .8125rem;
  line-height: 1.5;
}

@media (hover: hover){
  .light .scene-nav button{
    transition: background-color .18s ease, color .18s ease;
  }

  .light .scene-nav button:hover:not([aria-pressed="true"]){
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--ink);
  }
}

.light .scene-nav button:focus-visible:not([aria-pressed="true"]){
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.auto-quiz-demo .auto-quiz-overlay{
  animation: auto-quiz-arrive 7s cubic-bezier(.22, .65, .3, 1) infinite;
  animation-play-state: paused;
  transform-origin: 50% 50%;
}

@keyframes auto-quiz-arrive{
  0%, 30%{
    opacity: 0;
    transform: scale(.985);
  }

  40%, 88%{
    opacity: 1;
    transform: scale(1);
  }

  100%{
    opacity: 0;
    transform: scale(1);
  }
}

/*
 * Started once the demo is first seen, not tied to `.is-reached`.
 *
 * That class is recomputed on every scroll frame against a fixed viewport
 * threshold, which is right where a reader's scroll position naturally
 * settles on this section. A few pixels of trackpad jitter flipped it on and
 * off repeatedly, and `animation-play-state: paused` freezes mid-frame rather
 * than resetting -- so the loop stuttered at random points instead of
 * playing. An IntersectionObserver trigger that never un-triggers keeps the
 * loop running once it has started, the same one-way reveal already used for
 * the text highlights below.
 */
.auto-quiz-demo.is-active .auto-quiz-overlay{
  animation-play-state: running;
}

@media (prefers-reduced-motion: reduce){
  .auto-quiz-demo .auto-quiz-overlay{
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.footer-links{
  display: flex;
  align-items: center;
  gap: 24px;
}

.footer-links a{
  font-size: .875rem;
}

@media (max-width: 760px){

  .support-copy{
    padding: 20px;
  }

  .support-actions .button{
    width: 100%;
  }

  .footer-links{
    width: 100%;
    justify-content: space-between;
    gap: 16px;
  }
}
/*
 * Product captures are cropped to the YouTube player region when they are
 * exported (see README, "Assets and release boundary"), so the page no longer
 * re-crops them. The rules being reset here scaled every capture to 131% and
 * pushed it up and left, which was an attempt to hide the YouTube sidebar,
 * header and comments that the uncropped 2880x1620 full-page captures carried.
 * It hid some of that chrome and cut into the quiz card at the same time, and
 * every capture whose card sat at a different height then needed its own
 * correction on top. Cropping at export removes the whole class of problem:
 * each file is already 16/9 and already centred on the quiz overlay, so the
 * page only has to fill the box.
 */
.product-shot img,
.dark .preview .product-shot img,
.hero-shot[data-scene-name="answer"] img,
.auto-quiz-demo .auto-quiz-overlay{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* The backup page's hero cropped its capture to a 2.65 letterbox, which cuts
   the top and bottom off a quiz card that now fills the frame. */
.dark .preview .product-shot{
  aspect-ratio: 16/9;
}

/*
 * The FAQ column starts level with the closing heading rather than with the
 * eyebrow above it. 71px is what sits above the h2 in the other column: the
 * eyebrow's 25px lead, its 21px line box, and its 25px bottom margin. The
 * second term is an optical correction -- a 57px heading sits far lower inside
 * its own line box than a 21px one does, so matching the boxes alone still
 * reads as misaligned. It tracks the same clamp the h2 uses.
 */
.closing > .faq{
  padding-top: calc(71px + .15 * clamp(2.25rem, 4vw, 4.1rem));
}

/*
 * Hovering a row in either setup card tints the full width of that card, not
 * just the text column. The row carries the card's own side padding as its
 * own, and cancels it again with a matching negative margin, so the tint
 * reaches both edges while the text stays where it was. The divider keeps its
 * original inset, which is why it moves to a pseudo-element here.
 */
/* How far a row has to reach on each side to meet the card's inner edge. It is
   the card's own side padding: 0 where the card is a bare grid column, 24px
   where it is a bordered box. */
.model-options article{
  --card-bleed: 0px;
}

:is(.light, .dark) .model-options article,
.layout-guided .model-options article{
  --card-bleed: 24px;
}

.model-options dl > div{
  position: relative;
  border-top: 0;
  margin-inline: calc(-1 * var(--card-bleed));
  padding-inline: var(--card-bleed);
  transition: background-color .15s ease;
}

.model-options dl > div::before{
  content: '';
  position: absolute;
  top: 0;
  left: var(--card-bleed);
  right: var(--card-bleed);
  border-top: 1px solid var(--line);
}

.model-options dl > div:hover{
  background: var(--tint);
}

/* A touch device reports :hover on tap and then keeps it until the next tap,
   which would leave a row lit with nothing pointing at it. */
@media (hover: none){
  .model-options dl > div:hover{
    background: none;
  }
}

@media (max-width: 760px){
  .closing > .faq{
    padding-top: 0;
  }
}

/*
 * A phone renders these captures about 330px wide. At 16/9 that puts the quiz
 * card itself at roughly 190px across, which is below the size its own body
 * text survives. The captures are centred on the card with dead video either
 * side of it, so narrowing the frame to 4/3 and letting `object-fit: cover`
 * take the difference off the left and right loses nothing but that dead space
 * and returns about a third more width to the part worth reading.
 */
@media (max-width: 760px){
  .product-shot,
  .dark .preview .product-shot{
    aspect-ratio: 4/3;
  }
}