/* Real recordings supply their own browser frame and background. */
body { overflow-x: clip; }
.recording { position: relative; width: 100%; min-width: 0; aspect-ratio: 1.45; }
.recording-window { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%); }
.recording video { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 14px; }
.recording-toggle { position: absolute; left: 12px; bottom: 12px; z-index: 2; min-height: 36px; padding: 8px 13px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(30,30,30,.82); color: #fff; font: 500 12px/1.2 var(--sans, sans-serif); cursor: pointer; }
.recording-toggle:focus-visible, .recording-link:focus-visible { outline: 3px solid #f54e00; outline-offset: 3px; }
.recording-toggle:hover { background: #26251e; }
.recording-description { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.recording-error { position: absolute; left: 10px; right: 10px; bottom: 54px; padding: 10px; border-radius: 8px; background: #fff; color: #26251e; font-size: 13px; }
.recording-error a { color: inherit; }
.recording-link { position: absolute; left: 12px; bottom: 12px; padding: 10px 16px; background: #fff; color: #26251e; border-radius: 8px; }
.recording [hidden] { display: none; }
#explain .frame-card, #square .frame-card, #find .frame-card {
  padding: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
/* Keep the original hero typography, grid and oversized browser footprint. */
.hero-reference .frame-card {
  position: relative; border: 0; box-shadow: none; background: transparent;
}
.hero-reference .hero-demo .frame-card { margin-right: 0; padding: 0; border-radius: 14px; }
.hero-reference .recording--hero { position: static; aspect-ratio: 1440 / 998; }
.hero-reference .recording-window { inset: 0; transform: none; }
.hero-reference .recording video { object-fit: contain; }
@media (min-width: 901px) {
  .hero-reference .hero-copy { transform: translateX(-16px); }
}
/* A consistent grid, stage and type scale across the remaining demos. */
#explain.demo-section, #square.demo-section, #find.demo-section {
  height: auto; padding: clamp(64px,9vw,128px) 0; position: relative;
}
#explain .explain-pin-inner, #square .explain-pin-inner, #find .explain-pin-inner { position: relative; top: auto; min-height: 0; display: block; overflow: visible; padding: 0; }
#explain .container, #square .container, #find .container { max-width: 1360px; }
#explain .featrow, #square .featrow, #find.f3-sec .featrow {
  display: grid; grid-template-columns: minmax(0,1.45fr) minmax(0,.86fr); gap: clamp(40px,5vw,80px); align-items: center;
}
#square .featrow { grid-template-columns: minmax(0,.86fr) minmax(0,1.45fr); }
#explain .frame-card, #find .frame-card { order: 1; }
#explain .featrow-copy, #find.f3-sec .featrow-copy { order: 2; }
#square .frame-card { order: 2; }
#square .featrow-copy { order: 1; }
#explain .featrow-copy h2, #square .featrow-copy h2, #find .featrow-copy h2 {
  margin: 0; font-size: clamp(28px,2.65vw,38px); font-weight: 400; line-height: 1.16; letter-spacing: -.035em; max-width: 19ch;
}
#explain .featrow-copy > p, #square .featrow-copy > p, #find.f3-sec .featrow-copy > p {
  max-width: 29ch; margin-top: 18px; font-size: clamp(18px,1.5vw,21px); line-height: 1.5; font-weight: 400; color: #84847e; letter-spacing: -.01em;
}
#explain .featrow-copy .more, #square .featrow-copy .more { margin-top: 24px; font-size: 17px; }
/* A quiet sideways reveal gives each demo an entrance without another long pin. */
@media (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .demo-section.has-demo-reveal .frame-card { opacity: .35; transform: translateX(-28px) scale(.97); clip-path: inset(0 6% 0 0 round 14px); transition: opacity .75s ease, transform 1s cubic-bezier(.22,.7,.2,1), clip-path 1s cubic-bezier(.22,.7,.2,1); }
  .demo-section.has-demo-reveal:where(#square) .frame-card { transform: translateX(28px) scale(.97); clip-path: inset(0 0 0 6% round 14px); }
  .demo-section.has-demo-reveal.demo-is-visible .frame-card { opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 14px); }
  .demo-section.has-demo-reveal .featrow-copy { opacity: 0; transform: translateX(14px); transition: opacity .8s ease .12s, transform .8s cubic-bezier(.22,.7,.2,1) .12s; }
  .demo-section.has-demo-reveal.demo-is-visible .featrow-copy { opacity: 1; transform: none; }
}
@media (max-width: 900px) {
  #explain .featrow, #square .featrow, #find.f3-sec .featrow { grid-template-columns: minmax(0,1fr); gap: 28px; }
  #explain .featrow-copy, #square .featrow-copy, #find.f3-sec .featrow-copy { order: 1; }
  #explain .frame-card, #square .frame-card, #find .frame-card { order: 2; }
  #explain .featrow-copy > p, #square .featrow-copy > p, #find.f3-sec .featrow-copy > p { max-width: 40ch; }
}