/* =====================================================================================================
   t-hubs.css (hand-written, 20 Oct 2026): the "hubs" template, the Solutions and Products hubs as a catalogue.
   Loads after wine-chrome.css, wine-base.css. Prefix: hb- (scoped to this template's own classes).
   Parts: hero (research table / exploded stack, stats, marquee) -> sticky console (search + filter chips) ->
   group bands (sticky head + big cards with drawn previews) -> methods track (solutions) or pinned flow
   (products) -> chooser -> stats band -> closing band (wine-base). Motion: wine-motion.js + the hooks below
   (all motion rules sit under html.wm-on, so ?static=1, reduced motion and no-JS show the final state).
   ===================================================================================================== */

body.t-hubs { --hb-r: 24px; --hb-head-top: 236px; }
body.t-hubs [hidden] { display: none !important; }

/* ---------- hero ---------- */
.hb-hero { padding: 168px 0 0; }
.hb-hero__lines { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(255,179,199,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,179,199,.07) 1px, transparent 1px);
  background-size: 64px 64px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(70% 80% at 72% 40%, #000 0%, rgba(0,0,0,.35) 55%, transparent 85%);
  mask-image: radial-gradient(70% 80% at 72% 40%, #000 0%, rgba(0,0,0,.35) 55%, transparent 85%); }
.hb-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 576px; gap: 56px; align-items: center; }
.hb-hero .hb-h1 { font-size: 60px; line-height: 66px; letter-spacing: -1.3px; max-width: 640px; }
.hb-hero .wn-lead { font-size: 19px; line-height: 30px; }
.hb-hero__vis { position: relative; min-width: 0; }
.hb-hstats { display: flex; margin-top: 26px; }
.hb-hstats li { display: flex; flex-direction: column; gap: 4px; padding: 0 24px; border-left: 1px solid rgba(255,179,199,.28); max-width: 200px; }
.hb-hstats li:first-child { padding-left: 0; border-left: 0; }
.hb-hstats b { font: 500 36px/1 var(--display); letter-spacing: -.8px; color: var(--mint); font-variant-numeric: tabular-nums; }
.hb-hstats span { font: 400 14px/19px var(--text); color: rgba(255,255,255,.78); }

/* the research table (solutions) */
.hb-pt { position: relative; padding: 20px 20px 16px; border-radius: 28px; background: rgba(26,6,22,.5); border: 1px solid rgba(255,179,199,.22);
  box-shadow: 0 30px 80px rgba(10,2,8,.45), inset 0 0 60px rgba(232,70,111,.08); }
.hb-pt__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: 26px repeat(5, 86px);
  grid-auto-flow: column; gap: 8px; }
.hb-pt__h { align-self: end; padding: 0 4px 2px; font: 700 11px/14px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.hb-el { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 8px 10px 9px; border-radius: 14px;
  background: var(--hb-tile, rgba(255,255,255,.06)); border: 1px solid rgba(255,179,199,.2); color: #fff; overflow: hidden;
  transition: transform .35s var(--wn-ease-out), background-color .3s ease, border-color .3s ease, opacity .3s ease, box-shadow .35s ease; }
.hb-el::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 70%); transform: translateX(-120%); }
.hb-el__n { font: 600 10px/12px var(--text); color: rgba(255,255,255,.62); font-variant-numeric: tabular-nums; }
.hb-el__s { font: 500 28px/1 var(--display); letter-spacing: -.5px; color: var(--mint); transition: color .3s ease; }
.hb-el__l { font: 500 11px/13px var(--text); color: rgba(255,255,255,.86); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hb-el:hover, .hb-el:focus-visible { transform: translateY(-4px); background: var(--purple); border-color: var(--mint);
  box-shadow: 0 14px 30px rgba(214,51,94,.35); }
.hb-el:hover .hb-el__s, .hb-el:focus-visible .hb-el__s { color: #fff; }
.hb-el.is-dim { opacity: .28; }
.hb-el[data-group="concept-and-innovation"] { --hb-tile: rgba(214,51,94,.18); }
.hb-el[data-group="ads-and-creative"] { --hb-tile: rgba(255,179,199,.09); }
.hb-el[data-group="brand-and-market"] { --hb-tile: rgba(246,201,142,.11); }
.hb-el[data-group="pricing-and-optimisation"] { --hb-tile: rgba(232,70,111,.15); }
.hb-el[data-group="customers-and-audiences"] { --hb-tile: rgba(255,179,199,.13); }
.hb-pt__cap { margin-top: 12px; font: 400 13px/18px var(--text); color: rgba(255,255,255,.72); text-align: center; }
html.wm-on .hb-pt__grid.is-in .hb-el::after { animation: hb-sheen 1.6s var(--wn-ease) both; animation-delay: calc(var(--wm-i, 0) * 38ms + 700ms); }
@keyframes hb-sheen { to { transform: translateX(120%); } }

/* the exploded stack (products) */
.hb-stack { position: relative; height: 548px; }
.hb-slabw { position: absolute; left: 0; right: 0; top: calc(16px + var(--k) * 106px); height: 210px; pointer-events: none; z-index: calc(10 - var(--k)); }
.hb-slab { position: absolute; left: 0; top: 0; width: 324px; height: 210px; pointer-events: auto; color: #fff; }
.hb-slab__face { position: absolute; left: 50%; top: 50%; width: 218px; height: 218px; margin: -109px 0 0 -109px; border-radius: 26px;
  transform: rotateX(58deg) rotateZ(-42deg); display: grid; grid-template-columns: 1fr 1fr; place-items: center; padding: 30px;
  background: linear-gradient(135deg, rgba(232,70,111,.78), rgba(110,20,70,.86) 60%, rgba(52,12,40,.92));
  border: 1px solid rgba(255,179,199,.55); box-shadow: 0 46px 50px rgba(10,2,8,.42), inset 0 0 40px rgba(255,179,199,.16);
  transition: box-shadow .4s ease, filter .4s ease; }
.hb-slabw:nth-child(2) .hb-slab__face { background: linear-gradient(135deg, rgba(214,51,94,.72), rgba(90,20,62,.9) 60%, rgba(42,11,34,.94)); }
.hb-slabw:nth-child(3) .hb-slab__face { background: linear-gradient(135deg, rgba(246,201,142,.55), rgba(142,26,71,.82) 55%, rgba(42,11,34,.95)); }
.hb-slabw:nth-child(4) .hb-slab__face { background: linear-gradient(135deg, rgba(255,179,199,.5), rgba(110,20,70,.86) 55%, rgba(30,10,26,.96)); }
.hb-slab__face i { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: rgba(26,6,22,.42);
  border: 1px solid rgba(255,179,199,.35); color: var(--mint); }
.hb-slab__lab { position: absolute; left: 352px; top: 50%; transform: translateY(-50%); width: 214px; display: flex; flex-direction: column; gap: 4px; }
.hb-slab__lab::before { content: ""; position: absolute; left: -66px; top: 50%; width: 54px; height: 1px; background: rgba(255,179,199,.55); }
.hb-slab__lab::after { content: ""; position: absolute; left: -70px; top: calc(50% - 4px); width: 8px; height: 8px; border-radius: 50%; background: var(--mint); }
.hb-slab__lab b { font: 500 22px/27px var(--display); letter-spacing: -.3px; color: #fff; }
.hb-slab__lab span { font: 400 14px/19px var(--text); color: rgba(255,255,255,.76); }
.hb-slab:hover .hb-slab__face, .hb-slab:focus-visible .hb-slab__face { filter: brightness(1.18); box-shadow: 0 46px 60px rgba(214,51,94,.45), inset 0 0 40px rgba(255,179,199,.3); }
.hb-slab:hover .hb-slab__lab b, .hb-slab:focus-visible .hb-slab__lab b { color: var(--mint); }
html.wm-on .hb-slab { animation: hb-drop 1.1s var(--wn-ease-out) both; animation-delay: calc(450ms + (3 - var(--k)) * 160ms); }
@keyframes hb-drop { from { opacity: 0; transform: translate3d(0, -70px, 0); } }

/* marquee along the bottom of the hero */
.hb-mq { display: flex; align-items: center; gap: 28px; margin-top: 64px; padding: 22px 0 66px; border-top: 1px solid rgba(255,179,199,.2); }
.hb-mq__l { flex: none; font: 700 12px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.hb-mq__m { flex: 1; min-width: 0; }
.hb-mq__t { gap: 0; }
.hb-mq__t li { display: inline-flex; align-items: center; gap: 22px; padding-right: 22px; font: 500 20px/28px var(--display); letter-spacing: -.2px;
  color: rgba(255,255,255,.9); white-space: nowrap; }
.hb-mq__t li::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 3px rgba(214,51,94,.25); }

/* ---------- the console: search + filter chips (sticks while you browse) ---------- */
.hb-cat { position: relative; }
.hb-console { position: sticky; top: 146px; z-index: 40; display: flex; align-items: center; gap: 12px; margin: -36px 7% 0;
  padding: 9px 10px 9px 10px; border-radius: 999px; background: rgba(255,255,255,.97); border: 1px solid var(--wn-line);
  box-shadow: 0 18px 44px rgba(30,10,26,.16); }
/* no backdrop-filter on the sticky console: at 95-97% white the blur showed almost nothing, and it cost long frames
   while scrolling (headless check 21 Oct 2026: warm-pass p99 17-22 ms with it, 6-11 ms without) */
.hb-search { flex: 0 0 236px; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px; border-radius: 999px;
  background: var(--wn-page); color: var(--blue); transition: box-shadow .2s ease; cursor: text; }
.hb-search:focus-within { box-shadow: 0 0 0 2px var(--focus); }
.hb-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: 500 14px/1 var(--text); color: var(--ink); outline: none; }
.hb-search input::placeholder { color: var(--grey60); opacity: 1; }
.hb-search input::-webkit-search-cancel-button { cursor: pointer; }
.hb-chips { flex: 1; min-width: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.hb-chips::-webkit-scrollbar { display: none; }
.hb-chip { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid transparent; font: 600 14px/1 var(--text); color: var(--ink); white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.hb-chip b { display: inline-grid; place-items: center; min-width: 24px; height: 22px; padding: 0 7px; border-radius: 999px;
  background: var(--wn-rose-10); font: 700 12px/1 var(--text); color: var(--blue); font-variant-numeric: tabular-nums; }
.hb-chip:hover { background: var(--wn-rose-10); color: var(--blue70); }
.hb-chip.is-spy { border-color: var(--wn-rose-20); color: var(--blue70); }
.hb-chip.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.hb-chip.is-on b { background: rgba(255,255,255,.16); color: #fff; }
body.hb-solution .hb-chip:not([data-filter="all"]) b { display: none; }
.hb-count { flex: none; padding: 0 14px 0 4px; font: 500 14px/1 var(--text); color: var(--grey70); white-space: nowrap; }
.hb-count b { font-weight: 700; color: var(--ink); }
body.hb-solution .hb-count { display: none; }
.hb-empty { margin: 48px 7% 0; padding: 28px 32px; border-radius: 22px; background: #fff; border: 1px solid var(--wn-line);
  font: 500 18px/27px var(--text); color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.hb-clear, .hb-reset { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border: 1px solid var(--blue); border-radius: 999px;
  background: transparent; font: 600 15px/1 var(--text); color: var(--blue); cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.hb-clear:hover, .hb-reset:hover { background: var(--blue); color: #fff; }

/* ---------- group bands ---------- */
.hb-band { position: relative; padding: 112px 0 104px; scroll-margin-top: 150px; }
.hb-band + .hb-band { padding-top: 104px; }
.hb-cat > .hb-band:first-of-type { padding-top: 96px; }
.hb-band__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
.hb-band__head { position: sticky; top: var(--hb-head-top); display: flex; flex-direction: column; gap: 14px; }
.hb-band__n { display: block; margin: -18px 0 -10px -4px; font: 500 128px/1 var(--display); letter-spacing: -5px; color: rgba(180,35,90,.13);
  font-variant-numeric: tabular-nums; }
.hb-band__t { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; font: 500 40px/46px var(--display); letter-spacing: -.8px;
  color: var(--wn-h, var(--ink)); }
.hb-band__ico { width: 56px; height: 56px; padding: 13px; border-radius: 18px; background: var(--wn-rose-10); color: var(--blue); }
.hb-band__sub { font: 400 18px/27px var(--text); color: var(--wn-mut, var(--grey70)); }
.hb-band__q { margin-top: 4px; padding-left: 18px; border-left: 3px solid var(--purple); font: 500 19px/27px var(--display); letter-spacing: -.2px;
  color: var(--wn-h, var(--ink)); }
.hb-band__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.hb-band__chips li { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; border: 1px solid var(--wn-line);
  font: 600 13px/1 var(--text); color: var(--grey70); background: rgba(255,255,255,.6); }
.hb-band--dark .hb-band__n { color: rgba(255,179,199,.16); }
.hb-band--dark .hb-band__ico { background: rgba(255,179,199,.14); color: var(--mint); }
.hb-band--dark .hb-band__chips li { border-color: rgba(255,179,199,.3); background: rgba(255,255,255,.06); color: rgba(255,255,255,.88); }
.hb-band.wn-sec--rose .hb-band__chips li { background: #fff; }
.hb-band.wn-sec--white .hb-band__ico { background: var(--wn-page); }
.hb-band.wn-sec--ink::before, .hb-band.wn-sec--plum::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 60% at 100% 0%, rgba(214,51,94,.22), rgba(214,51,94,0) 70%), radial-gradient(30% 40% at 0% 100%, rgba(255,179,199,.08), rgba(255,179,199,0) 70%); }

/* ---------- cards ---------- */
.hb-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; gap: 22px; }
.hb-card { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--hb-r); background: #fff; border: 1px solid var(--wn-line);
  color: var(--body); overflow: hidden; box-shadow: 0 1px 0 rgba(30,10,26,.02);
  transition: transform .5s var(--wn-ease-out), box-shadow .5s var(--wn-ease-out), border-color .3s ease; }
.hb-card:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(30,10,26,.16); border-color: var(--wn-rose-20); }
.hb-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.hb-band--dark .hb-card { border-color: rgba(255,179,199,.2); box-shadow: 0 24px 50px rgba(10,2,8,.35); }
.hb-card--wide { grid-column: 1 / -1; flex-direction: row-reverse; min-height: 300px; }
.hb-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 22px 26px 24px; }
.hb-card--wide .hb-card__body { padding: 32px 34px; justify-content: center; }
.hb-card__k { display: flex; align-items: center; gap: 8px; font: 700 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.hb-card__k b { padding: 3px 7px; border-radius: 6px; background: var(--wn-rose-10); font-weight: 700; letter-spacing: .02em; color: var(--blue70); font-variant-numeric: tabular-nums; }
.hb-card__t { font: 500 26px/32px var(--display); letter-spacing: -.4px; color: var(--ink); }
.hb-card--wide .hb-card__t { font-size: 34px; line-height: 40px; letter-spacing: -.6px; }
.hb-card__d { font: 500 16px/23px var(--text); color: var(--ink); }
.hb-card__x { font: 400 15px/23px var(--text); color: var(--grey70); }
.hb-card__m { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.hb-card__m li { height: 28px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 999px; background: var(--wn-rose-10);
  font: 600 12.5px/1 var(--text); color: var(--blue70); white-space: nowrap; }
.hb-card__go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 14px; font: 600 15px/20px var(--text); color: var(--blue); }
.hb-card__arr { width: 18px; height: 18px; transition: transform .35s var(--wn-ease-out); }
.hb-card:hover .hb-card__arr { transform: translateX(6px); }

/* ---------- the drawn previews ---------- */
.hb-pv { position: relative; flex: none; height: 196px; padding: 12px 16px; display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--wn-line);
  background:
    radial-gradient(60% 70% at 100% 0%, rgba(255,179,199,.32), rgba(255,179,199,0) 70%),
    linear-gradient(rgba(180,35,90,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(180,35,90,.045) 1px, transparent 1px),
    #fdf8fa;
  background-size: auto, 22px 22px, 22px 22px, auto; }
.hb-card__side { flex: none; display: flex; flex-direction: column; min-width: 0; }
.hb-card__get { display: none; }
.hb-card--wide .hb-card__side { width: 52%; border-left: 1px solid var(--wn-line); }
.hb-card--wide .hb-pv { flex: 1; height: auto; min-height: 232px; padding: 22px 28px; }
/* "What you get" (content JSON titles): only on wide cards, under the drawing */
.hb-card--wide .hb-card__get { display: block; padding: 18px 28px 22px; background: #fff; }
.hb-card__get p { font: 700 11px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.hb-card__get ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin-top: 10px; }
.hb-card__get li { display: flex; align-items: flex-start; gap: 8px; font: 500 14px/20px var(--text); color: var(--ink); }
.hb-card__get li svg { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--purple); }
.hb-svg { display: block; width: 100%; height: 100%; max-height: 100%; overflow: visible; }
.hb-card--wide .hb-svg { height: auto; max-height: none; }
.hb-svg text { font-family: var(--text); font-size: 11px; font-weight: 500; }
.hb-svg text:not([fill]) { fill: #3a2d36; }
.hb-svg .ts { font-size: 10px; }
.hb-svg .ts:not([fill]) { fill: #6e6269; }
.hb-svg .tq { font-size: 11.5px; font-weight: 600; }
.hb-svg .tq:not([fill]) { fill: #1e0a1a; }
.hb-svg .tqi { font-style: italic; }
.hb-svg .tv { font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hb-svg .tv:not([fill]) { fill: #1e0a1a; }
.hb-svg .tk { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hb-svg .tk:not([fill]) { fill: #b4235a; }
.hb-svg .tp { font-size: 9.5px; font-weight: 600; }
.hb-svg .tw { font-size: 10px; font-weight: 600; }
.hb-svg .tw:not([fill]) { fill: #fff; }
.hb-svg .n28 { font-family: var(--display); font-size: 28px; font-weight: 500; letter-spacing: -.5px; }
.hb-svg .n16 { font-family: var(--display); font-size: 16px; font-weight: 500; }
.hb-svg .n28:not([fill]), .hb-svg .n16:not([fill]) { fill: #1e0a1a; }
.hb-svg .tcode { font-family: Consolas, 'Cascadia Mono', ui-monospace, monospace; font-size: 10px; }
.hb-svg .tcode:not([fill]) { fill: #8e1a47; }
.hb-svg .wc { font-family: var(--display); font-weight: 500; letter-spacing: -.3px; }
/* accreditation logos (a real image row, not a drawing) */
.hb-badges { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; width: 100%; max-width: 360px; }
.hb-badge { grid-column: span 2; height: 62px; display: grid; place-items: center; padding: 10px; border-radius: 14px; background: #fff;
  border: 1px solid var(--wn-line); box-shadow: 0 8px 18px rgba(30,10,26,.06); }
.hb-badge:nth-child(4) { grid-column: 2 / span 2; }
.hb-badge img { max-height: 38px; max-width: 100%; object-fit: contain; }
.hb-card--wide .hb-badges { max-width: 420px; }

/* motion hooks inside the previews: grow (gx / gy / gc), pop (pp), fade (fi); strokes draw via data-draw */
html.wm-on .hb-pv .gx, html.wm-on .hb-pv .gy, html.wm-on .hb-pv .gc, html.wm-on .hb-pv .pp, html.wm-on .hb-badge {
  transform-box: fill-box; transition: transform 1.1s var(--wm-ease) calc(var(--i, 0) * 90ms + 220ms), opacity .6s ease calc(var(--i, 0) * 90ms + 220ms); }
html.wm-on .hb-pv .gx { transform-origin: 0 50%; }
html.wm-on .hb-pv .gy { transform-origin: 50% 100%; }
html.wm-on .hb-pv .gc, html.wm-on .hb-pv .pp { transform-origin: 50% 50%; }
html.wm-on .hb-pv:not(.is-in) .gx, html.wm-on .hb-pv:not(.is-in) .gc { transform: scaleX(0); }
html.wm-on .hb-pv:not(.is-in) .gy { transform: scaleY(0); }
html.wm-on .hb-pv:not(.is-in) .pp { transform: scale(0); opacity: 0; }
html.wm-on .hb-pv:not(.is-in) .hb-badge { transform: translate3d(0, 18px, 0) scale(.9); opacity: 0; }
html.wm-on .hb-pv .fi { transition: opacity .7s ease calc(var(--i, 0) * 90ms + 520ms); }
html.wm-on .hb-pv:not(.is-in) .fi { opacity: 0; }
/* small loops on hover / focus only (no autoplaying loops on the page) */
html.wm-on .hb-pv .wv { transform-box: fill-box; transform-origin: 50% 50%; }
html.wm-on :is(.hb-card, .hb-mcard, .hb-flow__card):is(:hover, :focus-visible, :focus-within) .hb-pv .wv { animation: hb-wv .8s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -60ms); }
@keyframes hb-wv { to { transform: scaleY(.3); } }
html.wm-on :is(.hb-card, .hb-mcard):is(:hover, :focus-visible) .hb-pv .lp-feed { animation: hb-feed 3s ease-in-out infinite alternate; }
@keyframes hb-feed { to { transform: translate3d(0, -64px, 0); } }
html.wm-on :is(.hb-card, .hb-mcard):is(:hover, :focus-visible) .hb-pv .lp-prog { animation: hb-prog 2.6s linear infinite; }
@keyframes hb-prog { from { transform: scaleX(.05); } to { transform: scaleX(1.6); } }
html.wm-on :is(.hb-card, .hb-mcard, .hb-flow__card):is(:hover, :focus-visible) .hb-pv .lp-rec { animation: hb-blink 1.1s steps(2, jump-none) infinite; }
@keyframes hb-blink { 50% { opacity: .15; } }
html.wm-on :is(.hb-card, .hb-flow__card):is(:hover, :focus-visible) .hb-pv .lp-dot { animation: hb-arrive 1.8s var(--wn-ease) infinite; }
@keyframes hb-arrive { from { transform: translate3d(-30px, 0, 0); opacity: 0; } 30% { opacity: 1; } to { transform: translate3d(70px, 0, 0); opacity: 0; } }
.hb-pv .lp-prog { transform-box: fill-box; transform-origin: 0 50%; }

/* ---------- methods track (solutions): horizontal scroll ---------- */
.hb-methods { position: relative; background:
  radial-gradient(40% 50% at 100% 0%, rgba(214,51,94,.35), rgba(214,51,94,0) 70%),
  radial-gradient(36% 50% at 0% 100%, rgba(255,179,199,.12), rgba(255,179,199,0) 70%), var(--wn-plum);
  --wn-h: #fff; --wn-k: var(--mint); --wn-tx: rgba(255,255,255,.86); --wn-mut: rgba(255,255,255,.76); color: #fff; }
.hb-methods::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255,179,199,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,179,199,.06) 1px, transparent 1px);
  background-size: 48px 48px; }
.hb-methods .wm-h__sticky { position: relative; padding: 112px 0 72px; }
html.wm-on .hb-methods .wm-h__sticky { padding: 134px 0 0; box-sizing: border-box; }
.hb-methods__track { align-items: stretch; padding: 0 7vw 8px; }
.hb-mintro { flex: 0 0 440px; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding-right: 32px; }
.hb-mintro__t { font: 500 46px/54px var(--display); letter-spacing: -.9px; color: #fff; }
.hb-mintro__x { font: 400 18px/28px var(--text); color: rgba(255,255,255,.82); }
.hb-mintro__hint { display: inline-flex; align-items: center; gap: 10px; font: 600 14px/20px var(--text); color: var(--mint); }
html:not(.wm-on) .hb-mintro__hint { display: none; }
.hb-methods__bar { width: 280px; height: 3px; margin: 28px 0 0 7vw; border-radius: 3px; background: rgba(255,179,199,.2); overflow: hidden; }
.hb-methods__bar i { display: block; height: 100%; background: linear-gradient(90deg, #d6335e, #ffb3c7); transform-origin: 0 50%; transform: scaleX(var(--wm-hp, 0)); }
html:not(.wm-on) .hb-methods__bar { display: none; }
.hb-mcard { flex: 0 0 384px; display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 22px; border-radius: 26px; background: #fff;
  color: var(--body); box-shadow: 0 30px 60px rgba(10,2,8,.35); }
.hb-mcard__n { font: 500 15px/1 var(--display); color: var(--blue); }
.hb-mcard__ask { font: 600 14px/20px var(--text); color: var(--blue); }
.hb-mcard__t { font: 500 25px/31px var(--display); letter-spacing: -.4px; color: var(--ink); }
.hb-pv--m { height: 170px; margin: 4px 0; border: 1px solid var(--wn-line); border-radius: 16px; }
.hb-mcard__x { font: 400 15px/23px var(--text); color: var(--grey70); }
.hb-mcard__u { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--wn-line); }
.hb-mcard__u span { font: 700 11px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--grey60); margin-right: 4px; }
.hb-mcard__u a { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: var(--wn-rose-10);
  font: 600 13px/1 var(--text); color: var(--blue70); transition: background-color .2s ease, color .2s ease; }
.hb-mcard__u a:hover { background: var(--blue); color: #fff; }
html.wm-on .hb-methods .hb-mcard { transition: transform .6s var(--wn-ease-out); }
html.wm-on .hb-methods .hb-mcard:hover { transform: translateY(-8px); }

/* ---------- pinned flow (products): one study, through every part ---------- */
.hb-flow { position: relative; background: var(--wn-hero-bg); color: #fff;
  --wn-h: #fff; --wn-k: var(--mint); --wn-tx: rgba(255,255,255,.86); --wn-mut: rgba(255,255,255,.74); }
.hb-flow .wm-pin__sticky { padding: 120px 0 64px; }
html.wm-on .hb-flow .wm-pin__sticky { display: flex; align-items: center; padding: 140px 0 32px; box-sizing: border-box; }
.hb-flow__glow { position: absolute; right: -10%; top: 10%; width: 760px; height: 760px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232,70,111,.35), rgba(232,70,111,0)); }
.hb-flow__grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; width: 100%; }
.hb-flow__side { display: flex; flex-direction: column; gap: 16px; }
.hb-flow__lede { font: 400 17px/26px var(--text); color: rgba(255,255,255,.8); max-width: 460px; }
.hb-flow__list { margin-top: 10px; border-bottom: 1px solid rgba(255,179,199,.18); }
.hb-flow__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: baseline; gap: 10px; padding: 11px 0;
  border-top: 1px solid rgba(255,179,199,.18); opacity: .5; transition: opacity .4s ease, transform .4s var(--wn-ease-out); }
.hb-flow__list span { font: 500 14px/1 var(--display); color: var(--mint); font-variant-numeric: tabular-nums; }
.hb-flow__list b { font: 500 20px/26px var(--display); letter-spacing: -.2px; color: #fff; }
.hb-flow__list em { font: 500 13px/18px var(--text); font-style: normal; color: rgba(255,255,255,.76); text-align: right; }
.hb-flow .wm-pin__bar { margin-top: 6px; }
.hb-flow__stage { min-width: 0; }
.hb-flow__rail { position: relative; display: flex; justify-content: space-between; align-items: center; height: 28px; margin: 0 6px 22px; }
.hb-flow__rail::before { content: ""; position: absolute; left: 7px; right: 7px; top: 50%; height: 2px; margin-top: -1px; background: rgba(255,179,199,.22); }
.hb-flow__rail i { position: relative; width: 14px; height: 14px; border-radius: 50%; background: #2a0b22; border: 2px solid rgba(255,179,199,.5);
  transition: background-color .3s ease, border-color .3s ease, transform .3s ease; }
.hb-flow__tokw { position: absolute; left: 0; top: 0; width: calc(100% - 14px); height: 100%; pointer-events: none;
  transform: translate3d(calc(var(--wm-pin, 0) * 100%), 0, 0); }
.hb-flow__tokw b { position: absolute; left: -4px; top: 50%; width: 22px; height: 22px; margin-top: -11px; border-radius: 50%; background: var(--purple);
  box-shadow: 0 0 0 6px rgba(214,51,94,.25), 0 0 24px rgba(255,179,199,.6); }
html:not(.wm-on) .hb-flow__tokw { display: none; }
.hb-flow__card { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: center; padding: 28px; border-radius: 28px;
  background: rgba(26,6,22,.55); border: 1px solid rgba(255,179,199,.24); box-shadow: 0 30px 70px rgba(10,2,8,.4); }
.hb-flow__card + .hb-flow__card { margin-top: 20px; }
html.wm-on .hb-flow__card + .hb-flow__card { margin-top: 0; }
.hb-flow__txt { display: flex; flex-direction: column; gap: 12px; }
.hb-flow__k { font: 700 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.hb-flow__t { font: 500 30px/36px var(--display); letter-spacing: -.5px; color: #fff; }
.hb-flow__x { font: 400 16px/25px var(--text); color: rgba(255,255,255,.84); }
.hb-flow__f { display: flex; flex-wrap: wrap; gap: 6px; }
.hb-flow__f li { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,179,199,.32);
  background: rgba(255,255,255,.06); font: 600 13px/1 var(--text); color: #fff; }
.hb-pv--flow { height: 220px; border: 0; border-radius: 18px; }
.hb-flow .hb-flow__go { align-self: flex-start; color: var(--mint); }
.hb-flow .hb-flow__go:hover { color: #fff; }
/* the step in view: list item lit, rail nodes filled up to it */
.hb-flow[data-active="0"] .hb-flow__list li:nth-child(1), .hb-flow[data-active="1"] .hb-flow__list li:nth-child(2),
.hb-flow[data-active="2"] .hb-flow__list li:nth-child(3), .hb-flow[data-active="3"] .hb-flow__list li:nth-child(4),
.hb-flow[data-active="4"] .hb-flow__list li:nth-child(5), .hb-flow[data-active="5"] .hb-flow__list li:nth-child(6) { opacity: 1; transform: translateX(8px); }
.hb-flow[data-active="0"] .hb-flow__rail i:nth-child(-n+1), .hb-flow[data-active="1"] .hb-flow__rail i:nth-child(-n+2),
.hb-flow[data-active="2"] .hb-flow__rail i:nth-child(-n+3), .hb-flow[data-active="3"] .hb-flow__rail i:nth-child(-n+4),
.hb-flow[data-active="4"] .hb-flow__rail i:nth-child(-n+5), .hb-flow[data-active="5"] .hb-flow__rail i:nth-child(-n+6) {
  background: var(--mint); border-color: var(--mint); }
html:not(.wm-on) .hb-flow__list li { opacity: 1; }
/* without motion every step shows in order: the heading column starts at the top and stays beside the steps */
html:not(.wm-on) .hb-flow__grid { align-items: start; }
html:not(.wm-on) .hb-flow__side { position: sticky; top: 150px; }

/* ---------- chooser ---------- */
.hb-choose { background: radial-gradient(50% 60% at 100% 0%, rgba(232,70,111,.14), rgba(232,70,111,0) 70%),
  radial-gradient(40% 60% at 0% 100%, rgba(255,179,199,.4), rgba(255,179,199,0) 70%), var(--wn-rose-10); scroll-margin-top: 140px; }
.hb-choose__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.hb-choose .wn-head { margin-bottom: 40px; }
.hb-q { margin: 0 0 30px; padding: 0; border: 0; min-width: 0; }
.hb-q legend { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 0; font: 600 19px/26px var(--text); color: var(--ink); }
.hb-q legend b { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--purple); color: #fff;
  font: 600 15px/1 var(--display); }
.hb-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.hb-opt { position: relative; display: inline-flex; cursor: pointer; }
.hb-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.hb-opt span { display: inline-flex; align-items: center; min-height: 46px; padding: 11px 20px; border-radius: 999px; background: #fff; border: 1px solid var(--wn-line);
  font: 500 15px/22px var(--text); color: var(--ink); transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.hb-opt:hover span { border-color: var(--purple); }
.hb-opt input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.hb-opt input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.hb-choose__out { position: sticky; top: 168px; }
.hb-res { position: relative; overflow: hidden; min-height: 460px; padding: 40px; border-radius: 32px; background: var(--wn-glass-bg); color: #fff;
  border: 1px solid rgba(255,179,199,.28); box-shadow: 0 30px 70px rgba(30,10,26,.28), 0 0 0 1px rgba(232,70,111,.12); }
.hb-res__k { font: 700 13px/18px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.hb-quick ul { margin-top: 18px; border-bottom: 1px solid rgba(255,179,199,.2); }
.hb-quick li { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; border-top: 1px solid rgba(255,179,199,.2); }
.hb-quick li span { font: 400 16px/23px var(--text); color: rgba(255,255,255,.82); }
.hb-quick li a { display: inline-flex; align-items: center; gap: 8px; font: 600 16px/22px var(--text); color: var(--mint); white-space: nowrap; }
.hb-quick li a:hover { color: #fff; }
.hb-pick { display: flex; flex-direction: column; gap: 12px; }
.hb-pick__t { font: 500 40px/46px var(--display); letter-spacing: -.8px; }
.hb-pick__t a { color: #fff; }
.hb-pick__t a:hover { color: var(--mint); }
.hb-pick__d { font: 400 18px/27px var(--text); color: rgba(255,255,255,.86); }
.hb-pick__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hb-pick__chips li { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255,179,199,.32);
  background: rgba(255,255,255,.06); font: 600 13px/1 var(--text); color: #fff; }
.hb-pick__h { margin-top: 10px; font: 700 12px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.hb-pick__fits li { position: relative; padding: 6px 0 6px 30px; font: 400 15px/22px var(--text); color: rgba(255,255,255,.62); }
.hb-pick__fits li::before { content: ""; position: absolute; left: 0; top: 7px; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255,179,199,.4); }
.hb-pick__fits li.is-ok { color: #fff; }
.hb-pick__fits li.is-ok::before { background: var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.3' fill='none' stroke='%231e0a1a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat; border-color: var(--mint); }
.hb-pick .btn { align-self: flex-start; margin-top: 8px; }
.hb-pick__alts { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-pick__alts a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255,179,199,.4);
  font: 600 14px/1 var(--text); color: #fff; transition: background-color .2s ease, color .2s ease; }
.hb-pick__alts a:hover { background: var(--mint); color: var(--ink); }
.hb-pick__add { margin-top: 6px; padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.07); font: 400 14px/21px var(--text); color: rgba(255,255,255,.86); }
.hb-pick__add a { color: var(--mint); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
html.wm-on .hb-pick.is-new { animation: hb-pick .6s var(--wn-ease-out) both; }
@keyframes hb-pick { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
.hb-reset { margin-top: 4px; }

/* ---------- stats band ---------- */
.hb-statband__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.hb-statband .wn-head { margin-bottom: 0; }
.hb-statband .tlink { align-self: flex-start; margin-top: 6px; }
.hb-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--wn-line); }
.hb-stat { display: flex; flex-direction: column; gap: 10px; padding: 30px 28px 28px; border-bottom: 1px solid var(--wn-line); }
.hb-stat:nth-child(even) { border-left: 1px solid var(--wn-line); }
.hb-stat b { font: 500 76px/1 var(--display); letter-spacing: -2px; color: var(--purple); font-variant-numeric: tabular-nums; }
.hb-stat span { font: 400 16px/24px var(--text); color: var(--grey70); max-width: 300px; }

/* reduced motion: no loops, no drops (wine-base already stills reveals, scrubs and pins) */
@media (prefers-reduced-motion: reduce) {
  .hb-slab, .hb-el::after, .hb-pv * { animation: none !important; }
}

/* @@ RESPONSIVE-HC BEGIN (phone and tablet pass, 21 Oct 2026; keep this block last in the file) @@ */
/* =====================================================================================================
   RESPONSIVE: the Solutions and Products hubs on small laptops, tablets and phones. Every rule sits inside the
   wine-base.css breakpoints (1199.98 / 1023.98 / 767.98 / 479.98, plus the touch query): desktop 1200+ is untouched.
   Hero: one column below 1200 (the research table / exploded stack under the text); the research table scrolls
   inside its frame on phones; the console sticks under the small header on tablets and sits in the flow on phones;
   bands, cards, flow, chooser and stats stack; the methods track scrolls sideways inside itself (wine-motion lite).
   ===================================================================================================== */

/* ---------- 1200: small laptop (and 1024 tablets in landscape) ---------- */
@media (max-width: 1199.98px) {
  .hb-hero .hb-h1 { font-size: clamp(34px, 3.21vw + 21.5px, 60px); line-height: 1.1; letter-spacing: -.022em; max-width: 720px; }
  .hb-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .hb-hero__vis { width: 100%; max-width: 576px; }
  .hb-band__grid { gap: 40px; }
  .hb-mintro { flex-basis: 380px; }
  .hb-mintro__t { font-size: 40px; line-height: 46px; }
  .hb-flow__grid { gap: 48px; }
  .hb-choose__grid { gap: 48px; }
  .hb-statband__grid { gap: 56px; }
  .hb-stat b { font-size: 64px; }
}

/* ---------- 1024: tablet landscape and below ---------- */
@media (max-width: 1023.98px) {
  body.t-hubs { --hb-head-top: 150px; }
  .hb-hero { padding: var(--wn-hdr-clear, 96px) 0 0; }
  .hb-hero__vis { justify-self: start; }
  .hb-mq { gap: 20px; margin-top: 48px; padding: 18px 0 52px; }
  .hb-mq__t li { font-size: 18px; }
  /* the console sticks just under the small header (10px + 56px pill) */
  .hb-console { top: 76px; margin: -28px 4% 0; }
  .hb-band { padding: 88px 0 80px; scroll-margin-top: 96px; }
  .hb-band + .hb-band { padding-top: 88px; }
  .hb-cat > .hb-band:first-of-type { padding-top: 80px; }
  .hb-band__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hb-band__head { position: static; }
  .hb-band__n { font-size: 96px; letter-spacing: -4px; }
  .hb-band__t { font-size: 34px; line-height: 40px; }
  /* methods track (scrolls inside itself without wine-motion's pinning) */
  .hb-methods .wm-h__sticky { padding: 88px 0 56px; }
  html:not(.wm-on) .hb-methods .wm-h__sticky { scroll-snap-type: x proximity; scroll-padding-inline: 7vw; overscroll-behavior-x: contain; }
  html:not(.wm-on) .hb-mintro, html:not(.wm-on) .hb-mcard { scroll-snap-align: start; }
  .hb-mintro { flex-basis: 340px; }
  .hb-mcard { flex-basis: 340px; }
  /* products: the pinned flow runs as a plain section */
  .hb-flow .wm-pin__sticky { padding: 88px 0 56px; }
  .hb-flow__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  html:not(.wm-on) .hb-flow__side { position: static; }
  .hb-flow__card { grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; padding: 24px; }
  /* chooser and stats */
  .hb-choose__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hb-choose__out { position: static; }
  .hb-res { min-height: 0; padding: 32px; }
  /* labels at 12px and up on touch-size screens (desktop keeps its 10-11px micro labels) */
  .hb-pt__h, .hb-el__n, .hb-el__l, .hb-card__get p, .hb-mcard__u span { font-size: 12px; }
  .hb-pt__cap { font-size: 14px; }
  .hb-statband__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

/* ---------- 768: tablet portrait, phones ---------- */
@media (max-width: 767.98px) {
  .hb-hero { padding-top: var(--wn-hdr-clear-m, 88px); }
  .hb-hero .wn-lead { font-size: 18px; line-height: 28px; }
  .hb-hero__grid { gap: 40px; }
  .hb-hstats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
  .hb-hstats li { max-width: none; padding: 0 14px; }
  .hb-hstats b { font-size: 30px; }
  .hb-hstats span { font-size: 14px; line-height: 19px; }
  /* the research table scrolls inside its frame, at a size where every tile reads */
  .hb-pt { padding: 16px 0 14px; border-radius: 24px; }
  .hb-pt__grid { min-width: 560px; padding: 0 16px; }
  .hb-pt__scroll, .hb-pt { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: rgba(255,179,199,.35) transparent; }
  .hb-el__n, .hb-el__l { line-height: 15px; }
  .hb-pt__cap { padding: 0 16px; font-size: 16px; line-height: 22px; }
  /* the exploded stack (products), drawn smaller: slab on the left, its label on the right */
  .hb-stack { height: 452px; }
  .hb-slabw { top: calc(10px + var(--k) * 88px); height: 178px; }
  .hb-slab { width: 170px; height: 178px; }
  .hb-slab__face { width: 150px; height: 150px; margin: -75px 0 0 -75px; padding: 20px; border-radius: 20px; }
  .hb-slab__face i { width: 40px; height: 40px; border-radius: 12px; }
  .hb-slab__face i svg { width: 20px; height: 20px; }
  .hb-slab__lab { left: 190px; width: calc(86vw - 190px); max-width: 320px; }
  .hb-slab__lab::before { left: -26px; width: 18px; }
  .hb-slab__lab::after { left: -30px; }
  .hb-slab__lab b { font-size: 18px; line-height: 23px; }
  .hb-slab__lab span { font-size: 14px; line-height: 19px; }
  .hb-mq { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 40px; padding: 18px 0 44px; }
  /* the console sits in the flow: search on one row, filters (sideways) on the next */
  .hb-console { position: relative; top: auto; flex-wrap: wrap; gap: 8px; margin: -28px 0 0; margin-left: 4%; margin-right: 4%; padding: 8px; border-radius: 26px; }
  .hb-search { flex: 1 1 100%; }
  .hb-search input { font-size: 16px; }
  .hb-chips { flex: 1 1 100%; }
  .hb-count { flex: 1 1 100%; padding: 2px 12px 4px; }
  .hb-empty { flex-direction: column; align-items: flex-start; margin: 32px 4% 0; padding: 22px; }
  /* bands and cards */
  .hb-band { padding: 72px 0 64px; }
  .hb-band + .hb-band { padding-top: 72px; }
  .hb-cat > .hb-band:first-of-type { padding-top: 64px; }
  .hb-band__grid { gap: 28px; }
  .hb-band__head { gap: 12px; }
  .hb-band__n { margin: -8px 0 -6px -2px; font-size: 72px; letter-spacing: -3px; }
  .hb-band__t { gap: 14px; font-size: 30px; line-height: 36px; }
  .hb-band__ico { width: 48px; height: 48px; padding: 11px; border-radius: 15px; }
  .hb-band__sub { font-size: 17px; line-height: 26px; }
  .hb-band__q { font-size: 18px; line-height: 26px; }
  .hb-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hb-card--wide { flex-direction: column; min-height: 0; }
  .hb-card--wide .hb-card__side { width: auto; border-left: 0; }
  .hb-card--wide .hb-pv { min-height: 200px; padding: 14px 8px; }
  .hb-card__body, .hb-card--wide .hb-card__body { padding: 20px 20px 22px; }
  .hb-card__t { font-size: 23px; line-height: 29px; }
  .hb-card--wide .hb-card__t { font-size: 26px; line-height: 32px; letter-spacing: -.4px; }
  .hb-card__d { font-size: 16px; line-height: 24px; }
  .hb-card__x { font-size: 16px; line-height: 25px; }
  .hb-card__m li { font-size: 13px; }
  .hb-pv { padding: 10px 8px; }
  .hb-card--wide .hb-card__get { padding: 16px 20px 18px; border-top: 1px solid var(--wn-line); }
  .hb-card__get li { font-size: 15px; line-height: 21px; }
  /* methods track */
  .hb-methods .wm-h__sticky { padding: 72px 0 48px; }
  .hb-methods__track { gap: 14px; }
  .hb-mintro { flex-basis: min(76vw, 320px); justify-content: flex-start; padding: 12px 8px 0 0; gap: 14px; }
  .hb-mintro__t { font-size: 32px; line-height: 38px; }
  .hb-mintro__x { font-size: 17px; line-height: 26px; }
  .hb-mcard { flex-basis: min(80vw, 330px); padding: 20px 18px 18px; border-radius: 22px; }
  .hb-mcard__ask { font-size: 16px; line-height: 22px; }
  .hb-mcard__t { font-size: 22px; line-height: 28px; }
  .hb-mcard__x { font-size: 16px; line-height: 24px; }
  .hb-mcard__u a { height: 44px; padding: 0 14px; font-size: 14px; }
  /* products flow */
  .hb-flow .wm-pin__sticky { padding: 72px 0 48px; }
  .hb-flow__lede { font-size: 17px; }
  .hb-flow__list li { grid-template-columns: 36px minmax(0, 1fr); row-gap: 2px; }
  .hb-flow__list em { grid-column: 2; text-align: left; font-size: 14px; }
  .hb-flow__list b { font-size: 19px; line-height: 25px; }
  .hb-flow__card { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px; border-radius: 24px; }
  .hb-flow__t { font-size: 24px; line-height: 30px; }
  .hb-pv--flow { height: 200px; }
  /* chooser */
  .hb-q legend { font-size: 17px; line-height: 24px; }
  .hb-opt span { font-size: 16px; }
  .hb-res { padding: 26px 22px; border-radius: 26px; }
  .hb-quick li { flex-direction: column; align-items: flex-start; gap: 2px; padding: 14px 0 6px; }
  .hb-quick li a { white-space: normal; }
  .hb-pick__t { font-size: 30px; line-height: 36px; }
  .hb-pick__d { font-size: 17px; line-height: 26px; }
  .hb-pick__fits li, .hb-pick__add { font-size: 16px; line-height: 23px; }
  .hb-pick .btn { align-self: stretch; }
  /* stats band */
  .hb-stat { padding: 24px 18px 22px; }
  .hb-stat:nth-child(odd) { padding-left: 0; }
  .hb-stat b { font-size: 48px; letter-spacing: -1.4px; }
  .hb-stat span { font-size: 16px; line-height: 23px; }
}

/* ---------- 480: phone ---------- */
@media (max-width: 479.98px) {
  /* hero numbers as a short list */
  .hb-hstats { grid-template-columns: minmax(0, 1fr); border-top: 1px solid rgba(255,179,199,.28); }
  .hb-hstats li, .hb-hstats li:first-child { flex-direction: row; align-items: baseline; gap: 12px; padding: 12px 0; border-left: 0; border-bottom: 1px solid rgba(255,179,199,.28); }
  .hb-hstats b { flex: none; min-width: 64px; font-size: 28px; }
  .hb-hstats span { font-size: 16px; line-height: 22px; }
  .hb-stack { height: 468px; }
  .hb-slabw { top: calc(8px + var(--k) * 96px); height: 160px; }   /* room for three-line labels */
  .hb-slab { width: 150px; height: 160px; }
  .hb-slab__face { width: 128px; height: 128px; margin: -64px 0 0 -64px; padding: 16px; }
  .hb-slab__face i { width: 34px; height: 34px; }
  .hb-slab__lab { left: 166px; width: calc(86vw - 166px); }
  .hb-slab__lab b { font-size: 17px; line-height: 22px; }
  .hb-card__get ul { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- tablets and phones, and touch screens of any size: 44px tap areas ---------- */
@media (max-width: 1023.98px), (hover: none) and (pointer: coarse) {
  .hb-quick li { padding-top: 8px; padding-bottom: 8px; }
  .hb-quick li a { min-height: 44px; }
}

/* ---------- touch screens: 44px taps, no hover lifts that stick ---------- */
@media (hover: none) and (pointer: coarse) {
  .hb-mcard__u a { height: 44px; }
  .hb-pick__alts a { height: 44px; }
  .hb-clear, .hb-reset { min-height: 44px; }
  .hb-card:hover, .hb-el:hover, html.wm-on .hb-methods .hb-mcard:hover { transform: none; }
}
/* @@ RESPONSIVE-HC END @@ */