/* DIGI117 base: tokens for the light theme and the layout primitives that site.css builds on.
   Dark tokens live at the top of site.css (dark is the default). Written Oct 31, 2026 to replace site-kit's base.css. */

@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-display: swap; font-weight: 200 800; src: url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800; src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2-variations"); }

:root {
  --font-body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-heading-weight: 760;
  --font-heading-tracking: -0.028em;
  --font-size-base: 1.0625rem;
  --font-size-small: 0.9375rem;
  --font-size-lede: 1.25rem;
  --font-size-h1: clamp(2.25rem, 5.6vw, 4rem);
  --font-size-h2: clamp(1.75rem, 3.4vw, 2.625rem);
  --font-size-h3: 1.25rem;
  --radius-card: 14px;
  --radius-button: 8px;
  --radius-chip: 8px;
  --radius-field: 8px;
  --shape-cut: 10px;
  --shape-slash: 1;
  --space-gutter: clamp(16px, 4vw, 32px);
  --space-section: clamp(32px, 4vw, 48px); /* Nov 3, 2026: was clamp(56px, 8vw, 112px), read as empty space; then 72px, still too airy */
  --size-content: 1200px;
  --size-prose: 44rem;
  --size-logo: 30px;
}
:root[data-theme="light"] {
  --color-bg: #ffffff;
  --color-surface: #f6f4f1;
  --color-surface-2: #fbe9eb;
  --color-text: #141b24;
  --color-muted: #4f5966;
  --color-link: #b81d30;
  --color-accent: #cf2338;
  --color-on-accent: #ffffff;
  --color-border: #e4e1dc;
  --color-border-strong: #6b7380;
  --color-ink: #141b24;
  --color-brand: #ee3c49;
  --color-focus: #b81d30;
  --color-hero-bg: #f6f4f1;
  --color-hero-text: #141b24;
  --color-hero-muted: #4f5966;
  --color-hero-accent: #c41e33;
  --color-placeholder-bg: #fff3c4;
  --color-placeholder-text: #3d2e00;
  --color-error: #b42318;
  --color-success: #067647;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); line-height: 1.6; }
img, svg, video { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--font-heading); margin: 0 0 .5em; color: var(--color-text); }
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
p { margin: 0 0 1em; }
a { color: var(--color-link); }
code, pre, kbd { font-family: var(--font-mono); font-size: .92em; }
button, input, select, textarea { font: inherit; color: inherit; }

.wrap { width: 100%; margin-inline: auto; padding-inline: var(--space-gutter); }
main > section, main > .faq, main > .ask-band { padding-block: var(--space-section); }
main > .wrap.prose { padding-block: clamp(32px, 5vw, 64px); }
.hero + section:not(.band) { padding-top: var(--space-section); }

/* lists used as rows: navigation, chips, links, cards */
.site-head nav ul, .chips, .foot-links, .cards, .cs-metrics, .tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.cards { display: grid; }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.chips { gap: 8px; margin-top: 22px; }
.chips a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-chip); color: var(--color-text); text-decoration: none; font-size: var(--font-size-small); font-weight: 600; }
.hero .chips a { color: var(--color-hero-text); border-color: color-mix(in srgb, var(--color-hero-muted) 45%, transparent); }
.chips a:hover { background: var(--color-surface); }

@media (min-width: 760px) { .grid-2, .split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 24px; }
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--color-accent); color: var(--color-on-accent); border-radius: var(--radius-button); }
.skip:focus { top: 12px; }
.draft-banner { margin: 0; padding: 6px 16px; text-align: center; font-size: .8125rem; font-weight: 600; background: var(--color-placeholder-bg); color: var(--color-placeholder-text); }

/* forms */
.field { margin: 0 0 16px; display: grid; gap: 6px; }
.field label { font-weight: 600; font-size: var(--font-size-small); }
.contact-form .two { display: grid; gap: 0 16px; }
@media (min-width: 640px) { .contact-form .two { grid-template-columns: 1fr 1fr; } }
.hint { font-size: .8125rem; color: var(--color-muted); }
.form-status { min-height: 1.4em; margin: 12px 0 0; font-weight: 600; }
.form-foot { font-size: .8125rem; color: var(--color-muted); margin-top: 8px; }

/* footer */
.site-foot p { margin: 0; color: var(--color-muted); font-size: var(--font-size-small); }

/* dark-default:start (generated by brand/tools/use.js from tokens.json; do not edit) */
:root:not([data-theme="light"]) {
  --color-bg: #101318;
  --color-surface: #181c22;
  --color-surface-2: #2a191c;
  --color-text: #f5f3f0;
  --color-muted: #b7bcc3;
  --color-link: #ff7884;
  --color-accent: #ff5a67;
  --color-on-accent: #101318;
  --color-border: #2a2f37;
  --color-border-strong: #8b929c;
  --color-ink: #f5f3f0;
  --color-brand: #ff5a67;
  --color-focus: #ff7884;
  --color-hero-bg: #181c22;
  --color-hero-text: #f5f3f0;
  --color-hero-muted: #b7bcc3;
  --color-hero-accent: #ff7884;
  --color-placeholder-bg: #3d2e00;
  --color-placeholder-text: #fff3c4;
  --color-error: #fda29b;
  --color-success: #75e0a7;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
/* dark-default:end */

/* Digi117: the design system on top of site-kit's base.css. Every colour, font, radius and the "cut" come from
   tokens.json, so the three brand options (brand/a-refined, b-cut, c-studio) switch with one file:
   node brand/tools/use.js <direction>. Nothing here names a colour except shadows. See design/system.md. */

/* ---------------------------------------------------------------- base and type */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { font-size: var(--font-size-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { font-weight: var(--font-heading-weight, 700); letter-spacing: var(--font-heading-tracking, -0.02em); }
h1 { line-height: 1.08; text-wrap: balance; }
h2 { line-height: 1.15; text-wrap: balance; }
h3 { font-size: var(--font-size-h3); line-height: 1.3; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
a { text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: var(--color-accent); color: var(--color-on-accent); }
.wrap { max-width: var(--size-content); }
.lede { font-size: var(--font-size-lede); line-height: 1.5; color: var(--color-muted); max-width: 38rem; }
.muted { color: var(--color-muted); }
.small { font-size: var(--font-size-small); }
.i { width: 20px; height: 20px; flex: none; }

/* the section label: a small uppercase line, with the red slash from the logo when the brand asks for it */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-link); }
.eyebrow::before { content: ""; width: calc(9px * var(--shape-slash, 0)); height: 1.05em; margin-right: calc(-10px * (1 - var(--shape-slash, 0))); background: var(--color-brand); transform: skewX(-28deg); border-radius: 1px; }

/* ---------------------------------------------------------------- buttons: the cut corner is a token (0 = none) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: 13px 22px; min-height: 48px; border-radius: var(--radius-button); font-weight: 650; line-height: 1.2; text-decoration: none; background: var(--color-accent); color: var(--color-on-accent); border: 0; clip-path: polygon(var(--shape-cut, 0px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--shape-cut, 0px) * .58)); transition: background-color .15s, transform .15s; }
.btn:hover { text-decoration: none; filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--color-on-accent); outline-offset: -6px; box-shadow: 0 0 0 3px var(--color-focus); }
.btn-quiet { background: transparent; color: var(--color-text); box-shadow: inset 0 0 0 1.5px var(--color-border-strong); }
.btn-quiet:hover { filter: none; background: var(--color-surface); }
.btn-quiet:focus-visible { outline-color: var(--color-focus); }
.btn .arrow { transition: transform .15s; }
.btn:hover .arrow, .more:hover .arrow { transform: translateX(3px); }
.more { display: inline-flex; align-items: center; gap: .35em; font-weight: 650; color: var(--color-link); text-decoration: none; }
.more:hover { text-decoration: underline; }
.actions { gap: 12px; margin: 0; }

/* ---------------------------------------------------------------- header: sticky, the CTA always in reach */
.site-head { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--color-bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--color-border); }
.site-head .wrap { position: relative; min-height: 72px; gap: 8px 24px; }
.brand { display: inline-flex; align-items: center; padding: 10px 0; }
.brand img { height: var(--size-logo); width: auto; }
.site-head nav { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.site-head nav ul { align-items: center; gap: 2px 6px; }
.site-head nav a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-chip); color: var(--color-text); font-weight: 550; font-size: .9375rem; text-decoration: none; }
.site-head nav a:hover { background: var(--color-surface); text-decoration: none; }
.site-head nav a[aria-current="page"] { color: var(--color-link); background: var(--color-surface-2); text-decoration: none; }
.site-head nav li:last-child { margin-left: 10px; }
.site-head nav li:last-child a { background: var(--color-accent); color: var(--color-on-accent); padding: 10px 18px; border-radius: var(--radius-button); font-weight: 650; clip-path: polygon(var(--shape-cut, 0px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--shape-cut, 0px) * .58)); }
.site-head nav li:last-child a:hover { background: var(--color-accent); filter: brightness(1.06); }
.site-head nav li:last-child a:focus-visible { outline: 3px solid var(--color-on-accent); outline-offset: -6px; }
/* phones: the logo and "Contact Us" on one row, the other links in a scrollable row of chips under it */
@media (max-width: 860px) {
  .site-head .wrap { display: block; min-height: 0; padding-top: 6px; padding-bottom: 8px; }
  .site-head nav { justify-content: flex-start; }
  .site-head nav ul { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 2px calc(-1 * var(--space-gutter)) 0; padding: 0 var(--space-gutter); }
  .site-head nav ul::-webkit-scrollbar { display: none; }
  .site-head nav li { flex: none; }
  .site-head nav a { min-height: 38px; padding: 6px 12px; font-size: .9375rem; border: 1px solid var(--color-border); }
  .site-head nav li:first-child a { margin-left: 0; }
  .site-head nav li:last-child { position: absolute; top: 10px; right: var(--space-gutter); margin: 0; }
  .site-head nav li:last-child a { min-height: 42px; padding: 8px 14px; border: 0; }
}

/* ---------------------------------------------------------------- sections */
main section { padding: var(--space-section) 0; }
/* Two neighbours on the same background share one gap instead of stacking two (Nov 3, 2026). */
main > section:not(.band):not(.hero):not(.strip):not([class*="cs-"]) + section:not(.band):not(.cta-band):not([class*="cs-"]),
main > section.band + section.band { padding-top: 0; }
/* No stray margin under the last block of a section: the section padding is the whole gap (Nov 3, 2026). */
main section .wrap > :last-child, main section .wrap > :last-child > :last-child { margin-bottom: 0; }
.band { background: var(--color-surface); }
.section-head { max-width: 46rem; margin-bottom: clamp(20px, 3vw, 32px); }
.section-head h2 { margin-bottom: .35em; }
.section-head p { color: var(--color-muted); margin: 0; font-size: 1rem; max-width: 40rem; }
/* one left edge for every section: .center is kept in the markup but no longer centres */
.section-foot { margin-top: 32px; }
.grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid-3 { display: grid; gap: 20px; }
@media (min-width: 640px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.grid-2 { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .grid-2.wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); } }

/* ---------------------------------------------------------------- hero */
.hero { background: var(--color-hero-bg); color: var(--color-hero-text); padding-top: clamp(36px, 5vw, 72px); padding-bottom: clamp(36px, 5vw, 72px); position: relative; overflow: hidden; }
.hero h1 { color: inherit; max-width: 22ch; margin-bottom: .4em; }
/* the home headline is two statements: what we do, then how (in the quieter hero colour) */
.hero h1 .l1, .hero h1 .l2 { display: block; text-wrap: balance; }
.hero h1 .l2 { color: var(--color-hero-muted); }
.hero-home h1 { font-size: clamp(2.125rem, 1.4rem + 2vw, 3rem); }
.hero .eyebrow { color: var(--color-hero-accent); }
.hero .lede { color: var(--color-hero-muted); }
.hero .btn-quiet { color: var(--color-hero-text); box-shadow: inset 0 0 0 1.5px var(--color-hero-muted); }
.hero .btn-quiet:hover { background: color-mix(in srgb, var(--color-hero-text) 8%, transparent); }
.hero .btn-quiet:focus-visible { outline-color: var(--color-hero-accent); }
.hero-grid { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hero .actions { margin-top: 28px; }
.hero-page { padding-bottom: clamp(32px, 4vw, 56px); }
.hero-page h1 { max-width: 20ch; }
.hero-page .lede + p { color: var(--color-hero-muted); max-width: 38rem; }

/* the 8-week plan board (home hero): drawn in HTML, words from the Digi117 playbook */
.board { margin: 0; background: var(--color-bg); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius-card); box-shadow: 0 1px 2px rgb(15 20 30 / .06), 0 28px 60px -30px rgb(0 0 0 / .45); overflow: hidden; }
.board-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--color-border); }
.board-head img { width: 28px; height: 28px; flex: none; }
.board-head p { margin: 0; line-height: 1.3; min-width: 0; }
.board-head b { display: block; font-size: .9375rem; }
.board-head span { font-size: .8125rem; color: var(--color-muted); }
.board-tag { margin-left: auto; font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--color-surface-2); color: var(--color-link); white-space: nowrap; }
/* one grid for the week header and every row, so the bars sit exactly under their week numbers */
.weeks, .task { display: grid; grid-template-columns: 13.5rem repeat(8, minmax(0, 1fr)); column-gap: 4px; align-items: center; }
.weeks { font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--color-muted); padding: 12px 20px 8px; border-bottom: 1px solid var(--color-border); }
.weeks span { text-align: center; }
.weeks span:first-child { text-align: left; }
.tasks { list-style: none; margin: 0; padding: 0 20px; }
.task { min-height: 48px; border-bottom: 1px solid var(--color-border); }
.task:last-child { border-bottom: 0; }
.task b { font-size: .8438rem; font-weight: 600; line-height: 1.3; padding: 8px 12px 8px 0; letter-spacing: 0; }
.task i { font-style: normal; grid-row: 1; height: 24px; border-radius: 6px; display: flex; align-items: center; padding: 0 8px; font-size: .75rem; font-weight: 650; color: var(--color-text); white-space: nowrap; overflow: hidden; }
/* the phases as a ramp from a pale to the full brand red: easy to read in both themes */
.task.t1 i { grid-column: 2 / span 1; background: color-mix(in srgb, var(--color-brand) 28%, var(--color-bg)); }
.task.t2 i { grid-column: 3 / span 1; background: color-mix(in srgb, var(--color-brand) 42%, var(--color-bg)); }
.task.t3 i { grid-column: 4 / span 4; background: color-mix(in srgb, var(--color-brand) 22%, var(--color-bg)); box-shadow: inset 3px 0 0 var(--color-brand); padding-left: 10px; }
.task.t4 i { grid-column: 8 / span 1; background: color-mix(in srgb, var(--color-brand) 58%, var(--color-bg)); }
.task.t5 i { grid-column: 9 / span 1; background: var(--color-accent); }
.board-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 20px; border-top: 1px solid var(--color-border); background: var(--color-surface); font-size: .8125rem; }
.board-foot span { display: inline-flex; align-items: center; gap: 6px; }
.board-foot .i { width: 16px; height: 16px; color: var(--color-success); }
.board-foot a { margin-left: auto; font-weight: 650; }
@media (max-width: 520px) {
  .weeks, .task { grid-template-columns: 6.75rem repeat(8, minmax(0, 1fr)); column-gap: 2px; }
  .board-head, .weeks, .tasks, .board-foot { padding-left: 14px; padding-right: 14px; }
  .task i { font-size: 0; padding: 0; }
  .task b { font-size: .8125rem; padding-right: 8px; }
  .board-foot a { margin-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .task i { animation: grow .6s cubic-bezier(.2, .7, .2, 1) both; transform-origin: left; }
  .task.t2 i { animation-delay: .1s; } .task.t3 i { animation-delay: .2s; } .task.t4 i { animation-delay: .3s; } .task.t5 i { animation-delay: .4s; }
}
@keyframes grow { from { transform: scaleX(.3); opacity: 0; } to { transform: none; opacity: 1; } }

/* the proof strip under the hero */
.strip { padding: 28px 0 !important; border-bottom: 1px solid var(--color-border); }
.strip h2 { font-size: var(--font-size-small); font-weight: 600; letter-spacing: 0; color: var(--color-muted); margin: 0 0 16px; }
.strip ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px 24px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.strip li { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; align-content: start; }
.strip span { grid-column: 2; align-self: start; }
.strip li .i { grid-row: 1; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: var(--color-surface-2); color: var(--color-link); }
.strip b { font-size: 1rem; }
.strip span { font-size: var(--font-size-small); color: var(--color-muted); }

/* ---------------------------------------------------------------- feature and service cards */
.feature { padding: 4px 0; }
.feature .i-box, .svc .i-box { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--color-surface-2); color: var(--color-link); margin-bottom: 18px; }
.feature .i-box .i, .svc .i-box .i { width: 24px; height: 24px; }
.feature h3 { margin-bottom: .35em; }
.feature p { color: var(--color-muted); margin: 0; }
.svc { position: relative; display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 26px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.svc:hover { border-color: var(--color-border-strong); box-shadow: 0 18px 40px -26px rgb(15 20 30 / .45); transform: translateY(-2px); }
.svc h3 { margin-bottom: .4em; }
.svc h3 a { color: inherit; text-decoration: none; }
.svc h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.svc h3 a:focus-visible { outline: none; }
.svc:has(a:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.svc p { color: var(--color-muted); margin: 0; }
.svc .go { margin-top: auto; padding-top: 16px; font-weight: 650; color: var(--color-link); font-size: var(--font-size-small); }
.band .svc { background: var(--color-bg); }

/* ---------------------------------------------------------------- process */
.process { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 20px; }
@media (min-width: 860px) { .process { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .process li:not(:last-child)::after { right: -28px; } }
.process li { counter-increment: s; position: relative; padding-top: 56px; }
.process li::before { content: counter(s, decimal-leading-zero); position: absolute; top: 0; left: 0; font: 700 1rem/1 var(--font-mono); color: var(--color-link); background: var(--color-bg); padding-right: 14px; z-index: 1; }
.process li::after { content: ""; position: absolute; top: .5rem; left: 0; right: 0; height: 1px; background: var(--color-border-strong); opacity: .6; }
.band .process li::before { background: var(--color-surface); }
.process h3 { margin-bottom: .4em; }
.process p { color: var(--color-muted); margin: 0; }

/* ---------------------------------------------------------------- case studies and their drawn thumbnails */
.cases { display: grid; gap: 24px; }
@media (min-width: 900px) { .cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.case { position: relative; display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; transition: box-shadow .15s, transform .15s; }
.case:hover { box-shadow: 0 22px 48px -28px rgb(15 20 30 / .5); transform: translateY(-2px); }
.case-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.case .tag { font-size: .8125rem; font-weight: 600; color: var(--color-muted); margin: 0 0 8px; }
.case h3 { margin-bottom: .4em; }
.case h3 a { color: inherit; text-decoration: none; }
.case h3 a::after { content: ""; position: absolute; inset: 0; }
.case:has(a:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.case h3 a:focus-visible { outline: none; }
.case p { color: var(--color-muted); margin: 0 0 16px; }
.result { margin-top: auto; display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--radius-chip); background: var(--color-surface-2); color: var(--color-text); font-weight: 650; font-size: .875rem; }
.result .i { width: 16px; height: 16px; color: var(--color-link); }

.thumb { position: relative; aspect-ratio: 16 / 9; background: var(--color-surface); border-bottom: 1px solid var(--color-border); overflow: hidden; clip-path: polygon(var(--shape-cut, 0px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--shape-cut, 0px) * .58)); }
.thumb * { position: absolute; display: block; }
.thumb .win { inset: 14% 8% 0 8%; background: var(--color-bg); border: 1px solid var(--color-border); border-bottom: 0; border-radius: 10px 10px 0 0; box-shadow: 0 10px 30px -18px rgb(15 20 30 / .45); }
/* ad-tech: bars and a line */
.thumb-ads .bars { left: 14%; right: 14%; bottom: 0; top: 34%; background: linear-gradient(to top, var(--color-brand) 0 58%, transparent 0) 0 100% / 9% 100% no-repeat, linear-gradient(to top, var(--color-border-strong) 0 40%, transparent 0) 14% 100% / 9% 100% no-repeat, linear-gradient(to top, var(--color-brand) 0 74%, transparent 0) 28% 100% / 9% 100% no-repeat, linear-gradient(to top, var(--color-border-strong) 0 52%, transparent 0) 42% 100% / 9% 100% no-repeat, linear-gradient(to top, var(--color-brand) 0 86%, transparent 0) 56% 100% / 9% 100% no-repeat, linear-gradient(to top, var(--color-border-strong) 0 64%, transparent 0) 70% 100% / 9% 100% no-repeat, linear-gradient(to top, var(--color-brand) 0 96%, transparent 0) 84% 100% / 9% 100% no-repeat; opacity: .9; }
.thumb-ads .kpi { left: 14%; top: 21%; width: 30%; height: 7%; border-radius: 4px; background: var(--color-border); }
.thumb-ads .kpi2 { left: 48%; top: 21%; width: 18%; height: 7%; border-radius: 4px; background: var(--color-surface-2); }
/* productivity: a phone with a to-do list */
.thumb-app .phone { left: 50%; top: 10%; bottom: -10%; width: 34%; transform: translateX(-50%); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 22px; box-shadow: 0 16px 40px -22px rgb(15 20 30 / .5); }
.thumb-app .row { left: 22%; right: 16%; height: 7%; border-radius: 4px; background: var(--color-border); }
.thumb-app .row::before { content: ""; left: -34%; top: -10%; width: 22%; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--color-border-strong); }
.thumb-app .row.done::before { background: var(--color-brand); border-color: var(--color-brand); }
.thumb-app .r1 { top: 16%; } .thumb-app .r2 { top: 30%; } .thumb-app .r3 { top: 44%; width: 40%; } .thumb-app .r4 { top: 58%; }
.thumb-app .r1, .thumb-app .r2 { opacity: .55; }
/* fraud detection: a traffic line with blocked spikes */
.thumb-fraud .grid-lines { inset: 26% 12% 12% 12%; background: repeating-linear-gradient(to bottom, var(--color-border) 0 1px, transparent 1px 25%); }
.thumb-fraud .spike { bottom: 12%; width: 4%; border-radius: 3px 3px 0 0; background: var(--color-border-strong); }
.thumb-fraud .spike.bad { background: var(--color-brand); }
.thumb-fraud .s1 { left: 16%; height: 22%; } .thumb-fraud .s2 { left: 24%; height: 30%; } .thumb-fraud .s3 { left: 32%; height: 58%; } .thumb-fraud .s4 { left: 40%; height: 26%; } .thumb-fraud .s5 { left: 48%; height: 34%; } .thumb-fraud .s6 { left: 56%; height: 64%; } .thumb-fraud .s7 { left: 64%; height: 28%; } .thumb-fraud .s8 { left: 72%; height: 24%; } .thumb-fraud .s9 { left: 80%; height: 30%; }
.thumb-fraud .shield { right: 13%; top: 26%; width: 11%; aspect-ratio: 1; border-radius: 30% 30% 50% 50%; background: var(--color-accent); }
.thumb-fraud .shield::after { content: ""; left: 30%; top: 26%; width: 36%; height: 20%; border-left: 3px solid var(--color-on-accent); border-bottom: 3px solid var(--color-on-accent); transform: rotate(-45deg); }

/* ---------------------------------------------------------------- testimonial */
.quote { margin: 0; padding: clamp(28px, 5vw, 56px); border-radius: var(--radius-card); background: var(--color-bg); border: 1px solid var(--color-border); position: relative; }
.band .quote { background: var(--color-bg); }
.quote::before { content: "“"; position: absolute; top: .05em; left: clamp(20px, 4vw, 44px); font: 700 4.5rem/1 var(--font-heading); color: var(--color-brand); opacity: .9; }
.quote blockquote { margin: 0; font-size: clamp(1.0625rem, 1.4vw, 1.25rem); line-height: 1.45; font-weight: 500; letter-spacing: -0.01em; padding-top: 1.2em; }
.quote figcaption { margin-top: 20px; color: var(--color-muted); font-size: var(--font-size-small); }
.quote figcaption b { color: var(--color-text); display: block; font-size: 1rem; }

/* ---------------------------------------------------------------- engagements: site-kit's pricing component */
.pricing .cards { gap: 20px; margin-top: 0; }
@media (min-width: 900px) { .pricing .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan { display: flex; flex-direction: column; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 28px; }
.plan h3 { margin-bottom: .2em; }
.plan h3 + .price { margin-top: 18px; }
.plan .price { font: var(--font-heading-weight) clamp(1.5rem, 2.2vw, 1.875rem)/1.15 var(--font-heading); letter-spacing: var(--font-heading-tracking); color: var(--color-text); margin-bottom: 4px; }
.plan p { color: var(--color-muted); }
.plan ul { list-style: none; padding: 0; margin: 0 0 22px; color: var(--color-text); font-size: var(--font-size-small); display: grid; gap: 8px; }
.plan ul li { padding-left: 26px; position: relative; }
.plan ul li::before { content: ""; position: absolute; left: 2px; top: .38em; width: 12px; height: 7px; border-left: 2px solid var(--color-link); border-bottom: 2px solid var(--color-link); transform: rotate(-45deg); }
.plan .btn { margin-top: auto; align-self: stretch; }
.plan:nth-child(2) { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent), 0 28px 60px -34px rgb(15 20 30 / .5); }
.plan:not(:nth-child(2)) .btn { background: transparent; color: var(--color-text); box-shadow: inset 0 0 0 1.5px var(--color-border-strong); }
.plan:not(:nth-child(2)) .btn:focus-visible { outline-color: var(--color-focus); }
.pricing-note { margin: 22px 0 0; font-size: var(--font-size-small); color: var(--color-muted); max-width: 46rem; }

/* ---------------------------------------------------------------- FAQ: site-kit's faq component */
.faq .wrap { display: grid; gap: 0 clamp(24px, 5vw, 72px); }
@media (min-width: 960px) { .faq .wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .faq .wrap > h2 { grid-row: span 99; position: sticky; top: 110px; align-self: start; } }
.faq details { border-bottom: 1px solid var(--color-border); padding: 0; }
.faq details:first-of-type { border-top: 1px solid var(--color-border); }
.faq summary { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 20px 0; cursor: pointer; }
.faq summary h3 { font-size: 1rem; margin: 0; font-weight: 650; letter-spacing: -0.005em; }
.faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--color-surface) no-repeat center / 12px 12px; background-image: linear-gradient(var(--color-text), var(--color-text)), linear-gradient(var(--color-text), var(--color-text)); background-size: 12px 2px, 2px 12px; transition: transform .2s; }
.faq details[open] summary::after { background-size: 12px 2px, 0 0; }
.faq summary:hover h3 { color: var(--color-link); }
.faq details p { margin: -4px 0 22px; color: var(--color-muted); max-width: var(--size-prose); }

/* ---------------------------------------------------------------- call to action */
.cta-band { padding-top: 0 !important; background: transparent; }
.cta-band .wrap > div { background: var(--color-surface-2); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-brand) 24%, transparent); border-radius: calc(var(--radius-card) * 1.3); padding: clamp(28px, 4vw, 48px); position: relative; overflow: hidden; }
.cta-band .wrap > div::after { content: ""; position: absolute; right: -40px; top: -20%; width: 120px; height: 140%; background: var(--color-brand); transform: skewX(-28deg); opacity: calc(.9 * var(--shape-slash, 0)); }
@media (max-width: 700px) { .cta-band .wrap > div::after { width: 56px; right: -30px; } }
.cta-band h2 { color: inherit; max-width: 22ch; position: relative; z-index: 1; }
.cta-band p { color: inherit; opacity: .88; max-width: 36rem; position: relative; z-index: 1; }
.cta-band .actions { margin-top: 26px; position: relative; z-index: 1; }
.cta-band .note { font-size: var(--font-size-small); opacity: .8; margin: 16px 0 0; }
.cta-band .btn:focus-visible { box-shadow: 0 0 0 3px var(--color-focus); }

/* ---------------------------------------------------------------- inner pages */
.chips { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px; border-radius: var(--radius-chip); border: 1px solid var(--color-border-strong); color: var(--color-hero-text); text-decoration: none; font-weight: 550; font-size: var(--font-size-small); }
.chips a:hover { border-color: var(--color-hero-accent); color: var(--color-hero-accent); }
.split { display: grid; gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (min-width: 960px) { .split { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .split.flip > :first-child { order: 2; } }
.split p { color: var(--color-muted); }
.list-check { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 12px; }
.list-check li { position: relative; padding-left: 30px; }
.list-check li::before { content: ""; position: absolute; left: 3px; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--color-link); border-bottom: 2px solid var(--color-link); transform: rotate(-45deg); }
.list-steps { list-style: none; counter-reset: n; padding: 0; margin: 20px 0; display: grid; gap: 10px; }
.list-steps li { counter-increment: n; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-field); background: var(--color-bg); font-weight: 550; }
.list-steps li::before { content: counter(n); display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--color-surface-2); color: var(--color-link); font-weight: 700; font-size: .875rem; }
.mini-case { display: block; padding: 24px; border-radius: var(--radius-card); background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; }
.mini-case:hover { border-color: var(--color-border-strong); text-decoration: none; }
.mini-case .eyebrow { margin-bottom: 8px; }
.mini-case h3 { margin-bottom: .3em; }
.mini-case p { color: var(--color-muted); margin: 0 0 12px; }
.fit { display: grid; gap: 20px; }
@media (min-width: 820px) { .fit { grid-template-columns: 1fr 1fr; } }
.fit > div { padding: 28px; border-radius: var(--radius-card); border: 1px solid var(--color-border); background: var(--color-bg); }
.fit > div:first-child { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
.fit .list-check.no li::before { width: 12px; height: 2px; border: 0; background: var(--color-muted); transform: none; top: .7em; }
.fit .list-check.no li { color: var(--color-muted); }
.info-card { padding: 26px; border-radius: var(--radius-card); background: var(--color-surface); border: 1px solid var(--color-border); }
.info-card dl { margin: 0; display: grid; gap: 16px; }
.info-card dt { font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); }
.info-card dd { margin: 2px 0 0; font-weight: 550; }

/* case study page */
.facts-row { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.facts-row li { background: var(--color-bg); padding: 16px 18px; }
.facts-row b { display: block; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); margin-bottom: 4px; }
.facts-row span { font-weight: 600; color: var(--color-text); }
.hero .facts-row { background: var(--color-border); }
.case-hero-thumb { margin-top: 32px; border-radius: var(--radius-card); border: 1px solid var(--color-border); overflow: hidden; }
.case-hero-thumb .thumb { aspect-ratio: 16 / 9; border: 0; }
/* case hero: title and summary on the left, the drawing on the right, the facts across the bottom */
@media (min-width: 1000px) {
  .hero-case .wrap { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: clamp(40px, 5vw, 72px); align-items: start; }
  .hero-case .wrap > * { grid-column: 1; }
  .hero-case .case-hero-thumb { grid-column: 2; grid-row: 1 / 4; align-self: center; margin-top: 0; }
  .hero-case .facts-row { grid-column: 1 / -1; }
}

/* article and legal pages: the reading column */
main section.article { padding-top: clamp(32px, 5vw, 64px); }
.prose { max-width: var(--size-prose); }
.article .prose { margin-left: auto; margin-right: auto; }
.article .wrap.prose { max-width: calc(var(--size-prose) + 2 * var(--space-gutter)); }
.prose > * + h2 { margin-top: 1.8em; }
.prose h2 { font-size: clamp(1.3125rem, 1.1rem + .6vw, 1.5625rem); }
.prose h3 { margin-top: 1.4em; font-size: 1.125rem; }
.prose p, .prose li { color: var(--color-text); line-height: 1.7; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--color-link); }
.prose a { color: var(--color-link); }
.prose strong { font-weight: 700; }
.article-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 20px 0 0; font-size: var(--font-size-small); color: var(--color-hero-muted); }
.hero-article h1 { max-width: 24ch; }
.hero-article .wrap, .hero-legal .wrap { max-width: calc(var(--size-prose) + 2 * var(--space-gutter)); }
.post-list { display: grid; gap: 20px; }
@media (min-width: 820px) { .post-list { grid-template-columns: 1fr 1fr; } }
.post { position: relative; padding: 28px; border-radius: var(--radius-card); border: 1px solid var(--color-border); background: var(--color-bg); display: flex; flex-direction: column; }
.post:hover { border-color: var(--color-border-strong); }
.post .date { font-size: .8125rem; color: var(--color-muted); margin: 0 0 12px; }
.post h3 { font-size: 1.375rem; margin-bottom: .4em; }
.post h3 a { color: inherit; text-decoration: none; }
.post h3 a::after { content: ""; position: absolute; inset: 0; }
.post:has(a:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.post h3 a:focus-visible { outline: none; }
.post p { color: var(--color-muted); }
.post .go { margin-top: auto; font-weight: 650; color: var(--color-link); font-size: var(--font-size-small); }

/* ---------------------------------------------------------------- contact: form left, details right */
.contact-grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.form-card { padding: clamp(22px, 4vw, 40px); border-radius: var(--radius-card); background: var(--color-bg); border: 1px solid var(--color-border); box-shadow: 0 24px 60px -40px rgb(15 20 30 / .45); }
.form-card h2 { font-size: 1.5rem; }
.contact-form { max-width: none; gap: 0; }
.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label { font-weight: 600; font-size: .9375rem; }
.field .hint { font-size: .8125rem; color: var(--color-muted); margin: 0; }
.two { display: grid; gap: 0 16px; }
@media (min-width: 620px) { .two { grid-template-columns: 1fr 1fr; } }
.contact-form input, .contact-form textarea, .contact-form select { font: inherit; width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-field); background: var(--color-bg); color: var(--color-text); transition: border-color .15s, box-shadow .15s; }
.contact-form textarea { min-height: 140px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: none; border-color: var(--color-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 28%, transparent); }
.contact-form .btn { margin-top: 4px; width: 100%; }
@media (min-width: 620px) { .contact-form .btn { width: auto; } }
.form-status { margin: 14px 0 0; font-weight: 600; }
.form-foot { margin: 14px 0 0; font-size: .8125rem; color: var(--color-muted); }

/* ---------------------------------------------------------------- footer */
.site-foot { margin-top: clamp(40px, 6vw, 80px); padding: 40px 0 48px; background: var(--color-surface); border-top: 1px solid var(--color-border); }
.site-foot .wrap { display: grid; gap: 6px; }
.site-foot .byline { font-weight: 700; color: var(--color-text); }
.foot-links { margin-top: 12px; gap: 8px 20px; }
.foot-links a { color: var(--color-muted); }

/* ---------------------------------------------------------------- 404 and the draft banner */
.not-found .code { font: var(--font-heading-weight) clamp(4rem, 14vw, 8rem)/1 var(--font-heading); color: var(--color-brand); margin: 0 0 12px; }
.draft-banner { position: relative; z-index: 31; }
.plan > p:first-of-type { margin-bottom: 0; }
.plan .price + .unit { margin: 0 0 20px; font-size: var(--font-size-small); }

/* the cut, big: one diagonal band behind the home hero (only where the brand has the slash, option B) */
/* the hero bands are gone (they ran behind the board); the cut stays on the buttons, labels and the CTA */
.hero-home::before { display: none; content: ""; position: absolute; top: -20%; bottom: -20%; right: 30%; width: clamp(80px, 12vw, 180px); background: var(--color-surface-2); transform: skewX(-28deg); opacity: var(--shape-slash, 0); pointer-events: none; }
.hero-home::after { display: none; content: ""; position: absolute; top: -20%; bottom: -20%; right: calc(30% - clamp(40px, 5vw, 70px)); width: clamp(10px, 1.2vw, 18px); background: var(--color-brand); transform: skewX(-28deg); opacity: calc(.85 * var(--shape-slash, 0)); pointer-events: none; }
.hero-home .wrap { position: relative; z-index: 1; }
.board-head img { border-radius: 6px; box-shadow: 0 0 0 1px var(--color-border); }

/* the light/dark switch (public/theme.js puts it beside "Contact Us", into the space kept here, so nothing shifts) */
.site-head nav li:last-child { display: flex; align-items: center; gap: 8px; }
.site-head nav li:last-child::before { content: ""; flex: none; width: 40px; height: 40px; }
.site-head nav li:last-child.has-toggle::before { display: none; }
.theme-toggle { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: var(--radius-chip); border: 1px solid var(--color-border); background: transparent; color: var(--color-text); cursor: pointer; }
.theme-toggle:hover { background: var(--color-surface); }
.theme-toggle:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 860px) { .theme-toggle, .site-head nav li:last-child::before { width: 42px; height: 42px; } }

/* ---------------------------------------------------------------- case studies (/work/)
   Every case study is a small site: its own bar (name + chapters), a hero with the chapter's question and its
   two-sentence answer, the as-of stamp, then prose. Interactives (public/work/cs.js) sit in .cs-wide sections.
   Generated pages: tools/case-studies.js. Tokens only, both themes. */
.cs-bar { padding: 0 !important; border-bottom: 1px solid var(--color-border); background: var(--color-surface); position: relative; z-index: 2; }
.cs-nav { display: flex; align-items: center; gap: 8px 22px; flex-wrap: wrap; padding: 10px 0; }
.cs-name { display: inline-flex; flex-direction: column; font-weight: 750; color: var(--color-text); text-decoration: none; line-height: 1.15; }
.cs-name .eyebrow { margin: 0; font-size: .6875rem; }
.cs-nav ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; max-width: 100%; }
.cs-nav ol a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; border-radius: var(--radius-chip); color: var(--color-muted); text-decoration: none; font-weight: 600; font-size: var(--font-size-small); white-space: nowrap; }
.cs-nav ol a:hover { color: var(--color-text); background: var(--color-bg); }
.cs-nav ol a[aria-current="page"] { color: var(--color-text); background: var(--color-surface-2); box-shadow: inset 0 -2px 0 var(--color-brand); }
.cs-nav .n { font-variant-numeric: tabular-nums; color: var(--color-link); font-size: .75rem; }
@media (max-width: 640px) { .cs-nav { gap: 6px; } .cs-name { flex-direction: row; gap: 8px; align-items: baseline; } }
.cs-hero .cs-q { font-size: var(--font-size-lede); font-weight: 650; color: var(--color-hero-text); margin: 6px 0 12px; max-width: 44rem; }
.cs-hero .cs-a { max-width: 46rem; border-left: 3px solid var(--color-brand); padding-left: 16px; color: var(--color-hero-text); }
.cs-stamp { display: inline-flex; gap: 8px; align-items: baseline; margin: 20px 0 0; padding: 6px 12px; border-radius: var(--radius-chip); background: var(--color-surface-2); color: var(--color-hero-text); font-size: var(--font-size-small); }
.cs-stamp::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-brand); transform: translateY(-1px); }
main section.cs-tagline, main section.cs-outcomes { padding-top: 24px; padding-bottom: 0; }
main section.cs-body { padding-top: 32px; padding-bottom: 32px; }
main section.cs-wide { padding-top: 8px; padding-bottom: 24px; }
main section.cs-related, main section.cs-chapters-wrap, main section.cs-note { padding-top: 24px; padding-bottom: 24px; }
main section.cs-pager { padding-top: 8px; padding-bottom: 8px; }
.cs-tags { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cs-tags li, .pill, .chip { display: inline-block; font-size: .75rem; font-weight: 600; border: 1px solid var(--color-border-strong); border-radius: var(--radius-chip); padding: 2px 10px; color: var(--color-muted); white-space: nowrap; }
.cs-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.pill.status-confirmed { color: var(--color-success); border-color: currentColor; }
.pill.status-corrected { color: var(--color-link); border-color: currentColor; }
.pill.status-rejected { color: var(--color-error); border-color: currentColor; }
.cs-metrics { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); border-radius: var(--radius-card); overflow: hidden; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
.cs-metrics li { background: var(--color-bg); padding: 14px 16px; }
.cs-metrics b { display: block; font-size: 1.5rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.cs-metrics span { display: block; color: var(--color-muted); font-size: var(--font-size-small); margin-top: 2px; }
.cs-metrics.mini { margin: 0; border-radius: 0; border: 0; border-bottom: 1px solid var(--color-border); grid-template-columns: 1fr 1fr; }
.cs-metrics.mini b { font-size: 1.15rem; }
.cs-cards { margin: 16px 0 0; }
.cs-card { position: relative; display: flex; flex-direction: column; gap: 6px; }
.cs-card h3 { margin: 0; font-size: 1.05rem; }
.cs-card h3 a { color: var(--color-text); text-decoration: none; }
.cs-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-card); }
.cs-card:has(a:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.cs-card h3 a:focus-visible { outline: none; }
.cs-card:hover { border-color: var(--color-border-strong); }
.cs-card p { margin: 0; font-size: var(--font-size-small); color: var(--color-muted); }
.cs-card p strong { color: var(--color-text); font-weight: 650; }
.cs-card .cs-pills { margin-top: auto; padding-top: 6px; }
.cs-corr { color: var(--color-text) !important; border-left: 2px solid var(--color-brand); padding-left: 8px; }
.cs-chapters { counter-reset: none; }
.cs-work-card .thumb-wrap .thumb { border-radius: 0; }
.callout { border: 1px solid var(--color-border); border-left: 3px solid var(--color-brand); background: var(--color-surface); border-radius: 8px; padding: 12px 16px; margin: 18px 0; font-size: var(--font-size-small); }
.callout p { margin: 0 0 6px; } .callout p:last-child { margin: 0; }
.callout.note { border-left-color: var(--color-border-strong); color: var(--color-muted); }
.callout.rules { border-left-color: var(--color-brand); }
.prose .table-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 18px 0 24px; border: 1px solid var(--color-border); border-radius: var(--radius-card); }
.prose table { border-collapse: collapse; width: 100%; font-size: var(--font-size-small); display: block; overflow-x: auto; }
.table-wrap table { display: table; min-width: 560px; }
.prose th, .prose td, .table-wrap th, .table-wrap td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: 1px solid var(--color-border); }
.prose thead th, .table-wrap thead th { background: var(--color-surface); font-size: .8125rem; }
.table-wrap tbody th { font-weight: 550; }
.prose tr:last-child > *, .table-wrap tr:last-child > * { border-bottom: 0; }
td.r, th.r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.neg { color: var(--color-error); }
.glossary dt { font-weight: 700; margin-top: 18px; scroll-margin-top: 96px; }
.glossary dd { margin: 4px 0 0; }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pager a { display: block; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-card); text-decoration: none; color: var(--color-text); font-weight: 650; }
.pager a:hover { border-color: var(--color-border-strong); }
.pager small { display: block; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); font-weight: 600; }
.pager .next { text-align: right; grid-column: 2; }

/* diagrams (static SVG in the page: text stays readable and searchable) */
figure.diagram { margin: 8px 0 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 16px;
  --accent: var(--color-brand); --wait: var(--color-link); --line-strong: var(--color-border-strong); }
figure.diagram figcaption { color: var(--color-muted); font-size: var(--font-size-small); margin-top: 10px; }
.diagram-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.diagram-scroll > svg { display: block; width: 100%; height: auto; min-width: 640px; }
.d-title { font-weight: 700; fill: var(--color-text); }
.d-sub, .d-quiet { fill: var(--color-muted); }
.d-ink { fill: var(--color-text); }
.d-box { fill: var(--color-bg); stroke: var(--color-border-strong); stroke-width: 1.25; }
.d-box.main { fill: var(--color-surface-2); stroke: var(--color-brand); stroke-width: 2; }
.d-zone { fill: var(--color-surface); stroke: var(--color-border-strong); stroke-dasharray: 5 4; }
.d-edge { fill: none; stroke: var(--color-border-strong); stroke-width: 1.25; }
.d-arrow { fill: var(--color-border-strong); }
.d-grid { stroke: var(--color-border); }

/* calculator */
.calc { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 18px; }
@media (min-width: 860px) { .calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 28px; } }
.calc fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.calc legend { font-size: var(--font-size-small); font-weight: 700; margin-bottom: 6px; padding: 0; }
.calc-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.calc-presets legend { width: 100%; }
.calc-presets .btn { min-height: 40px; padding: 8px 12px; font-size: var(--font-size-small); }
.calc-presets .btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--color-brand); background: var(--color-surface-2); }
.calc-field { margin: 14px 0 0; }
.calc-field label { display: flex; justify-content: space-between; gap: 12px; font-weight: 650; font-size: var(--font-size-small); }
.calc-field output { font-variant-numeric: tabular-nums; font-weight: 750; color: var(--color-link); }
.calc input[type="range"] { width: 100%; accent-color: var(--color-accent); min-height: 32px; margin: 4px 0 0; }
.calc-radio { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.calc-radio legend { width: 100%; }
.calc-radio label { display: inline-flex; align-items: center; gap: 6px; font-weight: 550; min-height: 32px; }
.calc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.calc-actions .btn { min-height: 40px; padding: 8px 14px; font-size: var(--font-size-small); }
.calc-big { margin: 0; border-radius: var(--radius-card); padding: 14px 16px; background: var(--color-bg); border: 1px solid var(--color-border); }
.calc-big .l { display: block; font-size: var(--font-size-small); color: var(--color-muted); }
.calc-big .v { display: block; font-size: clamp(1.9rem, 5vw, 2.6rem); font-weight: 780; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.calc-big.pos .v { color: var(--color-success); } .calc-big.neg .v { color: var(--color-error); }
.calc-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.calc-kpis div { border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 10px; background: var(--color-bg); min-width: 0; }
.calc-kpis dt { font-size: .75rem; color: var(--color-muted); }
.calc-kpis dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.calc-bars { margin: 14px 0 8px; }
.bar-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 6.5rem; gap: 10px; align-items: center; margin: 0 0 8px; font-size: var(--font-size-small); }
@media (max-width: 480px) { .bar-row { grid-template-columns: 5.6rem minmax(0, 1fr) 5.6rem; font-size: .8125rem; } }
.bar { display: flex; height: 16px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 4px; overflow: hidden; }
.seg { display: block; height: 100%; transition: width .15s; }
.seg.rev { background: var(--color-success); }
.seg.c1, .sw.c1 { background: var(--color-accent); }
.seg.c2, .sw.c2 { background: var(--color-link); opacity: .6; }
.seg.c3, .sw.c3 { background: var(--color-border-strong); }
.seg.c4, .sw.c4 { background: var(--color-muted); }
.bar-v { text-align: right; font-variant-numeric: tabular-nums; }
.legend { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 4px 14px; font-size: .8125rem; color: var(--color-muted); }
.legend b { color: var(--color-text); font-variant-numeric: tabular-nums; margin-left: 4px; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.calc:not(.is-live) .calc-controls input, .calc:not(.is-live) .calc-controls button { pointer-events: none; opacity: .75; }

/* architecture explorer */
.arch { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 16px; }
.arch-walks { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 12px; }
.arch:not(.is-live) .arch-walks { display: none; }
.arch-walks-label { font-size: var(--font-size-small); font-weight: 700; margin-right: 4px; }
.arch-walks .btn { min-height: 40px; padding: 8px 12px; font-size: var(--font-size-small); }
.arch-walks .btn[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--color-brand); background: var(--color-surface-2); }
.arch-body { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .arch-body { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); } }
.arch-map { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.arch-map svg { display: block; width: 100%; height: auto; min-width: 640px; }
.arch-layer { fill: var(--color-bg); }
.arch-layer-label { fill: var(--color-muted); font-weight: 650; }
.arch-edge { fill: none; stroke: var(--color-brand); stroke-width: 2.2; }
.arch-node rect { fill: var(--color-surface); stroke: var(--color-border-strong); stroke-width: 1.25; }
.arch-node text { fill: var(--color-text); pointer-events: none; }
.arch-node:hover rect { stroke: var(--color-text); }
.arch-node:focus { outline: none; }
.arch-node:focus-visible rect { stroke: var(--color-focus); stroke-width: 3; }
.arch-node.active rect { fill: var(--color-surface-2); stroke: var(--color-brand); stroke-width: 2.4; }
.arch-node.visited rect { stroke: var(--color-brand); stroke-dasharray: 4 3; }
.arch-node.dim { opacity: .4; }
.arch-panel { border: 1px solid var(--color-border); border-radius: 8px; padding: 14px 16px; background: var(--color-bg); min-width: 0; font-size: var(--font-size-small); }
.arch-panel h3 { margin: 0 0 6px; }
.arch-panel .eyebrow { margin-bottom: 6px; }
.arch-dl dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-muted); margin-top: 10px; font-weight: 650; }
.arch-dl dd { margin: 2px 0 0; }
.arch-dl ul { margin: 4px 0 0; padding-left: 18px; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--color-link); text-decoration: underline; cursor: pointer; min-height: 24px; }
.arch-step-btns { display: flex; gap: 8px; margin: 10px 0; }
.arch-step-btns .btn { min-height: 40px; padding: 8px 14px; font-size: var(--font-size-small); }
.arch-steps { padding-left: 20px; margin: 0; }
.arch-steps button { background: none; border: 0; padding: 2px 0; font: inherit; color: var(--color-muted); cursor: pointer; text-align: left; min-height: 28px; }
.arch-steps li.on button { color: var(--color-text); font-weight: 700; }
.arch-steps li.done button { color: var(--color-link); }
button:disabled { opacity: .45; cursor: default; }

/* research filters */
.rx-filters { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 14px; margin: 0; }
.rx-filters p { margin: 0; }
.rx-filters .rx-q { grid-column: 1 / -1; }
.rx-filters label { display: block; font-size: var(--font-size-small); font-weight: 650; margin-bottom: 4px; }
.rx-filters input, .rx-filters select { width: 100%; min-height: 44px; font: inherit; color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border-strong); border-radius: var(--radius-field); padding: 8px 10px; }
.rx-count { font-size: var(--font-size-small); color: var(--color-muted); margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 4px 12px; }

/* ask form on case-study pages */
.ask-band { padding-top: 24px !important; }
.ask-card { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 20px; }
@media (min-width: 900px) { .ask-card { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; padding: 28px; } }
.ask-head h2 { margin: 0 0 8px; font-size: clamp(1.3125rem, 1.1rem + .6vw, 1.5625rem); }
.ask-form .field select { width: 100%; }
/* case-study body: text starts on the page's left edge (under the hero title) at a readable line length */
.cs-body .wrap.prose { max-width: var(--size-content); margin-left: auto; margin-right: auto; }
.cs-body .wrap.prose > * { max-width: var(--size-prose); }
.cs-body .wrap.prose > .table-wrap, .cs-body .wrap.prose > figure, .cs-body .wrap.prose > .calc, .cs-body .wrap.prose > .arch { max-width: none; }
main section.cs-hero { padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(32px, 4vw, 56px); }
.cases.cs-deep { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .cases.cs-deep .case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } .cases.cs-deep .cs-metrics.mini { border-bottom: 0; border-right: 1px solid var(--color-border); align-content: stretch; } .cases.cs-deep .case-body { align-self: center; } }
.cases.cs-deep { margin-bottom: 20px; }
@media (min-width: 860px) { .process.rules-list li:nth-child(3n)::after { right: 0; } .process.rules-list { row-gap: 40px; } }

/* ---------------------------------------------------------------- services ladder (Sept 29, 2026) */
@media (min-width: 700px) { .ladder .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ladder .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ladder .plan .btn { margin-top: auto; align-self: flex-start; }
.offer-facts { display: grid; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .offer-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.offer-facts li { border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 14px 18px; }
.offer-facts b { display: block; font: var(--font-heading-weight) 1.35rem/1.2 var(--font-heading); color: var(--color-text); }
.offer-facts span { color: var(--color-muted); font-size: var(--font-size-small); }

/* service page heroes with a visual (Oct 31) */
.hero-split { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 1040px) { .hero-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.hero-visual { margin: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }
.hero-visual img { display: block; width: 100%; height: auto; }
.hero-split .offer-facts { grid-template-columns: 1fr; }
@media (min-width: 560px) { .hero-split .offer-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) {
  .hero-split h1 { font-size: clamp(2.25rem, 3.9vw, 3.25rem); }
  .hero-split .offer-facts li { padding: 12px 14px; }
  .hero-split .offer-facts b { font-size: 1.0625rem; white-space: nowrap; }
  .hero-split .offer-facts span { font-size: .8125rem; }
}

/* home: since 1994 (Oct 31) */
.since-grid { display: grid; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (min-width: 1000px) { .since-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); } }
.since-line { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--color-border); }
.since-line li { position: relative; display: grid; grid-template-columns: 5.5rem 1fr; gap: 12px; padding: 0 0 22px 22px; }
.since-line li::before { content: ""; position: absolute; left: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--color-bg); border: 2px solid var(--color-accent); }
.since-line li:last-child { padding-bottom: 0; }
.since-line li:last-child::before { background: var(--color-accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-accent) 22%, transparent); }
.since-year { font-family: var(--font-mono); font-weight: 700; color: var(--color-link); padding-top: 1px; }
.since-line h3 { font-size: 1.0625rem; margin: 0 0 2px; }
.since-line p { margin: 0; color: var(--color-muted); font-size: var(--font-size-small); }
.since-term { margin: 0; position: sticky; top: 96px; background: #0a0e1a; color: #d6dbea; border-radius: var(--radius-card); border: 1px solid rgba(255,255,255,.08); overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
.since-term-head { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #151b31; font-family: var(--font-mono); font-size: .75rem; color: #9aa4bd; }
.since-term-head i { width: 9px; height: 9px; border-radius: 50%; background: #ff5a67; }
.since-term-head i:nth-child(2) { background: #fbbf24; } .since-term-head i:nth-child(3) { background: #34d399; }
.since-term-head span { margin-left: 8px; }
.since-term pre { margin: 0; padding: 18px 20px 22px; font-size: .875rem; line-height: 1.7; white-space: pre-wrap; }
.since-term .c { color: #5d6782; } .since-term .ok { color: #34d399; } .since-term .w { color: #fbbf24; }
@media (max-width: 999px) { .since-term { position: static; } }
.since-senior { margin-top: clamp(48px, 7vw, 88px); }
.senior-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 700px) { .senior-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .senior-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.senior-grid li { border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 20px; background: var(--color-surface); }
.senior-grid h3 { font-size: 1.0625rem; margin: 0 0 6px; font-family: var(--font-mono); font-weight: 700; color: var(--color-link); letter-spacing: 0; }
.senior-grid p { margin: 0; color: var(--color-muted); font-size: var(--font-size-small); }
/* tap targets on breadcrumbs (Oct 31 visitor test) */
.eyebrow a, a.cs-name { display: inline-block; padding-block: 3px; }
/* image thumbs for recent builds (Oct 31) */
.thumb.thumb-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-hero-thumb { margin: 28px 0 0; }
.case-hero-thumb figcaption { margin-top: 8px; font-size: .8125rem; color: var(--color-muted); }
/* home: 2026 stack (Oct 31) */
.now-visual { margin: 0 0 clamp(28px, 4vw, 48px); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); }
.now-visual img { display: block; width: 100%; height: auto; }
.now-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 640px) { .now-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .now-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .now-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.now-grid li { border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 18px; background: var(--color-bg); }
.now-grid h3 { font-size: 1rem; margin: 0 0 6px; font-family: var(--font-mono); font-weight: 700; color: var(--color-link); letter-spacing: 0; }
.now-grid p { margin: 0; color: var(--color-muted); font-size: var(--font-size-small); }
.since-senior { margin-top: 0; }
/* free tools (Oct 31) */
table.eos { width: 100%; border-collapse: collapse; font-size: var(--font-size-small); }
table.eos th, table.eos td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
table.eos thead th { font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
table.eos .eos-left { font-family: var(--font-mono); white-space: nowrap; }
tr.eos-ended .eos-left { color: var(--color-muted); }
tr.eos-soon .eos-left { color: var(--color-link); font-weight: 700; }
tr.eos-later .eos-left { color: var(--color-text); }
.subscribe { margin-top: 28px; max-width: 40rem; }
.subscribe > label { font-weight: 600; display: block; margin-bottom: 8px; }
.subscribe-row { display: flex; gap: 8px; flex-wrap: wrap; }
.subscribe-row input[type=email] { flex: 1 1 220px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-field); background: var(--color-bg); }
.consent { font-size: .8125rem; color: var(--color-muted); margin: 10px 0 0; }
.consent input { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; }
.tool-calc .calc-field { display: grid; grid-template-columns: 1fr 9rem; gap: 12px; align-items: center; margin: 0 0 10px; }
.tool-calc input { min-height: 40px; padding: 6px 10px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-field); background: var(--color-bg); width: 100%; }
.list-plain { list-style: none; margin: 0; padding: 0; }
.list-plain li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--color-border); }
.list-plain b { font-family: var(--font-mono); }
.health-list { margin: 0; padding-left: 1.2em; }
.health-list li { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.health-list li span { display: block; margin-bottom: 6px; }
.health-list label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin-right: 18px; cursor: pointer; }
.health-list input { width: 18px; height: 18px; }
.health-list fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.health-list legend { padding: 0; margin-bottom: 6px; float: left; width: 100%; }
.health-list legend + label { clear: left; }
.preview-note { font-size: .8125rem; color: var(--color-link); margin: 0 0 10px; }

/* ---------------------------------------------------------------- joke of the day (/lol/ and the home teaser) */
:root:not([data-theme="light"]) { --v-red: #ff7884; --v-amber: #fbbf24; --v-cyan: #22d3ee; --v-green: #34d399; --v-violet: #a99bff; }
:root[data-theme="light"] { --v-red: #b42318; --v-amber: #8a5a00; --v-cyan: #0e7490; --v-green: #067647; --v-violet: #5b3fd1; }
.lol-grid { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (min-width: 900px) { .lol-grid { grid-template-columns: 1.3fr 1fr; } }
.joke-card { padding: clamp(20px, 3vw, 32px); border-radius: var(--radius-card); background: var(--color-bg); border: 1px solid var(--color-border-strong); }
.joke-text { font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.4; font-weight: 600; margin: 0 0 12px; color: var(--color-text); }
.joke-meta { margin: 0 0 18px; }
.joke-vote { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.vote { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 64px; padding: 8px 4px; border-radius: var(--radius-button); border: 1px solid var(--color-border); border-top: 3px solid var(--vc); background: var(--color-surface); color: var(--color-text); font: inherit; cursor: pointer; text-align: center; transition: transform .12s, background-color .12s; }
.vote:hover { transform: translateY(-1px); }
.vote:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.vote[aria-pressed="true"] { background: var(--color-bg); box-shadow: inset 0 0 0 2px var(--vc); }
.vote-g { font: 700 1.15rem/1 var(--font-mono); color: var(--vc); }
.vote-t { font-size: .75rem; line-height: 1.2; color: var(--color-muted); }
.vote[aria-pressed="true"] .vote-t { color: var(--color-text); font-weight: 650; }
.vote-red { --vc: var(--v-red); } .vote-amber { --vc: var(--v-amber); } .vote-cyan { --vc: var(--v-cyan); } .vote-green { --vc: var(--v-green); } .vote-violet { --vc: var(--v-violet); }
.joke-status { min-height: 1.5em; margin: 12px 0 0; }
.joke-ask label { display: block; font-weight: 600; margin-bottom: 8px; }
.joke-ask input[type=text] { flex: 1 1 200px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-field); background: var(--color-bg); color: var(--color-text); }
.joke-ask-out { min-height: 2em; margin-top: 14px; }
.joke-made { font-size: 1.1rem; }
.h3 { font-size: 1.25rem; }
.joke-archive { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .joke-archive { grid-template-columns: 1fr 1fr; } }
.joke-archive li { border: 1px solid var(--color-border); border-left: 3px solid var(--color-brand); border-radius: var(--radius-card); padding: 16px 18px; background: var(--color-bg); }
.joke-archive p { margin: 0; }
.lol-teaser .joke-card { max-width: 46rem; }
@media (prefers-reduced-motion: reduce) { .vote { transition: none; } .vote:hover { transform: none; } }
.lol-teaser .joke-card + p, .lol-preview-note { margin-top: 14px; }
.vote-long .vote-g { font-size: clamp(.8rem, 2.6vw, 1.05rem); letter-spacing: -.02em; }
.joke-ends { display: flex; justify-content: space-between; margin: 6px 2px 0; font-size: .75rem; }