/* composerID site shell: the engraved score.
   One warm ground (the desk), archival plates behind it, one white sheet that
   carries every word, Newsreader for reading and JetBrains Mono for every
   identifier. Five staff lines are the five channels a request can be filled
   through; a destination is a note on the line it serves. All colour flows
   through these tokens so dark mode needs no per-component rules.
   Docs pages (docs/, api/) keep their own Carbon shell and do not load this. */

:root {
  color-scheme: light;
  --ground: #E3E7E4;
  --paper: #FCFBF7;
  --ink: #151515;
  --ink-2: #3C3C3A;
  --ink-3: #6E6E6A;
  --hair: #9C9C96;
  --hair-2: #DEDDD6;
  --accent: #0f62fe;
  --plate-filter: grayscale(.85) sepia(.28) contrast(.92) brightness(1.04);
  --plate-blend: multiply;
  --plate-alpha: .29;
  --sheet-shadow: 0 1px 0 rgba(20,30,30,.05), 0 30px 60px -20px rgba(20,40,40,.22);
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  /* legacy aliases so untouched inline rules keep resolving */
  --bg: var(--paper); --white: var(--paper); --black: var(--ink);
  --gray-900: var(--ink); --gray-800: var(--ink); --gray-700: var(--ink-2);
  --gray-600: var(--ink-2); --gray-500: var(--ink-3); --gray-400: var(--hair);
  --gray-300: var(--hair); --gray-200: var(--hair-2); --gray-100: #F1F0EB;
  --green: #2f6b3a; --green-light: #e9f1ea; --amber: #8a5a12; --amber-light: #f4ecd9;
  --accent-light: #e8f0ff; --accent2: var(--accent); --accent2-light: var(--accent-light);
  --sans: var(--serif);
}
[data-theme="dark"] {
  color-scheme: dark;
  --ground: #14181A;
  --paper: #1A1A18;
  --ink: #EEEDE7;
  --ink-2: #C6C5BF;
  --ink-3: #8C8C87;
  --hair: #57574F;
  --hair-2: #2A2A27;
  --accent: #4589ff;
  --plate-filter: grayscale(1) invert(.92) contrast(.9);
  --plate-blend: screen;
  --plate-alpha: .14;
  --sheet-shadow: 0 1px 0 rgba(0,0,0,.4), 0 30px 60px -20px rgba(0,0,0,.6);
  --gray-100: #222220; --green: #7fbf8a; --green-light: #1f2a21; --amber: #d6a24a; --amber-light: #2b2418;
  --accent-light: #1b2a44;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 17px/1.55 var(--serif); -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
p { margin: 0; }
img { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1 em, h2 em { font-style: italic; }
code, pre, kbd, .mono { font-family: var(--mono); }
pre { font-size: 12.5px; line-height: 1.6; overflow-x: auto; padding: 14px 16px; border: 1px solid var(--hair-2); background: color-mix(in srgb, var(--paper) 96%, var(--ink)); }
code { font-size: .88em; }

/* ---- the desk and the plates ----
   Plates are real photographs only, hot-linked from Unsplash as
   https://images.unsplash.com/PHOTO?auto=format&fit=crop&w=900&q=60 (alt="",
   loading="lazy"). The approved set (institutional or public-domain scans):
     photo-1729335312170-b96ee0f6decd  NYPL, celestial spheres, 1660
     photo-1712696779652-dfca8766c5f8  Art Institute of Chicago, 1893 blueprint
     photo-1717699841859-e99321200e43  Rijksmuseum via Europeana, La Carmagnole manuscript
     photo-1721244654394-36a7bc2da288  Amsterdam City Archives, blueprint section
     photo-1725916631367-b4dd8f8ca53d  NYPL, Morse register, 1870
     photo-1723307061004-6e2e087deae1  NYPL, world map with celestial diagrams, 1700
     photo-1616529927764-173a543493ee  Christian Kapeller, Cosmic Call message print
     photo-1717699841903-57738407b8f2  Rijksmuseum via Europeana, Jenney the Pedler engraving
     photo-1725916631349-9c1a591ca814  NYPL, Model X technical drawing
     photo-1779293109155-2cda395601d1  Smithsonian, map sampler, 1790s
   Credit the institutions in the footer's .plates-credit line. */
.desk { position: relative; overflow: hidden; }
.plates { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.plate {
  position: absolute; display: block; height: auto;
  filter: var(--plate-filter); mix-blend-mode: var(--plate-blend); opacity: var(--plate-alpha);
  box-shadow: 0 8px 30px rgba(0,0,0,.12);
}
.pl-a { left: -90px;  top: 120px;  width: 380px; transform: rotate(-6deg); }
.pl-b { right: -110px; top: 60px;   width: 420px; transform: rotate(5deg); }
.pl-c { right: -80px;  top: 720px;  width: 360px; transform: rotate(-4deg); }
.pl-d { left: -120px;  top: 900px;  width: 400px; transform: rotate(7deg); }
.pl-e { right: -100px; top: 1500px; width: 380px; transform: rotate(3deg); }
.pl-f { left: -70px;   top: 1800px; width: 340px; transform: rotate(-5deg); }
@media (max-width: 1180px) { .plate { display: none; } }

/* ---- the sheet ---- */
.sheet {
  position: relative; z-index: 1; max-width: 1000px; margin: 0 auto;
  background: var(--paper); box-shadow: var(--sheet-shadow); padding: 0 64px 64px;
}
.sheet > .container, .sheet .container { max-width: none; padding: 0; margin: 0; }
@media (max-width: 760px) { .sheet { padding: 0 22px 40px; } }

/* exclusivity line above the sheet */
.xbanner {
  position: relative; z-index: 1; max-width: 1000px; margin: 0 auto;
  padding: 12px 64px 20px; font: 400 12px/1.6 var(--mono); color: var(--ink-3);
  text-align: center;
}
.xbanner em { font-style: italic; font-family: var(--serif); font-size: 14px; color: var(--ink); }
.xbanner b { font: 700 10px/1 var(--mono); letter-spacing: .05em; background: var(--ink); color: var(--paper); padding: 2px 4px 1px; margin-left: 1px; vertical-align: 2px; }
.xbanner a { color: var(--ink); }
.xb-dot, .xb-spacer { display: none; }
@media (max-width: 760px) { .xbanner { padding: 10px 22px 0; } }

/* ---- nav ---- */
nav.top {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  padding: 24px 0 16px; border-bottom: 1px solid var(--ink); font: 400 12.5px/1 var(--mono);
}
nav.top .nav-inner { display: contents; }
nav.top .nav-logo { text-decoration: none; }
.wm { display: inline-flex; align-items: baseline; gap: 2px; color: var(--ink); }
.wm em, .wm .wm-c { font: italic 500 21px/1 var(--serif); }
.wm b, .wm .wm-id { font: 700 11px/1 var(--mono); letter-spacing: .05em; background: var(--ink); color: var(--paper); padding: 3px 5px 2px; margin-left: 2px; vertical-align: 3px; transform: none; border-radius: 0; }
.wm .wm-mark { display: none; }
nav.top .nav-links { display: flex; gap: 20px; align-items: center; }
nav.top .nav-links a { text-decoration: none; color: var(--ink-2); }
nav.top .nav-links a:hover, nav.top .nav-links a[aria-current] { color: var(--ink); }
.theme-toggle {
  border: 0; background: none; color: var(--ink-3); font: 400 12px/1 var(--mono);
  cursor: pointer; padding: 6px 0 6px 18px; letter-spacing: .04em;
}
.theme-toggle:hover { color: var(--ink); }
.nav-toggle { display: none; border: 0; background: none; padding: 6px; cursor: pointer; }
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); margin: 4px 0; }
.nav-mobile { display: none; width: 100%; flex-direction: column; gap: 10px; padding: 14px 0 4px; border-top: 1px solid var(--hair-2); margin-top: 14px; }
.nav-mobile a { text-decoration: none; color: var(--ink-2); font: 400 13px/1 var(--mono); }
.nav-mobile.open { display: flex; }
@media (max-width: 720px) {
  nav.top .nav-links { display: none; }
  .nav-toggle { display: block; }
}

/* ---- type ---- */
.hero { padding: 52px 0 8px; }
h1 { font: 300 clamp(40px, 6vw, 72px)/1.0 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.022em; max-width: 15ch; }
h2, .s-title { font: 300 clamp(28px, 3.4vw, 40px)/1.08 var(--serif); font-variation-settings: "opsz" 44; letter-spacing: -.015em; max-width: 24ch; }
h3 { font: 500 19px/1.25 var(--serif); }
.lede, .s-sub, .hero > p, .hero .container > p {
  margin-top: 20px; font: 400 19px/1.45 var(--serif); color: var(--ink-2); max-width: 54ch;
}
.lede a, .s-sub a, .body a, .prose a, .car-link { color: var(--accent); text-decoration: none; }
.lede a:hover, .s-sub a:hover, .prose a:hover { text-decoration: underline; text-underline-offset: 3px; }
.eyebrow, .car-kicker, .hero-pill, .hp-tag {
  font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  background: none; border: 0; padding: 0; border-radius: 0;
}
.hero-pill { margin-bottom: 18px; display: block; }
.hp-tag { color: var(--ink); }
.meta { font: 400 12.5px/1.6 var(--mono); color: var(--ink-3); }

/* links that act as buttons: a mono word with a rule under it, never a pill */
.cta, .hero-actions, .cta-actions { display: flex; gap: 26px; margin-top: 26px; font: 500 13px/1 var(--mono); flex-wrap: wrap; }
.cta a, .btn-pill, .btn-pill-outline, .btn, .cta-actions a {
  text-decoration: none; color: var(--ink); border: 0; border-bottom: 1.5px solid var(--ink);
  padding: 0 0 5px; background: none; border-radius: 0; font: inherit; box-shadow: none; transform: none;
}
.cta a.sec, .cta-actions a.sec, .hero-actions a.sec, .btn-pill-outline { color: var(--ink-3); border-bottom-color: var(--hair); }
.btn-pill:hover, .cta a:hover { color: var(--accent); border-bottom-color: var(--accent); }

.stats, .hero-stats { display: flex; gap: 44px; flex-wrap: wrap; margin-top: 34px; font: 400 12.5px/1.5 var(--mono); color: var(--ink-3); }
.stats b, .hero-stats b, .stat-n { display: block; font: 400 30px/1 var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; margin-bottom: 5px; }

/* ---- movements: sections divided by an engraving rule, never cards ---- */
.rule {
  display: flex; align-items: center; gap: 14px; margin: 56px 0 0; color: var(--ink-3);
  font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.rule::before, .rule::after { content: ""; height: 1px; background: var(--hair-2); flex: 1; }
.movement, .section, .demo-section, .spine-section, .triage-section, .frame-showcase { padding-top: 34px; }
.divider { display: none; }
.movement > .lede, .section .s-sub { max-width: 58ch; font-size: 19px; margin-top: 14px; }
.body, .prose { margin-top: 16px; font: 400 16.5px/1.55 var(--serif); color: var(--ink-2); max-width: 62ch; }
.body p + p, .prose p + p { margin-top: 12px; }
.close { margin-top: 20px; font: 400 18px/1.5 var(--serif); color: var(--ink-2); max-width: 54ch; }

/* numbered or lettered steps set as prose with a rehearsal mark */
.bars { margin-top: 30px; display: grid; gap: 26px; max-width: 62ch; }
.bar { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; }
.mark, .t-card-num, .demo-step-num {
  font: 700 12px/1 var(--mono); border: 1.5px solid var(--ink); padding: 6px 8px 5px; color: var(--ink);
  white-space: nowrap; margin-top: 3px; background: none; border-radius: 0; width: auto; height: auto;
}
.bar h3 { margin: 0 0 6px; }
.bar p { color: var(--ink-2); font-size: 16.5px; line-height: 1.5; }

/* the old three-card grid becomes a lettered list */
.three-grid, .t-grid, .cards { display: grid; gap: 26px; margin-top: 30px; max-width: 62ch; }
.t-card, .tq-card, .route-card, .df-card, .fin-card, .obj-card, .post-card {
  background: none; border: 0; border-top: 1px solid var(--hair-2); border-radius: 0; box-shadow: none; padding: 18px 0 0;
}
.t-card h3, .post-card h3 { font: 500 19px/1.25 var(--serif); margin: 8px 0 6px; }
.t-card p, .post-card p { color: var(--ink-2); font-size: 16px; line-height: 1.5; }

/* ---- diagrams: landscape + portrait pair ---- */
.dgm { overflow-x: auto; margin: 38px 0 8px; }
.dgm svg { display: block; width: 100%; height: auto; }
.dgm-wide svg { min-width: 720px; }
.dgm-tall { display: none; }
.dgm-tall svg { min-width: 0; }
@media (max-width: 860px) { .dgm-wide { display: none; } .dgm-tall { display: block; } }
.caption, .dia-caption { margin-top: 12px; font: 400 13px/1.55 var(--mono); color: var(--ink-3); max-width: 76ch; text-align: left; font-style: normal; }

/* Five worked channel examples under step C (homepage, generated region) */
.chx { margin-top: 10px; }
.chx-row { display: flex; align-items: center; gap: 30px; padding: 18px 0; border-top: 1px solid var(--hair); flex-wrap: wrap; }
.chx-row:last-child { border-bottom: 1px solid var(--hair); }
.chx-stave { flex: 0 0 210px; height: auto; }
.chx-row p { flex: 1 1 300px; margin: 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); max-width: 62ch; }
.chx-lab { font: 500 11px var(--mono); fill: var(--ink-3); letter-spacing: 0.05em; }
.chx-solid { stroke: var(--ink); stroke-width: 1.8; }
.chx-dot { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 1 6; stroke-linecap: round; opacity: 0.7; }
.chx-note { fill: var(--ink); }
.chx-note-open { fill: var(--paper); stroke: var(--ink); stroke-width: 1.3; }
.chx-logo { width: 16px; height: 16px; border-radius: 3px; vertical-align: -3px; margin: 0 3px; }
.chx-cap { margin: 0 0 4px; font: 400 12px/1.6 var(--mono); color: var(--ink-3); }
.s2p-logo { display: inline-block; vertical-align: -6px; margin-left: 7px; }
.s2p-logo:first-of-type { margin-left: 4px; }
.s2p-logo img { display: block; width: 22px; height: 22px; border-radius: 5px; }

/* score grammar (used by tools/score_svg.py output) */
.stf { stroke: var(--hair); stroke-width: .9; }
.n-fill { fill: var(--ink); }
.n-open { fill: var(--paper); stroke: var(--ink); stroke-width: 1.3; }
.n-stem { stroke: var(--ink); stroke-width: 1.2; }
.clef { fill: var(--ink); font-family: var(--serif); letter-spacing: .04em; }
.sys { fill: var(--ink-2); font-family: var(--mono); }
.badge { fill: var(--ink); }
.badge-t { fill: var(--paper); font-family: var(--mono); font-weight: 500; }
/* legacy dg-* diagram classes on pages not yet redrawn */
.dgm .dg-node { fill: var(--paper); stroke: var(--hair); stroke-width: 1; filter: none; }
.dgm .dg-node-t { fill: var(--ink); font: 500 13px var(--serif); }
.dgm .dg-node-s { fill: var(--ink-3); font: 400 10.5px var(--mono); }
.dgm .dg-lab { fill: var(--ink-3); font: 500 9.5px var(--mono); letter-spacing: .14em; }
.dgm .dg-wire { stroke: var(--hair); stroke-width: 1.2; fill: none; }
.dgm .dg-flow { stroke: var(--ink); stroke-width: 1.2; fill: none; stroke-dasharray: none; animation: none; }
.dgm .dg-dot { fill: var(--ink); }
.dgm .dg-badge-t { fill: var(--paper); font: 500 10.5px var(--mono); }
.dgm .dg-chip { fill: var(--paper); stroke: var(--ink); stroke-width: 1; }
.dgm .dg-chip-t { fill: var(--ink); font: 500 12px var(--serif); }
.dgm .dg-back { fill: none; stroke: var(--ink-3); stroke-width: 1.1; stroke-dasharray: 4 5; animation: none; }
.dgm .dg-back-t { fill: var(--ink-3); font: italic 400 10.5px var(--serif); }

/* ---- the logo band: every platform's mark in greyscale, drifting slowly.
   The one animation on the site (Jamie kept it); each row is doubled so the
   -50% translate loops without a seam. ---- */
.car-wrap {
  overflow: hidden; margin-top: 34px; display: flex; flex-direction: column; gap: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.car-row { display: flex; gap: 34px; width: max-content; align-items: center; animation: carA 120s linear infinite; }
.car-row.rev { animation-name: carB; animation-duration: 150s; }
@keyframes carA { to { transform: translateX(-50%); } }
@keyframes carB { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.car-tile { flex: 0 0 auto; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: none; border: 0; border-radius: 0; box-shadow: none; }
.car-tile img { width: 26px; height: 26px; object-fit: contain; border-radius: 0; filter: grayscale(1) contrast(1.05); opacity: .72; }
[data-theme="dark"] .car-tile img { filter: grayscale(1) invert(1) contrast(1.1); opacity: .55; }

/* ---- small components ---- */
.cov-badge, .tag, .ir-badge, .sp-badge, .df-tag {
  display: inline-block; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--hair); color: var(--ink-2); padding: 4px 6px 3px; border-radius: 0; background: none; vertical-align: middle;
}
.cov-green { border-color: var(--ink); color: var(--ink); }
.cov-amber, .cov-blue, .cov-gray { border-color: var(--hair); color: var(--ink-3); }
.jg { border-bottom: 1px dotted var(--ink-3); cursor: help; text-decoration: none; color: inherit; }
#jg-tip {
  position: fixed; z-index: 300; max-width: 288px; padding: 10px 13px; border-radius: 0;
  background: var(--ink); color: var(--paper); font: 400 12.5px/1.5 var(--serif);
  box-shadow: 0 10px 34px rgba(0,0,0,.22); opacity: 0; visibility: hidden;
  transform: translateY(3px); transition: opacity .13s, transform .13s, visibility .13s;
}
#jg-tip.on { opacity: 1; visibility: visible; transform: translateY(0); }
#jg-tip b { font-weight: 700; display: block; margin-bottom: 3px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; }
.brand-agent { font-weight: inherit; color: inherit; }
/* status and type labels carried over from the old shell's coloured chips */
.ir-status, .ir-status-draft, .ir-status-planned, .ir-status-publishing, .ir-status-published, .ir-status-synced,
.tq-tag-noint, .tq-tag-noscore, .tq-tag-type, .sp-ctx-triage, .sp-ctx-vms, .sp-ctx-fin, .sp-ctx-ext, .sp-ctx-events {
  display: inline-block; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--hair); color: var(--ink-2); padding: 4px 6px 3px; background: none; border-radius: 0;
}
.ir-status-published, .ir-status-synced { border-color: var(--ink); color: var(--ink); }
.tq-tag-noint, .tq-tag-noscore { color: var(--ink-3); }
.tq-detail-val { font-family: var(--mono); color: var(--ink-2); text-align: right; }
.legal .link, .post .link { color: var(--accent); text-decoration: none; }
.post pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.mono-inline { font-family: var(--mono); font-size: .9em; }

/* tables */
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th { text-align: left; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 0 12px 10px 0; border-bottom: 1px solid var(--ink); }
td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair-2); vertical-align: top; color: var(--ink-2); }
td:first-child { color: var(--ink); }
.table-wrap, .tableWrap { overflow-x: auto; }

/* prose bodies: blog posts and legal text */
.post, .legal { max-width: 66ch; margin-top: 30px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.post h2, .legal h2 { font: 400 26px/1.2 var(--serif); letter-spacing: -.01em; color: var(--ink); margin: 38px 0 12px; max-width: none; }
.post h3, .legal h3 { margin: 26px 0 8px; color: var(--ink); }
.post p, .legal p, .legal li { margin: 0 0 14px; }
.post pre { margin: 14px 0 18px; }
.post-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; font: 400 12px/1.6 var(--mono); color: var(--ink-3); }
/* the quiet "written with Claude" mark (main, #76): a small line icon and mono text, no chip */
.tag-ai { display: inline-flex; align-items: center; gap: 5px; font: 400 12px/1 var(--mono); letter-spacing: .04em; color: var(--ink-3); border: 0; padding: 0; text-transform: none; }
.tag-ai svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.post-note { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--hair-2); font-size: 14.5px; color: var(--ink-3); }
.post-nav { display: flex; justify-content: space-between; gap: 24px; margin-top: 28px; font: 400 13px/1.5 var(--mono); }
.post-nav a { color: var(--ink-2); text-decoration: none; max-width: 46%; }
.post-list { margin-top: 12px; }
.post-card .meta, .post-card .post-date { font: 400 12px/1.6 var(--mono); color: var(--ink-3); }
.post-card a { text-decoration: none; color: inherit; }
.legal-nav { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px; font: 400 12px/1.6 var(--mono); }
.legal-nav a { color: var(--ink-3); text-decoration: none; }
.legal-nav a.on { color: var(--ink); border-bottom: 1.5px solid var(--ink); }
.notice { border-left: 2px solid var(--ink); padding: 4px 0 4px 16px; margin: 18px 0; }

/* ---- footer ---- */
footer {
  position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; padding: 34px 64px 60px;
  font: 400 12px/1.9 var(--mono); color: var(--ink-3); background: none; border: 0;
}
footer .footer-grid { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer .footer-col { display: flex; flex-direction: column; }
footer .footer-col h5 { margin: 0 0 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
footer a { color: var(--ink-3); text-decoration: none; }
footer a:hover { color: var(--ink); }
footer .footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--hair-2); }
footer .plates-credit { margin-top: 10px; font-size: 11px; }
@media (max-width: 760px) { footer { padding: 24px 22px 50px; } }

/* ---- cta section (the closing line) ---- */
.cta-section { padding-top: 40px; }
.cta-section h2 { font-size: clamp(26px, 3vw, 34px); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }