/* Product pages in the launch landing's light look (/site/, launch/launch.css): graphite paper, Saira headings,
   Plex body, the landing's header and footer. Loaded after product.css, v2.css and launch.css. The pages are
   pinned light (data-theme="light" on <html>); scenes draw on white (data-scenes="light"). */

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f6f4; --surface: #ffffff; --surface2: #ededea; --ink: #121518; --body: #3b434c; --muted: #5d6670;
  --line: #dcdfe3; --accent: #f25c2d; --accentText: #b93d12; --btnBg: #121518; --btnInk: #ffffff;
  --term: #121518; --termInk: #e9edf0; --termMuted: #8b96a1;
  --rz-ground: var(--bg); --rz-surface: var(--surface); --rz-raised: var(--surface); --rz-sunken: var(--surface2);
  --rz-ink: var(--ink); --rz-muted: var(--muted); --rz-line: var(--line); --rz-link: var(--accentText);
  --rz-accent: var(--btnBg); --rz-on-accent: var(--btnInk);
  --pp-deep: #121518;
}
html[data-theme="light"] .on-dark { display: none !important; }
html[data-theme="light"] .on-light { display: revert !important; }

body.rz-page { background: var(--bg); color: var(--ink); font-family: 'IBM Plex Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body.rz-page h1, body.rz-page h2, body.rz-page h3 { font-family: 'Saira', system-ui, sans-serif; letter-spacing: -0.02em; font-weight: 600; text-wrap: balance; }
body.rz-page .pp-lead, body.rz-page .mk-row__copy p { color: var(--body); }
.pp-kicker, .mk-num { color: var(--accentText); }
.rz-btn--primary { background: var(--btnBg); color: var(--btnInk); border-color: var(--btnBg); }

/* ---------- Header: the landing's, with a Products menu ---------- */
.lh { box-sizing: border-box; width: 100%; max-width: 1200px; margin: 0 auto; padding: 22px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 36px; position: relative; z-index: 20; }
.lh a { color: inherit; text-decoration: none; }
.lh__brand { display: flex; align-items: center; gap: 10px; }
.lh__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; font-size: 15px; font-weight: 500; color: var(--muted); flex: 1 1 auto; }
.lh__nav > a:hover, .lh__nav [aria-current="page"] { color: var(--accentText); }
.lh__acts { display: flex; gap: 12px; align-items: center; }
.lh__in { font-size: 15px; font-weight: 500; padding: 10px 14px; }
.lh__go { font-size: 15px; font-weight: 600; padding: 11px 18px; border-radius: 8px; background: var(--btnBg); color: var(--btnInk) !important; }

/* ---------- Footer ---------- */
.lf { border-top: 1px solid var(--line); margin-top: 96px; }
.lf > div { max-width: 1200px; margin: 0 auto; padding: 32px 24px 48px; display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; font-size: 14px; color: var(--muted); }
.lf p { margin: 0 0 4px; }
.lf b { color: var(--ink); }
.lf nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.lf a { color: inherit; text-decoration: none; }
.lf a:hover { color: var(--accentText); }

/* ---------- Sections that were dark stages are paper now ---------- */
.pp-stage { background: transparent; border-bottom: 0; }
.pp-stage, .mk-band, .mk-closebox { --on-deep: var(--ink); --on-deep-soft: var(--body); }
.mk-scene, .mk-stat, .mk-closebox { --on-deep: var(--ink); --on-deep-soft: var(--muted); }
.mk-code { --on-deep: #e9edf0; --on-deep-soft: #8b96a1; }
.mk-chip { border-color: var(--line); background: var(--surface); }
.mk-chip--soon { background: transparent; }
.mk-band ol li { color: var(--body); }
.mk-band ol li::before { color: var(--accentText); }
.mk-band ol b, .mk-band .mk-bigs dt { color: var(--ink); }
.mk-band .mk-bigs dd { color: var(--body); }
.pp-band__title { font-family: 'Saira', system-ui, sans-serif; }
.mk-frame__bar { background: var(--surface2) !important; border-bottom: 1px solid var(--line); }
.mk-frame__bar b { color: var(--muted) !important; background: var(--surface) !important; }
.mk-frame__bar i { background: var(--line) !important; }
.mk-short { background: var(--surface); }
/* Code and terminals are the one black thing on the site (Doug 2026-10-14); every other panel is light. */
.mk-code { background: var(--term); color: var(--termInk); border: 1px solid var(--term); }

/* ---------- One look for every visual ----------
   Screens, scenes, numbers, panels and the terminal share one radius, one shadow and one width per slot.
   Every visual sits on white with a hairline, scenes included; only code and terminals are black (Doug 2026-10-14). */
:root { --mk-radius: 12px; --mk-shadow: 0 16px 44px rgba(0, 0, 0, .08); }
.mk-frame, .mk-scene, .mk-hero > .mk-scene, .mk-stat, .mk-panel, .mk-term {
  border-radius: var(--mk-radius); box-shadow: var(--mk-shadow); }
.mk-frame, .mk-panel, .mk-scene, .mk-stat { border: 1px solid var(--line); background: var(--surface); }
.mk-term { border: 1px solid var(--term); background: var(--term); }
.mk-stat b { color: var(--accentText); }
.mk-frame__screen { background: var(--surface); }
.mk-frame__bar { height: 34px; }
/* "Sample data" lives in the bar on every screen, never over the screenshot. */
.mk-frame__screen .mk-tag { display: none; }
.mk-tag--bar { display: inline-block; position: static; margin-left: auto; color: var(--muted); background: var(--surface); border-color: var(--line); }
.mk-live + .mk-tag--bar { margin-left: 10px; }
/* Heroes: the visual spans the column, scenes included; a drawing is centred in its card. */
.mk-hero > .mk-scene { max-width: none; justify-self: stretch; }
.mk-hero > .mk-scene .pp-art { max-height: 620px; margin-inline: auto; }
/* Bands line up with the feature rows above them: same columns, same gap, on the same paper. */
.mk-band, .mk-band--tight { background: transparent; border-block: 0; margin-top: var(--rz-space-48); }
.mk-band .pp-hero, .loadoutz-band .pp-hero { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--rz-space-48); padding-block: var(--rz-space-48); }
.mk-band--flip .pp-hero, .loadoutz-band--flip .pp-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.mk-band--text .pp-hero { grid-template-columns: minmax(0, 1fr); }
.mk-scene { padding: var(--rz-space-20); }
.mk-stat { min-height: 280px; }
/* Related products: every tile the same shape, on white, cropped from the top left. */
.mk-together { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-together .rz-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--mk-radius); padding: var(--rz-space-16); }
.mk-together a:hover { background: var(--surface); border-color: var(--rz-line-strong); }
.mk-together img { height: auto; aspect-ratio: 1200 / 660; object-fit: cover; object-position: top left; border: 1px solid var(--line); background: var(--surface); border-radius: 8px; }
/* Insights: both halves on white; Insights++ is told apart by its plus marks. */
.mk-insights { background: var(--surface); border-radius: var(--mk-radius); }
.mk-insights > div + div { border-left: 1px solid var(--line); background: var(--surface); }

/* The closing call to action: a white card with a hairline. */
.mk-closebox { margin-top: 96px; border-radius: var(--mk-radius); background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--mk-shadow); }
.mk-closebox .mk-close { padding: 64px 32px; }
.mk-closebox .pp-kicker { color: var(--accentText); }
.mk-closebox .pp-band__title { color: var(--ink); }
body.rz-page .mk-closebox .pp-lead, .mk-closebox .mk-status { color: var(--body); }
.mk-closebox .mk-status b { color: var(--ink); }

/* ---------- Collectorz's terminal ---------- */
.mk-term { border-radius: 12px; background: var(--term); color: var(--termInk); padding: 28px; border: 1px solid var(--term);
  font: 14px/1.8 'JetBrains Mono', ui-monospace, monospace; font-variant-ligatures: none; overflow-x: auto; }
.mk-term { scrollbar-width: none; }
.mk-term::-webkit-scrollbar { display: none; }
.mk-term > div { white-space: pre; }
.mk-term .dim { white-space: normal; }
.mk-term span, .mk-term .dim { color: var(--termMuted); }
.mk-term i { font-style: normal; color: #77bfb6; }
.mk-term .gap { margin-top: 14px; }
.mk-term .note { font-size: 11px; color: var(--termMuted); }
.mk-term u { color: #ff8f63; text-underline-offset: 3px; }
.mk-term a { color: var(--termInk); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .mk-band .pp-hero, .mk-band--flip .pp-hero, .loadoutz-band .pp-hero, .loadoutz-band--flip .pp-hero { grid-template-columns: minmax(0, 1fr); gap: var(--rz-space-24); }
  .mk-insights > div + div { border-left: 0; border-top: 1px solid var(--line); }
  .mk-together { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .lh { gap: 12px 20px; padding: 16px; }
  .lh__nav { order: 3; flex-basis: 100%; }
  .lh__acts { margin-left: auto; gap: 4px; }
  .lh__in { font-size: 14px; padding: 9px 10px; }
  .lh__go { font-size: 14px; padding: 9px 14px; }
  .mk-term { padding: 20px; font-size: 12px; }
  .mk-closebox .mk-close { padding: 48px 20px; }
}

/* Scene type that scenes.css and the Verdictz page set for graphite, redone for white. */
html[data-scenes="light"] { --aqua: #2a9d92; }
html[data-scenes="light"] svg.mini .t-mono { fill: var(--ink); }
html[data-scenes="light"] svg.mini .k-body { fill: var(--body); }
html[data-scenes="light"] svg .t-tiny, html[data-scenes="light"] svg.mini .t-tiny { fill: var(--muted); }

/* ---------- The seven verbs (products/verbs.mjs) ---------- */
/* The chevron strip under the header, with the page's verb lit. On a phone it shrinks to seven colour bars and
   names only the lit verb. */
.vloop { box-sizing: border-box; width: 100%; max-width: 1200px; margin: 4px auto 0; padding: 0 24px; }
.vloop ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.vloop li { flex: 1 1 0; min-width: 0; height: 44px; display: flex; flex-direction: column; justify-content: center; padding: 0 10px 0 26px;
  background: color-mix(in srgb, var(--c) 7%, #fff); color: var(--c);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); }
.vloop li:first-child { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); padding-left: 16px; border-radius: 8px 0 0 8px; }
.vloop li:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 14px 50%); border-radius: 0 8px 8px 0; }
.vloop li[aria-current] { background: var(--c); color: #fff; }
.vloop__n { font: 600 10.5px/1 'JetBrains Mono', ui-monospace, monospace; }
.vloop__w { font: 600 12.5px/1.1 'Saira', system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; margin-top: 3px; white-space: nowrap; }
@media (max-width: 760px) {
  .vloop { padding: 0 16px; }
  .vloop ol { gap: 3px; align-items: center; }
  .vloop li, .vloop li:first-child, .vloop li:last-child { clip-path: none; height: 8px; padding: 0; border-radius: 4px; }
  .vloop li:not([aria-current]) { background: color-mix(in srgb, var(--c) 40%, #fff); }
  .vloop li .vloop__n, .vloop li .vloop__w { display: none; }
  .vloop li[aria-current] { flex: 3 1 0; height: 30px; padding: 0 10px; }
  .vloop li[aria-current] .vloop__w { display: block; margin: 0; font-size: 12px; }
}
/* The hero's kicker is the verb, in its colour, with a dot. */
.pp-kicker.vkick { display: inline-flex; align-items: center; gap: 9px; color: var(--vc); }
.pp-kicker.vkick::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--vc); }
.pp-name--text { margin: 0; font: 700 76px/1 'Saira', system-ui, sans-serif; letter-spacing: -0.03em; color: var(--ink); }
@media (max-width: 760px) { .pp-name--text { font-size: 56px; } }
/* The family section: the verb's question and one card per product, this page's filled in the verb colour. */
.vfam { display: grid; gap: 22px; }
.vfam__eb { margin: 0; font: 600 12px/1 'Saira', system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: var(--vc); }
.vfam h2 { margin: 0; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; }
.vfam__lead { margin: 0; max-width: 62ch; font-size: 17px; color: var(--body); }
.vfam__grid { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.vfam__grid--n6 { grid-template-columns: repeat(3, 1fr); }
.vfam__grid--n2 { grid-template-columns: repeat(2, minmax(0, 380px)); }
.vfam__card { display: flex; flex-direction: column; gap: 10px; min-height: 178px; padding: 22px 22px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 1px 2px rgba(18, 21, 24, .04); }
.vfam__card b { font: 600 23px/1 'Saira', system-ui, sans-serif; letter-spacing: -.01em; color: var(--ink); }
.vfam__card span { font-size: 14.5px; line-height: 1.45; color: var(--body); }
.vfam__card a { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 600; color: var(--vc); text-decoration: none; }
.vfam__card em { margin-top: auto; padding-top: 6px; font: 600 11px/1 'Saira', system-ui, sans-serif; font-style: normal; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vfam__card--here { background: var(--vc); border-color: var(--vc); box-shadow: 0 10px 28px -12px var(--vc); }
.vfam__card--here b, .vfam__card--here span { color: #fff; }
.vfam__card--here em { color: rgba(255, 255, 255, .88); }
@media (max-width: 760px) {
  .vfam__grid, .vfam__grid--n6, .vfam__grid--n2 { grid-template-columns: 1fr; gap: 10px; }
  .vfam__card { min-height: 0; padding: 18px 18px 16px; gap: 6px; }
  .vfam__card b { font-size: 21px; }
}
/* The "live" mark on a screen's bar: the aqua scene colour is too light for text on the bar. */
.mk-frame__bar .mk-live { color: #17706d; }
.mk-frame__bar .mk-live::before { background: #17706d; }