/* Site B — weathertight design system, remapped [data-design="b"] -> [data-design="b"].
   Trade: gutter (estimator-primary). Tactile artifact: the Run Gauge (adapted from the Hail Gauge). */

[data-design="b"] {
  --design-b-primary: #176A7E;
  --wt-paper: #F4F6F5;
  --wt-liner: #E7ECEA;
  --wt-carbon: #21262B;
  --wt-zinc: #87919A;
  --wt-seal: #176A7E;
  --wt-seal-deep: #0F4B5A;
  --wt-tag: #C2691D;
  --wt-membrane: #171E23;
  --wt-critical: #A93226;
  --wt-success: #3F7A55;
  --wt-hem: 4px; --wt-seam: 8px; --wt-step: 16px; --wt-counter: 24px;
  --wt-shield: 40px; --wt-field: 64px; --wt-eave: 80px; --wt-ridge: 128px;
  --wt-roll: cubic-bezier(0.25, 0.8, 0.25, 1);
  --wt-set: cubic-bezier(0.3, 1.12, 0.35, 1);
  --wt-press: 120ms; --wt-lap-t: 260ms; --wt-beat: 90ms;
  --wt-r-0: 0; --wt-r-1: 3px; --wt-r-2: 6px;
  --wt-dry: 0 1px 0 rgba(33, 38, 43, 0.14);
  --wt-lift: 0 8px 20px -14px rgba(33, 38, 43, 0.5);
  background: var(--wt-paper); color: var(--wt-carbon);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- 1. Header — the triple lap ---------- */
[data-design="b"] .wt-header { position: sticky; top: 0; z-index: 40; background: var(--wt-paper); }
[data-design="b"] .wt-header__bar {
  max-width: 1320px; margin-inline: auto; padding: var(--wt-step) clamp(20px, 5vw, 48px);
  display: flex; align-items: center; justify-content: space-between; min-height: 64px;
}
[data-design="b"] .wt-logo { text-decoration: none; color: var(--wt-carbon); }
[data-design="b"] .wt-logo__mark {
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600; font-size: clamp(1.05rem, 2.6vw, 1.3rem); line-height: 1.15; letter-spacing: -0.015em;
}
[data-design="b"] .wt-laps { display: grid; gap: 2px; }
[data-design="b"] .wt-laps__l {
  height: 1px; background: var(--wt-carbon); opacity: 0.25;
  transform: translateY(-2px);
  animation: wtb-lap-seat 24s var(--wt-roll) infinite;
}
[data-design="b"] .wt-laps__l--2 { animation-delay: 1.2s; background: var(--wt-seal); }
[data-design="b"] .wt-laps__l--3 { animation-delay: 2.4s; }
@keyframes wtb-lap-seat {
  0%   { transform: translateY(-2px); opacity: 0.25; }
  6%   { transform: translateY(0);    opacity: 0.7; }
  46%  { transform: translateY(0);    opacity: 0.7; }
  52%  { opacity: 0.25; }
  100% { transform: translateY(-2px); opacity: 0.25; }
}
[data-design="b"] .wt-burger {
  display: grid; gap: 5px; padding: 12px; min-width: 44px; min-height: 44px;
  background: none; border: 0; cursor: pointer;
}
[data-design="b"] .wt-burger__l { width: 22px; height: 2px; background: var(--wt-carbon);
  transition: transform 260ms var(--wt-set), opacity 160ms ease-out; }
[data-design="b"] .wt-burger[aria-expanded="true"] .wt-burger__l:nth-child(1) { transform: translateY(7px) rotate(45deg); }
[data-design="b"] .wt-burger[aria-expanded="true"] .wt-burger__l:nth-child(2) { opacity: 0; }
[data-design="b"] .wt-burger[aria-expanded="true"] .wt-burger__l:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
[data-design="b"] .wt-drawer {
  position: fixed; inset: 0; z-index: 50; background: var(--wt-membrane); color: var(--wt-paper);
  padding: var(--wt-eave) clamp(20px, 6vw, 64px) var(--wt-field);
  display: flex; flex-direction: column; justify-content: space-between;
}
[data-design="b"] .wt-drawer[hidden] { display: none; }
[data-design="b"] .wt-drawer__legend { list-style: none; margin: 0; padding: 0; }
[data-design="b"] .wt-drawer__legend li {
  border-bottom: 1px solid rgba(244, 246, 245, 0.16);
  clip-path: inset(0 0 100% 0); opacity: 0;
}
[data-design="b"] .wt-drawer.is-open .wt-drawer__legend li {
  animation: wtb-legend-lap 300ms var(--wt-roll) forwards;
}
[data-design="b"] .wt-drawer.is-open .wt-drawer__legend li:nth-child(2) { animation-delay: 90ms; }
[data-design="b"] .wt-drawer.is-open .wt-drawer__legend li:nth-child(3) { animation-delay: 180ms; }
[data-design="b"] .wt-drawer.is-open .wt-drawer__legend li:nth-child(4) { animation-delay: 270ms; }
@keyframes wtb-legend-lap { to { clip-path: inset(0 0 0 0); opacity: 1; } }
[data-design="b"] .wt-drawer__legend a {
  display: flex; align-items: center; gap: var(--wt-step); padding: var(--wt-step) 0; min-height: 44px;
  color: var(--wt-paper); text-decoration: none;
  font-family: "IBM Plex Mono", "Courier New", monospace; text-transform: uppercase; letter-spacing: 0.08em;
}
[data-design="b"] .wt-drawer__legend a::before {
  content: ""; width: 10px; height: 10px; background: var(--wt-zinc); flex: none;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .wt-drawer__legend a:hover::before { background: var(--wt-seal); }
}
[data-design="b"] .wt-drawer__legend a:focus-visible::before { background: var(--wt-seal); }
[data-design="b"] .wt-drawer__actions { display: grid; gap: var(--wt-step); padding-top: var(--wt-counter); }
[data-design="b"] .wt-drawer__phone, [data-design="b"] .wt-drawer__go {
  color: var(--wt-paper); text-decoration: none; min-height: 44px; display: flex; align-items: center;
  font-family: "IBM Plex Mono", "Courier New", monospace; letter-spacing: 0.08em;
}
[data-design="b"] .wt-drawer__go { color: var(--wt-tag); }
@media (max-width: 560px) { [data-design="b"] .wt-header__bar { min-height: 56px; } }

/* ---------- 2. CTA — the sealed tab ---------- */
[data-design="b"] .wt-cta-group { display: grid; gap: var(--wt-step); justify-items: start; }
[data-design="b"] .wt-cta {
  position: relative; overflow: hidden; display: inline-flex; align-items: center;
  min-height: 56px; padding: var(--wt-step) var(--wt-shield);
  background: var(--wt-seal); color: var(--wt-paper); text-decoration: none;
  border-radius: var(--wt-r-1);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; font-weight: 600; font-size: 1.06rem;
  box-shadow: var(--wt-dry);
  transition: transform 160ms var(--wt-roll), box-shadow 160ms var(--wt-roll);
}
[data-design="b"] .wt-cta__fold {
  position: absolute; right: 0; bottom: 0; width: 14px; height: 14px;
  background: var(--wt-seal-deep);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
[data-design="b"] .wt-cta__bead {
  position: absolute; left: 0; bottom: 0; width: 28px; height: 2px;
  background: var(--wt-paper); opacity: 0;
  transform: translateX(-32px);
  animation: wtb-bead-shed 5.5s var(--wt-roll) infinite;
}
@keyframes wtb-bead-shed {
  0%, 68% { transform: translateX(-32px); opacity: 0; }
  74%     { opacity: 0.85; }
  100%    { transform: translateX(340px); opacity: 0; }
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .wt-cta:hover { transform: translateY(-1px); }
}
[data-design="b"] .wt-cta:focus-visible { outline: 2px solid var(--wt-tag); outline-offset: 2px; }
[data-design="b"] .wt-cta:active { transform: translateY(1px); box-shadow: 0 0 0 rgba(33,38,43,0.14); }
[data-design="b"] .wt-cta-utility {
  display: inline-flex; align-items: center; gap: var(--wt-seam);
  min-height: 44px; padding: var(--wt-seam) var(--wt-step);
  border: 1px solid var(--wt-carbon); border-radius: var(--wt-r-1);
  color: var(--wt-carbon); text-decoration: none;
  font-family: "IBM Plex Mono", "Courier New", monospace; font-size: 0.88rem; letter-spacing: 0.06em;
  transition: border-color 160ms ease-out, color 160ms ease-out;
}
[data-design="b"] .wt-cta-utility__key { width: 8px; height: 8px; background: var(--wt-tag); flex: none; }
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .wt-cta-utility:hover { border-color: var(--wt-tag); color: var(--wt-tag); }
}
[data-design="b"] .wt-cta-utility:focus-visible { outline: 2px solid var(--wt-tag); outline-offset: 2px; }
[data-design="b"] .wt-cta-mode { margin: 0; max-width: 60ch; color: var(--wt-zinc); font-size: 0.88rem; line-height: 1.6; }

/* ---------- 3. Hero — the section drawing of a dry gutter run ---------- */
[data-design="b"] .wt-hero { position: relative; overflow: clip; background: var(--wt-paper); isolation: isolate; }
[data-design="b"] .wt-hero__plate { position: absolute; inset: 0; z-index: 0; }
[data-design="b"] .wt-hero__svg { width: 100%; height: 100%; display: block; max-width: 100%; }
[data-design="b"] .wt-hero__layer {
  clip-path: inset(0 100% 0 0); opacity: 0.9;
  animation: wtb-layer-lap 700ms var(--wt-roll) forwards;
}
[data-design="b"] .wt-hero__layer--deck   { animation-delay: 100ms; }
[data-design="b"] .wt-hero__layer--shield { animation-delay: 600ms; }
[data-design="b"] .wt-hero__layer--field  { animation-delay: 1100ms; }
@keyframes wtb-layer-lap { to { clip-path: inset(0 0 0 0); } }
[data-design="b"] .wt-hero__keys, [data-design="b"] .wt-hero__labels {
  opacity: 0; animation: wtb-keys-set 500ms ease-out 1600ms forwards;
}
@keyframes wtb-keys-set { to { opacity: 0.85; } }
[data-design="b"] .wt-hero__wash {
  animation: wtb-shed-wash 6s linear infinite;
}
@keyframes wtb-shed-wash {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: 0.5; }
  62%  { opacity: 0.5; }
  86%  { transform: translate3d(1080px, 0, 0); opacity: 0.22; }
  100% { transform: translate3d(1180px, 0, 0); opacity: 0; }
}
[data-design="b"] .wt-hero__col {
  position: relative; z-index: 1; isolation: isolate;
  max-width: 1320px; margin-inline: auto;
  padding: clamp(96px, 16vh, 176px) clamp(20px, 5vw, 48px) var(--wt-eave);
  display: grid; gap: var(--wt-counter); justify-items: start; max-inline-size: 100%;
}
[data-design="b"] .wt-hero__title {
  position: relative; z-index: 2;
  margin: 0; max-width: 18ch; text-wrap: balance; opacity: 1;
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600; letter-spacing: -0.015em; line-height: 1.12;
  font-size: clamp(2.1rem, 5.2vw, 3.3rem); color: var(--wt-carbon);
}
[data-design="b"] .wt-hero__sub { position: relative; z-index: 2; opacity: 1; margin: 0; max-width: 62ch; font-size: 1.14rem; line-height: 1.65; color: var(--wt-carbon); }
[data-design="b"] .wt-hero__proof {
  position: relative; z-index: 2; opacity: 1;
  margin: 0; font-family: "IBM Plex Mono", "Courier New", monospace;
  font-size: 0.88rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wt-zinc);
}
[data-design="b"] .wt-hero__col > .wt-cta-group { position: relative; z-index: 2; }
@media (max-width: 768px) {
  [data-design="b"] .wt-hero__svg { opacity: 0.85; }
  [data-design="b"] .wt-hero__col { padding-top: clamp(80px, 14vh, 120px); }
}

/* ---------- 4. Ledger — the Service Record (mid-page) ---------- */
[data-design="b"] .wt-ledger-sec { position: relative; overflow: clip; padding: var(--wt-eave) 0; background: var(--wt-paper); }
[data-design="b"] .wt-ledger__mark {
  position: absolute; right: -60px; top: 50%; width: min(380px, 60vw); height: auto;
  transform: translateY(-50%); opacity: 0.06; pointer-events: none;
}
[data-design="b"] .wt-ledger-sec.is-on .wt-ledger__mark {
  animation: wtb-mark-breathe 20s ease-in-out infinite;
}
@keyframes wtb-mark-breathe {
  0%, 100% { opacity: 0.06; transform: translateY(-50%) scale(1); }
  50%      { opacity: 0.12; transform: translateY(-50%) scale(1.02); }
}
[data-design="b"] .wt-ledger__col {
  position: relative; max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px);
}
[data-design="b"] .wt-ledger__title {
  margin: 0 0 var(--wt-shield);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: var(--wt-carbon);
}
[data-design="b"] .wt-ledger { display: grid; gap: var(--wt-counter); grid-template-columns: repeat(2, 1fr); }
[data-design="b"] .wt-ledger__entry {
  display: grid; grid-template-columns: auto 1fr; gap: var(--wt-counter); align-items: start;
  padding-bottom: var(--wt-counter); border-bottom: 1px solid rgba(33, 38, 43, 0.18);
}
[data-design="b"] .wt-ledger__tag {
  font-family: "IBM Plex Mono", "Courier New", monospace; font-size: 0.82rem; letter-spacing: 0.08em;
  color: var(--wt-paper); background: var(--wt-tag); padding: var(--wt-hem) var(--wt-seam);
  border-radius: var(--wt-r-1);
  transform: scale(0.94); opacity: 0;
}
[data-design="b"] .wt-ledger__entry.is-in .wt-ledger__tag {
  animation: wtb-tag-set 260ms var(--wt-set) forwards;
}
@keyframes wtb-tag-set { to { transform: scale(1); opacity: 1; } }
[data-design="b"] .wt-ledger__main h3 { margin: 0 0 var(--wt-seam); font-size: 1.2rem; font-weight: 600; color: var(--wt-carbon); }
[data-design="b"] .wt-ledger__main p { margin: 0; max-width: 66ch; line-height: 1.65; color: var(--wt-carbon); }
@media (max-width: 900px) {
  [data-design="b"] .wt-ledger { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  [data-design="b"] .wt-ledger__entry { grid-template-columns: 1fr; gap: var(--wt-step); }
}

/* Repeated funnel CTA band (end of gallery) */
[data-design="b"] .wt-funnel-cta-repeat { padding: var(--wt-shield) 0 var(--wt-eave); background: var(--wt-paper); }
[data-design="b"] .wt-funnel-cta-repeat__link { margin-inline: 0; }

/* ---------- 5. Funnel — the estimator, read on the Run Gauge ---------- */
[data-design="b"] .wt-funnel-sec { background: var(--wt-liner); padding: var(--wt-eave) 0; }
[data-design="b"] .wt-funnel-col { max-width: 760px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
[data-design="b"] .wt-funnel-title {
  margin: 0 0 var(--wt-seam);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: var(--wt-carbon);
}
[data-design="b"] .wt-funnel-sub { margin: 0 0 var(--wt-shield); max-width: 62ch; color: var(--wt-zinc); line-height: 1.65; }
[data-design="b"] .wt-rail { display: grid; grid-auto-flow: column; gap: var(--wt-hem); margin-bottom: var(--wt-counter); }
[data-design="b"] .wt-rail__lap {
  height: 4px; background: var(--wt-seal);
  transform-origin: left center; transform: scaleX(0); opacity: 0.9;
  transition: transform 260ms var(--wt-roll);
}
[data-design="b"] .wt-rail__lap.is-set { transform: scaleX(1); }
[data-design="b"] .wt-funnel-live {
  margin: 0 0 var(--wt-step); min-height: 1.4em;
  font-family: "IBM Plex Mono", "Courier New", monospace; font-size: 0.82rem;
  letter-spacing: 0.08em; color: var(--wt-seal-deep);
}
[data-design="b"] .wt-step { border: 0; margin: 0; padding: 0; display: none; visibility: hidden; }
[data-design="b"] .wt-step.is-active { display: grid; gap: var(--wt-counter); visibility: visible; }
[data-design="b"] .wt-step.is-entering { animation: wtb-step-lap 260ms var(--wt-roll); }
@keyframes wtb-step-lap {
  from { clip-path: inset(0 0 88% 0); opacity: 0.2; transform: translateY(6px); }
  to   { clip-path: inset(0 0 0 0); opacity: 1; transform: translateY(0); }
}
[data-design="b"] .wt-step__q { font-weight: 600; font-size: 1.2rem; color: var(--wt-carbon); padding: 0; }
[data-design="b"] .wt-chips { display: flex; flex-wrap: wrap; gap: var(--wt-step); }
[data-design="b"] .wt-chip {
  position: relative; overflow: hidden; min-height: 56px; padding: var(--wt-step) var(--wt-counter);
  background: var(--wt-paper); color: var(--wt-carbon); border: 1px solid var(--wt-carbon);
  border-radius: var(--wt-r-1); font: 500 1rem "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  cursor: pointer; box-shadow: var(--wt-dry); opacity: 1;
  transition: transform 120ms var(--wt-roll), border-color 120ms ease-out, color 120ms ease-out;
}
[data-design="b"] .wt-chip::after {
  content: ""; position: absolute; inset: 0; background: var(--wt-seal); opacity: 0.14;
  clip-path: inset(0 100% 0 0); transition: clip-path 200ms var(--wt-roll);
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .wt-chip:hover { transform: translateY(-1px); border-color: var(--wt-seal); }
}
[data-design="b"] .wt-chip:focus-visible { outline: 2px solid var(--wt-tag); outline-offset: 2px; }
[data-design="b"] .wt-chip:active { transform: translateY(1px); }
[data-design="b"] .wt-chip.is-picked { border-color: var(--wt-seal-deep); color: var(--wt-seal-deep); }
[data-design="b"] .wt-chip.is-picked::after { clip-path: inset(0 0 0 0); }
[data-design="b"] .wt-chips--sizes .wt-chip--size {
  font-family: "IBM Plex Mono", "Courier New", monospace; font-size: 0.82rem; letter-spacing: 0.06em;
  min-height: 44px; padding: var(--wt-seam) var(--wt-step);
}
[data-design="b"] .wt-gauge {
  display: grid; gap: var(--wt-seam); justify-items: center;
  background: var(--wt-membrane); border-radius: var(--wt-r-2); padding: var(--wt-counter);
}
[data-design="b"] .wt-gauge:focus-visible { outline: 2px solid var(--wt-tag); outline-offset: 2px; }
[data-design="b"] .wt-gauge__svg { width: min(260px, 70vw); height: auto; max-width: 100%; }
[data-design="b"] .wt-gauge__ring { transition: transform 220ms var(--wt-set); }
[data-design="b"] .wt-gauge__readout {
  margin: 0; font-family: "IBM Plex Mono", "Courier New", monospace; font-size: 1rem;
  letter-spacing: 0.08em; color: var(--wt-tag);
}
[data-design="b"] .wt-gauge__finding {
  margin: 0; max-width: 44ch; text-align: center; font-size: 0.94rem; line-height: 1.6; color: var(--wt-paper);
}
[data-design="b"] .wt-step-next {
  justify-self: start; min-height: 44px; padding: var(--wt-seam) var(--wt-counter);
  background: var(--wt-seal); color: var(--wt-paper); border: 0; border-radius: var(--wt-r-1);
  font: 600 1rem "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; cursor: pointer;
  transition: transform 120ms var(--wt-roll);
}
[data-design="b"] .wt-step-next:active { transform: translateY(1px); }
[data-design="b"] .wt-step-next:focus-visible { outline: 2px solid var(--wt-tag); outline-offset: 2px; }
[data-design="b"] .wt-summary {
  margin: 0; padding: var(--wt-step); background: var(--wt-paper); border-left: 3px solid var(--wt-seal);
  font-family: "IBM Plex Mono", "Courier New", monospace; font-size: 0.88rem; line-height: 1.7;
}
[data-design="b"] .wt-field { display: grid; gap: var(--wt-hem); }
[data-design="b"] .wt-field__label {
  font-family: "IBM Plex Mono", "Courier New", monospace; font-size: 0.82rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--wt-zinc);
}
[data-design="b"] .wt-seam-in {
  width: 100%; max-width: 100%; box-sizing: border-box; min-height: 44px;
  padding: var(--wt-seam) var(--wt-step); background: var(--wt-paper);
  border: 0; border-bottom: 1px solid var(--wt-carbon); border-radius: var(--wt-r-1);
  font: 400 1rem "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; color: var(--wt-carbon);
}
[data-design="b"] .wt-seam-in:focus-visible { outline: 2px solid var(--wt-tag); outline-offset: 2px; }
[data-design="b"] .wt-funnel-submit { justify-self: start; }
[data-design="b"] .wt-done { display: grid; gap: var(--wt-step); justify-items: start; }
[data-design="b"] .wt-done__tag {
  margin: 0; padding: var(--wt-hem) var(--wt-seam);
  background: var(--wt-success); color: var(--wt-paper); border-radius: var(--wt-r-1);
  font-family: "IBM Plex Mono", "Courier New", monospace; font-size: 0.82rem; letter-spacing: 0.08em;
  transform: scale(0.94); opacity: 0;
  animation: wtb-done-tag 260ms var(--wt-set) 100ms forwards;
}
@keyframes wtb-done-tag { to { transform: scale(1); opacity: 1; } }
[data-design="b"] .wt-done__msg { margin: 0; font-weight: 600; color: var(--wt-carbon); }
[data-design="b"] .wt-funnel-back {
  margin-top: var(--wt-counter); background: none; border: 0; cursor: pointer;
  color: var(--wt-zinc); font: 400 0.88rem "IBM Plex Mono", "Courier New", monospace;
  min-height: 44px; padding: var(--wt-seam) 0;
}
[data-design="b"] .wt-funnel-back:focus-visible { outline: 2px solid var(--wt-tag); outline-offset: 2px; }
[data-design="b"] .wt-funnel-back[hidden] { display: none; }

/* ---------- 6. Pointer — the shed sequence, hero to funnel ---------- */
[data-design="b"] .wt-pointer {
  display: flex; align-items: center; justify-content: center; gap: var(--wt-step);
  padding: var(--wt-shield) 0; background: var(--wt-paper); opacity: 1; min-height: 48px;
}
[data-design="b"] .wt-pointer__laps { display: grid; gap: var(--wt-seam); }
[data-design="b"] .wt-pointer__t {
  width: 26px; height: 2px; background: var(--wt-seal);
  opacity: 0.2; transform: translateY(-3px);
  animation: wtb-pointer-shed 5s var(--wt-roll) infinite;
}
[data-design="b"] .wt-pointer__t:nth-child(1) { margin-left: 0; }
[data-design="b"] .wt-pointer__t:nth-child(2) { margin-left: 8px; animation-delay: 0.5s; }
[data-design="b"] .wt-pointer__t:nth-child(3) { margin-left: 16px; animation-delay: 1s; }
@keyframes wtb-pointer-shed {
  0%   { opacity: 0.2; transform: translateY(-3px); }
  14%  { opacity: 1;   transform: translateY(0); }
  55%  { opacity: 1;   transform: translateY(0); }
  75%  { opacity: 0.2; transform: translateY(-3px); }
  100% { opacity: 0.2; transform: translateY(-3px); }
}
[data-design="b"] .wt-pointer__label {
  max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: "IBM Plex Mono", "Courier New", monospace; font-size: 0.82rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--wt-zinc);
}

/* ---------- 7. Scroll choreography — the handoff ---------- */
[data-design="b"] .wt-handoff { padding: var(--wt-eave) 0 var(--wt-field); background: var(--wt-paper); }
[data-design="b"] .wt-handoff__col { max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
[data-design="b"] .wt-handoff__title {
  position: relative; margin: 0 0 var(--wt-counter); display: inline-block;
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: var(--wt-carbon);
}
[data-design="b"] .wt-handoff__seam {
  position: absolute; left: 0; bottom: -10px; width: 100%; height: 2px; background: var(--wt-seal);
  transform-origin: left center; transform: scaleX(1);
}
[data-design="b"] .wt-handoff__body { max-width: 66ch; line-height: 1.65; color: var(--wt-carbon); display: grid; gap: var(--wt-step); }
[data-design="b"] .wt-handoff__body p { margin: 0; }
@supports (animation-timeline: view()) {
  [data-design="b"] .wt-hero__layers {
    animation: wtb-scroll-part-slow linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }
  [data-design="b"] .wt-hero__lines {
    animation: wtb-scroll-part-fast linear both;
    animation-timeline: view();
    animation-range: exit 0% exit 100%;
  }
  @keyframes wtb-scroll-part-slow { to { transform: translate3d(0, -4%, 0); opacity: 0.55; } }
  @keyframes wtb-scroll-part-fast { to { transform: translate3d(0, -9%, 0); opacity: 0.4; } }
  [data-design="b"] .wt-handoff__seam {
    animation: wtb-scroll-trace linear both;
    animation-timeline: view();
    animation-range: entry 10% entry 60%;
  }
  @keyframes wtb-scroll-trace {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  [data-design="b"] .wt-handoff__body {
    animation: wtb-scroll-seal linear both;
    animation-timeline: view();
    animation-range: entry 15% entry 70%;
  }
  @keyframes wtb-scroll-seal {
    from { transform: translateY(18px); opacity: 0.2; }
    to   { transform: translateY(0); opacity: 1; }
  }
}

/* ---------- Process (grammar-consistent addition) ---------- */
[data-design="b"] .wt-process { padding: var(--wt-eave) 0; background: var(--wt-liner); }
[data-design="b"] .wt-process__col { max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
[data-design="b"] .wt-process__title {
  margin: 0 0 var(--wt-shield);
  font-family: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.2rem); color: var(--wt-carbon);
}
[data-design="b"] .wt-process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wt-counter); }
[data-design="b"] .wt-process__step {
  background: var(--wt-paper); border-radius: var(--wt-r-2); padding: var(--wt-counter);
  box-shadow: var(--wt-dry);
}
[data-design="b"] .wt-process__key {
  display: inline-block; margin-bottom: var(--wt-seam);
  font-family: "IBM Plex Mono", "Courier New", monospace; font-size: 0.82rem;
  letter-spacing: 0.08em; color: var(--wt-tag);
}
[data-design="b"] .wt-process__step h3 { margin: 0 0 var(--wt-seam); font-size: 1.1rem; font-weight: 600; color: var(--wt-carbon); }
[data-design="b"] .wt-process__step p { margin: 0; line-height: 1.6; color: var(--wt-carbon); font-size: 0.94rem; }
@media (max-width: 900px) {
  [data-design="b"] .wt-process__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  [data-design="b"] .wt-process__grid { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */
[data-design="b"] .wt-footer { background: var(--wt-membrane); color: var(--wt-paper); padding: var(--wt-eave) 0 var(--wt-field); }
[data-design="b"] .wt-footer__col {
  max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--wt-shield);
}
[data-design="b"] .wt-footer__group { display: grid; gap: var(--wt-step); align-content: start; }
[data-design="b"] .wt-footer__name { margin: 0; font-weight: 600; font-size: 1.1rem; }
[data-design="b"] .wt-footer__meta { margin: 0; max-width: 40ch; line-height: 1.6; color: var(--wt-zinc); font-size: 0.9rem; }
[data-design="b"] .wt-footer__legend { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wt-step); align-content: start; }
[data-design="b"] .wt-footer__legend a {
  color: var(--wt-paper); text-decoration: none; min-height: 44px; display: flex; align-items: center;
  font-family: "IBM Plex Mono", "Courier New", monospace; letter-spacing: 0.06em; font-size: 0.9rem;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="b"] .wt-footer__legend a:hover { color: var(--wt-seal); }
}
[data-design="b"] .wt-footer__phone {
  color: var(--wt-paper); text-decoration: none; min-height: 44px; display: flex; align-items: center;
  font-family: "IBM Plex Mono", "Courier New", monospace; letter-spacing: 0.06em;
}
[data-design="b"] .wt-footer__go { justify-self: start; }
[data-design="b"] .wt-footer__copy {
  max-width: 1320px; margin: var(--wt-eave) auto 0; padding-inline: clamp(20px, 5vw, 48px);
  border-top: 1px solid rgba(244, 246, 245, 0.16); padding-top: var(--wt-step);
  color: var(--wt-zinc); font-size: 0.82rem; font-family: "IBM Plex Mono", "Courier New", monospace;
}
@media (max-width: 900px) {
  [data-design="b"] .wt-footer__col { grid-template-columns: 1fr; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-design="b"] .wt-laps__l { animation: none; transform: translateY(0); opacity: 0.6; }
  [data-design="b"] .wt-drawer.is-open .wt-drawer__legend li { animation: none; clip-path: none; opacity: 1; }
  [data-design="b"] .wt-burger__l { transition: none; }
  [data-design="b"] .wt-cta__bead { animation: none; opacity: 0; }
  [data-design="b"] .wt-cta, [data-design="b"] .wt-cta-utility { transition: none; }
  [data-design="b"] .wt-hero__layer { animation: none; clip-path: none; }
  [data-design="b"] .wt-hero__keys, [data-design="b"] .wt-hero__labels { animation: none; opacity: 0.85; }
  [data-design="b"] .wt-hero__wash { animation: none; transform: translate3d(400px, 0, 0); opacity: 0.28; }
  [data-design="b"] .wt-ledger-sec.is-on .wt-ledger__mark { animation: none; }
  [data-design="b"] .wt-ledger__tag,
  [data-design="b"] .wt-ledger__entry.is-in .wt-ledger__tag { animation: none; transform: scale(1); opacity: 1; }
  [data-design="b"] .wt-step.is-entering { animation: none; }
  [data-design="b"] .wt-rail__lap, [data-design="b"] .wt-gauge__ring,
  [data-design="b"] .wt-chip::after { transition: none; }
  [data-design="b"] .wt-done__tag { animation: none; transform: scale(1); opacity: 1; }
  [data-design="b"] .wt-pointer__t { animation: none; opacity: 1; transform: translateY(0); }
  [data-design="b"] .wt-hero__layers,
  [data-design="b"] .wt-hero__lines,
  [data-design="b"] .wt-handoff__seam,
  [data-design="b"] .wt-handoff__body { animation: none; transform: none; opacity: 1; }
}

/* ---------- Mobile / overflow safety (appended, 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; }

/* stranded-wrapper autofix (drain 2026-07-03): every fixed max-width column centers — gate content_uncentered_left_stranded */
[data-design="b"] .wt-cta-mode { margin-inline: auto; }
[data-design="b"] .wt-hero__sub { margin-inline: auto; }
[data-design="b"] .wt-ledger__main p { margin-inline: auto; }
[data-design="b"] .wt-funnel-sub { margin-inline: auto; }
[data-design="b"] .wt-gauge__finding { margin-inline: auto; }
[data-design="b"] .wt-handoff__body { margin-inline: auto; }
[data-design="b"] .wt-footer__meta { margin-inline: 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; }