/* Keep the count and its label on one baseline across the torn edge. */
.hero { padding-top: max(88px, 14vh); }
.hero .d1 { font-size: min(7.5vw, 15vh); line-height: .76; mix-blend-mode: difference; }
.hero .hero-word { color: #fff; }
.hero .ln.hero-total > i {
  position: absolute;
  left: 19vw;
  top: 49vh;
  display: flex;
  align-items: baseline;
  gap: .45em;
  font-size: min(7vw, 10vh);
}
.hero .hero-total :is(.hero-class, .hero-sessions) {
  position: static;
  display: inline-block;
  margin: 0;
  color: #fff;
  font-size: inherit;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
body.hero-live .hero .ln.hero-total .hero-word:first-child {
  animation-name: hero-crack-word;
}
.hero .ln.hero-total .hero-word:first-child { margin-right: 0; }
.hero-base { left: 49%; bottom: 12vh; }
@media (min-width: 901px) {
  .hero-pawn-art { width: min(52vw, 96vh); left: 54vw; top: 4vh; }
}
@media (min-width: 601px) and (max-width: 900px) {
  .hero .d1 { font-size: min(7.5vw, 14vh); }
  .hero .ln > i { transform: scaleX(1.2); }
  .hero-pawn-art { width: min(52vw, 90vh); left: 54vw; top: 6vh; }
}
@media (max-width: 900px) and (orientation: portrait) {
  .hero-pawn-art { width: min(75vw, calc(55svh - 138px), 520px); left: auto; right: -3vw; top: auto; bottom: 2svh; }
  .hero .d1 { font-size: min(8.6vw, 10vh); }
  .hero .ln.hero-total > i { left: 20vw; top: max(25vh, calc(min(26.144vw, 30.4vh) + 16px)); font-size: min(7vw, 5.5vh); }
  .hero-base { left: 50%; top: calc(42svh + 72px); bottom: auto; }
  .hero .hero-foot .cta-row [data-account-link='hero'] { opacity: 1; color: #171717; background: #fff; border-radius: 4px; padding: 4px 8px; }
  .hero-me { display: none; }
}
@media (max-width: 600px) {
  .hero-pawn-art { width: min(90vw, calc(55svh - 138px), 360px); left: auto; right: -3vw; top: auto; bottom: 2svh; }
  .hero { padding-top: max(100px, 17vh); }
  .hero .d1 { font-size: min(11.5vw, 10vh); line-height: .95; }
  .hero .ln.hero-total > i { left: 20vw; top: max(25vh, calc(min(43.7vw, 38vh) + 16px)); font-size: 9vw; }
  .hero-base { left: 50%; top: max(calc(42svh + 72px), calc(max(100px, 17vh) + min(43.7vw, 38vh) + 9vw + 48px)); bottom: auto; }
  .hero .hero-foot .cta-row [data-account-link='hero'] { opacity: 1; color: #171717; background: #fff; border-radius: 4px; padding: 4px 8px; }
  .hero-me { display: none; }
}
@media (max-height: 560px) and (max-width: 479px) {
  .hero-pawn-art { width: min(36vw, 20svh); right: 0; bottom: 0; }
}
@media (max-height: 500px) and (min-width: 480px) {
  .hero { padding-top: 80px; }
  .hero .d1 { font-size: min(6.3vw, 10vh); line-height: .8; }
  .hero .ln.hero-total > i { top: calc(min(20.16vw, 32vh) + 12px); font-size: min(6vw, 8vh); }
  .hero-base { left: 44%; top: auto; bottom: 4vh; }
  .hero-pawn-art { width: min(48vw, 88vh); left: 54vw; right: auto; top: 3vh; bottom: auto; }
  .hero-me { display: none; }
}

/* Phone copy and actions share normal flow, keeping the controls with their
   copy on shorter viewports and with larger text. Desktop keeps
   its accepted torn-paper composition and camera handoff. */
@media (max-width: 600px) and (orientation: portrait) {
  .hero, body.gl-failed .hero { padding: max(96px, 12svh) var(--gut) 20px; }
  .hero .d1 { width: 100%; max-width: 100%; font-size: clamp(38px, 11.5vw, 54px); line-height: .96; }
  .hero .ln > i, .hero .ln:nth-child(2) > i { transform: none; }
  .hero .ln.hero-total > i {
    position: static;
    justify-content: center;
    margin-top: 20px;
    gap: .35em;
    font-size: clamp(30px, 9vw, 40px);
    line-height: 1.1;
  }
  .hero-base { position: relative; left: auto; top: auto; bottom: auto; width: 100%; margin-top: 24px; transform: none; }
  .hero-foot { width: 100%; max-width: none; }
  .hero .cta-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: stretch; }
  .hero .cta-row > .cta,
  .hero .cta-row > .cta:first-child,
  .hero .cta-row > .cta.ghost { width: 100%; min-height: 48px; justify-content: center; padding: .65em .6em; font-size: .875rem; }
  .hero .cta-row > .cta:first-child { grid-column: 1 / -1; }
  .hero .hero-foot .cta-row [data-account-link='hero'] {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin: 0;
    padding: .65em .6em;
    border: 1px solid rgb(255 255 255 / .45);
    border-radius: 5px;
    background: #111;
    color: #fff;
    font: 500 .8125rem / 1.2 var(--sans);
    letter-spacing: 0;
    text-transform: none;
  }
  .hero-pawn-art { width: min(78vw, max(120px, calc(82svh - 360px)), 360px); right: -3vw; bottom: 2svh; }
}
@media (max-width: 600px) and (max-height: 560px) and (orientation: portrait) {
  .hero, body.gl-failed .hero { padding-top: 88px; }
  .hero .d1 { font-size: min(10.5vw, 7.6svh); }
  .hero .ln.hero-total > i { margin-top: 12px; font-size: 8vw; }
  .hero-base { margin-top: 16px; }
  .hero-pawn-art { width: min(28vw, 15svh); right: 0; bottom: 2svh; }
}
@media (max-width: 900px) and (max-height: 560px) and (orientation: landscape) {
  .hero, body.gl-failed .hero { padding-top: 80px; }
  .hero-base { left: var(--gut); right: var(--gut); top: auto; bottom: 12px; width: auto; transform: none; }
  .hero-foot { width: 100%; max-width: none; }
  .hero .cta-row { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
  .hero .cta-row > .cta,
  .hero .cta-row > .cta:first-child,
  .hero .cta-row > .cta.ghost { width: 100%; min-height: 48px; justify-content: center; padding: .65em .6em; font-size: .8125rem; }
  .hero .hero-foot .cta-row [data-account-link='hero'] {
    display: flex; width: 100%; align-items: center; justify-content: center;
    min-height: 48px; margin: 0; padding: .65em .6em;
    border: 1px solid rgb(255 255 255 / .45); border-radius: 5px;
    background: #111; color: #fff;
    font: 500 .8125rem / 1.2 var(--sans); letter-spacing: 0; text-transform: none;
  }
}

/* The moving board continues the opening's paper, ink and polished marble.
   The reading wash stays beside the copy, leaving the travelling file clear. */
/* One compact video screen replaces the two long product explainers. */
.hero-pawn-light { mask-image: image-set(url('/assets/home/hero-pawn-static.webp') type('image/webp'), url('/assets/hero-pawn-static.png') type('image/png')); }
.act-demo { height: auto; }
.act-demo + .act { margin-top: 0; }
.act-demo .act-stage {
  position: relative;
  height: auto;
  min-height: 100svh;
  background: #f3f2ed;
  contain: none;
  overflow: visible;
}
.act-demo .pad.lesson-film {
  --film-top: max(96px, 10svh);
  --film-bottom: 20px;
  --film-gap: 16px;
  --film-heading-height: 50px;
  --fg: #101412;
  --fg-dim: #454c47;
  --fg-faint: #454c47;
  color: var(--fg);
  height: auto;
  padding-top: var(--film-top);
  padding-bottom: var(--film-bottom);
  grid-template-rows: auto auto;
  align-content: start;
  gap: var(--film-gap);
}
.film-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  margin-inline: auto;
}
.act-demo .film-heading .kicker { display: none; }
.film-heading h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1;
  letter-spacing: -.035em;
}
.act-demo .film-try { flex: none; background: #101412; color: #fff; border-color: #101412; }
.film-heading h2 br { display: none; }
.film-actions { display: flex; align-items: center; gap: 12px; flex: none; }
.film-fullscreen, .film-exit {
  min-height: 44px;
  padding: 10px 14px;
  color: #101412;
  background: transparent;
  border: 1px solid rgb(16 20 18 / .2);
  border-radius: 4px;
  font: 500 13px var(--sans);
  cursor: pointer;
}
.film-fullscreen[hidden], .film-exit[hidden] { display: none !important; }
.film-player {
  position: relative;
  width: min(100%, calc((100svh - var(--film-top) - var(--film-bottom) - var(--film-gap) - var(--film-heading-height)) * 16 / 9));
  align-self: start;
  justify-self: center;
  overflow: hidden;
  border-radius: 8px;
  background: #101412;
  box-shadow: 0 16px 48px rgb(16 20 18 / .12);
}
.film-player:has(video[data-format='mobile']):not(.is-expanded):not(:fullscreen) {
  width: min(100%, calc((100svh - var(--film-top) - var(--film-bottom) - var(--film-gap) - var(--film-heading-height)) * 4 / 5));
}
.film-player video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.film-player video[data-format='mobile'] { aspect-ratio: 4 / 5; }
.act-demo:has(.film-player:is(.is-expanded, :fullscreen)) { z-index: 100; }
body.film-expanded { overflow: hidden; }
.film-player.is-expanded, .film-player:fullscreen {
  position: fixed;
  inset: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: 0;
  background: #101412;
  box-shadow: none;
  /* OS fullscreen can resize the viewport and deactivate the scroll scene. */
  visibility: visible;
}
.film-player:is(.is-expanded, :fullscreen) video,
.film-player video:fullscreen { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; visibility: visible; }
.film-exit { position: absolute; z-index: 2; right: 16px; top: 16px; background: #f3f2ed; }
body.gl-failed .act.act-demo { background: #f3f2ed; color: #101412; }
body.gl-failed .act-demo .pad.lesson-film { grid-template-rows: auto auto; }
@media (max-width: 600px) {
  .act-demo .pad.lesson-film { --film-top: 96px; --film-gap: 18px; --film-heading-height: 84px; }
  .film-heading { gap: 12px; align-items: start; }
  .film-heading h2 { font-size: clamp(28px, 8vw, 36px); }
  .film-heading h2 br { display: initial; }
  .film-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .film-fullscreen { min-height: 36px; padding: 8px 10px; font-size: 12px; }
  .act-demo .film-heading .kicker { font-size: 9px; letter-spacing: .14em; }
  .act-demo .film-try { padding: .8em 1em; font-size: 12px; }
}
@media (max-height: 650px) {
  .act-demo .pad.lesson-film { --film-top: 84px; --film-bottom: 16px; --film-gap: 12px; }
  .act-demo .film-heading .kicker { display: none; }
  .film-heading h2 { font-size: 28px; }
  .film-actions :is(.film-fullscreen, .film-try) { min-height: 36px; padding: 10px 12px; font-size: 12px; }
}
.act-spine .act-stage::before {
  background: linear-gradient(90deg, rgb(8 8 8 / .94), rgb(8 8 8 / .56) 40%, transparent 68%);
}
.act-chaos .act-stage::before { background: rgb(8 8 8 / .28); }

/* Full-size glass blurs add a compositor pass as the board moves underneath.
   The existing opaque reading surfaces already provide the needed contrast. */
main :is(.sun-beats .sb, .stages-head, .stage-panel, .spine .scrub, .chaos .cv-col) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.act-stages .stages-head {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
}
@media (min-width: 901px) {
  .act-stages .stages-head { width: min(32vw, 38ch); }
}
.stages .stage-panel {
  --fg: #080808;
  --fg-dim: #505050;
  --fg-faint: #666;
  color: var(--fg);
  background: #f8f9f6;
  border: 1px solid rgb(255 255 255 / .65);
  border-left: 3px solid var(--sc);
  border-radius: 4px;
  box-shadow: 0 8px 32px rgb(0 0 0 / .16);
  transition: opacity 620ms var(--ease), transform 720ms var(--ease);
}
.stages .stage-panel.on {
  transition: opacity 620ms var(--ease), transform 720ms var(--ease);
}
.stage-panel .sp-n, .stage-panel .sp-piece { color: #292929; }
.stage-panel .sp-summary, .stage-panel .sp-link { color: #080808; }
.stage-panel .sp-status { border-color: rgb(8 8 8 / .18); }
.stage-panel .sp-meta { color: #505050; }
.stage-panel .sp-link { border-bottom-color: var(--sc); }

/* The film resolves to ink before the paper footer scrolls into view. Fade both
   canvases together so the foreground queen never floats over the site map. */
.gl { opacity: calc(1 - var(--film-end, 0)); }
body.hero-live #ladder, body.hero-live #readout {
  animation: none;
  transition: none;
  opacity: calc(1 - var(--film-end, 0));
}
.foot.home-footer {
  --fg: #080808;
  --fg-dim: #505050;
  --line: rgb(8 8 8 / .14);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(24px, 5vh, 48px);
  min-height: 100svh;
  background: #f8f9f6;
  color: var(--fg);
  border: 0;
  padding: clamp(40px, 6vw, 72px) var(--gut) 28px;
}
.footer-invite {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}
.footer-invite h2 {
  margin: 0;
  font-size: clamp(2rem, min(5vw, 6vh), 4.5rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.04;
}
.footer-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.home-footer .footer-actions .cta {
  background: #080808;
  color: #fff;
  border: 1px solid #080808;
  border-radius: 4px;
}
.home-footer .footer-actions .cta.ghost { background: transparent; color: #080808; }
.home-footer .footer-actions .cta:hover { background: #292929; color: #fff; }
.footer-main {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.footer-brand .brand { width: fit-content; color: #080808; gap: 12px; }
.footer-brand .word { font-size: clamp(1.75rem, 2.4vw, 2.25rem); }
.footer-brand .mark { width: 30px; height: 34px; }
.home-footer .footer-brand p {
  margin-top: 20px;
  font: 500 1rem/1.6 var(--sans);
  letter-spacing: 0;
}
.footer-group { display: grid; align-content: start; }
.footer-group h2 {
  margin: 0 0 12px;
  font: 700 .9rem/1.5 var(--sans);
  letter-spacing: 0;
}
.footer-group a {
  display: flex;
  align-items: center;
  min-height: 40px;
  width: fit-content;
  color: #505050;
  font: 500 .9rem/1.5 var(--sans);
  text-decoration: none;
}
.footer-group a:hover { color: #080808; text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.home-footer .foot-me { color: #080808; }
.home-footer .foot-face { border-color: var(--line); }
.home-footer .footer-bottom p { font: 500 .85rem/1.5 var(--sans); letter-spacing: 0; }
@media (max-width: 900px) {
  .footer-main { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-footer .footer-brand p { display: none; }
  .footer-group:last-child { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-group:last-child h2 { grid-column: 1 / -1; }
  .footer-bottom { gap: 18px; }
  .footer-group a { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .stages .stage-panel, .stages .stage-panel.on { transition: none; }
}
.hero-foot .scroll-explore,
.hero-foot .scroll-explore:hover,
.hero-foot .scroll-explore:active {
  background: #0c0c0e;
  color: #fff;
  background-image: none;
  box-shadow: none;
  animation: none;
  transform: none;
  translate: none;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.hero-foot .scroll-explore:hover { background-color: #202022; border-color: #fff; }
.hero-foot .scroll-explore::before,
.hero-foot .scroll-explore::after,
.hero-foot .scroll-explore .cta-rip { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-foot .scroll-explore { transition: none; }
}