/* addressable.co: website stylesheet. Built on the design-system tokens (assets/css/tokens.css, generated from
   foundations/*.json); this file adds the web scale, grid and components only. Display titles use
   --font-display, so a change of headline face (Financier Display, pending files) is one token. */

@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("../fonts/IBMPlexSans-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/Newsreader-Display-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("../fonts/Newsreader-Display-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --w-max: 1240px; --w-gutter: 24px; --w-pad: 24px;
  --w-section: 80px; --w-section-tight: 56px;
  --w-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
  --w-h2: clamp(1.9rem, 1.4rem + 1.9vw, 2.9rem);
  --w-h3: 1.25rem;
  --w-lede: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --w-body: 1.0625rem;
  --w-small: 0.9375rem;
  --w-eyebrow: 0.8125rem;
  --w-rule: 1px solid var(--border-subtle);
  --w-rule-strong: 1.5px solid var(--border-strong);
  --w-rule-accent: 2px solid var(--brand-accent);
  --w-accent-hover: var(--seq-5); /* cobalt-600 darkened for the hover state (sequential step 5); white text 10.7:1 */
}
@media (min-width: 960px) { :root { --w-pad: 56px; --w-section: 120px; --w-section-tight: 80px; --w-body: 1.125rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--background-page); color: var(--text-primary); font: 400 var(--w-body)/1.6 var(--font-text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--text-link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--brand-accent); outline-offset: 3px; }
.mode-deep :focus-visible, .site-foot :focus-visible { outline-color: var(--brand-accentOnDeep); } /* on deep blue: cobalt is 2.55:1, under the 3:1 a focus ring needs */
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; }
.skip { position: absolute; left: -9999px; top: 0; } .skip:focus { left: var(--w-pad); top: 12px; background: var(--background-page); padding: 8px 12px; z-index: 10; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- grid */
.wrap { max-width: calc(var(--w-max) + 2 * var(--w-pad)); margin: 0 auto; padding: 0 var(--w-pad); }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--w-gutter); }
@media (min-width: 720px) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 960px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; } }
.span-all { grid-column: 1 / -1; }

/* ---- type */
.eyebrow { font: 600 var(--w-eyebrow)/1.3 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-accent); margin: 0 0 18px; }
.mode-deep .eyebrow { color: var(--brand-accentOnDeep); }
.h1 { font: 500 var(--w-h1)/1.05 var(--font-display); letter-spacing: -0.015em; color: var(--text-heading); text-wrap: balance; }
.h2 { font: 500 var(--w-h2)/1.12 var(--font-display); letter-spacing: -0.01em; color: var(--text-heading); text-wrap: balance; }
.h3 { font: 600 var(--w-h3)/1.3 var(--font-text); color: var(--text-heading); }
.mode-deep .h1, .mode-deep .h2, .mode-deep .h3 { color: var(--text-inverse); }
.lede { font-size: var(--w-lede); line-height: 1.5; color: var(--text-primary); max-width: 40em; text-wrap: pretty; }
.mode-deep .lede, .mode-deep p { color: var(--text-inverseSecondary); }
.muted { color: var(--text-secondary); }
.small { font-size: var(--w-small); line-height: 1.55; }
.num { font: 500 1.75rem/1 var(--font-display); color: var(--brand-accent); font-variant-numeric: lining-nums tabular-nums; }
.label { font: 600 var(--w-eyebrow)/1.3 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }

/* ---- buttons */
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; font: 600 1rem/1 var(--font-text); text-decoration: none; border: 1.5px solid transparent; transition: background-color 120ms, color 120ms, border-color 120ms; }
.btn--primary { background: var(--brand-accent); color: var(--text-onEmphasis); }
.btn--primary:hover { background: var(--w-accent-hover); }
.btn--secondary { border-color: var(--border-strong); color: var(--text-heading); background: transparent; }
.btn--secondary:hover { background: var(--background-paper); }
.mode-deep .btn--secondary { border-color: var(--text-inverseSecondary); color: var(--text-inverse); }
.mode-deep .btn--secondary:hover { background: var(--background-inverseRaised); }
.btn--small { min-height: 40px; padding: 0 16px; font-size: 0.9375rem; }

/* ---- header */
.site-head { position: sticky; top: 0; z-index: 5; background: rgba(255, 255, 255, 0.97); border-bottom: var(--w-rule); }
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 72px; gap: 24px; }
.brand { display: block; width: 148px; flex: none; } .brand img { width: 148px; height: auto; }
.nav { display: none; }
.nav ul { display: flex; gap: 32px; align-items: center; }
.nav a { color: var(--text-heading); text-decoration: none; font-size: 0.96875rem; font-weight: 500; padding: 6px 0; border-bottom: 1.5px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: var(--brand-accent); }
.head-cta { display: none; }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; font: 600 0.9375rem/1 var(--font-text); color: var(--text-heading); padding: 12px 0 12px 12px; min-height: 44px; display: flex; align-items: center; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); }
.menu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.menu__panel { position: absolute; right: calc(-1 * var(--w-pad)); top: calc(100% + 14px); width: 100vw; max-width: 100vw; background: var(--background-page); border-bottom: var(--w-rule); padding: 8px var(--w-pad) 24px; }
.menu__panel a { display: block; padding: 14px 0; border-bottom: var(--w-rule); color: var(--text-heading); text-decoration: none; font-weight: 500; }
.menu__panel a.btn { margin-top: 20px; border-bottom: 0; padding: 0 22px; display: inline-flex; color: var(--text-onEmphasis); }
@media (min-width: 960px) {
  .nav { display: block; margin-left: auto; } .head-cta { display: inline-flex; } .menu { display: none; }
}

/* ---- sections */
.section { padding: var(--w-section) 0; }
.section--tight { padding: var(--w-section-tight) 0; }
.section--paper { background: var(--background-paper); }
.mode-deep { background: var(--background-inverse); color: var(--text-inverse); }
.section-head { margin-bottom: 48px; max-width: 46rem; }
@media (min-width: 960px) { .section-head { margin-bottom: 64px; } }
.section-head .lede { margin-top: 20px; }
.rule-top { border-top: var(--w-rule-strong); padding-top: 20px; }
.mode-deep .rule-top { border-top-color: var(--border-inverse); }

/* ---- hero */
.hero { padding: 64px 0 72px; }
@media (min-width: 960px) { .hero { padding: 104px 0 112px; } }
.hero__text { grid-column: 1 / -1; }
.hero__fig { grid-column: 1 / -1; margin-top: 56px; }
@media (min-width: 960px) { .hero__text { grid-column: 1 / span 7; } .hero__fig { grid-column: 9 / -1; margin-top: 0; align-self: end; } }
.hero .lede { margin-top: 28px; }
.hero .lede + .lede { margin-top: 12px; }

/* funnel: the market narrowing from every institution to the pipeline; bars are proportional steps, not data */
.funnel { margin: 0; }
.funnel li { padding: 14px 0 16px; border-top: 1px solid var(--border-inverse); }
.funnel li:last-child { border-bottom: 1px solid var(--border-inverse); }
.funnel__bar { height: 10px; background: var(--background-inverseRaised); margin-bottom: 12px; }
.funnel__bar span { display: block; height: 100%; background: var(--c-slate-600); }
.funnel li.is-key .funnel__bar span { background: var(--brand-accentOnDeep); }
.funnel li.is-gap .funnel__bar span { background: transparent; border: 1.5px dashed var(--text-inverseSecondary); }
.funnel__row { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.funnel__stage { font: 600 var(--w-eyebrow)/1.3 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-inverse); }
.funnel__text { font-size: var(--w-small); color: var(--text-inverseSecondary); text-align: right; }
.funnel li.is-key .funnel__stage { color: var(--brand-accentOnDeep); }
.funnel figcaption { margin-top: 14px; font-size: 0.8125rem; color: var(--text-inverseSecondary); }

/* ---- practice band */
.practice__intro { grid-column: 1 / -1; }
.practice__areas { grid-column: 1 / -1; display: grid; gap: 28px; margin-top: 40px; }
@media (min-width: 720px) { .practice__areas { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
@media (min-width: 960px) { .practice__intro { grid-column: 1 / span 5; } .practice__areas { grid-column: 7 / -1; grid-template-columns: 1fr; margin-top: 0; gap: 0; } }
.area { border-top: var(--w-rule); padding: 18px 0 20px; }
.area:last-child { border-bottom: var(--w-rule); }
.area .h3 { margin-bottom: 6px; }
.area p { color: var(--text-secondary); }

/* ---- numbered columns (gaps, approach) */
.cols { display: grid; gap: 40px; }
@media (min-width: 720px) { .cols--3 { grid-template-columns: repeat(3, 1fr); gap: 32px; } .cols--2 { grid-template-columns: repeat(2, 1fr); gap: 32px; } .cols--4 { grid-template-columns: repeat(2, 1fr); gap: 40px 32px; } }
@media (min-width: 960px) { .cols--4 { grid-template-columns: repeat(4, 1fr); } }
.col { border-top: var(--w-rule-strong); padding-top: 20px; }
.col .num { display: block; margin-bottom: 18px; }
.col .h3 { margin-bottom: 12px; }
.col p { color: var(--text-primary); }
.col p + p { margin-top: 0.6em; }
.mode-deep .col { border-top-color: var(--brand-accentOnDeep); }
.mode-deep .col p { color: var(--text-inverseSecondary); }
.mode-deep .num { color: var(--brand-accentOnDeep); }

/* ---- sequencing */
.seq__text { grid-column: 1 / -1; }
.seq__compare { grid-column: 1 / -1; margin-top: 48px; display: grid; gap: 24px; }
@media (min-width: 720px) { .seq__compare { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .seq__text { grid-column: 1 / span 6; } .seq__compare { grid-column: 8 / -1; margin-top: 0; grid-template-columns: 1fr; align-self: start; } }
.seq__text .lede { margin-top: 24px; }
.compare { border-top: var(--w-rule-strong); padding-top: 16px; }
.compare.is-ours { border-top: var(--w-rule-accent); }
.compare .label { margin-bottom: 10px; }
.compare.is-ours .label { color: var(--brand-accent); }
.compare li { padding: 10px 0; border-bottom: var(--w-rule); font-size: var(--w-small); line-height: 1.5; }
.compare:not(.is-ours) li { color: var(--text-secondary); }
.pull { grid-column: 1 / -1; margin-top: 64px; font: 500 clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem)/1.25 var(--font-display); color: var(--text-heading); max-width: 30em; text-wrap: balance; border-left: 2px solid var(--brand-accent); padding-left: 24px; }

/* ---- service list */
.svc { border-top: var(--w-rule-strong); }
.svc__item { display: grid; grid-template-columns: 3rem minmax(0, 1fr); column-gap: 16px; padding: 24px 0; border-bottom: var(--w-rule); }
@media (min-width: 960px) { .svc__item { grid-template-columns: 5rem minmax(0, 4fr) minmax(0, 6fr); column-gap: 32px; padding: 28px 0; } }
.svc__item .num { font-size: 1.375rem; padding-top: 2px; }
.svc__title { font: 600 1.25rem/1.3 var(--font-text); color: var(--text-heading); }
.svc__area { display: block; margin-top: 6px; }
.svc__text { grid-column: 2; margin-top: 8px; }
@media (min-width: 960px) { .svc__text { grid-column: 3; margin-top: 0; } }
.svc__item.is-new .num { color: var(--brand-accent); }
.callout { margin-top: 48px; display: grid; gap: 12px; background: var(--background-paper); border-top: var(--w-rule-accent); padding: 24px; }
@media (min-width: 960px) { .callout { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px; padding: 32px; } }
.callout .h3 { font-size: 1.25rem; }
.callout + .callout { margin-top: 16px; }
.callout--ai { background: transparent; border: 1px solid var(--border-subtle); border-top: var(--w-rule-accent); }
.more { margin-top: 32px; font-weight: 600; }
.more a { text-decoration: none; } .more a::after { content: " \2192"; }

/* AI points */
.points { display: grid; gap: 28px; margin-top: 40px; }
@media (min-width: 720px) { .points { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.point { border-top: var(--w-rule); padding-top: 16px; }
.point .h3 { font-size: 1.0625rem; margin-bottom: 8px; }
.point p { font-size: var(--w-small); color: var(--text-secondary); }

/* ---- cards (who it is for, engagement models) */
.cards { display: grid; gap: 20px; }
@media (min-width: 720px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } .cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .cards--4 { grid-template-columns: repeat(4, 1fr); } }
.card { background: var(--background-page); border-top: var(--w-rule-strong); padding: 24px 24px 28px; display: flex; flex-direction: column; }
.section--paper .card { background: var(--background-page); }
.card .label { margin-bottom: 14px; }
.card__length { font-weight: 400; color: var(--text-secondary); }
.card .h3 { margin-bottom: 12px; }
.card p { font-size: var(--w-small); line-height: 1.55; }
.card p + p { margin-top: 0.6em; }
.card.is-custom { background: transparent; border-top: var(--w-rule-accent); }
.card--flat { background: transparent; padding: 20px 0 8px; }

/* ---- audience lists */
.lists { display: grid; gap: 40px; }
@media (min-width: 720px) { .lists { grid-template-columns: 1fr 1fr; gap: 32px; } }
.lists .h3 { margin-bottom: 12px; }
.lists li { padding: 12px 0; border-bottom: var(--w-rule); }
.lists li:first-child { border-top: var(--w-rule-strong); }

/* ---- CTA band */
.cta__text { grid-column: 1 / -1; }
.cta__act { grid-column: 1 / -1; margin-top: 32px; }
@media (min-width: 960px) { .cta__text { grid-column: 1 / span 7; } .cta__act { grid-column: 9 / -1; margin-top: 0; align-self: end; } }
.cta .lede { margin-top: 24px; }
.cta__act .btns { margin-top: 0; }
.email { margin-top: 18px; font-size: var(--w-small); color: var(--text-inverseSecondary); }
.mode-deep a:not(.btn) { color: var(--text-inverse); }
.placeholder { font-style: italic; }

/* ---- page heads (inner pages) */
.page-head { padding: 72px 0 56px; border-bottom: var(--w-rule); }
@media (min-width: 960px) { .page-head { padding: 112px 0 80px; } }
.page-head .h1 { max-width: 16em; }
.page-head .lede { margin-top: 24px; }

/* ---- about */
.about-fact { border-top: var(--w-rule-strong); padding-top: 20px; }
.about-fact .h3 { margin-bottom: 8px; }
.facts { display: grid; gap: 32px; }
@media (min-width: 960px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tags li { border: 1px solid var(--border-subtle); padding: 6px 12px; font-size: var(--w-small); }

/* ---- insights */
.post-list { border-top: var(--w-rule-strong); }
.post { display: grid; gap: 8px; padding: 28px 0; border-bottom: var(--w-rule); }
@media (min-width: 960px) { .post { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr); gap: 32px; } }
.post__title { font: 500 1.6rem/1.2 var(--font-display); color: var(--text-heading); }
.post__title a { color: inherit; text-decoration: none; } .post__title a:hover { text-decoration: underline; }
.badge { display: inline-block; border: 1px solid var(--text-secondary); color: var(--text-secondary); font: 600 0.75rem/1 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 7px 4px; }

/* article */
.article-head { padding: 72px 0 48px; }
@media (min-width: 960px) { .article-head { padding: 112px 0 64px; } }
.article-head .h1 { font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.75rem); max-width: 18em; }
.article-head .lede { margin-top: 24px; }
.byline { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--w-small); color: var(--text-secondary); border-top: var(--w-rule); padding-top: 16px; max-width: 46rem; }
.prose { max-width: 42rem; }
.prose h2 { font: 500 1.75rem/1.2 var(--font-display); color: var(--text-heading); margin: 2.2em 0 0.6em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 1.125rem; line-height: 1.7; }
.prose ol { counter-reset: s; margin: 1em 0 1.4em; }
.prose ol li { counter-increment: s; display: grid; grid-template-columns: 2.2rem 1fr; padding: 12px 0; border-top: var(--w-rule); }
.prose ol li::before { content: counter(s); font: 500 1.25rem/1.4 var(--font-display); color: var(--brand-accent); }
.prose ol li:last-child { border-bottom: var(--w-rule); }
.prose strong { font-weight: 600; color: var(--text-heading); }
.figure { margin: 2.4em 0; max-width: 46rem; }
.figure__head { font: 600 1rem/1.4 var(--font-text); color: var(--text-heading); margin-bottom: 4px; }
.figure__sub { font-size: var(--w-small); color: var(--text-secondary); margin-bottom: 16px; }
.figure__sub .badge { margin-left: 8px; vertical-align: 1px; }
.figure svg { width: 100%; height: auto; }
.figure figcaption { margin-top: 14px; font-size: 0.875rem; line-height: 1.5; color: var(--text-secondary); border-top: var(--w-rule); padding-top: 10px; }
.takeaways { margin: 2.4em 0; background: var(--background-paper); border-top: var(--w-rule-accent); padding: 24px 28px; max-width: 42rem; }
.takeaways li { padding: 8px 0; font-size: 1.0625rem; } .takeaways li + li { border-top: var(--w-rule); }
.note-box { max-width: 42rem; margin: 0 0 32px; border: 1px solid var(--border-subtle); padding: 14px 18px; font-size: var(--w-small); color: var(--text-secondary); }

/* ---- contact form */
.form { display: grid; gap: 20px; }
.field label { display: block; font: 600 0.9375rem/1.4 var(--font-text); color: var(--text-heading); margin-bottom: 6px; }
.field .hint { display: block; font-weight: 400; color: var(--text-secondary); font-size: 0.875rem; }
.field input, .field textarea { width: 100%; font: 400 1rem/1.5 var(--font-text); color: var(--text-primary); background: var(--background-page); border: 1px solid var(--text-secondary); padding: 12px 14px; border-radius: 0; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field textarea:focus { outline: 2px solid var(--brand-accent); outline-offset: 0; border-color: var(--brand-accent); }
.field .opt { font-weight: 400; color: var(--text-secondary); }
.field .err { display: block; margin-top: 6px; font-size: 0.875rem; color: var(--status-negative); font-weight: 500; }
.field [aria-invalid="true"] { border-color: var(--status-negative); border-width: 2px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form { position: relative; }
.form[aria-busy="true"] button[type="submit"] { opacity: 0.75; cursor: progress; }
.form-note { font-size: 0.875rem; color: var(--text-secondary); }
.state { display: none; border-top: 2px solid; padding: 18px 20px; margin-bottom: 24px; }
.state .h3 { font-size: 1.0625rem; margin-bottom: 4px; }
.state--error { border-color: var(--status-negative); background: var(--background-paper); }
.state--sent { border-color: var(--status-positive); background: var(--background-paper); }
/* states: the contact Worker renders them (errors un-hidden, "sent" from an inert template); no URL or fragment shows one */
.state[data-state]:not([hidden]) { display: block; scroll-margin-top: 96px; }
.err-list { margin-top: 8px; } .err-list li { padding: 2px 0; }
.contact__text { grid-column: 1 / -1; }
.contact__form { grid-column: 1 / -1; margin-top: 40px; }
@media (min-width: 960px) { .contact__text { grid-column: 1 / span 5; } .contact__form { grid-column: 7 / -1; margin-top: 0; } }

/* ---- legal pages (FINAL texts; bracketed owner items are visibly pending) */
.legal { max-width: 46rem; }
.legal h2 { font: 600 1.375rem/1.3 var(--font-text); color: var(--text-heading); margin: 2.2em 0 0.6em; }
.legal h3 { font: 600 1.0625rem/1.4 var(--font-text); color: var(--text-heading); margin: 1.6em 0 0.4em; }
.legal ul { list-style: disc; padding-left: 1.4em; margin: 0 0 1em; } .legal li { margin: 0.3em 0; }
.legal strong { font-weight: 600; color: var(--text-heading); }
.legal .pending { background: var(--background-paper); border-bottom: 1.5px dashed var(--status-caution); color: var(--text-heading); font-style: italic; padding: 0 2px; }
.table-wrap { overflow-x: auto; margin: 0 0 1.2em; }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--w-small); line-height: 1.5; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: var(--w-rule); }
.legal th { font-weight: 600; color: var(--text-heading); border-bottom: var(--w-rule-strong); }

/* ---- how I work (home): three exhibits drawn by the system's renderers, each on a white card on paper. The flywheel
   spans the row; the two charts sit side by side from 960 px. Each chart is drawn twice, wide and narrow, and one shows. */
.exhibits { display: grid; gap: 24px; }
@media (min-width: 960px) { .exhibits { grid-template-columns: 1fr 1fr; gap: 32px; } .exhibit--flywheel { grid-column: 1 / -1; } }
.exhibit { margin: 0; background: var(--background-page); border: 1px solid var(--border-subtle); border-top: var(--w-rule-accent); padding: 24px 20px; min-width: 0; display: flex; flex-direction: column; }
@media (min-width: 720px) { .exhibit { padding: 32px; } }
.exhibit__cap .h3 { max-width: 34em; }
.exhibit__sub { margin: 8px 0 24px; font-size: var(--w-small); color: var(--text-secondary); }
.exhibit__sub .badge { margin-left: 4px; vertical-align: 1px; white-space: nowrap; }
.exhibit svg { width: 100%; height: auto; }
.exhibit__plot--narrow { display: none; }
@media (max-width: 719.98px) { .exhibit__plot--wide { display: none; } .exhibit__plot--narrow { display: block; } }
.exhibit__source { margin-top: auto; padding-top: 12px; border-top: var(--w-rule); font-size: 0.875rem; line-height: 1.5; color: var(--text-secondary); }
.exhibit__plot + .exhibit__plot + .exhibit__source, .fw + .exhibit__source { margin-top: 20px; }
.exhibit__source b { font-weight: 600; color: var(--text-heading); }
.fw { max-width: 820px; margin: 0 auto; width: 100%; }
/* on a phone the ring keeps a legible size and its frame scrolls sideways; the table twin below carries every word */
@media (max-width: 719.98px) { .fw__frame { overflow-x: auto; } .fw__frame svg { min-width: 600px; } }
.twin { margin-top: 16px; }
.twin > summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; font: 600 var(--w-small)/1.3 var(--font-text); color: var(--text-link); }
.twin table { width: 100%; border-collapse: collapse; font-size: var(--w-small); line-height: 1.5; margin-top: 8px; }
.twin caption { text-align: left; color: var(--text-secondary); padding-bottom: 8px; }
.twin th, .twin td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: var(--w-rule); }
.twin thead th { font-weight: 600; color: var(--text-heading); border-bottom: var(--w-rule-strong); }
.twin tbody th { font-weight: 500; color: var(--text-heading); }
/* the flywheel's build (4.1 motion grammar: one movement per element, motion tokens only, ease-standard): the outcome
   fades in, then each stage fades in and rises in loop order, its arc draws toward the next stage and the arc's mechanism
   fades in and rises with it. Armed and played by the home page's inline script; under reduced motion nothing is armed
   or animated and the ring is drawn in its final state. */
@media (prefers-reduced-motion: no-preference) {
  .fw.is-armed .fw-hub { animation: fw-fade var(--motion-standard) var(--ease-standard) 0s both paused; }
  .fw.is-armed .fw-stage, .fw.is-armed .fw-mech { animation: fw-rise var(--motion-slow) var(--ease-standard) both paused; }
  .fw.is-armed .fw-stage { animation-delay: calc(var(--motion-standard) + var(--k) * var(--motion-slow)); }
  .fw.is-armed .fw-link { stroke-dasharray: 1; animation: fw-draw var(--motion-standard) var(--ease-standard) both paused; }
  .fw.is-armed .fw-link, .fw.is-armed .fw-mech { animation-delay: calc(2 * var(--motion-standard) + var(--k) * var(--motion-slow)); }
  .fw.is-playing .fw-hub, .fw.is-playing .fw-stage, .fw.is-playing .fw-mech, .fw.is-playing .fw-link { animation-play-state: running; }
}
@keyframes fw-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fw-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes fw-draw { from { opacity: 0; stroke-dashoffset: 1; } 30% { opacity: 1; } to { opacity: 1; stroke-dashoffset: 0; } }

/* ---- 404 */
.nf { padding: 120px 0; min-height: 60vh; }

/* ---- footer */
.site-foot { border-top: 1px solid var(--border-inverse); background: var(--background-inverse); color: var(--text-inverseSecondary); padding: 64px 0 40px; font-size: var(--w-small); }
.site-foot .grid { row-gap: 32px; }
.foot__brand { grid-column: 1 / -1; }
.foot__brand img { width: 148px; }
.foot__brand p { margin-top: 18px; max-width: 24em; }
.foot__nav { grid-column: span 2; }
@media (min-width: 960px) { .foot__brand { grid-column: 1 / span 5; } .foot__nav { grid-column: span 2; } .foot__nav:first-of-type { grid-column: 8 / span 2; } }
.foot__nav .label { color: var(--text-inverse); margin-bottom: 12px; }
.foot__nav a { color: var(--text-inverseSecondary); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.foot__nav a:hover { color: var(--text-inverse); text-decoration: underline; }
.foot__base { grid-column: 1 / -1; border-top: 1px solid var(--border-inverse); padding-top: 20px; margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.foot__base a { color: var(--text-inverseSecondary); display: inline-flex; align-items: center; min-height: 44px; }

/* ---- sticky mobile CTA: phones and tablets only; absent on the contact, legal and 404 pages (no has-sticky class) */
.sticky-cta { display: none; }
@media (max-width: 959.98px) {
  .has-sticky .sticky-cta { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; padding: 10px var(--w-pad) calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.97); border-top: var(--w-rule); }
  .has-sticky .sticky-cta .btn { width: 100%; justify-content: center; }
  .has-sticky { padding-bottom: 72px; } /* the bar never covers the end of the page */
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }
@media print { .site-head, .site-foot, .btns, .menu, .sticky-cta { display: none; } body { font-size: 11pt; } }