/* SIMUL8OR CONTENT PAGE LAYER — sits on s8-tokens.css + s8-ui.css.
   Scope: the CONTENT AREA of a marketing/docs page (header + footer are owned
   elsewhere). Everything here is page rhythm; nothing redefines a token. */
.s8c{--s8c-w:1180px;--s8c-measure:680px;--s8c-fs-hero:clamp(34px,4.6vw,58px);--s8c-gap:clamp(56px,7vw,104px);background:var(--s8-bg);color:var(--s8-fg);font-family:var(--s8-sans);font-size:var(--s8-fs-base);line-height:var(--s8-lh);-webkit-font-smoothing:antialiased}
.s8c *{box-sizing:border-box}
.s8c a{color:var(--s8-accent-fg);text-decoration:none}
.s8c a:hover{color:#fff}
.s8c-wrap{max-width:var(--s8c-w);margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.s8c-sec{padding-top:var(--s8c-gap)}
.s8c-sec--band{margin-top:var(--s8c-gap);padding-top:var(--s8c-gap);padding-bottom:var(--s8c-gap);background:var(--s8-panel);border-top:1px solid var(--s8-line);border-bottom:1px solid var(--s8-line)}
.s8c-sec--band .s8c-sec{padding-top:0}

/* ── section headers ─────────────────────────────────── */
.s8c-eyebrow{display:inline-flex;align-items:center;gap:7px;font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-accent-fg)}
.s8c-eyebrow::before{content:"";width:16px;height:1px;background:var(--s8-accent-line)}
.s8c-h2{font-size:var(--s8-fs-3xl);line-height:1.15;letter-spacing:var(--s8-ls-tight);font-weight:600;color:#fff;margin:var(--s8-3) 0 0;text-wrap:balance}
.s8c-h3{font-size:var(--s8-fs-xl);line-height:1.25;letter-spacing:var(--s8-ls-tight);font-weight:600;color:#fff;margin:var(--s8-7) 0 0}
.s8c-sub{margin:var(--s8-3) 0 0;max-width:var(--s8c-measure);font-size:var(--s8-fs-lg);color:var(--s8-fg-2);text-wrap:pretty}
.s8c-p{margin:var(--s8-3) 0 0;max-width:var(--s8c-measure);color:var(--s8-fg-2);text-wrap:pretty}
.s8c-head{margin-bottom:var(--s8-7)}
.s8c-head--center{text-align:center;display:flex;flex-direction:column;align-items:center}
.s8c-head--center .s8c-sub{margin-left:auto;margin-right:auto}
.s8c code{font-family:var(--s8-mono);font-size:.92em;background:var(--s8-inset);border:1px solid var(--s8-line);border-radius:var(--s8-r-sm);padding:1px 5px;color:var(--s8-accent-fg);white-space:nowrap}

/* ── hero ────────────────────────────────────────────── */
.s8c-hero{padding-top:clamp(40px,6vw,80px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s8-8);align-items:end}
.s8c-hero h1{font-size:var(--s8c-fs-hero);line-height:1.02;letter-spacing:-.028em;font-weight:600;color:#fff;margin:var(--s8-4) 0 0}
.s8c-hero .s8c-sub{font-size:clamp(16px,1.4vw,20px)}
.s8c-cta-row{display:flex;flex-wrap:wrap;gap:var(--s8-3);margin-top:var(--s8-6)}
.s8c-facts{display:flex;flex-direction:column;gap:1px;background:var(--s8-line);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden;min-width:220px}
.s8c-fact{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s8-5);padding:11px var(--s8-4);background:var(--s8-panel)}
.s8c-fact dt{font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-fg-3);margin:0}
.s8c-fact dd{margin:0;font-size:var(--s8-fs-sm);font-weight:600;color:var(--s8-fg)}
@media(max-width:900px){.s8c-hero{grid-template-columns:1fr;align-items:start}.s8c-facts{width:100%}}

/* ── card grids ──────────────────────────────────────── */
.s8c-grid{display:grid;gap:var(--s8-4)}
.s8c-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.s8c-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.s8c-grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.s8c-grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}.s8c-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.s8c-grid--2,.s8c-grid--3,.s8c-grid--4{grid-template-columns:1fr}}
.s8c-card{background:var(--s8-panel);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);padding:var(--s8-5);transition:border-color var(--s8-t) var(--s8-ease),background var(--s8-t) var(--s8-ease)}
.s8c-card:hover{border-color:var(--s8-line-2);background:var(--s8-panel-2)}
.s8c-card__t{font-size:var(--s8-fs-base);font-weight:600;color:#fff;margin:0}
.s8c-card__p{margin:6px 0 0;font-size:var(--s8-fs-sm);color:var(--s8-fg-2);text-wrap:pretty}
.s8c-ico{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:var(--s8-r);background:var(--s8-accent-tint);border:1px solid var(--s8-accent-line);color:var(--s8-accent-fg);margin-bottom:var(--s8-4)}
.s8c-ico svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* hairline feature grid: one shared rule, no per-card borders */
.s8c-feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--s8-line);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden}
.s8c-feat>div{background:var(--s8-panel);padding:var(--s8-6) var(--s8-5);transition:background var(--s8-t) var(--s8-ease)}
.s8c-feat>div:hover{background:var(--s8-panel-2)}
@media(max-width:900px){.s8c-feat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.s8c-feat{grid-template-columns:1fr}}

/* ── code blocks ─────────────────────────────────────── */
.s8c-code{border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden;background:var(--s8-inset);margin:var(--s8-4) 0 0}
.s8c-code__bar{display:flex;align-items:center;gap:var(--s8-2);height:var(--s8-h-lg);padding:0 var(--s8-2) 0 var(--s8-4);background:var(--s8-panel-2);border-bottom:1px solid var(--s8-line)}
.s8c-code__name{flex:1;font-family:var(--s8-mono);font-size:var(--s8-fs-xs);font-weight:600;letter-spacing:.05em;color:var(--s8-fg-3)}
.s8c-code pre{margin:0;padding:var(--s8-4);overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--s8-fs-sm);line-height:1.75;color:var(--s8-fg-2);tab-size:2}
.s8c-code .k{color:var(--s8-accent-fg)}
.s8c-code .c{color:var(--s8-fg-4)}
.s8c-code .s{color:var(--s8-fg)}
.s8c-copy{flex:none}

/* ── docs block: sticky rail + measure column ────────── */
.s8c-docs{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s8-8)}
@media(max-width:940px){.s8c-docs{grid-template-columns:1fr;gap:var(--s8-5)}.s8c-rail{display:none}}
.s8c-rail{position:sticky;top:var(--s8-6);align-self:start}
.s8c-rail .lbl{font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);text-transform:uppercase;color:var(--s8-fg-4);padding-left:13px;margin-bottom:var(--s8-3)}
.s8c-rail a{display:block;font-size:var(--s8-fs-sm);color:var(--s8-fg-3);padding:7px 0 7px 13px;border-left:1px solid var(--s8-line);transition:color var(--s8-t) var(--s8-ease),border-color var(--s8-t) var(--s8-ease)}
.s8c-rail a:hover{color:var(--s8-fg);border-left-color:var(--s8-line-3)}
.s8c-rail a.on{color:var(--s8-accent-fg);border-left-color:var(--s8-accent)}
.s8c-step{display:flex;align-items:center;gap:var(--s8-3);margin:var(--s8-7) 0 0}
.s8c-step__n{flex:none;display:flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:var(--s8-r-sm);background:var(--s8-panel-2);border:1px solid var(--s8-line-2);font-family:var(--s8-mono);font-size:var(--s8-fs-xs);font-weight:600;color:var(--s8-fg-2)}
.s8c-step__t{font-size:var(--s8-fs-base);font-weight:600;color:#fff}
.s8c-note{display:flex;gap:var(--s8-3);margin:var(--s8-5) 0 0;padding:var(--s8-3) var(--s8-4);border-radius:var(--s8-r);background:var(--s8-warn-tint);border:1px solid var(--s8-warn-line);font-size:var(--s8-fs-sm);color:var(--s8-fg)}
.s8c-note svg{flex:none;width:15px;height:15px;margin-top:3px;stroke:var(--s8-warn);stroke-width:1.8;fill:none;stroke-linecap:round}
.s8c-tablewrap{margin:var(--s8-4) 0 0;border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden;background:var(--s8-panel)}
.s8c-tablewrap .s8-table th{background:var(--s8-panel-2)}
.s8c-tablewrap .s8-table tbody tr:last-child td{border-bottom:0}
.s8c-tablewrap .s8-table td:not(:first-child){font-family:var(--s8-mono);font-size:var(--s8-fs-xs)}
.s8c-tablewrap .s8-table td:last-child{text-align:left;white-space:normal;font-family:var(--s8-sans);font-size:var(--s8-fs-sm);color:var(--s8-fg-2)}
.s8c-api{display:grid;gap:1px;margin:var(--s8-4) 0 0;background:var(--s8-line);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden}
.s8c-api>div{display:flex;align-items:baseline;gap:var(--s8-4);padding:11px var(--s8-4);background:var(--s8-panel)}
.s8c-api code{background:none;border:0;padding:0;color:var(--s8-accent-fg);font-size:var(--s8-fs-sm);flex:none}
.s8c-api span{font-size:var(--s8-fs-sm);color:var(--s8-fg-3);margin-left:auto;text-align:right}

/* ── closing CTA ─────────────────────────────────────── */
.s8c-close{margin-top:var(--s8c-gap);padding:clamp(40px,6vw,72px) clamp(20px,4vw,40px);text-align:center;border-top:1px solid var(--s8-line);background:radial-gradient(120% 140% at 50% 0%,var(--s8-accent-tint),transparent 62%)}
.s8c-close h2{font-size:var(--s8-fs-2xl);line-height:1.2;letter-spacing:var(--s8-ls-tight);font-weight:600;color:#fff;margin:var(--s8-3) 0 0}
.s8c-close p{margin:var(--s8-3) auto 0;max-width:460px;color:var(--s8-fg-2)}
.s8c-close .s8c-cta-row{justify-content:center}

/* Content pages are documents, not viewport-locked simulator workspaces. The
   shared footer sits in normal flow and the page uses the browser scrollbar. */
body:has(.s8c) .s8c{padding-bottom:var(--s8c-gap)}
body:has(.s8c) .app{height:auto;min-height:100dvh}
body:has(.s8c) .terminal-stage{display:block;flex:none;min-height:0;overflow:visible}
body:has(.s8c) .s8-footer-pill{display:none}
body:has(.s8c) .s8-footer-drawer{position:static;max-height:none;overflow:visible}