/* ============================================================
   All Pro Exterior & Interior House Painting — design-b (Colorman)
   Slot-scoped [data-design="b"]. Tokens exposed on the design block.
   ============================================================ */

[data-design="b"] {
  --design-b-primary: hsl(199 42% 34%);
  --cm-counter: #F6F3EC;
  --cm-ticket: #EFEAE0;
  --cm-machine: #2E2B27;
  --cm-ink: #272420;
  --cm-muted: #6E675E;
  --cm-mix-h: 199;
  --cm-mix-s: 42%;
  --cm-mix-l: 34%;
  --cm-mix: hsl(var(--cm-mix-h) var(--cm-mix-s) var(--cm-mix-l));
  --cm-mix-wet: hsl(var(--cm-mix-h) calc(var(--cm-mix-s) + 8%) calc(var(--cm-mix-l) + 10%));
  --cm-brass: #9A7B34;
  --cm-rule: #D2CBBC;
  --cm-critical: #93312B;
  --cm-success: #3C6B4F;

  --cm-size-caption: 0.875rem;
  --cm-size-body: 1.0625rem;
  --cm-size-lead: 1.33rem;
  --cm-size-h3: 1.66rem;
  --cm-size-h2: 2.08rem;
  --cm-size-h1: clamp(2.3rem, 5.4vw, 3.6rem);
  --cm-size-logo: 1.25rem;
  --cm-size-logo-sm: 1.05rem;

  --cm-grain: 4px;
  --cm-shot: 8px;
  --cm-pour: 16px;
  --cm-bench: 32px;
  --cm-counterGap: 48px;
  --cm-floor: 64px;
  --cm-aisle: 96px;

  --cm-click: 120ms;
  --cm-fall: 420ms;
  --cm-index: 300ms;
  --cm-true: 600ms;

  --cm-ease-machine: cubic-bezier(0.2, 0, 0, 1);
  --cm-ease-drop: cubic-bezier(0.5, 0, 0.85, 0.55);
  --cm-ease-settle: cubic-bezier(0.22, 0.9, 0.3, 1);

  --cm-r-can: 999px;
  --cm-r-ticket: 2px;

  --cm-shadow: 0 2px 0 rgba(39, 36, 32, 0.14);

  background: var(--cm-counter);
  color: var(--cm-ink);
  font-family: "Chivo", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--cm-size-body);
  line-height: 1.6;
}

[data-design="b"].dq-design * { box-sizing: border-box; }
[data-design="b"].dq-design a { color: inherit; }
[data-design="b"].dq-design p { margin: 0 0 var(--cm-pour); }
[data-design="b"].dq-design ul, [data-design="b"].dq-design ol { margin: 0; padding: 0; }

/* ---------- Canister (shared button component) ---------- */
[data-design="b"] .cm-canister {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 12px 20px; text-decoration: none;
  font-family: "Chivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700; font-size: var(--cm-size-body);
  border-radius: var(--cm-r-ticket);
  touch-action: manipulation;
}
[data-design="b"] .cm-canister--bare {
  background: transparent; color: var(--cm-ink);
  box-shadow: inset 0 0 0 1px var(--cm-rule);
  min-height: 44px;
}

/* ---------- 1. Header ---------- */
[data-design="b"] .cm-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--cm-machine);
}
[data-design="b"] .cm-header__bar {
  max-width: 1320px; margin-inline: auto;
  padding: 12px clamp(20px, 5vw, 48px);
  display: flex; align-items: center; justify-content: space-between;
  position: relative; z-index: 2;
}
[data-design="b"] .cm-logo { text-decoration: none; }
[data-design="b"] .cm-logo__mark {
  font-family: "Chivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900; font-size: var(--cm-size-logo); color: var(--cm-counter);
  letter-spacing: 0.01em;
}
[data-design="b"] .cm-header__feed {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(246, 243, 236, 0.12); overflow: hidden;
  pointer-events: none;
}
[data-design="b"] .cm-header__slug {
  position: absolute; top: 0; bottom: 0; left: 0; width: 22%;
  background: linear-gradient(90deg, transparent, var(--cm-mix) 30% 70%, transparent);
  transform: translateX(-120%);
  animation: cm-feed 26s var(--cm-ease-settle) infinite;
}
@keyframes cm-feed {
  from { transform: translateX(-120%); }
  to   { transform: translateX(560%); }
}
[data-design="b"] .cm-burger {
  min-width: 44px; min-height: 44px; display: grid; place-content: center;
  gap: 5px; justify-items: end;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
[data-design="b"] .cm-burger__dot {
  width: 7px; height: 7px; border-radius: var(--cm-r-can);
  background: var(--cm-mix);
  box-shadow: 0 0 0 1px var(--cm-brass);
  transition: transform var(--cm-click) var(--cm-ease-machine);
}
[data-design="b"] .cm-burger__line {
  width: 24px; height: 3px; background: var(--cm-counter);
  transition: transform var(--cm-click) var(--cm-ease-machine),
              opacity var(--cm-click) var(--cm-ease-machine);
}
[data-design="b"] .cm-burger[aria-expanded="true"] .cm-burger__dot { transform: scale(1.3); }
[data-design="b"] .cm-burger[aria-expanded="true"] .cm-burger__line:nth-child(2) { transform: translateY(4px) rotate(45deg); }
[data-design="b"] .cm-burger[aria-expanded="true"] .cm-burger__line:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }
[data-design="b"] .cm-burger:focus-visible { outline: 2px solid var(--cm-mix); outline-offset: 2px; }
[data-design="b"] .cm-hopper {
  position: fixed; inset: 0; z-index: 39;
  background: var(--cm-ticket);
  padding: 96px clamp(20px, 5vw, 48px) 48px;
  clip-path: inset(0 0 100% 0);
  overflow-y: auto; overscroll-behavior: contain;
}
[data-design="b"] .cm-hopper[hidden] { display: none; }
[data-design="b"] .cm-hopper.is-open {
  clip-path: inset(0 0 0% 0);
  transition: clip-path var(--cm-index) var(--cm-ease-machine);
}
[data-design="b"] .cm-hopper__nav { display: grid; gap: 8px; margin-bottom: var(--cm-bench); }
[data-design="b"] .cm-hopper__link {
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: var(--cm-size-lead); text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--cm-ink); text-decoration: none;
  padding: 12px 0; min-height: 44px; display: block;
  border-bottom: 1px solid var(--cm-rule);
  opacity: 0; transform: translateY(-4px);
}
[data-design="b"] .cm-hopper.is-open .cm-hopper__link {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--cm-index) var(--cm-ease-machine),
              transform var(--cm-index) var(--cm-ease-machine);
  transition-delay: calc(var(--cm-i, 0) * 70ms);
}
[data-design="b"] .cm-hopper__ctas { display: grid; gap: 16px; max-width: 360px; }
@media (max-width: 560px) {
  [data-design="b"] .cm-logo__mark { font-size: var(--cm-size-logo-sm); }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .cm-header__slug { animation: none; transform: translateX(180%); }
  [data-design="b"] .cm-hopper.is-open { transition: none; }
  [data-design="b"] .cm-hopper.is-open .cm-hopper__link { transition: none; opacity: 1; transform: none; }
}

/* ---------- 2. CTA (dispense button) ---------- */
[data-design="b"] .cm-cta {
  position: relative; display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 16px 28px 16px 20px;
  background: var(--cm-machine); color: var(--cm-counter);
  font-family: "Chivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700; font-size: var(--cm-size-body); text-decoration: none;
  border-radius: var(--cm-r-ticket);
  box-shadow: var(--cm-shadow);
  overflow: visible; touch-action: manipulation;
  transition: transform var(--cm-click) var(--cm-ease-machine);
}
[data-design="b"] .cm-cta__label { position: relative; z-index: 2; opacity: 1; }
[data-design="b"] .cm-cta__nozzle {
  position: relative; z-index: 2; width: 14px; height: 14px;
  border-radius: var(--cm-r-can); background: var(--cm-mix);
  box-shadow: 0 0 0 1px var(--cm-brass);
  transition: background-color var(--cm-true) var(--cm-ease-settle);
}
[data-design="b"] .cm-cta__bead {
  position: absolute; left: 50%; top: 100%; width: 6px; height: 6px;
  margin-left: -3px; border-radius: var(--cm-r-can);
  background: var(--cm-mix-wet); opacity: 0;
  animation: cm-cta-drip 5s var(--cm-ease-drop) infinite;
}
@keyframes cm-cta-drip {
  0%, 62% { transform: translateY(0) scale(0.4); opacity: 0; }
  72%     { transform: translateY(0) scale(1); opacity: 0.9; }
  86%     { transform: translateY(10px) scale(1); opacity: 0.5; }
  92%, 100% { transform: translateY(12px) scale(0.6); opacity: 0; }
}
[data-design="b"] .cm-cta__fill {
  position: absolute; inset: 0; z-index: 1; border-radius: var(--cm-r-ticket);
  background: linear-gradient(0deg, var(--cm-mix) 0 calc(100% - 3px), var(--cm-mix-wet) calc(100% - 3px));
  clip-path: inset(100% 0 0 0);
  transition: clip-path 240ms var(--cm-ease-machine),
              background-color var(--cm-true) var(--cm-ease-settle);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .cm-cta:hover .cm-cta__fill { clip-path: inset(0 0 0 0); }
}
[data-design="b"] .cm-cta:focus-visible {
  outline: 2px solid var(--cm-mix); outline-offset: 2px;
}
[data-design="b"] .cm-cta:focus-visible .cm-cta__fill { clip-path: inset(0 0 0 0); }
[data-design="b"] .cm-cta:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .cm-cta__bead { animation: none; }
  [data-design="b"] .cm-cta__fill { transition: background-color var(--cm-true) var(--cm-ease-settle); }
}

/* ---------- 3. Hero (mixing well backdrop) ---------- */
[data-design="b"] .cm-hero {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: min(78vh, 720px);
  display: flex; align-items: center;
  background: var(--cm-counter);
  border-bottom: 1px solid var(--cm-rule);
}
[data-design="b"] .cm-hero__bench { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
[data-design="b"] .cm-hero__well {
  position: absolute; right: -6%; top: 50%;
  width: clamp(280px, 38vw, 520px); aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: var(--cm-r-can);
  background: var(--cm-mix);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.18), var(--cm-shadow);
  overflow: hidden;
  opacity: 0; scale: 0.95;
  animation: cm-well-settle 0.9s var(--cm-ease-settle) 0.1s forwards;
  transition: background-color var(--cm-true) var(--cm-ease-settle);
}
@keyframes cm-well-settle {
  to { opacity: 0.94; scale: 1; }
}
[data-design="b"] .cm-hero__stir {
  position: absolute; inset: -12%;
  background: conic-gradient(from 0deg,
    transparent 0 68%, rgba(255, 255, 255, 0.14) 76%,
    rgba(255, 255, 255, 0.03) 84%, transparent 92%);
  animation: cm-stir 14s linear infinite;
}
@keyframes cm-stir {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
[data-design="b"] .cm-hero__etch {
  position: absolute; left: clamp(20px, 5vw, 48px); top: 12%;
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: var(--cm-size-caption); letter-spacing: 0.3em;
  color: var(--cm-ink); opacity: 0.14; white-space: nowrap;
}
[data-design="b"] .cm-hero__rail {
  position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  border-top: 1px solid var(--cm-rule);
  background: var(--cm-ticket);
  display: flex; gap: 24px; align-items: center;
  padding-inline: clamp(20px, 5vw, 48px);
}
[data-design="b"] .cm-hero__rail i {
  width: 20px; height: 32px; border-radius: 4px 4px 2px 2px;
  background: var(--cm-machine); opacity: 0.22;
  border-top: 6px solid var(--cm-brass);
}
[data-design="b"] .cm-hero__content {
  position: relative; z-index: 5; width: 100%;
  max-width: 1320px; margin-inline: auto;
  padding: var(--cm-floor) clamp(20px, 5vw, 48px) calc(var(--cm-floor) + 56px);
}
[data-design="b"] .cm-hero__title {
  font-family: "Chivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900; font-size: var(--cm-size-h1); line-height: 1.1;
  color: var(--cm-ink); margin: 0 0 var(--cm-pour); max-width: 17ch;
  text-wrap: balance; opacity: 1;
}
[data-design="b"] .cm-hero__subtitle {
  font-size: var(--cm-size-lead); line-height: 1.5; color: var(--cm-ink);
  margin: 0 0 var(--cm-shot); max-width: 44ch; opacity: 1;
}
[data-design="b"] .cm-hero__subtitle:empty { display: none; }
[data-design="b"] .cm-hero__proof {
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: var(--cm-size-caption); line-height: 1.6; color: var(--cm-muted);
  margin: 0 0 var(--cm-bench); padding-top: var(--cm-shot);
  border-top: 1px solid var(--cm-rule); max-width: 60ch; opacity: 1;
}
[data-design="b"] .cm-hero__proof:empty { display: none; border: 0; }
[data-design="b"] .cm-hero .cm-cta { opacity: 1; }
@media (max-width: 767px) {
  [data-design="b"] .cm-hero { min-height: 92vh; }
  [data-design="b"] .cm-hero__well {
    right: -30%; top: 30%; width: 76vw; opacity: 0;
    animation-name: cm-well-settle-mobile;
  }
  @keyframes cm-well-settle-mobile { to { opacity: 0.3; scale: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .cm-hero__well { animation: none; opacity: 0.94; scale: 1; }
  [data-design="b"] .cm-hero__stir { animation: none; transform: rotate(40deg); }
}

/* ---------- 4. Formula rail (services, mid-page ambient) ---------- */
[data-design="b"] .cm-formula {
  padding-block: var(--cm-floor);
  background: var(--cm-machine);
}
@media (min-width: 768px) {
  [data-design="b"] .cm-formula { padding-block: var(--cm-aisle); }
}
[data-design="b"] .cm-formula__inner {
  max-width: 1320px; margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px); position: relative;
}
[data-design="b"] .cm-formula__title {
  font-family: "Chivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900; font-size: var(--cm-size-h2); color: var(--cm-counter);
  margin: 0 0 var(--cm-counterGap);
}
[data-design="b"] .cm-formula__rail {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--cm-bench);
  align-items: flex-end;
}
[data-design="b"] .cm-formula__item {
  display: grid; justify-items: center; gap: 12px;
}
[data-design="b"] .cm-formula__tube {
  width: 20px; height: 120px; border-radius: var(--cm-r-can);
  background: rgba(246, 243, 236, 0.10);
  box-shadow: inset 0 0 0 1px rgba(246, 243, 236, 0.22);
  overflow: hidden; display: block; position: relative;
}
[data-design="b"] .cm-formula__fill {
  position: absolute; inset: 0; border-radius: var(--cm-r-can);
  background: linear-gradient(0deg, var(--cm-mix) 0 88%, var(--cm-mix-wet) 88%);
  transform: scaleY(0); transform-origin: bottom;
  transition: background-color var(--cm-true) var(--cm-ease-settle);
}
[data-design="b"] .cm-formula.is-charged .cm-formula__fill {
  transform: scaleY(var(--cm-level, 0.5));
  transition: transform 700ms var(--cm-ease-machine),
              background-color var(--cm-true) var(--cm-ease-settle);
  transition-delay: calc(var(--cm-i, 0) * 140ms), 0ms;
}
[data-design="b"] .cm-formula__label {
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: var(--cm-size-caption); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cm-counter); opacity: 0.75;
}
[data-design="b"] .cm-toyShaker {
  position: absolute; right: clamp(20px, 5vw, 48px); bottom: -8px;
  width: 44px; height: 44px; padding: 10px;
  background: none; border: 0; cursor: pointer;
}
[data-design="b"] .cm-toyShaker::before {
  content: ""; display: block; width: 100%; height: 100%;
  border-radius: 6px 6px 3px 3px;
  background: var(--cm-machine);
  box-shadow: inset 0 0 0 2px var(--cm-brass);
}
[data-design="b"] .cm-toyShaker.is-shaking::before {
  animation: cm-rumble 0.5s var(--cm-ease-machine);
}
@keyframes cm-rumble {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-1.5px, 1px) rotate(-2deg); }
  40% { transform: translate(1.5px, -1px) rotate(2deg); }
  60% { transform: translate(-1px, -1px) rotate(-1.5deg); }
  80% { transform: translate(1px, 1px) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .cm-formula__fill,
  [data-design="b"] .cm-formula.is-charged .cm-formula__fill {
    transform: scaleY(var(--cm-level, 0.5)); transition: none;
  }
  [data-design="b"] .cm-toyShaker.is-shaking::before { animation: none; }
}

/* ---------- 5. Funnel (Tint Dispenser, the tactile artifact) ---------- */
[data-design="b"] .cm-funnel {
  padding-block: var(--cm-floor); background: var(--cm-counter);
}
@media (min-width: 768px) {
  [data-design="b"] .cm-funnel { padding-block: var(--cm-aisle); }
}
[data-design="b"] .cm-funnel__inner {
  max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px);
}
[data-design="b"] .cm-funnel__head {
  display: flex; align-items: center; gap: var(--cm-bench);
  margin-bottom: var(--cm-bench);
}
[data-design="b"] .cm-funnel__well {
  position: relative; flex: none; width: 88px; height: 88px;
  border-radius: var(--cm-r-can); background: var(--cm-mix);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18), var(--cm-shadow);
  transition: background-color var(--cm-true) var(--cm-ease-settle);
}
[data-design="b"] .cm-funnel__ripple {
  position: absolute; inset: 0; border-radius: var(--cm-r-can);
  box-shadow: inset 0 0 0 3px var(--cm-mix-wet);
  opacity: 0; transform: scale(0.6);
}
[data-design="b"] .cm-funnel__ripple.is-rippling {
  animation: cm-ripple 600ms var(--cm-ease-settle);
}
@keyframes cm-ripple {
  0%   { opacity: 0.9; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1); }
}
[data-design="b"] .cm-funnel__dropBead {
  position: absolute; left: 50%; top: -36px; width: 10px; height: 10px;
  margin-left: -5px; border-radius: var(--cm-r-can);
  background: var(--cm-mix-wet); opacity: 0;
}
[data-design="b"] .cm-funnel__dropBead.is-falling {
  animation: cm-dose-fall 420ms var(--cm-ease-drop);
}
@keyframes cm-dose-fall {
  0%   { opacity: 1; transform: translateY(0) scale(0.7); }
  85%  { opacity: 1; transform: translateY(66px) scale(1); }
  100% { opacity: 0; transform: translateY(72px) scale(0.4); }
}
[data-design="b"] .cm-funnel__title {
  font-family: "Chivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900; font-size: var(--cm-size-h2); color: var(--cm-ink);
  margin: 0 0 var(--cm-grain);
}
[data-design="b"] .cm-funnel__readout {
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: var(--cm-size-caption); letter-spacing: 0.06em;
  color: var(--cm-muted); margin: 0;
}
[data-design="b"] .cm-funnel__ports {
  display: flex; gap: 8px; margin-bottom: var(--cm-bench);
}
[data-design="b"] .cm-funnel__port {
  width: 14px; height: 14px; border-radius: var(--cm-r-can);
  box-shadow: inset 0 0 0 1px var(--cm-rule); background: var(--cm-ticket);
  position: relative; overflow: hidden;
}
[data-design="b"] .cm-funnel__port::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--cm-r-can);
  background: var(--cm-mix); transform: scale(0);
  transition: background-color var(--cm-true) var(--cm-ease-settle);
}
[data-design="b"] .cm-funnel__port.is-dosed::after {
  transform: scale(1);
  transition: transform var(--cm-click) var(--cm-ease-machine),
              background-color var(--cm-true) var(--cm-ease-settle);
}
[data-design="b"] .cm-funnel__carriage { position: relative; }
[data-design="b"] .cm-dstep { border: 0; padding: 0; margin: 0; }
[data-design="b"] .cm-dstep[hidden] { display: none; }
[data-design="b"] .cm-dstep.is-exiting {
  position: absolute; inset: 0; pointer-events: none;
  animation: cm-index-out var(--cm-index) var(--cm-ease-machine) forwards;
}
[data-design="b"] .cm-dstep.is-entering {
  animation: cm-index-in var(--cm-index) var(--cm-ease-machine);
}
@keyframes cm-index-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(-24px); }
}
@keyframes cm-index-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
[data-design="b"] .cm-dstep__q {
  font-size: var(--cm-size-lead); font-weight: 700; color: var(--cm-ink);
  padding: 0; margin-bottom: 24px;
}
[data-design="b"] .cm-dstep__cans {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
[data-design="b"] .cm-dose {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 56px; padding: 16px 20px; text-align: left; cursor: pointer;
  background: var(--cm-ticket); color: var(--cm-ink);
  border: 0; border-radius: var(--cm-r-ticket);
  box-shadow: var(--cm-shadow), inset 0 0 0 1px var(--cm-rule);
  font-family: "Chivo", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--cm-size-body); font-weight: 500;
  touch-action: manipulation; opacity: 1;
  transition: transform var(--cm-click) var(--cm-ease-machine),
              box-shadow var(--cm-click) var(--cm-ease-machine);
}
[data-design="b"] .cm-dose__dot {
  flex: none; width: 12px; height: 12px; border-radius: var(--cm-r-can);
  background: var(--cm-mix); opacity: 0.55;
  transition: transform var(--cm-click) var(--cm-ease-machine),
              opacity var(--cm-click) var(--cm-ease-machine),
              background-color var(--cm-true) var(--cm-ease-settle);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .cm-dose:hover .cm-dose__dot { transform: scale(1.15); opacity: 1; }
}
[data-design="b"] .cm-dose:focus-visible {
  outline: 2px solid var(--cm-mix); outline-offset: 2px;
}
[data-design="b"] .cm-dose:active { transform: translateY(1px); }
[data-design="b"] .cm-dose.is-dosed {
  box-shadow: var(--cm-shadow), inset 0 0 0 2px var(--cm-mix);
  transform: translateY(1px);
}
[data-design="b"] .cm-dose.is-dosed .cm-dose__dot { opacity: 1; transform: scale(1.2); }
[data-design="b"] .cm-field { margin-bottom: 16px; max-width: 480px; }
[data-design="b"] .cm-field__label {
  display: block; font-family: "Courier Prime", "Courier New", monospace;
  font-size: var(--cm-size-caption); color: var(--cm-muted); margin-bottom: 4px;
}
[data-design="b"] .cm-field__input {
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 12px;
  background: var(--cm-ticket); border: 0;
  border-bottom: 1px solid var(--cm-rule);
  border-radius: var(--cm-r-ticket) var(--cm-r-ticket) 0 0;
  font: inherit; color: var(--cm-ink);
}
[data-design="b"] .cm-field__input:focus {
  outline: none; border-bottom: 2px solid var(--cm-mix);
}
[data-design="b"] .cm-funnel__error {
  color: var(--cm-critical); font-size: var(--cm-size-caption);
  font-family: "Courier Prime", "Courier New", monospace;
}
[data-design="b"] .cm-funnel__submit { margin-top: 8px; }
[data-design="b"] .cm-funnel__doneTitle {
  font-size: var(--cm-size-h3); font-weight: 900; color: var(--cm-success);
  margin: 0 0 8px;
}
[data-design="b"] .cm-funnel__doneBody {
  font-size: var(--cm-size-body); line-height: 1.6; color: var(--cm-ink);
  margin: 0; max-width: 52ch;
}
[data-design="b"] .cm-funnel__note {
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: var(--cm-size-caption); line-height: 1.6; color: var(--cm-muted);
  border-top: 1px solid var(--cm-rule); padding-top: 16px;
  margin-top: var(--cm-bench); max-width: 65ch;
}
[data-design="b"] .cm-funnel__note:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .cm-dstep.is-exiting,
  [data-design="b"] .cm-dstep.is-entering { animation: none; }
  [data-design="b"] .cm-dstep.is-exiting { opacity: 0; }
  [data-design="b"] .cm-funnel__dropBead.is-falling,
  [data-design="b"] .cm-funnel__ripple.is-rippling { animation: none; }
  [data-design="b"] .cm-dose, [data-design="b"] .cm-dose__dot,
  [data-design="b"] .cm-funnel__port.is-dosed::after { transition: background-color var(--cm-true) var(--cm-ease-settle); }
}

/* ---------- 6. Pointer (fill line, between hero and funnel) ---------- */
[data-design="b"] .cm-pointer {
  display: grid; justify-items: center; gap: 8px;
  padding-block: var(--cm-bench);
  background: var(--cm-counter);
  opacity: 1;
}
[data-design="b"] .cm-pointer__tube {
  width: 16px; height: 72px; border-radius: var(--cm-r-can);
  box-shadow: inset 0 0 0 1px var(--cm-rule);
  background: var(--cm-ticket);
  overflow: hidden; display: block; position: relative;
}
[data-design="b"] .cm-pointer__pour {
  position: absolute; inset: 0; border-radius: var(--cm-r-can);
  background: linear-gradient(180deg, var(--cm-mix-wet), var(--cm-mix) 30%);
  clip-path: inset(0 0 100% 0);
  animation: cm-pour 5.5s var(--cm-ease-settle) infinite;
  transition: background-color var(--cm-true) var(--cm-ease-settle);
}
@keyframes cm-pour {
  0%   { clip-path: inset(0 0 100% 0); opacity: 1; }
  36%  { clip-path: inset(0 0 0% 0); opacity: 1; }
  74%  { clip-path: inset(0 0 0% 0); opacity: 1; }
  92%  { clip-path: inset(0 0 0% 0); opacity: 0; }
  100% { clip-path: inset(0 0 100% 0); opacity: 0; }
}
[data-design="b"] .cm-pointer__label {
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: var(--cm-size-caption); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--cm-muted);
  max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  opacity: 1;
}
[data-design="b"] .cm-pointer__label:empty { display: none; }
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .cm-pointer__pour {
    animation: none; clip-path: inset(0 0 0 0); opacity: 1;
  }
}

/* ---------- 7. Scroll choreography (hero -> content handoff) ---------- */
@supports (animation-timeline: view()) {
  [data-design="b"] .cm-hero__well {
    animation-name: cm-well-settle, cm-well-lift;
    animation-duration: 0.9s, auto;
    animation-timing-function: var(--cm-ease-settle), linear;
    animation-delay: 0.1s, 0s;
    animation-fill-mode: forwards, both;
    animation-timeline: auto, view();
    animation-range: normal, exit 0% exit 100%;
  }
  @keyframes cm-well-lift {
    to { transform: translateY(calc(-50% - 56px)); opacity: 0.35; }
  }
  [data-design="b"] .cm-handoff__title {
    animation: cm-handoff-in both var(--cm-ease-machine);
    animation-timeline: view();
    animation-range: entry 10% entry 45%;
  }
  [data-design="b"] .cm-handoff__gaugeFill {
    animation: cm-handoff-fill both linear;
    animation-timeline: view();
    animation-range: entry 15% entry 70%;
  }
}
@keyframes cm-handoff-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cm-handoff-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
[data-design="b"] .cm-handoff {
  padding-block: var(--cm-floor) var(--cm-pour);
  background: var(--cm-counter);
}
@media (min-width: 768px) {
  [data-design="b"] .cm-handoff { padding-block: var(--cm-aisle) var(--cm-bench); }
}
[data-design="b"] .cm-handoff__inner {
  max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px);
}
[data-design="b"] .cm-handoff__title {
  font-family: "Chivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900; font-size: var(--cm-size-h2); color: var(--cm-ink);
  margin: 0 0 var(--cm-pour);
}
[data-design="b"] .cm-handoff__gauge {
  display: block; width: min(320px, 60%); height: 8px;
  border-radius: var(--cm-r-can);
  box-shadow: inset 0 0 0 1px var(--cm-rule); background: var(--cm-ticket);
  overflow: hidden;
}
[data-design="b"] .cm-handoff__gaugeFill {
  display: block; height: 100%; border-radius: var(--cm-r-can);
  background: var(--cm-mix);
  transform-origin: left; transform: scaleX(1);
  transition: background-color var(--cm-true) var(--cm-ease-settle);
}
[data-design="b"] .cm-handoff.is-drawn .cm-handoff__gaugeFill {
  transform: scaleX(1);
}
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .cm-hero__well { animation: none; opacity: 0.94; transform: translateY(-50%); }
  [data-design="b"] .cm-handoff__title,
  [data-design="b"] .cm-handoff__gaugeFill { animation: none; opacity: 1; transform: none; }
  [data-design="b"] .cm-handoff__gaugeFill { transform: scaleX(1); }
}

/* ---------- No-photo fallback (poured-swatch treatment) ---------- */
[data-design="b"] .cm-noPhoto {
  display: grid; place-items: center;
  aspect-ratio: 4 / 3; width: 100%;
  background: var(--cm-ticket);
  border-radius: var(--cm-r-ticket);
  box-shadow: inset 0 0 0 1px var(--cm-rule);
  position: relative;
}
[data-design="b"] .cm-noPhoto__well {
  width: 34%; aspect-ratio: 1; border-radius: var(--cm-r-can);
  background: var(--cm-mix);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.18), var(--cm-shadow);
  transition: background-color var(--cm-true) var(--cm-ease-settle);
}

/* ---------- Ticket / pair / chit ---------- */
[data-design="b"] .cm-ticket {
  background: var(--cm-ticket);
  box-shadow: inset 0 0 0 1px var(--cm-rule);
  border-radius: var(--cm-r-ticket);
  padding: var(--cm-bench);
}
[data-design="b"] .cm-ticket--job {
  display: flex; gap: var(--cm-bench); align-items: flex-start; flex-wrap: wrap;
}
[data-design="b"] .cm-chit {
  display: inline-block; font-family: "Courier Prime", "Courier New", monospace;
  font-size: var(--cm-size-caption); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--cm-r-ticket);
  box-shadow: inset 0 0 0 1px var(--cm-brass); color: var(--cm-muted);
  margin-top: var(--cm-shot);
}

/* ---------- Work / Before-After section ---------- */
[data-design="b"] .cm-work {
  padding-block: var(--cm-floor); background: var(--cm-counter);
}
@media (min-width: 768px) {
  [data-design="b"] .cm-work { padding-block: var(--cm-aisle); }
}
[data-design="b"] .cm-work__inner {
  max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px);
}
[data-design="b"] .cm-work__title {
  font-family: "Chivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900; font-size: var(--cm-size-h2); color: var(--cm-ink);
  margin: 0 0 var(--cm-shot);
}
[data-design="b"] .cm-work__intro {
  max-width: 68ch; color: var(--cm-muted); margin: 0 0 var(--cm-counterGap);
}
[data-design="b"] .cm-work__grid {
  display: grid; gap: var(--cm-bench); margin-bottom: var(--cm-counterGap);
}
[data-design="b"] .cm-pair {
  display: grid; grid-template-columns: 1fr; gap: var(--cm-bench);
  position: relative;
}
@media (min-width: 768px) {
  [data-design="b"] .cm-pair { grid-template-columns: 1fr 1fr; }
  [data-design="b"] .cm-pair::after {
    content: ""; position: absolute; left: 50%; top: 0; bottom: 0;
    width: 0; border-left: 1px dashed var(--cm-rule);
    transform: translateX(-50%);
  }
}
[data-design="b"] .cm-pair__side { display: grid; gap: 12px; }
[data-design="b"] .cm-pair__cap {
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: var(--cm-size-caption); color: var(--cm-muted); margin: 0;
}

/* ---------- Process ---------- */
[data-design="b"] .cm-process {
  padding-block: var(--cm-floor); background: var(--cm-ticket);
}
@media (min-width: 768px) {
  [data-design="b"] .cm-process { padding-block: var(--cm-aisle); }
}
[data-design="b"] .cm-process__inner {
  max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px);
}
[data-design="b"] .cm-process__title {
  font-family: "Chivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900; font-size: var(--cm-size-h2); color: var(--cm-ink);
  margin: 0 0 var(--cm-shot);
}
[data-design="b"] .cm-process__intro {
  max-width: 68ch; color: var(--cm-ink); margin: 0 0 var(--cm-counterGap);
}
[data-design="b"] .cm-process__list {
  list-style: none; display: grid; gap: var(--cm-pour);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
[data-design="b"] .cm-process__step {
  display: flex; gap: var(--cm-shot); align-items: baseline;
  background: var(--cm-counter); padding: var(--cm-pour);
  border-radius: var(--cm-r-ticket); box-shadow: inset 0 0 0 1px var(--cm-rule);
}
[data-design="b"] .cm-process__num {
  font-family: "Courier Prime", "Courier New", monospace;
  color: var(--cm-brass); font-weight: 700;
}

/* ---------- About ---------- */
[data-design="b"] .cm-about {
  padding-block: var(--cm-floor); background: var(--cm-counter);
}
@media (min-width: 768px) {
  [data-design="b"] .cm-about { padding-block: var(--cm-aisle); }
}
[data-design="b"] .cm-about__inner {
  max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px);
}
[data-design="b"] .cm-about__title {
  font-family: "Chivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900; font-size: var(--cm-size-h2); color: var(--cm-ink);
  margin: 0 0 var(--cm-counterGap);
}
[data-design="b"] .cm-about__photo { max-width: 220px; }
[data-design="b"] .cm-about__body { flex: 1; min-width: 240px; }
[data-design="b"] .cm-about__text { margin: 0; max-width: 68ch; }

/* ---------- Service area ---------- */
[data-design="b"] .cm-area {
  padding-block: var(--cm-floor); background: var(--cm-ticket);
}
@media (min-width: 768px) {
  [data-design="b"] .cm-area { padding-block: var(--cm-aisle); }
}
[data-design="b"] .cm-area__inner {
  max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px);
}
[data-design="b"] .cm-area__title {
  font-family: "Chivo", "Helvetica Neue", Arial, sans-serif;
  font-weight: 900; font-size: var(--cm-size-h2); color: var(--cm-ink);
  margin: 0 0 var(--cm-shot);
}
[data-design="b"] .cm-area__list {
  list-style: none; margin: 0 0 var(--cm-bench);
  font-family: "Courier Prime", "Courier New", monospace;
  color: var(--cm-muted); display: grid; gap: 4px;
}

/* ---------- Footer ---------- */
[data-design="b"] .cm-footer {
  background: var(--cm-machine); padding-block: var(--cm-bench);
}
[data-design="b"] .cm-footer__inner {
  max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px);
  font-family: "Courier Prime", "Courier New", monospace;
  font-size: var(--cm-size-caption); color: var(--cm-counter);
  display: grid; gap: 8px;
}
[data-design="b"] .cm-footer__line { margin: 0; opacity: 0.85; }
[data-design="b"] .cm-footer__link { color: var(--cm-counter); text-decoration: underline; }
[data-design="b"] .cm-footer__copyright { opacity: 0.55; }

/* ============================================================
   Mobile safety (append at bottom — scoped to .dq-design only)
   ============================================================ */
[data-design="b"].dq-design,
[data-design="b"] .dq-design { max-width: 100%; overflow-x: clip; }
[data-design="b"].dq-design * { min-width: 0; }
[data-design="b"].dq-design img,
[data-design="b"].dq-design svg:not([data-keep-size]) { max-width: 100%; height: auto; }

/* Phase-3.4 hero visibility floor (forge_assemble) */
[data-design="b"] [data-mf-role="hero"] :is(h1,h2,p,.headline,.subtitle,.proof,[class*="headline"],[class*="subtitle"],[class*="proof"]),
[data-design="b"] [data-mf-role="cta"] { opacity: 1 !important; }