/* ==========================================================================
   FitWise whitepaper — blog design language (Ppmuseum / Cygrotesk / Space Mono,
   fwp palette) + Material 3 Expressive for the controls the blog has no pattern
   for: segmented button groups, sliders, shape-morph icon buttons, tonal cards.
   Tokens mirror post-shell.html so the site theme toggle drives this page too.
   ========================================================================== */
:root{
  --wp-bg:#000; --wp-grad:#1d1d1f; --wp-head:#f5f5f7; --wp-text:#e6e1e3;
  --wp-date:#b0b0bb; --wp-dim:#86868b; --wp-rail:#cbc4cc; --wp-railact:#fff;
  --wp-link:#ffb886; --wp-pill:#928f94; --wp-card:#151416;
  --wp-serif:"Ppmuseum","Iowan Old Style",Georgia,serif;
  --wp-sans:"Cygrotesk","Helvetica Neue",Arial,sans-serif;
  --wp-mono:"Space Mono",ui-monospace,Menlo,monospace;
  /* micro labels moved off Space Mono onto the wide grotesque */
  --wp-micro:"Cygrotesk Granddemi","Cygrotesk","Helvetica Neue",Arial,sans-serif;
  --wp-accent:#fd5151;   /* brand RED — one value, both themes */
  /* md.sys tonal surfaces, tuned to the blog's near-black ground */
  --wp-surface:#141315; --wp-surface-2:#0a0a0b; --wp-surface-3:#201f22;
  --wp-line:rgba(255,255,255,.12); --wp-line-2:rgba(255,255,255,.22);
  /* data colours: ours vs the reference suit */
  --wp-ink:#f5f5f7; --wp-ref:#ff6f61; --wp-ref-deep:#ff9084;
  --wp-soft:#4c4a4f; --wp-softer:#39373c; --wp-halo:#0a0a0b;
  --wp-heat:253,81,81; --wp-heat-a:.52; --wp-heat-ink:#f5f5f7;
  --wp-accent:#fd5151;
  --wp-glow:rgba(10,10,11,.62); --wp-tipbg:rgba(10,10,11,.94); --wp-tipline:rgba(255,111,97,.4);
  /* md.sys.shape — expressive scale */
  --wp-r-xl:28px; --wp-r-lg:20px; --wp-r-md:14px; --wp-r-sm:10px;
  --wp-spring:cubic-bezier(.2,1.25,.3,1);
  --wp-measure:756px;
  /* exact Figma tokens: card hairline, stat/joint numerals, the row rule in the
     results table, and the white@overlay+50% treatment on micro labels */
  --wp-border:#313132; --wp-num:#c5c7c5; --wp-line-3:rgba(255,255,255,.05);
  --wp-micro-ink:rgba(255,255,255,.58);
  color-scheme:dark;
}
@media(prefers-color-scheme:light){:root{
  --wp-bg:#fff; --wp-grad:#e2e2e0; --wp-head:#1c1b1d; --wp-text:#303035;
  --wp-date:#6e6e73; --wp-dim:#86868b; --wp-rail:#6e6e73; --wp-railact:#1c1b1d;
  --wp-link:#9c7262; --wp-pill:#86868b; --wp-card:#fff;
  --wp-surface:#efefed; --wp-surface-2:#fff; --wp-surface-3:#e4e4e1;
  --wp-line:rgba(60,60,67,.16); --wp-line-2:rgba(60,60,67,.3);
  --wp-ink:#1c1b1d; --wp-ref:#d6453c; --wp-ref-deep:#a82d25;
  --wp-soft:#c4c2c6; --wp-softer:#dbd9dd; --wp-halo:#fff;
  --wp-heat:232,199,102; --wp-heat-a:.80; --wp-heat-ink:#1c1b1d;
  --wp-accent:#fd5151;
  --wp-glow:rgba(255,255,255,.6); --wp-tipbg:rgba(255,255,255,.94); --wp-tipline:rgba(214,69,60,.35);
  /* the literal light-mode twin of #313132 is #e4e4e1, which is the light band
     itself — the hairline has to be darker than the ground to read at all */
  --wp-border:rgba(60,60,67,.18); --wp-num:#3a3a3c; --wp-line-3:rgba(60,60,67,.06);
  --wp-micro-ink:rgba(28,27,29,.62);
  color-scheme:light;
}}
:root[data-theme=light]{
  --wp-bg:#fff; --wp-grad:#e2e2e0; --wp-head:#1c1b1d; --wp-text:#303035;
  --wp-date:#6e6e73; --wp-dim:#86868b; --wp-rail:#6e6e73; --wp-railact:#1c1b1d;
  --wp-link:#9c7262; --wp-pill:#86868b; --wp-card:#fff;
  --wp-surface:#efefed; --wp-surface-2:#fff; --wp-surface-3:#e4e4e1;
  --wp-line:rgba(60,60,67,.16); --wp-line-2:rgba(60,60,67,.3);
  --wp-ink:#1c1b1d; --wp-ref:#d6453c; --wp-ref-deep:#a82d25;
  --wp-soft:#c4c2c6; --wp-softer:#dbd9dd; --wp-halo:#fff;
  --wp-heat:232,199,102; --wp-heat-a:.80; --wp-heat-ink:#1c1b1d;
  --wp-accent:#fd5151;
  --wp-glow:rgba(255,255,255,.6); --wp-tipbg:rgba(255,255,255,.94); --wp-tipline:rgba(214,69,60,.35);
  /* the literal light-mode twin of #313132 is #e4e4e1, which is the light band
     itself — the hairline has to be darker than the ground to read at all */
  --wp-border:rgba(60,60,67,.18); --wp-num:#3a3a3c; --wp-line-3:rgba(60,60,67,.06);
  --wp-micro-ink:rgba(28,27,29,.62);
  color-scheme:light;
}
:root[data-theme=dark]{
  --wp-bg:#000; --wp-grad:#1d1d1f; --wp-head:#f5f5f7; --wp-text:#e6e1e3;
  --wp-date:#b0b0bb; --wp-dim:#86868b; --wp-rail:#cbc4cc; --wp-railact:#fff;
  --wp-link:#ffb886; --wp-pill:#928f94; --wp-card:#151416;
  --wp-surface:#141315; --wp-surface-2:#0a0a0b; --wp-surface-3:#201f22;
  --wp-line:rgba(255,255,255,.12); --wp-line-2:rgba(255,255,255,.22);
  --wp-ink:#f5f5f7; --wp-ref:#ff6f61; --wp-ref-deep:#ff9084;
  --wp-soft:#4c4a4f; --wp-softer:#39373c; --wp-halo:#0a0a0b;
  --wp-heat:253,81,81; --wp-heat-a:.52; --wp-heat-ink:#f5f5f7;
  --wp-accent:#fd5151;
  --wp-glow:rgba(10,10,11,.62); --wp-tipbg:rgba(10,10,11,.94); --wp-tipline:rgba(255,111,97,.4);
  /* exact Figma tokens: card hairline, stat/joint numerals, the row rule in the
     results table, and the white@overlay+50% treatment on micro labels */
  --wp-border:#313132; --wp-num:#c5c7c5; --wp-line-3:rgba(255,255,255,.05);
  --wp-micro-ink:rgba(255,255,255,.58);
  color-scheme:dark;
}

/* ==========================================================================
   Desktop — measured off Figma `iIQingB8WXo3rxFITjEFxy`, page WHITEPAPER,
   frame `Whitepaper — Validation · Desktop 1440 · Dark` (1232:831).
   The grid is a 1160 container with 140 gutters at 1440, and a 756 prose
   column centred inside it. Every size below is the frame's own number.
   ========================================================================== */
/* ---------- page shell ---------- */
body{margin:0;background:var(--wp-bg);transition:background .3s}
.wp *{box-sizing:border-box}
main.wp{
  position:relative;z-index:1;display:flow-root;
  width:min(1160px,calc(100% - 64px));margin:0 auto;padding:0 0 180px;
  font-family:var(--wp-serif);color:var(--wp-text);font-size:17px;line-height:28px;
}
/* the blog's grey content band, so the report reads as part of the same site */
main.wp:before{
  content:"";position:absolute;top:340px;bottom:0;left:calc(50% - 50vw);width:100vw;
  z-index:-1;pointer-events:none;transition:background .3s;
  background:linear-gradient(180deg,var(--wp-bg) 0,var(--wp-grad) 320px,
             var(--wp-grad) calc(100% - 620px),var(--wp-bg) calc(100% - 40px));
}
/* the article column: 756 wide, centred in the 1160 container (Figma 1282:8348
   wraps every block at x=202, i.e. (1160-756)/2). The stat strip and the closing
   report card stay full width. */
main.wp>p,main.wp>ul,main.wp>ol,main.wp>h2,main.wp>h3,main.wp>.wp-corelabel,
main.wp>.tablewrap,main.wp>figure.vfig,main.wp>.unitsw{
  max-width:var(--wp-measure);margin-left:auto;margin-right:auto;
}
main.wp>h2{margin-top:72px;margin-bottom:20px}

/* ---------- prose ---------- */
.wp h2{font-family:var(--wp-serif);font-weight:400;font-size:32px;line-height:40px;
  letter-spacing:-.144px;color:var(--wp-head);scroll-margin-top:130px;transition:color .3s}
.wp h3{font-family:var(--wp-serif);font-weight:400;font-size:24px;line-height:31px;
  color:var(--wp-head);margin:40px 0 14px}
.wp p{margin:0 0 20px;font-weight:300}
.wp strong{font-weight:400;color:var(--wp-head)}
.wp em{font-style:italic;color:var(--wp-head)}
.wp a{color:var(--wp-link);text-decoration:none;border-bottom:1px solid currentColor}
.wp a strong{color:inherit}
.wp a:hover{opacity:.78}
/* that fade is for prose links only — it was dimming the cover, the buttons, the
   masthead and the whole closing card to 78% on hover */
.wp a.wp-cover:hover,.wp a.wp-btn:hover,.wp a.paper:hover,.wp a.wp-logo:hover{opacity:1}
.wp ul,.wp ol{padding-left:0;list-style:none;margin:0 0 24px;font-weight:300}
.wp ul li,.wp ol li{position:relative;padding:10px 0 10px 34px;font-size:16px;line-height:1.5;
  border-bottom:1px solid color-mix(in srgb,var(--wp-dim) 22%,transparent)}
.wp ul li:before,.wp ol li:before{content:"\2192";position:absolute;left:2px;top:9px;color:var(--wp-dim)}

/* the one micro-label recipe the whole page uses: Cy Grotesk Grand 6 / .66 tracking */
.wp-eyebrow,.wp-corelabel,.wp-cta .meta,.wp-stat .l,.vfig figcaption,.calibcap,
.rosterhead span,.rlab,
.tp-cap,.tp-clock,.tp-rate button,.tp-j .jn,.wp table.heat thead th,.papertag,
.paper .meta,.vmeta,.vverdict,.paperpage .ph{
  font-family:var(--wp-micro);font-size:6px;line-height:1.1;letter-spacing:.66px;
  text-transform:uppercase;font-weight:400;
}

/* ---------- masthead logo (Figma 1280:6765 — 119x17 at x140/y88) ---------- */
/* the design leads the column with its own wordmark, so the site nav's fixed
   logo is suppressed here — otherwise the page carries two of them. This
   stylesheet is linked from the whitepaper page only. */
.fw-logo{display:none!important}
.wp a.wp-logo,.wp-logo{display:block;width:119px;height:21px;margin:86px 0 0;
  color:var(--wp-accent);border-bottom:none}
.wp-logo svg{display:block;width:100%;height:100%;fill:currentColor}

/* ---------- hero ---------- */
.wp-hero{display:grid;grid-template-columns:1fr 300px;gap:64px;align-items:center;
  padding:70px 0 8px}
.wp-eyebrow{display:none;color:var(--wp-accent)}  /* desktop leads with the logo instead */
.wp-hero h1{font-family:var(--wp-serif);font-weight:400;font-size:62px;line-height:64px;
  letter-spacing:-1.24px;color:var(--wp-head);margin:20px 0 0;transition:color .3s}
.wp-sub{font-family:var(--wp-serif);font-size:32px;line-height:1.2;letter-spacing:-.144px;
  color:var(--wp-date);margin-top:28px}
.wp p.wp-lead{font-size:17px;line-height:28px;color:var(--wp-text);margin:48px 0 0;max-width:612px}
.wp-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:32px}
.wp-cta .meta{color:var(--wp-rail)}

/* md3-expressive filled button: pill at rest, morphs on press */
.wp a.wp-btn,.wp-btn{display:inline-flex;align-items:center;justify-content:center;
  min-width:200px;height:74px;padding:11px 39.58px;box-sizing:border-box;
  background:var(--wp-accent);border:1px solid var(--wp-accent);color:#fff;
  font-family:var(--wp-sans);font-weight:500;font-size:13px;line-height:29px;letter-spacing:.231px;
  border-radius:999px;text-decoration:none;cursor:pointer;
  transition:background .2s,color .2s,border-radius .25s var(--wp-spring),transform .25s var(--wp-spring)}
.wp a.wp-btn:hover,.wp-btn:hover{filter:brightness(1.08)}
.wp a.wp-btn:active,.wp-btn:active{border-radius:var(--wp-r-md);transform:scale(.96)}

/* the PDF cover: 300x423, 20-radius, the design's three-stop drop shadow.
   The hero carries the perspective so the cover can tilt toward the pointer. */
.wp-hero{perspective:1200px}
.wp a.wp-cover,.wp-cover{display:block;position:relative;text-decoration:none;border-bottom:none;
  aspect-ratio:300/423;border-radius:20px;overflow:hidden;background:#3c3c43;
  box-shadow:calc(var(--sx,0px) * -1) calc(27px - var(--sy,0px)) 85px rgba(0,0,0,.19),
             0 6.031px 18.986px rgba(0,0,0,.11),
             0 1.796px 5.653px rgba(0,0,0,.08);
  transform-style:preserve-3d;will-change:transform}
.wp-cover img{display:block;width:100%;height:100%;object-fit:cover;border:none;border-radius:20px}
/* The sheen can only ever ADD light: `screen` leaves white untouched and lifts
   the greys, so the hotspot reads across the text without greying the page.
   A dark stop here measured a 255 -> 180 drop, which just looked dimmed. */
.wp-cover .wp-glare{position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  opacity:0;transition:opacity .28s ease;mix-blend-mode:screen;
  background:radial-gradient(46% 34% at var(--gx,50%) var(--gy,50%),
             rgba(255,255,255,.34),rgba(255,255,255,0) 70%)}
.wp-cover:hover .wp-glare{opacity:1}
/* eased only while snapping in and out — during tracking the tilt must not lag */
.wp-cover.wp-tilt-ease{transition:transform .125s ease-out,box-shadow .125s ease-out}

/* ---------- stat strip: four bordered cards, 7px apart ---------- */
.wp-stats{display:flex;gap:7px;height:136px;margin:56px 0 0}
.wp-stat{flex:1 1 0;min-width:0;display:flex;flex-direction:column;justify-content:space-between;
  background:none;border:1px solid var(--wp-border);border-radius:28px;overflow:hidden;
  padding:22px 24px 24px;transition:background .8s ease,border-color .8s ease}
.wp-stat .n{font-family:var(--wp-sans);font-weight:500;font-size:31px;line-height:1.2;
  color:var(--wp-num);transition:color .8s ease}
@media(hover:hover){
  .wp-stat:hover{background:var(--wp-surface);border-color:transparent}
  .wp-stat:hover .n{color:var(--wp-accent)}
}
.wp-stat .l{color:var(--wp-micro-ink)}

/* ---------- section openers (left-aligned in the prose column) ---------- */
.wp-corelabel{color:var(--wp-accent);text-align:left;margin:96px auto 14px}
main.wp>h2.wp-coretitle{font-size:44px;line-height:49px;letter-spacing:-.66px;text-align:left;
  margin:0 auto 14px;padding-right:56px}  /* the design wraps the title at 700 inside the 756 column */

/* ---------- figures ---------- */
.vfig{margin:40px auto 40px}
.vfig figcaption,.suitfig figcaption,.calibcap{color:var(--wp-micro-ink);margin-top:14px}
.vfig figcaption.vsmall{margin-top:8px}
.storyvid{display:block;width:100%;height:auto;border:none;border-radius:28px;background:#000}
.tlfig video{display:block;margin:0 auto;width:315px;max-width:100%;height:auto;
  border-radius:20px;background:var(--wp-surface)}
.tlfig figcaption{text-align:center}

/* activity cards */
.acts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.act video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:20px;
  border:none;background:var(--wp-surface-2)}
.act-t{font-family:var(--wp-serif);font-size:19px;line-height:25px;color:var(--wp-head);margin-top:5px}
.act-d{font-family:var(--wp-serif);font-size:15px;line-height:24px;color:var(--wp-rail);margin-top:5px}

/* suit + calibration rows */
.suitrow{display:grid;grid-template-columns:220px 1fr;gap:34px;align-items:start;
  max-width:var(--wp-measure);margin:26px auto 0}
.suitfig{margin:0}
.suitimg,.calibimg{display:block;width:100%;height:auto;border-radius:20px;border:none}
.suitimg{aspect-ratio:220/413;object-fit:cover}
.calibimg{aspect-ratio:300/226;object-fit:cover}
.calibcap{margin-top:9px}
.calibrow{display:grid;grid-template-columns:1fr 300px;gap:34px;align-items:start;
  max-width:var(--wp-measure);margin:26px auto 0}

/* athlete roster: 82px label column + nine 71x95 cells, 4px apart */
.rosterfig{margin-top:30px}
.rosterhead,.rostergrid{display:grid;grid-template-columns:82px repeat(9,1fr);gap:4px}
.rosterhead{margin-bottom:12px}
.rosterhead span{color:var(--wp-micro-ink);text-align:center}
.rcell{aspect-ratio:71/95;background-image:url("https://cdn.prod.website-files.com/6a47bf088f998806af5c2a18/6aac0d0e670ffaec8427f8c2_roster-grid.v1.jpg");
  background-size:900% 300%;border-radius:10px}
.rgap{background:var(--wp-surface-3);border-radius:10px}
.rlab{color:var(--wp-micro-ink);align-self:center;text-align:left}

/* ==========================================================================
   Material 3 Expressive controls — Figma components on page
   `WHITEPAPER . Components` (Segment / Pill, Rate chip, Icon button / Play,
   Slider / Transport, Joint card)
   ========================================================================== */
/* Segment / Pill — 11/18 padding, 13px Cy Grotesk Key Medium, surface-3 ground */
.vpicks button,.unitsw button{font-family:var(--wp-sans);font-size:13px;font-weight:500;line-height:13px;
  color:var(--wp-rail);background:var(--wp-surface-3);border:none;border-radius:999px;
  padding:11px 18px;cursor:pointer;
  transition:background .2s,color .2s,border-radius .25s var(--wp-spring),transform .2s var(--wp-spring)}
.vpicks button:hover,.unitsw button:hover{color:var(--wp-railact);background:color-mix(in srgb,var(--wp-surface-3) 60%,var(--wp-rail) 12%)}
.vpicks button:active,.unitsw button:active{border-radius:var(--wp-r-sm);transform:scale(.94)}
.vpicks button.on{background:var(--wp-accent);color:#fff}
.unitsw button{background:var(--wp-surface)}
.unitsw button:hover{background:color-mix(in srgb,var(--wp-surface) 70%,var(--wp-rail) 10%)}
.unitsw button.on{background:var(--wp-head);color:var(--wp-bg)}
.unitsw button.on:hover{background:var(--wp-head)}
.vpicks button:focus-visible,.unitsw button:focus-visible{outline:2px solid var(--wp-link);outline-offset:2px}

/* Rate chip — 9/12 padding, micro type */
.tp-rate{display:inline-flex;gap:4px;flex:none}
.tp-rate button{color:var(--wp-micro-ink);background:var(--wp-surface-3);border:none;border-radius:999px;
  padding:9px 12px;cursor:pointer;
  transition:background .2s,color .2s,border-radius .25s var(--wp-spring),transform .2s var(--wp-spring)}
.tp-rate button:hover{color:var(--wp-railact)}
.tp-rate button:active{border-radius:var(--wp-r-sm);transform:scale(.94)}
.tp-rate button.on{background:var(--wp-accent);color:#fff}
.tp-rate button:focus-visible{outline:2px solid var(--wp-link);outline-offset:2px}

/* Slider / Transport — 16px track, 4x28 bar handle */
.tp-scrub{flex:1;min-width:0;height:28px;margin:0;padding:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;background:transparent}
.tp-scrub::-webkit-slider-runnable-track{height:16px;margin-top:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--wp-accent) 0 var(--fill,0%),var(--wp-surface-3) var(--fill,0%) 100%)}
.tp-scrub::-moz-range-track{height:16px;border-radius:999px;background:var(--wp-surface-3)}
.tp-scrub::-moz-range-progress{height:16px;border-radius:999px;background:var(--wp-accent)}
.tp-scrub::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:4px;height:28px;margin-top:-6px;border:none;border-radius:999px;
  background:var(--wp-head);
  transition:height .2s var(--wp-spring),width .2s var(--wp-spring)}
.tp-scrub::-moz-range-thumb{width:4px;height:28px;border:none;border-radius:999px;background:var(--wp-head)}
.tp-scrub:active::-webkit-slider-thumb{height:34px;margin-top:-9px}
.tp-scrub:focus-visible{outline:2px solid var(--wp-link);outline-offset:4px;border-radius:999px}

/* Icon button / Play — circle at rest, 40-radius squircle while playing */
.tp-play{flex:none;width:48px;height:48px;border:none;border-radius:999px;cursor:pointer;
  background:var(--wp-accent);color:#fff;font-size:13px;line-height:1;
  display:grid;place-items:center;
  transition:background .2s,border-radius .3s var(--wp-spring),transform .2s var(--wp-spring)}
.tp-play:hover{filter:brightness(1.08)}
.tp-play:active{transform:scale(.92)}
.tp-play.on{border-radius:40px}
.tp-play:focus-visible{outline:2px solid var(--wp-link);outline-offset:3px}

.wp h3.tp-title{font-family:var(--wp-serif);font-weight:400;font-size:24px;line-height:31px;
  color:var(--wp-head);margin:0;order:-1}

/* ==========================================================================
   Three-panel / overlay viewer
   ========================================================================== */
.tp{display:flex;flex-direction:column;gap:22px;background:var(--wp-surface);
  border-radius:28px;padding:26px 28px 24px;overflow:hidden;transition:background .3s}
.tp[data-viewer="over"]{border-radius:36px;padding:34px 32px 32px}
.vpickwrap{display:flex;gap:6px;flex-wrap:wrap}
.vpicks{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0}
.tp-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.tp-cell{position:relative}
.tp-cell .frame{position:relative;background:var(--wp-surface-2);border:none;
  border-radius:20px;overflow:hidden;aspect-ratio:3/4}
.tp-cell video,.tp-cell canvas{display:block;width:100%;height:100%}
.tp-cap{line-height:1.4;color:var(--wp-micro-ink);margin-top:12px;text-align:center}
.tp-cap b{display:block;font-weight:400;color:var(--wp-head);margin-bottom:4px}
.tp-over{display:flex;justify-content:center}
.tp-overwrap{position:relative;width:460px;max-width:100%}
.tp-overwrap .frame{border-radius:20px;overflow:hidden;border:none;background:#000;aspect-ratio:460/613}
.tp-overwrap .frame video{display:block;width:100%;height:100%;object-fit:cover}
.tp-overcanvas{position:absolute;inset:0;width:100%;height:100%;border-radius:20px;pointer-events:none}
.tp[data-mode="over"] .vid-slot video{visibility:hidden}
.tp-legend{position:absolute;top:12px;right:12px;z-index:2;display:flex;flex-direction:column;
  align-items:flex-end;gap:5px;padding:9px 11px;border-radius:var(--wp-r-md);
  background:color-mix(in srgb,var(--wp-surface) 82%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}
.tp-legend span{display:inline-flex;align-items:center;gap:8px;font-family:var(--wp-mono);
  font-size:9.5px;line-height:14px;letter-spacing:.95px;text-transform:uppercase;color:var(--wp-head)}
.tp-legend i{width:16px;height:3px;border-radius:2px;display:inline-block}

.tp-transport{display:flex;align-items:center;gap:16px}
.tp-clock{flex:none;color:var(--wp-micro-ink);font-variant-numeric:tabular-nums}

/* Joint card — 59 tall, 12-radius, hairline border, accent when selected */
.tp-joints{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.tp-j{height:59px;display:flex;flex-direction:column;justify-content:space-between;
  border:1px solid var(--wp-border);background:none;border-radius:12px;
  padding:12px 13px;cursor:pointer;text-align:left;font-family:var(--wp-sans);
  transition:background .2s,border-color .2s,transform .2s var(--wp-spring)}
.tp-j:hover{border-color:var(--wp-line-2)}
.tp-j:active{transform:scale(.96)}
.tp-j.on{background:var(--wp-accent);border-color:transparent}
.tp-j .jn{display:block;color:var(--wp-micro-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-j .jv{display:block;font-family:var(--wp-sans);font-weight:500;font-size:17px;line-height:1.2;
  color:var(--wp-num);font-variant-numeric:tabular-nums;margin:0;white-space:nowrap}
.tp-j.on .jn{color:rgba(255,255,255,.8)}
.tp-j.on .jv{color:#fff}
.tp-note{font-family:var(--wp-mono);font-size:11px;line-height:1.6;color:var(--wp-dim);margin:0}
.tp-note:empty{display:none}

/* ==========================================================================
   Joint picker + distribution chart
   ========================================================================== */
.vstage{display:flex;flex-direction:column;gap:22px;background:var(--wp-surface);
  border-radius:28px;padding:26px 28px 24px;overflow:hidden;transition:background .3s}
.vpicks .spacer{flex:1}
.vpicks .note{align-self:center;font-family:var(--wp-mono);font-size:9.5px;line-height:14px;
  letter-spacing:.95px;text-transform:uppercase;color:var(--wp-dim)}
/* the hint breathes until a joint is picked, then settles — it is the only
   instruction on the page that needs acting on */
@keyframes wp-hint{
  0%,100%{opacity:.4;color:var(--wp-dim)}
  50%    {opacity:1;color:var(--wp-railact)}
}
.vpicks .note{animation:wp-hint 2.8s ease-in-out infinite}
.vstage.wp-hinted .note{animation:none;opacity:.4}
@media(prefers-reduced-motion:reduce){.vpicks .note{animation:none}}
.vsplit{display:grid;grid-template-columns:1fr 220px;gap:40px;align-items:start}
.vbody{order:2;border-radius:14px;overflow:hidden}
.vbody svg{width:100%;height:auto;display:block}
.vhot{cursor:pointer}
.vhot circle.hit{fill:transparent}
.vhot .dot{fill:var(--wp-halo);stroke:var(--wp-ink);stroke-width:2.5;transition:fill .15s}
.vhot:hover .dot{fill:var(--wp-ref-deep)}
.vhot.on .dot{fill:var(--wp-ref);stroke:var(--wp-halo);stroke-width:3}
.vhot .halo{opacity:0;transition:opacity .15s}
.vhot.on .halo{opacity:1}
.vhot:focus-visible{outline:2px solid var(--wp-link);outline-offset:2px}
.vname{font-family:var(--wp-serif);font-size:24px;line-height:31px;color:var(--wp-head)}
.vmeta{color:var(--wp-dim);margin-top:7px}
.vverdict{display:inline-block;margin-top:13px;padding:6px 13px;border-radius:999px}
.vverdict.ok{color:var(--wp-rail);background:var(--wp-surface-3)}
.vverdict.offset{color:var(--wp-ref-deep);background:color-mix(in srgb,var(--wp-ref) 18%,transparent)}
.vread{font-family:var(--wp-serif);font-size:15px;line-height:24px;color:var(--wp-text);margin-top:15px}
.vchart svg,.vwide svg{width:100%;height:auto;display:block;overflow:visible}
.vchart svg{margin-top:22px;max-width:440px}
.vwide svg{max-width:840px;margin:0 auto}

/* units switch — two 184px halves, 4px apart, 8px after the label */
.unitsw{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin:30px auto 0}
.unitsw .lab{color:var(--wp-dim);margin-right:4px}
.unitsw button{width:184px;height:35px;padding:0;display:inline-flex;align-items:center;
  justify-content:center}

/* ---------- results table: 240 / 172 / 172 / 172 ---------- */
.tablewrap{overflow-x:auto;margin:16px auto 30px;border-radius:28px;background:var(--wp-surface);
  transition:background .3s}
.wp table.heat{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed;margin:0;
  font-family:var(--wp-serif);font-size:17px;line-height:28px}
.wp table.heat th,.wp table.heat td{text-align:left;padding:15px 20px;
  border-bottom:1px solid var(--wp-line-3);vertical-align:middle}
.wp table.heat thead th{border-bottom:1px solid var(--wp-line);color:var(--wp-rail)}
.wp table.heat tr:last-child td,.wp table.heat tr:last-child th{border-bottom:none}
.wp table.heat th:first-child,.wp table.heat td:first-child{width:240px}
.wp table.heat tbody th{font-weight:400;color:var(--wp-text)}
/* proportional figures: PP Museum's tabular period sits in a full-width slot,
   which reads as '5 . 1' — the design has the normal tight figures */
.wp table.heat td.v{text-align:right;font-variant-numeric:normal;color:var(--wp-heat-ink)}

/* ---------- closing report card ---------- */
.wp a.paper,.paper{display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:center;
  background:var(--wp-surface);border-radius:28px;padding:40px 44px;margin:72px 0 0;
  text-decoration:none;border-bottom:none;color:inherit;
  transition:background .3s,transform .3s var(--wp-spring)}
.wp a.paper:hover,.paper:hover{transform:translateY(-4px)}
.paperpage{position:relative;aspect-ratio:220/311;border-radius:20px;overflow:hidden;
  background:#3c3c43;border:none;display:flex;align-items:center;justify-content:center;
  box-shadow:0 27px 85px rgba(0,0,0,.19),0 6.031px 18.986px rgba(0,0,0,.11),
             0 1.796px 5.653px rgba(0,0,0,.08)}
.paperpage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.paperpage .ph{color:var(--wp-dim);text-align:center}
.papertag{display:block;color:var(--wp-accent)}
.papertitle{display:block;font-family:var(--wp-serif);font-size:28px;line-height:34px;
  letter-spacing:-.28px;color:var(--wp-head);margin:13px 0 0}
.papersub{display:block;font-family:var(--wp-serif);font-size:17px;line-height:28px;
  color:var(--wp-date);margin-top:7px}
.paperdesc{display:block;font-family:var(--wp-serif);font-size:15px;line-height:24px;
  color:var(--wp-text);margin-top:14px}
.paperfacts{display:none}                       /* the design hides the assist chips */
.paper-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:40px}
.paper .meta{color:var(--wp-rail)}

/* ---------- footer + back to top ---------- */
.wp-top{position:fixed;right:32px;bottom:40px;width:56px;height:56px;border-radius:50%;
  background:var(--wp-surface);border:1px solid var(--wp-line);color:var(--wp-text);
  display:grid;place-items:center;cursor:pointer;z-index:40;opacity:0;pointer-events:none;
  transition:opacity .3s,transform .25s var(--wp-spring),background .3s}
.wp-top.show{opacity:1;pointer-events:auto}
.wp-top:hover{transform:translateY(-3px)}
.wp-top svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6}

/* ==========================================================================
   Between the two designed widths — the desktop composition, allowed to
   shrink. Nothing here is designed; it only keeps 768-1223 from breaking.
   ========================================================================== */
@media(max-width:1223px){
  main.wp{width:calc(100% - 48px)}
  main.wp>h2.wp-coretitle{padding-right:0}
  .wp-hero{grid-template-columns:1fr 260px;gap:40px}
  .wp-hero h1{font-size:clamp(42px,5vw,62px);line-height:1.05}
  .tp-overwrap{width:min(460px,100%)}
}
@media(max-width:1023px){
  .wp-stats{height:auto}
  .wp-stat{padding:20px}
  .wp-stat .n{font-size:26px}
  .vsplit{grid-template-columns:1fr 180px;gap:28px}
  .vchart svg{max-width:none}
  .wp table.heat th:first-child,.wp table.heat td:first-child{width:32%}
}

/* ==========================================================================
   Phone — measured off the Figma frame
   `Whitepaper — Validation · Mobile 440 · Dark` (1261:934):
   a 400 column inside 20px gutters, headings bumped to 44/1.2, the stat strip
   collapsed into one hairline-divided container, both viewers full-bleed
   inside a 16px card, and the joint read-outs wrapping 4 + 3.
   ========================================================================== */
@media(max-width:767px){
  main.wp{width:calc(100% - 40px);padding-bottom:120px;font-size:17px;line-height:28px}
  main.wp:before{top:300px}
  main.wp>h2{margin-top:56px;margin-bottom:16px}
  .wp h2{font-size:44px;line-height:1.2;letter-spacing:-.66px}

  /* hero: logo, then the eyebrow the desktop frame drops */
  .wp a.wp-logo,.wp-logo{margin-top:46px}
  .wp-hero{display:block;padding:46px 0 0}
  .wp-eyebrow{display:block}
  .wp-hero h1{font-size:38px;line-height:1.3;letter-spacing:-.6px;margin-top:16px}
  .wp-sub{font-size:30px;line-height:1.2;letter-spacing:0;margin-top:26px}
  .wp p.wp-lead{margin-top:20px;max-width:none}
  .wp-cta{flex-direction:column;align-items:stretch;gap:12px;margin-top:28px}
  .wp-cta .wp-btn{width:100%}
  .wp-cta .meta{text-align:center;color:var(--wp-dim)}
  .wp a.wp-cover,.wp-cover{margin-top:32px;aspect-ratio:260/367}

  /* stat strip: one 28-radius container, 1px hairlines, four stacked rows */
  .wp-stats{flex-direction:column;gap:1px;height:auto;margin-top:40px;
    background:var(--wp-line);border-radius:28px;overflow:hidden}
  .wp-stat{flex:none;justify-content:flex-start;gap:10px;background:var(--wp-surface);
    border:none;border-radius:0;padding:22px 20px 20px}
  .wp-stat .n{font-size:28px;line-height:31px;letter-spacing:-.3px;color:var(--wp-head)}
  .wp-stat .l{color:var(--wp-dim)}
  /* the phone frame lets these wrap naturally instead of at the desktop break */
  .wp-stat .l br,.wp-coretitle br,.paperpage .ph br{display:none}

  /* section openers */
  .wp-corelabel{margin:72px auto 10px}
  main.wp>h2.wp-coretitle{font-size:44px;line-height:1.2;padding-right:0;margin-bottom:10px}

  /* figures */
  .vfig{margin-top:32px}
  .vfig figcaption,.suitfig figcaption,.calibcap{margin-top:12px}
  .storyvid{aspect-ratio:16/9;object-fit:cover;border-radius:20px}
  .acts{grid-template-columns:1fr;gap:24px}
  .act-t{margin-top:22px}
  .act-d{margin-top:6px}
  .suitrow,.calibrow{grid-template-columns:1fr;gap:24px;margin-top:0}
  .suitimg{aspect-ratio:400/751}
  .calibimg{aspect-ratio:400/301}
  .tlfig video{width:315px}

  /* roster: 50px label column, 2px gutters */
  .rosterfig{margin-top:28px}
  .rosterhead,.rostergrid{grid-template-columns:56px repeat(9,1fr);gap:2px}
  .rosterhead{margin-bottom:10px}
  .rosterhead span,.rlab{font-size:5px;letter-spacing:.55px}
  .rlab{padding-right:6px}
  .rcell,.rgap{border-radius:6px}

  /* viewers */
  .tp,.tp[data-viewer="over"],.vstage{border-radius:24px;padding:16px;gap:16px}
  .vpickwrap{flex-direction:column;gap:6px}
  .vpicks{justify-content:center}
  .tp-overwrap{width:100%}
  .tp-row{grid-template-columns:1fr;gap:14px}
  .tp-transport{gap:10px}
  .tp-joints{grid-template-columns:repeat(4,1fr);gap:6px}
  .tp-j{height:69px;padding:12px 9px}

  /* joint picker: pills wrap, title centred, body diagram under the chart */
  .vpicks .spacer,.vpicks .note{display:none}
  .vname{text-align:center}
  .vsplit{grid-template-columns:1fr;gap:16px}
  .vbody{max-width:180px;margin:0 auto;border-radius:12px}
  .vchart svg{margin-top:0;max-width:none}

  /* units switch: full width, no label */
  .unitsw{margin-top:24px}
  .unitsw .lab{display:none}
  .unitsw button{flex:1 1 0;width:auto}

  /* results table: 130 / 90 / 90 / 90 on the 400 column */
  .tablewrap{margin-top:24px;border-radius:16px}
  .wp table.heat th,.wp table.heat td{padding:10px 8px}
  .wp table.heat th:first-child,.wp table.heat td:first-child{width:32.5%;padding-left:16px}
  .wp table.heat thead th{font-size:5px;letter-spacing:.55px}

  /* report card: stacked and centred */
  .wp a.paper,.paper{grid-template-columns:1fr;justify-items:center;gap:32px;
    border-radius:24px;padding:24px 20px;margin-top:56px;text-align:center}
  .paperpage{width:180px;aspect-ratio:180/255}
  .papertag{margin-bottom:24px}
  .papertitle{font-size:44px;line-height:1.2;letter-spacing:-.66px;margin-top:10px}
  .papersub{font-size:25px;line-height:1.5;color:var(--wp-text);margin-top:30px}
  .paperdesc{margin-top:36px}
  .paper-cta{margin-top:48px;width:100%}
  .paper-cta .wp-btn{width:100%}
  .paper-cta .meta{display:none}

  .wp-top{right:16px;bottom:24px;width:48px;height:48px}
}
@media(prefers-reduced-motion:reduce){.wp *{transition:none!important}}

/* ---------- 1.9.1 (2026-09-24, Anna) — port into whitepaper.css ----------
   Suit photo spans the text column exactly: top of the first paragraph to the
   bottom of the last. The image is taken out of flow so it never sets the row
   height; the last paragraph's margin moves to row padding so the gap before
   the next heading is unchanged. Phones keep the stacked 400/751 photo. */
.suitrow{align-items:stretch;padding-bottom:20px}
.suitrow>div>p:last-child{margin-bottom:0}
.suitfig{position:relative}
.suitimg{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-fit:cover}
@media(max-width:767px){
  .suitfig{position:static}
  .suitimg{position:static;height:auto;aspect-ratio:400/751}
}
/* results table: figures and their column headers centred */
.wp table.heat td.v,.wp table.heat thead th:not(:first-child){text-align:center}