/* ZCaps product and genomics pages. Shared Zetako tokens and components stay in main.css. */
.zc-page { background: var(--bg); }
.zc-page main { overflow: clip; }
.zc-page .zc-hero { border-bottom: 1px solid var(--line); background: linear-gradient(135deg, rgba(45,125,255,.045), transparent 65%); }
.zc-hero-grid { display:grid; grid-template-columns: 1.18fr 1fr; gap:64px; align-items:center; padding-top:88px; padding-bottom:74px; }
.zc-page h1 { font-size:clamp(38px,4.45vw,62px); line-height:1.06; letter-spacing:-.035em; max-width:740px; }
.zc-page h2 { letter-spacing:-.025em; line-height:1.12; }
.zc-page .lead { line-height:1.6; }
.zc-page .hero-support { font-size:15px; max-width:580px; }
.zc-page .actions { gap:10px; }
.zc-text-link { display:inline-block; color:var(--muted); font-size:13px; margin-top:22px; }
.zc-text-link span { margin-left:12px; color:var(--cyan); }
.zc-page a:hover { color:var(--cyan); }
.zc-page .button.primary:hover { color:var(--bg); }
.zc-page :focus-visible { outline:2px solid var(--cyan); outline-offset:5px; }
.zc-skip { position:fixed; top:-100px; left:16px; z-index:100; background:var(--panel); padding:12px 20px; }
.zc-skip:focus { top:12px; }
.zc-hero-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; padding:24px 0; border-top:1px solid var(--line); font-size:11px; font-weight:650; letter-spacing:.13em; color:var(--muted); }
.zc-page .zc-section { padding-top:90px; padding-bottom:90px; border-bottom:1px solid var(--line); }
.zc-page .zc-pillars { padding-top:48px; padding-bottom:42px; }
.zc-section-head { max-width:800px; margin-bottom:38px; }
.zc-section-head .copy { max-width:730px; line-height:1.75; }
.zc-section-head .eyebrow { margin-bottom:18px; }
.zc-cards { gap:28px; }
.zc-card { padding-top:24px; border-top:1px solid var(--line); min-width:0; }
.zc-card h3 { font-size:18px; line-height:1.3; }
.zc-card p { font-size:15px; color:var(--muted); line-height:1.7; margin:0; }
.zc-card p strong { display:block; font-weight:500; color:#c5d0dc; margin-bottom:12px; }
.zc-pillars .zc-card { border:0; padding:0; }
.zc-pillars h3 { color:var(--cyan); text-transform:uppercase; letter-spacing:.1em; font-size:12px; margin-bottom:20px; }
.zc-signature { text-align:center; font-size:16px; margin:34px 0 0; color:#c5d0dc; }
.zc-diagram { margin:0; padding:28px; background:var(--panel); border:1px solid var(--line); border-radius:8px; min-width:0; }
.zc-figure-top { display:flex; justify-content:space-between; gap:12px; font-size:11px; font-weight:600; letter-spacing:.07em; color:var(--muted); }
.zc-figure-top span:last-child { color:var(--cyan); }
.zc-volume { padding:28px 25px 22px; }
.zc-volume-numbers { display:flex; align-items:center; gap:18px; white-space:nowrap; font-size:30px; letter-spacing:-.04em; margin:42px 0 14px; }
.zc-volume-numbers > span:first-child { color:var(--muted); }
.zc-volume-numbers > span:nth-child(2) { font-size:22px; color:var(--subtle); }
.zc-volume-numbers strong { color:var(--cyan); font-weight:600; }
.zc-volume-numbers small { font-size:13px; letter-spacing:0; }
.zc-volume svg { width:100%; display:block; overflow:visible; }
.zc-volume-grid { fill:none; stroke:var(--line); stroke-dasharray:3 6; }
.zc-volume-keep { fill:var(--cyan); transform:scaleX(.75025); transform-box:fill-box; transform-origin:left; }
.zc-volume-remove { fill:#344556; opacity:.12; transform:scaleX(.07); transform-box:fill-box; transform-origin:left; }
.zc-volume-scale { display:flex; justify-content:space-between; font-size:12px; color:var(--muted); }
.zc-volume figcaption { margin-top:30px; padding-top:18px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.zc-access-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.zc-access-grid svg { display:block; width:100%; margin-top:20px; }
.zc-chunk { fill:#18232e; stroke:#344556; }
.zc-stream-cell { fill:#556779; stroke:#6c8296; }
.zc-selected { fill:var(--cyan); stroke:var(--cyan); }
.zc-request { fill:none; stroke:var(--cyan); stroke-width:2; stroke-dasharray:4 5; }
.zc-decode-path { fill:none; stroke:var(--cyan); stroke-width:2; }
.zc-decoded { fill:var(--cyan); fill-opacity:.16; stroke:var(--cyan); }
.zc-access-grid figcaption strong,.zc-access-grid figcaption span { display:block; }
.zc-access-grid figcaption strong { font-size:19px; font-weight:550; margin:8px 0; }
.zc-access-grid figcaption span { font-size:14px; color:var(--muted); }
.zc-note { font-size:13px; line-height:1.7; color:var(--muted); margin:20px 0 0; }
.zc-note a { color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }
.zc-split { display:grid; grid-template-columns:1.08fr 1fr; gap:60px; align-items:center; }
.zc-server-input { text-align:center; font-size:14px; padding:16px; border:1px solid var(--line); margin:36px 30px 0; }
.zc-server-lanes { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.zc-lane { text-align:center; min-width:0; }
.zc-lane>span:not(.zc-lane-line) { display:block; color:var(--muted); font-size:12px; }
.zc-lane strong { display:block; border:1px solid rgba(71,213,255,.4); color:var(--cyan); border-radius:4px; padding:15px 0; margin:10px 0 5px; font-weight:500; font-size:15px; }
.zc-lane small { display:block; font-size:10px; color:var(--muted); }
.zc-lane-line { display:block; width:1px; height:36px; margin:0 auto; background:var(--cyan); opacity:.4; transform-origin:top; }
.zc-server-storage { text-align:center; border:1px solid var(--line); background:var(--panel-2); padding:18px; font-size:14px; }
.zc-kpi { font-size:clamp(44px,5vw,66px); font-weight:550; line-height:1.05; letter-spacing:-.05em; color:var(--cyan); margin-bottom:30px; }
.zc-kpi>span { display:block; font-size:15px; font-weight:400; color:var(--muted); letter-spacing:0; line-height:1.5; margin-top:10px; }
.zc-kpi small { font-size:22px; }
.zc-secondary-kpi { color:var(--text); font-size:28px; margin-bottom:24px; }
.zc-secondary-kpi span { font-size:14px; color:var(--muted); display:block; }
.zc-speed-table { font-size:12px; border-top:1px solid var(--line); }
.zc-speed-table>div { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.zc-speed-table>div:first-child { color:var(--muted); }
.zc-model { display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:24px; align-items:center; padding:38px; margin-bottom:38px; }
.zc-figure-label { display:block; color:var(--muted); font-size:11px; font-weight:600; letter-spacing:.1em; margin-bottom:20px; }
.zc-pattern code { display:block; color:var(--cyan); font-size:25px; letter-spacing:.17em; line-height:1.55; margin-bottom:18px; }
.zc-pattern>span:last-child,.zc-model-output>span:last-child { font-size:13px; color:var(--muted); }
.zc-flow-arrow { color:var(--cyan); font-size:25px; }
.zc-model-cells { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; width:170px; max-width:100%; margin-bottom:12px; }
.zc-model-cells i { aspect-ratio:1; border-radius:2px; background:var(--cyan); opacity:var(--strength); }
.zc-model-output>div { font-size:48px; color:var(--cyan); margin-bottom:20px; }
.zc-benchmark-layout { display:grid; grid-template-columns:1.55fr 1fr; gap:65px; }
.zc-benchmark-summary { padding-left:35px; border-left:1px solid var(--line); }
.zc-chart-axis { display:flex; justify-content:space-between; margin:0 95px 16px 114px; color:var(--muted); font-size:11px; }
.zc-bar-row { display:grid; grid-template-columns:104px minmax(0,1fr) 85px; align-items:center; gap:10px; min-height:47px; font-size:13px; }
.zc-bar-track { height:21px; border-left:1px solid #485563; background:linear-gradient(90deg,transparent 49.8%,var(--line) 50%,transparent 50.3%); }
.zc-bar { height:100%; display:block; background:#536575; transform:scaleX(var(--size)); transform-origin:left; }
.zc-bar-row>strong { text-align:right; white-space:nowrap; font-weight:500; font-variant-numeric:tabular-nums; }
.zc-bar-row small { font-size:10px; color:var(--muted); }
.zc-bar-featured { color:var(--cyan); }
.zc-bar-featured .zc-bar { background:var(--cyan); }
.zc-lifecycle { padding:0; margin:0; list-style:none; display:grid; grid-template-columns:repeat(6,1fr); border:1px solid var(--line); border-radius:6px; background:var(--panel); }
.zc-lifecycle li { position:relative; padding:24px; border-right:1px solid var(--line); }
.zc-lifecycle li:last-child { border:0; }
.zc-lifecycle li:not(:last-child)::after { content:'→'; position:absolute; top:50%; right:-8px; background:var(--panel); color:var(--cyan); z-index:1; }
.zc-lifecycle small { display:block; color:var(--muted); font-size:11px; margin-bottom:16px; }
.zc-lifecycle strong { font-size:14px; text-transform:uppercase; letter-spacing:.05em; font-weight:550; }
.zc-workloads { margin:25px 0 42px; font-size:14px; line-height:1.9; color:var(--muted); }
.zc-genomics-teaser { border:1px solid #284454; background:linear-gradient(120deg,rgba(71,213,255,.05),var(--panel)); padding:38px; border-radius:8px; }
.zc-teaser-kpi>span,.zc-teaser-kpi>small { display:block; font-size:13px; color:var(--muted); }
.zc-teaser-kpi>strong { display:block; font-size:clamp(28px,3.2vw,42px); font-weight:550; letter-spacing:-.04em; margin:14px 0 10px; color:var(--cyan); }
.zc-page .zc-final { padding-top:100px; padding-bottom:100px; border-bottom:0; }
.zc-final h2 { max-width:920px; font-size:clamp(32px,4.4vw,56px); }
.zc-final h2 span { color:var(--cyan); }
.zc-final .lead { margin-top:25px; }
.zc-gen-hero { grid-template-columns:1.1fr 1fr; gap:55px; }
.zc-gen-hero h1 { font-size:clamp(36px,4vw,56px); }
.zc-chromosomes { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:7px; margin:35px 0 28px; }
.zc-chromosomes span { display:flex; align-items:end; justify-content:center; height:42px; border:1px solid #344556; border-radius:8px; font-size:11px; color:var(--muted); padding-bottom:8px; background:var(--panel-2); }
.zc-chromosomes span:nth-child(21) { color:var(--cyan); border-color:var(--cyan); background:rgba(71,213,255,.1); }
.zc-range-label { font-size:12px; text-align:center; color:var(--muted); }
.zc-genome svg { width:100%; display:block; }
.zc-output-label { font-size:14px; text-align:center; color:var(--cyan); }
.zc-genome .zc-note { text-align:center; }
.zc-results { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.zc-result-card { border:1px solid var(--line); padding:28px; border-radius:6px; background:var(--panel); min-width:0; }
.zc-result-card:last-child { grid-column:1/-1; }
.zc-result-title { display:flex; justify-content:space-between; gap:15px; }
.zc-result-title p,.zc-result-title>span { font-size:13px; color:var(--muted); }
.zc-result-title>span { text-align:right; white-space:nowrap; }
.zc-result-title small { display:block; font-size:10px; }
.zc-result-ratio { color:var(--cyan); font-size:36px; letter-spacing:-.025em; margin:20px 0; }
.zc-result-ratio span { color:var(--muted); font-size:13px; letter-spacing:0; }
.zc-result-card summary { cursor:pointer; color:#c5d0dc; font-size:13px; padding:14px 0; border-top:1px solid var(--line); }
.zc-levels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-top:16px; }
.zc-level h4 { font-size:13px; margin:0 0 18px; color:var(--cyan); }
.zc-level dl { margin:0; }
.zc-level dl>div { margin-bottom:15px; }
.zc-level dt { color:var(--muted); font-size:10px; margin-bottom:5px; }
.zc-level dd { margin:0; font-size:13px; white-space:nowrap; }
.zc-campaign { display:grid; grid-template-columns:1.5fr 1fr; gap:60px; padding:42px 0 0; margin-top:20px; }
.zc-size-visual { display:grid; grid-template-columns:repeat(4,1fr); gap:25px; }
.zc-size-item { border-top:1px solid var(--line); padding-top:20px; }
.zc-size-item>span { display:block; color:var(--muted); font-size:13px; }
.zc-size-item>strong { display:block; font-size:25px; font-weight:500; margin:10px 0 20px; }
.zc-size-item small { font-size:13px; color:var(--muted); }
.zc-size-track { height:7px; background:var(--line); }
.zc-size-track i { display:block; height:100%; background:var(--cyan); transform:scaleX(var(--size)); transform-origin:left; }
.zc-scale-envelope { display:flex; align-items:center; gap:28px; margin:36px 0 0; border:1px solid var(--line); padding:25px; }
.zc-scale-envelope strong { font-size:30px; color:var(--cyan); white-space:nowrap; }
.zc-scale-envelope span { color:var(--muted); font-size:14px; }
/* A visible static end state is the default. JS enables finite entry animations only. */
@media (prefers-reduced-motion:no-preference) {
 .zc-motion-ready:not(.zc-visible) .zc-bar,.zc-motion-ready:not(.zc-visible) .zc-size-track i { transform:scaleX(0); }
 .zc-motion-ready.zc-visible .zc-bar,.zc-motion-ready.zc-visible .zc-size-track i { transition:transform 1s cubic-bezier(.2,.7,.2,1); transition-delay:calc(var(--i)*65ms); }
 .zc-motion-ready:not(.zc-visible) .zc-volume-remove,.zc-motion-ready:not(.zc-visible) .zc-volume-keep { opacity:1; transform:scaleX(1); }
 .zc-motion-ready.zc-visible .zc-volume-remove,.zc-motion-ready.zc-visible .zc-volume-keep { transition:transform 1.5s ease,opacity 1.5s ease; transition-delay:calc(var(--i)*65ms + 250ms); }
 .zc-motion-ready.zc-visible .zc-request { animation:zc-request 1.4s ease both; }
 .zc-motion-ready.zc-visible .zc-selected { animation:zc-select 1s 1s both; }
 .zc-motion-ready.zc-visible .zc-stream-cell { animation:zc-select 1.6s .5s both; }
 .zc-motion-ready.zc-visible .zc-decoded { animation:zc-output 1s 1.8s both; transform-origin:center; transform-box:fill-box; }
 .zc-motion-ready.zc-visible .zc-lane { animation:zc-lane 1.8s calc(var(--i)*.4s) both; }
 .zc-motion-ready.zc-visible .zc-model-cells i { animation:zc-adapt 2.8s calc(var(--i)*40ms) both; }
 .zc-motion-ready.zc-visible.zc-lifecycle li { animation:zc-step 1.5s calc(var(--i)*200ms) both; }
 .zc-motion-ready.zc-visible .zc-chromosomes span { animation:zc-step 1s calc(var(--i)*30ms) both; }
 .zc-motion-paused *, .zc-motion-paused { animation-play-state:paused !important; }
}
@keyframes zc-request { from { stroke-dasharray:350; stroke-dashoffset:350; } to { stroke-dasharray:350; stroke-dashoffset:0; } }
@keyframes zc-select { from { opacity:.25; } to { opacity:1; } }
@keyframes zc-output { from { opacity:0; transform:translateY(-30px) scaleX(.7); } to { opacity:1; transform:none; } }
@keyframes zc-lane { 0%,30% { opacity:.2; } 100% { opacity:1; } }
@keyframes zc-adapt { 0% { opacity:.15; transform:scaleY(.4); } 35% { opacity:.9; transform:scaleY(.8); } 70% { opacity:.25; transform:scaleY(.6); } 100% { opacity:var(--strength); transform:scaleY(1); } }
@keyframes zc-step { from { opacity:.4; } 65% { color:var(--cyan); } to { opacity:1; } }
@media (max-width:1000px) {
 .zc-hero-grid,.zc-gen-hero { gap:30px; grid-template-columns:1.1fr 1fr; }
 .zc-volume-numbers { gap:10px; font-size:25px; }
 .zc-page .zc-cards.four { grid-template-columns:repeat(2,1fr); }
 .zc-split { gap:30px; }
 .zc-benchmark-layout { gap:28px; }
 .zc-benchmark-summary { padding-left:25px; }
 .zc-model { gap:18px; padding:28px; }
 .zc-lifecycle li { padding:20px 14px; }
 .zc-levels { gap:10px; }
}
@media (max-width:760px) {
 .zc-hero-grid,.zc-gen-hero { grid-template-columns:1fr; gap:38px; padding-top:48px; padding-bottom:40px; }
 .zc-page h1 { max-width:650px; font-size:clamp(36px,7.5vw,52px); }
 .zc-hero-foot { display:grid; grid-template-columns:1fr 1fr; font-size:10px; }
 .zc-volume { width:100%; max-width:520px; margin:auto; }
 .zc-volume-numbers { justify-content:space-between; font-size:32px; margin-top:30px; }
 .zc-page .zc-section { padding-top:58px; padding-bottom:58px; }
 .zc-page .zc-pillars { padding-top:38px; padding-bottom:32px; }
 .zc-access-grid,.zc-split,.zc-benchmark-layout,.zc-campaign,.zc-results { grid-template-columns:1fr; gap:28px; }
 .zc-section-head { margin-bottom:28px; }
 .zc-page .zc-cards.three { grid-template-columns:1fr; }
 .zc-diagram { padding:22px; }
 .zc-access-grid figcaption strong { font-size:18px; }
 .zc-kpi-stack { padding-top:10px; }
 .zc-benchmark-summary { display:grid; grid-template-columns:1fr 1fr; gap:18px; border:0; padding:20px 0 0; }
 .zc-benchmark-summary>.copy,.zc-benchmark-summary>.zc-note { grid-column:1/-1; margin:0; }
 .zc-kpi { font-size:48px; }
 .zc-kpi small { font-size:18px; }
 .zc-model { grid-template-columns:1fr; text-align:center; gap:22px; }
 .zc-model-cells { margin-left:auto; margin-right:auto; }
 .zc-flow-arrow { transform:rotate(90deg); }
 .zc-model .zc-figure-label { margin-bottom:14px; }
 .zc-pattern code { font-size:23px; }
 .zc-pattern>span:last-child { display:none; }
 .zc-lifecycle { grid-template-columns:1fr 1fr; }
 .zc-lifecycle li { border-bottom:1px solid var(--line); padding:22px; }
 .zc-lifecycle li:nth-child(2n) { border-right:0; }
 .zc-lifecycle li:nth-last-child(-n+2) { border-bottom:0; }
 .zc-lifecycle li:nth-child(2n)::after { content:'↓'; right:16px; top:auto; bottom:-13px; }
 .zc-lifecycle li:last-child::after { display:none; }
 .zc-lifecycle small { margin-bottom:8px; }
 .zc-genomics-teaser { padding:26px; }
 .zc-genomics-teaser .grid { grid-template-columns:1fr; gap:14px; }
 .zc-teaser-kpi { border-bottom:1px solid var(--line); padding-bottom:22px; }
 .zc-teaser-kpi strong { font-size:38px; }
 .zc-chromosomes span { font-size:11px; }
 .zc-result-card { padding:24px; }
 .zc-result-card:last-child { grid-column:auto; }
 .zc-size-visual { grid-template-columns:1fr 1fr; }
 .zc-scale-envelope { align-items:start; flex-direction:column; gap:10px; }
}
@media (max-width:420px) {
 .zc-page .zc-cards.four { grid-template-columns:1fr; }
 .zc-pillars .zc-card { padding-top:20px; border-top:1px solid var(--line); }
 .zc-volume-numbers { font-size:27px; }
 .zc-volume-numbers small { font-size:11px; }
 .zc-figure-top { font-size:10px; }
 .zc-bar-row { grid-template-columns:86px minmax(0,1fr) 76px; gap:8px; font-size:12px; }
 .zc-chart-axis { margin-left:94px; margin-right:84px; }
 .zc-kpi { font-size:38px; }
 .zc-lane strong { font-size:12px; }
 .zc-server-lanes { gap:8px; }
 .zc-result-card { padding:20px; }
 .zc-levels { grid-template-columns:1fr; }
 .zc-level { border-top:1px solid var(--line); padding-top:16px; }
 .zc-level h4 { margin-bottom:10px; }
 .zc-level dl>div { display:flex; justify-content:space-between; gap:8px; margin-bottom:10px; }
 .zc-level dt { font-size:12px; }
}
@media (prefers-reduced-motion:reduce) { .zc-page { scroll-behavior:auto; } html:has(.zc-page) { scroll-behavior:auto; } .zc-page *, .zc-page *::before, .zc-page *::after { animation:none !important; transition:none !important; } }

.zc-request-label { font-size:12px; color:var(--muted); text-align:right; margin:24px 0 -25px; }
.zc-page section[id] { scroll-margin-top:96px; }
@media(max-width:760px) {
 .zc-lifecycle { grid-template-columns:1fr; }
 .zc-lifecycle li { display:flex; align-items:center; gap:20px; border-right:0; border-bottom:1px solid var(--line); }
 .zc-lifecycle small { margin:0; }
 .zc-lifecycle li:nth-last-child(2) { border-bottom:1px solid var(--line); }
 .zc-lifecycle li:not(:last-child)::after { content:'↓'; right:24px; top:auto; bottom:-13px; }
}