/* =========================================================================
   YSRA — inner page styles (how-it-works, platform, changelog)
   ========================================================================= */

/* ---- page hero ---- */
.page-hero{padding-top:clamp(8rem,16vh,12rem);padding-bottom:clamp(3rem,6vw,5rem);position:relative;overflow:hidden}
.page-hero .orb{position:absolute;border-radius:50%;filter:blur(70px);opacity:.45;pointer-events:none}
.page-hero .orb-a{width:38vw;height:38vw;top:-12vw;right:-6vw;background:radial-gradient(circle,var(--accent-glow),transparent 68%)}
.page-hero-inner{position:relative;z-index:2;max-width:60rem}
.page-hero h1{margin:1.3rem 0 1.4rem;font-size:clamp(2.6rem,6vw,5rem)}
.page-hero .lead{max-width:52ch}
.page-hero .row{margin-top:2.2rem}

/* ---- big numbered step rows ---- */
.steps{display:flex;flex-direction:column;gap:clamp(2.5rem,5vw,4.5rem)}
.step-row{display:grid;grid-template-columns:auto 1.05fr .95fr;gap:clamp(1.5rem,3vw,3rem);align-items:center;padding-bottom:clamp(2.5rem,5vw,4.5rem);border-bottom:1px solid var(--line)}
.step-row:last-child{border-bottom:none}
.step-num{font-family:'JetBrains Mono',monospace;font-size:.8rem;letter-spacing:.2em;color:var(--accent);writing-mode:vertical-rl;transform:rotate(180deg);align-self:start;padding-top:.3rem}
.step-main h3{font-size:clamp(1.5rem,2.6vw,2.05rem);line-height:1.16;margin-bottom:.9rem}
.step-main p{color:var(--text-soft);max-width:42ch}
.step-main .chips{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.3rem}
.step-visual{aspect-ratio:4/3;border-radius:16px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);position:relative;overflow:hidden}

/* mini visual primitives inside step-visual */
.viz{position:absolute;inset:0;display:grid;place-items:center}
.viz-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;width:78%}
.viz-grid span{height:34px;border-radius:7px;background:var(--panel);border:1px solid var(--line)}
.viz-grid span.on{background:var(--accent);border-color:var(--accent)}
.viz-lanes{display:flex;gap:.7rem;width:80%;height:62%}
.viz-lanes .lane{flex:1;border-radius:9px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;gap:.35rem;padding:.5rem}
.viz-lanes .lane i{height:7px;border-radius:4px;background:var(--accent);opacity:.5;display:block}
.viz-lanes .lane i:nth-child(2){width:70%}.viz-lanes .lane i:nth-child(3){width:45%;opacity:.3}
.viz-venn{width:62%;height:70%}
.viz-venn svg{width:100%;height:100%}
.viz-venn .ring{fill:none;stroke:var(--ring);stroke-width:7}
.viz-venn .core{fill:var(--core)}
.viz-deploy{display:flex;flex-direction:column;align-items:center;gap:.8rem}
.viz-deploy .url{font-family:'JetBrains Mono',monospace;font-size:.85rem;color:var(--accent);border:1px solid var(--line-strong);border-radius:999px;padding:.4em 1em}
.viz-deploy .bar{width:70%;height:6px;border-radius:99px;background:var(--panel);overflow:hidden}
.viz-deploy .bar i{display:block;height:100%;width:100%;background:var(--accent);border-radius:99px}
.viz-check{font-size:2.4rem;color:var(--accent)}

/* ---- agent roster ---- */
.agent-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.agent-card{padding:1.8rem 1.6rem;display:flex;flex-direction:column;gap:.7rem;position:relative;overflow:hidden}
.agent-card .ag-id{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:.12em;color:var(--accent);display:flex;align-items:center;gap:.5em}
.agent-card h3{font-size:1.35rem}
.agent-card p{color:var(--text-soft);font-size:.93rem}
.agent-card .ag-glyph{position:absolute;right:-10px;bottom:-18px;font-size:5rem;line-height:1;color:var(--accent);opacity:.08}

/* ---- generic feature split ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.split.rev .split-media{order:-1}
.split-media{aspect-ratio:5/4;border-radius:18px;border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow-lg);overflow:hidden;position:relative}
.split h2{margin-bottom:1.2rem}
.split p{color:var(--text-soft);max-width:46ch}
.split ul{list-style:none;margin-top:1.6rem;display:flex;flex-direction:column;gap:.9rem}
.split li{display:flex;gap:.8rem;align-items:flex-start;color:var(--text-soft)}
.split li::before{content:"";width:18px;height:18px;border-radius:50%;border:1.5px solid var(--accent);flex:none;margin-top:3px;background:radial-gradient(circle at center,var(--accent) 0 5px,transparent 6px)}

/* ---- platform capability blocks ---- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.feat{padding:1.9rem 1.6rem;display:flex;flex-direction:column;gap:.7rem}
.feat .fi{font-size:1.7rem;color:var(--accent);line-height:1}
.feat h3{font-size:1.3rem}
.feat p{color:var(--text-soft);font-size:.93rem}

/* ---- architecture diagram ---- */
.arch{position:relative;border:1px solid var(--line);border-radius:20px;background:var(--surface);padding:clamp(2rem,4vw,3.5rem);overflow:hidden}
.arch-row{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;margin-block:1.2rem}
.arch-node{font-family:'JetBrains Mono',monospace;font-size:.82rem;padding:.7em 1.1em;border-radius:12px;border:1px solid var(--line-strong);background:var(--bg);color:var(--text)}
.arch-node.accent{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.arch-pipe{width:1px;height:28px;background:var(--line-strong);margin:0 auto}
.arch-label{text-align:center;font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}

/* ---- changelog ---- */
.log-list{display:flex;flex-direction:column;gap:0}
.log-entry{display:grid;grid-template-columns:200px 1fr;gap:2.5rem;padding-block:clamp(2rem,4vw,3rem);border-top:1px solid var(--line)}
.log-entry:first-child{border-top:none}
.log-meta{display:flex;flex-direction:column;gap:.7rem}
.log-ver{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:1.7rem;letter-spacing:-.02em;color:var(--accent)}
.log-date{font-family:'JetBrains Mono',monospace;font-size:.78rem;color:var(--muted)}
.log-tag{align-self:start;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;padding:.3em .7em;border-radius:999px;border:1px solid var(--line-strong);color:var(--text-soft)}
.log-tag.feature{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.log-tag.fix{color:var(--signal);border-color:color-mix(in srgb,var(--signal) 40%,transparent)}
.log-body h3{font-size:1.5rem;margin-bottom:.8rem}
.log-body p{color:var(--text-soft);max-width:60ch;margin-bottom:1rem}
.log-body ul{list-style:none;display:flex;flex-direction:column;gap:.55rem}
.log-body li{display:flex;gap:.7rem;color:var(--text-soft);font-size:.95rem}
.log-body li::before{content:"—";color:var(--accent)}

/* ---- big quote / band ---- */
.band{background:var(--text);color:var(--bg);padding-block:clamp(5rem,10vw,8rem);position:relative;overflow:hidden}
[data-theme="dark"] .band{background:#000}
.band .eyebrow{color:color-mix(in srgb,var(--bg) 60%,transparent)}
.band .eyebrow::before{background:var(--accent-2)}
.band h2{font-size:clamp(2rem,4.4vw,3.6rem)}
.band .grad-text{background:linear-gradient(100deg,var(--accent-2),#9ad9cc);-webkit-background-clip:text;background-clip:text;color:transparent}

/* responsive */
@media (max-width:900px){
  .step-row{grid-template-columns:auto 1fr}
  .step-visual{grid-column:2;margin-top:1rem}
  .step-num{writing-mode:horizontal-tb;transform:none}
  .agent-grid{grid-template-columns:1fr 1fr}
  .feat-grid{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:2rem}
  .split.rev .split-media{order:0}
  .log-entry{grid-template-columns:1fr;gap:1rem}
}
@media (max-width:560px){
  .agent-grid,.feat-grid{grid-template-columns:1fr}
  .step-row{grid-template-columns:1fr}
  .step-num{margin-bottom:.5rem}
  .step-visual{grid-column:1}
}