/* =============================================================
   CONTRXBAND — Homepage
   ============================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--cx-bg);
  color: var(--cx-fg);
  font-family: var(--cx-font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* ===== Layout primitives ===== */
.cx-page {
  min-height: 100vh;
  position: relative;
}
.cx-shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--cx-sp-12);
  position: relative;
}
@media (max-width: 720px) {
  .cx-shell { padding: 0 var(--cx-sp-5); }
}

/* Drafting-sheet section: hairline divider + left rail label */
.cx-section {
  border-top: 1px solid var(--cx-border);
  position: relative;
  padding: var(--cx-sp-16) 0;
}
.cx-section--first { border-top: none; padding-top: var(--cx-sp-8); }
.cx-section--ink-deep { background: #0A0B0C; }
.cx-section--bone { background: var(--cx-bone-50); color: var(--cx-ink-950); }
.cx-section--bone .cx-fg-muted { color: #6E6A62; }

/* Left rail eyebrow used at the top of each section */
.cx-rail {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--cx-sp-12);
  align-items: start;
}
@media (max-width: 960px) {
  .cx-rail { grid-template-columns: 1fr; gap: var(--cx-sp-6); }
}
.cx-rail-label {
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--cx-tracking-mega);
  text-transform: uppercase;
  color: var(--cx-fg-subtle);
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 6px;
  position: relative;
}
.cx-rail-label::before {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  background: var(--cx-accent);
  margin-bottom: 14px;
}
.cx-rail-label .cx-rail-num {
  font-family: var(--cx-font-mono);
  color: var(--cx-fg);
  letter-spacing: 0;
  font-size: 11px;
}

/* ===== TOP NAV ===== */
.cx-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(14,15,16,0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--cx-border);
}
.cx-nav-inner {
  display: flex;
  align-items: center;
  gap: var(--cx-sp-8);
  height: 60px;
}
.cx-brand {
  display: flex;
  align-items: center;
  gap: var(--cx-sp-3);
  flex: none;
}
.cx-brand-x {
  display: none;
}
.cx-brand-word {
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cx-fg);
  display: inline-flex;
  align-items: center;
  gap: 0;
}
.cx-brand-x-svg {
  color: var(--cx-accent);
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.04em;
  margin: 0 -0.08em;
}
.cx-brand-word .x {
  color: var(--cx-accent);
  font-weight: 800;
}
.cx-nav-links {
  display: flex;
  gap: var(--cx-sp-6);
  margin-left: var(--cx-sp-6);
}
.cx-nav-link {
  font-family: var(--cx-font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: var(--cx-tracking-wide);
  text-transform: uppercase;
  color: var(--cx-fg-muted);
  transition: color var(--cx-dur-fast) var(--cx-ease-mech);
}
.cx-nav-link:hover { color: var(--cx-fg); }
.cx-nav-spacer { flex: 1; }
.cx-nav-internal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: var(--cx-sp-4);
  padding: 5px 10px;
  font-family: var(--cx-font-mono);
  font-size: 11px;
  letter-spacing: var(--cx-tracking-wide);
  color: var(--cx-accent);
  background: transparent;
  border: 1px solid var(--cx-accent);
  border-radius: var(--cx-radius-1);
  text-decoration: none;
  transition: background var(--cx-dur-fast) var(--cx-ease-mech),
              color var(--cx-dur-fast) var(--cx-ease-mech);
}
.cx-nav-internal:hover {
  background: var(--cx-accent);
  color: var(--cx-fg-on-accent);
}
.cx-nav-internal .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}
.cx-nav-status {
  font-family: var(--cx-font-mono);
  font-size: 11px;
  color: var(--cx-fg-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.cx-nav-status .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cx-signal-go);
  box-shadow: 0 0 8px rgba(63,190,122,0.6);
  animation: rec-pulse 1.6s ease-in-out infinite;
}
@media (max-width: 880px) {
  .cx-nav-links { display: none; }
  .cx-nav-status { display: none; }
  .cx-nav-internal { display: none; }
}

/* ===== Buttons ===== */
.cx-btn {
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 18px;
  border: none;
  border-radius: var(--cx-radius-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background var(--cx-dur-fast) var(--cx-ease-mech),
              transform var(--cx-dur-fast) var(--cx-ease-mech);
}
.cx-btn-primary {
  background: var(--cx-accent);
  color: #1a0a02;
  box-shadow: var(--cx-shadow-1);
}
.cx-btn-primary:hover { background: var(--cx-accent-hover); }
.cx-btn-primary:active { transform: translateY(1px); background: var(--cx-accent-press); }
.cx-btn-ghost {
  background: transparent;
  color: var(--cx-fg);
  border: 1px solid var(--cx-border-strong);
}
.cx-btn-ghost:hover { border-color: var(--cx-fg-muted); }
.cx-btn .cx-x-glyph {
  display: inline-block;
  width: 12px; height: 12px;
  background: currentColor;
  -webkit-mask: url('assets/logo_x_orange.png') center/contain no-repeat;
          mask: url('assets/logo_x_orange.png') center/contain no-repeat;
}

/* ===== HERO ===== */
.cx-hero {
  position: relative;
  padding: var(--cx-sp-16) 0 var(--cx-sp-20);
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 70% at 50% 30%, rgba(225,90,31,0.04), transparent 60%),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.012) 0,
      rgba(255,255,255,0.012) 1px,
      transparent 1px,
      transparent 3px
    ),
    var(--cx-bg);
}
.cx-hero-rule {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cx-accent) 20%, var(--cx-accent) 80%, transparent);
  opacity: calc(0.4 + var(--rebellion-texture, 0.07) * 4);
}
.cx-hero-tick {
  position: absolute;
  font-family: var(--cx-font-mono);
  font-size: 10px;
  letter-spacing: 0;
  color: var(--cx-fg-subtle);
  z-index: 2;
  pointer-events: none;
}
.cx-hero-tick--tl { top: 14px; left: 16px; }
.cx-hero-tick--tr { top: 14px; right: 16px; }
.cx-hero-tick--bl { bottom: 14px; left: 16px; }
.cx-hero-tick--br { bottom: 14px; right: 16px; }
@media (max-width: 720px) {
  .cx-hero-tick--bl, .cx-hero-tick--br { display: none; }
}
.cx-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--cx-sp-16);
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 1080px) {
  .cx-hero-grid { grid-template-columns: 1fr; gap: var(--cx-sp-12); }
}
.cx-eyebrow-row {
  display: flex;
  align-items: center;
  gap: var(--cx-sp-3);
  margin-bottom: var(--cx-sp-6);
}
.cx-eyebrow {
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--cx-tracking-mega);
  text-transform: uppercase;
  color: var(--cx-fg-muted);
}
.cx-eyebrow.cx-eyebrow-accent { color: var(--cx-accent); }
.cx-eyebrow-bar {
  width: 36px; height: 1px; background: var(--cx-border-strong);
}
.cx-hero-title {
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: clamp(44px, 6.5vw, 88px);
  line-height: 0.94;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--cx-fg);
  margin: 0;
}
.cx-hero-title .strike {
  position: relative;
  color: var(--cx-fg-muted);
  display: inline-block;
}
.cx-hero-title .strike::after {
  content: '';
  position: absolute;
  left: -2%;
  right: -2%;
  top: 50%;
  height: 6px;
  background: var(--cx-accent);
  transform: translateY(-50%) rotate(-1.5deg);
  opacity: 0.95;
}
.cx-hero-title .accent { color: var(--cx-accent); }
.cx-hero-sub {
  font-family: var(--cx-font-ui);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--cx-fg-muted);
  max-width: 52ch;
  margin: var(--cx-sp-8) 0 var(--cx-sp-10);
}
.cx-hero-cta-row {
  display: flex;
  gap: var(--cx-sp-3);
  flex-wrap: wrap;
}
.cx-hero-meta {
  margin-top: var(--cx-sp-12);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cx-sp-6);
  max-width: 540px;
}
.cx-hero-meta-item .k {
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--cx-tracking-mega);
  text-transform: uppercase;
  color: var(--cx-fg-subtle);
  display: block;
  margin-bottom: 6px;
}
.cx-hero-meta-item .v {
  font-family: var(--cx-font-mono);
  font-weight: 500;
  font-size: 14px;
  color: var(--cx-fg);
  font-variant-numeric: tabular-nums;
}

/* Hero photo column */
.cx-hero-photo {
  position: relative;
  border-radius: var(--cx-radius-3);
  overflow: hidden;
  background: #0A0B0C;
  aspect-ratio: 4 / 5;
  box-shadow: 0 24px 50px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
}
.cx-hero-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: saturate(0.92) contrast(1.05);
}
.cx-hero-photo-frame { position: absolute; inset: 10px; pointer-events: none; }
.cx-hero-photo-frame .corner {
  position: absolute; width: 14px; height: 14px;
  border: 1px solid var(--cx-accent);
}
.cx-hero-photo-frame .corner.tl { top: 0; left: 0; border-right: none; border-bottom: none; }
.cx-hero-photo-frame .corner.tr { top: 0; right: 0; border-left: none; border-bottom: none; }
.cx-hero-photo-frame .corner.bl { bottom: 0; left: 0; border-right: none; border-top: none; }
.cx-hero-photo-frame .corner.br { bottom: 0; right: 0; border-left: none; border-top: none; }
.cx-hero-photo-meta {
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 14px;
  font-family: var(--cx-font-mono);
  font-size: 10px;
  color: rgba(241,236,227,0.75);
  background: rgba(0,0,0,0.45);
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 2px;
  white-space: nowrap;
}
.cx-hero-photo-instrument {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
}
.cx-hero-photo-instrument .cx-instrument {
  background: rgba(14,15,16,0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.06);
  padding: var(--cx-sp-4);
}
.cx-hero-photo-instrument .cx-instrument::before { display: none; }
.cx-hero-photo-instrument .cx-screen-main .v { font-size: 36px; }
.cx-hero-photo-instrument .cx-screen-main .v .deg { font-size: 18px; }
.cx-hero-photo-instrument .cx-instrument-foot { display: none; }
.cx-hero-photo-instrument .cx-instrument-screen { padding: var(--cx-sp-3) var(--cx-sp-4); gap: var(--cx-sp-3); }

@media (max-width: 1080px) {
  .cx-hero-photo { aspect-ratio: 16 / 11; }
}

/* Mobile: keep the photo tall and shrink the telemetry overlay so the
   image stays readable behind it. */
@media (max-width: 720px) {
  .cx-hero-photo { aspect-ratio: 3 / 4; }
  .cx-hero-photo-meta {
    top: 10px;
    font-size: 9px;
    gap: 8px;
    padding: 4px 8px;
  }
  .cx-hero-photo-instrument {
    left: 10px; right: 10px; bottom: 10px;
  }
  .cx-hero-photo-instrument .cx-instrument {
    padding: var(--cx-sp-3);
    border-radius: var(--cx-radius-3);
  }
  .cx-hero-photo-instrument .cx-instrument-head {
    margin-bottom: var(--cx-sp-3);
  }
  .cx-hero-photo-instrument .cx-rec,
  .cx-hero-photo-instrument .cx-session-id { font-size: 9px; }
  .cx-hero-photo-instrument .cx-instrument-screen {
    padding: var(--cx-sp-2) var(--cx-sp-3);
    gap: var(--cx-sp-3);
  }
  .cx-hero-photo-instrument .cx-screen-main { padding: 0; }
  .cx-hero-photo-instrument .cx-screen-main .v { font-size: 26px; }
  .cx-hero-photo-instrument .cx-screen-main .v .deg { font-size: 14px; }
  .cx-hero-photo-instrument .cx-screen-main .l { font-size: 9px; }
  .cx-hero-photo-instrument .cx-screen-main .sub { font-size: 9px; }
  .cx-hero-photo-instrument .cx-meter {
    grid-template-columns: 40px 1fr 32px;
    gap: var(--cx-sp-2);
    font-size: 9px;
  }
  .cx-hero-photo-instrument .cx-meter .name { font-size: 9px; }
}

/* Hero device module — telemetry instrument */
.cx-instrument {
  position: relative;
  background: linear-gradient(180deg, #1A1B1D 0%, #131416 100%);
  border-radius: var(--cx-radius-4);
  padding: var(--cx-sp-6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -1px 0 rgba(0,0,0,0.6),
    0 24px 50px rgba(0,0,0,0.55),
    0 2px 0 rgba(0,0,0,0.5);
  overflow: hidden;
}
.cx-instrument-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--cx-sp-5);
  position: relative;
}
.cx-rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cx-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--cx-fg-muted);
}
.cx-rec .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cx-signal-stop);
  animation: rec-pulse 1.6s ease-in-out infinite;
}
@keyframes rec-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; box-shadow: 0 0 10px currentColor; }
}
.cx-session-id {
  font-family: var(--cx-font-mono);
  font-size: 11px;
  color: var(--cx-fg-subtle);
  letter-spacing: 0;
}
.cx-instrument-screen {
  background: #0A0B0C;
  border-radius: var(--cx-radius-2);
  padding: var(--cx-sp-6);
  box-shadow: var(--cx-inset-screen);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cx-sp-6);
}
.cx-screen-main {
  display: flex;
  flex-direction: column;
  gap: var(--cx-sp-2);
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px dashed rgba(255,255,255,0.06);
  padding: var(--cx-sp-3) 0;
}
.cx-screen-main .l {
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--cx-tracking-mega);
  color: var(--cx-fg-subtle);
  text-transform: uppercase;
}
.cx-screen-main .v {
  font-family: var(--cx-font-mono);
  font-weight: 500;
  font-size: 56px;
  color: var(--cx-fg);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}
.cx-screen-main .v .deg {
  color: var(--cx-fg-muted); font-size: 28px; margin-left: 2px;
}
.cx-screen-main .sub {
  font-family: var(--cx-font-mono);
  font-size: 11px;
  color: var(--cx-signal-go);
}
.cx-screen-side {
  display: flex; flex-direction: column;
  gap: var(--cx-sp-3);
  justify-content: center;
}
.cx-meter {
  display: grid;
  grid-template-columns: 60px 1fr 50px;
  gap: var(--cx-sp-3);
  align-items: center;
  font-family: var(--cx-font-mono);
  font-size: 11px;
}
.cx-meter .name {
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--cx-tracking-wide);
  color: var(--cx-fg-muted);
  text-transform: uppercase;
}
.cx-meter .bar {
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.cx-meter .bar > i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--cx-signal-go);
}
.cx-meter .bar.warn > i { background: var(--cx-signal-warn); }
.cx-meter .bar.data > i { background: var(--cx-signal-data); }
.cx-meter .bar.acc > i { background: var(--cx-accent); }
.cx-meter .val {
  text-align: right;
  color: var(--cx-fg);
  font-variant-numeric: tabular-nums;
}
.cx-instrument-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--cx-sp-4);
  padding-top: var(--cx-sp-4);
  border-top: 1px solid rgba(255,255,255,0.04);
  position: relative;
}
.cx-foot-pill {
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--cx-tracking-wide);
  text-transform: uppercase;
  color: var(--cx-fg-muted);
}

/* ===== MARQUEE strip ===== */
.cx-strip {
  background: var(--cx-ink-900);
  border-block: 1px solid var(--cx-border);
  overflow: hidden;
  padding: var(--cx-sp-3) 0;
  white-space: nowrap;
  position: relative;
}
.cx-strip-track {
  display: inline-flex;
  gap: var(--cx-sp-12);
  animation: marquee 38s linear infinite;
  padding-left: var(--cx-sp-12);
}
.cx-strip-item {
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: var(--cx-tracking-wide);
  text-transform: uppercase;
  color: var(--cx-fg-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--cx-sp-3);
}
.cx-strip-item::before {
  content: '×';
  color: var(--cx-accent);
  font-weight: 800;
  font-size: 16px;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===== Generic section heads ===== */
.cx-section-title {
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 54px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 var(--cx-sp-5);
  color: inherit;
}
.cx-section-lede {
  font-family: var(--cx-font-ui);
  font-size: 17px;
  line-height: 1.55;
  color: var(--cx-fg-muted);
  max-width: 56ch;
  margin: 0;
}
.cx-section--bone .cx-section-lede { color: #4A463E; }

/* ===== Problem section ===== */
.cx-problem-list {
  margin-top: var(--cx-sp-12);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-block: 1px solid var(--cx-border);
}
@media (max-width: 880px) { .cx-problem-list { grid-template-columns: 1fr; } }
.cx-problem-item {
  padding: var(--cx-sp-8) var(--cx-sp-6);
  border-right: 1px solid var(--cx-border);
  display: flex;
  flex-direction: column;
  gap: var(--cx-sp-3);
}
.cx-problem-item:last-child { border-right: none; }
@media (max-width: 880px) {
  .cx-problem-item { border-right: none; border-bottom: 1px solid var(--cx-border); }
  .cx-problem-item:last-child { border-bottom: none; }
}
.cx-problem-num {
  font-family: var(--cx-font-mono);
  font-size: 12px;
  color: var(--cx-accent);
}
.cx-problem-h {
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: 22px;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0;
  color: var(--cx-fg);
}
.cx-problem-p {
  font-family: var(--cx-font-ui);
  font-size: 14px;
  line-height: 1.55;
  color: var(--cx-fg-muted);
  margin: 0;
}

/* ===== Shift table ===== */
.cx-section-lede--quiet {
  margin-top: var(--cx-sp-6);
  color: var(--cx-fg-muted);
  border-top: 1px dashed var(--cx-border-strong);
  padding-top: var(--cx-sp-6);
}
.cx-shift-table {
  margin-top: var(--cx-sp-10);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-2);
  overflow: hidden;
}
.cx-shift-row {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: center;
  border-bottom: 1px solid var(--cx-border);
  padding: var(--cx-sp-4) var(--cx-sp-5);
  font-family: var(--cx-font-ui);
  font-size: 15px;
}
.cx-shift-row:last-child { border-bottom: none; }
.cx-shift-row.cx-shift-head {
  background: var(--cx-ink-900);
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--cx-tracking-mega);
  text-transform: uppercase;
  color: var(--cx-fg-subtle);
}
.cx-shift-row .from { color: var(--cx-fg-muted); text-decoration: line-through; text-decoration-color: rgba(225,90,31,0.5); text-decoration-thickness: 2px; }
.cx-shift-row .to { color: var(--cx-fg); font-weight: 500; }
.cx-shift-row .arrow {
  text-align: center;
  font-family: var(--cx-font-display);
  font-weight: 800;
  color: var(--cx-accent);
  font-size: 18px;
}
@media (max-width: 720px) {
  .cx-shift-row { grid-template-columns: 1fr; gap: 4px; padding: var(--cx-sp-3) var(--cx-sp-4); }
  .cx-shift-row .arrow { text-align: left; font-size: 14px; }
  .cx-shift-row.cx-shift-head .arrow { display: none; }
}

/* ===== System (Sense / Understand / Respond / Evolve) ===== */
.cx-ai-stack {
  margin-top: var(--cx-sp-8);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cx-sp-3);
  padding: var(--cx-sp-3) var(--cx-sp-4);
  border-block: 1px solid var(--cx-border);
  font-family: var(--cx-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--cx-fg-muted);
}
.cx-ai-stack-label {
  color: var(--cx-accent);
  border: 1px solid var(--cx-border-accent);
  padding: 2px 6px;
  border-radius: var(--cx-radius-1);
}
.cx-ai-stack-item { color: var(--cx-fg); }
.cx-ai-stack-dot { color: var(--cx-fg-subtle); }

.cx-system {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cx-sp-3);
  margin-top: var(--cx-sp-10);
}
@media (max-width: 1080px) { .cx-system { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) {
  /* Stay 2-up on phones, just tighten the cards so they fit */
  .cx-system { gap: var(--cx-sp-2); }
  .cx-stage {
    padding: var(--cx-sp-4);
    min-height: 240px;
    gap: var(--cx-sp-3);
  }
  .cx-stage::after { right: 10px; top: 10px; font-size: 10px; }
  .cx-stage-icon { width: 36px; height: 36px; }
  .cx-stage-h { font-size: 16px; }
  .cx-stage-p { font-size: 12px; line-height: 1.5; }
  .cx-stage-tag { font-size: 9px; padding: 2px 5px; }
}
.cx-stage {
  background: var(--cx-ink-800);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-3);
  padding: var(--cx-sp-6);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--cx-sp-4);
  min-height: 320px;
  transition: border-color var(--cx-dur-base) var(--cx-ease-mech),
              transform var(--cx-dur-base) var(--cx-ease-mech);
}
.cx-stage:hover {
  border-color: var(--cx-orange-500);
  transform: translateY(-2px);
}
.cx-stage::after {
  content: attr(data-step);
  position: absolute;
  right: 14px; top: 14px;
  font-family: var(--cx-font-mono);
  font-size: 11px;
  color: var(--cx-fg-subtle);
}
.cx-stage-icon {
  width: 44px; height: 44px;
  border: 1px solid var(--cx-border-strong);
  border-radius: var(--cx-radius-2);
  display: flex; align-items: center; justify-content: center;
  background: var(--cx-ink-900);
  position: relative;
}
.cx-stage-icon svg { stroke: var(--cx-accent); }
.cx-stage-h {
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: 20px;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: 0.02em;
}
.cx-stage-p {
  font-family: var(--cx-font-ui);
  font-size: 13px;
  line-height: 1.55;
  color: var(--cx-fg-muted);
  margin: 0;
  flex: 1;
}
.cx-stage-tags {
  display: flex; flex-wrap: wrap;
  gap: 6px;
  border-top: 1px dashed var(--cx-border);
  padding-top: var(--cx-sp-3);
}
.cx-stage-tag {
  font-family: var(--cx-font-mono);
  font-size: 10px;
  color: var(--cx-fg-muted);
  border: 1px solid var(--cx-border);
  padding: 3px 6px;
  border-radius: 2px;
  letter-spacing: 0;
}

/* Closed-loop diagram strip */
.cx-loop {
  margin-top: var(--cx-sp-8);
  display: flex;
  align-items: center;
  gap: var(--cx-sp-3);
  flex-wrap: wrap;
  font-family: var(--cx-font-mono);
  font-size: 12px;
  color: var(--cx-fg-subtle);
  padding: var(--cx-sp-3) var(--cx-sp-4);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-2);
  background: rgba(255,255,255,0.01);
}
.cx-loop .arrow { color: var(--cx-accent); }
.cx-loop strong { color: var(--cx-fg); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }

/* ===== Hardware showcase ===== */
.cx-hw-headline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* Top intro row: title left, lede right */
.cx-hw-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--cx-sp-12);
  align-items: end;
  margin-bottom: var(--cx-sp-12);
}
@media (max-width: 960px) {
  .cx-hw-head { grid-template-columns: 1fr; gap: var(--cx-sp-5); }
}
.cx-hw-lede { margin: 0; }
.cx-hw-lede p { margin: 0; }
.cx-hw-lede p + p { margin-top: var(--cx-sp-3); }

/* 3-up product gallery */
.cx-hw-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--cx-sp-5);
}
@media (max-width: 1100px) {
  .cx-hw-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Keep a 2-up grid all the way down so cards don't go full-bleed on phones */
@media (max-width: 560px) {
  .cx-hw-gallery { gap: var(--cx-sp-4) var(--cx-sp-3); }
  .cx-hw-tile { gap: var(--cx-sp-3); }
  .cx-hw-tile-img .corner-tag,
  .cx-hw-tile-img .corner-tag-r { font-size: 9px; top: 8px; left: 8px; }
  .cx-hw-tile-img .corner-tag-r { top: auto; left: auto; bottom: 8px; right: 8px; }
  .cx-hw-tile-title { font-size: 14px; }
  .cx-hw-tile-sub { font-size: 12px; line-height: 1.4; }
}
.cx-hw-tile {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--cx-sp-4);
}
.cx-hw-tile-img {
  background: var(--cx-ink-900);
  border-radius: var(--cx-radius-3);
  border: 1px solid var(--cx-border);
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  box-shadow: var(--cx-shadow-3);
}
.cx-hw-tile-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.04);
}
.cx-hw-tile-img::after {
  /* subtle vignette so corner tags stay legible over busy trail photos */
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 22%, transparent 70%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}
.cx-hw-tile-img .corner-tag {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 1;
  font-family: var(--cx-font-mono);
  font-size: 11px;
  color: var(--cx-fg);
  opacity: 0.9;
  letter-spacing: 0;
}
.cx-hw-tile-img .corner-tag-r {
  position: absolute;
  bottom: 12px; right: 12px;
  z-index: 1;
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--cx-tracking-mega);
  text-transform: uppercase;
  color: var(--cx-accent);
}
.cx-hw-tile figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cx-hw-tile-title {
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: var(--cx-tracking-wide);
  text-transform: uppercase;
  color: var(--cx-fg);
}
.cx-hw-tile-sub {
  font-family: var(--cx-font-ui);
  font-size: 14px;
  color: var(--cx-fg-muted);
  line-height: 1.45;
}
.cx-hw-specs {
  margin-top: var(--cx-sp-12);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 720px) {
  .cx-hw-specs { grid-template-columns: 1fr 1fr; }
}

/* Legacy single-image hardware layout — still used elsewhere if any */
.cx-hardware {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--cx-sp-12);
  align-items: center;
}
@media (max-width: 960px) { .cx-hardware { grid-template-columns: 1fr; } }
.cx-hardware-image {
  background: var(--cx-ink-900);
  border-radius: var(--cx-radius-4);
  border: 1px solid var(--cx-border);
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: var(--cx-shadow-3);
}
.cx-hardware-image img {
  width: 78%;
  filter: drop-shadow(0 30px 30px rgba(0,0,0,0.55));
}
.cx-hardware-image .corner-tag {
  position: absolute;
  top: 14px; left: 14px;
  font-family: var(--cx-font-mono);
  font-size: 11px;
  color: var(--cx-fg-subtle);
  letter-spacing: 0;
}
.cx-hardware-image .corner-tag-r {
  position: absolute;
  bottom: 14px; right: 14px;
  font-family: var(--cx-font-mono);
  font-size: 11px;
  color: var(--cx-fg-subtle);
}
.cx-spec-list {
  margin-top: var(--cx-sp-8);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--cx-border);
  border: 1px solid var(--cx-border);
}
.cx-spec {
  background: var(--cx-bg);
  padding: var(--cx-sp-4) var(--cx-sp-5);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cx-spec .k {
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--cx-tracking-mega);
  text-transform: uppercase;
  color: var(--cx-fg-subtle);
}
.cx-spec .v {
  font-family: var(--cx-font-mono);
  font-size: 16px;
  color: var(--cx-fg);
  font-variant-numeric: tabular-nums;
}

/* ===== Outcomes ===== */
.cx-outcomes {
  margin-top: var(--cx-sp-10);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cx-sp-6);
}
@media (max-width: 880px) { .cx-outcomes { grid-template-columns: 1fr; } }
.cx-outcome {
  border-left: 2px solid var(--cx-accent);
  padding: var(--cx-sp-4) var(--cx-sp-5);
  background: rgba(225,90,31,0.04);
}
.cx-outcome .stat {
  font-family: var(--cx-font-mono);
  font-weight: 600;
  font-size: 38px;
  color: var(--cx-fg);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cx-outcome .stat .unit {
  font-size: 18px; color: var(--cx-fg-muted); margin-left: 4px;
}
.cx-outcome .label {
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: var(--cx-tracking-wide);
  text-transform: uppercase;
  color: var(--cx-accent);
  margin: var(--cx-sp-3) 0 var(--cx-sp-2);
}
.cx-outcome .desc {
  font-family: var(--cx-font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--cx-fg-muted);
}

/* ===== Vision section (bone) ===== */
.cx-vision-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: var(--cx-sp-10);
  border-top: 1px solid var(--cx-bone-200);
  border-bottom: 1px solid var(--cx-bone-200);
}
@media (max-width: 1100px) { .cx-vision-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .cx-vision-grid { grid-template-columns: 1fr; } }
.cx-vision-step {
  padding: var(--cx-sp-8) var(--cx-sp-5);
  border-right: 1px solid var(--cx-bone-200);
  position: relative;
  display: flex; flex-direction: column; gap: var(--cx-sp-3);
}
.cx-vision-step:last-child { border-right: none; }
.cx-vision-step .num {
  font-family: var(--cx-font-mono);
  font-size: 11px;
  color: var(--cx-accent);
  letter-spacing: 0;
}
.cx-vision-step h4 {
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
  margin: 0;
  color: var(--cx-ink-950);
}
.cx-vision-step p {
  font-family: var(--cx-font-ui);
  font-size: 13px;
  line-height: 1.55;
  color: #4A463E;
  margin: 0;
}

/* ===== Manifesto closer ===== */
.cx-manifesto {
  position: relative;
  padding: var(--cx-sp-24) 0;
  text-align: left;
  overflow: hidden;
}
.cx-manifesto::before {
  content: '';
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.012) 0,
      rgba(255,255,255,0.012) 1px,
      transparent 1px,
      transparent 4px
    );
  opacity: calc(0.5 + var(--rebellion-texture, 0.07) * 5);
  pointer-events: none;
}
.cx-manifesto-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--cx-sp-12);
  align-items: center;
  position: relative;
}
@media (max-width: 960px) { .cx-manifesto-grid { grid-template-columns: 1fr; } }
.cx-manifesto h2 {
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  margin: 0 0 var(--cx-sp-5);
}
.cx-manifesto h2 .accent { color: var(--cx-accent); }
.cx-manifesto-quote {
  font-family: var(--cx-font-ui);
  font-size: 17px;
  line-height: 1.55;
  color: var(--cx-fg-muted);
  max-width: 50ch;
  margin: 0 0 var(--cx-sp-8);
}
.cx-x-mark-large {
  width: 100%;
  max-width: 360px;
  margin-left: auto;
  display: block;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
}

/* ===== Footer ===== */
.cx-footer {
  background: #0A0B0C;
  border-top: 1px solid var(--cx-border);
  padding: var(--cx-sp-16) 0 var(--cx-sp-8);
}
.cx-footer-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) repeat(4, minmax(0, 1fr));
  gap: var(--cx-sp-10);
}
@media (max-width: 880px) {
  .cx-footer-grid { grid-template-columns: 1fr 1fr; }
}
.cx-footer-col h5 {
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--cx-tracking-mega);
  text-transform: uppercase;
  color: var(--cx-fg-subtle);
  margin: 0 0 var(--cx-sp-4);
}
.cx-footer-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: var(--cx-sp-2);
}
.cx-footer-col a {
  font-family: var(--cx-font-ui);
  font-size: 13px;
  color: var(--cx-fg);
  transition: color var(--cx-dur-fast) var(--cx-ease-mech);
}
.cx-footer-col a:hover { color: var(--cx-accent); }
.cx-footer-brand p {
  font-family: var(--cx-font-ui);
  font-size: 13px;
  line-height: 1.55;
  color: var(--cx-fg-muted);
  margin: var(--cx-sp-3) 0 0;
  max-width: 28ch;
}
.cx-footer-bottom {
  margin-top: var(--cx-sp-12);
  padding-top: var(--cx-sp-5);
  border-top: 1px solid var(--cx-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--cx-font-mono);
  font-size: 11px;
  color: var(--cx-fg-subtle);
  flex-wrap: wrap;
  gap: var(--cx-sp-3);
}
.cx-footer-bottom .legal { display: flex; gap: var(--cx-sp-5); }

/* ===== Density tweak ===== */
body.cx-density-roomy .cx-section { padding: 120px 0; }
body.cx-density-roomy .cx-hero { padding: 120px 0 140px; }
body.cx-density-compact .cx-section { padding: 56px 0; }
body.cx-density-compact .cx-hero { padding: 48px 0 72px; }

/* ===== Surface mode tweak ===== */
body.cx-surface-bone .cx-hero { background: var(--cx-bone-50); color: var(--cx-ink-950); }
body.cx-surface-bone .cx-hero-title { color: var(--cx-ink-950); }
body.cx-surface-bone .cx-hero-title .strike { color: #6E6A62; }
body.cx-surface-bone .cx-hero-sub { color: #4A463E; }
body.cx-surface-bone .cx-hero-meta-item .v { color: var(--cx-ink-950); }
body.cx-surface-bone .cx-hero-meta-item .k,
body.cx-surface-bone .cx-eyebrow { color: #6E6A62; }
body.cx-surface-bone .cx-btn-ghost { color: var(--cx-ink-950); border-color: var(--cx-bone-200); }

/* ===== Shift section — rider-facing camera feed ===== */
.cx-shift-feed {
  position: relative;
  margin: var(--cx-sp-10) 0 var(--cx-sp-6);
  border-radius: var(--cx-radius-3);
  overflow: hidden;
  background: #0A0B0C;
  border: 1px solid var(--cx-border);
  box-shadow: 0 24px 50px rgba(0,0,0,0.55), 0 1px 0 rgba(255,255,255,0.04) inset;
  aspect-ratio: 16 / 9;
}
.cx-shift-feed video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.cx-shift-feed-corner {
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--cx-accent);
  z-index: 2;
}
.cx-shift-feed-corner.tl { top: 10px; left: 10px; border-right: none; border-bottom: none; }
.cx-shift-feed-corner.tr { top: 10px; right: 10px; border-left: none; border-bottom: none; }
.cx-shift-feed-corner.bl { bottom: 10px; left: 10px; border-right: none; border-top: none; }
.cx-shift-feed-corner.br { bottom: 10px; right: 10px; border-left: none; border-top: none; }
.cx-shift-feed-label {
  position: absolute;
  top: 14px; left: 32px;
  z-index: 3;
  font-family: var(--cx-font-mono);
  font-size: 11px;
  color: var(--cx-accent);
  letter-spacing: 0.04em;
}
.cx-shift-feed-rec {
  position: absolute;
  top: 14px; right: 32px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--cx-font-mono);
  font-size: 11px;
  color: var(--cx-fg);
}
.cx-shift-feed-rec .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cx-signal-stop);
  animation: rec-pulse 1.6s ease-in-out infinite;
}
.cx-shift-feed-cap {
  position: absolute;
  left: 28px; right: 28px; bottom: 22px;
  z-index: 3;
  margin: 0;
  font-family: var(--cx-font-ui);
  font-size: 13px;
  line-height: 1.45;
  color: rgba(241,236,227,0.86);
  max-width: 56ch;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}
@media (max-width: 720px) {
  .cx-shift-feed-label, .cx-shift-feed-rec { font-size: 10px; }
  .cx-shift-feed-cap { left: 16px; right: 16px; bottom: 16px; font-size: 12px; }
}

/* ===== Nav link "NEW" flag ===== */
.cx-nav-link-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px 0;
  font-family: var(--cx-font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--cx-fg-on-accent, #1a0a02);
  background: var(--cx-accent);
  border-radius: 2px;
  vertical-align: 1px;
  line-height: 1.4;
}

/* ===== STASH TEASER ===== */
.cx-stash-teaser {
  position: relative;
  background: #0A0B0C;
  overflow: hidden;
}
.cx-stash-rule {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cx-accent) 20%, var(--cx-accent) 80%, transparent);
  opacity: 0.5;
}
.cx-stash-teaser-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--cx-sp-12);
  align-items: stretch;
  position: relative;
}
@media (max-width: 1080px) {
  .cx-stash-teaser-grid { grid-template-columns: 1fr; gap: var(--cx-sp-8); }
}

/* Copy column */
.cx-stash-teaser-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cx-stash-teaser-title {
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: clamp(38px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
  color: var(--cx-fg);
  margin: 0 0 var(--cx-sp-6);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cx-stash-teaser-title .accent { color: var(--cx-accent); }
.cx-stash-teaser-lede {
  max-width: 44ch;
  margin-bottom: var(--cx-sp-8);
}
.cx-stash-teaser-cta {
  display: flex;
  gap: var(--cx-sp-3);
  flex-wrap: wrap;
}
.cx-stash-teaser-meta {
  margin-top: var(--cx-sp-10);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cx-sp-5);
  max-width: 480px;
  border-top: 1px dashed var(--cx-border-strong);
  padding-top: var(--cx-sp-5);
}
.cx-stash-teaser-meta-item .k {
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: var(--cx-tracking-mega);
  text-transform: uppercase;
  color: var(--cx-fg-subtle);
  display: block;
  margin-bottom: 6px;
}
.cx-stash-teaser-meta-item .v {
  font-family: var(--cx-font-mono);
  font-size: 13px;
  color: var(--cx-fg);
  font-variant-numeric: tabular-nums;
}

/* Visuals column */
.cx-stash-teaser-visuals {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--cx-sp-4);
  align-items: stretch;
}
@media (max-width: 640px) {
  /* On mobile, drop the lookbook hero + mini product tiles entirely —
     the copy, CTAs, and meta above already carry the section. */
  .cx-stash-teaser-visuals { display: none; }
}
.cx-stash-teaser-hero {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  border-radius: var(--cx-radius-3);
  overflow: hidden;
  background: #0A0B0C;
  border: 1px solid var(--cx-border);
  box-shadow: 0 24px 50px rgba(0,0,0,0.55);
  transition: transform var(--cx-dur-base) var(--cx-ease-mech),
              border-color var(--cx-dur-base) var(--cx-ease-mech);
}
.cx-stash-teaser-hero:hover {
  transform: translateY(-2px);
  border-color: var(--cx-accent);
}
.cx-stash-teaser-hero img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.95) contrast(1.04);
}
.cx-stash-teaser-hero-tag {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  font-family: var(--cx-font-mono);
  font-size: 11px;
  color: var(--cx-accent);
  background: rgba(0,0,0,0.55);
  padding: 4px 8px;
  border: 1px solid rgba(225,90,31,0.4);
  letter-spacing: 0.04em;
}
.cx-stash-teaser-hero-corner {
  position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--cx-accent);
  z-index: 2;
}
.cx-stash-teaser-hero-corner.tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.cx-stash-teaser-hero-corner.tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.cx-stash-teaser-hero-corner.bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.cx-stash-teaser-hero-corner.br { bottom: 8px; right: 8px; border-left: none; border-top: none; }

/* Mini product tiles column */
.cx-stash-teaser-mini {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: var(--cx-sp-4);
}
@media (max-width: 640px) {
  .cx-stash-teaser-mini { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
}
.cx-stash-teaser-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--cx-sp-4);
  background: linear-gradient(180deg, #131416 0%, #0E0F10 100%);
  border: 1px solid var(--cx-border);
  border-radius: var(--cx-radius-3);
  overflow: hidden;
  min-height: 180px;
  transition: transform var(--cx-dur-base) var(--cx-ease-mech),
              border-color var(--cx-dur-base) var(--cx-ease-mech);
}
.cx-stash-teaser-tile:hover {
  transform: translateY(-2px);
  border-color: var(--cx-accent);
}
.cx-stash-teaser-tile img {
  position: absolute;
  inset: 12% 12% 30% 12%;
  width: 76%; height: 60%;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.55));
}
.cx-stash-teaser-tile-sku {
  position: absolute;
  top: 12px; left: 12px;
  font-family: var(--cx-font-mono);
  font-size: 10px;
  color: var(--cx-fg-subtle);
  letter-spacing: 0;
  z-index: 1;
}
.cx-stash-teaser-tile-name {
  position: relative;
  z-index: 1;
  font-family: var(--cx-font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: var(--cx-tracking-wide);
  text-transform: uppercase;
  color: var(--cx-fg);
}