/* B403 · the architecture graphic: how CultureAI is built, layer by layer, with the connectors beside it. Light, the site's own
   tokens, the vendors' master marks small inside their layer. Every label is a short fact the repo proves (SECURITY.md,
   HIPAA.md, RESTORE.md, the platform code). A real component, not an image: crisp at any width, stacked on a phone. */
.ar{--ar-ink:#0a1633;--ar-blue:#1559f5;--ar-line:#dfe5f1;--ar-mist:#f5f7fc;--ar-mute:#4f5b75;margin:0;font-family:Rubik,system-ui,sans-serif}
.b-arch{margin:48px 0 56px}
.b-sample{display:inline-flex;align-items:center;gap:8px;margin:12px 0 0;padding:6px 12px;border-radius:999px;background:rgba(10,22,51,.06);font:500 12px/1.2 "IBM Plex Mono",monospace;letter-spacing:.06em;color:#3d4a66}
.b-sample i{width:6px;height:6px;border-radius:50%;background:#f0a020}
@media (min-width:1101px),(max-width:600px){.sx-hero.hx2 .b-sample{background:rgba(255,255,255,.1);color:#dbe5ff}}
.ar-stack{position:relative;display:grid;gap:12px;margin:0;padding:0;list-style:none}
.ar-l{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:24px;padding:20px 24px;border-radius:18px;background:#fff;border:1px solid var(--ar-line);box-shadow:0 1px 2px rgba(10,22,51,.04)}
.ar-l.ar-top{background:linear-gradient(180deg,#f3f6ff,#fff);border-color:#cfdafc}
.ar-h{display:flex;flex-direction:column;gap:6px}
.ar-n{font:500 12px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;color:var(--ar-blue)}
.ar-h b{font:600 20px/1.1 Rubik,system-ui,sans-serif;letter-spacing:-.3px;color:var(--ar-ink)}
.ar-items{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ar-items li{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:10px;background:var(--ar-mist);border:1px solid #e8edf6;font:500 15px/1.25 Rubik,system-ui,sans-serif;color:var(--ar-ink)}
.ar-items li img{display:block;height:18px;width:auto;max-width:90px;object-fit:contain;background:none}
.ar-items li i{font:500 11px/1 "IBM Plex Mono",monospace;font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--ar-mute);padding:3px 6px;border-radius:6px;background:#fff;border:1px solid var(--ar-line)}
/* the spine: one line through the layers, so they read as a stack */
.ar-stack::before{content:"";position:absolute;left:41px;top:28px;bottom:28px;width:2px;background:linear-gradient(var(--ar-blue),#9db8fb);opacity:.25;border-radius:2px}
.ar-rail{position:relative;margin:0;padding:22px;border-radius:18px;border:1.5px dashed #b9c8ec;background:repeating-linear-gradient(135deg,#fbfcff 0 10px,#f6f8fe 10px 20px);display:flex;flex-direction:column;gap:14px}
.ar-rail .ar-h{margin-bottom:4px}
.ar-rail .ar-items{flex-direction:column}
.ar-rail .ar-items li{background:#fff;min-height:44px}
.ar-rail::before{content:"";position:absolute;left:-21px;top:50%;width:20px;height:2px;background:#b9c8ec}
.ar-cap{grid-column:1/-1;margin:6px 0 0;font:400 13px/1.5 Rubik,system-ui,sans-serif;color:var(--ar-mute)}
@media (max-width:1100px){
  .ar{grid-template-columns:1fr}
  .ar-rail::before{display:none}
  .ar-rail .ar-items{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:640px){
  .ar-l{grid-template-columns:1fr;gap:12px;padding:16px}
  .ar-h{flex-direction:row;align-items:baseline;gap:10px}
  .ar-h b{font-size:18px}
  .ar-stack::before{display:none}
  .ar-items li{font-size:13.5px;min-height:34px}
  .ar-rail{padding:16px}
}
@media (min-width:1101px){html.px-page body #products .sx-t-okr{min-height:0!important}html.px-page body #products .sx-t-nav{min-height:0!important}}
.sec-sec h2::before{display:none!important}