/* KuduDoc v6 — THE FEATURE WALL.
   Self-contained: needs lab/v6/tokens.css only (no site styles). Scoped under .v6-wall.
   State classes live on the section (#wall):
     .is-armed      JS is running and motion is allowed; tiles wait hidden for the entrance
     .is-head-in    the header has entered
     .is-in         the wall has entered (ripple from the Library lane, per-tile --d delay)
     .is-settled    entrance finished; hovers run without entrance delays
     .is-holding    the Library slot is an empty dashed outline, waiting for the travelling document
     .is-landing    KDWall.land() recap is playing   .is-landed  it has played
     .is-focus-<lane>  lane focus fallback (library|signing|seal|ask) for browsers without :has()
   Element hooks: .tile[data-beat], .wall-parent[data-lane], .mock-mini[data-slot="wall"],
     .is-lit (tile lighting up, delay --ld), .is-glow (lane glow, delay --ld), .is-arrived (slot flash).
   Motion is transform/opacity (plus colour tints); fences never animate. */

.v6-wall {
  --wall-gut: 24px;
  --wall-max: 1320px;
  --wall-row: 104px;
  --wall-lane-row: 124px;
  --tile-pt: 27px;          /* centres icon + one-line label in a standard row; wrapped labels grow down */
  --tile-pt-flank: 37px;    /* the four tiles beside the lanes sit in the taller lane rows */
  --wall-r: 22px;
  --wall-dim: .42;
  --wall-ember-ink: #b43c16;            /* ember deep enough for small text on white */
  --wall-wash: linear-gradient(180deg, #f1f8ff, #e2effd);
  --wall-wash-ember: linear-gradient(180deg, #fff3ea, #ffe4d3);
  position: relative;
  z-index: var(--z-content, 2);
  padding: 120px 0 104px;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
.v6-wall *, .v6-wall *::before, .v6-wall *::after { box-sizing: border-box; }
.v6-wall a { color: inherit; text-decoration: none; }
.v6-wall .icon {
  display: inline-block; flex: none; width: 22px; height: 22px;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- header ---------- */
.v6-wall .wall-head { width: min(100% - 2 * var(--wall-gut), 880px); margin: 0 auto 56px; text-align: center; }
.v6-wall .wall-eyebrow {
  display: inline-block; margin-bottom: 18px;
  font: 600 12px/1.2 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--blue-700);
}
.v6-wall .wall-title {
  margin: 0; color: var(--ink);
  font: 700 clamp(36px, 4.3vw, 62px)/1.03 var(--font-display); letter-spacing: -.035em;
  text-wrap: balance;
}
.v6-wall .wall-title-quiet { display: block; color: var(--slate); text-wrap: balance; }
.v6-wall .wall-sub { max-width: 48ch; margin: 20px auto 0; font: 400 18px/1.55 var(--font-body); color: var(--slate); text-wrap: pretty; }

/* ---------- the wall: one object ---------- */
.v6-wall .wall-stage { position: relative; width: min(100% - 2 * var(--wall-gut), var(--wall-max)); margin: 0 auto; }
.v6-wall .wall-stage::before {            /* the soft contact shadow the wall stands on */
  content: ""; position: absolute; z-index: -1; left: 5%; right: 5%; bottom: -30px; height: 70px;
  background: radial-gradient(50% 50% at 50% 50%, rgba(74, 52, 20, .13), rgba(74, 52, 20, 0) 100%);
  pointer-events: none;
}
.v6-wall .wall {
  position: relative; isolation: isolate;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-template-rows: minmax(var(--wall-row), auto) minmax(var(--wall-lane-row), auto) minmax(var(--wall-lane-row), auto);
  grid-auto-rows: minmax(var(--wall-row), auto);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--wall-r);
  overflow: hidden;
  box-shadow:
    0 1px 1px rgba(74, 52, 20, .04),
    0 6px 14px rgba(74, 52, 20, .05),
    0 22px 48px -10px rgba(16, 45, 73, .12),
    0 48px 90px -30px rgba(16, 45, 73, .16);
}

/* ---------- tiles: paper cells on a warm hairline grid ---------- */
.v6-wall .tile {
  position: relative; isolation: isolate; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px;
  padding: var(--tile-pt) 7px 12px;
  background: var(--paper);
  color: var(--slate);
  font: 400 13px/1.3 var(--font-body); letter-spacing: -.005em;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--t-hover) var(--ease), color var(--t-hover) var(--ease);
}
.v6-wall .tile > span { display: block; max-width: 100%; }
.v6-wall .tile-flank { padding-top: var(--tile-pt-flank); }
.v6-wall .tile .icon { color: var(--blue); }
.v6-wall .tile > * { transition: opacity 180ms var(--ease), color var(--t-hover) var(--ease), transform var(--t-hover) var(--ease); }
/* ::before = the recap / related wash;  ::after = the lifted hover sheet */
.v6-wall .tile::before, .v6-wall .tile::after {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none;
}
.v6-wall .tile::before { background: var(--wall-wash); box-shadow: inset 0 0 0 1px rgba(0, 107, 203, .14); transition: opacity 220ms var(--ease); }
.v6-wall .tile[data-beat="seal"]::before { background: var(--wall-wash-ember); box-shadow: inset 0 0 0 1px rgba(255, 118, 43, .22); }
.v6-wall .tile::after {
  background: var(--white); border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 107, 203, .22), 0 2px 4px rgba(16, 45, 73, .06), 0 12px 26px rgba(16, 45, 73, .13);
  transition: opacity var(--t-hover) var(--ease);
}
@media (hover: hover) {
  .v6-wall .tile:hover { z-index: 3; transform: translateY(-2px); color: var(--ink); }
  .v6-wall .tile:hover::after { opacity: 1; }
  .v6-wall .tile:hover .icon { color: var(--blue-700); }
}
.v6-wall .tile:focus-visible { z-index: 3; transform: translateY(-2px); color: var(--ink); outline: 2px solid var(--blue); outline-offset: -2px; }
.v6-wall .tile:focus-visible::after { opacity: 1; }
.v6-wall .tile:focus-visible .icon { color: var(--blue-700); }

/* ---------- lanes: the four things that just happened to the document ---------- */
.v6-wall .wall-parent {
  position: relative; isolation: isolate; z-index: 2; min-width: 0;
  grid-row: 2 / span 2;
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 16px;
  padding: 20px 20px 22px;
  background:
    radial-gradient(110% 62% at 50% 0%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--ice), #e3effc);
  border-top: 3px solid var(--blue);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: transform 160ms var(--ease);
}
.v6-wall .wall-lane-library { grid-column: 2 / span 2; }
.v6-wall .wall-lane-signing { grid-column: 4 / span 2; }
.v6-wall .wall-lane-seal { grid-column: 6 / span 2; }
.v6-wall .wall-lane-ask { grid-column: 8 / span 2; }
.v6-wall .wall-lane-seal {            /* EMBER — the one seal moment. Never blue. */
  background:
    radial-gradient(110% 62% at 50% 0%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--peach), #ffe6d5);
  border-top-color: var(--orange);
}
.v6-wall .wall-parent > * { transition: opacity 180ms var(--ease), transform 160ms var(--ease); }
/* ::before = hover lift shadow; ::after = recap glow */
.v6-wall .wall-parent::before, .v6-wall .wall-parent::after {
  content: ""; position: absolute; left: 0; right: 0; top: -3px; bottom: 0; z-index: -1; opacity: 0; pointer-events: none;
}
.v6-wall .wall-parent::before {
  box-shadow: 0 2px 6px rgba(16, 45, 73, .08), 0 18px 40px rgba(16, 45, 73, .16);
  transition: opacity 160ms var(--ease);
}
.v6-wall .wall-parent::after {
  box-shadow: inset 0 3px 0 var(--blue-400), inset 0 0 0 2px rgba(47, 147, 234, .45), inset 0 0 44px rgba(79, 179, 255, .38);
}
.v6-wall .wall-lane-seal::after {
  box-shadow: inset 0 3px 0 var(--orange), inset 0 0 0 2px rgba(255, 118, 43, .45), inset 0 0 44px rgba(255, 179, 71, .45);
}
.v6-wall .wall-parent h3 {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0;
  font: 700 22px/1.2 var(--font-display); letter-spacing: -.025em; color: var(--ink);
}
.v6-wall .wall-parent h3 .icon { width: 20px; height: 20px; color: var(--blue); transition: transform 160ms var(--ease); }
.v6-wall .wall-lane-seal h3 .icon { color: var(--orange); }

/* the lane card */
.v6-wall .mock-mini {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  width: 100%; max-width: 252px; margin: 0 auto;
  padding: 13px 14px 11px;
  background: var(--white);
  border: 1px solid rgba(16, 45, 73, .09);
  border-radius: 12px;
  box-shadow: 0 1px 1px rgba(16, 45, 73, .04), 0 4px 12px rgba(16, 45, 73, .07);
  font: 400 12px/1.35 var(--font-body); color: var(--ink-2); text-align: left;
  transition: transform 160ms var(--ease);
}
.v6-wall .wall-lane-library .mock-mini {   /* a filed record: sheets beneath it */
  box-shadow:
    0 1px 1px rgba(16, 45, 73, .04), 0 4px 12px rgba(16, 45, 73, .07),
    0 5px 0 -2px var(--white), 0 5px 0 -1px rgba(16, 45, 73, .11),
    0 10px 0 -5px var(--white), 0 10px 0 -4px rgba(16, 45, 73, .09);
}
.v6-wall .mock-mini > * { display: block; transition: opacity 160ms var(--ease); }
.v6-wall .mock-mini b { padding-bottom: 7px; font: 600 12.5px/1.3 var(--font-body); letter-spacing: -.01em; color: var(--ink); }
.v6-wall .mock-mini span { padding: 6px 0 5px; border-top: 1px solid var(--line); }
.v6-wall .mock-mini em {
  display: flex; align-items: center; gap: 6px; padding: 6px 0 5px; border-top: 1px solid var(--line);
  font: 500 11px/1.35 var(--font-body); font-style: normal; color: var(--blue-700); min-height: calc(1.35em * 12 / 11 + 11px);
}
.v6-wall .mock-mini em::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-400); }
.v6-wall .wall-lane-seal .mock-mini em { color: var(--wall-ember-ink); }
.v6-wall .wall-lane-seal .mock-mini em::before { background: var(--amber); box-shadow: 0 0 0 2px rgba(255, 179, 71, .25); }
/* ::before = the card coming forward; ::after = the arrival flash */
.v6-wall .mock-mini::before, .v6-wall .mock-mini::after { content: ""; position: absolute; opacity: 0; pointer-events: none; }
.v6-wall .mock-mini::before {
  inset: -1px; z-index: -1; border-radius: inherit;
  box-shadow: 0 6px 12px rgba(16, 45, 73, .08), 0 22px 44px rgba(16, 45, 73, .18);
  transition: opacity 160ms var(--ease);
}
.v6-wall .mock-mini::after {
  inset: -6px; border-radius: 17px;
  box-shadow: 0 0 0 2px rgba(47, 147, 234, .6), 0 0 26px 6px rgba(79, 179, 255, .38);
}

/* lane hover / keyboard focus: the lane lifts, its card comes forward */
@media (hover: hover) {
  .v6-wall .wall-parent:hover { z-index: 4; transform: translateY(-4px); }
  .v6-wall .wall-parent:hover::before { opacity: 1; }
  .v6-wall .wall-parent:hover .mock-mini { transform: translateY(-8px) scale(1.03); }
  .v6-wall .wall-parent:hover .mock-mini::before { opacity: 1; }
  .v6-wall .wall-parent:hover h3 .icon { transform: translateX(4px); }
}
.v6-wall .wall-parent:focus-visible { z-index: 4; transform: translateY(-4px); outline: 2px solid var(--blue); outline-offset: -2px; }
.v6-wall .wall-lane-seal:focus-visible { outline-color: var(--orange); }
.v6-wall .wall-parent:focus-visible::before { opacity: 1; }
.v6-wall .wall-parent:focus-visible .mock-mini { transform: translateY(-8px) scale(1.03); }
.v6-wall .wall-parent:focus-visible .mock-mini::before { opacity: 1; }
.v6-wall .wall-parent:focus-visible h3 .icon { transform: translateX(4px); }
/* JS fallback (no :has) and test hook: .is-focus-<lane> on #wall */
.v6-wall.is-focus-library .wall-lane-library,
.v6-wall.is-focus-signing .wall-lane-signing,
.v6-wall.is-focus-seal .wall-lane-seal,
.v6-wall.is-focus-ask .wall-lane-ask { z-index: 4; transform: translateY(-4px); }
.v6-wall.is-focus-library .wall-lane-library::before,
.v6-wall.is-focus-signing .wall-lane-signing::before,
.v6-wall.is-focus-seal .wall-lane-seal::before,
.v6-wall.is-focus-ask .wall-lane-ask::before,
.v6-wall.is-focus-library .wall-lane-library .mock-mini::before,
.v6-wall.is-focus-signing .wall-lane-signing .mock-mini::before,
.v6-wall.is-focus-seal .wall-lane-seal .mock-mini::before,
.v6-wall.is-focus-ask .wall-lane-ask .mock-mini::before { opacity: 1; }
.v6-wall.is-focus-library .wall-lane-library .mock-mini,
.v6-wall.is-focus-signing .wall-lane-signing .mock-mini,
.v6-wall.is-focus-seal .wall-lane-seal .mock-mini,
.v6-wall.is-focus-ask .wall-lane-ask .mock-mini { transform: translateY(-8px) scale(1.03); }
.v6-wall.is-focus-library .wall-lane-library h3 .icon,
.v6-wall.is-focus-signing .wall-lane-signing h3 .icon,
.v6-wall.is-focus-seal .wall-lane-seal h3 .icon,
.v6-wall.is-focus-ask .wall-lane-ask h3 .icon { transform: translateX(4px); }

/* ...and everything else dims. The lane's own tiles stay lit, so the lane reads as a set. */
.v6-wall[class*="is-focus-"] .tile > * { opacity: var(--wall-dim); }
.v6-wall.is-focus-library .wall-parent:not(.wall-lane-library) > *,
.v6-wall.is-focus-signing .wall-parent:not(.wall-lane-signing) > *,
.v6-wall.is-focus-seal .wall-parent:not(.wall-lane-seal) > *,
.v6-wall.is-focus-ask .wall-parent:not(.wall-lane-ask) > * { opacity: .5; }
.v6-wall.is-focus-library .tile[data-beat="keep"] > *,
.v6-wall.is-focus-signing .tile[data-beat="sign"] > *,
.v6-wall.is-focus-seal .tile[data-beat="seal"] > *,
.v6-wall.is-focus-ask .tile[data-beat="ask"] > * { opacity: 1; }
.v6-wall.is-focus-library .tile[data-beat="keep"],
.v6-wall.is-focus-signing .tile[data-beat="sign"],
.v6-wall.is-focus-seal .tile[data-beat="seal"],
.v6-wall.is-focus-ask .tile[data-beat="ask"] { color: var(--ink); }
.v6-wall.is-focus-library .tile[data-beat="keep"]::before,
.v6-wall.is-focus-signing .tile[data-beat="sign"]::before,
.v6-wall.is-focus-seal .tile[data-beat="seal"]::before,
.v6-wall.is-focus-ask .tile[data-beat="ask"]::before { opacity: 1; }
.v6-wall.is-focus-seal .tile[data-beat="seal"] .icon { color: var(--orange); }

@supports selector(:has(*)) {
  .v6-wall:has(.wall-parent:focus-visible) .tile > * { opacity: var(--wall-dim); }
  .v6-wall:has(.wall-parent:focus-visible) .wall-parent:not(:focus-visible) > * { opacity: .5; }
  .v6-wall:has(.wall-lane-library:focus-visible) .tile[data-beat="keep"] > *,
  .v6-wall:has(.wall-lane-signing:focus-visible) .tile[data-beat="sign"] > *,
  .v6-wall:has(.wall-lane-seal:focus-visible) .tile[data-beat="seal"] > *,
  .v6-wall:has(.wall-lane-ask:focus-visible) .tile[data-beat="ask"] > * { opacity: 1; }
  .v6-wall:has(.wall-lane-library:focus-visible) .tile[data-beat="keep"],
  .v6-wall:has(.wall-lane-signing:focus-visible) .tile[data-beat="sign"],
  .v6-wall:has(.wall-lane-seal:focus-visible) .tile[data-beat="seal"],
  .v6-wall:has(.wall-lane-ask:focus-visible) .tile[data-beat="ask"] { color: var(--ink); }
  .v6-wall:has(.wall-lane-library:focus-visible) .tile[data-beat="keep"]::before,
  .v6-wall:has(.wall-lane-signing:focus-visible) .tile[data-beat="sign"]::before,
  .v6-wall:has(.wall-lane-seal:focus-visible) .tile[data-beat="seal"]::before,
  .v6-wall:has(.wall-lane-ask:focus-visible) .tile[data-beat="ask"]::before { opacity: 1; }
  .v6-wall:has(.wall-lane-seal:focus-visible) .tile[data-beat="seal"] .icon { color: var(--orange); }
}
@supports selector(:has(*)) {
  @media (hover: hover) {
    .v6-wall:has(.wall-parent:hover) .tile > * { opacity: var(--wall-dim); }
    .v6-wall:has(.wall-parent:hover) .wall-parent:not(:hover) > * { opacity: .5; }
    .v6-wall:has(.wall-lane-library:hover) .tile[data-beat="keep"] > *,
    .v6-wall:has(.wall-lane-signing:hover) .tile[data-beat="sign"] > *,
    .v6-wall:has(.wall-lane-seal:hover) .tile[data-beat="seal"] > *,
    .v6-wall:has(.wall-lane-ask:hover) .tile[data-beat="ask"] > * { opacity: 1; }
    .v6-wall:has(.wall-lane-library:hover) .tile[data-beat="keep"],
    .v6-wall:has(.wall-lane-signing:hover) .tile[data-beat="sign"],
    .v6-wall:has(.wall-lane-seal:hover) .tile[data-beat="seal"],
    .v6-wall:has(.wall-lane-ask:hover) .tile[data-beat="ask"] { color: var(--ink); }
    .v6-wall:has(.wall-lane-library:hover) .tile[data-beat="keep"]::before,
    .v6-wall:has(.wall-lane-signing:hover) .tile[data-beat="sign"]::before,
    .v6-wall:has(.wall-lane-seal:hover) .tile[data-beat="seal"]::before,
    .v6-wall:has(.wall-lane-ask:hover) .tile[data-beat="ask"]::before { opacity: 1; }
    .v6-wall:has(.wall-lane-seal:hover) .tile[data-beat="seal"] .icon { color: var(--orange); }
  }
}

/* ---------- the slot: where the travelling document lands ---------- */
.v6-wall.is-holding [data-slot="wall"] {
  background: rgba(255, 255, 255, .35);
  border-style: dashed; border-color: var(--blue-400);
  box-shadow: none;
}
.v6-wall.is-holding [data-slot="wall"] > * { opacity: 0; transition: none; }

/* ---------- landing recap (KDWall.land) ---------- */
.v6-wall .mock-mini.is-arrived { animation: wall-arrive 900ms var(--ease) backwards; }
.v6-wall .mock-mini.is-arrived::after { animation: wall-flash 1300ms var(--ease) backwards; }
.v6-wall .tile.is-lit { animation: wall-ink 1000ms var(--ease) var(--ld, 0ms) backwards; }
.v6-wall .tile.is-lit::before { animation: wall-wash 1000ms var(--ease) var(--ld, 0ms) backwards; }
.v6-wall .tile.is-lit .icon { animation: wall-pop 1000ms var(--ease) var(--ld, 0ms) backwards; }
.v6-wall .tile.is-lit[data-beat="seal"] { animation-name: wall-ink-ember; }
.v6-wall .tile.is-lit[data-beat="seal"] .icon { animation-name: wall-pop-ember; }
.v6-wall .wall-parent.is-glow::after { animation: wall-wash 1250ms var(--ease) var(--ld, 0ms) backwards; }
.v6-wall .wall-parent.is-glow .mock-mini { animation: wall-nudge 1250ms var(--ease) var(--ld, 0ms) backwards; }
/* the Library card both arrives and later glows for "keep": list the arrival last so it wins while it runs */
.v6-wall .wall-parent.is-glow .mock-mini.is-arrived {
  animation: wall-nudge 1250ms var(--ease) var(--ld, 0ms) backwards, wall-arrive 900ms var(--ease) backwards;
}

@keyframes wall-wash { 0% { opacity: 0; } 18% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } }
@keyframes wall-flash { 0% { opacity: 0; } 16% { opacity: 1; } 55% { opacity: .85; } 100% { opacity: 0; } }
@keyframes wall-ink { 0%, 100% { color: var(--slate); } 18%, 60% { color: var(--ink); } }
@keyframes wall-ink-ember { 0%, 100% { color: var(--slate); } 18%, 60% { color: var(--wall-ember-ink); } }
@keyframes wall-pop {
  0%, 100% { transform: none; color: var(--blue); }
  18%, 60% { transform: translateY(-2px) scale(1.14); color: var(--blue-700); }
}
@keyframes wall-pop-ember {
  0%, 100% { transform: none; color: var(--blue); }
  18%, 60% { transform: translateY(-2px) scale(1.14); color: var(--orange); }
}
@keyframes wall-arrive { 0% { transform: none; } 28% { transform: scale(1.035); } 100% { transform: none; } }
@keyframes wall-nudge { 0%, 100% { transform: none; } 22%, 58% { transform: translateY(-6px); } }

/* ---------- foot: proof chip, the way on, and the fences (never animated) ---------- */
.v6-wall .wall-foot { width: min(100% - 2 * var(--wall-gut), var(--wall-max)); margin: 40px auto 0; }
.v6-wall .wall-foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.v6-wall .wall-proof {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; max-width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-pill); background: rgba(255, 253, 249, .7);
  font: 500 12px/1.4 var(--font-body); color: var(--mute);
}
.v6-wall .wall-proof::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--mute); opacity: .6; }
.v6-wall .wall-more {
  display: inline-flex; align-items: center; gap: 6px;
  font: 600 15px/1.3 var(--font-body); color: var(--blue);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; text-decoration-thickness: 1.5px;
  transition: color var(--t-hover) var(--ease), text-decoration-color var(--t-hover) var(--ease);
}
.v6-wall .wall-more:hover, .v6-wall .wall-more:focus-visible { color: var(--blue-700); text-decoration-color: currentColor; }
.v6-wall .wall-more:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
.v6-wall .wall-fences {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px 36px;
  margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line);
}
.v6-wall .fence {
  margin: 0; padding-left: 12px; border-left: 2px solid var(--line);
  font: 400 13px/1.55 var(--font-body); color: var(--slate);
  opacity: 1; transform: none; animation: none; transition: none;
}

/* ---------- entrance (only when JS armed it and motion is allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .v6-wall.is-armed:not(.is-head-in) .wall-head > * { opacity: 0; transform: translateY(14px); }
  .v6-wall.is-head-in .wall-head > * { transition: opacity 600ms var(--ease), transform 700ms var(--ease); }
  .v6-wall.is-head-in .wall-head > :nth-child(2) { transition-delay: 70ms; }
  .v6-wall.is-head-in .wall-head > :nth-child(3) { transition-delay: 140ms; }

  .v6-wall.is-armed:not(.is-in) .tile { opacity: 0; transform: translateY(10px) scale(.96); }
  .v6-wall.is-armed:not(.is-in) .wall-parent { opacity: 0; transform: translateY(24px); }
  .v6-wall.is-armed:not(.is-in) .wall-parent .mock-mini { opacity: 0; transform: translateY(14px) scale(.97); }
  .v6-wall.is-in:not(.is-settled) .tile {
    transition: opacity 500ms var(--ease) var(--d, 0ms), transform 520ms var(--ease) var(--d, 0ms);
  }
  .v6-wall.is-in:not(.is-settled) .wall-parent {
    transition: opacity 560ms var(--ease) var(--d, 0ms), transform 700ms var(--ease) var(--d, 0ms);
  }
  .v6-wall.is-in:not(.is-settled) .wall-parent .mock-mini {
    transition: opacity 560ms var(--ease) calc(var(--d, 0ms) + 140ms), transform 700ms var(--ease) calc(var(--d, 0ms) + 140ms);
  }
}

/* ---------- 900–1179: same ten columns, tighter ---------- */
@media (max-width: 1179.98px) {
  .v6-wall { --wall-row: 90px; --wall-lane-row: 110px; --tile-pt: 23px; --tile-pt-flank: 33px; --wall-r: 18px; padding: 96px 0 88px; }
  .v6-wall .wall-head { margin-bottom: 44px; }
  .v6-wall .tile { gap: 8px; padding-left: 4px; padding-right: 4px; font-size: 11.5px; line-height: 1.28; }
  .v6-wall .tile .icon { width: 20px; height: 20px; }
  .v6-wall .wall-parent { gap: 12px; padding: 16px 13px 14px; }
  .v6-wall .wall-parent h3 { font-size: 19px; }
  .v6-wall .mock-mini { padding: 11px 11px 9px; font-size: 11px; }
  .v6-wall .mock-mini b { font-size: 11.5px; padding-bottom: 6px; }
  .v6-wall .mock-mini span { padding: 5px 0 4px; }
  .v6-wall .mock-mini em { font-size: 10.5px; padding: 5px 0 4px; }
}

/* ---------- < 900: four columns, lanes span 2 x 3 ---------- */
@media (max-width: 899.98px) {
  .v6-wall { --wall-gut: 16px; --wall-row: 78px; --tile-pt: 17px; --tile-pt-flank: 17px; --wall-r: 16px; padding: 80px 0 72px; }
  .v6-wall .wall-head { margin-bottom: 36px; text-align: left; }
  .v6-wall .wall-eyebrow { margin-bottom: 14px; }
  .v6-wall .wall-title { font-size: clamp(32px, 8.6vw, 46px); }
  .v6-wall .wall-sub { margin: 14px 0 0; font-size: 16px; }
  .v6-wall .wall {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(var(--wall-row), auto);
  }
  .v6-wall .tile { gap: 7px; padding: var(--tile-pt) 3px 9px; font-size: 11px; line-height: 1.3; letter-spacing: -.01em; }
  .v6-wall .tile .icon { width: 20px; height: 20px; }
  .v6-wall .wall-parent { grid-row: auto; justify-content: center; gap: 14px; padding: 14px 11px 12px; }
  .v6-wall .wall-lane-library, .v6-wall .wall-lane-signing { grid-row: 3 / span 3; }
  .v6-wall .wall-lane-seal, .v6-wall .wall-lane-ask { grid-row: 8 / span 3; }
  .v6-wall .wall-lane-library, .v6-wall .wall-lane-seal { grid-column: 1 / span 2; }
  .v6-wall .wall-lane-signing, .v6-wall .wall-lane-ask { grid-column: 3 / span 2; }
  .v6-wall .wall-parent h3 { font-size: 18px; }
  .v6-wall .wall-parent h3 .icon { width: 18px; height: 18px; }
  .v6-wall .mock-mini { padding: 10px 10px 8px; border-radius: 10px; font-size: 11px; }
  .v6-wall .wall-foot { margin-top: 28px; }
  .v6-wall .wall-fences { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 420px) {
  .v6-wall .tile { font-size: 10.5px; }
  .v6-wall .mock-mini { font-size: 10.5px; }
  .v6-wall .mock-mini b { font-size: 11px; }
}

/* ---------- reduced motion: settled at once, colour and shadow only ---------- */
@media (prefers-reduced-motion: reduce) {
  .v6-wall .tile, .v6-wall .wall-parent, .v6-wall .mock-mini, .v6-wall .icon,
  .v6-wall .tile:hover, .v6-wall .wall-parent:hover, .v6-wall .wall-parent:hover .mock-mini { transform: none !important; }
  .v6-wall .tile.is-lit .icon, .v6-wall .mock-mini.is-arrived, .v6-wall .wall-parent.is-glow .mock-mini { animation: none; }
}

.v6-wall .fence b { display: block; margin-bottom: 3px; font-weight: 700; color: var(--ink); }