/* Home page, wave 3: responsive pass for 320 to 1920. Scoped to .home and the .hx / .hm-* sections.
   Builds on 10-home.css (layout) and 20-home.css (touch). Only fixes and refinements live here. */

/* ---------- guards: nothing on the home page may push the page sideways ---------- */
.home .hx, .home .hm-sec { overflow-x: clip; }
.hx-inner > *, .hm-head, .hm-factory > *, .hm-custom > * { min-width: 0; }
.hx-title, .hm-head .display { overflow-wrap: break-word; text-wrap: balance; }
.hx-lede, .hm-head .lede, .hx-board-foot, .hm-demo-label { text-wrap: pretty; }
.hm-steps img, .hm-why .media img, .hx-board-grid img { max-width: 100%; }
.hm-why .media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* Tap targets: proof links, chain links and the pricing link reach 44px on touch screens. */
.home .more-link a { min-height: 44px; }
@media (pointer: coarse) {
  .hx-proof { gap: 0 16px; }
  .hx-proof a { min-height: 44px; }
  .hm-chain tbody th, .hm-chain td { padding-block: 0; }
  .hm-chain tbody th a { display: inline-flex; align-items: center; min-height: 48px; padding-block: 0; }
  .hm-chain td { padding-block: 10px; }
}

/* Factory chain: the step number hangs in its own gutter so a long step name never pushes it onto a separate line. */
.hm-chain tbody th { position: relative; padding-left: 30px; }
.hm-chain tbody th span { position: absolute; left: 0; top: 50%; width: auto; transform: translateY(-50%); }

/* ---------- large desktop (1600+): use the width, keep the line lengths ---------- */
@media (min-width: 1600px) {
  .hx { padding-block: 48px 64px; }
  .hx-title { font-size: 3.3rem; }
  .hx-lede { font-size: 1.16rem; }
}

/* ---------- laptop and landscape tablet (901 to 1180) ---------- */
@media (min-width: 901px) and (max-width: 1180px) {
  .hx-title { font-size: clamp(2.05rem, 3.6vw, 2.6rem); }
  .hx-spec dt { font-size: 1.12rem; }
  .hx-spec > div { padding-right: 8px; }
  .hx-spec > div + div { padding-left: 10px; }
  .hx-cell-meta small { display: none; }
}
/* 901 to 1080: the narrower board column keeps all 12 as a 4 x 3 sheet with taller cells. */
@media (min-width: 901px) and (max-width: 1080px) {
  .hx-board-grid a { aspect-ratio: 1 / 1.16; }
  .hx-cell-meta b { font-size: .74rem; }
}

/* ---------- portrait tablet (641 to 900): whole line sheet as a 6 x 2 grid, no swipe needed ---------- */
@media (min-width: 641px) and (max-width: 900px) {
  .hx { padding-block: 28px 44px; }
  .hx-title { font-size: clamp(2.3rem, 5.6vw, 3rem); max-width: 18ch; }
  .hx-lede { font-size: 1.08rem; max-width: 58ch; }
  .hx-board { margin-top: 24px; }
  .hx-board-head { display: flex; border: 1px solid var(--rule-strong); border-bottom: 0; border-radius: 10px 10px 0 0; }
  .hx-board-grid {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible;
    border-radius: 0 0 10px 10px; scroll-snap-type: none; cursor: auto;
  }
  .hx-board-grid li, .hx-board-grid li:nth-child(n+10) { flex: none; display: block; }
  .hx-board-grid a { aspect-ratio: 1 / 1.14; }
  .hx-swipe { display: none; }
  .hx-cta { margin-top: 24px; }
  .hx-spec dd { font-size: .86rem; }
}

/* ---------- phones (up to 640) ---------- */
@media (max-width: 640px) {
  /* Body copy at 16px minimum. */
  .hm-steps p, .hm-basis span, .hm-points span, .hm-custom p, .hm-terms { font-size: 1rem; }
  .hm-head .lede { font-size: 1rem; }
  .hx-board-foot { font-size: .86rem; }
  .hx-spec dd { font-size: .84rem; }
  .hx-proof a { font-size: .72rem; }

  /* Pricing: the tier table fits the screen instead of scrolling sideways. */
  #pricing table.tiers { min-width: 0; }
  #pricing .tiers th, #pricing .tiers td { padding: 12px 10px; }
  #pricing .tiers thead th { white-space: normal; line-height: 1.25; vertical-align: bottom; }
  #pricing .tiers td { font-size: .92rem; }
  #pricing .tier-bar { display: none; }
  #pricing .calc-out b { font-size: 1.3rem; }
  #pricing .qty-row input[type="number"] { font-size: 16px; min-height: 44px; }
  #pricing .seg button { min-height: 44px; }
  .hm-demo-label { line-height: 1.5; }

  /* Factory chain: the place column wraps under narrow widths instead of squeezing the step name. */
  .hm-chain td { width: 42%; line-height: 1.35; }

  .hm-custom-cta .btn { flex: 1 1 220px; justify-content: center; }
}

/* Small phones: hero CTAs share one row, so the button label drops the count (the swipe meter keeps it). */
@media (max-width: 420px) {
  .hx-cta-n { display: none; }
  .hx-cta { gap: 8px; }
  .hx-cta .btn { padding-inline: 10px; gap: 6px; }
  .hx-spec > div { padding-right: 8px; }
  .hx-spec > div:nth-child(even) { padding-left: 10px; }
  .hx-spec dt { font-size: 1.1rem; }
}
@media (max-width: 400px) {
  /* The tier code column repeats the quantity range; drop it so prices stay large. */
  #pricing .tiers th:first-child, #pricing .tiers td.tier-n { display: none; }
  .hm-sports { grid-auto-columns: minmax(132px, 46%); }
}

/* 320 to 360: stacked CTAs, a tighter kicker, two-line steps. */
@media (max-width: 360px) {
  .hx-kicker { font-size: .62rem; letter-spacing: .06em; }
  .hx-title { font-size: 1.72rem; }
  .hx-cta .btn { flex-basis: 100%; }
  .hx-spec dd { font-size: .8rem; }
  .hm-steps li, .hm-steps li + li { grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; }
  .hm-chain tbody th { padding-left: 26px; }
  .hm-chain-filter button { padding-inline: 12px; }
  .hm-custom-cta .btn { flex-basis: 100%; }
}

/* Landscape phones: short viewport, so trim the hero padding and keep the strip compact. */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 900px) {
  .hx { padding-block: 16px 28px; }
  .hx-board-grid li { flex-basis: 118px; }
}