:root {
  --wobo-ink-100: #ECECEF;
  --wobo-ink-300: #72727C;
  --wobo-ink-500: #6E6E76;
  --wobo-ink-700: #2E2E35;
  --wobo-ink-800: #1A1A1F;
  --wobo-ink-900: #0D0D10;
  --wobo-paper: #FFFFFF;
  --wobo-canvas: #FFFFFF;
  --wobo-surface-1: #1A1A1F;
  --wobo-surface-2: #222228;
  --wobo-surface-3: #2A2A31;
  --wobo-surface-4: #33333B;
  --wobo-hairline-on-paper: rgba(13,13,16,0.10);
  --wobo-hairline-on-paper-strong: rgba(13,13,16,0.18);
  --wobo-hairline-on-dark: rgba(255,255,255,0.12);
  --wobo-ultramarine: #1F35E0;
  --wobo-ultramarine-base: #1F35E0;
  --wobo-ultramarine-hover: #1A2DC4;
  --wobo-ultramarine-active: #1526A6;
  --wobo-ultramarine-soft: rgba(31,53,224,0.07);
  --wobo-ultramarine-wash: rgba(31,53,224,0.12);
  --wobo-ultramarine-ring: rgba(31,53,224,0.35);
  --wobo-accent-molten: #FF5A1F;
  --wobo-accent-magenta: #CC1E7A;
  --wobo-accent-acid: #66B300;
  --wobo-molten-base: #FF5A1F;
  --wobo-molten-hover: #F04A0E;
  --wobo-molten-active: #D63E07;
  --wobo-molten-soft: rgba(255,90,31,0.08);
  --wobo-molten-ring: rgba(255,90,31,0.35);
  --wobo-feedback-correct: #2E7D32;
  --wobo-feedback-correctSoft: rgba(46,125,50,0.08);
  --wobo-feedback-retry: #B26A00;
  --wobo-feedback-retrySoft: rgba(178,106,0,0.08);
  --wobo-molten: #FF5A1F;
  --wobo-highlight-ink: #1F35E0;
  --wobo-highlight-frost: rgba(31,53,224,0.04);
  --wobo-radius-sm: 3px;
  --wobo-radius-md: 6px;
  --wobo-radius-lg: 10px;
  --wobo-radius-jelly: 9999px;
  --wobo-radius-panel: 14px;
  --wobo-frost-blur: 20px;
  --wobo-frost-on-paper: rgba(255,255,255,0.78);
  --wobo-frost-on-dark: rgba(18,18,22,0.66);
  --wobo-space-0: 0px;
  --wobo-space-1: 8px;
  --wobo-space-2: 16px;
  --wobo-space-3: 24px;
  --wobo-space-4: 32px;
  --wobo-space-6: 48px;
  --wobo-space-8: 64px;
  --wobo-space-12: 96px;
  --wobo-space-16: 128px;
  --wobo-space-half: 4px;
  --wobo-duration-micro: 160ms;
  --wobo-duration-standard: 300ms;
  --wobo-duration-signature: 750ms;
  --wobo-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --wobo-ease-emphasized: cubic-bezier(0.2, 0, 0, 1.1);
  --wobo-ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --wobo-ease-accelerate: cubic-bezier(0.3, 0, 1, 1);
  --wobo-z-base: 0;
  --wobo-z-canvas: 10;
  --wobo-z-woboPresence: 800;
  --wobo-z-panel: 900;
  --wobo-z-ink: 950;
  --wobo-z-modal: 1000;
  --wobo-z-toast: 1100;
  --wobo-page: #FFFFFF;
  --wobo-card: #FFFFFF;
  --wobo-card-border: #E9E9EE;
  --wobo-card-hover: #FCFCFE;
  --wobo-tonal: #F1F1F5;
  --wobo-tonal-hover: #E8E8EE;
  --wobo-ink: #121316;
  --wobo-on-ink: #FFFFFF;
  --wobo-ink-hover: #26272C;
  --wobo-ink-soft: #5C5E66;
  --wobo-ink-faint: #72727C;
  --wobo-faint: #B9BBC6;
  --wobo-spotlight: rgba(18,19,22,0.05);
  --wobo-wobo-beam: linear-gradient(to bottom, rgba(255,133,71,0.42), rgba(255,90,31,0.16) 55%, rgba(255,90,31,0) 88%);
  --wobo-wobo-beam-pool: radial-gradient(ellipse at center, rgba(255,90,31,0.3), rgba(255,90,31,0) 70%);
}
[data-theme="dark"] {
  --wobo-page: #17181C;
  --wobo-card: #1F2026;
  --wobo-card-border: #2A2B32;
  --wobo-card-hover: #24252C;
  --wobo-tonal: #24252C;
  --wobo-tonal-hover: #2E2F37;
  --wobo-ink: #F2F2F5;
  --wobo-on-ink: #17181C;
  --wobo-ink-hover: #E4E5EA;
  --wobo-ink-soft: #B4B6BF;
  --wobo-ink-faint: #868790;
  --wobo-faint: #585A63;
  --wobo-ink-900: #F2F2F5;
  --wobo-ink-800: #E4E5EA;
  --wobo-ink-700: #C7C9D1;
  --wobo-ink-500: #9A9DA8;
  --wobo-ink-300: #868790;
  --wobo-ink-100: #26272E;
  --wobo-paper: #17181C;
  --wobo-canvas: #17181C;
  --wobo-hairline-on-paper: rgba(255,255,255,0.09);
  --wobo-hairline-on-paper-strong: rgba(255,255,255,0.16);
  --wobo-ultramarine: #4D63F2;
  --wobo-ultramarine-base: #4D63F2;
  --wobo-ultramarine-hover: #6579F5;
  --wobo-ultramarine-active: #3D52E0;
  --wobo-ultramarine-soft: rgba(77,99,242,0.14);
  --wobo-ultramarine-wash: rgba(77,99,242,0.20);
  --wobo-ultramarine-ring: rgba(77,99,242,0.5);
  --wobo-highlight-ink: #7B8CFF;
  --wobo-highlight-frost: rgba(123,140,255,0.04);
  --wobo-feedback-correct: #4CAF50;
  --wobo-feedback-correctSoft: rgba(76,175,80,0.16);
  --wobo-feedback-retry: #E0982E;
  --wobo-feedback-retrySoft: rgba(224,152,46,0.16);
  --wobo-frost-on-paper: rgba(23,24,28,0.62);
  --wobo-spotlight: rgba(255,255,255,0.05);
}

:root {
  --wobo-page: var(--paper);
  --wobo-paper: var(--paper);
  --wobo-canvas: var(--paper);
  --wobo-card: var(--paper-2);
  --wobo-card-border: var(--line);
  --wobo-card-hover: var(--paper-3);
  --wobo-tonal: var(--paper-2);
  --wobo-tonal-hover: var(--paper-3);
  --wobo-surface-1: var(--paper-2);
  --wobo-surface-2: var(--paper-3);
  --wobo-surface-3: var(--paper-3);
  --wobo-surface-4: var(--paper-3);
  --wobo-ink: var(--ink);
  --wobo-ink-900: var(--ink);
  --wobo-ink-800: var(--ink);
  --wobo-ink-700: var(--ink);
  --wobo-ink-500: var(--ink-2);
  --wobo-ink-300: var(--ink-3);
  --wobo-ink-100: var(--paper-3);
  --wobo-ink-hover: var(--ink-2);
  --wobo-ink-soft: var(--ink-2);
  --wobo-ink-faint: var(--ink-3);
  --wobo-faint: var(--ink-3);
  --wobo-on-ink: var(--paper);
  --wobo-hairline-on-paper: var(--line);
  --wobo-hairline-on-paper-strong: var(--line);
  --wobo-hairline-on-dark: var(--line);
  --wobo-ultramarine: var(--pig);
  --wobo-ultramarine-base: var(--pig);
  --wobo-ultramarine-hover: var(--pig);
  --wobo-ultramarine-active: var(--pig);
  --wobo-ultramarine-soft: var(--pig-soft);
  --wobo-ultramarine-wash: var(--pig-soft);
  --wobo-ultramarine-ring: var(--pig);
  --wobo-highlight-ink: var(--pig);
  --wobo-accent-molten: var(--rose);
  --wobo-accent-magenta: var(--violet);
  --wobo-accent-acid: var(--mint);
  --wobo-molten: var(--rose);
  --wobo-molten-base: var(--rose);
  --wobo-molten-hover: var(--rose);
  --wobo-molten-active: var(--rose);
  --wobo-molten-soft: var(--rose-w);
  --wobo-molten-ring: var(--rose);
  --wobo-feedback-correct: var(--mint);
  --wobo-feedback-correctSoft: var(--mint-w);
  --wobo-feedback-retry: var(--marigold);
  --wobo-feedback-retrySoft: var(--marigold-w);
}
/* No interpolate-size: Chrome implements it, Safari ignores it — any effect it ever has is a
   Chrome-only divergence (auto-size transitions animating in Chrome, snapping in Safari).
   All auto-height choreography is framer-motion, which never needs it. */
html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { text-wrap: balance; }
p, li { text-wrap: pretty; }
/* Wobo blue is the brand's pigment — selection and focus carry it; the ring is as bold as any line Wobo draws. */
::selection { background: var(--pig-w); color: var(--ink); }
:focus-visible { outline: 3px solid var(--pig); outline-offset: 2px; }
/* One scrollbar: the page's own, thin and quiet. Inner scroll areas scroll invisibly. */
html { scrollbar-width: none; }
::-webkit-scrollbar { display: none; width: 0; height: 0; }
* { scrollbar-width: none; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }


:root[data-large-text="on"] { font-size: 118%; }
:root[data-contrast="high"] {
  --wobo-ink-500: var(--wobo-ink-900);
  --wobo-ink-300: var(--wobo-ink-700);
  --wobo-ink-faint: var(--wobo-ink-700);
  --wobo-hairline-on-paper-strong: var(--wobo-ink-900);
}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/Caveat-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Caveat';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/Caveat-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Poppins-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/Poppins-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/Poppins-500-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/Poppins-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/Poppins-600-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/Poppins-600-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/Poppins-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/Poppins-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ── LAW v5 ────────────────────────────────────────────────────────────────────
   White paper. Ink. Colour only where it does a job: the accent that points, the
   highlighter that marks, the tick that confirms. No tinted section grounds. */
.wb{
  --paper:#FFFFFF; --paper-2:#F6F6F8; --paper-3:#ECECF0; --line:#E4E4EA;
  --ink:#14142B; --ink-2:#55556B; --ink-3:#8A8A9E;
  --pig:#2B45FF; --pig-soft:#EDF0FF; --marigold:#FFB629; --rose:#FF6B57; --mint:#12B981; --violet:#7C5CFF;
  --body:#14142B; --body-hi:#3A3A5C; --visor:#FFFFFF; --visor-lo:#EDEDF2; --eye:#2B45FF;
  --sans:'Poppins', 'Google Sans Flex', 'Google Sans Text', 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', system-ui, sans-serif; --hand:'Caveat', 'Caveat Variable', 'Caveat', cursive;
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:72px; --s6:128px;
  /* one vertical rhythm for the whole page, tied to the viewport so a phone never
     inherits a desktop's air and a wide screen never feels cramped */
  --gutter:clamp(20px, 5vw, 48px);
  --band:clamp(96px, 11vw, 184px);      /* space between one section and the next */
  --colgap:clamp(32px, 5vw, 80px);     /* space between the two halves of a row   */
  --shadow:0 24px 60px rgba(20,20,43,.10); --lift:0 10px 28px rgba(20,20,43,.07);
}
[data-theme="dark"] .wb{
  --paper:#0E0E16; --paper-2:#17171F; --paper-3:#1F1F29; --line:#26262F;
  --ink:#F4F4F7; --ink-2:#B4B4C2; --ink-3:#7E7E90;
  --pig:#7C8CFF; --pig-soft:#1A1E3A; --marigold:#FFC85A; --rose:#FF8A78; --mint:#3DD9A4; --violet:#A996FF;
  --body:#F4F4F7; --body-hi:#FFFFFF; --visor:#0E0E16; --visor-lo:#1F1F29; --eye:#7C8CFF;
  --shadow:0 24px 60px rgba(0,0,0,.5); --lift:0 10px 28px rgba(0,0,0,.35);
}
.wb *,.wb *::before,.wb *::after{box-sizing:border-box;min-width:0}
.wb{background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
.wb a{color:inherit;text-decoration:none}
.wb h1,.wb h2,.wb h3{margin:0;letter-spacing:-.028em;text-wrap:balance}
.wb p{margin:0}
.wb .hand{font-family:var(--hand);font-weight:600}
.wb .wrap{width:min(1180px,calc(100% - var(--gutter) * 2));margin:0 auto}
.wb .eyebrow{font:500 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.wb .eyebrow b{color:var(--pig);font-weight:500}
.wb section{padding:calc(var(--band) / 2) 0;position:relative;scroll-margin-top:96px}
.wb h2.t{font:700 clamp(30px,3.8vw,50px)/1.06 var(--sans)}
/* The highlighter is painted ON the span, not behind it, so a long phrase wraps like
   any other text instead of forcing the page sideways. box-decoration-break makes the
   mark continue onto the next line the way a real highlighter would. */
.wb h2.t .hl{
  background-image:linear-gradient(color-mix(in srgb,var(--marigold) 46%,transparent),color-mix(in srgb,var(--marigold) 46%,transparent));
  background-repeat:no-repeat;background-position:0 50%;background-size:0% 92%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em;margin:0 -.06em;border-radius:4px;
}
.wb h2.t .hl.lit{background-size:100% 92%;transition:background-size .72s cubic-bezier(.2,.8,.2,1)}
.wb .lede{font-size:clamp(16px,1.15vw,19px);color:var(--ink-2);max-width:46ch;margin-top:var(--s3)}

/* buttons — magnet is a translate on an INNER span, so the hit box never moves */
.wb .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:500 15px/1 var(--sans);min-height:50px;padding:0 24px;border-radius:14px;border:0;cursor:pointer;
  background:var(--ink);color:var(--paper);overflow:hidden;isolation:isolate}
/* ONE OWNER PER ANIMATED PROPERTY (DESIGN.md §0, cause 1). The magnet's rAF lerp is the only thing
   that writes this transform, so there is no CSS transition on it to ease toward a value the loop
   has already moved past. */
.wb .btn > span{display:inline-flex;align-items:center;gap:8px;will-change:transform}
.wb .btn.pig{background:var(--pig);color:#fff}
.wb .btn.quiet{background:var(--paper-2);color:var(--ink)}
.wb .btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line)}
.wb .btn::after{content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity .25s;z-index:-1}
.wb .btn:hover::after{opacity:.08}
.wb .btn:focus-visible{outline:3px solid var(--marigold);outline-offset:3px}
/* The prototype sets outline:none on its one text field and never puts it back, which leaves the
   only place a visitor types as the one control a keyboard reader cannot see themselves land on.
   The ring paints on :focus-visible only, so nothing about the page as approved changes. */
.wb a:focus-visible,.wb button:focus-visible,.wb summary:focus-visible,.wb input:focus-visible{outline:3px solid var(--marigold);outline-offset:3px}

/* header — simple, real routes */
.wb header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(14px) saturate(1.4)}
.wb header .bar{display:flex;align-items:center;gap:var(--s4);height:74px}
.wb header .wm svg{height:22px;width:auto;color:var(--ink);display:block}
.wb header nav{display:flex;gap:var(--s3);margin-left:var(--s2)}
.wb header nav a{font:500 15px/1 var(--sans);color:var(--ink-2);padding:8px 0;position:relative}
.wb header nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--pig);border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.wb header nav a:hover{color:var(--ink)}
.wb header nav a:hover::after{transform:scaleX(1)}
.wb header .right{margin-left:auto;display:flex;align-items:center;gap:var(--s2)}
.wb header .right .sign{font:500 15px/1 var(--sans);color:var(--ink-2)}
.wb header .btn{min-height:44px;padding:0 20px;border-radius:12px;font-size:14px}
@media (max-width:980px){.wb header nav{display:none}.wb header .right .sign{display:none}}

/* hero */
.wb #hero{padding:clamp(32px,5vw,64px) 0 calc(var(--band) / 2);overflow:visible}
.wb #hero .grid{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--colgap);align-items:center;min-height:min(76vh,720px)}
.wb #hero h1{font:700 clamp(40px,5.4vw,68px)/1.0 var(--sans);letter-spacing:-.04em;margin-top:var(--s2)}
/* The headline's marigold, painted ON the span so a long phrase wraps rather than forcing the
   page sideways — the same treatment h2.t .hl gets, and lit at rest because the hero is the
   first paint and nothing here waits for a scroll (DESIGN.md §0, "the first paint shows the page
   at rest"). */
.wb #hero h1 .hl{
  background-image:linear-gradient(color-mix(in srgb,var(--marigold) 46%,transparent),color-mix(in srgb,var(--marigold) 46%,transparent));
  background-repeat:no-repeat;background-position:0 50%;background-size:100% 92%;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .06em;margin:0 -.06em;border-radius:4px;
}
/* The question the card answers, printed on the card. It used to be the H1. */
.wb #hero .asked{padding:0 var(--s3) 4px;font:500 15px/1.35 var(--sans);color:var(--ink-2)}
.wb #hero .asked .wake{display:block;font-family:var(--hand);font-weight:700;font-size:20px;color:var(--pig)}
.wb #hero .cta{display:flex;gap:12px;margin-top:var(--s4);flex-wrap:wrap;align-items:center}
.wb #hero .under{display:flex;gap:var(--s3);margin-top:var(--s3);flex-wrap:wrap;color:var(--ink-2);font-size:14px}
.wb #hero .under span{display:inline-flex;align-items:center;gap:8px}
.wb #hero .under i{width:7px;height:7px;border-radius:50%;background:var(--mint)}
@media (max-width:980px){
  .wb #hero .grid{grid-template-columns:1fr;gap:var(--s4)}
  .wb #hero .stagewrap{max-width:560px}
  .wb #hero h1{font-size:clamp(34px,8vw,52px)}
}

/* the device: one question, answered four ways */
.wb .device{position:relative;border-radius:26px;background:var(--paper);box-shadow:var(--shadow);padding:14px;border:1px solid var(--line)}
.wb .device .top{display:flex;align-items:center;gap:10px;padding:4px 8px 12px;font-size:13px;color:var(--ink-2)}
.wb .device .top b{color:var(--ink-2);font-weight:500}
.wb .device .top .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--rose);font-size:12px}
.wb .device .top .live i{width:7px;height:7px;border-radius:50%;background:var(--rose)}
.wb .device .stage{position:relative;border-radius:18px;background:var(--paper-2);height:clamp(320px,42vw,420px);overflow:hidden}
.wb .device .stage > div{position:absolute;inset:0;opacity:0;display:grid;place-items:center}
.wb .device .stage > div.on{opacity:1}
.wb .device .rail{display:flex;gap:8px;padding:12px 6px 2px}
.wb .device .rail button{flex:1;border:0;background:transparent;padding:8px 4px 10px;cursor:pointer;font:500 12px/1.2 var(--sans);color:var(--ink-2);border-top:2px solid var(--line);transition:color .2s}
.wb .device .rail button.on{color:var(--ink);border-top-color:var(--pig)}
.wb .ink{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.wb .ink.pig{stroke:var(--pig)}.wb .ink.thin{stroke-width:2.6;stroke:var(--ink-3)}.wb .ink.rose{stroke:var(--rose)}.wb .ink.mint{stroke:var(--mint)}
.wb .hw{font-family:var(--hand);font-weight:600;fill:var(--ink)}.wb .hw.pig{fill:var(--pig)}.wb .hw.rose{fill:var(--rose)}.wb .hw.dim{fill:var(--ink-3)}
.wb .draw{stroke-dasharray:var(--len,900);stroke-dashoffset:var(--len,900)}

/* floats */
.wb .float{position:absolute;pointer-events:none;filter:drop-shadow(0 10px 20px rgba(20,20,43,.10))}
.wb .float svg{display:block}

/* two-column row */
.wb .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--colgap);align-items:center}
.wb .row.flip .art{order:-1}
@media (max-width:980px){
  .wb .row{grid-template-columns:1fr;gap:var(--s4)}
  .wb .row.flip .art{order:0}
  .wb .art{min-height:0;padding:var(--s3)}
}
@media (max-width:640px){
  .wb .art{padding:var(--s2);border-radius:20px}
  .wb h2.t{font-size:clamp(26px,7.4vw,34px)}
  .wb .grid4{grid-template-columns:repeat(2,84px);grid-template-rows:repeat(2,84px)}
  .wb .try{padding:var(--s3) var(--s2)}
  .wb .device .stage{height:clamp(240px,58vw,320px)}
  .wb .device .rail button{font-size:11px}
  .wb #close{padding:var(--s5) var(--s3);border-radius:24px}
  .wb #close .cl-row{flex-direction:column;align-items:stretch}
}
.wb .art{position:relative;border-radius:24px;background:var(--paper-2);padding:var(--s3);min-height:min(420px,52vw);display:grid;place-items:center;justify-items:stretch;overflow:hidden}
.wb .art > svg{width:100%;height:auto;overflow:visible}
.wb .art.bare{background:transparent;padding:0;min-height:0;overflow:visible}
.wb .claims{display:grid;gap:14px;margin-top:var(--s4)}
.wb .claims > div{display:grid;grid-template-columns:30px minmax(0,1fr);gap:14px;align-items:start}
.wb .claims > div > div{display:block}
.wb .claims i{width:30px;height:30px;border-radius:50%;background:var(--pig-soft);display:grid;place-items:center;font:600 13px/1 var(--sans);color:var(--pig);font-style:normal}
.wb .claims > div > div > b{font-weight:600;display:block}
.wb .claims > div > div > span{color:var(--ink-2);font-size:15px;display:block;margin-top:2px}

/* answer-forms carousel (scroll driven) */
.wb .forms{position:relative;width:100%;height:clamp(360px,44vw,460px);border-radius:24px;background:var(--paper-2);overflow:hidden}
.wb .forms .card{position:absolute;inset:0;display:grid;place-items:center;padding:var(--s3);opacity:0}
.wb .forms .card svg{width:min(100%,620px);height:auto;overflow:visible}
.wb .forms .label{position:absolute;left:24px;bottom:20px;display:flex;align-items:center;gap:10px;font:500 13px/1 var(--sans);color:var(--ink-2)}
.wb .forms .label i{width:8px;height:8px;border-radius:50%;background:var(--pig)}
.wb .formsnav{display:flex;gap:8px;margin-top:var(--s3);flex-wrap:wrap}
.wb .formsnav > span{font:500 13px/1 var(--sans);padding:9px 14px;border-radius:999px;background:var(--paper-2);color:var(--ink-2)}
.wb .formsnav > span.on{background:var(--ink);color:var(--paper)}

/* video moment */
.wb .player{position:relative;width:100%;border-radius:20px;overflow:hidden;background:var(--ink);box-shadow:var(--shadow)}
.wb .player .frame{position:relative;aspect-ratio:16/10;background:var(--paper)}
.wb .player .frame svg{position:absolute;inset:0;width:100%;height:100%}
.wb .player .bar{display:flex;align-items:center;gap:10px;padding:10px 14px;color:rgba(255,255,255,.72);font-size:12px}
.wb .player .bar .pp{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center}
.wb .player .bar .pp svg{width:10px;height:10px;fill:#fff}
.wb .player .bar .track{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.18);position:relative;overflow:hidden}
.wb .player .bar .track i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--marigold);will-change:transform}
.wb .bubble{position:absolute;background:var(--ink);color:var(--paper);border-radius:14px 14px 14px 4px;padding:10px 14px;font:500 14px/1.3 var(--sans);box-shadow:var(--lift);opacity:0}
.wb .bubble.hand{font-family:var(--hand);font-weight:700;font-size:20px;background:var(--marigold);color:#14142B;border-radius:14px}

/* practice */
.wb .try{width:100%;border-radius:24px;background:var(--paper-2);padding:var(--s4);display:grid;gap:var(--s3);justify-items:center;text-align:center;position:relative;overflow:hidden}
.wb .try .q{font:600 22px/1.3 var(--sans)}
.wb .try .q i{font-style:normal;font-family:var(--hand);color:var(--pig);font-size:1.35em}
.wb .grid4{display:grid;grid-template-columns:repeat(2,104px);grid-template-rows:repeat(2,104px);gap:8px;padding:8px;border-radius:22px;background:var(--ink);position:relative;border:0;margin:0;min-inline-size:0}
.wb .grid4 button{border:0;border-radius:15px;background:var(--paper);padding:0;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .2s}
.wb .grid4 button:hover{transform:translateY(-2px)}
.wb .grid4 button.on{background:var(--pig)}
.wb .grid4 svg{position:absolute;inset:-44px;width:calc(100% + 88px);height:calc(100% + 88px);pointer-events:none;overflow:visible}
.wb .try .row2{display:flex;gap:10px}
.wb .try .say{font-family:var(--hand);font-weight:700;font-size:26px;color:var(--pig);min-height:1.3em}
/* The ring's own label, in the flow rather than hidden under the button row — see Practice.tsx. */
.wb .try .ringsay{font-family:var(--hand);font-weight:600;font-size:22px;color:var(--pig);min-height:1.3em;margin-top:calc(var(--s3) * -1)}
.wb .try .say.win{color:var(--mint)}
.wb .spark{position:absolute;width:9px;height:9px;border-radius:2px;opacity:0;pointer-events:none}

/* parents: the report */
.wb .report{width:100%;border-radius:24px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);padding:var(--s3);display:grid;gap:var(--s3)}
.wb .report .head{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-2)}
.wb .report .head b{color:var(--ink);font:600 15px/1 var(--sans)}
.wb .report .head .tag{margin-left:auto;font:500 12px/1 var(--sans);color:var(--ink);background:color-mix(in srgb,var(--mint) 14%,transparent);padding:6px 10px;border-radius:999px}
.wb .report .kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.wb .report .kpi{background:var(--paper-2);border-radius:16px;padding:14px}
.wb .report .kpi > span{font:500 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);display:block}
.wb .report .kpi > b{display:block;font:700 26px/1 var(--sans);margin-top:8px;font-variant-numeric:tabular-nums}
.wb .report .kpi > b span{font:inherit;letter-spacing:0;text-transform:none;color:inherit}
.wb .report .kpi > em{font-style:normal;font-size:12px;color:var(--ink-2);display:block;margin-top:6px}
.wb .report .chart{position:relative;height:150px}
.wb .report .chart svg{width:100%;height:100%;overflow:visible}
.wb .report .note{background:var(--paper-2);border-radius:16px;padding:16px 18px;font-family:var(--hand);font-weight:600;font-size:21px;line-height:1.2}
.wb .report .note em{font-style:normal;color:var(--ink);background:color-mix(in srgb,var(--rose) 24%,transparent);border-radius:4px;padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.wb .badges{display:flex;gap:10px;flex-wrap:wrap}
.wb .badges > div{display:inline-flex;align-items:center;gap:8px;background:var(--paper-2);border-radius:999px;padding:8px 14px;font:500 13px/1 var(--sans);color:var(--ink-2)}
.wb .badges svg{width:16px;height:16px;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}

/* subjects */
.wb .stages{display:grid;gap:12px;margin-top:var(--s4)}
.wb .stage{background:var(--paper-2);border-radius:20px;padding:clamp(16px,1.8vw,24px);display:grid;grid-template-columns:190px 1fr;gap:var(--s3);align-items:start}
.wb .stage .who{display:grid;gap:4px}
.wb .stage .who > b{font:600 17px/1.2 var(--sans)}
.wb .stage .who > span{font-size:13px;color:var(--ink-2)}
.wb .stage .subs{display:flex;flex-wrap:wrap;gap:8px}
.wb .stage .subs > span{font:500 13px/1 var(--sans);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:9px 13px;color:var(--ink-2)}
.wb .stage .subs span.acc{border-color:transparent;background:var(--pig-soft);color:var(--pig)}
@media (max-width:760px){.wb .stage{grid-template-columns:1fr}}

/* safe: depth */
.wb .safe{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s4)}
.wb .safe .item{display:grid;grid-template-columns:52px 1fr;gap:16px;align-items:start;padding:var(--s3) 0;border-top:1px solid var(--line)}
.wb .safe .item svg{width:52px;height:52px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.wb .safe .item .acc{stroke:var(--pig)}
.wb .safe .item > div > b{display:block;font:600 18px/1.25 var(--sans)}
.wb .safe .item > div > p{color:var(--ink-2);font-size:15px;margin-top:6px}
.wb .safe .item .proof{margin-top:10px;font:500 13px/1 var(--sans);color:var(--pig);display:inline-flex;align-items:center;gap:6px}
@media (max-width:860px){.wb .safe{grid-template-columns:1fr}}

/* ask blocks */
.wb .ask{border-radius:24px;background:var(--paper-2);padding:var(--s4);display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:center}
.wb .ask svg.w{width:96px}
.wb .ask .box{display:flex;gap:10px;background:var(--paper);border-radius:16px;padding:8px 8px 8px 20px;align-items:center;margin-top:var(--s2);box-shadow:var(--lift)}
.wb .ask input{flex:1;border:0;background:transparent;font:400 16px/1.4 var(--sans);color:var(--ink);min-width:0}
/* THE RING HAS TO OUTRANK THIS RULE, NOT TIE WITH IT. outline:none used to sit in the shorthand
   above; that rule and the page's input:focus-visible ring both weigh (0,2,1), the ask rule is
   written later, and later wins — so the hero ask box, the one control docs/SELL.md §4 calls the
   strongest asset on this site, was the only control on the public site a keyboard reader could
   not see themselves land on. Guarding it with :not(:focus-visible) keeps the resting box exactly
   as approved and lets the marigold ring through the moment it is focused from a keyboard. */
.wb .ask input:not(:focus-visible){outline:none}
.wb .ask .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;border:0;padding:0;margin-inline:0}
.wb .ask .chips > button{font:500 13px/1 var(--sans);padding:9px 13px;border-radius:999px;background:var(--paper);color:var(--ink-2);border:0;cursor:pointer}
.wb .ask .chips > button:hover{color:var(--ink)}
.wb .ask .answer{margin-top:14px;font-family:var(--hand);font-weight:600;font-size:22px;line-height:1.25;color:var(--ink);min-height:1.3em}
@media (max-width:860px){.wb .ask{grid-template-columns:1fr}.wb .ask svg.w{width:64px}}

.wb .others{margin-top:var(--s3);display:grid;gap:var(--s2)}
.wb .others .line{font-size:15px;color:var(--ink-2)}
.wb .models{display:flex;gap:10px;flex-wrap:wrap}
.wb .models a{display:inline-flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:12px 16px;font:500 14px/1 var(--sans);color:var(--ink);transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.wb .models a:hover{transform:translateY(-2px);box-shadow:var(--lift)}
.wb .models svg{width:18px;height:18px}


/* The fourth form card is the SPOKEN one now (sections/Forms.tsx), so the marked-up paragraph's
   eight rules came out with it. They styled a capability this tree does not have. */

/* ── the two modes: a doubt is any time, learning is every week ────────────────
   Two panels, tone-separated on the white ground, each carrying ONE accent doing
   one job (law v5): pig points at the immediate thing, marigold marks the earned
   one. Every selector is a CHILD selector and every class is namespaced tmode*
   — traps 1 and 3, both of which this page has already paid for. The accent is a
   4px inset bar painted with a gradient rather than a border, because law v5
   allows no border line on a surface. */
.wb .tmodes{margin-top:var(--s4);display:grid;gap:var(--s2)}
.wb .tmodes-note{font:600 15px/1.3 var(--sans);color:var(--ink-2)}
.wb .tmodes-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.wb .tmode{min-width:0;background:var(--paper-2);border-radius:20px;padding:var(--s3);
  background-image:linear-gradient(var(--tm),var(--tm));background-repeat:no-repeat;
  background-size:4px 100%;background-position:0 0}
.wb .tmode[data-mode="doubt"]{--tm:var(--pig)}
.wb .tmode[data-mode="learning"]{--tm:var(--marigold)}
.wb .tmode > .tmode-kicker{font:700 clamp(20px,2vw,26px)/1.15 var(--sans);letter-spacing:-.02em}
/* The rhythm line is the whole difference between the two modes, so it is the one
   thing that carries the accent. It is a WASH pill with ink on it, never accent-
   coloured text: marigold at 14px on paper is unreadable, and law v5's washes are
   exactly what a tile like this is for. */
.wb .tmode > .tmode-when{display:inline-block;margin-top:8px;padding:5px 10px;border-radius:999px;
  font:500 13px/1.2 var(--sans);color:var(--ink);
  background:color-mix(in srgb, var(--tm) 16%, var(--paper))}
.wb .tmode > p{color:var(--ink-2);font-size:15px;line-height:1.55;margin-top:var(--s2);max-width:46ch}
.wb .tmodes-hand{font-family:var(--hand);font-weight:600;font-size:22px;color:var(--ink)}
/* The same treatment the three beats' hand notes already use, so the page has one
   voice for what Wobo writes by hand. Rose and not marigold: marigold is unreadable
   as text on white at any size, and rose is already the page's "the thing that needs
   care" — which is precisely what the slow half of the argument is. */
.wb .tmodes-hand em{font-style:normal;color:var(--rose)}
@media (max-width:760px){.wb .tmodes-pair{grid-template-columns:1fr}}

/* ── it teaches YOU: the gap, the second way, the mastery ─────────────────────── */
.wb .beats{display:grid;gap:var(--s2);margin-top:var(--s4)}
.wb .beat{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:var(--colgap);align-items:center;
  background:var(--paper-2);border-radius:24px;padding:var(--s4)}
.wb .beat:nth-child(even){grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)}
.wb .beat:nth-child(even) .beat-art{order:-1}
.wb .beat .n{font-family:var(--hand);font-weight:700;font-size:26px;color:var(--pig)}
.wb .beat h3{font:700 clamp(24px,2.6vw,34px)/1.1 var(--sans);margin-top:6px;letter-spacing:-.03em}
.wb .beat p{color:var(--ink-2);font-size:16px;margin-top:var(--s2);max-width:44ch}
.wb .beat .said{font-family:var(--hand);font-weight:600;font-size:22px;color:var(--ink);margin-top:var(--s2)}
.wb .beat .said em{font-style:normal;color:var(--ink);background:color-mix(in srgb,var(--rose) 24%,transparent);border-radius:4px;padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.wb .beat-art{background:var(--paper);border-radius:18px;padding:var(--s3);display:grid;place-items:center;min-height:260px}
.wb .beat-art svg{width:100%;height:auto;overflow:visible}
@media (max-width:900px){.wb .beat,.wb .beat:nth-child(even){grid-template-columns:1fr;padding:var(--s3)}
  .wb .beat:nth-child(even) .beat-art{order:0}}

/* ── the climb: one path, two vibes ───────────────────────────────────────────── */
.wb .climb{margin-top:var(--s4);background:var(--paper-2);border-radius:26px;padding:var(--s4);display:grid;gap:var(--s3)}
.wb .climb .switch{display:inline-flex;background:var(--paper);border-radius:999px;padding:4px;gap:4px;justify-self:start;border:0;margin:0;min-inline-size:0}
.wb .climb .switch button{border:0;background:transparent;cursor:pointer;font:500 14px/1 var(--sans);color:var(--ink-2);padding:11px 18px;border-radius:999px}
.wb .climb .switch button.on{background:var(--ink);color:var(--paper)}
.wb .climb .stagewrap{position:relative;border-radius:20px;background:var(--paper);overflow:hidden;min-height:clamp(280px,34vw,360px)}
.wb .climb .stagewrap > svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .45s ease}
.wb .climb .stagewrap > svg.on{opacity:1}
.wb .climb .same{font-family:var(--hand);font-weight:600;font-size:22px;color:var(--ink)}
.wb .climb .same em{font-style:normal;color:var(--pig)}
.wb .climb .legend{display:flex;gap:18px;flex-wrap:wrap;color:var(--ink-2);font-size:14px}
.wb .climb .legend span{display:inline-flex;align-items:center;gap:8px}
.wb .climb .legend i{width:11px;height:11px;border-radius:3px}

/* the hero's try box — the same ask block, laid out in one column under the lede */
.wb #hero .ask.hero{grid-template-columns:1fr;padding:var(--s3);margin-top:var(--s3);gap:var(--s2)}
.wb #hero .ask.hero .trynote{font:500 13px/1.4 var(--sans);color:var(--ink-2)}
.wb #hero .ask.hero .box{margin-top:10px}
.wb #hero .ask.hero .answer{font-size:20px}

/* what it costs — three plans and the way out */
.wb .prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:var(--s4)}
.wb .prices .plan{background:var(--paper-2);border-radius:20px;padding:clamp(18px,2vw,26px);display:grid;gap:10px;align-content:start}
.wb .prices .plan.lead{background:var(--ink)}
.wb .prices .plan > .pl-name{font:600 17px/1.2 var(--sans);display:flex;align-items:baseline;gap:10px}
.wb .prices .plan.lead > .pl-name{color:var(--paper)}
.wb .prices .plan > .pl-name em{font-style:normal;font:500 12px/1 var(--sans);color:#14142B;background:var(--marigold);padding:4px 8px;border-radius:999px}
.wb .prices .plan > .pl-amount{font:700 clamp(26px,3vw,34px)/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.wb .prices .plan.lead > .pl-amount{color:var(--paper)}
.wb .prices .plan > .pl-amount span{font:500 14px/1 var(--sans);letter-spacing:0;color:var(--ink-2);margin-left:8px}
.wb .prices .plan.lead > .pl-amount span{color:color-mix(in srgb,var(--paper) 72%,transparent)}
.wb .prices .plan > .pl-said{font-size:14px;color:var(--ink-2)}
.wb .prices .plan.lead > .pl-said{color:color-mix(in srgb,var(--paper) 80%,transparent)}
.wb .prices .plan > .pl-fine{font-size:12px;color:var(--ink-2)}
.wb .prices .plan.lead > .pl-fine{color:color-mix(in srgb,var(--paper) 72%,transparent)}
.wb .cancel{margin-top:12px;background:var(--paper-2);border-radius:20px;padding:var(--s3);display:grid;gap:8px;justify-items:start}
.wb .cancel > b{font:600 17px/1.3 var(--sans)}
.wb .cancel > p{color:var(--ink-2);font-size:15px;max-width:70ch}
.wb .cancel > a{font:500 14px/1 var(--sans);color:var(--pig)}
@media (max-width:760px){.wb .prices{grid-template-columns:1fr}}

/* close: promotion */
.wb #close{background:var(--ink);color:#fff;border-radius:32px;padding:var(--band) var(--s4);text-align:center;position:relative;overflow:hidden;margin-bottom:var(--band)}
.wb #close h2{font:700 clamp(34px,4.6vw,58px)/1.02 var(--sans);letter-spacing:-.035em;color:#fff}
.wb #close .sub{color:rgba(255,255,255,.72);margin:var(--s3) auto 0;max-width:48ch}
/* The two doors, where the email field used to be: one loud, one quiet, never equal weight.
   The quiet one cannot use .btn.ghost: that is ink on paper, and this panel IS ink. */
.wb #close .cl-row{display:flex;gap:12px;justify-content:center;margin-top:var(--s4);flex-wrap:wrap}
.wb #close .btn{background:var(--marigold);color:#14142B}
.wb #close .btn.cl-q{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.30)}
.wb #close .cl-hand{color:var(--marigold);margin-top:var(--s3)}
.wb #close .fine{color:rgba(255,255,255,.5);font-size:13px;margin-top:var(--s2)}
.wb #close .glow{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(43,69,255,.35),transparent 70%);filter:blur(20px);pointer-events:none}

.wb footer{padding:0 0 var(--band);color:var(--ink-2);font-size:14px}
.wb footer .grid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:var(--s3)}
.wb footer b{display:block;color:var(--ink);font-weight:600;margin-bottom:12px;font-size:14px}
.wb footer a{display:block;padding:5px 0;color:var(--ink-2)}
.wb footer .wm svg{height:20px;color:var(--ink)}
@media (max-width:860px){.wb footer .grid{grid-template-columns:1fr 1fr}}
/* A THUMB, NOT A POINTER. On a phone every control is at least 44px tall (WCAG 2.5.8, and the
   proof rule in DESIGN.md §0): the footer's links measured 32px, the ask chips 31, the hero rail
   33, the climb switch 36 and the wordmark 22 at 390 (wave 29's walk). The type and the spacing
   are the prototype's; only the hit area grows, the same way the site sheet grows its footer. */
@media (max-width:640px){
  .wb footer a{min-height:44px;display:flex;align-items:center}
  .wb header .wm{min-height:44px;display:inline-flex;align-items:center}
  .wb .chips button,.wb .device .rail button,.wb .climb .switch button{min-height:44px}
  .wb .safe .item .proof,.wb .cancel > a{min-height:44px;display:inline-flex;align-items:center}
  /* The parent report's numbers, one per row. Here and not above: the three-column rule is
     written later in the sheet with the same weight, and it won at 390. */
  .wb .report .kpis{grid-template-columns:1fr}
  .wb .report .kpi{display:flex;align-items:baseline;gap:10px}
  .wb .report .kpi > b{margin-top:0;font-size:22px}
}

.wb .blink{transform-origin:center;animation:wb-blink 5.5s infinite}
@keyframes wb-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@media (prefers-reduced-motion:reduce){
  .wb .blink{animation:none}
  .wb .draw{stroke-dashoffset:0 !important}
  .wb h2.t .hl{background-size:100% 92%}
  /* Nothing scrubs, so the four answer cards and the pinned rail lay out as an ordinary stack
     rather than four cards at opacity 0 on top of one another. */
  .wb #forms .row{align-items:start}
  .wb .forms{height:auto;display:grid;gap:var(--s2);background:transparent}
  .wb .forms .card{position:relative;inset:auto;opacity:1;background:var(--paper-2);border-radius:24px}
  .wb .player .bar .track i{transform:scaleX(.38)}
  .wb .bubble{opacity:1;position:relative;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;margin:8px;max-width:none !important}
  .wb .player .frame{aspect-ratio:auto;padding-bottom:8px}
  .wb .player .frame svg{position:relative;inset:auto;height:auto}
}