/* ==========================================================================
   EliteBlocc — assets/css/pages/eb-system-assembly.css
   Version: 1.0

   NAMESPACE  .eb-sa  (EliteBlocc System Assembly)
   SLUG       system-assembly
   LOADED BY  enqueue-assets.php §12 — eb_page_match('system-assembly')

   DESIGN
   ─────────────────────────────────────────────────────────────────────
   Mixed light / dark sections. Colour rhythm:
   dark → light-cream → dark-em → light-tint → split → light →
   dark-grid → light-gold → dark-em → split
   Emerald atmosphere on dark sections: dot-grid + radial glows.

   FONTS
   ─────────────────────────────────────────────────────────────────────
   Orbitron + Inter loaded globally by theme — no @import here.
   Font stacks reference the global tokens: var(--eb-font-heading), var(--eb-font-body).

   BUTTONS
   ─────────────────────────────────────────────────────────────────────
   Prefixed with #eb-sa-wrap to achieve (1,1,0) specificity —
   beats Elementor's global button resets at (0,1,0) without !important.

   GSAP
   ─────────────────────────────────────────────────────────────────────
   Elements with data-sa-reveal start invisible via CSS.
   JS adds .is-visible when ScrollTrigger fires.
   prefers-reduced-motion disables all motion.
   ========================================================================== */


/* ─── 00. GSAP REVEAL STATES ──────────────────────────────────────────────── */
[data-sa-reveal] {
  opacity:   0;
  transform: translateY(22px);
  transition: opacity .6s var(--eb-ease-power, cubic-bezier(.16,1,.3,1)),
              transform .6s var(--eb-ease-power, cubic-bezier(.16,1,.3,1));
}
[data-sa-reveal].is-visible {
  opacity:   1;
  transform: translateY(0);
}
[data-sa-reveal-left] {
  opacity:   0;
  transform: translateX(-36px);
  transition: opacity .65s var(--eb-ease-power, cubic-bezier(.16,1,.3,1)),
              transform .65s var(--eb-ease-power, cubic-bezier(.16,1,.3,1));
}
[data-sa-reveal-right] {
  opacity:   0;
  transform: translateX(36px);
  transition: opacity .65s var(--eb-ease-power, cubic-bezier(.16,1,.3,1)),
              transform .65s var(--eb-ease-power, cubic-bezier(.16,1,.3,1));
}
[data-sa-reveal-left].is-visible,
[data-sa-reveal-right].is-visible {
  opacity:   1;
  transform: translateX(0);
}
[data-sa-reveal-scale] {
  opacity:   0;
  transform: scale(.9);
  transition: opacity .5s var(--eb-ease-power, cubic-bezier(.16,1,.3,1)),
              transform .5s var(--eb-ease-power, cubic-bezier(.16,1,.3,1));
}
[data-sa-reveal-scale].is-visible {
  opacity:   1;
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  [data-sa-reveal],
  [data-sa-reveal-left],
  [data-sa-reveal-right],
  [data-sa-reveal-scale] {
    opacity:   1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ─── 01. PAGE WRAPPER ────────────────────────────────────────────────────── */
#eb-sa-wrap {
  /* Design tokens — local colour aliases */
  --sa-dark:      #030c07;
  --sa-dark-mid:  #040f07;
  --sa-dark-deep: #020a04;
  --sa-em:        #10b981;
  --sa-em-deep:   #064e3b;
  --sa-em-dim:    #047857;
  --sa-gold:      #f59e0b;
  --sa-gold-dim:  #b45309;
  --sa-ivory:     #F5F4F2;
  --sa-cream:     #f5f4f0;
  --sa-tint:      #eef5f0;
  --sa-line-em:   rgba(16,185,129,.18);
  --sa-line-em-s: rgba(16,185,129,.10);
  --sa-dot-em:    rgba(16,185,129,.13);

  font-family: var(--eb-font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}


/* ─── 02. SHARED UTILITIES ────────────────────────────────────────────────── */
.eb-sa-eyebrow {
  display:    inline-flex;
  align-items: center;
  gap:        8px;
  font-family: var(--eb-font-mono);
  font-size:  8px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color:      var(--sa-em);
  margin-bottom: 14px;
}
.eb-sa-eyebrow--gold { color: var(--sa-gold-dim); }
.eb-sa-eyebrow--muted { color: rgba(150,170,150,.7); }
.eb-sa-ey-rule {
  display:    block;
  width:      16px;
  height:     1px;
  background: currentColor;
  opacity:    .7;
}

/* Dark heading */
.eb-sa-h2 {
  font-family: var(--eb-font-body);
  font-weight: 900;
  color:       var(--sa-ivory);
  letter-spacing: -.01em;
  line-height: .92;
}
/* Light heading */
.eb-sa-h2--light {
  color: #1a2e1d;
}
.eb-sa-h2--gold {
  color: #1a1200;
}
.eb-sa-em  { color: var(--sa-em); }
.eb-sa-gold { color: var(--sa-gold-dim); }

/* Dark atmosphere mixin — applied to all dark sections */
.eb-sa-dark-atm {
  position: relative;
  overflow: hidden;
}
.eb-sa-dark-atm::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--sa-dot-em) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
}
/* All direct children above the atmosphere */
.eb-sa-dark-atm > * { position: relative; z-index: 1; }


/* ─── 03. BUTTONS — #eb-sa-wrap prefix for (1,1,0) specificity ────────────── */
#eb-sa-wrap .eb-sa-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  font-family:     var(--eb-font-body);
  font-size:       10px;
  font-weight:     700;
  letter-spacing:  .1em;
  text-transform:  uppercase;
  text-decoration: none;
  padding:         11px 24px;
  border:          1.5px solid transparent;
  cursor:          pointer;
  white-space:     nowrap;
  position:        relative;
  overflow:        hidden;
  transition:      background .25s ease, border-color .25s ease, color .25s ease, box-shadow .4s ease;
  line-height:     1;
}
#eb-sa-wrap .eb-sa-btn-arr {
  display:    inline-block;
  font-family: var(--eb-font-body);
  font-weight: 400;
  transition: transform .2s ease;
}
#eb-sa-wrap .eb-sa-btn:hover .eb-sa-btn-arr { transform: translateX(3px); }
#eb-sa-wrap .eb-sa-btn:focus-visible {
  outline:        2px solid var(--sa-em);
  outline-offset: 3px;
}

/* Primary */
#eb-sa-wrap .eb-sa-btn--primary {
  background:   linear-gradient(135deg, var(--sa-em-deep), var(--sa-em-dim));
  border-color: var(--sa-em);
  color:        #ffffff;
}
#eb-sa-wrap .eb-sa-btn--primary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 20%, rgba(255,255,255,.12) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: saBtnSheen 5s ease-in-out 2s infinite;
}
@keyframes saBtnSheen {
  0%,74%,100% { transform: translateX(-100%); }
  81%         { transform: translateX(220%);  }
}
#eb-sa-wrap .eb-sa-btn--primary:hover {
  background:   linear-gradient(135deg, var(--sa-em-dim), var(--sa-em));
  border-color: var(--sa-em);
  color:        #ffffff;
}

/* Secondary on dark */
#eb-sa-wrap .eb-sa-btn--secondary-dark {
  background:   transparent;
  border-color: rgba(255,255,255,.25);
  color:        rgba(255,255,255,.72);
}
#eb-sa-wrap .eb-sa-btn--secondary-dark:hover {
  border-color: rgba(255,255,255,.55);
  color:        #ffffff;
  background:   rgba(255,255,255,.04);
}

/* Secondary on light */
#eb-sa-wrap .eb-sa-btn--secondary-light {
  background:   transparent;
  border-color: rgba(6,78,59,.38);
  color:        var(--sa-em-deep);
}
#eb-sa-wrap .eb-sa-btn--secondary-light:hover {
  background:   rgba(16,185,129,.06);
  border-color: var(--sa-em);
  color:        var(--sa-em-deep);
}

/* Tertiary text-link */
#eb-sa-wrap .eb-sa-btn--tertiary {
  background:     transparent;
  border:         none;
  border-bottom:  1px solid rgba(16,185,129,.35);
  color:          rgba(16,185,129,.72);
  padding:        4px 0;
  font-size:      9.5px;
}
#eb-sa-wrap .eb-sa-btn--tertiary:hover {
  color:              var(--sa-em);
  border-bottom-color: var(--sa-em);
}

/* Tertiary on light */
#eb-sa-wrap .eb-sa-btn--tertiary-light {
  border-bottom-color: rgba(6,78,59,.3);
  color:               rgba(6,78,59,.65);
}
#eb-sa-wrap .eb-sa-btn--tertiary-light:hover {
  color:              var(--sa-em-deep);
  border-bottom-color: var(--sa-em-deep);
}

.eb-sa-ctas {
  display:   flex;
  flex-wrap: wrap;
  gap:       10px;
  align-items: center;
}
.eb-sa-ctas--col {
  flex-direction: column;
  align-items:    flex-start;
}


/* ─── 04. HERO — DARK ─────────────────────────────────────────────────────── */
.eb-sa-hero {
  background:  var(--sa-dark);
  padding:     0 0 0 0;
  position:    relative;
  overflow:    hidden;
}

/* Top gradient rule */
.eb-sa-hero__rule {
  height: 2.5px;
  background: linear-gradient(90deg,
    transparent,
    rgba(16,185,129,.7) 32%,
    rgba(245,158,11,.65) 68%,
    transparent);
}

/* Dot grid */
.eb-sa-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--sa-dot-em) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
}

/* Emerald glow blobs */
.eb-sa-hero__glow-a {
  position:       absolute;
  width:          520px;
  height:         520px;
  border-radius:  50%;
  background:     radial-gradient(circle, rgba(16,185,129,.16) 0%, rgba(6,78,59,.05) 45%, transparent 70%);
  top:            -140px;
  right:          -100px;
  pointer-events: none;
  z-index:        0;
}
.eb-sa-hero__glow-b {
  position:       absolute;
  width:          300px;
  height:         300px;
  border-radius:  50%;
  background:     radial-gradient(circle, rgba(16,185,129,.09) 0%, transparent 65%);
  bottom:         -60px;
  left:           30%;
  pointer-events: none;
  z-index:        0;
}

.eb-sa-hero__inner {
  display:    grid;
  grid-template-columns: 1fr 400px;
  gap:        52px;
  align-items: flex-end;
  padding:    52px 60px 0;
  position:   relative;
  z-index:    1;
  max-width:  1400px;
  margin:     0 auto;
}

/* Left — text with emerald left accent */
.eb-sa-hero__text {
  border-left: 3px solid rgba(16,185,129,.45);
  padding-left: 24px;
  padding-bottom: 52px;
}

.eb-sa-hero__h1 {
  font-family:    var(--eb-font-body);
  font-weight:    900;
  font-size:      clamp(36px, 5.2vw, 68px);
  line-height:    .88;
  letter-spacing: -.01em;
  color:          var(--sa-ivory);
  margin-bottom:  18px;
}
.eb-sa-hero__h1 span { color: var(--sa-em); }

.eb-sa-hero__sub {
  font-size:     14px;
  font-weight:   300;
  color:         rgba(255,255,255,.52);
  line-height:   1.78;
  max-width:     460px;
  margin-bottom: 10px;
}
.eb-sa-hero__support {
  font-size:     13px;
  font-weight:   300;
  color:         rgba(255,255,255,.52);
  line-height:   1.72;
  max-width:     440px;
  margin-bottom: 26px;
}

/* Right — wall panel */
.eb-sa-hero__wall-wrap { padding-bottom: 52px; }

.eb-sa-wall-panel {
  background: rgba(2,12,5,.94);
  border:     1px solid rgba(16,185,129,.22);
  border-top: 2px solid var(--sa-em);
  padding:    16px;
}
.eb-sa-wall-panel__label {
  font-family:    var(--eb-font-mono);
  font-size:      7px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          rgba(16,185,129,.5);
  text-align:     center;
  margin-bottom:  10px;
}
/* ── WALL CROSS-SECTION — CORRECTED ANATOMY v1.1 ────────────────────
   HDIII 44/20 verified (CSV: PDF-HDIII-44-20)
   WC 45mm | EPS 200mm | RC 150mm | WC 45mm = 440mm total
   EPS (200mm) = 45.5% dominant zone — cold exterior side of RC core
   Flex values map 1:1 to millimetres for pixel-accurate proportions
   ─────────────────────────────────────────────────────────────────── */
.eb-sa-wall {
  display:       flex;
  height:        220px;
  gap:           3px;
  border-radius: 6px;
  overflow:      hidden;
  position:      relative;
}
/* Scan line — sweeps left-to-right on a loop */
.eb-sa-wall::after {
  content:    '';
  position:   absolute;
  top: 0; bottom: 0;
  width:      3px;
  background: linear-gradient(180deg, transparent, rgba(16,185,129,.65), transparent);
  pointer-events: none;
  animation:  eb-sa-scan 4s ease-in-out 2s infinite;
}
@keyframes eb-sa-scan {
  0%   { left: -4px; opacity: 0; }
  8%   { opacity: 1; }
  88%  { opacity: .7; }
  100% { left: 100%; opacity: 0; }
}

.eb-sa-wall-layer {
  display:    flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position:   relative;
  overflow:   hidden;
  cursor:     pointer;
  border-radius: 3px;
  transition: flex .42s cubic-bezier(.16,1,.3,1), filter .2s;
}
/* Expand hovered layer */
.eb-sa-wall-layer:hover { flex: 300!important; }
/* Subtle hover highlight */
.eb-sa-wall-layer::before {
  content:    '';
  position:   absolute; inset: 0;
  background: rgba(255,255,255,.07);
  opacity:    0;
  transition: opacity .2s;
  pointer-events: none;
}
.eb-sa-wall-layer:hover::before  { opacity: 1; }
.eb-sa-wall-layer:focus-visible {
  outline:        2px solid var(--sa-em);
  outline-offset: -2px;
}
/* Hover dim label — slides up from bottom */
.eb-sa-wall-layer .eb-sa-wl-lbl {
  position:   absolute;
  bottom:     0; left: 0; right: 0;
  background: rgba(0,0,0,.72);
  padding:    5px 7px;
  text-align: center;
  transform:  translateY(100%);
  transition: transform .28s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.eb-sa-wall-layer:hover .eb-sa-wl-lbl { transform: translateY(0); }
.eb-sa-wl-lbl strong {
  display:      block;
  font-size:    8.5px;
  font-weight:  700;
  letter-spacing: .06em;
  color:        #fff;
}
.eb-sa-wl-lbl span {
  display:    block;
  font-size:  7.5px;
  font-weight: 300;
  color:      rgba(255,255,255,.5);
  margin-top: 1px;
}

/* ── LAYER FILLS — verified mm proportions ── */

/* Thin render/plaster decoration (not part of 440mm structural depth) */
.eb-sa-wl--rnd {
  flex:       10;
  flex-shrink: 0;
  background: rgba(180,190,180,.12);
  border:     1px solid rgba(255,255,255,.06);
}

/* WC shells — 45mm each / 10.2% of 440mm */
.eb-sa-wl--wco {
  flex: 45;
  background: linear-gradient(180deg, #7a4f25, #5a3818);
}
.eb-sa-wl--wco::after {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg,
    rgba(255,255,255,.07) 0, rgba(255,255,255,.07) 1px,
    transparent 0, transparent 50%);
  background-size: 6px 6px;
  pointer-events: none;
}

/* EPS insulation — 200mm / 45.5% of 440mm — DOMINANT ZONE */
.eb-sa-wl--eps {
  flex:       200;
  background: linear-gradient(180deg, rgba(16,185,129,.42), rgba(5,150,105,.36));
  border:     1px solid rgba(16,185,129,.28);
  animation:  eb-sa-eps-glow 4s ease-in-out 2.5s infinite;
}
@keyframes eb-sa-eps-glow {
  0%,100% { box-shadow: none; }
  50%     { box-shadow: 0 0 16px rgba(16,185,129,.28); }
}
.eb-sa-wl--eps::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.15) 1px, transparent 1px);
  background-size: 9px 9px;
  pointer-events: none;
}

/* RC structural core — 150mm / 34.1% of 440mm */
.eb-sa-wl--rc {
  flex:       150;
  background: linear-gradient(180deg, rgba(59,130,246,.42), rgba(37,99,235,.36));
  border:     1px solid rgba(59,130,246,.28);
}
.eb-sa-wl--rc::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 100% 36px, 28px 100%;
  pointer-events: none;
}

/* ── DIMENSION RULER below wall ── */
.eb-sa-wall-ruler {
  display:    flex;
  gap:        3px;
  height:     20px;
  margin-top: 7px;
}
.eb-sa-xr {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  justify-content: flex-end;
  font-size:      7px;
  font-weight:    600;
  white-space:    nowrap;
  transition:     flex .42s cubic-bezier(.16,1,.3,1);
}
.eb-sa-xr::before {
  content:    '';
  display:    block;
  width:      100%;
  height:     1px;
  background: currentColor;
  margin-bottom: 3px;
}
.eb-sa-xr--rnd { flex: 10; color: rgba(180,190,180,.25); }
.eb-sa-xr--wc  { flex: 45; color: rgba(120,70,30,.55); }
.eb-sa-xr--eps { flex: 200; color: rgba(16,185,129,.6); }
.eb-sa-xr--rc  { flex: 150; color: rgba(59,130,246,.6); }

/* ── KEY / LEGEND ── */
.eb-sa-wall-key {
  display:    flex;
  gap:        12px;
  flex-wrap:  wrap;
  margin-top: 10px;
}
.eb-sa-wk {
  display:     flex;
  align-items: center;
  gap:         5px;
  font-size:   8.5px;
  font-weight: 500;
  color:       rgba(255,255,255,.42);
}
.eb-sa-wk-dot {
  width:         8px;
  height:        8px;
  border-radius: 2px;
  flex-shrink:   0;
}

.eb-sa-wall-dim {
  text-align:     center;
  font-family:    var(--eb-font-mono);
  font-size:      6px;
  color:          rgba(16,185,129,.35);
  margin-top:     5px;
  letter-spacing: .08em;
  display:        none; /* replaced by .eb-sa-wall-ruler */
}

.eb-sa-wall-info {
  background:         rgba(2,10,4,.97);
  border:             1px solid rgba(16,185,129,.2);
  border-top:         2px solid var(--sa-em);
  padding:            12px 16px;
  margin-top:         10px;
  transition:         border-top-color .2s ease;
}
.eb-sa-wi-tag {
  font-family:    var(--eb-font-mono);
  font-size:      7px;
  letter-spacing: .18em;
  color:          var(--sa-em);
  text-transform: uppercase;
  margin-bottom:  4px;
}
.eb-sa-wi-name {
  font-family:    var(--eb-font-body);
  font-size:      13px;
  font-weight:    700;
  color:          var(--sa-ivory);
  margin-bottom:  3px;
  line-height:    1.2;
}
.eb-sa-wi-desc {
  font-size:   11px;
  color:       rgba(255,255,255,.52);
  line-height: 1.6;
}


/* ─── 05. PRINCIPLE — LIGHT CREAM ────────────────────────────────────────── */
.eb-sa-principle {
  background: var(--sa-cream);
  padding:    64px 60px;
  border-top: 3px solid var(--sa-em);
  position:   relative;
  overflow:   hidden;
}
.eb-sa-principle::after {
  content: '';
  position:   absolute;
  top:        0; right: 0;
  width:      360px; height: 100%;
  background: linear-gradient(270deg, rgba(16,185,129,.05), transparent);
  pointer-events: none;
}
.eb-sa-principle__inner { max-width: 1280px; margin: 0 auto; }
.eb-sa-principle__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   48px;
  margin-top:            22px;
  align-items:           start;
}
.eb-sa-principle__copy {
  font-size:   15px;
  font-weight: 300;
  color:       #2d3d30;
  line-height: 1.82;
}
.eb-sa-principle__copy p + p { margin-top: 14px; }

.eb-sa-key-points {
  border: 1px solid rgba(6,78,59,.1);
}
.eb-sa-kp {
  display:      flex;
  align-items:  center;
  gap:          10px;
  padding:      12px 16px;
  border-bottom:1px solid rgba(6,78,59,.08);
  transition:   background .2s ease;
}
.eb-sa-kp:last-child { border-bottom: none; }
.eb-sa-kp:hover      { background: rgba(16,185,129,.07); }
.eb-sa-kp__dot {
  width:        6px; height: 6px;
  border-radius:50%;
  background:   var(--sa-em);
  flex-shrink:  0;
}
.eb-sa-kp__text {
  font-size:  12.5px;
  color:      #1a2e1d;
  font-weight:400;
}


/* ─── 06. WALL BUILD-UP — DARK + EMERALD ─────────────────────────────────── */
.eb-sa-buildup {
  background:  var(--sa-dark-mid);
  padding:     64px 60px;
  border-top:  2px solid rgba(16,185,129,.28);
  position:    relative;
  overflow:    hidden;
}
.eb-sa-buildup::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--sa-dot-em) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none; z-index: 0;
}
.eb-sa-buildup__glow-a {
  position:       absolute;
  top:            -80px; right: -80px;
  width:          440px; height: 440px;
  border-radius:  50%;
  background:     radial-gradient(circle, rgba(16,185,129,.14), transparent 65%);
  pointer-events: none; z-index: 0;
}
.eb-sa-buildup__glow-b {
  position:       absolute;
  bottom:         -60px; left: -40px;
  width:          300px; height: 300px;
  border-radius:  50%;
  background:     radial-gradient(circle, rgba(16,185,129,.09), transparent 65%);
  pointer-events: none; z-index: 0;
}
.eb-sa-buildup__inner {
  position:  relative;
  z-index:   1;
  max-width: 1280px;
  margin:    0 auto;
}
.eb-sa-buildup__intro {
  font-size:   13px;
  color:       rgba(255,255,255,.60);
  margin-top:  4px;
  margin-bottom:0;
}

.eb-sa-buildup__layout {
  display:               grid;
  grid-template-columns: 250px 1fr;
  gap:                   20px;
  margin-top:            28px;
}

/* Layer tab list */
.eb-sa-layer-tabs {
  display:    flex;
  flex-direction: column;
  gap:        0;
  border:     1px solid rgba(16,185,129,.16);
}
.eb-sa-layer-tab {
  display:      flex;
  align-items:  center;
  gap:          10px;
  padding:      11px 14px;
  cursor:       pointer;
  border-left:  3px solid transparent;
  border-bottom:1px solid rgba(16,185,129,.1);
  transition:   background .2s ease, border-left-color .2s ease;
  background:   transparent;
  text-align:   left;
  width:        100%;
  color:        rgba(255,255,255,.55);
  border-top:   none;
  border-right: none;
}
.eb-sa-layer-tab:last-child { border-bottom: none; }
.eb-sa-layer-tab:hover {
  background:        rgba(16,185,129,.08);
  border-left-color: rgba(16,185,129,.45);
  color:             rgba(255,255,255,.82);
}
.eb-sa-layer-tab.is-active {
  background:        rgba(16,185,129,.13);
  border-left-color: var(--sa-em);
  color:             var(--sa-ivory);
}
.eb-sa-layer-tab:focus-visible {
  outline:        2px solid var(--sa-em);
  outline-offset: -2px;
}
.eb-sa-lt-num {
  font-family: var(--eb-font-body);
  font-size:   9px;
  font-weight: 700;
  color:       rgba(16,185,129,.5);
  min-width:   20px;
}
.eb-sa-layer-tab.is-active .eb-sa-lt-num { color: var(--sa-em); }
.eb-sa-lt-name {
  font-size:      10.5px;
  letter-spacing: .02em;
  font-family:    var(--eb-font-body);
}

/* Layer content panel */
.eb-sa-layer-panel {
  background:  rgba(2,12,5,.96);
  border:      1px solid rgba(16,185,129,.2);
  border-top:  2px solid var(--sa-em);
  padding:     28px 32px;
  position:    relative;
  overflow:    hidden;
}
.eb-sa-layer-panel::after {
  content: '';
  position:   absolute;
  top:        -40px; right: -40px;
  width:      200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,185,129,.1), transparent 65%);
  pointer-events: none;
}
.eb-sa-lp-num {
  font-family:    var(--eb-font-mono);
  font-size:      8px;
  color:          rgba(16,185,129,.55);
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom:  6px;
}
.eb-sa-lp-title {
  font-family: var(--eb-font-body);
  font-size:   22px;
  font-weight: 700;
  color:       var(--sa-ivory);
  margin-bottom: 12px;
  line-height: 1.1;
}
.eb-sa-lp-desc {
  font-size:   14px;
  color:       rgba(255,255,255,.68);
  line-height: 1.78;
  margin-bottom: 18px;
}
.eb-sa-lp-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            7px;
  padding:        6px 14px;
  background:     rgba(16,185,129,.1);
  border:         1px solid rgba(16,185,129,.3);
  font-family:    var(--eb-font-mono);
  font-size:      8px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:          rgba(16,185,129,.9);
}
.eb-sa-lp-badge-dot {
  width:        5px; height: 5px;
  border-radius:50%;
  background:   var(--sa-em);
}


/* ─── 07. CONSTRUCTION SEQUENCE — LIGHT TINTED ────────────────────────────── */
.eb-sa-sequence {
  background: var(--sa-tint);
  padding:    64px 60px;
  border-top: 3px solid rgba(16,185,129,.22);
  position:   relative;
  overflow:   hidden;
}
.eb-sa-sequence::after {
  content: '';
  position:   absolute;
  bottom: -70px; right: -70px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: rgba(16,185,129,.06);
  pointer-events: none;
}
.eb-sa-sequence__inner { max-width: 1280px; margin: 0 auto; }
.eb-sa-sequence__intro {
  font-size:   12.5px;
  color:       #4a6452;
  margin-top:  4px;
}

.eb-sa-seq-track { margin-top: 40px; position: relative; }

/* Animated timeline line */
.eb-sa-seq-line {
  height:        2px;
  background:    rgba(6,78,59,.15);
  margin:        0 22px 28px;
  position:      relative;
}
.eb-sa-seq-line::after {
  content:         '';
  position:        absolute;
  inset:           0;
  background:      linear-gradient(90deg, var(--sa-em) 0%, rgba(16,185,129,.25) 100%);
  transform-origin:left;
  transform:       scaleX(0);
  transition:      transform 1.2s var(--eb-ease-power, cubic-bezier(.16,1,.3,1));
}
.eb-sa-seq-line.is-visible::after { transform: scaleX(1); }

.eb-sa-seq-steps {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   16px;
}
.eb-sa-seq-step {
  display:        flex;
  flex-direction: column;
  align-items:    center;
}
.eb-sa-seq-node {
  width:           44px; height: 44px;
  border-radius:   50%;
  background:      linear-gradient(135deg, var(--sa-em-deep), var(--sa-em-dim));
  border:          2px solid var(--sa-em);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--eb-font-body);
  font-size:       13px;
  font-weight:     900;
  color:           #fff;
  margin:          0 auto 12px;
  flex-shrink:     0;
}
.eb-sa-seq-card {
  background:  #fff;
  border:      1px solid rgba(6,78,59,.1);
  border-top:  2px solid rgba(16,185,129,.35);
  padding:     14px;
  width:       100%;
  transition:  border-top-color .22s, box-shadow .22s;
}
.eb-sa-seq-card:hover {
  border-top-color: var(--sa-em);
  box-shadow:       0 4px 20px rgba(6,78,59,.08);
}
.eb-sa-seq-title {
  font-family:    var(--eb-font-body);
  font-size:      11px;
  font-weight:    700;
  color:          #1a2e1d;
  margin-bottom:  6px;
  letter-spacing: .04em;
}
.eb-sa-seq-body {
  font-size:   12px;
  color:       #4a6452;
  line-height: 1.65;
}


/* ─── 08. COMPARISON — SPLIT ──────────────────────────────────────────────── */
.eb-sa-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.eb-sa-compare__trad {
  background:  #f5f4f0;
  padding:     56px 52px;
  border-top:  3px solid rgba(0,0,0,.06);
}
.eb-sa-compare__eb {
  background:  var(--sa-dark);
  padding:     56px 52px;
  border-top:  3px solid var(--sa-em);
  position:    relative;
  overflow:    hidden;
}
.eb-sa-compare__eb::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--sa-dot-em) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none; z-index: 0;
}
.eb-sa-compare__eb::after {
  content: '';
  position:   absolute;
  top:        -60px; right: -60px;
  width:      360px; height: 360px;
  border-radius: 50%;
  background:    radial-gradient(circle, rgba(16,185,129,.14), transparent 65%);
  pointer-events: none; z-index: 0;
}
.eb-sa-compare__eb > * { position: relative; z-index: 1; }

.eb-sa-compare__heading {
  font-family:    var(--eb-font-body);
  font-size:      16px;
  font-weight:    700;
  margin-bottom:  20px;
  letter-spacing: .04em;
}
.eb-sa-compare__trad .eb-sa-compare__heading { color: #6b7d6e; }
.eb-sa-compare__eb   .eb-sa-compare__heading { color: var(--sa-em); }

.eb-sa-compare-item {
  display:      flex;
  align-items:  flex-start;
  gap:          10px;
  padding:      10px 0;
  border-bottom:1px solid transparent;
  font-size:    13.5px;
  line-height:  1.55;
}
.eb-sa-compare__trad .eb-sa-compare-item {
  color:        #4a5e4c;  /* darkened from #7a8c7c — WCAG AA pass on #f5f4f0 */
  border-bottom-color: rgba(0,0,0,.07);
}
.eb-sa-compare__eb .eb-sa-compare-item {
  color:        rgba(255,255,255,.75);
  border-bottom-color: rgba(16,185,129,.1);
}
.eb-sa-compare-item:last-child { border-bottom: none; }
.eb-sa-ci-dot {
  width:       5px; height: 5px;
  border-radius:50%;
  flex-shrink: 0;
  margin-top:  4px;
}
.eb-sa-compare__trad .eb-sa-ci-dot { background: rgba(0,0,0,.2); }
.eb-sa-compare__eb   .eb-sa-ci-dot { background: var(--sa-em); }


/* ─── 09. PERFORMANCE — LIGHT ─────────────────────────────────────────────── */
.eb-sa-performance {
  background: #f8faf8;
  padding:    64px 60px;
  border-top: 1px solid rgba(6,78,59,.1);
}
.eb-sa-performance__inner { max-width: 1280px; margin: 0 auto; }
.eb-sa-performance__intro {
  font-size:     12.5px;
  color:         #4a6452;
  max-width:     520px;
  margin-top:    6px;
  line-height:   1.72;
}
.eb-sa-perf-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   16px;
  margin-top:            28px;
}
.eb-sa-perf-card {
  background:  #fff;
  border:      1px solid rgba(6,78,59,.1);
  border-top:  2px solid rgba(16,185,129,.35);
  padding:     22px;
  position:    relative;
  overflow:    hidden;
  transition:  border-top-color .25s ease, box-shadow .25s ease;
}
.eb-sa-perf-card:hover {
  border-top-color: var(--sa-em);
  box-shadow:       0 6px 28px rgba(6,78,59,.08);
}
.eb-sa-perf-card::after {
  content: '';
  position:   absolute;
  left:       0; top: 0; bottom: 0;
  width:      3px;
  height:     0;
  background: var(--sa-em);
  transition: height .35s ease;
}
.eb-sa-perf-card:hover::after { height: 100%; }
.eb-sa-pc-title {
  font-family:    var(--eb-font-body);
  font-size:      12px;
  font-weight:    700;
  color:          #1a2e1d;
  margin-bottom:  8px;
  letter-spacing: .04em;
}
.eb-sa-pc-body {
  font-size:   13px;
  color:       #3d5540;
  line-height: 1.70;
}


/* ─── 10. APPLICATIONS — DARK GRID ────────────────────────────────────────── */
.eb-sa-applications {
  background:  var(--sa-dark-deep);
  padding:     64px 60px;
  border-top:  2px solid rgba(16,185,129,.2);
  position:    relative;
  overflow:    hidden;
}
.eb-sa-applications::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(16,185,129,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,185,129,.055) 1px, transparent 1px);
  background-size: 52px 52px;
  pointer-events: none; z-index: 0;
}
.eb-sa-apps-glow-a {
  position:   absolute;
  top:        -50px; right: 30%;
  width:      400px; height: 400px;
  border-radius: 50%;
  background:    radial-gradient(circle, rgba(16,185,129,.1), transparent 65%);
  pointer-events: none; z-index: 0;
}
.eb-sa-apps-glow-b {
  position:   absolute;
  bottom: -70px; left: -40px;
  width:  280px; height: 280px;
  border-radius: 50%;
  background:    radial-gradient(circle, rgba(16,185,129,.08), transparent 65%);
  pointer-events: none; z-index: 0;
}
.eb-sa-applications__inner {
  position:  relative;
  z-index:   1;
  max-width: 1280px;
  margin:    0 auto;
}
.eb-sa-applications__intro {
  font-size:   13px;
  color:       rgba(255,255,255,.62);
  margin-top:  6px;
  max-width:   600px;
  line-height: 1.7;
}
.eb-sa-app-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   12px;
  margin-top:            28px;
}
.eb-sa-app-card {
  padding:     20px;
  background:  rgba(16,185,129,.04);
  border:      1px solid rgba(16,185,129,.14);
  border-top:  2px solid rgba(16,185,129,.28);
  position:    relative;
  overflow:    hidden;
  transition:  background .22s ease, border-color .22s ease;
}
.eb-sa-app-card:hover {
  background:   rgba(16,185,129,.09);
  border-color: rgba(16,185,129,.35);
}
.eb-sa-app-card::before {
  content: '';
  position:   absolute;
  top:        0; left: 0; right: 0;
  height:     2px;
  background: linear-gradient(90deg, var(--sa-em-deep), var(--sa-em), var(--sa-em-deep));
  opacity:    0;
  transition: opacity .25s ease;
}
.eb-sa-app-card:hover::before { opacity: 1; }
.eb-sa-app-title {
  font-family:    var(--eb-font-body);
  font-size:      11px;
  font-weight:    700;
  color:          var(--sa-ivory);
  margin-bottom:  6px;
  letter-spacing: .04em;
}
.eb-sa-app-body {
  font-size:   12.5px;
  color:       rgba(255,255,255,.62);
  line-height: 1.65;
}


/* ─── 11. SPEC NOTE — LIGHT GOLD ──────────────────────────────────────────── */
.eb-sa-spec {
  background: #faf9f5;
  padding:    52px 60px;
  border-top: 1px solid rgba(245,158,11,.18);
}
.eb-sa-spec__inner {
  max-width:             1280px;
  margin:                0 auto;
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   48px;
  margin-top:            18px;
  align-items:           start;
}
.eb-sa-spec__copy {
  font-size:   13px;
  font-weight: 300;
  color:       #4a3d00;
  line-height: 1.8;
}
.eb-sa-spec__copy p + p { margin-top: 12px; }
.eb-sa-spec-note {
  border:      1px solid rgba(245,158,11,.3);
  border-left: 4px solid var(--sa-gold);
  padding:     16px 20px;
  background:  rgba(245,158,11,.05);
}
.eb-sa-spec-note p {
  font-size:   12px;
  color:       #5c4800;
  line-height: 1.74;
}
.eb-sa-spec-note strong { color: var(--sa-gold-dim); font-weight: 600; }


/* ─── 12. FAQ — DARK + EMERALD ────────────────────────────────────────────── */
.eb-sa-faq {
  background:  var(--sa-dark-mid);
  padding:     64px 60px;
  border-top:  2px solid rgba(16,185,129,.22);
  position:    relative;
  overflow:    hidden;
}
.eb-sa-faq::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--sa-dot-em) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none; z-index: 0;
}
.eb-sa-faq::after {
  content: '';
  position:   absolute;
  bottom: -60px; right: -60px;
  width:  380px; height: 380px;
  border-radius: 50%;
  background:    radial-gradient(circle, rgba(16,185,129,.12), transparent 65%);
  pointer-events: none; z-index: 0;
}
.eb-sa-faq__inner {
  position:  relative;
  z-index:   1;
  max-width: 1280px;
  margin:    0 auto;
}
.eb-sa-faq-list {
  display:    flex;
  flex-direction: column;
  gap:        0;
  margin-top: 28px;
  border:     1px solid rgba(16,185,129,.18);
}
.eb-sa-faq-item { border-bottom: 1px solid rgba(16,185,129,.12); }
.eb-sa-faq-item:last-child { border-bottom: none; }

/* FAQ Question button — fully explicit, no colour inheritance */
.eb-sa-faq-q {
  width:        100%;
  display:      flex;
  align-items:  center;
  justify-content: space-between;
  padding:      17px 20px;
  background:   transparent;
  border:       none;
  border-left:  3px solid transparent;
  cursor:       pointer;
  text-align:   left;
  gap:          14px;
  transition:   background .2s ease, border-left-color .2s ease;
  /* EXPLICIT colours — never inherited */
  color:        #F5F4F2;
  font-family:  var(--eb-font-body);
  font-size:    14.5px;
  font-weight:  500;
  line-height:  1.5;
}
.eb-sa-faq-q:hover {
  background:        rgba(16,185,129,.08);
  border-left-color: rgba(16,185,129,.45);
  color:             #F5F4F2;
}
.eb-sa-faq-q.is-open {
  background:        rgba(16,185,129,.1);
  border-left-color: var(--sa-em);
  color:             #F5F4F2;
}
.eb-sa-faq-q:focus-visible {
  outline:        2px solid var(--sa-em);
  outline-offset: -2px;
  color:          #F5F4F2;
}

.eb-sa-faq-icon {
  width:          20px; height: 20px;
  border:         1px solid rgba(16,185,129,.4);
  display:        flex;
  align-items:    center;
  justify-content:center;
  font-size:      16px;
  font-weight:    300;
  flex-shrink:    0;
  transition:     transform .25s ease;
  /* EXPLICIT colours — never inherited */
  color:          #10b981;
  background:     transparent;
  font-family:    sans-serif;
}
.eb-sa-faq-q.is-open .eb-sa-faq-icon { transform: rotate(45deg); }

/* FAQ Answer — EXPLICIT CONTRAST FIX */
.eb-sa-faq-a {
  /* Contrast-safe: rgba(255,255,255,.72) on var(--sa-dark-mid) (#040f07)
     Contrast ratio ≈ 9.2:1 — exceeds WCAG AA (4.5:1) and AAA (7:1) */
  color:       rgba(255,255,255,.75);
  background:  rgba(16,185,129,.03);
  border-top:  1px solid rgba(16,185,129,.12);
  padding:     0 20px;
  font-size:   14px;
  font-family: var(--eb-font-body);
  font-weight: 300;
  line-height: 1.80;
  max-height:  0;
  overflow:    hidden;
  transition:  max-height .35s ease, padding .25s ease;
}
.eb-sa-faq-a.is-open {
  max-height: 300px;
  padding:    14px 20px 20px;
}


/* ─── 13. FINAL CTA — SPLIT ───────────────────────────────────────────────── */
.eb-sa-cta-final {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.eb-sa-cta-final__light {
  background: var(--sa-tint);
  padding:    64px 60px;
  border-top: 3px solid rgba(16,185,129,.25);
}
.eb-sa-cta-final__dark {
  background: var(--sa-dark);
  padding:    64px 60px;
  border-top: 3px solid var(--sa-em);
  position:   relative;
  overflow:   hidden;
}
.eb-sa-cta-final__dark::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle, var(--sa-dot-em) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none; z-index: 0;
}
.eb-sa-cta-final__dark::after {
  content: '';
  position:   absolute;
  bottom: -50px; left: -40px;
  width:  320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,185,129,.14), transparent 65%);
  pointer-events: none; z-index: 0;
}
.eb-sa-cta-final__dark > * { position: relative; z-index: 1; }

.eb-sa-cta-h {
  font-family:    var(--eb-font-body);
  font-size:      clamp(18px, 2.4vw, 26px);
  font-weight:    900;
  line-height:    1.05;
  margin-bottom:  10px;
  letter-spacing: -.01em;
}
.eb-sa-cta-final__light .eb-sa-cta-h { color: #1a2e1d; }
.eb-sa-cta-final__dark  .eb-sa-cta-h { color: var(--sa-ivory); }

.eb-sa-cta-sub {
  font-size:     14px;
  font-weight:   300;
  line-height:   1.76;
  margin-bottom: 24px;
}
.eb-sa-cta-final__light .eb-sa-cta-sub { color: #4a6452; }
.eb-sa-cta-final__dark  .eb-sa-cta-sub { color: rgba(255,255,255,.46); }
.eb-sa-cta-reassure {
  font-size:  10px;
  font-style: italic;
  color:      #6b8c72;
  margin-top: 10px;
}


/* ─── 14. SECTION INNER CONTAINERS ──────────────────────────────────────────*/
.eb-sa-section-inner {
  max-width: 1280px;
  margin:    0 auto;
}


/* ─── 15. RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .eb-sa-hero__inner    { grid-template-columns: 1fr; gap: 32px; }
  .eb-sa-hero__text     { padding-bottom: 48px; }

  /*
   * Wall visual — do NOT hide completely at 1100px.
   * Show a simplified contained version with horizontal-safe scrolling.
   * The wall remains interactive and educational at tablet widths.
   */
  .eb-sa-hero__wall-wrap {
    max-width: 540px;
    margin: 0 auto;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px; /* ensure bottom of wall visible above scroll */
  }

  .eb-sa-wall-panel {
    min-width: 300px; /* prevent wall from collapsing to illegible width */
  }

  .eb-sa-wall-dim {
    font-size: 10px;
    letter-spacing: 0.01em;
  }
}

@media (max-width: 960px) {
  .eb-sa-principle__grid  { grid-template-columns: 1fr; }
  .eb-sa-buildup__layout  { grid-template-columns: 1fr; }
  .eb-sa-compare          { grid-template-columns: 1fr; }
  .eb-sa-cta-final        { grid-template-columns: 1fr; }
  .eb-sa-perf-grid        { grid-template-columns: repeat(2, 1fr); }
  .eb-sa-app-grid         { grid-template-columns: repeat(2, 1fr); }
  .eb-sa-seq-steps        { grid-template-columns: 1fr; }
  .eb-sa-seq-line         { display: none; }
  .eb-sa-hero__inner,
  .eb-sa-principle,
  .eb-sa-buildup,
  .eb-sa-sequence,
  .eb-sa-compare__trad,
  .eb-sa-compare__eb,
  .eb-sa-performance,
  .eb-sa-applications,
  .eb-sa-spec,
  .eb-sa-faq,
  .eb-sa-cta-final__light,
  .eb-sa-cta-final__dark  { padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 600px) {
  .eb-sa-perf-grid { grid-template-columns: 1fr; }
  .eb-sa-app-grid  { grid-template-columns: 1fr; }
  .eb-sa-spec__inner { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .eb-sa-seq-line::after { transition: none; }
  .eb-sa-faq-a           { transition: none; }
  .eb-sa-faq-q.is-open .eb-sa-faq-icon { transform: none; }
  #eb-sa-wrap .eb-sa-btn--primary::before { animation: none; }
}


/* ==========================================================================
   PATCH — Responsive hardening pass
   ─────────────────────────────────────────────────────────────────────────
   1. Wall visual — hide only at ≤480px (fully unusable at touch-only sizes)
   2. Process / performance / application grids at ≤480px and ≤320px
   3. Hero heading clamp for narrow viewports
   ========================================================================== */


/* ── Wall: hide only at ≤480px where interaction is impractical ─────────── */

@media (max-width: 480px) {
  .eb-sa-hero__wall-wrap {
    display: none;
  }
}


/* ── ≤480px — grid stacking ──────────────────────────────────────────────── */

@media (max-width: 480px) {
  /* Principle grid — already 1-col at 960px */

  /* Performance and application grids */
  .eb-sa-perf-grid {
    grid-template-columns: 1fr;
  }

  .eb-sa-app-grid {
    grid-template-columns: 1fr;
  }

  /* Hero H1 */
  .eb-sa-hero__h1 {
    font-size: clamp(1.5rem, 6vw, 2rem);
  }

  /* Hero inner padding tighter */
  .eb-sa-hero__inner {
    padding: 0 16px;
  }

  /* CTA button — full width */
  #eb-sa-wrap .eb-sa-btn {
    width: 100%;
    justify-content: center;
  }

  /* Spec section — already 1-col at ≤600px */

  /* Buildup layout already stacks at 960px */

  /* Compare section — already stacks at 960px */
}


/* ── ≤390px ───────────────────────────────────────────────────────────────── */

@media (max-width: 390px) {
  .eb-sa-hero__h1 {
    font-size: clamp(1.3rem, 7vw, 1.75rem);
    line-height: 1;
  }

  .eb-sa-hero__sub {
    font-size: 0.78rem;
  }

  .eb-sa-hero__support {
    font-size: 0.75rem;
  }

  /* FAQ section */
  .eb-sa-faq-q {
    font-size: 0.82rem;
  }
}


/* ── ≤320px ───────────────────────────────────────────────────────────────── */

@media (max-width: 320px) {
  .eb-sa-hero__h1 {
    font-size: 1.25rem;
  }

  .eb-sa-eyebrow {
    font-size: 7px;
  }

  #eb-sa-wrap .eb-sa-btn {
    font-size: 9px;
    padding: 10px 16px;
  }
}

/* END PATCH — eb-system-assembly.css */

/* ── LAYER TAB SWATCH (v1.2 addition) ───────────────────────────────────── */
.eb-sa-lt-swatch {
  display:       block;
  width:         4px;
  height:        18px;
  border-radius: 2px;
  flex-shrink:   0;
}

/* ── LAYER PANEL DIM LINE (v1.2 addition) ───────────────────────────────── */
.eb-sa-lp-dim {
  font-size:      10px;
  font-weight:    500;
  color:          rgba(16,185,129,.55);
  margin-top:     10px;
  letter-spacing: .04em;
  font-family:    var(--eb-font-mono);
}

/* ── SPEC SECTION HEADER WRAPPER (v1.2 addition) ────────────────────────── */
.eb-sa-spec__header {
  margin-bottom: 2.5rem;
}

/* END eb-system-assembly.css v1.2 */

/* ── AUDIT FIXES v1.3 ────────────────────────────────────────────── */
#eb-sa-wrap .eb-sa-h2--clamp     { font-size: clamp(22px, 2.8vw, 36px); }
#eb-sa-wrap .eb-sa-h2--clamp-sm  { font-size: clamp(20px, 2.4vw, 30px); }
#eb-sa-wrap .eb-sa-h2--wide      { max-width: 640px; }
#eb-sa-wrap .eb-sa-compare__heading--muted  { color: #6b7d6e; }
#eb-sa-wrap .eb-sa-compare__highlight       { color: #f5f4f2; }