:root {
  color-scheme: light;
  --paper: #fafaf8;
  --surface: #ffffff;
  --ink: #252824;
  --muted: #697069;
  --rule: #e0e4de;
  --link: #a34400;
  --orange: #bc4f00;
  --orange-display: #de6400;
  --orange-bright: #ff8b2b;
  --theme-frame-fill: #fff9f5;
  --theme-frame-line: #efa77e;
  --theme-frame-peak: #ee8f5e;
  --theme-hover: #ffa04d;
  --theme-dot: #dce1d9;
  --theme-icon: #f3f5f0;
  --theme-quality: #ebf4ed;
  --theme-review: #f7faf5;
  --theme-flow: #ee7b20;
  --theme-secondary: #738f7c;
  --theme-icon-filter: none;
  --node-radius: 2px;
  --frame-radius: 6px;
  --button-radius: 4px;
  --icon-radius: 4px;
  --tip-radius: 4px;
  --node-shadow: 0 2px 0 #2528240d;
  --button-shadow: 0 3px 0 #a3440033;
  --button-hover-shadow: 0 5px 12px #a3440024;
  font-family: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  letter-spacing: 0;
}

:root[data-theme="cotton"] {
  --paper: #fff7fb; --surface: #fffdfd; --ink: #382a3d; --muted: #726173; --rule: #e8d6e3;
  --link: #993665; --orange: #a63871; --orange-display: #c34588; --orange-bright: #f4accb;
  --theme-frame-fill: #fff0f7; --theme-frame-line: #d798c1; --theme-frame-peak: #cc68a1;
  --theme-hover: #f8c4dc; --theme-dot: #decfe7; --theme-icon: #eee5f7; --theme-quality: #dcf2e9;
  --theme-review: #effaf4; --theme-flow: #d372a4; --theme-secondary: #618f82;
  --theme-icon-filter: hue-rotate(295deg) saturate(.65);
  --node-radius: 8px;
  --frame-radius: 32px;
  --button-radius: 999px;
  --icon-radius: 50%;
  --tip-radius: 16px;
  --node-shadow: 0 5px 16px #ba79a41a, inset 0 2px 0 #ffffff;
  --button-shadow: 0 6px 20px #c3458829, inset 0 2px 0 #ffffff99;
  --button-hover-shadow: 0 10px 28px #c3458833, inset 0 2px 0 #ffffffbb;
}
:root[data-theme="pop"] {
  --paper: #fff8f4; --surface: #ffffff; --ink: #352a32; --muted: #72616b; --rule: #edcfd6;
  --link: #a12d54; --orange: #ae315b; --orange-display: #ce3569; --orange-bright: #ff8db2;
  --theme-frame-fill: #fff0f2; --theme-frame-line: #f194ae; --theme-frame-peak: #e75d8c;
  --theme-hover: #ffadc8; --theme-dot: #e6d5c8; --theme-icon: #fff0d4; --theme-quality: #daf2ee;
  --theme-review: #effaf7; --theme-flow: #e55c8a; --theme-secondary: #478f86;
  --theme-icon-filter: hue-rotate(315deg) saturate(.8);
  --node-radius: 8px 2px 8px 2px;
  --frame-radius: 28px 6px 28px 6px;
  --button-radius: 24px 6px 24px 6px;
  --icon-radius: 8px 2px 8px 2px;
  --tip-radius: 12px 3px 12px 3px;
  --node-shadow: 3px 3px 0 #a12d5429, inset 0 0 0 1px #a12d541a;
  --button-shadow: 4px 4px 0 #a12d54;
  --button-hover-shadow: 5px 5px 0 #a12d54;
}

:root[data-theme="pharma"] {
  --paper: #fafbfc; --surface: #ffffff; --ink: #25292e; --muted: #616971; --rule: #d9dee3;
  --link: #414b55; --orange: #414b55; --orange-display: #566574; --orange-bright: #e0e5e9;
  --theme-frame-fill: #ffffff; --theme-frame-line: #bdc6ce; --theme-frame-peak: #8796a3;
  --theme-hover: #d0d8df; --theme-dot: #dce1e6; --theme-icon: #f0f2f4; --theme-quality: #e9edf1;
  --theme-review: #f3f5f7; --theme-flow: #737f8b; --theme-secondary: #8295a6;
  --theme-icon-filter: grayscale(1);
  --node-radius: 4px; --frame-radius: 8px; --button-radius: 4px; --icon-radius: 4px; --tip-radius: 4px;
  --node-shadow: 0 2px 5px #25292e08; --button-shadow: 0 2px 4px #25292e14;
  --button-hover-shadow: 0 5px 14px #414b5524;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; object-fit: contain; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 6px; }
p { margin: 0; }
.wrap { width: min(1240px, calc(100% - 96px)); margin-inline: auto; }
.skip-link { position: absolute; z-index: 5; left: 24px; top: -80px; padding: 12px; background: var(--surface); }
.skip-link:focus { top: 12px; }
.site-header { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--rule); }
.site-header > span { color: var(--muted); font-size: 11px; text-transform: uppercase; }
.brand-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.brand { display: inline-flex; align-items: center; gap: 8px; height: 48px; flex-shrink: 0; }
.capra-mark { display: block; flex-shrink: 0; color: var(--link); background: var(--orange-bright); border-radius: var(--icon-radius); padding: 3px; }
.brand-wordmark { color: var(--ink); font-size: 20px; font-weight: 700; line-height: 1; }
.brand-wordmark > span { color: var(--orange-display); }
.hero { text-align: center; padding-block: 32px 22px; }
.hero-wordmark { display: flex; align-items: center; justify-content: center; gap: 12px; }
.hero-goat { position: relative; width: 150px; height: 132px; flex: 0 0 150px; cursor: grab; }
.hero-goat:active { cursor: grabbing; }
.hero-goat:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
.hero-goat canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.hero-goat > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-goat[data-render="ready"] > img { display: none; }
.hero-goat[data-render="fallback"] > canvas { display: none; }
.framework-label { margin-bottom: 12px; color: var(--orange); font-size: 11px; font-weight: 600; text-transform: uppercase; }
h1 { margin: 0; font-weight: 650; font-size: 82px; line-height: 1.1; }
h1 > span { display: inline-block; color: var(--orange-display); transform-origin: 50% 85%; }
.hero-x { position: relative; }
.hero-x:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; border-radius: 4px; }
.x-rotor { display: block; pointer-events: none; transform-origin: center; }
.x-molecule { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: var(--orange-display); }
.x-molecule line { stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
.x-molecule circle { fill: var(--surface); stroke: currentColor; stroke-width: 3; }
.x-molecule circle:nth-of-type(3n) { fill: #f1d787; }
.x-dna .dna-strand { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.x-dna .dna-secondary, .x-dna line:nth-child(even) { stroke: var(--theme-secondary); }
.x-candy-burst { position: fixed; z-index: 20; width: 0; height: 0; pointer-events: none; }
.candy-piece { position: absolute; left: -4px; top: -7px; width: 8px; height: 14px; border-radius: 3px 1px; background: #ef6c9d; box-shadow: inset 1px 1px 0 #ffffffaa, 1px 2px 0 #a12d5430; }
.candy-piece:nth-child(3n + 2) { background: #efbf58; border-radius: 1px 5px; }
.candy-piece:nth-child(3n) { background: #72bcb0; border-radius: 5px; }
.x-bubble { position: fixed; z-index: 20; display: grid; place-items: center; pointer-events: none; border: 1px solid #d798c1; border-radius: 50%; color: var(--orange-display); background: radial-gradient(circle at 30% 25%, #ffffffee 0 7%, #fff5fb88 18%, #f4accb66 55%, #c7b4e480 85%, #b8dfceaa); box-shadow: inset 0 0 12px #ffffffcc, 0 5px 16px #ba79a430; font-weight: 650; line-height: 1; }
.impact { margin-top: 16px; font-size: clamp(13px, calc(0.715vw + 11px), 21px); line-height: 1.5; color: var(--muted); white-space: nowrap; }
.impact span { color: var(--orange); font-weight: 600; }
.domain-copy { max-width: 650px; margin: 14px auto 0; color: var(--muted); font-size: 12px; line-height: 1.65; text-wrap: balance; }
.domain-copy span { display: block; }
.domain-copy span:first-child { color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.access-strip { max-width: 650px; margin: 24px auto 0; }
.access-strip ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 16px 0; border-block: 1px solid var(--rule); }
.access-strip li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; min-height: 50px; padding-inline: 10px; }
.access-strip li + li { border-left: 1px solid var(--rule); }
.access-strip li span { font-size: 12px; font-weight: 600; line-height: 1.4; }
.access-strip img { width: 24px; height: 24px; }
.access-strip li:hover, .access-strip li:focus-visible, .access-strip li.is-tip { z-index: 5; }
.access-strip li:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.access-strip li:hover .tip, .access-strip li:focus-visible .tip, .access-strip li.is-tip .tip { display: block; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 15px 22px; min-height: 54px; border: 1px solid var(--orange-bright); background: var(--orange-bright); color: var(--ink); font-size: 14px; font-weight: 600; border-radius: 6px; transition: background 180ms ease, box-shadow 180ms ease; }
.button:hover { background: #ffa04d; border-color: #ffa04d; box-shadow: 0 4px 16px #ff8b2b24; }
.button .icon { filter: brightness(0); opacity: .85; }
.hero-cta { display: flex; width: min(280px, 100%); min-height: 64px; margin: 18px auto 0; padding: 14px 28px; font-size: 22px; font-weight: 650; gap: 20px; }
.hero-cta .icon { width: 28px; height: 28px; }
.icon { width: 24px; height: 24px; flex-shrink: 0; }
.research-pipeline { margin: 0; padding-bottom: 32px; }
.graph { --cols: 3; --pad: 24px; --node-gap: 24px; --card-max: 240px; --lane: 56px; --cycle: 10s; --frame-fill: #fff9f5; --frame-line: #efa77e; position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(150px, 0.2fr) minmax(0, 1fr); grid-template-rows: auto 70px; column-gap: 48px; row-gap: 28px; padding: 30px 12px 18px; background-image: radial-gradient(#dce1d9 0.7px, transparent 0.7px); background-size: 18px 18px; }
.graph-edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: -1; }
.graph-edges g path { fill: none; stroke: #b9c4b8; stroke-width: 1.6; }
.graph-edges .flow-edge { stroke: #ee7b20; stroke-width: 2; }
.graph-edges .feedback-edge { stroke: #9aab99; stroke-dasharray: 4 5; }
.graph-edges .review-edge { stroke: #738f7c; }
.graph-edges g path.is-related { stroke: var(--orange-display); stroke-width: 2.6; }
.graph-node { position: relative; min-width: 0; z-index: 1; background: var(--surface); border: 1px solid #dce2d9; border-radius: 8px; box-shadow: 0 3px 4px #26342105, 0 8px 22px #26342106; transition: border-color 160ms ease, box-shadow 160ms ease; }
.graph-node:hover, .graph-node:focus-visible { border-color: #f49a51; box-shadow: 0 5px 22px #ff8b2b12; }
.graph-node:hover, .graph-node:focus-visible, .graph-node.is-tip { z-index: 5; }
.graph-node:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.graph-node::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; }
.tip { display: none; position: absolute; z-index: 6; left: 50%; top: calc(100% + 10px); width: max-content; max-width: min(230px, 80vw); padding: 8px 11px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 400; line-height: 1.5; text-align: left; box-shadow: 0 10px 28px #25282430; pointer-events: none; transform: translateX(calc(-50% + var(--tip-shift, 0px))); }
.graph-node:hover .tip, .graph-node:focus-visible .tip, .graph-node.is-tip .tip { display: block; }
.tips-off .graph-node .tip, .tips-off .access-strip li .tip { display: none; }
.tip-above .tip { top: auto; bottom: calc(100% + 10px); }
.graph-node strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.4; }
.graph-node span { display: block; margin-top: 5px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.source-stack { grid-column: 1; grid-row: 1; align-self: center; display: grid; gap: 12px; }
.source { min-height: 54px; display: flex; align-items: center; gap: 10px; padding: 12px; }
.source strong { font-size: 12px; }
.source .icon { width: 20px; height: 20px; }
.framework { position: relative; grid-column: 2; grid-row: 1; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, var(--card-max))); justify-content: space-between; column-gap: var(--node-gap); align-content: start; padding: 16px var(--pad) 24px; }
.framework::before { content: ""; position: absolute; inset: 0; z-index: -2; border: 1.5px solid var(--frame-line); border-radius: 14px; background: var(--frame-fill); }
.framework-title { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.framework-title .capra-mark { width: 24px; height: 24px; padding: 2px; }
.framework-title strong { font-size: 16px; font-weight: 650; line-height: 1.4; }
.framework-title span { color: var(--orange-display); }
.process { grid-row: 2; min-height: 128px; padding: 16px; }
.process .icon { width: 34px; height: 34px; padding: 6px; margin-bottom: 10px; border-radius: 6px; background: #f3f5f0; }
.quality .icon { background: #ebf4ed; }
.explore { grid-column: 1; }
.prepare { grid-column: 2; }
.workflow { grid-column: 3; }
.analysis, .quality, .draft { grid-row: 3; margin-top: var(--lane); }
.analysis { grid-column: 3; }
.quality { grid-column: 2; }
.draft { grid-column: 1; }
.review { grid-column: 2; grid-row: 2; justify-self: start; width: min(var(--card-max), calc((100% - 2 * var(--pad) - (var(--cols) - 1) * var(--node-gap)) / var(--cols))); margin-left: var(--pad); display: flex; align-items: center; gap: 10px; padding: 12px; border-style: dashed; box-shadow: none; background: #f7faf5; }
.review strong { font-size: 12px; }
.review span { font-size: 10px; }
.feedback-label { position: absolute; z-index: 1; left: 0; top: 0; transform: translate(-50%, -50%); visibility: hidden; pointer-events: none; padding: 4px 10px; background: var(--frame-fill); color: var(--muted); font-size: 11px; white-space: nowrap; }
.feedback-label.is-placed { visibility: visible; }
.packet { display: none; position: absolute; z-index: 1; left: 0; top: 0; width: 8px; height: 8px; border-radius: 50%; background: #ff7838; box-shadow: 0 0 0 3px #ff783833, 0 0 12px #ff7838b3; opacity: 0; pointer-events: none; offset-rotate: 0deg; }
.packet.feedback-edge { background: #6f9a7f; box-shadow: 0 0 0 3px #6f9a7f33, 0 0 12px #6f9a7f99; }
.contact { margin-top: 12px; border-top: 1px solid var(--rule); background: #f1f3ee; }
.contact-inner { max-width: 760px; display: grid; gap: 20px; padding-block: 32px 40px; }
.contact-heading { display: flex; align-items: center; }
.contact-heading h2 { margin: 0; font-size: 13px; font-weight: 600; text-transform: uppercase; color: var(--muted); }
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.founder { min-width: 0; display: flex; align-items: center; min-height: 122px; padding: 24px 28px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; }
.founder h3 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.35; }
.founder h3 span { display: block; font-size: 16px; font-weight: 400; color: var(--muted); margin-bottom: 3px; }

.graph { --frame-fill: var(--theme-frame-fill); --frame-line: var(--theme-frame-line); background-image: radial-gradient(var(--theme-dot) .7px, transparent .7px); }
.graph-node { border-color: var(--rule); border-radius: var(--node-radius); box-shadow: var(--node-shadow); }
.framework::before { border-radius: var(--frame-radius); }
.button { border-radius: var(--button-radius); box-shadow: var(--button-shadow); }
.button:hover { box-shadow: var(--button-hover-shadow); }
.tip { border-radius: var(--tip-radius); }
.graph-edges .flow-edge { stroke: var(--theme-flow); }
.graph-edges .feedback-edge, .graph-edges .review-edge { stroke: var(--theme-secondary); }
.graph-edges g path.is-related { stroke: var(--orange-display); }
.process .icon { background: var(--theme-icon); border-radius: var(--icon-radius); }
.quality .icon { background: var(--theme-quality); }
.review { background: var(--theme-review); }
.access-strip img { filter: var(--theme-icon-filter); }
.button:hover { background: var(--theme-hover); border-color: var(--theme-hover); }
.graph-node:hover, .graph-node:focus-visible { border-color: var(--theme-frame-peak); box-shadow: var(--node-shadow); }
.review { border-radius: var(--node-radius); }
:root[data-theme="orange"] .graph { background-image: linear-gradient(#dce1d950 1px, transparent 1px), linear-gradient(90deg, #dce1d950 1px, transparent 1px); background-size: 24px 24px; }
:root[data-theme="cotton"] .graph { background-size: 24px 24px; }
:root[data-theme="cotton"] .framework::before { background: linear-gradient(135deg, #f4edfa, var(--frame-fill) 55%, #eef8f2); }
:root[data-theme="cotton"] .explore, :root[data-theme="cotton"] .workflow { background: #fbf7ff; }
:root[data-theme="cotton"] .quality { background: #f4fcf8; }
:root[data-theme="pop"] .graph { background-image: repeating-linear-gradient(135deg, transparent 0 11px, #edcfd630 11px 12px); background-size: 24px 24px; }
:root[data-theme="pop"] .framework::before { border-style: dashed; }
:root[data-theme="pop"] .prepare, :root[data-theme="pop"] .draft { background: #fff8e9; }
:root[data-theme="pop"] .quality { background: #eefaf7; }
:root[data-theme="pop"] .hero-cta { border-color: var(--link); }
:root[data-theme="pop"] .process .icon { box-shadow: 2px 2px 0 #a12d5420; }
.packet { background: var(--orange-bright); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange-bright) 20%, transparent), 0 0 12px color-mix(in srgb, var(--orange-bright) 70%, transparent); }
.packet.feedback-edge { background: var(--theme-secondary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-secondary) 20%, transparent); }
.appearance-controls { display: flex; justify-content: center; align-items: center; gap: 12px; border-top: 1px solid var(--rule); }
.style-picker { display: flex; justify-content: center; align-items: center; gap: 18px; min-height: 36px; margin: 0; padding: 4px 8px; border: 0; }
.logo-picker { border-left: 1px solid var(--rule); gap: 12px; }
.logo-sample { width: 24px; height: 24px; flex-shrink: 0; color: var(--link); }
@media (max-width: 900px) {
  .appearance-controls { flex-direction: column; gap: 0; }
  .logo-picker { border-left: 0; border-top: 1px solid var(--rule); width: 100%; }
}
.style-picker label { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font-size: 11px; cursor: pointer; white-space: nowrap; }
.style-picker input { margin: 0; accent-color: var(--link); }
.style-picker label:has(:checked) { font-weight: 700; color: var(--link); }
.style-picker input:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.style-swatch { width: 16px; height: 16px; flex: 0 0 16px; border: 1px solid #00000020; border-radius: 50%; }
.swatch-orange { background: linear-gradient(135deg, #ff8b2b 50%, #fff9f5 50%); }
.swatch-cotton { background: conic-gradient(#f4accb 0 33%, #c7b4e4 33% 66%, #b8dfce 66%); }
.swatch-pop { background: conic-gradient(#ff8db2 0 33%, #ffda90 33% 66%, #a6dbd3 66%); }
.swatch-pharma { background: linear-gradient(135deg, #8796a3 50%, #ffffff 50%); }
:root[data-theme="pharma"] .graph { background-image: linear-gradient(#dce1e650 1px, transparent 1px), linear-gradient(90deg, #dce1e650 1px, transparent 1px); background-size: 32px 32px; }
:root[data-theme="pharma"] .graph-node .icon { filter: grayscale(1); }
:root[data-theme="pharma"] .contact { background: #f4f5f6; }
:root[data-theme="pharma"] .review { border-style: solid; }
:root[data-theme="pharma"] .framework::before { animation-duration: 10s; }

@media (max-width: 560px) {
  .style-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: start; gap: 4px 12px; padding: 8px 24px; }
  .logo-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: 12px; }
}

@media (max-width: 400px) {
  .style-picker { gap: 10px; }
  .style-picker label { gap: 4px; font-size: 10px; }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .wrap { width: calc(100% - 48px); }
  .graph { --pad: 20px; --node-gap: 20px; column-gap: 32px; }
  .process { padding: 12px; }
}

@media (min-width: 901px) {
  body { min-height: 100svh; display: flex; flex-direction: column; }
  main.wrap { flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
  .site-header { min-height: 48px; }
  .site-header > .brand { height: 38px; }
  .site-header .capra-mark { width: 30px; height: 30px; }
  .hero { padding-block: 8px 6px; }
  .hero h1 { font-size: 64px; }
  .impact { margin-top: 8px; font-size: 18px; }
  .domain-copy { margin-top: 8px; line-height: 1.4; }
  .domain-copy span { display: inline; }
  .domain-copy span:first-child { margin-right: 8px; font-weight: 400; }
  .access-strip { max-width: 720px; margin-top: 8px; }
  .access-strip ul { padding-block: 8px; }
  .access-strip li { flex-direction: row; min-height: 24px; gap: 10px; }
  .hero-cta { margin-top: 0; margin-bottom: 8px; }
  .research-pipeline { padding-bottom: 8px; }
  .graph { --lane: 40px; grid-template-rows: auto 48px; row-gap: 16px; padding-block: 8px; }
  .source-stack { gap: 8px; }
  .source { min-height: 44px; padding-block: 8px; }
  .framework { padding-block: 12px; }
  .framework-title { margin-bottom: 8px; }
  .process { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; min-height: 80px; padding: 12px; }
  .process .icon { grid-row: 1 / span 2; margin: 0; }
  .process strong { align-self: end; font-size: 15px; }
  .process span { align-self: start; margin-top: 4px; font-size: 11px; }
  .review { padding-block: 6px; }
  .contact { margin-top: 0; background: transparent; }
  .contact-inner { max-width: 940px; grid-template-columns: auto 1fr; align-items: center; padding-block: 8px; }
  .founder { min-height: 32px; padding: 4px 16px; background: transparent; border: 0; border-radius: 0; }
  .founder + .founder { border-left: 1px solid var(--rule); }
  .founder h3 { font-size: 16px; }
  .founder h3 span { display: inline; font-size: inherit; margin: 0; }
}

@media (min-width: 901px) and (max-height: 849px) {
  .hero { padding-block: 2px; }
  .framework-label { margin-bottom: 8px; }
  .access-strip { margin-top: 4px; }
  .process { min-height: 72px; padding-block: 8px; }
  .contact-inner { padding-block: 4px; }
  .style-picker { min-height: 32px; padding-block: 0; }
  .framework { padding-block: 8px; }
  .graph { row-gap: 12px; }
  .research-pipeline { padding-bottom: 6px; }
}

@media (min-width: 901px) and (min-height: 850px) {
  .hero-goat { width: 170px; height: 148px; flex-basis: 170px; }
  .hero { padding-block: 8px; }
  .hero h1 { font-size: 76px; }
  .impact { margin-top: 8px; font-size: 21px; }
  .domain-copy { margin-top: 8px; }
  .access-strip { margin-top: 8px; }
  .hero-cta { margin-top: 4px; }
  .graph { --lane: 48px; row-gap: 20px; }
  .framework { padding-block: 16px; }
  .framework-title { margin-bottom: 12px; }
  .process { display: block; min-height: 112px; padding: 14px 16px; }
  .process .icon { margin-bottom: 8px; }
  .contact-inner { padding-block: 12px; }
}

@media (min-width: 901px) and (min-height: 1000px) {
  .hero h1 { font-size: 82px; }
  .graph { --lane: 56px; }
  .process { min-height: 128px; padding: 16px; }
  .source { min-height: 54px; }
  .source-stack { gap: 12px; }
}

@media (max-width: 900px) {
  .wrap { width: calc(100% - 48px); }
  .graph { --cols: 1; --gutter: 36px; --pad: 16px; max-width: 600px; margin-inline: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: 32px; padding: 20px 20px 24px; }
  .source-stack { grid-column: 1; grid-row: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
  .framework { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0, 1fr); padding: 16px var(--gutter) 20px; }
  .process { grid-column: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; min-height: 0; margin-top: 26px; padding: 12px 14px; }
  .process .icon { grid-row: 1 / span 2; margin: 0; }
  .process strong { align-self: end; }
  .process span { margin-top: 2px; align-self: start; }
  .explore { grid-row: 2; margin-top: 0; }
  .prepare { grid-row: 3; }
  .workflow { grid-row: 4; }
  .analysis { grid-row: 5; }
  .quality { grid-row: 6; }
  .draft { grid-row: 7; }
  .review { grid-column: 1; grid-row: 3; justify-self: center; width: calc(100% - 2 * var(--gutter)); margin-left: 0; min-height: 64px; }
  .feedback-label { transform: translate(-50%, -50%) rotate(-90deg); padding-inline: 8px; font-size: 10px; }
}

@media (max-width: 560px) {
  .wrap { width: calc(100% - 32px); }
  .hero-wordmark { flex-direction: column; gap: 8px; }
  .hero-goat { width: 200px; height: 180px; flex: 0 0 180px; }
  .site-header { min-height: 64px; gap: 16px; }
  .site-header > .brand { height: 36px; gap: 6px; }
  .site-header .capra-mark { width: 28px; height: 28px; }
  .brand-wordmark { font-size: 18px; }
  .site-header > span { max-width: 128px; text-align: right; font-size: 9px; line-height: 1.6; }
  .hero { padding-block: 24px 20px; }
  h1 { font-size: 58px; }
  .impact { margin: 12px auto 0; }
  .access-strip { margin-top: 20px; }
  .access-strip ul { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; padding-block: 16px; }
  .access-strip li { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 32px; padding-inline: 12px; }
  .access-strip li:nth-child(odd) { border-left: 0; }
  .access-strip li span { font-size: 11px; }
  .access-strip img { width: 20px; height: 20px; flex-shrink: 0; }
  .graph { --pad: 12px; row-gap: 28px; padding-inline: 14px; }
  .source { padding: 10px 8px; gap: 7px; }
  .source strong { font-size: 11px; }
  .source .icon { width: 18px; height: 18px; }
  .process { padding: 12px; }
  .process strong { font-size: 13px; }
  .process span { font-size: 10px; }
  .review { padding: 12px; }
  .framework-label { font-size: 10px; }
  .contact-inner { gap: 16px; padding-block: 24px; }
  .founders { gap: 12px; }
  .founder { min-height: 104px; padding: 18px 14px; }
  .founder h3 { font-size: 19px; }
  .founder h3 span { font-size: 13px; }
}

@media (min-width: 1200px) {
  .hero-wordmark { gap: 8px; }
  .hero-goat { width: 200px; height: 160px; flex-basis: 200px; }
}

@media (min-width: 1200px) {
  .hero { display: grid; grid-template-columns: 200px minmax(0, 720px); justify-content: center; align-items: center; column-gap: 8px; }
  .hero-wordmark { display: contents; }
  .hero-goat { grid-column: 1; grid-row: 1 / 6; justify-self: end; }
  .framework-label, .hero h1, .impact, .domain-copy, .access-strip { grid-column: 2; justify-self: start; text-align: left; }
  .domain-copy { margin-inline: 0; }
  .access-strip { width: 100%; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-cta { transform: scale(1); transition: transform 550ms cubic-bezier(.22, 1.6, .4, 1), background 180ms ease, box-shadow 250ms ease; }
  .hero-cta:is(:hover, :focus-visible) { transform: scale(1.045, 1.09); box-shadow: var(--button-hover-shadow); }
  .hero-cta .icon { transition: transform 550ms cubic-bezier(.22, 1.6, .4, 1); }
  .hero-cta:is(:hover, :focus-visible) .icon { transform: translate(2px, -2px) rotate(-6deg) scale(1.12); }
  .graph-node::before { content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none; background: inherit; border: inherit; border-radius: inherit; transform: scale(1); transition: transform 550ms cubic-bezier(.22, 1.6, .4, 1), box-shadow 250ms ease; }
  .graph-node:is(:hover, :focus-visible)::before { transform: scale(1.045, 1.09); box-shadow: 0 8px 24px color-mix(in srgb, var(--orange-bright) 14%, transparent); }
  .graph-node > .icon { transform-origin: center; transition: transform 550ms cubic-bezier(.22, 1.6, .4, 1); }
  .graph-node:is(:hover, :focus-visible) > .icon { transform: translateY(-2px) rotate(-6deg) scale(1.12); }
  .hero h1 > span { animation: x-hop 6s ease-in-out 600ms infinite; }
  .hero h1 > .is-spinning, .hero h1 > .is-flying, .hero h1 > .is-bursting, .hero h1 > .is-molecular { animation: none; }
  .is-flying .x-rotor { opacity: 0; }
  .is-spinning .x-rotor { transform: rotateY(var(--x-spin, 0deg)) rotate(-35deg); }
  :root[data-theme="orange"] .hero h1 > span:not(.is-spinning) { animation: x-poise 8s ease-in-out infinite; }
  :root[data-theme="pharma"] .hero h1 > span:not(.is-molecular) { animation: x-poise 10s ease-in-out infinite; }
  :root[data-theme="pharma"] .graph-node:is(:hover, :focus-visible)::before { transform: scale(1.015, 1.025); }
  :root[data-theme="pharma"] .hero-cta:is(:hover, :focus-visible) { transform: scale(1.02); }
  :root[data-theme="cotton"] .hero h1 > span:not(.is-spinning):not(.is-flying) { animation: x-float 5s ease-in-out infinite; }
  :root[data-theme="pop"] .hero h1 > span:not(.is-spinning):not(.is-bursting) { animation-duration: 4s; }
  @keyframes x-poise { 0%, 30%, 60%, 100% { transform: rotate(0); } 45% { transform: rotate(-3deg); } }
  @keyframes x-float { 0%, 100% { transform: translateY(0) rotate(0) scale(1); } 50% { transform: translateY(-3px) rotate(3deg) scale(1.02, .98); } }
  @keyframes x-hop {
    0%, 6%, 48%, 100% { transform: translateY(0) rotate(0) scale(1); }
    11% { transform: translateY(0) rotate(-7deg) scale(1.08, .86); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
    20% { transform: translateY(-.08em) rotate(6deg) scale(.97, 1.02); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
    28% { transform: translateY(0) rotate(-3deg) scale(1.12, .82); }
    34% { transform: translateY(-.06em) rotate(3deg) scale(.97, 1.03); }
    40% { transform: translateY(0) rotate(-2deg) scale(1.03, .97); }
  }
  .flow-edge { stroke-dasharray: 8 5; animation: flow 2s linear infinite; }
  @keyframes flow { to { stroke-dashoffset: -26; } }
  .graph-node, .framework-title { animation: rise 700ms ease-out var(--in, 0ms) backwards; }
  .graph-edges { animation: rise 800ms ease-out 350ms backwards; }
  .source:nth-child(2) { --in: 70ms; }
  .source:nth-child(3) { --in: 140ms; }
  .source:nth-child(4) { --in: 210ms; }
  .framework-title { --in: 200ms; }
  .explore { --in: 280ms; }
  .prepare { --in: 360ms; }
  .workflow { --in: 440ms; }
  .analysis { --in: 520ms; }
  .quality { --in: 600ms; }
  .draft { --in: 680ms; }
  .review { --in: 760ms; }
  @keyframes rise { from { opacity: 0; filter: blur(6px); } }
  .tip { animation: tip-in 140ms ease-out; }
  @keyframes tip-in { from { opacity: 0; translate: 0 4px; } }
  .graph.is-live .graph-node::after { animation: ping var(--cycle) ease-out var(--ping, 0s) infinite; }
  .framework::before { animation: frame-breathe 7s ease-in-out infinite; }
  .graph.is-live .framework-title .capra-mark { animation: mark var(--cycle) ease-in-out var(--ping, 0s) infinite; }
  .graph.is-live .packet { display: block; animation: travel var(--cycle) linear var(--start, 0s) infinite; }
  @keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--orange-bright) 65%, transparent); } 11%, 100% { box-shadow: 0 0 0 12px transparent; } }
  @keyframes frame-breathe {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 transparent; border-color: var(--frame-line); }
    50% { transform: scale(1.004, 1.012); box-shadow: 0 0 22px color-mix(in srgb, var(--orange-bright) 14%, transparent); border-color: var(--theme-frame-peak); }
  }
  @keyframes mark { 0%, 20%, 100% { transform: scale(1); } 8% { transform: scale(1.14); } }
  @keyframes travel {
    0% { offset-distance: 0%; opacity: 0; animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
    1.2% { opacity: 1; }
    10% { offset-distance: 100%; opacity: 1; }
    11%, 100% { offset-distance: 100%; opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .graph-node { transition: none; }
}