/* ═══════════════════════════════════════════════════════════════
   ABOUT · LIVING SPECTRUM LAYER
   Canonical source of the shared chrome blocks: src/styles/living-spectrum.css
   (keep tokens, nav glass, footer coda, and glass recipes in sync).
   Scope: body.about-page.living-spectrum-page (about only).
   ═══════════════════════════════════════════════════════════════ */

html.about-spectrum-root {
  overflow-x: hidden;
  overflow-x: clip;
  /* Paint the canvas at the root so fast scrolls and overscroll never flash white. */
  background-color: #06080b;
}

body.about-page.living-spectrum-page {
  --ls-canvas: #07090c;
  --ls-canvas-soft: #0c1016;
  --ls-platinum: #f1f2f0;
  --ls-platinum-muted: rgba(235, 238, 240, 0.68);
  --ls-platinum-faint: rgba(225, 230, 234, 0.42);
  --ls-cobalt: 57, 137, 255;
  --ls-amber: 239, 157, 68;
  --ls-page-gutter: clamp(24px, 5vw, 80px);
  --ls-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Remap the legacy tokens so shared chrome recolors wholesale. */
  --bg: var(--ls-canvas);
  --bg-warm: var(--ls-canvas-soft);
  --bg-card: #0b0d10;
  --text: #e7e9e8;
  --text-heading: var(--ls-platinum);
  --muted: #9da2a5;
  --faint: #858b90;
  --line: rgba(241, 242, 240, 0.06);
  --line-strong: rgba(241, 242, 240, 0.14);
  --nav-bg: rgba(5, 6, 7, 0.72);

  color-scheme: dark;
  background:
    radial-gradient(ellipse 82vw 72vh at -12% 24%, rgba(var(--ls-cobalt), 0.12), transparent 68%),
    radial-gradient(ellipse 78vw 76vh at 112% 72%, rgba(var(--ls-amber), 0.1), transparent 70%),
    linear-gradient(180deg, #06080b 0%, #0a0e14 38%, #100d0c 72%, #07090c 100%);
  color: var(--ls-platinum-muted);
}

body.about-page.living-spectrum-page::before {
  display: none;
}

body.about-page.living-spectrum-page main {
  background: transparent;
}

/* ── Nav: transparent over the masthead, glass once scrolled ── */

body.about-page.living-spectrum-page .site-nav {
  height: auto;
  min-height: 64px;
  padding: calc(10px + env(safe-area-inset-top)) clamp(20px, 3.4vw, 48px) 10px;
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background-color 380ms var(--ls-ease), border-color 380ms var(--ls-ease);
}

body.about-page.living-spectrum-page .site-nav.is-scrolled {
  background: rgba(6, 8, 11, 0.94);
  border-bottom: 1px solid rgba(241, 242, 240, 0.06);
}

body.about-page.living-spectrum-page .logo {
  color: var(--ls-platinum);
}

body.about-page.living-spectrum-page .logo::before {
  display: none;
}

body.about-page.living-spectrum-page .nav-center {
  gap: clamp(26px, 3vw, 42px);
}

body.about-page.living-spectrum-page .nav-center a {
  padding: 4px 2px;
  color: var(--ls-platinum-muted);
  opacity: 1;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: none;
}

body.about-page.living-spectrum-page .nav-center a::after {
  bottom: 6px;
  height: 1px;
  background: rgba(241, 242, 240, 0.6);
}

body.about-page.living-spectrum-page .nav-center a:hover,
body.about-page.living-spectrum-page .nav-center a.active {
  color: var(--ls-platinum);
  opacity: 1;
}

body.about-page.living-spectrum-page .nav-cart-btn {
  min-height: 40px;
  padding: 0 22px;
  background: rgba(241, 242, 240, 0.05);
  border: 1px solid rgba(241, 242, 240, 0.16);
  border-radius: 999px;
  color: var(--ls-platinum);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  transition: background-color 240ms ease, border-color 240ms ease, transform 380ms var(--ls-ease);
}

body.about-page.living-spectrum-page .nav-cart-btn:hover {
  background: rgba(241, 242, 240, 0.09);
  border-color: rgba(241, 242, 240, 0.3);
  letter-spacing: 0.14em;
  transform: translateY(-1px);
}

body.about-page.living-spectrum-page .nav-cart-btn #cart-count:not([hidden]) {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  margin-left: 8px;
  padding: 0 5px;
  place-items: center;
  background: var(--ls-platinum);
  border-radius: 999px;
  color: var(--ls-canvas);
  font-size: 9px;
}

body.about-page.living-spectrum-page .skip-link {
  background: var(--ls-platinum);
  border: 0;
  color: var(--ls-canvas);
}

body.about-page.living-spectrum-page :where(a, button):focus-visible {
  outline: 1px solid rgba(241, 242, 240, 0.92);
  outline-offset: 5px;
}

/* ── Ambient fields: fixed light the whole page scrolls through ── */

.ab-ambient {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ab-ambient__field {
  position: absolute;
  width: min(76vw, 1120px);
  height: 118vh;
  opacity: 0.2;
}

.ab-ambient__field--cobalt {
  top: -12vh;
  left: -44vw;
  background: radial-gradient(ellipse at center, rgba(var(--ls-cobalt), 0.46), rgba(var(--ls-cobalt), 0.16) 42%, transparent 80%);
}

.ab-ambient__field--amber {
  right: -45vw;
  bottom: -16vh;
  background: radial-gradient(ellipse at center, rgba(var(--ls-amber), 0.38), rgba(var(--ls-amber), 0.13) 42%, transparent 80%);
}

.ab-main {
  position: relative;
  z-index: 2;
}

.ab-main :where(h1, h2, h3) {
  margin-top: 0;
  color: var(--ls-platinum);
  font-family: var(--font-display);
  font-weight: 200;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.ab-main :where(p) {
  margin-top: 0;
  text-wrap: pretty;
}

/* About renders as one calm canvas, not a scroll-reveal slideshow.
   The shared reveal system starts every section invisible and fades it in
   on scroll; on these tall sections that left blank gaps between them that
   read as scroll stalls. Neutralise it here (about scope wins by
   specificity; the reveal JS only toggles the .visible class). Content is
   simply present as you scroll. */
body.about-page.living-spectrum-page .reveal,
body.about-page.living-spectrum-page .stagger-children > * {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ── Shared voice: eyebrows, deks, actions ── */

.ab-eyebrow {
  display: block;
  margin-bottom: 16px;
  color: rgba(235, 238, 240, 0.62);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.18em;
  line-height: 1.5;
  text-transform: uppercase;
}

.ab-dek {
  color: rgba(231, 235, 238, 0.62);
  font-size: clamp(14px, 1.12vw, 16px);
  font-weight: 300;
  line-height: 1.72;
}

.ab-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.ab-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 13px 0;
  color: var(--ls-platinum);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  line-height: 1.2;
  text-transform: uppercase;
  text-decoration: none;
}

.ab-action::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 7px;
  left: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.22;
  transition: opacity 240ms ease;
}

.ab-action:hover::after,
.ab-action:focus-visible::after {
  opacity: 0.92;
}

.ab-action--primary {
  min-width: 170px;
  padding-inline: 24px;
  background: rgba(239, 241, 240, 0.94);
  color: var(--ls-canvas);
  transition:
    background-color 240ms ease,
    color 240ms ease,
    transform 380ms var(--ls-ease);
}

.ab-action--primary::after {
  display: none;
}

.ab-action--primary:hover,
.ab-action--primary:focus-visible {
  background: var(--ls-platinum);
  transform: translateY(-2px);
}

/* ── Hero masthead ── */

.ab-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 92vh;
  min-height: 92dvh;
  padding: calc(112px + env(safe-area-inset-top)) var(--ls-page-gutter) clamp(48px, 7vh, 84px);
  isolation: isolate;
  overflow: hidden;
}

/* Depth stack: a wide cool wash from the upper left, a warm answer at the
   lower right, and a faint instrument ring anchoring the headline. */
.ab-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(ellipse 56% 48% at 18% 24%, rgba(var(--ls-cobalt), 0.14), transparent 70%),
    radial-gradient(ellipse 48% 44% at 88% 86%, rgba(var(--ls-amber), 0.1), transparent 72%),
    radial-gradient(ellipse 62% 54% at 50% 46%, rgba(212, 222, 232, 0.035), transparent 78%);
  pointer-events: none;
}

.ab-hero__ring {
  position: absolute;
  z-index: -1;
  top: 50%;
  right: calc(-1 * clamp(120px, 14vw, 260px));
  width: min(52vw, 760px);
  aspect-ratio: 1;
  border: 1px solid rgba(241, 242, 240, 0.05);
  border-radius: 50%;
  transform: translateY(-54%);
  pointer-events: none;
}

.ab-hero__ring::before,
.ab-hero__ring::after {
  content: '';
  position: absolute;
  border-radius: 50%;
}

.ab-hero__ring::before {
  inset: clamp(36px, 4.4vw, 76px);
  border: 1px solid rgba(241, 242, 240, 0.035);
}

.ab-hero__ring::after {
  top: 11%;
  left: 16%;
  width: 7px;
  height: 7px;
  background: rgba(var(--ls-cobalt), 0.85);
  box-shadow: 0 0 18px rgba(var(--ls-cobalt), 0.5);
}

.ab-hero__copy {
  width: min(100%, 760px);
}

.ab-hero__copy > * {
  animation: ab-copy-in 800ms var(--ls-ease) both;
}

.ab-hero__copy > *:nth-child(1) { animation-delay: 60ms; }
.ab-hero__copy > *:nth-child(2) { animation-delay: 150ms; }
.ab-hero__copy > *:nth-child(3) { animation-delay: 240ms; }
.ab-hero__copy > *:nth-child(4) { animation-delay: 330ms; }

.ab-hero h1 {
  margin-bottom: 24px;
  font-size: clamp(48px, 5.6vw, 82px);
  line-height: 0.98;
}

.ab-hero h1 span {
  display: block;
  color: rgba(233, 237, 240, 0.5);
}

.ab-hero__dek {
  max-width: 52ch;
  margin-bottom: 34px;
  color: rgba(239, 241, 240, 0.78);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 300;
  line-height: 1.66;
}

@keyframes ab-copy-in {
  from {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Ledger: the standard, stated as numbers on glass. */
.ab-hero__ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: min(100%, 980px);
  margin-top: clamp(48px, 7vh, 88px);
  padding: clamp(20px, 2.2vw, 30px) clamp(18px, 2vw, 30px);
  background:
    linear-gradient(135deg, rgba(235, 242, 248, 0.055) 0%, rgba(255, 255, 255, 0.012) 55%, rgba(230, 181, 132, 0.035) 100%),
    rgba(12, 16, 22, 0.3);
  border-radius: 22px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.1) inset,
    0 -1px 0 rgba(255, 255, 255, 0.02) inset,
    0 22px 48px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  animation: ab-copy-in 800ms var(--ls-ease) 420ms both;
}

.ab-hero__stat {
  position: relative;
  padding: 4px clamp(14px, 1.8vw, 26px);
}

.ab-hero__stat + .ab-hero__stat::before {
  content: '';
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(241, 242, 240, 0.14), transparent);
}

.ab-hero__stat-value {
  display: block;
  margin-bottom: 8px;
  color: var(--ls-platinum);
  font-family: var(--font-mono);
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.ab-hero__stat-label {
  display: block;
  color: rgba(228, 233, 237, 0.5);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* ── Section shell ── */

.ab-section {
  position: relative;
  width: min(100%, 1420px);
  margin: 0 auto;
  padding: clamp(84px, 11vh, 124px) var(--ls-page-gutter) 0;
}

/* Centered chapter header: used where the content below is symmetric. */
.ab-header--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 760px;
  margin: 0 auto clamp(40px, 5.5vh, 60px);
  text-align: center;
}

.ab-header--center h2 {
  margin-bottom: 0;
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1.03;
}

.ab-header--center .ab-dek {
  max-width: 56ch;
  margin-top: 18px;
}

/* Eyebrow flourish: a hairline on either side, like an instrument label. */
.ab-eyebrow--ruled {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

.ab-eyebrow--ruled::before,
.ab-eyebrow--ruled::after {
  content: '';
  width: clamp(28px, 4vw, 56px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 231, 237, 0.35));
}

.ab-eyebrow--ruled::after {
  background: linear-gradient(90deg, rgba(224, 231, 237, 0.35), transparent);
}

/* ── Principles band: copy left, numbered proof rows right ── */

.ab-band {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  column-gap: clamp(56px, 7vw, 120px);
  align-items: start;
}

.ab-band__copy h2 {
  max-width: 12ch;
  margin-bottom: 18px;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.04;
}

.ab-band__copy .ab-dek {
  max-width: 40ch;
}

.ab-band__proof {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ab-band__row {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  column-gap: 18px;
  align-items: start;
  padding: clamp(20px, 2vw, 26px) 14px clamp(20px, 2vw, 26px) 12px;
  border-radius: 14px;
  transition: background-color 240ms ease;
}

.ab-band__row::before {
  content: '';
  position: absolute;
  top: 0;
  right: 12px;
  left: 12px;
  height: 1px;
  background: linear-gradient(90deg, rgba(224, 231, 237, 0.18), rgba(224, 231, 237, 0.05) 70%, transparent);
}

.ab-band__row:last-child::after {
  content: '';
  position: absolute;
  right: 12px;
  bottom: 0;
  left: 12px;
  height: 1px;
  background: linear-gradient(90deg, rgba(224, 231, 237, 0.18), rgba(224, 231, 237, 0.05) 70%, transparent);
}

.ab-band__row:hover {
  background-color: rgba(241, 242, 240, 0.025);
}

.ab-band__index {
  padding-top: 4px;
  color: rgba(225, 231, 236, 0.42);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.15em;
}

.ab-band__row--cobalt .ab-band__index {
  color: rgba(var(--ls-cobalt), 0.85);
}

.ab-band__row--amber .ab-band__index {
  color: rgba(var(--ls-amber), 0.85);
}

.ab-band__row h3 {
  margin-bottom: 6px;
  font-size: clamp(17px, 1.4vw, 21px);
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.ab-band__row p {
  max-width: 46ch;
  margin-bottom: 0;
  color: rgba(222, 228, 233, 0.62);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.62;
}

.ab-band__tag {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  margin-top: 2px;
  padding: 0 12px;
  border: 1px solid rgba(241, 242, 240, 0.14);
  border-radius: 999px;
  color: rgba(235, 238, 240, 0.6);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 240ms ease, color 240ms ease;
}

.ab-band__row:hover .ab-band__tag {
  border-color: rgba(241, 242, 240, 0.3);
  color: rgba(235, 238, 240, 0.85);
}

.ab-band__row--cobalt:hover .ab-band__tag {
  border-color: rgba(var(--ls-cobalt), 0.4);
}

.ab-band__row--amber:hover .ab-band__tag {
  border-color: rgba(var(--ls-amber), 0.4);
}

/* ── Operating system: glass panel with an anchored progress rail ── */

.ab-line {
  position: relative;
}

/* Light behind the glass: the blur needs something to refract. */
.ab-line::before,
.ab-line::after {
  content: '';
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.ab-line::before {
  top: 24%;
  left: 2%;
  width: 44%;
  height: 52%;
  background: radial-gradient(ellipse at center, rgba(var(--ls-cobalt), 0.26), transparent 68%);
  filter: blur(72px);
}

.ab-line::after {
  right: 0;
  bottom: 4%;
  width: 42%;
  height: 48%;
  background: radial-gradient(ellipse at center, rgba(var(--ls-amber), 0.22), transparent 68%);
  filter: blur(78px);
}

.ab-line .ab-header--center {
  position: relative;
  z-index: 2;
}

.ab-line__panel {
  position: relative;
  z-index: 1;
  padding: clamp(40px, 4.8vw, 64px) clamp(34px, 4.4vw, 64px) clamp(36px, 4vw, 56px);
  background:
    linear-gradient(135deg, rgba(235, 242, 248, 0.09) 0%, rgba(180, 198, 215, 0.03) 38%, rgba(255, 255, 255, 0.016) 62%, rgba(230, 181, 132, 0.05) 100%),
    rgba(12, 16, 22, 0.3);
  border-radius: clamp(30px, 3.2vw, 46px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.14) inset,
    0 -1px 0 rgba(255, 255, 255, 0.03) inset,
    -22px 26px 90px rgba(19, 57, 102, 0.17),
    24px 32px 96px rgba(91, 52, 25, 0.13),
    0 28px 56px rgba(0, 0, 0, 0.32),
    0 64px 150px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(26px) saturate(150%) brightness(1.05);
  -webkit-backdrop-filter: blur(26px) saturate(150%) brightness(1.05);
  isolation: isolate;
  transform: translateZ(0);
}

/* Specular pass: cool key light upper left, warm kiss in the far corner. */
.ab-line__sheen {
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(58% 44% at 12% -4%, rgba(255, 255, 255, 0.095), transparent 62%),
    linear-gradient(116deg, transparent 32%, rgba(255, 255, 255, 0.032) 44%, transparent 56%),
    radial-gradient(42% 36% at 96% 104%, rgba(var(--ls-amber), 0.055), transparent 66%);
  pointer-events: none;
}

.ab-line__panel::before {
  content: '';
  position: absolute;
  z-index: 5;
  inset: 0;
  padding: 1px;
  background: linear-gradient(
    138deg,
    rgba(255, 255, 255, 0.34) 0%,
    rgba(255, 255, 255, 0.09) 24%,
    rgba(255, 255, 255, 0.025) 50%,
    rgba(255, 255, 255, 0.11) 78%,
    rgba(255, 235, 216, 0.25) 100%
  );
  border-radius: inherit;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.ab-line__panel::after {
  content: '';
  position: absolute;
  z-index: -1;
  right: 8%;
  bottom: -54px;
  left: 8%;
  height: 72px;
  background: radial-gradient(ellipse at center, rgba(103, 126, 151, 0.15), rgba(0, 0, 0, 0.24) 52%, transparent 82%);
  opacity: 0.72;
  transform: scaleX(1.08);
  pointer-events: none;
}

/* Anchored rail: the line and its nodes share one geometry. */
.ab-line__steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-top: 66px;
  margin: 0;
  list-style: none;
}

.ab-line__rail {
  position: absolute;
  z-index: 0;
  top: 20px;
  right: 12.5%;
  left: 12.5%;
  display: flex;
  height: 1px;
}

.ab-line__rail-segment {
  flex: 1;
  height: 1px;
}

.ab-line__rail-segment--cobalt {
  background: linear-gradient(90deg, rgba(var(--ls-cobalt), 0.55), rgba(224, 231, 237, 0.3));
  box-shadow: 0 0 14px rgba(var(--ls-cobalt), 0.22);
}

.ab-line__rail-segment--mid {
  background: linear-gradient(90deg, rgba(224, 231, 237, 0.3), rgba(224, 231, 237, 0.3));
}

.ab-line__rail-segment--amber {
  background: linear-gradient(90deg, rgba(224, 231, 237, 0.3), rgba(var(--ls-amber), 0.55));
  box-shadow: 0 0 14px rgba(var(--ls-amber), 0.2);
}

.ab-line__step {
  position: relative;
  padding: 0 clamp(10px, 1.6vw, 26px);
  text-align: center;
}

.ab-line__node {
  position: absolute;
  top: -52px;
  left: 50%;
  display: grid;
  width: 13px;
  height: 13px;
  place-items: center;
  background: var(--ls-canvas);
  border: 1px solid rgba(241, 242, 240, 0.45);
  border-radius: 50%;
  transform: translateX(-50%);
}

.ab-line__node::before {
  content: '';
  width: 5px;
  height: 5px;
  background: rgba(241, 242, 240, 0.85);
  border-radius: 50%;
}

.ab-line__step:nth-child(2) .ab-line__node {
  border-color: rgba(var(--ls-cobalt), 0.6);
  box-shadow: 0 0 16px rgba(var(--ls-cobalt), 0.3);
}

.ab-line__step:nth-child(2) .ab-line__node::before {
  background: rgba(var(--ls-cobalt), 0.95);
}

.ab-line__step:nth-child(5) .ab-line__node {
  border-color: rgba(var(--ls-amber), 0.6);
  box-shadow: 0 0 16px rgba(var(--ls-amber), 0.28);
}

.ab-line__step:nth-child(5) .ab-line__node::before {
  background: rgba(var(--ls-amber), 0.95);
}

.ab-line__kicker {
  display: block;
  margin-bottom: 12px;
  color: rgba(228, 233, 237, 0.48);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ab-line__step h3 {
  margin-bottom: 10px;
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: -0.025em;
  line-height: 1.14;
}

.ab-line__detail {
  max-width: 30ch;
  margin: 0 auto;
  color: rgba(222, 228, 233, 0.58);
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.64;
}

/* ── Position: statement left, stance ledger right ── */

.ab-position {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(56px, 7vw, 120px);
  align-items: start;
}

.ab-position__copy {
  position: sticky;
  top: 108px;
}

.ab-position__copy h2 {
  max-width: 14ch;
  margin-bottom: 20px;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.04;
}

.ab-position__copy .ab-dek {
  max-width: 44ch;
}

.ab-stance {
  display: grid;
  row-gap: 14px;
}

.ab-stance__card {
  --stance-accent: 241, 242, 240;
  position: relative;
  padding: clamp(22px, 2.4vw, 30px) clamp(22px, 2.4vw, 32px);
  background:
    linear-gradient(135deg, rgba(235, 242, 248, 0.045) 0%, rgba(255, 255, 255, 0.01) 60%),
    rgba(12, 16, 22, 0.42);
  border: 1px solid rgba(241, 242, 240, 0.07);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
  transition: border-color 240ms ease, transform 380ms var(--ls-ease);
}

.ab-stance__card::before {
  content: '';
  position: absolute;
  top: 18%;
  bottom: 18%;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(var(--stance-accent), 0.55), transparent);
}

.ab-stance__card--cobalt {
  --stance-accent: var(--ls-cobalt);
}

.ab-stance__card--amber {
  --stance-accent: var(--ls-amber);
}

.ab-stance__card:hover {
  border-color: rgba(var(--stance-accent), 0.22);
  transform: translateY(-2px);
}

.ab-stance__kicker {
  display: block;
  margin-bottom: 10px;
  color: rgba(228, 233, 237, 0.48);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ab-stance__card h3 {
  margin-bottom: 8px;
  font-size: clamp(17px, 1.45vw, 21px);
  letter-spacing: -0.025em;
  line-height: 1.18;
}

.ab-stance__card p {
  margin-bottom: 0;
  max-width: 52ch;
  color: rgba(222, 228, 233, 0.6);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.66;
}

/* ── Pillars: five accents, one language ── */

.ab-pillars__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

/* RGB twins of the us.css pillar hexes, for alpha layering. */
.ab-pillar[data-pillar='1'] { --pa-rgb: 122, 138, 152; }
.ab-pillar[data-pillar='2'] { --pa-rgb: 201, 185, 154; }
.ab-pillar[data-pillar='3'] { --pa-rgb: 168, 180, 160; }
.ab-pillar[data-pillar='4'] { --pa-rgb: 184, 168, 184; }
.ab-pillar[data-pillar='5'] { --pa-rgb: 196, 169, 98; }

.ab-pillar {
  position: relative;
  overflow: hidden;
  padding: 26px 22px 24px;
  background:
    linear-gradient(180deg, rgba(235, 242, 248, 0.035), rgba(255, 255, 255, 0.008) 55%),
    rgba(12, 16, 22, 0.42);
  border: 1px solid rgba(241, 242, 240, 0.07);
  border-radius: 18px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
  transition: border-color 240ms ease, transform 380ms var(--ls-ease), box-shadow 380ms var(--ls-ease);
}

/* us.css paints [data-pillar]::before with the pillar gradient; give it the
   top hairline geometry so each card carries its accent. */
.ab-pillar::before {
  content: '';
  position: absolute;
  top: 0;
  right: 18px;
  left: 18px;
  height: 1px;
  opacity: 0.75;
}

.ab-pillar::after {
  content: '';
  position: absolute;
  top: -34px;
  left: 50%;
  width: 120px;
  height: 68px;
  background: radial-gradient(ellipse at center, rgba(var(--pa-rgb, 241, 242, 240), 0.26), transparent 72%);
  opacity: 0.5;
  transform: translateX(-50%);
  transition: opacity 380ms ease;
  pointer-events: none;
}

.ab-pillar:hover {
  border-color: rgba(var(--pa-rgb, 241, 242, 240), 0.34);
  box-shadow: 0 26px 56px rgba(0, 0, 0, 0.4);
  transform: translateY(-4px);
}

.ab-pillar:hover::after {
  opacity: 0.85;
}

.ab-pillar__num {
  display: block;
  margin-bottom: 30px;
  color: var(--p-accent, #f1f2f0);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.2em;
}

.ab-pillar h3 {
  margin-bottom: 8px;
  font-size: 19px;
  letter-spacing: -0.025em;
}

.ab-pillar p {
  margin-bottom: 0;
  color: rgba(222, 228, 233, 0.56);
  font-size: 12.5px;
  font-weight: 300;
  line-height: 1.6;
}

/* ── Finale ── */

.ab-cart-label--mobile {
  display: none;
}

.ab-finale {
  position: relative;
  display: grid;
  width: 100%;
  margin-top: clamp(72px, 10vh, 110px);
  overflow: hidden;
  place-items: center;
  padding: clamp(96px, 13vh, 150px) var(--ls-page-gutter) clamp(84px, 11vh, 128px);
  text-align: center;
  background: radial-gradient(ellipse 54% 46% at 50% 56%, rgba(199, 208, 218, 0.055), transparent 70%);
  isolation: isolate;
}

.ab-finale::before {
  content: '';
  position: absolute;
  top: 0;
  right: var(--ls-page-gutter);
  left: var(--ls-page-gutter);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 231, 237, 0.14) 18%, rgba(224, 231, 237, 0.14) 82%, transparent);
}

.ab-finale__atmosphere {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(221, 227, 233, 0.035), transparent 56%);
  pointer-events: none;
}

.ab-finale__atmosphere span {
  position: absolute;
  top: 50%;
  width: min(68vw, 940px);
  height: min(72vw, 880px);
  border-radius: 50%;
  opacity: 0.26;
  transform: translateY(-50%);
}

.ab-finale__atmosphere span:first-child {
  left: -18%;
  background: radial-gradient(circle at center, rgba(var(--ls-cobalt), 0.34), rgba(var(--ls-cobalt), 0.11) 44%, transparent 80%);
}

.ab-finale__atmosphere span:last-child {
  right: -18%;
  background: radial-gradient(circle at center, rgba(var(--ls-amber), 0.31), rgba(var(--ls-amber), 0.1) 44%, transparent 80%);
}

.ab-finale__content {
  position: relative;
  z-index: 3;
  width: min(100%, 850px);
}

.ab-finale__mark {
  margin-bottom: 32px;
  color: rgba(232, 235, 237, 0.58);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ab-finale__content h2 {
  margin-bottom: 26px;
  font-size: clamp(40px, 4vw, 58px);
  line-height: 1;
}

.ab-finale__content > p:not(.ab-finale__mark) {
  max-width: 600px;
  margin: 0 auto;
  color: rgba(229, 233, 235, 0.58);
  font-size: clamp(14px, 1.35vw, 17px);
  font-weight: 300;
  line-height: 1.75;
}

.ab-finale__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 26px;
  margin-top: 44px;
}

/* ── Footer coda ── */

body.about-page.living-spectrum-page > footer {
  display: block;
  margin-top: 0;
  padding: clamp(40px, 5.5vh, 56px) var(--ls-page-gutter) calc(30px + env(safe-area-inset-bottom, 0px));
  background: transparent;
  border-top: 1px solid rgba(241, 242, 240, 0.05);
}

body.about-page.living-spectrum-page > footer .footer-inner {
  display: flex;
  max-width: none;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}

body.about-page.living-spectrum-page > footer .logo {
  color: rgba(241, 242, 240, 0.82);
  font-size: 11px;
  letter-spacing: 0.14em;
  opacity: 1;
}

body.about-page.living-spectrum-page > footer .footer-nav {
  justify-content: center;
  gap: 6px 28px;
  margin-top: 18px;
}

body.about-page.living-spectrum-page > footer .footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: rgba(235, 238, 240, 0.52);
  opacity: 1;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: none;
  transition: color 240ms ease;
}

body.about-page.living-spectrum-page > footer .footer-nav a:hover {
  color: var(--ls-platinum);
}

body.about-page.living-spectrum-page > footer .footer-channels {
  display: flex;
  gap: 12px;
  margin-top: 14px;
}

body.about-page.living-spectrum-page > footer .footer-channel {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(241, 242, 240, 0.12);
  border-radius: 50%;
  color: rgba(241, 242, 240, 0.66);
  cursor: pointer;
  transition: color 240ms ease, border-color 240ms ease, transform 380ms var(--ls-ease);
}

body.about-page.living-spectrum-page > footer .footer-channel svg {
  width: 13px;
  height: 13px;
  fill: currentColor;
}

body.about-page.living-spectrum-page > footer .footer-channel:hover,
body.about-page.living-spectrum-page > footer .footer-channel:focus-visible {
  border-color: rgba(241, 242, 240, 0.34);
  color: var(--ls-platinum);
  transform: translateY(-1px);
}

body.about-page.living-spectrum-page > footer .footer-legal {
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
  opacity: 0.36;
}

body.about-page.living-spectrum-page > footer .footer-compliance {
  display: block;
  max-width: 62ch;
  margin: 8px auto 0;
  font-size: 8.5px;
  line-height: 1.7;
  text-align: center;
  opacity: 0.26;
}

/* ── Tablet ── */

@media (min-width: 768px) and (max-width: 1100px) {
  body.about-page.living-spectrum-page {
    --ls-page-gutter: clamp(32px, 5vw, 54px);
  }

  .ab-hero__ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 18px;
  }

  .ab-hero__stat:nth-child(3)::before {
    display: none;
  }

  .ab-pillars__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ab-line__steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 44px;
  }

  .ab-line__rail {
    display: none;
  }

  .ab-line__node {
    position: static;
    margin: 0 auto 14px;
    transform: none;
  }
}

/* ── Phone disclosure controls ──
   .ab-m-head (an h3 wrapping button.ab-m-row) is built by the inline script
   in us/about.html, on phones only. Hidden everywhere by default: the one way
   it can exist at a desktop width is a phone load followed by a resize, and
   the desktop composition has to come back intact when it does. The original
   headings are never moved, so hiding this restores the page exactly. */

body.about-page.living-spectrum-page .ab-m-head {
  display: none;
}

/* ── Phones ── */

/* Phone-only hero media strip (see us/about.html). */
.ab-hero__media { display: none; }

@media (max-width: 767px) {

  /* ── Hero presence: the standards bench above the copy, feathered into
     the canvas — the same film-above-copy composition as the home hero. */
  .ab-hero__media {
    display: block;
    position: relative;
    margin: 0 calc(var(--ls-page-gutter) * -1) 22px;
    height: min(46vw, 210px);
    overflow: hidden;
  }

  .ab-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 42%;
  }

  .ab-hero__media::after {
    content: '';
    position: absolute;
    inset: auto 0 -1px;
    height: 46%;
    background: linear-gradient(180deg, transparent, rgba(7, 9, 12, 0.6) 55%, #07090c 100%);
    pointer-events: none;
  }

  /* ── Pillars wear their own colors: accent edge + tinted numeral via the
     --p-accent hook us.css already assigns per [data-pillar]. */
  .ab-pillar {
    border-left: 2px solid var(--p-accent, rgba(241, 242, 240, 0.2));
    border-radius: 14px;
  }

  .ab-pillar__num {
    color: var(--p-accent, currentColor);
  }

  body.about-page.living-spectrum-page {
    --ls-page-gutter: clamp(20px, 6.2vw, 28px);
  }

  body.about-page.living-spectrum-page .site-nav {
    height: var(--chrome-total, 64px);
    min-height: 0;
    padding: env(safe-area-inset-top, 0px) 18px 0;
    align-items: center;
  }

  body.about-page.living-spectrum-page .site-nav.is-scrolled {
    background: rgba(6, 8, 11, 0.95);
  }

  /* Reskin the legacy dropdown card to the cool graphite palette. */
  body.about-page.living-spectrum-page .mobile-nav {
    top: calc(64px + env(safe-area-inset-top));
    max-height: calc(100svh - 66px - env(safe-area-inset-top, 0px));
    border-bottom: 1px solid rgba(241, 242, 240, 0.08);
    background: linear-gradient(180deg, rgba(11, 14, 19, 0.985), rgba(7, 9, 12, 0.99));
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.56);
  }

  body.about-page.living-spectrum-page .mobile-nav-kicker {
    color: rgba(226, 233, 239, 0.5);
  }

  body.about-page.living-spectrum-page .mobile-nav-links a,
  body.about-page.living-spectrum-page .mobile-nav-links button {
    background: rgba(241, 242, 240, 0.025);
    border: 1px solid rgba(241, 242, 240, 0.07);
    color: var(--ls-platinum);
  }

  body.about-page.living-spectrum-page .mobile-nav-links a.is-active {
    border-color: rgba(var(--ls-cobalt), 0.35);
  }

  /* style.css hides .nav-center and .nav-cta on phones, so the cart control is
     the only nav affordance left beside the hamburger. It ships at 10px/40px,
     missing both the 11px label floor and the 44px tap target. */
  body.about-page.living-spectrum-page .nav-cart-btn {
    min-height: var(--m-tap, 44px);
    padding: 0 16px;
    font-size: var(--m-text-meta, 11px);
  }

  .ab-ambient__field {
    width: 96vw;
    opacity: 0.12;
  }

  .ab-ambient__field--cobalt {
    left: -76vw;
  }

  .ab-ambient__field--amber {
    right: -78vw;
  }

  .ab-hero {
    min-height: auto;
    padding-top: calc(96px + env(safe-area-inset-top));
    padding-bottom: 56px;
  }

  .ab-hero__ring {
    top: 8%;
    right: -46vw;
    width: 86vw;
    transform: none;
  }

  .ab-hero h1 {
    margin-bottom: 16px;
    font-size: clamp(42px, 12.6vw, 56px);
    line-height: 0.98;
  }

  .ab-hero__dek {
    max-width: 38ch;
    margin-bottom: 24px;
    font-size: max(15px, var(--m-text-body, 15px));
    line-height: 1.66;
  }

  .ab-action {
    min-height: 44px;
    font-size: 11px;
  }

  .ab-action--primary {
    min-width: 154px;
    padding-inline: 18px;
  }

  .ab-hero__ledger {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 20px;
    margin-top: 44px;
    padding: 20px 8px;
    border-radius: 18px;
  }

  .ab-hero__stat {
    padding: 2px 16px;
  }

  .ab-hero__stat:nth-child(3)::before {
    display: none;
  }

  .ab-hero__stat-value {
    font-size: 19px;
  }

  /* 2x2 ledger: the inherited rule only draws the column divider, so row two
     floated free. Add the row hairline, centred in the 20px row-gap. */
  .ab-hero__stat:nth-child(n + 3)::after {
    content: '';
    position: absolute;
    top: -10px;
    right: 10%;
    left: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(241, 242, 240, 0.13), transparent);
  }

  /* The ledger is a floating surface, so it keeps its glass. Without
     backdrop-filter the 0.3 alpha wash is too thin to carry the numbers. */
  @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .ab-hero__ledger {
      background: rgba(12, 16, 22, 0.82);
    }
  }

  /* ── Chapter rhythm ──────────────────────────────────────────────
     Four chapters run down one column. Desktop separates them with wide
     whitespace and side-by-side grids; collapsed to one column that reads
     as a single undifferentiated scroll, which is what made the page feel
     like a brochure through a narrow window. Two centred heads
     (#operating-system, #pillars) against two left heads (#principles,
     #position) compounded it. One left-aligned head language, plus a
     kicker rule that spans the column, gives every chapter a visible
     start without adding a single box. */
  .ab-section {
    padding-top: var(--m-section, 56px);
  }

  .ab-header--center {
    align-items: stretch;
    max-width: none;
    margin: 0 0 24px;
    text-align: left;
  }

  .ab-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    font-size: var(--m-text-meta, 11px);
    letter-spacing: 0.16em;
  }

  .ab-eyebrow--ruled::before {
    display: none;
  }

  .ab-eyebrow::after,
  .ab-eyebrow--ruled::after {
    content: '';
    width: auto;
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, rgba(224, 231, 237, 0.3), transparent);
  }

  .ab-header--center h2 {
    font-size: clamp(30px, 8.4vw, 38px);
    line-height: 1.06;
  }

  .ab-dek {
    font-size: max(15px, var(--m-text-body, 15px));
    line-height: 1.7;
  }

  .ab-band {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 8px;
  }

  /* ch measures are a desktop device. At 32px type, 12ch is ~190px, so these
     heads wrapped to four ragged lines inside a ~280px column. */
  .ab-band__copy h2,
  .ab-position__copy h2 {
    max-width: none;
    font-size: clamp(30px, 8.4vw, 38px);
    line-height: 1.06;
  }

  .ab-band__row {
    grid-template-columns: 26px minmax(0, 1fr);
    padding: 18px 2px;
    border-radius: 0;
  }

  .ab-band__row h3 {
    margin-bottom: 7px;
    font-size: 19px;
  }

  .ab-band__row::before,
  .ab-band__row:last-child::after {
    right: 0;
    left: 0;
  }

  .ab-band__tag {
    grid-column: 2;
    justify-self: start;
    margin-top: 10px;
  }

  /* No heavy blur on phones: solid card, vertical step ledger. */
  .ab-line__panel {
    padding: 26px 20px 30px;
    background: rgba(13, 17, 23, 0.88);
    border: 1px solid rgba(241, 242, 240, 0.08);
    border-radius: 22px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .ab-line__panel::before,
  .ab-line__panel::after,
  .ab-line__sheen {
    display: none;
  }

  .ab-line__steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    padding-top: 0;
  }

  .ab-line__rail {
    top: 6px;
    right: auto;
    bottom: 6px;
    left: 6px;
    display: flex;
    width: 1px;
    height: auto;
    flex-direction: column;
  }

  .ab-line__rail-segment {
    width: 1px;
    height: auto;
  }

  .ab-line__step {
    z-index: 1;
    display: grid;
    grid-template-columns: 13px minmax(0, 1fr);
    column-gap: 16px;
    padding: 0 0 28px;
    text-align: left;
  }

  .ab-line__step:last-child {
    padding-bottom: 0;
  }

  .ab-line__node {
    position: static;
    z-index: 2;
    margin-top: 3px;
    transform: none;
  }

  .ab-line__kicker,
  .ab-line__step h3,
  .ab-line__detail {
    grid-column: 2;
  }

  .ab-line__kicker {
    grid-row: 1;
    margin-bottom: 8px;
  }

  .ab-line__detail {
    max-width: none;
    margin: 0;
  }

  /* The vertical timeline is this page's reference pattern for real mobile
     transformation. Structure is untouched; only its type scale moves, so it
     stays in step with the other chapters. */
  .ab-line__step h3 {
    margin-bottom: 8px;
    font-size: 19px;
  }

  .ab-position {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }

  .ab-position__copy {
    position: static;
  }

  /* Compact value cards: desktop padding eats a third of a phone column. */
  .ab-stance {
    row-gap: 10px;
  }

  .ab-stance__card {
    padding: 18px 18px 20px;
    border-radius: var(--m-radius, 14px);
  }

  .ab-stance__card h3 {
    margin-bottom: 7px;
    font-size: 19px;
  }

  /* ── Chapter disclosure: one open at a time ──────────────────────
     #principles and #position are the page's two argument chapters, and
     both are the same shape: a claim, then a paragraph proving it, three
     deep. Stacked they ran ~940px and ~1080px — a screen each of prose
     with no way to scan it. So the claims stay on the page and the proof
     is disclosed: opening one closes its siblings and the opened row is
     pulled to the top, so a chapter costs one screen and you never scroll
     back up to find what you just opened.

     They are deliberately not the same component. Principles is a hairline
     ledger, echoing the Operating System's numeral-left timeline directly
     above it. Position is a sheet that earns its glass by opening. Two
     chapters, two textures, one mechanic — a page of identical grey bars
     is the failure mode this is avoiding, not the goal.

     Everything here is gated on .ab-m, which only the phone build adds, so
     the no-JS phone rendering stays exactly what ships today. */

  body.about-page.living-spectrum-page.ab-m .ab-m-head {
    display: block;
    margin: 0;
  }

  body.about-page.living-spectrum-page.ab-m [data-ab-open] .ab-m-head {
    margin-bottom: 7px;
  }

  body.about-page.living-spectrum-page.ab-m .ab-m-row {
    display: flex;
    width: 100%;
    min-height: var(--m-tap, 44px);
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    cursor: pointer;
    transition: opacity 120ms var(--ls-ease);
  }

  /* Press state. The row's own surface is the wrong thing to tint here: the
     button spans one grid column in Principles and the whole card in
     Position, so a background flash would land differently in each. Dimming
     the lockup reads the same in both. */
  body.about-page.living-spectrum-page.ab-m .ab-m-row:active {
    opacity: 0.6;
  }

  body.about-page.living-spectrum-page.ab-m .ab-m-row:focus-visible {
    border-radius: 4px;
    outline: 2px solid rgba(var(--ls-cobalt), 0.7);
    outline-offset: 4px;
  }

  body.about-page.living-spectrum-page.ab-m .ab-m-row__label {
    flex: 1;
  }

  body.about-page.living-spectrum-page.ab-m .ab-m-row__chev {
    display: flex;
    flex: 0 0 14px;
    width: 14px;
    color: rgba(235, 238, 240, 0.42);
    transition: transform 240ms var(--ls-ease), color 240ms var(--ls-ease);
  }

  body.about-page.living-spectrum-page.ab-m .ab-m-row__chev svg {
    width: 100%;
    height: auto;
  }

  body.about-page.living-spectrum-page.ab-m [data-ab-open] .ab-m-row__chev {
    color: var(--ls-platinum);
    transform: rotate(180deg);
  }

  /* The built head speaks for the original heading on phones. The original
     stays in the DOM and is what desktop renders. */
  body.about-page.living-spectrum-page.ab-m .ab-band__row article > h3:not(.ab-m-head),
  body.about-page.living-spectrum-page.ab-m .ab-stance__card > h3:not(.ab-m-head) {
    display: none;
  }

  body.about-page.living-spectrum-page.ab-m .ab-band__row:not([data-ab-open]) article > p,
  body.about-page.living-spectrum-page.ab-m .ab-band__row:not([data-ab-open]) .ab-band__tag,
  body.about-page.living-spectrum-page.ab-m .ab-stance__card:not([data-ab-open]) > p {
    display: none;
  }

  /* The tag rides the same curve as its paragraph: the row discloses once,
     not in two pieces. */
  body.about-page.living-spectrum-page.ab-m .ab-band__row[data-ab-open] article > p,
  body.about-page.living-spectrum-page.ab-m .ab-band__row[data-ab-open] .ab-band__tag,
  body.about-page.living-spectrum-page.ab-m .ab-stance__card[data-ab-open] > p {
    animation: ab-m-panel-in 240ms var(--ls-ease) both;
  }

  @keyframes ab-m-panel-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
  }

  /* ── Principles: the hairline ledger ── */

  /* The row's 18px block padding moves onto the button's 44px target, so the
     ledger tightens to a scannable rhythm without losing the hit area. */
  body.about-page.living-spectrum-page.ab-m .ab-band__row {
    padding-top: 6px;
    padding-bottom: 6px;
    scroll-margin-top: 80px;
  }

  body.about-page.living-spectrum-page.ab-m .ab-band__row[data-ab-open] {
    padding-bottom: 18px;
  }

  /* Match the numeral to the button box rather than to a cap-height guess, so
     it stays on the claim's optical line at any type size. */
  body.about-page.living-spectrum-page.ab-m .ab-band__row .ab-band__index {
    display: flex;
    min-height: var(--m-tap, 44px);
    align-items: center;
    padding-top: 0;
  }

  /* ── Position: the sheet that earns its glass ── */

  body.about-page.living-spectrum-page.ab-m .ab-stance__card {
    scroll-margin-top: 80px;
  }

  /* Closed: a plain compact surface. Glass is spent on the one open sheet,
     not washed across three cards at once. */
  body.about-page.living-spectrum-page.ab-m .ab-stance__card:not([data-ab-open]) {
    padding-bottom: 14px;
    background: linear-gradient(180deg, rgba(241, 242, 240, 0.032), rgba(241, 242, 240, 0.012));
    box-shadow: none;
  }

  body.about-page.living-spectrum-page.ab-m .ab-stance__card:not([data-ab-open]) .ab-stance__kicker {
    margin-bottom: 6px;
  }

  /* Open: the desktop liquid-glass optics, phone-tuned — the 135deg cool ->
     warm sweep, the inset top edge light, and the cobalt-left / warm-right
     ambient pair. No backdrop-filter: this sits directly under a paragraph of
     body copy, and About's phone layer already carries the no-blur variant of
     the material by design (see .ab-line__panel above). The sweep, the edge
     light and the ambients are what make it read as the same glass. */
  body.about-page.living-spectrum-page.ab-m .ab-stance__card[data-ab-open] {
    border-color: rgba(241, 242, 240, 0.06);
    background:
      linear-gradient(135deg, rgba(235, 242, 248, 0.09) 0%, rgba(180, 198, 215, 0.03) 38%, rgba(255, 255, 255, 0.016) 62%, rgba(230, 181, 132, 0.05) 100%),
      rgba(12, 16, 22, 0.5);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.14) inset,
      0 -1px 0 rgba(255, 255, 255, 0.03) inset,
      -14px 16px 54px rgba(19, 57, 102, 0.2),
      16px 20px 58px rgba(91, 52, 25, 0.15),
      0 20px 40px rgba(0, 0, 0, 0.34);
  }

  /* The specular edge ring, on the same masked-inlay recipe as
     .ab-line__panel::before. ::before is already the pillar accent bar, so
     the ring takes ::after and the accent is lifted above it — the accent is
     the card's identity and has to stay on top of the glass edge. */
  body.about-page.living-spectrum-page.ab-m .ab-stance__card[data-ab-open]::after {
    content: '';
    position: absolute;
    z-index: 1;
    inset: 0;
    padding: 1px;
    background: linear-gradient(
      138deg,
      rgba(255, 255, 255, 0.34) 0%,
      rgba(255, 255, 255, 0.09) 24%,
      rgba(255, 255, 255, 0.025) 50%,
      rgba(255, 255, 255, 0.11) 78%,
      rgba(255, 235, 216, 0.25) 100%
    );
    border-radius: inherit;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
  }

  body.about-page.living-spectrum-page.ab-m .ab-stance__card[data-ab-open]::before {
    z-index: 2;
  }

  /* A side-scrolling rail (client direction): full-size pillar cards you
     swipe through, matching the site's phone grammar. */
  .ab-pillars__grid {
    display: flex;
    gap: 10px;
    margin: 0 calc(var(--ls-page-gutter) * -1);
    padding: 0 var(--ls-page-gutter) 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: var(--ls-page-gutter);
    scrollbar-width: none;
  }

  .ab-pillars__grid::-webkit-scrollbar {
    display: none;
  }

  .ab-pillars__grid .ab-pillar {
    flex: 0 0 min(74vw, 300px);
    scroll-snap-align: start;
  }

  .ab-pillar {
    width: auto;
    padding: 18px 14px 16px;
    border-radius: var(--m-radius, 14px);
  }

  .ab-pillar__num {
    margin-bottom: 14px;
  }

  .ab-pillar h3 {
    margin-bottom: 6px;
  }

  /* Five items in a two-column grid always orphan the fifth, and a full-width
     card reads as "featured" by accident — Performance is not more important
     than Longevity. Cap the set with the Operating System's numeral-left
     ledger row instead, so the odd one out becomes deliberate. */
  .ab-pillar:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 14px;
    align-items: baseline;
    padding: 16px 14px 18px;
  }

  .ab-pillar:last-child .ab-pillar__num {
    margin-bottom: 0;
  }

  .ab-pillar:last-child h3,
  .ab-pillar:last-child p {
    grid-column: 2;
  }

  .ab-finale {
    margin-top: 40px;
    padding: 68px var(--ls-page-gutter) 84px;
  }

  .ab-finale__content h2 {
    font-size: clamp(32px, 9vw, 42px);
  }

  .ab-finale__mark {
    margin-bottom: 22px;
    font-size: var(--m-text-meta, 11px);
  }

  .ab-finale__content > p:not(.ab-finale__mark) {
    font-size: max(15px, var(--m-text-body, 15px));
    line-height: 1.7;
  }

  /* One closing action. The finale shipped the hero's exact button pair, so
     the page ended by asking the same question it opened with, twice over.
     Explore Compounds stays the closing action; the regimens route is kept
     (never delete content) but demoted to a quiet link, so the two read as
     action + escape hatch rather than two competing CTAs. */
  .ab-finale__cta {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    margin-top: 30px;
  }

  .ab-finale__cta .ab-action--primary {
    justify-content: center;
    width: 100%;
  }

  .ab-finale__cta .ab-action:not(.ab-action--primary) {
    align-self: center;
    min-height: var(--m-tap, 44px);
    padding-inline: 12px;
    color: rgba(235, 238, 240, 0.58);
  }

  .ab-finale__cta .ab-action:not(.ab-action--primary)::after {
    bottom: 11px;
    opacity: 0.16;
  }

  .ab-finale__atmosphere span {
    width: 100vw;
    height: 100vw;
    opacity: 0.12;
  }

  .ab-finale__atmosphere span:first-child {
    left: -74%;
  }

  .ab-finale__atmosphere span:last-child {
    right: -74%;
  }

  body.about-page.living-spectrum-page > footer {
    display: block;
    background: transparent;
    border-top: 1px solid rgba(241, 242, 240, 0.05);
  }

  /* Mobile tap targets: >=44px hit area (visual disc stays ~34px) */
  body.about-page.living-spectrum-page > footer .footer-channel {
    min-width: 44px;
    min-height: 44px;
  }

  body.about-page.living-spectrum-page > footer .footer-nav a {
    min-height: 44px;
  }

  body.about-page.living-spectrum-page > footer .logo {
    display: inline-flex;
    align-items: center;
    min-height: var(--m-tap, 44px);
  }

  /* Mobile type floors: raise tiny labels to a >=11px floor */
  body.about-page.living-spectrum-page .nav-cart-btn #cart-count:not([hidden]) {
    font-size: 11px;
  }

  .ab-hero__stat-label {
    font-size: 11px;
  }

  .ab-band__index {
    font-size: 11px;
  }

  .ab-band__tag {
    font-size: 11px;
  }

  .ab-line__kicker {
    font-size: 11px;
  }

  .ab-stance__kicker {
    font-size: 11px;
  }

  /* Body floor. The previous pass raised labels to 11px but pinned body copy
     to 14px, one notch under the 15px floor, across every chapter. */
  .ab-band__row p,
  .ab-line__detail,
  .ab-stance__card p,
  .ab-pillar p {
    font-size: max(15px, var(--m-text-body, 15px));
    line-height: 1.62;
  }

  .ab-cart-label--desktop {
    display: none;
  }

  .ab-cart-label--mobile {
    display: inline;
  }

  body.about-page.living-spectrum-page > footer .footer-compliance {
    font-size: 11px;
    /* Match the chrome-wide phone legibility floor (chrome-spectrum.css):
       the page-local desktop copy would otherwise pin opacity at 0.26. */
    opacity: 0.55;
  }

  body.about-page.living-spectrum-page > footer .footer-legal {
    opacity: 0.6;
  }
}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
  .ab-hero__copy > *,
  .ab-hero__ledger {
    animation: none;
  }

  .ab-action--primary,
  .ab-stance__card,
  .ab-pillar,
  body.about-page.living-spectrum-page .nav-cart-btn,
  body.about-page.living-spectrum-page > footer .footer-channel {
    transition: none;
  }

  /* The phone disclosure. Selectors mirror the phone block exactly so source
     order settles it; the chevron still rotates, it just stops animating. */
  body.about-page.living-spectrum-page.ab-m .ab-band__row[data-ab-open] article > p,
  body.about-page.living-spectrum-page.ab-m .ab-band__row[data-ab-open] .ab-band__tag,
  body.about-page.living-spectrum-page.ab-m .ab-stance__card[data-ab-open] > p {
    animation: none;
  }

  body.about-page.living-spectrum-page.ab-m .ab-m-row,
  body.about-page.living-spectrum-page.ab-m .ab-m-row__chev {
    transition: none;
  }
}