@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap");

:root {
  color-scheme: light;
  --bg: #fbf4ef;
  --surface: #fffaf7;
  --surface-2: #efe0dc;
  --text: #2b201d;
  --muted: #7a6b64;
  --line: #dfcac2;
  --line-strong: #a78a7b;
  --accent: #d6a6b5;
  --accent-2: #41618b;
  --accent-3: #9b623f;
  --blossom: #eacbd3;
  --blossom-soft: #f8e8ea;
  --denim: #41618b;
  --denim-soft: #9bb1d1;
  --espresso: #352d2c;
  --brown: #5c4b3a;
  --cognac: #bd7b45;
  --leaf: #86a148;
  --fun: #d6457a;
  --fun-soft: #fbe0ea;
  --grid-line: rgba(91, 75, 58, 0.07);
  --draft-line: rgba(91, 75, 58, 0.16);
  --draft-text: rgba(91, 75, 58, 0.34);
  --header-bg: rgba(251, 244, 239, 0.91);
  --cursor-core: rgba(248, 232, 234, 0.96);
  --cursor-highlight: rgba(255, 250, 247, 0.82);
  --cursor-ring: rgba(155, 98, 63, 0.52);
  --cursor-halo: rgba(214, 166, 181, 0.32);
  --cursor-inner: rgba(65, 97, 139, 0.18);
  --shadow: 0 24px 70px rgba(53, 45, 44, 0.12);
  --soft-shadow: 0 14px 38px rgba(53, 45, 44, 0.08);
  --radius: 8px;
  --max: 1540px;
  --nav-h: 112px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --grotesk: "Space Grotesk", Inter, ui-sans-serif, system-ui, sans-serif;
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --display-font: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #18100f;
  --surface: #211817;
  --surface-2: #302321;
  --text: #fbf0eb;
  --muted: #c4ada4;
  --line: #4c3934;
  --line-strong: #85695d;
  --accent: #e7b9c5;
  --accent-2: #8eadd6;
  --accent-3: #d09260;
  --blossom: #e7b9c5;
  --blossom-soft: #3d2b2f;
  --denim: #8eadd6;
  --denim-soft: #4c668b;
  --espresso: #120d0c;
  --brown: #c09d82;
  --cognac: #d09260;
  --leaf: #a7bf67;
  --fun: #ff9ab6;
  --fun-soft: #3a232c;
  --grid-line: rgba(251, 240, 235, 0.06);
  --draft-line: rgba(251, 240, 235, 0.15);
  --draft-text: rgba(251, 240, 235, 0.28);
  --header-bg: rgba(24, 16, 15, 0.9);
  --cursor-core: rgba(48, 35, 33, 0.96);
  --cursor-highlight: rgba(251, 240, 235, 0.44);
  --cursor-ring: rgba(231, 185, 197, 0.56);
  --cursor-halo: rgba(142, 173, 214, 0.24);
  --cursor-inner: rgba(208, 146, 96, 0.2);
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.34);
  --soft-shadow: 0 14px 38px rgba(0, 0, 0, 0.24);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0;
}

body.menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

.site-shell {
  min-height: 100vh;
}

.container {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 0;
  background: transparent;
  backdrop-filter: blur(0);
  transform: translateY(0);
  transition: background 180ms ease, backdrop-filter 180ms ease, box-shadow 180ms ease, transform 260ms ease;
  will-change: transform;
}

.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 52%, transparent);
  backdrop-filter: blur(18px) saturate(1.18);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--brown) 6%, transparent);
}

.site-header.is-hidden {
  transform: translateY(-100%);
}

.nav {
  position: relative;
  display: flex;
  min-height: var(--nav-h);
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  font-family: var(--grotesk);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.wordmark {
  display: inline-block;
  transform: translateY(-1px);
}

.brand-mark {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  font-weight: 900;
  box-shadow: var(--soft-shadow);
}

.brand-mark::after {
  position: absolute;
  right: -7px;
  bottom: 7px;
  width: 22px;
  height: 5px;
  border-radius: 999px;
  background: var(--accent-2);
  content: "";
}

.nav-links,
.nav-actions {
  display: flex;
  align-items: center;
  gap: 42px;
}

.nav-links {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-links a,
.footer-nav a {
  position: relative;
  padding: 8px 0;
  color: var(--muted);
  font-family: var(--grotesk);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.nav-links a::after,
.footer-nav a::after {
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 1px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.4);
  transition: transform 160ms ease, opacity 160ms ease;
  content: "";
}

.nav-links a:hover,
.nav-links a.is-active,
.footer-nav a:hover {
  color: var(--text);
}

.nav-links a:hover::after,
.nav-links a.is-active::after,
.footer-nav a:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* Carolyn-inspired homepage */
.carolyn-home {
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blossom-soft) 76%, var(--bg)) 0%, var(--bg) 48%, color-mix(in srgb, var(--denim-soft) 18%, var(--bg)) 100%);
}

.cl-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(4px, 1.2vw, 20px) 0 clamp(18px, 3vw, 44px);
  background: transparent;
}

[data-theme="dark"] .cl-hero {
  background: transparent;
}

.hero-greeting-loop {
  position: absolute;
  top: clamp(14px, 2.8vw, 52px);
  right: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  width: 100%;
  height: clamp(60px, 16vw, 160px);
  pointer-events: none;
}

.hero-greeting-svg {
  display: block;
  width: 200%;
  height: auto;
  animation: wave-scroll 48s linear infinite;
  will-change: transform;
}

.greeting-svg-text {
  font-family: var(--grotesk);
  font-weight: 800;
  letter-spacing: -0.02em;
  fill: color-mix(in srgb, var(--accent) 84%, var(--cognac));
  opacity: 0.45;
  user-select: none;
}

.cl-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 3vw, 56px);
  align-items: center;
  padding-top: clamp(54px, 7vw, 118px);
  padding-bottom: clamp(54px, 7vw, 118px);
}

.cl-hero-type {
  display: grid;
  justify-items: start;
  text-align: left;
  max-width: min(1180px, 100%);
}

.cl-hero-type h1 {
  margin: 0;
  color: var(--text);
  font-family: var(--grotesk);
  font-size: clamp(3.1rem, 5.9vw, 8.2rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: 0;
}

.hero-kicker {
  max-width: 760px;
  margin: 0 0 clamp(14px, 2vw, 30px);
  color: color-mix(in srgb, var(--brown) 72%, var(--muted));
  font-family: var(--grotesk);
  font-size: clamp(0.85rem, 1vw, 1.08rem);
  font-weight: 850;
  line-height: 1.6;
  text-transform: uppercase;
}

[data-theme="dark"] .hero-kicker {
  color: var(--muted);
}

.cl-hello {
  display: inline;
  padding: 4px 0;
  line-height: 0.98;
}

.cl-feel-nowrap {
  display: inline;
  white-space: nowrap;
}

.word-cycle {
  position: relative;
  display: inline-grid;
  overflow: hidden;
  height: 1.02em;
  min-width: min(92vw, 4.75em);
  white-space: normal;
  margin-top: 0;
  color: var(--denim);
  font-family: var(--grotesk);
  font-weight: 850;
  line-height: 0.98;
  vertical-align: baseline;
}

.word-cycle span {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(1.08em) rotate(2deg);
  transform-origin: left bottom;
  animation: word-pop 8.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.word-cycle span:nth-child(2) {
  color: var(--accent);
  animation-delay: 2.2s;
}

.word-cycle span:nth-child(3) {
  color: var(--cognac);
  animation-delay: 4.4s;
}

.word-cycle span:nth-child(4) {
  color: var(--leaf);
  animation-delay: 6.6s;
}

.hero-summary {
  max-width: 760px;
  margin: clamp(14px, 2vw, 28px) 0 0;
  color: var(--muted);
  font-family: var(--grotesk);
  font-size: clamp(1.08rem, 1.35vw, 1.55rem);
  line-height: 1.45;
}

.cl-hero-image {
  position: relative;
  z-index: 2;
  overflow: hidden;
  width: 100%;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--line-strong) 54%, transparent);
  border-radius: var(--radius);
  background: var(--surface-2);
  box-shadow: var(--shadow);
  transform: translateY(var(--parallax-y, 0));
  transition: transform 180ms linear;
}

.cl-hero-image::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(53, 45, 44, 0.06)),
    radial-gradient(circle at 24% 18%, rgba(255, 232, 238, 0.36), transparent 0 28%);
  content: "";
  pointer-events: none;
}

[data-theme="dark"] .cl-hero-image::before {
  background:
    linear-gradient(180deg, rgba(24, 16, 15, 0.08), rgba(24, 16, 15, 0.42)),
    radial-gradient(circle at 24% 18%, rgba(231, 185, 197, 0.18), transparent 0 30%);
}

.cl-hero-image img {
  width: 100%;
  height: clamp(370px, 48vw, 650px);
  filter: saturate(0.96) contrast(1.02);
  object-fit: cover;
  object-position: 50% 38%;
  transform: scale(1.04);
}

.cl-project-content dt {
  display: block;
  color: var(--muted);
  font-family: var(--grotesk);
  font-size: 0.9rem;
}

.cl-project-content dd {
  display: block;
  margin: 8px 0 0;
  color: var(--text);
  font-family: var(--grotesk);
  font-size: 1rem;
  font-weight: 500;
}

.cl-work {
  padding: clamp(56px, 6vw, 100px) 0;
  background: color-mix(in srgb, var(--surface-2) 88%, var(--blossom-soft));
}

.cl-work {
  padding-top: clamp(36px, 4vw, 64px);
}

.cl-section-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 24px;
  row-gap: 0.12em;
}

.cl-section-title {
  margin: 0 0 clamp(28px, 3.4vw, 52px);
  color: var(--text);
  font-family: var(--grotesk);
  font-size: clamp(3.2rem, 8vw, 8rem);
  font-weight: 600;
  line-height: 0.9;
  text-transform: uppercase;
}

.cl-section-title span {
  display: inline-flex;
  gap: 0;
  margin-right: 0;
}

.cl-section-title > span {
  font-size: clamp(1.85rem, 3.4vw, 2.35rem);
}

.cl-section-title .cl-title-word {
  gap: 0;
  margin-right: 0;
}

.cl-section-title span span {
  display: inline-block;
  transition: color 220ms ease, transform 220ms ease;
}

.cl-section-title:hover .cl-title-word span:nth-child(odd) {
  transform: translateY(-0.08em);
}

.cl-section-title:hover .cl-title-word span:first-child {
  color: var(--denim);
}

.cl-section-title:hover .cl-title-word span:nth-child(3) {
  color: var(--cognac);
}

.cl-project-stack {
  display: grid;
  gap: clamp(40px, 5vw, 72px);
}

.cl-project {
  display: grid;
  grid-template-columns: minmax(240px, 0.94fr) minmax(300px, 1.06fr);
  gap: clamp(28px, 3.6vw, 60px);
  align-items: center;
  border-bottom: 1px solid color-mix(in srgb, var(--text) 82%, transparent);
  padding-bottom: clamp(32px, 4vw, 52px);
  perspective: 1400px;
  transition-delay: var(--project-delay, 0ms);
}

.cl-project-media {
  --hover-lift: 0px;
  --hover-x: 50%;
  --hover-y: 50%;
  --image-shift-x: 0px;
  --image-shift-y: 0px;
  --image-scale: 1.02;
  --parallax-y: 0px;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  grid-column: 2;
  grid-row: 1;
  display: block;
  overflow: hidden;
  background: color-mix(in srgb, var(--surface) 42%, var(--surface-2));
  box-shadow: 0 0 0 rgba(20, 18, 12, 0);
  transform: translate3d(0, calc(var(--parallax-y) + var(--hover-lift)), 0) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 360ms ease;
  will-change: transform;
}

.cl-project-media::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at var(--hover-x) var(--hover-y), rgba(255, 255, 255, 0.28), transparent 0 36%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

[data-theme="dark"] .cl-project-media::after {
  background: radial-gradient(circle at var(--hover-x) var(--hover-y), rgba(255, 225, 118, 0.18), transparent 0 38%);
}

.cl-project-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  height: auto;
  object-fit: cover;
  transform: translate3d(var(--image-shift-x), var(--image-shift-y), 0) scale(var(--image-scale));
  transition: transform 680ms cubic-bezier(0.22, 1, 0.36, 1), filter 400ms ease;
  will-change: transform;
}

.cl-project-media:hover,
.cl-project-media.is-hovering {
  --hover-lift: -10px;
  --image-scale: 1.07;
  box-shadow: 0 28px 70px rgba(20, 18, 12, 0.12);
}

[data-theme="dark"] .cl-project-media:hover,
[data-theme="dark"] .cl-project-media.is-hovering {
  box-shadow: 0 28px 70px rgba(231, 189, 52, 0.1);
}

.cl-project-media:hover::after,
.cl-project-media.is-hovering::after {
  opacity: 1;
}

.cl-project-media:hover img,
.cl-project-media.is-hovering img {
  filter: saturate(1.08);
}

.cl-pill {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  border: 1px solid color-mix(in srgb, var(--accent-3) 62%, transparent);
  border-radius: 999px;
  padding: 7px 15px;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  color: var(--accent-3);
  font-family: var(--grotesk);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  transform: translateZ(42px);
  transition: transform 240ms ease, background 240ms ease;
}

.cl-arrow {
  position: absolute;
  right: 24px;
  bottom: 20px;
  color: var(--text);
  font-family: var(--grotesk);
  font-size: clamp(1.5rem, 2.4vw, 2.4rem);
  line-height: 1;
  transform: translate3d(0, 0, 42px);
  transition: transform 240ms ease;
}

.cl-project-media:hover .cl-pill,
.cl-project-media.is-hovering .cl-pill {
  transform: translate3d(0, -3px, 42px);
}

.cl-project-media:hover .cl-arrow,
.cl-project-media.is-hovering .cl-arrow {
  transform: translate3d(8px, -8px, 42px);
}

.cl-project-content {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
  align-items: start;
  align-content: center;
}

.cl-project-content h2 {
  grid-column: auto;
  margin: 0;
  color: var(--text);
  font-family: var(--grotesk);
  font-size: clamp(1.65rem, 2.5vw, 2.7rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.cl-project-outcome {
  margin: 0;
  color: color-mix(in srgb, var(--text) 52%, transparent);
  font-family: var(--grotesk);
  font-size: clamp(1.02rem, 1.35vw, 1.35rem);
  font-weight: 500;
  line-height: 1.22;
}

.cl-project-content p:not(.cl-project-outcome) {
  max-width: 620px;
  margin: 0;
  color: var(--text);
  font-family: var(--grotesk);
  font-size: clamp(0.96rem, 0.95vw, 1.05rem);
  line-height: 1.55;
}

.cl-project-content dl {
  margin: 18px 0 0;
}

.cl-view-link {
  justify-self: start;
  border-bottom: 1px solid currentColor;
  color: var(--text);
  font-family: var(--grotesk);
  font-weight: 700;
}

.cl-contact {
  overflow: hidden;
  padding: clamp(76px, 10vw, 150px) 0 clamp(44px, 6vw, 80px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--espresso) 86%, var(--denim)) 0%, color-mix(in srgb, var(--denim) 70%, var(--espresso)) 100%);
  color: var(--surface);
}

.marquee {
  display: flex;
  width: 100%;
  overflow: hidden;
  color: color-mix(in srgb, var(--blossom) 72%, var(--surface));
  font-family: var(--grotesk);
  font-size: clamp(3.6rem, 10vw, 11rem);
  font-weight: 500;
  line-height: 0.92;
  text-transform: uppercase;
  white-space: nowrap;
}

.marquee-track {
  display: inline-block;
  min-width: max-content;
  animation: marquee 18s linear infinite;
}

.cl-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(300px, 1fr);
  gap: 40px;
  align-items: end;
  margin-top: clamp(58px, 8vw, 100px);
}

.cl-contact-grid p,
.cl-contact-grid a {
  margin: 0;
  color: var(--surface);
  font-family: var(--grotesk);
  font-size: clamp(1.2rem, 2vw, 2rem);
}

.cl-contact-grid a {
  justify-self: end;
  border-bottom: 1px solid currentColor;
}

.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes wave-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes word-pop {
  0%,
  5% {
    opacity: 0;
    transform: translateY(1.08em) rotate(2deg);
  }
  10%,
  23% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
  28%,
  100% {
    opacity: 0;
    transform: translateY(-1.08em) rotate(-2deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .cl-hero-image,
  .cl-project-media,
  .cl-project-media::after,
  .cl-project-media img,
  .cl-arrow,
  .cl-pill,
  .hero-greeting-svg,
  .word-cycle span,
  .marquee-track {
    animation: none;
    transition: none;
  }

  .reveal,
  .cl-project-media {
    opacity: 1;
    transform: none;
  }

  .cl-project-media img {
    transform: none;
  }

  .word-cycle span {
    opacity: 0;
    transform: none;
  }

  .word-cycle span:first-child {
    opacity: 1;
  }

  .hero-greeting-svg {
    transform: translateX(-10%);
  }
}

@media (max-width: 960px) {
  :root {
    --nav-h: 84px;
  }

  .cl-hero-grid {
    grid-template-columns: 1fr;
    padding-top: clamp(40px, 5.4vw, 66px);
    padding-bottom: clamp(40px, 5.4vw, 66px);
  }

  .cl-hero-type h1 {
    font-size: clamp(2.4rem, 7.5vw, 5.5rem);
  }

  .cl-project-content,
  .cl-contact-grid {
    grid-template-columns: 1fr;
  }

  .cl-project-content h2 {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
  }

  .cl-contact-grid a {
    justify-self: start;
  }

  .band {
    padding: 60px 0;
  }
}

@media (max-width: 760px) {
  .cl-project {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .cl-project-media,
  .cl-project-content {
    grid-column: 1;
    grid-row: auto;
  }

  .cl-project-media {
    order: 1;
  }

  .cl-project-content {
    order: 2;
  }

  .cl-project-media img {
    height: clamp(220px, 58vw, 380px);
  }

  .cl-project-content h2 {
    font-size: clamp(2rem, 9vw, 3.4rem);
  }
}

@media (max-width: 680px) {
  :root {
    --nav-h: 64px;
  }

  .cl-hero {
    padding-top: 12px;
  }

  .hero-greeting-loop {
    top: 10px;
  }

  .cl-hero-grid {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .cl-hero-type h1 {
    font-size: clamp(1.7rem, 8.2vw, 2.6rem);
    line-height: 1.04;
  }

  .word-cycle {
    min-width: min(88vw, 4.8em);
  }

  .hero-kicker {
    font-size: 0.8rem;
    margin-bottom: 0.9rem;
  }

  .hero-summary {
    font-size: 1rem;
    margin-top: 1.2rem;
  }

  .cl-section-title {
    font-size: clamp(2.6rem, 12.5vw, 4.2rem);
  }

  .band {
    padding: 48px 0;
  }

  .page-hero,
  .project-hero {
    padding: 44px 0 28px;
  }

  .cl-work {
    padding: 48px 0;
  }

  .cl-work {
    padding-top: 40px;
  }

  .cl-section-title {
    margin-bottom: 32px;
  }

  .cl-contact {
    padding: 48px 0 36px;
  }
}

.nav-actions .icon-button {
  display: inline-grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.to-top {
  display: inline-grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text);
  box-shadow: none;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}

.icon-button {
  color: var(--muted);
  font-size: 1.65rem;
  font-weight: 600;
}

[data-theme="dark"] .icon-button {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.icon-button:hover,
.to-top:hover {
  transform: translateY(-1px);
}

.menu-button {
  position: relative;
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: var(--brown);
  box-shadow: none;
  transform: none;
  transition: color 160ms ease, transform 180ms ease;
}

.menu-button span {
  position: absolute;
  top: calc(50% - 1px);
  left: 10px;
  width: 24px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
  transition: transform 200ms ease, opacity 160ms ease, width 180ms ease, background 160ms ease;
}

.menu-button span:first-child {
  transform: translateY(-7px);
}

.menu-button span:nth-child(2) {
  width: 18px;
  transform: translateX(3px);
}

.menu-button span:last-child {
  transform: translateY(7px);
}

.menu-button:hover,
.menu-button:focus-visible,
.menu-button.is-open {
  color: var(--denim);
  background: transparent;
  transform: none;
}

.menu-button:focus-visible {
  outline: 0;
}

.menu-button:focus-visible span {
  box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 58%, transparent);
}

.menu-button.is-open span:first-child {
  transform: rotate(45deg);
}

.menu-button.is-open span:nth-child(2) {
  opacity: 0;
  transform: translateX(3px) scaleX(0);
}

.menu-button.is-open span:last-child {
  transform: rotate(-45deg);
}

.button,
.ghost-button,
.danger-button,
.tiny-button {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 16px;
  background: var(--surface);
  color: var(--text);
  font-weight: 750;
  line-height: 1;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.button {
  border-color: transparent;
  background: var(--text);
  color: var(--bg);
}

.button:hover,
.ghost-button:hover,
.danger-button:hover,
.tiny-button:hover {
  transform: translateY(-1px);
}

.ghost-button:hover,
.tiny-button:hover {
  border-color: var(--line-strong);
}

.danger-button {
  color: #c43f4f;
}

.tiny-button {
  min-height: 32px;
  padding: 7px 10px;
  font-size: 0.86rem;
}

.hero {
  display: grid;
  min-height: calc(100svh - var(--nav-h));
  align-items: center;
  padding: 64px 0 44px;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.98fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: center;
}

.eyebrow,
.section-kicker {
  margin: 0 0 14px;
  color: var(--accent);
  font-size: 0.86rem;
  font-weight: 850;
  text-transform: uppercase;
}

.hero h1,
.page-hero h1,
.project-hero h1 {
  margin: 0;
  max-width: 880px;
  font-size: clamp(2.6rem, 7vw, 6.9rem);
  line-height: 0.96;
  letter-spacing: 0;
}

.hero h1 span {
  color: var(--accent);
}

.hero-subtitle {
  margin: 22px 0 0;
  max-width: 650px;
  color: var(--muted);
  font-size: clamp(1.05rem, 1rem + 0.55vw, 1.42rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 44px;
}

.meta-tile {
  min-height: 104px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
}

.meta-tile b {
  display: block;
  font-size: 1.1rem;
}

.meta-tile span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.92rem;
}

.hero-media {
  position: relative;
  isolation: isolate;
}

.hero-frame {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.hero-frame img {
  width: 100%;
  aspect-ratio: 1 / 0.86;
  object-fit: cover;
}

.hero-note {
  position: absolute;
  right: 18px;
  bottom: 18px;
  max-width: 250px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  box-shadow: var(--soft-shadow);
  backdrop-filter: blur(14px);
}

.hero-note p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.band {
  padding: 80px 0;
}

.band.alt {
  background: color-mix(in srgb, var(--surface-2) 52%, transparent);
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.section-head h2 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 4.2rem);
  line-height: 1;
}

.section-head p {
  max-width: 560px;
  margin: 0;
  color: var(--muted);
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.project-card {
  display: grid;
  min-height: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--soft-shadow);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.project-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
  transform: translateY(-4px);
}

.project-thumb {
  overflow: hidden;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--surface-2);
}

.project-thumb img {
  width: 100%;
  aspect-ratio: 1.12 / 1;
  object-fit: cover;
  transition: transform 240ms ease;
}

.project-card:hover .project-thumb img {
  transform: scale(1.025);
}

.project-card-body {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.project-card h3 {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.1;
}

.project-card p {
  margin: 0;
  color: var(--muted);
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.sample-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.sample-strip img {
  width: 100%;
  aspect-ratio: 1.25 / 1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  object-fit: cover;
}

.page-hero,
.project-hero {
  padding: 72px 0 42px;
}

.page-hero p,
.project-hero p {
  max-width: 770px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: clamp(1.05rem, 1rem + 0.45vw, 1.28rem);
}

.project-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.7fr);
  gap: 42px;
  align-items: end;
}

.project-cover {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.project-cover img {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: #ffffff;
  object-fit: contain;
}

.project-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.project-fact {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.project-fact span {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 750;
}

.project-fact b {
  display: block;
  margin-top: 4px;
}

.gallery {
  display: grid;
  gap: 18px;
}

.gallery-image {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--soft-shadow);
}

.gallery-image img {
  width: 100%;
  height: auto;
}

.gallery-caption {
  margin: 0;
  border-top: 1px solid var(--line);
  padding: 12px 16px;
  color: var(--muted);
  font-size: 0.9rem;
}

.project-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 44px;
}

.project-nav a {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  background: var(--surface);
}

.project-nav span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 850;
  text-transform: uppercase;
}

.project-nav b {
  display: block;
  margin-top: 6px;
  font-size: 1.2rem;
}


.site-footer {
  border-top: 1px solid var(--line);
  padding: 30px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.footer-inner p {
  margin: 0;
  /* darkened from bare --muted (was 4.18:1 on the footer in light) to clear AA;
     the mix stays light in dark mode, so dark (which already passed) is unaffected */
  color: color-mix(in srgb, var(--muted) 55%, var(--text));
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.empty-state {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 30px;
  color: var(--muted);
  text-align: center;
}

.admin-shell {
  padding: 34px 0 80px;
}

.admin-hero {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 24px;
}

.admin-hero h1 {
  margin: 0;
  font-size: clamp(2.2rem, 5vw, 4.8rem);
  line-height: 1;
}

.admin-hero p {
  max-width: 680px;
  margin: 12px 0 0;
  color: var(--muted);
}

.admin-toolbar,
.editor-actions,
.project-list-actions,
.image-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.admin-sidebar,
.admin-panel,
.preview-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--soft-shadow);
}

.admin-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + 18px);
  padding: 14px;
}

.admin-tabs {
  display: grid;
  gap: 8px;
}

.admin-tab {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 12px;
  background: transparent;
  color: var(--muted);
  text-align: left;
}

.admin-tab.is-active,
.admin-tab:hover {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--text);
}

.admin-main {
  display: grid;
  gap: 22px;
}

.admin-panel {
  padding: 20px;
}

.admin-panel h2 {
  margin: 0 0 16px;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
}

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

.field-grid.one {
  grid-template-columns: 1fr;
}

.field {
  display: grid;
  gap: 7px;
}

.field label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.field input,
.field textarea,
.field select {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--bg);
  color: var(--text);
  outline: none;
}

.field textarea {
  min-height: 120px;
  resize: vertical;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}

.help-text {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.project-list {
  display: grid;
  gap: 10px;
}

.project-row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--bg);
}

.project-row img {
  width: 54px;
  height: 54px;
  border-radius: var(--radius);
  object-fit: cover;
}

.project-row strong,
.project-row span {
  display: block;
}

.project-row span {
  color: var(--muted);
  font-size: 0.84rem;
}

.project-row.is-selected {
  border-color: var(--accent);
}

.split-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 20px;
  align-items: start;
}

.preview-panel {
  position: sticky;
  top: calc(var(--nav-h) + 18px);
  overflow: hidden;
}

.preview-panel .project-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.repeat-list {
  display: grid;
  gap: 12px;
}

.repeat-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--bg);
}

.image-editor {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.image-editor img {
  width: 86px;
  height: 86px;
  border-radius: var(--radius);
  object-fit: cover;
}

.image-actions {
  margin-top: 8px;
}

.status-pill {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cms-message {
  min-height: 22px;
  margin: 12px 0 0;
  color: var(--accent-3);
  font-weight: 750;
}

.to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 40;
  opacity: 0;
  pointer-events: none;
}

.to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.not-found {
  display: grid;
  min-height: calc(100svh - var(--nav-h));
  place-items: center;
  text-align: center;
}

.not-found h1 {
  margin: 0;
  font-size: clamp(2.6rem, 7vw, 6rem);
}

.not-found p {
  color: var(--muted);
}

@media (max-width: 920px) {
  .container {
    width: min(100% - 28px, var(--max));
  }

  .menu-button {
    display: inline-flex;
  }

  .nav-links {
    position: fixed;
    top: var(--nav-h);
    right: 0;
    left: 0;
    display: none;
    z-index: 60;
    gap: 10px;
    border: 0;
    border-radius: 0;
    padding: 14px 20px 18px;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(20px) saturate(1.18);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--brown) 10%, transparent);
  }

  .nav-links.is-open {
    display: grid;
  }

  .nav-links a {
    display: inline-flex;
    width: max-content;
    padding: 6px 0;
    font-size: clamp(1rem, 3.6vw, 1.22rem);
  }

  .hero-grid,
  .project-hero-grid,
  .admin-grid,
  .split-editor {
    grid-template-columns: 1fr;
  }

  .admin-sidebar,
  .preview-panel {
    position: static;
  }

  .work-grid {
    grid-template-columns: 1fr;
  }

  .sample-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  :root {
    --nav-h: 64px;
  }

  .brand-text {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .hero {
    min-height: auto;
    padding-top: 46px;
  }

  .hero-meta,
  .project-facts,
  .project-nav,
  .field-grid,
  .sample-strip {
    grid-template-columns: 1fr;
  }

  .section-head,
  .footer-inner,
  .admin-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .project-row {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .project-list-actions {
    grid-column: 1 / -1;
  }

  .image-editor {
    grid-template-columns: 1fr;
  }

  .image-editor img {
    width: 100%;
    height: auto;
    aspect-ratio: 1.45 / 1;
  }
}

/* Site-wide blossom palette */
body {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blossom-soft) 76%, var(--bg)) 0%, var(--bg) 48%, color-mix(in srgb, var(--denim-soft) 18%, var(--bg)) 100%);
}

main {
  background: transparent;
}

.site-header {
  border-bottom: 0;
  background: transparent;
}

.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 52%, transparent);
}

.brand {
  color: var(--brown);
}

[data-theme="dark"] .brand {
  color: var(--blossom);
}

.nav-links a,
.footer-nav a {
  /* darkened (was 4.37:1 in light) while keeping a hint of denim; AA in both themes */
  color: color-mix(in srgb, color-mix(in srgb, var(--muted) 82%, var(--denim)) 58%, var(--text));
}

.nav-links a:hover,
.nav-links a.is-active,
.footer-nav a:hover {
  color: var(--denim);
}

.button {
  background: var(--denim);
  color: var(--surface);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--denim) 24%, transparent);
}

[data-theme="dark"] .button {
  color: var(--espresso);
}

.ghost-button,
.tiny-button,
.icon-button,
.to-top {
  border-color: color-mix(in srgb, var(--line-strong) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 82%, var(--blossom-soft));
}

.ghost-button:hover,
.tiny-button:hover,
.icon-button:hover,
.to-top:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--blossom) 34%, var(--surface));
}

.nav-actions .icon-button,
.nav-actions .icon-button:hover,
[data-theme="dark"] .nav-actions .icon-button,
[data-theme="dark"] .nav-actions .icon-button:hover {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.nav-actions .icon-button {
  font-size: 1.65rem;
}

.danger-button {
  border-color: color-mix(in srgb, #c43f4f 34%, var(--line));
  background: color-mix(in srgb, #c43f4f 9%, var(--surface));
}

.hero,
.page-hero,
.project-hero,
.admin-shell,
.not-found {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blossom-soft) 62%, var(--bg)) 0%, var(--bg) 48%, color-mix(in srgb, var(--denim-soft) 18%, var(--bg)) 100%);
}

[data-theme="dark"] .hero,
[data-theme="dark"] .page-hero,
[data-theme="dark"] .project-hero,
[data-theme="dark"] .admin-shell,
[data-theme="dark"] .not-found {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 82%, var(--bg)) 0%, var(--bg) 54%, color-mix(in srgb, var(--denim-soft) 18%, var(--bg)) 100%);
}

.page-hero::before,
.project-hero::before,
.admin-shell::before,
.not-found::before {
  position: absolute;
  top: 24px;
  right: max(18px, 4vw);
  width: clamp(140px, 16vw, 260px);
  height: 78px;
  border-block: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
  content: "";
  opacity: 0.55;
  pointer-events: none;
  transform: rotate(-8deg);
}

.page-hero > .container,
.project-hero > .container,
.admin-shell > .container,
.not-found > .container {
  position: relative;
  z-index: 1;
}

.page-hero h1,
.project-hero h1,
.admin-hero h1,
.not-found h1 {
  color: var(--text);
}

.eyebrow,
.section-kicker {
  color: color-mix(in srgb, var(--accent-3) 82%, var(--denim));
}

.band {
  background: color-mix(in srgb, var(--bg) 84%, var(--blossom-soft));
}

.band.alt {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 86%, var(--blossom-soft)), color-mix(in srgb, var(--bg) 78%, var(--denim-soft)));
}

.meta-tile,
.project-card,
.hero-frame,
.hero-note,
.project-cover,
.gallery-image,
.project-nav a,
.admin-sidebar,
.admin-panel,
.preview-panel,
.repeat-item,
.project-row,
.empty-state {
  border-color: color-mix(in srgb, var(--line-strong) 54%, transparent);
  background: color-mix(in srgb, var(--surface) 84%, var(--blossom-soft));
  box-shadow: var(--soft-shadow);
}

[data-theme="dark"] .meta-tile,
[data-theme="dark"] .project-card,
[data-theme="dark"] .hero-frame,
[data-theme="dark"] .hero-note,
[data-theme="dark"] .project-cover,
[data-theme="dark"] .gallery-image,
[data-theme="dark"] .project-nav a,
[data-theme="dark"] .admin-sidebar,
[data-theme="dark"] .admin-panel,
[data-theme="dark"] .preview-panel,
[data-theme="dark"] .repeat-item,
[data-theme="dark"] .project-row,
[data-theme="dark"] .empty-state {
  background: color-mix(in srgb, var(--surface) 88%, var(--blossom-soft));
}

.project-card:hover,
.project-nav a:hover,
.gallery-image:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow);
}

.project-thumb,
.project-cover img,
.gallery-image img,
.sample-strip img,
.image-editor img,
.project-row img {
  background: color-mix(in srgb, var(--surface-2) 74%, var(--denim-soft));
}

.tag,
.status-pill,
.cl-pill {
  border-color: color-mix(in srgb, var(--accent-3) 58%, var(--line));
  background: color-mix(in srgb, var(--blossom-soft) 68%, var(--surface));
  color: color-mix(in srgb, var(--accent-3) 82%, var(--text));
}

[data-theme="dark"] .tag,
[data-theme="dark"] .status-pill,
[data-theme="dark"] .cl-pill {
  background: color-mix(in srgb, var(--surface-2) 78%, var(--blossom));
  color: var(--blossom);
}

.project-fact {
  border-color: color-mix(in srgb, var(--line-strong) 58%, transparent);
}

.field input,
.field textarea,
.field select {
  border-color: color-mix(in srgb, var(--line-strong) 54%, transparent);
  background: color-mix(in srgb, var(--surface) 84%, var(--bg));
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  border-color: var(--denim);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--denim) 22%, transparent);
}

.admin-tab.is-active,
.admin-tab:hover,
.project-row.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--blossom) 28%, var(--surface));
}

.cms-message {
  color: var(--denim);
}

.site-footer {
  border-top-color: color-mix(in srgb, var(--line-strong) 56%, transparent);
  background: color-mix(in srgb, var(--surface-2) 72%, var(--bg));
}

.not-found {
  padding: 80px 0;
}

/* Lovable / Tushar-inspired hero */
.technical-hero {
  position: relative;
  display: block;
  min-height: calc(100svh - var(--nav-h));
  overflow: hidden;
  padding: 0;
  background:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    var(--bg);
  background-size: 100px 100px;
}

.technical-hero::after {
  position: absolute;
  inset: auto 0 0;
  height: 96px;
  background: var(--surface);
  content: "";
}

.hero-draft {
  position: relative;
  z-index: 4;
  display: grid;
  align-content: center;
  width: min(1280px, calc(100% - 40px));
  min-height: calc(100svh - var(--nav-h));
  padding: clamp(58px, 7vh, 92px) 0 clamp(132px, 16vh, 178px);
}

.technical-hero .hero-kicker {
  margin: 0 0 clamp(28px, 4vh, 48px);
  color: color-mix(in srgb, var(--text) 76%, transparent);
  font-size: 1.35rem;
  font-weight: 650;
  line-height: 1.3;
  word-spacing: 0.32em;
}

.hero-kicker::first-letter {
  color: inherit;
}

.technical-hero .hero-title {
  max-width: 1280px;
  margin: 0;
  color: var(--text);
  font-family: var(--display-font);
  font-size: 5.85rem;
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: 0;
}

.technical-hero .terminal-period {
  color: var(--text);
}

.technical-hero .hero-dot {
  display: inline-block;
  width: clamp(10px, 1.1vw, 16px);
  height: clamp(10px, 1.1vw, 16px);
  margin-left: 0.16em;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 0.1em;
}

.technical-hero .hero-statement {
  max-width: 900px;
  margin: clamp(38px, 5vh, 64px) 0 0;
  color: var(--muted);
  font-size: 1.72rem;
  line-height: 1.55;
}

.technical-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.tech-box,
.tech-circle,
.tech-plus,
.tech-bars,
.tech-measure,
.tech-dots,
.tech-gridlets,
.tech-line,
.tech-node,
.tech-label {
  position: absolute;
  color: var(--draft-text);
}

.tech-box {
  border: 1px solid var(--draft-line);
}

.tech-box-top-left {
  top: 10.8%;
  left: 6%;
  width: 15.2%;
  height: 8.2%;
  border-bottom: 0;
}

.tech-card-left {
  top: 34.5%;
  left: 3.9%;
  width: 10.2%;
  height: 12%;
}

.tech-card-left::after {
  position: absolute;
  right: 0;
  left: 0;
  top: 42%;
  height: 1px;
  background: var(--draft-line);
  content: "";
}

.tech-card-dot {
  top: 36%;
  left: 5.35%;
}

.tech-circle {
  width: 36px;
  height: 36px;
  border: 1px solid var(--draft-line);
  border-radius: 50%;
}

.tech-bars {
  top: 13.2%;
  right: 4.45%;
  width: 11%;
  height: 10.8%;
  background:
    linear-gradient(var(--draft-line), var(--draft-line)) 0 0 / 100% 1px no-repeat,
    linear-gradient(var(--draft-line), var(--draft-line)) 0 28% / 84% 1px no-repeat,
    linear-gradient(var(--draft-line), var(--draft-line)) 0 57% / 100% 1px no-repeat,
    linear-gradient(var(--draft-line), var(--draft-line)) 0 86% / 58% 1px no-repeat;
  border-top: 12px solid transparent;
}

.tech-bars-dot {
  top: 17.5%;
  right: 5.5%;
  width: 56px;
  height: 56px;
}

.tech-plus {
  top: 39%;
  right: 7.3%;
  width: 72px;
  height: 72px;
  border: 1px solid var(--draft-line);
  border-radius: 50%;
}

.tech-plus::before,
.tech-plus::after {
  position: absolute;
  background: var(--draft-line);
  content: "";
}

.tech-plus::before {
  top: 50%;
  left: -16px;
  width: calc(100% + 32px);
  height: 1px;
}

.tech-plus::after {
  top: -16px;
  left: 50%;
  width: 1px;
  height: calc(100% + 32px);
}

.tech-measure {
  height: 1px;
  background: var(--draft-line);
}

.tech-measure::before,
.tech-measure::after {
  position: absolute;
  top: -9px;
  width: 1px;
  height: 18px;
  background: var(--draft-line);
  content: "";
}

.tech-measure::before {
  left: 0;
}

.tech-measure::after {
  right: 0;
}

.tech-measure-left {
  left: 5.9%;
  bottom: 15.5%;
  width: 20.2%;
}

.tech-measure-left::after {
  right: 50%;
}

.tech-measure-right {
  right: 6%;
  bottom: 25.4%;
  width: 16.2%;
}

.tech-dots-left {
  left: 4%;
  bottom: 24.6%;
  display: flex;
  gap: 10px;
}

.tech-dots-left::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--draft-line);
  box-shadow: 22px 0 0 var(--draft-line), 44px 0 0 var(--draft-line), 66px 0 0 var(--draft-line);
}

.tech-gridlets {
  right: 7%;
  bottom: 13.5%;
  width: 11.2%;
  height: 5.8%;
  background:
    linear-gradient(var(--draft-line), var(--draft-line)) 0 0 / 29% 1px no-repeat,
    linear-gradient(var(--draft-line), var(--draft-line)) 50% 0 / 29% 1px no-repeat,
    linear-gradient(var(--draft-line), var(--draft-line)) 100% 0 / 29% 1px no-repeat,
    linear-gradient(var(--draft-line), var(--draft-line)) 0 100% / 29% 1px no-repeat,
    linear-gradient(var(--draft-line), var(--draft-line)) 50% 100% / 29% 1px no-repeat,
    linear-gradient(var(--draft-line), var(--draft-line)) 100% 100% / 29% 1px no-repeat,
    linear-gradient(90deg, var(--draft-line), var(--draft-line)) 0 0 / 1px 38% no-repeat,
    linear-gradient(90deg, var(--draft-line), var(--draft-line)) 29% 0 / 1px 38% no-repeat,
    linear-gradient(90deg, var(--draft-line), var(--draft-line)) 50% 0 / 1px 38% no-repeat,
    linear-gradient(90deg, var(--draft-line), var(--draft-line)) 79% 0 / 1px 38% no-repeat,
    linear-gradient(90deg, var(--draft-line), var(--draft-line)) 100% 0 / 1px 38% no-repeat,
    linear-gradient(90deg, var(--draft-line), var(--draft-line)) 0 100% / 1px 38% no-repeat,
    linear-gradient(90deg, var(--draft-line), var(--draft-line)) 29% 100% / 1px 38% no-repeat,
    linear-gradient(90deg, var(--draft-line), var(--draft-line)) 50% 100% / 1px 38% no-repeat,
    linear-gradient(90deg, var(--draft-line), var(--draft-line)) 79% 100% / 1px 38% no-repeat,
    linear-gradient(90deg, var(--draft-line), var(--draft-line)) 100% 100% / 1px 38% no-repeat;
}

.tech-line {
  height: 1px;
  border-top: 1px dotted var(--draft-line);
  transform-origin: left center;
}

.tech-line-one {
  top: 22.5%;
  left: 40%;
  width: 6%;
  transform: rotate(-31deg);
}

.tech-line-two {
  top: 39.5%;
  right: 16.1%;
  width: 10%;
  transform: rotate(-11deg);
}

.tech-node {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--draft-line);
}

.tech-node-one {
  top: 21.7%;
  left: 44.1%;
}

.tech-node-two {
  top: 38.1%;
  right: 25.4%;
  width: 16px;
  height: 16px;
}

.tech-label {
  font-family: var(--font);
  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.5;
  opacity: 0.72;
  word-spacing: 0.35em;
}

.label-frame {
  top: 28.5%;
  left: 8%;
}

.label-frame-one {
  left: 5.9%;
  bottom: 29%;
}

.label-systems {
  left: 18%;
  bottom: 24%;
}

.label-research {
  right: 9.7%;
  top: 38%;
}

.label-frame-two {
  right: 6%;
  bottom: 34%;
}

.label-iterate {
  right: 27.7%;
  bottom: 21.1%;
}

.cursor-blossom {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  user-select: none;
  font-size: 1.35rem;
  line-height: 1;
  opacity: 0.6;
  transform: translate(-50%, -50%);
  animation: blossom-fade 2.4s ease-out forwards;
}

@keyframes blossom-fade {
  0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(1)    rotate(0deg); }
  25%  { opacity: 0.6; }
  100% { opacity: 0;   transform: translate(-50%, -130%) scale(0.5) rotate(25deg); }
}

@media (max-width: 1100px) {
  .technical-hero .hero-title {
    font-size: 4.85rem;
  }

  .hero-draft {
    width: min(100% - 36px, 900px);
  }

  .technical-layer {
    opacity: 0.72;
  }
}

@media (max-width: 920px) {
  .nav-links {
    right: 14px;
    left: 14px;
    transform: none;
  }

  .technical-hero {
    min-height: calc(92svh - var(--nav-h));
  }

  .hero-draft {
    min-height: calc(92svh - var(--nav-h));
    padding: 56px 0 116px;
  }

  .technical-hero .hero-title {
    font-size: 4.05rem;
    line-height: 0.9;
  }

  .technical-hero .hero-statement {
    max-width: 680px;
  }

  .technical-layer {
    opacity: 0.46;
  }
}

@media (min-width: 761px) {
  .menu-button {
    display: none;
  }

  .nav-links {
    position: absolute;
    top: auto;
    right: auto;
    left: 50%;
    display: flex;
    width: auto;
    gap: 42px;
    transform: translateX(-50%);
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .nav-links a {
    width: auto;
    padding: 8px 0;
    font-size: 0.9rem;
  }
}

@media (max-width: 680px) {
  .technical-hero {
    min-height: calc(100svh - var(--nav-h));
    background-size: 64px 64px;
  }

  .technical-hero::after {
    height: 64px;
  }

  .hero-draft {
    min-height: calc(100svh - var(--nav-h));
    padding: 52px 0 104px;
  }

  .technical-hero .hero-kicker {
    margin-bottom: 22px;
    font-size: 0.9rem;
    word-spacing: 0.18em;
  }

  .technical-hero .hero-title {
    font-size: 3.85rem;
    line-height: 0.91;
  }

  .technical-hero .hero-statement {
    margin-top: 32px;
    font-size: 1.12rem;
  }

  .technical-layer {
    opacity: 0.3;
  }

}


/* ─── 480px: very small phones ─────────────────────────────────────────── */
@media (max-width: 480px) {
  .hero-greeting-loop {
    top: 8px;
  }

  .cl-hero-grid {
    min-height: clamp(180px, 44svh, 280px);
    padding-top: 24px;
  }

  .cl-hero-type h1 {
    font-size: clamp(1.5rem, 7.8vw, 2.2rem);
  }

  .cl-section-title {
    font-size: clamp(2.2rem, 11.5vw, 3.4rem);
  }

  .band {
    padding: 40px 0;
  }

  .page-hero,
  .project-hero {
    padding: 36px 0 24px;
  }

  .cl-project-stack {
    gap: clamp(40px, 10vw, 56px);
  }

  .cl-work {
    padding: 40px 0;
  }

  .cl-work {
    padding-top: 34px;
  }

  .cl-section-title {
    margin-bottom: 24px;
  }
}

@media (min-width: 761px) {
  .site-header .nav-links {
    gap: 42px;
  }

  .site-header .nav-links a {
    width: auto;
    padding: 8px 0;
    font-size: 0.9rem;
  }
}

/* =========================================================
   Generate Draft — AI for CRM case study (scaffold)
   ========================================================= */
.gd-page {
  /* Activix-aligned palette: royal-blue accent + navy anchor (starting point) */
  --gd-brand: #1a56db;
  --gd-brand-strong: #103e9c;
  --gd-brand-soft: #eaf0fc;
  --gd-ink: #14213d;
  --gd-muted: #5d6b85;
  --gd-surface: #ffffff;
  --gd-surface-2: #f5f8fd;
  --gd-border: #dce4f1;
  --gd-good: #1f9d6b;
  --gd-good-soft: #e7f6ee;
  --gd-warn: #c98a16;
  --gd-warn-soft: #fdf3e0;
  --gd-risk: #d6455d;
  --gd-risk-soft: #fce8eb;
  --gd-radius: 16px;
  --gd-radius-lg: 24px;
  --gd-shadow: 0 1px 2px rgba(16, 42, 96, 0.05), 0 8px 24px rgba(16, 42, 96, 0.07);
  --gd-shadow-lg: 0 14px 44px rgba(26, 86, 219, 0.16);
}

[data-theme="dark"] .gd-page {
  /* --gd-brand* removed — canonical violet is set in the final
     "CASE STUDY QUALITY STANDARD" dark block (was a stale blue here). */
  --gd-ink: #eef3fc;
  --gd-muted: #a3afc6;
  --gd-surface: #131a2b;
  --gd-surface-2: #1a2236;
  --gd-border: #28324a;
  --gd-good-soft: rgba(31, 157, 107, 0.18);
  --gd-warn-soft: rgba(201, 138, 22, 0.18);
  --gd-risk-soft: rgba(214, 69, 93, 0.2);
  --gd-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.45);
  --gd-shadow-lg: 0 14px 44px rgba(0, 0, 0, 0.5);
}

.gd-hero {
  padding: 120px 0 40px;
}

.gd-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gd-brand);
  margin-bottom: 22px;
}

.gd-hero-title {
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin: 0 0 24px;
  color: var(--gd-ink);
}

.gd-hero-lead {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.5;
  max-width: 60ch;
  color: var(--gd-muted);
  margin: 0 0 48px;
}

.gd-snapshot {
  padding: 24px 0 56px;
}

.gd-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--gd-border);
  border: 1px solid var(--gd-border);
  border-radius: 20px;
  overflow: hidden;
  margin: 0;
}

.gd-snapshot-grid > div {
  background: var(--gd-surface);
  padding: 24px 26px;
}

.gd-snapshot-grid dt {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--gd-muted);
  margin-bottom: 8px;
}

.gd-snapshot-grid dd {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--gd-ink);
}

.gd-section {
  padding: 56px 0;
  border-top: 1px solid #efeef7;
}

.gd-section-kicker {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--gd-brand);
  margin-bottom: 14px;
}

.gd-section-title {
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin: 0 0 22px;
  color: var(--gd-ink);
}

.gd-section-body {
  max-width: 64ch;
  color: var(--gd-muted);
  font-size: 1.08rem;
  line-height: 1.65;
}

.gd-section--close {
  text-align: center;
  border-top: 1px solid #efeef7;
  padding: 72px 0;
}

.gd-principle {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gd-ink);
  margin: 0 0 8px;
}

.gd-principle--alt {
  color: var(--gd-brand);
  margin-bottom: 32px;
}

@media (max-width: 760px) {
  .gd-snapshot-grid {
    grid-template-columns: 1fr;
  }
  .gd-hero {
    padding-top: 96px;
  }
}

/* =========================================================
   Generate Draft — embedded asset design system
   Fluid auto-layout: container queries + auto-fit grids +
   clamp(). No per-breakpoint scaling math.
   ========================================================= */
.gd-section-body p { margin: 0 0 1.1em; }
.gd-section-body p:last-child { margin-bottom: 0; }
.gd-section-body strong { color: var(--gd-ink); font-weight: 650; }
.gd-section-body em { font-style: italic; }

.gd-emphasis {
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--gd-ink);
  margin: 1.2em 0 1.1em;
}

.gd-snapshot-challenge {
  margin: 16px 0 0;
  padding: 18px 22px;
  border: 1px solid var(--gd-border);
  border-radius: var(--gd-radius);
  background: var(--gd-brand-soft);
  color: var(--gd-ink);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.5;
}
.gd-snapshot-challenge span {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gd-brand-strong);
  margin-bottom: 6px;
}

/* Each asset is its own responsive context */
.gd-asset {
  container-type: inline-size;
  margin-top: clamp(28px, 4vw, 48px);
}
.gd-asset-head { margin-bottom: clamp(18px, 3vw, 30px); }
.gd-asset-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gd-brand);
  margin: 0 0 10px;
}
.gd-asset-title {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--gd-ink);
  margin: 0 0 8px;
}
.gd-asset-sub {
  color: var(--gd-muted);
  font-size: clamp(0.98rem, 1.4vw, 1.1rem);
  line-height: 1.5;
  margin: 0;
  max-width: 62ch;
}

/* ---------- Asset 01: Executive Story Timeline ---------- */
.gd-timeline {
  display: flex;
  align-items: stretch;
  gap: clamp(8px, 1.4cqi, 16px);
}
.gd-phase { flex: 1 1 0; min-width: 0; display: flex; }
.gd-phase-toggle {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--gd-surface);
  border: 1px solid var(--gd-border);
  border-radius: var(--gd-radius-lg);
  padding: clamp(16px, 2cqi, 22px);
  box-shadow: var(--gd-shadow);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  font: inherit;
  color: inherit;
}
.gd-phase-toggle::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gd-brand), #4f8af7);
}
.gd-phase-toggle:hover { transform: translateY(-3px); box-shadow: var(--gd-shadow-lg); border-color: var(--gd-brand); }
.gd-phase-toggle:focus-visible { outline: 2px solid var(--gd-brand); outline-offset: 2px; }
.gd-phase-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gd-phase-index {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gd-muted);
}
.gd-phase-glyph { width: 32px; height: 32px; color: var(--gd-brand); flex: 0 0 auto; }
.gd-phase-glyph svg { width: 100%; height: 100%; display: block; }
.gd-phase-name { font-size: 1.05rem; font-weight: 650; line-height: 1.2; color: var(--gd-ink); }
.gd-phase-summary { font-size: 0.92rem; line-height: 1.5; color: var(--gd-muted); }
.gd-phase-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.gd-tag { font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
/* darkened tag text a touch so the semantic pills clear AA on their soft tints (were ~4.0-4.4) */
.gd-tag--good { background: var(--gd-good-soft); color: color-mix(in srgb, var(--gd-good) 82%, #000); }
.gd-tag--risk { background: var(--gd-risk-soft); color: color-mix(in srgb, var(--gd-risk) 82%, #000); }
.gd-tag--accent { background: var(--gd-brand-soft); color: var(--gd-brand-strong); }
.gd-phase-detail {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--gd-border);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--gd-muted);
}
.gd-phase-detail[hidden] { display: none; }
.gd-connector { flex: 0 0 auto; align-self: center; color: var(--gd-brand); opacity: 0.55; }
.gd-connector svg { width: 22px; height: 22px; display: block; }

.gd-timeline-takeaway {
  margin: clamp(20px, 3vw, 30px) 0 0;
  text-align: center;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gd-ink);
}
.gd-evidence {
  list-style: none;
  margin: clamp(14px, 2vw, 20px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.gd-evidence li {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--gd-muted);
  background: var(--gd-surface-2);
  border: 1px solid var(--gd-border);
  border-radius: 999px;
  padding: 6px 12px;
}
.gd-evidence b { color: var(--gd-brand-strong); font-weight: 700; }

/* Single reflow: stack the timeline when the asset's own box is narrow */
@container (max-width: 52rem) {
  .gd-timeline { flex-direction: column; }
  .gd-connector { transform: rotate(90deg); }
}

/* ---------- Tension cards (real design problem) ---------- */
.gd-tension {
  display: grid;
  gap: 12px;
  margin-top: clamp(20px, 3vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.gd-tension-card {
  background: var(--gd-surface);
  border: 1px solid var(--gd-border);
  border-radius: var(--gd-radius);
  padding: clamp(16px, 2vw, 20px);
  box-shadow: var(--gd-shadow);
}
.gd-tension-card--win {
  border-color: var(--gd-brand);
  box-shadow: var(--gd-shadow-lg);
  background: linear-gradient(180deg, var(--gd-brand-soft), var(--gd-surface));
}
.gd-tension-card h4 { margin: 0 0 12px; font-size: 1.02rem; color: var(--gd-ink); }
.gd-tension-line { margin: 0 0 10px; font-size: 0.9rem; line-height: 1.5; color: var(--gd-muted); }
.gd-tension-line:last-child { margin-bottom: 0; }
.gd-tension-line span {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  font-weight: 700;
  margin-bottom: 3px;
}
.gd-tension-line--good span { color: var(--gd-good); }
.gd-tension-line--risk span { color: var(--gd-risk); }

/* ---------- Pull quote ---------- */
.gd-quote {
  margin: clamp(20px, 3vw, 28px) 0;
  padding: clamp(18px, 2.5vw, 26px) clamp(20px, 3vw, 30px);
  border-left: 4px solid var(--gd-brand);
  background: var(--gd-brand-soft);
  border-radius: 0 var(--gd-radius) var(--gd-radius) 0;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--gd-ink);
}
.gd-quote cite {
  display: block;
  margin-top: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  font-style: normal;
  color: var(--gd-muted);
}

/* ---------- Ordered step flow ---------- */
.gd-steps {
  counter-reset: gd-step;
  list-style: none;
  margin: clamp(16px, 2vw, 22px) 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.gd-steps li {
  position: relative;
  padding-left: 46px;
  min-height: 32px;
  display: flex;
  align-items: center;
  color: var(--gd-ink);
  font-size: 0.98rem;
  line-height: 1.4;
}
.gd-steps li::before {
  counter-increment: gd-step;
  content: counter(gd-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gd-brand-soft);
  color: var(--gd-brand-strong);
  font-weight: 700;
  font-size: 0.85rem;
  display: grid;
  place-items: center;
}

/* ---------- Trust mechanism cards ---------- */
.gd-mechanisms {
  display: grid;
  gap: 12px;
  margin: clamp(16px, 2vw, 22px) 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.gd-mechanism {
  background: var(--gd-surface);
  border: 1px solid var(--gd-border);
  border-radius: var(--gd-radius);
  padding: 16px 18px;
  box-shadow: var(--gd-shadow);
}
.gd-mechanism dt { font-weight: 650; color: var(--gd-ink); margin-bottom: 5px; }
.gd-mechanism dd { margin: 0; color: var(--gd-muted); font-size: 0.9rem; line-height: 1.5; }

/* Section dividers use the shared border token (dark-mode aware) */
.gd-section { border-top-color: var(--gd-border); }
.gd-section--close { border-top-color: var(--gd-border); }

/* ---------- Asset 02: Magic Button Concept ---------- */
.gd-magic {
  display: flex;
  align-items: stretch;
  gap: clamp(8px, 1.6cqi, 18px);
}
.gd-magic-panel {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.gd-magic-label {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gd-muted);
  margin: 0 0 12px;
}
.gd-context-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.gd-context-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gd-surface);
  border: 1px solid var(--gd-border);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 0.88rem;
  color: var(--gd-ink);
  box-shadow: var(--gd-shadow);
}
.gd-context-ico { width: 18px; height: 18px; color: var(--gd-brand); flex: 0 0 auto; }
.gd-context-ico svg { width: 100%; height: 100%; display: block; }

/* center action column */
.gd-magic-action {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
}
.gd-magic-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 650;
  font-size: 1.02rem;
  color: #fff;
  padding: 16px 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gd-brand), #4f8af7);
  box-shadow: 0 10px 26px rgba(26, 86, 219, 0.34);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.gd-magic-btn-ico { width: 20px; height: 20px; display: inline-flex; }
.gd-magic-btn-ico svg { width: 100%; height: 100%; }
.gd-magic-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(26, 86, 219, 0.42); }
.gd-magic-btn:focus-visible { outline: 2px solid var(--gd-brand); outline-offset: 3px; }
.gd-magic-btn:active { transform: translateY(0); }
.gd-magic.is-thinking .gd-magic-btn { opacity: 0.7; pointer-events: none; }
.gd-magic-micro { margin: 0; font-size: 0.85rem; color: var(--gd-muted); }

.gd-magic-draft { justify-content: flex-start; }
.gd-draft-card {
  background: var(--gd-surface);
  border: 1px solid var(--gd-border);
  border-radius: var(--gd-radius);
  padding: 16px 18px;
  box-shadow: var(--gd-shadow);
}
.gd-draft-chip {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gd-brand-strong);
  background: var(--gd-brand-soft);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 12px;
}
.gd-draft-field {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gd-ink);
  border-bottom: 1px solid var(--gd-border);
  padding-bottom: 10px;
}
.gd-draft-field span {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gd-muted);
  margin-bottom: 3px;
}
.gd-draft-body { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--gd-ink); }

/* thinking state */
.gd-draft-thinking {
  display: none;
  align-items: center;
  gap: 10px;
  color: var(--gd-muted);
  font-size: 0.9rem;
  background: var(--gd-surface);
  border: 1px dashed var(--gd-border);
  border-radius: var(--gd-radius);
  padding: 22px 18px;
}
.gd-magic.is-thinking .gd-draft-card { display: none; }
.gd-magic.is-thinking .gd-draft-thinking { display: flex; }
.gd-magic.is-generated .gd-draft-card { animation: gd-fade-in 0.45s ease both; }
.gd-draft-dots { display: inline-flex; gap: 5px; }
.gd-draft-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gd-brand);
  display: block;
}

/* product principles row */
.gd-principles {
  list-style: none;
  margin: clamp(22px, 3vw, 32px) 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.gd-principles li {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--gd-surface-2);
  border: 1px solid var(--gd-border);
  border-radius: var(--gd-radius);
  padding: 14px 16px;
  font-size: 0.95rem;
  font-weight: 550;
  color: var(--gd-ink);
}
.gd-principles b {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gd-brand);
  color: #fff;
  font-size: 0.85rem;
  display: grid;
  place-items: center;
}
.gd-magic-quote {
  margin: clamp(20px, 3vw, 28px) 0 0;
  text-align: center;
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--gd-brand-strong);
}

@keyframes gd-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .gd-magic-btn { animation: gd-glow 2.8s ease-in-out infinite; }
  .gd-draft-dots i { animation: gd-dot 1s ease-in-out infinite; }
  .gd-draft-dots i:nth-child(2) { animation-delay: 0.15s; }
  .gd-draft-dots i:nth-child(3) { animation-delay: 0.3s; }
}
@keyframes gd-glow {
  0%, 100% { box-shadow: 0 10px 26px rgba(26, 86, 219, 0.30); }
  50% { box-shadow: 0 12px 32px rgba(26, 86, 219, 0.50); }
}
@keyframes gd-dot {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

/* Single reflow: stack the magic flow when its own box is narrow */
@container (max-width: 52rem) {
  .gd-magic { flex-direction: column; }
  .gd-magic-action { padding: 8px 0; }
}

/* ---------- Asset 03: Context Confidence Matrix ---------- */
.gd-matrix {
  display: grid;
  gap: clamp(16px, 2.4cqi, 24px);
  grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
  align-items: start;
}
.gd-conf-band {
  background: var(--gd-surface);
  border: 1px solid var(--gd-border);
  border-radius: var(--gd-radius);
  padding: clamp(14px, 2cqi, 18px);
  margin-bottom: 12px;
}
.gd-conf-band:last-child { margin-bottom: 0; }
.gd-conf-band--high { border-left: 4px solid var(--gd-good); }
.gd-conf-band--med { border-left: 4px solid var(--gd-warn); }
.gd-conf-band--low { border-left: 4px solid var(--gd-risk); }
.gd-conf-band-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 650;
  color: var(--gd-ink);
}
.gd-conf-band-head small {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
}
.gd-conf-band--high .gd-conf-band-head small { color: var(--gd-good); }
.gd-conf-band--med .gd-conf-band-head small { color: var(--gd-warn); }
.gd-conf-band--low .gd-conf-band-head small { color: var(--gd-risk); }
.gd-conf-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
}
.gd-conf-card {
  background: var(--gd-surface-2);
  border: 1px solid var(--gd-border);
  border-radius: 12px;
  overflow: hidden;
}
.gd-conf-card--danger { border-color: var(--gd-risk); background: var(--gd-risk-soft); }
.gd-conf-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--gd-ink);
  text-align: left;
  padding: 11px 13px;
}
.gd-conf-toggle:focus-visible { outline: 2px solid var(--gd-brand); outline-offset: -2px; }
.gd-conf-name { display: flex; align-items: center; gap: 7px; }
.gd-conf-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.gd-conf-card--high .gd-conf-dot { background: var(--gd-good); }
.gd-conf-card--med .gd-conf-dot { background: var(--gd-warn); }
.gd-conf-card--low .gd-conf-dot { background: var(--gd-risk); }
.gd-conf-warn-ico { width: 15px; height: 15px; color: var(--gd-risk); flex: 0 0 auto; }
.gd-conf-chevron { width: 15px; height: 15px; color: var(--gd-muted); flex: 0 0 auto; transition: transform 0.18s ease; }
.gd-conf-toggle[aria-expanded="true"] .gd-conf-chevron { transform: rotate(90deg); }
.gd-conf-why { padding: 0 13px 12px; font-size: 0.82rem; line-height: 1.5; color: var(--gd-muted); }
.gd-conf-why[hidden] { display: none; }

.gd-matrix-aside { display: grid; gap: 14px; }
.gd-legend {
  display: grid;
  gap: 9px;
  background: var(--gd-surface);
  border: 1px solid var(--gd-border);
  border-radius: var(--gd-radius);
  padding: 14px 16px;
}
.gd-legend div { display: flex; align-items: center; gap: 9px; font-size: 0.82rem; color: var(--gd-muted); }
.gd-legend i { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.gd-matrix-insight {
  background: var(--gd-brand-soft);
  border: 1px solid var(--gd-border);
  border-radius: var(--gd-radius);
  padding: 16px 18px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--gd-ink);
  margin: 0;
}
.gd-matrix-warning {
  margin: clamp(16px, 2vw, 20px) 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--gd-risk-soft);
  border: 1px solid var(--gd-risk);
  border-radius: var(--gd-radius);
  padding: 14px 18px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gd-ink);
}
.gd-matrix-warning .gd-conf-warn-ico { width: 18px; height: 18px; }
.gd-risk-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; }
.gd-risk-tags li {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--gd-risk);
  background: var(--gd-risk-soft);
  border-radius: 999px;
  padding: 5px 11px;
}

@container (max-width: 50rem) {
  .gd-matrix { grid-template-columns: 1fr; }
}

/* ============================================================
   FigJam aesthetic layer — sticker cards (thick black outline +
   offset shadow), bright palette, dotted canvas, playful bits.
   Typography untouched (inherits the homepage font).
   ============================================================ */
.gd-page {
  --gd-line: #1c1c1c;
  --gd-brand: #4b4bf5;
  --gd-brand-strong: #2d2dcf;
  --gd-brand-soft: #e9e9ff;
  --gd-yellow: #ffc62b;
  --gd-yellow-soft: #fff3cf;
  --gd-red: #f24822;
  --gd-green: #14ae5c;
  --gd-green-soft: #e3f9ec;
  --gd-purple: #8a63f4;
  --gd-lav: #d7d2ff;
  --gd-dot: rgba(28, 28, 28, 0.10);
  --gd-sticker: 3px 3px 0 var(--gd-line);
  --gd-sticker-lg: 5px 5px 0 var(--gd-line);
  background-image: radial-gradient(var(--gd-dot) 1.5px, transparent 1.6px);
  background-size: 24px 24px;
}
[data-theme="dark"] .gd-page {
  --gd-line: #05070d;
  --gd-dot: rgba(255, 255, 255, 0.06);
}

/* ---- highlighter sticker kickers ---- */
.gd-asset-eyebrow,
.gd-section-kicker {
  display: inline-block;
  background: var(--gd-yellow);
  color: var(--gd-ink);
  padding: 4px 11px;
  border: 2px solid var(--gd-line);
  border-radius: 8px;
  box-shadow: 2px 2px 0 var(--gd-line);
  transform: rotate(-1.2deg);
}

/* ---- hero stickers ---- */
.gd-hero { position: relative; }
.gd-hero-stickers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.gd-sticker { position: absolute; display: block; }
.gd-sticker--smiley { width: 56px; top: 104px; right: 8%; transform: rotate(-10deg); filter: drop-shadow(3px 3px 0 var(--gd-line)); }
.gd-sticker--star1 { width: 30px; top: 64px; right: 22%; transform: rotate(8deg); }
.gd-sticker--star2 { width: 20px; top: 168px; right: 30%; }
.gd-sticker--squiggle { width: 98px; top: 232px; right: 7%; }
@media (max-width: 900px) { .gd-hero-stickers { display: none; } }

/* ---- generic sticker treatment ---- */
.gd-snapshot-grid { border: 2px solid var(--gd-line); border-radius: 18px; gap: 2px; background: var(--gd-line); box-shadow: var(--gd-sticker-lg); }
.gd-snapshot-challenge { border: 2px solid var(--gd-line); border-radius: 12px; background: var(--gd-yellow); box-shadow: var(--gd-sticker); }
.gd-snapshot-challenge span { color: var(--gd-ink); }

/* ---- Asset 01 timeline: sticker cards + safe accordion ---- */
.gd-timeline { align-items: flex-start; gap: clamp(14px, 1.8cqi, 22px); }
.gd-phase {
  flex-direction: column;
  background: var(--gd-surface);
  border: 2px solid var(--gd-line);
  border-radius: 16px;
  box-shadow: var(--gd-sticker);
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.gd-phase::before { content: ""; display: block; height: 7px; background: var(--gd-brand); }
.gd-timeline .gd-phase:nth-child(1)::before { background: var(--gd-brand); }
.gd-timeline .gd-phase:nth-child(3)::before { background: var(--gd-yellow); }
.gd-timeline .gd-phase:nth-child(5)::before { background: var(--gd-purple); }
.gd-timeline .gd-phase:nth-child(7)::before { background: var(--gd-green); }
.gd-timeline .gd-phase:nth-child(1) .gd-phase-glyph { color: var(--gd-brand); }
.gd-timeline .gd-phase:nth-child(3) .gd-phase-glyph { color: #c98a16; }
.gd-timeline .gd-phase:nth-child(5) .gd-phase-glyph { color: var(--gd-purple); }
.gd-timeline .gd-phase:nth-child(7) .gd-phase-glyph { color: var(--gd-green); }
.gd-phase:hover { transform: translate(-2px, -2px); box-shadow: var(--gd-sticker-lg); }
.gd-phase-toggle { background: none; border: none; box-shadow: none; border-radius: 0; padding: clamp(15px, 2cqi, 20px); }
.gd-phase-toggle::before { content: none; }
.gd-phase-toggle:hover { transform: none; box-shadow: none; border: none; }
.gd-phase-toggle:focus-visible { outline: 2px solid var(--gd-brand); outline-offset: -4px; }
.gd-phase-detail { display: grid; grid-template-rows: 0fr; margin: 0; padding: 0; border: 0; transition: grid-template-rows 0.26s ease; }
.gd-phase-detail-inner { overflow: hidden; }
.gd-phase-toggle[aria-expanded="true"] + .gd-phase-detail { grid-template-rows: 1fr; }
.gd-phase-detail-p { margin: 0; padding: 12px 16px 16px; border-top: 1px dashed var(--gd-border); font-size: 0.86rem; line-height: 1.55; color: var(--gd-muted); }
.gd-tag { border: 1.5px solid var(--gd-line); }
.gd-connector { opacity: 1; color: var(--gd-line); }
.gd-connector svg { width: 40px; height: 22px; }
.gd-evidence li { border: 2px solid var(--gd-line); box-shadow: 2px 2px 0 var(--gd-line); background: var(--gd-surface); }
.gd-timeline-takeaway { color: var(--gd-ink); }

/* ---- Asset 02 magic button ---- */
.gd-context-list li { border: 2px solid var(--gd-line); border-radius: 11px; box-shadow: 2px 2px 0 var(--gd-line); background: var(--gd-surface); }
.gd-magic-btn { background: var(--gd-brand); color: #fff; border: 2px solid var(--gd-line); border-radius: 14px; box-shadow: var(--gd-sticker-lg); animation: none; }
.gd-magic-btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--gd-line); }
.gd-draft-card { border: 2px solid var(--gd-line); border-radius: 12px; box-shadow: var(--gd-sticker); transform: rotate(-1deg); }
.gd-draft-thinking { border: 2px dashed var(--gd-line); }
.gd-draft-chip { border: 1.5px solid var(--gd-line); }
.gd-principles li { border: 2px solid var(--gd-line); border-radius: 14px; box-shadow: var(--gd-sticker); }
.gd-principles li:nth-child(1) { background: var(--gd-brand-soft); }
.gd-principles li:nth-child(2) { background: var(--gd-yellow-soft); }
.gd-principles li:nth-child(3) { background: var(--gd-green-soft); }
.gd-principles b { border: 2px solid var(--gd-line); box-shadow: 1.5px 1.5px 0 var(--gd-line); }
.gd-magic-quote { color: var(--gd-brand-strong); }

/* ---- shared quote → sticky note ---- */
.gd-quote {
  background: var(--gd-yellow);
  color: var(--gd-ink);
  border: 2px solid var(--gd-line);
  border-radius: 6px;
  box-shadow: var(--gd-sticker-lg);
  transform: rotate(-1.2deg);
}
.gd-quote cite { color: rgba(28, 28, 28, 0.72); }

/* ---- tension cards ---- */
.gd-tension-card { border: 2px solid var(--gd-line); border-radius: 16px; box-shadow: var(--gd-sticker); }
.gd-tension-card:nth-child(1) { background: var(--gd-lav); }
.gd-tension-card:nth-child(2) { background: var(--gd-yellow-soft); }
.gd-tension-card--win { background: var(--gd-green-soft); box-shadow: var(--gd-sticker-lg); }

/* ---- ordered steps ---- */
.gd-steps li::before { background: var(--gd-brand); color: #fff; border: 2px solid var(--gd-line); box-shadow: 2px 2px 0 var(--gd-line); }

/* ---- trust mechanism cards ---- */
.gd-mechanism { border: 2px solid var(--gd-line); border-radius: 14px; box-shadow: var(--gd-sticker); }

/* ---- Asset 03 confidence matrix ---- */
.gd-conf-band { border: 2px solid var(--gd-line); border-radius: 16px; box-shadow: var(--gd-sticker); }
.gd-conf-band--high { background: var(--gd-green-soft); }
.gd-conf-band--med { background: var(--gd-yellow-soft); }
.gd-conf-band--low { background: #fdeceb; }
.gd-conf-card { border: 2px solid var(--gd-line); border-radius: 11px; box-shadow: 2px 2px 0 var(--gd-line); background: var(--gd-surface); }
.gd-conf-card--danger { background: var(--gd-red); border-color: var(--gd-line); }
.gd-conf-card--danger .gd-conf-toggle,
.gd-conf-card--danger .gd-conf-chevron,
.gd-conf-card--danger .gd-conf-warn-ico { color: #fff; }
.gd-conf-card--danger .gd-conf-why { color: rgba(255, 255, 255, 0.92); }
.gd-conf-card--danger .gd-conf-dot { background: #fff; }
.gd-legend { border: 2px solid var(--gd-line); border-radius: 14px; box-shadow: var(--gd-sticker); }
.gd-legend i { border: 1.5px solid var(--gd-line); }
.gd-matrix-insight { border: 2px solid var(--gd-line); border-radius: 14px; box-shadow: var(--gd-sticker); background: var(--gd-brand-soft); }
.gd-matrix-warning { border: 2px solid var(--gd-line); border-radius: 14px; box-shadow: var(--gd-sticker); background: var(--gd-red); color: #fff; }
.gd-matrix-warning .gd-conf-warn-ico { color: #fff; }
.gd-risk-tags li { border: 2px solid var(--gd-line); box-shadow: 2px 2px 0 var(--gd-line); background: var(--gd-surface); }

/* hero eyebrow shares the highlighter sticker treatment */
.gd-eyebrow {
  display: inline-block;
  background: var(--gd-yellow);
  color: var(--gd-ink);
  padding: 5px 12px;
  border: 2px solid var(--gd-line);
  border-radius: 8px;
  box-shadow: 2px 2px 0 var(--gd-line);
  transform: rotate(-1.2deg);
}

/* ---- Asset 04 rabbit hole ---- */
.gd-rabbit {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(min(100%, 17rem), 0.75fr);
  gap: clamp(18px, 3cqi, 30px);
  align-items: start;
}
.gd-rabbit-path { display: grid; gap: 12px; }
.gd-rabbit-step {
  width: min(100%, 35rem);
  margin-inline-start: clamp(0px, calc(var(--level, 0) * 4cqi), 11rem);
}
.gd-rabbit-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  text-align: left;
  border: 2px solid var(--gd-line);
  border-radius: 14px;
  background: var(--gd-surface);
  color: var(--gd-ink);
  box-shadow: var(--gd-sticker);
  padding: 13px 14px;
  transform: rotate(-0.4deg);
}
.gd-rabbit-step:nth-child(2n) .gd-rabbit-toggle { transform: rotate(0.7deg); background: var(--gd-yellow-soft); }
.gd-rabbit-step:nth-child(3n) .gd-rabbit-toggle { background: var(--gd-brand-soft); }
.gd-rabbit-step:nth-child(n + 5) .gd-rabbit-toggle { background: #fdeceb; }
.gd-rabbit-toggle:hover,
.gd-rabbit-toggle[aria-expanded="true"] { transform: translate(-2px, -2px) rotate(0deg); box-shadow: var(--gd-sticker-lg); }
.gd-rabbit-toggle:focus-visible { outline: 2px solid var(--gd-brand); outline-offset: 3px; }
.gd-rabbit-num {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid var(--gd-line);
  border-radius: 50%;
  background: var(--gd-red);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}
.gd-rabbit-copy strong,
.gd-rabbit-copy small { display: block; }
.gd-rabbit-copy strong { font-size: 1rem; color: var(--gd-ink); }
.gd-rabbit-copy small { color: var(--gd-muted); font-size: 0.82rem; margin-top: 2px; }
.gd-rabbit-clutter {
  display: grid;
  grid-template-columns: repeat(3, 9px);
  gap: 4px;
}
.gd-rabbit-clutter span {
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--gd-line);
  background: var(--gd-purple);
  transform: translateY(calc(var(--d) * -1px));
}
.gd-rabbit-detail {
  margin: 8px 0 0 48px;
  border: 2px dashed var(--gd-line);
  border-radius: 12px;
  background: var(--gd-surface);
  box-shadow: 2px 2px 0 var(--gd-line);
  padding: 12px 14px;
  color: var(--gd-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}
.gd-rabbit-toggle[aria-expanded="false"] + .gd-rabbit-detail { display: none; }
.gd-rabbit-aside {
  display: grid;
  gap: 14px;
  position: sticky;
  top: calc(var(--nav-h) + 20px);
}
.gd-rabbit-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.gd-rabbit-tags span,
.gd-constraint-chips li,
.gd-system-constraints span {
  border: 2px solid var(--gd-line);
  border-radius: 999px;
  background: var(--gd-surface);
  box-shadow: 2px 2px 0 var(--gd-line);
  padding: 6px 11px;
  color: var(--gd-ink);
  font-size: 0.76rem;
  font-weight: 700;
}
.gd-rabbit-warning,
.gd-rabbit-reflection {
  margin: 0;
  border: 2px solid var(--gd-line);
  border-radius: 14px;
  box-shadow: var(--gd-sticker);
  padding: 16px;
  font-weight: 800;
  line-height: 1.35;
}
.gd-rabbit-warning { background: var(--gd-red); color: #fff; }
.gd-rabbit-reflection { background: var(--gd-yellow); color: var(--gd-ink); transform: rotate(1deg); }
@container (max-width: 55rem) {
  .gd-rabbit { grid-template-columns: 1fr; }
  .gd-rabbit-aside { position: static; }
  .gd-rabbit-step { margin-inline-start: 0; width: 100%; }
}

/* ---- Asset 05 research wall ---- */
.gd-research-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  gap: clamp(14px, 2cqi, 20px);
}
.gd-research-cluster,
.gd-validation-card {
  border: 2px solid var(--gd-line);
  border-radius: 16px;
  box-shadow: var(--gd-sticker);
  padding: 16px;
  background: var(--gd-surface);
}
.gd-research-cluster--red { background: #ffe1dc; }
.gd-research-cluster--yellow { background: var(--gd-yellow-soft); }
.gd-research-cluster--green { background: var(--gd-green-soft); }
.gd-research-cluster--purple { background: var(--gd-brand-soft); }
.gd-research-cluster--blue { background: #e3efff; }
.gd-research-cluster h4 {
  margin: 0 0 12px;
  color: var(--gd-ink);
  font-size: 1rem;
}
.gd-notes { display: grid; gap: 9px; }
.gd-note {
  width: 100%;
  min-height: 72px;
  border: 2px solid var(--gd-line);
  border-radius: 7px;
  background: var(--gd-surface);
  box-shadow: 2px 2px 0 var(--gd-line);
  color: var(--gd-ink);
  padding: 11px 12px;
  text-align: left;
  font-size: 0.86rem;
  line-height: 1.35;
  transform: rotate(var(--r));
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.gd-note:hover { transform: translate(-2px, -2px) rotate(0deg); box-shadow: 5px 5px 0 var(--gd-line); }
.gd-validation-card {
  display: grid;
  gap: 10px;
  background: var(--espresso);
  color: #fff;
}
.gd-validation-label {
  color: var(--gd-yellow);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gd-validation-card strong { font-size: 1.3rem; line-height: 1.15; }
.gd-validation-card ul { margin: 0; padding-left: 1.1rem; color: rgba(255, 255, 255, 0.86); }
/* Now the 6th card in the research wall (was a full-width box below it, which
   left an awkward empty grid cell + horizontal dead space). Same footprint as
   .gd-research-cluster so the grid fills evenly; the takeaway reads as the
   card the whole wall points to. */
.gd-synthesis {
  display: grid;
  align-content: center;
  gap: 8px;
  border: 2px solid color-mix(in srgb, var(--gd-brand) 34%, var(--gd-border));
  border-radius: 16px;
  background: var(--gd-brand-soft);
  color: var(--gd-ink);
  box-shadow: var(--gd-sticker-lg);
  padding: 16px;
}
.gd-synthesis-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--gd-brand-strong);
}
.gd-synthesis-line {
  margin: 0;
  font-size: clamp(1rem, 1.6cqi, 1.2rem);
  line-height: 1.4;
  font-weight: 800;
  color: var(--gd-ink);
}

.gd-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--gd-ink);
}
.gd-rating i {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--gd-line);
  border-radius: 50%;
  background: transparent;
}
.gd-rating i.is-on { background: var(--gd-brand); }
.gd-rating--medium i.is-on { background: var(--gd-yellow); }
.gd-rating--low i.is-on { background: var(--gd-red); }
.gd-rating b { margin-left: 5px; font-size: 0.82rem; }
.gd-evidence--left { justify-content: flex-start; }

/* ---- Asset 07 flow comparison ---- */
.gd-flow-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(14px, 2cqi, 22px);
  align-items: center;
}
.gd-flow-panel {
  border: 2px solid var(--gd-line);
  border-radius: 16px;
  box-shadow: var(--gd-sticker);
  padding: clamp(16px, 2.4cqi, 22px);
  background: var(--gd-surface);
}
.gd-flow-panel--prompt { background: #fdeceb; }
.gd-flow-panel--hybrid { background: var(--gd-green-soft); }
.gd-flow-kicker {
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--gd-muted);
}
.gd-flow-panel h4 { margin: 0 0 16px; color: var(--gd-ink); font-size: 1.18rem; }
.gd-flow-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.gd-flow-list li { min-width: 0; }
.gd-flow-step {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--gd-line);
  border-radius: 12px;
  background: var(--gd-surface);
  box-shadow: 2px 2px 0 var(--gd-line);
  padding: 9px 11px;
  color: var(--gd-ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.25;
  text-align: left;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.gd-flow-step:hover,
.gd-flow-step.is-active {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--gd-line);
}
.gd-flow-step:focus-visible {
  outline: 2px solid var(--gd-brand);
  outline-offset: 3px;
}
.gd-flow-step span {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid var(--gd-line);
  border-radius: 50%;
  background: var(--gd-brand);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}
.gd-flow-list--prompt li.is-marked .gd-flow-step { background: var(--gd-risk-soft); }
.gd-flow-list--hybrid li.is-marked .gd-flow-step { background: var(--gd-good-soft); }
.gd-flow-step.is-active {
  background: color-mix(in srgb, var(--blossom) 36%, var(--surface));
}
.gd-flow-center {
  display: grid;
  place-items: center;
  text-align: center;
  border: 2px solid var(--gd-line);
  border-radius: 50%;
  background: var(--gd-yellow);
  box-shadow: var(--gd-sticker-lg);
  width: clamp(10.5rem, 20cqi, 14.5rem);
  aspect-ratio: 1;
  padding: clamp(14px, 2cqi, 18px);
  color: var(--gd-ink);
  transform: rotate(-4deg);
}
.gd-flow-center strong,
.gd-flow-center span { display: block; line-height: 1.12; }
.gd-flow-center strong { color: var(--gd-ink); font-size: clamp(1rem, 1.8cqi, 1.25rem); }
.gd-flow-center span { color: var(--gd-muted); font-size: clamp(0.76rem, 1.4cqi, 0.9rem); margin-top: 6px; }
.gd-flow-label {
  margin: 14px 0 0;
  font-weight: 800;
  line-height: 1.3;
}
.gd-flow-label--bad { color: var(--gd-risk); }
.gd-flow-label--good { color: var(--gd-good); }
.gd-flow-math {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.gd-flow-math span {
  border: 2px solid var(--gd-line);
  border-radius: 999px;
  background: var(--gd-surface);
  box-shadow: 2px 2px 0 var(--gd-line);
  padding: 7px 12px;
  color: var(--gd-ink);
  font-size: 0.85rem;
  font-weight: 700;
}
.gd-flow-math b { color: var(--gd-brand); }
@container (max-width: 58rem) {
  .gd-flow-compare { grid-template-columns: 1fr; }
  .gd-flow-center {
    width: min(100%, 18rem);
    aspect-ratio: auto;
    border-radius: 14px;
    justify-self: center;
    transform: none;
    box-shadow: 0 5px 0 var(--gd-line);
  }
}

/* ---- Asset 08 final annotated mockup ---- */
.gd-final-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(min(100%, 18rem), 0.8fr);
  gap: clamp(18px, 3cqi, 30px);
  align-items: start;
}
.gd-window {
  border: 2px solid var(--gd-line);
  border-radius: 18px;
  background: var(--gd-surface);
  box-shadow: var(--gd-sticker-lg);
  overflow: hidden;
}
.gd-window-head {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid var(--gd-line);
  background: var(--gd-brand-soft);
  padding: 12px 14px;
  color: var(--gd-ink);
}
.gd-window-head strong { margin-right: auto; }
.gd-window-head span:last-child {
  border: 2px solid var(--gd-line);
  border-radius: 999px;
  background: var(--gd-yellow);
  color: var(--gd-ink);
  padding: 3px 9px;
  font-size: 0.76rem;
  font-weight: 800;
}
.gd-window-dots { display: inline-flex; gap: 5px; }
.gd-window-dots i {
  width: 10px;
  height: 10px;
  border: 2px solid var(--gd-line);
  border-radius: 50%;
  background: var(--gd-red);
}
.gd-window-dots i:nth-child(2) { background: var(--gd-yellow); }
.gd-window-dots i:nth-child(3) { background: var(--gd-green); }
.gd-field,
.gd-body-field,
.gd-update-panel,
.gd-feedback-row,
.gd-disclaimer {
  margin: 14px;
}
.gd-field label,
.gd-body-field label,
.gd-update-panel label {
  display: block;
  margin-bottom: 6px;
  color: var(--gd-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gd-field div,
.gd-message-area,
.gd-update-panel input {
  border: 2px solid var(--gd-line);
  border-radius: 12px;
  background: #fff;
  color: var(--gd-ink);
}
.gd-field div { padding: 10px 12px; font-weight: 650; }
.gd-message-area {
  min-height: 174px;
  padding: 14px;
  line-height: 1.55;
}
.gd-message-area > p { display: none; margin: 0; }
.gd-mockup:not(.is-thinking):not(.is-generated):not(.is-refined) .gd-body-empty { display: block; color: var(--gd-muted); }
.gd-mockup.is-thinking .gd-body-thinking { display: flex; align-items: center; gap: 10px; color: var(--gd-brand); font-weight: 800; }
.gd-mockup.is-generated .gd-body-generated,
.gd-mockup.is-refined .gd-body-refined { display: block; }
.gd-composer-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px;
}
.gd-composer-controls button,
.gd-update-panel button,
.gd-feedback-row button {
  border: 2px solid var(--gd-line);
  border-radius: 12px;
  box-shadow: 2px 2px 0 var(--gd-line);
  background: var(--gd-surface);
  color: var(--gd-ink);
  padding: 8px 11px;
  font-weight: 800;
  font-size: 0.85rem;
}
.gd-ui-generate,
.gd-ui-update { background: var(--gd-brand) !important; color: #fff !important; }
.gd-ui-stop { display: none; background: var(--gd-red) !important; color: #fff !important; }
.gd-mockup.is-thinking .gd-ui-stop { display: inline-flex; }
.gd-ui-clear { background: var(--gd-yellow-soft) !important; }
.gd-update-panel {
  border: 2px solid var(--gd-line);
  border-radius: 14px;
  background: var(--gd-brand-soft);
  box-shadow: var(--gd-sticker);
  padding: 13px;
  opacity: 0.55;
}
.gd-mockup.is-generated .gd-update-panel,
.gd-mockup.is-refined .gd-update-panel { opacity: 1; }
.gd-update-panel div { display: flex; gap: 8px; }
.gd-update-panel input {
  min-width: 0;
  flex: 1;
  padding: 9px 10px;
}
.gd-feedback-row { display: flex; gap: 8px; }
.gd-ui-feedback[aria-pressed="true"] { background: var(--gd-green) !important; color: #fff !important; }
.gd-disclaimer {
  border-top: 2px dashed var(--gd-line);
  padding-top: 12px;
  color: var(--gd-muted);
  font-size: 0.82rem;
}
.gd-annotations { display: grid; gap: 10px; }
.gd-annotation {
  border: 2px solid var(--gd-line);
  border-radius: 12px;
  background: var(--gd-yellow-soft);
  box-shadow: 2px 2px 0 var(--gd-line);
  padding: 11px 12px;
}
.gd-annotation:nth-child(2n) { background: var(--gd-brand-soft); transform: rotate(0.7deg); }
.gd-annotation b,
.gd-annotation span { display: block; }
.gd-annotation b { color: var(--gd-ink); font-size: 0.86rem; margin-bottom: 3px; }
.gd-annotation span { color: var(--gd-muted); font-size: 0.8rem; line-height: 1.35; }
.gd-constraint-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
}
.gd-final-caption {
  margin: 20px 0 0;
  text-align: center;
  color: var(--gd-brand-strong);
  font-size: clamp(1.3rem, 2.5cqi, 1.9rem);
  font-weight: 900;
}
@container (max-width: 58rem) {
  .gd-final-stage { grid-template-columns: 1fr; }
}
@container (max-width: 38rem) {
  .gd-update-panel div { flex-direction: column; }
}

/* ---- Asset 09 trust + metrics ---- */
.gd-trust-system {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  gap: clamp(18px, 3cqi, 30px);
  align-items: start;
}
.gd-trust-framework,
.gd-metrics-board {
  border: 2px solid var(--gd-line);
  border-radius: 18px;
  background: var(--gd-surface);
  box-shadow: var(--gd-sticker-lg);
  padding: clamp(16px, 2.4cqi, 22px);
}
.gd-trust-label {
  margin: 0 0 14px;
  color: var(--gd-muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.gd-trust-stack {
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
}
.gd-trust-layer {
  width: 100%;
  display: grid;
  gap: 4px;
  border: 2px solid var(--gd-line);
  border-radius: 13px;
  box-shadow: 2px 2px 0 var(--gd-line);
  padding: 12px 13px;
  text-align: left;
  background: var(--gd-brand-soft);
  color: var(--gd-ink);
}
.gd-trust-layer--1 { background: #fff; }
.gd-trust-layer--2 { background: var(--gd-yellow-soft); }
.gd-trust-layer--3 { background: #fdeceb; }
.gd-trust-layer--4 { background: var(--gd-green-soft); }
.gd-trust-layer--5 { background: var(--gd-lav); }
.gd-trust-layer[aria-pressed="true"] { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--gd-line); }
.gd-trust-layer strong { color: var(--gd-ink); font-size: 0.98rem; }
.gd-trust-layer span { color: var(--gd-muted); font-size: 0.84rem; line-height: 1.4; }
.gd-trust-callouts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.gd-trust-callouts span {
  border: 2px solid var(--gd-line);
  border-radius: 999px;
  background: var(--gd-yellow);
  color: var(--gd-ink);
  box-shadow: 2px 2px 0 var(--gd-line);
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 800;
}
.gd-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 10px;
}
.gd-metric {
  border: 2px solid var(--gd-line);
  border-radius: 14px;
  background: var(--gd-surface);
  box-shadow: 2px 2px 0 var(--gd-line);
  padding: 13px;
}
.gd-metric span {
  display: block;
  color: var(--gd-muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.gd-metric strong {
  display: block;
  margin: 5px 0;
  color: var(--gd-brand);
  font-size: clamp(1.5rem, 3cqi, 2.15rem);
  line-height: 1;
}
.gd-metric p {
  margin: 0;
  color: var(--gd-ink);
  font-size: 0.83rem;
  line-height: 1.35;
}
.gd-testing-card {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  border: 2px solid var(--gd-line);
  border-radius: 14px;
  background: var(--espresso);
  color: #fff;
  box-shadow: var(--gd-sticker);
  padding: 13px;
}
.gd-testing-card b { color: var(--blossom); }
.gd-testing-card span { color: rgba(255, 255, 255, 0.86); font-size: 0.88rem; }
.gd-system-constraints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.gd-trust-bottom {
  margin: clamp(18px, 3cqi, 28px) 0 0;
  border: 2px solid var(--gd-line);
  border-radius: 14px;
  background: var(--gd-yellow);
  color: var(--gd-ink);
  box-shadow: var(--gd-sticker-lg);
  padding: 16px 18px;
  font-size: clamp(1.05rem, 2cqi, 1.35rem);
  line-height: 1.35;
  font-weight: 900;
  text-align: center;
}
@container (max-width: 58rem) {
  .gd-trust-system { grid-template-columns: 1fr; }
}

/* ============================================================
   Case-study reading column fix.
   Base .container uses --max:1540px (too wide for a text-heavy
   case study), which left the prose hugging the left edge.
   Constrain the Generate Draft column to a centered ~1080px.
   ============================================================ */
.gd-page .container { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }
/* let the hero timeline + final mockup breathe a little wider */
.gd-page .gd-hero .container { width: min(1180px, calc(100% - 40px)); }

/* ============================================================
   SOFT-GIRL × FIGJAM CROSSOVER (glassmorphism)
   Frosted glass surfaces, pastel gradient canvas, soft glows,
   gradient headings. Keeps playful FigJam structure, softened.
   Typography untouched (inherits homepage font).
   Scalable only: tints/opacity/glass — NO new fixed widths.
   ============================================================ */
.gd-page {
  --gd-brand: #7c6cf0;
  --gd-brand-strong: #5b4bd6;
  --gd-brand-soft: #ece9ff;
  --gd-lav: #d9d2ff;
  --gd-yellow: #ffd86b;
  --gd-yellow-soft: #fff3cf;
  --gd-green: #7fd6b0;
  --gd-green-soft: #e1f6ed;
  --gd-red: #f4889a;
  --gd-red-soft: #ffe2ea;
  --gd-purple: #9b7cf0;
  --gd-line: rgba(43, 39, 80, 0.16);
  --gd-ink: #2b2750;
  --gd-muted: #6b6790;
  --gd-border: rgba(120, 110, 170, 0.20);
  --gd-surface: rgba(255, 255, 255, 0.58);
  --gd-surface-2: rgba(255, 255, 255, 0.42);
  --gd-glass-border: rgba(255, 255, 255, 0.7);
  --gd-radius: 18px;
  --gd-radius-lg: 26px;
  --gd-sticker: 0 10px 28px rgba(95, 75, 214, 0.14);
  --gd-sticker-lg: 0 18px 44px rgba(95, 75, 214, 0.20);
  --gd-dot: rgba(124, 108, 240, 0.10);
  --gd-glass: blur(14px) saturate(1.2);
  background-color: #efe9ff;
  background-image:
    radial-gradient(var(--gd-dot) 1.4px, transparent 1.5px),
    radial-gradient(38rem 30rem at 10% 6%, rgba(155, 124, 240, 0.24), transparent 62%),
    radial-gradient(34rem 28rem at 92% 18%, rgba(120, 170, 255, 0.22), transparent 62%),
    radial-gradient(42rem 34rem at 74% 96%, rgba(255, 150, 185, 0.18), transparent 60%),
    linear-gradient(165deg, #efeaff 0%, #e7edff 42%, #f6ebff 70%, #ffeef1 100%);
  background-size: 26px 26px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}

/* ---- gradient headings (typography unchanged, just fill) ---- */
.gd-hero-title,
.gd-asset-title,
.gd-section-title {
  background: linear-gradient(100deg, #6c5ce7, #4f8af7 55%, #b86ad8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- frosted-glass neutral surfaces ---- */
.gd-phase,
.gd-tension-card,
.gd-draft-card,
.gd-mechanism,
.gd-conf-card,
.gd-legend,
.gd-matrix-insight,
.gd-snapshot-grid > div,
.gd-rabbit-step,
.gd-validation-card,
.gd-research-cluster,
.gd-flow-panel,
.gd-window,
.gd-annotation,
.gd-trust-layer,
.gd-metric,
.gd-testing-card,
.gd-model-card {
  background: var(--gd-surface);
  -webkit-backdrop-filter: var(--gd-glass);
  backdrop-filter: var(--gd-glass);
  border: 1.5px solid var(--gd-glass-border);
  box-shadow: var(--gd-sticker);
  border-radius: var(--gd-radius);
}
.gd-snapshot-grid { background: var(--gd-border); border: 1.5px solid var(--gd-glass-border); box-shadow: var(--gd-sticker-lg); border-radius: var(--gd-radius-lg); }

/* ---- chips / pills → soft frosted ---- */
.gd-context-list li,
.gd-evidence li,
.gd-risk-tags li,
.gd-constraint-chips li,
.gd-system-constraints span,
.gd-rabbit-tags span,
.gd-trust-callouts span,
.gd-flow-math span {
  background: var(--gd-surface);
  -webkit-backdrop-filter: var(--gd-glass);
  backdrop-filter: var(--gd-glass);
  border: 1.5px solid var(--gd-glass-border);
  box-shadow: 0 4px 14px rgba(95, 75, 214, 0.10);
}

/* ---- semantic tints kept, softened to pastel translucency ---- */
.gd-conf-band--high { background: rgba(127, 214, 176, 0.26); }
.gd-conf-band--med { background: rgba(255, 216, 107, 0.26); }
.gd-conf-band--low { background: rgba(244, 136, 154, 0.20); }
.gd-conf-band { -webkit-backdrop-filter: var(--gd-glass); backdrop-filter: var(--gd-glass); border: 1.5px solid var(--gd-glass-border); box-shadow: var(--gd-sticker); }
.gd-conf-card--danger { background: rgba(244, 136, 154, 0.92); border-color: rgba(255,255,255,0.6); }
.gd-tension-card:nth-child(1) { background: rgba(217, 210, 255, 0.45); }
.gd-tension-card:nth-child(2) { background: rgba(255, 224, 138, 0.38); }
.gd-tension-card--win { background: rgba(127, 214, 176, 0.40); box-shadow: var(--gd-sticker-lg); }
.gd-matrix-insight { background: rgba(155, 124, 240, 0.20); }
.gd-matrix-warning { background: rgba(244, 136, 154, 0.92); color: #4a1622; border: 1.5px solid rgba(255,255,255,0.6); box-shadow: var(--gd-sticker); }
.gd-matrix-warning .gd-conf-warn-ico { color: #7a1d2c; }

/* ---- phase colored top-bars → pastel ---- */
.gd-timeline .gd-phase:nth-child(1)::before { background: linear-gradient(90deg,#7c6cf0,#5b9bff); }
.gd-timeline .gd-phase:nth-child(3)::before { background: linear-gradient(90deg,#ffd86b,#ffb37a); }
.gd-timeline .gd-phase:nth-child(5)::before { background: linear-gradient(90deg,#9b7cf0,#c98ce0); }
.gd-timeline .gd-phase:nth-child(7)::before { background: linear-gradient(90deg,#7fd6b0,#6fc6d6); }

/* ---- buttons → pastel gradient + soft glow ---- */
.gd-magic-btn,
.gd-ui-generate,
.gd-ui-update {
  background: linear-gradient(135deg, #7c6cf0, #5b9bff);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 26px rgba(95, 75, 214, 0.34);
  border-radius: 14px;
  animation: none;
}
.gd-magic-btn:hover,
.gd-ui-generate:hover,
.gd-ui-update:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(95, 75, 214, 0.42); }

/* ---- highlighter kickers → frosted pastel pill ---- */
.gd-eyebrow,
.gd-asset-eyebrow,
.gd-section-kicker {
  background: rgba(155, 124, 240, 0.18);
  color: var(--gd-brand-strong);
  border: 1.5px solid var(--gd-glass-border);
  -webkit-backdrop-filter: var(--gd-glass);
  backdrop-filter: var(--gd-glass);
  box-shadow: 0 6px 16px rgba(95, 75, 214, 0.12);
  transform: rotate(-1deg);
}

/* ---- quote / sticky → soft pastel note ---- */
.gd-quote { background: rgba(255, 224, 138, 0.5); color: var(--gd-ink); border: 1.5px solid var(--gd-glass-border); box-shadow: var(--gd-sticker-lg); }
.gd-quote cite { color: var(--gd-muted); }

/* ---- ordered step badges + principle badges ---- */
.gd-steps li::before,
.gd-principles b { background: linear-gradient(135deg,#7c6cf0,#5b9bff); color: #fff; border: 1.5px solid rgba(255,255,255,0.6); box-shadow: 0 4px 12px rgba(95,75,214,0.22); }
.gd-principles li { border: 1.5px solid var(--gd-glass-border); box-shadow: var(--gd-sticker); -webkit-backdrop-filter: var(--gd-glass); backdrop-filter: var(--gd-glass); }
.gd-principles li:nth-child(1) { background: rgba(217,210,255,0.5); }
.gd-principles li:nth-child(2) { background: rgba(255,224,138,0.42); }
.gd-principles li:nth-child(3) { background: rgba(127,214,176,0.42); }

/* ---- hand-drawn connectors softened ---- */
.gd-connector { color: rgba(123, 108, 240, 0.6); }

/* ---- hero stickers: soften ---- */
.gd-sticker--star2 svg path { fill: #9b7cf0; }

/* ---- dark mode ---- */
[data-theme="dark"] .gd-page {
  --gd-ink: #efeaff;
  --gd-muted: #aaa3d6;
  --gd-line: rgba(255,255,255,0.14);
  --gd-border: rgba(255,255,255,0.14);
  --gd-surface: rgba(40, 36, 70, 0.5);
  --gd-surface-2: rgba(40, 36, 70, 0.38);
  --gd-glass-border: rgba(255,255,255,0.14);
  --gd-brand-soft: rgba(124,108,240,0.18);
  --gd-dot: rgba(180,160,255,0.10);
  background-color: #15132b;
  background-image:
    radial-gradient(var(--gd-dot) 1.4px, transparent 1.5px),
    radial-gradient(38rem 30rem at 10% 6%, rgba(124,108,240,0.30), transparent 62%),
    radial-gradient(34rem 28rem at 92% 18%, rgba(70,110,200,0.28), transparent 62%),
    radial-gradient(42rem 34rem at 74% 96%, rgba(200,90,140,0.22), transparent 60%),
    linear-gradient(165deg,#15132b,#1a1840 45%,#221a40 72%,#2a1730);
}

/* ---- Asset 06 rebuilt: auto-fit model cards (fully scalable) ---- */
.gd-decision-cards {
  display: grid;
  gap: clamp(12px, 2cqi, 18px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-top: clamp(18px, 3vw, 28px);
}
.gd-model-card {
  position: relative;
  padding: clamp(16px, 2cqi, 22px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gd-model-card.is-win { box-shadow: var(--gd-sticker-lg); outline: 2px solid rgba(124, 108, 240, 0.5); outline-offset: -1px; }
.gd-model-flag {
  position: absolute; top: -10px; left: 16px;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: linear-gradient(135deg, #7c6cf0, #5b9bff);
  border: 1.5px solid rgba(255,255,255,0.6); border-radius: 999px; padding: 4px 10px;
  box-shadow: 0 6px 14px rgba(95,75,214,0.28);
}
.gd-model-head strong { display: block; font-size: 1.04rem; color: var(--gd-ink); }
.gd-model-head p { margin: 6px 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--gd-muted); }
.gd-model-ratings { margin: 0; display: grid; gap: 9px; }
.gd-model-rating-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 7px 8px;
  text-align: left;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.gd-model-rating-row:hover,
.gd-model-rating-row.is-active {
  background: color-mix(in srgb, var(--blossom) 30%, var(--surface));
  border-color: var(--gd-glass-border);
}
.gd-model-rating-row.is-active { transform: translateX(2px); }
.gd-model-rating-row:focus-visible {
  outline: 2px solid var(--gd-brand);
  outline-offset: 2px;
}
.gd-model-criterion {
  min-width: 0;
  color: var(--gd-muted);
  font-size: 0.85rem;
  line-height: 1.25;
}
.gd-model-foot { margin-top: auto; display: grid; gap: 6px; border-top: 1px dashed var(--gd-border); padding-top: 12px; }
.gd-model-foot p { margin: 0; font-size: 0.82rem; line-height: 1.45; }
.gd-model-strength { color: #2f9d77; font-weight: 550; }
.gd-model-weak { color: var(--gd-muted); }
.gd-model-focus {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin: clamp(12px, 2cqi, 18px) 0 0;
  border: 1.5px solid var(--gd-glass-border);
  border-radius: 14px;
  background: var(--gd-surface);
  -webkit-backdrop-filter: var(--gd-glass);
  backdrop-filter: var(--gd-glass);
  color: var(--gd-muted);
  box-shadow: var(--gd-sticker);
  padding: 12px 14px;
  line-height: 1.45;
}
.gd-model-focus b {
  color: var(--gd-brand-strong);
  font-size: 0.9rem;
}
.gd-model-focus span {
  flex: 1 1 18rem;
  min-width: min(100%, 14rem);
}

/* ---- FIX: flex:1 1 0 collapses to 0 height when a row becomes a column.
   In stacked (container-query) mode, let items size to their content. ---- */
@container (max-width: 52rem) {
  .gd-asset--timeline .gd-phase,
  .gd-asset--magic .gd-magic-panel { flex: 0 0 auto; width: 100%; }
}

/* ============================================================
   PALETTE: homepage hero + cherry-blossom photo.
   Maps the case study onto the site's OWN tokens (blossom pink,
   denim blue, cognac/brown, leaf green, warm cream) so it matches
   the homepage AND inherits light/dark variants automatically.
   Accessibility: body text uses --text; large gradient headings
   meet 3:1; accent fills always pair with --text or --gd-on-accent.
   This block is last, so it overrides the earlier lavender layer.
   ============================================================ */
.gd-page {
  --gd-ink: var(--text);
  --gd-muted: color-mix(in srgb, var(--muted) 72%, var(--text));
  --gd-brand: var(--accent-3);
  --gd-brand-strong: var(--brown);
  --gd-brand-soft: color-mix(in srgb, var(--cognac) 22%, var(--surface));
  --gd-line: var(--line-strong);
  --gd-border: var(--line);
  --gd-surface: color-mix(in srgb, var(--surface) 64%, transparent);
  --gd-surface-2: color-mix(in srgb, var(--surface-2) 55%, transparent);
  --gd-glass-border: color-mix(in srgb, var(--surface) 85%, transparent);
  --gd-good: color-mix(in srgb, var(--leaf) 64%, var(--text));
  --gd-good-soft: color-mix(in srgb, var(--leaf) 26%, var(--surface));
  --gd-warn: var(--accent-3);
  --gd-warn-soft: color-mix(in srgb, var(--cognac) 22%, var(--surface));
  --gd-risk: color-mix(in srgb, var(--accent) 60%, var(--text));
  --gd-risk-soft: color-mix(in srgb, var(--accent) 30%, var(--surface));
  --gd-dot: var(--grid-line);
  --gd-sticker: var(--soft-shadow);
  --gd-sticker-lg: var(--shadow);
  --gd-on-accent: #fffaf7;            /* text on dark accent (light theme) */
  background-color: var(--bg);
  background-image:
    radial-gradient(var(--gd-dot) 1.3px, transparent 1.4px),
    radial-gradient(40rem 32rem at 8% 4%, color-mix(in srgb, var(--blossom) 55%, transparent), transparent 60%),
    radial-gradient(34rem 30rem at 94% 15%, color-mix(in srgb, var(--denim-soft) 45%, transparent), transparent 60%),
    radial-gradient(44rem 36rem at 78% 98%, color-mix(in srgb, var(--leaf) 28%, transparent), transparent 60%),
    linear-gradient(165deg, color-mix(in srgb, var(--blossom-soft) 72%, var(--bg)), var(--bg) 46%, color-mix(in srgb, var(--denim-soft) 14%, var(--bg)));
  background-size: 24px 24px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}
[data-theme="dark"] .gd-page { --gd-on-accent: #1a1210; } /* dark text on light accent */

/* gradient headings — cognac → denim → brown (all ≥3:1 as large text, both themes) */
.gd-hero-title,
.gd-asset-title,
.gd-section-title {
  background: linear-gradient(100deg, var(--accent-3), var(--denim) 58%, var(--brown));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* buttons — brown → denim, theme-aware text colour */
.gd-magic-btn,
.gd-ui-generate,
.gd-ui-update {
  background: linear-gradient(135deg, var(--brown), var(--denim));
  color: var(--gd-on-accent);
  border: 1.5px solid var(--gd-glass-border);
  box-shadow: var(--gd-sticker-lg);
}

/* kicker pills — soft blossom tint, brown text */
.gd-eyebrow,
.gd-asset-eyebrow,
.gd-section-kicker {
  background: color-mix(in srgb, var(--blossom) 36%, var(--surface));
  color: var(--gd-brand-strong);
}

/* phase top-bars — the four photo hues */
.gd-timeline .gd-phase:nth-child(1)::before { background: linear-gradient(90deg, var(--accent), var(--cognac)); }
.gd-timeline .gd-phase:nth-child(3)::before { background: linear-gradient(90deg, var(--cognac), var(--leaf)); }
.gd-timeline .gd-phase:nth-child(5)::before { background: linear-gradient(90deg, var(--denim), var(--accent)); }
.gd-timeline .gd-phase:nth-child(7)::before { background: linear-gradient(90deg, var(--leaf), var(--denim)); }
.gd-timeline .gd-phase:nth-child(1) .gd-phase-glyph { color: var(--accent-3); }
.gd-timeline .gd-phase:nth-child(3) .gd-phase-glyph { color: var(--gd-good); }
.gd-timeline .gd-phase:nth-child(5) .gd-phase-glyph { color: var(--denim); }
.gd-timeline .gd-phase:nth-child(7) .gd-phase-glyph { color: var(--gd-good); }

/* semantic tints — text stays --text for contrast in both themes */
.gd-conf-band--high { background: var(--gd-good-soft); }
.gd-conf-band--med { background: var(--gd-warn-soft); }
.gd-conf-band--low { background: var(--gd-risk-soft); }
.gd-conf-card--danger { background: color-mix(in srgb, var(--accent) 30%, var(--surface)); border-color: var(--gd-risk); }
.gd-conf-card--danger .gd-conf-toggle,
.gd-conf-card--danger .gd-conf-chevron,
.gd-conf-card--danger .gd-conf-warn-ico { color: var(--text); }
.gd-conf-card--danger .gd-conf-why { color: var(--gd-muted); }
.gd-conf-card--danger .gd-conf-dot { background: var(--gd-risk); }
.gd-tension-card:nth-child(1) { background: color-mix(in srgb, var(--blossom) 38%, var(--surface)); }
.gd-tension-card:nth-child(2) { background: color-mix(in srgb, var(--cognac) 24%, var(--surface)); }
.gd-tension-card--win { background: color-mix(in srgb, var(--leaf) 32%, var(--surface)); }
.gd-matrix-insight { background: color-mix(in srgb, var(--denim) 18%, var(--surface)); }
.gd-matrix-warning { background: color-mix(in srgb, var(--accent) 30%, var(--surface)); color: var(--text); border-color: var(--gd-risk); }
.gd-matrix-warning .gd-conf-warn-ico { color: var(--gd-risk); }

/* quote sticky, step/principle badges, connectors */
.gd-quote { background: color-mix(in srgb, var(--blossom) 46%, var(--surface)); color: var(--text); }
.gd-quote cite { color: var(--gd-muted); }
.gd-steps li::before,
.gd-principles b { background: linear-gradient(135deg, var(--brown), var(--denim)); color: var(--gd-on-accent); }
.gd-principles li:nth-child(1) { background: color-mix(in srgb, var(--blossom) 38%, var(--surface)); }
.gd-principles li:nth-child(2) { background: color-mix(in srgb, var(--cognac) 24%, var(--surface)); }
.gd-principles li:nth-child(3) { background: color-mix(in srgb, var(--leaf) 30%, var(--surface)); }
.gd-magic-quote { color: var(--gd-brand-strong); }
.gd-connector { color: color-mix(in srgb, var(--brown) 70%, transparent); }
.gd-model-card.is-win { outline-color: color-mix(in srgb, var(--leaf) 70%, var(--text)); }
.gd-model-flag { background: linear-gradient(135deg, var(--brown), var(--denim)); color: var(--gd-on-accent); }
.gd-model-strength { color: var(--gd-good); }

/* hero stickers recolored to palette (face/stars; eyes stay dark) */
.gd-sticker--smiley svg circle:first-of-type { fill: var(--cognac); }
.gd-sticker--star1 svg path { fill: var(--denim); }
.gd-sticker--star2 svg path { fill: var(--accent-3); }

/* a11y fix: kicker label was 4.1:1 in dark (tan on pink tint). Base the fill
   on the theme-aware glass surface so text contrast holds in both modes;
   keep the blossom hue on the border. */
.gd-eyebrow,
.gd-asset-eyebrow,
.gd-section-kicker {
  background: var(--gd-surface);
  color: var(--gd-brand-strong);
  border: 1.5px solid color-mix(in srgb, var(--blossom) 62%, var(--gd-glass-border));
}

/* repalette the leftover yellow challenge banner → cognac tint, accessible text */
.gd-snapshot-challenge {
  background: color-mix(in srgb, var(--cognac) 28%, var(--surface));
  color: var(--text);
  -webkit-backdrop-filter: var(--gd-glass);
  backdrop-filter: var(--gd-glass);
}
.gd-snapshot-challenge span { color: var(--gd-brand-strong); }

/* polish: snapshot lands on 3 cols (6 items, no empty cells) — still auto-fit */
.gd-snapshot-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
/* polish: Update-With-AI input row wraps the button below when tight (scalable) */
.gd-update-panel > div { flex-wrap: wrap; }
.gd-update-panel input { flex: 1 1 12rem; min-width: 0; }

/* ============================================================
   Asset 05 redesign — cluster spotlight + a11y/palette fixes.
   (Codex's version used --gd-line for text/bg, which became
   translucent after the palette remap → invisible headings &
   validation card. Fixed here; tints made theme-aware.)
   ============================================================ */
.gd-research-cluster h4 { color: var(--gd-ink); }               /* was --gd-line (invisible) */
.gd-research-cluster--red    { background: color-mix(in srgb, var(--accent) 24%, var(--surface)); }
.gd-research-cluster--yellow { background: color-mix(in srgb, var(--cognac) 22%, var(--surface)); }
.gd-research-cluster--green  { background: color-mix(in srgb, var(--leaf) 24%, var(--surface)); }
.gd-research-cluster--purple { background: color-mix(in srgb, var(--brown) 18%, var(--surface)); }
.gd-research-cluster--blue   { background: color-mix(in srgb, var(--denim) 20%, var(--surface)); }

.gd-cluster-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.gd-cluster-toggle h4 { margin: 0; }
.gd-cluster-toggle:focus-visible { outline: 2px solid var(--gd-brand); outline-offset: 3px; border-radius: 8px; }
.gd-cluster-hint {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--gd-brand-strong);
  background: var(--gd-surface);
  border: 1.5px solid var(--gd-glass-border);
  border-radius: 999px;
  padding: 3px 9px;
  opacity: 0.65;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.gd-cluster-toggle:hover .gd-cluster-hint { opacity: 1; }
.gd-cluster-toggle[aria-pressed="true"] .gd-cluster-hint { opacity: 1; background: color-mix(in srgb, var(--blossom) 42%, var(--surface)); }

/* notes are now static (no per-note interaction) */
.gd-note { cursor: default; }
.gd-note:hover { transform: rotate(var(--r)); box-shadow: 2px 2px 0 var(--gd-line); }

/* spotlight: lift the chosen cluster, dim the rest */
.gd-research-wall.is-spotlighting .gd-research-cluster { opacity: 0.42; transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.gd-research-wall.is-spotlighting .gd-research-cluster.is-spotlight { opacity: 1; transform: translateY(-3px); box-shadow: var(--gd-sticker-lg); }

/* validation card: solid dark surface in BOTH themes (was --gd-line → transparent) */
.gd-validation-card { background: var(--espresso); color: #fff; }
.gd-validation-label { color: var(--blossom); }
.gd-validation-card ul { color: rgba(255, 255, 255, 0.86); }

/* ============================================================
   Asset 09 redesign — progressive trust build + a11y/palette fixes.
   (Titles used --gd-line → invisible after remap; tints not
   theme-aware. Fixed. Layers now fill up to the selected level.)
   ============================================================ */
.gd-trust-layer strong { color: var(--gd-ink); }   /* was --gd-line (invisible) */
.gd-trust-layer--1 { background: color-mix(in srgb, var(--denim) 18%, var(--surface)); }
.gd-trust-layer--2 { background: color-mix(in srgb, var(--cognac) 20%, var(--surface)); }
.gd-trust-layer--3 { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.gd-trust-layer--4 { background: color-mix(in srgb, var(--leaf) 22%, var(--surface)); }
.gd-trust-layer--5 { background: color-mix(in srgb, var(--blossom) 30%, var(--surface)); }
.gd-trust-layer { transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
/* reset old single-highlight lift (all active layers carry aria-pressed now) */
.gd-trust-layer[aria-pressed="true"] { transform: none; box-shadow: var(--gd-sticker); }
/* pending = not yet built (de-emphasized future state) */
.gd-trust-layer.is-pending { opacity: 0.5; border-style: dashed; box-shadow: none; }
/* current = the level you've built up to */
.gd-trust-layer.is-current { transform: translate(-3px, -3px); box-shadow: var(--gd-sticker-lg); }
.gd-trust-level {
  display: inline-block;
  margin: 12px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--gd-brand-strong);
  background: var(--gd-surface);
  border: 1.5px solid var(--gd-glass-border);
  border-radius: 999px;
  padding: 6px 13px;
}

/* final contrast pass: yellow sticker surfaces need dark text in both themes */
.gd-flow-center,
.gd-flow-center strong,
.gd-flow-center span,
.gd-rabbit-reflection,
.gd-window-head span:last-child,
.gd-ui-clear,
.gd-trust-callouts span,
.gd-trust-bottom {
  color: var(--espresso) !important;
}

/* final contrast pass: keep dark metric/testing cards dark after glass defaults */
.gd-testing-card {
  background: var(--espresso);
  color: #fff;
}
.gd-testing-card b { color: var(--blossom); }
.gd-testing-card span { color: rgba(255, 255, 255, 0.86); }

/* ============================================================
   Homepage and about polish.
   Fluid hierarchy, tighter spacing, no desktop nav link backdrop.
   ============================================================ */
.site-header.is-scrolled {
  background: color-mix(in srgb, var(--bg) 68%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  backdrop-filter: blur(18px) saturate(1.18);
}

@media (min-width: 761px) {
  .site-header .nav-links {
    border: 0;
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
}

.carolyn-home .cl-hero {
  padding: clamp(4px, 1vw, 14px) 0 clamp(10px, 2vw, 30px);
}

.carolyn-home .hero-greeting-loop {
  height: clamp(54px, 12vw, 132px);
}

.carolyn-home .cl-hero-grid {
  min-height: clamp(260px, 46svh, 560px);
  padding-top: clamp(42px, 6vw, 92px);
  padding-bottom: clamp(38px, 5.5vw, 84px);
}

.carolyn-home .cl-hero-type h1 {
  max-width: 11.8ch;
  font-size: clamp(2.65rem, 5.35vw, 6.6rem);
  line-height: 1;
}

.carolyn-home .hero-summary {
  max-width: 650px;
  font-size: clamp(1rem, 1.15vw, 1.28rem);
  line-height: 1.48;
}

.cl-work {
  padding: clamp(36px, 4.8vw, 72px) 0 clamp(44px, 5.8vw, 84px);
}

.cl-section-title {
  column-gap: clamp(14px, 2.3vw, 32px);
  margin-bottom: clamp(24px, 3.4vw, 46px);
}

.cl-section-title > span {
  font-size: clamp(2.05rem, 4.6vw, 4.35rem);
  line-height: 0.98;
}

.cl-project-stack {
  gap: clamp(34px, 4.8vw, 68px);
}

.cl-project {
  grid-template-columns: minmax(220px, 0.88fr) minmax(300px, 1fr);
  gap: clamp(24px, 4vw, 64px);
  padding-bottom: clamp(34px, 4.5vw, 56px);
}

.cl-project-media img {
  height: clamp(210px, 24vw, 360px);
}

.cl-pill {
  top: clamp(14px, 2vw, 24px);
  left: clamp(14px, 2vw, 24px);
  min-width: 96px;
  padding: 9px 16px;
  font-size: 0.82rem;
}

.cl-project-content {
  gap: clamp(10px, 1.35vw, 18px);
}

.cl-project-content h2 {
  font-size: clamp(2rem, 3.15vw, 3.55rem);
  line-height: 1;
}

.cl-project-outcome {
  max-width: 18ch;
  font-size: clamp(1.12rem, 1.48vw, 1.62rem);
  line-height: 1.22;
}

.cl-project-content p:not(.cl-project-outcome) {
  max-width: 58ch;
  font-size: clamp(0.98rem, 0.92vw, 1.08rem);
  line-height: 1.5;
}

.cl-project-content dl {
  margin: clamp(2px, 0.7vw, 10px) 0 0;
}

.cl-contact {
  padding: clamp(44px, 6.8vw, 94px) 0 clamp(30px, 4.8vw, 56px);
}

.marquee {
  font-size: clamp(2.35rem, 7.1vw, 7.6rem);
}

.cl-contact-grid {
  grid-template-columns: minmax(0, 0.7fr) minmax(min(100%, 18rem), 1fr);
  margin-top: clamp(30px, 4.8vw, 58px);
}

.cl-contact-grid p,
.cl-contact-grid a {
  font-size: clamp(1.02rem, 1.45vw, 1.48rem);
}

.about-page {
  overflow: hidden;
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--blossom-soft) 70%, var(--bg)) 0%, var(--bg) 48%, color-mix(in srgb, var(--leaf) 14%, var(--bg)) 100%);
}

[data-theme="dark"] .about-page {
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 76%, var(--bg)) 0%, var(--bg) 52%, color-mix(in srgb, var(--leaf) 12%, var(--bg)) 100%);
}


@media (max-width: 920px) {
  .site-header .nav-links {
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
}

@media (max-width: 760px) {
  .carolyn-home .cl-hero-grid {
    min-height: auto;
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .carolyn-home .cl-hero-type h1 {
    max-width: 12ch;
    font-size: clamp(1.78rem, 8.2vw, 2.8rem);
  }

  .cl-work {
    padding: 34px 0 42px;
  }

  .cl-section-title {
    margin-bottom: 24px;
  }

  .cl-section-title > span {
    font-size: clamp(2rem, 10.4vw, 3.1rem);
  }

  .cl-project-stack {
    gap: 34px;
  }

  .cl-project {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-bottom: 32px;
  }

  .cl-project-media,
  .cl-project-content {
    grid-column: 1;
    grid-row: auto;
  }

  .cl-project-media img {
    height: clamp(188px, 54vw, 320px);
  }

  .cl-project-content {
    gap: 10px;
  }

  .cl-project-content h2 {
    font-size: clamp(1.82rem, 8.2vw, 2.8rem);
  }

  .cl-project-outcome {
    max-width: 24ch;
    font-size: clamp(1.05rem, 5.1vw, 1.38rem);
  }

  .cl-contact-grid {
    grid-template-columns: 1fr;
  }




  .cl-contact-grid a {
    justify-self: start;
  }
}

@media (max-width: 680px) {
  .site-header .nav-links.is-open {
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.18);
    backdrop-filter: blur(20px) saturate(1.18);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--brown) 10%, transparent);
  }

  .cl-contact {
    padding: 38px 0 32px;
  }

  .marquee {
    font-size: clamp(2.2rem, 13vw, 3.8rem);
  }
}

/* 2026-06-23 About page AI operating model */
.about-page {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--blossom-soft) 78%, var(--bg)) 0 34%, var(--bg) 34% 62%, color-mix(in srgb, var(--leaf) 12%, var(--bg)) 62% 100%);
}



[data-theme="dark"] .about-page {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface-2) 84%, var(--bg)) 0 35%, var(--bg) 35% 62%, color-mix(in srgb, var(--leaf) 10%, var(--bg)) 62% 100%);
}






/* =========================================================
   AUTOSYNC — "From Lead Page to Deal Workspace" case study
   Scoped .as-* tokens mapped to the site palette (Activix-navy
   lean). Both themes defined; every text/bg pair targets WCAG AA.
   Diagrams are responsive in-page components (auto-fit / clamp /
   container queries), never raster screenshots.
   ========================================================= */
.as-page {
  --as-brand: #2f4f86;
  --as-brand-strong: #21385f;
  --as-brand-soft: #e9eef7;
  --as-ink: #1b2742;
  --as-muted: #4b5a76;
  --as-surface: #ffffff;
  --as-surface-2: #f4f7fc;
  --as-border: #d9e2f0;
  --as-accent: #875421;
  --as-accent-soft: #f6ecdd;
  --as-teal: #246d80;
  --as-teal-soft: #e2f0f3;
  --as-good: #0f7a4e;
  --as-good-soft: #e6f5ee;
  --as-warn: #a9750f;
  --as-warn-soft: #fbf1dd;
  --as-risk: #b3303f;
  --as-risk-soft: #fbe7e9;
  --as-radius: 16px;
  --as-radius-lg: 24px;
  --as-shadow: 0 1px 2px rgba(16, 33, 70, 0.05), 0 10px 30px rgba(16, 33, 70, 0.08);
  --as-shadow-lg: 0 16px 48px rgba(47, 79, 134, 0.18);
}
[data-theme="dark"] .as-page {
  --as-brand: #7aa2f0;
  --as-brand-strong: #a9c4ff;
  --as-brand-soft: #1a2742;
  --as-ink: #eaf0fb;
  --as-muted: #a6b2cb;
  --as-surface: #141c2e;
  --as-surface-2: #1b2438;
  --as-border: #2a3550;
  --as-accent: #d59a5a;
  --as-accent-soft: rgba(213, 154, 90, 0.16);
  --as-teal: #6fc0d4;
  --as-teal-soft: rgba(111, 192, 212, 0.16);
  --as-good: #57c89a;
  --as-good-soft: rgba(31, 143, 99, 0.2);
  --as-warn: #e0ac4f;
  --as-warn-soft: rgba(169, 117, 15, 0.22);
  --as-risk: #e8808d;
  --as-risk-soft: rgba(192, 65, 79, 0.22);
  --as-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.45);
  --as-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.as-page { color: var(--as-ink); }
.as-page .container { max-width: 1100px; }

/* ---- Hero ---- */
.as-hero {
  position: relative;
  padding: clamp(2.4rem, 6vw, 5rem) 0 clamp(1.6rem, 4vw, 3rem);
  overflow: hidden;
}
.as-hero-stickers { position: absolute; inset: 0; pointer-events: none; }
.as-sticker { position: absolute; opacity: 0.9; }
.as-sticker svg { width: 100%; height: 100%; overflow: visible; }
.as-sticker--car { width: clamp(46px, 7vw, 72px); top: 8%; right: 6%; transform: rotate(-6deg); }
.as-sticker--spark { width: clamp(22px, 3vw, 34px); top: 26%; left: 4%; }
.as-sticker--squiggle { width: clamp(56px, 9vw, 92px); bottom: 12%; right: 12%; opacity: 0.5; }
[data-theme="dark"] .as-sticker { opacity: 0.55; }
.as-eyebrow {
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--as-brand);
  margin: 0 0 0.8rem;
}
.as-hero-title {
  font-size: clamp(2.1rem, 6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 0.9rem;
  color: var(--as-ink);
}
.as-hero-lead {
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  line-height: 1.5;
  color: var(--as-muted);
  max-width: 46ch;
  margin: 0 0 clamp(1.8rem, 4vw, 2.8rem);
}

/* ---- Snapshot ---- */
.as-snapshot { padding: clamp(1.4rem, 3vw, 2.4rem) 0; }
.as-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--as-border);
  border: 1px solid var(--as-border);
  border-radius: var(--as-radius);
  overflow: hidden;
  margin: 0 0 1.2rem;
}
.as-snapshot-grid > div { background: var(--as-surface); padding: 1.05rem 1.2rem; }
.as-snapshot-grid dt {
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--as-muted);
  margin-bottom: 0.35rem;
}
.as-snapshot-grid dd { margin: 0; font-size: 0.96rem; line-height: 1.45; color: var(--as-ink); }
.as-snapshot-challenge {
  background: var(--as-brand-soft);
  border: 1px solid var(--as-border);
  border-radius: var(--as-radius);
  padding: 1.1rem 1.3rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--as-ink);
  margin: 0;
}
.as-snapshot-challenge span {
  display: inline-block;
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--as-brand);
  margin-right: 0.5rem;
}

/* ---- Section frame ---- */
.as-section { padding: clamp(2.2rem, 5vw, 3.6rem) 0; }
.as-section-kicker {
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--as-brand);
  margin: 0 0 0.6rem;
}
.as-section-title {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  color: var(--as-ink);
  max-width: 24ch;
}
.as-section-body { max-width: 62ch; }
.as-section-body p { font-size: 1.04rem; line-height: 1.65; color: var(--as-muted); margin: 0 0 1rem; }
.as-section-body p strong { color: var(--as-ink); font-weight: 650; }
.as-emphasis {
  border-left: 3px solid var(--as-brand);
  padding-left: 1rem;
  color: var(--as-ink) !important;
  font-weight: 500;
}
.as-caption {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--as-muted);
  margin: 1rem 0 0;
  font-style: italic;
}

.as-asset {
  container-type: inline-size;
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}

/* ---- Hero evolution timeline ---- */
.as-arc {
  font-family: var(--grotesk);
  font-size: clamp(0.74rem, 1.6vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--as-brand);
  margin: 0 0 1.1rem;
}
.as-tl-track { position: relative; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.as-tl-rail {
  position: absolute;
  top: 22px;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--as-border), var(--as-brand), var(--as-border));
  z-index: 0;
}
.as-tl-phase { position: relative; z-index: 1; flex: 1 1 12rem; min-width: 0; }
.as-tl-node {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--as-brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--grotesk);
  font-weight: 700;
  margin-bottom: 0.7rem;
  box-shadow: var(--as-shadow);
}
[data-theme="dark"] .as-tl-node { color: #0e1525; }
.as-tl-toggle {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  text-align: left;
  background: var(--as-surface);
  border: 1px solid var(--as-border);
  border-radius: var(--as-radius);
  padding: 0.95rem 1rem;
  cursor: pointer;
  color: var(--as-ink);
  box-shadow: var(--as-shadow);
  transition: border-color 0.15s, transform 0.15s;
}
.as-tl-toggle:hover { border-color: var(--as-brand); transform: translateY(-2px); }
.as-tl-toggle:focus-visible { outline: 2px solid var(--as-brand); outline-offset: 2px; }
.as-tl-tag {
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--as-brand);
}
.as-tl-name { font-size: 1.08rem; font-weight: 650; }
.as-tl-summary { font-size: 0.9rem; line-height: 1.45; color: var(--as-muted); }
.as-tl-more { font-family: var(--grotesk); font-size: 0.74rem; font-weight: 600; color: var(--as-brand); margin-top: 0.2rem; }
.as-tl-more-close { display: none; }
.as-tl-toggle[aria-expanded="true"] .as-tl-more-open { display: none; }
.as-tl-toggle[aria-expanded="true"] .as-tl-more-close { display: inline; }
.as-tl-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.as-tl-toggle[aria-expanded="true"] + .as-tl-detail { grid-template-rows: 1fr; }
.as-tl-detail-inner { overflow: hidden; }
.as-tl-detail-inner p {
  margin: 0.6rem 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--as-muted);
  background: var(--as-surface-2);
  border: 1px solid var(--as-border);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
}
@container (max-width: 640px) {
  .as-tl-rail { display: none; }
  .as-tl-phase { flex: 0 0 auto; width: 100%; }
}

/* ---- Sales journey story map ---- */
.as-journey-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.as-journey-stage {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--as-surface);
  border: 1px solid var(--as-border);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  color: var(--as-ink);
  font-size: 0.84rem;
  transition: border-color 0.15s, background 0.15s;
}
.as-journey-stage:hover { border-color: var(--as-brand); }
.as-journey-stage:focus-visible { outline: 2px solid var(--as-brand); outline-offset: 2px; }
.as-journey-stage.is-active { background: var(--as-brand); border-color: var(--as-brand); color: #fff; }
[data-theme="dark"] .as-journey-stage.is-active { color: #0e1525; }
.as-journey-step { font-family: var(--grotesk); font-weight: 700; font-size: 0.72rem; opacity: 0.7; }
.as-journey-label { font-weight: 550; }
.as-journey-detail {
  background: var(--as-surface);
  border: 1px solid var(--as-border);
  border-radius: var(--as-radius);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--as-shadow);
}
.as-journey-detail-title {
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--as-brand);
  margin: 0 0 0.3rem;
}
.as-journey-q { font-size: 1.2rem; font-weight: 600; color: var(--as-ink); margin: 0 0 1rem; }
.as-journey-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.8rem;
}
.as-journey-col { border-radius: 12px; padding: 0.85rem 0.95rem; }
.as-journey-col span {
  display: block;
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.as-journey-col p { margin: 0; font-size: 0.92rem; line-height: 1.5; }
.as-journey-col--old { background: var(--as-risk-soft); }
.as-journey-col--old span { color: var(--as-risk); }
.as-journey-col--old p { color: var(--as-ink); }
.as-journey-col--now { background: var(--as-good-soft); }
.as-journey-col--now span { color: var(--as-good); }
.as-journey-col--now p { color: var(--as-ink); }

/* ---- Old lead page scroll map ---- */
.as-scroll-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}
.as-scroll-page {
  background: var(--as-surface-2);
  border: 1px solid var(--as-border);
  border-radius: var(--as-radius);
  padding: 0.8rem;
  max-height: 360px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.as-scroll-window { display: flex; flex-direction: column; gap: 0.45rem; }
.as-scroll-fold {
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--as-brand);
  margin-bottom: 0.15rem;
}
.as-scroll-block {
  border-radius: 9px;
  padding: 0.7rem 0.8rem;
  font-size: 0.86rem;
  font-weight: 550;
  border: 1px solid var(--as-border);
  background: var(--as-surface);
  color: var(--as-ink);
}
.as-scroll-block--top { border-color: var(--as-brand); background: var(--as-brand-soft); }
.as-scroll-block--mid { color: var(--as-muted); }
.as-scroll-block--work { border-style: dashed; }
.as-scroll-notes { display: flex; flex-direction: column; gap: 0.6rem; }
.as-scroll-flag {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 550;
  color: var(--as-ink);
  margin: 0;
}
.as-scroll-flag span { color: var(--as-brand); font-weight: 700; }
.as-scroll-flag--warn span { color: var(--as-warn); }
.as-scroll-list { margin: 0.2rem 0 0; padding-left: 1.1rem; }
.as-scroll-list li { font-size: 0.92rem; line-height: 1.55; color: var(--as-muted); margin-bottom: 0.35rem; }
.as-scroll-diagnosis {
  margin: 0.4rem 0 0;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--as-ink);
  border-left: 3px solid var(--as-brand);
  padding-left: 0.9rem;
}
@container (max-width: 620px) {
  .as-scroll-grid { grid-template-columns: 1fr; }
}

/* ---- Problem reframe ---- */
.as-reframe-shift {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}
.as-reframe-from, .as-reframe-to {
  flex: 1 1 16rem;
  border-radius: var(--as-radius);
  padding: 1rem 1.2rem;
  border: 1px solid var(--as-border);
}
.as-reframe-from { background: var(--as-surface-2); }
.as-reframe-to { background: var(--as-brand-soft); border-color: var(--as-brand); }
.as-reframe-from span, .as-reframe-to span {
  display: block;
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.as-reframe-from span { color: var(--as-muted); }
.as-reframe-to span { color: var(--as-brand); }
.as-reframe-from p, .as-reframe-to p { margin: 0; font-size: 1.1rem; font-weight: 600; line-height: 1.35; color: var(--as-ink); }
.as-reframe-arrow { align-self: center; font-size: 1.6rem; color: var(--as-brand); font-weight: 700; }
.as-layers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.9rem;
}
.as-layer {
  display: flex;
  gap: 0.8rem;
  background: var(--as-surface);
  border: 1px solid var(--as-border);
  border-radius: var(--as-radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--as-shadow);
}
.as-layer-n {
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--as-brand-soft);
  color: var(--as-brand);
  display: grid; place-items: center;
  font-family: var(--grotesk); font-weight: 700; font-size: 0.9rem;
}
.as-layer b { display: block; font-size: 1rem; color: var(--as-ink); margin-bottom: 0.25rem; }
.as-layer p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--as-muted); }

/* ---- Research snapshot ---- */
.as-research-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}
.as-research-card {
  background: var(--as-surface);
  border: 1px solid var(--as-border);
  border-radius: var(--as-radius-lg);
  padding: 1.3rem 1.4rem;
  box-shadow: var(--as-shadow);
}
.as-research-year {
  display: inline-block;
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--as-brand);
  background: var(--as-brand-soft);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  margin: 0 0 0.6rem;
}
.as-research-card h3 { font-size: 1.2rem; margin: 0 0 0.5rem; color: var(--as-ink); }
.as-research-obj { font-size: 0.95rem; line-height: 1.55; color: var(--as-muted); margin: 0 0 0.9rem; }
.as-research-row { border-top: 1px solid var(--as-border); padding-top: 0.7rem; margin-top: 0.7rem; }
.as-research-row span {
  display: block;
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--as-brand);
  margin-bottom: 0.35rem;
}
.as-research-row p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--as-muted); }
.as-seg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.as-seg li { font-size: 0.9rem; color: var(--as-muted); }
.as-seg b { color: var(--as-ink); font-family: var(--grotesk); }
.as-research-note {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--as-muted);
  background: var(--as-warn-soft);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
}

/* ---- Dealer insight cards ---- */
.as-insight-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0.9rem;
  /* Each card keeps its own height: expanding one must not stretch its row
     siblings (the default align-items:stretch made closed cards grow empty). */
  align-items: start;
}
.as-insight {
  background: var(--as-surface);
  border: 1px solid var(--as-border);
  border-radius: var(--as-radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--as-shadow);
  border-top: 3px solid var(--as-brand);
}
.as-insight h4 { font-size: 1.05rem; margin: 0 0 0.6rem; color: var(--as-ink); }
.as-insight-ev, .as-insight-im { margin: 0 0 0.55rem; font-size: 0.9rem; line-height: 1.5; color: var(--as-muted); }
.as-insight-ev span, .as-insight-im span {
  display: block;
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.62rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.as-insight-ev span { color: var(--as-muted); }
.as-insight-im { color: var(--as-ink); }
.as-insight-im span { color: var(--as-brand); }

/* ---- Persona set ---- */
.as-persona-tabs { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 1rem; }
.as-persona-tab {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  text-align: left;
  background: var(--as-surface);
  border: 1px solid var(--as-border);
  border-radius: var(--as-radius);
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  color: var(--as-ink);
  transition: border-color 0.15s, background 0.15s;
}
.as-persona-tab:hover { border-color: var(--as-brand); }
.as-persona-tab:focus-visible { outline: 2px solid var(--as-brand); outline-offset: 2px; }
.as-persona-tab.is-active { border-color: var(--as-brand); background: var(--as-brand-soft); }
.as-persona-role { font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6rem; font-weight: 700; color: var(--as-brand); }
.as-persona-name { font-size: 0.92rem; font-weight: 600; }
.as-persona-card {
  background: var(--as-surface);
  border: 1px solid var(--as-border);
  border-radius: var(--as-radius-lg);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--as-shadow);
}
.as-persona-card-role { font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; font-weight: 700; color: var(--as-brand); margin: 0 0 0.2rem; }
.as-persona-card-name { font-size: 1.45rem; font-weight: 650; color: var(--as-ink); margin: 0 0 1rem; }
.as-persona-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 0.8rem; margin: 0; }
.as-persona-dl > div { background: var(--as-surface-2); border-radius: 12px; padding: 0.8rem 0.95rem; }
.as-persona-dl dt { font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.64rem; font-weight: 700; color: var(--as-brand); margin-bottom: 0.3rem; }
.as-persona-dl dd { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--as-ink); }

/* ---- Deal Navigator IA ---- */
.as-ia-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) auto minmax(0, 1.2fr);
  gap: clamp(0.8rem, 2.5vw, 1.6rem);
  align-items: stretch;
}
.as-ia-side { background: var(--as-surface); border: 1px solid var(--as-border); border-radius: var(--as-radius-lg); padding: 1.1rem 1.2rem; box-shadow: var(--as-shadow); }
.as-ia-head { font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.66rem; font-weight: 700; color: var(--as-brand); margin: 0 0 0.8rem; }
.as-ia-side--before { background: var(--as-surface-2); }
.as-ia-stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.as-ia-stack li { font-size: 0.82rem; color: var(--as-muted); background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 8px; padding: 0.4rem 0.6rem; }
[data-theme="dark"] .as-ia-side--before .as-ia-stack li { background: var(--as-surface-2); }
.as-ia-bridge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; font-family: var(--grotesk); font-size: 0.7rem; font-weight: 600; color: var(--as-brand); text-transform: uppercase; letter-spacing: 0.06em; }
.as-ia-arrow { font-size: 1.5rem; }
.as-ia-summary { background: var(--as-brand-soft); border-radius: 12px; padding: 0.7rem 0.8rem; margin-bottom: 0.9rem; }
.as-ia-summary-label { display: block; font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.62rem; font-weight: 700; color: var(--as-brand); margin-bottom: 0.45rem; }
.as-ia-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.as-ia-chip { font-size: 0.76rem; background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 999px; padding: 0.22rem 0.6rem; color: var(--as-ink); }
.as-ia-progress-label { font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.66rem; font-weight: 700; color: var(--as-ink); margin: 0 0 0.5rem; }
.as-ia-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.as-ia-tab { font-size: 0.8rem; font-weight: 550; background: var(--as-surface); border: 1px solid var(--as-border); border-radius: 999px; padding: 0.35rem 0.75rem; cursor: pointer; color: var(--as-ink); transition: border-color 0.15s, background 0.15s; }
.as-ia-tab:hover { border-color: var(--as-brand); }
.as-ia-tab:focus-visible { outline: 2px solid var(--as-brand); outline-offset: 2px; }
.as-ia-tab.is-active { background: var(--as-brand); border-color: var(--as-brand); color: #fff; }
[data-theme="dark"] .as-ia-tab.is-active { color: #0e1525; }
.as-ia-tabpanel { background: var(--as-surface-2); border-radius: 12px; padding: 0.85rem 0.95rem; }
.as-ia-tabpanel b { display: block; font-size: 0.98rem; color: var(--as-ink); margin-bottom: 0.2rem; }
.as-ia-tabpanel span { font-size: 0.9rem; line-height: 1.5; color: var(--as-muted); }
@container (max-width: 720px) {
  .as-ia-grid { grid-template-columns: 1fr; }
  .as-ia-bridge { flex-direction: row; }
  .as-ia-arrow { transform: rotate(90deg); }
}

/* ---- TRS value layer ---- */
.as-trs-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem; }
.as-trs-node { flex: 1 1 12rem; background: var(--as-surface); border: 1px solid var(--as-border); border-radius: var(--as-radius); padding: 1rem 1.1rem; box-shadow: var(--as-shadow); }
.as-trs-node b { display: block; font-size: 1rem; color: var(--as-ink); margin-bottom: 0.3rem; }
.as-trs-node p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--as-muted); }
.as-trs-arrow { align-self: center; font-size: 1.4rem; font-weight: 700; color: var(--as-brand); }
@container (max-width: 640px) {
  .as-trs-node { flex: 0 0 auto; width: 100%; }
  .as-trs-arrow { transform: rotate(90deg); align-self: flex-start; margin-left: 1.2rem; }
}

/* ---- Swivel-chair workflow ---- */
.as-swivel-switch { display: inline-flex; gap: 0.3rem; background: var(--as-surface-2); border: 1px solid var(--as-border); border-radius: 999px; padding: 0.25rem; margin-bottom: 1rem; }
.as-swivel-btn { font-family: var(--grotesk); font-size: 0.8rem; font-weight: 600; border: none; background: transparent; color: var(--as-muted); border-radius: 999px; padding: 0.4rem 0.95rem; cursor: pointer; }
.as-swivel-btn:focus-visible { outline: 2px solid var(--as-brand); outline-offset: 2px; }
.as-swivel-btn.is-active { background: var(--as-brand); color: #fff; }
[data-theme="dark"] .as-swivel-btn.is-active { color: #0e1525; }
.as-swivel-cap { font-size: 0.92rem; line-height: 1.5; color: var(--as-muted); margin: 0 0 0.9rem; }
.as-swivel-loop { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.as-swivel-sys { font-size: 0.85rem; font-weight: 550; background: var(--as-risk-soft); color: var(--as-ink); border: 1px solid var(--as-risk); border-radius: 10px; padding: 0.5rem 0.8rem; }
.as-swivel-jump { color: var(--as-risk); font-weight: 700; }
.as-swivel-hub { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; }
.as-swivel-core { display: flex; flex-direction: column; align-items: center; justify-content: center; width: clamp(90px, 18vw, 120px); aspect-ratio: 1; border-radius: 50%; background: var(--as-brand); color: #fff; font-weight: 700; font-size: 1.1rem; text-align: center; box-shadow: var(--as-shadow-lg); }
[data-theme="dark"] .as-swivel-core { color: #0e1525; }
.as-swivel-core small { font-weight: 500; font-size: 0.62rem; opacity: 0.9; }
.as-swivel-spokes { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.as-swivel-spoke { font-size: 0.82rem; background: var(--as-good-soft); color: var(--as-ink); border: 1px solid var(--as-good); border-radius: 999px; padding: 0.35rem 0.7rem; }
@container (max-width: 560px) {
  .as-swivel-hub { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}

/* ---- Quote to BOS flow ---- */
.as-qb-flow { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: stretch; }
.as-qb-group { position: relative; flex: 1 1 11rem; background: var(--as-surface); border: 1px solid var(--as-border); border-radius: var(--as-radius); padding: 0.9rem 1rem; box-shadow: var(--as-shadow); }
.as-qb-group-name { font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.66rem; font-weight: 700; color: var(--as-brand); margin: 0 0 0.6rem; }
.as-qb-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.as-qb-steps li { font-size: 0.84rem; line-height: 1.45; color: var(--as-muted); padding-left: 0.9rem; position: relative; }
.as-qb-steps li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 5px; height: 5px; border-radius: 50%; background: var(--as-brand); }
.as-qb-arrow { position: absolute; right: -0.55rem; top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: var(--as-brand); z-index: 1; }
@container (max-width: 720px) {
  .as-qb-group { flex: 0 0 auto; width: 100%; }
  .as-qb-arrow { right: auto; left: 50%; top: auto; bottom: -0.7rem; transform: translateX(-50%) rotate(90deg); }
}

/* ---- MVP scope matrix ---- */
.as-asset--matrix .as-matrix-headrow,
.as-matrix-row { display: grid; grid-template-columns: 1.1fr 1.5fr 1.5fr 1.1fr; gap: 0.8rem; }
.as-matrix-headrow { padding: 0 1rem 0.6rem; }
.as-matrix-headrow span { font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.66rem; font-weight: 700; color: var(--as-brand); }
.as-matrix-body { border: 1px solid var(--as-border); border-radius: var(--as-radius); overflow: hidden; background: var(--as-surface); }
.as-matrix-row { padding: 0.9rem 1rem; border-bottom: 1px solid var(--as-border); align-items: start; }
.as-matrix-row:last-child { border-bottom: none; }
.as-matrix-cap { font-weight: 600; color: var(--as-ink); font-size: 0.92rem; }
.as-matrix-mvp, .as-matrix-later, .as-matrix-why { font-size: 0.88rem; line-height: 1.45; color: var(--as-muted); }
.as-matrix-pill { display: inline-block; font-family: var(--grotesk); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 0.1rem 0.45rem; margin-right: 0.4rem; }
.as-matrix-pill--mvp { background: var(--as-good-soft); color: var(--as-good); }
.as-matrix-pill--later { background: var(--as-accent-soft); color: var(--as-accent); }
@container (max-width: 760px) {
  .as-matrix-headrow { display: none; }
  .as-matrix-row { grid-template-columns: 1fr; gap: 0.45rem; padding: 1rem; }
  .as-matrix-mvp, .as-matrix-later, .as-matrix-why { padding-left: 0; }
  .as-matrix-why::before { content: "Why: "; font-weight: 700; color: var(--as-brand); }
}

/* ---- Pilot funnel ---- */
/* Pilot eligibility as a REAL funnel: stacked, centred trapezoid segments that
   taper downward (the eye reads "933 filtered down to 6"), the count printed
   inside each band, the stage label + reason as a side caption. Text lives
   OUTSIDE the band, so it can never force the width the way the old in-bar
   labels did (which flattened the taper into a bar chart). --w/--wn come from
   the render fn: each band is a trapezoid from its own width (top) to the next
   stage's width (bottom), so with zero row-gap the segments share edges into
   one continuous funnel wall. */
.as-funnel { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 640px; margin-inline: auto; }
.as-funnel-stage {
  display: grid;
  grid-template-columns: 46% minmax(0, 1fr);
  column-gap: clamp(0.8rem, 3cqi, 1.6rem);
  align-items: stretch;
}
.as-funnel-band {
  grid-column: 1;
  min-height: clamp(40px, 8cqi, 54px);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, var(--as-brand), var(--as-brand-strong));
  clip-path: polygon(
    calc(50% - var(--w) / 2) 0, calc(50% + var(--w) / 2) 0,
    calc(50% + var(--wn) / 2) 100%, calc(50% - var(--wn) / 2) 100%
  );
}
.as-funnel-band b {
  font-family: var(--grotesk);
  font-size: clamp(1rem, 3.2cqi, 1.35rem);
  font-weight: 700; letter-spacing: 0.01em; color: #fff;
}
[data-theme="dark"] .as-funnel-band b { color: #0e1525; }
.as-funnel-cap { grid-column: 2; align-self: center; margin: 0; }
.as-funnel-cap strong { display: block; font-weight: 700; color: var(--as-ink); font-size: 0.92rem; line-height: 1.25; }
.as-funnel-cap span { display: block; margin-top: 2px; color: var(--as-muted); font-size: 0.8rem; line-height: 1.35; }
@container (max-width: 520px) {
  /* stack: centred narrowing bars (rounded rects, not trapezoids) + caption
     below each — still reads as a funnel because the widths keep tapering. */
  .as-funnel { gap: 0.85rem; }
  .as-funnel-stage { grid-template-columns: 1fr; row-gap: 0.3rem; justify-items: center; text-align: center; }
  .as-funnel-band { grid-column: 1; width: max(var(--w), 34%); min-height: 36px; clip-path: none; border-radius: 8px; }
  .as-funnel-cap { grid-column: 1; }
}

/* ---- Feedback spectrum ---- */
.as-spectrum-track {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.9rem;
  position: relative;
}
.as-spectrum-line { display: none; }
.as-spectrum-end, .as-spectrum-mid { border-radius: var(--as-radius); padding: 1rem 1.1rem; border: 1px solid var(--as-border); background: var(--as-surface); box-shadow: var(--as-shadow); }
.as-spectrum-end b, .as-spectrum-mid b { display: block; font-size: 1rem; margin-bottom: 0.4rem; }
.as-spectrum-end p, .as-spectrum-mid p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--as-muted); }
.as-spectrum-end--pos { background: var(--as-good-soft); border-color: var(--as-good); }
.as-spectrum-end--pos b { color: var(--as-good); }
.as-spectrum-mid b { color: var(--as-brand); }
.as-spectrum-end--crit { background: var(--as-risk-soft); border-color: var(--as-risk); }
.as-spectrum-end--crit b { color: var(--as-risk); }

/* ---- Principles poster ---- */
.as-principle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0.9rem; }
.as-principle { background: var(--as-surface); border: 1px solid var(--as-border); border-radius: var(--as-radius); padding: 1.1rem 1.2rem; box-shadow: var(--as-shadow); }
.as-principle-n { font-family: var(--grotesk); font-weight: 700; font-size: 0.9rem; color: var(--as-brand); }
.as-principle b { display: block; font-size: 1.05rem; color: var(--as-ink); margin: 0.4rem 0 0.4rem; }
.as-principle p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--as-muted); }

/* ---- Metrics dashboard ---- */
.as-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.9rem; }
.as-metric-card { background: var(--as-surface); border: 1px solid var(--as-border); border-radius: var(--as-radius); padding: 1.05rem 1.15rem; box-shadow: var(--as-shadow); }
.as-metric-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.as-metric-head b { font-size: 1.02rem; color: var(--as-ink); }
.as-metric-tag { font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.58rem; font-weight: 700; color: var(--as-brand); background: var(--as-brand-soft); border-radius: 999px; padding: 0.15rem 0.5rem; }
.as-metric-card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.as-metric-card li { font-size: 0.86rem; color: var(--as-muted); padding-left: 0.9rem; position: relative; }
.as-metric-card li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 5px; height: 5px; border-radius: 50%; background: var(--as-teal); }
.as-metric-opp { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 0.8rem; margin-top: 1rem; }
.as-metric-opp > div { background: var(--as-brand-soft); border-radius: var(--as-radius); padding: 0.9rem 1rem; text-align: center; }
.as-metric-opp b { display: block; font-family: var(--grotesk); font-size: 1.4rem; color: var(--as-brand-strong); }
[data-theme="dark"] .as-metric-opp b { color: var(--as-brand-strong); }
.as-metric-opp span { font-size: 0.78rem; color: var(--as-muted); }

/* ---- Final evolution timeline / close ---- */
.as-section--close { background: var(--as-surface-2); border-top: 1px solid var(--as-border); }
.as-final-rail { display: flex; justify-content: space-between; font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; font-weight: 700; margin-bottom: 0.8rem; }
.as-final-from { color: var(--as-muted); }
.as-final-to { color: var(--as-brand); }
.as-final-beats { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.as-final-beat { position: relative; flex: 1 1 13rem; background: var(--as-surface); border: 1px solid var(--as-border); border-radius: var(--as-radius); padding: 1rem 1.1rem; box-shadow: var(--as-shadow); }
.as-final-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--as-brand); margin-bottom: 0.5rem; }
.as-final-beat b { display: block; font-size: 1.05rem; color: var(--as-ink); margin-bottom: 0.3rem; }
.as-final-beat p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--as-muted); }
.as-final-arrow { position: absolute; right: -0.5rem; top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: var(--as-brand); z-index: 1; }
@container (max-width: 700px) {
  .as-final-beat { flex: 0 0 auto; width: 100%; }
  .as-final-arrow { right: auto; left: 50%; top: auto; bottom: -0.7rem; transform: translateX(-50%) rotate(90deg); }
}
.as-section--close .as-principle {
  background: none; border: none; box-shadow: none; padding: 0;
  font-size: clamp(1.2rem, 3vw, 1.7rem); font-weight: 650; color: var(--as-ink);
  margin: 1.4rem 0 0;
}
.as-section--close .as-principle--alt { color: var(--as-brand); margin-top: 0.4rem; }
.as-section--close .cl-view-link { display: inline-block; margin-top: 1.6rem; }

/* =========================================================
   CUSTOMER PROFILE — "From Leads to Customer Memory"
   Scoped .cp-* tokens mapped to the site palette (indigo-denim
   "memory" lean with a warm blossom accent for the person).
   Both themes defined; every text/bg pair targets WCAG AA.
   Diagrams are responsive in-page components (auto-fit / clamp /
   container queries), never raster screenshots.
   ========================================================= */
.cp-page {
  --cp-brand: #156c7c;
  --cp-brand-strong: #0e4f5b;
  --cp-brand-soft: #e1f0f3;
  --cp-ink: #1c2a2e;
  --cp-muted: #4d6066;
  --cp-surface: #ffffff;
  --cp-surface-2: #f3f8f9;
  --cp-border: #d6e4e7;
  --cp-warm: #b14f63;
  --cp-warm-strong: #8f3b50;
  --cp-warm-soft: #fbe9ee;
  --cp-good: #0f7a4e;
  --cp-good-soft: #e6f5ee;
  --cp-warn: #855a0a;
  --cp-warn-soft: #fbf1dd;
  --cp-risk: #b3303f;
  --cp-risk-soft: #fbe7e9;
  --cp-radius: 16px;
  --cp-radius-lg: 24px;
  --cp-shadow: 0 1px 2px rgba(16, 33, 70, 0.05), 0 10px 30px rgba(16, 33, 70, 0.08);
  --cp-shadow-lg: 0 16px 48px rgba(47, 79, 134, 0.18);
}
[data-theme="dark"] .cp-page {
  --cp-brand: #5cc4d6;
  --cp-brand-strong: #8fd9e6;
  --cp-brand-soft: #11303a;
  --cp-ink: #e9f3f5;
  --cp-muted: #a3b4b9;
  --cp-surface: #14202a;
  --cp-surface-2: #1b2a33;
  --cp-border: #2b3d45;
  --cp-warm: #e79bac;
  --cp-warm-strong: #f0b8c4;
  --cp-warm-soft: rgba(225, 120, 150, 0.16);
  --cp-good: #57c89a;
  --cp-good-soft: rgba(31, 143, 99, 0.2);
  --cp-warn: #e0ac4f;
  --cp-warn-soft: rgba(169, 117, 15, 0.22);
  --cp-risk: #e8808d;
  --cp-risk-soft: rgba(192, 65, 79, 0.22);
  --cp-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.45);
  --cp-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
}

.cp-page { color: var(--cp-ink); }
.cp-page .container { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }
.cp-page .cp-hero .container { width: min(1180px, calc(100% - 40px)); }

/* ---- Hero ---- */
.cp-hero { position: relative; padding: clamp(2.4rem, 6vw, 5rem) 0 clamp(1.6rem, 4vw, 3rem); overflow: hidden; }
.cp-hero-stickers { position: absolute; inset: 0; pointer-events: none; }
.cp-sticker { position: absolute; opacity: 0.9; }
.cp-sticker svg { width: 100%; height: 100%; overflow: visible; }
.cp-sticker--spark { width: clamp(22px, 3vw, 34px); top: 30%; right: 9%; }
.cp-sticker--heart { width: clamp(26px, 4vw, 40px); top: 9%; right: 7%; transform: rotate(8deg); }
.cp-sticker--squiggle { width: clamp(56px, 9vw, 92px); bottom: 12%; right: 13%; opacity: 0.5; }
[data-theme="dark"] .cp-sticker { opacity: 0.55; }
.cp-eyebrow {
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--cp-brand);
  margin: 0 0 0.8rem;
}
.cp-hero-title {
  font-size: clamp(2.1rem, 6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 0.9rem;
  color: var(--cp-ink);
}
.cp-hero-lead {
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  line-height: 1.5;
  color: var(--cp-muted);
  max-width: 52ch;
  margin: 0 0 clamp(1.8rem, 4vw, 2.8rem);
}

/* ---- Snapshot ---- */
.cp-snapshot { padding: clamp(1.4rem, 3vw, 2.4rem) 0; }
.cp-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--cp-border);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  overflow: hidden;
  margin: 0 0 1.2rem;
}
.cp-snapshot-grid > div { background: var(--cp-surface); padding: 1.05rem 1.2rem; }
.cp-snapshot-grid dt {
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--cp-muted);
  margin-bottom: 0.35rem;
}
.cp-snapshot-grid dd { margin: 0; font-size: 0.96rem; line-height: 1.45; color: var(--cp-ink); }
.cp-snapshot-challenge {
  background: var(--cp-brand-soft);
  border: 1px solid var(--cp-border);
  border-radius: var(--cp-radius);
  padding: 1.1rem 1.3rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--cp-ink);
  margin: 0;
}
.cp-snapshot-challenge span {
  display: inline-block;
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--cp-brand);
  margin-right: 0.5rem;
}

/* ---- Section frame ---- */
.cp-section { padding: clamp(2.2rem, 5vw, 3.6rem) 0; }
.cp-section-kicker {
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--cp-brand);
  margin: 0 0 0.6rem;
}
.cp-section-title {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  color: var(--cp-ink);
  max-width: 26ch;
}
.cp-section-body { max-width: 64ch; }
.cp-section-body p { font-size: 1.04rem; line-height: 1.65; color: var(--cp-muted); margin: 0 0 1rem; }
.cp-section-body p strong { color: var(--cp-ink); font-weight: 650; }
.cp-emphasis {
  border-left: 3px solid var(--cp-brand);
  padding-left: 1rem;
  color: var(--cp-ink) !important;
  font-weight: 500;
}

/* ---- Shared asset chrome ---- */
.cp-asset {
  container-type: inline-size;
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}
.cp-asset-head { margin: 0 0 1.3rem; }
.cp-asset-eyebrow {
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cp-brand);
  margin: 0 0 0.4rem;
}
.cp-asset-title { font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0; color: var(--cp-ink); }
.cp-asset-sub { font-size: 0.98rem; line-height: 1.5; color: var(--cp-muted); margin: 0.5rem 0 0; }
.cp-asset-takeaway {
  margin: 1.3rem 0 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--cp-ink);
  font-weight: 500;
}
.cp-asset-takeaway em { color: var(--cp-warm-strong); font-style: normal; font-weight: 650; }
.cp-asset-quote {
  margin: 1.4rem 0 0;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.45;
  color: var(--cp-ink);
  font-family: var(--display-font);
  border-top: 1px solid var(--cp-border);
  padding-top: 1.2rem;
}
.cp-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.62rem;
  border-radius: 999px;
  background: var(--cp-brand-soft);
  color: var(--cp-brand-strong);
  border: 1px solid var(--cp-border);
  font-family: var(--grotesk);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.25;
}
.cp-chip--future { background: var(--cp-warm-soft); color: var(--cp-warm-strong); border-color: color-mix(in srgb, var(--cp-warm) 30%, transparent); }
.cp-evidence {
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.cp-evidence li {
  background: var(--cp-surface-2);
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  padding: 0.42rem 0.85rem;
  font-size: 0.85rem;
  color: var(--cp-muted);
}
.cp-evidence b { color: var(--cp-brand); font-weight: 700; }

/* ---- Hero evolution ---- */
.cp-evo { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.6rem; }
.cp-evo-arrow {
  display: flex;
  align-items: center;
  color: var(--cp-brand);
  width: clamp(28px, 3vw, 44px);
  flex: 0 0 auto;
  opacity: 0.75;
}
.cp-evo-arrow svg { width: 100%; }
.cp-evo-stage {
  --st: var(--cp-brand);
  --st-soft: var(--cp-brand-soft);
  flex: 1 1 14rem;
  min-width: 0;
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-top: 3px solid var(--st);
  border-radius: var(--cp-radius);
  box-shadow: var(--cp-shadow);
  display: block;
  overflow: hidden;
}
.cp-evo-stage--warn { --st: var(--cp-warn); --st-soft: var(--cp-warn-soft); }
.cp-evo-stage--risk { --st: var(--cp-risk); --st-soft: var(--cp-risk-soft); }
.cp-evo-stage--good { --st: var(--cp-good); --st-soft: var(--cp-good-soft); }
.cp-evo-stage--brand { --st: var(--cp-brand); --st-soft: var(--cp-brand-soft); }
.cp-stage-toggle {
  appearance: none;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  padding: 1rem 1.1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font: inherit;
  color: inherit;
  width: 100%;
}
.cp-evo-index {
  display: inline-block;
  font-family: var(--grotesk);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--st);
  background: var(--st-soft);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  align-self: flex-start;
}
.cp-evo-name { font-size: 1.06rem; font-weight: 650; color: var(--cp-ink); line-height: 1.2; }
.cp-evo-sub { font-size: 0.86rem; color: var(--cp-muted); line-height: 1.35; }
.cp-evo-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }
.cp-evo-tags .cp-chip { font-size: 0.68rem; padding: 0.22rem 0.5rem; }
.cp-stage-more {
  margin-top: 0.45rem;
  font-family: var(--grotesk);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cp-brand);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.cp-stage-more::after { content: "+"; font-size: 0.95rem; line-height: 1; }
.cp-stage-toggle[aria-expanded="true"] .cp-stage-more::after { content: "–"; }
.cp-stage-toggle:focus-visible { outline: 2px solid var(--cp-brand); outline-offset: -3px; border-radius: var(--cp-radius); }
.cp-evo-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}
.cp-stage-toggle[aria-expanded="true"] + .cp-evo-detail { grid-template-rows: 1fr; }
.cp-evo-detail-inner { overflow: hidden; }
.cp-evo-detail-inner p {
  margin: 0;
  padding: 0 1.1rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--cp-muted);
  border-top: 1px solid var(--cp-border);
  padding-top: 0.85rem;
}
@container (max-width: 640px) {
  .cp-evo { flex-direction: column; }
  .cp-evo-arrow { width: 100%; height: 22px; justify-content: center; transform: rotate(90deg); }
}

/* ---- Fragmentation map ---- */
.cp-frag {
  display: grid;
  gap: 1.1rem;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}
.cp-frag-center {
  background: var(--cp-warm-soft);
  border: 1px solid color-mix(in srgb, var(--cp-warm) 32%, transparent);
  border-radius: var(--cp-radius-lg);
  padding: 1.4rem 1.2rem;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
}
.cp-frag-avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--cp-warm);
  color: #fff;
  display: grid; place-items: center;
}
[data-theme="dark"] .cp-frag-avatar { color: #2a1016; }
.cp-frag-avatar svg { width: 30px; height: 30px; }
.cp-frag-name { font-weight: 700; color: var(--cp-ink); font-size: 1.05rem; }
.cp-frag-note { font-size: 0.82rem; color: var(--cp-warm-strong); }
.cp-frag-ring {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.6rem;
}
.cp-frag-card {
  display: flex; align-items: center; gap: 0.55rem;
  background: var(--cp-surface);
  border: 1px dashed var(--cp-border);
  border-radius: 12px;
  padding: 0.6rem 0.75rem;
  font-size: 0.86rem;
  color: var(--cp-ink);
  box-shadow: var(--cp-shadow);
}
.cp-frag-ico { color: var(--cp-brand); display: inline-flex; flex: 0 0 auto; }
.cp-frag-ico svg { width: 20px; height: 20px; }
.cp-frag-facts {
  list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.5rem 1.2rem;
}
.cp-frag-facts li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--cp-muted);
}
.cp-frag-facts li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--cp-warm); }
@container (max-width: 560px) { .cp-frag { grid-template-columns: 1fr; } }

/* ---- Search pain ---- */
.cp-search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}
.cp-search-col { background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius); padding: 1.1rem; box-shadow: var(--cp-shadow); }
.cp-search-col--after { border-color: color-mix(in srgb, var(--cp-good) 40%, var(--cp-border)); }
.cp-search-tag { font-family: var(--grotesk); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; margin: 0 0 0.7rem; }
.cp-search-tag--before { color: var(--cp-risk); }
.cp-search-tag--after { color: var(--cp-good); }
.cp-results { list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.4rem; }
.cp-result {
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  background: var(--cp-surface-2);
  border: 1px solid var(--cp-border);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
}
.cp-result-name { font-weight: 650; color: var(--cp-ink); font-size: 0.9rem; }
.cp-result-type { font-size: 0.78rem; color: var(--cp-muted); }
.cp-result--customer { background: var(--cp-good-soft); border-color: color-mix(in srgb, var(--cp-good) 40%, var(--cp-border)); margin-bottom: 0.8rem; }
.cp-result-type--customer { color: var(--cp-good); font-weight: 600; }
.cp-search-questions { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.cp-search-questions li { font-size: 0.84rem; color: var(--cp-muted); font-style: italic; padding-left: 1.1rem; position: relative; }
.cp-search-questions li::before { content: "?"; position: absolute; left: 0; color: var(--cp-risk); font-weight: 700; font-style: normal; }
.cp-search-nested { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.cp-search-nested li { display: flex; flex-direction: column; padding: 0.45rem 0.7rem; background: var(--cp-surface-2); border-left: 2px solid var(--cp-good); border-radius: 0 8px 8px 0; }
.cp-search-nested b { font-size: 0.86rem; color: var(--cp-ink); }
.cp-search-nested span { font-size: 0.76rem; color: var(--cp-muted); }

/* ---- Mental model ---- */
.cp-mm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}
.cp-mm-col { background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius); padding: 1.2rem; box-shadow: var(--cp-shadow); }
.cp-mm-col--lead { border-top: 3px solid var(--cp-warn); }
.cp-mm-col--cust { border-top: 3px solid var(--cp-good); }
.cp-mm-kicker { font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; font-weight: 700; margin: 0 0 0.7rem; }
.cp-mm-col--lead .cp-mm-kicker { color: var(--cp-warn); }
.cp-mm-col--cust .cp-mm-kicker { color: var(--cp-good); }
.cp-mm-object { display: flex; flex-direction: column; gap: 0.2rem; margin: 0 0 0.9rem; font-size: 1.15rem; font-weight: 700; color: var(--cp-ink); }
.cp-mm-object span { font-family: var(--grotesk); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-muted); }
.cp-mm-h { font-family: var(--grotesk); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cp-muted); margin: 0.8rem 0 0.4rem; }
.cp-mm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.cp-mm-list li { font-size: 0.9rem; line-height: 1.45; color: var(--cp-ink); padding-left: 1.2rem; position: relative; }
.cp-mm-list--good li::before { content: "✓"; position: absolute; left: 0; color: var(--cp-good); font-weight: 700; }
.cp-mm-list--weak li { color: var(--cp-muted); }
.cp-mm-list--weak li::before { content: "–"; position: absolute; left: 0.15rem; color: var(--cp-warn); font-weight: 700; }

/* ---- Validation cards ---- */
.cp-val-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}
.cp-val-card { background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius); padding: 1.1rem 1.2rem; box-shadow: var(--cp-shadow); display: flex; flex-direction: column; gap: 0.6rem; }
.cp-val-src { font-weight: 700; color: var(--cp-ink); font-size: 0.98rem; margin: 0; }
.cp-val-signal, .cp-val-resp { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--cp-muted); }
.cp-val-signal span, .cp-val-resp span {
  display: block;
  font-family: var(--grotesk);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.cp-val-signal span { color: var(--cp-warn); }
.cp-val-resp { color: var(--cp-ink); border-top: 1px solid var(--cp-border); padding-top: 0.6rem; }
.cp-val-resp span { color: var(--cp-good); }

/* ---- Data model hub ---- */
.cp-model {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
  gap: 1.2rem;
  align-items: center;
}
.cp-model-hub {
  background: linear-gradient(150deg, var(--cp-brand), var(--cp-brand-strong));
  color: #fff;
  border-radius: var(--cp-radius-lg);
  padding: 1.6rem 1.2rem;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  box-shadow: var(--cp-shadow-lg);
}
[data-theme="dark"] .cp-model-hub { color: #0e1525; }
.cp-model-hub-ico { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.18); display: grid; place-items: center; }
[data-theme="dark"] .cp-model-hub-ico { background: rgba(14,21,37,0.18); }
.cp-model-hub-ico svg { width: 28px; height: 28px; }
.cp-model-hub-title { font-size: 1.3rem; font-weight: 700; }
.cp-model-hub-sub { font-size: 0.78rem; opacity: 0.85; }
.cp-model-ring {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 0.55rem;
}
.cp-node { display: flex; align-items: center; gap: 0.5rem; background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: 12px; padding: 0.6rem 0.7rem; box-shadow: var(--cp-shadow); }
.cp-node-ico { color: var(--cp-brand); display: inline-flex; flex: 0 0 auto; }
.cp-node-ico svg { width: 20px; height: 20px; }
.cp-node-label { font-size: 0.84rem; color: var(--cp-ink); line-height: 1.25; }
.cp-model-attr { margin: 1.2rem 0 0; background: var(--cp-brand-soft); border: 1px solid var(--cp-border); border-radius: var(--cp-radius); padding: 0.9rem 1.1rem; font-size: 0.94rem; line-height: 1.5; color: var(--cp-ink); }
.cp-model-attr span { font-weight: 700; color: var(--cp-brand); }
@container (max-width: 560px) { .cp-model { grid-template-columns: 1fr; } }

/* ---- Profile anatomy ---- */
.cp-an { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.cp-an-frame { background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius); overflow: hidden; box-shadow: var(--cp-shadow); }
.cp-an-header { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.85rem 1rem; border-bottom: 1px solid var(--cp-border); }
.cp-an-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--cp-brand); color: #fff; font-size: 0.78rem; font-weight: 700; display: grid; place-items: center; flex: 0 0 auto; }
[data-theme="dark"] .cp-an-avatar { color: #0e1525; }
.cp-an-id { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cp-an-name { font-weight: 700; color: var(--cp-ink); font-size: 0.95rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.cp-an-badge { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cp-brand); background: var(--cp-brand-soft); border: 1px solid var(--cp-border); border-radius: 999px; padding: 0.1rem 0.45rem; }
.cp-an-meta { font-size: 0.72rem; color: var(--cp-muted); }
.cp-an-actions { display: flex; flex-wrap: wrap; gap: 0.3rem; width: 100%; }
.cp-an-action { font-size: 0.68rem; color: var(--cp-muted); background: var(--cp-surface-2); border: 1px solid var(--cp-border); border-radius: 7px; padding: 0.22rem 0.5rem; }
.cp-an-action--primary { color: #fff; background: var(--cp-brand); border-color: var(--cp-brand); }
[data-theme="dark"] .cp-an-action--primary { color: #0e1525; }
.cp-an-tabs { display: flex; flex-wrap: wrap; gap: 0.2rem; padding: 0.5rem 1rem 0; }
.cp-an-tab { font-size: 0.74rem; color: var(--cp-muted); padding: 0.3rem 0.55rem 0.5rem; border-bottom: 2px solid transparent; }
.cp-an-tab.is-active { color: var(--cp-brand); border-bottom-color: var(--cp-brand); font-weight: 600; }
.cp-an-body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr); gap: 0.7rem; padding: 0.8rem 1rem 1rem; border-top: 1px solid var(--cp-border); }
.cp-an-composer { grid-column: 1 / -1; font-size: 0.78rem; color: var(--cp-muted); background: var(--cp-surface-2); border: 1px dashed var(--cp-border); border-radius: 8px; padding: 0.55rem 0.7rem; }
.cp-an-filters { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.cp-an-filter { font-size: 0.66rem; color: var(--cp-muted); background: var(--cp-surface-2); border: 1px solid var(--cp-border); border-radius: 999px; padding: 0.16rem 0.46rem; }
.cp-an-filter.is-active { color: var(--cp-brand); border-color: var(--cp-brand); font-weight: 600; }
.cp-an-feed { display: grid; gap: 0.4rem; }
.cp-an-row { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; color: var(--cp-ink); background: var(--cp-surface-2); border: 1px solid var(--cp-border); border-radius: 8px; padding: 0.4rem 0.55rem; }
.cp-an-row i { color: var(--cp-brand); display: inline-flex; flex: 0 0 auto; }
.cp-an-row i svg { width: 16px; height: 16px; }
.cp-an-rail { display: grid; gap: 0.4rem; align-content: start; }
.cp-an-card { font-size: 0.74rem; color: var(--cp-muted); background: var(--cp-surface-2); border: 1px solid var(--cp-border); border-radius: 8px; padding: 0.7rem 0.6rem; text-align: center; }
.cp-an-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; align-content: start; }
.cp-an-notes li { display: flex; gap: 0.6rem; font-size: 0.88rem; line-height: 1.45; color: var(--cp-muted); }
.cp-an-num { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--cp-brand-soft); color: var(--cp-brand-strong); font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; }
@container (max-width: 720px) { .cp-an { grid-template-columns: 1fr; } .cp-an-body { grid-template-columns: 1fr; } }

/* ---- Workspace tabs ---- */
.cp-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.cp-tab {
  appearance: none; cursor: pointer; font: inherit;
  font-family: var(--grotesk); font-weight: 600; font-size: 0.86rem;
  color: var(--cp-muted);
  background: var(--cp-surface);
  border: 1px solid var(--cp-border);
  border-radius: 999px;
  padding: 0.5rem 1rem;
}
.cp-tab[aria-selected="true"] { color: #fff; background: var(--cp-brand); border-color: var(--cp-brand); }
[data-theme="dark"] .cp-tab[aria-selected="true"] { color: #0e1525; }
.cp-tab:focus-visible { outline: 2px solid var(--cp-brand); outline-offset: 2px; }
.cp-tab-panel { background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius); padding: 1.3rem; box-shadow: var(--cp-shadow); }
.cp-tab-head { margin: 0 0 0.6rem; font-size: 1.15rem; color: var(--cp-ink); }
.cp-tab-copy { margin: 0 0 0.9rem; font-size: 0.98rem; line-height: 1.6; color: var(--cp-muted); }
.cp-tab-points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.5rem; }
.cp-tab-points li { font-size: 0.86rem; line-height: 1.4; color: var(--cp-ink); background: var(--cp-surface-2); border-left: 2px solid var(--cp-brand); border-radius: 0 8px 8px 0; padding: 0.5rem 0.7rem; }

/* ---- Trust & status ---- */
.cp-status { background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius); padding: 1.1rem; box-shadow: var(--cp-shadow); margin-bottom: 1.1rem; }
.cp-status-switch { display: inline-flex; gap: 0.25rem; background: var(--cp-surface-2); border: 1px solid var(--cp-border); border-radius: 999px; padding: 0.25rem; margin-bottom: 1rem; }
.cp-status-btn { appearance: none; cursor: pointer; font: inherit; font-family: var(--grotesk); font-weight: 600; font-size: 0.8rem; color: var(--cp-muted); background: none; border: 0; border-radius: 999px; padding: 0.4rem 0.85rem; }
.cp-status-btn[data-cp-status="before"][aria-selected="true"] { background: var(--cp-risk); color: #fff; }
.cp-status-btn[data-cp-status="after"][aria-selected="true"] { background: var(--cp-good); color: #fff; }
[data-theme="dark"] .cp-status-btn[aria-selected="true"] { color: #0e1525; }
.cp-status-btn:focus-visible { outline: 2px solid var(--cp-brand); outline-offset: 2px; }
.cp-status-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cp-status-list--before li { font-size: 0.86rem; color: var(--cp-muted); background: var(--cp-risk-soft); border: 1px solid color-mix(in srgb, var(--cp-risk) 30%, transparent); border-radius: 10px; padding: 0.5rem 0.7rem; flex: 1 1 13rem; }
.cp-status-list--after li { font-size: 0.86rem; font-weight: 600; color: var(--cp-good); background: var(--cp-good-soft); border: 1px solid color-mix(in srgb, var(--cp-good) 32%, transparent); border-radius: 999px; padding: 0.4rem 0.85rem; }
.cp-status-controls { margin: 0.9rem 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--cp-muted); }
.cp-trust-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.cp-trust-card { background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius); padding: 1.1rem; box-shadow: var(--cp-shadow); }
.cp-trust-card p { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--cp-muted); }
.cp-trust-h { font-weight: 700; color: var(--cp-ink) !important; font-size: 0.98rem; margin-bottom: 0.4rem !important; }

/* ---- Future stack ---- */
.cp-future { display: grid; gap: 0; }
.cp-future-tier { border: 1px solid var(--cp-border); border-radius: var(--cp-radius); padding: 1.1rem 1.2rem; }
.cp-future-tier--top { background: var(--cp-warm-soft); border-color: color-mix(in srgb, var(--cp-warm) 30%, var(--cp-border)); }
.cp-future-tier--base { background: var(--cp-brand-soft); }
.cp-future-label { font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; font-weight: 700; margin: 0 0 0.7rem; }
.cp-future-tier--top .cp-future-label { color: var(--cp-warm-strong); }
.cp-future-tier--base .cp-future-label { color: var(--cp-brand); }
.cp-future-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cp-future-join { justify-self: center; font-family: var(--grotesk); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cp-muted); padding: 0.5rem 0; position: relative; }

/* ---- Impact ---- */
.cp-impact-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.cp-impact-card { background: var(--cp-surface); border: 1px solid var(--cp-border); border-top: 3px solid var(--cp-brand); border-radius: var(--cp-radius); padding: 1.1rem 1.2rem; box-shadow: var(--cp-shadow); }
.cp-impact-card p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--cp-muted); }
.cp-impact-h { font-weight: 700; color: var(--cp-ink) !important; font-size: 1rem; margin-bottom: 0.4rem !important; }

/* ---- Close ---- */
.cp-section--close { text-align: center; padding-bottom: clamp(3rem, 7vw, 5rem); }
.cp-principle { font-family: var(--display-font); font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.15; color: var(--cp-ink); margin: 0; }
.cp-principle--alt { color: var(--cp-brand); margin-top: 0.4rem; }
.cp-section--close .cl-view-link { display: inline-block; margin-top: 1.6rem; }

/* =========================================================
   CASE STUDY QUALITY STANDARD — shared palette/detail pass
   Gives mature pages a clear project primary, 2-3 accents, and
   shared green/red semantics while preserving each page identity.
   ========================================================= */
.gd-page {
  --gd-primary: #5b4bd6;
  --gd-primary-strong: #4636af;
  --gd-primary-soft: color-mix(in srgb, #5b4bd6 15%, var(--surface));
  --gd-accent-blue: var(--denim);
  --gd-accent-warm: var(--cognac);
  --gd-accent-pink: var(--blossom);
  --gd-good: #0f7a4e;
  --gd-good-soft: color-mix(in srgb, #0f7a4e 18%, var(--surface));
  --gd-risk: #b3303f;
  --gd-risk-soft: color-mix(in srgb, #b3303f 16%, var(--surface));
  --gd-brand: var(--gd-primary);
  --gd-brand-strong: var(--gd-primary-strong);
  --gd-brand-soft: var(--gd-primary-soft);
}

[data-theme="dark"] .gd-page {
  --gd-primary: #a99cff;
  --gd-primary-strong: #c6bdff;
  --gd-primary-soft: rgba(169, 156, 255, 0.17);
  --gd-good: #57c89a;
  --gd-good-soft: color-mix(in srgb, #57c89a 18%, var(--surface));
  --gd-risk: #e8808d;
  --gd-risk-soft: color-mix(in srgb, #e8808d 18%, var(--surface));
  /* Canonical: violet must win in dark too (earlier blocks set a blue
     --gd-brand at higher specificity). Point brand at the violet primary. */
  --gd-brand: var(--gd-primary);
  --gd-brand-strong: var(--gd-primary-strong);
  --gd-brand-soft: var(--gd-primary-soft);
}

.gd-hero-title,
.gd-asset-title,
.gd-section-title {
  background: linear-gradient(100deg, var(--gd-primary-strong), var(--gd-accent-blue) 55%, var(--gd-accent-warm));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.gd-eyebrow,
.gd-asset-eyebrow,
.gd-section-kicker {
  background: color-mix(in srgb, var(--gd-primary) 15%, var(--surface));
  color: var(--gd-primary-strong);
  border-color: color-mix(in srgb, var(--gd-primary) 24%, var(--surface));
}

.gd-magic-btn,
.gd-ui-generate,
.gd-ui-update,
.gd-model-flag,
.gd-steps li::before,
.gd-principles b {
  background: linear-gradient(135deg, var(--gd-primary-strong), var(--gd-accent-blue));
}

.gd-model-card.is-win {
  outline-color: color-mix(in srgb, var(--gd-primary) 55%, transparent);
}

.as-page {
  --as-glass: blur(14px) saturate(1.12);
  --as-surface: color-mix(in srgb, var(--surface) 84%, transparent);
  --as-surface-2: color-mix(in srgb, var(--denim-soft) 15%, var(--surface));
  --as-border: color-mix(in srgb, var(--denim) 24%, var(--line));
  background-color: var(--bg);
  background-image:
    radial-gradient(color-mix(in srgb, var(--denim) 12%, transparent) 1.2px, transparent 1.3px),
    radial-gradient(34rem 26rem at 7% 8%, color-mix(in srgb, var(--denim-soft) 30%, transparent), transparent 64%),
    radial-gradient(34rem 28rem at 92% 18%, color-mix(in srgb, var(--blossom) 24%, transparent), transparent 62%),
    radial-gradient(38rem 30rem at 75% 92%, color-mix(in srgb, var(--leaf) 16%, transparent), transparent 60%),
    linear-gradient(155deg, var(--bg), color-mix(in srgb, var(--denim-soft) 14%, var(--bg)) 54%, color-mix(in srgb, var(--blossom-soft) 52%, var(--bg)));
  background-size: 26px 26px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

[data-theme="dark"] .as-page {
  --as-surface: color-mix(in srgb, var(--surface) 76%, transparent);
  --as-surface-2: color-mix(in srgb, var(--denim) 14%, var(--surface));
  --as-border: color-mix(in srgb, var(--denim) 30%, var(--line));
  background-image:
    radial-gradient(color-mix(in srgb, var(--denim) 18%, transparent) 1.2px, transparent 1.3px),
    radial-gradient(34rem 26rem at 7% 8%, color-mix(in srgb, var(--denim) 22%, transparent), transparent 64%),
    radial-gradient(34rem 28rem at 92% 18%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%),
    radial-gradient(38rem 30rem at 75% 92%, color-mix(in srgb, var(--leaf) 11%, transparent), transparent 60%),
    linear-gradient(155deg, var(--bg), color-mix(in srgb, var(--denim) 10%, var(--bg)) 54%, var(--bg));
}

.as-page .container {
  width: min(1100px, calc(100% - 40px));
  margin-inline: auto;
}

.as-page .as-hero .container { width: min(1180px, calc(100% - 40px)); }

.as-hero-title,
.as-section-title,
.as-asset-title {
  background: linear-gradient(100deg, var(--as-brand-strong), var(--as-brand) 46%, var(--as-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.as-tl-toggle,
.as-journey-detail,
.as-scroll-page,
.as-layer,
.as-research-card,
.as-insight,
.as-persona-card,
.as-ia-side,
.as-trs-node,
.as-qb-group,
.as-matrix-body,
.as-spectrum-end,
.as-spectrum-mid,
.as-principle,
.as-metric-card,
.as-final-beat {
  -webkit-backdrop-filter: var(--as-glass);
  backdrop-filter: var(--as-glass);
}

.as-eyebrow,
.as-section-kicker,
.as-tl-tag,
.as-panel-label {
  letter-spacing: 0;
}

.as-tl-toggle,
.as-journey-stage,
.as-persona-tab,
.as-ia-tab,
.as-swivel-btn {
  min-height: 42px;
}

.as-journey-stage.is-active,
.as-ia-tab.is-active,
.as-swivel-btn.is-active {
  background: #2f4f86;
  border-color: #2f4f86;
  color: #ffffff;
}

[data-theme="dark"] .as-journey-stage.is-active,
[data-theme="dark"] .as-ia-tab.is-active,
[data-theme="dark"] .as-swivel-btn.is-active {
  background: #7aa2f0;
  border-color: #7aa2f0;
  color: #0e1525;
}

/* =========================================================
   PEPITA — Providence Health pain-care app case study
   Rose primary, denim/cognac/leaf accents, shared green/red
   semantics, responsive in-page research assets.
   ========================================================= */
.pp-page {
  --pp-primary: #d23163;
  --pp-primary-strong: #a32150;
  --pp-primary-soft: color-mix(in srgb, #e05d72 17%, var(--surface));
  --pp-primary-fill: #d23163;
  --pp-on-primary: #ffffff;
  --pp-accent-blue: var(--denim);
  --pp-blue-soft: color-mix(in srgb, var(--denim) 16%, var(--surface));
  --pp-accent-warm: var(--cognac);
  --pp-warm-soft: color-mix(in srgb, var(--cognac) 18%, var(--surface));
  --pp-good: #0f7a4e;
  --pp-good-soft: color-mix(in srgb, #0f7a4e 18%, var(--surface));
  --pp-risk: #b3303f;
  --pp-risk-soft: color-mix(in srgb, #b3303f 16%, var(--surface));
  --pp-ink: var(--text);
  --pp-muted: color-mix(in srgb, var(--muted) 76%, var(--text));
  --pp-surface: color-mix(in srgb, var(--surface) 82%, transparent);
  --pp-surface-2: color-mix(in srgb, var(--blossom-soft) 62%, var(--surface));
  --pp-border: color-mix(in srgb, var(--accent) 26%, var(--line));
  --pp-glass-border: color-mix(in srgb, var(--surface) 86%, transparent);
  --pp-shadow: var(--soft-shadow);
  --pp-shadow-lg: var(--shadow);
  --pp-radius: 16px;
  --pp-radius-lg: 24px;
  --pp-glass: blur(14px) saturate(1.12);
  color: var(--pp-ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(color-mix(in srgb, var(--accent) 13%, transparent) 1.2px, transparent 1.3px),
    radial-gradient(34rem 28rem at 8% 8%, color-mix(in srgb, var(--blossom) 35%, transparent), transparent 62%),
    radial-gradient(30rem 26rem at 92% 15%, color-mix(in srgb, var(--denim-soft) 24%, transparent), transparent 62%),
    radial-gradient(38rem 28rem at 75% 92%, color-mix(in srgb, var(--leaf) 14%, transparent), transparent 62%),
    linear-gradient(160deg, var(--bg), color-mix(in srgb, var(--blossom-soft) 58%, var(--bg)) 48%, color-mix(in srgb, var(--denim-soft) 14%, var(--bg)));
  background-size: 26px 26px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

[data-theme="dark"] .pp-page {
  --pp-primary: #ef7aa5;
  --pp-primary-strong: #f7b3cb;
  --pp-primary-soft: color-mix(in srgb, #ef7aa5 16%, var(--surface));
  --pp-primary-fill: #ef7aa5;
  --pp-on-primary: #2a121d;
  --pp-blue-soft: color-mix(in srgb, var(--denim) 20%, var(--surface));
  --pp-warm-soft: color-mix(in srgb, var(--cognac) 18%, var(--surface));
  --pp-good: #57c89a;
  --pp-good-soft: color-mix(in srgb, #57c89a 16%, var(--surface));
  --pp-risk: #e8808d;
  --pp-risk-soft: color-mix(in srgb, #e8808d 18%, var(--surface));
  --pp-surface: color-mix(in srgb, var(--surface) 78%, transparent);
  --pp-surface-2: color-mix(in srgb, var(--surface-2) 86%, transparent);
  --pp-border: color-mix(in srgb, var(--accent) 26%, var(--line));
  --pp-glass-border: color-mix(in srgb, var(--text) 14%, transparent);
  background-image:
    radial-gradient(color-mix(in srgb, var(--accent) 18%, transparent) 1.2px, transparent 1.3px),
    radial-gradient(34rem 28rem at 8% 8%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%),
    radial-gradient(30rem 26rem at 92% 15%, color-mix(in srgb, var(--denim) 18%, transparent), transparent 62%),
    radial-gradient(38rem 28rem at 75% 92%, color-mix(in srgb, var(--leaf) 10%, transparent), transparent 62%),
    linear-gradient(160deg, var(--bg), color-mix(in srgb, var(--surface-2) 58%, var(--bg)) 52%, var(--bg));
}

.pp-page .container {
  width: min(1080px, calc(100% - 40px));
  margin-inline: auto;
}

.pp-page .pp-hero .container {
  container-type: inline-size;
  width: min(1180px, calc(100% - 40px));
}

.pp-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.6rem, 7vw, 5.2rem) 0 clamp(1.8rem, 4vw, 3rem);
}

.pp-hero-stickers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pp-sticker {
  position: absolute;
  display: block;
  color: var(--pp-primary);
  opacity: 0.86;
}

.pp-sticker svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.pp-sticker--plus {
  width: clamp(30px, 5vw, 46px);
  top: 13%;
  right: 12%;
  transform: rotate(8deg);
}

.pp-sticker--leaf {
  width: clamp(42px, 7vw, 68px);
  top: 32%;
  right: 4%;
  color: var(--pp-good);
  transform: rotate(-9deg);
}

.pp-sticker--squiggle {
  width: clamp(62px, 10vw, 94px);
  right: 10%;
  bottom: 13%;
  color: var(--pp-accent-blue);
  opacity: 0.42;
}

[data-theme="dark"] .pp-sticker { opacity: 0.58; }

.pp-eyebrow,
.pp-section-kicker,
.pp-panel-label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border: 1px solid var(--pp-glass-border);
  border-radius: 999px;
  background: var(--pp-primary-soft);
  color: var(--pp-primary-strong);
  padding: 0.32rem 0.72rem;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  -webkit-backdrop-filter: var(--pp-glass);
  backdrop-filter: var(--pp-glass);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--pp-primary) 12%, transparent);
}

.pp-hero-title {
  max-width: 13ch;
  margin: 0.9rem 0 1rem;
  font-size: clamp(2.4rem, 7cqi, 4.5rem);
  line-height: 1.02;
  letter-spacing: 0;
  background: linear-gradient(100deg, var(--pp-primary-strong), var(--pp-accent-blue) 55%, var(--pp-accent-warm));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pp-hero-lead {
  max-width: 48rem;
  margin: 0 0 2rem;
  color: var(--pp-muted);
  font-size: 1.18rem;
  line-height: 1.58;
}

.pp-snapshot,
.pp-section {
  padding: clamp(1.8rem, 5vw, 3.6rem) 0;
}

.pp-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-lg);
  background: var(--pp-border);
  overflow: hidden;
  box-shadow: var(--pp-shadow-lg);
}

.pp-snapshot-grid > div {
  background: var(--pp-surface);
  padding: 1.05rem 1.15rem;
  -webkit-backdrop-filter: var(--pp-glass);
  backdrop-filter: var(--pp-glass);
}

.pp-snapshot-grid dt {
  margin: 0 0 0.35rem;
  color: var(--pp-primary-strong);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.pp-snapshot-grid dd {
  margin: 0;
  color: var(--pp-ink);
  font-size: 0.98rem;
  line-height: 1.45;
}

.pp-snapshot-challenge {
  margin: 1rem 0 0;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius);
  background: var(--pp-blue-soft);
  color: var(--pp-ink);
  padding: 1rem 1.15rem;
  font-size: 1rem;
  line-height: 1.55;
}

.pp-snapshot-challenge span {
  color: var(--pp-accent-blue);
  font-weight: 800;
}

.pp-section-title {
  max-width: 25ch;
  margin: 0.75rem 0 1rem;
  color: var(--pp-ink);
  font-size: clamp(1.65rem, 4cqi, 2.35rem);
  line-height: 1.12;
  letter-spacing: 0;
}

.pp-section-body {
  max-width: 64ch;
}

.pp-section-body p {
  margin: 0 0 1rem;
  color: var(--pp-muted);
  font-size: 1.04rem;
  line-height: 1.65;
}

.pp-section-body strong {
  color: var(--pp-ink);
  font-weight: 700;
}

.pp-emphasis {
  border-left: 3px solid var(--pp-primary);
  color: var(--pp-ink) !important;
  padding-left: 1rem;
  font-weight: 600;
}

.pp-caption {
  margin: 1rem 0 0;
  color: var(--pp-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  font-style: italic;
}

.pp-asset {
  container-type: inline-size;
  margin-top: clamp(1.4rem, 4vw, 2.4rem);
}

/* ---- Pepita hero arc ---- */
.pp-arc-label {
  margin: 0 0 1rem;
  color: var(--pp-primary-strong);
  font-weight: 800;
}

.pp-arc-track {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.pp-arc-rail {
  position: absolute;
  top: 22px;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pp-border), var(--pp-primary), var(--pp-accent-blue), var(--pp-border));
}

.pp-arc-phase {
  position: relative;
  z-index: 1;
  flex: 1 1 13rem;
  min-width: 0;
}

.pp-arc-node {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: var(--pp-primary-fill);
  color: var(--pp-on-primary);
  font-weight: 900;
  box-shadow: var(--pp-shadow);
}

.pp-arc-toggle {
  display: flex;
  width: 100%;
  min-height: 14rem;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.7rem;
  border: 1px solid var(--pp-glass-border);
  border-radius: var(--pp-radius);
  background: var(--pp-surface);
  color: var(--pp-ink);
  padding: 1rem;
  text-align: left;
  -webkit-backdrop-filter: var(--pp-glass);
  backdrop-filter: var(--pp-glass);
  box-shadow: var(--pp-shadow);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.pp-arc-toggle:hover,
.pp-arc-toggle:focus-visible {
  border-color: var(--pp-primary);
  transform: translateY(-2px);
  box-shadow: var(--pp-shadow-lg);
}

.pp-arc-toggle:focus-visible {
  outline: 2px solid var(--pp-primary);
  outline-offset: 2px;
}

.pp-arc-tag {
  color: var(--pp-primary-strong);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.pp-arc-toggle b {
  color: var(--pp-ink);
  font-size: 1.1rem;
  line-height: 1.25;
}

.pp-arc-toggle > span:not(.pp-arc-tag):not(.pp-arc-more) {
  color: var(--pp-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.pp-arc-more {
  margin-top: auto;
  color: var(--pp-primary-strong);
  font-size: 0.82rem;
  font-weight: 800;
}

.pp-arc-more-close { display: none; }
.pp-arc-toggle[aria-expanded="true"] .pp-arc-more-open { display: none; }
.pp-arc-toggle[aria-expanded="true"] .pp-arc-more-close { display: inline; }

.pp-arc-detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms ease;
}

.pp-arc-toggle[aria-expanded="true"] + .pp-arc-detail { grid-template-rows: 1fr; }
.pp-arc-detail-inner { overflow: hidden; }

.pp-arc-detail p {
  margin: 0.7rem 0 0;
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: var(--pp-surface-2);
  color: var(--pp-muted);
  padding: 0.8rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

@container (max-width: 45rem) {
  .pp-arc-rail { display: none; }
  .pp-arc-phase { flex: 0 0 auto; width: 100%; }
  .pp-arc-toggle { min-height: auto; }
}

/* ---- Access framing ---- */
.pp-asset--access {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1rem;
  align-items: stretch;
}

.pp-access-map {
  position: relative;
  min-height: 21rem;
  border: 1px solid var(--pp-glass-border);
  border-radius: var(--pp-radius-lg);
  background:
    radial-gradient(circle at 28% 28%, var(--pp-primary-soft), transparent 30%),
    radial-gradient(circle at 70% 70%, var(--pp-blue-soft), transparent 34%),
    var(--pp-surface);
  overflow: hidden;
  -webkit-backdrop-filter: var(--pp-glass);
  backdrop-filter: var(--pp-glass);
  box-shadow: var(--pp-shadow);
}

.pp-access-region {
  position: absolute;
  border: 2px solid color-mix(in srgb, var(--pp-accent-blue) 34%, transparent);
  background: color-mix(in srgb, var(--pp-blue-soft) 74%, transparent);
}

.pp-access-region--north {
  inset: 12% 18% 44% 20%;
  border-radius: 42% 58% 44% 56%;
  transform: rotate(-10deg);
}

.pp-access-region--coast {
  inset: 42% 31% 12% 12%;
  border-radius: 55% 45% 48% 52%;
  transform: rotate(12deg);
}

.pp-access-pin {
  position: absolute;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--pp-glass-border);
  border-radius: 999px;
  background: var(--pp-surface);
  color: var(--pp-ink);
  padding: 0.38rem 0.62rem;
  font-size: 0.8rem;
  font-weight: 800;
  box-shadow: var(--pp-shadow);
}

.pp-access-pin::before {
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.38rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.pp-access-pin--care {
  right: 12%;
  top: 22%;
  color: var(--pp-accent-blue);
}

.pp-access-pin--remote {
  left: 9%;
  bottom: 20%;
  color: var(--pp-primary-strong);
}

.pp-access-route {
  position: absolute;
  inset: 35% 26% 35% 24%;
  border-top: 3px dashed var(--pp-primary);
  transform: rotate(-22deg);
  opacity: 0.72;
}

.pp-access-panel {
  border: 1px solid var(--pp-glass-border);
  border-radius: var(--pp-radius-lg);
  background: var(--pp-surface);
  padding: 1.1rem;
  -webkit-backdrop-filter: var(--pp-glass);
  backdrop-filter: var(--pp-glass);
  box-shadow: var(--pp-shadow);
}

.pp-access-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.9rem 0 1rem;
}

.pp-access-button,
.pp-persona-tab,
.pp-journey-stage,
.pp-ia-node,
.pp-screen-tab {
  min-height: 42px;
  border: 1px solid var(--pp-border);
  background: var(--pp-surface);
  color: var(--pp-ink);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.pp-access-button {
  border-radius: 999px;
  padding: 0.45rem 0.78rem;
  font-weight: 800;
}

.pp-access-button:hover,
.pp-persona-tab:hover,
.pp-journey-stage:hover,
.pp-ia-node:hover,
.pp-screen-tab:hover {
  border-color: var(--pp-primary);
  transform: translateY(-1px);
}

.pp-access-button:focus-visible,
.pp-persona-tab:focus-visible,
.pp-journey-stage:focus-visible,
.pp-ia-node:focus-visible,
.pp-screen-tab:focus-visible {
  outline: 2px solid var(--pp-primary);
  outline-offset: 2px;
}

.pp-access-button.is-active,
.pp-screen-tab.is-active {
  background: var(--pp-primary-fill);
  border-color: var(--pp-primary-fill);
  color: var(--pp-on-primary);
}

.pp-access-detail {
  display: grid;
  gap: 0.75rem;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius);
  background: var(--pp-surface-2);
  padding: 1rem;
}

.pp-access-detail h3,
.pp-persona-card h3,
.pp-journey-detail h3,
.pp-ia-detail h3,
.pp-prototype-note h3 {
  margin: 0;
  color: var(--pp-ink);
  font-size: 1.24rem;
  line-height: 1.25;
}

.pp-access-detail p,
.pp-journey-cells p {
  margin: 0;
  border-radius: 12px;
  background: var(--pp-surface);
  padding: 0.85rem 0.9rem;
}

.pp-access-detail span,
.pp-journey-cells span,
.pp-ia-detail span {
  display: block;
  margin-bottom: 0.28rem;
  color: var(--pp-primary-strong);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}

.pp-access-detail b,
.pp-journey-cells b,
.pp-ia-detail b {
  color: var(--pp-muted);
  font-size: 0.92rem;
  line-height: 1.5;
  font-weight: 600;
}

@container (max-width: 48rem) {
  .pp-asset--access { grid-template-columns: 1fr; }
  .pp-access-map { min-height: 17rem; }
  .pp-access-region--coast { inset: 44% 24% 13% 24%; transform: none; }
  .pp-access-route { inset: 38% 24% 36% 24%; }
}

/* ---- Personas ---- */
.pp-persona-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.pp-persona-tab {
  display: flex;
  flex: 1 1 13rem;
  align-items: center;
  gap: 0.7rem;
  border-radius: var(--pp-radius);
  padding: 0.75rem 0.9rem;
  text-align: left;
}

.pp-persona-tab span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--pp-primary-soft);
  color: var(--pp-primary-strong);
  font-weight: 900;
  flex: 0 0 auto;
}

.pp-persona-tab b {
  color: var(--pp-ink);
  font-size: 0.96rem;
  line-height: 1.2;
}

.pp-persona-tab.is-active {
  border-color: var(--pp-primary);
  background: var(--pp-primary-soft);
}

.pp-persona-card {
  display: grid;
  grid-template-columns: minmax(9rem, 0.35fr) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: stretch;
  border: 1px solid var(--pp-glass-border);
  border-radius: var(--pp-radius-lg);
  background: var(--pp-surface);
  padding: 1.2rem;
  -webkit-backdrop-filter: var(--pp-glass);
  backdrop-filter: var(--pp-glass);
  box-shadow: var(--pp-shadow);
}

.pp-persona-portrait {
  position: relative;
  min-height: 16rem;
  border-radius: var(--pp-radius);
  background:
    radial-gradient(circle at 50% 30%, var(--pp-primary-soft) 0 18%, transparent 19%),
    linear-gradient(155deg, var(--pp-blue-soft), var(--pp-warm-soft));
  overflow: hidden;
}

.pp-persona-portrait span {
  position: absolute;
  border-radius: 999px;
  background: var(--pp-surface);
  box-shadow: var(--pp-shadow);
}

.pp-persona-portrait span:nth-child(1) { width: 42%; height: 12%; left: 29%; top: 49%; }
.pp-persona-portrait span:nth-child(2) { width: 62%; height: 11%; left: 19%; top: 64%; }
.pp-persona-portrait span:nth-child(3) { width: 46%; height: 10%; left: 27%; top: 79%; }

.pp-persona-copy {
  display: grid;
  gap: 0.9rem;
  align-content: start;
}

.pp-persona-dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem;
  margin: 0;
}

.pp-persona-dl > div {
  border: 1px solid var(--pp-border);
  border-radius: 12px;
  background: var(--pp-surface-2);
  padding: 0.85rem 0.9rem;
}

.pp-persona-dl dt {
  margin: 0 0 0.3rem;
  color: var(--pp-primary-strong);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}

.pp-persona-dl dd {
  margin: 0;
  color: var(--pp-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

@container (max-width: 42rem) {
  .pp-persona-card { grid-template-columns: 1fr; }
  .pp-persona-portrait { min-height: 10rem; }
}

/* ---- Journey map ---- */
.pp-journey-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.pp-journey-stage {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border-radius: var(--pp-radius);
  padding: 0.75rem 0.85rem;
  text-align: left;
}

.pp-journey-stage span {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--pp-blue-soft);
  color: var(--pp-accent-blue);
  font-weight: 900;
}

.pp-journey-stage b {
  color: var(--pp-ink);
  font-size: 0.98rem;
}

.pp-journey-stage.is-active {
  border-color: var(--pp-accent-blue);
  background: var(--pp-blue-soft);
}

.pp-journey-detail {
  display: grid;
  gap: 1rem;
  border: 1px solid var(--pp-glass-border);
  border-radius: var(--pp-radius-lg);
  background: var(--pp-surface);
  padding: 1.15rem;
  -webkit-backdrop-filter: var(--pp-glass);
  backdrop-filter: var(--pp-glass);
  box-shadow: var(--pp-shadow);
}

.pp-journey-cells {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.75rem;
}

.pp-journey-cells p:nth-child(1) { background: var(--pp-warm-soft); }
.pp-journey-cells p:nth-child(2) { background: var(--pp-risk-soft); }
.pp-journey-cells p:nth-child(3) { background: var(--pp-good-soft); }

/* ---- IA tree ---- */
.pp-asset--ia {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.75fr);
  gap: 1rem;
  align-items: stretch;
}

.pp-ia-map,
.pp-ia-detail {
  border: 1px solid var(--pp-glass-border);
  border-radius: var(--pp-radius-lg);
  background: var(--pp-surface);
  padding: 1.1rem;
  -webkit-backdrop-filter: var(--pp-glass);
  backdrop-filter: var(--pp-glass);
  box-shadow: var(--pp-shadow);
}

.pp-ia-root {
  display: grid;
  min-height: 4.4rem;
  place-items: center;
  border-radius: var(--pp-radius);
  background: linear-gradient(135deg, var(--pp-primary-fill), var(--pp-accent-blue));
  color: var(--pp-on-primary);
  font-size: 1.28rem;
  font-weight: 900;
}

[data-theme="dark"] .pp-ia-root { color: var(--espresso); }

.pp-ia-branches {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.7rem;
  margin-top: 1rem;
}

.pp-ia-node {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-radius: 12px;
  padding: 0.72rem 0.8rem;
  text-align: left;
  font-weight: 800;
}

.pp-ia-node span {
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 50%;
  background: var(--pp-primary);
  flex: 0 0 auto;
}

.pp-ia-node.is-active {
  border-color: var(--pp-primary);
  background: var(--pp-primary-soft);
}

.pp-ia-detail {
  display: grid;
  gap: 0.8rem;
  align-content: start;
}

.pp-ia-detail p {
  margin: 0;
  color: var(--pp-muted);
  line-height: 1.55;
}

.pp-ia-detail div {
  border-radius: 12px;
  background: var(--pp-surface-2);
  padding: 0.85rem 0.9rem;
}

@container (max-width: 48rem) {
  .pp-asset--ia { grid-template-columns: 1fr; }
}

/* ---- Prototype ---- */
.pp-prototype-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.pp-screen-tab {
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-weight: 800;
}

.pp-phone-shell {
  display: grid;
  grid-template-columns: minmax(14rem, 0.72fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}

.pp-phone {
  width: min(100%, 20rem);
  justify-self: center;
  border: 1px solid color-mix(in srgb, var(--pp-ink) 18%, transparent);
  border-radius: 2rem;
  background: color-mix(in srgb, var(--pp-ink) 10%, var(--surface));
  padding: 0.8rem;
  box-shadow: var(--pp-shadow-lg);
}

.pp-phone-status {
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0.75rem 0.7rem;
}

.pp-phone-status span {
  display: block;
  width: 3rem;
  height: 0.42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pp-ink) 16%, transparent);
}

.pp-phone-card {
  display: grid;
  gap: 0.7rem;
  min-height: 22rem;
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 88% 10%, var(--pp-primary-soft), transparent 28%),
    linear-gradient(180deg, var(--surface), var(--pp-surface-2));
  padding: 1.2rem;
}

.pp-phone-card > p:first-child {
  margin: 0;
  color: var(--pp-primary-strong);
  font-size: 0.84rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pp-phone-card h3 {
  margin: 0;
  color: var(--pp-ink);
  font-size: 1.38rem;
  line-height: 1.18;
}

.pp-phone-card p {
  margin: 0;
  color: var(--pp-muted);
  font-size: 0.94rem;
  line-height: 1.52;
}

.pp-phone-card button {
  align-self: end;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: var(--pp-primary-fill);
  color: var(--pp-on-primary);
  padding: 0.66rem 1rem;
  font-weight: 900;
}

.pp-phone-card > span {
  justify-self: start;
  border-radius: 999px;
  background: var(--pp-good-soft);
  color: var(--pp-good);
  padding: 0.28rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 800;
}

.pp-phone-list {
  display: grid;
  gap: 0.42rem;
  margin-top: 0.65rem;
}

.pp-phone-list span {
  height: 0.72rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pp-surface) 70%, var(--pp-primary-soft));
}

.pp-prototype-note {
  border: 1px solid var(--pp-glass-border);
  border-radius: var(--pp-radius-lg);
  background: var(--pp-surface);
  padding: 1.2rem;
  -webkit-backdrop-filter: var(--pp-glass);
  backdrop-filter: var(--pp-glass);
  box-shadow: var(--pp-shadow);
}

.pp-prototype-note p:not(.pp-panel-label) {
  margin: 0.7rem 0 0;
  color: var(--pp-muted);
  line-height: 1.6;
}

@container (max-width: 48rem) {
  .pp-phone-shell { grid-template-columns: 1fr; }
}

/* ---- Evidence and sources ---- */
.pp-evidence-cards,
.pp-asset--sources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.9rem;
}

.pp-evidence-card,
.pp-confirm,
.pp-source-card {
  border: 1px solid var(--pp-glass-border);
  border-radius: var(--pp-radius);
  background: var(--pp-surface);
  padding: 1rem 1.1rem;
  -webkit-backdrop-filter: var(--pp-glass);
  backdrop-filter: var(--pp-glass);
  box-shadow: var(--pp-shadow);
}

.pp-evidence-card {
  display: grid;
  gap: 0.32rem;
  color: inherit;
}

.pp-evidence-card span,
.pp-source-card span {
  color: var(--pp-primary-strong);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.pp-evidence-card b,
.pp-source-card h3 {
  margin: 0;
  color: var(--pp-ink);
  font-size: 1.08rem;
}

.pp-evidence-card em {
  color: var(--pp-accent-blue);
  font-style: normal;
  font-weight: 800;
}

.pp-confirm {
  margin-top: 0.9rem;
  background: var(--pp-warm-soft);
}

.pp-confirm ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}

.pp-confirm li {
  border-radius: 10px;
  background: var(--pp-surface);
  color: var(--pp-ink);
  padding: 0.62rem 0.75rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.pp-source-card {
  border-top: 3px solid var(--pp-primary);
}

.pp-source-card p {
  margin: 0.5rem 0 0;
  color: var(--pp-muted);
  font-size: 0.92rem;
  line-height: 1.52;
}

.pp-section--close {
  padding-bottom: clamp(3rem, 8vw, 5.4rem);
}

.pp-section--close .cl-view-link {
  display: inline-block;
  margin-top: 1.6rem;
}

/* 2026-06-23 About compact refinement: smoother canvas, tighter hierarchy,
   smaller interactive assets, and token-based pink/blue/cognac/green tones. */
.about-page {
  background:
    radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--denim-soft) 12%, transparent), transparent 0 24rem),
    radial-gradient(circle at 8% 18%, color-mix(in srgb, var(--blossom-soft) 56%, transparent), transparent 0 22rem),
    linear-gradient(180deg, color-mix(in srgb, var(--blossom-soft) 54%, var(--bg)) 0%, var(--bg) 52%, color-mix(in srgb, var(--surface) 74%, var(--bg)) 100%);
}



[data-theme="dark"] .about-page {
  background:
    radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--denim) 12%, transparent), transparent 0 24rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 78%, var(--bg)) 0%, var(--bg) 58%, color-mix(in srgb, var(--surface) 68%, var(--bg)) 100%);
}





/* ============ About · Hybrid copied from Claude sandbox ============ */
.intro {
  display: none;
  position: relative;
  min-height: 92vh;
  overflow: hidden;
}

.intro.is-on {
  display: block;
}

.about-page .v-hyb {
  background: var(--bg);
  color: var(--text);
}

.about-page .v-hyb h1,
.about-page .v-hyb p,
.about-page .v-hyb figure {
  margin: 0;
}

.about-page .v-hyb .wrap {
  position: relative;
  z-index: 5;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(64px, 10vh, 120px) 28px 130px;
}

.about-page .v-hyb .dots {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: radial-gradient(color-mix(in srgb, var(--brown) 20%, transparent) 1.1px, transparent 1.2px);
  background-size: 24px 24px;
  opacity: 0.45;
}

.about-page .v-hyb .blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.5;
  pointer-events: none;
}

.about-page .v-hyb .eyebrow {
  margin-bottom: 16px;
  color: var(--denim);
  font-family: var(--grotesk);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.v-hyb .blob.b1 {
  top: -8vw;
  left: -8vw;
  width: 40vw;
  height: 40vw;
  background: var(--blossom);
}

.v-hyb .blob.b2 {
  right: -6vw;
  bottom: -10vw;
  width: 34vw;
  height: 34vw;
  background: var(--denim-soft);
}

.hyb-board {
  position: relative;
  z-index: 4;
  min-height: 64vh;
}

.hyb-svg {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hyb-svg path {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1 9;
  opacity: 0.7;
}

.hb-title {
  position: relative;
  z-index: 4;
  max-width: 46ch;
}

.hb-greet {
  margin: 2px 0 6px;
  color: var(--fun);
  font-family: var(--grotesk);
  font-size: clamp(19px, 2.5vw, 28px);
  font-weight: 700;
  letter-spacing: 0;
}

.hb-name {
  display: block;
  color: var(--text);
  font-family: var(--font);
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.94;
}

.hb-tag {
  display: block;
  max-width: 44ch;
  margin-top: 0.5em;
  color: var(--muted);
  font-size: clamp(1.15rem, 2.1vw, 1.65rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.22;
}

.hyb-board #hb3 {
  z-index: 9;
}

.hb-tag .u {
  padding: 0 0.06em;
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--fun) 34%, transparent) 58%);
  color: var(--text);
  font-weight: 700;
}

.hb-hint {
  position: absolute;
  bottom: 14px;
  left: 28px;
  z-index: 5;
  color: var(--muted);
  font-family: var(--grotesk);
  font-size: 12.5px;
}

.demo-hand {
  position: absolute;
  z-index: 30;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--fun);
  box-shadow: 0 10px 22px rgba(53, 45, 44, 0.34);
  pointer-events: none;
}

.demo-hand svg {
  display: block;
  width: 17px;
  height: 17px;
}

.about-page .v-hyb .sticky {
  position: absolute;
  z-index: 5;
  width: 170px;
  border-radius: 5px;
  padding: 14px 14px 16px;
  color: #3a2f2b;
  font-family: var(--grotesk);
  font-size: 13.5px;
  line-height: 1.4;
  user-select: none;
  touch-action: none;
  cursor: grab;
  box-shadow: 0 12px 26px rgba(53, 45, 44, 0.18);
  transform: rotate(var(--r, -2deg));
}

.about-page .v-hyb .sticky:active {
  cursor: grabbing;
}

.about-page .v-hyb .sticky b {
  display: block;
  margin-bottom: 5px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
}

.about-page .v-hyb .s-pink { background: #fbdce4; }
.about-page .v-hyb .s-blue { background: #cfe0f3; }
.about-page .v-hyb .s-cognac { background: #f3ddc2; }
.about-page .v-hyb .s-leaf { background: #e0edcb; }
.about-page .v-hyb .s-note {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
}

.about-page .v-hyb .sticky.demo-lift {
  box-shadow: 0 24px 46px rgba(53, 45, 44, 0.32) !important;
}

.hb-pulse {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 6;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--fun);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--fun) 55%, transparent);
  animation: hbpulse 1.9s ease-out infinite;
  pointer-events: none;
}

@keyframes hbpulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--fun) 50%, transparent); }
  70% { box-shadow: 0 0 0 15px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.hb-moveme {
  position: absolute;
  top: -32px;
  left: 50%;
  z-index: 6;
  border-radius: 9px 9px 9px 1px;
  padding: 3px 9px;
  background: #c02a5c; /* deeper rose so white text clears AA (was --fun, white=1.99-4.2) */
  color: #fff;
  font-family: var(--grotesk);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 6px 14px rgba(53, 45, 44, 0.22);
  transform: translateX(-50%);
  animation: hbbob 1.9s ease-in-out infinite;
}

@keyframes hbbob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, -3px); }
}

.hyb-board.interacted .hb-pulse,
.hyb-board.interacted .hb-moveme {
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

.hb-cursors {
  position: absolute;
  inset: 0;
  z-index: 25;
  overflow: hidden;
  pointer-events: none;
}

.hb-curs {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 2px;
  align-items: flex-start;
  will-change: transform;
}

.hb-curs svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  filter: none;
  transform: rotate(-8deg);
}

.hb-curs span {
  margin-top: 10px;
  border-radius: 999px;
  padding: 4px 12px 5px;
  background: var(--cursor-color);
  color: #fff;
  font-family: -apple-system, "SF Pro Text", "SF Pro Display", BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.005em;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(53, 45, 44, 0.14);
}

.hb-photo {
  position: absolute;
  top: 3%;
  right: 0;
  z-index: 4;
}

.kin-portrait {
  position: relative;
  justify-self: center;
  perspective: 900px;
}

.kin-portrait .frame {
  position: relative;
  width: clamp(240px, 30vw, 360px);
  border-radius: 10px;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
}

.kin-portrait img {
  display: block;
  width: 100%;
  border: 10px solid var(--surface);
  border-radius: 10px;
  box-shadow: 0 30px 60px rgba(53, 45, 44, 0.28);
}

.kin-portrait .ptag {
  position: absolute;
  bottom: 24px;
  left: -18px;
  z-index: 3;
  border-radius: 10px 10px 10px 0;
  padding: 6px 12px;
  background: #c02a5c; /* deeper rose so white text clears AA (was --fun, white=1.99-4.2) */
  color: #fff;
  font-family: var(--grotesk);
  font-size: 12px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(53, 45, 44, 0.24);
  transform: translateZ(40px);
}

.kin-portrait .pspark {
  position: absolute;
  top: -14px;
  right: -14px;
  transform: translateZ(60px);
}

.hb-smiley {
  position: absolute;
  right: -18px;
  bottom: 21%;
  z-index: 4;
  width: 42px;
  pointer-events: none;
  filter: drop-shadow(0 8px 16px rgba(53, 45, 44, 0.24));
  transform: rotate(8deg);
}

.hb-smiley svg {
  display: block;
  width: 100%;
  height: auto;
}

[data-theme="dark"] .v-hyb .blob { opacity: 0.14; }
[data-theme="dark"] .v-hyb .dots { opacity: 0.32; }
[data-theme="dark"] .v-hyb .hb-glow { background: radial-gradient(300px 300px at var(--mx, 24%) var(--my, 28%), color-mix(in srgb, var(--fun) 12%, transparent), transparent 72%); }
[data-theme="dark"] .v-hyb .eyebrow { color: #a7c4ec; }
[data-theme="dark"] .v-hyb .hb-tag { color: #d7c4bc; }

/* Tablet / mobile: reflow the free-form board into a clean stack —
   heading → notes (2-col) → photo. Drag still works on touch (the JS
   lifts a note to absolute); cursors / auto-demo / tilt are desktop-only. */
@media (max-width: 900px) {
  .about-page .v-hyb .wrap { padding: clamp(40px, 7vh, 80px) 20px 64px; }
  .hyb-board {
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
  }
  .about-page .v-hyb .hyb-svg,
  .about-page .v-hyb .hb-cursors { display: none; }
  .hb-title { order: 1; flex: 1 1 100%; max-width: none; }
  .hb-name { font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .hb-tag { max-width: 40ch; font-size: clamp(1.05rem, 4vw, 1.35rem); }
  .about-page .v-hyb .sticky {
    order: 2;
    position: static;
    flex: 1 1 calc(50% - 7px);
    width: auto;
    font-size: 12.5px;
    transform: rotate(var(--r, -2deg));
    /* keep base touch-action:none + cursor:grab so touch-drag works (not scroll) */
  }
  .hb-photo {
    order: 3;
    flex: 1 1 100%;
    position: relative;
    top: auto;
    right: auto;
    display: flex;
    justify-content: center;
    margin: 18px 0 0;
  }
  .kin-portrait .frame { width: min(300px, 78vw); transform: none !important; }
  .hb-smiley { right: -8px; }
  .hb-hint { order: 4; flex: 1 1 100%; position: static; margin-top: 6px; }
}
@media (max-width: 480px) {
  .about-page .v-hyb .sticky { flex: 1 1 100%; }
}

/* =========================================================
   CUSTOMER PROFILE — standardization pass
   Blue primary, rose/cognac/denim accents, shared green/red
   semantic states, and glassy detailed asset surfaces.
   ========================================================= */
.cp-page {
  --cp-primary: #156c7c;
  --cp-primary-strong: #0e4f5b;
  --cp-primary-soft: color-mix(in srgb, #156c7c 14%, var(--surface));
  --cp-accent-rose: #b14f63;
  --cp-accent-warm: #9b623f;
  --cp-accent-blue: #15606e;
  --cp-good: #0f7a4e;
  --cp-good-soft: color-mix(in srgb, #0f7a4e 18%, var(--surface));
  --cp-risk: #b3303f;
  --cp-risk-soft: color-mix(in srgb, #b3303f 16%, var(--surface));
  --cp-warn: #855a0a;
  --cp-warn-soft: color-mix(in srgb, #9b623f 15%, var(--surface));
  --cp-surface: color-mix(in srgb, var(--surface) 86%, transparent);
  --cp-surface-2: color-mix(in srgb, #e1f0f3 46%, var(--surface));
  --cp-border: color-mix(in srgb, #156c7c 20%, var(--line));
  --cp-glass: blur(14px) saturate(1.12);
  background-color: var(--bg);
  background-image:
    radial-gradient(color-mix(in srgb, #156c7c 12%, transparent) 1.2px, transparent 1.3px),
    radial-gradient(34rem 26rem at 8% 9%, color-mix(in srgb, #156c7c 15%, transparent), transparent 64%),
    radial-gradient(34rem 28rem at 91% 17%, color-mix(in srgb, #b14f63 15%, transparent), transparent 62%),
    radial-gradient(38rem 30rem at 77% 93%, color-mix(in srgb, #0f7a4e 10%, transparent), transparent 60%),
    linear-gradient(155deg, var(--bg), color-mix(in srgb, #e1f0f3 34%, var(--bg)) 54%, color-mix(in srgb, #f8e8ea 38%, var(--bg)));
  background-size: 26px 26px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

[data-theme="dark"] .cp-page {
  --cp-primary: #5cc4d6;
  --cp-primary-strong: #8fd9e6;
  --cp-primary-soft: rgba(92, 196, 214, 0.17);
  --cp-accent-rose: #e79bac;
  --cp-accent-warm: #e0ac4f;
  --cp-accent-blue: #5cc4d6;
  --cp-good: #57c89a;
  --cp-good-soft: rgba(87, 200, 154, 0.18);
  --cp-risk: #e8808d;
  --cp-risk-soft: rgba(232, 128, 141, 0.18);
  --cp-warn: #e0ac4f;
  --cp-warn-soft: rgba(224, 172, 79, 0.16);
  --cp-surface: color-mix(in srgb, var(--surface) 78%, transparent);
  --cp-surface-2: color-mix(in srgb, #5cc4d6 10%, var(--surface));
  --cp-border: color-mix(in srgb, #5cc4d6 25%, var(--line));
  background-image:
    radial-gradient(color-mix(in srgb, #5cc4d6 16%, transparent) 1.2px, transparent 1.3px),
    radial-gradient(34rem 26rem at 8% 9%, color-mix(in srgb, #5cc4d6 16%, transparent), transparent 64%),
    radial-gradient(34rem 28rem at 91% 17%, color-mix(in srgb, #e79bac 11%, transparent), transparent 62%),
    radial-gradient(38rem 30rem at 77% 93%, color-mix(in srgb, #57c89a 9%, transparent), transparent 60%),
    linear-gradient(155deg, var(--bg), color-mix(in srgb, #5cc4d6 8%, var(--bg)) 54%, var(--bg));
}

.cp-hero-title,
.cp-section-title,
.cp-asset-title,
.cp-principle,
.cp-eyebrow,
.cp-section-kicker,
.cp-asset-eyebrow,
.cp-chip,
.cp-tab,
.cp-status-btn,
.cp-snapshot-grid dt,
.cp-future-label,
.cp-mm-kicker,
.cp-stage-more {
  letter-spacing: 0;
}

.cp-hero-title {
  background: linear-gradient(100deg, var(--cp-primary-strong), var(--cp-accent-rose) 52%, var(--cp-accent-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cp-section-title,
.cp-asset-title {
  color: var(--cp-ink);
}

.cp-eyebrow,
.cp-section-kicker,
.cp-asset-eyebrow,
.cp-stage-more {
  color: var(--cp-primary-strong);
}

.cp-chip,
.cp-evo-index,
.cp-an-badge,
.cp-an-num {
  background: var(--cp-primary-soft);
  color: var(--cp-primary-strong);
  border-color: color-mix(in srgb, var(--cp-primary) 24%, var(--cp-border));
}

.cp-snapshot-grid,
.cp-snapshot-challenge,
.cp-evo-stage,
.cp-frag-center,
.cp-frag-card,
.cp-search-col,
.cp-result,
.cp-mm-col,
.cp-val-card,
.cp-model-hub,
.cp-node,
.cp-model-attr,
.cp-an-frame,
.cp-an-composer,
.cp-an-row,
.cp-an-card,
.cp-tab-panel,
.cp-status,
.cp-trust-card,
.cp-future-tier,
.cp-impact-card {
  -webkit-backdrop-filter: var(--cp-glass);
  backdrop-filter: var(--cp-glass);
}

.cp-evo-stage,
.cp-frag-card,
.cp-search-col,
.cp-mm-col,
.cp-val-card,
.cp-node,
.cp-trust-card,
.cp-impact-card {
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.cp-evo-stage:hover,
.cp-frag-card:hover,
.cp-search-col:hover,
.cp-mm-col:hover,
.cp-val-card:hover,
.cp-node:hover,
.cp-trust-card:hover,
.cp-impact-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--cp-primary) 36%, var(--cp-border));
  box-shadow: var(--cp-shadow-lg);
}

.cp-stage-toggle,
.cp-tab,
.cp-status-btn {
  min-height: 42px;
}

.cp-stage-toggle[aria-expanded="true"] {
  background: linear-gradient(135deg, color-mix(in srgb, var(--cp-primary) 10%, transparent), transparent);
}

.cp-evo-stage--risk {
  --st: var(--cp-risk);
  --st-soft: var(--cp-risk-soft);
}

.cp-evo-stage--warn {
  --st: var(--cp-warn);
  --st-soft: var(--cp-warn-soft);
}

.cp-evo-stage--good {
  --st: var(--cp-good);
  --st-soft: var(--cp-good-soft);
}

.cp-tab[aria-selected="true"],
.cp-an-action--primary {
  background: #3a4f8a;
  border-color: #3a4f8a;
  color: #ffffff;
}

[data-theme="dark"] .cp-tab[aria-selected="true"],
[data-theme="dark"] .cp-an-action--primary {
  background: #8aa4e8;
  border-color: #8aa4e8;
  color: #0e1525;
}

.cp-status-btn[data-cp-status="before"][aria-selected="true"] {
  background: #b3303f;
  color: #ffffff;
}

.cp-status-btn[data-cp-status="after"][aria-selected="true"] {
  background: #0f7a4e;
  color: #ffffff;
}

[data-theme="dark"] .cp-status-btn[data-cp-status="before"][aria-selected="true"] {
  background: #e8808d;
  color: #0e1525;
}

[data-theme="dark"] .cp-status-btn[data-cp-status="after"][aria-selected="true"] {
  background: #57c89a;
  color: #0e1525;
}

.cp-search-col:first-child,
.cp-mm-col--lead {
  border-top: 3px solid var(--cp-risk);
}

.cp-search-col--after,
.cp-mm-col--cust {
  border-top: 3px solid var(--cp-good);
}

.cp-result--customer,
.cp-status-list--after li {
  background: var(--cp-good-soft);
  border-color: color-mix(in srgb, var(--cp-good) 38%, var(--cp-border));
  color: var(--cp-good);
}

.cp-status-list--before li {
  background: var(--cp-risk-soft);
  border-color: color-mix(in srgb, var(--cp-risk) 34%, var(--cp-border));
}

.cp-model-hub {
  background: linear-gradient(150deg, #3a4f8a, #283a6b);
  color: #ffffff;
}

[data-theme="dark"] .cp-model-hub {
  background: linear-gradient(150deg, #8aa4e8, #aec3ff);
  color: #0e1525;
}

/* =========================================================
   2026-06-24 (Claude) — palette discipline: replace the per-card
   "rainbow" tones in Generate Draft with the project primary +
   semantic green/red/amber. Appended last so it wins the cascade.
   ========================================================= */
/* Phase timeline reads as a story arc, not a rainbow:
   idea (primary violet) → confidence gap (warn) → wrong turn (risk) → solved (good). */
.gd-timeline .gd-phase:nth-child(1)::before { background: var(--gd-primary); }
.gd-timeline .gd-phase:nth-child(3)::before { background: var(--gd-warn); }
.gd-timeline .gd-phase:nth-child(5)::before { background: var(--gd-risk); }
.gd-timeline .gd-phase:nth-child(7)::before { background: var(--gd-good); }
.gd-timeline .gd-phase:nth-child(1) .gd-phase-glyph { color: var(--gd-primary); }
.gd-timeline .gd-phase:nth-child(3) .gd-phase-glyph { color: var(--gd-warn); }
.gd-timeline .gd-phase:nth-child(5) .gd-phase-glyph { color: var(--gd-risk); }
.gd-timeline .gd-phase:nth-child(7) .gd-phase-glyph { color: var(--gd-good); }
/* Research clusters: one cohesive violet family. The five themes are
   distinguished by their labels/quotes, not by five different hues. */
.gd-research-cluster--red,
.gd-research-cluster--yellow,
.gd-research-cluster--green,
.gd-research-cluster--purple,
.gd-research-cluster--blue { background: var(--gd-primary-soft); }

/* =========================================================
   2026-06-24 (Claude) — AutoSync interactivity uplift.
   Insight cards & reframe layers become click-to-reveal
   accordions (parent is block so 0fr→1fr resolves). Appended
   last to win the cascade over the static base rules.
   ========================================================= */
.as-asset-hint {
  margin: 0 0 0.8rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--as-muted);
  font-style: italic;
}

/* ---- Insight cards: reveal the design response ---- */
.as-insight { padding: 0; overflow: hidden; }
.as-insight-toggle {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 1.1rem 1.2rem;
}
.as-insight-toggle:focus-visible { outline: 2px solid var(--as-brand); outline-offset: -3px; border-radius: var(--as-radius); }
.as-insight-toggle .as-insight-ev { margin: 0; }
.as-insight-cue {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.7rem;
  font-family: var(--grotesk);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--as-brand);
}
.as-insight-cue::after { content: "+"; font-size: 0.95rem; line-height: 1; }
.as-insight-toggle[aria-expanded="true"] .as-insight-cue::after { content: "–"; }
.as-insight-im {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  margin: 0;
}
.as-insight-toggle[aria-expanded="true"] + .as-insight-im { grid-template-rows: 1fr; }
.as-insight-im-inner { overflow: hidden; }
.as-insight-im-inner p {
  margin: 0;
  padding: 0.85rem 1.2rem 1.15rem;
  border-top: 1px solid var(--as-border);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--as-ink);
}
.as-insight-im-inner span {
  display: block;
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--as-brand);
  margin-bottom: 0.2rem;
}

/* ---- Reframe layers: static, always-expanded cards (no toggle) ---- */
.as-layer-body { flex: 1 1 auto; min-width: 0; }

/* =========================================================
   2026-06-24 (Claude) — AutoSync interactivity uplift, batch 2:
   scroll-map spotlight, scope-matrix focus, quote→BOS accordion.
   ========================================================= */
/* ---- Scroll map: spotlight the buried "work" blocks ---- */
.as-scroll-toolbar { margin-bottom: 0.8rem; }
.as-scroll-highlight-btn {
  appearance: none; cursor: pointer; font: inherit;
  font-family: var(--grotesk); font-weight: 600; font-size: 0.82rem;
  color: var(--as-brand);
  background: var(--as-brand-soft);
  border: 1px solid var(--as-border);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
}
.as-scroll-highlight-btn[aria-pressed="true"] { background: var(--as-brand); color: #fff; border-color: var(--as-brand); }
[data-theme="dark"] .as-scroll-highlight-btn[aria-pressed="true"] { color: #0e1525; }
.as-scroll-highlight-btn:focus-visible { outline: 2px solid var(--as-brand); outline-offset: 2px; }
.as-scroll-block { transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease; }
.as-asset--scroll.is-highlight .as-scroll-block--top,
.as-asset--scroll.is-highlight .as-scroll-block--mid { opacity: 0.4; }
.as-asset--scroll.is-highlight .as-scroll-block--work {
  border-style: solid;
  border-color: var(--as-brand);
  background: var(--as-brand-soft);
  color: var(--as-ink);
  font-weight: 600;
}

/* ---- Scope matrix: focus MVP vs Later (tint the focused column) ---- */
.as-matrix-switch {
  display: inline-flex; gap: 0.25rem;
  background: var(--as-surface-2);
  border: 1px solid var(--as-border);
  border-radius: 999px; padding: 0.25rem;
  margin-bottom: 0.9rem;
}
.as-matrix-view {
  appearance: none; cursor: pointer; font: inherit;
  font-family: var(--grotesk); font-weight: 600; font-size: 0.8rem;
  color: var(--as-muted); background: none; border: 0;
  border-radius: 999px; padding: 0.4rem 0.85rem;
}
.as-matrix-view.is-active { background: var(--as-brand); color: #fff; }
[data-theme="dark"] .as-matrix-view.is-active { color: #0e1525; }
.as-matrix-view:focus-visible { outline: 2px solid var(--as-brand); outline-offset: 2px; }
.as-matrix-mvp, .as-matrix-later { border-radius: 8px; transition: background 0.2s ease, box-shadow 0.2s ease; }
.as-asset--matrix.is-mvp .as-matrix-mvp,
.as-asset--matrix.is-later .as-matrix-later {
  background: var(--as-brand-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--as-brand) 22%, transparent);
}

/* ---- Quote → BOS: each stage's steps collapse/expand ---- */
.as-qb-flow { align-items: flex-start; }
.as-qb-group { padding: 0; overflow: hidden; }
.as-qb-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
  padding: 0.85rem 1rem;
}
.as-qb-toggle:focus-visible { outline: 2px solid var(--as-brand); outline-offset: -3px; border-radius: var(--as-radius); }
.as-qb-toggle .as-qb-group-name { margin: 0; }
.as-qb-count {
  flex: 0 0 auto; min-width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--as-brand-soft); color: var(--as-brand);
  font-family: var(--grotesk); font-weight: 700; font-size: 0.72rem;
}
.as-qb-steps-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.as-qb-toggle[aria-expanded="true"] + .as-qb-steps-wrap { grid-template-rows: 1fr; }
.as-qb-steps-wrap > .as-qb-steps { overflow: hidden; padding: 0 1rem 0.9rem; min-height: 0; }

/* =========================================================
   2026-06-24 (Codex) — Pepita + Customer Profile interaction uplift.
   Interactions clarify evidence boundaries, source translation, customer
   memory fragments, validation signals, and data-model logic.
   ========================================================= */
.pp-proof-lens,
.pp-source-focus,
.cp-model-detail,
.cp-future-detail {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  padding: 1rem;
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: var(--soft-shadow);
}

.pp-panel-label,
.cp-panel-label {
  margin: 0 0 0.45rem;
  /* darkened from bare --muted (was 4.06-4.24 in light) to clear AA; stays light in dark */
  color: color-mix(in srgb, var(--muted) 60%, var(--text));
  font-family: var(--grotesk);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.pp-proof-tabs,
.cp-search-switch,
.cp-future-controls {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  padding: 0.25rem;
}

.pp-proof-tab,
.cp-search-mode,
.cp-future-mode {
  appearance: none;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  min-height: 38px;
  padding: 0.42rem 0.82rem;
}

.pp-proof-tab.is-active,
.cp-search-mode.is-active,
.cp-future-mode.is-active {
  background: var(--text);
  color: var(--surface);
}

[data-theme="dark"] .pp-proof-tab.is-active,
[data-theme="dark"] .cp-search-mode.is-active,
[data-theme="dark"] .cp-future-mode.is-active {
  background: var(--text);
  color: var(--bg);
}

.pp-proof-tab:focus-visible,
.pp-source-toggle:focus-visible,
.cp-search-mode:focus-visible,
.cp-node:focus-visible,
.cp-future-mode:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.pp-proof-panel h3,
.pp-source-focus h3,
.cp-model-detail h4,
.cp-future-detail h4 {
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.25;
}

.pp-proof-panel p,
.pp-source-focus p,
.cp-model-detail p,
.cp-future-detail p {
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.pp-proof-panel ul {
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.pp-proof-panel li {
  border-left: 3px solid var(--pp-primary, var(--accent));
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--pp-primary, var(--accent)) 10%, var(--surface));
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.42;
  padding: 0.5rem 0.65rem;
}

.pp-asset--sources {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 0.75fr);
  gap: 1rem;
  align-items: stretch;
}

.pp-source-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.8rem;
}

.pp-source-toggle {
  appearance: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.pp-source-card.is-active {
  border-color: var(--pp-primary, var(--accent));
  background: color-mix(in srgb, var(--pp-primary, var(--accent)) 12%, var(--surface));
  transform: translateY(-2px);
}

.pp-source-focus {
  align-content: start;
  display: grid;
}

.cp-frag-ring > li,
.cp-model-ring > li {
  list-style: none;
  min-width: 0;
}

.cp-frag-card,
.cp-node {
  appearance: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: inherit;
}

.cp-frag-card.is-active,
.cp-node.is-active {
  border-style: solid;
  border-color: var(--cp-primary, var(--cp-brand));
  background: color-mix(in srgb, var(--cp-primary, var(--cp-brand)) 14%, var(--surface));
  transform: translateY(-2px);
}

.cp-frag-detail {
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
}




.cp-asset--search .cp-search-col {
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.cp-asset--search.is-before .cp-search-col--after,
.cp-asset--search.is-after .cp-search-col--before {
  opacity: 0.48;
  transform: scale(0.985);
}

.cp-asset--search.is-before .cp-search-col--before,
.cp-asset--search.is-after .cp-search-col--after {
  border-color: var(--cp-primary, var(--cp-brand));
  box-shadow: var(--cp-shadow-lg);
}








.cp-model-detail {
  margin-top: 1rem;
  border-color: color-mix(in srgb, var(--cp-primary, var(--cp-brand)) 24%, var(--line));
}

.cp-future-controls {
  margin-bottom: 1rem;
}

.cp-future {
  transition: opacity 0.2s ease;
}

.cp-future.is-base .cp-future-tier--top,
.cp-future.is-future .cp-future-tier--base {
  opacity: 0.52;
}

.cp-future.is-base .cp-future-tier--base,
.cp-future.is-future .cp-future-tier--top {
  border-color: var(--cp-primary, var(--cp-brand));
  box-shadow: var(--cp-shadow-lg);
}

.cp-future-detail {
  margin-top: 1rem;
}

@container (max-width: 48rem) {
  .pp-asset--sources {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   2026-06-24 (Codex) - Homepage hero aesthetic continuity.
   Keeps the greeting/word-cycle essence while making the hero
   share the same continuous canvas and detailed product-system
   language as the project assets.
   ========================================================= */
.carolyn-home {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - var(--nav-h));
  background-color: var(--bg);
  background-image:
    radial-gradient(var(--grid-line) 1.05px, transparent 1.2px),
    linear-gradient(142deg,
      color-mix(in srgb, var(--blossom-soft) 82%, var(--bg)) 0%,
      var(--bg) 42%,
      color-mix(in srgb, var(--denim-soft) 12%, var(--bg)) 73%,
      color-mix(in srgb, var(--leaf) 10%, var(--bg)) 100%);
  background-size: 24px 24px, 100% 100%;
  background-attachment: fixed, fixed;
}

[data-theme="dark"] .carolyn-home {
  background-image:
    radial-gradient(var(--grid-line) 1.05px, transparent 1.2px),
    linear-gradient(142deg,
      color-mix(in srgb, var(--surface-2) 74%, var(--bg)) 0%,
      var(--bg) 46%,
      color-mix(in srgb, var(--denim-soft) 13%, var(--bg)) 78%,
      color-mix(in srgb, var(--leaf) 9%, var(--bg)) 100%);
}

.carolyn-home .cl-hero,
.carolyn-home .cl-work,
.carolyn-home .cl-contact {
  background: transparent;
}

/* The base .cl-contact band is a dark gradient with light (--surface) text.
   On the homepage the band background is made transparent so the page canvas
   shows through — so the text must switch to the canvas-appropriate --text,
   or it renders light-on-light (light) / dark-on-dark (dark) and disappears. */
.carolyn-home .cl-contact-grid p,
.carolyn-home .cl-contact-grid a {
  color: var(--text);
}

.carolyn-home .cl-hero {
  overflow: clip;
  padding: clamp(8px, 1.4vw, 18px) 0 clamp(22px, 3.2vw, 48px);
}

.carolyn-home .cl-hero-grid {
  position: relative;
  z-index: 2;
  min-height: clamp(360px, 50svh, 610px);
  padding-top: clamp(66px, 8.2vw, 128px);
  padding-bottom: clamp(46px, 6vw, 96px);
}

.carolyn-home .cl-hero-type {
  position: relative;
  max-width: min(980px, 100%);
}

.carolyn-home .hero-kicker {
  margin-bottom: clamp(12px, 1.6vw, 20px);
  color: color-mix(in srgb, var(--muted) 82%, var(--text));
  font-size: clamp(0.74rem, 0.82vw, 0.9rem);
  letter-spacing: 0.08em;
  line-height: 1.45;
}

.carolyn-home .cl-hero-type h1 {
  max-width: 12.9ch;
  background: linear-gradient(100deg,
    var(--accent-3) 0%,
    var(--brown) 34%,
    var(--denim) 72%,
    color-mix(in srgb, var(--leaf) 62%, var(--denim)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: clamp(2.85rem, 5.9vw, 7.05rem);
  font-weight: 650;
  line-height: 0.98;
}

.carolyn-home .cl-hello {
  padding: 0;
}

.carolyn-home .word-cycle {
  min-width: min(92vw, 4.55em);
  color: var(--denim);
  filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--denim) 14%, transparent));
  font-weight: 850;
}

.carolyn-home .word-cycle span:nth-child(2) {
  color: color-mix(in srgb, var(--accent) 72%, var(--text));
}

.carolyn-home .word-cycle span:nth-child(3) {
  color: var(--accent-3);
}

.carolyn-home .word-cycle span:nth-child(4) {
  color: color-mix(in srgb, var(--leaf) 68%, var(--text));
}

.carolyn-home .hero-summary {
  max-width: 560px;
  margin-top: clamp(18px, 2.2vw, 30px);
  color: color-mix(in srgb, var(--text) 66%, var(--muted));
  font-size: clamp(1rem, 1.12vw, 1.18rem);
  line-height: 1.58;
}

.carolyn-home .cl-work {
  position: relative;
  padding-top: clamp(26px, 3.8vw, 58px);
}

@media (max-width: 760px) {
  .carolyn-home {
    background-attachment: scroll, scroll;
    background-size: 20px 20px, 100% 100%;
  }

  .carolyn-home .cl-hero {
    padding-bottom: 18px;
  }

  .carolyn-home .cl-hero-grid {
    min-height: auto;
    padding-top: 58px;
    padding-bottom: 34px;
  }

  .carolyn-home .hero-kicker {
    font-size: 0.68rem;
    letter-spacing: 0.06em;
  }

  .carolyn-home .cl-hero-type h1 {
    max-width: 12ch;
    font-size: clamp(2.05rem, 10vw, 3.65rem);
  }

  .carolyn-home .cl-feel-nowrap {
    white-space: normal;
  }

  .carolyn-home .hero-summary {
    max-width: 33rem;
    font-size: 0.98rem;
  }
}

/* =========================================================
   2026-06-24 (Codex) - Homepage hybrid hero from sandbox.
   Keeps the site nav/header, replaces the intro hero with the
   kinetic text + drag-to-simplify board prototype.
   ========================================================= */
.carolyn-home {
  --home-hybrid-fun: #d6457a;
  --home-hybrid-fun-soft: #fbe0ea;
  --home-hybrid-cycle-active: #1c1c1c;
}

[data-theme="dark"] .carolyn-home {
  --home-hybrid-fun: #ff9ab6;
  --home-hybrid-fun-soft: #3a232c;
  --home-hybrid-cycle-active: #fbf0eb;
}

.carolyn-home .home-hybrid-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(600px, calc(100svh - var(--nav-h) - 42px), 760px);
  padding: clamp(52px, 7vh, 92px) 0 clamp(44px, 6vh, 82px);
  overflow: clip;
  isolation: isolate;
  container-type: inline-size;
}

.home-hybrid-mesh,
.home-hybrid-dots,
.home-hybrid-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.home-hybrid-mesh {
  z-index: 1;
  background:
    radial-gradient(58% 50% at 14% 12%, color-mix(in srgb, var(--blossom) 64%, transparent), transparent 60%),
    radial-gradient(54% 50% at 90% 18%, color-mix(in srgb, var(--denim-soft) 42%, transparent), transparent 60%),
    radial-gradient(60% 55% at 72% 98%, color-mix(in srgb, var(--cognac) 22%, transparent), transparent 60%);
  animation: home-mesh-drift 20s ease-in-out infinite alternate;
}

.home-hybrid-dots {
  z-index: 2;
  background-image: radial-gradient(color-mix(in srgb, var(--brown) 22%, transparent) 1.1px, transparent 1.2px);
  background-size: 24px 24px;
  opacity: 0.48;
}

[data-theme="dark"] .home-hybrid-dots {
  background-image: radial-gradient(color-mix(in srgb, var(--text) 16%, transparent) 1.1px, transparent 1.2px);
  opacity: 0.34;
}

.home-hybrid-glow {
  z-index: 3;
  background: radial-gradient(260px 260px at var(--mx, 24%) var(--my, 28%), color-mix(in srgb, var(--home-hybrid-fun) 26%, transparent), transparent 70%);
  transition: background 0.12s ease;
}

@keyframes home-mesh-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(0, -2.5%, 0) scale(1.06); }
}

.home-hybrid-wrap {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.96fr);
  gap: clamp(26px, 4vw, 64px);
  align-items: center;
}

.home-hybrid-left {
  display: grid;
  justify-items: start;
  max-width: 42rem;
}

.carolyn-home .home-hybrid-eyebrow {
  margin-bottom: clamp(14px, 1.8vw, 24px);
  color: var(--denim);
  font-size: clamp(0.78rem, 1.05vw, 1.05rem);
  letter-spacing: 0.2em;
  line-height: 1.4;
}

[data-theme="dark"] .carolyn-home .home-hybrid-eyebrow {
  color: var(--denim);
}

.home-hybrid-title {
  max-width: 13ch;
  margin: 0;
  color: var(--text);
  font-family: var(--grotesk);
  font-size: clamp(2.35rem, 4.3vw, 4.65rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: 0;
}

.home-hybrid-kn-word,
.home-hybrid-title .home-hybrid-kn-w {
  display: inline-block;
}

.home-hybrid-title .home-hybrid-kn-w {
  white-space: nowrap;
}

.home-hybrid-title .home-hybrid-kn-w span,
.home-hybrid-cycle-letter {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), color 0.2s ease;
}

.home-hybrid-tail {
  white-space: nowrap;
}

.home-hybrid-cycle {
  position: relative;
  display: inline-grid;
  min-width: 4.65em;
  height: 1.04em;
  overflow: hidden;
  color: var(--home-hybrid-fun);
  font-weight: 900;
  line-height: 1.02;
  vertical-align: -0.02em;
}

.home-hybrid-cycle-word {
  grid-area: 1 / 1;
  color: var(--home-hybrid-fun);
  opacity: 0;
  transform: translateY(1.08em) rotate(2deg);
  transform-origin: left bottom;
  /* Calmer pace: a word changes every 3s (was 2.2s) — 12s cycle / 4 words,
     so each word holds longer and the headline feels less busy. */
  animation: word-pop 12s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  white-space: nowrap;
}

.home-hybrid-cycle-word:nth-child(2) { animation-delay: 3s; }
.home-hybrid-cycle-word:nth-child(3) { animation-delay: 6s; }
.home-hybrid-cycle-word:nth-child(4) { animation-delay: 9s; }

.home-hybrid-cycle:hover .home-hybrid-cycle-letter {
  color: var(--home-hybrid-cycle-active);
}

.carolyn-home .home-hybrid-sub {
  max-width: 36rem;
  margin-top: clamp(20px, 2.6vw, 32px);
  color: color-mix(in srgb, var(--text) 68%, var(--muted));
  font-size: clamp(1rem, 1.45vw, 1.45rem);
  line-height: 1.46;
}

.home-hybrid-right {
  position: relative;
}

.home-hybrid-board {
  position: relative;
  --x: 12%;
  aspect-ratio: 16 / 9.4;
  overflow: visible;
  cursor: ew-resize;
  touch-action: none;
  user-select: none;
}

.home-hybrid-board-layer {
  position: absolute;
  inset: 0;
}

.home-hybrid-board-messy {
  clip-path: inset(-12% 0 -12% var(--x));
}

.home-hybrid-board-clean {
  clip-path: inset(-12% calc(100% - var(--x)) -12% 0);
}

.home-hybrid-tangle-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.home-hybrid-tangle-svg path {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: 0.55;
}

.home-hybrid-mini {
  position: absolute;
  padding: 6px 9px;
  border-radius: 5px;
  color: #3a2f2b;
  font-family: var(--grotesk);
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.2;
  white-space: nowrap;
  transform: rotate(var(--r, 0deg));
  box-shadow: 0 5px 12px rgba(53, 45, 44, 0.16);
}

.home-hybrid-mini--pink { background: #fbdce4; }
.home-hybrid-mini--blue { background: #cfe0f3; }
.home-hybrid-mini--cognac { background: #f3ddc2; }
.home-hybrid-mini--leaf { background: #e0edcb; }

.home-hybrid-question {
  position: absolute;
  color: var(--cognac);
  font-family: var(--display-font);
  font-size: 1.75rem;
  font-weight: 700;
  opacity: 0.5;
}

.home-hybrid-clean-flow {
  position: absolute;
  inset: 0;
}

.home-hybrid-arrow {
  position: absolute;
  top: 56%;
  right: 9%;
  left: 6%;
  height: 3px;
  border-radius: 2px;
  background: var(--denim);
  transform: translateY(-50%);
}

.home-hybrid-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -1px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid var(--denim);
  transform: translateY(-50%);
}

.home-hybrid-flow-label {
  position: absolute;
  top: calc(56% - 42px);
  left: var(--lx);
  color: var(--text);
  font-family: var(--grotesk);
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

.home-hybrid-flow-label::after {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  margin: 11px auto 0;
  border-radius: 50%;
  background: var(--denim);
  box-shadow: 0 0 0 4px var(--bg);
}

.home-hybrid-split {
  position: absolute;
  z-index: 7;
  top: -12%;
  bottom: -12%;
  left: var(--x);
  width: 2px;
  background: var(--home-hybrid-fun);
  transform: translateX(-1px);
}

.home-hybrid-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 3px solid var(--bg);
  border-radius: 50%;
  background: var(--home-hybrid-fun);
  color: #fff;
  box-shadow: 0 8px 22px rgba(53, 45, 44, 0.34);
  font-size: 1rem;
  transform: translate(-50%, -50%);
  transition: transform 0.12s ease;
}

.home-hybrid-handle:hover,
.home-hybrid-handle:focus-visible {
  transform: translate(-50%, -50%) scale(1.08);
}

.home-hybrid-handle:focus-visible {
  outline: 3px solid var(--denim);
  outline-offset: 3px;
}

.home-hybrid-board-tag {
  position: absolute;
  z-index: 6;
  top: -12%;
  padding: 3px 8px;
  border-radius: 6px;
  font-family: var(--grotesk);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  line-height: 1.25;
  text-transform: uppercase;
  transition: opacity 0.2s ease;
}

.home-hybrid-board-tag--clear {
  left: 0;
  color: color-mix(in srgb, var(--leaf) 76%, var(--text));
  background: color-mix(in srgb, var(--leaf) 16%, var(--bg));
}

.home-hybrid-board-tag--mess {
  right: 0;
  color: color-mix(in srgb, var(--cognac) 72%, var(--text));
  background: color-mix(in srgb, var(--cognac) 14%, var(--bg));
}

.home-hybrid-nudge {
  position: absolute;
  z-index: 7;
  top: 50%;
  left: var(--x);
  color: var(--home-hybrid-fun);
  font-family: var(--grotesk);
  font-size: 0.75rem;
  font-weight: 750;
  white-space: nowrap;
  pointer-events: none;
  /* Static — no continuous bob. The board still auto-demos once on load
     (bindHomeMotion autoplay); after that "drag →" just sits still to keep
     the homepage calm (fewer moving things). */
  transform: translate(30px, -50%);
}

.home-hybrid-board.is-touched .home-hybrid-nudge {
  opacity: 0;
}

@container (max-width: 860px) {
  .home-hybrid-wrap {
    grid-template-columns: 1fr;
    gap: clamp(18px, 4vw, 28px);
  }

  .home-hybrid-left {
    max-width: 100%;
    order: 1;
  }

  .home-hybrid-title {
    max-width: 12.5ch;
    font-size: clamp(2.25rem, 9.5vw, 4.1rem);
  }

  .home-hybrid-right {
    order: 3;
    width: 100%;
    justify-self: stretch;      /* full width when stacked */
    margin-top: clamp(18px, 4vw, 30px);  /* clear the invite's CLARITY tag */
  }

  .home-hybrid-board {
    /* full width, but a controlled height (not tied to width) so it stays a
       comfortable band instead of getting tall on wider tablets */
    aspect-ratio: auto;
    height: clamp(250px, 42vw, 320px);
  }

  .home-hybrid-handle {
    width: 38px;
    height: 38px;
    font-size: 0.9rem;
  }
}

@container (max-width: 520px) {
  .carolyn-home .home-hybrid-hero {
    min-height: auto;
    padding-top: 44px;
  }

  .carolyn-home .home-hybrid-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.14em;
  }

  .home-hybrid-title {
    font-size: clamp(2.2rem, 13vw, 3.55rem);
  }

  .carolyn-home .home-hybrid-sub {
    font-size: 1rem;
  }

  .home-hybrid-mini {
    padding: 5px 7px;
    font-size: 0.62rem;
  }

  .home-hybrid-flow-label {
    font-size: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-hybrid-mesh,
  .home-hybrid-cycle-word {
    animation: none;
  }

  .home-hybrid-cycle-word {
    opacity: 0;
    transform: none;
  }

  .home-hybrid-cycle-word:first-child {
    opacity: 1;
  }
}

/* =========================================================
   2026-06-24 (Codex) - Homepage canvas continuity polish.
   Carries the same soft dotted canvas behind the sticky nav and
   work page, while keeping kinetic pointer effects scoped to hero.
   ========================================================= */
.site-shell:has(.carolyn-home) {
  background-color: var(--bg);
  background-image:
    radial-gradient(var(--grid-line) 1.05px, transparent 1.2px),
    radial-gradient(58% 50% at 14% 18%, color-mix(in srgb, var(--blossom) 50%, transparent), transparent 62%),
    radial-gradient(54% 50% at 92% 18%, color-mix(in srgb, var(--denim-soft) 34%, transparent), transparent 62%),
    radial-gradient(60% 55% at 72% 88%, color-mix(in srgb, var(--cognac) 16%, transparent), transparent 64%),
    linear-gradient(142deg,
      color-mix(in srgb, var(--blossom-soft) 82%, var(--bg)) 0%,
      var(--bg) 42%,
      color-mix(in srgb, var(--denim-soft) 12%, var(--bg)) 73%,
      color-mix(in srgb, var(--leaf) 10%, var(--bg)) 100%);
  background-size: 24px 24px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed, fixed, fixed, fixed, fixed;
}

[data-theme="dark"] .site-shell:has(.carolyn-home) {
  background-image:
    radial-gradient(var(--grid-line) 1.05px, transparent 1.2px),
    radial-gradient(58% 50% at 14% 18%, color-mix(in srgb, var(--blossom) 20%, transparent), transparent 62%),
    radial-gradient(54% 50% at 92% 18%, color-mix(in srgb, var(--denim-soft) 22%, transparent), transparent 62%),
    radial-gradient(60% 55% at 72% 88%, color-mix(in srgb, var(--cognac) 12%, transparent), transparent 64%),
    linear-gradient(142deg,
      color-mix(in srgb, var(--surface-2) 74%, var(--bg)) 0%,
      var(--bg) 46%,
      color-mix(in srgb, var(--denim-soft) 13%, var(--bg)) 78%,
      color-mix(in srgb, var(--leaf) 9%, var(--bg)) 100%);
}

.site-shell:has(.carolyn-home) .site-header:not(.is-scrolled) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.site-shell:has(.carolyn-home) .carolyn-home {
  background: transparent;
  background-image: none;
  background-attachment: scroll;
}

.site-shell:has(.carolyn-home) .home-hybrid-mesh,
.site-shell:has(.carolyn-home) .home-hybrid-dots {
  display: none;
}

@media (max-width: 760px) {
  .site-shell:has(.carolyn-home) {
    background-attachment: scroll, scroll, scroll, scroll, scroll;
    background-size: 20px 20px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  }
}

/* =========================================================
   2026-06-25 (Codex) - About lower sections copied from
   about-sections-lab.html.
   ========================================================= */
.about-page .ai-sec,
.about-page .tm-sec {
  --fun-ink: #d23163;
  --ok: #0f7a4e;
  --ok-soft: #e6f5ee;
  position: relative;
  overflow: hidden;
  padding: clamp(38px, 6vh, 70px) 0 clamp(34px, 5vh, 62px);
}

[data-theme="dark"] .about-page .ai-sec,
[data-theme="dark"] .about-page .tm-sec {
  --fun-ink: #ff9ab6;
  --ok: #57c89a;
  --ok-soft: rgba(31, 143, 99, 0.2);
}

.about-page .ai-sec .dots,
.about-page .tm-sec .dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(color-mix(in srgb, var(--brown) 20%, transparent) 1.1px, transparent 1.2px);
  background-size: 24px 24px;
  opacity: 0.4;
  pointer-events: none;
}

.about-page .ai-sec .blob,
.about-page .tm-sec .blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(54px);
  opacity: 0.42;
  pointer-events: none;
}

.about-page .ai-sec .wrap,
.about-page .tm-sec .wrap {
  position: relative;
  z-index: 5;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

.about-page .ai-sec .eyebrow,
.about-page .tm-sec .eyebrow {
  margin: 0 0 14px;
  color: var(--denim);
  font-family: var(--grotesk);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

[data-theme="dark"] .about-page .ai-sec .eyebrow,
[data-theme="dark"] .about-page .tm-sec .eyebrow {
  color: #a7c4ec;
}

.about-page .ai-sec .sec-head,
.about-page .tm-sec .sec-head {
  max-width: min(900px, 82vw);
  margin-bottom: clamp(22px, 3.5vh, 38px);
}

.about-page .ai-sec .sec-head h2,
.about-page .tm-sec .sec-head h2 {
  max-width: 26ch;
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.02em;
}

.about-page .ai-sec .sec-head h2 .u,
.about-page .tm-sec .sec-head h2 .u {
  padding: 0 0.06em;
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--fun) 34%, transparent) 58%);
}

.about-page .ai-sec .sec-head p:not(.eyebrow),
.about-page .tm-sec .sec-head p:not(.eyebrow) {
  max-width: 74ch;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 1.55;
}

.about-page .ai-sec .sticky,
.about-page .tm-sec .sticky {
  position: absolute;
  z-index: 5;
  width: 172px;
  border-radius: 5px;
  padding: 14px 14px 16px;
  color: #3a2f2b;
  font-family: var(--grotesk);
  font-size: 13.5px;
  line-height: 1.4;
  user-select: none;
  touch-action: none;
  cursor: grab;
  box-shadow: 0 12px 26px rgba(53, 45, 44, 0.18);
  transform: rotate(var(--r, -2deg));
  transition: box-shadow 0.2s, outline-color 0.2s;
}

.about-page .ai-sec .sticky:active,
.about-page .tm-sec .sticky:active {
  cursor: grabbing;
}

.about-page .ai-sec .sticky b,
.about-page .tm-sec .sticky b {
  display: block;
  margin-bottom: 5px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.55;
}

.about-page .ai-sec .s-pink,
.about-page .tm-sec .s-pink { background: #fbdce4; }
.about-page .ai-sec .s-blue,
.about-page .tm-sec .s-blue { background: #cfe0f3; }
.about-page .ai-sec .s-cognac,
.about-page .tm-sec .s-cognac { background: #f3ddc2; }
.about-page .ai-sec .s-leaf,
.about-page .tm-sec .s-leaf { background: #e0edcb; }

.about-page .ai-sec .board-svg {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.about-page .ai-sec .board-svg path {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 1 9;
  opacity: 0.7;
}

.about-page .ai-sec .board-svg path.live {
  stroke: var(--live-color, var(--fun));
  stroke-width: 2.8;
  stroke-dasharray: none;
  opacity: 0.95;
}

.about-page .ai-sec .demo-hand {
  position: absolute;
  z-index: 30;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 3px solid var(--surface);
  border-radius: 50%;
  background: var(--fun);
  box-shadow: 0 10px 22px rgba(53, 45, 44, 0.34);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.about-page .ai-sec .demo-hand.on {
  opacity: 1;
}

.about-page .ai-sec .demo-hand svg {
  display: block;
  width: 17px;
  height: 17px;
}

.about-page .ai-sec .hint,
.about-page .tm-sec .hint {
  margin: 18px 0 0;
  color: var(--muted);
  font-family: var(--grotesk);
  font-size: 12.5px;
}

.about-page .ai-sec .cursors {
  position: absolute;
  inset: 0;
  z-index: 25;
  overflow: hidden;
  pointer-events: none;
}

.about-page .ai-sec .curs {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 2px;
  align-items: flex-start;
  will-change: transform;
}

.about-page .ai-sec .curs svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  transform: rotate(-8deg);
}

.about-page .ai-sec .curs span {
  margin-top: 10px;
  border-radius: 999px;
  padding: 4px 12px 5px;
  background: var(--cursor-color);
  color: #fff;
  font-family: -apple-system, "SF Pro Text", BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(53, 45, 44, 0.14);
}

.about-page .ai-sec .blob.b1 {
  top: -8vw;
  left: -10vw;
  width: 40vw;
  height: 40vw;
  background: var(--blossom);
}

.about-page .ai-sec .blob.b2 {
  right: -8vw;
  bottom: -12vw;
  width: 34vw;
  height: 34vw;
  background: var(--denim-soft);
}

.about-page .ai-board {
  --cluster-h: min(340px, 38vh);
  --cluster-top: 0%;
  --live-color: var(--fun);
  position: relative;
  z-index: 4;
  min-height: clamp(390px, 48vh, 520px);
}

.about-page .ai-steps-stack {
  position: absolute;
  top: var(--cluster-top);
  left: 0;
  z-index: 6;
  width: min(46%, 490px);
  height: var(--cluster-h);
}

.about-page .ai-sec .step {
  --step-accent: var(--fun);
  position: absolute;
  z-index: 5;
  width: clamp(142px, 15vw, 176px);
  border-radius: 5px;
  padding: 12px 13px 14px;
  color: #3a2f2b;
  font-family: var(--grotesk);
  user-select: none;
  touch-action: none;
  cursor: grab;
  box-shadow: 0 10px 22px rgba(53, 45, 44, 0.14);
  transform: rotate(var(--r, -2deg));
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.22s;
}

.about-page .ai-sec .step.s-pink { --step-accent: var(--fun); }
.about-page .ai-sec .step.s-blue { --step-accent: var(--denim); }
.about-page .ai-sec .step.s-cognac { --step-accent: var(--cognac); }
.about-page .ai-sec .step.s-leaf { --step-accent: var(--leaf); }

.about-page .ai-sec .step .n {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  margin-bottom: 7px;
  border-radius: 50%;
  background: rgba(58, 47, 43, 0.14);
  font-size: 10.5px;
  font-weight: 700;
}

.about-page .ai-sec .step .nm {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.about-page .ai-sec .step .eb {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.3;
  opacity: 0.62;
}

.about-page .ai-sec .step.is-active {
  z-index: 8;
  box-shadow: 0 0 0 3.5px var(--step-accent), 0 22px 40px rgba(53, 45, 44, 0.26);
  transform: rotate(0deg) translateY(-2px) scale(1.03);
}

.about-page .ai-sec .step:active {
  cursor: grabbing;
}

.about-page .ai-card {
  position: absolute;
  z-index: 7;
  width: clamp(300px, 34vw, 390px);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 17px 18px 16px;
  background: var(--surface);
  box-shadow: 0 18px 38px rgba(53, 45, 44, 0.17);
  transform: translateY(-50%);
}

.about-page .ai-card .tone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-radius: 16px 16px 0 0;
  background: var(--fun);
  transition: background 0.3s;
}

.about-page .ai-card .ce {
  margin: 0 0 5px;
  color: var(--fun-ink);
  font-family: var(--grotesk);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.about-page .ai-card h3 {
  margin: 0 0 7px;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.01em;
}

.about-page .ai-card .cb {
  display: block;
  margin-bottom: 11px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.about-page .ai-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.about-page .ai-split > div {
  border-radius: 11px;
  padding: 9px 10px;
}

.about-page .ai-split .h {
  border: 1px solid color-mix(in srgb, var(--denim) 26%, transparent);
  background: color-mix(in srgb, var(--denim) 12%, var(--surface));
}

.about-page .ai-split .o {
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
  background: var(--ok-soft);
}

.about-page .ai-split small {
  display: block;
  margin-bottom: 4px;
  font-family: var(--grotesk);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.about-page .ai-split .h small { color: var(--denim); }
.about-page .ai-split .o small { color: var(--ok); }
[data-theme="dark"] .about-page .ai-split .h small { color: #a7c4ec; }
[data-theme="dark"] .about-page .ai-split .o small { color: #57c89a; }

.about-page .ai-split strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.about-page .tm-sec {
  background: color-mix(in srgb, var(--blossom-soft) 60%, var(--bg));
}

[data-theme="dark"] .about-page .tm-sec {
  background: color-mix(in srgb, var(--surface-2) 40%, var(--bg));
}

.about-page .tm-sec .blob.b1 {
  top: -8vw;
  right: -10vw;
  width: 36vw;
  height: 36vw;
  background: var(--blossom);
}

.about-page .tm-board {
  position: relative;
  z-index: 4;
}

.about-page .tm-toggle {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px;
  background: var(--surface);
  box-shadow: 0 8px 22px rgba(53, 45, 44, 0.1);
}

.about-page .tm-toggle button {
  border: 0;
  border-radius: 999px;
  padding: 7px 16px;
  background: none;
  color: var(--muted);
  font-family: var(--grotesk);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.25s;
}

.about-page .tm-toggle button.is-active {
  background: var(--fun);
  color: #fff;
}

[data-theme="dark"] .about-page .tm-toggle button.is-active {
  color: #1a0f14;
}

.about-page .tm-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.58fr);
  gap: clamp(18px, 3vw, 36px);
  align-items: center;
}

.about-page .tm-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-page .tm-bar {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--surface);
  box-shadow: 0 7px 16px rgba(53, 45, 44, 0.07);
}

.about-page .tm-bar .row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.about-page .tm-bar .lb {
  color: var(--text);
  font-family: var(--grotesk);
  font-size: 13px;
  font-weight: 600;
}

.about-page .tm-bar .vl {
  color: var(--fun-ink);
  font-family: var(--grotesk);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.about-page .tm-track {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 50%, transparent);
  overflow: hidden;
}

.about-page .tm-track i {
  display: block;
  width: var(--value, 0%);
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cognac), var(--fun));
  transition: width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.about-page .tm-bar.gain .vl {
  color: var(--ok);
}

[data-theme="dark"] .about-page .tm-bar.gain .vl {
  color: #57c89a;
}

.about-page .tm-bar.gain .tm-track i {
  background: linear-gradient(90deg, var(--leaf), var(--ok));
}

.about-page .tm-side {
  position: relative;
  display: grid;
  gap: 12px;
  align-self: center;
}

.about-page .tm-side h3 {
  margin: 0 0 6px;
  font-size: clamp(1.18rem, 2vw, 1.45rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -0.01em;
  transition: opacity 0.3s;
}

.about-page .tm-side p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.about-page .tm-quip {
  position: relative !important;
  top: auto;
  right: auto;
  z-index: 6;
  justify-self: start;
  width: min(100%, 250px) !important;
  margin: 0 0 2px;
  transform: rotate(2deg) !important;
}

.about-page .tm-readout {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent);
  border-radius: 999px;
  padding: 6px 12px;
  background: var(--ok-soft);
  color: var(--ok);
  font-family: var(--grotesk);
  font-size: 12px;
  font-weight: 700;
}

[data-theme="dark"] .about-page .tm-readout {
  color: #57c89a;
}

@media (max-width: 900px) {
  .about-page .ai-sec .cursors {
    display: none;
  }

  .about-page .ai-sec .sec-head {
    max-width: none;
    margin-bottom: 28px;
  }

  .about-page .ai-sec .sec-head h2 {
    max-width: 18ch;
    font-size: clamp(1.9rem, 10vw, 3rem);
  }

  .about-page .ai-board {
    display: flex;
    min-height: 0;
    flex-direction: column;
    gap: 14px;
  }

  .about-page .ai-steps-stack {
    position: static;
    display: flex;
    width: auto;
    height: auto;
    flex-wrap: wrap;
    gap: 10px;
  }

  .about-page .ai-board .board-svg,
  .about-page .ai-board .demo-hand {
    display: none;
  }

  .about-page .ai-sec .step {
    position: static !important;
    width: calc(50% - 5px);
    transform: none !important;
  }

  .about-page .ai-card {
    /* relative (not static) keeps the card in the normal stacked flow but stays a
       positioning context for its child .tone accent bar (position:absolute; top:0).
       With static the bar detached and floated to the top of .ai-board as a stray
       full-width line above the steps. BUT relative honors the desktop inline
       offsets JS sets (right:14%; top:calc(...)) that static ignored — so reset them
       with inset:auto!important (beats the non-important inline style) to keep the
       card full-width in flow, not shifted left. */
    position: relative !important;
    inset: auto !important;
    width: 100%;
    /* desktop centres the card with translateY(-50%); in the stacked mobile flow
       that pulls it up ~100px over the 2nd row of steps. Reset it so the card sits
       cleanly BELOW the steps. */
    transform: none;
    margin-top: 4px;
  }

  .about-page .tm-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .about-page .tm-quip {
    position: static;
    margin-bottom: 12px;
  }
}

@media (max-width: 480px) {
  .about-page .ai-sec .step {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-page .tm-track i,
  .about-page .ai-sec .step {
    transition: none;
  }
}

/* =========================================================
   2026-06-25 (Codex) - About continuous canvas.
   One dotted, softly washed background spans nav + all About
   sections; section-local backgrounds/dots/blobs are removed.
   ========================================================= */
.site-shell:has(.about-page) {
  background-color: var(--bg);
  background-image:
    radial-gradient(var(--grid-line) 1.05px, transparent 1.2px),
    radial-gradient(58% 50% at 13% 16%, color-mix(in srgb, var(--blossom) 42%, transparent), transparent 62%),
    radial-gradient(52% 48% at 91% 12%, color-mix(in srgb, var(--denim-soft) 28%, transparent), transparent 62%),
    radial-gradient(58% 54% at 78% 82%, color-mix(in srgb, var(--cognac) 12%, transparent), transparent 64%),
    linear-gradient(142deg,
      color-mix(in srgb, var(--blossom-soft) 78%, var(--bg)) 0%,
      var(--bg) 42%,
      color-mix(in srgb, var(--denim-soft) 10%, var(--bg)) 74%,
      color-mix(in srgb, var(--leaf) 8%, var(--bg)) 100%);
  background-size: 24px 24px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed, fixed, fixed, fixed, fixed;
}

[data-theme="dark"] .site-shell:has(.about-page) {
  background-image:
    radial-gradient(var(--grid-line) 1.05px, transparent 1.2px),
    radial-gradient(58% 50% at 13% 16%, color-mix(in srgb, var(--blossom) 18%, transparent), transparent 62%),
    radial-gradient(52% 48% at 91% 12%, color-mix(in srgb, var(--denim-soft) 20%, transparent), transparent 62%),
    radial-gradient(58% 54% at 78% 82%, color-mix(in srgb, var(--cognac) 10%, transparent), transparent 64%),
    linear-gradient(142deg,
      color-mix(in srgb, var(--surface-2) 76%, var(--bg)) 0%,
      var(--bg) 46%,
      color-mix(in srgb, var(--denim-soft) 11%, var(--bg)) 78%,
      color-mix(in srgb, var(--leaf) 8%, var(--bg)) 100%);
}

.site-shell:has(.about-page) .site-header:not(.is-scrolled) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}

.site-shell:has(.about-page) .about-page,
.site-shell:has(.about-page) .about-page .intro,
.site-shell:has(.about-page) .about-page .v-hyb,
.site-shell:has(.about-page) .about-page .ai-sec,
.site-shell:has(.about-page) .about-page .tm-sec {
  background: transparent;
  background-image: none;
}

.site-shell:has(.about-page) .about-page .dots,
.site-shell:has(.about-page) .about-page .blob {
  display: none;
}

@media (max-width: 760px) {
  .site-shell:has(.about-page) {
    background-attachment: scroll, scroll, scroll, scroll, scroll;
    background-size: 20px 20px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  }
}

/* ============================================================
   2026-06-25 (Claude) — Homepage "making-of" invite cursor
   A FigJam multiplayer-style cursor (matches the About intro):
   it travels in from above showing "✨✨", then human-types the
   invite line with a caret. Motion is driven by bindHomeMotion().
   Pointer is anchored at the lower-left; the pill grows rightward
   as it types. Links to the making-of page.
   ============================================================ */
.home-invite {
  --invite-pill: #cf2f61;            /* AA: white text ≥4.5:1 (a hair darker than the
                                        About cursor's #d6457a so the typed line passes) */
  --invite-on: #ffffff;
  grid-column: 1;                     /* under the text column... */
  grid-row: 2;                        /* ...its own row below the headline/subtext */
  justify-self: start;                /* pointer anchored lower-left; pill grows right */
  align-self: start;
  margin-top: clamp(6px, 1.5vh, 22px);
  display: inline-flex;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
  position: relative;
  max-width: 100%;
  will-change: transform;             /* JS animates transform for the travel + idle drift */
}
[data-theme="dark"] .home-invite {
  --invite-pill: #ff9ab6;
  --invite-on: #1a0f14;
}
.home-invite-pointer {
  flex: 0 0 auto;
}
.home-invite-pointer svg {
  display: block;
  width: 23px;
  height: 23px;
  transform: rotate(-8deg);
  filter: drop-shadow(0 2px 4px rgba(53, 45, 44, 0.18));
}
.home-invite-pill {
  margin-top: 10px;
  padding: 5px 13px 6px;
  border-radius: 999px;
  background: var(--invite-pill);
  box-shadow: 0 2px 6px rgba(53, 45, 44, 0.16);
  transition: box-shadow 0.2s ease;
}
.home-invite-msg,
.home-invite-caret {
  /* deliberate OS-cursor styling to match the About intro cursors */
  font-family: -apple-system, "SF Pro Text", BlinkMacSystemFont, "Segoe UI", var(--grotesk), sans-serif;
}
.home-invite-msg {
  font-weight: 700;
  font-size: 12.8px;
  line-height: 1.32;
  letter-spacing: 0.004em;
  color: var(--invite-on);
  white-space: nowrap;
}
.home-invite-caret {
  display: inline-block;
  width: 2px;
  height: 1.02em;
  margin-left: 1.5px;
  vertical-align: -0.16em;
  border-radius: 1px;
  background: currentColor;
  color: var(--invite-on);
  opacity: 0;
}
.home-invite-caret.is-on { animation: inviteCaret 1.02s steps(1) infinite; }
@keyframes inviteCaret { 0%, 49% { opacity: 0.92; } 50%, 100% { opacity: 0; } }

.home-invite:hover .home-invite-pill { box-shadow: 0 8px 20px rgba(53, 45, 44, 0.26); }
.home-invite:focus-visible { outline: none; }
.home-invite:focus-visible .home-invite-pill { outline: 3px solid var(--denim); outline-offset: 3px; }

/* CTA emphasis: underline the "read the making-of" link, nudge the arrow, and pulse
   the pill a couple of times once the line finishes typing so the click is obvious. */
.home-invite-link {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2.5px;
  text-decoration-color: color-mix(in srgb, var(--invite-on) 78%, transparent);
}
.home-invite-arrow { display: inline-block; transition: transform 0.2s ease; }
.home-invite:hover .home-invite-arrow { transform: translateX(3px); }
/* Gentle beacon: pulses continuously until clicked (clicking navigates away),
   slightly slower than before so it's noticed but not distracting; it settles
   while hovered/focused (you're about to click it anyway). */
.home-invite.is-ready .home-invite-pill { animation: invitePulse 2.1s ease-in-out infinite; }
.home-invite:hover .home-invite-pill,
.home-invite:focus-visible .home-invite-pill { animation-play-state: paused; }
@keyframes invitePulse {
  0% { box-shadow: 0 2px 6px rgba(53, 45, 44, 0.16), 0 0 0 0 color-mix(in srgb, var(--invite-pill) 46%, transparent); }
  55% { box-shadow: 0 5px 14px rgba(53, 45, 44, 0.22), 0 0 0 9px transparent; }
  100% { box-shadow: 0 2px 6px rgba(53, 45, 44, 0.16), 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .home-invite.is-ready .home-invite-pill { animation: none; }
}

/* When the hero stacks (container ≤860px), drop the explicit grid placement
   so the invite flows naturally and left-aligns. Must live AFTER the base
   .home-invite rule to win the source-order tie. Animation is disabled here
   and under reduced-motion (JS shows the final line statically instead). */
@container (max-width: 860px) {
  .home-invite {
    grid-column: auto;
    grid-row: auto;
    order: 2;                                /* stacked order: text → invite → board */
    margin-top: clamp(14px, 3vw, 22px);
  }
  .home-invite-msg { white-space: normal; max-width: min(100%, 22rem); }
}

/* ============================================================
   2026-06-25 (Claude) — NAV BAR: single source of truth.
   Behaviour (every page, both themes):
   • Top of page → header is fully transparent so the page
     gradient flows into the nav (no cut-off, no bar).
   • After ANY scroll (.is-scrolled) → frosted bar: translucent
     --bg + blur (set on .site-header.is-scrolled above; the
     per-page :has() rules only strip the bar at the TOP via
     :not(.is-scrolled), so scroll-frost is consistent now).
   • Hamburger (≤760px): the OPEN dropdown is ALWAYS the same
     frosted, readable panel — no transparent dead-zone, no
     opaque slab. Hamburger shows ≤760px; desktop nav ≥761px.
   This block is last in the cascade so it is authoritative.
   ============================================================ */
@media (max-width: 760px) {
  .site-header .nav-links.is-open {
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    backdrop-filter: blur(20px) saturate(1.2);
    border: 0;
    box-shadow: 0 18px 42px color-mix(in srgb, var(--brown) 12%, transparent);
  }

  /* Links stay high-contrast against the frosted panel in both themes. */
  .site-header .nav-links.is-open a {
    color: var(--text);
  }
  .site-header .nav-links.is-open a.is-active {
    color: var(--denim);
  }
}

/* Fallback for browsers without backdrop-filter: make the scrolled
   bar and open dropdown opaque enough to stay readable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled {
    background: color-mix(in srgb, var(--bg) 94%, transparent);
  }
  @media (max-width: 760px) {
    .site-header .nav-links.is-open {
      background: color-mix(in srgb, var(--bg) 97%, transparent);
    }
  }
}

/* ============================================================
   2026-06-25 (Claude) — "Making-of" page (#/making-of)
   The story of how this site was built (Claude + Codex relay).
   FigJam/sticky language; --fun pink + denim; AA both themes.
   ============================================================ */
.mk-page {
  position: relative;
  isolation: isolate;
  --mk-pink: #cf2f61;          /* solid cursor-pill pink — white text 4.96:1 */
  --mk-blue: #355f8c;          /* solid cursor-pill denim — white text ≥4.5:1 */
  --mk-hl: #d6457a;            /* highlighter tint (theme-aware) */
  --mk-pink-text: #cf2f61;     /* pink as readable text (theme-aware) */
  --mk-blue-text: #355f8c;     /* denim as readable text (theme-aware) */
  --mk-warn-text: #855a0a;     /* amber warning text (theme-aware) */
}
[data-theme="dark"] .mk-page { --mk-hl: #ff9ab6; --mk-pink-text: #ff9ab6; --mk-blue-text: #8eadd6; --mk-warn-text: #e0ac4f; }

/* ONE continuous flowy gradient + dot canvas behind every section (no per-section cut-offs) */
.mk-page::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(46% 24% at 14% 2%, color-mix(in srgb, var(--blossom) 62%, transparent), transparent 72%),
    radial-gradient(42% 22% at 88% 11%, color-mix(in srgb, var(--denim-soft) 50%, transparent), transparent 74%),
    radial-gradient(50% 22% at 5% 30%, color-mix(in srgb, var(--blossom) 44%, transparent), transparent 74%),
    radial-gradient(46% 22% at 97% 47%, color-mix(in srgb, var(--denim-soft) 44%, transparent), transparent 74%),
    radial-gradient(52% 24% at 16% 64%, color-mix(in srgb, var(--blossom) 42%, transparent), transparent 76%),
    radial-gradient(50% 24% at 92% 82%, color-mix(in srgb, var(--denim-soft) 42%, transparent), transparent 76%),
    radial-gradient(60% 26% at 40% 99%, color-mix(in srgb, var(--blossom) 38%, transparent), transparent 78%); }
[data-theme="dark"] .mk-page::before { opacity: 0.5; }
.mk-page::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--brown) 18%, transparent) 1.1px, transparent 1.2px);
  background-size: 24px 24px; opacity: 0.4; }

.mk-sec { position: relative; padding: clamp(48px, 8vh, 96px) 0; }
.mk-hero { padding-top: clamp(72px, 12vh, 132px); }
/* per-section blobs/dots replaced by the continuous page canvas above */
.mk-dots, .mk-blob { display: none; }
[data-theme="dark"] .mk-blob { opacity: 0.16; }

.mk-wrap { position: relative; z-index: 5; width: min(1080px, calc(100% - 44px)); margin-inline: auto; }
.mk-eyebrow { font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.8rem; font-weight: 600; color: var(--denim); margin-bottom: 14px; }
[data-theme="dark"] .mk-eyebrow { color: #a7c4ec; }
.mk-h1 { font-family: var(--grotesk); font-weight: 800; font-size: clamp(2.1rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.02em; max-width: 18ch; }
.mk-lede { margin-top: 18px; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--muted); max-width: 60ch; }
.mk-lede b { color: var(--text); font-weight: 700; }
.mk-head { max-width: 64ch; margin-bottom: clamp(26px, 4vw, 44px); }
.mk-head h2 { font-family: var(--grotesk); font-weight: 800; font-size: clamp(1.7rem, 3.6vw, 2.7rem); line-height: 1.06; letter-spacing: -0.02em; }
.mk-head p { margin-top: 12px; font-size: clamp(0.98rem, 1.4vw, 1.12rem); line-height: 1.55; color: var(--muted); }
.mk-head p b, .mk-head--climax p b { color: var(--text); font-weight: 700; }
.mk-head--climax h2 { font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
.mk-u { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--mk-hl) 34%, transparent) 58%); padding: 0 0.06em; }

/* cursor pills (match About/home cursors) */
.mk-curs { display: inline-flex; align-items: flex-start; gap: 2px; }
.mk-curs svg { width: 22px; height: 22px; flex: 0 0 auto; transform: rotate(-8deg); filter: drop-shadow(0 2px 4px rgba(53,45,44,0.18)); }
.mk-curs > span { margin-top: 9px; font-family: -apple-system, "SF Pro Text", BlinkMacSystemFont, "Segoe UI", var(--grotesk), sans-serif; font-weight: 700; font-size: 12.5px; color: #fff; padding: 4px 12px 5px; border-radius: 999px; white-space: nowrap; box-shadow: 0 2px 6px rgba(53,45,44,0.16); }
.mk-curs--pink > span { background: var(--mk-pink); }
.mk-curs--blue > span { background: var(--mk-blue); }

/* ---- 01 relay (model states) ---- */
.mk-relay { background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 3vw, 32px); backdrop-filter: blur(10px); box-shadow: 0 18px 44px rgba(53,45,44,0.12); }
.mk-stage { position: relative; display: flex; align-items: center; justify-content: space-between; gap: clamp(8px, 2vw, 20px); min-height: 168px; }
.mk-model { display: flex; flex-direction: column; align-items: center; gap: 9px; flex: 0 0 auto; z-index: 2; }
.mk-model-name { font-family: var(--grotesk); font-weight: 700; font-size: 0.9rem; color: var(--text); }
.mk-relay-mid { position: relative; flex: 1 1 auto; align-self: stretch; }
/* the codebase is the hub — it sits ON the connector so the line reads as
   Claude … [one codebase] … Codex (the models only talk through the code) */
.mk-codebase-mini { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; font-family: var(--grotesk); font-size: 0.72rem; color: color-mix(in srgb, var(--text) 66%, var(--muted)); background: var(--surface); border: 1px dashed color-mix(in srgb, var(--denim) 44%, transparent); border-radius: 10px; padding: 5px 11px; white-space: nowrap; box-shadow: 0 0 0 5px var(--surface); }
/* dotted connector (About-page sticky style); the chip masks the middle */
.mk-link { position: absolute; left: 13%; right: 13%; top: 50%; height: 3px; z-index: 0; pointer-events: none; opacity: 0.7; transform: translateY(-50%);
  background-image: radial-gradient(circle, var(--line-strong) 1.4px, transparent 1.7px); background-size: 11px 3px; background-repeat: repeat-x; background-position: left center; }
@keyframes mkLinkFlow { to { background-position-x: 11px; } }
.mk-relay[data-state="claude-handoff"] .mk-link,
.mk-relay[data-state="codex-receiving"] .mk-link { animation: mkLinkFlow 0.6s linear infinite; opacity: 0.95; }
.mk-relay[data-state="codex-handoff"] .mk-link { animation: mkLinkFlow 0.6s linear infinite reverse; opacity: 0.95; }

/* model marks (aesthetic adaptations) */
.mk-mark { width: clamp(60px, 8.5vw, 92px); height: auto; display: block; overflow: visible; opacity: 0.4; transition: opacity 0.45s ease, transform 0.45s ease; }
.mk-rays, .mk-petals { transform-origin: 50% 50%; }
.mk-rays line { stroke: var(--mk-pink); stroke-width: 6; stroke-linecap: round; }
.mk-petals ellipse { fill: none; stroke: var(--mk-blue); stroke-width: 5; }
.mk-core { fill: var(--mk-pink); }
.mk-core--blue { fill: var(--mk-blue); }
.mk-relay[data-state^="claude"] .mk-mark--claude,
.mk-relay[data-state^="codex"] .mk-mark--codex { opacity: 1; transform: scale(1.08); }

/* working = continuous spin; handoff = gentle throb; receive = quick spin-in */
@keyframes mkSpin { to { transform: rotate(360deg); } }
@keyframes mkThrob { 0%,100% { transform: scale(1.08); } 50% { transform: scale(1.16); } }
@keyframes mkFlicker { 0%,100% { opacity: 1; } 60% { opacity: 0.72; } }
.mk-relay[data-state="claude-working"] .mk-mark--claude .mk-rays { animation: mkSpin 11s linear infinite; }
.mk-relay[data-state="codex-working"] .mk-mark--codex .mk-petals { animation: mkSpin 16s linear infinite; }
.mk-relay[data-state="claude-handoff"] .mk-mark--claude,
.mk-relay[data-state="codex-handoff"] .mk-mark--codex { animation: mkThrob 1.4s ease-in-out infinite; }
.mk-relay[data-state="codex-receiving"] .mk-mark--codex .mk-petals { animation: mkSpin 2.6s ease-in-out; }
.mk-relay[data-state="claude-low"] .mk-mark--claude { animation: mkFlicker 1.7s ease-in-out infinite; }

/* claude "running low" context meter */
.mk-meter { display: none; width: 64px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--text) 14%, transparent); overflow: hidden; }
.mk-meter i { display: block; height: 100%; width: 34%; border-radius: 999px; background: var(--warn, #855a0a); }
[data-theme="dark"] .mk-meter i { background: #e0ac4f; }
.mk-relay[data-state="claude-low"] .mk-meter { display: block; }
.mk-relay[data-state="claude-low"] .mk-meter i { animation: mkDrain 1.7s ease-in-out infinite; }
@keyframes mkDrain { 0% { width: 34%; } 55% { width: 11%; } 100% { width: 34%; } }

/* handoff doc — only visible while writing / receiving */
.mk-doc { position: absolute; top: 38%; left: 50%; width: 60px; transform: translate(-50%,-50%) scale(0.5); opacity: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 9px 8px 10px; box-shadow: 0 10px 24px rgba(53,45,44,0.2); transition: left 0.55s cubic-bezier(0.4,0,0.2,1), transform 0.45s ease, opacity 0.35s ease; z-index: 3; pointer-events: none; }
.mk-doc i { display: block; height: 3px; width: 0; border-radius: 2px; background: color-mix(in srgb, var(--mk-hl) 60%, transparent); margin-bottom: 5px; }
.mk-doc i:last-child { margin-bottom: 0; }
.mk-relay[data-state="claude-handoff"] .mk-doc { opacity: 1; left: 33%; transform: translate(-50%,-50%) scale(1); }
.mk-relay[data-state="codex-receiving"] .mk-doc { opacity: 0.92; left: 68%; transform: translate(-50%,-50%) scale(0.62); }
.mk-relay[data-state="codex-handoff"] .mk-doc { opacity: 1; left: 68%; transform: translate(-50%,-50%) scale(1); }
.mk-relay[data-state="claude-handoff"] .mk-doc i,
.mk-relay[data-state="codex-handoff"] .mk-doc i { animation: mkWrite 0.9s ease forwards; }
.mk-relay[data-state="claude-handoff"] .mk-doc i:nth-child(2),
.mk-relay[data-state="codex-handoff"] .mk-doc i:nth-child(2) { animation-delay: 0.22s; }
.mk-relay[data-state="claude-handoff"] .mk-doc i:nth-child(3),
.mk-relay[data-state="codex-handoff"] .mk-doc i:nth-child(3) { animation-delay: 0.44s; }
.mk-relay[data-state="codex-receiving"] .mk-doc i { width: 88%; }
@keyframes mkWrite { to { width: 88%; } }

/* status mini-component — color-coded per step/model, with a micro-animation */
.mk-status { --acc: var(--mk-pink-text); display: flex; align-items: center; gap: 13px; margin-top: 16px; padding: 12px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--acc); box-shadow: 0 6px 16px rgba(53,45,44,0.08); transition: border-color 0.4s ease; min-height: 3.3em; }
.mk-relay[data-state^="claude"] .mk-status { --acc: var(--mk-pink-text); }
.mk-relay[data-state^="codex"] .mk-status { --acc: var(--mk-blue-text); }
.mk-relay[data-state="claude-low"] .mk-status { --acc: var(--mk-warn-text); }
.mk-status-text { font-size: 0.98rem; line-height: 1.45; }
.mk-status-label { color: var(--acc); font-weight: 700; }
.mk-status-detail { color: var(--muted); }
.mk-status-icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 28px; height: 22px; color: var(--acc); }
.mki { color: inherit; }
/* build: rising equalizer bars */
.mki--build { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.mki--build i { width: 4px; height: 100%; border-radius: 2px; background: currentColor; transform-origin: bottom; animation: mkiBuild 0.9s ease-in-out infinite; }
.mki--build i:nth-child(2) { animation-delay: 0.15s; }
.mki--build i:nth-child(3) { animation-delay: 0.3s; }
@keyframes mkiBuild { 0%, 100% { transform: scaleY(0.32); } 50% { transform: scaleY(1); } }
/* low: a draining battery */
.mki--low { width: 24px; height: 12px; border-radius: 3px; border: 1.5px solid currentColor; padding: 1.5px; position: relative; }
.mki--low::after { content: ""; position: absolute; right: -3px; top: 50%; transform: translateY(-50%); width: 2px; height: 5px; border-radius: 0 2px 2px 0; background: currentColor; }
.mki--low i { display: block; height: 100%; width: 78%; border-radius: 1px; background: currentColor; animation: mkiDrain 1.6s ease-in-out infinite; }
@keyframes mkiDrain { 0% { width: 78%; opacity: 1; } 50% { width: 16%; opacity: 0.55; } 100% { width: 78%; opacity: 1; } }
/* write: handoff lines drawing in */
.mki--write { display: flex; flex-direction: column; gap: 3px; width: 20px; }
.mki--write i { height: 2.5px; width: 0; border-radius: 2px; background: currentColor; animation: mkiWrite 1.4s ease-in-out infinite; }
.mki--write i:nth-child(2) { animation-delay: 0.28s; }
@keyframes mkiWrite { 0% { width: 0; opacity: 1; } 45% { width: 100%; opacity: 1; } 75%, 100% { width: 100%; opacity: 0.18; } }
/* ingest: two bars pulling toward the centre */
.mki--ingest { position: relative; width: 22px; height: 12px; }
.mki--ingest i { position: absolute; top: 50%; width: 7px; height: 2.6px; border-radius: 2px; background: currentColor; }
.mki--ingest i:nth-child(1) { left: 0; animation: mkiInL 1.1s ease-in-out infinite; }
.mki--ingest i:nth-child(2) { right: 0; animation: mkiInR 1.1s ease-in-out infinite; }
@keyframes mkiInL { 0%, 100% { transform: translate(-3px, -50%); opacity: 0.3; } 50% { transform: translate(5px, -50%); opacity: 1; } }
@keyframes mkiInR { 0%, 100% { transform: translate(3px, -50%); opacity: 0.3; } 50% { transform: translate(-5px, -50%); opacity: 1; } }

/* track: dots + the "next" button as the moving playhead */
.mk-track { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 14px; min-height: 40px; flex-wrap: wrap; }
.mk-dot { width: 22px; height: 22px; border: 0; background: transparent; padding: 0; cursor: pointer; display: grid; place-items: center; border-radius: 50%; }
.mk-dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--text) 22%, transparent); transition: background 0.3s ease, transform 0.2s ease; }
.mk-dot.is-done::before { background: var(--text); }
.mk-dot:hover::before { transform: scale(1.45); background: color-mix(in srgb, var(--text) 55%, transparent); }
.mk-dot:focus-visible { outline: 2px solid var(--mk-pink); outline-offset: 1px; }
.mk-next { position: relative; font-family: var(--grotesk); font-weight: 700; font-size: 0.9rem; color: var(--bg); background: var(--text); border: 0; border-radius: 999px; padding: 9px 18px; cursor: pointer; box-shadow: 0 8px 20px rgba(53,45,44,0.22); transition: transform 0.15s ease, box-shadow 0.2s ease; }
.mk-next:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(53,45,44,0.3); }
.mk-next:focus-visible { outline: 3px solid var(--mk-pink); outline-offset: 3px; }
.mk-next::after { content: ""; position: absolute; inset: 0; border-radius: 999px; box-shadow: 0 0 0 0 color-mix(in srgb, var(--text) 34%, transparent); animation: mkInvite 1.9s ease-out infinite; pointer-events: none; }
.mk-relay.is-touched .mk-next::after { display: none; }
@keyframes mkInvite { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--text) 30%, transparent); } 70% { box-shadow: 0 0 0 12px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---- 02 brain ---- */
.mk-brain { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(16px, 3vw, 32px); align-items: start; }
.mk-files { display: flex; flex-direction: column; gap: 10px; }
.mk-file { display: flex; align-items: center; gap: 10px; text-align: left; font-family: var(--grotesk); font-weight: 600; font-size: 0.95rem; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; cursor: pointer; transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; }
.mk-file:hover { transform: translateX(3px); }
.mk-file-doc { flex: 0 0 auto; width: 17px; height: 21px; border-radius: 3px; background: color-mix(in srgb, var(--mk-hl) 22%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--mk-hl) 55%, transparent); position: relative; }
.mk-file-doc::after { content: ""; position: absolute; left: 3px; right: 3px; top: 5px; height: 1.5px; background: color-mix(in srgb, var(--mk-hl) 60%, transparent); box-shadow: 0 4px 0 color-mix(in srgb, var(--mk-hl) 60%, transparent), 0 8px 0 color-mix(in srgb, var(--mk-hl) 60%, transparent); }
.mk-file.is-active { background: var(--mk-pink); border-color: var(--mk-pink); color: #fff; box-shadow: 0 12px 26px rgba(207,47,97,0.3); transform: translateX(4px); }
.mk-file.is-active .mk-file-doc { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.85); }
.mk-file.is-active .mk-file-doc::after { background: rgba(255,255,255,0.9); box-shadow: 0 4px 0 rgba(255,255,255,0.9), 0 8px 0 rgba(255,255,255,0.9); }
.mk-brain-detail { background: color-mix(in srgb, var(--surface) 72%, transparent); border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 3vw, 30px); backdrop-filter: blur(10px); box-shadow: 0 18px 44px rgba(53,45,44,0.12); }
.mk-brain-chip { display: inline-block; font-family: var(--grotesk); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--mk-pink); border-radius: 999px; padding: 5px 11px; margin-bottom: 14px; box-shadow: 0 4px 12px rgba(207,47,97,0.22); }
.mk-brain-detail h3 { font-family: var(--grotesk); font-weight: 800; font-size: clamp(1.2rem, 2vw, 1.5rem); letter-spacing: -0.01em; margin-bottom: 10px; }
.mk-brain-detail p { font-size: 1rem; line-height: 1.6; color: var(--muted); }

/* ---- 03 leader ---- */
.mk-lead { background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line); border-radius: 20px; padding: clamp(18px, 3vw, 30px); backdrop-filter: blur(10px); box-shadow: 0 18px 44px rgba(53,45,44,0.12); }
.mk-lead-toggle { display: inline-flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px; box-shadow: 0 6px 16px rgba(53,45,44,0.08); margin-bottom: 22px; }
.mk-lead-toggle button { font-family: var(--grotesk); font-weight: 600; font-size: 0.88rem; color: var(--muted); background: none; border: 0; cursor: pointer; padding: 8px 16px; border-radius: 999px; transition: all 0.25s ease; }
.mk-lead-toggle button.is-active { background: var(--mk-pink); color: #fff; }
.mk-lead-stage { position: relative; min-height: 168px; display: grid; place-items: center; }
.mk-lead-view { display: none; width: 100%; }
.mk-lead[data-mode="peers"] .mk-lead-view--peers { display: block; }
.mk-lead[data-mode="leader"] .mk-lead-view--leader { display: block; }
.mk-lead-view--peers { position: relative; min-height: 168px; }
.mk-tangle { position: absolute; inset: 0; width: 100%; height: 100%; }
.mk-tangle path { fill: none; stroke: var(--cognac); stroke-width: 1.8; stroke-linecap: round; opacity: 0.5; }
.mk-clash { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%) rotate(-2deg); z-index: 3; font-family: var(--grotesk); font-weight: 800; font-size: 0.9rem; color: var(--bad, #b3303f); background: color-mix(in srgb, #b3303f 12%, var(--surface)); border: 1px solid color-mix(in srgb, #b3303f 32%, transparent); border-radius: 10px; padding: 7px 13px; }
[data-theme="dark"] .mk-clash { color: #e8808d; background: color-mix(in srgb, #e8808d 16%, var(--surface)); }
/* marks used inside the unlock asset (full colour, smaller) */
.mk-lead .mk-mark { width: 46px; opacity: 1; }
/* peers view: two equal marks, tangled */
.mk-peers { position: relative; z-index: 2; display: flex; justify-content: center; gap: clamp(40px, 12vw, 120px); padding-top: 6px; }
.mk-peer { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mk-peer b { font-family: var(--grotesk); font-size: 0.92rem; }
/* leader view: a little org chart — visionary over workhorse */
.mk-org { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.mk-org-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 16px 22px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(53,45,44,0.08); max-width: 360px; }
.mk-org-node b { font-family: var(--grotesk); font-size: 1rem; }
.mk-org-node small { color: var(--muted); font-size: 0.84rem; line-height: 1.4; }
.mk-org-node--lead { border-color: color-mix(in srgb, var(--mk-pink) 55%, transparent); box-shadow: 0 14px 32px rgba(207,47,97,0.2); }
.mk-org-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-family: var(--grotesk); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: var(--mk-pink); padding: 4px 11px; border-radius: 999px; white-space: nowrap; box-shadow: 0 5px 12px rgba(207,47,97,0.32); }
.mk-org-tag { font-family: var(--grotesk); font-weight: 700; font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mk-blue-text); }
.mk-org-link { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.mk-org-brief { font-family: var(--grotesk); font-weight: 600; font-size: 0.74rem; color: color-mix(in srgb, var(--text) 70%, var(--muted)); background: color-mix(in srgb, var(--mk-hl) 13%, var(--surface)); border: 1px dashed color-mix(in srgb, var(--mk-hl) 40%, transparent); border-radius: 8px; padding: 4px 11px; }
.mk-org-arrow { font-size: 1.2rem; line-height: 1; color: var(--mk-pink); font-weight: 700; }
.mk-smooth { display: inline-block; margin-top: 16px; font-family: var(--grotesk); font-weight: 700; font-size: 0.92rem; color: var(--ok, #0f7a4e); background: color-mix(in srgb, #0f7a4e 10%, var(--surface)); border: 1px solid color-mix(in srgb, #0f7a4e 30%, transparent); border-radius: 999px; padding: 7px 14px; }
[data-theme="dark"] .mk-smooth { color: #57c89a; background: color-mix(in srgb, #57c89a 16%, var(--surface)); }
.mk-lead-caption { margin-top: 18px; font-size: 0.98rem; line-height: 1.5; color: var(--text); }

/* ---- close ---- */
.mk-close-line { font-family: var(--grotesk); font-weight: 800; font-size: clamp(1.9rem, 4.4vw, 3.2rem); line-height: 1.05; letter-spacing: -0.02em; max-width: 20ch; }
.mk-back { display: inline-block; margin-top: 24px; font-family: var(--grotesk); font-weight: 600; font-size: 0.95rem; color: var(--denim); text-decoration: none; border-bottom: 2px solid color-mix(in srgb, var(--denim) 40%, transparent); padding-bottom: 2px; transition: border-color 0.2s ease; }
[data-theme="dark"] .mk-back { color: #a7c4ec; }
.mk-back:hover { border-color: var(--denim); }

@media (max-width: 720px) {
  .mk-brain { grid-template-columns: 1fr; }
  .mk-stage { gap: 6px; min-height: 150px; }
  .mk-codebase-mini { font-size: 0.64rem; padding: 4px 8px; }
  .mk-peers { gap: clamp(28px, 16vw, 80px); }
}
@media (prefers-reduced-motion: reduce) {
  .mk-mark, .mk-next, .mk-file, .mk-doc { transition: none; }
  .mk-rays, .mk-petals, .mk-mark, .mk-meter i, .mk-doc i, .mk-next::after, .mk-status-icon i, .mk-link, .mki i { animation: none !important; }
  .mk-next::after { display: none; }
  .mk-doc i { width: 88%; }
  .mki--write i { width: 100%; opacity: 1; }
  .mki--build i { transform: scaleY(0.7); }
  .mki--ingest i { opacity: 1; }
}


/* ============================================================
   PRIVATE LAB — cloned case-study styles (lab namespace).
   Auto-generated copy of the .gd-/.as-/.cp-/.pp- blocks under
   .labgd-/.labas-/.labcp-/.labpp- so the lab pages are fully
   independent of the live case studies. (Built 2026-06-26)
   ============================================================ */
/* =========================================================
   Generate Draft — AI for CRM case study (scaffold)
   ========================================================= */
.labgd-page{
  /* Activix-aligned palette: royal-blue accent + navy anchor (starting point) */
  --labgd-brand: #1a56db;
  --labgd-brand-strong: #103e9c;
  --labgd-brand-soft: #eaf0fc;
  --labgd-ink: #14213d;
  --labgd-muted: #5d6b85;
  --labgd-surface: #ffffff;
  --labgd-surface-2: #f5f8fd;
  --labgd-border: #dce4f1;
  --labgd-good: #1f9d6b;
  --labgd-good-soft: #e7f6ee;
  --labgd-warn: #c98a16;
  --labgd-warn-soft: #fdf3e0;
  --labgd-risk: #d6455d;
  --labgd-risk-soft: #fce8eb;
  --labgd-radius: 16px;
  --labgd-radius-lg: 24px;
  --labgd-shadow: 0 1px 2px rgba(16, 42, 96, 0.05), 0 8px 24px rgba(16, 42, 96, 0.07);
  --labgd-shadow-lg: 0 14px 44px rgba(26, 86, 219, 0.16);
}
[data-theme="dark"] .labgd-page{
  /* --labgd-brand* removed — canonical violet is set in the final
     "CASE STUDY QUALITY STANDARD" dark block (was a stale blue here). */
  --labgd-ink: #eef3fc;
  --labgd-muted: #a3afc6;
  --labgd-surface: #131a2b;
  --labgd-surface-2: #1a2236;
  --labgd-border: #28324a;
  --labgd-good-soft: rgba(31, 157, 107, 0.18);
  --labgd-warn-soft: rgba(201, 138, 22, 0.18);
  --labgd-risk-soft: rgba(214, 69, 93, 0.2);
  --labgd-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.45);
  --labgd-shadow-lg: 0 14px 44px rgba(0, 0, 0, 0.5);
}
.labgd-hero{
  padding: 120px 0 40px;
}
.labgd-eyebrow{
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--labgd-brand);
  margin-bottom: 22px;
}
.labgd-hero-title{
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin: 0 0 24px;
  color: var(--labgd-ink);
}
.labgd-hero-lead{
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  line-height: 1.5;
  max-width: 60ch;
  color: var(--labgd-muted);
  margin: 0 0 48px;
}
.labgd-snapshot{
  padding: 24px 0 56px;
}
.labgd-snapshot-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--labgd-border);
  border: 1px solid var(--labgd-border);
  border-radius: 20px;
  overflow: hidden;
  margin: 0;
}
.labgd-snapshot-grid > div{
  background: var(--labgd-surface);
  padding: 24px 26px;
}
.labgd-snapshot-grid dt{
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--labgd-muted);
  margin-bottom: 8px;
}
.labgd-snapshot-grid dd{
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--labgd-ink);
}
.labgd-section{
  padding: 56px 0;
  border-top: 1px solid #efeef7;
}
.labgd-section-kicker{
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--labgd-brand);
  margin-bottom: 14px;
}
.labgd-section-title{
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin: 0 0 22px;
  color: var(--labgd-ink);
}
.labgd-section-body{
  max-width: 64ch;
  color: var(--labgd-muted);
  font-size: 1.08rem;
  line-height: 1.65;
}
.labgd-section--close{
  text-align: center;
  border-top: 1px solid #efeef7;
  padding: 72px 0;
}
.labgd-principle{
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--labgd-ink);
  margin: 0 0 8px;
}
.labgd-principle--alt{
  color: var(--labgd-brand);
  margin-bottom: 32px;
}
@media (max-width: 760px){
.labgd-snapshot-grid{
    grid-template-columns: 1fr;
  }
.labgd-hero{
    padding-top: 96px;
  }
}
/* =========================================================
   Generate Draft — embedded asset design system
   Fluid auto-layout: container queries + auto-fit grids +
   clamp(). No per-breakpoint scaling math.
   ========================================================= */
.labgd-section-body p{ margin: 0 0 1.1em; }
.labgd-section-body p:last-child{ margin-bottom: 0; }
.labgd-section-body strong{ color: var(--labgd-ink); font-weight: 650; }
.labgd-section-body em{ font-style: italic; }
.labgd-emphasis{
  font-size: clamp(1.15rem, 1.8vw, 1.5rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--labgd-ink);
  margin: 1.2em 0 1.1em;
}
.labgd-snapshot-challenge{
  margin: 16px 0 0;
  padding: 18px 22px;
  border: 1px solid var(--labgd-border);
  border-radius: var(--labgd-radius);
  background: var(--labgd-brand-soft);
  color: var(--labgd-ink);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.5;
}
.labgd-snapshot-challenge span{
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--labgd-brand-strong);
  margin-bottom: 6px;
}
/* Each asset is its own responsive context */
.labgd-asset{
  container-type: inline-size;
  margin-top: clamp(28px, 4vw, 48px);
}
.labgd-asset-head{ margin-bottom: clamp(18px, 3vw, 30px); }
.labgd-asset-eyebrow{
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--labgd-brand);
  margin: 0 0 10px;
}
.labgd-asset-title{
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--labgd-ink);
  margin: 0 0 8px;
}
.labgd-asset-sub{
  color: var(--labgd-muted);
  font-size: clamp(0.98rem, 1.4vw, 1.1rem);
  line-height: 1.5;
  margin: 0;
  max-width: 62ch;
}
/* ---------- Asset 01: Executive Story Timeline ---------- */
.labgd-timeline{
  display: flex;
  align-items: stretch;
  gap: clamp(8px, 1.4cqi, 16px);
}
.labgd-phase{ flex: 1 1 0; min-width: 0; display: flex; }
.labgd-phase-toggle{
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  background: var(--labgd-surface);
  border: 1px solid var(--labgd-border);
  border-radius: var(--labgd-radius-lg);
  padding: clamp(16px, 2cqi, 22px);
  box-shadow: var(--labgd-shadow);
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  font: inherit;
  color: inherit;
}
.labgd-phase-toggle::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--labgd-brand), #4f8af7);
}
.labgd-phase-toggle:hover{ transform: translateY(-3px); box-shadow: var(--labgd-shadow-lg); border-color: var(--labgd-brand); }
.labgd-phase-toggle:focus-visible{ outline: 2px solid var(--labgd-brand); outline-offset: 2px; }
.labgd-phase-top{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.labgd-phase-index{
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--labgd-muted);
}
.labgd-phase-glyph{ width: 32px; height: 32px; color: var(--labgd-brand); flex: 0 0 auto; }
.labgd-phase-glyph svg{ width: 100%; height: 100%; display: block; }
.labgd-phase-name{ font-size: 1.05rem; font-weight: 650; line-height: 1.2; color: var(--labgd-ink); }
.labgd-phase-summary{ font-size: 0.92rem; line-height: 1.5; color: var(--labgd-muted); }
.labgd-phase-tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 4px; }
.labgd-tag{ font-size: 0.72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.labgd-tag--good{ background: var(--labgd-good-soft); color: color-mix(in srgb, var(--labgd-good) 82%, #000); }
.labgd-tag--risk{ background: var(--labgd-risk-soft); color: color-mix(in srgb, var(--labgd-risk) 82%, #000); }
.labgd-tag--accent{ background: var(--labgd-brand-soft); color: var(--labgd-brand-strong); }
.labgd-phase-detail{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--labgd-border);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--labgd-muted);
}
.labgd-phase-detail[hidden]{ display: none; }
.labgd-connector{ flex: 0 0 auto; align-self: center; color: var(--labgd-brand); opacity: 0.55; }
.labgd-connector svg{ width: 22px; height: 22px; display: block; }
.labgd-timeline-takeaway{
  margin: clamp(20px, 3vw, 30px) 0 0;
  text-align: center;
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--labgd-ink);
}
.labgd-evidence{
  list-style: none;
  margin: clamp(14px, 2vw, 20px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.labgd-evidence li{
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--labgd-muted);
  background: var(--labgd-surface-2);
  border: 1px solid var(--labgd-border);
  border-radius: 999px;
  padding: 6px 12px;
}
.labgd-evidence b{ color: var(--labgd-brand-strong); font-weight: 700; }
/* ---------- Tension cards (real design problem) ---------- */
.labgd-tension{
  display: grid;
  gap: 12px;
  margin-top: clamp(20px, 3vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}
.labgd-tension-card{
  background: var(--labgd-surface);
  border: 1px solid var(--labgd-border);
  border-radius: var(--labgd-radius);
  padding: clamp(16px, 2vw, 20px);
  box-shadow: var(--labgd-shadow);
}
.labgd-tension-card--win{
  border-color: var(--labgd-brand);
  box-shadow: var(--labgd-shadow-lg);
  background: linear-gradient(180deg, var(--labgd-brand-soft), var(--labgd-surface));
}
.labgd-tension-card h4{ margin: 0 0 12px; font-size: 1.02rem; color: var(--labgd-ink); }
.labgd-tension-line{ margin: 0 0 10px; font-size: 0.9rem; line-height: 1.5; color: var(--labgd-muted); }
.labgd-tension-line:last-child{ margin-bottom: 0; }
.labgd-tension-line span{
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  font-weight: 700;
  margin-bottom: 3px;
}
.labgd-tension-line--good span{ color: var(--labgd-good); }
.labgd-tension-line--risk span{ color: var(--labgd-risk); }
/* ---------- Pull quote ---------- */
.labgd-quote{
  margin: clamp(20px, 3vw, 28px) 0;
  padding: clamp(18px, 2.5vw, 26px) clamp(20px, 3vw, 30px);
  border-left: 4px solid var(--labgd-brand);
  background: var(--labgd-brand-soft);
  border-radius: 0 var(--labgd-radius) var(--labgd-radius) 0;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--labgd-ink);
}
.labgd-quote cite{
  display: block;
  margin-top: 12px;
  font-size: 0.85rem;
  font-weight: 500;
  font-style: normal;
  color: var(--labgd-muted);
}
/* ---------- Ordered step flow ---------- */
.labgd-steps{
  counter-reset: labgd-step;
  list-style: none;
  margin: clamp(16px, 2vw, 22px) 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.labgd-steps li{
  position: relative;
  padding-left: 46px;
  min-height: 32px;
  display: flex;
  align-items: center;
  color: var(--labgd-ink);
  font-size: 0.98rem;
  line-height: 1.4;
}
.labgd-steps li::before{
  counter-increment: labgd-step;
  content: counter(labgd-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--labgd-brand-soft);
  color: var(--labgd-brand-strong);
  font-weight: 700;
  font-size: 0.85rem;
  display: grid;
  place-items: center;
}
/* ---------- Trust mechanism cards ---------- */
.labgd-mechanisms{
  display: grid;
  gap: 12px;
  margin: clamp(16px, 2vw, 22px) 0;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.labgd-mechanism{
  background: var(--labgd-surface);
  border: 1px solid var(--labgd-border);
  border-radius: var(--labgd-radius);
  padding: 16px 18px;
  box-shadow: var(--labgd-shadow);
}
.labgd-mechanism dt{ font-weight: 650; color: var(--labgd-ink); margin-bottom: 5px; }
.labgd-mechanism dd{ margin: 0; color: var(--labgd-muted); font-size: 0.9rem; line-height: 1.5; }
/* Section dividers use the shared border token (dark-mode aware) */
.labgd-section{ border-top-color: var(--labgd-border); }
.labgd-section--close{ border-top-color: var(--labgd-border); }
/* ---------- Asset 02: Magic Button Concept ---------- */
.labgd-magic{
  display: flex;
  align-items: stretch;
  gap: clamp(8px, 1.6cqi, 18px);
}
.labgd-magic-panel{
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.labgd-magic-label{
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--labgd-muted);
  margin: 0 0 12px;
}
.labgd-context-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.labgd-context-list li{
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--labgd-surface);
  border: 1px solid var(--labgd-border);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 0.88rem;
  color: var(--labgd-ink);
  box-shadow: var(--labgd-shadow);
}
.labgd-context-ico{ width: 18px; height: 18px; color: var(--labgd-brand); flex: 0 0 auto; }
.labgd-context-ico svg{ width: 100%; height: 100%; display: block; }
/* center action column */
.labgd-magic-action{
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
}
.labgd-magic-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 650;
  font-size: 1.02rem;
  color: #fff;
  padding: 16px 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--labgd-brand), #4f8af7);
  box-shadow: 0 10px 26px rgba(26, 86, 219, 0.34);
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.labgd-magic-btn-ico{ width: 20px; height: 20px; display: inline-flex; }
.labgd-magic-btn-ico svg{ width: 100%; height: 100%; }
.labgd-magic-btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px rgba(26, 86, 219, 0.42); }
.labgd-magic-btn:focus-visible{ outline: 2px solid var(--labgd-brand); outline-offset: 3px; }
.labgd-magic-btn:active{ transform: translateY(0); }
.labgd-magic.is-thinking .labgd-magic-btn{ opacity: 0.7; pointer-events: none; }
.labgd-magic-micro{ margin: 0; font-size: 0.85rem; color: var(--labgd-muted); }
.labgd-magic-draft{ justify-content: flex-start; }
.labgd-draft-card{
  background: var(--labgd-surface);
  border: 1px solid var(--labgd-border);
  border-radius: var(--labgd-radius);
  padding: 16px 18px;
  box-shadow: var(--labgd-shadow);
}
.labgd-draft-chip{
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--labgd-brand-strong);
  background: var(--labgd-brand-soft);
  border-radius: 999px;
  padding: 4px 10px;
  margin-bottom: 12px;
}
.labgd-draft-field{
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--labgd-ink);
  border-bottom: 1px solid var(--labgd-border);
  padding-bottom: 10px;
}
.labgd-draft-field span{
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--labgd-muted);
  margin-bottom: 3px;
}
.labgd-draft-body{ margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--labgd-ink); }
/* thinking state */
.labgd-draft-thinking{
  display: none;
  align-items: center;
  gap: 10px;
  color: var(--labgd-muted);
  font-size: 0.9rem;
  background: var(--labgd-surface);
  border: 1px dashed var(--labgd-border);
  border-radius: var(--labgd-radius);
  padding: 22px 18px;
}
.labgd-magic.is-thinking .labgd-draft-card{ display: none; }
.labgd-magic.is-thinking .labgd-draft-thinking{ display: flex; }
.labgd-magic.is-generated .labgd-draft-card{ animation: labgd-fade-in 0.45s ease both; }
.labgd-draft-dots{ display: inline-flex; gap: 5px; }
.labgd-draft-dots i{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--labgd-brand);
  display: block;
}
/* product principles row */
.labgd-principles{
  list-style: none;
  margin: clamp(22px, 3vw, 32px) 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.labgd-principles li{
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--labgd-surface-2);
  border: 1px solid var(--labgd-border);
  border-radius: var(--labgd-radius);
  padding: 14px 16px;
  font-size: 0.95rem;
  font-weight: 550;
  color: var(--labgd-ink);
}
.labgd-principles b{
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--labgd-brand);
  color: #fff;
  font-size: 0.85rem;
  display: grid;
  place-items: center;
}
.labgd-magic-quote{
  margin: clamp(20px, 3vw, 28px) 0 0;
  text-align: center;
  font-size: clamp(1.1rem, 1.9vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--labgd-brand-strong);
}
@keyframes labgd-fade-in{
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: no-preference){
.labgd-magic-btn{ animation: labgd-glow 2.8s ease-in-out infinite; }
.labgd-draft-dots i{ animation: labgd-dot 1s ease-in-out infinite; }
.labgd-draft-dots i:nth-child(2){ animation-delay: 0.15s; }
.labgd-draft-dots i:nth-child(3){ animation-delay: 0.3s; }
}
@keyframes labgd-glow{
  0%, 100% { box-shadow: 0 10px 26px rgba(26, 86, 219, 0.30); }
  50% { box-shadow: 0 12px 32px rgba(26, 86, 219, 0.50); }
}
@keyframes labgd-dot{
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}
/* ---------- Asset 03: Context Confidence Matrix ---------- */
.labgd-matrix{
  display: grid;
  gap: clamp(16px, 2.4cqi, 24px);
  grid-template-columns: minmax(0, 2.3fr) minmax(0, 1fr);
  align-items: start;
}
.labgd-conf-band{
  background: var(--labgd-surface);
  border: 1px solid var(--labgd-border);
  border-radius: var(--labgd-radius);
  padding: clamp(14px, 2cqi, 18px);
  margin-bottom: 12px;
}
.labgd-conf-band:last-child{ margin-bottom: 0; }
.labgd-conf-band--high{ border-left: 4px solid var(--labgd-good); }
.labgd-conf-band--med{ border-left: 4px solid var(--labgd-warn); }
.labgd-conf-band--low{ border-left: 4px solid var(--labgd-risk); }
.labgd-conf-band-head{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 650;
  color: var(--labgd-ink);
}
.labgd-conf-band-head small{
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
}
.labgd-conf-band--high .labgd-conf-band-head small{ color: var(--labgd-good); }
.labgd-conf-band--med .labgd-conf-band-head small{ color: var(--labgd-warn); }
.labgd-conf-band--low .labgd-conf-band-head small{ color: var(--labgd-risk); }
.labgd-conf-grid{
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
}
.labgd-conf-card{
  background: var(--labgd-surface-2);
  border: 1px solid var(--labgd-border);
  border-radius: 12px;
  overflow: hidden;
}
.labgd-conf-card--danger{ border-color: var(--labgd-risk); background: var(--labgd-risk-soft); }
.labgd-conf-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--labgd-ink);
  text-align: left;
  padding: 11px 13px;
}
.labgd-conf-toggle:focus-visible{ outline: 2px solid var(--labgd-brand); outline-offset: -2px; }
.labgd-conf-name{ display: flex; align-items: center; gap: 7px; }
.labgd-conf-dot{ width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.labgd-conf-card--high .labgd-conf-dot{ background: var(--labgd-good); }
.labgd-conf-card--med .labgd-conf-dot{ background: var(--labgd-warn); }
.labgd-conf-card--low .labgd-conf-dot{ background: var(--labgd-risk); }
.labgd-conf-warn-ico{ width: 15px; height: 15px; color: var(--labgd-risk); flex: 0 0 auto; }
.labgd-conf-chevron{ width: 15px; height: 15px; color: var(--labgd-muted); flex: 0 0 auto; transition: transform 0.18s ease; }
.labgd-conf-toggle[aria-expanded="true"] .labgd-conf-chevron{ transform: rotate(90deg); }
.labgd-conf-why{ padding: 0 13px 12px; font-size: 0.82rem; line-height: 1.5; color: var(--labgd-muted); }
.labgd-conf-why[hidden]{ display: none; }
.labgd-matrix-aside{ display: grid; gap: 14px; }
.labgd-legend{
  display: grid;
  gap: 9px;
  background: var(--labgd-surface);
  border: 1px solid var(--labgd-border);
  border-radius: var(--labgd-radius);
  padding: 14px 16px;
}
.labgd-legend div{ display: flex; align-items: center; gap: 9px; font-size: 0.82rem; color: var(--labgd-muted); }
.labgd-legend i{ width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.labgd-matrix-insight{
  background: var(--labgd-brand-soft);
  border: 1px solid var(--labgd-border);
  border-radius: var(--labgd-radius);
  padding: 16px 18px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--labgd-ink);
  margin: 0;
}
.labgd-matrix-warning{
  margin: clamp(16px, 2vw, 20px) 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--labgd-risk-soft);
  border: 1px solid var(--labgd-risk);
  border-radius: var(--labgd-radius);
  padding: 14px 18px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--labgd-ink);
}
.labgd-matrix-warning .labgd-conf-warn-ico{ width: 18px; height: 18px; }
.labgd-risk-tags{ list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; }
.labgd-risk-tags li{
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--labgd-risk);
  background: var(--labgd-risk-soft);
  border-radius: 999px;
  padding: 5px 11px;
}
@container (max-width: 50rem){
.labgd-matrix{ grid-template-columns: 1fr; }
}
/* ============================================================
   FigJam aesthetic layer — sticker cards (thick black outline +
   offset shadow), bright palette, dotted canvas, playful bits.
   Typography untouched (inherits the homepage font).
   ============================================================ */
.labgd-page{
  --labgd-line: #1c1c1c;
  --labgd-brand: #4b4bf5;
  --labgd-brand-strong: #2d2dcf;
  --labgd-brand-soft: #e9e9ff;
  --labgd-yellow: #ffc62b;
  --labgd-yellow-soft: #fff3cf;
  --labgd-red: #f24822;
  --labgd-green: #14ae5c;
  --labgd-green-soft: #e3f9ec;
  --labgd-purple: #8a63f4;
  --labgd-lav: #d7d2ff;
  --labgd-dot: rgba(28, 28, 28, 0.10);
  --labgd-sticker: 3px 3px 0 var(--labgd-line);
  --labgd-sticker-lg: 5px 5px 0 var(--labgd-line);
  background-image: radial-gradient(var(--labgd-dot) 1.5px, transparent 1.6px);
  background-size: 24px 24px;
}
[data-theme="dark"] .labgd-page{
  --labgd-line: #05070d;
  --labgd-dot: rgba(255, 255, 255, 0.06);
}
/* ---- highlighter sticker kickers ---- */
.labgd-asset-eyebrow,
.labgd-section-kicker{
  display: inline-block;
  background: var(--labgd-yellow);
  color: var(--labgd-ink);
  padding: 4px 11px;
  border: 2px solid var(--labgd-line);
  border-radius: 8px;
  box-shadow: 2px 2px 0 var(--labgd-line);
  transform: rotate(-1.2deg);
}
/* ---- hero stickers ---- */
.labgd-hero{ position: relative; }
.labgd-hero-stickers{ position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.labgd-sticker{ position: absolute; display: block; }
.labgd-sticker--smiley{ width: 56px; top: 104px; right: 8%; transform: rotate(-10deg); filter: drop-shadow(3px 3px 0 var(--labgd-line)); }
.labgd-sticker--star1{ width: 30px; top: 64px; right: 22%; transform: rotate(8deg); }
.labgd-sticker--star2{ width: 20px; top: 168px; right: 30%; }
.labgd-sticker--squiggle{ width: 98px; top: 232px; right: 7%; }
@media (max-width: 900px){
.labgd-hero-stickers{ display: none; }
}
/* ---- generic sticker treatment ---- */
.labgd-snapshot-grid{ border: 2px solid var(--labgd-line); border-radius: 18px; gap: 2px; background: var(--labgd-line); box-shadow: var(--labgd-sticker-lg); }
.labgd-snapshot-challenge{ border: 2px solid var(--labgd-line); border-radius: 12px; background: var(--labgd-yellow); box-shadow: var(--labgd-sticker); }
.labgd-snapshot-challenge span{ color: var(--labgd-ink); }
/* ---- Asset 01 timeline: sticker cards + safe accordion ---- */
.labgd-timeline{ align-items: flex-start; gap: clamp(14px, 1.8cqi, 22px); }
.labgd-phase{
  flex-direction: column;
  background: var(--labgd-surface);
  border: 2px solid var(--labgd-line);
  border-radius: 16px;
  box-shadow: var(--labgd-sticker);
  overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.labgd-phase::before{ content: ""; display: block; height: 7px; background: var(--labgd-brand); }
.labgd-timeline .labgd-phase:nth-child(1)::before{ background: var(--labgd-brand); }
.labgd-timeline .labgd-phase:nth-child(3)::before{ background: var(--labgd-yellow); }
.labgd-timeline .labgd-phase:nth-child(5)::before{ background: var(--labgd-purple); }
.labgd-timeline .labgd-phase:nth-child(7)::before{ background: var(--labgd-green); }
.labgd-timeline .labgd-phase:nth-child(1) .labgd-phase-glyph{ color: var(--labgd-brand); }
.labgd-timeline .labgd-phase:nth-child(3) .labgd-phase-glyph{ color: #c98a16; }
.labgd-timeline .labgd-phase:nth-child(5) .labgd-phase-glyph{ color: var(--labgd-purple); }
.labgd-timeline .labgd-phase:nth-child(7) .labgd-phase-glyph{ color: var(--labgd-green); }
.labgd-phase:hover{ transform: translate(-2px, -2px); box-shadow: var(--labgd-sticker-lg); }
.labgd-phase-toggle{ background: none; border: none; box-shadow: none; border-radius: 0; padding: clamp(15px, 2cqi, 20px); }
.labgd-phase-toggle::before{ content: none; }
.labgd-phase-toggle:hover{ transform: none; box-shadow: none; border: none; }
.labgd-phase-toggle:focus-visible{ outline: 2px solid var(--labgd-brand); outline-offset: -4px; }
.labgd-phase-detail{ display: grid; grid-template-rows: 0fr; margin: 0; padding: 0; border: 0; transition: grid-template-rows 0.26s ease; }
.labgd-phase-detail-inner{ overflow: hidden; }
.labgd-phase-toggle[aria-expanded="true"] + .labgd-phase-detail{ grid-template-rows: 1fr; }
.labgd-phase-detail-p{ margin: 0; padding: 12px 16px 16px; border-top: 1px dashed var(--labgd-border); font-size: 0.86rem; line-height: 1.55; color: var(--labgd-muted); }
.labgd-tag{ border: 1.5px solid var(--labgd-line); }
.labgd-connector{ opacity: 1; color: var(--labgd-line); }
.labgd-connector svg{ width: 40px; height: 22px; }
.labgd-evidence li{ border: 2px solid var(--labgd-line); box-shadow: 2px 2px 0 var(--labgd-line); background: var(--labgd-surface); }
.labgd-timeline-takeaway{ color: var(--labgd-ink); }
/* ---- Asset 02 magic button ---- */
.labgd-context-list li{ border: 2px solid var(--labgd-line); border-radius: 11px; box-shadow: 2px 2px 0 var(--labgd-line); background: var(--labgd-surface); }
.labgd-magic-btn{ background: var(--labgd-brand); color: #fff; border: 2px solid var(--labgd-line); border-radius: 14px; box-shadow: var(--labgd-sticker-lg); animation: none; }
.labgd-magic-btn:hover{ transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--labgd-line); }
.labgd-draft-card{ border: 2px solid var(--labgd-line); border-radius: 12px; box-shadow: var(--labgd-sticker); transform: rotate(-1deg); }
.labgd-draft-thinking{ border: 2px dashed var(--labgd-line); }
.labgd-draft-chip{ border: 1.5px solid var(--labgd-line); }
.labgd-principles li{ border: 2px solid var(--labgd-line); border-radius: 14px; box-shadow: var(--labgd-sticker); }
.labgd-principles li:nth-child(1){ background: var(--labgd-brand-soft); }
.labgd-principles li:nth-child(2){ background: var(--labgd-yellow-soft); }
.labgd-principles li:nth-child(3){ background: var(--labgd-green-soft); }
.labgd-principles b{ border: 2px solid var(--labgd-line); box-shadow: 1.5px 1.5px 0 var(--labgd-line); }
.labgd-magic-quote{ color: var(--labgd-brand-strong); }
/* ---- shared quote → sticky note ---- */
.labgd-quote{
  background: var(--labgd-yellow);
  color: var(--labgd-ink);
  border: 2px solid var(--labgd-line);
  border-radius: 6px;
  box-shadow: var(--labgd-sticker-lg);
  transform: rotate(-1.2deg);
}
.labgd-quote cite{ color: rgba(28, 28, 28, 0.72); }
/* ---- tension cards ---- */
.labgd-tension-card{ border: 2px solid var(--labgd-line); border-radius: 16px; box-shadow: var(--labgd-sticker); }
.labgd-tension-card:nth-child(1){ background: var(--labgd-lav); }
.labgd-tension-card:nth-child(2){ background: var(--labgd-yellow-soft); }
.labgd-tension-card--win{ background: var(--labgd-green-soft); box-shadow: var(--labgd-sticker-lg); }
/* ---- ordered steps ---- */
.labgd-steps li::before{ background: var(--labgd-brand); color: #fff; border: 2px solid var(--labgd-line); box-shadow: 2px 2px 0 var(--labgd-line); }
/* ---- trust mechanism cards ---- */
.labgd-mechanism{ border: 2px solid var(--labgd-line); border-radius: 14px; box-shadow: var(--labgd-sticker); }
/* ---- Asset 03 confidence matrix ---- */
.labgd-conf-band{ border: 2px solid var(--labgd-line); border-radius: 16px; box-shadow: var(--labgd-sticker); }
.labgd-conf-band--high{ background: var(--labgd-green-soft); }
.labgd-conf-band--med{ background: var(--labgd-yellow-soft); }
.labgd-conf-band--low{ background: #fdeceb; }
.labgd-conf-card{ border: 2px solid var(--labgd-line); border-radius: 11px; box-shadow: 2px 2px 0 var(--labgd-line); background: var(--labgd-surface); }
.labgd-conf-card--danger{ background: var(--labgd-red); border-color: var(--labgd-line); }
.labgd-conf-card--danger .labgd-conf-toggle,
.labgd-conf-card--danger .labgd-conf-chevron,
.labgd-conf-card--danger .labgd-conf-warn-ico{ color: #fff; }
.labgd-conf-card--danger .labgd-conf-why{ color: rgba(255, 255, 255, 0.92); }
.labgd-conf-card--danger .labgd-conf-dot{ background: #fff; }
.labgd-legend{ border: 2px solid var(--labgd-line); border-radius: 14px; box-shadow: var(--labgd-sticker); }
.labgd-legend i{ border: 1.5px solid var(--labgd-line); }
.labgd-matrix-insight{ border: 2px solid var(--labgd-line); border-radius: 14px; box-shadow: var(--labgd-sticker); background: var(--labgd-brand-soft); }
.labgd-matrix-warning{ border: 2px solid var(--labgd-line); border-radius: 14px; box-shadow: var(--labgd-sticker); background: var(--labgd-red); color: #fff; }
.labgd-matrix-warning .labgd-conf-warn-ico{ color: #fff; }
.labgd-risk-tags li{ border: 2px solid var(--labgd-line); box-shadow: 2px 2px 0 var(--labgd-line); background: var(--labgd-surface); }
/* hero eyebrow shares the highlighter sticker treatment */
.labgd-eyebrow{
  display: inline-block;
  background: var(--labgd-yellow);
  color: var(--labgd-ink);
  padding: 5px 12px;
  border: 2px solid var(--labgd-line);
  border-radius: 8px;
  box-shadow: 2px 2px 0 var(--labgd-line);
  transform: rotate(-1.2deg);
}
/* ---- Asset 04 rabbit hole ---- */
.labgd-rabbit{
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(min(100%, 17rem), 0.75fr);
  gap: clamp(18px, 3cqi, 30px);
  align-items: start;
}
.labgd-rabbit-path{ display: grid; gap: 12px; }
.labgd-rabbit-step{
  width: min(100%, 35rem);
  margin-inline-start: clamp(0px, calc(var(--level, 0) * 4cqi), 11rem);
}
.labgd-rabbit-toggle{
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  text-align: left;
  border: 2px solid var(--labgd-line);
  border-radius: 14px;
  background: var(--labgd-surface);
  color: var(--labgd-ink);
  box-shadow: var(--labgd-sticker);
  padding: 13px 14px;
  transform: rotate(-0.4deg);
}
.labgd-rabbit-step:nth-child(2n) .labgd-rabbit-toggle{ transform: rotate(0.7deg); background: var(--labgd-yellow-soft); }
.labgd-rabbit-step:nth-child(3n) .labgd-rabbit-toggle{ background: var(--labgd-brand-soft); }
.labgd-rabbit-step:nth-child(n + 5) .labgd-rabbit-toggle{ background: #fdeceb; }
.labgd-rabbit-toggle:hover,
.labgd-rabbit-toggle[aria-expanded="true"]{ transform: translate(-2px, -2px) rotate(0deg); box-shadow: var(--labgd-sticker-lg); }
.labgd-rabbit-toggle:focus-visible{ outline: 2px solid var(--labgd-brand); outline-offset: 3px; }
.labgd-rabbit-num{
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid var(--labgd-line);
  border-radius: 50%;
  background: var(--labgd-red);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 800;
}
.labgd-rabbit-copy strong,
.labgd-rabbit-copy small{ display: block; }
.labgd-rabbit-copy strong{ font-size: 1rem; color: var(--labgd-ink); }
.labgd-rabbit-copy small{ color: var(--labgd-muted); font-size: 0.82rem; margin-top: 2px; }
.labgd-rabbit-clutter{
  display: grid;
  grid-template-columns: repeat(3, 9px);
  gap: 4px;
}
.labgd-rabbit-clutter span{
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--labgd-line);
  background: var(--labgd-purple);
  transform: translateY(calc(var(--d) * -1px));
}
.labgd-rabbit-detail{
  margin: 8px 0 0 48px;
  border: 2px dashed var(--labgd-line);
  border-radius: 12px;
  background: var(--labgd-surface);
  box-shadow: 2px 2px 0 var(--labgd-line);
  padding: 12px 14px;
  color: var(--labgd-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}
.labgd-rabbit-toggle[aria-expanded="false"] + .labgd-rabbit-detail{ display: none; }
.labgd-rabbit-aside{
  display: grid;
  gap: 14px;
  position: sticky;
  top: calc(var(--nav-h) + 20px);
}
.labgd-rabbit-tags{ display: flex; flex-wrap: wrap; gap: 8px; }
.labgd-rabbit-tags span,
.labgd-constraint-chips li,
.labgd-system-constraints span{
  border: 2px solid var(--labgd-line);
  border-radius: 999px;
  background: var(--labgd-surface);
  box-shadow: 2px 2px 0 var(--labgd-line);
  padding: 6px 11px;
  color: var(--labgd-ink);
  font-size: 0.76rem;
  font-weight: 700;
}
.labgd-rabbit-warning,
.labgd-rabbit-reflection{
  margin: 0;
  border: 2px solid var(--labgd-line);
  border-radius: 14px;
  box-shadow: var(--labgd-sticker);
  padding: 16px;
  font-weight: 800;
  line-height: 1.35;
}
.labgd-rabbit-warning{ background: var(--labgd-red); color: #fff; }
.labgd-rabbit-reflection{ background: var(--labgd-yellow); color: var(--labgd-ink); transform: rotate(1deg); }
@container (max-width: 55rem){
.labgd-rabbit{ grid-template-columns: 1fr; }
.labgd-rabbit-aside{ position: static; }
.labgd-rabbit-step{ margin-inline-start: 0; width: 100%; }
}
/* ---- Asset 05 research wall ---- */
.labgd-research-wall{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  gap: clamp(14px, 2cqi, 20px);
}
.labgd-research-cluster,
.labgd-validation-card{
  border: 2px solid var(--labgd-line);
  border-radius: 16px;
  box-shadow: var(--labgd-sticker);
  padding: 16px;
  background: var(--labgd-surface);
}
.labgd-research-cluster--red{ background: #ffe1dc; }
.labgd-research-cluster--yellow{ background: var(--labgd-yellow-soft); }
.labgd-research-cluster--green{ background: var(--labgd-green-soft); }
.labgd-research-cluster--purple{ background: var(--labgd-brand-soft); }
.labgd-research-cluster--blue{ background: #e3efff; }
.labgd-research-cluster h4{
  margin: 0 0 12px;
  color: var(--labgd-ink);
  font-size: 1rem;
}
.labgd-notes{ display: grid; gap: 9px; }
.labgd-note{
  width: 100%;
  min-height: 72px;
  border: 2px solid var(--labgd-line);
  border-radius: 7px;
  background: var(--labgd-surface);
  box-shadow: 2px 2px 0 var(--labgd-line);
  color: var(--labgd-ink);
  padding: 11px 12px;
  text-align: left;
  font-size: 0.86rem;
  line-height: 1.35;
  transform: rotate(var(--r));
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}
.labgd-note:hover{ transform: translate(-2px, -2px) rotate(0deg); box-shadow: 5px 5px 0 var(--labgd-line); }
.labgd-validation-card{
  display: grid;
  gap: 10px;
  background: var(--espresso);
  color: #fff;
}
.labgd-validation-label{
  color: var(--labgd-yellow);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.labgd-validation-card strong{ font-size: 1.3rem; line-height: 1.15; }
.labgd-validation-card ul{ margin: 0; padding-left: 1.1rem; color: rgba(255, 255, 255, 0.86); }
.labgd-synthesis{
  margin: clamp(18px, 3cqi, 28px) 0 0;
  border: 2px solid var(--labgd-line);
  border-radius: 14px;
  background: var(--labgd-green);
  color: #fff;
  box-shadow: var(--labgd-sticker-lg);
  padding: 18px 20px;
  font-size: clamp(1.1rem, 2cqi, 1.45rem);
  line-height: 1.35;
  font-weight: 800;
  text-align: center;
}
.labgd-rating{
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--labgd-ink);
}
.labgd-rating i{
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--labgd-line);
  border-radius: 50%;
  background: transparent;
}
.labgd-rating i.is-on{ background: var(--labgd-brand); }
.labgd-rating--medium i.is-on{ background: var(--labgd-yellow); }
.labgd-rating--low i.is-on{ background: var(--labgd-red); }
.labgd-rating b{ margin-left: 5px; font-size: 0.82rem; }
.labgd-evidence--left{ justify-content: flex-start; }
/* ---- Asset 07 flow comparison ---- */
.labgd-flow-compare{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: clamp(14px, 2cqi, 22px);
  align-items: center;
}
.labgd-flow-panel{
  border: 2px solid var(--labgd-line);
  border-radius: 16px;
  box-shadow: var(--labgd-sticker);
  padding: clamp(16px, 2.4cqi, 22px);
  background: var(--labgd-surface);
}
.labgd-flow-panel--prompt{ background: #fdeceb; }
.labgd-flow-panel--hybrid{ background: var(--labgd-green-soft); }
.labgd-flow-kicker{
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--labgd-muted);
}
.labgd-flow-panel h4{ margin: 0 0 16px; color: var(--labgd-ink); font-size: 1.18rem; }
.labgd-flow-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.labgd-flow-list li{ min-width: 0; }
.labgd-flow-step{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--labgd-line);
  border-radius: 12px;
  background: var(--labgd-surface);
  box-shadow: 2px 2px 0 var(--labgd-line);
  padding: 9px 11px;
  color: var(--labgd-ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.25;
  text-align: left;
  transition: background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}
.labgd-flow-step:hover,
.labgd-flow-step.is-active{
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--labgd-line);
}
.labgd-flow-step:focus-visible{
  outline: 2px solid var(--labgd-brand);
  outline-offset: 3px;
}
.labgd-flow-step span{
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 2px solid var(--labgd-line);
  border-radius: 50%;
  background: var(--labgd-brand);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
}
.labgd-flow-list--prompt li.is-marked .labgd-flow-step{ background: var(--labgd-risk-soft); }
.labgd-flow-list--hybrid li.is-marked .labgd-flow-step{ background: var(--labgd-good-soft); }
.labgd-flow-step.is-active{
  background: color-mix(in srgb, var(--blossom) 36%, var(--surface));
}
.labgd-flow-center{
  display: grid;
  place-items: center;
  text-align: center;
  border: 2px solid var(--labgd-line);
  border-radius: 50%;
  background: var(--labgd-yellow);
  box-shadow: var(--labgd-sticker-lg);
  width: clamp(10.5rem, 20cqi, 14.5rem);
  aspect-ratio: 1;
  padding: clamp(14px, 2cqi, 18px);
  color: var(--labgd-ink);
  transform: rotate(-4deg);
}
.labgd-flow-center strong,
.labgd-flow-center span{ display: block; line-height: 1.12; }
.labgd-flow-center strong{ color: var(--labgd-ink); font-size: clamp(1rem, 1.8cqi, 1.25rem); }
.labgd-flow-center span{ color: var(--labgd-muted); font-size: clamp(0.76rem, 1.4cqi, 0.9rem); margin-top: 6px; }
.labgd-flow-label{
  margin: 14px 0 0;
  font-weight: 800;
  line-height: 1.3;
}
.labgd-flow-label--bad{ color: var(--labgd-risk); }
.labgd-flow-label--good{ color: var(--labgd-good); }
.labgd-flow-math{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.labgd-flow-math span{
  border: 2px solid var(--labgd-line);
  border-radius: 999px;
  background: var(--labgd-surface);
  box-shadow: 2px 2px 0 var(--labgd-line);
  padding: 7px 12px;
  color: var(--labgd-ink);
  font-size: 0.85rem;
  font-weight: 700;
}
.labgd-flow-math b{ color: var(--labgd-brand); }
@container (max-width: 58rem){
.labgd-flow-compare{ grid-template-columns: 1fr; }
.labgd-flow-center{
    width: min(100%, 18rem);
    aspect-ratio: auto;
    border-radius: 14px;
    justify-self: center;
    transform: none;
    box-shadow: 0 5px 0 var(--labgd-line);
  }
}
/* ---- Asset 08 final annotated mockup ---- */
.labgd-final-stage{
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(min(100%, 18rem), 0.8fr);
  gap: clamp(18px, 3cqi, 30px);
  align-items: start;
}
.labgd-window{
  border: 2px solid var(--labgd-line);
  border-radius: 18px;
  background: var(--labgd-surface);
  box-shadow: var(--labgd-sticker-lg);
  overflow: hidden;
}
.labgd-window-head{
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 2px solid var(--labgd-line);
  background: var(--labgd-brand-soft);
  padding: 12px 14px;
  color: var(--labgd-ink);
}
.labgd-window-head strong{ margin-right: auto; }
.labgd-window-head span:last-child{
  border: 2px solid var(--labgd-line);
  border-radius: 999px;
  background: var(--labgd-yellow);
  color: var(--labgd-ink);
  padding: 3px 9px;
  font-size: 0.76rem;
  font-weight: 800;
}
.labgd-window-dots{ display: inline-flex; gap: 5px; }
.labgd-window-dots i{
  width: 10px;
  height: 10px;
  border: 2px solid var(--labgd-line);
  border-radius: 50%;
  background: var(--labgd-red);
}
.labgd-window-dots i:nth-child(2){ background: var(--labgd-yellow); }
.labgd-window-dots i:nth-child(3){ background: var(--labgd-green); }
.labgd-field,
.labgd-body-field,
.labgd-update-panel,
.labgd-feedback-row,
.labgd-disclaimer{
  margin: 14px;
}
.labgd-field label,
.labgd-body-field label,
.labgd-update-panel label{
  display: block;
  margin-bottom: 6px;
  color: var(--labgd-muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.labgd-field div,
.labgd-message-area,
.labgd-update-panel input{
  border: 2px solid var(--labgd-line);
  border-radius: 12px;
  background: #fff;
  color: var(--labgd-ink);
}
.labgd-field div{ padding: 10px 12px; font-weight: 650; }
.labgd-message-area{
  min-height: 174px;
  padding: 14px;
  line-height: 1.55;
}
.labgd-message-area > p{ display: none; margin: 0; }
.labgd-mockup:not(.is-thinking):not(.is-generated):not(.is-refined) .labgd-body-empty{ display: block; color: var(--labgd-muted); }
.labgd-mockup.is-thinking .labgd-body-thinking{ display: flex; align-items: center; gap: 10px; color: var(--labgd-brand); font-weight: 800; }
.labgd-mockup.is-generated .labgd-body-generated,
.labgd-mockup.is-refined .labgd-body-refined{ display: block; }
.labgd-composer-controls{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px;
}
.labgd-composer-controls button,
.labgd-update-panel button,
.labgd-feedback-row button{
  border: 2px solid var(--labgd-line);
  border-radius: 12px;
  box-shadow: 2px 2px 0 var(--labgd-line);
  background: var(--labgd-surface);
  color: var(--labgd-ink);
  padding: 8px 11px;
  font-weight: 800;
  font-size: 0.85rem;
}
.labgd-ui-generate,
.labgd-ui-update{ background: var(--labgd-brand) !important; color: #fff !important; }
.labgd-ui-stop{ display: none; background: var(--labgd-red) !important; color: #fff !important; }
.labgd-mockup.is-thinking .labgd-ui-stop{ display: inline-flex; }
.labgd-ui-clear{ background: var(--labgd-yellow-soft) !important; }
.labgd-update-panel{
  border: 2px solid var(--labgd-line);
  border-radius: 14px;
  background: var(--labgd-brand-soft);
  box-shadow: var(--labgd-sticker);
  padding: 13px;
  opacity: 0.55;
}
.labgd-mockup.is-generated .labgd-update-panel,
.labgd-mockup.is-refined .labgd-update-panel{ opacity: 1; }
.labgd-update-panel div{ display: flex; gap: 8px; }
.labgd-update-panel input{
  min-width: 0;
  flex: 1;
  padding: 9px 10px;
}
.labgd-feedback-row{ display: flex; gap: 8px; }
.labgd-ui-feedback[aria-pressed="true"]{ background: var(--labgd-green) !important; color: #fff !important; }
.labgd-disclaimer{
  border-top: 2px dashed var(--labgd-line);
  padding-top: 12px;
  color: var(--labgd-muted);
  font-size: 0.82rem;
}
.labgd-annotations{ display: grid; gap: 10px; }
.labgd-annotation{
  border: 2px solid var(--labgd-line);
  border-radius: 12px;
  background: var(--labgd-yellow-soft);
  box-shadow: 2px 2px 0 var(--labgd-line);
  padding: 11px 12px;
}
.labgd-annotation:nth-child(2n){ background: var(--labgd-brand-soft); transform: rotate(0.7deg); }
.labgd-annotation b,
.labgd-annotation span{ display: block; }
.labgd-annotation b{ color: var(--labgd-ink); font-size: 0.86rem; margin-bottom: 3px; }
.labgd-annotation span{ color: var(--labgd-muted); font-size: 0.8rem; line-height: 1.35; }
.labgd-constraint-chips{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
}
.labgd-final-caption{
  margin: 20px 0 0;
  text-align: center;
  color: var(--labgd-brand-strong);
  font-size: clamp(1.3rem, 2.5cqi, 1.9rem);
  font-weight: 900;
}
@container (max-width: 58rem){
.labgd-final-stage{ grid-template-columns: 1fr; }
}
@container (max-width: 38rem){
.labgd-update-panel div{ flex-direction: column; }
}
/* ---- Asset 09 trust + metrics ---- */
.labgd-trust-system{
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  gap: clamp(18px, 3cqi, 30px);
  align-items: start;
}
.labgd-trust-framework,
.labgd-metrics-board{
  border: 2px solid var(--labgd-line);
  border-radius: 18px;
  background: var(--labgd-surface);
  box-shadow: var(--labgd-sticker-lg);
  padding: clamp(16px, 2.4cqi, 22px);
}
.labgd-trust-label{
  margin: 0 0 14px;
  color: var(--labgd-muted);
  font-size: 0.72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.labgd-trust-stack{
  display: flex;
  flex-direction: column-reverse;
  gap: 8px;
}
.labgd-trust-layer{
  width: 100%;
  display: grid;
  gap: 4px;
  border: 2px solid var(--labgd-line);
  border-radius: 13px;
  box-shadow: 2px 2px 0 var(--labgd-line);
  padding: 12px 13px;
  text-align: left;
  background: var(--labgd-brand-soft);
  color: var(--labgd-ink);
}
.labgd-trust-layer--1{ background: #fff; }
.labgd-trust-layer--2{ background: var(--labgd-yellow-soft); }
.labgd-trust-layer--3{ background: #fdeceb; }
.labgd-trust-layer--4{ background: var(--labgd-green-soft); }
.labgd-trust-layer--5{ background: var(--labgd-lav); }
.labgd-trust-layer[aria-pressed="true"]{ transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--labgd-line); }
.labgd-trust-layer strong{ color: var(--labgd-ink); font-size: 0.98rem; }
.labgd-trust-layer span{ color: var(--labgd-muted); font-size: 0.84rem; line-height: 1.4; }
.labgd-trust-callouts{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.labgd-trust-callouts span{
  border: 2px solid var(--labgd-line);
  border-radius: 999px;
  background: var(--labgd-yellow);
  color: var(--labgd-ink);
  box-shadow: 2px 2px 0 var(--labgd-line);
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 800;
}
.labgd-metric-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: 10px;
}
.labgd-metric{
  border: 2px solid var(--labgd-line);
  border-radius: 14px;
  background: var(--labgd-surface);
  box-shadow: 2px 2px 0 var(--labgd-line);
  padding: 13px;
}
.labgd-metric span{
  display: block;
  color: var(--labgd-muted);
  font-size: 0.7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.labgd-metric strong{
  display: block;
  margin: 5px 0;
  color: var(--labgd-brand);
  font-size: clamp(1.5rem, 3cqi, 2.15rem);
  line-height: 1;
}
.labgd-metric p{
  margin: 0;
  color: var(--labgd-ink);
  font-size: 0.83rem;
  line-height: 1.35;
}
.labgd-testing-card{
  display: grid;
  gap: 5px;
  margin-top: 12px;
  border: 2px solid var(--labgd-line);
  border-radius: 14px;
  background: var(--espresso);
  color: #fff;
  box-shadow: var(--labgd-sticker);
  padding: 13px;
}
.labgd-testing-card b{ color: var(--blossom); }
.labgd-testing-card span{ color: rgba(255, 255, 255, 0.86); font-size: 0.88rem; }
.labgd-system-constraints{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.labgd-trust-bottom{
  margin: clamp(18px, 3cqi, 28px) 0 0;
  border: 2px solid var(--labgd-line);
  border-radius: 14px;
  background: var(--labgd-yellow);
  color: var(--labgd-ink);
  box-shadow: var(--labgd-sticker-lg);
  padding: 16px 18px;
  font-size: clamp(1.05rem, 2cqi, 1.35rem);
  line-height: 1.35;
  font-weight: 900;
  text-align: center;
}
@container (max-width: 58rem){
.labgd-trust-system{ grid-template-columns: 1fr; }
}
/* ============================================================
   Case-study reading column fix.
   Base .container uses --max:1540px (too wide for a text-heavy
   case study), which left the prose hugging the left edge.
   Constrain the Generate Draft column to a centered ~1080px.
   ============================================================ */
.labgd-page .container{ width: min(1080px, calc(100% - 40px)); margin-inline: auto; }
/* let the hero timeline + final mockup breathe a little wider */
.labgd-page .labgd-hero .container{ width: min(1180px, calc(100% - 40px)); }
/* ============================================================
   SOFT-GIRL × FIGJAM CROSSOVER (glassmorphism)
   Frosted glass surfaces, pastel gradient canvas, soft glows,
   gradient headings. Keeps playful FigJam structure, softened.
   Typography untouched (inherits homepage font).
   Scalable only: tints/opacity/glass — NO new fixed widths.
   ============================================================ */
.labgd-page{
  --labgd-brand: #7c6cf0;
  --labgd-brand-strong: #5b4bd6;
  --labgd-brand-soft: #ece9ff;
  --labgd-lav: #d9d2ff;
  --labgd-yellow: #ffd86b;
  --labgd-yellow-soft: #fff3cf;
  --labgd-green: #7fd6b0;
  --labgd-green-soft: #e1f6ed;
  --labgd-red: #f4889a;
  --labgd-red-soft: #ffe2ea;
  --labgd-purple: #9b7cf0;
  --labgd-line: rgba(43, 39, 80, 0.16);
  --labgd-ink: #2b2750;
  --labgd-muted: #6b6790;
  --labgd-border: rgba(120, 110, 170, 0.20);
  --labgd-surface: rgba(255, 255, 255, 0.58);
  --labgd-surface-2: rgba(255, 255, 255, 0.42);
  --labgd-glass-border: rgba(255, 255, 255, 0.7);
  --labgd-radius: 18px;
  --labgd-radius-lg: 26px;
  --labgd-sticker: 0 10px 28px rgba(95, 75, 214, 0.14);
  --labgd-sticker-lg: 0 18px 44px rgba(95, 75, 214, 0.20);
  --labgd-dot: rgba(124, 108, 240, 0.10);
  --labgd-glass: blur(14px) saturate(1.2);
  background-color: #efe9ff;
  background-image:
    radial-gradient(var(--labgd-dot) 1.4px, transparent 1.5px),
    radial-gradient(38rem 30rem at 10% 6%, rgba(155, 124, 240, 0.24), transparent 62%),
    radial-gradient(34rem 28rem at 92% 18%, rgba(120, 170, 255, 0.22), transparent 62%),
    radial-gradient(42rem 34rem at 74% 96%, rgba(255, 150, 185, 0.18), transparent 60%),
    linear-gradient(165deg, #efeaff 0%, #e7edff 42%, #f6ebff 70%, #ffeef1 100%);
  background-size: 26px 26px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}
/* ---- gradient headings (typography unchanged, just fill) ---- */
.labgd-hero-title,
.labgd-asset-title,
.labgd-section-title{
  background: linear-gradient(100deg, #6c5ce7, #4f8af7 55%, #b86ad8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* ---- frosted-glass neutral surfaces ---- */
.labgd-phase,
.labgd-tension-card,
.labgd-draft-card,
.labgd-mechanism,
.labgd-conf-card,
.labgd-legend,
.labgd-matrix-insight,
.labgd-snapshot-grid > div,
.labgd-rabbit-step,
.labgd-validation-card,
.labgd-research-cluster,
.labgd-flow-panel,
.labgd-window,
.labgd-annotation,
.labgd-trust-layer,
.labgd-metric,
.labgd-testing-card,
.labgd-model-card{
  background: var(--labgd-surface);
  -webkit-backdrop-filter: var(--labgd-glass);
  backdrop-filter: var(--labgd-glass);
  border: 1.5px solid var(--labgd-glass-border);
  box-shadow: var(--labgd-sticker);
  border-radius: var(--labgd-radius);
}
.labgd-snapshot-grid{ background: var(--labgd-border); border: 1.5px solid var(--labgd-glass-border); box-shadow: var(--labgd-sticker-lg); border-radius: var(--labgd-radius-lg); }
/* ---- chips / pills → soft frosted ---- */
.labgd-context-list li,
.labgd-evidence li,
.labgd-risk-tags li,
.labgd-constraint-chips li,
.labgd-system-constraints span,
.labgd-rabbit-tags span,
.labgd-trust-callouts span,
.labgd-flow-math span{
  background: var(--labgd-surface);
  -webkit-backdrop-filter: var(--labgd-glass);
  backdrop-filter: var(--labgd-glass);
  border: 1.5px solid var(--labgd-glass-border);
  box-shadow: 0 4px 14px rgba(95, 75, 214, 0.10);
}
/* ---- semantic tints kept, softened to pastel translucency ---- */
.labgd-conf-band--high{ background: rgba(127, 214, 176, 0.26); }
.labgd-conf-band--med{ background: rgba(255, 216, 107, 0.26); }
.labgd-conf-band--low{ background: rgba(244, 136, 154, 0.20); }
.labgd-conf-band{ -webkit-backdrop-filter: var(--labgd-glass); backdrop-filter: var(--labgd-glass); border: 1.5px solid var(--labgd-glass-border); box-shadow: var(--labgd-sticker); }
.labgd-conf-card--danger{ background: rgba(244, 136, 154, 0.92); border-color: rgba(255,255,255,0.6); }
.labgd-tension-card:nth-child(1){ background: rgba(217, 210, 255, 0.45); }
.labgd-tension-card:nth-child(2){ background: rgba(255, 224, 138, 0.38); }
.labgd-tension-card--win{ background: rgba(127, 214, 176, 0.40); box-shadow: var(--labgd-sticker-lg); }
.labgd-matrix-insight{ background: rgba(155, 124, 240, 0.20); }
.labgd-matrix-warning{ background: rgba(244, 136, 154, 0.92); color: #4a1622; border: 1.5px solid rgba(255,255,255,0.6); box-shadow: var(--labgd-sticker); }
.labgd-matrix-warning .labgd-conf-warn-ico{ color: #7a1d2c; }
/* ---- phase colored top-bars → pastel ---- */
.labgd-timeline .labgd-phase:nth-child(1)::before{ background: linear-gradient(90deg,#7c6cf0,#5b9bff); }
.labgd-timeline .labgd-phase:nth-child(3)::before{ background: linear-gradient(90deg,#ffd86b,#ffb37a); }
.labgd-timeline .labgd-phase:nth-child(5)::before{ background: linear-gradient(90deg,#9b7cf0,#c98ce0); }
.labgd-timeline .labgd-phase:nth-child(7)::before{ background: linear-gradient(90deg,#7fd6b0,#6fc6d6); }
/* ---- buttons → pastel gradient + soft glow ---- */
.labgd-magic-btn,
.labgd-ui-generate,
.labgd-ui-update{
  background: linear-gradient(135deg, #7c6cf0, #5b9bff);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 10px 26px rgba(95, 75, 214, 0.34);
  border-radius: 14px;
  animation: none;
}
.labgd-magic-btn:hover,
.labgd-ui-generate:hover,
.labgd-ui-update:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px rgba(95, 75, 214, 0.42); }
/* ---- highlighter kickers → frosted pastel pill ---- */
.labgd-eyebrow,
.labgd-asset-eyebrow,
.labgd-section-kicker{
  background: rgba(155, 124, 240, 0.18);
  color: var(--labgd-brand-strong);
  border: 1.5px solid var(--labgd-glass-border);
  -webkit-backdrop-filter: var(--labgd-glass);
  backdrop-filter: var(--labgd-glass);
  box-shadow: 0 6px 16px rgba(95, 75, 214, 0.12);
  transform: rotate(-1deg);
}
/* ---- quote / sticky → soft pastel note ---- */
.labgd-quote{ background: rgba(255, 224, 138, 0.5); color: var(--labgd-ink); border: 1.5px solid var(--labgd-glass-border); box-shadow: var(--labgd-sticker-lg); }
.labgd-quote cite{ color: var(--labgd-muted); }
/* ---- ordered step badges + principle badges ---- */
.labgd-steps li::before,
.labgd-principles b{ background: linear-gradient(135deg,#7c6cf0,#5b9bff); color: #fff; border: 1.5px solid rgba(255,255,255,0.6); box-shadow: 0 4px 12px rgba(95,75,214,0.22); }
.labgd-principles li{ border: 1.5px solid var(--labgd-glass-border); box-shadow: var(--labgd-sticker); -webkit-backdrop-filter: var(--labgd-glass); backdrop-filter: var(--labgd-glass); }
.labgd-principles li:nth-child(1){ background: rgba(217,210,255,0.5); }
.labgd-principles li:nth-child(2){ background: rgba(255,224,138,0.42); }
.labgd-principles li:nth-child(3){ background: rgba(127,214,176,0.42); }
/* ---- hand-drawn connectors softened ---- */
.labgd-connector{ color: rgba(123, 108, 240, 0.6); }
/* ---- hero stickers: soften ---- */
.labgd-sticker--star2 svg path{ fill: #9b7cf0; }
/* ---- dark mode ---- */
[data-theme="dark"] .labgd-page{
  --labgd-ink: #efeaff;
  --labgd-muted: #aaa3d6;
  --labgd-line: rgba(255,255,255,0.14);
  --labgd-border: rgba(255,255,255,0.14);
  --labgd-surface: rgba(40, 36, 70, 0.5);
  --labgd-surface-2: rgba(40, 36, 70, 0.38);
  --labgd-glass-border: rgba(255,255,255,0.14);
  --labgd-brand-soft: rgba(124,108,240,0.18);
  --labgd-dot: rgba(180,160,255,0.10);
  background-color: #15132b;
  background-image:
    radial-gradient(var(--labgd-dot) 1.4px, transparent 1.5px),
    radial-gradient(38rem 30rem at 10% 6%, rgba(124,108,240,0.30), transparent 62%),
    radial-gradient(34rem 28rem at 92% 18%, rgba(70,110,200,0.28), transparent 62%),
    radial-gradient(42rem 34rem at 74% 96%, rgba(200,90,140,0.22), transparent 60%),
    linear-gradient(165deg,#15132b,#1a1840 45%,#221a40 72%,#2a1730);
}
/* ---- Asset 06 rebuilt: auto-fit model cards (fully scalable) ---- */
.labgd-decision-cards{
  display: grid;
  gap: clamp(12px, 2cqi, 18px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin-top: clamp(18px, 3vw, 28px);
}
.labgd-model-card{
  position: relative;
  padding: clamp(16px, 2cqi, 22px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.labgd-model-card.is-win{ box-shadow: var(--labgd-sticker-lg); outline: 2px solid rgba(124, 108, 240, 0.5); outline-offset: -1px; }
.labgd-model-flag{
  position: absolute; top: -10px; left: 16px;
  font-size: 0.64rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff; background: linear-gradient(135deg, #7c6cf0, #5b9bff);
  border: 1.5px solid rgba(255,255,255,0.6); border-radius: 999px; padding: 4px 10px;
  box-shadow: 0 6px 14px rgba(95,75,214,0.28);
}
.labgd-model-head strong{ display: block; font-size: 1.04rem; color: var(--labgd-ink); }
.labgd-model-head p{ margin: 6px 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--labgd-muted); }
.labgd-model-ratings{ margin: 0; display: grid; gap: 9px; }
.labgd-model-rating-row{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  padding: 7px 8px;
  text-align: left;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}
.labgd-model-rating-row:hover,
.labgd-model-rating-row.is-active{
  background: color-mix(in srgb, var(--blossom) 30%, var(--surface));
  border-color: var(--labgd-glass-border);
}
.labgd-model-rating-row.is-active{ transform: translateX(2px); }
.labgd-model-rating-row:focus-visible{
  outline: 2px solid var(--labgd-brand);
  outline-offset: 2px;
}
.labgd-model-criterion{
  min-width: 0;
  color: var(--labgd-muted);
  font-size: 0.85rem;
  line-height: 1.25;
}
.labgd-model-foot{ margin-top: auto; display: grid; gap: 6px; border-top: 1px dashed var(--labgd-border); padding-top: 12px; }
.labgd-model-foot p{ margin: 0; font-size: 0.82rem; line-height: 1.45; }
.labgd-model-strength{ color: #2f9d77; font-weight: 550; }
.labgd-model-weak{ color: var(--labgd-muted); }
.labgd-model-focus{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 12px;
  margin: clamp(12px, 2cqi, 18px) 0 0;
  border: 1.5px solid var(--labgd-glass-border);
  border-radius: 14px;
  background: var(--labgd-surface);
  -webkit-backdrop-filter: var(--labgd-glass);
  backdrop-filter: var(--labgd-glass);
  color: var(--labgd-muted);
  box-shadow: var(--labgd-sticker);
  padding: 12px 14px;
  line-height: 1.45;
}
.labgd-model-focus b{
  color: var(--labgd-brand-strong);
  font-size: 0.9rem;
}
.labgd-model-focus span{
  flex: 1 1 18rem;
  min-width: min(100%, 14rem);
}
/* ============================================================
   PALETTE: homepage hero + cherry-blossom photo.
   Maps the case study onto the site's OWN tokens (blossom pink,
   denim blue, cognac/brown, leaf green, warm cream) so it matches
   the homepage AND inherits light/dark variants automatically.
   Accessibility: body text uses --text; large gradient headings
   meet 3:1; accent fills always pair with --text or --labgd-on-accent.
   This block is last, so it overrides the earlier lavender layer.
   ============================================================ */
.labgd-page{
  --labgd-ink: var(--text);
  --labgd-muted: color-mix(in srgb, var(--muted) 72%, var(--text));
  --labgd-brand: var(--accent-3);
  --labgd-brand-strong: var(--brown);
  --labgd-brand-soft: color-mix(in srgb, var(--cognac) 22%, var(--surface));
  --labgd-line: var(--line-strong);
  --labgd-border: var(--line);
  --labgd-surface: color-mix(in srgb, var(--surface) 64%, transparent);
  --labgd-surface-2: color-mix(in srgb, var(--surface-2) 55%, transparent);
  --labgd-glass-border: color-mix(in srgb, var(--surface) 85%, transparent);
  --labgd-good: color-mix(in srgb, var(--leaf) 64%, var(--text));
  --labgd-good-soft: color-mix(in srgb, var(--leaf) 26%, var(--surface));
  --labgd-warn: var(--accent-3);
  --labgd-warn-soft: color-mix(in srgb, var(--cognac) 22%, var(--surface));
  --labgd-risk: color-mix(in srgb, var(--accent) 60%, var(--text));
  --labgd-risk-soft: color-mix(in srgb, var(--accent) 30%, var(--surface));
  --labgd-dot: var(--grid-line);
  --labgd-sticker: var(--soft-shadow);
  --labgd-sticker-lg: var(--shadow);
  --labgd-on-accent: #fffaf7;            /* text on dark accent (light theme) */
  background-color: var(--bg);
  background-image:
    radial-gradient(var(--labgd-dot) 1.3px, transparent 1.4px),
    radial-gradient(40rem 32rem at 8% 4%, color-mix(in srgb, var(--blossom) 55%, transparent), transparent 60%),
    radial-gradient(34rem 30rem at 94% 15%, color-mix(in srgb, var(--denim-soft) 45%, transparent), transparent 60%),
    radial-gradient(44rem 36rem at 78% 98%, color-mix(in srgb, var(--leaf) 28%, transparent), transparent 60%),
    linear-gradient(165deg, color-mix(in srgb, var(--blossom-soft) 72%, var(--bg)), var(--bg) 46%, color-mix(in srgb, var(--denim-soft) 14%, var(--bg)));
  background-size: 24px 24px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}
[data-theme="dark"] .labgd-page{ --labgd-on-accent: #1a1210; }
/* dark text on light accent */

/* gradient headings — cognac → denim → brown (all ≥3:1 as large text, both themes) */
.labgd-hero-title,
.labgd-asset-title,
.labgd-section-title{
  background: linear-gradient(100deg, var(--accent-3), var(--denim) 58%, var(--brown));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* buttons — brown → denim, theme-aware text colour */
.labgd-magic-btn,
.labgd-ui-generate,
.labgd-ui-update{
  background: linear-gradient(135deg, var(--brown), var(--denim));
  color: var(--labgd-on-accent);
  border: 1.5px solid var(--labgd-glass-border);
  box-shadow: var(--labgd-sticker-lg);
}
/* kicker pills — soft blossom tint, brown text */
.labgd-eyebrow,
.labgd-asset-eyebrow,
.labgd-section-kicker{
  background: color-mix(in srgb, var(--blossom) 36%, var(--surface));
  color: var(--labgd-brand-strong);
}
/* phase top-bars — the four photo hues */
.labgd-timeline .labgd-phase:nth-child(1)::before{ background: linear-gradient(90deg, var(--accent), var(--cognac)); }
.labgd-timeline .labgd-phase:nth-child(3)::before{ background: linear-gradient(90deg, var(--cognac), var(--leaf)); }
.labgd-timeline .labgd-phase:nth-child(5)::before{ background: linear-gradient(90deg, var(--denim), var(--accent)); }
.labgd-timeline .labgd-phase:nth-child(7)::before{ background: linear-gradient(90deg, var(--leaf), var(--denim)); }
.labgd-timeline .labgd-phase:nth-child(1) .labgd-phase-glyph{ color: var(--accent-3); }
.labgd-timeline .labgd-phase:nth-child(3) .labgd-phase-glyph{ color: var(--labgd-good); }
.labgd-timeline .labgd-phase:nth-child(5) .labgd-phase-glyph{ color: var(--denim); }
.labgd-timeline .labgd-phase:nth-child(7) .labgd-phase-glyph{ color: var(--labgd-good); }
/* semantic tints — text stays --text for contrast in both themes */
.labgd-conf-band--high{ background: var(--labgd-good-soft); }
.labgd-conf-band--med{ background: var(--labgd-warn-soft); }
.labgd-conf-band--low{ background: var(--labgd-risk-soft); }
.labgd-conf-card--danger{ background: color-mix(in srgb, var(--accent) 30%, var(--surface)); border-color: var(--labgd-risk); }
.labgd-conf-card--danger .labgd-conf-toggle,
.labgd-conf-card--danger .labgd-conf-chevron,
.labgd-conf-card--danger .labgd-conf-warn-ico{ color: var(--text); }
.labgd-conf-card--danger .labgd-conf-why{ color: var(--labgd-muted); }
.labgd-conf-card--danger .labgd-conf-dot{ background: var(--labgd-risk); }
.labgd-tension-card:nth-child(1){ background: color-mix(in srgb, var(--blossom) 38%, var(--surface)); }
.labgd-tension-card:nth-child(2){ background: color-mix(in srgb, var(--cognac) 24%, var(--surface)); }
.labgd-tension-card--win{ background: color-mix(in srgb, var(--leaf) 32%, var(--surface)); }
.labgd-matrix-insight{ background: color-mix(in srgb, var(--denim) 18%, var(--surface)); }
.labgd-matrix-warning{ background: color-mix(in srgb, var(--accent) 30%, var(--surface)); color: var(--text); border-color: var(--labgd-risk); }
.labgd-matrix-warning .labgd-conf-warn-ico{ color: var(--labgd-risk); }
/* quote sticky, step/principle badges, connectors */
.labgd-quote{ background: color-mix(in srgb, var(--blossom) 46%, var(--surface)); color: var(--text); }
.labgd-quote cite{ color: var(--labgd-muted); }
.labgd-steps li::before,
.labgd-principles b{ background: linear-gradient(135deg, var(--brown), var(--denim)); color: var(--labgd-on-accent); }
.labgd-principles li:nth-child(1){ background: color-mix(in srgb, var(--blossom) 38%, var(--surface)); }
.labgd-principles li:nth-child(2){ background: color-mix(in srgb, var(--cognac) 24%, var(--surface)); }
.labgd-principles li:nth-child(3){ background: color-mix(in srgb, var(--leaf) 30%, var(--surface)); }
.labgd-magic-quote{ color: var(--labgd-brand-strong); }
.labgd-connector{ color: color-mix(in srgb, var(--brown) 70%, transparent); }
.labgd-model-card.is-win{ outline-color: color-mix(in srgb, var(--leaf) 70%, var(--text)); }
.labgd-model-flag{ background: linear-gradient(135deg, var(--brown), var(--denim)); color: var(--labgd-on-accent); }
.labgd-model-strength{ color: var(--labgd-good); }
/* hero stickers recolored to palette (face/stars; eyes stay dark) */
.labgd-sticker--smiley svg circle:first-of-type{ fill: var(--cognac); }
.labgd-sticker--star1 svg path{ fill: var(--denim); }
.labgd-sticker--star2 svg path{ fill: var(--accent-3); }
/* a11y fix: kicker label was 4.1:1 in dark (tan on pink tint). Base the fill
   on the theme-aware glass surface so text contrast holds in both modes;
   keep the blossom hue on the border. */
.labgd-eyebrow,
.labgd-asset-eyebrow,
.labgd-section-kicker{
  background: var(--labgd-surface);
  color: var(--labgd-brand-strong);
  border: 1.5px solid color-mix(in srgb, var(--blossom) 62%, var(--labgd-glass-border));
}
/* repalette the leftover yellow challenge banner → cognac tint, accessible text */
.labgd-snapshot-challenge{
  background: color-mix(in srgb, var(--cognac) 28%, var(--surface));
  color: var(--text);
  -webkit-backdrop-filter: var(--labgd-glass);
  backdrop-filter: var(--labgd-glass);
}
.labgd-snapshot-challenge span{ color: var(--labgd-brand-strong); }
/* polish: snapshot lands on 3 cols (6 items, no empty cells) — still auto-fit */
.labgd-snapshot-grid{ grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
/* polish: Update-With-AI input row wraps the button below when tight (scalable) */
.labgd-update-panel > div{ flex-wrap: wrap; }
.labgd-update-panel input{ flex: 1 1 12rem; min-width: 0; }
/* ============================================================
   Asset 05 redesign — cluster spotlight + a11y/palette fixes.
   (Codex's version used --labgd-line for text/bg, which became
   translucent after the palette remap → invisible headings &
   validation card. Fixed here; tints made theme-aware.)
   ============================================================ */
.labgd-research-cluster h4{ color: var(--labgd-ink); }
/* was --labgd-line (invisible) */
.labgd-research-cluster--red{ background: color-mix(in srgb, var(--accent) 24%, var(--surface)); }
.labgd-research-cluster--yellow{ background: color-mix(in srgb, var(--cognac) 22%, var(--surface)); }
.labgd-research-cluster--green{ background: color-mix(in srgb, var(--leaf) 24%, var(--surface)); }
.labgd-research-cluster--purple{ background: color-mix(in srgb, var(--brown) 18%, var(--surface)); }
.labgd-research-cluster--blue{ background: color-mix(in srgb, var(--denim) 20%, var(--surface)); }
.labgd-cluster-toggle{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.labgd-cluster-toggle h4{ margin: 0; }
.labgd-cluster-toggle:focus-visible{ outline: 2px solid var(--labgd-brand); outline-offset: 3px; border-radius: 8px; }
.labgd-cluster-hint{
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--labgd-brand-strong);
  background: var(--labgd-surface);
  border: 1.5px solid var(--labgd-glass-border);
  border-radius: 999px;
  padding: 3px 9px;
  opacity: 0.65;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.labgd-cluster-toggle:hover .labgd-cluster-hint{ opacity: 1; }
.labgd-cluster-toggle[aria-pressed="true"] .labgd-cluster-hint{ opacity: 1; background: color-mix(in srgb, var(--blossom) 42%, var(--surface)); }
/* notes are now static (no per-note interaction) */
.labgd-note{ cursor: default; }
.labgd-note:hover{ transform: rotate(var(--r)); box-shadow: 2px 2px 0 var(--labgd-line); }
/* spotlight: lift the chosen cluster, dim the rest */
.labgd-research-wall.is-spotlighting .labgd-research-cluster{ opacity: 0.42; transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
.labgd-research-wall.is-spotlighting .labgd-research-cluster.is-spotlight{ opacity: 1; transform: translateY(-3px); box-shadow: var(--labgd-sticker-lg); }
/* validation card: solid dark surface in BOTH themes (was --labgd-line → transparent) */
.labgd-validation-card{ background: var(--espresso); color: #fff; }
.labgd-validation-label{ color: var(--blossom); }
.labgd-validation-card ul{ color: rgba(255, 255, 255, 0.86); }
/* ============================================================
   Asset 09 redesign — progressive trust build + a11y/palette fixes.
   (Titles used --labgd-line → invisible after remap; tints not
   theme-aware. Fixed. Layers now fill up to the selected level.)
   ============================================================ */
.labgd-trust-layer strong{ color: var(--labgd-ink); }
/* was --labgd-line (invisible) */
.labgd-trust-layer--1{ background: color-mix(in srgb, var(--denim) 18%, var(--surface)); }
.labgd-trust-layer--2{ background: color-mix(in srgb, var(--cognac) 20%, var(--surface)); }
.labgd-trust-layer--3{ background: color-mix(in srgb, var(--accent) 22%, var(--surface)); }
.labgd-trust-layer--4{ background: color-mix(in srgb, var(--leaf) 22%, var(--surface)); }
.labgd-trust-layer--5{ background: color-mix(in srgb, var(--blossom) 30%, var(--surface)); }
.labgd-trust-layer{ transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; }
/* reset old single-highlight lift (all active layers carry aria-pressed now) */
.labgd-trust-layer[aria-pressed="true"]{ transform: none; box-shadow: var(--labgd-sticker); }
/* pending = not yet built (de-emphasized future state) */
.labgd-trust-layer.is-pending{ opacity: 0.5; border-style: dashed; box-shadow: none; }
/* current = the level you've built up to */
.labgd-trust-layer.is-current{ transform: translate(-3px, -3px); box-shadow: var(--labgd-sticker-lg); }
.labgd-trust-level{
  display: inline-block;
  margin: 12px 0 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--labgd-brand-strong);
  background: var(--labgd-surface);
  border: 1.5px solid var(--labgd-glass-border);
  border-radius: 999px;
  padding: 6px 13px;
}
/* final contrast pass: yellow sticker surfaces need dark text in both themes */
.labgd-flow-center,
.labgd-flow-center strong,
.labgd-flow-center span,
.labgd-rabbit-reflection,
.labgd-window-head span:last-child,
.labgd-ui-clear,
.labgd-trust-callouts span,
.labgd-trust-bottom{
  color: var(--espresso) !important;
}
/* final contrast pass: keep dark metric/testing cards dark after glass defaults */
.labgd-testing-card{
  background: var(--espresso);
  color: #fff;
}
.labgd-testing-card b{ color: var(--blossom); }
.labgd-testing-card span{ color: rgba(255, 255, 255, 0.86); }
/* =========================================================
   AUTOSYNC — "From Lead Page to Deal Workspace" case study
   Scoped .labas-* tokens mapped to the site palette (Activix-navy
   lean). Both themes defined; every text/bg pair targets WCAG AA.
   Diagrams are responsive in-page components (auto-fit / clamp /
   container queries), never raster screenshots.
   ========================================================= */
.labas-page{
  --labas-brand: #2f4f86;
  --labas-brand-strong: #21385f;
  --labas-brand-soft: #e9eef7;
  --labas-ink: #1b2742;
  --labas-muted: #4b5a76;
  --labas-surface: #ffffff;
  --labas-surface-2: #f4f7fc;
  --labas-border: #d9e2f0;
  --labas-accent: #875421;
  --labas-accent-soft: #f6ecdd;
  --labas-teal: #246d80;
  --labas-teal-soft: #e2f0f3;
  --labas-good: #0f7a4e;
  --labas-good-soft: #e6f5ee;
  --labas-warn: #a9750f;
  --labas-warn-soft: #fbf1dd;
  --labas-risk: #b3303f;
  --labas-risk-soft: #fbe7e9;
  --labas-radius: 16px;
  --labas-radius-lg: 24px;
  --labas-shadow: 0 1px 2px rgba(16, 33, 70, 0.05), 0 10px 30px rgba(16, 33, 70, 0.08);
  --labas-shadow-lg: 0 16px 48px rgba(47, 79, 134, 0.18);
}
[data-theme="dark"] .labas-page{
  --labas-brand: #7aa2f0;
  --labas-brand-strong: #a9c4ff;
  --labas-brand-soft: #1a2742;
  --labas-ink: #eaf0fb;
  --labas-muted: #a6b2cb;
  --labas-surface: #141c2e;
  --labas-surface-2: #1b2438;
  --labas-border: #2a3550;
  --labas-accent: #d59a5a;
  --labas-accent-soft: rgba(213, 154, 90, 0.16);
  --labas-teal: #6fc0d4;
  --labas-teal-soft: rgba(111, 192, 212, 0.16);
  --labas-good: #57c89a;
  --labas-good-soft: rgba(31, 143, 99, 0.2);
  --labas-warn: #e0ac4f;
  --labas-warn-soft: rgba(169, 117, 15, 0.22);
  --labas-risk: #e8808d;
  --labas-risk-soft: rgba(192, 65, 79, 0.22);
  --labas-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.45);
  --labas-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.labas-page{ color: var(--labas-ink); }
.labas-page .container{ max-width: 1100px; }
/* ---- Hero ---- */
.labas-hero{
  position: relative;
  padding: clamp(2.4rem, 6vw, 5rem) 0 clamp(1.6rem, 4vw, 3rem);
  overflow: hidden;
}
.labas-hero-stickers{ position: absolute; inset: 0; pointer-events: none; }
.labas-sticker{ position: absolute; opacity: 0.9; }
.labas-sticker svg{ width: 100%; height: 100%; overflow: visible; }
.labas-sticker--car{ width: clamp(46px, 7vw, 72px); top: 8%; right: 6%; transform: rotate(-6deg); }
.labas-sticker--spark{ width: clamp(22px, 3vw, 34px); top: 26%; left: 4%; }
.labas-sticker--squiggle{ width: clamp(56px, 9vw, 92px); bottom: 12%; right: 12%; opacity: 0.5; }
[data-theme="dark"] .labas-sticker{ opacity: 0.55; }
.labas-eyebrow{
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--labas-brand);
  margin: 0 0 0.8rem;
}
.labas-hero-title{
  font-size: clamp(2.1rem, 6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 0.9rem;
  color: var(--labas-ink);
}
.labas-hero-lead{
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  line-height: 1.5;
  color: var(--labas-muted);
  max-width: 46ch;
  margin: 0 0 clamp(1.8rem, 4vw, 2.8rem);
}
/* ---- Snapshot ---- */
.labas-snapshot{ padding: clamp(1.4rem, 3vw, 2.4rem) 0; }
.labas-snapshot-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--labas-border);
  border: 1px solid var(--labas-border);
  border-radius: var(--labas-radius);
  overflow: hidden;
  margin: 0 0 1.2rem;
}
.labas-snapshot-grid > div{ background: var(--labas-surface); padding: 1.05rem 1.2rem; }
.labas-snapshot-grid dt{
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--labas-muted);
  margin-bottom: 0.35rem;
}
.labas-snapshot-grid dd{ margin: 0; font-size: 0.96rem; line-height: 1.45; color: var(--labas-ink); }
.labas-snapshot-challenge{
  background: var(--labas-brand-soft);
  border: 1px solid var(--labas-border);
  border-radius: var(--labas-radius);
  padding: 1.1rem 1.3rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--labas-ink);
  margin: 0;
}
.labas-snapshot-challenge span{
  display: inline-block;
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--labas-brand);
  margin-right: 0.5rem;
}
/* ---- Section frame ---- */
.labas-section{ padding: clamp(2.2rem, 5vw, 3.6rem) 0; }
.labas-section-kicker{
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--labas-brand);
  margin: 0 0 0.6rem;
}
.labas-section-title{
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  color: var(--labas-ink);
  max-width: 24ch;
}
.labas-section-body{ max-width: 62ch; }
.labas-section-body p{ font-size: 1.04rem; line-height: 1.65; color: var(--labas-muted); margin: 0 0 1rem; }
.labas-section-body p strong{ color: var(--labas-ink); font-weight: 650; }
.labas-emphasis{
  border-left: 3px solid var(--labas-brand);
  padding-left: 1rem;
  color: var(--labas-ink) !important;
  font-weight: 500;
}
.labas-caption{
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--labas-muted);
  margin: 1rem 0 0;
  font-style: italic;
}
.labas-asset{
  container-type: inline-size;
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}
/* ---- Hero evolution timeline ---- */
.labas-arc{
  font-family: var(--grotesk);
  font-size: clamp(0.74rem, 1.6vw, 0.9rem);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--labas-brand);
  margin: 0 0 1.1rem;
}
.labas-tl-track{ position: relative; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.labas-tl-rail{
  position: absolute;
  top: 22px;
  left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--labas-border), var(--labas-brand), var(--labas-border));
  z-index: 0;
}
.labas-tl-phase{ position: relative; z-index: 1; flex: 1 1 12rem; min-width: 0; }
.labas-tl-node{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--labas-brand);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--grotesk);
  font-weight: 700;
  margin-bottom: 0.7rem;
  box-shadow: var(--labas-shadow);
}
[data-theme="dark"] .labas-tl-node{ color: #0e1525; }
.labas-tl-toggle{
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  width: 100%;
  text-align: left;
  background: var(--labas-surface);
  border: 1px solid var(--labas-border);
  border-radius: var(--labas-radius);
  padding: 0.95rem 1rem;
  cursor: pointer;
  color: var(--labas-ink);
  box-shadow: var(--labas-shadow);
  transition: border-color 0.15s, transform 0.15s;
}
.labas-tl-toggle:hover{ border-color: var(--labas-brand); transform: translateY(-2px); }
.labas-tl-toggle:focus-visible{ outline: 2px solid var(--labas-brand); outline-offset: 2px; }
.labas-tl-tag{
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--labas-brand);
}
.labas-tl-name{ font-size: 1.08rem; font-weight: 650; }
.labas-tl-summary{ font-size: 0.9rem; line-height: 1.45; color: var(--labas-muted); }
.labas-tl-more{ font-family: var(--grotesk); font-size: 0.74rem; font-weight: 600; color: var(--labas-brand); margin-top: 0.2rem; }
.labas-tl-more-close{ display: none; }
.labas-tl-toggle[aria-expanded="true"] .labas-tl-more-open{ display: none; }
.labas-tl-toggle[aria-expanded="true"] .labas-tl-more-close{ display: inline; }
.labas-tl-detail{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}
.labas-tl-toggle[aria-expanded="true"] + .labas-tl-detail{ grid-template-rows: 1fr; }
.labas-tl-detail-inner{ overflow: hidden; }
.labas-tl-detail-inner p{
  margin: 0.6rem 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--labas-muted);
  background: var(--labas-surface-2);
  border: 1px solid var(--labas-border);
  border-radius: 12px;
  padding: 0.75rem 0.85rem;
}
@container (max-width: 640px){
.labas-tl-rail{ display: none; }
.labas-tl-phase{ flex: 0 0 auto; width: 100%; }
}
/* ---- Sales journey story map ---- */
.labas-journey-rail{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.labas-journey-stage{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--labas-surface);
  border: 1px solid var(--labas-border);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  color: var(--labas-ink);
  font-size: 0.84rem;
  transition: border-color 0.15s, background 0.15s;
}
.labas-journey-stage:hover{ border-color: var(--labas-brand); }
.labas-journey-stage:focus-visible{ outline: 2px solid var(--labas-brand); outline-offset: 2px; }
.labas-journey-stage.is-active{ background: var(--labas-brand); border-color: var(--labas-brand); color: #fff; }
[data-theme="dark"] .labas-journey-stage.is-active{ color: #0e1525; }
.labas-journey-step{ font-family: var(--grotesk); font-weight: 700; font-size: 0.72rem; opacity: 0.7; }
.labas-journey-label{ font-weight: 550; }
.labas-journey-detail{
  background: var(--labas-surface);
  border: 1px solid var(--labas-border);
  border-radius: var(--labas-radius);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--labas-shadow);
}
.labas-journey-detail-title{
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--labas-brand);
  margin: 0 0 0.3rem;
}
.labas-journey-q{ font-size: 1.2rem; font-weight: 600; color: var(--labas-ink); margin: 0 0 1rem; }
.labas-journey-cols{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.8rem;
}
.labas-journey-col{ border-radius: 12px; padding: 0.85rem 0.95rem; }
.labas-journey-col span{
  display: block;
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.66rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
}
.labas-journey-col p{ margin: 0; font-size: 0.92rem; line-height: 1.5; }
.labas-journey-col--old{ background: var(--labas-risk-soft); }
.labas-journey-col--old span{ color: var(--labas-risk); }
.labas-journey-col--old p{ color: var(--labas-ink); }
.labas-journey-col--now{ background: var(--labas-good-soft); }
.labas-journey-col--now span{ color: var(--labas-good); }
.labas-journey-col--now p{ color: var(--labas-ink); }
/* ---- Old lead page scroll map ---- */
.labas-scroll-grid{
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}
.labas-scroll-page{
  background: var(--labas-surface-2);
  border: 1px solid var(--labas-border);
  border-radius: var(--labas-radius);
  padding: 0.8rem;
  max-height: 360px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}
.labas-scroll-window{ display: flex; flex-direction: column; gap: 0.45rem; }
.labas-scroll-fold{
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--labas-brand);
  margin-bottom: 0.15rem;
}
.labas-scroll-block{
  border-radius: 9px;
  padding: 0.7rem 0.8rem;
  font-size: 0.86rem;
  font-weight: 550;
  border: 1px solid var(--labas-border);
  background: var(--labas-surface);
  color: var(--labas-ink);
}
.labas-scroll-block--top{ border-color: var(--labas-brand); background: var(--labas-brand-soft); }
.labas-scroll-block--mid{ color: var(--labas-muted); }
.labas-scroll-block--work{ border-style: dashed; }
.labas-scroll-notes{ display: flex; flex-direction: column; gap: 0.6rem; }
.labas-scroll-flag{
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 550;
  color: var(--labas-ink);
  margin: 0;
}
.labas-scroll-flag span{ color: var(--labas-brand); font-weight: 700; }
.labas-scroll-flag--warn span{ color: var(--labas-warn); }
.labas-scroll-list{ margin: 0.2rem 0 0; padding-left: 1.1rem; }
.labas-scroll-list li{ font-size: 0.92rem; line-height: 1.55; color: var(--labas-muted); margin-bottom: 0.35rem; }
.labas-scroll-diagnosis{
  margin: 0.4rem 0 0;
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--labas-ink);
  border-left: 3px solid var(--labas-brand);
  padding-left: 0.9rem;
}
@container (max-width: 620px){
.labas-scroll-grid{ grid-template-columns: 1fr; }
}
/* ---- Problem reframe ---- */
.labas-reframe-shift{
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}
.labas-reframe-from, .labas-reframe-to{
  flex: 1 1 16rem;
  border-radius: var(--labas-radius);
  padding: 1rem 1.2rem;
  border: 1px solid var(--labas-border);
}
.labas-reframe-from{ background: var(--labas-surface-2); }
.labas-reframe-to{ background: var(--labas-brand-soft); border-color: var(--labas-brand); }
.labas-reframe-from span, .labas-reframe-to span{
  display: block;
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.68rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.labas-reframe-from span{ color: var(--labas-muted); }
.labas-reframe-to span{ color: var(--labas-brand); }
.labas-reframe-from p, .labas-reframe-to p{ margin: 0; font-size: 1.1rem; font-weight: 600; line-height: 1.35; color: var(--labas-ink); }
.labas-reframe-arrow{ align-self: center; font-size: 1.6rem; color: var(--labas-brand); font-weight: 700; }
.labas-layers{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.9rem;
}
.labas-layer{
  display: flex;
  gap: 0.8rem;
  background: var(--labas-surface);
  border: 1px solid var(--labas-border);
  border-radius: var(--labas-radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--labas-shadow);
}
.labas-layer-n{
  flex: 0 0 auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--labas-brand-soft);
  color: var(--labas-brand);
  display: grid; place-items: center;
  font-family: var(--grotesk); font-weight: 700; font-size: 0.9rem;
}
.labas-layer b{ display: block; font-size: 1rem; color: var(--labas-ink); margin-bottom: 0.25rem; }
.labas-layer p{ margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--labas-muted); }
/* ---- Research snapshot ---- */
.labas-research-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}
.labas-research-card{
  background: var(--labas-surface);
  border: 1px solid var(--labas-border);
  border-radius: var(--labas-radius-lg);
  padding: 1.3rem 1.4rem;
  box-shadow: var(--labas-shadow);
}
.labas-research-year{
  display: inline-block;
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--labas-brand);
  background: var(--labas-brand-soft);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  margin: 0 0 0.6rem;
}
.labas-research-card h3{ font-size: 1.2rem; margin: 0 0 0.5rem; color: var(--labas-ink); }
.labas-research-obj{ font-size: 0.95rem; line-height: 1.55; color: var(--labas-muted); margin: 0 0 0.9rem; }
.labas-research-row{ border-top: 1px solid var(--labas-border); padding-top: 0.7rem; margin-top: 0.7rem; }
.labas-research-row span{
  display: block;
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--labas-brand);
  margin-bottom: 0.35rem;
}
.labas-research-row p{ margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--labas-muted); }
.labas-seg{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.labas-seg li{ font-size: 0.9rem; color: var(--labas-muted); }
.labas-seg b{ color: var(--labas-ink); font-family: var(--grotesk); }
.labas-research-note{
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--labas-muted);
  background: var(--labas-warn-soft);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
}
/* ---- Dealer insight cards ---- */
.labas-insight-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0.9rem;
}
.labas-insight{
  background: var(--labas-surface);
  border: 1px solid var(--labas-border);
  border-radius: var(--labas-radius);
  padding: 1.1rem 1.2rem;
  box-shadow: var(--labas-shadow);
  border-top: 3px solid var(--labas-brand);
}
.labas-insight h4{ font-size: 1.05rem; margin: 0 0 0.6rem; color: var(--labas-ink); }
.labas-insight-ev, .labas-insight-im{ margin: 0 0 0.55rem; font-size: 0.9rem; line-height: 1.5; color: var(--labas-muted); }
.labas-insight-ev span, .labas-insight-im span{
  display: block;
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.62rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.labas-insight-ev span{ color: var(--labas-muted); }
.labas-insight-im{ color: var(--labas-ink); }
.labas-insight-im span{ color: var(--labas-brand); }
/* ---- Persona set ---- */
.labas-persona-tabs{ display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 1rem; }
.labas-persona-tab{
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  text-align: left;
  background: var(--labas-surface);
  border: 1px solid var(--labas-border);
  border-radius: var(--labas-radius);
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  color: var(--labas-ink);
  transition: border-color 0.15s, background 0.15s;
}
.labas-persona-tab:hover{ border-color: var(--labas-brand); }
.labas-persona-tab:focus-visible{ outline: 2px solid var(--labas-brand); outline-offset: 2px; }
.labas-persona-tab.is-active{ border-color: var(--labas-brand); background: var(--labas-brand-soft); }
.labas-persona-role{ font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6rem; font-weight: 700; color: var(--labas-brand); }
.labas-persona-name{ font-size: 0.92rem; font-weight: 600; }
.labas-persona-card{
  background: var(--labas-surface);
  border: 1px solid var(--labas-border);
  border-radius: var(--labas-radius-lg);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--labas-shadow);
}
.labas-persona-card-role{ font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.68rem; font-weight: 700; color: var(--labas-brand); margin: 0 0 0.2rem; }
.labas-persona-card-name{ font-size: 1.45rem; font-weight: 650; color: var(--labas-ink); margin: 0 0 1rem; }
.labas-persona-dl{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 0.8rem; margin: 0; }
.labas-persona-dl > div{ background: var(--labas-surface-2); border-radius: 12px; padding: 0.8rem 0.95rem; }
.labas-persona-dl dt{ font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.64rem; font-weight: 700; color: var(--labas-brand); margin-bottom: 0.3rem; }
.labas-persona-dl dd{ margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--labas-ink); }
/* ---- Deal Navigator IA ---- */
.labas-ia-grid{
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) auto minmax(0, 1.2fr);
  gap: clamp(0.8rem, 2.5vw, 1.6rem);
  align-items: stretch;
}
.labas-ia-side{ background: var(--labas-surface); border: 1px solid var(--labas-border); border-radius: var(--labas-radius-lg); padding: 1.1rem 1.2rem; box-shadow: var(--labas-shadow); }
.labas-ia-head{ font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.66rem; font-weight: 700; color: var(--labas-brand); margin: 0 0 0.8rem; }
.labas-ia-side--before{ background: var(--labas-surface-2); }
.labas-ia-stack{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.labas-ia-stack li{ font-size: 0.82rem; color: var(--labas-muted); background: var(--labas-surface); border: 1px solid var(--labas-border); border-radius: 8px; padding: 0.4rem 0.6rem; }
[data-theme="dark"] .labas-ia-side--before .labas-ia-stack li{ background: var(--labas-surface-2); }
.labas-ia-bridge{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; font-family: var(--grotesk); font-size: 0.7rem; font-weight: 600; color: var(--labas-brand); text-transform: uppercase; letter-spacing: 0.06em; }
.labas-ia-arrow{ font-size: 1.5rem; }
.labas-ia-summary{ background: var(--labas-brand-soft); border-radius: 12px; padding: 0.7rem 0.8rem; margin-bottom: 0.9rem; }
.labas-ia-summary-label{ display: block; font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.62rem; font-weight: 700; color: var(--labas-brand); margin-bottom: 0.45rem; }
.labas-ia-chips{ display: flex; flex-wrap: wrap; gap: 0.35rem; }
.labas-ia-chip{ font-size: 0.76rem; background: var(--labas-surface); border: 1px solid var(--labas-border); border-radius: 999px; padding: 0.22rem 0.6rem; color: var(--labas-ink); }
.labas-ia-progress-label{ font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.66rem; font-weight: 700; color: var(--labas-ink); margin: 0 0 0.5rem; }
.labas-ia-tabs{ display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; }
.labas-ia-tab{ font-size: 0.8rem; font-weight: 550; background: var(--labas-surface); border: 1px solid var(--labas-border); border-radius: 999px; padding: 0.35rem 0.75rem; cursor: pointer; color: var(--labas-ink); transition: border-color 0.15s, background 0.15s; }
.labas-ia-tab:hover{ border-color: var(--labas-brand); }
.labas-ia-tab:focus-visible{ outline: 2px solid var(--labas-brand); outline-offset: 2px; }
.labas-ia-tab.is-active{ background: var(--labas-brand); border-color: var(--labas-brand); color: #fff; }
[data-theme="dark"] .labas-ia-tab.is-active{ color: #0e1525; }
.labas-ia-tabpanel{ background: var(--labas-surface-2); border-radius: 12px; padding: 0.85rem 0.95rem; }
.labas-ia-tabpanel b{ display: block; font-size: 0.98rem; color: var(--labas-ink); margin-bottom: 0.2rem; }
.labas-ia-tabpanel span{ font-size: 0.9rem; line-height: 1.5; color: var(--labas-muted); }
@container (max-width: 720px){
.labas-ia-grid{ grid-template-columns: 1fr; }
.labas-ia-bridge{ flex-direction: row; }
.labas-ia-arrow{ transform: rotate(90deg); }
}
/* ---- TRS value layer ---- */
.labas-trs-flow{ display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.6rem; }
.labas-trs-node{ flex: 1 1 12rem; background: var(--labas-surface); border: 1px solid var(--labas-border); border-radius: var(--labas-radius); padding: 1rem 1.1rem; box-shadow: var(--labas-shadow); }
.labas-trs-node b{ display: block; font-size: 1rem; color: var(--labas-ink); margin-bottom: 0.3rem; }
.labas-trs-node p{ margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--labas-muted); }
.labas-trs-arrow{ align-self: center; font-size: 1.4rem; font-weight: 700; color: var(--labas-brand); }
@container (max-width: 640px){
.labas-trs-node{ flex: 0 0 auto; width: 100%; }
.labas-trs-arrow{ transform: rotate(90deg); align-self: flex-start; margin-left: 1.2rem; }
}
/* ---- Swivel-chair workflow ---- */
.labas-swivel-switch{ display: inline-flex; gap: 0.3rem; background: var(--labas-surface-2); border: 1px solid var(--labas-border); border-radius: 999px; padding: 0.25rem; margin-bottom: 1rem; }
.labas-swivel-btn{ font-family: var(--grotesk); font-size: 0.8rem; font-weight: 600; border: none; background: transparent; color: var(--labas-muted); border-radius: 999px; padding: 0.4rem 0.95rem; cursor: pointer; }
.labas-swivel-btn:focus-visible{ outline: 2px solid var(--labas-brand); outline-offset: 2px; }
.labas-swivel-btn.is-active{ background: var(--labas-brand); color: #fff; }
[data-theme="dark"] .labas-swivel-btn.is-active{ color: #0e1525; }
.labas-swivel-cap{ font-size: 0.92rem; line-height: 1.5; color: var(--labas-muted); margin: 0 0 0.9rem; }
.labas-swivel-loop{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.labas-swivel-sys{ font-size: 0.85rem; font-weight: 550; background: var(--labas-risk-soft); color: var(--labas-ink); border: 1px solid var(--labas-risk); border-radius: 10px; padding: 0.5rem 0.8rem; }
.labas-swivel-jump{ color: var(--labas-risk); font-weight: 700; }
.labas-swivel-hub{ display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; }
.labas-swivel-core{ display: flex; flex-direction: column; align-items: center; justify-content: center; width: clamp(90px, 18vw, 120px); aspect-ratio: 1; border-radius: 50%; background: var(--labas-brand); color: #fff; font-weight: 700; font-size: 1.1rem; text-align: center; box-shadow: var(--labas-shadow-lg); }
[data-theme="dark"] .labas-swivel-core{ color: #0e1525; }
.labas-swivel-core small{ font-weight: 500; font-size: 0.62rem; opacity: 0.9; }
.labas-swivel-spokes{ display: flex; flex-wrap: wrap; gap: 0.4rem; }
.labas-swivel-spoke{ font-size: 0.82rem; background: var(--labas-good-soft); color: var(--labas-ink); border: 1px solid var(--labas-good); border-radius: 999px; padding: 0.35rem 0.7rem; }
@container (max-width: 560px){
.labas-swivel-hub{ grid-template-columns: 1fr; justify-items: center; text-align: center; }
}
/* ---- Quote to BOS flow ---- */
.labas-qb-flow{ display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: stretch; }
.labas-qb-group{ position: relative; flex: 1 1 11rem; background: var(--labas-surface); border: 1px solid var(--labas-border); border-radius: var(--labas-radius); padding: 0.9rem 1rem; box-shadow: var(--labas-shadow); }
.labas-qb-group-name{ font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.66rem; font-weight: 700; color: var(--labas-brand); margin: 0 0 0.6rem; }
.labas-qb-steps{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.labas-qb-steps li{ font-size: 0.84rem; line-height: 1.45; color: var(--labas-muted); padding-left: 0.9rem; position: relative; }
.labas-qb-steps li::before{ content: ""; position: absolute; left: 0; top: 0.5em; width: 5px; height: 5px; border-radius: 50%; background: var(--labas-brand); }
.labas-qb-arrow{ position: absolute; right: -0.55rem; top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: var(--labas-brand); z-index: 1; }
@container (max-width: 720px){
.labas-qb-group{ flex: 0 0 auto; width: 100%; }
.labas-qb-arrow{ right: auto; left: 50%; top: auto; bottom: -0.7rem; transform: translateX(-50%) rotate(90deg); }
}
/* ---- MVP scope matrix ---- */
.labas-asset--matrix .labas-matrix-headrow,
.labas-matrix-row{ display: grid; grid-template-columns: 1.1fr 1.5fr 1.5fr 1.1fr; gap: 0.8rem; }
.labas-matrix-headrow{ padding: 0 1rem 0.6rem; }
.labas-matrix-headrow span{ font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.66rem; font-weight: 700; color: var(--labas-brand); }
.labas-matrix-body{ border: 1px solid var(--labas-border); border-radius: var(--labas-radius); overflow: hidden; background: var(--labas-surface); }
.labas-matrix-row{ padding: 0.9rem 1rem; border-bottom: 1px solid var(--labas-border); align-items: start; }
.labas-matrix-row:last-child{ border-bottom: none; }
.labas-matrix-cap{ font-weight: 600; color: var(--labas-ink); font-size: 0.92rem; }
.labas-matrix-mvp, .labas-matrix-later, .labas-matrix-why{ font-size: 0.88rem; line-height: 1.45; color: var(--labas-muted); }
.labas-matrix-pill{ display: inline-block; font-family: var(--grotesk); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px; padding: 0.1rem 0.45rem; margin-right: 0.4rem; }
.labas-matrix-pill--mvp{ background: var(--labas-good-soft); color: var(--labas-good); }
.labas-matrix-pill--later{ background: var(--labas-accent-soft); color: var(--labas-accent); }
@container (max-width: 760px){
.labas-matrix-headrow{ display: none; }
.labas-matrix-row{ grid-template-columns: 1fr; gap: 0.45rem; padding: 1rem; }
.labas-matrix-mvp, .labas-matrix-later, .labas-matrix-why{ padding-left: 0; }
.labas-matrix-why::before{ content: "Why: "; font-weight: 700; color: var(--labas-brand); }
}
/* ---- Pilot funnel ---- */
.labas-funnel{ display: flex; flex-direction: column; gap: 0.55rem; }
.labas-funnel-row{ display: grid; grid-template-columns: minmax(7rem, 0.4fr) 1fr; gap: 0.8rem; align-items: center; }
.labas-funnel-meta{ text-align: right; }
.labas-funnel-meta b{ display: block; font-family: var(--grotesk); font-size: 1.15rem; color: var(--labas-ink); }
.labas-funnel-meta span{ font-size: 0.76rem; color: var(--labas-muted); }
.labas-funnel-bar{ background: var(--labas-surface-2); border-radius: 10px; overflow: hidden; }
.labas-funnel-fill{
  display: flex; align-items: center;
  width: var(--w);
  min-width: max-content;
  background: linear-gradient(90deg, var(--labas-brand), var(--labas-brand-strong));
  color: #fff;
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  transition: width 0.4s ease;
}
[data-theme="dark"] .labas-funnel-fill{ color: #0e1525; }
.labas-funnel-fill i{ font-style: normal; font-size: 0.78rem; font-weight: 550; white-space: nowrap; }
@container (max-width: 520px){
.labas-funnel-row{ grid-template-columns: 1fr; gap: 0.2rem; }
.labas-funnel-meta{ text-align: left; }
.labas-funnel-fill i{ font-size: 0.7rem; }
}
/* ---- Feedback spectrum ---- */
.labas-spectrum-track{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.9rem;
  position: relative;
}
.labas-spectrum-line{ display: none; }
.labas-spectrum-end, .labas-spectrum-mid{ border-radius: var(--labas-radius); padding: 1rem 1.1rem; border: 1px solid var(--labas-border); background: var(--labas-surface); box-shadow: var(--labas-shadow); }
.labas-spectrum-end b, .labas-spectrum-mid b{ display: block; font-size: 1rem; margin-bottom: 0.4rem; }
.labas-spectrum-end p, .labas-spectrum-mid p{ margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--labas-muted); }
.labas-spectrum-end--pos{ background: var(--labas-good-soft); border-color: var(--labas-good); }
.labas-spectrum-end--pos b{ color: var(--labas-good); }
.labas-spectrum-mid b{ color: var(--labas-brand); }
.labas-spectrum-end--crit{ background: var(--labas-risk-soft); border-color: var(--labas-risk); }
.labas-spectrum-end--crit b{ color: var(--labas-risk); }
/* ---- Principles poster ---- */
.labas-principle-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0.9rem; }
.labas-principle{ background: var(--labas-surface); border: 1px solid var(--labas-border); border-radius: var(--labas-radius); padding: 1.1rem 1.2rem; box-shadow: var(--labas-shadow); }
.labas-principle-n{ font-family: var(--grotesk); font-weight: 700; font-size: 0.9rem; color: var(--labas-brand); }
.labas-principle b{ display: block; font-size: 1.05rem; color: var(--labas-ink); margin: 0.4rem 0 0.4rem; }
.labas-principle p{ margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--labas-muted); }
/* ---- Metrics dashboard ---- */
.labas-metric-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.9rem; }
.labas-metric-card{ background: var(--labas-surface); border: 1px solid var(--labas-border); border-radius: var(--labas-radius); padding: 1.05rem 1.15rem; box-shadow: var(--labas-shadow); }
.labas-metric-head{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; }
.labas-metric-head b{ font-size: 1.02rem; color: var(--labas-ink); }
.labas-metric-tag{ font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.58rem; font-weight: 700; color: var(--labas-brand); background: var(--labas-brand-soft); border-radius: 999px; padding: 0.15rem 0.5rem; }
.labas-metric-card ul{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.labas-metric-card li{ font-size: 0.86rem; color: var(--labas-muted); padding-left: 0.9rem; position: relative; }
.labas-metric-card li::before{ content: ""; position: absolute; left: 0; top: 0.5em; width: 5px; height: 5px; border-radius: 50%; background: var(--labas-teal); }
.labas-metric-opp{ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: 0.8rem; margin-top: 1rem; }
.labas-metric-opp > div{ background: var(--labas-brand-soft); border-radius: var(--labas-radius); padding: 0.9rem 1rem; text-align: center; }
.labas-metric-opp b{ display: block; font-family: var(--grotesk); font-size: 1.4rem; color: var(--labas-brand-strong); }
[data-theme="dark"] .labas-metric-opp b{ color: var(--labas-brand-strong); }
.labas-metric-opp span{ font-size: 0.78rem; color: var(--labas-muted); }
/* ---- Final evolution timeline / close ---- */
.labas-section--close{ background: var(--labas-surface-2); border-top: 1px solid var(--labas-border); }
.labas-final-rail{ display: flex; justify-content: space-between; font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; font-weight: 700; margin-bottom: 0.8rem; }
.labas-final-from{ color: var(--labas-muted); }
.labas-final-to{ color: var(--labas-brand); }
.labas-final-beats{ display: flex; flex-wrap: wrap; gap: 0.6rem; }
.labas-final-beat{ position: relative; flex: 1 1 13rem; background: var(--labas-surface); border: 1px solid var(--labas-border); border-radius: var(--labas-radius); padding: 1rem 1.1rem; box-shadow: var(--labas-shadow); }
.labas-final-dot{ display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--labas-brand); margin-bottom: 0.5rem; }
.labas-final-beat b{ display: block; font-size: 1.05rem; color: var(--labas-ink); margin-bottom: 0.3rem; }
.labas-final-beat p{ margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--labas-muted); }
.labas-final-arrow{ position: absolute; right: -0.5rem; top: 50%; transform: translateY(-50%); font-size: 1.2rem; color: var(--labas-brand); z-index: 1; }
@container (max-width: 700px){
.labas-final-beat{ flex: 0 0 auto; width: 100%; }
.labas-final-arrow{ right: auto; left: 50%; top: auto; bottom: -0.7rem; transform: translateX(-50%) rotate(90deg); }
}
.labas-section--close .labas-principle{
  background: none; border: none; box-shadow: none; padding: 0;
  font-size: clamp(1.2rem, 3vw, 1.7rem); font-weight: 650; color: var(--labas-ink);
  margin: 1.4rem 0 0;
}
.labas-section--close .labas-principle--alt{ color: var(--labas-brand); margin-top: 0.4rem; }
.labas-section--close .cl-view-link{ display: inline-block; margin-top: 1.6rem; }
/* =========================================================
   CUSTOMER PROFILE — "From Leads to Customer Memory"
   Scoped .labcp-* tokens mapped to the site palette (indigo-denim
   "memory" lean with a warm blossom accent for the person).
   Both themes defined; every text/bg pair targets WCAG AA.
   Diagrams are responsive in-page components (auto-fit / clamp /
   container queries), never raster screenshots.
   ========================================================= */
.labcp-page{
  --labcp-brand: #156c7c;
  --labcp-brand-strong: #0e4f5b;
  --labcp-brand-soft: #e1f0f3;
  --labcp-ink: #1c2a2e;
  --labcp-muted: #4d6066;
  --labcp-surface: #ffffff;
  --labcp-surface-2: #f3f8f9;
  --labcp-border: #d6e4e7;
  --labcp-warm: #b14f63;
  --labcp-warm-strong: #8f3b50;
  --labcp-warm-soft: #fbe9ee;
  --labcp-good: #0f7a4e;
  --labcp-good-soft: #e6f5ee;
  --labcp-warn: #855a0a;
  --labcp-warn-soft: #fbf1dd;
  --labcp-risk: #b3303f;
  --labcp-risk-soft: #fbe7e9;
  --labcp-radius: 16px;
  --labcp-radius-lg: 24px;
  --labcp-shadow: 0 1px 2px rgba(16, 33, 70, 0.05), 0 10px 30px rgba(16, 33, 70, 0.08);
  --labcp-shadow-lg: 0 16px 48px rgba(47, 79, 134, 0.18);
}
[data-theme="dark"] .labcp-page{
  --labcp-brand: #5cc4d6;
  --labcp-brand-strong: #8fd9e6;
  --labcp-brand-soft: #11303a;
  --labcp-ink: #e9f3f5;
  --labcp-muted: #a3b4b9;
  --labcp-surface: #14202a;
  --labcp-surface-2: #1b2a33;
  --labcp-border: #2b3d45;
  --labcp-warm: #e79bac;
  --labcp-warm-strong: #f0b8c4;
  --labcp-warm-soft: rgba(225, 120, 150, 0.16);
  --labcp-good: #57c89a;
  --labcp-good-soft: rgba(31, 143, 99, 0.2);
  --labcp-warn: #e0ac4f;
  --labcp-warn-soft: rgba(169, 117, 15, 0.22);
  --labcp-risk: #e8808d;
  --labcp-risk-soft: rgba(192, 65, 79, 0.22);
  --labcp-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.45);
  --labcp-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
}
.labcp-page{ color: var(--labcp-ink); }
.labcp-page .container{ width: min(1080px, calc(100% - 40px)); margin-inline: auto; }
.labcp-page .labcp-hero .container{ width: min(1180px, calc(100% - 40px)); }
/* ---- Hero ---- */
.labcp-hero{ position: relative; padding: clamp(2.4rem, 6vw, 5rem) 0 clamp(1.6rem, 4vw, 3rem); overflow: hidden; }
.labcp-hero-stickers{ position: absolute; inset: 0; pointer-events: none; }
.labcp-sticker{ position: absolute; opacity: 0.9; }
.labcp-sticker svg{ width: 100%; height: 100%; overflow: visible; }
.labcp-sticker--spark{ width: clamp(22px, 3vw, 34px); top: 30%; right: 9%; }
.labcp-sticker--heart{ width: clamp(26px, 4vw, 40px); top: 9%; right: 7%; transform: rotate(8deg); }
.labcp-sticker--squiggle{ width: clamp(56px, 9vw, 92px); bottom: 12%; right: 13%; opacity: 0.5; }
[data-theme="dark"] .labcp-sticker{ opacity: 0.55; }
.labcp-eyebrow{
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--labcp-brand);
  margin: 0 0 0.8rem;
}
.labcp-hero-title{
  font-size: clamp(2.1rem, 6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 0.9rem;
  color: var(--labcp-ink);
}
.labcp-hero-lead{
  font-size: clamp(1.05rem, 2.4vw, 1.4rem);
  line-height: 1.5;
  color: var(--labcp-muted);
  max-width: 52ch;
  margin: 0 0 clamp(1.8rem, 4vw, 2.8rem);
}
/* ---- Snapshot ---- */
.labcp-snapshot{ padding: clamp(1.4rem, 3vw, 2.4rem) 0; }
.labcp-snapshot-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  background: var(--labcp-border);
  border: 1px solid var(--labcp-border);
  border-radius: var(--labcp-radius);
  overflow: hidden;
  margin: 0 0 1.2rem;
}
.labcp-snapshot-grid > div{ background: var(--labcp-surface); padding: 1.05rem 1.2rem; }
.labcp-snapshot-grid dt{
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--labcp-muted);
  margin-bottom: 0.35rem;
}
.labcp-snapshot-grid dd{ margin: 0; font-size: 0.96rem; line-height: 1.45; color: var(--labcp-ink); }
.labcp-snapshot-challenge{
  background: var(--labcp-brand-soft);
  border: 1px solid var(--labcp-border);
  border-radius: var(--labcp-radius);
  padding: 1.1rem 1.3rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--labcp-ink);
  margin: 0;
}
.labcp-snapshot-challenge span{
  display: inline-block;
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--labcp-brand);
  margin-right: 0.5rem;
}
/* ---- Section frame ---- */
.labcp-section{ padding: clamp(2.2rem, 5vw, 3.6rem) 0; }
.labcp-section-kicker{
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--labcp-brand);
  margin: 0 0 0.6rem;
}
.labcp-section-title{
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 1rem;
  color: var(--labcp-ink);
  max-width: 26ch;
}
.labcp-section-body{ max-width: 64ch; }
.labcp-section-body p{ font-size: 1.04rem; line-height: 1.65; color: var(--labcp-muted); margin: 0 0 1rem; }
.labcp-section-body p strong{ color: var(--labcp-ink); font-weight: 650; }
.labcp-emphasis{
  border-left: 3px solid var(--labcp-brand);
  padding-left: 1rem;
  color: var(--labcp-ink) !important;
  font-weight: 500;
}
/* ---- Shared asset chrome ---- */
.labcp-asset{
  container-type: inline-size;
  margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}
.labcp-asset-head{ margin: 0 0 1.3rem; }
.labcp-asset-eyebrow{
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--labcp-brand);
  margin: 0 0 0.4rem;
}
.labcp-asset-title{ font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0; color: var(--labcp-ink); }
.labcp-asset-sub{ font-size: 0.98rem; line-height: 1.5; color: var(--labcp-muted); margin: 0.5rem 0 0; }
.labcp-asset-takeaway{
  margin: 1.3rem 0 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--labcp-ink);
  font-weight: 500;
}
.labcp-asset-takeaway em{ color: var(--labcp-warm-strong); font-style: normal; font-weight: 650; }
.labcp-asset-quote{
  margin: 1.4rem 0 0;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.45;
  color: var(--labcp-ink);
  font-family: var(--display-font);
  border-top: 1px solid var(--labcp-border);
  padding-top: 1.2rem;
}
.labcp-chip{
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.62rem;
  border-radius: 999px;
  background: var(--labcp-brand-soft);
  color: var(--labcp-brand-strong);
  border: 1px solid var(--labcp-border);
  font-family: var(--grotesk);
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.25;
}
.labcp-chip--future{ background: var(--labcp-warm-soft); color: var(--labcp-warm-strong); border-color: color-mix(in srgb, var(--labcp-warm) 30%, transparent); }
.labcp-evidence{
  list-style: none;
  margin: 1.3rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.labcp-evidence li{
  background: var(--labcp-surface-2);
  border: 1px solid var(--labcp-border);
  border-radius: 999px;
  padding: 0.42rem 0.85rem;
  font-size: 0.85rem;
  color: var(--labcp-muted);
}
.labcp-evidence b{ color: var(--labcp-brand); font-weight: 700; }
/* ---- Hero evolution ---- */
.labcp-evo{ display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.6rem; }
.labcp-evo-arrow{
  display: flex;
  align-items: center;
  color: var(--labcp-brand);
  width: clamp(28px, 3vw, 44px);
  flex: 0 0 auto;
  opacity: 0.75;
}
.labcp-evo-arrow svg{ width: 100%; }
.labcp-evo-stage{
  --st: var(--labcp-brand);
  --st-soft: var(--labcp-brand-soft);
  flex: 1 1 14rem;
  min-width: 0;
  background: var(--labcp-surface);
  border: 1px solid var(--labcp-border);
  border-top: 3px solid var(--st);
  border-radius: var(--labcp-radius);
  box-shadow: var(--labcp-shadow);
  display: block;
  overflow: hidden;
}
.labcp-evo-stage--warn{ --st: var(--labcp-warn); --st-soft: var(--labcp-warn-soft); }
.labcp-evo-stage--risk{ --st: var(--labcp-risk); --st-soft: var(--labcp-risk-soft); }
.labcp-evo-stage--good{ --st: var(--labcp-good); --st-soft: var(--labcp-good-soft); }
.labcp-evo-stage--brand{ --st: var(--labcp-brand); --st-soft: var(--labcp-brand-soft); }
.labcp-stage-toggle{
  appearance: none;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  padding: 1rem 1.1rem 1.05rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font: inherit;
  color: inherit;
  width: 100%;
}
.labcp-evo-index{
  display: inline-block;
  font-family: var(--grotesk);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--st);
  background: var(--st-soft);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  align-self: flex-start;
}
.labcp-evo-name{ font-size: 1.06rem; font-weight: 650; color: var(--labcp-ink); line-height: 1.2; }
.labcp-evo-sub{ font-size: 0.86rem; color: var(--labcp-muted); line-height: 1.35; }
.labcp-evo-tags{ display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }
.labcp-evo-tags .labcp-chip{ font-size: 0.68rem; padding: 0.22rem 0.5rem; }
.labcp-stage-more{
  margin-top: 0.45rem;
  font-family: var(--grotesk);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--labcp-brand);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.labcp-stage-more::after{ content: "+"; font-size: 0.95rem; line-height: 1; }
.labcp-stage-toggle[aria-expanded="true"] .labcp-stage-more::after{ content: "–"; }
.labcp-stage-toggle:focus-visible{ outline: 2px solid var(--labcp-brand); outline-offset: -3px; border-radius: var(--labcp-radius); }
.labcp-evo-detail{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s ease;
}
.labcp-stage-toggle[aria-expanded="true"] + .labcp-evo-detail{ grid-template-rows: 1fr; }
.labcp-evo-detail-inner{ overflow: hidden; }
.labcp-evo-detail-inner p{
  margin: 0;
  padding: 0 1.1rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--labcp-muted);
  border-top: 1px solid var(--labcp-border);
  padding-top: 0.85rem;
}
@container (max-width: 640px){
.labcp-evo{ flex-direction: column; }
.labcp-evo-arrow{ width: 100%; height: 22px; justify-content: center; transform: rotate(90deg); }
}
/* ---- Fragmentation map ---- */
.labcp-frag{
  display: grid;
  gap: 1.1rem;
  align-items: center;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
}
.labcp-frag-center{
  background: var(--labcp-warm-soft);
  border: 1px solid color-mix(in srgb, var(--labcp-warm) 32%, transparent);
  border-radius: var(--labcp-radius-lg);
  padding: 1.4rem 1.2rem;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 0.35rem;
}
.labcp-frag-avatar{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--labcp-warm);
  color: #fff;
  display: grid; place-items: center;
}
[data-theme="dark"] .labcp-frag-avatar{ color: #2a1016; }
.labcp-frag-avatar svg{ width: 30px; height: 30px; }
.labcp-frag-name{ font-weight: 700; color: var(--labcp-ink); font-size: 1.05rem; }
.labcp-frag-note{ font-size: 0.82rem; color: var(--labcp-warm-strong); }
.labcp-frag-ring{
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: 0.6rem;
}
.labcp-frag-card{
  display: flex; align-items: center; gap: 0.55rem;
  background: var(--labcp-surface);
  border: 1px dashed var(--labcp-border);
  border-radius: 12px;
  padding: 0.6rem 0.75rem;
  font-size: 0.86rem;
  color: var(--labcp-ink);
  box-shadow: var(--labcp-shadow);
}
.labcp-frag-ico{ color: var(--labcp-brand); display: inline-flex; flex: 0 0 auto; }
.labcp-frag-ico svg{ width: 20px; height: 20px; }
.labcp-frag-facts{
  list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.5rem 1.2rem;
}
.labcp-frag-facts li{
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--labcp-muted);
}
.labcp-frag-facts li::before{ content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--labcp-warm); }
@container (max-width: 560px){
.labcp-frag{ grid-template-columns: 1fr; }
}
/* ---- Search pain ---- */
.labcp-search-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}
.labcp-search-col{ background: var(--labcp-surface); border: 1px solid var(--labcp-border); border-radius: var(--labcp-radius); padding: 1.1rem; box-shadow: var(--labcp-shadow); }
.labcp-search-col--after{ border-color: color-mix(in srgb, var(--labcp-good) 40%, var(--labcp-border)); }
.labcp-search-tag{ font-family: var(--grotesk); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; margin: 0 0 0.7rem; }
.labcp-search-tag--before{ color: var(--labcp-risk); }
.labcp-search-tag--after{ color: var(--labcp-good); }
.labcp-results{ list-style: none; margin: 0 0 0.8rem; padding: 0; display: grid; gap: 0.4rem; }
.labcp-result{
  display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  background: var(--labcp-surface-2);
  border: 1px solid var(--labcp-border);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
}
.labcp-result-name{ font-weight: 650; color: var(--labcp-ink); font-size: 0.9rem; }
.labcp-result-type{ font-size: 0.78rem; color: var(--labcp-muted); }
.labcp-result--customer{ background: var(--labcp-good-soft); border-color: color-mix(in srgb, var(--labcp-good) 40%, var(--labcp-border)); margin-bottom: 0.8rem; }
.labcp-result-type--customer{ color: var(--labcp-good); font-weight: 600; }
.labcp-search-questions{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.labcp-search-questions li{ font-size: 0.84rem; color: var(--labcp-muted); font-style: italic; padding-left: 1.1rem; position: relative; }
.labcp-search-questions li::before{ content: "?"; position: absolute; left: 0; color: var(--labcp-risk); font-weight: 700; font-style: normal; }
.labcp-search-nested{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.labcp-search-nested li{ display: flex; flex-direction: column; padding: 0.45rem 0.7rem; background: var(--labcp-surface-2); border-left: 2px solid var(--labcp-good); border-radius: 0 8px 8px 0; }
.labcp-search-nested b{ font-size: 0.86rem; color: var(--labcp-ink); }
.labcp-search-nested span{ font-size: 0.76rem; color: var(--labcp-muted); }
/* ---- Mental model ---- */
.labcp-mm-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}
.labcp-mm-col{ background: var(--labcp-surface); border: 1px solid var(--labcp-border); border-radius: var(--labcp-radius); padding: 1.2rem; box-shadow: var(--labcp-shadow); }
.labcp-mm-col--lead{ border-top: 3px solid var(--labcp-warn); }
.labcp-mm-col--cust{ border-top: 3px solid var(--labcp-good); }
.labcp-mm-kicker{ font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; font-weight: 700; margin: 0 0 0.7rem; }
.labcp-mm-col--lead .labcp-mm-kicker{ color: var(--labcp-warn); }
.labcp-mm-col--cust .labcp-mm-kicker{ color: var(--labcp-good); }
.labcp-mm-object{ display: flex; flex-direction: column; gap: 0.2rem; margin: 0 0 0.9rem; font-size: 1.15rem; font-weight: 700; color: var(--labcp-ink); }
.labcp-mm-object span{ font-family: var(--grotesk); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--labcp-muted); }
.labcp-mm-h{ font-family: var(--grotesk); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--labcp-muted); margin: 0.8rem 0 0.4rem; }
.labcp-mm-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.labcp-mm-list li{ font-size: 0.9rem; line-height: 1.45; color: var(--labcp-ink); padding-left: 1.2rem; position: relative; }
.labcp-mm-list--good li::before{ content: "✓"; position: absolute; left: 0; color: var(--labcp-good); font-weight: 700; }
.labcp-mm-list--weak li{ color: var(--labcp-muted); }
.labcp-mm-list--weak li::before{ content: "–"; position: absolute; left: 0.15rem; color: var(--labcp-warn); font-weight: 700; }
/* ---- Validation cards ---- */
.labcp-val-grid{
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1rem;
}
.labcp-val-card{ background: var(--labcp-surface); border: 1px solid var(--labcp-border); border-radius: var(--labcp-radius); padding: 1.1rem 1.2rem; box-shadow: var(--labcp-shadow); display: flex; flex-direction: column; gap: 0.6rem; }
.labcp-val-src{ font-weight: 700; color: var(--labcp-ink); font-size: 0.98rem; margin: 0; }
.labcp-val-signal, .labcp-val-resp{ margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--labcp-muted); }
.labcp-val-signal span, .labcp-val-resp span{
  display: block;
  font-family: var(--grotesk);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.labcp-val-signal span{ color: var(--labcp-warn); }
.labcp-val-resp{ color: var(--labcp-ink); border-top: 1px solid var(--labcp-border); padding-top: 0.6rem; }
.labcp-val-resp span{ color: var(--labcp-good); }
/* ---- Data model hub ---- */
.labcp-model{
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
  gap: 1.2rem;
  align-items: center;
}
.labcp-model-hub{
  background: linear-gradient(150deg, var(--labcp-brand), var(--labcp-brand-strong));
  color: #fff;
  border-radius: var(--labcp-radius-lg);
  padding: 1.6rem 1.2rem;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 0.3rem;
  box-shadow: var(--labcp-shadow-lg);
}
[data-theme="dark"] .labcp-model-hub{ color: #0e1525; }
.labcp-model-hub-ico{ width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.18); display: grid; place-items: center; }
[data-theme="dark"] .labcp-model-hub-ico{ background: rgba(14,21,37,0.18); }
.labcp-model-hub-ico svg{ width: 28px; height: 28px; }
.labcp-model-hub-title{ font-size: 1.3rem; font-weight: 700; }
.labcp-model-hub-sub{ font-size: 0.78rem; opacity: 0.85; }
.labcp-model-ring{
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: 0.55rem;
}
.labcp-node{ display: flex; align-items: center; gap: 0.5rem; background: var(--labcp-surface); border: 1px solid var(--labcp-border); border-radius: 12px; padding: 0.6rem 0.7rem; box-shadow: var(--labcp-shadow); }
.labcp-node-ico{ color: var(--labcp-brand); display: inline-flex; flex: 0 0 auto; }
.labcp-node-ico svg{ width: 20px; height: 20px; }
.labcp-node-label{ font-size: 0.84rem; color: var(--labcp-ink); line-height: 1.25; }
.labcp-model-attr{ margin: 1.2rem 0 0; background: var(--labcp-brand-soft); border: 1px solid var(--labcp-border); border-radius: var(--labcp-radius); padding: 0.9rem 1.1rem; font-size: 0.94rem; line-height: 1.5; color: var(--labcp-ink); }
.labcp-model-attr span{ font-weight: 700; color: var(--labcp-brand); }
@container (max-width: 560px){
.labcp-model{ grid-template-columns: 1fr; }
}
/* ---- Profile anatomy ---- */
.labcp-an{ display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.labcp-an-frame{ background: var(--labcp-surface); border: 1px solid var(--labcp-border); border-radius: var(--labcp-radius); overflow: hidden; box-shadow: var(--labcp-shadow); }
.labcp-an-header{ display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.85rem 1rem; border-bottom: 1px solid var(--labcp-border); }
.labcp-an-avatar{ width: 34px; height: 34px; border-radius: 50%; background: var(--labcp-brand); color: #fff; font-size: 0.78rem; font-weight: 700; display: grid; place-items: center; flex: 0 0 auto; }
[data-theme="dark"] .labcp-an-avatar{ color: #0e1525; }
.labcp-an-id{ display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.labcp-an-name{ font-weight: 700; color: var(--labcp-ink); font-size: 0.95rem; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.labcp-an-badge{ font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--labcp-brand); background: var(--labcp-brand-soft); border: 1px solid var(--labcp-border); border-radius: 999px; padding: 0.1rem 0.45rem; }
.labcp-an-meta{ font-size: 0.72rem; color: var(--labcp-muted); }
.labcp-an-actions{ display: flex; flex-wrap: wrap; gap: 0.3rem; width: 100%; }
.labcp-an-action{ font-size: 0.68rem; color: var(--labcp-muted); background: var(--labcp-surface-2); border: 1px solid var(--labcp-border); border-radius: 7px; padding: 0.22rem 0.5rem; }
.labcp-an-action--primary{ color: #fff; background: var(--labcp-brand); border-color: var(--labcp-brand); }
[data-theme="dark"] .labcp-an-action--primary{ color: #0e1525; }
.labcp-an-tabs{ display: flex; flex-wrap: wrap; gap: 0.2rem; padding: 0.5rem 1rem 0; }
.labcp-an-tab{ font-size: 0.74rem; color: var(--labcp-muted); padding: 0.3rem 0.55rem 0.5rem; border-bottom: 2px solid transparent; }
.labcp-an-tab.is-active{ color: var(--labcp-brand); border-bottom-color: var(--labcp-brand); font-weight: 600; }
.labcp-an-body{ display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.9fr); gap: 0.7rem; padding: 0.8rem 1rem 1rem; border-top: 1px solid var(--labcp-border); }
.labcp-an-composer{ grid-column: 1 / -1; font-size: 0.78rem; color: var(--labcp-muted); background: var(--labcp-surface-2); border: 1px dashed var(--labcp-border); border-radius: 8px; padding: 0.55rem 0.7rem; }
.labcp-an-filters{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.labcp-an-filter{ font-size: 0.66rem; color: var(--labcp-muted); background: var(--labcp-surface-2); border: 1px solid var(--labcp-border); border-radius: 999px; padding: 0.16rem 0.46rem; }
.labcp-an-filter.is-active{ color: var(--labcp-brand); border-color: var(--labcp-brand); font-weight: 600; }
.labcp-an-feed{ display: grid; gap: 0.4rem; }
.labcp-an-row{ display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; color: var(--labcp-ink); background: var(--labcp-surface-2); border: 1px solid var(--labcp-border); border-radius: 8px; padding: 0.4rem 0.55rem; }
.labcp-an-row i{ color: var(--labcp-brand); display: inline-flex; flex: 0 0 auto; }
.labcp-an-row i svg{ width: 16px; height: 16px; }
.labcp-an-rail{ display: grid; gap: 0.4rem; align-content: start; }
.labcp-an-card{ font-size: 0.74rem; color: var(--labcp-muted); background: var(--labcp-surface-2); border: 1px solid var(--labcp-border); border-radius: 8px; padding: 0.7rem 0.6rem; text-align: center; }
.labcp-an-notes{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; align-content: start; }
.labcp-an-notes li{ display: flex; gap: 0.6rem; font-size: 0.88rem; line-height: 1.45; color: var(--labcp-muted); }
.labcp-an-num{ flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--labcp-brand-soft); color: var(--labcp-brand-strong); font-size: 0.72rem; font-weight: 700; display: grid; place-items: center; }
@container (max-width: 720px){
.labcp-an{ grid-template-columns: 1fr; }
.labcp-an-body{ grid-template-columns: 1fr; }
}
/* ---- Workspace tabs ---- */
.labcp-tabs{ display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.labcp-tab{
  appearance: none; cursor: pointer; font: inherit;
  font-family: var(--grotesk); font-weight: 600; font-size: 0.86rem;
  color: var(--labcp-muted);
  background: var(--labcp-surface);
  border: 1px solid var(--labcp-border);
  border-radius: 999px;
  padding: 0.5rem 1rem;
}
.labcp-tab[aria-selected="true"]{ color: #fff; background: var(--labcp-brand); border-color: var(--labcp-brand); }
[data-theme="dark"] .labcp-tab[aria-selected="true"]{ color: #0e1525; }
.labcp-tab:focus-visible{ outline: 2px solid var(--labcp-brand); outline-offset: 2px; }
.labcp-tab-panel{ background: var(--labcp-surface); border: 1px solid var(--labcp-border); border-radius: var(--labcp-radius); padding: 1.3rem; box-shadow: var(--labcp-shadow); }
.labcp-tab-head{ margin: 0 0 0.6rem; font-size: 1.15rem; color: var(--labcp-ink); }
.labcp-tab-copy{ margin: 0 0 0.9rem; font-size: 0.98rem; line-height: 1.6; color: var(--labcp-muted); }
.labcp-tab-points{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0.5rem; }
.labcp-tab-points li{ font-size: 0.86rem; line-height: 1.4; color: var(--labcp-ink); background: var(--labcp-surface-2); border-left: 2px solid var(--labcp-brand); border-radius: 0 8px 8px 0; padding: 0.5rem 0.7rem; }
/* ---- Trust & status ---- */
.labcp-status{ background: var(--labcp-surface); border: 1px solid var(--labcp-border); border-radius: var(--labcp-radius); padding: 1.1rem; box-shadow: var(--labcp-shadow); margin-bottom: 1.1rem; }
.labcp-status-switch{ display: inline-flex; gap: 0.25rem; background: var(--labcp-surface-2); border: 1px solid var(--labcp-border); border-radius: 999px; padding: 0.25rem; margin-bottom: 1rem; }
.labcp-status-btn{ appearance: none; cursor: pointer; font: inherit; font-family: var(--grotesk); font-weight: 600; font-size: 0.8rem; color: var(--labcp-muted); background: none; border: 0; border-radius: 999px; padding: 0.4rem 0.85rem; }
.labcp-status-btn[data-labcp-status="before"][aria-selected="true"]{ background: var(--labcp-risk); color: #fff; }
.labcp-status-btn[data-labcp-status="after"][aria-selected="true"]{ background: var(--labcp-good); color: #fff; }
[data-theme="dark"] .labcp-status-btn[aria-selected="true"]{ color: #0e1525; }
.labcp-status-btn:focus-visible{ outline: 2px solid var(--labcp-brand); outline-offset: 2px; }
.labcp-status-list{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.labcp-status-list--before li{ font-size: 0.86rem; color: var(--labcp-muted); background: var(--labcp-risk-soft); border: 1px solid color-mix(in srgb, var(--labcp-risk) 30%, transparent); border-radius: 10px; padding: 0.5rem 0.7rem; flex: 1 1 13rem; }
.labcp-status-list--after li{ font-size: 0.86rem; font-weight: 600; color: var(--labcp-good); background: var(--labcp-good-soft); border: 1px solid color-mix(in srgb, var(--labcp-good) 32%, transparent); border-radius: 999px; padding: 0.4rem 0.85rem; }
.labcp-status-controls{ margin: 0.9rem 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--labcp-muted); }
.labcp-trust-grid{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.labcp-trust-card{ background: var(--labcp-surface); border: 1px solid var(--labcp-border); border-radius: var(--labcp-radius); padding: 1.1rem; box-shadow: var(--labcp-shadow); }
.labcp-trust-card p{ margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--labcp-muted); }
.labcp-trust-h{ font-weight: 700; color: var(--labcp-ink) !important; font-size: 0.98rem; margin-bottom: 0.4rem !important; }
/* ---- Future stack ---- */
.labcp-future{ display: grid; gap: 0; }
.labcp-future-tier{ border: 1px solid var(--labcp-border); border-radius: var(--labcp-radius); padding: 1.1rem 1.2rem; }
.labcp-future-tier--top{ background: var(--labcp-warm-soft); border-color: color-mix(in srgb, var(--labcp-warm) 30%, var(--labcp-border)); }
.labcp-future-tier--base{ background: var(--labcp-brand-soft); }
.labcp-future-label{ font-family: var(--grotesk); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; font-weight: 700; margin: 0 0 0.7rem; }
.labcp-future-tier--top .labcp-future-label{ color: var(--labcp-warm-strong); }
.labcp-future-tier--base .labcp-future-label{ color: var(--labcp-brand); }
.labcp-future-chips{ display: flex; flex-wrap: wrap; gap: 0.45rem; }
.labcp-future-join{ justify-self: center; font-family: var(--grotesk); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--labcp-muted); padding: 0.5rem 0; position: relative; }
/* ---- Impact ---- */
.labcp-impact-grid{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.labcp-impact-card{ background: var(--labcp-surface); border: 1px solid var(--labcp-border); border-top: 3px solid var(--labcp-brand); border-radius: var(--labcp-radius); padding: 1.1rem 1.2rem; box-shadow: var(--labcp-shadow); }
.labcp-impact-card p{ margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--labcp-muted); }
.labcp-impact-h{ font-weight: 700; color: var(--labcp-ink) !important; font-size: 1rem; margin-bottom: 0.4rem !important; }
/* ---- Close ---- */
.labcp-section--close{ text-align: center; padding-bottom: clamp(3rem, 7vw, 5rem); }
.labcp-principle{ font-family: var(--display-font); font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.15; color: var(--labcp-ink); margin: 0; }
.labcp-principle--alt{ color: var(--labcp-brand); margin-top: 0.4rem; }
.labcp-section--close .cl-view-link{ display: inline-block; margin-top: 1.6rem; }
/* =========================================================
   CASE STUDY QUALITY STANDARD — shared palette/detail pass
   Gives mature pages a clear project primary, 2-3 accents, and
   shared green/red semantics while preserving each page identity.
   ========================================================= */
.labgd-page{
  --labgd-primary: #5b4bd6;
  --labgd-primary-strong: #4636af;
  --labgd-primary-soft: color-mix(in srgb, #5b4bd6 15%, var(--surface));
  --labgd-accent-blue: var(--denim);
  --labgd-accent-warm: var(--cognac);
  --labgd-accent-pink: var(--blossom);
  --labgd-good: #0f7a4e;
  --labgd-good-soft: color-mix(in srgb, #0f7a4e 18%, var(--surface));
  --labgd-risk: #b3303f;
  --labgd-risk-soft: color-mix(in srgb, #b3303f 16%, var(--surface));
  --labgd-brand: var(--labgd-primary);
  --labgd-brand-strong: var(--labgd-primary-strong);
  --labgd-brand-soft: var(--labgd-primary-soft);
}
[data-theme="dark"] .labgd-page{
  --labgd-primary: #a99cff;
  --labgd-primary-strong: #c6bdff;
  --labgd-primary-soft: rgba(169, 156, 255, 0.17);
  --labgd-good: #57c89a;
  --labgd-good-soft: color-mix(in srgb, #57c89a 18%, var(--surface));
  --labgd-risk: #e8808d;
  --labgd-risk-soft: color-mix(in srgb, #e8808d 18%, var(--surface));
  /* Canonical: violet must win in dark too (earlier blocks set a blue
     --labgd-brand at higher specificity). Point brand at the violet primary. */
  --labgd-brand: var(--labgd-primary);
  --labgd-brand-strong: var(--labgd-primary-strong);
  --labgd-brand-soft: var(--labgd-primary-soft);
}
.labgd-hero-title,
.labgd-asset-title,
.labgd-section-title{
  background: linear-gradient(100deg, var(--labgd-primary-strong), var(--labgd-accent-blue) 55%, var(--labgd-accent-warm));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.labgd-eyebrow,
.labgd-asset-eyebrow,
.labgd-section-kicker{
  background: color-mix(in srgb, var(--labgd-primary) 15%, var(--surface));
  color: var(--labgd-primary-strong);
  border-color: color-mix(in srgb, var(--labgd-primary) 24%, var(--surface));
}
.labgd-magic-btn,
.labgd-ui-generate,
.labgd-ui-update,
.labgd-model-flag,
.labgd-steps li::before,
.labgd-principles b{
  background: linear-gradient(135deg, var(--labgd-primary-strong), var(--labgd-accent-blue));
}
.labgd-model-card.is-win{
  outline-color: color-mix(in srgb, var(--labgd-primary) 55%, transparent);
}
.labas-page{
  --labas-glass: blur(14px) saturate(1.12);
  --labas-surface: color-mix(in srgb, var(--surface) 84%, transparent);
  --labas-surface-2: color-mix(in srgb, var(--denim-soft) 15%, var(--surface));
  --labas-border: color-mix(in srgb, var(--denim) 24%, var(--line));
  background-color: var(--bg);
  background-image:
    radial-gradient(color-mix(in srgb, var(--denim) 12%, transparent) 1.2px, transparent 1.3px),
    radial-gradient(34rem 26rem at 7% 8%, color-mix(in srgb, var(--denim-soft) 30%, transparent), transparent 64%),
    radial-gradient(34rem 28rem at 92% 18%, color-mix(in srgb, var(--blossom) 24%, transparent), transparent 62%),
    radial-gradient(38rem 30rem at 75% 92%, color-mix(in srgb, var(--leaf) 16%, transparent), transparent 60%),
    linear-gradient(155deg, var(--bg), color-mix(in srgb, var(--denim-soft) 14%, var(--bg)) 54%, color-mix(in srgb, var(--blossom-soft) 52%, var(--bg)));
  background-size: 26px 26px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
[data-theme="dark"] .labas-page{
  --labas-surface: color-mix(in srgb, var(--surface) 76%, transparent);
  --labas-surface-2: color-mix(in srgb, var(--denim) 14%, var(--surface));
  --labas-border: color-mix(in srgb, var(--denim) 30%, var(--line));
  background-image:
    radial-gradient(color-mix(in srgb, var(--denim) 18%, transparent) 1.2px, transparent 1.3px),
    radial-gradient(34rem 26rem at 7% 8%, color-mix(in srgb, var(--denim) 22%, transparent), transparent 64%),
    radial-gradient(34rem 28rem at 92% 18%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%),
    radial-gradient(38rem 30rem at 75% 92%, color-mix(in srgb, var(--leaf) 11%, transparent), transparent 60%),
    linear-gradient(155deg, var(--bg), color-mix(in srgb, var(--denim) 10%, var(--bg)) 54%, var(--bg));
}
.labas-page .container{
  width: min(1100px, calc(100% - 40px));
  margin-inline: auto;
}
.labas-page .labas-hero .container{ width: min(1180px, calc(100% - 40px)); }
.labas-hero-title,
.labas-section-title,
.labas-asset-title{
  background: linear-gradient(100deg, var(--labas-brand-strong), var(--labas-brand) 46%, var(--labas-teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.labas-tl-toggle,
.labas-journey-detail,
.labas-scroll-page,
.labas-layer,
.labas-research-card,
.labas-insight,
.labas-persona-card,
.labas-ia-side,
.labas-trs-node,
.labas-qb-group,
.labas-matrix-body,
.labas-spectrum-end,
.labas-spectrum-mid,
.labas-principle,
.labas-metric-card,
.labas-final-beat{
  -webkit-backdrop-filter: var(--labas-glass);
  backdrop-filter: var(--labas-glass);
}
.labas-eyebrow,
.labas-section-kicker,
.labas-tl-tag,
.labas-panel-label{
  letter-spacing: 0;
}
.labas-tl-toggle,
.labas-journey-stage,
.labas-persona-tab,
.labas-ia-tab,
.labas-swivel-btn{
  min-height: 42px;
}
.labas-journey-stage.is-active,
.labas-ia-tab.is-active,
.labas-swivel-btn.is-active{
  background: #2f4f86;
  border-color: #2f4f86;
  color: #ffffff;
}
[data-theme="dark"] .labas-journey-stage.is-active,
[data-theme="dark"] .labas-ia-tab.is-active,
[data-theme="dark"] .labas-swivel-btn.is-active{
  background: #7aa2f0;
  border-color: #7aa2f0;
  color: #0e1525;
}
/* =========================================================
   PEPITA — Providence Health pain-care app case study
   Rose primary, denim/cognac/leaf accents, shared green/red
   semantics, responsive in-page research assets.
   ========================================================= */
.labpp-page{
  --labpp-primary: #d23163;
  --labpp-primary-strong: #a32150;
  --labpp-primary-soft: color-mix(in srgb, #e05d72 17%, var(--surface));
  --labpp-primary-fill: #d23163;
  --labpp-on-primary: #ffffff;
  --labpp-accent-blue: var(--denim);
  --labpp-blue-soft: color-mix(in srgb, var(--denim) 16%, var(--surface));
  --labpp-accent-warm: var(--cognac);
  --labpp-warm-soft: color-mix(in srgb, var(--cognac) 18%, var(--surface));
  --labpp-good: #0f7a4e;
  --labpp-good-soft: color-mix(in srgb, #0f7a4e 18%, var(--surface));
  --labpp-risk: #b3303f;
  --labpp-risk-soft: color-mix(in srgb, #b3303f 16%, var(--surface));
  --labpp-ink: var(--text);
  --labpp-muted: color-mix(in srgb, var(--muted) 76%, var(--text));
  --labpp-surface: color-mix(in srgb, var(--surface) 82%, transparent);
  --labpp-surface-2: color-mix(in srgb, var(--blossom-soft) 62%, var(--surface));
  --labpp-border: color-mix(in srgb, var(--accent) 26%, var(--line));
  --labpp-glass-border: color-mix(in srgb, var(--surface) 86%, transparent);
  --labpp-shadow: var(--soft-shadow);
  --labpp-shadow-lg: var(--shadow);
  --labpp-radius: 16px;
  --labpp-radius-lg: 24px;
  --labpp-glass: blur(14px) saturate(1.12);
  color: var(--labpp-ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(color-mix(in srgb, var(--accent) 13%, transparent) 1.2px, transparent 1.3px),
    radial-gradient(34rem 28rem at 8% 8%, color-mix(in srgb, var(--blossom) 35%, transparent), transparent 62%),
    radial-gradient(30rem 26rem at 92% 15%, color-mix(in srgb, var(--denim-soft) 24%, transparent), transparent 62%),
    radial-gradient(38rem 28rem at 75% 92%, color-mix(in srgb, var(--leaf) 14%, transparent), transparent 62%),
    linear-gradient(160deg, var(--bg), color-mix(in srgb, var(--blossom-soft) 58%, var(--bg)) 48%, color-mix(in srgb, var(--denim-soft) 14%, var(--bg)));
  background-size: 26px 26px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
[data-theme="dark"] .labpp-page{
  --labpp-primary: #ef7aa5;
  --labpp-primary-strong: #f7b3cb;
  --labpp-primary-soft: color-mix(in srgb, #ef7aa5 16%, var(--surface));
  --labpp-primary-fill: #ef7aa5;
  --labpp-on-primary: #2a121d;
  --labpp-blue-soft: color-mix(in srgb, var(--denim) 20%, var(--surface));
  --labpp-warm-soft: color-mix(in srgb, var(--cognac) 18%, var(--surface));
  --labpp-good: #57c89a;
  --labpp-good-soft: color-mix(in srgb, #57c89a 16%, var(--surface));
  --labpp-risk: #e8808d;
  --labpp-risk-soft: color-mix(in srgb, #e8808d 18%, var(--surface));
  --labpp-surface: color-mix(in srgb, var(--surface) 78%, transparent);
  --labpp-surface-2: color-mix(in srgb, var(--surface-2) 86%, transparent);
  --labpp-border: color-mix(in srgb, var(--accent) 26%, var(--line));
  --labpp-glass-border: color-mix(in srgb, var(--text) 14%, transparent);
  background-image:
    radial-gradient(color-mix(in srgb, var(--accent) 18%, transparent) 1.2px, transparent 1.3px),
    radial-gradient(34rem 28rem at 8% 8%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%),
    radial-gradient(30rem 26rem at 92% 15%, color-mix(in srgb, var(--denim) 18%, transparent), transparent 62%),
    radial-gradient(38rem 28rem at 75% 92%, color-mix(in srgb, var(--leaf) 10%, transparent), transparent 62%),
    linear-gradient(160deg, var(--bg), color-mix(in srgb, var(--surface-2) 58%, var(--bg)) 52%, var(--bg));
}
.labpp-page .container{
  width: min(1080px, calc(100% - 40px));
  margin-inline: auto;
}
.labpp-page .labpp-hero .container{
  container-type: inline-size;
  width: min(1180px, calc(100% - 40px));
}
.labpp-hero{
  position: relative;
  overflow: hidden;
  padding: clamp(2.6rem, 7vw, 5.2rem) 0 clamp(1.8rem, 4vw, 3rem);
}
.labpp-hero-stickers{
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.labpp-sticker{
  position: absolute;
  display: block;
  color: var(--labpp-primary);
  opacity: 0.86;
}
.labpp-sticker svg{
  width: 100%;
  height: 100%;
  overflow: visible;
}
.labpp-sticker--plus{
  width: clamp(30px, 5vw, 46px);
  top: 13%;
  right: 12%;
  transform: rotate(8deg);
}
.labpp-sticker--leaf{
  width: clamp(42px, 7vw, 68px);
  top: 32%;
  right: 4%;
  color: var(--labpp-good);
  transform: rotate(-9deg);
}
.labpp-sticker--squiggle{
  width: clamp(62px, 10vw, 94px);
  right: 10%;
  bottom: 13%;
  color: var(--labpp-accent-blue);
  opacity: 0.42;
}
[data-theme="dark"] .labpp-sticker{ opacity: 0.58; }
.labpp-eyebrow,
.labpp-section-kicker,
.labpp-panel-label{
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border: 1px solid var(--labpp-glass-border);
  border-radius: 999px;
  background: var(--labpp-primary-soft);
  color: var(--labpp-primary-strong);
  padding: 0.32rem 0.72rem;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: uppercase;
  -webkit-backdrop-filter: var(--labpp-glass);
  backdrop-filter: var(--labpp-glass);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--labpp-primary) 12%, transparent);
}
.labpp-hero-title{
  max-width: 13ch;
  margin: 0.9rem 0 1rem;
  font-size: clamp(2.4rem, 7cqi, 4.5rem);
  line-height: 1.02;
  letter-spacing: 0;
  background: linear-gradient(100deg, var(--labpp-primary-strong), var(--labpp-accent-blue) 55%, var(--labpp-accent-warm));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.labpp-hero-lead{
  max-width: 48rem;
  margin: 0 0 2rem;
  color: var(--labpp-muted);
  font-size: 1.18rem;
  line-height: 1.58;
}
.labpp-snapshot,
.labpp-section{
  padding: clamp(1.8rem, 5vw, 3.6rem) 0;
}
.labpp-snapshot-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1px;
  border: 1px solid var(--labpp-border);
  border-radius: var(--labpp-radius-lg);
  background: var(--labpp-border);
  overflow: hidden;
  box-shadow: var(--labpp-shadow-lg);
}
.labpp-snapshot-grid > div{
  background: var(--labpp-surface);
  padding: 1.05rem 1.15rem;
  -webkit-backdrop-filter: var(--labpp-glass);
  backdrop-filter: var(--labpp-glass);
}
.labpp-snapshot-grid dt{
  margin: 0 0 0.35rem;
  color: var(--labpp-primary-strong);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.labpp-snapshot-grid dd{
  margin: 0;
  color: var(--labpp-ink);
  font-size: 0.98rem;
  line-height: 1.45;
}
.labpp-snapshot-challenge{
  margin: 1rem 0 0;
  border: 1px solid var(--labpp-border);
  border-radius: var(--labpp-radius);
  background: var(--labpp-blue-soft);
  color: var(--labpp-ink);
  padding: 1rem 1.15rem;
  font-size: 1rem;
  line-height: 1.55;
}
.labpp-snapshot-challenge span{
  color: var(--labpp-accent-blue);
  font-weight: 800;
}
.labpp-section-title{
  max-width: 25ch;
  margin: 0.75rem 0 1rem;
  color: var(--labpp-ink);
  font-size: clamp(1.65rem, 4cqi, 2.35rem);
  line-height: 1.12;
  letter-spacing: 0;
}
.labpp-section-body{
  max-width: 64ch;
}
.labpp-section-body p{
  margin: 0 0 1rem;
  color: var(--labpp-muted);
  font-size: 1.04rem;
  line-height: 1.65;
}
.labpp-section-body strong{
  color: var(--labpp-ink);
  font-weight: 700;
}
.labpp-emphasis{
  border-left: 3px solid var(--labpp-primary);
  color: var(--labpp-ink) !important;
  padding-left: 1rem;
  font-weight: 600;
}
.labpp-caption{
  margin: 1rem 0 0;
  color: var(--labpp-muted);
  font-size: 0.88rem;
  line-height: 1.5;
  font-style: italic;
}
.labpp-asset{
  container-type: inline-size;
  margin-top: clamp(1.4rem, 4vw, 2.4rem);
}
/* ---- Pepita hero arc ---- */
.labpp-arc-label{
  margin: 0 0 1rem;
  color: var(--labpp-primary-strong);
  font-weight: 800;
}
.labpp-arc-track{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}
.labpp-arc-rail{
  position: absolute;
  top: 22px;
  right: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--labpp-border), var(--labpp-primary), var(--labpp-accent-blue), var(--labpp-border));
}
.labpp-arc-phase{
  position: relative;
  z-index: 1;
  flex: 1 1 13rem;
  min-width: 0;
}
.labpp-arc-node{
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: var(--labpp-primary-fill);
  color: var(--labpp-on-primary);
  font-weight: 900;
  box-shadow: var(--labpp-shadow);
}
.labpp-arc-toggle{
  display: flex;
  width: 100%;
  min-height: 14rem;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.7rem;
  border: 1px solid var(--labpp-glass-border);
  border-radius: var(--labpp-radius);
  background: var(--labpp-surface);
  color: var(--labpp-ink);
  padding: 1rem;
  text-align: left;
  -webkit-backdrop-filter: var(--labpp-glass);
  backdrop-filter: var(--labpp-glass);
  box-shadow: var(--labpp-shadow);
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.labpp-arc-toggle:hover,
.labpp-arc-toggle:focus-visible{
  border-color: var(--labpp-primary);
  transform: translateY(-2px);
  box-shadow: var(--labpp-shadow-lg);
}
.labpp-arc-toggle:focus-visible{
  outline: 2px solid var(--labpp-primary);
  outline-offset: 2px;
}
.labpp-arc-tag{
  color: var(--labpp-primary-strong);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}
.labpp-arc-toggle b{
  color: var(--labpp-ink);
  font-size: 1.1rem;
  line-height: 1.25;
}
.labpp-arc-toggle > span:not(.labpp-arc-tag):not(.labpp-arc-more){
  color: var(--labpp-muted);
  font-size: 0.92rem;
  line-height: 1.45;
}
.labpp-arc-more{
  margin-top: auto;
  color: var(--labpp-primary-strong);
  font-size: 0.82rem;
  font-weight: 800;
}
.labpp-arc-more-close{ display: none; }
.labpp-arc-toggle[aria-expanded="true"] .labpp-arc-more-open{ display: none; }
.labpp-arc-toggle[aria-expanded="true"] .labpp-arc-more-close{ display: inline; }
.labpp-arc-detail{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 240ms ease;
}
.labpp-arc-toggle[aria-expanded="true"] + .labpp-arc-detail{ grid-template-rows: 1fr; }
.labpp-arc-detail-inner{ overflow: hidden; }
.labpp-arc-detail p{
  margin: 0.7rem 0 0;
  border: 1px solid var(--labpp-border);
  border-radius: 12px;
  background: var(--labpp-surface-2);
  color: var(--labpp-muted);
  padding: 0.8rem 0.9rem;
  font-size: 0.9rem;
  line-height: 1.5;
}
@container (max-width: 45rem){
.labpp-arc-rail{ display: none; }
.labpp-arc-phase{ flex: 0 0 auto; width: 100%; }
.labpp-arc-toggle{ min-height: auto; }
}
/* ---- Access framing ---- */
.labpp-asset--access{
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 1rem;
  align-items: stretch;
}
.labpp-access-map{
  position: relative;
  min-height: 21rem;
  border: 1px solid var(--labpp-glass-border);
  border-radius: var(--labpp-radius-lg);
  background:
    radial-gradient(circle at 28% 28%, var(--labpp-primary-soft), transparent 30%),
    radial-gradient(circle at 70% 70%, var(--labpp-blue-soft), transparent 34%),
    var(--labpp-surface);
  overflow: hidden;
  -webkit-backdrop-filter: var(--labpp-glass);
  backdrop-filter: var(--labpp-glass);
  box-shadow: var(--labpp-shadow);
}
.labpp-access-region{
  position: absolute;
  border: 2px solid color-mix(in srgb, var(--labpp-accent-blue) 34%, transparent);
  background: color-mix(in srgb, var(--labpp-blue-soft) 74%, transparent);
}
.labpp-access-region--north{
  inset: 12% 18% 44% 20%;
  border-radius: 42% 58% 44% 56%;
  transform: rotate(-10deg);
}
.labpp-access-region--coast{
  inset: 42% 31% 12% 12%;
  border-radius: 55% 45% 48% 52%;
  transform: rotate(12deg);
}
.labpp-access-pin{
  position: absolute;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--labpp-glass-border);
  border-radius: 999px;
  background: var(--labpp-surface);
  color: var(--labpp-ink);
  padding: 0.38rem 0.62rem;
  font-size: 0.8rem;
  font-weight: 800;
  box-shadow: var(--labpp-shadow);
}
.labpp-access-pin::before{
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.38rem;
  border-radius: 50%;
  background: currentColor;
  content: "";
}
.labpp-access-pin--care{
  right: 12%;
  top: 22%;
  color: var(--labpp-accent-blue);
}
.labpp-access-pin--remote{
  left: 9%;
  bottom: 20%;
  color: var(--labpp-primary-strong);
}
.labpp-access-route{
  position: absolute;
  inset: 35% 26% 35% 24%;
  border-top: 3px dashed var(--labpp-primary);
  transform: rotate(-22deg);
  opacity: 0.72;
}
.labpp-access-panel{
  border: 1px solid var(--labpp-glass-border);
  border-radius: var(--labpp-radius-lg);
  background: var(--labpp-surface);
  padding: 1.1rem;
  -webkit-backdrop-filter: var(--labpp-glass);
  backdrop-filter: var(--labpp-glass);
  box-shadow: var(--labpp-shadow);
}
.labpp-access-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.9rem 0 1rem;
}
.labpp-access-button,
.labpp-persona-tab,
.labpp-journey-stage,
.labpp-ia-node,
.labpp-screen-tab{
  min-height: 42px;
  border: 1px solid var(--labpp-border);
  background: var(--labpp-surface);
  color: var(--labpp-ink);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.labpp-access-button{
  border-radius: 999px;
  padding: 0.45rem 0.78rem;
  font-weight: 800;
}
.labpp-access-button:hover,
.labpp-persona-tab:hover,
.labpp-journey-stage:hover,
.labpp-ia-node:hover,
.labpp-screen-tab:hover{
  border-color: var(--labpp-primary);
  transform: translateY(-1px);
}
.labpp-access-button:focus-visible,
.labpp-persona-tab:focus-visible,
.labpp-journey-stage:focus-visible,
.labpp-ia-node:focus-visible,
.labpp-screen-tab:focus-visible{
  outline: 2px solid var(--labpp-primary);
  outline-offset: 2px;
}
.labpp-access-button.is-active,
.labpp-screen-tab.is-active{
  background: var(--labpp-primary-fill);
  border-color: var(--labpp-primary-fill);
  color: var(--labpp-on-primary);
}
.labpp-access-detail{
  display: grid;
  gap: 0.75rem;
  border: 1px solid var(--labpp-border);
  border-radius: var(--labpp-radius);
  background: var(--labpp-surface-2);
  padding: 1rem;
}
.labpp-access-detail h3,
.labpp-persona-card h3,
.labpp-journey-detail h3,
.labpp-ia-detail h3,
.labpp-prototype-note h3{
  margin: 0;
  color: var(--labpp-ink);
  font-size: 1.24rem;
  line-height: 1.25;
}
.labpp-access-detail p,
.labpp-journey-cells p{
  margin: 0;
  border-radius: 12px;
  background: var(--labpp-surface);
  padding: 0.85rem 0.9rem;
}
.labpp-access-detail span,
.labpp-journey-cells span,
.labpp-ia-detail span{
  display: block;
  margin-bottom: 0.28rem;
  color: var(--labpp-primary-strong);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
}
.labpp-access-detail b,
.labpp-journey-cells b,
.labpp-ia-detail b{
  color: var(--labpp-muted);
  font-size: 0.92rem;
  line-height: 1.5;
  font-weight: 600;
}
@container (max-width: 48rem){
.labpp-asset--access{ grid-template-columns: 1fr; }
.labpp-access-map{ min-height: 17rem; }
.labpp-access-region--coast{ inset: 44% 24% 13% 24%; transform: none; }
.labpp-access-route{ inset: 38% 24% 36% 24%; }
}
/* ---- Personas ---- */
.labpp-persona-tabs{
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.labpp-persona-tab{
  display: flex;
  flex: 1 1 13rem;
  align-items: center;
  gap: 0.7rem;
  border-radius: var(--labpp-radius);
  padding: 0.75rem 0.9rem;
  text-align: left;
}
.labpp-persona-tab span{
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--labpp-primary-soft);
  color: var(--labpp-primary-strong);
  font-weight: 900;
  flex: 0 0 auto;
}
.labpp-persona-tab b{
  color: var(--labpp-ink);
  font-size: 0.96rem;
  line-height: 1.2;
}
.labpp-persona-tab.is-active{
  border-color: var(--labpp-primary);
  background: var(--labpp-primary-soft);
}
.labpp-persona-card{
  display: grid;
  grid-template-columns: minmax(9rem, 0.35fr) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: stretch;
  border: 1px solid var(--labpp-glass-border);
  border-radius: var(--labpp-radius-lg);
  background: var(--labpp-surface);
  padding: 1.2rem;
  -webkit-backdrop-filter: var(--labpp-glass);
  backdrop-filter: var(--labpp-glass);
  box-shadow: var(--labpp-shadow);
}
.labpp-persona-portrait{
  position: relative;
  min-height: 16rem;
  border-radius: var(--labpp-radius);
  background:
    radial-gradient(circle at 50% 30%, var(--labpp-primary-soft) 0 18%, transparent 19%),
    linear-gradient(155deg, var(--labpp-blue-soft), var(--labpp-warm-soft));
  overflow: hidden;
}
.labpp-persona-portrait span{
  position: absolute;
  border-radius: 999px;
  background: var(--labpp-surface);
  box-shadow: var(--labpp-shadow);
}
.labpp-persona-portrait span:nth-child(1){ width: 42%; height: 12%; left: 29%; top: 49%; }
.labpp-persona-portrait span:nth-child(2){ width: 62%; height: 11%; left: 19%; top: 64%; }
.labpp-persona-portrait span:nth-child(3){ width: 46%; height: 10%; left: 27%; top: 79%; }
.labpp-persona-copy{
  display: grid;
  gap: 0.9rem;
  align-content: start;
}
.labpp-persona-dl{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.75rem;
  margin: 0;
}
.labpp-persona-dl > div{
  border: 1px solid var(--labpp-border);
  border-radius: 12px;
  background: var(--labpp-surface-2);
  padding: 0.85rem 0.9rem;
}
.labpp-persona-dl dt{
  margin: 0 0 0.3rem;
  color: var(--labpp-primary-strong);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
}
.labpp-persona-dl dd{
  margin: 0;
  color: var(--labpp-muted);
  font-size: 0.92rem;
  line-height: 1.5;
}
@container (max-width: 42rem){
.labpp-persona-card{ grid-template-columns: 1fr; }
.labpp-persona-portrait{ min-height: 10rem; }
}
/* ---- Journey map ---- */
.labpp-journey-rail{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.65rem;
  margin-bottom: 1rem;
}
.labpp-journey-stage{
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border-radius: var(--labpp-radius);
  padding: 0.75rem 0.85rem;
  text-align: left;
}
.labpp-journey-stage span{
  display: grid;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--labpp-blue-soft);
  color: var(--labpp-accent-blue);
  font-weight: 900;
}
.labpp-journey-stage b{
  color: var(--labpp-ink);
  font-size: 0.98rem;
}
.labpp-journey-stage.is-active{
  border-color: var(--labpp-accent-blue);
  background: var(--labpp-blue-soft);
}
.labpp-journey-detail{
  display: grid;
  gap: 1rem;
  border: 1px solid var(--labpp-glass-border);
  border-radius: var(--labpp-radius-lg);
  background: var(--labpp-surface);
  padding: 1.15rem;
  -webkit-backdrop-filter: var(--labpp-glass);
  backdrop-filter: var(--labpp-glass);
  box-shadow: var(--labpp-shadow);
}
.labpp-journey-cells{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.75rem;
}
.labpp-journey-cells p:nth-child(1){ background: var(--labpp-warm-soft); }
.labpp-journey-cells p:nth-child(2){ background: var(--labpp-risk-soft); }
.labpp-journey-cells p:nth-child(3){ background: var(--labpp-good-soft); }
/* ---- IA tree ---- */
.labpp-asset--ia{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.75fr);
  gap: 1rem;
  align-items: stretch;
}
.labpp-ia-map,
.labpp-ia-detail{
  border: 1px solid var(--labpp-glass-border);
  border-radius: var(--labpp-radius-lg);
  background: var(--labpp-surface);
  padding: 1.1rem;
  -webkit-backdrop-filter: var(--labpp-glass);
  backdrop-filter: var(--labpp-glass);
  box-shadow: var(--labpp-shadow);
}
.labpp-ia-root{
  display: grid;
  min-height: 4.4rem;
  place-items: center;
  border-radius: var(--labpp-radius);
  background: linear-gradient(135deg, var(--labpp-primary-fill), var(--labpp-accent-blue));
  color: var(--labpp-on-primary);
  font-size: 1.28rem;
  font-weight: 900;
}
[data-theme="dark"] .labpp-ia-root{ color: var(--espresso); }
.labpp-ia-branches{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: 0.7rem;
  margin-top: 1rem;
}
.labpp-ia-node{
  display: flex;
  align-items: center;
  gap: 0.55rem;
  border-radius: 12px;
  padding: 0.72rem 0.8rem;
  text-align: left;
  font-weight: 800;
}
.labpp-ia-node span{
  width: 0.78rem;
  height: 0.78rem;
  border-radius: 50%;
  background: var(--labpp-primary);
  flex: 0 0 auto;
}
.labpp-ia-node.is-active{
  border-color: var(--labpp-primary);
  background: var(--labpp-primary-soft);
}
.labpp-ia-detail{
  display: grid;
  gap: 0.8rem;
  align-content: start;
}
.labpp-ia-detail p{
  margin: 0;
  color: var(--labpp-muted);
  line-height: 1.55;
}
.labpp-ia-detail div{
  border-radius: 12px;
  background: var(--labpp-surface-2);
  padding: 0.85rem 0.9rem;
}
@container (max-width: 48rem){
.labpp-asset--ia{ grid-template-columns: 1fr; }
}
/* ---- Prototype ---- */
.labpp-prototype-controls{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.labpp-screen-tab{
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  font-weight: 800;
}
.labpp-phone-shell{
  display: grid;
  grid-template-columns: minmax(14rem, 0.72fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}
.labpp-phone{
  width: min(100%, 20rem);
  justify-self: center;
  border: 1px solid color-mix(in srgb, var(--labpp-ink) 18%, transparent);
  border-radius: 2rem;
  background: color-mix(in srgb, var(--labpp-ink) 10%, var(--surface));
  padding: 0.8rem;
  box-shadow: var(--labpp-shadow-lg);
}
.labpp-phone-status{
  display: flex;
  justify-content: space-between;
  padding: 0.2rem 0.75rem 0.7rem;
}
.labpp-phone-status span{
  display: block;
  width: 3rem;
  height: 0.42rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--labpp-ink) 16%, transparent);
}
.labpp-phone-card{
  display: grid;
  gap: 0.7rem;
  min-height: 22rem;
  border-radius: 1.35rem;
  background:
    radial-gradient(circle at 88% 10%, var(--labpp-primary-soft), transparent 28%),
    linear-gradient(180deg, var(--surface), var(--labpp-surface-2));
  padding: 1.2rem;
}
.labpp-phone-card > p:first-child{
  margin: 0;
  color: var(--labpp-primary-strong);
  font-size: 0.84rem;
  font-weight: 900;
  text-transform: uppercase;
}
.labpp-phone-card h3{
  margin: 0;
  color: var(--labpp-ink);
  font-size: 1.38rem;
  line-height: 1.18;
}
.labpp-phone-card p{
  margin: 0;
  color: var(--labpp-muted);
  font-size: 0.94rem;
  line-height: 1.52;
}
.labpp-phone-card button{
  align-self: end;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: var(--labpp-primary-fill);
  color: var(--labpp-on-primary);
  padding: 0.66rem 1rem;
  font-weight: 900;
}
.labpp-phone-card > span{
  justify-self: start;
  border-radius: 999px;
  background: var(--labpp-good-soft);
  color: var(--labpp-good);
  padding: 0.28rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 800;
}
.labpp-phone-list{
  display: grid;
  gap: 0.42rem;
  margin-top: 0.65rem;
}
.labpp-phone-list span{
  height: 0.72rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--labpp-surface) 70%, var(--labpp-primary-soft));
}
.labpp-prototype-note{
  border: 1px solid var(--labpp-glass-border);
  border-radius: var(--labpp-radius-lg);
  background: var(--labpp-surface);
  padding: 1.2rem;
  -webkit-backdrop-filter: var(--labpp-glass);
  backdrop-filter: var(--labpp-glass);
  box-shadow: var(--labpp-shadow);
}
.labpp-prototype-note p:not(.labpp-panel-label){
  margin: 0.7rem 0 0;
  color: var(--labpp-muted);
  line-height: 1.6;
}
@container (max-width: 48rem){
.labpp-phone-shell{ grid-template-columns: 1fr; }
}
/* ---- Evidence and sources ---- */
.labpp-evidence-cards,
.labpp-asset--sources{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 0.9rem;
}
.labpp-evidence-card,
.labpp-confirm,
.labpp-source-card{
  border: 1px solid var(--labpp-glass-border);
  border-radius: var(--labpp-radius);
  background: var(--labpp-surface);
  padding: 1rem 1.1rem;
  -webkit-backdrop-filter: var(--labpp-glass);
  backdrop-filter: var(--labpp-glass);
  box-shadow: var(--labpp-shadow);
}
.labpp-evidence-card{
  display: grid;
  gap: 0.32rem;
  color: inherit;
}
.labpp-evidence-card span,
.labpp-source-card span{
  color: var(--labpp-primary-strong);
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}
.labpp-evidence-card b,
.labpp-source-card h3{
  margin: 0;
  color: var(--labpp-ink);
  font-size: 1.08rem;
}
.labpp-evidence-card em{
  color: var(--labpp-accent-blue);
  font-style: normal;
  font-weight: 800;
}
.labpp-confirm{
  margin-top: 0.9rem;
  background: var(--labpp-warm-soft);
}
.labpp-confirm ul{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: 0.5rem;
  margin: 0.9rem 0 0;
  padding: 0;
  list-style: none;
}
.labpp-confirm li{
  border-radius: 10px;
  background: var(--labpp-surface);
  color: var(--labpp-ink);
  padding: 0.62rem 0.75rem;
  font-size: 0.9rem;
  line-height: 1.4;
}
.labpp-source-card{
  border-top: 3px solid var(--labpp-primary);
}
.labpp-source-card p{
  margin: 0.5rem 0 0;
  color: var(--labpp-muted);
  font-size: 0.92rem;
  line-height: 1.52;
}
.labpp-section--close{
  padding-bottom: clamp(3rem, 8vw, 5.4rem);
}
.labpp-section--close .cl-view-link{
  display: inline-block;
  margin-top: 1.6rem;
}
/* =========================================================
   CUSTOMER PROFILE — standardization pass
   Blue primary, rose/cognac/denim accents, shared green/red
   semantic states, and glassy detailed asset surfaces.
   ========================================================= */
.labcp-page{
  --labcp-primary: #156c7c;
  --labcp-primary-strong: #0e4f5b;
  --labcp-primary-soft: color-mix(in srgb, #156c7c 14%, var(--surface));
  --labcp-accent-rose: #b14f63;
  --labcp-accent-warm: #9b623f;
  --labcp-accent-blue: #15606e;
  --labcp-good: #0f7a4e;
  --labcp-good-soft: color-mix(in srgb, #0f7a4e 18%, var(--surface));
  --labcp-risk: #b3303f;
  --labcp-risk-soft: color-mix(in srgb, #b3303f 16%, var(--surface));
  --labcp-warn: #855a0a;
  --labcp-warn-soft: color-mix(in srgb, #9b623f 15%, var(--surface));
  --labcp-surface: color-mix(in srgb, var(--surface) 86%, transparent);
  --labcp-surface-2: color-mix(in srgb, #e1f0f3 46%, var(--surface));
  --labcp-border: color-mix(in srgb, #156c7c 20%, var(--line));
  --labcp-glass: blur(14px) saturate(1.12);
  background-color: var(--bg);
  background-image:
    radial-gradient(color-mix(in srgb, #156c7c 12%, transparent) 1.2px, transparent 1.3px),
    radial-gradient(34rem 26rem at 8% 9%, color-mix(in srgb, #156c7c 15%, transparent), transparent 64%),
    radial-gradient(34rem 28rem at 91% 17%, color-mix(in srgb, #b14f63 15%, transparent), transparent 62%),
    radial-gradient(38rem 30rem at 77% 93%, color-mix(in srgb, #0f7a4e 10%, transparent), transparent 60%),
    linear-gradient(155deg, var(--bg), color-mix(in srgb, #e1f0f3 34%, var(--bg)) 54%, color-mix(in srgb, #f8e8ea 38%, var(--bg)));
  background-size: 26px 26px, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
[data-theme="dark"] .labcp-page{
  --labcp-primary: #5cc4d6;
  --labcp-primary-strong: #8fd9e6;
  --labcp-primary-soft: rgba(92, 196, 214, 0.17);
  --labcp-accent-rose: #e79bac;
  --labcp-accent-warm: #e0ac4f;
  --labcp-accent-blue: #5cc4d6;
  --labcp-good: #57c89a;
  --labcp-good-soft: rgba(87, 200, 154, 0.18);
  --labcp-risk: #e8808d;
  --labcp-risk-soft: rgba(232, 128, 141, 0.18);
  --labcp-warn: #e0ac4f;
  --labcp-warn-soft: rgba(224, 172, 79, 0.16);
  --labcp-surface: color-mix(in srgb, var(--surface) 78%, transparent);
  --labcp-surface-2: color-mix(in srgb, #5cc4d6 10%, var(--surface));
  --labcp-border: color-mix(in srgb, #5cc4d6 25%, var(--line));
  background-image:
    radial-gradient(color-mix(in srgb, #5cc4d6 16%, transparent) 1.2px, transparent 1.3px),
    radial-gradient(34rem 26rem at 8% 9%, color-mix(in srgb, #5cc4d6 16%, transparent), transparent 64%),
    radial-gradient(34rem 28rem at 91% 17%, color-mix(in srgb, #e79bac 11%, transparent), transparent 62%),
    radial-gradient(38rem 30rem at 77% 93%, color-mix(in srgb, #57c89a 9%, transparent), transparent 60%),
    linear-gradient(155deg, var(--bg), color-mix(in srgb, #5cc4d6 8%, var(--bg)) 54%, var(--bg));
}
.labcp-hero-title,
.labcp-section-title,
.labcp-asset-title,
.labcp-principle,
.labcp-eyebrow,
.labcp-section-kicker,
.labcp-asset-eyebrow,
.labcp-chip,
.labcp-tab,
.labcp-status-btn,
.labcp-snapshot-grid dt,
.labcp-future-label,
.labcp-mm-kicker,
.labcp-stage-more{
  letter-spacing: 0;
}
.labcp-hero-title{
  background: linear-gradient(100deg, var(--labcp-primary-strong), var(--labcp-accent-rose) 52%, var(--labcp-accent-blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.labcp-section-title,
.labcp-asset-title{
  color: var(--labcp-ink);
}
.labcp-eyebrow,
.labcp-section-kicker,
.labcp-asset-eyebrow,
.labcp-stage-more{
  color: var(--labcp-primary-strong);
}
.labcp-chip,
.labcp-evo-index,
.labcp-an-badge,
.labcp-an-num{
  background: var(--labcp-primary-soft);
  color: var(--labcp-primary-strong);
  border-color: color-mix(in srgb, var(--labcp-primary) 24%, var(--labcp-border));
}
.labcp-snapshot-grid,
.labcp-snapshot-challenge,
.labcp-evo-stage,
.labcp-frag-center,
.labcp-frag-card,
.labcp-search-col,
.labcp-result,
.labcp-mm-col,
.labcp-val-card,
.labcp-model-hub,
.labcp-node,
.labcp-model-attr,
.labcp-an-frame,
.labcp-an-composer,
.labcp-an-row,
.labcp-an-card,
.labcp-tab-panel,
.labcp-status,
.labcp-trust-card,
.labcp-future-tier,
.labcp-impact-card{
  -webkit-backdrop-filter: var(--labcp-glass);
  backdrop-filter: var(--labcp-glass);
}
.labcp-evo-stage,
.labcp-frag-card,
.labcp-search-col,
.labcp-mm-col,
.labcp-val-card,
.labcp-node,
.labcp-trust-card,
.labcp-impact-card{
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.labcp-evo-stage:hover,
.labcp-frag-card:hover,
.labcp-search-col:hover,
.labcp-mm-col:hover,
.labcp-val-card:hover,
.labcp-node:hover,
.labcp-trust-card:hover,
.labcp-impact-card:hover{
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--labcp-primary) 36%, var(--labcp-border));
  box-shadow: var(--labcp-shadow-lg);
}
.labcp-stage-toggle,
.labcp-tab,
.labcp-status-btn{
  min-height: 42px;
}
.labcp-stage-toggle[aria-expanded="true"]{
  background: linear-gradient(135deg, color-mix(in srgb, var(--labcp-primary) 10%, transparent), transparent);
}
.labcp-evo-stage--risk{
  --st: var(--labcp-risk);
  --st-soft: var(--labcp-risk-soft);
}
.labcp-evo-stage--warn{
  --st: var(--labcp-warn);
  --st-soft: var(--labcp-warn-soft);
}
.labcp-evo-stage--good{
  --st: var(--labcp-good);
  --st-soft: var(--labcp-good-soft);
}
.labcp-tab[aria-selected="true"],
.labcp-an-action--primary{
  background: #3a4f8a;
  border-color: #3a4f8a;
  color: #ffffff;
}
[data-theme="dark"] .labcp-tab[aria-selected="true"],
[data-theme="dark"] .labcp-an-action--primary{
  background: #8aa4e8;
  border-color: #8aa4e8;
  color: #0e1525;
}
.labcp-status-btn[data-labcp-status="before"][aria-selected="true"]{
  background: #b3303f;
  color: #ffffff;
}
.labcp-status-btn[data-labcp-status="after"][aria-selected="true"]{
  background: #0f7a4e;
  color: #ffffff;
}
[data-theme="dark"] .labcp-status-btn[data-labcp-status="before"][aria-selected="true"]{
  background: #e8808d;
  color: #0e1525;
}
[data-theme="dark"] .labcp-status-btn[data-labcp-status="after"][aria-selected="true"]{
  background: #57c89a;
  color: #0e1525;
}
.labcp-search-col:first-child,
.labcp-mm-col--lead{
  border-top: 3px solid var(--labcp-risk);
}
.labcp-search-col--after,
.labcp-mm-col--cust{
  border-top: 3px solid var(--labcp-good);
}
.labcp-result--customer,
.labcp-status-list--after li{
  background: var(--labcp-good-soft);
  border-color: color-mix(in srgb, var(--labcp-good) 38%, var(--labcp-border));
  color: var(--labcp-good);
}
.labcp-status-list--before li{
  background: var(--labcp-risk-soft);
  border-color: color-mix(in srgb, var(--labcp-risk) 34%, var(--labcp-border));
}
.labcp-model-hub{
  background: linear-gradient(150deg, #3a4f8a, #283a6b);
  color: #ffffff;
}
[data-theme="dark"] .labcp-model-hub{
  background: linear-gradient(150deg, #8aa4e8, #aec3ff);
  color: #0e1525;
}
/* =========================================================
   2026-06-24 (Claude) — palette discipline: replace the per-card
   "rainbow" tones in Generate Draft with the project primary +
   semantic green/red/amber. Appended last so it wins the cascade.
   ========================================================= */
/* Phase timeline reads as a story arc, not a rainbow:
   idea (primary violet) → confidence gap (warn) → wrong turn (risk) → solved (good). */
.labgd-timeline .labgd-phase:nth-child(1)::before{ background: var(--labgd-primary); }
.labgd-timeline .labgd-phase:nth-child(3)::before{ background: var(--labgd-warn); }
.labgd-timeline .labgd-phase:nth-child(5)::before{ background: var(--labgd-risk); }
.labgd-timeline .labgd-phase:nth-child(7)::before{ background: var(--labgd-good); }
.labgd-timeline .labgd-phase:nth-child(1) .labgd-phase-glyph{ color: var(--labgd-primary); }
.labgd-timeline .labgd-phase:nth-child(3) .labgd-phase-glyph{ color: var(--labgd-warn); }
.labgd-timeline .labgd-phase:nth-child(5) .labgd-phase-glyph{ color: var(--labgd-risk); }
.labgd-timeline .labgd-phase:nth-child(7) .labgd-phase-glyph{ color: var(--labgd-good); }
/* Research clusters: one cohesive violet family. The five themes are
   distinguished by their labels/quotes, not by five different hues. */
.labgd-research-cluster--red,
.labgd-research-cluster--yellow,
.labgd-research-cluster--green,
.labgd-research-cluster--purple,
.labgd-research-cluster--blue{ background: var(--labgd-primary-soft); }
/* =========================================================
   2026-06-24 (Claude) — AutoSync interactivity uplift.
   Insight cards & reframe layers become click-to-reveal
   accordions (parent is block so 0fr→1fr resolves). Appended
   last to win the cascade over the static base rules.
   ========================================================= */
.labas-asset-hint{
  margin: 0 0 0.8rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--labas-muted);
  font-style: italic;
}
/* ---- Insight cards: reveal the design response ---- */
.labas-insight{ padding: 0; overflow: hidden; }
.labas-insight-toggle{
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 1.1rem 1.2rem;
}
.labas-insight-toggle:focus-visible{ outline: 2px solid var(--labas-brand); outline-offset: -3px; border-radius: var(--labas-radius); }
.labas-insight-toggle .labas-insight-ev{ margin: 0; }
.labas-insight-cue{
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.7rem;
  font-family: var(--grotesk);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--labas-brand);
}
.labas-insight-cue::after{ content: "+"; font-size: 0.95rem; line-height: 1; }
.labas-insight-toggle[aria-expanded="true"] .labas-insight-cue::after{ content: "–"; }
.labas-insight-im{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
  margin: 0;
}
.labas-insight-toggle[aria-expanded="true"] + .labas-insight-im{ grid-template-rows: 1fr; }
.labas-insight-im-inner{ overflow: hidden; }
.labas-insight-im-inner p{
  margin: 0;
  padding: 0.85rem 1.2rem 1.15rem;
  border-top: 1px solid var(--labas-border);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--labas-ink);
}
.labas-insight-im-inner span{
  display: block;
  font-family: var(--grotesk);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--labas-brand);
  margin-bottom: 0.2rem;
}
/* ---- Reframe layers: expand each layer ---- */
.labas-layer{ display: block; padding: 0; overflow: hidden; }
.labas-layer-toggle{
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  padding: 0.9rem 1.05rem;
}
.labas-layer-toggle:focus-visible{ outline: 2px solid var(--labas-brand); outline-offset: -3px; border-radius: var(--labas-radius); }
.labas-layer-toggle b{ flex: 1 1 auto; display: block; font-size: 1rem; color: var(--labas-ink); margin: 0; }
.labas-layer-cue{
  flex: 0 0 auto;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--labas-brand-soft);
  color: var(--labas-brand);
  font-family: var(--grotesk); font-weight: 700; font-size: 1rem; line-height: 1;
}
.labas-layer-toggle[aria-expanded="true"] .labas-layer-cue{ font-size: 0; }
.labas-layer-toggle[aria-expanded="true"] .labas-layer-cue::after{ content: "–"; font-size: 1rem; }
.labas-layer-d{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.labas-layer-toggle[aria-expanded="true"] + .labas-layer-d{ grid-template-rows: 1fr; }
.labas-layer-d-inner{ overflow: hidden; }
.labas-layer-d-inner p{
  margin: 0;
  padding: 0 1.05rem 0.95rem 3.05rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--labas-muted);
}
/* =========================================================
   2026-06-24 (Claude) — AutoSync interactivity uplift, batch 2:
   scroll-map spotlight, scope-matrix focus, quote→BOS accordion.
   ========================================================= */
/* ---- Scroll map: spotlight the buried "work" blocks ---- */
.labas-scroll-toolbar{ margin-bottom: 0.8rem; }
.labas-scroll-highlight-btn{
  appearance: none; cursor: pointer; font: inherit;
  font-family: var(--grotesk); font-weight: 600; font-size: 0.82rem;
  color: var(--labas-brand);
  background: var(--labas-brand-soft);
  border: 1px solid var(--labas-border);
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
}
.labas-scroll-highlight-btn[aria-pressed="true"]{ background: var(--labas-brand); color: #fff; border-color: var(--labas-brand); }
[data-theme="dark"] .labas-scroll-highlight-btn[aria-pressed="true"]{ color: #0e1525; }
.labas-scroll-highlight-btn:focus-visible{ outline: 2px solid var(--labas-brand); outline-offset: 2px; }
.labas-scroll-block{ transition: opacity 0.2s ease, background 0.2s ease, border-color 0.2s ease; }
.labas-asset--scroll.is-highlight .labas-scroll-block--top,
.labas-asset--scroll.is-highlight .labas-scroll-block--mid{ opacity: 0.4; }
.labas-asset--scroll.is-highlight .labas-scroll-block--work{
  border-style: solid;
  border-color: var(--labas-brand);
  background: var(--labas-brand-soft);
  color: var(--labas-ink);
  font-weight: 600;
}
/* ---- Scope matrix: focus MVP vs Later (tint the focused column) ---- */
.labas-matrix-switch{
  display: inline-flex; gap: 0.25rem;
  background: var(--labas-surface-2);
  border: 1px solid var(--labas-border);
  border-radius: 999px; padding: 0.25rem;
  margin-bottom: 0.9rem;
}
.labas-matrix-view{
  appearance: none; cursor: pointer; font: inherit;
  font-family: var(--grotesk); font-weight: 600; font-size: 0.8rem;
  color: var(--labas-muted); background: none; border: 0;
  border-radius: 999px; padding: 0.4rem 0.85rem;
}
.labas-matrix-view.is-active{ background: var(--labas-brand); color: #fff; }
[data-theme="dark"] .labas-matrix-view.is-active{ color: #0e1525; }
.labas-matrix-view:focus-visible{ outline: 2px solid var(--labas-brand); outline-offset: 2px; }
.labas-matrix-mvp, .labas-matrix-later{ border-radius: 8px; transition: background 0.2s ease, box-shadow 0.2s ease; }
.labas-asset--matrix.is-mvp .labas-matrix-mvp,
.labas-asset--matrix.is-later .labas-matrix-later{
  background: var(--labas-brand-soft);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--labas-brand) 22%, transparent);
}
/* ---- Quote → BOS: each stage's steps collapse/expand ---- */
.labas-qb-flow{ align-items: flex-start; }
.labas-qb-group{ padding: 0; overflow: hidden; }
.labas-qb-toggle{
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  width: 100%; text-align: left;
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
  padding: 0.85rem 1rem;
}
.labas-qb-toggle:focus-visible{ outline: 2px solid var(--labas-brand); outline-offset: -3px; border-radius: var(--labas-radius); }
.labas-qb-toggle .labas-qb-group-name{ margin: 0; }
.labas-qb-count{
  flex: 0 0 auto; min-width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--labas-brand-soft); color: var(--labas-brand);
  font-family: var(--grotesk); font-weight: 700; font-size: 0.72rem;
}
.labas-qb-steps-wrap{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
.labas-qb-toggle[aria-expanded="true"] + .labas-qb-steps-wrap{ grid-template-rows: 1fr; }
.labas-qb-steps-wrap > .labas-qb-steps{ overflow: hidden; padding: 0 1rem 0.9rem; min-height: 0; }
/* =========================================================
   2026-06-24 (Codex) — Pepita + Customer Profile interaction uplift.
   Interactions clarify evidence boundaries, source translation, customer
   memory fragments, validation signals, and data-model logic.
   ========================================================= */
.labpp-proof-lens,
.labpp-source-focus,
.labcp-frag-detail,
.labcp-val-focus,
.labcp-model-detail,
.labcp-future-detail{
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  padding: 1rem;
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: var(--soft-shadow);
}
.labpp-panel-label,
.labcp-panel-label{
  margin: 0 0 0.45rem;
  color: color-mix(in srgb, var(--muted) 60%, var(--text));
  font-family: var(--grotesk);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}
.labpp-proof-tabs,
.labcp-search-switch,
.labcp-future-controls{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0 0 0.9rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 78%, transparent);
  padding: 0.25rem;
}
.labpp-proof-tab,
.labcp-search-mode,
.labcp-future-mode{
  appearance: none;
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  min-height: 38px;
  padding: 0.42rem 0.82rem;
}
.labpp-proof-tab.is-active,
.labcp-search-mode.is-active,
.labcp-future-mode.is-active{
  background: var(--text);
  color: var(--surface);
}
[data-theme="dark"] .labpp-proof-tab.is-active,
[data-theme="dark"] .labcp-search-mode.is-active,
[data-theme="dark"] .labcp-future-mode.is-active{
  background: var(--text);
  color: var(--bg);
}
.labpp-proof-tab:focus-visible,
.labpp-source-toggle:focus-visible,
.labcp-frag-card:focus-visible,
.labcp-search-mode:focus-visible,
.labcp-val-toggle:focus-visible,
.labcp-node:focus-visible,
.labcp-future-mode:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.labpp-proof-panel h3,
.labpp-source-focus h3,
.labcp-frag-detail h4,
.labcp-val-focus h4,
.labcp-model-detail h4,
.labcp-future-detail h4{
  margin: 0;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.25;
}
.labpp-proof-panel p,
.labpp-source-focus p,
.labcp-model-detail p,
.labcp-future-detail p{
  margin: 0.55rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}
.labpp-proof-panel ul{
  margin: 0.85rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}
.labpp-proof-panel li{
  border-left: 3px solid var(--labpp-primary, var(--accent));
  border-radius: 0 10px 10px 0;
  background: color-mix(in srgb, var(--labpp-primary, var(--accent)) 10%, var(--surface));
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.42;
  padding: 0.5rem 0.65rem;
}
.labpp-asset--sources{
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 0.75fr);
  gap: 1rem;
  align-items: stretch;
}
.labpp-source-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.8rem;
}
.labpp-source-toggle{
  appearance: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}
.labpp-source-card.is-active{
  border-color: var(--labpp-primary, var(--accent));
  background: color-mix(in srgb, var(--labpp-primary, var(--accent)) 12%, var(--surface));
  transform: translateY(-2px);
}
.labpp-source-focus{
  align-content: start;
  display: grid;
}
.labcp-frag-ring > li,
.labcp-model-ring > li{
  list-style: none;
  min-width: 0;
}
.labcp-frag-card,
.labcp-node{
  appearance: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font: inherit;
}
.labcp-frag-card.is-active,
.labcp-node.is-active{
  border-style: solid;
  border-color: var(--labcp-primary, var(--labcp-brand));
  background: color-mix(in srgb, var(--labcp-primary, var(--labcp-brand)) 14%, var(--surface));
  transform: translateY(-2px);
}
.labcp-frag-detail{
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
}
.labcp-frag-detail p,
.labcp-val-focus p{
  margin: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-2) 72%, transparent);
  padding: 0.75rem 0.85rem;
}
.labcp-frag-detail span,
.labcp-val-focus span{
  display: block;
  margin-bottom: 0.25rem;
  color: var(--labcp-primary, var(--labcp-brand));
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}
.labcp-frag-detail b,
.labcp-val-focus b{
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.5;
}
.labcp-asset--search .labcp-search-col{
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.labcp-asset--search.is-before .labcp-search-col--after,
.labcp-asset--search.is-after .labcp-search-col--before{
  opacity: 0.48;
  transform: scale(0.985);
}
.labcp-asset--search.is-before .labcp-search-col--before,
.labcp-asset--search.is-after .labcp-search-col--after{
  border-color: var(--labcp-primary, var(--labcp-brand));
  box-shadow: var(--labcp-shadow-lg);
}
.labcp-val-card{
  padding: 0;
  overflow: hidden;
}
.labcp-val-toggle{
  appearance: none;
  cursor: pointer;
  display: grid;
  gap: 0.6rem;
  width: 100%;
  min-height: 100%;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  padding: 1.1rem 1.2rem;
  text-align: left;
}
.labcp-val-card.is-active{
  border-color: var(--labcp-primary, var(--labcp-brand));
  background: color-mix(in srgb, var(--labcp-primary, var(--labcp-brand)) 10%, var(--surface));
}
.labcp-val-cue{
  color: var(--labcp-primary, var(--labcp-brand));
  font-size: 0.78rem;
  font-weight: 800;
}
.labcp-val-cue::after{
  content: " +";
}
.labcp-val-toggle[aria-pressed="true"] .labcp-val-cue::after{
  content: " ✓";
}
.labcp-val-focus{
  margin-top: 1rem;
  display: grid;
  gap: 0.75rem;
}
.labcp-model-detail{
  margin-top: 1rem;
  border-color: color-mix(in srgb, var(--labcp-primary, var(--labcp-brand)) 24%, var(--line));
}
.labcp-future-controls{
  margin-bottom: 1rem;
}
.labcp-future{
  transition: opacity 0.2s ease;
}
.labcp-future.is-base .labcp-future-tier--top,
.labcp-future.is-future .labcp-future-tier--base{
  opacity: 0.52;
}
.labcp-future.is-base .labcp-future-tier--base,
.labcp-future.is-future .labcp-future-tier--top{
  border-color: var(--labcp-primary, var(--labcp-brand));
  box-shadow: var(--labcp-shadow-lg);
}
.labcp-future-detail{
  margin-top: 1rem;
}
@container (max-width: 48rem){
.labpp-asset--sources{
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   PRIVATE LAB — index + gate chrome (hand-written, site tokens)
   ============================================================ */
.lab-gate{min-height:72vh;display:grid;place-items:center;padding:clamp(40px,8vh,96px) 24px}
.lab-gate-card{width:min(440px,100%);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:clamp(26px,4vw,40px);box-shadow:0 24px 60px var(--soft-shadow,rgba(53,45,44,.16));display:grid;gap:12px;text-align:center}
.lab-gate-kicker{font-family:var(--grotesk,"Space Grotesk",sans-serif);text-transform:uppercase;letter-spacing:.2em;font-size:12px;font-weight:600;color:var(--denim)}
.lab-gate-title{font-size:clamp(1.5rem,3vw,2rem);line-height:1.1;letter-spacing:-.02em;color:var(--text)}
.lab-gate-note{font-size:.95rem;line-height:1.5;color:var(--muted);margin-bottom:6px}
.lab-gate-field{display:grid;gap:6px;text-align:left}
.lab-gate-label{font-family:var(--grotesk,"Space Grotesk",sans-serif);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.lab-gate-input{width:100%;font:inherit;font-size:1rem;padding:12px 14px;border-radius:12px;border:1px solid var(--line-strong);background:var(--bg);color:var(--text)}
.lab-gate-input:focus-visible{outline:3px solid color-mix(in srgb,var(--denim) 55%,transparent);outline-offset:2px;border-color:var(--denim)}
.lab-gate-error{font-size:.85rem;color:var(--bad,#b3303f);font-weight:600;margin:0}
[data-theme="dark"] .lab-gate-error{color:#e8808d}
.lab-gate-btn{font-family:var(--grotesk,"Space Grotesk",sans-serif);font-weight:600;font-size:1rem;padding:12px 18px;border-radius:999px;border:1px solid var(--denim);background:var(--denim);color:#fff;cursor:pointer;transition:transform .15s,box-shadow .2s}
[data-theme="dark"] .lab-gate-btn{color:#0e1525}
.lab-gate-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px var(--soft-shadow,rgba(53,45,44,.18))}
.lab-gate-back{font-family:var(--grotesk,"Space Grotesk",sans-serif);font-size:.85rem;color:var(--muted);text-decoration:none;margin-top:2px}
.lab-gate-back:hover{color:var(--text)}

.lab-index{width:min(880px,calc(100% - 40px));margin-inline:auto;padding:clamp(48px,9vh,110px) 0 clamp(60px,10vh,120px)}
.lab-index-head{margin-bottom:clamp(24px,4vw,40px)}
.lab-index-kicker{font-family:var(--grotesk,"Space Grotesk",sans-serif);text-transform:uppercase;letter-spacing:.2em;font-size:12px;font-weight:600;color:var(--denim);margin-bottom:12px}
.lab-index-title{font-size:clamp(2rem,5vw,3.2rem);line-height:1.04;letter-spacing:-.025em;color:var(--text)}
.lab-index-note{margin-top:14px;font-size:1.02rem;line-height:1.55;color:var(--muted);max-width:60ch}
.lab-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.lab-item-link{display:flex;align-items:center;gap:clamp(14px,2.5vw,26px);padding:clamp(18px,2.6vw,26px);border-radius:16px;border:1px solid var(--line);background:var(--surface);color:var(--text);text-decoration:none;box-shadow:0 8px 24px var(--soft-shadow,rgba(53,45,44,.08));transition:transform .16s,box-shadow .2s,border-color .2s}
.lab-item-link:hover{transform:translateY(-3px);border-color:var(--denim);box-shadow:0 16px 36px var(--soft-shadow,rgba(53,45,44,.16))}
.lab-item-index{font-family:var(--grotesk,"Space Grotesk",sans-serif);font-weight:700;font-size:1rem;color:var(--denim);flex:0 0 auto}
.lab-item-body{display:grid;gap:4px;flex:1 1 auto;min-width:0}
.lab-item-title{font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:700;letter-spacing:-.01em;line-height:1.15}
.lab-item-sub{font-family:var(--grotesk,"Space Grotesk",sans-serif);font-size:.82rem;color:var(--muted);letter-spacing:.02em}
.lab-item-go{font-size:1.3rem;color:var(--muted);flex:0 0 auto;transition:transform .2s,color .2s}
.lab-item-link:hover .lab-item-go{color:var(--denim);transform:translateX(4px)}
.lab-index-foot{margin-top:clamp(26px,4vw,44px)}
.lab-lock-btn{font-family:var(--grotesk,"Space Grotesk",sans-serif);font-weight:600;font-size:.9rem;padding:10px 18px;border-radius:999px;border:1px solid var(--line-strong);background:transparent;color:var(--text);cursor:pointer;transition:border-color .2s,color .2s}
.lab-lock-btn:hover{border-color:var(--denim);color:var(--denim)}
@media (max-width:560px){ .lab-item-link{gap:12px;padding:16px} }


/* ============================================================
   PEPITA LAB — Web ⇄ Slides (presentation) view  (2026-06-26)
   Desktop-first by design (private lab, presented on desktop).
   Each top-level <section> of .labpp-page becomes a full-screen
   slide; tall sections auto-split (copy slide + asset slide) so a
   slide never scrolls. Slides are CSS show/hide only — section DOM
   stays inside .labpp-page so bindPepitaLab() delegation keeps
   every interactive asset working.
   ============================================================ */

/* ============================================================
   LAB DECK — generic Web / Slides (presentation) engine, shared by all
   four lab case studies (the .lab-case page root). Desktop-first.
   Each top-level <section> = a full-screen slide (trimmed copy + its
   live interactive asset); the hero splits into a title slide + an
   asset slide. Per-section data-deck-layout="cols|full" = two-column vs
   full-width. Show/hide only — sections never leave the page root so
   each delegated binder (and every interactive asset) keeps working.
   ============================================================ */
/* per-page accent for the shared chrome (falls back to denim) */
.labpp-page{ --lab-accent: var(--labpp-primary, var(--denim)); --lab-accent-on: var(--labpp-on-primary, #fff); }
.labgd-page{ --lab-accent: var(--labgd-primary, var(--denim)); --lab-accent-on: var(--labgd-on-primary, #fff); }
.labas-page{ --lab-accent: var(--labas-primary, var(--denim)); --lab-accent-on: var(--labas-on-primary, #fff); }
.labcp-page{ --lab-accent: var(--labcp-primary, var(--denim)); --lab-accent-on: var(--labcp-on-primary, #fff); }

.lab-deckbar{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); z-index:140; display:inline-flex; gap:4px; padding:5px; border-radius:999px; background:color-mix(in srgb, var(--surface) 84%, transparent); -webkit-backdrop-filter:blur(14px) saturate(1.1); backdrop-filter:blur(14px) saturate(1.1); border:1px solid var(--line); box-shadow:0 16px 40px var(--soft-shadow); }
.lab-viewbtn{ font-family:var(--grotesk,"Space Grotesk",sans-serif); font-weight:600; font-size:13px; color:var(--muted); background:none; border:0; cursor:pointer; padding:8px 16px; border-radius:999px; transition:background .2s, color .2s; }
.lab-viewbtn:hover{ color:var(--text); }
.lab-viewbtn.is-active{ background:var(--lab-accent); color:var(--lab-accent-on); }
.lab-case.is-deck .lab-deckbar{ display:none; }

.lab-deckchrome{ display:none; }
.lab-case.is-deck .lab-deckchrome{ display:block; position:fixed; inset:0; z-index:1005; pointer-events:none; }
.lab-deck-exit{ pointer-events:auto; position:absolute; top:20px; right:24px; font-family:var(--grotesk,"Space Grotesk",sans-serif); font-weight:600; font-size:12.5px; color:var(--muted); background:color-mix(in srgb, var(--surface) 80%, transparent); border:1px solid var(--line); border-radius:999px; padding:8px 15px; cursor:pointer; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:color .2s, border-color .2s; }
.lab-deck-exit:hover{ color:var(--text); border-color:var(--lab-accent); }
.lab-deck-arrow{ pointer-events:auto; position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; display:grid; place-items:center; cursor:pointer; color:var(--text); background:color-mix(in srgb, var(--surface) 82%, transparent); border:1px solid var(--line); box-shadow:0 12px 30px var(--soft-shadow); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); transition:transform .16s, border-color .2s, background .2s; }
.lab-deck-arrow svg{ width:22px; height:22px; }
.lab-deck-arrow:hover{ border-color:var(--lab-accent); transform:translateY(-50%) scale(1.07); }
.lab-deck-arrow:active{ transform:translateY(-50%) scale(.96); }
.lab-deck-arrow--prev{ left:14px; }
.lab-deck-arrow--next{ right:14px; }
.lab-deck-footer{ pointer-events:auto; position:absolute; right:24px; bottom:20px; display:inline-flex; flex-direction:row; align-items:center; gap:12px; padding:7px 14px; border-radius:999px; background:color-mix(in srgb, var(--surface) 80%, transparent); border:1px solid var(--line); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.lab-deck-counter{ font-family:var(--grotesk,"Space Grotesk",sans-serif); font-size:13px; font-weight:600; color:var(--muted); letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.lab-deck-counter b{ color:var(--lab-accent); font-weight:800; }
.lab-deck-dots{ display:flex; gap:9px; align-items:center; }
.lab-deck-dot{ width:9px; height:9px; padding:0; border:0; border-radius:50%; cursor:pointer; background:color-mix(in srgb, var(--muted) 42%, transparent); transition:transform .18s, background .18s; }
.lab-deck-dot:hover{ background:color-mix(in srgb, var(--lab-accent) 60%, transparent); }
.lab-deck-dot.is-active{ background:var(--lab-accent); transform:scale(1.35); }

/* stage */
body.lab-deck-open{ overflow:hidden; }
body.lab-deck-open .to-top{ display:none !important; }
body.lab-deck-open .site-header{ display:none !important; }
.lab-case.is-deck{ position:fixed; inset:0; z-index:1000; margin:0; overflow:hidden; }
.lab-case.is-deck > section{ position:absolute; inset:0; overflow:hidden; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease; }
.lab-case.is-deck > section.is-current{ opacity:1; visibility:visible; pointer-events:auto; }
/* container is absolutely centered (translate) + scaled-to-fit by labFitSlide() —
   bulletproof centering for content of any height, no flex-shrink surprises */
.lab-case.is-deck > section > .container{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(1180px, 90vw); transition:transform .18s ease; }
.lab-case.is-deck [class*="-hero-stickers"]{ display:none; }

/* reduced copy = caption, not a duplicate of the asset */
.lab-case.is-deck [class$="-section-title"]{ font-size:clamp(1.4rem, 2.6vw, 1.95rem); margin-bottom:.5rem; }
.lab-case.is-deck [class$="-section-body"]{ font-size:.93rem; }
.lab-case.is-deck [class$="-section-body"] p{ margin-bottom:.42rem; line-height:1.46; }
.lab-case.is-deck [class$="-section-body"] > p:not(:first-child):not([class*="emphasis"]){ display:none; }
.lab-case.is-deck [class$="-snapshot-challenge"]{ font-size:.95rem; }
.lab-case.is-deck > section > .container > :not(.lab-deck-copy):not(.cl-view-link){ margin-top:1rem; }
.lab-case.is-deck .cl-view-link{ display:none; }

/* hero = clean title slide + asset slide */
.lab-case.is-deck > section[class*="-hero"].deck-hero-title > .container > :not(.lab-deck-copy){ display:none; }
.lab-case.is-deck > section[class*="-hero"].deck-hero-asset > .container > .lab-deck-copy{ display:none; }
.lab-case.is-deck > section[class*="-hero"].deck-hero-title [class$="-hero-title"]{ font-size:clamp(2.3rem, 5cqi, 3.6rem); margin:.5rem 0 .85rem; }
.lab-case.is-deck > section[class*="-hero"].deck-hero-title [class$="-hero-lead"]{ font-size:1.05rem; line-height:1.55; max-width:62ch; }

/* two-column slide (data-deck-layout="cols") — compact copy left, asset right */
.lab-case.is-deck > section[data-deck-layout="cols"].is-current > .container{ display:grid; grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr); gap:clamp(30px,4vw,68px); align-items:center; width:min(1340px,92vw); }
.lab-case.is-deck > section[data-deck-layout="cols"] .lab-deck-copy{ align-self:center; }
.lab-case.is-deck > section[data-deck-layout="cols"] > .container > :not(.lab-deck-copy):not(.cl-view-link){ margin:0; width:100%; }
.lab-case.is-deck > section[data-deck-layout="cols"] [class$="-section-title"]{ font-size:clamp(1.5rem,2.3vw,2.1rem); }

/* keep any hero arc (pepita) phases on one row in the deck */
.lab-case.is-deck [class$="-arc-track"]{ flex-wrap:nowrap; gap:.6rem; }
.lab-case.is-deck [class$="-arc-phase"]{ flex:1 1 0; min-width:0; }

/* Private Lab is a me-only space — no public nav/footer in either view */
.site-shell--lab .site-header,
.site-shell--lab .site-footer{ display:none; }
.site-shell--lab > main{ padding-top:0; }

/* ============================================================
   LAB DECK v2 — ASSET-PER-SLIDE (rebuilt 2026-06-26)
   One visual per slide: short caption (left) + the asset filling
   the slide (right), or a centered title/text slide. Original
   sections are hidden; their <figure> assets are MOVED into
   .lab-deck-track slides (still inside the page root, so each
   delegated binder keeps working). Desktop-first.
   ============================================================ */
.lab-case.is-deck > section{ display:none !important; }
.lab-deck-track{ position:absolute; inset:0; }
.lab-slide{ position:absolute; inset:0; padding:clamp(30px,4.2vh,64px) clamp(66px,6vw,112px);
  display:grid; grid-template-columns:minmax(280px,30%) minmax(0,1fr); gap:clamp(28px,3.6vw,72px); align-items:stretch;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .3s ease; }
.lab-slide.is-current{ opacity:1; visibility:visible; pointer-events:auto; }
.lab-slide-cap{ align-self:center; max-width:46ch; }
.lab-slide-eyebrow{ font-family:var(--grotesk,"Space Grotesk",sans-serif); text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:700; color:var(--lab-accent); margin-bottom:14px; }
.lab-slide-title{ font-family:var(--font,Inter,sans-serif); font-weight:800; font-size:clamp(1.5rem,2.4vw,2.5rem); line-height:1.08; letter-spacing:-.02em; color:var(--text); margin:0 0 .5em; }
.lab-slide-note{ font-size:1.02rem; line-height:1.55; color:var(--muted); margin:0; }
/* stage stretches to full slide height; its single child (asset/container) is absolutely
   centred and scaled-to-fit by labFitSlide() so it always sits inside the visible area */
.lab-slide-stage{ position:relative; min-width:0; overflow:hidden; }
.lab-slide-stage > *{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; max-width:none !important; margin:0 !important; }
/* title slide — centered hero card */
.lab-slide--title{ grid-template-columns:1fr; place-items:center; text-align:center; }
.lab-slide--title .lab-slide-cap{ max-width:26ch; }
.lab-slide--title .lab-slide-title{ font-size:clamp(2.4rem,5vw,4.2rem); }
.lab-slide--title .lab-slide-note{ font-size:1.15rem; max-width:52ch; margin-inline:auto; }
/* text-only slide (e.g. snapshot) — single centered column */
.lab-slide--text{ grid-template-columns:1fr; justify-items:center; }
.lab-slide--text .lab-slide-cap{ display:none; }
.lab-slide--text .lab-slide-stage{ width:min(1100px,100%); }

/* ============================================================
   2026-06-26 (Claude) — SELECTED WORK cards: whole block clickable
   + a clear hover frame. Before, only the small "VIEW" link was a
   target. The media is already its own link; here we stretch the
   VIEW link over the whole text column (CSS "stretched link", so it
   stays semantic + keyboard-friendly, no nested <a>), and lift/frame
   the entire card on hover or keyboard focus so it reads as clickable.
   ============================================================ */
.cl-project { position: relative; cursor: pointer; transition: transform 0.28s ease, box-shadow 0.28s ease, background 0.28s ease; }
.cl-project-content { position: relative; }
/* view-link stays static so its ::after stretches over .cl-project-content (the positioned
   ancestor), not just the small link — making the whole text column the click target.
   ⚠️ SCOPED to the homepage card only: a bare `.cl-view-link::after` also hit the
   case-study "← Back to work" links, whose nearest positioned ancestor is <body>, so the
   overlay blanketed the WHOLE case-study page and stole every click (e.g. the A/B/C length
   toggle), routing them to href="#/" (home). Scoping to .cl-project-content fixes that. */
.cl-project-content .cl-view-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cl-project:hover,
.cl-project:focus-within {
  background: color-mix(in srgb, var(--surface) 48%, transparent);
  box-shadow: 0 22px 56px var(--soft-shadow);
  transform: translateY(-3px);
}
/* the arrow badge on the media nudges to reinforce the click affordance */
.cl-project:hover .cl-arrow { transform: translate(2px, -2px) scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .cl-project { transition: none; }
  .cl-project:hover, .cl-project:focus-within { transform: none; }
}

/* ============================================================
   GD DARK-MODE READABILITY FIX (2026-07-08, QA sweep)
   Several Generate Draft asset surfaces use fixed LIGHT fills
   (FigJam sticky notes; the light Activix app mock) whose text
   tokens flip light in dark mode and wash out (measured 1.0-2.4).
   Fix the exact failing set; keep the playful rainbow look.
   Mirrored to the .labgd-* clone below. AA verified both themes.
   ============================================================ */

/* --- Rabbit-hole (Asset 04): render as light "paper" stickies in
   BOTH themes (a pile of bright notes on the dark canvas), dark ink.
   Cards 1 & 3n were dark-surface/brand-soft in dark -> unify light. --- */
[data-theme="dark"] .gd-rabbit-toggle {
  background: #fbf3ea; color: #241f31; border-color: rgba(36, 31, 49, 0.30);
}
[data-theme="dark"] .gd-rabbit-step:nth-child(2n) .gd-rabbit-toggle { background: #fff3cf; }
[data-theme="dark"] .gd-rabbit-step:nth-child(3n) .gd-rabbit-toggle { background: #ece9ff; }
[data-theme="dark"] .gd-rabbit-step:nth-child(n + 5) .gd-rabbit-toggle { background: #fdeceb; }
[data-theme="dark"] .gd-rabbit-toggle .gd-rabbit-copy strong { color: #241f31; }
[data-theme="dark"] .gd-rabbit-toggle .gd-rabbit-copy small { color: #5a5470; }

/* --- Semantic solid boxes: white text needs a saturated fill that
   passes in BOTH themes (these were the light soft-girl red/green;
   they failed light too). Canonical semantic red/green. --- */
.gd-rabbit-num { background: #b3303f; }               /* white 6.16 */
.gd-rabbit-warning { background: #b3303f; color: #fff; }
.gd-rabbit-reflection { color: #241f31; }             /* yellow paper, dark ink both themes */
.gd-synthesis { background: var(--gd-brand-soft); color: var(--gd-ink); }  /* soft violet closing card, ink text, AA both themes */

/* --- Final-experience composer (Asset 08) is a LIGHT app mock: keep
   it fully light-mode inside even in dark theme by re-scoping its
   tokens on the mock root. Annotations (outside) stay dark-mode. --- */
[data-theme="dark"] .gd-mockup {
  --gd-ink: #241f31; --gd-muted: #5a5470; --gd-surface: #ffffff;
  --gd-brand: #5b4bd6; --gd-brand-soft: #efeafe; --gd-line: rgba(40, 30, 60, 0.22);
}
[data-theme="dark"] .gd-mockup .gd-message-area,
[data-theme="dark"] .gd-mockup .gd-field div,
[data-theme="dark"] .gd-mockup .gd-body-generated,
[data-theme="dark"] .gd-mockup .gd-body-refined { color: #241f31; }
[data-theme="dark"] .gd-mockup .gd-ui-generate,
[data-theme="dark"] .gd-mockup .gd-ui-update { background: #5b4bd6 !important; color: #fff !important; }

/* --- Trust callout chips (Asset 09): a Codex pass forces espresso text
   (styles.css ~4873, assuming a yellow fill) but the glass layer made the
   chip bg dark in dark mode -> dark-on-dark. Beat it with light ink. --- */
[data-theme="dark"] .gd-trust-callouts span { color: #efeaff !important; }

/* ---- LAB MIRROR (.labgd-* clone) ---- */
[data-theme="dark"] .labgd-rabbit-toggle {
  background: #fbf3ea; color: #241f31; border-color: rgba(36, 31, 49, 0.30);
}
[data-theme="dark"] .labgd-rabbit-step:nth-child(2n) .labgd-rabbit-toggle { background: #fff3cf; }
[data-theme="dark"] .labgd-rabbit-step:nth-child(3n) .labgd-rabbit-toggle { background: #ece9ff; }
[data-theme="dark"] .labgd-rabbit-step:nth-child(n + 5) .labgd-rabbit-toggle { background: #fdeceb; }
[data-theme="dark"] .labgd-rabbit-toggle .labgd-rabbit-copy strong { color: #241f31; }
[data-theme="dark"] .labgd-rabbit-toggle .labgd-rabbit-copy small { color: #5a5470; }
.labgd-rabbit-num { background: #b3303f; }
.labgd-rabbit-warning { background: #b3303f; color: #fff; }
.labgd-rabbit-reflection { color: #241f31; }
.labgd-synthesis { background: #0f7a4e; color: #fff; }
[data-theme="dark"] .labgd-mockup {
  --labgd-ink: #241f31; --labgd-muted: #5a5470; --labgd-surface: #ffffff;
  --labgd-brand: #5b4bd6; --labgd-brand-soft: #efeafe; --labgd-line: rgba(40, 30, 60, 0.22);
}
[data-theme="dark"] .labgd-mockup .labgd-message-area,
[data-theme="dark"] .labgd-mockup .labgd-field div,
[data-theme="dark"] .labgd-mockup .labgd-body-generated,
[data-theme="dark"] .labgd-mockup .labgd-body-refined { color: #241f31; }
[data-theme="dark"] .labgd-mockup .labgd-ui-generate,
[data-theme="dark"] .labgd-mockup .labgd-ui-update { background: #5b4bd6 !important; color: #fff !important; }
[data-theme="dark"] .labgd-trust-callouts span { color: #efeaff !important; }

/* ============================================================
   DECK POLISH (Fix 6, 2026-07-08 QA sweep)
   DECK-3: snapshot grids use auto-fit/minmax(15rem) → at the deck's wide slide
   width they resolve to 4 columns, and the 6-item AS/CP/PP snapshots leave 2
   trailing empty cells that show the border-colour background as gray blocks.
   Force 3 columns inside a deck slide (6 items = 2 full rows). Scoped to
   .lab-slide so the case-study web view is untouched. (GD reads fine; left alone.)
   ============================================================ */
.lab-slide :is(.labas-snapshot-grid, .labcp-snapshot-grid, .labpp-snapshot-grid,
               .as-snapshot-grid, .cp-snapshot-grid, .pp-snapshot-grid){
  grid-template-columns: repeat(3, 1fr);
}

/* ============================================================
   2026-07-09 (Claude) — MOBILE NAV MENU: editorial redesign.
   Desktop nav is untouched — the index number, arrow, menu
   footer and sparkle are display:none at >=761px, so the clean
   centered desktop nav renders exactly as before. On <=760px the
   open dropdown becomes a considered "index" menu: numbered
   items, a blossom highlighter on the active item (the site's
   signature), a staggered entrance, a soft gradient panel with a
   sparkle, and a warm contact footer. AA verified both themes.
   This block is last in the cascade, so it is authoritative.
   ============================================================ */
@media (min-width: 761px) {
  .nav-go,
  .nav-menu-kicker,
  .nav-menu-foot,
  .nav-menu-spark { display: none !important; }
}

@media (max-width: 760px) {
  .site-header .nav-links.is-open {
    gap: 0;
    padding: 20px 22px 24px;
    border-radius: 0 0 26px 26px;
    background:
      radial-gradient(130% 100% at 92% -12%, color-mix(in srgb, var(--blossom-soft) 62%, transparent), transparent 58%),
      linear-gradient(180deg,
        color-mix(in srgb, var(--blossom-soft) 26%, color-mix(in srgb, var(--bg) 90%, transparent)) 0%,
        color-mix(in srgb, var(--bg) 90%, transparent) 74%);
    -webkit-backdrop-filter: blur(22px) saturate(1.28);
    backdrop-filter: blur(22px) saturate(1.28);
    box-shadow: 0 26px 60px color-mix(in srgb, var(--brown) 18%, transparent);
    overflow: hidden;
    isolation: isolate;
  }
  /* faint dot canvas, matching the page texture */
  .site-header .nav-links.is-open::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(color-mix(in srgb, var(--brown) 13%, transparent) 1px, transparent 1.4px);
    background-size: 22px 22px;
    opacity: 0.55;
    pointer-events: none;
  }

  /* ---- each item: index · label · arrow, hairline divider ---- */
  .site-header .nav-links.is-open .nav-link {
    position: relative;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 17px 2px;
    border-bottom: 1px dashed color-mix(in srgb, var(--line-strong) 32%, transparent);
    opacity: 0;
    transform: translateY(11px);
    animation: navItemIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
  .site-header .nav-links.is-open .nav-link:nth-of-type(1) { animation-delay: 0.05s; }
  .site-header .nav-links.is-open .nav-link:nth-of-type(2) { animation-delay: 0.11s; }
  .site-header .nav-links.is-open .nav-link:nth-of-type(3) { animation-delay: 0.17s; border-bottom: 0; }

  .site-header .nav-links.is-open .nav-link::after { display: none; } /* drop the desktop underline */

  .nav-label {
    justify-self: start;
    width: fit-content;
    font-family: var(--grotesk);
    /* ~35% smaller than the previous clamp(1.55rem, 8vw, 2.05rem) */
    font-size: clamp(1rem, 5.2vw, 1.33rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.02;
    color: var(--text);
    transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .nav-go {
    justify-self: end;
    font-size: 1.15rem;
    line-height: 1;
    color: var(--muted);
    opacity: 0;
    transform: translateX(-6px);
    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease, color 0.24s ease;
  }

  /* SELECTED = a calm "you are here" marker (no pink swipe): the label
     turns denim with a denim underline bar, and the index goes bold denim.
     var(--denim) is AA on the panel in BOTH themes, so no fixed-ink hack
     needed. The chevron is deliberately NOT shown on the active item — the
     arrow means "go", so it's reserved for hover/press (below). */
  .site-header .nav-links.is-open .nav-link.is-active .nav-label {
    color: var(--denim);
    background: linear-gradient(var(--denim) 0 0) no-repeat left 100% / 100% 3px;
    padding-bottom: 4px;
  }
  /* tap feedback on ANY item (touch has no hover): preview the denim look */
  .site-header .nav-links.is-open .nav-link:active .nav-label { color: var(--denim); }

  /* chevron = "go there": appears on hover (desktop) and press (touch) of
     any item, never as a resting marker on the selected one. */
  .site-header .nav-links.is-open .nav-link:hover .nav-go,
  .site-header .nav-links.is-open .nav-link:active .nav-go {
    opacity: 1;
    transform: translateX(0);
    color: var(--denim);
  }

  /* ---- warm footer: a line + contact links ---- */
  .nav-menu-foot {
    margin-top: 18px;
    padding-top: 15px;
    border-top: 1px solid color-mix(in srgb, var(--line-strong) 24%, transparent);
    display: grid;
    gap: 11px;
    opacity: 0;
    transform: translateY(11px);
    animation: navItemIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.23s forwards;
  }
  .nav-menu-kicker {
    margin: 0 0 -4px;
    font-family: var(--grotesk);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--denim);
  }
  .nav-menu-say {
    margin: 0;
    font-family: var(--grotesk);
    font-size: 0.98rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.35;
    color: color-mix(in srgb, var(--text) 90%, var(--muted));
  }
  .nav-menu-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2px;
  }
  /* real buttons, not tags: defined border, soft fill, lift shadow, and a
     trailing arrow so they read as tappable actions. */
  .nav-menu-social a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 11px 16px;
    border-radius: 13px;
    border: 1.5px solid color-mix(in srgb, var(--denim) 42%, var(--line-strong));
    background: color-mix(in srgb, var(--surface) 90%, var(--blossom-soft));
    color: var(--denim);
    font-family: var(--grotesk);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--brown) 14%, transparent);
    transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  }
  .nav-menu-social a::after { display: none; }
  .nav-menu-social a:hover,
  .nav-menu-social a:active {
    transform: translateY(-1px);
    border-color: var(--denim);
    /* subtle denim tint that matches the border (cleaner than the old pink
       tint, which clashed with the denim edge in dark mode) */
    background: color-mix(in srgb, var(--denim) 12%, var(--surface));
    box-shadow: 0 8px 20px color-mix(in srgb, var(--brown) 20%, transparent);
  }

  /* ---- sparkle flourish, top-right ---- */
  .nav-menu-spark {
    position: absolute;
    top: 15px;
    right: 20px;
    width: 20px;
    height: 20px;
    color: var(--blossom);
    opacity: 0.85;
    pointer-events: none;
    animation: navSparkIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
  }
  .nav-menu-spark svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: color-mix(in srgb, var(--brown) 55%, transparent);
    stroke-width: 1;
  }
}

@keyframes navItemIn {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes navSparkIn {
  from { opacity: 0; transform: scale(0.4) rotate(-30deg); }
  to { opacity: 0.85; transform: scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header .nav-links.is-open .nav-link,
  .nav-menu-foot,
  .nav-menu-spark { animation: none; opacity: 1; transform: none; }
}

/* ============================================================
   CASE-STUDY LENGTH VARIANTS (A/B/C) toggle + editor's-cut beats
   (2026-07-09) — SHARED across Generate Draft, Customer Profile
   and Desking. The toggle/beat CSS uses neutral --cs-* tokens;
   each page root maps them onto its own primary so the toggle +
   beats pick up that study's colour (GD violet / CP teal / AS blue).
   ============================================================ */
.gd-page {
  --cs-accent: var(--gd-brand); --cs-accent-strong: var(--gd-brand-strong);
  --cs-accent-soft: var(--gd-brand-soft); --cs-ink: var(--gd-ink);
  --cs-muted: var(--gd-muted); --cs-surface: var(--gd-surface);
  --cs-border: var(--gd-border); --cs-on-accent: var(--gd-on-accent);
}
.cp-page {
  --cs-accent: var(--cp-brand); --cs-accent-strong: var(--cp-brand-strong);
  --cs-accent-soft: var(--cp-brand-soft); --cs-ink: var(--cp-ink);
  --cs-muted: var(--cp-muted); --cs-surface: var(--cp-surface);
  --cs-border: var(--cp-border); --cs-on-accent: #ffffff;
}
[data-theme="dark"] .cp-page { --cs-on-accent: #08191d; }
.as-page {
  --cs-accent: var(--as-brand); --cs-accent-strong: var(--as-brand-strong);
  --cs-accent-soft: var(--as-brand-soft); --cs-ink: var(--as-ink);
  --cs-muted: var(--as-muted); --cs-surface: var(--as-surface);
  --cs-border: var(--as-border); --cs-on-accent: #ffffff;
}
[data-theme="dark"] .as-page { --cs-on-accent: #0b1424; }
/* Pepita joined the --cs-* system on 2026-07-14 so it inherits the shared hero
   eyebrow. It has no A/B/C variants, so only the neutral tokens are needed. */
.pp-page {
  --cs-accent: var(--pp-primary); --cs-accent-strong: var(--pp-primary-strong);
  --cs-accent-soft: var(--pp-primary-soft); --cs-ink: var(--pp-ink);
  --cs-muted: var(--pp-muted); --cs-surface: var(--pp-surface);
  --cs-border: var(--pp-border); --cs-on-accent: var(--pp-on-primary);
}

.cs-variant{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  width:min(1080px, calc(100% - 40px)); margin:clamp(14px,2.4vw,26px) auto clamp(-6px,-0.4vw,-2px);
  padding:6px; border-radius:999px; width:fit-content;
  background:color-mix(in srgb, var(--cs-surface) 82%, transparent);
  border:1px solid var(--cs-border);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 8px 24px color-mix(in srgb, var(--cs-accent) 10%, transparent);
}
.cs-variant-label{
  font-family:var(--grotesk,"Space Grotesk",sans-serif); font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; color:var(--cs-muted); padding:0 8px 0 6px;
}
.cs-variant-btn{
  font-family:var(--grotesk,"Space Grotesk",sans-serif); font-weight:600; font-size:13px;
  color:var(--cs-muted); background:none; border:0; cursor:pointer; padding:7px 15px; border-radius:999px;
  transition:background .18s, color .18s;
}
.cs-variant-btn:hover{ color:var(--cs-ink); }
.cs-variant-btn.is-active{ background:var(--cs-accent); color:var(--cs-on-accent); }

.gd-hero--compact,
.cp-hero--compact,
.as-hero--compact{ padding-bottom:clamp(0.6rem,2vw,1.4rem); }
.gd-hero--compact .gd-hero-lead,
.cp-hero--compact .cp-hero-lead,
.as-hero--compact .as-hero-lead{ max-width:60ch; }

.gd-beat, .gd-skim{ padding:clamp(1.5rem,4vw,3rem) 0; }
.gd-beat + .gd-beat, .gd-skim + .gd-skim{ border-top:1px solid color-mix(in srgb, var(--cs-border) 60%, transparent); }
.gd-beat-kicker{
  display:inline-block; font-family:var(--grotesk,"Space Grotesk",sans-serif); font-weight:700;
  text-transform:uppercase; letter-spacing:.14em; font-size:12px; color:var(--cs-accent-strong);
  margin:0 0 .5rem;
}
.gd-beat-head{
  margin:0 0 .7rem; font-size:clamp(1.5rem,3.1vw,2.35rem); line-height:1.12; letter-spacing:-.01em;
  color:var(--cs-ink);
}
.gd-beat-lede{ max-width:66ch; color:var(--cs-ink); font-size:1.02rem; line-height:1.6; }
.gd-beat-lede p{ margin:0 0 .7rem; }
.gd-beat-lede .gd-emphasis{ font-weight:600; color:var(--cs-accent-strong); }
.gd-beat-metrics{
  margin-top:.8rem; font-family:var(--grotesk,"Space Grotesk",sans-serif); font-size:.95rem;
  font-weight:600; color:var(--cs-ink);
}
.gd-beat-metrics span{
  display:inline-block; margin-right:.5rem; padding:.15rem .55rem; border-radius:999px;
  background:var(--cs-accent-soft); color:var(--cs-accent-strong); font-size:.72rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em;
}
/* the case-study assets sit below the copy with breathing room */
.gd-beat .gd-asset, .gd-skim .gd-asset,
.gd-beat .as-asset, .gd-skim .as-asset,
.gd-beat .cp-asset, .gd-skim .cp-asset,
.gd-beat [class*="-asset"], .gd-skim [class*="-asset"]{ margin-top:clamp(1rem,2.4vw,1.6rem); }

/* "deeper story" — a self-contained, full-width disclosure (2026-07-14).
   Was: a small inline pill with the expanded content spilling out BELOW it,
   so an open beat read as loose prose with no boundary. Now the WRAP is the
   pill, the button is its label row (label left / icon right), and the content
   expands INSIDE the same pill under a divider. The button and the panel stay
   adjacent siblings, so the existing `+ .gd-beat-deeper` selector and the
   three bindXxx() aria-expanded handlers keep working untouched.
   The wrap is display:block, which the 0fr→1fr row accordion requires (an fr
   track collapses to 0 inside a flex-column parent). */
.gd-beat-more-wrap{
  margin-top:clamp(1rem,2.2vw,1.5rem);
  border:1px solid var(--cs-border); border-radius:16px;
  /* the soft accent at full strength read as a big noisy slab of colour, so
     thin it against the page canvas: the pill still reads as its own container,
     but quietly. The dot below carries the attention instead. */
  background:color-mix(in srgb, var(--cs-accent-soft) 42%, transparent);
  overflow:hidden;
  transition:border-color .18s, background .18s;
}
.gd-beat-more-wrap:hover{
  border-color:var(--cs-accent);
  background:color-mix(in srgb, var(--cs-accent-soft) 62%, transparent);
}
.gd-beat-more{
  display:flex; align-items:center; gap:.6rem;
  width:100%; margin:0; padding:13px 18px; text-align:left;
  font-family:var(--grotesk,"Space Grotesk",sans-serif); font-weight:600; font-size:13px;
  color:var(--cs-accent-strong); background:none; border:0; cursor:pointer;
}
/* a small bullet-style marker to draw the eye now that the fill is quiet */
.gd-beat-more-dot{
  flex:0 0 auto; width:9px; height:9px; border-radius:50%;
  background:var(--cs-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cs-accent) 22%, transparent);
  transition:box-shadow .18s;
}
.gd-beat-more-wrap:hover .gd-beat-more-dot{
  box-shadow:0 0 0 5px color-mix(in srgb, var(--cs-accent) 26%, transparent);
}
.gd-beat-more-label{ margin-right:auto; }
/* the divider: only present once the panel is actually open */
.gd-beat-more[aria-expanded="true"]{ border-bottom:1px solid var(--cs-border); }
.gd-beat-more-ico{ font-weight:800; font-size:15px; line-height:1; flex:0 0 auto; }
.gd-beat-deeper{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .3s ease; }
.gd-beat-deeper-inner{ overflow:hidden; }
.gd-beat-more[aria-expanded="true"] + .gd-beat-deeper{ grid-template-rows:1fr; }
/* padding lives on an inner body, never on the clipped element itself —
   padding on .gd-beat-deeper-inner would survive the 0fr row and leave a
   sliver of open space while collapsed. */
.gd-beat-deeper-body{ padding:16px 18px 18px; }
.gd-beat-deeper-body > *{ margin-top:0; }
.gd-beat-deeper-body > * + *{ margin-top:1.1rem; }
.gd-beat-deeper-body p{ max-width:66ch; color:var(--cs-ink); line-height:1.6; }

/* ============================================================
   2026-07-09 (Claude) — CONTACT section: "a little more fun".
   FigJam doodles (squiggle / sparkle / smiley) in the empty top
   space, a waving hand by "Let's connect", and a playful email
   hover (lift + tilt + blossom underline). Colours use site
   tokens so they read in light AND dark; doodles are decorative
   (aria-hidden) and hide on mobile to keep the stack clean.
   ============================================================ */
.carolyn-home .cl-contact { position: relative; }
/* single left-aligned block so the email flows right after "Send me a message" */
.carolyn-home .cl-contact-grid { display: block; }
.carolyn-home .cl-contact-copy { margin: 0; max-width: none; }
.cl-contact-arrow {
  color: var(--denim); font-weight: 700;
  display: inline-block; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.cl-contact-copy:hover .cl-contact-arrow { transform: translateX(4px); }
.cl-contact-doodles { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.cl-doodle { position: absolute; display: block; opacity: 0.92; }
.cl-doodle svg { width: 100%; height: 100%; display: block; }
.cl-doodle--squiggle { width: 84px; top: 24%; left: 6%; transform: rotate(-4deg); }
.cl-doodle--spark { width: 28px; top: 30%; right: 14%; transform: rotate(6deg); }
.cl-doodle--smiley {
  width: 50px; top: 20%; left: 44%; transform: rotate(-8deg);
  filter: drop-shadow(3px 3px 0 color-mix(in srgb, var(--text) 20%, transparent));
}
/* keep the real content above the doodles */
.carolyn-home .cl-contact .cl-contact-grid { position: relative; z-index: 1; }

/* waving hand — gentle wave when the section is hovered */
.cl-contact-wave { display: inline-block; transform-origin: 70% 80%; }
.carolyn-home .cl-contact:hover .cl-contact-wave { animation: contactWave 1.5s ease-in-out; }
@keyframes contactWave {
  0%, 100% { transform: rotate(0deg); }
  15% { transform: rotate(14deg); }
  30% { transform: rotate(-8deg); }
  45% { transform: rotate(12deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(8deg); }
}

/* playful email — lifts + tilts, underline blooms from ink to blossom */
.carolyn-home .cl-contact-grid a.cl-contact-email {
  display: inline-block; border-bottom: 0;
  transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}
.cl-contact-email-text {
  background-image: linear-gradient(var(--text), var(--text));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 1.5px;
  padding-bottom: 3px;
  transition: background-size 0.28s ease, background-image 0.28s ease;
}
.cl-contact-email:hover { transform: translateY(-3px) rotate(-1.4deg); }
.cl-contact-email:hover .cl-contact-email-text,
.cl-contact-email:focus-visible .cl-contact-email-text {
  background-image: linear-gradient(var(--blossom), var(--blossom));
  background-size: 100% 3px;
}
.cl-contact-email:focus-visible { outline: none; }

/* Mobile: keep the doodles (they were hidden before) but pin them into the
   clear band ABOVE the copy with fixed px offsets + slightly smaller sizes,
   so they stay playful without overlapping the "Let's connect / Send me a
   message" text on the shorter mobile section. */
@media (max-width: 760px) {
  .cl-doodle--squiggle { width: 60px; top: 12px; left: 5%; }
  .cl-doodle--smiley { width: 38px; top: 6px; left: auto; right: 27%; }
  .cl-doodle--spark { width: 22px; top: 18px; left: auto; right: 7%; }
}
@media (prefers-reduced-motion: reduce) {
  .carolyn-home .cl-contact:hover .cl-contact-wave { animation: none; }
}

/* ============================================================
   CP — fragmentation asset rebuilt as a STATIC hub-and-spoke
   (2026-07-14). Person in the centre, 4 lead types orbiting with
   dotted connectors + their own "what breaks" line; secondary
   records as smaller chips. No click interaction.
   ============================================================ */
.cp-asset--frag .cp-hub{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(18px, 4cqi, 46px);
  align-items:center;
}
.cp-hub-side{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(10px, 1.8cqi, 16px);
}
.cp-hub-lead{
  position:relative;
  display:grid; gap:.22rem;
  background:var(--cp-surface);
  border:1px dashed var(--cp-border);
  border-radius:12px;
  padding:.62rem .78rem;
  box-shadow:var(--cp-shadow);
}
.cp-hub-lead-top{ display:flex; align-items:center; gap:.5rem; }
.cp-hub-label{ font-weight:700; font-size:.88rem; color:var(--cp-ink); }
.cp-hub-breaks{ font-size:.76rem; line-height:1.4; color:var(--cp-muted); }
/* dotted connectors bridging each lead to the centre card */
.cp-hub-side--left .cp-hub-lead::after,
.cp-hub-side--right .cp-hub-lead::after{
  content:""; position:absolute; top:50%;
  width:clamp(18px, 4cqi, 46px);
  border-top:2px dotted color-mix(in srgb, var(--cp-warm) 55%, transparent);
}
.cp-hub-side--left .cp-hub-lead::after{ left:100%; }
.cp-hub-side--right .cp-hub-lead::after{ right:100%; }
.cp-hub-center{ margin:0; }
/* secondary records — smaller, quieter chips */
.cp-hub-secondary-label{
  margin:clamp(16px,2.6cqi,24px) 0 .5rem;
  font-family:var(--grotesk); font-size:.74rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em; color:var(--cp-muted);
}
.cp-hub-secondary{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.45rem;
}
.cp-hub-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  border:1px dashed var(--cp-border); border-radius:999px;
  padding:.32rem .72rem;
  font-size:.78rem; color:var(--cp-muted);
  background:color-mix(in srgb, var(--cp-surface) 70%, transparent);
}
.cp-hub-chip .cp-frag-ico svg{ width:14px; height:14px; }
/* narrow: one column, person first, connectors off */
@container (max-width: 42rem){
  .cp-asset--frag .cp-hub{ grid-template-columns:1fr; gap:14px; }
  .cp-hub-center{ order:-1; }
  .cp-hub-side--left .cp-hub-lead::after,
  .cp-hub-side--right .cp-hub-lead::after{ display:none; }
}

/* ============================================================
   CUSTOMER PROFILE — DATA-TRUST ASSET REWORK (2026-07-14)
   Toggle is Before/After only. "Pending Reply" is now an in-panel
   status badge (it is a status, not a tab label). Copy is full
   sentences. The old merge / assignment / history cards below the
   asset are folded into the After panel as "what changed".
   Dead after this change (unrendered, left inert): .cp-status-list*,
   .cp-status-controls, .cp-trust-grid, .cp-trust-card, .cp-trust-h.
   ============================================================ */
.cp-status-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.cp-status-tag {
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1.15;
  padding: 0.42rem 0.8rem;
  border-radius: 999px;
  border: 1px solid transparent;
}
.cp-status-tag--before {
  color: var(--cp-risk);
  background: var(--cp-risk-soft);
  border-color: color-mix(in srgb, var(--cp-risk) 38%, var(--cp-border));
}
.cp-status-tag--after {
  /* --cp-good (#0f7a4e) on --cp-good-soft reads only 4.03:1 here, which fails
     AA for a 13px label. Darkened ink for light mode; dark already reads 6.11. */
  color: #0b5f3d;
  background: var(--cp-good-soft);
  border-color: color-mix(in srgb, var(--cp-good) 38%, var(--cp-border));
}
[data-theme="dark"] .cp-status-tag--after {
  color: var(--cp-good);
}
.cp-status-lede {
  margin: 0 0 0.7rem;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1.45;
  color: var(--cp-ink);
}
.cp-status-notes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.cp-status-notes li {
  position: relative;
  margin: 0;
  padding-left: 0.95rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--cp-muted);
}
.cp-status-notes li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}
.cp-status-before .cp-status-notes li::before {
  background: color-mix(in srgb, var(--cp-risk) 70%, transparent);
}
.cp-status-after .cp-status-notes li::before {
  background: color-mix(in srgb, var(--cp-good) 70%, transparent);
}

/* ============================================================
   CASE-STUDY ALIGNMENT: ONE LEFT EDGE (2026-07-14)
   Every in-page asset is a <figure>, and the UA stylesheet gives
   <figure> `margin: 1em 40px`. The asset base rules only ever set
   margin-top, so that 40px inline margin was never reset: kicker /
   headline / copy sat at the container edge while the asset (and its
   eyebrow) sat 40px further right. That is the misalignment.
   Reset the inline margin so text and assets share one left edge, on
   every variant (A/B/C) and every study. margin-top is untouched.
   Lab clones (.labgd-/.labas-/.labcp-/.labpp-) are deliberately NOT
   included: the Lab is Priyanka's private snapshot space.
   ============================================================ */
.gd-asset,
.as-asset,
.cp-asset,
.pp-asset {
  margin-inline: 0;
}

/* ---- ...and the same left edge for the HERO ----------------
   The hero used a WIDER reading column than the body (1180 vs 1080),
   so the hero eyebrow/title/asset sat at x=50 while every beat below
   sat at x=100: a visible 50px step at the top of each case study.
   Pull the hero onto the body's column so the page has ONE left edge
   top to bottom. AutoSync already resolved to 1100 by accident (its
   `.as-page .container{max-width:1100px}` clamps the 1180 hero rule);
   stating it here makes that intentional rather than incidental.
   NB: only `width` is set, so `.pp-hero .container`'s container-type
   (inline-size) survives for Pepita's container queries.
   ------------------------------------------------------------ */
.gd-page .gd-hero .container,
.cp-page .cp-hero .container,
.pp-page .pp-hero .container {
  width: min(1080px, calc(100% - 40px));
}
.as-page .as-hero .container {
  width: min(1100px, calc(100% - 40px));
}

/* ---- inactive toggle labels must be readable, not just present -------
   `.cp-future-mode` / `.cp-search-mode` inactive used the site `--muted`,
   which lands at 4.12:1 on their control track in LIGHT (fails AA for a
   13px label). Dark already read 7.51. Mix --muted toward --text: in dark
   --text is the cream, so the mix only ever improves that side too. */
.cp-future-mode,
.cp-search-mode {
  color: color-mix(in srgb, var(--muted) 55%, var(--text));
}

/* ============================================================
   CUSTOMER PROFILE — DATA-MODEL ASSET: the customer CONTAINS
   everything (2026-07-14)
   Was: a dark "Customer" hub card sitting BESIDE a grid of pills,
   with a 3-line "Selected object" panel + an attribution paragraph
   + a takeaway underneath. The anchor didn't read as an anchor, and
   both paragraphs restated the beat copy verbatim.
   Now: `.cp-model` IS the customer card (full width). Its identity
   row sits on top, the two journeys come first, the attached context
   follows, and a SINGLE line under the pills swaps on select. Mirrors
   cpAssetFragmentation's hub (primary spokes + secondary chips).
   ============================================================ */
.cp-model {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;          /* overrides the old 2-col hub|ring split */
  align-items: stretch;
  border: 1px solid color-mix(in srgb, var(--cp-brand) 30%, var(--cp-border));
  border-radius: var(--cp-radius-lg);
  background: color-mix(in srgb, var(--cp-brand) 5%, var(--cp-surface));
  padding: clamp(0.85rem, 2vw, 1.15rem);
  box-shadow: var(--cp-shadow);
}
/* the anchor: a solid brand row the rest of the card hangs under */
.cp-model-id {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  border-radius: var(--cp-radius);
  padding: 0.7rem 0.9rem;
  background: linear-gradient(150deg, var(--cp-brand), var(--cp-brand-strong));
  color: #fff;
}
[data-theme="dark"] .cp-model-id { color: #0e1525; }
.cp-model-id-ico {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.20);
  display: grid; place-items: center; flex: 0 0 auto;
}
[data-theme="dark"] .cp-model-id-ico { background: rgba(14,21,37,0.20); }
.cp-model-id-ico svg { width: 18px; height: 18px; }
.cp-model-id-name { font-weight: 700; font-size: 1.05rem; }
.cp-model-id-sub { font-size: 0.78rem; opacity: 0.9; margin-left: auto; }
.cp-model-attached-label {
  margin: 0.1rem 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--cp-muted) 55%, var(--cp-ink));
}
/* every pill the same height, even the one-liners (her ask) */
.cp-model-ring .cp-node {
  min-height: 3.05rem;
  height: 100%;
}
.cp-model-ring--journeys { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.cp-model-ring--attached { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }
/* the selected object: ONE line, directly under the pills */
.cp-model-line {
  margin: 0.15rem 0 0;
  border-top: 1px solid color-mix(in srgb, var(--cp-brand) 22%, var(--cp-border));
  padding-top: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--cp-muted);
}
.cp-model-line b { color: var(--cp-ink); font-weight: 700; }
.cp-model-line b::after { content: ":"; }

/* ============================================================
   SHARED HERO EYEBROW — one treatment for all four case studies
   (2026-07-14, Priyanka: "I want this treatment for the text above
   the title in the customer profile one as well, common for all
   case studies")
   Generate Draft had evolved into a soft tinted pill across several
   stacked blocks; CP and Desking were still plain text and Pepita had
   its own 999px capsule. This is now ONE rule on the four hero
   eyebrows, driven by the neutral --cs-* tokens, so each study keeps
   its own primary (GD violet / CP teal / AS blue / Pepita pink).
   Scoped to the HERO eyebrow only: asset eyebrows and section kickers
   keep their existing, quieter styling.
   ============================================================ */
.gd-page .gd-eyebrow,
.cp-page .cp-eyebrow,
.as-page .as-eyebrow,
.pp-page .pp-eyebrow {
  display: inline-block;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  padding: 5px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--cs-accent) 15%, var(--cs-surface));
  color: var(--cs-accent-strong);
  border: 1.5px solid color-mix(in srgb, var(--cs-accent) 24%, var(--cs-surface));
  box-shadow: 0 6px 16px color-mix(in srgb, var(--cs-accent) 14%, transparent);
  transform: rotate(-1deg);
}
@media (prefers-reduced-motion: reduce) {
  .gd-page .gd-eyebrow,
  .cp-page .cp-eyebrow,
  .as-page .as-eyebrow,
  .pp-page .pp-eyebrow { transform: none; }
}

/* ============================================================
   CUSTOMER PROFILE — "HIGHLIGHTS v2" SCREENSHOT ASSETS (2026-07-15)
   Real Activix screens, used ONLY by renderCustomerProfileB("b2").
   KEY DECISION: the product is a LIGHT app, so `.cp-shot-frame` keeps a
   light surface in BOTH themes (precedent: .gd-mockup re-scopes its
   tokens, §QA Fix 4c). Consequently everything drawn ON the screenshot
   (pins, spotlight, tag) uses FIXED colours, not theme tokens: their
   backdrop never changes, so a theme-aware colour would break AA in one
   of the two themes. Everything OUTSIDE the frame stays theme-aware.
   Callouts are % positioned overlays, never baked into the pixels.
   ============================================================ */
.cp-shot { display: grid; gap: 1rem; }
.cp-shot-frame {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cp-brand) 22%, var(--cp-border));
  box-shadow: var(--cp-shadow-lg);
  background: #ffffff;            /* stays light in dark theme, on purpose */
  line-height: 0;                 /* kill the inline-image gap */
}
.cp-shot-img { display: block; width: 100%; height: auto; }

/* Numbered pin → expands on hover/tap to show its own annotation, so a callout
   can be read in place instead of matching numbers against the list below.
   Sits on the light screenshot → FIXED dark teal + white ink (6.06:1);
   --cp-brand would flip to pale teal in dark and fail here.
   Anchored by the NUMBER, not the pill: translate is a fixed -13px (half the
   26px dot) rather than -50%, otherwise the pill would re-centre as it grows
   and the number would drift off the thing it points at. */
.cp-shot-pin {
  position: absolute;
  left: var(--x); top: var(--y);
  transform: translate(-13px, -13px);
  z-index: 2;
  /* GRID, not flex: the open/close is a 0fr->1fr track animation on BOTH axes
     (the same idiom as the page's accordions). See the .cp-shot-pin-t note. */
  display: grid;
  grid-template-columns: auto 0fr;
  align-items: center;
  width: fit-content;            /* so 1fr resolves to the text's own width */
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #156c7c;
  color: #ffffff;
  font: inherit;
  cursor: pointer;
  text-align: left;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.92), 0 4px 10px rgba(12,32,38,0.28);
  transition: grid-template-columns 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.18s ease;
}
/* right-edge pins grow leftward instead of off the frame: swap the track order
   and re-order the children (auto-placement honours `order` in grid too). */
.cp-shot-pin--l {
  left: auto;
  right: calc(100% - var(--x));
  transform: translate(13px, -13px);
  grid-template-columns: 0fr auto;
}
.cp-shot-pin--l .cp-shot-pin-n { order: 2; }
.cp-shot-pin--l .cp-shot-pin-t { order: 1; }
.cp-shot-pin-n {
  flex: 0 0 auto;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  font-size: 0.76rem; font-weight: 800; line-height: 1;
}
/* ⚠️ WHY TWO SPANS AND ZERO white-space SWITCHING (2026-07-15 rework).
   The old version animated `max-width: 0 -> 20rem` and flipped
   `white-space: nowrap -> normal` on hover. That read as abrupt AND glitchy for
   three compounding reasons, all fixed here:
     1. `white-space` is NOT animatable, so it snapped at t=0 and the text
        re-wrapped one character per line inside a still-0-wide box: the pin
        flashed as a tall bar for a frame before the width caught up.
     2. `max-width` animated toward a FIXED 20rem, not the real text width, so
        the motion visibly stopped dead partway through the easing curve.
     3. The text re-wrapped on EVERY frame as the width grew, so words hopped
        between lines for the whole transition.
   Now: `-tx` holds the words at a stable intrinsic width (max-content, capped),
   so it wraps exactly ONCE at load and never re-flows. `-t` is a pure clipping
   track whose COLUMN (on the pin) and ROW (here) animate 0fr -> 1fr, which
   interpolates to the content's own size. Nothing snaps, nothing re-wraps. */
.cp-shot-pin-t {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  min-width: 0;
  opacity: 0;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1.35;
  transition: grid-template-rows 0.34s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.22s ease;
}
.cp-shot-pin-tx {
  overflow: hidden;              /* the 0fr row clips through this */
  min-height: 0;                 /* grid items floor at min-content without this */
  align-self: start;             /* keep natural height; let the track do the clipping */
  width: max-content;            /* stable: wraps once, never re-flows */
  max-width: min(18rem, 44vw);
  white-space: normal;           /* set ONCE, never toggled */
  padding: 0.4rem 0.7rem 0.4rem 0.1rem;
}
.cp-shot-pin--l .cp-shot-pin-tx { padding: 0.4rem 0.1rem 0.4rem 0.7rem; }
.cp-shot-pin:hover,
.cp-shot-pin:focus-visible,
.cp-shot-pin[aria-expanded="true"] { z-index: 3; box-shadow: 0 0 0 3px rgba(255,255,255,0.96), 0 8px 18px rgba(12,32,38,0.38); }
.cp-shot-pin:hover,
.cp-shot-pin:focus-visible,
.cp-shot-pin[aria-expanded="true"] { grid-template-columns: auto 1fr; }
.cp-shot-pin--l:hover,
.cp-shot-pin--l:focus-visible,
.cp-shot-pin--l[aria-expanded="true"] { grid-template-columns: 1fr auto; }
.cp-shot-pin:hover .cp-shot-pin-t,
.cp-shot-pin:focus-visible .cp-shot-pin-t,
.cp-shot-pin[aria-expanded="true"] .cp-shot-pin-t {
  grid-template-rows: 1fr;
  opacity: 1;
}
.cp-shot-pin:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .cp-shot-pin,
  .cp-shot-pin-t { transition: none; }
}

/* search shot: wide strip + a bracket/tag calling out the duplicate rows */
.cp-shot-frame--wide { background: #ffffff; }
/* boxes the five duplicate "Michael Chen" rows inside the dropdown.
   %s measured off the 3456x1082 source: the rows run y 225–555 and
   x 145–400, i.e. the names + dates, not the whole panel. */
.cp-shot-bracket {
  position: absolute;
  left: 6.6%; top: 34.5%;
  width: 14.5%; height: 54.5%;
  border: 2px solid #b3303f;
  border-radius: 10px;
  background: color-mix(in srgb, #b3303f 8%, transparent);
}
/* sits to the RIGHT of the dropdown (panel ends at ~32%) so it labels the
   bracket without covering the evidence it points at */
.cp-shot-tag {
  position: absolute;
  left: 34%; top: 61%;
  transform: translateY(-50%);
  background: #b3303f; color: #ffffff;
  font-size: 0.78rem; font-weight: 700; line-height: 1.2;
  padding: 5px 10px; border-radius: 8px;
  box-shadow: 0 4px 12px rgba(120,20,35,0.3);
}
.cp-shot-aside { display: grid; gap: 0.6rem; }
.cp-shot-caption {
  margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--cp-muted);
}
.cp-shot-caption b { color: var(--cp-ink); }
.cp-shot-qs {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
}
.cp-shot-qs li {
  font-size: 0.82rem; font-weight: 600;
  color: var(--cp-risk);
  background: var(--cp-risk-soft);
  border: 1px solid color-mix(in srgb, var(--cp-risk) 30%, var(--cp-border));
  border-radius: 999px; padding: 0.34rem 0.7rem;
}

/* workspace: the real screen under each tab's reasoning */
.cp-shot-frame--tab { margin-top: 0.9rem; }

/* data-trust proof: dim the screen, spotlight the two regions that carry the
   argument (the NEEDS ATTENTION badge + the bubbled-up panel).
   The dim is ONE ::after layer with two holes punched by mask-composite. A
   plain overlay + transparent "spot" boxes does NOT work: the overlay paints
   over the spots, so the highlighted regions stay dimmed. Gated behind
   @supports — without mask support you simply get the outlines and no dim,
   which still reads correctly. */
.cp-shot-proof { margin: 1rem 0 0; display: grid; gap: 0.55rem; }
.cp-shot-frame--proof {
  --b-x: 19%;   --b-y: 5.4%;  --b-w: 8.6%; --b-h: 2.6%;   /* NEEDS ATTENTION badge */
  --p-x: 36.8%; --p-y: 14.6%; --p-w: 62%;  --p-h: 12.4%;  /* Needs Attention panel */
}
.cp-shot-spot {
  position: absolute;
  z-index: 1;
  border-radius: 8px;
  outline: 2px solid #a86ae0;
  outline-offset: 0;
  pointer-events: none;
}
.cp-shot-spot--badge { left: var(--b-x); top: var(--b-y); width: var(--b-w); height: var(--b-h); }
.cp-shot-spot--panel { left: var(--p-x); top: var(--p-y); width: var(--p-w); height: var(--p-h); }
/* ⚠️ Do NOT rebuild this with mask-position percentages. Tried it first and it
   is a trap: `mask-position: 36.8%` does NOT mean "36.8% from the left" — it
   aligns 36.8% of the IMAGE with 36.8% of the CONTAINER, so the real offset
   becomes 36.8% × (100% − mask-size) = 14%, and the hole lands nowhere near the
   outline (which uses real `left`). clip-path percentages ARE true coordinates,
   so the holes and the outlines are driven by the same numbers.
   evenodd + one outer rect + two hole contours = dim everywhere except the two
   regions that carry the argument. Guarded: without clip-path support you'd get
   a flat dim over the whole shot, so skip it and keep just the outlines. */
@supports (clip-path: polygon(evenodd, 0% 0%, 100% 0%, 100% 100%)) {
  .cp-shot-frame--proof::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(10, 22, 28, 0.5);
    pointer-events: none;
    /* Each hole is entered from 0% 0% and returned to 0% 0%, so every connector
       line is traversed twice and has zero area. Leaving the path to auto-close
       from the last hole point back to the origin traverses that connector ONCE,
       and evenodd then fills one side of it: a diagonal wedge across the shot. */
    clip-path: polygon(evenodd,
      0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 0%,
      /* hole: the NEEDS ATTENTION badge */
      19% 5.4%, 27.6% 5.4%, 27.6% 8%, 19% 8%, 19% 5.4%,
      0% 0%,
      /* hole: the bubbled-up Needs Attention panel */
      36.8% 14.6%, 98.8% 14.6%, 98.8% 27%, 36.8% 27%, 36.8% 14.6%,
      0% 0%
    );
  }
}

/* ============================================================
   CLICK-TO-ZOOM LIGHTBOX (2026-07-15)
   Real product screenshots sit in the 1080px reading column, which puts the
   app's own UI at ~26% scale. Rather than break them out of the column (that
   would break the one-left-edge rule), let people open them at natural size.
   Fixed colours throughout: the overlay is its own dark surface in BOTH themes,
   so theme tokens would be wrong here.
   ============================================================ */
.shot-zoomable { cursor: zoom-in; }
.cp-shot-frame { position: relative; }
/* Affordance so it reads as zoomable, not decorative. Keyed on the GENERIC
   .shot-frame so every study gets it (CP, GD, and anything added later). */
.shot-frame::before {
  content: "⤢ Click to zoom";
  position: absolute;
  z-index: 2;
  right: 10px; top: 10px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(14, 26, 32, 0.82);
  color: #ffffff;
  font-size: 0.7rem; font-weight: 700; line-height: 1.3;
  opacity: 0;
  transition: opacity 0.16s ease;
  pointer-events: none;
}
.shot-frame:hover::before,
.shot-frame:focus-within::before { opacity: 1; }
/* Touch has no hover, and on a phone the in-column shot is at ~12% scale, so
   the hint matters MORE there, not less: pin it on for coarse pointers. */
@media (hover: none) {
  .shot-frame::before { content: "⤢ Tap to zoom"; opacity: 1; }
}

.shot-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(8, 14, 18, 0.92);
  display: grid;
  grid-template-rows: 1fr auto;
  padding: clamp(12px, 3vw, 34px);
  gap: 10px;
}
.shot-lightbox[hidden] { display: none; }
body.has-lightbox { overflow: hidden; }
.shot-lightbox-scroll {
  overflow: auto;           /* pan a big screenshot; pinch-zoom still works */
  display: grid;
  place-items: start center;
  border-radius: 10px;
}
.shot-lightbox-stage { display: block; }
/* The lightbox stages a CLONE of .shot-frame so the callouts come with it.
   It lives on <body>, OUTSIDE .cp-page/.gd-page, so the frame's per-study
   --cp-*/--gd-* tokens resolve to nothing here: restate the two tokened
   properties with fixed values. Every other overlay colour is already fixed
   (they sit on a light screenshot).
   Keyed on the GENERIC .shot-frame so every study inherits this, not just CP. */
.shot-lightbox .shot-frame {
  max-width: none;
  border-color: rgba(0, 0, 0, 0.16);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.shot-lightbox .shot-frame::before { content: none; }   /* no "click to zoom" inside the zoom */
.shot-lightbox .shot-frame img {
  display: block;
  width: 100%;
  height: auto;
  background: #ffffff;
  cursor: default;
}
.shot-lightbox-close {
  position: absolute;
  top: clamp(10px, 2vw, 20px);
  right: clamp(10px, 2vw, 20px);
  z-index: 2;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.36);
  background: rgba(20, 30, 36, 0.94);
  color: #ffffff;              /* 12.6:1 on that fill */
  font-size: 1rem; line-height: 1;
  cursor: pointer;
}
.shot-lightbox-close:hover { background: rgba(46, 60, 68, 0.96); }
.shot-lightbox-close:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.shot-lightbox-cap {
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.9);   /* 13.9:1 on the backdrop */
  font-size: 0.82rem;
}
/* JS sets the width to half-natural (the shots are @2x, so that is the designed
   size). On a phone even that is far wider than the screen, which is fine: the
   scroller pans and native pinch-zoom still works. */

/* ============================================================
   GENERATE DRAFT — "HIGHLIGHTS v2" SCREENSHOT ASSETS (2026-07-15)
   Real Activix composer screens, used ONLY by renderGenerateDraftB("b2").
   Same key decision as the CP shot block: the product is a LIGHT app, so
   `.gd-shot-frame` keeps a light surface in BOTH themes, and anything drawn
   ON a screenshot uses FIXED colours (its backdrop never changes, so a theme
   token would break AA in one theme). Everything outside the frame stays
   theme-aware. Overlays are % positioned, never baked into the pixels.
   ============================================================ */
.gd-shot-frame {
  position: relative;
  aspect-ratio: 2880 / 1652;     /* every email shot is this exact size */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(20, 24, 45, 0.16);
  background: #ffffff;           /* stays light in dark theme, on purpose */
  line-height: 0;
  box-shadow: 0 14px 34px rgba(24, 20, 48, 0.16);
}
/* The 5 states are STACKED and cross-faded rather than swapping one src:
   they are pixel-identical exports, so they register exactly, and stacking
   means no decode flash between states. Only the live one takes clicks. */
.gd-shot-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.gd-shot-frame[data-state="idle"]      .gd-shot-img[data-gd-shot="idle"],
.gd-shot-frame[data-state="thinking"]  .gd-shot-img[data-gd-shot="thinking"],
.gd-shot-frame[data-state="generated"] .gd-shot-img[data-gd-shot="generated"],
.gd-shot-frame[data-state="refining"]  .gd-shot-img[data-gd-shot="refining"],
.gd-shot-frame[data-state="refined"]   .gd-shot-img[data-gd-shot="refined"] {
  opacity: 1;
  pointer-events: auto;
}
.gd-shot-frame .shot-zoomable { cursor: zoom-in; }

/* ---- the thinking loader -------------------------------------------------
   The real product traces the DRAFT BOX with a blue→purple→red gradient line
   and rotates it. That line is baked into gd-composer-thinking@2x.png as a
   single static frame, so we cover it and redraw it live.
   The rect below is MEASURED from the export (the stroke sits at x 306→2635,
   y 1030→1403 of 2880×1652), expressed in % so it tracks the frame at any
   size, including the lightbox clone.
   ::before is a white eraser ring straddling the edge (the box's surround and
   inner padding are both white, so it is invisible); ::after draws the live
   ring. The angle is animated via @property, NOT transform: rotating the box
   would skew a rectangle. Where @property is unsupported the ring simply sits
   still, which reads the same as the baked frame. */
@property --gd-loader-a {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
.gd-shot-loader {
  position: absolute;
  left: 10.625%;
  top: 62.349%;
  width: 80.868%;
  height: 22.579%;
  border-radius: 5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.gd-shot-frame[data-state="thinking"] .gd-shot-loader { opacity: 1; }
.gd-shot-loader::before,
.gd-shot-loader::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.gd-shot-loader::before {            /* erase the baked line */
  inset: -2px;
  border: 5px solid #ffffff;
  border-radius: 7px;
}
.gd-shot-loader::after {             /* draw the live one */
  padding: 2.5px;
  background: conic-gradient(from var(--gd-loader-a),
    transparent 0 46%, #2563eb 60%, #7c3aed 76%, #ef4444 92%, transparent 99%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: gdLoaderSpin 1.6s linear infinite;
}
@keyframes gdLoaderSpin { to { --gd-loader-a: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .gd-shot-loader::after { animation: none; }
}

/* the state readout under the frame — outside the shot, so theme-aware */
.gd-shot-state {
  margin: 0.6rem 0 0;
  font-family: var(--grotesk);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--gd-muted) 55%, var(--gd-ink));
}
/* b2's mockup is a real screenshot, so the built window chrome/token re-scope
   from §QA Fix 4c does not apply: let it inherit the page. */
.gd-mockup--shot {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
}
/* §QA Fix 4c re-scopes .gd-mockup to LIGHT tokens in dark theme, because the
   BUILT mock is a light app drawn in HTML. b2's mock is a real screenshot in
   its own light frame, and its controls/labels sit on the PAGE canvas, so that
   re-scope would paint dark-on-dark. Opt back out to the page's dark tokens.
   The screenshot itself is unaffected: it is pixels in a .gd-shot-frame. */
[data-theme="dark"] .gd-mockup--shot {
  --gd-ink: var(--text);
  --gd-muted: var(--muted);
  --gd-surface: color-mix(in srgb, var(--surface) 64%, transparent);
  --gd-brand: var(--gd-primary, #a99cff);
  --gd-brand-soft: color-mix(in srgb, var(--cognac) 22%, var(--surface));
  --gd-line: var(--line-strong);
}

/* ---- Asset 04 (v2): abandoned explorations in phone frames --------------- */
/* a single horizontal filmstrip: the whole rabbit hole reads left→right in one
   short band, and scrolls inside its own clip on narrow screens (no page
   overflow, no awkward stacked column of full-height phones). */
.gd-rabbit-film {
  list-style: none; margin: 0; padding: 0 0 0.5rem;
  display: flex; gap: clamp(0.6rem, 1.6vw, 1rem);
  overflow-x: auto; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.gd-rabbit-cell {
  flex: 0 0 clamp(112px, 14vw, 148px);
  scroll-snap-align: start;
  display: grid; gap: 0.5rem; margin: 0;
}
.gd-rabbit-step { display: grid; gap: 0.55rem; }
.gd-phone-frame {
  position: relative;
  aspect-ratio: 856 / 1852;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(20, 24, 45, 0.18);
  background: #ffffff;
  line-height: 0;
  box-shadow: 0 10px 24px rgba(24, 20, 48, 0.14);
}
.gd-phone-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  cursor: zoom-in;
  /* greyed on purpose: this work did not ship and must not read as the product */
  filter: grayscale(1) contrast(0.92) opacity(0.82);
  transition: filter 0.2s ease;
}
.gd-phone-frame:hover .gd-phone-img,
.gd-phone-img:focus-visible { filter: grayscale(0.55) contrast(1) opacity(1); }
/* the zoom shows the real thing, not the greyed thumbnail */
.shot-lightbox .gd-phone-img { filter: none; object-fit: contain; }
.gd-rabbit-cap {
  margin: 0;
  font-family: var(--grotesk);
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--gd-muted);
}
.gd-rabbit-cap b {
  display: inline-grid;
  place-items: center;
  min-width: 1.15rem; height: 1.15rem;   /* pill, so "4a"/"4b" fit as well as "1" */
  padding: 0 0.32rem;
  margin-right: 0.35rem;
  border-radius: 999px;
  background: var(--gd-brand);
  color: var(--gd-on-accent);   /* NOT --gd-on-brand: that token does not exist */
  font-size: 0.62rem;
}
/* the two abandoned end-states: a fixed-colour "Cut" tag (it sits on a light
   screenshot, so it must not be a theme token) + a faint red frame edge. */
.gd-rabbit-cut {
  position: absolute; top: 6px; right: 6px; z-index: 1;
  padding: 2px 7px; border-radius: 999px;
  background: #b3303f; color: #fff;
  font-family: var(--grotesk); font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.03em; line-height: 1.35;
  box-shadow: 0 2px 6px rgba(24, 20, 48, 0.22);
}
.gd-rabbit-cell.is-cut .gd-phone-frame {
  border-color: color-mix(in srgb, #b3303f 40%, rgba(20, 24, 45, 0.18));
}
.gd-quote--fork { margin-top: clamp(0.9rem, 2vw, 1.3rem); }

/* ---- SMS evidence strip (inside Asset 08) -------------------------------- */
.gd-sms-strip {
  margin-top: clamp(1.1rem, 2.4vw, 1.8rem);
  padding-top: clamp(0.9rem, 2vw, 1.3rem);
  border-top: 1px dashed color-mix(in srgb, var(--gd-brand) 32%, transparent);
}
.gd-sms-lede {
  margin: 0 0 0.8rem;
  max-width: 66ch;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--gd-muted);
}
.gd-sms-lede b { color: var(--gd-ink); }
.gd-sms-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: clamp(0.7rem, 1.8vw, 1.1rem);
}
.gd-sms-item { margin: 0; display: grid; gap: 0.45rem; }
/* these are single stills, not a state machine: they must show unconditionally,
   so opt out of the [data-state] visibility rules the email stack relies on. */
.gd-shot-img--static { opacity: 1; pointer-events: auto; }
.gd-sms-cap {
  font-family: var(--grotesk);
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--gd-muted);
}
.gd-sms-cap b { display: block; color: var(--gd-ink); font-size: 0.74rem; }

/* ============================================================
   HOMEPAGE COVERS — real product screenshots (2026-07-15)
   CP + GD tiles now show the actual Activix screens instead of the
   hand-built *-thumb.svg illustrations, so the work reads as real.
   Sources are the SAME exports the case studies use, downscaled to
   1600w JPEG (the tile is ~800px @2x and is never zoomed, unlike the
   in-page shots, which stay PNG for zoom fidelity).
   The tile is `object-fit: cover` at clamp(210px,24vw,360px) tall, so
   the crop is chosen per project rather than baked into the file —
   same principle as the callouts: keep it re-editable.
   ============================================================ */
/* CP export is aspect 1.17 dropping into a ~1.75 tile, so a centred crop
   would slice off the customer name + REACHED badge, which is exactly the
   "this is a customer profile" signal. Bias to the top: identity, tabs,
   then the contact card / activity feed. */
.cl-project-media[data-slug="customer-profile"] img { object-position: 50% 0%; }
/* GD export is already ~1.74, so it lands in the tile almost 1:1 with the
   email composer centred. Nudge up slightly to favour the draft over the
   footer chrome. */
.cl-project-media[data-slug="generate-draft"] img { object-position: 50% 42%; }

/* ============================================================
   2026-07-15 (Claude) — GD ASSET 07 rebuilt as a Before/After
   toggle (was a dual-flow "click a tiny number" asset that
   Priyanka couldn't discover). Same gd-* family: brand pill
   toggle, surface cards, semantic good/risk tints. One obvious
   control (the toggle); every step's insight is visible.
   ============================================================ */
.gd-flow2 { display: grid; gap: clamp(14px, 2vw, 20px); }
.gd-flow2-tabs {
  display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; width: fit-content;
  background: color-mix(in srgb, var(--gd-surface) 82%, transparent);
  border: 1px solid var(--gd-border);
}
.gd-flow2-tab {
  font-family: var(--grotesk, "Space Grotesk", sans-serif); font-weight: 700; font-size: 0.82rem;
  border: 0; background: none; cursor: pointer;
  /* stronger than bare --gd-muted so the inactive tab clears AA on the dark bar too */
  color: color-mix(in srgb, var(--gd-muted) 45%, var(--gd-ink));
  padding: 8px 16px; border-radius: 999px; transition: background 0.18s, color 0.18s;
}
.gd-flow2-tab:hover { color: var(--gd-ink); }
.gd-flow2-tab.is-active { background: var(--gd-brand); color: var(--gd-on-accent); }
.gd-flow2-tab:focus-visible { outline: 2px solid var(--gd-brand); outline-offset: 2px; }

.gd-flow2-panel { display: none; }
.gd-flow2[data-view="before"] [data-gd-flow2-panel="before"],
.gd-flow2[data-view="after"] [data-gd-flow2-panel="after"] { display: block; animation: gdFlow2In 0.28s ease; }
@keyframes gdFlow2In { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.gd-flow2-lead { margin: 0 0 14px; font-size: 1rem; line-height: 1.5; color: var(--gd-ink); }
.gd-flow2-lead b { color: var(--gd-brand-strong); }
.gd-flow2-lead--bad b { color: var(--gd-risk); }
.gd-flow2-lead--good b { color: var(--gd-good); }

.gd-flow2-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gd-flow2-step {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--gd-border); border-radius: 12px; background: var(--gd-surface);
}
.gd-flow2-steps--bad .gd-flow2-step.is-marked {
  background: color-mix(in srgb, var(--gd-risk) 11%, var(--gd-surface));
  border-color: color-mix(in srgb, var(--gd-risk) 30%, var(--gd-border));
}
.gd-flow2-steps--good .gd-flow2-step.is-marked {
  background: color-mix(in srgb, var(--gd-good) 11%, var(--gd-surface));
  border-color: color-mix(in srgb, var(--gd-good) 30%, var(--gd-border));
}
.gd-flow2-n {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--gd-brand-soft); color: var(--gd-brand-strong);
  font-family: var(--grotesk, "Space Grotesk", sans-serif); font-weight: 800; font-size: 0.8rem;
}
.gd-flow2-steps--bad .gd-flow2-step.is-marked .gd-flow2-n { background: color-mix(in srgb, var(--gd-risk) 18%, var(--gd-surface)); color: var(--gd-risk); }
.gd-flow2-steps--good .gd-flow2-step.is-marked .gd-flow2-n { background: color-mix(in srgb, var(--gd-good) 18%, var(--gd-surface)); color: var(--gd-good); }
.gd-flow2-copy { display: grid; gap: 3px; min-width: 0; }
.gd-flow2-copy b { font-size: 0.98rem; color: var(--gd-ink); }
.gd-flow2-tag {
  justify-self: start; font-family: var(--grotesk, "Space Grotesk", sans-serif); font-size: 0.64rem;
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gd-muted);
}
.gd-flow2-insight { font-size: 0.88rem; color: var(--gd-muted); line-height: 1.45; }

.gd-flow2-delta {
  margin: 0; padding-top: 4px; font-family: var(--grotesk, "Space Grotesk", sans-serif);
  font-size: 0.9rem; color: var(--gd-ink);
}
.gd-flow2-delta b { color: var(--gd-brand-strong); }

/* ============================================================
   2026-07-16 (Claude) — GD ASSET 08 (b2 / Highlights v2) rebuilt
   as a "making-of" carousel (was the full built composer with
   free-floating button controls + an annotations rail that
   Priyanka found loud + unclear what was clickable). Now one
   obvious control: Next → walks the real screenshots through the
   5 states, with a caption per step. Same gd-* family: brand
   pill button, surface frame, muted captions. The shot image
   stays .shot-zoomable so the lightbox still works.
   ============================================================ */
.gd-shotcar {
  display: grid; gap: clamp(16px, 2.4vw, 26px); align-items: center;
  grid-template-columns: minmax(0, 1.55fr) minmax(220px, 1fr);
}
@media (max-width: 760px) { .gd-shotcar { grid-template-columns: 1fr; } }

.gd-shotcar-cap { display: grid; gap: 8px; align-content: center; min-width: 0; }
.gd-shotcar-eyebrow {
  margin: 0; font-family: var(--grotesk, "Space Grotesk", sans-serif); font-weight: 800;
  font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--gd-brand-strong);
}
.gd-shotcar-title { margin: 0; font-size: clamp(1.08rem, 2vw, 1.32rem); line-height: 1.25; color: var(--gd-ink); }
.gd-shotcar-body { margin: 0; font-size: 0.93rem; line-height: 1.55; color: var(--gd-muted); }

.gd-shotcar-track {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 6px;
}
.gd-shotcar-dots { display: inline-flex; gap: 4px; align-items: center; }
.gd-shotcar-dot {
  width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; place-items: center; border-radius: 50%;
}
.gd-shotcar-dot::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  border: 1.5px solid var(--gd-muted); background: transparent;
  transition: background 0.18s, border-color 0.18s, transform 0.18s;
}
.gd-shotcar-dot.is-done::before { background: color-mix(in srgb, var(--gd-brand) 45%, var(--gd-surface)); border-color: transparent; }
.gd-shotcar-dot.is-active::before { background: var(--gd-brand); border-color: transparent; transform: scale(1.4); }
.gd-shotcar-dot:focus-visible { outline: 2px solid var(--gd-brand); outline-offset: 1px; }

.gd-shotcar-next {
  font-family: var(--grotesk, "Space Grotesk", sans-serif); font-weight: 700; font-size: 0.82rem;
  border: 0; cursor: pointer; background: var(--gd-brand); color: var(--gd-on-accent);
  padding: 10px 20px; min-height: 44px; border-radius: 999px; box-shadow: var(--gd-shadow);
  transition: transform 0.15s ease, filter 0.15s ease;
}
.gd-shotcar-next:hover { transform: translateY(-1px); filter: brightness(1.06); }
.gd-shotcar-next:active { transform: translateY(0); }
.gd-shotcar-next:focus-visible { outline: 2px solid var(--gd-brand); outline-offset: 2px; }

/* Fade the shot as it swaps state so the walk feels animated, not jumpy. */
.gd-shotcar .gd-shot-frame { transition: opacity 0.2s ease; }

/* ============================================================
   2026-07-16 (Claude) — GD ASSET 03 calmed down (was 12
   tap-to-expand accordion cards Priyanka found loud + unclear
   what was clickable). Now an at-a-glance 3-tier spectrum:
   everything visible, static chips (nothing pretends to be a
   control), one note per tier + one punchline carrying the
   insight. Same gd-* family + semantic good/warn/risk. The old
   gd-conf and gd-matrix rules stay for the lab clone.
   ============================================================ */
.gd-conf2 {
  display: grid;
  background: var(--gd-surface);
  border: 1px solid var(--gd-border); border-radius: var(--gd-radius); overflow: hidden;
}
/* Each tier is a row (label + its chips) so the whole thing reads top-to-bottom
   as a confidence gradient: reliable at the top, missing/risky at the bottom. */
.gd-conf2-band {
  display: grid; grid-template-columns: minmax(140px, 190px) 1fr; gap: 10px 20px;
  align-items: start; padding: 15px 17px; border-left: 3px solid transparent;
}
.gd-conf2-band + .gd-conf2-band { border-top: 1px solid var(--gd-border); }
.gd-conf2-band--high { border-left-color: var(--gd-good); }
.gd-conf2-band--med  { border-left-color: var(--gd-warn); }
.gd-conf2-band--low  { border-left-color: var(--gd-risk); }
@media (max-width: 520px) {
  .gd-conf2-band { grid-template-columns: 1fr; gap: 10px; }
}

.gd-conf2-head { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; align-content: start; }
.gd-conf2-head-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.gd-conf2-band--high .gd-conf2-head-dot { background: var(--gd-good); }
.gd-conf2-band--med  .gd-conf2-head-dot { background: var(--gd-warn); }
.gd-conf2-band--low  .gd-conf2-head-dot { background: var(--gd-risk); }
.gd-conf2-label {
  font-family: var(--grotesk, "Space Grotesk", sans-serif);
  font-weight: 800; font-size: 0.92rem; color: var(--gd-ink);
}
.gd-conf2-note { flex-basis: 100%; padding-left: 18px; font-size: 0.78rem; color: var(--gd-muted); }

.gd-conf2-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.gd-conf2-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: 999px; font-size: 0.84rem; line-height: 1.2;
  background: var(--gd-surface-2); border: 1px solid var(--gd-border); color: var(--gd-ink);
}
.gd-conf2-chip-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.gd-conf2-band--high .gd-conf2-chip-dot { background: var(--gd-good); }
.gd-conf2-band--med  .gd-conf2-chip-dot { background: var(--gd-warn); }
.gd-conf2-band--low  .gd-conf2-chip-dot { background: var(--gd-risk); }
.gd-conf2-chip--risk {
  background: color-mix(in srgb, var(--gd-risk) 12%, var(--gd-surface));
  border-color: color-mix(in srgb, var(--gd-risk) 32%, var(--gd-border));
}
.gd-conf2-warn { width: 14px; height: 14px; color: var(--gd-risk); flex: none; }

.gd-conf2-punch {
  margin: 4px 0 0;
  padding: 14px 16px; border-radius: var(--gd-radius);
  background: color-mix(in srgb, var(--gd-risk) 9%, var(--gd-surface));
  border: 1px solid color-mix(in srgb, var(--gd-risk) 26%, var(--gd-border));
  font-size: 0.95rem; line-height: 1.55; color: var(--gd-ink);
}
.gd-conf2-punch-lead { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.gd-conf2-punch .gd-conf2-warn { width: 20px; height: 20px; margin-top: 1px; }
/* the risk labels are a footer INSIDE the callout, split off by a hairline */
.gd-conf2-punch .gd-risk-tags {
  margin: 12px 0 0; padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--gd-risk) 18%, var(--gd-border));
}

/* ---- Asset 02 (v2): LOUPE on the Generate AI Draft button (2026-07-16) -----
   Replaces the flat 1x ring. The lens sits over the button and holds a MAGNIFIED
   copy of that region of the screenshot, so the highlight can never wash over the
   real button (it covers it). Fixed violet border in both themes (it sits on a
   light screenshot). Radius matches the button's own corner radius at the lens
   magnification. Decorative + click-through, so the base image's click-to-zoom
   still fires. Geometry (position/size + inner offset) is inline, computed in JS
   from the button box; only the chrome lives here. */
.gd-loupe {
  position: absolute;
  overflow: hidden;
  border-radius: 50%;                   /* circular magnifier lens */
  /* neutral drop shadow + hairline only — no purple glow to fight the UI/gradient */
  box-shadow: 0 12px 28px rgba(24, 20, 48, 0.32), 0 0 0 1px rgba(24, 20, 48, 0.16);
  pointer-events: none;                 /* clicks fall through to the zoomable base */
}
/* ⚠️ Rim goes on ::after, NOT a real border on .gd-loupe. A border shrinks the
   inner img's containing block (padding box) so its %-offsets drift (badly on the
   short axis). The overlay rim doesn't touch layout, so the loupe math stays exact.
   Neutral white so it reads as a lens without any colour clashing with the button. */
.gd-loupe::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid #ffffff;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(24, 20, 48, 0.22);
  pointer-events: none;
}
.gd-loupe-img {
  position: absolute;
  height: auto;                         /* width is set inline; height follows ratio */
  max-width: none;
}

/* ---- Validation journey (2026-07-16): internal testing → dealer pilot →
   learning loop, leading into the success-metrics dashboard. Replaces the old
   dark "Internal testing / 3+3 drafts per path" card. Matches the metrics
   board's FigJam sticker language (2px --gd-line border, sticker shadow) and
   uses gd tokens so it's theme-aware + AA in both modes. */
.gd-validation { margin: 0 0 16px; }
.gd-validation-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gd-validation-step {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  border: 2px solid var(--gd-line);
  border-radius: 14px;
  background: var(--gd-surface);
  box-shadow: 2px 2px 0 var(--gd-line);
  padding: 12px 13px;
}
.gd-validation-n {
  flex: 0 0 auto;
  width: 27px; height: 27px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--gd-brand-soft);
  color: var(--gd-brand-strong);
  border: 2px solid var(--gd-line);
  font-size: 0.82rem; font-weight: 900; line-height: 1;
}
.gd-validation-step b { display: block; color: var(--gd-ink); font-size: 0.96rem; }
.gd-validation-step p { margin: 3px 0 0; color: var(--gd-muted); font-size: 0.85rem; line-height: 1.42; }

/* ============================================================
   2026-07-16 (Claude) — DESKING b2 STAR: Deal Navigator tab swap
   (asAssetDealNavigatorIAShot). My tab pills swap the real
   screenshots; each shot carries %-positioned overlays that
   unify the section heading to "Deal Navigator" and the first
   tab to "Quote" (the shots came from two capture iterations).
   Overlay colours are FIXED (they sit ON the screenshot, which
   stays light in both themes) and sized in cqw so they scale
   with the frame and the zoom clone.
   ============================================================ */
.as-asset--navshot { display: grid; gap: 14px; }
.as-nav-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.as-nav-tab {
  font-family: var(--grotesk, "Space Grotesk", sans-serif); font-weight: 700; font-size: 0.82rem;
  padding: 8px 15px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--as-border); background: var(--as-surface);
  color: color-mix(in srgb, var(--as-muted) 55%, var(--as-ink));
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.as-nav-tab:hover { color: var(--as-ink); border-color: color-mix(in srgb, var(--as-brand) 40%, var(--as-border)); }
.as-nav-tab.is-active { background: var(--as-brand); color: #fff; border-color: transparent; }
.as-nav-tab:focus-visible { outline: 2px solid var(--as-brand); outline-offset: 2px; }

.as-nav-panel { display: none; }
.as-nav-panel.is-active { display: grid; gap: 10px; animation: asNavIn 0.24s ease; }
@keyframes asNavIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.as-nav-frame {
  container-type: inline-size; position: relative; overflow: hidden;
  border: 1px solid var(--as-border); border-radius: 12px; background: #fff;
}
.as-nav-img { display: block; width: 100%; height: auto; }
.as-nav-ov { position: absolute; pointer-events: none; line-height: 1; white-space: nowrap; }
.as-nav-ov-cover { background: #fff; }
.as-nav-ov-head { color: #6e6e6e; font-weight: 500; font-size: 1.5cqw; letter-spacing: 0.004em; }
.as-nav-ov-tabcover { background: #eafaf1; }
.as-nav-ov-tab { color: #19713e; font-weight: 600; font-size: 1.4cqw; }

.as-nav-cap { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--as-muted); }
.as-nav-cap b { color: var(--as-ink); font-weight: 700; }

/* b2 beat 1 — the old lead page as a CASCADE of three bands, so the montage
   itself conveys how long the page was. The hidden full <img> is what zooms. */
.as-asset--oldpage { display: grid; gap: 12px; }
.as-oldpage-frame { position: relative; }
.as-oldpage-cascade {
  position: relative;
  display: flex; flex-direction: column;
  padding: 4px 2px 8px;
  cursor: zoom-in;
}
.as-oldpage-slice {
  display: block;
  width: 66%;
  aspect-ratio: 1920 / 1150;        /* ~ one screen of the page */
  background-repeat: no-repeat;
  background-size: 100% auto;        /* full width; height overflows → shows a band */
  background-color: #fff;
  border: 1px solid var(--as-border);
  border-radius: 10px;
  box-shadow: 0 16px 32px rgba(27, 39, 66, 0.20), 0 2px 6px rgba(27, 39, 66, 0.10);
}
.as-oldpage-slice:nth-child(1) { align-self: flex-start; transform: rotate(-1.6deg); z-index: 3; margin-top: 0; }
.as-oldpage-slice:nth-child(2) { align-self: center;     transform: rotate(1.3deg);  z-index: 2; margin-top: -12%; }
.as-oldpage-slice:nth-child(3) { align-self: flex-end;   transform: rotate(-0.9deg); z-index: 1; margin-top: -12%; }
/* FIXED navy text: these pills sit on a WHITE chip over the light screenshot in
   BOTH themes, so var(--as-brand-strong) (which flips light in dark) would fail. */
.as-oldpage-tag {
  position: absolute; left: 0; top: 0; z-index: 5;
  font-family: var(--grotesk, "Space Grotesk", sans-serif); font-weight: 700; font-size: 0.72rem;
  color: #21385f; background: rgba(255, 255, 255, 0.95);
  padding: 5px 11px; border-radius: 999px; box-shadow: 0 1px 4px rgba(27, 39, 66, 0.16);
}
.as-oldpage-more {
  position: absolute; right: 0; bottom: -4px; z-index: 5; max-width: 42%; text-align: right;
  font-family: var(--grotesk, "Space Grotesk", sans-serif); font-weight: 700; font-size: 0.72rem;
  color: #21385f; background: rgba(255, 255, 255, 0.95);
  padding: 5px 11px; border-radius: 12px; box-shadow: 0 1px 4px rgba(27, 39, 66, 0.16);
}
/* full page: hidden in the montage, shown only inside the lightbox clone */
.as-oldpage-fullimg { display: none; }
.shot-lightbox .as-oldpage-cascade { display: none; }
.shot-lightbox .as-oldpage-fullimg { display: block; width: 100%; height: auto; }

/* b2 beat 5 — the real desking screen inside the swivel-chair "after". */
.as-desking-frame {
  position: relative; overflow: hidden; max-height: 560px;
  border: 1px solid var(--as-border); border-radius: 12px; background: #fff;
}
.as-desking-frame img { display: block; width: 100%; height: auto; }
.as-desking-tag {
  position: absolute; right: 12px; top: 12px;
  font-family: var(--grotesk, "Space Grotesk", sans-serif); font-weight: 700; font-size: 0.72rem;
  color: #fff; background: var(--as-brand);
  padding: 5px 11px; border-radius: 999px; box-shadow: 0 1px 5px rgba(27, 39, 66, 0.2);
}

/* Quote → BOS flow, rebuilt as a clean numbered ledger (the old flex+accordion
   hybrid was broken: collapsed steps overflowed their cards). */
.as-asset--qb2 { display: grid; gap: 12px; }
.as-qb2-flow {
  list-style: none; margin: 0; padding: 0; display: grid;
  border: 1px solid var(--as-border); border-radius: var(--as-radius, 14px); overflow: hidden; background: var(--as-surface);
}
.as-qb2-stage {
  display: grid; grid-template-columns: minmax(140px, 190px) 1fr; gap: 8px 20px; align-items: start;
  padding: 14px 16px;
}
.as-qb2-stage + .as-qb2-stage { border-top: 1px solid var(--as-border); }
.as-qb2-head { display: flex; align-items: center; gap: 10px; }
.as-qb2-num {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--as-brand-soft); color: var(--as-brand-strong);
  font-family: var(--grotesk, "Space Grotesk", sans-serif); font-weight: 800; font-size: 0.78rem;
}
.as-qb2-name { font-family: var(--grotesk, "Space Grotesk", sans-serif); font-weight: 700; font-size: 0.9rem; color: var(--as-ink); }
.as-qb2-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; align-self: center; }
.as-qb2-steps li { font-size: 0.86rem; line-height: 1.45; color: var(--as-muted); padding-left: 15px; position: relative; }
.as-qb2-steps li::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 5px; height: 5px; border-radius: 50%; background: var(--as-brand);
}
@media (max-width: 520px) { .as-qb2-stage { grid-template-columns: 1fr; gap: 8px; } }

/* b2 beat 5 — interactive "View Quote → desking opens" sim in the swivel After. */
.as-desk-sim { position: relative; }
.as-desk-closed { display: grid; gap: 10px; }
.as-desk-sim.is-open .as-desk-closed { display: none; }
/* Closed state = the real Quote screenshot as a clickable "page", with a
   pulsing hotspot over the actual View Quote button. No height cap, so the
   hotspot's % maps straight to the image. */
.as-desk-page {
  display: block; width: 100%; padding: 0; cursor: pointer; position: relative;
  border: 1px solid var(--as-border); border-radius: 12px; overflow: hidden; background: #fff;
}
.as-desk-page img { display: block; width: 100%; height: auto; }
.as-desk-page:focus-visible { outline: 2px solid var(--as-brand); outline-offset: 2px; }
.as-desk-page:hover .as-desk-hot { box-shadow: 0 0 0 3px var(--as-brand), 0 0 0 10px color-mix(in srgb, var(--as-brand) 28%, transparent); }
.as-desk-hot {
  position: absolute; border-radius: 9px; pointer-events: none;
  left: 61%; top: 56.1%; width: 9.7%; height: 3.1%;
  box-shadow: 0 0 0 3px var(--as-brand), 0 0 0 7px color-mix(in srgb, var(--as-brand) 35%, transparent);
  animation: asHotPulse 1.8s ease-in-out infinite;
}
@keyframes asHotPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--as-brand), 0 0 0 6px color-mix(in srgb, var(--as-brand) 42%, transparent); }
  55% { box-shadow: 0 0 0 3px var(--as-brand), 0 0 0 13px color-mix(in srgb, var(--as-brand) 0%, transparent); }
}
.as-desk-cue {
  position: absolute; left: 60.5%; top: 50.2%; transform: translate(0, -145%);
  background: var(--as-brand-strong); color: #fff; white-space: nowrap;
  font-family: var(--grotesk, "Space Grotesk", sans-serif); font-weight: 700; font-size: 0.72rem;
  padding: 4px 10px; border-radius: 999px; box-shadow: 0 2px 6px rgba(27, 39, 66, 0.25); pointer-events: none;
}
.as-desk-hint { margin: 0; text-align: center; font-size: 0.8rem; color: var(--as-muted); }

.as-desk-window { display: none; }
.as-desk-sim.is-open .as-desk-window { display: block; animation: asDeskOpen 0.34s cubic-bezier(0.2, 0.7, 0.3, 1); }
@keyframes asDeskOpen { from { opacity: 0; transform: scale(0.965) translateY(8px); } to { opacity: 1; transform: none; } }
.as-desk-winbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px 8px 15px; background: var(--as-brand-strong); color: #fff;
  border-radius: 12px 12px 0 0;
}
.as-desk-wintitle { font-family: var(--grotesk, "Space Grotesk", sans-serif); font-weight: 700; font-size: 0.82rem; }
.as-desk-close {
  flex: none; border: 0; cursor: pointer; background: rgba(255, 255, 255, 0.16); color: #fff;
  width: 30px; height: 30px; border-radius: 8px; font-size: 0.85rem; display: grid; place-items: center;
  transition: background 0.15s;
}
.as-desk-close:hover { background: rgba(255, 255, 255, 0.3); }
.as-desk-close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.as-desk-winbody { border-top: 0; border-radius: 0 0 12px 12px; }
.as-desk-loader {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: var(--as-surface); opacity: 1; transition: opacity 0.3s ease;
}
.as-desk-loader::after {
  content: ""; width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--as-border); border-top-color: var(--as-brand);
  animation: asDeskSpin 0.7s linear infinite;
}
.as-desking-frame.is-loaded .as-desk-loader { opacity: 0; pointer-events: none; }
@keyframes asDeskSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .as-desk-open, .as-desk-window, .as-desk-loader::after { animation: none; }
}

/* ---- Desking beat as a vertical FLOW (2026-07-16, 2nd pass) ---------------
   Just the vehicle CARD (cropped from the Deal Navigator screen) → arrow down →
   the redesigned desking page. The crop wrapper has NO border (a border would
   make the img's containing block the padding box and shift the crop); the hair-
   line sits on ::after instead. Ring + crop geometry come inline from the render
   fn. Fixed colours drawn on the screenshot; theme-aware chrome around it. */
.as-asset--dealflow .as-swivel-cap { margin: 0 0 16px; }
.as-dealflow-step { margin: 0; display: grid; gap: 9px; }
.as-flow-tag {
  font-family: var(--grotesk, "Space Grotesk", sans-serif);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--as-muted);
}
/* the cropped vehicle card */
.as-cardcrop {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #ffffff;                 /* stays light in dark theme */
  box-shadow: 0 12px 30px rgba(24, 30, 54, 0.16);
}
.as-cardcrop::after {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid rgba(24, 30, 54, 0.14);
  border-radius: 14px;
  pointer-events: none;
}
.as-cardcrop-img { position: absolute; height: auto; max-width: none; }
/* highlight the View Quote button inside the cropped card */
.as-cardcrop-ring {
  position: absolute;
  border-radius: 8px;
  box-shadow: 0 0 0 3px var(--as-brand), 0 0 0 7px color-mix(in srgb, var(--as-brand) 30%, transparent);
  pointer-events: none;
  animation: asRingPulse 2.1s ease-in-out infinite;
}
@keyframes asRingPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--as-brand), 0 0 0 6px color-mix(in srgb, var(--as-brand) 36%, transparent); }
  55%      { box-shadow: 0 0 0 3px var(--as-brand), 0 0 0 13px color-mix(in srgb, var(--as-brand) 0%, transparent); }
}
/* the arrow between the card and the desking page */
.as-dealflow-arrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  padding-left: 6px;
  color: var(--as-brand-strong);
}
.as-dealflow-chevron { flex: 0 0 auto; width: 26px; height: auto; }
.as-dealflow-label { font-size: 0.9rem; line-height: 1.4; color: var(--as-ink); font-weight: 600; }
.as-dealflow-label b { color: var(--as-brand-strong); }
.as-dealflow-deskframe { position: relative; }
/* Release the img's presentational width/height attrs so it scales to the frame
   and keeps its aspect ratio (else max-width caps width but height stays at the
   2830px attr and the near-square shot squishes to a tall sliver). Same idiom as
   .cp-shot-img. */
.as-dealflow-deskframe img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) { .as-cardcrop-ring { animation: none; } }

/* ============================================================
   Résumé — in-house PDF viewer (pdf.js)
   ============================================================ */
.resume-page {
  padding: clamp(26px, 3.5vw, 52px) 0 clamp(48px, 6vw, 88px);
}

.resume-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(18px, 3vw, 36px);
  margin-bottom: clamp(20px, 2.6vw, 34px);
}

.resume-eyebrow {
  margin: 0 0 10px;
  color: color-mix(in srgb, var(--accent-3) 78%, var(--muted));
  font-family: var(--grotesk);
  font-size: 0.82rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.resume-title {
  margin: 0;
  color: var(--text);
  font-family: var(--grotesk);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 550;
  line-height: 1;
  letter-spacing: -0.015em;
}

.resume-sub {
  margin: 8px 0 0;
  color: var(--muted);
  font-family: var(--grotesk);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
}

.resume-download {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--text);
  color: var(--bg);
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.98rem;
  box-shadow: var(--soft-shadow);
  transition: transform 200ms ease, background 200ms ease, box-shadow 200ms ease;
}
.resume-download svg { width: 19px; height: 19px; }
.resume-download:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--text) 82%, var(--accent-3));
  box-shadow: var(--shadow);
}

.resume-viewer {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--soft-shadow);
}

.resume-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px clamp(12px, 1.6vw, 18px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 88%, var(--surface-2));
  backdrop-filter: blur(6px);
}

.resume-zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.resume-tbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--grotesk);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1;
  transition: background 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.resume-tbtn--wide { font-size: 0.9rem; letter-spacing: 0.02em; }
.resume-tbtn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--line-strong); }
.resume-tbtn:active:not(:disabled) { transform: scale(0.96); }
.resume-tbtn:disabled { opacity: 0.4; cursor: not-allowed; }
.resume-tbtn.is-active {
  background: color-mix(in srgb, var(--denim) 16%, var(--surface));
  border-color: color-mix(in srgb, var(--denim) 52%, var(--line));
  color: var(--denim);
}

.resume-zoom-level {
  min-width: 56px;
  text-align: center;
  color: var(--text);
  font-family: var(--grotesk);
  font-size: 0.92rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.resume-pagecount {
  color: var(--muted);
  font-family: var(--grotesk);
  font-size: 0.85rem;
}

.resume-toolbar-download {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: auto;
  height: 40px;                 /* match the toolbar's zoom buttons */
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  background: var(--text);
  color: var(--bg);
  font-family: var(--grotesk);
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: var(--soft-shadow);
  transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}
.resume-toolbar-download svg { width: 17px; height: 17px; }
.resume-toolbar-download:hover {
  background: color-mix(in srgb, var(--text) 82%, var(--accent-3));
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
.resume-toolbar-download:active { transform: translateY(0) scale(0.97); }
.resume-toolbar-download.is-downloading { pointer-events: none; opacity: 0.9; }
.resume-toolbar-download.is-downloading svg { animation: resume-dl-spin 0.7s linear infinite; }
@keyframes resume-dl-spin { to { transform: rotate(360deg); } }

.resume-scroll {
  height: clamp(460px, calc(100svh - var(--nav-h) - 250px), 940px);
  overflow: auto;                 /* scrolls BOTH axes when the page is zoomed larger */
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--surface-2) 60%, var(--bg)), var(--bg) 70%);
  outline: none;
  overscroll-behavior: contain;
  touch-action: pan-x pan-y;      /* browser handles panning; we handle two-finger pinch */
}
.resume-scroll:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--denim) 60%, transparent); }

.resume-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: clamp(16px, 2.4vw, 30px);
  box-sizing: border-box;
  width: max-content;             /* grow to the widest page so overflow (and h-scroll) works */
  min-width: 100%;                /* but at least fill the viewport so small pages stay centred */
  min-height: 100%;
  margin: 0 auto;
}

.resume-page-canvas {
  display: block;                 /* no max-width/height:auto -> exact size, never stretched */
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 10px 34px rgba(20, 18, 12, 0.16);
}
[data-theme="dark"] .resume-page-canvas {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.resume-status {
  margin: auto;
  padding: 48px 20px;
  color: var(--muted);
  font-family: var(--grotesk);
  font-size: 1rem;
  text-align: center;
}
.resume-status--error { color: var(--text); }
.resume-status a { color: var(--denim); border-bottom: 1px solid currentColor; font-weight: 650; }

.resume-fallback {
  margin: 16px 2px 0;
  color: var(--muted);
  font-family: var(--grotesk);
  font-size: 0.9rem;
  text-align: center;
}
.resume-fallback a { color: var(--denim); border-bottom: 1px solid currentColor; }

@media (max-width: 620px) {
  .resume-toolbar { gap: 8px; padding: 8px 10px; }
  .resume-toolbar-download span { display: none; }
  .resume-toolbar-download { height: 38px; padding: 0 13px; }
  .resume-pagecount { display: none; }
  .resume-tbtn { min-width: 38px; height: 38px; }
  .resume-scroll { height: calc(100svh - var(--nav-h) - 200px); }
}

/* ============================================================
   2026-07-25 (Claude) — About-page "making-of" callout (#mkCallout)
   An editorial "featured post" card teasing #/making-of, deliberately
   a DIFFERENT treatment from the homepage's animated cursor pill.
   Section chrome (.wrap/.eyebrow/.u) is redeclared here scoped to
   .mkc-sec because the shared versions are scoped to .ai-sec/.tm-sec
   only; the section bg stays transparent so the page-wide About canvas
   shows through (its local .dots/.blob are display:none by that rule).
   Static: hover-lift + arrow nudge only. AA verified both themes.
   ============================================================ */
.about-page .mkc-sec {
  position: relative;
  overflow: hidden;
  padding: clamp(8px, 2vh, 26px) 0 clamp(44px, 8vh, 84px);
}
.about-page .mkc-sec .wrap {
  position: relative;
  z-index: 5;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}
.about-page .mkc-sec .eyebrow {
  margin: 0 0 12px;
  color: var(--denim);
  font-family: var(--grotesk);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
[data-theme="dark"] .about-page .mkc-sec .eyebrow { color: #a7c4ec; }
.about-page .mkc-sec .u {
  padding: 0 0.06em;
  background: linear-gradient(transparent 58%, color-mix(in srgb, var(--fun) 34%, transparent) 58%);
}

/* the card = the whole link */
.about-page .mkc-card {
  display: grid;
  grid-template-columns: 1.45fr 0.85fr;
  gap: clamp(20px, 3vw, 46px);
  align-items: stretch;
  padding: clamp(20px, 2.6vw, 38px);
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--soft-shadow);
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.about-page .mkc-card:hover,
.about-page .mkc-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--denim) 40%, var(--line));
}
.about-page .mkc-card:focus-visible { outline: 2px solid var(--denim); outline-offset: 3px; }

.about-page .mkc-main { display: flex; flex-direction: column; align-items: flex-start; }
.about-page .mkc-meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.about-page .mkc-chip {
  padding: 4px 11px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--denim) 13%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--denim) 26%, transparent);
  color: var(--denim);
  font-family: var(--grotesk);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
[data-theme="dark"] .about-page .mkc-chip {
  background: color-mix(in srgb, #8eadd6 18%, var(--surface));
  color: #bcd2ee;
}
.about-page .mkc-read {
  color: var(--muted);
  font-family: var(--grotesk);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.about-page .mkc-title {
  max-width: 20ch;
  margin: 0 0 14px;
  color: var(--text);
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(1.55rem, 2.9vw, 2.4rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.about-page .mkc-excerpt {
  max-width: 58ch;
  margin: 0 0 20px;
  color: var(--muted);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.55;
}
.about-page .mkc-excerpt b { color: var(--text); font-weight: 700; }

/* byline: two model marks as author avatars + credit line */
.about-page .mkc-byline { display: flex; align-items: center; gap: 11px; margin-bottom: 22px; }
.about-page .mkc-avatars { display: inline-flex; }
.about-page .mkc-avatars .mkc-mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 5px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--soft-shadow);
}
.about-page .mkc-avatars .mkc-mark + .mkc-mark { margin-left: -9px; }
.about-page .mkc-byline-t {
  color: var(--muted);
  font-family: var(--grotesk);
  font-size: 13px;
  font-weight: 600;
}
.about-page .mkc-byline-t b { color: var(--text); font-weight: 700; }

/* the marks (aesthetic, not logos) */
.about-page .mkc-mark--claude line { stroke: var(--fun); stroke-width: 6; stroke-linecap: round; }
.about-page .mkc-mark--claude .mkc-core { fill: var(--fun); }
.about-page .mkc-mark--codex ellipse { fill: color-mix(in srgb, var(--denim) 30%, transparent); }
.about-page .mkc-mark--codex .mkc-core--blue { fill: var(--denim); }
[data-theme="dark"] .about-page .mkc-mark--codex ellipse { fill: color-mix(in srgb, #8eadd6 34%, transparent); }
[data-theme="dark"] .about-page .mkc-mark--codex .mkc-core--blue { fill: #8eadd6; }

/* CTA */
.about-page .mkc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  color: var(--denim);
  font-family: var(--grotesk);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
[data-theme="dark"] .about-page .mkc-cta { color: #9fbbe6; }
.about-page .mkc-arrow { transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1); }
.about-page .mkc-card:hover .mkc-arrow,
.about-page .mkc-card:focus-visible .mkc-arrow { transform: translateX(5px); }

/* right "cover" panel: a still mini-relay illustration */
.about-page .mkc-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 190px;
  padding: 26px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--denim) 16%, var(--line));
  background:
    radial-gradient(115% 90% at 12% 0%, color-mix(in srgb, var(--blossom) 60%, transparent), transparent 62%),
    radial-gradient(120% 110% at 100% 100%, color-mix(in srgb, var(--denim) 26%, transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--blossom) 26%, var(--surface)), color-mix(in srgb, var(--denim) 12%, var(--surface)));
}
.about-page .mkc-cover-mark svg { display: block; width: clamp(52px, 6vw, 74px); height: auto; }
.about-page .mkc-cover-link {
  width: clamp(30px, 4vw, 52px);
  height: 0;
  border-top: 2px dashed color-mix(in srgb, var(--denim) 55%, transparent);
}
.about-page .mkc-cover-chip {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--denim) 22%, transparent);
  color: var(--denim);
  font-family: var(--grotesk);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
[data-theme="dark"] .about-page .mkc-cover-chip { color: #cfe0f3; }

/* mobile: stack, cover becomes the article "hero image" on top */
@media (max-width: 720px) {
  .about-page .mkc-card { grid-template-columns: 1fr; }
  .about-page .mkc-cover { order: -1; min-height: 140px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-page .mkc-card,
  .about-page .mkc-arrow { transition: none; }
}

/* .mk-back is a <button> now (history.back()). Reset the default button chrome
   but keep the denim underline-link look from the base rule. */
.mk-back { background: none; border: 0; border-bottom: 2px solid color-mix(in srgb, var(--denim) 40%, transparent); padding: 0 0 2px; cursor: pointer; }
/* the top instance sits above the eyebrow in the hero (bottom one keeps its margin-top) */
.mk-back--top { margin-top: 0; margin-bottom: clamp(20px, 4vh, 40px); }