/* TranslateJolt — Impulse Violet localization change ops */
:root {
  --violet: #221447;
  --carbon: #0E1017;
  --mist: #F5F1FF;
  --orange: #FF6238;
  --mint: #26E0C2;
  --blue: #7B9CFF;
  --ai: #C486FF;
  --verified: #42CC8B;
  --pending: #F5BD45;
  --risk: #F34F73;
  --card-dark: #30205C;
  --card-light: #FFFCFF;
  --border-dark: #503B7C;
  --border-light: #D7CCE8;
  --heading-dark: #FFF8FF;
  --heading-light: #211C2C;
  --body-dark: #D9CCE9;
  --body-light: #655D70;
  --text-on-violet: #FFF8FF;
  --text-on-violet-muted: #D9CCE9;
  --text-on-carbon: #D9CCE9;
  --text-on-mist: #211C2C;
  --header-bg: #30205C;
  --font: "DM Sans", system-ui, sans-serif;
  --header-h: 56px;
  --radius: 6px;
  --announce-h: 36px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  color: var(--heading-light);
  background: var(--mist);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
.site-shell { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
.container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.narrow-prose { width: min(720px, 100%); }

.mono-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--body-light);
  margin-bottom: 8px;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--orange);
}
.lead { font-size: 1.05rem; color: var(--body-light); max-width: 54ch; }
.mt-s { margin-top: 10px; }
.mt-m { margin-top: 20px; }
.hint-line { font-size: 0.9rem; color: var(--body-light); margin: 12px 0 0; }
.hint-line.is-ok { color: var(--verified); }
.center-text { text-align: center; }
.center-text .lead { margin-inline: auto; }
.center-hero { text-align: center; }
.center-hero .lead { margin-inline: auto; }
.center-actions { justify-content: center; }

h1, h2, h3 {
  font-family: var(--font);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--heading-light);
}
h1 { font-size: clamp(2rem, 4vw, 3rem); }
h2 { font-size: clamp(1.4rem, 2.4vw, 1.95rem); }
h3 { font-size: 1.12rem; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  padding: 10px 16px;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-sm { padding: 7px 12px; font-size: 0.82rem; }
.btn-lg { padding: 12px 18px; font-size: 0.98rem; }
.btn-primary {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.btn-primary:hover { background: #e8542f; border-color: #e8542f; }
.btn-line {
  background: transparent;
  border-color: var(--border-light);
  color: var(--heading-light);
}
.btn-line:hover { border-color: var(--orange); color: var(--orange); }
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--heading-light);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn-ghost:hover { transform: none; color: var(--orange); }

/* Readable buttons on dark surfaces */
.section--violet .btn-line,
.section--carbon .btn-line,
.jolt-hero .btn-line,
.page-hero .btn-line,
.cta-band .btn-line {
  color: #fff;
  border-color: rgba(255, 248, 255, 0.55);
}
.section--violet .btn-line:hover,
.section--carbon .btn-line:hover,
.jolt-hero .btn-line:hover,
.page-hero .btn-line:hover,
.cta-band .btn-line:hover {
  border-color: var(--mint);
  color: var(--mint);
}
.section--violet .btn-ghost,
.section--carbon .btn-ghost,
.jolt-hero .btn-ghost,
.page-hero .btn-ghost,
.cta-band .btn-ghost {
  color: var(--text-on-violet-muted);
}
.section--violet .btn-ghost:hover,
.section--carbon .btn-ghost:hover,
.jolt-hero .btn-ghost:hover,
.page-hero .btn-ghost:hover,
.cta-band .btn-ghost:hover {
  color: var(--mint);
}
.plan .btn-line {
  color: #fff !important;
  border-color: rgba(255, 248, 255, 0.55) !important;
}
.plan .btn-line:hover {
  border-color: var(--mint) !important;
  color: var(--mint) !important;
}

/* Announce bar — mint pulse on violet mist tint */
.announce-bar {
  background: linear-gradient(90deg, #2a1a52 0%, #35245f 50%, #2a1a52 100%);
  border-bottom: 1px solid var(--border-dark);
  color: var(--body-dark);
}
.announce-bar-inner {
  width: min(1180px, calc(100% - 28px));
  margin-inline: auto;
  padding: 8px 0;
}
.announce-text {
  margin: 0;
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  justify-content: center;
  text-align: center;
}
.announce-pulse {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--mint);
  box-shadow: 0 0 0 0 rgba(38, 224, 194, 0.5);
  animation: pulse-block 1.6s ease-out infinite;
  flex-shrink: 0;
}
.announce-cta {
  color: var(--mint);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.announce-cta:hover { text-decoration: underline; }

@keyframes pulse-block {
  0% { box-shadow: 0 0 0 0 rgba(38, 224, 194, 0.55); }
  70% { box-shadow: 0 0 0 8px rgba(38, 224, 194, 0); }
  100% { box-shadow: 0 0 0 0 rgba(38, 224, 194, 0); }
}

/* Header — light purple horizontal bar */
.site-top { position: sticky; top: 0; z-index: 50; }
.site-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--border-dark);
  min-height: var(--header-h);
  overflow: visible;
}
.header-inner {
  width: min(1180px, calc(100% - 28px));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--header-h);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--heading-dark);
  flex-shrink: 0;
}
.logo-mark { display: flex; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 0.95rem; }
.brand-text span {
  font-size: 0.62rem;
  color: var(--body-dark);
  letter-spacing: 0.02em;
}
.nav-main {
  display: flex;
  gap: 2px;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}
.nav-link {
  color: var(--body-dark);
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 500;
  padding: 6px 10px 6px 12px;
  border-radius: var(--radius);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.nav-link:hover { color: var(--heading-dark); }
.nav-link.is-active {
  color: var(--heading-dark);
  font-weight: 600;
}
.nav-link.is-active::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--orange);
  border-radius: 1px;
  flex-shrink: 0;
  animation: pulse-block 1.4s ease-out infinite;
  box-shadow: 0 0 0 0 rgba(255, 98, 56, 0.45);
}
.header-actions { display: flex; align-items: center; gap: 8px; }
.header-actions .btn-ghost { color: var(--body-dark); text-decoration: none; }
.header-actions .btn-ghost:hover { color: #fff; }
.header-actions .btn-primary {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-dark);
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  cursor: pointer;
}
.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px 14px 14px;
  background: var(--header-bg);
  border-top: 1px solid var(--border-dark);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
  color: var(--body-dark);
  text-decoration: none;
  padding: 8px;
}
.user-menu { position: relative; }
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--violet);
  border: none;
  font-weight: 700;
  font-size: 0.7rem;
  cursor: pointer;
}
.user-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--card-dark);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  min-width: 200px;
  padding: 8px;
  z-index: 60;
}
.user-dropdown.is-open { display: block; }
.user-dropdown a,
.user-dropdown button {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--body-dark);
  padding: 8px 10px;
  text-decoration: none;
  cursor: pointer;
  font-size: 0.88rem;
}
.user-dropdown a:hover,
.user-dropdown button:hover {
  color: #fff;
  background: #3a2870;
}
.user-workspace-label {
  display: block;
  font-size: 10px;
  color: var(--mint);
  padding: 6px 10px 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}

/* Sections */
.section { padding: 72px 0; }
.section--mist { background: var(--mist); color: var(--heading-light); }
.section--violet {
  background:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(123, 156, 255, 0.18), transparent 55%),
    radial-gradient(ellipse 60% 50% at 90% 100%, rgba(196, 134, 255, 0.14), transparent 50%),
    var(--violet);
  color: var(--text-on-violet);
}
.section--violet h1,
.section--violet h2,
.section--violet h3 { color: var(--heading-dark); }
.section--violet .lead,
.section--violet .mono-label { color: var(--text-on-violet-muted); }
.section--violet .kicker { color: var(--mint); }
.section--carbon {
  background: var(--carbon);
  color: var(--text-on-carbon);
}
.section--carbon h1,
.section--carbon h2,
.section--carbon h3 { color: var(--heading-dark); }
.section--carbon .lead,
.section--carbon .mono-label { color: var(--text-on-carbon); }
.section--carbon .kicker { color: var(--mint); }
.sec-head { margin-bottom: 28px; }

.page-hero {
  background:
    linear-gradient(160deg, rgba(38, 224, 194, 0.08), transparent 40%),
    var(--violet);
  color: var(--text-on-violet);
  padding: 64px 0 56px;
  border-bottom: 2px solid var(--border-dark);
}
.page-hero h1 { color: var(--heading-dark); }
.page-hero .lead { color: var(--text-on-violet-muted); }
.page-hero .kicker { color: var(--mint); }
.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.page-hero .page-hero-actions { justify-content: center; }

.cta-band {
  text-align: center;
  padding: 48px 24px;
  border: 1px solid var(--border-dark);
  border-radius: 10px;
  background: var(--card-dark);
}
.cta-band h2 { color: var(--heading-dark); }
.cta-band .lead {
  margin-inline: auto;
  color: var(--body-dark);
}
.cta-band .page-hero-actions { justify-content: center; }
.cta-band .kicker { color: var(--mint); }

/* ════ HOME — JOLT HERO ════ */
.jolt-hero {
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(123, 156, 255, 0.22), transparent 55%),
    radial-gradient(ellipse 50% 40% at 100% 40%, rgba(255, 98, 56, 0.12), transparent 50%),
    var(--violet);
  color: var(--text-on-violet);
  padding-bottom: 56px;
}
.brand-rail {
  padding: 48px 0 32px;
  border-bottom: 1px solid rgba(80, 59, 124, 0.6);
}
.brand-inner {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}
.brand-name {
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--heading-dark);
  line-height: 1.05;
}
.brand-tag {
  margin: 0;
  font-size: 0.88rem;
  color: var(--mint);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.brand-mission {
  margin: 0;
  max-width: 62ch;
  color: var(--body-dark);
  font-size: 1.02rem;
}
.brand-mission b { color: var(--heading-dark); font-weight: 700; }
.keyword-rail {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.keyword-rail li {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blue);
  border: 1px solid var(--border-dark);
  border-radius: 4px;
  padding: 5px 10px;
  background: rgba(48, 32, 92, 0.55);
}
.brand-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}

.shock-stage {
  margin-top: 36px;
  display: grid;
  gap: 22px;
}
.shock-head {
  text-align: center;
  display: grid;
  gap: 8px;
  justify-items: center;
}
.shock-head h1 { color: var(--heading-dark); max-width: 22ch; }
.shock-head .lead { color: var(--body-dark); }
.shock-head .kicker { color: var(--mint); }

.shock-board {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 16px;
  align-items: stretch;
}
.settings-pane,
.impact-pane {
  background: var(--card-dark);
  border: 1px solid var(--border-dark);
  border-radius: 10px;
  padding: 20px;
}
.settings-pane .mono-label,
.impact-pane .mono-label { color: var(--mint); }
.string-field {
  display: grid;
  gap: 6px;
  font-size: 0.88rem;
  color: var(--body-dark);
  margin: 12px 0;
}
.string-field input {
  background: rgba(14, 16, 23, 0.45);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius);
  color: var(--heading-dark);
  padding: 10px 12px;
}
.string-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}
.chip {
  background: transparent;
  border: 1px solid var(--border-dark);
  color: var(--body-dark);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  cursor: pointer;
}
.chip.is-on {
  border-color: var(--orange);
  color: var(--heading-dark);
  background: rgba(255, 98, 56, 0.15);
}
.preview-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  background: var(--risk);
  color: #fff;
  font-weight: 600;
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.settings-pane .hint-line { color: var(--body-dark); }

.impact-meters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 12px 0 16px;
}
.impact-meters div {
  background: rgba(14, 16, 23, 0.4);
  border: 1px solid var(--border-dark);
  border-radius: 6px;
  padding: 10px 8px;
  text-align: center;
}
.impact-meters b {
  display: block;
  font-size: 1.35rem;
  color: var(--heading-dark);
  line-height: 1.2;
}
.impact-meters span {
  font-size: 0.68rem;
  color: var(--body-dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.impact-meters div:nth-child(1) b { color: var(--verified); }
.impact-meters div:nth-child(2) b { color: var(--pending); }
.impact-meters div:nth-child(3) b { color: var(--orange); }
.impact-meters div:nth-child(4) b { color: var(--risk); }
.impact-notes {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--body-dark);
}
.impact-notes b { color: var(--heading-dark); }

/* Flap rail — 8 locale modules */
.flap-rail {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  perspective: 900px;
}
.flap {
  appearance: none;
  background: var(--card-dark);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 12px 10px;
  color: var(--heading-dark);
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 6px;
  min-height: 128px;
  transition: transform .35s ease, border-color .2s ease, box-shadow .2s ease;
  transform-style: preserve-3d;
}
.flap:hover { border-color: var(--blue); }
.flap.is-focus {
  border-color: var(--mint);
  box-shadow: 0 0 0 2px rgba(38, 224, 194, 0.35);
}
.flap.is-flipping {
  animation: flap-flip 0.42s ease;
}
.flap.is-flipped { border-color: var(--border-dark); }
.flap-code {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mint);
}
.flap-old {
  font-size: 0.72rem;
  color: var(--body-dark);
  text-decoration: line-through;
  opacity: 0.55;
  display: none;
}
.flap-new {
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--heading-dark);
}
.flap-flag {
  font-size: 0.68rem;
  color: var(--body-dark);
  margin-top: auto;
}
.flap.is-ok { border-top: 3px solid var(--verified); }
.flap.is-miss { border-top: 3px solid var(--pending); }
.flap.is-overflow { border-top: 3px solid var(--orange); }
.flap.is-legal { border-top: 3px solid var(--risk); }
.is-comparing .flap-old,
.flap.is-compare .flap-old { display: block; }
.is-comparing .flap-new,
.flap.is-compare .flap-new { color: var(--mint); }

@keyframes flap-flip {
  0% { transform: rotateX(0); }
  45% { transform: rotateX(-88deg); }
  100% { transform: rotateX(0); }
}

/* Scan duo — form + filled idle preview */
.scan-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.scan-form,
.contact-form,
.auth-form {
  display: grid;
  gap: 12px;
}
.scan-form label,
.contact-form label,
.auth-form label {
  display: grid;
  gap: 6px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--heading-light);
}
.scan-form input,
.scan-form textarea,
.contact-form input,
.contact-form textarea,
.auth-form input {
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--card-light);
  color: var(--heading-light);
}
.scan-preview {
  background: var(--card-light);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 20px;
  min-height: 280px;
}
.scan-preview .mono-label { color: var(--blue); }
.scan-idle-title {
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--heading-light);
}
.preview-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.preview-list li {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-left: 3px solid var(--orange);
  background: rgba(245, 241, 255, 0.8);
  border-radius: 0 6px 6px 0;
}
.preview-list b { font-size: 0.82rem; color: var(--heading-light); }
.preview-list span { font-size: 0.88rem; color: var(--body-light); }
.scan-preview.is-live { border-color: var(--mint); }

/* Pain strip */
.pain-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.pain-cell {
  background: rgba(48, 32, 92, 0.55);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 16px 14px;
  min-height: 140px;
}
.pain-n {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.pain-cell h3 {
  color: var(--heading-dark);
  font-size: 1rem;
  margin-bottom: 6px;
}
.pain-cell p {
  margin: 0;
  font-size: 0.86rem;
  color: var(--body-dark);
}

/* Surface map */
.surface-map {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.surf {
  display: grid;
  gap: 6px;
  padding: 18px 16px;
  text-decoration: none;
  background: var(--card-dark);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  color: var(--body-dark);
  transition: border-color .15s ease, transform .15s ease;
}
.surf:hover {
  border-color: var(--mint);
  transform: translateY(-2px);
}
.surf-n {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--mint);
  letter-spacing: 0.06em;
}
.surf b { color: var(--heading-dark); font-size: 1.02rem; }
.pulse-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  padding: 16px;
  border: 1px solid var(--border-dark);
  border-radius: 8px;
}
.pulse-origin,
.pulse-end {
  background: var(--orange);
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.8rem;
}
.pulse-node {
  background: var(--card-dark);
  color: var(--mint);
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
}
.pulse-wire {
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, var(--orange), var(--mint));
}

/* Platform relay */
.relay {
  display: grid;
  gap: 20px;
}
.relay-line {
  position: relative;
  height: 4px;
  background: var(--border-dark);
  border-radius: 2px;
  overflow: hidden;
}
.relay-line i {
  position: absolute;
  top: -4px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--orange);
  opacity: 0;
}
.relay-line i.is-run {
  opacity: 1;
  animation: pulse-travel 1.5s linear;
}
@keyframes pulse-travel {
  from { left: 0; }
  to { left: calc(100% - 12px); }
}
.relay-plates {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.relay-plate {
  appearance: none;
  background: var(--card-dark);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 16px 12px;
  color: var(--heading-dark);
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 6px;
  min-height: 100px;
  transition: transform .2s ease, border-color .2s ease;
}
.relay-plate b { font-size: 0.95rem; }
.relay-plate span { font-size: 0.78rem; color: var(--body-dark); }
.relay-plate.is-on { border-color: var(--mint); box-shadow: 0 0 0 1px var(--mint); }
.relay-plate.is-tilt { transform: rotate(-3deg); border-color: var(--pending); }
.relay-plate.is-wobble { animation: wobble 0.8s ease-in-out infinite; border-color: var(--risk); }
.relay-plate.is-lock { border-color: var(--blue); opacity: 0.85; }
.relay-plate.is-ok { border-top: 3px solid var(--verified); }
@keyframes wobble {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
.relay-detail {
  background: rgba(14, 16, 23, 0.35);
  border: 1px solid var(--border-dark);
  border-radius: 10px;
  padding: 20px;
}
.relay-detail h3 { color: var(--heading-dark); }
.relay-detail p { color: var(--body-dark); margin: 0 0 8px; }

/* Change Sets ledger */
.ledger {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 20px;
}
.ledger-page {
  background: var(--card-light);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 20px;
  min-height: 160px;
}
.ledger-page p { margin: 0 0 10px; font-size: 1.15rem; font-weight: 600; color: var(--heading-light); }
.ledger-meta { font-size: 0.82rem !important; font-weight: 400 !important; color: var(--body-light) !important; }
.ledger-seam {
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: center;
  min-width: 120px;
}
.seam-tag {
  appearance: none;
  background: var(--card-light);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--body-light);
  cursor: pointer;
  text-align: left;
}
.seam-tag.is-on {
  background: rgba(255, 98, 56, 0.12);
  border-color: var(--orange);
  color: var(--orange);
}
.ledger.is-approved .ledger-page { border-color: var(--verified); }
.ledger.is-added .ledger-seam { outline: 2px solid var(--mint); border-radius: 8px; }

/* Context cutaway */
.cutaway {
  display: grid;
  gap: 20px;
  justify-items: center;
  padding: 24px;
  background: rgba(14, 16, 23, 0.3);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
}
.cut-core {
  text-align: center;
  padding: 20px;
  background: var(--card-dark);
  border: 1px solid var(--border-dark);
  border-radius: 10px;
  min-width: min(360px, 100%);
}
.cut-btn {
  appearance: none;
  background: var(--risk);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 12px 18px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
}
.cut-orbit {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  width: 100%;
}
.cut-chip {
  background: var(--card-dark);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 4px;
}
.cut-chip b { font-size: 0.78rem; color: var(--mint); }
.cut-chip span { font-size: 0.85rem; color: var(--body-dark); }
.cutaway[data-state="mobile"] .cut-btn { font-size: 0.85rem; max-width: 180px; }
.cutaway[data-state="member"] .cut-btn { background: var(--pending); color: var(--carbon); }
.cutaway.has-shot .cut-core { box-shadow: inset 0 0 0 2px var(--mint); }
.cut-kind-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
  width: 100%;
  justify-content: center;
}
.kind-chip {
  background: transparent;
  border: 1px solid var(--border-dark);
  color: var(--body-dark);
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.8rem;
  font-family: var(--font);
}
.kind-chip.is-on {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

/* Impact quilt */
.quilt { display: grid; gap: 14px; }
.quilt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.lg {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--border-light);
}
.lg-reuse { background: rgba(66, 204, 139, 0.15); color: var(--verified); }
.lg-review { background: rgba(245, 189, 69, 0.18); color: #9a6e10; }
.lg-retranslate { background: rgba(123, 156, 255, 0.18); color: #3d5fcc; }
.lg-blocked { background: rgba(243, 79, 115, 0.15); color: var(--risk); }
.lg-unused {
  background: rgba(215, 204, 232, 0.55);
  color: var(--body-light);
}
.lg-unused::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--border-light);
}
.quilt-xhead {
  display: grid;
  grid-template-columns: 110px repeat(8, 1fr);
  gap: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--body-light);
  text-align: center;
}
.quilt-row {
  display: grid;
  grid-template-columns: 110px repeat(8, 1fr);
  gap: 6px;
  align-items: center;
}
.quilt-ylab {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--heading-light);
}
.quilt-cell {
  appearance: none;
  aspect-ratio: 1;
  border-radius: 4px;
  border: 1px solid var(--border-light);
  background: var(--card-light);
  cursor: pointer;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--body-light);
}
.quilt-cell.is-reuse { background: rgba(66, 204, 139, 0.35); border-color: var(--verified); }
.quilt-cell.is-review { background: rgba(245, 189, 69, 0.4); border-color: var(--pending); }
.quilt-cell.is-retranslate { background: rgba(123, 156, 255, 0.4); border-color: var(--blue); }
.quilt-cell.is-blocked { background: rgba(243, 79, 115, 0.35); border-color: var(--risk); }
.quilt-cell.is-unused {
  background: var(--border-light);
  color: var(--body-light);
  opacity: 0.7;
}
.quilt-cell.is-on { outline: 2px solid var(--orange); outline-offset: 1px; }
.quilt-cell.is-pulse { animation: pulse-block 1s ease-out 2; }
.quilt-detail {
  background: var(--card-light);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 14px 16px;
}
.quilt.is-calculated .quilt-cell.is-review,
.quilt.is-calculated .quilt-cell.is-retranslate {
  box-shadow: 0 0 0 1px rgba(255, 98, 56, 0.35);
}

/* Manuscript folds */
.manuscript {
  display: grid;
  gap: 16px;
  background: rgba(14, 16, 23, 0.3);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 20px;
}
.spine {
  background: var(--card-dark);
  border: 1px solid var(--border-dark);
  border-left: 4px solid var(--orange);
  border-radius: 8px;
  padding: 16px 18px;
}
.spine p {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--heading-dark);
}
.folds { display: grid; gap: 8px; }
.fold {
  background: var(--card-dark);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 0;
  overflow: hidden;
}
.fold summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  color: var(--heading-dark);
  font-weight: 600;
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary span {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--body-dark);
}
.fold.is-ok summary span { color: var(--verified); }
.fold.is-warn summary span { color: var(--pending); }
.fold.is-risk summary span { color: var(--risk); }
.fold-text {
  margin: 0;
  padding: 0 14px 10px;
  color: var(--body-dark);
}
.fold-meta {
  margin: 0;
  padding: 0 14px 14px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fold-meta li {
  font-size: 0.72rem;
  padding: 4px 8px;
  border: 1px solid var(--border-dark);
  border-radius: 4px;
  color: var(--body-dark);
}
.fold-meta li b {
  display: block;
  color: var(--mint);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.fold.is-preserved { border-color: var(--verified); }
.manuscript.is-compare .fold-text { color: var(--mint); }

/* Magnet board */
.magnet-board {
  display: grid;
  gap: 18px;
  background: var(--card-light);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 22px;
}
.sentence-dock {
  padding: 16px;
  border: 1px dashed var(--border-light);
  border-radius: 8px;
  background: rgba(245, 241, 255, 0.6);
}
.sentence-dock p { margin: 0 0 8px; font-size: 1.15rem; color: var(--heading-light); }
.sentence-dock mark {
  background: rgba(243, 79, 115, 0.2);
  color: var(--risk);
  padding: 0 4px;
  border-radius: 2px;
}
.sentence-dock mark.is-ok {
  background: rgba(66, 204, 139, 0.2);
  color: var(--verified);
}
.magnet-field {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.magnet {
  appearance: none;
  border: 1px solid var(--border-light);
  background: #fff;
  border-radius: 6px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
  color: var(--heading-light);
  box-shadow: 1px 2px 0 rgba(33, 28, 44, 0.08);
}
.magnet.is-ok { border-top: 3px solid var(--verified); }
.magnet.is-tone { border-color: var(--ai); border-top: 3px solid var(--ai); }
.magnet.is-risk,
.magnet.is-forbid { border-top: 3px solid var(--risk); color: var(--risk); }
.magnet.is-on { outline: 2px solid var(--blue); }
.magnet.is-repel {
  transform: translateY(-4px) rotate(-4deg);
  opacity: 0.55;
}
.magnet-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0;
  font-size: 0.75rem;
  color: var(--body-light);
}
.magnet-legend .is-forbid { color: var(--risk); }
.magnet-legend .is-tone { color: var(--ai); }
.magnet-board.is-testing .magnet.is-forbid {
  animation: wobble 0.6s ease-in-out 2;
}

/* Locale QA chamber */
.chamber {
  display: grid;
  gap: 16px;
  background: rgba(14, 16, 23, 0.3);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 20px;
}
.chamber-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chamber-chip {
  appearance: none;
  background: transparent;
  border: 1px solid var(--border-dark);
  color: var(--body-dark);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.chamber-chip.is-on {
  background: rgba(38, 224, 194, 0.15);
  border-color: var(--mint);
  color: var(--mint);
}
.chamber-viewport {
  background: var(--card-dark);
  border: 1px solid var(--border-dark);
  border-radius: 10px;
  padding: 28px 20px;
  text-align: center;
  min-height: 160px;
}
.stress-btn {
  appearance: none;
  background: var(--risk);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 12px 16px;
  font-weight: 600;
  max-width: 100%;
  cursor: pointer;
}
.stress-btn.is-overflow {
  outline: 2px solid var(--pending);
  box-shadow: 0 0 0 6px rgba(245, 189, 69, 0.2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  max-width: 160px;
}
.stress-btn.is-fixed { max-width: none; outline: 2px solid var(--verified); }
.stress-note { color: var(--body-dark); margin: 12px 0 0; }
.char-grid-panel {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--border-dark);
  border-radius: 8px;
}
.char-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  margin-top: 10px;
}
.cg-cell {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--card-dark);
  color: var(--blue);
  font-size: 0.65rem;
  border-radius: 2px;
}
.cg-cell.is-hot {
  background: var(--risk);
  color: #fff;
}
.chamber[data-chamber="RTL"] .chamber-viewport { direction: rtl; }
.chamber[data-chamber="Mobile"] .stress-btn,
.chamber[data-chamber="Narrow button"] .stress-btn { max-width: 200px; }

/* Cassette rack */
.cassette-rack {
  display: grid;
  gap: 16px;
  background: var(--card-dark);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 22px;
}
.rack-body {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
}
.cassette-slot {
  background: rgba(14, 16, 23, 0.5);
  border: 1px solid var(--border-dark);
  border-radius: 6px;
  padding: 14px 8px;
  text-align: center;
  min-height: 88px;
  display: grid;
  align-content: center;
  gap: 4px;
  cursor: pointer;
}
.cassette-slot b { color: var(--heading-dark); }
.cassette-slot span {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--body-dark);
}
.cassette-slot.is-in { border-top: 3px solid var(--verified); }
.cassette-slot.is-out { border-top: 3px solid var(--pending); opacity: 0.75; transform: translateY(8px); }
.cassette-slot.is-blocked { border-top-color: var(--risk); }
.cassette-slot.is-qa { border-top-color: var(--blue); }
.cassette-slot.is-legal { border-top-color: var(--ai); }
.cassette-slot.is-on { outline: 2px solid var(--mint); }
.rack-detail {
  background: rgba(14, 16, 23, 0.4);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 14px 16px;
}
.rack-detail ul {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--body-dark);
  display: grid;
  gap: 6px;
}
.ship-list {
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed var(--mint);
  border-radius: 6px;
  color: var(--body-dark);
}
.ship-list p { margin: 6px 0 0; }
.cassette-rack.is-building .cassette-slot.is-in {
  animation: pulse-block 0.8s ease-out 2;
}

/* Turntable */
.turntable {
  display: grid;
  gap: 18px;
  position: relative;
  background: var(--card-light);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 20px;
}
.vinyl-ring {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.vinyl {
  appearance: none;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px solid var(--border-light);
  background:
    radial-gradient(circle at center, var(--mist) 18%, transparent 19%),
    repeating-radial-gradient(circle at center, #fff 0 2px, #ebe4f7 2px 4px);
  cursor: pointer;
  display: grid;
  place-content: center;
  gap: 2px;
  color: var(--heading-light);
  transition: transform .3s ease, border-color .2s ease;
}
.vinyl b { font-size: 0.78rem; }
.vinyl span { font-size: 0.65rem; color: var(--body-light); text-transform: uppercase; }
.vinyl.is-on {
  border-color: var(--orange);
  transform: rotate(18deg);
  animation: spin-slow 4s linear infinite;
}
@keyframes spin-slow {
  to { transform: rotate(378deg); }
}
.arm {
  width: 40%;
  height: 3px;
  background: var(--heading-light);
  border-radius: 2px;
  margin: 0 auto 8px;
  transform-origin: left center;
  opacity: 0.35;
  transition: transform .3s ease, opacity .2s ease;
}
.arm.is-play {
  opacity: 1;
  transform: rotate(12deg);
  background: var(--orange);
}
.payload {
  background: var(--carbon);
  color: var(--mint);
  border-radius: 8px;
  padding: 14px 16px;
  overflow: auto;
  font-size: 0.82rem;
  margin: 0;
}
.api-block {
  background: var(--card-light);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 16px;
}
.api-block pre {
  margin: 8px 0 0;
  overflow: auto;
  font-size: 0.82rem;
  color: var(--heading-light);
  background: var(--mist);
  padding: 12px;
  border-radius: 6px;
}

/* Integrations */
.integ-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.integ-cell {
  padding: 16px;
  background: var(--card-light);
  border: 1px solid var(--border-light);
  border-top: 3px solid var(--orange);
  border-radius: 8px;
}
.integ-cell b { display: block; margin-bottom: 6px; color: var(--heading-light); }
.integ-cell p { margin: 0; color: var(--body-light); font-size: 0.9rem; }

/* Pricing equalizer */
.equalizer {
  display: grid;
  gap: 20px;
  background: var(--card-light);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 22px;
}
.fader-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  align-items: end;
}
.fader {
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--heading-light);
}
.fader input[type="range"] {
  width: 100%;
  accent-color: var(--orange);
}
.fader em {
  font-style: normal;
  font-size: 0.78rem;
  color: var(--body-light);
}
.eq-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.plan {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--card-dark);
  border: 1px solid var(--border-dark);
  border-radius: 10px;
  color: var(--body-dark);
  min-height: 200px;
}
.plan h3 { color: var(--heading-dark); margin: 0; }
.plan p { margin: 0; flex: 1; font-size: 0.9rem; }
.plan .mono-label { color: var(--mint); }
.plan.is-rec {
  border-color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange);
}
.plan .btn { align-self: flex-start; margin-top: 4px; }
.allow-table {
  overflow: auto;
  border: 1px solid var(--border-light);
  border-radius: 8px;
}
.allow-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.allow-table th,
.allow-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
  text-align: left;
}
.allow-table th { background: var(--mist); color: var(--heading-light); }

/* About / misc */
.about-system {
  font-size: clamp(1.3rem, 2.5vw, 1.8rem);
  font-weight: 700;
  color: var(--heading-light);
  margin: 0 0 8px;
}
.about-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.about-beliefs {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.about-beliefs li {
  padding: 14px 16px;
  border-left: 3px solid var(--orange);
  background: rgba(14, 16, 23, 0.35);
  color: var(--body-dark);
}
.about-beliefs b {
  display: block;
  margin-bottom: 4px;
  color: var(--heading-dark);
}
.about-pain-checks {
  margin-top: 24px;
  color: var(--body-dark);
}
.about-pain-checks b { color: var(--heading-dark); }
.section--violet .check-list { color: var(--body-dark); }
.check-list,
.help-list,
.status-list {
  margin: 0;
  padding-left: 1.2rem;
  display: grid;
  gap: 10px;
  color: var(--body-light);
}
.help-list { list-style: none; padding: 0; }
.help-list a {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  text-decoration: none;
  background: var(--card-light);
  font-weight: 600;
  color: var(--heading-light);
}
.help-list a:hover { border-color: var(--orange); color: var(--orange); }
.status-list { list-style: none; padding: 0; }
.status-list li {
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: var(--card-light);
}
.status-list .is-ok span { color: var(--verified); font-size: 0.8rem; font-weight: 600; }
.change-item {
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border-light);
}
.change-item h3 { margin-bottom: 6px; }
.change-item p { margin: 0; color: var(--body-light); }
.legal-body p { color: var(--body-light); }

/* Footer — carbon, no brand CTA */
.site-footer {
  background: var(--carbon);
  color: var(--text-on-carbon);
  padding: 48px 0 0;
  margin-top: auto;
}
.footer-grid {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-bottom: 36px;
}
.footer-col h4 {
  color: var(--heading-dark);
  font-size: 0.95rem;
  margin-bottom: 12px;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.footer-col a {
  text-decoration: none;
  font-size: 0.88rem;
  color: var(--text-on-carbon);
}
.footer-col a:hover { color: var(--mint); }
.footer-bar {
  border-top: 1px solid #1c2030;
  padding: 18px 0 24px;
}
.footer-tag {
  font-size: 0.88rem;
  max-width: 70ch;
  margin: 0 0 14px;
  color: var(--text-on-carbon);
}
.footer-bar-inner {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.82rem;
}
.footer-legal { display: flex; gap: 14px; }
.footer-legal a { text-decoration: none; color: var(--text-on-carbon); }
.footer-legal a:hover { color: var(--mint); }

/* Auth page */
.auth-body {
  min-height: 100vh;
  margin: 0;
  background:
    linear-gradient(160deg, var(--violet) 0%, var(--violet) 42%, var(--carbon) 42%, var(--carbon) 100%);
  display: grid;
  place-items: center;
  font-family: var(--font);
}
.auth-shell { width: min(420px, calc(100% - 32px)); }
.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--heading-dark);
  margin-bottom: 18px;
  font-weight: 700;
}
.auth-card {
  background: var(--card-light);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 28px 24px;
}
.auth-card h1 { color: var(--heading-light); font-size: 1.6rem; }
.auth-alt {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.9rem;
  margin-top: 14px;
  color: var(--body-light);
}
.auth-alt a { color: var(--blue); text-decoration: none; font-weight: 600; }
.linkish {
  background: none;
  border: none;
  color: var(--orange);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.auth-foot {
  text-align: center;
  margin-top: 18px;
  font-size: 0.78rem;
  color: var(--text-on-carbon);
}

/* Responsive */
@media (max-width: 1100px) {
  .flap-rail { grid-template-columns: repeat(4, 1fr); }
  .relay-plates { grid-template-columns: repeat(3, 1fr); }
  .pain-strip { grid-template-columns: repeat(3, 1fr); }
  .cut-orbit { grid-template-columns: repeat(3, 1fr); }
  .rack-body { grid-template-columns: repeat(4, 1fr); }
  .vinyl-ring { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 980px) {
  .nav-main { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .shock-board,
  .scan-duo,
  .about-split,
  .surface-map,
  .pain-strip,
  .eq-plans,
  .fader-row,
  .integ-grid,
  .footer-grid,
  .ledger {
    grid-template-columns: 1fr 1fr;
  }
  .ledger-seam {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .impact-meters { grid-template-columns: repeat(2, 1fr); }
  .quilt-xhead,
  .quilt-row { grid-template-columns: 90px repeat(8, 1fr); }
}

@media (max-width: 720px) {
  .shock-board,
  .scan-duo,
  .about-split,
  .surface-map,
  .pain-strip,
  .eq-plans,
  .fader-row,
  .integ-grid,
  .footer-grid,
  .ledger,
  .relay-plates,
  .flap-rail,
  .cut-orbit,
  .rack-body,
  .vinyl-ring {
    grid-template-columns: 1fr;
  }
  .brand-text span { display: none; }
  .header-actions .btn-ghost { display: none; }
  .flap-rail { grid-template-columns: repeat(2, 1fr); }
  .pain-strip { grid-template-columns: 1fr 1fr; }
  .quilt-xhead,
  .quilt-row {
    grid-template-columns: 72px repeat(4, 1fr);
  }
  .quilt-xhead span:nth-child(n+6),
  .quilt-row .quilt-cell:nth-child(n+6) {
    /* keep all visible on scroll */
  }
  .container { width: min(1180px, calc(100% - 24px)); }
  .brand-actions .btn-lg { width: 100%; }
}