/* home.css: the marketing pages (web/index.html and web/faq.html). Loaded AFTER whizply.css and
 * takes EVERY colour from its tokens (--ink, --sub, --surface, --bg, --line, --accent,
 * --accent-deep, --accent-soft, --btn-accent, --ok, --bad-ink and the rest), its type (--font-*,
 * --fw-*), shape (--r-*, --pill) and motion (--dur-*, --ease-*, --lift). There is no palette in
 * this file, so a new palette in whizply.css applies here by itself, dark mode included. The
 * few literals left are mixed with a token (the hero robot's light shell and dark visor); logo
 * tiles and monogram tints are tokens too (--logo-*, --mono-*).
 *
 * LOOK (colour v2, 2026-10-15, after stripe.com): no frame lines and no hairlines between
 * sections; the sections alternate instead, on whizply.css's contrast-matched bands: the hero on
 * a soft gradient wash (--wash-hero), "You don't have to track every dream company" on the soft
 * violet band, How it works on the page wash, What you get on the deep navy band (white text,
 * vivid accent chips), the live market on the mint band, then the footer on the wash. A band
 * remaps the ink, subtext, accent and surface tokens for everything inside it, so the rules
 * below are written once and read correctly on every band. Two-tone headings (a dark first
 * sentence, then a continuation in the band's deep subtext), crisp accent buttons with small
 * radii, white cards, generous spacing. One sans (fonts.css, self-hosted).
 *
 * MOTION. The two rows in the live market move continuously (a linear, seamless loop of a GPU
 * transform). They stop on hover, while anything in them has keyboard focus and while off
 * screen, and stand still, wrapped, under prefers-reduced-motion. The owner removed the pause
 * button, so WCAG 2.2.2 (a pause control for motion over 5 s) is a known gap. Everything else
 * plays once: entrances, the time-saved fold (scroll-driven, or a one-shot under 2 s without
 * scroll timelines) and the how-it-works tour, which stops at any sign of attention. Only
 * transform and opacity move, inside boxes of fixed size, so nothing shifts the layout. */

:root {
  --canvas: var(--bg);                                      /* the page: the cool wash, never flat white */
  --band: color-mix(in srgb, var(--accent-soft) 50%, var(--surface));   /* a tinted row inside a card */
  --slate: color-mix(in srgb, var(--ink) 38%, var(--sub));  /* heading continuations, leads */
  --skel: var(--sk-base);
  --frame: 1232px;                                          /* the header's width */
  --mq-gap: 14px;
}
/* Inside a band the same names are re-derived from the band's tokens (whizply.css section 7b):
   white cards, rows tinted in the band's own hue, the continuation in its deep subtext. */
.wz-band--violet, .wz-band--navy, .wz-band--mint {
  --canvas: var(--surface);
  --band: var(--surface-2);
  --slate: color-mix(in srgb, var(--ink) 38%, var(--sub));
  --skel: var(--sk-base);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
/* The page is the cool wash; its top (header and hero) sits on the hero gradient, which fades
   out into the wash, so the header needs no edge of its own. */
body.hm {
  position: relative; margin: 0; color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.55;
  overflow-x: hidden; -webkit-font-smoothing: antialiased;
  background-color: var(--canvas); background-image: var(--wash-hero);
  background-repeat: no-repeat; background-size: 100% 1080px;
}
a { color: inherit; text-decoration: none; }
/* whizply.css underlines app links on hover; the home page's links are buttons, menus and cards. */
body.hm a:hover { text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-xs); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hm-skip { position: absolute; left: 12px; top: -48px; z-index: 50; background: var(--btn); color: var(--btn-ink); padding: 10px 16px; border-radius: var(--r-btn); font-weight: 600; }
.hm-skip:focus { top: 12px; }
#main { outline: none; }

/* ===== header ===== */
.xnav-wrap { position: relative; z-index: 20; background: transparent; view-transition-name: wz-sitenav; }
.xnav { max-width: var(--frame); min-height: 72px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 24px; }
.xbrand { display: flex; align-items: center; gap: 10px; }
.xbrand span { font-family: var(--font-sans); font-weight: 800; font-size: 25px; letter-spacing: -.03em; color: var(--ink); }
/* The mascot beside the wordmark: whizply.css `.wz-bot` draws and animates it. */
/* The main links (2026-10-15): 16px at 600, so the header reads at a glance. On hover the link
   takes the accent and a short underline grows from its middle; the current page keeps it. */
.xlinks { display: flex; align-items: center; gap: 20px; font-size: var(--fs-lead); font-weight: 600; color: var(--ink); }
/* one line each, always: a squeezed header wrapped "How it works" onto two (it collapses into the menu first) */
.xlinks > *, .xdrop { white-space: nowrap; flex: 0 0 auto; }
/* …but never inside an opened menu: its descriptions wrap within the panel */
.xmenu__list, .xmobile { white-space: normal; }
.xlinks > a, .xdrop { position: relative; transition: color var(--dur-1) var(--ease-out); }
.xlinks > a::after, .xdrop::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: var(--pill);
  background: var(--accent); transform: scaleX(0); transition: transform var(--dur-2) var(--ease-out);
}
.xlinks > a:hover::after, .xdrop:hover::after, .xdrop[aria-expanded="true"]::after, .xlinks > a[aria-current="page"]::after { transform: scaleX(1); }
.xdrop::after { right: 18px; }
.xlinks > a:hover, .xdrop:hover, .xlinks > a[aria-current="page"] { color: var(--accent-deep); }
.xdrop { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-lead); font-weight: 600; color: var(--ink); }
.xdrop svg { transition: transform var(--dur-2) var(--ease-out); }
.xdrop[aria-expanded="true"] svg { transform: rotate(180deg); }
.xsep { width: 1px; height: 22px; background: var(--line-strong); }
.xnav__right { display: flex; align-items: center; gap: 10px; }
/* Learn AI: the free roadmap, a labelled pill beside the main button ("Learn AI" + a Free tag), so
   nobody has to guess what a lone sparkle means. Tinted, not filled: the filled button stays the one
   main action. Narrow screens drop the tag, phones keep it in the menu (first, highlighted). */
.xlearn { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: var(--btn-h); padding: 0 8px 0 13px;
  border-radius: var(--r-btn); white-space: nowrap; text-decoration: none; font-weight: 700; font-size: var(--fs-sm);
  color: var(--accent-deep); border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line-control));
  background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), color-mix(in srgb, var(--band-mint-accent) 10%, var(--surface)));
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); animation: x-glow 3.2s var(--ease-out) infinite;
  transition: border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); }
.xlearn svg { color: var(--accent); flex: 0 0 auto; animation: x-twinkle 3.2s var(--ease-in-out) infinite; }
.xlearn:hover, .xlearn:focus-visible { border-color: var(--accent); transform: translateY(-1px); text-decoration: none;
  background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 20%, var(--surface)), color-mix(in srgb, var(--band-mint-accent) 16%, var(--surface))); }
.xlearn__tag { font-size: var(--fs-xs); font-weight: 800; color: var(--btn-accent-ink); background: var(--btn-accent); padding: 2px 8px;
  border-radius: var(--pill); letter-spacing: .01em; }
/* the menu's first item on phones */
.xmobile a.xmobile__learn { background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 12%, var(--surface)), color-mix(in srgb, var(--band-mint-accent) 10%, var(--surface)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); margin-bottom: 4px; }
.xmobile__learn-txt { display: grid; gap: 1px; }
.xmobile__learn-txt small { font-size: var(--fs-xs); font-weight: 600; color: var(--sub); }
.xmobile__tag { margin-left: auto; font-size: var(--fs-xs); font-weight: 800; color: var(--btn-accent-ink); background: var(--btn-accent); padding: 2px 9px; border-radius: var(--pill); }
@keyframes x-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 45% { transform: scale(1.25) rotate(16deg); } 60% { transform: scale(.95) rotate(-6deg); } }
@keyframes x-glow { 0%, 60% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
/* The hero's call-out for Learn AI: a pill with a light sweeping through it and a twinkling sparkle. */
.xannounce {
  position: relative; overflow: hidden; display: flex; width: max-content; max-width: 100%; align-items: center; gap: 9px; margin: 0 auto 14px;
  padding: 7px 14px 7px 8px; border-radius: var(--pill); text-decoration: none; color: var(--ink); font-weight: 650; font-size: var(--fs-sm);
  background: linear-gradient(115deg, color-mix(in srgb, var(--accent) 16%, var(--surface)), color-mix(in srgb, var(--band-mint-accent) 14%, var(--surface)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent), 0 6px 18px color-mix(in srgb, var(--accent) 16%, transparent);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.xannounce::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--surface) 75%, transparent) 50%, transparent 70%);
  translate: -120% 0; animation: x-sweep 5s var(--ease-in-out) 1s infinite; }
@keyframes x-sweep { 0%, 65% { translate: -120% 0; } 100% { translate: 120% 0; } }
.xannounce:hover { transform: translateY(-1px); text-decoration: none; box-shadow: inset 0 0 0 1px var(--accent), 0 10px 24px color-mix(in srgb, var(--accent) 24%, transparent); }
.xannounce b { padding: 2px 9px; border-radius: var(--pill); background: var(--accent); color: var(--btn-accent-ink); font-size: var(--fs-xs); font-weight: 800; }
.xannounce__spark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); color: var(--accent); }
.xannounce__spark svg { animation: x-twinkle 3.2s var(--ease-in-out) infinite; }
.xannounce > svg:last-child { color: var(--accent-deep); transition: transform var(--dur-2) var(--ease-out); }
.xannounce:hover > svg:last-child { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .xlearn, .xlearn svg, .xannounce::after, .xannounce__spark svg { animation: none; } }
html.still :is(.xlearn, .xlearn svg, .xannounce::after, .xannounce__spark svg) { animation: none; }
@media (max-width: 760px) { .xlearn__tag { display: none; } .xlearn { padding: 0 13px; } }
@media (max-width: 600px) { .xlearn { display: none; } }   /* phones: the menu's first item instead (and the hero's call-out) */
.xburger { display: none; width: 42px; height: 42px; border-radius: var(--r-btn); border: 1px solid var(--line-control); background: var(--surface); color: var(--ink); place-items: center; cursor: pointer; }

/* buttons: crisp, accent filled, small radius */
.xbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--r-btn); background: var(--btn-accent); color: var(--btn-accent-ink); font: inherit; font-weight: 650; font-size: var(--fs-md); line-height: 1.2; min-height: var(--btn-h); padding: 0 18px; cursor: pointer; white-space: nowrap; transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }
.xbtn:hover { background: var(--btn-accent-hover); }
.xbtn:active { transform: scale(var(--press, .98)); }
.xbtn:disabled { opacity: .6; cursor: progress; }
.xbtn-lg { min-height: var(--btn-h-lg); padding: 0 24px; font-size: var(--fs-lead); }
/* A filled button catches a soft light as the pointer arrives (one sweep per hover) and its
   arrow steps forward; the ghost button only changes its fill. As whizply.css `.wz-btn`. */
.xbtn:not(.xghost), .btn { position: relative; overflow: clip; }
.xbtn:not(.xghost)::after, .btn::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, color-mix(in srgb, var(--btn-accent-ink) 26%, transparent) 50%, transparent 70%);
  opacity: 0; transform: translateX(-110%);
}
.xbtn > svg:last-child { transition: transform var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .xbtn:not(.xghost):not(:disabled):hover::after, .btn:hover::after {
    opacity: 1; transform: translateX(110%);
    transition: transform calc(var(--dur-reveal) * 1.4) var(--ease-in-out), opacity var(--dur-1) var(--ease-out);
  }
  .xbtn:not(.xghost):hover > svg:last-child { transform: translateX(var(--nudge)); }
}
.xghost { background: var(--surface); color: var(--ink); border-color: var(--line-control); }
.xghost:hover { background: color-mix(in srgb, var(--accent-soft) 45%, var(--surface)); border-color: var(--accent); }
.xplay { width: 22px; height: 22px; border-radius: 50%; background: var(--ink); display: grid; place-items: center; }
.xplay svg { margin-left: 2px; fill: var(--surface); }

/* dropdown menus */
.xmenu { position: relative; }
/* The menus (2026-10-15): each item has its own colour cue, a small tinted chip with its icon in
   one of the band hues (violet, sky, navy, peach, rose, blue), a title in the heading ink and a
   line in the subtext. A menu grows out of its button (individual transform properties, so the
   centring transform stays); on hover an item's chip turns toward you. Chip icons are 4.4:1 or
   more on their tint. */
.xmenu__list { position: absolute; top: calc(100% + 16px); left: 50%; transform: translateX(-50%); z-index: 10; list-style: none; margin: 0; padding: 8px; min-width: 320px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-pop); transform-origin: top center; animation: x-menu-in var(--dur-2) var(--ease-out); }
.xmenu__list a { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: var(--r-sm); color: var(--ink); transition: background-color var(--dur-1) var(--ease-out); }
.xmenu__list a:hover, .xmenu__list a:focus-visible { background: var(--band); color: var(--ink); }
.xmenu__txt { display: grid; gap: 2px; min-width: 0; }
.xmenu__list strong { font-size: var(--fs-md); font-weight: 700; color: var(--ink-heading, var(--ink)); }
.xmenu__txt > span { font-size: var(--fs-sm); color: var(--sub); font-weight: 500; }
.xmenu__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); flex-shrink: 0; transition: transform var(--dur-3) var(--ease-spring); }
.xmenu__ic--violet { background: var(--band-violet-chip); color: var(--band-violet-chip-ink); }
.xmenu__ic--sky { background: var(--band-mint-chip); color: var(--band-mint-chip-ink); }
.xmenu__ic--navy { background: var(--band-navy-bg); color: var(--band-navy-ink); box-shadow: inset 0 0 0 1px var(--band-navy-line); }
.xmenu__ic--peach { background: var(--warn); color: var(--warn-ink); }
.xmenu__ic--rose { background: var(--bad); color: var(--bad-ink); }
.xmenu__ic--info { background: var(--info); color: var(--info-ink); }
@media (hover: hover) and (pointer: fine) {
  :is(.xmenu__list, .xmobile) a:hover .xmenu__ic { transform: rotate(-6deg) scale(1.06); }
}
@keyframes x-menu-in { from { opacity: 0; translate: 0 calc(var(--nudge) * -1); scale: var(--pop); } }
.xmobile { position: absolute; top: calc(100% + 8px); left: 12px; right: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px; box-shadow: var(--shadow-pop); display: grid; gap: 2px; transform-origin: top center; animation: x-menu-in var(--dur-2) var(--ease-out); }
.xmobile a { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: var(--r-sm); font-size: var(--fs-lead); font-weight: 600; color: var(--ink-heading, var(--ink)); transition: background-color var(--dur-1) var(--ease-out); }
.xmobile a:hover, .xmobile a[aria-current="page"] { background: var(--band); }
.xmobile .xmenu__ic { width: 32px; height: 32px; }
/* a tablet: the menu drops under the button, not across the whole width */
@media (min-width: 601px) { .xmobile { left: auto; width: min(400px, calc(100% - 24px)); } }

/* ===== hero ===== */
.xtop { position: relative; overflow: clip; }
.xhero { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 76px 24px 72px; text-align: center; outline: none; }
.xpill { display: inline-flex; align-items: center; gap: 8px; background: var(--accent-soft); color: var(--accent-deep); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-caps); padding: 7px 14px; border-radius: var(--pill); margin: 0 0 22px; }
.xpill i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: block; }
.xh1 { font-family: var(--font-display); font-weight: var(--fw-h1); font-size: clamp(40px, 5vw, 64px); line-height: 1.06; letter-spacing: var(--ls-display); color: var(--ink-heading, var(--ink)); margin: 0 auto 18px; text-wrap: balance; }
.xh1 em { font-style: normal; color: var(--accent); }
/* Warm: the orange accent is 3.2:1 on the hero wash and about 2.3:1 under the glows; the deep
   accent is 5.3:1 there, 3.8:1 at the worst glow spot (large text needs 3). */
html[data-palette="warm"] .xh1 em { color: var(--accent-deep); }
.xlede { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.45; font-weight: 600; color: var(--slate); max-width: 64ch; margin: 0 auto 30px; text-wrap: balance; }
.xctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }

.xpanel { max-width: 600px; margin: 26px auto 0; }
/* The paste box's corner is the button's plus the 6px gap around it, so the two stay concentric. */
.paste { display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line-control); border-radius: calc(var(--r-btn) + 6px); padding: 6px 6px 6px 18px; width: min(600px, 100%); margin: 0 auto; box-shadow: var(--shadow-sm); transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.paste svg { flex-shrink: 0; color: var(--sub); }
.paste textarea {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px;
  padding: 10px 4px; resize: none; line-height: 1.4; max-height: 9.5em; overflow-y: auto; color: inherit;
}
.paste textarea::placeholder { color: var(--sub); }
.paste.is-tall { align-items: flex-end; }
.paste.is-tall > svg { align-self: flex-start; margin-top: 12px; }
.paste:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: var(--r-btn); min-height: var(--btn-h); padding: 0 var(--btn-px-lg); font-weight: 650; font-size: var(--fs-base); line-height: 1.2; cursor: pointer; background: var(--btn); color: var(--btn-ink); transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out); white-space: nowrap; }
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: scale(var(--press, .98)); }
.fine { font-size: 13.5px; font-weight: 500; color: var(--sub); margin: 10px auto 0; max-width: 60ch; min-height: 22px; }
.fine.is-error { color: var(--bad-ink); font-weight: 600; }

.xstage { position: relative; max-width: 1110px; height: 380px; margin: 34px auto 0; }
.xcard { position: absolute; z-index: 1; display: flex; align-items: center; gap: 16px; text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 24px 14px 14px; box-shadow: var(--shadow-sm); }
.xcard b { display: block; font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.xcard span { display: block; font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--slate); text-wrap: pretty; }
.xic { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex-shrink: 0; }
/* Feature cards answer the pointer: a small lift and tilt, the icon turning with it (fine
   pointers only; on touch a tapped card would stay lifted). They are not links, so the lift is
   kept small: it says "this is alive", not "click me". */
.xcard { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.xic { transition: transform var(--dur-3) var(--ease-spring); }
@media (hover: hover) and (pointer: fine) {
  .xcard:hover { transform: translateY(var(--lift)) rotate(-.6deg); box-shadow: var(--shadow); border-color: var(--accent-ring); }
  .xc3:hover, .xc4:hover { transform: translateY(var(--lift)) rotate(.6deg); }
  .xcard:hover .xic { transform: rotate(-8deg) scale(1.06); }
}
.xc1 { left: 24px; top: 14px; width: 290px; }
.xc2 { left: 0; top: 160px; width: 290px; }
.xc3 { right: 0; top: 12px; width: 300px; }
.xc4 { right: -28px; top: 168px; width: 300px; }

/* the robot: every colour a mix of the accent token (its shell stays light, its visor dark) */
.xbot { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 360px; height: 380px; }
.xglow { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 420px; height: 120px; border-radius: 50%; background: radial-gradient(ellipse, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%); }
.xsparks { position: absolute; inset: 0 auto auto 0; width: 360px; height: 300px; }
.xsparks path { fill: var(--accent); opacity: .55; }
.xpedestal { position: absolute; left: 20px; bottom: 6px; width: 320px; }
.xshadow { fill: color-mix(in srgb, var(--accent) 45%, #FFFFFF); }
.ps-a { stop-color: color-mix(in srgb, var(--accent) 6%, #FFFFFF); }
.ps-b { stop-color: color-mix(in srgb, var(--accent) 18%, #FFFFFF); }
.pt-a { stop-color: #FFFFFF; }
.pt-b { stop-color: color-mix(in srgb, var(--accent) 10%, #FFFFFF); }
.ped-ring { stroke: var(--accent); }
.sh-a { stop-color: #FFFFFF; }
.sh-b { stop-color: color-mix(in srgb, var(--accent) 6%, #FFFFFF); }
.sh-c { stop-color: color-mix(in srgb, var(--accent) 22%, #FFFFFF); }
.or-a { stop-color: color-mix(in srgb, var(--accent) 55%, #FFFFFF); }
.or-b { stop-color: var(--accent); }
.or-c { stop-color: color-mix(in srgb, var(--accent) 78%, #000000); }
.gl-a { stop-color: color-mix(in srgb, var(--accent) 14%, #101B30); }
.gl-b { stop-color: color-mix(in srgb, var(--accent) 4%, #060B16); }
.gl-c { stop-color: color-mix(in srgb, var(--accent) 10%, #0C1526); }
.rb-dark { fill: color-mix(in srgb, var(--accent) 12%, #0C1526); }
.rb-light { fill: #FFFFFF; }
.rb-face { stroke: #FFFFFF; }
/* The robot floats, one slow breath every --dur-float (8px up and back), its shadow narrowing as
   it rises, and blinks now and then. Idle motion that loops: very small and slow on purpose,
   paused while the hero is off screen (home.js `.is-off`) and off under reduced motion. */
.xrobot { position: absolute; left: 22px; top: 26px; width: 300px; }
.xshadow { transform-origin: 160px 88px; }
.rb-face path:nth-child(2), .rb-face path:nth-child(3) { transform-box: fill-box; transform-origin: 50% 60%; }
@media (prefers-reduced-motion: no-preference) {
  .xrobot { animation: xfloat var(--dur-float) var(--ease-in-out) infinite; }
  .xshadow { animation: xshadow var(--dur-float) var(--ease-in-out) infinite; }
  .rb-face path:nth-child(2), .rb-face path:nth-child(3) { animation: xblink calc(var(--dur-float) * 1.5) linear infinite; }
}
@keyframes xfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes xshadow { 0%, 100% { transform: scaleX(1); opacity: .45; } 50% { transform: scaleX(.9); opacity: .34; } }
@keyframes xblink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.12); } }

/* The hero's light: two soft glows (the accent and the support tint) drift behind it, very slowly,
   over the static wash. Transform only, paused off screen with the robot, still under reduced
   motion (the glows stay, they just do not move). */
.xtop::before, .xtop::after { content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; }
.xtop::before { left: -10%; top: -18%; width: min(760px, 80vw); aspect-ratio: 1.4;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent); }
.xtop::after { right: -12%; top: 4%; width: min(680px, 74vw); aspect-ratio: 1.3;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--band-mint-accent) 13%, transparent), transparent); }
@media (prefers-reduced-motion: no-preference) {
  .xtop::before { animation: xdrift-a var(--dur-drift) var(--ease-in-out) infinite alternate; }
  .xtop::after { animation: xdrift-b calc(var(--dur-drift) * 1.25) var(--ease-in-out) infinite alternate; }
  .xtop.is-off::before, .xtop.is-off::after, .xtop.is-off .xrobot, .xtop.is-off .xshadow,
  .xtop.is-off .rb-face path { animation-play-state: paused; }
}
@keyframes xdrift-a { to { transform: translate3d(7%, 5%, 0) scale(1.08); } }
@keyframes xdrift-b { to { transform: translate3d(-6%, 7%, 0) scale(.93); } }

/* The hero arrives in order, once: the pill, the headline, the line under it, the buttons, the
   paste box, then the cards around the robot. `backwards` only, so a card's hover lift is its own
   once it has landed. */
@media (prefers-reduced-motion: no-preference) {
  .xhero > .xpill, .xhero > .xh1, .xhero > .xlede, .xhero > .xctas, .xhero > .xpanel,
  .xstage > .xcard, .xstage > .xbot { animation: wz-rise var(--dur-reveal) var(--ease-out) backwards; }
  .xhero > .xh1 { animation-delay: var(--stagger); }
  .xhero > .xlede { animation-delay: calc(var(--stagger) * 2); }
  .xhero > .xctas { animation-delay: calc(var(--stagger) * 3); }
  .xhero > .xpanel { animation-delay: calc(var(--stagger) * 4); }
  .xstage > .xbot { animation-name: wz-fade-in; animation-delay: calc(var(--stagger) * 4); }
  .xstage > .xc1 { animation-delay: calc(var(--stagger) * 5); }
  .xstage > .xc3 { animation-delay: calc(var(--stagger) * 6); }
  .xstage > .xc2 { animation-delay: calc(var(--stagger) * 7); }
  .xstage > .xc4 { animation-delay: calc(var(--stagger) * 8); }
}

/* ===== sections: full-bleed bands, no rules between them; the band's colour is the edge =====
   Type scale below the hero: eyebrow 12.5px caps · two-tone section title · card title 18px ·
   body 15px. A section title is ONE heading: a dark first sentence, then `.hm-cont`, a short
   continuation in slate, instead of a grey paragraph underneath. */
.hm-sec { padding: 104px 24px; }
:where(.hm-sec) > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
/* A section on the page's own wash, between two bands (How it works): its white cards stand off it. */
.hm-wash { background-color: var(--bg); }
.hm-head { max-width: 840px; margin: 0 auto 52px; text-align: center; }
/* The section label above a headline: a readable pill on every public page (the owner, 2026-10-17:
   "Pricing" and "Mentor on Whizply" were too small at 12.5px caps). */
.hm-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 14px;
  border-radius: var(--pill); background: var(--accent-soft);
  font-size: var(--fs-lead); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-deep);
}
/* HEADINGS (2026-10-15): a section title is set in the heading ink (whizply.css --ink-heading, a
   deep indigo; the band's own on a band, white on navy) and its continuation in the band's link
   tone (a soft violet on navy); paragraphs stay in the slate subtext. 8:1 or more for the
   heading, 6:1 or more for the continuation, on every band in every palette. */
.hm-h1, .hm-h2 { font-family: var(--font-display); font-weight: var(--fw-h1); letter-spacing: var(--ls-display); color: var(--ink-heading, var(--ink)); margin: 0; text-wrap: balance; }
.hm-h1 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.08; }
.hm-h2 { font-size: clamp(30px, 3.3vw, 44px); line-height: 1.14; }
.hm-cont { color: var(--accent-deep); font-weight: 600; }
/* In the dark the link tone sits too close to the light heading ink: the brighter accent instead
   (6:1 or more on every dark ground). */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hm-cont { color: var(--accent); } }
:root[data-theme="dark"] .hm-cont { color: var(--accent); }
.hm-h3 { font-size: 18px; line-height: 1.3; font-weight: 700; letter-spacing: -.005em; color: var(--ink); margin: 0 0 8px; }

/* Entrance reveal: home-chrome.js adds .rv-wait to blocks that start below the fold (only once
   script runs, so without it nothing is hidden) and swaps it for .rv-in when they scroll in
   (ui.js `whenSeen`, the app's own observer helper); blocks already on screen are never hidden,
   so nothing flashes. Blocks arriving together follow one another (`--rv-i` steps of --stagger).
   .rv-in drops off once played, so a card's own hover transitions take over again. */
.rv-wait { opacity: 0; transform: translateY(var(--reveal-rise)); }
.rv-in, .bt.rv-in, .xcard.rv-in {
  transition: opacity var(--dur-reveal) var(--ease-out) calc(var(--rv-i, 0) * var(--stagger)),
              transform var(--dur-reveal) var(--ease-out) calc(var(--rv-i, 0) * var(--stagger));
}

/* ===== logo tiles: whizply.css ("logo tiles, shared"), with the app's mentor cards (logos.js).
   Only their sizes here (--lg), per context. ===== */

/* ===== "You don't have to track every dream company": careers pages fold into one feed =====
   Every card sits at the stage's centre and is placed by transform alone: --s* is its spot in the
   loose pile (the start), --d* its spot in the deck behind the feed (the end, which is also the
   still state). Spread positions are fractions of the stage's width (cqi), so the pile fits any
   width. The stage has a fixed height: swapping in real companies cannot move anything. */
.ts-body { max-width: 1080px; margin: 0 auto; }
.ts-stage { --tw: 228px; --th: 142px; --feed-w: 440px; --feed-top: 112px; --ds: .8;
  position: relative; height: 460px; container-type: inline-size; overflow: clip; }
.ts-tabs { position: absolute; inset: 0; }
.ts-tab { position: absolute; left: 50%; top: 50%; width: var(--tw); height: var(--th); margin: calc(var(--th) / -2) 0 0 calc(var(--tw) / -2);
  display: flex; flex-direction: column; gap: 8px; padding: 0 12px 12px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
  transform: translate(var(--dx), var(--dy)) rotate(var(--dr)) scale(var(--ds)); }
.ts-tab:nth-child(1) { --sx: -33cqi; --sy: -104px; --sr: -4deg; --dx: -78px; --dy: -122px; --dr: -10deg; }
.ts-tab:nth-child(2) { --sx: 0cqi;   --sy: -116px; --sr: 2deg;  --dx: -47px; --dy: -134px; --dr: -6deg; }
.ts-tab:nth-child(3) { --sx: 33cqi;  --sy: -100px; --sr: 5deg;  --dx: -16px; --dy: -140px; --dr: -2deg; }
.ts-tab:nth-child(4) { --sx: -32cqi; --sy: 110px;  --sr: 3deg;  --dx: 16px;  --dy: -140px; --dr: 2deg; }
.ts-tab:nth-child(5) { --sx: 1cqi;   --sy: 114px;  --sr: -2deg; --dx: 47px;  --dy: -134px; --dr: 6deg; }
.ts-tab:nth-child(6) { --sx: 33cqi;  --sy: 104px;  --sr: -5deg; --dx: 78px;  --dy: -122px; --dr: 10deg; }
.ts-tab__bar { display: flex; gap: 5px; padding-top: 10px; }
.ts-tab__bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-ring); }
.ts-tab__head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ts-tab .lg-tile { --lg: 28px; border-radius: var(--r-xs); }
.ts-tab__name { display: grid; min-width: 0; line-height: 1.25; }
.ts-tab__name b { font-size: 13.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-tab__name span { font-size: 11.5px; color: var(--sub); }
.ts-tab__search { display: block; height: 12px; border-radius: var(--pill); border: 1px solid var(--line); background: var(--band); }
.ts-tab__line { display: block; height: 7px; border-radius: var(--pill); background: var(--skel); }
.ts-tab__line:nth-of-type(1) { width: 92%; }
.ts-tab__line:nth-of-type(2) { width: 70%; }
.ts-tab__line:nth-of-type(3) { width: 82%; }
.ts-feed { position: absolute; z-index: 2; left: 0; right: 0; top: var(--feed-top); width: var(--feed-w); max-width: calc(100% - 16px); margin: 0 auto; padding: 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.ts-feed__head { display: flex; align-items: center; gap: 12px; padding: 2px 4px 12px; border-bottom: 1px solid var(--line); }
.ts-feed__mark { width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--r-sm); background: var(--btn-accent); color: var(--btn-accent-ink); display: grid; place-items: center; }
.ts-feed__title { flex: 1; display: grid; min-width: 0; line-height: 1.3; }
.ts-feed__title b { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.ts-feed__title span { font-size: 13px; color: var(--sub); }
.ts-feed__rank { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ok-ink); background: var(--ok); padding: 4px 10px; border-radius: var(--pill); white-space: nowrap; }
.ts-rows { list-style: none; margin: 0; padding: 10px 0 0; display: grid; gap: 8px; }
.ts-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 12px 9px 10px; border-radius: var(--r-md); background: var(--band); }
.ts-row .lg-tile { --lg: 36px; border-radius: var(--r-sm); }
.ts-row__txt { display: grid; min-width: 0; line-height: 1.3; }
.ts-row__txt b { font-size: 14.5px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-row__txt span { font-size: 12.5px; color: var(--sub); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-new { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--ok-ink); background: var(--ok); padding: 3px 9px; border-radius: var(--pill); }
.ts-feed__foot { margin: 10px 4px 0; font-size: 12.5px; color: var(--sub); }
.ts-steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ts-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 18px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .ts-steps li:hover { transform: translateY(var(--lift)); box-shadow: var(--shadow); } }
.ts-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--btn-accent); color: var(--btn-accent-ink); font-weight: 700; font-size: 14px; }
.ts-steps b { display: block; font-size: 15px; line-height: 1.35; color: var(--ink); margin-bottom: 4px; }
.ts-steps li > span:last-child > span { display: block; font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--slate); }
.ts-calc { margin: 28px auto 0; text-align: center; font-size: 16px; font-weight: 600; color: var(--slate); text-wrap: balance; }
@keyframes ts-fold {
  from { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)) scale(1); }
  to { transform: translate(var(--dx), var(--dy)) rotate(var(--dr)) scale(var(--ds)); }
}
@keyframes ts-feed-in { from { opacity: 0; transform: translateY(40px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes ts-row-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes ts-num-on { from { background: var(--accent-soft); color: var(--accent-deep); } to { background: var(--btn-accent); color: var(--btn-accent-ink); } }
@media (prefers-reduced-motion: no-preference) {
  /* Scroll-driven: the visitor's scrolling is the only clock. `cover` ranges, so the timing holds
     whether the block is shorter than the screen (desktop) or about as tall (a phone). */
  @supports (animation-timeline: view()) {
    .ts-body { view-timeline: --ts block; }
    .ts-tab, .ts-feed, .ts-row, .ts-num { animation-fill-mode: both; animation-timeline: --ts; }
    .ts-tab { animation-name: ts-fold; animation-timing-function: var(--ease-in-out); }
    .ts-tab:nth-child(1) { animation-range: cover 22% cover 42%; }
    .ts-tab:nth-child(2) { animation-range: cover 23% cover 43%; }
    .ts-tab:nth-child(3) { animation-range: cover 24% cover 44%; }
    .ts-tab:nth-child(4) { animation-range: cover 25% cover 45%; }
    .ts-tab:nth-child(5) { animation-range: cover 26% cover 46%; }
    .ts-tab:nth-child(6) { animation-range: cover 27% cover 47%; }
    .ts-feed { animation-name: ts-feed-in; animation-timing-function: var(--ease-out); animation-range: cover 32% cover 46%; }
    .ts-row { animation-name: ts-row-in; animation-timing-function: var(--ease-out); }
    .ts-row:nth-child(1) { animation-range: cover 40% cover 47%; }
    .ts-row:nth-child(2) { animation-range: cover 43% cover 50%; }
    .ts-row:nth-child(3) { animation-range: cover 46% cover 53%; }
    .ts-num { animation-name: ts-num-on; animation-timing-function: linear; }
    .ts-steps li:nth-child(1) .ts-num { animation-range: cover 20% cover 24%; }
    .ts-steps li:nth-child(2) .ts-num { animation-range: cover 28% cover 32%; }
    .ts-steps li:nth-child(3) .ts-num { animation-range: cover 36% cover 40%; }
    .ts-steps li:nth-child(4) .ts-num { animation-range: cover 44% cover 48%; }
  }
  /* No scroll timelines: home.js arms the pile while it is below the fold, then plays it ONCE
     (about 1.5 s) as it comes into view. */
  @supports not (animation-timeline: view()) {
    .ts.is-armed .ts-tab { transform: translate(var(--sx), var(--sy)) rotate(var(--sr)); }
    .ts.is-armed .ts-feed, .ts.is-armed .ts-row { opacity: 0; }
    .ts.is-armed .ts-num { background: var(--accent-soft); color: var(--accent-deep); }
    .ts.is-playing .ts-tab { animation: ts-fold 1.1s var(--ease-in-out) both; }
    .ts.is-playing .ts-tab:nth-child(2) { animation-delay: 60ms; }
    .ts.is-playing .ts-tab:nth-child(3) { animation-delay: 120ms; }
    .ts.is-playing .ts-tab:nth-child(4) { animation-delay: 180ms; }
    .ts.is-playing .ts-tab:nth-child(5) { animation-delay: 240ms; }
    .ts.is-playing .ts-tab:nth-child(6) { animation-delay: 300ms; }
    .ts.is-playing .ts-feed { animation: ts-feed-in .6s var(--ease-out) .5s both; }
    .ts.is-playing .ts-row { animation: ts-row-in .4s var(--ease-out) .85s both; }
    .ts.is-playing .ts-row:nth-child(2) { animation-delay: .95s; }
    .ts.is-playing .ts-row:nth-child(3) { animation-delay: 1.05s; }
    .ts.is-playing .ts-num { animation: ts-num-on .3s var(--ease-out) both; }
    .ts.is-playing .ts-steps li:nth-child(2) .ts-num { animation-delay: .35s; }
    .ts.is-playing .ts-steps li:nth-child(3) .ts-num { animation-delay: .7s; }
    .ts.is-playing .ts-steps li:nth-child(4) .ts-num { animation-delay: 1.05s; }
  }
}

@keyframes tfitem { from { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ===== features bento ===== */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bt { position: relative; isolation: isolate; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); scroll-margin-top: 24px;
  transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
/* A light glows in from the card's top edge on hover (opacity only), in the band's accent: on the
   navy band a soft violet. With a small lift; fine pointers only. */
.bt::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--accent) 34%, transparent), transparent 72%);
  opacity: 0; transition: opacity var(--dur-3) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .bt:hover { transform: translateY(var(--lift)); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); box-shadow: var(--shadow); }
  .bt:hover::before { opacity: 1; }
}
.bt--wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.bt p { margin: 0; font-size: 15px; line-height: 1.6; font-weight: 500; color: var(--slate); }
/* The kicker is a chip; on the navy band a vivid one, the band's accent under its own ground
   colour (5.3:1 Violet light, 6.4 dark; 7.2 and 7.1 in Warm). */
.bt-kicker { display: inline-flex; align-self: flex-start; margin-bottom: 12px; padding: 4px 10px; border-radius: var(--pill); background: var(--accent-soft); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.wz-band--navy .bt-kicker { background: var(--accent); color: var(--bg); }
.bt-vis { margin-top: auto; padding-top: 20px; }
.bt--wide .bt-vis { margin-top: 0; padding-top: 0; }

.vis-follow { display: grid; gap: 8px; }
.vf-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.vf-logo { width: 32px; height: 32px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--btn); color: var(--btn-ink); font-weight: 800; font-size: 14px; }
.vf-name { flex: 1; font-weight: 650; font-size: 14.5px; }
.vf-new { font-size: 12px; font-weight: 700; color: var(--ok-ink); background: var(--ok); padding: 4px 10px; border-radius: var(--pill); }
.vf-quiet { font-size: 12px; color: var(--sub); }
.vf-msg { margin-top: 4px; display: grid; gap: 3px; padding: 12px 14px; border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-xs); background: var(--band); border-left: 3px solid var(--accent); }
.vf-msg b { font-size: 12px; color: var(--sub); font-weight: 700; }
.vf-msg span { font-size: 14px; color: var(--ink); }
.vf-msg em { font-style: normal; font-weight: 700; }

.vis-match { display: grid; gap: 10px; }
.vm-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 28px; align-items: center; gap: 10px; font-size: 13px; color: var(--sub); }
.vm-row i { height: 8px; border-radius: var(--pill); background: var(--accent-soft); position: relative; overflow: hidden; }
.vm-row i::after { content: ""; position: absolute; inset: 0; border-radius: var(--pill); background: var(--accent); transform-origin: left; transition: transform .9s var(--ease-out) .2s; }
.vm-row:nth-child(1) i::after { transform: scaleX(.91); }
.vm-row:nth-child(2) i::after { transform: scaleX(.84); }
.vm-row:nth-child(3) i::after { transform: scaleX(.76); }
.rv-wait .vm-row i::after { transform: scaleX(0); }
.vm-row b { color: var(--ink); text-align: right; }

.vis-bars { display: flex; align-items: flex-end; gap: 10px; height: 110px; }
.vis-bars i { flex: 1; border-radius: var(--r-xs) var(--r-xs) 2px 2px; background: linear-gradient(180deg, var(--accent), var(--accent-ring)); transform-origin: bottom; transition: transform .9s var(--ease-out); }
.vis-bars i:nth-child(1) { height: 92%; } .vis-bars i:nth-child(2) { height: 74%; transition-delay: .08s; }
.vis-bars i:nth-child(3) { height: 60%; transition-delay: .16s; } .vis-bars i:nth-child(4) { height: 46%; transition-delay: .24s; }
.vis-bars i:nth-child(5) { height: 32%; transition-delay: .32s; }
.rv-wait .vis-bars i { transform: scaleY(.1); }

.vis-score { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.vs-was { font-family: var(--font-sans); font-weight: 700; font-size: 30px; font-variant-numeric: lining-nums tabular-nums; letter-spacing: var(--ls-num); color: var(--sub); text-decoration: line-through; text-decoration-color: var(--dash); }
.vs-arrow { color: var(--accent); font-size: 22px; }
.vs-now { font-family: var(--font-sans); font-size: 44px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums; letter-spacing: var(--ls-num); color: var(--accent-deep); line-height: 1; }
.vs-cap { width: 100%; font-size: 13px; font-weight: 500; color: var(--slate); }

.vis-check { list-style: none; margin: 0; padding-left: 0; display: grid; gap: 8px; }
.vis-check li { position: relative; padding: 8px 12px 8px 40px; border-radius: var(--r-sm); background: var(--band); font-size: 14px; font-weight: 600; }
.vis-check li::before { content: "✓"; position: absolute; left: 12px; top: 9px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--ok); color: var(--ok-ink); }
.vis-check li.no::before { content: "!"; background: var(--accent-soft); color: var(--accent-deep); }

.vis-people { display: flex; align-items: center; }
.vis-people span { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--accent-soft); color: var(--accent-deep); border: 3px solid var(--surface); margin-right: -10px; }
.vis-people span:nth-child(2) { background: var(--hl); }
.vis-people span:nth-child(3) { background: var(--ok); color: var(--ok-ink); }
.vis-people em { margin-left: 22px; font-style: normal; font-size: 13.5px; font-weight: 650; color: var(--ink); }

.vis-early { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.vis-early li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); background: var(--band); font-size: 13.5px; }
.vis-early span { font-weight: 650; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vis-early em { font-style: normal; font-size: 12px; color: var(--sub); }
.vis-early b { font-size: 11.5px; font-weight: 700; color: var(--ok-ink); background: var(--ok); padding: 3px 9px; border-radius: var(--pill); }
.vis-early li.old { opacity: .55; }
.vis-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vis-track li { display: grid; gap: 4px; padding: 14px 12px; border-radius: var(--r-md); background: var(--band); font-size: 13px; color: var(--sub); font-weight: 600; }
.vis-track b { font-family: var(--font-sans); font-weight: 700; font-size: 28px; font-variant-numeric: lining-nums tabular-nums; letter-spacing: var(--ls-num); color: var(--ink); line-height: 1; }
.vis-track li.on { background: var(--btn-accent); color: var(--btn-accent-ink); }
.vis-track li.on b { color: var(--btn-accent-ink); }

/* ===== live market ===== */
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok-ink); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok-ink) 50%, transparent); animation: livepulse 2s ease-out 2; }
@keyframes livepulse { 70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok-ink) 0%, transparent); } 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok-ink) 0%, transparent); } }

/* the three figures, each on its own white tile (no rules between them) */
.lv-stats { display: flex; justify-content: center; gap: 16px; max-width: 960px; margin: 0 auto 60px; }
.lv-stats > div { flex: 1 1 0; max-width: 320px; display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; padding: 26px 12px; text-align: center; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.lv-stats dd { margin: 0; font-family: var(--font-sans); font-weight: 800; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.05; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; letter-spacing: var(--ls-num); }
.lv-stats dt { font-size: 15px; font-weight: 600; color: var(--slate); }

/* The moving rows (home.js builds the clones and sets --mq-shift, one group's width, and
   --mq-dur, that width at a fixed speed). The group's trailing gap is padding, so a group is
   exactly one period of the loop and the seam never shows. */
.mq-block + .mq-block { margin-top: 30px; }
.mq-label { margin: 0 0 14px; font-size: 12.5px; font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--sub); text-align: center; }
.mq { position: relative; overflow-x: clip; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.mq-track { display: flex; width: max-content; }
.mq-group { display: flex; flex-shrink: 0; align-items: center; gap: var(--mq-gap); margin: 0; padding: 10px var(--mq-gap) 18px 0; list-style: none; }
.mq-item { flex-shrink: 0; }
@keyframes mq-ltr { from { transform: translate3d(calc(var(--mq-shift, 0px) * -1), 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes mq-rtl { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(var(--mq-shift, 0px) * -1), 0, 0); } }
@media (prefers-reduced-motion: no-preference) {
  .mq.is-ready .mq-track { will-change: transform; animation: mq-ltr var(--mq-dur, 60s) linear infinite; }
  .mq--rtl.is-ready .mq-track { animation-name: mq-rtl; }
  .mq:hover .mq-track, .mq:focus-within .mq-track, .mq.is-off .mq-track, .mq.is-paused .mq-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  /* a still, wrapped row: one list, no copies, nothing faded out at the edges */
  .mq { overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .mq-track { width: auto; }
  .mq-group { flex: 1; flex-wrap: wrap; justify-content: center; padding: 4px 0 8px; }
  .mq-clone { display: none; }
  .mq-ctrl { display: none; }
}
/* Pause / Play for both rows (home.js `setupMotionToggle`, WCAG 2.2.2): small, at the rows' top
   right, before them in the tab order. The glyph is two bars, or a triangle once paused. */
.mq-ctrl { display: flex; justify-content: flex-end; max-width: 1200px; margin: -10px auto 10px; padding: 0 4px; }
.mq-toggle {
  display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px;
  border: 1px solid var(--line-control); border-radius: var(--r-btn-sm, 8px); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 650; line-height: 1; cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.mq-toggle:hover { border-color: var(--ink); }
.mq-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mq-toggle__glyph { width: 10px; height: 10px; box-sizing: border-box; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.mq-toggle.is-paused .mq-toggle__glyph { width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 9px solid currentColor; border-right: 0; }

/* A company card, like a customer-logo row: the company's own logo in its own colours over its
   field. A wordmark that spells the name stands alone (the name is still in the text, for
   assistive tech); a symbol, or a badge too small to read, has the name printed beside it; with
   no logo, the square tile (or monogram) and the name. The logo sits on a light plate, the same
   white as the tiles: invisible on a light card, and on a dark card it keeps a black wordmark
   (Nike, VML) visible without recolouring it. Every logo line is the same height, so the row is
   even. On hover or focus the card lifts, the logo grows a little and the field gives way to
   "N open roles →". The logo's box (`width`/`height`, and `--h` for the phone size) is the
   manifest's. */
.lg-card { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 150px; padding: 12px 20px 10px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); color: var(--ink); text-align: center; transition: transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.lg-card__art { display: flex; align-items: center; justify-content: center; gap: 10px; height: 42px; max-width: 240px; }
.lg-card__plate { display: grid; place-items: center; padding: 3px 6px; border-radius: var(--r-xs); background: var(--logo-tile); transition: transform var(--dur-2) var(--ease-spring); }
.lg-card__plate img { display: block; max-width: none; }
/* On a dark card the plate shows, so it gets room around the logo (still within the line). */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lg-card__plate { padding: 4px 9px; } }
:root[data-theme="dark"] .lg-card__plate { padding: 4px 9px; }
.lg-card .lg-tile { --lg: 30px; border-radius: var(--r-xs); transition: transform var(--dur-2) var(--ease-spring); }
.lg-card__name { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 700; color: var(--ink); }
.lg-card__swap { display: grid; justify-items: center; font-size: 13px; line-height: 1.3; white-space: nowrap; }
.lg-card__swap > span { grid-area: 1 / 1; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.lg-card__field { color: var(--sub); font-weight: 500; }
.lg-card__more { color: var(--accent-deep); font-weight: 700; font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(7px); }
.lg-card:hover, .lg-card:focus-visible { transform: translateY(var(--lift, -2px)); border-color: var(--accent); box-shadow: var(--shadow); }
.lg-card:focus-visible { border-radius: var(--r-lg); }
.lg-card:hover .lg-card__plate, .lg-card:focus-visible .lg-card__plate { transform: scale(1.06); }
.lg-card:hover .lg-tile, .lg-card:focus-visible .lg-tile { transform: rotate(-7deg) scale(1.08); }
.lg-card:hover .lg-card__field, .lg-card:focus-visible .lg-card__field { opacity: 0; transform: translateY(-7px); }
.lg-card:hover .lg-card__more, .lg-card:focus-visible .lg-card__more { opacity: 1; transform: none; }
/* A skill chip: the skill and its share of job posts. */
.sk-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-radius: var(--pill); background: var(--surface); border: 1px solid var(--line); white-space: nowrap; }
.sk-chip b { font-size: 15px; font-weight: 700; color: var(--ink); }
.sk-chip > span { font-size: 13px; font-weight: 700; color: var(--accent-deep); font-variant-numeric: tabular-nums; }

.mk-explore { margin-top: 60px; }
.mk-fields { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 26px; }
.mk-field { display: inline-flex; align-items: baseline; gap: 8px; padding: 9px 16px; border-radius: var(--pill); border: 1px solid var(--line-control); background: var(--surface); color: var(--ink); font: inherit; font-size: 14.5px; font-weight: 650; cursor: pointer; transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.mk-field small { font-size: 12.5px; font-weight: 500; color: var(--sub); }
.mk-field:hover { border-color: var(--accent); }
.mk-field[aria-selected="true"] { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent); }
.mk-field[aria-selected="true"] small { color: inherit; }
.mk-panel { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; outline: none; }
/* The tab panel takes focus (tabindex 0, so its lists can be reached and scrolled): a keyboard
   user sees where it is. */
.mk-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--r-lg); }
.mk-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 26px; box-shadow: var(--shadow-sm); }
.mk-card .hm-h3 { margin-bottom: 16px; }
.mk-skills, .mk-hiring { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.mk-skill { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr) 46px; align-items: center; gap: 12px; font-size: 14.5px; }
.mk-skill b { font-weight: 650; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-track { height: 10px; border-radius: var(--pill); background: var(--accent-soft); overflow: hidden; }
.mk-track i { display: block; height: 100%; width: 0; border-radius: var(--pill); background: linear-gradient(90deg, var(--accent-ring), var(--accent)); transition: width .9s var(--ease-out); }
.mk-skill span { text-align: right; font-size: 13px; font-weight: 600; color: var(--slate); font-variant-numeric: tabular-nums; }
.mk-hire { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.mk-hire:last-child { border-bottom: 0; padding-bottom: 0; }
.mk-hire--empty { display: block; color: var(--sub); font-size: 14.5px; }
.mk-hire .lg-tile { --lg: 32px; border-radius: var(--r-xs); }
.mk-hire b { font-weight: 650; font-size: 15px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-hire span { font-size: 13px; font-weight: 600; color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mk-skills li, .mk-hiring li { animation: tfitem .45s var(--ease-out) both; }
.mk-skills li:nth-child(2), .mk-hiring li:nth-child(2) { animation-delay: .06s; }
.mk-skills li:nth-child(3), .mk-hiring li:nth-child(3) { animation-delay: .12s; }
.mk-skills li:nth-child(4), .mk-hiring li:nth-child(4) { animation-delay: .18s; }
.mk-skills li:nth-child(5), .mk-hiring li:nth-child(5) { animation-delay: .24s; }
.mk-skills li:nth-child(6) { animation-delay: .3s; }

/* ===== contact ===== */
.ct { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
.ct-copy .hm-h2 { text-align: left; }
.ct-mail { margin: 26px 0 0; font-size: 18px; font-weight: 600; color: var(--slate); }
.ct-mail a, .ct-alt a, .faq-more a:not(.xbtn) { color: var(--accent-deep); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.ct-alt { margin: 10px 0 0; font-size: 15px; font-weight: 500; color: var(--slate); }
.ct-form { display: grid; gap: 18px; padding: 28px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.ct-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.ct-field { display: grid; gap: 7px; align-content: start; }
.ct-field label { font-size: 14px; font-weight: 700; color: var(--ink); }
.ct-field input, .ct-field textarea { width: 100%; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line-control); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font-size: 15px; line-height: 1.45; transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.ct-field textarea { min-height: 136px; resize: vertical; }
.ct-field input:focus, .ct-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.ct-field [aria-invalid="true"], .ct-field [aria-invalid="true"]:focus { border-color: var(--bad-ink); }
.ct-field [aria-invalid="true"]:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad-ink) 22%, transparent); }
.ct-err { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--bad-ink); }
.ct-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.ct-status { flex: 1 1 240px; margin: 0; font-size: 14px; font-weight: 600; color: var(--slate); }
/* A live region (role="status"): it must stay rendered, or what is written into it later is never
   announced. While empty it is visually hidden (so it takes no room in the row), not removed. */
.ct-status:empty {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; flex: none;
}
.ct-status.is-ok { color: var(--ok-ink); }
.ct-status.is-error { color: var(--bad-ink); }

/* ===== FAQ (its own page, /faq) ===== */
.hm-faq { padding-top: 88px; }
.faq { max-width: 860px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); }
.faq details:hover { border-color: var(--line-strong); }
.faq details[open] { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-size: 16.5px; font-weight: 700; cursor: pointer; border-radius: var(--r-md); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 9px; height: 9px; flex-shrink: 0; border-right: 2px solid var(--accent-deep); border-bottom: 2px solid var(--accent-deep); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--dur-2) var(--ease-out); }
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq details p { margin: 0; padding: 0 22px 20px; max-width: 70ch; font-size: 15.5px; line-height: 1.65; font-weight: 500; color: var(--slate); }
/* On the soft violet band (faq.html sets `.wz-band--violet`), so its text takes the band's ink. */
.faq-more { max-width: 860px; margin: 28px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 22px 24px; border-radius: var(--r-lg); }
.faq-more p { margin: 0; display: grid; gap: 2px; font-size: 15px; font-weight: 500; color: var(--slate); }
.faq-more b { font-size: 16.5px; font-weight: 700; color: var(--ink); }

/* ===== become a mentor (/mentor, and the home page's "Become a mentor" band) =====
   The hero is the violet band with three example requests beside the copy; then "What mentoring
   is" (three tinted cards on the wash), "Who can apply" (the mint band, a check list), and "How
   approval works" (four numbered steps, three questions, a closing call). Every colour is a token,
   so the page follows Violet, Warm and dark. */
.mn-hero { padding-top: 88px; padding-bottom: 96px; }
.mn-hero__in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.mn-hero__copy .hm-h1 { text-align: left; }
.mn-lede { margin: 22px 0 0; max-width: 56ch; font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; font-weight: 600; color: var(--slate); }
.mn-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.mn-signin { font-size: 15.5px; font-weight: 700; color: var(--accent-deep); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.mn-fine { margin: 18px 0 0; font-size: 14px; font-weight: 600; color: var(--sub); }
.mn-hero__cards { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.mn-req {
  display: grid; gap: 6px; padding: 18px 20px; border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm); transform: rotate(-1deg);
}
.mn-req--b { transform: translateX(22px) rotate(1deg); }
.mn-req--c { transform: rotate(-.5deg); }
.mn-req__who { font-size: 13px; font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--sub); }
.mn-req__goal { font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.mn-req__tag { justify-self: start; padding: 3px 10px; border-radius: var(--pill); background: var(--accent-soft); color: var(--accent-ink); font-size: 12.5px; font-weight: 700; }
.mn-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.mn-card { padding: 26px; border-radius: var(--r-lg); }
.mn-card p { margin: 0; font-size: 15px; line-height: 1.6; font-weight: 500; color: var(--slate); }
.mn-card--violet { background: var(--band-violet-bg); }
.mn-card--mint { background: var(--band-mint-bg); }
.mn-card--sky { background: color-mix(in srgb, var(--info, var(--accent)) 12%, var(--surface)); }
.mn-card__ic {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; border-radius: 50%;
  background: var(--surface); color: var(--accent-deep); box-shadow: var(--shadow-sm);
}
.mn-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.mn-split__copy .hm-h2 { text-align: left; }
.mn-checks { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mn-checks li {
  position: relative; display: grid; gap: 3px; padding: 16px 18px 16px 54px; border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.mn-checks li::before {
  content: ""; position: absolute; left: 18px; top: 18px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.mn-checks b { font-size: 16.5px; font-weight: 700; color: var(--ink); }
.mn-checks span { font-size: 14.5px; line-height: 1.5; font-weight: 500; color: var(--slate); }
.mn-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 auto 48px; padding: 0; list-style: none; counter-reset: none; }
.mn-steps li { padding: 22px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.mn-steps p { margin: 0; font-size: 14.5px; line-height: 1.6; font-weight: 500; color: var(--slate); }
.mn-steps__n {
  display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 50%;
  background: var(--btn-accent); color: var(--btn-accent-ink); font-weight: 800; font-size: 15px;
}
.mn-faq { margin-bottom: 0; }
.mn-close { margin-top: 28px; }
.mn-home .mn-ctas { margin-top: 26px; }
@media (max-width: 1000px) {
  .mn-hero__in, .mn-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .mn-grid { grid-template-columns: minmax(0, 1fr); }
  .mn-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mn-req--b { transform: rotate(1deg); }
}
@media (max-width: 640px) {
  .mn-hero { padding-top: 48px; padding-bottom: 60px; }
  .mn-steps { grid-template-columns: minmax(0, 1fr); }
  .mn-ctas .xbtn { width: 100%; }
}

/* ===== footer ===== */
.hm-foot { background: transparent; padding: 64px 24px 30px; }
.hm-foot__in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.2fr); gap: 40px; }
.hm-foot__logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.hm-foot__logo span { font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--ink); }
.hm-foot__brand p { margin: 12px 0 14px; font-size: 14.5px; line-height: 1.6; font-weight: 500; color: var(--slate); max-width: 36ch; }
.hm-foot__mail { font-size: 14.5px; font-weight: 700; color: var(--accent-deep); }
.hm-foot__mail:hover { text-decoration: underline; }
.hm-foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.hm-foot__cols h2 { margin: 0 0 14px; font-family: inherit; font-size: 12.5px; font-weight: 700; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--ink); }
.hm-foot__cols a { display: block; padding: 5px 0; font-size: 14.5px; font-weight: 500; color: var(--slate); }
.hm-foot__cols a:hover, .hm-foot__cols a[aria-current="page"] { color: var(--accent-deep); }
.hm-foot__base { max-width: 1180px; margin: 44px auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 13px; color: var(--sub); }
.hm-foot__base span:last-child { max-width: 82ch; }

/* ===== responsive ===== */
@media (max-width: 1180px) {
  .xc1 { left: 36px; } .xc2 { left: 14px; } .xc3 { right: 14px; } .xc4 { right: 14px; }
}
@media (max-width: 1099px) {          /* below this the links no longer fit on one line: the menu takes them */
  .xlinks { display: none; }
  .xburger { display: inline-grid; }
}
@media (max-width: 1000px) {
  .xstage { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-top: 390px; }
  .xcard { position: static; width: auto; }
  .xbot { top: 0; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bt--wide { grid-column: span 2; }
  .mk-panel { grid-template-columns: minmax(0, 1fr); }
  .ts-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hm-foot__in { grid-template-columns: minmax(0, 1fr); }
}
/* The pile of careers pages, two columns wide: narrower cards in three rows, the same deck. */
@media (max-width: 760px) {
  .ts-stage { --tw: 150px; --th: 100px; --feed-w: 360px; --feed-top: 150px; --ds: .78; height: 470px; }
  .ts-tab { gap: 6px; padding: 0 9px 9px; border-radius: var(--r-md); }
  .ts-tab:nth-child(1) { --sx: -25cqi; --sy: -150px; --sr: -4deg; --dx: -54px; --dy: -112px; --dr: -10deg; }
  .ts-tab:nth-child(2) { --sx: 25cqi;  --sy: -160px; --sr: 3deg;  --dx: -32px; --dy: -122px; --dr: -6deg; }
  .ts-tab:nth-child(3) { --sx: -26cqi; --sy: -12px;  --sr: 3deg;  --dx: -11px; --dy: -128px; --dr: -2deg; }
  .ts-tab:nth-child(4) { --sx: 24cqi;  --sy: 0px;    --sr: -3deg; --dx: 11px;  --dy: -128px; --dr: 2deg; }
  .ts-tab:nth-child(5) { --sx: -24cqi; --sy: 140px;  --sr: -2deg; --dx: 32px;  --dy: -122px; --dr: 6deg; }
  .ts-tab:nth-child(6) { --sx: 26cqi;  --sy: 150px;  --sr: 4deg;  --dx: 54px;  --dy: -112px; --dr: 10deg; }
  .ts-tab__bar { padding-top: 7px; }
  .ts-tab__bar i { width: 6px; height: 6px; }
  .ts-tab .lg-tile { --lg: 22px; }
  .ts-tab__name b { font-size: 12px; }
  .ts-tab__name span { font-size: 10.5px; }
  .ts-tab__search { height: 9px; }
  .ts-tab__line { height: 6px; }
  .ts-tab__line:nth-of-type(3) { display: none; }
  .ts-feed { padding: 12px; }
  .ts-row { gap: 10px; padding: 8px 10px 8px 8px; }
}
/* A phone keeps the feed's title on one line; the foot already says it is ranked. */
@media (max-width: 420px) {
  .ts-feed__rank { display: none; }
}
@media (max-width: 640px) {
  .xnav { min-height: 64px; padding: 10px 14px; gap: 12px; }
  .xbrand { gap: 8px; }
  .xbrand span { font-size: 22px; }
  .xbrand svg { width: 30px; height: 27px; }
  .xnav .xbtn { min-height: var(--btn-h-sm); padding: 0 var(--btn-px); border-radius: var(--r-btn-sm); font-size: var(--fs-sm); gap: 6px; }
  .xnav .xbtn svg { display: none; }
  .xhero { padding: 48px 18px 56px; }
  .xstage { grid-template-columns: minmax(0, 1fr); padding-top: 360px; }
  .xbot { transform: translateX(-50%) scale(.9); transform-origin: top center; }
  .xctas .xbtn { width: 100%; }
  .paste { flex-wrap: wrap; border-radius: calc(var(--r-btn) + 8px); padding: 8px; }
  .paste svg { margin-left: 10px; }
  .paste .btn { width: 100%; justify-content: center; }
  .hm-sec { padding: 68px 18px; }
  body.hm { background-size: 100% 900px; }
  .hm-faq { padding-top: 52px; }
  .hm-head { margin-bottom: 34px; }
  .lv-stats { margin-bottom: 40px; gap: 8px; }
  .lv-stats > div { padding: 18px 4px; border-radius: var(--r-md); }
  .lv-stats dd { font-size: 28px; }
  .lv-stats dt { font-size: 13px; line-height: 1.3; }
  /* one swipeable row of fields instead of a tall stack of pills */
  .mk-explore { margin-top: 44px; }
  .mk-fields { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: 18px; scrollbar-width: none; margin: 0 -18px 22px; padding: 2px 18px 6px; }
  .mk-fields::-webkit-scrollbar { display: none; }
  .mk-field { flex-shrink: 0; scroll-snap-align: start; }
  .mq-block { margin-left: -18px; margin-right: -18px; }
  :root { --mq-gap: 10px; }
  .lg-card { min-width: 128px; padding: 10px 14px 8px; gap: 5px; }
  .lg-card__art { height: 38px; gap: 8px; }
  .lg-card__plate img { width: auto; height: calc(var(--h, 30) * .85px); }
  .lg-card .lg-tile { --lg: 26px; }
  .lg-card__name { font-size: 14px; max-width: 150px; }
  .lg-card__swap { font-size: 12.5px; }
  .sk-chip { padding: 8px 14px; }
  .sk-chip b { font-size: 14px; }
  .ts-steps { grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 20px; }
  .ts-steps li { padding: 12px 14px; }
  .ts-calc { font-size: 15px; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bt--wide { grid-column: auto; grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .vis-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-skill { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 38px; gap: 10px; }
  .ct-form { padding: 20px; }
  .ct-row { grid-template-columns: minmax(0, 1fr); }
  .ct-actions .xbtn { width: 100%; }
  .hm-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .xrobot, .xshadow, .live-dot, .rb-face path, .xtop::before, .xtop::after { animation: none; }
  .xcard:hover, .xc3:hover, .xc4:hover, .xcard:hover .xic, .bt:hover, .ts-steps li:hover { transform: none; }
  .rv-wait { opacity: 1; transform: none; }
  .rv-in, .mk-track i, .vis-bars i, .vm-row i::after { transition: none; }
  .mk-skills li, .mk-hiring li { animation: none !important; }
  /* the logo cards still answer hover and focus (colour and the open-roles line), but nothing moves */
  .lg-card, .lg-card .lg-tile, .lg-card__plate, .lg-card__swap > span { transition: none; }
  .lg-card:hover, .lg-card:focus-visible, .lg-card:hover .lg-tile, .lg-card:focus-visible .lg-tile,
  .lg-card:hover .lg-card__plate, .lg-card:focus-visible .lg-card__plate { transform: none; }
  .lg-card__more, .lg-card:hover .lg-card__field, .lg-card:focus-visible .lg-card__field { transform: none; }
}

/* Print: nothing waits for a scroll that will never come. The time-saved fold prints as its end
   state (the deck behind the feed, every row shown), and a block still waiting to rise in prints
   in place (home.js also finishes both on beforeprint, through ui.js `whenSeen`). */
@media print {
  .ts-tab, .ts-feed, .ts-row, .ts-num { animation: none !important; }
  .ts.is-armed .ts-tab { transform: translate(var(--dx), var(--dy)) rotate(var(--dr)) scale(var(--ds)); }
  .ts.is-armed .ts-feed, .ts.is-armed .ts-row { opacity: 1; }
  .ts.is-armed .ts-num { background: var(--btn-accent); color: var(--btn-accent-ink); }
  .rv-wait { opacity: 1; transform: none; }
}