/* ============================================================
   Mothyfamily Network — base.css
   Hand-written CSS. No frameworks, no build step, no internet
   needed to view it. Open index.html in any browser.
   ============================================================ */

:root {
  --ink: #14110d;
  --ink-2: #1c1813;
  --ink-3: #26211a;
  --panel: #201b15;
  --panel-2: #2a241c;
  --line: #3a3227;
  --line-soft: #2e281f;
  --text: #f3ece1;
  --text-dim: #c3b7a5;
  --text-mute: #9a8e7d;
  --amber: #f0a344;
  --amber-deep: #c97f22;
  --lamp: #ffd9a0;
  --teal: #57c1b3;
  --rose: #e8788f;
  --green: #7fc46f;
  --violet: #a98fd8;
  /* Text that sits ON the amber accent (the current nav pill, pressed chips). Dark themes need
     near-black there, light themes need near-white — so it is a variable, not a hex. */
  --on-amber: #1a1208;
  /* Inline code sits on a slightly lifted slab. Dark themes use ink-3; light themes need their
     own tint so it reads as part of the palette rather than a grey smudge. */
  --code-bg: var(--ink-3);
  /* The page wash. First layer paints on top, so the semi-transparent radials come first and the
     opaque base goes last. Every theme must ship a gradient: tools/mobile-probe.js proves the CSS
     loaded by checking that body has a background-image. */
  --bg:
    radial-gradient(1100px 520px at 82% -8%, rgba(240, 163, 68, .16), transparent 62%),
    radial-gradient(760px 420px at 8% 4%, rgba(87, 193, 179, .10), transparent 60%),
    var(--ink);
  --shadow: 0 18px 40px -22px rgba(0, 0, 0, .85);
  --radius: 14px;
  --radius-sm: 9px;
  --maxw: 1140px;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
}

[data-theme="light"] {
  --ink: #f6f1e8;
  --ink-2: #efe8dc;
  --ink-3: #e6ddce;
  --panel: #fffdf8;
  --panel-2: #f4ecdf;
  --line: #d8ccb8;
  --line-soft: #e4dbc9;
  --text: #241d13;
  --text-dim: #55483a;
  --text-mute: #7a6b58;
  --amber: #9a570c;   /* was #b4670f: 4.23:1 as link text on a cream card — under AA. This clears
     5.5:1 as text and 5.4:1 carrying the near-white nav pill. */
  --amber-deep: #8c4f08;
  --lamp: #7a4a05;
  --teal: #14766a;
  --rose: #b23c56;
  --green: #3d7d2c;
  --violet: #6a4a9c;
  --on-amber: #fff9ef;
  --code-bg: #ece3d3;
  --bg:
    radial-gradient(1100px 520px at 82% -8%, rgba(240, 163, 68, .22), transparent 62%),
    radial-gradient(760px 420px at 8% 4%, rgba(87, 193, 179, .16), transparent 60%),
    linear-gradient(172deg, #faf6ef 0%, #f4efe4 60%, #efe7d9 100%);
  --shadow: 0 14px 34px -20px rgba(60, 40, 10, .35);
}

/* Grape — a purple gradient page, dark. The amber accent is kept on purpose: warm on violet is
   the site's own contrast, and it keeps every status pill readable where violet-on-violet would
   not. Mode is dark, so the light-theme overrides (near-black text on amber, etc.) do not apply. */
[data-theme="grape"] {
  --ink: #191026;
  --ink-2: #221534;
  --ink-3: #2b1b41;
  --panel: #241738;
  --panel-2: #2f1f48;
  --line: #45305f;
  --line-soft: #382750;
  --text: #f2ecff;
  --text-dim: #c8bce6;
  --text-mute: #a294c4;
  --amber: #f4b877;
  --amber-deep: #d9924a;
  --lamp: #ffdcae;
  --teal: #6fd0c2;
  --rose: #ff92b4;
  --green: #92d97f;
  --violet: #c9a9ff;
  --on-amber: #24120a;
  --bg:
    radial-gradient(900px 480px at 84% -6%, rgba(201, 169, 255, .22), transparent 60%),
    radial-gradient(720px 420px at 6% 8%, rgba(111, 208, 194, .10), transparent 58%),
    linear-gradient(168deg, #2a1741 0%, #1c1029 42%, #24102f 72%, #170d22 100%);
  --shadow: 0 18px 40px -22px rgba(20, 0, 40, .9);
}

/* Noir — purple on black, the second purple theme and the dark one. Grape is a purple PAGE
   (purple ink, purple gradients); Noir is a BLACK page with purple light in it — ink near #000,
   violet as the accent that amber is in the dark theme, and purple hairlines so the edges read as
   purple rather than grey. Mode is dark, so none of the [data-mode=light] overrides apply. */
[data-theme="noir"] {
  --ink: #0a060d;          /* the page: black with a purple cast, not pure #000 (pure black next to
                             a lit panel looks like a hole) */
  --ink-2: #120b18;
  --ink-3: #191021;
  --panel: #120c17;
  --panel-2: #1a1122;
  --line: #33203f;         /* purple hairline — decorative; every control keeps a text label */
  --line-soft: #261733;
  --text: #f3eefc;
  --text-dim: #c6b8dc;
  --text-mute: #9b8bb0;
  --amber: #b98cff;        /* in Noir the accent IS the purple: links, pills, focus ring */
  --amber-deep: #8b5cf6;
  --lamp: #dcc9ff;
  --teal: #6fd0c2;
  --rose: #ff8fc6;
  --green: #8fd98a;
  --violet: #c9a9ff;
  --on-amber: #12061c;     /* dark text on the violet pill — 7.73:1, proven by tools/theme-contrast.js */
  --bg:
    radial-gradient(900px 480px at 82% -8%, rgba(139, 92, 246, .26), transparent 62%),
    radial-gradient(680px 400px at 4% 10%, rgba(185, 140, 255, .09), transparent 58%),
    linear-gradient(170deg, #0d0714 0%, #070409 45%, #0b0512 75%, #050308 100%);
  --shadow: 0 18px 40px -22px rgba(0, 0, 0, .95);
}

/* Sky — light pastel, weighted to blue as asked. Every accent is darkened against the pastel
   blue, because a pastel background is a bright background: the amber that glows on dark ink is
   mud here, so it drops to a burnt ochre that clears 4.5:1. Mode is light. */
[data-theme="pastel"] {
  --ink: #eaf2fb;
  --ink-2: #e0ebf7;
  --ink-3: #d5e4f3;
  --panel: #fbfdff;
  --panel-2: #eaf3fc;
  --line: #b9d0e8;
  --line-soft: #d3e3f3;
  --text: #1e2c3b;
  --text-dim: #46586d;
  --text-mute: #5b6f86;   /* #6d8199 measured 3.92:1 on a white card — muted copy is the pair that
     always fails on a pastel background, so it is the one to prove. */
  --amber: #9a5f17;
  --amber-deep: #7c4a0d;
  --lamp: #6b3f0a;
  --teal: #0e6f78;
  --rose: #ab3a63;
  --green: #2e7a41;
  --violet: #5a3fa2;
  --on-amber: #fffaf0;
  --code-bg: #d7e6f7;
  --bg:
    radial-gradient(1000px 520px at 84% -8%, rgba(120, 190, 240, .38), transparent 62%),
    radial-gradient(760px 420px at 6% 6%, rgba(150, 220, 230, .30), transparent 60%),
    linear-gradient(172deg, #f4f9ff 0%, #e8f1fb 45%, #dbe8f7 100%);
  --shadow: 0 14px 34px -20px rgba(30, 60, 100, .35);
}

/* Lilac — the mothyfamily Discord server icon, read from pixels, not from a description. The icon
   is 1024x1024 and 24% of its pixels are #ffffff: a WHITE page with a lilac ring (measured
   #b284c8, #8877a4, #989bca, #d5bed6), soft cyan and peach highlights, and one deep plum (#5a3c58).
   So the ground is the icon's white, the panels are its light lilac, the accent is its plum, and the
   two background washes are its own ring colours at low alpha. Mode is light, so every
   [data-mode=light] override applies. Every pair was measured against white before writing: body text
   15.2:1, muted copy 6.75:1 on a white card (the pair that always fails on a light background), plum
   links 7.0:1, white-on-plum 7.0:1, hairline 1.54:1. Re-prove with node tools/theme-contrast.js. */
[data-theme="lilac"] {
  --ink: #f7f4fb;
  --ink-2: #efeaf6;
  --ink-3: #e6dff1;
  --panel: #ffffff;   /* the icon's ground: 197,122 of its pixels are exactly #ffffff */
  --panel-2: #f2ecf9;
  --line: #d8cbec;
  --line-soft: #e9e2f4;
  --text: #2c2138;
  --text-dim: #4a3d5c;
  --text-mute: #625476;
  --amber: #6f4a86;   /* the plum accent — links, section numbers, pills, focus ring, active nav */
  --amber-deep: #5a3c6e;
  --lamp: #4f3368;
  --teal: #146978;    /* the icon's periwinkle, darkened to clear 4.5:1 on white */
  --rose: #a0426e;
  --green: #2f7a52;
  --violet: #6a4a9c;
  --on-amber: #ffffff;
  --code-bg: #efeaf6;
  --bg:
    radial-gradient(1000px 520px at 84% -8%, rgba(178, 132, 200, .20), transparent 62%),
    radial-gradient(760px 420px at 6% 6%, rgba(143, 167, 205, .16), transparent 60%),
    linear-gradient(172deg, #fbf9ff 0%, #f3eefa 45%, #eadff6 100%);
  --shadow: 0 14px 34px -20px rgba(70, 40, 100, .35);
}

* { box-sizing: border-box }
html { scroll-behavior: smooth }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important }
}

body {
  margin: 0;
  /* var(--bg) carries each theme's own wash; the colour under it is the fallback if a gradient
     ever fails to paint, and keeps the page painted when the theme is swapped mid-scroll. */
  background: var(--bg);
  background-color: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px }

/* ---------- header ---------- */
header.site {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--ink) 84%, transparent);
  border-bottom: 1px solid var(--line-soft);
}
.brand-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 0 8px }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0 }
.brand .mark {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px;
  background: linear-gradient(150deg, var(--amber), var(--amber-deep));
  color: var(--on-amber); display: grid; place-items: center;
  font-family: var(--font-display); font-size: 22px; font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 8px 18px -10px var(--amber);
}
.brand .who { display: flex; flex-direction: column; line-height: 1.15; min-width: 0 }
.brand .who b { font-family: var(--font-display); font-size: 19px; letter-spacing: .2px }
.brand .who span { font-size: 11.5px; color: var(--text-mute); letter-spacing: .16em; text-transform: uppercase }
.spacer { flex: 1 }
.theme-ctl { position: relative; display: inline-flex; margin-left: auto }
.theme-btn {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; min-width: 44px;
  padding: 0 12px; background: var(--panel); color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 11px; cursor: pointer;
  font-family: inherit; font-size: 14px; white-space: nowrap;
  transition: .18s color, .18s border-color, .18s background;
}
.theme-btn:hover { color: var(--text); border-color: var(--amber); background: var(--panel-2) }
.theme-btn[aria-expanded="true"] { color: var(--text); border-color: var(--amber); background: var(--panel-2) }
.theme-btn .chev { opacity: .65 }
.theme-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  display: flex; flex-direction: column; gap: 2px; min-width: 190px; padding: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, .8);
}
/* [hidden] has to be stated: .theme-menu sets display:flex, which beats the browser rule for
   the hidden attribute, so a closed menu would still paint. */
.theme-menu[hidden] { display: none }
.titem {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 10px;
  background: transparent; border: 0; border-radius: 10px; cursor: pointer;
  font-family: inherit; font-size: 15px; text-align: left; color: var(--text-dim);
}
.titem:hover, .titem:focus-visible { background: var(--panel-2); color: var(--text) }
.titem[aria-checked="true"] { color: var(--text) }
.titem[aria-checked="true"]::after { content: "\2713"; margin-left: auto; color: var(--amber) }
.dot {
  width: 19px; height: 19px; flex: 0 0 19px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(140, 140, 140, .5), 0 2px 6px -2px rgba(0, 0, 0, .55);
}
.titem .dot { width: 21px; height: 21px; flex: 0 0 21px }
/* Each row paints the theme it selects, never the theme you are in, so these gradients are
   deliberately hard-coded and must track the palette blocks above. The button's own dot reads
   the live attribute, so it follows the theme with no JS involved. */
.t-dark   .dot { background: linear-gradient(150deg, #26211a 0%, #14110d 55%, #f0a344 100%) }
.t-light  .dot { background: linear-gradient(150deg, #fffdf8 0%, #efe8dc 55%, #b4670f 100%) }
.t-grape  .dot { background: linear-gradient(150deg, #c9a9ff 0%, #2b1b41 52%, #f4b877 100%) }
.t-noir   .dot { background: linear-gradient(150deg, #b98cff 0%, #0a060d 55%, #8b5cf6 100%) }
.t-pastel .dot { background: linear-gradient(150deg, #bfe0f7 0%, #f4f9ff 48%, #7fb8e8 100%) }
.t-lilac  .dot { background: linear-gradient(150deg, #d5bed6 0%, #ffffff 46%, #b284c8 100%) }
[data-theme="dark"]   .theme-btn .dot { background: linear-gradient(150deg, #26211a 0%, #14110d 55%, #f0a344 100%) }
[data-theme="light"]  .theme-btn .dot { background: linear-gradient(150deg, #fffdf8 0%, #efe8dc 55%, #b4670f 100%) }
[data-theme="grape"]  .theme-btn .dot { background: linear-gradient(150deg, #c9a9ff 0%, #2b1b41 52%, #f4b877 100%) }
[data-theme="noir"]   .theme-btn .dot { background: linear-gradient(150deg, #b98cff 0%, #0a060d 55%, #8b5cf6 100%) }
[data-theme="pastel"] .theme-btn .dot { background: linear-gradient(150deg, #bfe0f7 0%, #f4f9ff 48%, #7fb8e8 100%) }
[data-theme="lilac"]  .theme-btn .dot { background: linear-gradient(150deg, #d5bed6 0%, #ffffff 46%, #b284c8 100%) }
/* The word on the button is CSS content for the same reason: it cannot disagree with the theme. */
[data-theme="dark"]   .theme-btn .lbl::after { content: "Dark" }
[data-theme="light"]  .theme-btn .lbl::after { content: "Light" }
[data-theme="grape"]  .theme-btn .lbl::after { content: "Grape" }
[data-theme="noir"]   .theme-btn .lbl::after { content: "Noir" }
[data-theme="pastel"] .theme-btn .lbl::after { content: "Pastel" }
[data-theme="lilac"]  .theme-btn .lbl::after { content: "Lilac" }

.icon-btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--text-dim);
  border-radius: 10px; padding: 7px 12px; cursor: pointer; font-size: 14px;
  font-family: inherit; transition: .18s color, .18s border-color, .18s background;
  white-space: nowrap;
}
.icon-btn:hover { color: var(--text); border-color: var(--amber); background: var(--panel-2) }
.icon-btn:focus-visible, a:focus-visible, button:focus-visible, .spot:focus-visible {
  outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 6px;
}
nav.site { display: flex; gap: 4px; overflow-x: auto; padding: 0 0 10px; scrollbar-width: thin }
nav.site a {
  color: var(--text-dim); text-decoration: none; font-size: 14.5px;
  padding: 6px 11px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent; transition: .16s;
}
nav.site a:hover { color: var(--text); background: var(--panel-2); border-color: var(--line-soft) }
nav.site a[aria-current="page"] {
  color: var(--on-amber); background: var(--amber); border-color: var(--amber); font-weight: 600;
}
[data-theme="light"] nav.site a[aria-current="page"] { color: #fff9ef }

/* ---------- hero + typography ---------- */
.hero { padding: 54px 0 22px; position: relative }
.kicker {
  font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber); font-weight: 700; margin: 0 0 10px;
}
h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 5.4vw, 56px); line-height: 1.08;
  margin: 0 0 14px; letter-spacing: -.5px;
}
h1 .glow { color: var(--amber) }
.lede { font-size: clamp(19px, 2.1vw, 23px); color: var(--text-dim); max-width: 62ch; margin: 0 0 22px }
.lede.small { font-size: 19px }

main { padding-bottom: 40px }
section { margin: 46px 0 }
section > h2 {
  font-family: var(--font-display); font-size: clamp(25px, 3.1vw, 34px);
  margin: 0 0 6px; letter-spacing: -.2px;
}
section > h2 .n {
  font-family: var(--font-mono); font-size: 13px; color: var(--amber);
  display: block; letter-spacing: .18em; margin-bottom: 6px; font-weight: 600;
}
.sub { color: var(--text-mute); margin: 0 0 22px; max-width: 66ch }
h3 { font-family: var(--font-display); font-size: 21px; margin: 26px 0 8px }
h4 { font-size: 16px; margin: 18px 0 6px; color: var(--text-dim); letter-spacing: .02em }
p { margin: 12px 0 }
a { color: var(--amber) }
a:hover { color: var(--lamp) }
hr { border: 0; border-top: 1px solid var(--line-soft); margin: 34px 0 }
small { font-size: 14px; color: var(--text-mute) }
code, .mono {
  font-family: var(--font-mono); font-size: .92em;
  background: var(--code-bg); padding: .1em .4em; border-radius: 5px;
}

/* ---------- "in plain words" box ---------- */
.plain {
  border: 1px solid var(--line); border-left: 4px solid var(--amber);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border-radius: var(--radius); padding: 18px 22px; margin: 22px 0 8px;
  box-shadow: var(--shadow);
}
.plain b.tag {
  display: block; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--amber); margin-bottom: 6px;
}
.plain p { margin: 6px 0 }

/* ---------- the hero action buttons ---------- */
/* A landing page needs one thing to press, and today it has none. Two buttons, the live service
   first. 44px min-height is the phone rule, not a decoration. `on-amber` ON `--amber` is a pair
   measured by tools/theme-contrast.js (7.73:1 dark, 5.02:1 pastel), so the filled button stays
   readable in all five palettes; the outline button is amber-on-panel, also measured. */
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0 4px }
a.cta {
  display: inline-flex; align-items: center; min-height: 44px; padding: 12px 20px;
  border-radius: 12px; text-decoration: none; font-weight: 650; font-size: 16.5px;
  background: var(--amber); color: var(--on-amber); border: 1px solid transparent;
  transition: .2s transform, .2s border-color;
}
a.cta:hover { transform: translateY(-2px); color: var(--on-amber) }
a.cta.ghost { background: transparent; color: var(--amber); border-color: var(--line) }
a.cta.ghost:hover { color: var(--lamp); border-color: color-mix(in srgb, var(--amber) 55%, var(--line)) }
[data-mode="light"] a.cta.ghost { color: var(--amber-deep) }

/* ---------- cards ---------- */
.grid { display: grid; gap: 16px }
.grid.c2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) }
.grid.c3 { grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)) }
.card {
  border: 1px solid var(--line); background: var(--panel);
  border-radius: var(--radius); padding: 20px; position: relative;
  box-shadow: var(--shadow); transition: .2s transform, .2s border-color;
}
.card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--amber) 55%, var(--line)) }
.card h3, .card h3:first-child { margin-top: 0 }
.card .em { font-size: 30px; line-height: 1; display: block; margin-bottom: 10px }
.card .meaning { font-size: 13.5px; color: var(--text-mute); font-style: italic; margin: -4px 0 10px }
.card .body-sm { font-size: 16px; color: var(--text-dim) }
.card.accent-amber { border-left: 4px solid var(--amber) }
.card.accent-teal { border-left: 4px solid var(--teal) }
.card.accent-rose { border-left: 4px solid var(--rose) }
.card.accent-green { border-left: 4px solid var(--green) }
.card.accent-violet { border-left: 4px solid var(--violet) }
a.card { text-decoration: none; color: inherit; display: block }
a.card:hover { color: inherit }
a.card .go { color: var(--amber); font-size: 14.5px; font-weight: 600; margin-top: 12px; display: block }

/* ---------- pills ---------- */
/* Status labels. `nowrap` is deliberate — a pill is one thought, and a wrapped pill reads as
   two. The cost is a hard floor on width: a long label cannot shrink, so it widens its card.
   Measured 2026-10-24: a 41-character label (≈290px) inside a card whose content box is 288px at
   320px overflowed the phone by 10px, while a 36-character label in the same layout fits. Keep
   pill text under ~36 characters; tools/mobile-probe.js catches it at 320px. */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em;
  padding: 3px 10px; border-radius: 999px; border: 1px solid; white-space: nowrap;
}
.pill.live   { color: var(--green); border-color: color-mix(in srgb, var(--green) 45%, transparent); background: color-mix(in srgb, var(--green) 12%, transparent) }
.pill.build  { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 45%, transparent); background: color-mix(in srgb, var(--amber) 12%, transparent) }
.pill.plan   { color: var(--teal);  border-color: color-mix(in srgb, var(--teal) 45%, transparent); background: color-mix(in srgb, var(--teal) 12%, transparent) }
.pill.decide { color: var(--rose);  border-color: color-mix(in srgb, var(--rose) 45%, transparent); background: color-mix(in srgb, var(--rose) 12%, transparent) }
.pill.retire { color: var(--text-mute); border-color: var(--line); background: var(--ink-3) }
.pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 4px }

/* ---------- callouts ---------- */
.note, .warn, .good, .ask {
  border-radius: var(--radius-sm); padding: 14px 18px; margin: 18px 0;
  border: 1px solid var(--line); background: var(--panel-2);
}
.note { border-left: 4px solid var(--teal) }
.warn { border-left: 4px solid var(--rose) }
.good { border-left: 4px solid var(--green) }
.ask  { border-left: 4px solid var(--violet) }
.note b, .warn b, .good b, .ask b { display: block; margin-bottom: 4px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase }
.note b { color: var(--teal) } .warn b { color: var(--rose) }
.good b { color: var(--green) } .ask b { color: var(--violet) }
.note p, .warn p, .good p, .ask p { margin: 6px 0; font-size: 16.5px }

/* ---------- key/value ---------- */
.kv { display: grid; grid-template-columns: minmax(110px, 180px) 1fr; gap: 0 16px; margin: 14px 0 }
.kv > div { padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 16.5px }
.kv .k { color: var(--text-mute); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; padding-top: 12px }
.kv .v b { color: var(--lamp) }
[data-mode="light"] .kv .v b { color: var(--amber-deep) }

/* ---------- lists ---------- */
ol.steps { list-style: none; counter-reset: st; margin: 18px 0; padding: 0 }
ol.steps > li { counter-increment: st; position: relative; padding: 0 0 16px 52px }
ol.steps > li::before {
  content: counter(st); position: absolute; left: 0; top: 1px;
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--amber);
  color: var(--amber); font-weight: 700; font-family: var(--font-display); font-size: 17px;
}
ol.steps > li b { color: var(--text) }
ul.ticks { list-style: none; padding: 0; margin: 14px 0 }
ul.ticks li { padding-left: 28px; position: relative; margin: 8px 0; font-size: 16.5px }
ul.ticks li::before { content: "\2713"; position: absolute; left: 2px; color: var(--green); font-weight: 700 }
ul.cross li::before { content: "\2715"; color: var(--rose); font-size: 14px }
ul.dots { list-style: none; padding: 0; margin: 12px 0 }
ul.dots li { padding-left: 20px; position: relative; margin: 7px 0; font-size: 16.5px }
ul.dots li::before { content: "\B7"; position: absolute; left: 4px; color: var(--amber); font-weight: 900; font-size: 22px; line-height: 1.1 }

/* ---------- tables ---------- */
.tbl-scroll { overflow-x: auto }
.tbl { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 16px }
.tbl th, .tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top }
.tbl th { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-mute) }
.tbl tr:hover { background: var(--panel-2) }
/* Zebra striping. The service tables are wide, and a person scanning for one word loses the row
   they are reading. A 62% tint of the panel, so the text-on-panel and text-on-card ratios
   measured by tools/theme-contrast.js still hold — nothing in this rule touches a colour pair. */
.tbl tbody tr:nth-child(even) { background: color-mix(in srgb, var(--panel-2) 62%, var(--panel)) }
.tbl td b { color: var(--lamp) }
[data-mode="light"] .tbl td b { color: var(--amber-deep) }