/* assets/seewhat.css · Home "See what you can do" demo (build spec C2). Photo slots (.shot) come from assets/shot.css.
   Light mode (home = community). No magenta in this section: the home action is the hero CTA, and the insight is a chart mark only.
   Zone fills: purple (Acquisition: finding and winning customers) with white labels; green (Expansion: keeping and growing them) with black labels. Cyan, gold and
   green are never text on light. Motion: brand UI tier only; every panel ends on a held final state; reduced motion = final state. */

/* ============ SECTION ============ */
.seewhat{padding:clamp(8px,2vh,24px) 0 clamp(48px,7vh,88px)}
.seewhat__open{margin:0 auto clamp(20px,3vw,32px);text-align:center;justify-items:center;max-width:44rem}
.seewhat__open .t-section{margin:0}

.seewhat__frame{display:grid;grid-template-columns:minmax(260px,320px) minmax(0,1fr);grid-template-areas:"list stage" "match match";
  gap:16px 24px;padding:16px;border-radius:24px;background:#fff;box-shadow:var(--card-shadow)}

/* ---- the list of things you can do ---- */
.seewhat__list{grid-area:list;list-style:none;margin:0;padding:0;align-self:start}
.seewhat__list > li + li{border-top:1px solid var(--line)}
.swt{width:100%;min-height:56px;display:grid;grid-template-columns:24px minmax(0,1fr) 24px;column-gap:12px;align-items:center;
  padding:10px 12px;border:0;border-radius:12px;background:transparent;color:var(--ink);text-align:start;font:inherit;cursor:pointer;
  transition:background-color var(--dur-instant) var(--ease-standard)}
.swt > svg{grid-row:1 / span 2;color:var(--slate)}
.swt__name{font:600 var(--role-dense)/var(--lh-head) var(--font-sans);font-size:1.0625rem;letter-spacing:-.01em}
.swt__sub{grid-column:2;font-size:var(--t-small);line-height:var(--lh-small);color:var(--fg-soft)}
.swt__mark{grid-column:3;grid-row:1 / span 2;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;
  border:1.5px solid var(--slate);color:var(--slate);
  transition:background-color var(--dur-instant) var(--ease-standard), border-color var(--dur-instant) var(--ease-standard), color var(--dur-instant) var(--ease-standard)}
.swt__mark svg{width:14px;height:14px}
.swt__mark .i-check{display:none}
.swt:hover{background:color-mix(in oklab, var(--ink) 4%, #fff)}
.swt.is-current{background:color-mix(in oklab, var(--ink) 6%, #fff)}
.swt[aria-pressed="true"]{background:color-mix(in oklab, var(--ink) 6%, #fff)}
.swt[aria-pressed="true"] .swt__mark{background:var(--ink);border-color:var(--ink);color:#fff}
.swt[aria-pressed="true"] .swt__mark .i-plus{display:none}
.swt[aria-pressed="true"] .swt__mark .i-check{display:block}
.swt:focus-visible{outline:3px solid var(--focus-ring,#3B06D4);outline-offset:2px}

/* ---- the stage: every panel stacked in one cell, so autoplay never changes the height ---- */
.seewhat__stage{grid-area:stage;position:relative;display:grid;grid-template:auto / minmax(0,1fr);
  aspect-ratio:4/3;padding:32px;border-radius:16px;background:var(--ghost-white,#F8F8FA);container-type:inline-size}  /* no overflow clip: it would cancel the 4:3 / 4:5 minimum and cut tall panels */
.swp{grid-area:1 / 1;display:flex;flex-direction:column;gap:16px;min-width:0;opacity:1;
  transition:opacity var(--dur-quick) var(--ease-standard), visibility 0s}
.swp[hidden]{display:flex;visibility:hidden;opacity:0;transition:opacity var(--dur-quick) var(--ease-exit), visibility 0s var(--dur-quick)}
.seewhat__bar{position:absolute;top:10px;inset-inline-end:12px;display:flex;align-items:center;gap:8px;z-index:2}
.seewhat__note{margin:0;color:var(--slate)}
.seewhat__pause{min-height:32px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer;
  transition:border-color var(--dur-instant) var(--ease-standard)}
.seewhat__pause:hover{border-color:var(--ink)}
.seewhat__pause:focus-visible{outline:3px solid var(--focus-ring,#3B06D4);outline-offset:2px}
.seewhat[data-picked] .seewhat__pause, .seewhat__frame[data-picked] .seewhat__pause{display:none}

/* panel head */
.swp__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-inline-end:150px}
.swp__k{margin:0 0 4px;color:var(--slate)}
.swp__t{margin:0;color:var(--ink);text-wrap:balance}
.swp__foot{margin:auto 0 0;font-size:var(--t-small);line-height:var(--lh-small);color:var(--fg-soft)}
.swp-chip{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:2px 10px;border-radius:999px;background:var(--purple-100,#EBEEFF);color:var(--purple);white-space:nowrap}  /* purple-100, not purple-subtle: subtle (#F6F8FF) vanishes on the ghost-white stage */

/* shared motion: rows rise in, states change in 120ms */
@keyframes sw-row{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes sw-fade{from{opacity:0}to{opacity:1}}
@keyframes sw-lit{from{background-color:#fff;color:var(--slate);border-color:var(--line)}to{background-color:var(--lit-bg);color:var(--lit-fg);border-color:var(--lit-bg)}}
@keyframes sw-tick{from{background-color:#fff;border-color:var(--slate);color:transparent}to{background-color:var(--ink);border-color:var(--ink);color:#fff}}
.swp.is-run .sw-in{animation:sw-row var(--dur-base) var(--ease-emphasized) both;animation-delay:calc(var(--i, 0) * 80ms)}
.swp.is-run .sw-lit{animation:sw-lit var(--dur-instant) var(--ease-standard) both;animation-delay:calc(var(--t, 0) * 1ms)}
.swp.is-run .sw-tick{animation:sw-tick var(--dur-instant) var(--ease-standard) both;animation-delay:calc(var(--t, 0) * 1ms)}
.swp.is-run .sw-show{animation:sw-fade var(--dur-instant) var(--ease-standard) both;animation-delay:calc(var(--t, 0) * 1ms)}

/* lit and ticked: the held final state (also the reduced-motion state) */
.sw-lit{--lit-bg:var(--purple);--lit-fg:#fff;background:var(--lit-bg);color:var(--lit-fg);border:1px solid var(--lit-bg)}
.sw-lit.z-exp{--lit-bg:var(--green);--lit-fg:#000}
.sw-tick{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink);background:var(--ink);color:#fff}
.sw-tick svg{width:11px;height:11px}

/* ---- room: the WhatsApp rooms ---- */
.swp-rooms{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
.swp-rooms li{display:flex;align-items:center;gap:10px;min-height:38px;padding:6px 10px;border-radius:12px;background:#fff;font-size:var(--t-small);font-weight:500;color:var(--ink)}
.swp-rooms__av{flex:none;width:26px;height:26px;display:grid;place-items:center;border-radius:8px;background:var(--ghost-white);font:500 var(--t-micro)/1 var(--font-mono);letter-spacing:.04em;color:var(--slate)}
.swp-rooms__ok{margin-inline-start:auto;display:inline-flex;align-items:center;gap:6px;font:500 var(--t-micro)/1 var(--font-mono);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--ink)}
@container (min-width:520px){ .swp-rooms{grid-template-columns:1fr 1fr} }

/* ---- aiws: the course rail + the seven assistants ---- */
.swp-ring{flex:none;position:relative;width:64px;height:64px}
.swp-ring svg{width:64px;height:64px;transform:rotate(-90deg)}
.swp-ring circle{fill:none;stroke-width:6}
.swp-ring .bg{stroke:var(--silver,#D1D1D9)}
.swp-ring .fg{stroke:var(--purple);stroke-linecap:round;stroke-dasharray:163.4;stroke-dashoffset:0}
.swp-ring b{position:absolute;inset:0;display:grid;place-items:center;font:600 var(--t-small)/1 var(--font-mono);color:var(--ink)}
@keyframes sw-ring{from{stroke-dashoffset:163.4}to{stroke-dashoffset:0}}
.swp.is-run .swp-ring .fg{animation:sw-ring 3000ms var(--ease-standard) both}
.swp-parts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:4px 16px;counter-reset:part}
.swp-parts li{display:flex;align-items:center;gap:10px;min-height:30px;font-size:var(--t-small);line-height:1.3;color:var(--ink)}
.swp-parts li i{font:500 var(--t-micro)/1 var(--font-mono);font-style:normal;letter-spacing:var(--tr-label);color:var(--slate);width:20px;flex:none}
.swp-ais{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.swp-ais li{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:4px 10px;border-radius:999px;background:#fff;font-size:.8125rem;font-weight:500;color:var(--slate)}
/* tool chips: dim at rest, full colour when lit (the owner's logo exception, 29 Oct 2026, applied to tool chips) */
.swp-ais img{width:16px;height:16px;object-fit:contain;filter:grayscale(1);opacity:.6}
.swp-ais li.is-pref{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.swp-ais li.is-pref img{filter:none;opacity:1}
.swp-ais li.is-pref em{font:500 var(--t-micro)/1 var(--font-mono);font-style:normal;letter-spacing:var(--tr-label);text-transform:uppercase}
.swp-sub{margin:0;font-size:var(--t-small);color:var(--fg-soft)}

/* ---- agents: the Prospecting relay ---- */
.swp-relay{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;position:relative}
.swp-relay li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;min-height:38px}
.swp-relay__node{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 12px;border-radius:999px;font-size:var(--t-small);font-weight:600;grid-column:1 / span 2;justify-self:start}
.swp-relay__node small{font:500 var(--t-micro)/1 var(--font-mono);letter-spacing:var(--tr-label);opacity:.85}
.swp-relay__gate{font:500 var(--t-micro)/1 var(--font-mono);letter-spacing:var(--tr-label);text-transform:uppercase;color:inherit;padding:3px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor;margin-inline-start:2px}
.swp-relay__out{grid-column:3;font-size:.8125rem;color:var(--fg-soft);white-space:nowrap}
@container (max-width:519px){
  .swp-relay li{grid-template-columns:minmax(0,1fr)}
  .swp-relay__out{grid-column:1;padding-inline-start:14px;white-space:normal}
}

/* ---- crga: the INFINITE Pipeline as a racetrack loop ---- */
.swp-loop{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 10px;padding:18px 14px}
.swp-loop{list-style:none;margin:0}
.swp-loop::before{content:"";position:absolute;top:calc(18px + 28px);bottom:calc(18px + 28px);left:6px;right:6px;border:2px dashed var(--slate-300,#C0C1E4);border-radius:999px}
.swp-loop__n{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:56px;padding:6px 4px;border-radius:14px;text-align:center}
.swp-loop__n b{font:600 var(--t-small)/1.15 var(--font-sans);overflow-wrap:normal;hyphens:manual}
.swp-loop__n small{font:500 var(--t-micro)/1 var(--font-mono);letter-spacing:.04em;text-transform:uppercase}
.swp-models{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.swp-models li{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding-block:3px;padding-inline:4px 10px;border-radius:999px;background:#fff;font-size:.8125rem;font-weight:500;color:var(--ink)}

/* ---- gtmeng: four lanes wire into one pipeline ---- */
.swp-wire{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(40px,.7fr) minmax(88px,.5fr);align-items:stretch;gap:0}
.swp-wire__lanes{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.swp-wire__lanes li{display:flex;align-items:center;min-height:44px;padding:6px 12px;border-radius:12px;font-size:var(--t-small);font-weight:600;line-height:1.25}
.swp-wire__lanes li small{display:block;font-weight:400;font-size:.75rem;opacity:.9}
.swp-wire > svg{width:100%;height:100%;overflow:visible}
[dir="rtl"] .swp-wire > svg{transform:scaleX(-1)}   /* lanes sit on the right in Arabic: the curves converge leftward */
.swp-wire path{fill:none;stroke:var(--purple);stroke-width:2;stroke-linecap:round}
/* The draw is a wipe (clip-path), not a dash: under vector-effect:non-scaling-stroke a pathLength="1" dash is measured
   in screen pixels, so on a wide stage it broke into dash + gap and the curves never reached the pipeline. */
@keyframes sw-draw{from{clip-path:inset(-4px 100% -4px -4px)}to{clip-path:inset(-4px -4px -4px -4px)}}
.swp.is-run .swp-wire path{animation:sw-draw var(--dur-slow) var(--ease-standard) both;animation-delay:calc(var(--t, 0) * 1ms)}
.swp-wire__sink{align-self:center;min-height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:10px;border-radius:16px;text-align:center;font-weight:600;font-size:var(--t-small);line-height:1.25}

/* ---- analytics: a dashboard skeleton, no values ---- */
.swp-dash{display:grid;gap:12px}
.swp-dash__kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.swp-dash__kpi{display:grid;gap:8px;padding:12px;border-radius:12px;background:#fff}
.swp-dash__kpi i{display:block;height:8px;border-radius:4px;background:var(--silver,#D1D1D9)}
.swp-dash__kpi i + i{height:16px;width:60%;background:var(--slate-200,#DBDCF3)}
.swp-dash__chart{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:end;gap:8px;height:150px;padding:12px 12px 0;border-radius:12px;background:#fff;border-bottom:1px solid var(--silver,#D1D1D9)}
.swp-dash__bar{height:var(--v);border-radius:6px 6px 0 0;background:var(--purple-200,#D5DCFF);transform-origin:bottom}
.swp-dash__bar.z-exp{background:var(--green-200,#92F1B7)}
@keyframes sw-grow{from{transform:scaleY(0)}to{transform:none}}
.swp.is-run .swp-dash__bar{animation:sw-grow var(--dur-slow) var(--ease-emphasized) both;animation-delay:calc(var(--i, 0) * 80ms)}
.swp-dash__axis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 12px;margin-top:-4px}
.swp-dash__axis span{font:500 var(--t-micro)/1.3 var(--font-mono);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--slate);text-align:center}

/* ---- live: two session cards and one coming-later card ---- */
.swp-live{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.swp-live__c{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 12px;align-items:center;padding:14px 16px;border-radius:12px;background:#fff;box-shadow:var(--card-shadow)}
.swp-live__c > svg{grid-row:1 / span 2;width:40px;height:40px;padding:8px;border-radius:10px;background:var(--purple-subtle,#F6F8FF);color:var(--purple)}
.swp-live__c b{font-size:1rem;color:var(--ink)}
.swp-live__c span{font-size:var(--t-small);color:var(--fg-soft)}
a.swp-live__c--later{background:transparent;box-shadow:none;outline:1.5px dashed var(--slate-400,#A4A4C7);outline-offset:-1.5px;text-decoration:none}
a.swp-live__c--later > svg{background:transparent;color:var(--slate)}
a.swp-live__c--later b{color:var(--slate)}
a.swp-live__c--later:hover{outline-color:var(--ink)}
a.swp-live__c--later:focus-visible{outline:3px solid var(--focus-ring,#3B06D4);outline-offset:2px}

/* ---- teams: eight seats fill, then what the company gets ---- */
.swp-seats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(8,minmax(0,64px));gap:8px}
.swp-seats li{aspect-ratio:1/1;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);--lit-bg:var(--ink);--lit-fg:#fff}
.swp-seats svg{width:45%;height:45%}
.swp-seats li.is-more{border-style:dashed;color:var(--ink-muted, #4A4A68)}   /* a team starts at 3 seats (owner, 30 Oct 2026); the dashed seats are room for more */
@container (max-width:519px){ .swp-seats{grid-template-columns:repeat(4,minmax(0,64px))} }
.swp-gets{list-style:none;margin:0;padding:0;display:grid;gap:6px}
/* the seat caps in one line (owner, 30 Oct 2026): Pro up to 3 seats, Max up to 10, Infinite any number */
.swp-tiers{margin:0;display:flex;flex-wrap:wrap;gap:4px 16px;color:var(--slate)}
.swp-tiers b{font-weight:600;color:var(--ink)}
.swp-gets li{display:flex;align-items:center;gap:10px;min-height:40px;padding:6px 12px;border-radius:12px;background:#fff;font-size:var(--t-small);font-weight:500;color:var(--ink)}

/* ---- mcp: Claude, a dashed line, then RIVET ---- */
.swp-mcp{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center}
.swp-mcp__row{display:flex;align-items:center;justify-content:center;width:100%;max-width:420px}
.swp-mcp__node{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:8px 16px;border-radius:14px;background:#fff;box-shadow:var(--card-shadow);font-weight:600;color:var(--ink)}
.swp-mcp__node img{width:20px;height:20px}
.swp-mcp__node .rv-logo{width:72px;height:auto;color:var(--ink)}
.swp-mcp__line{flex:1;min-width:40px;height:2px;margin:0 8px;background:repeating-linear-gradient(90deg,var(--slate) 0 6px,transparent 6px 12px);transform-origin:left}
[dir="rtl"] .swp-mcp__line{transform-origin:right}
@keyframes sw-line{from{transform:scaleX(0)}to{transform:none}}
.swp.is-run .swp-mcp__line{animation:sw-line var(--dur-slow) var(--ease-standard) both;animation-delay:calc(var(--t, 0) * 1ms)}
.swp-mcp p{margin:0;max-width:36ch;font-size:var(--t-small);line-height:var(--lh-small);color:var(--fg-soft)}
.swp-mcp .btn{min-height:44px}

/* ---- wide stage (desktop ≥1024): bigger rows so each mini-screen holds the 4:3 stage ---- */
@container (min-width:720px){
  .swp{gap:20px}
  .swp-rooms{gap:10px}
  .swp-rooms li{min-height:60px;padding:8px 14px;font-size:1rem}
  .swp-rooms__av{width:34px;height:34px}
  .swp-parts{gap:6px}
  .swp-parts li{min-height:40px;font-size:1rem}
  .swp-relay{gap:10px}
  .swp-relay li{min-height:46px}
  .swp-relay__node{min-height:40px;padding:6px 16px;font-size:1rem}
  .swp-relay__out{font-size:var(--t-small)}
  .swp-loop{gap:56px 14px;padding:24px 18px}
  .swp-loop::before{top:calc(24px + 44px);bottom:calc(24px + 44px);left:8px;right:8px}
  .swp-loop__n{min-height:88px;gap:6px}
  .swp-loop__n b{font-size:1.125rem}
  .swp-models li{min-height:34px;font-size:var(--t-small)}
  .swp-wire__lanes{gap:12px}
  .swp-wire__lanes li{min-height:68px;padding:10px 16px;font-size:1rem}
  .swp-wire__sink{min-height:88px;font-size:1rem}
  .swp-dash__kpi{padding:16px;gap:10px}
  .swp-dash__chart{height:300px}
  .swp-live{gap:14px}
  .swp-live__c{padding:20px;grid-template-columns:48px minmax(0,1fr)}
  .swp-live__c > svg{width:48px;height:48px;padding:10px}
  .swp-live__c b{font-size:1.125rem}
  .swp-live__c span{font-size:1rem}
  .swp-seats{grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}
  .swp-gets{gap:10px}
  .swp-gets li{min-height:56px;padding:8px 16px;font-size:1rem}
  .swp-mcp{gap:28px}
  .swp-mcp__node{min-height:64px;padding:12px 20px;font-size:1.125rem}
  .swp-mcp__node .rv-logo{width:96px}
  .swp-mcp p{font-size:1rem}
}

/* ---- the match bar ---- */
.seewhat__match{grid-area:match;display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:16px 16px 8px;border-top:1px solid var(--line)}
.seewhat__who{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-width:0}
.seewhat__who .t-meta{margin:0;color:var(--slate)}
.seewhat__tier{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.seewhat__tier b{color:var(--ink)}
.seewhat__tier .t-small{color:var(--fg-soft)}
.seewhat__fine{margin:0;margin-inline-start:auto;max-width:34ch;color:var(--fg-soft)}
.seewhat__match .btn--ink{min-height:48px;background:var(--ink);border-color:var(--ink);color:#fff}
.seewhat__match .btn--ink:hover{background:#000;border-color:#000}
.seewhat__match .btn--ink:focus-visible{outline:3px solid var(--focus-ring,#3B06D4);outline-offset:2px}
/* two pulse rings on the match CTA after the first pick, then still (no infinite pulse) */
@keyframes sw-pulse{from{box-shadow:0 0 0 0 color-mix(in oklab, var(--ink) 35%, transparent)}to{box-shadow:0 0 0 8px transparent}}
.seewhat__match .btn--ink.is-pulse{animation:sw-pulse var(--dur-slow) var(--ease-standard) 2}

/* ============ TABLET 640–1023 ============ */
@media (max-width:1023px){
  .seewhat__frame{grid-template-columns:minmax(0,1fr);grid-template-areas:"list" "stage" "match"}
  .seewhat__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .seewhat__list > li + li{border-top:0}
  .swt{height:100%;border-radius:12px;box-shadow:inset 0 0 0 1px var(--line)}
  .swt[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--ink)}
  .swt__name{font-size:var(--t-small)}
  .swt__sub{font-size:.75rem}
}
/* ============ MOBILE <640 ============ */
@media (max-width:639px){
  .seewhat__frame{padding:12px;gap:12px;border-radius:20px}
  .seewhat__list{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:4px;padding:2px 4px 6px;margin:0 -4px;overscroll-behavior-x:contain;scrollbar-width:none}
  .seewhat__list::-webkit-scrollbar{display:none}
  .seewhat__list > li{flex:0 0 auto;scroll-snap-align:start}
  .swt{width:auto;min-height:44px;grid-template-columns:20px auto 20px;padding:8px 10px;column-gap:8px}
  .swt > svg{grid-row:1;width:18px;height:18px}
  .swt__sub{display:none}
  .swt__name{white-space:nowrap}
  .swt__mark{grid-row:1;width:20px;height:20px}
  .seewhat__stage{aspect-ratio:4/5;padding:20px 16px 16px}
  .swp__head{padding-inline-end:0;flex-direction:column;gap:8px}
  .seewhat__bar{position:static;grid-area:auto;justify-content:flex-end;margin:-6px 0 6px}
  .seewhat__stage{grid-template:auto auto / minmax(0,1fr)}
  .seewhat__stage > .swp{grid-area:2 / 1}
  /* phones: the stage sizes to the shown panel (4:5 stays the minimum), so short panels leave no dead space above the match bar */
  .seewhat__stage > .swp[hidden]{display:none}
  .seewhat__stage > .swp:not([hidden]){animation:sw-fade var(--dur-quick) var(--ease-standard)}
  .seewhat__match{position:sticky;bottom:12px;z-index:3;gap:8px;padding:10px 12px;border-top:0;border-radius:16px;background:#fff;box-shadow:0 8px 28px rgba(0,0,0,.12)}
  .seewhat__who{gap:8px}
  .seewhat__fine{margin:0;flex-basis:100%;order:3;font-size:.75rem;line-height:1.4}
  .seewhat__match .btn--ink{flex-basis:100%;order:2;min-height:44px}
  .swp-loop{gap:24px 4px;padding:16px 4px}
  .swp-loop::before{top:calc(16px + 28px);bottom:calc(16px + 28px);left:2px;right:2px}
  .swp-loop__n small{letter-spacing:0}
  .swp-loop__n{padding-inline:0}
  .swp-loop__n b{font-size:var(--t-meta)}
}

/* ============ REDUCED MOTION: final states, instant swaps, opacity-only rows at 120ms, no pulse ============ */
@media (prefers-reduced-motion:reduce){
  .swp, .swp[hidden]{transition:none}
  .seewhat__stage > .swp:not([hidden]){animation:none}
  .swp.is-run .sw-lit, .swp.is-run .sw-tick, .swp.is-run .sw-show, .swp.is-run .swp-ring .fg,
  .swp.is-run .swp-wire path, .swp.is-run .swp-dash__bar, .swp.is-run .swp-mcp__line{animation:none}
  .swp.is-run .sw-in{animation:sw-fade var(--dur-instant) linear both;animation-delay:0s}
  .seewhat__match .btn--ink.is-pulse{animation:none}
  .swt, .swt__mark{transition:none}
  .seewhat__pause{display:none}
}