/* Homepage compositions. Tokens, controls and motion states are shared with ZCaps. */
.zh-page .zh-hero { border-bottom:1px solid var(--line); background:linear-gradient(130deg,rgba(45,125,255,.04),transparent 65%); }
.zh-hero-grid { display:grid; grid-template-columns:1.15fr 1fr; gap:70px; align-items:center; padding:90px 0 85px; }
.zh-page h1 { font-size:clamp(40px,4.7vw,66px); line-height:1.07; letter-spacing:-.035em; }
.zh-hero .lead { max-width:540px; margin-top:26px; }
.zh-hero .actions { margin-top:32px; }
.zh-heading { max-width:800px; margin-bottom:42px; }
.zh-heading h2 { font-size:clamp(32px,3.65vw,48px); }
.zh-heading .copy { max-width:680px; line-height:1.75; }
.zh-system { padding:28px; }
.zh-research-core { display:flex; align-items:center; justify-content:center; gap:18px; width:230px; max-width:100%; margin:52px auto 0; padding:22px; border:1px solid #365464; background:var(--panel-2); border-radius:6px; }
.zh-core-symbol { width:48px; height:48px; flex:none; object-fit:contain; display:block; }
.zh-research-core strong { display:block; font-size:15px; letter-spacing:.16em; }
.zh-research-core div>span { color:var(--muted); font-size:12px; }
.zh-connector { display:block; width:100%; height:65px; overflow:visible; }
.zh-connector path { fill:none; stroke:#344556; stroke-width:1.5; }
.zh-connector .zh-signal { stroke:var(--cyan); stroke-opacity:.65; }
.zh-hero-routes { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.zh-route { text-align:center; }
.zh-route>span { display:flex; justify-content:center; align-items:center; min-height:54px; color:var(--muted); font-size:12px; line-height:1.4; }
.zh-route>strong { display:block; padding:13px 4px; font-size:14px; font-weight:550; border:1px solid #344556; background:var(--panel-2); border-radius:4px; }
.zh-packets { display:flex; gap:3px; align-items:center; justify-content:center; height:42px; }
.zh-packets i { display:block; width:8px; height:12px; background:var(--cyan); opacity:.65; }
.zh-route:nth-child(2) .zh-packets i { border-radius:50%; width:10px; height:10px; }
.zh-route:nth-child(4) .zh-packets i { height:15px; width:15px; background:transparent; border:1px solid var(--cyan); }
.zh-system figcaption,.zh-compression figcaption,.zh-boundary figcaption,.zh-external figcaption { color:var(--muted); font-size:12px; line-height:1.65; margin-top:28px; border-top:1px solid var(--line); padding-top:18px; }
.zh-system figcaption { text-align:center; margin-top:35px; }
.zh-backbone { display:flex; justify-content:space-between; gap:20px; padding:18px 24px; border:1px solid #314656; border-radius:6px 6px 0 0; font-size:12px; letter-spacing:.08em; }
.zh-backbone span:first-child { color:var(--cyan); font-weight:600; }
.zh-backbone span:last-child { color:var(--muted); letter-spacing:0; }
.zh-branches { display:grid; grid-template-columns:repeat(4,1fr); }
.zh-branch { position:relative; padding:32px 26px 26px; border:1px solid var(--line); border-top:0; background:var(--panel); display:flex; flex-direction:column; transition:background .2s,border-color .2s; }
.zh-branch+.zh-branch { border-left:0; }
.zh-branch::before { content:''; position:absolute; width:1px; height:20px; top:0; left:26px; background:var(--cyan); opacity:.65; }
.zh-branch-number { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); margin-bottom:26px; }
.zh-branch h3 { font-size:26px; margin-bottom:14px; }
.zh-branch p { color:var(--muted); font-size:14px; line-height:1.65; flex:1; }
.zh-branch-action { color:#bfcfda; font-size:12px; margin-top:22px; }
.zh-branch-action span { float:right; color:var(--cyan); }
.zh-branch:hover,.zh-branch:focus-visible,.zh-branch.is-active { background:#111d27; border-color:#365464; }
.zh-product-nav { position:sticky; top:76px; z-index:12; border-bottom:1px solid var(--line); background:rgba(7,9,12,.97); }
.zh-product-nav>.container { display:grid; grid-template-columns:1fr repeat(4,1fr); align-items:stretch; }
.zh-nav-core { align-self:center; font-size:12px; letter-spacing:.08em; font-weight:650; }
.zh-nav-core small { display:block; font-weight:400; font-size:10px; color:var(--muted); }
.zh-product-nav a { padding:18px 16px; color:var(--muted); border-bottom:2px solid transparent; font-size:13px; display:flex; justify-content:space-between; align-items:center; gap:8px; }
.zh-current-marker { visibility:hidden; font-size:10px; font-weight:400; }
.zh-product-nav a.is-active { color:var(--cyan); border-bottom-color:var(--cyan); }
.zh-product-nav a.is-active .zh-current-marker { visibility:visible; }
.zh-page section.zh-product-section[id] { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding:85px 0; align-items:center; border-bottom:1px solid var(--line); scroll-margin-top:164px; }
.zh-product-section:nth-of-type(even) .zh-product-copy { order:2; }
.zh-product-section h2 { font-size:clamp(30px,3.6vw,46px); }
.zh-product-section .lead { font-size:17px; max-width:500px; }
.zh-proof { margin:30px 0; }
.zh-proof>strong { display:block; font-size:48px; color:var(--cyan); line-height:1.1; font-weight:550; letter-spacing:-.04em; }
.zh-proof>span { display:block; font-size:13px; color:var(--muted); margin-top:10px; }
.zh-proof>strong.zh-proof-words { font-size:24px; letter-spacing:-.015em; }
.zh-small-link { display:inline-block; margin-top:20px; font-size:13px; color:var(--muted); }
.zh-compression { padding:28px; }
.zh-compression-row { display:flex; justify-content:space-between; align-items:center; gap:20px; margin:38px 0 18px; }
.zh-compression-row>span { color:var(--muted); font-size:12px; }
.zh-compression-row>strong { font-size:21px; letter-spacing:-.025em; font-weight:500; }
.zh-data-track { height:44px; border:1px solid #243240; padding:6px; border-radius:4px; background:#0a0f14; }
.zh-raw-blocks { display:grid; grid-template-columns:repeat(18,1fr); gap:4px; height:100%; }
.zh-raw-blocks i { background:#526676; border-radius:1px; }
.zh-compressed-blocks { height:100%; width:100%; background:var(--cyan); transform:scaleX(var(--retained)); transform-origin:left; border-radius:2px; }
.zh-engine-line { display:flex; justify-content:center; align-items:center; gap:24px; margin:26px 0 -10px; }
.zh-engine-line strong { padding:13px 32px; border:1px solid #365464; background:var(--panel-2); font-weight:500; font-size:17px; }
.zh-engine-line>span { color:var(--cyan); }
.zh-boundary { border-color:#375967; background:linear-gradient(135deg,rgba(71,213,255,.025),var(--panel)); }
.zh-boundary-flow { display:grid; grid-template-columns:1fr 32px 1.4fr 32px 1fr; align-items:center; margin:60px 0 42px; gap:0; }
.zh-flow-node { text-align:center; }
.zh-flow-node strong { display:block; font-size:14px; font-weight:500; }
.zh-product-node { border:1px solid #375967; padding:25px 8px; background:var(--panel-2); border-radius:5px; }
.zh-product-node strong { color:var(--cyan); font-size:24px; }
.zh-product-node>span { display:block; font-size:10px; color:var(--muted); margin-top:8px; }
.zh-flow-wire { height:1px; background:var(--cyan); position:relative; }
.zh-flow-wire::after { content:''; position:absolute; right:0; top:-3px; width:6px; height:6px; border-top:1px solid var(--cyan); border-right:1px solid var(--cyan); transform:rotate(45deg); }
.zh-user-icon { display:block; width:22px; height:22px; margin:0 auto 25px; border:1px solid #7b9bac; border-radius:50%; position:relative; }
.zh-user-icon::after { content:''; position:absolute; width:32px; height:13px; left:-6px; top:24px; border:1px solid #7b9bac; border-bottom:0; border-radius:14px 14px 0 0; }
.zh-data-icon { display:block; width:28px; height:30px; margin:0 auto 15px; border:1px solid #7b9bac; background:repeating-linear-gradient(0deg,transparent 0 8px,#526676 8px 9px); }
.zh-services { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.zh-services span { padding:12px 8px; text-align:center; color:var(--muted); font-size:12px; border:1px solid var(--line); border-radius:4px; }
.zh-metrics { display:grid; grid-template-columns:repeat(4,1fr); }
.zh-metric { padding:26px; border-left:1px solid var(--line); }
.zh-metric:first-child { padding-left:0; border:0; }
.zh-metric h3 { font-size:14px; font-weight:500; }
.zh-metric>strong { display:block; margin:30px 0 16px; font-size:clamp(34px,3.4vw,46px); color:var(--cyan); font-weight:550; letter-spacing:-.045em; line-height:1.15; }
.zh-metric:first-child>strong { font-size:32px; }
.zh-metric>strong>span { display:block; font-size:22px; margin:5px 0; color:var(--muted); }
.zh-metric small { font-size:20px; }
.zh-metric p { color:var(--muted); font-size:13px; line-height:1.6; min-height:43px; }
.zh-metric-link { display:flex; justify-content:space-between; gap:8px; font-size:12px; color:#b8c9d7; margin-top:26px; }
.zh-metric:hover h3,.zh-artifact:hover h3 { color:var(--cyan); }
.zh-control-comparison { align-items:stretch; }
.zh-control-comparison .zc-diagram { display:flex; flex-direction:column; }
.zh-control-comparison figcaption { margin-top:auto; }
.zh-control-comparison .zh-services { margin-bottom:28px; }
.zh-external-org { border:1px solid #526676; padding:22px; text-align:center; margin-top:44px; font-size:15px; }
.zh-external-wire { text-align:center; color:var(--muted); margin:17px 0; }
.zh-external-services { border:1px dashed #526676; padding:24px; display:grid; gap:16px; text-align:center; color:var(--muted); font-size:14px; margin-bottom:35px; }
.zh-research-stages { display:grid; grid-template-columns:repeat(4,1fr); padding:0; margin:0 0 40px; list-style:none; }
.zh-research-stages li { position:relative; border-top:1px solid #375967; padding:20px 18px 10px 0; }
.zh-research-stages li+li { padding-left:25px; }
.zh-research-stages li:not(:last-child)::after { content:'→'; position:absolute; right:0; top:-15px; background:var(--bg); color:var(--cyan); }
.zh-research-stages li>span { display:block; font-size:11px; color:var(--muted); margin-bottom:12px; }
.zh-research-stages strong { font-size:16px; font-weight:500; }
.zh-artifacts { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.zh-artifact { display:block; padding:24px 20px; border:1px solid var(--line); border-radius:5px; background:var(--panel); }
.zh-artifact-index { display:flex; justify-content:space-between; gap:10px; font-size:10px; letter-spacing:.04em; color:var(--muted); margin-bottom:38px; }
.zh-artifact-index>span { color:var(--cyan); font-size:15px; }
.zh-artifact h3 { font-size:18px; }
.zh-artifact p { font-size:13px; color:var(--muted); line-height:1.65; min-height:65px; }
.zh-artifact-rule { display:block; width:60px; height:4px; margin-top:30px; background:var(--cyan); opacity:.6; transform-origin:left; }
.zh-page .zh-final { border-bottom:0; padding-top:100px; padding-bottom:100px; }
.zh-final h2 { font-size:clamp(34px,4.5vw,60px); max-width:950px; }
.zh-final h2>span { color:var(--cyan); }
.zh-final .lead { max-width:710px; margin:28px 0 0; }
@media (prefers-reduced-motion:no-preference) {
 .zc-motion-ready.zc-visible .zh-signal { animation:zh-draw 7s ease both infinite; }
 .zc-motion-ready.zc-visible .zh-packets i { animation:zh-packet 7s calc(var(--i)*250ms) both infinite; }
 .zc-motion-ready.zc-visible .zh-route>strong { animation:zh-highlight 7s calc(var(--i)*250ms) both infinite; }
 .zc-motion-ready.zc-visible .zh-branch { animation:zh-reveal 7s calc(var(--i)*120ms) both infinite; }
 .zc-motion-ready.zc-visible .zh-compressed-blocks { animation:zh-compress 7s .2s both infinite; }
 .zc-motion-ready.zc-visible .zh-flow-wire { animation:zh-wire 7s .2s both infinite; transform-origin:left; }
 .zc-motion-ready.zc-visible .zh-external-org { animation:zh-reveal 7s both infinite; }
 .zc-motion-ready.zc-visible .zh-external-wire { animation:zh-reveal 7s .3s both infinite; }
 .zc-motion-ready.zc-visible .zh-external-services { animation:zh-reveal 7s .6s both infinite; }
 .zc-motion-ready.zc-visible .zh-services span { animation:zh-highlight 7s calc(var(--i)*150ms) both infinite; }
 .zc-motion-ready.zc-visible .zh-metric { animation:zh-reveal 7s calc(var(--i)*130ms) both infinite; }
 .zc-motion-ready.zc-visible.zh-research-stages li { animation:zh-reveal 7s calc(var(--i)*180ms) both infinite; }
 .zc-motion-ready.zc-visible .zh-artifact-rule { animation:zh-wire 7s calc(var(--i)*140ms) both infinite; }
}
@keyframes zh-draw { 0%, 10% { stroke-dasharray:600; stroke-dashoffset:600; } 40%, 85% { stroke-dasharray:600; stroke-dashoffset:0; } 100% { stroke-dasharray:600; stroke-dashoffset:600; } }
@keyframes zh-packet { 0%, 10% { transform:translateY(-14px); opacity:.2; } 31% { transform:translateY(9px); opacity:1; } 40%, 85% { transform:none; opacity:.65; } 100% { transform:translateY(-14px); opacity:.2; } }
@keyframes zh-highlight { 0%, 10% { border-color:var(--line); } 28% { border-color:var(--cyan); color:var(--cyan); } 40%, 85% { border-color:#344556; } 100% { border-color:var(--line); } }
@keyframes zh-reveal { 0%, 10% { opacity:.4; transform:translateY(10px); } 40%, 85% { opacity:1; transform:none; } 100% { opacity:.4; transform:translateY(10px); } }
@keyframes zh-compress { 0%, 10% { transform:scaleX(1); background:#526676; } 40%, 85% { transform:scaleX(var(--retained)); background:var(--cyan); } 100% { transform:scaleX(1); background:#526676; } }
@keyframes zh-wire { 0%, 10% { transform:scaleX(0); } 40%, 85% { transform:scaleX(1); } 100% { transform:scaleX(0); } }
@media(max-width:1100px) {
 .zh-hero-grid { gap:34px; }
 .zh-page h1 { font-size:clamp(40px,4.8vw,56px); }
 .zh-hero-routes { gap:8px; }
 .zh-route>span { font-size:11px; }
 .zh-system { padding:22px; }
 .zh-page section.zh-product-section[id] { gap:45px; }
 .zh-metrics,.zh-artifacts { grid-template-columns:repeat(2,1fr); gap:25px; }
 .zh-metric { border-top:1px solid var(--line); border-left:0; padding:25px 0; }
 .zh-metric:first-child { border-top:1px solid var(--line); }
 .zh-metric>strong { min-height:80px; }
 .zh-metric:first-child>strong { font-size:36px; }
 .zh-metric>strong>span { display:inline; }
 .zh-branch { padding:30px 20px 24px; }
 .zh-branch h3 { font-size:24px; }
 .zh-product-nav a { padding-left:12px; padding-right:12px; }
}
@media(max-width:760px) {
 .zh-hero-grid { grid-template-columns:1fr; padding:50px 0 42px; gap:42px; }
 .zh-page h1 { font-size:clamp(38px,7.5vw,54px); max-width:670px; }
 .zh-hero .lead { max-width:630px; }
 .zh-system { width:100%; max-width:580px; margin:auto; }
 .zh-research-core { margin-top:32px; }
 .zh-hero-routes { grid-template-columns:1fr; gap:0; border-left:1px solid #365464; margin:0 0 0 18px; padding:8px 0 0; }
 .zh-route { display:grid; grid-template-columns:1.5fr 45px 1fr; align-items:center; gap:10px; padding:14px 0 14px 18px; position:relative; }
 .zh-route::before { content:''; position:absolute; left:0; top:50%; width:12px; border-top:1px solid #365464; }
 .zh-route>span { justify-content:start; min-height:0; text-align:left; font-size:13px; }
 .zh-route>strong { font-size:15px; }
 .zh-packets { height:20px; gap:3px; }
 .zh-packets i { width:7px; height:10px; }
 .zh-route:nth-child(4) .zh-packets i { width:10px; height:10px; }
 .zh-system .zh-connector { display:none; }
 .zh-research-core { width:100%; margin-bottom:0; }
 .zh-system figcaption { margin-top:25px; }
 .zh-backbone { flex-direction:column; gap:6px; }
 .zh-branches { grid-template-columns:1fr 1fr; }
 .zh-branch { border-bottom:1px solid var(--line); }
 .zh-branch:nth-child(3) { border-left:1px solid var(--line); }
 .zh-nav-core { display:none; }
 .zh-product-nav>.container { grid-template-columns:repeat(4,1fr); }
 .zh-product-nav a { flex-direction:column; padding:12px 5px 8px; gap:3px; font-size:13px; }
 .zh-current-marker { font-size:9px; }
 .zh-page section.zh-product-section[id] { grid-template-columns:1fr; gap:32px; padding-top:58px; padding-bottom:58px; }
 .zh-product-section:nth-of-type(even) .zh-product-copy { order:0; }
 .zh-product-section .lead { max-width:650px; }
 .zh-proof { margin:24px 0; }
 .zh-proof>strong { font-size:40px; }
 .zh-control-comparison { gap:24px; }
 .zh-boundary-flow { margin-top:40px; margin-bottom:30px; }
 .zh-metric p { min-height:62px; }
 .zh-research-stages { grid-template-columns:1fr; margin-bottom:30px; }
 .zh-research-stages li,.zh-research-stages li+li { border-top:0; border-left:1px solid #375967; margin-left:8px; padding:12px 0 26px 24px; display:flex; gap:22px; align-items:center; }
 .zh-research-stages li>span { margin:0; }
 .zh-research-stages li:not(:last-child)::after { content:'↓'; left:-6px; right:auto; top:auto; bottom:0; }
 .zh-artifact { padding:22px; }
 .zh-artifact-index { margin-bottom:26px; }
 .zh-page .zh-final { padding-top:65px; padding-bottom:65px; }
 .zh-compression-row>strong { font-size:20px; }
 .zh-compression-row { gap:12px; }
 .zh-compression { padding:22px; }
}
@media(max-width:430px) {
 .zh-branches { grid-template-columns:1fr; }
 .zh-branch+.zh-branch { border-left:1px solid var(--line); }
 .zh-branch { padding:26px 24px; }
 .zh-branch-number { margin-bottom:18px; }
 .zh-branch-action { margin-top:12px; }
 .zh-metrics,.zh-artifacts { grid-template-columns:1fr; gap:0; }
 .zh-metric>strong,.zh-metric:first-child>strong { font-size:44px; min-height:0; margin:22px 0 14px; }
 .zh-metric:first-child>strong { font-size:36px; }
 .zh-metric p { min-height:0; }
 .zh-metric-link { margin-top:20px; }
 .zh-artifact+.zh-artifact { margin-top:16px; }
 .zh-artifact p { min-height:0; }
 .zh-boundary-flow { grid-template-columns:1fr 22px 1.4fr 22px 1fr; }
 .zh-product-node { padding:22px 5px; }
 .zh-product-node strong { font-size:20px; }
 .zh-product-node>span { font-size:10px; }
 .zh-compression-row { align-items:start; flex-direction:column; gap:8px; }
 .zh-route { gap:6px; grid-template-columns:1.3fr 35px 1fr; }
 .zh-route>span { font-size:12px; }
 .zh-system .zc-figure-top { font-size:9px; }
}
@media(prefers-reduced-motion:reduce) { .zh-product-nav a,.zh-branch { transition:none; } }