/* ==========================================================================
   Marana Tech — rsa.html (Per RSA e case di riposo)
   Oggetto della pagina: la giornata della struttura, un quadrante d'acciaio a 24 ore.
   Stato base = stato finale: lancetta alle 21:40, quattro LED blu (fatto) e uno ambra
   (serve una persona). Gli stati di partenza li mette solo rsa.js, con html.js-motion.
   ========================================================================== */

/* ---------- Testata ---------- */
.rsa-hero { padding-top: calc(var(--header-h) + clamp(36px, 5vw, 72px)); }
.rsa-hero h1 { font-size: clamp(2.6rem, 5.1vw, 4.9rem); }
.rsa-hero .page-hero__grid { align-items: center; }

.rsa-obj { display: grid; justify-items: center; min-height: 0; }
.rsa-obj__head {
  width: min(100%, 470px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.rsa-obj__cap {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* Il quadrante: strati sovrapposti, misure in cqi (1% del diametro) */
.rsa-dial {
  position: relative;
  width: min(100%, 470px);
  aspect-ratio: 1;
  container-type: inline-size;
  isolation: isolate;
  border-radius: 50%;
}
.rsa-dial > * { position: absolute; }

/* cassa: acciaio lucido, il riflesso ruota un poco col puntatore */
.rsa-dial__case {
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from calc(190deg + var(--lx, .5) * 70deg),
    #30373C 0deg, #AEB7BD 22deg, #EEF1F3 38deg, #7A848B 58deg, #3A4146 84deg, #262C30 112deg,
    #59636A 146deg, #C3CAD0 170deg, #F4F6F7 184deg, #8E989E 204deg, #394045 238deg, #232A2E 280deg,
    #4F595F 318deg, #30373C 360deg);
  box-shadow:
    0 60px 90px -44px rgba(0, 0, 0, .95),
    0 22px 36px -22px rgba(0, 0, 0, .85),
    inset 0 2px 1px rgba(255, 255, 255, .45),
    inset 0 -3px 4px rgba(0, 0, 0, .55);
}
/* gradino inclinato fra cassa e quadrante */
.rsa-dial__case::after {
  content: "";
  position: absolute;
  inset: 2.4%;
  border-radius: 50%;
  background: conic-gradient(from calc(10deg + var(--lx, .5) * 70deg), #1B2023, #4A5359 18%, #1E2427 40%, #0F1214 60%, #3C454A 82%, #1B2023);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .85), 0 1px 0 rgba(255, 255, 255, .28);
}

/* quadrante: fondo con vignettatura; sopra, due strati a parte:
   ::before i due riflessi opposti che seguono la luce (il puntatore ridisegna solo loro),
   ::after la raggiera spazzolata, a onda morbida e sfumata verso il centro, dove le righe
   diventerebbero più fitte dei pixel e farebbero moiré */
.rsa-dial__face {
  inset: 4%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, .38) 100%),
    radial-gradient(circle at 50% 40%, #2B3237 0%, #1C2125 58%, #151A1D 100%);
  box-shadow: inset 0 10px 22px rgba(0, 0, 0, .65), inset 0 -1px 0 rgba(255, 255, 255, .07);
}
.rsa-dial__face::before,
.rsa-dial__face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.rsa-dial__face::before {
  background: conic-gradient(from calc(200deg + var(--lx, .5) * 40deg),
    rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, .075) 28deg, rgba(255, 255, 255, 0) 62deg,
    rgba(255, 255, 255, 0) 180deg, rgba(255, 255, 255, .06) 208deg, rgba(255, 255, 255, 0) 242deg);
}
.rsa-dial__face::after {
  background: repeating-conic-gradient(rgba(255, 255, 255, .04) 0deg, rgba(0, 0, 0, .06) .4deg, rgba(255, 255, 255, .04) .8deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 36%, #000 74%);
  mask: radial-gradient(circle closest-side, transparent 36%, #000 74%);
}

/* segni: tacche incise, numeri, settore notte, finestrella del giorno */
.rsa-dial__marks { inset: 0; width: 100%; height: 100%; overflow: visible; }
.rsa-ring { fill: none; stroke: rgba(195, 202, 208, .26); stroke-width: .8; }
.rsa-ring--in { stroke: rgba(195, 202, 208, .12); }
.rsa-ticks path { fill: none; stroke-linecap: butt; }
.rsa-t-minor { stroke: #6B757C; stroke-width: .9; }
.rsa-t-half { stroke: #8B959C; stroke-width: 1.1; }
.rsa-t-hour { stroke: #C3CAD0; stroke-width: 1.9; }
.rsa-ticks .rsa-t-major { fill: #EEF1F3; stroke: none; }
.rsa-ticks--shadow path { stroke: rgba(0, 0, 0, .75); }
.rsa-ticks--shadow .rsa-t-major { fill: rgba(0, 0, 0, .75); }
.rsa-num {
  font-family: var(--font-mono);
  font-size: 12px;
  fill: #98A2A9;
  text-anchor: middle;
  dominant-baseline: central;
}
.rsa-num--major { font-size: 17px; font-weight: 600; fill: #EEF1F3; }
.rsa-night { fill: rgba(5, 7, 9, .42); }
.rsa-night-edge { fill: none; stroke: rgba(195, 202, 208, .22); stroke-width: .8; }
.rsa-night-label {
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: .5em;
  fill: #7A848B;
  text-anchor: middle;
}
.rsa-brand {
  font-family: var(--font-display);
  font-stretch: 120%;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3em;
  fill: #C3CAD0;
  text-anchor: middle;
}
.rsa-brand--sub { font-family: var(--font-mono); font-stretch: 100%; font-size: 7px; font-weight: 400; letter-spacing: .42em; fill: #7A848B; }
.rsa-window rect { fill: #0B0D0F; stroke: rgba(195, 202, 208, .32); stroke-width: .8; }
.rsa-window text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  fill: #EEF1F3;
  text-anchor: middle;
  dominant-baseline: central;
}
@container (max-width: 400px) {
  .rsa-num:not(.rsa-num--major) { display: none; }
  .rsa-num--major { font-size: 21px; }
  .rsa-night-label { font-size: 9px; }
  .rsa-brand { font-size: 12px; }
  .rsa-brand--sub { font-size: 9px; }
}

/* la sera: il quadrante si scurisce (in partenza siamo alle 21:40, quindi è notte) */
.rsa-dial__dusk {
  inset: 4%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(6, 9, 14, .12), rgba(3, 5, 8, .42) 82%);
}

/* cavalieri: le linguette spinte alle ore dei lavori */
.rsa-dial__riders { inset: 0; }
.rsa-rider {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.4cqi;
  height: 5.8cqi;
  margin: -2.9cqi 0 0 -2.2cqi;
  transform: rotate(var(--a)) translateY(-42.7cqi);
}
.rsa-rider__body {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 1cqi;
  background: linear-gradient(90deg, #4B545A 0%, #DDE2E5 38%, #A7B0B6 62%, #40484D 100%);
  box-shadow: 0 .5cqi 1cqi rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .35);
  transition: box-shadow var(--t-ui) var(--ease-out);
}
/* LED a due strati: il corpo spento è il LED, la luce è il suo ::after e si accende in opacità */
.rsa-rider__led {
  position: relative;
  width: 2cqi;
  height: 2cqi;
  border-radius: 50%;
  background: #22292E;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
}
.rsa-rider__led::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 40% 35%, #E6F3FC, #8CC0E6 55%, #4F8FC0);
  box-shadow: 0 0 0 .45cqi rgba(140, 192, 230, .22), 0 0 2.6cqi rgba(140, 192, 230, .95);
  transition: opacity var(--t-ui) var(--ease-out);
}
.rsa-rider--amber .rsa-rider__led::after {
  background: radial-gradient(circle at 40% 35%, #FFE6C4, #E0A050 55%, #B8772F);
  box-shadow: 0 0 0 .45cqi rgba(224, 160, 80, .22), 0 0 2.8cqi rgba(224, 160, 80, .95);
}
.js-motion .rsa-rider:not(.is-on) .rsa-rider__led::after { opacity: 0; }
.rsa-rider.is-hl .rsa-rider__body { box-shadow: 0 0 0 .6cqi rgba(140, 192, 230, .9), 0 .5cqi 1cqi rgba(0, 0, 0, .75), inset 0 1px 0 rgba(255, 255, 255, .55); }
.rsa-rider__sonar {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9cqi;
  height: 9cqi;
  margin: -4.5cqi 0 0 -4.5cqi;
  border-radius: 50%;
  border: 1.5px solid rgba(224, 160, 80, .85);
  opacity: 0;
  pointer-events: none;
}

/* lancetta: acciaio sfaccettato, punta brunita blu; l'ombra è un gemello sfocato e spostato */
.rsa-dial__hand, .rsa-dial__hshadow { inset: 0; pointer-events: none; }
.rsa-rot { position: absolute; inset: 0; transform: rotate(325deg); }
.rsa-rot svg { width: 100%; height: 100%; }
.rsa-dial__hshadow { transform: translate(.9cqi, 1.8cqi); opacity: .6; }
.rsa-dial__hshadow svg { filter: blur(.6cqi); }
.rsa-dial__hshadow path { fill: #000; }
/* solo mentre gira: lancetta, cavalieri, crepuscolo e anello restano su strati propri */
.rsa-dial.is-running .rsa-rot,
.rsa-dial.is-running .rsa-rider__body { will-change: transform; }
.rsa-dial.is-running .rsa-dial__dusk,
.rsa-dial.is-running .rsa-rider__led::after { will-change: opacity; }
.rsa-dial.is-running .rsa-rider__sonar { will-change: transform, opacity; }

/* perno: cappuccio convesso con la vite brunita */
.rsa-dial__cap {
  left: 50%;
  top: 50%;
  width: 7cqi;
  height: 7cqi;
  margin: -3.5cqi 0 0 -3.5cqi;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FFFFFF 0%, #E3E8EB 16%, #9AA4AA 52%, #3E464B 100%);
  box-shadow: 0 .9cqi 1.8cqi rgba(0, 0, 0, .75), inset 0 -1px 1px rgba(0, 0, 0, .35);
}
.rsa-dial__cap::after {
  content: "";
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #CFE7F8, #6FA9D6 45%, #2F6E9E 80%, #1B4566);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}

/* vetro: un riflesso morbido che segue il puntatore */
.rsa-dial__glass {
  inset: 4%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(60% 42% at calc(28% + var(--lx, .35) * 30%) calc(14% + var(--ly, .2) * 22%), rgba(255, 255, 255, .1), rgba(255, 255, 255, 0) 70%),
    linear-gradient(158deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, 0) 36%);
}

/* registro: la targa che sborda dal quadrante */
.rsa-log {
  position: relative;
  z-index: 2;
  justify-self: start;
  width: min(100%, 500px);
  margin-top: -26px;
  padding: 14px 20px 4px;
}
.rsa-log__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.rsa-log__list { list-style: none; }
.rsa-log__list li {
  display: grid;
  grid-template-columns: 8px 3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: .8rem;
  line-height: 1.35;
  color: var(--fg-2);
}
.rsa-log__list li + li { border-top: 1px dashed var(--line); }
/* col mouse sulla riga, la riga si schiarisce e il suo cavaliere sul quadrante si cerchia (rsa.js) */
@media (hover: hover) { .rsa-log__list li:hover { color: var(--fg); } }
.rsa-log__list time { font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em; color: var(--fg); }
.rsa-log__st {
  display: grid;
  justify-items: end;
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rsa-log__st > span { grid-area: 1 / 1; transition: opacity var(--t-ui) var(--ease-out); }
.rsa-log .st-done { color: var(--blu); }
.rsa-log .is-amber .st-done { color: var(--scintilla); }
.rsa-log .st-todo { color: var(--fg-3); opacity: 0; }
.rsa-log__list li.is-amber > .led { --led-color: var(--scintilla); --led-ring: rgba(224, 160, 80, .16); --led-halo: rgba(224, 160, 80, .85); }
/* spento è un cerchio tratteggiato; il corpo cambia di colpo sotto la luce, che si accende in opacità */
.rsa-log__list .led { transition: none; }
.js-motion .rsa-log__list li:not(.is-on) > .led { background: transparent; box-shadow: none; border: 1px dashed rgba(195, 202, 208, .5); }
.js-motion .rsa-log__list li:not(.is-on) .st-done { opacity: 0; }
.js-motion .rsa-log__list li:not(.is-on) .st-todo { opacity: 1; }

@media (max-width: 960px) {
  .rsa-obj { margin-top: 12px; }
  .rsa-log { justify-self: center; width: min(100%, 500px); }
}
@media (max-width: 560px) {
  .rsa-log { margin-top: -14px; padding-inline: 16px; }
  .rsa-log__list li { grid-template-columns: 8px 2.9rem minmax(0, 1fr); row-gap: 2px; }
  .rsa-log__st { grid-column: 3; justify-items: start; }
}

/* ---------- Conosciamo le RSA dall'interno: la targa dati ---------- */
.rsa-origin .split { align-items: center; }
.rsa-origin__text { margin-bottom: 0; }
.rsa-idplate {
  --fg: var(--cromo);
  --fg-2: var(--argento);
  --fg-3: var(--acciaio-testo);
  --line: rgba(195, 202, 208, .14);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: clamp(26px, 3vw, 40px);
  border-radius: 12px;
  color: var(--fg);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    linear-gradient(180deg, #2A3136 0%, #1B2024 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 0 0 1px rgba(255, 255, 255, .05),
    inset 0 -2px 0 rgba(0, 0, 0, .35),
    0 2px 0 rgba(0, 0, 0, .2),
    0 44px 70px -36px rgba(21, 24, 26, .8);
}
/* luce del puntatore: il livello del core (era un radiale 110% 80% fino al 55% nello sfondo) */
.rsa-idplate > .light-spot { --spot-w: 1.21; --spot-h: .88; --spot-color: rgba(255, 255, 255, .12); --lx: .3; }
/* passaggio di luce quando la targa compare */
.rsa-idplate::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, 0) 62%);
  transform: translateX(-110%);
}
.js-motion .rsa-idplate.is-in::after { animation: rsa-sheen 1.8s var(--ease-in-out) .45s both; }
@keyframes rsa-sheen { to { transform: translateX(110%); } }
.rsa-idplate__top { display: flex; align-items: center; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.rsa-idplate__top img { width: 52px; height: auto; }
.rsa-idplate__name { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; letter-spacing: -.01em; font-stretch: 100%; font-weight: 300; }
.rsa-idplate__name b { font-stretch: 125%; font-weight: 800; }
.rsa-idplate__type { margin-top: 7px; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-3); }
.rsa-idplate__rows { margin: 0; }
.rsa-idplate__rows > div {
  display: grid;
  grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.rsa-idplate__rows dt { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-3); }
.rsa-idplate__rows dd {
  margin: 0;
  font-family: var(--font-display);
  font-stretch: 108%;
  font-weight: 600;
  font-size: 1.08rem;
  line-height: 1.3;
  color: var(--fg);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .07);
}
.rsa-idplate__foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 16px;
  padding-top: 16px;
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
@media (max-width: 520px) {
  .rsa-idplate__rows > div { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Due servizi: il rack con due targhe e un alloggio libero ---------- */
.rsa-rack {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  padding-block: 26px;
}
.rsa-rack::before, .rsa-rack::after {
  /* guide del rack, con le asole */
  content: "";
  position: absolute;
  left: -14px;
  right: -14px;
  height: 8px;
  border-radius: 3px;
  background:
    radial-gradient(circle, rgba(0, 0, 0, .75) 0 1.6px, transparent 2.2px) 12px 50% / 36px 8px repeat-x,
    linear-gradient(180deg, #2E353A, #1B2023);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), 0 1px 0 rgba(0, 0, 0, .6);
}
.rsa-rack::before { top: 0; }
.rsa-rack::after { bottom: 0; }

.rsa-svc { display: flex; flex-direction: column; transition: transform var(--t-ui) var(--ease-out); }
.rsa-svc:hover { transform: translateY(-3px); }
.rsa-svc:has(.rsa-svc__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.rsa-svc__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rsa-svc__head .plate__code { margin: 0; }
.rsa-svc__head img { width: 52px; height: 52px; margin: -6px -4px 14px 0; }
.rsa-svc__link { color: inherit; text-decoration: none; }
.rsa-svc__link:focus-visible { outline: none; }
.rsa-svc__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.rsa-svc__ticks { list-style: none; margin-top: 22px; display: grid; gap: 11px; font-size: .92rem; line-height: 1.35; color: var(--fg-2); }
.rsa-svc__ticks li { display: flex; align-items: center; gap: 12px; }
.rsa-svc__foot {
  margin-top: auto;
  padding-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 620;
  font-stretch: 106%;
  font-size: .9rem;
  color: var(--fg);
}
.rsa-svc__foot svg { width: 18px; height: 18px; transition: transform var(--t-ui) var(--ease-out); }
.rsa-svc:hover .rsa-svc__foot svg { transform: translateX(4px); }

.rsa-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: var(--radius);
  border: 1.5px dashed rgba(195, 202, 208, .3);
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .018) 0 6px, rgba(255, 255, 255, 0) 6px 12px);
}
.rsa-slot__plus { position: relative; width: 40px; height: 40px; margin-bottom: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); }
.rsa-slot__plus::before, .rsa-slot__plus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 1.5px;
  margin: -.75px 0 0 -7px;
  border-radius: 1px;
  background: var(--fg-2);
}
.rsa-slot__plus::after { transform: rotate(90deg); }
.rsa-slot .crosslinks { margin-top: auto; padding-top: 24px; }
.rsa-slot .chip { min-height: 44px; }

@media (max-width: 960px) {
  .rsa-rack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rsa-slot { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .rsa-rack { grid-template-columns: 1fr; }
  .rsa-rack::before, .rsa-rack::after { left: -6px; right: -6px; }
}

/* ---------- Il percorso di una famiglia: la guida con quattro fermate ---------- */
.rsa-track { position: relative; padding-top: 56px; --pin: 26px; --tg: clamp(20px, 3vw, 44px); }
.rsa-track > .example-tag { position: absolute; top: 0; left: 0; }
.rsa-track__stops { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--tg); }
.rsa-stop { position: relative; padding-top: calc(var(--pin) + 30px); }
.rsa-stop__pin {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--pin);
  height: var(--pin);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #F4F6F7 0%, #AEB7BD 30%, #59636A 72%, #2C3337 100%);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .6), inset 0 -1px 1px rgba(0, 0, 0, .4);
}
/* LED a due strati: corpo spento fisso, luce sul ::after in opacità */
.rsa-stop__led {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22292E;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .8);
}
.rsa-stop__led::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 40% 35%, #E6F3FC, #8CC0E6 55%, #4F8FC0);
  box-shadow: 0 0 0 3px rgba(140, 192, 230, .2), 0 0 12px rgba(140, 192, 230, .9);
  transition: opacity var(--t-ui) var(--ease-out);
}
.rsa-stop--person .rsa-stop__led::after {
  background: radial-gradient(circle at 40% 35%, #FFE6C4, #E0A050 55%, #B8772F);
  box-shadow: 0 0 0 3px rgba(224, 160, 80, .2), 0 0 14px rgba(224, 160, 80, .9);
}
.js-motion .rsa-track.is-armed .rsa-stop:not(.is-on) .rsa-stop__led::after { opacity: 0; }
.rsa-stop__sonar {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(224, 160, 80, .85);
  opacity: 0;
  pointer-events: none;
}
.js-motion .rsa-stop.is-ping .rsa-stop__sonar { animation: rsa-sonar 2.2s var(--ease-out) 2 both; }
@keyframes rsa-sonar { from { transform: scale(.9); opacity: .9; } to { transform: scale(1.9); opacity: 0; } }

/* tratto di guida fra due fermate: binario spento, filo che si accende, quota */
.rsa-seg {
  position: absolute;
  top: calc(var(--pin) / 2 - 7px);
  left: calc(var(--pin) + 6px);
  width: calc(100% + var(--tg) - var(--pin) - 12px);
  height: 14px;
}
.rsa-seg::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 2px;
  border-radius: 1px;
  background: rgba(195, 202, 208, .16);
}
.rsa-seg__run { position: absolute; inset: 0; overflow: hidden; }
.rsa-seg__fill { position: absolute; inset: 0; transition: transform .8s var(--ease-in-out); }
.rsa-seg__fill::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, rgba(140, 192, 230, .3), var(--blu));
  box-shadow: 0 0 10px rgba(140, 192, 230, .45);
}
.rsa-seg__fill::after {
  content: "";
  position: absolute;
  right: 0;
  top: 3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #E6F3FC;
  box-shadow: 0 0 10px 2px rgba(140, 192, 230, .9);
  opacity: 0;
}
.rsa-seg--night::before { background: repeating-linear-gradient(90deg, rgba(195, 202, 208, .32) 0 6px, rgba(195, 202, 208, 0) 6px 12px); }
.rsa-seg--night .rsa-seg__fill { transition-duration: 1.7s; transition-timing-function: cubic-bezier(.45, 0, .55, 1); }
.rsa-seg--night .rsa-seg__fill::before { background: repeating-linear-gradient(90deg, rgba(140, 192, 230, .6) 0 6px, rgba(140, 192, 230, 0) 6px 12px); box-shadow: none; }
.js-motion .rsa-track.is-armed .rsa-seg:not(.is-run) .rsa-seg__fill { transform: translateX(-101%); }
.js-motion .rsa-track.is-armed .rsa-seg.is-run .rsa-seg__fill::after { animation: rsa-spark .8s linear both; }
.js-motion .rsa-track.is-armed .rsa-seg--night.is-run .rsa-seg__fill::after { animation-duration: 1.7s; }
@keyframes rsa-spark { 0% { opacity: 0; } 12%, 80% { opacity: 1; } 100% { opacity: 0; } }

.rsa-seg__dim {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin-bottom: 6px;
  display: flex;
  justify-content: center;
  height: 10px;
  border-inline: 1px solid var(--line-strong);
}
.rsa-seg__dim::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-strong); }
.rsa-seg__dim span {
  position: relative;
  align-self: center;
  padding: 0 8px;
  background: var(--pozzo);
  font-family: var(--font-mono);
  font-size: .6rem;
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
}

.rsa-stop__time { font-family: var(--font-mono); font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1; letter-spacing: .02em; color: var(--fg); }
.rsa-stop__icon {
  position: absolute;
  right: 0;
  top: calc(var(--pin) + 18px);
  width: 44px;
  height: 44px;
  fill: none;
  stroke: var(--fg-3);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .8));
}
.rsa-stop__verb { margin-top: 22px; }
.rsa-stop__text { margin-top: 8px; max-width: 30ch; color: var(--fg-2); font-size: .98rem; line-height: 1.55; }

@media (max-width: 760px) {
  .rsa-track { padding-top: 48px; }
  .rsa-track__stops { grid-template-columns: 1fr; row-gap: 44px; }
  .rsa-stop { padding: 0 0 0 calc(var(--pin) + 22px); }
  .rsa-stop__icon { top: -8px; }
  .rsa-seg {
    top: calc(var(--pin) + 6px);
    left: calc(var(--pin) / 2 - 7px);
    width: 14px;
    height: calc(100% + 44px - var(--pin) - 12px);
  }
  .rsa-seg::before, .rsa-seg__fill::before { left: 6px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .rsa-seg__fill::before { background: linear-gradient(180deg, rgba(140, 192, 230, .3), var(--blu)); }
  .rsa-seg--night::before { background: repeating-linear-gradient(180deg, rgba(195, 202, 208, .32) 0 6px, rgba(195, 202, 208, 0) 6px 12px); }
  .rsa-seg--night .rsa-seg__fill::before { background: repeating-linear-gradient(180deg, rgba(140, 192, 230, .6) 0 6px, rgba(140, 192, 230, 0) 6px 12px); }
  .rsa-seg__fill::after { right: auto; top: auto; left: 3px; bottom: 0; }
  .js-motion .rsa-track.is-armed .rsa-seg:not(.is-run) .rsa-seg__fill { transform: translateY(-101%); }
  .rsa-seg__dim { display: none; }
}

/* ---------- La stessa settimana: tre leve da «a mano» a «da solo» ---------- */
.rsa-week__board { position: relative; padding-top: 48px; }
.rsa-week__board > .example-tag { position: absolute; top: 0; left: 0; }
.rsa-week__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.rsa-day { display: grid; align-content: start; gap: 20px; }
.rsa-day__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.rsa-day__name { font-family: var(--font-mono); font-stretch: 100%; font-size: .72rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.rsa-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .54rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fg-3);
}
.rsa-switch__lbl { transition: color var(--t-ui) var(--ease-out); }
.rsa-switch__lbl--a { color: var(--fg); }
.rsa-switch__slot {
  position: relative;
  width: 46px;
  height: 24px;
  border-radius: 12px;
  background: linear-gradient(180deg, #AEB6BB, #D3D9DC);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .3), inset 0 -1px 0 rgba(255, 255, 255, .7), 0 1px 0 rgba(255, 255, 255, .85);
}
.rsa-switch__slot::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 8px;
  background: rgba(47, 110, 158, 0);
  transition: background var(--t-ui) var(--ease-out);
}
.rsa-switch__knob {
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #FFFFFF 0%, #E3E8EB 30%, #9AA4AA 80%, #6E787F 100%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .35), inset 0 -1px 1px rgba(0, 0, 0, .2);
  transition: transform 460ms var(--ease-clack);
}
.rsa-day.is-auto .rsa-switch__knob { transform: translateX(22px); }
.rsa-day.is-auto .rsa-switch__slot::before { background: rgba(47, 110, 158, .3); }
.rsa-day.is-auto .rsa-switch__lbl--a { color: var(--fg-3); }
.rsa-day.is-auto .rsa-switch__lbl--b { color: var(--blu-scuro); }

.rsa-day__row { display: grid; gap: 6px; }
.rsa-day__k {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.rsa-day__v { font-size: .98rem; line-height: 1.5; color: var(--fg-2); transition: color var(--t-ui) var(--ease-out), text-decoration-color var(--t-ui) var(--ease-out); }
.rsa-day__row--before .rsa-day__v { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(21, 24, 26, 0); }
.rsa-day.is-auto .rsa-day__row--before .rsa-day__v { color: var(--fg-3); text-decoration-color: rgba(21, 24, 26, .38); }
.rsa-day.is-auto .rsa-day__row--after .rsa-day__v { color: var(--fg); }
.rsa-day.is-auto .rsa-day__row--after .led { --led-lit: 1; }

.rsa-week__close { margin-top: clamp(40px, 6vw, 72px); max-width: 24ch; }
.rsa-week__close span { color: var(--blu-scuro); }

@media (max-width: 960px) {
  .rsa-week__grid { grid-template-columns: 1fr; max-width: 560px; }
}
/* la colonna della scheda non si allarga oltre la targa; se proprio manca posto, la leva va a capo */
.rsa-day { grid-template-columns: minmax(0, 1fr); }
.rsa-day__head { flex-wrap: wrap; row-gap: 10px; }
/* tre schede strette (961–1180 px): etichette in Martian Mono un po' più stretto, così «Mercoledì»
   e la leva stanno sulla stessa riga */
@media (min-width: 961px) and (max-width: 1180px) {
  .rsa-day__head { column-gap: 10px; }
  .rsa-day__name { font-stretch: 87.5%; letter-spacing: .12em; }
  .rsa-switch { gap: 6px; font-stretch: 87.5%; letter-spacing: .1em; }
}

/* ---------- I dati degli ospiti: il quadro delle chiavi ---------- */
.rsa-data__split { align-items: center; }
.rsa-data__text { margin-bottom: 0; }
.rsa-data__points { list-style: none; display: grid; gap: 20px; margin-top: 10px; }
.rsa-data__points li { position: relative; display: grid; gap: 4px; padding-left: 24px; }
.rsa-data__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blu);
  box-shadow: 0 0 0 3px rgba(140, 192, 230, .14), 0 0 10px rgba(140, 192, 230, .7);
}
.rsa-data__points p { color: var(--fg-2); font-size: .98rem; line-height: 1.55; }

.rsa-keys-panel { padding: clamp(22px, 2.6vw, 34px); }
.rsa-keys-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; margin-bottom: 10px; }
.rsa-keys-panel__head .plate__code { margin: 0; }
.rsa-keys { width: 100%; border-collapse: collapse; }
.rsa-keys th, .rsa-keys td { padding: 14px 4px; }
.rsa-keys thead th {
  font-family: var(--font-mono);
  font-size: .56rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--fg-3);
  text-align: center;
}
.rsa-keys tbody tr { border-top: 1px solid var(--line); }
.rsa-keys tbody th { text-align: left; font-weight: 600; font-size: .95rem; color: var(--fg); padding-right: 12px; }
.rsa-keys td { text-align: center; }
.rsa-key {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  vertical-align: middle;
  background:
    radial-gradient(circle, #0E1113 0 55%, rgba(14, 17, 19, 0) 57%),
    conic-gradient(from 200deg, #3A4146, #C3CAD0 20%, #59636A 40%, #2A3034 60%, #8E989E 80%, #3A4146);
  box-shadow: 0 4px 8px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .3);
}
.rsa-key__plug {
  position: relative;
  width: 58%;
  height: 58%;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #F4F6F7 0%, #B9C1C6 32%, #6E787F 78%, #3E464B 100%);
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .6);
}
.rsa-key__plug::before {
  /* la cava della chiave: è lei che gira */
  content: "";
  position: absolute;
  left: 50%;
  top: 16%;
  bottom: 16%;
  width: 3px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #121517;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4);
  transition: transform 480ms var(--ease-clack);
}
.rsa-key.is-open .rsa-key__plug::before { transform: rotate(90deg); }
.js-motion .rsa-key.is-try .rsa-key__plug::before { animation: rsa-try .5s var(--ease-out); }
@keyframes rsa-try { 35% { transform: rotate(14deg); } 65% { transform: rotate(-5deg); } 100% { transform: rotate(0); } }
.rsa-key__led {
  position: absolute;
  top: -2px;
  right: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22292E;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
}
.rsa-key__led::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--blu);
  box-shadow: 0 0 0 3px rgba(140, 192, 230, .16), 0 0 12px rgba(140, 192, 230, .85);
  opacity: 0;
  transition: opacity var(--t-ui) var(--ease-out);
}
.rsa-key.is-open .rsa-key__led::after { opacity: 1; }
.rsa-keys-panel__note { margin-top: 14px; font-size: var(--fs-small); color: var(--fg-3); }
/* La tabella si adatta alla larghezza della targa, non dello schermo (a 961 px la targa è stretta
   quanto su un telefono): sotto i 380 px utili etichette in Martian Mono stretto (asse di larghezza
   del font) e chiavi più piccole. La colonna del testo non si allarga mai per colpa della targa. */
.rsa-data__split > * { min-width: 0; }
.rsa-keys-panel { container-type: inline-size; }
@media (max-width: 420px) {
  .rsa-keys-panel { padding: 20px 14px; }
}
@container (max-width: 379px) {
  .rsa-keys th, .rsa-keys td { padding-inline: 2px; }
  .rsa-keys thead th { font-stretch: 75%; letter-spacing: .06em; }
  .rsa-keys tbody th { font-size: .86rem; padding-right: 8px; }
  .rsa-key { width: 36px; height: 36px; }
}
@container (max-width: 300px) {
  .rsa-keys thead th { letter-spacing: .02em; }
  .rsa-keys tbody th { padding-right: 6px; }
}

/* ---------- Citazione lunga ---------- */
.rsa-quote { --quote-measure: none; }
.rsa-quote .quote-band__q { max-width: min(100%, 54rem); }
.rsa-quote .quote-band__q p { font-size: clamp(1.7rem, 3.5vw, 3.2rem); line-height: 1.1; }
/* su cinque righe la sfumatura d'acciaio del core scurirebbe la riga centrale: qui scende piano */
.rsa-quote .steel-text { --steel-fill: linear-gradient(180deg, #FFFFFF 0%, #E3E8EB 42%, #AEB7BD 100%); }

/* ---------- Banda finale ----------
   Colonna, bottone e misure sotto i 900 e i 480 px li dà il core. Qui solo il titolo, che è lungo:
   sul telefono sei righe invece di sette. */
@media (max-width: 480px) {
  .page-rsa .cta-band__text h2 { font-size: 1.72rem; }
}

/* ---------- Stampa ---------- */
@media print {
  .rsa-dial__glass, .rsa-dial__dusk, .rsa-rider__sonar, .rsa-stop__sonar { display: none; }
}