/* =====================================================================================================
   t-story.css (hand-written, 20 Oct 2026): the "story" template of the wine-and-rose landing pages (the long read).
   Pages: usage-and-attitude, journey-mapping, competitor-research, opportunity-assessment, audience-sampling.
   Loads after wine-chrome.css and wine-base.css. Every rule is scoped with the st- prefix (body.t-story).

   Parts: the cover hero with its drawn Fig. 1 | the chapter rail | chapter heads with outlined numerals |
   ch.1 drop cap + pull quote | ch.2 scrollytelling (steps + sticky Fig. 2 whose panels change per step) |
   ch.3 the typographic index that lights up | ch.4 the worked example on wine (Fig. 3 on a white card) |
   ch.5 what you get | the "Built on CatalyseAI" box | ch.6 FAQ.
   Motion is armed only under html.wm-on (wine-motion.js); without it every panel and line is visible and still.
   ===================================================================================================== */

/* lists of this template carry their own numbers */
body.t-story .wn-main ol, body.t-story .wn-main ul { list-style: none; margin: 0; padding: 0; }

/* ---------- the cover (hero) ----------
   First screen at 1440x900: crumbs, then the headline (left) beside the standfirst and calls to action (right), then
   the cover card: Fig. 1 whole, with the contents ("In this story") as a strip along its foot. */
.st-hero { --wn-k: var(--st-acc, var(--mint)); padding: 102px 0 0; }
.st-hero__glow2 { position: absolute; z-index: -1; left: -14%; top: 38%; width: 760px; height: 760px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--st-glow2, rgba(214,51,94,.28)), rgba(214,51,94,0)); }
.st-hero__top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.st-hero__meta { display: flex; align-items: center; gap: 16px; }
.st-hero__meta > span { font: 500 14px/18px var(--text); color: rgba(255,255,255,.74); }
.st-hero__row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: end; margin-top: 22px; }
.st-hero__h { margin: 0; font: 500 64px/68px var(--display); letter-spacing: -1.7px; color: #fff; text-wrap: balance; }
.st-stand { font: 400 18px/28px var(--text); color: rgba(255,255,255,.86); }
.st-hero__stand { padding-bottom: 4px; }
.st-hero__stand .wn-hero__ctas { margin-top: 22px; }

/* the cover card: Fig. 1 + the contents strip */
.st-coverbox { position: relative; margin-top: 34px; border-radius: 30px 30px 0 0; overflow: hidden;
  background: linear-gradient(180deg, rgba(20,4,15,.64), rgba(20,4,15,.3)); border: 1px solid rgba(255,179,199,.2); border-bottom: 0;
  box-shadow: 0 -24px 70px rgba(10,2,8,.28); }
.st-cover { position: relative; margin: 0; padding: 18px 34px 0; }
.st-cover__cap { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font: 500 15px/20px var(--text); color: rgba(255,255,255,.88); }
.st-cover__key { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; font: 400 13px/18px var(--text); color: rgba(255,255,255,.74); }
.st-fig__no { display: inline-flex; align-items: center; flex: none; height: 24px; padding: 0 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--st-acc, #ffb3c7) 18%, transparent);
  color: var(--st-acc, var(--mint)); font: 600 12px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; }

/* contents strip */
.st-toc { display: flex; align-items: stretch; border-top: 1px solid rgba(255,179,199,.16); background: rgba(20,4,15,.34); }
.st-toc__h { flex: none; display: flex; align-items: center; width: 132px; padding: 0 18px 0 34px;
  font: 600 12px/16px var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--st-acc, var(--mint)); }
.st-toc ol { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.st-toc li { border-left: 1px solid rgba(255,179,199,.14); }
.st-toc a { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 13px 16px 15px; color: rgba(255,255,255,.88);
  transition: color .2s ease, background-color .25s ease; }
.st-toc a span { font: 500 14px/18px var(--display); color: var(--st-acc, var(--mint)); transition: transform .35s var(--wn-ease-out); }
.st-toc a b { font: 500 13px/18px var(--text); }
.st-toc a:hover, .st-toc a:focus-visible { color: #fff; background: rgba(255,179,199,.08); }
.st-toc a:hover span, .st-toc a:focus-visible span { transform: translateX(4px); }
.st-toc a:hover b { text-decoration: underline; text-underline-offset: 3px; }

/* each story its own hero tint (and the same for its wine chapter 4): usage = morning amber, journey = rose,
   competitors = plum, opportunity = crimson, sampling = ink */
body.st-page .st-hero, body.st-page .st-ch4 { background: var(--st-bg, var(--wn-hero-bg)); }
body.st-page .wn-hero__glow { background: radial-gradient(closest-side, var(--st-glow, rgba(232,70,111,.42)), rgba(232,70,111,.1) 55%, rgba(232,70,111,0)); }
body.st-usage-attitude {
  --st-acc: #f6c98e; --st-glow: rgba(240,150,110,.36); --st-glow2: rgba(246,201,142,.16);
  --st-bg:
    radial-gradient(30% 40% at 94% 4%, rgba(246,201,142,.36) 0%, rgba(246,201,142,0) 80%),
    radial-gradient(42% 62% at 100% 46%, rgba(176,40,80,.92) 0%, rgba(150,34,72,.6) 40%, rgba(110,20,60,0) 82%),
    radial-gradient(40% 46% at 0% 30%, rgba(70,14,42,1) 0%, rgba(70,14,42,.85) 45%, rgba(70,14,42,0) 85%),
    radial-gradient(30% 36% at 4% 100%, rgba(246,201,142,.14) 0%, rgba(246,201,142,0) 80%),
    linear-gradient(180deg, #1a0612 0%, #28091a 34%, #3a1022 74%, #4a1830 100%); }
body.st-journey-mapping {
  --st-acc: #ffb3c7; --st-glow: rgba(255,120,160,.46); --st-glow2: rgba(255,179,199,.22);
  --st-bg:
    radial-gradient(36% 46% at 96% 8%, rgba(255,179,199,.32) 0%, rgba(255,179,199,0) 80%),
    radial-gradient(46% 66% at 100% 50%, rgba(214,51,94,.95) 0%, rgba(190,40,90,.62) 40%, rgba(150,28,82,0) 82%),
    radial-gradient(40% 46% at 0% 26%, rgba(96,20,66,1) 0%, rgba(96,20,66,.8) 45%, rgba(96,20,66,0) 85%),
    linear-gradient(180deg, #22081b 0%, #360c2a 40%, #561540 78%, #6a1a4c 100%); }
body.st-competitor-research {
  --st-acc: #e9c3f0; --st-glow: rgba(150,60,150,.44); --st-glow2: rgba(120,44,120,.3);
  --st-bg:
    radial-gradient(36% 48% at 96% 6%, rgba(170,80,170,.38) 0%, rgba(170,80,170,0) 80%),
    radial-gradient(46% 64% at 100% 52%, rgba(112,30,100,.95) 0%, rgba(90,24,84,.6) 40%, rgba(70,18,66,0) 82%),
    radial-gradient(40% 46% at 0% 28%, rgba(51,16,44,1) 0%, rgba(51,16,44,.85) 45%, rgba(51,16,44,0) 85%),
    linear-gradient(180deg, #150512 0%, #230a22 38%, #33102c 76%, #401438 100%); }
body.st-opportunity-assessment {
  --st-acc: #ff8aa8; --st-glow: rgba(232,70,111,.5); --st-glow2: rgba(232,70,111,.36);
  --st-bg:
    radial-gradient(46% 62% at 0% 100%, rgba(232,70,111,.5) 0%, rgba(232,70,111,0) 80%),
    radial-gradient(40% 56% at 100% 28%, rgba(196,36,86,.92) 0%, rgba(160,28,80,.5) 45%, rgba(110,20,70,0) 82%),
    radial-gradient(30% 40% at 58% 0%, rgba(20,4,15,1) 0%, rgba(20,4,15,0) 85%),
    linear-gradient(180deg, #1a0616 0%, #2c0a20 42%, #4a1238 100%); }
body.st-audience-sampling {
  --st-acc: #ffb3c7; --st-glow: rgba(142,26,71,.5); --st-glow2: rgba(142,26,71,.24);
  --st-bg:
    radial-gradient(40% 52% at 100% 18%, rgba(142,26,71,.72) 0%, rgba(142,26,71,0) 80%),
    radial-gradient(36% 44% at 0% 62%, rgba(51,16,44,.9) 0%, rgba(51,16,44,0) 85%),
    repeating-linear-gradient(135deg, rgba(255,179,199,0) 0 22px, rgba(255,179,199,.035) 22px 23px, rgba(255,179,199,0) 23px 40px),
    linear-gradient(180deg, #0e030b 0%, #1a0816 48%, #26091f 100%); }
.st-key { display: inline-block; width: 28px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #d6335e, #ffb3c7); }
.st-key--flow { height: 8px; }
.st-key--dash { background: repeating-linear-gradient(90deg, #ffb3c7 0 4px, transparent 4px 9px); }
.st-svg--cover { margin-bottom: 18px; }

/* heat strip (usage & attitude) */
.st-hs { padding-bottom: 26px; }
.st-hs__grid, .st-hs__x { display: grid; grid-template-columns: 46px repeat(18, minmax(0, 1fr)); gap: 5px; }
.st-hs__d { font: 600 12px/22px var(--text); color: rgba(255,255,255,.74); }
.st-hs__grid i { display: block; height: 22px; border-radius: 6px; background: rgba(255,140,170, calc(.07 + var(--a) * .93)); }
.st-hs__x { margin-top: 8px; }
.st-hs__x span { font: 600 12px/16px var(--text); color: rgba(255,255,255,.66); }
.st-hs__ramp { display: inline-block; width: 84px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, rgba(255,140,170,.12), rgba(255,140,170,1)); }
html.wm-on .st-hs__grid i { animation: st-cell .8s var(--wn-ease-out) both; animation-delay: calc(var(--c) * 38ms + var(--r) * 26ms + 250ms); }
@keyframes st-cell { from { opacity: 0; transform: scale(.25); } }

/* ---------- drawn SVGs (dark by default; .st-svg--light on white cards) ---------- */
.st-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--text); }
.st-svg text { font: 500 13px var(--text); fill: rgba(255,255,255,.8); }
.st-svg .st-ax { stroke: rgba(255,179,199,.3); stroke-width: 1; }
.st-svg .st-ax--mid { stroke-dasharray: 3 6; }
.st-svg .st-area { stroke: none; }
.st-svg .st-line { fill: none; stroke: #ffb3c7; stroke-width: 3.2; stroke-linecap: round; }
.st-svg .st-dot { fill: #fff; stroke: #e8466f; stroke-width: 2.5; }
.st-svg .st-dot--pain { fill: #e8466f; stroke: #fff; }
.st-svg .st-ring { fill: none; stroke: #ffb3c7; stroke-width: 2; opacity: .75; transform-box: fill-box; transform-origin: center; }
.st-svg .st-val { font: 600 15px var(--text); fill: #fff; }
.st-svg .st-val--pain { font-size: 18px; fill: #ffb3c7; }
.st-svg .st-lab { font: 600 14px var(--text); fill: rgba(255,255,255,.88); }
.st-svg .st-ann { font: 600 13px var(--text); fill: #ffb3c7; }
.st-svg .st-colh { font: 600 12px var(--text); letter-spacing: .08em; text-transform: uppercase; fill: rgba(255,255,255,.66); }
.st-svg .st-brand { font: 600 15px var(--text); fill: #fff; }
.st-svg .st-brand--hi { fill: #ffb3c7; }
.st-svg .st-share { font-weight: 500; fill: #ffb3c7; }
.st-svg .st-sub { font: 400 13px var(--text); fill: rgba(255,255,255,.74); }
.st-svg .st-node { fill: #ffb3c7; }
.st-svg .st-node--hi { fill: #e8466f; stroke: #fff; stroke-width: 2.5; }
.st-svg .st-node--o { fill: #fff; stroke: #e8466f; stroke-width: 3; }
.st-svg .st-flow { fill: none; stroke: rgba(255,179,199,.3); stroke-linecap: round; }
.st-svg .st-flow--hi { stroke: #e8466f; filter: drop-shadow(0 0 6px rgba(232,70,111,.6)); }
.st-svg .st-road { fill: none; stroke-linecap: round; }
.st-svg .st-road--dim { stroke: rgba(255,179,199,.42); stroke-width: 2.5; stroke-dasharray: 3 9; }
.st-svg .st-road--hi { stroke: #ffb3c7; stroke-width: 5; filter: drop-shadow(0 0 8px rgba(232,70,111,.75)); }
.st-svg .st-tick { stroke: rgba(255,179,199,.18); stroke-dasharray: 2 6; }
.st-svg .st-tickl { font: 600 12px var(--text); letter-spacing: .06em; fill: rgba(255,255,255,.62); }
.st-svg .st-pipe { fill: none; stroke: rgba(255,179,199,.16); stroke-width: 12; stroke-linecap: round; }
.st-svg .st-dash { fill: none; stroke: #ffb3c7; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 16; }
.st-svg .st-nodebox { fill: rgba(255,255,255,.05); stroke: rgba(255,179,199,.36); stroke-width: 1.2; }
.st-svg .st-nodebox--hi { fill: rgba(214,51,94,.36); stroke: #ffb3c7; }
.st-svg .st-gap { fill: rgba(232,70,111,.16); stroke: rgba(255,179,199,.42); stroke-dasharray: 4 5; }
.st-svg .st-gap__t { font: 700 11px var(--text); letter-spacing: .08em; text-transform: uppercase; fill: #ffb3c7; }
.st-svg .st-axl { font: 500 12px var(--text); fill: rgba(255,255,255,.72); }
.st-svg .st-pt { fill: rgba(255,255,255,.7); }
.st-svg .st-pt--gap { fill: #e8466f; stroke: #fff; stroke-width: 2; }
.st-svg .st-pt--you { fill: #f6c98e; stroke: #fff; stroke-width: 2; }
.st-svg .st-pt--rival { fill: #ffb3c7; stroke: #fff; stroke-width: 2; }
.st-svg .st-pt--ok { fill: #ffb3c7; }
.st-svg .st-ptl { font: 500 13px var(--text); fill: rgba(255,255,255,.86); }
.st-svg .st-ptl--gap { font-weight: 700; fill: #fff; }
.st-svg .st-pair { stroke: #f6c98e; stroke-width: 2; stroke-dasharray: 3 4; }
/* light (on white cards) */
.st-svg--light text { fill: var(--grey70); }
.st-svg--light .st-ax { stroke: #d9cbd1; }
.st-svg--light .st-line { stroke: var(--purple); }
.st-svg--light .st-dot { fill: #fff; stroke: var(--purple); }
.st-svg--light .st-dot--pain { fill: var(--purple); stroke: #fff; }
.st-svg--light .st-ring { stroke: var(--purple); }
.st-svg--light .st-val { fill: var(--ink); }
.st-svg--light .st-val--pain { fill: var(--blue); }
.st-svg--light .st-ann { fill: var(--blue); }
.st-svg--light .st-gap { fill: rgba(232,70,111,.08); stroke: rgba(180,35,90,.42); }
.st-svg--light .st-gap__t { fill: var(--blue); }
.st-svg--light .st-axl { fill: var(--grey60); }
.st-svg--light .st-pt { fill: #c9b6bf; }
.st-svg--light .st-pt--gap { fill: var(--purple); stroke: #fff; }
.st-svg--light .st-pt--you { fill: #e9a55a; stroke: #fff; }
.st-svg--light .st-pt--rival { fill: var(--blue70); stroke: #fff; }
.st-svg--light .st-pt--ok { fill: #f19ab3; }
.st-svg--light .st-ptl { fill: var(--ink); }
.st-svg--light .st-ptl--gap { fill: var(--blue); }
.st-svg--light .st-pair { stroke: #e9a55a; }
.st-svg .st-bub { fill: rgba(180,35,90,.1); stroke: rgba(180,35,90,.45); stroke-width: 1.5; }
.st-svg .st-bub--hi { fill: rgba(214,51,94,.88); stroke: #fff; stroke-width: 3; filter: drop-shadow(0 6px 14px rgba(214,51,94,.45)); }
.st-svg .st-sub2 { font: 400 12px var(--text); fill: var(--grey60); }
.st-svg .st-arrow { fill: none; stroke: var(--purple); stroke-width: 2; stroke-linecap: round; }
.st-svg .st-ann--dark { fill: var(--blue); font-weight: 700; }

/* cover motion: lines draw once on load, the pain ring pulses a few times, the panel flow runs a few rounds */
html.wm-on .st-cover .st-draw { stroke-dasharray: 1 1; animation: st-draw 2.4s var(--wn-ease) .35s both; }
html.wm-on .st-cover .st-flow:not(.st-flow--hi) { animation-duration: 1.8s; }
html.wm-on .st-cover .st-road--dim, html.wm-on .st-cover .st-area { animation: st-fade 1.6s ease .5s both; }
html.wm-on .st-cover .st-dot, html.wm-on .st-cover .st-val, html.wm-on .st-cover .st-node--hi { animation: st-fade .6s ease both; animation-delay: calc(var(--d, 4) * 260ms + 700ms); }
html.wm-on .st-cover .st-ring { animation: st-pulse 2.2s ease-out 2s 4; }
html.wm-on .st-cover .st-dash { animation: st-flowdash 1.6s linear .6s 3; }
@keyframes st-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes st-fade { from { opacity: 0; } }
@keyframes st-pulse { 0% { transform: scale(1); opacity: .8; } 70% { transform: scale(1.9); opacity: 0; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes st-flowdash { to { stroke-dashoffset: -34; } }

/* ---------- the story: chapter rail ---------- */
.st-story { position: relative; }
.st-rail { position: absolute; z-index: 20; left: 22px; top: 0; bottom: 0; width: 46px; pointer-events: none; }
.st-rail ol { position: sticky; top: calc(50vh - 150px); display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0 10px;
  border-radius: 999px; background: rgba(255,255,255,.95); box-shadow: 0 10px 30px rgba(30,10,26,.18); pointer-events: auto; }
/* t-story.js arms the rail: hidden while the cover fills the screen (it would peek in under Fig. 1), shown in the story */
.st-rail.is-armed:not(.is-shown) ol { opacity: 0; visibility: hidden; transform: translate3d(-14px, 0, 0); }
html.wm-on .st-rail ol { transition: opacity .35s ease, transform .5s var(--wn-ease-out), visibility 0s linear 0s; }
html.wm-on .st-rail.is-armed:not(.is-shown) ol { transition: opacity .35s ease, transform .5s var(--wn-ease-out), visibility 0s linear .35s; }
.st-rail a { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 600 12px/1 var(--text);
  color: var(--grey60); transition: background-color .25s ease, color .25s ease; }
.st-rail a:hover { color: var(--blue); }
.st-rail a span { position: absolute; left: 46px; top: 50%; transform: translate(-6px, -50%); white-space: nowrap; padding: 6px 12px; border-radius: 999px;
  background: var(--ink); color: #fff; font: 600 13px/16px var(--text); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .25s var(--wn-ease-out); }
.st-rail a:hover span, .st-rail a:focus-visible span { opacity: 1; transform: translate(0, -50%); }
.st-rail a.is-past { color: var(--blue); }
.st-rail a.is-on { background: var(--purple); color: #fff; }
.st-rail__bar { width: 3px; height: 44px; margin-top: 4px; border-radius: 3px; background: var(--wn-line); overflow: hidden; }
.st-rail__bar i { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, var(--purple), var(--cyan)); transform-origin: 50% 0;
  transform: scaleY(var(--st-p, 0)); }

/* ---------- chapter heads ---------- */
.st-sec { scroll-margin-top: 120px; }
.st-chead { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 32px; align-items: end; margin-bottom: 64px; }
.st-chead__n { display: block; height: 150px; }
.st-chead__n > span { display: block; font: 500 176px/150px var(--display); letter-spacing: -7px; color: transparent;
  -webkit-text-stroke: 2px var(--purple); }
.st-chead__k { margin-bottom: 14px; font: 600 14px/18px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.st-chead .wn-h2 { max-width: 920px; }
.st-chead--dark .st-chead__n > span { -webkit-text-stroke-color: var(--mint); }
.st-chead--dark .st-chead__k { color: var(--mint); }

/* ---------- ch.1 the problem: drop cap + pull quote ---------- */
.st-open { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 72px; align-items: start; padding-left: 268px; }
.st-drop { font: 400 21px/35px var(--text); color: var(--body); }
.st-drop::first-letter { float: left; margin: 6px 14px 0 -3px; font: 500 112px/88px var(--display); color: var(--purple); }
.st-pull { position: relative; padding: 2px 0 6px 28px; border-left: 3px solid var(--purple); }
.st-pull__mark { display: block; margin-bottom: 10px; color: var(--purple); }
.st-pull p { font: 500 26px/35px var(--display); letter-spacing: -.4px; color: var(--ink); }
.st-member { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 40px; align-items: center; margin: 64px 0 0 268px; padding: 30px 36px;
  border-radius: var(--wn-r); background: #fff; border: 1px solid var(--wn-line); }
.st-member img { width: 170px; height: auto; }
.st-member .wn-ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 12px; }
.st-member .wn-ticks div { font-size: 16px; line-height: 24px; }

/* ---------- ch.2 scrollytelling ---------- */
/* static (no JS, reduced motion, ?static=1): each step sits next to its own panel */
.st-scrolly { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; row-gap: 32px; align-items: start; }
.st-steps, .st-scrolly__side, .st-fig, .st-fig__layers { display: contents; }
.st-fig__cap, .st-fig__dots { display: none; }
.st-step { grid-column: 1; grid-row: var(--r); position: relative; }
.st-layer { grid-column: 2; grid-row: var(--r); min-width: 0; padding: 24px 28px; border-radius: var(--wn-r); color: #fff; background: var(--wn-glass-bg);
  border: 1px solid rgba(255,179,199,.22); }
.st-step__n { display: block; margin-bottom: 14px; font: 500 56px/1 var(--display); letter-spacing: -1.5px; color: var(--purple); }
.st-step__t { margin-bottom: 12px; font: 500 30px/36px var(--display); letter-spacing: -.5px; color: var(--ink); }
.st-step p { max-width: 470px; font: 400 18px/29px var(--text); color: var(--grey70); }
/* armed: the steps scroll, the figure sticks and changes */
html.wm-on .st-steps { display: block; grid-column: 1; grid-row: 1; }
html.wm-on .st-scrolly__side { display: block; grid-column: 2; grid-row: 1; align-self: stretch; }
/* the figure is as tall as its tallest panel (the panels share one grid cell), so it does not jump between steps */
html.wm-on .st-fig { position: sticky; top: 156px; display: flex; flex-direction: column; max-height: calc(100vh - 180px);
  margin: 0; padding: 22px 28px 18px; border-radius: 28px; overflow: hidden; color: #fff; background: var(--wn-glass-bg);
  border: 1px solid rgba(255,179,199,.24); box-shadow: 0 34px 80px rgba(30,10,26,.28), 0 0 0 1px rgba(232,70,111,.1), inset 0 0 60px rgba(232,70,111,.08); }
html.wm-on .st-fig__cap { display: flex; align-items: center; gap: 12px; flex: none; margin-bottom: 16px; padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,179,199,.16); font: 500 14px/18px var(--text); color: rgba(255,255,255,.82); }
html.wm-on .st-fig__layers { display: grid; flex: 1; min-height: 0; }
html.wm-on .st-layer { grid-area: 1 / 1; padding: 0; border: 0; border-radius: 0; background: none; opacity: 0; transform: translate3d(0, 26px, 0);
  pointer-events: none; transition: opacity .5s var(--wn-ease), transform .75s var(--wn-ease-out); }
html.wm-on .st-layer.is-past { transform: translate3d(0, -26px, 0); }
html.wm-on .st-layer.is-active { opacity: 1; transform: none; pointer-events: auto; transition-delay: .08s; }
html.wm-on .st-fig__dots { display: flex; align-items: center; gap: 8px; flex: none; margin-top: 20px; }
.st-fig__dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,179,199,.3); transition: background-color .3s ease, transform .3s ease; }
.st-fig__dots i.is-on { background: var(--mint); transform: scale(1.35); }
.st-fig__dots b { flex: 1; height: 2px; margin-left: 10px; border-radius: 2px; background: rgba(255,179,199,.16); overflow: hidden; }
.st-fig__dots b u { display: block; height: 100%; background: linear-gradient(90deg, #d6335e, #ffb3c7); transform-origin: 0 50%;
  transform: scaleX(var(--st-k, 0)); transition: transform .6s var(--wn-ease-out); }
html.wm-on .st-step { min-height: 74vh; padding: 9vh 0 0 30px; }
html.wm-on .st-step:last-child { min-height: 64vh; }
html.wm-on .st-step::before { content: ""; position: absolute; left: 0; top: 9vh; height: 230px; width: 3px; border-radius: 3px; background: var(--wn-line);
  transition: background-color .4s ease; }
html.wm-on .st-step.is-active::before { background: linear-gradient(180deg, var(--purple), var(--cyan)); }
html.wm-on .st-step .st-step__n { color: transparent; -webkit-text-stroke: 1.5px var(--purple); transition: color .45s ease; }
html.wm-on .st-step.is-active .st-step__n { color: var(--purple); }
.st-layer__t { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; font: 500 22px/28px var(--display); letter-spacing: -.2px; color: #fff; }
.st-layer__t span { flex: none; font: 600 12px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
/* panel entrances: lists stagger in, bars grow, lines draw when the panel becomes active */
html.wm-on .st-layer [style*="--d"] { transition: opacity .5s var(--wn-ease-out), transform .7s var(--wn-ease-out); transition-delay: calc(var(--d) * 70ms + 140ms); }
html.wm-on .st-layer:not(.is-active) [style*="--d"] { opacity: 0; transform: translate3d(0, 12px, 0); }
html.wm-on .st-layer .st-b__t i { transition: transform 1.1s var(--wn-ease-out); transition-delay: calc(var(--d, 0) * 80ms + 220ms); }
html.wm-on .st-layer:not(.is-active) .st-b__t i { transform: scaleX(0); }
html.wm-on .st-layer .st-sc__t i { transition: transform 1s var(--wn-ease-out); transition-delay: calc(var(--d, 0) * 80ms + 200ms); }
html.wm-on .st-layer:not(.is-active) .st-sc__t i { transform: scaleY(0); }
html.wm-on .st-layer .st-draw { stroke-dasharray: 1 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--wn-ease) .25s; }
html.wm-on .st-layer.is-active .st-draw { stroke-dashoffset: 0; }
html.wm-on .st-layer.is-active .st-vid__wave i { animation: st-wave 1.1s ease-in-out calc(var(--i) * -90ms) 4 alternate; }
@keyframes st-wave { 50% { transform: scaleY(.35); } }

/* ---------- Fig. 2 parts (dark card) ---------- */
.st-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255,179,199,.3);
  background: rgba(255,255,255,.06); font: 500 13px/18px var(--text); color: #fff; }
.st-chip svg { flex: none; }
.st-chip--ok svg { color: #ffb3c7; }
.st-chip--off { color: rgba(255,255,255,.74); }
.st-chip--ai { border-color: rgba(246,201,142,.45); color: #fce2bf; }
.st-chip--ai svg { color: var(--wn-gold); }
.st-chips--sm .st-chip { min-height: 26px; padding: 3px 10px; font-size: 12px; }
.st-row { margin-top: 16px; }
.st-row__l { margin-bottom: 8px; font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.st-note { margin-top: 12px; font: 400 13px/19px var(--text); color: rgba(255,255,255,.74); }
.st-sig { font-style: normal; font-size: 11px; color: var(--wn-gold); }

/* bars */
.st-b__h { margin-bottom: 10px; font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.st-b { display: flex; flex-direction: column; gap: 10px; }
.st-b + .st-chips { margin-top: 18px; }
.st-b li { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 62px; gap: 14px; align-items: center; }
.st-b__l { font: 500 14px/18px var(--text); color: #fff; }
.st-b__t { position: relative; display: block; height: 10px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.st-b__t i { position: absolute; inset: 0; border-radius: inherit; background: rgba(255,179,199,.55); transform-origin: 0 50%; transform: scaleX(var(--v, .5)); }
.st-b li.is-hi .st-b__t i, .st-b li.is-full .st-b__t i { background: linear-gradient(90deg, #d6335e, #ffb3c7); }
.st-b__v { font: 600 14px/18px var(--text); text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.st-full { margin-left: 6px; padding: 3px 7px; border-radius: 999px; background: var(--mint); color: var(--ink); font: 700 10px/1 var(--text); font-style: normal;
  letter-spacing: .06em; text-transform: uppercase; vertical-align: 1px; }

/* screener */
.st-scr__q { margin-bottom: 12px; font: 500 18px/25px var(--display); color: #fff; }
.st-scr ul { display: flex; flex-direction: column; gap: 8px; }
.st-scr li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,179,199,.18); font: 500 15px/20px var(--text); color: #fff; }
.st-scr em { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--text); font-style: normal; color: var(--mint); white-space: nowrap; }
.st-scr li.is-out { color: rgba(255,255,255,.74); border-style: dashed; }
.st-scr li.is-out em { color: #ffc2d1; }

/* questionnaire */
.st-q { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.st-q li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,179,199,.14); }
.st-q__i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(255,179,199,.14); color: var(--mint); }
.st-q__t { font: 500 14px/19px var(--text); color: #fff; }
.st-q em { font: 600 11px/14px var(--text); font-style: normal; letter-spacing: .04em; color: var(--mint); white-space: nowrap; }

/* video answer */
.st-vid { display: flex; flex-direction: column; gap: 12px; }
.st-vid__top { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 18px; align-items: start; }
.st-vid__tile { position: relative; height: 176px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,179,199,.26);
  background: radial-gradient(90% 60% at 50% 25%, #7a1d55, #2a0b22 72%), #2a0b22; }
.st-vid__sil { position: absolute; left: 50%; bottom: 0; width: 86px; transform: translateX(-50%); fill: rgba(255,179,199,.3); }
.st-vid__play { position: absolute; right: 9px; top: 9px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(20,4,15,.5); color: #fff; }
.st-vid__play svg { width: 26px; height: 26px; }
.st-vid__wave { position: absolute; left: 10px; right: 10px; bottom: 30px; height: 24px; display: flex; align-items: flex-end; gap: 3px; }
.st-vid__wave i { flex: 1; height: calc(var(--h) * 1%); border-radius: 2px; background: rgba(255,255,255,.72); transform-origin: 50% 100%; }
.st-vid__tile em { position: absolute; left: 10px; bottom: 8px; padding: 4px 7px; border-radius: 6px; background: rgba(20,4,15,.66); color: #fff;
  font: 600 11px/1 var(--text); font-style: normal; }
.st-vid__q { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; font: 600 14px/20px var(--text); color: var(--mint); }
.st-vid__q svg { flex: none; margin-top: 3px; }
.st-say { padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.07); font: 400 14px/21px var(--text); color: rgba(255,255,255,.92); }
.st-say + .st-say { margin-top: 8px; }
.st-say small { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; font: 600 11px/14px var(--text); letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.66); }
.st-say--ai { background: rgba(214,51,94,.24); border: 1px solid rgba(255,179,199,.3); }
.st-say--ai small { color: var(--mint); }

/* themes with a sentiment bar */
.st-th { margin-top: 16px; }
.st-th__h, .st-th li { display: grid; grid-template-columns: minmax(0, 1fr) 110px 44px 92px; gap: 12px; align-items: center; }
.st-th__h { margin-bottom: 8px; font: 600 11px/14px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.st-th__h span:nth-child(2) { grid-column: span 2; }
.st-th ul { display: flex; flex-direction: column; gap: 8px; }
.st-th__l { font: 500 14px/18px var(--text); color: #fff; }
.st-th li > b { font: 600 14px/18px var(--text); text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.st-th__s { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.1); }
.st-th__s u { display: block; width: var(--w); height: 100%; text-decoration: none; }
.st-th .p { background: var(--wn-gold); }
.st-th .n { background: rgba(255,255,255,.36); }
.st-th .g { background: #e8466f; }
.st-th__k { display: flex; justify-content: flex-end; gap: 14px; margin-top: 10px; font: 500 12px/16px var(--text); color: rgba(255,255,255,.74); }
.st-th__k span { display: inline-flex; align-items: center; gap: 6px; }
.st-th__k b { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }

/* heat table */
.st-heat { width: calc(100% + 10px); margin: -5px; border-collapse: separate; border-spacing: 5px; table-layout: fixed; }
.st-heat th { padding: 0 2px 6px; font: 600 12px/15px var(--text); color: rgba(255,255,255,.78); text-align: center; vertical-align: bottom; }
.st-heat thead th:first-child { width: 112px; }          /* the label column; the value columns share the rest equally */
.st-heat tbody th { padding: 0 10px 0 0; font: 600 14px/18px var(--text); color: #fff; text-align: left; white-space: nowrap; vertical-align: middle; }
.st-heat td { height: 52px; border-radius: 10px; background: rgba(232,70,111, var(--a)); color: #fff; font: 700 19px/1 var(--text); text-align: center;
  font-variant-numeric: tabular-nums; }
.st-heat tr.is-you th { color: var(--mint); }
.st-heat tr.is-you td { box-shadow: inset 0 0 0 1.5px rgba(255,179,199,.75); }
.st-heat + .st-note { margin-top: 16px; }

/* groups compared */
.st-cmp { width: 100%; border-collapse: collapse; }
.st-cmp thead th { padding: 0 10px 10px; font: 600 12px/16px var(--text); color: rgba(255,255,255,.78); text-align: left; vertical-align: bottom; }
.st-cmp tbody th { width: 36%; padding: 12px 10px 12px 0; border-top: 1px solid rgba(255,179,199,.16); font: 500 14px/19px var(--text); color: #fff; text-align: left; }
.st-cmp td { padding: 12px 10px; border-top: 1px solid rgba(255,179,199,.16); }
.st-cmp td b { display: block; margin-bottom: 6px; font: 600 17px/20px var(--text); color: #fff; font-variant-numeric: tabular-nums; }
.st-cmp .st-b__t { height: 6px; }

/* stages, decision cards, notes, voices, ranking, pain points, funnel, links, review, spec, scale */
.st-stg { display: flex; flex-direction: column; gap: 18px; margin-bottom: 18px; }
.st-stg__row > p { margin-bottom: 8px; font: 600 12px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.st-stg__row ol { display: flex; gap: 10px; }
.st-stg__row li { position: relative; flex: 1; min-width: 0; }
.st-stg__row li span { display: flex; align-items: center; justify-content: center; min-height: 58px; padding: 8px 8px; border-radius: 12px; text-align: center;
  background: rgba(255,255,255,.05); border: 1px dashed rgba(255,179,199,.4); font: 600 13px/17px var(--text); color: rgba(255,255,255,.86); }
.st-stg__row.is-theirs li span { background: rgba(214,51,94,.34); border: 1px solid rgba(255,179,199,.55); color: #fff; }
.st-stg__row li + li::before { content: ""; position: absolute; left: -10px; top: 50%; width: 10px; height: 2px; background: rgba(255,179,199,.5); }
.st-dec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.st-dec li { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,179,199,.18);
  color: var(--mint); }
.st-dec li b { font: 600 15px/20px var(--text); color: #fff; }
.st-dec li small { font: 400 13px/18px var(--text); color: rgba(255,255,255,.76); }
.st-dec li.is-on { background: rgba(214,51,94,.34); border-color: var(--mint); }
.st-nt { display: grid; gap: 12px; }
.st-nt li { padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,179,199,.16); border-left: 3px solid var(--mint); }
.st-nt__h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.st-nt__h b { font: 600 16px/21px var(--text); color: #fff; }
.st-nt__h em { padding: 5px 9px; border-radius: 999px; background: rgba(246,201,142,.18); color: var(--wn-gold); font: 700 10px/1 var(--text); font-style: normal;
  letter-spacing: .08em; text-transform: uppercase; }
.st-nt__t { margin-top: 4px; font: 400 15px/21px var(--text); color: rgba(255,255,255,.9); }
.st-nt__s { display: flex; align-items: center; gap: 6px; margin-top: 8px; font: 500 12px/16px var(--text); color: rgba(255,255,255,.66); }
.st-voices { display: flex; flex-direction: column; gap: 12px; }
.st-voices .st-say { max-width: 88%; padding: 14px 16px; font-size: 17px; line-height: 25px; }
.st-voices .st-say + .st-say { margin-top: 0; }
.st-voices .st-say:nth-child(even) { align-self: flex-end; }
.st-say--ex { background: rgba(246,201,142,.12); border: 1px solid rgba(246,201,142,.32); }
.st-say--ex small { color: var(--wn-gold); }
.st-rk__h, .st-rk li { display: grid; grid-template-columns: 32px minmax(0, 1fr) repeat(3, 72px); gap: 10px; align-items: center; }
.st-rk__h { padding: 0 12px 8px; font: 600 11px/14px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--mint); }
.st-rk__h span:first-child { grid-column: 1 / 3; }
.st-rk ol { display: flex; flex-direction: column; gap: 8px; }
.st-rk li { padding: 12px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,179,199,.16); }
.st-rk li.is-top, .st-pn li.is-top { background: rgba(214,51,94,.3); border-color: rgba(255,179,199,.55); }
.st-rk__n, .st-pn__n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,179,199,.16);
  font: 600 14px/1 var(--display); color: var(--mint); }
.st-rk li.is-top .st-rk__n, .st-pn li.is-top .st-pn__n { background: var(--mint); color: var(--ink); }
.st-rk__t b { display: block; font: 600 15px/20px var(--text); color: #fff; }
.st-rk__t small { font: 400 13px/18px var(--text); color: rgba(255,255,255,.74); }
.st-dots { display: flex; gap: 5px; }
.st-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,179,199,.2); }
.st-dots i.on { background: var(--mint); }
.st-pn { display: flex; flex-direction: column; gap: 10px; }
.st-pn li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 96px; gap: 14px; align-items: start; padding: 14px; border-radius: 14px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,179,199,.16); }
.st-pn b { display: block; font: 600 15px/20px var(--text); color: #fff; }
.st-pn small { display: block; margin-top: 2px; font: 400 12px/16px var(--text); color: rgba(255,255,255,.74); }
.st-pn q { display: block; margin-top: 6px; font: italic 400 14px/20px var(--text); color: rgba(255,255,255,.9); }
.st-pn__v { text-align: right; }
.st-pn__v b { font: 500 28px/1 var(--display); color: var(--mint); }
.st-fn { display: flex; flex-direction: column; gap: 12px; }
.st-fn li { display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr) 52px; gap: 14px; align-items: center; font: 500 14px/18px var(--text); color: #fff; }
.st-fn li > b { font: 600 15px/1 var(--text); text-align: right; }
.st-fn .st-b__t { height: 24px; border-radius: 8px; }
.st-fn li.is-hi .st-b__t i { background: linear-gradient(90deg, #d6335e, #ffb3c7); }
.st-eq { margin-top: 20px; padding: 14px 16px; border-radius: 14px; background: rgba(246,201,142,.1); border: 1px dashed rgba(246,201,142,.45);
  font: 500 14px/21px var(--text); color: #fce2bf; }
.st-eq span { margin: 0 4px; font-weight: 700; color: var(--wn-gold); }
.st-ln { display: flex; flex-direction: column; gap: 10px; }
.st-ln li { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 14px; border-radius: 12px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,179,199,.16); }
.st-ln__k { font: 600 14px/18px var(--text); color: #fff; }
.st-ln code { font: 500 13px/18px ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--mint); overflow-wrap: anywhere; }
.st-ln em { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 999px; background: rgba(255,179,199,.16); color: #fff;
  font: 600 12px/1 var(--text); font-style: normal; }
.st-ln + .st-note { margin-top: 16px; }
.st-rev { width: 100%; margin-bottom: 14px; border-collapse: collapse; }
.st-rev th { padding: 0 8px 8px; font: 600 11px/14px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--mint); text-align: left; }
.st-rev td { padding: 11px 8px; border-top: 1px solid rgba(255,179,199,.16); font: 400 14px/19px var(--text); color: #fff; }
.st-rev code { font: 600 12px/1 ui-monospace, Consolas, monospace; color: rgba(255,255,255,.82); white-space: nowrap; }
.st-rev em { display: inline-block; padding: 5px 9px; border-radius: 999px; font: 700 11px/1 var(--text); font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
.st-rev .is-rm em { background: rgba(232,70,111,.34); color: #ffe0e8; }
.st-rev .is-keep em { background: rgba(255,179,199,.16); color: #fff; }
.st-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.st-spec div { padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,179,199,.16); }
.st-spec div:first-child { grid-column: 1 / -1; }
.st-spec dt { margin-bottom: 4px; font: 600 11px/14px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--mint); }
.st-spec dd { margin: 0; font: 500 15px/20px var(--text); color: #fff; }
.st-sc { margin-bottom: 20px; }
.st-sc ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: end; }
.st-sc li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.st-sc li > b { font: 600 14px/1 var(--text); color: #fff; }
.st-sc__t { position: relative; display: block; width: 100%; height: 80px; border-radius: 10px; background: rgba(255,255,255,.06); overflow: hidden; }
.st-sc__t i { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; border-radius: 8px; background: rgba(255,179,199,.45); transform-origin: 50% 100%;
  transform: scaleY(var(--v)); }
.st-sc li.is-hi .st-sc__t i { background: linear-gradient(0deg, #d6335e, #ff8aa8); }
.st-sc small { font: 500 12px/15px var(--text); color: rgba(255,255,255,.8); }

/* ---------- ch.3 the index that lights up ---------- */
.st-index { border-top: 1px solid rgba(180,35,90,.22); }
.st-index__i { position: relative; display: grid; grid-template-columns: 96px minmax(0, 6fr) minmax(0, 5fr); gap: 32px; align-items: baseline; padding: 30px 0;
  border-bottom: 1px solid rgba(180,35,90,.22); }
.st-index__i::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: linear-gradient(90deg, var(--purple), var(--cyan));
  transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.2s var(--wn-ease-out); }
.st-index__i.is-now::after { transform: scaleX(1); }
.st-index__n { font: 600 14px/1 var(--text); letter-spacing: .06em; color: var(--blue); }
.st-index__t { font: 500 40px/46px var(--display); letter-spacing: -1px; color: var(--ink); transition: color .8s var(--wn-ease), transform .9s var(--wn-ease-out); }
.st-index__i p { font: 400 18px/28px var(--text); color: var(--grey70); transition: opacity .8s var(--wn-ease); }
html.wm-on .st-index.is-armed .st-index__i:not(.is-lit) .st-index__t { color: rgba(30,10,26,.2); transform: translate3d(-14px, 0, 0); }
html.wm-on .st-index.is-armed .st-index__i:not(.is-lit) p { opacity: .35; }

/* ---------- ch.4 the worked example ---------- */
.st-ch4 { overflow: hidden; }
.st-ch4__glow { position: absolute; left: -12%; bottom: -10%; width: 820px; height: 820px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232,70,111,.32), rgba(232,70,111,0)); }
.st-ch4 .wrap { position: relative; }
.st-case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.st-case__lede { margin-bottom: 18px; font: 500 26px/36px var(--display); letter-spacing: -.3px; color: #fff; }
.st-case__txt > p:not(.st-case__lede) { font: 400 18px/30px var(--text); color: rgba(255,255,255,.86); }
.st-voices-row { display: flex; flex-direction: column; gap: 22px; margin-top: 40px; }
.st-voice { margin: 0; padding: 2px 0 4px 22px; border-left: 3px solid var(--mint); }
.st-voice blockquote { margin: 0; font: 500 21px/30px var(--display); letter-spacing: -.2px; color: #fff; }
.st-voice figcaption { margin-top: 8px; font: 600 13px/18px var(--text); color: var(--mint); }
.st-sendus { margin-top: 36px; padding: 22px 24px; border-radius: 20px; background: rgba(20,4,15,.4); border: 1px solid rgba(255,179,199,.22); }
.st-sendus__h { margin-bottom: 12px; font: 600 13px/16px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--mint); }
.st-case__fig { margin: 0; padding: 28px 32px 28px; border-radius: 28px; background: #fff; color: var(--body); box-shadow: 0 40px 90px rgba(10,2,8,.45); }
.st-case__cap { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; font: 500 22px/28px var(--display); letter-spacing: -.2px; color: var(--ink); }
.st-case__fig .st-fig__no { background: var(--wn-rose-10); color: var(--blue); }
.st-case__fig .st-chip { border-color: var(--wn-line); background: var(--wn-rose-10); color: var(--ink); }
.st-case__fig .st-chip--ok svg { color: var(--purple); }
.st-case__fig .st-row__l { color: var(--blue); }
.st-case__fig .st-note { color: var(--grey70); }
.st-case__fig .st-sig { color: var(--blue); }
.st-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 0; font: 500 13px/18px var(--text); color: var(--grey70); }
.st-legend span { display: inline-flex; align-items: center; gap: 8px; }
.st-sw { display: inline-block; width: 12px; height: 12px; border-radius: 4px; }
.st-sw--a, .st-sw--gap { background: var(--purple); }
.st-sw--b, .st-sw--you { background: #e9a55a; }
.st-sw--rival { background: var(--blue70); }
.st-sw--n { background: #c9b6bf; }
.st-sw--ring { border: 2px solid rgba(180,35,90,.55); background: rgba(180,35,90,.12); border-radius: 50%; }
/* butterfly */
.st-bf .st-legend { margin: 0 0 18px; justify-content: space-between; }
.st-bf ul { display: flex; flex-direction: column; gap: 14px; }
.st-bf li { display: grid; grid-template-columns: minmax(0, 1fr) 176px minmax(0, 1fr); gap: 14px; align-items: center; }
.st-bf__a, .st-bf__b { display: flex; align-items: center; gap: 10px; }
.st-bf__t { position: relative; flex: 1; height: 16px; border-radius: 999px; background: var(--wn-rose-10); overflow: hidden; }
.st-bf__t i { position: absolute; inset: 0; border-radius: inherit; transform: scaleX(var(--v)); }
.st-bf__a .st-bf__t i { background: var(--purple); transform-origin: 100% 50%; }
.st-bf__b .st-bf__t i { background: #e9a55a; transform-origin: 0 50%; }
.st-bf li > span > b { width: 40px; flex: none; font: 600 14px/1 var(--text); color: var(--ink); text-align: center; font-variant-numeric: tabular-nums; }
.st-bf__l { font: 600 14px/18px var(--text); color: var(--ink); text-align: center; }
.st-bf .st-note { margin-top: 18px; }
/* journey map */
.st-jm { display: grid; grid-template-columns: 96px repeat(5, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
.st-jm__curve { position: relative; grid-column: 2 / -1; padding-top: 6px; }
.st-jm__fix { position: absolute; left: 70%; top: -4px; transform: translateX(-50%); padding: 5px 10px; border-radius: 999px; background: var(--purple); color: #fff; font: 700 11px/1 var(--text);
  letter-spacing: .06em; text-transform: uppercase; }
.st-jm__l { display: flex; align-items: center; font: 600 12px/16px var(--text); letter-spacing: .04em; text-transform: uppercase; color: var(--blue); }
.st-jm__l--curve { align-items: center; }
.st-jm__c { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 6px; border-radius: 10px; background: var(--wn-page);
  font: 500 13px/17px var(--text); color: var(--ink); text-align: center; }
.st-jm__c.st-jm__stage { background: none; font-weight: 700; }
.st-jm__c.is-pain { background: var(--wn-rose-10); color: var(--blue70); box-shadow: inset 0 0 0 1.5px rgba(214,51,94,.45); font-weight: 600; }
.st-jm__c.st-jm__stage.is-pain { background: var(--purple); color: #fff; box-shadow: none; }
/* gap map, bubbles */
.st-gm, .st-bb { position: relative; }
/* field report */
.st-fr__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; }
.st-fr__big b { display: block; font: 500 76px/1 var(--display); letter-spacing: -2px; color: var(--ink); }
.st-fr__big span { font: 500 15px/20px var(--text); color: var(--grey70); }
.st-fr__chips .st-chips { justify-content: flex-end; }
.st-fr__grid { display: grid; grid-template-columns: 90px repeat(2, minmax(0, 1fr)); gap: 6px; }
.st-fr__h { font: 600 12px/16px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--blue); text-align: center; }
.st-fr__l { font: 600 14px/40px var(--text); color: var(--ink); }
.st-fr__c { display: flex; align-items: center; justify-content: center; gap: 6px; height: 40px; border-radius: 10px; background: var(--wn-rose-10);
  color: var(--blue70); font: 600 13px/1 var(--text); }
.st-fr__rev { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 4px; }
.st-fr__rev p { padding: 14px; border-radius: 14px; border: 1px solid var(--wn-line); font: 400 13px/18px var(--text); color: var(--grey70); }
.st-fr__rev b { display: block; margin-bottom: 6px; font: 500 32px/1 var(--display); color: var(--blue); }
/* India pages only: the line that says the drawn study ran in the US (fix, 21 Oct 2026 review) */
.st-fr__note { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--wn-line);
  font: 500 13px/18px var(--text); color: var(--blue); }
.st-fr__note svg { flex: none; }

/* ---------- ch.5 what you get ---------- */
.st-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 44px; }
.st-boxes--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 36px; }
.st-boxes--n7 > li:last-child { grid-column: span 2; }   /* 7 items: 4 + 1 + 1 + 2, no empty cells */
.st-boxes--n7 > li:last-child p { max-width: 560px; }
.st-box__i { padding: 26px 0 40px; border-top: 2px solid var(--ink); }
.st-box__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.st-box__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: #fff; color: var(--blue); border: 1px solid var(--wn-line);
  transition: transform .45s var(--wn-ease-out), background-color .3s ease, color .3s ease; }
.st-box__i:hover .st-box__ico { background: var(--purple); color: #fff; transform: rotate(-8deg) scale(1.06); }
.st-box__n { font: 500 15px/1 var(--display); color: var(--blue); }
.st-box__i h3 { margin-bottom: 10px; font: 500 24px/30px var(--display); letter-spacing: -.3px; color: var(--ink); }
.st-box__i p { font: 400 16px/25px var(--text); color: var(--grey70); }

/* ---------- Built on CatalyseAI ---------- */
.st-band { overflow: hidden; }
.st-band__glow { position: absolute; right: -12%; top: -24%; width: 860px; height: 860px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232,70,111,.36), rgba(232,70,111,0)); }
.st-band .wrap { position: relative; }
.st-band__head { display: flex; flex-direction: column; gap: 16px; max-width: 880px; margin-bottom: 48px; }
.st-band .wn-card { min-height: 100%; }
.st-band__stats { margin-top: 64px; }

/* ---------- ch.6 FAQ ---------- */
.st-faq { padding-left: 268px; max-width: 1240px; }

/* ---------- print ---------- */
@media print { .st-rail { display: none; } }

/* =====================================================================================================
   RESPONSIVE (21 Oct 2026): small laptops, tablets and phones. Breakpoints, header clearance and motion: the RESPONSIVE
   block at the top of wine-base.css (max-width 1199.98 / 1023.98 / 767.98 / 479.98px; touch = (hover: none) and
   (pointer: coarse)). From 1200px up nothing below applies. Below 1024px and on touch screens wine-motion.js runs
   html.wm-lite, so ch.2 shows its static layout (each step with its own panel), the index is lit, the rail is hidden.
   Wide drawings (the cover Fig. 1, the 600px figures) keep their proportions and are swiped sideways inside their box
   at a width where every label stays 12px or more; the page itself never scrolls sideways.
   ===================================================================================================== */

/* ---------- 1200: small laptop ---------- */
@media (max-width: 1199.98px) {
  .st-hero__h { font-size: clamp(36px, 3.4vw + 23px, 60px); line-height: 1.08; letter-spacing: -.025em; }
  .st-hero__row { gap: 48px; }
  .st-chead { grid-template-columns: 180px minmax(0, 1fr); gap: 28px; margin-bottom: 56px; }
  .st-chead__n { height: 112px; }
  .st-chead__n > span { font-size: 128px; line-height: 112px; letter-spacing: -5px; }
  .st-open { gap: 48px; padding-left: 208px; }
  .st-member { margin-left: 208px; }
  .st-faq { padding-left: 208px; }
  .st-scrolly { column-gap: 48px; }
  .st-index__i { grid-template-columns: 72px minmax(0, 6fr) minmax(0, 5fr); gap: 24px; }
  .st-index__t { font-size: 34px; line-height: 40px; }
  .st-case { gap: 44px; }
  .st-boxes { gap: 0 32px; }
  .st-boxes--4 { gap: 0 28px; }
}

/* ---------- 1024: tablet landscape and below ---------- */
@media (max-width: 1023.98px) {
  /* hero: one column (headline, standfirst, buttons), the cover card under it */
  .st-hero { padding-top: var(--wn-hdr-clear, 96px); }
  .st-hero__row { grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 20px; align-items: start; }
  .st-hero__stand { max-width: 640px; padding-bottom: 0; }
  .st-hero__glow2 { width: 560px; height: 560px; }
  .st-coverbox { margin-top: 36px; border-radius: 24px 24px 0 0; }
  .st-cover { padding: 16px 24px 0; }
  .st-cover__cap { flex-wrap: wrap; row-gap: 8px; }
  .st-cover__key { margin-left: 0; flex-basis: 100%; }
  .st-svg .st-gap__t { font-size: 12.5px; }
  /* contents strip: three columns under its heading */
  .st-toc { flex-direction: column; }
  .st-toc__h { width: auto; padding: 14px 24px 4px; }
  .st-toc ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-toc li { border-left: 0; border-top: 1px solid rgba(255,179,199,.14); }
  .st-toc li:not(:nth-child(3n+1)) { border-left: 1px solid rgba(255,179,199,.14); }
  .st-toc a { min-height: 64px; padding: 12px 20px 14px; }
  .st-toc a b { font-size: 14px; line-height: 19px; }
  /* the chapter rail would sit on the text: hidden (the contents strip and the headings carry the chapters) */
  .st-rail { display: none; }
  /* chapter heads */
  .st-chead { grid-template-columns: 156px minmax(0, 1fr); gap: 24px; margin-bottom: 44px; }
  .st-chead__n { height: 92px; }
  .st-chead__n > span { font-size: 108px; line-height: 92px; letter-spacing: -4px; }
  /* ch.1 */
  .st-open { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-left: 0; }
  .st-pull { max-width: 620px; }
  .st-member { margin: 48px 0 0; grid-template-columns: 150px minmax(0, 1fr); gap: 28px; padding: 26px 28px; }
  .st-member img { width: 140px; }
  /* ch.2: one column, each step followed by its own panel (the static layout: steps and panels share the grid) */
  .st-scrolly { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .st-step { grid-column: 1; grid-row: calc(var(--r) * 2 - 1); padding-top: 36px; }
  .st-step:first-child { padding-top: 0; }
  .st-layer { grid-column: 1; grid-row: calc(var(--r) * 2); margin-top: 20px; }
  .st-step__n { margin-bottom: 10px; font-size: 44px; }
  .st-step__t { font-size: 26px; line-height: 32px; }
  .st-step p { max-width: 640px; }
  /* ch.3 index: number | title, the line under the title */
  .st-index__i { grid-template-columns: 56px minmax(0, 1fr); row-gap: 10px; column-gap: 20px; padding: 26px 0; }
  .st-index__i p { grid-column: 2; }
  .st-index__t { font-size: 30px; line-height: 36px; }
  /* ch.4: text, then the figure */
  .st-case { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .st-voices-row { margin-top: 32px; }
  .st-case__fig { padding: 24px 24px; border-radius: 24px; }
  /* ch.5 */
  .st-boxes, .st-boxes--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .st-boxes--n7 > li:last-child { grid-column: auto; }
  .st-boxes--n7 > li:last-child p { max-width: none; }
  /* ch.6 */
  .st-faq { padding-left: 0; }
  .st-ch4__glow { width: 560px; height: 560px; }
  .st-band__glow { width: 600px; height: 600px; }
  .st-band__head { margin-bottom: 36px; }
  .st-band__stats { margin-top: 48px; }
}

/* ---------- 768: tablet portrait, phones in landscape ---------- */
@media (max-width: 767.98px) {
  .st-hero { padding-top: var(--wn-hdr-clear-m, 88px); }
  .st-hero__meta { flex-wrap: wrap; row-gap: 6px; }
  .st-hero__meta > span { font-size: 15px; line-height: 20px; }
  .st-stand { font-size: 17px; line-height: 27px; }
  .st-coverbox { margin-top: 30px; margin-left: -8px; margin-right: -8px; border-radius: 22px 22px 0 0; }
  .st-cover { padding: 14px 18px 0; }
  .st-cover__cap { font-size: 15px; }
  .st-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-toc li:not(:nth-child(3n+1)) { border-left: 0; }
  .st-toc li:nth-child(2n) { border-left: 1px solid rgba(255,179,199,.14); }
  .st-toc__h { padding: 14px 18px 4px; }
  .st-toc a { padding: 12px 16px 14px; }
  /* heat strip (usage & attitude): every other hour label */
  .st-hs__grid, .st-hs__x { grid-template-columns: 34px repeat(18, minmax(0, 1fr)); gap: 3px; }
  .st-hs__grid i { height: 18px; border-radius: 4px; }
  .st-hs__x span:nth-child(even) { visibility: hidden; }
  /* chapter heads: the outlined numeral above the title */
  .st-chead { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 36px; }
  .st-chead__n { height: 72px; }
  .st-chead__n > span { font-size: 84px; line-height: 72px; letter-spacing: -3px; -webkit-text-stroke-width: 1.5px; }
  .st-chead__k { margin-bottom: 10px; }
  /* ch.1 */
  .st-drop { font-size: 18px; line-height: 30px; }
  .st-drop::first-letter { margin: 4px 12px 0 -2px; font-size: 84px; line-height: 68px; }
  .st-pull { padding-left: 22px; }
  .st-pull p { font-size: 22px; line-height: 30px; }
  .st-member { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 22px; }
  .st-member .wn-ticks { grid-template-columns: minmax(0, 1fr); }
  .st-member .wn-ticks div { font-size: 16px; }
  /* ch.2 steps and panels */
  .st-step { padding-top: 32px; }
  .st-step__n { font-size: 38px; }
  .st-step__t { font-size: 24px; line-height: 30px; }
  .st-step p { font-size: 17px; line-height: 27px; }
  .st-layer { margin-top: 18px; padding: 20px 18px; border-radius: 20px; }
  .st-layer__t { flex-wrap: wrap; row-gap: 4px; font-size: 20px; line-height: 26px; }
  .st-note { font-size: 15px; line-height: 21px; }
  /* bars: the label and the value on one line, the bar under them */
  .st-b li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; column-gap: 12px; }
  .st-b__l { grid-column: 1; grid-row: 1; font-size: 15px; line-height: 20px; }
  .st-b__v { grid-column: 2; grid-row: 1; font-size: 15px; }
  .st-b li > .st-b__t { grid-column: 1 / -1; grid-row: 2; }
  .st-fn li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; column-gap: 12px; font-size: 15px; line-height: 20px; }
  .st-fn li > :first-child { grid-column: 1; grid-row: 1; }
  .st-fn li > b { grid-column: 2; grid-row: 1; }
  .st-fn li > .st-b__t { grid-column: 1 / -1; grid-row: 2; height: 18px; }
  .st-th__h, .st-th li { grid-template-columns: minmax(0, 1fr) 84px 40px; }
  .st-th__h span:first-child { grid-column: 1; }
  .st-th__h span:nth-child(2) { grid-column: 2 / span 2; align-self: end; }
  .st-th__h span:nth-child(3) { display: none; }   /* "Sentiment": the key under the list names the three colours */
  .st-th li > :nth-child(n+4) { grid-column: 1 / -1; }
  .st-th__l { font-size: 15px; line-height: 20px; }
  .st-th__k { flex-wrap: wrap; justify-content: flex-start; }
  /* screener, questionnaire, video answer */
  .st-scr li { flex-wrap: wrap; row-gap: 6px; font-size: 16px; line-height: 22px; }
  /* the five-point scale: one row per answer (label and share, the bar under them) */
  .st-sc ul { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .st-sc li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "t t"; align-items: center; gap: 6px 12px; text-align: left; }
  .st-sc li > b { grid-area: v; font-size: 15px; }
  .st-sc small { grid-area: l; font-size: 15px; line-height: 20px; color: #fff; }
  .st-sc__t { grid-area: t; height: 10px; border-radius: 999px; }
  .st-sc__t i { top: 0; height: 100%; border-radius: inherit; transform-origin: 0 50%; transform: scaleX(var(--v)); }
  .st-q li { grid-template-columns: 32px minmax(0, 1fr); row-gap: 6px; }
  .st-q__t { font-size: 16px; line-height: 22px; }
  .st-q li > em { grid-column: 2; justify-self: start; white-space: normal; }
  .st-vid__top { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
  .st-vid__tile { height: 140px; }
  .st-vid__sil { width: 70px; }
  .st-say { font-size: 16px; line-height: 23px; }
  .st-vid__q { font-size: 15px; line-height: 21px; }
  .st-voices .st-say { max-width: 94%; font-size: 16px; line-height: 24px; }
  /* tables (the heat table: see the swipe block below) */
  .st-cmp thead th { padding: 0 6px 8px; }
  .st-cmp tbody th { width: 34%; padding-right: 6px; }
  .st-cmp td { padding: 12px 6px; }
  .st-cmp td b { font-size: 16px; }
  .st-rev { display: block; overflow-x: auto; overscroll-behavior-x: contain; }
  .st-rev td { font-size: 15px; line-height: 20px; }
  .st-rev td:nth-child(2) { min-width: 170px; }
  /* stages, decisions, notes, ranking, pain points, links, spec, scale */
  .st-stg__row ol { flex-wrap: wrap; gap: 8px; }
  .st-stg__row li { flex: 1 1 calc(33.33% - 6px); }
  .st-stg__row li + li::before { display: none; }
  .st-stg__row li span { min-height: 52px; }
  .st-dec { grid-template-columns: minmax(0, 1fr); }
  .st-nt__h { flex-wrap: wrap; row-gap: 6px; }
  .st-nt__t { font-size: 16px; line-height: 23px; }
  /* ranking: the option on its own line, its three ratings under it, in the columns of the heading */
  .st-rk__h, .st-rk li { grid-template-columns: 30px repeat(3, minmax(0, 1fr)); column-gap: 10px; row-gap: 10px; }
  .st-rk__h { padding: 0 12px 8px; }
  .st-rk__h span:first-child { display: none; }
  .st-rk__h span:nth-child(2) { grid-column: 2; }
  .st-rk li { padding: 12px; }
  .st-rk__n { grid-column: 1; grid-row: 1; }
  .st-rk__t { grid-column: 2 / -1; grid-row: 1; }
  .st-rk__t b { font-size: 16px; line-height: 21px; }
  .st-rk__t small { font-size: 14px; line-height: 19px; }
  .st-rk li > .st-dots { grid-row: 2; }
  .st-rk li > .st-dots:nth-child(3) { grid-column: 2; }
  .st-rk li > .st-dots:nth-child(4) { grid-column: 3; }
  .st-rk li > .st-dots:nth-child(5) { grid-column: 4; }
  .st-dots { gap: 4px; }
  .st-dots i { width: 10px; height: 10px; }
  .st-pn li { grid-template-columns: 30px minmax(0, 1fr) 64px; gap: 12px; }
  .st-pn b { font-size: 16px; line-height: 21px; }
  .st-pn__v b { font-size: 24px; }
  .st-pn q { font-size: 15px; line-height: 21px; }
  .st-ln li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .st-ln code { grid-column: 1 / -1; grid-row: 2; }
  .st-spec dd { font-size: 16px; line-height: 22px; }
  .st-sc ul { gap: 6px; }
  .st-svg .st-gap__t { font-size: 13px; }
  .st-svg .st-sub2, .st-svg .st-tickl, .st-svg .st-colh, .st-svg .st-axl { font-size: 13px; }
  /* ch.3 index: the number above the title */
  .st-index__i { grid-template-columns: minmax(0, 1fr); row-gap: 8px; padding: 24px 0; }
  .st-index__i p { grid-column: 1; font-size: 17px; line-height: 27px; }
  .st-index__t { font-size: 26px; line-height: 32px; letter-spacing: -.5px; }
  /* ch.4 */
  .st-case__lede { font-size: 22px; line-height: 31px; }
  .st-case__txt > p:not(.st-case__lede) { font-size: 17px; line-height: 28px; }
  .st-voice blockquote { font-size: 19px; line-height: 28px; }
  .st-sendus { padding: 20px 18px; }
  .st-case__fig { margin-left: -8px; margin-right: -8px; padding: 20px 16px; border-radius: 22px; }
  .st-case__cap { font-size: 19px; line-height: 25px; flex-wrap: wrap; row-gap: 6px; }
  .st-legend { font-size: 14px; }
  /* butterfly: the label on its own line, the two bars under it */
  .st-bf .st-legend { justify-content: flex-start; }
  .st-bf li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "l l" "a b"; row-gap: 6px; column-gap: 10px; }
  .st-bf__a { grid-area: a; }
  .st-bf__b { grid-area: b; }
  .st-bf__l { grid-area: l; }
  .st-jm__c { font-size: 14px; line-height: 18px; }
  /* field report */
  .st-fr__top { flex-direction: column; align-items: flex-start; }
  .st-fr__chips .st-chips { justify-content: flex-start; }
  .st-fr__big b { font-size: 60px; }
  .st-fr__grid { grid-template-columns: 76px repeat(2, minmax(0, 1fr)); }
  .st-fr__rev { grid-template-columns: minmax(0, 1fr); }
  .st-fr__rev p { font-size: 15px; line-height: 21px; }
  /* ch.5 */
  .st-boxes, .st-boxes--4 { grid-template-columns: minmax(0, 1fr); }
  .st-box__i { padding: 22px 0 30px; }
  .st-box__i h3 { font-size: 22px; line-height: 28px; }
  .st-box__i p { font-size: 16px; line-height: 25px; }
  .st-band__stats { margin-top: 40px; }
}

/* ---------- 480: phone ---------- */
@media (max-width: 479.98px) {
  .st-coverbox { margin-left: -6px; margin-right: -6px; }
  .st-cover { padding: 14px 16px 0; }
  .st-toc ol { grid-template-columns: minmax(0, 1fr); }
  .st-toc li:nth-child(2n) { border-left: 0; }
  .st-toc a { flex-direction: row; align-items: baseline; gap: 12px; min-height: 48px; padding: 12px 18px; }
  .st-toc a b { font-size: 16px; line-height: 21px; }
  .st-chead__n { height: 60px; }
  .st-chead__n > span { font-size: 70px; line-height: 60px; }
  .st-layer { padding: 18px 16px; }
  .st-vid__top { grid-template-columns: minmax(0, 1fr); }
  .st-vid__tile { height: 120px; max-width: 220px; }
  .st-pn li { grid-template-columns: 28px minmax(0, 1fr); }
  .st-pn__v { grid-column: 2; text-align: left; }
  .st-stg__row li { flex-basis: calc(50% - 4px); }
  .st-case__fig { padding: 18px 14px; }
  .st-fr__grid { grid-template-columns: 64px repeat(2, minmax(0, 1fr)); }
}

/* ---------- wide drawings: swiped sideways inside their box at a size where the labels read (12px or more) ----------
   Fig. 1 (a 1160px drawing) on tablets and phones and on touch screens below 1200px; the 600px drawings, the heat table
   and the journey map on phones and on touch tablets (wider tablets show them whole) */
@media (max-width: 1023.98px), (max-width: 1199.98px) and (hover: none) and (pointer: coarse) {
  .st-cover:has(> .st-svg--cover) { overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  .st-cover:has(> .st-svg--cover) > .st-svg--cover { width: 1080px; max-width: none; }
  .st-cover:has(> .st-svg--cover) .st-cover__cap { position: sticky; left: 0; }
  .st-svg--cover .st-colh, .st-svg--cover .st-tickl, .st-svg--cover .st-sub, .st-svg--cover .st-axl { font-size: 13px; }
}
@media (max-width: 767.98px), (max-width: 1199.98px) and (hover: none) and (pointer: coarse) {
  .st-layer:has(> .st-svg) { overflow-x: auto; overscroll-behavior-x: contain; }
  .st-layer > .st-svg { width: max(100%, 560px); max-width: none; }
  .st-layer:has(> .st-svg) > :not(.st-svg) { position: sticky; left: 0; }
  .st-gm, .st-bb { overflow-x: auto; overscroll-behavior-x: contain; }
  .st-gm > .st-svg, .st-bb > .st-svg { width: max(100%, 560px); max-width: none; }
  .st-svg .st-gap__t { font-size: 13px; }
  .st-svg .st-sub2, .st-svg .st-tickl, .st-svg .st-colh, .st-svg .st-axl { font-size: 13px; }
  .st-heat { display: block; width: auto; margin: -5px; overflow-x: auto; overscroll-behavior-x: contain; }
  .st-heat thead th:first-child { width: 96px; min-width: 96px; }
  .st-heat thead th { min-width: 58px; }
  .st-heat tbody th { font-size: 14px; white-space: normal; }
  .st-heat td { height: 46px; font-size: 17px; }
  .st-jm { grid-template-columns: 84px repeat(5, minmax(112px, 1fr)); overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 6px; }
}

/* ---------- small screens and touch screens: no text under 12px ---------- */
@media (max-width: 1023.98px), (hover: none) and (pointer: coarse) {
  .st-full, .st-nt__h em, .st-q em, .st-th__h, .st-rk__h, .st-say small, .st-vid__tile em, .st-rev th, .st-rev em, .st-spec dt,
  .st-jm__fix, .st-sig { font-size: 12px; }
  .st-chips--sm .st-chip { font-size: 12.5px; }
  .st-rev code { font-size: 12.5px; }
}

/* ---------- touch screens: 44px tap targets, no hover lifts that stick after a tap ---------- */
@media (hover: none) and (pointer: coarse) {
  .st-toc a { min-height: 48px; }
  .st-box__i:hover .st-box__ico { background: #fff; color: var(--blue); transform: none; }
}