.top{position:fixed; top:env(safe-area-inset-top,0px); left:0; right:0; padding:22px 5vw; z-index:20; mix-blend-mode:difference;}
.top a{font-size:13px; text-decoration:none; opacity:.8;}
.top a:hover{opacity:1;}
.wrap{max-width:760px; margin:0 auto; padding:0 6vw;}

.hero{min-height:70svh; display:flex; flex-direction:column; justify-content:center; padding:0 6vw;}
.hero .eyebrow{color:var(--ink-dim); font-size:13px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px;}
.hero h1{font-size:clamp(2.2rem,6vw,4rem); line-height:1.05; font-weight:600; letter-spacing:-0.02em; max-width:660px;}
.hero .sub{margin-top:22px; color:var(--ink-dim); font-size:clamp(15px,1.8vw,18px); max-width:540px; line-height:1.6;}
.hero .tag-row{margin-top:26px;}

section{padding:min(10vh,90px) 6vw;}
section h2{font-size:clamp(1.4rem,3vw,2rem); font-weight:600; margin-bottom:22px; letter-spacing:-0.01em;}
section .sub-label{color:var(--accent); font-size:12px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:14px;}
section p{color:var(--ink-dim); font-size:clamp(15px,1.6vw,17px); line-height:1.7; max-width:660px;}
section p + p{margin-top:16px;}

.callout{border-left:2px solid var(--accent); padding:18px 24px; margin-top:24px; max-width:660px; background:rgba(215,255,63,0.04);}
.callout p{color:var(--ink); font-size:15px;}

.note{border-left:2px solid var(--accent); padding:16px 22px; margin-top:24px; max-width:660px; background:rgba(215,255,63,0.04); font-size:14px; color:var(--ink);}

.tier{border-left:2px solid var(--line); padding:6px 0 6px 22px; margin-top:18px;}
.tier.active{border-left-color:var(--accent);}
.tier h4{font-size:15px; font-weight:600; margin-bottom:4px;}
.tier p{font-size:14px; color:var(--ink-dim); max-width:600px;}

.dash-btn:focus-visible, .top a:focus-visible, footer a:focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}

.shots{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:26px;}
.shots.single{grid-template-columns:1fr;}
@media (max-width:640px){.shots{grid-template-columns:1fr;}}
.shots figure{border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--bg2);}
.shots img{display:block; width:100%; height:auto;}
.shots svg{display:block; width:100%; height:auto; padding:28px 20px; box-sizing:border-box;}
.shots figcaption{padding:10px 14px; font-size:12px; color:var(--ink-dim); letter-spacing:.03em;}

/* Text-beside-diagram layout for the pipeline/classifier sections —
   text column stays narrow for readability, diagram gets the rest of
   the width so it stays legible instead of being squeezed 50/50. */
.split{display:grid; grid-template-columns:minmax(260px,380px) 1fr; gap:44px; align-items:start; max-width:1200px;}
.split .shots{margin-top:0;}
@media (max-width:860px){.split{grid-template-columns:1fr; gap:28px;}}

footer{padding:60px 6vw calc(60px + env(safe-area-inset-bottom,0px)); text-align:center;}
footer a{text-decoration:none; color:var(--ink-dim); font-size:13px;}
footer a:hover{color:var(--ink);}