/* site.css — the static public site (landing, help, legal, 404, offline).
   Every value is a token from /tokens.css (a generated copy of src/styles/tokens.css).
   The classes mirror the app's primitives (Wordmark, Block, Button, Card, Media, Text) so the
   public pages and the SPA read as one product. Design source: design-kit/Landing.dc.html. */
@import url('/tokens.css');

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--ms-font); color: var(--ms-ink); background: var(--ms-bg-kid); -webkit-font-smoothing: antialiased; text-wrap: pretty; }
a { color: var(--ms-ink); text-underline-offset: var(--ms-line); }
a:hover { color: var(--ms-link-hover); }
:focus-visible { outline: var(--ms-line) solid var(--ms-ink); outline-offset: var(--ms-line); }
button { font: inherit; color: inherit; }
p { margin: 0; }
.ms-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ms-skip { position: absolute; left: var(--ms-gutter); top: calc(var(--ms-space-10) * -1); background: var(--ms-surface); border: var(--ms-line) solid var(--ms-ink); padding: var(--ms-space-2) var(--ms-space-4); font-weight: 900; }
.ms-skip:focus { top: var(--ms-space-2); z-index: 1; }

/* ---------- Text ---------- */
.ms-text--meta { font-family: var(--ms-font-mono); font-size: var(--ms-text-meta); font-weight: 500; text-transform: uppercase; }
.ms-text--micro { font-family: var(--ms-font-mono); font-size: var(--ms-text-micro); font-weight: 500; }
.ms-text--body { font-size: var(--ms-text-m); font-weight: 600; line-height: 1.45; }
.ms-text--small { font-size: var(--ms-text-s); font-weight: 600; line-height: 1.4; }
.ms-kicker { font-family: var(--ms-font-mono); font-size: var(--ms-text-xs); font-weight: 500; }
.ms-h2 { margin: 0; font-size: var(--ms-text-display); font-weight: 900; letter-spacing: var(--ms-track-display); line-height: 1; text-wrap: balance; }
.ms-h3 { margin: 0; font-size: var(--ms-text-h2); font-weight: 900; letter-spacing: var(--ms-track-heading); line-height: 1.05; }

/* ---------- Wordmark (logo 2A) ---------- */
.ms-wordmark { display: inline-flex; align-items: center; gap: 0.2em; font-weight: 900; letter-spacing: var(--ms-track-logo); line-height: 1; padding-top: 0.25em; text-decoration: none; color: var(--ms-ink); }
.ms-wordmark:hover { color: var(--ms-ink); }
.ms-wordmark--m { font-size: var(--ms-text-h2); }
.ms-wordmark__make { position: relative; isolation: isolate; display: inline-block; transform: rotate(-3deg); background: var(--ms-face-mustard); border: var(--ms-line) solid var(--ms-ink); padding: 0.02em 0.2em 0.1em; white-space: nowrap; }
.ms-wordmark__make::before, .ms-wordmark__make::after { content: ''; position: absolute; z-index: -1; background: var(--ms-side-mustard); border: var(--ms-line) solid var(--ms-ink); }
.ms-wordmark__make::before { left: calc(var(--ms-line) * -1); bottom: 100%; width: calc(100% + var(--ms-line) * 2); height: 0.22em; transform-origin: bottom left; transform: skewX(-45deg); }
.ms-wordmark__make::after { left: 100%; top: calc(var(--ms-line) * -1); width: 0.22em; height: calc(100% + var(--ms-line) * 2); transform-origin: top left; transform: skewY(-45deg); }
.ms-wordmark__rest { white-space: nowrap; padding-left: 0.1em; }
/* Dice roll, the same as src/components/Wordmark.css (driven by /wordmark.js; see its header): two flips, mustard to one maker face and back. The face changes color while it is edge-on, at 25% and 75%. */
.ms-wordmark--roll-land .ms-wordmark__make { animation: ms-wordmark-flip 0.6s linear both, ms-wordmark-drop 0.6s var(--ms-ease) both; }
.ms-wordmark--roll-land .ms-wordmark__rest { animation: ms-wordmark-rest-in 0.4s var(--ms-ease) 0.2s both; }
.ms-wordmark--roll-hover .ms-wordmark__make { animation: ms-wordmark-flip 0.6s linear, ms-wordmark-hop 0.6s var(--ms-ease); }
.ms-wordmark--roll-land .ms-wordmark__make::before, .ms-wordmark--roll-land .ms-wordmark__make::after { animation: ms-wordmark-flip-side 0.6s linear both; }
.ms-wordmark--roll-hover .ms-wordmark__make::before, .ms-wordmark--roll-hover .ms-wordmark__make::after { animation: ms-wordmark-flip-side 0.6s linear; }
.ms-wordmark--flip-lavender { --ms-wordmark-flip-face: var(--ms-face-lavender); --ms-wordmark-flip-side: var(--ms-side-lavender); }
.ms-wordmark--flip-sky { --ms-wordmark-flip-face: var(--ms-face-sky); --ms-wordmark-flip-side: var(--ms-side-sky); }
.ms-wordmark--flip-teal { --ms-wordmark-flip-face: var(--ms-face-teal); --ms-wordmark-flip-side: var(--ms-side-teal); }
.ms-wordmark--flip-coral { --ms-wordmark-flip-face: var(--ms-face-coral); --ms-wordmark-flip-side: var(--ms-side-coral); }
@keyframes ms-wordmark-flip {
  0% { scale: 1 1; background-color: var(--ms-face-mustard); animation-timing-function: ease-in; }
  25% { scale: 1 0; background-color: var(--ms-face-mustard); }
  25.01% { scale: 1 0; background-color: var(--ms-wordmark-flip-face); animation-timing-function: ease-out; }
  50% { scale: 1 1; background-color: var(--ms-wordmark-flip-face); animation-timing-function: ease-in; }
  75% { scale: 1 0; background-color: var(--ms-wordmark-flip-face); }
  75.01% { scale: 1 0; background-color: var(--ms-face-mustard); animation-timing-function: ease-out; }
  100% { scale: 1 1; background-color: var(--ms-face-mustard); }
}
@keyframes ms-wordmark-flip-side {
  0%, 25% { background-color: var(--ms-side-mustard); }
  25.01%, 75% { background-color: var(--ms-wordmark-flip-side); }
  75.01%, 100% { background-color: var(--ms-side-mustard); }
}
@keyframes ms-wordmark-drop { 0% { translate: 0 -0.5em; opacity: 0; } 30% { opacity: 1; } 100% { translate: 0 0; opacity: 1; } }
@keyframes ms-wordmark-hop { 0% { translate: 0 0; } 45% { translate: 0 -0.4em; } 80% { translate: 0 0.04em; } 100% { translate: 0 0; } }
@keyframes ms-wordmark-rest-in { from { opacity: 0; translate: 0 0.25em; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .ms-wordmark__make, .ms-wordmark__make::before, .ms-wordmark__make::after, .ms-wordmark__rest { animation: none !important; }
}

/* ---------- Block: a flat face with two skewed side faces ---------- */
.ms-block { position: relative; isolation: isolate; display: inline-flex; flex-direction: column; text-decoration: none; color: var(--ms-ink); background: none; border: 0; padding: 0; transition: transform var(--ms-dur) var(--ms-ease); }
.ms-block:hover { color: var(--ms-ink); }
.ms-block--tilt-left { transform: rotate(var(--ms-tilt-left)); }
.ms-block--tilt-right { transform: rotate(var(--ms-tilt-right)); }
.ms-block--depth-m { --d: var(--ms-depth-m); }
.ms-block--depth-type { --d: var(--ms-depth-type); }
.ms-block::before, .ms-block::after { content: ''; position: absolute; z-index: -1; background: var(--side); border: var(--ms-line) solid var(--ms-ink); }
.ms-block::before { left: 0; bottom: calc(100% - var(--ms-line)); width: 100%; height: calc(var(--d) + var(--ms-line)); transform-origin: bottom left; transform: skewX(-45deg); }
.ms-block::after { left: calc(100% - var(--ms-line)); top: 0; width: calc(var(--d) + var(--ms-line)); height: 100%; transform-origin: top left; transform: skewY(-45deg); }
.ms-block__face { flex: 1; display: flex; flex-direction: column; background: var(--face); border: var(--ms-line) solid var(--ms-ink); }
.ms-block--interactive { cursor: pointer; }
.ms-block--interactive:hover { transform: rotate(0deg) translateY(calc(var(--ms-space-2) * -0.75)); }
.ms-block--interactive:active { transform: translateY(calc(var(--ms-space-1) * -0.5)); }
.ms-block--face-mustard { --face: var(--ms-face-mustard); } .ms-block--side-mustard { --side: var(--ms-side-mustard); }
.ms-block--face-coral { --face: var(--ms-face-coral); } .ms-block--side-coral { --side: var(--ms-side-coral); }
.ms-block--face-teal { --face: var(--ms-face-teal); } .ms-block--side-teal { --side: var(--ms-side-teal); }
.ms-block--face-lavender { --face: var(--ms-face-lavender); } .ms-block--side-lavender { --side: var(--ms-side-lavender); }
.ms-block--face-cream { --face: var(--ms-face-cream); } .ms-block--side-cream { --side: var(--ms-side-cream); }

/* ---------- Button (one primary per view) ---------- */
.ms-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--ms-space-2); white-space: nowrap; cursor: pointer; font-family: var(--ms-font); font-weight: 900; letter-spacing: var(--ms-track-ui); color: var(--ms-ink); text-decoration: none; border: var(--ms-line) solid var(--ms-ink); border-radius: var(--ms-radius); transition: transform var(--ms-dur-fast) var(--ms-ease), box-shadow var(--ms-dur-fast) var(--ms-ease); }
.ms-button:hover { color: var(--ms-ink); }
.ms-button:active { box-shadow: var(--ms-shadow-pressed); transform: translate(var(--ms-press-shift), var(--ms-press-shift)); }
.ms-button--m { padding: var(--ms-space-2) var(--ms-space-5); font-size: var(--ms-text-l); box-shadow: var(--ms-shadow-m); }
.ms-button--l { padding: var(--ms-space-3) var(--ms-space-6); font-size: var(--ms-text-h3); box-shadow: var(--ms-shadow-l); }
.ms-button--primary { background: var(--ms-action); }
.ms-button--secondary { background: var(--ms-surface); }
.ms-button--block { display: flex; }

/* ---------- Card + Media ---------- */
.ms-card { display: flex; flex-direction: column; min-width: 0; color: var(--ms-ink); border: var(--ms-line) solid var(--ms-ink); border-radius: var(--ms-radius); background: var(--ms-surface); }
.ms-card--warm { background: var(--ms-surface-warm); }
.ms-card--elev-m { box-shadow: var(--ms-shadow-m); }
.ms-card--elev-l { box-shadow: var(--ms-shadow-l); }
.ms-card--pad-m { padding: var(--ms-space-5); }
.ms-card--pad-l { padding: var(--ms-space-7); }
.ms-media { display: grid; place-items: center; width: 100%; border-bottom: var(--ms-line) solid var(--ms-ink); background-image: repeating-linear-gradient(135deg, var(--ms-hatch) 0 10px, transparent 10px 20px); }
.ms-media--r16-10 { aspect-ratio: 16 / 10; }
.ms-media--r4-3 { aspect-ratio: 4 / 3; padding: var(--ms-space-2) 0; }
.ms-media--mustard { background-color: var(--ms-face-mustard); }
.ms-media--lavender { background-color: var(--ms-face-lavender); }
.ms-media--coral { background-color: var(--ms-face-coral); }
.ms-media__label { font-family: var(--ms-font-mono); font-size: var(--ms-text-meta); }

/* ---------- Scene: a small drawn picture of one step of a build, inside a Media (How it works) ----------
   Drawn from the Game Maker's real words (backend catalog/game.py): Bix's questions, the picks, the four agents,
   the upgrades. role="img" + aria-label on the Media carries the meaning; the parts are decoration. */
.ms-scene { width: 86%; display: flex; flex-direction: column; gap: var(--ms-space-2); }
.ms-scene__who { display: block; font-family: var(--ms-font-mono); font-size: var(--ms-text-micro); font-weight: 500; }
.ms-scene__bubble { align-self: flex-start; background: var(--ms-surface); border: var(--ms-line-small) solid var(--ms-ink); padding: var(--ms-space-1) var(--ms-space-3) var(--ms-space-2); font-size: var(--ms-text-xs); font-weight: 800; line-height: 1.25; }
.ms-scene__idea { background: var(--ms-surface); border: var(--ms-line) solid var(--ms-ink); box-shadow: var(--ms-shadow-s); padding: var(--ms-space-2) var(--ms-space-3); font-size: var(--ms-text-s); font-weight: 900; line-height: 1.2; }
.ms-scene__chips { display: flex; flex-wrap: wrap; gap: var(--ms-space-2); }
.ms-scene__chip { background: var(--ms-surface); border: var(--ms-line-small) solid var(--ms-ink); padding: 0 var(--ms-space-2); font-size: var(--ms-text-xs); font-weight: 800; line-height: 1.7; white-space: nowrap; }
.ms-scene__chip--on { background: var(--ms-surface-inverse); color: var(--ms-on-dark); }
.ms-scene__log { display: flex; flex-direction: column; gap: var(--ms-space-1); margin: 0; padding: var(--ms-space-2) var(--ms-space-3); list-style: none; background: var(--ms-surface); border: var(--ms-line) solid var(--ms-ink); box-shadow: var(--ms-shadow-s); }
.ms-scene__row { display: flex; gap: var(--ms-space-2); align-items: center; font-size: var(--ms-text-xs); font-weight: 800; line-height: 1.2; }
.ms-scene__row .ms-agentline__swatch { width: var(--ms-space-4); height: var(--ms-space-4); margin-top: 0; }
.ms-scene__row--done::after { content: '\2713'; margin-left: auto; font-weight: 900; }
.ms-scene__row--now { background: var(--ms-highlight); margin: 0 calc(var(--ms-space-3) * -1); padding: var(--ms-space-1) var(--ms-space-3); }
.ms-scene__row--next { font-weight: 600; }
.ms-scene__meter { display: block; height: var(--ms-space-3); background: var(--ms-surface); border: var(--ms-line-small) solid var(--ms-ink); }
.ms-scene__fill { display: block; width: 62%; height: 100%; background: var(--ms-agent-coder); border-right: var(--ms-line-small) solid var(--ms-ink); }
.ms-scene__game { position: relative; display: block; height: var(--ms-space-10); background: var(--ms-surface-inverse); border: var(--ms-line) solid var(--ms-ink); overflow: hidden; }
.ms-scene__score { position: absolute; top: var(--ms-space-1); left: var(--ms-space-2); font-family: var(--ms-font-mono); font-size: var(--ms-text-micro); font-weight: 500; color: var(--ms-on-dark); }
.ms-scene__ground { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ms-space-3); background: var(--ms-bg-kid); border-top: var(--ms-line-small) solid var(--ms-ink); }
.ms-scene__hero { position: absolute; left: 24%; bottom: var(--ms-space-7); width: var(--ms-space-5); height: var(--ms-space-5); background: var(--ms-face-cream); border: var(--ms-line-small) solid var(--ms-ink); transform: rotate(var(--ms-tilt-left)); }
.ms-scene__rock { position: absolute; bottom: var(--ms-space-3); width: var(--ms-space-4); height: var(--ms-space-4); background: var(--ms-face-lavender); border: var(--ms-line-small) solid var(--ms-ink); transform: rotate(45deg); }
.ms-scene__rock--a { left: 46%; }
.ms-scene__rock--b { left: 74%; bottom: var(--ms-space-6); }
.ms-agentline__swatch--artist { background: var(--ms-agent-artist); }

/* ---------- Page grounds and sections ---------- */
.ms-ground--kid { background: var(--ms-bg-kid); }
/* The logo keeps its own hover ("something" stays ink, as in the app): eod01 F-19, this rule (0,2,1) beat .ms-wordmark:hover (0,2,0). */
.ms-ground--kid a:not(.ms-wordmark):hover { color: var(--ms-on-dark); }
.ms-section { border-top: var(--ms-line) solid var(--ms-ink); padding: clamp(60px, 8vw, 110px) var(--ms-gutter); }
.ms-section--cream { background: var(--ms-bg-parent); }
.ms-section--teal { background: var(--ms-face-teal); }
.ms-section--mustard { background: var(--ms-face-mustard); }
.ms-section__inner { max-width: var(--ms-max-page); margin: 0 auto; display: flex; flex-direction: column; gap: var(--ms-space-9); }
.ms-section__inner--narrow { max-width: 880px; gap: var(--ms-space-8); }
.ms-section__head { display: flex; flex-direction: column; gap: var(--ms-space-3); max-width: 760px; }

/* ---------- Site header ---------- */
.ms-sitenav { display: flex; align-items: center; justify-content: space-between; gap: var(--ms-space-5); flex-wrap: wrap; padding: var(--ms-space-7) var(--ms-gutter); }
.ms-sitenav__links { display: flex; align-items: center; gap: var(--ms-space-6); flex-wrap: wrap; font-weight: 700; font-size: var(--ms-text-m); white-space: nowrap; }

/* ---------- Hero ----------
   Differs from Landing.dc.html on purpose. The kit puts the title beside the tiles at every width,
   but "something." at 136px is about 890px wide and the kit's column is about 600px, so the tiles
   covered the word. Now: under 1500px the title has the full width and the five makers sit in a
   strip below it (two across on small screens). From 1500px the page widens to --ms-max-page-wide
   and the kit's side-by-side layout returns, with the copy column never narrower than the title. */
.ms-hero { padding: clamp(24px, 5vw, 64px) var(--ms-gutter) clamp(60px, 8vw, 110px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(48px, 6vw, 90px); max-width: var(--ms-max-page); margin: 0 auto; }
.ms-hero__copy { flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: var(--ms-space-8); }
/* min(): under about 415px the kit's 56px floor lets "something." overflow the gutter; 13.5vw keeps it inside. */
.ms-hero__title { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(22px, 3vw, 34px); font-size: min(var(--ms-text-hero), 13.5vw); font-weight: 900; letter-spacing: var(--ms-track-logo); line-height: 1; padding-top: var(--ms-depth-type); }
.ms-hero__title .ms-block__face { padding: 0.04em 0.24em 0.1em; white-space: nowrap; }
/* The margin counts the nudge and the 3D side in the layout box, so nothing beside it can slide under them. */
.ms-hero__word--2 { transform: rotate(var(--ms-tilt-right)) translateX(0.25em); margin-inline-end: calc(0.25em + var(--ms-depth-type)); }
.ms-hero__lead { font-size: clamp(var(--ms-text-xl), 2.2vw, var(--ms-text-h2)); font-weight: 700; line-height: 1.3; max-width: 560px; }
.ms-hero__cta { display: flex; flex-wrap: wrap; gap: var(--ms-space-4); align-items: center; }
.ms-hero__note { font-weight: 700; font-size: var(--ms-text-m); }
.ms-hero__tiles { position: relative; z-index: 1; flex: 1 1 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ms-space-9) var(--ms-space-8); padding: var(--ms-space-5) var(--ms-space-3); margin: 0; list-style: none; }
.ms-hero__tiles > li { display: flex; }
.ms-tile { display: flex; flex: 1; }
.ms-tile--drop { transform: rotate(var(--ms-tilt-right)) translateY(var(--ms-space-4)); }
.ms-tile .ms-block__face { padding: var(--ms-space-4) var(--ms-space-4) var(--ms-space-5); gap: var(--ms-space-2); }
.ms-tile__name { font-size: var(--ms-text-h2); font-weight: 900; letter-spacing: var(--ms-track-display); line-height: 1; }
.ms-tile__sub { font-size: var(--ms-text-s); font-weight: 600; line-height: 1.25; }
/* Media queries cannot read tokens, so the widths are spelled here. 1000px: five tiles fit in one row.
   1500px: the title (about 890px), the gap (90px), the tiles at their narrowest (380px) and both gutters fit. */
@media (min-width: 1000px) {
  .ms-hero__tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1500px) {
  .ms-hero { flex-wrap: nowrap; max-width: var(--ms-max-page-wide); }
  .ms-hero__copy { flex: 0 1 auto; min-width: min-content; }
  .ms-hero__tiles { flex: 1 1 380px; max-width: 480px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- How it works ---------- */
.ms-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--ms-space-7); margin: 0; padding: 0; list-style: none; }
.ms-step__body { padding: var(--ms-space-5) var(--ms-space-5) var(--ms-space-6); display: flex; flex-direction: column; gap: var(--ms-space-2); }
.ms-band { display: flex; flex-wrap: wrap; gap: var(--ms-space-7); align-items: center; background: var(--ms-surface-inverse); color: var(--ms-on-dark); padding: clamp(22px, 3vw, 36px); }
.ms-band__copy { flex: 1 1 360px; display: flex; flex-direction: column; gap: var(--ms-space-3); }
.ms-band__title { margin: 0; font-size: clamp(var(--ms-text-h2), 3vw, var(--ms-text-logo-l)); font-weight: 900; letter-spacing: var(--ms-track-display); line-height: 1.05; }
.ms-band__text { font-weight: 600; font-size: var(--ms-text-l); line-height: 1.5; }
.ms-band__chat { flex: 0 1 360px; min-width: 260px; background: var(--ms-surface-warm); color: var(--ms-ink); border: var(--ms-line) solid var(--ms-on-dark); padding: var(--ms-space-3); display: flex; flex-direction: column; gap: var(--ms-space-3); margin: 0; list-style: none; }
.ms-agentline { display: flex; gap: var(--ms-space-3); align-items: flex-start; }
.ms-agentline__swatch { flex: none; width: var(--ms-space-6); height: var(--ms-space-6); border: var(--ms-line-small) solid var(--ms-ink); margin-top: 2px; }
.ms-agentline__swatch--planner { background: var(--ms-agent-planner); }
.ms-agentline__swatch--tester { background: var(--ms-agent-tester); }
.ms-agentline__swatch--coder { background: var(--ms-agent-coder); }
.ms-agentline__body { display: flex; flex-direction: column; gap: var(--ms-space-1); min-width: 0; }
.ms-agentline__text { font-weight: 700; font-size: var(--ms-text-m); line-height: 1.3; }

/* ---------- Safety ---------- */
.ms-promises { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--ms-space-6); margin: 0; padding: 0; list-style: none; }
.ms-promise { gap: var(--ms-space-2); }
.ms-promise__title { margin: 0; font-size: var(--ms-text-h3); font-weight: 900; letter-spacing: var(--ms-track-heading); }

/* ---------- Pricing ---------- */
.ms-pricing__lead { font-weight: 600; font-size: var(--ms-text-xl); line-height: 1.45; }
.ms-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--ms-space-6); margin: 0; padding: 0; list-style: none; }
.ms-plan { gap: var(--ms-space-4); }
.ms-plan__head { display: flex; justify-content: space-between; align-items: center; gap: var(--ms-space-2); }
.ms-plan__name { margin: 0; font-size: var(--ms-text-h2); font-weight: 900; letter-spacing: var(--ms-track-heading); }
.ms-tag { background: var(--ms-action); border: var(--ms-line-small) solid var(--ms-ink); padding: 0 var(--ms-space-2); line-height: 1.6; font-weight: 900; font-size: var(--ms-text-meta); white-space: nowrap; }
.ms-price { display: flex; align-items: baseline; gap: var(--ms-space-2); }
.ms-price__amount { font-size: var(--ms-text-h1); font-weight: 900; letter-spacing: var(--ms-track-logo); line-height: 1; }
.ms-price__per { font-weight: 700; font-size: var(--ms-text-s); }
.ms-plan__sparks { font-weight: 900; font-size: var(--ms-text-xl); }
.ms-points { display: flex; flex-direction: column; gap: var(--ms-space-2); flex: 1; margin: 0; padding: 0; list-style: none; }
.ms-points__item { display: flex; gap: var(--ms-space-3); font-weight: 600; font-size: var(--ms-text-s); line-height: 1.35; }
.ms-points__item::before { content: ''; flex: none; width: var(--ms-space-3); height: var(--ms-space-3); margin-top: var(--ms-space-1); background: var(--ms-ink); }
.ms-pricing__note { font-weight: 700; font-size: var(--ms-text-s); }

/* ---------- FAQ (details/summary: works with scripts off) ---------- */
.ms-faqs { display: flex; flex-direction: column; gap: var(--ms-space-3); }
.ms-faq { background: var(--ms-surface); border: var(--ms-line) solid var(--ms-ink); }
.ms-faq[open] { box-shadow: var(--ms-shadow-m); }
.ms-faq__q { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--ms-space-4); padding: var(--ms-space-4) var(--ms-space-5); font-weight: 900; font-size: var(--ms-text-xl); letter-spacing: var(--ms-track-ui); }
.ms-faq__q::-webkit-details-marker { display: none; }
.ms-faq__mark { flex: none; width: var(--ms-space-7); height: var(--ms-space-7); border: var(--ms-line-small) solid var(--ms-ink); display: grid; place-items: center; font-size: var(--ms-text-xl); background: var(--ms-surface); }
.ms-faq__mark::before { content: '+'; }
.ms-faq[open] .ms-faq__mark { background: var(--ms-highlight); }
.ms-faq[open] .ms-faq__mark::before { content: '\2212'; }
.ms-faq__a { padding: 0 var(--ms-space-5) var(--ms-space-5); font-weight: 600; font-size: var(--ms-text-m); line-height: 1.5; }

/* ---------- Teachers (teachers.html) ---------- */
.ms-teach-hero { border-top: 0; }
.ms-teach-lead { font-size: clamp(var(--ms-text-xl), 2.2vw, var(--ms-text-h2)); font-weight: 700; line-height: 1.3; max-width: 760px; }
.ms-teach-text { font-weight: 600; font-size: var(--ms-text-l); line-height: 1.5; }
.ms-teach-ideas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--ms-space-6); margin: 0; padding: 0; list-style: none; }
.ms-teach-idea { gap: var(--ms-space-2); }
.ms-sitenav__links a[aria-current='page'] { text-decoration-thickness: var(--ms-line); }

/* ---------- Closing + footer ---------- */
.ms-closing { display: flex; flex-direction: column; align-items: center; gap: var(--ms-space-8); text-align: center; }
.ms-closing__title { margin: 0; font-size: var(--ms-text-display-l); font-weight: 900; letter-spacing: var(--ms-track-logo); line-height: 0.95; text-wrap: balance; max-width: 900px; }
.ms-sitefooter { background: var(--ms-surface-inverse); color: var(--ms-on-dark); padding: var(--ms-space-8) var(--ms-gutter); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--ms-space-5); font-weight: 600; font-size: var(--ms-text-s); }
.ms-sitefooter__links { display: flex; gap: var(--ms-space-5); flex-wrap: wrap; }
.ms-sitefooter a { color: var(--ms-on-dark); }
.ms-sitefooter a:hover { color: var(--ms-highlight); }

/* ---------- Legal, help, 404 ----------
   public/legal/{coppa,privacy,terms}.html, public/help/index.html, public/404.html and public/offline.html.
   Design source: design-kit/Legal.dc.html, Help Center.dc.html and Not Found.dc.html. None of them ships a script:
   the kit's document tabs are links (the current one has aria-current="page"), the help center's search and filters
   became topic sections with anchor links, and its answers are the landing's details/summary (.ms-faq). */

/* A document page: a cream ground under the lavender header, the table of contents beside the body from 900px. */
.ms-doc { background: var(--ms-bg-parent); border-top: var(--ms-line) solid var(--ms-ink); padding: var(--ms-space-8) var(--ms-gutter) var(--ms-space-10); }
.ms-doc__inner { max-width: var(--ms-max-page); margin: 0 auto; display: flex; flex-direction: column; gap: var(--ms-space-8); }
.ms-doc__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ms-space-8); align-items: start; }
.ms-doc__body { min-width: 0; display: flex; flex-direction: column; gap: var(--ms-space-8); }
.ms-doc__head { display: flex; flex-direction: column; gap: var(--ms-space-3); }
.ms-doc__section { display: flex; flex-direction: column; gap: var(--ms-space-3); scroll-margin-top: var(--ms-space-5); }
.ms-doc__text { font-weight: 500; font-size: var(--ms-text-m); line-height: 1.65; max-width: 700px; }
.ms-doc__note { border: var(--ms-line) dashed var(--ms-ink); padding: var(--ms-space-4) var(--ms-space-5); font-weight: 600; font-size: var(--ms-text-s); line-height: 1.5; }
/* The page title of help, 404 and offline (the legal pages use .ms-h2, the kit's smaller size). */
.ms-pagetitle { margin: 0; font-size: var(--ms-text-display-l); font-weight: 900; letter-spacing: var(--ms-track-logo); line-height: 0.98; text-wrap: balance; }

/* The three legal pages link to each other where the kit had tabs. */
.ms-doctabs { display: flex; flex-wrap: wrap; gap: var(--ms-space-3); margin: 0; padding: 0; list-style: none; }
.ms-doctabs__link { display: inline-block; padding: var(--ms-space-2) var(--ms-space-4); background: var(--ms-surface); border: var(--ms-line) solid var(--ms-ink); font-weight: 900; font-size: var(--ms-text-l); letter-spacing: var(--ms-track-ui); text-decoration: none; white-space: nowrap; }
.ms-doctabs__link:hover { color: var(--ms-ink); box-shadow: var(--ms-shadow-s); }
.ms-doctabs__link[aria-current='page'] { background: var(--ms-highlight); box-shadow: var(--ms-shadow-s); }

/* The table of contents (legal) and the topic list with counts (help). */
.ms-toc { display: flex; flex-direction: column; gap: var(--ms-space-2); }
.ms-toc__list { display: flex; flex-direction: column; gap: var(--ms-space-1); margin: 0; padding: 0; list-style: none; }
.ms-toc__list a { display: flex; justify-content: space-between; gap: var(--ms-space-3); padding: var(--ms-space-1) 0; font-weight: 700; font-size: var(--ms-text-m); }
.ms-toc__count { font-family: var(--ms-font-mono); font-size: var(--ms-text-meta); font-weight: 500; }

/* "The short version": a colored card. Mustard for kids, teal for privacy, lavender for terms, as in the kit. */
.ms-summary { gap: var(--ms-space-3); }
.ms-summary--mustard { background: var(--ms-face-mustard); }
.ms-summary--teal { background: var(--ms-face-teal); }
.ms-summary--lavender { background: var(--ms-face-lavender); }
.ms-points--l .ms-points__item { font-weight: 700; font-size: var(--ms-text-l); line-height: 1.4; }
.ms-points--l .ms-points__item::before { margin-top: calc((1.4em - var(--ms-space-3)) / 2); }

/* 900px: the 240px list, the gap and a readable body fit side by side. Under it the list sits above the body and does not stick. */
@media (min-width: 900px) {
  .ms-doc__layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--ms-space-9); }
  .ms-toc { position: sticky; top: var(--ms-space-5); }
}

/* Help center: a teal band with the title, then topics; each answer is a .ms-faq with a "FOR KIDS" / "FOR GROWN-UPS" line. */
.ms-helphero { background: var(--ms-face-teal); border-top: var(--ms-line) solid var(--ms-ink); padding: var(--ms-space-8) var(--ms-gutter) var(--ms-space-9); }
.ms-helphero__inner { max-width: var(--ms-max-page); margin: 0 auto; display: flex; flex-direction: column; gap: var(--ms-space-4); }
.ms-helphero__inner > * { max-width: 760px; }
.ms-helphero__lead { font-weight: 700; font-size: var(--ms-text-xl); line-height: 1.4; }
.ms-faq__head { display: flex; flex-direction: column; gap: var(--ms-space-1); }
.ms-help__contact { margin-top: var(--ms-space-5); }
.ms-help__contact .ms-band__text a { color: var(--ms-on-dark); }
.ms-help__contact .ms-band__text a:hover { color: var(--ms-highlight); }

/* 404 and offline: Bix, big (the kit's 200 to 300px cube, a mustard top and a coral side), beside the words.
   The padding holds the two side faces inside the layout box. The tilts (-8deg, 4deg) are the kit's, wider than the tilt tokens. */
.ms-lost { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--ms-space-9); padding: var(--ms-space-9) var(--ms-gutter) var(--ms-space-10); }
.ms-lost--offline { background: var(--ms-info); border-top: var(--ms-line) solid var(--ms-ink); }
.ms-lost__bix { --size: clamp(200px, 26vw, 300px); --depth: calc(var(--size) * 0.18); flex: none; padding: var(--depth) var(--depth) 0 0; }
.ms-lost__cube { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 22%; width: var(--size); height: var(--size); background: var(--ms-agent-bix); border: var(--ms-line) solid var(--ms-ink); transform: rotate(-8deg); }
.ms-lost__cube::before, .ms-lost__cube::after { content: ''; position: absolute; z-index: -1; border: var(--ms-line) solid var(--ms-ink); }
.ms-lost__cube::before { left: calc(var(--ms-line) * -1); bottom: 100%; width: calc(100% + var(--ms-line) * 2); height: var(--depth); background: var(--ms-highlight); transform-origin: bottom left; transform: skewX(-45deg); }
.ms-lost__cube::after { left: 100%; top: calc(var(--ms-line) * -1); width: var(--depth); height: calc(100% + var(--ms-line) * 2); background: var(--ms-face-coral); transform-origin: top left; transform: skewY(-45deg); }
.ms-lost__cube i { display: block; width: 14%; height: 20%; border-radius: var(--ms-radius-round); background: var(--ms-ink); }
.ms-lost--offline .ms-lost__cube { transform: rotate(4deg); }
.ms-lost--offline .ms-lost__cube i { width: 18%; height: 5%; border-radius: var(--ms-radius); }
.ms-lost__copy { flex: 0 1 520px; min-width: 0; display: flex; flex-direction: column; gap: var(--ms-space-5); }
.ms-lost__text { font-weight: 700; font-size: var(--ms-text-xl); line-height: 1.4; }
.ms-lost__cta { display: flex; flex-wrap: wrap; gap: var(--ms-space-4); margin-top: var(--ms-space-1); }
/* A short page: the main grows so the footer sits at the bottom of the window, not over a band of body ground. */
body:has(> .ms-lost) { display: flex; flex-direction: column; min-height: 100vh; }
body:has(> .ms-lost) .ms-lost { flex: 1; }