/* =============================================================================
   SORTING LANDING PAGE
   Extracted from design handoff (ui_kits/templates/sorting/index.html).
   Page-specific overrides + all section styles.
   The /sorting landing links into /sorting/quiz, which renders through
   templates/sorting.html for ticket #3822 file-path compatibility.
   ============================================================================= */

/* Scope sorting styles so they don't leak to authenticated pages */
.sorting-page { margin: var(--space-0); background: var(--surface-app); color: var(--text-primary); font-family: var(--font-body); line-height: 1.5 }
/* Bare anchors inherit text color; anchors with classes (DS components etc.) own their own styling */
.sorting-page a:not([class]) { color: inherit }
.sorting-page img { display: block; max-width: 100% }
.sorting-page button { font-family: inherit }

/* ─────────────────────────────────────────────────────
   NAV - shared component, see partials/_site_nav.html
   and static/css/components/site-chrome.css. No local rules.
   ───────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────────────── */
.hero {
  box-sizing: border-box;
  max-width: 1280px; margin: var(--space-0) auto;
  padding: var(--space-0) var(--space-10) calc(var(--space-16) + var(--space-4));
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: calc(var(--space-16) + var(--space-2)); align-items: start;
  width: 100%;
}
.hero > * { min-width: var(--space-0); }
.kicker-pill {
  display: inline-block; background: var(--highlight-yellow); color: var(--text-primary);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: calc(var(--space-1) + var(--radius-xs)) var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-6);
}
.headline {
  font-family: var(--font-heading);
  font-weight: 800; letter-spacing: -0.03em; line-height: 1;
  color: var(--text-primary); margin: var(--space-0) var(--space-0) var(--space-6);
  /* Token-only clamp arms keep the landing page inside the CSS token audit. */
  font-size: clamp(calc(var(--text-5xl) - var(--space-2)), calc(var(--text-5xl) + var(--space-4)), calc(var(--text-5xl) + var(--space-8) + var(--space-1)));
}
.headline .hl {
  background: var(--accent-primary); border-radius: var(--radius-lg);
  padding: var(--radius-xs) var(--space-5); display: inline-block; line-height: 1.05;
  margin-right: calc(var(--space-1) + var(--radius-xs));
}
.headline .soft {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 500; letter-spacing: -0.02em;
}
.sub {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--text-2xl); line-height: 1.3; color: var(--text-secondary);
  margin-bottom: var(--space-5); font-weight: 400;
  max-width: 520px;
}
.lede {
  font-size: var(--feed-card-body-size); line-height: 1.6; color: var(--text-secondary);
  max-width: 520px; margin-bottom: calc(var(--space-6) + var(--space-1));
}
.lede b { color: var(--text-primary); font-weight: 700 }
.lede + .lede { margin-top: calc(-1 * var(--space-3)) }
.cta-row { display: flex; flex-wrap: wrap; gap: calc(var(--space-2) + var(--radius-xs)); margin-bottom: calc(var(--space-6) + var(--space-1)) }
.btn-how {
  background: var(--surface-primary); color: var(--text-primary);
  font-size: var(--text-sm); font-weight: 600;
  padding: calc(var(--space-3) + var(--radius-xs)) calc(var(--space-6) + var(--radius-xs)); border-radius: var(--radius-full);
  border: 1px solid var(--border-default); cursor: pointer;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: calc(var(--space-2) + var(--radius-xs));
  transition: border-color var(--duration-fast);
}
.btn-how:hover { border-color: var(--text-muted) }
.vision-btn { text-decoration: none }
.meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs); font-weight: 500; color: var(--text-muted);
  letter-spacing: 0.1em; text-transform: uppercase;
  display: flex; gap: calc(var(--space-2) + var(--radius-xs)); flex-wrap: wrap; align-items: center;
}
.meta b { color: var(--text-primary); font-weight: 700 }
.meta .dot { width: 3px; height: 3px; border-radius: var(--radius-full); background: var(--border-strong) }

/* ─────────────────────────────────────────────────────
   BOOK OF HOUSES COMMERCIAL
   ───────────────────────────────────────────────────── */
.boh-commercial {
  --boh-commercial-deg: 36deg;
  --boh-commercial-bar-size: 10%;
  --boh-commercial-meter-size: calc(var(--size-12) + var(--space-2));
  box-sizing: border-box;
  display: grid;
  justify-items: center;
  margin-top: calc(-1 * var(--space-2));
  max-width: 100%;
  width: min(100%, calc((var(--size-32) * 5) + var(--space-16) + var(--space-8)));
}
.boh-commercial *,
.boh-commercial *::before,
.boh-commercial *::after {
  box-sizing: inherit;
}
.boh-commercial__composer {
  align-items: stretch;
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: calc(var(--size-16) + var(--space-4));
  justify-self: stretch;
  padding: var(--space-3);
  position: relative;
  transition: border-radius var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);
  width: 100%;
}
.boh-commercial.is-evolution-ready .boh-commercial__composer {
  border-bottom-color: var(--border-soft);
  border-radius: var(--radius-card) var(--radius-card) var(--space-0) var(--space-0);
  box-shadow: var(--shadow-md);
}
.boh-commercial__field {
  align-items: center;
  background: var(--surface-app);
  border: 1px solid var(--border-soft);
  border-radius: calc(var(--radius-lg) + var(--radius-xs));
  color: var(--text-primary);
  display: flex;
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-style: italic;
  line-height: 1.35;
  min-height: var(--size-16);
  overflow-wrap: anywhere;
  padding: var(--space-3) var(--space-5);
}
.boh-commercial__field [data-commercial-typed] {
  min-width: var(--space-2);
}
.boh-commercial__caret {
  animation: boh-commercial-caret calc(var(--duration-slow) * 3) steps(1, end) infinite;
  background: var(--text-primary);
  border-radius: var(--radius-xs);
  display: inline-block;
  flex: 0 0 auto;
  height: var(--text-lg);
  margin-left: var(--space-1);
  width: var(--radius-xs);
}
.boh-commercial__glyph-btn {
  align-items: center;
  background: var(--accent-primary);
  border: 1px solid var(--accent-primary);
  border-radius: calc(var(--radius-lg) + var(--radius-xs));
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  display: inline-flex;
  height: var(--size-16);
  justify-content: center;
  padding: var(--space-3);
  transition: transform var(--duration-fast) var(--ease-default), background var(--duration-fast) var(--ease-default), border-color var(--duration-fast) var(--ease-default);
  width: var(--size-16);
}
.boh-commercial__glyph-btn:hover,
.boh-commercial__glyph-btn:focus-visible {
  background: var(--highlight-yellow);
  transform: translateY(calc(-1 * var(--radius-xs)));
}
.boh-commercial__glyph-btn:focus-visible {
  outline: var(--radius-xs) solid var(--highlight-purple);
  outline-offset: var(--radius-xs);
}
.boh-commercial.is-button-pressing .boh-commercial__glyph-btn,
.boh-commercial__glyph-btn:active {
  background: var(--highlight-purple);
  border-color: var(--highlight-purple);
  transform: translateY(var(--space-0)) scale(0.96);
}
.boh-commercial__glyph-btn img {
  height: var(--size-8);
  transition: filter var(--duration-fast) var(--ease-default);
  width: var(--size-8);
}
.boh-commercial.is-button-pressing .boh-commercial__glyph-btn img,
.boh-commercial__glyph-btn:active img {
  filter: brightness(0) invert(1);
}
.boh-commercial__cursor {
  color: var(--text-primary);
  height: var(--size-8);
  left: var(--space-5);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: calc(100% + var(--space-3));
  transform: rotate(-8deg);
  transition: opacity var(--duration-normal) var(--ease-default);
  width: var(--size-8);
  z-index: var(--z-dropdown);
}
.boh-commercial.is-ready .boh-commercial__cursor {
  opacity: 1;
}
.boh-commercial.is-clicking .boh-commercial__cursor {
  animation: boh-commercial-cursor-click calc(var(--duration-slow) * 7) var(--ease-default) forwards;
}
.boh-commercial.is-evolving .boh-commercial__cursor {
  opacity: 0;
}
.boh-commercial__terminal[hidden] {
  display: none;
}
.boh-commercial__terminal {
  background: var(--accent-tertiary);
  border: 1px solid color-mix(in srgb, var(--color-white) 36%, transparent);
  border-radius: var(--space-0) var(--space-0) var(--radius-card) var(--radius-card);
  box-shadow: var(--shadow-lg);
  color: var(--text-inverse);
  display: grid;
  justify-self: stretch;
  margin-top: calc(-1 * var(--radius-xs));
  opacity: 0;
  overflow: hidden;
  transform: translateY(var(--space-4));
  transition: opacity calc(var(--duration-slow) * 2) var(--ease-default), transform calc(var(--duration-slow) * 2) var(--ease-default);
  width: 100%;
}
.boh-commercial.is-evolution-ready .boh-commercial__terminal {
  opacity: 1;
  transform: translateY(var(--space-0));
}
.boh-commercial__terminal-top {
  align-items: center;
  background: var(--color-black);
  color: var(--text-inverse);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  min-height: var(--size-12);
  padding: var(--space-3) var(--space-5);
}
.boh-commercial__terminal-title,
.boh-commercial__terminal-status {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}
.boh-commercial__terminal-status {
  color: var(--accent-primary);
}
.boh-commercial__terminal-body {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
}
.boh-commercial__meter-panel {
  align-items: center;
  border-top: 1px solid color-mix(in srgb, var(--color-white) 18%, transparent);
  display: grid;
  gap: var(--space-3);
  grid-template-columns: var(--boh-commercial-meter-size) minmax(0, 1fr);
  padding-top: var(--space-3);
}
.boh-commercial__meter-ring {
  align-items: center;
  background: conic-gradient(
    var(--color-white) var(--space-0) var(--boh-commercial-deg),
    color-mix(in srgb, var(--color-white) 28%, transparent) var(--boh-commercial-deg) 360deg
  );
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  height: var(--boh-commercial-meter-size);
  justify-content: center;
  position: relative;
  width: var(--boh-commercial-meter-size);
}
.boh-commercial__meter-ring::before {
  background: var(--accent-tertiary);
  border-radius: var(--radius-full);
  content: '';
  inset: var(--space-1);
  position: absolute;
}
.boh-commercial__meter-icon {
  color: var(--color-white);
  font-size: var(--size-8);
  line-height: 1;
  position: relative;
  z-index: 1;
}
.boh-commercial__meter-chip {
  align-items: center;
  background: var(--color-white);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-md);
  color: var(--accent-tertiary);
  display: inline-flex;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  height: var(--size-8);
  justify-content: center;
  left: 50%;
  line-height: 1;
  min-width: var(--size-8);
  padding: var(--space-0) var(--space-2);
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%) translate(calc(sin(var(--boh-commercial-deg)) * (var(--boh-commercial-meter-size) / 2)), calc(-1 * cos(var(--boh-commercial-deg)) * (var(--boh-commercial-meter-size) / 2)));
  transition: transform calc(var(--duration-slow) * 2) var(--ease-default);
  z-index: 2;
}
.boh-commercial__evolution-copy {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  min-width: var(--space-0);
}
.boh-commercial__topline {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-start;
  min-width: var(--space-0);
}
.boh-commercial__label,
.boh-commercial__version {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}
.boh-commercial__label {
  color: color-mix(in srgb, var(--color-white) 72%, transparent);
}
.boh-commercial__version {
  align-items: center;
  background: var(--color-white);
  border: 1px solid var(--color-white);
  border-radius: var(--radius-full);
  color: var(--accent-tertiary);
  display: inline-flex;
  flex-shrink: 0;
  min-height: var(--size-8);
  padding: var(--space-1) var(--space-3);
}
.boh-commercial__headline {
  color: var(--text-inverse);
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  letter-spacing: 0;
  line-height: 1;
}
.boh-commercial__layer-label {
  align-items: center;
  background: var(--color-white);
  border: 1px solid var(--color-white);
  border-radius: var(--radius-full);
  color: var(--accent-tertiary);
  display: inline-flex;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  letter-spacing: 0;
  line-height: 1;
  min-height: var(--size-7);
  padding: var(--space-1) var(--space-3);
  text-transform: uppercase;
}
.boh-commercial__state {
  align-items: center;
  color: color-mix(in srgb, var(--color-white) 72%, transparent);
  display: inline-flex;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  gap: var(--space-3);
  line-height: 1;
  min-height: var(--size-8);
  width: auto;
  max-width: 100%;
}
.boh-commercial__state-dot {
  animation: boh-commercial-dot-pulse calc(var(--duration-slow) * 11) var(--ease-default) infinite;
  background: color-mix(in srgb, var(--color-white) 72%, transparent);
  border-radius: var(--radius-full);
  box-shadow: 0 0 var(--space-2) color-mix(in srgb, var(--color-white) 72%, transparent);
  height: var(--space-4);
  width: var(--space-4);
}
.boh-commercial__rail {
  background: color-mix(in srgb, var(--color-white) 28%, transparent);
  grid-column: 1 / -1;
  border-radius: var(--radius-full);
  height: var(--space-3);
  overflow: hidden;
  position: relative;
}
.boh-commercial__rail-fill {
  background: var(--color-white);
  border-radius: inherit;
  display: block;
  height: 100%;
  overflow: hidden;
  position: relative;
  transition: width calc(var(--duration-slow) * 2) var(--ease-default);
  width: var(--boh-commercial-bar-size);
}
.boh-commercial__rail-fill::after {
  animation: boh-commercial-rail-sweep calc(var(--duration-slow) * 11) var(--ease-default) infinite;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-white) 72%, transparent), transparent);
  content: '';
  inset: var(--space-0);
  position: absolute;
  transform: translateX(-100%);
}
.boh-commercial__build-copy {
  display: grid;
  gap: var(--space-3);
}
.boh-commercial__build-title {
  color: var(--text-inverse);
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  letter-spacing: 0;
  line-height: 1.1;
  margin: var(--space-0);
  min-height: calc(var(--text-3xl) * 2.2);
}
.boh-commercial__state--active {
  color: var(--text-inverse);
  font-size: var(--text-xl);
  line-height: 1.15;
  min-height: var(--size-8);
}
.boh-commercial__build-list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: var(--space-0);
  min-height: calc(var(--text-lg) * 10.5);
  padding: var(--space-0);
}
.boh-commercial.is-layer-switching .boh-commercial__build-list {
  opacity: 0.72;
}
.boh-commercial__build-item {
  align-items: start;
  color: color-mix(in srgb, var(--color-white) 68%, transparent);
  display: grid;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-style: italic;
  gap: var(--space-3);
  grid-template-columns: var(--size-6) minmax(0, 1fr);
  line-height: 1.35;
  min-height: calc(var(--text-lg) * 1.7);
  opacity: 0.48;
  transition: color var(--duration-normal) var(--ease-default), opacity var(--duration-normal) var(--ease-default);
}
.boh-commercial__build-item.has-copy {
  opacity: 0.88;
}
.boh-commercial__build-item.is-active,
.boh-commercial__build-item.is-complete {
  color: var(--text-inverse);
  opacity: 1;
}
.boh-commercial__build-item.is-unfinished {
  color: color-mix(in srgb, var(--color-white) 78%, transparent);
  opacity: 0.94;
}
.boh-commercial__build-item.is-active.is-unfinished {
  color: var(--text-inverse);
  opacity: 1;
}
.boh-commercial__layer-status {
  align-items: center;
  background: color-mix(in srgb, var(--color-white) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-white) 44%, transparent);
  border-radius: var(--radius-full);
  color: var(--text-inverse);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-style: normal;
  font-weight: var(--font-bold);
  line-height: 1;
  margin-left: var(--space-2);
  min-height: var(--size-6);
  padding: var(--space-1) var(--space-2);
  text-transform: uppercase;
  vertical-align: middle;
}
.boh-commercial__layer-status[hidden] {
  display: none;
}
.boh-commercial__layer-marker {
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--color-white) 64%, transparent);
  border-radius: var(--radius-full);
  display: inline-flex;
  height: var(--size-5);
  justify-content: center;
  margin-top: var(--radius-xs);
  position: relative;
  transition: background var(--duration-normal) var(--ease-default), border-color var(--duration-normal) var(--ease-default), transform var(--duration-normal) var(--ease-default);
  width: var(--size-5);
}
.boh-commercial__layer-marker iconify-icon {
  color: var(--accent-tertiary);
  font-size: var(--text-sm);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
}
.boh-commercial__build-item.is-active .boh-commercial__layer-marker {
  animation: boh-commercial-dot-pulse calc(var(--duration-slow) * 8) var(--ease-default) infinite;
  background: var(--color-white);
  border-color: var(--color-white);
  box-shadow: 0 0 var(--space-3) color-mix(in srgb, var(--color-white) 40%, transparent);
}
.boh-commercial__build-item.is-complete .boh-commercial__layer-marker {
  background: var(--color-white);
  border-color: var(--color-white);
  transform: scale(1.03);
}
.boh-commercial__build-item.is-complete .boh-commercial__layer-marker iconify-icon {
  opacity: 1;
}
.boh-commercial__build-item.is-unfinished .boh-commercial__layer-marker,
.boh-commercial__build-item.is-active.is-unfinished .boh-commercial__layer-marker {
  background: transparent;
  border-color: color-mix(in srgb, var(--color-white) 72%, transparent);
  border-style: dashed;
  box-shadow: none;
}
.boh-commercial__build-line {
  display: inline-block;
  min-width: var(--space-0);
  overflow-wrap: anywhere;
}
.boh-commercial__mission {
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--color-black);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-style: italic;
  line-height: 1.4;
  margin: var(--space-0);
  padding: var(--space-4);
}
.boh-commercial--step-10 { --boh-commercial-deg: 36deg; --boh-commercial-bar-size: 10%; }
.boh-commercial--step-20 { --boh-commercial-deg: 72deg; --boh-commercial-bar-size: 20%; }
.boh-commercial--step-30 { --boh-commercial-deg: 108deg; --boh-commercial-bar-size: 30%; }
.boh-commercial--step-40 { --boh-commercial-deg: 144deg; --boh-commercial-bar-size: 40%; }
.boh-commercial--step-50 { --boh-commercial-deg: 180deg; --boh-commercial-bar-size: 50%; }
.boh-commercial--step-60 { --boh-commercial-deg: 216deg; --boh-commercial-bar-size: 60%; }
.boh-commercial--step-70 { --boh-commercial-deg: 252deg; --boh-commercial-bar-size: 70%; }
.boh-commercial--step-80 { --boh-commercial-deg: 288deg; --boh-commercial-bar-size: 80%; }
.boh-commercial--step-90 { --boh-commercial-deg: 324deg; --boh-commercial-bar-size: 90%; }
.boh-commercial--step-100 { --boh-commercial-deg: 360deg; --boh-commercial-bar-size: 100%; }

@keyframes boh-commercial-caret {
  50% { opacity: 0; }
}
@keyframes boh-commercial-cursor-click {
  0% {
    left: var(--space-5);
    top: calc(100% + var(--space-3));
    transform: rotate(-8deg) scale(1);
  }
  68% {
    left: calc(100% - var(--size-16));
    top: calc(var(--space-4) + var(--radius-xs));
    transform: rotate(-2deg) scale(1);
  }
  82% {
    left: calc(100% - var(--size-16));
    top: calc(var(--space-4) + var(--radius-xs));
    transform: rotate(-2deg) scale(0.82);
  }
  100% {
    left: calc(100% - var(--size-16));
    top: calc(var(--space-4) + var(--radius-xs));
    transform: rotate(-2deg) scale(1);
  }
}
@keyframes boh-commercial-dot-pulse {
  0%, 100% { opacity: 0.68; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1); }
}
@keyframes boh-commercial-rail-sweep {
  0% { transform: translateX(-100%); }
  52%, 100% { transform: translateX(100%); }
}

/* ─────────────────────────────────────────────────────
   PREVIEW CARD (right side of hero)
   ───────────────────────────────────────────────────── */
.card {
  background: var(--surface-primary); border-radius: var(--radius-card);
  padding: calc(var(--space-6) + var(--space-1)) calc(var(--space-6) + var(--space-1) + var(--radius-xs)) calc(var(--space-5) + var(--radius-xs));
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-5);
}
.card-title {
  font-family: var(--font-mono);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em;
  color: var(--text-primary); text-transform: uppercase;
}
.live {
  display: inline-flex; align-items: center; gap: calc(var(--space-1) + var(--radius-xs));
  font-size: var(--text-xs); font-weight: 600; color: var(--text-muted);
}
.live::before {
  content: ''; width: 7px; height: 7px; border-radius: var(--radius-full);
  background: var(--accent-primary);
}
.vals { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: calc(var(--space-5) + var(--radius-xs)) }
.v {
  font-size: var(--feed-card-channel-size); font-weight: 500;
  padding: var(--space-2) calc(var(--space-3) + var(--radius-xs)); border-radius: var(--radius-full);
  background: var(--surface-secondary); color: var(--text-secondary); cursor: default;
}
.v.you { background: var(--highlight-yellow); color: var(--text-primary); font-weight: 600 }
.v.house { background: var(--accent-tertiary-subtle); color: var(--accent-tertiary); font-weight: 600 }
.card-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--space-4); border-top: 1px solid var(--border-soft); gap: var(--space-3); flex-wrap: wrap;
}
.legend {
  display: flex; gap: calc(var(--space-3) + var(--radius-xs)); flex-wrap: wrap;
  font-size: calc(var(--text-xs) - var(--radius-xs)); font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
}
.legend span { display: inline-flex; align-items: center; gap: calc(var(--space-1) + var(--radius-xs)) }
.legend i { width: 10px; height: 10px; border-radius: var(--radius-xs); display: inline-block }
.i-y { background: var(--highlight-yellow) }
.i-p { background: var(--accent-tertiary) }
.i-g { background: var(--border-strong) }
.count {
  font-family: var(--font-mono);
  font-size: var(--text-xs); font-weight: 700; color: var(--text-primary); letter-spacing: 0.04em;
}
.count b { color: var(--text-muted); font-weight: 500 }

/* ─────────────────────────────────────────────────────
   VALUE TICKER
   ───────────────────────────────────────────────────── */
.ticker-wrap {
  background: var(--surface-app); padding: var(--space-5) var(--space-0);
  overflow: hidden; position: relative;
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
}
.ticker-wrap::before, .ticker-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0;
  width: 120px; z-index: var(--z-dropdown); pointer-events: none;
}
.ticker-wrap::before { left: 0; background: linear-gradient(to right, var(--surface-app), transparent) }
.ticker-wrap::after { right: 0; background: linear-gradient(to left, var(--surface-app), transparent) }
.ticker {
  display: flex; gap: var(--space-3);
  animation: scroll 80s linear infinite;
  width: max-content;
}
@keyframes scroll { to { transform: translateX(-50%) } }
.tv {
  flex-shrink: 0;
  font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary);
  padding: var(--space-2) var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-full);
  background: var(--surface-primary);
  white-space: nowrap;
}
.tv.highlight { background: var(--highlight-yellow); color: var(--text-primary); border-color: var(--highlight-yellow); font-weight: 700 }
.tv.you-mark { background: var(--accent-primary); color: var(--text-primary); border-color: var(--accent-primary); font-weight: 700 }

/* ─────────────────────────────────────────────────────
   SECTION SCAFFOLD
   ───────────────────────────────────────────────────── */
section.slab {
  max-width: 1280px; margin: var(--space-0) auto;
  padding: calc(var(--space-16) + var(--space-8)) var(--space-10);
}
.sec-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-tertiary); margin-bottom: var(--space-5);
}
.sec-title {
  font-family: var(--font-heading);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.05;
  color: var(--text-primary); margin-bottom: var(--space-5); max-width: 820px;
  font-size: clamp(calc(var(--text-4xl) + var(--space-1)), calc(var(--text-5xl) - var(--space-2)), var(--text-5xl));
}
.sec-title .soft {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 500; letter-spacing: -0.015em;
}
.sec-title .hl {
  background: var(--accent-primary); border-radius: calc(var(--radius-sm) + var(--radius-xs)); padding: var(--space-0) calc(var(--space-3) + var(--radius-xs));
  display: inline-block; line-height: 1.08;
}
.sec-title .hly {
  background: var(--highlight-yellow); border-radius: calc(var(--radius-sm) + var(--radius-xs)); padding: var(--space-0) calc(var(--space-3) + var(--radius-xs));
  display: inline-block; line-height: 1.08;
}
.sec-sub {
  font-size: var(--feed-card-body-size); line-height: 1.6; color: var(--text-secondary);
  max-width: 620px; margin-bottom: var(--space-12);
}

/* ─────────────────────────────────────────────────────
   HOW IT WORKS (Intent · 01 02 03)
   ───────────────────────────────────────────────────── */
.how-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
  max-width: 100%;
  min-width: 0;
}
.how-card {
  background: var(--surface-primary); border-radius: var(--radius-card);
  border: 1px solid var(--border-default); padding: var(--space-6) calc(var(--space-6) + var(--radius-xs));
  display: flex; flex-direction: column; gap: calc(var(--space-2) + var(--radius-xs));
  box-shadow: var(--shadow-sm);
  min-width: 0;
  transition: box-shadow var(--duration-normal), transform var(--duration-normal), border-color var(--duration-normal);
}
.how-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-soft);
  transform: translateY(-2px);
}
#how-it-works .how-card:nth-child(1) {
  background: var(--highlight-purple);
  border-color: var(--highlight-purple);
  color: var(--text-inverse);
}
#how-it-works .how-card:nth-child(2) {
  background: var(--highlight-blue);
  border-color: var(--highlight-blue);
  color: var(--text-inverse);
}
#how-it-works .how-card:nth-child(3) {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--color-black);
}
#how-it-works .how-num,
#how-it-works .how-title,
#how-it-works .how-body {
  color: inherit;
}
.how-num {
  font-family: var(--font-mono);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em;
  color: var(--accent-tertiary);
}
.how-title {
  font-family: var(--font-heading);
  font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
  color: var(--text-primary); font-size: var(--text-2xl);
}
.how-title .soft {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 500;
}

/* ─────────────────────────────────────────────────────
   YOUR VALUES (centered pill cluster w/ yellow halo)
   ───────────────────────────────────────────────────── */
.values-wrap {
  position: relative; overflow: hidden;
  padding: calc(var(--space-16) + var(--space-8)) var(--space-6);
}
.values-wrap::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 50% at 50% 42%,
                color-mix(in srgb, var(--highlight-yellow) 38%, transparent) 0%,
                color-mix(in srgb, var(--highlight-yellow) 14%, transparent) 38%,
                transparent 72%);
  pointer-events: none; z-index: var(--z-base);
}
.values-inner {
  position: relative; z-index: var(--z-dropdown);
  max-width: 1000px; margin: var(--space-0) auto;
  text-align: center;
}
.values-inner .kicker-pill { margin-bottom: var(--space-5) }
.values-inner .sec-title { margin: var(--space-0) auto var(--space-5); max-width: 720px; color: var(--text-primary) }
.values-inner .sec-sub { margin: var(--space-0) auto var(--space-12); text-align: center }
/* ticket #4779 (2026-06-17): center the Pudding Heroes Story CTA pair as one
   unit within the story section. The parent .values-inner is text-align:center,
   so making this an inline-flex element centers the pair on desktop and lets each
   button center on its own line on mobile (≤480px) via justify-content. No new
   tokens, reuses the existing flex/gap/wrap pattern from .cta-row above.
   Author-jump half of this ticket is fixed on the puddingheroes.com source —
   /home/puddingheroes/webroot/index.html line 583 now has
   <section id="author"> so href="https://puddingheroes.com/#author" resolves.
   Staging screenshots for this exact row live under static/qa-evidence/ticket-4779/. */
.story-cta-row {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
}
.value-pill-grid {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: calc(var(--space-2) + var(--radius-xs)) var(--space-3);
  margin: var(--space-0) auto var(--space-10); max-width: 920px;
}
.vp {
  font-size: var(--text-sm); font-weight: 500; color: var(--text-primary);
  background: var(--surface-primary); border: 1px solid var(--border-default);
  padding: calc(var(--space-2) + var(--radius-xs)) calc(var(--space-4) + var(--radius-xs)); border-radius: var(--radius-full);
  transition: transform var(--duration-fast);
}
.vp:hover { transform: translateY(-1px) }
.vp.highlight { background: var(--highlight-yellow); border-color: var(--highlight-yellow); font-weight: 700 }

/* AI NOTE card inside values-wrap (sits between value pills and passport) */
.ai-note {
  margin: calc(var(--space-16) + var(--space-2)) auto var(--space-0);
  max-width: 880px;
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  padding: calc(var(--space-10) + var(--space-1)) calc(var(--space-8) + var(--radius-xs));
  text-align: left;
}
.ai-note .kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-tertiary);
  display: inline-block;
  margin-bottom: calc(var(--space-4) + var(--radius-xs));
}
.ai-note p {
  color: var(--text-secondary);
  font-size: var(--feed-card-body-size);
  line-height: 1.6;
  margin: var(--space-0) var(--space-0) var(--space-4);
}
.ai-note p:first-of-type {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--text-primary);
  font-size: var(--text-xl);
  line-height: 1.4;
  margin-bottom: var(--space-5);
}
.ai-note p:last-child {
  margin-bottom: var(--space-0);
}
.ai-note b,
.ai-note strong {
  color: var(--text-primary); font-weight: 700;
}

/* IDENTICON STRIP inside values-wrap */
.ident-strip {
  margin-top: calc(var(--space-16) + var(--space-2));
  padding-top: var(--space-12);
  border-top: 1px solid var(--border-subtle);
}
.ident-strip-head {
  display: flex; align-items: baseline; justify-content: center;
  gap: calc(var(--space-3) + var(--radius-xs)); flex-wrap: wrap;
  margin-bottom: calc(var(--space-6) + var(--space-1));
}
.ident-strip-head .kicker {
  font-family: var(--font-mono);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent-tertiary);
}
.ident-strip-sub {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--text-base); color: var(--text-secondary);
}
.ident-grid {
  display: grid; grid-template-columns: repeat(15, 1fr); gap: calc(var(--space-2) + var(--radius-xs));
  max-width: 880px; margin: var(--space-0) auto var(--space-6);
}
.ident-grid img {
  aspect-ratio: 1; border-radius: var(--radius-full);
  width: 100%;
  transition: transform var(--duration-normal);
}
.ident-grid img:hover { transform: scale(1.2); z-index: var(--z-dropdown) }
.ident-cta {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--text-base); color: var(--text-secondary);
  text-align: center; margin: var(--space-0);
}
.ident-cta b { color: var(--text-primary); font-weight: 700 }
@media (max-width: 900px) {
  .ident-grid { grid-template-columns: repeat(10, 1fr) }
}
@media (max-width: 600px) {
  .ident-grid { grid-template-columns: repeat(6, 1fr) }
}

/* ─────────────────────────────────────────────────────
   BLUE MANIFESTO
   ───────────────────────────────────────────────────── */
.bm-wrap {
  max-width: 1280px; margin: var(--space-0) auto;
  padding: var(--space-10);
}
.bm {
  background: var(--surface-primary); color: var(--text-primary);
  padding: calc(var(--space-16) + var(--space-2)) var(--space-16);
  border-radius: var(--radius-hero);
  position: relative; overflow: hidden;
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
}
.bm::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 0%,
    var(--accent-primary-subtle) 0%, transparent 60%);
  pointer-events: none;
}
.bm-inner {
  position: relative; z-index: var(--z-base);
  display: grid; grid-template-columns: 1fr 1.1fr; gap: calc(var(--space-12) + var(--space-2));
  align-items: start;
}
.bm-kicker {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-6);
}
.bm-dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--accent-primary) }
.bm-h {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(calc(var(--text-4xl) + var(--radius-xs)), calc(var(--text-5xl) - var(--space-2)), calc(var(--text-5xl) - var(--space-1)));
  line-height: 1.04; letter-spacing: -0.02em;
  color: var(--text-primary); margin: var(--space-0);
}
.bm-h em {
  font-style: italic; font-weight: 500;
  background: linear-gradient(transparent 60%, var(--accent-primary-subtle) 60% 94%, transparent 94%);
  padding: var(--space-0) var(--space-1);
}
.bm-sub {
  display: block; font-style: italic; font-weight: 400;
  color: var(--text-secondary); font-size: clamp(var(--text-2xl), var(--text-3xl), calc(var(--text-4xl) + var(--space-2)));
  margin-top: calc(var(--space-1) + var(--radius-xs));
}
.bm-body {
  display: flex; flex-direction: column; gap: var(--space-5);
  padding-top: calc(var(--space-16) - var(--space-1));
}
@media (max-width: 900px) {
  .bm-body { padding-top: var(--space-0) }
  .bm { padding: var(--space-12) calc(var(--space-6) + var(--space-1)); border-radius: var(--radius-card) }
  .bm-wrap { padding: var(--space-6) var(--space-5) }
}
.bm-body p {
  font-family: var(--font-body);
  font-size: var(--feed-card-body-size); line-height: 1.6; font-weight: 400;
  color: var(--text-secondary);
  margin: var(--space-0); max-width: 540px;
}
.bm-body p b {
  background: var(--accent-primary); color: var(--color-black);
  padding: var(--radius-xs) var(--space-2); border-radius: calc(var(--radius-xs) + var(--radius-xs));
  font-weight: 700;
  font-family: var(--font-heading);
  font-size: var(--text-base);
}
.bm-list {
  list-style: none; padding: var(--space-0); margin: var(--space-0);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-6);
}
.bm-list li {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-xl); line-height: 1.4;
  color: var(--text-primary);
  padding-left: var(--space-5); position: relative;
}
.bm-list li::before {
  content: ''; position: absolute; left: 0; top: 12px;
  width: 12px; height: 1px; background: var(--border-strong);
}
.bm-close {
  margin-top: var(--space-2) !important;
  background: var(--surface-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: calc(var(--space-5) + var(--radius-xs)) calc(var(--space-6) + var(--radius-xs)) !important;
  font-family: var(--font-serif) !important;
  font-style: italic;
  font-size: var(--text-xl) !important;
  color: var(--text-primary) !important;
  line-height: 1.5 !important;
  max-width: 560px !important;
  box-shadow: var(--shadow-md);
}
.bm mark.neon {
  background: var(--accent-primary); color: var(--color-black);
  padding: var(--radius-xs) calc(var(--space-2) + var(--radius-xs)); border-radius: calc(var(--radius-sm) - var(--radius-xs));
  font-weight: 800; font-style: normal;
  font-family: var(--font-heading);
  font-size: var(--text-lg); letter-spacing: -0.01em;
  display: inline-block;
}
.bm-vision-link {
  display: inline-block;
  margin-left: var(--space-2);
  font-family: var(--font-heading);
  font-style: normal;
  font-weight: 600;
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--border-default);
  padding-bottom: var(--radius-xs);
  transition: border-color var(--duration-fast) var(--ease-default);
}
.bm-vision-link:hover { border-bottom-color: var(--text-link-hover); color: var(--text-link-hover) }
@media (max-width: 900px) {
  .bm { padding: var(--space-12) calc(var(--space-6) + var(--space-1)); border-radius: var(--radius-card) }
  .bm-inner { grid-template-columns: 1fr; gap: calc(var(--space-6) + var(--space-1)) }
  .bm-list { grid-template-columns: 1fr }
}

/* /sorting/2 House Party variant: the copy is a short story, so keep it stacked
   instead of splitting it across the original manifesto grid. */
.bm-house-party {
  padding: var(--space-16);
}
.bm-house-party .bm-inner {
  grid-template-columns: 1fr;
  gap: calc(var(--space-6) + var(--space-1) + var(--radius-xs));
  max-width: 900px;
  margin: var(--space-0) auto;
}
.bm-house-party .bm-left {
  max-width: 760px;
}
.bm-house-party .bm-kicker {
  margin-bottom: calc(var(--space-4) + var(--radius-xs));
}
.bm-house-party .bm-h {
  font-size: clamp(calc(var(--text-5xl) - var(--space-2) - var(--radius-xs)), calc(var(--text-5xl) + var(--space-4)), calc(var(--text-5xl) + var(--space-6) + var(--radius-xs)));
  line-height: 0.98;
}
.bm-house-party .bm-body {
  padding-top: var(--space-0);
  gap: calc(var(--space-4) + var(--radius-xs));
  max-width: 780px;
}
.bm-house-party .bm-body p {
  max-width: 760px;
  font-size: clamp(var(--text-lg), var(--text-xl), var(--text-2xl));
  line-height: 1.45;
}
.bm-house-party .bm-body p b {
  display: inline-block;
  margin-right: var(--space-1);
}
.bm-house-party .bm-overline {
  margin-top: var(--space-2);
}
.bm-house-party .bm-list {
  grid-template-columns: 1fr;
  gap: calc(var(--space-2) + var(--radius-xs));
  max-width: 640px;
}
.bm-house-party .bm-list li {
  font-size: clamp(var(--text-xl), var(--text-2xl), calc(var(--text-2xl) + var(--space-1)));
  line-height: 1.25;
  padding-left: calc(var(--space-6) + var(--space-1));
}
.bm-house-party .bm-list li::before {
  top: 17px;
  width: 16px;
}
.bm-house-party .bm-close {
  max-width: 760px !important;
  margin-top: calc(var(--space-3) + var(--radius-xs)) !important;
  font-size: clamp(var(--text-xl), var(--text-2xl), calc(var(--text-2xl) + var(--space-1))) !important;
  padding: var(--space-6) calc(var(--space-6) + var(--space-1) + var(--radius-xs)) !important;
}
@media (max-width: 720px) {
  .bm-house-party {
    padding: calc(var(--space-10) + var(--space-1)) calc(var(--space-6) + var(--radius-xs));
  }
  .bm-house-party .bm-inner {
    gap: var(--space-6);
  }
  .bm-house-party .bm-body {
    gap: var(--space-4);
  }
  .bm-house-party .bm-h {
    font-size: calc(var(--text-5xl) - var(--space-2));
  }
  .bm-house-party .bm-body p,
  .bm-house-party .bm-list li,
  .bm-house-party .bm-close {
    font-size: var(--text-xl) !important;
  }
  .bm-house-party .bm-list li {
    padding-left: calc(var(--space-5) + var(--radius-xs));
  }
  .bm-house-party .bm-list li::before {
    top: 13px;
    width: 12px;
  }
  .bm-house-party .bm-close {
    padding: var(--space-5) calc(var(--space-5) + var(--radius-xs)) !important;
  }
}

/* ─────────────────────────────────────────────────────
   FEATURES
   ───────────────────────────────────────────────────── */
.features-wrap {
  max-width: 1280px; margin: var(--space-0) auto;
  padding: var(--space-10);
}
.features-dark {
  background: var(--surface-primary);
  color: var(--text-primary);
  padding: calc(var(--space-16) + var(--space-4)) var(--space-12);
  border-radius: var(--radius-hero);
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
}
.features-inner {
  max-width: 1080px; margin: var(--space-0) auto;
  text-align: center;
}
.features-pill {
  display: inline-block;
  background: var(--surface-secondary); color: var(--text-muted);
  border: 1px solid var(--border-default);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: calc(var(--space-1) + var(--radius-xs)) calc(var(--space-3) + var(--radius-xs)); border-radius: var(--radius-full); margin-bottom: var(--space-6);
}
.features-title {
  font-family: var(--font-heading);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
  font-size: clamp(calc(var(--text-4xl) + var(--space-2)), var(--text-5xl), calc(var(--text-5xl) + var(--space-2)));
  color: var(--text-primary); margin-bottom: var(--space-5);
}
.features-title em {
  background: var(--accent-primary);
  border-radius: var(--radius-md);
  color: var(--color-black);
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  padding: var(--space-0) var(--space-3);
}
.features-sub {
  max-width: 640px; margin: var(--space-0) auto calc(var(--space-3) + var(--radius-xs));
  font-size: var(--feed-card-body-size); line-height: 1.6; color: var(--text-secondary);
}
.features-cta-line {
  font-family: var(--font-serif); font-style: italic;
  font-weight: 700; font-size: var(--text-xl);
  color: var(--text-primary); margin-bottom: var(--space-12);
}
.features-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
  text-align: left;
}
.feat-tile {
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  color: var(--text-primary);
  padding: var(--space-8) calc(var(--space-6) + var(--space-1) + var(--radius-xs)) calc(var(--space-6) + var(--space-1) + var(--radius-xs));
  display: flex; flex-direction: column; gap: var(--space-4);
  min-height: 260px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-normal), box-shadow var(--duration-normal), border-color var(--duration-normal);
}
.feat-tile:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-3px) }
.tile-purple,
.tile-blue,
.tile-green { background: var(--surface-primary); color: var(--text-primary) }
.feat-icon-box {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  display: grid; place-items: center;
}
.tile-green .feat-icon-box  { background: var(--accent-primary);   color: var(--color-black); }
.tile-blue .feat-icon-box   { background: var(--highlight-blue);   color: var(--color-white); }
.tile-purple .feat-icon-box { background: var(--highlight-purple); color: var(--color-white); }
.feat-icon-box iconify-icon { width: var(--size-8); height: var(--size-8) }
.feat-icon-box img { width: var(--size-8); height: var(--size-8); display: block }
.feat-tile h3 {
  font-family: var(--font-heading);
  font-weight: 800; font-size: var(--text-xl);
  letter-spacing: -0.01em;
}
.feat-tile p {
  font-size: var(--text-sm); line-height: 1.55;
  color: var(--text-secondary);
}
@media (max-width: 1100px) {
  .features-grid { grid-template-columns: 1fr 1fr }
  .features-dark { padding: calc(var(--space-16) + var(--space-2)) var(--space-8) }
}
@media (max-width: 720px) {
  .features-grid { grid-template-columns: 1fr }
  .features-dark { padding: calc(var(--space-12) + var(--space-2)) var(--space-5) }
}

/* ─────────────────────────────────────────────────────
   HOUSES GRID
   ───────────────────────────────────────────────────── */
.house-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
}
.house-card {
  background: var(--surface-primary); border-radius: var(--radius-card);
  border: 1px solid var(--border-default); padding: var(--space-0) var(--space-0) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
  text-decoration: none; color: inherit; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-normal), border-color var(--duration-normal), box-shadow var(--duration-normal);
}
.house-card:hover {
  transform: translateY(-2px); border-color: var(--border-soft);
  box-shadow: var(--shadow-md);
}
.house-crest {
  width: 100%; aspect-ratio: 1/1;
  overflow: hidden;
  background: var(--color-black);
}
.house-crest img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.house-body { padding: var(--radius-xs) calc(var(--space-4) + var(--radius-xs)) var(--space-0); display: flex; flex-direction: column; gap: var(--space-2) }
.house-pill {
  align-self: flex-start;
  background: var(--accent-tertiary-subtle); color: var(--accent-tertiary);
  font-family: var(--font-body);
  font-size: calc(var(--text-xs) - var(--radius-xs)); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-1) calc(var(--space-2) + var(--radius-xs)); border-radius: calc(var(--radius-sm) - var(--radius-xs));
}
.house-name {
  font-family: var(--font-heading);
  font-weight: 800; font-size: var(--text-lg); color: var(--text-primary);
  letter-spacing: -0.015em; line-height: 1.15;
}
.house-motto {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--feed-card-channel-size); line-height: 1.4; color: var(--text-secondary);
}
.house-card.unknown {
  border-style: solid; border-color: var(--highlight-purple);
  background: var(--highlight-purple); color: var(--color-white);
  align-items: center; justify-content: center; text-align: center;
  padding: var(--space-12) var(--space-6);
}
.house-card.unknown:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--highlight-purple) }
.house-card.unknown .mark {
  font-family: var(--font-heading);
  font-size: calc(var(--text-5xl) + var(--space-4)); font-weight: 800; color: var(--color-white); line-height: 1;
  margin-bottom: var(--space-1);
  /* Override the global .mark highlighter style */
  background: none; padding: var(--space-0);
}
.house-card.unknown .label {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--text-sm); color: var(--color-white);
}
.house-card.unknown .cta {
  font-family: var(--font-mono);
  font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--color-white);
  margin-top: calc(var(--space-1) + var(--radius-xs));
}

/* ─────────────────────────────────────────────────────
   VISION SLAB
   ───────────────────────────────────────────────────── */
.vision-wrap {
  padding: var(--space-6) var(--space-0) var(--space-16);
}
.vision-slab {
  background: var(--surface-primary); border-radius: var(--radius-hero);
  margin: var(--space-0) auto; max-width: 1200px;
  padding: var(--space-16) calc(var(--space-12) + var(--space-2)); color: var(--text-primary);
  border: 1px solid var(--border-default);
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-8);
  align-items: end;
  box-shadow: var(--shadow-lg);
}
.vision-slab .sec-label { color: var(--text-muted) }
.vision-slab h2 {
  font-family: var(--font-heading);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.05;
  font-size: clamp(var(--text-4xl), calc(var(--text-5xl) - var(--space-2)), calc(var(--text-5xl) - var(--space-1)));
  margin-bottom: var(--space-4); color: var(--text-primary);
}
.vision-slab h2 .soft {
  background: var(--accent-primary);
  border-radius: var(--radius-md);
  color: var(--color-black);
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic; font-weight: 500;
  padding: var(--space-0) var(--space-3) var(--space-1);
}
.vision-slab h2 .vision-highlight {
  background: var(--accent-primary);
  color: var(--color-black);
  border-radius: calc(var(--radius-sm) + var(--radius-xs));
  display: inline-block;
  line-height: 1.02;
  padding: var(--space-0) var(--space-3) var(--space-1);
}
.vision-slab p {
  color: var(--text-secondary); font-size: var(--feed-card-body-size); line-height: 1.6;
  max-width: 580px;
}
.vision-btn {
  background: var(--accent-primary); color: var(--color-black);
  font-weight: 600; font-size: var(--text-sm);
  padding: calc(var(--space-3) + var(--radius-xs)) calc(var(--space-6) + var(--radius-xs)); border-radius: var(--radius-full);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: calc(var(--space-2) + var(--radius-xs));
  white-space: nowrap;
}
.vision-btn:hover { background: var(--accent-primary-hover) }

/* ─────────────────────────────────────────────────────
   HOUSE PARTY SUMMER (/sorting/2)
   ───────────────────────────────────────────────────── */
.sorting-page--party .party-hero {
  align-items: start;
  gap: calc(var(--space-12) + var(--space-2));
  padding-bottom: calc(var(--space-10) + var(--space-1));
}
.sorting-page--party .headline {
  font-size: clamp(calc(var(--text-5xl) - var(--space-2)), calc(var(--text-5xl) + var(--space-4)), calc(var(--text-5xl) + var(--space-6) + var(--radius-xs)));
  margin-bottom: calc(var(--space-5) + var(--radius-xs));
}
.sorting-page--party .headline .hl {
  padding: var(--space-0) calc(var(--space-4) + var(--radius-xs)) var(--space-1);
}
.sorting-page--party .sub {
  font-size: var(--text-xl);
  margin-bottom: calc(var(--space-4) + var(--radius-xs));
}
.party-now {
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
  margin: calc(-1 * var(--space-1) - var(--radius-xs)) var(--space-0) calc(var(--space-5) + var(--radius-xs));
  max-width: 520px;
}
.party-primary-cta {
  margin-bottom: calc(var(--space-5) + var(--radius-xs));
}
.party-flow {
  display: grid;
  gap: calc(var(--space-2) + var(--radius-xs));
  max-width: 560px;
  margin-bottom: calc(var(--space-5) + var(--radius-xs));
}
.party-flow p {
  margin: var(--space-0);
  color: var(--text-secondary);
  font-size: var(--feed-card-body-size);
  line-height: 1.45;
}
.party-flow b {
  color: var(--text-primary);
}
.party-flow .party-then {
  margin-top: var(--radius-xs);
}
.party-flow .party-then b {
  display: inline-block;
  background: var(--highlight-yellow);
  border-radius: var(--radius-sm);
  padding: var(--radius-xs) var(--space-2);
}
.party-flow .party-question {
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-style: italic;
}
.party-enough {
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: 700;
  line-height: 1.25;
  margin: var(--space-0) var(--space-0) var(--space-5);
  max-width: 520px;
}
.party-preview {
  align-self: start;
  max-width: 560px;
  margin-top: calc(var(--space-16) * 5);
}
.party-preview .vals {
  gap: calc(var(--space-2) + var(--radius-xs));
  margin-bottom: var(--space-0);
}
.party-preview .v {
  font-size: var(--text-sm);
  padding: calc(var(--space-2) + var(--radius-xs)) var(--space-4);
}
.party-preview-note {
  border-top: 1px solid var(--border-soft);
  color: var(--text-secondary);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-style: italic;
  line-height: 1.45;
  margin: calc(var(--space-5) + var(--radius-xs)) var(--space-0) var(--space-0);
  padding-top: calc(var(--space-4) + var(--radius-xs));
}
.party-intent {
  padding-top: calc(var(--space-16) + var(--space-3));
  padding-bottom: calc(var(--space-16) + var(--space-2));
}
.intent-lines {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: calc(var(--space-8) + var(--radius-xs));
}
.intent-lines p {
  align-items: center;
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  display: flex;
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: var(--space-0);
  min-height: 132px;
  padding: calc(var(--space-6) + var(--radius-xs));
}
.party-entry-wrap {
  max-width: 1280px;
  margin: var(--space-0) auto;
  padding: var(--space-0) var(--space-10) var(--space-10);
}
.party-entry {
  background: var(--surface-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-lg);
  padding: calc(var(--space-12) + var(--space-1) + var(--radius-xs)) calc(var(--space-16) - var(--space-1) - var(--radius-xs));
}
.party-entry-copy {
  max-width: 780px;
}
.party-entry-kicker {
  display: inline-block;
  background: var(--highlight-yellow);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.13em;
  margin-bottom: calc(var(--space-5) + var(--radius-xs));
  padding: calc(var(--space-1) + var(--radius-xs)) var(--space-3);
  text-transform: uppercase;
}
.party-entry h2 {
  color: var(--text-primary);
  font-family: var(--font-heading);
  font-size: clamp(calc(var(--text-4xl) + var(--space-2) + var(--radius-xs)), calc(var(--text-5xl) + var(--space-2)), calc(var(--text-5xl) + var(--space-5)));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: var(--space-0) var(--space-0) var(--space-6);
}
.party-entry-highlight {
  background: var(--accent-primary);
  border-radius: calc(var(--radius-md) + var(--radius-xs));
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  color: var(--text-primary);
  display: inline;
  line-height: 1.08;
  padding: var(--space-0) calc(var(--space-3) + var(--radius-xs)) calc(var(--space-1) + var(--radius-xs));
}
.party-entry p {
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: clamp(var(--text-xl), var(--text-2xl), calc(var(--text-2xl) + var(--space-1)));
  font-style: italic;
  font-weight: 600;
  line-height: 1.28;
  margin: var(--space-0) var(--space-0) var(--space-5);
}
.party-entry-rule {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--space-2) + var(--radius-xs));
  margin: calc(var(--space-2) + var(--radius-xs)) var(--space-0) calc(var(--space-6) + var(--radius-xs));
}
.party-entry-rule span {
  background: var(--surface-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  color: var(--text-primary);
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.05em;
  line-height: 1;
  padding: var(--space-3) calc(var(--space-3) + var(--radius-xs));
  text-transform: uppercase;
}
.party-entry-rule span:first-child {
  background: var(--highlight-yellow);
  border-color: var(--highlight-yellow);
}
.party-entry-rule span:nth-child(2) {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}
.party-entry .ds-btn {
  margin-top: calc(var(--space-3) + var(--radius-xs));
}
.celebration-wrap {
  max-width: 1280px;
  margin: var(--space-0) auto;
  padding: var(--space-6) var(--space-10) calc(var(--space-16) + var(--space-4));
}
.celebration {
  background: var(--accent-primary);
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-lg);
  color: var(--color-black);
  overflow: hidden;
  padding: calc(var(--space-16) + var(--space-3) + var(--radius-xs)) var(--space-16);
}
.celebration-copy {
  max-width: 780px;
}
.celebration-kicker {
  display: inline-block;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  color: var(--color-black);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-bottom: var(--space-6);
  padding: calc(var(--space-1) + var(--radius-xs)) var(--space-3);
  text-transform: uppercase;
}
.celebration h2 {
  color: var(--color-black);
  font-family: var(--font-heading);
  font-size: clamp(calc(var(--text-5xl) - var(--space-2)), calc(var(--text-5xl) + var(--space-4)), calc(var(--text-5xl) + var(--space-8) + var(--space-1)));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: var(--space-0) var(--space-0) calc(var(--space-6) + var(--space-1));
}
.celebration h2 span {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}
.celebration p {
  color: var(--text-primary);
  font-size: clamp(var(--text-lg), var(--text-xl), var(--text-2xl));
  line-height: 1.45;
  margin: var(--space-0) var(--space-0) calc(var(--space-4) + var(--radius-xs));
  max-width: 700px;
}
.celebration .celebration-punch {
  color: var(--color-black);
  font-family: var(--font-serif);
  font-size: clamp(var(--text-2xl), var(--text-3xl), calc(var(--text-4xl) + var(--radius-xs)));
  font-style: italic;
  font-weight: 700;
  margin: var(--space-3) var(--space-0) calc(var(--space-6) + var(--space-1) + var(--radius-xs));
}
@media (max-width: 900px) {
  .sorting-page--party .party-hero {
    gap: calc(var(--space-8) + var(--space-1));
  }
  .intent-lines {
    grid-template-columns: 1fr;
  }
  .intent-lines p {
    min-height: auto;
  }
  .party-entry {
    padding: calc(var(--space-10) + var(--space-1)) calc(var(--space-8) + var(--radius-xs));
  }
}
@media (max-width: 1100px) {
  .party-preview {
    margin-top: var(--space-0);
  }
}
@media (max-width: 720px) {
  .sorting-page--party .headline {
    font-size: calc(var(--text-5xl) + var(--space-4));
    line-height: 0.92;
    width: calc(100vw - var(--space-10));
  }
  .sorting-page--party .headline br {
    display: none;
  }
  .sorting-page--party .headline .hl {
    box-sizing: border-box;
    border-radius: var(--radius-md);
    display: block;
    margin-right: var(--space-0);
    padding: var(--radius-xs) var(--space-3) var(--space-1);
    width: 100%;
  }
  .party-primary-cta {
    margin-bottom: calc(var(--space-4) + var(--radius-xs));
  }
  .party-primary-cta .ds-btn {
    justify-content: center;
    width: 100%;
  }
  .party-flow p {
    font-size: var(--feed-card-body-size);
  }
  .party-preview .v {
    font-size: var(--feed-card-channel-size);
    padding: var(--space-2) var(--space-3);
  }
  .celebration-wrap {
    padding: var(--space-6) var(--space-5) var(--space-16);
  }
  .party-entry-wrap {
    padding: var(--space-0) var(--space-5) calc(var(--space-8) + var(--space-1));
  }
  .party-entry {
    border-radius: var(--radius-card);
    padding: calc(var(--space-10) - var(--radius-xs)) calc(var(--space-6) + var(--space-1));
  }
  .party-entry h2 {
    font-size: calc(var(--text-4xl) + var(--space-2) + var(--radius-xs));
  }
  .party-entry-highlight {
    border-radius: calc(var(--radius-sm) + var(--radius-xs));
    padding: var(--space-0) calc(var(--space-2) + var(--radius-xs)) var(--space-1);
  }
  .party-entry p {
    font-size: var(--text-xl);
  }
  .party-entry-rule {
    flex-direction: column;
    align-items: flex-start;
  }
  .party-entry .ds-btn {
    box-sizing: border-box;
    justify-content: center;
    max-width: 100%;
    width: 100%;
  }
  .celebration {
    border-radius: var(--radius-card);
    padding: calc(var(--space-12) + var(--space-1)) calc(var(--space-6) + var(--space-1));
  }
  .celebration h2 {
    font-size: calc(var(--text-5xl) - var(--space-2));
  }
  .celebration p {
    font-size: var(--text-lg);
  }
  .celebration .celebration-punch {
    font-size: var(--text-2xl);
  }
}

/* ─────────────────────────────────────────────────────
   COMMUNITY (3 feed post previews)
   ───────────────────────────────────────────────────── */
.community-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
  margin-top: var(--space-4);
}
.post {
  background: var(--surface-primary); border-radius: var(--radius-card);
  border: 1px solid var(--border-default); padding: calc(var(--space-5) + var(--radius-xs)) calc(var(--space-5) + var(--radius-xs)) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-3);
  box-shadow: var(--shadow-sm);
}
.sorting-page .post-head {
  display: flex; align-items: flex-start; gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs); font-weight: 500; color: var(--text-muted);
  letter-spacing: 0.06em;
}
.post-icon-stack {
  position: relative; width: 36px; height: 36px; flex-shrink: 0;
}
.post-house-icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm); object-fit: cover;
}
.post-avatar-badge {
  position: absolute; bottom: -3px; right: -3px;
  width: 18px; height: 18px; border-radius: var(--radius-full);
  border: 2px solid var(--surface-primary);
}
.post-meta-col { flex: 1; min-width: 0; }
.post-title-row {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
}
.post-separator {
  color: var(--text-muted);
}
.sorting-page .post-head .house {
  color: var(--text-primary); font-weight: 700; text-transform: none; letter-spacing: 0;
  font-family: var(--font-body); font-size: var(--feed-card-channel-size);
}
.sorting-page .post-head .chan {
  background: var(--accent-dark); color: var(--text-inverse);
  padding: var(--radius-xs) var(--space-2); border-radius: calc(var(--radius-xs) + var(--radius-xs));
  font-size: calc(var(--text-xs) - var(--radius-xs)); font-weight: 700;
}
.post-byline {
  display: flex; align-items: center; gap: calc(var(--space-1) + var(--radius-xs));
  font-size: var(--feed-card-channel-size); font-family: var(--font-body);
  margin-top: var(--radius-xs); letter-spacing: 0;
}
.post-byline .when { color: var(--text-muted); font-size: var(--text-xs); margin-left: auto }
.post-author {
  display: flex; align-items: center; gap: calc(var(--space-2) + var(--radius-xs));
  font-size: var(--feed-card-channel-size);
}
.post-author img {
  width: 32px; height: 32px; border-radius: var(--radius-full);
}
.post-author b { color: var(--text-primary); font-weight: 700 }
.post-author .val { color: var(--accent-tertiary); font-weight: 600 }
.post-author .when { color: var(--text-muted); font-size: var(--text-xs); margin-left: auto }
.sorting-page .post-body {
  font-size: var(--text-sm); line-height: 1.55; color: var(--text-primary);
}
.sorting-page .post-body.small { font-size: var(--feed-card-channel-size); color: var(--text-secondary) }
.post-reply {
  background: var(--surface-app); border-radius: calc(var(--radius-sm) + var(--radius-xs));
  padding: calc(var(--space-2) + var(--radius-xs)) var(--space-3); font-size: var(--feed-card-channel-size); color: var(--text-secondary);
  display: flex; gap: var(--space-2); align-items: flex-start;
}
.post-reply b { color: var(--text-primary); font-weight: 700; flex-shrink: 0 }
.post-image {
  border-radius: var(--radius-md); overflow: hidden; margin: var(--space-0) calc(-1 * var(--radius-xs));
}
.post-image img {
  width: 100%; display: block; object-fit: cover;
}
.post-app-card {
  background: linear-gradient(135deg, var(--accent-tertiary-subtle), var(--surface-primary));
  border: 1px solid var(--accent-tertiary-subtle);
  border-radius: var(--radius-md); padding: calc(var(--space-3) + var(--radius-xs));
  display: flex; gap: var(--space-3); align-items: stretch;
  overflow: hidden;
}
.post-app-card-text {
  flex: 1; display: flex; flex-direction: column; gap: var(--space-1);
}
.post-app-card-img {
  width: 80px; height: 100px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0;
}
.post-app-card .app-tag {
  font-family: var(--font-mono);
  font-size: calc(var(--text-xs) - var(--radius-xs)); font-weight: 700; letter-spacing: 0.1em;
  color: var(--accent-tertiary); text-transform: uppercase;
}
.post-app-card .app-title {
  font-family: var(--font-heading);
  font-weight: 700; font-size: var(--text-sm); color: var(--text-primary);
}
.post-app-card .app-body { font-size: var(--feed-card-channel-size); color: var(--text-secondary); line-height: 1.4 }
.post-event {
  background: var(--surface-secondary); color: var(--text-primary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md); padding: calc(var(--space-3) + var(--radius-xs)) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.post-event .tag {
  align-self: flex-start;
  background: var(--accent-primary);
  border-radius: var(--radius-sm);
  color: var(--color-black);
  font-family: var(--font-mono);
  font-size: calc(var(--text-xs) - var(--radius-xs)); font-weight: 700; letter-spacing: 0.1em;
  padding: var(--radius-xs) var(--space-2);
  text-transform: uppercase;
}
.post-event .t {
  font-family: var(--font-heading);
  font-weight: 700; font-size: var(--text-base);
}
.post-event .when2 { font-size: var(--text-xs); color: var(--text-muted) }
.post-foot {
  display: flex; gap: var(--space-2); padding-top: calc(var(--space-2) + var(--radius-xs));
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: var(--text-xs); font-weight: 700; color: var(--text-muted);
}
.post-foot .act {
  display: inline-flex; align-items: center; gap: calc(var(--space-1) + var(--radius-xs));
  padding: calc(var(--space-1) + var(--radius-xs)) calc(var(--space-2) + var(--radius-xs)); border-radius: var(--radius-full);
  border: 1px solid var(--border-default);
}
.post-foot .act iconify-icon { flex-shrink: 0; height: 16px; width: 16px }
.post-foot .act:last-child { margin-left: auto }

/* ─────────────────────────────────────────────────────
   INTENT QUOTE SLAB
   ───────────────────────────────────────────────────── */
.quote-slab {
  max-width: 1280px; margin: var(--space-0) auto;
  padding: var(--space-10) var(--space-10) calc(var(--space-16) + var(--space-4));
}
.quote-inner {
  background: var(--surface-primary); color: var(--text-primary);
  border-radius: var(--radius-hero);
  padding: calc(var(--space-16) + var(--space-2)) calc(var(--space-12) + var(--space-2));
  max-width: 980px;
  border: 1px solid var(--border-default);
  box-shadow: var(--shadow-lg);
}
.quote-inner .sec-label { color: var(--text-muted) }
.quote-inner h2 {
  font-family: var(--font-heading);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.05;
  font-size: clamp(var(--text-4xl), calc(var(--text-5xl) - var(--space-2)), calc(var(--text-5xl) - var(--space-1)));
  margin-bottom: var(--space-5); color: var(--text-primary);
}
.quote-inner h2 .soft {
  background: var(--accent-primary);
  border-radius: var(--radius-md);
  color: var(--color-black);
  display: inline-block;
  font-family: var(--font-serif);
  font-style: italic; font-weight: 500;
  padding: var(--space-0) var(--space-3) var(--space-1);
}
.quote-inner p {
  color: var(--text-secondary); font-size: var(--feed-card-body-size); line-height: 1.6;
  max-width: 640px; margin-bottom: var(--space-3);
}
.quote-inner .quote-emphasis {
  color: var(--text-primary);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-style: italic;
}
.quote-inner em {
  font-family: var(--font-serif);
  font-style: italic; color: var(--text-primary);
}

/* ─────────────────────────────────────────────────────
   FAQ
   ───────────────────────────────────────────────────── */
.faq-list {
  display: grid; grid-template-columns: 1fr; gap: var(--space-3);
  max-width: 820px;
}
.faq-item {
  background: var(--surface-primary); border-radius: var(--radius-lg);
  border: 1px solid var(--border-default); overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-normal);
}
.faq-item[open] {
  box-shadow: var(--shadow-md);
}
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: var(--space-5) var(--space-6);
  font-family: var(--font-heading);
  font-weight: 700; font-size: var(--text-lg); color: var(--text-primary);
  display: flex; justify-content: space-between; gap: var(--space-4);
  align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none }
.faq-item summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-weight: 400; font-size: var(--text-xl);
  color: var(--text-muted); line-height: 1;
  transition: transform var(--duration-normal);
}
.faq-item[open] summary::after { content: '\2212' }
.faq-body {
  padding: var(--space-0) var(--space-6) calc(var(--space-5) + var(--radius-xs));
  font-size: var(--text-sm); line-height: 1.6; color: var(--text-secondary);
}

/* ─────────────────────────────────────────────────────
   FINAL CTA
   ───────────────────────────────────────────────────── */
.final-wrap {
  max-width: 1280px; margin: var(--space-0) auto;
  padding: var(--space-10) var(--space-10) calc(var(--space-16) + var(--space-4));
}
.final {
  background: var(--accent-primary);
  padding: calc(var(--space-16) + var(--space-8)) var(--space-10);
  text-align: center;
  border-radius: var(--radius-hero);
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.final::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 0%,
                var(--accent-primary-subtle) 0%, transparent 60%);
  pointer-events: none;
}
.final > * { position: relative; z-index: var(--z-base) }
.final h2 {
  font-family: var(--font-heading);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.02;
  font-size: clamp(calc(var(--text-5xl) - var(--space-2)), calc(var(--text-5xl) + var(--space-4)), calc(var(--text-5xl) + var(--space-10)));
  color: var(--color-black); margin: var(--space-0) auto var(--space-4);
  max-width: 900px;
}
.final h2 .soft {
  font-family: var(--font-serif);
  font-style: italic; font-weight: 500;
}
.final p {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--text-xl); color: var(--color-black); margin-bottom: var(--space-8);
}

/* ─────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────── */
.sorting-page footer {
  background: var(--surface-primary); color: var(--text-secondary);
  border-top: 1px solid var(--border-default);
  padding: calc(var(--space-12) + var(--space-2)) var(--space-10) var(--space-10);
}
.foot-inner {
  max-width: 1280px; margin: var(--space-0) auto;
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: start;
}
.sorting-page footer h3 {
  font-family: var(--font-heading);
  font-weight: 800; font-size: var(--text-xl); color: var(--text-primary);
  margin-bottom: var(--space-2); letter-spacing: -0.01em;
}
.sorting-page footer h3 .soft {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
}
.sorting-page footer .tagline {
  font-family: var(--font-serif); font-style: italic;
  font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: calc(var(--space-6) + var(--space-1));
}
.foot-links {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  font-size: var(--feed-card-channel-size); color: var(--text-secondary);
}
.foot-links a {
  text-decoration: none; color: inherit;
  transition: color var(--duration-fast);
}
.foot-links a:hover { color: var(--text-primary) }
.copyright {
  font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: 0.04em;
  color: var(--text-muted); margin-top: var(--space-10);
  max-width: 1280px; margin-left: auto; margin-right: auto;
  padding-top: var(--space-6); border-top: 1px solid var(--border-default);
}

/* ─────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; gap: var(--space-10); padding: var(--space-0) var(--space-8) var(--space-16) }
  .values-section { grid-template-columns: 1fr; gap: var(--space-12) }
  .vision-slab { grid-template-columns: 1fr; padding: calc(var(--space-12) + var(--space-2)) var(--space-10) }
  .house-grid { grid-template-columns: repeat(2, 1fr) }
  .feat-grid, .how-grid, .community-grid { grid-template-columns: 1fr 1fr }
}
@media (max-width: 720px) {
  .hero { padding: var(--space-0) var(--space-5) var(--space-12); gap: var(--space-8) }
  .boh-commercial {
    width: 100%;
  }
  .boh-commercial__composer {
    gap: var(--space-2);
    grid-template-columns: minmax(0, 1fr) var(--size-14);
    padding: var(--space-2);
  }
  .boh-commercial__field {
    font-size: var(--text-sm);
    min-height: var(--size-14);
    padding: var(--space-3);
  }
  .boh-commercial__glyph-btn {
    border-radius: var(--radius-md);
    height: var(--size-14);
    width: var(--size-14);
  }
  .boh-commercial__cursor {
    display: none;
  }
  .boh-commercial {
    --boh-commercial-meter-size: calc(var(--size-12) + var(--space-1));
  }
  .boh-commercial__terminal-body {
    gap: var(--space-4);
    padding: var(--space-5);
  }
  .boh-commercial__meter-panel {
    gap: var(--space-3);
    grid-template-columns: var(--boh-commercial-meter-size) minmax(0, 1fr);
  }
  .boh-commercial__evolution-copy {
    gap: var(--space-2);
  }
  .boh-commercial__meter-ring {
    justify-self: start;
  }
  .boh-commercial__meter-ring::before {
    inset: var(--space-1);
  }
  .boh-commercial__meter-icon {
    font-size: var(--size-7);
  }
  .boh-commercial__meter-chip {
    font-size: var(--text-xs);
    height: var(--size-7);
    min-width: var(--size-7);
  }
  .boh-commercial__label,
  .boh-commercial__version {
    font-size: var(--text-xs);
  }
  .boh-commercial__version {
    min-height: var(--size-8);
    padding: var(--space-1) var(--space-3);
  }
  .boh-commercial__headline {
    font-size: var(--text-xl);
  }
  .boh-commercial__state {
    font-size: var(--text-sm);
    min-height: var(--size-6);
  }
  .boh-commercial__state--active {
    font-size: var(--text-lg);
    min-height: var(--size-7);
  }
  .boh-commercial__state-dot {
    height: var(--space-2);
    width: var(--space-2);
  }
  .boh-commercial__build-title {
    font-size: var(--text-xl);
    min-height: calc(var(--text-xl) * 2.35);
  }
  .boh-commercial__build-list {
    min-height: calc(var(--text-base) * 14.5);
  }
  .boh-commercial__build-item {
    font-size: var(--text-base);
    grid-template-columns: var(--size-5) minmax(0, 1fr);
    min-height: calc(var(--text-base) * 2.1);
  }
  .boh-commercial__layer-marker {
    height: var(--size-4);
    width: var(--size-4);
  }
  .boh-commercial__layer-marker iconify-icon {
    font-size: var(--text-xs);
  }
  .boh-commercial__mission {
    font-size: var(--text-sm);
  }
  .headline,
  .sec-title,
  .features-title,
  .vision-slab h2,
  .quote-inner h2,
  .final h2 {
    font-size: calc(var(--text-4xl) + var(--space-2));
  }
  /* Keep the hero loud without forcing horizontal scroll on phone widths. */
  .headline {
    font-size: var(--text-5xl);
    line-height: 0.98;
  }
  .headline .hl {
    margin-right: var(--space-1);
    padding-left: var(--space-3);
    padding-right: var(--space-3);
  }
  .sub { font-size: var(--text-xl) }
  section.slab { padding: var(--space-16) var(--space-5) }
  .vision-slab { margin-left: var(--space-5); margin-right: var(--space-5); padding: var(--space-12) calc(var(--space-6) + var(--space-1)); border-radius: var(--radius-card) }
  .quote-slab { padding: var(--space-8) var(--space-5) var(--space-16) }
  .quote-inner { padding: var(--space-12) calc(var(--space-6) + var(--space-1)); border-radius: var(--radius-card) }
  .house-grid { grid-template-columns: 1fr }
  .feat-grid, .how-grid, .community-grid { grid-template-columns: 1fr }
  .final { padding: var(--space-16) var(--space-6) }
  .final p { font-size: var(--feed-card-body-size) }
  .foot-inner { grid-template-columns: 1fr }
  .sorting-page footer .ds-btn { align-self: start }
}

/* Mobile: card-containing slabs use the shared feed gutter so cards extend
   near-full-width, matching /feed. Text-only slabs keep their wider padding. */
@media (max-width: 767px) {
  section.slab:has(.house-grid),
  section.slab:has(.community-grid),
  section.slab:has(.feat-grid),
  section.slab:has(.how-grid) {
    padding-left: var(--space-5);
    padding-right: var(--space-5);
  }

  #how-it-works .sec-title {
    font-size: calc(var(--text-4xl) + var(--space-1));
    letter-spacing: 0;
  }

  #how-it-works .sec-title .hl {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    display: inline;
    padding: var(--space-0) calc(var(--space-2) + var(--radius-xs)) var(--space-1);
  }

  section.slab:has(.house-grid) > .house-grid,
  section.slab:has(.community-grid) > .community-grid,
  section.slab:has(.feat-grid) > .feat-grid,
  section.slab:has(.how-grid) > .how-grid {
    margin-left: calc(var(--feed-card-gutter-mobile) - var(--space-5));
    margin-right: calc(var(--feed-card-gutter-mobile) - var(--space-5));
    max-width: none;
    width: calc(100% + var(--space-5) + var(--space-5) - var(--feed-card-gutter-mobile) - var(--feed-card-gutter-mobile));
  }
}

@media (prefers-reduced-motion: reduce) {
  .boh-commercial__caret,
  .boh-commercial.is-clicking .boh-commercial__cursor {
    animation: none;
  }
  .boh-commercial__cursor,
  .boh-commercial__terminal,
  .boh-commercial__glyph-btn,
  .boh-commercial__glyph-btn img,
  .boh-commercial__meter-chip,
  .boh-commercial__rail-fill {
    transition: none;
  }
}