/* =====================================================================================================
   t-product-showcase.css (hand-written, 20 Oct 2026): the "product tour" template of the wine landing pages.
   Pages: CatalyseAI (/products/cr-survey/), Ask the study, Reports & exports, AI survey consultant, Pocketsfull Ai,
   Sampleeye, Sell & Buy API. Loads after wine-chrome.css, wine-base.css (and wine-kit.css when a kit visual is used).
   Prefix ps- only. Motion: the scroll parts use wine-motion.js attributes; the app-window demos are switched by
   t-product-showcase.js (.ps-demo.is-run, scenes .is-on). Every loop sits inside [data-play] (paused off screen)
   and runs only under html.wm-on (never with reduced motion or ?static=1). Desktop 1440.
   ===================================================================================================== */

body.t-product-showcase {
  --ps-ink: #1e0a1a; --ps-tx: #3b2c35; --ps-mut: #6e6269; --ps-line: #e8dfe3; --ps-soft: #fdf1f4; --ps-soft2: #fbe3ea;
  --ps-rose: #ffb3c7; --ps-btn: #d6335e; --ps-link: #b4235a; --ps-deep: #8e1a47; --ps-bright: #e8466f; --ps-gold: #f6c98e;
  --ps-wine: #1a0616; --ps-plum: #33102c; --ps-ok: #2f7a5b; --ps-mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --ps-ease: cubic-bezier(.16, 1, .3, 1);
}
.t-product-showcase .ps-win ol, .t-product-showcase [class^="ps-"] ol, .t-product-showcase ol.ps-strip__list,
.t-product-showcase .ps-pin__steps, .t-product-showcase .ps-cs__steps { list-style: none; margin: 0; padding: 0; }
.t-product-showcase [class*="ps-"] h5, .t-product-showcase [class*="ps-"] h6 { margin: 0; }
.t-product-showcase [class*="ps-"] blockquote, .t-product-showcase figure.ps-demo { margin: 0; }
.t-product-showcase table { border-collapse: collapse; }
/* every list of this template is a drawing or a card row, never a bulleted list (later .ps- rules may add padding) */
.t-product-showcase :where(ol[class*="ps-"], ul[class*="ps-"], [class*="ps-"] ol, [class*="ps-"] ul) { list-style: none; margin: 0; padding: 0; }

/* ---------------------------------------------------------------- hero */
.ps-hero__beam { position: absolute; z-index: -1; left: -10%; top: -20%; width: 70%; height: 80%; pointer-events: none;
  background: conic-gradient(from 200deg at 50% 50%, rgba(232,70,111,0), rgba(232,70,111,.16), rgba(255,179,199,.08), rgba(232,70,111,0) 40%);
  filter: blur(40px); opacity: .9; }
/* finite (two turns, then still) and paused while the hero is off screen (the beam has data-play): WCAG 2.2.2 */
html.wm-on .ps-hero__beam { animation: ps-beam 22s linear 2; }
html.wm-on .ps-hero__beam:not(.is-live) { animation-play-state: paused; }
@keyframes ps-beam { to { transform: rotate(360deg); } }
.ps-h1 { max-width: 760px; }
.ps-hero__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.ps-hero__chips li { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 12px; border-radius: 999px;
  border: 1px solid rgba(255,179,199,.3); background: rgba(255,255,255,.06); font: 600 14px/1 var(--text); color: #fff; }
.ps-hero__chips li svg { color: var(--ps-rose); }
/* a sequence (CatalyseAI: brief to decision) is joined by short lines and stays on one row; feature chips just wrap */
.ps-hero__chips--flow { flex-wrap: nowrap; }
.ps-hero__chips--flow li + li { position: relative; margin-left: 18px; }
.ps-hero__chips--flow li + li::before { content: ""; position: absolute; left: -19px; top: 50%; width: 12px; height: 1px; background: rgba(255,179,199,.6); }
.ps-hero__chips:not(.ps-hero__chips--flow) li { height: 34px; font-size: 13px; }

/* stage: copy in two columns over the wine, the app window below, tilting into place as it scrolls in */
.ps-hero--stage { padding: 172px 0 0; background: var(--wn-page); }
.ps-hero--stage::before { content: ""; position: absolute; z-index: -2; left: 0; right: 0; top: 0; bottom: 300px; background: var(--wn-hero-bg); }
.ps-hero--stage .wn-hero__glow { top: -6%; right: -10%; }
.ps-hero__txt--c { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 72px; row-gap: 20px; align-items: end; }
.ps-hero__txt--c > .wn-crumbs, .ps-hero__txt--c > .wn-kicker { grid-column: 1; }
.ps-hero__txt--c > .ps-h1 { grid-column: 1; }
.ps-hero__txt--c > .wn-lead { grid-column: 2; grid-row: 1 / span 3; align-self: end; font-size: 18px; line-height: 28px; }
.ps-hero__txt--c > .wn-hero__ctas { grid-column: 2; margin-top: 0; }
.ps-hero__txt--c > .ps-hero__chips { grid-column: 1; grid-row: 4; }
.ps-hero__txt--c .ps-h1 { font-size: 60px; line-height: 66px; }
.ps-stage { position: relative; max-width: 1200px; margin: 56px auto 0; padding-bottom: 104px; }
.ps-stage__glow { position: absolute; z-index: -1; left: 6%; right: 6%; top: 10%; height: 70%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(232,70,111,.55), rgba(232,70,111,0)); filter: blur(30px); }
.ps-stage__tilt { transform-origin: 50% 100%; }

/* split: copy left, the window right */
.ps-hero--split { padding-bottom: 112px; }
.ps-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.ps-hero__grid .ps-hero__txt { display: flex; flex-direction: column; gap: 22px; }
.ps-hero__grid .ps-h1 { font-size: 56px; line-height: 62px; }
.ps-hero__grid .wn-lead { font-size: 18px; line-height: 28px; }
.ps-hero__vis { position: relative; min-width: 0; }
.ps-hero__vis::before { content: ""; position: absolute; z-index: -1; inset: 8% -4% -6% 6%; border-radius: 40px;
  background: radial-gradient(closest-side, rgba(232,70,111,.5), rgba(232,70,111,0)); filter: blur(24px); }

/* ---------------------------------------------------------------- the app window */
.ps-demo { position: relative; }
.ps-win { position: relative; border-radius: 22px; background: #fff; overflow: hidden; color: var(--ps-ink); text-align: left;
  font: 400 14px/1.4 var(--text); letter-spacing: 0;
  box-shadow: 0 0 0 1px rgba(255,179,199,.45), 0 50px 100px -20px rgba(20,4,15,.55), 0 0 90px rgba(232,70,111,.25); }
.ps-win__bar { position: relative; height: 44px; display: flex; align-items: center; gap: 14px; padding: 0 56px 0 18px;
  background: #faf5f7; border-bottom: 1px solid var(--ps-line); }
.ps-win__dots { display: flex; gap: 7px; }
.ps-win__dots i { width: 11px; height: 11px; border-radius: 50%; background: #e8466f; }
.ps-win__dots i:nth-child(2) { background: #f6c98e; }
.ps-win__dots i:nth-child(3) { background: #ffb3c7; }
.ps-win__bar > b { flex: 1; text-align: center; font: 600 13px/1 var(--text); color: var(--ps-ink); margin-right: 40px; }
.ps-win__prog { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }
.ps-win__prog i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, #d6335e, #ffb3c7); }
.ps-demo.is-run .ps-win__prog i { animation: ps-prog 6s linear both; }
@keyframes ps-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.ps-demo__pp { position: absolute; z-index: 4; top: 8px; right: 12px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--ps-line); background: #fff; color: var(--ps-link); transition: background-color .2s ease, color .2s ease; }
.ps-demo__pp:hover { background: var(--ps-link); color: #fff; }
.ps-demo__pp[hidden] { display: none; }
.ps-demo__pp svg { display: block; }
.ps-pp-play { display: none; }
.ps-demo.is-paused .ps-pp-play { display: block; }
.ps-demo.is-paused .ps-pp-pause { display: none; }
.ps-demo.is-paused *, .ps-demo.is-paused *::before, .ps-demo.is-paused *::after { animation-play-state: paused !important; }
.ps-demo--dark .ps-win { background: #1b0717; color: #fff; }
.ps-demo--dark .ps-win__bar { background: #24091f; border-bottom-color: rgba(255,179,199,.16); }
.ps-demo--dark .ps-win__bar > b { color: #fff; }

/* scenes: the .is-rest one shows when nothing runs; with .is-run the JS turns them on in turn */
.ps-stagebox { position: relative; min-width: 0; }
.ps-scene { position: absolute; inset: 0; padding: 22px 24px; visibility: hidden; opacity: 0; }
.ps-scene.is-rest { visibility: visible; opacity: 1; }
.ps-demo.is-run .ps-scene { visibility: hidden; opacity: 0; transform: translate3d(0, 10px, 0);
  transition: opacity .45s ease, transform .6s var(--ps-ease), visibility 0s linear .45s; }
.ps-demo.is-run .ps-scene.is-on { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
/* entrances, replayed each time their scene starts */
.ps-demo.is-run .ps-scene.is-on .ps-a { animation: ps-pop .7s var(--ps-ease) var(--o, 0s) both; }
.ps-demo.is-run .ps-scene.is-on .ps-a-l { animation: ps-froml .7s var(--ps-ease) var(--o, 0s) both; }
.ps-demo.is-run .ps-scene.is-on .ps-a-r { animation: ps-fromr .8s var(--ps-ease) var(--o, 0s) both; }
.ps-demo.is-run .ps-scene.is-on .ps-a-s { animation: ps-scale .6s var(--ps-ease) var(--o, 0s) both; }
.ps-demo.is-run .ps-scene.is-on .ps-grow { animation: ps-grow 1.1s var(--ps-ease) var(--o, 0s) both; }
.ps-demo.is-run .ps-scene.is-on .ps-type { animation: ps-type var(--t, 1.6s) steps(var(--n, 32), end) var(--o, 0s) both; }
.ps-demo.is-run .ps-scene.is-on .ps-ab { animation: ps-inout var(--d, 3s) ease var(--o, 0s) both; }
@keyframes ps-pop { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@keyframes ps-froml { from { opacity: 0; transform: translate3d(-18px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes ps-fromr { from { opacity: 0; transform: translate3d(28px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes ps-scale { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes ps-grow { from { transform: scaleX(0); } }
@keyframes ps-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ps-inout { 0% { opacity: 0; transform: translate3d(0, 8px, 0); } 10%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }
.ps-ab { opacity: 0; }                      /* views shown only while the demo plays */

/* ---------------------------------------------------------------- shared drawing parts */
.ps-lab { display: inline-flex; align-items: center; gap: 6px; font: 600 11px/14px var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--ps-link); }
.ps-lab svg { flex: none; }
.ps-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 14px; background: #fff;
  border: 1px solid var(--ps-line); box-shadow: 0 6px 18px rgba(30,10,26,.05); min-width: 0; }
.ps-h5, .ps-h6 { margin: 0; }     /* headings inside drawings are paragraphs, not h5/h6 (outline + screen readers) */
.ps-card .ps-h6 { font: 600 15px/20px var(--text); color: var(--ps-ink); }
.ps-note { font: 400 12px/16px var(--text); color: var(--ps-mut); }
.ps-bar { position: relative; display: block; height: 10px; border-radius: 999px; background: var(--ps-soft2); overflow: hidden; min-width: 0; }
.ps-bar i { position: absolute; inset: 0; border-radius: inherit; background: #f3a3ba; transform-origin: 0 50%; transform: scaleX(var(--v, .5)); }
.ps-bar.is-hi i, .is-hi > .ps-bar i, .ps-hrow.is-hi .ps-bar i { background: linear-gradient(90deg, #d6335e, #e8466f); }
.ps-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ps-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--ps-line);
  background: #fff; font: 500 12px/1 var(--text); color: var(--ps-tx); white-space: nowrap; }
.ps-chip.is-sel { background: var(--ps-ink); border-color: var(--ps-ink); color: #fff; }
.ps-seg { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--ps-soft); gap: 2px; align-self: flex-start; }
.ps-seg span { padding: 7px 14px; border-radius: 8px; font: 600 13px/1 var(--text); color: var(--ps-mut); }
.ps-seg span.is-sel { background: #fff; color: var(--ps-ink); box-shadow: 0 2px 6px rgba(30,10,26,.12); }
.ps-moe { font: 500 13px/18px var(--text); color: var(--ps-tx); }
.ps-moe b { font-weight: 700; color: var(--ps-link); }
.ps-big2 { font: 400 14px/20px var(--text); color: var(--ps-tx); }
.ps-big2 b { font: 500 26px/1 var(--display); color: var(--ps-ink); letter-spacing: -.5px; }
.ps-qrow, .ps-hrow, .ps-gmix, .ps-meter, .ps-wrow { display: grid; grid-template-columns: 112px minmax(0, 1fr) 70px; align-items: center; gap: 12px;
  font: 500 13px/18px var(--text); color: var(--ps-tx); }
.ps-qrow b, .ps-hrow b, .ps-gmix b, .ps-meter b { font: 600 13px/1 var(--text); color: var(--ps-ink); text-align: right; font-variant-numeric: tabular-nums; }
.ps-hrow { grid-template-columns: 160px minmax(0, 1fr) 44px; }
.ps-hrow.is-hi span:first-child { font-weight: 700; color: var(--ps-ink); }
.ps-meter { grid-template-columns: 112px minmax(0, 1fr) 40px; }
.ps-live { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px; background: var(--ps-soft);
  font: 600 12px/1 var(--text); color: var(--ps-deep); white-space: nowrap; }
.ps-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--ps-bright); box-shadow: 0 0 0 0 rgba(232,70,111,.5); }
html.wm-on [data-play].is-live .ps-live i { animation: ps-ping 1.8s ease-out infinite; }
@keyframes ps-ping { 0% { box-shadow: 0 0 0 0 rgba(232,70,111,.55); } 100% { box-shadow: 0 0 0 9px rgba(232,70,111,0); } }
.ps-logo { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, #e8466f, #8e1a47); }
.ps-logo--lg { width: 44px; height: 44px; border-radius: 13px; }

/* chat bubbles */
.ps-bub { max-width: 86%; padding: 11px 14px; border-radius: 16px; font: 400 14px/20px var(--text); }
.ps-bub--me { align-self: flex-end; margin-left: auto; background: var(--ps-ink); color: #fff; border-bottom-right-radius: 5px; }
.ps-bub--ai { align-self: flex-start; background: #fff; color: var(--ps-tx); border: 1px solid var(--ps-line); border-bottom-left-radius: 5px;
  box-shadow: 0 6px 18px rgba(30,10,26,.06); }
.ps-bub--ai p + * { margin-top: 10px; }
.ps-bub--ai b { color: var(--ps-ink); }
.ps-bub blockquote { padding: 8px 12px; border-left: 3px solid var(--ps-bright); background: var(--ps-soft); border-radius: 0 10px 10px 0;
  font: italic 400 13px/19px var(--text); color: var(--ps-tx); }
.ps-check { display: flex; align-items: center; gap: 8px; font: 600 12px/16px var(--text); color: var(--ps-ok); }
.ps-plan { display: flex; flex-direction: column; gap: 6px; }
.ps-plan li { display: flex; align-items: center; gap: 9px; font: 500 13px/18px var(--text); color: var(--ps-tx); }
.ps-plan li > span, .ps-vchecks li > span, .ps-m-checks li > span { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--ps-soft2); color: var(--ps-link); }
.ps-filter { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 24px; padding: 0 10px; border-radius: 999px;
  background: var(--ps-soft); font: 600 11px/1 var(--text); color: var(--ps-deep); }
.ps-input { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 8px 0 16px; border-radius: 999px; border: 1px solid var(--ps-line);
  background: #fff; font: 400 13px/1 var(--text); color: var(--ps-mut); }
.ps-input span { flex: 1; white-space: nowrap; overflow: hidden; }
.ps-input i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--ps-btn); color: #fff; }
.ps-toast { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 12px; background: var(--ps-ink); color: #fff; font: 500 13px/18px var(--text); white-space: nowrap;
  box-shadow: 0 14px 30px rgba(30,10,26,.3); }
.ps-toast svg { color: var(--ps-rose); flex: none; }
.ps-demo.is-run .ps-scene.is-on .ps-toast.ps-a { animation-name: ps-toastin; }
@keyframes ps-toastin { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* a drawn drink cup (fictional products) */
.ps-cup { position: relative; display: block; width: 30px; height: 40px; margin: 6px auto 4px;
  background: linear-gradient(180deg, var(--c1), var(--c2)); clip-path: polygon(0 8%, 100% 8%, 86% 100%, 14% 100%); border-radius: 3px; }
.ps-cup::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: rgba(255,255,255,.8); }

/* phone frame (respondent view, offerwall) */
.ps-phone { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px 14px 14px; border-radius: 30px; background: #fff;
  border: 7px solid var(--ps-ink); box-shadow: 0 20px 40px rgba(30,10,26,.18); }
.ps-phone__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 11px/1 var(--text); color: var(--ps-mut); }
.ps-phone__top i { flex: 0 0 70px; height: 5px; border-radius: 3px; background: var(--ps-soft2); position: relative; overflow: hidden; }
.ps-phone__top i::before { content: ""; position: absolute; inset: 0; background: var(--ps-btn); transform-origin: 0 50%; transform: scaleX(var(--v, .4)); }
.ps-phone__q { font: 600 15px/21px var(--text); color: var(--ps-ink); }
.ps-pcs { display: grid; gap: 8px; }
.ps-pc { position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 12px; border: 1.5px solid var(--ps-line); }
.ps-pc .ps-cup { margin: 0; width: 22px; height: 30px; flex: none; }
.ps-pc small { font: 500 12px/16px var(--text); color: var(--ps-tx); }
.ps-pc.is-sel { border-color: var(--ps-btn); background: var(--ps-soft); }
.ps-pc i { position: absolute; right: 8px; top: 50%; margin-top: -9px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ps-btn); color: #fff; }
.ps-phone__btn { align-self: stretch; text-align: center; padding: 10px; border-radius: 999px; background: var(--ps-btn); color: #fff; font: 600 13px/1 var(--text); }

/* video tile (a drawn person, never a real face; nothing is read from it) */
.ps-vtile, .ps-cam { position: relative; overflow: hidden; border-radius: 16px;
  background: radial-gradient(70% 60% at 50% 30%, #6e1a4c, #2a0b22 70%), #2a0b22; }
.ps-sil { position: absolute; left: 50%; bottom: 0; width: 56%; height: 74%; transform: translateX(-50%); }
.ps-sil::before { content: ""; position: absolute; left: 50%; top: 0; width: 44%; aspect-ratio: 1; border-radius: 50%; transform: translateX(-50%);
  background: linear-gradient(160deg, #f7b48a, #d9533f); opacity: .9; }
.ps-sil::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; border-radius: 50% 50% 0 0 / 60% 60% 0 0;
  background: linear-gradient(160deg, #e8466f, #8e1a47); }
.ps-rec { position: absolute; z-index: 2; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px;
  background: rgba(20,4,15,.55); font: 700 10px/1 var(--text); letter-spacing: .08em; color: #fff; }
.ps-rec i { width: 7px; height: 7px; border-radius: 50%; background: #ff5c5c; }
html.wm-on [data-play].is-live .ps-rec i { animation: ps-blink 1.2s steps(2, jump-none) infinite; }
@keyframes ps-blink { 50% { opacity: .2; } }
.ps-vt { position: absolute; z-index: 2; right: 12px; top: 12px; padding: 4px 8px; border-radius: 6px; background: rgba(20,4,15,.55);
  font: 600 11px/1 var(--text); color: #fff; font-variant-numeric: tabular-nums; }
.ps-wave { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 14px; height: 34px; display: flex; align-items: center; gap: 3px;
  padding: 0 10px; border-radius: 10px; background: rgba(20,4,15,.5); }
.ps-wave i { flex: 1; height: calc(var(--h) * 24px); min-height: 3px; border-radius: 2px; background: var(--ps-rose); transform-origin: 50% 50%; }
html.wm-on [data-play].is-live .ps-wave i { animation: ps-wave 1.1s ease-in-out calc(var(--k) * -.13s) infinite alternate; }
@keyframes ps-wave { from { transform: scaleY(.35); } to { transform: scaleY(1); } }
.ps-wave--sm { position: static; height: 26px; background: var(--ps-ink); }
.ps-wave--sm i { height: calc(var(--h) * 18px); }

/* ---------------------------------------------------------------- CatalyseAI app shell */
.ps-app { display: grid; grid-template-columns: 200px minmax(0, 1fr); height: 600px; }
.ps-side { display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; background: linear-gradient(180deg, #2c0a24, #1a0616); }
.ps-side__brand { display: flex; align-items: center; gap: 9px; padding: 2px 8px 18px; font: 600 15px/1 var(--display); color: #fff; }
.ps-tab { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px;
  font: 500 14px/1 var(--text); color: rgba(255,255,255,.74); transition: background-color .35s ease, color .35s ease; }
.ps-tab::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ps-rose);
  transform: scaleY(0); transition: transform .35s var(--ps-ease); }
.ps-tab.is-rest, .ps-demo.is-run .ps-tab.is-on { background: rgba(255,179,199,.14); color: #fff; }
.ps-tab.is-rest::before, .ps-demo.is-run .ps-tab.is-on::before { transform: none; }
.ps-demo.is-run .ps-tab.is-rest:not(.is-on) { background: transparent; color: rgba(255,255,255,.74); }
.ps-demo.is-run .ps-tab.is-rest:not(.is-on)::before { transform: scaleY(0); }
.ps-side__foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.06); }
.ps-side__foot small { font: 600 10px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--ps-rose); }
.ps-side__foot b { font: 600 13px/1.2 var(--text); color: #fff; }
.ps-main { position: relative; display: flex; flex-direction: column; min-width: 0; background: #fbf8f9; }
.ps-main__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 24px; background: #fff; border-bottom: 1px solid var(--ps-line); }
.ps-main__head .ps-h5 { margin-top: 3px; font: 600 16px/20px var(--text); color: var(--ps-ink); }
.ps-main .ps-stagebox { flex: 1; }

/* scene: build */
.ps-build { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 24px; height: 100%; }
.ps-build__l { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ps-brief { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1.5px dashed #f3a3ba; }
/* the brief types one line at a time: each line is a one-line element, so its end never shows before it is typed */
.ps-brief__t { display: flex; flex-direction: column; font: 400 14px/21px var(--text); color: var(--ps-ink); }
.ps-brief .ps-type { display: block; width: max-content; max-width: 100%; white-space: nowrap; }
.ps-pill { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 30px; padding: 0 14px; border-radius: 999px;
  background: var(--ps-btn); color: #fff; font: 600 12px/1 var(--text); }
.ps-outline { display: flex; flex-direction: column; gap: 7px; }
.ps-outline li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
  background: #fff; border: 1px solid var(--ps-line); font: 500 13px/18px var(--text); color: var(--ps-ink); }
.ps-outline li b { font: 700 12px/1 var(--text); color: var(--ps-link); }
.ps-outline li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-outline li em { font: 600 11px/1 var(--text); font-style: normal; color: var(--ps-deep); background: var(--ps-soft); padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
.ps-build .ps-phone { height: 100%; }
.ps-build .ps-phone__btn { margin-top: auto; }

/* scene: audience */
.ps-aud { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; height: 100%; }
.ps-aud__l { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ps-quotas { gap: 16px; justify-content: center; }
.ps-added { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 6px 10px; border-radius: 8px; background: var(--ps-soft);
  font: 600 12px/1 var(--text); color: var(--ps-deep); }

/* scene: video answers */
.ps-vid { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 22px; height: 100%; }
.ps-vid .ps-vtile { height: 100%; }
.ps-vcol { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.ps-vchecks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ps-vchecks li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--ps-line);
  font: 500 13px/1.2 var(--text); color: var(--ps-ink); }
.ps-meters { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--ps-line); }
.ps-transcript, .ps-fu { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 12px; font: 400 14px/21px var(--text); }
.ps-transcript { background: #fff; border: 1px solid var(--ps-line); color: var(--ps-tx); }
.ps-fu { background: var(--ps-ink); color: #fff; }
.ps-fu .ps-lab { color: var(--ps-rose); }

/* scene: results */
.ps-res { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; height: 100%; }
.ps-res__r { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ps-rc { gap: 14px; }
.ps-rc__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ps-views { display: inline-flex; gap: 2px; padding: 3px; border-radius: 8px; background: var(--ps-soft); }
.ps-views i { width: 26px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: var(--ps-mut); }
.ps-views i.is-sel { background: #fff; color: var(--ps-link); box-shadow: 0 1px 4px rgba(30,10,26,.12); }
.ps-hbars { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }
.ps-hbars .ps-bar { height: 14px; }
.ps-groups { display: flex; gap: 6px; margin-top: auto; }
.ps-groups span { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--ps-line); font: 600 12px/1 var(--text); color: var(--ps-tx); }
.ps-groups span.is-sel { background: var(--ps-soft); border-color: #f3a3ba; color: var(--ps-deep); }
.ps-sbar5 { display: flex; height: 26px; border-radius: 8px; overflow: hidden; }
.ps-sbar5 i { flex: var(--w) 0 0; transform-origin: 0 50%; }
.ps-sbar5 i:nth-child(1) { background: #ffd6e0; } .ps-sbar5 i:nth-child(2) { background: #f3a3ba; } .ps-sbar5 i:nth-child(3) { background: #e8466f; }
.ps-sbar5 i:nth-child(4) { background: #b4235a; } .ps-sbar5 i:nth-child(5) { background: #4a1238; }
.ps-legend { display: flex; justify-content: space-between; gap: 10px; font: 400 12px/16px var(--text); color: var(--ps-mut); }
.ps-legend b { color: var(--ps-ink); font-weight: 700; }
.ps-cloud { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; padding: 4px 0; }
.ps-cloud span { font-family: var(--display); font-weight: 500; line-height: 1.15; letter-spacing: -.3px; }
.ps-w1 { color: #b4235a; } .ps-w2 { color: #c42c5c; } .ps-w3 { color: #4a1238; } .ps-w4 { color: #6e6269; }
.ps-demo.is-run .ps-scene.is-on .ps-cloud span { animation: ps-scale .6s var(--ps-ease) var(--o, 0s) both; }

/* scene: Ask the study */
.ps-askd { display: flex; flex-direction: column; gap: 12px; max-width: 760px; height: 100%; }
.ps-askd .ps-bub--ai { max-width: 100%; }
.ps-mbars { display: flex; flex-direction: column; gap: 8px; }
.ps-mbars > div { display: grid; grid-template-columns: 120px minmax(0, 1fr) 44px; gap: 10px; align-items: center; font: 500 12px/1 var(--text); color: var(--ps-tx); }
.ps-mbars b { text-align: right; font: 700 13px/1 var(--text); color: var(--ps-ink); }

/* ---------------------------------------------------------------- other app windows */
.ps-topnav { display: flex; align-items: center; gap: 20px; height: 52px; padding: 0 20px; background: #fff; border-bottom: 1px solid var(--ps-line); }
.ps-topnav__t { font: 600 14px/1.2 var(--text); color: var(--ps-ink); white-space: nowrap; }
.ps-topnav__tabs { display: flex; gap: 4px; margin-left: 8px; }
.ps-topnav__tabs span { padding: 8px 12px; border-radius: 8px; font: 500 13px/1 var(--text); color: var(--ps-mut); }
.ps-topnav__tabs span.is-sel { background: var(--ps-soft); color: var(--ps-deep); font-weight: 600; }
.ps-topnav__btns { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ps-tbtn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--ps-line);
  font: 600 12px/1 var(--text); color: var(--ps-tx); white-space: nowrap; }
.ps-tbtn--p { background: var(--ps-btn); border-color: var(--ps-btn); color: #fff; }

/* ask */
.ps-app--ask { display: flex; flex-direction: column; height: 610px; }
.ps-askgrid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 250px; min-height: 0; background: #fbf8f9; }
.ps-chat { display: flex; flex-direction: column; gap: 10px; height: 100%; }
.ps-chat .ps-bub--ai { max-width: 100%; display: flex; flex-direction: column; gap: 10px; }
.ps-chat .ps-bub--ai > * + * { margin-top: 0; }
.ps-gbars { display: flex; flex-direction: column; gap: 8px; }
.ps-gbars__k { display: flex; gap: 14px; font: 600 11px/1 var(--text); color: var(--ps-mut); }
.ps-gbars__k span { display: inline-flex; align-items: center; gap: 6px; }
.ps-gbars__k span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: #f3a3ba; }
.ps-gbars__k span.is-hi::before { background: #d6335e; }
.ps-gbars__k i { font-style: normal; font-weight: 700; color: var(--ps-link); }
.ps-gb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 70px; gap: 10px; align-items: center; }
.ps-gb small { order: -1; font: 600 12px/1 var(--text); color: var(--ps-ink); }
.ps-gb { grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr); }
.ps-gb__p { display: grid; grid-template-columns: minmax(0, 1fr) 40px; gap: 6px; align-items: center; }
.ps-gb__p em { font: 700 12px/1 var(--text); font-style: normal; color: var(--ps-ink); font-variant-numeric: tabular-nums; }
.ps-gb__p em sup, .ps-gb--h em sup { font-size: 9px; color: var(--ps-link); margin-left: 1px; }
.ps-quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ps-quotes blockquote { font-size: 12px; line-height: 17px; }
.ps-chat .ps-input { margin-top: auto; }
.ps-chat .ps-input .ps-type { color: var(--ps-ink); }
.ps-saved { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; border-left: 1px solid var(--ps-line); background: #fff; }
.ps-saved ul { display: flex; flex-direction: column; gap: 6px; }
.ps-saved li { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ps-line); }
.ps-saved li.is-sel { background: var(--ps-soft); border-color: #f3a3ba; }
.ps-saved li b { font: 600 13px/1.2 var(--text); color: var(--ps-ink); }
.ps-saved li span { font: 400 12px/1.2 var(--text); color: var(--ps-mut); }
.ps-app--ask .ps-scene { padding: 18px 22px; }

/* reports */
.ps-app--rep { display: flex; flex-direction: column; height: 580px; }
.ps-repgrid { flex: 1; display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 0; background: #fbf8f9; }
.ps-rail { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; border-right: 1px solid var(--ps-line); background: #fff; }
.ps-rail li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--ps-mut); }
.ps-rail li span { display: flex; flex-direction: column; gap: 3px; font: 400 12px/1.25 var(--text); color: var(--ps-tx); min-width: 0; }
.ps-rail li b { font: 700 11px/1 var(--text); color: var(--ps-link); }
.ps-rail li.is-sel { background: var(--ps-soft); color: var(--ps-link); }
.ps-rep { height: 100%; gap: 14px; }
.ps-rep__view { position: relative; flex: 1; }
.ps-view { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.ps-view--c { flex-direction: row; align-items: center; justify-content: flex-start; gap: 36px; }
.ps-sb { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; align-items: center; font: 600 12px/1 var(--text); color: var(--ps-ink); }
.ps-sb__bar { display: flex; height: 30px; border-radius: 8px; overflow: hidden; }
.ps-sb__bar i { flex: var(--w) 0 0; }
.ps-sb__bar i:nth-child(1) { background: #ffd6e0; } .ps-sb__bar i:nth-child(2) { background: #f3a3ba; } .ps-sb__bar i:nth-child(3) { background: #e8466f; }
.ps-sb__bar i:nth-child(4) { background: #b4235a; } .ps-sb__bar i:nth-child(5) { background: #4a1238; }
.ps-donut { position: relative; width: 200px; height: 200px; flex: none; }
.ps-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ps-donut svg circle { transform: rotate(90deg); transform-origin: 50% 50%; }
.ps-donut > b { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; font: 500 34px/1 var(--display); color: var(--ps-ink); }
.ps-donut > b small { display: block; margin-top: 4px; font: 500 12px/1 var(--text); color: var(--ps-mut); }
.ps-dleg { display: flex; flex-direction: column; gap: 9px; }
.ps-dleg li { display: flex; align-items: center; gap: 9px; font: 400 13px/1 var(--text); color: var(--ps-tx); }
.ps-dleg li i { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.ps-dleg li b { margin-left: 4px; color: var(--ps-ink); }
.ps-pinned { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--ps-ink); color: #fff; font: 600 11px/1 var(--text); }
.ps-views--cycle .ps-vi--2 { background: #fff; color: var(--ps-link); box-shadow: 0 1px 4px rgba(30,10,26,.12); }
.ps-demo.is-run .ps-scene.is-on .ps-views--cycle .ps-vi { animation: ps-vsel 14.5s linear both; }
.ps-demo.is-run .ps-scene.is-on .ps-views--cycle .ps-vi--0 { animation-name: ps-vsel0; }
.ps-demo.is-run .ps-scene.is-on .ps-views--cycle .ps-vi--1 { animation-name: ps-vsel1; }
.ps-demo.is-run .ps-scene.is-on .ps-views--cycle .ps-vi--2 { animation-name: ps-vsel2; }
.ps-demo.is-run .ps-scene.is-on .ps-views--cycle .ps-vi--3 { animation: none; background: none; box-shadow: none; }
@keyframes ps-vsel0 { 0%, 25% { background: #fff; color: #b4235a; box-shadow: 0 1px 4px rgba(30,10,26,.12); } 26%, 100% { background: transparent; color: #6e6269; box-shadow: none; } }
@keyframes ps-vsel1 { 0%, 25% { background: transparent; color: #6e6269; box-shadow: none; } 26%, 48% { background: #fff; color: #b4235a; box-shadow: 0 1px 4px rgba(30,10,26,.12); } 49%, 100% { background: transparent; color: #6e6269; box-shadow: none; } }
@keyframes ps-vsel2 { 0%, 48% { background: transparent; color: #6e6269; box-shadow: none; } 49%, 100% { background: #fff; color: #b4235a; box-shadow: 0 1px 4px rgba(30,10,26,.12); } }
.ps-app--rep .ps-scene { padding: 20px 22px; }
.ps-menu { position: absolute; z-index: 3; right: 18px; top: 6px; width: 290px; padding: 8px; border-radius: 14px; background: #fff; border: 1px solid var(--ps-line);
  box-shadow: 0 24px 50px rgba(30,10,26,.22); display: flex; flex-direction: column; gap: 2px; }
.ps-menu li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font: 500 13px/1.2 var(--text); color: var(--ps-tx); }
.ps-menu li svg { color: var(--ps-link); flex: none; }
.ps-menu li.is-sel { background: var(--ps-soft); color: var(--ps-ink); font-weight: 600; }
.ps-app--rep .ps-toast { bottom: 24px; }

/* consultant */
.ps-app--con { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 540px; background: #fbf8f9; }
.ps-conchat { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-right: 1px solid var(--ps-line); min-width: 0; }
.ps-conchat .ps-bub { font-size: 13px; line-height: 18px; padding: 9px 12px; max-width: 92%; }
.ps-conchat__h { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font: 600 13px/1 var(--text); color: var(--ps-ink); }
.ps-conchat__h svg { color: var(--ps-link); }
.ps-conchat .ps-input { margin-top: auto; height: 38px; font-size: 12px; }
.ps-opts { display: flex; flex-wrap: wrap; gap: 5px; }
.ps-opts span { padding: 6px 9px; border-radius: 999px; border: 1px solid var(--ps-line); background: #fff; font: 600 11px/1 var(--text); color: var(--ps-tx); }
.ps-opts span.is-sel { border-color: var(--ps-btn); background: var(--ps-soft); color: var(--ps-deep); }
.ps-plancard { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; background: #fff; }
.ps-plancard__h { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; border-bottom: 1px solid var(--ps-line); }
.ps-plancard__h .ps-h6 { font: 600 15px/20px var(--text); color: var(--ps-ink); }
.ps-plancard ul { display: flex; flex-direction: column; }
.ps-plancard li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--ps-line); align-items: baseline; }
.ps-plancard li span { font: 500 12px/16px var(--text); color: var(--ps-mut); }
.ps-plancard li b { font: 600 13px/17px var(--text); color: var(--ps-ink); }
/* rows with a tick (fix 21 Oct 2026): label | value | tick on one line; the tick was a stray third grid item on its own row */
.ps-plancard li:has(> .ps-plancard__ok) { grid-template-columns: 112px minmax(0, 1fr) 20px; align-items: center; }
.ps-plancard__ok { grid-column: 3; grid-row: 1; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #ffe3ec; color: var(--ps-link); }
.ps-plancard__ok svg { display: block; }
.ps-confirm { align-self: flex-start; margin-top: 4px; display: inline-flex; align-items: center; height: 36px; padding: 0 20px; border-radius: 999px;
  background: var(--ps-btn); color: #fff; font: 600 13px/1 var(--text); box-shadow: 0 0 0 0 rgba(214,51,94,.4); }
html.wm-on [data-play].is-live .ps-confirm { animation: ps-ping2 2s ease-out 8.4s infinite; }
@keyframes ps-ping2 { 0% { box-shadow: 0 0 0 0 rgba(214,51,94,.45); } 100% { box-shadow: 0 0 0 12px rgba(214,51,94,0); } }
.ps-app--con .ps-toast { bottom: 14px; left: auto; right: 14px; transform: none; white-space: normal; max-width: 300px; }
.ps-demo.is-run .ps-scene.is-on .ps-app--con .ps-toast.ps-a { animation-name: ps-pop; }
.ps-demo--con .ps-scene, .ps-demo--pf .ps-scene, .ps-demo--se .ps-scene, .ps-demo--api .ps-scene { padding: 0; }
.ps-demo--con .ps-win__body, .ps-demo--pf .ps-win__body, .ps-demo--se .ps-win__body, .ps-demo--api .ps-win__body { position: relative; }
.ps-demo--con .ps-win__body { height: 540px; }
.ps-demo--pf .ps-win__body { height: 520px; }
.ps-demo--se .ps-win__body { height: 540px; }
.ps-demo--api .ps-win__body { height: 560px; }

/* pocketsfull ai */
.ps-app--pf { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 22px; height: 100%; padding: 22px; background: linear-gradient(160deg, #fdf1f4, #f7f2f4); }
.ps-phone--wall { gap: 10px; padding: 14px 12px; height: 100%; }
.ps-phone__top--wall { font-size: 13px; color: var(--ps-ink); }
.ps-phone__top--wall b { padding: 5px 9px; border-radius: 999px; background: #fcefdc; color: #6b3f12; font: 700 11px/1 var(--text); }
.ps-wtabs { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--ps-soft); }
.ps-wtabs span { flex: 1; text-align: center; padding: 7px; border-radius: 8px; font: 600 12px/1 var(--text); color: var(--ps-mut); }
.ps-wtabs span.is-sel { background: #fff; color: var(--ps-ink); }
.ps-offers { display: flex; flex-direction: column; gap: 8px; }
.ps-offers li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 10px; border-radius: 12px; border: 1px solid var(--ps-line); }
.ps-offers li b { display: block; font: 600 13px/1.2 var(--text); color: var(--ps-ink); }
.ps-offers li small { display: block; margin-top: 2px; font: 400 11px/1.3 var(--text); color: var(--ps-mut); }
.ps-oico { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #e8466f, #4a1238); }
.ps-oico--1 { background: linear-gradient(135deg, #f6c98e, #d9533f); }
.ps-oico--2 { background: linear-gradient(135deg, #ffb3c7, #b4235a); }
.ps-steps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; }
.ps-steps em { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 6px; background: var(--ps-soft); font: 600 10px/1 var(--text);
  font-style: normal; color: var(--ps-deep); }
.ps-steps em b { display: inline; font: 700 10px/1 var(--text); color: #6b3f12; }
.ps-steps em.is-done { background: #e4f3ec; color: var(--ps-ok); }
.ps-dash { gap: 14px; padding: 20px; align-self: start; }
.ps-dash__h .ps-h6 { margin-top: 4px; font: 600 16px/20px var(--text); color: var(--ps-ink); }
.ps-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ps-kpis div { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--ps-soft); }
.ps-kpis b { font: 500 24px/1 var(--display); color: var(--ps-ink); letter-spacing: -.5px; }
.ps-kpis span { font: 400 11px/1.2 var(--text); color: var(--ps-mut); }
.ps-frow { display: grid; grid-template-columns: 120px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font: 500 12px/1 var(--text); color: var(--ps-tx); }
.ps-frow b { text-align: right; color: var(--ps-ink); }
.ps-fun { display: flex; flex-direction: column; gap: 8px; }
.ps-fun__h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px dashed var(--ps-line);
  font: 600 13px/1 var(--text); color: var(--ps-ink); }
.ps-fun__h b { font: 500 20px/1 var(--display); letter-spacing: -.4px; color: var(--ps-ink); }
.ps-fbar { position: relative; height: 22px; border-radius: 6px; background: var(--ps-soft); overflow: hidden; }
.ps-fbar i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(var(--v)); background: linear-gradient(90deg, #b4235a, #e8466f); border-radius: 6px; }
.ps-abt { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--ps-line); }
.ps-icons { display: flex; gap: 8px; }
.ps-icons span { flex: 1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--ps-line); font: 500 12px/1 var(--text); color: var(--ps-tx); }
.ps-icons span b { margin-left: auto; color: var(--ps-ink); }
.ps-icons span.is-sel { border-color: var(--ps-btn); background: var(--ps-soft); }
.ps-icn { width: 22px; height: 22px; border-radius: 6px; flex: none; background: linear-gradient(135deg, #f6c98e, #e07a4a); }
.ps-icn--b { background: linear-gradient(135deg, #e8466f, #4a1238); }

/* sampleeye */
.ps-app--se { display: flex; flex-direction: column; height: 100%; }
.ps-segrid { flex: 1; display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 16px; padding: 18px; background: #fbf8f9; min-height: 0; }
.ps-outs ul { display: flex; flex-direction: column; gap: 12px; }
.ps-outs li { display: grid; grid-template-columns: 150px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font: 500 12px/1.2 var(--text); color: var(--ps-tx); }
.ps-outs li b { text-align: right; font: 700 13px/1 var(--text); color: var(--ps-ink); font-variant-numeric: tabular-nums; }
.ps-o--ok .ps-bar i { background: #2f7a5b; } .ps-o--se .ps-bar i { background: #b4235a; } .ps-o--cl .ps-bar i { background: #e8466f; }
.ps-o--q .ps-bar i { background: #e9a55a; } .ps-o--x .ps-bar i { background: #4a1238; } .ps-o--d .ps-bar i { background: #a1959b; }
.ps-o--all .ps-bar i { background: #f3a3ba; }
.ps-log table { width: 100%; font: 400 12px/1 var(--text); }
.ps-log th { padding: 0 8px 10px; text-align: left; font: 600 10px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--ps-mut); border-bottom: 1px solid var(--ps-line); }
.ps-log td { padding: 9px 8px; border-bottom: 1px solid #f3ecef; color: var(--ps-tx); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ps-log td:nth-child(2) { font-family: var(--ps-mono); color: var(--ps-ink); }
.ps-oc { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font: 600 11px/1 var(--text); white-space: nowrap; }
.ps-oc--ok { background: #e4f3ec; color: #1f5f45; } .ps-oc--se { background: #fbe3ea; color: #8e1a47; } .ps-oc--cl { background: #fde3ea; color: #a51f55; }
.ps-oc--q { background: #fcefdc; color: #6b3f12; } .ps-oc--x { background: #ecdde6; color: #4a1238; } .ps-oc--d { background: #f1e9ec; color: #554a51; }

/* api: code panels on a dark window */
.ps-app--api { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 18px; background: #1b0717; }
.ps-code { border-radius: 14px; background: #24091f; border: 1px solid rgba(255,179,199,.16); overflow: hidden; }
.ps-code__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid rgba(255,179,199,.12); }
.ps-code__h span { padding: 5px 10px; border-radius: 6px; background: rgba(255,179,199,.14); font: 600 12px/1 var(--text); color: #fff; }
.ps-code__h em { font: 400 12px/1 var(--text); font-style: normal; color: rgba(255,255,255,.7); }
.ps-code pre { margin: 0; padding: 12px 16px; font: 400 13px/20px var(--ps-mono); color: #f7f2f4; white-space: pre; }
.ps-ln { display: block; }
.ps-k { font-style: normal; color: #ffb3c7; } .ps-s { font-style: normal; color: #f6c98e; } .ps-n { font-style: normal; color: #9fe0c4; }
.ps-code__foot { margin-top: auto; display: flex; align-items: center; gap: 8px; font: 400 12px/1.4 var(--text); color: rgba(255,255,255,.75); }
.ps-code__foot svg { color: var(--ps-rose); flex: none; }

/* ---------------------------------------------------------------- stats + question types */
.ps-stats { padding-top: 24px; }
.ps-stats .wn-stat b { font-size: 56px; }
.ps-qtypes { overflow: hidden; padding-top: 32px; }
.ps-qtypes__h { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 28px; }
.ps-qtypes__h p { max-width: 560px; font: 400 17px/26px var(--text); color: var(--grey70); }
.ps-qtypes__rows { display: flex; flex-direction: column; gap: 14px; }
.ps-qmarq .wn-marquee__track { gap: 12px; }
.ps-qt { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px 0 16px; border-radius: 999px; background: #fff; border: 1px solid var(--ps-line);
  font: 600 16px/1 var(--text); color: var(--ps-ink); white-space: nowrap; box-shadow: 0 8px 20px rgba(30,10,26,.04); }
.ps-qt svg { color: var(--ps-link); }
.ps-rev .ps-qt { background: var(--ps-ink); border-color: var(--ps-ink); color: #fff; }
.ps-rev .ps-qt svg { color: var(--ps-rose); }
html.wm-on .ps-rev.is-looping .wn-marquee__track { animation-direction: reverse; }

/* ---------------------------------------------------------------- problem */
.ps-prob__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
.ps-prob__txt .wn-head { margin-bottom: 28px; }
.ps-prob--solo .ps-prob__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
.ps-prob--solo .wn-head { margin-bottom: 0; }
.ps-prob__big p { font: 400 24px/36px var(--text); color: var(--ps-ink); }
.ps-conv { display: grid; grid-template-columns: 190px 160px minmax(0, 1fr); height: 420px; align-items: center; }
.ps-conv__l { display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 21px 0; }
.ps-conv__l li { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border-radius: 12px; background: var(--wn-page); border: 1px solid var(--ps-line);
  font: 600 14px/1 var(--text); color: var(--ps-ink); }
.ps-conv__l li svg { color: var(--ps-link); }
html.wm-on .ps-conv.is-live .ps-conv__l li { animation: ps-bob 4s ease-in-out calc(var(--k) * -.8s) infinite alternate; }
@keyframes ps-bob { from { transform: translateX(0); } to { transform: translateX(6px); } }
.ps-conv__svg { width: 160px; height: 420px; display: block; }
.ps-conv__svg path { vector-effect: non-scaling-stroke; }
.ps-conv__r { display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: 24px; background: var(--wn-glass-bg); color: #fff;
  box-shadow: 0 30px 60px rgba(30,10,26,.3), 0 0 0 1px rgba(255,179,199,.3); }
.ps-conv__r b { margin-top: 8px; font: 500 22px/28px var(--display); }
.ps-conv__r small { font: 400 14px/20px var(--text); color: rgba(255,255,255,.75); }
.ps-conv__r ul { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.ps-conv__r li { display: flex; align-items: center; gap: 10px; font: 500 15px/1 var(--text); }
.ps-conv__r li svg { width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: var(--ps-rose); color: var(--ps-ink); box-sizing: border-box; }

/* ---------------------------------------------------------------- stack: from brief to decision */
.ps-stack-sec { background: var(--wn-page); }
.ps-stack { --wm-stack-top: 150px; gap: 48px; }
.ps-scard { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; min-height: 520px; padding: 48px;
  border-radius: 32px; background: #fff; border: 1px solid var(--ps-line); box-shadow: 0 30px 60px rgba(30,10,26,.08); overflow: hidden; }
.ps-scard--1 { background: var(--wn-glass-bg); border-color: rgba(255,179,199,.3); --wn-h: #fff; color: #fff; }
.ps-scard--2 { background: linear-gradient(160deg, #fdf1f4, #fbe3ea); border-color: transparent; }
.ps-scard__txt { display: flex; flex-direction: column; gap: 16px; }
.ps-scard__n { font: 500 72px/1 var(--display); letter-spacing: -2px; color: transparent; -webkit-text-stroke: 1.5px var(--ps-btn); }
.ps-scard--1 .ps-scard__n { -webkit-text-stroke-color: var(--ps-rose); }
.ps-scard__txt p { font: 400 18px/28px var(--text); color: var(--ps-tx); }
.ps-scard--1 .ps-scard__txt p { color: rgba(255,255,255,.84); }
.ps-scard__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.ps-scard__chips li { padding: 8px 14px; border-radius: 999px; background: var(--ps-soft); font: 600 13px/1 var(--text); color: var(--ps-deep); }
.ps-scard--1 .ps-scard__chips li { background: rgba(255,179,199,.14); color: #fff; }
.ps-scard--2 .ps-scard__chips li { background: #fff; }
.ps-scard__vis { position: relative; min-width: 0; }
.ps-sv { display: flex; flex-direction: column; gap: 14px; color: var(--ps-ink); }
.ps-drop { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px; border-radius: 16px; border: 1.5px dashed #f3a3ba; background: var(--ps-soft); }
.ps-drop p { font: 400 15px/22px var(--text); color: var(--ps-tx); }
.ps-fmt { display: flex; gap: 8px; }
.ps-fmt span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 8px; background: #fff; font: 600 12px/1 var(--text); color: var(--ps-deep); }
.ps-outline--st li { padding: 12px 14px; font-size: 14px; }
.ps-sv__foot { display: flex; align-items: center; gap: 8px; font: 500 14px/1.3 var(--text); color: var(--ps-deep); }
.ps-sv--aud { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ps-card--wide { grid-column: 1 / -1; }
.ps-sv--aud .ps-card, .ps-sv--arr .ps-card { color: var(--ps-ink); }
.ps-sv--prev { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; align-items: center; }
.ps-phone--lg { min-height: 440px; }
.ps-phone--lg .ps-phone__btn { margin-top: auto; }
.ps-sv__side { display: flex; flex-direction: column; gap: 18px; }
.ps-submit { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; height: 48px; padding: 0 24px; border-radius: 999px; background: var(--ps-ink); color: #fff; font: 600 16px/1 var(--text); }
.ps-sent { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--ps-line); font: 500 15px/1.35 var(--text); color: var(--ps-ink); }
.ps-sent svg { color: var(--ps-link); flex: none; }
html.wm-on .ps-scard__vis.is-live .ps-sent { animation: ps-sendloop 5s var(--ps-ease) infinite; }
@keyframes ps-sendloop { 0%, 18% { opacity: 0; transform: translateY(10px); } 30%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.ps-sv--arr { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ps-card--kpi { gap: 6px; }
.ps-card--kpi > span { font: 600 12px/1 var(--text); letter-spacing: .05em; text-transform: uppercase; color: var(--ps-link); }
.ps-card--kpi b { font: 500 52px/1 var(--display); letter-spacing: -1.5px; color: var(--ps-ink); }
.ps-card--kpi small { font: 400 14px/1 var(--text); color: var(--ps-mut); }
.ps-bar--big { height: 12px; margin-top: 8px; }
.ps-sv--read .ps-card { padding: 22px; gap: 14px; }
.ps-sv__files { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-sv__files span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--ps-line);
  font: 600 13px/1 var(--text); color: var(--ps-ink); }
.ps-sv__files svg { color: var(--ps-link); }
.ps-share { display: flex; align-items: center; gap: 10px; font: 500 14px/1.3 var(--text); color: var(--ps-deep); }

/* ---------------------------------------------------------------- agents on a sideways track */
.ps-agents { position: relative; background: var(--wn-hero-bg); color: #fff; }
.ps-agents .wm-h__sticky { position: relative; padding: 140px 0 96px; }
html.wm-on .ps-agents .wm-h__sticky { padding: 120px 0 40px; justify-content: center; gap: 0; }
.ps-agents__glow { position: absolute; z-index: 0; left: 50%; top: 30%; width: 900px; height: 600px; margin-left: -450px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232,70,111,.35), rgba(232,70,111,0)); }
.ps-agents__h { position: relative; z-index: 1; }
.ps-agents__h .wn-head { margin-bottom: 36px; max-width: 1120px; }
.ps-agents__h .wn-sub { max-width: 760px; }
.ps-agents__track { position: relative; z-index: 1; padding: 0 7vw; gap: 20px; }
.ps-agent { position: relative; flex: 0 0 340px; display: flex; flex-direction: column; gap: 14px; min-height: 390px; padding: 26px; border-radius: 26px;
  background: rgba(26,6,22,.62); border: 1px solid rgba(255,179,199,.24); backdrop-filter: blur(8px); }
.ps-agent:nth-child(3n+2) { background: linear-gradient(170deg, rgba(232,70,111,.32), rgba(26,6,22,.7)); }
.ps-agent__top { display: flex; align-items: center; gap: 12px; }
.ps-agent__ico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,179,199,.16); color: var(--ps-rose); }
.ps-agent__role { font: 600 13px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--ps-rose); }
.ps-agent__k { margin-left: auto; font: 500 15px/1 var(--display); color: rgba(255,255,255,.72); }
.ps-agent h3 { margin-top: auto; font: 500 26px/32px var(--display); letter-spacing: -.4px; color: #fff; }
.ps-agent p { font: 400 15px/23px var(--text); color: rgba(255,255,255,.82); }
.ps-ag { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 8px; min-height: 120px; padding: 14px; border-radius: 16px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,179,199,.14); }
.ps-ag .ps-bub { font-size: 12px; line-height: 17px; padding: 8px 11px; }
.ps-ag .ps-bub--me { background: #fff; color: var(--ps-ink); }
.ps-ag .ps-bub--ai { background: var(--ps-btn); color: #fff; border: 0; }
.ps-ag .ps-meter, .ps-ag .ps-th { color: #fff; }
.ps-ag .ps-meter b, .ps-ag .ps-th b { color: #fff; }
.ps-ag .ps-bar { background: rgba(255,255,255,.12); }
.ps-ag .ps-bar i { background: linear-gradient(90deg, #d6335e, #ffb3c7); }
.ps-ag .ps-meter { grid-template-columns: 74px minmax(0, 1fr) 34px; font-size: 12px; }
.ps-ag--doc { flex-direction: row; align-items: center; justify-content: space-between; }
.ps-docf { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--ps-rose); }
.ps-docf b { font: 600 11px/1 var(--ps-mono); color: #fff; }
.ps-docarr { color: var(--ps-rose); }
html.wm-on .ps-agent.is-live .ps-docarr { animation: ps-nudge 1.6s ease-in-out infinite; }
@keyframes ps-nudge { 50% { transform: translateX(6px); } }
.ps-doclines { display: flex; flex-direction: column; gap: 6px; width: 120px; }
.ps-doclines i { height: 18px; border-radius: 6px; background: rgba(255,255,255,.14); transform-origin: 0 50%; }
.ps-doclines i:nth-child(2n) { width: 80%; }
html.wm-on .ps-agent.is-live .ps-doclines i { animation: ps-lines 3.2s var(--ps-ease) infinite; }
.ps-doclines i:nth-child(2) { animation-delay: .2s !important; } .ps-doclines i:nth-child(3) { animation-delay: .4s !important; } .ps-doclines i:nth-child(4) { animation-delay: .6s !important; }
@keyframes ps-lines { 0% { transform: scaleX(0); opacity: 0; } 25%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.ps-th { display: grid; grid-template-columns: minmax(0, 1fr) 70px 34px; gap: 8px; align-items: center; font: 500 12px/1.2 var(--text); }
.ps-th b { text-align: right; }
.ps-ag .ps-senti { position: relative; display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #e8466f 0, #e8466f calc((1 - var(--p)) * 100%), #9fe0c4 calc((1 - var(--p)) * 100%), #9fe0c4 100%); padding: 0; border: 0; }
.ps-ag--ask .ps-check { color: #9fe0c4; }
.ps-ag--report { align-items: center; }
.ps-page { position: relative; display: flex; flex-direction: column; gap: 5px; width: 140px; padding: 12px; border-radius: 8px; background: #fff; }
.ps-page b { height: 10px; width: 70%; border-radius: 3px; background: var(--ps-ink); }
.ps-page i { height: 5px; border-radius: 3px; background: #e8dfe3; }
.ps-page i.s { width: 60%; }
.ps-page em { height: 26px; border-radius: 4px; background: linear-gradient(90deg, #d6335e 0 46%, #f3a3ba 46% 77%, #ffd6e0 77%); }
.ps-ag--report small { font: 600 11px/1 var(--ps-mono); color: rgba(255,255,255,.75); }
.ps-ag--plan { gap: 6px; }
.ps-prow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; background: rgba(255,255,255,.08); }
.ps-prow i { width: 8px; height: 8px; border-radius: 50%; background: var(--ps-rose); }
.ps-prow b { font: 600 12px/1 var(--text); color: #fff; }

/* ---------------------------------------------------------------- video pipeline */
.ps-video { overflow: hidden; }
.ps-video__glow { position: absolute; right: -10%; top: 0; width: 760px; height: 760px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232,70,111,.32), rgba(232,70,111,0)); }
.ps-vp { position: relative; margin: 8px 0 64px; }
.ps-vp__line { position: absolute; left: calc(100% / 14); right: calc(100% / 14); top: 0; height: 80px; pointer-events: none; }
.ps-vp__svg { width: 100%; height: 80px; display: block; overflow: visible; }
.ps-vp__svg path { vector-effect: non-scaling-stroke; }
.ps-vp__list { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 16px; }
.ps-vp__list li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.ps-vp__dot { width: 64px; height: 64px; margin-top: 8px; border-radius: 50%; display: grid; place-items: center; background: #24091f; color: var(--ps-rose);
  border: 1.5px solid rgba(255,179,199,.5); box-shadow: 0 0 0 8px rgba(51,16,44,1), 0 0 30px rgba(232,70,111,.35); }
.ps-vp__list li:nth-child(even) .ps-vp__dot { margin-top: 8px; }
.ps-vp__list h3 { margin-top: 6px; font: 600 18px/24px var(--text); color: #fff; }
.ps-vp__list p { font: 400 14px/21px var(--text); color: rgba(255,255,255,.78); }
.ps-video__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: stretch; }
.ps-vcard { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 0; height: 100%; border-radius: 24px; overflow: hidden; background: #fff; color: var(--ps-ink); }
.ps-vtile--lg { border-radius: 0; min-height: 340px; }
.ps-vcard__b { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.ps-quote { font: 500 16px/24px var(--display); color: var(--ps-ink); }
.ps-vcard .ps-meter { grid-template-columns: 112px minmax(0, 1fr) 36px; }
.ps-fu2 { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--ps-ink); color: #fff; font: 400 13px/19px var(--text); }
.ps-fu2 .ps-lab { color: var(--ps-rose); }
.ps-csv { display: flex; flex-direction: column; gap: 14px; height: 100%; padding: 22px; border-radius: 24px; background: #1b0717; border: 1px solid rgba(255,179,199,.2); }
.ps-csv .ps-lab { color: var(--ps-rose); text-transform: none; letter-spacing: 0; font-family: var(--ps-mono); font-size: 13px; }
.ps-csv table { width: 100%; font: 400 13px/1.35 var(--text); }
.ps-csv th { padding: 0 10px 10px; text-align: left; font: 600 11px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.65);
  border-bottom: 1px solid rgba(255,179,199,.2); }
.ps-csv td { padding: 12px 10px; color: rgba(255,255,255,.88); border-bottom: 1px solid rgba(255,179,199,.1); vertical-align: top; }
.ps-csv td b { color: #f6c98e; font-weight: 700; }
.ps-csv td:nth-child(3) { max-width: 260px; }
.ps-play { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,179,199,.16); color: var(--ps-rose); }
.ps-csv__f { margin-top: auto; display: flex; align-items: center; gap: 8px; font: 500 14px/1.3 var(--text); color: var(--ps-rose); }

/* ---------------------------------------------------------------- bento */
.ps-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 20px; }
/* row heights come from the small tiles; a 2x2 tile spans two of them; the wide closing tile sizes to its drawing */
.ps-tile--w1 .ps-tile__in { min-height: 330px; }
.ps-tile--w2.ps-tile--h1 .ps-tile__in { min-height: 300px; }
.ps-tile { position: relative; min-width: 0; }
.ps-tile--w2 { grid-column: span 2; } .ps-tile--w4 { grid-column: span 4; } .ps-tile--h2 { grid-row: span 2; }
.ps-tile__in { height: 100%; display: flex; flex-direction: column; gap: 20px; padding: 22px; border-radius: 26px; background: #fff; border: 1px solid var(--ps-line);
  transition: transform .45s var(--ps-ease), box-shadow .45s var(--ps-ease), border-color .3s ease; }
.ps-tile__in:hover { transform: translateY(-6px); box-shadow: var(--wn-shadow); border-color: #f6c9d6; }
.ps-tile__vis { position: relative; flex: 1 1 auto; min-height: 150px; display: grid; place-items: center; padding: 16px; border-radius: 18px; background: var(--ps-soft); overflow: hidden; }
.ps-tile__txt h3 { font: 600 19px/26px var(--text); letter-spacing: -.2px; color: var(--ps-ink); }
.ps-tile__txt p { margin-top: 6px; font: 400 15px/23px var(--text); color: var(--grey70); }
.ps-tile--w2.ps-tile--h1 .ps-tile__in, .ps-tile--w4 .ps-tile__in { flex-direction: row; align-items: stretch; }
.ps-tile--w2.ps-tile--h1 .ps-tile__txt { flex: 0 0 42%; align-self: center; padding: 0 4px; }
.ps-tile--w4 .ps-tile__txt { flex: 0 0 30%; align-self: center; padding: 0 12px; }
.ps-tile--w2.ps-tile--h1 .ps-tile__vis, .ps-tile--w4 .ps-tile__vis { order: 2; }
.ps-tile--w4 .ps-tile__in { min-height: 220px; }
.ps-tile--dark .ps-tile__in { background: var(--wn-glass-bg); border-color: rgba(255,179,199,.3); }
.ps-tile--dark .ps-tile__txt h3 { color: #fff; font-size: 24px; line-height: 30px; font-family: var(--display); font-weight: 500; }
.ps-tile--dark .ps-tile__txt p { color: rgba(255,255,255,.8); font-size: 16px; line-height: 25px; }
.ps-tile--dark .ps-tile__vis { background: rgba(255,255,255,.06); border: 1px solid rgba(255,179,199,.16); }
.ps-m { width: 100%; font: 400 13px/1.3 var(--text); color: var(--ps-ink); }

/* minis */
.ps-m-outline { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.ps-m-outline__h { display: flex; align-items: center; justify-content: space-between; font: 600 12px/1 var(--text); color: #fff; }
.ps-switch { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--text); color: rgba(255,255,255,.85); }
.ps-switch i { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--ps-btn); }
.ps-switch i::after { content: ""; position: absolute; top: 2px; left: 14px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
html.wm-on [data-play].is-live .ps-switch i::after { animation: ps-toggle 4s ease-in-out infinite; }
@keyframes ps-toggle { 0%, 40% { transform: translateX(-12px); } 50%, 90% { transform: none; } }
.ps-m-outline ol { display: flex; flex-direction: column; gap: 8px; }
.ps-m-outline li { display: grid; grid-template-columns: 16px 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 11px 12px; border-radius: 12px; background: #fff;
  font: 500 14px/1.3 var(--text); color: var(--ps-ink); }
.ps-m-outline li i { color: #c9b8c0; display: grid; }
.ps-m-outline li b { font: 700 12px/1 var(--text); color: var(--ps-link); }
.ps-m-outline li span { min-width: 0; }
.ps-m-outline li small { display: block; margin-top: 2px; font: 400 12px/1.3 var(--text); color: var(--ps-mut); }
.ps-m-outline li em { font: 600 11px/1 var(--text); font-style: normal; color: var(--ps-deep); background: var(--ps-soft); padding: 5px 8px; border-radius: 999px; white-space: nowrap; }
.ps-m-outline li.is-drag { box-shadow: 0 14px 30px rgba(0,0,0,.35); }
html.wm-on [data-play].is-live .ps-m-outline li.is-drag { animation: ps-drag 4.5s ease-in-out infinite; }
@keyframes ps-drag { 0%, 15% { transform: none; } 35%, 60% { transform: translate(8px, 4px) rotate(-1.2deg) scale(1.02); } 80%, 100% { transform: none; } }
.ps-m-outline__add { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed rgba(255,179,199,.45); }
.ps-m-outline__add b { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; font: 600 13px/1 var(--text); color: #fff; }
.ps-m-outline__add span { display: inline-flex; align-items: center; gap: 5px; padding: 6px 9px; border-radius: 999px; background: rgba(255,255,255,.1);
  font: 500 12px/1 var(--text); color: rgba(255,255,255,.9); }
.ps-m-outline__add svg { color: var(--ps-rose); }
.ps-saved-note { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--text); color: #9fe0c4; }
/* sized to sit inside a one-column tile (review 21 Oct 2026: the fanned chips were cut at the tile edge) */
.ps-m-tpl { display: flex; align-items: center; justify-content: center; gap: 18px; }
.ps-m-tpl > b { font: 500 52px/1 var(--display); letter-spacing: -1.5px; color: var(--ps-link); }
.ps-fan { position: relative; flex: none; width: 92px; height: 110px; }
.ps-fan span { position: absolute; left: 0; right: 0; top: 30px; padding: 12px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--ps-line);
  box-shadow: 0 8px 18px rgba(30,10,26,.1); font: 600 12px/1 var(--text); color: var(--ps-deep); text-align: center;
  transform: rotate(calc((var(--k) - 1.5) * 4deg)) translateY(calc(var(--k) * -6px)); transform-origin: 50% 120%; }
html.wm-on [data-play].is-live .ps-fan span { animation: ps-fan 5s ease-in-out infinite; }
@keyframes ps-fan { 0%, 100% { transform: rotate(0) translateY(calc(var(--k) * -6px)); } 40%, 70% { transform: rotate(calc((var(--k) - 1.5) * 5deg)) translateY(calc(var(--k) * -6px)); } }
.ps-m-rec { display: flex; flex-direction: column; gap: 10px; }
.ps-cam { height: 150px; }
.ps-cam .ps-sil { width: 40%; }
.ps-m-checks { display: flex; flex-direction: column; gap: 8px; }
.ps-m-checks li { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 10px; background: #fff; font: 500 13px/1 var(--text); color: var(--ps-ink); }
.ps-m-checks li b { margin-left: auto; color: var(--ps-ok); }
html.wm-on [data-play].is-live .ps-m-checks li > span { animation: ps-tickloop 4.5s var(--ps-ease) calc(var(--k) * .35s) infinite; }
@keyframes ps-tickloop { 0% { transform: scale(0); } 12%, 90% { transform: none; } 100% { transform: scale(0); } }
.ps-m-checks li > span { background: #e4f3ec; color: var(--ps-ok); }
.ps-m-quotas { display: flex; flex-direction: column; gap: 12px; }
.ps-m-quotas .ps-qrow { grid-template-columns: 90px minmax(0, 1fr) 70px; }
html.wm-on [data-play].is-live .ps-bar--loop i { animation: ps-fill 5s var(--ps-ease) calc(var(--k) * .2s) infinite; }
@keyframes ps-fill { 0% { transform: scaleX(0); } 45%, 90% { transform: scaleX(var(--v)); } 100% { transform: scaleX(var(--v)); } }
.ps-m-cols { display: flex; align-items: flex-end; justify-content: center; gap: 12px; height: 130px; }
.ps-m-cols > span { position: relative; width: 26px; height: 100%; display: flex; align-items: flex-end; }
.ps-m-cols > span i { display: block; width: 100%; height: 100%; border-radius: 6px 6px 3px 3px; background: #f3a3ba; transform-origin: 50% 100%; transform: scaleY(var(--v)); }
.ps-m-cols > span i.is-hi { background: linear-gradient(180deg, #e8466f, #b4235a); }
.ps-m-cols--sm { height: 100px; }
html.wm-on [data-play].is-live .ps-m-cols.is-in > span i { animation: ps-breath 4s ease-in-out calc(var(--k) * -.6s) infinite alternate; }
@keyframes ps-breath { from { transform: scaleY(var(--v)); } to { transform: scaleY(calc(var(--v) * .78)); } }
.ps-m-chat { display: flex; flex-direction: column; gap: 8px; }
.ps-m-chat .ps-bub { font-size: 12px; line-height: 17px; padding: 9px 11px; max-width: 92%; }
.ps-dots { display: flex; gap: 4px; padding: 8px 12px; align-self: flex-start; border-radius: 12px; background: #fff; }
.ps-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ps-link); }
html.wm-on [data-play].is-live .ps-dots i { animation: ps-dot 1.2s ease-in-out infinite; }
.ps-dots i:nth-child(2) { animation-delay: .15s !important; } .ps-dots i:nth-child(3) { animation-delay: .3s !important; }
@keyframes ps-dot { 0%, 60%, 100% { transform: none; opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.ps-m-files { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ps-m-files li { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; border-radius: 16px; background: #fff; text-align: center; }
.ps-m-files b { font: 600 14px/1 var(--text); color: var(--ps-ink); }
.ps-m-files small { font: 400 12px/1.2 var(--text); color: var(--ps-mut); }
.ps-fico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: #b4235a; }
.ps-fico--1 { background: #2f7a5b; } .ps-fico--2 { background: #4a1238; } .ps-fico--3 { background: #e07a4a; } .ps-fico--4 { background: #d6335e; } .ps-fico--5 { background: #1e0a1a; }
html.wm-on [data-play].is-live .ps-fico { animation: ps-hop 3.6s ease-in-out infinite; }
.ps-m-files li:nth-child(2) .ps-fico { animation-delay: .3s !important; } .ps-m-files li:nth-child(3) .ps-fico { animation-delay: .6s !important; }
.ps-m-files li:nth-child(4) .ps-fico { animation-delay: .9s !important; } .ps-m-files li:nth-child(5) .ps-fico { animation-delay: 1.2s !important; }
.ps-m-files li:nth-child(6) .ps-fico { animation-delay: 1.5s !important; }
@keyframes ps-hop { 0%, 20%, 100% { transform: none; } 10% { transform: translateY(-8px); } }
.ps-m-group { display: flex; flex-direction: column; gap: 16px; max-width: 500px; }
.ps-m-group__r { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px; align-items: center; }
.ps-m-group__r .ps-bub { font-size: 13px; line-height: 18px; max-width: 100%; justify-self: end; background: rgba(255,255,255,.12); border: 1px solid rgba(255,179,199,.25); }
.ps-m-group__f { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.3 var(--text); color: #9fe0c4; }
.ps-gdef { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 14px; background: #fff; }
html.wm-on [data-play].is-live .ps-m-group__r .ps-gdef { animation: ps-lift 4s ease-in-out calc(var(--k) * -1.3s) infinite alternate; }
.ps-gdef b { font: 600 15px/1.3 var(--text); color: var(--ps-ink); }
.ps-gdef span { font: 400 13px/1.3 var(--text); color: var(--ps-mut); }
.ps-gdef em { align-self: flex-start; font: 700 13px/1 var(--text); font-style: normal; color: #fff; background: var(--ps-btn); padding: 7px 11px; border-radius: 999px; }
.ps-tile--dark .ps-gdef .ps-lab { color: var(--ps-link); }
.ps-m-xtab table { width: 100%; font: 500 13px/1 var(--text); background: #fff; border-radius: 12px; overflow: hidden; }
.ps-m-xtab th, .ps-m-xtab td { padding: 9px 8px; text-align: left; border-bottom: 1px solid #f3ecef; }
.ps-m-xtab th { font-weight: 600; color: var(--ps-mut); font-size: 12px; }
.ps-m-xtab th i { font-style: normal; color: var(--ps-link); }
.ps-m-xtab td { color: var(--ps-ink); font-variant-numeric: tabular-nums; }
.ps-m-xtab sup { color: var(--ps-link); font-weight: 700; }
.ps-m-xtab p { margin-top: 8px; font: 400 11px/1.3 var(--text); color: var(--ps-mut); }
.ps-m-views { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ps-m-views__i { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: #fff; }
.ps-m-views__i i { width: 32px; height: 30px; display: grid; place-items: center; border-radius: 7px; color: var(--ps-mut); }
html.wm-on [data-play].is-live .ps-m-views__i i { animation: ps-vcycle 6s steps(1, end) calc(var(--k) * 1.2s - 6s) infinite; }
@keyframes ps-vcycle { 0% { background: var(--ps-ink); color: #fff; } 20%, 100% { background: transparent; color: var(--ps-mut); } }
.ps-m-quotes { display: flex; flex-direction: column; gap: 8px; }
.ps-m-quotes blockquote { display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #fff; font: italic 400 13px/1.35 var(--text); color: var(--ps-tx);
  box-shadow: 0 6px 14px rgba(30,10,26,.06); }
.ps-m-quotes blockquote svg { color: var(--ps-btn); flex: none; }
html.wm-on [data-play].is-live .ps-m-quotes blockquote { animation: ps-floaty 5s ease-in-out calc(var(--k) * -2.5s) infinite alternate; }
@keyframes ps-floaty { from { transform: translateX(0); } to { transform: translateX(8px); } }
.ps-m-field { display: flex; flex-direction: column; gap: 10px; }
.ps-m-field .ps-m-cols > span { flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.ps-m-field .ps-m-cols > span i { height: 74px; }
.ps-m-field .ps-m-cols > span small { font: 500 10px/1 var(--text); color: var(--ps-mut); white-space: nowrap; }
.ps-m-field p { display: flex; justify-content: center; gap: 14px; font: 500 12px/1 var(--text); color: var(--ps-tx); }
.ps-m-field p b { color: var(--ps-ink); }
.ps-m-36 { display: flex; align-items: center; justify-content: center; gap: 16px; }
.ps-m-36__g { display: grid; grid-template-columns: repeat(6, 14px); gap: 4px; }
.ps-m-36__g i { width: 14px; height: 14px; border-radius: 4px; background: #f3a3ba; opacity: .45; }
html.wm-on [data-play].is-live .ps-m-36__g i { animation: ps-cell 3.6s ease-in-out calc(var(--k) * .06s) infinite; }
@keyframes ps-cell { 0%, 100% { opacity: .35; background: #f3a3ba; } 30% { opacity: 1; background: #d6335e; } }
.ps-m-36 > b { font: 500 56px/1 var(--display); letter-spacing: -2px; color: var(--ps-link); }
.ps-m-g5w { display: flex; flex-direction: column; gap: 14px; height: 100%; justify-content: center; }
.ps-m-g5w__q { font: 600 13px/1.3 var(--text); color: var(--ps-ink); text-align: center; }
.ps-m-g5w__k { font: 400 11px/1.35 var(--text); color: var(--ps-mut); text-align: center; }
.ps-m-g5 { --h: 200px; display: flex; align-items: flex-end; justify-content: center; gap: 10px; height: calc(var(--h) + 50px); }
.ps-m-g5 > span { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; width: 34px; height: 100%; }
.ps-m-g5 > span i { display: block; width: 100%; height: var(--h); border-radius: 6px 6px 3px 3px; background: #f3a3ba; transform-origin: 50% 100%; transform: scaleY(var(--v)); }
.ps-m-g5 > span i.is-hi { background: linear-gradient(180deg, #e8466f, #b4235a); }
.ps-m-g5 > span b { position: absolute; left: -6px; right: -6px; bottom: calc(var(--v) * var(--h) + 24px); text-align: center; font: 700 11px/1 var(--text); color: var(--ps-ink); white-space: nowrap; }
.ps-m-g5 > span b sup { font-size: 8px; color: var(--ps-link); margin-left: 1px; }
.ps-m-g5 small { font: 700 12px/1 var(--text); color: var(--ps-ink); }
.ps-m-wt { display: flex; flex-direction: column; gap: 10px; }
.ps-m-wt > p { display: flex; gap: 12px; font: 500 11px/1 var(--text); color: var(--ps-mut); }
.ps-m-wt > p span { display: inline-flex; align-items: center; gap: 6px; }
.ps-k1::before, .ps-k2::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: #f3a3ba; }
.ps-k2::before { background: #d6335e; }
.ps-wrow { grid-template-columns: 56px minmax(0, 1fr); font-size: 12px; }
.ps-bar--wt i { transform: scaleX(var(--v2)); background: #d6335e; }
/* top half: as answered (pale, still); bottom half: weighted (the loop morphs it from one to the other) */
.ps-bar--wt { height: 14px; background: linear-gradient(90deg, #f3a3ba 0 calc(var(--v, 0) * 100%), transparent 0) 0 0 / 100% 50% no-repeat, var(--ps-soft2); }
.ps-bar--wt i { top: 50%; }
html.wm-on [data-play].is-live .ps-bar--wt i { animation: ps-weigh 4.5s ease-in-out calc(var(--k) * .15s) infinite; }
@keyframes ps-weigh { 0%, 20% { transform: scaleX(var(--v)); background: #f3a3ba; } 50%, 90% { transform: scaleX(var(--v2)); background: #d6335e; } 100% { transform: scaleX(var(--v)); background: #f3a3ba; } }
.ps-m-cloud { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 12px; }
.ps-m-cloud span { font-family: var(--display); font-weight: 500; line-height: 1.15; }
html.wm-on [data-play].is-live .ps-m-cloud span { animation: ps-glow 4s ease-in-out calc(var(--k) * .5s) infinite; }
@keyframes ps-glow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.ps-m-heat { display: grid; place-items: center; }
.ps-poster { position: relative; width: 150px; height: 150px; border-radius: 10px; background: linear-gradient(160deg, #4a1238, #1e0a1a); overflow: hidden; }
.ps-poster__t { position: absolute; left: 14px; top: 16px; width: 70px; height: 10px; border-radius: 3px; background: #ffb3c7; }
.ps-poster__p { position: absolute; right: 16px; bottom: 16px; width: 60px; height: 70px; border-radius: 8px; background: linear-gradient(160deg, #f6c98e, #e8466f); }
.ps-poster > i { position: absolute; left: var(--x); top: var(--y); width: 60px; height: 60px; margin: -30px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,92,92,.9), rgba(246,201,142,.5) 55%, rgba(246,201,142,0)); transform: scale(var(--s)); }
html.wm-on [data-play].is-live .ps-poster > i { animation: ps-pulse 3s ease-in-out infinite alternate; }
@keyframes ps-pulse { from { opacity: .7; } to { opacity: 1; } }
.ps-area { position: absolute; left: 14%; top: 12%; width: 40%; height: 34%; border: 2px dashed #fff; border-radius: 6px; }
.ps-area em { position: absolute; left: 0; top: -24px; padding: 3px 7px; border-radius: 5px; background: #fff; color: var(--ps-ink); font: 700 10px/1 var(--text); font-style: normal; white-space: nowrap; }
.ps-m-ov { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ps-m-ov > div { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; background: #fff; }
.ps-m-ov b { font: 500 26px/1 var(--display); color: var(--ps-ink); letter-spacing: -.5px; }
.ps-m-ov span { font: 400 12px/1.2 var(--text); color: var(--ps-mut); }
.ps-m-ov__mix { grid-column: 1 / -1; }
.ps-m-ov__mix i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #d6335e calc(var(--a) * 100%), #fbe3ea 0); margin-bottom: 4px; }
.ps-m-method { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }
.ps-m-method .ps-bub { font-size: 14px; line-height: 20px; }
.ps-m-method .ps-bub--me { background: rgba(255,255,255,.12); border: 1px solid rgba(255,179,199,.25); }
.ps-m-method .ps-bub--ai { background: var(--ps-btn); color: #fff; border: 0; }
.ps-mcard { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 14px; background: #fff; }
.ps-mcard b { font: 500 24px/1.2 var(--display); color: var(--ps-ink); }
.ps-mcard ul { display: flex; flex-direction: column; gap: 6px; }
.ps-mcard li { display: flex; align-items: center; gap: 8px; font: 500 13px/1.3 var(--text); color: var(--ps-tx); }
.ps-mcard li svg { flex: none; width: 18px; height: 18px; padding: 4px; border-radius: 50%; background: #e4f3ec; color: var(--ps-ok); box-sizing: border-box; }
html.wm-on [data-play].is-live .ps-mcard { animation: ps-lift 4s ease-in-out infinite alternate; }
@keyframes ps-lift { from { transform: none; } to { transform: translateY(-6px); box-shadow: 0 16px 28px rgba(0,0,0,.25); } }
.ps-m-def { display: flex; flex-direction: column; gap: 8px; }
.ps-m-def li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; border-radius: 12px; background: #fff; }
.ps-m-def li span { font: 500 11px/1.2 var(--text); color: var(--ps-mut); }
.ps-m-def li b { grid-row: 2; font: 600 14px/1.2 var(--text); color: var(--ps-ink); }
.ps-m-def li em { grid-row: 1 / span 2; grid-column: 2; align-self: center; font: 700 10px/1 var(--text); font-style: normal; color: var(--ps-ok); background: #e4f3ec; padding: 5px 7px; border-radius: 999px; }
.ps-m-core { position: relative; height: 140px; width: 100%; }
.ps-m-core > div { position: absolute; left: calc(var(--k) * 18px); right: calc((2 - var(--k)) * 18px); top: calc(var(--k) * 34px); padding: 10px 12px; border-radius: 12px;
  background: #fff; box-shadow: 0 8px 18px rgba(30,10,26,.1); }
.ps-m-core small { font: 600 10px/1 var(--text); color: var(--ps-link); letter-spacing: .05em; text-transform: uppercase; }
.ps-m-core p { margin-top: 4px; font: 500 13px/1.3 var(--text); color: var(--ps-ink); }
.ps-m-core > div:not(:last-child) p { visibility: hidden; }
.ps-m-sync { position: relative; height: 150px; }
.ps-node { position: absolute; display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border-radius: 999px; background: #fff; font: 600 12px/1 var(--text);
  color: var(--ps-ink); box-shadow: 0 6px 14px rgba(30,10,26,.1); white-space: nowrap; }
.ps-node svg { color: var(--ps-link); }
.ps-node--0 { left: 50%; top: 4px; transform: translateX(-50%); } .ps-node--1 { left: 0; bottom: 8px; } .ps-node--2 { right: 0; bottom: 8px; }
.ps-m-sync__ring { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -50px 0 0 -55px; border-radius: 50%; border: 2px dashed #f3a3ba; }
html.wm-on [data-play].is-live .ps-m-sync__ring { animation: ps-spin 10s linear infinite; }
@keyframes ps-spin { to { transform: rotate(360deg); } }
html.wm-on [data-play].is-live .ps-node { animation: ps-nodehi 4.5s steps(1, end) infinite; }
.ps-node--1 { animation-delay: 1.5s !important; } .ps-node--2 { animation-delay: 3s !important; }
@keyframes ps-nodehi { 0% { background: var(--ps-ink); color: #fff; } 33%, 100% { background: #fff; color: var(--ps-ink); } }
.ps-m-warn { display: flex; flex-direction: column; gap: 12px; }
.ps-q5 { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px; background: #fff; }
.ps-q5 span { margin-right: auto; font: 600 12px/1 var(--text); color: var(--ps-ink); }
.ps-q5 i { width: 22px; height: 22px; border-radius: 6px; background: #f3a3ba; }
.ps-q5 i.is-x { background: transparent; border: 2px dashed #d6335e; }
.ps-warn { display: flex; gap: 8px; padding: 12px; border-radius: 12px; background: #fcefdc; font: 500 13px/1.35 var(--text); color: #6b3f12; }
.ps-warn svg { flex: none; color: #b4235a; }
html.wm-on [data-play].is-live .ps-warn { animation: ps-shake 4s ease-in-out infinite; }
@keyframes ps-shake { 0%, 80%, 100% { transform: none; } 84% { transform: translateX(-4px); } 88% { transform: translateX(4px); } 92% { transform: translateX(-2px); } }
.ps-m-offer { display: flex; flex-direction: column; gap: 14px; max-width: 440px; }
.ps-m-offer__h { display: flex; align-items: center; gap: 12px; }
.ps-m-offer__h b { display: block; font: 600 16px/1.2 var(--text); color: #fff; }
.ps-m-offer__h small { display: block; margin-top: 3px; font: 400 12px/1.2 var(--text); color: rgba(255,255,255,.75); }
.ps-lad { position: relative; display: flex; flex-direction: column; gap: 10px; }
.ps-lad::before { content: ""; position: absolute; left: 21px; top: 20px; bottom: 20px; width: 2px; background: repeating-linear-gradient(180deg, #ffb3c7 0 6px, transparent 6px 11px); }
.ps-lad li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 14px 8px 0; }
.ps-lad__i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #2c0a24; border: 1.5px solid rgba(255,179,199,.45); color: var(--ps-rose); z-index: 1; }
.ps-lad li.is-done .ps-lad__i { background: #e4f3ec; border-color: #e4f3ec; color: var(--ps-ok); }
.ps-lad li.is-now .ps-lad__i { background: var(--ps-btn); border-color: var(--ps-btn); color: #fff; box-shadow: 0 0 0 6px rgba(214,51,94,.25); }
.ps-lad li > div b { display: block; font: 600 15px/1.25 var(--text); color: #fff; }
.ps-lad li > div small { display: inline-block; margin-top: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(255,179,199,.18); font: 600 11px/1.2 var(--text); color: var(--ps-rose); }
.ps-lad li em { font: 700 12px/1 var(--text); font-style: normal; color: #6b3f12; background: #fcefdc; padding: 6px 9px; border-radius: 999px; white-space: nowrap; }
.ps-lad li.is-next { opacity: .8; }
html.wm-on [data-play].is-live .ps-lad li.is-now .ps-lad__i { animation: ps-ping2 2.2s ease-out infinite; }
.ps-m-wall { display: flex; flex-direction: column; gap: 8px; }
.ps-m-wall li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; background: #fff; }
.ps-m-wall .ps-oico { width: 32px; height: 32px; grid-row: 1 / span 2; }
.ps-m-wall b { font: 600 13px/1.2 var(--text); color: var(--ps-ink); }
.ps-m-wall small { grid-column: 2; font: 400 11px/1.2 var(--text); color: var(--ps-mut); }
.ps-m-wall em { grid-row: 1 / span 2; grid-column: 3; font: 700 11px/1 var(--text); font-style: normal; color: #6b3f12; background: #fcefdc; padding: 6px 9px; border-radius: 999px; }
.ps-m-dev { display: flex; align-items: flex-end; justify-content: center; gap: 16px; }
.ps-dv { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ps-dv i { display: block; border: 3px solid var(--ps-ink); background: linear-gradient(160deg, #ffb3c7, #e8466f); }
.ps-dv--ph i { width: 46px; height: 86px; border-radius: 10px; }
.ps-dv--web i { width: 120px; height: 78px; border-radius: 8px; border-top-width: 12px; }
.ps-dv small { font: 600 12px/1 var(--text); color: var(--ps-ink); }
html.wm-on [data-play].is-live .ps-dv { animation: ps-bob2 3s ease-in-out infinite alternate; }
.ps-dv:nth-child(2) { animation-delay: .5s !important; } .ps-dv:nth-child(3) { animation-delay: 1s !important; }
@keyframes ps-bob2 { to { transform: translateY(-6px); } }
.ps-m-dash { display: flex; flex-direction: column; gap: 8px; }
.ps-m-dash svg { width: 100%; height: 90px; display: block; padding: 8px; border-radius: 12px; background: #fff; }
.ps-m-dash svg path { vector-effect: non-scaling-stroke; }
.ps-m-dash p { display: flex; gap: 14px; font: 500 12px/1 var(--text); color: var(--ps-tx); }
.ps-m-dash p span { display: inline-flex; align-items: center; gap: 6px; }
.ps-m-shield { display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: center; gap: 28px; }
.ps-m-shield__flow { display: flex; align-items: center; justify-content: center; gap: 14px; }
.ps-m-shield__log { display: flex; flex-direction: column; gap: 6px; }
.ps-m-shield__log li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 12px; border-radius: 10px; background: #fff;
  font: 500 13px/1.25 var(--text); color: var(--ps-tx); }
.ps-m-shield__log code { font: 500 12px/1 var(--ps-mono); color: var(--ps-ink); }
.ps-m-shield__log em { font: 700 11px/1 var(--text); font-style: normal; padding: 5px 9px; border-radius: 999px; background: #e4f3ec; color: #1f5f45; white-space: nowrap; }
.ps-m-shield__log li.is-bad em { background: #fbe3ea; color: #8e1a47; }
.ps-m-shield__log li.is-bad span { color: var(--ps-ink); }
.ps-flow { position: relative; width: 150px; height: 60px; overflow: hidden; }
.ps-flow i { position: absolute; top: calc(10px + mod(var(--k) * 7px, 40px)); left: calc(var(--k) * 15px); width: 10px; height: 10px; border-radius: 50%; background: #2f7a5b; }
.ps-flow i.is-bad { background: #d6335e; }
html.wm-on [data-play].is-live .ps-flow i { left: 0; animation: ps-flowx 3.2s linear calc(var(--k) * -.36s) infinite; }
html.wm-on [data-play].is-live .ps-flow i.is-bad { animation-name: ps-flowbad; }
@keyframes ps-flowx { from { transform: translateX(-12px); } to { transform: translateX(160px); } }
@keyframes ps-flowbad { 0% { transform: translateX(-12px); opacity: 1; } 70% { transform: translateX(104px); opacity: 1; } 80%, 100% { transform: translateX(110px) translateY(30px); opacity: 0; } }
.ps-gate { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--ps-ink); color: var(--ps-rose); }
.ps-m-proj { display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.ps-m-proj__h { display: flex; align-items: center; justify-content: space-between; font: 600 14px/1 var(--text); color: #fff; }
.ps-m-proj__h .ps-go { display: inline-flex; align-items: center; gap: 6px; }
.ps-m-proj ul { display: flex; flex-direction: column; gap: 8px; }
.ps-m-proj li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 64px 52px; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: #fff; }
.ps-m-proj li b { display: block; font: 600 13px/1.25 var(--text); color: var(--ps-ink); }
.ps-m-proj li small { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font: 400 11px/1.2 var(--text); color: var(--ps-mut); }
.ps-m-proj li em { font: 600 12px/1 var(--text); font-style: normal; color: var(--ps-ink); text-align: right; font-variant-numeric: tabular-nums; }
.ps-st { justify-self: end; padding: 4px 8px; border-radius: 999px; font: 700 10px/1 var(--text); }
.ps-st--live { background: #e4f3ec; color: #1f5f45; } .ps-st--draft { background: #f1e9ec; color: #554a51; }
.ps-m-launch { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ps-url { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: #fff; font: 400 12px/1 var(--ps-mono); color: var(--ps-ink); }
.ps-url em { font-style: normal; }
.ps-go { padding: 9px 16px; border-radius: 999px; background: var(--ps-btn); color: #fff; font: 600 12px/1 var(--text); }
html.wm-on [data-play].is-live .ps-go { animation: ps-ping2 2s ease-out infinite; }
.ps-m-api { display: flex; align-items: center; justify-content: center; gap: 0; }
.ps-apibox { display: grid; place-items: center; min-width: 54px; height: 54px; padding: 0 12px; border-radius: 14px; background: #fff; color: var(--ps-link); font: 700 12px/1 var(--text); }
.ps-apibox--se { background: var(--ps-ink); color: #fff; }
.ps-apiline { position: relative; width: 70px; height: 24px; }
.ps-apiline i { position: absolute; left: 0; right: 0; height: 2px; background: #d6335e; }
.ps-apiline i:first-child { top: 6px; } .ps-apiline i:last-child { bottom: 6px; background: #f3a3ba; }
.ps-apiline i::after { content: ""; position: absolute; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: inherit; }
html.wm-on [data-play].is-live .ps-apiline i:first-child::after { animation: ps-travel 1.8s linear infinite; }
html.wm-on [data-play].is-live .ps-apiline i:last-child::after { animation: ps-travel 1.8s linear infinite reverse; }
@keyframes ps-travel { from { left: 0; } to { left: calc(100% - 8px); } }
.ps-m-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ps-m-split > div { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: #fff; }
.ps-m-split > div:last-child { background: var(--ps-ink); }
.ps-m-split small { font: 700 11px/1 var(--text); letter-spacing: .05em; text-transform: uppercase; color: var(--ps-link); }
.ps-m-split > div:last-child small { color: var(--ps-rose); }
.ps-m-split b { font: 500 36px/1 var(--display); color: var(--ps-ink); letter-spacing: -1px; }
.ps-m-split > div:last-child b { color: #fff; }
.ps-m-split span { font: 400 12px/1 var(--text); color: var(--ps-mut); }
.ps-m-split > div:last-child span { color: rgba(255,255,255,.75); }
.ps-m-limit { display: flex; flex-direction: column; gap: 14px; max-width: 640px; margin: 0 auto; }
.ps-clock { color: var(--ps-link); display: grid; }
.ps-lim__h { display: flex; align-items: center; gap: 10px; }
.ps-lim__h b { font: 600 15px/1 var(--text); color: var(--ps-ink); }
.ps-lim__h small { font: 500 12px/1 var(--text); color: var(--ps-mut); }
.ps-lim__h small::before { content: "·"; margin-right: 8px; }
.ps-lim__bar { position: relative; display: flex; gap: 4px; height: 44px; padding: 5px; border-radius: 14px; background: #fff; border: 1px solid var(--ps-line); }
.ps-lim__bar > i { flex: 0 0 18%; border-radius: 9px; background: linear-gradient(135deg, #e8466f, #b4235a); transform-origin: 0 50%; }
.ps-lim__bar > i.ps-lim__web { background: linear-gradient(135deg, #f6c98e, #e07a4a); }
.ps-lim__free { flex: 1; border-radius: 9px; background: repeating-linear-gradient(135deg, #fdf1f4 0 8px, #fbe3ea 8px 16px); }
.ps-lim__cap { position: absolute; right: -2px; top: -26px; bottom: -6px; display: flex; align-items: flex-start; padding-right: 8px; border-right: 2px dashed var(--ps-btn);
  font: 700 11px/1 var(--text); color: var(--ps-link); white-space: nowrap; }
.ps-lim__k { display: flex; gap: 16px; font: 500 12px/1 var(--text); color: var(--ps-tx); }
.ps-lim__k span { display: inline-flex; align-items: center; gap: 6px; }
.ps-lim__k span::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: #d6335e; }
.ps-lim__k .ps-lim__web::before { background: #e07a4a; }
.ps-lim__k .ps-lim__cap2 { margin-left: auto; color: var(--ps-link); font-weight: 700; }
.ps-lim__k .ps-lim__cap2::before { width: 0; height: 14px; border-radius: 0; background: none; border-left: 2px dashed var(--ps-btn); }
html.wm-on [data-play].is-live .ps-lim__bar > i { animation: ps-limin 6s var(--ps-ease) calc(var(--k) * .5s) infinite; }
@keyframes ps-limin { 0%, 4% { transform: scaleX(0); opacity: 0; } 14%, 92% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
.ps-m-flow { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: nowrap; }
.ps-fbox { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 54px; padding: 8px 14px; border-radius: 14px; background: #fff;
  font: 600 13px/1.25 var(--text); color: var(--ps-ink); box-shadow: 0 6px 14px rgba(30,10,26,.06); }
.ps-fbox--se { background: var(--ps-ink); color: #fff; }
.ps-farrow { position: relative; flex: 0 0 44px; height: 2px; background: #d6335e; }
.ps-farrow::after { content: ""; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid #d6335e; border-right: 0; }
.ps-farrow--back { background: #b4235a; }
.ps-farrow i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #e8466f; }
html.wm-on [data-play].is-live .ps-farrow i { animation: ps-travel 1.6s linear infinite; }
/* vertical flow inside a half-width tile (Sell & Buy API) */
.ps-m-flow--v { flex-direction: column; gap: 0; max-width: 260px; margin: 0 auto; }
.ps-m-flow--v .ps-fbox { width: 100%; min-height: 0; padding: 10px 14px; font-size: 13px; }
.ps-m-flow--v .ps-fbox--se { width: auto; padding: 10px 22px; }
.ps-m-flow--v .ps-farrow { flex: 0 0 26px; width: 2px; height: 26px; }
.ps-m-flow--v .ps-farrow::after { right: auto; left: -4px; top: auto; bottom: -1px; border: 5px solid transparent; border-top: 7px solid #d6335e; border-bottom: 0; }
.ps-m-flow--v .ps-farrow--back::after { border-top-color: #b4235a; }
.ps-m-flow--v .ps-farrow i { top: 0; left: -3px; }
html.wm-on [data-play].is-live .ps-m-flow--v .ps-farrow i { animation: ps-travely 1.6s linear infinite; }
@keyframes ps-travely { from { top: 0; } to { top: calc(100% - 8px); } }
/* two copies of one outcome list, matched (Sell & Buy API) */
.ps-m-match { display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); gap: 14px; align-items: stretch; max-width: 760px; margin: 0 auto; }
.ps-mt2 { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--ps-line); }
.ps-mt2--dark { background: var(--ps-ink); border-color: var(--ps-ink); }
.ps-mt2--dark .ps-lab { color: var(--ps-rose); }
.ps-mt2 ul { display: flex; flex-direction: column; gap: 6px; }
.ps-mt2 li { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 30px; }
.ps-mt2 code { font: 500 12px/1 var(--ps-mono); color: var(--ps-ink); }
.ps-mt2--dark code { color: #fff; }
.ps-mt2__mid { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; padding-bottom: 14px; }
.ps-mt2__mid i { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #e4f3ec; color: var(--ps-ok); }
.ps-mt2__mid b { margin-top: 4px; font: 700 12px/1.2 var(--text); color: #1f5f45; text-align: center; }
html.wm-on [data-play].is-live .ps-mt2__mid i { animation: ps-tickloop 5s var(--ps-ease) calc(var(--k) * .3s) infinite; }
/* the big Reports tile: one card, three of its views */
.ps-m-cv { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 16px; background: #fff; color: var(--ps-ink); max-width: 560px; }
.ps-m-cv__h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ps-m-cv .ps-h6 { font: 600 15px/20px var(--text); color: var(--ps-ink); }
.ps-m-cv .ps-m-views__i { background: var(--ps-soft); }
.ps-cv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ps-cv__v { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; border: 1px solid var(--ps-line); }
.ps-cv__v.is-pin { border-color: var(--ps-btn); background: var(--ps-soft); }
.ps-cv__vis { height: 116px; display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.ps-cv__hb { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 6px; align-items: center; }
.ps-cv__hb small { font: 600 10px/1 var(--text); color: var(--ps-mut); }
.ps-cv__hb .ps-bar { height: 9px; }
.ps-cv__donut { position: relative; align-self: center; width: 96px; height: 96px; border-radius: 50%;
  background: conic-gradient(#4a1238 0 23%, #b4235a 23% 62%, #e8466f 62% 83%, #f3a3ba 83% 94%, #ffd6e0 94% 100%); }
.ps-cv__donut::after { content: ""; position: absolute; inset: 20px; border-radius: 50%; background: #fff; }
.ps-cv__donut b { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font: 500 18px/1 var(--display); color: var(--ps-ink); }
.ps-cv__tab { gap: 0; }
.ps-cv__tab span { display: flex; justify-content: space-between; gap: 6px; padding: 7px 2px; border-bottom: 1px solid #f3ecef; font: 500 11px/1.2 var(--text); color: var(--ps-tx); }
.ps-cv__tab em { font-style: normal; }
.ps-cv__tab b { color: var(--ps-ink); font-variant-numeric: tabular-nums; }
.ps-cv__v p { display: flex; align-items: center; justify-content: space-between; gap: 6px; font: 600 12px/1 var(--text); color: var(--ps-ink); }
.ps-cv__v p span { padding: 4px 7px; border-radius: 999px; background: var(--ps-ink); color: #fff; font-size: 10px; }
.ps-m-cv__f { font: 400 11px/1.3 var(--text); color: var(--ps-mut); }

/* ---------------------------------------------------------------- methods (CatalyseAI) */
.ps-methods__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; align-items: start; }
.ps-m1 { position: sticky; top: 150px; display: flex; flex-direction: column; gap: 16px; padding: 36px; border-radius: 30px; background: var(--wn-glass-bg); color: #fff;
  --wn-h: #fff; box-shadow: 0 30px 60px rgba(30,10,26,.25); }
.ps-m1__k { align-self: flex-start; padding: 7px 12px; border-radius: 999px; background: rgba(255,179,199,.16); font: 600 12px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--ps-rose); }
.ps-m1__rules { display: flex; flex-direction: column; }
.ps-m1__rules > li { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; row-gap: 8px; padding: 14px 0; border-top: 1px solid rgba(255,179,199,.18); align-items: baseline; }
.ps-m1__rules > li > b { font: 500 30px/1 var(--display); letter-spacing: -.8px; color: var(--ps-rose); }
.ps-m1__rules > li > span { font: 400 15px/22px var(--text); color: rgba(255,255,255,.88); }
.ps-m1__sc, .ps-m1__vd { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.ps-m1__sc span { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.1); font: 600 12px/1 var(--text); color: #fff; }
.ps-m1__vd li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.1); font: 600 12px/1 var(--text); color: #fff; }
.ps-vd { width: 8px; height: 8px; border-radius: 50%; background: #9fe0c4; }
.ps-vd--1 { background: #f6c98e; } .ps-vd--2 { background: #ffb3c7; } .ps-vd--3 { background: #a1959b; }
.ps-m1 .tlink { color: var(--ps-rose); align-self: flex-start; }
.ps-m1 .tlink:hover { color: #fff; }
.ps-mth { display: flex; flex-direction: column; }
.ps-mth li a { display: grid; grid-template-columns: 64px minmax(0, 1fr) 28px; align-items: center; gap: 20px; padding: 22px 8px; border-bottom: 1px solid var(--ps-line);
  transition: background-color .3s ease, padding .35s var(--ps-ease); }
.ps-mth li:first-child a { border-top: 1px solid var(--ps-line); }
.ps-mth li a:hover { background: var(--ps-soft); padding-left: 18px; }
.ps-mth__n { font: 500 34px/1 var(--display); letter-spacing: -1px; color: #d6335e; }
.ps-mth__t b { display: block; font: 500 22px/28px var(--display); letter-spacing: -.3px; color: var(--ps-ink); }
.ps-mth__t small { display: block; margin-top: 4px; font: 400 15px/22px var(--text); color: var(--grey70); }
.ps-mth__go { color: var(--ps-link); transition: transform .35s var(--ps-ease); }
.ps-mth li a:hover .ps-mth__go { transform: translateX(6px); }

/* ---------------------------------------------------------------- example */
.ps-ex__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.ps-ex__txt .wn-head { margin-bottom: 24px; }
.ps-exrep { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; }
.ps-exrep .ps-card { padding: 22px; gap: 14px; }
.ps-exrep__r { display: flex; flex-direction: column; gap: 16px; }
.ps-gb--h { grid-template-columns: 1fr; gap: 5px; }
.ps-gb--h small { order: 0; font-size: 13px; }
.ps-gb--h .ps-gb__p { grid-template-columns: minmax(0, 1fr) 52px; }
.ps-cloud--st { padding: 6px 0; }

/* ---------------------------------------------------------------- Ask the study: problem, pin, receipt, example */
.ps-nextq { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 36px; border-radius: 30px; background: var(--wn-page); }
.ps-nextq .ps-bub { font-size: 16px; line-height: 23px; padding: 14px 18px; max-width: 80%; }
.ps-nextq .ps-bub:nth-child(odd) { margin-left: 0; margin-right: auto; align-self: flex-start; border-bottom-right-radius: 16px; border-bottom-left-radius: 5px; background: #fff; color: var(--ps-ink); border: 1px solid var(--ps-line); }
html.wm-on .ps-nextq.is-live .ps-bub { animation: ps-floaty 6s ease-in-out calc(var(--k) * -1.5s) infinite alternate; }
.ps-nextq__k { position: absolute; right: 28px; bottom: -18px; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: var(--ps-btn); color: #fff; font: 600 15px/1 var(--text);
  box-shadow: 0 16px 30px rgba(214,51,94,.35); }
.ps-pin { background: var(--ps-wine); background: var(--wn-hero-bg); color: #fff; --wn-h: #fff; --wn-k: var(--mint); }
.ps-pin .wm-pin__sticky { display: flex; align-items: center; }
html:not(.wm-on) .ps-pin { padding: 112px 0; }
.ps-pin__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; width: 100%; padding-top: 110px; padding-bottom: 30px; }
.ps-pin__txt { display: flex; flex-direction: column; gap: 22px; }
.ps-pin__txt .wn-h2 { font-size: 42px; line-height: 50px; }
.ps-pin__steps { display: flex; flex-direction: column; gap: 4px; }
.ps-pin__steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 12px 14px; border-radius: 16px; transition: background-color .4s ease, opacity .4s ease; }
.ps-pin__n { font: 500 18px/24px var(--display); color: var(--ps-rose); }
.ps-pin__steps h3 { font: 600 17px/24px var(--text); color: #fff; }
.ps-pin__steps p { display: none; margin-top: 4px; font: 400 14px/21px var(--text); color: rgba(255,255,255,.8); }
html:not(.wm-on) .ps-pin__steps p { display: block; }
html.wm-on .ps-pin__steps li { opacity: .55; }
html.wm-on .ps-pin[data-active="0"] .ps-pin__steps li:nth-child(1), html.wm-on .ps-pin[data-active="1"] .ps-pin__steps li:nth-child(2),
html.wm-on .ps-pin[data-active="2"] .ps-pin__steps li:nth-child(3), html.wm-on .ps-pin[data-active="3"] .ps-pin__steps li:nth-child(4),
html.wm-on .ps-pin[data-active="4"] .ps-pin__steps li:nth-child(5) { opacity: 1; background: rgba(255,179,199,.12); }
html.wm-on .ps-pin[data-active="0"] .ps-pin__steps li:nth-child(1) p, html.wm-on .ps-pin[data-active="1"] .ps-pin__steps li:nth-child(2) p,
html.wm-on .ps-pin[data-active="2"] .ps-pin__steps li:nth-child(3) p, html.wm-on .ps-pin[data-active="3"] .ps-pin__steps li:nth-child(4) p,
html.wm-on .ps-pin[data-active="4"] .ps-pin__steps li:nth-child(5) p { display: block; }
.ps-chatwin { border-radius: 24px; background: #fbf8f9; color: var(--ps-ink); overflow: hidden; box-shadow: 0 40px 80px rgba(10,2,8,.5), 0 0 0 1px rgba(255,179,199,.3); }
.ps-chatwin__h { display: flex; align-items: center; gap: 8px; padding: 14px 20px; background: #fff; border-bottom: 1px solid var(--ps-line); font: 600 14px/1 var(--text); color: var(--ps-ink); }
.ps-chatwin__h svg { color: var(--ps-link); }
.ps-chatwin .wm-pin__layers { padding: 22px; min-height: 470px; }
.ps-chatwin__h em { margin-left: auto; font: 500 12px/1 var(--text); font-style: normal; color: var(--ps-mut); }
.ps-chatwin__in { display: flex; align-items: center; gap: 10px; margin: 0 22px 20px; height: 46px; padding: 0 8px 0 18px; border-radius: 999px;
  background: #fff; border: 1px solid var(--ps-line); font: 400 14px/1 var(--text); color: var(--ps-mut); }
.ps-chatwin__in span { flex: 1; }
.ps-chatwin__in i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ps-btn); color: #fff; }
html.wm-on .ps-chatwin .wm-pin__layers { min-height: 430px; }
.ps-pin__layer { display: flex; flex-direction: column; gap: 14px; }
html:not(.wm-on) .ps-pin__layer + .ps-pin__layer { margin-top: 28px; padding-top: 28px; border-top: 1px dashed var(--ps-line); }
.ps-pin__layer .ps-bub { font-size: 15px; line-height: 22px; }
.ps-pin__layer .ps-bub--ai { max-width: 100%; display: flex; flex-direction: column; gap: 12px; }
.ps-pin__layer .ps-bub--ai > * + * { margin-top: 0; }
.ps-hint { font: 400 14px/1.4 var(--text); color: var(--ps-mut); }
.ps-plan--lg li { font-size: 15px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--ps-line); }
html.wm-on .ps-pin [data-step].is-active .ps-plan--lg li { animation: ps-froml .6s var(--ps-ease) both; }
html.wm-on .ps-pin [data-step].is-active .ps-plan--lg li:nth-child(2) { animation-delay: .12s; }
html.wm-on .ps-pin [data-step].is-active .ps-plan--lg li:nth-child(3) { animation-delay: .24s; }
html.wm-on .ps-pin [data-step].is-active .ps-plan--lg li:nth-child(4) { animation-delay: .36s; }
.ps-engine { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--ps-line); }
.ps-engine__k { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1.3 var(--text); color: var(--ps-link); }
.ps-engine table { width: 100%; font: 500 15px/1 var(--text); }
.ps-engine th, .ps-engine td { padding: 11px 10px; text-align: left; border-bottom: 1px solid #f3ecef; }
.ps-engine th { font-weight: 600; color: var(--ps-mut); font-size: 13px; }
.ps-engine th i { font-style: normal; color: var(--ps-link); }
.ps-engine td { color: var(--ps-ink); font-variant-numeric: tabular-nums; }
.ps-engine sup { color: var(--ps-link); font-weight: 700; }
.ps-engine .ps-base th, .ps-engine .ps-base td { color: var(--ps-mut); font-size: 13px; border-bottom: 0; }
.ps-engine p { font: 400 13px/1.4 var(--text); color: var(--ps-mut); }
.ps-gbars--st .ps-gb { grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr); }
.ps-who { display: flex; flex-direction: column; gap: 8px; }
.ps-who li { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--ps-line); }
.ps-who b { font: 600 14px/1.2 var(--text); color: var(--ps-ink); }
.ps-who span { font: 400 13px/1.2 var(--text); color: var(--ps-mut); }
.ps-rcpt__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: center; }
.ps-rcpt__grid .wn-head { margin-bottom: 36px; }
.ps-rcpt__list { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 36px; }
.ps-rcpt__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
.ps-rcpt__i { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--ps-soft); color: var(--ps-link); }
.ps-rcpt__list b { font: 600 18px/25px var(--text); color: var(--ps-ink); }
.ps-rcpt__list p { margin-top: 4px; font: 400 15px/23px var(--text); color: var(--grey70); }
/* the receipt's torn edge comes from its mask; the wrapper's drop-shadows follow that edge, so it shows on white */
.ps-rcpt__wrap { filter: drop-shadow(0 0 1px rgba(30,10,26,.32)) drop-shadow(0 22px 30px rgba(30,10,26,.16)); }
.ps-rcpt { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 30px 28px 34px; background: #fff; border-radius: 18px 18px 0 0;
  -webkit-mask: radial-gradient(10px at 50% 100%, transparent 98%, #000) 50% 100% / 20px 100% repeat-x;
  mask: radial-gradient(10px at 50% 100%, transparent 98%, #000) 50% 100% / 20px 100% repeat-x; }
.ps-rcpt__q { font: 500 20px/28px var(--display); color: var(--ps-ink); padding-bottom: 14px; border-bottom: 1px dashed var(--ps-line); }
.ps-rcpt__rows { display: flex; flex-direction: column; gap: 12px; }
.ps-rcpt__rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; font: 500 14px/1.3 var(--text); color: var(--ps-tx); }
.ps-rcpt__rows b { font: 700 15px/1.3 var(--ps-mono); color: var(--ps-ink); text-align: right; }
.ps-rcpt__rows em { grid-column: 1 / -1; font: 400 12px/1.3 var(--text); font-style: normal; color: var(--ps-ok); }
.ps-rcpt__ok { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: #e4f3ec; font: 700 14px/1 var(--text); color: #1f5f45; }
.ps-rcpt__f { font: 400 12px/1 var(--ps-mono); color: var(--ps-mut); text-align: center; }
.ps-askex { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ps-askex__c { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--ps-line); box-shadow: 0 10px 24px rgba(30,10,26,.05); }
.ps-askex__c .ps-bub { max-width: 100%; font-size: 13px; line-height: 19px; }
.ps-askex__c > p:last-child { font: 600 13px/1.3 var(--text); color: var(--ps-ink); }
.ps-mini2 { display: flex; align-items: flex-end; justify-content: space-around; gap: 10px; height: 110px; }
.ps-mini2 > span { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; height: 100%; }
.ps-mini2 > span i { display: block; width: 70%; max-width: 46px; height: 80px; border-radius: 6px 6px 3px 3px; background: #f3a3ba; transform-origin: 50% 100%; transform: scaleY(var(--v)); }
.ps-mini2 > span i.is-hi { background: linear-gradient(180deg, #e8466f, #b4235a); }
.ps-mini2 small { font: 500 11px/1.2 var(--text); color: var(--ps-mut); text-align: center; }
.ps-mini2 em { position: absolute; top: 0; font: 700 11px/1 var(--text); font-style: normal; color: var(--ps-ink); }
.ps-mini2--5 > span i { height: 70px; }
/* the value sits just above its own bar (--v on the column; label row 13px + 6px gap below the bar) */
.ps-mini2 > span[style*="--v"] em { top: auto; bottom: calc(var(--v) * 80px + 25px); }
.ps-mini2--5 > span[style*="--v"] em { bottom: calc(var(--v) * 70px + 25px); }
.ps-themes2 { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.ps-themes2 > div { display: grid; grid-template-columns: 110px minmax(0, 1fr) 28px; gap: 10px; align-items: center; font: 500 13px/1.2 var(--text); color: var(--ps-tx); }
.ps-themes2 b { text-align: right; color: var(--ps-ink); }

/* ---------------------------------------------------------------- Reports: files track, deck vs live, readers */
.ps-files { position: relative; background: var(--ps-ink); color: #fff; --wn-h: #fff; --wn-k: var(--mint); --wn-mut: rgba(255,255,255,.75); }
.ps-files .wm-h__sticky { padding: 112px 0; }
html.wm-on .ps-files .wm-h__sticky { padding: 110px 0 30px; }
.ps-files__h .wn-head { margin-bottom: 36px; }
.ps-files__track { padding: 0 7vw; gap: 20px; }
.ps-file { flex: 0 0 300px; display: flex; flex-direction: column; gap: 12px; min-height: 380px; padding: 20px; border-radius: 24px; background: #fff; color: var(--ps-ink);
  transition: transform .45s var(--ps-ease); }
.ps-file:nth-child(even) { transform: translateY(26px); }
.ps-file__p { display: grid; place-items: center; height: 170px; border-radius: 16px; background: var(--ps-soft); overflow: hidden; }
.ps-file__x { align-self: flex-start; padding: 5px 9px; border-radius: 6px; background: var(--ps-ink); color: #fff; font: 600 11px/1 var(--ps-mono); }
.ps-file h3 { font: 500 22px/28px var(--display); letter-spacing: -.3px; color: var(--ps-ink); }
.ps-file p { font: 400 15px/23px var(--text); color: var(--grey70); }
.ps-fp { display: block; position: relative; }
.ps-fp--deck { width: 150px; height: 100px; }
.ps-fp--deck i { position: absolute; inset: 0; border-radius: 8px; background: #fff; border: 1px solid var(--ps-line); box-shadow: 0 6px 14px rgba(30,10,26,.1); }
.ps-fp--deck i:nth-child(1) { transform: translate(-14px, -12px) rotate(-6deg); }
.ps-fp--deck i:nth-child(2) { transform: translate(-6px, -5px) rotate(-2deg); }
.ps-fp--deck i:nth-child(3) { background: linear-gradient(#fff 0 30%, transparent 30%), linear-gradient(90deg, #d6335e 0 40%, #f3a3ba 40% 70%, #ffd6e0 70%) 14px 60px / 120px 18px no-repeat, #fff; }
.ps-dvl .ps-fp--deck { margin: 18px auto 8px; }
html.wm-on .ps-file .ps-fp--deck i:nth-child(1) { transition: transform .6s var(--ps-ease); }
.ps-file:hover .ps-fp--deck i:nth-child(1) { transform: translate(-28px, -16px) rotate(-12deg); }
.ps-fp--card { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ps-fp--card b { width: 140px; height: 74px; border-radius: 10px; background: linear-gradient(90deg, #d6335e 0 55%, #fbe3ea 55%) 14px 18px / 112px 10px no-repeat,
  linear-gradient(90deg, #f3a3ba 0 35%, #fbe3ea 35%) 14px 38px / 112px 10px no-repeat, #fff; border: 1px solid var(--ps-line); }
.ps-fp--card span { display: flex; gap: 5px; }
.ps-fp--card em { padding: 4px 7px; border-radius: 5px; background: var(--ps-ink); color: #fff; font: 600 10px/1 var(--ps-mono); font-style: normal; }
.ps-fp--grid { display: grid; grid-template-columns: repeat(6, 22px); gap: 2px; padding: 8px; background: #fff; border-radius: 8px; }
.ps-fp--grid i { height: 16px; background: #e4f3ec; }
.ps-fp--grid i:nth-child(-n+6) { background: #2f7a5b; }
.ps-fp--grid i:nth-child(6n+1) { background: #cfe9dc; }
.ps-fp--csv { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 8px; background: var(--ps-ink); }
.ps-fp--csv code { font: 400 11px/1.2 var(--ps-mono); color: #f6c98e; }
.ps-fp--csv code:first-child { color: #ffb3c7; }
.ps-fp--xt { display: grid; grid-template-columns: repeat(3, 44px); gap: 3px; padding: 10px; border-radius: 8px; background: #fff; font: 600 11px/1 var(--text); }
.ps-fp--xt b { text-align: center; color: var(--ps-link); padding: 4px 0; }
.ps-fp--xt i { font-style: normal; text-align: center; padding: 6px 0; border-radius: 4px; background: var(--ps-soft); color: var(--ps-ink); }
.ps-fp--xt sup { color: var(--ps-link); }
.ps-fp--val { display: flex; flex-direction: column; gap: 6px; }
.ps-fp--val i { display: flex; align-items: center; gap: 8px; width: 140px; height: 22px; padding: 0 6px; border-radius: 6px; background: #fff; color: var(--ps-ok); }
.ps-fp--val i::after { content: ""; flex: 1; height: 5px; border-radius: 3px; background: #e8dfe3; }
.ps-fp--html { display: flex; flex-direction: column; gap: 6px; width: 150px; padding: 22px 12px 12px; border-radius: 8px; background: #fff;
  background-image: linear-gradient(#f1e9ec 0 12px, transparent 12px); }
.ps-fp--html b { height: 10px; width: 70%; border-radius: 3px; background: var(--ps-ink); }
.ps-fp--html i { height: 5px; border-radius: 3px; background: #e8dfe3; }
.ps-fp--html i.s { width: 60%; }
.ps-fp--html em { height: 28px; border-radius: 4px; background: linear-gradient(90deg, #d6335e 0 46%, #f3a3ba 46% 77%, #ffd6e0 77%); }
.ps-fp--link { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 999px; background: #fff; border: 1px solid var(--ps-line); color: var(--ps-link); }
.ps-fp--link em { font: 600 13px/1 var(--text); font-style: normal; color: var(--ps-ink); }
.ps-dvl { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); gap: 18px; align-items: center; }
.ps-dvl__deck { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px; border-radius: 22px; background: var(--wn-page); text-align: center; border: 1px dashed #d9cdd3; }
.ps-dvl__deck small { font: 400 13px/1.35 var(--text); color: var(--ps-mut); }
.ps-dvl__live { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--ps-line); box-shadow: 0 30px 60px rgba(30,10,26,.12); }
.ps-dvl__live > div:last-child { display: flex; flex-direction: column; gap: 12px; }
.ps-dvl__live .ps-hrow { grid-template-columns: 100px minmax(0, 1fr) 44px; }
.ps-readers { position: relative; height: 440px; border-radius: 30px; background: #fff; border: 1px solid var(--ps-line); }
.ps-readers > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ps-readers > svg line { vector-effect: non-scaling-stroke; }
.ps-rd > svg { flex: none; }
.ps-rd { position: absolute; display: flex; flex-direction: column; gap: 4px; width: 170px; padding: 12px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--ps-line);
  box-shadow: 0 10px 24px rgba(30,10,26,.08); }
.ps-rd svg { color: var(--ps-link); }
.ps-rd b { font: 600 14px/1.2 var(--text); color: var(--ps-ink); }
.ps-rd span { font: 400 12px/1.3 var(--text); color: var(--ps-mut); }
html.wm-on .ps-readers.is-live .ps-rd:not(.ps-rd--c) { animation: ps-bob2 4s ease-in-out calc(var(--k) * -.8s) infinite alternate; }
.ps-rd--c { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 200px; padding: 18px; background: var(--wn-glass-bg); border-color: rgba(255,179,199,.3); text-align: center; align-items: center; }
.ps-rd--c b { color: #fff; font: 500 18px/1.2 var(--display); }
.ps-rd--c span { color: rgba(255,255,255,.78); }
.ps-rd--c svg { color: var(--ps-rose); }

/* ---------------------------------------------------------------- Consultant: chat scroll, plan card, methods */
.ps-cs__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: start; }
.ps-cs__txt .wn-head { margin-bottom: 28px; }
.ps-cs__steps { display: flex; flex-direction: column; gap: 18px; }
.ps-cs__steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; }
.ps-cs__steps li > span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ps-soft); font: 500 15px/1 var(--display); color: var(--ps-link); }
.ps-cs__steps h3 { font: 600 18px/25px var(--text); color: var(--ps-ink); }
.ps-cs__steps p { margin-top: 4px; font: 400 15px/23px var(--text); color: var(--grey70); }
.ps-cs__chat { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 30px; background: var(--wn-page); border: 1px solid var(--ps-line); }
.ps-cs__h { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--ps-line); font: 600 14px/1 var(--text); color: var(--ps-ink); }
.ps-cs__h svg { color: var(--ps-link); }
.ps-cs__chat .ps-bub { font-size: 16px; line-height: 24px; padding: 14px 18px; }
.ps-cs__done { display: flex; align-items: center; gap: 10px; align-self: center; margin-top: 8px; padding: 12px 18px; border-radius: 999px; background: #e4f3ec; font: 600 14px/1 var(--text); color: #1f5f45; }
.ps-plan__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
.ps-plancard--lg { padding: 30px; border-radius: 28px; box-shadow: 0 30px 60px rgba(30,10,26,.14); border: 1px solid var(--ps-line); }
.ps-plancard--lg li { grid-template-columns: 150px minmax(0, 1fr); column-gap: 16px; padding: 11px 0; }
.ps-plancard--lg li:has(> .ps-plancard__ok) { grid-template-columns: 150px minmax(0, 1fr) 22px; }
.ps-plancard--lg li span { font-size: 14px; }
.ps-plancard--lg li b { font-size: 15px; line-height: 22px; font-weight: 500; }
.ps-plancard--lg .ps-plancard__ok { width: 22px; height: 22px; }
.ps-plancard--lg .ps-confirm { height: 44px; padding: 0 26px; font-size: 15px; }
/* the card builds field by field as you scroll (data-scrub="ps-fill"): each value fills in as its row rises up the
   screen and its tick pops when the row is done; --ps-f remaps --wm-p (0..1) so a row is complete by the middle of the
   screen. Motion off: no rule applies and every row shows filled. */
html.wm-on .ps-plancard [data-scrub="ps-fill"] { --ps-f: clamp(0, (var(--wm-p) - .04) * 2.3, 1); }
html.wm-on .ps-plancard b[data-scrub="ps-fill"] { opacity: calc(.16 + .84 * var(--ps-f)); transform: translate3d(calc((1 - var(--ps-f)) * 18px), 0, 0); }
html.wm-on .ps-plancard .ps-plancard__ok[data-scrub="ps-fill"] { opacity: clamp(0, (var(--ps-f) - .6) * 2.5, 1); transform: scale(clamp(.4, (var(--ps-f) - .5) * 2, 1)); }
.ps-cmeth__list { display: flex; flex-wrap: wrap; gap: 10px; }
.ps-cmeth__list a { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px 0 8px; border-radius: 999px; background: #fff; border: 1px solid var(--ps-line);
  font: 600 15px/1 var(--text); color: var(--ps-ink); transition: background-color .25s ease, color .25s ease, transform .35s var(--ps-ease); }
.ps-cmeth__list a span { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--ps-soft); font: 500 13px/1 var(--display); color: var(--ps-link); }
.ps-cmeth__list a:hover { transform: translateY(-3px); background: var(--ps-ink); color: #fff; }
.ps-cmeth__list a.is-first { background: var(--ps-btn); border-color: var(--ps-btn); color: #fff; }
.ps-cmeth__list a.is-first span { background: rgba(30,10,26,.28); color: #fff; }

/* ---------------------------------------------------------------- Pocketsfull Ai */
.ps-sides__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ps-side-card { display: flex; flex-direction: column; gap: 14px; padding: 36px; border-radius: 28px; background: #fff; border: 1px solid var(--ps-line); }
.ps-side-card > svg { color: var(--ps-link); }
.ps-side-card__k { font: 600 13px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--ps-link); }
.ps-side-card p { font: 400 17px/27px var(--text); color: var(--grey70); }
.ps-side-card--dark { background: var(--wn-glass-bg); border-color: rgba(255,179,199,.3); --wn-h: #fff; }
.ps-side-card--dark > svg, .ps-side-card--dark .ps-side-card__k { color: var(--ps-rose); }
.ps-side-card--dark p { color: rgba(255,255,255,.82); }
.ps-funnel { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 32px; border-radius: 30px; background: var(--ps-ink); }
.ps-funnel__r { position: relative; display: grid; grid-template-columns: 1fr; place-items: center; width: calc(var(--v) * 100%); min-width: 150px; height: 64px; }
.ps-funnel__b { position: absolute; inset: 0; border-radius: 14px; background: linear-gradient(90deg, #8e1a47, #e8466f, #8e1a47); }
.ps-funnel__r:nth-child(2) .ps-funnel__b { opacity: .85; } .ps-funnel__r:nth-child(3) .ps-funnel__b { opacity: .7; } .ps-funnel__r:nth-child(4) .ps-funnel__b { background: linear-gradient(90deg, #b4235a, #ffb3c7, #b4235a); }
.ps-funnel__r b { position: relative; font: 500 24px/1 var(--display); color: #fff; }
/* the last bar is the light rose one: white on its #ffb3c7 centre was about 1.8:1, so its number is ink (21 Oct 2026 review) */
.ps-funnel__r:nth-child(4) b { color: var(--wn-ink, #1e0a1a); }
.ps-funnel__r > span:last-child { position: absolute; left: calc(100% + 16px); white-space: nowrap; font: 500 14px/1 var(--text); color: rgba(255,255,255,.85); }
.ps-funnel { padding-right: 170px; }
.ps-pfex { display: flex; flex-direction: column; gap: 18px; }
.ps-tl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.ps-tl::before { content: ""; position: absolute; left: 16%; right: 16%; top: 30px; height: 2px; background: repeating-linear-gradient(90deg, #d6335e 0 8px, transparent 8px 14px); }
.ps-tl__s { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.ps-tl__s svg { width: 60px; height: 60px; padding: 18px; border-radius: 50%; background: #fff; border: 1.5px solid var(--ps-line); color: var(--ps-link); box-sizing: border-box; }
.ps-tl__s.is-done svg { background: var(--ps-btn); color: #fff; border-color: var(--ps-btn); }
.ps-tl__s b { font: 600 16px/1.2 var(--text); color: var(--ps-ink); }
.ps-tl__s span { font: 400 13px/1.3 var(--text); color: var(--ps-mut); max-width: 170px; }
.ps-abt2 { display: flex; flex-direction: column; gap: 12px; padding: 22px; border-radius: 22px; background: #fff; border: 1px solid var(--ps-line); }
.ps-abt2 > div { display: flex; gap: 12px; }
.ps-abt2 > div span { flex: 1; display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 14px; border: 1px solid var(--ps-line); font: 500 14px/1 var(--text); color: var(--ps-tx); }
.ps-abt2 > div span b { margin-left: auto; font: 500 22px/1 var(--display); color: var(--ps-ink); }
.ps-abt2 > div span.is-sel { border-color: var(--ps-btn); background: var(--ps-soft); }
.ps-abt2 .ps-icn { width: 30px; height: 30px; border-radius: 8px; }
.ps-abt2 small { font: 400 13px/1 var(--text); color: var(--ps-mut); }
.ps-mt__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid rgba(255,179,199,.22); }
.ps-mt__list li { display: flex; flex-direction: column; gap: 10px; padding: 28px 24px 8px 0; }
.ps-mt__list li + li { padding-left: 24px; border-left: 1px solid rgba(255,179,199,.22); }
.ps-mt__n { font: 500 44px/1 var(--display); color: var(--ps-rose); letter-spacing: -1px; }
.ps-mt__list b { font: 600 20px/26px var(--text); color: #fff; }
.ps-mt__list p { font: 400 15px/23px var(--text); color: rgba(255,255,255,.8); }

/* ---------------------------------------------------------------- Sampleeye: lanes, example flow */
.ps-lanes { display: grid; grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr); gap: 24px; align-items: center; }
.ps-lane { display: flex; flex-direction: column; gap: 14px; padding: 28px; border-radius: 26px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,179,199,.22); }
.ps-lane__k { align-self: flex-start; padding: 8px 14px; border-radius: 999px; background: #fbe3ea; color: #8e1a47; font: 700 13px/1 var(--text); }
.ps-lane--cl .ps-lane__k { background: #c42c5c; color: #fff; }
.ps-lane ul { display: flex; flex-direction: column; gap: 10px; }
.ps-lane li { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.06); }
.ps-lane li b { font: 600 16px/1.2 var(--text); color: #fff; }
.ps-lane li span { font: 400 14px/1.3 var(--text); color: rgba(255,255,255,.75); }
.ps-lane__mid { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 26px 18px; border-radius: 26px; background: var(--wn-glass-bg);
  border: 1px solid rgba(255,179,199,.3); color: #9fe0c4; }
.ps-lane__mid .ps-oc { height: 32px; padding: 0 16px; font-size: 14px; }
.ps-lane__mid p { font: 400 14px/21px var(--text); color: rgba(255,255,255,.82); }
.ps-seflow { display: flex; flex-direction: column; gap: 12px; padding: 30px; border-radius: 28px; background: #fff; border: 1px solid var(--ps-line); box-shadow: 0 24px 50px rgba(30,10,26,.08); }
.ps-seflow__r { display: grid; grid-template-columns: 250px minmax(0, 1fr) 64px; gap: 14px; align-items: center; font: 500 14px/1.3 var(--text); color: var(--ps-tx); }
.ps-seflow__r .ps-bar { height: 16px; }
.ps-seflow__r b { text-align: right; font: 600 15px/1 var(--text); color: var(--ps-ink); font-variant-numeric: tabular-nums; }
.ps-seflow__r:first-child { padding-bottom: 12px; border-bottom: 1px dashed var(--ps-line); font-weight: 700; color: var(--ps-ink); }
.ps-seflow__r.ps-o--ok { padding-top: 12px; border-top: 1px dashed var(--ps-line); font-weight: 700; color: var(--ps-ink); }

/* ---------------------------------------------------------------- API: outcomes, example */
.ps-apiout__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; align-items: center; }
.ps-apiout__grid .wn-head { margin-bottom: 0; }
.ps-apiout__list { display: flex; flex-direction: column; gap: 10px; }
.ps-apiout__list li { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: center; padding: 16px 20px; border-radius: 16px; background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,179,199,.18); font: 400 16px/1.4 var(--text); color: rgba(255,255,255,.85); }
.ps-apiout__list .ps-oc { height: 30px; padding: 0 14px; font-size: 13px; justify-self: start; }
.ps-apiex { display: flex; flex-direction: column; gap: 18px; }
.ps-apiex__lane { display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: 24px; background: #fff; border: 1px solid var(--ps-line); }
.ps-apiex .ps-fbox { flex: 1; font-size: 14px; background: var(--wn-page); box-shadow: none; }
.ps-apiex .ps-fbox--se { flex: 0 0 auto; background: var(--ps-ink); }

/* ---------------------------------------------------------------- step strip (line fills with the scroll) */
.ps-strip { position: relative; }
.ps-strip__line { position: absolute; left: 0; right: 0; top: 28px; height: 2px; background: var(--ps-line); }
.ps-strip__fill { position: absolute; inset: 0; background: linear-gradient(90deg, #d6335e, #e8466f, #ffb3c7); transform-origin: 0 50%; }
.ps-strip__dotw { position: absolute; left: 0; top: -7px; width: 100%; height: 16px; pointer-events: none; display: none; }
.ps-strip__dotw i { position: absolute; left: -8px; top: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--ps-btn); box-shadow: 0 0 0 6px rgba(214,51,94,.18); }
html.wm-on .ps-strip__fill[data-scrub] { transform: scaleX(var(--wm-p)); }
html.wm-on .ps-strip__dotw[data-scrub] { display: block; transform: translateX(calc(var(--wm-p) * 100%)); }
html.wm-on.wm-sda .ps-strip__fill[data-scrub], html.wm-on.wm-sda .ps-strip__dotw[data-scrub] { animation-range: entry 20% cover 60%; }
.ps-strip__list { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 28px; }
.ps-strip__list li { position: relative; display: flex; flex-direction: column; gap: 12px; padding-top: 0; }
.ps-strip__n { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1.5px solid #f3a3ba; font: 500 18px/1 var(--display); color: var(--ps-link);
  position: relative; z-index: 1; margin-bottom: 8px; }
.wn-sec--page .ps-strip__n { background: var(--wn-page); }
.ps-strip__list h3 { font: 600 20px/27px var(--text); color: var(--ps-ink); }
.ps-strip__list p { font: 400 16px/25px var(--text); color: var(--grey70); }

/* ---------------------------------------------------------------- related + faq spacing */
.t-product-showcase .ps-faq { padding-bottom: 96px; }

/* ---------------------------------------------------------------- fixes after the first review (20 Oct 2026) */
/* CatalyseAI hero, results scene: the group comparison under the bars */
.ps-cmp { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; padding: 12px 14px; border-radius: 12px; background: var(--ps-soft); }
.ps-cmp__t { font: 600 12px/1.2 var(--text); color: var(--ps-ink); }
.ps-cmp__r { display: grid; grid-template-columns: 96px minmax(0, 1fr) 48px; gap: 10px; align-items: center; font: 500 12px/1 var(--text); color: var(--ps-tx); }
.ps-cmp__r b { text-align: right; font: 700 13px/1 var(--text); color: var(--ps-ink); }
.ps-cmp__r sup { font-size: 9px; color: var(--ps-link); margin-left: 1px; }
.ps-cmp .ps-bar { background: #fff; }
/* Sampleeye hero: total starts and completes against the target */
.ps-outs__tot { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; border-bottom: 1px dashed var(--ps-line);
  font: 600 13px/1 var(--text); color: var(--ps-ink); }
.ps-outs__tot b { font: 500 24px/1 var(--display); letter-spacing: -.5px; }
.ps-outs__goal { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 6px 10px; align-items: center; margin-top: 4px; padding-top: 12px;
  border-top: 1px dashed var(--ps-line); font: 600 12px/1.2 var(--text); color: var(--ps-ink); }
.ps-outs__goal .ps-bar { grid-column: 1 / -1; grid-row: 2; height: 12px; }
.ps-outs__goal b { grid-row: 1; grid-column: 2; text-align: right; font: 700 13px/1 var(--text); }
/* CatalyseAI stack card 02: wider quota bars */
.ps-sv--aud { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.ps-sv--aud .ps-qrow { grid-template-columns: 70px minmax(0, 1fr) 70px; gap: 10px; }
.ps-qrow b { white-space: nowrap; }
/* text drawn straight on the dark stack cards */
.ps-scard--1 .ps-share, .ps-scard--1 .ps-sv__foot { color: var(--ps-rose); }
/* closing band: the bright band gets a deeper crimson so white body text keeps 4.5:1 */
.t-product-showcase .wn-cta--band .wn-cta__box { background: radial-gradient(60% 80% at 82% 0%, rgba(255,179,199,.22), rgba(255,179,199,0) 70%),
  linear-gradient(150deg, #c42c5c 0%, #a51f55 55%, #7d1640 100%); }
.t-product-showcase .wn-cta--band .wn-lead { color: #fff; }
.t-product-showcase .wn-cta--band .wn-cta__office { color: rgba(255,255,255,.92); }
.t-product-showcase .wn-cta--band .wn-cta__office svg { color: #fff; }
/* the big tiles: let the drawing breathe */
.ps-tile--h2 .ps-tile__vis { padding: 26px; }
.ps-tile--w4 .ps-tile__vis { padding: 22px 26px; }

/* ================================================================ one layout per page (review 21 Oct 2026)
   The bento grid stays on CatalyseAI. Ask the study: a ledger. Reports: a rail and a feed of report cards.
   Consultant: rows along a spine. Pocketsfull Ai: a sideways track behind a survey-wall phone. Sampleeye: a vertical
   timeline and a pinned start log. Sell & Buy API: a sequence diagram and a console checklist. */

/* ---------------------------------------------------------------- Ask the study: the ledger */
.ps-ledger-sec { --ps-led: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); }
.ps-ledger__cols { display: grid; grid-template-columns: var(--ps-led); gap: 48px; padding-bottom: 14px; border-bottom: 2px solid var(--ps-ink);
  font: 600 12px/1 var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--ps-link); }
.ps-ledger { isolation: isolate; }
.ps-ledger__row { position: relative; display: grid; grid-template-columns: var(--ps-led); gap: 48px; align-items: center; padding: 30px 0;
  border-bottom: 1px solid var(--ps-line); }
.ps-ledger__row::before { content: ""; position: absolute; z-index: -1; left: -24px; right: -24px; top: 6px; bottom: 6px; border-radius: 22px;
  background: var(--ps-soft); opacity: 0; transition: opacity .3s ease; }
.ps-ledger__row:hover::before { opacity: 1; }
.ps-ledger__what { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 14px; align-items: start; }
.ps-ledger__n { font: 500 34px/1 var(--display); letter-spacing: -1px; color: transparent; -webkit-text-stroke: 1.3px var(--ps-btn); }
.ps-ledger__what h3 { font: 600 20px/27px var(--text); color: var(--ps-ink); }
.ps-ledger__what p { margin-top: 6px; font: 400 15px/23px var(--text); color: var(--grey70); }
.ps-ledger__ask { position: relative; display: flex; }
.ps-ledger__ask .ps-bub { max-width: 100%; margin: 0; padding: 14px 16px; font-size: 15px; line-height: 22px; }
.ps-ledger__ask::after { content: ""; position: absolute; right: -31px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border-top: 2px solid var(--ps-btn); border-right: 2px solid var(--ps-btn); transform: rotate(45deg); }
.ps-ledger__get { min-width: 0; padding: 18px; border-radius: 20px; background: var(--wn-page); border: 1px solid var(--ps-line); }
.ps-ledger__get .ps-m-chat .ps-bub { max-width: 100%; font-size: 14px; line-height: 20px; padding: 12px 14px; }
.ps-ledger__get .ps-m-quotes blockquote { font-size: 14px; }
.ps-m-g3 { display: flex; flex-direction: column; gap: 8px; }
.ps-m-g3 li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: #fff;
  border: 1px solid var(--ps-line); }
.ps-m-g3__i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--ps-soft2); color: var(--ps-link); }
.ps-m-g3 b { display: block; font: 600 14px/1.25 var(--text); color: var(--ps-ink); }
.ps-m-g3 small { display: block; margin-top: 2px; font: 400 12px/1.3 var(--text); color: var(--ps-mut); }
.ps-m-g3 em { font: 500 24px/1 var(--display); font-style: normal; letter-spacing: -.5px; color: var(--ps-ink); text-align: right; }
.ps-m-g3 em span { display: block; margin-top: 3px; font: 500 11px/1 var(--text); letter-spacing: 0; color: var(--ps-mut); }
.ps-m-fit { display: flex; flex-direction: column; gap: 12px; }
.ps-m-fit__note { display: flex; gap: 8px; padding: 10px 12px; border-radius: 12px; background: #fcefdc; font: 500 13px/1.4 var(--text); color: #6b3f12; }
.ps-m-fit__note svg { flex: none; margin-top: 1px; color: #b4235a; }
.ps-m-fit .ps-gbars { padding: 12px; border-radius: 12px; background: #fff; }

/* ---------------------------------------------------------------- Reports: a rail and a feed of report cards */
.ps-rfeed { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 40px; align-items: start; }
.ps-rfeed__rail { align-self: stretch; }
.ps-rfeed__rail .wn-sticky { display: flex; flex-direction: column; gap: 12px; padding: 22px 14px; border-radius: 26px; background: var(--ps-ink); color: #fff;
  box-shadow: 0 30px 60px rgba(30,10,26,.18); }
.ps-rfeed__t { display: flex; align-items: flex-start; gap: 10px; padding: 0 10px 14px; border-bottom: 1px solid rgba(255,179,199,.18); font: 600 14px/1.35 var(--text); color: #fff; }
.ps-rfeed__t svg { flex: none; margin-top: 2px; color: var(--ps-rose); }
.ps-rfeed__rail ol { display: flex; flex-direction: column; gap: 2px; }
.ps-rfeed__rail a { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; font: 500 14px/1.3 var(--text); color: rgba(255,255,255,.8);
  text-decoration: none; transition: background-color .3s ease, color .3s ease, box-shadow .3s ease; }
.ps-rfeed__rail a svg { flex: none; color: var(--ps-rose); }
.ps-rfeed__rail a:hover, .ps-rfeed__rail a.is-on { background: rgba(255,179,199,.14); color: #fff; }
.ps-rfeed__rail a.is-on { box-shadow: inset 3px 0 0 var(--ps-rose); }
.ps-rfeed__rail a:focus-visible { outline: 2px solid var(--ps-rose); outline-offset: 2px; }
.ps-rfeed__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ps-rcard { display: flex; flex-direction: column; gap: 18px; padding: 20px; border-radius: 26px; background: #fff; border: 1px solid var(--ps-line);
  box-shadow: 0 12px 28px rgba(30,10,26,.05); scroll-margin-top: 160px; min-width: 0; }
.ps-rcard--wide, .ps-rcard:last-child:nth-child(even) { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 28px; }
.ps-rcard__vis { position: relative; flex: 1 1 auto; display: grid; place-items: center; min-height: 220px; padding: 20px; border-radius: 18px; background: var(--ps-soft); overflow: hidden; min-width: 0; }
.ps-rcard--wide .ps-rcard__vis { flex: 0 0 60%; }
.ps-rcard:last-child:nth-child(even) .ps-rcard__vis { flex: 0 0 46%; min-height: 0; }
.ps-rcard__txt { min-width: 0; padding: 0 4px; }
.ps-rcard__k { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; background: var(--ps-soft); font: 600 12px/1 var(--ps-mono); color: var(--ps-link); }
.ps-rcard__txt h3 { margin-top: 12px; font: 500 22px/28px var(--display); letter-spacing: -.3px; color: var(--ps-ink); }
.ps-rcard__txt p { margin-top: 6px; font: 400 15px/23px var(--text); color: var(--grey70); }
.ps-rcard .ps-m-ov { width: 100%; max-width: 520px; }

/* ---------------------------------------------------------------- Consultant: rows along a spine */
.ps-guard { position: relative; margin-top: 8px; }
.ps-guard__spine { position: absolute; left: 50%; top: 24px; bottom: 24px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--ps-line); overflow: hidden; }
.ps-guard__spine i { display: block; height: 100%; background: linear-gradient(180deg, #d6335e, #e8466f 60%, #ffb3c7); transform-origin: 50% 0; }
html.wm-on .ps-guard__spine i[data-scrub] { transform: scaleY(var(--wm-p)); }
html.wm-on.wm-sda .ps-guard__spine i[data-scrub] { animation-range: cover 12% cover 80%; }
.ps-guard__list { display: flex; flex-direction: column; gap: 44px; }
.ps-guard__row { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: center; }
.ps-guard__row > * { grid-row: 1; }
.ps-guard__row--l .ps-guard__txt { grid-column: 1; align-items: flex-end; text-align: right; }
.ps-guard__row--l .ps-guard__vis { grid-column: 3; }
.ps-guard__row--r .ps-guard__txt { grid-column: 3; }
.ps-guard__row--r .ps-guard__vis { grid-column: 1; }
.ps-guard__dot { grid-column: 2; justify-self: center; position: relative; z-index: 1; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ps-btn); color: #fff; box-shadow: 0 0 0 8px #fff, 0 0 0 9px var(--ps-line); }
.ps-guard__txt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ps-guard__n { font: 500 46px/1 var(--display); letter-spacing: -1.5px; color: transparent; -webkit-text-stroke: 1.3px var(--ps-btn); }
.ps-guard__txt h3 { max-width: 460px; font: 500 26px/32px var(--display); letter-spacing: -.4px; color: var(--ps-ink); }
.ps-guard__txt p { max-width: 460px; font: 400 16px/25px var(--text); color: var(--grey70); }
.ps-guard__vis { display: grid; place-items: center; min-width: 0; min-height: 230px; padding: 28px; border-radius: 28px; background: var(--ps-soft); border: 1px solid var(--ps-line); }
.ps-guard__vis--dark { background: var(--wn-glass-bg); border-color: rgba(255,179,199,.3); box-shadow: 0 30px 60px rgba(30,10,26,.18); }
.ps-guard__vis > .ps-m { max-width: 440px; }

/* ---------------------------------------------------------------- Pocketsfull Ai: a sideways track behind the wall phone */
.ps-pfh { position: relative; background: var(--ps-soft); }
.ps-pfh .wm-h__sticky { padding: 112px 0; }
html.wm-on .ps-pfh .wm-h__sticky { padding: 140px 0 20px; }     /* clear of the floating header pill (y 76-134) */
/* the intro sits above the fade layer of the stage (fix 21 Oct 2026: the fade's top edge covered line 2 of the intro) */
.ps-pfh__h { position: relative; z-index: 4; }
.ps-pfh__h .wn-head { margin-bottom: 30px; }
.ps-pfh__stage { position: relative; }
.ps-pfh__stage::before { content: ""; position: absolute; z-index: 2; left: 0; top: 0; bottom: -40px; width: calc(7vw + 320px); pointer-events: none;
  background: linear-gradient(90deg, #fdf1f4 82%, rgba(253,241,244,0)); }
.ps-pfh__phone { position: absolute; z-index: 3; left: 7vw; top: 50%; width: 264px; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ps-pfh__phone > p { font: 500 13px/1.3 var(--text); color: var(--ps-mut); text-align: center; }
.ps-pfh__track { padding: 0 7vw 0 calc(7vw + 330px); gap: 20px; align-items: stretch; }
.ps-phone--wall2 { width: 100%; gap: 10px; padding: 14px 12px; box-shadow: 0 30px 60px rgba(30,10,26,.22); }
.ps-wall2 { display: flex; flex-direction: column; gap: 7px; }
.ps-wall2 li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 8px 9px; border-radius: 12px; border: 1px solid var(--ps-line); }
.ps-wall2 .ps-oico { width: 34px; height: 34px; }
.ps-wall2 b { display: block; font: 600 13px/1.2 var(--text); color: var(--ps-ink); }
.ps-wall2 small { display: block; margin-top: 2px; font: 400 11px/1.3 var(--text); color: var(--ps-mut); }
.ps-wall2 em { font: 700 11px/1 var(--text); font-style: normal; color: #6b3f12; background: #fcefdc; padding: 6px 8px; border-radius: 999px; }
.ps-phone--wall2 .ps-phone__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ps-pfc { position: relative; flex: 0 0 340px; display: flex; flex-direction: column; gap: 12px; min-height: 440px; padding: 22px; border-radius: 26px; background: #fff;
  border: 1px solid var(--ps-line); box-shadow: 0 14px 30px rgba(30,10,26,.06); }
.ps-pfc--dark { flex-basis: 440px; background: var(--wn-glass-bg); border-color: rgba(255,179,199,.3); }
.ps-pfc--wide { flex-basis: 680px; }
.ps-pfc__vis { display: grid; place-items: center; min-height: 216px; padding: 16px; border-radius: 18px; background: var(--ps-soft); overflow: hidden; }
.ps-pfc--dark .ps-pfc__vis { background: rgba(255,255,255,.06); border: 1px solid rgba(255,179,199,.16); }
.ps-pfc__n { margin-top: 6px; font: 600 12px/1 var(--ps-mono); color: var(--ps-link); }
.ps-pfc--dark .ps-pfc__n { color: var(--ps-rose); }
.ps-pfc h3 { font: 500 22px/28px var(--display); letter-spacing: -.3px; color: var(--ps-ink); }
.ps-pfc--dark h3 { color: #fff; }
.ps-pfc p { font: 400 15px/23px var(--text); color: var(--grey70); }
.ps-pfc--dark p { color: rgba(255,255,255,.82); }
.ps-pfc .ps-m-dev { gap: 14px; }
.ps-pfc .ps-dv--web i { width: 104px; height: 70px; }
.ps-m-onelink { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ps-m-onelink__arr { display: grid; place-items: center; color: var(--ps-btn); transform: rotate(90deg); }
.ps-m-onelink__app { display: flex; flex-direction: column; gap: 5px; width: 120px; padding: 12px 10px 10px; border-radius: 16px; background: #fff; border: 3px solid var(--ps-ink); }
.ps-m-onelink__app i { height: 12px; border-radius: 4px; background: linear-gradient(90deg, #ffb3c7, #fbe3ea); }
.ps-m-onelink__app b { margin-top: 2px; font: 600 10px/1.2 var(--text); color: var(--ps-ink); text-align: center; }
.ps-m-onelink__r { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.ps-m-onelink__r span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #fcefdc; font: 600 12px/1 var(--text); color: #6b3f12; }
html.wm-on [data-play].is-live .ps-m-onelink__app i { animation: ps-lines 3.2s var(--ps-ease) calc(var(--k, 0) * .2s) infinite; }
.ps-m-onelink__app i:nth-child(2) { --k: 1; } .ps-m-onelink__app i:nth-child(3) { --k: 2; }

/* ---------------------------------------------------------------- Sampleeye: the timeline of one start */
.ps-vtl__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.ps-vtl__head .wn-head { margin-bottom: 26px; }
.ps-vtl__one { display: inline-flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--ps-line);
  font: 500 15px/1.4 var(--text); color: var(--ps-ink); }
.ps-vtl__one svg { flex: none; color: var(--ps-link); }
.ps-vtl { position: relative; }
.ps-vtl__line { position: absolute; left: 28px; top: 28px; bottom: 40px; width: 2px; margin-left: -1px; border-radius: 2px; background: #e3d3da; overflow: hidden; }
.ps-vtl__line i { display: block; height: 100%; background: linear-gradient(180deg, #d6335e, #e8466f); transform-origin: 50% 0; }
html.wm-on .ps-vtl__line i[data-scrub] { transform: scaleY(var(--wm-p)); }
html.wm-on.wm-sda .ps-vtl__line i[data-scrub] { animation-range: cover 15% cover 75%; }
.ps-vtl__list { display: flex; flex-direction: column; gap: 40px; }
.ps-vtl__s { display: grid; grid-template-columns: 56px minmax(0, 1fr) 270px; gap: 0 26px; align-items: start; }
.ps-vtl__dot { position: relative; z-index: 1; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--wn-page);
  border: 1.5px solid #f3a3ba; font: 500 18px/1 var(--display); color: var(--ps-link); }
.ps-vtl__b { padding-top: 8px; }
.ps-vtl__b h3 { font: 600 20px/27px var(--text); color: var(--ps-ink); }
.ps-vtl__b p { margin-top: 6px; font: 400 16px/25px var(--text); color: var(--grey70); }
.ps-vtl__st { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px; border-radius: 16px; background: #fff;
  border: 1px solid var(--ps-line); box-shadow: 0 12px 26px rgba(30,10,26,.06); }
.ps-vtl__ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--ps-soft2); color: var(--ps-link); }
.ps-vtl__st small { display: block; font: 600 11px/1.35 var(--ps-mono); color: var(--ps-mut); }
.ps-vtl__st b { display: block; margin-top: 3px; font: 600 14px/1.3 var(--text); color: var(--ps-ink); }
.ps-vtl__s:last-child .ps-vtl__ico { background: #e4f3ec; color: var(--ps-ok); }

/* ---------------------------------------------------------------- Sampleeye: the pinned start log */
.ps-selog-sec { position: relative; background: #fff; }
html:not(.wm-on) .ps-selog-sec { padding: 112px 0; }
html.wm-on .ps-selog-sec .wm-pin__sticky { display: flex; align-items: center; }
.ps-selog__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: center; width: 100%; }
html.wm-on .ps-selog__grid { padding-top: 100px; padding-bottom: 16px; }
.ps-selog__txt { display: flex; flex-direction: column; gap: 16px; }
.ps-selog__txt .wn-h2 { font-size: 40px; line-height: 48px; }
.ps-sef__list { display: flex; flex-direction: column; gap: 4px; }
.ps-sef { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 11px 14px; border-radius: 16px; transition: background-color .4s ease, opacity .4s ease; }
.ps-sef__n { font: 500 18px/24px var(--display); color: var(--ps-link); }
.ps-sef h3 { font: 600 17px/24px var(--text); color: var(--ps-ink); }
.ps-sef p { margin-top: 3px; font: 400 14px/21px var(--text); color: var(--grey70); }
.ps-selog-sec .wm-pin__bar { background: var(--ps-soft2); }
html.wm-on .ps-selog-sec[data-active] .ps-sef { opacity: .5; }
html.wm-on .ps-selog-sec[data-active="0"] .ps-sef:nth-child(1), html.wm-on .ps-selog-sec[data-active="1"] .ps-sef:nth-child(2),
html.wm-on .ps-selog-sec[data-active="2"] .ps-sef:nth-child(3), html.wm-on .ps-selog-sec[data-active="3"] .ps-sef:nth-child(4),
html.wm-on .ps-selog-sec[data-active="4"] .ps-sef:nth-child(5) { opacity: 1; background: var(--ps-soft); }
.ps-selog { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 20px; border-radius: 24px; background: #fff; border: 1px solid var(--ps-line);
  box-shadow: 0 30px 60px rgba(30,10,26,.12); }
.ps-selog__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ps-selog__proj { display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 14px; transition: background-color .4s ease, box-shadow .4s ease; }
.ps-selog__proj li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 72px; gap: 14px; align-items: center; padding: 6px 8px; border-radius: 10px;
  transition: background-color .4s ease; }
.ps-selog__proj b { display: block; font: 600 13px/1.25 var(--text); color: var(--ps-ink); }
.ps-selog__proj small { display: block; font: 400 11px/1.3 var(--text); color: var(--ps-mut); }
.ps-selog__proj em { font: 600 12px/1 var(--text); font-style: normal; text-align: right; color: var(--ps-ink); font-variant-numeric: tabular-nums; }
.ps-selog table { width: 100%; font: 400 12px/1 var(--text); }
.ps-selog th { padding: 0 8px 8px; text-align: left; font: 600 10px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; color: var(--ps-mut); border-bottom: 1px solid var(--ps-line); }
.ps-selog td { padding: 6px 8px; border-bottom: 1px solid #f3ecef; color: var(--ps-tx); white-space: nowrap; font-variant-numeric: tabular-nums; transition: background-color .4s ease, box-shadow .4s ease; }
.ps-selog td:nth-child(2) { font-family: var(--ps-mono); color: var(--ps-ink); }
.ps-selog td .ps-oc { height: 20px; padding: 0 8px; font-size: 11px; }
.ps-selog__lim { padding: 12px 14px; border-radius: 14px; background: var(--wn-page); transition: background-color .4s ease, box-shadow .4s ease; }
.ps-selog__lim .ps-m-limit { max-width: none; gap: 10px; }
.ps-selog__lim .ps-lim__bar { height: 36px; }
/* the log fills row by row as the section scrolls (--wm-pin from wine-motion.js); with motion off every row shows */
html.wm-on .ps-selog-sec tbody tr { opacity: clamp(0, calc(var(--wm-pin, 1) * 14 - var(--r, 0)), 1); }
/* the feature on screen lights the rows, projects and limit it is about */
html.wm-on .ps-selog-sec[data-active="0"] tr.ps-on-0 td, html.wm-on .ps-selog-sec[data-active="1"] tr.ps-on-1 td,
html.wm-on .ps-selog-sec[data-active="2"] tr.ps-on-2 td, html.wm-on .ps-selog-sec[data-active="3"] tr.ps-on-3 td,
html.wm-on .ps-selog-sec[data-active="4"] tr.ps-on-4 td,
html.wm-on .ps-selog-sec[data-active="0"] .ps-selog__proj li.ps-on-0, html.wm-on .ps-selog-sec[data-active="1"] .ps-selog__proj li.ps-on-1,
html.wm-on .ps-selog-sec[data-active="2"] .ps-selog__proj li.ps-on-2, html.wm-on .ps-selog-sec[data-active="3"] .ps-selog__proj li.ps-on-3,
html.wm-on .ps-selog-sec[data-active="4"] .ps-selog__proj li.ps-on-4 { background: var(--ps-soft2); }
html.wm-on .ps-selog-sec[data-active="0"] tr.ps-on-0 td:first-child, html.wm-on .ps-selog-sec[data-active="1"] tr.ps-on-1 td:first-child,
html.wm-on .ps-selog-sec[data-active="2"] tr.ps-on-2 td:first-child, html.wm-on .ps-selog-sec[data-active="3"] tr.ps-on-3 td:first-child,
html.wm-on .ps-selog-sec[data-active="4"] tr.ps-on-4 td:first-child { box-shadow: inset 3px 0 0 var(--ps-btn); }
html.wm-on .ps-selog-sec[data-active="0"] .ps-selog__proj.ps-on-0, html.wm-on .ps-selog-sec[data-active="1"] .ps-selog__proj.ps-on-1,
html.wm-on .ps-selog-sec[data-active="2"] .ps-selog__proj.ps-on-2, html.wm-on .ps-selog-sec[data-active="3"] .ps-selog__proj.ps-on-3,
html.wm-on .ps-selog-sec[data-active="0"] .ps-selog__lim.ps-on-0, html.wm-on .ps-selog-sec[data-active="1"] .ps-selog__lim.ps-on-1,
html.wm-on .ps-selog-sec[data-active="2"] .ps-selog__lim.ps-on-2, html.wm-on .ps-selog-sec[data-active="3"] .ps-selog__lim.ps-on-3,
html.wm-on .ps-selog-sec[data-active="4"] .ps-selog__lim.ps-on-4 { background: var(--ps-soft); box-shadow: inset 0 0 0 1.5px #f3a3ba; }

/* ---------------------------------------------------------------- Sell & Buy API: the sequence diagram */
.ps-seq { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto auto auto; column-gap: 56px; }
.ps-seq__lanes { position: relative; grid-column: 2; grid-row: 1 / span 3; pointer-events: none; }
.ps-seq__lanes i { position: absolute; top: 64px; bottom: 0; width: 0; margin-left: -1px; border-left: 2px dashed #e3d3da; }
.ps-seq__lanes i:nth-child(2) { border-left: 2px solid #f3a3ba; }
.ps-seq__heads { position: relative; z-index: 1; grid-column: 2; grid-row: 1; height: 134px; }
.ps-seq__head { position: absolute; top: 0; width: 184px; margin-left: -92px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 12px;
  border-radius: 18px; background: #fff; border: 1px solid var(--ps-line); text-align: center; box-shadow: 0 12px 26px rgba(30,10,26,.06); }
.ps-seq__head svg { color: var(--ps-link); }
.ps-seq__head b { font: 600 15px/1.2 var(--text); color: var(--ps-ink); }
.ps-seq__head small { font: 400 12px/1.3 var(--text); color: var(--ps-mut); }
.ps-seq__head--se { background: var(--ps-ink); border-color: var(--ps-ink); box-shadow: 0 16px 34px rgba(30,10,26,.25); }
.ps-seq__head--se svg { color: var(--ps-rose); }
.ps-seq__head--se b { color: #fff; }
.ps-seq__head--se small { color: rgba(255,255,255,.75); }
.ps-seq__txt { grid-column: 1; align-self: center; padding: 32px 0; }
.ps-seq__k { font: 600 12px/1 var(--ps-mono); color: var(--ps-link); }
.ps-seq__txt h3 { margin-top: 10px; font: 500 28px/34px var(--display); letter-spacing: -.5px; color: var(--ps-ink); }
.ps-seq__txt p { margin-top: 8px; font: 400 16px/25px var(--text); color: var(--grey70); }
.ps-seq__msgs { position: relative; z-index: 1; grid-column: 2; display: flex; flex-direction: column; gap: 22px; padding: 32px 0; }
.ps-seq__txt--1, .ps-seq__msgs--1 { border-top: 1px dashed var(--ps-line); }
.ps-seq__m { position: relative; display: flex; flex-direction: column; gap: 6px; }
.ps-seq__lab { align-self: center; max-width: calc(100% - 44px); font: 500 14px/1.35 var(--text); color: var(--ps-ink); text-align: center; }
.ps-seq__m svg { display: block; width: 100%; height: 12px; overflow: visible; }
/* no non-scaling-stroke here: with it the 0-1 dash of the scroll drawing is measured in the wrong space and the line
   draws in pieces; the svg is 12px tall for a 12-unit viewBox, so the line stays 2px thick */
.ps-seq__m path { fill: none; stroke: #d6335e; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ps-seq__m--l path { stroke: #8e1a47; }
.ps-seq__m path.ps-seq__hd { vector-effect: non-scaling-stroke; }
html.wm-on.wm-sda .ps-seq__hd { animation: ps-headin linear both; animation-timeline: --wm-dt; animation-range: entry 10% cover 55%; }
@keyframes ps-headin { 0%, 88% { opacity: 0; } 100% { opacity: 1; } }
.ps-seq__dot { position: absolute; bottom: 1px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #d6335e; box-shadow: 0 0 0 4px rgba(214,51,94,.18); }
.ps-seq__m--l .ps-seq__dot { background: #8e1a47; box-shadow: 0 0 0 4px rgba(142,26,71,.16); }

/* ---------------------------------------------------------------- Sell & Buy API: the connection console */
.ps-con__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.ps-con__grid .wn-head { margin-bottom: 0; }
.ps-con { border-radius: 24px; background: #1b0717; color: #fff; overflow: hidden; box-shadow: 0 40px 80px rgba(30,10,26,.28), 0 0 0 1px rgba(255,179,199,.2); }
.ps-con__h { display: flex; align-items: center; gap: 14px; padding: 14px 18px; background: #24091f; border-bottom: 1px solid rgba(255,179,199,.14); }
.ps-con__h b { font: 600 13px/1 var(--ps-mono); color: #fff; }
.ps-con__st { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(159,224,196,.12);
  font: 600 12px/1 var(--text); color: #9fe0c4; }
.ps-con__st i { width: 7px; height: 7px; border-radius: 50%; background: #9fe0c4; }
html.wm-on [data-play].is-live .ps-con__st i { animation: ps-blink 1.6s steps(2, jump-none) infinite; }
.ps-con__list li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 26px; gap: 16px; align-items: start; padding: 20px 22px; border-bottom: 1px solid rgba(255,179,199,.1); }
.ps-con__n { font: 600 14px/24px var(--ps-mono); color: var(--ps-rose); }
.ps-con__b b { display: block; font: 600 17px/24px var(--text); color: #fff; }
.ps-con__b p { margin-top: 4px; font: 400 15px/23px var(--text); color: rgba(255,255,255,.8); }
.ps-con__list em { margin-top: 1px; padding: 6px 10px; border-radius: 999px; background: rgba(255,179,199,.14); font: 600 12px/1 var(--text); font-style: normal; color: var(--ps-rose); white-space: nowrap; }
.ps-con__ok { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #9fe0c4; color: #12352a; }
.ps-con__f { display: flex; align-items: center; gap: 8px; padding: 14px 22px; font: 400 13px/1.4 var(--text); color: rgba(255,255,255,.75); }
.ps-con__f svg { flex: none; color: var(--ps-rose); }

/* ---------------------------------------------------------------- Sell & Buy API: the example's two partners */
.ps-apiex2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ps-apiex2__c { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 22px; border-radius: 24px; background: #fff; border: 1px solid var(--ps-line);
  box-shadow: 0 20px 44px rgba(30,10,26,.08); }
.ps-apiex2__c--dark { background: var(--ps-ink); border-color: var(--ps-ink); }
.ps-apiex2__h { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; border-bottom: 1px dashed var(--ps-line); }
.ps-apiex2__h b { font: 500 20px/26px var(--display); color: var(--ps-ink); }
.ps-apiex2__h small { font: 400 13px/1.35 var(--text); color: var(--ps-mut); }
.ps-apiex2__goal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; font: 600 12px/1.2 var(--text); color: var(--ps-ink); }
.ps-apiex2__goal .ps-bar { grid-column: 1 / -1; grid-row: 2; height: 12px; }
.ps-apiex2__goal b { grid-row: 1; grid-column: 2; font: 700 13px/1 var(--text); }
.ps-apiex2 ul { display: flex; flex-direction: column; gap: 9px; }
.ps-apiex2 li { display: grid; grid-template-columns: 128px minmax(0, 1fr) 34px; gap: 10px; align-items: center; }
.ps-apiex2 li .ps-oc { justify-self: start; }
.ps-apiex2 li b { text-align: right; font: 700 13px/1 var(--text); color: var(--ps-ink); font-variant-numeric: tabular-nums; }
.ps-apiex2__f { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--ps-line); font: 500 12px/1.4 var(--text); color: var(--ps-mut); }
.ps-apiex2__c--dark .ps-apiex2__h, .ps-apiex2__c--dark .ps-apiex2__f { border-color: rgba(255,179,199,.2); }
.ps-apiex2__c--dark .ps-lab { color: var(--ps-rose); }
.ps-apiex2__c--dark .ps-apiex2__h b, .ps-apiex2__c--dark li b { color: #fff; }
.ps-apiex2__c--dark .ps-apiex2__h small, .ps-apiex2__c--dark .ps-apiex2__f { color: rgba(255,255,255,.75); }
.ps-apiex2__c--dark .ps-bar { background: rgba(255,255,255,.1); }
.ps-apiex2__c--dark .ps-o--x .ps-bar i { background: #c9a3b8; }

/* ---------------------------------------------------------------- reduced motion: nothing loops, nothing moves */
@media (prefers-reduced-motion: reduce) {
  .t-product-showcase *, .t-product-showcase *::before, .t-product-showcase *::after { animation: none !important; }
  .ps-file:nth-child(even) { transform: none; }
  /* wine-base.css sets transform: none on every bar inside [data-reveal="bars"] here, which would draw each bar at 100%:
     keep each bar at its value instead */
  html body.t-product-showcase [data-reveal="bars"] .ps-bar i { transform: scaleX(var(--v, .5)) !important; }
  html body.t-product-showcase [data-reveal="bars"][data-axis="y"] i { transform: scaleY(var(--v, 1)) !important; }
}

/* =====================================================================================================
   RESPONSIVE (21 Oct 2026): small laptops, tablets and phones. Breakpoints and rules: the RESPONSIVE block at the top
   of wine-base.css (1199.98 / 1023.98 / 767.98 / 479.98, plus the touch query). At 1200 and wider nothing here applies,
   so the desktop pages are exactly as designed. Below 1024px (and on touch screens) wine-motion.js runs the lite
   motion: the app-window demos do not play (t-product-showcase.js starts them only under html.wm-on), so each window
   shows its still .is-rest scene; below 1024px that scene is laid out in the page flow (the window takes the height of
   its content) and its columns stack. Sideways tracks scroll inside their own box; pinned stories are stacked.
   ===================================================================================================== */

/* ---------- 1200: small laptop ---------- */
@media (max-width: 1199.98px) {
  .ps-hero__txt--c { column-gap: 48px; }
  /* the brief-to-decision chips get the full width under both columns (they ran into the second button) */
  .ps-hero__txt--c > .ps-hero__chips { grid-column: 1 / -1; grid-row: 5; }
  .ps-hero__chips li { white-space: nowrap; }
  .ps-hero__txt--c .ps-h1, .ps-hero__grid .ps-h1 { font-size: clamp(36px, 2.9vw + 25px, 56px); line-height: 1.1; letter-spacing: -.022em; }
  .ps-pin__txt .wn-h2 { font-size: clamp(28px, 1.6vw + 22px, 42px); line-height: 1.2; }
  .ps-selog__txt .wn-h2 { font-size: clamp(28px, 1.4vw + 23px, 40px); line-height: 1.2; }
  .ps-prob__grid, .ps-ex__grid, .ps-rcpt__grid, .ps-cs__grid, .ps-plan__grid, .ps-apiout__grid, .ps-con__grid { gap: 48px; }
  .ps-scard { gap: 36px; padding: 40px; }
  .ps-agents__track, .ps-files__track { padding: 0 5vw; }
  /* split heroes: the copy above the window, so the window keeps its full drawing width */
  .ps-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 52px; }
  .ps-hero__grid .ps-hero__txt { max-width: 760px; }
  .ps-hero__vis { width: 100%; max-width: 980px; }
  /* problem drawing (CatalyseAI): a shorter connector so the card keeps its width */
  .ps-conv { grid-template-columns: 172px 72px minmax(0, 1fr); }
  .ps-conv__svg { width: 72px; }
  /* video answers: the answer card above the CSV */
  .ps-video__grid { grid-template-columns: minmax(0, 1fr); }
  /* bento (CatalyseAI): two columns */
  .ps-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .ps-tile--w2, .ps-tile--w4 { grid-column: 1 / -1; }
  .ps-tile--w4 .ps-tile__txt { flex-basis: 34%; }
  /* Reports feed: a narrower rail, the wide card stacks */
  .ps-rfeed { grid-template-columns: 240px minmax(0, 1fr); gap: 28px; }
  .ps-rcard__vis { padding: 14px; }
  .ps-rcard--wide { flex-direction: column; align-items: stretch; gap: 18px; }
  .ps-rcard--wide .ps-rcard__vis { flex: none; }
}

/* ---------- 1024: tablet landscape and below ---------- */
@media (max-width: 1023.98px) {
  /* hero, stage variant: the copy in one column, the window under it */
  .ps-hero--stage { padding: var(--wn-hdr-clear, 96px) 0 0; }
  .ps-hero--stage::before { bottom: 200px; }
  .ps-hero__txt--c { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
  .ps-hero__txt--c > .wn-lead { align-self: stretch; max-width: 640px; }
  .ps-hero__txt--c > .wn-hero__ctas { margin-top: 4px; }
  .ps-stage { margin-top: 44px; padding-bottom: 72px; }
  /* hero, split variant */
  .ps-hero--split { padding-bottom: 80px; }
  .ps-hero__grid { gap: 48px; }
  .ps-hero__grid .ps-hero__txt { gap: 20px; max-width: 680px; }
  .ps-hero__vis::before { inset: 6% 0 -4% 0; }

  /* the app windows: the still scene in the page flow, every window as tall as its content */
  .ps-demo:not(.is-run) .ps-scene:not(.is-rest) { display: none; }
  .ps-demo:not(.is-run) .ps-scene.is-rest { position: relative; inset: auto; }
  .ps-demo:not(.is-run) :is(.ps-app, .ps-app--ask, .ps-app--rep, .ps-app--con),
  .ps-demo--con:not(.is-run) .ps-win__body, .ps-demo--pf:not(.is-run) .ps-win__body,
  .ps-demo--se:not(.is-run) .ps-win__body, .ps-demo--api:not(.is-run) .ps-win__body { height: auto; }
  .ps-demo:not(.is-run) .ps-askgrid, .ps-demo:not(.is-run) .ps-repgrid { flex: none; }
  .ps-demo:not(.is-run) .ps-res, .ps-demo:not(.is-run) .ps-askd { height: auto; }
  .ps-demo--app .ps-app { grid-template-columns: minmax(0, 1fr); }
  .ps-demo--app .ps-side { display: none; }
  .ps-repgrid { grid-template-columns: 200px minmax(0, 1fr); }
  .ps-segrid { grid-template-columns: minmax(0, 1fr); }
  .ps-rc__h, .ps-m-cv__h { flex-wrap: wrap; }
  /* the windows' top bars wrap */
  .ps-topnav { flex-wrap: wrap; height: auto; gap: 8px 12px; padding: 12px 18px; }
  .ps-topnav__tabs { flex-wrap: wrap; }
  .ps-topnav__btns { flex-wrap: wrap; }
  .ps-askgrid { grid-template-columns: minmax(0, 1fr) 220px; }
  /* Reports window: only the still view (the donut) shows; the menu and the share note follow the card */
  .ps-demo:not(.is-run) .ps-rep__view { flex: none; }
  .ps-demo:not(.is-run) .ps-view.ps-ab { display: none; }
  .ps-demo:not(.is-run) .ps-view--c { position: relative; inset: auto; }
  .ps-demo:not(.is-run) .ps-menu { position: relative; right: auto; top: auto; width: auto; max-width: 360px; margin-top: 14px; box-shadow: 0 12px 28px rgba(30,10,26,.12); }
  .ps-demo:not(.is-run) .ps-toast { position: relative; left: auto; right: auto; bottom: auto; transform: none; align-self: flex-start;
    margin-top: 12px; white-space: normal; max-width: 100%; }
  .ps-demo--rep:not(.is-run) .ps-scene.is-rest, .ps-demo--con:not(.is-run) .ps-plancard { display: flex; flex-direction: column; }
  .ps-demo--rep:not(.is-run) .ps-scene.is-rest > .ps-rep { flex: none; }

  /* problem, example, receipt, consultant, API grids: one column */
  .ps-prob__grid, .ps-prob--solo .ps-prob__grid, .ps-ex__grid, .ps-rcpt__grid, .ps-cs__grid, .ps-plan__grid,
  .ps-apiout__grid, .ps-con__grid, .ps-vtl__grid, .ps-selog__grid, .ps-methods__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .ps-video__grid { gap: 24px; }
  .ps-conv { grid-template-columns: 190px 160px minmax(0, 1fr); }
  .ps-conv__svg { width: 160px; }
  .ps-rfeed__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-prob--solo .wn-head { margin-bottom: 0; }
  .ps-prob__big p { font-size: 21px; line-height: 32px; }

  /* stack cards (CatalyseAI): text above the drawing */
  .ps-scard { grid-template-columns: minmax(0, 1fr); gap: 32px; min-height: 0; padding: 36px; border-radius: 28px; }
  .ps-scard__n { font-size: 60px; }

  /* sideways tracks (static in the lite motion): they scroll inside their own box */
  .ps-agents .wm-h__sticky { padding: 96px 0 72px; }
  .ps-files .wm-h__sticky { padding: 96px 0 88px; }
  .ps-agents__track, .ps-files__track { padding: 0 32px; }
  :is(.ps-agents, .ps-files, .ps-pfh) .wm-h__sticky { scroll-snap-type: x proximity; scroll-padding: 0 32px; overscroll-behavior-x: contain; }
  :is(.ps-agents__track, .ps-files__track, .ps-pfh__track) > * { scroll-snap-align: start; }
  .ps-agents__glow { width: 640px; margin-left: -320px; }

  /* video pipeline: the wavy line goes, the seven steps wrap */
  .ps-vp__line { display: none; }
  .ps-vp__list { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 36px; }
  .ps-vcard { grid-template-columns: 220px minmax(0, 1fr); }

  /* question types: the kicker above its line */
  .ps-qtypes__h { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 24px; }

  /* methods (CatalyseAI) */
  .ps-m1 { position: static; padding: 32px; }

  /* Ask the study: pinned story (static here), ledger, receipt */
  html:not(.wm-on) .ps-pin { padding: 96px 0; }
  html:not(.wm-on) .ps-pin__grid { padding-top: 0; padding-bottom: 0; }
  .ps-pin__grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .ps-chatwin .wm-pin__layers { min-height: 0; }
  .ps-ledger-sec { --ps-led: minmax(0, 1fr) minmax(0, 1fr); }
  .ps-ledger__cols { display: none; }
  .ps-ledger__row { gap: 20px 36px; padding: 28px 0; }
  .ps-ledger__what { grid-column: 1 / -1; }
  .ps-ledger__row::before { left: -16px; right: -16px; }

  /* Reports: the rail becomes a row of links above the feed */
  .ps-rfeed { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .ps-rfeed__rail .wn-sticky { position: static; padding: 16px; border-radius: 22px; }
  .ps-rfeed__rail ol { flex-direction: row; flex-wrap: wrap; gap: 6px; }
  .ps-rfeed__rail a { min-height: 44px; padding: 8px 14px 8px 10px; background: rgba(255,255,255,.06); }
  .ps-rcard { scroll-margin-top: 96px; }

  /* Consultant: the chat column is no longer sticky; the spine rows keep their three columns */
  .ps-cs__txt.wn-sticky { position: static; }
  .ps-guard__row { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); }

  /* Pocketsfull Ai */
  .ps-funnel { padding: 28px 150px 28px 24px; }
  .ps-pfh .wm-h__sticky { padding: 96px 0 88px; }
  .ps-pfh__stage::before { display: none; }
  .ps-pfh__phone { position: relative; left: auto; top: auto; transform: none; width: 264px; margin: 0 auto 28px; }
  .ps-pfh__track { padding: 0 32px; }
  .ps-mt__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-mt__list li:nth-child(odd) { padding-left: 0; border-left: 0; }
  .ps-mt__list li:nth-child(n+3) { border-top: 1px solid rgba(255,179,199,.22); margin-top: 8px; }

  /* step strips: two per row, no running line */
  .ps-strip__line { display: none; }
  .ps-strip__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }

  /* Sampleeye */
  .ps-vtl__head .wn-sticky { position: static; }
  .ps-lanes { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ps-lane__mid { flex-direction: row; flex-wrap: wrap; justify-content: center; padding: 20px; }
  html:not(.wm-on) .ps-selog-sec { padding: 96px 0; }

  /* Sell & Buy API: one column; the three parties side by side on top, each message full width over its own arrow,
     the three lifelines drawn behind the messages */
  .ps-seq { grid-template-columns: minmax(0, 1fr); }
  .ps-seq__heads { grid-column: 1; }
  .ps-seq__lanes { display: none; }
  .ps-seq__heads { height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ps-seq__head { position: relative; left: auto !important; width: auto; margin: 0; padding: 12px 8px; border-radius: 14px; }
  .ps-seq__txt { padding: 28px 0 8px; }
  .ps-seq__txt--0 { grid-row: 2 !important; }
  .ps-seq__msgs--0 { grid-row: 3 !important; }
  .ps-seq__txt--1 { grid-row: 4 !important; }
  .ps-seq__msgs--1 { grid-row: 5 !important; }
  .ps-seq__msgs { grid-column: 1; padding: 20px 0 24px; gap: 18px; border-top: 0;
    background: linear-gradient(#e3d3da, #e3d3da) 16.667% 0 / 2px 100% no-repeat, linear-gradient(#f3a3ba, #f3a3ba) 50% 0 / 2px 100% no-repeat,
      linear-gradient(#e3d3da, #e3d3da) 83.333% 0 / 2px 100% no-repeat; }
  .ps-seq__m { left: 0 !important; width: 100% !important; }
  .ps-seq__lab { max-width: 100%; padding: 6px 10px; border-radius: 10px; background: #fff; font-size: 15px; }
  .ps-seq__m svg { width: 33.333%; }
  .ps-seq__msgs--0 .ps-seq__m svg { margin-left: 16.667%; }
  .ps-seq__msgs--1 .ps-seq__m svg { margin-left: 50%; }
  .ps-seq__msgs--0 .ps-seq__dot[style*="left:0"] { left: 16.667% !important; }
  .ps-seq__msgs--0 .ps-seq__dot[style*="left:100%"] { left: 50% !important; }
  .ps-seq__msgs--1 .ps-seq__dot[style*="left:0"] { left: 50% !important; }
  .ps-seq__msgs--1 .ps-seq__dot[style*="left:100%"] { left: 83.333% !important; }

  /* nothing under 12px on tablets and phones (the drawings included) */
  .ps-lab, .ps-filter, .ps-oc, .ps-pinned, .ps-rec, .ps-vt, .ps-side__foot small, .ps-steps em, .ps-steps em b, .ps-offers li small,
  .ps-kpis span, .ps-opts span, .ps-gbars__k, .ps-outline li em, .ps-m-outline li em, .ps-m-def li span, .ps-m-def li em, .ps-m-core small,
  .ps-m-wall small, .ps-m-wall em, .ps-wall2 small, .ps-wall2 em, .ps-m-g3 em span, .ps-m-g5w__k, .ps-m-g5 > span b, .ps-m-wt > p,
  .ps-m-field .ps-m-cols > span small, .ps-m-xtab p, .ps-area em, .ps-st, .ps-m-proj li small, .ps-cv__hb small, .ps-cv__tab span,
  .ps-cv__v p span, .ps-m-cv__f, .ps-rail li b, .ps-docf b, .ps-ag--report small, .ps-file__x, .ps-fp--card em, .ps-fp--csv code, .ps-fp--xt,
  .ps-m-onelink__app b, .ps-vtl__st small, .ps-selog__proj small, .ps-selog th, .ps-selog td .ps-oc, .ps-log th, .ps-csv th,
  .ps-lim__cap, .ps-phone__top, .ps-phone__top--wall b, .ps-mini2 small, .ps-mini2 em, .ps-lad li > div small, .ps-apibox, .ps-m-split small,
  .ps-ag .ps-bub, .ps-m-chat .ps-bub, .ps-quotes blockquote, .ps-note, .ps-mt2 code, .ps-mt2__mid b, .ps-m-shield__log em { font-size: 12px; }
  .t-product-showcase .wn-main sup { font-size: max(.7em, 12px); }
  .ps-gb__p em sup, .ps-gb--h em sup, .ps-cmp__r sup, .ps-m-g5 > span b sup { font-size: 12px; }
}

/* ---------- 768: tablet portrait, phones in landscape ---------- */
@media (max-width: 767.98px) {
  /* hero */
  .ps-hero--stage { padding-top: var(--wn-hdr-clear-m, 88px); }
  .ps-hero--stage::before { bottom: 160px; }
  .ps-hero__txt--c { gap: 18px; }
  .ps-hero__txt--c > .wn-lead, .ps-hero__grid .wn-lead { font-size: 18px; line-height: 28px; }
  .ps-hero__chips--flow { flex-wrap: wrap; }
  .ps-hero__chips--flow li + li { margin-left: 0; }
  .ps-hero__chips--flow li + li::before { display: none; }
  .ps-hero__chips li, .ps-hero__chips:not(.ps-hero__chips--flow) li { height: 36px; font-size: 14px; }
  .ps-stage { margin-top: 36px; padding-bottom: 56px; }
  .ps-hero--split { padding-bottom: 64px; }
  .ps-hero__grid { gap: 40px; }

  /* the app window on a phone */
  .ps-win { border-radius: 18px; }
  .ps-win__bar { height: 40px; padding: 0 16px; gap: 10px; }
  .ps-win__bar > b { margin-right: 44px; font-size: 13px; }
  .ps-demo:not(.is-run) .ps-scene.is-rest { padding: 16px; }
  .ps-main__head { flex-wrap: wrap; gap: 8px 12px; padding: 12px 16px; }
  .ps-topnav { padding: 12px 16px; }
  .ps-topnav__tabs { margin-left: 0; }
  .ps-topnav__btns { margin-left: 0; }
  .ps-card { padding: 14px 16px; }
  /* CatalyseAI window: the results scene in one column */
  .ps-res, .ps-build, .ps-aud, .ps-vid { grid-template-columns: minmax(0, 1fr); }
  .ps-hrow { grid-template-columns: minmax(0, 118px) minmax(0, 1fr) 40px; gap: 10px; }
  .ps-cmp__r { grid-template-columns: 88px minmax(0, 1fr) 44px; }
  .ps-groups { flex-wrap: wrap; margin-top: 4px; }
  /* Ask the study window: the saved chats under the chat */
  .ps-askgrid { grid-template-columns: minmax(0, 1fr); }
  .ps-saved { border-left: 0; border-top: 1px solid var(--ps-line); padding: 16px; }
  .ps-quotes { grid-template-columns: minmax(0, 1fr); }
  .ps-gb:not(.ps-gb--h) { grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .ps-gb__p { grid-template-columns: minmax(0, 1fr) 36px; }
  /* Reports window: no question rail; the donut above its legend */
  .ps-repgrid { grid-template-columns: minmax(0, 1fr); }
  .ps-rail { display: none; }
  .ps-view--c { flex-wrap: wrap; justify-content: center; gap: 20px 28px; padding: 6px 0; }
  .ps-donut { width: 156px; height: 156px; }
  .ps-donut > b { font-size: 28px; }
  /* Consultant window: the chat above the plan card */
  .ps-app--con { grid-template-columns: minmax(0, 1fr); }
  .ps-conchat { border-right: 0; border-bottom: 1px solid var(--ps-line); }
  .ps-conchat .ps-input { margin-top: 6px; }
  .ps-plancard { padding: 16px; }
  .ps-plancard li { grid-template-columns: 104px minmax(0, 1fr); }
  /* Pocketsfull Ai window: the offerwall phone above the dashboard */
  .ps-app--pf { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
  .ps-phone--wall { width: 100%; max-width: 300px; justify-self: center; height: auto; }
  .ps-dash { padding: 16px; }
  .ps-icons { flex-wrap: wrap; }
  .ps-icons span { min-width: 124px; white-space: nowrap; }
  /* Sampleeye window: the counts above the log; the log table scrolls inside its card */
  .ps-segrid { padding: 14px; gap: 14px; }
  .ps-outs li { grid-template-columns: minmax(0, 138px) minmax(0, 1fr) 36px; gap: 8px; }
  .ps-log { min-width: 0; }
  .ps-log th, .ps-log td { padding-left: 6px; padding-right: 6px; }
  .ps-log td:nth-child(3) { white-space: normal; line-height: 1.25; }
  /* API window: long code lines wrap */
  .ps-app--api { padding: 14px; }
  .ps-code pre { padding: 12px 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
  .ps-code__h { flex-wrap: wrap; }

  /* stats */
  .ps-stats .wn-stat b { font-size: clamp(34px, 8vw + 6px, 48px); }
  /* question types */
  .ps-qtypes__h p { font-size: 17px; }
  .ps-qt { height: 48px; font-size: 15px; padding: 0 18px 0 14px; }

  /* problem drawings */
  .ps-prob__big p { font-size: 19px; line-height: 30px; }
  .ps-conv { grid-template-columns: minmax(0, 1fr); height: auto; gap: 14px; }
  .ps-conv__l { flex-direction: row; flex-wrap: wrap; justify-content: center; height: auto; padding: 0; gap: 8px; }
  .ps-conv__l li { height: 40px; padding: 0 12px; font-size: 14px; }
  .ps-conv__svg { display: none; }
  .ps-conv__r { padding: 22px; border-radius: 20px; }
  .ps-dvl { grid-template-columns: minmax(0, 1fr); }
  .ps-nextq { padding: 24px 20px 40px; border-radius: 24px; }
  .ps-nextq .ps-bub { max-width: 92%; font-size: 16px; }
  .ps-nextq__k { right: 20px; }
  .ps-funnel { padding: 24px 16px 44px; gap: 34px; }
  .ps-funnel__r { min-width: 120px; height: 56px; }
  .ps-funnel__r > span:last-child { left: 50%; top: calc(100% + 6px); transform: translateX(-50%); font-size: 14px; }

  /* stack cards */
  .ps-scard { padding: 24px 20px; gap: 24px; border-radius: 24px; }
  .ps-scard__n { font-size: 52px; letter-spacing: -1.5px; }
  .ps-scard__txt p { font-size: 17px; line-height: 27px; }
  .ps-sv--aud, .ps-sv--arr { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ps-sv--prev { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ps-sv--prev .ps-phone--lg { width: 100%; max-width: 300px; justify-self: center; min-height: 0; }
  .ps-card--kpi b { font-size: 44px; }
  .ps-fmt { flex-wrap: wrap; }
  .ps-outline--st li { align-items: start; }
  .ps-outline--st li span { white-space: normal; overflow: visible; }
  .ps-outline--st li > b, .ps-outline--st li > em { margin-top: 2px; }

  /* agents and files tracks */
  .ps-agents .wm-h__sticky, .ps-files .wm-h__sticky, .ps-pfh .wm-h__sticky { padding: 72px 0 64px; }
  .ps-agents__track, .ps-files__track, .ps-pfh__track { padding: 0 16px; gap: 14px; }
  :is(.ps-agents, .ps-files, .ps-pfh) .wm-h__sticky { scroll-padding: 0 16px; }
  .ps-agent { flex-basis: min(300px, 82vw); min-height: 0; padding: 22px; }
  .ps-agent h3 { margin-top: 6px; font-size: 22px; line-height: 28px; }
  .ps-file { flex-basis: min(280px, 78vw); min-height: 0; }
  .ps-file:nth-child(even) { transform: none; }
  .ps-files .wm-h__track, .ps-agents .wm-h__track { padding-bottom: 8px; }

  /* video pipeline: a vertical list */
  .ps-vp { margin: 0 0 48px; }
  .ps-vp__list { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .ps-vp__list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: start; text-align: left; }
  .ps-vp__dot, .ps-vp__list li:nth-child(even) .ps-vp__dot { grid-row: 1 / span 2; width: 52px; height: 52px; margin-top: 0; box-shadow: 0 0 0 6px rgba(51,16,44,1), 0 0 24px rgba(232,70,111,.3); }
  .ps-vp__list h3 { margin-top: 2px; }
  .ps-vp__list p { font-size: 16px; line-height: 24px; }
  .ps-vcard { grid-template-columns: minmax(0, 1fr); }
  .ps-vtile--lg { min-height: 220px; }
  .ps-vcard__b { padding: 20px; }
  .ps-csv { padding: 18px; }
  .ps-csv table { display: block; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  .ps-csv td:nth-child(3) { min-width: 200px; }

  /* bento: one column; the wide tiles stack their text above the drawing */
  .ps-bento { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ps-tile--w2, .ps-tile--w4, .ps-tile--h2 { grid-column: auto; grid-row: auto; }
  .ps-tile__in { gap: 16px; padding: 18px; border-radius: 22px; }
  .ps-tile--w1 .ps-tile__in, .ps-tile--w2.ps-tile--h1 .ps-tile__in { min-height: 0; }
  .ps-tile--w2.ps-tile--h1 .ps-tile__in, .ps-tile--w4 .ps-tile__in { flex-direction: column; }
  .ps-tile--w2.ps-tile--h1 .ps-tile__txt, .ps-tile--w4 .ps-tile__txt { flex: none; align-self: stretch; padding: 0 4px; }
  .ps-tile--w2.ps-tile--h1 .ps-tile__vis, .ps-tile--w4 .ps-tile__vis { order: 0; }
  .ps-tile__txt { padding: 0 4px; }
  .ps-tile__txt p { font-size: 16px; line-height: 24px; }
  .ps-tile--h2 .ps-tile__vis, .ps-tile--w4 .ps-tile__vis { padding: 18px; }
  .ps-m-outline li { grid-template-columns: 16px 26px minmax(0, 1fr); row-gap: 6px; }
  .ps-m-outline li em { grid-column: 3; justify-self: start; }
  .ps-m-files { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ps-m-files li { padding: 12px 6px; }

  /* methods */
  .ps-m1 { padding: 26px 22px; border-radius: 24px; }
  .ps-m1__rules > li { grid-template-columns: 68px minmax(0, 1fr); column-gap: 12px; }
  .ps-m1__rules > li > b { font-size: 26px; }
  .ps-mth li a { grid-template-columns: 44px minmax(0, 1fr) 24px; gap: 12px; padding: 18px 4px; }
  .ps-mth__n { font-size: 26px; }
  .ps-mth__t b { font-size: 19px; line-height: 25px; }
  .ps-mth__t small { font-size: 16px; line-height: 23px; }

  /* example drawings */
  .ps-exrep, .ps-askex, .ps-apiex2 { grid-template-columns: minmax(0, 1fr); }
  .ps-gb--h .ps-gb__p { grid-template-columns: minmax(0, 1fr) 48px; }

  /* Ask the study */
  .ps-pin__steps p { font-size: 16px; line-height: 24px; }
  .ps-chatwin .wm-pin__layers { padding: 16px; }
  .ps-chatwin__in { margin: 0 16px 16px; }
  .ps-chatwin__h { flex-wrap: wrap; row-gap: 6px; padding: 12px 16px; }
  .ps-chatwin__h em { margin-left: 0; flex-basis: 100%; }
  .ps-pin__layer .ps-bub { font-size: 15px; }
  .ps-engine { padding: 14px; }
  .ps-engine th, .ps-engine td { padding: 10px 6px; }
  .ps-engine table { font-size: 14px; }
  .ps-ledger-sec { --ps-led: minmax(0, 1fr); }
  .ps-ledger__row { gap: 16px; padding: 26px 0; }
  .ps-ledger__what { grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
  .ps-ledger__n { font-size: 30px; }
  .ps-ledger__what p { font-size: 16px; line-height: 24px; }
  .ps-ledger__ask::after { right: auto; left: 50%; top: auto; bottom: -15px; margin: 0 0 0 -6px; transform: rotate(135deg); }
  .ps-ledger__get { padding: 14px; }
  .ps-ledger__row::before { display: none; }
  .ps-rcpt__list { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ps-rcpt__list p { font-size: 16px; line-height: 24px; }
  .ps-rcpt { padding: 24px 20px 30px; }

  /* Reports */
  .ps-rfeed__list { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ps-rcard--wide, .ps-rcard:last-child:nth-child(even) { flex-direction: column; align-items: stretch; gap: 18px; }
  .ps-rcard--wide .ps-rcard__vis, .ps-rcard:last-child:nth-child(even) .ps-rcard__vis { flex: none; }
  .ps-rcard__vis { min-height: 180px; padding: 16px; }
  .ps-rcard__txt p { font-size: 16px; line-height: 24px; }
  .ps-m-cv { padding: 14px; }
  .ps-cv { grid-template-columns: minmax(0, 1fr); }
  .ps-cv__vis { height: auto; min-height: 96px; }
  .ps-readers { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 16px; border-radius: 24px; }
  .ps-readers > svg { display: none; }
  .ps-rd { position: relative; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; width: auto; }
  .ps-rd--c { grid-column: 1 / -1; transform: none; width: auto; }

  /* Consultant */
  .ps-cs__chat { padding: 18px 16px; border-radius: 24px; }
  .ps-cs__chat .ps-bub { max-width: 92%; padding: 12px 14px; }
  .ps-cs__done { align-self: stretch; justify-content: center; line-height: 1.35; text-align: center; }
  .ps-cs__steps p { font-size: 16px; line-height: 24px; }
  .ps-plancard--lg { padding: 22px 18px; border-radius: 24px; }
  .ps-plancard--lg li, .ps-plancard--lg li:has(> .ps-plancard__ok) { grid-template-columns: minmax(0, 1fr) 22px; column-gap: 12px; row-gap: 2px; }
  .ps-plancard--lg li > span { grid-column: 1; grid-row: 1; }
  .ps-plancard--lg li > b { grid-column: 1; grid-row: 2; }
  .ps-plancard--lg .ps-plancard__ok { grid-column: 2; grid-row: 1 / span 2; }
  .ps-plancard--lg li span { font-size: 14px; }
  /* the spine moves to the left: dot | text, the drawing under the text */
  .ps-guard__spine { left: 22px; top: 22px; }
  .ps-guard__list { gap: 40px; }
  .ps-guard__row { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 18px; align-items: start; }
  .ps-guard__row > * { grid-row: auto; }
  .ps-guard__dot { grid-column: 1; grid-row: 1; box-shadow: 0 0 0 6px #fff, 0 0 0 7px var(--ps-line); }
  .ps-guard__row--l .ps-guard__txt, .ps-guard__row--r .ps-guard__txt { grid-column: 2; grid-row: 1; align-items: flex-start; text-align: left; }
  .ps-guard__row--l .ps-guard__vis, .ps-guard__row--r .ps-guard__vis { grid-column: 2; grid-row: 2; }
  .ps-guard__n { font-size: 38px; }
  .ps-guard__txt h3 { font-size: 22px; line-height: 28px; }
  .ps-guard__vis { min-height: 0; padding: 20px 16px; border-radius: 22px; }
  .ps-cmeth__list a { height: auto; min-height: 52px; padding: 8px 18px 8px 8px; line-height: 1.3; }

  /* Pocketsfull Ai */
  .ps-sides__grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ps-side-card { padding: 26px 22px; border-radius: 24px; }
  .ps-pfc { flex-basis: min(300px, 82vw); min-height: 0; padding: 18px; }
  .ps-pfc--dark, .ps-pfc--wide { flex-basis: min(320px, 86vw); }
  .ps-pfc p { font-size: 16px; line-height: 24px; }
  .ps-m-shield { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .ps-m-shield__log li { grid-template-columns: minmax(0, 1fr) auto; row-gap: 4px; }
  .ps-m-shield__log li > span { grid-column: 1 / -1; grid-row: 2; }
  .ps-mt__list { grid-template-columns: minmax(0, 1fr); }
  .ps-mt__list li, .ps-mt__list li + li, .ps-mt__list li:nth-child(odd) { padding: 22px 0 6px; border-left: 0; margin-top: 0; }
  .ps-mt__list li + li { border-top: 1px solid rgba(255,179,199,.22); }
  .ps-mt__list p { font-size: 16px; line-height: 24px; }
  .ps-abt2 > div { flex-direction: column; }
  .ps-tl__s span { font-size: 14px; }

  /* step strips: one per row */
  .ps-strip__list { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .ps-strip__list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; }
  .ps-strip__n { grid-row: 1 / span 2; width: 52px; height: 52px; margin-bottom: 0; }
  .ps-strip__list h3 { align-self: center; font-size: 19px; line-height: 26px; }

  /* Sampleeye */
  .ps-vtl__line { left: 22px; }
  .ps-vtl__s { grid-template-columns: 44px minmax(0, 1fr); gap: 0 16px; }
  .ps-vtl__dot { width: 44px; height: 44px; font-size: 16px; }
  .ps-vtl__b { padding-top: 6px; }
  .ps-vtl__st { grid-column: 2; margin-top: 14px; }
  .ps-vtl__list { gap: 32px; }
  .ps-lane { padding: 22px 18px; border-radius: 22px; }
  .ps-selog { padding: 14px; }
  .ps-selog__proj li { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 64px; gap: 10px; }
  .ps-selog th, .ps-selog td { padding-left: 6px; padding-right: 6px; }
  .ps-selog td:nth-child(4), .ps-selog td:nth-child(5) { white-space: normal; line-height: 1.25; }
  .ps-selog td .ps-oc { height: auto; min-height: 20px; padding: 3px 8px; white-space: normal; line-height: 1.2; }
  .ps-m-limit .ps-lim__h { flex-wrap: wrap; row-gap: 4px; padding-right: 96px; }
  .ps-sef p { font-size: 16px; line-height: 24px; }
  .ps-seflow { padding: 20px 16px; border-radius: 22px; }
  .ps-seflow__r { grid-template-columns: minmax(0, 1fr) 56px; row-gap: 6px; column-gap: 10px; }
  .ps-seflow__r > span:first-child { grid-column: 1 / -1; }
  .ps-seflow__r > .ps-bar { grid-column: 1; grid-row: 2; }
  .ps-seflow__r > b { grid-column: 2; grid-row: 2; }

  .ps-seq__head b { font-size: 14px; }
  .ps-seq__head small { font-size: 12px; }
  .ps-apiout__list li { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px; }
  .ps-con__list li { grid-template-columns: 28px minmax(0, 1fr) 26px; gap: 8px 12px; padding: 18px 16px; }
  .ps-con__list em { grid-column: 2; grid-row: 2; justify-self: start; }
  .ps-con__ok { grid-column: 3; grid-row: 1; }
  .ps-con__b p { font-size: 16px; line-height: 24px; }
  .ps-con__h { padding: 12px 16px; flex-wrap: wrap; }
  .ps-con__f { padding: 14px 16px; }
  .ps-apiex2__c { padding: 18px; }
  .ps-apiex2 li { grid-template-columns: minmax(0, 128px) minmax(0, 1fr) 34px; }
}

/* ---------- 480: phone ---------- */
@media (max-width: 479.98px) {
  .ps-hero__chips { gap: 6px; }
  .ps-hero__chips li { padding: 0 12px 0 10px; }
  .ps-stage { margin-top: 32px; padding-bottom: 48px; }
  .ps-demo:not(.is-run) .ps-scene.is-rest { padding: 14px; }
  .ps-hrow { grid-template-columns: minmax(0, 104px) minmax(0, 1fr) 38px; gap: 8px; }
  .ps-scard { padding: 22px 16px; }
  .ps-vp__list li { grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; }
  .ps-vp__dot, .ps-vp__list li:nth-child(even) .ps-vp__dot { width: 48px; height: 48px; }
  .ps-m-files { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the start logs drop their clock column so the other columns fit */
  .ps-log th:first-child, .ps-log td:first-child, .ps-selog th:first-child, .ps-selog td:first-child { display: none; }
  .ps-readers { grid-template-columns: minmax(0, 1fr); }
  .ps-seq__head { padding: 10px 6px; }
  .ps-funnel__r > span:last-child { white-space: normal; text-align: center; width: max-content; max-width: 280px; }
}

/* ---------- touch screens: no hover lifts that stick after a tap ---------- */
@media (hover: none) and (pointer: coarse) {
  .ps-rfeed__rail a { position: relative; }
  .ps-rfeed__rail a::after { content: ""; position: absolute; left: 0; right: 0; top: -3px; bottom: -3px; }
  .ps-tile__in:hover, .ps-cmeth__list a:hover, .ps-mth li a:hover .ps-mth__go { transform: none; }
  .ps-mth li a:hover { padding-left: 8px; }
}