/* The approved desktop composition stays above 1119px. */
.mobile-story-runway, .hero-presentation { display:contents; }
@media (max-width:1119px) {
  :root { --pad:max(clamp(16px,4.5vw,18px),env(safe-area-inset-left),env(safe-area-inset-right)); }
  body { min-width:0; }
  .screen { min-height:0; }
  [id] { scroll-margin-top:20px; }
  a, button, .button *, .tire-quantity button, .square-button, .dialog-close {
    user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  }
  .button { min-width:0; min-height:52px; max-width:100%; padding:15px 20px; font-size:15px; background:#c52a23; color:#fff; }
  .button:hover { color:var(--ink); }
  .button-dark { background:var(--ink); }
  .button-dark::before { background:#c52a23; }
  .button-dark:hover { color:var(--paper); }
  .header { height:auto; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px 12px; padding:18px 0 0; }
  .brand { font-size:clamp(13px,3.5vw,16px); gap:10px; width:max-content; min-height:44px; }
  .brand-mark { gap:3px; }
  .brand-mark i { width:6px; height:29px; }
  .brand small { font-size:12px; letter-spacing:.12em; margin-top:6px; }
  .header-address, .header-phone { display:none; }
  .header>.button { grid-column:2; grid-row:1; min-height:44px; padding:11px 14px; gap:12px; font-size:13px; }
  .header>.button svg { width:18px; height:18px; }
  .header nav { grid-column:1 / -1; grid-row:2; margin:0; justify-content:space-between; gap:16px; font-size:14px; }
  .header nav a { display:flex; align-items:center; min-height:44px; padding:0 4px; }
  .hero-runway .hero { height:auto; min-height:0; display:block; padding-bottom:max(32px,env(safe-area-inset-bottom)); }
  .mobile-story-runway { display:block; position:relative; height:calc(max(540px,100svh) + 144svh); }
  .hero-presentation { position:sticky; top:0; display:flex; flex-direction:column; height:max(540px,100svh); padding-bottom:24px; isolation:isolate; overflow:clip; }
  .wheel-loading .hero-runway, .wheel-ready .hero-runway { height:auto; }
  .wheel-loading .hero-runway .hero, .wheel-ready .hero-runway .hero { position:relative; top:auto; }
  .hero-word { position:relative; top:auto; left:auto; right:auto; margin:24px 0 -36px; font-size:13.3vw; line-height:.9; }
  .wheel-stage { position:relative; inset:auto; flex:1; width:100%; height:auto; min-height:190px; }
  .wheel-fallback { top:50%; width:80%; height:90%; }
  .tire-picker { position:relative; left:auto; top:auto; width:auto; margin:28px var(--pad) 0; gap:14px; }
  .tire-picker-fields { gap:8px; }
  .tire-field { grid-template-columns:56px minmax(0,1fr); gap:12px; }
  .tire-picker label { font-size:13px; line-height:18px; }
  .tire-picker select { appearance:none; height:48px; font-size:16px; padding:10px 36px 10px 8px; }
  .tire-field::after { bottom:21px; }
  .tire-quantity { gap:8px; }
  .tire-quantity button { min-height:44px; font-size:14px; }
  .tire-price-row { gap:16px; }
  #tire-price { font-size:36px; }
  #tire-unit-price { font-size:13px; }
  #tire-book { min-height:52px; padding:15px 18px; gap:16px; font-size:14px; }
  .guarantee { position:relative; inset:auto; align-self:stretch; display:flex; align-items:center; gap:16px; width:auto; margin:24px var(--pad) 0; padding:16px 44px 16px 20px; font-size:13px; line-height:1.3; }
  .guarantee-value { flex:none; font-size:34px; gap:5px; margin:0; }
  .guarantee-value small { font-size:13px; }
  .guarantee>svg { right:16px; bottom:22px; }
  .hero-bottom { position:relative; inset:auto; margin:0 var(--pad); display:flex; flex-direction:column; align-items:stretch; gap:16px; flex:none; }
  .hero-bottom>div:first-child { max-width:none; }
  .hero h1 { font-size:clamp(20px,5.8vw,36px); max-width:none; line-height:1.02; letter-spacing:-.04em; }
  .hero-cta { width:100%; }
  .hero-bottom .hero-cta p { font-size:13px; margin:0 0 8px; }
  .hero-cta .button { min-height:56px; font-size:16px; }
}

@media (min-width:768px) and (max-width:1119px) {
  :root { --pad:max(32px,env(safe-area-inset-left),env(safe-area-inset-right)); }
  .hero-presentation { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); grid-template-rows:auto auto minmax(0,1fr); }
  .header { grid-column:1 / -1; grid-template-columns:auto minmax(0,1fr) auto; padding:20px 0; gap:20px; }
  .header nav { grid-column:2; grid-row:1; justify-content:flex-end; gap:22px; }
  .header>.button { grid-column:3; padding:12px 18px; }
  .hero-word { grid-column:1 / -1; grid-row:2; margin:28px 0 -28px; }
  .wheel-stage { grid-column:1; grid-row:3; height:100%; min-height:0; }
  .hero-bottom { grid-column:2; grid-row:3; align-self:center; margin:24px var(--pad) 0 12px; gap:32px; }
  .hero h1 { font-size:clamp(22px,3vw,32px); }
  .tire-picker, .guarantee { max-width:560px; margin-left:auto; margin-right:auto; }
}

@media (max-width:1119px) and (max-height:539px) and (orientation:landscape) {
  .hero-presentation { height:100svh; min-height:340px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto minmax(0,1fr); padding-bottom:16px; }
  .mobile-story-runway { height:calc(max(340px,100svh) + 144svh); }
  .header { grid-column:1 / -1; grid-template-columns:auto 1fr auto; padding:12px 0; gap:16px; }
  .header nav { grid-column:2; grid-row:1; justify-content:center; gap:14px; }
  .header>.button { grid-column:3; }
  .hero-word { position:absolute; top:94px; left:0; right:0; margin:0; }
  .wheel-stage { grid-column:1; grid-row:2; height:100%; min-height:0; }
  .hero-bottom { grid-column:2; grid-row:2; align-self:end; margin:0 var(--pad) 0 12px; gap:16px; }
  .hero h1 { font-size:clamp(18px,2.7vw,26px); }
}

@media (max-width:1119px) and (prefers-reduced-motion:reduce) {
  .mobile-story-runway { height:auto; }
  .hero-presentation { position:relative; }
}
@media (max-width:1119px) {
  html:not(.wheel-loading):not(.wheel-ready) .mobile-story-runway { height:auto; }
  html:not(.wheel-loading):not(.wheel-ready) .hero-presentation { position:relative; }
}