/* Signal components: A4 building section (home hero), D wall assemblies (New Buildings & Renovations)
   and B one-floor signal map (How It Works, DAS Necessity Score). Started on November 8, 2026 from
   the rules the reviewed concepts page used for these three components, in the same order; maintained
   here from now on (the concepts page keeps its own frozen concepts.css). Colors, type and spacing
   come from tokens.css and the night scope in site.css. ILLUSTRATIVE drawings only. */

/* Without JavaScript: the static drawing and the readings show; the step buttons and captions hide. */
.cx__nojs { padding: var(--s-4) 0; color: var(--ink-2); }
.cx:not(.is-live) .cx__bar, .cx:not(.is-live) .cx__caption { display: none; }

.cx-tag { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: 1; flex: none; }
.cx__stage { position: relative; }
.cx__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.cx__stage > svg { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.cx .bldg .poche { fill: var(--ink-2); }
.cx .bldg .thin { stroke: var(--ink-3); }
.cx .bldg .tower { stroke: var(--ink-2); }
.cx .bldg .cloud { stroke-width: 2; }
.cx__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.seg--sm button { min-height: 40px; padding: 6px 12px; font-size: 13px; }
.cx__caption { margin-top: var(--s-4); max-width: 64ch; min-height: 2.9em; font-size: var(--t-lg); line-height: 1.45; color: var(--ink); }
.pin { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--ink-3); border-radius: 50%; font-size: 12px; font-weight: 700; color: var(--ink); }
.cx__note { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-2); }
.bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; color: var(--accent); }
.bars i { display: block; width: 5px; border-radius: 1px; background: var(--line-2); transition: background-color .35s; }
.bars i:nth-child(1) { height: 28%; }
.bars i:nth-child(2) { height: 52%; }
.bars i:nth-child(3) { height: 76%; }
.bars i:nth-child(4) { height: 100%; }
.bars[data-b="1"] i:nth-child(-n+1), .bars[data-b="2"] i:nth-child(-n+2), .bars[data-b="3"] i:nth-child(-n+3), .bars[data-b="4"] i { background: currentColor; }
[data-src="sys"] .bars { color: #FFC46B; }
.cx-pin { fill: #10191D; stroke: #4D5E66; stroke-width: 2.6; transition: stroke .5s; }
.cx-pin-t { fill: var(--ink); font-family: var(--font-sans); font-size: 13px; font-weight: 700; text-anchor: middle; }
.cx-xray__stage { padding-block: var(--s-2) var(--s-4); }
.xray { font-family: var(--font-sans); overflow: visible; }
.xray .xr-face { stroke: rgb(191 239 245 / 55%); stroke-width: 1.2; }
.xray .xr-top { fill: rgb(191 239 245 / 22%); stroke: rgb(191 239 245 / 45%); stroke-width: 1; }
.xray .xr-edge { fill: rgb(127 201 211 / 38%); }
.xray .xr-tower { fill: none; stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.xray .xr-wave { fill: none; stroke: #4FDDE6; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .xray .xr-wave { stroke-width: 2.4px; vector-effect: non-scaling-stroke; }
}
.xray .xw-re { stroke: #8FD3DD; }
.xray .xr-arrow { fill: none; stroke: #8FD3DD; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: opacity .6s; }
.xray .xr-hit { fill: #4FDDE6; opacity: .5; transition: opacity .6s; }
.cx-xray:is([data-state="alternative"], [data-state="ours"]) .xray .xr-hit { opacity: .12; }
.cx-xray:is([data-state="alternative"], [data-state="ours"]) .xray .xr-arrow { opacity: .35; }
.xray .xr-st { transition: opacity .7s var(--ease); }
.cx-xray[data-state="designed"] :is(.xr-st--alternative, .xr-st--ours), .cx-xray:is([data-state="alternative"], [data-state="ours"]) .xr-st--designed { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .xray .xr-wave.is-right { animation: xr-right 1.15s linear infinite; }
  .xray .xr-wave.is-left { animation: xr-left 1.15s linear infinite; }
}
.xray .xr-ph { fill: #10191D; stroke: var(--ink-2); stroke-width: 2; }
.xray .xr-ph-scr { fill: #0A1114; }
.xray .xr-bar { fill: #314650; transition: fill .5s; }
.cx-xray[data-state="designed"] .xray .xr-bar1, .cx-xray:is([data-state="alternative"], [data-state="ours"]) .xray .xr-bar { fill: #4FDDE6; }
.xray .xr-lab { fill: var(--ink-2); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .12em; }
.xray .xr-leader { fill: none; stroke: var(--ink-3); stroke-width: 1.2; }
.xray .xr-side { fill: var(--ink-3); font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em; }
@media (max-width: 640px) {
  .xray .svg-label { display: none; }
}
@media (max-width: 759.98px) {
  .cx-xray__stage { margin-left: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); margin-right: calc(-1 * max(16px, env(safe-area-inset-right, 0px))); }
  .seg--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cx__caption { font-size: var(--t-base); }
}
@media (max-width: 759.98px) {
  .seg.seg--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.bldg--v2 .span { fill: #33454C; }
.bldg--v2 .pan { fill: none; stroke: #E6ECEF; stroke-width: 2; }
.bldg--v2 .span-new { fill: rgb(94 169 179 / 55%); stroke: var(--accent); stroke-width: 1.2; }
.bldg--v2 .insul { fill: #2E3D43; }
.bldg--v2 .foil { fill: none; stroke: #E6ECEF; stroke-width: 1.4; }
.bldg--v2 .insul-new { fill: rgb(94 169 179 / 45%); stroke: var(--accent); stroke-width: 1; }
.bldg--v2 .mull { fill: none; stroke: var(--ink-2); stroke-width: 1.4; }
.bldg--v2 .l-span-after { opacity: 0; }
.bldg--v2 .l-span-before, .bldg--v2 .l-span-after, .bldg--v2 .l-foil-before, .bldg--v2 .tag1a, .bldg--v2 .tag2a { transition: opacity var(--dur) var(--ease); }
.bldg--v2.is-live .l-signal { opacity: 0; }
.rx { margin-top: var(--s-5); }
.rx__head, .rx__list li { display: grid; grid-template-columns: 28px minmax(9em, 15em) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 6px 16px; }
.rx__head { padding-bottom: 10px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.rx__head span { display: inline-flex; align-items: center; gap: 8px; }
.rx__head .icon { width: 16px; height: 16px; color: var(--ink-2); }
.rx__list { list-style: none; margin: 0; padding: 0; }
.rx__list li { min-height: 52px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: var(--ink-2); }
.rx__name { color: var(--ink); }
.rx__svc { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.rx__ico { display: none; width: 16px; height: 16px; color: var(--ink-3); flex: none; }
.rx__word { font-weight: 650; color: var(--ink); }
.rx__src { display: none; grid-column: 3 / -1; font-size: 12px; font-weight: 500; color: #FFC46B; }
.rx__list li[data-src="sys"] .rx__src { display: block; }
.rx__foot { display: grid; gap: var(--s-3); margin-top: var(--s-4); max-width: 72ch; }
@media (max-width: 640px) {
  .rx__head { display: none; }
  .rx__list li { grid-template-columns: 28px minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "pin name name" ". radio cell" ". src src"; }
  .rx__list li .pin { grid-area: pin; }
  .rx__name { grid-area: name; }
  .rx__svc[data-svc="radio"] { grid-area: radio; }
  .rx__svc[data-svc="cell"] { grid-area: cell; }
  .rx__src { grid-area: src; }
  .rx__ico { display: inline-block; }
  .rx__svc { gap: 8px; font-size: 14px; }
}
.cx-xray.night { padding: clamp(14px, 2.2vw, 28px); border-radius: 3px; }
.xr-pair { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .xr-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.xr-fig { margin: 0; padding: var(--s-4) var(--s-3) var(--s-2); border: 1px solid var(--line); }
.xr-cap { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 650; color: var(--ink); }
.xr-layers { display: none; margin-top: 6px; font-size: 13px; color: var(--ink-2); }
@media (max-width: 640px) {
  .xr-layers { display: block; }
}
.xray--wall .xr-face { stroke: rgb(191 239 245 / 35%); stroke-width: 1; }
.xray--wall .xr-top { fill: rgb(191 239 245 / 14%); stroke: rgb(191 239 245 / 30%); }
.bldg--v3 .conc { stroke: var(--ink-2); stroke-width: 1; }
.bldg--v3 .rebar { fill: none; stroke: #E6ECEF; stroke-width: 1.3; stroke-dasharray: 2.5 3; }
.bldg--v3 .rebar-new { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 2.5 3; }
.bldg--v3 .door { fill: #C9D2D6; stroke: #0A1114; stroke-width: .8; }
.bldg--v3 .door-new { fill: rgb(94 169 179 / 60%); stroke: var(--accent); stroke-width: 1.2; }
.bldg--v3 .das-area { fill: rgb(255 196 107 / 5%); stroke: var(--sys); stroke-width: 1.6; stroke-dasharray: 7 5; }
.bldg--v3 .das-t { fill: var(--sys); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .1em; }
.bldg--v3 :is(.l-span-after, .l-foil-after, .l-rebar-e-after, .l-rebar-k-after, .l-doors-after, .l-ridge-after, .l-lining-after, .l-block-after, .l-das, .l-keys3, .c3-d, .c3-s) { opacity: 0; }
.bldg--v3 :is(.l-span-before, .l-span-after, .l-foil-before, .l-foil-after, .l-rebar-e-before, .l-rebar-e-after, .l-rebar-k-before, .l-rebar-k-after, .l-doors-before, .l-doors-after, .l-ridge-before, .l-ridge-after, .l-lining-before, .l-lining-after, .l-block-before, .l-block-after, .l-das, .l-keys3, .c3-d, .c3-s) { transition: opacity var(--dur) var(--ease); }
.cx-xray .xr-d, .cx-xray .xr-o { transition: opacity .6s var(--ease); }
.cx-xray .xr-o, .cx-xray[data-state="ours"] .xr-d { opacity: 0; }
.cx-xray[data-state="ours"] .xr-o { opacity: 1; }
.xr-o-t { display: none; }
.cx-xray[data-state="ours"] .xr-d-t { display: none; }
.cx-xray[data-state="ours"] .xr-o-t { display: inline; }
.cx-floor__stage { touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.fp { font-family: var(--font-sans); overflow: hidden; }
.fp .p-site-c { fill: #10191D; stroke: var(--ink-2); stroke-width: 2; stroke-linejoin: round; }
.fp .p-sector { fill: var(--ink-2); }
.fp .p-note { fill: var(--ink-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-anchor: middle; }
.fp .p-note--l { text-anchor: start; fill: var(--ink-2); }
.fp .p-note.p-dim { fill: var(--ink-3); }
.fp .p-north { fill: var(--ink-2); }
.fp .p-n { fill: var(--ink-2); font-size: 12px; font-weight: 700; text-anchor: middle; }
.fp .p-east path { fill: none; stroke: #4FDDE6; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .5; }
.fp .p-furn rect, .fp .p-furn path { fill: none; stroke: rgb(238 243 244 / 20%); stroke-width: 1.1; }
.fp .p-furn .p-tread { stroke: rgb(238 243 244 / 34%); stroke-width: 1; }
.fp .p-furn .p-up { stroke: rgb(238 243 244 / 50%); stroke-width: 1.2; stroke-linecap: round; }
.fp .p-glass, .fp .p-win { fill: var(--glass); stroke: rgb(238 243 244 / 40%); stroke-width: .8; }
.fp .p-mull { fill: none; stroke: var(--ink-2); stroke-width: 1.4; }
.fp .p-span { fill: none; stroke-width: 2.4; stroke-dasharray: 10 6; transition: opacity .5s var(--ease); }
.fp .p-span-d { stroke: #E6ECEF; }
.fp .p-span-o { stroke: var(--accent); opacity: 0; }
.fp .p-conc { stroke: rgb(238 243 244 / 50%); stroke-width: .8; }
.fp .p-col { fill: var(--ink-2); }
.fp .p-foil { fill: none; stroke-width: 1.6; transition: opacity .5s var(--ease); }
.fp .p-foil-d { stroke: #F2F6F8; }
.fp .p-reb { fill: none; stroke: #C9D2D6; stroke-width: 1.1; stroke-dasharray: 2 2.6; transition: opacity .5s var(--ease); }
.fp .p-reb-o { stroke: var(--accent); stroke-width: 1.4; opacity: 0; }
.fp .p-door { fill: #C9D2D6; stroke: #0A1114; stroke-width: .6; transition: opacity .5s var(--ease); }
.fp .p-door-o { fill: rgb(94 169 179 / 80%); stroke: var(--accent); opacity: 0; }
.fp .p-swing { fill: none; stroke: rgb(238 243 244 / 40%); stroke-width: 1; }
.fp .p-part { fill: var(--ink-3); }
.fp .p-room text, .fp .p-face-t { fill: var(--ink-3); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-anchor: middle; }
.fp .p-das { opacity: 0; transition: opacity .5s var(--ease); }
.fp .p-das-halo { fill: rgb(255 196 107 / 16%); }
.fp .p-das-ant { fill: #10191D; stroke: #FFC46B; stroke-width: 2.2; stroke-linejoin: round; }
.fp .p-grid { display: none; }
.fp .p-cell-r { fill: none; stroke: rgb(238 243 244 / 30%); stroke-width: 1; stroke-dasharray: 4 4; }
.fp .p-mark circle { fill: #0A1114; stroke-width: 2; }
.fp .p-mark path { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.fp .is-pass .p-mark circle, .fp .is-pass .p-ok { stroke: #4FDDE6; }
.fp .is-pass .p-no, .fp .is-fail .p-ok { display: none; }
.fp .is-fail .p-mark circle, .fp .is-fail .p-no { stroke: var(--redline); }
.fp .is-fail .p-cell-r { fill: rgb(255 107 91 / 9%); stroke: rgb(255 107 91 / 55%); }
.fp[data-size="xs"] .svg-label { display: none; }
.cx-floor:not([data-state="designed"]) .fp :is(.p-span-o, .p-foil-o, .p-reb-e-o) { opacity: 1; }
.cx-floor:not([data-state="designed"]) .fp :is(.p-span-d, .p-foil-d, .p-reb-e-d) { opacity: 0; }
.cx-floor:is([data-state="recommended"], [data-state="das"]) .fp :is(.p-reb-k-o, .p-door-o, .p-roof) { opacity: 1; }
.cx-floor:is([data-state="recommended"], [data-state="das"]) .fp :is(.p-reb-k-d, .p-door-d) { opacity: 0; }
.cx-floor[data-state="das"] .fp .p-das { opacity: 1; }
.cx-floor__sum { display: none; margin-top: var(--s-3); font-family: var(--font-mono); font-size: 13px; letter-spacing: .03em; color: var(--ink); }
.fk { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; margin-top: var(--s-4); font-size: 12px; color: var(--ink-2); }
.fk-ramp { display: grid; grid-template-columns: 17.9fr 14.2fr 14.3fr 14.3fr 39.3fr; width: min(100%, 560px); row-gap: 6px; }
.fk-bar { grid-column: 1 / -1; height: 10px; border-radius: 2px; background: linear-gradient(90deg, rgb(10 17 20) 0%, rgb(9 42 52) 22%, rgb(13 96 108) 46%, rgb(40 176 189) 70%, rgb(104 220 228) 88%, rgb(196 246 249) 100%); box-shadow: inset 0 0 0 1px var(--line-2); }
.fk-ramp span { padding-right: 4px; line-height: 1.25; }
.fk-das { display: inline-flex; align-items: center; gap: 8px; }
.fk-das i { width: 14px; height: 10px; border-radius: 2px; background: linear-gradient(90deg, #946018, #FFD696); }
.fk-grid { display: none; align-items: center; gap: 14px; }
.fk-grid span { display: inline-flex; align-items: center; gap: 6px; }
.fk-grid .ok { color: var(--accent); font-weight: 700; }
.fk-grid .no { color: var(--redline); font-weight: 700; }
@media (max-width: 759.98px) {
  .cx-floor .cx__stage { margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); }
}
.fp .p-room text, .fp .p-face-t { fill: var(--ink-2); paint-order: stroke; stroke: rgb(10 17 20 / 72%); stroke-width: 2px; stroke-linejoin: round; }
.fp .p-sheet .p-note { font-size: 10px; }
.fp .p-plate { fill: rgb(10 17 20 / 82%); }
.fk-roof { display: none; align-items: center; gap: 8px; }
.cx-floor:is([data-state="recommended"], [data-state="das"]) .fk-roof { display: inline-flex; }
.fk-roof svg { width: 18px; height: 18px; fill: none; stroke: #4FDDE6; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fk-das { display: none; }
.cx-floor[data-state="das"] .fk-das { display: inline-flex; }
.bldg--v4 .metal-roof { fill: none; stroke: #E6ECEF; stroke-width: 1.6; }
.bldg--v4 .ridge-slots { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 10 8; }
.bldg--v4 .insul-swap { fill: rgb(233 199 123 / 42%); stroke: var(--accent); stroke-width: .9; }
.bldg--v4 .wall-ours { fill: rgb(94 169 179 / 58%); stroke: var(--accent); stroke-width: 1.2; }
.bldg--v4 .studs { fill: none; stroke: #E6ECEF; stroke-width: 1.2; }
.bldg--v4 :is(.l-roof-after, .l-foil-swap, .l-wall-after, .l-pent-after, .l-keys4, .c4-d, .c4-s, .kn-s, .kn-i) { opacity: 0; }
.bldg--v4 :is(.l-roof-before, .l-roof-after, .l-foil-swap, .l-wall-after, .l-pent-before, .l-pent-after, .l-keys4, .c4-d, .c4-s, .kn-s, .kn-i) { transition: opacity var(--dur) var(--ease); }
.bldg--v4[data-step="v4-designed"] .c4-d { opacity: 1; }
.bldg--v4:is([data-step="v4-swaps"], [data-step="v4-integrated"], [data-step="v4-das"]) :is(.l-span-after, .l-foil-swap) { opacity: 1; }
.bldg--v4:is([data-step="v4-swaps"], [data-step="v4-integrated"], [data-step="v4-das"]) :is(.l-span-before, .l-foil-before) { opacity: 0; }
.bldg--v4[data-step="v4-swaps"] :is(.c4-s, .l-keys4, .kn-s) { opacity: 1; }
.bldg--v4:is([data-step="v4-integrated"], [data-step="v4-das"]) :is(.l-roof-after, .l-wall-after, .l-rebar-k-after, .l-doors-after, .l-pent-after) { opacity: 1; }
.bldg--v4:is([data-step="v4-integrated"], [data-step="v4-das"]) :is(.l-roof-before, .l-rebar-e-before, .l-rebar-k-before, .l-doors-before, .l-pent-before) { opacity: 0; }
.bldg--v4[data-step="v4-das"] .l-das { opacity: 1; }
.xray--r4 .xl-std .xr-face { stroke: rgb(191 239 245 / 35%); stroke-width: 1; }
.xray--r4 .xl-std .xr-top { fill: rgb(191 239 245 / 16%); stroke: rgb(191 239 245 / 32%); stroke-width: 1; }
.xray--r4 .xl-std .xr-edge { fill: #34454B; }
.xray--r4 .xr-back { fill: #16232A; stroke: rgb(191 239 245 / 22%); stroke-width: 1; }
.xray--r4 .xl-ours .xr-face { stroke: #4FDDE6; stroke-width: 1.4; }
.xray--r4 .xl-ours .xr-top { fill: rgb(79 221 230 / 24%); stroke: #4FDDE6; stroke-width: 1; }
.xray--r4 .xl-ours .xr-edge { fill: rgb(79 221 230 / 36%); }
.xray--r4 .xl-ours .xr-back { fill: rgb(79 221 230 / 12%); stroke: #4FDDE6; }
.xray--r4 .xr-lab.xr-ours { fill: #4FDDE6; }
.xray--r4 .xr-leader.xr-ours { stroke: #4FDDE6; }
.xray--r4 .xr-lab--sub { font-size: 10.5px; letter-spacing: .16em; fill: #8FD3DD; }
.fp :is(.p-foil-s, .p-wall-o, .p-ridge, .p-face-s, .p-face-n-s, .p-face-n-i, .p-pent) { opacity: 0; transition: opacity .5s var(--ease); }
.fp :is(.p-foil-d, .p-face-d, .p-face-n-d) { transition: opacity .5s var(--ease); }
.fp .p-foil-s { stroke: rgb(79 221 230 / 75%); stroke-dasharray: 5 3; }
.fp .p-wall-o rect { fill: rgb(94 169 179 / 55%); stroke: var(--accent); stroke-width: 1; }
.fp .p-ridge-l { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: 12 8; stroke-linecap: round; }
.fp .p-ridge-t { fill: var(--accent); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-anchor: middle; paint-order: stroke; stroke: rgb(10 17 20 / 75%); stroke-width: 2px; stroke-linejoin: round; }
.fp .p-pent circle { fill: #0A1114; stroke: var(--accent); stroke-width: 1.6; }
.fp .p-pent path { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fp .p-mark circle { fill: rgb(10 17 20 / 88%); }
.cx-floor:not([data-state="designed"]) .fp :is(.p-foil-d, .p-face-d, .p-face-n-d) { opacity: 0; }
.cx-floor:not([data-state="designed"]) .fp :is(.p-foil-s, .p-face-s) { opacity: 1; }
.cx-floor[data-state="swaps"] .fp :is(.p-face-n-s, .p-reb-e-d) { opacity: 1; }
.cx-floor:is([data-state="integrated"], [data-state="das"]) .fp :is(.p-wall-o, .p-ridge, .p-face-n-i, .p-reb-k-o, .p-door-o, .p-pent) { opacity: 1; }
.cx-floor:is([data-state="integrated"], [data-state="das"]) .fp :is(.p-reb-e-d, .p-reb-k-d, .p-door-d) { opacity: 0; }
.cx-floor[data-grid="on"] .fp .p-grid { display: inline; }
.cx-floor[data-grid="on"] .cx-floor__sum { display: block; }
.cx-floor[data-grid="on"] .fk-grid { display: inline-flex; }
.cx-floor:is([data-state="integrated"], [data-state="das"]) .fk-roof { display: inline-flex; }
.fk-ridge { display: none; align-items: center; gap: 8px; }
.cx-floor:is([data-state="integrated"], [data-state="das"]) .fk-ridge { display: inline-flex; }
.fk-ridge i { width: 22px; border-top: 2.4px dashed #4FDDE6; }
.cx-floor__tools { display: flex; flex-wrap: wrap; gap: 10px; }
.cx-floor [data-floor-grid] { justify-content: center; }
.cx-floor [data-floor-grid][aria-pressed="true"] { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 14%, transparent); }
@media (max-width: 759.98px) {
  .cx-floor__tools { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 6px; width: 100%; }
  .cx-floor__tools .seg { width: 100%; }
}
.bldg--v4 .c4-i { opacity: 0; transition: opacity var(--dur) var(--ease); }
.bldg--v4[data-step="v4-integrated"] .c4-i { opacity: 1; }
.bldg--v4 :is(.tag-sw, .tag-int) .tag-box { stroke: var(--accent); }
.bldg--v4 :is(.tag-sw, .tag-int) .tag-t { fill: var(--accent); }
.bldg--v4 .leader--acc { stroke: var(--accent); }
.bldg--v4 .site-t { fill: var(--ink-3); font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-anchor: middle; }
.cx-evidence { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: var(--s-3) 0 0; font-size: 13px; color: var(--ink-3); }
.cx-plate { display: none; }
.cx-floor.is-crop .cx-plate { display: inline; }
.cx-callout { display: none; margin-top: var(--s-3); padding-left: 12px; border-left: 3px solid var(--accent); font-size: 14px; line-height: 1.45; color: var(--ink); }
.cx-floor.is-crop .cx-callout { display: block; }
.cx-next { margin-top: var(--s-5); }
.cx-next a { font-weight: 650; color: var(--accent); text-underline-offset: 3px; }
.cx-floor__sum { font-family: var(--font-sans); font-size: 15px; letter-spacing: 0; }
.rx-wrap > .rx-sum { display: none; }
.rx-wrap > .rx-sum::-webkit-details-marker { display: none; }
@media (max-width: 640px) {
  .rx-wrap { margin-top: var(--s-4); border: 1px solid var(--line-2); border-radius: var(--radius); }
  .rx-wrap > .rx-sum { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 10px 14px; list-style: none; cursor: pointer; font-weight: 650; color: var(--ink); }
  .rx-wrap > .rx-sum::after { content: "+"; font-size: 22px; font-weight: 400; color: var(--ink-3); }
  .rx-wrap[open] > .rx-sum::after { content: "\2212"; }
  .rx-wrap .rx { margin-top: 0; padding: 0 14px 10px; }
}
@media (max-width: 759.98px) {
  .cx-spots4, .cx-floor { display: flex; flex-direction: column; }
  .cx-spots4 > .cx__stage, .cx-floor > .cx__stage { order: 0; }
  .cx-spots4 > .cx-evidence, .cx-floor > .cx-evidence { order: 1; }
  .cx-floor > .cx-callout { order: 2; }
  .cx-spots4 > .cx__caption, .cx-floor > .cx__caption { order: 3; }
  .cx-spots4 > .cx__bar, .cx-floor > .cx__bar { order: 4; margin-top: var(--s-3); }
  .cx-floor > .cx-floor__sum { order: 5; }
  .cx-floor > .fk { order: 6; }
  .cx-spots4 > .rx-wrap, .cx-floor > .rx-wrap { order: 7; }
  .cx-spots4 > .cx-next { order: 8; }
}
.bldg--v4[data-size="xs"] .cx-pin { r: 21px; stroke-width: 3.4; }
.bldg--v4[data-size="xs"] .cx-pin-t { font-size: 21px; transform: translateY(2px); }
@media (max-width: 759.98px) {
  .cx-spots4 > .cx__stage { margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); }
}
.fp[data-size="xs"] .cx-pin { r: 20px; }
.fp[data-size="xs"] .cx-pin-t { font-size: 19px; transform: translateY(1.5px); }
.cx-site { display: none; margin: 0 0 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.cx-floor.is-crop > .cx-site, .cx-spots4:has(svg.bldg[data-size="xs"]) > .cx-site { display: block; }
.cx-site__arrow { font-family: var(--font-sans); font-size: 17px; font-weight: 700; line-height: 1; letter-spacing: 0; color: var(--accent); }
@media (max-width: 640px) {
  .cx-xray.night { display: flex; flex-direction: column; }
  .cx-xray > .cx__bar { order: -1; position: sticky; top: var(--header-h, 64px); z-index: 4; margin: 0 0 var(--s-3); padding: 10px 0; border-top: 0; border-bottom: 1px solid var(--line); background: var(--paper); }
  .cx-xray > .cx-evidence { order: 1; }
  .cx-xray > .cx__caption { order: 2; }
  .xray .xr-side { font-size: 18px; }
}
.cx-spots4.is-auto .seg button[aria-pressed="true"], .cx-floor.is-auto .seg--four button[aria-pressed="true"] { position: relative; overflow: hidden; }
.cx-spots4.is-auto .seg button[aria-pressed="true"]::after, .cx-floor.is-auto .seg--four button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: rgb(5 34 38 / 55%); transform-origin: left center; animation: cx-fill 5s linear forwards; }
.cx-spots4.is-held .seg button[aria-pressed="true"]::after { animation-play-state: paused; }
.xray .xr-glow { opacity: 0; transition: opacity .8s var(--ease); }
.cx-xray[data-state="designed"] .xray .xr-glow { opacity: .12; }
.cx-xray[data-state="ours"] .xray .xr-glow { opacity: 1; }
.xr-reach { max-width: none; margin: 6px 0 0; padding-right: 5%; text-align: right; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.xr-reach strong { font-weight: 650; color: var(--ink); }
.cx-xray[data-state="ours"] .xr-reach strong { color: var(--accent); }
.fp .p-ridge-t { text-anchor: end; }
@media (max-width: 640px) {
  .xr-fig { display: flex; flex-direction: column; }
  .xr-fig > .xr-layers { order: 1; }
  .xr-fig > .xr-reach { order: 2; padding-right: 0; text-align: left; }
}
@keyframes xr-right { from { transform: translateX(0); } to { transform: translateX(36px); } }
@keyframes xr-left { from { transform: translateX(0); } to { transform: translateX(-36px); } }
@keyframes cx-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Home walkthrough (jy): the rendered building, section view to the top floor ----------
   Without JavaScript: one still image, then the steps as a readable list.
   With JavaScript (.is-live): the stage sticks under the header while the steps scroll past as
   spacers; the caption under the stage mirrors the active step. */
.jy { --jy-cap: clamp(188px, 26svh, 236px); position: relative; background: var(--paper); }
.jy__skip:not(:focus) { clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; white-space: nowrap; }
.jy__skip:focus { top: 8px; }
.jy__stage { position: relative; margin: 0; }
.jy__still { display: block; width: 100%; height: auto; }
.jy__canvas { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.jy__tag { position: absolute; left: 0; top: 0; max-width: 100%; white-space: normal; }
.jy__cap { display: none; }
.jy__steps { list-style: none; margin: 0 auto; padding-block: var(--s-6) var(--s-8); display: grid; gap: var(--s-5); }
.jy__step h3 { font-size: var(--t-h4); font-stretch: var(--stretch-sub); }
.jy__step p { margin-top: var(--s-2); max-width: var(--text-max); color: var(--ink-2); }
.jy__end { height: 1px; }
.jy__end:focus { outline: none; }

.jy.is-live .jy__sticky { position: sticky; top: var(--header-h); z-index: 1; height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h)); }
.jy.is-live .jy__frame { display: flex; flex-direction: column; justify-content: center; gap: var(--s-3); height: 100%; padding-block: var(--s-3); }
.jy.is-live .jy__stage { flex: none; width: min(100%, calc((100svh - var(--header-h) - var(--jy-cap) - 2 * var(--s-3)) * 2)); aspect-ratio: 2 / 1; margin-inline: auto; }
.jy.is-live .jy__still { display: none; }
.jy.is-live .jy__canvas { display: block; }
.jy.is-live .jy__cap { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "body plan" "bar bar"; align-content: start; gap: var(--s-3) var(--s-6); width: min(100%, calc((100svh - var(--header-h) - var(--jy-cap) - 2 * var(--s-3)) * 2)); min-height: var(--jy-cap); margin-inline: auto; }
.jy.is-live .jy__steps { display: block; padding: 0; gap: 0; pointer-events: none; }
.jy.is-live .jy__step { position: relative; height: 78vh; height: 78svh; }
.jy.is-live .jy__step--move { height: 190vh; height: 190svh; }
.jy.is-live .jy__step--last { height: 96vh; height: 96svh; }
.jy.is-live .jy__step > * { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.jy__capbody { grid-area: body; min-width: 0; }
.jy__kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.jy__title { margin-top: 4px; font-size: var(--t-h3); font-stretch: var(--stretch-sub); font-weight: 650; line-height: 1.2; color: var(--ink); }
.jy__text { margin-top: 6px; max-width: 64ch; color: var(--ink-2); line-height: 1.5; }
.jy__plan { grid-area: plan; display: grid; align-content: start; justify-items: end; gap: 8px; max-width: 360px; }
.jy__plan[hidden] { display: none; }
.jy__sum { font-size: var(--t-sm); font-weight: 600; color: var(--ink); text-align: right; }
.jy__walls { font-size: var(--t-xs); color: var(--ink-3); text-align: right; }
.jy__key { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: 2px 10px; font-size: 12px; color: var(--ink-3); }
.jy__ramp { grid-column: 1 / 3; width: 168px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #08141A 0%, #0A2C36 30%, #0E6876 50%, #22B2C0 70%, #62DEE6 86%, #C4F6F9 100%); }
.jy__key span:nth-child(2) { grid-column: 1; grid-row: 2; }
.jy__key span:nth-child(3) { grid-column: 2; grid-row: 2; justify-self: end; }
.jy__key-das { grid-column: 3; grid-row: 1 / 3; display: inline-flex; align-items: center; gap: 6px; }
.jy__key-das::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #F2A93B; box-shadow: 0 0 0 4px rgb(242 169 59 / 22%); }
.jy__bar { grid-area: bar; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: var(--s-3); border-top: 1px solid var(--line); }
.jy__dots { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.jy__dots button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line-2); border-radius: 50%; background: transparent; color: var(--ink-2); font: inherit; font-size: 13px; font-weight: 650; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.jy__dots button:hover { border-color: var(--ink-3); color: var(--ink); }
.jy__dots button[aria-current="step"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }
.jy__dots-move { display: flex; align-items: center; width: 40px; }
.jy__dots-move span { display: block; width: 100%; height: 2px; background: var(--line-2); transition: background-color .3s; }
.jy[data-jy-station="move"] .jy__dots-move span { background: var(--accent); }
.jy__pause .i-play { display: none; }
.jy__pause[aria-pressed="true"] .i-play { display: inline; }
.jy__pause[aria-pressed="true"] .i-pause { display: none; }
.jy[data-jy-station="b"] .jy__pause, .jy[data-jy-station="move"] .jy__pause { visibility: hidden; }
@media (max-width: 759.98px) {
  .jy { --jy-cap: 0px; }
  .jy.is-live .jy__frame { justify-content: flex-start; padding-top: var(--s-2); }
  .jy.is-live .jy__stage { width: 100%; aspect-ratio: 1.38; }
  .jy.is-live .jy__cap { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; min-height: 0; gap: var(--s-3); }
  .jy.is-live .jy__bar { margin-top: auto; }
  .jy__plan { justify-items: start; max-width: none; }
  .jy__sum, .jy__walls { text-align: left; }
  .jy__title { font-size: 1.125rem; }
  .jy__text { font-size: 15px; }
  .jy__dots { gap: 4px; }
  .jy__dots button { width: 30px; height: 30px; }
  .jy__dots-move { width: 18px; }
  .jy__tag { font-size: 11px; }
  .jy.is-live .jy__tag { top: auto; bottom: 0; }
}
@media (max-height: 560px) and (min-width: 760px) {
  .jy { --jy-cap: 150px; }
  .jy__text { display: none; }
}

/* ---------- Home hero: the sample building cut open, rendered with real materials (build 1.9, November 9, 2026).
   Teal floors show where signal reaches. Script: signal-night.js. Images: img/real/ (tools/render: scene.py
   --real with real_mats.py, real_parts.py and real.py; exported by real_passes.py, which draws the signal on
   the floors, writes the arcs partial and prints the label position). One 2:1 picture sits in a canvas that
   the figure crops: the middle band on wide screens (a taller band on tablets), five sixths of the width on phones. On big
   desktop windows the figure is wider than the text column (build 1.11, below). The first picture
   stays in place; the second is a layer over it (the floors with the changes) that fades in and out.
   Transparent background, so the model's shadow falls on the page. ILLUSTRATIVE. */
.hero-n--model { padding-bottom: 0; }
.hero-n--model .nh { padding-bottom: clamp(36px, 4.5vw, 64px); border-bottom: 1px solid var(--line); }
.nh { margin-top: clamp(16px, 2.5vw, 36px); }
.nh__fig { position: relative; margin: 0; aspect-ratio: 12 / 5; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 96%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 96%, transparent 100%); }
.nh__canvas { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 2 / 1; transform: translateY(-50%); --nh-x: 10.98%; --nh-y: 14.37%; }
.nh__canvas img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.nh__canvas img + img { z-index: 1; opacity: 0; transition: opacity .9s var(--ease); }
.nh__canvas img + img.is-on { opacity: 1; }
.nh__arcs { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; max-width: none; pointer-events: none; }
.nh__arcs path { fill: none; stroke: var(--signal); stroke-width: 2px; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.nh__site { position: absolute; z-index: 2; left: calc(var(--nh-x) - 20px); top: calc(var(--nh-y) - 9px); transform: translateY(-100%); font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--ink-2); pointer-events: none; }
.nh__note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0 0; font-size: var(--t-sm); color: var(--ink-3); }
.nh__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: var(--s-4); }
.nh__cap { margin: 0; flex: 1 1 22rem; min-width: 0; font-size: var(--t-md, 1.0625rem); line-height: 1.45; color: var(--ink); }
.nh.is-auto .seg button[aria-pressed="true"] { position: relative; overflow: hidden; }
.nh.is-auto .seg button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: rgb(5 34 38 / 55%); transform-origin: left center; animation: cx-fill 2.2s linear forwards; }
/* Big desktop windows (build 1.11): the picture grows past the text column, centered, up to 1,920 px wide,
   as far as the window's height leaves room for the note and the buttons under it (about 545 px of the first
   screen is not picture; 592 leaves about 47 px under the buttons). It is never smaller than the column, so it
   starts to grow at windows about 1,110 px tall. The pictures' `sizes`
   in index.html and signal-journey.html ask for the 1,920 px file from 1,420 x 1,134 px windows up (there the
   picture is wider than 1,300 px). */
@media (min-width: 1400px) and (min-height: 1110px) {
  .nh__fig { --nh-w: max(100%, min(100vw - 120px, 1920px, (100vh - 592px) * 2.4)); width: var(--nh-w); margin-left: calc((100% - var(--nh-w)) / 2); }
}
@media (max-width: 1000px) { .nh__fig { aspect-ratio: 9 / 4; } }
@media (max-width: 640px) {
  .nh__fig { aspect-ratio: 5 / 3; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 3%, #000 97%, transparent 100%); }
  .nh__canvas { top: 0; width: auto; height: 100%; transform: translateX(-5%); }
  .nh__site { left: calc(var(--nh-x) - 6px); }
  .nh__bar .seg { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nh__bar .seg button { justify-content: center; padding-inline: 6px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .nh__canvas img + img { transition: none; } }

/* ---------- Home first picture since build 1.12: the section view with moving signal (.sv) ----------
   One picture in the first screen replaces the two-state render (.nh, above) and the pinned walkthrough
   (.jy, above). Those two stay in this file for now; no page uses them (a clean-up for after approval).
   The buttons and the caption sit above the picture, so they stay in the first screen on ordinary desktop
   windows, where the picture's lower part runs below it.
   The render and one layer per step are <img> elements in .sv__img, a 2:1 box placed so that the figure shows
   the view named in the partial's data-jy-view:
     wide    view 0,112  2334.2 x 1040   box width 2560 / 2334.2            picture row 632 at mid height
     phones  view 506.1,85  1754 x 991.8  box width 2560 / 1754, left -506.1 / 1754, picture row 580.9 at mid height
             (640 px and narrower; the script reads the same breakpoint)
   The figure is a hair taller in proportion than its view, so the width always sets the scale.
   signal-journey.js draws the moving signal on the canvas with the same mapping (fitRect). The figure must not
   be wider in proportion than its view, or picture and signal would part. ILLUSTRATIVE, not a prediction. */
.hero-n--sv .sv { display: flex; flex-direction: column; margin-top: clamp(16px, 2.2vw, 32px); padding-bottom: clamp(36px, 4.5vw, 64px); border-bottom: 1px solid var(--line); }
/* The bar and the canvas are laid out from the start, so nothing moves when the script begins; noscript.css
   hides the bar and shows the step list for visitors without JavaScript. */
.sv__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding-bottom: var(--s-3); }
.sv__cap { margin: 0; flex: 1 1 20rem; min-width: 0; min-height: 2.8em; font-size: var(--t-md, 1.0625rem); line-height: 1.4; color: var(--ink); text-wrap: pretty; }   /* room for the longest step, so the picture does not move when the text changes */
.sv__pause { margin-left: auto; }
.sv__fig { position: relative; margin: 0; aspect-ratio: 2334.2 / 1044; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%); mask-image: linear-gradient(to right, transparent 0, #000 5%); }
.sv__img { position: absolute; left: 0; top: 50%; width: 109.674%; aspect-ratio: 2 / 1; transform: translateY(-49.375%); --sv-x: 10.98%; --sv-y: 14.37%; }
.sv__img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.sv__img img[data-jy-layer] { opacity: 0; transition: opacity .7s var(--ease); }
.sv__img img[data-jy-layer].is-on { opacity: 1; }
.sv .jy__canvas { z-index: 2; pointer-events: none; }
.sv.is-live .jy__canvas { display: block; }
.sv__site { position: absolute; z-index: 1; left: calc(var(--sv-x) - 20px); top: calc(var(--sv-y) - 9px); transform: translateY(-100%); font-family: var(--font-mono); font-weight: 500; font-size: 12px; line-height: 1; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--ink-2); pointer-events: none; }
.sv__note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; max-width: none; margin: 10px 0 0; font-size: var(--t-sm); color: var(--ink-3); }
.sv__steps { display: none; list-style: none; margin: var(--s-5) 0 0; padding: 0; gap: var(--s-4); max-width: var(--text-max); }
.sv__steps b { font-weight: 650; color: var(--ink); }
.sv__steps p { margin-top: 2px; color: var(--ink-2); }
.sv.is-auto .seg button[aria-pressed="true"] { position: relative; overflow: hidden; }
.sv.is-auto .seg button[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: rgb(5 34 38 / 55%); transform-origin: left center; animation: cx-fill 4.2s linear forwards; }
/* Big desktop windows: the picture grows past the text column, centered, up to 1,920 px wide, as far as the
   window's height leaves room for the buttons above it and the note under it (about 545 px of the first
   screen is not picture; 572 leaves a margin). It is never smaller than the column, so it starts to grow at
   windows about 1,130 px tall. The pictures' `sizes` in index.html follow the same sum. */
@media (min-width: 1400px) and (min-height: 1127px) {
  .sv__fig { --sv-w: max(100%, min(100vw - 120px, 1920px, (100vh - 572px) * 2.2358)); width: var(--sv-w); margin-left: calc((100% - var(--sv-w)) / 2); }
}
@media (max-width: 1239.98px) {
  .sv__cap { flex-basis: 100%; order: 3; }
}
@media (max-width: 759.98px) {
  /* phones: the picture first, so its top shows in the first screen; buttons and caption under it */
  .sv__fig { order: 1; }
  .sv__bar { order: 2; gap: 10px 8px; padding: var(--s-3) 0 0; }
  .sv__note { order: 3; }
  .sv__steps { order: 4; }
  .sv__bar .seg { width: auto; flex: 1 1 0; min-width: 0; }
  .sv__cap { min-height: 5.6em; font-size: var(--t-base, 1rem); }
}
@media (max-width: 640px) {
  .sv__fig { aspect-ratio: 1754 / 996; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 3%); mask-image: linear-gradient(to right, transparent 0, #000 3%); }
  .sv__img { left: -28.854%; width: 145.952%; transform: translateY(-45.383%); }
  .sv__site { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sv__img img[data-jy-layer] { transition: none; } }

/* ---------- Walk test (November 9, 2026): tap the 20 test areas of the top floor. Script: signal-walk.js.
   For Fire Officials and Check My Building. ILLUSTRATIVE. */
.wt { display: grid; gap: var(--s-4); }
.wt__top, .wt__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.wt__bar { justify-content: flex-start; }
.wt__key { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 0 auto; font-size: 13px; color: var(--ink-3); }
.wt__key .jy__ramp { width: 96px; }
.wt__key span:nth-child(2) { order: -1; }
.wt__score { margin: 0; font-family: var(--font-mono); font-size: 14px; letter-spacing: .04em; color: var(--ink-2); }
.wt__fig { position: relative; margin: 0; aspect-ratio: 2 / 1; overflow: hidden; border: 1px solid #1F2E35; background: #0A1114; }
.wt__plan { position: absolute; left: 0; top: 0; width: 100%; max-width: none; height: auto; }
.wt__canvas { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; pointer-events: none; }
.wt__cells { position: absolute; inset: 0; z-index: 2; }
.wt-cell { position: absolute; display: block; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wt-cell::after { content: ""; position: absolute; inset: 3px; border-radius: 2px; transition: background-color .2s, box-shadow .2s; }
.wt-cell:hover::after { background: rgb(79 221 230 / 12%); box-shadow: inset 0 0 0 1.5px rgb(79 221 230 / 70%); }
.wt-cell:focus-visible { outline: none; }
.wt-cell:focus-visible::after { box-shadow: inset 0 0 0 3px #4FDDE6; }
.wt-cell[data-tested="1"] { cursor: default; }
.wt-cell[data-tested="1"]:hover::after { background: transparent; box-shadow: none; }
.wt__verdict { display: grid; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--line-2); background: var(--surface); }
.wt__verdict[hidden] { display: none; }
.wt__result { margin: 0; font-size: var(--t-h4, 1.25rem); font-weight: 680; line-height: 1.35; }
.wt__result.is-pass { color: var(--accent); }
.wt__result.is-fail { color: var(--redline); }
.wt__rule { margin: 0; color: var(--ink-2); }
.wt__fix { display: grid; gap: var(--s-3); margin-top: var(--s-2); padding-top: var(--s-4); border-top: 1px solid var(--line); }
.wt__fixlabel { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.wt__steps { display: flex; flex-wrap: wrap; gap: 8px; }
.wt-step { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px 8px 10px; border: 1px solid var(--line-2); border-radius: var(--radius); background: transparent; color: var(--ink); font: inherit; font-size: 14px; font-weight: 640; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s; }
.wt-step .n { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; font-size: 11px; font-weight: 700; }
.wt-step:hover:not(:disabled) { border-color: var(--accent); }
.wt-step:disabled { opacity: .42; cursor: not-allowed; }
.wt-step[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); opacity: 1; }
.wt-step.is-next { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.wt .btn.is-nudge { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 30%, transparent); }
.wt__fine { margin: 0; max-width: 72ch; font-size: var(--t-sm); line-height: 1.55; color: var(--ink-3); }
@media (max-width: 640px) {
  .wt__fig { aspect-ratio: 2054.5 / 1164.2; }
  .wt__plan { width: 116.82%; left: -8.411%; top: -1.538%; }
  .wt__key { margin-left: 0; }
}