.hero { display: grid; grid-template-columns: 1fr 1fr; gap: 3em; align-items: center; padding: 2em 0 3em }
  @media (max-width: 800px) { .hero { grid-template-columns: 1fr; gap: 2em } }
  .ctas { display: flex; flex-wrap: wrap; gap: .7em }
  .ctas .cta { flex: 1 1 12em }
  .under { font-size: .9em; color: var(--muted); margin-top: .8em }
  .demo { --fit: 13; display: grid; grid-template-columns: auto 1fr auto; gap: 1em; align-items: stretch; background: var(--bg) }
  .demo .stagebox { container-type: inline-size }
  .demo .stage { aspect-ratio: 16 / 9; box-shadow: 0 20px 50px rgba(0,0,0,.25); font-size: min(8.5cqw, calc(147cqw / (var(--fit) + 2))) }
  .demo .fs { position: absolute; right: .5em; top: .5em; font: 14px var(--sans); color: #aaa; background: rgba(255,255,255,.08); border: 1px solid #333; border-radius: 6px; padding: .3em .6em; cursor: pointer }
  .demo .fs:hover { color: #fff }
  /* full screen (or the fixed-overlay fallback where the fullscreen API is missing, e.g. iPhone Safari) */
  .demo.full { position: fixed; inset: 0; z-index: 10; padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); gap: 0; background: #000 }
  .demo.full .stagebox { display: flex; flex-direction: column; height: 100% }
  .demo.full .stage { aspect-ratio: auto; flex: 1; border-radius: 0; box-shadow: none; font-size: min(8.5cqw, 12vh, calc(147cqw / (var(--fit) + 2))) }
  .demo.full .bar { margin: 0; padding: .5em .8em; background: #000; color: #aaa }
  .demo.full .bar button { background: #111; color: #eee; border-color: #333 }
  .demo.full .speed { padding: .8em .4em; background: #000; color: #aaa }
  .demo.full .speed output { color: #eee }
  .demo.full .caption { color: #aaa }
  /* a portrait phone without the fullscreen API: turn the whole demo sideways so it fills the screen in landscape */
  @media (orientation: portrait) { .demo.full.rotate { width: 100vh; height: 100vw; transform: rotate(90deg) translateY(-100%); transform-origin: top left; inset: auto; left: 0; top: 0 } }
  .demo .speed { display: flex; flex-direction: column; align-items: center; gap: .5em; font-size: .85em; color: var(--muted); user-select: none }
  .demo .speed .lbl { writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .05em; text-transform: uppercase; font-size: .8em }
  .demo .speed input[type=range] { writing-mode: vertical-lr; direction: rtl; width: 1.6em; flex: 1; min-height: 8em; accent-color: var(--red); margin: 0 }
  .demo .speed output { font-family: var(--mono); color: var(--ink); white-space: nowrap; text-align: center; line-height: 1.2 }
  .demo .speed output small { display: block; color: var(--muted); font-family: var(--sans); font-size: .8em }
  .demo .bar { display: flex; align-items: center; gap: .8em; margin-top: .8em; font-size: .95em }
  .demo .bar button { font: inherit; padding: .4em .9em; border-radius: 8px; border: 1px solid var(--line); background: #fff; cursor: pointer }
  .demo .caption { margin: 0 }
  .demo .caption { font-size: .95em; color: var(--muted); text-align: center; margin-top: .6em }
  .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(16em, 1fr)); gap: 2em }
  .cols h3 { margin: 0 0 .3em }
  table { border-collapse: collapse; width: 100%; font-size: .95em }
  td, th { text-align: left; padding: .5em .6em; border-bottom: 1px solid var(--line); vertical-align: top }
  th { color: var(--muted); font-weight: 600 }
  .soon { background: var(--soft); border-radius: 12px; padding: 1.2em 1.4em }
  .soon ul { margin: .5em 0 0; padding-left: 1.2em }
  .stage .paused { position: absolute; left: 0; right: 0; bottom: 8%; text-align: center; font-family: var(--sans); font-size: .35em; color: #888 }