/* SIMUL8OR ABOUT/CONTENT-PAGE LAYER — sits on s8-tokens.css + s8-ui.css + s8-content.css.
   Section patterns for long-form marketing content. Nothing here redefines a token. */

/* ── stat strip: hairline cells, no shadow ───────────── */
.s8a-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--s8-line);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden}
.s8a-stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:760px){.s8a-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.s8a-stat{background:var(--s8-panel);padding:var(--s8-5)}
.s8a-stat b{display:block;font-size:var(--s8-fs-3xl);line-height:1;letter-spacing:var(--s8-ls-tight);font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.s8a-stat b i{font-style:normal;font-size:.55em;font-weight:600;color:var(--s8-fg-3);margin-left:2px}
.s8a-stat span{display:block;margin-top:10px;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)}
.s8a-stat--accent b{color:var(--s8-accent-hi)}
.s8a-stat--up b{color:var(--s8-up)}
.s8a-stat--gold b{color:var(--s8-gold-hi)}

/* bare stat row: rules only, for editorial layouts */
.s8a-statrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--s8-line)}
.s8a-statrow>div{padding:var(--s8-5) var(--s8-5) 0 0}
.s8a-statrow>div+div{padding-left:var(--s8-5);border-left:1px solid var(--s8-line)}
@media(max-width:760px){.s8a-statrow{grid-template-columns:repeat(2,minmax(0,1fr))}.s8a-statrow>div:nth-child(3){border-left:0;padding-left:0}}
.s8a-statrow b{display:block;font-size:var(--s8-fs-display);line-height:1;letter-spacing:-.03em;font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.s8a-statrow span{display:block;margin-top:var(--s8-3);font-size:var(--s8-fs-sm);color:var(--s8-fg-3);max-width:170px;text-wrap:pretty}

/* ── media frames ────────────────────────────────────── */
.s8a-media{border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden;background:var(--s8-inset)}
.s8a-media--16x9{aspect-ratio:16/9}
.s8a-media--4x3{aspect-ratio:4/3}
.s8a-media--1x1{aspect-ratio:1/1}
.s8a-media image-slot{display:block;width:100%;height:100%}
.s8a-cap{margin-top:10px;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)}

/* ── split rows: media + prose ───────────────────────── */
.s8a-split{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(28px,4vw,64px);align-items:center}
.s8a-split--flip .s8a-split__media{order:2}
@media(max-width:900px){.s8a-split{grid-template-columns:1fr;gap:var(--s8-6)}.s8a-split--flip .s8a-split__media{order:0}}

/* ── check list ──────────────────────────────────────── */
.s8a-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--s8-line);border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);overflow:hidden;margin-top:var(--s8-6)}
@media(max-width:560px){.s8a-checks{grid-template-columns:1fr}}
.s8a-check{display:flex;align-items:center;gap:var(--s8-2);background:var(--s8-panel);padding:11px var(--s8-4);font-size:var(--s8-fs-sm);color:var(--s8-fg-2)}
.s8a-check svg{flex:none;width:13px;height:13px;stroke:var(--s8-up);stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.s8a-chips{display:flex;flex-wrap:wrap;gap:var(--s8-2);margin-top:var(--s8-5)}
.s8a-chip{display:inline-flex;align-items:center;gap:7px;height:var(--s8-h-sm);padding:0 11px;border:1px solid var(--s8-line-2);border-radius:var(--s8-r-pill);background:var(--s8-panel);font-size:var(--s8-fs-xs);color:var(--s8-fg-2)}
.s8a-chip::before{content:"";width:5px;height:5px;border-radius:var(--s8-r-pill);background:var(--s8-up)}

/* ── numbered feature / value lists ──────────────────── */
.s8a-num{font-family:var(--s8-mono);font-size:var(--s8-fs-micro);font-weight:600;letter-spacing:var(--s8-ls-caps);color:var(--s8-fg-4);font-variant-numeric:tabular-nums}
.s8a-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(28px,4vw,64px)}
@media(max-width:760px){.s8a-rows{grid-template-columns:1fr}}
.s8a-row{padding:var(--s8-5) 0;border-top:1px solid var(--s8-line)}
.s8a-row__h{display:flex;align-items:baseline;gap:var(--s8-3)}
.s8a-row__t{font-size:var(--s8-fs-lg);font-weight:600;color:#fff;letter-spacing:var(--s8-ls-tight)}
.s8a-row p{margin:var(--s8-2) 0 0;padding-left:calc(var(--s8-3) + 20px);font-size:var(--s8-fs-sm);color:var(--s8-fg-2);text-wrap:pretty}
@media(max-width:480px){.s8a-row p{padding-left:0}}

/* ── editorial section: label column + body column ───── */
.s8a-ed{display:grid;grid-template-columns:210px minmax(0,1fr);gap:clamp(24px,4vw,72px)}
@media(max-width:900px){.s8a-ed{grid-template-columns:1fr;gap:var(--s8-5)}}
.s8a-ed__label{position:sticky;top:var(--s8-6);align-self:start}
.s8a-ed__label .s8a-num{display:block;margin-bottom:var(--s8-3)}
.s8a-ed__label h2{font-size:var(--s8-fs-xl);line-height:1.2;letter-spacing:var(--s8-ls-tight);font-weight:600;color:#fff;margin:0}
.s8a-ed__label p{margin:10px 0 0;font-size:var(--s8-fs-sm);color:var(--s8-fg-3);text-wrap:pretty}

/* ── pull quote ──────────────────────────────────────── */
.s8a-quote{margin:var(--s8-6) 0 0;padding-left:var(--s8-4);border-left:2px solid var(--s8-accent);font-size:var(--s8-fs-lg);line-height:1.4;color:var(--s8-fg);text-wrap:pretty}
.s8a-quote--lg{font-size:var(--s8-fs-2xl);line-height:1.25;letter-spacing:var(--s8-ls-tight);border-left-width:3px}
.s8a-cols{columns:2;column-gap:clamp(28px,4vw,56px);max-width:none}
.s8a-cols p{margin:0 0 var(--s8-4);color:var(--s8-fg-2);text-wrap:pretty;break-inside:avoid}
@media(max-width:760px){.s8a-cols{columns:1}}

/* ── panel with header bar (workbench direction) ─────── */
.s8a-panel{border:1px solid var(--s8-line);border-radius:var(--s8-r-lg);background:var(--s8-panel);overflow:hidden}
.s8a-panel__bar{display:flex;align-items:center;gap:var(--s8-2);height:var(--s8-h);padding:0 var(--s8-3);background:var(--s8-panel-2);border-bottom:1px solid var(--s8-line);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)}
.s8a-panel__bar svg{width:13px;height:13px;stroke:var(--s8-accent-fg);stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.s8a-panel__bar .sp{margin-left:auto;color:var(--s8-fg-4);letter-spacing:.06em}
.s8a-panel__body{padding:var(--s8-5)}
.s8a-panel--flush .s8a-panel__body{padding:0}
.s8a-panel__t{font-size:var(--s8-fs-base);font-weight:600;color:#fff;margin:0}
.s8a-panel__p{margin:6px 0 0;font-size:var(--s8-fs-sm);color:var(--s8-fg-2);text-wrap:pretty}

/* ── ticker strip ────────────────────────────────────── */
.s8a-ticker{display:flex;flex-wrap:wrap;align-items:center;gap:0;border-top:1px solid var(--s8-line);border-bottom:1px solid var(--s8-line);background:var(--s8-inset)}
.s8a-ticker>div{display:flex;align-items:baseline;gap:var(--s8-2);padding:11px var(--s8-5);font-size:var(--s8-fs-sm)}
.s8a-ticker>div+div{border-left:1px solid var(--s8-line)}
.s8a-ticker dt{margin:0;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)}
.s8a-ticker dd{margin:0;font-weight:600;color:var(--s8-fg);font-variant-numeric:tabular-nums}

/* ── app-store badges ────────────────────────────────── */
.s8a-badges{display:flex;flex-wrap:wrap;gap:var(--s8-2);margin-top:var(--s8-4)}
.s8a-badge{display:flex;flex-direction:column;justify-content:center;min-height:46px;padding:6px var(--s8-4);border:1px solid var(--s8-line-2);border-radius:var(--s8-r);background:var(--s8-panel);transition:border-color var(--s8-t) var(--s8-ease),background var(--s8-t) var(--s8-ease)}
.s8a-badge:hover{border-color:var(--s8-line-3);background:var(--s8-panel-2)}
.s8a-badge small{font-family:var(--s8-mono);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--s8-fg-4)}
.s8a-badge b{font-size:var(--s8-fs-sm);font-weight:600;color:var(--s8-fg)}

/* ── hash line ───────────────────────────────────────── */
.s8a-hash{font-size:var(--s8-fs-2xl);line-height:1.2;letter-spacing:var(--s8-ls-tight);font-weight:600;color:#fff;margin:0}
.s8a-hash em{font-style:normal;color:var(--s8-accent-hi)}

/* ── sticky section rail (workbench) ─────────────────── */
.s8a-shell{display:grid;grid-template-columns:180px minmax(0,1fr);gap:clamp(24px,3vw,48px);align-items:start}
@media(max-width:1000px){.s8a-shell{grid-template-columns:1fr}.s8a-shell>nav{display:none}}
.s8a-railnav{position:sticky;top:var(--s8-6)}
.s8a-railnav .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)}
.s8a-railnav a{display:flex;justify-content:space-between;gap:var(--s8-2);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)}
.s8a-railnav a:hover{color:var(--s8-fg);border-left-color:var(--s8-line-3);text-decoration:none}
.s8a-railnav a.on{color:var(--s8-accent-fg);border-left-color:var(--s8-accent)}
.s8a-railnav a i{font-style:normal;font-family:var(--s8-mono);font-size:var(--s8-fs-micro);color:var(--s8-fg-4)}

/* ── section divider used between bands ─────────────── */
.s8a-rule{height:1px;background:var(--s8-line);margin-top:var(--s8c-gap)}
.s8a-tag{display:inline-flex;align-items:center;height:var(--s8-h-xs);padding:0 var(--s8-2);border-radius:var(--s8-r-sm);background:var(--s8-accent-tint);border:1px solid var(--s8-accent-line);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)}

/* Production uses real iframe/img elements where the mockup uses image-slot. */
.s8a-media iframe,.s8a-media img{display:block;width:100%;height:100%;border:0;object-fit:cover}