/* S32 owns its presentation; no global tokens or legacy layout selectors. */
.s32-database{--s32-ink:#edf4f6;--s32-deep:#102431;--s32-cyan:#69c2cf;--s32-paper:#050c12;--s32-muted:#b9c8d0;--s32-line:rgba(185,200,208,.25);background:var(--s32-paper);color:var(--s32-ink);font:inherit;font-size:16px;line-height:1.7;overflow:clip}
.s32-database *,.s32-database *:before,.s32-database *:after{box-sizing:border-box}
.s32-database h1,.s32-database h2,.s32-database h3,.s32-database p,.s32-database figure{margin:0}
.s32-database h1,.s32-database h2,.s32-database h3{font-weight:600;letter-spacing:-.035em;line-height:1.12;text-wrap:balance;overflow-wrap:break-word}
.s32-database h1{font-size:clamp(52px,6vw,82px);max-width:820px;margin-top:20px}
.s32-database h2{font-size:clamp(32px,3.3vw,48px);margin:18px 0 24px}
.s32-database__shell{width:min(1280px,calc(100% - 96px));margin:auto}
.s32-database__eyebrow,.s32-database__comparison-label{color:var(--s32-cyan);font-size:14px;font-weight:700;letter-spacing:.06em}
.s32-database__hero{position:relative;min-height:calc(100vh - 72px);isolation:isolate;background:#07131b}
.s32-database__hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}
.s32-database__hero:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,12,18,.93),rgba(5,12,18,.55) 60%,rgba(5,12,18,.15)),linear-gradient(0deg,rgba(5,12,18,.85),transparent)}
.s32-database__hero-inner{min-height:inherit;display:flex;align-items:flex-end;padding:80px 0 96px}
.s32-database__hero-copy{max-width:820px}
.s32-database__summary{margin-top:24px!important;font-size:18px;max-width:680px;color:var(--s32-muted)}
.s32-database__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.s32-database__button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 20px;border:1px solid transparent;border-radius:8px;font-size:14px;font-weight:700;text-decoration:none}
.s32-database .s32-database__button--primary{background:var(--s32-cyan);color:#09232d}
.s32-database .s32-database__button--secondary{border-color:#75868e;color:var(--s32-ink)}
.s32-database a:focus-visible,.s32-database button:focus-visible{outline:2px solid var(--s32-cyan);outline-offset:4px}
.s32-database__section{padding:72px 0}
.s32-database__section-head{max-width:100%;display:grid;grid-template-columns:1fr .85fr;gap:0 64px;align-items:end;margin-bottom:36px}
.s32-database__section-head .s32-database__eyebrow{grid-column:1/-1}
.s32-database__section-head h2{margin-bottom:0}
.s32-database__section-head>p:last-child,.s32-database__body,.s32-database__lead{font-size:17px;color:var(--s32-muted)}
.s32-database__lead{margin-top:24px!important;max-width:940px}
.s32-database__topology{display:grid;grid-template-columns:minmax(0,1fr) 240px;grid-template-areas:"app blank" "route blank" "nodes backup";gap:0 40px;align-items:center;padding:32px;background:#091824;border-top:1px solid var(--s32-line)}
.s32-database__app{grid-area:app;justify-self:center;min-width:260px}
.s32-database__app,.s32-database__node,.s32-database__backup{display:flex;flex-direction:column;gap:6px;padding:22px;background:#102431;border:1px solid var(--s32-line)}
.s32-database__app strong,.s32-database__node strong,.s32-database__backup strong{font-size:21px;line-height:1.3}
.s32-database__app span,.s32-database__node span,.s32-database__backup span{font-size:15px;color:var(--s32-muted)}
.s32-database__node small,.s32-database__backup small{font-size:14px;color:var(--s32-cyan)}
.s32-database__route{grid-area:route;position:relative;justify-self:center;width:1px;height:48px;background:var(--s32-cyan)}
.s32-database__route span{position:absolute;left:14px;top:10px;white-space:nowrap;font-size:14px;color:var(--s32-muted)}
.s32-database__route i{position:absolute;left:-2px;top:0;width:5px;height:10px;background:#b4f1f5;pointer-events:none}
.s32-database__detail-grid{margin-top:28px;border-top:1px solid var(--s32-line)}
.s32-database__detail-grid>div{display:grid;grid-template-columns:minmax(140px,.3fr) 1fr;gap:24px;padding:16px 0;border-bottom:1px solid var(--s32-line)}
.s32-database__detail-grid span{color:var(--s32-muted)}
@media(max-width:720px){.s32-database__detail-grid>div{grid-template-columns:1fr;gap:6px}}
.s32-database__nodes{grid-area:nodes;display:grid;grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);align-items:center;gap:0}
.s32-database__replication{position:relative;height:1px;background:var(--s32-cyan)}
.s32-database__replication span{position:absolute;bottom:12px;left:0;width:100%;text-align:center;font-size:14px;color:var(--s32-cyan)}
.s32-database__backup{grid-area:backup;border-style:dashed;background:transparent}
.s32-database__motion-toggle{display:block;margin:16px 0 0 auto;min-height:44px;padding:8px 14px;color:var(--s32-muted);background:transparent;border:1px solid var(--s32-line);border-radius:8px;font:inherit;cursor:pointer}
.s32-database__split,.s32-database__ops-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.s32-database__replication-section,.s32-database__operations{background:#091824}
.s32-database__comparison{border-top:2px solid var(--s32-cyan);padding:24px;background:#102431}
.s32-database__compare-row{padding:22px 0;border-bottom:1px solid var(--s32-line);display:grid;gap:8px}
.s32-database__compare-row strong{font-size:19px}
.s32-database__compare-row span,.s32-database__compare-note{color:var(--s32-muted);font-size:16px}
.s32-database__compare-note{margin-top:20px}
.s32-database__acceptance{border-top:1px solid var(--s32-line)}
.s32-database__acceptance-row{display:grid;grid-template-columns:48px 1fr;gap:20px;padding:24px 0;border-bottom:1px solid var(--s32-line)}
.s32-database__acceptance-row>span{color:var(--s32-cyan)}
.s32-database__acceptance-row strong{font-size:20px}
.s32-database__acceptance-row p{margin-top:8px;color:var(--s32-muted)}
.s32-database__ops-list,.s32-database__facts{list-style:none;margin:24px 0 0;padding:0;border-top:1px solid var(--s32-line)}
.s32-database__ops-list li,.s32-database__facts li{display:grid;gap:6px;padding:16px 0;border-bottom:1px solid var(--s32-line)}
.s32-database__ops-list span,.s32-database__facts span{color:var(--s32-muted)}
.s32-database__hardware img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.s32-database__hardware figcaption{font-size:14px;color:var(--s32-muted);margin-top:12px}
.s32-database__related{padding:48px 0}
.s32-database__related h2{font-size:32px}
.s32-database__related nav{display:flex;flex-wrap:wrap;gap:12px 24px}
.s32-database__related a{color:var(--s32-ink);text-decoration:none;border-bottom:1px solid var(--s32-cyan);padding:6px 0}
.s32-database__cta{padding:64px 0;background:#102431}
.s32-database__cta p{color:var(--s32-muted);max-width:740px}
.s32-database__cta .s32-database__button{margin-top:24px}
@media(max-width:900px){.s32-database__topology{grid-template-columns:1fr;grid-template-areas:"app" "route" "nodes" "backup";gap:0}.s32-database__backup{margin-top:24px}.s32-database__split,.s32-database__ops-grid{gap:32px}}
@media(max-width:720px){
.s32-database__shell{width:calc(100% - 40px)}
.s32-database__hero,.s32-database__hero-inner{min-height:0}
.s32-database__hero-inner{align-items:flex-start;padding:48px 0 56px}
.s32-database h1{font-size:clamp(42px,11vw,52px)}
.s32-database h2{font-size:32px}
.s32-database__summary{font-size:16px}
.s32-database__actions,.s32-database__button{width:100%}
.s32-database__section{padding:48px 0}
.s32-database__section-head,.s32-database__split,.s32-database__ops-grid{display:block}
.s32-database__section-head>p:last-child{margin-top:20px}
.s32-database__body,.s32-database__lead{font-size:16px}
.s32-database__topology{padding:22px 18px}
.s32-database__app{min-width:0;width:100%}
.s32-database__nodes{display:flex;flex-direction:column;align-items:stretch}
.s32-database__replication{width:1px;height:42px;align-self:center}
.s32-database__replication span{left:14px;top:8px;bottom:auto;white-space:nowrap;width:auto}
.s32-database__comparison,.s32-database__hardware{margin-top:28px!important}
.s32-database__acceptance-row{grid-template-columns:28px 1fr;gap:14px}
.s32-database__cta{padding:48px 0}
}

.s32-database .flow-batch-diagram[data-flow-diagram] { width: 100%; margin: 32px 0 0; border-radius: 16px; overflow: hidden; }
.s32-database .flow-batch-diagram__link { display: block; border-radius: inherit; }
.s32-database .flow-batch-diagram img { display: block; width: 100%; height: auto; max-width: 100%; }
