/* goalsonar.com — the one stylesheet of the site (29/09/2026).
   The GoalSonar brand of 29/09 (docs/branding): black, fluo green #39F266 for the sonar and its reading, outcome
   colours always with a symbol and a word (presa gold, non presa red, scaduta/annullata blue), DIN Alternate for
   numbers and titles, Helvetica Neue for text; system fonts only (Bahnschrift and Roboto Condensed stand in for DIN
   on Windows and Android). Motion is decoration: with «reduce motion» every page reads the same, standing still. */

:root {
  color-scheme: dark;
  --bg: #000000; --surface: #0D0D0D; --surface-2: #121212; --line: #262626; --line-2: #3A3A3A;
  --ink: #F5F5F5; --sub: #A3A3A3; --dim: #8C8C8C;
  --sonar: #39F266; --sonar-deep: #259D42;
  --presa: #FFD014; --non-presa: #FF3347; --blue: #2EA8FF;
  --num: "DIN Alternate", Bahnschrift, "D-DIN", "DIN 2014", "sans-serif-condensed", "Roboto Condensed", "Arial Narrow",
         "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Segoe UI", Roboto, Arial, sans-serif;
  --wide: 1120px; --narrow: 740px; --gutter: 16px; --radius: 14px;
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* Moving between pages: a short cross-fade where the browser can (Chrome, Edge, Safari 18.2+); the top bar stays. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg) radial-gradient(ellipse 80% 520px at 50% -140px, rgba(57, 242, 102, .075), transparent 72%) no-repeat;
  color: var(--ink); font: 15px/1.55 var(--text); -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }
img, svg { max-width: 100%; }
a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color .2s, color .2s, background-color .2s; }
a:hover { border-color: var(--sonar); }
:focus-visible { outline: 2px solid var(--sonar); outline-offset: 3px; border-radius: 3px; }
::selection { background: rgba(57, 242, 102, .32); color: #FFFFFF; }
b, strong { font-weight: 600; }

.skip { position: absolute; left: -9999px; top: 10px; z-index: 60; padding: 9px 16px; border: 0; border-radius: 999px;
        background: var(--sonar); color: #000000; font-weight: 700; }
.skip:focus { left: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden;
                   clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
.wrap.narrow { max-width: var(--narrow); }

/* ---- the logo (inline SVG, so its three sonar arcs can move) ------------------------------------------- */
.logo { display: block; height: auto; }
.logo .arc-1 { --o: 1; }
.logo .arc-2 { --o: .65; }
.logo .arc-3 { --o: .35; }
.logo .arc { opacity: var(--o); }

/* ---- top bar ------------------------------------------------------------------------------------------ */
.topbar { position: sticky; top: 0; z-index: 40; view-transition-name: topbar;
          background: rgba(0, 0, 0, .78); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
          border-bottom: 1px solid transparent; transition: border-color .3s; }
.topbar.is-scrolled { border-bottom-color: var(--line); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 58px; }
.brand { display: inline-flex; align-items: center; flex: none; padding: 6px 0; border: 0; }
.brand .logo { width: auto; height: 24px; }
.nav { display: flex; align-items: center; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a { flex: none; padding: 7px 11px; border: 0; border-radius: 999px; color: var(--sub); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--ink); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
@media (max-width: 380px) {
  .brand .logo { height: 21px; }
  .nav a { padding: 7px 8px; font-size: 13px; }
}

/* ---- titles shared by the pages ----------------------------------------------------------------------- */
.eyebrow { margin: 0 0 14px; font: 700 12px/1.2 var(--num); letter-spacing: .24em; text-transform: uppercase; color: var(--sonar); }
.kicker { margin: 0; font: 700 13px/1.2 var(--num); letter-spacing: .2em; text-transform: uppercase; color: var(--sub); }
h1 { margin: 0; font: 700 clamp(32px, 6.2vw, 54px)/1.04 var(--num); letter-spacing: -.005em; text-wrap: balance; }
h1 .accent { display: block; color: var(--sonar); }
.lead { margin: 18px 0 0; max-width: 60ch; font-size: clamp(16px, 2.1vw, 18px); line-height: 1.55; color: var(--sub); text-wrap: pretty; }
.lead b { color: var(--ink); }

/* ---- inner pages -------------------------------------------------------------------------------------- */
.page-head { padding: 54px 0 18px; }
.page-head .updated { margin: 16px 0 0; font-size: 12.5px; color: var(--dim); }
.toc { margin: 18px 0 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.toc .kicker { font-size: 11.5px; margin-bottom: 10px; }
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; columns: 2 240px; column-gap: 28px; }
.toc li { counter-increment: toc; margin: 0 0 6px; break-inside: avoid; font-size: 14px; }
.toc li::before { content: counter(toc, decimal-leading-zero); margin-right: 10px; font: 700 12px/1 var(--num); color: var(--dim); }
.toc a { border: 0; color: var(--sub); }
.toc a:hover { color: var(--ink); }

.prose { padding: 10px 0 30px; font-size: 16px; line-height: 1.68; color: #D6D6D6; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 44px 0 12px; font: 700 21px/1.25 var(--num); letter-spacing: .005em; color: var(--ink); scroll-margin-top: 84px; text-wrap: balance; }
.prose h3 { margin: 26px 0 8px; font-size: 16.5px; font-weight: 650; color: var(--ink); }
.prose p { margin: 0 0 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 22px; }
.prose li { margin: 0 0 7px; }
.prose li::marker { color: var(--sonar); }
.prose a { border-bottom-color: rgba(57, 242, 102, .45); }
.prose b, .prose strong { color: var(--ink); }
.prose .small { font-size: 13.5px; color: var(--sub); }
.prose code { padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface-2);
              font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); overflow-wrap: anywhere; }
.prose pre { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
             overflow-x: auto; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--ink); }
.box { margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.box > :last-child { margin-bottom: 0; }
.box.sonar { border-color: rgba(57, 242, 102, .42); background: linear-gradient(180deg, rgba(57, 242, 102, .06), var(--surface) 70%); }
.box .kicker { margin-bottom: 8px; font-size: 11.5px; }
.table-wrap { margin: 6px 0 20px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5; }
.prose th, .prose td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose tr:last-child td { border-bottom: 0; }
.prose th { background: var(--surface-2); font: 700 11.5px/1.3 var(--num); letter-spacing: .14em; text-transform: uppercase; color: var(--sub); }
.prose dl { margin: 0 0 18px; display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 8px 18px; }
.prose dt { color: var(--sub); }
.prose dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
@media (max-width: 520px) { .prose dl { grid-template-columns: 1fr; gap: 2px; } .prose dd { margin-bottom: 10px; } }
.prose hr { margin: 34px 0; border: 0; border-top: 1px solid var(--line); }

.buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.button { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 1px solid var(--line-2); border-radius: 999px;
          background: var(--surface-2); color: var(--ink); font-size: 14px; font-weight: 600; }
.button:hover { border-color: var(--sonar); }
.button.primary { background: var(--sonar); border-color: var(--sonar); color: #000000; }
.button.primary:hover { background: #5BF683; }
.button svg { width: 15px; height: 15px; flex: none; }

/* ---- the home: hero and sonar scope ------------------------------------------------------------------- */
.hero { display: grid; gap: 26px; align-items: center; padding: 34px 0 10px; }
.hero .eyebrow { margin-bottom: 16px; }
@media (min-width: 920px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 470px); gap: 60px; padding: 66px 0 24px; }
}
.status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 26px 0 0; }
/* The status reads as one line of text that may wrap on a phone («Aggiornamento sospeso · ultimo dato …»): an inline
   block with the dot in its left padding, not a row of flex items. */
.pill { position: relative; display: inline-block; max-width: 100%; padding: 8px 16px 8px 30px; border: 1px solid var(--line);
        border-radius: 18px; background: var(--surface); color: var(--sub); font-size: 13px; line-height: 1.35; }
.pill::before { content: ""; position: absolute; left: 13px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.pill.live::before { background: var(--sonar); box-shadow: 0 0 0 0 rgba(57, 242, 102, .55); }
.pill.paused::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sub); }
.pill.stale::before, .pill.waiting::before { background: var(--dim); }
.pill.error::before { background: var(--non-presa); }
.pill b { color: var(--ink); font-weight: 600; }
.sound { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px;
         background: var(--surface); color: var(--sub); font: 13px/1.2 var(--text); cursor: pointer; transition: border-color .2s, color .2s; }
.sound svg { width: 15px; height: 15px; flex: none; }
.sound[aria-pressed="true"] { color: var(--ink); border-color: var(--line-2); }
.sound:hover { border-color: var(--sonar); }
.sound:focus-visible { outline: 2px solid var(--sonar); outline-offset: 2px; }
.sound-note { margin: 10px 0 0; font-size: 12px; color: var(--dim); }

.scope-box { position: relative; }
.radar { position: relative; width: min(100%, 470px); margin: 0 auto; aspect-ratio: 1 / 1; touch-action: manipulation; }
.radar svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.radar .sweep { position: absolute; inset: 12.5%; border-radius: 50%; pointer-events: none; opacity: 0;
                background: conic-gradient(from 0deg, rgba(57, 242, 102, 0) 0deg, rgba(57, 242, 102, 0) 250deg,
                            rgba(57, 242, 102, .05) 296deg, rgba(57, 242, 102, .2) 342deg, rgba(57, 242, 102, .5) 359.4deg,
                            rgba(57, 242, 102, 0) 359.6deg);
                transition: opacity .6s; will-change: transform; }
.radar[data-state="live"] .sweep { opacity: 1; }
.radar[data-state="paused"] .sweep { opacity: .5; }
.radar .face { fill: url(#scope-glow); stroke: var(--line-2); stroke-width: 1; }
.radar .ring { fill: none; stroke: var(--line); stroke-width: 1; }
.radar .ring.half { stroke-dasharray: 2 5; }
.radar .spoke { stroke: #1C1C1C; stroke-width: 1; }
.radar .tick { stroke: var(--line-2); stroke-width: 1.2; }
.radar .tick.major { stroke: var(--dim); stroke-width: 1.5; }
.radar text { font: 700 11px var(--num); fill: var(--dim); }
.radar .ring-label { font-size: 10px; fill: var(--dim); }
.radar .emit { fill: none; stroke: var(--sonar); stroke-width: 1.4; opacity: 0; vector-effect: non-scaling-stroke;
               transform-box: fill-box; transform-origin: center; }
.radar .blip { transition: opacity .25s; }
.radar .blip .core.presa { fill: var(--presa); }
.radar .blip .core.non-presa { fill: #000000; stroke: var(--non-presa); stroke-width: 1.9; }
.radar .blip .core.blue { fill: #000000; stroke: var(--blue); stroke-width: 1.9; stroke-dasharray: 2.4 1.8; }
.radar .blip .core.live { fill: var(--sonar); }
.radar .blip .core.unknown { stroke: var(--dim); stroke-width: 2; stroke-linecap: round; }
.radar .blip .ping { fill: none; stroke: var(--sonar); stroke-width: 1.5; opacity: 0; vector-effect: non-scaling-stroke;
                     transform-box: fill-box; transform-origin: center; }
.radar .blip.picked .core { stroke: var(--ink); stroke-width: 2; }
.radar .tip { position: absolute; left: 0; top: 0; z-index: 3; min-width: 150px; max-width: 250px; padding: 9px 11px; border: 1px solid var(--line-2);
              border-radius: 10px; background: rgba(18, 18, 18, .96); box-shadow: 0 8px 28px rgba(0, 0, 0, .6); pointer-events: none;
              font-size: 12.5px; line-height: 1.4; color: var(--sub); opacity: 0; transform: translate(-50%, calc(-100% - 14px)); transition: opacity .15s; }
.radar .tip.on { opacity: 1; }
.radar .tip b { display: block; color: var(--ink); font-size: 13px; }
.radar .tip .pct-tip { font: 700 15px var(--num); color: var(--sonar); }
.radar-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--sub); }
.radar-legend li { display: inline-flex; align-items: center; gap: 6px; }
.radar-legend svg { width: 10px; height: 10px; flex: none; }
.radar-key { margin: 6px auto 0; max-width: 42ch; text-align: center; font-size: 12px; color: var(--dim); }

/* ---- «Il conto» ----------------------------------------------------------------------------------------- */
.section { margin-top: 44px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.section-head .count { font: 700 13px/1 var(--num); color: var(--dim); letter-spacing: .06em; }
.section-lead { margin: -4px 0 12px; max-width: 70ch; font-size: 13.5px; color: var(--sub); }
.summary { padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.stat .n { display: block; font: 700 clamp(30px, 7vw, 42px)/1 var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.stat .l { display: block; margin-top: 7px; font-size: 12.5px; color: var(--sub); }
.stat.presa .n, .stat.presa .sym { color: var(--presa); }
.stat.non-presa .n, .stat.non-presa .sym { color: var(--non-presa); }
.calib { display: grid; gap: 14px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.calib > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: center; }
.calib .n { grid-row: 1 / 3; font: 700 28px/1 var(--num); font-variant-numeric: tabular-nums; }
.calib .declared .n { color: var(--sonar); }
.calib .l { font-size: 12.5px; color: var(--sub); }
.meter { display: block; height: 6px; margin-top: 7px; border-radius: 3px; background: var(--line); overflow: hidden; }
.meter i { display: block; width: 0; height: 100%; border-radius: inherit; transition: width 1.3s var(--ease); }
.declared .meter i { background: var(--sonar); }
.realized .meter i { background: var(--ink); }
.note { margin: 14px 0 0; font-size: 12.5px; color: var(--dim); }

/* ---- the calls ------------------------------------------------------------------------------------------ */
.calls { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .calls { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
@media (min-width: 1080px) { .calls { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.call { position: relative; padding: 14px 16px 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
        transition: border-color .25s, background-color .25s, transform .35s var(--ease), box-shadow .35s var(--ease); }
.call.fresh { border-color: var(--sonar); }
.call.has-detail { cursor: pointer; }
.call.has-detail:hover { border-color: var(--line-2); background: #101010; }
.call.open { border-color: var(--line-2); }
.call:has(.badge.open) { border-color: rgba(57, 242, 102, .5); background: linear-gradient(180deg, rgba(57, 242, 102, .07), var(--surface) 62%); }
.call.flash { box-shadow: 0 0 0 2px var(--sonar); }
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.when { font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.teams { margin: 11px 0 2px; font-size: 16.5px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.meta { margin: 0 0 11px; font-size: 13px; color: var(--sub); }
.reading { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.pct { font: 700 32px/1 var(--num); color: var(--sonar); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pct.none { color: var(--dim); }
.what { font-size: 13px; color: var(--sub); }
.bar { height: 4px; margin-top: 12px; border-radius: 2px; background: var(--line); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sonar-deep), var(--sonar)); transform-origin: left center; }
.more { margin-top: 11px; padding: 2px 0; border: 0; background: none; color: var(--sub); font: 12px/1.2 var(--text); letter-spacing: .04em; cursor: pointer; }
.more::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
               transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease); }
.call.open .more::after { transform: translateY(1px) rotate(-135deg); }
.more:hover { color: var(--ink); }
.more:focus-visible { outline: 2px solid var(--sonar); outline-offset: 3px; border-radius: 2px; }
.detail { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); cursor: default; }
.chart { display: block; width: 100%; max-width: 440px; height: auto; }
.chart text { font-family: var(--num); font-size: 11px; fill: var(--dim); }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .half { stroke: #1A1A1A; stroke-width: 1; }
.chart .line { fill: none; stroke: var(--sonar); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .goal { fill: var(--ink); }
.chart .call-at { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.chart .call-label { fill: var(--ink); }
.scard { display: block; width: 100%; max-width: 440px; height: auto; border: 1px solid var(--line); border-radius: 12px; background: #000000; }
.facts { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px; color: var(--sub); }
.facts b { color: var(--ink); font-weight: 600; }
.facts .goals span { white-space: nowrap; }
.src { margin: 8px 0 0; font-size: 11.5px; color: var(--dim); }
.badge { display: inline-flex; align-items: center; gap: 6px; flex: none; font: 700 11px/1 var(--num); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.badge svg { width: 10px; height: 10px; flex: none; }
.badge.presa { color: var(--presa); }
.badge.non-presa { color: var(--non-presa); }
.badge.blue { color: var(--blue); }
.badge.open { color: var(--sonar); }
.badge.unknown { color: var(--dim); }
.noscript { margin: 12px 0 0; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 12px; color: var(--sub); font-size: 14px; }
.empty { margin: 0; padding: 26px 16px; border: 1px dashed var(--line); border-radius: var(--radius); text-align: center; color: var(--sub); }

/* ---- how it reads: three steps, the outcomes --------------------------------------------------------- */
.steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
.steps li { position: relative; padding: 18px 18px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.steps .k { display: block; font: 700 13px/1 var(--num); letter-spacing: .2em; color: var(--dim); }
.steps b { display: block; margin: 10px 0 6px; font: 700 22px/1.1 var(--num); letter-spacing: .06em; text-transform: uppercase; }
.steps p { margin: 0; font-size: 14px; color: var(--sub); }
.steps li::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sonar); transform: scaleX(0); transform-origin: left center; }
.outcomes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.outcomes li { display: flex; align-items: baseline; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); font-size: 13.5px; color: var(--sub); }
.outcomes .badge { min-width: 92px; }
.how p { margin: 0 0 10px; max-width: 72ch; color: var(--sub); font-size: 14.5px; }
.how p b { color: var(--ink); }
.how-notes { margin-top: 22px; }
.more-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-weight: 600; border-bottom-color: rgba(57, 242, 102, .5); }

/* ---- FAQ ------------------------------------------------------------------------------------------------ */
.faq { display: grid; gap: 10px; margin: 0 0 12px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); transition: border-color .2s; }
.faq details[open] { border-color: var(--line-2); }
.faq summary { position: relative; padding: 16px 48px 16px 18px; list-style: none; cursor: pointer; font-weight: 600; color: var(--ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; margin-top: -7px;
                      border-right: 1.6px solid var(--sub); border-bottom: 1.6px solid var(--sub); transform: rotate(45deg); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: translateY(4px) rotate(-135deg); }
.faq summary:focus-visible { outline-offset: -2px; border-radius: var(--radius); }
.faq .answer { padding: 0 18px 16px; color: #D0D0D0; font-size: 15px; line-height: 1.65; }
.faq .answer p { margin: 0 0 10px; }
.faq .answer > :last-child { margin-bottom: 0; }

/* ---- footer --------------------------------------------------------------------------------------------- */
.site-footer { margin-top: 64px; padding: 34px 0 30px; border-top: 1px solid var(--line); background: linear-gradient(180deg, #050505, var(--bg)); color: var(--dim); font-size: 13px; }
.foot-top { display: grid; gap: 28px; }
@media (min-width: 820px) { .foot-top { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 34px; } }
.foot-brand .logo { width: auto; height: 26px; }
.foot-brand p { margin: 14px 0 0; max-width: 34ch; color: var(--sub); line-height: 1.5; }
.foot-col .kicker { font-size: 11px; margin-bottom: 12px; color: var(--dim); }
.foot-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.foot-col a { border: 0; color: var(--ink); font-size: 14px; }
.foot-col a:hover { color: var(--sonar); }
.foot-col a[aria-current="page"] { color: var(--sonar); }
.foot-rg { display: flex; gap: 14px; align-items: flex-start; margin: 30px 0 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--sub); }
.foot-rg p { margin: 0; line-height: 1.5; }
.foot-rg a { color: var(--ink); }
.age { display: inline-grid; place-items: center; flex: none; width: 38px; height: 38px; border: 2px solid var(--ink); border-radius: 50%;
       font: 700 13px/1 var(--num); color: var(--ink); letter-spacing: -.02em; }
.foot-small { margin: 18px 0 0; font-size: 12px; line-height: 1.55; color: var(--dim); }
.foot-small + .foot-small { margin-top: 6px; }
.foot-small a { color: var(--sub); }

/* ---- 404 -------------------------------------------------------------------------------------------------- */
.nothing { display: grid; justify-items: center; gap: 8px; padding: 56px 0 10px; text-align: center; }
.nothing .radar { width: min(76vw, 300px); }
.nothing h1 { margin-top: 18px; }
.nothing .lead { margin-left: auto; margin-right: auto; }
.nothing .buttons { justify-content: center; }

/* ---- motion ------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* The logo pings once when a page opens, and again under the pointer. */
  .logo .arc { animation: arc-in 1.1s var(--ease) both; }
  .logo .arc-2 { animation-delay: .14s; }
  .logo .arc-3 { animation-delay: .28s; }
  .brand:hover .logo .arc, .foot-brand:hover .logo .arc { animation-name: arc-ping; }
  @keyframes arc-in { 0%, 25% { opacity: 0; } 100% { opacity: var(--o); } }
  @keyframes arc-ping { 0% { opacity: var(--o); } 30% { opacity: 0; } 100% { opacity: var(--o); } }

  .pill.live::before { animation: live-dot 2.2s ease-out infinite; }
  @keyframes live-dot { 0% { box-shadow: 0 0 0 0 rgba(57, 242, 102, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(57, 242, 102, 0); } }

  .radar[data-state="live"] .emit { animation: emit 3.6s var(--ease) infinite; }
  .radar[data-state="live"] .emit-2 { animation-delay: 1.2s; }
  .radar[data-state="live"] .emit-3 { animation-delay: 2.4s; }
  @keyframes emit { 0% { transform: scale(.55); opacity: .75; } 100% { transform: scale(5.6); opacity: 0; } }
  .radar .blip.live .ping { animation: blip-ping 1.9s ease-out infinite; }
  @keyframes blip-ping { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(3.4); opacity: 0; } }
  .radar .blip.new { animation: blip-new 1.4s var(--ease) both; transform-box: fill-box; transform-origin: center; }
  @keyframes blip-new { 0% { transform: scale(3); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

  .call.fresh { animation: fresh 2.6s ease-out 1 forwards; }
  @keyframes fresh { 0% { box-shadow: 0 0 0 0 rgba(57, 242, 102, .5); border-color: var(--sonar); }
                     100% { box-shadow: 0 0 0 16px rgba(57, 242, 102, 0); border-color: var(--line); } }
  .call.pending { opacity: 0; transform: translateY(16px); }
  .call.reveal { animation: rise .75s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms); }
  .call.reveal .bar i { animation: grow 1.2s var(--ease) both; animation-delay: calc(var(--i, 0) * 55ms + .18s); }
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes grow { from { transform: scaleX(0); } }
  @media (hover: hover) { .call.has-detail:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); } }
  .call:has(.badge.open)::after { content: ""; position: absolute; left: 16px; right: 16px; top: -1px; height: 2px; border-radius: 2px;
                                  background: linear-gradient(90deg, transparent, var(--sonar), transparent) no-repeat; background-size: 36% 100%;
                                  animation: scan 2.3s linear infinite; }
  @keyframes scan { from { background-position: -60% 0; } to { background-position: 160% 0; } }
  .badge.open svg { animation: ping 1.8s ease-out infinite; }
  @keyframes ping { 0% { opacity: 1; } 70% { opacity: .25; } 100% { opacity: 1; } }

  .steps li::after { animation: step-line 6s var(--ease) infinite; }
  .steps li:nth-child(2)::after { animation-delay: 2s; }
  .steps li:nth-child(3)::after { animation-delay: 4s; }
  .steps li .k { animation: step-k 6s linear infinite; }
  .steps li:nth-child(2) .k { animation-delay: 2s; }
  .steps li:nth-child(3) .k { animation-delay: 4s; }
  @keyframes step-line { 0% { transform: scaleX(0); opacity: 1; } 28% { transform: scaleX(1); opacity: 1; } 34%, 100% { transform: scaleX(1); opacity: 0; } }
  @keyframes step-k { 0%, 30% { color: var(--sonar); } 34%, 100% { color: var(--dim); } }

  .to-rise { opacity: 0; transform: translateY(18px); }
  .to-rise.risen { opacity: 1; transform: none; transition: opacity .8s var(--ease), transform .8s var(--ease); }

  .nothing .radar .sweep { opacity: .9; animation: sweep-turn 5s linear infinite; }
  @keyframes sweep-turn { to { transform: rotate(360deg); } }
  .faq details { interpolate-size: allow-keywords; }
  .faq details::details-content { height: 0; overflow: clip; transition: height .35s var(--ease), content-visibility .35s allow-discrete; }
  .faq details[open]::details-content { height: auto; }
}

/* ==== neon layer (Mario, 29/09: «i colori sono piatti quando tutto il sito è futuristico»; «colori e barre su tutto il
   sito devono essere interattivi»). The same palette, lit: gradients and glows on numbers, bars and chips; every
   coloured element answers the pointer and the keyboard focus. Symbols and words stay, so colour is never alone. */
:root {
  --grad-sonar: linear-gradient(180deg, #B4FFC8 0%, #39F266 46%, #17BC46 100%);
  --grad-presa: linear-gradient(180deg, #FFF2A6 0%, #FFD014 46%, #F09A00 100%);
  --grad-non-presa: linear-gradient(180deg, #FFA3AE 0%, #FF3347 46%, #CC0F2A 100%);
  --grad-ink: linear-gradient(180deg, #FFFFFF 0%, #F5F5F5 50%, #B8B8B8 100%);
  --glow-sonar: rgba(57, 242, 102, .55);
  --glow-presa: rgba(255, 208, 20, .5);
  --glow-non-presa: rgba(255, 51, 71, .5);
  --glow-blue: rgba(46, 168, 255, .5);
}

/* Numbers and the headline accent: gradient light with a halo. */
h1 .accent, .stat .n, .calib .n, .pct { -webkit-background-clip: text; background-clip: text; color: transparent; }
h1 .accent { background-image: var(--grad-sonar); filter: drop-shadow(0 0 22px rgba(57, 242, 102, .32)); }
.eyebrow { text-shadow: 0 0 14px rgba(57, 242, 102, .55); }
.stat .n { background-image: var(--grad-ink); filter: drop-shadow(0 0 12px rgba(255, 255, 255, .16)); }
.stat.presa .n { background-image: var(--grad-presa); filter: drop-shadow(0 0 14px var(--glow-presa)); }
.stat.non-presa .n { background-image: var(--grad-non-presa); filter: drop-shadow(0 0 14px var(--glow-non-presa)); }
.stat .sym { text-shadow: 0 0 10px currentColor; }
.calib .declared .n, .pct { background-image: var(--grad-sonar); filter: drop-shadow(0 0 12px var(--glow-sonar)); }
.calib .realized .n { background-image: var(--grad-ink); filter: drop-shadow(0 0 10px rgba(255, 255, 255, .2)); }
.pct.none { background: none; color: var(--dim); filter: none; }

/* Bars: a lit track, a gradient fill with its glow and a bright head where it ends. */
.bar, .meter { overflow: visible; background: linear-gradient(90deg, #151515, #1E1E1E); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .035); }
.bar { height: 5px; border-radius: 3px; }
.meter { position: relative; height: 7px; border-radius: 4px; }
.bar i, .meter i { position: relative; border-radius: inherit; transition: width 1.3s var(--ease), box-shadow .25s, filter .25s; }
.bar i, .declared .meter i { background: linear-gradient(90deg, #10702C, #39F266 72%, #C4FFD4); box-shadow: 0 0 10px var(--glow-sonar), 0 0 2px rgba(57, 242, 102, .9); }
.realized .meter i { background: linear-gradient(90deg, #6E6E6E, #F5F5F5 78%, #FFFFFF); box-shadow: 0 0 10px rgba(255, 255, 255, .28); }
.bar i::after, .meter i::after { content: ""; position: absolute; right: -2px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
                                 background: #E6FFEC; box-shadow: 0 0 10px 2px rgba(57, 242, 102, .85); }
.meter i::after { width: 9px; height: 9px; margin-top: -4.5px; }
.realized .meter i::after { background: #FFFFFF; box-shadow: 0 0 10px 2px rgba(255, 255, 255, .6); }
.call:hover .bar i, .calib > div:hover .meter i, .calib > div:focus-visible .meter i { filter: brightness(1.18) saturate(1.1); }

/* The calibration rows: under the pointer each bar shows the other's mark, and the gap is spelled out. */
.calib > div { margin: 0 -10px; padding: 7px 10px; border-radius: 12px; transition: background-color .25s; outline: none; }
.calib > div:hover, .calib > div:focus-visible { background: rgba(255, 255, 255, .035); }
.calib > div:focus-visible { box-shadow: 0 0 0 2px var(--sonar); }
.meter .tick { position: absolute; top: -5px; left: -9999px; width: 2px; height: 17px; margin-left: -1px; border-radius: 1px; opacity: 0; transition: opacity .25s; }
.declared .tick { background: #FFFFFF; box-shadow: 0 0 8px rgba(255, 255, 255, .9); }
.realized .tick { background: var(--sonar); box-shadow: 0 0 8px var(--glow-sonar); }
.calib:hover .tick, .calib:focus-within .tick { opacity: 1; }
.calib-gap { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--sub); transition: color .25s; }
.calib:hover .calib-gap, .calib:focus-within .calib-gap { color: var(--ink); }

/* The counters answer the pointer and light their echoes on the scope. */
.stat[data-kind] { margin: -8px -10px; padding: 8px 10px; border-radius: 12px; cursor: default; outline: none;
                   transition: background-color .25s, box-shadow .25s; }
.stat[data-kind]:hover, .stat[data-kind]:focus-visible, .stat.is-focus { background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.stat.presa:hover, .stat.presa:focus-visible, .stat.presa.is-focus { box-shadow: inset 0 0 0 1px rgba(255, 208, 20, .4), 0 0 26px rgba(255, 208, 20, .12); }
.stat.non-presa:hover, .stat.non-presa:focus-visible, .stat.non-presa.is-focus { box-shadow: inset 0 0 0 1px rgba(255, 51, 71, .45), 0 0 26px rgba(255, 51, 71, .12); }
.stat[data-kind]:focus-visible { outline: 2px solid var(--sonar); outline-offset: 2px; }

/* «Il conto»: a lit edge. */
.summary { border: 1px solid transparent; box-shadow: 0 0 44px rgba(57, 242, 102, .05);
           background: linear-gradient(180deg, #141414, #0B0B0B) padding-box,
                       linear-gradient(135deg, rgba(57, 242, 102, .55), rgba(38, 38, 38, .95) 34%, rgba(38, 38, 38, .95) 66%, rgba(255, 208, 20, .38)) border-box; }

/* Outcome chips: neon pills, still symbol + word. */
.badge { padding: 5px 9px 5px 8px; border-radius: 999px; background: color-mix(in srgb, currentColor 11%, transparent);
         box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent), 0 0 14px color-mix(in srgb, currentColor 20%, transparent);
         text-shadow: 0 0 8px color-mix(in srgb, currentColor 55%, transparent); transition: box-shadow .25s, background-color .25s; }
.badge svg { filter: drop-shadow(0 0 3px currentColor); }
.call:hover .badge, .outcomes li:hover .badge, .outcomes li.is-focus .badge {
  background: color-mix(in srgb, currentColor 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 65%, transparent), 0 0 20px color-mix(in srgb, currentColor 35%, transparent); }

/* Cards: glass, an outcome-coloured edge, a glow under the pointer, and the exact probability. */
.call { background: linear-gradient(180deg, rgba(255, 255, 255, .035), rgba(255, 255, 255, 0) 42%), var(--surface); }
.call::before { content: ""; position: absolute; left: -1px; top: 16px; bottom: 16px; width: 2px; border-radius: 2px; background: transparent; transition: box-shadow .25s; }
.call:has(.badge.presa)::before { background: var(--presa); box-shadow: 0 0 10px var(--glow-presa); }
.call:has(.badge.non-presa)::before { background: var(--non-presa); box-shadow: 0 0 10px var(--glow-non-presa); }
.call:has(.badge.blue)::before { background: var(--blue); box-shadow: 0 0 10px var(--glow-blue); }
.call:has(.badge.open)::before { background: var(--sonar); box-shadow: 0 0 10px var(--glow-sonar); }
.call:hover::before, .call.linked::before { box-shadow: 0 0 16px 1px currentColor; }
.call.has-detail:hover { border-color: rgba(57, 242, 102, .28); box-shadow: 0 12px 34px rgba(0, 0, 0, .5), 0 0 28px rgba(57, 242, 102, .07); }
.call.linked { border-color: rgba(57, 242, 102, .6); box-shadow: 0 0 0 1px rgba(57, 242, 102, .3), 0 0 26px rgba(57, 242, 102, .14); }
.exact { margin-left: auto; font: 700 12px/1 var(--num); color: var(--sub); letter-spacing: .02em; opacity: 0; transform: translateX(4px); transition: opacity .2s, transform .2s; }
.call:hover .exact, .call:focus-within .exact, .call.linked .exact { opacity: 1; transform: none; }

/* The scope: orbs instead of flat dots; the legend is a set of switches; a counter or a key isolates its echoes. */
.radar .blip .core.presa { fill: url(#core-presa); }
.radar .blip .core.live { fill: url(#core-live); }
.radar .pct-tip { color: var(--sonar); text-shadow: 0 0 10px var(--glow-sonar); }
.legend-item { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid transparent; border-radius: 999px;
               background: none; color: var(--sub); font: 12px/1.2 var(--text); cursor: pointer; transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s; }
.legend-item svg { width: 10px; height: 10px; flex: none; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .35)); }
.legend-item:hover, .legend-item.is-focus { color: var(--ink); background: rgba(255, 255, 255, .045); border-color: var(--line-2); }
.legend-item[aria-pressed="true"] { color: var(--ink); border-color: rgba(57, 242, 102, .55); box-shadow: 0 0 16px rgba(57, 242, 102, .18); }
.legend-item:focus-visible { outline: 2px solid var(--sonar); outline-offset: 2px; }
.radar[data-focus="presa"] .blip:not(.presa), .radar[data-focus="non-presa"] .blip:not(.non-presa),
.radar[data-focus="blue"] .blip:not(.blue), .radar[data-focus="live"] .blip:not(.live) { opacity: .07 !important; }
.radar[data-focus="presa"] .blip.presa, .radar[data-focus="non-presa"] .blip.non-presa,
.radar[data-focus="blue"] .blip.blue, .radar[data-focus="live"] .blip.live { opacity: 1 !important; }
.radar[data-focus="presa"] .blip.presa .halo, .radar[data-focus="non-presa"] .blip.non-presa .halo,
.radar[data-focus="blue"] .blip.blue .halo, .radar[data-focus="live"] .blip.live .halo,
.radar[data-focus="tutte"] .blip .halo { opacity: .95 !important; }

/* How it reads, and the inner pages: the same answer to the pointer. */
.steps li { transition: border-color .25s, box-shadow .25s; }
.steps li:hover { border-color: rgba(57, 242, 102, .38); box-shadow: 0 0 26px rgba(57, 242, 102, .08); }
.steps li:hover .k { color: var(--sonar); text-shadow: 0 0 10px var(--glow-sonar); }
.steps li:hover::after { transform: scaleX(1); opacity: 1; animation: none; box-shadow: 0 0 10px var(--glow-sonar); }
.outcomes li { transition: border-color .2s, background-color .2s; cursor: default; }
.outcomes li:hover, .outcomes li.is-focus { border-color: var(--line-2); background: #101010; }
.prose tbody tr td { transition: background-color .2s; }
.prose tbody tr:hover td { background: rgba(255, 255, 255, .03); }
.box { transition: border-color .25s, box-shadow .25s; }
.box:hover { border-color: var(--line-2); }
.box.sonar:hover { border-color: rgba(57, 242, 102, .6); box-shadow: 0 0 30px rgba(57, 242, 102, .09); }
.faq details:hover { border-color: var(--line-2); }
.toc li:hover::before { color: var(--sonar); text-shadow: 0 0 8px var(--glow-sonar); }
.button.primary { transition: box-shadow .25s, background-color .2s; }
.button.primary:hover { box-shadow: 0 0 26px rgba(57, 242, 102, .5); }
.foot-col a:hover { text-shadow: 0 0 10px rgba(57, 242, 102, .5); }
.pill.live::before { background: radial-gradient(circle, #D6FFE0 0%, #39F266 62%); }
.age { transition: box-shadow .25s; }
.foot-rg:hover .age { box-shadow: 0 0 16px rgba(255, 255, 255, .25); }

@media (forced-colors: active) {
  h1 .accent, .stat .n, .calib .n, .pct { background: none; color: CanvasText; filter: none; }
}
@media print {
  .call.pending { opacity: 1 !important; transform: none !important; }
}

/* ==== the sign-in page (Mario, 29/09: «anche grafica inserimento password adattala alla grafica del sito»). The
   site's own page instead of the browser's dialog: the logo that pings, the sonar turning behind, a lit card. */
.gate-page { justify-content: center; overflow-x: hidden; }
.gate-scope { position: fixed; inset: 0; z-index: 0; display: grid; place-items: center; pointer-events: none; opacity: .5; }
.gate-scope .radar { width: min(125vmin, 920px); }
.gate { position: relative; z-index: 1; width: 100%; max-width: 440px; margin: 0 auto; padding: 48px 16px 36px; text-align: center; }
.gate-brand .logo { width: min(280px, 72vw); height: auto; margin: 0 auto 26px; }
.gate h1 { font-size: clamp(28px, 7vw, 38px); }
.gate .lead { margin-left: auto; margin-right: auto; font-size: 16px; }
.gate-card { margin: 28px 0 0; padding: 22px 20px 20px; text-align: left; border: 1px solid transparent; border-radius: 18px;
             background: linear-gradient(180deg, rgba(20, 20, 20, .94), rgba(11, 11, 11, .94)) padding-box,
                         linear-gradient(135deg, rgba(57, 242, 102, .6), rgba(38, 38, 38, .95) 38%, rgba(38, 38, 38, .95) 68%, rgba(57, 242, 102, .3)) border-box;
             box-shadow: 0 0 60px rgba(57, 242, 102, .07), 0 18px 50px rgba(0, 0, 0, .6);
             -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.field { display: grid; gap: 8px; margin: 0 0 16px; }
.field label { font: 700 11.5px/1.2 var(--num); letter-spacing: .2em; text-transform: uppercase; color: var(--sub); }
.field input { width: 100%; min-width: 0; padding: 13px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: #080808;
               color: var(--ink); font: 16px/1.3 var(--text); transition: border-color .2s, box-shadow .2s; }
.field input:hover { border-color: #4A4A4A; }
.field input:focus { outline: none; border-color: var(--sonar); box-shadow: 0 0 0 3px rgba(57, 242, 102, .18), 0 0 24px rgba(57, 242, 102, .16); }
.field input[aria-invalid="true"] { border-color: rgba(255, 51, 71, .7); }
.field-row { position: relative; display: flex; }
.field-row input { padding-right: 92px; }
.reveal-pw { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 7px 11px; border: 1px solid var(--line-2); border-radius: 999px;
             background: var(--surface-2); color: var(--sub); font: 12.5px/1 var(--text); cursor: pointer; transition: color .2s, border-color .2s; }
.reveal-pw:hover, .reveal-pw[aria-pressed="true"] { color: var(--ink); border-color: var(--sonar); }
.reveal-pw:focus-visible { outline: 2px solid var(--sonar); outline-offset: 2px; }
.gate-submit { width: 100%; justify-content: center; margin-top: 6px; padding: 14px 18px; border: 0; font: 700 15px/1 var(--text); letter-spacing: .02em; cursor: pointer; }
.gate-submit:disabled { cursor: progress; opacity: .85; }
.gate-error { margin: 0 0 16px; padding: 11px 13px; border: 1px solid rgba(255, 51, 71, .5); border-radius: 12px; background: rgba(255, 51, 71, .08);
              color: #FFC2C9; font-size: 13.5px; box-shadow: 0 0 22px rgba(255, 51, 71, .12); }
.gate-note { margin: 18px auto 0; max-width: 36ch; font-size: 12.5px; line-height: 1.5; color: var(--dim); }
.gate-note + .gate-note { margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .gate-scope .radar .sweep { opacity: 1; animation: sweep-turn 7s linear infinite; }
  .gate-card { animation: gate-in .8s var(--ease) both .15s; }
  @keyframes gate-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .gate-submit:disabled { animation: live-dot 1.6s ease-out infinite; }
}