/* mailbo.css — Mailbo home page. Built only from Vesper tokens (tokens.css + palette.css + type.css). */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* This build's neutral family on the frame pieces that carried the demo's fixed near-black */
.site-head { background: color-mix(in srgb, var(--bg) 72%, transparent); }
.js .site-head.menu-open, .js .site-head.menu-open:not(.scrolled), .mega { background: var(--bg-2); }
.mega-feature { background: linear-gradient(180deg, var(--bg-3), var(--bg-2)); }
.panel { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
.card-ui { background: var(--bg-3); }
.quote, .quote .who i { color: var(--cta-ink); }
.quote .who i { background: var(--cta-ink); color: var(--text); }

.shot-wrap { position: relative; }

/* The thread: one campaign (W41) followed through the page */
.thread-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-xs); border: 1px solid var(--line-2); background: var(--bg-4); font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: var(--text-2); }
.thread-tag--frame { position: absolute; right: 14px; top: 8px; z-index: 2; }

/* 3 · Unlimited ledger — statement + four ruled ∞ cells */
.ledger-row { margin-top: 96px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.lg-cell { position: relative; padding: 24px 28px 0 0; }
.lg-cell + .lg-cell { padding-left: 28px; border-left: 1px solid var(--line); }
.lg-cell .t-mono { color: var(--faint); letter-spacing: .06em; }
.lg-inf { display: block; margin: 36px 0 28px; font-family: var(--font-display); font-size: 112px; line-height: .8; font-weight: 400; letter-spacing: -.04em; color: var(--text); }
.lg-cell.is-on .lg-inf { color: var(--mint); }
.lg-cell.is-on::before { content: ""; position: absolute; top: -1px; left: 0; right: 28px; border-top: 1px solid var(--mint); }
.lg-cell h3 { font-size: 14px; font-weight: 510; color: var(--text); }
.lg-cell p { margin-top: 6px; font-size: 13px; color: var(--muted); max-width: 240px; }

/* 4 · A/B float over the real editor */
.ab-card { position: absolute; right: -8px; bottom: -8px; z-index: 2; width: 300px; max-width: none; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.ab-row { display: grid; grid-template-columns: 74px 1fr 46px; align-items: center; gap: 10px; color: var(--text-2); }
.ab-row b { font-weight: 510; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.ab-note { font-size: 12px; color: var(--muted); }

/* 5 · Segment builder — mock left (7), copy right (5) */
.seg { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; }
.seg-mk .mk-frame { border-radius: var(--r-md); }
.seg-rules { display: grid; gap: 10px; padding: 24px 20px 28px; justify-items: start; }
.seg-rule { display: grid; grid-template-columns: 96px 72px auto; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-3); }
.seg-f { color: var(--text); font-weight: 510; }
.seg-op { color: var(--muted); }
.seg-rule .mk-pill { justify-self: start; }
.seg-and { margin-left: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--faint); }
.seg-add { margin-top: 4px; padding: 6px 12px; border: 1px dashed var(--line-2); border-radius: var(--r); color: var(--muted); }
.seg-copy .t-body { margin-top: 24px; max-width: 440px; }
.seg-list { margin-top: 32px; border-top: 1px solid var(--line); }
.seg-list li { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.seg-list .t-mono { color: var(--faint); padding-top: 2px; }

/* 7 · Drip sequence — a day axis */
.v-head + .panel { margin-top: 64px; }
.drip-mk { max-width: none; }
.dr-head { display: flex; align-items: center; gap: 10px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.dr-head b { color: var(--text); font-weight: 510; font-size: 14px; }
.dr-in { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--faint); }
.dr-line { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 36px; }
.dr-line::before { content: ""; position: absolute; left: 4px; right: 0; top: 4px; border-top: 1px dashed var(--line-2); }
.dr-node { position: relative; display: flex; flex-direction: column; gap: 6px; padding-top: 28px; min-width: 0; }
.dr-node::before { content: ""; position: absolute; left: 0; top: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); border: 1.5px solid var(--faint); }
.dr-node .t-mono { color: var(--faint); }
.dr-node b { color: var(--text); font-weight: 510; font-size: 14px; }
.dr-node .mk-pill { align-self: flex-start; }
.dr-stat { font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.dr-wait { color: var(--faint); }
.dr-node.is-on::before { border-color: var(--mint); background: var(--mint); box-shadow: 0 0 0 4px var(--mint-soft); }

/* 9 · Customer proof — quote left (5), dashboard right (7) */
.pr { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; align-items: end; }
.pr-side { display: flex; flex-direction: column; }
.pr-quote { margin-top: 48px; min-height: 300px; }
.pr-quote blockquote { font-size: 24px; }

/* 10 · Flat pricing — list sizes ruled left, the one plan right */
.pf { margin-top: 64px; display: grid; grid-template-columns: 7fr 5fr; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-2); }
.pf-table { padding: 16px 32px 24px; }
.pf-row { display: grid; grid-template-columns: 170px 1fr 110px; align-items: center; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line-3, var(--line)); }
.pf-row:last-child { border-bottom: 0; }
.pf-th { padding: 12px 0; font-family: var(--mono); font-size: 12px; letter-spacing: .02em; color: var(--faint); }
.pf-th span:last-child, .pf-p { text-align: right; }
.pf-n { font-size: 15px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pf-p { font-size: 15px; color: var(--text); font-weight: 510; font-variant-numeric: tabular-nums; }
.pf-row.is-on .pf-n { color: var(--text); }
.pf-plan { display: flex; flex-direction: column; gap: 20px; padding: 32px; border-left: 1px solid var(--line); background: var(--bg-3); }
.pf-plan .t-mono { color: var(--faint); letter-spacing: .06em; }
.pf-price { display: flex; align-items: baseline; gap: 10px; }
.pf-price b { font-family: var(--font-display); font-size: 56px; line-height: 1; font-weight: 500; letter-spacing: -.03em; color: var(--text); }
.pf-price span { font-size: 13px; color: var(--muted); }
.pf-plan ul { display: grid; gap: 10px; }
.pf-plan li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); }
.pf-plan li .icon { color: var(--mint); }
.pf-plan .btn { align-self: flex-start; margin-top: auto; }

/* 11 · Questions — a 2 × 2 hairline grid, the most-asked one marked */
.qa { margin-top: 64px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.qa-item { padding: 28px 32px 32px 0; border-bottom: 1px solid var(--line); }
.qa-item:nth-child(even) { padding-left: 32px; border-left: 1px solid var(--line); }
.qa-item .t-mono { color: var(--faint); letter-spacing: .06em; }
.qa-item.is-top .t-mono { color: var(--mint); }
.qa-item h3 { margin-top: 14px; font-size: 20px; line-height: 1.33; font-weight: 600; color: var(--text); text-wrap: balance; }
.qa-item p { margin-top: 8px; font-size: 15px; color: var(--muted); max-width: 460px; }

.btn .icon { width: 16px; height: 16px; stroke-width: 2; }

@media (max-width: 900px) {
  .ledger-row { grid-template-columns: 1fr 1fr; margin-top: 64px; }
  .lg-cell:nth-child(3) { padding-left: 0; border-left: 0; }
  .lg-cell:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 24px; }
  .lg-inf { font-size: 80px; margin: 28px 0 20px; }
  .seg, .pr { grid-template-columns: 1fr; gap: 40px; }
  .seg-copy { order: -1; }
  .ab-card { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 16px; }
  .dr-line { grid-template-columns: 1fr; gap: 0; margin-top: 24px; }
  .dr-line::before { left: 4px; right: auto; top: 4px; bottom: 4px; border-top: 0; border-left: 1px dashed var(--line-2); }
  .dr-node { padding: 0 0 22px 28px; }
  .pf { grid-template-columns: 1fr; }
  .pf-plan { border-left: 0; border-top: 1px solid var(--line); }
  .pf-table { padding: 8px 20px 16px; }
  .pf-row { grid-template-columns: 1fr 80px; gap: 12px; }
  .pf-row .mk-meter { grid-column: 1 / -1; grid-row: 2; }
  .pf-th span:nth-child(2) { display: none; }
  .qa { grid-template-columns: 1fr; }
  .qa-item, .qa-item:nth-child(even) { padding: 24px 0; border-left: 0; }
  .panel-inner { padding: 20px; }
}
@media (max-width: 560px) {
  .seg-rule { grid-template-columns: 1fr auto; }
  .seg-rule .mk-pill { grid-column: 1 / -1; }
  .lg-cell { padding-right: 12px; }
  .lg-cell + .lg-cell { padding-left: 12px; }
  .lg-cell:nth-child(3) { padding-left: 0; }
}

/* lifted pieces: the active drip email and the toasts sit one shadow step above their screen */
.drip-screen { padding: 24px 28px 32px; }
.dr-node.is-on { margin: -14px -14px 0; padding: 42px 14px 14px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--bg-3); box-shadow: 0 24px 60px rgb(0 0 0 / .55); }
.dr-node.is-on::before { left: 14px; top: 14px; }
.mk-toast b { display: block; font-weight: 510; color: var(--text); }
.mk-toast small { display: block; font-size: 12px; color: var(--muted); }
@media (max-width: 900px) {
  .dr-node.is-on { margin: 0 0 22px; padding: 14px 14px 14px 42px; }
  .dr-node.is-on::before { left: 14px; top: 18px; }
  .mk-toast { position: relative; left: auto !important; right: auto !important; bottom: auto; margin-top: 12px; width: max-content; max-width: 100%; }
}
.brand svg { fill: var(--text); color: var(--text); }
h2.sr-only { font-weight: 500; }
.seg-list .t-mono, .lg-cell .t-mono { letter-spacing: .06em; }
.final .t-h2 { max-width: 720px; margin-inline: auto; }

/* 1 · Hero — the real dashboard in the product window, one floating "ready to send" card */
.hero-copy { display: grid; gap: 24px; }
.hero-lead { max-width: 520px; font-size: 17px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-card { position: absolute; right: 36px; top: 300px; z-index: 3; width: 300px; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.hero-card .hd > span:first-child { gap: 8px; color: var(--text-2); }
.hero-card .thread-tag { height: 18px; font-size: 11px; }
.hc-title { color: var(--text); font-weight: 510; font-size: 14px; }
.hc-row { display: flex; justify-content: space-between; color: var(--muted); }
.hc-row b { color: var(--text); font-weight: 510; font-variant-numeric: tabular-nums; }
.hc-btn { align-self: flex-start; height: 30px; }
@media (max-width: 900px) {
  .hero { padding-top: 96px; }
  .hero-card { position: relative; right: auto; top: auto; width: auto; margin-top: 16px; }
}

/* ── Product illustrations drawn from Mailbo's own screens (kit parts + these few atoms) ── */
.mk .mk-btn .icon { width: 13px; height: 13px; }
.mk-nav .icon { width: 14px; height: 14px; }

/* hero dashboard */
.hero .shot .hero-mk { --mk-w: none; }
.hero .shot .mk-frame { border-radius: var(--r-md); overflow: hidden; }
.hero-mk .mk-body { gap: 16px; padding: 20px 22px 28px; }
.mb-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.mb-legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--violet); }
.mb-legend i.is-b { margin-left: 8px; background: var(--rose); }
.mb-pairs { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.mb-pairs span { flex: 1; min-width: 0; height: 100%; display: flex; align-items: flex-end; gap: 2px; }
.mb-pairs i { flex: 1; height: var(--v); border-radius: 3px 3px 0 0; background: var(--violet); }
.mb-pairs i + i { background: var(--rose); }

/* campaign editor */
.ed-steps { display: inline-flex; gap: 14px; margin-left: 24px; font-size: 12px; color: var(--faint); }
.ed-steps em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; }
.ed-steps i { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--bg-4); font-style: normal; font-size: 10px; }
.ed-steps .is-on { color: var(--text); } .ed-steps .is-on i { background: var(--cta); color: var(--cta-ink); }
.ed-steps .is-done .icon { width: 12px; height: 12px; }
.ed-body { display: grid; grid-template-columns: minmax(0, 1fr) 220px; min-height: 0; }
.ed-left { display: grid; gap: 14px; align-content: start; padding: 18px 20px 24px; }
.ed-canvas { padding: 22px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); }
.ed-mail { display: grid; gap: 10px; max-width: 420px; margin-inline: auto; padding: 22px; border-radius: var(--r-md); background: var(--bg-3); border: 1px solid var(--line); }
.ed-mail .mk-ln + .mk-ln { margin-top: 0; }
.ed-logo { width: 24px; height: 24px; border-radius: 6px; background: var(--text-2); }
.ed-hi { color: var(--text); }
.ed-var { padding: 1px 6px; border-radius: 4px; background: var(--bg-5); font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.ed-tpl { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px; border-radius: var(--r); background: var(--bg-2); border: 1px solid var(--line); }
.ed-mail .mk-ln, .ed-tpl .mk-ln--block { background: var(--bg-5); }
.ed-tpl > div { display: grid; gap: 7px; justify-items: start; }
.ed-tpl b { color: var(--text); font-weight: 510; }
.ed-tpl .mk-ln + .mk-ln { margin-top: 0; }
.ed-cta { height: 26px; margin-top: 4px; font-size: 11.5px; }
.ed-aside { display: grid; gap: 10px; align-content: start; padding: 18px 16px; border-left: 1px solid var(--line); }
.ed-k { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ed-k + .ed-tiles, .ed-k + .ed-sw { margin-top: -2px; }
.ed-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.ed-tiles span { padding: 10px; border-radius: var(--r); border: 1px solid var(--line); color: var(--muted); }
.ed-tiles .is-on { background: var(--bg-4); border-color: var(--line-2); color: var(--text); }
.ed-sw { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: var(--r); border: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; color: var(--text-2); }
.ed-sw i { width: 16px; height: 16px; border-radius: 4px; background: var(--c); }

/* automation builder */
.af-canvas { display: grid; justify-items: center; gap: 28px; padding: 40px 24px 44px; background-color: var(--bg-2); background-image: radial-gradient(var(--bg-5) 1px, transparent 1px); background-size: 16px 16px; }
.af-node { position: relative; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--bg-3); color: var(--muted); white-space: nowrap; }
.af-node b { font-weight: 510; color: var(--text); }
.af-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--bg-5); color: var(--text-2); }
.af-ic .icon { width: 12px; height: 12px; }
.af-start .af-ic { background: var(--cta); color: var(--cta-ink); }
.af-node:not(.af-end)::after, .af-split::after { content: ""; position: absolute; left: 50%; top: 100%; height: 28px; border-left: 1px dashed var(--line-2); }
.af-if { margin-bottom: -14px; }
.af-split { position: relative; display: flex; gap: 120px; margin-bottom: -14px; }
.af-split::after { display: none; }
.af-split span { padding: 2px 10px; border-radius: var(--r-pill); font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; background: var(--bg-5); color: var(--text-2); }
.af-split .af-no { color: var(--muted); }
.af-branches { display: flex; gap: 40px; padding-top: 18px; border-top: 1px dashed var(--line-2); }
.af-branches .af-node::after { display: none; }
.af-end { padding: 10px 18px; }
.af-branches .af-node::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: 18px; border-left: 1px dashed var(--line-2); }
.af-end::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: 28px; border-left: 1px dashed var(--line-2); }

/* campaigns table */
.ct-name { color: var(--text-2); }
.mk-tr.ct-on { background: var(--bg-4); }
.mk-tr.ct-on .ct-name { color: var(--text); font-weight: 510; }

/* campaign performance */
.cp-chart { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; align-items: end; height: 230px; padding: 8px 4px 0; }
.cp-col { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 8px; height: 100%; text-align: center; }
.cp-col small { font-family: var(--mono); font-size: 11px; color: var(--faint); }
.cp-col i { height: max(6px, calc(var(--v) * 1.6px)); border-radius: var(--r) var(--r) 3px 3px; background: var(--bg-5); }
.cp-col em { font-style: normal; font-size: 12px; color: var(--muted); }
.cp-col.is-on i { background: var(--mint); }
.cp-col.is-on small { color: var(--text); }

/* the hero window melts into the page: frame, hairline and glow all fade out together */
.hero .shot-frame { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 96%); mask-image: linear-gradient(180deg, #000 0%, #000 52%, transparent 96%); box-shadow: none; }
.hero .shot-fade::after { display: none; }
.hero .shot { padding-bottom: 8px; }

@media (max-width: 900px) {
  .ed-steps, .ed-aside { display: none; }
  .ed-body { grid-template-columns: 1fr; }
  .af-split { gap: 60px; }
  .af-branches { flex-direction: column; gap: 14px; border-top: 0; padding-top: 0; }
  .af-node { white-space: normal; }
  .cp-chart { gap: 6px; height: 180px; }
  .cp-col i { height: max(6px, calc(var(--v) * 1.1px)); }
}
.ed-btn-ln { height: 22px; margin-top: 4px !important; border-radius: var(--r-pill); background: var(--bg-5); }
@media (max-width: 560px) {
  .mb-pairs { gap: 3px; height: 90px; }
  .mb-pairs span { gap: 1px; }
  .ed-canvas { padding: 12px; }
  .ed-mail { padding: 14px; }
  .ed-tpl { grid-template-columns: 56px minmax(0, 1fr); gap: 10px; }
  .ed-tpl .mk-ln--block { --h: 44px !important; }
  .ed-cta { padding: 0 10px; font-size: 11px; max-width: 100%; }
  .ct-table .mk-tr { grid-template-columns: minmax(0, 1fr) 56px 64px; }
  .ct-table .mk-tr > :nth-child(4) { display: none; }
}
/* proof report: a headline number, bars that all read, the note clear of the axis */
.cp-stat { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.cp-stat b { font-size: 32px; font-weight: 590; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.cp-stat span { font-size: 13px; color: var(--muted); }
.cp-chart { height: 200px; }
.cp-col i { height: max(14px, calc(var(--v) * 1.3px)); background: var(--rose); }
.cp-toast { left: auto; right: -16px; bottom: auto; top: 64px; }
@media (max-width: 900px) { .cp-toast { top: auto; } }

/* ══ Light version (the user asked, change request #3) — the same black-and-white design inverted. ══
   html[data-theme="light"] is set by the header switcher; dark stays the default. Only tokens and the
   few frame pieces that hard-code dark surfaces change: layout, type, spacing and motion stay identical. */
html[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFFFF;
  --bg-2: #F6F6F6;
  --bg-3: #FFFFFF;
  --bg-4: #EFEFEF;
  --bg-5: #E2E2E2;
  --text: #0A0A0A;
  --text-2: #262626;
  --muted: #5E5E5E;
  --faint: #6B6B6B;
  --cta: #0A0A0A;
  --cta-ink: #FFFFFF;
  --mint: #087A55;
  --mint-rgb: 8, 122, 85;
  --mint-deep: #087A55;
  --tint-1: #1C1C1C;
  --tint-2: #0F0F0F;
  --blue: #2F62D9;
  --violet: #6E4BDB;
  --rose: #E0612E;
  --red: #C8343A;
  --line: rgba(0, 0, 0, .09);
  --line-2: rgba(0, 0, 0, .14);
  --line-3: rgba(0, 0, 0, .06);
}
html[data-theme="light"] .site-head { background: rgba(255, 255, 255, .78); }
html[data-theme="light"] .mega,
html[data-theme="light"] .js .site-head.menu-open, html[data-theme="light"].js .site-head.menu-open { background: #FFFFFF; }
html[data-theme="light"] .drop, html[data-theme="light"] .card-ui { background: #FFFFFF; }
html[data-theme="light"] .panel { background: linear-gradient(180deg, var(--bg-2), var(--bg)); }
html[data-theme="light"] .shot-frame { background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .015)); }
html[data-theme="light"] .shot::before, html[data-theme="light"] .final::before { background: radial-gradient(60% 60% at 50% 40%, rgba(0, 0, 0, .05), transparent 70%); }
html[data-theme="light"] .panel::before, html[data-theme="light"] .shot-frame::before { background: radial-gradient(360px circle at var(--mx) var(--my), rgba(0, 0, 0, .18), transparent 65%); }
html[data-theme="light"] .ab-card, html[data-theme="light"] .hero-card, html[data-theme="light"] .mk-toast { box-shadow: 0 18px 44px rgba(0, 0, 0, .12); }
html[data-theme="light"] .card-ui { box-shadow: 0 18px 44px rgba(0, 0, 0, .10); }
html[data-theme="light"] .dr-node.is-on { box-shadow: 0 18px 44px rgba(0, 0, 0, .10); }
/* the customer quote keeps its change of key: a black card on the white page */
html[data-theme="light"] .quote--soft { background: radial-gradient(120% 120% at 100% 0%, #262626 0%, #121212 45%, #0A0A0A 100%); }
html[data-theme="light"] .quote, html[data-theme="light"] .quote blockquote { color: #FFFFFF; }
html[data-theme="light"] .quote .who span { color: rgba(255, 255, 255, .78); }
html[data-theme="light"] .quote .who b { color: #FFFFFF; }
html[data-theme="light"] .quote .who i { background: #FFFFFF; color: #0A0A0A; }
html[data-theme="light"] .ed-logo { background: var(--text); }
html[data-theme="light"] .mk-avatar--tint { color: #FFFFFF; }

/* ── the switcher: one quiet round button, sun ↔ moon ── */
.theme-toggle { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-pill); border: 1px solid var(--line-2); color: var(--muted); background: transparent; cursor: pointer; transition: color .3s var(--ease-out), border-color .3s var(--ease-out), background .3s var(--ease-out); }
.theme-toggle:hover { color: var(--text); border-color: var(--text); }
.theme-toggle:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.theme-toggle .icon { position: absolute; width: 16px; height: 16px; stroke-width: 1.75; transition: opacity .35s var(--ease-out), transform .45s var(--ease-out); }
.theme-toggle .i-sun { opacity: 0; transform: rotate(-60deg) scale(.6); }
html[data-theme="light"] .theme-toggle .i-sun { opacity: 1; transform: none; }
html[data-theme="light"] .theme-toggle .i-moon { opacity: 0; transform: rotate(60deg) scale(.6); }
html.theme-anim, html.theme-anim body, html.theme-anim .site-head, html.theme-anim .panel, html.theme-anim .mk-frame { transition: background-color .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .theme-toggle .icon { transition: none; } }

/* ══ Colour (change request #4): a small data palette inside the illustrations, tuned per theme ══
   green = live / success (--mint), blue + violet + coral = data series, amber + red = status. Buttons stay black/white. */
.lg-cell:nth-child(1) .lg-inf { color: var(--mint); }
.lg-cell:nth-child(2) .lg-inf { color: var(--blue); }
.lg-cell:nth-child(3) .lg-inf { color: var(--violet); }
.lg-cell:nth-child(4) .lg-inf { color: var(--rose); }
.pill-link b { color: var(--mint); }
.mk-brand::before { background: linear-gradient(135deg, var(--blue), var(--violet)); border: 0; }
.hc-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px var(--mint-soft); }
.sched-item { display: grid; gap: 6px; padding: 10px 12px; border-radius: var(--r); background: var(--amber-soft); border-left: 3px solid var(--amber); }
.sched-item b { font-weight: 510; color: var(--text); font-size: 12px; }
.sched-item span { font-size: 11px; color: var(--muted); }
.ed-logo { background: linear-gradient(135deg, var(--blue), var(--violet)) !important; }
.ed-tpl .mk-ln--block.t-a { background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 70%, var(--bg-3)), color-mix(in srgb, var(--violet) 55%, var(--bg-3))); }
.ed-tpl .mk-ln--block.t-b { background: linear-gradient(135deg, color-mix(in srgb, var(--rose) 70%, var(--bg-3)), color-mix(in srgb, var(--amber) 55%, var(--bg-3))); }
.ed-tiles .is-on { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }
.ed-steps .is-done .icon { color: var(--mint); }
.af-start .af-ic { background: var(--mint-soft); color: var(--mint); }
.af-if .af-ic { background: var(--amber-soft); color: var(--amber); }
.af-tag .af-ic { background: color-mix(in srgb, var(--violet) 16%, transparent); color: var(--violet); }
.af-end .af-ic { background: var(--red-soft); color: var(--red); }
.af-split .af-yes { background: var(--mint-soft); color: var(--mint); }
.af-split .af-no { background: var(--red-soft); color: var(--red); }
.dr-node.is-sent::before { border-color: var(--blue); background: var(--blue); }
.ct-up { color: var(--mint) !important; }
.cp-col i { background: color-mix(in srgb, var(--rose) 28%, var(--bg-4)); }
.cp-col.is-on i { background: linear-gradient(180deg, var(--rose), color-mix(in srgb, var(--rose) 70%, var(--amber))); }
html[data-theme="light"] { --red-soft: rgba(200, 52, 58, .10); }
/* readable chips: neutral text, colour carried by the dot */
.af-split .af-yes, .af-split .af-no { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-3); border: 1px solid var(--line-2); color: var(--text-2); }
.af-split .af-yes::before, .af-split .af-no::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--mint); }
.af-split .af-no::before { background: var(--red); }
html[data-theme="light"] .mk-pill--accent { color: var(--text); }