/* Three tiers keyed to frame SHAPE:
   1. wide (default)  — absolute comp from layout.css
   2. compact         — wrappers reflow to flex/grid; landscape keeps copy + panel side by side
   3. mobile          — inside compact: adds a floored --t for text/controls, drops .sx
   The nav collapses to a burger on portrait frames only. */

/* ═════════ Tier 2 — compact ═════════ */
@media (max-aspect-ratio:87/80),(max-width:899px),(max-height:639px){
  :root{--u:max(.5px,min(100vw / 1000,100vh / 960))}
  @supports (height:100svh){:root{--u:max(.5px,min(100vw / 1000,100svh / 960))}}

  .l{position:relative;inset:auto}
  .nav,.credit{transform:none}

  .stack{display:flex;flex-direction:column;position:absolute;inset:0;z-index:2;
    gap:calc(22*var(--u));
    padding:
      max(calc(26*var(--u)),env(safe-area-inset-top))
      max(calc(40*var(--u)),env(safe-area-inset-right))
      max(calc(22*var(--u)),env(safe-area-inset-bottom))
      max(calc(40*var(--u)),env(safe-area-inset-left))}
  .row{display:flex;align-items:center;justify-content:space-between;gap:calc(16*var(--u))}

  .hero-blk{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
    flex:1;min-height:0;gap:calc(20*var(--u))}
  .tagrow{display:flex;align-items:center;gap:calc(18*var(--u))}

  .foot{flex-wrap:wrap;align-items:flex-end;row-gap:calc(14*var(--u))}
  .meet{margin-left:auto}
  .credit{order:3;flex-basis:100%;text-align:center}

  /* landscape: copy left, panel right */
  @media (min-aspect-ratio:1/1){
    .hero-blk{display:grid;grid-template-columns:minmax(0,1fr) auto;
      grid-template-areas:"eye panel" "h1 panel" "tag panel";
      align-content:center;align-items:center;justify-items:start;
      column-gap:calc(48*var(--u));row-gap:calc(18*var(--u))}
    .eyebrow{grid-area:eye}
    .hero-h{grid-area:h1;font-size:calc(78*var(--u))}
    .tagrow{grid-area:tag}
    .panel{grid-area:panel}
  }

  /* portrait: nav + CTA collapse into the burger menu */
  @media (max-aspect-ratio:1/1){
    .burger{display:grid}
    .menu{display:none;position:absolute;z-index:5;
      top:calc(84*var(--u));right:max(calc(40*var(--u)),env(safe-area-inset-right));
      width:min(calc(360*var(--u)),calc(100vw - 80*var(--u)));
      flex-direction:column;gap:calc(8*var(--u));padding:calc(10*var(--u));border-radius:calc(22*var(--u))}
    .menu[data-open="true"]{display:flex}
    .menu .nav{display:grid;grid-template-columns:1fr 1fr;gap:calc(8*var(--u));height:auto;padding:0;
      border-radius:0;background:none;border:0;box-shadow:none;
      -webkit-backdrop-filter:none;backdrop-filter:none}
    .menu .nav a{justify-content:center;height:calc(50*var(--u));border-radius:calc(14*var(--u));
      background-color:rgba(255,255,255,.05)}
    .menu .nav a:hover{background-color:rgba(255,255,255,.1)}
    .menu .n-div{display:none}
    .menu .cta{width:100%;justify-content:space-between;height:calc(52*var(--u))}

    .panel{width:100%;max-width:calc(440*var(--u))}
  }

  /* ═════════ Tier 3 — mobile ═════════ */
  @media (max-width:640px) and (max-aspect-ratio:1/1){
    /* --t: legible text + tappable controls; --u: layout spacing. Both floored. */
    :root{--t:max(.82px,min(100vw / 390,100vh / 800));--u:max(.6px,min(100vw / 430,100vh / 900))}
    @supports (height:100svh){
      :root{--t:max(.82px,min(100vw / 390,100svh / 800));--u:max(.6px,min(100vw / 430,100svh / 900))}
    }

    .sx{transform:none}

    .stack{gap:calc(16*var(--u));
      padding:
        max(calc(18*var(--u)),env(safe-area-inset-top))
        max(calc(20*var(--u)),env(safe-area-inset-right))
        max(calc(16*var(--u)),env(safe-area-inset-bottom))
        max(calc(20*var(--u)),env(safe-area-inset-left))}

    .brand{height:calc(42*var(--t))}
    .mark{width:calc(38*var(--t));height:calc(38*var(--t))}
    .brand b{font-size:calc(20*var(--t));margin-left:calc(10*var(--t))}

    .burger{width:calc(44*var(--t));height:calc(44*var(--t));gap:calc(5*var(--t))}
    .burger span{width:calc(18*var(--t));height:calc(2*var(--t))}
    .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(calc(7*var(--t))) rotate(45deg)}
    .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(calc(-7*var(--t))) rotate(-45deg)}

    .menu{top:calc(72*var(--t));right:max(calc(20*var(--u)),env(safe-area-inset-right));
      width:calc(100vw - 40*var(--u));gap:calc(8*var(--t));padding:calc(10*var(--t));border-radius:calc(20*var(--t))}
    .menu .nav{gap:calc(8*var(--t))}
    .menu .nav a{height:calc(50*var(--t));gap:calc(8*var(--t));padding:0 calc(14*var(--t));
      font-size:calc(15*var(--t));border-radius:calc(14*var(--t))}
    .menu .nav svg{width:calc(17*var(--t));height:calc(17*var(--t))}
    .menu .cta{height:calc(52*var(--t));padding:0 calc(6*var(--t)) 0 calc(20*var(--t));font-size:calc(16*var(--t))}
    .knob{width:calc(40*var(--t));height:calc(40*var(--t))}
    .knob svg{width:calc(16*var(--t));height:calc(16*var(--t))}

    .hero-blk{gap:calc(14*var(--t))}
    .eyebrow{font-size:calc(11.5*var(--t));gap:calc(8*var(--t));letter-spacing:.28em}
    .dot{width:calc(6*var(--t));height:calc(6*var(--t))}
    .hero-h{font-size:min(calc(42*var(--t)),10.2vw);letter-spacing:-.04em}
    .tagrow{gap:calc(14*var(--t))}
    .play{width:calc(44*var(--t));height:calc(44*var(--t))}
    .play svg{width:calc(14*var(--t));height:calc(14*var(--t))}
    .tag{max-width:none;font-size:calc(15.5*var(--t));line-height:1.45}

    /* features as a 2×2 grid to save height */
    .panel{max-width:none;padding:calc(16*var(--t));border-radius:calc(20*var(--t));gap:calc(12*var(--t))}
    .p-title{font-size:calc(11*var(--t))}
    .feats{display:grid;grid-template-columns:1fr 1fr;gap:calc(14*var(--t)) calc(10*var(--t))}
    .feats li{align-items:flex-start;gap:calc(10*var(--t))}
    .feats b{font-size:calc(13.5*var(--t))}
    .feats small{font-size:calc(11.5*var(--t))}
    .p-icon{width:calc(32*var(--t));height:calc(32*var(--t));border-radius:calc(10*var(--t))}
    .p-icon svg{width:calc(17*var(--t));height:calc(17*var(--t))}

    .foot{row-gap:calc(12*var(--t))}
    .stats{gap:calc(18*var(--t));flex-wrap:wrap}
    .stat{gap:calc(5*var(--t))}
    .num{font-size:calc(28*var(--t))}
    .lbl{font-size:calc(10.5*var(--t))}
    .slash{height:calc(34*var(--t));width:calc(2*var(--t))}

    .meet{flex:1 0 100%;height:calc(52*var(--t));gap:calc(12*var(--t));padding:0 calc(6*var(--t))}
    .meet b{flex:1;font-size:calc(15*var(--t))}
    .thumb{width:calc(40*var(--t));height:calc(40*var(--t))}
    .meet .knob{width:calc(40*var(--t));height:calc(40*var(--t))}
    .credit{font-size:calc(11*var(--t))}
  }
}