/* Fonts: Latin subsets, served from our own domain (CSP font-src 'self'). Both OFL. */
@font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; src: url("/fonts/martian-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("/fonts/schibsted-grotesk-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* ==========================================================================
   Playtronics: The Coverage Matrix
   Served as /assets/site.css (CSP style-src 'self').
   No inline style attributes anywhere in the markup.
   ========================================================================== */

/* ---- 1. Tokens. Plain hex first, then oklch, then light-dark() ---------- */
:root {
  --paper: #f9fafb;
  --ink: #1d2129;
  --ink-muted: #686d77;
  --rule: #d9dce0;
  --cell: #f1f2f4;
  --hi: #ebe35c;
  --hi-soft: #f8f5d2;
  --link: #2f4fb3;
  --placeholder: #a35d1f;
  --ph-strong: #8a4b16;
  --fixed-ink: #1d2129;
  --head-bg: #1d2129;
  --head-fg: #f9fafb;
  --band-bg: #1d2129;
  --band-fg: #f9fafb;
  --cov-bg: #ebe35c;
  --cov-fg: #1d2129;
  --cov-line: transparent;
  --cov-soft: #f8f5d2;
  --hi-edge: #c4b81c;
  --ph-on-hi: #6f3c10;
  --shadow: rgba(20, 24, 32, .28);

  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Martian Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gut: max(1rem, env(safe-area-inset-left), env(safe-area-inset-right), 3vw);
  --max: 100rem;
  --bar-h: 3.5rem;
  color-scheme: light;
}

@supports (color: oklch(0 0 0)) {
  :root {
    --paper: oklch(0.985 0.002 250);
    --ink: oklch(0.21 0.015 260);
    --ink-muted: oklch(0.50 0.012 260);
    --rule: oklch(0.88 0.005 260);
    --cell: oklch(0.965 0.004 260);
    --hi: oklch(0.93 0.16 103);
    --hi-soft: oklch(0.97 0.06 103);
    --link: oklch(0.45 0.16 262);
    --placeholder: oklch(0.55 0.13 55);
    --ph-strong: oklch(0.46 0.12 55);
    --fixed-ink: oklch(0.21 0.015 260);
    --head-bg: oklch(0.21 0.015 260);
    --head-fg: oklch(0.985 0.002 250);
    --band-bg: oklch(0.21 0.015 260);
    --band-fg: oklch(0.985 0.002 250);
    --cov-bg: oklch(0.93 0.16 103);
    --cov-fg: oklch(0.21 0.015 260);
    --cov-soft: oklch(0.97 0.06 103);
    --hi-edge: oklch(0.78 0.16 100);
    --ph-on-hi: oklch(0.40 0.11 55);
    --shadow: oklch(0.2 0.02 260 / .28);
  }
}

/* Dark scheme: the highlighter becomes a text-and-underline treatment. */
@supports (color: light-dark(#000, #fff)) and (color: oklch(0 0 0)) {
  :root {
    color-scheme: light dark;
    --paper: light-dark(oklch(0.985 0.002 250), oklch(0.19 0.01 260));
    --ink: light-dark(oklch(0.21 0.015 260), oklch(0.95 0.004 260));
    --ink-muted: light-dark(oklch(0.50 0.012 260), oklch(0.75 0.012 260));
    --rule: light-dark(oklch(0.88 0.005 260), oklch(0.34 0.012 260));
    --cell: light-dark(oklch(0.965 0.004 260), oklch(0.225 0.012 260));
    --hi-soft: light-dark(oklch(0.97 0.06 103), oklch(0.235 0.022 103));
    --link: light-dark(oklch(0.45 0.16 262), oklch(0.80 0.10 262));
    --placeholder: light-dark(oklch(0.55 0.13 55), oklch(0.80 0.11 65));
    --ph-strong: light-dark(oklch(0.46 0.12 55), oklch(0.82 0.11 65));
    --head-bg: light-dark(oklch(0.21 0.015 260), oklch(0.28 0.014 260));
    --head-fg: light-dark(oklch(0.985 0.002 250), oklch(0.97 0.004 260));
    --band-bg: light-dark(oklch(0.21 0.015 260), oklch(0.13 0.01 260));
    --band-fg: light-dark(oklch(0.985 0.002 250), oklch(0.97 0.004 260));
    --cov-bg: light-dark(oklch(0.93 0.16 103), oklch(0.255 0.035 103));
    --cov-fg: light-dark(oklch(0.21 0.015 260), oklch(0.93 0.16 103));
    --cov-line: light-dark(transparent, oklch(0.93 0.16 103));
    --cov-soft: light-dark(oklch(0.97 0.06 103), oklch(0.225 0.018 103));
    --hi-edge: light-dark(oklch(0.78 0.16 100), oklch(0.93 0.16 103));
    --shadow: light-dark(oklch(0.2 0.02 260 / .28), oklch(0 0 0 / .6));
  }
}

/* ---- 2. Base ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { text-wrap: balance; font-weight: 750; letter-spacing: -0.02em; line-height: 1.05; }
p, li, td { text-wrap: pretty; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
::selection { background: var(--hi); color: var(--fixed-ink); }
ul[class], ol[class] { list-style: none; padding: 0; }
button { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

.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;
}
.skip {
  position: absolute; left: var(--gut); top: .5rem; z-index: 50;
  padding: 0 1rem; min-height: 2.75rem; display: inline-flex; align-items: center; background: var(--ink); color: var(--paper);
  font: 600 .875rem/1 var(--sans); transform: translateY(-200%);
}
.skip:focus { transform: none; }

.mono, .sec-label, .k {
  font-family: var(--mono);
  font-stretch: 87.5%;
  font-size: .8125rem;
  line-height: 1.4;
  letter-spacing: .02em;
  font-weight: 450;
}

/* Visible, unfilled facts */
.ph {
  color: var(--placeholder);
  outline: 1px dashed currentColor;
  outline-offset: 1px;
  border-radius: 2px;
  padding-inline: .15em;
  font-weight: 500;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Small dashed notes (unused on the live page) */
.note {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem;
  font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem; line-height: 1.45;
  color: var(--placeholder);
  border: 1px dashed currentColor;
  padding: .45rem .65rem;
  max-width: 100%;
}
.note b { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }

/* ---- 3. Header ----------------------------------------------------------- */
.site-head {
  border-bottom: 1px solid var(--rule);
}
.site-head .wrap {
  display: flex; align-items: center; gap: 1rem;
  min-height: 4.25rem;
}
.wordmark {
  font-weight: 850; font-size: 1.375rem; letter-spacing: -0.035em;
  color: var(--ink); text-decoration: none; line-height: 1;
  padding-block: .75rem;
  margin-right: auto;
}
.wordmark .dot {
  display: inline-block;
  background: var(--hi); color: var(--fixed-ink);
  padding: 0 .1em; margin-left: .04em;
}
.site-nav { display: flex; align-items: center; gap: .5rem; }
.menu-btn, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.75rem; padding: 0 1rem;
  font: 600 .9375rem/1 var(--sans);
  border: 1px solid var(--ink);
  background: transparent; color: var(--ink);
  text-decoration: none; cursor: pointer;
  white-space: nowrap;
}
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ink:hover { background: color-mix(in oklch, var(--ink) 86%, var(--paper)); }
.menu-btn:hover, .btn:not(.btn-ink):hover { background: var(--cell); }

#nav-list {
  /* Popover (mobile). Fallback placement when anchor positioning is missing. */
  position: fixed; inset: 4.5rem var(--gut) auto auto; margin: 0;
  min-width: min(16rem, calc(100vw - 2rem));
  padding: .375rem; border: 1px solid var(--ink);
  background: var(--paper); color: var(--ink);
  box-shadow: 0 18px 40px -18px var(--shadow);
}
#nav-list a {
  display: flex; align-items: center; min-height: 2.75rem; padding: 0 .75rem;
  color: var(--ink); text-decoration: none; font-weight: 500;
}
#nav-list a:hover { background: var(--cell); }
#nav-list .n { font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem; color: var(--ink-muted); margin-right: .6rem; }

@supports (anchor-name: --a) and (position-area: block-end) {
  .menu-btn { anchor-name: --menu; }
  #nav-list { position-anchor: --menu; inset: auto; position-area: block-end span-inline-start; margin-top: .5rem; }
}

@media (width >= 60rem) {
  .menu-btn { display: none; }
  #nav-list {
    display: flex; gap: .125rem;
    position: static; inset: auto; margin: 0 .5rem 0 0; padding: 0;
    border: 0; background: none; box-shadow: none; min-width: 0; overflow: visible;
  }
  #nav-list a { padding: 0 .65rem; font-size: .9375rem; }
  #nav-list .n { display: none; }
}
@supports not selector(:popover-open) {
  .menu-btn { display: none; }
  #nav-list { display: flex; flex-wrap: wrap; position: static; border: 0; box-shadow: none; padding: 0; min-width: 0; background: none; }
}

/* ---- 4. Hero --------------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 4vw, 3.5rem) clamp(2rem, 3.5vw, 3rem); }
.hero .eyebrow {
  font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem; letter-spacing: .02em;
  color: var(--ink-muted);
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: clamp(1.25rem, 2vw, 1.5rem);
}
.hero .eyebrow::before {
  content: ""; width: .75rem; height: .75rem; background: var(--hi); outline: 1px solid var(--fixed-ink); outline-offset: -1px;
  flex: none;
}
.hero h1 {
  font-weight: 800;
  font-size: clamp(2.6rem, 1.15rem + 5.4vw, 5.75rem);
  line-height: .96;
  letter-spacing: -0.045em;
}
.hero-foot {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  display: grid; gap: 1.5rem 2rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
}
.hero-sub { grid-column: 1 / -1; font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); line-height: 1.5; max-width: 36rem; }
.hero-cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-who {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .4rem;
  padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 1rem;
}
.hero-who .k { color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; margin-right: .35rem; }
.hero-who a { margin-left: .5rem; display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -.75rem; }
.hero-cta .btn { min-height: 3.25rem; padding-inline: 1.35rem; font-size: 1rem; }
.btn .arr { font-family: var(--mono); font-weight: 400; }
@media (width < 30rem) {
  .hero-cta .btn { flex: 1 1 100%; }
}
@media (width >= 56rem) {
  .hero-sub { grid-column: 1 / span 8; max-width: 47rem; }
  .hero-cta { grid-column: 9 / -1; justify-content: flex-start; }
}

/* ---- 5. Section scaffolding ---------------------------------------------- */
.sec { border-top: 1px solid var(--rule); padding-block: clamp(2.75rem, 6vw, 5.5rem); scroll-margin-top: 0; }
.sec-head {
  display: grid; gap: .75rem 1.5rem;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.sec-head > * { grid-column: 1 / -1; }
.sec-label { color: var(--ink-muted); padding-top: .35rem; }
.sec-label b { color: var(--ink); font-weight: 650; }
.sec-head h2 { font-size: clamp(1.875rem, 1.25rem + 2.2vw, 3rem); font-weight: 780; letter-spacing: -0.03em; }
.sec-aside { color: var(--ink); max-width: 34rem; }
.sec-aside p + p { margin-top: .75rem; }
@media (width >= 56rem) {
  .sec-label { grid-column: 1 / span 2; }
  .sec-head h2 { grid-column: 3 / span 6; }
  .sec-aside { grid-column: 9 / span 4; padding-top: .3rem; }
}

/* ---- 6. Coverage: audience bar + matrix (the signature moment) ----------- */
.coverage { border-top: 1px solid var(--rule); }
.coverage > .sec { border-top: 0; }
#who { padding-block: clamp(2rem, 3vw, 2.5rem) clamp(1.5rem, 2.5vw, 2rem); }
#who .sec-head { margin-bottom: clamp(1.25rem, 2vw, 1.75rem); }
#services { padding-top: clamp(1.75rem, 2.5vw, 2.25rem); }
.aside-hint { color: var(--ink-muted); font-size: .9375rem; }

/* Sticky bars must never hide keyboard focus (WCAG 2.4.11).
   --bar-pad is the bar's live height + 10px (set by the script); the bar grows to
   88-112px when its status line wraps at 48-82rem, so a fixed 4.5rem is not enough. */
@media (height > 30rem) and (width >= 48rem) {
  html { scroll-padding-top: var(--bar-pad, 7.5rem); }
  html:has(.pick-pill:not([hidden])) { scroll-padding-bottom: 4.5rem; }
  html:has(.pick:checked) { scroll-padding-bottom: 5.5rem; }
}
/* Narrow: the filter bar is not sticky, the email tray is (always). */
@media (height > 30rem) and (width < 48rem) {
  html { scroll-padding-bottom: 5.5rem; }
}

/* Audience descriptions: always visible, the picked one is marked. */
.who-list {
  display: grid; gap: 0 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.who-item {
  border-top: 1px solid var(--rule);
  padding: .85rem 0 1rem;
  box-shadow: inset 0 3px 0 var(--who-edge, transparent);
}
.who-t { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.who-item p { margin-top: .35rem; font-size: .9688rem; line-height: 1.5; }
.who-on {
  display: var(--who-on, none);
  font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem; font-weight: 600; line-height: 1;
  padding: .3rem .4rem; background: var(--hi); color: var(--fixed-ink); letter-spacing: .02em;
}

/* Sticky audience bar */
.layerbar {
  position: sticky; top: 0; z-index: 20;
  container-type: scroll-state;
  background: var(--paper);
}
@media (height <= 30rem) { .layerbar { position: static; } }
.layerbar-in { border-block: 1px solid var(--rule); transition: border-color .2s; }
.layerbar fieldset { border: 0; padding: 0; min-width: 0; }
.tabs { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; padding-block: .5rem; }
.tabs-key { font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem; color: var(--ink-muted); margin-right: .5rem; }
.tab { position: relative; display: inline-flex; flex: none; }
.layer-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.tab label {
  display: inline-flex; align-items: center; gap: .55rem;
  min-height: 2.75rem; padding: 0 .85rem;
  font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem; font-weight: 500;
  border: 1px solid var(--rule);
  background: var(--paper); color: var(--ink);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.tab label::before { content: ""; width: .75rem; height: .75rem; flex: none; border: 1.5px solid currentColor; border-radius: 50%; }
.tab:hover label { border-color: var(--ink); }
.layer-input:checked + label { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.layer-input:checked + label::before { background: var(--hi); border-color: currentColor; box-shadow: inset 0 0 0 2px var(--ink); }
.layer-input:focus-visible + label { outline: 2px solid var(--link); outline-offset: 2px; }
.bar-status { display: none; margin-left: auto; font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem; color: var(--ink-muted); }
.bar-status [data-for] { display: none; }
.bar-status [data-for="all"] { display: inline; }
.bar-status b { color: var(--ink); font-weight: 650; }
@supports (container-type: scroll-state) {
  @container scroll-state(stuck: top) {
    .layerbar-in { border-top-color: transparent; border-bottom-color: var(--ink); }
    .bar-status { display: block; }
  }
}
@media (width < 60rem) { .tabs-key { display: none; } }
/* Narrow (phones, 200% zoom): every option visible, wrapping onto a second row.
   The bar scrolls away with the page here; the email tray below is the pinned element. */
@media (width < 48rem) {
  .layerbar { position: static; }
  .bar-status { display: none !important; }
  .tabs { padding-block: .625rem; }
  .tab label { padding: 0 .65rem; }
  /* Plain selected state here (ink fill), so two rows hold all five options at 360px+. */
  .tab label::before { display: none; }
}

/* Legend */
.legend {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center;
  margin-top: 1rem;
  font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem; color: var(--ink-muted);
}
.legend li { display: inline-flex; align-items: center; gap: .45rem; }
.legend .lg-on { display: none; }
.sw { width: .8rem; height: .8rem; border: 1px solid var(--rule); background: var(--cell); flex: none; }
.sw-hi { background: var(--cov-soft); border: 2px solid var(--ink); }
.sw-soft { background: var(--cov-soft); border-color: var(--hi-edge); box-shadow: inset 3px 0 0 var(--hi-edge); }
.sw-off { background: var(--paper); }

/* Matrix */
.mx-wrap { container: mx / inline-size; }
.mx {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.mx-col {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  min-width: 0;
  /* default (Everyone): every column is neutral */
  --c-bg: var(--cell);
  --c-fg: var(--ink);
  --c-id: var(--ink-muted);
  --c-ph: var(--placeholder);
  --c-line: transparent;
  --c-edge: transparent;
  --w-bg: var(--paper);
  --h-bg: var(--head-bg);
  --h-fg: var(--head-fg);
  --h-code: color-mix(in oklch, var(--h-fg) 72%, var(--h-bg));
  --h-soft: color-mix(in oklch, var(--h-fg) 86%, var(--h-bg));
  --c-badge: hidden;
  --st-in: none;
  --st-out: none;
}
.mx-cells { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 1px; }
.mx-cells > li { display: grid; min-width: 0; }

.mx-head {
  background: var(--h-bg); color: var(--h-fg);
  padding: 1.1rem 1.1rem 1.25rem;
  display: grid; align-content: start; gap: .4rem;
  position: relative;
}
.mx-code { font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem; letter-spacing: .04em; color: var(--h-code); }
.mx-head h3 { font-size: clamp(1.1875rem, 1rem + .4vw, 1.375rem); font-weight: 700; letter-spacing: -0.02em; padding-right: 4.5rem; }
.mx-sum { font-size: .9375rem; line-height: 1.45; color: var(--h-soft); }
.mx-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.mx-tags span:not(.sr-only) {
  font-family: var(--mono); font-stretch: 80%; font-size: .8125rem; line-height: 1;
  padding: .3rem .4rem;
  border: 1px solid color-mix(in oklch, var(--h-fg) 35%, var(--h-bg));
  color: var(--h-soft);
}
.mx-covered {
  visibility: var(--c-badge, hidden);
  position: absolute; top: 1rem; right: 1rem;
  font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem; font-weight: 650; line-height: 1;
  padding: .35rem .45rem;
  background: var(--hi); color: var(--fixed-ink);
}

.mx-when {
  background: var(--w-bg); color: var(--c-fg);
  padding: 1rem 1.1rem 1.15rem;
  box-shadow: inset 4px 0 0 var(--c-edge);
}
.mx-when .k { display: block; color: var(--c-id); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .35rem; }
.mx-when p { font-size: .9375rem; line-height: 1.45; }

/* Each activity is a checkbox: tick it and its code goes into the email. */
.mx-cell {
  display: grid; align-content: start; gap: .45rem;
  width: 100%; min-height: 6.25rem;
  padding: .95rem 3rem 1.1rem 1.1rem;
  background: var(--c-bg); color: var(--c-fg);
  box-shadow: inset 4px 0 0 var(--c-edge), inset 0 -2px 0 var(--c-line);
  cursor: pointer;
  position: relative;
}
.mx-cell .id { font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem; letter-spacing: .03em; color: var(--c-id); font-weight: 500; order: 2; }
.mx-cell .txt { font-size: 1rem; line-height: 1.4; font-weight: 500; text-decoration: underline 2px var(--c-line); text-underline-offset: .25em; }
.mx-cell .ph { color: var(--c-ph); }
.pick {
  appearance: none; -webkit-appearance: none;
  position: absolute; top: .8rem; right: .8rem; margin: 0;
  width: 1.5rem; height: 1.5rem;
  border: 1.5px solid var(--c-id); border-radius: 0;
  background: var(--paper) center / 1rem no-repeat;
  cursor: pointer;
  scroll-margin-block: 1.25rem;
}
.pick:checked {
  border-color: var(--ink);
  background-color: var(--fixed-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3C/svg%3E");
}
.pick:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.mx-cell:hover { box-shadow: inset 4px 0 0 var(--c-edge), inset 0 0 0 1px var(--ink); }
.mx-cell:has(.pick:focus-visible) { outline: 2px solid var(--link); outline-offset: -2px; }
.mx-cell:has(.pick:checked) {
  --c-bg: var(--cov-soft); --c-fg: var(--ink); --c-id: var(--ink);
  --c-ph: var(--ph-strong); --c-line: transparent;
  box-shadow: inset 4px 0 0 var(--c-edge), inset 0 0 0 2px var(--ink);
}
.st { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.st-in { display: var(--st-in); }
.st-out { display: var(--st-out); }

/* Audience states. Each block is written twice inside :is():
   [data-active=…] is the JS path (lets the swap run inside a view transition);
   :not([data-js]):has(#…:checked) is the zero-JS path. A browser without :has()
   drops that branch of the forgiving :is() list and keeps the JS branch. */
.coverage:is([data-active="founder"], [data-active="investor"], [data-active="owner"], [data-active="enterprise"], :not([data-js]):has(.layer-input:not(#l-all):checked)) {
  & .mx-tags [data-tag="all"] { background: var(--hi); color: var(--fixed-ink); border-color: var(--hi); }
  & .legend .lg-on { display: inline-flex; }
  & .bar-status [data-for="all"] { display: none; }
}
.coverage:is([data-active="founder"], :not([data-js]):has(#l-founder:checked)) {
  & .mx-col:not([data-layer~="founder"]) { --c-bg: var(--paper); --c-fg: var(--ink-muted); --w-bg: var(--paper); --h-bg: var(--cell); --h-fg: var(--ink-muted); --h-code: var(--ink-muted); --h-soft: var(--ink-muted); --st-out: block; }
  & .mx-col[data-layer~="founder"] { --c-bg: var(--cov-soft); --c-id: var(--ink); --c-ph: var(--ph-strong); --c-line: var(--cov-line); --c-edge: var(--hi-edge); --w-bg: var(--cov-soft); --c-badge: visible; --st-in: block; }
  & .mx-tags [data-tag="founder"] { background: var(--hi); color: var(--fixed-ink); border-color: var(--hi); }
  & .who-item[data-for="founder"] { --who-on: inline-block; --who-edge: var(--hi-edge); }
  & .bar-status [data-for="founder"] { display: inline; }
}
.coverage:is([data-active="investor"], :not([data-js]):has(#l-investor:checked)) {
  & .mx-col:not([data-layer~="investor"]) { --c-bg: var(--paper); --c-fg: var(--ink-muted); --w-bg: var(--paper); --h-bg: var(--cell); --h-fg: var(--ink-muted); --h-code: var(--ink-muted); --h-soft: var(--ink-muted); --st-out: block; }
  & .mx-col[data-layer~="investor"] { --c-bg: var(--cov-soft); --c-id: var(--ink); --c-ph: var(--ph-strong); --c-line: var(--cov-line); --c-edge: var(--hi-edge); --w-bg: var(--cov-soft); --c-badge: visible; --st-in: block; }
  & .mx-tags [data-tag="investor"] { background: var(--hi); color: var(--fixed-ink); border-color: var(--hi); }
  & .who-item[data-for="investor"] { --who-on: inline-block; --who-edge: var(--hi-edge); }
  & .bar-status [data-for="investor"] { display: inline; }
}
.coverage:is([data-active="owner"], :not([data-js]):has(#l-owner:checked)) {
  & .mx-col:not([data-layer~="owner"]) { --c-bg: var(--paper); --c-fg: var(--ink-muted); --w-bg: var(--paper); --h-bg: var(--cell); --h-fg: var(--ink-muted); --h-code: var(--ink-muted); --h-soft: var(--ink-muted); --st-out: block; }
  & .mx-col[data-layer~="owner"] { --c-bg: var(--cov-soft); --c-id: var(--ink); --c-ph: var(--ph-strong); --c-line: var(--cov-line); --c-edge: var(--hi-edge); --w-bg: var(--cov-soft); --c-badge: visible; --st-in: block; }
  & .mx-tags [data-tag="owner"] { background: var(--hi); color: var(--fixed-ink); border-color: var(--hi); }
  & .who-item[data-for="owner"] { --who-on: inline-block; --who-edge: var(--hi-edge); }
  & .bar-status [data-for="owner"] { display: inline; }
}
.coverage:is([data-active="enterprise"], :not([data-js]):has(#l-enterprise:checked)) {
  & .mx-col:not([data-layer~="enterprise"]) { --c-bg: var(--paper); --c-fg: var(--ink-muted); --w-bg: var(--paper); --h-bg: var(--cell); --h-fg: var(--ink-muted); --h-code: var(--ink-muted); --h-soft: var(--ink-muted); --st-out: block; }
  & .mx-col[data-layer~="enterprise"] { --c-bg: var(--cov-soft); --c-id: var(--ink); --c-ph: var(--ph-strong); --c-line: var(--cov-line); --c-edge: var(--hi-edge); --w-bg: var(--cov-soft); --c-badge: visible; --st-in: block; }
  & .mx-tags [data-tag="enterprise"] { background: var(--hi); color: var(--fixed-ink); border-color: var(--hi); }
  & .who-item[data-for="enterprise"] { --who-on: inline-block; --who-edge: var(--hi-edge); }
  & .bar-status [data-for="enterprise"] { display: inline; }
}

/* No :has() and no JS: the radios cannot drive anything, so hide them and
   print each cell's audience as small mono text instead. */
@supports not selector(:has(a)) {
  .coverage:not([data-js]) .layerbar { display: none; }
  .coverage:not([data-js]) .mx-cell::after,
  .coverage:not([data-js]) .mx-when::after {
    content: "For: " attr(data-for-label);
    display: block; margin-top: .4rem;
    font-family: var(--mono); font-size: .8125rem; color: var(--ink-muted);
  }
}

/* Container queries: 4 → 2 → 1 columns from the matrix's own width */
@container mx (width < 60rem) {
  .mx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container mx (width < 40rem) {
  .mx { grid-template-columns: minmax(0, 1fr); border: 0; background: none; gap: 1.25rem; }
  .mx-col { grid-row: auto; grid-template-rows: none; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
  .mx-cells { grid-row: auto; grid-template-rows: none; }
  .mx-cell { min-height: 0; }
}

/* Scope tray: appears once something is ticked, sticks to the bottom while the matrix is in view. */
.scope {
  display: none;
  position: sticky; bottom: 0; z-index: 15;
  margin-top: 1rem;
  padding: .625rem .75rem .625rem 1rem;
  padding-bottom: max(.625rem, env(safe-area-inset-bottom));
  background: var(--ink); color: var(--paper);
  align-items: center; gap: .5rem 1rem;
  box-shadow: 0 -12px 28px -18px var(--shadow);
}
.mx-form:has(.pick:checked) .scope, .mx-form[data-picked] .scope { display: flex; }
.mx-form:not(:has(.pick:checked)) .scope-clear { display: none; }
.scope-sum { flex-wrap: wrap; }
.scope-next { flex-basis: 100%; font-size: .8125rem; font-family: var(--mono); font-stretch: 87.5%; color: color-mix(in oklch, var(--paper) 82%, var(--ink)); }
.scope-next .ph { color: oklch(0.82 0.11 65); color: light-dark(oklch(0.82 0.11 65), oklch(0.46 0.12 55)); }
@media (width < 48rem) { .scope { display: flex; } .scope-next { display: none; } }
@media (height <= 30rem) { .scope { position: static; } }
.scope-sum { flex: 1 1 0; min-width: 0; display: flex; align-items: baseline; gap: .25rem .75rem; }
.scope-sum b { font-weight: 700; white-space: nowrap; }
/* The drafted subject line, in full. It wraps (never truncates) so it can be read at 200% zoom. */
.scope-ids {
  flex: 1 1 16rem; min-width: 0; overflow-wrap: anywhere;
  font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem;
  color: color-mix(in oklch, var(--paper) 82%, var(--ink));
}
.scope-act { display: flex; gap: .5rem; flex: none; }
.scope .scope-go { background: var(--hi); color: var(--fixed-ink); border-color: var(--hi); }
.scope .scope-go:hover { background: color-mix(in oklch, var(--hi) 85%, #fff); }
.scope .scope-clear { color: var(--paper); border-color: color-mix(in oklch, var(--paper) 45%, var(--ink)); background: transparent; }
.scope .scope-clear:hover { background: color-mix(in oklch, var(--paper) 12%, var(--ink)); }
.scope :focus-visible { outline-color: var(--hi); }
@media (width < 40rem) {
  .scope { padding-inline: .75rem .5rem; gap: .5rem; }
  .scope-ids { display: none; }
  .scope .btn { padding-inline: .75rem; }
}

/* Index for staggering. nth-child fallback first, sibling-index() overrides. */
.mx-col { --ci: 0; }
.mx-col:nth-child(2) { --ci: 1; }
.mx-col:nth-child(3) { --ci: 2; }
.mx-col:nth-child(4) { --ci: 3; }
.mx-cells > li { --ri: 0; }
.mx-cells > li:nth-child(2) { --ri: 1; }
.mx-cells > li:nth-child(3) { --ri: 2; }
@supports (transition-delay: calc(sibling-index() * 1ms)) {
  .mx-col { --ci: calc(sibling-index() - 1); }
  .mx-cells > li { --ri: calc(sibling-index() - 1); }
}
.mx-head { --d: var(--ci); }
.mx-when { --d: calc(var(--ci) + 1); }
.mx-cell { --d: calc(var(--ci) + 2 + var(--ri)); }

@media (prefers-reduced-motion: no-preference) {
  /* Scroll-driven first reveal: cells come up from --cell to their state. */
  @supports (animation-timeline: view()) {
    .mx-when, .mx-cell {
      animation: mx-in linear both;
      animation-timeline: view();
      animation-range: entry calc(var(--d) * 5%) entry calc(65% + var(--d) * 5%);
    }
    /* A ticked cell keeps black text on yellow; never fade it in from --cell (dark in dark mode). */
    .mx-cell:has(.pick:checked) { animation: none; }
  }

  /* Same-document view transition: each cell wipes left to right. */
  .mx-head, .mx-when, .mx-cell { view-transition-class: cell; }
  #hd-cb { view-transition-name: hd-cb; }
  #wh-cb { view-transition-name: wh-cb; }
  #t-cb-1 { view-transition-name: t-cb-1; }
  #t-cb-2 { view-transition-name: t-cb-2; }
  #t-cb-3 { view-transition-name: t-cb-3; }
  #hd-ms { view-transition-name: hd-ms; }
  #wh-ms { view-transition-name: wh-ms; }
  #t-ms-1 { view-transition-name: t-ms-1; }
  #t-ms-2 { view-transition-name: t-ms-2; }
  #t-ms-3 { view-transition-name: t-ms-3; }
  #hd-sa { view-transition-name: hd-sa; }
  #wh-sa { view-transition-name: wh-sa; }
  #t-sa-1 { view-transition-name: t-sa-1; }
  #t-sa-2 { view-transition-name: t-sa-2; }
  #t-sa-3 { view-transition-name: t-sa-3; }
  #hd-pm { view-transition-name: hd-pm; }
  #wh-pm { view-transition-name: wh-pm; }
  #t-pm-1 { view-transition-name: t-pm-1; }
  #t-pm-2 { view-transition-name: t-pm-2; }
  #t-pm-3 { view-transition-name: t-pm-3; }
  /* The sticky bar is captured too and stacked above the cell snapshots,
     so cells scrolled under it cannot wipe over the tabs mid-transition. */
  .layerbar { view-transition-name: layerbar; }
  ::view-transition-group(layerbar) { z-index: 1; }
  ::view-transition-old(layerbar), ::view-transition-new(layerbar) { animation: none; }
  ::view-transition-group(*.cell) { animation-duration: 300ms; }
  ::view-transition-old(*.cell) { animation: none; opacity: 1; }
  ::view-transition-new(*.cell) {
    animation: mx-wipe 300ms cubic-bezier(.25, .8, .25, 1) both;
    mix-blend-mode: normal;
  }
  ::view-transition-new(wh-cb), ::view-transition-new(hd-ms) { animation-delay: 26ms; }
  ::view-transition-new(t-cb-1), ::view-transition-new(wh-ms), ::view-transition-new(hd-sa) { animation-delay: 52ms; }
  ::view-transition-new(t-cb-2), ::view-transition-new(t-ms-1), ::view-transition-new(wh-sa), ::view-transition-new(hd-pm) { animation-delay: 78ms; }
  ::view-transition-new(t-cb-3), ::view-transition-new(t-ms-2), ::view-transition-new(t-sa-1), ::view-transition-new(wh-pm) { animation-delay: 104ms; }
  ::view-transition-new(t-ms-3), ::view-transition-new(t-sa-2), ::view-transition-new(t-pm-1) { animation-delay: 130ms; }
  ::view-transition-new(t-sa-3), ::view-transition-new(t-pm-2) { animation-delay: 156ms; }
  ::view-transition-new(t-pm-3) { animation-delay: 182ms; }

  /* Popover entry */
  #nav-list {
    transition: opacity .16s, translate .16s, display .16s allow-discrete, overlay .16s allow-discrete;
  }
  #nav-list:popover-open { opacity: 1; translate: 0 0; }
  @starting-style {
    #nav-list:popover-open { opacity: 0; translate: 0 -4px; }
  }
}
@keyframes mx-in { from { background-color: var(--cell); opacity: .35; } }
@keyframes mx-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---- 7. How we work: procedure row ---------------------------------------- */
.proc-wrap { container: proc / inline-size; }
.proc {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  counter-reset: step;
}
.proc li { background: var(--paper); padding: 1.25rem 1.2rem 1.5rem; display: grid; align-content: start; gap: .5rem; }
.proc .num { font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem; color: var(--ink-muted); display: flex; justify-content: space-between; }
.proc .num b { font-weight: 650; color: var(--ink); }
.proc h3 { font-size: 1.3125rem; font-weight: 700; }
.proc p { font-size: .9688rem; }
.own { display: grid; gap: .5rem; margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--rule); }
.own dt { font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; }
.own dd { margin: .1rem 0 0; font-size: .9375rem; line-height: 1.45; }
.proc .step-x { font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem; color: var(--ink-muted); }
.proc-cap {
  margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center;
}
.proc-cap .line { color: var(--placeholder); font-weight: 500; }
@container proc (width < 52rem) { .proc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container proc (width < 32rem) { .proc { grid-template-columns: minmax(0, 1fr); } }

/* ---- 8. Dense tables (Work, Team, Site data) ------------------------------ */
.tbl-wrap { container: tbl / inline-size; }
.tbl { font-size: .9688rem; border-top: 1px solid var(--ink); }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: .9rem 1rem .95rem 0; border-bottom: 1px solid var(--rule); }
.tbl thead th {
  font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem; font-weight: 500;
  color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em;
  padding-block: .7rem;
}
.tbl tbody th { font-weight: 650; min-width: 9.5rem; }
.kv tbody th { min-width: 0; }
.tbl td:last-child, .tbl th:last-child { padding-right: 0; }
.tbl-note { margin-top: 1rem; }
@container tbl (width < 46rem) {
  .tbl:not(.kv) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl:not(.kv), .tbl:not(.kv) tbody, .tbl:not(.kv) tr, .tbl:not(.kv) th, .tbl:not(.kv) td { display: block; }
  .tbl:not(.kv) tr { padding-block: .85rem; border-bottom: 1px solid var(--rule); }
  .tbl:not(.kv) th, .tbl:not(.kv) td { border: 0; padding: .2rem 0; }
  .tbl:not(.kv) td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--ink-muted); margin-top: .45rem;
  }
}

.intro { max-width: 40rem; margin-bottom: 1.5rem; }
/* Team: one spec card per person, built like a matrix column (dark head, ruled facts). */
.people { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
.pcard { border: 1px solid var(--rule); background: var(--paper); scroll-margin-top: 1.5rem; }
.pc-head { display: flex; align-items: center; gap: 1rem; padding: 1.1rem; background: var(--head-bg); color: var(--head-fg); }
.pc-head h3 { font-size: 1.375rem; font-weight: 750; }
.pc-head .ph { color: #e7b27a; color: oklch(0.82 0.11 65); }
.pc-title { margin-top: .3rem; font-size: .9688rem; }
.pc-head .photo { width: 5.5rem; }
.pc-facts { display: grid; }
.pc-facts > div { padding: .85rem 1.1rem .95rem; border-top: 1px solid var(--rule); }
.pc-facts > div:first-child { border-top: 0; }
.pc-facts dt { font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .05em; }
.pc-facts dd { margin: .2rem 0 0; font-size: .9688rem; line-height: 1.45; }
.photo {
  flex: none; width: 4.5rem; aspect-ratio: 1; display: grid; place-items: center; text-align: center;
  font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem; font-weight: 500; line-height: 1.2;
  color: var(--placeholder); border: 1px dashed currentColor; background: var(--cell);
}

/* Site data block */
.site-data { display: grid; gap: 1.5rem; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.site-data > * { grid-column: 1 / -1; }
.site-data .sec-label { margin-bottom: .6rem; }
.site-data h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 750; }
.site-data .lede { margin-top: .75rem; max-width: 30rem; }
.kv th { width: 40%; font-weight: 500; }
.kv td { font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem; }
.kv td .val { font-weight: 600; color: var(--ink); }
.kv td a.val { display: inline-flex; align-items: center; min-height: 2.75rem; margin-block: -.75rem; }
.kv .tag {
  display: inline-block; margin-top: .25rem; white-space: nowrap;
  font-size: .8125rem; color: var(--placeholder); border: 1px dashed currentColor; padding: .15rem .4rem;
}
@media (width >= 56rem) {
  .site-data .sd-head { grid-column: 1 / span 4; }
  .site-data .sd-tbl { grid-column: 6 / -1; }
}
@container tbl (width < 46rem) {
  .kv th { width: 42%; }
  .kv .tag { white-space: normal; }
}

/* ---- 9. Contact band ------------------------------------------------------ */
.contact {
  background: var(--band-bg); color: var(--band-fg);
  padding-block: clamp(3rem, 7vw, 6rem);
  --link: var(--hi);
}
.contact .sec-label { color: color-mix(in oklch, var(--band-fg) 70%, var(--band-bg)); }
.contact .sec-label b { color: var(--band-fg); }
.contact h2 { font-size: clamp(2rem, 1.2rem + 3vw, 3.75rem); font-weight: 800; letter-spacing: -0.035em; margin-top: 1.25rem; max-width: 18ch; }
.contact .body { margin-top: 1.25rem; max-width: 34rem; font-size: 1.125rem; color: color-mix(in oklch, var(--band-fg) 88%, var(--band-bg)); }
.contact .ph { color: oklch(0.82 0.11 65); }
.big-mail {
  display: inline-block;
  margin-top: 0;
  font-weight: 800;
  font-size: clamp(1.75rem, .35rem + 7.4vw, 8.5rem);
  letter-spacing: -0.045em; line-height: 1;
  color: var(--band-fg);
  text-decoration: underline;
  text-decoration-color: var(--hi);
  text-decoration-thickness: .07em;
  text-underline-offset: .12em;
  overflow-wrap: anywhere;
  padding-block: .14em;
}
.big-mail:hover { background: var(--hi); color: var(--fixed-ink); text-decoration-color: var(--fixed-ink); }
.contact :focus-visible { outline-color: var(--hi); }
.contact-ways { margin-top: 1.5rem; display: grid; gap: .6rem; max-width: 40rem; font-size: 1.0625rem; color: color-mix(in oklch, var(--band-fg) 88%, var(--band-bg)); }
.contact-ways li { position: relative; padding-left: 1.35rem; }
.contact-ways li::before { content: ""; position: absolute; left: 0; top: .55em; width: .6rem; height: .6rem; background: var(--hi); }
.contact-ways b { color: var(--band-fg); font-weight: 650; }
.contact .sub { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; font-size: 1rem; color: color-mix(in oklch, var(--band-fg) 88%, var(--band-bg)); }
.contact .note { color: oklch(0.82 0.11 65); }
.contact-grid { display: grid; gap: 2.5rem 3rem; grid-template-columns: minmax(0, 1fr); }
.c-next { align-self: start; border-top: 1px solid color-mix(in oklch, var(--band-fg) 30%, var(--band-bg)); padding-top: 1rem; max-width: 34rem; }
.next-one { margin-top: .6rem; font-size: 1.0625rem; color: color-mix(in oklch, var(--band-fg) 88%, var(--band-bg)); }
.next-one b { color: var(--band-fg); font-weight: 650; }
/* Picks follow the visitor to Contact: the same drafted email as the tray in 02. */
.c-picks { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1.25rem; }
.c-picks[hidden] { display: none; }
.contact .c-picks-go { min-height: 3.25rem; padding-inline: 1.35rem; font-size: 1rem; background: var(--hi); color: var(--fixed-ink); border-color: var(--hi); white-space: normal; text-align: left; }
.contact .c-picks-go:hover { background: color-mix(in oklch, var(--hi) 85%, #fff); }
.c-picks-sub { flex: 1 1 18rem; min-width: 0; overflow-wrap: anywhere; font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem; color: color-mix(in oklch, var(--band-fg) 82%, var(--band-bg)); }
.c-mail { grid-column: 1 / -1; }
@media (width >= 64rem) {
  .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .c-next { margin-top: 2.6rem; }
}

/* Compact "Email us about these" pill: only after 02, only with picks, never over Contact. */
.pick-pill {
  position: fixed; z-index: 30;
  right: var(--gut); bottom: max(1rem, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 2.75rem; padding: 0 1rem;
  font: 650 .9375rem/1.2 var(--sans); text-decoration: none;
  background: var(--hi); color: var(--fixed-ink); border: 1px solid var(--fixed-ink);
  box-shadow: 0 10px 28px -12px var(--shadow);
}
.pick-pill[hidden] { display: none; }
.pick-pill:hover { background: color-mix(in oklch, var(--hi) 85%, #fff); }
.pick-pill:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
@media (height <= 30rem) { .pick-pill { display: none; } }

/* ---- 10. Footer ------------------------------------------------------------ */
.site-foot { border-top: 1px solid var(--rule); padding-block: 1.75rem 2.25rem; padding-bottom: max(2.25rem, env(safe-area-inset-bottom)); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; }
.foot-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .25rem; font-size: .9375rem; margin-left: -.5rem; }
.foot-links li { display: flex; align-items: center; }
.foot-links a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .5rem; color: var(--ink); }
.foot-links li:first-child { padding-inline: .5rem; color: var(--ink-muted); }
.foot-cat { font-family: var(--mono); font-stretch: 87.5%; font-size: .8125rem; color: var(--ink-muted); }

/* ---- 11. Motion off ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Founder monogram (stands in for a photo) */
.photo.monogram { color: var(--fixed-ink); background: var(--hi); border: 0; font-size: 1.5rem; font-weight: 650; letter-spacing: .02em; }
/* Track record table: outcome column */
.tbl .outcome { white-space: nowrap; }
@container tbl (width < 46rem) { .tbl .outcome { white-space: normal; } }