/* Scale the approved compositions from their available width AND height.
   One unit is one pixel at the 1366×768 desktop or 393×735 phone reference.
   Minimum control/type sizes keep smaller windows usable. No browser sniffing. */
:root { --layout-unit:min(calc(100vw / 1366),calc(100svh / 768)); }
@supports(height:100dvh) {
  :root { --layout-unit:min(calc(100vw / 1366),calc(100dvh / 768)); }
}
.scene { height:100svh; height:100dvh; min-height:0; }

@media(min-width:721px) {
  .container { width:calc(1270 * var(--layout-unit)); }
  .desk-first { grid-template-rows:calc(72 * var(--layout-unit)) minmax(0,1fr) auto; }
  .site-top { height:calc(72 * var(--layout-unit)); gap:calc(24 * var(--layout-unit)); }
  .site-top .logo { width:calc(214 * var(--layout-unit)); }
  .desk-layout { grid-template-columns:5fr 7fr; gap:calc(20 * var(--layout-unit)); }
  .desk-copy { padding-bottom:calc(22 * var(--layout-unit)); }
  .desk-copy h1 { font-size:max(38px,calc(62 * var(--layout-unit))); line-height:.99; letter-spacing:calc(-3 * var(--layout-unit)); }
  .desk-copy .intro-text { max-width:calc(385 * var(--layout-unit)); font-size:max(14px,calc(18 * var(--layout-unit))); margin-top:calc(20 * var(--layout-unit)); }
  .desk-copy .cta { margin-top:calc(28 * var(--layout-unit)); }
  main .cta { min-height:max(44px,calc(50 * var(--layout-unit))); padding:calc(12 * var(--layout-unit)) calc(22 * var(--layout-unit)); gap:calc(32 * var(--layout-unit)); font-size:max(14px,calc(17 * var(--layout-unit))); border-radius:calc(6 * var(--layout-unit)); }
  main .waitlist-icon { width:max(18px,calc(21 * var(--layout-unit))); height:max(18px,calc(21 * var(--layout-unit))); }
  .site-top .cta { min-height:max(38px,calc(42 * var(--layout-unit))); padding:calc(10 * var(--layout-unit)) calc(16 * var(--layout-unit)); font-size:max(12px,calc(14 * var(--layout-unit))); gap:calc(24 * var(--layout-unit)); }
  .device-stage { height:calc(515 * var(--layout-unit)); max-height:none; }
  .desk-window { width:calc(100% - 30 * var(--layout-unit)); top:calc(52 * var(--layout-unit)); border-radius:calc(9 * var(--layout-unit)); }
  .capture-titlebar { height:calc(26 * var(--layout-unit)); padding-inline:calc(12 * var(--layout-unit)); font-size:calc(10 * var(--layout-unit)); }
  .capture-titlebar .traffic-lights { gap:calc(6 * var(--layout-unit)); }
  .capture-titlebar .traffic-lights i { width:calc(9 * var(--layout-unit)); height:calc(9 * var(--layout-unit)); }
  .phone-device { right:calc(-10 * var(--layout-unit)); transform:scale(var(--desktop-phone-fit,.9)); transform-origin:bottom right; }
  .credit-line { padding-block:calc(18 * var(--layout-unit)); gap:calc(16 * var(--layout-unit)); font-size:max(10px,calc(14 * var(--layout-unit))); }

  .chapter-studio { padding:calc(24 * var(--layout-unit)) 0 calc(20 * var(--layout-unit)); }
  .chapter-shell,.chapter-panels { min-height:0; }
  .s-split { grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr); gap:calc(50 * var(--layout-unit)); }
  .s-original .v-heading { font-size:max(30px,calc(40 * var(--layout-unit))); letter-spacing:calc(-1.65 * var(--layout-unit)); }
  .s-heading .v-lead { font-size:min(calc(15 * var(--layout-unit)),3.25cqi); margin-top:calc(8 * var(--layout-unit)); }
  .s-copy .v-versions { margin-top:calc(12 * var(--layout-unit)); }
  .s-copy .v-versions.vertical { gap:calc(12 * var(--layout-unit)); }
  .v-version { padding-top:calc(13 * var(--layout-unit)); }
  .v-versions.vertical .v-version h3 { font-size:max(15px,calc(19 * var(--layout-unit))); gap:calc(10 * var(--layout-unit)); margin-bottom:calc(7 * var(--layout-unit)); }
  .v-version h3 span { font-size:max(10px,calc(12 * var(--layout-unit))); }
  .v-versions.vertical .v-version p { font-size:max(12px,calc(15 * var(--layout-unit))); margin-left:calc(24 * var(--layout-unit)); }
  .s-benefits { gap:calc(28 * var(--layout-unit)); margin-top:calc(12 * var(--layout-unit)); padding-top:calc(12 * var(--layout-unit)); }
  .s-benefits p { font-size:max(11px,calc(14 * var(--layout-unit))); }
  .s-benefits strong { font-size:max(13px,calc(17 * var(--layout-unit))); margin-bottom:calc(4 * var(--layout-unit)); }
  .chapter-invitation { gap:calc(24 * var(--layout-unit)); margin-top:calc(14 * var(--layout-unit)); padding-block:calc(12 * var(--layout-unit)); }
  .chapter-invitation strong { font-size:max(18px,calc(24 * var(--layout-unit))); letter-spacing:calc(-.4 * var(--layout-unit)); }
  .chapter-invitation p { font-size:max(12px,calc(14 * var(--layout-unit))); margin-top:calc(5 * var(--layout-unit)); }
  .chapter-footer { padding-top:calc(16 * var(--layout-unit)); gap:calc(8 * var(--layout-unit)) calc(20 * var(--layout-unit)); font-size:max(11px,calc(12 * var(--layout-unit))); }
  .chapter-footer-actions { gap:calc(20 * var(--layout-unit)); }
  .chapter-footer-actions .chapter-replay { min-height:max(32px,calc(38 * var(--layout-unit))); padding:calc(8 * var(--layout-unit)) calc(4 * var(--layout-unit)); gap:calc(7 * var(--layout-unit)); }
}

@media(max-width:720px), (max-width:960px) and (max-height:500px) and (pointer:coarse) {
  :root { --layout-unit:min(calc(100vw / 393),calc(100svh / 735)); }
  @supports(height:100dvh) { :root { --layout-unit:min(calc(100vw / 393),calc(100dvh / 735)); } }
  .scene {
    height:100svh; height:100dvh; min-height:0;
    padding-top:max(8px,calc(10 * var(--layout-unit)),env(safe-area-inset-top));
    padding-bottom:max(8px,calc(10 * var(--layout-unit)),env(safe-area-inset-bottom));
  }
  .container { width:calc(100% - 32 * var(--layout-unit)); }

  /* Browser chrome can change dvh while scrolling. Keep the first-page
     composition on the stable small viewport; the section still fills dvh. */
  .desk-first { --layout-unit:min(calc(100vw / 393),calc(100svh / 735)); grid-template-rows:max(36px,calc(42 * var(--layout-unit))) minmax(0,1fr) auto; gap:calc(8 * var(--layout-unit)); }
  .desk-first .site-top { height:max(36px,calc(42 * var(--layout-unit))); justify-content:center; }
  .desk-first .site-top .logo { width:max(145px,calc(162 * var(--layout-unit))); }
  .desk-first .site-top .cta,.desktop-break { display:none; }
  .desk-layout { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr); gap:calc(12 * var(--layout-unit)); padding:0; }
  .desk-copy { padding:0; text-align:center; }
  .desk-copy h1 { font-size:max(26px,calc(30.654 * var(--layout-unit))); line-height:1.04; letter-spacing:calc(-1.2 * var(--layout-unit)); }
  .desk-copy .intro-text { max-width:none; font-size:max(13px,calc(14 * var(--layout-unit))); line-height:1.35; margin:calc(10 * var(--layout-unit)) auto 0; }
  main .cta { min-height:max(44px,calc(44 * var(--layout-unit))); padding:calc(10 * var(--layout-unit)) calc(20 * var(--layout-unit)); gap:calc(24 * var(--layout-unit)); font-size:max(14px,calc(15 * var(--layout-unit))); border-radius:calc(6 * var(--layout-unit)); }
  main .waitlist-icon { width:max(18px,calc(21 * var(--layout-unit))); height:max(18px,calc(21 * var(--layout-unit))); }
  .desk-copy .cta { margin-top:calc(12 * var(--layout-unit)); }
  .device-stage { height:100%; min-height:0; max-height:none; margin:0; align-self:start; }
  @supports(height:100dvh) {
    /* Remove only the extra space revealed by collapsing browser chrome,
       rather than feeding it into the mockups' ResizeObserver scale. */
    .device-stage { height:max(0px,calc(100% - 100dvh + 100svh)); }
  }
  .desk-window {
    display:block; width:var(--mobile-desktop-width,96%);
    left:0; top:var(--mobile-desktop-top,0px); border-radius:6px;
  }
  .capture-titlebar { height:clamp(13px,calc(15 * var(--layout-unit)),18px); padding-inline:calc(8 * var(--layout-unit)); font-size:max(6px,calc(8 * var(--layout-unit))); }
  .capture-titlebar .traffic-lights { gap:4px; }
  .capture-titlebar .traffic-lights i { width:5px; height:5px; }
  .phone-device {
    top:var(--mobile-phone-top,42px); left:auto; right:0; bottom:auto;
    transform:scale(var(--phone-fit,.6)); transform-origin:top right;
  }
  .desk-first .credit-line { display:block; padding:calc(8 * var(--layout-unit)) 0 0; text-align:center; font-size:max(10px,calc(10 * var(--layout-unit))); line-height:1.3; }
  .desk-first .credit-line strong { display:block; font-size:max(11px,calc(12 * var(--layout-unit))); margin-bottom:calc(3 * var(--layout-unit)); }
  .desk-first .credit-line>span { display:block; max-width:calc(340 * var(--layout-unit)); margin-inline:auto; }

  .chapter-shell { display:grid; grid-template-rows:minmax(0,1fr) auto auto; gap:calc(8 * var(--layout-unit)); min-height:0; }
  .chapter-panels { display:block; min-height:0; }
  .chapter-panel,.s-original { height:100%; min-height:0; }
  .s-original { display:grid; grid-template-rows:auto minmax(0,1fr) auto auto; gap:calc(10 * var(--layout-unit)); }
  .s-split,.s-copy { display:contents; }
  .s-heading { order:-2; text-align:center; }
  .s-original .v-heading { font-size:max(26px,calc(30.261 * var(--layout-unit))); line-height:1.04; letter-spacing:calc(-1 * var(--layout-unit)); }
  .s-heading .v-lead { margin-top:calc(7 * var(--layout-unit)); font-size:min(calc(12 * var(--layout-unit)),3.25cqi); line-height:1.3; }
  .s-split>.v-stage { order:-1; width:100%; height:100%; min-height:0; aspect-ratio:auto!important; }
  .s-original .motion-canvas {
    left:var(--source-left,0px); top:var(--source-top,0px);
    transform:scale(var(--source-fit,1))!important; transform-origin:top left;
  }
  .s-copy .v-versions.vertical { gap:calc(8 * var(--layout-unit)); margin:0; }
  .s-copy .v-version { padding-top:calc(7 * var(--layout-unit)); }
  .s-copy .v-version h3 { font-size:max(16px,calc(17 * var(--layout-unit))); line-height:1.15; margin-bottom:calc(4 * var(--layout-unit)); gap:calc(8 * var(--layout-unit)); }
  .v-version h3 span { font-size:max(10px,calc(11 * var(--layout-unit))); }
  .v-versions.vertical .v-version p { font-size:max(12px,calc(12 * var(--layout-unit))); line-height:1.3; margin-left:calc(20 * var(--layout-unit)); }
  .s-benefits { grid-template-columns:repeat(3,minmax(0,1fr)); gap:calc(10 * var(--layout-unit)); margin:0; padding-top:calc(9 * var(--layout-unit)); }
  .s-benefits strong { font-size:max(12px,calc(12 * var(--layout-unit))); line-height:1.2; margin-bottom:calc(4 * var(--layout-unit)); }
  .s-benefits p { font-size:max(10.5px,calc(10.5 * var(--layout-unit))); line-height:1.3; }
  .chapter-invitation { margin:0; padding:0; border:0; gap:0; }
  .chapter-invitation>div { display:none; }
  .chapter-invitation .cta { justify-content:center; }
  .chapter-footer { display:block; padding:0; }
  .chapter-footer>span { display:none; }
  .chapter-footer-actions { justify-content:space-between; gap:calc(12 * var(--layout-unit)); }
  .chapter-footer-actions .chapter-replay,.chapter-footer-actions a { min-height:max(36px,calc(36 * var(--layout-unit))); display:inline-flex; align-items:center; font-size:max(11px,calc(11 * var(--layout-unit))); }
}

@media(max-width:720px) and (max-height:650px) {
  .desk-first { grid-template-rows:36px minmax(0,1fr) auto; gap:6px; }
  .desk-first .site-top { height:36px; }
  .desk-first .site-top .logo { width:145px; }
  .desk-layout { gap:8px; }
  .desk-copy h1 { font-size:clamp(26px,7.4vw,31px); }
  .desk-copy .intro-text { font-size:13px; margin-top:7px; }
  .desk-copy .cta { margin-top:9px; }
  .s-original { gap:7px; }
  .s-original .v-heading { font-size:27px; }
  .s-copy .v-versions.vertical { gap:6px; }
  .s-benefits { padding-top:7px; }
}

@media(max-width:960px) and (max-height:500px) and (pointer:coarse) and (orientation:landscape) {
  :root { --layout-unit:min(calc(100vw / 844),calc(100svh / 390)); }
  @supports(height:100dvh) { :root { --layout-unit:min(calc(100vw / 844),calc(100dvh / 390)); } }
  .scene { padding-top:max(8px,calc(8 * var(--layout-unit)),env(safe-area-inset-top)); padding-bottom:max(8px,calc(8 * var(--layout-unit)),env(safe-area-inset-bottom)); }
  .container { width:calc(100% - 48 * var(--layout-unit)); }
  .desk-first { --layout-unit:min(calc(100vw / 844),calc(100svh / 390)); grid-template-rows:calc(32 * var(--layout-unit)) minmax(0,1fr) auto; gap:calc(5 * var(--layout-unit)); }
  .desk-first .site-top { height:calc(32 * var(--layout-unit)); }
  .desk-first .site-top .logo { width:calc(140 * var(--layout-unit)); }
  .desk-layout { grid-template-columns:1.1fr .9fr; grid-template-rows:minmax(0,1fr); gap:calc(20 * var(--layout-unit)); }
  .desk-copy h1 { font-size:max(26px,calc(30 * var(--layout-unit))); }
  .desk-copy .intro-text { font-size:max(13px,calc(13 * var(--layout-unit))); margin-top:calc(9 * var(--layout-unit)); }
  .desk-copy .cta { margin-top:calc(12 * var(--layout-unit)); }
  .desk-first .credit-line>span { max-width:none; }
  .s-original { grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto; gap:calc(7 * var(--layout-unit)) calc(24 * var(--layout-unit)); }
  .s-heading { grid-column:1; grid-row:1; }
  .s-original .v-heading { font-size:max(26px,calc(27 * var(--layout-unit))); }
  .s-split>.v-stage { grid-column:1; grid-row:2; }
  .s-versions { grid-column:2; grid-row:1 / 3; align-self:center; }
  .s-benefits { grid-column:1 / -1; grid-row:3; padding-top:calc(6 * var(--layout-unit)); }
  .s-benefits strong { display:inline; margin-right:calc(5 * var(--layout-unit)); }
  .chapter-shell { grid-template-columns:1fr auto; grid-template-rows:minmax(0,1fr) auto; gap:calc(8 * var(--layout-unit)) calc(24 * var(--layout-unit)); }
  .chapter-panels { grid-column:1 / -1; }
  .chapter-invitation { grid-row:2; }
  .chapter-footer { grid-row:2; align-self:center; }
}