/* L4-28: the Radar gate's control tower (/radar-hub) and the parts the quiet-changes research shares with it: the radar sweep
   (pure SVG + CSS, still with reduced motion) and the Before → After cards (native <details>). Tiles come from gates.css. */
.tower{padding-bottom:72px}
.tw-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:24px 48px;padding:20px 0 48px}
.tw-eyebrow{display:flex;align-items:center;gap:8px;color:var(--ink-3)}
.tw-picto{width:18px;height:18px;color:var(--ember-fill)}
.tw-title{margin:0 0 18px;font-size:clamp(46px,6.4vw,86px);line-height:.98;letter-spacing:-.045em}
.tw-line{margin:0;max-width:30ch;font:600 clamp(19px,1.8vw,23px)/1.4 var(--sans);color:var(--ink-2)}
.tw-reach{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:26px 0 24px;padding:16px 20px;max-width:660px;
  border-radius:16px;background:#0b0907;border:1px solid #2a251f;color:#ffbf47}
.tw-reach-row{--tw:36px;--g:3px}
.tw-reach p{flex:1 1 220px;margin:0;color:#e6dac4;font-size:16px;line-height:1.45}
.tw-scope{justify-self:center;width:100%;max-width:470px}

/* The radar. The sweep turns once every 6 s; blip i lights up when it passes (delay = angle / 360 × 6 s, see radar-scope.ts). */
.rd{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px #2a1d0a33)}
.rd-disc{fill:url(#rd-bg);stroke:#34302a;stroke-width:6}
.rd-ring{fill:none;stroke:#ffbf47;stroke-opacity:.22;stroke-width:1.2}
.rd-cross{fill:none;stroke:#ffbf47;stroke-opacity:.14;stroke-width:1}
.rd-sweep{transform-origin:220px 220px;animation:rd-turn 6s linear infinite}
.rd-wedge{fill:url(#rd-fade)}
.rd-edge{stroke:#ffd27a;stroke-width:2;stroke-linecap:round;opacity:.9}
.rd-hub{fill:#ffbf47}
.rd-dot{fill:#ff8a3d}
.rd-ping{fill:none;stroke:#ff8a3d;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.rd-label{font:500 14px var(--mono);letter-spacing:.1em;fill:#ffd9a0}
.rd-b{opacity:.32;animation:rd-blip 6s ease-out infinite}
.rd-b .rd-ping{animation:rd-ping 6s ease-out infinite;animation-delay:inherit}
.rd-b0{animation-delay:.667s}
.rd-b1{animation-delay:1.767s}
.rd-b2{animation-delay:2.667s}
.rd-b3{animation-delay:3.567s}
.rd-b4{animation-delay:4.5s}
.rd-b5{animation-delay:5.367s}
@keyframes rd-turn{to{transform:rotate(360deg)}}
@keyframes rd-blip{0%{opacity:1}55%{opacity:.5}100%{opacity:.32}}
@keyframes rd-ping{0%{opacity:.9;transform:scale(1)}40%{opacity:0;transform:scale(3.2)}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .rd-sweep,.rd-b,.rd-b .rd-ping{animation:none}
  .rd-b{opacity:1}
}

/* Before → After cards. The face is the <summary>: tool, window, old (struck) → new, the title, and the stamp where we checked. */
.tw-block{padding-top:24px}
.tw-h2{display:flex;align-items:baseline;gap:12px;margin:0 0 4px;font-size:clamp(28px,3vw,40px);letter-spacing:-.03em}
.tw-count{font:500 16px var(--mono);color:var(--ink-3)}
.tw-note{margin:0 0 18px;color:var(--ink-3)}
.ba-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;align-items:start}
.ba{min-width:0;scroll-margin-top:90px}
.ba-card{position:relative;border:1px solid var(--line);border-radius:18px;background:var(--bg-2);transition:box-shadow .18s ease,border-color .18s ease}
.ba-card:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.ba-card[open]{border-color:var(--line-2)}
.ba-face{display:flex;flex-direction:column;gap:12px;padding:18px 20px 20px;cursor:pointer;list-style:none;border-radius:18px}
.ba-face::-webkit-details-marker{display:none}
.ba-face:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.ba-top{display:flex;align-items:center;gap:10px;min-width:0}
.ba-top .service-icon{width:32px;height:32px;border-radius:9px}
.ba-top .service-icon>span{font-size:15px}
.ba-tool{font-size:16px}
.ba-id{display:flex;flex-direction:column;gap:1px;min-width:0}
.ba-when{font:500 12px var(--mono);color:var(--ink-3)}
.ba-end{display:flex;flex-wrap:wrap;align-items:center;gap:10px;min-height:24px}
.ba-word{margin-left:auto;flex:none;font:800 15px/1.2 var(--display);color:var(--steel);text-align:right}
.ba-word.is-ready,.ba-word.is-act{color:var(--amber)}
.ba-word.is-bail{color:var(--ember)}
.ba-pair{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-family:var(--display);letter-spacing:-.03em}
.ba-old{font-size:clamp(26px,2.4vw,32px);font-weight:700;color:var(--ink-3);text-decoration-thickness:3px;text-decoration-color:var(--ember-fill)}
.ba-arrow{font:500 22px var(--mono);color:var(--ink-3)}
.ba-new{font-size:clamp(34px,3.2vw,44px);font-weight:800;line-height:1;color:var(--ink)}
.ba-pair.is-words .ba-old{font-size:22px}
.ba-pair.is-words .ba-new{font-size:30px}
.ba-lines{display:grid;gap:4px;font-size:15px;line-height:1.4}
.ba-lines s{color:var(--ink-3);text-decoration-color:var(--ember-fill)}
.ba-title{font-size:14px;line-height:1.45;color:var(--ink-2)}
.ba-title::after {
  content:'';
  display:inline-block;
  width:7px;
  height:7px;
  margin:0 0 2px 8px;
  border-right:2px solid var(--ink-3);
  border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg);
}
.ba-card[open] .ba-title::after{transform:rotate(-135deg);margin-bottom:-2px}
/* A passport-style stamp: we read the vendor's changelog for those months and found nothing. */
.ba-stamp {
  padding:4px 10px;
  border:2px solid var(--ember);
  border-radius:4px;
  font:600 11px/1.3 var(--mono);
  letter-spacing:.1em;
  white-space:nowrap;
  text-transform:uppercase;
  color:var(--ember);
  transform:rotate(-4deg);
  transform-origin:left center;
  opacity:.9;
}
.ba-more{display:grid;gap:12px;padding:0 20px 20px;font-size:14px;line-height:1.5}
.ba-facts{display:grid;gap:10px;margin:0;padding-top:14px;border-top:1px dashed var(--line-2)}
.ba-facts dt{font:500 11px/1.6 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ba-facts dd{margin:0;overflow-wrap:anywhere}
.ba-facts a,.ba-go{color:var(--link)}
.ba-group{display:block}
.ba-go{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:800;text-decoration:none}
.ba-go:hover{text-decoration:underline}

/* Two doors (graveyard, research) as dark airport signs, then one line for My stack. */
.tw-doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:56px}
.tw-door{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:var(--bg-2);border:1px solid var(--line);
  color:var(--ink);text-decoration:none;transition:transform .18s ease,box-shadow .18s ease}
.tw-door:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tw-door-sign{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#0b0907;color:#ffbf47;border-bottom:4px solid #ffbf47}
.tw-door-k{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#a99d88}
.tw-door-name{flex:1;font:800 22px/1.1 var(--display);letter-spacing:-.02em;color:#fff4de}
.tw-door-live{display:flex;align-items:center;gap:14px;padding:16px 18px;color:#ffbf47;--tw:30px;--g:3px}
.tw-door-unit{font-weight:700;color:var(--ink-2)}
.tw-line-cta{margin:24px 0 0;color:var(--ink-2)}
.tw-line-cta a{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-right:8px;font-weight:800;color:var(--link)}
.tower .digest-signup{margin-top:12px}
@media(prefers-reduced-motion:reduce){
  .ba-card,.tw-door,.tw-door:hover{transition:none;transform:none}
}

@media(max-width:860px){
  .tw-head{grid-template-columns:minmax(0,1fr);padding-bottom:32px}
  .tw-scope{order:-1;max-width:300px}
  .tw-doors{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .tw-head{gap:12px}
  .tw-scope{max-width:250px}
  .tw-reach{padding:14px}
  .tw-reach-row{--tw:28px}
  .ba-face{padding:16px}
  .ba-more{padding:0 16px 16px}
}

/* L4-29: a correction, one line under the top numbers (Radar hub and the quiet changes research). Plain text, no icon. */
.corr-bar{display:grid;gap:8px;margin:0 0 28px;max-width:760px}
.corr-line{margin:0;padding:10px 14px;max-width:760px;border-left:3px solid var(--ember-fill);border-radius:4px;
  background:var(--bg-2);color:var(--ink-2);font-size:15px;line-height:1.5}
.corr-k{margin-right:6px;font-weight:800;color:var(--ink)}
.corr-line a{margin-left:4px;font-weight:700;color:var(--link)}