/* =====================================================================================================
   t-test-lab.css (hand-written, 20 Oct 2026): the "test lab" template of the wine-and-rose landing pages.
   Pages: concept, idea screening, product, pack, claims, naming / logo / slogan, message, video ad, static and
   poster, audio ad and social feed testing (site-src/wine_templates/test-lab.py).
   21 Oct 2026 fixes: per-page stage tones (.tl-pin--ink|wine|plum|rose), method-specific step 3 (rank race, heatmap,
   waveform, feed/close-up split, just-about-right bars), a vertical how-it-works (.tl-howv), the no-motion grid for
   the sideways one, the list reset at zero specificity, the stop pill contrast, the eight concept faces.
   Loads after wine-chrome.css and wine-base.css. Prefix tl-. Every loop and scroll effect is armed only under
   html.wm-on (wine-motion.js); without it each drawing shows a still, complete frame. Loops sit inside
   [data-play], so they pause off screen (WCAG 2.2.2). transform / opacity only, plus clip-path for typing and
   the waveform, and two registered custom properties for the counters.
   ===================================================================================================== */

@property --tl-t { syntax: '<integer>'; inherits: false; initial-value: 19; }
@property --tl-n { syntax: '<integer>'; inherits: false; initial-value: 0; }

body.t-test-lab { --tl-acc: #ffb3c7; --tl-ink: #1e0a1a; --tl-card-shadow: 0 30px 70px rgba(10, 2, 8, .45); }
/* list reset at zero specificity (:where), so the margins set on .tl-vds, .tl-rank, .tl-md ul, .tl-heat ol ... apply */
:where(body.t-test-lab .wn-main ol[class^="tl-"], body.t-test-lab .wn-main ul[class^="tl-"], body.t-test-lab .wn-main ol[class*=" tl-"],
body.t-test-lab .wn-main ul[class*=" tl-"], body.t-test-lab .wn-main .tl-md ul, body.t-test-lab .wn-main .tl-heat ol,
body.t-test-lab .wn-main .tl-brief ul, body.t-test-lab .wn-main .tl-vset ul, body.t-test-lab .wn-main .tl-tally ul,
body.t-test-lab .wn-main .tl-rk__side ul) { list-style: none; margin: 0; padding: 0; }

/* ---------- shared bits ---------- */
.tl-chip { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px;
  background: #fff; color: var(--ink); font: 600 14px/18px var(--text); white-space: nowrap; box-shadow: 0 14px 34px rgba(10, 2, 8, .3); }
.tl-chip svg { color: var(--blue); flex: none; }
.tl-pp { display: inline-block; flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #fbe2bd 0 26%, transparent 27%),
    radial-gradient(circle at 50% 100%, #fbe2bd 0 44%, transparent 45%),
    linear-gradient(160deg, hsl(calc(330 + var(--h, 0) * .1), 60%, 42%), hsl(calc(340 + var(--h, 0) * .08), 55%, 26%)); }
.tl-type { display: inline-block; }
html.wm-on .tl-stim.is-live .tl-type { animation: tl-typing 2.4s steps(32) both 1.2s; }
html.wm-on .tl-layer.is-active .tl-type { animation: tl-typing 2s steps(30) both .5s; }
@keyframes tl-typing { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tl-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
@keyframes tl-rise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }

/* ---------- hero ---------- */
.tl-hero { padding: 172px 0 0; }
.tl-hero__glow2 { position: absolute; z-index: -1; left: -14%; bottom: -30%; width: 760px; height: 760px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(180, 35, 90, .38), rgba(180, 35, 90, 0)); }
.wn-hero--rose .tl-hero__glow2 { background: radial-gradient(closest-side, rgba(255, 179, 199, .55), rgba(255, 179, 199, 0)); }
.tl-hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 56px; align-items: center; }
.tl-hero--reverse .tl-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.tl-hero--reverse .tl-hero__txt { order: 2; }
.tl-hero__txt { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.tl-hero__txt .wn-hero__ctas { margin-top: 10px; }
.tl-hero__vis { position: relative; min-width: 0; }
.tl-hero .tl-stats { margin-top: 64px; }
.tl-hero .tl-stats .wn-stat { padding-bottom: 40px; }
.tl-hero .tl-stats .wn-stat b { font-size: 52px; }
/* stage: headline row, then the stimulus full width */
.tl-hero--stage .tl-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
.tl-hero--stage .tl-hero__txt { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 72px; row-gap: 16px; align-items: end; }
.tl-hero--stage .wn-crumbs { grid-column: 1 / -1; }
.tl-hero--stage .wn-kicker { grid-column: 1; grid-row: 2; }
.tl-hero--stage .tl-hero__h1 { grid-column: 1; grid-row: 3 / span 2; }
.tl-hero--stage .wn-lead { grid-column: 2; grid-row: 2 / span 2; font-size: 19px; line-height: 29px; }
.tl-hero--stage .wn-hero__ctas { grid-column: 2; grid-row: 4; margin-top: 4px; }
.tl-stim { position: relative; height: 520px; }
.tl-hero--stage .tl-stim { height: 450px; }
.tl-hero--stage .tl-stim--names { height: 430px; }
.tl-stim--video { height: 520px; }

/* ===== board (concept testing): three concept boards fanned out ===== */
.tl-board { position: absolute; inset: 0; }
.tl-board__fan { position: absolute; left: 0; right: 0; top: 0; height: 410px; }
.tl-cb { position: absolute; top: 34px; left: 50%; width: 236px; height: 336px; margin-left: -118px; padding: 16px; border-radius: 22px;
  display: flex; flex-direction: column; gap: 9px; background: #fff; color: var(--ink); box-shadow: var(--tl-card-shadow); }
.tl-cb--0 { transform: translate3d(-158px, 18px, 0) rotate(-9deg); }
.tl-cb--1 { z-index: 2; transform: translate3d(0, -8px, 0); box-shadow: 0 0 0 3px var(--tl-acc), var(--tl-card-shadow); }
.tl-cb--2 { transform: translate3d(158px, 18px, 0) rotate(9deg); }
html.wm-on .tl-stim.is-live .tl-cb { animation: tl-float 7s ease-in-out infinite; animation-delay: calc(var(--i) * -2.3s); }
@keyframes tl-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.tl-cb__k { display: flex; justify-content: space-between; font: 600 11px/14px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--grey70); }
.tl-cb__k span { color: var(--blue); }
.tl-cb__pic { height: 156px; flex: none; display: grid; place-items: center; border-radius: 14px;
  background: radial-gradient(70% 70% at 50% 40%, color-mix(in srgb, var(--c) 22%, #fff), #fbf0f3); }
/* the bag starts a little darker than its colour, so the white "Brand A" passes 4.5:1 on the champagne bag too */
.tl-bag { position: relative; width: 96px; height: 126px; border-radius: 10px 10px 16px 16px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--c) 72%, #1e0a1a), color-mix(in srgb, var(--c) 50%, #1e0a1a)); box-shadow: inset 0 0 0 3px rgba(255,255,255,.16), 0 14px 22px rgba(30,10,26,.25); }
.tl-bag::before, .tl-bag::after { content: ""; position: absolute; left: 0; right: 0; height: 9px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 4px, rgba(255,255,255,0) 4px 8px); }
.tl-bag::before { top: 4px; } .tl-bag::after { bottom: 5px; }
.tl-bag b { position: absolute; left: 6px; right: 6px; top: 22px; text-align: center; font: 600 13px/1 var(--display); color: #fff; letter-spacing: .02em; }
.tl-bag em { position: absolute; left: 50%; top: 50px; width: 50px; height: 44px; margin-left: -25px; border-radius: 50% 50% 46% 54%;
  background: radial-gradient(circle at 35% 35%, #fcefdc, #f6c98e 55%, #e9a55a); transform: rotate(-14deg); }
.tl-cb__n { font: 600 17px/22px var(--text); color: var(--ink); }
.tl-cb__d { font: 400 13px/19px var(--text); color: var(--grey70); }
.tl-board__route { position: absolute; left: 0; right: 0; bottom: 4px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.tl-board__dots { display: flex; gap: 9px; padding: 10px 16px; border-radius: 999px; background: rgba(26, 6, 22, .62); border: 1px solid rgba(255, 179, 199, .25); }
.tl-board__dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px rgba(255,255,255,.75); }
html.wm-on .tl-stim.is-live .tl-board__dots i { animation: tl-pop .5s var(--wn-ease-out) both; animation-delay: calc(var(--i) * 110ms + .5s); }
.tl-board__route p { font: 500 15px/20px var(--text); color: rgba(255, 255, 255, .86); }

/* ===== wall (idea screening): eighteen notes, four light up ===== */
.tl-wall { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 18px; }
.tl-wall__bar { display: flex; justify-content: center; gap: 10px; }
.tl-wall__bar span { padding: 8px 16px; border-radius: 999px; background: rgba(26, 6, 22, .62); border: 1px solid rgba(255, 179, 199, .28);
  font: 600 14px/18px var(--text); color: #fff; }
.tl-wall__grid { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 16px 18px; }
.tl-note { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 16px 16px 14px;
  border-radius: 6px 6px 18px 6px; background: #fcefdc; color: var(--ink); font: 600 16px/21px var(--text); transform: rotate(var(--r));
  box-shadow: 0 14px 30px rgba(10, 2, 8, .35); }
.tl-note:nth-child(3n+2) { background: #fde3ea; }
.tl-note:nth-child(3n) { background: #fff; }
.tl-note.is-rest { opacity: .74; }
.tl-note.is-lead { box-shadow: 0 0 0 3px var(--tl-acc), 0 0 34px rgba(246, 201, 142, .45), 0 14px 30px rgba(10, 2, 8, .35); z-index: 1; }
.tl-note.is-unclear { box-shadow: 0 0 0 2px #fff, 0 14px 30px rgba(10, 2, 8, .35); outline: 2px dashed #8e1a47; outline-offset: -8px; }
.tl-note__b { align-self: flex-start; padding: 4px 9px; border-radius: 999px; background: var(--ink); color: var(--wn-gold); font: 700 11px/14px var(--text);
  letter-spacing: .06em; text-transform: uppercase; font-style: normal; }
.tl-note__b--fix { background: #8e1a47; color: #fff; }
html.wm-on .tl-stim.is-live .tl-note { animation: tl-drop .7s var(--wn-ease-out) both; animation-delay: calc(var(--i) * 55ms); }
html.wm-on .tl-stim.is-live .tl-note.is-rest { animation: tl-drop .7s var(--wn-ease-out) both, tl-dim .8s ease both; animation-delay: calc(var(--i) * 55ms), 1.9s; }
html.wm-on .tl-stim.is-live .tl-note__b { animation: tl-pop .45s var(--wn-ease-out) both; animation-delay: calc(1.6s + var(--i) * 40ms); }
@keyframes tl-drop { from { opacity: 0; transform: translate3d(0, -26px, 0) rotate(calc(var(--r) * 3)); } to { opacity: 1; transform: rotate(var(--r)); } }
@keyframes tl-dim { from { opacity: 1; } to { opacity: .74; } }

/* ===== product (product testing): a blind tasting tray ===== */
.tl-prod { position: absolute; inset: 0; }
.tl-tray { position: absolute; left: 0; right: 0; top: 0; height: 270px; display: flex; align-items: center; justify-content: space-evenly; padding: 26px 30px 0 0;
  border-radius: 30px; background: linear-gradient(160deg, #fff, #fbf0f3); box-shadow: var(--wn-shadow); }
.tl-tray__l { position: absolute; left: 26px; top: 16px; font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.tl-bowl { position: relative; width: 138px; height: 138px; border-radius: 50%;
  background: radial-gradient(circle at 46% 42%, #ff9c8c 0 10%, var(--c) 30% 54%, #8e1a47 55% 57%, #fff 58% 100%);
  box-shadow: 0 20px 30px rgba(30, 10, 26, .18), inset 0 0 0 10px #f1e9ec; }
.tl-bowl b { position: absolute; left: 50%; bottom: -44px; transform: translateX(-50%); padding: 5px 14px; border-radius: 8px; background: var(--ink);
  color: #fff; font: 600 15px/18px var(--text); letter-spacing: .14em; }
.tl-steam { position: absolute; left: 50%; top: -46px; width: 54px; height: 42px; margin-left: -27px; display: flex; justify-content: space-between; }
.tl-steam i { width: 6px; height: 36px; border-radius: 6px; background: linear-gradient(180deg, rgba(180,35,90,0), rgba(180,35,90,.28)); }
/* a tasting spoon beside each bowl */
.tl-spoon { position: absolute; right: -34px; top: 30px; width: 18px; height: 92px; transform: rotate(14deg); }
.tl-spoon::before { content: ""; position: absolute; left: 0; top: 0; width: 18px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #f1e9ec, #c9bcc2); box-shadow: 0 4px 8px rgba(30,10,26,.15); }
.tl-spoon::after { content: ""; position: absolute; left: 7px; top: 22px; width: 4px; height: 70px; border-radius: 3px; background: linear-gradient(90deg, #ddd3d7, #b9aab1); }
html.wm-on .tl-stim.is-live .tl-steam i { animation: tl-steam 3.2s ease-in-out infinite; }
.tl-steam i:nth-child(2) { animation-delay: -1s !important; } .tl-steam i:nth-child(3) { animation-delay: -2s !important; }
@keyframes tl-steam { 0% { opacity: 0; transform: translate3d(0, 14px, 0) scaleY(.6); } 40% { opacity: 1; } 100% { opacity: 0; transform: translate3d(4px, -18px, 0) scaleY(1.1); } }
.tl-taste { position: absolute; right: 0; bottom: 0; width: 330px; display: flex; flex-direction: column; gap: 14px; padding: 22px 24px;
  border-radius: 22px; background: var(--ink); color: #fff; box-shadow: var(--tl-card-shadow); }
.tl-taste__k { font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--wn-gold); }
.tl-taste__t { margin-top: -8px; font: 500 22px/28px var(--display); }
.tl-taste__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 14px/18px var(--text); color: rgba(255,255,255,.86); }
.tl-taste__row b { font: 600 14px/18px var(--text); color: var(--wn-gold); }
.tl-dots7 { display: flex; gap: 5px; }
.tl-dots7 i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255, 179, 199, .45); }
.tl-dots7 i.on { background: var(--mint); border-color: var(--mint); }
.tl-jar p { margin-bottom: 8px; font: 500 14px/18px var(--text); color: rgba(255,255,255,.86); }
.tl-jar__s { position: relative; display: grid; grid-template-columns: 1fr 1.3fr 1fr; height: 36px; border-radius: 10px; }
.tl-jar__s span { display: grid; place-items: center; text-align: center; padding: 0 4px; font: 600 11px/13px var(--text); background: rgba(255,179,199,.14); color: rgba(255,255,255,.8); }
.tl-jar__s span:first-child { border-radius: 10px 0 0 10px; } .tl-jar__s span:nth-child(3) { border-radius: 0 10px 10px 0; }
.tl-jar__s span:nth-child(2) { background: rgba(246, 201, 142, .3); color: #fff; }
.tl-jar__m { position: absolute; top: -7px; left: calc(16% + var(--p, 1) * 34%); width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 3px rgba(214, 51, 94, .8); }
.tl-taste .tl-jar__m { left: 26%; }
html.wm-on .tl-stim.is-live .tl-taste .tl-jar__m { animation: tl-jar 6s ease-in-out infinite; }
@keyframes tl-jar { 0%, 100% { transform: translateX(0); } 35% { transform: translateX(90px); } 65% { transform: translateX(40px); } }

/* ===== shelf (pack testing): your design between four rivals ===== */
.tl-shelf { position: absolute; inset: 0; }
.tl-shelf__unit { position: absolute; left: 7%; right: 7%; top: 30px; bottom: 6px; display: flex; flex-direction: column; overflow: hidden; padding: 44px 34px 0;
  border-radius: 20px 20px 0 0; background: linear-gradient(180deg, #3a0f2c, #1e0719); box-shadow: inset 0 0 0 12px #4a1238, 0 30px 70px rgba(10, 2, 8, .55); }
.tl-shelf__row { position: relative; display: flex; align-items: flex-end; gap: 12px; height: 236px; }
.tl-shelf__board { flex: none; height: 18px; margin: 0 -34px; background: linear-gradient(180deg, #f6c98e, #c98a4a); box-shadow: 0 10px 16px rgba(0, 0, 0, .4); }
.tl-shelf__row--2 { height: 110px; gap: 14px; }
.tl-pouch { position: relative; flex: 1 1 0; height: 210px; border-radius: 14px 14px 20px 20px;
  background: linear-gradient(172deg, var(--c2) 0 32%, var(--c) 32% 100%); box-shadow: inset -12px 0 18px rgba(0, 0, 0, .2), inset 0 -6px 0 rgba(0,0,0,.12); }
.tl-pouch::before { content: ""; position: absolute; left: 7px; right: 7px; top: 9px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .45); }
.tl-pouch i { position: absolute; left: 16%; right: 16%; top: 46%; height: 26%; border-radius: 50%;
  background: radial-gradient(circle, #fcefdc 0 36%, #e9a55a 37% 66%, rgba(233,165,90,0) 67%); }
.tl-pouch.is-you { box-shadow: 0 0 0 3px #f6c98e, 0 0 30px rgba(246, 201, 142, .55), inset -12px 0 18px rgba(0, 0, 0, .2); }
.tl-pouch b { position: absolute; left: 50%; top: -36px; transform: translateX(-50%); padding: 5px 11px; border-radius: 999px; background: var(--wn-gold); color: var(--ink);
  font: 700 12px/14px var(--text); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.tl-box { flex: 1 1 0; height: 96px; border-radius: 6px 6px 0 0; background: linear-gradient(160deg, var(--c), #1e0a1a 150%);
  box-shadow: inset -8px 0 14px rgba(0, 0, 0, .25); }
.tl-clicks { position: absolute; inset: 0; pointer-events: none; }
.tl-clicks u, .tl-mini u { position: absolute; left: var(--x); top: var(--y); width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 4px rgba(232, 70, 111, .55), 0 0 18px 6px rgba(232, 70, 111, .55); }
html.wm-on .tl-stim.is-live .tl-clicks u { animation: tl-pop .45s var(--wn-ease-out) both; animation-delay: calc(var(--i) * 180ms + .8s); }
.tl-chip--q { left: 2%; top: 0; }
.tl-chip--t { right: 2%; top: 0; }
.tl-chip--g { right: 9%; bottom: 30px; background: var(--ink); color: #fff; border: 1px solid rgba(255,179,199,.3); }

/* ===== claims (claims testing): a pouch with claims, and a best-and-worst screen ===== */
.tl-claims { position: absolute; inset: 0; }
.tl-pack { position: absolute; left: 3%; top: 40px; width: 280px; height: 420px; padding: 34px 24px; border-radius: 34px 34px 46px 46px;
  background: linear-gradient(168deg, #fff 0 34%, #ffb3c7 34% 100%); box-shadow: var(--wn-shadow); }
.tl-pack__cap { position: absolute; top: -22px; left: 50%; width: 62px; height: 30px; margin-left: -31px; border-radius: 10px 10px 4px 4px; background: #8e1a47; }
.tl-pack__brand { display: block; font: 600 30px/34px var(--display); color: var(--ink); }
.tl-pack__name { display: block; margin-top: 4px; font: 500 14px/18px var(--text); color: var(--grey70); }
.tl-pack__drop { position: absolute; left: 50%; top: 186px; width: 110px; height: 110px; margin-left: -55px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: radial-gradient(circle at 60% 40%, #fff 0 12%, #f6c98e 13% 46%, #e9a55a 47%); box-shadow: 0 12px 26px rgba(142, 26, 71, .25); }
.tl-sticker { position: absolute; padding: 9px 14px; border-radius: 999px; font: 600 13px/16px var(--text); white-space: nowrap; box-shadow: 0 10px 22px rgba(30,10,26,.22); }
.tl-sticker--1 { left: -7%; top: 98px; background: var(--ink); color: #fff; transform: rotate(-4deg); }
.tl-sticker--2 { left: -9%; top: 300px; background: var(--wn-gold); color: var(--ink); transform: rotate(5deg); }
.tl-sticker--3 { left: 24%; bottom: 26px; background: #fff; color: var(--blue); transform: rotate(-3deg); }
html.wm-on .tl-stim.is-live .tl-sticker { animation: tl-pop .5s var(--wn-ease-out) both; }
html.wm-on .tl-stim.is-live .tl-sticker--2 { animation-delay: .25s; } html.wm-on .tl-stim.is-live .tl-sticker--3 { animation-delay: .5s; }
.tl-md--hero { position: absolute; right: 0; top: 150px; width: 340px; padding: 22px 22px 12px; border-radius: 22px; background: #fff; box-shadow: var(--tl-card-shadow); z-index: 2; }
.tl-md__k, .tl-q__k { font: 600 11px/14px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.tl-md__t { margin: 6px 0 12px; font: 600 17px/23px var(--text); color: var(--ink); }
.tl-md__h { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; font: 700 11px/14px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--grey70); text-align: center; }
.tl-md ul { margin-top: 6px; }
.tl-md li { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; padding: 10px 0; border-top: 1px solid var(--wn-line);
  font: 500 14px/19px var(--text); color: var(--ink); }
.tl-md__m, .tl-md__l { justify-self: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #ddd3d7; }
.tl-md li.is-most .tl-md__m { border-color: var(--purple); background: radial-gradient(circle, #fff 0 28%, var(--purple) 30%); }
.tl-md li.is-least .tl-md__l { border-color: #8e1a47; background: radial-gradient(circle, #fff 0 28%, #8e1a47 30%); }
html.wm-on .tl-stim.is-live .is-most .tl-md__m, html.wm-on .tl-stim.is-live .is-least .tl-md__l { animation: tl-pop .45s var(--wn-ease-out) both 1s; }
html.wm-on .tl-stim.is-live .is-least .tl-md__l { animation-delay: 1.6s; }

/* ===== names (naming, logo & slogan testing): four candidates set in type ===== */
.tl-names { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 18px; }
.tl-names__bar { display: flex; justify-content: center; gap: 10px; }
.tl-names__bar span { padding: 8px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--wn-line); font: 600 14px/18px var(--text); color: var(--grey70); }
.tl-names__row { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.tl-name { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 26px 24px 22px; overflow: hidden;
  border-radius: 26px; background: #fff; color: var(--ink); box-shadow: var(--wn-shadow); }
.tl-name::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 3px var(--purple); opacity: 0; pointer-events: none; }
.tl-name--qu { background: var(--ink); color: #fff; }
.tl-name--qu::after { opacity: 1; box-shadow: inset 0 0 0 3px var(--mint); }
.tl-name__mk svg { width: 46px; height: 46px; fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tl-name--qu .tl-name__mk svg { stroke: var(--mint); }
.tl-name b { display: block; overflow-wrap: anywhere; }
.tl-name--sp b { font: 600 42px/46px var(--display); letter-spacing: -1px; }
.tl-name--qu b { font: 700 40px/46px var(--text); letter-spacing: -1.4px; }
.tl-name--lu b { font: italic 400 42px/46px Georgia, 'Times New Roman', serif; letter-spacing: -.5px; }
.tl-name--fw b { font: 500 30px/40px var(--display); letter-spacing: .14em; text-transform: uppercase; }
.tl-name__f { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; font: 500 13px/16px var(--text); color: var(--grey70); }
.tl-name--qu .tl-name__f { color: rgba(255,255,255,.8); }
.tl-name__f i { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--wn-rose-10); overflow: hidden; }
.tl-name--qu .tl-name__f i { background: rgba(255,255,255,.14); }
.tl-name__f u { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--cyan)); transform-origin: 0 50%; transform: scaleX(var(--v)); }
.tl-name__f em { grid-row: 1; grid-column: 2; font: 600 15px/18px var(--text); font-style: normal; color: var(--ink); }
.tl-name--qu .tl-name__f em { color: #fff; }
html.wm-on .tl-stim.is-live .tl-name__f u { animation: tl-grow 1.3s var(--wn-ease-out) both; animation-delay: calc(.6s + var(--i) * 160ms); }
@keyframes tl-grow { from { transform: scaleX(0); } }
html.wm-on .tl-stim.is-live .tl-name:not(.tl-name--qu)::after { animation: tl-spot 8s ease-in-out infinite; animation-delay: calc(var(--i) * 2s); }
@keyframes tl-spot { 0%, 24%, 100% { opacity: 0; } 6%, 18% { opacity: 1; } }
.tl-names__bubble { align-self: center; display: flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: 999px; background: var(--ink); color: #fff;
  font: 500 16px/20px var(--text); box-shadow: 0 16px 34px rgba(30,10,26,.25); }
.tl-names__q { color: var(--mint); font-weight: 600; }

/* ===== lines (message testing): a billboard, what you meant and what they heard ===== */
.tl-bill { position: absolute; inset: 0; }
.tl-bill__board { position: absolute; left: 0; right: 0; top: 10px; height: 290px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  padding: 28px 36px; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 0 0 12px #33102c, 0 0 0 13px rgba(255,179,199,.3), 0 40px 80px rgba(10, 2, 8, .6); }
.tl-bill__k { font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.tl-bill__lines { display: flex; flex-direction: column; gap: 4px; }
.tl-bill__lines span { font: 500 22px/28px var(--display); color: #6e6269; letter-spacing: -.3px; }
.tl-bill__lines span:nth-child(2) { font-size: 42px; line-height: 50px; color: var(--ink); letter-spacing: -1px; }
html.wm-on .tl-stim.is-live .tl-bill__lines { animation: tl-reel 1.2s var(--wn-ease-out) both .3s; }
@keyframes tl-reel { from { transform: translate3d(0, 46px, 0); opacity: .3; } to { transform: none; opacity: 1; } }
.tl-bill__brand { font: 600 14px/18px var(--text); color: var(--grey70); }
.tl-bill__leg { position: absolute; top: 300px; width: 16px; height: 46px; background: linear-gradient(90deg, #33102c, #4a1238); }
.tl-bill__leg--l { left: 22%; } .tl-bill__leg--r { right: 22%; }
.tl-bill__said { position: absolute; left: 4%; right: 4%; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.tl-bub { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 20px 20px 20px 6px; font: 500 17px/24px var(--text);
  background: rgba(26, 6, 22, .82); border: 1px solid rgba(255, 179, 199, .3); color: #fff; }
.tl-bub b { font: 700 11px/14px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.tl-bub--heard { border-radius: 20px 20px 6px 20px; background: var(--mint); border-color: transparent; color: var(--ink); }
.tl-bub--heard b { color: #8e1a47; }

/* ===== video (video ad testing): a film that plays from start to finish ===== */
.tl-film { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tl-film__tabs { display: flex; gap: 4px; margin-bottom: 14px; padding: 5px; border-radius: 999px; background: rgba(26, 6, 22, .7); border: 1px solid rgba(255, 179, 199, .25); }
.tl-film__tabs span { padding: 7px 16px; border-radius: 999px; font: 600 13px/16px var(--text); color: rgba(255, 255, 255, .78); }
.tl-film__tabs span.on { background: #fff; color: var(--ink); }
.tl-film__screen { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 18px 18px 0 0; background: #14040f;
  box-shadow: 0 0 0 1px rgba(255, 179, 199, .25), 0 40px 90px rgba(10, 2, 8, .7); }
.tl-scn { position: absolute; inset: 0; opacity: 0; }
.tl-scn--2 { opacity: 1; }
.tl-scn--1 { background: linear-gradient(180deg, #3a0f2c 0%, #8e1a47 38%, #e07a4a 72%, #f6c98e 100%); }
.tl-sun { position: absolute; left: 50%; bottom: 22%; width: 120px; height: 120px; margin-left: -60px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 20%, #fcefdc 40%, #f6c98e 70%); box-shadow: 0 0 60px 20px rgba(246, 201, 142, .6); }
.tl-city { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: #1e0a1a;
  clip-path: polygon(0 60%, 6% 60%, 6% 30%, 12% 30%, 12% 50%, 18% 50%, 18% 12%, 24% 12%, 24% 46%, 31% 46%, 31% 26%, 38% 26%, 38% 56%, 46% 56%, 46% 8%, 52% 8%, 52% 40%, 60% 40%, 60% 22%, 67% 22%, 67% 52%, 74% 52%, 74% 18%, 81% 18%, 81% 44%, 88% 44%, 88% 30%, 94% 30%, 94% 58%, 100% 58%, 100% 100%, 0 100%); }
.tl-scn--2 { background: radial-gradient(60% 70% at 50% 60%, #6e1a4c, #1e0a1a 80%); }
.tl-cup { position: absolute; left: 50%; bottom: 14%; width: 150px; height: 170px; margin-left: -75px; border-radius: 10px 10px 34px 34px;
  background: linear-gradient(90deg, #f1e9ec, #fff 40%, #ddd3d7); clip-path: polygon(0 0, 100% 0, 88% 100%, 12% 100%); }
.tl-cup b { position: absolute; left: 0; right: 0; top: 38%; height: 34%; background: linear-gradient(90deg, #b4235a, #d6335e 45%, #8e1a47); }
.tl-steam2 { position: absolute; left: 50%; bottom: 52%; width: 90px; height: 90px; margin-left: -45px; display: flex; justify-content: space-around; }
.tl-steam2 u { width: 8px; height: 70px; border-radius: 8px; background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.4)); }
html.wm-on .tl-stim.is-live .tl-steam2 u { animation: tl-steam 2.6s ease-in-out infinite; }
.tl-steam2 u:nth-child(2) { animation-delay: -.9s !important; } .tl-steam2 u:nth-child(3) { animation-delay: -1.7s !important; }
.tl-scn--3 { background: linear-gradient(160deg, #8e1a47, #e07a4a 70%, #f6c98e); }
.tl-leaf { position: absolute; left: 30%; top: 12%; width: 60px; height: 34px; border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #f6c98e, #e9a55a 60%, #c4452f); transform: rotate(-24deg); }
.tl-leaf--2 { left: 62%; top: 34%; width: 44px; height: 26px; transform: rotate(32deg); }
html.wm-on .tl-stim.is-live .tl-leaf { animation: tl-leaf 12s linear infinite; }
@keyframes tl-leaf { 0%, 50% { translate: 0 -30px; } 80% { translate: 30px 120px; } 100% { translate: 40px 160px; } }
.tl-hands { position: absolute; left: 50%; bottom: -30px; width: 220px; height: 140px; margin-left: -110px; border-radius: 110px 110px 0 0; background: rgba(30, 10, 26, .55); }
.tl-scn--4 { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--wn-hero-bg); }
.tl-endcard { font: 600 54px/1 var(--display); letter-spacing: -1.4px; color: #fff; }
.tl-scn--4 span { font: 500 18px/24px var(--text); color: var(--mint); }
.tl-film__badge { position: absolute; left: 14px; top: 14px; padding: 6px 12px; border-radius: 999px; background: rgba(20, 4, 15, .72); color: #fff;
  font: 700 11px/14px var(--text); letter-spacing: .08em; text-transform: uppercase; }
/* positioned, so the screen's shadow (a positioned sibling) no longer greys the white bar and its timecode */
.tl-film__ctl { position: relative; z-index: 1; width: 100%; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 0 0 18px 18px; background: #fff; color: var(--ink);
  box-shadow: 0 40px 90px rgba(10, 2, 8, .5); }
.tl-film__play { display: grid; place-items: center; color: var(--purple); }
.tl-film__prog { flex: 1; height: 6px; border-radius: 999px; background: var(--wn-rose-10); overflow: hidden; }
.tl-film__prog i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d6335e, #e8466f); transform-origin: 0 50%; transform: scaleX(.63); }
.tl-film__tc { font: 600 13px/16px var(--text); font-variant-numeric: tabular-nums; color: var(--grey70); white-space: nowrap; }
.tl-tc__run { display: none; }
.tl-film__next { position: relative; display: grid; font: 600 13px/16px var(--text); white-space: nowrap; }
.tl-next__lock, .tl-next__go { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; }
.tl-next__lock { background: var(--wn-rose-10); color: var(--blue70); }
.tl-next__go { background: var(--purple); color: #fff; opacity: 0; }
.tl-chip--l { left: -28px; bottom: 0; }
.tl-chip--r { right: -18px; top: 8px; background: var(--ink); color: #fff; border: 1px solid rgba(255,179,199,.3); }
/* the loop: 12 s for a 30-second spot (scenes, progress, timecode, Next unlocks at the end) */
html.wm-on .tl-stim--video.is-live .tl-scn--1 { animation: tl-s1 12s linear infinite; }
html.wm-on .tl-stim--video.is-live .tl-scn--2 { animation: tl-s2 12s linear infinite; }
html.wm-on .tl-stim--video.is-live .tl-scn--3 { animation: tl-s3 12s linear infinite; }
html.wm-on .tl-stim--video.is-live .tl-scn--4 { animation: tl-s4 12s linear infinite; }
html.wm-on .tl-stim--video.is-live .tl-sun { animation: tl-sun 12s ease-out infinite; }
html.wm-on .tl-stim--video.is-live .tl-film__prog i { animation: tl-prog 12s linear infinite; }
html.wm-on .tl-stim--video .tl-tc__run { display: inline; }
html.wm-on .tl-stim--video .tl-tc__still { display: none; }
html.wm-on .tl-tc__run { counter-reset: tc var(--tl-t); }
html.wm-on .tl-tc__run::before { content: "0:" counter(tc, decimal-leading-zero); }
html.wm-on .tl-stim--video.is-live .tl-tc__run { animation: tl-tc 12s linear infinite; }
html.wm-on .tl-stim--video.is-live .tl-next__lock { animation: tl-lock 12s linear infinite; }
html.wm-on .tl-stim--video.is-live .tl-next__go { animation: tl-go 12s linear infinite; }
/* no motion (prefers-reduced-motion, ?static=1, no JS): the spot's end state, so the point of the drawing shows - the
   end card, 0:30 / 0:30 (the still timecode in the HTML), the bar full and "Next" unlocked (21 Oct 2026 review fix) */
html:not(.wm-on) .tl-film .tl-scn--2 { opacity: 0; }
html:not(.wm-on) .tl-film .tl-scn--4 { opacity: 1; }
html:not(.wm-on) .tl-film__prog i { transform: none; }
html:not(.wm-on) .tl-film .tl-next__lock { opacity: 0; }
html:not(.wm-on) .tl-film .tl-next__go { opacity: 1; }
@keyframes tl-s1 { 0% { opacity: 1; } 22% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes tl-s2 { 0%, 22% { opacity: 0; } 25%, 47% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes tl-s3 { 0%, 47% { opacity: 0; } 50%, 72% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes tl-s4 { 0%, 72% { opacity: 0; } 76%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tl-sun { 0% { transform: translate3d(0, 70px, 0); } 24%, 100% { transform: none; } }
@keyframes tl-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tl-tc { from { --tl-t: 0; } to { --tl-t: 30; } }
@keyframes tl-lock { 0%, 95% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes tl-go { 0%, 95% { opacity: 0; transform: scale(.9); } 97%, 100% { opacity: 1; transform: none; } }

/* ===== poster (static & poster testing): a bus shelter and its first-look heat ===== */
.tl-shelter { position: absolute; inset: 0; }
.tl-shelter__roof { position: absolute; left: 0; width: 66%; top: 0; height: 22px; border-radius: 14px 14px 4px 4px; background: linear-gradient(#6e6269, #33102c); }
.tl-shelter__glass { position: absolute; left: 2%; width: 62%; top: 22px; bottom: 0; padding: 16px 16px 40px; border: 7px solid #554a51; border-top: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .03)); }
.tl-shelter__post { display: none; }
.tl-poster { position: relative; height: 100%; overflow: hidden; border-radius: 6px; background: linear-gradient(180deg, #fcefdc 0%, #f7b48a 46%, #e07a4a 60%);
  box-shadow: 0 0 46px rgba(246, 201, 142, .4); }
.tl-poster__sun { position: absolute; right: 12%; top: 26%; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle, #fff 0 24%, #f6c98e 60%); }
.tl-poster__sea { position: absolute; left: 0; right: 0; top: 58%; height: 16%; background: repeating-linear-gradient(180deg, #b4235a 0 7px, #d6335e 7px 13px); opacity: .9; }
.tl-poster__sand { position: absolute; left: 0; right: 0; top: 74%; bottom: 0; background: linear-gradient(180deg, #fbe2bd, #f6c98e); }
.tl-poster__hl { position: absolute; left: 8%; top: 9%; right: 8%; font: 600 28px/32px var(--display); letter-spacing: -.6px; color: var(--ink); }
.tl-poster__btl { position: absolute; left: 14%; top: 46%; width: 44px; height: 108px; border-radius: 12px 12px 8px 8px; background: linear-gradient(90deg, #8e1a47, #d6335e 50%, #8e1a47);
  box-shadow: 0 10px 18px rgba(30,10,26,.3); }
.tl-poster__btl::before { content: ""; position: absolute; left: 12px; right: 12px; top: -14px; height: 16px; border-radius: 4px 4px 0 0; background: #fff; }
.tl-poster__logo { position: absolute; right: 7%; bottom: 6%; padding: 6px 10px; border-radius: 6px; background: var(--ink); color: #fff; font: 600 12px/14px var(--text); }
.tl-blob { position: absolute; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(246, 201, 142, .8) 30%, rgba(232, 70, 111, .6) 58%, rgba(232, 70, 111, 0)); mix-blend-mode: multiply; }
.tl-area { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 2px dashed rgba(30, 10, 26, .75); border-radius: 8px; }
.tl-area b { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--ink);
  color: #fff; font: 700 12px/1 var(--text); }
html.wm-on .tl-stim.is-live .tl-blob { animation: tl-blob 1s var(--wn-ease-out) both; animation-delay: calc(var(--i) * .35s + .6s); }
html.wm-on .tl-stim.is-live .tl-area { animation: tl-pop .5s var(--wn-ease-out) both 2.2s; }
@keyframes tl-blob { from { opacity: 0; transform: translate(-50%, -50%) scale(.3); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.tl-heat { position: absolute; right: 0; top: 70px; width: 230px; padding: 20px; border-radius: 20px; background: #fff; color: var(--ink); box-shadow: var(--tl-card-shadow); }
.tl-heat__q { font: 600 15px/20px var(--text); }
.tl-heat ol { margin: 12px 0 10px; }
.tl-heat li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--wn-line); font: 500 14px/18px var(--text); }
.tl-heat li b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font: 700 11px/1 var(--text); }
.tl-heat li em { font: 600 15px/18px var(--text); font-style: normal; color: var(--blue); }
.tl-heat__n { font: 400 12px/16px var(--text); color: var(--grey70); }

/* ===== audio (audio ad testing): one play, a waveform and an answer out loud ===== */
.tl-audio { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 20px; }
.tl-audio__card { padding: 26px 26px 20px; border-radius: 26px; background: var(--wn-glass-bg); border: 1px solid rgba(255, 179, 199, .28);
  box-shadow: 0 0 0 1px rgba(232,70,111,.12), 0 0 46px rgba(232,70,111,.2), var(--tl-card-shadow); }
.tl-audio__top { display: flex; align-items: center; gap: 16px; }
.tl-audio__art { width: 66px; height: 66px; flex: none; display: grid; place-items: center; border-radius: 18px; color: #fff; background: linear-gradient(150deg, #e8466f, #8e1a47); }
.tl-audio__k { font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.tl-audio__t { margin-top: 4px; font: 500 24px/30px var(--display); color: #fff; }
.tl-audio__seg { margin-left: auto; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .08); font: 600 13px/16px var(--text); }
.tl-audio__seg b, .tl-audio__seg span { padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
.tl-audio__seg b { background: #fff; color: var(--ink); } .tl-audio__seg span { color: rgba(255, 255, 255, .78); }
.tl-audio__wave { position: relative; height: 130px; margin: 24px 0 14px; overflow: hidden; }
.tl-audio__bars { position: absolute; inset: 0; display: flex; align-items: center; gap: 4px; }
.tl-audio__bars i { flex: 1 1 0; height: calc(var(--h) * 1%); border-radius: 3px; background: rgba(255, 179, 199, .24); }
.tl-audio__bars--on { clip-path: inset(0 38% 0 0); }
.tl-audio__bars--on i { background: linear-gradient(180deg, #ffb3c7, #d6335e); }
.tl-audio__head { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; border-right: 2px solid #fff; transform: translateX(-38%); pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, .8)); }
html.wm-on .tl-stim.is-live .tl-audio__bars--on { animation: tl-wave 10s linear infinite; }
html.wm-on .tl-stim.is-live .tl-audio__head { animation: tl-head 10s linear infinite; }
@keyframes tl-wave { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes tl-head { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.tl-audio__ctl { display: flex; align-items: center; justify-content: space-between; font: 600 13px/16px var(--text); color: rgba(255, 255, 255, .78); }
.tl-audio__once { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 179, 199, .16); color: var(--mint); }
.tl-audio__ans { align-self: flex-end; width: 86%; display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 22px 22px 6px 22px;
  background: #fff; color: var(--ink); box-shadow: var(--tl-card-shadow); }
.tl-audio__mic { position: relative; width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--purple); color: #fff; }
.tl-audio__mic::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(214, 51, 94, .5); }
html.wm-on .tl-stim.is-live .tl-audio__mic::after { animation: tl-ring 1.8s ease-out infinite; }
@keyframes tl-ring { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.tl-audio__ak { font: 600 11px/14px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.tl-audio__ans .tl-type { margin-top: 4px; font: 500 16px/22px var(--text); }

/* ===== feed (social feed testing): a phone scrolling a mock feed ===== */
.tl-feedhero { position: absolute; inset: 0; }
.tl-phone { position: relative; width: 300px; height: 470px; padding: 10px; border-radius: 40px; background: #14040f; flex: none;
  box-shadow: 0 0 0 1px rgba(255, 179, 199, .25), 0 30px 70px rgba(10, 2, 8, .5); }
.tl-phone__notch { position: absolute; z-index: 2; top: 16px; left: 50%; width: 76px; height: 20px; margin-left: -38px; border-radius: 12px; background: #14040f; }
.tl-phone--feed { position: absolute; left: 0; top: 0; width: 270px; height: 520px; }
.tl-feed { height: 100%; overflow: hidden; border-radius: 31px; background: #f7f2f4; }
.tl-feed__track { display: flex; flex-direction: column; gap: 12px; padding: 44px 12px 12px; }
html.wm-on .tl-stim.is-live .tl-feed__track { animation: tl-scroll 16s linear infinite; }
/* without motion the still frame shows the sponsored post, not two ordinary posts with the ad cut off below */
html:not(.wm-on) .tl-feed__track { transform: translate3d(0, -410px, 0); }
@keyframes tl-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, calc(-50% - 6px), 0); } }
.tl-post { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; background: #fff; box-shadow: 0 2px 8px rgba(30, 10, 26, .06); }
.tl-post__who { display: flex; align-items: center; gap: 8px; font: 600 12px/14px var(--text); color: var(--ink); }
.tl-post__who .tl-pp { width: 26px; height: 26px; }
.tl-post__who b:empty { width: 90px; height: 8px; border-radius: 4px; background: #e8dfe3; }
.tl-post__who em { font: 500 11px/14px var(--text); font-style: normal; color: var(--grey70); white-space: nowrap; }
.tl-post__who em::before { content: "\00b7\00a0"; }
.tl-post__media { height: 140px; border-radius: 10px; background: linear-gradient(150deg, #fde3ea, #f3a3ba); }
.tl-post--1 .tl-post__media { height: 110px; background: linear-gradient(150deg, #fcefdc, #f7b48a); }
.tl-post--2 .tl-post__media { background: linear-gradient(150deg, #e8dfe3, #a1959b); }
.tl-post__ln { display: flex; flex-direction: column; gap: 5px; }
.tl-post__ln i { height: 7px; border-radius: 4px; background: #e8dfe3; } .tl-post__ln i + i { width: 60%; }
.tl-post--ad { box-shadow: 0 0 0 3px var(--cyan), 0 8px 22px rgba(232, 70, 111, .3); }
.tl-post--ad .tl-post__media { height: 230px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background: linear-gradient(165deg, #a51f55, #b84c34 85%); color: #fff; }
.tl-post--ad .tl-post__media b { padding: 0 16px; font: 600 18px/23px var(--display); text-align: center; text-shadow: 0 1px 10px rgba(30, 10, 26, .45); }
.tl-feedq { position: absolute; right: 0; top: 96px; width: 276px; padding: 22px; border-radius: 22px; background: #fff; color: var(--ink); box-shadow: var(--wn-shadow); }
.tl-feedq .tl-q__t { margin: 6px 0 10px; }
/* right of the phone, under the question card: never over the phone's bezel */
.tl-chip--feed { right: 0; bottom: 36px; background: var(--ink); color: #fff; white-space: normal; max-width: 246px; border-radius: 18px; }
.tl-check li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--wn-line); font: 500 14px/18px var(--text); color: var(--ink); }
.tl-check li i { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 6px; border: 2px solid #ddd3d7; color: #fff; }
.tl-check li.on i { background: var(--purple); border-color: var(--purple); }

/* ---------- the lab note ---------- */
.tl-note-sec { padding-bottom: 0; overflow: hidden; }
.tl-labnote { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: end; }
.tl-labnote__h { display: flex; flex-direction: column; gap: 18px; }
.tl-labnote__p p { font-size: 20px; line-height: 32px; }
.tl-bench { margin-top: 80px; padding: 26px 0 30px; border-top: 1px solid var(--wn-line); background: var(--wn-page); }
.tl-bench__k { padding: 0 7%; margin-bottom: 16px; font: 600 13px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.tl-fmt { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 999px; background: #fff; border: 1px solid var(--wn-line);
  font: 500 20px/24px var(--display); color: var(--ink); white-space: nowrap; }
.tl-fmt svg { color: var(--purple); }

/* ---------- the pinned story ---------- */
.tl-pin { position: relative; background: radial-gradient(50% 60% at 90% 10%, rgba(180, 35, 90, .35), rgba(180, 35, 90, 0) 70%),
  radial-gradient(40% 50% at 0% 100%, rgba(142, 26, 71, .45), rgba(142, 26, 71, 0) 70%), #1e0a1a;
  color: #fff; --wn-h: #fff; --wn-k: var(--mint); --wn-tx: rgba(255, 255, 255, .86); --wn-mut: rgba(255, 255, 255, .72); }
.tl-pin__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 72px; padding-top: 112px; padding-bottom: 112px; align-items: start; }
html.wm-on .tl-pin__in { height: 100%; padding-top: 168px; padding-bottom: 32px; }
.tl-pin__side { display: flex; flex-direction: column; gap: 22px; }
html.wm-on .tl-pin__side { position: relative; }
.tl-pin__side .wn-h2 { font-size: 44px; line-height: 52px; }
.tl-pin__nav { margin-top: 6px; }
.tl-pin__nav li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 14px 0; border-top: 1px solid rgba(255, 179, 199, .16);
  font: 500 17px/23px var(--text); color: var(--tl-nav, rgba(255, 255, 255, .66)); transition: color .4s ease; }
.tl-pin__nav li b { font: 500 14px/1 var(--display); color: var(--tl-nav-b, rgba(255, 179, 199, .74)); transition: color .4s ease; }
html.wm-on .tl-pin[data-active="0"] .tl-pin__nav li:nth-child(1), html.wm-on .tl-pin[data-active="1"] .tl-pin__nav li:nth-child(2),
html.wm-on .tl-pin[data-active="2"] .tl-pin__nav li:nth-child(3), html.wm-on .tl-pin[data-active="3"] .tl-pin__nav li:nth-child(4) { color: var(--tl-nav-on, #fff); }
html.wm-on .tl-pin[data-active="0"] .tl-pin__nav li:nth-child(1) b, html.wm-on .tl-pin[data-active="1"] .tl-pin__nav li:nth-child(2) b,
html.wm-on .tl-pin[data-active="2"] .tl-pin__nav li:nth-child(3) b, html.wm-on .tl-pin[data-active="3"] .tl-pin__nav li:nth-child(4) b { color: var(--tl-nav-onb, var(--tl-acc)); }
.tl-pin__layers { display: flex; flex-direction: column; gap: 96px; min-width: 0; }
html.wm-on .tl-pin__layers { display: grid; gap: 0; }
.tl-layer { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.tl-layer__cap { max-width: 660px; display: flex; flex-direction: column; gap: 8px; }
.tl-layer__n { font: 600 13px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--tl-acc); }
.tl-acc-bright .tl-layer__n { color: var(--mint); }
.tl-layer__cap p:last-child { font: 400 18px/27px var(--text); color: rgba(255, 255, 255, .8); }
.tl-layer__stage { position: relative; min-width: 0; }
.tl-pin__glow { position: absolute; right: -10%; top: 20%; width: 700px; height: 700px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tl-acc) 24%, transparent), transparent); }

/* stage tones (CFG ptone): ink is the base above; wine and plum are darker variants; rose is a light stage for the
   rose-hero pages */
.tl-pin--wine { background: radial-gradient(40% 50% at 0% 100%, color-mix(in srgb, var(--tl-acc) 18%, transparent), transparent 70%), var(--wn-hero-bg); }
.tl-pin--plum { background: radial-gradient(46% 56% at 92% 8%, color-mix(in srgb, var(--tl-acc) 26%, transparent), transparent 70%),
  radial-gradient(40% 50% at 0% 100%, rgba(142, 26, 71, .55), rgba(142, 26, 71, 0) 70%), var(--wn-plum); }
.tl-pin--rose { background: radial-gradient(50% 60% at 92% 8%, rgba(232, 70, 111, .16), rgba(232, 70, 111, 0) 70%),
  radial-gradient(42% 52% at 0% 100%, rgba(255, 179, 199, .55), rgba(255, 179, 199, 0) 70%), var(--wn-rose-10);
  color: var(--ink); --wn-h: var(--ink); --wn-k: var(--blue); --wn-tx: var(--body); --wn-mut: var(--grey70);
  --tl-nav: var(--grey70); --tl-nav-b: var(--grey70); --tl-nav-on: var(--ink); --tl-nav-onb: var(--blue);
  --tl-card-shadow: 0 24px 60px rgba(20, 4, 15, .14); }
/* dark stages with the bright accent: the active step number in light rose (#e8466f is under 4.5:1 there) */
.tl-pin--ink.tl-acc-bright, .tl-pin--wine.tl-acc-bright, .tl-pin--plum.tl-acc-bright { --tl-nav-onb: #ffb3c7; }
.tl-pin--rose .tl-pin__glow { background: radial-gradient(closest-side, rgba(232, 70, 111, .12), rgba(232, 70, 111, 0)); }
.tl-pin--rose .tl-pin__nav li { border-top-color: var(--wn-line); }
.tl-pin--rose .tl-layer__n, .tl-pin--rose.tl-acc-bright .tl-layer__n { color: var(--blue); }
.tl-pin--rose .tl-layer__cap p:last-child { color: var(--body); }
.tl-pin--rose .wm-pin__bar { background: rgba(180, 35, 90, .14); }
.tl-pin--rose .tl-say { background: #fff; border-color: var(--wn-line); color: var(--ink); box-shadow: 0 10px 26px rgba(20, 4, 15, .08); }
.tl-pin--rose .tl-media { box-shadow: var(--tl-card-shadow); }
.tl-pin--rose .tl-phone { box-shadow: 0 0 0 1px rgba(30, 10, 26, .1), 0 30px 60px rgba(20, 4, 15, .22); }
.tl-pin--rose .tl-teaser { box-shadow: 0 30px 70px rgba(20, 4, 15, .28); }

/* step 0: the brief */
.tl-brief { max-width: 640px; padding: 28px 32px 24px; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: var(--tl-card-shadow); }
.tl-brief__k { display: flex; align-items: center; gap: 10px; font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.tl-brief__k svg { color: var(--purple); }
.tl-brief__t { margin: 6px 0 14px; font: 500 28px/34px var(--display); letter-spacing: -.4px; }
.tl-brief li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--wn-line); }
.tl-brief li span { font: 600 12px/20px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--grey70); }
.tl-brief li b { font: 500 16px/22px var(--text); color: var(--ink); }
.tl-brief__f { margin-top: 12px; font: 500 14px/18px var(--text); color: var(--blue); }
.tl-brief__m { display: flex; align-items: flex-start; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--wn-rose-10);
  font: 500 13px/18px var(--text); color: var(--ink); }
.tl-brief__m svg { flex: none; margin-top: 1px; color: var(--blue); }
html.wm-on .tl-pin .tl-brief li { transition: opacity .5s ease, transform .6s var(--wn-ease-out); transition-delay: calc(var(--k, 0) * 90ms + .15s); }
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-brief li { opacity: 0; transform: translate3d(16px, 0, 0); }
.tl-brief li:nth-child(2) { --k: 1; } .tl-brief li:nth-child(3) { --k: 2; } .tl-brief li:nth-child(4) { --k: 3; } .tl-brief li:nth-child(5) { --k: 4; } .tl-brief li:nth-child(6) { --k: 5; }

/* step 1: people react */
.tl-react { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: start; }
.tl-react .tl-phone { height: auto; min-height: 420px; display: flex; }
.tl-react .tl-phone__scr { height: auto; flex: 1; gap: 10px; padding-top: 38px; }
.tl-react .tl-phone__next { margin-top: auto; }
.tl-phone__scr { position: relative; height: 100%; display: flex; flex-direction: column; gap: 12px; overflow: hidden; padding: 42px 18px 18px; border-radius: 31px;
  background: #fff; color: var(--ink); }
.tl-phone__next { margin-top: auto; align-self: stretch; padding: 11px; border-radius: 999px; background: var(--purple); color: #fff; text-align: center; font: 600 14px/16px var(--text); }
.tl-q__t { font: 600 16px/22px var(--text); color: var(--ink); }
.tl-q__hint { font: 400 12px/16px var(--text); color: var(--grey70); text-align: center; }
.tl-q__line { padding: 12px 14px; border-radius: 12px; background: var(--wn-rose-10); font: 500 17px/23px var(--display); color: var(--ink); }
.tl-radio li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; font: 500 14px/18px var(--text); color: var(--ink); }
.tl-radio li i { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid #ddd3d7; }
.tl-radio li.is-sel { background: var(--wn-rose-10); }
.tl-radio li.is-sel i { border-color: var(--purple); background: radial-gradient(circle, #fff 0 28%, var(--purple) 30%); }
.tl-q--faces { padding-top: 10px; border-top: 1px solid var(--wn-line); }
.tl-q--faces .tl-q__t { font-size: 14px; line-height: 19px; margin-bottom: 8px; }
.tl-faces { display: flex; justify-content: space-between; gap: 2px; }
.tl-face { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 500 10px/12px var(--text); color: var(--grey70); }
.tl-face svg { width: 38px; height: 38px; border-radius: 50%; }
.tl-face__b { fill: #f6c98e; }
.tl-face__f { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.tl-face__f circle { fill: var(--ink); stroke: none; }
.tl-face.is-sel { color: var(--ink); font-weight: 700; }
.tl-face.is-sel svg { box-shadow: 0 0 0 3px var(--purple); }
.tl-face__f .tl-face__h { fill: #d6335e; stroke: none; }
/* the concept test's eight faces (method card C1), two rows of four */
.tl-faces--8 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px 2px; }
.tl-faces--8 .tl-face { gap: 3px; font-size: 9.5px; line-height: 11px; white-space: nowrap; }
.tl-faces--8 .tl-face svg { width: 29px; height: 29px; }
.tl-input { padding: 12px 14px; min-height: 72px; border-radius: 12px; border: 2px solid var(--purple); font: 500 15px/21px var(--text); color: var(--ink); }
.tl-q--rate { padding-top: 10px; border-top: 1px solid var(--wn-line); }
.tl-q--rate .tl-q__t { font-size: 14px; line-height: 19px; margin-bottom: 8px; }
.tl-rate { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.tl-rate li { padding: 8px 0; border-radius: 9px; border: 1.5px solid #ddd3d7; text-align: center; font: 600 14px/16px var(--text); color: var(--grey70); }
.tl-rate li.is-sel { border-color: var(--purple); background: var(--purple); color: #fff; }
.tl-rate__ends { display: flex; justify-content: space-between; margin-top: 5px; font: 500 11px/14px var(--text); color: var(--grey70); }
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-rate .is-sel { filter: saturate(0); }
html.wm-on .tl-pin .tl-layer.is-active .tl-rate .is-sel { animation: tl-pop .45s var(--wn-ease-out) both 1.4s; }
.tl-mini { position: relative; height: 210px; border-radius: 14px; overflow: hidden; }
.tl-mini--pack { display: grid; place-items: center; background: linear-gradient(180deg, #3a0f2c, #1e0719); }
.tl-pouch--lg { flex: none; width: 110px; height: 170px; }
.tl-pouch--lg b { top: 30px; background: transparent; color: var(--ink); font: 600 14px/16px var(--display); text-transform: none; letter-spacing: 0; }
.tl-mini--poster { background: linear-gradient(180deg, #fcefdc 0%, #f7b48a 46%, #e07a4a 60%); }
.tl-mini__hl { position: absolute; left: 10%; right: 30%; top: 10%; height: 18px; border-radius: 4px; background: var(--ink); }
.tl-mini__logo { position: absolute; right: 8%; bottom: 8%; width: 40px; height: 16px; border-radius: 4px; background: var(--ink); }
.tl-mini .tl-poster__sun { width: 40px; height: 40px; }
.tl-mini u { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.tl-jar--sm p { margin-bottom: 6px; font: 600 13px/16px var(--text); color: var(--ink); }
.tl-jar--sm + .tl-jar--sm { margin-top: 6px; }
.tl-phone .tl-jar__s { height: 32px; }
.tl-phone .tl-jar__s span { background: #fbf0f3; color: var(--grey70); font-size: 10px; }
.tl-phone .tl-jar__s span:nth-child(2) { background: #fcefdc; color: var(--ink); }
.tl-phone .tl-jar__m { background: var(--ink); box-shadow: 0 0 0 3px rgba(214, 51, 94, .5); }
.tl-react .tl-md li { padding: 9px 0; font-size: 13px; line-height: 17px; }
.tl-react .tl-md__h, .tl-react .tl-md li { grid-template-columns: 36px minmax(0, 1fr) 36px; }
.tl-react__side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.tl-says { display: flex; flex-direction: column; gap: 12px; }
.tl-say { display: flex; align-items: flex-start; gap: 12px; max-width: 520px; padding: 14px 18px; border-radius: 20px 20px 20px 6px; background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 179, 199, .22); font: 400 16px/23px var(--text); color: #fff; }
.tl-say:nth-child(2) { margin-left: 40px; }
.tl-say:nth-child(3) { margin-left: 16px; }
html.wm-on .tl-pin .tl-say { transition: opacity .5s ease, transform .7s var(--wn-ease-out); transition-delay: calc(var(--i) * 260ms + .3s); }
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-say { opacity: 0; transform: translate3d(0, 18px, 0); }
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-radio .is-sel, html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-face.is-sel svg,
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-md .tl-md__m, html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-md .tl-md__l { filter: saturate(0); }
html.wm-on .tl-pin .tl-layer.is-active .tl-mini u { animation: tl-pop .45s var(--wn-ease-out) both; animation-delay: calc(var(--i) * 160ms + .4s); }
html.wm-on .tl-pin .tl-layer.is-active .tl-jar__m { animation: tl-rise .6s var(--wn-ease-out) both .5s; }
.tl-media { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; max-width: 600px; padding: 14px; border-radius: 22px; background: #fff; color: var(--ink); }
.tl-media__vid { position: relative; height: 190px; border-radius: 14px; overflow: hidden; background: linear-gradient(170deg, #6e1a4c, #1e0a1a); }
.tl-media__who { position: absolute; left: 50%; bottom: 0; width: 110px; height: 150px; margin-left: -55px; }
.tl-media__who i { position: absolute; left: 50%; top: 14px; width: 54px; height: 54px; margin-left: -27px; border-radius: 50%; background: #fbe2bd; }
.tl-media__who b { position: absolute; left: 0; right: 0; bottom: 0; height: 74px; border-radius: 55px 55px 0 0; background: #b4235a; }
.tl-media__rec { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 999px;
  background: rgba(20, 4, 15, .7); color: #fff; font: 600 11px/14px var(--text); }
.tl-media__aud { height: 100%; min-height: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; border-radius: 14px;
  background: linear-gradient(170deg, #6e1a4c, #1e0a1a); color: var(--mint); }
.tl-wave { display: flex; align-items: center; gap: 2px; height: 50px; }
.tl-wave i { width: 3px; height: calc(var(--h) * 1%); border-radius: 2px; background: var(--mint); }
.tl-media__tx { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tl-media__k { font: 600 11px/14px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.tl-media__q { font: 500 14px/19px var(--text); color: var(--grey70); }
.tl-media__q b { color: var(--blue70); font-weight: 600; }
.tl-media__a { font: 500 16px/22px var(--text); color: var(--ink); }
.tl-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-checks li { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: var(--wn-rose-10); font: 600 11px/14px var(--text); color: var(--blue70); }
.tl-checks li b { color: var(--ink); }
.tl-media__n { font: 400 12px/16px var(--text); color: var(--grey70); }

/* step 2: the tally */
.tl-tally { max-width: 760px; padding: 26px 30px 28px; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: var(--tl-card-shadow); }
.tl-tally__n { display: flex; align-items: baseline; gap: 10px; font: 500 16px/20px var(--text); color: var(--grey70); }
.tl-tally__n b { font: 500 40px/1 var(--display); letter-spacing: -1px; color: var(--blue); font-variant-numeric: tabular-nums; }
.tl-tally__n--live { align-items: center; font-weight: 600; color: var(--blue); }
.tl-tally__n--live i { width: 10px; height: 10px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(232, 70, 111, .2); }
html.wm-on .tl-layer.is-active .tl-tally__n--live i { animation: tl-ring2 1.4s ease-in-out infinite; }
@keyframes tl-ring2 { 50% { box-shadow: 0 0 0 9px rgba(232, 70, 111, 0); } }
.tl-cnt { counter-reset: n var(--tl-n); }
html.wm-on .tl-cnt .tl-cnt__still { display: none; }
html.wm-on .tl-cnt::before { content: counter(n); }
html.wm-on .tl-layer .tl-cnt { transition: --tl-n 2.2s cubic-bezier(.2, .7, .2, 1) .3s; }
html.wm-on .tl-layer.is-active .tl-cnt { --tl-n: var(--to); }
.tl-tally__leg { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 16px 0 6px; font: 500 13px/16px var(--text); color: var(--grey70); }
.tl-tally__leg span { display: inline-flex; align-items: center; gap: 7px; }
.tl-tally__leg i { width: 12px; height: 12px; border-radius: 3px; }
.tl-tally__g { padding: 12px 0; border-top: 1px solid var(--wn-line); }
.tl-tally__g:first-of-type { border-top: 0; }
.tl-tally__g > p { margin-bottom: 8px; font: 600 15px/20px var(--text); color: var(--ink); }
.tl-tally__g ul { display: flex; flex-direction: column; gap: 6px; }
.tl-tally__g li { display: grid; grid-template-columns: minmax(0, 1fr) 52px; gap: 12px; align-items: center; }
.tl-tally__g li i { display: block; height: 12px; border-radius: 999px; transform-origin: 0 50%; transform: scaleX(var(--v)); }
.tl-tally__g li b { font: 600 14px/18px var(--text); text-align: right; font-variant-numeric: tabular-nums; }
html.wm-on .tl-pin .tl-tally__g li i { transition: transform 1.3s var(--wn-ease-out); transition-delay: calc(var(--k, 0) * 120ms + .3s); }
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-tally__g li i, html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-rank i { transform: scaleX(0); }
.tl-tally__g li:nth-child(2) { --k: 1; } .tl-tally__g li:nth-child(3) { --k: 2; } .tl-tally__g li:nth-child(4) { --k: 3; }
.tl-rank { margin-top: 12px; }
/* rows have a fixed height (32px; the cut line 26px): test-lab.py RROW / RCUT compute the race offsets from them */
.tl-rank li { display: grid; grid-template-columns: 26px minmax(0, 290px) minmax(0, 1fr) 56px; gap: 12px; align-items: center; height: 32px; padding: 0;
  font: 500 14px/18px var(--text); }
.tl-rank li span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* the rank race: rows start where they stood early in fieldwork and slide to their final place */
html.wm-on .tl-pin .tl-rank--race li:not(.tl-rank__cut) { position: relative; z-index: 1; transition: transform 1.4s var(--wn-ease-out); transition-delay: calc(.35s + var(--k, 0) * 70ms); }
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-rank--race li:not(.tl-rank__cut) { transform: translate3d(0, var(--dy, 0px), 0); transition-delay: 0s; }
html.wm-on .tl-pin .tl-rank--race .tl-rank__cut { transition: opacity .5s ease 1.7s; }
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-rank--race .tl-rank__cut { opacity: 0; transition-delay: 0s; }
html.wm-on .tl-pin .tl-rank--race li em { transition: opacity .4s ease 1.5s; }
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-rank--race li em { opacity: 0; transition-delay: 0s; }
.tl-rank li b { font: 600 13px/1 var(--display); color: var(--grey70); }
.tl-rank li i { display: block; height: 12px; border-radius: 999px; background: #f6c9d6; transform-origin: 0 50%; transform: scaleX(var(--v)); }
.tl-rank li.is-top i { background: linear-gradient(90deg, #d6335e, #e8466f); }
.tl-rank li.is-top span { font-weight: 600; }
.tl-rank li em { font: 600 14px/18px var(--text); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
html.wm-on .tl-pin .tl-rank i { transition: transform 1.2s var(--wn-ease-out) .3s; }
.tl-rank__cut { display: block !important; position: relative; height: 26px; padding: 0 !important; }
.tl-rank__cut::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--purple); }
.tl-rank__cut span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 2px 10px; background: #fff; font: 700 11px/14px var(--text);
  letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }

/* step 2 variants by method (CFG tally kind) */
/* heat (poster, pack): first clicks build a heatmap on the picture; each drawn area gets its share */
.tl-hm { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 30px; align-items: center; margin-top: 16px; }
.tl-hm__pic { position: relative; height: 320px; border-radius: 16px; overflow: hidden; }
.tl-hm__pic--poster { background: #3a0f2c; padding: 10px; }
.tl-hm__pic--poster .tl-poster { height: 100%; }
.tl-hm__pic--poster .tl-poster__hl { font-size: 22px; line-height: 26px; }
.tl-hm__pic--pack { background: linear-gradient(180deg, #3a0f2c, #1e0719); }
.tl-hm__pic--pack::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 34px; background: linear-gradient(180deg, #f6c98e, #c98a4a); }
.tl-pouch--xl { position: absolute; left: 50px; top: 35px; width: 150px; height: 250px; flex: none; }
.tl-pouch--xl i { top: 54%; }
.tl-pouch--xl b { position: absolute; left: 0; right: 0; top: 18px; transform: none; padding: 0; background: none; text-align: center; color: var(--ink);
  font: 600 19px/24px var(--display); letter-spacing: -.2px; text-transform: none; }
.tl-pouch--xl em { position: absolute; left: 14px; right: 14px; top: 92px; padding: 5px 4px; border-radius: 6px; background: rgba(30, 10, 26, .72); color: #fff;
  font: 700 10px/12px var(--text); font-style: normal; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.tl-pouch--side { position: absolute; top: 60px; width: 110px; height: 225px; opacity: .8; }
.tl-pouch--l { left: -78px; } .tl-pouch--r { right: -78px; }
.tl-hb { position: absolute; z-index: 1; left: var(--x); top: var(--y); width: var(--s); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255, 236, 214, .62), rgba(246, 201, 142, .55) 30%, rgba(232, 70, 111, .5) 58%, rgba(232, 70, 111, 0)); mix-blend-mode: screen; }
.tl-hm__pic--poster .tl-hb { mix-blend-mode: multiply;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(246, 201, 142, .85) 28%, rgba(232, 70, 111, .62) 56%, rgba(232, 70, 111, 0)); }
.tl-hm__area { position: absolute; z-index: 2; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border: 2px dashed rgba(255, 255, 255, .9); border-radius: 8px; }
.tl-hm__pic--poster .tl-hm__area { border-color: rgba(30, 10, 26, .75); }
.tl-hm__area b { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ink);
  color: #fff; font: 700 11px/1 var(--text); box-shadow: 0 0 0 2px #fff; }
.tl-hm__k { font: 600 15px/21px var(--text); color: var(--ink); }
.tl-hm__areas { margin: 12px 0 14px; }
.tl-hm__areas li { display: grid; grid-template-columns: 24px minmax(0, 110px) minmax(0, 1fr) 46px; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--wn-line);
  font: 500 14px/18px var(--text); color: var(--ink); }
.tl-hm__areas li b { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; font: 700 11px/1 var(--text); }
.tl-hm__areas li:last-child b { background: #ece4e7; color: var(--grey70); }
.tl-hm__areas li i { display: block; height: 10px; border-radius: 999px; background: linear-gradient(90deg, #d6335e, #e8466f); transform-origin: 0 50%; transform: scaleX(var(--v)); }
.tl-hm__areas li:last-child i { background: #f6c9d6; }
.tl-hm__areas li em { font: 600 15px/18px var(--text); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.tl-hm__n { font: 400 13px/18px var(--text); color: var(--grey70); }
html.wm-on .tl-pin .tl-hb { transition: opacity .6s ease, transform .9s var(--wn-ease-out); transition-delay: calc(.4s + var(--k, 0) * 260ms); }
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-hb { opacity: 0; transform: translate(-50%, -50%) scale(.3); transition-delay: 0s; }
html.wm-on .tl-pin .tl-hm__area { transition: opacity .5s ease 2s; }
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-hm__area { opacity: 0; transition-delay: 0s; }
html.wm-on .tl-pin .tl-hm__areas li i { transition: transform 1.2s var(--wn-ease-out); transition-delay: calc(1.9s + var(--k, 0) * 140ms); }
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-hm__areas li i { transform: scaleX(0); transition-delay: 0s; }

/* wave (audio): each spot as a waveform, the moments the name is said, and recall beside it */
.tl-aw { display: flex; flex-direction: column; gap: 18px; margin-top: 16px; }
.tl-aw__row { padding-top: 16px; border-top: 1px solid var(--wn-line); }
.tl-aw__row:first-child { padding-top: 0; border-top: 0; }
.tl-aw__top { display: flex; align-items: baseline; gap: 12px; font: 400 14px/18px var(--text); color: var(--grey70); }
.tl-aw__top b { display: inline-flex; align-items: center; gap: 8px; font: 600 16px/20px var(--text); color: var(--ink); }
.tl-aw__top b i { width: 12px; height: 12px; border-radius: 3px; }
.tl-aw__top em { margin-left: auto; font: 600 13px/16px var(--text); font-style: normal; color: var(--grey70); font-variant-numeric: tabular-nums; }
.tl-aw__wave { position: relative; height: 92px; margin: 10px 0 12px; padding-top: 26px; }
.tl-aw__bars { height: 100%; display: flex; align-items: center; gap: 3px; }
.tl-aw__bars i { flex: 1 1 0; height: calc(var(--h) * 1%); border-radius: 2px; background: linear-gradient(180deg, #f6c9d6, #d6335e); }
.tl-aw__mk { position: absolute; z-index: 1; left: var(--x); top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); }
.tl-aw__mk b { position: absolute; left: 50%; top: 0; transform: translateX(-50%); padding: 3px 8px; border-radius: 999px; background: var(--ink); color: #fff;
  font: 700 11px/14px var(--text); white-space: nowrap; }
.tl-aw__m { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
.tl-aw__m li { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 44px; gap: 10px; align-items: center; font: 500 14px/18px var(--text); color: var(--ink); }
.tl-aw__m li i { display: block; height: 10px; border-radius: 999px; transform-origin: 0 50%; transform: scaleX(var(--v)); }
.tl-aw__m li b { text-align: right; font: 600 15px/18px var(--text); font-variant-numeric: tabular-nums; }
html.wm-on .tl-pin .tl-aw__bars { transition: clip-path 2.2s linear .3s; clip-path: inset(0 0 0 0); }
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-aw__bars { clip-path: inset(0 100% 0 0); transition: none; }
/* each name marker appears as the playhead reaches it (the bars reveal over 2.2 s from .3 s) */
html.wm-on .tl-pin .tl-aw__mk { transition: opacity .4s ease, transform .5s var(--wn-ease-out); transition-delay: 2.1s; }
html.wm-on .tl-pin .tl-aw__row:nth-child(1) .tl-aw__mk:nth-of-type(1) { transition-delay: .6s; }
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-aw__mk { opacity: 0; transform: translate3d(0, 8px, 0); transition-delay: 0s; }
html.wm-on .tl-pin .tl-aw__m li i { transition: transform 1.2s var(--wn-ease-out); transition-delay: calc(2.3s + var(--k, 0) * 150ms); }
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-aw__m li i { transform: scaleX(0); transition-delay: 0s; }

/* split (social feed): the same people in the feed (left) and close up (right) */
.tl-sp__h { display: grid; grid-template-columns: minmax(0, 1fr) 140px minmax(0, 1fr); margin: 18px 0 6px; font: 700 12px/16px var(--text); letter-spacing: .08em;
  text-transform: uppercase; color: var(--blue); }
.tl-sp__h span:first-child { text-align: right; }
.tl-sp__h span:last-child { grid-column: 3; }
.tl-sp li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 140px minmax(0, 1fr) 56px; gap: 0 10px; align-items: center; padding: 10px 0;
  border-top: 1px solid var(--wn-line); }
.tl-sp__m { grid-column: 3; text-align: center; font: 600 14px/18px var(--text); color: var(--ink); }
.tl-sp__t { display: block; height: 14px; border-radius: 999px; background: var(--wn-rose-10); overflow: hidden; }
.tl-sp__t i { display: block; height: 100%; border-radius: inherit; transform: scaleX(var(--v)); }
.tl-sp__t--l { grid-column: 2; grid-row: 1; } .tl-sp__t--l i { transform-origin: 100% 50%; background: linear-gradient(270deg, #d6335e, #e8466f); }
.tl-sp__t--r { grid-column: 4; grid-row: 1; } .tl-sp__t--r i { transform-origin: 0 50%; background: linear-gradient(90deg, #8e1a47, #b4235a); }
.tl-sp__t.is-na { background: repeating-linear-gradient(135deg, #f1e9ec 0 6px, #fff 6px 12px); }
.tl-sp__v { font: 600 16px/20px var(--text); color: var(--ink); font-variant-numeric: tabular-nums; }
.tl-sp__v--l { grid-column: 1; grid-row: 1; text-align: left; } .tl-sp__v--r { grid-column: 5; grid-row: 1; text-align: right; }
.tl-sp__v.is-na { font: 500 11px/14px var(--text); color: var(--grey70); }
.tl-sp__n { margin-top: 12px; font: 400 13px/18px var(--text); color: var(--grey70); }
html.wm-on .tl-pin .tl-sp__t i { transition: transform 1.2s var(--wn-ease-out); transition-delay: calc(.35s + var(--k, 0) * 120ms); }
html.wm-on .tl-pin .tl-sp__t--r i { transition-delay: calc(1.3s + var(--k, 0) * 120ms); }
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-sp__t i { transform: scaleX(0); transition-delay: 0s; }

/* jar (product): too little, just right or too much, per recipe and feature */
.tl-jt__leg { align-items: center; }
.tl-jt__leg i { width: 12px; height: 12px; border-radius: 3px; }
.tl-jt__leg i.lo { background: #f6c9d6; } .tl-jt__leg i.ok { background: #d08a3c; } .tl-jt__leg i.hi { background: #8e1a47; }
.tl-jt__note { margin-left: auto; font-weight: 600; color: var(--ink); }
.tl-jt__g { padding: 12px 0; border-top: 1px solid var(--wn-line); }
.tl-jt__g > p { margin-bottom: 8px; font: 600 15px/20px var(--text); color: var(--ink); }
.tl-jt__r { display: grid; grid-template-columns: 44px minmax(0, 1fr) 52px; gap: 12px; align-items: center; }
.tl-jt__r + .tl-jt__r { margin-top: 6px; }
.tl-jt__r b { font: 600 13px/16px var(--text); letter-spacing: .08em; color: var(--grey70); }
.tl-jt__bar { display: flex; gap: 2px; height: 14px; border-radius: 999px; overflow: hidden; transform-origin: 0 50%; }
.tl-jt__bar i { display: block; height: 100%; }
.tl-jt__bar i.lo { background: #f6c9d6; } .tl-jt__bar i.ok { background: #d08a3c; } .tl-jt__bar i.hi { background: #8e1a47; }
.tl-jt__r em { font: 600 15px/18px var(--text); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }
html.wm-on .tl-pin .tl-jt__bar { transition: transform 1.2s var(--wn-ease-out); transition-delay: calc(.35s + var(--k, 0) * 130ms); }
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-jt__bar { transform: scaleX(0); transition-delay: 0s; }

/* words (naming): a card per option, fit and appeal, and the first words people typed; unwanted meanings flagged */
.tl-nw { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.tl-nw__c { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 16px; border-radius: 18px; background: #fbf6f8; border: 1px solid var(--wn-line); }
.tl-nw__c--qu { background: var(--wn-rose-10); border-color: rgba(214, 51, 94, .35); }
.tl-nw__n { display: flex; align-items: center; gap: 10px; }
.tl-nw__mk svg { display: block; width: 26px; height: 26px; fill: none; stroke: var(--c); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.tl-nw__c--fw .tl-nw__mk svg { stroke: #b4235a; }
.tl-nw__n b { font: 500 22px/26px var(--display); letter-spacing: -.4px; color: var(--ink); }
.tl-nw__m { display: flex; flex-direction: column; gap: 6px; }
.tl-nw__m li { display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font: 500 13px/16px var(--text); color: var(--grey70); }
.tl-nw__m li i { display: block; height: 10px; border-radius: 999px; background: var(--c); transform-origin: 0 50%; transform: scaleX(var(--v)); }
.tl-nw__m li b { text-align: right; font: 600 14px/18px var(--text); color: var(--ink); font-variant-numeric: tabular-nums; }
.tl-nw__k { font: 600 11px/14px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--grey70); }
.tl-nw__w { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-nw__w li { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--wn-line);
  font: 500 13px/18px var(--text); color: var(--ink); }
.tl-nw__w li.is-off { background: #fcefdc; border-color: #f6c98e; color: #6b3f12; font-weight: 600; }
.tl-nw__w li svg { flex: none; color: #8e1a47; }
.tl-nw__leg { display: flex; align-items: center; gap: 7px; margin-top: 14px; font: 400 13px/18px var(--text); color: var(--grey70); }
.tl-nw__leg span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #fcefdc; color: #8e1a47; }
html.wm-on .tl-pin .tl-nw__m li i { transition: transform 1.2s var(--wn-ease-out); transition-delay: calc(.35s + var(--k, 0) * 110ms); }
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-nw__m li i { transform: scaleX(0); transition-delay: 0s; }
html.wm-on .tl-pin .tl-nw__w li { transition: opacity .45s ease, transform .55s var(--wn-ease-out); transition-delay: calc(.9s + var(--k, 0) * 60ms); }
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-nw__w li { opacity: 0; transform: translate3d(0, 8px, 0) scale(.9); transition-delay: 0s; }

/* heard (message): one row per line: the line, what people heard, three scores */
.tl-mh { display: flex; flex-direction: column; margin-top: 14px; }
.tl-mh__r { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 10px 26px; padding: 14px 0; border-top: 1px solid var(--wn-line); }
.tl-mh__r:first-child { border-top: 0; padding-top: 4px; }
.tl-mh__line { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.tl-mh__line i { flex: none; width: 28px; height: 24px; display: grid; place-items: center; border-radius: 7px; color: #fff; font: 700 12px/1 var(--text); font-style: normal; }
.tl-mh__r:nth-child(2) .tl-mh__line i { color: var(--ink); }
.tl-mh__line b { font: 500 19px/24px var(--display); letter-spacing: -.3px; color: var(--ink); }
.tl-mh__said { display: flex; flex-direction: column; gap: 6px; }
.tl-mh__said p { width: fit-content; max-width: 100%; padding: 8px 13px 9px; border-radius: 14px 14px 14px 4px; font: 500 15px/20px var(--text); color: var(--ink); }
.tl-mh__said p span { display: block; margin-bottom: 1px; font: 600 11px/14px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--grey70); }
.tl-mh__heard { background: var(--wn-rose-10); }
.tl-mh__meant { background: #f4eef1; color: var(--grey70) !important; }
.tl-mh__r.is-flag .tl-mh__heard { background: #fcefdc; box-shadow: inset 0 0 0 1px #f6c98e; }
.tl-mh__r.is-flag .tl-mh__heard span { color: #6b3f12; }
.tl-mh__m { display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.tl-mh__m li { display: grid; grid-template-columns: 92px minmax(0, 1fr) 38px; gap: 10px; align-items: center; font: 500 13px/16px var(--text); color: var(--grey70); }
.tl-mh__m li i { display: block; height: 10px; border-radius: 999px; transform-origin: 0 50%; transform: scaleX(var(--v)); }
.tl-mh__m li b { text-align: right; font: 600 14px/18px var(--text); color: var(--ink); font-variant-numeric: tabular-nums; }
.tl-mh__n { margin-top: 8px; font: 400 13px/18px var(--text); color: var(--grey70); }
html.wm-on .tl-pin .tl-mh__said p { transition: opacity .5s ease, transform .6s var(--wn-ease-out); transition-delay: calc(.3s + var(--k, 0) * 260ms); }
html.wm-on .tl-pin .tl-mh__said p + p { transition-delay: calc(.6s + var(--k, 0) * 260ms); }
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-mh__said p { opacity: 0; transform: translate3d(-12px, 0, 0); transition-delay: 0s; }
html.wm-on .tl-pin .tl-mh__m li i { transition: transform 1.2s var(--wn-ease-out); transition-delay: calc(.7s + var(--k, 0) * 80ms); }
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-mh__m li i { transform: scaleX(0); transition-delay: 0s; }

/* step 3: the verdict teaser */
.tl-teaser { max-width: 720px; padding: 34px 36px; border-radius: 26px; background: var(--wn-glass-bg); border: 1px solid rgba(255, 179, 199, .3);
  box-shadow: 0 0 0 1px rgba(232,70,111,.12), 0 0 60px rgba(232,70,111,.22); }
.tl-teaser__k { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--tl-acc); }
.tl-acc-bright .tl-teaser__k { color: var(--mint); }
.tl-teaser__h { margin-top: 12px; font: 500 52px/58px var(--display); letter-spacing: -1.3px; color: #fff; }
.tl-teaser__s { margin-top: 10px; font: 400 19px/28px var(--text); color: rgba(255, 255, 255, .82); }
.tl-vds { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.tl-vd { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .07);
  font: 500 15px/20px var(--text); color: rgba(255, 255, 255, .86); }
.tl-vd b { flex: none; padding: 5px 12px; border-radius: 999px; font: 700 12px/14px var(--text); letter-spacing: .04em; text-transform: uppercase; }
.tl-vd--go b { background: var(--mint); color: var(--ink); }
.tl-vd--fix b { background: var(--wn-gold); color: var(--ink); }
.tl-vd--stop b { background: rgba(255, 255, 255, .16); color: #fff; }
.tl-vd--ref b { background: #fff; color: var(--ink); }
html.wm-on .tl-pin .tl-vd { transition: opacity .5s ease, transform .7s var(--wn-ease-out); }
html.wm-on .tl-pin .tl-layer:not(.is-active) .tl-vd { opacity: 0; transform: translate3d(24px, 0, 0); }
.tl-vd:nth-child(2) { transition-delay: .15s !important; } .tl-vd:nth-child(3) { transition-delay: .3s !important; } .tl-vd:nth-child(4) { transition-delay: .45s !important; }

/* ---------- the scorecard ---------- */
.tl-score-sec { background: var(--wn-page); }
.tl-score__head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; margin-bottom: 48px; }
.tl-score__head .wn-head { margin-bottom: 0; }
.tl-score__base { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; border-radius: 18px; background: #fff; border: 1px solid var(--wn-line);
  font: 400 15px/22px var(--text); color: var(--grey70); }
.tl-score__base b { color: var(--ink); }
.tl-report { border-radius: 28px; overflow: clip; background: #fff; box-shadow: var(--wn-shadow); }
.tl-report__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 28px; background: var(--ink); color: #fff;
  font: 600 14px/18px var(--text); }
.tl-report__bar span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.tl-report__bar span:first-child svg { color: var(--mint); }
.tl-report__bar span:last-child { color: rgba(255, 255, 255, .72); font-weight: 500; }
.tl-sc__head, .tl-sc__row { display: grid; grid-template-columns: minmax(0, 360px) repeat(var(--n), minmax(0, 1fr)); gap: 28px; padding: 18px 28px; align-items: center; }
.tl-sc__head { position: sticky; top: 140px; z-index: 2; background: #fff; border-bottom: 1px solid var(--wn-line); padding-top: 20px; padding-bottom: 16px; }
.tl-sc__mh { font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--grey70); }
.tl-sc__vh { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tl-sc__vh i { flex: none; min-width: 34px; height: 26px; padding: 0 7px; display: grid; place-items: center; border-radius: 8px; background: var(--c); color: #fff;
  font: 700 12px/1 var(--text); font-style: normal; }
.tl-sc__vh b { font: 600 15px/19px var(--text); color: var(--ink); }
.tl-sc__vh:nth-child(3) i, .tl-sc__vh:nth-child(5) i { color: var(--ink); }
.tl-sc__row + .tl-sc__row { border-top: 1px solid var(--wn-line); }
.tl-sc__m { display: flex; flex-direction: column; gap: 3px; }
.tl-sc__m b { font: 600 17px/22px var(--text); color: var(--ink); }
.tl-sc__m span { font: 400 14px/20px var(--text); color: var(--grey70); }
.tl-sc__cell { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tl-sc__bar { display: block; height: 10px; border-radius: 999px; background: var(--wn-rose-10); overflow: hidden; }
.tl-sc__bar i { display: block; height: 100%; border-radius: inherit; background: var(--c); opacity: .78; transform-origin: 0 50%; transform: scaleX(var(--v)); }
.tl-sc__cell.is-best .tl-sc__bar i { opacity: 1; }
.tl-sc__v { display: flex; align-items: baseline; gap: 4px; font: 500 26px/1 var(--display); letter-spacing: -.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.tl-sc__cell.is-best .tl-sc__v { color: var(--blue); }
.tl-sc__v sup { font: 700 11px/1 var(--text); letter-spacing: .04em; color: var(--blue); vertical-align: super; }
.tl-sc__cell small { font: 400 12px/16px var(--text); color: var(--grey70); }
.tl-sc__na { font: 500 13px/18px var(--text); color: var(--grey60); }
.tl-sc__txt { font: 500 15px/21px var(--text); color: var(--ink); font-style: italic; }
.tl-sc__time { display: inline-flex; align-items: center; gap: 8px; font: 500 24px/1 var(--display); color: var(--ink); }
.tl-sc__time svg { color: var(--purple); }
.tl-sc__jar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 2px; }
.tl-sc__jar i { display: block; height: 100%; width: var(--w); transform-origin: 0 50%; }
.tl-sc__jar i.lo { background: #f6c9d6; } .tl-sc__jar i.ok { background: #d08a3c; } .tl-sc__jar i.hi { background: #8e1a47; }
.tl-sc__row--verdict { background: var(--wn-rose-10); }
.tl-vpill { align-self: flex-start; padding: 7px 14px; border-radius: 999px; font: 700 13px/16px var(--text); letter-spacing: .02em; }
.tl-vpill--go { background: var(--purple); color: #fff; }
.tl-vpill--fix { background: #fcefdc; color: #6b3f12; border: 1px solid #f6c98e; }
.tl-vpill--stop { background: #ece4e7; color: var(--ink); }
.tl-vpill--ref { background: #fff; color: var(--ink); border: 1px solid var(--wn-line); }
/* the ranked list (idea screening, claims) */
.tl-rk { padding: 10px 28px 18px; }
.tl-rk__head, .tl-rk__r { display: grid; grid-template-columns: 34px minmax(0, 330px) minmax(0, 2fr) repeat(var(--n), minmax(0, 1fr)); gap: 18px; align-items: center; }
.tl-rk__head { position: sticky; top: 140px; z-index: 2; padding: 14px 0; background: #fff; border-bottom: 1px solid var(--wn-line);
  font: 600 12px/16px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--grey70); }
.tl-rk__head > div:not(.tl-rk__mh--wide) { text-align: right; }
.tl-rk__list { display: flex; flex-direction: column; }
.tl-rk__r { padding: 9px 0; border-bottom: 1px solid #f1e9ec; font: 500 15px/20px var(--text); color: var(--ink); }
.tl-rk__n { font: 500 15px/1 var(--display); color: var(--grey60); }
.tl-rk__name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.tl-rk__tag { padding: 3px 9px; border-radius: 999px; font: 700 11px/14px var(--text); font-style: normal; letter-spacing: .04em; text-transform: uppercase; background: #ece4e7; color: var(--ink); }
.tl-rk__r--lead .tl-rk__tag { background: var(--purple); color: #fff; }
.tl-rk__r--doubt .tl-rk__tag, .tl-rk__r--unclear .tl-rk__tag { background: #fcefdc; color: #6b3f12; }
.tl-rk__r--off { color: var(--grey60); }
.tl-rk__r--lead, .tl-rk__r--doubt { font-weight: 600; }
.tl-rk__bar { display: grid; grid-template-columns: minmax(0, 1fr) 56px; gap: 10px; align-items: center; }
.tl-rk__bar i { display: block; height: 12px; border-radius: 999px; background: #f6c9d6; transform-origin: 0 50%; transform: scaleX(var(--v)); }
.tl-rk__r--lead .tl-rk__bar i, .tl-rk__r--doubt .tl-rk__bar i { background: linear-gradient(90deg, #d6335e, #e8466f); }
.tl-rk__r--unclear .tl-rk__bar i { background: #d08a3c; }
.tl-rk__bar em { font: 600 15px/18px var(--text); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.tl-rk__c { text-align: right; font: 500 15px/18px var(--text); font-variant-numeric: tabular-nums; }
.tl-rk__r--unclear .tl-rk__c:last-child { color: #8e1a47; font-weight: 700; }
.tl-rk__r--doubt .tl-rk__c:nth-of-type(1) { color: #8e1a47; font-weight: 700; }
.tl-rk__na { color: var(--grey60); }
.tl-rk__cut { position: relative; height: 30px; }
.tl-rk__cut::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed var(--purple); }
.tl-rk__cut span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 2px 12px; background: #fff; font: 700 11px/14px var(--text);
  letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.tl-rk__cut--off::before { border-top-color: #a1959b; }
.tl-rk__cut--off span { color: var(--grey70); }
.tl-rk__sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 8px 28px 28px; }
.tl-rk__side { padding: 22px 24px; border-radius: 20px; background: var(--wn-rose-10); }
.tl-rk__sk { font: 600 17px/22px var(--text); color: var(--ink); }
.tl-rk__st { margin-top: 2px; font: 600 12px/16px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.tl-rk__sd { margin: 6px 0 12px; font: 400 14px/20px var(--text); color: var(--grey70); }
.tl-rk__side ul { display: flex; flex-direction: column; gap: 8px; }
.tl-rk__side li { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 44px; gap: 12px; align-items: center; font: 500 14px/18px var(--text); color: var(--ink); }
.tl-rk__side li i { display: block; height: 10px; border-radius: 999px; background: var(--purple); transform-origin: 0 50%; transform: scaleX(var(--v)); }
.tl-rk__side li b { text-align: right; font-variant-numeric: tabular-nums; }
.tl-rk__defs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; margin-top: 32px; }
.tl-rk__defs li { font: 400 15px/22px var(--text); color: var(--grey70); }
.tl-rk__defs li b { color: var(--ink); font-weight: 600; }

/* ---------- the verdict panel ---------- */
.tl-verdict { overflow: hidden; }
.tl-verdict__glow { position: absolute; left: -10%; top: 10%; width: 760px; height: 760px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 70, 111, .24), rgba(232, 70, 111, 0)); }
.tl-verdict__grid { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: start; }
.tl-verdict__story { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 150px; }
.tl-verdict__story .wn-prose p { font-size: 18px; line-height: 29px; }
.tl-vset p { margin-bottom: 10px; font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.tl-vset ul { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-vset li { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(255, 179, 199, .3); font: 600 14px/18px var(--text); color: rgba(255, 255, 255, .72); }
.tl-vset li.on { background: #fff; border-color: #fff; color: var(--ink); }
.tl-verdict__side { display: flex; flex-direction: column; gap: 22px; }
.tl-vcards { display: flex; flex-direction: column; gap: 14px; }
.tl-vcard { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; padding: 24px 26px 22px 30px; border-radius: 22px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 179, 199, .22); overflow: hidden; }
.tl-vcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--tl-vc, #fff); }
.tl-vcard--go { --tl-vc: var(--mint); background: rgba(255, 179, 199, .1); }
.tl-vcard--fix { --tl-vc: var(--wn-gold); }
.tl-vcard--stop { --tl-vc: rgba(255, 255, 255, .35); }
.tl-vcard--ref { --tl-vc: #fff; }
.tl-vcard__n { font: 600 18px/24px var(--text); color: #fff; }
.tl-vcard__w { grid-column: 2; grid-row: 1; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--tl-vc);
  color: var(--ink); font: 700 13px/16px var(--text); white-space: nowrap; }
/* white 13px text needs a solid deep-wine pill (8.8:1), not the translucent white of the side bar */
.tl-vcard--stop .tl-vcard__w { background: var(--wn-deep); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 179, 199, .45); }
.tl-vcard__r { grid-column: 1 / -1; font: 400 16px/24px var(--text); color: rgba(255, 255, 255, .84); }
.tl-vcard__x { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 8px; font: 500 15px/21px var(--text); color: var(--mint); }
.tl-vcard__x svg { flex: none; margin-top: 2px; }
.tl-ask { padding: 24px 26px; border-radius: 24px; background: #fff; color: var(--ink); box-shadow: var(--wn-shadow-dark); }
.tl-ask__k { display: flex; align-items: center; gap: 10px; }
.tl-ask__k svg { color: var(--purple); }
.tl-ask__k b { font: 600 16px/20px var(--text); }
.tl-ask__k span { margin-left: auto; font: 500 13px/16px var(--text); color: var(--grey70); }
.tl-ask__q { margin: 16px 0 12px auto; max-width: 86%; width: fit-content; padding: 12px 16px; border-radius: 18px 18px 6px 18px; background: var(--ink); color: #fff;
  font: 500 16px/22px var(--text); }
.tl-ask__a { display: flex; gap: 12px; align-items: flex-start; max-width: 92%; padding: 14px 16px; border-radius: 18px 18px 18px 6px; background: var(--wn-rose-10);
  font: 400 16px/24px var(--text); color: var(--ink); }
.tl-ask__a svg { flex: none; margin-top: 3px; color: var(--blue); }
.tl-ask__f { margin-top: 12px; font: 400 13px/18px var(--text); color: var(--grey70); }

/* ---------- how it works: the horizontal timeline ---------- */
.tl-how { position: relative; background: var(--wn-rose-10); }
.tl-how .wm-h__sticky { padding: 112px 0; }
html.wm-on .tl-how .wm-h__sticky { padding: 140px 0 40px; }
.tl-how__head .wn-head { margin-bottom: 40px; }
.tl-how__track, body.t-test-lab .wn-main ol.tl-how__track { position: relative; padding: 34px 7vw 10px; }
.tl-how__track::before { content: ""; position: absolute; left: 7vw; right: 7vw; top: 42px; height: 2px; background: linear-gradient(90deg, #d6335e, #f6c98e 70%, #b4235a); }
.tl-step { position: relative; flex: none; width: 400px; display: flex; flex-direction: column; gap: 12px; margin-top: 34px; padding: 30px 30px 32px;
  border-radius: 24px; background: #fff; border: 1px solid var(--wn-line); }
.tl-step__dot { position: absolute; left: 30px; top: -42px; width: 18px; height: 18px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 6px var(--wn-rose-10); }
.tl-step__n { font: 500 44px/1 var(--display); letter-spacing: -1px; color: var(--purple); }
.tl-step__ico { position: absolute; right: 26px; top: 28px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--wn-rose-10); color: var(--blue); }
.tl-step > p:last-child { font: 400 16px/25px var(--text); color: var(--grey70); }
.tl-step .wn-h4 { max-width: 300px; }
.tl-step--end { background: var(--wn-glass-bg); border-color: rgba(255, 179, 199, .3); color: #fff; }
.tl-step--end .tl-step__n { color: var(--mint); }
.tl-step--end .wn-h4 { color: #fff; }
.tl-step--end > p { font: 400 16px/25px var(--text); color: rgba(255, 255, 255, .82); }
.tl-step--end .tlink { margin-top: auto; color: var(--mint); }
.tl-step--end .tl-step__dot { background: var(--wn-gold); }
/* without motion (reduced motion, ?static=1, no JS) the track is a wrapping grid, not a clipped sideways row */
html:not(.wm-on) .tl-how .wm-h__sticky { overflow: visible; }
html:not(.wm-on) .tl-how__track, html:not(.wm-on) body.t-test-lab .wn-main ol.tl-how__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px; width: auto; padding: 0 7% 10px; }
html:not(.wm-on) .tl-how__track::before, html:not(.wm-on) .tl-step__dot { display: none; }
html:not(.wm-on) .tl-step { width: auto; margin-top: 0; }

/* how it works, vertical (CFG how='v'): a path that draws itself, the heading sticky at the left */
.tl-howv__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 80px; align-items: start; }
.tl-howv__head { position: sticky; top: 160px; }
.tl-howv__head .wn-head { margin-bottom: 0; }
.tl-howv__body { position: relative; }
.tl-howv__line { position: absolute; left: 34px; top: 36px; width: 4px; height: calc(100% - 72px); overflow: visible; }
.tl-howv__line path { fill: none; stroke: #d6335e; stroke-width: 3; }
.tl-howv__list { position: relative; display: flex; flex-direction: column; gap: 20px; }
.tl-vstep { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 26px; align-items: start; }
.tl-vstep__n { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid var(--wn-rose-20);
  font: 500 24px/1 var(--display); letter-spacing: -.5px; color: var(--purple); box-shadow: 0 0 0 8px var(--tl-howv-bg, #fff); }
.tl-vstep__b { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 90px 28px 30px; border-radius: 24px; background: var(--wn-page);
  border: 1px solid var(--wn-line); }
.wn-sec--page .tl-vstep__b { background: #fff; }
.wn-sec--page.tl-howv { --tl-howv-bg: var(--wn-page); }
.tl-vstep__b > p { font: 400 16px/25px var(--text); color: var(--grey70); }
.tl-vstep__ico { position: absolute; right: 24px; top: 22px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px;
  background: var(--wn-rose-10); color: var(--blue); }
.tl-vstep--end .tl-vstep__n { background: var(--wn-gold); border-color: var(--wn-gold); color: var(--ink); }
.tl-vstep--end .tl-vstep__b { background: var(--wn-glass-bg); border-color: rgba(255, 179, 199, .3); color: #fff; }
.tl-vstep--end .wn-h4 { color: #fff; }
.tl-vstep--end .tl-vstep__b > p { color: rgba(255, 255, 255, .82); }
.tl-vstep--end .tlink { color: var(--mint); }

/* ---------- what you get: the bento ---------- */
.tl-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.tl-bento--3 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); }
.tl-bento--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tl-bento--5 .tl-out--big { grid-row: span 2; }
.tl-bento--7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tl-bento--7 .tl-out--big { grid-column: span 2; }
.tl-out { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 230px; padding: 28px; border-radius: 24px; background: var(--wn-page);
  border: 1px solid var(--wn-line); transition: transform .45s var(--wn-ease-out), box-shadow .45s var(--wn-ease-out); }
.tl-out:hover { transform: translateY(-6px); box-shadow: var(--wn-shadow); }
.tl-out__k { font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.tl-out__ico { position: absolute; right: 24px; top: 22px; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 16px; background: #fff; color: var(--blue); }
.tl-out .wn-h4 { margin-top: 18px; max-width: 86%; }
.tl-out p:last-child { font: 400 16px/25px var(--text); color: var(--grey70); }
.tl-out--big { justify-content: flex-end; min-height: 300px; background: var(--wn-hero-bg); border-color: transparent; color: #fff; }
.tl-out--big .tl-out__k { position: absolute; left: 28px; top: 28px; color: var(--mint); }
.tl-out--big .tl-out__ico { width: 64px; height: 64px; background: rgba(255, 179, 199, .14); color: var(--mint); }
.tl-out--big .wn-h4 { font: 500 30px/36px var(--display); letter-spacing: -.5px; color: #fff; }
.tl-out--big p:last-child { font-size: 17px; line-height: 26px; color: rgba(255, 255, 255, .84); max-width: 560px; }

/* ---------- FAQ section ---------- */
.tl-faq { background: var(--wn-page); }

/* =====================================================================================================
   RESPONSIVE (21 Oct 2026): small laptops, tablets and phones. Breakpoints, the phone bar and the lite motion: the
   RESPONSIVE block at the top of wine-base.css. Every rule below sits in a max-width or touch media query, so the page
   at 1200px and wider is exactly as designed. Below 1024px (and on touch screens) wine-motion.js runs the lite mode:
   html.wm-on is never set, so the pinned story, the sideways how-it-works and every drawing loop show their still,
   complete frame (the html:not(.wm-on) rules above); nothing here needs a script.
   ===================================================================================================== */

/* ---------- 1200: small laptop, tablet landscape ---------- */
@media (max-width: 1199.98px) {
  /* hero: the split and reverse heroes stack, the drawing under the text at its designed size (the stage heroes are
     one column already) */
  .tl-hero__grid, .tl-hero--reverse .tl-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .tl-hero--reverse .tl-hero__txt { order: 0; }
  .tl-hero:not(.tl-hero--stage) .tl-hero__txt { max-width: 760px; }
  .tl-hero:not(.tl-hero--stage) .tl-hero__vis { width: 100%; max-width: 560px; margin: 0 auto; }
  .tl-hero--stage .tl-hero__txt { column-gap: 48px; }
  /* the pinned story's heading */
  .tl-pin__side .wn-h2 { font-size: clamp(28px, 1.98vw + 22px, 44px); line-height: 1.18; letter-spacing: -.02em; }
  .tl-pin__in { gap: 56px; }
  /* without the pinned motion (touch tablets, reduced motion) the story is stacked sections: the heading and its
     step list, then the four steps at full width */
  html:not(.wm-on) .tl-pin__in { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  html:not(.wm-on) .tl-pin .wm-pin__bar { display: none; }
  html:not(.wm-on) .tl-pin__nav { max-width: 560px; }
  /* pinned (small laptop windows): a narrower phone so the answers beside it keep a readable width */
  html.wm-on .tl-react { grid-template-columns: 260px minmax(0, 1fr); gap: 24px; }
  html.wm-on .tl-react .tl-phone { width: 260px; }
  html.wm-on .tl-media { grid-template-columns: minmax(0, 1fr); }
  html.wm-on .tl-media__vid { height: 150px; }
  .tl-teaser__h { font-size: clamp(30px, 2.6vw + 21px, 52px); line-height: 1.12; letter-spacing: -.024em; }
  .tl-labnote, .tl-verdict__grid, .tl-howv__grid { gap: 56px; }
  .tl-score__head { gap: 40px; }
  /* labels inside the drawings: never under 12px */
  .tl-cb__k, .tl-note__b, .tl-jar__s span, .tl-phone .tl-jar__s span, .tl-md__k, .tl-q__k, .tl-md__h, .tl-bub b, .tl-film__badge,
  .tl-area b, .tl-hm__area b, .tl-heat li b, .tl-hm__areas li b, .tl-rate__ends, .tl-media__rec, .tl-media__k, .tl-checks li,
  .tl-rank__cut span, .tl-rk__cut span, .tl-aw__mk b, .tl-sp__v.is-na, .tl-nw__k, .tl-mh__said p span, .tl-sc__v sup, .tl-rk__tag,
  .tl-post__who em, .tl-audio__ak, .tl-face, .tl-faces--8 .tl-face { font-size: 12px; }
  .tl-pouch--xl em { font-size: 12px; line-height: 14px; }
  .tl-faces--8 .tl-face { line-height: 14px; }
  /* the eight faces at 12px: three to a row (the last row of two is centred) */
  .tl-faces--8 { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; }
  .tl-faces--8 .tl-face { flex: 0 0 33.333%; }
  .tl-rk__cut span, .tl-rank__cut span { white-space: nowrap; }
  .tl-rk__defs { padding: 0 28px 28px; }
}

/* ---------- 1024: tablet portrait and below ---------- */
@media (max-width: 1023.98px) {
  /* hero: below the header bar (wine-base.css: --wn-hdr-clear) */
  .tl-hero { padding: var(--wn-hdr-clear, 96px) 0 0; }
  .tl-hero__grid, .tl-hero--reverse .tl-hero__grid { gap: 48px; }
  .tl-hero--stage .tl-hero__txt { display: flex; flex-direction: column; align-items: stretch; gap: 20px; max-width: 760px; }
  .tl-hero--stage .wn-hero__ctas { margin-top: 6px; }
  .tl-hero .tl-stats { margin-top: 56px; }
  .tl-hero .tl-stats .wn-stat { padding-bottom: 32px; }
  .tl-hero .tl-stats .wn-stat b { font-size: 46px; }
  /* stage heroes at tablet width */
  .tl-hero--stage .tl-stim, .tl-hero--stage .tl-stim--names { height: auto; }
  .tl-wall, .tl-names { position: relative; inset: auto; }
  .tl-wall__bar, .tl-names__bar { flex-wrap: wrap; }
  .tl-wall__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; gap: 14px 16px; }
  .tl-note { min-height: 92px; }
  .tl-names__row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .tl-name { min-height: 210px; }
  .tl-names__bubble { flex-wrap: wrap; justify-content: center; text-align: center; border-radius: 24px; }
  .tl-hero--stage .tl-stim--shelf { height: 430px; }
  .tl-shelf__unit { left: 0; right: 0; }
  .tl-chip--g { right: 4%; }
  /* the lab note */
  .tl-labnote { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
  .tl-bench { margin-top: 56px; }
  /* the pinned story, as stacked sections */
  .tl-pin__in, html:not(.wm-on) .tl-pin__in { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: var(--wn-sec-y); padding-bottom: var(--wn-sec-y); }
  .tl-pin__nav { max-width: 560px; }
  .tl-pin__layers { gap: 72px; }
  .tl-pin__glow { width: 520px; height: 520px; }
  /* the video answer beside the phone: picture above its text */
  .tl-media { grid-template-columns: minmax(0, 1fr); }
  .tl-media__vid { height: 170px; }
  /* the scorecard */
  .tl-score__head { grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; margin-bottom: 36px; }
  .tl-score__base { max-width: 640px; }
  .tl-sc__head, .tl-sc__row { grid-template-columns: minmax(0, 1.5fr) repeat(var(--n), minmax(0, 1fr)); gap: 20px; padding: 16px 22px; }
  .tl-sc__head, .tl-rk__head { top: 66px; }
  .tl-rk { padding: 10px 22px 18px; }
  .tl-rk__head, .tl-rk__r { grid-template-columns: 28px minmax(0, 1.4fr) minmax(0, 1.4fr) repeat(var(--n), minmax(0, .8fr)); gap: 14px; }
  .tl-rk__sides { padding: 8px 22px 24px; gap: 16px; }
  .tl-rk__side li { grid-template-columns: minmax(0, 140px) minmax(0, 1fr) 44px; }
  .tl-rk__defs { padding: 0 22px 24px; }
  /* the verdict */
  .tl-verdict__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .tl-verdict__story { position: static; max-width: 760px; }
  .tl-verdict__glow { width: 560px; height: 560px; }
  /* how it works, sideways (still frame below 1024px): two columns */
  .tl-how .wm-h__sticky { padding: var(--wn-sec-y) 0; }
  html:not(.wm-on) .tl-how__track, html:not(.wm-on) body.t-test-lab .wn-main ol.tl-how__track { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  /* how it works, vertical */
  .tl-howv__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .tl-howv__head { position: static; max-width: 760px; }
  /* what you get: two columns, the big card across both */
  .tl-bento, .tl-bento--3, .tl-bento--4, .tl-bento--7 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .tl-bento .tl-out--big, .tl-bento--5 .tl-out--big, .tl-bento--7 .tl-out--big { grid-column: 1 / -1; grid-row: auto; min-height: 260px; }
  .tl-out--big { padding-top: 104px; }
  .tl-bento > .tl-out:last-child:nth-child(even) { grid-column: 1 / -1; }
  .tl-out { min-height: 0; }
}

/* ---------- 768: phones (and phones in landscape) ---------- */
@media (max-width: 767.98px) {
  .tl-hero { padding-top: var(--wn-hdr-clear-m, 88px); }
  .tl-hero__grid, .tl-hero--reverse .tl-hero__grid { gap: 40px; }
  .tl-hero__txt, .tl-hero--stage .tl-hero__txt { gap: 18px; }
  .tl-hero--stage .wn-lead { font-size: 18px; line-height: 28px; }
  .tl-hero__glow2 { width: 480px; height: 480px; }
  .tl-hero .tl-stats { margin-top: 44px; }
  .tl-hero .tl-stats .wn-stat { padding-bottom: 20px; }
  .tl-hero .tl-stats .wn-stat b { font-size: clamp(34px, 8vw + 6px, 48px); }
  .tl-hero:not(.tl-hero--stage) .tl-hero__vis { max-width: none; }
  .tl-chip { white-space: normal; }

  /* hero drawings, rebuilt for the phone column (about 310-340px): each stands in normal flow, no fixed height */
  .tl-stim, .tl-hero--stage .tl-stim, .tl-hero--stage .tl-stim--names, .tl-hero--stage .tl-stim--shelf, .tl-stim--video { height: auto; }
  /* board (concept): the three boards fanned closer */
  .tl-stim.tl-stim--board { height: 470px; }
  .tl-board__fan { height: 384px; }
  .tl-cb { top: 24px; width: 200px; height: 318px; margin-left: -100px; padding: 14px; gap: 8px; }
  .tl-cb--0 { transform: translate3d(calc(-1 * min(74px, 17vw)), 18px, 0) rotate(-8deg); }
  .tl-cb--2 { transform: translate3d(min(74px, 17vw), 18px, 0) rotate(8deg); }
  .tl-cb__pic { height: 140px; }
  .tl-cb__n { font-size: 16px; line-height: 21px; }
  .tl-board__dots { gap: 6px; padding: 9px 14px; }
  .tl-board__dots i { width: 10px; height: 10px; }
  .tl-board__route p { max-width: 300px; text-align: center; font-size: 14px; line-height: 19px; }
  /* wall (idea screening): two columns of notes */
  .tl-wall { gap: 14px; }
  .tl-wall__bar { gap: 8px; }
  .tl-wall__bar span { padding: 7px 13px; font-size: 13px; line-height: 17px; text-align: center; }
  .tl-wall__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .tl-note { min-height: 0; padding: 12px 12px 11px; font-size: 15px; line-height: 20px; }
  .tl-note__b { white-space: normal; }
  /* product: the tray, then the tasting card under it */
  .tl-prod { position: relative; inset: auto; display: flex; flex-direction: column; gap: 18px; }
  .tl-tray { position: relative; height: 236px; padding: 30px 26px 0 0; border-radius: 24px; }
  .tl-tray__l { left: 20px; right: 20px; top: 14px; }
  .tl-bowl { width: 112px; height: 112px; }
  .tl-bowl b { bottom: -40px; }
  .tl-spoon { right: -26px; height: 80px; }
  .tl-spoon::after { height: 58px; }
  .tl-taste { position: relative; right: auto; bottom: auto; width: 100%; padding: 20px; }
  /* shelf (pack): five packs on the shelf, the three notes under it */
  .tl-shelf { position: relative; inset: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .tl-shelf__unit { position: relative; inset: auto; flex: 0 0 100%; height: 330px; margin-top: 4px; padding: 40px 18px 0;
    box-shadow: inset 0 0 0 9px #4a1238, 0 24px 50px rgba(10, 2, 8, .5); }
  .tl-shelf__row { height: 196px; gap: 10px; }
  .tl-shelf__row > .tl-pouch:nth-child(even) { display: none; }
  .tl-pouch { height: 172px; }
  .tl-shelf__board { margin: 0 -18px; }
  .tl-shelf__row--2 { height: 76px; gap: 6px; }
  .tl-box { height: 66px; }
  .tl-shelf .tl-chip { position: relative; inset: auto; order: 2; }
  .tl-shelf .tl-chip--q { order: -1; }
  /* claims: the pack, then the best-and-worst screen under it */
  .tl-claims { position: relative; inset: auto; display: flex; flex-direction: column; align-items: center; gap: 22px; padding-top: 26px; }
  .tl-pack { position: relative; left: auto; top: auto; width: 236px; height: 350px; padding: 30px 22px; }
  .tl-pack__brand { font-size: 27px; line-height: 31px; }
  .tl-pack__drop { top: 150px; width: 96px; height: 96px; margin-left: -48px; }
  .tl-sticker--1 { left: -12%; top: 92px; }
  .tl-sticker--2 { left: -14%; top: 262px; }
  .tl-sticker--3 { left: 30%; bottom: 20px; }
  .tl-md--hero { position: relative; right: auto; top: auto; width: 100%; max-width: 420px; padding: 20px 18px 10px; }
  /* names: two by two */
  .tl-names { gap: 14px; }
  .tl-names__bar { gap: 8px; }
  .tl-names__bar span { padding: 7px 13px; font-size: 13px; line-height: 17px; }
  .tl-names__row { gap: 12px; }
  .tl-name { min-height: 0; gap: 12px; padding: 18px 16px 16px; border-radius: 20px; }
  .tl-name__mk svg { width: 36px; height: 36px; }
  .tl-name--sp b, .tl-name--lu b { font-size: 25px; line-height: 30px; letter-spacing: -.4px; }
  .tl-name--qu b { font-size: 24px; line-height: 30px; letter-spacing: -.6px; }
  .tl-name--fw b { font-size: 17px; line-height: 30px; letter-spacing: .1em; }
  .tl-name__f { gap: 6px 8px; }
  .tl-names__bubble { padding: 12px 18px; font-size: 15px; }
  /* lines (message): the billboard, then what was meant and what was heard */
  .tl-bill { position: relative; inset: auto; display: flex; flex-direction: column; gap: 22px; }
  .tl-bill__board { position: relative; top: auto; height: auto; gap: 16px; padding: 22px 20px; margin: 12px 12px 0;
    box-shadow: 0 0 0 10px #33102c, 0 0 0 11px rgba(255,179,199,.3), 0 30px 60px rgba(10, 2, 8, .6); }
  .tl-bill__lines span { font-size: 16px; line-height: 21px; }
  .tl-bill__lines span:nth-child(2) { font-size: 27px; line-height: 32px; letter-spacing: -.5px; }
  .tl-bill__leg { display: none; }
  .tl-bill__said { position: relative; left: auto; right: auto; bottom: auto; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 10px; }
  .tl-bub { padding: 14px 18px; font-size: 16px; line-height: 23px; }
  /* video: the player full width, the two notes under it */
  .tl-film { position: relative; inset: auto; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 0; }
  .tl-film__tabs { flex-wrap: wrap; justify-content: center; margin-bottom: 12px; border-radius: 22px; }
  .tl-film__tabs span { padding: 7px 10px; font-size: 12px; white-space: nowrap; }
  .tl-film__screen, .tl-film__ctl { flex: 0 0 100%; }
  .tl-film__ctl { gap: 10px; padding: 10px 12px; }
  html:not(.wm-on) .tl-film .tl-next__lock { display: none; }
  .tl-endcard { font-size: 36px; letter-spacing: -.8px; }
  .tl-scn--4 span { font-size: 15px; line-height: 20px; }
  .tl-cup { width: 104px; height: 118px; margin-left: -52px; }
  .tl-film .tl-chip { position: relative; inset: auto; margin: 14px 4px 0; }
  /* poster: the shelter full width, the first-look list under it */
  .tl-shelter { position: relative; inset: auto; }
  .tl-shelter__roof { position: relative; width: 100%; }
  .tl-shelter__glass { position: relative; left: auto; top: auto; bottom: auto; width: 100%; height: 400px; padding: 14px 14px 34px; }
  .tl-poster__hl { font-size: 26px; line-height: 30px; }
  .tl-heat { position: relative; right: auto; top: auto; width: 100%; margin-top: 18px; }
  /* audio: the player card, then the answer */
  .tl-audio { position: relative; inset: auto; gap: 16px; }
  .tl-audio__card { padding: 20px 18px 16px; border-radius: 22px; }
  .tl-audio__top { flex-wrap: wrap; gap: 12px 14px; }
  .tl-audio__art { width: 56px; height: 56px; border-radius: 16px; }
  .tl-audio__t { font-size: 21px; line-height: 27px; }
  .tl-audio__seg { margin-left: 0; }
  .tl-audio__wave { height: 104px; margin: 18px 0 12px; }
  .tl-audio__bars { gap: 3px; }
  .tl-audio__ans { width: 100%; gap: 14px; padding: 14px 16px; }
  /* feed: the phone, then the question and the note under it */
  .tl-feedhero { position: relative; inset: auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .tl-phone--feed { position: relative; left: auto; top: auto; max-width: 100%; }
  .tl-feedq { position: relative; right: auto; top: auto; width: 100%; max-width: 420px; padding: 20px; }
  .tl-chip--feed { position: relative; right: auto; bottom: auto; max-width: 420px; }

  /* the lab note */
  .tl-labnote__p p { font-size: 18px; line-height: 29px; }
  .tl-bench { margin-top: 44px; padding: 22px 0 24px; }
  .tl-fmt { padding: 12px 18px; font-size: 17px; line-height: 21px; }

  /* the pinned story */
  .tl-pin__in, html:not(.wm-on) .tl-pin__in { gap: 36px; }
  .tl-pin__side { gap: 18px; }
  .tl-pin__nav li { padding: 12px 0; font-size: 16px; line-height: 22px; }
  .tl-pin__layers { gap: 56px; }
  .tl-layer { gap: 20px; }
  .tl-layer__cap p:last-child { font-size: 17px; line-height: 26px; }
  .tl-pin__glow { width: 400px; height: 400px; }
  /* step 0: the brief, label above its value */
  .tl-brief { padding: 22px 20px 20px; border-radius: 20px; }
  .tl-brief__t { font-size: 24px; line-height: 30px; }
  .tl-brief li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 11px 0; }
  .tl-brief li span { line-height: 18px; }
  /* step 1: the phone, then the open answers */
  .tl-react { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tl-react .tl-phone { width: 300px; max-width: 100%; margin: 0 auto; }
  .tl-say:nth-child(2) { margin-left: 22px; }
  .tl-say:nth-child(3) { margin-left: 10px; }
  .tl-media { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; padding: 12px; border-radius: 20px; }
  .tl-media__vid { height: 170px; }
  .tl-media__who { width: 92px; height: 128px; margin-left: -46px; }
  .tl-media__who i { width: 46px; height: 46px; margin-left: -23px; }
  .tl-media__who b { height: 62px; }
  /* step 2: the tallies */
  .tl-tally { padding: 22px 20px 24px; border-radius: 20px; }
  .tl-tally__n b { font-size: 34px; }
  /* the rank race: the name on its own line, the bar under it */
  .tl-rank li:not(.tl-rank__cut) { grid-template-columns: 22px minmax(0, 1fr) 54px; grid-template-rows: auto auto; height: auto; row-gap: 6px; padding: 7px 0; }
  .tl-rank li:not(.tl-rank__cut) b { grid-column: 1; grid-row: 1; }
  .tl-rank li:not(.tl-rank__cut) span { grid-column: 2; grid-row: 1; white-space: normal; }
  .tl-rank li:not(.tl-rank__cut) em { grid-column: 3; grid-row: 1; }
  .tl-rank li:not(.tl-rank__cut) i { grid-column: 2 / 4; grid-row: 2; }
  /* heat: the picture, then the areas */
  .tl-hm { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tl-hm__pic { width: 250px; max-width: 100%; justify-self: center; }
  /* wave: name and length on one line, the note under them; one column of results */
  .tl-aw__top { flex-wrap: wrap; row-gap: 4px; }
  .tl-aw__top em { order: 1; }
  .tl-aw__top span { order: 2; flex: 0 0 100%; }
  .tl-aw__m { grid-template-columns: minmax(0, 1fr); }
  .tl-aw__m li { grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 44px; }
  /* split: the measure on top, the feed bar left and the close-up bar right under it */
  .tl-sp__h { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
  .tl-sp__h span:last-child { grid-column: 2; }
  .tl-sp li { grid-template-columns: 50px minmax(0, 1fr) minmax(0, 1fr) 50px; gap: 6px 8px; }
  .tl-sp__m { grid-column: 1 / -1; grid-row: 1; }
  .tl-sp__v--l { grid-row: 2; } .tl-sp__t--l { grid-column: 2; grid-row: 2; }
  .tl-sp__t--r { grid-column: 3; grid-row: 2; } .tl-sp__v--r { grid-column: 4; grid-row: 2; }
  .tl-sp__v { font-size: 15px; }
  .tl-sp__v.is-na { line-height: 14px; }
  /* jar */
  .tl-jt__note { margin-left: 0; flex: 0 0 100%; }
  /* words: one card per row */
  .tl-nw { grid-template-columns: minmax(0, 1fr); }
  /* heard: the scores under what people heard */
  .tl-mh__r { grid-template-columns: minmax(0, 1fr); }
  .tl-mh__line { align-items: flex-start; }
  .tl-mh__line b { font-size: 18px; line-height: 23px; }
  .tl-mh__m li { grid-template-columns: 96px minmax(0, 1fr) 40px; }
  /* step 3: the verdict teaser */
  .tl-teaser { padding: 26px 20px; border-radius: 22px; }
  .tl-teaser__s { font-size: 17px; line-height: 26px; }
  .tl-vd { gap: 12px; padding: 12px 14px; }

  /* the scorecard: the measure across the card, the ideas side by side under it */
  .tl-score__base p { font-size: 16px; line-height: 23px; }
  .tl-report { border-radius: 22px; }
  .tl-report__bar { flex-wrap: wrap; gap: 4px 12px; padding: 14px 18px; font-size: 13px; line-height: 17px; }
  .tl-sc__head, .tl-sc__row { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px 12px; padding: 14px 16px; }
  .tl-sc__head { padding-top: 14px; padding-bottom: 12px; }
  .tl-sc__mh { display: none; }
  .tl-sc__m { grid-column: 1 / -1; }
  .tl-sc__m b { font-size: 17px; }
  .tl-sc__m span { font-size: 16px; line-height: 22px; }
  .tl-sc__vh { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tl-sc__vh b { font-size: 13px; line-height: 17px; }
  .tl-sc__v { font-size: 23px; }
  .tl-sc__txt { font-size: 14px; line-height: 19px; }
  .tl-sc__time { font-size: 20px; }
  .tl-vpill { padding: 6px 10px; font-size: 12px; line-height: 15px; }
  /* the ranked list: the idea and its bar across the card, the other scores under them (their names in the sticky head) */
  .tl-rk { padding: 4px 16px 16px; }
  .tl-rk__head, .tl-rk__r { grid-template-columns: 24px repeat(var(--n), minmax(0, 1fr)); gap: 6px 10px; }
  .tl-rk__head { padding: 12px 0 10px; }
  .tl-rk__head > .tl-rk__hn, .tl-rk__head > .tl-rk__hname { display: none; }
  .tl-rk__head > .tl-rk__mh--wide { grid-column: 2 / -1; grid-row: 1; }
  .tl-rk__head > .tl-rk__mh:not(.tl-rk__mh--wide) { grid-row: 2; text-align: left; }
  .tl-rk__head > :nth-child(4) { grid-column: 2; } .tl-rk__head > :nth-child(5) { grid-column: 3; }
  .tl-rk__head > :nth-child(6) { grid-column: 4; } .tl-rk__head > :nth-child(7) { grid-column: 5; }
  /* each score carries its measure's name (data-l), so the head keeps only the bar's name */
  .tl-rk:has(.tl-rk__c[data-l]) .tl-rk__head > .tl-rk__mh:not(.tl-rk__mh--wide) { display: none; }
  .tl-rk__c[data-l]::before { content: attr(data-l); display: block; margin-bottom: 1px; font: 500 12px/16px var(--text); color: var(--grey70); }
  .tl-rk__r { padding: 12px 0; }
  .tl-rk__n { grid-column: 1; grid-row: 1; padding-top: 3px; }
  .tl-rk__name { grid-column: 2 / -1; grid-row: 1; }
  .tl-rk__bar { grid-column: 2 / -1; grid-row: 2; }
  .tl-rk__r > .tl-rk__c { grid-row: 3; text-align: left; }
  .tl-rk__r > :nth-child(4) { grid-column: 2; } .tl-rk__r > :nth-child(5) { grid-column: 3; }
  .tl-rk__r > :nth-child(6) { grid-column: 4; } .tl-rk__r > :nth-child(7) { grid-column: 5; }
  /* four scores: two by two, each name and value on one line */
  .tl-rk[style*="--n:4"] .tl-rk__r { grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; }
  .tl-rk[style*="--n:4"] .tl-rk__r > :nth-child(4) { grid-column: 2; grid-row: 3; }
  .tl-rk[style*="--n:4"] .tl-rk__r > :nth-child(5) { grid-column: 3; grid-row: 3; }
  .tl-rk[style*="--n:4"] .tl-rk__r > :nth-child(6) { grid-column: 2; grid-row: 4; }
  .tl-rk[style*="--n:4"] .tl-rk__r > :nth-child(7) { grid-column: 3; grid-row: 4; }
  .tl-rk[style*="--n:4"] .tl-rk__c[data-l] { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
  .tl-rk[style*="--n:4"] .tl-rk__c[data-l]::before { margin: 0; }
  /* a row rated on none of them (only the top claims are rated): no row of dashes */
  .tl-rk__r:not(:has([data-count])) > .tl-rk__c { display: none; }
  .tl-rk__sides { grid-template-columns: minmax(0, 1fr); padding: 8px 16px 20px; gap: 12px; }
  .tl-rk__side { padding: 20px 18px; }
  .tl-rk__sd { font-size: 16px; line-height: 23px; }
  .tl-rk__side li { grid-template-columns: minmax(0, 130px) minmax(0, 1fr) 44px; gap: 10px; }
  .tl-rk__defs { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 24px; padding: 0 16px 20px; }
  .tl-rk__defs li { font-size: 16px; line-height: 24px; }

  /* the verdict */
  .tl-verdict__story .wn-prose p { font-size: 17px; line-height: 28px; }
  .tl-vcard { gap: 8px 14px; padding: 20px 18px 18px 24px; border-radius: 20px; }
  .tl-vcard__x { font-size: 16px; line-height: 22px; }
  .tl-ask { padding: 20px 18px; border-radius: 22px; }
  .tl-ask__k { flex-wrap: wrap; row-gap: 4px; }
  .tl-ask__q { max-width: 92%; }
  .tl-ask__a { max-width: 100%; }
  .tl-verdict__glow { width: 420px; height: 420px; }

  /* how it works: one column */
  html:not(.wm-on) .tl-how__track, html:not(.wm-on) body.t-test-lab .wn-main ol.tl-how__track { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tl-step { gap: 10px; padding: 24px 22px 26px; border-radius: 20px; }
  .tl-step__n { font-size: 38px; }
  .tl-step__ico { right: 20px; top: 22px; }
  .tl-vstep { grid-template-columns: 46px minmax(0, 1fr); gap: 14px; }
  .tl-vstep__n { width: 46px; height: 46px; font-size: 17px; box-shadow: 0 0 0 6px var(--tl-howv-bg, #fff); }
  .tl-howv__line { left: 21px; top: 23px; height: calc(100% - 46px); }
  .tl-vstep__b { padding: 22px 20px 24px; border-radius: 20px; }
  .tl-vstep__b .wn-h4 { padding-right: 52px; }
  .tl-vstep__ico { right: 16px; top: 16px; width: 42px; height: 42px; }

  /* what you get: one column */
  .tl-bento, .tl-bento--3, .tl-bento--4, .tl-bento--7 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tl-bento > .tl-out, .tl-bento > .tl-out:last-child:nth-child(even) { grid-column: auto; }
  .tl-bento .tl-out--big, .tl-bento--5 .tl-out--big, .tl-bento--7 .tl-out--big { grid-column: auto; min-height: 280px; }
  .tl-out { gap: 10px; padding: 24px 22px; border-radius: 20px; }
  .tl-out__ico { right: 20px; top: 20px; width: 46px; height: 46px; }
  .tl-out .wn-h4 { margin-top: 14px; max-width: calc(100% - 56px); }
  .tl-out--big .tl-out__k { left: 22px; top: 24px; }
  .tl-out--big .wn-h4 { font-size: 26px; line-height: 32px; max-width: none; }
}

/* ---------- 480: phone ---------- */
@media (max-width: 479.98px) {
  .tl-hero .tl-stats { margin-top: 36px; }
  .tl-pin__nav li { grid-template-columns: 32px minmax(0, 1fr); }
  .tl-sc__head, .tl-rk__head { top: 60px; }
  .tl-sc__head, .tl-sc__row { gap: 10px 8px; padding-left: 14px; padding-right: 14px; }
  .tl-media { grid-template-columns: minmax(0, 1fr); }
  .tl-media__vid { height: 180px; }
  .tl-vd { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tl-vcard { grid-template-columns: minmax(0, 1fr); }
  .tl-vcard__w { grid-column: 1; grid-row: auto; justify-self: start; }
  .tl-ask__k span { margin-left: 0; flex: 0 0 100%; }
  .tl-rk__side li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; }
}

/* ---------- touch screens: no hover lift that sticks after a tap ---------- */
@media (hover: none) and (pointer: coarse) {
  .tl-out:hover { transform: none; box-shadow: none; }
}