/* ==========================================================================
   HerbXMedica — responsive.css
   Every media query on the site lives in this file, ordered largest first,
   on Woodmart's breakpoints: 1200 / 1024 / 768 / 576.
   ========================================================================== */

/* ==========================================================================
   ≥ 1025px — desktop-only affordances
   ========================================================================== */
@media (min-width: 1025px) {
  :root { --hxm-pad-x: var(--hxm-gutter); }
}

/* ==========================================================================
   ≥ 1400px — the reviews section only
   Off the four site breakpoints on purpose: this is not a device size, it is
   the width at which the quotation column beside the rating rail passes about
   900px and a single column of review text stops being readable. Two columns
   there, and the list stops being twice the height of the rail beside it.
   ========================================================================== */
@media (min-width: 1400px) {
  .hxm-reviewlist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(28px, 3vw, 56px);
  }

  /* Nothing sits under the last row, so its rules come off — two of them in a
     full row, and correctly just the one where the last row is half empty. */
  .hxm-reviewitem:nth-last-child(-n + 2) { border-bottom: 0; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  :root { --hxm-pad-x: 40px; }
}

/* ==========================================================================
   ≤ 1200px
   ========================================================================== */
@media (max-width: 1200px) {
  .hxm-mainbar__inner { gap: 18px; }
  .hxm-search { max-width: 420px; }
  .hxm-nav__link { padding-inline: 11px; }
  .hxm-utils__phone-label,
  .hxm-utils__phone-num { display: none; }
  .hxm-utils__phone { padding: 4px; }

  /* The nav row gets tight before the menu collapses — drop the shipping
     note first and keep the action. */
  .hxm-nav__note { display: none; }
  .hxm-nav__aside { padding-left: 14px; gap: 12px; }

  .hxm-mega { left: auto; right: -15px; }
  .hxm-mega__grid { grid-template-columns: 1fr 1fr 1.1fr; }
  .hxm-mega__promo { display: none; }

  .hxm-footer__main { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; }
  .hxm-footer__main > div:nth-child(4) { grid-column: span 1; }
  .hxm-footer__main > div:last-child { grid-column: span 2; }

  .hxm-ledger__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* --- Shop / product --- */
  .hxm-shop { grid-template-columns: 244px minmax(0, 1fr); gap: 28px; }
  .hxm-single { gap: 32px; }
  .hxm-ingcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hxm-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   ≤ 1024px  — tablet. Nav collapses into the drawer here.
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --hxm-pad-x: 40px;
    --hxm-mainbar-h: 84px;
    --hxm-navbar-h: 0px;              /* the nav row lives in the drawer here */
    --hxm-head-h: calc(var(--hxm-announce-h) + var(--hxm-mainbar-h) + 1px);
  }

  html { scroll-padding-top: 90px; }

  /* Header */
  .hxm-navbar { display: none; }
  .hxm-burger { display: inline-flex; }
  .hxm-mainbar__inner { gap: 14px; }
  .hxm-logo { --hxm-logo-h: 56px; }
  .hxm-header.is-stuck .hxm-mainbar__inner { height: 70px; }
  .hxm-header.is-stuck .hxm-logo { --hxm-logo-h: 46px; }
  .hxm-search { display: none; }
  .hxm-utils__phone { display: none; }

  /* Wishlist and cart are the two controls the client reads first on a phone,
     so they run well above the 28px desktop icon. The button grows with the
     glyph -- at 44px in the 54px desktop box the icon would touch the edges
     and sit under the count badge. */
  .hxm-utils__btn { width: 52px; height: 52px; }
  .hxm-utils__btn svg { width: 34px; height: 34px; }
  .hxm-burger svg { width: 26px; height: 26px; }

  /* The search box was the flex item carrying margin-inline: auto, and a
     display:none element is not a flex item at all -- so once it went the
     icon group packed up against the logo and left the right edge empty.
     Put the auto margin on the group itself. */
  .hxm-utils { margin-left: auto; }

  /* Account has a permanent home in the bottom bar on this breakpoint, and
     two controls for one destination is one too many in a 375px row. */
  .hxm-utils__btn--account { display: none; }

  /* Hero */
  .hxm-hero__slide { min-height: min(66vh, 500px); padding-block: 40px 96px; }
  .hxm-hero__controls { padding-bottom: 24px; }
  .hxm-hero__progress { max-width: 200px; }

  /* Trust */
  .hxm-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 0; }
  .hxm-trust__item { padding: 16px 22px; }
  .hxm-trust__item:nth-child(odd) { border-left: 0; padding-left: 0; }
  .hxm-trust__item:nth-child(-n + 2) { padding-top: 0; }
  .hxm-trust__item:nth-child(n + 3) { border-top: 1px solid var(--hxm-line); padding-bottom: 0; }

  /* Cards and grids */
  .products.hxm-products { --hxm-cols: 3; }
  .hxm-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hxm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hxm-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hxm-posts > li:last-child { grid-column: span 2; }

  /* Ledger */
  .hxm-ledger { grid-template-columns: 1fr; gap: 34px; }
  .hxm-ledger__stage { max-width: 380px; }
  .hxm-ledger__strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* Split banner */
  .hxm-split { grid-template-columns: 1fr; }
  .hxm-split__media { min-height: 400px; order: -1; }
  .hxm-split__media img { position: static; height: 400px; }

  /* Deal */
  .hxm-deal { grid-template-columns: 1fr; gap: 32px; }
  .hxm-deal__media { max-width: 380px; }

  /* Promos */
  .hxm-promos { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .hxm-promo--tall { grid-row: span 1; min-height: 340px; grid-column: span 2; }

  /* Process — three across, then the timeline rewraps cleanly */
  .hxm-process { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
  .hxm-step:nth-child(3)::after { display: none; }

  /* Newsletter */
  .hxm-news { grid-template-columns: 1fr; }

  /* Footer */
  .hxm-footer__main { grid-template-columns: 1fr 1fr 1fr; }
  .hxm-footer__main > div:first-child { grid-column: span 3; }
  .hxm-footer__main > div:last-child { grid-column: span 3; }
  .hxm-footer__news-text,
  .hxm-footer__about { max-width: 52ch; }

  /* Quick view */
  .hxm-qv { grid-template-columns: 1fr; }
  .hxm-qv__media { border-radius: var(--hxm-r-lg) var(--hxm-r-lg) 0 0; aspect-ratio: 16 / 10; }

  /* Floating layer clears the mobile bottom bar */
  .hxm-bottombar { display: block; }
  .hxm-wa { right: 16px; bottom: 76px; width: 52px; height: 52px; }
  .hxm-wa__btn { width: 52px; height: 52px; }
  .hxm-wa__btn svg { width: 27px; height: 27px; }
  .hxm-wacard { width: min(300px, calc(100vw - 32px)); }
  body { padding-bottom: 58px; }

  /* --- Shop --- */
  .hxm-shop { grid-template-columns: minmax(0, 1fr); gap: 0; }
  [data-hxm-sidebar-desktop] { display: none; }
  .hxm-filterbtn { display: inline-flex; }
  .hxm-sidebar { position: static; max-height: none; overflow: visible; padding-right: 0; }
  .hxm-results--list .hxm-product { grid-template-columns: 180px minmax(0, 1fr); }

  /* --- Single product --- */
  .hxm-single { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .woocommerce-product-gallery { position: static; grid-template-columns: minmax(0, 1fr); }
  .hxm-gallery__thumbs { flex-direction: row; order: 2; overflow-x: auto; padding-bottom: 4px; }
  .hxm-gallery__thumb { width: 76px; flex: none; }
  .hxm-gallery__stage { cursor: pointer; }
  .hxm-ingcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hxm-stickybar { top: auto; bottom: 58px; border-bottom: 0; border-top: 1px solid var(--hxm-line); transform: translate3d(0, 120%, 0); }
  .hxm-stickybar__thumb, .hxm-stickybar__meta { display: none; }

  /* --- About / contact --- */
  .hxm-story { grid-template-columns: minmax(0, 1fr); }
  .hxm-gallerygrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hxm-contact { grid-template-columns: minmax(0, 1fr); }

  /* --- Help centre --- */
  /* Answer first, then the list of other topics: the reader arrived here from
     a footer link that already told them which topic they wanted. */
  .hxm-help { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hxm-help__rail { order: 2; }
  .hxm-help__railinner { position: static; }
  .hxm-help__body { max-width: none; }
}

/* ==========================================================================
   ≤ 768px  — large phone / small tablet
   ========================================================================== */
@media (max-width: 768px) {
  :root { --hxm-pad-x: 20px; }

  .hxm-announce__close { right: 2px; }
  .hxm-announce__item { font-size: var(--hxm-fs-label-sm); padding-inline: 34px; }

  .hxm-hero__slide { height: auto; min-height: 0; padding-block: 96px 132px; }
  .hxm-hero__actions .hxm-btn { flex: 1 1 100%; }
  .hxm-hero__controls-inner { gap: 14px; }
  .hxm-hero__progress { display: none; }

  .products.hxm-products { --hxm-cols: 2; gap: 16px; }
  .hxm-slider__track { gap: 16px; }
  .hxm-slider__slide { flex-basis: calc((100% - (var(--hxm-per, 1) - 1) * 16px) / var(--hxm-per, 1)); }

  .hxm-product__body { padding: 14px 14px 16px; gap: 6px; }
  .hxm-product__foot { gap: 8px 10px; }
  .hxm-product__rail { opacity: 1; transform: none; }

  .hxm-sec-head { margin-bottom: 28px; }
  .hxm-cats { gap: 16px; }
  .hxm-cat { border-radius: var(--hxm-leaf-arc-sm); }
  .hxm-cat__body { padding: 18px 20px 20px; }
  .hxm-cat__count { opacity: 1; transform: none; }
  .hxm-cat__go { opacity: 1; transform: none; width: 36px; height: 36px; top: 16px; right: 16px; }

  .hxm-ledger__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hxm-ledger__bars { margin-block: 24px; padding-block: 22px; }

  .hxm-promos { grid-template-columns: 1fr; gap: 16px; }
  .hxm-promo--tall { grid-column: span 1; min-height: 300px; }
  .hxm-promo { min-height: 260px; }

  .hxm-stats { gap: 16px; }
  .hxm-stat { padding: 22px 20px; }

  .hxm-posts { grid-template-columns: 1fr; gap: 16px; }
  .hxm-posts > li:last-child { grid-column: span 1; }

  .hxm-countdown__cell { min-width: 64px; }
  .hxm-countdown__num { font-size: var(--hxm-fs-md); padding: 11px 6px; }

  .hxm-news { padding: 28px 22px; }
  .hxm-news__row { flex-direction: column; }
  .hxm-news__submit { width: 100%; }

  .hxm-footer__main { grid-template-columns: 1fr 1fr; gap: 30px 24px; }
  .hxm-footer__main > div:first-child,
  .hxm-footer__main > div:last-child { grid-column: span 2; }
  .hxm-footer__trust { flex-direction: column; align-items: flex-start; }
  .hxm-footer__bottom { flex-direction: column; align-items: flex-start; }

  .hxm-modal { padding: 0; place-items: end center; }
  .hxm-modal__panel { border-radius: var(--hxm-r-lg) var(--hxm-r-lg) 0 0; max-height: 92vh; width: 100%; }

  .hxm-tabs__list { gap: 0 20px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .hxm-tabs__list::-webkit-scrollbar { display: none; }

  /* Process — stacked vertical timeline */
  .hxm-process { grid-template-columns: minmax(0, 1fr); gap: 0; }

  .hxm-step {
    padding: 0 0 30px 74px;
    min-height: 84px;
  }

  .hxm-step__marker { position: absolute; left: 0; top: 0; }

  .hxm-step::after {
    top: 58px;
    left: 26px;
    right: auto;
    width: 2px;
    height: calc(100% - 58px);
  }

  .hxm-step:nth-child(3)::after { display: block; }
  .hxm-step:last-child { padding-bottom: 0; }

  /* --- Shop --- */
  .hxm-toolbar { gap: 12px; }
  .hxm-toolbar__group { width: 100%; justify-content: space-between; }
  .hxm-toolbar .hxm-select { min-width: 0; flex: 1 1 140px; }
  .hxm-results--list .hxm-product { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, so the photo is no longer beside the body and can be square again. */
  .hxm-results--list .hxm-product__media { aspect-ratio: 1 / 1; min-height: 0; }
  .hxm-results--list .hxm-product__body { padding: 16px 18px 20px; }
  .hxm-skeleton { min-height: 300px; }

  /* --- Single product --- */
  .hxm-benefits { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .hxm-benefit { flex-direction: row; align-items: center; gap: 12px; }
  .hxm-ingcards { grid-template-columns: minmax(0, 1fr); }
  .hxm-tabgrid { grid-template-columns: minmax(0, 1fr); }
  .hxm-reviewsummary,
  .hxm-reviews .hxm-reviewsummary { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px; }

  /* The callout drops back under the prose it belongs to. Clearing grid-row
     matters as much as the column: left at 1 it would land on the opening
     paragraph once there is only one column to share. */
  .hxm-tabs__panel--split:has(> .hxm-callout) { grid-template-columns: minmax(0, 1fr); }
  .hxm-tabs__panel--split:has(> .hxm-callout) > .hxm-callout {
    grid-column: 1;
    grid-row: auto;
    margin-block: 20px 0;
  }

  /* Reviews and FAQ: rail above content, in reading order. */
  .hxm-reviews { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .hxm-reviews > .hxm-reviewsummary,
  .hxm-reviews > .hxm-reviewlist__heading,
  .hxm-reviews > .hxm-reviewlist { grid-column: 1; grid-row: auto; }

  .hxm-faq { grid-template-columns: minmax(0, 1fr); }
  .hxm-faq__list > .hxm-acc:first-child > .hxm-acc__summary { padding-top: 20px; }

  .hxm-single__buyrow { grid-template-columns: minmax(0, 1fr); align-items: stretch; }
  .hxm-single__buyrow .hxm-qty { justify-self: start; }
  .hxm-stickybar__inner { gap: 12px; }
  .hxm-stickybar__cta { flex: 1; }

  /* --- About / contact --- */
  /* The quote is the whole section on a phone, so it drops a size and the
     mark shrinks with it. */
  .hxm-founder { gap: 14px; }
  .hxm-founder__mark { width: 52px; height: 52px; }
  .hxm-founder__mark svg { width: 22px; height: 22px; }
  .hxm-founder__quote { font-size: var(--hxm-fs-lg); }
  .hxm-gallerygrid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hxm-team { grid-template-columns: minmax(0, 1fr); }
  .hxm-contact__row { grid-template-columns: minmax(0, 1fr); gap: 14px; }

  /* Forminator lays the contact form out on its own 12-column grid. */
  .hxm-fmtr .forminator-row { gap: 14px; }
  .hxm-fmtr .forminator-col-6 { grid-column: span 12; }
  .hxm-fmtr .forminator-button-submit { width: 100%; }
  .hxm-trustrow { grid-template-columns: minmax(0, 1fr); }
  .hxm-trustrow__item { flex-direction: row; justify-content: flex-start; text-align: left; gap: 12px; padding: 12px 16px; }
}

/* ==========================================================================
   ≤ 576px  — phone
   ========================================================================== */
@media (max-width: 576px) {
  /* The header row is logo + wishlist + cart + burger with nothing to give.
     At the sizes above it clears a 360px screen by about 25px and nothing
     narrower, and a header that overruns its container is what drags the
     fixed WhatsApp button off-screen -- so the whole row steps down one
     notch here rather than at a width nobody will hit. */
  .hxm-logo { --hxm-logo-h: 50px; }
  .hxm-header.is-stuck .hxm-logo { --hxm-logo-h: 42px; }
  .hxm-utils__btn { width: 46px; height: 46px; }
  .hxm-utils__btn svg { width: 30px; height: 30px; }
  .hxm-burger { width: 40px; }

  .hxm-hero__slide { padding-block: 80px 124px; }
  .hxm-hero__stat { margin-top: 30px; padding-top: 18px; }

  .products.hxm-products { --hxm-cols: 1; }
  .woocommerce-loop-product__title { min-height: 0; }

  .hxm-cats { grid-template-columns: 1fr; }
  .hxm-stats { grid-template-columns: 1fr; }
  .hxm-trust__list { grid-template-columns: 1fr; }
  .hxm-trust__item { border-left: 0; padding: 14px 0; border-top: 1px solid var(--hxm-line); }
  .hxm-trust__item:first-child { border-top: 0; padding-top: 0; }

  .hxm-ledger__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hxm-ledger__tab { padding: 12px 8px 14px; }
  .hxm-ledger__tab-img { width: 46px; height: 46px; }

  .hxm-review { padding: 24px 22px; }
  .hxm-review__tags { margin-left: 0; align-items: flex-start; width: 100%; }
  .hxm-review__product { text-align: left; }

  .hxm-countdown { gap: 6px; }
  .hxm-countdown__cell { min-width: 0; flex: 1; }
  .hxm-countdown__sep { padding-bottom: 26px; }

  .hxm-marquee__item,
  .hxm-marquee__item img { height: 50px; }
  .hxm-marquee__track { gap: 34px; }

  .hxm-btn { padding-inline: 20px; }
  .hxm-btn--lg { min-height: 52px; padding: 14px 24px; }

  .hxm-toolbar .hxm-select { flex: 1 1 100%; }
  .hxm-viewtoggle { width: 100%; }
  .hxm-viewtoggle__btn { flex: 1; }
  .hxm-pagehead__inner { flex-direction: column; align-items: flex-start; }
  .hxm-404__links .hxm-btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Touch devices — hover-only affordances become permanent
   ========================================================================== */
@media (hover: none) {
  .hxm-product__rail { opacity: 1; transform: none; }

  /* Permanently visible on touch, so they must meet the 44px target size */
  .hxm-product__railbtn { width: 44px; height: 44px; }
  .hxm-product__railbtn svg { width: 19px; height: 19px; }
  .hxm-cat__go,
  .hxm-cat__count { opacity: 1; transform: none; }
  .hxm-btn::before { display: none; }
}

/* ==========================================================================
   Reduced motion — kill everything that moves on its own
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hxm-hero__slide.is-active .hxm-hero__media img { animation: none; transform: none; }
  .hxm-wa__pulse { animation: none; opacity: 0; }
  .hxm-marquee__track { animation: none; flex-wrap: wrap; }
  .hxm-preloader { transition: none; }
  .hxm-countdown__num.is-flip { animation: none; }
  .hxm-skeleton::after { animation: none; }
  [data-parallax] { transform: none; }
}

/* ==========================================================================
   Print
   ========================================================================== */
@media print {
  .hxm-header, .hxm-drawer, .hxm-wa, .hxm-bottombar,
  .hxm-preloader, .hxm-modal, .hxm-cart, .hxm-footer__social { display: none; }
  body { background: var(--hxm-white); padding-top: 0; padding-bottom: 0; }
  .hxm-section { padding-block: 20px; break-inside: avoid; }
}

/* ==========================================================================
   Reference-structure sections
   ========================================================================== */
@media (max-width: 1024px) {
  .hxm-browse { grid-template-columns: minmax(0, 1fr); }
  .hxm-legacy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
  .hxm-shophelp { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .hxm-browse__list { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* The timeline's own phone layout was rewritten when the section moved to
     the About page; it lives at the foot of this file. */
  .hxm-shopcats { gap: 8px; }
  .hxm-shopcat { min-height: 44px; padding: 11px 14px; font-size: var(--hxm-fs-label); }
  .hxm-shophelp__actions .hxm-btn { flex: 1 1 100%; }
}

/* Eight tiles on one row is a desktop luxury. Below 1024 the grid folds to
   4 x 2 and then 2 x 4 — still no scrolling at any width. */
@media (max-width: 1024px) {
  .hxm-ailments { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px 12px; }
}

@media (max-width: 576px) {
  .hxm-ailments { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 10px; }
  .hxm-ailment__disc { width: 84px; height: 84px; }
  .hxm-ailment__disc svg { width: 38px; height: 38px; }
}

/* ==========================================================================
   Homepage sections added 2026-08-31
   category tiles / ingredient wheel / why choose / video picks / assurance
   ========================================================================== */
@media (max-width: 1200px) {
  .hxm-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  /* Two across. Four tracks of the six, still spanning two, and the centring
     rules from sections.css are reset -- a two-wide grid has no short row to
     centre, and leaving them on would push the last tile out of column one. */
  .hxm-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .hxm-tiles__item,
  .hxm-tiles__item:nth-last-child(2):nth-child(3n + 1),
  .hxm-tiles__item:last-child:nth-child(3n + 1) { grid-column: span 2; }

  /* An odd count leaves one tile on the last row: centre it, one track in. */
  .hxm-tiles__item:last-child:nth-child(odd) { grid-column: 2 / span 2; }

  /* The disc leads on a narrow screen — it is the thing the section is for —
     so the copy follows it rather than being pushed off the fold. */
  .hxm-wheelsplit { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hxm-wheel__disc { width: min(100%, 420px); }

  .hxm-assure__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .hxm-tile { padding: 18px; }
  .hxm-tile__go { opacity: 1; transform: none; }

  .hxm-wheel__disc { width: min(100%, 340px); }
  .hxm-wheel__herb { width: 26%; margin-top: 6%; }
  .hxm-wheel__core { width: 36%; }
  .hxm-wheel__chip { width: 64px; }
  .hxm-wheel__chip img { width: 40px; height: 40px; }

  .hxm-reasons { grid-template-columns: minmax(0, 1fr); }
  .hxm-reason__mark { width: 44px; height: 44px; }
  .hxm-reason__mark svg { width: 20px; height: 20px; }

  .hxm-picks { gap: 14px; }
  .hxm-pick__play { width: 52px; height: 52px; }
  .hxm-pick__caption { padding: 26px 12px 12px; }

  .hxm-statband__head { margin-bottom: 22px; }
  .hxm-assure__list { gap: 26px 18px; }
  .hxm-assure__icon { width: 46px; height: 46px; }
}

@media (max-width: 576px) {
  .hxm-tiles { gap: 12px; }
  .hxm-tile__media { aspect-ratio: 1; }

  /* One promise per row below 576 — two columns of centred three-line copy
     is unreadable at 160px each. */
  .hxm-assure__list { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hxm-assure__item { grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; gap: 4px 14px; }
  .hxm-assure__icon { grid-row: 1 / span 2; margin-bottom: 0; }
  .hxm-assure__text { max-width: none; }
}

/* ==========================================================================
   Story timeline on a phone
   Rewritten 2026-08-31 with the section's move to the About page. It was a
   three-column desktop grid folded to one column, which left the rail, the
   dots and the copy on three different left edges. Now the rail, the dots and
   the text share one gutter measured from a single custom property, so they
   cannot drift apart at any width.
   ========================================================================== */
@media (max-width: 768px) {
  .hxm-legacy {
    --hxm-story-gutter: 30px;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-top: 4px;
    padding-left: var(--hxm-story-gutter);
  }

  /* The rail is positioned from the list's own left edge; the dots are
     positioned from the text edge, one gutter to the right of it. Both land
     on the same 6px centre line for any gutter. */
  .hxm-legacy__rail {
    top: 12px;
    /* Stops with the last dot rather than running on past the final
       paragraph, which is what made the line look unattached. */
    bottom: 34px;
    left: 5px;
    right: auto;
    width: 2px;
    height: auto;
  }

  .hxm-legacy__rail i {
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, var(--hxm-leaf-light), var(--hxm-green));
    transform: scaleY(var(--hxm-story-progress, 0));
    transform-origin: center top;
  }

  .hxm-legacy.is-armed .hxm-legacy__rail i { transform: scaleY(var(--hxm-story-progress, 0)); }

  .hxm-legacy__item { padding-top: 0; }

  .hxm-legacy__dot {
    top: 6px;
    left: calc(-1 * var(--hxm-story-gutter));
    box-shadow: 0 0 0 4px var(--hxm-forest);
  }

  /* Vertically the items arrive one after another rather than in rows of
     three, so the horizontal stagger the desktop grid needs is dropped. */
  .hxm-legacy.is-armed .hxm-legacy__item { transform: translate3d(0, 18px, 0); }
  .hxm-legacy__title { margin-block: 8px 6px; }
  .hxm-legacy__year { font-size: var(--hxm-fs-md); }
}

@media (max-width: 576px) {
  .hxm-legacy { --hxm-story-gutter: 26px; gap: 24px; }
}