/*
 * Responsive repair layer.
 * All overrides are limited to laptop, tablet and phone widths. The existing
 * large-desktop layouts (1440px and wider) are left untouched.
 */

@media (max-width: 1439px) {
  :root {
    --gutter: clamp(22px, 3.2vw, 48px);
    --st-pad: clamp(68px, 7.4vw, 112px);
  }

  .st-container,
  .st-container--narrow,
  .st-container--wide {
    max-width: calc(100% - 2 * var(--gutter));
  }

  .st-features,
  .st-cards,
  .st-row,
  .kit-stage,
  .st-step,
  .specs-grid,
  .cfg,
  .tp-two,
  .tp-stats,
  .faq,
  .social__videos,
  .tech2__grid,
  .vr__row,
  .ba-layout {
    min-width: 0;
  }

  .st-row > *,
  .kit-stage > *,
  .st-step > *,
  .specs-grid > *,
  .cfg > *,
  .tp-two > *,
  .faq > *,
  .social__videos > *,
  .tech2__grid > *,
  .vr__row > *,
  .ba-layout > * { min-width: 0; }

  .cfg {
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, .9fr);
    gap: clamp(14px, 1.8vw, 24px);
  }

  .cfg__panel { min-width: 0; }

  .hero__title { font-size: clamp(48px, 6vw, 78px); }
  .hero__buy { max-width: calc(100% - 2 * var(--gutter)); }
}

@media (max-width: 1199px) {
  :root { --gutter: clamp(22px, 3.6vw, 42px); }

  .site-header { padding-inline: var(--gutter); }
  .site-header__logo img { width: clamp(148px, 16vw, 190px); }
  .site-header__actions { gap: clamp(12px, 2vw, 24px); }

  .st-features--3,
  .st-features--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-cta-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-split { min-height: 0; }
  .st-split__inner--right { padding-inline: clamp(34px, 5vw, 76px); }

  .site-menu { --split: 46%; }
  .site-menu__panel { padding-left: clamp(40px, 6vw, 88px); }
  .site-menu__footer { left: clamp(40px, 6vw, 88px); }

  .sf-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sf-brand,
  .sf-news { grid-column: span 3; }
  .sf-news { max-width: 620px; }
  .sf-col a { white-space: normal; }
}

@media (max-width: 1099px) {
  .site-menu { grid-template-columns: 1fr; }
  .site-menu__media,
  .site-menu__badge { display: none; }
  .site-menu__panel { padding-left: var(--gutter); }
  .site-menu__footer { left: var(--gutter); }

  .cfg { grid-template-columns: minmax(0, 1fr); }
  .cfg__stage {
    position: relative;
    top: auto;
    height: clamp(320px, 52vw, 620px);
    min-height: 0;
  }
}

@media (max-width: 991px) {
  :root { --st-pad: clamp(64px, 8vw, 88px); }

  .st-features,
  .st-features--3,
  .st-features--4,
  .st-cards,
  .st-cta-cards,
  .st-cta-cards--3,
  .st-row,
  .kit-stage,
  .st-step,
  .specs-grid,
  .st-split,
  .tp-two,
  .faq,
  .social__videos,
  .tech2__grid,
  .vr__row,
  .ba-layout { grid-template-columns: minmax(0, 1fr); }

  .st-features,
  .st-features--3,
  .st-features--4,
  .st-cards,
  .st-cta-cards,
  .st-cta-cards--3 { gap: 28px; }

  .st-rows { gap: 48px; }
  .st-row { gap: 24px; }
  .st-row--flip .st-row__text { order: 0; }
  .st-step { gap: 24px; }
  .st-split { min-height: 0; }
  .st-split__inner--right { width: auto; margin: 0; padding: 56px var(--gutter); }

  .tp-two { gap: 32px; }
  .tp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .tp-hero { min-height: clamp(480px, 66svh, 700px); padding-top: calc(var(--header-h) + 64px); }

  .cfg { padding-inline: var(--gutter); }
  .cfg__stage { height: clamp(300px, 58vw, 540px); }

  .vr__row { margin-left: 0; }
  .vr__rest { min-width: 0; }
  .ba-layout { gap: 30px; }
}

@media (max-width: 767px) {
  :root {
    --header-h: 64px;
    --gutter: clamp(18px, 5vw, 24px);
    --st-pad: clamp(48px, 14vw, 68px);
    --edge-top: 24px;
    --edge-bottom: 40px;
    --edge-specs: 38px;
  }

  html,
  body { width: 100%; max-width: 100%; }
  body { overflow-x: clip; font-size: 16px; }
  img,
  video,
  iframe { max-width: 100%; }

  .site-header {
    height: var(--header-h);
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
  .site-header__logo img { width: clamp(132px, 38vw, 170px); }
  .site-header__actions { gap: 10px; }
  .cart-link { width: 44px; height: 44px; }
  .menu-toggle { gap: 9px; min-height: 44px; }
  .menu-toggle__label { font-size: 11px; letter-spacing: 1.4px; }
  .menu-toggle__icon { width: 28px; }
  .usa-badge { margin-left: 8px; padding-inline: 4px; }
  .usa-badge__flag { width: 30px; }

  .site-menu__panel {
    justify-content: flex-start;
    gap: 20px;
    padding: calc(var(--header-h) + 28px) var(--gutter) max(22px, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-menu__list { margin-block: auto; }
  .site-menu__list a { font-size: clamp(23px, 7vw, 34px); line-height: 1.25; }
  .site-menu__footer {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: auto;
  }
  .site-menu__social { flex-wrap: wrap; }

  main { padding-top: var(--header-h); }
  .st-container,
  .st-container--narrow,
  .st-container--wide {
    width: calc(100% - 2 * var(--gutter));
    max-width: none;
  }
  .st-section { padding-block: var(--st-pad); }
  .edge-top { padding-top: calc(var(--st-pad) + var(--edge-top)); }
  .edge-both {
    padding-top: calc(var(--st-pad) + var(--edge-top));
    padding-bottom: calc(var(--st-pad) + var(--edge-bottom));
  }
  .st-h2 { font-size: clamp(25px, 7.2vw, 34px); line-height: 1.08; letter-spacing: .01em; text-wrap: balance; }
  .st-h3 { font-size: 17px; line-height: 1.25; }
  .st-eyebrow { margin-bottom: 10px; font-size: 11px; letter-spacing: 1.6px; }
  .st-lead { font-size: 16px; line-height: 1.55; letter-spacing: 0; }
  .st-feature p,
  .st-row__text p,
  .perf__block p,
  .video-block__content > p,
  .kit-info > p,
  .kit-info dd,
  .st-step__text p,
  .faq__list details > p { font-size: 16px; line-height: 1.6; }

  .st-features,
  .st-features--3,
  .st-features--4,
  .st-cards,
  .st-cta-cards,
  .st-cta-cards--3,
  .st-row,
  .kit-stage,
  .st-step,
  .specs-grid,
  .st-split,
  .tp-two,
  .faq,
  .social__videos,
  .tech2__grid,
  .vr__row,
  .ba-layout { grid-template-columns: minmax(0, 1fr); }

  .st-cards,
  .st-cta-cards,
  .st-cta-cards--3 { gap: 20px; }
  .st-row,
  .st-step { gap: 20px; }
  .st-rows { gap: 38px; margin-top: 34px; }
  .st-row__text h3 { font-size: 19px; line-height: 1.3; }
  .st-row__img { aspect-ratio: 4 / 3; }
  .st-card__body { padding: 20px; }
  .st-tabs {
    display: flex;
    gap: 8px;
    width: 100%;
    overflow-x: auto;
    padding: 0 0 8px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .st-tabs button { flex: 0 0 auto; min-width: 64px; min-height: 44px; padding: 10px; font-size: 12px; scroll-snap-align: start; }
  .st-tools ul { grid-template-columns: minmax(0, 1fr); }
  .st-badges,
  .st-stats { justify-content: flex-start; gap: 18px 24px; margin-top: 30px; }
  .st-band,
  .st-band--tall { min-height: 420px; margin-block: -20px; padding: 64px 0; background-size: cover; background-position: center; }
  .st-split__inner--right { padding: 44px var(--gutter); }

  .hero { height: max(620px, calc(100svh - var(--header-h))); min-height: 620px; }
  .hero__shade { background: linear-gradient(0deg, rgba(8,7,6,.92) 0%, rgba(8,7,6,.52) 52%, rgba(8,7,6,.08) 100%); }
  .hero__buy { left: var(--gutter); right: var(--gutter); bottom: max(24px, env(safe-area-inset-bottom)); width: auto; max-width: none; }
  .hero__title { max-width: 10ch; margin-bottom: 12px; font-size: clamp(40px, 12vw, 56px); line-height: .98; }
  .hero__text { max-width: 34ch; font-size: 16px; line-height: 1.5; }
  .hero__meta { gap: 8px 14px; font-size: 14px; }
  .hero__btns { max-width: 360px; }
  .hero__btns .st-btn { flex: 1 1 100%; width: 100%; min-height: 50px; }

  .qs { padding-block: 44px 52px; }
  .qs__head { align-items: flex-start; gap: 10px; margin-bottom: 20px; }
  .qs__head p { max-width: 42ch; font-size: 15px; }
  .qs__title { font-size: clamp(23px, 7vw, 30px); }
  .qs__grid { gap: 12px; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .qs-card { flex-basis: min(88vw, 360px); }
  .qs-card__body { padding: 18px; }
  .qs-card__name { font-size: 18px; }
  .qs-card__price strong { font-size: 24px; }

  .ba-section > .st-container--wide { width: calc(100% - 2 * var(--gutter)); }
  .ba-layout { gap: 24px; }
  .ba-section .ba { aspect-ratio: 1.42 / 1; max-height: none; }
  .ba__legend { gap: 8px; padding-top: 10px; font-size: 9px; letter-spacing: .08em; }
  .ba-copy { padding: 0; }
  .ba-copy__title { max-width: 16ch; margin-bottom: 16px; font-size: clamp(25px, 7vw, 34px); }
  .ba-copy__states { min-height: 0; }
  .ba-copy__description { font-size: 16px; }
  .ba-copy__hint { margin-top: 14px; }

  .ytbg { min-height: 590px; }
  .ytbg__content { padding-block: 76px 52px; }
  .ytbg__title { max-width: 12ch; font-size: clamp(34px, 10vw, 50px); line-height: 1.02; }
  .ytbg__text { max-width: 36ch; font-size: 16px; line-height: 1.55; }
  .ytbg__btns { max-width: 360px; }
  .ytbg__btns .st-btn,
  .ytbg__sound { flex: 1 1 100%; min-height: 48px; }
  .ytbg__mute { right: var(--gutter); top: 20px; }

  .st-kits .kit-swatches { justify-content: flex-start; gap: 12px 20px; margin: 28px 0; }
  .kit-swatch { font-size: 15px; }
  .kit-swatch__dot { width: 34px; height: 34px; }
  .kit-stage { gap: 24px; }
  .kit-stage__media { max-height: 440px; }
  .kit-info h3 { font-size: clamp(22px, 7vw, 30px); }
  .kit-info dl { margin-bottom: 20px; }
  .kit-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

  .st-tabs button,
  .faq__list summary,
  .cfg-stage__nav button,
  .cfg-stepper button,
  .qty button,
  .cookie__btn,
  .drawer__close { min-height: 44px; }
  .faq { gap: 28px; }
  .faq__intro { position: static; }
  .faq__help { margin-top: 26px; padding-top: 20px; }
  .faq__list .faq-cat { margin-top: 34px; }
  .faq__list summary { padding: 13px 0 14px 38px; font-size: 17px; }
  .faq__list summary::before { top: 16px; width: 22px; height: 16px; }
  .faq__list details > p { padding: 14px 0 20px 38px; }

  .vs__frame { padding: 28px 14px 24px; }
  .vs__table { min-width: 540px; }
  .vs__table th,
  .vs__table td { padding: 8px; }
  .vr { background-size: auto 360px; background-position: left top; }
  .vr__title { font-size: clamp(32px, 9vw, 44px); line-height: 1.02; }
  .vr__row { margin-top: 112px; }
  .vr__rest { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vr__rest--2 { grid-template-columns: minmax(0, 1fr); }
  .vr-card { min-width: 0; }
  .vr-card__stats li { gap: 6px; }

  .cfg { gap: 14px; padding: calc(var(--header-h) + 10px) var(--gutter) calc(132px + env(safe-area-inset-bottom)); }
  .cfg__stage { height: clamp(250px, 78vw, 410px); border-radius: 14px; }
  .cfg-stage__caption { left: 18px; bottom: 60px; max-width: calc(100% - 36px); font-size: 12px; }
  .cfg-stage__nav { left: 18px; right: 18px; bottom: 18px; }
  .cfg__panel { padding: 20px 0; }
  .cfg-form,
  .cfg-opts--inline { grid-template-columns: minmax(0, 1fr); }
  .cfg-card--row { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .cfg-card--row img { width: 76px; }
  .cfg-order { padding: 14px 14px 6px; }
  .cfg-order__lines li { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; }
  .cfg-bar {
    height: auto;
    min-height: 64px;
    padding: 8px max(12px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    gap: 8px;
  }
  .cfg-bar__model { flex: 1 1 auto; gap: 4px; flex-direction: column; align-items: flex-start; line-height: 1.15; }
  .cfg-bar__model strong { max-width: 34vw; font-size: 12px; }
  .cfg-bar__total { margin-left: 0; font-size: 16px; white-space: nowrap; }
  .cfg-bar__actions { gap: 6px; }
  .cfg-bar .cfg-pill { min-height: 44px; padding: 9px 12px; font-size: 11px; }
  .cfg-drawer__panel { width: 100%; padding: calc(var(--header-h) + 22px) var(--gutter) calc(20px + env(safe-area-inset-bottom)); }
  .cfg-drawer__close { top: calc(var(--header-h) + 10px); right: var(--gutter); }
  .cfg-confirm { padding: 12px; }
  .cfg-confirm__card { width: 100%; max-height: calc(100dvh - 24px); padding: 26px 18px 22px; overflow-y: auto; }

  .tp-hero { min-height: clamp(450px, 70svh, 620px); padding: calc(var(--header-h) + 70px) 0 calc(54px + var(--edge-top)); }
  .tp-hero--short { min-height: 350px; }
  .tp-hero__title { font-size: clamp(27px, 8vw, 42px); line-height: 1.05; letter-spacing: 0; overflow-wrap: anywhere; }
  .tp-hero__title--article { font-size: clamp(25px, 7vw, 36px); }
  .tp-hero__serif { font-size: clamp(20px, 6vw, 28px); }
  .tp-hero__lead { font-size: 16px; line-height: 1.5; }
  .tp-body { padding-top: calc(var(--st-pad) + var(--edge-top) - 12px); }
  .tp-stats { gap: 20px 14px; font-size: 14px; }
  .tp-stats strong { font-size: clamp(27px, 9vw, 40px); }
  .tp-quote { font-size: clamp(20px, 6vw, 28px); }
  .tp-prose,
  .tp-prose--policy { font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
  .tp-prose h2 { margin-top: 30px; font-size: 20px; }
  .tp-prose h3 { font-size: 17px; }
  .tp-prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  .sf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .sf-brand,
  .sf-news { grid-column: 1 / -1; }
  .sf-col:last-of-type { grid-column: 1 / -1; }
  .sf-col { min-width: 0; }
  .sf-col a { display: inline-block; max-width: 100%; line-height: 1.45; overflow-wrap: anywhere; }
  .sf-news__form { display: flex; }
  .sf-news__form input { min-width: 0; width: 100%; font-size: 16px; }
  .sf-news__form button { flex: none; min-width: 76px; min-height: 48px; }
  .sf-bottom__inner { align-items: flex-start; gap: 12px; }
  .sf-bottom .footer-copy { white-space: normal; }
  .sf-legal { gap: 10px 18px; }
  .sf-wordmark { margin-top: 20px; font-size: clamp(42px, 12.5vw, 90px); overflow-wrap: anywhere; }
  .sf-ig__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .drawer__panel { width: min(100%, 460px); }
  .drawer__head,
  .drawer__ship { padding-inline: var(--gutter); }
  .drawer__body { padding-inline: var(--gutter); }
  .drawer__foot { padding-left: var(--gutter); padding-right: var(--gutter); padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .cart-line { grid-template-columns: 68px minmax(0, 1fr) auto; gap: 10px; }
  .cart-line__img { width: 68px; }
  .cart-line__price strong { font-size: 14px; }
  .cart-line__variant { font-size: 12px; }
  .cookie { left: var(--gutter); right: var(--gutter); bottom: calc(76px + env(safe-area-inset-bottom)); width: auto; max-height: min(60dvh, 440px); overflow-y: auto; padding: 18px; }
  .cookie__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .cookie__btn { min-height: 44px; padding: 10px; }
  .cookie__link { grid-column: 1 / -1; justify-self: start; min-height: 40px; }
  .buy-bar { left: var(--gutter); right: var(--gutter); bottom: calc(10px + env(safe-area-inset-bottom)); border-radius: 10px; }
  .buy-bar .shop-btn { min-height: 44px; padding-inline: 15px; }
  .shop-toast { top: calc(var(--header-h) + 10px + env(safe-area-inset-top)); width: calc(100% - 2 * var(--gutter)); justify-content: center; text-align: center; }
  .consent { padding: 12px; }
  .consent__card { width: 100%; max-height: calc(100dvh - 24px); overflow-y: auto; padding: 28px 18px; }
  .back-to-top { right: var(--gutter); bottom: calc(14px + env(safe-area-inset-bottom)); }
  body.has-buy-bar .back-to-top { transform: translateY(-72px); }
}

@media (max-width: 479px) {
  :root { --gutter: 17px; --st-pad: 48px; }

  .hero { min-height: 600px; }
  .hero__title { font-size: clamp(38px, 11.5vw, 48px); }
  .st-card__body { padding: 17px; }
  .st-band,
  .st-band--tall { min-height: 390px; padding-block: 54px; }
  .st-stat,
  .st-badge { gap: 10px; font-size: 14px; }
  .st-stat__icon { width: 46px; height: 46px; }
  .st-stat__icon svg { width: 22px; height: 22px; }
  .ba-section .ba { aspect-ratio: 1.2 / 1; }
  .ba__legend { font-size: 8px; letter-spacing: .04em; }
  .ba-copy__state { padding-left: 12px; }
  .vr__rest { grid-template-columns: minmax(0, 1fr); }
  .vr__row { margin-top: 90px; }
  .tp-stats { gap: 18px 10px; }
  .tp-stats strong { font-size: 28px; }
  .sf-grid { column-gap: 12px; }
  .sf-brand img { width: min(190px, 75%); }
  .sf-bottom__inner { width: 100%; }
  .cfg-bar__model strong { max-width: 28vw; }
  .cfg-bar__total { font-size: 14px; }
  .cfg-bar .cfg-pill { padding-inline: 9px; font-size: 10px; }
  .cookie__btns { grid-template-columns: 1fr; }
  .cookie__link { grid-column: auto; }
}

@media (max-width: 359px) {
  :root { --gutter: 14px; }
  .site-header__logo img { width: 122px; }
  .site-header__actions { gap: 5px; }
  .menu-toggle { gap: 6px; }
  .menu-toggle__label { font-size: 10px; letter-spacing: 1px; }
  .menu-toggle__icon { width: 23px; }
  .kit-trust { grid-template-columns: minmax(0, 1fr); }
  .sf-grid { grid-template-columns: minmax(0, 1fr); }
  .cfg-bar__model strong { max-width: 25vw; }
}

@media (max-height: 520px) and (max-width: 767px) {
  .hero { min-height: 520px; }
  .site-menu__panel { padding-top: calc(var(--header-h) + 16px); }
  .site-menu__list a { font-size: 22px; }
  .site-menu__panel { gap: 12px; }
}