/* Hero composition: copy, artwork and badges have independent layout areas.
   This file owns responsive hero geometry; typography/artwork remain approved. */
.hero,html[dir=rtl] .hero{
  display:grid;grid-template-rows:1fr auto;align-items:center;direction:ltr;
  height:clamp(660px,92svh,860px);min-height:0;background:#04130b;
}
.hero:after{display:none}
.hero-table{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#04130bf0 0%,#04130b70 39%,transparent 68%),
    linear-gradient(0deg,#071611 0%,transparent 24%),
    url('/assets/lounge.webp') right center/cover no-repeat;
}
.hero-copy,html[dir=rtl] .hero-copy{
  width:min(570px,calc(48% - 32px));
  margin:110px auto 20px max(32px,calc((100% - 1340px)/2));
}
.hero-copy h1,.hero-copy .lede,.hero-copy .hero-invitation{max-width:570px}
.hero-copy .lede{max-width:none}
.hero-copy .hero-invitation{max-width:430px}
html[dir=rtl] .hero-copy{direction:rtl}
html[dir=rtl] .hero-copy>*{margin-inline-start:auto;margin-inline-end:0}
html[dir=rtl] .hero-copy .lede{max-width:none;margin-inline-start:auto}
html[dir=rtl] .hero-copy .hero-invitation{margin-inline-start:0;margin-inline-end:auto}
.hero-store-dock{
  position:relative;inset:auto;bottom:auto;z-index:3;
  padding:0 24px 18px;display:flex;justify-content:center;
}
.hero-store-dock .store-badges,html[dir=rtl] .hero .hero-store-dock .store-badges{
  width:min(460px,100%);gap:14px;margin:0;
}
.hero-store-dock .apple-badge{width:calc(44% - 7px)}
.hero-store-dock .google-badge{width:calc(56% - 7px)}
.hero-store-dock .official-badge img{width:100%;height:auto}

/* Tablets use a deliberate stacked composition too, rather than squeezing
   desktop text into the cards. The image crop depends only on its own frame. */
@media(max-width:1000px){
  .header{height:78px;width:calc(100% - 40px)}
  .header nav{display:none}
  .hero,html[dir=rtl] .hero{height:auto;grid-template-rows:auto auto auto;overflow:hidden}
  .hero-copy,html[dir=rtl] .hero-copy{
    width:min(620px,calc(100% - 40px));margin:108px auto 0;
  }
  .hero-copy h1,.hero-copy .lede,.hero-copy .hero-invitation,
  html[dir=rtl] .hero-copy .lede{max-width:none}
  .hero h1{font-size:clamp(42px,8.5vw,68px)}
  html[dir=rtl] .hero h1{font-size:clamp(34px,9.6vw,64px)}
  .hero-copy .lede{font-size:18px;line-height:1.65;margin-top:18px}
  .hero-invitation{margin-top:22px}
  .table-invitation{padding:14px 20px}
  .hero-table{
    position:relative;inset:auto;grid-row:2;width:100%;
    --table-height:clamp(220px,30svh,330px);height:var(--table-height);margin-top:10px;
    background:linear-gradient(180deg,#04130b 0%,transparent 20%),
      linear-gradient(0deg,#071611 0%,transparent 12%),
      url('/assets/lounge.webp') right bottom/auto calc(var(--table-height) * 1.45) no-repeat;
  }
  .hero-store-dock{grid-row:3;background:#071611;padding:0 20px 18px}
  .hero-store-dock .store-badges,html[dir=rtl] .hero .hero-store-dock .store-badges{width:min(440px,100%);gap:12px}
  .hero-store-dock .apple-badge{width:calc(44% - 6px)}
  .hero-store-dock .google-badge{width:calc(56% - 6px)}
  .hero-light{display:none}
  .strategy{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .card-scene{overflow:hidden;min-width:0}
}
@media(max-width:760px){
  .hero-table{--table-height:clamp(200px,28svh,240px)}
}
@media(max-width:430px){
  .hero-copy,html[dir=rtl] .hero-copy{margin-top:104px}
  .hero-copy .lede{font-size:17px;line-height:1.6;margin-top:16px}
  .hero-invitation{margin-top:18px}
  .table-invitation strong{font-size:18px}
  .table-invitation small{font-size:14px}
}
/* Short windows scroll normally; never clip copy or move badges over cards. */
@media(max-width:1000px) and (max-height:650px){
  .hero-copy,html[dir=rtl] .hero-copy{margin-top:94px}
  .hero-table{--table-height:190px}
}