/** Shopify CDN: Minification failed

Line 45:0 All "@import" rules must come first

**/
/* ── FIX: restore Shopify footer .page-width styles ───────── */
footer.site-footer .page-width {
  max-width: 1325px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* ── FIX: strip Shopify theme wrappers above + around this page ── */
/* Shogun-injected content sits inside a stack of theme wrappers
   (#PageContainer, #MainContent, .shopify-section, .page-width, .rte,
   .article-template, .section-template--page) that add their own
   top/bottom padding and side margins. Without these overrides, a
   ~40-80px white band appears above the top bar. */
#PageContainer.page-container { max-width: 100% !important; width: 100% !important; padding: 0 !important; overflow-x: hidden; }
#MainContent.main-content     { max-width: 100% !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
#MainContent .page-width,
#MainContent .rte,
#MainContent article,
#MainContent .article-template,
#MainContent .section-template--page,
#MainContent > .shopify-section,
#MainContent > .shopify-section > *,
#MainContent .shg-c,
#MainContent .shg-box-vertical-align-wrapper,
#MainContent .shogun-root,
#MainContent [class*="PageWidth"],
#MainContent [class*="page-width"],
#MainContent [class*="page_width"] {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
}
#MainContent .page-width--narrow { max-width: 100% !important; width: 100% !important; }

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@400;500&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── SCOPED RESET ─────────────────────────────────────────── */
.cc-page,
.cc-page *,
.cc-page *::before,
.cc-page *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.cc-page {
  /* Design tokens (page-prefixed, on wrapper, never :root) */
  --cc-ore: #BF2608;
  --cc-ore-dark: #9A1F06;
  --cc-ore-bright: #E0542A;
  --cc-ink: #0F0D0B;
  --cc-ink-2: #1A1612;
  --cc-ink-3: #2A2520;
  --cc-sand: #F5F3F0;
  --cc-cream: #FAF9F7;
  --cc-stone: #6B6460;
  --cc-stone-light: #8A8480;
  --cc-border: #DDD9D4;
  --cc-px: 56px;

  font-family: 'DM Sans', sans-serif;
  color: #1E1A16;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  overflow-x: hidden;
}

.cc-page img { max-width: 100%; display: block; }
.cc-page a { text-decoration: none; }
.cc-page a:not(.cc-btn) { color: inherit; }
.cc-page ul { list-style: none; }

/* ── PRODUCT NAME BAR (top of page) ───────────────────────── */
.cc-product-bar {
  background: #0A0907;
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: 14px 0;
  position: relative;
  z-index: 6;
}
.cc-product-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cc-product-bar-name {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}
.cc-product-bar-brand {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  white-space: nowrap;
}
.cc-product-bar-product {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: .05em;
  color: #fff;
  position: relative;
  padding-left: 14px;
  line-height: 1;
  white-space: nowrap;
}
.cc-product-bar-product::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 1px;
  background: var(--cc-ore);
}
.cc-product-bar-product sup {
  font-family: 'DM Sans', sans-serif;
  font-size: 9px;
  font-weight: 500;
  vertical-align: super;
  margin-left: 2px;
  letter-spacing: 0;
  color: rgba(255,255,255,.6);
}
.cc-product-bar-meta {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .18em;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 18px;
}
.cc-product-bar-meta-dot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cc-product-bar-meta-dot::before {
  content: '';
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cc-ore-bright);
  box-shadow: 0 0 6px var(--cc-ore-bright);
  animation: cc-pulse 2s infinite;
}
@media (max-width: 700px) {
  .cc-product-bar-product { font-size: 18px; }
  .cc-product-bar-brand { font-size: 10px; }
  .cc-product-bar-meta { display: none; }
}
@media (max-width: 480px) {
  .cc-product-bar-name { gap: 10px; }
  .cc-product-bar-product { padding-left: 10px; }
}

/* ── PRE-ORDER NOTICE BAR ─────────────────────────────────── */
.cc-notice {
  background: var(--cc-ore);
  color: #fff;
  padding: 12px 24px;
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  position: relative;
  z-index: 5;
}
.cc-notice strong { font-weight: 500; }

/* ── CONTAINER ────────────────────────────────────────────── */
.cc-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--cc-px);
  position: relative;
}

/* ── SECTION BASE ─────────────────────────────────────────── */
.cc-section {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}
.cc-section.cc-dark { background: var(--cc-ink); color: #fff; }
.cc-section.cc-light { background: var(--cc-sand); color: #1E1A16; }
.cc-section.cc-ink2 { background: var(--cc-ink-2); color: #fff; }

/* Subtle grid overlay */
.cc-grid-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
  z-index: 0;
}
.cc-grid-bg-light::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(30,26,22,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,26,22,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
}

/* Vertical accent line */
.cc-accent-line {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--cc-ore) 25%, var(--cc-ore) 75%, transparent 100%);
  opacity: .35;
  z-index: 1;
  pointer-events: none;
}

/* ── KICKERS & HEADERS ───────────────────────────────────── */
.cc-kicker {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cc-ore);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.cc-kicker::before {
  content: '';
  display: block;
  width: 28px;
  height: 1px;
  background: var(--cc-ore);
}
.cc-dark .cc-kicker { color: var(--cc-ore-bright); }
.cc-dark .cc-kicker::before { background: var(--cc-ore-bright); }

.cc-h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(56px, 8vw, 124px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: .03em;
  margin: 0;
}
.cc-h1-lede {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(22px, 2.8vw, 44px);
  letter-spacing: .1em;
  line-height: 1;
  color: rgba(255,255,255,.82);
  margin-bottom: 14px;
}
.cc-h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(38px, 4.8vw, 68px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .035em;
  margin: 0;
}
.cc-h2 em { color: var(--cc-ore); font-style: normal; }
.cc-dark .cc-h2, .cc-cta .cc-h2, .cc-evo-fullbleed .cc-h2 { color: #fff; }
.cc-dark .cc-h2 em, .cc-cta .cc-h2 em, .cc-evo-fullbleed .cc-h2 em { color: var(--cc-ore-bright); }
.cc-h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.05;
  margin: 0;
}

.cc-lead {
  font-size: 17px;
  line-height: 1.65;
  max-width: 640px;
  color: rgba(255,255,255,.8);
}
.cc-light .cc-lead { color: var(--cc-stone); }
.cc-body {
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
}
.cc-light .cc-body { color: var(--cc-stone); }

.cc-rule {
  height: 1px;
  margin-top: 32px;
  background: linear-gradient(90deg, var(--cc-ore) 0%, var(--cc-border) 30%, transparent 100%);
}
.cc-dark .cc-rule {
  background: linear-gradient(90deg, var(--cc-ore-bright) 0%, rgba(255,255,255,.06) 40%, transparent 100%);
}
.cc-section-break {
  background: var(--cc-ink);
  height: 64px;
  width: 100%;
  position: relative;
}
.cc-section-break::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cc-ore);
}

/* Section header pattern */
.cc-section-head {
  margin-bottom: 64px;
}
.cc-section-head-split {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 48px;
  align-items: end;
}
.cc-section-head-split .cc-body {
  text-align: right;
  font-size: 14px;
}

/* ══════════════════════════════════════════════════════════ */
/* ── HERO ─────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════ */
.cc-hero {
  position: relative;
  background: var(--cc-ink);
  color: #fff;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  padding: 20px 0 0;
}
.cc-hero-bg {
  position: absolute;
  inset: 0;
  background-position: center -300px;
  background-size: auto 220%;
  background-repeat: no-repeat;
  z-index: 0;
}
@keyframes cc-zoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
.cc-hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15,13,11,1) 0%, rgba(15,13,11,.8) 30%, rgba(15,13,11,.72) 55%, rgba(15,13,11,.32) 80%, rgba(15,13,11,0) 100%),
    linear-gradient(180deg, transparent 0%, transparent 65%, rgba(15,13,11,.55) 100%);
  z-index: 1;
}
.cc-hero-glow {
  position: absolute;
  right: -10%;
  top: 30%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, rgba(191,38,8,.18) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
  filter: blur(20px);
}


.cc-hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px 0 88px;
}
.cc-hero-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 36px;
}
.cc-hero-labels {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cc-hero-kicker { margin-bottom: 0; }
.cc-hero-meta {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.cc-hero-meta span {
  color: var(--cc-ore-bright);
}
.cc-sku-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: rgba(15, 13, 11, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 4px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .15em;
  color: rgba(255,255,255,.95);
}
.cc-sku-badge::before {
  content: '';
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cc-ore-bright);
  box-shadow: 0 0 8px var(--cc-ore-bright);
  animation: cc-pulse 2s infinite;
}
@keyframes cc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.cc-hero-headline { max-width: 820px; }
.cc-hero-headline .cc-h1 { color: #fff; }
.cc-hero-headline .cc-h1 em {
  color: var(--cc-ore-bright);
  font-style: normal;
}
.cc-hero-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  line-height: 1.45;
  margin-top: 28px;
  max-width: 580px;
  color: rgba(255,255,255,.82);
}
.cc-hero-sub strong {
  color: #fff;
  font-weight: 600;
  letter-spacing: .005em;
}
.cc-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
}

/* Buttons */
.cc-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .22s ease;
  white-space: nowrap;
}
.cc-btn-primary {
  background: var(--cc-ore);
  color: #fff;
  border-color: var(--cc-ore);
}
.cc-btn-primary:hover {
  background: var(--cc-ore-dark);
  border-color: var(--cc-ore-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(191,38,8,.35);
}
.cc-btn-ghost {
  background: rgba(255,255,255,.1);
  color: #fff;
  border-color: rgba(255,255,255,.9);
}
.cc-btn-ghost:hover {
  border-color: #fff;
  background: rgba(255,255,255,.18);
}
.cc-light .cc-btn-ghost {
  color: var(--cc-ink);
  border-color: rgba(30,22,18,.35);
  background: transparent;
}
.cc-light .cc-btn-ghost:hover {
  border-color: var(--cc-ink);
  background: rgba(30,22,18,.04);
}
.cc-btn .arrow { font-family: monospace; font-weight: 700; }
.cc-btn:hover .arrow { transform: translateX(3px); transition: transform .22s; }

/* Lock button text colors across all interaction states so the theme's
   default a:hover/a:visited color does not bleed through. */
.cc-btn-primary,
.cc-btn-primary:link,
.cc-btn-primary:visited,
.cc-btn-primary:hover,
.cc-btn-primary:focus,
.cc-btn-primary:active { color: #fff !important; }

.cc-btn-ghost,
.cc-btn-ghost:link,
.cc-btn-ghost:visited,
.cc-btn-ghost:hover,
.cc-btn-ghost:focus,
.cc-btn-ghost:active { color: #fff !important; }

.cc-light .cc-btn-ghost,
.cc-light .cc-btn-ghost:link,
.cc-light .cc-btn-ghost:visited,
.cc-light .cc-btn-ghost:hover,
.cc-light .cc-btn-ghost:focus,
.cc-light .cc-btn-ghost:active { color: var(--cc-ink) !important; }

.cc-btn-preorder,
.cc-btn-preorder:link,
.cc-btn-preorder:visited,
.cc-btn-preorder:hover,
.cc-btn-preorder:focus,
.cc-btn-preorder:active { color: var(--cc-ink) !important; }
.cc-btn-preorder .arrow,
.cc-btn-preorder:hover .arrow { color: var(--cc-ore) !important; }

/* Hero stats strip */
.cc-hero-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 32px;
  margin-top: 48px !important;
}
.cc-hero-stat {
  padding: 0 24px;
  border-right: 1px solid rgba(255,255,255,.08);
}
.cc-hero-stat:first-child { padding-left: 0; }
.cc-hero-stat:last-child { border-right: none; padding-right: 0; }
.cc-hero-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 44px;
  line-height: 1;
  color: #fff;
  letter-spacing: .03em;
}
.cc-hero-stat-num em { color: var(--cc-ore-bright); font-style: normal; }
.cc-hero-stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-top: 8px;
}

/* ══════════════════════════════════════════════════════════ */
/* ── INTRO / PROBLEM-SOLUTION ─────────────────────────────── */
/* ══════════════════════════════════════════════════════════ */
.cc-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.cc-intro-img {
  aspect-ratio: 4 / 5;
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.cc-intro-img-inner {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #fff;
}
.cc-intro-text .cc-h2 { margin-bottom: 28px; }
.cc-intro-text p { margin-bottom: 18px; font-size: 16px; line-height: 1.7; color: var(--cc-stone); }

/* ══════════════════════════════════════════════════════════ */
/* ── CAPACITY VISUAL ──────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════ */
.cc-capacity {
  position: relative;
}
.cc-capacity-watermark {
  position: absolute;
  bottom: -30px;
  right: -20px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(140px, 22vw, 320px);
  color: rgba(30,26,22,.04);
  pointer-events: none;
  line-height: 1;
  z-index: 0;
}
.cc-capacity-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.cc-capacity-img {
  aspect-ratio: 4 / 3;
  background: #fff;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--cc-border);
  box-shadow: 0 12px 40px rgba(0,0,0,.08);
}
.cc-capacity-img-inner {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #fff;
  padding: 24px;
}

/* CALLOUT OVERLAYS -- point to specific features on the unit */
.cc-capacity-callouts {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.cc-capacity-callouts svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.cc-capacity-callout-label {
  position: absolute;
  background: rgba(15,13,11,.94);
  padding: 8px 12px;
  border-left: 2px solid var(--cc-ore);
  border-radius: 0 3px 3px 0;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.4;
  z-index: 4;
  pointer-events: auto;
  white-space: nowrap;
}
.cc-capacity-callout-label strong {
  display: block;
  color: var(--cc-ore-bright);
  font-weight: 500;
  font-size: 9.5px;
  letter-spacing: .18em;
  margin-bottom: 2px;
}
.cc-capacity-callout-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cc-ore);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(191,38,8,.35), 0 0 14px rgba(191,38,8,.6);
  z-index: 4;
  animation: cc-callout-pulse 2.2s ease-in-out infinite;
}
@keyframes cc-callout-pulse {
  0%, 100% { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(191,38,8,.35), 0 0 14px rgba(191,38,8,.5); }
  50% { box-shadow: 0 0 0 2px #fff, 0 0 0 6px rgba(191,38,8,.5), 0 0 22px rgba(191,38,8,.85); }
}

.cc-capacity-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 36px;
}
.cc-stack-stat {
  border-top: 1px solid var(--cc-border);
  padding-top: 20px;
}
.cc-stack-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px;
  color: var(--cc-ink-2);
  line-height: 1;
  letter-spacing: .02em;
}
.cc-stack-stat-num em { color: var(--cc-ore); font-style: normal; }
.cc-stack-stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cc-stone);
  margin-top: 8px;
}

/* ══════════════════════════════════════════════════════════ */
/* ── WORKFLOW / TOOLS ─────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════ */
.cc-workflow-text { max-width: 760px; margin-bottom: 56px; }
.cc-workflow-text .cc-h2 { margin-bottom: 28px; }
.cc-workflow-text p { font-size: 17px; line-height: 1.7; color: var(--cc-stone); margin-bottom: 16px; }

.cc-tools-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin-top: 40px;
}
.cc-tool-tile {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  padding: 26px 14px 20px;
  text-align: center;
  transition: border-color .22s, transform .22s, box-shadow .22s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
}
.cc-tool-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--cc-ore);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.cc-tool-tile:hover {
  border-color: var(--cc-ore);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.cc-tool-tile:hover::before { transform: scaleX(1); }
.cc-tool-icon {
  width: 52px;
  height: 52px;
  color: var(--cc-ore);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color .22s, transform .22s;
}
.cc-tool-icon svg { width: 100%; height: 100%; display: block; }
.cc-tool-tile:hover .cc-tool-icon { color: var(--cc-ore-bright); transform: scale(1.05); }
.cc-tool-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(24px, 2.3vw, 30px);
  letter-spacing: .035em;
  color: var(--cc-ink);
  line-height: 1;
  margin-top: 4px;
}
.cc-tool-type {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cc-stone);
  opacity: .75;
}
.cc-tools-more {
  margin-top: 28px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cc-stone);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.cc-tools-more::before, .cc-tools-more::after {
  content: '';
  display: block;
  width: 40px; height: 1px;
  background: var(--cc-border);
}
.cc-tools-more span { color: var(--cc-ore); }

@media (max-width: 1024px) {
  .cc-tools-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 540px) {
  .cc-tools-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════ */
/* ── ENGINEERING FEATURES (FEATURE SELECTOR) ──────────────── */
/* ══════════════════════════════════════════════════════════ */

/* Compact section overrides -- smaller heading, tighter vertical padding, less head margin so the selector sits closer to the fold. */
.cc-fs-section { padding-top: 80px; padding-bottom: 90px; }
.cc-fs-section .cc-section-head { margin-bottom: 36px; }
.cc-fs-section .cc-h2 {
  font-size: clamp(32px, 3.6vw, 56px);
  line-height: 1.0;
}

.cc-fs-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: start;
  position: relative;
  z-index: 2;
}

/* LEFT COLUMN: feature list */
.cc-fs-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cc-fs-item {
  display: grid;
  grid-template-columns: 38px 1fr 18px;
  gap: 14px;
  align-items: center;
  padding: 10px 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, padding .25s ease;
  text-align: left;
  font-family: inherit;
  color: inherit;
  width: 100%;
}
.cc-fs-item:hover {
  background: rgba(255,255,255,.06);
  border-left-color: rgba(191,38,8,.45);
}
.cc-fs-item.active {
  background: rgba(191,38,8,.09);
  border-color: rgba(191,38,8,.35);
  border-left: 3px solid var(--cc-ore);
  padding: 14px 16px;
}
.cc-fs-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  color: rgba(255,255,255,.4);
  letter-spacing: .04em;
  line-height: 1;
  transition: color .25s ease;
}
.cc-fs-item.active .cc-fs-num,
.cc-fs-item:hover .cc-fs-num {
  color: var(--cc-ore-bright);
}
.cc-fs-content { min-width: 0; }
.cc-fs-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: .035em;
  color: rgba(255,255,255,.92);
  line-height: 1.05;
  transition: color .25s ease;
}
.cc-fs-item.active .cc-fs-title {
  color: #fff;
  margin-bottom: 4px;
}
.cc-fs-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255,255,255,.58);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .3s ease, opacity .25s ease;
}
.cc-fs-item.active .cc-fs-desc {
  max-height: 80px;
  opacity: 1;
}
.cc-fs-arrow {
  font-family: 'DM Mono', monospace;
  font-size: 16px;
  color: rgba(255,255,255,.25);
  transition: color .22s ease, transform .22s ease;
  text-align: center;
}
.cc-fs-item.active .cc-fs-arrow,
.cc-fs-item:hover .cc-fs-arrow {
  color: var(--cc-ore);
  transform: translateX(4px);
}

/* RIGHT COLUMN: image display panel */
.cc-fs-display {
  position: sticky;
  top: 96px;
}
.cc-fs-display-frame {
  position: relative;
  aspect-ratio: 1;
  background: #fff;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  overflow: hidden;
}
.cc-fs-display-img {
  position: absolute;
  inset: 0;
  background-color: #fff;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  transition: opacity .26s ease;
}
.cc-fs-display-img.swapping { opacity: 0; }

/* Corner brackets on the image */
.cc-fs-display-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  z-index: 2;
  pointer-events: none;
}
.cc-fs-display-corner-tl {
  top: 14px; left: 14px;
  border-top: 2px solid var(--cc-ore);
  border-left: 2px solid var(--cc-ore);
}
.cc-fs-display-corner-br {
  bottom: 14px; right: 14px;
  border-bottom: 2px solid var(--cc-ore);
  border-right: 2px solid var(--cc-ore);
}

/* "Feature" tag overlay */
/* Caption block below the image */
.cc-fs-display-meta {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.cc-fs-display-kicker {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cc-ore-bright);
  margin-bottom: 10px;
  transition: opacity .26s ease;
}
.cc-fs-display-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  letter-spacing: .03em;
  color: #fff;
  line-height: 1;
  margin-bottom: 10px;
  transition: opacity .26s ease;
}
.cc-fs-display-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.72);
  transition: opacity .26s ease;
}
.cc-fs-display-img.swapping ~ .cc-fs-display-meta .cc-fs-display-kicker,
.cc-fs-display-img.swapping ~ .cc-fs-display-meta .cc-fs-display-title,
.cc-fs-display-img.swapping ~ .cc-fs-display-meta .cc-fs-display-body {
  opacity: .35;
}

/* ── LIGHT-MODE OVERRIDES for feature selector (.cc-light .cc-fs-section)
   Mirrors the dark scheme but with ink (rgba(15,13,11,X)) instead of white. */
.cc-light .cc-fs-item {
  background: rgba(15,13,11,.03);
  border: 1px solid rgba(15,13,11,.08);
  border-left: 3px solid transparent;
}
.cc-light .cc-fs-item:hover {
  background: rgba(15,13,11,.05);
  border-left-color: rgba(191,38,8,.45);
}
.cc-light .cc-fs-item.active {
  background: rgba(191,38,8,.06);
  border-color: rgba(191,38,8,.30);
  border-left: 3px solid var(--cc-ore);
}
.cc-light .cc-fs-num { color: rgba(15,13,11,.4); }
.cc-light .cc-fs-title { color: rgba(15,13,11,.85); }
.cc-light .cc-fs-item.active .cc-fs-title { color: var(--cc-ink); }
.cc-light .cc-fs-desc { color: rgba(15,13,11,.6); }
.cc-light .cc-fs-arrow { color: rgba(15,13,11,.3); }
.cc-light .cc-fs-display-frame {
  border: 1px solid rgba(15,13,11,.1);
}
.cc-light .cc-fs-display-meta {
  border-top: 1px solid rgba(15,13,11,.1);
}
.cc-light .cc-fs-display-title { color: var(--cc-ink); }
.cc-light .cc-fs-display-body { color: rgba(15,13,11,.7); }

/* ══════════════════════════════════════════════════════════ */
/* ── INSIDE THE CABINET (DETAIL GRID) ─────────────────────── */
/* ══════════════════════════════════════════════════════════ */
.cc-detail-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  height: 640px;
}
.cc-detail-tile {
  background: #fff;
  border: 1px solid var(--cc-border);
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}
.cc-detail-tile-inner {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform .5s ease;
}
.cc-detail-tile:hover .cc-detail-tile-inner { transform: scale(1.05); }
.cc-detail-tile.tall { grid-row: 1 / 3; }
.cc-detail-label {
  position: absolute;
  bottom: 16px;
  left: 16px;
  background: rgba(15,13,11,.85);
  color: #fff;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 3px;
  z-index: 2;
  border-left: 2px solid var(--cc-ore);
}

/* ══════════════════════════════════════════════════════════ */
/* ── APPLICATION GALLERY (IN THE FIELD) ───────────────────── */
/* ══════════════════════════════════════════════════════════ */
.cc-app-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}
.cc-app-card {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
}
.cc-app-card-img {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transition: transform .6s ease;
}
.cc-app-card:hover .cc-app-card-img { transform: scale(1.04); }
.cc-app-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(15,13,11,.88) 100%);
  z-index: 1;
}
.cc-app-card-content {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 32px;
  z-index: 2;
}
.cc-app-card-tag {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--cc-ore-bright);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.cc-app-card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;
  color: #fff;
  letter-spacing: .03em;
  line-height: 1;
  margin-bottom: 8px;
}
.cc-app-card-desc {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255,255,255,.78);
  max-width: 420px;
}

/* ══════════════════════════════════════════════════════════ */
/* ── CHARGE & SHIELD COMPATIBILITY (tactical spec sheet, dark) ── */
/* ══════════════════════════════════════════════════════════ */
.cc-cs2 {
  position: relative;
  z-index: 2;
}

/* Main 2-col grid: product hero LEFT, spec tiles RIGHT */
.cc-cs2-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
  margin-bottom: 24px;
}

/* LEFT: Product hero photo with tactical bracketing */
.cc-cs2-hero {
  position: relative;
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1;
  min-height: 420px;
}
.cc-cs2-hero-img {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #fff;
}
.cc-cs2-hero-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  pointer-events: none;
  z-index: 2;
}
.cc-cs2-hero-corner-tl {
  top: 14px; left: 14px;
  border-top: 2px solid var(--cc-ore);
  border-left: 2px solid var(--cc-ore);
}
.cc-cs2-hero-corner-br {
  bottom: 14px; right: 14px;
  border-bottom: 2px solid var(--cc-ore);
  border-right: 2px solid var(--cc-ore);
}
.cc-cs2-hero-tag {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 3;
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 7px 12px 6px;
  background: rgba(15,13,11,.9);
  border: 1px solid rgba(191,38,8,.45);
  border-radius: 3px;
  color: rgba(255,255,255,.78);
}
.cc-cs2-hero-product-tag {
  position: absolute;
  bottom: 22px;
  left: 22px;
  z-index: 3;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: .04em;
  color: var(--cc-ink);
  background: rgba(255,255,255,.95);
  padding: 9px 16px 7px;
  border-radius: 3px;
  border-left: 3px solid var(--cc-ore);
  line-height: 1;
}

/* RIGHT: 2x2 spec tile grid (matches image height, organized) */
.cc-cs2-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
}
.cc-cs2-spec-row {
  padding: 22px 24px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.1);
  border-left: 3px solid var(--cc-ore);
  border-radius: 0 4px 4px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: background .25s, border-left-color .25s;
}
.cc-cs2-spec-row:hover {
  background: rgba(191,38,8,.06);
  border-left-color: var(--cc-ore-bright);
}
.cc-cs2-spec-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(30px, 3vw, 42px);
  color: var(--cc-ore-bright);
  letter-spacing: .03em;
  line-height: .95;
}
.cc-cs2-spec-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.cc-cs2-spec-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,.78);
  margin-top: auto;
}

/* SIGNAL BLOCK STRIP (below the grid) */
.cc-cs2-signals {
  margin-top: 12px;
  padding: 22px 26px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--cc-ore);
  border-radius: 0 4px 4px 0;
}
.cc-cs2-signals-head {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 14px;
}
.cc-cs2-signals-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.cc-cs2-signal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px 8px 11px;
  background: rgba(191,38,8,.08);
  border: 1px solid rgba(191,38,8,.3);
  border-radius: 4px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
  transition: background .2s, border-color .2s;
}
.cc-cs2-signal:hover {
  background: rgba(191,38,8,.14);
  border-color: rgba(191,38,8,.55);
}
.cc-cs2-signal-x {
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  color: var(--cc-ore-bright);
  line-height: 1;
  position: relative;
  top: -1px;
}

/* WORKFLOW STRIP at bottom -- Bag → Chamber → BlockBox → Cracked */
.cc-cs2-workflow {
  margin-top: 24px;
  padding: 22px 28px;
  background: rgba(15,13,11,.55);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 28px;
  align-items: center;
}
.cc-cs2-workflow-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  line-height: 1.4;
  max-width: 130px;
}
.cc-cs2-workflow-steps {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.cc-cs2-workflow-step {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 19px;
  letter-spacing: .04em;
  color: #fff;
  line-height: 1;
}
.cc-cs2-workflow-step-last { color: var(--cc-ore-bright); }
.cc-cs2-workflow-arrow {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: var(--cc-ore);
  letter-spacing: .1em;
}

/* CTA button (centered below workflow) */
.cc-cs2-cta-row {
  margin-top: 36px;
  text-align: center;
}
.cc-cs2-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cc-ore-bright);
  padding: 14px 24px 12px;
  border: 1px solid var(--cc-ore);
  border-radius: 3px;
  transition: background .22s, color .22s, gap .22s;
  text-decoration: none;
}
.cc-cs2-cta:hover {
  background: var(--cc-ore);
  color: #fff;
  gap: 14px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .cc-cs2-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .cc-cs2-specs {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
  }
}
@media (max-width: 600px) {
  .cc-cs2-specs {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .cc-cs2-workflow {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ══════════════════════════════════════════════════════════ */
/* ── EVOLUTION / COMPARISON SECTION ───────────────────────── */
/* ══════════════════════════════════════════════════════════ */
.cc-evo {
  background: var(--cc-ink);
  position: relative;
}
.cc-evo::after {
  content: 'EVOLVED';
  position: absolute;
  top: 30px;
  left: 4%;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(120px, 16vw, 240px);
  color: rgba(191,38,8,.04);
  letter-spacing: .04em;
  pointer-events: none;
  line-height: 1;
  z-index: 0;
}
.cc-evo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.cc-evo-img {
  aspect-ratio: 5 / 4;
  background: #fff;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}
.cc-evo-img-inner {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: #fff;
}
.cc-evo-text .cc-h2 { margin-bottom: 28px; }
.cc-evo-text > p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,.78);
  margin-bottom: 28px;
}
.cc-evo-list {
  margin-top: 32px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.cc-evo-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,.85);
  align-items: start;
}
.cc-evo-list li::before {
  content: '';
  display: block;
  width: 18px;
  height: 1px;
  background: var(--cc-ore-bright);
  margin-top: 11px;
}

/* ══════════════════════════════════════════════════════════ */
/* ── SPECS & BOX CONTENTS ─────────────────────────────────── */
/* ══════════════════════════════════════════════════════════ */
.cc-specs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  position: relative;
  z-index: 2;
}
.cc-spec-block { }
.cc-spec-title {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cc-ore);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--cc-border);
}
.cc-spec-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(30,26,22,.06);
  align-items: start;
}
.cc-spec-row:last-child { border-bottom: none; }
.cc-spec-key {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cc-stone);
}
.cc-spec-val {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--cc-ink-2);
  font-weight: 500;
}
.cc-box-list {
  margin-top: 8px;
}
.cc-box-list li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(30,26,22,.06);
  font-size: 14px;
  line-height: 1.55;
  color: var(--cc-ink-2);
}
.cc-box-list li::before {
  content: '+';
  font-family: 'DM Mono', monospace;
  color: var(--cc-ore);
  font-weight: 500;
  margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════ */
/* ── CURRENT CUSTOMERS / AGENCIES ─────────────────────────── */
/* ══════════════════════════════════════════════════════════ */
.cc-agencies-section { padding-top: 100px; padding-bottom: 100px; }
.cc-agencies-section .cc-section-head { margin-bottom: 48px; }
.cc-agencies-h2 {
  white-space: nowrap;
  margin-bottom: 14px;
}
.cc-agencies-body {
  max-width: 760px;
  margin-bottom: 22px;
}
.cc-agencies-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  position: relative;
  z-index: 2;
}
.cc-agency-tile {
  background: rgba(255,255,255,.025);
  border: 1px solid rgba(255,255,255,.08);
  padding: 22px 16px 18px;
  border-radius: 3px;
  position: relative;
  text-align: center;
  transition: background .22s, border-color .22s, transform .22s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 130px;
  overflow: hidden;
}
.cc-agency-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(191,38,8,.4) 50%, transparent 100%);
  opacity: 0;
  transition: opacity .22s;
}
.cc-agency-tile:hover {
  background: rgba(191,38,8,.06);
  border-color: rgba(191,38,8,.3);
  transform: translateY(-2px);
}
.cc-agency-tile:hover::before { opacity: 1; }
.cc-agency-monogram {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: .04em;
  color: var(--cc-ore-bright);
  line-height: 1;
  margin-bottom: 10px;
  white-space: nowrap;
}
.cc-agency-name {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  line-height: 1.35;
}
.cc-agencies-footnote {
  margin-top: 36px;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  position: relative;
  z-index: 2;
}
.cc-agencies-footnote-tick {
  width: 32px;
  height: 1px;
  background: var(--cc-ore);
  flex-shrink: 0;
}
@media (max-width: 1100px) {
  .cc-agencies-grid { grid-template-columns: repeat(4, 1fr); }
  .cc-agencies-h2 { white-space: normal; }
}
@media (max-width: 700px) {
  .cc-agencies-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cc-agency-tile { padding: 16px 10px 14px; min-height: 110px; }
  .cc-agency-monogram { font-size: 18px; }
  .cc-agency-name { font-size: 8.5px; }
}
@media (max-width: 420px) {
  .cc-agencies-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════ */
/* ── COMMON USES ──────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════ */
.cc-uses-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  position: relative;
  z-index: 2;
}
.cc-use-card {
  background: var(--cc-ink-3);
  border: 1px solid rgba(255,255,255,.07);
  padding: 32px 26px 30px;
  border-radius: 4px;
  position: relative;
  transition: border-color .25s, transform .25s;
  overflow: hidden;
}
.cc-use-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--cc-ore);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s;
}
.cc-use-card:hover {
  border-color: rgba(191,38,8,.3);
  transform: translateY(-4px);
}
.cc-use-card:hover::before { transform: scaleX(1); }
.cc-use-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 48px;
  color: rgba(191,38,8,.22);
  line-height: 1;
  letter-spacing: .03em;
  margin-bottom: 16px;
  transition: color .25s;
}
.cc-use-card:hover .cc-use-num { color: rgba(224,84,42,.4); }
.cc-use-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  color: #fff;
  letter-spacing: .03em;
  line-height: 1.05;
  margin-bottom: 12px;
}
.cc-use-body {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.7);
}

/* ══════════════════════════════════════════════════════════ */
/* ── CTA / PRE-ORDER ──────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════ */
.cc-cta {
  background: var(--cc-ink);
  color: #fff;
  padding: 100px 0 120px;
  position: relative;
  overflow: hidden;
}
.cc-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--cc-ore) 50%, transparent 100%);
}
.cc-cta-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.cc-cta-text .cc-kicker { margin-bottom: 22px; }
.cc-cta-text .cc-h2 { margin-bottom: 24px; }
.cc-cta-text p {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,.75);
  max-width: 520px;
  margin-bottom: 32px;
}
.cc-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cc-cta-card {
  background: rgba(255,255,255,.04);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.1);
  border-left: 3px solid var(--cc-ore);
  padding: 36px;
  border-radius: 0 4px 4px 0;
}
.cc-cta-price-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 8px;
}
.cc-cta-price {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 64px;
  color: #fff;
  letter-spacing: .03em;
  line-height: 1;
  margin-bottom: 6px;
}
.cc-cta-price-sub {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--cc-ore-bright);
  margin-bottom: 28px;
  text-transform: uppercase;
}
.cc-cta-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cc-cta-buttons .cc-btn { justify-content: center; padding: 16px 24px; }
.cc-cta-extras {
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.1);
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  text-align: center;
}
.cc-cta-extras a {
  color: var(--cc-ore-bright);
  border-bottom: 1px solid rgba(224,84,42,.4);
  padding-bottom: 1px;
}
.cc-cta-extras a:hover { color: #fff; border-color: #fff; }

/* ══════════════════════════════════════════════════════════ */
/* ── RELIABILITY / REDUNDANCY / WHY-YOU-CANT-DIY ─────────── */
/* ══════════════════════════════════════════════════════════ */
.cc-rel-section {
  position: relative;
  padding: 130px 0 140px;
  background: var(--cc-ink);
  color: #fff;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.cc-rel-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 72px 72px;
  pointer-events: none;
}
.cc-rel-section::after {
  content: 'NO COMPROMISE';
  position: absolute;
  bottom: -22px; right: -20px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(140px, 19vw, 300px);
  color: rgba(191,38,8,.05);
  letter-spacing: .02em;
  line-height: 1;
  pointer-events: none;
}
.cc-rel-inner {
  position: relative;
  z-index: 2;
  max-width: 1325px;
  margin: 0 auto;
  padding: 0 32px;
}
.cc-rel-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  max-width: 920px;
  margin-bottom: 64px;
}
.cc-rel-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cc-ore-bright);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.cc-rel-eyebrow::before {
  content: '';
  width: 28px; height: 1px;
  background: var(--cc-ore-bright);
}
.cc-rel-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4.5vw, 60px);
  letter-spacing: .025em;
  line-height: 1;
  margin: 0;
  color: #fff;
}
.cc-rel-title em { font-style: normal; color: var(--cc-ore); }
.cc-rel-body {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(16px, 1.4vw, 19px);
  color: rgba(255,255,255,.82);
  line-height: 1.55;
  max-width: 760px;
  margin: 4px 0 0;
}
.cc-rel-body strong { color: #fff; font-weight: 600; }

/* Pillars grid: 6 supporting beliefs.
   Visual hierarchy: large theme name (Reliability/Redundancy/etc) leads;
   descriptive title is secondary; body is tertiary. */
.cc-rel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
}
.cc-rel-pillar {
  background: #14110F;
  padding: 38px 34px 42px;
  position: relative;
  transition: background .25s;
}
.cc-rel-pillar:hover { background: #1A1612; }
.cc-rel-pillar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--cc-ore);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
}
.cc-rel-pillar:hover::before { transform: scaleX(1); }
.cc-rel-pillar-num {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  color: rgba(255,255,255,.4);
  letter-spacing: .26em;
  margin-bottom: 10px;
  font-weight: 500;
}
.cc-rel-pillar-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(32px, 3.2vw, 44px);
  letter-spacing: .04em;
  line-height: .95;
  margin: 0 0 14px;
  color: var(--cc-ore-bright);
  text-transform: uppercase;
}
.cc-rel-pillar-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px;
  line-height: 1.3;
}
.cc-rel-pillar-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  margin: 0;
}
.cc-rel-pillar-body strong { color: #fff; font-weight: 600; }

/* DIY callout: closing argument */
.cc-rel-callout {
  position: relative;
  background: linear-gradient(135deg, rgba(191,38,8,.14) 0%, rgba(15,13,11,.6) 60%);
  border: 1px solid rgba(191,38,8,.35);
  border-left: 4px solid var(--cc-ore);
  padding: 48px 52px;
  overflow: hidden;
}
.cc-rel-callout::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 360px; height: 100%;
  background: radial-gradient(circle at 100% 50%, rgba(224,84,42,.22) 0%, transparent 60%);
  pointer-events: none;
}
.cc-rel-callout-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}
.cc-rel-callout-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cc-ore-bright);
  margin-bottom: 14px;
  font-weight: 500;
}
.cc-rel-callout-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(32px, 3.6vw, 48px);
  letter-spacing: .03em;
  line-height: 1;
  color: #fff;
  margin: 0 0 18px;
}
.cc-rel-callout-title em { font-style: normal; color: var(--cc-ore); }
.cc-rel-callout-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: rgba(255,255,255,.82);
  line-height: 1.6;
  margin: 0;
}
.cc-rel-callout-body strong { color: #fff; font-weight: 600; }
.cc-rel-callout-r {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cc-rel-vs-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,.1);
}
.cc-rel-vs-row:first-child { border-top: 0; padding-top: 0; }
.cc-rel-vs-mark {
  font-family: 'DM Mono', monospace;
  font-size: 14px;
  width: 28px;
  text-align: center;
  font-weight: 700;
}
.cc-rel-vs-mark.no { color: rgba(255,255,255,.4); }
.cc-rel-vs-mark.yes { color: var(--cc-ore-bright); }
.cc-rel-vs-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,.78);
  line-height: 1.4;
}
.cc-rel-vs-text strong { color: #fff; font-weight: 600; }

@media (max-width: 1100px) {
  .cc-rel-grid { grid-template-columns: repeat(2, 1fr); }
  .cc-rel-callout-inner { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  .cc-rel-section { padding: 80px 0 90px; }
  .cc-rel-head { margin-bottom: 40px; }
  .cc-rel-grid { grid-template-columns: 1fr; margin-bottom: 40px; }
  .cc-rel-pillar { padding: 32px 26px; }
  .cc-rel-callout { padding: 32px 26px; }
}

/* ══════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════ */
/* ── WIREFRAME SECTIONS (DRAFT / REMOVABLE) ───────────────── */
/* ══════════════════════════════════════════════════════════ */
/* Each .cc-wireframe-section is a draft for review. To remove */
/* any of them, delete the entire <section class="cc-wireframe-section">...</section> block. */
.cc-wireframe-section {
  position: relative;
  padding: 96px 0;
  background: var(--cc-cream);
  border-top: 1px dashed rgba(191,38,8,.25);
  border-bottom: 1px dashed rgba(191,38,8,.25);
}
.cc-wireframe-section + .cc-wireframe-section { border-top: 0; }
.cc-wireframe-section.cc-wireframe-dark {
  background: var(--cc-ink);
  color: rgba(255,255,255,.86);
  border-top-color: rgba(255,255,255,.14);
  border-bottom-color: rgba(255,255,255,.14);
}
.cc-wireframe-inner {
  max-width: 1325px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
}
.cc-wireframe-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 36px;
  margin-bottom: 36px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(15,13,11,.12);
}
.cc-wireframe-dark .cc-wireframe-head { border-bottom-color: rgba(255,255,255,.12); }
.cc-wireframe-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cc-ore);
  margin-bottom: 12px;
  font-weight: 500;
}
.cc-wireframe-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4.5vw, 56px);
  letter-spacing: .03em;
  line-height: 1;
  color: var(--cc-ink);
  margin: 0;
}
.cc-wireframe-dark .cc-wireframe-title { color: #fff; }
.cc-wireframe-title em { font-style: normal; color: var(--cc-ore); }
.cc-wireframe-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--cc-stone);
  max-width: 360px;
  margin: 0;
  line-height: 1.55;
  text-align: right;
}
.cc-wireframe-dark .cc-wireframe-sub { color: rgba(255,255,255,.6); }

/* COMPLIANCE GRID */
.cc-wf-cert-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.cc-wf-cert-tile {
  background: #fff;
  border: 1px solid rgba(15,13,11,.1);
  border-top: 3px solid var(--cc-ore);
  padding: 26px 26px 28px;
  position: relative;
}
.cc-wf-cert-mark {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cc-ore);
  margin-bottom: 12px;
  font-weight: 500;
}
.cc-wf-cert-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: .04em;
  line-height: 1.05;
  color: var(--cc-ink);
  margin: 0 0 10px;
}
.cc-wf-cert-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--cc-stone);
  line-height: 1.55;
  margin: 0;
}

/* WARRANTY GRID */
.cc-wf-warranty-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(15,13,11,.12);
  border: 1px solid rgba(15,13,11,.12);
}
.cc-wf-warranty-tile {
  background: #fff;
  padding: 28px 26px;
}
.cc-wf-warranty-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cc-stone);
  margin-bottom: 14px;
  font-weight: 500;
}
.cc-wf-warranty-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 56px;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--cc-ore);
  margin-bottom: 12px;
}
.cc-wf-warranty-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  color: var(--cc-ink);
  line-height: 1.5;
  margin: 0;
}

/* FAQ */
.cc-wf-faq-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(15,13,11,.12);
  border: 1px solid rgba(15,13,11,.12);
}
.cc-wf-faq-item {
  background: #fff;
  padding: 26px 30px;
}
.cc-wf-faq-q {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cc-ore);
  margin-bottom: 12px;
  font-weight: 500;
  line-height: 1.4;
}
.cc-wf-faq-a {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--cc-ink);
  line-height: 1.6;
  margin: 0;
}
.cc-wf-faq-a strong { color: var(--cc-ore); }

/* TESTIMONIALS */
.cc-wf-testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.cc-wf-testimonial {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--cc-ore);
  padding: 32px 28px;
  position: relative;
}
.cc-wf-testimonial-quote {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #fff;
  margin: 0 0 24px;
  font-weight: 300;
}
.cc-wf-testimonial-quote::before {
  content: '\201C';
  font-family: 'Bebas Neue', sans-serif;
  font-size: 42px;
  line-height: 1;
  color: var(--cc-ore);
  display: block;
  margin-bottom: 4px;
}
.cc-wf-testimonial-attr {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  color: rgba(255,255,255,.55);
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 16px;
  line-height: 1.5;
}
.cc-wf-testimonial-attr strong {
  display: block;
  color: #fff;
  font-weight: 600;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: .15em;
}

@media (max-width: 880px) {
  .cc-wireframe-section { padding: 64px 0; }
  .cc-wireframe-head { grid-template-columns: 1fr; gap: 14px; }
  .cc-wireframe-sub { max-width: none; text-align: left; }
  .cc-wf-cert-grid { grid-template-columns: 1fr; }
  .cc-wf-warranty-grid { grid-template-columns: 1fr 1fr; }
  .cc-wf-faq-list { grid-template-columns: 1fr; }
  .cc-wf-testimonials { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════ */
/* ── DISCLAIMER FOOTER ────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════ */
.cc-disclaimer {
  background: var(--cc-ink);
  padding: 24px 0 32px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.cc-disclaimer p {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .1em;
  color: rgba(255,255,255,.4);
  text-align: center;
  text-transform: uppercase;
  line-height: 1.6;
}

/* ══════════════════════════════════════════════════════════ */
/* ── FADE-UP SCROLL ANIMATION ─────────────────────────────── */
/* ══════════════════════════════════════════════════════════ */
.cc-fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.cc-fade-up.cc-visible { opacity: 1; transform: translateY(0); }

/* ══════════════════════════════════════════════════════════ */
/* ── MD MONITOR APP / WORKFLOW DIAGRAM ────────────────────── */
/* Anchor strip: pins the section title to a visible bar */
/* MD Monitor anchored title bar (replaces section head) */
.cc-mm-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 24px 28px 24px 32px;
  background: var(--cc-ink);
  color: #fff;
  border-radius: 4px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
}
.cc-mm-titlebar::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 4px;
  background: var(--cc-ore);
}
.cc-mm-titlebar::after {
  content: '';
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 32%;
  background: radial-gradient(ellipse at 100% 50%, rgba(191,38,8,.18) 0%, transparent 70%);
  pointer-events: none;
}
.cc-mm-titlebar-l {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.cc-mm-titlebar-status {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.cc-mm-titlebar-status-label { color: var(--cc-ore-bright); font-weight: 500; }
.cc-mm-anchor-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(34,197,94,.95);
  box-shadow: 0 0 8px rgba(34,197,94,.7);
  animation: ccMmAnchorPulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes ccMmAnchorPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}
.cc-mm-titlebar-h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: .04em;
  line-height: 1.04;
  color: #fff;
  margin: 0;
}
.cc-mm-titlebar-h2 em {
  color: var(--cc-ore-bright);
  font-style: normal;
}
.cc-mm-titlebar-r {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.cc-mm-anchor-tag {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  border: 1px solid rgba(255,255,255,.15);
  padding: 5px 10px;
  border-radius: 3px;
}
.cc-mm-section-intro {
  margin-bottom: 40px;
  max-width: 760px;
}
.cc-mm-section-intro .cc-body { margin: 0; }
@media (max-width: 900px) {
  .cc-mm-titlebar { flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px 22px 22px 26px; }
  .cc-mm-titlebar-r { flex-wrap: wrap; }
}
/* ══════════════════════════════════════════════════════════ */
.cc-mm-workflow {
  margin: 32px 0 56px;
  padding: 36px 24px;
  background: var(--cc-cream);
  border: 1px solid var(--cc-border);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.cc-mm-workflow::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(30,26,22,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,26,22,.025) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  z-index: 0;
}
.cc-mm-workflow svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.cc-mm-features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 16px;
}
.cc-mm-feat {
  background: var(--cc-cream);
  border: 1px solid var(--cc-border);
  border-left: 3px solid var(--cc-ore);
  padding: 28px 26px 26px;
  border-radius: 0 4px 4px 0;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.cc-mm-feat:hover {
  transform: translateY(-4px);
  border-color: var(--cc-ore);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}
.cc-mm-feat-num {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--cc-ore);
  margin-bottom: 14px;
}
.cc-mm-feat-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  letter-spacing: .03em;
  color: var(--cc-ink-2);
  margin-bottom: 10px;
  line-height: 1.05;
}
.cc-mm-feat-body {
  font-size: 14px;
  line-height: 1.6;
  color: var(--cc-stone);
}

/* MD Monitor flow grid (new: real images with animated connection bridge) */
.cc-mm-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.4fr) minmax(0, 1fr);
  gap: 0;
  align-items: center;
  margin-top: 0;
  margin-bottom: 12px;
}
.cc-mm-flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cc-mm-flow-node-frame {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  margin-bottom: 18px;
}
.cc-mm-flow-node-unit .cc-mm-flow-node-frame { max-width: 570px; }
.cc-mm-flow-node-app .cc-mm-flow-node-frame { max-width: 600px; aspect-ratio: 4 / 3; }
/* Hide the corner brackets -- no boundaries / seamless white bg */
.cc-mm-flow-node-corner { display: none; }
.cc-mm-flow-node-img {
  position: absolute;
  inset: 0;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  padding: 0;
}
.cc-mm-flow-node-img-app {
  background-size: contain;
  padding: 0;
}
.cc-mm-flow-node-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  z-index: 3;
  pointer-events: none;
}
.cc-mm-flow-node-corner-tl { top: 10px; left: 10px; border-top: 2px solid var(--cc-ore); border-left: 2px solid var(--cc-ore); }
.cc-mm-flow-node-corner-br { bottom: 10px; right: 10px; border-bottom: 2px solid var(--cc-ore); border-right: 2px solid var(--cc-ore); }
/* LARGE POWER INDICATOR (lightning bolt + label + status) -- positioned ABOVE the unit/app image as its own block (not overlaid). Two states (normal / alert) cross-fade via opacity animation across the 7s cycle. */
.cc-mm-power {
  position: relative;
  width: 100%;
  height: 60px;
  margin-bottom: 18px;
  pointer-events: none;
}
.cc-mm-power-state {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px 11px 12px;
  border-radius: 4px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid;
  white-space: nowrap;
}
.cc-mm-power-state-normal {
  border-color: rgba(34,197,94,.55);
  box-shadow: 0 0 16px rgba(34,197,94,.18);
}
.cc-mm-power-state-alert {
  border-color: var(--cc-ore);
  background: rgba(255,236,232,.97);
  box-shadow: 0 0 24px rgba(191,38,8,.5);
  opacity: 0;
}
.cc-mm-power-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
.cc-mm-power-state-normal .cc-mm-power-icon {
  color: #16A34A;
  filter: drop-shadow(0 0 6px rgba(34,197,94,.7));
  animation: cc-mm-power-pulse 1.8s ease-in-out infinite;
}
.cc-mm-power-state-alert .cc-mm-power-icon {
  color: #BF2608;
  filter: drop-shadow(0 0 10px rgba(191,38,8,.8));
  animation: cc-mm-power-flash .5s ease-in-out infinite;
}
@keyframes cc-mm-power-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .65; transform: scale(.92); }
}
@keyframes cc-mm-power-flash {
  0%, 100% { opacity: 1; transform: scale(1); }
  30% { opacity: .2; transform: scale(.75); }
  60% { opacity: 1; transform: scale(1.1); }
}
.cc-mm-power-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.cc-mm-power-label {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(15,13,11,.6);
  margin-bottom: 3px;
}
.cc-mm-power-status {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 19px;
  letter-spacing: .04em;
}
.cc-mm-power-state-normal .cc-mm-power-status { color: #15803D; }
.cc-mm-power-state-alert .cc-mm-power-status { color: var(--cc-ore); }

/* UNIT power indicator timing: alert from ~22% to ~92% of cycle */
.cc-mm-power-unit .cc-mm-power-state-normal {
  animation: cc-mm-unit-normal 16s ease-in-out infinite;
}
.cc-mm-power-unit .cc-mm-power-state-alert {
  animation: cc-mm-unit-alert 16s ease-in-out infinite;
}
@keyframes cc-mm-unit-normal {
  0%, 14% { opacity: 1; }
  17%, 42% { opacity: 0; }
  46%, 100% { opacity: 1; }
}
@keyframes cc-mm-unit-alert {
  0%, 16% { opacity: 0; }
  19%, 42% { opacity: 1; }
  46%, 100% { opacity: 0; }
}

/* APP power indicator timing: alert delayed (after bridge propagation) */
.cc-mm-power-app .cc-mm-power-state-normal {
  animation: cc-mm-app-normal 16s ease-in-out infinite;
}
.cc-mm-power-app .cc-mm-power-state-alert {
  animation: cc-mm-app-alert 16s ease-in-out infinite;
}
@keyframes cc-mm-app-normal {
  0%, 19% { opacity: 1; }
  22%, 42% { opacity: 0; }
  46%, 100% { opacity: 1; }
}
@keyframes cc-mm-app-alert {
  0%, 21% { opacity: 0; }
  24%, 42% { opacity: 1; }
  46%, 100% { opacity: 0; }
}
.cc-mm-flow-node-meta { width: 100%; max-width: 320px; }
.cc-mm-flow-node-tag {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cc-ore);
  margin-bottom: 6px;
}
.cc-mm-flow-node-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: .035em;
  color: var(--cc-ink-2);
  margin-bottom: 4px;
  line-height: 1;
}
.cc-mm-flow-node-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: var(--cc-stone);
  line-height: 1.4;
}

/* BRIDGE -- animated connection lines between unit and app */
.cc-mm-flow-bridge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 18px;
  min-height: 200px;
}
.cc-mm-flow-bridge-cloud {
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--cc-border);
  padding: 12px 18px;
  border-radius: 3px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cc-ink-2);
  z-index: 3;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.cc-mm-flow-bridge-cloud-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cc-ore);
  box-shadow: 0 0 10px rgba(191,38,8,.6);
  flex-shrink: 0;
}
.cc-mm-flow-bridge-svg {
  width: 100%;
  height: 200px;
  z-index: 1;
}
.cc-mm-flow-bridge-labels {
  position: absolute;
  bottom: 8%;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cc-stone);
  z-index: 2;
}
.cc-mm-flow-bridge-r { color: rgba(34,197,94,.85); }

/* ── ALERT FAN-OUT -- SMS / push / email triggered from app on power loss ── */
.cc-mm-alerts {
  margin-top: 8px;
  position: relative;
}
.cc-mm-alerts-fanout {
  display: block;
  width: 100%;
  height: 90px;
  margin-bottom: -8px;
  overflow: visible;
}
.cc-mm-fanout-line {
  fill: none;
  stroke: var(--cc-ore);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
  opacity: 0;
}
.cc-mm-fanout-line-call { animation: cc-mm-fanout-call 16s ease-in-out infinite; }
.cc-mm-fanout-line-sms  { animation: cc-mm-fanout-sms 16s ease-in-out infinite; }
.cc-mm-fanout-line-push { animation: cc-mm-fanout-push 16s ease-in-out infinite; }
@keyframes cc-mm-fanout-call {
  0%, 16% { opacity: 0; }
  20%, 38% { opacity: .65; }
  41%, 100% { opacity: 0; }
}
@keyframes cc-mm-fanout-sms {
  0%, 20% { opacity: 0; }
  24%, 38% { opacity: .65; }
  41%, 100% { opacity: 0; }
}
@keyframes cc-mm-fanout-push {
  0%, 24% { opacity: 0; }
  28%, 38% { opacity: .65; }
  41%, 100% { opacity: 0; }
}

/* Traveling dots along fan-out lines */
.cc-mm-fanout-dot {
  fill: var(--cc-ore);
  opacity: 0;
}
.cc-mm-fanout-dot-call { animation: cc-mm-fanout-dot-call 16s ease-in-out infinite; }
.cc-mm-fanout-dot-sms  { animation: cc-mm-fanout-dot-sms 16s ease-in-out infinite; }
.cc-mm-fanout-dot-push { animation: cc-mm-fanout-dot-push 16s ease-in-out infinite; }
@keyframes cc-mm-fanout-dot-call {
  0%, 18% { opacity: 0; }
  20% { opacity: 1; }
  23% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes cc-mm-fanout-dot-sms {
  0%, 22% { opacity: 0; }
  24% { opacity: 1; }
  27% { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes cc-mm-fanout-dot-push {
  0%, 26% { opacity: 0; }
  28% { opacity: 1; }
  31% { opacity: 0; }
  100% { opacity: 0; }
}

/* ── BIG DRAMATIC EVENT BANNER (replaces the tiny header strip) ── */
.cc-mm-alerts-event {
  position: relative;
  padding: 26px 32px;
  background: rgba(191,38,8,.05);
  border: 1px solid rgba(191,38,8,.3);
  border-left: 4px solid var(--cc-ore);
  border-radius: 0 4px 4px 0;
  overflow: hidden;
  animation: cc-mm-alerts-event 16s ease-in-out infinite;
  opacity: 0;
}
@keyframes cc-mm-alerts-event {
  0%, 14% { opacity: 0; transform: translateY(-4px); }
  17%, 40% { opacity: 1; transform: translateY(0); }
  43%, 100% { opacity: 0; transform: translateY(-4px); }
}
.cc-mm-alerts-event::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(191,38,8,.13) 0%, transparent 55%);
  pointer-events: none;
}
.cc-mm-alerts-event-content {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.cc-mm-alerts-event-l {
  display: flex;
  align-items: center;
  gap: 22px;
}
.cc-mm-alerts-event-pulse {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--cc-ore);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(191,38,8,.6), 0 0 16px rgba(191,38,8,.8);
  animation: cc-mm-alerts-event-pulse 1.2s ease-in-out infinite;
}
@keyframes cc-mm-alerts-event-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(191,38,8,.6), 0 0 16px rgba(191,38,8,.8); }
  60% { box-shadow: 0 0 0 18px rgba(191,38,8,0), 0 0 16px rgba(191,38,8,.4); }
}
.cc-mm-alerts-event-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(191,38,8,.85);
  margin-bottom: 6px;
}
.cc-mm-alerts-event-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: .04em;
  color: var(--cc-ore);
  line-height: .95;
}
.cc-mm-alerts-event-r {
  display: flex;
  gap: 36px;
  padding-left: 32px;
  border-left: 1px solid rgba(191,38,8,.2);
}
.cc-mm-alerts-event-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  color: var(--cc-ore);
  letter-spacing: .03em;
  line-height: 1;
}
.cc-mm-alerts-event-stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cc-stone);
  margin-top: 5px;
}

.cc-mm-alerts-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* BIGGER alert cards -- phone-notification chrome with sound-wave rings */
.cc-mm-alert {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 10px;
  padding: 0;
  position: relative;
  opacity: 0;
  transform: translateY(20px) scale(.96);
  min-height: 260px;
  overflow: visible;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.cc-mm-alert::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cc-ore);
  border-radius: 10px 10px 0 0;
  transform: scaleX(0);
  transform-origin: left;
  z-index: 4;
}

/* Concentric pulse rings emanating outward from icon (broadcasting / sound-wave effect) */
.cc-mm-alert-rings {
  position: absolute;
  top: 78px; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 60px;
  pointer-events: none;
  z-index: 1;
}
.cc-mm-alert-rings span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--cc-ore);
  opacity: 0;
}
.cc-mm-alert-call .cc-mm-alert-rings span:nth-child(1) { animation: cc-mm-alert-ring 2.4s ease-out 0.0s infinite; }
.cc-mm-alert-call .cc-mm-alert-rings span:nth-child(2) { animation: cc-mm-alert-ring 2.4s ease-out 0.8s infinite; }
.cc-mm-alert-call .cc-mm-alert-rings span:nth-child(3) { animation: cc-mm-alert-ring 2.4s ease-out 1.6s infinite; }
.cc-mm-alert-sms  .cc-mm-alert-rings span:nth-child(1) { animation: cc-mm-alert-ring 2.4s ease-out 0.2s infinite; }
.cc-mm-alert-sms  .cc-mm-alert-rings span:nth-child(2) { animation: cc-mm-alert-ring 2.4s ease-out 1.0s infinite; }
.cc-mm-alert-sms  .cc-mm-alert-rings span:nth-child(3) { animation: cc-mm-alert-ring 2.4s ease-out 1.8s infinite; }
.cc-mm-alert-push .cc-mm-alert-rings span:nth-child(1) { animation: cc-mm-alert-ring 2.4s ease-out 0.4s infinite; }
.cc-mm-alert-push .cc-mm-alert-rings span:nth-child(2) { animation: cc-mm-alert-ring 2.4s ease-out 1.2s infinite; }
.cc-mm-alert-push .cc-mm-alert-rings span:nth-child(3) { animation: cc-mm-alert-ring 2.4s ease-out 2.0s infinite; }
@keyframes cc-mm-alert-ring {
  0% { transform: scale(.7); opacity: .55; }
  100% { transform: scale(2.8); opacity: 0; }
}

.cc-mm-alert-inner {
  position: relative; z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px 20px 18px;
}

/* Phone-notification top bar: app icon + name + "Now" timestamp */
.cc-mm-alert-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cc-border);
  margin-bottom: 16px;
}
.cc-mm-alert-app {
  display: flex;
  align-items: center;
  gap: 9px;
}
.cc-mm-alert-app-icon {
  width: 22px; height: 22px;
  background: var(--cc-ink);
  color: var(--cc-ore-bright);
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 13px;
  letter-spacing: .03em;
  line-height: 1;
  padding-top: 1px;
}
.cc-mm-alert-app-name {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cc-ink-2);
  font-weight: 500;
}
.cc-mm-alert-time {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cc-stone);
}

/* Body: big icon (centered top) + text content */
.cc-mm-alert-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  position: relative;
}
.cc-mm-alert-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(191,38,8,.1);
  border: 1.5px solid rgba(191,38,8,.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-ore);
  position: relative;
  z-index: 3;
  margin-bottom: 14px;
}
.cc-mm-alert-icon svg {
  width: 26px;
  height: 26px;
}
.cc-mm-alert-text {
  width: 100%;
}
.cc-mm-alert-type {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(24px, 2.8vw, 32px);
  letter-spacing: .04em;
  line-height: 1;
  color: var(--cc-ore);
  margin-bottom: 10px;
}
.cc-mm-alert-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--cc-ink-2);
  line-height: 1.1;
  margin-bottom: 6px;
}
.cc-mm-alert-detail {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--cc-stone);
}

/* Status footer */
.cc-mm-alert-status {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(34,197,94,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #15803D;
}
.cc-mm-alert-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 8px #22C55E;
  animation: cc-pulse 1.5s ease-in-out infinite;
}

/* RECIPIENT / DELIVERY FOOTER STRIP -- operational context after the cards */
.cc-mm-alerts-meta {
  margin-top: 28px;
  padding: 22px 28px;
  background: rgba(15,13,11,.04);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
}
.cc-mm-alerts-meta-block {
  display: flex;
  flex-direction: column;
  gap: 7px;
  position: relative;
  padding-left: 14px;
  border-left: 2px solid var(--cc-ore);
}
.cc-mm-alerts-meta-label {
  font-family: 'DM Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cc-stone);
}
.cc-mm-alerts-meta-text {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--cc-ink);
  font-weight: 500;
}
.cc-mm-alerts-meta-text strong {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 20px;
  letter-spacing: .03em;
  color: var(--cc-ore);
  font-weight: 400;
  margin-right: 6px;
}

@media (max-width: 900px) {
  .cc-mm-alerts-cards { grid-template-columns: 1fr; }
  .cc-mm-alerts-event-content { grid-template-columns: 1fr; gap: 18px; }
  .cc-mm-alerts-event-r { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid rgba(191,38,8,.2); justify-content: space-around; }
  .cc-mm-alerts-meta { grid-template-columns: 1fr; gap: 18px; }
}
.cc-mm-alert-call { animation: cc-mm-alert-call-pop 16s ease-in-out infinite; }
.cc-mm-alert-call::before { animation: cc-mm-alert-bar-call 16s ease-in-out infinite; }
.cc-mm-alert-sms  { animation: cc-mm-alert-sms-pop 16s ease-in-out infinite; }
.cc-mm-alert-sms::before  { animation: cc-mm-alert-bar-sms 16s ease-in-out infinite; }
.cc-mm-alert-push { animation: cc-mm-alert-push-pop 16s ease-in-out infinite; }
.cc-mm-alert-push::before { animation: cc-mm-alert-bar-push 16s ease-in-out infinite; }

/* Stack red + green cards in same visual space */
.cc-mm-alerts-cards-stack {
  position: relative;
}
.cc-mm-alerts-cards--restored {
  position: absolute;
  top: 0; left: 0; right: 0;
  pointer-events: none;
}
.cc-mm-alerts-cards--restored .cc-mm-alert { pointer-events: auto; }

/* Green restored card variants -- override the red theme */
.cc-mm-alert--restored {
  border-color: rgba(34,197,94,.45);
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 6px 24px rgba(34,197,94,.08);
  opacity: 0;
}
.cc-mm-alert--restored::before { background: rgba(34,197,94,.95); }
.cc-mm-alert--restored .cc-mm-alert-app-icon {
  background: rgba(34,197,94,.95);
  color: #fff;
}
.cc-mm-alert--restored .cc-mm-alert-icon {
  background: rgba(34,197,94,.1);
  border-color: rgba(34,197,94,.45);
}
.cc-mm-alert--restored .cc-mm-alert-icon svg { color: rgba(34,197,94,1); }
.cc-mm-alert--restored .cc-mm-alert-rings span {
  border-color: rgba(34,197,94,.55);
}
.cc-mm-alert--restored .cc-mm-alert-type { color: rgba(34,197,94,1); }
.cc-mm-alert--restored .cc-mm-alert-status-dot { background: rgba(34,197,94,.95); }

/* Restored card pop timing -- staggered after the red fades (~64% onward) */
.cc-mm-alert-restored-call  { animation: cc-mm-alert-restored-pop-1 16s ease-in-out infinite; }
.cc-mm-alert-restored-sms   { animation: cc-mm-alert-restored-pop-2 16s ease-in-out infinite; }
.cc-mm-alert-restored-push  { animation: cc-mm-alert-restored-pop-3 16s ease-in-out infinite; }
@keyframes cc-mm-alert-restored-pop-1 {
  0%, 46% { opacity: 0; transform: translateY(14px) scale(.97); }
  49% { opacity: 1; transform: translateY(0) scale(1); }
  62% { opacity: 1; transform: translateY(0) scale(1); }
  66%, 100% { opacity: 0; transform: translateY(14px) scale(.97); }
}
@keyframes cc-mm-alert-restored-pop-2 {
  0%, 49% { opacity: 0; transform: translateY(14px) scale(.97); }
  52% { opacity: 1; transform: translateY(0) scale(1); }
  62% { opacity: 1; transform: translateY(0) scale(1); }
  66%, 100% { opacity: 0; transform: translateY(14px) scale(.97); }
}
@keyframes cc-mm-alert-restored-pop-3 {
  0%, 52% { opacity: 0; transform: translateY(14px) scale(.97); }
  55% { opacity: 1; transform: translateY(0) scale(1); }
  62% { opacity: 1; transform: translateY(0) scale(1); }
  66%, 100% { opacity: 0; transform: translateY(14px) scale(.97); }
}

/* Banner stack: red event + green restored share the same vertical position */
.cc-mm-alerts-banner-stack {
  position: relative;
  margin-bottom: 24px;
}

/* GREEN -- Power Restored banner that appears after the red alert resolves */
.cc-mm-alerts-restored {
  background:
    radial-gradient(ellipse at 0% 50%, rgba(34,197,94,.18) 0%, rgba(34,197,94,.06) 40%, transparent 80%),
    var(--cc-ink);
  border: 1px solid rgba(34,197,94,.45);
  border-radius: 6px;
  padding: 22px 28px;
  position: absolute;
  top: 0; left: 0; right: 0;
  overflow: hidden;
  animation: cc-mm-alerts-restored 16s ease-in-out infinite;
  opacity: 0;
}
.cc-mm-alerts-restored::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 4px;
  background: rgba(34,197,94,.95);
}
.cc-mm-alerts-restored-content {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 28px;
  align-items: center;
}
.cc-mm-alerts-restored-l {
  display: flex;
  align-items: center;
  gap: 18px;
}
.cc-mm-alerts-restored-check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(34,197,94,.95);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(34,197,94,.55), inset 0 0 0 1px rgba(34,197,94,1);
}
.cc-mm-alerts-restored-check svg {
  width: 12px; height: 12px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cc-mm-alerts-restored-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(34,197,94,.95);
  margin-bottom: 4px;
  font-weight: 500;
}
.cc-mm-alerts-restored-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  letter-spacing: .025em;
  color: rgba(34,197,94,1);
  line-height: 1;
}
.cc-mm-alerts-restored-r {
  display: flex;
  gap: 32px;
  align-items: center;
  padding-left: 28px;
  border-left: 1px solid rgba(34,197,94,.2);
}
.cc-mm-alerts-restored-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 36px;
  color: rgba(34,197,94,.95);
  line-height: 1;
  margin-bottom: 4px;
  letter-spacing: .02em;
}
.cc-mm-alerts-restored-stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
@media (max-width: 880px) {
  .cc-mm-alerts-restored-content { grid-template-columns: 1fr; gap: 18px; }
  .cc-mm-alerts-restored-r { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid rgba(34,197,94,.2); justify-content: space-around; }
}

/* AMBER -- Temperature High warning banner -- third round after green resolves */
.cc-mm-alerts-temp {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 26px 32px;
  background: var(--cc-ink);
  border: 1px solid rgba(245,158,11,.35);
  border-left: 4px solid rgba(245,158,11,.95);
  border-radius: 0 4px 4px 0;
  overflow: hidden;
  animation: cc-mm-alerts-temp 16s ease-in-out infinite;
  opacity: 0;
}
.cc-mm-alerts-temp::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(245,158,11,.13) 0%, transparent 55%);
  pointer-events: none;
}
.cc-mm-alerts-temp-content {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  z-index: 1;
}
.cc-mm-alerts-temp-l {
  display: flex;
  align-items: center;
  gap: 18px;
}
.cc-mm-alerts-temp-thermo {
  width: 26px; height: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245,158,11,1);
  animation: cc-mm-alerts-temp-pulse 1.2s ease-in-out infinite;
}
.cc-mm-alerts-temp-thermo svg { width: 100%; height: 100%; }
@keyframes cc-mm-alerts-temp-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.cc-mm-alerts-temp-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(245,158,11,1);
  margin-bottom: 6px;
  font-weight: 500;
}
.cc-mm-alerts-temp-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: .04em;
  line-height: 1.05;
  color: #fff;
  margin: 0;
}
.cc-mm-alerts-temp-r {
  display: flex;
  gap: 28px;
  padding-left: 28px;
  border-left: 1px solid rgba(245,158,11,.2);
}
.cc-mm-alerts-temp-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  color: rgba(245,158,11,1);
  letter-spacing: .03em;
  line-height: 1;
  margin-bottom: 2px;
}
.cc-mm-alerts-temp-stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
}
@media (max-width: 880px) {
  .cc-mm-alerts-temp-content { grid-template-columns: 1fr; gap: 18px; }
  .cc-mm-alerts-temp-r { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid rgba(245,158,11,.2); justify-content: space-around; }
}

/* Amber confirmation card variants -- temp high notifications */
.cc-mm-alerts-cards--temp {
  position: absolute;
  top: 0; left: 0; right: 0;
  pointer-events: none;
}
.cc-mm-alerts-cards--temp .cc-mm-alert { pointer-events: auto; }
.cc-mm-alert--temp {
  border-color: rgba(245,158,11,.45);
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 6px 24px rgba(245,158,11,.08);
  opacity: 0;
}
.cc-mm-alert--temp::before { background: rgba(245,158,11,.95); }
.cc-mm-alert--temp .cc-mm-alert-app-icon {
  background: rgba(245,158,11,.95);
  color: #fff;
}
.cc-mm-alert--temp .cc-mm-alert-icon {
  background: rgba(245,158,11,.1);
  border-color: rgba(245,158,11,.45);
}
.cc-mm-alert--temp .cc-mm-alert-icon svg { color: rgba(245,158,11,1); }
.cc-mm-alert--temp .cc-mm-alert-rings span {
  border-color: rgba(245,158,11,.55);
}
.cc-mm-alert--temp .cc-mm-alert-type { color: rgba(245,158,11,1); }
.cc-mm-alert--temp .cc-mm-alert-status-dot { background: rgba(245,158,11,.95); }

.cc-mm-alert-temp-call  { animation: cc-mm-alert-temp-pop-1 16s ease-in-out infinite; }
.cc-mm-alert-temp-sms   { animation: cc-mm-alert-temp-pop-2 16s ease-in-out infinite; }
.cc-mm-alert-temp-push  { animation: cc-mm-alert-temp-pop-3 16s ease-in-out infinite; }
@keyframes cc-mm-alert-temp-pop-1 {
  0%, 70% { opacity: 0; transform: translateY(14px) scale(.97); }
  74% { opacity: 1; transform: translateY(0) scale(1); }
  90% { opacity: 1; transform: translateY(0) scale(1); }
  93%, 100% { opacity: 0; transform: translateY(14px) scale(.97); }
}
@keyframes cc-mm-alert-temp-pop-2 {
  0%, 73% { opacity: 0; transform: translateY(14px) scale(.97); }
  77% { opacity: 1; transform: translateY(0) scale(1); }
  90% { opacity: 1; transform: translateY(0) scale(1); }
  93%, 100% { opacity: 0; transform: translateY(14px) scale(.97); }
}
@keyframes cc-mm-alert-temp-pop-3 {
  0%, 76% { opacity: 0; transform: translateY(14px) scale(.97); }
  80% { opacity: 1; transform: translateY(0) scale(1); }
  90% { opacity: 1; transform: translateY(0) scale(1); }
  93%, 100% { opacity: 0; transform: translateY(14px) scale(.97); }
}
@keyframes cc-mm-alerts-temp {
  0%, 68% { opacity: 0; transform: translateY(-4px); }
  71%, 90% { opacity: 1; transform: translateY(0); }
  93%, 100% { opacity: 0; transform: translateY(-4px); }
}

/* Hold all sequence animations at t=0 until the section enters the viewport
   so the user always sees the build-up from the start when they scroll to it.
   The -2.72s delay (= 17% of the 16s cycle) skips the empty hidden frames at
   the head of each animation so the banner is already in its visible state by
   the time is-playing fires. Cards keep their staggered fan-out timing. */
.cc-mm-section .cc-mm-power-state-normal,
.cc-mm-section .cc-mm-power-state-alert,
.cc-mm-section .cc-mm-alerts-event,
.cc-mm-section .cc-mm-alerts-restored,
.cc-mm-section .cc-mm-alert-call,
.cc-mm-section .cc-mm-alert-call::before,
.cc-mm-section .cc-mm-alert-sms,
.cc-mm-section .cc-mm-alert-sms::before,
.cc-mm-section .cc-mm-alert-push,
.cc-mm-section .cc-mm-alert-push::before,
.cc-mm-section .cc-mm-alert-restored-call,
.cc-mm-section .cc-mm-alert-restored-sms,
.cc-mm-section .cc-mm-alert-restored-push,
.cc-mm-section .cc-mm-fanout-line-call,
.cc-mm-section .cc-mm-fanout-line-sms,
.cc-mm-section .cc-mm-fanout-line-push,
.cc-mm-section .cc-mm-fanout-dot-call,
.cc-mm-section .cc-mm-fanout-dot-sms,
.cc-mm-section .cc-mm-fanout-dot-push,
.cc-mm-section .cc-mm-alerts-temp,
.cc-mm-section .cc-mm-alerts-temp-thermo,
.cc-mm-section .cc-mm-alert-temp-call,
.cc-mm-section .cc-mm-alert-temp-sms,
.cc-mm-section .cc-mm-alert-temp-push {
  animation-play-state: paused;
  animation-delay: -2.72s;
}
.cc-mm-section.is-playing .cc-mm-power-state-normal,
.cc-mm-section.is-playing .cc-mm-power-state-alert,
.cc-mm-section.is-playing .cc-mm-alerts-event,
.cc-mm-section.is-playing .cc-mm-alerts-restored,
.cc-mm-section.is-playing .cc-mm-alerts-temp,
.cc-mm-section.is-playing .cc-mm-alerts-temp-thermo,
.cc-mm-section.is-playing .cc-mm-alert-call,
.cc-mm-section.is-playing .cc-mm-alert-call::before,
.cc-mm-section.is-playing .cc-mm-alert-sms,
.cc-mm-section.is-playing .cc-mm-alert-sms::before,
.cc-mm-section.is-playing .cc-mm-alert-push,
.cc-mm-section.is-playing .cc-mm-alert-push::before,
.cc-mm-section.is-playing .cc-mm-alert-restored-call,
.cc-mm-section.is-playing .cc-mm-alert-restored-sms,
.cc-mm-section.is-playing .cc-mm-alert-restored-push,
.cc-mm-section.is-playing .cc-mm-alert-temp-call,
.cc-mm-section.is-playing .cc-mm-alert-temp-sms,
.cc-mm-section.is-playing .cc-mm-alert-temp-push,
.cc-mm-section.is-playing .cc-mm-fanout-line-call,
.cc-mm-section.is-playing .cc-mm-fanout-line-sms,
.cc-mm-section.is-playing .cc-mm-fanout-line-push,
.cc-mm-section.is-playing .cc-mm-fanout-dot-call,
.cc-mm-section.is-playing .cc-mm-fanout-dot-sms,
.cc-mm-section.is-playing .cc-mm-fanout-dot-push {
  animation-play-state: running;
}

@keyframes cc-mm-alert-call-pop {
  0%, 19% { opacity: 0; transform: translateY(18px) scale(.96); }
  22% { opacity: 1; transform: translateY(0) scale(1); }
  38% { opacity: 1; transform: translateY(0) scale(1); }
  41%, 100% { opacity: 0; transform: translateY(18px) scale(.96); }
}
@keyframes cc-mm-alert-bar-call {
  0%, 19% { transform: scaleX(0); }
  23% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
@keyframes cc-mm-alert-sms-pop {
  0%, 23% { opacity: 0; transform: translateY(18px) scale(.96); }
  26% { opacity: 1; transform: translateY(0) scale(1); }
  38% { opacity: 1; transform: translateY(0) scale(1); }
  41%, 100% { opacity: 0; transform: translateY(18px) scale(.96); }
}
@keyframes cc-mm-alert-bar-sms {
  0%, 23% { transform: scaleX(0); }
  27% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}
@keyframes cc-mm-alert-push-pop {
  0%, 27% { opacity: 0; transform: translateY(18px) scale(.96); }
  30% { opacity: 1; transform: translateY(0) scale(1); }
  38% { opacity: 1; transform: translateY(0) scale(1); }
  41%, 100% { opacity: 0; transform: translateY(18px) scale(.96); }
}
@keyframes cc-mm-alert-bar-push {
  0%, 27% { transform: scaleX(0); }
  31% { transform: scaleX(1); }
  100% { transform: scaleX(1); }
}

/* POWER RESTORED -- green banner appears after the alert resolves */
@keyframes cc-mm-alerts-restored {
  0%, 44% { opacity: 0; transform: translateY(-4px); }
  47%, 65% { opacity: 1; transform: translateY(0); }
  68%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes cc-mm-alert-restored-pop {
  0%, 46% { opacity: 0; transform: translateY(14px) scale(.97); }
  49% { opacity: 1; transform: translateY(0) scale(1); }
  62% { opacity: 1; transform: translateY(0) scale(1); }
  66%, 100% { opacity: 0; transform: translateY(14px) scale(.97); }
}


/* CTA below alerts */
.cc-mm-alerts-cta {
  margin-top: 36px;
  display: flex;
  justify-content: center;
  padding-top: 28px;
  border-top: 1px solid var(--cc-border);
}
.cc-mm-alerts-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cc-ink-2);
  text-decoration: none;
  padding: 14px 24px;
  border: 1px solid var(--cc-ore);
  border-radius: 3px;
  transition: background .22s, color .22s, gap .22s;
  font-weight: 500;
}
.cc-mm-alerts-link:hover {
  background: var(--cc-ore);
  color: #fff;
  gap: 18px;
}
.cc-mm-alerts-link-arrow {
  display: inline-block;
  transition: transform .22s;
}
.cc-mm-alerts-link:hover .cc-mm-alerts-link-arrow { transform: translateX(4px); }

@media (max-width: 1024px) {
  .cc-mm-flow {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .cc-mm-flow-bridge {
    min-height: 80px;
    padding: 0;
  }
  .cc-mm-flow-bridge-svg { height: 80px; }
  .cc-mm-flow-bridge-cloud { top: 50%; }
  .cc-mm-alerts-fanout { height: 50px; margin-bottom: 4px; }
  .cc-mm-alerts-cards { grid-template-columns: 1fr; gap: 12px; }
}

/* (legacy pulse class retained for compatibility) */
.cc-mm-pulse {
  animation: cc-mm-pulse 2s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes cc-mm-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* ══════════════════════════════════════════════════════════ */
/* ── FULL-BLEED DEPLOYMENT SECTIONS ───────────────────────── */
/* ══════════════════════════════════════════════════════════ */
.cc-deploy-header {
  background: var(--cc-ink);
  color: #fff;
  padding: 100px 0 64px;
  position: relative;
}
/* ══════════════════════════════════════════════════════════ */
/* ── DEPLOYMENT SCENARIOS GRID (contained, 2x2 cards) ─────── */
/* ══════════════════════════════════════════════════════════ */
.cc-deploy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  position: relative;
  z-index: 2;
}
.cc-deploy-card {
  background: var(--cc-ink-3);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .25s, transform .25s;
  position: relative;
}
.cc-deploy-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--cc-ore);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
  z-index: 3;
}
.cc-deploy-card:hover {
  border-color: rgba(191,38,8,.3);
  transform: translateY(-4px);
}
.cc-deploy-card:hover::before { transform: scaleX(1); }
.cc-deploy-img {
  aspect-ratio: 3 / 2;
  background-color: #1a1612;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}
.cc-deploy-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(15,13,11,.55) 100%);
  pointer-events: none;
}
.cc-deploy-tag {
  position: absolute;
  bottom: 16px;
  left: 18px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(15,13,11,.85);
  padding: 6px 12px;
  border-radius: 3px;
  border-left: 2px solid var(--cc-ore);
  z-index: 2;
}
.cc-deploy-body {
  padding: 24px 28px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cc-deploy-card h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(26px, 2.4vw, 32px);
  letter-spacing: .035em;
  line-height: 1.05;
  color: #fff;
  margin: 0;
}
.cc-deploy-card h3 em { color: var(--cc-ore-bright); font-style: normal; }
.cc-deploy-card p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
  margin: 0;
}
.cc-deploy-meta {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--cc-ore-bright);
  text-transform: uppercase;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* ══════════════════════════════════════════════════════════ */
/* ── CURRENT CUSTOMERS / AGENCY LOGO WALL ─────────────────── */
.cc-customers-section { position: relative; }
.cc-customers-head {
  text-align: center;
  margin-bottom: 0;
}
.cc-customers-title {
  white-space: nowrap;
  margin: 12px 0 16px;
}
.cc-customers-body {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.cc-customers-head .cc-kicker {
  justify-content: center;
}
.cc-customers-head .cc-kicker::after {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--cc-ore);
}

.cc-agencies-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--cc-border);
  border: 1px solid var(--cc-border);
  margin-top: 48px;
}
.cc-agency {
  background: var(--cc-cream);
  padding: 24px 14px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  position: relative;
  min-height: 144px;
  transition: background .2s;
}
.cc-agency::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  transition: background .2s;
}
.cc-agency:hover { background: #fff; }
.cc-agency:hover::before { background: var(--cc-ore); }
.cc-agency-icon {
  width: 38px;
  height: 38px;
  color: var(--cc-ore);
  opacity: .9;
}
.cc-agency-icon svg { width: 100%; height: 100%; display: block; }
.cc-agency-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 17px;
  letter-spacing: .04em;
  color: var(--cc-ink);
  line-height: 1;
  margin-top: 2px;
}
.cc-agency-sub {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--cc-stone-light);
  text-transform: uppercase;
  line-height: 1;
}
.cc-agency--plus { background: var(--cc-ink); }
.cc-agency--plus:hover { background: var(--cc-ink); }
.cc-agency--plus::before { background: var(--cc-ore); }
.cc-agency--plus .cc-agency-plus-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 38px;
  color: var(--cc-ore-bright);
  line-height: 1;
  letter-spacing: .03em;
}
.cc-agency--plus .cc-agency-name { color: #fff; }
.cc-agency--plus .cc-agency-sub { color: rgba(255,255,255,.55); }

.cc-customers-foot {
  margin-top: 32px;
  text-align: center;
}
.cc-customers-foot p {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cc-stone);
}
.cc-customers-foot a {
  color: var(--cc-ore);
  text-decoration: none;
  border-bottom: 1px solid rgba(191,38,8,.3);
  padding-bottom: 1px;
}
.cc-customers-foot a:hover { border-color: var(--cc-ore); }

@media (max-width: 1024px) {
  .cc-agencies-grid { grid-template-columns: repeat(4, 1fr); }
  .cc-customers-title { white-space: normal; }
}
@media (max-width: 640px) {
  .cc-agencies-grid { grid-template-columns: repeat(3, 1fr); }
  .cc-agency { min-height: 120px; padding: 18px 10px 16px; }
  .cc-agency-icon { width: 32px; height: 32px; }
  .cc-agency-name { font-size: 14px; }
}
@media (max-width: 400px) {
  .cc-agencies-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── PAIRS WITH WORKFLOW (image hero + product tiles) ─────── */
/* ══════════════════════════════════════════════════════════ */
.cc-pairs-hero {
  position: relative;
  margin-bottom: 56px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--cc-border);
  background: var(--cc-ink);
}
.cc-pairs-hero-img {
  width: 100%;
  aspect-ratio: 21 / 9;
  background-color: var(--cc-ink);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
}
.cc-pairs-hero-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 45%, rgba(15,13,11,.5) 80%, rgba(15,13,11,.92) 100%),
    linear-gradient(90deg, rgba(15,13,11,.55) 0%, transparent 35%);
  pointer-events: none;
}
.cc-pairs-hero-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 40px 28px;
  color: #fff;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cc-pairs-hero-meta-l { max-width: 640px; }
.cc-pairs-hero-tag {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cc-ore-bright);
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.cc-pairs-hero-tag::before {
  content: '';
  display: block;
  width: 24px; height: 1px;
  background: var(--cc-ore-bright);
}
.cc-pairs-hero-meta h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: .035em;
  line-height: 1.05;
  color: #fff;
  margin: 0 0 8px;
}
.cc-pairs-hero-meta h3 em { color: var(--cc-ore-bright); font-style: normal; }
.cc-pairs-hero-meta p {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: rgba(255,255,255,.85);
  line-height: 1.55;
  margin: 0;
  max-width: 560px;
}
.cc-pairs-hero-meta-r {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  text-align: right;
  padding-bottom: 4px;
}
.cc-pairs-hero-meta-r strong {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  letter-spacing: .035em;
  color: #fff;
  margin-top: 4px;
  font-weight: 400;
}

/* TILES GRID */
.cc-pairs-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cc-pairs-tile {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: border-color .25s, transform .25s, box-shadow .25s;
  position: relative;
}
.cc-pairs-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cc-ore);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s ease;
  z-index: 3;
}
.cc-pairs-tile:hover {
  border-color: var(--cc-ore);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}
.cc-pairs-tile:hover::before { transform: scaleX(1); }
.cc-pairs-tile-img {
  aspect-ratio: 4 / 3;
  background: #fff;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  padding: 18px;
  border-bottom: 1px solid var(--cc-border);
  position: relative;
}
.cc-pairs-tile-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #fff;
  background: var(--cc-ore);
  padding: 5px 10px;
  border-radius: 3px;
  z-index: 2;
}
.cc-pairs-tile-body {
  padding: 22px 24px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cc-pairs-tile-cat {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cc-ore);
}
.cc-pairs-tile h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(24px, 2.2vw, 28px);
  letter-spacing: .035em;
  line-height: 1.05;
  color: var(--cc-ink-2);
  margin: 0;
}
.cc-pairs-tile p {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--cc-stone);
  line-height: 1.55;
  margin: 0;
}
.cc-pairs-tile-foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--cc-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.cc-pairs-tile-stage {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cc-stone);
}
.cc-pairs-tile-cta {
  font-family: 'DM Mono', monospace;
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--cc-ore);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap .18s;
}
.cc-pairs-tile-cta::after { content: '\2192'; }
.cc-pairs-tile:hover .cc-pairs-tile-cta { gap: 10px; }

@media (max-width: 1100px) {
  .cc-pairs-tiles { grid-template-columns: 1fr; gap: 16px; }
  .cc-pairs-hero-img { aspect-ratio: 16 / 9; }
  .cc-pairs-hero-meta { padding: 20px 24px; flex-direction: column; align-items: flex-start; }
  .cc-pairs-hero-meta-r { text-align: left; }
}


/* ══════════════════════════════════════════════════════════ */
/* ── WHY IT EXISTS -- SPLIT LAYOUT (text left, image right) ── */
/* ══════════════════════════════════════════════════════════ */
.cc-why-section {
  position: relative;
  background-color: #0a0908;
  overflow: hidden;
  isolation: isolate;
}
.cc-why-split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: stretch;
  min-height: 620px;
}

/* LEFT: dark text panel */
.cc-why-text-panel {
  position: relative;
  background: #0a0908;
  padding: 96px var(--cc-px) 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
}
.cc-why-text-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.024) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 0;
}
.cc-why-text-panel > * { position: relative; z-index: 1; }

/* Ore accent line down the left edge of text panel */
.cc-why-text-panel::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--cc-ore) 20%, var(--cc-ore) 80%, transparent);
  z-index: 1;
}

/* RIGHT: image panel */
.cc-why-image-panel {
  position: relative;
  background-color: #0a0908;
  overflow: hidden;
  min-height: 620px;
}
.cc-why-image {
  position: absolute;
  inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: contrast(1.06) saturate(1.06);
  animation: cc-why-zoom 28s ease-out forwards;
}
@keyframes cc-why-zoom {
  from { transform: scale(1.06); }
  to { transform: scale(1); }
}
.cc-why-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(15,13,11,.78) 0%, rgba(15,13,11,.15) 14%, transparent 32%),
    linear-gradient(180deg, rgba(15,13,11,.4) 0%, transparent 18%, transparent 80%, rgba(15,13,11,.6) 100%);
  pointer-events: none;
}

/* HUD: TOP STATUS strip (top of text panel) */
.cc-why-status-bar {
  position: absolute;
  top: 32px;
  left: var(--cc-px);
  right: calc(var(--cc-px) - 12px);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
.cc-why-status-bar strong { color: #fff; font-weight: 500; }
.cc-why-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 14px #22C55E, 0 0 4px #22C55E;
  animation: cc-why-pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
.cc-why-status-bar-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(191,38,8,.55), rgba(255,255,255,.08));
}
@keyframes cc-why-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.82); }
}

/* HUD: image panel stage tag */
.cc-why-stage-tag {
  position: absolute;
  top: 28px;
  right: 28px;
  z-index: 4;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 9px 14px;
  background: rgba(15,13,11,.72);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 3px;
  color: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.cc-why-stage-tag strong { color: var(--cc-ore-bright); font-weight: 500; }

/* HUD: image bottom caption */
.cc-why-image-caption {
  position: absolute;
  bottom: 64px;
  left: 28px;
  right: 28px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(191,38,8,.4);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.cc-why-image-caption strong {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 22px;
  letter-spacing: .035em;
  color: #fff;
  font-weight: 400;
  margin-bottom: 4px;
}
.cc-why-image-caption > div:last-child { color: var(--cc-ore-bright); text-align: right; }
.cc-why-image-figcap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 4;
  padding: 28px 28px 14px;
  background: linear-gradient(to top, rgba(10,9,8,.92) 30%, rgba(10,9,8,0) 100%);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  text-align: center;
}

/* Corner brackets on image panel */
.cc-why-image-corner {
  position: absolute;
  width: 28px;
  height: 28px;
  z-index: 5;
  pointer-events: none;
}
.cc-why-image-corner-tl { top: 18px; left: 18px; border-top: 2px solid var(--cc-ore); border-left: 2px solid var(--cc-ore); }
.cc-why-image-corner-br { bottom: 18px; right: 18px; border-bottom: 2px solid var(--cc-ore); border-right: 2px solid var(--cc-ore); }

/* CONTENT in text panel */
.cc-why-content {
  max-width: 540px;
  color: #fff;
}
.cc-why-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--cc-ore-bright);
  margin-bottom: 22px;
}
.cc-why-eyebrow::before {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: var(--cc-ore-bright);
}
.cc-why-headline {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(42px, 4.8vw, 64px);
  letter-spacing: .025em;
  line-height: 1.02;
  color: #fff;
  margin: 0 0 22px;
}
.cc-why-headline em {
  color: var(--cc-ore-bright);
  font-style: normal;
  position: relative;
  display: inline-block;
}
.cc-why-headline em::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 4px;
  height: 6px;
  background: var(--cc-ore-bright);
  opacity: .16;
  z-index: -1;
}
.cc-why-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
  margin: 0 0 24px;
}
.cc-why-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 36px;
  margin: 0 0 24px;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
  justify-content: start;
}
.cc-why-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 2.8vw, 36px);
  letter-spacing: .03em;
  line-height: 1;
  color: var(--cc-ore-bright);
  margin-bottom: 4px;
}
.cc-why-stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
}
.cc-why-quote {
  position: relative;
  padding: 16px 22px;
  background: rgba(255,255,255,.04);
  border-left: 3px solid var(--cc-ore);
  border-radius: 0 3px 3px 0;
}
.cc-why-quote p {
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  font-style: italic;
  color: rgba(255,255,255,.9);
  margin: 0 0 10px;
}
.cc-why-quote-attr {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.cc-why-quote-attr strong { display: block; color: #fff; font-weight: 500; letter-spacing: .14em; margin-bottom: 2px; }

@media (max-width: 1024px) {
  .cc-why-split { grid-template-columns: 1fr; }
  .cc-why-image-panel { min-height: 360px; order: -1; }
  .cc-why-text-panel { padding: 70px var(--cc-px) 60px; min-height: auto; }
  .cc-why-status-bar { top: 24px; }
  .cc-why-stats { gap: 22px; }
}
@media (max-width: 768px) {
  .cc-why-image-panel { min-height: 280px; }
  .cc-why-text-panel { padding: 80px var(--cc-px) 50px; }
  .cc-why-stats { grid-template-columns: 1fr 1fr; }
  .cc-why-stage-tag { top: 14px; right: 14px; font-size: 9px; padding: 7px 11px; }
  .cc-why-image-caption { left: 14px; right: 14px; bottom: 14px; flex-direction: column; align-items: flex-start; gap: 4px; }
  .cc-why-image-corner { width: 18px; height: 18px; }
  .cc-why-image-corner-tl { top: 10px; left: 10px; }
  .cc-why-image-corner-br { bottom: 10px; right: 10px; }
}

/* ══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════ */
/* ── EVOLUTION (FULL-BLEED VARIANT) ───────────────────────── */
/* ══════════════════════════════════════════════════════════ */
.cc-evo-fullbleed {
  position: relative;
  min-height: 90vh;
  background-color: var(--cc-ink);
  background-position: 2% center;
  background-size: 55% auto;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 120px 0;
}
.cc-evo-fullbleed::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(270deg, rgba(15,13,11,1) 0%, rgba(15,13,11,1) 38%, rgba(15,13,11,.6) 50%, rgba(15,13,11,.15) 75%, transparent 100%),
    linear-gradient(180deg, rgba(15,13,11,.35) 0%, transparent 25%, transparent 75%, rgba(15,13,11,.55) 100%);
  z-index: 1;
}
.cc-evo-fullbleed::after {
  content: 'EVOLVED';
  position: absolute;
  bottom: 40px;
  right: 5%;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(120px, 16vw, 240px);
  color: rgba(191,38,8,.05);
  letter-spacing: .04em;
  pointer-events: none;
  line-height: 1;
  z-index: 1;
}
.cc-evo-fullbleed .cc-container {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  max-width: 100%;
  padding: 0;
}
.cc-evo-fullbleed-content {
  width: 50%;
  max-width: none;
  min-width: 440px;
  min-height: 70vh;
  background: rgba(15,13,11,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.08);
  border-right: 0;
  border-left: 3px solid var(--cc-ore);
  padding: 56px 64px 52px;
  border-radius: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cc-evo-fullbleed-content .cc-h2 {
  color: #fff;
  margin-bottom: 18px;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.05;
  letter-spacing: .025em;
}
.cc-evo-fullbleed-content .cc-h2 em { color: var(--cc-ore-bright); }

/* Stats inside frosted panel */
.cc-evo-fullbleed-stats {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,.15);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.cc-evo-fullbleed-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(40px, 4.2vw, 54px);
  color: var(--cc-ore-bright);
  line-height: .95;
  margin-bottom: 6px;
  letter-spacing: .02em;
}
.cc-evo-fullbleed-stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .22em;
  color: rgba(255,255,255,.75);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cc-evo-fullbleed-stat-body {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255,255,255,.72);
}
@media (max-width: 880px) {
  .cc-evo-fullbleed {
    padding: 80px 0;
    min-height: 70vh;
    background-size: 100% auto;
    background-position: center 20%;
  }
  .cc-evo-fullbleed::before {
    background:
      linear-gradient(180deg, rgba(15,13,11,.4) 0%, rgba(15,13,11,.6) 35%, rgba(15,13,11,.92) 60%, rgba(15,13,11,.96) 100%);
  }
  .cc-evo-fullbleed-content { padding: 36px 30px 32px; max-width: 100%; }
  .cc-evo-fullbleed-stats { grid-template-columns: 1fr; gap: 18px; }
}

/* ══════════════════════════════════════════════════════════ */
/* ── COST / VALUE MATH SECTION ────────────────────────────── */
/* ══════════════════════════════════════════════════════════ */
.cc-math {
  position: relative;
  background: var(--cc-ink);
  color: #fff;
  overflow: hidden;
  padding: 120px 0;
}
.cc-math::after {
  content: '/ PHONE / YEAR';
  position: absolute;
  bottom: 40px;
  right: -2%;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(90px, 12vw, 180px);
  color: rgba(191,38,8,.045);
  letter-spacing: .04em;
  pointer-events: none;
  line-height: 1;
  z-index: 0;
  white-space: nowrap;
}
.cc-math-head {
  max-width: 820px;
  margin-bottom: 72px;
  position: relative;
  z-index: 2;
}
.cc-math-head .cc-h2 {
  color: #fff;
  margin-top: 18px;
}
.cc-math-head .cc-h2 em { color: var(--cc-ore-bright); }
.cc-math-equation {
  display: grid;
  grid-template-columns: 1fr 32px 1fr 32px 1fr 32px 1.2fr;
  gap: 14px;
  align-items: stretch;
  margin-bottom: 64px;
  position: relative;
  z-index: 2;
}
.cc-math-step {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 6px;
  padding: 36px 20px 28px;
  text-align: center;
  transition: border-color .25s, background .25s, transform .25s;
}
.cc-math-step:hover {
  border-color: rgba(255,255,255,.25);
  background: rgba(255,255,255,.06);
  transform: translateY(-2px);
}
.cc-math-result {
  background: rgba(191,38,8,.14);
  border: 1px solid rgba(191,38,8,.55);
  position: relative;
}
.cc-math-result::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--cc-ore);
  border-radius: 6px 6px 0 0;
}
.cc-math-result:hover {
  background: rgba(191,38,8,.18);
  border-color: var(--cc-ore);
}
.cc-math-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(38px, 4.5vw, 60px);
  color: #fff;
  letter-spacing: .03em;
  line-height: 1;
  margin-bottom: 12px;
}
.cc-math-result .cc-math-num { color: var(--cc-ore-bright); }
.cc-math-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  line-height: 1.4;
}
.cc-math-result .cc-math-label { color: var(--cc-ore-bright); }
.cc-math-op {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(28px, 3vw, 40px);
  color: rgba(255,255,255,.35);
  text-align: center;
  line-height: 1;
  align-self: center;
  letter-spacing: .03em;
}
.cc-math-question {
  max-width: 820px;
  position: relative;
  z-index: 2;
  padding-top: 56px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.cc-math-question p {
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,.78);
  margin-bottom: 28px;
}
.cc-math-ask {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: clamp(30px, 3.6vw, 48px) !important;
  font-weight: 400 !important;
  color: #fff !important;
  letter-spacing: .03em !important;
  line-height: 1.15 !important;
  margin-top: 16px !important;
  margin-bottom: 36px !important;
}
.cc-math-ask em {
  color: var(--cc-ore-bright);
  font-style: normal;
}
.cc-math-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 8px;
}

/* ══════════════════════════════════════════════════════════ */
/* ── RESPONSIVE ───────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .cc-page { --cc-px: 32px; }
  .cc-section { padding: 100px 0; }
  .cc-fs-grid { grid-template-columns: 1fr; gap: 40px; }
  .cc-fs-display { position: relative; top: 0; max-width: 600px; margin: 0 auto; width: 100%; }
  .cc-uses-grid { grid-template-columns: repeat(2, 1fr); }
  .cc-mm-features { grid-template-columns: 1fr; }
  .cc-math-equation {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
  }
  .cc-math-equation .cc-math-op { display: none; }
  .cc-math-equation .cc-math-result {
    grid-column: 1 / 4;
    margin-top: 12px;
  }
  .cc-deploy-grid { grid-template-columns: 1fr; gap: 18px; }
  .cc-intro-grid,
  .cc-capacity-grid,
  .cc-evo-grid,
  .cc-cs-grid,
  .cc-specs-grid,
  .cc-cta-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .cc-section-head-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .cc-section-head-split .cc-body { text-align: left; }
  .cc-detail-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    height: auto;
  }
  .cc-detail-tile { aspect-ratio: 1; }
  .cc-detail-tile.tall { grid-row: auto; grid-column: 1 / 3; aspect-ratio: 16 / 9; }
  .cc-hero-stats {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 32px;
  }
  .cc-hero-stat:nth-child(3) { border-right: none; padding-right: 0; }
  .cc-hero-stat:nth-child(4) { padding-left: 0; }
}

@media (max-width: 768px) {
  .cc-page { --cc-px: 20px; }
  .cc-section { padding: 80px 0; }
  .cc-hero { min-height: 90vh; padding-top: 40px; }
  .cc-hero-top { margin-bottom: 60px; flex-wrap: wrap; gap: 16px; }
  .cc-hero-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .cc-hero-stat { padding: 0; border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); padding-bottom: 16px; }
  .cc-hero-stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.08); padding-right: 16px; }
  .cc-hero-stat:nth-child(even) { padding-left: 16px; }
  .cc-hero-stat:last-child { border-bottom: none; }
  .cc-uses-grid { grid-template-columns: 1fr; }
  .cc-app-grid { grid-template-columns: 1fr; }
  .cc-detail-grid { grid-template-columns: 1fr; }
  .cc-detail-tile.tall { grid-column: 1; aspect-ratio: 4 / 3; }
  .cc-cta-card { padding: 28px; }
  .cc-cta-price { font-size: 48px; }
  .cc-spec-row { grid-template-columns: 1fr; gap: 6px; }
  .cc-evo::after { font-size: 80px; }
  .cc-deploy { min-height: 60vh; padding: 60px 0; }
  .cc-deploy-card { padding: 30px 26px; max-width: 100%; }
  .cc-deploy.cc-deploy-right .cc-deploy-card { margin-left: 0; }
  .cc-evo-fullbleed { min-height: 70vh; padding: 80px 0; }
  .cc-evo-fullbleed-content { padding: 32px 28px; }
  .cc-mm-workflow { padding: 20px 12px; }
  .cc-math { padding: 80px 0; }
  .cc-math-equation { grid-template-columns: 1fr; }
  .cc-math-equation .cc-math-result { grid-column: 1; margin-top: 8px; }
  .cc-math-step { padding: 24px 16px 20px; }
}

@media (max-width: 480px) {
  .cc-hero-headline .cc-h1 { font-size: 56px; }
  .cc-hero-stat-num { font-size: 36px; }
}


/* ══════════════════════════════════════════════════════════ */
/* ── PRODUCT VIDEO ────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════ */
.cc-video-section {
  position: relative;
  padding: 90px 0 90px;
  background: var(--cc-ink);
  overflow: hidden;
  isolation: isolate;
}
.cc-video-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: 0;
}
.cc-video-section > * { position: relative; z-index: 1; }
.cc-video-frame {
  position: relative;
  max-width: 1100px;
  margin: 40px auto 0;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}
.cc-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.cc-video-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  z-index: 2;
  pointer-events: none;
}
.cc-video-corner-tl { top: 14px; left: 14px; border-top: 2px solid var(--cc-ore); border-left: 2px solid var(--cc-ore); }
.cc-video-corner-tr { top: 14px; right: 14px; border-top: 2px solid var(--cc-ore); border-right: 2px solid var(--cc-ore); }
.cc-video-corner-bl { bottom: 14px; left: 14px; border-bottom: 2px solid var(--cc-ore); border-left: 2px solid var(--cc-ore); }
.cc-video-corner-br { bottom: 14px; right: 14px; border-bottom: 2px solid var(--cc-ore); border-right: 2px solid var(--cc-ore); }
.cc-video-caption {
  max-width: 1100px;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(191,38,8,.35);
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.cc-video-caption .cc-video-caption-r { color: var(--cc-ore-bright); }
@media (max-width: 768px) {
  .cc-video-section { padding: 60px 0; }
  .cc-video-corner { width: 16px; height: 16px; top: 8px; left: 8px; }
  .cc-video-corner-tr { right: 8px; left: auto; }
  .cc-video-corner-bl { bottom: 8px; top: auto; }
  .cc-video-corner-br { bottom: 8px; right: 8px; top: auto; left: auto; }
  .cc-video-caption { flex-direction: column; gap: 6px; text-align: center; }
}

/* ══════════════════════════════════════════════════════════ */
/* ── UNITS CALCULATOR ─────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════ */
.cc-calc-section {
  background: var(--cc-sand);
  padding: 80px 0 90px;
  position: relative;
  border-top: 1px solid var(--cc-border);
  overflow: hidden;
}
.cc-calc-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(30,26,22,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,26,22,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
}
.cc-calc-section .cc-container { position: relative; z-index: 2; }

.cc-calc-head {
  text-align: center;
  margin-bottom: 44px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.cc-calc-head .cc-kicker {
  display: inline-flex;
  margin-bottom: 14px;
  justify-content: center;
}
.cc-calc-head .cc-h2 {
  font-size: clamp(32px, 6vw, 72px);
  letter-spacing: .03em;
  line-height: 1;
  margin-bottom: 18px;
  font-weight: 400;
  white-space: nowrap;
}
@media (max-width: 680px) {
  .cc-calc-head .cc-h2 { white-space: normal; line-height: .98; }
}
.cc-calc-head p {
  font-size: 14px;
  color: var(--cc-stone);
  line-height: 1.6;
  max-width: 580px;
  margin: 0 auto;
}
.cc-calc-head p strong {
  color: var(--cc-ink-2);
  font-weight: 600;
}

.cc-calc-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 32px;
  align-items: start;
  margin-bottom: 16px;
}

/* INPUT PANE */
.cc-calc-input-pane {
  background: var(--cc-cream);
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  padding: 22px 22px 24px;
  position: relative;
  overflow: hidden;
}
/* Subtle ore-red top accent strip */
.cc-calc-input-pane::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--cc-ore) 0%, var(--cc-ore) 40%, transparent 100%);
  z-index: 1;
}
/* Subtle ore-tinted radial in top-right corner */
.cc-calc-input-pane::after {
  content: '';
  position: absolute;
  top: -40px; right: -60px;
  width: 240px; height: 240px;
  background: radial-gradient(circle at center, rgba(191,38,8,.08) 0%, rgba(191,38,8,.04) 30%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.cc-calc-input-pane > * { position: relative; z-index: 2; }

/* Header row: title + phone icon */
.cc-calc-pane-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.cc-calc-pane-head-text { flex: 1; min-width: 0; }
.cc-calc-phone-icon {
  width: 44px;
  height: 64px;
  flex-shrink: 0;
  position: relative;
  margin-top: 2px;
}
.cc-calc-phone-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: var(--cc-ore);
  fill: none;
  stroke-width: 1.4;
}
.cc-calc-phone-icon::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 8px;
  background: radial-gradient(ellipse at center, rgba(191,38,8,.18) 0%, transparent 70%);
  pointer-events: none;
}
.cc-calc-label {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cc-stone);
  margin-bottom: 10px;
  display: block;
}
.cc-calc-label-strong {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--cc-ink-2);
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 14px;
  line-height: 1.4;
}

.cc-calc-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cc-ore);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cc-calc-eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--cc-ore);
  display: inline-block;
}

.cc-calc-label-big {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4.4vw, 48px);
  letter-spacing: .04em;
  line-height: 1;
  color: var(--cc-ink);
  margin: 0 0 26px;
  display: block;
}

.cc-calc-number-stage {
  position: relative;
  padding: 18px 0 14px;
  margin-bottom: 22px;
  border-top: 1px solid var(--cc-border);
  border-bottom: 1px solid var(--cc-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.cc-calc-number-stage::before {
  content: 'COUNT';
  position: absolute;
  top: -6px;
  left: 0;
  background: var(--cc-cream);
  padding: 0 6px 0 0;
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .22em;
  color: var(--cc-ore);
  font-weight: 500;
}

.cc-calc-input {
  width: 100%;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(78px, 10vw, 116px);
  text-align: center;
  background: transparent;
  border: 0;
  color: var(--cc-ink);
  padding: 6px 0 0;
  letter-spacing: .02em;
  line-height: .9;
  transition: color .2s;
  -moz-appearance: textfield;
  display: block;
}
.cc-calc-input::-webkit-outer-spin-button,
.cc-calc-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cc-calc-input:focus {
  outline: none;
  color: var(--cc-ore);
}

.cc-calc-steppers {
  display: flex;
  gap: 8px;
}
.cc-calc-step {
  width: 64px;
  height: 40px;
  background: #fff;
  border: 1px solid var(--cc-border);
  font-family: 'Bebas Neue', sans-serif;
  font-size: 26px;
  color: var(--cc-ink-2);
  cursor: pointer;
  border-radius: 3px;
  transition: border-color .18s, color .18s, background .18s;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.cc-calc-step:hover {
  border-color: var(--cc-ore);
  color: var(--cc-ore);
}

.cc-calc-presets-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cc-stone-light);
  margin-bottom: 10px;
}
.cc-calc-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.cc-calc-preset {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  border: 1px solid var(--cc-border);
  background: #fff;
  color: var(--cc-stone);
  padding: 7px 12px;
  border-radius: 3px;
  cursor: pointer;
  transition: all .18s;
  letter-spacing: .04em;
}
.cc-calc-preset:hover {
  border-color: var(--cc-ore);
  color: var(--cc-ore);
}
.cc-calc-preset.active {
  border-color: var(--cc-ore);
  background: var(--cc-ore);
  color: #fff;
}

/* OUTPUT PANE */
.cc-calc-output-pane { }

.cc-calc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.cc-calc-stat {
  background: #fff;
  border: 1px solid var(--cc-border);
  border-radius: 4px;
  padding: 14px 18px 14px;
  position: relative;
  overflow: hidden;
}
.cc-calc-stat-label {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--cc-stone);
  margin-bottom: 6px;
}
.cc-calc-stat-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 34px;
  letter-spacing: .03em;
  line-height: 1;
  color: var(--cc-ink-2);
  display: block;
}
.cc-calc-stat-sub {
  font-family: 'DM Mono', monospace;
  font-size: 10.5px;
  color: var(--cc-stone);
  margin-top: 6px;
  letter-spacing: .04em;
}

/* FEATURE COST CARD (per-month emphasis, inline) */
/* LEFT COLUMN WRAPPER (stacks input pane + promo card) */
.cc-calc-left {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* MD MONITOR PROMO (free-floating, no card chrome) */
.cc-calc-promo {
  position: relative;
  padding: 6px 0 0;
}
.cc-calc-promo-top {
  display: grid;
  grid-template-columns: 1fr 28px;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.cc-calc-promo-img {
  position: relative;
}
.cc-calc-promo-img img {
  width: 100%;
  height: auto;
  display: block;
}
.cc-calc-promo-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-ore);
  animation: ccPromoArrow 1.8s ease-in-out infinite;
}
.cc-calc-promo-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes ccPromoArrow {
  0%, 100% { transform: translateX(0); opacity: .85; }
  50%      { transform: translateX(5px); opacity: 1; }
}
.cc-calc-promo-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cc-ore);
  margin-bottom: 5px;
  font-weight: 500;
}
.cc-calc-promo-caption {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--cc-stone);
  line-height: 1.45;
}

/* DUAL FEATURE BOXES (per-month + per-year) */
.cc-calc-features {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
.cc-calc-feature {
  background: var(--cc-ink);
  border: 1px solid var(--cc-ore);
  border-radius: 4px;
  padding: 16px 22px 14px;
  position: relative;
  overflow: hidden;
}
.cc-calc-feature::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--cc-ore);
}
.cc-calc-feature::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 38%;
  background: radial-gradient(ellipse at 30% 50%, rgba(191,38,8,.18) 0%, transparent 70%);
  pointer-events: none;
}
.cc-calc-feature > * { position: relative; z-index: 2; }
.cc-calc-feature--secondary {
  border-color: rgba(191,38,8,.45);
}
.cc-calc-feature--secondary::before {
  background: rgba(191,38,8,.55);
}
.cc-calc-feature-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.cc-calc-feature-num {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(34px, 4vw, 48px);
  letter-spacing: .015em;
  line-height: 1;
  color: #fff;
}
.cc-calc-feature--secondary .cc-calc-feature-num {
  font-size: clamp(28px, 3.4vw, 40px);
  color: rgba(255,255,255,.95);
}
.cc-calc-feature-unit {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--cc-ore-bright);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-weight: 500;
}
.cc-calc-feature-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 12.5px;
  color: rgba(255,255,255,.7);
  line-height: 1.45;
}
.cc-calc-feature-sub strong {
  color: #fff;
  font-weight: 500;
}
.cc-calc-feature-sub em {
  color: var(--cc-ore-bright);
  font-style: normal;
  font-weight: 500;
}

/* Pulse animation on value update */
@keyframes ccCalcPulse {
  0%   { box-shadow: 0 0 0 0 rgba(191,38,8,.55), inset 0 0 0 0 rgba(191,38,8,0); border-color: rgba(255,120,80,1); }
  40%  { box-shadow: 0 0 0 6px rgba(191,38,8,.18), inset 0 0 24px 0 rgba(191,38,8,.18); border-color: rgba(255,120,80,1); }
  100% { box-shadow: 0 0 0 0 rgba(191,38,8,0), inset 0 0 0 0 rgba(191,38,8,0); }
}
.cc-calc-feature.is-pulsing {
  animation: ccCalcPulse .9s ease-out;
}
@keyframes ccCalcNumPulse {
  0%   { color: var(--cc-ore-bright); }
  100% { color: #fff; }
}
.cc-calc-feature.is-pulsing .cc-calc-feature-num {
  animation: ccCalcNumPulse .9s ease-out;
}

@media (max-width: 1024px) {
  .cc-calc-features { grid-template-columns: 1fr; }
}

/* OLD single .cc-calc-feature container kept for backwards compat (none) */

/* MD MONITOR BANNER (top of viz) */
.cc-calc-monitor {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: rgba(15,13,11,.92);
  border: 1px solid rgba(191,38,8,.45);
  border-radius: 3px;
  margin-bottom: 14px;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cc-calc-monitor-l {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cc-calc-monitor-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(80,200,120,1);
  box-shadow: 0 0 8px rgba(80,200,120,.7);
  animation: cc-pulse 1.5s ease-in-out infinite;
}
.cc-calc-monitor-label {
  color: #fff;
  letter-spacing: .2em;
  font-weight: 500;
}
.cc-calc-monitor-status {
  background: rgba(80,200,120,.12);
  color: rgba(120,220,150,1);
  padding: 3px 8px 2px;
  border-radius: 2px;
  border: 1px solid rgba(80,200,120,.3);
  font-size: 9px;
  letter-spacing: .18em;
}
.cc-calc-monitor-r {
  color: #fff;
  letter-spacing: .1em;
}
.cc-calc-monitor-r strong {
  color: var(--cc-ore-bright);
  font-weight: 500;
}
.cc-calc-monitor-r .sep {
  color: rgba(255,255,255,.45);
  margin: 0 6px;
}

/* VISUALIZATION */
.cc-calc-viz {
  background: var(--cc-ink);
  border-radius: 4px;
  padding: 18px 20px 18px;
  position: relative;
  overflow: hidden;
  min-height: 220px;
  border: 1px solid var(--cc-border);
}
.cc-calc-viz::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 38px 38px;
  pointer-events: none;
}
.cc-calc-viz-meta {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  color: #fff;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.cc-calc-viz-meta-r {
  display: flex;
  gap: 18px;
}
.cc-calc-viz-meta-r span::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.cc-calc-viz-meta-r .lit::before { background: var(--cc-ore-bright); }
.cc-calc-viz-meta-r .empty::before { background: rgba(255,255,255,.18); }
.cc-calc-viz-meta-r .cool::before { background: rgba(120,180,255,.7); box-shadow: 0 0 6px rgba(120,180,255,.5); }

.cc-calc-stage {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  min-height: 160px;
}
.cc-calc-stack {
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
}
.cc-calc-stack-floor {
  height: 3px;
  background: linear-gradient(90deg, var(--cc-ore) 0%, transparent 100%);
  margin-top: 4px;
  opacity: .5;
}
.cc-calc-unit {
  width: 156px;
  height: 76px;
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.cc-calc-unit.cc-cu-visible {
  opacity: 1;
  transform: translateY(0);
}
.cc-cu-svg {
  width: 100%;
  height: auto;
  display: block;
}
.cc-cu-dot {
  transition: fill .25s ease;
}
.cc-cu-dot.lit {
  animation: cc-charge 1.6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes cc-charge {
  0%, 100% { opacity: 1; }
  50% { opacity: .6; }
}
.cc-cu-fan {
  animation: cc-fan-spin 2.4s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes cc-fan-spin {
  to { transform: rotate(360deg); }
}
.cc-cu-flow {
  animation: cc-flow-rise 1.2s linear infinite;
}
@keyframes cc-flow-rise {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -7; }
}
.cc-cu-flow-h {
  animation: cc-flow-h 1.4s linear infinite;
}
@keyframes cc-flow-h {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -7; }
}
.cc-cu-intake {
  animation: cc-cu-intake-pulse 1.6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes cc-cu-intake-pulse {
  0%, 100% { opacity: .35; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(0.6px); }
}
.cc-cu-airflow {
  animation: cc-airflow 1.6s ease-out infinite;
}
@keyframes cc-airflow {
  0%   { opacity: 0; transform: translateY(2px); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-5px); }
}
.cc-cu-coolglow {
  animation: cc-coolglow 3s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes cc-coolglow {
  0%, 100% { opacity: .25; }
  50%      { opacity: .55; }
}

.cc-calc-overflow {
  align-self: center;
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: rgba(255,255,255,.65);
  letter-spacing: .12em;
  padding: 16px 18px;
  border-left: 2px solid var(--cc-ore);
  margin-left: 4px;
  text-transform: uppercase;
  line-height: 1.5;
  background: rgba(255,255,255,.03);
  border-radius: 0 3px 3px 0;
}
.cc-calc-overflow strong {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 24px;
  color: var(--cc-ore-bright);
  letter-spacing: .04em;
  margin-bottom: 2px;
}

/* MATH BAR (full-width below visualization) */
.cc-calc-math {
  position: relative;
  background: var(--cc-ink);
  border: 1px solid rgba(191,38,8,.4);
  border-left: 4px solid var(--cc-ore);
  border-radius: 4px;
  padding: 22px 28px 22px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 28px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,.10);
}
.cc-calc-math::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 0% 50%, rgba(191,38,8,.18) 0%, transparent 50%),
    linear-gradient(90deg, rgba(191,38,8,.05) 0%, transparent 50%);
  pointer-events: none;
}
.cc-calc-math::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  opacity: .5;
}
.cc-calc-math-head {
  position: relative;
  z-index: 1;
}
.cc-calc-math-head-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--cc-ore-bright);
  margin-bottom: 6px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}
.cc-calc-math-head-eyebrow::before {
  content: '';
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--cc-ore-bright);
  box-shadow: 0 0 10px var(--cc-ore-bright);
  animation: cc-calc-math-dot-pulse 1.6s ease-in-out infinite;
}
@keyframes cc-calc-math-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.85); }
}
.cc-calc-math-head-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  letter-spacing: .04em;
  line-height: 1.05;
  color: #fff;
  margin: 0;
}
.cc-calc-math-head-title em {
  font-style: normal;
  color: var(--cc-ore-bright);
}
.cc-calc-math-head-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,.6);
  margin: 5px 0 0;
  line-height: 1.4;
  max-width: 480px;
}
.cc-calc-math-text { min-width: 0; }

/* Formula+ask wrapped in callout box */
.cc-calc-math-callout {
  background: linear-gradient(180deg, rgba(191,38,8,.04) 0%, rgba(191,38,8,.02) 100%);
  border: 1px solid rgba(191,38,8,.22);
  border-left: 3px solid var(--cc-ore);
  border-radius: 0 4px 4px 0;
  padding: 16px 20px 18px;
  position: relative;
}
.cc-calc-math-callout-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cc-ore);
  margin-bottom: 8px;
  font-weight: 500;
}
.cc-calc-math-formula {
  font-family: 'DM Mono', monospace;
  font-size: 13px;
  color: var(--cc-ink-2);
  line-height: 1.55;
  letter-spacing: .03em;
  margin-bottom: 10px;
}
.cc-calc-math-formula strong {
  color: var(--cc-ore);
  font-weight: 600;
}
.cc-calc-math-ask-box {
  margin-top: 14px;
  background: #fff;
  border: 1px solid rgba(191,38,8,.3);
  border-left: 3px solid var(--cc-ore);
  border-radius: 0 4px 4px 0;
  padding: 12px 18px 14px;
  position: relative;
}
.cc-calc-math-ask-box-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--cc-ore);
  margin-bottom: 6px;
  font-weight: 500;
}
.cc-calc-math-ask {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--cc-ink);
  line-height: 1.45;
  margin: 0;
}
.cc-calc-math-ask em {
  font-style: normal;
  color: var(--cc-ore);
  font-weight: 600;
}
.cc-calc-math-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}
.cc-calc-math-ctas .cc-btn {
  padding: 14px 20px;
  font-size: 12px;
  letter-spacing: .11em;
  white-space: nowrap;
}
.cc-calc-math-ctas .cc-btn .arrow { font-size: 14px; }

/* Ghost button override INSIDE the dark CTA bar -- white text + light border */
.cc-calc-math .cc-btn-ghost {
  color: #fff;
  border-color: rgba(255,255,255,.35);
  background: transparent;
}
.cc-calc-math .cc-btn-ghost:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.6);
}

/* PDF link override INSIDE the dark CTA bar */
.cc-calc-math .cc-calc-pdf-link {
  color: rgba(255,255,255,.85);
  border-color: rgba(224,84,42,.5);
  background: rgba(191,38,8,.08);
}
.cc-calc-math .cc-calc-pdf-link:hover {
  color: #fff;
  background: rgba(191,38,8,.18);
  border-color: var(--cc-ore-bright);
}

/* PRE-ORDER CTA: red border, clear middle, black text, shaded depth */
.cc-btn-preorder {
  position: relative;
  background: linear-gradient(180deg, #fff 0%, #fafaf8 100%);
  color: var(--cc-ink);
  border: 2px solid var(--cc-ore);
  font-family: 'DM Mono', monospace;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 4px;
  letter-spacing: .11em;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    inset 0 -2px 0 rgba(191,38,8,.18),
    inset 0 1px 0 rgba(255,255,255,1),
    0 2px 0 rgba(191,38,8,.15),
    0 6px 14px rgba(191,38,8,.12);
  transition: background .18s, transform .12s, box-shadow .18s, border-color .18s;
}
.cc-btn-preorder::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(191,38,8,.05) 0%, transparent 100%);
  pointer-events: none;
  border-radius: 2px 2px 0 0;
}
.cc-btn-preorder .arrow { color: var(--cc-ore); font-size: 14px; transition: transform .18s; }
.cc-btn-preorder:hover {
  background: linear-gradient(180deg, #fff 0%, #fff 100%);
  border-color: var(--cc-ore-dark);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    inset 0 -2px 0 rgba(191,38,8,.25),
    inset 0 1px 0 rgba(255,255,255,1),
    0 3px 0 rgba(191,38,8,.2),
    0 8px 20px rgba(191,38,8,.18);
}
.cc-btn-preorder:hover .arrow { transform: translateX(3px); }
.cc-btn-preorder:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(191,38,8,.18),
    0 1px 0 rgba(191,38,8,.15),
    0 3px 8px rgba(191,38,8,.1);
}
.cc-calc-pdf-link {
  font-family: 'DM Mono', monospace;
  font-size: 11px;
  color: var(--cc-stone);
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  background: transparent;
  border: 1px dashed rgba(191,38,8,.35);
  padding: 12px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .18s;
  border-radius: 3px;
  white-space: nowrap;
}
.cc-calc-pdf-link:hover {
  color: var(--cc-ore);
  border-color: var(--cc-ore);
  background: rgba(191,38,8,.04);
}
.cc-calc-pdf-link svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
  .cc-calc-grid { grid-template-columns: 1fr; gap: 20px; }
  .cc-calc-stats { grid-template-columns: repeat(3, 1fr); }
  .cc-calc-math { grid-template-columns: 1fr; gap: 14px; padding: 20px 22px; }
  .cc-calc-math-ctas { justify-content: flex-start; }
}
@media (max-width: 768px) {
  .cc-calc-section { padding: 80px 0; }
  .cc-calc-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .cc-calc-stat { padding: 18px 16px 16px; }
  .cc-calc-stat-num { font-size: 32px; }
  .cc-calc-unit { width: 130px; height: 64px; }
  .cc-calc-viz { padding: 24px; }
  .cc-calc-viz-meta { flex-wrap: wrap; gap: 10px; }
  .cc-calc-math { padding: 22px 24px; }
  .cc-calc-math-ask { font-size: 15px; }
}
@media (max-width: 480px) {
  .cc-calc-stats { grid-template-columns: 1fr; }
  .cc-calc-unit { width: 110px; height: 54px; }
}


/* ════════════ FAQ ACCORDION ════════════ */
.cc-faq-section {
  background: var(--cc-sand);
  padding: 100px 0 120px;
  border-top: 1px solid rgba(15,13,11,.06);
}
.cc-faq-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 64px;
  align-items: start;
}
.cc-faq-head .cc-kicker { color: var(--cc-ore); }
.cc-faq-head h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--cc-ink);
  margin: 14px 0 16px;
}
.cc-faq-head h2 em { color: var(--cc-ore); font-style: normal; }
.cc-faq-head p {
  color: var(--cc-stone);
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
}
.cc-faq-list { display: flex; flex-direction: column; }
.cc-faq-item {
  border-bottom: 1px solid var(--cc-border);
  padding: 0;
}
.cc-faq-item:first-child { border-top: 1px solid var(--cc-border); }
.cc-faq-q {
  width: 100%;
  background: none;
  border: none;
  padding: 22px 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 24px;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--cc-ink);
  text-align: left;
  cursor: pointer;
  transition: color .2s;
}
.cc-faq-q:hover { color: var(--cc-ore); }
.cc-faq-q-icon {
  font-family: 'DM Mono', monospace;
  font-size: 18px;
  color: var(--cc-ore);
  flex-shrink: 0;
  transition: transform .2s;
}
.cc-faq-item.open .cc-faq-q-icon { transform: rotate(45deg); }
.cc-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
  color: var(--cc-stone);
  font-size: 14.5px;
  line-height: 1.6;
}
.cc-faq-item.open .cc-faq-a {
  max-height: 400px;
  padding: 0 0 22px;
}
@media (max-width: 880px) {
  .cc-faq-grid { grid-template-columns: 1fr; gap: 32px; }
}