:root {
  --bg: #03070d;
  --bg-deep: #010408;
  --surface: #07101a;
  --surface-2: #0a1520;
  --line: rgba(120, 163, 186, .17);
  --line-strong: rgba(121, 187, 216, .34);
  --text: #eaf5f7;
  --muted: #8195a0;
  --cyan: #29dff4;
  --cyan-soft: #79eaf2;
  --lime: #b3ec67;
  --amber: #f3b65d;
  --coral: #ff6d68;
  color-scheme: dark;
  font-family: "Segoe UI", Inter, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; color: var(--text); background: var(--bg); overflow-x: hidden; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 190 190' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.masthead {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 50%;
  width: min(1540px, calc(100% - 72px));
  height: 92px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

.identity { display: inline-flex; width: max-content; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-size: 11px; font-weight: 700; letter-spacing: .24em; }
.identity svg { width: 31px; height: 31px; overflow: visible; }
.identity svg path:first-child { fill: none; stroke: rgba(87, 220, 234, .7); stroke-width: 1; }
.identity svg path:last-child { fill: rgba(113, 230, 239, .12); stroke: var(--cyan); stroke-width: .7; }
.masthead nav { display: flex; gap: 38px; }
.masthead nav a, .mast-actions a { color: #73909e; text-decoration: none; font-size: 11px; letter-spacing: .11em; transition: color .2s ease; }
.masthead nav a:hover, .mast-actions a:hover { color: var(--cyan-soft); }
.mast-actions { justify-self: end; display: flex; align-items: center; gap: 20px; }
.mast-actions button { padding: 8px; border: 0; color: var(--cyan); background: transparent; cursor: pointer; font: 700 10px/1 "Segoe UI", sans-serif; letter-spacing: .14em; }

main { width: 100%; }
.hero { position: relative; min-height: 100svh; overflow: hidden; background: radial-gradient(circle at 75% 43%, #071925 0, #030a11 35%, var(--bg-deep) 72%); }
#neural-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.hero-vignette { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(1,4,8,.98) 0%, rgba(1,4,8,.94) 27%, rgba(1,4,8,.46) 53%, rgba(1,4,8,.08) 78%), linear-gradient(0deg, rgba(1,4,8,.65), transparent 24%, transparent 78%, rgba(1,4,8,.35)); }

.hero-copy { position: relative; z-index: 5; width: min(1540px, calc(100% - 72px)); margin: 0 auto; padding-top: clamp(170px, 20vh, 235px); }
.project-line { display: flex; align-items: center; width: min(535px, 100%); margin-bottom: 35px; color: #6b8592; font-size: 9px; font-weight: 700; letter-spacing: .19em; }
.project-line > i { flex: 1; height: 1px; margin: 0 20px; background: linear-gradient(90deg, var(--line-strong), transparent); }
.pulse-label { display: flex; align-items: center; gap: 8px; color: var(--lime); }
.pulse-label b { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 12px var(--lime); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .38; box-shadow: 0 0 3px var(--lime); } }

h1, h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.04em; text-wrap: pretty; }
h1 { max-width: 790px; font-size: clamp(63px, 7.4vw, 124px); line-height: .86; text-shadow: 0 4px 45px rgba(0,0,0,.65); }
.hero-lead { max-width: 600px; margin: 38px 0 0; color: #91a7b2; font-size: clamp(16px, 1.25vw, 20px); line-height: 1.68; }
.hero-links { display: flex; align-items: center; gap: 30px; margin-top: 38px; }
.hero-links a { color: #88a3af; text-decoration: none; font-size: 11px; letter-spacing: .09em; }
.hero-links .primary-link { display: flex; justify-content: space-between; align-items: center; width: 252px; min-height: 54px; padding: 0 20px; color: #061016; background: var(--cyan-soft); font-weight: 800; transition: background .2s ease, transform .2s ease; }
.hero-links .primary-link:hover { background: #b1f8f4; transform: translateY(-2px); }
.hero-links .primary-link b { font-size: 18px; font-weight: 400; }

.hero-reading { position: absolute; z-index: 5; right: max(36px, calc((100vw - 1540px) / 2)); bottom: 78px; width: 235px; padding-left: 20px; border-left: 1px solid var(--line-strong); }
.hero-reading > p, .overline { margin: 0; color: var(--cyan-soft); font-size: 9px; font-weight: 700; letter-spacing: .18em; }
.hero-reading ul { list-style: none; padding: 14px 0 8px; margin: 0; }
.hero-reading li { display: flex; align-items: center; gap: 10px; margin: 8px 0; color: #79909b; font-size: 10px; letter-spacing: .06em; }
.hero-reading li i { width: 5px; height: 5px; border-radius: 50%; box-shadow: 0 0 9px currentColor; }
.hero-reading .cyan { color: var(--cyan); background: currentColor; }
.hero-reading .amber { color: var(--amber); background: currentColor; }
.hero-reading .lime { color: var(--lime); background: currentColor; }
.hero-reading .coral { color: var(--coral); background: currentColor; }
.hero-reading small { color: #4f6671; font-size: 9px; }
.scroll-cue { position: absolute; z-index: 5; left: 50%; bottom: 0; display: grid; justify-items: center; gap: 11px; transform: translateX(-50%); color: #46616d; font-size: 8px; letter-spacing: .18em; }
.scroll-cue i { width: 1px; height: 48px; background: linear-gradient(var(--cyan), transparent); }

.statement, .proof, .observed { width: min(1540px, calc(100% - 72px)); margin: 0 auto; display: grid; grid-template-columns: 150px 1fr; border-top: 1px solid var(--line); }
.statement { grid-template-columns: 150px minmax(0, 1.3fr) minmax(320px, .7fr); padding: 150px 0; }
.rail-label { display: flex; flex-direction: column; gap: 13px; padding-top: 7px; color: #4e6a77; font-size: 9px; letter-spacing: .17em; }
.rail-label span { color: var(--cyan); }
.rail-label b { font-weight: 600; }
.statement-main { padding-right: clamp(30px, 6vw, 100px); }
.statement h2 { margin-top: 24px; font-size: clamp(48px, 5vw, 78px); line-height: 1.03; }
.statement-notes { padding: 48px 0 0 42px; border-left: 1px solid var(--line); }
.statement-notes p { margin: 0 0 28px; color: #9aadb6; font-size: 16px; line-height: 1.7; }
.statement-notes p:last-child { color: #617d89; font-size: 13px; }

.proof { padding: 150px 0; }
.proof-body { min-width: 0; }
.proof-intro { display: grid; grid-template-columns: 1.25fr .55fr; gap: 70px; align-items: end; padding-bottom: 72px; }
.proof-intro .overline { grid-column: 1 / -1; }
.proof-intro h2 { font-size: clamp(48px, 5vw, 80px); line-height: 1.02; }
.proof-intro > p:last-child { color: #8197a2; line-height: 1.7; }

.causal-demo { --demo-accent: var(--cyan); position: relative; min-height: 690px; border: 1px solid var(--line-strong); background: radial-gradient(circle at 52% 42%, rgba(18, 73, 94, .28), transparent 36%), radial-gradient(circle at 13% 32%, rgba(22, 68, 83, .13), transparent 24%), linear-gradient(135deg, rgba(7,25,37,.98), rgba(2,8,14,.96)); overflow: hidden; }
.causal-demo::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(81,143,164,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(81,143,164,.035) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(circle at 50% 50%, black, transparent 76%); }
.causal-demo::after { content: ""; position: absolute; left: -1px; top: -1px; width: 2px; height: calc(100% + 2px); background: var(--demo-accent); box-shadow: 0 0 24px rgba(41,223,244,.55); transition: background .35s ease, box-shadow .35s ease; }
.causal-demo.lesioned { --demo-accent: var(--coral); }
.causal-demo.lesioned::after { box-shadow: 0 0 24px rgba(255,109,104,.48); }
.demo-toolbar { position: relative; z-index: 4; min-height: 76px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.demo-toolbar > div:first-child { display: flex; align-items: center; gap: 18px; color: #62828f; font-size: 8px; font-weight: 700; letter-spacing: .16em; }
.demo-toolbar > div:first-child b { color: var(--cyan-soft); font: 500 11px/1 "Segoe UI", sans-serif; }
.demo-actions { display: flex; align-items: center; gap: 10px; }
.demo-actions button { min-height: 39px; border: 1px solid var(--line-strong); background: rgba(2,8,14,.7); color: #71909d; cursor: pointer; font: 700 8px/1 "Segoe UI", sans-serif; letter-spacing: .13em; transition: color .2s ease, border-color .2s ease, background .2s ease; }
.demo-actions button:hover { color: var(--text); border-color: rgba(121,215,226,.58); }
.lesion-toggle { display: flex; align-items: center; gap: 11px; padding: 0 14px; }
.lesion-toggle i { position: relative; width: 29px; height: 14px; border-radius: 10px; border: 1px solid #326472; background: #07161d; }
.lesion-toggle i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); transition: transform .3s ease, background .3s ease, box-shadow .3s ease; }
.lesion-toggle strong { min-width: 53px; color: var(--lime); font-size: 8px; text-align: left; transition: color .3s ease; }
.causal-demo.lesioned .lesion-toggle i::after { transform: translateX(15px); background: var(--coral); box-shadow: 0 0 8px var(--coral); }
.causal-demo.lesioned .lesion-toggle strong { color: var(--coral); }
.replay-button { display: flex; align-items: center; gap: 11px; padding: 0 14px; }
.replay-button b { color: var(--cyan); font-size: 15px; font-weight: 400; }

.demo-workspace { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr .96fr 1fr; min-height: 570px; }
.demo-workspace > div { position: relative; padding: 33px 29px; border-right: 1px solid var(--line); }
.demo-workspace > div:last-child { border-right: 0; }
.demo-label { display: flex; gap: 13px; margin: 0; color: #52717e; font-size: 8px; letter-spacing: .14em; }
.demo-label span { color: var(--cyan); }
.demo-label b { font-weight: 700; }
.experience-event { position: relative; margin-top: 34px; padding: 17px 18px; border: 1px solid var(--line); background: linear-gradient(90deg, rgba(8,28,38,.92), rgba(3,12,18,.82)); opacity: .2; transform: translateX(-12px); transition: opacity .5s ease, transform .5s ease, border-color .5s ease, box-shadow .5s ease; }
.experience-event + .experience-event { margin-top: 16px; }
.experience-event small, .answer-block small { color: #456571; font-size: 7px; letter-spacing: .15em; }
.experience-event > div { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; color: #8aa0aa; font-size: 10px; letter-spacing: .08em; }
.experience-event i, .query-line i { color: var(--amber); font-style: normal; }
.experience-event strong { color: #c0d6dc; font-weight: 600; }
.event-pulse { position: absolute; z-index: 2; left: -30px; top: 50%; width: 29px; height: 1px; overflow: visible; background: linear-gradient(90deg, transparent, rgba(41,223,244,.55)); }
.event-pulse::after { content: ""; position: absolute; right: -1px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); opacity: 0; }
.causal-demo[data-phase="0"] .event-one .event-pulse::after, .causal-demo[data-phase="1"] .event-pulse::after, .causal-demo[data-phase="2"] .event-pulse::after, .causal-demo[data-phase="3"] .event-pulse::after { animation: packet-arrive 1.2s ease-in-out infinite; }
@keyframes packet-arrive { 0% { transform: translateX(-25px); opacity: 0; } 25%, 70% { opacity: 1; } 100% { transform: translateX(0); opacity: 0; } }
.causal-demo[data-phase="0"] .event-one, .causal-demo[data-phase="1"] .experience-event, .causal-demo[data-phase="2"] .experience-event, .causal-demo[data-phase="3"] .experience-event, .causal-demo[data-phase="4"] .experience-event { opacity: 1; transform: translateX(0); border-color: rgba(62,151,176,.32); }
.causal-demo[data-phase="1"] .experience-event, .causal-demo[data-phase="2"] .experience-event, .causal-demo[data-phase="3"] .experience-event { box-shadow: inset 2px 0 0 rgba(41,223,244,.35); }
.never-shown { display: flex; align-items: center; gap: 10px; margin-top: 25px; color: #5e7883; font-size: 9px; }
.never-shown i { width: 7px; height: 7px; border: 1px solid var(--amber); transform: rotate(45deg); }
.input-trace { margin-top: 38px; padding: 20px 0 0; border-top: 1px solid var(--line); }
.input-trace > div { position: relative; display: flex; justify-content: space-between; width: 100%; height: 16px; margin-bottom: 14px; }
.input-trace > div::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: linear-gradient(90deg, var(--line-strong), rgba(41,223,244,.45), var(--line-strong)); }
.input-trace > div i { position: relative; z-index: 1; width: 6px; height: 6px; margin-top: 4px; border-radius: 50%; background: #0c2935; border: 1px solid #2f8da2; box-shadow: 0 0 0 5px #07141c; }
.input-trace > div i:nth-child(3) { background: var(--cyan); box-shadow: 0 0 9px rgba(41,223,244,.65), 0 0 0 5px #07141c; }
.input-trace > span { display: block; max-width: 330px; color: #55717d; font-size: 9px; line-height: 1.6; }

.black-box { display: flex; flex-direction: column; align-items: stretch; }
.core-visual { position: relative; width: min(350px, 100%); aspect-ratio: 1; margin: 17px auto 0; border-radius: 50%; opacity: .45; transform: scale(.92); transition: opacity .65s ease, transform .65s ease, filter .5s ease; }
.causal-demo[data-phase="1"] .core-visual, .causal-demo[data-phase="2"] .core-visual, .causal-demo[data-phase="3"] .core-visual, .causal-demo[data-phase="4"] .core-visual { opacity: 1; transform: scale(1); }
.causal-demo.lesioned .core-visual { opacity: .34; filter: grayscale(.8); }
.core-ring { position: absolute; border: 1px solid rgba(55,167,192,.18); border-radius: 50%; }
.ring-one { inset: 5%; }
.ring-two { inset: 20%; border-color: rgba(179,236,103,.14); }
.ring-three { inset: 35%; border-color: rgba(243,182,93,.17); }
.core-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.core-visual svg path { fill: none; stroke: rgba(55,195,219,.4); stroke-width: 1; stroke-dasharray: 280; stroke-dashoffset: 280; transition: stroke-dashoffset 1.3s ease, stroke .4s ease; }
.causal-demo[data-phase="1"] .core-visual svg path, .causal-demo[data-phase="2"] .core-visual svg path, .causal-demo[data-phase="3"] .core-visual svg path, .causal-demo[data-phase="4"] .core-visual svg path { stroke-dashoffset: 0; }
.causal-demo.lesioned .core-visual svg path { stroke: rgba(255,109,104,.25); stroke-dashoffset: 210; }
.core-node { position: absolute; z-index: 2; width: 7px; height: 7px; margin: -3px 0 0 -3px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 13px rgba(41,223,244,.8); opacity: .2; transform: scale(.4); transition: opacity .4s ease, transform .4s ease, background .4s ease; }
.n1 { left: 20%; top: 61%; }.n2 { left: 35%; top: 30%; }.n3 { left: 51%; top: 46%; }.n4 { left: 66%; top: 61%; }.n5 { left: 79%; top: 34%; }
.causal-demo[data-phase="1"] .core-node, .causal-demo[data-phase="2"] .core-node, .causal-demo[data-phase="3"] .core-node, .causal-demo[data-phase="4"] .core-node { opacity: 1; transform: scale(1); }
.causal-demo[data-phase="1"] .n4, .causal-demo[data-phase="1"] .n5 { transition-delay: .45s; }
.causal-demo[data-phase="3"] .n5 { background: var(--lime); box-shadow: 0 0 18px rgba(179,236,103,.9); transform: scale(1.45); }
.causal-demo.lesioned .core-node { background: var(--coral); box-shadow: 0 0 11px rgba(255,109,104,.55); opacity: .32; }
.flow-dot { position: absolute; z-index: 4; width: 5px; height: 5px; margin: -2px 0 0 -2px; border-radius: 50%; background: #e9ffff; box-shadow: 0 0 12px 3px rgba(41,223,244,.7); opacity: 0; }
.flow-one { animation: flow-one 2.5s ease-in-out infinite; }
.flow-two { animation: flow-two 2.9s .8s ease-in-out infinite; }
@keyframes flow-one { 0% { left: 20%; top: 61%; opacity: 0; } 12% { opacity: 1; } 48% { left: 51%; top: 46%; opacity: 1; } 88% { left: 79%; top: 34%; opacity: 1; } 100% { left: 79%; top: 34%; opacity: 0; } }
@keyframes flow-two { 0% { left: 35%; top: 30%; opacity: 0; } 18% { opacity: 1; } 55% { left: 51%; top: 46%; opacity: 1; } 88% { left: 66%; top: 61%; opacity: 1; } 100% { left: 66%; top: 61%; opacity: 0; } }
.causal-demo[data-phase="0"] .flow-dot, .causal-demo.lesioned .flow-dot { animation-play-state: paused; opacity: 0; }
.core-concept { position: absolute; z-index: 3; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #83a6b3; background: #06131a; border: 1px solid #285c6a; font-size: 8px; font-weight: 800; box-shadow: 0 0 0 4px rgba(4,14,20,.72); opacity: 0; transition: opacity .45s ease, color .45s ease, border-color .45s ease; }
.concept-a { left: 13%; top: 57%; }.concept-b { left: 44%; top: 42%; }.concept-c { left: 73%; top: 29%; }
.causal-demo[data-phase="1"] .core-concept, .causal-demo[data-phase="2"] .core-concept, .causal-demo[data-phase="3"] .core-concept, .causal-demo[data-phase="4"] .core-concept { opacity: 1; }
.causal-demo[data-phase="3"] .concept-c { color: var(--lime); border-color: var(--lime); box-shadow: 0 0 14px rgba(179,236,103,.32), 0 0 0 4px rgba(4,14,20,.72); }
.causal-demo.lesioned .core-concept { color: #965c5c; border-color: #784443; }
.core-lock { position: absolute; left: 50%; top: 50%; width: 118px; height: 45px; display: grid; place-items: center; transform: translate(-50%,-50%); border: 1px solid rgba(88,133,149,.25); background: rgba(2,7,12,.88); }
.core-lock span { color: #526c77; font-size: 6px; font-weight: 700; letter-spacing: .13em; text-align: center; }
.core-status { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: auto; color: #557581; font-size: 8px; letter-spacing: .08em; }
.core-status i { width: 5px; height: 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); animation: pulse 1.4s ease-in-out infinite; }
.causal-demo.lesioned .core-status { color: #9b605f; }
.causal-demo.lesioned .core-status i { background: var(--coral); box-shadow: 0 0 9px var(--coral); }
.core-readout, .result-readout { display: grid; grid-template-columns: repeat(3, 1fr); margin: 22px 0 0; padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.core-readout > div, .result-readout > div { min-width: 0; padding: 13px 8px; border-right: 1px solid var(--line); }
.core-readout > div:last-child, .result-readout > div:last-child { border-right: 0; }
.core-readout dt, .result-readout dt { color: #405e6a; font-size: 6px; letter-spacing: .12em; }
.core-readout dd, .result-readout dd { margin: 7px 0 0; color: #88a5b0; font-size: 8px; letter-spacing: .08em; }
.core-readout dd span { color: #5b7782; }
.core-readout .path-state { color: var(--cyan-soft); }
.causal-demo.lesioned .core-readout .path-state { color: var(--coral); }

.query-line { display: flex; justify-content: space-between; align-items: center; margin-top: 49px; padding: 21px 18px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); color: #7e9aa5; font-size: 11px; letter-spacing: .1em; opacity: .22; transform: translateY(8px); transition: opacity .45s ease, transform .45s ease; }
.query-line strong { color: var(--cyan); font: 400 32px/1 Georgia, serif; }
.causal-demo[data-phase="2"] .query-line, .causal-demo[data-phase="3"] .query-line, .causal-demo[data-phase="4"] .query-line { opacity: 1; transform: translateY(0); }
.answer-block { margin-top: 38px; padding: 22px 20px; border-left: 1px solid var(--lime); background: linear-gradient(90deg, rgba(179,236,103,.07), transparent); opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s ease, border-color .35s ease, background .35s ease; }
.causal-demo[data-phase="3"] .answer-block, .causal-demo[data-phase="4"] .answer-block { opacity: 1; transform: translateY(0); }
.answer-value { min-height: 55px; display: flex; align-items: center; margin-top: 12px; color: var(--lime); font: 400 30px/1 Georgia, serif; transition: color .35s ease; }
.answer-block p { margin: 5px 0 0; color: #78936e; font-size: 9px; }
.answer-removed { display: none; }
.causal-demo.lesioned .answer-block { border-color: var(--coral); background: linear-gradient(90deg, rgba(255,109,104,.07), transparent); }
.causal-demo.lesioned .answer-live { display: none; }
.causal-demo.lesioned .answer-removed { display: inline; color: var(--coral); }
.causal-demo.lesioned .answer-block p.answer-removed { display: block; color: #9a6262; }
.counterfactual-card { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; margin-top: 18px; padding: 16px 18px; border: 1px solid rgba(255,109,104,.2); background: rgba(255,109,104,.025); opacity: .55; transition: opacity .35s ease, border-color .35s ease, background .35s ease; }
.counterfactual-card > div { display: flex; flex-direction: column; gap: 5px; }
.counterfactual-card span { color: #9d6463; font-size: 7px; font-weight: 700; letter-spacing: .13em; }
.counterfactual-card small { color: #604b4d; font-size: 7px; }
.counterfactual-card strong { color: #b66c69; font: 400 16px/1 Georgia, serif; }
.counterfactual-card > i { position: absolute; left: 18px; right: 18px; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--coral), transparent); transform: scaleX(.18); transform-origin: left; transition: transform .45s ease; }
.causal-demo.lesioned .counterfactual-card { opacity: 1; border-color: rgba(179,236,103,.38); background: rgba(179,236,103,.045); }
.causal-demo.lesioned .counterfactual-card span { color: #83a861; }
.causal-demo.lesioned .counterfactual-card small { color: #5d7152; }
.causal-demo.lesioned .counterfactual-card strong { color: var(--lime); }
.causal-demo.lesioned .counterfactual-card > i { background: linear-gradient(90deg, var(--lime), transparent); transform: scaleX(1); }
.result-readout { grid-template-columns: 1fr 1fr; margin-top: 18px; }
.result-readout dd { color: var(--cyan-soft); }

.phase-narration { position: relative; z-index: 3; min-height: 96px; display: grid; grid-template-columns: 160px minmax(260px, .8fr) 1.2fr; gap: 28px; align-items: center; padding: 18px 24px; border-top: 1px solid var(--line-strong); background: linear-gradient(90deg, rgba(13,39,51,.84), rgba(5,15,22,.84)); }
.phase-narration > span { color: var(--cyan); font-size: 7px; font-weight: 700; letter-spacing: .15em; }
.phase-narration strong { font: 400 19px/1.25 Georgia, serif; transition: color .3s ease; }
.phase-narration p { margin: 0; color: #617d89; font-size: 10px; line-height: 1.55; }
.causal-demo.lesioned .phase-narration strong { color: #e47e7a; }

.demo-timeline { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(5, 1fr); min-height: 76px; margin: 0; padding: 0 24px; list-style: none; border-top: 1px solid var(--line); }
.demo-timeline li { position: relative; display: flex; align-items: center; gap: 10px; color: #3f5a66; font-size: 7px; font-weight: 700; letter-spacing: .12em; }
.demo-timeline li::after { content: ""; position: absolute; top: 50%; left: 16px; right: 10px; height: 1px; background: #18303b; z-index: -1; }
.demo-timeline li:last-child::after { display: none; }
.demo-timeline i { width: 7px; height: 7px; border-radius: 50%; border: 1px solid #315563; background: #061017; box-shadow: 0 0 0 5px #061017; transition: border-color .3s ease, background .3s ease, box-shadow .3s ease; }
.demo-timeline span { padding-right: 9px; background: #061017; }
.causal-demo[data-phase="0"] [data-step="0"], .causal-demo[data-phase="1"] [data-step="0"], .causal-demo[data-phase="1"] [data-step="1"], .causal-demo[data-phase="2"] [data-step="0"], .causal-demo[data-phase="2"] [data-step="1"], .causal-demo[data-phase="2"] [data-step="2"], .causal-demo[data-phase="3"] [data-step]:not([data-step="4"]), .causal-demo[data-phase="4"] [data-step] { color: #8fb1be; }
.causal-demo[data-phase="0"] [data-step="0"] i, .causal-demo[data-phase="1"] [data-step="0"] i, .causal-demo[data-phase="1"] [data-step="1"] i, .causal-demo[data-phase="2"] [data-step="0"] i, .causal-demo[data-phase="2"] [data-step="1"] i, .causal-demo[data-phase="2"] [data-step="2"] i, .causal-demo[data-phase="3"] [data-step]:not([data-step="4"]) i { border-color: var(--cyan); background: var(--cyan); box-shadow: 0 0 10px rgba(41,223,244,.65), 0 0 0 5px #061017; }
.causal-demo[data-phase="4"] [data-step="4"] { color: #d78a87; }
.causal-demo[data-phase="4"] [data-step="4"] i { border-color: var(--coral); background: var(--coral); box-shadow: 0 0 10px rgba(255,109,104,.65), 0 0 0 5px #061017; }

.validation-strip { display: grid; grid-template-columns: .75fr 1fr 1fr 1.35fr; min-height: 132px; border-bottom: 1px solid var(--line-strong); }
.validation-strip > div { display: grid; align-content: center; padding: 20px 24px; border-right: 1px solid var(--line); }
.validation-strip > div:last-child { border-right: 0; }
.validation-strip strong { font: 400 35px/1 Georgia, serif; }
.validation-strip span { margin-top: 9px; color: #587582; font-size: 8px; letter-spacing: .1em; }
.validation-strip .causal-confirmed { display: flex; flex-direction: row; align-items: center; gap: 12px; color: var(--lime); }
.causal-confirmed i { width: 8px; height: 8px; border: 1px solid var(--lime); transform: rotate(45deg); box-shadow: 0 0 10px rgba(179,236,103,.45); }
.causal-confirmed span { margin: 0; color: var(--lime); font-weight: 700; }
.demo-disclosure { display: grid; grid-template-columns: 150px 1fr 190px 1fr; gap: 25px; padding: 34px 0; border-bottom: 1px solid var(--line); }
.demo-disclosure span { color: #5f7d89; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.demo-disclosure p { margin: 0; color: #78909a; font-size: 12px; line-height: 1.65; }

.observed { padding: 150px 0; }
.observed-body > header { display: grid; grid-template-columns: 1.25fr .55fr; align-items: end; gap: 70px; margin-bottom: 70px; }
.observed-body > header .overline { grid-column: 1 / -1; }
.observed-body > header h2 { font-size: clamp(50px, 5.3vw, 83px); }
.observed-body > header > p:last-child { color: #758d98; line-height: 1.7; }
.capability-lines { border-top: 1px solid var(--line-strong); }
.capability-lines article { display: grid; grid-template-columns: 75px minmax(270px, .8fr) 1.2fr; gap: 25px; align-items: center; min-height: 110px; border-bottom: 1px solid var(--line); transition: background .25s ease, padding .25s ease; }
.capability-lines article:hover { padding: 0 18px; background: rgba(25, 76, 96, .09); }
.capability-lines article > span { color: #426370; font-size: 9px; }
.capability-lines h3 { margin: 0; font: 400 24px/1.15 Georgia, serif; }
.capability-lines p { margin: 0; color: #718792; font-size: 13px; line-height: 1.55; }
.domains-strip { display: flex; align-items: center; gap: 18px; margin-top: 48px; color: #5d7a86; font-size: 8px; font-weight: 700; letter-spacing: .14em; }
.domains-strip i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }

.frontier { position: relative; min-height: 900px; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; background: #e8f0ef; color: #061017; }
.frontier-graph { position: relative; min-height: 900px; background: #05121b; }
#frontier-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.frontier-copy { padding: 110px clamp(45px, 7vw, 120px); }
.rail-label.light { color: #71868c; margin-bottom: 95px; }
.frontier-copy .overline { color: #217b89; }
.frontier-copy h2 { margin-top: 24px; font-size: clamp(49px, 4.8vw, 78px); line-height: 1.05; }
.frontier-copy ol { list-style: none; padding: 0; margin: 80px 0 0; border-top: 1px solid rgba(6,16,23,.22); }
.frontier-copy li { display: grid; grid-template-columns: 60px 1fr; align-items: center; min-height: 78px; border-bottom: 1px solid rgba(6,16,23,.18); }
.frontier-copy li span { color: #278392; font-size: 9px; }
.frontier-copy li p { margin: 0; font: 400 18px/1.3 Georgia, serif; }

.brief { width: min(1540px, calc(100% - 72px)); margin: 0 auto; padding: 140px 0; display: grid; grid-template-columns: 150px 1.1fr .9fr; gap: 50px; align-items: end; border-bottom: 1px solid var(--line); }
.brief-index { align-self: start; color: #476673; font-size: 8px; letter-spacing: .15em; }
.brief h2 { margin-top: 24px; font-size: clamp(48px, 4.5vw, 72px); line-height: 1.04; }
.brief-copy > p:last-child { max-width: 620px; color: #718b96; line-height: 1.65; }
.brief-downloads { border-top: 1px solid var(--line-strong); }
.brief-downloads a { display: flex; justify-content: space-between; align-items: center; min-height: 93px; border-bottom: 1px solid var(--line); text-decoration: none; transition: padding .2s ease, color .2s ease; }
.brief-downloads a:hover { padding-left: 14px; color: var(--cyan-soft); }
.brief-downloads a span { display: flex; align-items: baseline; gap: 20px; }
.brief-downloads b { font: 400 30px/1 Georgia, serif; }
.brief-downloads small { color: #607a85; font-size: 8px; letter-spacing: .13em; }
.brief-downloads em { font-style: normal; font-size: 20px; }

.contact { position: relative; width: min(1540px, calc(100% - 72px)); min-height: 690px; margin: 0 auto; padding: 145px 150px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.contact::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 82% 45%, rgba(31,183,215,.11), transparent 24rem); }
.contact > * { position: relative; z-index: 2; }
.contact h2 { max-width: 1130px; margin-top: 25px; font-size: clamp(48px, 5.3vw, 86px); line-height: 1.03; }
.contact > a { width: max-content; margin-top: 62px; padding-bottom: 8px; border-bottom: 1px solid rgba(41,223,244,.45); color: var(--cyan-soft); text-decoration: none; font-size: clamp(19px, 1.8vw, 28px); }
.contact-orbit { position: absolute; z-index: 1; right: 5%; top: 50%; width: 430px; height: 430px; transform: translateY(-50%); opacity: .45; }
.contact-orbit i { position: absolute; inset: 0; border: 1px solid rgba(51,193,220,.18); border-radius: 50%; }
.contact-orbit i:nth-child(2) { inset: 70px; border-color: rgba(176,233,102,.16); }
.contact-orbit i:nth-child(3) { inset: 145px; border-color: rgba(243,182,93,.2); }
.contact-orbit b { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 25px 8px rgba(41,223,244,.25); transform: translate(-50%,-50%); }

footer { width: min(1540px, calc(100% - 72px)); min-height: 120px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; color: #49636e; font-size: 8px; letter-spacing: .15em; }
footer a { color: #627e89; text-decoration: none; }
.footer-id { color: #8ba0aa; }

@media (max-width: 1080px) {
  .masthead { grid-template-columns: 1fr auto; }
  .masthead nav { display: none; }
  .hero-vignette { background: linear-gradient(90deg, rgba(1,4,8,.98), rgba(1,4,8,.78) 62%, rgba(1,4,8,.2)), linear-gradient(0deg, rgba(1,4,8,.7), transparent 36%); }
  .hero-reading { display: none; }
  .statement { grid-template-columns: 90px 1fr; }
  .statement-notes { grid-column: 2; margin-top: 55px; }
  .proof, .observed { grid-template-columns: 90px 1fr; }
  .demo-workspace { grid-template-columns: 1fr 1fr; }
  .black-box { border-right: 0 !important; }
  .heldout-result { grid-column: 1 / -1; border-top: 1px solid var(--line); }
  .validation-strip { grid-template-columns: 1fr 1fr; }
  .validation-strip > div:nth-child(2) { border-right: 0; }
  .validation-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .phase-narration { grid-template-columns: 130px 1fr; }
  .phase-narration p { grid-column: 2; }
  .demo-disclosure { grid-template-columns: 160px 1fr; }
  .brief { grid-template-columns: 90px 1fr; }
  .brief-downloads { grid-column: 2; }
  .contact { padding: 120px 90px; }
}

@media (max-width: 760px) {
  .masthead, .hero-copy, .statement, .proof, .observed, .brief, .contact, footer { width: calc(100% - 34px); }
  .masthead { height: 72px; }
  .identity { font-size: 9px; }
  .identity svg { width: 27px; }
  .mast-actions a { display: none; }
  .hero { min-height: 820px; }
  .hero-copy { padding-top: 145px; }
  .hero-vignette { background: linear-gradient(180deg, rgba(1,4,8,.96) 0%, rgba(1,4,8,.68) 63%, rgba(1,4,8,.88)); }
  h1 { font-size: clamp(56px, 19vw, 82px); }
  .hero-lead { font-size: 15px; }
  .hero-links { align-items: flex-start; flex-direction: column; }
  .hero-links .primary-link { width: 100%; }
  .scroll-cue { display: none; }
  .statement, .proof, .observed { grid-template-columns: 1fr; padding: 90px 0; }
  .rail-label { flex-direction: row; margin-bottom: 40px; }
  .statement-main { padding: 0; }
  .statement h2, .proof-intro h2, .observed-body > header h2 { font-size: 44px; }
  .statement-notes { grid-column: 1; margin-top: 45px; padding: 30px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .proof-intro, .observed-body > header { grid-template-columns: 1fr; gap: 24px; }
  .proof-intro .overline, .observed-body > header .overline { grid-column: 1; }
  .demo-toolbar { align-items: flex-start; flex-direction: column; gap: 16px; padding: 20px; }
  .demo-actions { width: 100%; }
  .lesion-toggle { flex: 1; justify-content: space-between; }
  .demo-workspace { grid-template-columns: 1fr; }
  .demo-workspace > div { min-height: 420px; padding: 28px 20px; border-right: 0; border-bottom: 1px solid var(--line); }
  .heldout-result { grid-column: 1; }
  .core-visual { width: 245px; }
  .core-readout { grid-template-columns: 1fr; }
  .core-readout > div { display: flex; justify-content: space-between; align-items: center; border-right: 0; border-bottom: 1px solid var(--line); }
  .core-readout > div:last-child { border-bottom: 0; }
  .core-readout dd { margin-top: 0; }
  .phase-narration { grid-template-columns: 1fr; gap: 10px; padding: 22px 20px; }
  .phase-narration p { grid-column: 1; }
  .demo-timeline { grid-template-columns: 1fr; padding: 18px 20px; }
  .demo-timeline li { min-height: 42px; }
  .demo-timeline li::after { top: 27px; bottom: -15px; left: 3px; right: auto; width: 1px; height: auto; }
  .validation-strip { grid-template-columns: 1fr; }
  .validation-strip > div { min-height: 105px; border-right: 0; border-bottom: 1px solid var(--line); }
  .validation-strip > div:nth-child(2) { border-right: 0; }
  .demo-disclosure { grid-template-columns: 1fr; gap: 12px; }
  .demo-disclosure p + span { margin-top: 20px; }
  .capability-lines article { grid-template-columns: 36px 1fr; padding: 24px 0; }
  .capability-lines article p { grid-column: 2; }
  .capability-lines article:hover { padding: 24px 8px; }
  .domains-strip { align-items: flex-start; flex-direction: column; }
  .domains-strip i { width: 1px; min-height: 20px; flex: auto; margin-left: 4px; background: linear-gradient(var(--line-strong), transparent); }
  .frontier { grid-template-columns: 1fr; }
  .frontier-graph { min-height: 500px; }
  .frontier-copy { padding: 75px 22px 90px; }
  .rail-label.light { margin-bottom: 55px; }
  .frontier-copy h2 { font-size: 43px; }
  .brief { grid-template-columns: 1fr; padding: 90px 0; }
  .brief-index { margin-bottom: 35px; }
  .brief h2 { font-size: 43px; }
  .brief-downloads { grid-column: 1; }
  .contact { min-height: 650px; padding: 90px 0; }
  .contact h2 { font-size: 44px; }
  .contact-orbit { right: -210px; opacity: .3; }
  footer { min-height: 160px; align-items: flex-start; justify-content: center; flex-direction: column; gap: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}