/* ============================================================
   responsive.css — tablet (≤1024px) and phone (≤600px) layer.
   Everything here lives inside max-width media queries, so the
   desktop rendering (>1024px) is never touched. Loaded after
   design-system.css and showcase.css on every page.
   ============================================================ */

/* ---------- SHOTGUNS ACCORDION STAGE (≤1100px — matches the breakpoint where the stage goes full-width) ---------- */
@media (max-width: 1100px) {
  .ac-item.is-open .ac-body { overflow: hidden; }
  .ac-stage { flex: none; min-height: 0; aspect-ratio: 16 / 9; max-height: 420px; }
  .ac-stage img { position: absolute; left: 0; top: 0; width: 100%; max-width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; }
}

/* ---------- TABLET + PHONE (≤1024px) ---------- */@media (max-width: 1024px) {
  html, body { overflow-x: hidden; }
  body { padding-top: var(--nav-height); }

  /* mobile navigation: showcase pages hide .nav-mobile by default — re-enable the open state */
  body .nav-mobile.open { display: flex; }
  .nav-mobile a { min-height: 44px; display: flex; align-items: center; }

  /* screens that are locked to the viewport on desktop flow naturally on touch devices */
  .hm-first { min-height: 0; display: block; }
  .hm-first .hm-ticker { margin-top: 0; }
  .hm-first #products.py-section { display: block; }
  .ac-list { height: auto; min-height: 0; }
  .ac-item.is-open { flex-grow: 0; }
  .ac-body, .ac-grid { height: auto; }
  main:has(.co-hero) .py-wrap.co-screen,
  main:has(.ct-hero) .py-wrap.ct-screen { height: auto; min-height: 0; }

  /* shared showcase rhythm */
  .py-section { padding: 56px 0; }
  .py-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 28px; }
  .py-head .py-index { align-self: flex-end; margin-top: -8px; }
  .py-hero { min-height: 0; }
  .py-hero-watermark { display: none; }
  /* product stage on touch: no "Now viewing" tag, no aim ring / spotlight — only the hero's flowing lines run behind the image, as they do behind the title */
  .py-stage-tag, .py-stage-ring, .py-stage-light { display: none; }
  .py-hero-actions { flex-wrap: wrap; gap: 14px 24px; }
  .py-hero-actions .btn { min-height: 48px; }
  .py-cta { grid-template-columns: 1fr; padding: 36px 28px; gap: 24px; }
  .py-cta-wm { font-size: 96px; right: 12px; }
  .py-subnav-inner { height: auto; min-height: 52px; padding: 6px 0; gap: 12px; }
  .py-subnav-brand { display: none; }
  .py-subnav-tools { width: 100%; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .py-chips { flex: 1; min-width: 0; padding-bottom: 2px; }
  .py-chip { flex: 0 0 auto; min-height: 40px; }
  .py-jump { min-height: 44px; flex-shrink: 0; }

  /* titles set with inline sizes on desktop fall back to fluid sizes */
  .py-hero-title .py-title-word { font-size: inherit !important; height: auto !important; letter-spacing: inherit !important; padding: 0 !important; margin: 0 !important; }
  .py-hero-title.is-product.hm-title { font-size: clamp(40px, 8.4vw, 84px); letter-spacing: -0.03em; }
  .py-hero-title.is-swap { font-size: clamp(88px, 22vw, 176px); }
  .py-hero-title.is-product { font-size: clamp(40px, calc(var(--tvw, 11vw) * 1.1), 120px); }

  /* home */
  /* home hero on touch: finish belt → title → copy → stacked CTAs, all centred */
  .hm-hero .py-hero-grid { grid-template-columns: minmax(0, 1fr); row-gap: 16px; padding: 20px 0 8px; }
  .hm-hero .py-hero-copy { display: contents; }
  .hm-hero .kicker { order: 0; text-align: center; }
  .hm-hero .py-hero-title { order: 2; align-items: center; text-align: center; margin: 0; }
  .hm-title .py-title-line { white-space: normal; justify-content: center; }
  /* touch layouts keep the desktop title exactly — same three-line hierarchy (medium / huge / medium accent),
     same letter rise + fill wipe — scaled so every line spans the same width as on desktop */
  .py-hero-title.is-product.hm-title { letter-spacing: -0.01em; }
  .py-hero-title.is-product.hm-title .py-title-line:nth-child(1) { font-size: 92px; }
  .py-hero-title.is-product.hm-title .py-title-line:nth-child(2) { font-size: 173px; }
  .py-hero-title.is-product.hm-title .py-title-line:nth-child(3) { font-size: 94px; }
  .hm-belt { order: 1; position: relative; left: 0; right: auto; top: 0; bottom: auto; width: 100%; height: 340px; margin: 4px 0 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%); }
  .hm-belt::before, .hm-belt::after { width: 14%; }
  .hm-belt-item { height: 300px; }
  .hm-hero .py-hero-sub { order: 3; text-align: center; max-width: 34ch; margin: 4px auto 0; font-size: 17px; }
  .hm-hero .py-hero-desc { order: 4; text-align: center; max-width: 46ch; margin: 0 auto; }
  .hm-hero .py-hero-actions { order: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
  .hm-hero .py-hero-actions .btn { width: 100%; justify-content: center; min-height: 50px; padding: 0 12px !important; font-size: 13px; }
  .hm-hero .py-hero-actions .py-textlink { justify-content: center; min-height: 50px; padding: 0 12px !important; border: 1px solid var(--fg); border-radius: var(--radius); color: var(--fg); font: 600 12px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
  .hm-hero .py-hero-actions .py-textlink:hover { border-color: var(--accent); color: var(--accent); }
  .hm-hero .py-hero-actions .py-textlink svg { width: 14px; height: 14px; }
  .hm-lines { grid-template-columns: 1fr; gap: 14px; }
  .hm-line { min-height: 170px; }
  .hm-story { grid-template-columns: 1fr; gap: 24px; }
  .hm-story-video { min-height: 0; aspect-ratio: 16 / 9; }
  .hm-videos { grid-template-columns: 1fr; gap: 16px; }
  .hm-gallery { grid-template-columns: 1fr; }
  .hm-gallery-main { aspect-ratio: 4 / 3; }
  .hm-gallery-side { height: auto; }
  .hm-gallery-thumbs { position: static; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; overflow: visible; }
  .hm-thumb { aspect-ratio: 4 / 3; }
  .hm-nl { width: 100%; }
  .hm-nl input { flex: 1 1 200px; min-width: 0; }

  /* shotguns accordion */
  .ac-item.is-open .ac-body { overflow: hidden; }
  .ac-bar { grid-template-columns: 32px minmax(0, 1fr) auto 34px; gap: 14px; min-height: 52px; }
  /* series titles: Barlow Condensed 500 in every state (the inline font-weight set on desktop is overridden here);
     closed rows are pinned to one identical style so a row that was just closed can't keep any residue of its open state */
  .ac-name { font-weight: 500 !important; letter-spacing: -0.01em; margin-left: -0.02em; transition: none; }
  .ac-name .py-ch { transform: none; animation: none; -webkit-text-stroke: 0; background-size: 0% 100%; transition: color var(--transition); }
  .ac-item.is-open .ac-bar { grid-template-columns: 0px minmax(0, 1fr) auto 34px; min-height: 68px; }
  .ac-item.is-open .ac-name { font-size: clamp(36px, 7vw, 60px); letter-spacing: 0.6724px; margin-left: calc(-14px - 0.02em); }
  .ac-thumbs { display: none; }
  .ac-stats { display: none; } /* key specs are on each model's Details page */
  .ac-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 20px; padding: 6px 0 18px; }
  .ac-center { grid-column: 1 / -1; order: -1; }
  .ac-stage { min-height: 0; aspect-ratio: 2.2 / 1; max-height: 340px; }
  /* CR-1 / CR-2 renders carry more empty margin than CR-3 — scale them so all three start and end where CR-3 does */
  #bullpup .ac-stage img[data-model="cr-1"] { transform: scale(1.16); }
  #bullpup .ac-stage img[data-model="cr-1"].active { transform: scale(1.21); }
  #bullpup .ac-stage img[data-model="cr-2"] { transform: translateX(-5px) scale(1.08); }
  #bullpup .ac-stage img[data-model="cr-2"].active { transform: translateX(-5px) scale(1.12); }
  .ac-stage img { left: 0; top: 0; width: 100%; height: 100%; object-position: 50% 50%; }
  .ac-copy { justify-content: flex-start; }
  .ac-sub { width: auto !important; max-width: 100% !important; margin-right: 0 !important; } /* desktop-only inline widths on the series copy must not widen the panel on touch layouts */
  .ac-models { align-self: start; }

  /* product pages */
  .py-hero.is-shotgun .py-hero-grid { grid-template-columns: minmax(0, 1fr); padding: 24px 0 8px; }
  .py-hero.is-shotgun .py-hero-copy { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .py-hero.is-shotgun .py-hero-lede { grid-column: 1; justify-self: start; text-align: left; display: flex; flex-direction: column; gap: 12px; padding-top: 0; max-width: none; }
  .py-hero.is-shotgun .py-hero-lede .py-hero-sub, .py-hero.is-shotgun .py-hero-lede .py-hero-desc { align-self: stretch; margin: 0; }
  .py-hero.is-shotgun .py-stage { position: relative; left: auto; top: auto; transform: none; width: 100%; height: auto; aspect-ratio: 16 / 9; pointer-events: auto; order: 1; margin: 4px 0 8px; }
  .py-hero.is-shotgun .py-stage img { position: absolute; inset: 0; width: 100%; height: 100%; top: 0; left: 0; transform: none; object-fit: contain; }
  .py-hero.is-shotgun .py-stage img.active { transform: none; }
  .py-hero.is-rifles .py-stage { order: -1; margin: 0 0 8px; } /* rifles: image first as well; shotgun product pages keep the copy first */
  /* product detail pages: title one weight lighter; main image framed exactly like the shotguns.html series stage
     (same 2.2:1 band, same 340px cap, same per-model corrections for the CR-1 / CR-2 renders) */
  .py-hero.is-shotgun:not(.is-rifles) .py-hero-title.is-product { font-weight: 600; }
  .py-hero.is-shotgun:not(.is-rifles):has(.py-hero-finishes) .py-stage { aspect-ratio: 2.2 / 1; max-height: 340px; }
  .py-hero.is-shotgun[data-model="cr-1"] .py-stage img, .py-hero.is-shotgun[data-model="cr-1"] .py-stage img.active { transform: scale(1.21); }
  .py-hero.is-shotgun[data-model="cr-2"] .py-stage img, .py-hero.is-shotgun[data-model="cr-2"] .py-stage img.active { transform: translateX(-5px) scale(1.12); }
  .py-hero.is-shotgun .py-hero-row { margin-top: 0; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .py-hero-finishes, .py-hero-specs { max-width: none; justify-self: stretch; }
  .py-sheet { grid-template-columns: 1fr; gap: 20px; }
  .py-sheet .py-model-visual { min-height: 0; aspect-ratio: 16 / 10; height: auto; }
  .py-eng-grid { grid-template-columns: 1fr; gap: 28px; }
  .py-series-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* pistols */
  .py-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 0 24px; }
  .py-stage { order: -1; aspect-ratio: 4 / 3; } /* pistols: product image first, before the copy */
  /* pistols hero copy on touch: title → sub → CR9/CP9 switch → stats → description → actions */
  .py-hero:not(.is-shotgun):not(.hm-hero) .py-hero-copy > .py-hero-title { order: 0; }
  .py-hero:not(.is-shotgun):not(.hm-hero) .py-hero-copy > .py-hero-sub { order: 1; }
  .py-hero:not(.is-shotgun):not(.hm-hero) .py-hero-copy > .py-switch { order: 2; }
  .py-hero:not(.is-shotgun):not(.hm-hero) .py-hero-copy > .py-hero-stats { order: 3; }
  .py-hero:not(.is-shotgun):not(.hm-hero) .py-hero-copy > .py-hero-desc { order: 4; }
  .py-hero:not(.is-shotgun):not(.hm-hero) .py-hero-copy > .py-hero-actions { order: 5; }
  /* copy spans the full column and is justified edge to edge instead of a ragged 460px measure */
  .py-hero:not(.is-shotgun):not(.hm-hero) .py-hero-copy > .py-hero-sub,
  .py-hero:not(.is-shotgun):not(.hm-hero) .py-hero-copy > .py-hero-desc { max-width: none; width: 100%; text-align: justify; }
  .py-hero:not(.is-shotgun):not(.hm-hero) .py-hero-copy > .py-hero-sub { text-align: left; } /* two-line display sentence: justifying it opens ugly gaps on the first line */
  .py-models, .py-models-3 { grid-template-columns: 1fr; }
  .py-bench-score { grid-template-columns: 1fr; }
  .py-finishes { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* corporate / contact one-screen layouts become stacked pages */
  .co-top { grid-template-columns: minmax(0, 1fr); }
  .py-hero-title.is-product.co-title, .py-hero-title.is-product.ct-title { font-size: clamp(44px, 9vw, 92px); }
  .co-title .py-title-line, .ct-title .py-title-line { white-space: normal; }
  .co-mid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .co-video { aspect-ratio: 16 / 9; min-height: 0; }
  .co-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ct-mid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ct-map { flex: none; aspect-ratio: 16 / 9; min-height: 220px; }
  .ct-form { padding: 22px; }
}

/* ---------- PHONE (≤600px) ---------- */
@media (max-width: 600px) {
  .py-wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .py-section { padding: 44px 0; }
  .py-cta { padding: 28px 20px; }
  .py-cta .heading-2 { font-size: clamp(26px, 8vw, 34px); }
  .py-cta-actions { flex-direction: column; align-items: stretch; }
  .py-cta-actions .btn { width: 100%; justify-content: center; }
  .btn { white-space: normal; }

  /* fluid display type */
  .py-hero-title.is-product.hm-title { font-size: clamp(38px, 11vw, 52px); }
  .py-hero-title.is-swap { font-size: clamp(80px, 28vw, 120px); }
  .py-hero-title.is-product { font-size: clamp(36px, calc(var(--tvw, 11vw) * 1.6), 72px); }
  .heading-2 { font-size: clamp(28px, 8vw, 40px); }
  .py-hero-sub { font-size: 16px; }

  /* home — title 30px higher (cancels the inline grid margin), belt items +25% */
  .hm-hero .py-hero-grid { margin-top: 0 !important; }
  .hm-belt { height: 335px; }
  .hm-belt-item { height: 298px; }
  .hm-hero .py-hero-actions { grid-template-columns: 1fr; }
  .hm-line { grid-template-columns: 1fr; min-height: 0; }
  .hm-line-visual { aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--border); }
  .hm-line-visual img { padding: 6% 8%; }
  .hm-line-body { padding: 16px 18px 18px; }
  .hm-line-body h3 { font-size: 28px; }
  .hm-ticker-item { padding: 10px 16px; font-size: 11px; }
  .hm-gallery-thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-gallery-arrow { width: 40px; height: 40px; }
  .hm-nl { flex-direction: column; gap: 8px; }
  .hm-nl input { flex: 0 0 auto; width: 100%; min-height: 46px; padding: 0 14px; font-size: 14px; }
  .hm-nl .btn { width: 100%; justify-content: center; min-height: 46px; padding: 0 20px; }
  .hm-nl-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11px; }
  .py-hero-title.is-product.hm-title .py-title-line:nth-child(1) { font-size: 17vw; }
  .py-hero-title.is-product.hm-title .py-title-line:nth-child(2) { font-size: 32vw; }
  .py-hero-title.is-product.hm-title .py-title-line:nth-child(3) { font-size: 17.4vw; }

  /* shotguns accordion */
  /* phone: the whole accordion (open panel + six closed rows) fits one ~840px screen, so every series row stays reachable without scrolling */
  .ac-bar { grid-template-columns: 28px minmax(0, 1fr) 34px; gap: 10px; min-height: 46px; }
  .ac-name { font-size: 22px; }
  .ac-meta { display: none; }
  .ac-item.is-open .ac-bar { grid-template-columns: 0px minmax(0, 1fr) 34px; min-height: 56px; }
  .ac-item.is-open .ac-name { font-size: clamp(30px, 8.4vw, 36px); margin-left: calc(-10px - 0.02em); }
  .ac-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 2px 0 14px; }
  .ac-item, .ac-panel, .ac-body, .ac-grid, .ac-center, .ac-copy, .ac-models, .ac-stage { min-width: 0; max-width: 100%; }
  .ac-stage { aspect-ratio: 2.2 / 1; }
  .ac-copy { gap: 6px; padding-top: 0; }
  .ac-sub { margin-right: 0; font-size: 13px; line-height: 1.4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* full copy lives on the Details page */
  .ac-actions { margin-top: 2px; padding-top: 0; }
  .ac-actions .btn { min-height: 44px; }
  .ac-models { gap: 6px; }
  .ac-switch { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; gap: 8px; padding-bottom: 4px; margin: 0 -16px; padding-left: 16px; padding-right: 16px; scrollbar-width: none; } /* one swipeable row instead of a stack — Pump Action has nine models */
  .ac-switch::-webkit-scrollbar { display: none; }
  .ac-switch button { flex: 0 0 auto; width: auto; min-width: 150px; min-height: 44px; scroll-snap-align: start; grid-template-columns: 44px minmax(0, 1fr); }
  .ac-switch .py-sw-thumb { width: 44px; height: 28px; }
  .ac-switch button strong { font-size: 15px; }

  /* hero cards / stats */
  .py-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .py-switch { grid-template-columns: 1fr; }
  .py-switch.is-series, .py-switch.is-variants.has-3, .py-switch.is-variants.has-many, .py-hero.is-shotgun .py-switch { grid-template-columns: 1fr; }
  .py-hero.is-shotgun .py-switch button, .py-hero.is-shotgun .py-switch .py-sw-link { grid-template-columns: 84px 1fr auto; }
  .py-hero.is-shotgun .py-sw-thumb { width: 84px; height: 40px; }
  /* spec sheets (product pages) stack to one column with rules; the flat card grids stay two-up without rules */
  /* product spec sheet: flat two-column list like the rifles.html lineup cards — no frame, no cell borders, no fill */
  .py-sheet .py-specs.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); border: 0; border-radius: 0; background: transparent; overflow: visible; column-gap: 16px; row-gap: 14px; }
  .py-sheet .py-specs.is-two .py-spec { border: 0 !important; background: transparent; padding: 0; }
  .py-sheet .py-specs.is-two .py-spec-value { font-size: 17px; }
  .py-model .py-specs:not(.is-two), .py-models-3 .py-specs.is-two { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 12px; }
  .py-model .py-specs .py-spec { border: 0; padding: 0; }
  .py-model-foot { flex-direction: column; align-items: flex-start; gap: 4px; }
  body:has(.py-hero.is-rifles) .py-model-body { padding-left: 14px; padding-right: 14px; } /* rifles lineup cards only */
  .py-hero.is-rifles .py-hero-title .py-title-word { font-weight: 500 !important; } /* RIFLES / LEVER ACTION — inline 600 set on desktop */
  .py-model-foot .link { white-space: nowrap; padding: 8px 0; }
  .py-fact { grid-template-columns: 32px 1fr; gap: 12px; padding: 18px 0; }
  .py-filter { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 6px; max-width: 100%; }
  .py-filter button { white-space: nowrap; flex: 0 0 auto; }
  .py-hero.is-shotgun .py-switch.is-variants, .py-hero.is-shotgun .py-switch.is-series, .py-hero.is-shotgun .py-switch.is-variants.has-3, .py-hero.is-shotgun .py-switch.is-variants.has-many { grid-template-columns: 1fr; }
  .py-stage-tag { left: auto; right: 4%; bottom: 4%; top: auto; transform: none; }
  /* product detail heroes (shotgun + rifle models) on phones: image → title → key specs → finishes → copy → actions.
     copy and row wrappers are flattened into the single-column hero grid so every block can be ordered on its own */
  .py-hero.is-shotgun:not(.is-rifles):has(.py-hero-finishes) .py-hero-grid { row-gap: 18px; padding-top: 12px; }
  .py-hero.is-shotgun:not(.is-rifles):has(.py-hero-finishes) .py-hero-copy,
  .py-hero.is-shotgun:not(.is-rifles):has(.py-hero-finishes) .py-hero-row { display: contents; }
  .py-hero.is-shotgun:not(.is-rifles):has(.py-hero-finishes) .py-stage { order: 0; margin: 0; }
  .py-hero.is-shotgun:not(.is-rifles):has(.py-hero-finishes) .py-hero-title { order: 1; }
  .py-hero.is-shotgun:not(.is-rifles):has(.py-hero-finishes) .py-hero-specs { order: 2; }
  .py-hero.is-shotgun:not(.is-rifles):has(.py-hero-finishes) .py-hero-finishes { order: 3; }
  .py-hero.is-shotgun:not(.is-rifles):has(.py-hero-finishes) .py-hero-lede { order: 4; }
  .py-hero.is-shotgun:not(.is-rifles):has(.py-hero-finishes) .py-hero-actions { order: 5; }
  /* benchmark table: fixed layout so three columns always fit the phone width */
  .py-bench table { table-layout: fixed; width: 100%; }
  .py-bench thead th { padding: 14px 10px; font-size: 11px; letter-spacing: 0.04em; }
  .py-bench thead th:first-child { width: 34% !important; padding-left: 14px !important; }
  .py-bench thead th small { font-size: 9px; margin-top: 4px; }
  .py-bench tr.cat td { padding: 16px 10px 6px 14px !important; font-size: 10px; }
  .py-bench tr.row td { padding: 11px 10px; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; }
  .py-bench tr.row td:first-child { padding-left: 14px !important; }
  .py-cmp-switch { display: flex; flex-wrap: wrap; }
  .py-cmp-switch button { flex: 1 1 auto; min-height: 44px; }
  .py-series-grid { grid-template-columns: 1fr; }
  .py-finishes { grid-template-columns: 1fr; }
  .py-dim-viewer { padding: 8px; }
  .py-tabs { width: 100%; }
  .py-tab { flex: 1; padding: 10px 8px; }

  /* corporate / contact */
  .py-hero-title.is-product.co-title, .py-hero-title.is-product.ct-title { font-size: clamp(36px, 11vw, 52px); }
  .ct-row { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; }
  .ct-form .ct-grid { grid-template-columns: 1fr; }
  .ct-form .ct-actions { flex-direction: column; align-items: stretch; }
  .ct-form .ct-actions .btn { width: 100%; justify-content: center; }
  .ct-meta { flex-direction: column; align-items: flex-start; }
  .py-chips { flex: 1 1 100%; }
  .py-jump { width: 100%; }
}

/* ---------- SMALL PHONES (≤400px) ---------- */
@media (max-width: 400px) {
  .py-hero-title.is-swap { font-size: clamp(72px, 26vw, 100px); }
  .hm-belt { height: 290px; }
  .hm-belt-item { height: 250px; }
  .py-hero-stats { grid-template-columns: 1fr 1fr; gap: 12px; }
}