/* ==========================================================================
   Home. The page layout switches at 1440 / 810 (header, footer and the .t-* type presets switch at 1200 / 810),
   so 1200–1439 shows the tablet layout under the desktop header with desktop type sizes — as the original.
   Elements carrying engine hooks (data-load / -appear / -scroll / -marquee-track) are never given CSS
   translate / scale / rotate: positioning on them uses `transform`.
   ========================================================================== */

@media (max-width: 1439.98px) {
  .page-home .main { padding-top: 138px; }
}

/* ---------- Hero (29 Oct 2026): the range-float scene as the opening picture (hims.com-style) + three category cards
   A dark rounded stage as wide as the page column. The scene fills it (landscape file = float-cluster.py --variant
   hero: the vials right of centre, so the copy has the dark left side; white on deep violet, well above 7:1) and a soft
   left wash keeps the copy clear of the beam. 16:9, never taller than the first screen (then cover crops top and
   bottom, which never moves the vials sideways). It replaced the H1 + email capture | drawer-box render head row. */
.hero { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-bottom: 24px; overflow: hidden; }
.hero__stage {
  position: relative; width: min(calc(100% - 78px), calc(var(--max) - 78px)); aspect-ratio: 16 / 9;
  min-height: 540px; max-height: calc(100svh - 180px); border-radius: 32px; overflow: hidden; isolation: isolate;
  background: #0e0a20; /* the scene's near-black violet, until the poster loads */
  display: flex; align-items: center;
}
.hero__scene { position: absolute; inset: 0; z-index: 0; }
.hero__scene .scene__img, .hero__scene .scene__video { object-position: 50% 50%; }
.hero__stage::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(9, 6, 22, .62) 0%, rgba(9, 6, 22, .38) 30%, rgba(9, 6, 22, 0) 46%);
}
.hero__copy {
  position: relative; z-index: 2; width: 42%; min-width: 0; padding-left: clamp(32px, 4.4vw, 64px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.hero__title { color: var(--white); font-size: clamp(40px, 4.4vw, 63px); text-wrap: balance; }
/* a hyphenated word never breaks at its hyphen ("research-grade") */
.hero__title .nowrap { white-space: nowrap; }
.hero__sub { color: rgba(255, 255, 255, .78); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 24px; }
.hero__btn { width: auto; min-width: 250px; }
.hero__link {
  display: inline-flex; align-items: center; gap: 6px; color: var(--white); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgba(255, 255, 255, .35);
  transition: color .3s var(--ease-btn), text-decoration-color .3s var(--ease-btn);
}
.hero__link-icon { flex: none; transition: transform .3s var(--ease-btn); }
@media (hover: hover) {
  .hero__link:hover { color: #cfc6ff; text-decoration-color: currentColor; }
  .hero__link:hover .hero__link-icon { transform: rotate(45deg); }
}
.hero__trust { margin-top: 20px; }
.hero__trust .trust__item {
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .9);
}
.hero__trust .trust__icon { color: #b8acff; }
.hero__cards {
  width: 100%; max-width: var(--max); padding: 0 39px;
  display: grid; grid-template-columns: repeat(3, minmax(50px, 1fr)); gap: 16px;
}
.hero__card { height: 362px; }

/* ---------- Inner column ---------- */
.home-inner {
  width: 100%; max-width: var(--max); margin-inline: auto; padding: 128px 39px 56px;
  display: flex; flex-direction: column; gap: 160px;
}
.intro { display: flex; flex-direction: column; align-items: center; gap: 56px; }
.intro__body { width: 100%; display: flex; flex-direction: column; }

/* ---------- "Who we are" poster: the drawer-box still; Play fades the clip in inline ---------- */
/* The frame clips square while the media carries the 24px radius: zoomed to 1.1 its corners are cut off, and
   they round as it settles — exactly what the original does. */
.poster {
  position: relative; height: 672px; overflow: hidden; isolation: isolate;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.poster::after { content: ""; position: absolute; inset: 0; z-index: 5; border: 1px solid rgba(255, 255, 255, .1); border-radius: 24px; pointer-events: none; }
.poster__media { position: absolute; inset: 0; overflow: hidden; border-radius: 24px; background: #edf0f4; }
.poster__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 50%; user-select: none; -webkit-user-drag: none; }
.poster__video {
  position: absolute; top: -1.5%; left: -1.5%; z-index: 1; width: 103%; height: 103%; max-width: none;
  object-fit: cover; opacity: 0; transform: scale(1.1); pointer-events: none;
  transition: opacity 1.2s cubic-bezier(.61, .06, 0, .97), transform 1.2s cubic-bezier(.61, .06, 0, .97);
}
.poster.is-playing .poster__video { opacity: 1; transform: scale(1); }

.poster__play {
  position: absolute; top: 50%; left: 49%; z-index: 2; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 24px; height: 68px; padding: 10px 16px; border-radius: 100px;
  background: rgba(255, 255, 255, .15); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  color: var(--ink); white-space: nowrap; transition: gap .4s var(--ease-btn);
}
.poster__play::after, .poster__pause::after {
  content: ""; position: absolute; inset: 0; border: 1px solid rgba(248, 249, 252, .5); border-radius: inherit; pointer-events: none;
}
.poster__play-label { padding-left: 6px; }
.poster__play-icon { width: 48px; height: 48px; border-radius: 100px; display: grid; place-items: center; background: var(--ink); color: var(--white); }
.poster__pause {
  position: absolute; right: 30px; bottom: 30px; z-index: 4; width: 53px; height: 53px; border-radius: 100px;
  display: grid; place-items: center; color: var(--ink);
  background: rgba(255, 255, 255, .15); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  visibility: hidden; opacity: 0;
}
.poster.is-playing .poster__play { visibility: hidden; opacity: 0; }
.poster.is-playing .poster__pause { visibility: visible; opacity: 1; }
@media (hover: hover) {
  .poster__play:hover { gap: 40px; }
  .poster:not(.is-playing):hover .poster__video { transform: scale(1.3); }
}

/* ---------- Scroll-reveal paragraph + "More about" ---------- */
.reveal { display: flex; padding: 160px 56px 140px; }
.reveal__col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 56px; } /* 56 at every width */
.reveal__text { width: 100%; }

/* ---------- Bento ---------- */
.bento {
  display: flex; flex-direction: column; gap: 16px; padding: 56px; border-radius: 24px;
  background: linear-gradient(180deg, #f8f9fc 0%, #fff 11.7117%, #f8f9fc 60.1598%, #fff 86.0712%, #f8f9fc 100%);
}
/* Wide card: pipette entering from the top edge above a test tube rising from the bottom, both in 502px boxes on the
   card's vertical centre axis (object-fit: contain), as the original. */
.bento__wide {
  position: relative; z-index: 1; height: 473px; padding: 56px 20px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.bento__bg {
  position: absolute; inset: 0; z-index: 0; border-radius: 24px; border: 1px solid var(--glass-border);
  background: radial-gradient(50% 50% at 50% 50%, #fff 0%, #f9fafc 36.5885%, #f2f5fa 100%);
}
.bento__col { position: relative; flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.bento__col--text { max-width: 80%; }
.bento__wide-title { text-wrap: balance; }
.bento__wide-text { max-width: 50%; text-wrap: balance; }
.bento__obj {
  position: absolute; left: 50%; z-index: 1; width: 502px; height: 502px; max-width: none; object-fit: contain;
  transform: translateX(-50%); pointer-events: none; user-select: none; -webkit-user-drag: none;
}
.bento__obj--top { top: -182px; }
.bento__obj--bottom { bottom: -214px; }

.bento__row { display: flex; gap: 16px; height: 317px; overflow: clip; }
.bento__card {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
  padding: 56px 20px; border-radius: 24px; overflow: hidden; text-align: center;
}
.bento__card::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 1px solid var(--glass-border); border-radius: inherit; pointer-events: none; }
.bento__card--a {
  flex: 1 0 0; min-width: 0; justify-content: flex-start;
  background: radial-gradient(50% 50% at 50% 50%, #fff 0%, #fafafc 45.0169%, #f2f5fa 100%);
}
.bento__card--b {
  flex: 0 0 calc((100% - 56px) / 2); min-width: 0; justify-content: space-between; padding: 56px 20px 20px;
  background: radial-gradient(50% 50% at 50% 50%, #fff 0%, #fafafc 56.5843%, #f2f5fa 100%);
}
.bento__content { position: relative; z-index: 1; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.bento__title { max-width: 320px; text-wrap: balance; }
.bento__sparkle { flex: none; width: 50px; height: 50px; color: var(--accent); overflow: visible; }
.bento__sub { text-wrap: balance; }
.bento__sub--a { max-width: 72%; }
.bento__sub--b { max-width: 56%; }  /* 80% × 70% */
.bento__btn { flex: none; }

/* Tag marquee: one row of outline pills under the copy (in flow, so it can never sit behind the text), bleeding past
   the card's side padding and fading out at both ends. */
.bento__tags {
  position: relative; z-index: 0; flex: none; width: calc(100% + 40px); height: 29px; margin: auto -20px 0;
  overflow: clip; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}
.bento__tags-track { gap: 16px; }
/* legible on the card's pale centre: white pill, hairline border, secondary ink */
.bento__tags .pill--outline { background: var(--white); color: var(--ink-2); }
.bento__tags .pill--outline::after { border-color: var(--glass-border); }
.bento__card--a { padding: 48px 20px 28px; gap: 24px; }
.bento__card--a .bento__content { gap: 22px; }

/* ---------- Banner: wordmark + quote | the powder-settle scene in a dark inset panel (see the end of the banner rules) ---------- */
.banner-wrap { padding-top: 160px; overflow: clip; }
.banner {
  position: relative; display: flex; align-items: center; padding: 16px 16px 16px 56px; border-radius: 24px;
  background: radial-gradient(50% 50% at 50% 50%, #fff 0%, #f9fafc 36.5885%, #f2f5fa 100%);
}
.banner__details { flex: none; width: 55%; display: flex; flex-direction: column; align-items: flex-start; gap: 56px; padding: 96px 0; }
/* The original shows the wordmark alone (155×32 box, glyphs ~18px tall). */
.banner__mark { height: 32px; align-items: center; }
.banner__mark .logo__mark { display: none; }
.banner__mark .logo__word { top: 0; margin: 0; font-size: 25.2px; }
.banner__title { width: 100%; max-width: 500px; }
.banner__visual { position: relative; flex: 1 0 0; min-width: 0; align-self: stretch; border-radius: 12px; }

/* =========================== Tablet layout (810–1439.98) =========================== */
@media (max-width: 1439.98px) {
  .hero { gap: 35px; }
  .hero__stage { width: calc(100% - 64px); min-height: 460px; border-radius: 28px; }
  /* Framer quirk: only the first card uses the "Tablet" image rule (full card width, sitting lower). */
  .hero__card:first-child .ccard__img { left: 0; right: 0; top: 217.2px; }

  .home-inner { padding: 100px 32px 45px; gap: 100px; }
  .intro { gap: 45px; }

  .bento { gap: 10px; }
  .bento__wide { height: 386px; gap: 24px; }
  /* The title column shrinks to 200 at the card's start (wider only if the word needs it, so it never runs
     to the card edge at 1200–1439 where the desktop type size applies). */
  .bento__col--title { max-width: 200px; min-width: max-content; margin-right: auto; }
  /* The original parks its sub-line behind the tube here (a Framer layout bug). The sub-line instead starts
     just clear of the tube's right edge, on the same vertical centre. */
  .bento__col--text {
    position: absolute; z-index: 2; top: 0; bottom: 0; left: calc(50% + 111px); right: 20px; max-width: none;
    justify-content: center; align-items: flex-start;
  }
  .bento__wide-text { max-width: 298px; }
  .bento__title { max-width: 200px; }
  /* The original grows the cards to 386 inside the 317 row, which clips their rounded corners and borders (a
     Framer bug). The cards fit the row instead; content stays centred and the tag rows keep their visible
     positions, so everything inside reads exactly as before. */
  .bento__row { align-items: center; }
  .bento__card { flex-shrink: 0; height: 100%; justify-content: center; gap: 24px; }
  .bento__card--a { justify-content: space-between; padding: 40px 20px 24px; }
  .bento__card--a .bento__sparkle { display: none; }

  .banner { gap: 45px; padding: 32px 0 32px 32px; }
  .banner__details { gap: 60px; padding: 45px 0; }
  .banner__title { max-width: 100%; }
}

/* =========================== Phone (≤809.98) =========================== */
@media (max-width: 809.98px) {
  /* Phone: the centred 4:5 reframe (its own file) on top, the picture first; its foot fades into the stage's dark,
     where the copy sits. */
  .hero { gap: 0; padding-bottom: 35px; }
  .hero__stage {
    width: calc(100% - 40px); aspect-ratio: auto; min-height: 0; max-height: none; border-radius: 24px;
    flex-direction: column; align-items: stretch;
  }
  .hero__stage::before { display: none; }
  .hero__copy { width: auto; padding: 0 24px 32px; gap: 12px; }
  .hero__title { font-size: 40px; }
  .hero__actions { flex-direction: column; align-items: stretch; gap: 18px; margin-top: 20px; }
  .hero__btn { width: 100%; min-width: 0; }
  .hero__link { align-self: flex-start; }
  .hero__scene {
    position: relative; inset: auto; height: auto; aspect-ratio: 4 / 5; margin-bottom: -40px;
    -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%);
  }
  .hero__cards { grid-template-columns: minmax(50px, 1fr); padding: 70px 20px 35px; }
  .hero__card:first-child .ccard__img { left: 53px; right: 53px; top: 50%; }
  /* Each card takes its "hover look" while at least half of it is in view (data-inview; tablet does not). */
  .hero__card.is-inview { filter: brightness(1.02); }
  .hero__card.is-inview .ccard__img--rest { opacity: 0; }
  .hero__card.is-inview .ccard__img--hover { opacity: 1; transform: translateY(-50%) scale(1); }
  .hero__card.is-inview .ccard__title { color: var(--ink); }
  .hero__card.is-inview .ccard__plus { color: var(--accent); transform: rotate(90deg); }

  .home-inner { padding: 70px 20px 35px; gap: 100px; }
  .intro { gap: 35px; }
  .poster { height: 370px; }

  .reveal { padding: 70px 0; }

  .bento { padding: 20px; gap: 16px; }
  .bento__wide { flex-direction: column; justify-content: flex-start; height: 350px; gap: 24px; }
  .bento__col { flex: none; width: 100%; }
  .bento__col--title { max-width: 200px; min-width: 0; margin-right: 0; }
  .bento__col--text { position: relative; top: auto; bottom: auto; left: auto; right: auto; justify-content: flex-start; align-items: center; }
  .bento__wide-text { max-width: min(28ch, 100%); } /* 50% gave a 5-line, 14-character column over the moving chain */
  /* Phone: the pipette dims behind the centred text; the tube shrinks to rise from the bottom edge (responsive.md §9). */
  .bento__obj--top { top: -78px; width: 426px; height: 426px; opacity: .54; }
  .bento__obj--bottom { bottom: -130px; width: 248px; height: 248px; }
  .bento__row { flex-direction: column; height: auto; }
  .bento__card, .bento__card--b { flex: none; width: 100%; height: 350px; }
  .bento__card--a { justify-content: space-between; padding: 48px 20px 28px; }
  .bento__card--a .bento__sparkle { display: block; }
  .bento__sub--a, .bento__sub--b { max-width: 86%; }
  .bento__btn { height: 32px; padding: 6px 24px; font-size: 15px; }
  .bento__btn .btn__icon, .bento__btn .btn__icon svg { width: 20px; height: 20px; }

  /* no bottom padding: the banner closes "Who we are" and the FAQ follows at the page's own 100 px section gap
     (the old 35 px here spaced it from the removed Featured rows, leaving 135 px) */
  .banner-wrap { padding: 70px 0 0; }
  .banner { flex-direction: column; gap: 0; padding: 30px 20px; }
  .banner__details { order: 1; width: 100%; gap: 40px; padding: 20px 0 0; }
  .banner__visual { order: 0; flex: none; width: 100%; height: 460px; align-self: auto; }
}

/* ---------- Banner scene: powder-settle (render/scenes4, 15 Oct 2026; replaced chemical-glow, which had replaced the
   seven-vial lineup render) ----------
   A dark rounded panel inset in the pale card (16px; 12px on phone): the wordmark and title keep the light side in
   their own ink, so the text and its colours are unchanged, and the panel reads as the card's second half (like the
   About Quality figure). Desktop: text 55% | panel, card height unchanged (the details' padding takes up the 40px
   the card's own padding gave back). Below 1440 the panel stacks above the heading at the card's full width, 2:1
   (the vial's full width in frame); phone: the 4:5 reframe cropped square. The macro is framed centred at every width
   (the falling powder in the middle, the vial wall and label edge either side); underlay = the scene's own dark
   violet. No scroll transform (the lineup's parallax would slide the panel off its inset). */
.banner__visual--scene { overflow: hidden; background: #120838; }
.banner__scene { position: absolute; inset: 0; }
.banner__scene .scene__img, .banner__scene .scene__video { object-position: 50% 50%; }
@media (max-width: 1439.98px) {
  .banner { flex-direction: column; align-items: stretch; gap: 32px; padding: 16px 16px 48px; }
  .banner__visual--scene { order: 0; flex: none; width: 100%; height: auto; aspect-ratio: 2 / 1; align-self: auto; }
  .banner__details { order: 1; width: 100%; padding: 0 16px; gap: 40px; }
  .banner__title { max-width: 720px; }
}
@media (max-width: 809.98px) {
  .banner { padding: 12px 12px 32px; gap: 24px; }
  .banner__visual--scene { aspect-ratio: 1 / 1; }
  .banner__details { padding: 0 8px; gap: 32px; }
}
/* Category cards with product turntables: the tablet cards are narrow and tall, so the vial takes more of the box. */
@media (min-width: 810px) and (max-width: 1439.98px) {
  .hero__card.ccard--spin { --ccard-spin: 100%; }
}

/* Home category cards: the vial stands ~70% of the card at every width (it was ~45% on phone). The turntable box is
   sized by the card's height (84%), centred a little below the title row. */
.hero__card.ccard--spin .ccard__img, .hero__card.ccard--spin:first-child .ccard__img {
  left: 0; right: 0; top: 54%; height: 84%; aspect-ratio: auto;
}
.hero__card.ccard--spin .ccard__spin { width: auto; height: 100%; }


/* ---------- Violet pass (2026-10-13) ----------
   The poster's play disc is violet; on phones the in-view category card shows the same violet hairline frame as a
   hovered one. (The hero link's violet underline went with the 29 Oct hero: it now sits on the dark stage.) */
.poster__play-icon { background: var(--accent); transition: background-color .4s var(--ease-btn); }
@media (hover: hover) { .poster__play:hover .poster__play-icon { background: var(--accent-deep); } }
@media (max-width: 809.98px) {
  .hero__card.is-inview::after { box-shadow: inset 0 0 0 1px var(--accent-rule); }
}

/* ---------- Animated scenes (14 Oct 2026; components.css .scene, lib/scene.js) ----------
   "Who we are": the silk-reveal scene fills the poster frame (plays once in view, then holds; render/scenes4, 15 Oct
   2026, replaced polarised-crystals, which had replaced box-open). Its underlay is the scene's own near-black
   (frame 0), so nothing pale flashes before the poster.
   Bento wide card: the peptide-chain loop fills the card behind the title and text (it replaced the pipette / tube). */
.poster { cursor: auto; }
.poster__media { background: #e2e1ea; } /* the ghk-copper studio backdrop (frame 0), so nothing dark flashes first */
.poster__scene { position: absolute; inset: 0; }
.poster__scene .scene__toggle { right: 24px; bottom: 24px; }

.bento__scene {
  position: absolute; inset: 0; z-index: 0; border-radius: 24px; overflow: hidden; background: #eeeef3;
}
.bento__scene::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border: 1px solid var(--glass-border); border-radius: inherit; pointer-events: none;
}
.bento__media .scene__img, .bento__media .scene__video { object-position: 50% 52%; }
/* Soft pearl washes behind the title (left) and the text (right) keep them legible over passing beads. */
.bento__scene::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(30% 46% at 23% 50%, rgba(246, 246, 250, .86), rgba(246, 246, 250, .5) 55%, rgba(246, 246, 250, 0) 100%),
    radial-gradient(30% 46% at 77% 50%, rgba(246, 246, 250, .86), rgba(246, 246, 250, .5) 55%, rgba(246, 246, 250, 0) 100%);
}
@media (min-width: 810px) and (max-width: 1439.98px) {
  .bento__scene::before {
    background:
      radial-gradient(26% 50% at 14% 50%, rgba(246, 246, 250, .86), rgba(246, 246, 250, .5) 55%, rgba(246, 246, 250, 0) 100%),
      radial-gradient(32% 56% at 76% 50%, rgba(246, 246, 250, .92), rgba(246, 246, 250, .66) 55%, rgba(246, 246, 250, 0) 100%);
  }
}
.bento__wide .bento__col { z-index: 2; }
@media (max-width: 809.98px) {
  .poster__scene .scene__toggle { right: 14px; bottom: 14px; }
  /* Phone: title + text sit at the top over a soft white wash; the chain shows below them. */
  .bento__wide { height: 440px; }
  .bento__scene::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 58%; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(246, 246, 249, .95) 0%, rgba(246, 246, 249, .86) 62%, rgba(246, 246, 249, 0) 100%);
  }
  .bento__media .scene__img, .bento__media .scene__video { object-position: 50% 100%; }
}

/* ==========================================================================
   The range (28 Oct 2026, owner): every product as a plain list - its name, sub-name and one link per size (with the
   price when site.prices.show). It replaced the proportional vial line-up (render geometry in --mm units, hover
   spins), whose CSS is kept in backups/2026-10-28_2000_before-renders-round2/web. The range-float scene that stood
   above the list became the hero on 29 Oct (its CSS is in backups/2026-10-29_launch_before-full-site/web).
   ========================================================================== */
.range { display: flex; flex-direction: column; gap: 48px; }
.range__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.range__title { max-width: 11ch; text-wrap: balance; }
.range__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; max-width: 470px; justify-self: end; }
.range__text { color: var(--ink-2); text-wrap: pretty; }


.range__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.range__row { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 24px 0 28px; border-top: 1px solid rgba(18, 18, 18, .1); }
.range__name {
  align-self: flex-start; font-family: var(--font-nohemi-500); font-size: 22px; line-height: 1.2; letter-spacing: -.01em;
  color: var(--ink); text-decoration: none; transition: color .35s var(--ease-btn);
}
.range__paren { margin: 0; color: var(--ink-2); }
.range__sizes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.range__size {
  display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(77, 29, 250, .22); color: var(--ink); text-decoration: none;
  transition: border-color .35s var(--ease-btn), background-color .35s var(--ease-btn);
}
.range__amount { font-family: var(--font-nohemi-500); font-size: 14px; line-height: 1.3; letter-spacing: .02em; }
.range__price { font-family: var(--font-nohemi-500); font-size: 13px; line-height: 1.3; letter-spacing: .04em; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) {
  .range__name:hover { color: var(--accent); }
  .range__size:hover { border-color: var(--accent); background-color: rgba(77, 29, 250, .06); }
}
.range__name:focus-visible, .range__size:focus-visible { outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .range__name, .range__size { transition: none; } }

/* =========================== 810-1439: two columns =========================== */
@media (max-width: 1439.98px) {
  .range { gap: 40px; }
  .range__head { gap: 24px 40px; }
  .range__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
}

/* =========================== Phone: one column =========================== */
@media (max-width: 809.98px) {
  .range { gap: 32px; }
  .range__head { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .range__intro { justify-self: start; gap: 22px; }
  .range__list { grid-template-columns: minmax(0, 1fr); }
  .range__name { font-size: 20px; }
}