/* =====================================================
   MSIIA SYSTEMS EXCHANGE — REDESIGN (2026-07-22)
   Companion stylesheet for /systems (systems.html).

   Scope
   ─────
     • Body ambient background (radial + grid + scanlines)
     • Hover states that inline styles cannot express
     • Card / terminal / filter / pagination visuals
     • Responsive behaviour < 900 / < 760 / < 560 px
     • Keyframes only used by this page

   The DC design was translated as-is; where a rule is
   equally expressible inline it stays inline, freeing this
   file for the state-driven rules only (hover, focus,
   pressed, is-active, responsive stacks).
   ===================================================== */

/* ── Body texture & selection ────────────────────────── */
body[data-page="systems"]{
  background:#05070B;
  -webkit-font-smoothing:antialiased;
  color:#ede7db;
  font-family:'Cormorant Garamond', Georgia, serif;
}
body[data-page="systems"] ::selection{
  background:rgba(200,169,110,0.28);
  color:#F5F1E8;
}

/* The standard `.site-header-shell` is `position:fixed` (see
   assets/site.css:392) — do NOT override to sticky here. The
   fixed header pairs with `body{padding-top:var(--global-header-
   height,100px)}` at site.css:423; overriding to sticky pushes
   that reserved padding into visible flow and creates a ~100 px
   blank strip above the ticker.  z-index for the fixed backgrounds
   below is already 0, so the header sits above them naturally. */


/* ── Main structural context ─────────────────────────── */
.sx-page{
  position:relative;
  min-height:100vh;
  background:#05070B;
  color:#ede7db;
  font-family:'Cormorant Garamond', serif;
  overflow-x:clip;
}
.sx-main{ position:relative; z-index:1; }

/* Skip link — visible on focus */
.sx-skip{
  position:absolute; left:-9999px; top:0;
  background:#c8a96e; color:#0a0c10;
  padding:10px 18px; font-family:'DM Mono', monospace;
  font-size:11px; z-index:200; border-radius:2px;
  text-decoration:none;
}
.sx-skip:focus{ left:12px; top:12px; }

/* ── Fixed background architecture layers ────────────── */
.sx-bg-radial,
.sx-bg-grid,
.sx-bg-scan{
  position:fixed; inset:0;
  pointer-events:none; z-index:0;
}
.sx-bg-radial{
  background:
    radial-gradient(1100px 760px at 88% -8%, rgba(200,169,110,0.10), transparent 62%),
    radial-gradient(950px  680px at -8% 108%, rgba(200,169,110,0.06), transparent 60%);
}
.sx-bg-grid{
  opacity:.5;
  background-image:
    linear-gradient(rgba(200,169,110,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,169,110,0.045) 1px, transparent 1px);
  background-size:140px 140px;
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 100%);
          mask-image:radial-gradient(ellipse 90% 80% at 50% 40%, black 30%, transparent 100%);
}
.sx-bg-scan{
  background-image:repeating-linear-gradient(0deg,
    rgba(255,255,255,0.012) 0px,
    rgba(255,255,255,0.012) 1px,
    transparent 1px,
    transparent 4px);
  opacity:.55;
}
.sx-depth{
  position:fixed; left:0; right:0;
  pointer-events:none; z-index:0;
  will-change:transform;
}
.sx-depth-far{ top:-8%; bottom:-8%; opacity:.55; }
.sx-depth-mid{ top:-6%; bottom:-6%; opacity:.6;  }
.sx-depth svg{ width:100%; height:100%; display:block; }
.sx-corner-label{
  position:fixed; right:22px; bottom:18px;
  pointer-events:none; z-index:0;
  font-family:'DM Mono', monospace; font-size:9px;
  letter-spacing:.3em; text-transform:uppercase;
  color:rgba(200,169,110,0.18);
}

/* ── Section wrapper ─────────────────────────────────── */
.sx-wrap{
  max-width:1320px;
  margin:0 auto;
  padding:0 clamp(20px, 3.4vw, 44px);
  box-sizing:border-box;
}

/* ── Keyframes ───────────────────────────────────────── */
@keyframes sxDashFlow  { to { stroke-dashoffset: -64; } }
@keyframes sxCorePulse { 0%,100% { opacity:.2; } 50% { opacity:.62; } }
@keyframes sxDotPulse  { 0%,100% { opacity:.5; box-shadow:0 0 0 0 rgba(118,216,154,.3); } 50% { opacity:1; box-shadow:0 0 8px 1px rgba(118,216,154,.35); } }
@keyframes sxCardIn    { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes sxHoloIn    { from { opacity:0; } to { opacity:1; } }
@keyframes sxHoloDrift { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes sxHeroRise  { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes sxCorePower { from { opacity:0; transform:scale(0.985); } to { opacity:1; transform:none; } }

@media (prefers-reduced-motion: reduce){
  .sx-page *,
  .sx-page *::before,
  .sx-page *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}

/* ── Hero ─────────────────────────────────────────────── */
/* Top padding tiers:
     desktop (>= 1080 px) : 48–72 px
     tablet  (760–1079 px): 36–48 px
     mobile  (<= 759 px)  : 24–36 px
   Bottom padding tapers proportionally.  The site-header is
   `position: fixed` and reserved via body padding, so this is the
   only visual space between ticker-bar and hero content. */
.sx-hero{ position:relative; padding: clamp(48px,5vw,72px) 0 clamp(36px,3.5vw,56px); }
.sx-hero-grid{
  display:grid;
  grid-template-columns: minmax(420px,1.04fr) minmax(380px,0.96fr);
  gap: clamp(36px,4vw,64px);
  align-items:center;
}
.sx-hero-copy{ position:relative; padding: 0 0 0 clamp(18px,1.6vw,26px); }
.sx-hero-copy-shade{
  position:absolute; left:-8%; top:-18%; width:122%; height:136%;
  pointer-events:none;
  background:radial-gradient(58% 56% at 32% 46%, rgba(5,7,11,0.7), rgba(5,7,11,0.24) 60%, transparent 80%);
}
.sx-hero-copy-rail{
  position:absolute; inset:0 auto 0 0; width:1px; pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(200,169,110,0.42) 16%, rgba(200,169,110,0.16) 76%, transparent);
}
.sx-hero-marker{
  position:absolute; left: clamp(18px,1.6vw,26px); top:-20px;
  pointer-events:none;
  font-family:'DM Mono', monospace; font-size:8px;
  letter-spacing:.26em; color:rgba(200,169,110,0.34);
}
.sx-hero-eyebrow{
  position:relative; margin:0 0 18px;
  font-family:'DM Mono', monospace; font-size:11px;
  letter-spacing:.28em; text-transform:uppercase; color:#c8a96e;
  display:flex; align-items:center; gap:12px;
  animation: sxHeroRise .7s cubic-bezier(0.22,1,0.36,1) .1s backwards;
}
.sx-hero-eyebrow-dot{
  width:7px; height:7px; border-radius:999px;
  background:#c8a96e; box-shadow:0 0 10px rgba(200,169,110,.6);
  animation: sxDotPulse 3.4s ease-in-out infinite;
}
.sx-hero-eyebrow-rule{ flex:0 1 90px; height:1px; background:linear-gradient(90deg, rgba(200,169,110,.5), transparent); }
.sx-hero-h1{
  position:relative; margin:0 0 20px;
  font-family:'Bebas Neue', sans-serif; font-weight:400;
  font-size: clamp(50px, 5vw, 78px); line-height:.96;
  letter-spacing:.02em; text-transform:uppercase; color:#F5F1E8;
  text-wrap:balance;
  text-shadow:0 3px 34px rgba(0,0,0,.5);
  animation: sxHeroRise .8s cubic-bezier(0.22,1,0.36,1) .24s backwards;
}
.sx-hero-h1 em{
  font-family:'Cormorant Garamond', serif;
  font-style:italic; font-weight:500; font-size:1.02em;
  color:#c8a96e; text-transform:none; letter-spacing:0;
}
.sx-hero-lede{
  position:relative; margin:0 0 26px; max-width:54ch;
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:20px; line-height:1.5; color:rgba(237,231,219,.76);
  text-wrap:pretty;
  animation: sxHeroRise .8s cubic-bezier(0.22,1,0.36,1) .42s backwards;
}
.sx-hero-cta-row{
  position:relative; display:flex; flex-wrap:wrap; gap:12px; margin-bottom:24px;
  animation: sxHeroRise .8s cubic-bezier(0.22,1,0.36,1) .58s backwards;
}
.sx-hero-assurances{
  position:relative;
  display:grid; grid-template-columns:1fr 1fr;
  gap:9px 24px;
  border-top:1px solid rgba(198,161,91,.16);
  padding-top:16px;
  max-width:52ch;
  animation: sxHeroRise .8s cubic-bezier(0.22,1,0.36,1) .74s backwards;
}
.sx-hero-assurance{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'DM Mono', monospace; font-size:9.5px;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(237,231,219,.55);
}
.sx-hero-scene-wrap{ position:relative; perspective:1200px; }
.sx-hero-decor{
  position:absolute; top:-72px; bottom:-84px; left:-92px; right:-92px;
  pointer-events:none;
}
.sx-hero-decor svg{
  position:absolute; inset:0; width:100%; height:100%;
  animation: sxHoloIn 1.8s ease both;
}
.sx-hero-scene{
  position:relative; transform-style:preserve-3d; will-change:transform;
  animation: sxCorePower 1s cubic-bezier(0.22,1,0.36,1) .85s backwards;
}
.sx-hero-scene-halo{
  position:absolute; left:50%; top:47%; transform:translate(-50%,-50%);
  width:min(560px,98%); aspect-ratio:1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(200,169,110,.13), rgba(200,169,110,.05) 44%, transparent 72%);
}
.sx-hero-scene-head{
  position:relative; display:flex; align-items:center;
  justify-content:space-between; padding:0 12px 4px;
}
.sx-hero-scene-tag{
  display:flex; align-items:center; gap:9px;
  font-family:'DM Mono', monospace; font-size:9px;
  letter-spacing:.24em; text-transform:uppercase; color:rgba(200,169,110,.78);
}
.sx-hero-scene-tag-dot{ width:5px; height:5px; border-radius:999px; background:#c8a96e; box-shadow:0 0 8px rgba(200,169,110,.6); }
.sx-hero-scene-layers{
  font-family:'DM Mono', monospace; font-size:9px;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(237,231,219,.42);
}
.sx-hero-scene-svg{ position:relative; display:block; width:100%; height:auto; }
.sx-hero-scene-badge-wrap{ position:relative; display:flex; justify-content:center; margin-top:2px; }
.sx-hero-scene-badge{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(10,12,16,.5); border:1px solid rgba(198,161,91,.22);
  border-radius:999px; padding:7px 15px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 8px 22px rgba(0,0,0,.4);
  font-family:'DM Mono', monospace; font-size:9px;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(118,216,154,.9);
}
.sx-hero-scene-badge-dot{ width:5px; height:5px; border-radius:999px; background:#76d89a; animation: sxDotPulse 2.6s ease-in-out infinite; }
.sx-hero-scene-badge-sep{ width:1px; height:11px; background:rgba(198,161,91,.3); }
.sx-hero-scene-badge-muted{ color:rgba(237,231,219,.44); }

/* ── Buttons ─────────────────────────────────────────── */
.sx-btn,
.sx-btn-outline,
.sx-btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'DM Mono', monospace; font-size:11.5px;
  letter-spacing:.2em; text-transform:uppercase;
  padding:14px 26px; border-radius:2px;
  transition: all .22s ease;
  text-decoration:none; border:1px solid transparent;
  cursor:pointer;
}
.sx-btn-primary{
  color:#0a0c10; background:#c8a96e;
  padding:15px 28px; font-weight:500;
  box-shadow:0 8px 24px rgba(200,169,110,.16), inset 0 1px 0 rgba(255,255,255,.28);
}
.sx-btn-primary:hover,
.sx-btn-primary:focus-visible{
  background:#e5cb8c; color:#0a0c10;
  transform:translateY(-2px); gap:14px;
  box-shadow:0 14px 34px rgba(200,169,110,.3), 0 0 0 1px rgba(229,203,140,.5), inset 0 1px 0 rgba(255,255,255,.32);
}
.sx-btn-primary:active{ opacity:.82; }
.sx-btn-outline{
  color:#e5cb8c; background:transparent;
  border:1px solid rgba(198,161,91,.42);
  padding:14px 26px;
}
.sx-btn-outline:hover,
.sx-btn-outline:focus-visible{
  color:#F5F1E8; border-color:rgba(198,161,91,.7);
  transform:translateY(-2px);
}
.sx-btn-disabled{
  color:rgba(237,231,219,.4);
  border:1px solid rgba(198,161,91,.18);
  padding:12px 18px; cursor:not-allowed;
  font-family:'DM Mono', monospace; font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase;
  white-space:nowrap;
  display:inline-flex; align-items:center; gap:8px;
  border-radius:2px;
}

/* ── Status strip ────────────────────────────────────── */
.sx-status-strip-section{ padding: 0 0 clamp(56px,5vw,84px); }
.sx-status-strip{
  position:relative;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background:linear-gradient(180deg, rgba(18,22,28,.88), rgba(12,14,18,.9));
  border:1px solid rgba(198,161,91,.22);
  border-radius:2px;
  box-shadow: 0 6px 30px rgba(0,0,0,.55), 0 26px 54px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  overflow:hidden;
}
.sx-status-strip::before{
  content:''; position:absolute; top:0; left:6%; right:6%; height:1px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(229,203,140,.5), transparent);
}
.sx-status-cell{
  padding:20px 24px; border-right:1px solid rgba(198,161,91,.12);
}
.sx-status-cell:last-child{ border-right:none; }
.sx-status-k{
  font-family:'DM Mono', monospace; font-size:9px;
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(237,231,219,.42); margin-bottom:9px;
}
.sx-status-v{
  font-family:'DM Mono', monospace; font-size:12.5px;
  letter-spacing:.14em; color:#ede7db;
}
.sx-status-v-ok{
  display:flex; align-items:center; gap:9px;
  font-family:'DM Mono', monospace; font-size:12.5px;
  letter-spacing:.14em; text-transform:uppercase; color:#76d89a;
}
.sx-status-dev-note{ color:rgba(237,231,219,.4); }

/* ── Orientation ─────────────────────────────────────── */
.sx-orient-section{ padding: 0 0 clamp(72px,7vw,104px); }
.sx-orient-grid{
  position:relative;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:20px;
}
.sx-orient-grid::before{
  content:''; position:absolute; top:50%; left:1%; right:1%; height:1px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(200,169,110,.25) 20%, rgba(200,169,110,.25) 80%, transparent);
}
.sx-orient-card{
  position:relative;
  background:#111115;
  border:1px solid rgba(198,161,91,.16);
  border-radius:2px; padding:30px 28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 18px 40px rgba(0,0,0,.35);
}
.sx-orient-num{
  font-family:'DM Mono', monospace; font-size:10px;
  letter-spacing:.26em; text-transform:uppercase; color:#c8a96e;
  margin-bottom:14px;
}
.sx-orient-copy{
  margin:0; font-family:'Cormorant Garamond', serif;
  font-style:italic; font-size:17.5px; line-height:1.55; color:rgba(237,231,219,.7);
}

/* ── Available systems / control center ──────────────── */
.sx-available{ padding: 0 0 clamp(72px,7vw,104px); }
.sx-avail-header{
  display:grid;
  grid-template-columns: 1.35fr 0.95fr;
  gap:32px; align-items:end;
  margin-bottom:34px;
  scroll-margin-top:110px;
}
.sx-avail-kicker{
  margin:0 0 16px;
  font-family:'DM Mono', monospace; font-size:10.5px;
  letter-spacing:.26em; text-transform:uppercase; color:#c8a96e;
  display:flex; align-items:center; gap:11px;
}
.sx-avail-kicker::before{
  content:''; width:6px; height:6px; border-radius:999px; background:#c8a96e;
}
.sx-avail-h2{
  margin:0; font-family:'Bebas Neue', sans-serif; font-weight:400;
  font-size: clamp(38px, 3.6vw, 56px); line-height:.94;
  letter-spacing:.02em; text-transform:uppercase; color:#F5F1E8;
}
.sx-avail-h2 em{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-weight:500; color:#c8a96e; text-transform:none; letter-spacing:0;
}
.sx-avail-sub{
  margin:0; font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:18px; line-height:1.5; color:rgba(237,231,219,.62);
}

.sx-control{
  position:relative;
  background:linear-gradient(180deg, rgba(20,24,30,.92), rgba(11,13,17,.94));
  border:1px solid rgba(198,161,91,.24);
  border-bottom:2px solid rgba(198,161,91,.36);
  border-radius:2px;
  padding:19px 18px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 26px 54px rgba(0,0,0,.45);
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  margin-bottom:14px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.sx-control::before{
  content:''; position:absolute; top:0; left:8%; right:8%; height:1px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(229,203,140,.55), transparent);
}
.sx-control::after{
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(90deg, rgba(200,169,110,.025) 1px, transparent 1px);
  background-size:44px 100%;
}
.sx-search-wrap{ position:relative; flex:1 1 260px; min-width:220px; }
.sx-search-wrap svg{
  position:absolute; left:13px; top:50%; transform:translateY(-50%);
  pointer-events:none;
}
.sx-search{
  width:100%; box-sizing:border-box;
  background:#0d1015; border:1px solid rgba(198,161,91,.25);
  border-radius:2px; color:#ede7db;
  font-family:'DM Mono', monospace; font-size:11.5px; letter-spacing:.05em;
  padding:11px 12px 11px 38px; outline:none;
  box-shadow: inset 0 2px 7px rgba(0,0,0,.55);
  transition: border-color .22s ease;
}
.sx-search:focus{ border-color:rgba(198,161,91,.6); }
.sx-search::placeholder{ color:rgba(237,231,219,.34); font-style:normal; }

.sx-select{
  background:#0d1015; border:1px solid rgba(198,161,91,.25);
  border-radius:2px; color:#ede7db;
  font-family:'DM Mono', monospace; font-size:10.5px;
  letter-spacing:.1em; text-transform:uppercase;
  padding:11px 10px; outline:none; cursor:pointer;
}
.sx-select option{ background:#0d1015; color:#ede7db; }

.sx-view-toggle{
  display:flex;
  border:1px solid rgba(198,161,91,.25);
  border-radius:2px; overflow:hidden;
}
.sx-view-btn{
  background:transparent; color:rgba(237,231,219,.6);
  border:none; cursor:pointer;
  font-family:'DM Mono', monospace; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase;
  padding:11px 16px; transition: all .22s ease;
}
.sx-view-btn + .sx-view-btn{ border-left:1px solid rgba(198,161,91,.25); }
.sx-view-btn.is-active{ background:#c8a96e; color:#0a0c10; }

/* Result state row */
.sx-result-row{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin-bottom:26px; min-height:28px;
}
.sx-result-line{
  font-family:'DM Mono', monospace; font-size:10px;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(237,231,219,.5);
}
.sx-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'DM Mono', monospace; font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase; color:#e5cb8c;
  background:rgba(200,169,110,.1);
  border:1px solid rgba(198,161,91,.3);
  border-radius:2px;
  padding:5px 6px 5px 10px;
}
.sx-chip button{
  background:none; border:none;
  color:rgba(237,231,219,.6); cursor:pointer;
  font-size:12px; line-height:1; padding:2px 4px;
  font-family:'DM Mono', monospace;
}
.sx-chip button:hover{ color:#F5F1E8; }
.sx-clear-btn{
  background:none; border:none;
  color:rgba(200,169,110,.75); cursor:pointer;
  font-family:'DM Mono', monospace; font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase;
  text-decoration:underline; text-underline-offset:3px; padding:4px;
}
.sx-clear-btn:hover{ color:#F5F1E8; }

/* Empty state */
.sx-empty{
  background:#111115;
  border:1px solid rgba(198,161,91,.16);
  border-radius:2px;
  padding:72px 40px; text-align:center;
}
.sx-empty svg{ margin-bottom:18px; }
.sx-empty-title{
  font-family:'Bebas Neue', sans-serif; font-size:26px;
  letter-spacing:.04em; text-transform:uppercase; color:#F5F1E8;
  margin-bottom:10px;
}
.sx-empty-sub{
  margin:0 auto 26px; max-width:44ch;
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:17px; line-height:1.5; color:rgba(237,231,219,.6);
}

/* Cards grid */
.sx-cards-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap:22px; align-items:stretch;
}

.sx-card{
  position:relative;
  display:flex; flex-direction:column;
  background:rgba(15,18,23,.82);
  border:1px solid rgba(198,161,91,.18);
  border-radius:2px;
  box-shadow: 0 6px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
  animation: sxCardIn .42s cubic-bezier(0.22,1,0.36,1) both;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.sx-card:hover,
.sx-card:focus-within{
  transform:translateY(-6px);
  border-color:rgba(198,161,91,.4);
  box-shadow: 0 20px 48px rgba(0,0,0,.68), 0 0 26px rgba(200,169,110,.09), inset 0 1px 0 rgba(255,255,255,.06), inset 0 -14px 30px rgba(0,0,0,.3);
}
.sx-card-ghost-num{
  position:absolute; top:2px; right:8px; pointer-events:none;
  font-family:'Bebas Neue', sans-serif;
  font-size:86px; line-height:1; letter-spacing:.04em;
  color:rgba(200,169,110,.05);
  transition: color .22s ease;
}
.sx-card:hover .sx-card-ghost-num{ color:rgba(200,169,110,.09); }
.sx-card-scanlines{
  position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:linear-gradient(rgba(200,169,110,.02) 1px, transparent 1px);
  background-size:100% 34px;
}
.sx-card-topline{
  position:absolute; top:0; left:10%; right:10%; height:1px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}
.sx-card-header{
  position:relative; display:flex; align-items:center;
  justify-content:space-between; gap:10px;
  padding:16px 22px;
  border-bottom:1px solid rgba(198,161,91,.12);
}
.sx-card-id{ font-family:'DM Mono', monospace; font-size:9px; letter-spacing:.22em; color:rgba(237,231,219,.35); }
.sx-card-class{ flex:1; font-family:'DM Mono', monospace; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:#c8a96e; }
.sx-status-badge{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'DM Mono', monospace; font-size:8.5px;
  letter-spacing:.16em; text-transform:uppercase;
  border:1px solid; border-radius:2px;
  padding:4px 8px; white-space:nowrap;
}
.sx-status-dot{ width:4px; height:4px; border-radius:999px; display:inline-block; }

.sx-card-title-block{ padding:22px 22px 0; }
.sx-card-titles{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px;
}
.sx-card-shortname{
  margin:0;
  font-family:'Bebas Neue', sans-serif; font-weight:400;
  font-size:30px; line-height:1; letter-spacing:.03em;
  text-transform:uppercase; color:#F5F1E8;
}
.sx-platform-badge{
  font-family:'DM Mono', monospace; font-size:8.5px;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(200,169,110,.65);
  border:1px solid rgba(198,161,91,.25);
  border-radius:2px; padding:3px 7px;
}
.sx-card-fullname{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:16px; color:rgba(200,169,110,.85);
  margin-bottom:12px;
}
.sx-card-desc{
  margin:0 0 18px;
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:16.5px; line-height:1.5; color:rgba(237,231,219,.66);
  min-height:74px;
}

.sx-card-viz{
  position:relative;
  margin:0 22px;
  border:1px solid rgba(198,161,91,.18);
  border-radius:2px;
  background:rgba(5,7,11,.55);
  overflow:hidden;
  box-shadow: inset 0 3px 10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.3);
}
.sx-card-viz svg{ display:block; width:100%; height:88px; }
.sx-card-viz-label{
  padding:6px 10px;
  border-top:1px solid rgba(198,161,91,.1);
  font-family:'DM Mono', monospace; font-size:7.5px;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(237,231,219,.32);
}

/* ── MSIIA X10 product-video card media ──────────────────────
   Replaces the shallow SVG chart with an integrated video
   viewport inside the SYS.01 card. Frame height is capped so
   the outer card retains its current computed height; recovered
   space comes from the shorter --compact description below. */
.sx-card-desc--compact{
  min-height:0;
  margin-bottom:14px;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.sx-card-media{
  position:relative;
  margin:0 22px;
}
.sx-card-media--video{
  border:1px solid rgba(198,161,91,.22);
  border-radius:2px;
  background:#05070b;
  overflow:hidden;
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(0,0,0,.35),
    0 0 0 rgba(200,169,110,0);
  transition:border-color .22s ease, box-shadow .22s ease;
}
.sx-card-media--video:hover,
.sx-card-media--video:focus-within{
  border-color:rgba(200,169,110,.36);
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(0,0,0,.35),
    0 0 18px rgba(200,169,110,.09);
}
.sx-card-media-frame{
  position:relative;
  width:100%;
  aspect-ratio: 16 / 9;
  /* Cap height so the outer card stays close to its original computed
     height. Space recovered from the --compact description offsets this. */
  max-height:118px;
  overflow:hidden;
  background:#05070b;
  isolation:isolate;
}
/* Soft dark gradient near the bottom for label separation */
.sx-card-media-frame::after{
  content:'';
  position:absolute; left:0; right:0; bottom:0; height:38%;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events:none;
}
.sx-card-video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  background:#05070b;
}
.sx-card-video-toggle{
  position:absolute;
  right:8px; bottom:8px;
  width:32px; height:32px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0; margin:0;
  border:1px solid rgba(200,169,110,.35);
  border-radius:2px;
  background:rgba(5,7,11,.72);
  color:rgba(237,231,219,.85);
  cursor:pointer;
  opacity:0;
  transition:opacity .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
  z-index:2;
}
.sx-card-media--video:hover .sx-card-video-toggle,
.sx-card-media--video:focus-within .sx-card-video-toggle,
.sx-card-media--video.is-paused .sx-card-video-toggle{
  opacity:1;
}
.sx-card-video-toggle:hover,
.sx-card-video-toggle:focus-visible{
  border-color:rgba(229,203,140,.7);
  color:#e5cb8c;
  background:rgba(5,7,11,.85);
  outline:none;
}
.sx-card-video-icon{ display:none; }
.sx-card-media--video.is-paused .sx-card-video-icon--play{ display:block; }
.sx-card-media--video:not(.is-paused) .sx-card-video-icon--pause{ display:block; }
.sx-card-media-label{
  padding:6px 10px;
  border-top:1px solid rgba(198,161,91,.1);
  font-family:'DM Mono', monospace; font-size:7.5px;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(237,231,219,.32);
}
@media (prefers-reduced-motion: reduce){
  .sx-card-media--video,
  .sx-card-video-toggle{ transition:none; }
}

/* ── SYS.02/SYS.03 (and other dev-status cards) — Coming Soon panel ──
   Replaces the illustrative SVG chart with a premium institutional
   development-status panel. Frame occupies the same footprint as the
   original chart (~88px frame + ~22px caption ≈ 110px) so card
   dimensions and grid alignment are preserved. */
.sx-dev-panel{
  position:relative;
  margin:0 22px;
}
.sx-dev-panel__frame{
  position:relative;
  height:96px;
  padding:11px 14px 10px;
  border:1px solid rgba(198,161,91,.22);
  border-radius:2px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(200,169,110,.10), rgba(0,0,0,0) 55%),
    radial-gradient(120% 140% at 0% 100%, rgba(200,169,110,.05), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, #0a0d13 0%, #05070b 100%);
  overflow:hidden;
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(0,0,0,.35);
  isolation:isolate;
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.sx-dev-panel:hover .sx-dev-panel__frame,
.sx-dev-panel:focus-within .sx-dev-panel__frame{
  border-color:rgba(200,169,110,.4);
  box-shadow:
    inset 0 3px 10px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(0,0,0,.35),
    0 0 18px rgba(200,169,110,.09);
  transform:translateY(-1px);
}

/* Layer 1 — subtle 38px technical grid */
.sx-dev-panel__grid{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(200,169,110,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,169,110,.05) 1px, transparent 1px);
  background-size:38px 38px;
  background-position:-1px -1px;
  mask-image:radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,.35), rgba(0,0,0,1));
  -webkit-mask-image:radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,.35), rgba(0,0,0,1));
}

/* Layer 2 — variant motif (set per --regime / --trend / etc.) */
.sx-dev-panel__motif{
  position:absolute; inset:0; pointer-events:none; z-index:0; opacity:.9;
}
.sx-dev-panel--regime .sx-dev-panel__motif{
  background:
    linear-gradient(90deg, rgba(200,169,110,0) 0%, rgba(200,169,110,.045) 20%, rgba(200,169,110,0) 40%, rgba(200,169,110,.06) 62%, rgba(200,169,110,0) 82%),
    repeating-linear-gradient(0deg, rgba(200,169,110,.03) 0 1px, transparent 1px 24px);
}
.sx-dev-panel--trend .sx-dev-panel__motif{
  background:
    linear-gradient(105deg, rgba(200,169,110,0) 25%, rgba(200,169,110,.07) 60%, rgba(200,169,110,0) 100%),
    repeating-linear-gradient(105deg, rgba(200,169,110,.035) 0 1px, transparent 1px 22px);
}
.sx-dev-panel--execution .sx-dev-panel__motif{
  background:
    linear-gradient(180deg, rgba(200,169,110,.05) 0%, rgba(200,169,110,0) 55%),
    repeating-linear-gradient(90deg, rgba(200,169,110,.03) 0 1px, transparent 1px 32px);
}
.sx-dev-panel--neural .sx-dev-panel__motif{
  background:
    radial-gradient(60% 90% at 30% 60%, rgba(200,169,110,.06), rgba(0,0,0,0) 70%),
    radial-gradient(50% 80% at 75% 40%, rgba(200,169,110,.045), rgba(0,0,0,0) 70%);
}
.sx-dev-panel--retracement .sx-dev-panel__motif{
  background:
    linear-gradient(75deg, rgba(200,169,110,0) 25%, rgba(200,169,110,.05) 55%, rgba(200,169,110,0) 85%),
    repeating-linear-gradient(75deg, rgba(200,169,110,.03) 0 1px, transparent 1px 28px);
}

/* Layer 3 — slow vertical scan line */
.sx-dev-panel__scan{
  position:absolute; left:0; right:0; top:-6%; height:6px;
  pointer-events:none; z-index:1;
  background:linear-gradient(90deg, rgba(200,169,110,0) 0%, rgba(229,203,140,.16) 50%, rgba(200,169,110,0) 100%);
  filter:blur(2px);
  animation: sxDevScan 9s cubic-bezier(.6,.05,.4,.95) 2s infinite;
}
@keyframes sxDevScan{
  0%   { transform: translateY(0); opacity:0; }
  8%   { opacity:1; }
  92%  { opacity:1; }
  100% { transform: translateY(110px); opacity:0; }
}

/* Layer 4 — variant-specific ambient glow */
.sx-dev-panel__glow{
  position:absolute; pointer-events:none; z-index:0;
  width:150px; height:150px; border-radius:50%;
  filter:blur(28px);
}
.sx-dev-panel--regime .sx-dev-panel__glow{
  top:-40px; right:-40px;
  background:radial-gradient(circle, rgba(200,169,110,.22), rgba(0,0,0,0) 70%);
}
.sx-dev-panel--trend .sx-dev-panel__glow{
  bottom:-40px; left:-40px;
  background:radial-gradient(circle, rgba(200,169,110,.2), rgba(0,0,0,0) 70%);
}
.sx-dev-panel--execution .sx-dev-panel__glow{
  top:-40px; left:-40px;
  background:radial-gradient(circle, rgba(200,169,110,.18), rgba(0,0,0,0) 70%);
}
.sx-dev-panel--neural .sx-dev-panel__glow{
  top:50%; left:50%; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(200,169,110,.14), rgba(0,0,0,0) 70%);
}
.sx-dev-panel--retracement .sx-dev-panel__glow{
  bottom:-40px; right:-40px;
  background:radial-gradient(circle, rgba(200,169,110,.18), rgba(0,0,0,0) 70%);
}

/* Layer 5 — dark central vignette to preserve title legibility */
.sx-dev-panel__vignette{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(60% 65% at 50% 55%, rgba(0,0,0,.55), rgba(0,0,0,0) 75%);
}

/* Foreground content */
.sx-dev-panel__header{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.sx-dev-panel__id{
  font-family:'DM Mono', monospace;
  font-size:8px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(237,231,219,.42);
}
.sx-dev-status{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'DM Mono', monospace;
  font-size:7.5px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(200,169,110,.78);
  white-space:nowrap;
}
.sx-dev-status__dot{
  width:5px; height:5px; border-radius:50%;
  background:#c8a96e;
  box-shadow:0 0 6px rgba(200,169,110,.7);
  animation: sxDevPulse 3s ease-in-out infinite;
}
@keyframes sxDevPulse{
  0%,100% { opacity:.45; transform:scale(1); }
  50%     { opacity:.9;  transform:scale(1.15); }
}

.sx-dev-panel__content{
  position:relative; z-index:2;
  margin-top:6px;
  text-align:center;
}
.sx-dev-panel__title{
  display:block;
  font-family:'Bebas Neue', sans-serif; font-weight:400;
  font-size:clamp(22px, 3.2vw, 28px);
  line-height:1;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:transparent;
  background:linear-gradient(180deg, #f5eccd 0%, #e5cb8c 55%, #c8a96e 100%);
  -webkit-background-clip:text;
  background-clip:text;
  text-shadow:0 1px 0 rgba(0,0,0,.35);
  transition:filter .22s ease;
}
.sx-dev-panel:hover .sx-dev-panel__title{
  filter:brightness(1.08);
}
.sx-dev-panel__desc{
  margin:5px 0 0;
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:11.5px; line-height:1.35;
  color:rgba(237,231,219,.55);
  max-width:92%;
  margin-left:auto; margin-right:auto;
}

.sx-dev-panel__seq{
  position:absolute; left:0; right:0; bottom:8px; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:8px;
  font-family:'DM Mono', monospace;
  font-size:7px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(237,231,219,.32);
}
.sx-dev-panel__seq-step.is-on{ color:rgba(229,203,140,.85); }
.sx-dev-panel__seq-sep{
  display:inline-block; width:18px; height:1px;
  background:linear-gradient(90deg, rgba(200,169,110,0), rgba(200,169,110,.35), rgba(200,169,110,0));
}

.sx-dev-panel__footer{
  padding:6px 10px;
  border:1px solid rgba(198,161,91,.18);
  border-top:0;
  background:rgba(5,7,11,.55);
  font-family:'DM Mono', monospace; font-size:7.5px;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(237,231,219,.32);
  border-radius:0 0 2px 2px;
  margin-top:-1px;
}

/* Reduced-motion — freeze animation, keep static composition */
@media (prefers-reduced-motion: reduce){
  .sx-dev-panel__scan{ animation:none; opacity:0; }
  .sx-dev-status__dot{ animation:none; opacity:.9; }
  .sx-dev-panel__frame{ transition:none; }
  .sx-dev-panel:hover .sx-dev-panel__frame{ transform:none; }
}

.sx-card-meta{
  display:grid; grid-template-columns:1fr 1fr;
  gap:0;
  padding:18px 22px 0;
}
.sx-meta-cell{ padding:8px 0; border-bottom:1px solid rgba(198,161,91,.08); }
.sx-meta-k{
  font-family:'DM Mono', monospace; font-size:8.5px;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(237,231,219,.38);
  margin-bottom:4px;
}
.sx-meta-v{
  font-family:'DM Mono', monospace; font-size:11px;
  letter-spacing:.06em; color:rgba(237,231,219,.85);
}

.sx-editions-row{
  display:flex; flex-wrap:wrap; gap:7px;
  padding:16px 22px 0;
}
.sx-edition-pill{
  font-family:'DM Mono', monospace; font-size:9px;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(237,231,219,.75);
  border:1px solid rgba(198,161,91,.28);
  border-radius:2px;
  padding:5px 9px;
  background:rgba(200,169,110,.05);
}
.sx-edition-price{ color:#e5cb8c; }

.sx-delivery-row{
  display:flex; flex-wrap:wrap; gap:6px 14px;
  padding:14px 22px 0;
}
.sx-delivery-item{
  display:inline-flex; align-items:center; gap:6px;
  font-family:'DM Mono', monospace; font-size:8.5px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(237,231,219,.48);
}

.sx-card-spacer{ flex:1; }
.sx-card-foot{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  padding:20px 22px 22px; margin-top:18px;
  border-top:1px solid rgba(198,161,91,.12);
}
.sx-price-kicker{
  font-family:'DM Mono', monospace; font-size:8.5px;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(237,231,219,.4);
  margin-bottom:5px;
}
.sx-price-label{
  font-family:'Bebas Neue', sans-serif; font-size:26px;
  letter-spacing:.03em; line-height:1;
}
.sx-price-note{
  font-family:'DM Mono', monospace; font-size:8.5px;
  letter-spacing:.1em; color:rgba(237,231,219,.38); margin-top:6px;
}
.sx-card-actions{
  display:flex; flex-direction:column; align-items:flex-end; gap:9px;
}
.sx-card-actions .sx-btn-primary{
  padding:12px 18px; font-size:10px;
  gap:8px; letter-spacing:.16em;
}
.sx-card-actions .sx-btn-primary:hover{ gap:10px; }
.sx-btn-link{
  font-family:'DM Mono', monospace; font-size:9px;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(200,169,110,.8);
  text-decoration:underline; text-underline-offset:3px;
  white-space:nowrap;
}
.sx-btn-link:hover,
.sx-btn-link:focus-visible{ color:#e5cb8c; }
.sx-btn-link-muted{ color:rgba(237,231,219,.5); }
.sx-btn-link-muted:hover{ color:#e5cb8c; }

/* Terminal view */
.sx-terminal-wrap{
  background:rgba(15,18,23,.82);
  border:1px solid rgba(198,161,91,.2);
  border-radius:2px; overflow-x:auto;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.sx-terminal-table{
  width:100%; border-collapse:collapse; min-width:900px;
}
.sx-term-th{
  text-align:left; font-family:'DM Mono', monospace;
  font-size:9px; font-weight:400; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(200,169,110,.75);
  padding:16px 14px; border-bottom:1px solid rgba(198,161,91,.2);
}
.sx-term-th:first-child{ padding:16px 20px; }
.sx-term-th-r{ text-align:right; padding:16px 20px; }
.sx-term-row{ transition: background .22s ease; }
.sx-term-row:hover{ background:rgba(200,169,110,.04); }
.sx-term-cell{
  padding:16px 14px;
  border-bottom:1px solid rgba(198,161,91,.08);
  font-family:'DM Mono', monospace; font-size:10px;
  letter-spacing:.1em; color:rgba(237,231,219,.6);
}
.sx-term-cell-title{ padding:16px 20px; }
.sx-term-cell-action{ padding:16px 20px; text-align:right; }
.sx-term-shortname{
  font-family:'DM Mono', monospace; font-size:12px;
  font-weight:500; letter-spacing:.06em; color:#F5F1E8;
}
.sx-term-fullname{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:14px; color:rgba(200,169,110,.7);
}
.sx-term-from{ font-size:11px; letter-spacing:.08em; color:#e5cb8c; }
.sx-term-view{
  font-family:'DM Mono', monospace; font-size:9.5px;
  font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:#0a0c10; background:#c8a96e;
  padding:9px 14px; border-radius:2px;
  white-space:nowrap; transition: all .22s ease;
  text-decoration:none;
}
.sx-term-view:hover,
.sx-term-view:focus-visible{ background:#e5cb8c; color:#0a0c10; }
.sx-term-atrelease{
  font-family:'DM Mono', monospace; font-size:9px;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(237,231,219,.35); white-space:nowrap;
}

/* Pagination */
.sx-pagination{
  display:flex; align-items:center; justify-content:center;
  gap:10px; margin-top:34px; flex-wrap:wrap;
}
.sx-page-btn{
  font-family:'DM Mono', monospace; font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase;
  color:rgba(237,231,219,.7);
  background:transparent;
  border:1px solid rgba(198,161,91,.28);
  border-radius:2px; padding:11px 16px;
  cursor:pointer; transition: all .22s ease;
}
.sx-page-btn:hover{ color:#F5F1E8; border-color:rgba(198,161,91,.55); }
.sx-page-btn.is-disabled,
.sx-page-btn:disabled{
  color:rgba(237,231,219,.28); cursor:not-allowed;
}
.sx-page-num{
  min-width:40px;
  font-family:'DM Mono', monospace; font-size:11px;
  letter-spacing:.08em; color:rgba(237,231,219,.65);
  background:transparent;
  border:1px solid rgba(198,161,91,.28);
  border-radius:2px; padding:11px 0;
  cursor:pointer; transition: all .22s ease;
}
.sx-page-num:hover{ color:#F5F1E8; border-color:rgba(198,161,91,.55); }
.sx-page-num.is-current{
  color:#0a0c10; background:#c8a96e; border-color:#c8a96e;
}
.sx-page-meta{
  margin-left:14px;
  display:inline-flex; align-items:center; gap:10px;
  background:linear-gradient(180deg, rgba(20,24,30,.92), rgba(11,13,17,.92));
  border:1px solid rgba(198,161,91,.26);
  border-radius:2px; padding:10px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  font-family:'DM Mono', monospace; font-size:9px;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(237,231,219,.55);
  white-space:nowrap;
}
.sx-page-meta-label{ color:rgba(200,169,110,.85); }
.sx-page-meta-view{ color:#ede7db; }
.sx-page-meta-sep{ width:1px; height:12px; background:rgba(198,161,91,.25); }
.sx-page-meta-range{}

/* ── Classification framework ────────────────────────── */
.sx-class{ padding: 0 0 clamp(72px,7vw,104px); }
.sx-class-head{ margin-bottom:34px; }
.sx-section-kicker{
  margin:0 0 14px;
  font-family:'DM Mono', monospace; font-size:10.5px;
  letter-spacing:.26em; text-transform:uppercase; color:#c8a96e;
}
.sx-section-h2{
  margin:0;
  font-family:'Bebas Neue', sans-serif; font-weight:400;
  font-size: clamp(32px, 3vw, 46px); line-height:.94;
  letter-spacing:.02em; text-transform:uppercase; color:#F5F1E8;
}
.sx-section-h2 em{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-weight:500; color:#c8a96e; text-transform:none; letter-spacing:0;
}
.sx-class-row{
  display:flex; flex-wrap:wrap; gap:16px; justify-content:center;
}
.sx-class-row > *{ flex:1 1 280px; min-width:0; box-sizing:border-box; }
@media (min-width: 1100px){
  .sx-class-row > *{ flex:0 0 calc(25% - 12px); }
}
.sx-cat-btn{
  text-align:left; background:#111115;
  border:1px solid rgba(198,161,91,.16);
  border-radius:2px;
  padding:24px; cursor:pointer;
  transition: all .22s ease;
  color:inherit; font: inherit;
}
.sx-cat-btn:hover,
.sx-cat-btn:focus-visible{
  border-color:rgba(198,161,91,.4);
  transform:translateY(-4px);
}
.sx-cat-btn svg{ margin-bottom:14px; }
.sx-cat-title{
  font-family:'DM Mono', monospace; font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:#F5F1E8;
  margin-bottom:8px;
}
.sx-cat-desc{
  margin:0 0 12px;
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:15.5px; line-height:1.45; color:rgba(237,231,219,.6);
}
.sx-cat-cta{
  font-family:'DM Mono', monospace; font-size:9px;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(200,169,110,.75);
}

/* ── Editions ────────────────────────────────────────── */
.sx-editions-section{ padding: 0 0 clamp(72px,7vw,104px); scroll-margin-top:110px; }
.sx-editions-head{
  display:grid;
  grid-template-columns: 1.35fr 0.95fr;
  gap:32px; align-items:end;
  margin-bottom:34px;
}
.sx-editions-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap:20px; margin-bottom:26px;
}
.sx-edition-card{
  background:#111115;
  border:1px solid rgba(198,161,91,.16);
  border-radius:2px;
  padding:32px 28px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.sx-edition-card.is-featured{
  border-color:rgba(198,161,91,.38);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 0 30px rgba(200,169,110,.06);
}
.sx-edition-num{
  font-family:'DM Mono', monospace; font-size:10px;
  letter-spacing:.26em; text-transform:uppercase; color:rgba(237,231,219,.45);
  margin-bottom:10px;
}
.sx-edition-name{
  font-family:'Bebas Neue', sans-serif; font-size:36px;
  letter-spacing:.03em; text-transform:uppercase; color:#F5F1E8;
  margin-bottom:14px;
}
.sx-edition-copy{
  margin:0 0 20px;
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:16.5px; line-height:1.5; color:rgba(237,231,219,.65);
}
.sx-edition-price-line{
  border-top:1px solid rgba(198,161,91,.14);
  padding-top:16px;
  font-family:'DM Mono', monospace; font-size:10px;
  letter-spacing:.12em; color:rgba(237,231,219,.5);
}
.sx-edition-price-line span{ color:#e5cb8c; }
.sx-editions-note-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap;
}
.sx-editions-note{
  margin:0;
  font-family:'DM Mono', monospace; font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(237,231,219,.4);
}

/* ── License process ─────────────────────────────────── */
.sx-process{ padding: 0 0 clamp(72px,7vw,104px); }
.sx-process-head{ margin-bottom:34px; }
.sx-process-row{
  position:relative;
  display:flex; flex-wrap:wrap; gap:16px; justify-content:center;
  margin-bottom:26px;
}
.sx-process-row::before{
  content:''; position:absolute; top:44px; left:1%; right:1%; height:1px;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(200,169,110,.28) 15%, rgba(200,169,110,.28) 85%, transparent);
}
.sx-process-row > *{ flex:1 1 280px; min-width:0; box-sizing:border-box; }
@media (min-width: 1100px){ .sx-process-row > *{ flex:0 0 calc(25% - 12px); } }

.sx-process-card{
  position:relative;
  background:rgba(15,18,23,.82);
  border:1px solid rgba(198,161,91,.16);
  border-radius:2px;
  padding:26px 24px;
  box-shadow: 0 18px 40px rgba(0,0,0,.32);
}
.sx-process-num{
  font-family:'Bebas Neue', sans-serif; font-size:24px;
  letter-spacing:.06em; color:rgba(200,169,110,.75);
  margin-bottom:12px;
}
.sx-process-title{
  font-family:'DM Mono', monospace; font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:#F5F1E8;
  margin-bottom:9px;
}
.sx-process-desc{
  margin:0;
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:15.5px; line-height:1.5; color:rgba(237,231,219,.6);
}
.sx-conditions{
  background:rgba(15,18,23,.6);
  border:1px solid rgba(198,161,91,.14);
  border-radius:2px;
  padding:22px 26px;
  display:flex; flex-wrap:wrap; gap:8px 24px; align-items:center;
}
.sx-conditions-label{
  font-family:'DM Mono', monospace; font-size:9.5px;
  letter-spacing:.2em; text-transform:uppercase; color:rgba(200,169,110,.8);
}
.sx-conditions-body{
  font-family:'DM Mono', monospace; font-size:9px;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(237,231,219,.5);
}
.sx-conditions-links{
  display:flex; gap:16px; margin-left:auto;
}
.sx-conditions-links a{
  font-family:'DM Mono', monospace; font-size:9px;
  letter-spacing:.16em; text-transform:uppercase;
  color:#c8a96e; text-decoration:none;
}
.sx-conditions-links a:hover,
.sx-conditions-links a:focus-visible{ color:#e5cb8c; }

/* ── Evidence ────────────────────────────────────────── */
.sx-evidence-section{ padding: 0 0 clamp(72px,7vw,104px); }
.sx-evidence-grid{
  display:grid;
  grid-template-columns: minmax(340px,1fr) minmax(340px,1.1fr);
  gap:28px; align-items:stretch;
}
.sx-evidence-card{
  position:relative;
  background:#111115;
  border:1px solid rgba(198,161,91,.16);
  border-radius:2px; padding:36px 32px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 22px 46px rgba(0,0,0,.35);
  display:flex; flex-direction:column;
  overflow:hidden;
}
.sx-evidence-card svg[aria-hidden]{
  position:absolute; right:-28px; bottom:-16px;
  width:220px; pointer-events:none; opacity:.6;
}
.sx-evidence-kicker{
  position:relative; margin:0 0 14px;
  font-family:'DM Mono', monospace; font-size:10.5px;
  letter-spacing:.26em; text-transform:uppercase; color:#c8a96e;
}
.sx-evidence-h2{
  margin:0 0 18px;
  font-family:'Bebas Neue', sans-serif; font-weight:400;
  font-size: clamp(30px, 2.8vw, 42px); line-height:.94;
  letter-spacing:.02em; text-transform:uppercase; color:#F5F1E8;
}
.sx-evidence-h2 em{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-weight:500; color:#c8a96e; text-transform:none; letter-spacing:0;
}
.sx-evidence-copy{
  margin:0 0 22px;
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:17.5px; line-height:1.55; color:rgba(237,231,219,.68);
}
.sx-evidence-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.sx-evidence-tag{
  font-family:'DM Mono', monospace; font-size:9px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(237,231,219,.65);
  border:1px solid rgba(198,161,91,.24);
  border-radius:2px; padding:6px 10px;
}
.sx-evidence-note{
  margin:0;
  font-family:'DM Mono', monospace; font-size:9px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(237,231,219,.4);
}
.sx-audit-card{
  background:rgba(15,18,23,.82);
  border:1px solid rgba(198,161,91,.22);
  border-radius:2px; padding:36px 32px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  display:flex; flex-direction:column;
}
.sx-audit-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; flex-wrap:wrap; margin-bottom:8px;
}
.sx-audit-title{
  font-family:'DM Mono', monospace; font-size:10px;
  letter-spacing:.22em; text-transform:uppercase; color:#c8a96e;
}
.sx-audit-tag{
  font-family:'DM Mono', monospace; font-size:8.5px;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(237,231,219,.42);
  border:1px solid rgba(198,161,91,.22);
  border-radius:2px; padding:4px 8px;
}
.sx-audit-sub{
  margin:0 0 24px;
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:15.5px; line-height:1.5; color:rgba(237,231,219,.55);
}
.sx-audit-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:rgba(198,161,91,.14);
  border:1px solid rgba(198,161,91,.14);
  margin-bottom:20px;
}
.sx-audit-cell{ background:#0d1015; padding:18px 16px; }
.sx-audit-val{
  font-family:'Bebas Neue', sans-serif; font-size:27px;
  letter-spacing:.03em; color:#ede7db; line-height:1; margin-bottom:7px;
}
.sx-audit-val.is-lead{ color:#e5cb8c; }
.sx-audit-key{
  font-family:'DM Mono', monospace; font-size:8.5px;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(237,231,219,.45);
}
.sx-audit-foot{
  margin:0;
  font-family:'DM Mono', monospace; font-size:8.5px;
  letter-spacing:.12em; text-transform:uppercase; color:rgba(237,231,219,.4);
  line-height:1.7;
}

/* ── Methodology & Risk ──────────────────────────────── */
.sx-risk{ padding: 0 0 clamp(72px,7vw,104px); }
.sx-risk-card{
  position:relative;
  background:rgba(15,18,23,.6);
  border:1px solid rgba(198,161,91,.18);
  border-radius:2px; padding:38px 36px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 22px 46px rgba(0,0,0,.32);
  overflow:hidden;
}
.sx-risk-decor{
  position:absolute; right:-50px; top:50%; transform:translateY(-50%);
  width:300px; height:300px; pointer-events:none; opacity:.55;
}
.sx-risk-head{
  position:relative; display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.sx-risk-h2{
  margin:0;
  font-family:'Bebas Neue', sans-serif; font-weight:400;
  font-size: clamp(26px, 2.4vw, 36px); letter-spacing:.03em;
  text-transform:uppercase; color:#F5F1E8;
}
.sx-risk-h2 em{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-weight:500; color:#c8a96e; text-transform:none; letter-spacing:0;
}
.sx-risk-body{
  position:relative; columns:2; column-gap:44px; margin-bottom:24px;
}
.sx-risk-body p{
  margin:0;
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:17px; line-height:1.6; color:rgba(237,231,219,.66);
  text-wrap:pretty;
}
.sx-risk-links{
  position:relative;
  display:flex; flex-wrap:wrap; gap:18px;
  border-top:1px solid rgba(198,161,91,.14);
  padding-top:20px;
}
.sx-risk-links a{
  font-family:'DM Mono', monospace; font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase; color:#c8a96e;
  text-decoration:none;
}
.sx-risk-links a:hover,
.sx-risk-links a:focus-visible{ color:#e5cb8c; }

/* ── Final CTA ───────────────────────────────────────── */
.sx-final{ padding: 0 0 clamp(88px,9vw,128px); }
.sx-final-card{
  position:relative;
  background:rgba(15,18,23,.82);
  border:1px solid rgba(198,161,91,.24);
  border-radius:2px;
  padding: clamp(52px,6vw,84px) 44px;
  text-align:center;
  overflow:hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 20px 60px rgba(0,0,0,.5);
}
.sx-final-glow{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(700px 300px at 50% -20%, rgba(200,169,110,.12), transparent 70%);
}
.sx-final-frame{
  position:absolute; inset:14px; pointer-events:none;
  border:1px solid rgba(198,161,91,.16); border-radius:2px;
}
.sx-final-frame2{
  position:absolute; inset:28px; pointer-events:none;
  border:1px solid rgba(198,161,91,.08); border-radius:2px;
}
.sx-final-tick-top,
.sx-final-tick-bottom{
  position:absolute; left:50%; width:1px; pointer-events:none;
}
.sx-final-tick-top{
  top:0; height:34%;
  background:linear-gradient(180deg, rgba(229,203,140,.35), transparent);
}
.sx-final-tick-bottom{
  bottom:0; height:20%;
  background:linear-gradient(0deg, rgba(229,203,140,.22), transparent);
}
.sx-final-kicker{
  position:relative; margin:0 0 16px;
  font-family:'DM Mono', monospace; font-size:10.5px;
  letter-spacing:.28em; text-transform:uppercase; color:#c8a96e;
}
.sx-final-h2{
  position:relative; margin:0 auto 20px; max-width:20ch;
  font-family:'Bebas Neue', sans-serif; font-weight:400;
  font-size: clamp(38px, 4vw, 60px); line-height:.95;
  letter-spacing:.02em; text-transform:uppercase; color:#F5F1E8;
}
.sx-final-h2 em{
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-weight:500; color:#c8a96e; text-transform:none; letter-spacing:0;
}
.sx-final-copy{
  position:relative; margin:0 auto 34px; max-width:56ch;
  font-family:'Cormorant Garamond', serif; font-style:italic;
  font-size:18px; line-height:1.55; color:rgba(237,231,219,.68);
}
.sx-final-actions{
  position:relative;
  display:flex; justify-content:center; gap:14px; flex-wrap:wrap;
}

/* ── Utility ─────────────────────────────────────────── */
.sr-only{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1080px){
  .sx-avail-header,
  .sx-editions-head{
    grid-template-columns: 1fr;
    gap:18px;
  }
}
/* Tablet hero padding tier (760–1079 px) — before the 900 px stack
   collapse so it still applies inside the tablet range. */
@media (max-width: 1079px) and (min-width: 760px){
  .sx-hero{ padding: clamp(36px, 4.5vw, 48px) 0 clamp(28px, 3.5vw, 40px); }
}
@media (max-width: 900px){
  .sx-hero-grid{
    grid-template-columns: 1fr;
    gap: clamp(20px, 4vw, 30px);
  }
  .sx-hero-copy{ padding-left:16px; }
  .sx-hero-decor{ display:none; }
  .sx-evidence-grid{
    grid-template-columns: 1fr;
    gap:20px;
  }
  .sx-risk-body{ columns:1; }
  .sx-risk-decor{ display:none; }
  .sx-conditions-links{ margin-left:0; }
}
@media (max-width: 760px){
  .sx-wrap{ padding:0 20px; }
  .sx-hero{ padding: clamp(24px, 5vw, 36px) 0 clamp(20px, 4vw, 32px); }
  .sx-hero-copy{ padding-left:0; }
  .sx-hero-copy-shade,
  .sx-hero-copy-rail,
  .sx-hero-marker{ display:none; }
  .sx-hero-assurances{ grid-template-columns:1fr; }
  .sx-status-cell{ border-right:none; border-bottom:1px solid rgba(198,161,91,.12); }
  .sx-status-cell:last-child{ border-bottom:none; }
  .sx-cards-grid{ grid-template-columns: 1fr; }
  .sx-card-media-frame{ max-height:220px; }
  .sx-dev-panel__frame{ height:110px; padding:12px 16px 12px; }
  .sx-dev-panel__title{ font-size:clamp(24px, 5vw, 30px); }
  .sx-dev-panel__desc{ font-size:12.5px; }
  .sx-audit-grid{ grid-template-columns: repeat(2, 1fr); }
  .sx-card-foot{
    flex-direction:column; align-items:flex-start; gap:14px;
  }
  .sx-card-actions{ align-items:flex-start; width:100%; }
  .sx-card-actions .sx-btn-primary{ width:100%; justify-content:center; }
  .sx-pagination{ margin-top:24px; }
  .sx-page-meta{ margin-left:0; width:100%; justify-content:center; }
  .sx-final-card{ padding: 44px 20px; }
  .sx-corner-label{ display:none; }
}
@media (max-width: 480px){
  .sx-audit-grid{ grid-template-columns: 1fr; }
  .sx-editions-note-row{ flex-direction:column; align-items:flex-start; }
  .sx-editions-note-row .sx-btn-outline{ width:100%; justify-content:center; }
}

/* =====================================================================
   MOBILE HERO REBUILD — /systems  (Option A: Architecture card + info
   grid slot between hero description and CTA buttons)
   Scope: 0–767 px only. Desktop layout above 767 px unchanged.
   The inline script in systems.html relocates .sx-status-strip into
   .sx-hero-grid on mobile; these rules order and restyle the group.
   ===================================================================== */
@media (max-width: 767px){

  /* ── Hero shell ── */
  body[data-page="systems"] .sx-hero{
    padding: 44px 0 clamp(56px, 6vw, 72px);
  }
  body[data-page="systems"] .sx-hero-grid{
    display: flex;
    flex-direction: column;
    grid-template-columns: initial;
    gap: 0;
    align-items: stretch;
  }
  /* Promote hero-copy children into the flex context so we can order them
     alongside the scene-wrap and (moved) status strip. */
  body[data-page="systems"] .sx-hero-grid > .sx-hero-copy{ display: contents; }

  /* Option A mobile order */
  body[data-page="systems"] .sx-hero-grid > .sx-hero-copy .sx-hero-eyebrow    { order: 1; }
  body[data-page="systems"] .sx-hero-grid > .sx-hero-copy .sx-hero-h1         { order: 2; }
  body[data-page="systems"] .sx-hero-grid > .sx-hero-copy .sx-hero-lede       { order: 3; }
  body[data-page="systems"] .sx-hero-grid > .sx-hero-scene-wrap               { order: 4; }
  body[data-page="systems"] .sx-hero-grid > .sx-status-strip                  { order: 5; }
  body[data-page="systems"] .sx-hero-grid > .sx-hero-copy .sx-hero-cta-row    { order: 6; }
  body[data-page="systems"] .sx-hero-grid > .sx-hero-copy .sx-hero-assurances { order: 7; }

  /* ── Eyebrow, headline, lede ── */
  body[data-page="systems"] .sx-hero-eyebrow{
    font-size: 11.5px;
    letter-spacing: 0.28em;
    margin: 0 0 24px;
    align-items: flex-start;
    gap: 10px;
  }
  body[data-page="systems"] .sx-hero-eyebrow-dot{ margin-top: 5px; flex-shrink: 0; }
  body[data-page="systems"] .sx-hero-eyebrow-rule{ display: none; }

  body[data-page="systems"] .sx-hero-h1{
    font-size: clamp(42px, 12.5vw, 58px);
    line-height: 0.94;
    letter-spacing: -0.01em;
    margin: 0 0 26px;
    text-wrap: balance;
  }
  body[data-page="systems"] .sx-hero-h1 em{ font-size: 1em; }

  body[data-page="systems"] .sx-hero-lede{
    font-size: 17px;
    line-height: 1.6;
    max-width: 100%;
    margin: 0 0 30px;
  }

  /* ── Architecture Active card (scene) ── */
  body[data-page="systems"] .sx-hero-scene-wrap{
    width: 100%;
    margin: 0 0 12px;
  }
  body[data-page="systems"] .sx-hero-scene{
    background:
      radial-gradient(circle at 50% 32%, rgba(200,169,110,0.08), transparent 60%),
      linear-gradient(180deg, rgba(18,22,28,0.9), rgba(10,12,16,0.92));
    border: 1px solid rgba(198,161,91,0.28);
    border-radius: 20px 20px 0 0;
    padding: 16px 18px 14px;
    box-shadow:
      0 18px 44px rgba(0,0,0,0.55),
      inset 0 1px 0 rgba(229,203,140,0.10);
    animation-delay: .28s;
  }
  body[data-page="systems"] .sx-hero-scene-head{
    padding: 0 4px 8px;
    align-items: center;
  }
  body[data-page="systems"] .sx-hero-scene-tag{ font-size: 10.5px; letter-spacing: 0.22em; }
  body[data-page="systems"] .sx-hero-scene-layers{ font-size: 9.5px; letter-spacing: 0.18em; }

  body[data-page="systems"] .sx-hero-scene-svg{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    min-height: 320px;
    max-height: 430px;
    display: block;
    margin: 4px auto 4px;
  }

  body[data-page="systems"] .sx-hero-scene-badge-wrap{ margin-top: 6px; }
  body[data-page="systems"] .sx-hero-scene-badge{
    font-size: 10.5px;
    letter-spacing: 0.20em;
    padding: 8px 16px;
  }

  /* ── Status strip (moved into hero on mobile) ── */
  body[data-page="systems"] .sx-hero-grid > .sx-status-strip{
    width: 100%;
    margin: 0 0 26px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid rgba(198,161,91,0.28);
    border-top: none;
    border-radius: 0 0 20px 20px;
    background: linear-gradient(180deg, rgba(15,18,23,0.88), rgba(10,12,16,0.92));
    box-shadow:
      0 18px 44px rgba(0,0,0,0.55),
      inset 0 1px 0 rgba(255,255,255,0.03);
  }
  /* 2-col × 3-row cell border pattern:
     right border only on left column, bottom border on rows 1 & 2 */
  body[data-page="systems"] .sx-hero-grid > .sx-status-strip .sx-status-cell{
    padding: 22px 18px;
    border-right: 1px solid rgba(198,161,91,0.14);
    border-bottom: 1px solid rgba(198,161,91,0.14);
  }
  body[data-page="systems"] .sx-hero-grid > .sx-status-strip .sx-status-cell:nth-child(2n){
    border-right: none;
  }
  body[data-page="systems"] .sx-hero-grid > .sx-status-strip .sx-status-cell:nth-last-child(-n+2){
    border-bottom: none;
  }

  /* ── CTA row & assurances ── */
  body[data-page="systems"] .sx-hero-cta-row{
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin: 0 0 32px;
  }
  body[data-page="systems"] .sx-hero-cta-row .sx-btn,
  body[data-page="systems"] .sx-hero-cta-row .sx-btn-primary,
  body[data-page="systems"] .sx-hero-cta-row .sx-btn-outline{
    width: 100%;
    justify-content: center;
    box-sizing: border-box;
    padding: 16px 20px;
    font-size: 12px;
    letter-spacing: 0.22em;
    border-radius: 4px;
  }
  body[data-page="systems"] .sx-hero-cta-row .sx-btn-primary{ min-height: 58px; }
  body[data-page="systems"] .sx-hero-cta-row .sx-btn-outline{ min-height: 56px; }

  body[data-page="systems"] .sx-hero-assurances{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    margin: 0;
  }
  body[data-page="systems"] .sx-hero-assurance{
    font-size: 10.5px;
    letter-spacing: 0.17em;
    line-height: 1.5;
    align-items: flex-start;
  }
  body[data-page="systems"] .sx-hero-assurance svg{ margin-top: 2px; flex-shrink: 0; }

  /* Orientation section — original spacing came from the strip section
     which is now hidden on mobile; give the following section its own gap. */
  body[data-page="systems"] .sx-orient-section{ padding-top: 8px; }
}

@media (max-width: 359px){
  body[data-page="systems"] .sx-wrap{ padding: 0 16px; }
  body[data-page="systems"] .sx-hero{ padding: 36px 0 clamp(44px, 12vw, 60px); }
  body[data-page="systems"] .sx-hero-h1{ font-size: clamp(38px, 12vw, 46px); }
  body[data-page="systems"] .sx-hero-assurances{ grid-template-columns: 1fr; }
  body[data-page="systems"] .sx-hero-grid > .sx-status-strip .sx-status-cell{
    padding: 18px 14px;
  }
  body[data-page="systems"] .sx-hero-scene{ padding: 14px 14px 12px; }
  body[data-page="systems"] .sx-hero-scene-svg{ min-height: 300px; }
}