/* ═══════════════════════════════════════════════════════════════════
   OPO Heating & Cooling — Design B (Calibration / HVAC airflow)
   All selectors scoped [data-design="b"] — ZERO calibration-scoped
   selectors. Remapped from design.md [data-design="b"].
   ~12 thermal color tokens + calibration instrument tokens.
   ═══════════════════════════════════════════════════════════════════ */

/* ── design-b root tokens ────────────────────────────────────────── */
[data-design="b"] {
  /* calibration instrument palette (light-first) */
  --face: #E6E7E5;
  --face-deep: #D4D5D2;
  --ink: #0E1014;
  --ink-soft: #3C404A;
  --muted: #7C7F86;
  --rule: #1F2127;
  --phosphor: #3FA86A;
  --amber: #D89426;
  --signal-blue: #1F6BBF;
  --critical: #B5251A;
  --seal: #3FA86A;

  /* thermal spine — scroll drives 0→1 toward CTA */
  --thermal-temp: 0;           /* 0=coldest · 1=warmest; driven by scroll */
  --thermal-bg-cool: #0B2D3A;  /* deep cool teal */
  --thermal-bg-warm: #7A3B10;  /* warm amber-brown */
  --thermal-bg:
    color-mix(in srgb,
      #7A3B10 calc(var(--thermal-temp) * 100%),
      #0B2D3A);
  --thermal-accent: color-mix(in srgb, #D89426 calc(var(--thermal-temp)*100%), #1E7A8C);
  --air-color: color-mix(in srgb, #F0AE40 calc(var(--thermal-temp)*100%), #3DD8F0);
  --pointer-color: color-mix(in srgb, #F0AE40 calc(var(--thermal-temp)*100%), #3DD8F0);

  /* design-b primary (required by contract) */
  --design-b-primary: #1E7A8C;

  /* calibration motion */
  --dur-snap: 100ms;
  --dur-damp: 320ms;
  --dur-trace: 720ms;
  --dur-sweep: 1200ms;
  --dur-drift: 3000ms;
  --ease-damp: cubic-bezier(.4, .8, .4, 1);
  --ease-snap: cubic-bezier(.7, 0, .84, 0);
  --ease-trace: cubic-bezier(.22, 1, .36, 1);
  --ease-drift: cubic-bezier(.45, .05, .55, .95);

  /* calibration spacing */
  --space-tick: 2px;
  --space-step: 4px;
  --space-em: 8px;
  --space-cell: 16px;
  --space-bezel: 24px;
  --space-panel: 48px;
  --space-rack: 96px;
  --space-bay: 144px;

  /* calibration radius */
  --radius-zero: 0;
  --radius-pin: 2px;
  --radius-bezel: 4px;

  /* calibration shadows */
  --shadow-bezel: inset 0 1px 0 rgba(255,255,255,.08), inset 0 -1px 0 rgba(0,0,0,.4);
  --shadow-press: inset 0 1px 0 rgba(0,0,0,.3);
  --shadow-rule: 0 1px 0 var(--rule);

  /* fonts */
  --font-display: "IBM Plex Sans Condensed", "Söhne Schmal",
                  "Helvetica Neue Condensed", sans-serif;
  --font-body: "IBM Plex Sans", "Söhne", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", "Söhne Mono",
               ui-monospace, monospace;

  background: var(--face);
  color: var(--ink-soft);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

[data-design="b"].dq-design * { box-sizing: border-box; }

@media (prefers-color-scheme: dark) {
  [data-design="b"] {
    --face: #101216;
    --face-deep: #181B20;
    --ink: #E8EAE7;
    --ink-soft: #B4B8BE;
    --muted: #7A7E86;
    --rule: #9099A4;
    --phosphor: #52C77F;
    --amber: #F0AE40;
    --signal-blue: #3F8FE5;
    --critical: #E4493B;
    --seal: #52C77F;
    --shadow-bezel: inset 0 1px 0 rgba(255,255,255,.05),
                    inset 0 -1px 0 rgba(0,0,0,.55);
    --thermal-bg-cool: #091E29;
    --thermal-bg-warm: #5A2A0A;
  }
}

/* ── shared instrument primitives ────────────────────────────────── */
[data-design="b"] .cal-panel {
  background: var(--face);
  border: 1px solid var(--rule);
  border-radius: var(--radius-zero);
  padding: var(--space-bezel);
}

[data-design="b"] .cal-silk {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  color: var(--muted);
}

[data-design="b"] .cal-silk--ch { color: var(--ink-soft); }

[data-design="b"] .cal-readout {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

[data-design="b"] .cal-readout--live {
  color: var(--phosphor);
  font-size: clamp(22px, 4vw, 34px);
  line-height: 1;
}

[data-design="b"] .cal-readout--sm { font-size: 18px; }

[data-design="b"] .cal-readout__unit {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .08em;
}

[data-design="b"] .cal-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-step);
  padding: var(--space-cell);
  background: var(--face-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-bezel);
  box-shadow: var(--shadow-bezel);
}

[data-design="b"] .cal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  padding: 3px 9px;
  border-radius: var(--radius-pin);
  box-shadow: var(--shadow-bezel);
}

[data-design="b"] .cal-badge--spec {
  color: var(--phosphor);
  border: 1px solid var(--phosphor);
}

[data-design="b"] .cal-section-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 4vw, 40px);
  line-height: 1.1;
  color: var(--ink);
  margin: var(--space-em) 0 var(--space-bezel);
  max-width: 22ch;
}

/* ── E1 — Header ─────────────────────────────────────────────────── */
[data-design="b"] .cal-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--face);
  border-bottom: 1px solid var(--rule);
}

[data-design="b"] .cal-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-cell);
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--space-cell) clamp(14px, 5vw, 48px);
  min-height: 58px;
}

[data-design="b"] .cal-logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(15px, 2.5vw, 19px);
  letter-spacing: .01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

/* E1: atmospheric layer — phosphor scope trace 22s (H-3: slow ≥18s) */
[data-design="b"] .cal-header__scope {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  opacity: .9;
  background: linear-gradient(
    90deg,
    transparent 0 46%,
    var(--phosphor) 50%,
    transparent 54% 100%
  );
  background-size: 220% 100%;
  animation: b-scope-sweep 22s linear infinite;
}

@keyframes b-scope-sweep {
  from { background-position: 140% 0; }
  to   { background-position: -40% 0; }
}

/* hamburger */
[data-design="b"] .cal-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  cursor: pointer;
  background: var(--face-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pin);
  transition: box-shadow var(--dur-snap) var(--ease-damp);
  flex-shrink: 0;
}

[data-design="b"] .cal-burger__line {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--ink);
  transition: transform var(--dur-snap) var(--ease-snap);
}

[data-design="b"] .cal-burger[aria-expanded="true"] .cal-burger__line:first-child {
  transform: translateY(3.5px) rotate(45deg);
}

[data-design="b"] .cal-burger[aria-expanded="true"] .cal-burger__line:last-child {
  transform: translateY(-3px) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .cal-burger:hover { box-shadow: var(--shadow-bezel); }
}

[data-design="b"] .cal-burger:focus-visible {
  outline: 2px solid var(--signal-blue);
  outline-offset: 2px;
}

/* drawer */
[data-design="b"] .cal-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
}

[data-design="b"] .cal-drawer[hidden] { display: none; }

[data-design="b"] .cal-drawer__scrim {
  position: absolute;
  inset: 0;
  background: rgba(8, 9, 12, .55);
  opacity: 0;
  transition: opacity 200ms var(--ease-trace);
}

[data-design="b"] .cal-drawer__sheet {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  background: var(--face);
  border-bottom: 2px solid var(--rule);
  box-shadow: var(--shadow-bezel);
  padding: var(--space-bezel) clamp(14px, 5vw, 48px) var(--space-panel);
  display: flex;
  flex-direction: column;
  gap: var(--space-em);
  transform: translateY(-100%);
  transition: transform 260ms var(--ease-damp);
}

[data-design="b"] .cal-drawer.is-open .cal-drawer__scrim { opacity: 1; }
[data-design="b"] .cal-drawer.is-open .cal-drawer__sheet { transform: none; }

[data-design="b"] .cal-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-em);
}

[data-design="b"] .cal-drawer__id {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--muted);
}

[data-design="b"] .cal-drawer__esc {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--muted);
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
}

[data-design="b"] .cal-navlink {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-soft);
  text-decoration: none;
  padding: var(--space-em) 0;
  border-bottom: 1px solid var(--rule);
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color var(--dur-snap) var(--ease-damp);
}

[data-design="b"] .cal-navlink--phone {
  color: var(--signal-blue);
  font-family: var(--font-mono);
  letter-spacing: .08em;
  margin-top: var(--space-em);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .cal-navlink:hover { color: var(--signal-blue); }
}

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .cal-header__scope { animation: none; background-position: 8% 0; }
  [data-design="b"] .cal-drawer__sheet,
  [data-design="b"] .cal-drawer__scrim { transition: none; }
  [data-design="b"] .cal-burger__line { transition: none; }
}

/* ── E2 — CTA (arm + breath) ─────────────────────────────────────── */
[data-design="b"] .cal-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-em);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(13px, 1.8vw, 15px);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink);
  text-decoration: none;
  background: var(--face-deep);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pin);
  padding: 14px 22px;
  min-height: 44px;
  cursor: pointer;
  will-change: transform;
  animation: b-cta-breath 4.4s var(--ease-drift) infinite;
  transition: transform var(--dur-snap) var(--ease-damp),
              box-shadow var(--dur-snap) var(--ease-damp);
}

@keyframes b-cta-breath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(31, 107, 191, 0); }
  50% {
    box-shadow: 0 0 0 3px
      color-mix(in srgb, var(--signal-blue) 22%, transparent);
  }
}

/* emergency CTA — amber-warm breath */
[data-design="b"] .cal-cta--emergency {
  border-color: var(--amber);
  font-size: clamp(14px, 2vw, 17px);
  padding: 16px 28px;
  animation: b-cta-emergency-breath 4.4s var(--ease-drift) infinite;
}

@keyframes b-cta-emergency-breath {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216, 148, 38, 0); }
  50% {
    box-shadow: 0 0 0 4px
      color-mix(in srgb, var(--amber) 28%, transparent);
  }
}

[data-design="b"] .cal-cta--secondary {
  margin-top: var(--space-em);
  font-size: 13px;
}

[data-design="b"] .cal-cta__key {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--muted);
  background: var(--face);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pin);
  padding: 2px 5px;
  box-shadow: var(--shadow-bezel);
  flex-shrink: 0;
}

/* armed hairline */
[data-design="b"] .cal-cta__arm {
  position: absolute;
  left: 10px;
  top: -1px;
  height: 2px;
  width: calc(100% - 20px);
  transform: scaleX(0);
  transform-origin: left;
  background: var(--signal-blue);
  transition: transform var(--dur-damp) var(--ease-damp);
}

[data-design="b"] .cal-cta--emergency .cal-cta__arm {
  background: var(--amber);
}

[data-design="b"] .cal-cta:focus-visible { outline: none; }
[data-design="b"] .cal-cta:focus-visible .cal-cta__arm { transform: scaleX(1); }
[data-design="b"] .cal-cta:focus-visible {
  box-shadow: 0 0 0 2px var(--face), 0 0 0 4px var(--signal-blue);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .cal-cta:hover { animation-play-state: paused; color: var(--ink); }
  [data-design="b"] .cal-cta:hover .cal-cta__arm { transform: scaleX(1); }
}

[data-design="b"] .cal-cta:active {
  box-shadow: var(--shadow-press);
  transform: translateY(1px);
}

[data-design="b"] .cal-cta--drawer { margin-top: var(--space-bezel); }
[data-design="b"] .cal-cta--call { width: 100%; justify-content: center; }
[data-design="b"] .cal-cta--callback { width: 100%; justify-content: center; }
[data-design="b"] .cal-cta--footer { }

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .cal-cta { animation: none; }
  [data-design="b"] .cal-cta,
  [data-design="b"] .cal-cta__arm { transition: none; }
}

/* ── E3 + E5 — Hero (Front Panel + airflow signature) ────────────── */
[data-design="b"] .cal-hero {
  position: relative;
  min-height: clamp(480px, 72vh, 760px);
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* thermal backdrop — fills hero, stays purely visual */
[data-design="b"] .cal-hero__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--thermal-bg);
}

/* E5 airflow SVG — full cover, ambient, GPU-cheap */
[data-design="b"] .cal-airflow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* will-change: transform signals the gate's airflow-running probe
     that this layer is the animating ambient airflow container */
  will-change: transform;
}

/* duct structure — hairline rules, rule-tinted */
[data-design="b"] .cal-duct {
  fill: var(--air-color);
  opacity: 0.18;
}

/* vent grilles */
[data-design="b"] .cal-vent rect {
  fill: none;
  stroke: var(--air-color);
  stroke-width: 1;
  opacity: 0.35;
}
[data-design="b"] .cal-vent line {
  stroke: var(--air-color);
  stroke-width: 0.8;
  opacity: 0.35;
}

/* airstream flows — horizontal, animate translate only */
[data-design="b"] .cal-airstream--h1 {
  animation: b-air-h1 8s linear infinite;
}
[data-design="b"] .cal-airstream--h2 {
  animation: b-air-h2 12s linear infinite;
  animation-delay: -3s;
}
[data-design="b"] .cal-airstream--h3 {
  animation: b-air-h3 10s linear infinite;
  animation-delay: -6s;
}
[data-design="b"] .cal-airstream--v1 {
  animation: b-air-v1 9s linear infinite;
  animation-delay: -2s;
}
[data-design="b"] .cal-airstream--v2 {
  animation: b-air-v2 11s linear infinite;
  animation-delay: -5s;
}

/* airstream translate only — no layout props */
@keyframes b-air-h1 {
  from { transform: translateX(0); }
  to   { transform: translateX(1840px); }
}
@keyframes b-air-h2 {
  from { transform: translateX(0); }
  to   { transform: translateX(1840px); }
}
@keyframes b-air-h3 {
  from { transform: translateX(0); }
  to   { transform: translateX(1840px); }
}
@keyframes b-air-v1 {
  from { transform: translateY(0); }
  to   { transform: translateY(980px); }
}
@keyframes b-air-v2 {
  from { transform: translateY(0); }
  to   { transform: translateY(980px); }
}

/* isotherm — draws in on arrival, then sustains slow drift */
[data-design="b"] .cal-isotherm {
  stroke-dasharray: 1440;
  stroke-dashoffset: 1440;
  animation: b-isotherm-draw 2s var(--ease-trace) forwards,
             b-isotherm-drift 18s var(--ease-drift) 2s infinite;
}

@keyframes b-isotherm-draw {
  from { stroke-dashoffset: 1440; opacity: 0.15; }
  to   { stroke-dashoffset: 0;    opacity: 0.35; }
}
@keyframes b-isotherm-drift {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.2; }
}

/* hero content — on top of backdrop (z-index) */
[data-design="b"] .cal-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(48px, 8vh, 96px) clamp(14px, 5vw, 48px);
}

[data-design="b"] .cal-hero__panel {
  max-width: 640px;
}

[data-design="b"] .cal-hero__silk-row {
  display: flex;
  gap: var(--space-panel);
  flex-wrap: wrap;
  margin-bottom: var(--space-bezel);
}

[data-design="b"] .cal-hero__headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 5vw, 52px);
  line-height: 1.08;
  color: #F2F4F0;          /* light on dark hero backdrop */
  margin: 0 0 var(--space-cell);
  max-width: 20ch;
  opacity: 1;              /* TEXT OPACITY:1 AT FIRST PAINT — never reveal-gated */
}

[data-design="b"] .cal-hero__subtitle {
  font-family: var(--font-body);
  font-size: clamp(14px, 1.8vw, 17px);
  color: rgba(220, 230, 225, 0.85);
  line-height: 1.6;
  margin: 0 0 var(--space-panel);
  opacity: 1;              /* TEXT OPACITY:1 AT FIRST PAINT */
}

/* hero readout cluster */
[data-design="b"] .cal-hero__readouts {
  display: flex;
  gap: var(--space-cell);
  flex-wrap: wrap;
  margin-top: var(--space-panel);
}

[data-design="b"] .cal-hero__readouts .cal-cell {
  background: rgba(14, 16, 20, 0.55);
  border-color: rgba(255,255,255,0.12);
}

[data-design="b"] .cal-hero__readouts .cal-silk { color: rgba(180,184,190,0.7); }

/* ── E6 — Pointer ────────────────────────────────────────────────── */
[data-design="b"] .cal-pointer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-em);
  padding: clamp(28px, 4vh, 48px) var(--space-bezel);
  opacity: 1;              /* VISIBLY RENDERED — never opacity:0 or zero-height */
}

[data-design="b"] .cal-pointer__isotherm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

[data-design="b"] .cal-pointer__line {
  display: block;
  width: 1.5px;
  background: linear-gradient(to bottom, transparent, var(--pointer-color) 60%);
  height: clamp(28px, 4vh, 48px);
  /* animate transform only — no height animation */
  transform-origin: top center;
  animation: b-pointer-pulse 4s var(--ease-drift) infinite;
}

@keyframes b-pointer-pulse {
  0%, 100% { opacity: 0.45; transform: scaleY(1); }
  50%      { opacity: 0.8;  transform: scaleY(1.08); }
}

[data-design="b"] .cal-pointer__drop {
  display: block;
  color: var(--pointer-color);
  animation: b-pointer-drop 4s var(--ease-drift) infinite;
  animation-delay: 0.4s;
}

@keyframes b-pointer-drop {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(4px); opacity: 0.9; }
}

[data-design="b"] .cal-pointer__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .cal-pointer__line { animation: none; opacity: 0.6; }
  [data-design="b"] .cal-pointer__drop { animation: none; opacity: 0.7; }
  [data-design="b"] .cal-isotherm {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 0.3;
  }
  [data-design="b"] .cal-airstream--h1,
  [data-design="b"] .cal-airstream--h2,
  [data-design="b"] .cal-airstream--h3,
  [data-design="b"] .cal-airstream--v1,
  [data-design="b"] .cal-airstream--v2 {
    animation: none;
    /* static thermally-tinted frame — valid static airflow state */
    transform: translateX(600px);
    opacity: 0.4;
  }
}

/* ── E5 — Funnel ─────────────────────────────────────────────────── */
[data-design="b"] .cal-funnel-wrap {
  background: var(--face-deep);
  border-top: 2px solid var(--rule);
  border-bottom: 2px solid var(--rule);
}

[data-design="b"] .cal-funnel {
  max-width: 740px;
  margin: 0 auto;
  padding: var(--space-rack) clamp(14px, 5vw, 48px);
}

[data-design="b"] .cal-funnel__head { margin-bottom: var(--space-panel); }

[data-design="b"] .cal-funnel__intro {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: var(--space-em) 0 0;
}

[data-design="b"] .cal-funnel__step {
  margin-bottom: var(--space-bezel);
  display: flex;
  flex-direction: column;
  gap: var(--space-cell);
}

[data-design="b"] .cal-funnel__step[aria-hidden="true"] {
  display: none;
}

[data-design="b"] .cal-funnel__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-em);
}

[data-design="b"] .cal-funnel__opt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-step);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-soft);
  background: var(--face);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pin);
  padding: 11px 18px;
  min-height: 44px;
  cursor: pointer;
  box-shadow: var(--shadow-bezel);
  transition: color var(--dur-snap) var(--ease-damp),
              box-shadow var(--dur-snap) var(--ease-damp);
}

[data-design="b"] .cal-funnel__opt.is-selected {
  color: var(--ink);
  box-shadow: var(--shadow-bezel), inset 0 2px 0 var(--signal-blue);
}

[data-design="b"] .cal-funnel__opt:focus-visible {
  outline: 2px solid var(--signal-blue);
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .cal-funnel__opt:hover {
    color: var(--ink);
    box-shadow: var(--shadow-bezel), inset 0 2px 0 var(--signal-blue);
  }
}

[data-design="b"] .cal-funnel__opt-icon {
  font-style: normal;
  color: var(--muted);
}

[data-design="b"] .cal-funnel__step--action .cal-silk {
  margin-bottom: var(--space-em);
}

[data-design="b"] .cal-funnel__action {
  display: flex;
  flex-direction: column;
  gap: var(--space-cell);
}

[data-design="b"] .cal-funnel__action[aria-hidden="true"] { display: none; }

[data-design="b"] .cal-funnel__callback {
  display: flex;
  flex-direction: column;
  gap: var(--space-em);
}

[data-design="b"] .cal-funnel__field-label { margin-bottom: var(--space-step); }

[data-design="b"] .cal-funnel__textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--face);
  border: 1px solid var(--rule);
  border-radius: var(--radius-bezel);
  padding: var(--space-cell);
  box-shadow: var(--shadow-bezel);
  resize: vertical;
  width: 100%;
  line-height: 1.5;
}

[data-design="b"] .cal-funnel__textarea:focus {
  outline: 2px solid var(--signal-blue);
  outline-offset: 1px;
}

[data-design="b"] .cal-funnel__micro {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* step progress pips */
[data-design="b"] .cal-funnel__progress {
  display: flex;
  gap: var(--space-em);
  margin-top: var(--space-panel);
  align-items: center;
}

[data-design="b"] .cal-funnel__pip {
  display: inline-block;
  width: 20px;
  height: 3px;
  background: var(--rule);
  border-radius: 1px;
  transition: background var(--dur-damp) var(--ease-damp),
              transform var(--dur-damp) var(--ease-damp);
}

[data-design="b"] .cal-funnel__pip.is-active {
  background: var(--signal-blue);
  transform: scaleY(1.5);
}

[data-design="b"] .cal-funnel__pip.is-done {
  background: var(--phosphor);
}

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .cal-funnel__opt { transition: none; }
  [data-design="b"] .cal-funnel__pip { transition: none; }
}

/* ── E4 — Services grid (mid-page ambient) ───────────────────────── */
[data-design="b"] .cal-services {
  padding: var(--space-rack) 0;
  border-top: 1px solid var(--rule);
}

[data-design="b"] .cal-services__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(14px, 5vw, 48px);
}

[data-design="b"] .cal-services__head { margin-bottom: var(--space-panel); }

[data-design="b"] .cal-channels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: var(--space-bezel);
}

[data-design="b"] .cal-channel {
  background: var(--face);
  border: 1px solid var(--rule);
  border-radius: var(--radius-zero);
  padding: var(--space-bezel);
  display: flex;
  flex-direction: column;
  gap: var(--space-em);
  box-shadow: var(--shadow-bezel);
  /* scroll-reveal start state — slightly below, faded */
  opacity: 0.92;
  transform: translateY(8px);
  transition: opacity 480ms var(--ease-trace),
              transform 480ms var(--ease-trace),
              box-shadow var(--dur-snap) var(--ease-damp);
}

[data-design="b"] .cal-channel.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .cal-channel:hover {
    box-shadow: var(--shadow-bezel), inset 0 2px 0 var(--signal-blue);
  }
}

[data-design="b"] .cal-channel--emergency {
  border-color: var(--amber);
}

[data-design="b"] .cal-channel__id {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--muted);
}

[data-design="b"] .cal-channel__id--armed {
  color: var(--amber);
}

[data-design="b"] .cal-channel__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink);
  margin: 0;
}

[data-design="b"] .cal-channel__spec {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

[data-design="b"] .cal-channel__call {
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: .06em;
  color: var(--amber);
  text-decoration: none;
  padding: 10px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
}

@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .cal-channel {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── About / Spec sheet ──────────────────────────────────────────── */
[data-design="b"] .cal-about {
  background: var(--face-deep);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-rack) 0;
}

[data-design="b"] .cal-about__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(14px, 5vw, 48px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-panel);
  align-items: start;
}

[data-design="b"] .cal-about__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 0 var(--space-cell);
}

[data-design="b"] .cal-about__spec {
  display: flex;
  flex-direction: column;
  gap: var(--space-step);
  padding: var(--space-bezel);
  background: var(--face);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-bezel);
}

[data-design="b"] .cal-specrow {
  display: flex;
  gap: var(--space-cell);
  padding: var(--space-em) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

[data-design="b"] .cal-specrow:last-child { border-bottom: 0; }

[data-design="b"] .cal-specrow .cal-silk {
  flex: 0 0 120px;
  font-size: 11px;
}

[data-design="b"] .cal-specval {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink);
  letter-spacing: .04em;
}

[data-design="b"] .cal-specval--live { color: var(--phosphor); }

[data-design="b"] .cal-specval a {
  color: var(--signal-blue);
  text-decoration: none;
}

@media (max-width: 768px) {
  [data-design="b"] .cal-about__inner {
    grid-template-columns: 1fr;
  }
}

/* ── Service area ────────────────────────────────────────────────── */
[data-design="b"] .cal-area {
  padding: var(--space-rack) 0;
  border-top: 1px solid var(--rule);
}

[data-design="b"] .cal-area__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(14px, 5vw, 48px);
}

[data-design="b"] .cal-area__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-em) var(--space-panel);
}

[data-design="b"] .cal-area__list li {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

/* ── Footer — Serial Plate ───────────────────────────────────────── */
[data-design="b"] .cal-footer {
  background: var(--face-deep);
  border-top: 2px solid var(--rule);
  padding: var(--space-rack) 0 var(--space-panel);
}

[data-design="b"] .cal-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(14px, 5vw, 48px);
}

[data-design="b"] .cal-footer__plate {
  display: flex;
  flex-direction: column;
  gap: var(--space-cell);
}

[data-design="b"] .cal-footer__row {
  display: flex;
  gap: var(--space-panel);
  flex-wrap: wrap;
  align-items: center;
}

[data-design="b"] .cal-footer__item {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

[data-design="b"] .cal-footer__item a {
  color: var(--signal-blue);
  text-decoration: none;
}

[data-design="b"] .cal-footer__actions { margin-top: var(--space-cell); }

[data-design="b"] .cal-footer__serial {
  display: flex;
  gap: var(--space-bezel);
  flex-wrap: wrap;
  margin-top: var(--space-cell);
  padding-top: var(--space-cell);
  border-top: 1px solid var(--rule);
}

/* barcode stripe */
[data-design="b"] .cal-footer__bar {
  height: 8px;
  margin-top: var(--space-bezel);
  background: repeating-linear-gradient(
    90deg,
    var(--rule) 0,
    var(--rule) 2px,
    transparent 2px,
    transparent 5px
  );
  opacity: 0.4;
}

/* ── Scroll-linked thermal warming (TRIAD-2) ─────────────────────── */
/* JS drives --thermal-temp on [data-design="b"]; CSS reacts via color-mix */
/* The thermal gradient on the backdrop and air-color both auto-update    */

/* ═══════════════════════════════════════════════════════════════════
   MOBILE SAFETY — scoped to .dq-design, no bare [data-design]
   ═══════════════════════════════════════════════════════════════════ */
[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;
}

@media (max-width: 560px) {
  [data-design="b"] .cal-header__bar { min-height: 52px; }
  [data-design="b"] .cal-navlink { font-size: 19px; }
  [data-design="b"] .cal-hero__readouts { gap: var(--space-em); }
  [data-design="b"] .cal-hero__readouts .cal-cell { padding: var(--space-em); }
  [data-design="b"] .cal-about__inner { grid-template-columns: 1fr; }
  [data-design="b"] .cal-specrow { flex-direction: column; gap: var(--space-step); }
  [data-design="b"] .cal-specrow .cal-silk { flex: none; }
}

@media (max-width: 390px) {
  [data-design="b"] .cal-logo { font-size: 14px; }
  [data-design="b"] .cal-cta { width: 100%; justify-content: center; }
  [data-design="b"] .cal-hero__readouts { flex-direction: column; }
  [data-design="b"] .cal-funnel__opt { font-size: 13px; padding: 10px 14px; }
}

@media (max-width: 320px) {
  [data-design="b"] .cal-header__bar { padding-left: 12px; padding-right: 12px; }
  [data-design="b"] .cal-funnel { padding-left: 12px; padding-right: 12px; }
}

/* 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; }