/* Four demonstrations, kept uncropped at their native 16:13 aspect ratio. */
/* Keep the original page inset; the showcase must fit the page, not widen it. */
.hero { grid-template-columns: minmax(330px, 11fr) minmax(0, 9fr); gap: 40px; padding-top: 72px; min-height: calc(100svh - 60px); align-content: start; }
.hero h1 { font-size: clamp(40px, 4.5vw, 62px); }
.showcase { min-width: 0; width: 100%; max-width: 520px; justify-self: start; }
.showcase-toolbar { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.layer-switches { display: flex; gap: 24px; }
.layer-switches button { display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; min-height: 44px; border: 0; background: transparent; color: #625f55; font: 500 .875rem 'Hanken Grotesk', sans-serif; cursor: pointer; }
.layer-switches button:hover, .layer-switches button[aria-checked="true"] { color: #292820; }
.layer-switches button:focus-visible { outline: 2px solid #527454; outline-offset: 5px; border-radius: 4px; }
.layer-switches button:disabled { cursor: progress; opacity: .55; }
.switch-track { width: 30px; height: 18px; border-radius: 20px; background: #d6d4cb; position: relative; transition: background .2s; }
.switch-track::after { content: ''; position: absolute; width: 12px; height: 12px; left: 3px; top: 3px; background: #fffef7; border-radius: 50%; box-shadow: 0 1px 3px #0002; transition: transform .2s; }
[aria-checked="true"] .switch-track { background: #3c5140; }
[aria-checked="true"] .switch-track::after { transform: translateX(12px); }
.sample-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sample-card { margin: 0; position: relative; aspect-ratio: 16 / 13; border-radius: 16px; overflow: hidden; isolation: isolate; background: #232620; box-shadow: 0 5px 15px #29282012; transition: transform .25s ease, box-shadow .25s ease; }
.sample-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; visibility: hidden; }
.sample-card video.is-active { visibility: visible; }
.sample-task { position: absolute; z-index: 2; left: 10px; top: 10px; max-width: calc(100% - 20px); padding: 4px 7px; border-radius: 4px; background: #15201575; color: #fff; font-size: .8125rem; line-height: 1.3; text-shadow: 0 1px 3px #0008; pointer-events: none; }
.sample-caption { position: absolute; z-index: 2; bottom: 0; left: 0; right: 0; padding: 16px 10px 9px; background: linear-gradient(transparent, #101710a6); color: white; pointer-events: none; }
.sample-phase { display: grid; align-items: end; overflow: hidden; min-height: 2.6em; font-size: .8125rem; line-height: 1.3; text-shadow: 0 1px 3px #000; }
.phase-line { display: block; grid-area: 1 / 1; }
.showcase [hidden] { display: none !important; }
.showcase-status { font-size: .8125rem; color: #726e61; margin: 8px 0 0; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sample-card:hover { transform: scale(1.03); z-index: 5; box-shadow: 0 15px 35px #29282030; }
}
@media (max-width: 1050px) {
  .hero { gap: 28px; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 48px; }
  .showcase { max-width: 680px; justify-self: start; }
  .hero-copy { max-width: 620px; }
}
/* The four demonstrations stay a 2x2 grid on a phone. Stacking them made the hero 1,805px
   tall: a screen and a half of near-identical looping video before the first section. */
@media (max-width: 540px) {
  .sample-grid { gap: 10px; }
  .sample-card { border-radius: 10px; }
  /* Two columns inside a 390px page leaves ~168px a card, so the labels tighten to match. */
  .sample-task { left: 6px; top: 6px; max-width: calc(100% - 12px); padding: 3px 5px; font-size: .75rem; }
  .sample-caption { padding: 13px 7px 7px; }
  .sample-phase { font-size: .75rem; min-height: 2.4em; }
  .showcase-toolbar { justify-content: center; flex-wrap: wrap; gap: 12px 20px; }
  .layer-switches { gap: 20px; }
  /* Only present with Data Saver on, where it would otherwise squeeze both switches
     onto two lines each. It takes its own row instead. */
  .showcase-play { flex: 0 0 100%; margin-right: 0; }
}
@media (max-width: 370px) {
  .sample-grid { gap: 8px; }
  .layer-switches { gap: 14px; }
}

/* Only rendered with Data Saver on, where nothing autoplays. */
.showcase-play {
  min-height: 44px; padding: 8px 18px; margin-right: auto;
  border: 1px solid #c6c2b4; border-radius: 30px; background: transparent;
  color: #2b261f; font: 500 .875rem 'Hanken Grotesk', sans-serif; cursor: pointer;
}
.showcase-play:hover { border-color: #8f8a7b; }
@media (prefers-reduced-motion: reduce) {
  .sample-card, .switch-track, .switch-track::after { transition: none; }
}