: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);
}

/* --- the page ------------------------------------------------------------------------------- */
.st{background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip;display:flex;flex-direction:column;min-height:100vh}
.st>main{flex:1 0 auto}
.st h1,.st h2,.st h3{margin:0;letter-spacing:-.025em;text-wrap:balance}
.st p{margin:0}
/* :where keeps this at class weight, so a button drawn on an anchor (.st-btn) keeps its own colour */
.st :where(a){color:inherit;text-decoration:none}
.st-wrap{width:min(1120px,calc(100% - 48px));margin:0 auto}
.st-btn{font:500 15px/1 var(--sans);padding:14px 20px;border-radius:12px;border:0;background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;cursor:pointer}
.st-btn.st-pig{background:var(--pig);color:#fff}
.st-btn.st-quiet{background:var(--paper-2);color:var(--ink)}
.st-btn.st-marigold{background:var(--marigold);color:#14142B}
.st-btn:disabled{cursor:not-allowed;opacity:.42}
.st .st-btn:focus-visible,.st input:focus-visible,.st button:focus-visible,.st summary:focus-visible,.st a:focus-visible,.st select:focus-visible,.st textarea:focus-visible{outline:3px solid var(--marigold);outline-offset:2px}
.st-skip{position:fixed;left:12px;top:-80px;z-index:60;background:var(--paper-2);color:var(--ink);padding:12px 16px;border-radius:12px;transition:top 140ms ease}
.st-skip:focus{top:12px}

/* --- the header: sticky, blurred, the wordmark, the pill nav, the two doors ------------------ */
.st-header{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);background:color-mix(in srgb,var(--paper) 78%,transparent)}
.st-header .st-wrap{display:flex;align-items:center;gap:var(--s3);height:72px}
.st-header .st-wm svg{height:22px;width:auto;color:var(--ink);display:block}
.st-header nav{margin-left:auto;display:flex;gap:4px;background:var(--paper-2);padding:4px;border-radius:999px}
.st-header nav a{padding:10px 16px;border-radius:999px;font:500 14px/1 var(--sans);color:var(--ink-2)}
.st-header nav a.st-on{background:var(--ink);color:var(--paper)}
.st-header .st-cta{display:flex;gap:8px}
/* a door (sign in, sign up) has no pill nav: the one quiet button sits where the doors do */
.st-header .st-door{margin-left:auto}

/* --- reveal on scroll: visible at rest, a small rise while it is below the fold -------------- */
.st-reveal{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
.st-reveal.st-pre{opacity:0;transform:translateY(18px)}

/* --- a chapter: the label, the heading, the line under it ----------------------------------- */
/* ONE RHYTHM, AND --band IS IT. This read clamp(56px,7vw,92px), which never touched --band at
   all: at 1440 it gave 92 + 92 = 184px between two sections while the landing page's
   calc(var(--band)/2) gave 79.2 + 79.2 = 158.4px, and the two disagreed at every width (at 834:
   116.8 against 96). DESIGN.md §0 — "--band clamp(96px,11vw,184px) between sections (half from each
   side, so two sections never stack two bands of air). This line is the number, not a second
   opinion about it." Reading the token makes the site and the landing page agree everywhere and is
   the only way they stay agreed when the owner moves the number again. */
.st-section{padding:calc(var(--band) / 2) 0}
.st-head{display:grid;gap:var(--s2);max-width:64ch;margin-bottom:var(--s4)}
.st-head h2{font:700 clamp(28px,3.4vw,42px)/1.08 var(--sans)}
.st-head p{color:var(--ink-2);font-size:18px}

/* --- tiles: three across, every one on paper-2 --------------------------------------------- */
.st-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.st-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
.st-tile{border-radius:22px;padding:var(--s3);background:var(--paper-2);display:grid;gap:10px;align-content:start}
/* law v5: a wash tints a pill, a tick or a selected row — never a card, a tile, a panel or a section. Surfaces are paper-2. */
.st-tile h3{font:600 19px/1.25 var(--sans)}
.st-tile p{color:var(--ink-2);font-size:15px}
.st-tile svg{width:44px;height:44px;fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}

/* --- the ask block: Wobo's head, a label, a line, the box, three chips ---------------------- */
.st-ask{background:var(--paper-2);border-radius:28px;padding:var(--s4);display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:center}
.st-ask h2{font:700 28px/1.1 var(--sans)}
.st-ask .wk-ask{display:flex;gap:10px;background:var(--paper);border-radius:16px;padding:8px 8px 8px 18px;align-items:center;margin-top:var(--s2);max-width:none}
.st-ask .wk-ask .wk-mic{background:var(--paper-2)}
.st-ask .st-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.st-ask .st-chips .wk-chip{font:500 13px/1 var(--sans);padding:8px 12px;border-radius:999px;background:var(--paper);color:var(--ink-2)}

/* --- the close panel: the early-access promotion ---------------------------------------------- */
.st-close{margin:var(--s5) 0 0;background:var(--ink);color:var(--paper);padding:var(--s6) 0;text-align:center}
.st-close h2{font:700 clamp(34px,5vw,60px)/1.02 var(--sans);letter-spacing:-.035em}
.st-close .hand{font-size:30px;color:var(--marigold);display:block;margin-top:var(--s2)}
.st-close .st-row{display:flex;gap:var(--s2);justify-content:center;margin-top:var(--s4);flex-wrap:wrap}
.st-close .st-btn{background:var(--marigold);color:#14142B}
.st-close .st-btn.st-q{background:color-mix(in srgb,var(--paper) 12%,transparent);color:var(--paper)}
.st-close .st-fine{margin:var(--s4) auto 0;max-width:60ch;color:color-mix(in srgb,var(--paper) 72%,transparent);font-size:15px}
.st-close .st-fine a{color:var(--marigold);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

/* --- the footer: four columns and the line ------------------------------------------------- */
.st-footer{background:var(--ink);color:color-mix(in srgb,var(--paper) 60%,transparent);padding:var(--s4) 0 var(--s5);font-size:14px}
.st-footer .st-wrap{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--s3)}
.st-footer b{display:block;color:var(--paper);font-weight:600;margin-bottom:10px}
.st-footer a{display:block;padding:4px 0}
.st-footer .st-wm svg{height:22px;color:var(--paper)}
.st-footer a[aria-current="page"]{color:var(--paper)}
.st-footer .st-line{margin-top:10px;max-width:28ch}
/* Where to follow Wobo. Quiet by design: the footer's job is the columns, and these sit under the
   line as a row of words rather than a row of logos, because a brand mark we do not own is not
   ours to draw and a glyph set is weight for nothing. Phone hit areas clear 44px (DESIGN.md). */
.st-footer .st-social{margin-top:12px;display:flex;flex-wrap:wrap;gap:16px}
.st-footer .st-social a{color:var(--ink-2);font-size:15px;text-decoration:none;text-underline-offset:4px;padding:11px 0}
.st-footer .st-social a:hover,.st-footer .st-social a:focus-visible{color:var(--ink);text-decoration:underline}

/* --- prose: reviewed copy, rendered (help articles, the legal set, the gift page) ------------ */
.st-prose{color:var(--ink-2);font-size:17px;line-height:1.65;max-width:68ch}
.st-prose h2{font:700 clamp(24px,2.6vw,32px)/1.1 var(--sans);color:var(--ink);margin:var(--s4) 0 var(--s2);scroll-margin-top:88px}
.st-prose h3{font:600 20px/1.25 var(--sans);color:var(--ink);margin:var(--s3) 0 var(--s1);scroll-margin-top:88px}
.st-prose h2:first-child,.st-prose h3:first-child{margin-top:0}
.st-prose p{margin:0 0 var(--s2)}
.st-prose ul,.st-prose ol{margin:0 0 var(--s2);padding-left:22px}
.st-prose li{margin-bottom:8px}
.st-prose li::marker{color:var(--pig)}
.st-prose strong{color:var(--ink);font-weight:600}
.st-prose a{color:var(--pig);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.st-prose code{font:inherit;background:var(--paper-2);border-radius:10px;padding:2px 8px}
.st-prose hr{border:0;height:2px;border-radius:999px;background:var(--paper-3);margin:var(--s4) 0}
.st-prose>:last-child{margin-bottom:0}
/* an unfilled term in the reviewed copy, shown as the gap it is rather than invented */
.st-slot{color:var(--ink-3);background:var(--paper-2);border-radius:10px;padding:0 8px}
/* a table in a document: the plans table's shape */
.st-scroll{margin:0 0 var(--s3);overflow-x:auto;border-radius:24px}
.st-grid{border-collapse:collapse;width:100%;min-width:560px;background:var(--paper-2);font-size:15px}
.st-grid th,.st-grid td{padding:14px var(--s3);text-align:left;vertical-align:top}
.st-grid th{font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);background:var(--paper-3);padding:var(--s2) var(--s3)}
.st-grid tr+tr td{border-top:2px solid var(--paper)}
.st-grid td:first-child{font-weight:500;color:var(--ink)}
/* the "in plain words" card: the highlighter, Wobo's hand, then the honest summary */
.st-plain{background:var(--paper-2);border-radius:24px;padding:var(--s3);margin:0 0 var(--s4);box-shadow:inset 3px 0 0 var(--marigold)}
.st-plain .hand{display:block;font-size:26px;color:var(--ink);margin-bottom:var(--s1)}
.st-plain p{color:var(--ink-2);font-size:17px;margin:0 0 12px}
.st-plain p:last-child{margin-bottom:0}
/* a note card: a tag and a line */
.st-note{background:var(--paper-2);border-radius:20px;padding:20px var(--s3);display:grid;gap:8px}
.st-note p{color:var(--ink-2);font-size:15px}
/* a crumb: where the page sits */
.st-crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font:500 14px/1.3 var(--sans);color:var(--ink-3);margin-bottom:var(--s3)}
.st-crumb a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.st-crumb a:hover{color:var(--ink)}
.st-crumb b{font-weight:500;color:var(--ink-2)}
/* a field: a small label over a tonal input */
.st-field{display:grid;gap:6px;text-align:left}
.st-field label{font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.st-field input,.st-field select,.st-field textarea{font:400 17px/1.4 var(--sans);padding:14px 16px;border-radius:12px;border:0;background:var(--paper-2);color:var(--ink);width:100%;min-height:50px}
.st-field input::placeholder,.st-field textarea::placeholder{color:var(--ink-3)}
.st-field textarea{min-height:180px;resize:vertical;line-height:1.55}
.st-field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 24px) 22px,calc(100% - 18px) 22px;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.st-fine{font-size:13px;color:var(--ink-3)}
.st-hint{font-size:14px;color:var(--ink-2)}
/* a page hero that announces itself: a label, a headline, a line */
.st-page-hero{padding:var(--s5) 0 var(--s4)}
.st-page-hero h1{font:700 clamp(36px,4.8vw,58px)/1.04 var(--sans);letter-spacing:-.035em;margin-top:var(--s2);max-width:18ch}
.st-page-hero h1 em{font-style:normal;color:var(--pig)}
.st-page-hero p.st-sub{font-size:19px;color:var(--ink-2);max-width:52ch;margin-top:var(--s3)}
.st-page-hero .hand{font-size:26px;color:var(--pig);display:block;margin-top:var(--s2)}
.st-page-hero .st-row{display:flex;gap:var(--s2);margin-top:var(--s4);flex-wrap:wrap;align-items:center}
.st-chips{display:flex;gap:8px;flex-wrap:wrap}
.st-lines{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.st-lines li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:16px}
.st-lines li i{width:22px;height:22px;border-radius:50%;background:var(--mint);display:grid;place-items:center;margin-top:2px}
.st-lines li i svg{width:12px;height:12px;fill:none;stroke:#14142B;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.st-quiet-card{background:var(--paper-2);border-radius:20px;padding:var(--s3);color:var(--ink-3);font-size:15px;max-width:60ch}
.st-link{color:var(--pig);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

/* --- /about ------------------------------------------------------------------------------- */
.ab-hero{padding:clamp(40px,5vw,72px) 0 clamp(56px,7vw,92px)}
.ab-hero .st-wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center}
.ab-hero h1{font:700 clamp(36px,4.8vw,58px)/1.04 var(--sans);letter-spacing:-.035em;margin-top:var(--s2)}
.ab-hero h1 em{font-style:normal;color:var(--pig)}
.ab-hero p.ab-sub{font-size:19px;color:var(--ink-2);max-width:46ch;margin-top:var(--s3)}
.ab-hero .st-row{display:flex;gap:var(--s3);margin-top:var(--s4);flex-wrap:wrap;align-items:center}
.ab-hero .ab-under{font-size:15px;color:var(--ink-3)}
.ab-mission{background:var(--paper-2);border-radius:28px;padding:var(--s4);position:relative;transform:rotate(-1.5deg);box-shadow:0 26px 50px rgba(20,20,43,.12)}
.ab-mission .hand{font-size:clamp(28px,3vw,40px);line-height:1.12}
.ab-mission .hand em{font-style:normal;color:var(--rose)}
.ab-mission .ab-sig{margin-top:var(--s3);display:flex;align-items:center;gap:10px;font-family:var(--hand);font-weight:700;font-size:24px}
.ab-mission .ab-pin{position:absolute;top:-14px;left:50%;width:28px;height:28px;border-radius:50%;background:var(--marigold);transform:translateX(-50%);box-shadow:0 8px 16px rgba(20,20,43,.16)}
.ab-story{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start}
.ab-story p{color:var(--ink-2);font-size:18px;max-width:52ch}
.ab-story p+p{margin-top:var(--s2)}
.ab-story .ab-pull{font-family:var(--hand);font-weight:600;font-size:30px;line-height:1.15;color:var(--ink);background:var(--paper-2);border-radius:24px;padding:var(--s3)}
.ab-story .ab-pull em{font-style:normal;color:var(--rose)}
.ab-promises{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
.ab-promise{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;background:var(--paper-2);border-radius:20px;padding:var(--s3)}
.ab-promise i{width:44px;height:44px;border-radius:50%;background:var(--marigold);display:grid;place-items:center;font:700 22px/1 var(--hand);font-style:normal;color:var(--ink)}
.ab-promise b{display:block;font-weight:600;font-size:17px}
.ab-promise span{color:var(--ink-2);font-size:15px}
.ab-team{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s4);align-items:center;background:var(--ink);color:var(--paper);border-radius:32px;padding:var(--s5) var(--s4)}
.ab-team h2{font:700 clamp(28px,3.4vw,42px)/1.06 var(--sans)}
.ab-team p{color:color-mix(in srgb,var(--paper) 72%,transparent);margin-top:var(--s2);max-width:46ch}
.ab-team .hand{font-size:28px;color:var(--marigold);margin-top:var(--s3)}
.ab-team .ab-cards{display:grid;gap:12px}
.ab-team .ab-card{background:color-mix(in srgb,var(--paper) 8%,transparent);border-radius:18px;padding:18px 20px;display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:center}
.ab-team .ab-card .ab-a{width:48px;height:48px;border-radius:50%;background:var(--marigold);display:grid;place-items:center;font:700 18px/1 var(--sans);color:#14142B}
.ab-team .ab-card b{display:block;font-weight:600}
.ab-team .ab-card span{font-size:14px;color:color-mix(in srgb,var(--paper) 60%,transparent)}
.ab-team .ab-card .ab-a.ab-paper{background:var(--paper)}
.ab-team .ab-card .ab-a.ab-plus{background:color-mix(in srgb,var(--paper) 14%,transparent);color:var(--paper)}
.ab-team .st-label{color:var(--marigold)}

/* --- /plans ------------------------------------------------------------------------------- */
.pl-hero{padding:var(--s5) 0 var(--s4);text-align:center}
.pl-hero h1{font:700 clamp(38px,5.4vw,64px)/1.0 var(--sans);letter-spacing:-.035em;margin:var(--s2) auto 0;max-width:18ch}
.pl-hero h1 em{font-style:normal;color:var(--pig)}
.pl-hero p.pl-sub{font-size:19px;color:var(--ink-2);max-width:52ch;margin:var(--s3) auto 0}
.pl-hero p.pl-when{font-size:17px;color:var(--ink);max-width:52ch;margin:var(--s2) auto 0}
.pl-hero .st-row{display:flex;gap:var(--s2);justify-content:center;margin-top:var(--s4);flex-wrap:wrap}
/* law v5: where someone reads from is inferred from the browser's time zone, never asked. There is no country switch on this page. */
.pl-allow{margin:var(--s4) auto 0;max-width:560px;background:var(--paper-2);border-radius:24px;padding:var(--s3);text-align:left;display:grid;gap:12px;position:relative}
.pl-allow b{font-weight:600}
.pl-allow .pl-bar{height:14px;border-radius:7px;background:var(--paper-3);overflow:hidden;position:relative}
.pl-allow .pl-bar i{position:absolute;left:0;top:0;height:100%;width:100%;border-radius:7px;background:var(--marigold);transform:scaleX(0);transform-origin:left;will-change:transform;transition:transform 1.4s cubic-bezier(.6,0,.2,1)}
.pl-allow > span:not(.wk-sticker){font-size:13px;color:var(--ink-2)}
.pl-allow .hand{font-size:24px;color:var(--pig)}
.pl-allow .wk-sticker{right:-14px;top:-16px}
.pl-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);align-items:start}
.pl-plan{border-radius:28px;padding:var(--s3);display:grid;gap:14px;background:var(--paper-2);position:relative}
.pl-plan.pl-pro{background:var(--paper-2);box-shadow:inset 0 0 0 3px var(--pig)}
.pl-plan.pl-max{background:var(--ink);color:var(--paper)}
.pl-plan .pl-name{font:600 14px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.pl-plan.pl-max .pl-name{color:color-mix(in srgb,var(--paper) 60%,transparent)}
.pl-plan .pl-price{font:700 44px/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pl-plan .pl-price small{font:500 15px/1 var(--sans);letter-spacing:0;color:var(--ink-3);margin-left:6px}
.pl-plan.pl-max .pl-price small{color:color-mix(in srgb,var(--paper) 60%,transparent)}
.pl-plan .pl-x{font-family:var(--hand);font-weight:700;font-size:26px;color:var(--pig);line-height:1}
.pl-plan.pl-max .pl-x{color:var(--marigold)}
.pl-plan p{font-size:15px;color:var(--ink-2)}
.pl-plan.pl-max p{color:color-mix(in srgb,var(--paper) 75%,transparent)}
.pl-plan ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.pl-plan li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:15px}
.pl-plan li i{width:22px;height:22px;border-radius:50%;background:var(--mint);display:grid;place-items:center}
.pl-plan li i svg{width:12px;height:12px;fill:none;stroke:#14142B;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.pl-plan .st-btn{margin-top:6px}
.pl-plan.pl-max .st-btn{background:var(--marigold);color:#14142B}
.pl-plan .pl-free{background:var(--paper)}
.pl-plan .pl-best{position:absolute;right:18px;top:-14px;background:var(--marigold);color:#14142B;font-family:var(--hand);font-weight:700;font-size:20px;padding:5px 12px;border-radius:10px;transform:rotate(4deg);box-shadow:0 10px 20px rgba(20,20,43,.12)}
.pl-plan .pl-fine{font-size:13px;color:var(--ink-3)}
.pl-plan.pl-max .pl-fine{color:color-mix(in srgb,var(--paper) 50%,transparent)}
.pl-tbl{border-radius:24px;overflow:hidden;background:var(--paper-2)}
.pl-tbl .pl-r{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;align-items:center}
.pl-tbl .pl-r+.pl-r{border-top:2px solid var(--paper)}
.pl-tbl .pl-r>div{padding:14px var(--s3);font-size:15px}
.pl-tbl .pl-r.pl-h>div{font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);background:var(--paper-3);padding:var(--s2) var(--s3)}
.pl-tbl .pl-r>div:first-child{font-weight:500}
.pl-tbl .pl-same{color:var(--ink-3)}
.pl-tbl .pl-y{display:inline-flex;align-items:center;gap:6px}
.pl-tbl .pl-y i{width:10px;height:10px;border-radius:50%;background:var(--mint)}
.pl-checkout{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:center}
.pl-checkout .pl-card{background:var(--paper);border-radius:24px;padding:var(--s3);box-shadow:0 18px 40px rgba(20,20,43,.10);display:grid;gap:14px}
.pl-checkout .pl-row{display:flex;justify-content:space-between;font-size:15px}
.pl-checkout .pl-row b{font-weight:600}
.pl-checkout label{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;font-size:14px;color:var(--ink-2);padding:12px;border-radius:14px;background:var(--paper-2)}
.pl-checkout label input{width:22px;height:22px;accent-color:var(--pig);margin:1px 0 0}
.pl-checkout label b{color:var(--ink);font-weight:600;display:block}
/* The consent boxes (checkout, and the sign-up agreement below). The box a learner SEES stays the
   prototype's 22px; the box a thumb has to HIT is 44 (the touch floor, DESIGN.md §2). A native
   checkbox cannot do that — its drawn size is its box — so the box is drawn here instead: a tonal
   well on the label's ground, Wobo blue with a cream tick once it is ticked. */
.pl-checkout label>input[type=checkbox],.wa-consent>input[type=checkbox]{appearance:none;-webkit-appearance:none;width:44px;height:44px;margin:-11px 0 -11px -11px;padding:0;background:transparent;cursor:pointer;display:grid;grid-template-areas:'box';place-items:center}
.pl-checkout label>input[type=checkbox]::before,.wa-consent>input[type=checkbox]::before{content:'';grid-area:box;width:22px;height:22px;border-radius:10px;background:var(--paper-3)}
.pl-checkout label>input[type=checkbox]:checked::before,.wa-consent>input[type=checkbox]:checked::before{background:var(--pig)}
.pl-checkout label>input[type=checkbox]::after,.wa-consent>input[type=checkbox]::after{content:'';grid-area:box;width:14px;height:14px;background:var(--paper);clip-path:polygon(14% 44%,0 58%,38% 96%,100% 34%,86% 20%,38% 68%);opacity:0}
.pl-checkout label>input[type=checkbox]:checked::after,.wa-consent>input[type=checkbox]:checked::after{opacity:1}
.pl-checkout .pl-total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--paper-2);padding-top:12px}
.pl-checkout .pl-total b{font:700 28px/1 var(--sans)}
.pl-checkout .pl-say{font-family:var(--hand);font-weight:600;font-size:26px;line-height:1.15;margin-top:var(--s3)}
.pl-checkout .pl-say em{font-style:normal;color:var(--rose)}
.pl-checkout .pl-head h2{font:700 clamp(28px,3.4vw,42px)/1.08 var(--sans);margin-top:10px}
.pl-checkout .pl-head p{color:var(--ink-2);margin-top:var(--s2);max-width:46ch}
.pl-checkout .pl-card .st-fine{font-size:13px;color:var(--ink-3)}
.pl-gift{background:var(--paper-2);border-radius:28px;padding:var(--s4);display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s4);align-items:center}
.pl-gift h2{font:700 clamp(26px,3vw,36px)/1.08 var(--sans)}
.pl-gift p{color:var(--ink-2);margin-top:var(--s2)}
.pl-gift .pl-row{display:flex;gap:var(--s2);margin-top:var(--s3);flex-wrap:wrap}
.pl-gift .st-btn.st-quiet{background:var(--paper)}
.pl-gift svg{width:min(100%,300px);justify-self:center;overflow:visible;filter:drop-shadow(0 20px 30px rgba(20,20,43,.14))}
.pl-gift .st-label{color:var(--ink-2)}
.pl-gift .pl-art{position:relative;justify-self:center;width:min(100%,300px)}
.pl-gift .pl-art .wk-head{position:absolute;right:-6px;top:-28px}
.pl-gift h2{margin-top:8px}
.pl-faq{display:grid;gap:10px}
.pl-faq details{background:var(--paper-2);border-radius:18px;padding:0 var(--s3)}
.pl-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding:18px 0;font-weight:500;font-size:17px}
.pl-faq summary::-webkit-details-marker{display:none}
.pl-faq summary::after{content:"+";font:600 24px/1 var(--sans);color:var(--pig);transition:transform .3s}
.pl-faq details[open] summary::after{transform:rotate(45deg)}
.pl-faq details p{color:var(--ink-2);padding:0 0 18px;max-width:64ch}
.pl-faq details p a{color:var(--pig);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
/* the checkout page: the honest state, a list of promises */
.pl-promises{margin:var(--s3) 0 0;padding:0;list-style:none;display:grid;gap:10px;max-width:62ch}
.pl-promises li{background:var(--paper-2);border-radius:16px;padding:14px 20px;font-size:16px;color:var(--ink-2)}

/* --- /help ---------------------------------------------------------------------------------- */
.hp-search{display:flex;gap:10px;background:var(--paper-2);border-radius:16px;padding:8px 8px 8px 18px;align-items:center;margin-top:var(--s3);max-width:560px}
.hp-search input{flex:1;border:0;background:transparent;font:400 17px/1.4 var(--sans);color:var(--ink);outline:none;min-width:0;min-height:40px}
.hp-search input::placeholder{color:var(--ink-3)}
.hp-search input::-webkit-search-cancel-button{appearance:none;display:none}
.hp-count{font-size:14px;color:var(--ink-3);margin-top:12px}
.hp-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);align-items:start}
.hp-group{border-radius:22px;padding:var(--s3);background:var(--paper-2);display:grid;gap:10px;align-content:start}
/* law v5: a wash tints a pill, a tick or a selected row — never a card, a tile, a panel or a section. Surfaces are paper-2. */
.hp-group h2{font:600 22px/1.2 var(--sans)}
.hp-group>p{color:var(--ink-2);font-size:15px}
.hp-mark{width:44px;height:44px;fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.hp-list{display:grid;gap:2px;margin-top:var(--s1)}
.hp-list a{display:flex;align-items:center;min-height:44px;padding:6px 12px;border-radius:12px;font:500 15px/1.3 var(--sans);color:var(--ink)}
.hp-list a:hover{background:var(--paper)}
.hp-list a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.hp-results{display:grid;gap:10px}
.hp-result{background:var(--paper-2);border-radius:18px;padding:18px var(--s3);display:grid;gap:4px}
.hp-result:hover{transform:translateY(-1px);box-shadow:var(--lift)}
.hp-result b{font:600 17px/1.3 var(--sans);color:var(--ink)}
.hp-result span{font-size:15px;color:var(--ink-2)}
.hp-empty{color:var(--ink-2);font-size:17px;max-width:52ch}
.hp-article{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s5);align-items:start;padding:var(--s4) 0 var(--s5)}
.hp-article h1{font:700 clamp(30px,3.6vw,44px)/1.08 var(--sans);letter-spacing:-.03em}
.hp-lead{font:500 clamp(19px,1.8vw,22px)/1.45 var(--sans);color:var(--ink);margin:var(--s2) 0 var(--s3);max-width:46ch}
.hp-next{margin-top:var(--s4);background:var(--paper-2);border-radius:20px;padding:var(--s3);display:grid;gap:6px}
.hp-next a{font:600 19px/1.25 var(--sans);color:var(--ink);display:inline-flex;align-items:center;min-height:44px}
.hp-next a:hover{color:var(--pig)}
.hp-aside{position:sticky;top:88px;background:var(--paper-2);border-radius:22px;padding:var(--s3);display:grid;gap:10px}
.hp-aside h2{font:600 16px/1.2 var(--sans)}
.hp-article .st-ask{margin-top:var(--s4)}

/* --- /legal ----------------------------------------------------------------------------------- */
.lg-rows{display:grid;gap:12px}
.lg-row{background:var(--paper-2);border-radius:20px;padding:20px var(--s3);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) minmax(0,.9fr);gap:6px var(--s3);align-items:baseline}
.lg-row:hover{transform:translateY(-1px);box-shadow:var(--lift)}
.lg-row-title{font:600 17px/1.3 var(--sans);color:var(--ink)}
.lg-row-what{font-size:15px;color:var(--ink-2)}
.lg-row-who{font-size:14px;color:var(--ink-3)}
.lg-doc{display:grid;grid-template-columns:240px minmax(0,1fr);gap:var(--s5);align-items:start;padding:var(--s4) 0 var(--s5)}
.lg-toc{position:sticky;top:88px;background:var(--paper-2);border-radius:22px;padding:var(--s3)}
.lg-toc ol{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:2px}
.lg-toc a{display:flex;align-items:center;min-height:44px;padding:6px 12px;border-radius:12px;font-size:14px;line-height:1.35;color:var(--ink-2)}
.lg-toc a:hover{background:var(--paper);color:var(--ink)}
.lg-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
.lg-meta .wk-pill{background:var(--paper-2);font-size:14px;padding:8px 12px}

/* --- /gift ----------------------------------------------------------------------------------- */
.gf-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.gf-step{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;background:var(--paper-2);border-radius:20px;padding:var(--s3)}
.gf-step i{width:44px;height:44px;border-radius:50%;background:var(--marigold);display:grid;place-items:center;font:700 22px/1 var(--hand);font-style:normal;color:var(--ink)}
.gf-step p{color:var(--ink-2);font-size:15px}
.gf-boards{margin-top:var(--s3)}
.gf-boards .st-fine{margin-top:12px;display:block}

/* --- /contact ------------------------------------------------------------------------------- */
.ct-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s4);align-items:start}
.ct-form{background:var(--paper-2);border-radius:28px;padding:var(--s4);display:grid;gap:var(--s2)}
.ct-form .st-field input,.ct-form .st-field select,.ct-form .st-field textarea{background:var(--paper)}
.ct-form .st-row{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.ct-boxes{display:grid;gap:10px}
.ct-box{background:var(--paper-2);border-radius:18px;padding:16px 20px;display:grid;gap:4px}
.ct-box a{font:600 16px/1.3 var(--sans);color:var(--pig);display:inline-flex;align-items:center;min-height:44px}
.ct-box span{font-size:14px;color:var(--ink-2)}
.ct-aside h2{font:600 22px/1.2 var(--sans);margin-bottom:var(--s2)}
.ct-aside .st-hint{margin-top:var(--s2)}

/* --- the two doors ---------------------------------------------------------------------------- */
.wa{display:grid;place-items:center;padding:var(--s4) 0 var(--s5)}
.wa-card{width:min(560px,100%);display:grid;gap:22px;justify-items:center;text-align:center}
.wa-bub{background:var(--paper-2);border-radius:18px 18px 18px 4px;padding:12px 18px;font-family:var(--hand);font-weight:700;font-size:26px;line-height:1.1;color:var(--ink);max-width:420px}
.wa-card h1{font:700 clamp(28px,3.6vw,40px)/1.08 var(--sans)}
.wa-card p.wa-sub{color:var(--ink-2);font-size:17px;max-width:44ch}
.wa-form{width:100%;display:grid;gap:10px}
.wa-form .st-btn{width:100%;min-height:48px;padding:15px 22px}
.wa-or{display:flex;align-items:center;gap:12px;font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);width:100%}
.wa-or::before,.wa-or::after{content:"";flex:1;height:3px;border-radius:999px;background:var(--paper-2)}
.wa-fine{font-size:13px;color:var(--ink-3);max-width:44ch;margin:0 auto}
.wa-parent{background:var(--paper-2);border-radius:20px;padding:var(--s3);display:grid;gap:8px;text-align:left}
.wa-parent h2{font:600 17px/1.25 var(--sans)}
.wa-parent p{font-size:15px;color:var(--ink-2)}
.wa-consent{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;font-size:14px;color:var(--ink-2);padding:12px;border-radius:14px;background:var(--paper-2);text-align:left}
.wa-consent input{width:22px;height:22px;accent-color:var(--pig);margin:1px 0 0}
.wa-consent a{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}
.wa-error{background:var(--rose-w);border-radius:14px;padding:12px 16px;font-size:15px;color:var(--ink);text-align:left;width:100%}
.wa-switch{font-size:14px;color:var(--ink-2)}
.wa-switch button{background:none;border:0;padding:0;font:inherit;font-weight:500;color:var(--ink);cursor:pointer;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px;min-height:44px}
.wa-glyph{width:16px;height:16px;flex:none}

/* --- /sitemap ---------------------------------------------------------------------------------- */
.sm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);align-items:start}
.sm-col{background:var(--paper-2);border-radius:22px;padding:var(--s3);display:grid;gap:2px;align-content:start}
.sm-col h2{font:600 19px/1.25 var(--sans);margin-bottom:8px}
.sm-col a{display:flex;align-items:center;min-height:44px;padding:4px 12px;border-radius:12px;font:500 15px/1.3 var(--sans);color:var(--ink)}
.sm-col a:hover{background:var(--paper)}

/* --- a phone ---------------------------------------------------------------------------------- */
@media (max-width:900px){
  .st-header nav{display:none}
  /* the touch floor (DESIGN.md §2): the wordmark and every footer link are a thumb's 44px tall */
  .st-header .st-wm{display:inline-flex;align-items:center;min-height:44px}
  .st-footer .st-wrap a{display:flex;align-items:center;min-height:44px;padding:0}
  .st-footer .st-wrap{grid-template-columns:1fr 1fr}
  /* the allowance sticker overhangs its card by 14px on a wide screen; on a phone the card is
     the width of the screen less the gutter, so the overhang sits inside the card's corner */
  .pl-allow .wk-sticker{right:4px}
  .hp-search input{min-height:44px}
  .st-ask{grid-template-columns:1fr}
  .st-grid3,.st-grid2{grid-template-columns:1fr}
  .ab-hero .st-wrap{grid-template-columns:1fr}
  .ab-mission{transform:none}
  .ab-story{grid-template-columns:1fr}
  .ab-promises{grid-template-columns:1fr}
  .ab-team{grid-template-columns:1fr}
  .pl-plans{grid-template-columns:1fr}
  .pl-tbl{overflow-x:auto}
  .pl-tbl .pl-r{min-width:640px}
  .pl-checkout{grid-template-columns:1fr}
  .pl-gift{grid-template-columns:1fr}
  .hp-groups{grid-template-columns:1fr}
  .hp-article{grid-template-columns:1fr}
  .hp-aside{position:static}
  .lg-row{grid-template-columns:1fr}
  .lg-doc{grid-template-columns:1fr}
  .lg-toc{position:static}
  .gf-steps{grid-template-columns:1fr}
  .ct-grid{grid-template-columns:1fr}
  .sm-grid{grid-template-columns:1fr}
}
/* --- the invitation, where the door was (docs/DOORS-CLOSED.md §3) ---------------------------- */
/* One column, narrow enough to read in one line of sight, and nothing on it but the words, two
   fields and the door. No card, no wash, no panel: law v5's white ground, with the one saturated
   thing on the page being the action, exactly as every other site page is built. */
.jl{padding:var(--s5) 0 var(--s6)}
.jl-wrap{width:min(560px,calc(100% - 48px))}
.jl-title{font:700 clamp(32px,5vw,52px)/1.04 var(--sans);letter-spacing:-.035em}
.jl-what{color:var(--ink-2);font-size:19px;margin-top:var(--s3)}
.jl-promise{color:var(--ink);font-size:17px;margin-top:var(--s2)}
.jl-form{margin-top:var(--s4)}
.jl-lab{display:block;font:500 15px/1.2 var(--sans);color:var(--ink);margin-top:var(--s3)}
.jl-field{display:block;width:100%;margin-top:10px;min-height:52px;padding:14px 16px;border:0;border-radius:12px;background:var(--paper-2);color:var(--ink);font:400 17px/1.4 var(--sans)}
.jl-hint{color:var(--ink-3);font-size:15px;margin-top:8px}
.jl-go{margin-top:var(--s3);width:100%;min-height:52px}
.jl-said{margin-top:var(--s3);color:var(--ink-2);font-size:16px}
.jl-done{font-size:20px;color:var(--ink);margin-top:var(--s4)}
.jl-quiet{margin-top:var(--s4);font-size:15px;color:var(--ink-2)}
.jl-quiet a{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .st-skip,.pl-allow .pl-bar i,.hp-result,.lg-row{transition:none}
}

/* --- print: a legal page has to survive being printed and filed ------------------------------ */
@media print{
  .st-header,.st-footer,.st-close,.st-skip,.lg-toc,.st-ask,.st-print-hide{display:none !important}
  .st{background:#fff;color:#000}
  .lg-doc{display:block;padding:0}
  .st-prose{max-width:none}
  .st-prose h2,.st-prose h3{break-after:avoid}
  .st-prose p,.st-prose li,.st-plain{break-inside:avoid}
  .st-reveal{opacity:1 !important;transform:none !important}
}


/* --- the drawing vocabulary the six pages share ------------------------------------------- */
html:has(.pt){scroll-behavior:smooth}
.pt [id]{scroll-margin-top:88px}
.pt-ink{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.pt-ink.pt-pig{stroke:var(--pig)}.pt-ink.pt-rose{stroke:var(--rose)}.pt-ink.pt-mint{stroke:var(--mint)}.pt-ink.pt-thin{stroke-width:2.5}
.pt-hw{font-family:var(--hand);font-weight:600;fill:var(--ink)}.pt-hw.pt-pig{fill:var(--pig)}.pt-hw.pt-rose{fill:var(--rose)}.pt-hw.pt-dim{fill:var(--ink-3)}
.pt-paper{fill:var(--paper)}
.pt-draw{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.8s cubic-bezier(.6,0,.2,1) .2s}
.pt-on .pt-draw{stroke-dashoffset:0}
.pt-blink{transform-origin:center;animation:pt-blink 5s infinite}
@keyframes pt-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes pt-fade{to{opacity:1}}
@keyframes pt-cur{50%{opacity:0}}
.pt-tight{padding:var(--s4) 0}
.pt-hero .pt-row{display:flex;gap:var(--s2);margin-top:var(--s4);flex-wrap:wrap;align-items:center}
.pt-hero .pt-note{font-size:14px;color:var(--ink-3)}
.pt-num{font-family:var(--hand);font-weight:700;font-size:28px;color:var(--pig)}

/* --- a chapter: the number, the line, the art beside it ---------------------------------- */
.pt-chapter{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:center}
.pt-chapter.pt-flip .pt-art{order:-1}
.pt-chapter h2{font:700 clamp(30px,3.6vw,46px)/1.06 var(--sans);margin-top:8px;isolation:isolate}
.pt-chapter h2 .pt-hl{position:relative;white-space:nowrap}
.pt-chapter h2 .pt-hl::before{content:"";position:absolute;left:-.1em;right:-.1em;bottom:.08em;height:.5em;background:var(--marigold);opacity:.55;border-radius:6px;z-index:-1;transform-origin:left;transform:scaleX(0);transition:transform .8s cubic-bezier(.6,0,.2,1) .2s}
.pt-chapter.pt-on h2 .pt-hl::before{transform:scaleX(1)}
/* TRAP 4 (DESIGN.md §0): white-space:nowrap on anything long. The mark above has to ride ONE
   unbroken line, because an absolutely positioned bar cannot follow an inline that wraps — and on
   a phone "changes the whole approach" at 30px is wider than the phone, so the students page
   measured 461px inside a 390px window and the whole site scrolled sideways. This is the fifth
   time this repo has paid for that rule, so the fix is the one the law prescribes rather than a
   shorter headline: below the phone breakpoint the mark stops being a bar and becomes the span's
   OWN painted background with box-decoration-break:clone, which wraps with the words. It is
   sized from the line box and centred (100% 92%, trap 5), so a superscript inside a highlighted
   phrase is contained rather than hanging out of the top of it. */
@media (max-width:560px){
  .pt-chapter h2 .pt-hl{white-space:normal;border-radius:6px;background-image:linear-gradient(color-mix(in srgb,var(--marigold) 55%,transparent),color-mix(in srgb,var(--marigold) 55%,transparent));background-size:100% 92%;background-position:0 50%;background-repeat:no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .pt-chapter h2 .pt-hl::before{display:none}
}
.pt-chapter p{color:var(--ink-2);font-size:18px;margin-top:var(--s2);max-width:46ch}
.pt-say{margin-top:var(--s3);font-family:var(--hand);font-weight:600;font-size:28px;line-height:1.15;color:var(--ink)}
.pt-say em{font-style:normal;color:var(--rose)}
.pt-art{border-radius:28px;padding:var(--s3);background:var(--paper-2);position:relative;min-height:380px;display:grid;place-items:center}
/* law v5: a wash tints a pill, a tick or a selected row — never a card, a tile, a panel or a section. Surfaces are paper-2. */
.pt-art.pt-night{background:var(--ink)}
.pt-art>svg{width:100%;height:auto;overflow:visible}
.pt-chat{width:100%;display:grid;gap:10px}
.pt-chat div{max-width:80%;padding:12px 16px;border-radius:18px;font-size:15px;line-height:1.45}
.pt-chat .pt-me{justify-self:end;background:var(--ink);color:var(--paper);border-bottom-right-radius:4px}
.pt-chat .pt-wo{justify-self:start;background:var(--paper);border-bottom-left-radius:4px;font-family:var(--hand);font-weight:600;font-size:22px;line-height:1.15}
.pt-chat .pt-wo b{color:var(--pig);font-weight:700}
/* 13px, not the prototype's 12: DESIGN.md §2 puts the label size at 13 and the responsive
   proof fails anything under it (tests/responsive.spec.ts, the 13px floor). The prototypes were
   drawn before that floor was measured, so this one declaration is the law rather than the port. */
.pt-chat .pt-t{justify-self:center;font-size:13px;color:var(--ink-3);padding:0}
/* the ask block's reply, in Wobo's hand, typed */
.pt-reply{margin-top:var(--s2);font-family:var(--hand);font-weight:600;font-size:24px;line-height:1.2;color:var(--ink);min-height:1.2em}
.pt-reply.pt-busy{color:var(--ink-3)}
/* THE TWO MODES, drawn as two (docs/SELL.md §2, owner 2026-09-04). A doubt is cleared the moment it
   appears; learning goes a bit at a time across weeks. Both buyer pages carry the pair, so the rule
   lives in the shared pt- vocabulary rather than twice under two page prefixes. TWO cards and
   never three: the shape is the argument, and a third would turn a distinction into a feature list.
   Paper on the art panel's paper-2, no border line, and one accent per card doing one job — pig is
   the pointer on the thing that happens now, mint confirms the thing that holds. .pt-chapter p is
   a descendant selector that reaches in here (DESIGN.md §0, trap 3), so the card's own paragraph
   states the three declarations it would otherwise inherit. */
.pt-modes{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
.pt-modes>div{background:var(--paper);border-radius:18px;padding:16px 18px;display:grid;gap:6px;align-content:start;min-width:0}
.pt-modes>div>span{font:500 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.pt-modes>div>b{font:600 17px/1.25 var(--sans)}
.pt-modes>div>p{font:400 14px/1.45 var(--sans);color:var(--ink-2);margin:0;max-width:none}
.pt-modes>div>em{font-style:normal;font:500 13px/1.3 var(--sans);color:var(--pig);display:flex;align-items:flex-start;gap:8px;min-width:0}
.pt-modes>div>em::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--pig);flex:0 0 auto;margin-top:4px}
.pt-modes>div.pt-slow>em{color:var(--mint)}
.pt-modes>div.pt-slow>em::before{background:var(--mint)}
@media (max-width:560px){.pt-modes{grid-template-columns:1fr}}
@media (max-width:900px){
  .pt-chapter{grid-template-columns:1fr;gap:var(--s3)}.pt-chapter.pt-flip .pt-art{order:0}.pt-art{min-height:0}
  /* the touch floor (DESIGN.md §2): the students page's angle slider is a thumb's 44px tall */
  .su-angle input[type=range]{min-height:44px}
}

/* --- /security ------------------------------------------------------------------------------ */
.sc-hero{padding:var(--s5) 0 var(--s5)}
.sc-hero .st-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s4);align-items:center}
.sc-hero h1{font:700 clamp(38px,5vw,64px)/1.02 var(--sans);letter-spacing:-.035em;margin-top:var(--s2)}
.sc-hero h1 em{font-style:normal;color:var(--pig)}
.sc-hero p.pt-sub{font-size:19px;color:var(--ink-2);max-width:48ch;margin-top:var(--s3)}
.sc-shield{display:grid;place-items:center}
.sc-shield svg{width:min(100%,420px);overflow:visible;filter:drop-shadow(0 22px 34px rgba(20,20,43,.14))}
.sc-shield .sc-draw{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1400;stroke-dashoffset:1400;animation:sc-draw 2.2s cubic-bezier(.6,0,.2,1) .2s forwards}
@keyframes sc-draw{to{stroke-dashoffset:0}}
.sc-shield .sc-fill{fill:var(--pig-w);opacity:0;animation:pt-fade .8s ease 1.6s forwards}
.sc-shield .sc-eyes{opacity:0;animation:pt-fade .5s ease 2.2s forwards}
.sc-shield .sc-hw{font-family:var(--hand);font-weight:700;fill:var(--ink);opacity:0;animation:pt-fade .6s ease 2.6s forwards}
.sc-short{background:var(--paper-2);border-radius:28px;padding:var(--s4);display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s5);align-items:start}
.sc-five{display:grid;gap:var(--s2)}
.sc-five>div{display:grid;grid-template-columns:34px 1fr;gap:var(--s2);align-items:start}
.sc-five i{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font:700 18px/1 var(--hand);font-style:normal;color:var(--ink);background:var(--marigold)}
.sc-five b{display:block;font-weight:600}
.sc-five span{color:var(--ink-2);font-size:15px}
.sc-short .hand{font-size:30px;line-height:1.15;color:var(--ink)}
.sc-short .hand em{font-style:normal;color:var(--rose)}
.sc-tbl{border-radius:24px;overflow:hidden;background:var(--paper-2)}
.sc-tbl .sc-r{display:grid;grid-template-columns:1.1fr 1.6fr 1fr 1fr;gap:var(--s2);padding:var(--s2) var(--s3);align-items:start}
.sc-tbl .sc-r+.sc-r{border-top:2px solid var(--paper)}
.sc-tbl .sc-r.sc-h{background:var(--paper-3);font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);padding:var(--s2) var(--s3)}
.sc-tbl b{font-weight:600}
.sc-tbl span{font-size:15px;color:var(--ink-2)}
.sc-tbl .sc-del{display:inline-flex;align-items:center;gap:6px;background:var(--rose-w);color:var(--ink);padding:6px 10px;border-radius:999px;font:500 13px/1 var(--sans)}
.sc-tbl .sc-del i{width:8px;height:8px;border-radius:50%;background:var(--rose)}
.st-tile .sc-gloss{font-size:13px;color:var(--ink-3)}
.sc-flow{margin-top:var(--s4);background:var(--paper-2);border-radius:28px;padding:var(--s3);overflow-x:auto}
.sc-flow svg{width:100%;min-width:720px;height:auto;display:block}
.sc-flow .sc-ink{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.sc-flow .sc-box{fill:var(--paper);stroke:var(--ink);stroke-width:3.5}
.sc-flow .sc-box.sc-pig{fill:var(--pig-w)}.sc-flow .sc-box.sc-mint{fill:var(--mint-w)}.sc-flow .sc-box.sc-rose{fill:var(--rose-w)}.sc-flow .sc-box.sc-marigold{fill:var(--marigold-w)}
.sc-flow .sc-t{font:600 15px var(--sans);fill:var(--ink)}
.sc-flow .sc-s{font:400 13px var(--sans);fill:var(--ink-2)}
.sc-flow .sc-hw{font:700 22px var(--hand);fill:var(--pig)}
.sc-flow .sc-lock{fill:var(--marigold);stroke:var(--ink);stroke-width:3}
.sc-flow .sc-fdraw{stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.6s cubic-bezier(.6,0,.2,1)}
.sc-flow.pt-on .sc-fdraw{stroke-dashoffset:0}
.sc-children{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);align-items:center}
.sc-children .sc-card{background:var(--paper-2);border-radius:28px;padding:var(--s4);display:grid;gap:var(--s2)}
.sc-children .sc-card .hand{font-size:32px;line-height:1.1}
.sc-children .sc-card .hand em{font-style:normal;color:var(--rose)}
.sc-children .sc-card p{color:var(--ink-2)}
.sc-children ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.sc-children li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;color:var(--ink-2)}
.sc-children li b{color:var(--ink);font-weight:600}
.sc-children li svg{width:28px;height:28px;fill:none;stroke:var(--mint);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.sc-who{border-radius:24px;overflow:hidden;background:var(--paper-2)}
.sc-who .sc-r{display:grid;grid-template-columns:1.4fr repeat(3,1fr);align-items:center}
.sc-who .sc-r+.sc-r{border-top:2px solid var(--paper)}
.sc-who .sc-r>div{padding:14px var(--s3);font-size:15px}
.sc-who .sc-r.sc-h>div{font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);background:var(--paper-3);padding:var(--s2) var(--s3)}
.sc-who .sc-r>div:first-child{font-weight:600}
.sc-who .sc-y{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.sc-who .sc-y i{width:10px;height:10px;border-radius:50%;background:var(--mint)}
.sc-who .sc-n{color:var(--ink-3)}
.sc-who .sc-n i{display:inline-block;width:14px;height:3px;border-radius:2px;background:var(--paper-3);vertical-align:middle}
.sc-who .sc-l{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}
.sc-who .sc-l i{width:10px;height:10px;border-radius:50%;background:var(--marigold)}
.sc-never{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.sc-never div{background:var(--paper-2);border-radius:20px;padding:var(--s3);display:grid;gap:8px;align-content:start}
.sc-never .sc-x{font-family:var(--hand);font-weight:700;font-size:26px;color:var(--rose);line-height:1}
.sc-never b{font-weight:600}
.sc-never span{font-size:15px;color:var(--ink-2)}
.sc-posture{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.sc-col{border-radius:24px;padding:var(--s3);background:var(--paper-2);display:grid;gap:12px;align-content:start}
/* law v5: a wash tints a pill, a tick or a selected row — never a card, a tile, a panel or a section. Surfaces are paper-2. */
.sc-col h3{font:600 20px/1.2 var(--sans)}
.sc-posture ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.sc-posture li{display:grid;grid-template-columns:22px 1fr;gap:10px;align-items:start;font-size:15px;color:var(--ink-2)}
.sc-posture li i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
.sc-today li i{background:var(--mint)}
.sc-next li i{background:var(--paper-3)}
.sc-posture li svg{width:12px;height:12px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.sc-honest{font-size:14px;color:var(--ink-3)}
.sc-subs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2)}
.sc-subs div{background:var(--paper-2);border-radius:20px;padding:var(--s3);display:grid;gap:6px;align-content:start}
.sc-subs b{font-weight:600}
.sc-subs span{font-size:14px;color:var(--ink-2)}
.sc-subs .sc-reg{font:500 13px/1 var(--sans);color:var(--ink-3);letter-spacing:.06em}
.sc-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2)}
.sc-panel{border-radius:28px;padding:var(--s4);background:var(--paper-2);display:grid;gap:var(--s2);align-content:start}
/* law v5: a wash tints a pill, a tick or a selected row — never a card, a tile, a panel or a section. Surfaces are paper-2. */
.sc-panel h3{font:600 24px/1.15 var(--sans)}
.sc-panel p{color:var(--ink-2)}
.sc-panel .sc-mail{font:600 18px/1 var(--sans);color:var(--ink);display:inline-flex;align-items:center;min-height:44px}
.sc-docs{display:grid;gap:8px}
.sc-docs a{display:flex;justify-content:space-between;align-items:center;background:var(--paper);border-radius:14px;padding:14px 16px;font-weight:500}
.sc-docs a span{color:var(--ink-3);font-size:13px;font-weight:400}
.sc-req{background:var(--ink);color:var(--paper);border-radius:28px;padding:var(--s4);display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s4);align-items:center}
.sc-req h3{font:600 28px/1.15 var(--sans)}
.sc-req p{color:color-mix(in srgb,var(--paper) 72%,transparent)}
.sc-req form{display:grid;gap:10px}
.sc-req input{font:400 16px/1.4 var(--sans);padding:14px 16px;border-radius:12px;border:0;background:color-mix(in srgb,var(--paper) 10%,transparent);color:var(--paper)}
.sc-req input::placeholder{color:color-mix(in srgb,var(--paper) 50%,transparent)}
.sc-req .st-btn{background:var(--marigold);color:#14142B;justify-self:start}
.sc-req small{color:color-mix(in srgb,var(--paper) 50%,transparent);font-size:13px}
@media (max-width:900px){
  .sc-hero .st-wrap{grid-template-columns:1fr}.sc-shield{order:-1}.sc-shield svg{width:min(70%,300px)}
  .sc-short{grid-template-columns:1fr}
  .sc-tbl .sc-r{grid-template-columns:1fr;gap:6px}.sc-tbl .sc-r.sc-h{display:none}
  .sc-children{grid-template-columns:1fr}
  .sc-who{overflow-x:auto}.sc-who .sc-r{min-width:720px}
  .sc-never{grid-template-columns:1fr 1fr}
  .sc-posture{grid-template-columns:1fr}
  .sc-subs{grid-template-columns:1fr 1fr}
  .sc-two{grid-template-columns:1fr}
  .sc-req{grid-template-columns:1fr}
}
@media (max-width:600px){.sc-never{grid-template-columns:1fr}.sc-subs{grid-template-columns:1fr}}

/* --- /meet-wobo ----------------------------------------------------------------------------- */
.mt-hero{padding:var(--s4) 0 var(--s5)}
.mt-hero .st-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:var(--s4);align-items:center;min-height:70vh}
.mt-big{display:grid;place-items:center;position:relative}
.mt-big .wk-head{filter:drop-shadow(0 30px 40px rgba(20,20,43,.18))}
.mt-bubble{position:absolute;right:-8px;top:8%;background:var(--paper-2);border-radius:20px 20px 20px 4px;padding:14px 18px;font-family:var(--hand);font-weight:700;font-size:28px;line-height:1.1;color:var(--ink);box-shadow:0 12px 26px rgba(20,20,43,.10);max-width:280px}
.mt-bubble .mt-cur{display:inline-block;width:3px;height:1em;background:var(--pig);vertical-align:-2px;margin-left:2px;animation:pt-cur 1s steps(2) infinite}
.mt-hero h1{font:700 clamp(38px,5vw,62px)/1.02 var(--sans);letter-spacing:-.035em;margin-top:var(--s2)}
.mt-hero h1 em{font-style:normal;color:var(--pig)}
.mt-hero p.pt-sub{font-size:19px;color:var(--ink-2);max-width:46ch;margin-top:var(--s3)}
.mt-list{margin:var(--s3) 0 0;padding:0;list-style:none;display:grid;gap:12px}
.mt-list li{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;font-size:16px;color:var(--ink-2)}
.mt-list li b{color:var(--ink);font-weight:600}
.mt-list li i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--paper-2);font-style:normal}
.mt-list li i svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mt-wave rect{fill:var(--pig);transform-origin:center;animation:mt-wave 1.1s ease-in-out infinite}
.mt-wave rect:nth-child(2){animation-delay:.12s}.mt-wave rect:nth-child(3){animation-delay:.24s}.mt-wave rect:nth-child(4){animation-delay:.36s}.mt-wave rect:nth-child(5){animation-delay:.48s}.mt-wave rect:nth-child(6){animation-delay:.6s}
@keyframes mt-wave{50%{transform:scaleY(.35)}}
.mt-never{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s4)}
.mt-never div{background:var(--paper-2);border-radius:22px;padding:var(--s3);display:grid;gap:8px;align-content:start}
.mt-never .mt-x{font-family:var(--hand);font-weight:700;font-size:28px;color:var(--rose);line-height:1}
.mt-never b{font-weight:600;font-size:18px}
.mt-never span{font-size:15px;color:var(--ink-2)}
.mt-demo{background:var(--ink);color:var(--paper);border-radius:32px;padding:var(--s5) var(--s4);display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:center;position:relative;overflow:hidden}
.mt-demo h2{font:700 clamp(28px,3.4vw,42px)/1.06 var(--sans)}
.mt-demo p{color:color-mix(in srgb,var(--paper) 70%,transparent);margin-top:var(--s2);max-width:42ch}
.mt-demo .wk-label{color:var(--marigold)}
.mt-hold{margin-top:var(--s3);display:inline-flex;align-items:center;gap:14px;background:color-mix(in srgb,var(--paper) 10%,transparent);padding:12px 18px 12px 12px;border-radius:16px;cursor:pointer;user-select:none;border:0;color:var(--paper);font:500 16px/1 var(--sans);touch-action:none}
.mt-hold .mt-k{font:600 13px/1 var(--sans);padding:10px 12px;border-radius:10px;background:var(--marigold);color:#14142B}
.mt-hold.mt-live{background:color-mix(in srgb,var(--marigold) 18%,transparent)}
.mt-stage{display:grid;place-items:center;position:relative;min-height:320px;--body:var(--paper);--visor:var(--ink);--eye:var(--pig)}
.mt-stage .wk-head{filter:drop-shadow(0 20px 30px rgba(0,0,0,.35));transition:transform .3s;position:relative}
.mt-stage.mt-live .wk-head{transform:scale(1.06)}
.mt-say{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font-family:var(--hand);font-weight:700;font-size:30px;color:var(--marigold);white-space:nowrap;opacity:0;transition:opacity .3s}
.mt-say.mt-show{opacity:1}
/* Law v5 gives pig one job — the pointer, one per view — so this backdrop is a GLOW rather
   than a 260px solid disc of the pointer pigment: the same warmth behind Wobo's head, with
   the colour falling off to nothing at the edge instead of reading as a second button. */
.mt-ring{position:absolute;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--pig) 42%,transparent) 0%,color-mix(in srgb,var(--pig) 16%,transparent) 55%,transparent 72%);opacity:0;transition:opacity .3s}
.mt-stage.mt-live .mt-ring{opacity:.28;animation:mt-pulse 1.2s ease-in-out infinite}
@keyframes mt-pulse{50%{transform:scale(1.12)}}
/* The three parts behind the voice — a tile that is a door, so it lifts and says where it goes. */
a.st-tile{color:var(--ink);transition:transform .18s ease,box-shadow .18s ease}
a.st-tile:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(20,20,43,.10)}
.mt-more{font:500 14px/1 var(--sans);color:var(--pig);display:inline-flex;align-items:center;gap:6px;margin-top:4px}
.mt-more::after{content:"→"}
@media (max-width:900px){
  .mt-hero .st-wrap{grid-template-columns:1fr;min-height:0}.mt-big{order:-1}.mt-bubble{right:0;top:-6px;font-size:22px;max-width:220px}
  .mt-never{grid-template-columns:1fr}
  .mt-demo{grid-template-columns:1fr}.mt-stage{min-height:260px}
}

/* --- /for-parents --------------------------------------------------------------------------- */
.pa-hero{padding:var(--s4) 0 var(--s5)}
.pa-hero .st-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s4);align-items:center;min-height:68vh}
.pa-hero h1{font:700 clamp(38px,5vw,62px)/1.02 var(--sans);letter-spacing:-.035em;margin-top:var(--s2)}
.pa-hero h1 em{font-style:normal;color:var(--pig)}
.pa-hero p.pt-sub{font-size:19px;color:var(--ink-2);max-width:46ch;margin-top:var(--s3)}
.pa-env{position:relative;display:grid;place-items:center;min-height:420px}
.pa-env>svg{width:min(100%,480px);overflow:visible;filter:drop-shadow(0 26px 40px rgba(20,20,43,.16))}
.pa-env .pa-letter{transform:translateY(150px);animation:pa-rise 1.5s cubic-bezier(.6,0,.2,1) .4s forwards}
@keyframes pa-rise{to{transform:translateY(0)}}
.pa-env .pa-flap{transform-origin:50% 0;animation:pa-flap 1s cubic-bezier(.6,0,.2,1) forwards}
@keyframes pa-flap{to{transform:scaleY(-1)}}
.pa-caps{display:grid;gap:10px;margin-top:var(--s3)}
.pa-caps div{font-family:var(--hand);font-weight:600;font-size:26px;line-height:1.15;color:var(--ink)}
.pa-caps div em{font-style:normal;color:var(--rose)}
.pa-caps div.pa-t{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.pa-mock{background:var(--paper);border-radius:22px;padding:18px;display:grid;gap:12px;width:100%;box-shadow:0 18px 40px rgba(20,20,43,.10)}
.pa-mock .pa-top{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-3)}
.pa-mock .pa-top b{color:var(--ink);font-weight:600;font-size:15px}
.pa-mock .pa-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;background:var(--paper-2);border-radius:14px;padding:12px 14px;font-size:14px}
.pa-mock .pa-row b{display:block;font-weight:600;color:var(--ink)}
.pa-mock .pa-row span{color:var(--ink-3);font-size:13px}
.pa-mock .pa-row .pa-ok{font:500 12px/1 var(--sans);padding:6px 10px;border-radius:999px;background:var(--mint-w);color:var(--ink)}
.pa-mock .pa-row .pa-now{background:var(--pig);color:#fff}
.pa-mock .pa-row .pa-next{background:var(--paper-3)}
.pa-mock .pa-note{background:var(--marigold-w);border-radius:14px;padding:14px;font-family:var(--hand);font-weight:600;font-size:22px;line-height:1.15}
.pa-mock .pa-note em{font-style:normal;color:var(--rose)}
.pa-mock .pa-lock{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3)}
.pa-mock .pa-lock svg{width:16px;height:16px;fill:none;stroke:var(--ink-3);stroke-width:2.5;stroke-linecap:round}
.pa-head{display:grid;gap:var(--s2);max-width:64ch}
.pa-head h2{font:700 clamp(28px,3.4vw,42px)/1.08 var(--sans)}
.pa-head p{color:var(--ink-2);font-size:18px}
.pa-grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s4)}
.pa-more{margin-top:var(--s3)}
.pa-cost{background:var(--paper-2);border-radius:28px;padding:var(--s4);display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s4);align-items:center}
.pa-cost h2{font:700 clamp(28px,3.4vw,40px)/1.08 var(--sans)}
.pa-cost p{color:var(--ink-2);margin-top:var(--s2)}
.pa-cost .pt-row{display:flex;gap:var(--s2);margin-top:var(--s3);flex-wrap:wrap}
.pa-cost .st-btn.st-quiet{background:var(--paper)}
.pa-allow{background:var(--paper);border-radius:22px;padding:22px;display:grid;gap:10px;box-shadow:0 18px 40px rgba(20,20,43,.10);max-width:360px;justify-self:center;width:100%}
.pa-allow b{font-weight:600}
.pa-allow .pa-bar{height:12px;border-radius:6px;background:var(--paper-3);overflow:hidden}
.pa-allow .pa-bar i{display:block;height:100%;width:62%;background:var(--marigold);border-radius:6px}
.pa-allow span{font-size:13px;color:var(--ink-3)}
.pa-allow .hand{font-size:22px;color:var(--pig)}
.pa-faq{display:grid;gap:10px;margin-top:var(--s4)}
.pa-faq details{background:var(--paper-2);border-radius:18px;padding:0 var(--s3)}
.pa-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--s2);padding:18px 0;font-weight:500;font-size:17px}
.pa-faq summary::-webkit-details-marker{display:none}
/* Chapter 03: the ground under a chapter, and a tick that has to hold. A ring is an inset shadow,
   never a border (DESIGN.md §2 — there are no border lines), and mint/rose are doing their jobs:
   mint confirms, rose is the piece that needs care. */
.pa-ground,.pa-earned{width:100%;display:grid;gap:12px}
.pa-ground>.pa-top-row{background:var(--paper);border-radius:16px;padding:14px 18px;display:grid;gap:3px;min-width:0}
.pa-ground>.pa-top-row>b{font:600 17px/1.25 var(--sans)}
.pa-ground>.pa-top-row>span{font:400 13px/1.4 var(--sans);color:var(--ink-2)}
.pa-ground>svg{width:100%;height:auto;display:block;overflow:visible}
.pa-stones{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pa-stones>div{background:var(--paper);border-radius:16px;padding:12px 14px;display:grid;gap:4px;text-align:center;min-width:0;box-shadow:inset 0 0 0 3px var(--mint)}
.pa-stones>div>b{font:600 15px/1.2 var(--sans)}
.pa-stones>div>em{font-style:normal;font:400 13px/1.4 var(--sans);color:var(--ink-2)}
.pa-stones>div.pa-thin{box-shadow:inset 0 0 0 3px var(--rose)}
.pa-earned>div:not(.hand){background:var(--paper);border-radius:16px;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;min-width:0}
.pa-earned>div>b{font:600 16px/1.3 var(--sans)}
.pa-earned>div>b>span{display:block;font:400 13px/1.45 var(--sans);color:var(--ink-2);margin-top:3px}
.pa-earned>div>em{font-style:normal;font:500 13px/1.2 var(--sans);color:var(--ink-2);display:flex;align-items:center;gap:8px;min-width:0}
.pa-earned>div>em::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--mint);flex:0 0 auto}
.pa-earned>div.pa-fell>em::before{background:var(--rose)}
.pa-ground .hand,.pa-earned .hand{font-size:22px;line-height:1.2;color:var(--ink);padding:2px 4px}
.pa-faq summary::after{content:"+";font:600 24px/1 var(--sans);color:var(--pig);transition:transform .3s}
.pa-faq details[open] summary::after{transform:rotate(45deg)}
.pa-faq details p{color:var(--ink-2);padding:0 0 18px;max-width:64ch}
/* Chapter 01: the weekly report, drawn as the app draws it (screens/progress/Report.tsx and its
   evidence.ts) — the three figures it computes, its own minutes-a-day chart, its three lists and
   its projection line. Every card here is paper on paper-2, never a wash: a wash tints a pill, a
   tick or a selected row and this is a panel. Pig does its one job, the pointer, on the bars; a day
   with nothing on it is paper-3 rather than a missing bar, because an absent bar reads as a bug. */
.pa-report{width:100%;display:grid;gap:12px;min-width:0}
.pa-report>.pa-rtop{display:flex;align-items:center;gap:10px;font:400 13px/1.4 var(--sans);color:var(--ink-3);min-width:0}
.pa-report>.pa-rtop>b{font:600 15px/1.2 var(--sans);color:var(--ink)}
.pa-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pa-kpis>div{background:var(--paper);border-radius:16px;padding:14px;display:grid;gap:2px;min-width:0}
.pa-kpis>div>b{font:700 30px/1 var(--sans);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pa-kpis>div>b>i{font-style:normal;font:600 14px/1 var(--sans);color:var(--ink-3);margin-left:4px}
.pa-kpis>div>span{font:500 13px/1.3 var(--sans);color:var(--ink)}
.pa-kpis>div>em{font-style:normal;font:400 12px/1.35 var(--sans);color:var(--ink-3)}
.pa-chart{background:var(--paper);border-radius:16px;padding:14px;display:grid;gap:10px;min-width:0}
.pa-chart>.pa-ctop{display:flex;align-items:baseline;gap:10px;font:600 14px/1.2 var(--sans)}
.pa-chart>.pa-ctop>span{margin-left:auto;font:400 13px/1.2 var(--sans);color:var(--ink-3)}
.pa-bars{display:flex;align-items:flex-end;gap:6px;height:86px}
.pa-bars>i{flex:1;min-width:0;background:var(--pig);border-radius:6px}
.pa-bars>i.pa-off{background:var(--paper-3)}
.pa-lists{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.pa-lists>div{background:var(--paper);border-radius:16px;padding:14px;display:grid;gap:6px;align-content:start;min-width:0}
.pa-lists>div>span{font:500 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.pa-lists>div>b{font:500 14px/1.35 var(--sans);color:var(--ink)}
.pa-lists>div.pa-pass>b{color:var(--rose)}
.pa-proj{background:var(--paper);border-radius:16px;padding:14px;font:400 14px/1.45 var(--sans);color:var(--ink-2)}
.pa-proj>em{display:block;font-style:normal;font-family:var(--hand);font-weight:600;font-size:21px;line-height:1.2;color:var(--ink);margin-top:4px}
.pa-eg{font:400 12px/1.45 var(--sans);color:var(--ink-3);padding:0 4px}
/* Chapter 02: the six things a great teacher does. Six of the shell's own tiles, two rows of three,
   with the mark drawn in pig because on this page the pointer is the thing Wobo does. */
.pa-six{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s4)}
.pa-six>.st-tile>svg{width:34px;height:34px;stroke:var(--pig);stroke-width:2.5}
@media (max-width:900px){
  .pa-hero .st-wrap{grid-template-columns:1fr;min-height:0}.pa-env{order:-1;min-height:0}.pa-env>svg{width:min(80%,340px)}
  .pa-grid3,.pa-six{grid-template-columns:1fr}
  .pa-cost{grid-template-columns:1fr}
}
/* On a phone a fixed side column squeezes a title into five lines. Every row the two turns and
   chapter 03 draw stacks instead: the axis label and the state drop under the words they label,
   and the three stones stop standing side by side long before the phone does. */
@media (max-width:560px){
  .pa-stones{grid-template-columns:1fr}.pa-ground>svg{display:none}
  .pa-kpis,.pa-lists{grid-template-columns:1fr}
  .pa-earned>div:not(.hand),.hw-back>div:not(.hand){grid-template-columns:1fr;gap:8px}
  .hw-ladder>div:not(.hand){grid-template-columns:14px 1fr;gap:8px 14px}
  .hw-ladder>div:not(.hand)>span{grid-column:2;text-align:left}
}

/* --- /for-students -------------------------------------------------------------------------- */
.su-hero{padding:var(--s4) 0 var(--s5)}
.su-hero .st-wrap{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:center;min-height:68vh}
.su-hero h1{font:700 clamp(40px,5.4vw,66px)/1.0 var(--sans);letter-spacing:-.035em;margin-top:var(--s2)}
.su-hero h1 em{font-style:normal;color:var(--pig)}
.su-hero p.pt-sub{font-size:19px;color:var(--ink-2);max-width:44ch;margin-top:var(--s3)}
.su-film{position:relative;border-radius:28px;background:var(--ink);padding:14px;box-shadow:0 30px 60px rgba(20,20,43,.22);transform:rotate(-2deg)}
.su-frame{border-radius:18px;background:var(--paper);position:relative;overflow:hidden;aspect-ratio:16/10}
.su-frame svg{position:absolute;inset:0;width:100%;height:100%}
.su-bar{display:flex;align-items:center;gap:10px;padding:12px 6px 2px;color:color-mix(in srgb,var(--paper) 70%,transparent);font-size:13px}
.su-bar .su-p{width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--paper) 12%,transparent);display:grid;place-items:center}
.su-bar .su-p i{display:block;width:4px;height:12px;background:var(--paper);box-shadow:6px 0 0 var(--paper);margin-right:6px}
.su-bar .su-track{flex:1;height:4px;border-radius:2px;background:color-mix(in srgb,var(--paper) 18%,transparent);position:relative}
.su-bar .su-track::after{content:"";position:absolute;left:0;top:0;height:100%;width:38%;background:var(--marigold);border-radius:2px}
.su-lasso{stroke-dasharray:700;stroke-dashoffset:700;animation:su-lasso 1.6s cubic-bezier(.6,0,.2,1) .9s forwards}
@keyframes su-lasso{to{stroke-dashoffset:0}}
.su-q{position:absolute;right:-18px;bottom:36px;background:var(--marigold);color:#14142B;font-family:var(--hand);font-weight:700;font-size:26px;padding:8px 16px;border-radius:14px 14px 4px 14px;transform:rotate(3deg);box-shadow:0 12px 24px rgba(20,20,43,.16);opacity:0;animation:pt-fade .5s ease 2.4s forwards}
.su-puzzle{display:grid;gap:18px;justify-items:center;width:100%}
.su-grid4{display:grid;grid-template-columns:repeat(2,96px);grid-template-rows:repeat(2,96px);gap:6px;padding:6px;border-radius:20px;background:var(--ink);position:relative}
.su-grid4 button{border:0;border-radius:14px;background:var(--paper);padding:0;cursor:pointer;transition:transform .15s}
.su-grid4 button:active{transform:scale(.96)}
.su-grid4 button.su-lit{background:var(--pig)}
.su-grid4 svg{position:absolute;inset:-40px;width:calc(100% + 80px);height:calc(100% + 80px);pointer-events:none;overflow:visible}
.su-grid4 svg path{fill:none;stroke:var(--pig);stroke-width:4;stroke-linecap:round;stroke-dasharray:700;stroke-dashoffset:700;transition:stroke-dashoffset 1.2s cubic-bezier(.6,0,.2,1)}
.su-grid4 svg.su-show path{stroke-dashoffset:0}
.su-grid4 svg text{font-family:var(--hand);font-weight:700;font-size:26px;fill:var(--pig);opacity:0;transition:opacity .4s .8s}
.su-grid4 svg.su-show text{opacity:1}
.su-puzzle .pt-row{display:flex;gap:10px}
.su-line{font-family:var(--hand);font-weight:700;font-size:28px;color:var(--pig);min-height:1.2em;text-align:center}
.su-line.su-win{color:var(--mint)}
.su-pq{font:600 20px/1.3 var(--sans);text-align:center}
.su-pq i{font-style:normal;font-family:var(--hand);color:var(--pig);font-size:1.3em}
.su-angle{display:grid;gap:14px;justify-items:center;width:100%}
.su-angle svg{width:min(100%,360px);overflow:visible}
.su-angle input[type=range]{width:min(100%,320px);accent-color:var(--pig)}
.su-streak{display:grid;gap:14px;width:100%}
.su-days{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.su-days i{width:44px;height:44px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font:600 13px/1 var(--sans);color:var(--ink-3);font-style:normal}
.su-days i.su-lit{background:var(--marigold);color:var(--ink)}
.su-days i.su-rest{background:var(--paper);color:var(--ink-3);outline:3px dashed var(--paper-3);outline-offset:-3px}
.su-n{font:700 72px/1 var(--sans);text-align:center;letter-spacing:-.04em}
.su-n small{display:block;font:500 14px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}
.su-streak .hand{text-align:center;font-size:24px;color:var(--ink)}
/* Chapter 05: the climb, and the two switches under it. One drawing, so the labels ride their own
   nodes and cannot drift at another width (DESIGN.md §0, trap 6). Colour with a job: mint held,
   rose the one that needs care, pig where you are, and the chapter still ahead drawn open in ink
   rather than shut. */
.su-climb{width:100%;list-style:none;margin:0;padding:6px 0;position:relative}
.su-climb::before{content:"";position:absolute;left:12px;top:32px;bottom:32px;width:6px;border-radius:999px;background:var(--paper-3)}
.su-climb>li{display:grid;grid-template-columns:30px 1fr;gap:16px;align-items:center;padding:11px 0;min-width:0}
.su-climb>li>i{width:30px;height:30px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 3px var(--ink);position:relative;z-index:1;font-style:normal}
.su-climb>li.su-held>i{background:var(--mint)}
.su-climb>li.su-slip>i{background:var(--rose)}
.su-climb>li.su-here>i{background:var(--pig);box-shadow:inset 0 0 0 3px var(--ink),0 0 0 5px var(--paper-2),0 0 0 8px var(--pig)}
.su-climb>li>div{min-width:0}
.su-climb>li>div>b{display:block;font:600 16px/1.3 var(--sans);color:var(--ink)}
.su-climb>li>div>span{display:block;font:400 14px/1.4 var(--sans);color:var(--ink-2);margin-top:2px}
.su-climb>li.su-here>div>span{color:var(--pig)}
/* The two looks, drawn as the switch and one node wearing both costumes. The pair is one grid in
   DOM order, so nothing is placed backwards into an earlier column (DESIGN.md §0, trap 2). */
.su-vibe{width:100%;display:grid;gap:14px;justify-items:center}
.su-vpick{display:inline-flex;gap:4px;background:var(--paper-3);padding:4px;border-radius:999px}
.su-vpick>b{font:500 15px/1 var(--sans);color:var(--ink-2);padding:11px 22px;border-radius:999px}
.su-vpick>b.su-von{background:var(--ink);color:var(--paper)}
.su-vpair{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
.su-vpair>div{background:var(--paper);border-radius:16px;padding:18px 14px;display:grid;gap:8px;justify-items:center;text-align:center;min-width:0}
.su-vpair>div>svg{width:34px;height:34px;fill:none;stroke:var(--marigold);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.su-vpair>div>b{font:600 16px/1.2 var(--sans);color:var(--ink)}
.su-vpair>div>span{font:400 13px/1.35 var(--sans);color:var(--ink-2)}
.su-vibe .hand{font-size:21px;line-height:1.2;color:var(--ink-2);text-align:center;padding:2px 4px}
@media (max-width:900px){
  .su-hero .st-wrap{grid-template-columns:1fr;min-height:0}.su-film{order:-1;transform:none}
}

/* --- /how-it-works -------------------------------------------------------------------------- */
.hw-hero{padding:var(--s5) 0 var(--s4);text-align:center}
.hw-hero h1{font:700 clamp(38px,5.4vw,66px)/1.0 var(--sans);letter-spacing:-.035em;margin:var(--s2) auto 0;max-width:18ch}
.hw-hero h1 em{font-style:normal;color:var(--pig)}
.hw-hero p.pt-sub{font-size:19px;color:var(--ink-2);max-width:52ch;margin:var(--s3) auto 0}
.hw-hero .pt-row{justify-content:center}
.hw-strip{margin:var(--s5) auto 0;max-width:980px}
.hw-strip svg{width:100%;height:auto;overflow:visible}
.hw-strip .hw-box{fill:var(--paper-2)}
.hw-strip .hw-box.hw-pig{fill:var(--pig-w)}.hw-strip .hw-box.hw-mint{fill:var(--mint-w)}.hw-strip .hw-box.hw-marigold{fill:var(--marigold-w)}
.hw-strip .hw-t{font:600 18px var(--sans);fill:var(--ink)}
.hw-strip .hw-s{font:400 13px var(--sans);fill:var(--ink-2)}
.hw-strip .hw-arrow{stroke-dasharray:200;stroke-dashoffset:200;animation:hw-dash 1s cubic-bezier(.6,0,.2,1) forwards}
.hw-strip .hw-arrow.hw-a2{animation-delay:.6s}.hw-strip .hw-arrow.hw-a3{animation-delay:1.2s}
.hw-strip .hw-arrow.hw-long{stroke-dasharray:1000;stroke-dashoffset:1000}
@keyframes hw-dash{to{stroke-dashoffset:0}}
.hw-step{display:grid;grid-template-columns:72px 1fr 1fr;gap:var(--s4);align-items:center;padding:var(--s4) 0;position:relative}
.hw-step::before{content:"";position:absolute;left:26px;top:0;bottom:0;width:4px;background:var(--paper-3);border-radius:2px}
.hw-step:first-child::before{top:50%}.hw-step:last-child::before{bottom:50%}
.hw-n{width:56px;height:56px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;font:700 26px/1 var(--hand);position:relative;z-index:1;box-shadow:0 0 0 8px var(--paper)}
.hw-step .hw-when{font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.hw-step h2{font:700 clamp(28px,3.4vw,42px)/1.06 var(--sans);margin-top:8px}
.hw-step p{color:var(--ink-2);font-size:18px;margin-top:var(--s2);max-width:44ch}
.hw-step .pt-say{font-size:26px}
.hw-step .pt-art{min-height:340px}
.hw-step .pt-chat div{max-width:82%}
.hw-dragpt{width:100%;display:grid;gap:12px;justify-items:center}
.hw-dragpt svg{width:100%;max-width:440px;touch-action:none;overflow:visible}
.hw-dline{font-family:var(--hand);font-weight:700;font-size:28px;color:var(--pig);min-height:1.2em;text-align:center}
.hw-dline.hw-win{color:var(--mint)}
.hw-dq{font:600 19px/1.3 var(--sans);text-align:center}
.hw-dq i{font-style:normal;font-family:var(--hand);color:var(--pig);font-size:1.3em}
.hw-pt{cursor:grab}
.hw-pt:active{cursor:grabbing}
.hw-kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%}
.hw-kinds div{background:var(--paper);border-radius:16px;padding:14px;display:grid;gap:8px;justify-items:center;text-align:center;font:500 13px/1.2 var(--sans);color:var(--ink-2)}
.hw-kinds svg{width:56px;height:56px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hw-kinds svg .hw-p{stroke:var(--pig)}.hw-kinds svg .hw-f{fill:var(--pig);stroke:none}
.hw-week{width:100%;display:grid;gap:14px}
.hw-week .hand{font-size:26px;line-height:1.15}
.hw-week .hand em{font-style:normal;color:var(--rose)}
.hw-chart{display:flex;align-items:flex-end;gap:8px;height:110px}
.hw-chart i{flex:1;background:var(--pig);border-radius:8px 8px 4px 4px;opacity:.85}
.hw-chart i.hw-k{background:var(--paper-3);opacity:1}
.hw-days{display:flex;gap:8px}
.hw-days span{flex:1;text-align:center;font:500 12px/1 var(--sans);color:var(--ink-3)}
.hw-note{background:var(--paper);border-radius:18px;padding:22px 24px;width:100%;transform:rotate(-1.5deg);box-shadow:0 18px 40px rgba(20,20,43,.10)}
.hw-note .hw-d{font-family:var(--hand);font-weight:600;font-size:20px;color:var(--ink-3)}
.hw-note .hand{font-size:26px;line-height:1.15;margin-top:8px}
.hw-note .hand em{font-style:normal;color:var(--rose)}
.hw-sig{margin-top:12px;display:flex;align-items:center;gap:8px;font-family:var(--hand);font-weight:700;font-size:22px}

/* The two turns off the spine — what Wobo does when a step fails, and what "done" is allowed to
   mean. Rose is the token for the thing that needs care (DESIGN.md §0), so a turn's node is rose
   and its mark is drawn in ink on it: paper on rose does not carry, and a turn is not a step, so
   it takes a mark rather than the next number. */
.hw-step.hw-turn .hw-n{background:var(--rose);color:var(--ink)}
.hw-turn .hw-n svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.hw-turn h2{max-width:19ch}
.hw-ladder,.hw-back{width:100%;display:grid;gap:10px}
.hw-ladder>div:not(.hand){background:var(--paper);border-radius:16px;padding:13px 16px;display:grid;grid-template-columns:14px 1fr auto;gap:14px;align-items:center;min-width:0}
.hw-ladder>div>i{width:14px;height:14px;border-radius:50%;background:var(--pig);font-style:normal}
.hw-ladder>div>b{font:600 16px/1.3 var(--sans);color:var(--ink)}
.hw-ladder>div>span{font:500 12px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);text-align:right}
.hw-ladder>div.hw-tried>i{background:var(--rose)}
.hw-ladder>div.hw-tried>b{color:var(--ink-3);text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:var(--rose)}
.hw-back>div:not(.hand){background:var(--paper);border-radius:16px;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;min-width:0}
.hw-back>div>b{font:600 16px/1.3 var(--sans);color:var(--ink)}
.hw-back>div>b>span{display:block;font:400 13px/1.45 var(--sans);color:var(--ink-2);margin-top:3px}
.hw-back>div>em{font-style:normal;font:500 13px/1.2 var(--sans);color:var(--ink-2);display:flex;align-items:center;gap:8px;text-align:right}
.hw-back>div>em::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--mint);flex:0 0 auto}
.hw-back>div.hw-fell>em::before{background:var(--rose)}
.hw-ladder .hand,.hw-back .hand{font-size:21px;line-height:1.2;color:var(--ink-2);padding:2px 4px}
.hw-back .hand em{font-style:normal;color:var(--rose)}
/* THE TWO MODES, before the loop starts (docs/SELL.md §2, owner 2026-09-04). A doubt and a
   subject are not the same errand and the page must say both, distinctly: one is answered the
   moment it turns up, the other is built a bit at a time so the week before an exam is revision.
   Two cards on paper-2 with nothing drawn between them, because tone and space separate surfaces
   here and a line is not allowed to (DESIGN.md §0). The doubt wears the pointer, pig; the slow
   one wears marigold, which is this palette's colour for the thing that is earned. Every selector
   is a CHILD selector: a bare .hw-modes p would reach into anything nested later (trap 3). */
.hw-modes{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s4)}
.hw-modes>div{background:var(--paper-2);border-radius:24px;padding:var(--s4);min-width:0}
.hw-modes>div>.hw-m{font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:10px}
.hw-modes>div>.hw-m::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--pig);flex:0 0 auto}
.hw-modes>div.hw-slow>.hw-m::before{background:var(--marigold)}
.hw-modes>div>h3{font:700 clamp(24px,2.6vw,32px)/1.08 var(--sans);letter-spacing:-.02em;margin-top:14px}
.hw-modes>div>p{color:var(--ink-2);font-size:17px;line-height:1.55;margin-top:var(--s2);max-width:44ch}
.hw-modes>div>ul{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:10px}
.hw-modes>div>ul>li{font:500 15px/1.45 var(--sans);color:var(--ink);display:grid;grid-template-columns:9px 1fr;gap:12px;align-items:start;min-width:0}
.hw-modes>div>ul>li::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink-3);margin-top:7px}
.hw-modes>div>.hand{display:block;font-size:22px;line-height:1.2;color:var(--ink-2);margin-top:var(--s3)}
@media (max-width:900px){
  .hw-step{grid-template-columns:1fr;gap:var(--s3)}.hw-step::before{display:none}.hw-step .pt-art{min-height:0}
  .hw-modes{grid-template-columns:1fr}
}

/* --- /subjects ------------------------------------------------------------------------------ */
.sb-hero{padding:var(--s5) 0 var(--s4);text-align:center}
.sb-hero h1{font:700 clamp(38px,5.4vw,66px)/1.0 var(--sans);letter-spacing:-.035em;margin:var(--s2) auto 0;max-width:16ch}
.sb-hero h1 em{font-style:normal;color:var(--pig)}
.sb-hero p.pt-sub{font-size:19px;color:var(--ink-2);max-width:52ch;margin:var(--s3) auto 0}
.sb-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-top:var(--s5)}
.sb-tiles a{border-radius:24px;padding:var(--s3);background:var(--paper-2);display:grid;gap:12px;justify-items:start;text-align:left;transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s;position:relative}
.sb-tiles a:hover{transform:translateY(-6px) rotate(-1deg);box-shadow:0 22px 44px rgba(20,20,43,.14)}
/* law v5: a wash tints a pill, a tick or a selected row — never a card, a tile, a panel or a section. Surfaces are paper-2. */
.sb-tiles svg{width:100%;height:auto;aspect-ratio:4/3;overflow:visible}
.sb-tiles b{font:600 20px/1.2 var(--sans)}
.sb-tiles span{font-size:14px;color:var(--ink-2)}
.sb-tiles .sb-go{margin-top:4px;font:500 14px/1 var(--sans);color:var(--pig)}
.sb-boards{background:var(--paper-2);border-radius:28px;padding:var(--s4);display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);align-items:center;margin-top:var(--s5)}
.sb-boards h2{font:700 clamp(26px,3vw,36px)/1.08 var(--sans);margin-top:8px}
.sb-boards p{color:var(--ink-2);margin-top:var(--s2)}
.sb-type{background:var(--paper);border-radius:18px;padding:10px;display:grid;gap:8px;box-shadow:0 18px 40px rgba(20,20,43,.10)}
.sb-type .sb-in{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:var(--paper-2);font-size:16px}
.sb-type .sb-opt{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:12px;font-size:15px}
.sb-type .sb-opt.sb-lit{background:var(--pig-w)}
.sb-type .sb-opt span{font-size:12px;color:var(--ink-3)}
.sb-type .sb-opt b{font-weight:500}
.sb-type .sb-opt b mark{background:transparent;color:var(--pig);font-weight:700}
.sb-type .sb-own{padding:10px 14px;font-size:14px;color:var(--ink-2);border-top:2px solid var(--paper-2)}
.sb-type .sb-own b{color:var(--pig)}

/* THE BOARD FINDER (BoardFinder.tsx). The prototype drew a typeahead as a still; the page ships a
   working one, and it wears the still's own skin — every rule above still applies, and everything
   below is only what a real control needs and a drawing did not: a focus ring, a hit area a thumb
   can land on, a status pill per row, and the panel that answers the row a reader picked. */
.sb-hero .sb-boards{text-align:left}
.sb-find{align-content:start;min-height:340px}
.sb-find .sb-in{padding:6px 6px 6px 14px;gap:12px;transition:box-shadow .18s ease}
.sb-find .sb-in:focus-within{box-shadow:inset 0 0 0 3px var(--pig)}
.sb-find .sb-mag{width:19px;height:19px;flex:0 0 auto;fill:none;stroke:var(--ink-3);stroke-width:2.5;stroke-linecap:round}
.sb-find input{flex:1 1 auto;min-width:0;min-height:44px;border:0;background:transparent;font:500 16px/1.4 var(--sans);color:var(--ink);padding:0}
.sb-find input:focus{outline:0}
.sb-find input::placeholder{color:var(--ink-3)}
.sb-clear{min-height:44px;padding:0 14px;border:0;border-radius:10px;background:transparent;font:500 14px/1 var(--sans);color:var(--pig);cursor:pointer}
.sb-clear:hover{background:var(--paper-3)}
.sb-rows{display:grid;gap:2px}
.sb-find .sb-opt{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;width:100%;border:0;background:transparent;text-align:left;cursor:pointer;font:500 15px/1.3 var(--sans);color:var(--ink);transition:background .15s ease}
.sb-find .sb-opt:hover{background:var(--paper-2)}
.sb-find .sb-opt>b{grid-column:1;grid-row:1;min-width:0;font:600 15px/1.3 var(--sans);color:var(--ink)}
.sb-find .sb-opt>span{grid-column:1;grid-row:2;font-size:13px;color:var(--ink-3);margin-top:3px}
.sb-find .sb-opt>em{grid-column:2;grid-row:1/3;justify-self:end}
.sb-pill{font:500 11px/1.2 var(--sans);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);background:var(--paper-2);padding:8px 11px;border-radius:999px;display:inline-flex;align-items:center;gap:7px}
.sb-find .sb-opt.sb-lit>em{background:var(--paper)}
.sb-pill.sb-on{color:var(--ink)}
.sb-pill.sb-on::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mint);flex:0 0 auto}
.sb-answer{display:grid;gap:14px;padding:14px}
.sb-answer .sb-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.sb-answer .sb-head>b{min-width:0;font:600 18px/1.25 var(--sans);color:var(--ink)}
.sb-answer>p,.sb-none>p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.sb-subs{display:grid;gap:10px}
.sb-subs>.sb-lk{font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sb-subs>div{display:flex;flex-wrap:wrap;gap:8px}
.sb-subs>div>b{font:500 13px/1 var(--sans);color:var(--ink);background:var(--paper-2);padding:10px 13px;border-radius:999px}
.sb-do{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.sb-back{min-height:44px;padding:0;border:0;background:transparent;font:500 14px/1 var(--sans);color:var(--pig);cursor:pointer;text-align:left}
.sb-none{display:grid;gap:14px;padding:14px}
.sb-reach{margin-top:var(--s2);font-size:14px;line-height:1.6;color:var(--ink-3)}
.sb-k{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sb-k i{width:10px;height:10px;border-radius:50%;background:var(--pig)}
.sb-k i.sb-mint{background:var(--mint)}.sb-k i.sb-marigold{background:var(--marigold)}.sb-k i.sb-lilac{background:var(--lilac)}
.sb-chapter h2{margin-top:10px}
.sb-span{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:var(--s3)}
.sb-span div{background:var(--paper-2);border-radius:16px;padding:14px 16px;font-size:14px;color:var(--ink-2)}
.sb-span b{display:block;color:var(--ink);font-weight:600;font-size:15px;margin-bottom:4px}
.sb-chapter .pt-say{font-size:26px}
.sb-chapter .pt-art{min-height:360px}
/* One board's list, as a strip of its own names. A chip is paper-2 on white — never a wash, which
   law v5 keeps for a pill that carries a state, and these carry none. */
.sb-list{display:grid;gap:var(--s2);margin-bottom:var(--s4)}
.sb-list>.sb-lk{font:500 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.sb-list>div{display:flex;flex-wrap:wrap;gap:10px}
.sb-list>div>b{font:500 15px/1 var(--sans);color:var(--ink);background:var(--paper-2);padding:11px 16px;border-radius:999px}
.sb-pages>div>a{font:500 15px/1 var(--sans);color:var(--ink);background:var(--paper-2);padding:11px 16px;border-radius:999px}
.sb-pages>div>a:hover{background:color-mix(in srgb,var(--pig) 10%,var(--paper-2));color:var(--pig)}
@media (max-width:900px){
  .sb-tiles{grid-template-columns:1fr 1fr}
  .sb-boards{grid-template-columns:1fr}
  .sb-find{min-height:0}
  .sb-span{grid-template-columns:1fr}
}
@media (max-width:560px){.sb-tiles{grid-template-columns:1fr}}

/* --- less motion: the drawn thing is simply there --------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html:has(.pt){scroll-behavior:auto}
  .pt-blink,.mt-wave rect,.mt-ring,.mt-bubble .mt-cur{animation:none}
  .pt-draw,.sc-flow .sc-fdraw{stroke-dashoffset:0}
  .pt-chapter h2 .pt-hl::before{transform:scaleX(1)}
  .sc-shield .sc-draw{animation:none;stroke-dashoffset:0}
  .sc-shield .sc-fill,.sc-shield .sc-eyes,.sc-shield .sc-hw{animation:none;opacity:1}
  .pa-env .pa-letter,.pa-env .pa-flap{animation:none;transform:none}.pa-env .pa-flap{transform:scaleY(-1)}
  .su-lasso{animation:none;stroke-dashoffset:0}.su-q{animation:none;opacity:1}
  .hw-strip .hw-arrow{animation:none;stroke-dashoffset:0}
  .sb-tiles a:hover{transform:none}
  .su-grid4 svg path,.su-grid4 svg text,.mt-stage .wk-head,.mt-say,.mt-ring,.st-reveal,.sb-find .sb-in,.sb-find .sb-opt{transition:none}
}
[data-motion="reduce"] .pt-blink,[data-motion="reduce"] .mt-wave rect,[data-motion="reduce"] .mt-ring,[data-motion="reduce"] .mt-bubble .mt-cur{animation:none}
[data-motion="reduce"] .pt-draw,[data-motion="reduce"] .sc-flow .sc-fdraw{stroke-dashoffset:0}
[data-motion="reduce"] .pt-chapter h2 .pt-hl::before{transform:scaleX(1)}
[data-motion="reduce"] .sc-shield .sc-draw{animation:none;stroke-dashoffset:0}
[data-motion="reduce"] .sc-shield .sc-fill,[data-motion="reduce"] .sc-shield .sc-eyes,[data-motion="reduce"] .sc-shield .sc-hw{animation:none;opacity:1}
[data-motion="reduce"] .pa-env .pa-letter{animation:none;transform:none}[data-motion="reduce"] .pa-env .pa-flap{animation:none;transform:scaleY(-1)}
[data-motion="reduce"] .su-lasso{animation:none;stroke-dashoffset:0}[data-motion="reduce"] .su-q{animation:none;opacity:1}
[data-motion="reduce"] .hw-strip .hw-arrow{animation:none;stroke-dashoffset:0}
[data-motion="reduce"] .sb-find .sb-in,[data-motion="reduce"] .sb-find .sb-opt{transition:none}