/* ============================================================
   Plaza Flooring LLC — design-a — Jig & Fixture (remapped a)
   Token block
============================================================ */
[data-design="a"] {
  --design-a-primary: #2A5A80;
  --jf-board: #2C3631;
  --jf-board-deep: #222B26;
  --jf-bone: #EDEAE0;
  --jf-chalk: #D8D4C6;
  --jf-muted: #96A099;
  --jf-steel: #B9BEC2;
  --jf-dykem: #2A5A80;
  --jf-signal: #E8622C;
  --jf-card: #F2EFE6;
  --jf-critical: #C24B2E;
  --jf-success: #4C7A5A;
  --jf-r-none: 0;
  --jf-r-chip: 2px;
  --jf-r-lever: 999px;
  --jf-e-lifted: 4px 6px 0 rgba(16, 20, 18, 0.5);
}

[data-design="a"].dq-design {
  background: var(--jf-board);
  color: var(--jf-bone);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ============================================================
   1. HEADER
============================================================ */
[data-design="a"] .jf-header {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #4A5257 0%, #3B4348 60%, #2F373B 100%);
  border-bottom: 2px solid #1C2225;
}
[data-design="a"] .jf-header__bar {
  position: relative; z-index: 2; display: flex; align-items: center;
  justify-content: space-between; max-width: 1320px; margin-inline: auto;
  padding: 12px clamp(20px, 5vw, 48px); min-height: 64px; box-sizing: border-box;
}
[data-design="a"] .jf-logo {
  font-family: "Bahnschrift SemiBold Condensed", "Bahnschrift", "Arial Narrow", sans-serif;
  text-transform: uppercase; letter-spacing: 0.04em;
  font-size: clamp(1.1rem, 2.6vw, 1.45rem); line-height: 1.15;
  color: var(--jf-bone); text-decoration: none;
}
[data-design="a"] .jf-header__lamp {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
[data-design="a"] .jf-header__lamp::before {
  content: ""; position: absolute; top: -30%; bottom: -30%; left: -35%;
  width: 42%; opacity: 0.28;
  background: radial-gradient(ellipse 60% 120% at center,
    rgba(255, 241, 205, 0.7) 0%, transparent 70%);
  animation: jf-worklight 22s linear infinite alternate;
}
@keyframes jf-worklight {
  from { transform: translateX(0); }
  to   { transform: translateX(290%); }
}
[data-design="a"] .jf-hook {
  width: 48px; height: 48px; border: 0; background: transparent; cursor: pointer;
  position: relative; border-radius: var(--jf-r-chip);
}
[data-design="a"] .jf-hook__stem {
  position: absolute; left: 50%; top: 12px; width: 3px; height: 16px;
  margin-left: -1.5px; background: var(--jf-steel); display: block;
  transition: transform 260ms cubic-bezier(0.55, -0.05, 0.25, 1.18);
}
[data-design="a"] .jf-hook__curl {
  position: absolute; left: 50%; top: 26px; width: 18px; height: 10px;
  margin-left: -9px; display: block;
  border: 3px solid var(--jf-steel); border-top: 0;
  border-radius: 0 0 10px 10px; box-sizing: border-box;
  transition: transform 260ms cubic-bezier(0.55, -0.05, 0.25, 1.18);
}
[data-design="a"] .jf-hook:focus-visible { outline: 2px solid var(--jf-dykem); outline-offset: 2px; }
[data-design="a"] .jf-hook[aria-expanded="true"] .jf-hook__stem { transform: rotate(45deg) translateY(4px); }
[data-design="a"] .jf-hook[aria-expanded="true"] .jf-hook__curl { transform: rotate(-180deg); }
[data-design="a"] .jf-panelwrap { position: fixed; inset: 0; z-index: 60; }
[data-design="a"] .jf-panelwrap[hidden] { display: none; }
[data-design="a"] .jf-panelwrap__scrim {
  position: absolute; inset: 0; background: rgba(16, 20, 18, 0.6);
  opacity: 0; transition: opacity 220ms ease-out;
}
[data-design="a"] .jf-panelwrap__panel {
  position: absolute; top: 0; left: 0; right: 0;
  background: var(--jf-board-deep); border-bottom: 3px solid var(--jf-signal);
  padding: 88px clamp(20px, 5vw, 48px) 32px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 4px;
  transform: translateY(-102%);
  transition: transform 260ms cubic-bezier(0.55, -0.05, 0.25, 1.18);
  max-height: 100%; overflow-y: auto;
}
[data-design="a"] .jf-panelwrap.is-open .jf-panelwrap__scrim { opacity: 1; }
[data-design="a"] .jf-panelwrap.is-open .jf-panelwrap__panel { transform: translateY(0); }
[data-design="a"] .jf-panelwrap__panel a {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px;
  color: var(--jf-bone); text-decoration: none; padding: 14px 8px;
  min-height: 44px; box-sizing: border-box; display: flex; align-items: center;
  border-bottom: 1px solid rgba(216, 212, 198, 0.18);
}
[data-design="a"] .jf-panelwrap__phone {
  font-family: "Consolas", "Cascadia Mono", monospace;
  font-size: 17px; color: var(--jf-signal) !important;
  border-bottom: 0 !important; min-height: 56px;
  display: flex; align-items: center;
}
@media (max-width: 380px) { [data-design="a"] .jf-logo { font-size: 1rem; } }

/* ============================================================
   2. CTA — clamp lever
============================================================ */
[data-design="a"] .jf-cta {
  position: relative; display: inline-flex; align-items: center; gap: 14px;
  min-height: 56px; padding: 14px 28px 14px 18px; box-sizing: border-box;
  background: linear-gradient(180deg, #C8CDD1 0%, var(--jf-steel) 55%, #9AA0A5 100%);
  color: #1C2225; text-decoration: none;
  font-family: "Bahnschrift SemiBold Condensed", "Bahnschrift", "Arial Narrow", sans-serif;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 16px;
  border: 1px solid #70777C; border-radius: var(--jf-r-chip);
  box-shadow: 3px 4px 0 rgba(16, 20, 18, 0.5);
  transition: transform 120ms cubic-bezier(0.4, 0, 0.6, 1);
  cursor: pointer;
}
[data-design="a"] .jf-cta__grip {
  width: 14px; height: 30px; border-radius: var(--jf-r-lever);
  background: linear-gradient(180deg, #F07B45, var(--jf-signal) 60%, #C24B2E);
  display: inline-block; transform-origin: 50% 88%;
  animation: jf-preload 5s ease-in-out infinite;
}
@keyframes jf-preload {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-9deg); }
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .jf-cta:hover { transform: translate(-1px, -2px); }
  [data-design="a"] .jf-cta:hover .jf-cta__grip { animation-play-state: paused; transform: rotate(-14deg); }
}
[data-design="a"] .jf-cta:focus-visible { outline: 2px solid var(--jf-dykem); outline-offset: 3px; }
[data-design="a"] .jf-cta:active { transform: translate(1px, 2px) scale(0.98); }

/* ============================================================
   3. HERO — the Shadow Board
============================================================ */
[data-design="a"] .jf-hero {
  position: relative; overflow: hidden; background: var(--jf-board);
  min-height: 70vh; display: flex; align-items: center;
  isolation: isolate;
}
[data-design="a"] .jf-board { position: absolute; inset: 0; z-index: 1; }
[data-design="a"] .jf-board__holes {
  position: absolute; inset: 0; opacity: 0.55;
  background-image: radial-gradient(circle at center,
    rgba(16, 20, 18, 0.95) 0 3px, rgba(216, 212, 198, 0.22) 3px 4px, transparent 5px);
  background-size: 44px 44px; background-position: 22px 22px;
}
[data-design="a"] .jf-outline {
  position: absolute; border: 2px dashed rgba(216, 212, 198, 0.5);
  border-radius: 8px; display: block;
}
[data-design="a"] .jf-outline--long  { right: 10%; top: 18%; width: 34px; height: 218px; }
[data-design="a"] .jf-outline--short { right: 18%; top: 24%; width: 30px; height: 150px; }
[data-design="a"] .jf-outline--ring  { right: 26%; top: 22%; width: 64px; height: 64px; border-radius: 999px; }
[data-design="a"] .jf-tool {
  position: absolute; right: calc(10% + 4px); top: calc(18% + 6px);
  width: 22px; height: 200px; border-radius: 7px;
  background: linear-gradient(180deg, #C8CDD1, #9AA0A5 70%, #83898E);
  box-shadow: 3px 4px 0 rgba(16, 20, 18, 0.5);
  animation: jf-tool-seat 340ms cubic-bezier(0.2, 0.9, 0.3, 1.05) both;
}
[data-design="a"] .jf-tool::after {
  content: ""; position: absolute; left: 50%; top: 8px; width: 12px; height: 44px;
  margin-left: -6px; border-radius: 999px;
  background: linear-gradient(180deg, #F07B45, #C24B2E);
}
@keyframes jf-tool-seat {
  from { opacity: 0; transform: translateY(-16px) rotate(-3deg) scale(0.985); }
  70%  { transform: translateY(2px) rotate(0.5deg) scale(1.005); }
  to   { opacity: 1; transform: translateY(0) rotate(0) scale(1); }
}
[data-design="a"] .jf-board__lamp {
  position: absolute; top: -25%; bottom: -25%; left: -40%; width: 46%;
  opacity: 0.32; pointer-events: none;
  background: radial-gradient(ellipse 55% 110% at center,
    rgba(255, 241, 205, 0.75) 0%, transparent 68%);
  animation: jf-hero-lamp 16s cubic-bezier(0.42, 0.05, 0.58, 0.95) infinite alternate;
}
@keyframes jf-hero-lamp {
  from { transform: translateX(0); }
  to   { transform: translateX(255%); }
}
[data-design="a"] .jf-hero__inner {
  position: relative; z-index: 5; width: 100%; max-width: 1320px;
  margin-inline: auto; padding: clamp(56px, 10vw, 96px) clamp(20px, 5vw, 48px);
  box-sizing: border-box; isolation: isolate;
}
[data-design="a"] .jf-hero__headline {
  font-family: "Bahnschrift SemiBold Condensed", "Bahnschrift", "Arial Narrow", sans-serif;
  text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(2.1rem, 5.5vw, 3.8rem); line-height: 1.08;
  color: var(--jf-bone); margin: 0 0 16px; max-width: 18ch;
  text-wrap: balance; opacity: 1; position: relative; z-index: 6;
}
[data-design="a"] .jf-hero__subtitle {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.06rem, 2.2vw, 1.25rem); line-height: 1.55;
  color: var(--jf-bone); max-width: 52ch; margin: 0 0 20px; opacity: 1;
  position: relative; z-index: 6;
}
[data-design="a"] .jf-hero__proof {
  display: inline-block; border: 1px solid rgba(216, 212, 198, 0.5);
  border-left: 3px solid var(--jf-dykem); border-radius: var(--jf-r-chip);
  font-family: "Segoe UI", Arial, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px;
  line-height: 1.55; color: var(--jf-muted); padding: 8px 14px;
  margin: 0 0 28px; opacity: 1; position: relative; z-index: 6;
}
[data-design="a"] .jf-hero__actions {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  position: relative; z-index: 6;
}
[data-design="a"] .jf-hero__phone {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 14px 24px; box-sizing: border-box;
  background: transparent; color: var(--jf-bone); text-decoration: none;
  border: 2px solid var(--jf-signal); border-radius: var(--jf-r-chip);
  font-family: "Consolas", "Cascadia Mono", monospace; font-size: 17px;
  opacity: 1;
}
[data-design="a"] .jf-hero__phone-word {
  font-family: "Segoe UI", Arial, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px;
  color: var(--jf-signal);
}
[data-design="a"] .jf-hero__phone:focus-visible { outline: 2px solid var(--jf-dykem); outline-offset: 3px; }
@media (max-width: 720px) {
  [data-design="a"] .jf-outline--ring, [data-design="a"] .jf-outline--short { opacity: 0.5; }
}
@media (max-width: 560px) {
  [data-design="a"] .jf-outline--long, [data-design="a"] .jf-tool { top: 6%; right: 6%; }
  [data-design="a"] .jf-outline--short, [data-design="a"] .jf-outline--ring { opacity: 0.35; }
  [data-design="a"] .jf-hero__actions { flex-direction: column; align-items: stretch; }
}

/* ============================================================
   6. POINTER
============================================================ */
[data-design="a"] .jf-pointer {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 40px 0 24px; min-height: 104px; box-sizing: border-box; opacity: 1;
  background: var(--jf-board);
}
[data-design="a"] .jf-pointer__outline, [data-design="a"] .jf-pointer__chevron {
  width: 26px; height: 26px; box-sizing: border-box; display: block;
  border-right: 3px solid; border-bottom: 3px solid; transform: rotate(45deg);
}
[data-design="a"] .jf-pointer__outline {
  border-color: rgba(216, 212, 198, 0.45); border-style: dashed;
  position: absolute; top: 40px;
}
[data-design="a"] .jf-pointer__chevron {
  border-color: var(--jf-steel); position: relative; z-index: 2;
  animation: jf-reseat 6s cubic-bezier(0.2, 0.9, 0.3, 1.05) infinite;
}
@keyframes jf-reseat {
  0%, 78%, 100% { transform: rotate(45deg) translate(0, 0); }
  84%           { transform: rotate(45deg) translate(-7px, -7px); }
  93%           { transform: rotate(45deg) translate(1px, 1px); }
}
[data-design="a"] .jf-pointer__label {
  margin-top: 18px; max-width: 240px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  font-family: "Segoe UI", Arial, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px;
  line-height: 1.55; color: var(--jf-muted); opacity: 1;
}

/* ============================================================
   5. FIXTURE — the estimator
============================================================ */
[data-design="a"] .jf-fixture {
  background: var(--jf-board);
  padding: clamp(56px, 10vw, 96px) 0;
  border-top: 3px solid var(--jf-signal);
}
[data-design="a"] .jf-fixture__inner {
  max-width: 880px; margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}
[data-design="a"] .jf-fixture__title {
  font-family: "Bahnschrift SemiBold Condensed", "Bahnschrift", "Arial Narrow", sans-serif;
  text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(1.3rem, 2.8vw, 1.8rem); line-height: 1.2;
  color: var(--jf-bone); margin: 0 0 12px;
}
[data-design="a"] .jf-fixture__intro {
  font-size: 17px; line-height: 1.6; color: var(--jf-muted); margin: 0 0 32px; max-width: 60ch;
}

/* live readout — sits above steps, never overlaps chips (EST-8) */
[data-design="a"] .jf-readout {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--jf-board-deep); border: 1px solid rgba(216, 212, 198, 0.25);
  border-radius: var(--jf-r-chip); padding: 20px; margin-bottom: 32px;
  box-shadow: var(--jf-e-lifted);
}
[data-design="a"] .jf-readout__label {
  font-family: "Segoe UI", Arial, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; color: var(--jf-muted);
}
[data-design="a"] .jf-readout__range {
  font-family: "Consolas", "Cascadia Mono", monospace; font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--jf-signal); line-height: 1.2;
}
[data-design="a"] .jf-readout__note {
  font-size: 13px; line-height: 1.5; color: var(--jf-muted);
}

[data-design="a"] .jf-step { border: 0; padding: 0; margin: 0 0 24px; }
[data-design="a"] .jf-step[hidden] { display: none; }
[data-design="a"] .jf-step__legend {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 19px; line-height: 1.5; color: var(--jf-bone); margin-bottom: 20px; display: block;
}
[data-design="a"] .jf-step__hint { display: block; font-size: 15px; color: var(--jf-muted); margin-top: 4px; }
[data-design="a"] .jf-step.is-current { animation: jf-step-in 260ms cubic-bezier(0.55, -0.05, 0.25, 1.18); }
@keyframes jf-step-in {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
[data-design="a"] .jf-clamp-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px;
}
@media (max-width: 720px) { [data-design="a"] .jf-clamp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { [data-design="a"] .jf-clamp-grid { grid-template-columns: 1fr; } }

[data-design="a"] .jf-clamp {
  position: relative; min-height: 104px; padding: 12px 12px 12px 44px;
  box-sizing: border-box; cursor: pointer; text-align: left;
  background: linear-gradient(180deg, #39443E, #2F3934);
  border: 1px solid rgba(216, 212, 198, 0.3); border-radius: var(--jf-r-chip);
  transition: transform 120ms cubic-bezier(0.4, 0, 0.6, 1);
}
[data-design="a"] .jf-clamp__lever {
  position: absolute; left: 18px; bottom: 16px; width: 8px; height: 52px;
  border-radius: var(--jf-r-lever);
  background: linear-gradient(180deg, #C8CDD1 55%, #9AA0A5);
  transform-origin: 50% calc(100% - 4px); transform: rotate(-40deg);
  transition: transform 260ms cubic-bezier(0.55, -0.05, 0.25, 1.18);
}
[data-design="a"] .jf-clamp__lever::before {
  content: ""; position: absolute; left: 50%; top: -2px; width: 14px; height: 22px;
  margin-left: -7px; border-radius: var(--jf-r-lever);
  background: linear-gradient(180deg, #B9BEC2, #9AA0A5);
  transition: background-color 120ms ease-out;
}
[data-design="a"] .jf-clamp__pad {
  position: absolute; left: 44px; top: 10px; width: 34px; height: 8px;
  background: var(--jf-steel); border-radius: var(--jf-r-chip);
  transform: translateY(0); opacity: 0.65;
  transition: transform 260ms cubic-bezier(0.55, -0.05, 0.25, 1.18), opacity 260ms ease-out;
}
[data-design="a"] .jf-clamp__label {
  display: inline-block; font-family: "Segoe UI", Arial, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; font-size: 13px;
  line-height: 1.5; color: var(--jf-bone); margin-top: 16px; max-width: 100%;
}
@media (hover: hover) and (pointer: fine) {
  [data-design="a"] .jf-clamp:hover .jf-clamp__lever { transform: rotate(-52deg); }
}
[data-design="a"] .jf-clamp:focus-visible { outline: 2px solid var(--jf-dykem); outline-offset: 3px; }
[data-design="a"] .jf-clamp:active { transform: scale(0.98); }
[data-design="a"] .jf-clamp[aria-pressed="true"] { border-color: var(--jf-signal); }
[data-design="a"] .jf-clamp[aria-pressed="true"] .jf-clamp__lever { transform: rotate(64deg); }
[data-design="a"] .jf-clamp[aria-pressed="true"] .jf-clamp__lever::before {
  background: linear-gradient(180deg, #F07B45, var(--jf-signal));
}
[data-design="a"] .jf-clamp[aria-pressed="true"] .jf-clamp__pad { transform: translateY(6px); opacity: 1; }

[data-design="a"] .jf-step__next {
  margin-top: 4px; min-height: 48px; padding: 12px 28px; cursor: pointer;
  font-family: "Bahnschrift SemiBold Condensed", "Bahnschrift", "Arial Narrow", sans-serif;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 15px;
  background: var(--jf-dykem); color: var(--jf-card);
  border: 0; border-radius: var(--jf-r-chip); position: relative; z-index: 3;
}
[data-design="a"] .jf-step__next:disabled { opacity: 0.4; cursor: default; }
[data-design="a"] .jf-step__next:focus-visible { outline: 2px solid var(--jf-bone); outline-offset: 3px; }

[data-design="a"] .jf-well { display: block; margin-bottom: 20px; }
[data-design="a"] .jf-well span {
  display: block; font-family: "Segoe UI", Arial, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px;
  color: var(--jf-muted); margin-bottom: 4px;
}
[data-design="a"] .jf-well input {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 10px 12px;
  font-family: "Consolas", "Cascadia Mono", monospace; font-size: 16px;
  color: #1C2225; background: var(--jf-card);
  border: 1px solid #70777C; border-bottom: 2px solid var(--jf-dykem);
  border-radius: var(--jf-r-chip) var(--jf-r-chip) 0 0;
  box-shadow: inset 0 2px 3px rgba(16, 20, 18, 0.25);
}
[data-design="a"] .jf-well input:focus-visible { outline: 2px solid var(--jf-dykem); outline-offset: 2px; }

[data-design="a"] .jf-rail {
  margin-top: 32px; padding: 14px 16px; box-sizing: border-box;
  background: linear-gradient(180deg, #3B4348, #2F373B);
  border: 1px solid #1C2225; border-radius: var(--jf-r-chip);
  min-height: 56px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
[data-design="a"] .jf-rail__label {
  font-family: "Segoe UI", Arial, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 13px; color: var(--jf-muted);
}
[data-design="a"] .jf-rail__stock { display: inline-flex; flex-wrap: wrap; gap: 8px; }
[data-design="a"] .jf-stock-tag {
  display: inline-block; padding: 6px 10px;
  font-family: "Consolas", "Cascadia Mono", monospace; font-size: 14px;
  line-height: 1.5; color: var(--jf-card); background: rgba(42, 90, 128, 0.55);
  border: 1px solid var(--jf-dykem); border-radius: var(--jf-r-chip);
  animation: jf-stock-seat 220ms cubic-bezier(0.2, 0.9, 0.3, 1.05);
}
@keyframes jf-stock-seat {
  from { opacity: 0; transform: translateY(-8px) scale(0.95); }
  70%  { transform: translateY(1px) scale(1.02); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
[data-design="a"] .jf-intake__phone {
  display: inline-flex; align-items: center; margin-left: 16px; min-height: 44px;
  font-family: "Consolas", "Cascadia Mono", monospace; font-size: 16px; color: var(--jf-signal);
}
[data-design="a"] .jf-intake__pass {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 19px; line-height: 1.6; color: #1C2225;
  background: var(--jf-card); border-radius: var(--jf-r-chip);
  box-shadow: 4px 6px 0 rgba(16, 20, 18, 0.5);
  padding: 24px; max-width: 60ch; position: relative;
}
[data-design="a"] .jf-intake__stamp {
  display: inline-block; margin-right: 12px; padding: 4px 10px;
  font-family: "Bahnschrift SemiBold Condensed", "Bahnschrift", "Arial Narrow", sans-serif;
  letter-spacing: 0.1em; font-size: 14px; color: var(--jf-card);
  background: var(--jf-success); border-radius: var(--jf-r-chip);
  transform: rotate(-2deg);
}

/* ============================================================
   7. SCROLL CHOREOGRAPHY — Tool Wall (Materials)
============================================================ */
[data-design="a"] .jf-wall { background: var(--jf-board); padding: clamp(56px, 10vw, 96px) 0; overflow: hidden; }
[data-design="a"] .jf-wall__inner { max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
[data-design="a"] .jf-wall__title {
  font-family: "Bahnschrift SemiBold Condensed", "Bahnschrift", "Arial Narrow", sans-serif;
  text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(1.3rem, 2.8vw, 1.8rem); line-height: 1.2;
  color: var(--jf-bone); margin: 0 0 40px;
}
[data-design="a"] .jf-wall__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { [data-design="a"] .jf-wall__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { [data-design="a"] .jf-wall__grid { grid-template-columns: 1fr; } }
[data-design="a"] .jf-racked {
  position: relative; padding: 20px; box-sizing: border-box;
  border: 2px dashed rgba(216, 212, 198, 0.45); border-radius: var(--jf-r-chip);
  background: rgba(47, 57, 52, 0.6);
}
[data-design="a"] .jf-racked h3 {
  font-family: "Segoe UI", Arial, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px;
  color: #7FB2D6; margin: 0 0 8px;
}
[data-design="a"] .jf-racked p {
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px; line-height: 1.6; color: var(--jf-bone); margin: 0;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-design="a"] .jf-racked {
      animation: jf-rack linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    [data-design="a"] .jf-racked:nth-child(3n+2) { animation-range: entry 5% entry 47%; }
    [data-design="a"] .jf-racked:nth-child(3n)   { animation-range: entry 10% entry 54%; }
    [data-design="a"] .jf-hero .jf-board {
      animation: jf-lamp-off linear both;
      animation-timeline: scroll();
      animation-range: 0 80vh;
    }
  }
}
@keyframes jf-rack {
  from { opacity: 0; transform: translate(10px, -14px) rotate(1.5deg); }
  75%  { transform: translate(-1px, 1px) rotate(-0.3deg); }
  to   { opacity: 1; transform: translate(0, 0) rotate(0); }
}
@keyframes jf-lamp-off {
  from { opacity: 1;   transform: translateY(0); }
  to   { opacity: 0.5; transform: translateY(-5%); }
}

/* ============================================================
   4. MID-PAGE — the Bench (Process) + gauge
============================================================ */
[data-design="a"] .jf-bench { background: var(--jf-board-deep); padding: clamp(56px, 10vw, 96px) 0; border-top: 1px solid rgba(216, 212, 198, 0.2); }
[data-design="a"] .jf-bench__inner {
  max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px);
  display: grid; grid-template-columns: 1fr 220px; gap: 40px; align-items: center;
}
@media (max-width: 720px) {
  [data-design="a"] .jf-bench__inner { grid-template-columns: 1fr; }
  [data-design="a"] .jf-gauge { margin-inline: auto; }
}
[data-design="a"] .jf-bench__title {
  font-family: "Bahnschrift SemiBold Condensed", "Bahnschrift", "Arial Narrow", sans-serif;
  text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(1.3rem, 2.8vw, 1.8rem); line-height: 1.2;
  color: var(--jf-bone); margin: 0 0 32px;
}
[data-design="a"] .jf-bench__steps { margin: 0; padding: 0; list-style: none; counter-reset: jf-station; display: grid; gap: 20px; max-width: 66ch; }
[data-design="a"] .jf-bench__steps li {
  counter-increment: jf-station; position: relative; padding-left: 64px;
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px; line-height: 1.6; color: var(--jf-bone); min-height: 44px;
}
[data-design="a"] .jf-bench__steps li::before {
  content: "0" counter(jf-station);
  position: absolute; left: 0; top: 0; width: 44px; height: 44px;
  display: grid; place-items: center; box-sizing: border-box;
  border: 2px dashed rgba(216, 212, 198, 0.5); border-radius: var(--jf-r-chip);
  font-family: "Consolas", "Cascadia Mono", monospace; font-size: 15px; color: var(--jf-muted);
}
[data-design="a"] .jf-bench__steps strong {
  display: block; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 13px; color: var(--jf-dykem);
}
[data-design="a"] .jf-gauge {
  position: relative; width: 200px; height: 200px; border-radius: 999px;
  background: radial-gradient(circle at 38% 32%, #F6F3EA, var(--jf-card) 55%, #D9D5C8);
  border: 6px solid var(--jf-steel); box-sizing: border-box;
  box-shadow: 4px 6px 0 rgba(16, 20, 18, 0.5);
}
[data-design="a"] .jf-gauge__tick {
  position: absolute; left: 50%; top: 8px; width: 2px; height: 14px;
  margin-left: -1px; background: #2C3631; transform-origin: 50% 86px;
}
[data-design="a"] .jf-gauge__tick--a { transform: rotate(-60deg); }
[data-design="a"] .jf-gauge__tick--b { transform: rotate(0deg); }
[data-design="a"] .jf-gauge__tick--c { transform: rotate(60deg); }
[data-design="a"] .jf-gauge__needle {
  position: absolute; left: 50%; top: 22px; width: 3px; height: 78px;
  margin-left: -1.5px; background: var(--jf-signal);
  transform-origin: 50% 72px;
  animation: jf-indicate 18s ease-in-out infinite;
}
@keyframes jf-indicate {
  0%, 100% { transform: rotate(-52deg); }
  50%      { transform: rotate(52deg); }
}
[data-design="a"] .jf-gauge__hub {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 18px;
  margin: -9px 0 0 -9px; border-radius: 999px;
  background: var(--jf-steel); border: 3px solid #70777C; box-sizing: border-box;
}

/* ============================================================
   Repeated funnel CTA
============================================================ */
[data-design="a"] .jf-repeat { background: var(--jf-board); padding: clamp(56px, 10vw, 96px) 0; border-top: 1px solid rgba(216, 212, 198, 0.2); }
[data-design="a"] .jf-repeat__inner {
  max-width: 880px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
}
[data-design="a"] .jf-repeat__copy { font-size: 19px; line-height: 1.5; color: var(--jf-bone); margin: 0; max-width: 40ch; }

/* ============================================================
   About / Trust
============================================================ */
[data-design="a"] .jf-about { background: var(--jf-board-deep); padding: clamp(56px, 10vw, 96px) 0; border-top: 1px solid rgba(216, 212, 198, 0.2); }
[data-design="a"] .jf-about__inner { max-width: 880px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
[data-design="a"] .jf-about__title {
  font-family: "Bahnschrift SemiBold Condensed", "Bahnschrift", "Arial Narrow", sans-serif;
  text-transform: uppercase; letter-spacing: 0.02em;
  font-size: clamp(1.3rem, 2.8vw, 1.8rem); line-height: 1.2;
  color: var(--jf-bone); margin: 0 0 20px;
}
[data-design="a"] .jf-about__copy { font-size: 17px; line-height: 1.6; color: var(--jf-bone); max-width: 66ch; margin: 0 0 24px; }
[data-design="a"] .jf-trust-row { display: flex; flex-wrap: wrap; gap: 12px; }
[data-design="a"] .jf-trust-chip {
  display: inline-block; padding: 8px 14px;
  font-family: "Segoe UI", Arial, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px;
  color: var(--jf-muted); border: 1px solid rgba(216, 212, 198, 0.4);
  border-left: 3px solid var(--jf-dykem); border-radius: var(--jf-r-chip);
}

/* ============================================================
   Footer
============================================================ */
[data-design="a"] .jf-footer { background: #1C2225; padding: clamp(40px, 8vw, 64px) 0; border-top: 3px solid var(--jf-signal); }
[data-design="a"] .jf-footer__inner { max-width: 1320px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); }
[data-design="a"] .jf-footer__firm {
  font-family: "Bahnschrift SemiBold Condensed", "Bahnschrift", "Arial Narrow", sans-serif;
  text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.1rem; color: var(--jf-bone); margin: 0 0 8px;
}
[data-design="a"] .jf-footer__phone {
  display: inline-block; font-family: "Consolas", "Cascadia Mono", monospace;
  font-size: 16px; color: var(--jf-signal); text-decoration: none; margin-bottom: 8px; min-height: 44px;
}
[data-design="a"] .jf-footer__area, [data-design="a"] .jf-footer__copy { font-size: 13px; line-height: 1.6; color: var(--jf-muted); margin: 4px 0 0; }

/* ============================================================
   Motion floor — reduced-motion fallback (ALL elements)
============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-design="a"] .jf-header__lamp::before { animation: none; transform: translateX(145%); }
  [data-design="a"] .jf-panelwrap__panel,
  [data-design="a"] .jf-panelwrap__scrim,
  [data-design="a"] .jf-hook__stem,
  [data-design="a"] .jf-hook__curl { transition: none; }
  [data-design="a"] .jf-cta__grip { animation: none; }
  [data-design="a"] .jf-cta { transition: none; }
  [data-design="a"] .jf-board__lamp { animation: none; transform: translateX(128%); }
  [data-design="a"] .jf-tool { animation: none; opacity: 1; transform: none; }
  [data-design="a"] .jf-pointer__chevron { animation: none; }
  [data-design="a"] .jf-clamp,
  [data-design="a"] .jf-clamp__lever,
  [data-design="a"] .jf-clamp__lever::before,
  [data-design="a"] .jf-clamp__pad { transition: none; }
  [data-design="a"] .jf-step.is-current,
  [data-design="a"] .jf-stock-tag { animation: none; }
  [data-design="a"] .jf-gauge__needle { animation: none; transform: rotate(0deg); }
  [data-design="a"] .jf-racked,
  [data-design="a"] .jf-hero .jf-board { animation: none; }
}

/* ============================================================
   Mobile safety sweep — HARD (append-at-bottom contract)
============================================================ */
[data-design="a"].dq-design,
[data-design="a"] .dq-design { max-width: 100%; overflow-x: clip; }
[data-design="a"].dq-design * { min-width: 0; }
[data-design="a"].dq-design img,
[data-design="a"].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="a"] .jf-hero__subtitle { margin-inline: auto; }
[data-design="a"] .jf-pointer__label { margin-inline: auto; }
[data-design="a"] .jf-fixture__intro { margin-inline: auto; }
[data-design="a"] .jf-intake__pass { margin-inline: auto; }
[data-design="a"] .jf-bench__steps { margin-inline: auto; }
[data-design="a"] .jf-repeat__copy { margin-inline: auto; }
[data-design="a"] .jf-about__copy { margin-inline: auto; }

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