/* =====================================================================================================================
   t-model-explorer.css (hand-written, 20 Oct 2026): the "blueprint" pages of the model-explorer template
   (pricing research, MaxDiff, TURF, segmentation, market sizing). Loads after wine-chrome.css and wine-base.css.
   Prefix me- only (never mx-, a homepage class). The interactive boards are driven by t-model-explorer.js; without it
   every board shows its first state (controls hidden), and the pinned "how the model works" shows every plate.
   Colours: wine #1a0616 -> #4a1238, plum #33102c, rose #ffb3c7, button #d6335e, links #b4235a, bright #e8466f,
   champagne #f6c98e (the one chart accent), coral #ff8a7a, ink #1e0a1a. Sora 500 headlines, Inter text.
   ===================================================================================================================== */

body.t-model-explorer { --me-grid: rgba(255, 179, 199, .075); --me-grid2: rgba(255, 179, 199, .035); --me-dash: rgba(255, 179, 199, .22); }

/* ---------- shared bits ---------- */
/* the template's lists carry their own numbers (counters or spans): no browser markers */
body.t-model-explorer main ol[class*="me-"], body.t-model-explorer main ul[class*="me-"], body.t-model-explorer main [class*="me-"] ol,
body.t-model-explorer main [class*="me-"] ul { list-style: none; margin: 0; padding: 0; }
body.t-model-explorer main [class*="me-"] dd { margin-left: 0; }
/* curves that draw themselves once their chart is on screen (pathLength="1"; the engines may change d later) */
html.wm-on .me-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
html.wm-on svg.is-in .me-draw { animation: me-ink 1.7s var(--wm-ease) .25s forwards; }
.me-swatch { display: inline-grid; place-items: center; width: 36px; height: 24px; flex: none; border-radius: 8px; background: #33102c; }
.me-swatch i { display: block; width: 22px; height: 4px; border-radius: 2px; background: var(--c, #ffb3c7); }
.me-board__lab { font: 600 12px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); margin-bottom: 12px; }

/* ---------- 1. hero: wine with a drafting grid, the model sheet ---------- */
.me-hero { padding-bottom: 0; }
.me-hero__grid { position: absolute; z-index: -1; inset: -80px 0; pointer-events: none;
  background-image: linear-gradient(var(--me-grid) 1px, transparent 1px), linear-gradient(90deg, var(--me-grid) 1px, transparent 1px),
    linear-gradient(var(--me-grid2) 1px, transparent 1px), linear-gradient(90deg, var(--me-grid2) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  -webkit-mask-image: radial-gradient(70% 80% at 70% 40%, #000 30%, transparent 85%); mask-image: radial-gradient(70% 80% at 70% 40%, #000 30%, transparent 85%); }
.me-hero .wn-hero__grid { grid-template-columns: minmax(0, 13fr) minmax(0, 11fr); gap: 72px; align-items: center; }
.me-h1 { font-size: 58px; line-height: 64px; }
.me-hero__txt .wn-kicker { margin-top: -8px; }
.me-spec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 30px; border-top: 1px solid var(--me-dash); }
.me-spec li { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px 0 0; }
.me-spec li + li { padding-left: 20px; border-left: 1px dashed var(--me-dash); }
.me-spec span { font: 600 12px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.me-spec b { font: 500 15px/22px var(--text); color: rgba(255, 255, 255, .9); }

.me-sheet { position: relative; margin: 0; padding: 22px 26px 20px; border-radius: 24px; color: #fff;
  background: linear-gradient(var(--me-grid2) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(90deg, var(--me-grid2) 1px, transparent 1px) 0 0 / 20px 20px,
    linear-gradient(160deg, rgba(51, 16, 44, .92), rgba(20, 4, 15, .88));
  border: 1px solid rgba(255, 179, 199, .3); box-shadow: 0 40px 90px rgba(8, 1, 6, .55), inset 0 0 60px rgba(232, 70, 111, .08); }
.me-sheet::before, .me-sheet::after, .me-sheet__mk::before, .me-sheet__mk::after { content: ""; position: absolute; width: 18px; height: 18px; border-color: var(--mint); border-style: solid; opacity: .7; }
.me-sheet::before { left: -9px; top: -9px; border-width: 1.5px 0 0 1.5px; }
.me-sheet::after { right: -9px; bottom: -9px; border-width: 0 1.5px 1.5px 0; }
.me-sheet__mk::before { right: -9px; top: -9px; border-width: 1.5px 1.5px 0 0; }
.me-sheet__mk::after { left: -9px; bottom: -9px; border-width: 0 0 1.5px 1.5px; }
.me-sheet__bar { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px dashed var(--me-dash);
  font: 600 12px/16px var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.me-sheet__bar span:last-child { color: rgba(255, 255, 255, .78); letter-spacing: .04em; text-transform: none; }
.me-sheet__fx { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 18px 0 4px; font: 500 25px/34px var(--display); letter-spacing: -.3px; }
.me-sheet__fx span { padding-bottom: 2px; border-bottom: 1.5px dotted rgba(255, 179, 199, .6); }
.me-sheet__fx em { font-style: normal; color: var(--wn-gold); }
.me-sketch { display: block; width: 100%; height: auto; overflow: visible; }
.me-sheet__cap { padding-top: 12px; border-top: 1px dashed var(--me-dash); font: 400 15px/22px var(--text); color: rgba(255, 255, 255, .8); }

/* the sketch strokes (each ink() path has pathLength="1") */
.me-ink { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.me-ink:not([stroke]) { stroke: var(--mint); }
.me-ink--ax { stroke: rgba(255, 179, 199, .4); stroke-width: 1.2; }
.me-ink--dim { stroke: rgba(255, 255, 255, .62); stroke-width: 1.3; }
.me-ink--bar { stroke: url(#none); stroke: var(--mint); stroke-width: 12; }
.me-ink--hull { stroke: rgba(255, 179, 199, .55); stroke-width: 1.5; }
.me-sk__band { fill: rgba(255, 179, 199, .1); }
.me-sk__pt { fill: #fff; }
.me-sk__t { font: 500 13px var(--text); fill: rgba(255, 255, 255, .82); }
.me-sk__t--n { font-weight: 600; fill: var(--mint); }
.me-sk__step { fill: rgba(246, 201, 142, .3); }
.me-sk__fan { fill: rgba(255, 179, 199, .16); }
.me-sk__dot.s0 { fill: #ffb3c7; } .me-sk__dot.s1 { fill: #e8466f; } .me-sk__dot.s2 { fill: #f6c98e; } .me-sk__dot.s3 { fill: #ff8a7a; }
html.wm-on .me-hero .me-ink { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: me-ink 1.9s var(--wm-ease) forwards; animation-delay: calc(.55s + var(--i, 0) * .2s); }
html.wm-on .me-hero .me-sk__band, html.wm-on .me-hero .me-sk__pt, html.wm-on .me-hero .me-sk__t, html.wm-on .me-hero .me-sk__step, html.wm-on .me-hero .me-sk__fan {
  opacity: 0; animation: me-fade .9s ease forwards; animation-delay: 1.5s; }
html.wm-on .me-hero .me-sk__step { animation-delay: calc(.8s + var(--i, 0) * .09s); }
html.wm-on .me-hero .me-sk__dot { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: me-pop .7s var(--wm-ease) forwards; animation-delay: calc(.5s + var(--i, 0) * .22s); }
@keyframes me-ink { to { stroke-dashoffset: 0; } }
@keyframes me-fade { to { opacity: 1; } }
@keyframes me-pop { to { transform: scale(1); } }

/* the terms of the method, as a slow outlined marquee at the foot of the hero */
.me-terms { position: relative; margin-top: 96px; padding: 26px 0 30px; border-top: 1px solid rgba(255, 179, 199, .16); }
.me-terms__row { display: flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; }
.me-terms__row span { font: 500 36px/1 var(--display); letter-spacing: -.6px; color: transparent; -webkit-text-stroke: 1px rgba(255, 179, 199, .62); }
.me-terms__row i { display: grid; color: rgba(255, 179, 199, .5); }

/* ---------- 2. the problem ---------- */
.me-prob__in { align-items: start; gap: 80px; }
.me-prob__txt { display: flex; flex-direction: column; gap: 18px; padding-top: 12px; }
.me-prob__txt .wn-prose { margin-top: 6px; }
.me-prob__vis { min-width: 0; }

.me-q4 { margin: 0; padding: 30px 32px; border-radius: 28px; background: #fff; border: 1px solid var(--wn-line); box-shadow: var(--wn-shadow); }
.me-q4__h { font: 600 13px/18px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.me-q4__prod { display: flex; align-items: center; gap: 14px; margin: 16px 0 6px; padding: 14px 16px; border-radius: 16px; background: var(--wn-rose-10); color: var(--blue); }
.me-q4__prod b { display: block; font: 600 16px/22px var(--text); color: var(--ink); }
.me-q4__prod span { font: 400 14px/20px var(--text); color: var(--grey70); }
.me-q4 ol li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--wn-line); }
.me-q4 ol li .me-swatch { margin-top: 2px; }
.me-q4 ol b { font: 600 16px/22px var(--text); color: var(--ink); }
.me-q4 ol p { margin-top: 2px; font: 400 16px/24px var(--text); color: var(--grey70); }
.me-q4__f { margin-top: 16px; font: 500 14px/21px var(--text); color: var(--blue); }

.me-pvis--md { display: grid; gap: 18px; }
.me-rate, .me-try { margin: 0; padding: 24px 28px; border-radius: 24px; background: #fff; border: 1px solid var(--wn-line); }
.me-rate figcaption { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.me-rate figcaption b { font: 600 15px/20px var(--text); color: var(--ink); }
.me-rate figcaption span { font: 500 14px/20px var(--text); color: var(--blue); }
.me-rate li { display: grid; grid-template-columns: minmax(0, 1fr) 170px 34px; gap: 14px; align-items: center; padding: 6px 0; }
.me-rate li span { font: 400 15px/20px var(--text); color: var(--ink); }
.me-rate li i { display: block; height: 10px; border-radius: 99px; background: #cdbcc4; transform-origin: 0 50%; transform: scaleX(var(--v)); }
.me-rate li b { font: 600 15px/20px var(--text); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.me-try { box-shadow: var(--wn-shadow); }
.me-try__k { font: 600 13px/18px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.me-try__q { margin: 6px 0 12px; font: 500 22px/30px var(--display); letter-spacing: -.3px; color: var(--ink); }
.me-try__hd { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; font: 600 12px/16px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--grey70); text-align: center; }
.me-try__row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; padding: 8px 0; border-top: 1px solid var(--wn-line); }
.me-try__row span { font: 500 16px/22px var(--text); color: var(--ink); }
.me-try__b { justify-self: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #c7b4bd; background: #fff; cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .25s var(--wn-ease-out); }
.me-try__b:hover { border-color: var(--purple); transform: scale(1.08); }
.me-try__b[aria-pressed="true"] { background: var(--purple); border-color: var(--purple); box-shadow: inset 0 0 0 4px #fff; }
.me-try__b--l[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); }
.me-try__b:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.me-try__out { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--wn-line); font: 500 15px/22px var(--text); color: var(--blue); min-height: 46px; }

.me-pop { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.me-pop__c { padding: 28px 28px 24px; border-radius: 24px; background: #fff; border: 1px solid var(--wn-line); }
.me-pop__c.is-hi { background: var(--wn-glass-bg); border-color: rgba(255, 179, 199, .3); color: #fff; box-shadow: var(--wn-shadow); }
.me-pop__k { font: 600 13px/18px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.me-pop__c.is-hi .me-pop__k { color: var(--mint); }
.me-pop__s { margin: 6px 0 14px; font: 400 15px/22px var(--text); color: var(--grey70); }
.me-pop__c.is-hi .me-pop__s { color: rgba(255, 255, 255, .78); }
.me-pop ol { counter-reset: pop; }
.me-pop ol li { counter-increment: pop; display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--wn-line); font: 500 16px/22px var(--text); color: var(--ink); }
.me-pop ol li::before { content: counter(pop); width: 22px; font: 600 13px/1 var(--text); color: var(--grey70); }
.me-pop__c.is-hi ol li { border-top-color: rgba(255, 179, 199, .2); color: #fff; }
.me-pop__c.is-hi ol li::before { color: var(--mint); }
.me-pop ol li.is-new::after { content: ""; width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--wn-gold); box-shadow: 0 0 0 4px rgba(246, 201, 142, .2); }
.me-pop__r { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; }
.me-pop__r b { font: 500 56px/1 var(--display); letter-spacing: -1.4px; color: var(--blue); }
.me-pop__c.is-hi .me-pop__r b { color: var(--mint); }
.me-pop__r span { font: 400 15px/20px var(--text); color: var(--grey70); }
.me-pop__c.is-hi .me-pop__r span { color: rgba(255, 255, 255, .78); }
.me-pop__vs { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; display: grid; place-items: center; border-radius: 50%;
  background: var(--purple); color: #fff; font: 600 14px/1 var(--text); box-shadow: 0 0 0 6px var(--wn-page); }

.me-avg { margin: 0; padding: 22px 24px 20px; border-radius: 28px; background: #fff; border: 1px solid var(--wn-line); box-shadow: var(--wn-shadow); }
.me-avg__svg { display: block; width: 100%; height: auto; }
.me-avg__svg .me-dot { fill: #d7c3cc; }
.me-avg__svg .me-ax__s { fill: var(--grey70); }
.me-avg__svg .me-ax__g--solid { stroke: var(--wn-line); }
.me-avg__x circle { fill: none; stroke: var(--purple); stroke-width: 2.5; }
.me-avg__x path { stroke: var(--purple); stroke-width: 2; stroke-dasharray: 4 4; }
.me-avg__x text { font: 600 15px var(--text); fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 6px; stroke-linejoin: round; }
.me-avg__x .me-avg__s { font-weight: 500; font-size: 13px; fill: var(--blue); }
.me-avg figcaption { margin-top: 10px; font: 400 15px/22px var(--text); color: var(--grey70); }
html.wm-on .me-avg__x circle { transform-box: fill-box; transform-origin: center; animation: me-ping 2.4s var(--wm-ease) infinite; }
@keyframes me-ping { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }

.me-chain { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: stretch; }
.me-chain__one { padding: 24px 28px; border-radius: 24px; background: #fff; border: 1px solid var(--wn-line); text-align: center; }
.me-chain__k { font: 600 13px/18px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.me-chain__big { margin: 6px 0; font: 500 40px/48px var(--display); letter-spacing: -.8px; color: var(--ink); }
.me-chain__big s { text-decoration-color: var(--purple); text-decoration-thickness: 3px; }
.me-chain__s { font: 400 15px/22px var(--text); color: var(--grey70); }
.me-chain__arrow { justify-self: center; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--purple); color: #fff; transform: rotate(90deg); }
.me-chain__steps { display: grid; gap: 8px; }
.me-chain__steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--wn-line); }
.me-chain__i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--wn-rose-10); color: var(--blue); }
.me-chain__steps b { font: 500 16px/22px var(--text); color: var(--ink); }
.me-chain__steps em { font: 600 12px/16px var(--text); font-style: normal; letter-spacing: .04em; padding: 5px 10px; border-radius: 99px; background: var(--ink); color: #fff; }

/* ---------- 3. the lab: the model as an interactive board on dark plum ---------- */
.me-lab { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: linear-gradient(180deg, #1e0a1a 0%, #2a0b22 46%, #33102c 100%);
  --wn-h: #fff; --wn-h2: #fff; --wn-k: var(--mint); --wn-tx: rgba(255, 255, 255, .86); --wn-mut: rgba(255, 255, 255, .76); }
.me-lab__grid { position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--me-grid) 1px, transparent 1px), linear-gradient(90deg, var(--me-grid) 1px, transparent 1px),
    linear-gradient(var(--me-grid2) 1px, transparent 1px), linear-gradient(90deg, var(--me-grid2) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); }
.me-lab__glow { position: absolute; z-index: -1; left: -10%; top: 20%; width: 900px; height: 900px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(214, 51, 94, .32), rgba(214, 51, 94, 0)); }
.me-lab__head { margin-bottom: 44px; max-width: 900px; }
.me-lab__ex { display: flex; align-items: center; gap: 10px; margin-top: 24px; font: 400 15px/22px var(--text); color: rgba(255, 255, 255, .8); }
.me-lab__ex svg { color: var(--mint); }
.me-lab__ex a { color: var(--mint); text-decoration: underline; text-underline-offset: 4px; }
.me-lab__ex a:hover { color: #fff; }

.me-board { position: relative; padding: 24px 28px 22px; border-radius: 28px; border: 1px solid rgba(255, 179, 199, .24);
  background: linear-gradient(180deg, rgba(36, 9, 31, .86), rgba(20, 4, 15, .82)); box-shadow: 0 40px 90px rgba(6, 1, 5, .45), inset 0 1px 0 rgba(255, 179, 199, .08); }
.me-board__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px dashed var(--me-dash); }
.me-board__top .me-board__lab { margin: 0; }
.me-board__body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; align-items: start; }
.me-board__chart { position: relative; min-width: 0; }
.me-board__chart > svg { display: block; width: 100%; height: auto; }
.me-board__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--me-dash); }
.me-board__btns { display: flex; gap: 8px; }
.me-hint { font: 400 14px/20px var(--text); color: rgba(255, 255, 255, .74); }
/* controls need the script: hidden without it (the board then shows its first state) */
.me-board:not(.me-js) .me-tabs, .me-board:not(.me-js) .me-chips, .me-board:not(.me-js) .me-board__btns, .me-board:not(.me-js) .me-range,
.me-board:not(.me-js) .me-hint, .me-board:not(.me-js) .me-gg__btns, .me-board:not(.me-js) .me-sz__ctl input, .me-board:not(.me-js) .me-type { display: none; }
.me-board.me-js .me-panel:not(.is-on) { display: none; }
.me-board.me-js .me-panel__h { display: none; }
.me-panel + .me-panel { margin-top: 28px; }
.me-board.me-js .me-panel + .me-panel { margin-top: 0; }
.me-panel__h { margin-bottom: 12px; font: 600 13px/18px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }

.me-tabs, .me-chips { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 179, 199, .2); }
.me-chip, .me-tab, .me-btn { height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .88);
  font: 600 14px/1 var(--text); cursor: pointer; white-space: nowrap; transition: background-color .25s ease, color .25s ease; }
.me-chip:hover, .me-tab:hover { background: rgba(255, 179, 199, .12); color: #fff; }
.me-chip[aria-pressed="true"], .me-tab[aria-selected="true"] { background: var(--mint); color: var(--ink); }
.me-btn { border: 1px solid rgba(255, 179, 199, .35); }
.me-btn:hover { background: rgba(255, 179, 199, .14); color: #fff; }
.me-chip:focus-visible, .me-tab:focus-visible, .me-btn:focus-visible, .me-fl:focus-visible, .me-gg__b:focus-visible, .me-tf__lu:focus-visible,
.me-pc summary:focus-visible, .me-how__list button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* the readout panel */
.me-read { display: flex; flex-direction: column; gap: 12px; padding-left: 26px; border-left: 1px dashed var(--me-dash); min-width: 0; }
.me-read__k { font: 600 12px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.me-read__big { font: 500 56px/1 var(--display); letter-spacing: -1.4px; color: #fff; font-variant-numeric: tabular-nums; }
.me-read__big span { margin-left: 8px; font: 500 16px/1 var(--text); letter-spacing: 0; color: rgba(255, 255, 255, .78); }
.me-read__v { font: 600 17px/25px var(--text); color: #fff; }
.me-read__s { font: 400 13px/18px var(--text); color: rgba(255, 255, 255, .72); }
.me-read__n { font: 400 15px/22px var(--text); color: rgba(255, 255, 255, .82); }
.me-read__list { display: grid; gap: 2px; }
.me-read__list li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255, 179, 199, .1); }
.me-read__list--plain li { grid-template-columns: minmax(0, 1fr) auto; }
.me-read__list i { display: block; height: 4px; border-radius: 2px; }
.me-read__list span { font: 400 15px/20px var(--text); color: rgba(255, 255, 255, .86); }
.me-read__list b { font: 600 16px/20px var(--text); color: #fff; font-variant-numeric: tabular-nums; }
.me-read__pts { display: grid; gap: 8px; margin-top: 4px; padding-top: 14px; border-top: 1px dashed var(--me-dash); }
.me-read__pts div { display: flex; justify-content: space-between; gap: 12px; }
.me-read__pts dt { flex: none; font: 400 14px/20px var(--text); color: rgba(255, 255, 255, .74); }
.me-read__pts dd { font: 600 15px/20px var(--text); color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.me-read__top { counter-reset: top; display: grid; gap: 4px; }
.me-read__top li { counter-increment: top; display: grid; grid-template-columns: 26px minmax(0, 1fr); padding: 6px 0; border-bottom: 1px solid rgba(255, 179, 199, .1);
  font: 500 15px/21px var(--text); color: #fff; }
.me-read__top li::before { content: counter(top); font: 600 13px/21px var(--text); color: var(--mint); }

/* the slider */
.me-range { display: flex; align-items: center; gap: 16px; }
.me-range span { font: 600 14px/1 var(--text); color: var(--mint); white-space: nowrap; }
.me-range input, .me-sz__ctl input { width: 440px; }
.t-model-explorer input[type="range"] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 99px; background: linear-gradient(90deg, #d6335e, #ffb3c7); cursor: pointer; }
.t-model-explorer input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid #d6335e;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35); transition: transform .2s ease; }
.t-model-explorer input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #d6335e; }
.t-model-explorer input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
.t-model-explorer input[type="range"]:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }

/* chart text and axes (all SVG engines) */
.me-ax text, .me-ax__s { font: 500 12px var(--text); fill: rgba(255, 255, 255, .64); }
.me-ax__g { stroke: rgba(255, 179, 199, .12); stroke-width: 1; }
.me-ax__g--solid { stroke: rgba(255, 179, 199, .2); }
.me-ax__t { stroke: rgba(255, 179, 199, .32); stroke-width: 1; }
.me-ax .me-ax__cap, .me-ax__cap { font: 600 12px var(--text); letter-spacing: .06em; fill: var(--mint); }

/* Van Westendorp */
.me-vw__svg { touch-action: none; -webkit-user-select: none; user-select: none; }
.me-vw__band { fill: rgba(255, 179, 199, .09); }
.me-vw__bandl { font: 600 13px var(--text); fill: var(--mint); letter-spacing: .04em; }
.me-vw__edge { font: 600 13px var(--text); fill: #fff; }
.me-vw__l { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.me-vw__lab, .me-vw__pt text { font: 600 13px var(--text); fill: #fff; paint-order: stroke; stroke: rgba(20, 4, 15, .9); stroke-width: 4px; stroke-linejoin: round; }
.me-vw__pt circle { fill: #1e0a1a; stroke: #fff; stroke-width: 2.5; }
.me-vw__pt[data-pt="opp"] circle { fill: var(--wn-gold); stroke: #1e0a1a; }
.me-vw__mkl { stroke: rgba(255, 255, 255, .8); stroke-width: 1.5; stroke-dasharray: 4 4; }
.me-vw__mkd { stroke: #1e0a1a; stroke-width: 2; }
.me-vw__pill { fill: #fff; }
.me-vw__pillt { font: 700 13px var(--text); fill: #1e0a1a; }
.me-vw__hit { fill: transparent; cursor: ew-resize; }
.me-vw__svg.is-drag .me-vw__hit { cursor: grabbing; }

/* Gabor-Granger */
.me-gg__bar { fill: rgba(255, 179, 199, .24); transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(var(--v, 0));
  transition: transform .9s var(--wm-ease), fill .3s ease; }
.me-gg__bar.is-pk { fill: rgba(232, 70, 111, .7); }
.me-gg__bar.is-sel { fill: rgba(255, 179, 199, .55); }
.me-gg__bar.is-pk.is-sel { fill: #e8466f; }
.me-gg__val { font: 600 14px var(--text); fill: #fff; transform: translateY(var(--dy, 0)); transition: transform .9s var(--wm-ease); }
.me-gg__rev { fill: none; stroke: var(--wn-gold); stroke-width: 3; stroke-linejoin: round; }
.me-gg__dot { fill: var(--wn-gold); stroke: #1e0a1a; stroke-width: 2; }
.me-gg__dot.is-pk { fill: #fff; }
.me-gg__peak text { font: 600 13px var(--text); fill: var(--wn-gold); paint-order: stroke; stroke: rgba(20, 4, 15, .9); stroke-width: 4px; }
.me-gg__btns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 4px 3.16% 0 7.37%; }
.me-gg__b { justify-self: center; min-width: 84px; height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 179, 199, .28);
  background: rgba(255, 255, 255, .05); color: #fff; font: 600 14px/1 var(--text); cursor: pointer; transition: background-color .25s ease, color .25s ease; }
.me-gg__b:hover { background: rgba(255, 179, 199, .14); }
.me-gg__b[aria-pressed="true"] { background: var(--mint); border-color: var(--mint); color: var(--ink); }
.me-board.me-pre .me-gg__bar { transform: scaleY(0); transition: none; }
.me-board.me-pre .me-gg__val { transform: none; transition: none; }
html.wm-on .me-board:not(.is-in) .me-gg__bar { transform: scaleY(0); }
html.wm-on .me-board:not(.is-in) .me-gg__val { transform: none; opacity: 0; }

/* MaxDiff */
.me-md__head, .me-md__row { display: grid; grid-template-columns: 28px 300px minmax(0, 1fr) 96px; gap: 12px; align-items: center; }
.me-md__head { margin-bottom: 10px; font: 600 12px/16px var(--text); letter-spacing: .06em; color: var(--mint); }
.me-md__head span:last-child { text-align: right; }
.me-md__hd { display: flex; justify-content: space-between; }
.me-md__hd em { font-style: normal; }
.me-md[data-view="score"] .me-md__hd, .me-md[data-view="picks"] .me-md__hs { display: none; }
.me-md__wrap { position: relative; }
.me-md__rows { position: relative; height: calc(var(--n, 16) * 34px); }
.me-md__row { position: absolute; left: 0; right: 0; top: 0; height: 34px; transform: translateY(calc(var(--y, 0) * 34px)); transition: transform .8s var(--wm-ease); }
.me-md__rank { font: 600 13px/1 var(--text); color: var(--mint); text-align: right; font-variant-numeric: tabular-nums; }
.me-md__l { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 500 15px/20px var(--text); color: #fff; }
.me-md__t, .me-md__d { position: relative; height: 14px; border-radius: 99px; background: rgba(255, 255, 255, .06); }
.me-md__s { position: absolute; inset: 0; border-radius: 99px; background: linear-gradient(90deg, #d6335e, #ffb3c7); transform-origin: 0 50%; transform: scaleX(var(--v));
  transition: transform .8s var(--wm-ease); }
.me-md__ci { position: absolute; top: -5px; bottom: -5px; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%);
  border-left: 2px solid rgba(255, 255, 255, .8); border-right: 2px solid rgba(255, 255, 255, .8); transform: none; transition: left .8s var(--wm-ease), width .8s var(--wm-ease), transform 1s var(--wm-ease); }
.me-md__d::before { content: ""; position: absolute; left: 50%; top: -6px; bottom: -6px; width: 1px; background: rgba(255, 255, 255, .45); }
.me-md__lst, .me-md__mst { position: absolute; top: 0; bottom: 0; width: 50%; transition: transform .8s var(--wm-ease); }
.me-md__lst { right: 50%; border-radius: 99px 0 0 99px; background: var(--wn-gold); transform-origin: 100% 50%; transform: scaleX(var(--v)); }
.me-md__mst { left: 50%; border-radius: 0 99px 99px 0; background: linear-gradient(90deg, #e8466f, #ffb3c7); transform-origin: 0 50%; transform: scaleX(var(--v)); }
.me-md[data-view="score"] .me-md__d, .me-md[data-view="picks"] .me-md__t { display: none; }
.me-md__v { display: flex; align-items: center; justify-content: flex-end; gap: 6px; font: 600 15px/1 var(--text); color: #fff; font-variant-numeric: tabular-nums; }
.me-md__tie { display: none; padding: 3px 7px; border-radius: 99px; background: var(--wn-gold); color: #1e0a1a; font: 700 10px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; }
.me-md[data-view="score"] .me-md__row.is-tie .me-md__tie { display: inline-block; }
.me-md__avg { position: absolute; top: -8px; bottom: -8px; pointer-events: none; border-left: 1.5px dashed rgba(246, 201, 142, .85);
  left: calc(352px + (100% - 460px) * var(--v)); transition: opacity .4s ease; }
.me-md__avg em { position: absolute; left: 6px; bottom: -14px; font: 600 11px/1 var(--text); font-style: normal; color: var(--wn-gold); white-space: nowrap; }
.me-md__cut { position: absolute; left: 0; right: 0; top: calc(var(--y) * 34px); border-top: 1.5px dashed rgba(255, 179, 199, .55); pointer-events: none; }
.me-md__cut em { position: absolute; right: 120px; top: -9px; padding: 3px 8px; border-radius: 99px; background: #2a0b22; border: 1px solid rgba(255, 179, 199, .45);
  font: 600 11px/1 var(--text); font-style: normal; color: var(--mint); }
.me-md[data-view="picks"] .me-md__avg { opacity: 0; }
html.wm-on .me-md__rows[data-reveal="bars"] i { transition-delay: calc(var(--y, 0) * 45ms + 120ms); }
.me-md.is-live .me-md__rows i, .me-md.is-live .me-md__row { transition-delay: 0s !important; }

/* TURF */
.me-board__body--tf { grid-template-columns: minmax(0, 1fr) 300px; }
.me-tf__chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.me-fl { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px; padding: 8px 12px; border-radius: 12px;
  border: 1px solid rgba(255, 179, 199, .22); background: rgba(255, 255, 255, .04); color: #fff; text-align: left; cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease, transform .3s var(--wn-ease-out); }
.me-fl:hover { border-color: rgba(255, 179, 199, .6); transform: translateY(-2px); }
.me-fl__n { display: flex; align-items: center; gap: 6px; font: 500 14px/18px var(--text); }
.me-fl__a { font: 700 13px/1 var(--text); color: var(--wn-gold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.me-fl[aria-pressed="true"] { background: linear-gradient(135deg, rgba(214, 51, 94, .62), rgba(142, 26, 71, .5)); border-color: rgba(255, 179, 199, .75); }
.me-fl[aria-pressed="true"] .me-fl__a { color: var(--mint); font-weight: 600; font-size: 12px; }
.me-fl.is-lock { cursor: default; }
.me-fl.is-lock:hover { transform: none; }
.me-fl.is-top:not([aria-pressed="true"]) { border-color: var(--wn-gold); box-shadow: 0 0 0 1px var(--wn-gold) inset; }
.me-fl__lk { color: var(--mint); }
.me-tf__chart { margin-top: 28px; }
.me-tf__svg { display: block; width: 100%; height: auto; }
.me-tf__best { fill: none; stroke: var(--mint); stroke-width: 3; stroke-linejoin: round; }
.me-tf__bd { fill: var(--mint); }
.me-tf__you { transition: transform .6s var(--wm-ease); }
.me-tf__you circle { fill: var(--wn-gold); stroke: #1e0a1a; stroke-width: 3; }
.me-tf__you text { font: 700 12px var(--text); fill: var(--wn-gold); paint-order: stroke; stroke: rgba(20, 4, 15, .9); stroke-width: 4px; }
.me-ring { position: relative; width: 180px; height: 180px; margin: 4px auto 6px; }
.me-ring svg { width: 180px; height: 180px; display: block; transform: rotate(-90deg); }
.me-ring__bg { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 12; }
.me-ring__fg { fill: none; stroke: #e8466f; stroke-width: 12; stroke-linecap: round;
  stroke-dasharray: calc(var(--v) * var(--c) * 1px) calc(var(--c) * 1px); transition: stroke-dasharray .7s var(--wm-ease); }
html.wm-on .me-board:not(.is-in) .me-ring__fg { stroke-dasharray: 0 calc(var(--c) * 1px); }
.me-ring p { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.me-ring b { font: 500 46px/1 var(--display); letter-spacing: -1px; color: #fff; font-variant-numeric: tabular-nums; }
.me-ring span { margin-top: 6px; font: 400 12px/16px var(--text); color: rgba(255, 255, 255, .78); max-width: 110px; }
.me-tf__lead { display: grid; gap: 6px; }
.me-tf__lu { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border-radius: 12px;
  border: 1px dashed rgba(255, 179, 199, .3); background: transparent; color: rgba(255, 255, 255, .88); font: 400 13px/18px var(--text); text-align: left; cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease; }
.me-tf__lu:hover { background: rgba(255, 179, 199, .1); border-color: var(--mint); }
.me-tf__lu b { font: 600 14px/1 var(--text); color: var(--wn-gold); }
.me-board:not(.me-js) .me-tf__lu { cursor: default; }

/* segmentation */
.me-board__body--sg { grid-template-columns: minmax(0, 1fr) 410px; }
.me-sg__k { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 14px; }
.me-sg__k .me-board__lab { margin: 0; }
.me-sg__stab { font: 600 15px/20px var(--text); color: var(--wn-gold); }
.me-sg__k .me-read__n { flex-basis: 100%; }
.me-sg__svg { display: block; width: 100%; height: auto; }
.me-dot { transform-box: fill-box; transform-origin: center; transition: fill .6s ease, opacity .4s ease, transform .7s var(--wm-ease) calc(var(--i, 0) * 16ms); }
.me-dot.s0 { fill: #ffb3c7; } .me-dot.s1 { fill: #e8466f; } .me-dot.s2 { fill: #f6c98e; } .me-dot.s3 { fill: #ff8a7a; } .me-dot.s4 { fill: #fff; }
html.wm-on .me-board--sg:not(.is-in) .me-dot { transform: scale(0); }
.me-sg__svg[data-focus] .me-dot { opacity: .16; }
.me-sg__svg[data-focus="0"] .me-dot.s0, .me-sg__svg[data-focus="1"] .me-dot.s1, .me-sg__svg[data-focus="2"] .me-dot.s2,
.me-sg__svg[data-focus="3"] .me-dot.s3, .me-sg__svg[data-focus="4"] .me-dot.s4 { opacity: 1; }
.me-sg__lab { display: none; }
.me-sg__lab.is-on { display: inline; }
.me-sg__hull { fill: none; stroke-width: 1.3; stroke-dasharray: 4 6; opacity: .7; }
.me-sg__hull.s0 { stroke: #ffb3c7; } .me-sg__hull.s1 { stroke: #e8466f; } .me-sg__hull.s2 { stroke: #f6c98e; } .me-sg__hull.s3 { stroke: #ff8a7a; } .me-sg__hull.s4 { stroke: #fff; }
.me-sg__name { font: 600 14px var(--text); fill: #fff; paint-order: stroke; stroke: rgba(20, 4, 15, .9); stroke-width: 4px; stroke-linejoin: round; }
html.wm-on .me-sg__lab.is-on { animation: me-fade .6s ease both; }
.me-sg__cards { display: grid; gap: 10px; align-content: start; }
.me-pc { border-radius: 16px; border: 1px solid rgba(255, 179, 199, .2); background: rgba(255, 255, 255, .035); transition: background-color .3s ease, border-color .3s ease; }
.me-pc[open] { background: rgba(255, 179, 199, .07); border-color: rgba(255, 179, 199, .45); }
.me-pc summary { display: grid; grid-template-columns: 12px minmax(0, 1fr) 26px; column-gap: 12px; row-gap: 2px; align-items: center; padding: 13px 16px; cursor: pointer; list-style: none; border-radius: 16px; }
.me-pc summary .me-pc__dot { grid-row: 1 / span 2; }
.me-pc summary .me-pc__name { grid-column: 2; }
.me-pc summary .me-pc__nums { grid-column: 2; grid-row: 2; }
.me-pc summary > i { grid-column: 3; grid-row: 1 / span 2; }
.me-pc summary::-webkit-details-marker { display: none; }
.me-pc__dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none; }
.me-pc__dot.s0 { background: #ffb3c7; } .me-pc__dot.s1 { background: #e8466f; } .me-pc__dot.s2 { background: #f6c98e; } .me-pc__dot.s3 { background: #ff8a7a; }
.me-pc__name { font: 600 16px/20px var(--text); color: #fff; }
.me-pc__nums { font: 400 13px/18px var(--text); color: rgba(255, 255, 255, .78); white-space: nowrap; }
.me-pc__nums b { font-weight: 600; color: #fff; }
.me-pc summary i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 179, 199, .14); color: var(--mint); transition: transform .35s var(--wn-ease-out); }
.me-pc[open] summary i { transform: rotate(45deg); }
.me-pc__body { padding: 0 16px 16px; }
.me-pc[open] .me-pc__body { animation: wn-open .45s var(--wn-ease-out); }
.me-pc__line { font: 400 15px/22px var(--text); color: rgba(255, 255, 255, .88); }
.me-pc__k { margin: 12px 0 6px; font: 600 11px/14px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.me-need li { display: grid; grid-template-columns: minmax(0, 1fr) 90px 38px; gap: 10px; align-items: center; padding: 3px 0; }
.me-need span { font: 400 14px/19px var(--text); color: rgba(255, 255, 255, .88); }
.me-need i { display: block; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #d6335e, #ffb3c7); transform-origin: 0 50%; transform: scaleX(var(--v)); }
.me-need b { font: 600 13px/1 var(--text); color: #fff; text-align: right; }
.me-pc__dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.me-pc__dl dt { font: 600 11px/14px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.me-pc__dl dd { margin-top: 4px; font: 400 14px/20px var(--text); color: rgba(255, 255, 255, .86); }
.me-vid { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 14px; margin: 14px 0 0; }
.me-vid__tile { position: relative; height: 112px; border-radius: 12px; display: grid; place-items: center; color: #fff; overflow: hidden;
  background: linear-gradient(var(--me-grid) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(90deg, var(--me-grid) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(160deg, #6e1a4c, #2a0b22); border: 1px solid rgba(255, 179, 199, .3); }
.me-vid__tile span { position: absolute; right: 6px; bottom: 6px; padding: 2px 6px; border-radius: 6px; background: rgba(20, 4, 15, .8); font: 600 11px/1.3 var(--text); }
.me-vid .me-pc__k { margin-top: 0; }
.me-vid blockquote { margin: 0; font: 500 15px/22px var(--display); letter-spacing: -.1px; color: #fff; }
.me-vid__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.me-vid__chips span { padding: 4px 9px; border-radius: 99px; border: 1px solid rgba(255, 179, 199, .3); font: 600 11px/1 var(--text); color: var(--mint); }
.me-type { display: grid; grid-template-columns: 240px repeat(3, minmax(0, 1fr)) 230px; gap: 22px; align-items: start; margin-top: 24px; padding-top: 22px; border-top: 1px dashed var(--me-dash); }
.me-type .me-board__lab { margin-bottom: 6px; }
.me-type__t { font: 400 14px/20px var(--text); color: rgba(255, 255, 255, .78); }
.me-type__q { border: 0; margin: 0; padding: 0; min-width: 0; }
.me-type__q legend { margin-bottom: 8px; padding: 0; font: 600 14px/19px var(--text); color: #fff; }
.me-type__q label { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding: 8px 12px; border-radius: 10px; border: 1px solid rgba(255, 179, 199, .2);
  font: 400 14px/18px var(--text); color: rgba(255, 255, 255, .88); cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.me-type__q label:hover { border-color: rgba(255, 179, 199, .55); }
.me-type__q label:has(input:checked) { border-color: var(--mint); background: rgba(255, 179, 199, .1); }
.me-type__q input { accent-color: #e8466f; margin: 0; }
.me-type__out { align-self: center; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 179, 199, .2);
  font: 500 15px/22px var(--text); color: rgba(255, 255, 255, .88); }
.me-type__out.is-done { background: rgba(232, 70, 111, .18); border-color: var(--mint); color: #fff; }

/* market sizing */
.me-board__body--sz { grid-template-columns: minmax(0, 1fr) 340px; }
.me-board__body--sz2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; margin-top: 22px; padding-top: 22px; border-top: 1px dashed var(--me-dash); }
.me-sz__row { display: grid; grid-template-columns: 250px minmax(0, 1fr) 64px 220px; gap: 16px; align-items: center; padding: 11px 0; border-bottom: 1px dashed rgba(255, 179, 199, .14); }
.me-sz__row:first-child { padding-top: 0; }
.me-sz__l { cursor: default; }
.me-sz__l b { display: block; font: 600 15px/20px var(--text); color: #fff; }
.me-sz__l em { display: block; margin-top: 2px; font: 400 13px/18px var(--text); font-style: normal; color: rgba(255, 255, 255, .72); }
.me-src { color: var(--wn-gold); }
.me-sz__bar { position: relative; height: 18px; border-radius: 6px; background: rgba(255, 255, 255, .05); overflow: hidden; }
.me-sz__bar i { position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(90deg, #d6335e, #ffb3c7); transform-origin: 0 50%;
  transform: scaleX(max(.014, var(--v))); transition: transform .5s var(--wm-ease); }
.me-sz__bar--x { height: auto; background: none; overflow: visible; font: 500 26px/1 var(--display); color: var(--wn-gold); text-align: center; }
html.wm-on .me-board--sz:not(.is-in) .me-sz__bar i { transform: scaleX(0); }
.me-sz__n { font: 500 20px/1 var(--display); color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.me-sz__ctl { display: flex; align-items: center; gap: 12px; }
.me-sz__ctl input { flex: 1; min-width: 0; width: auto; }
.me-sz__ctl output { width: 46px; font: 600 14px/1 var(--text); color: var(--mint); text-align: right; font-variant-numeric: tabular-nums; }
.me-sz__row--base .me-sz__n { color: rgba(255, 255, 255, .8); }
.me-read--sz .me-read__big { font-size: 64px; }
.me-sz__scale { position: relative; height: 40px; margin-top: 4px; border-bottom: 1px solid rgba(255, 179, 199, .2); }
.me-sz__band, .me-sz__td { position: absolute; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); border-radius: 99px; }
.me-sz__band { top: 10px; height: 10px; background: rgba(255, 179, 199, .38); }
.me-sz__td { top: 26px; height: 5px; background: var(--wn-gold); }
.me-sz__mk { position: absolute; top: 2px; left: calc(var(--v) * 100%); width: 4px; height: 34px; margin-left: -2px; border-radius: 2px; background: #fff;
  box-shadow: 0 0 0 3px rgba(20, 4, 15, .8); transition: left .5s var(--wm-ease); }
.me-sz__keys { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 400 13px/18px var(--text); color: rgba(255, 255, 255, .78); }
.me-sz__keys span { display: inline-flex; align-items: center; gap: 8px; }
.me-sz__keys i { display: inline-block; width: 18px; height: 6px; border-radius: 99px; }
.me-sz__keys .k-band { background: rgba(255, 179, 199, .55); }
.me-sz__keys .k-td { background: var(--wn-gold); }
.me-sz__keys .k-line { height: 3px; background: #fff; }
.me-tor__rows { position: relative; height: calc(var(--n, 5) * 42px); }
.me-tor__row { position: absolute; left: 0; right: 0; top: 0; height: 42px; display: grid; grid-template-columns: 228px minmax(0, 1fr) 92px; gap: 14px; align-items: center;
  transform: translateY(calc(var(--y, 0) * 42px)); transition: transform .7s var(--wm-ease); }
.me-tor__l { font: 500 14px/18px var(--text); color: #fff; }
.me-tor__t { position: relative; height: 16px; border-radius: 4px; background: rgba(255, 255, 255, .05); }
.me-tor__t i { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); width: calc((var(--b) - var(--a)) * 100%); border-radius: 4px;
  background: linear-gradient(90deg, #f6c98e, #e8466f); transform: none; transform-origin: 50% 50%; transition: left .5s var(--wm-ease), width .5s var(--wm-ease), transform 1s var(--wm-ease); }
.me-tor__t u { position: absolute; top: -5px; bottom: -5px; left: calc(var(--v) * 100%); width: 2px; margin-left: -1px; background: #fff; transition: left .5s var(--wm-ease); }
.me-tor__v { font: 600 13px/1 var(--text); color: rgba(255, 255, 255, .86); text-align: right; font-variant-numeric: tabular-nums; }
html.wm-on .me-tor__rows[data-reveal="bars"] i { transition-delay: calc(var(--y, 0) * 90ms + 150ms); }
.me-board.is-live .me-tor__rows i { transition-delay: 0s !important; }
.me-tor .me-read__n { margin-top: 10px; }
.me-fan { display: block; width: 100%; height: auto; }
.me-fan__band { fill: rgba(255, 179, 199, .17); }
.me-fan__mid { fill: none; stroke: #fff; stroke-width: 3; stroke-linejoin: round; }
.me-fan__end { fill: var(--wn-gold); stroke: #1e0a1a; stroke-width: 2; }
.me-sz__fan .me-sz__keys { margin-top: 8px; }

/* reading notes under the board */
.me-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 30px; }
.me-note { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; padding-top: 16px; border-top: 1px solid rgba(255, 179, 199, .24); }
.me-note span { font: 600 13px/22px var(--text); color: var(--mint); }
.me-note p { font: 400 16px/24px var(--text); color: rgba(255, 255, 255, .84); }

/* ---------- 4. in CatalyseAI today ---------- */
.me-plat__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.me-plat__txt { display: flex; flex-direction: column; gap: 14px; }
.me-plat__p { font: 400 19px/29px var(--text); color: var(--body); }
.me-plat .wn-stat b { font-size: 56px; }

/* ---------- 5. how the model works: a pinned story with one drawn plate per step ---------- */
.me-how { position: relative; background: #fbf6f8; }
.me-how::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(180, 35, 90, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(180, 35, 90, .06) 1px, transparent 1px);
  background-size: 32px 32px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); }
.me-how__in { position: relative; display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 80px; align-items: center; padding-top: 112px; padding-bottom: 112px; }
html.wm-on .me-how__in { height: 100%; padding-top: 150px; padding-bottom: 36px; }
.me-how__side { display: flex; flex-direction: column; gap: 16px; }
.me-how__side .wn-h2 { font-size: 42px; line-height: 50px; }
.me-how__list { margin-top: 12px; border-top: 1px solid var(--wn-line); }
.me-how__list button { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; width: 100%; padding: 13px 0; border: 0;
  border-bottom: 1px solid var(--wn-line); background: none; text-align: left; font: 500 17px/23px var(--text); color: var(--grey70); cursor: pointer; transition: color .3s ease, padding-left .4s var(--wn-ease-out); }
.me-how__list button span { font: 600 13px/23px var(--text); color: var(--blue); }
.me-how__list button:hover { color: var(--ink); }
.me-how__list button::after { content: ""; position: absolute; left: -22px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--purple);
  opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .4s var(--wn-ease-out); }
.me-how[data-active="0"] .me-how__list li:nth-child(1) button, .me-how[data-active="1"] .me-how__list li:nth-child(2) button,
.me-how[data-active="2"] .me-how__list li:nth-child(3) button, .me-how[data-active="3"] .me-how__list li:nth-child(4) button,
.me-how[data-active="4"] .me-how__list li:nth-child(5) button, .me-how[data-active="5"] .me-how__list li:nth-child(6) button { color: var(--ink); padding-left: 8px; }
.me-how[data-active="0"] .me-how__list li:nth-child(1) button::after, .me-how[data-active="1"] .me-how__list li:nth-child(2) button::after,
.me-how[data-active="2"] .me-how__list li:nth-child(3) button::after, .me-how[data-active="3"] .me-how__list li:nth-child(4) button::after,
.me-how[data-active="4"] .me-how__list li:nth-child(5) button::after, .me-how[data-active="5"] .me-how__list li:nth-child(6) button::after { opacity: 1; transform: none; }
.me-how .wm-pin__bar { margin-top: 18px; background: rgba(180, 35, 90, .14); }
html:not(.wm-on) .me-how__list, html:not(.wm-on) .me-how .wm-pin__bar { display: none; }
html:not(.wm-on) .me-how__side { align-self: start; position: sticky; top: 150px; }
html:not(.wm-on) .me-how__layers .me-plate + .me-plate { margin-top: 24px; }
.me-plate { position: relative; padding: 26px 32px 30px; border-radius: 28px; background: #fff; border: 1px solid var(--wn-line); box-shadow: var(--wn-shadow); }
.me-plate__h { display: flex; justify-content: space-between; align-items: center; }
.me-plate__h span { font: 600 12px/16px var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.me-plate__h i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--blue); position: relative; }
.me-plate__h i::before, .me-plate__h i::after { content: ""; position: absolute; background: var(--blue); }
.me-plate__h i::before { left: 50%; top: -6px; bottom: -6px; width: 1.5px; margin-left: -.75px; }
.me-plate__h i::after { top: 50%; left: -6px; right: -6px; height: 1.5px; margin-top: -.75px; }
.me-plate h3 { margin: 10px 0 8px; font: 500 30px/36px var(--display); letter-spacing: -.5px; color: var(--ink); }
.me-plate > p { max-width: 680px; font: 400 17px/26px var(--text); color: var(--grey70); }

/* the drawn plates */
.me-pv { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 318px; margin-top: 20px; padding: 20px; overflow: hidden;
  border-radius: 20px; border: 1px dashed rgba(180, 35, 90, .28);
  background: linear-gradient(rgba(180, 35, 90, .06) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(180, 35, 90, .06) 1px, transparent 1px) 0 0 / 22px 22px, #fdf8fa; }
.me-pv--svg { background: linear-gradient(var(--me-grid) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, var(--me-grid) 1px, transparent 1px) 0 0 / 22px 22px, #1e0a1a; border-style: solid; border-color: rgba(255, 179, 199, .2); }
.me-pv--svg .me-sketch { width: auto; max-width: 100%; height: 236px; }
.me-pv--svg .me-pv__cap span { color: rgba(255, 255, 255, .8); }
html.wm-on .me-plate .me-sketch .me-ink { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
html.wm-on .me-plate.is-active .me-sketch .me-ink { animation: me-ink 1.6s var(--wm-ease) forwards; animation-delay: calc(.25s + var(--i, 0) * .16s); }
.me-pv__card { width: min(470px, 100%); padding: 18px 20px; border-radius: 16px; background: #fff; border: 1px solid var(--wn-line); box-shadow: 0 12px 34px rgba(30, 10, 26, .08); }
.me-pv__t { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font: 600 14px/20px var(--text); color: var(--ink); }
.me-pv__row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--wn-line); }
.me-pv__row span { font: 400 13px/19px var(--text); color: var(--grey70); }
.me-pv__row b { font: 600 14px/19px var(--text); color: var(--ink); text-align: right; }
.me-pv__foot { margin-top: 10px; font: 500 13px/19px var(--text); color: var(--blue); }
.me-pv__cap { margin-top: 14px; text-align: center; }
.me-pv__cap b { display: block; font: 600 14px/20px var(--text); color: var(--ink); }
.me-pv__cap span { font: 400 13px/19px var(--text); color: var(--grey70); }
.me-pv__opts { display: flex; gap: 14px; }
.me-pv__opt { position: relative; width: 176px; padding: 18px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--wn-line); }
.me-pv__opt b { display: block; font: 600 15px/20px var(--text); color: var(--ink); }
.me-pv__opt span { display: block; margin-top: 4px; font: 400 13px/19px var(--text); color: var(--grey70); }
.me-pv__opt.is-pick { border: 2px solid var(--purple); box-shadow: 0 12px 30px rgba(214, 51, 94, .18); }
.me-pv__ok { position: absolute; right: 10px; top: 10px; color: var(--purple); }
.me-pv--phone { flex-direction: row; gap: 24px; }
.me-phone { width: 252px; height: 282px; padding: 16px 14px; border-radius: 30px; border: 7px solid var(--ink); background: #fff; box-shadow: 0 18px 40px rgba(30, 10, 26, .2); overflow: hidden; }
.me-phone__k { font: 600 10px/14px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.me-phone__q { margin: 4px 0 10px; font: 600 14px/19px var(--text); color: var(--ink); }
.me-phone__prod { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--wn-rose-10); color: var(--blue); }
.me-phone__prod span { font: 500 12px/16px var(--text); color: var(--ink); }
.me-phone__in { display: flex; align-items: center; gap: 6px; margin-top: 12px; font: 600 16px/1 var(--text); color: var(--ink); }
.me-phone__in i { flex: 1; height: 34px; border-radius: 8px; border: 1.5px solid #cdbcc4; }
.me-phone__hd { display: flex; justify-content: space-between; font: 600 9px/12px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--grey70); }
.me-phone__md p:not(.me-phone__hd) { display: grid; grid-template-columns: 18px minmax(0, 1fr) 18px; gap: 8px; align-items: center; padding: 7px 0; border-top: 1px solid var(--wn-line); }
.me-phone__md p span { font: 400 11.5px/15px var(--text); color: var(--ink); }
.me-phone__md i, .me-phone__opts i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #cdbcc4; }
.me-phone__md i.on { background: var(--purple); border-color: var(--purple); }
.me-phone__md i.on.l { background: var(--ink); border-color: var(--ink); }
.me-phone__opts p { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--wn-line); }
.me-phone__opts i { border-radius: 4px; }
.me-phone__opts i.on { background: var(--purple); border-color: var(--purple); }
.me-phone__opts span { font: 400 12px/16px var(--text); color: var(--ink); }
.me-phone__opts .none { border-top-style: dashed; }
.me-phone__list { counter-reset: pl; }
.me-phone__list li { counter-increment: pl; display: grid; grid-template-columns: 18px minmax(0, 1fr); padding: 7px 0; border-top: 1px solid var(--wn-line); font: 400 12px/16px var(--text); color: var(--ink); }
.me-phone__list li::before { content: counter(pl); font-weight: 600; color: var(--blue); }
.me-pv__dots { display: grid; grid-template-columns: repeat(20, 12px); gap: 7px; }
.me-pv__dots--sm { grid-template-columns: repeat(18, 9px); gap: 6px; margin-top: 16px; }
.me-pv__dots i { width: 12px; height: 12px; border-radius: 50%; background: #e3d6dc; }
.me-pv__dots--sm i { width: 9px; height: 9px; }
.me-pv__dots i.on { background: var(--purple); }
html.wm-on .me-plate .me-pv__dots i.on { background: #e3d6dc; }
html.wm-on .me-plate.is-active .me-pv__dots i.on { animation: me-fill .45s ease forwards; animation-delay: calc(var(--i, 0) * 28ms + .2s); }
@keyframes me-fill { to { background: #d6335e; } }
.me-pv__list { counter-reset: li; }
.me-pv__list li { counter-increment: li; display: grid; grid-template-columns: 22px minmax(0, 1fr); padding: 6px 0; border-top: 1px solid var(--wn-line); font: 400 13.5px/19px var(--text); color: var(--ink); }
.me-pv__list li::before { content: counter(li, decimal-leading-zero); font: 600 11px/19px var(--text); color: var(--blue); }
.me-pv__list li.me-pv__more { color: var(--grey70); }
.me-pv__list li.me-pv__more::before { content: "+"; }
.me-pv__card--sets p { display: flex; align-items: center; gap: 6px; margin: 6px 0; }
.me-pv__card--sets em { width: 70px; font: 600 11px/1 var(--text); font-style: normal; color: var(--grey70); }
.me-pv__card--sets span { display: grid; place-items: center; width: 34px; height: 26px; border-radius: 7px; background: var(--wn-rose-10); font: 600 12px/1 var(--text); color: var(--blue); }
.me-pv__bars li, .me-pv__combos li { display: grid; grid-template-columns: minmax(0, 1fr) 120px 44px; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--wn-line); }
.me-pv__bars span, .me-pv__combos span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 13px/18px var(--text); color: var(--ink); }
.me-pv__combos li { grid-template-columns: minmax(0, 1fr) 80px 50px; padding: 8px 0; }
.me-pv__combos span { display: flex; align-items: flex-start; gap: 6px; white-space: normal; }
.me-pv__combos span svg { margin-top: 2px; }
.me-pv__lk { color: var(--blue); flex: none; }
.me-pv__bars i, .me-pv__combos i { display: block; height: 8px; border-radius: 99px; background: linear-gradient(90deg, #d6335e, #e8466f); transform-origin: 0 50%; transform: scaleX(var(--v)); }
.me-pv__bars b, .me-pv__combos b { font: 600 13px/1 var(--text); color: var(--ink); text-align: right; }
.me-pv__scale li { margin: 4px 0; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--wn-line); font: 500 13px/18px var(--text); color: var(--ink); }
.me-pv__scale li.on { background: var(--purple); border-color: var(--purple); color: #fff; }
.me-pv__scale li.half { border: 1.5px dashed var(--purple); background: var(--wn-rose-10); color: var(--blue70); }
.me-pv__ticks li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid var(--wn-line); font: 400 13px/18px var(--text); color: var(--ink); }
.me-pv__ticks i { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; border: 2px solid #cdbcc4; color: #fff; }
.me-pv__ticks li.on i { background: var(--purple); border-color: var(--purple); }
.me-pv__ticks b { font: 700 12px/1 var(--text); color: var(--blue); }
.me-pv__big { font: 500 22px/1 var(--display); color: var(--blue); }
.me-pv__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.me-pv__chips span { padding: 6px 12px; border-radius: 99px; background: var(--wn-rose-10); font: 600 12.5px/1 var(--text); color: var(--blue70); }
.me-pv__sols { display: flex; gap: 12px; }
.me-pv__sol { position: relative; width: 168px; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--wn-line); }
.me-pv__sol b { display: block; font: 600 15px/20px var(--text); color: var(--ink); }
.me-pv__sol span { display: block; margin-top: 6px; font: 400 12.5px/17px var(--text); color: var(--grey70); }
.me-pv__sol.is-pick { border: 2px solid var(--purple); box-shadow: 0 12px 30px rgba(214, 51, 94, .18); }
.me-pv__card--port .me-pv__t { justify-content: flex-start; font-size: 16px; }
.me-pv__q { margin-top: 10px; font: 400 14px/21px var(--text); color: var(--grey70); }
.me-pv__badge { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 14px; border-radius: 99px; background: var(--ink); font: 600 13px/1 var(--text); color: #fff; }
.me-pv__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.me-pv__grid p { padding: 10px 12px; border-radius: 10px; background: var(--wn-rose-10); }
.me-pv__grid span { display: block; font: 600 11px/14px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.me-pv__grid b { display: block; margin-top: 4px; font: 600 14px/19px var(--text); color: var(--ink); }
.me-pv__layers p { display: grid; place-items: center; width: calc(var(--v) * 100%); min-width: 200px; height: 36px; margin: 6px auto; border-radius: 8px;
  background: linear-gradient(90deg, #b4235a, #e8466f); font: 600 12.5px/1 var(--text); color: #fff; white-space: nowrap; }
.me-pv__layers p:last-child { background: var(--ink); }
.me-pv__cmp p { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; align-items: center; margin: 8px 0; }
.me-pv__cmp span { font: 400 13px/18px var(--text); color: var(--ink); }
.me-pv__cmp i { display: block; height: 14px; border-radius: 4px; background: #e8466f; transform-origin: 0 50%; transform: scaleX(var(--v)); }
.me-pv__cmp p:nth-child(2) i { background: var(--ink); }
.me-pv__cmp p.adj i { background: var(--blue); }

/* ---------- 6. the deliverables as a spec sheet ---------- */
.me-del__in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 88px; }
.me-del__h { display: flex; flex-direction: column; gap: 16px; }
.me-del__h .wn-sub { font: 400 18px/27px var(--text); color: var(--grey70); }
.me-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.me-files li { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--wn-line); font: 600 14px/1 var(--text); color: var(--grey70); }
.me-files svg { color: var(--blue); }
.me-del__list { border-top: 1px solid var(--wn-line); }
.me-del__row { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 24px; align-items: start; padding: 28px 8px 28px 0; border-bottom: 1px solid var(--wn-line);
  transition: background-color .3s ease, padding-left .45s var(--wn-ease-out); }
.me-del__row:hover { background: var(--wn-rose-10); padding-left: 12px; }
.me-del__code { font: 500 34px/1 var(--display); letter-spacing: -.5px; color: transparent; -webkit-text-stroke: 1.2px var(--blue); }
.me-del__row h3 { font: 600 21px/28px var(--text); letter-spacing: -.2px; color: var(--ink); }
.me-del__row p { margin-top: 6px; font: 400 17px/27px var(--text); color: var(--grey70); max-width: 640px; }

/* ---------- 7. the terms as a legend ---------- */
.me-gl { overflow: hidden; }
.me-gl__glow { position: absolute; right: -10%; top: -20%; width: 900px; height: 900px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232, 70, 111, .28), rgba(232, 70, 111, 0)); }
.me-gl .wrap { position: relative; }
.me-gl__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; }
.me-gl__i { padding: 22px 0 24px; border-top: 1px solid rgba(255, 179, 199, .2); }
.me-gl__i dt { display: flex; align-items: center; gap: 14px; font: 500 22px/28px var(--display); letter-spacing: -.2px; color: #fff; }
.me-gl__n { width: 36px; flex: none; font: 600 13px/1 var(--text); color: var(--mint); }
.me-gl__i .me-swatch { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 179, 199, .25); }
.me-gl__i dd { margin: 8px 0 0 50px; font: 400 17px/26px var(--text); color: rgba(255, 255, 255, .8); }

/* ---------- 8. the worked example as a case card ---------- */
.me-ex__in { align-items: start; gap: 80px; }
.me-ex__txt { display: flex; flex-direction: column; gap: 18px; padding-top: 8px; }
.me-case { position: relative; padding: 30px 32px 28px; border-radius: 28px; background: var(--wn-glass-bg); border: 1px solid rgba(255, 179, 199, .3); color: #fff; box-shadow: var(--wn-shadow-dark); }
.me-case::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(var(--me-grid2) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, var(--me-grid2) 1px, transparent 1px) 0 0 / 22px 22px; }
.me-case__k { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font: 600 13px/18px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--mint); }
.me-case__row { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; padding: 14px 0; border-top: 1px dashed var(--me-dash); }
.me-case__row dt { font: 600 12px/22px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.me-case__row dd { font: 400 16px/24px var(--text); color: rgba(255, 255, 255, .9); }
.me-case__note { display: flex; align-items: center; gap: 8px; padding: 14px 0 2px; border-top: 1px dashed var(--me-dash);
  font: 500 15px/22px var(--text); color: rgba(255, 255, 255, .9); }
.me-case__note svg { flex: none; color: var(--mint); }
.me-case__go { position: relative; z-index: 1; margin-top: 12px; color: var(--mint); }
.me-case__go:hover { color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .me-md__row, .me-md__s, .me-md__ci, .me-md__lst, .me-md__mst, .me-tor__row, .me-tor__t i, .me-tor__t u, .me-dot, .me-gg__bar, .me-gg__val,
  .me-tf__you, .me-ring__fg, .me-sz__bar i, .me-sz__mk { transition: none !important; }
  .me-avg__x circle { animation: none !important; }
}

/* =====================================================================================================================
   RESPONSIVE (21 Oct 2026): small laptops, tablets and phones. Breakpoints, wm-lite and the header hooks are the ones at
   the top of wine-base.css; at 1200 and wider nothing below applies. Desktop first:
     1200  narrower fixed columns (boards, MaxDiff, sizing rows, the typing tool)
     1024  every two-column block stacks (hero, problem, boards, how-it-works, deliverables, platform) and the readouts go
           under their chart; "how the model works" is a plain stacked list here (no pinning below 1024: html.wm-lite)
      768  phone layouts: one column, label-over-bar rows for MaxDiff / tornado / sizing, chips two per row, 16px reading
           text, nothing under 12px, 44px taps
      480  the boards take a little of the side gutter so the charts get more width; crowded axis labels thinned out
   Chart text: t-model-explorer.js keeps --me-s (viewBox width / drawn width) on each chart; below 1024 the SVG labels are
   sized as calc(<px> * --me-s), so they read at that many CSS px whatever the chart's width (without the script --me-s
   is 1, the desktop size). The readout beside each chart carries the same numbers as the labels hidden on phones.
   ===================================================================================================================== */

/* ---------- 1200: small laptop ---------- */
@media (max-width: 1199.98px) {
  .me-h1 { font-size: clamp(34px, 2.95vw + 22.5px, 58px); line-height: 1.1; letter-spacing: -.02em; }
  .me-hero .wn-hero__grid { gap: 48px; }
  .me-prob__in, .me-ex__in { gap: 56px; }
  .me-board__body { grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; }
  .me-board__body--tf { grid-template-columns: minmax(0, 1fr) 270px; }
  .me-board__body--sg { grid-template-columns: minmax(0, 1fr) 340px; }
  .me-board__body--sz { grid-template-columns: minmax(0, 1fr) 290px; }
  .me-read { padding-left: 22px; }
  .me-read__big { font-size: 48px; }
  .me-read--sz .me-read__big { font-size: 52px; }
  /* MaxDiff: a narrower label column; the average line follows it (28 + 12 + 240 + 12 = 292; 28 + 240 + 96 + 3 * 12 = 400) */
  .me-md__head, .me-md__row { grid-template-columns: 28px 240px minmax(0, 1fr) 96px; }
  .me-md__avg { left: calc(292px + (100% - 400px) * var(--v)); }
  .me-sz__row { grid-template-columns: 200px minmax(0, 1fr) 56px 170px; gap: 14px; }
  .me-tor__row { grid-template-columns: 190px minmax(0, 1fr) 92px; }
  /* typing tool: the three questions side by side, the intro and the answer on rows of their own */
  .me-type { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .me-type__h, .me-type__out { grid-column: 1 / -1; }
  .me-type__out { align-self: start; }
  .me-how__in { grid-template-columns: 320px minmax(0, 1fr); gap: 56px; }
  .me-how__side .wn-h2 { font-size: 36px; line-height: 44px; }
  /* drawn option cards share the narrower plate instead of running past its edge */
  .me-pv__opts, .me-pv__sols { max-width: 100%; }
  .me-pv__opt, .me-pv__sol { flex: 1 1 0; width: auto; min-width: 0; }
  .me-del__in { gap: 56px; }
  .me-gl__list { column-gap: 40px; }
  .me-plat__in { gap: 48px; }
}

/* ---------- 1024: tablet landscape and below ---------- */
@media (max-width: 1023.98px) {
  /* hero: the model sheet under the text */
  .me-hero .wn-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .me-hero__vis { max-width: 560px; }
  .me-terms { margin-top: 72px; padding: 22px 0 26px; }
  .me-terms__row span { font-size: 30px; }
  .me-prob__in, .me-ex__in { gap: 44px; }
  .me-prob__txt { padding-top: 0; }
  .me-prob__vis { max-width: 640px; }
  /* boards: the readout goes under the chart */
  .me-board__body, .me-board__body--tf, .me-board__body--sg, .me-board__body--sz, .me-board__body--sz2 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .me-read { padding: 20px 0 0; border-left: 0; border-top: 1px dashed var(--me-dash); }
  .me-read--tf { display: grid; grid-template-columns: 180px minmax(0, 1fr); column-gap: 28px; row-gap: 10px; align-content: start; }
  .me-read--tf .me-ring { grid-row: 1 / span 5; margin: 0; }
  .me-sg__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .me-range { flex: 1 1 320px; min-width: 0; }
  .me-range input { width: auto; flex: 1; min-width: 0; }
  .me-notes { grid-template-columns: minmax(0, 1fr); gap: 14px; max-width: 760px; }
  .me-plat__in { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  /* how the model works: the steps as a plain stacked list */
  .me-how__in { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: var(--wn-sec-y); padding-bottom: var(--wn-sec-y); }
  html:not(.wm-on) .me-how__side { position: static; }
  .me-how__side { max-width: 720px; }
  /* deliverables: the heading above the list */
  .me-del__in { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .me-gl__list { column-gap: 32px; }
  /* chart text at a readable size at any chart width (--me-s from the script) */
  .me-board svg text, .me-board .me-ax__cap, .me-avg__svg text { font-size: max(12px, calc(12px * var(--me-s, 1))); }
  .me-board .me-vw__lab, .me-board .me-vw__pt text, .me-board .me-vw__edge, .me-board .me-vw__bandl, .me-board .me-vw__pillt,
  .me-board .me-gg__peak text, .me-board .me-tf__you text, .me-board .me-sg__name,
  .me-avg__x .me-avg__s { font-size: max(13px, calc(13px * var(--me-s, 1))); }
  .me-avg__x text { font-size: max(15px, calc(13px * var(--me-s, 1))); }
  .me-board .me-gg__val { font-size: max(14px, calc(13px * var(--me-s, 1))); }
  /* the decorative sketches: a little larger than at desktop scale, never past their card */
  .me-sketch .me-sk__t { font-size: max(13px, calc(11px * var(--me-s, 1))); }
  .me-sketch .me-sk__t--n { font-size: max(13px, calc(9.5px * var(--me-s, 1))); }
  /* small print up to 12px */
  .me-md__tie, .me-md__avg em, .me-md__cut em, .me-vid__tile span, .me-vid__chips span, .me-pc__k, .me-pc__dl dt, .me-phone__k, .me-phone__hd,
  .me-pv__list li::before, .me-pv__card--sets em, .me-pv__grid span { font-size: 12px; }
  .me-phone__hd { line-height: 15px; }
  .me-phone__md p span, .me-phone__opts span, .me-phone__list li { font-size: 13px; line-height: 17px; }
  /* 44px taps and a 44px tall slider (the 6px track drawn inside it) */
  .me-chip, .me-tab, .me-btn, .me-gg__b, .me-tf__lu { min-height: 44px; }
  .me-try__b { width: 44px; height: 44px; }
  .me-lab__ex a { padding: 11px 0; margin: -11px 0; }
  .t-model-explorer input[type="range"] { height: 44px; background: transparent; }
  .t-model-explorer input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #d6335e, #ffb3c7); }
  .t-model-explorer input[type="range"]::-webkit-slider-thumb { width: 26px; height: 26px; margin-top: -10px; }
  .t-model-explorer input[type="range"]::-moz-range-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #d6335e, #ffb3c7); }
}

/* ---------- 768: tablet portrait, phones ---------- */
@media (max-width: 767.98px) {
  /* hero */
  .me-hero__txt .wn-kicker { margin-top: 0; }
  .me-spec { grid-template-columns: minmax(0, 1fr); margin-top: 22px; }
  .me-spec li, .me-spec li + li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 0;
    border-left: 0; border-bottom: 1px dashed var(--me-dash); }
  .me-spec b { font-size: 16px; line-height: 23px; }
  .me-hero__vis { max-width: none; }
  .me-sheet { padding: 18px 18px 16px; border-radius: 20px; }
  .me-sheet::before { left: -7px; top: -7px; }
  .me-sheet::after { right: -7px; bottom: -7px; }
  .me-sheet__mk::before { right: -7px; top: -7px; }
  .me-sheet__mk::after { left: -7px; bottom: -7px; }
  .me-sheet__bar { flex-wrap: wrap; row-gap: 4px; }
  .me-sheet__fx { margin-top: 14px; font-size: 21px; line-height: 29px; }
  .me-terms { margin-top: 56px; padding: 18px 0 22px; }
  .me-terms__row { gap: 20px; padding-right: 20px; }
  .me-terms__row span { font-size: 24px; }
  /* problem cards */
  .me-q4 { padding: 24px 20px; border-radius: 22px; }
  .me-q4 ol li { gap: 12px; }
  .me-q4__f { font-size: 16px; line-height: 24px; }
  .me-q4__prod span { font-size: 15px; line-height: 22px; }
  /* sentences in cards and readouts at 16px, hints at 15px */
  .me-lab__ex, .me-read__n, .me-pop__s, .me-try__out, .me-case__note { font-size: 16px; line-height: 24px; }
  .me-hint { font-size: 15px; line-height: 22px; }
  .me-rate, .me-try { padding: 20px 18px; border-radius: 20px; }
  .me-rate figcaption { flex-direction: column; gap: 2px; }
  .me-rate li { grid-template-columns: minmax(0, 1fr) 76px 30px; gap: 10px; }
  .me-try__q { font-size: 20px; line-height: 28px; }
  .me-try__hd, .me-try__row { grid-template-columns: 52px minmax(0, 1fr) 52px; }
  .me-pop { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .me-pop__c { padding: 24px 22px 20px; border-radius: 22px; }
  .me-pop__vs { position: relative; z-index: 1; left: auto; top: auto; justify-self: center; margin: -14px 0; }
  .me-pop__r b { font-size: 46px; }
  .me-avg { padding: 18px 16px 16px; border-radius: 22px; }
  .me-avg__svg { overflow: visible; }
  .me-chain__one { padding: 22px 20px; }
  .me-chain__big { font-size: 32px; line-height: 40px; }
  .me-chain__steps li { grid-template-columns: 40px minmax(0, 1fr); row-gap: 6px; }
  .me-chain__steps em { grid-column: 2; justify-self: start; }
  /* boards */
  .me-lab__head { margin-bottom: 32px; }
  .me-board { padding: 18px 16px 16px; border-radius: 22px; }
  .me-board__top { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 16px; padding-bottom: 16px; }
  .me-tabs, .me-chips { display: flex; border-radius: 24px; }
  .me-chip, .me-tab { flex: 1 1 auto; height: auto; padding: 6px 14px; line-height: 18px; white-space: normal; }
  .me-board__btns { flex-wrap: wrap; }
  .me-btn { flex: 1 1 auto; height: auto; }
  .me-board__foot { flex-direction: column; align-items: stretch; gap: 10px; }
  .me-range { flex-wrap: wrap; flex: none; gap: 2px 12px; }
  .me-range input { flex: 1 1 100%; }
  .me-board__chart > svg, .me-tf__svg, .me-sg__svg, .me-fan { overflow: visible; }
  .me-board__chart > svg { margin-top: 8px; }
  .me-read { gap: 10px; }
  .me-read__big { font-size: 42px; }
  .me-read--sz .me-read__big { font-size: 46px; }
  .me-read__s { font-size: 14px; line-height: 20px; }
  .me-read--tf { grid-template-columns: minmax(0, 1fr); }
  .me-read--tf .me-ring { grid-row: auto; margin: 4px auto 6px; }
  .me-notes { margin-top: 24px; }
  .me-lab__ex { align-items: flex-start; }
  .me-lab__ex svg { flex: none; margin-top: 2px; }
  /* Van Westendorp at phone size: fewer labels (the readout carries them), a larger price pill, bolder lines */
  .me-vw__lab, .me-vw__pt text, .me-vw__bandl { display: none; }
  .me-vw__l { stroke-width: calc(2.2px * var(--me-s, 1)); }
  .me-vw__pill, .me-vw__pillt { transform: scale(min(var(--me-s, 1), 2)); }
  .me-board .me-vw__pillt { font-size: 13px; }
  /* Gabor-Granger buttons: one under each bar */
  .me-gg__b { min-width: 0; width: 100%; padding: 0 2px; font-size: 13px; }
  .me-gg__btns { column-gap: 4px; }
  .me-gg__rev { stroke-width: calc(2.2px * var(--me-s, 1)); }
  /* MaxDiff: rank | label | value, the bar under the label; rows 52px instead of 34px */
  .me-md__head, .me-md__row { grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 6px; }
  .me-md__head { margin-bottom: 12px; }
  .me-md__head > span:nth-child(1) { grid-column: 1; grid-row: 1; }
  .me-md__head > span:nth-child(2) { grid-column: 2; grid-row: 1; }
  .me-md__head > span:last-child { grid-column: 3; grid-row: 1; }
  .me-md__hs, .me-md__hd { grid-column: 2 / -1; grid-row: 2; }
  .me-md__hd em { max-width: 48%; }
  .me-md__hd em + em { text-align: right; }
  .me-md__rows { height: calc(var(--n, 16) * 52px); }
  .me-md__row { height: 52px; align-content: center; transform: translateY(calc(var(--y, 0) * 52px)); }
  .me-md__rank { grid-column: 1; grid-row: 1; text-align: left; }
  .me-md__l { grid-column: 2; grid-row: 1; }
  .me-md__v { grid-column: 3; grid-row: 1; }
  .me-md__t, .me-md__d { grid-column: 2 / -1; grid-row: 2; height: 12px; }
  .me-md__avg { left: calc(34px + (100% - 34px) * var(--v)); }
  .me-md__cut { top: calc(var(--y) * 52px); }
  .me-md__cut em { display: none; }
  /* TURF */
  .me-tf__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .me-fl { min-height: 52px; }
  .me-tf__chart { margin-top: 22px; }
  .me-tf__lu { font-size: 14px; }
  /* the hero sketch of TURF has one label, near the right edge: anchor it at that edge */
  .me-hero .me-sketch .me-sk__t:only-of-type { text-anchor: end; transform: translateX(176px); }
  /* segmentation problem chart: the two labels of the marker apart, the side captions under the axis */
  .me-avg__x text:not(.me-avg__s) { transform: translateY(calc(-6px * var(--me-s, 1))); }
  .me-avg__svg > text:nth-of-type(1) { transform: translate(-40px, calc(15px * var(--me-s, 1))); }
  .me-avg__svg > text:nth-of-type(2) { transform: translate(40px, calc(15px * var(--me-s, 1))); }
  /* segmentation */
  .me-sg__cards { grid-template-columns: minmax(0, 1fr); }
  .me-pc summary { min-height: 56px; }
  .me-pc__nums { white-space: normal; }
  .me-need li { grid-template-columns: minmax(0, 1fr) 72px 36px; }
  .me-pc__dl { grid-template-columns: minmax(0, 1fr); }
  .me-type { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .me-type__q label { min-height: 44px; font-size: 15px; }
  .me-type__q input { width: 20px; height: 20px; flex: none; }
  /* market sizing: the label over its bar and number, the slider full width under them */
  .me-sz__row { grid-template-columns: minmax(0, 1fr) 64px; gap: 8px 12px; padding: 14px 0; }
  .me-sz__l { grid-column: 1 / -1; }
  .me-sz__bar { grid-column: 1; }
  .me-sz__n { grid-column: 2; }
  .me-sz__ctl { grid-column: 1 / -1; }
  .me-sz__ctl output { width: 52px; }
  .me-tor__rows { height: calc(var(--n, 5) * 60px); }
  .me-tor__row { height: 60px; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-content: center;
    transform: translateY(calc(var(--y, 0) * 60px)); }
  .me-tor__l { grid-column: 1 / -1; }
  .me-tor__v { font-size: 14px; }
  .me-board__body--sz2 { gap: 28px; margin-top: 18px; padding-top: 18px; }
  /* how the model works: the plates */
  .me-how__side .wn-h2 { font-size: clamp(28px, 1.98vw + 24.3px, 36px); line-height: 1.18; }
  .me-plate { padding: 22px 18px; border-radius: 22px; }
  html:not(.wm-on) .me-how__layers .me-plate + .me-plate { margin-top: 18px; }
  .me-plate h3 { font-size: 24px; line-height: 30px; }
  .me-plate > p { font-size: 16px; line-height: 25px; }
  .me-pv { height: auto; min-height: 0; padding: 18px 14px; }
  .me-pv--phone { flex-direction: column; gap: 16px; }
  .me-pv--svg .me-sketch { width: 100%; height: auto; }
  .me-pv__opts, .me-pv__sols { width: 100%; }
  .me-pv__opt, .me-pv__sol { flex: 1 1 0; width: auto; min-width: 0; padding: 14px 12px; }
  .me-pv__dots, .me-pv__dots--sm { width: 100%; max-width: 300px; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 4px; }
  .me-pv__dots--sm { grid-template-columns: repeat(18, minmax(0, 1fr)); }
  .me-pv__dots i, .me-pv__dots--sm i { width: 100%; height: auto; aspect-ratio: 1; }
  .me-pv__bars li { grid-template-columns: minmax(0, 1fr) 64px 40px; }
  .me-pv__combos li { grid-template-columns: minmax(0, 1fr) 56px 44px; }
  .me-pv__cmp p { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .me-pv__layers p { min-width: 0; max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; }
  .me-pv__row span { font-size: 14px; }
  /* deliverables, legend, worked example */
  .me-del__row { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; padding: 24px 0; }
  .me-del__row:hover { padding-left: 0; }
  .me-del__code { font-size: 28px; }
  .me-del__row h3 { font-size: 19px; line-height: 26px; }
  .me-del__row p { font-size: 16px; line-height: 25px; }
  .me-gl__list { grid-template-columns: minmax(0, 1fr); }
  .me-gl__i dt { font-size: 20px; line-height: 26px; }
  .me-gl__i dd { font-size: 16px; line-height: 25px; }
  .me-case { padding: 24px 20px 22px; border-radius: 22px; }
  .me-case__row { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; }
  .me-plat__p { font-size: 18px; line-height: 28px; }
  .me-plat .wn-stat b { font-size: clamp(34px, 8vw + 6px, 48px); }
  .me-lab__glow, .me-gl__glow { width: 560px; height: 560px; }
}

/* ---------- 480: phone ---------- */
@media (max-width: 479.98px) {
  .me-spec li, .me-spec li + li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  /* the boards take a little of the side gutter: more width for the charts */
  .me-board { margin-left: -14px; margin-right: -14px; padding: 16px 14px 14px; }
  .me-gg__btns { padding-left: 4%; padding-right: 1%; }
  .me-gg__b { font-size: 12px; letter-spacing: -.01em; }
  /* axes that would collide: every other price; 0, 50 and 100% inside the plot */
  .me-vw__svg .me-ax text[text-anchor="middle"]:nth-of-type(even), .me-vw__svg .me-ax text:nth-of-type(2), .me-vw__svg .me-ax text:nth-of-type(4),
  .me-gg__svg .me-ax text:nth-of-type(2), .me-gg__svg .me-ax text:nth-of-type(4) { display: none; }
  .me-vw__svg .me-ax text[text-anchor="end"]:not(.me-ax__cap), .me-gg__svg .me-ax text[text-anchor="end"]:not(.me-ax__cap) { text-anchor: start; transform: translate(-40px, -7px); }
  .me-gg__svg .me-ax__cap--r { display: none; }
  .me-tf__svg .me-ax__s[text-anchor="middle"]:nth-of-type(even), .me-tf__svg .me-ax__s:nth-of-type(2), .me-tf__svg .me-ax__s:nth-of-type(4) { display: none; }
  .me-tf__svg .me-ax__s[text-anchor="end"] { text-anchor: start; transform: translate(-36px, -10px); }
  .me-fan .me-ax__s:nth-of-type(7) { display: none; }
  .me-board .me-sg__name { font-size: calc(12px * var(--me-s, 1)); }
  .me-sg__svg > text:nth-of-type(1) { transform: translateY(-8px); }
  .me-sg__svg > text:nth-of-type(2) { transform: translateY(-18px); }
  .me-tf__svg { margin-bottom: 14px; }
  .me-tf__svg .me-ax__cap { transform: translateY(28px); }
  .me-del__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .me-gl__i dd { margin-left: 0; }
  .me-case__row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .me-pv__opts, .me-pv__sols { flex-direction: column; }
  .me-pv--phone .me-phone { width: min(252px, 100%); }
}

/* ---------- touch screens of any width (also 1024+ tablets): 44px taps, no hover lifts that stick ---------- */
@media (hover: none) and (pointer: coarse) {
  .me-chip, .me-tab, .me-btn, .me-gg__b, .me-tf__lu, .me-type__q label { min-height: 44px; }
  .me-lab__ex a { padding: 11px 0; margin: -11px 0; }
  /* the 30px answer circles of the MaxDiff card (desktop layout on large tablets): a 46px tap area, nothing moves */
  .me-try__b { position: relative; }
  .me-try__b::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
  .me-fl:hover { transform: none; }
  .me-del__row:hover { background: transparent; padding-left: 0; }
  .t-model-explorer input[type="range"] { height: 44px; background: transparent; }
  .t-model-explorer input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #d6335e, #ffb3c7); }
  .t-model-explorer input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -11px; }
  .t-model-explorer input[type="range"]::-moz-range-track { height: 6px; border-radius: 99px; background: linear-gradient(90deg, #d6335e, #ffb3c7); }
  .t-model-explorer input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; }
}