/* ART/GTO marketing pages + docs: the Notation identity layer (Nov 2026).
   Loads LAST in <head>, after site.css (inline copy), site-taste.css, static-chrome.css and brand/brand.css.
   Everything here uses brand.css variables. Action colours (--act-*) are data and are not touched. */

/* ── 1. tokens: the old names, the brand's values ─────────────────────────────────────────── */
:root {
  --paper: var(--b-white); --paper-elev: var(--b-paper); --paper-raised: var(--b-white); --paper-inset: var(--b-paper);
  --brd: var(--b-rule); --brd-strong: var(--b-ink);
  --ink: var(--b-ink); --ink-dim: var(--b-ink-2); --ink-faint: var(--b-ink-2);
  --felt: var(--b-klein); --felt-mid: var(--b-klein);
  --brass: var(--b-verm-deep); --brass-bright: var(--b-acid); --brass-text: var(--b-klein);
  --mono: var(--b-mono); --serif: var(--b-serif); --claim: var(--b-serif); --docs-sans: var(--b-serif);
  --ease-spring: var(--b-ease); --win-frame: var(--b-frame);
}

/* ── 2. base ─────────────────────────────────────────────────────────────────────────────── */
body { background: var(--b-white); color: var(--b-ink); font-family: var(--b-mono); font-stretch: 87.5%; }
a:hover { color: var(--b-klein); }
::selection { background: var(--b-acid); color: var(--b-ink); }
:focus-visible { outline: 3px solid var(--b-verm) !important; outline-offset: 2px; }

/* squared, flat: no rounding, no drop shadows (the wordmark's dots stay round) */
#root *:not(i), .docs-page *:not(i), .seohome *:not(i) { border-radius: 0 !important; }
#root *:not(.n-keep-shadow), .docs-page *, .seohome * { box-shadow: none !important; }
#root i.dot { border-radius: 50% !important; }

/* display type: Archivo Expanded 900, uppercase */
#root h1, #root h2, .docs-page h1, .seohome h1, .seohome h2 {
  font-family: var(--b-display) !important; font-weight: 900 !important; font-stretch: 125%; font-style: normal !important;
  text-transform: uppercase !important; letter-spacing: -.015em !important; line-height: .96 !important; }
#root h3, #root h4, .docs-page h2, .docs-page h3, .seohome h3 {
  font-family: var(--b-display) !important; font-weight: 800 !important; font-stretch: 112%; font-style: normal !important;
  text-transform: uppercase; letter-spacing: -.005em !important; line-height: 1.05 !important; }
#root h1 em, #root h2 em, #root h3 em { font-style: normal !important; }

/* serif prose is never set below 15 px (STIX at the old 12-13 px mono sizes is too small to read) */
#root p, #root li { font-size: max(15px, 1em); }
#root table p, #root table li, #root .video-meta p { font-size: inherit; }

/* prose: STIX Two Text; labels, data, buttons: Martian Mono */
main p, main li, main dd, .seohome p, .seohome li, #root [class*="lede"], #root [class$="-body"], #root [class$="-desc"], #root [class$="-text"] {
  font-family: var(--b-serif) !important; font-stretch: normal; }
#root [class*="eyebrow"], #root [class*="kicker"], #root [class*="-tag"]:not(.fh-section-tag), #root .tag {
  font-family: var(--b-mono) !important; letter-spacing: .08em !important; text-transform: uppercase; }
#root code, .docs-page code, .seohome code { font-family: var(--b-mono); font-stretch: 87.5%; background: var(--b-paper); color: var(--b-ink); }

/* buttons: vermilion = the action (ink type on vermilion: 6.6:1), ghosts are 3 px frames */
.btn, [class*="btn-"]:not(.docs-burger):not(.pv-btn), .seohome-cta, .wl-cta {
  border-radius: 0 !important; font-family: var(--b-mono) !important; font-weight: 700 !important; letter-spacing: .06em; text-transform: uppercase; }
.btn-primary, .btn-download, .seohome-cta:not(.alt), .wl-cta { background: var(--b-verm) !important; color: var(--b-ink) !important; border-color: var(--b-verm) !important; }
.btn-primary:hover, .btn-download:hover, .seohome-cta:hover, .wl-cta:hover { background: var(--b-ink) !important; color: var(--b-white) !important; border-color: var(--b-ink) !important; transform: translateY(-2px); }
.btn-ghost, .seohome-cta.alt { background: transparent !important; color: inherit !important; border: var(--b-frame) solid currentColor !important; }
.btn-ghost:hover, .seohome-cta.alt:hover { background: var(--b-acid) !important; color: var(--b-ink) !important; border-color: var(--b-ink) !important; }

/* ── 3. the shared top bar (.sc-top) and footer (.sc-foot): Klein bar, ink footer ─────────── */
.sc-top, .sc-foot {
  --sc-paper: var(--b-klein); --sc-raised: var(--b-white); --sc-inset: var(--b-paper); --sc-frame: var(--b-ink);
  --sc-ink: var(--b-ink); --sc-brass: var(--b-acid); --sc-brass-bright: var(--b-acid);
  --sc-sans: var(--b-mono); --sc-mono: var(--b-mono); }
.sc-top { background: var(--b-klein); color: var(--b-white); border-bottom: 0; font-stretch: 87.5%; }
.sc-top .sc-brand { color: var(--b-white) !important; gap: 10px; }
.sc-nav > a, .sc-more > summary, .sc-menu > summary {
  background: transparent; color: var(--b-white) !important; height: 34px; padding: 0 10px;
  font: 600 11.5px/1 var(--b-mono); font-stretch: 87.5%; letter-spacing: .06em; text-transform: uppercase; }
.sc-nav > a:hover, .sc-more > summary:hover, .sc-more[open] > summary, .sc-menu > summary:hover, .sc-menu[open] > summary {
  background: var(--b-acid); color: var(--b-ink) !important; }
.sc-nav > a.sc-on { background: var(--b-white); color: var(--b-klein) !important; }
.sc-nav > a.sc-hl { background: transparent; color: var(--b-acid) !important; box-shadow: inset 0 -3px 0 var(--b-acid); }
.sc-nav > a.sc-hl:hover { background: var(--b-acid); color: var(--b-ink) !important; }
.sc-nav > a.sc-hl.sc-on { background: var(--b-white); color: var(--b-klein) !important; box-shadow: none; }
.sc-cta { background: var(--b-verm); color: var(--b-ink) !important; height: 38px; padding: 0 16px; margin-left: 10px;
  font: 700 12px/1 var(--b-mono); font-stretch: 87.5%; letter-spacing: .06em; text-transform: uppercase; }
.sc-cta:hover { background: var(--b-white); color: var(--b-klein) !important; }
@media (max-width: 420px) {   /* room for the lock-up next to CTA and Menu, as on /learn (brand-chrome.css) */
  .sc-cta, .sc-menu > summary { padding: 0 8px; letter-spacing: .04em; } .sc-cta { font-size: 11px; } }
.sc-top :focus-visible { outline: 3px solid var(--b-acid) !important; outline-offset: 2px; }
.sc-win { border: var(--b-frame) solid var(--b-ink); box-shadow: none; background: var(--b-white); }
.sc-bar, .sc-sub { background: var(--b-ink); color: var(--b-acid); font-family: var(--b-mono); }
.sc-win a, .sc-sheet a { font: 600 13px/1.2 var(--b-mono); font-stretch: 87.5%; color: var(--b-ink) !important; }
.sc-win a:hover, .sc-sheet a:hover { background: var(--b-klein); color: var(--b-white) !important; }
.sc-badge { background: var(--b-acid); color: var(--b-ink); }
.sc-sheet { background: var(--b-white); border-top: var(--b-frame) solid var(--b-ink); border-bottom: var(--b-frame) solid var(--b-ink); box-shadow: none; }
.sc-sheet a { border-bottom: 1px solid var(--b-rule); font-size: 15px; }
.sc-sheet a.sc-on { background: var(--b-klein); color: var(--b-white) !important; }
.sc-sheet a.sc-hl { background: var(--b-acid); color: var(--b-ink) !important; }

.sc-foot { background: var(--b-ink); color: var(--b-peri); font-family: var(--b-mono); font-stretch: 87.5%; border-top: 0; }
.sc-foot .sc-brand { color: var(--b-white) !important; }
.sc-fmain p, .sc-meta { color: var(--b-peri); font-family: var(--b-mono); }
.sc-foot code { background: rgba(212, 255, 58, .12); color: var(--b-acid); }
.sc-col h2 { color: var(--b-acid); font: 600 11px/1 var(--b-mono) !important; font-stretch: 87.5%; letter-spacing: .1em !important; text-transform: uppercase !important; }
.sc-col a { color: var(--b-white) !important; font-family: var(--b-mono); }
.sc-col a:hover { color: var(--b-acid) !important; }
.sc-meta { border-top: 2px solid var(--b-white); }

/* ── 4. fields, windows, section numbers ────────────────────────────────────────────────── */
.field { background: var(--b-white); }
.f-felt { background: var(--b-klein) !important; color: var(--b-white); }
.f-ink { background: var(--b-ink) !important; color: var(--b-white); }
.tag { background: var(--b-ink); color: var(--b-acid); font-weight: 600; }

/* a window: 3 px ink frame, ink title band with acid labels */
.win { background: var(--b-ink); }
.win__bar { background: var(--b-ink); color: var(--b-white); font-family: var(--b-mono); }
.win__bar span:last-child { color: var(--b-acid); }
.win__body { background: var(--b-white); }
.f-felt .win, .f-ink .win { background: var(--b-white); }
.f-felt .win__bar { background: var(--b-white); color: var(--b-klein); }
.f-felt .win__bar span:last-child { color: var(--b-verm-deep); }

/* every section head carries its § number (counted per page) */
.page-enter { counter-reset: nsec; }
.section-head, .fh-section-tag, .home-v2 > section { counter-increment: nsec; }
.section-head { border-top: 2px solid currentColor; padding-top: 18px; }
.section-head .eyebrow { color: var(--b-klein); font-family: var(--b-mono); font-weight: 600; }
.section-head .eyebrow::before { content: "\00A7" counter(nsec) "\2003"; color: var(--b-ink); }
.section-head h2 { font-size: var(--b-t-h2) !important; max-width: 18ch; }
#root section { border-bottom: 0; }

/* ── 5. subpage head: a drenched Klein field, the title slammed in a white block ───────────── */
.page-head { background: var(--b-klein); color: var(--b-white); border-bottom: 0; padding: var(--b-hero-pad) 0 calc(var(--b-hero-pad) + 8px); position: relative; overflow: hidden; }
.page-head .container { position: relative; }
.page-head .ph-title { font-size: var(--b-t-title) !important; max-width: 20ch !important; color: var(--b-klein); margin: 0 0 .55em !important; line-height: 1.08 !important; }
.page-head .ph-title .ph-slab { background: var(--b-white); padding: .06em .22em .02em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.page-head p, .page-head .ph-lede { color: var(--b-white) !important; font-family: var(--b-serif) !important; font-size: var(--b-t-lead) !important; line-height: 1.45; max-width: 60ch; }
.page-head p strong, .page-head p b { color: var(--b-white); }
.page-head p code { background: var(--b-klein-deep); color: var(--b-acid); }
.page-head a:not(.big-cta):not([class*="btn"]) { color: var(--b-acid); text-decoration: underline; }
/* the brand slash closes the head field (guideline: section divider), vermilion, 45 degrees */
.page-head::after { content: ""; position: absolute; right: clamp(16px, 4vw, 56px); bottom: 20px; width: 26px; height: 20px;
  background: var(--b-verm); clip-path: polygon(0 100%, 78% 0, 100% 0, 22% 100%); }
.big-cta { font-family: var(--b-display) !important; font-weight: 900 !important; font-stretch: 112%; text-transform: uppercase !important; letter-spacing: -.01em; }
.page-head .big-cta { color: var(--b-white); }
.page-head .big-cta::after { background: var(--b-verm); }
.page-head .big-cta:hover { color: var(--b-acid); }
.page-head .big-cta-note { color: var(--b-peri); }

/* ── 6. home ──────────────────────────────────────────────────────────────────────────────── */
.home-v2 .hero-n { background: var(--b-klein) !important; color: var(--b-white); padding: var(--b-hero-pad) 0 calc(var(--b-hero-pad) + 8px) !important; }
/* the headline column is a size container: the headline scales with its own column, so its longest word never reaches the figure */
.hero-n__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.hero-n__copy { container-type: inline-size; }
.hero-n .tag { background: var(--b-acid); color: var(--b-ink); }
.home-v2 .hero-n h1 { font-size: var(--b-t-display) !important; font-size: clamp(24px, 8.6cqi, 60px) !important; line-height: 1.02 !important; max-width: none !important; margin: 18px 0 22px !important;
  text-transform: uppercase !important; letter-spacing: -.03em !important; }
.hero-n h1 .b-block { -webkit-box-decoration-break: clone; box-decoration-break: clone; display: inline; padding: .04em .2em 0; line-height: 1.16; }
.hero-n h1 .b-block--white { color: var(--b-klein); }
.hero-n h1 .b-block--verm { color: var(--b-ink); }
.home-v2 .hero-n .lead2 { color: var(--b-white); font: 400 var(--b-t-lead)/1.45 var(--b-serif) !important; max-width: 52ch; }
.home-v2 .hero-n .lead2 b { color: var(--b-white); font-weight: 700; }
.home-v2 .hero-n .lead2 code, #root .hero-n code { background: var(--b-klein-deep); color: var(--b-acid); font-size: .8em; }
.home-v2 .hero-n .lead2 a { color: var(--b-acid); text-decoration: underline; text-underline-offset: 3px; }
.home-v2 .hero-n .facts2 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 22px 0; border: var(--b-frame) solid var(--b-white); }
.home-v2 .hero-n .facts2 li + li a { border-left: 2px solid var(--b-white); }
.home-v2 .hero-n .facts2 a { background: transparent; border: 0; color: var(--b-white); padding: 12px 12px 13px; }
.home-v2 .hero-n .facts2 a:hover { background: var(--b-acid); color: var(--b-ink); }
.home-v2 .hero-n .facts2 b { font: 700 11.5px/1.25 var(--b-mono); letter-spacing: .05em; text-transform: uppercase; }
.home-v2 .hero-n .facts2 span { color: inherit; opacity: .9; font: 400 14px/1.35 var(--b-serif); margin-top: 6px; }
.home-v2 .hero-n .ctas { gap: 16px; align-items: center; margin-top: 24px; }
.home-v2 .hero-n .ctas .big-cta { flex-direction: row; font: 800 clamp(15px, 1.3vw, 18px)/1 var(--b-display) !important; font-stretch: 112%; letter-spacing: 0;
  padding: 18px 26px; background: var(--b-verm); color: var(--b-ink); }
.home-v2 .hero-n .ctas .big-cta::after { display: none; }
.home-v2 .hero-n .ctas .big-cta:hover { background: var(--b-ink); color: var(--b-white); transform: translateY(-2px); }
.home-v2 .hero-n .ctas .big-cta + .big-cta { background: transparent; color: var(--b-white); outline: var(--b-frame) solid var(--b-white); outline-offset: calc(-1 * var(--b-frame)); }
.home-v2 .hero-n .ctas .big-cta + .big-cta:hover { background: var(--b-acid); color: var(--b-ink); outline-color: var(--b-acid); }
/* Fig. 1: what you own, in one bracketed 2×2 */
.hero-n__fig { margin: 40px 0 0; position: relative; padding: 16px 40px; max-width: 400px; justify-self: end; width: 100%; }
.hero-n__fig::before, .hero-n__fig::after { content: ""; position: absolute; top: 0; bottom: 0; width: 22px; border: 10px solid var(--b-white); }
.hero-n__fig::before { left: 0; border-right: 0; }
.hero-n__fig::after { right: 0; border-left: 0; }
.hero-n__fig .g { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.hero-n__fig .g > div { aspect-ratio: 1; background: var(--b-klein-deep); display: grid; place-items: center; }
.hero-n__fig .g > div.f { background: var(--b-verm); color: var(--b-ink); }
.hero-n__fig img, .hero-n__fig svg { width: 56%; height: auto; display: block; }
@media (max-width: 980px) { .hero-n__grid { grid-template-columns: 1fr; } .hero-n__fig { max-width: 300px; margin-top: 8px; justify-self: start; } }
@media (max-width: 860px) { .home-v2 .hero-n .facts2 { grid-template-columns: 1fr 1fr; } .home-v2 .hero-n .facts2 li + li a { border-left: 0; }
  .home-v2 .hero-n .facts2 li a { border-top: 2px solid var(--b-white); } .home-v2 .hero-n .facts2 li:nth-child(-n+2) a { border-top: 0; }
  .home-v2 .hero-n .facts2 li:nth-child(even) a { border-left: 2px solid var(--b-white); } }

.home-v2 .product .go b { background: var(--b-verm); color: var(--b-ink); font-family: var(--b-mono); }
.home-v2 .product:hover .go b { background: var(--b-klein); color: var(--b-white); }
.home-v2 .product:hover .win__bar { background: var(--b-klein); }
.home-v2 .product .go { color: var(--b-ink-2); font-family: var(--b-mono); }
.home-v2 .product h3 { font: 900 var(--b-t-h3)/1 var(--b-display) !important; font-stretch: 125%; }
.home-v2 .claim { border-top: 2px solid var(--b-white); }
.home-v2 .claim h2 { color: var(--b-white) !important; font-size: calc(var(--b-t-h2) * 1.2) !important; }
.home-v2 .claim:first-child h2 span, .home-v2 .claim h2 { text-transform: uppercase !important; }
.home-v2 .claim p { color: var(--b-white); font-family: var(--b-serif) !important; }
.home-v2 .claim .fig > div { color: var(--b-acid); font: 900 clamp(36px, 5vw, 64px)/.9 var(--b-display); font-stretch: 125%; }
.home-v2 .claim .fig small { color: var(--b-peri); }
.home-v2 .links a { background: var(--b-white); color: var(--b-ink) !important; font-family: var(--b-mono); }
.home-v2 .links a:hover { background: var(--b-acid); color: var(--b-ink) !important; }
.home-v2 .video-meta, .video-meta { background: var(--b-white); color: var(--b-ink-2); font-family: var(--b-mono) !important; }
.pv-btn { background: var(--b-verm) !important; color: var(--b-ink) !important; border-radius: 0 !important; }
.pv-label { color: var(--b-white); font-family: var(--b-mono); }
.tc-label { font-family: var(--b-display) !important; font-weight: 900; font-stretch: 125%; text-transform: uppercase; color: var(--b-white) !important; }
.tc-arr { background: var(--b-verm) !important; color: var(--b-ink) !important; border-radius: 0 !important; }

/* ── 7. cards / windows on the inner pages ─────────────────────────────────────────────────── */
.plan > .upgrade-badge { background: var(--b-acid) !important; color: var(--b-ink) !important; }
a.lib-card:hover, a.fmt-jump-card:hover, a.viewer-thumb:hover { --win-band: var(--b-klein); }
.plan.featured, .plan.pro, .plan-featured { --win-band: var(--b-klein); }
.ring-card { background: var(--b-ink); box-shadow: none !important; }
.ring-bar { background: var(--b-ink); color: var(--b-white); }
.ring:focus-visible .ring-stage { box-shadow: 0 0 0 3px var(--b-verm) !important; }
.fh-section-tag-badge, .fh-badge-felt { background: var(--b-klein) !important; color: var(--b-white) !important; font-family: var(--b-mono) !important; }
.fh-eyebrow { color: var(--b-klein) !important; font-weight: 600; }
.fh-eyebrow::before { content: "\00A7\2009"; color: var(--b-ink); }
.fh-title { font-size: clamp(24px, 2.6vw, 36px) !important; }
.fh-band-alt { background: var(--b-paper) !important; }
.fh-link, .fh-link .arr { color: var(--b-klein) !important; font-family: var(--b-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.fh-visual-dark { background: var(--b-klein) !important; }
.iso-fig { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 40px); padding: clamp(24px, 4vw, 48px); min-height: 100%; }
.iso-fig img { width: clamp(72px, 9vw, 120px); height: auto; display: block; }
.iso-fig .iso-op { font: 900 clamp(28px, 3vw, 44px)/1 var(--b-display); font-stretch: 125%; color: var(--b-acid); }
.waitlist { background: var(--b-klein) !important; }
section.waitlist h2, section.waitlist h3 { color: var(--b-white) !important; }
section.waitlist p, section.waitlist small, section.waitlist span { color: var(--b-white) !important; }
section.waitlist a, section.waitlist button { background: var(--b-verm) !important; color: var(--b-ink) !important; border-color: var(--b-verm) !important; }
section.waitlist a:hover, section.waitlist button:hover { background: var(--b-white) !important; color: var(--b-klein) !important; }
section.waitlist input { border: var(--b-frame) solid var(--b-white) !important; background: var(--b-white); color: var(--b-ink); font-family: var(--b-mono); }
footer.footer { background: var(--b-ink) !important; }
footer.footer h4, footer.footer h5, footer.footer [class*="head"], footer.footer [class*="title"] { color: var(--b-acid) !important; }
.faq-item { border-top: 2px solid var(--b-ink) !important; }
.faq-item .q { font-family: var(--b-display) !important; font-weight: 800; font-stretch: 112%; text-transform: uppercase; }
.lb-overlay { background: rgba(13, 14, 31, .96) !important; }
.lb-close, .lb-nav { background: var(--b-white) !important; color: var(--b-ink) !important; border-radius: 0 !important; font-family: var(--b-mono); }
.lb-thumb-on { outline: 3px solid var(--b-verm) !important; }

/* ── 8. docs ──────────────────────────────────────────────────────────────────────────────── */
.docs-page { font-family: var(--b-serif); color: var(--b-ink); }
.docs-side, .docs-rail { background: var(--b-paper); border-right: 2px solid var(--b-ink); }
.docs-rail { border-right: 0; border-left: 2px solid var(--b-ink); }
.docs-search, .docs-landing-search { border: 2px solid var(--b-ink) !important; background: var(--b-white) !important; }
.docs-search input, .docs-landing-search input { font-family: var(--b-mono); font-stretch: 87.5%; }
.docs-search-kbd { border: 1.5px solid var(--b-ink) !important; font-family: var(--b-mono); }
.docs-grp-btn { font-family: var(--b-mono) !important; color: var(--b-klein) !important; font-weight: 700; letter-spacing: .08em; }
.docs-link { font-family: var(--b-serif) !important; color: var(--b-ink) !important; font-size: 15px !important; }
.docs-link:hover { background: var(--b-white) !important; color: var(--b-klein) !important; }
.docs-link.active, .docs-link[aria-current] { background: var(--b-klein) !important; color: var(--b-white) !important; }
.docs-eyebrow, .docs-side-eyebrow, .docs-rail h6 { color: var(--b-klein) !important; font-family: var(--b-mono) !important; }
.docs-h1, .docs-landing-h1 { font-family: var(--b-display) !important; font-weight: 900 !important; font-stretch: 125%; font-style: normal !important;
  text-transform: uppercase; letter-spacing: -.02em; line-height: 1 !important; font-size: var(--b-t-title) !important; color: var(--b-ink); }
.docs-lede, .docs-landing-lede { font-family: var(--b-serif) !important; font-size: var(--b-t-lead) !important; color: var(--b-ink-2) !important; }
.docs-article { font-family: var(--b-serif); }
.docs-article p, .docs-article li { font-family: var(--b-serif); font-size: var(--b-t-body); line-height: 1.6; color: var(--b-ink); }
.docs-article h2 { font-size: var(--b-t-h3) !important; border-top: 2px solid var(--b-ink); padding-top: 16px; }
.docs-article { counter-reset: dsec; }
.docs-article h2 { counter-increment: dsec; }
.docs-article h2::before { content: "\00A7\2002"; font-family: var(--b-mono); font-weight: 600; font-stretch: 87.5%; font-size: .55em; vertical-align: .35em; color: var(--b-klein); letter-spacing: .04em; }
.docs-article h3 { font-size: 18px !important; }
.docs-article h4 { font-family: var(--b-mono) !important; font-weight: 700 !important; text-transform: uppercase; font-size: 13px !important; letter-spacing: .06em; }
.docs-article a, .docs-article a.lnk, .docs-pn a, .docs-bc a { color: var(--b-klein) !important; }
.docs-article a:hover { background: var(--b-acid); color: var(--b-ink) !important; }
.docs-article strong { color: var(--b-ink); }
.docs-bc, .docs-bc-cur { font-family: var(--b-mono); font-stretch: 87.5%; }
.docs-card { background: var(--b-white) !important; border: var(--b-frame) solid var(--b-ink) !important; }
.docs-card:hover { border-color: var(--b-klein) !important; }
.docs-card-top { border-bottom: 0; }
.docs-card-glyph { background: var(--b-klein) !important; color: var(--b-white) !important; border: 0 !important; width: 48px !important; height: 48px !important; }
.docs-card-glyph img { width: 40px; height: 40px; display: block; }
.docs-card-count { font-family: var(--b-mono) !important; color: var(--b-klein) !important; }
.docs-card-title { font-family: var(--b-display) !important; font-weight: 900 !important; font-stretch: 125%; text-transform: uppercase; font-size: 21px !important; }
.docs-card-blurb { font-family: var(--b-serif) !important; font-size: 16px !important; color: var(--b-ink-2) !important; }
.docs-card-list { border-top: 2px solid var(--b-ink) !important; }
.docs-card-link { font-family: var(--b-serif) !important; color: var(--b-ink) !important; font-size: 15px !important; }
.docs-card-link:hover { color: var(--b-klein) !important; background: var(--b-paper); }
.docs-table th { background: var(--b-ink) !important; color: var(--b-white) !important; font-family: var(--b-mono); }
.docs-table td { font-family: var(--b-serif); border-color: var(--b-rule) !important; }
.callout { border: 0 !important; border-left: 6px solid var(--b-klein) !important; background: var(--b-paper) !important; }
.callout-tip { border-left-color: var(--b-acid) !important; }
.callout-warn { border-left-color: var(--b-verm) !important; }
.callout-title { font-family: var(--b-mono) !important; text-transform: uppercase; letter-spacing: .06em; }
.codeblock { border: var(--b-frame) solid var(--b-ink) !important; background: var(--b-ink) !important; }
.codeblock-head { background: var(--b-ink) !important; color: var(--b-acid) !important; border-bottom: 1px solid var(--b-ink-2) !important; }
.codeblock pre, .codeblock code { color: var(--b-white) !important; background: transparent !important; font-family: var(--b-mono); }
.figure-frame { border: var(--b-frame) solid var(--b-ink) !important; }
.figure-tag { background: var(--b-ink) !important; color: var(--b-acid) !important; font-family: var(--b-mono); }
.figure-cap { font-family: var(--b-mono) !important; font-stretch: 87.5%; }
.docs-pn a { border: 2px solid var(--b-ink) !important; }
.docs-pn a:hover { background: var(--b-klein) !important; color: var(--b-white) !important; }
.docs-pn a:hover * { color: var(--b-white) !important; }
.docs-mobilebar { background: var(--b-ink) !important; color: var(--b-white) !important; }
.docs-mobilebar-label { font-family: var(--b-mono); color: var(--b-white) !important; }
.docs-burger span { background: var(--b-white) !important; }

/* ── 9. the pre-rendered fallback (#root .seohome: crawlers, no-JS, before React) ─────────── */
#root .seohome { font-family: var(--b-serif); color: var(--b-ink); }
#root .seohome-bar { border-bottom: 2px solid var(--b-ink); }
#root .seohome-brand { font: 900 19px/1 var(--b-display); font-stretch: 125%; color: var(--b-klein); }
#root .seohome-brand .sl { color: var(--b-verm-deep); }
#root .seohome-nav a { font-family: var(--b-mono); font-stretch: 87.5%; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--b-ink); }
#root .seohome-nav a:hover { color: var(--b-klein); }
#root .seohome h1 { background: var(--b-klein); color: var(--b-white); padding: clamp(24px, 4vw, 48px); font-size: var(--b-t-title) !important; max-width: none !important; }
#root .seohome h2 { font-size: var(--b-t-h3); border-top: 2px solid var(--b-ink); padding-top: 14px; color: var(--b-ink); }
#root .seohome p, #root .seohome ul, #root .seohome-lede { color: var(--b-ink); font-family: var(--b-serif); }
#root .seohome a.lnk, #root .seohome-card a { color: var(--b-klein); }
#root .seohome-card { border: var(--b-frame) solid var(--b-ink); background: var(--b-white); }
#root .seohome-card h3 { font: 800 15px/1.1 var(--b-display); font-stretch: 112%; text-transform: uppercase; }
#root .seohome-cta:not(.alt) { padding: 14px 22px; }
#root .seohome-cta.alt { color: var(--b-klein) !important; margin-left: 10px; padding: 11px 20px; }
#root .seohome-foot { border-top: 2px solid var(--b-ink); color: var(--b-ink-2); font-family: var(--b-mono); }
#root .seohome video { border-radius: 0 !important; background: var(--b-ink) !important; }

@media (prefers-reduced-motion: reduce) {
  #root *, .docs-page *, .sc-top *, .sc-foot * { transition: none !important; animation: none !important; }
}

/* ── 10. phones ───────────────────────────────────────────────────────────────────────────── */
.hero-n__copy { min-width: 0; }
@media (max-width: 980px) { .hero-n__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .page-head .ph-title { font-size: clamp(24px, 7vw, 32px) !important; }
  #root h2 { overflow-wrap: anywhere; }
  /* Fig. 1 as one bracketed row of four on phones, so the hero stays short */
  .hero-n__fig { max-width: 300px; padding: 8px 24px; margin-top: 4px; }
  .hero-n__fig::before, .hero-n__fig::after { border-width: 6px; width: 14px; }
  .hero-n__fig .g { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .home-v2 .hero-n .ctas .big-cta { padding: 15px 18px; }
}
@media (max-width: 600px) { .page-head { padding-bottom: 40px; } .page-head::after { bottom: 14px; width: 20px; height: 16px; } }
.waitlist .wl-cta { text-transform: uppercase; font-size: 14px; padding: 14px 20px; }

/* ── 11. home proportions: each section as tall as on the old page (±5 %), with the smaller type ── */
/* desktop: the headline fills its column up to 68 px, so the hero keeps the old page's proportions (its longest word, SOLUTIONS, is 8.4 em) */
@media (min-width: 981px) { .home-v2 .hero-n h1 { font-size: clamp(24px, 10cqi, 68px) !important; } }
@media (min-width: 981px) { .home-v2 .claim h2 { font-size: calc(var(--b-t-h2) * 1.45) !important; } }   /* the claims keep the old 56 px statement size */
@media (min-width: 981px) { .home-v2 .claims .claim { padding-bottom: 18px; } }   /* STIX sets the claim copy in fewer lines than the old sans; the gap keeps the old rhythm */

/* ── 11/06: the top bar on offset white (Mist), set apart from the Klein hero by an ink rule; links in ink, active = Klein */
.sc-top { background: var(--b-paper) !important; color: var(--b-ink) !important; border-bottom: 2px solid var(--b-ink) !important; }
.sc-top .sc-brand { color: var(--b-ink) !important; }
.sc-nav > a, .sc-more > summary, .sc-menu > summary { color: var(--b-ink) !important; }
.sc-nav > a:hover, .sc-more > summary:hover, .sc-more[open] > summary, .sc-menu > summary:hover, .sc-menu[open] > summary { background: var(--b-acid) !important; color: var(--b-ink) !important; }
.sc-nav > a.sc-on, .sc-nav > a.sc-hl.sc-on { background: var(--b-klein) !important; color: var(--b-white) !important; box-shadow: none !important; }
.sc-nav > a.sc-hl { color: var(--b-klein) !important; box-shadow: inset 0 -3px 0 var(--b-klein) !important; }
.sc-cta:hover { background: var(--b-ink) !important; color: var(--b-white) !important; }
.sc-top :focus-visible { outline: 3px solid var(--b-klein) !important; }

/* ── 11/06: home hero shorter than the live page's, so the video row peeks above the fold as it does there */
.home-v2 .hero-n { padding: clamp(22px, 2.6vw, 40px) 0 clamp(26px, 3vw, 44px) !important; }
@media (min-width: 981px) { .home-v2 .hero-n h1 { font-size: clamp(24px, 9cqi, 60px) !important; margin: 14px 0 16px !important; } }
.home-v2 .hero-n .facts2 { margin: 16px 0 !important; }
.home-v2 .hero-n .ctas { margin-top: 18px !important; }
.hero-n__fig { margin-top: 28px; }
@media (max-width: 600px) {
  .home-v2 .hero-n h1 { margin: 12px 0 14px !important; }
  .home-v2 .hero-n .facts2 a { padding: 9px 10px 10px !important; }
  .home-v2 .hero-n .facts2 span { margin-top: 3px !important; }
  .home-v2 .hero-n .facts2 { margin: 14px 0 !important; } }
/* 11/06: the video band right under the Klein hero is ink, so the next section reads as a new band at the fold (the old page: cream → felt) */
.home-v2 .hero-n + section.f-felt, .home-v2 .hero-n + .f-felt { background: var(--b-ink) !important; }
.home-v2 .hero-n + .f-felt .win__bar { background: var(--b-klein); color: var(--b-white); }
.home-v2 .hero-n + .f-felt .win__bar span:last-child { color: var(--b-acid); }
/* hero copy at the old page's density: facts as one compact row, prose 1.5 line-height */
.home-v2 .hero-n .facts2 a { padding: 9px 11px 10px !important; }
.home-v2 .hero-n .facts2 span { font-size: 13px !important; margin-top: 4px !important; line-height: 1.3 !important; }
.home-v2 .hero-n .lead2, .home-v2 .hero-n p { line-height: 1.45 !important; }
@media (min-width: 981px) { .home-v2 .hero-n { padding-bottom: 30px !important; } }

/* 11/06: the hero fact boxes as the old page had them: five separate tiles with a gap, title in sentence case over a quiet line.
   White tiles on Klein, ink text, squared; hover = acid. Overrides the joined, framed grid above. */
.home-v2 .hero-n .facts2 { border: 0 !important; gap: 8px !important; margin: 18px 0 !important; }
.home-v2 .hero-n .facts2 li a, .home-v2 .hero-n .facts2 li + li a,
.home-v2 .hero-n .facts2 li:nth-child(even) a { border: 0 !important; }
.home-v2 .hero-n .facts2 a { height: 100%; background: var(--b-white) !important; color: var(--b-ink) !important; padding: 11px 13px 12px !important; }
.home-v2 .hero-n .facts2 a:hover { background: var(--b-acid) !important; color: var(--b-ink) !important; }
.home-v2 .hero-n .facts2 b { display: block; font: 700 13px/1.25 var(--b-mono) !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--b-ink); }
.home-v2 .hero-n .facts2 span { display: block; font: 400 14px/1.35 var(--b-serif) !important; color: var(--b-ink-2) !important; opacity: 1 !important; margin-top: 4px !important; }
@media (max-width: 860px) { .home-v2 .hero-n .facts2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .home-v2 .hero-n .facts2 li:last-child { grid-column: 1 / -1; } }
/* desktop: the tile row runs under the figure across the whole hero, as on the old page, so titles sit on one or two lines */
@media (min-width: 1100px) { .home-v2 .hero-n .facts2 { width: calc(100% * 2.7 / 1.7 + clamp(32px, 5vw, 72px)); position: relative; z-index: 1; } }