/* Seyeung — foglio di stile unico
   Prefisso classi: ab-  ·  stati e varianti in data-attributes */

:root {
  color-scheme: dark;
  --bg: #0B131C;
  --alt: #111B26;
  --srf: #16222F;
  --tx: #E9EEF3;
  --mu: #9AA8B7;
  --bd: #223142;
  --ac: #E4572E;
  --ac-tx: #E4572E;
  --b2: #8FB8DE;
  --sh: #050A10;
  --p1: #2E5077;
  --p2: #24405F;
  --p3: #1A3049;
  --p4: #10202F;
  --snow: #E9EEF3;
  --glow1: rgba(46, 80, 119, .34);
  --glow2: rgba(228, 87, 46, .10);
  --ff-h: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --ff-s: "Archivo", "Arial", system-ui, sans-serif;
  --ff-b: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --w: 1200px;
  --gut: clamp(18px, 4vw, 40px);
  --hd: 68px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #F6F8FA; --alt: #E7ECF1; --srf: #FFFFFF; --tx: #0F1A24; --mu: #4D5B6A; --bd: #D6DFE8;
    --ac-tx: #B83D1A; --b2: #2E5077; --sh: #CBD6E1;
    --p1: #8FB8DE; --p2: #5E87B3; --p3: #2E5077; --p4: #1B3352; --snow: #FFFFFF;
    --glow1: rgba(143, 184, 222, .45); --glow2: rgba(228, 87, 46, .08);
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F6F8FA; --alt: #E7ECF1; --srf: #FFFFFF; --tx: #0F1A24; --mu: #4D5B6A; --bd: #D6DFE8;
  --ac-tx: #B83D1A; --b2: #2E5077; --sh: #CBD6E1;
  --p1: #8FB8DE; --p2: #5E87B3; --p3: #2E5077; --p4: #1B3352; --snow: #FFFFFF;
  --glow1: rgba(143, 184, 222, .45); --glow2: rgba(228, 87, 46, .08);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--hd) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 70% 50% at 85% -10%, var(--glow1), transparent 70%),
    radial-gradient(ellipse 50% 40% at 0% 30%, var(--glow2), transparent 70%);
  background-repeat: no-repeat;
  color: var(--tx);
  font: 400 1.0625rem/1.7 var(--ff-b);
  overflow-x: hidden;
}
body[data-menu] { overflow: hidden; }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--ac-tx); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { font-family: var(--ff-h); font-weight: 400; line-height: 1.12; margin: 0 0 .6em; text-wrap: balance; letter-spacing: -.01em; }
h2 { font-size: clamp(1.6rem, 3.3vw, 2.5rem); }
h3, h4 { font-family: var(--ff-s); font-size: clamp(1.15rem, 1.9vw, 1.4rem); font-weight: 700; letter-spacing: 0; }
p, li, dd, td { text-wrap: pretty; }
p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.25em; margin: 0 0 1.2em; }
li { margin-bottom: .4em; }
strong { font-weight: 600; }
.ab-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ab-skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ac); color: #0B131C; padding: 10px 16px; font-weight: 600; text-decoration: none; }
.ab-skip:focus { top: 12px; }
.ab-wrap { width: min(100% - 2 * var(--gut), var(--w)); margin-inline: auto; }
.ab-narrow { max-width: 70ch; }

/* ---------- header ---------- */
.ab-hd { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: var(--hd); transition: border-color .3s; border-bottom: 1px solid transparent; }
.ab-hd::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s;
  background: rgba(11, 19, 28, .86); background: color-mix(in srgb, var(--bg) 84%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.ab-hd[data-scrolled], html:not(.js) .ab-hd { border-bottom-color: var(--bd); }
.ab-hd[data-scrolled]::before, html:not(.js) .ab-hd::before { opacity: 1; }
.ab-hd .ab-wrap { height: 100%; display: flex; align-items: center; gap: 16px; }
.ab-logo { display: flex; align-items: center; gap: 10px; color: var(--tx); text-decoration: none; font: 400 .95rem/1.1 var(--ff-h); letter-spacing: 0; margin-right: auto; min-height: 44px; }
.ab-logo svg { width: 38px; height: 38px; flex: none; }
.ab-logo small { display: block; font: 600 .66rem/1.2 var(--ff-b); letter-spacing: .14em; text-transform: uppercase; color: var(--mu); }
.ab-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.ab-nav li { margin: 0; }
.ab-nav a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--tx); text-decoration: none; font-size: .9rem; position: relative; }
.ab-nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 9px; height: 1px; background: var(--ac); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.ab-nav a:hover::after, .ab-nav a[aria-current="page"]::after { transform: scaleX(1); }
.ab-nav a[aria-current="page"] { color: var(--ac-tx); }
.ab-tgl, .ab-burger, .ab-nav-x { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 14px;
  border: 1px solid var(--bd); border-radius: 999px; background: transparent; color: var(--tx); font: 600 .82rem var(--ff-b); cursor: pointer; }
.ab-tgl:hover, .ab-burger:hover, .ab-nav-x:hover { border-color: var(--ac); }
.ab-tgl svg { width: 18px; height: 18px; }
.ab-tgl [data-i="sun"] { display: none; }
:root[data-theme="light"] .ab-tgl [data-i="sun"] { display: block; }
:root[data-theme="light"] .ab-tgl [data-i="moon"] { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .ab-tgl [data-i="sun"] { display: block; } :root:not([data-theme]) .ab-tgl [data-i="moon"] { display: none; } }
html:not(.js) .ab-tgl, html:not(.js) .ab-burger { display: none; }
.ab-burger { display: none; }
.ab-scrim { position: fixed; inset: 0; z-index: 48; background: rgba(5, 10, 16, .55); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.ab-scrim[data-open] { opacity: 1; visibility: visible; }
.ab-nav-x { display: none; }

@media (max-width: 1023.98px) {
  .ab-burger { display: inline-flex; }
  .ab-tgl span { display: none; }
  .ab-tgl { padding: 0; }
  .js .ab-nav { position: fixed; z-index: 60; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); padding: 76px 24px 32px;
    background: var(--alt); border-left: 1px solid var(--bd); transform: translateX(100%); visibility: hidden;
    transition: transform .35s var(--ease), visibility .35s; overflow-y: auto; }
  .js .ab-nav[data-open] { transform: none; visibility: visible; }
  .js .ab-nav ul { flex-direction: column; gap: 0; }
  .js .ab-nav a { font-size: 1.1rem; border-bottom: 1px solid var(--bd); padding: 6px 4px; min-height: 52px; }
  .js .ab-nav a::after { display: none; }
  .js .ab-nav-x { display: inline-flex; position: absolute; top: 14px; right: 18px; }
  html:not(.js) .ab-hd { position: static; height: auto; }
  html:not(.js) .ab-hd .ab-wrap { flex-wrap: wrap; padding-block: 10px; }
  html:not(.js) .ab-nav ul { flex-wrap: wrap; }
  html:not(.js) main { padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .ab-nav, .ab-scrim, .ab-hd::before { transition: none !important; } }

main { padding-top: var(--hd); display: block; }

/* ---------- hero (tipografico gigante) ---------- */
.ab-hero { padding: clamp(56px, 10vw, 128px) 0 clamp(40px, 7vw, 88px); position: relative; }
.ab-hero .ab-wrap { display: grid; gap: 32px; }
.ab-kick { display: flex; align-items: center; gap: 12px; font: 600 .75rem/1.4 var(--ff-b); letter-spacing: .16em; text-transform: uppercase; color: var(--mu); margin: 0 0 22px; }
.ab-kick::before { content: ""; width: 28px; height: 1px; background: var(--ac); }
.ab-h1 { font: 400 clamp(2.3rem, 7vw, 6rem)/1 var(--ff-h); letter-spacing: -.02em; margin: 0; }
.ab-h1 span { display: block; }
.ab-h1 [data-c="ac"] { color: var(--ac); }
.ab-h1 [data-c="mu"] { color: var(--mu); font-family: var(--ff-s); font-weight: 700; font-size: .5em; letter-spacing: -.02em; line-height: 1.12; margin-top: .35em; }
.ab-hero-foot { display: grid; gap: 28px; align-items: end; border-top: 1px solid var(--bd); padding-top: 28px; }
.ab-lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--mu); max-width: 58ch; margin: 0; }
.ab-lead strong { color: var(--tx); }
.ab-emb { width: 150px; height: 150px; }
.ab-ctas { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 22px; }
@media (min-width: 768px) {
  .ab-hero-foot { grid-template-columns: 1fr auto; }
  .ab-emb { width: 190px; height: 190px; }
}

/* ---------- link / bottoni: testo + sottolineatura animata ---------- */
.ab-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--tx); font: 700 1rem var(--ff-s); text-decoration: none; position: relative; padding: 0 2px; background: none; border: 0; cursor: pointer; }
.ab-btn::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--ac); transform-origin: right; transition: transform .35s var(--ease); }
.ab-btn:hover::after, .ab-btn:focus-visible::after { transform: scaleX(.25); }
.ab-btn i { font-style: normal; color: var(--ac); transition: transform .3s var(--ease); }
.ab-btn:hover i { transform: translateX(4px); }
.ab-btn[data-v="pill"] { border: 1px solid var(--bd); border-radius: 999px; padding: 0 22px; }
.ab-btn[data-v="pill"]::after { left: 22px; right: 22px; bottom: 10px; height: 1px; }
.ab-btn[data-v="pill"]:hover { border-color: var(--ac); }
.ab-btn[data-v="mu"] { color: var(--mu); }
.ab-btn[data-v="mu"]::after { background: var(--mu); }

/* ---------- sezioni ---------- */
.ab-sec { padding: clamp(56px, 8vw, 104px) 0; position: relative; }
.ab-sec[data-tone="alt"] { background: var(--alt); }
.ab-lbl { display: flex; gap: 14px; align-items: baseline; font: 600 .74rem/1 var(--ff-b); letter-spacing: .16em; text-transform: uppercase; color: var(--mu); margin: 0 0 18px; }
.ab-lbl b { font: 400 .9rem/1 var(--ff-h); color: var(--ac); letter-spacing: 0; }
.ab-sec-hd { display: grid; gap: 8px 48px; margin-bottom: clamp(28px, 4vw, 48px); }
.ab-sec-hd p { color: var(--mu); max-width: 62ch; margin: 0; }
@media (min-width: 1024px) { .ab-sec-hd { grid-template-columns: 5fr 6fr; align-items: end; } .ab-sec-hd h2 { margin: 0; } }
.ab-two { display: grid; gap: 32px 56px; }
.ab-two > * { min-width: 0; }
.ab-two .ab-tbl table { min-width: 0; }
@media (min-width: 900px) { .ab-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .ab-two[data-r="wide"] { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.ab-note { border-left: 2px solid var(--ac); padding: 4px 0 4px 18px; color: var(--mu); font-size: .95rem; margin: 1.6em 0; }
.ab-note strong { color: var(--tx); }

/* ---------- divisore: linee di livello ---------- */
.ab-div { color: var(--bd); height: 56px; overflow: hidden; }
.ab-div svg { width: 100%; height: 56px; }
.ab-div path { fill: none; stroke: currentColor; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.ab-div path:nth-child(2) { stroke: var(--p1); }
.ab-div path:nth-child(3) { stroke: var(--ac); opacity: .55; }

/* ---------- disegno delle linee ---------- */
[data-draw] [pathLength] { stroke-dasharray: 600; }
.ab-div [pathLength] { stroke-dasharray: 3000; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-draw]:not([data-drawn]) [pathLength] { stroke-dashoffset: 600; }
  .js .ab-div[data-draw]:not([data-drawn]) [pathLength] { stroke-dashoffset: 3000; }
  .js [data-draw] [pathLength] { transition: stroke-dashoffset 1.6s var(--ease); }
  .js [data-draw] [pathLength]:nth-child(2) { transition-delay: .12s; }
  .js [data-draw] [pathLength]:nth-child(3) { transition-delay: .24s; }
  .js [data-draw] [pathLength]:nth-child(4) { transition-delay: .36s; }
  @supports (animation-timeline: view()) {
    .js .ab-div[data-draw] [pathLength] { animation: ab-draw linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; transition: none; }
  }
}
@keyframes ab-draw { from { stroke-dashoffset: 3000; } to { stroke-dashoffset: 0; } }

/* ---------- card con illustrazione in alto (container queries) ---------- */
.ab-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.ab-cq { container-type: inline-size; }
.ab-card { background: var(--srf); border: 1px solid var(--bd); display: flex; flex-direction: column; position: relative; text-decoration: none; color: inherit;
  box-shadow: 2px 2px 0 var(--sh), 4px 4px 0 var(--sh), 6px 6px 0 var(--sh), 8px 8px 0 var(--sh), 10px 10px 0 var(--sh), 12px 12px 0 var(--sh);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
a.ab-card:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--sh), 6px 6px 0 var(--sh), 9px 9px 0 var(--sh), 12px 12px 0 var(--sh), 15px 15px 0 var(--sh); }
.ab-card-art { background: var(--alt); border-bottom: 1px solid var(--bd); aspect-ratio: 16 / 9; overflow: hidden; }
.ab-card-art svg { width: 100%; height: 100%; }
.ab-card-bd { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ab-card-bd h3 { margin: 0; }
.ab-card-bd p { margin: 0; color: var(--mu); font-size: .97rem; }
.ab-card-bd .ab-meta { margin-top: auto; padding-top: 10px; font: 600 .74rem var(--ff-b); letter-spacing: .12em; text-transform: uppercase; color: var(--ac-tx); }
@container (min-width: 560px) {
  .ab-card[data-v="row"] { flex-direction: row; }
  .ab-card[data-v="row"] .ab-card-art { flex: 0 0 42%; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--bd); }
}
@container (min-width: 900px) { .ab-grid[data-n="3"] { grid-template-columns: repeat(3, 1fr); } }

/* ---------- clima: zone ---------- */
.ab-zones { display: grid; gap: 1px; background: var(--bd); border: 1px solid var(--bd); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.ab-zone { background: var(--bg); padding: 24px 22px; }
.ab-sec[data-tone="alt"] .ab-zone { background: var(--alt); }
.ab-zone h3 { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.ab-zone h3 small { font: 600 .72rem var(--ff-b); letter-spacing: .12em; color: var(--ac-tx); text-transform: uppercase; }
.ab-zone p { color: var(--mu); font-size: .96rem; margin: 0; }
.ab-zone svg { width: 44px; height: 44px; margin-bottom: 12px; }

/* ---------- liste con icone ---------- */
.ab-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid var(--bd); }
.ab-list li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--bd); margin: 0; }
.ab-list svg { width: 40px; height: 40px; }
.ab-list h3 { font-size: 1.08rem; margin: 0 0 4px; }
.ab-list p { margin: 0; color: var(--mu); font-size: .97rem; }
.ico { fill: none; stroke: var(--tx); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico .a { stroke: var(--ac); }
.ico .f { fill: var(--ac); stroke: none; opacity: .9; }

/* ---------- numeri grandi ---------- */
.ab-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); border-top: 1px solid var(--bd); }
.ab-num { padding: 22px 20px 22px 0; border-bottom: 1px solid var(--bd); }
.ab-num b { display: block; font: 400 clamp(2rem, 4vw, 3rem)/1 var(--ff-h); letter-spacing: -.02em; color: var(--tx); }
.ab-num b em { font-style: normal; color: var(--ac); }
.ab-num span { display: block; color: var(--mu); font-size: .92rem; margin-top: 8px; }

/* ---------- tabelle ---------- */
.ab-tbl { overflow-x: auto; margin: 0 0 1.6em; border: 1px solid var(--bd); background: var(--srf); -webkit-overflow-scrolling: touch; }
.ab-tbl table { width: 100%; border-collapse: collapse; font-size: .94rem; font-variant-numeric: tabular-nums; min-width: 520px; }
.ab-tbl caption { text-align: left; padding: 14px 16px; font: 700 .95rem var(--ff-s); border-bottom: 1px solid var(--bd); caption-side: top; }
.ab-tbl th, .ab-tbl td { padding: 11px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bd); }
.ab-tbl thead th { font: 600 .72rem/1.3 var(--ff-b); letter-spacing: .1em; text-transform: uppercase; color: var(--mu); background: var(--alt); }
.ab-tbl tbody th { font-weight: 600; }
.ab-tbl tr:last-child > * { border-bottom: 0; }
.ab-tbl tfoot td, .ab-tbl tfoot th { font-weight: 700; background: var(--alt); border-top: 1px solid var(--bd); }
.ab-tbl [data-ok="si"] { color: var(--ac-tx); font-weight: 600; }
.ab-tbl td.n, .ab-tbl th.n { text-align: right; white-space: nowrap; }

/* ---------- glossario ---------- */
.ab-gls { display: grid; gap: 0 48px; margin: 0; }
@media (min-width: 768px) { .ab-gls { grid-template-columns: 1fr 1fr; } }
.ab-gls div { border-top: 1px solid var(--bd); padding: 16px 0; }
.ab-gls dt { font: 700 1.02rem var(--ff-s); margin-bottom: 4px; }
.ab-gls dd { margin: 0; color: var(--mu); font-size: .95rem; }

/* ---------- articolo ---------- */
.ab-phead { padding: clamp(48px, 8vw, 96px) 0 clamp(32px, 5vw, 56px); border-bottom: 1px solid var(--bd); }
.ab-phead .ab-wrap { display: grid; gap: 32px; align-items: end; }
@media (min-width: 900px) { .ab-phead .ab-wrap { grid-template-columns: 1.4fr 1fr; } }
.ab-phead h1 { font: 400 clamp(2rem, 4.8vw, 3.8rem)/1.04 var(--ff-h); letter-spacing: -.02em; margin: 0 0 20px; }
.ab-phead .ab-lead { margin-bottom: 22px; }
.ab-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 22px; font-size: .84rem; color: var(--mu); }
.ab-crumbs li { margin: 0; }
.ab-crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--bd); }
.ab-crumbs a { color: var(--mu); }
.ab-by { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .86rem; color: var(--mu); margin: 0; padding: 0; list-style: none; }
.ab-by li { margin: 0; }
.ab-by li::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--ac); margin-right: 8px; vertical-align: middle; }
.ab-phead-art { border: 1px solid var(--bd); background: var(--alt); }
.ab-art { padding: clamp(40px, 6vw, 72px) 0; }
.ab-art .ab-wrap { display: grid; gap: 40px; }
@media (min-width: 1100px) { .ab-art .ab-wrap { grid-template-columns: 220px minmax(0, 1fr); gap: 64px; } }
.ab-toc { font-size: .88rem; }
@media (min-width: 1100px) { .ab-toc nav { position: sticky; top: calc(var(--hd) + 24px); } }
.ab-toc p { font: 600 .72rem var(--ff-b); letter-spacing: .14em; text-transform: uppercase; color: var(--mu); margin-bottom: 10px; }
.ab-toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--bd); }
.ab-toc li { margin: 0; }
.ab-toc a { display: block; padding: 6px 0 6px 14px; color: var(--mu); text-decoration: none; min-height: 32px; }
.ab-toc a:hover { color: var(--tx); }
.ab-body { max-width: 72ch; min-width: 0; }
.ab-body h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); margin-top: 1.8em; padding-top: 1.2em; border-top: 1px solid var(--bd); }
.ab-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ab-body h3 { margin-top: 1.6em; }
.ab-body ol > li::marker { color: var(--ac); font-weight: 700; font-family: var(--ff-s); }
.ab-body ul > li::marker { color: var(--ac); }
.ab-fig { margin: 2em 0; border: 1px solid var(--bd); background: var(--alt); }
.ab-fig figcaption { padding: 12px 16px; font-size: .86rem; color: var(--mu); border-top: 1px solid var(--bd); }

/* ---------- checklist (feature 4) ---------- */
.ab-chk { border: 1px solid var(--bd); background: var(--srf); padding: 22px; margin: 2em 0; }
.ab-chk fieldset { border: 0; padding: 0; margin: 0; }
.ab-chk legend { font: 700 1.15rem var(--ff-s); margin-bottom: 6px; padding: 0; }
.ab-chk-bar { display: flex; align-items: center; gap: 14px; margin: 12px 0 16px; }
.ab-chk-track { flex: 1; height: 6px; background: var(--alt); border-radius: 999px; overflow: hidden; }
.ab-chk-fill { height: 100%; width: 0; background: var(--ac); border-radius: 999px; transition: width .4s var(--ease); }
.ab-chk-out { font: 700 .9rem var(--ff-s); min-width: 9ch; text-align: right; }
html:not(.js) .ab-chk-bar, html:not(.js) .ab-chk-reset { display: none; }
.ab-chk ul { list-style: none; padding: 0; margin: 0; }
.ab-chk li { margin: 0; border-top: 1px solid var(--bd); }
.ab-chk label { display: grid; grid-template-columns: 22px 1fr; gap: 14px; padding: 12px 0; cursor: pointer; min-height: 44px; align-items: start; }
.ab-chk input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--ac); }
.ab-chk label:has(input:checked) span { color: var(--mu); text-decoration: line-through; text-decoration-color: var(--ac); }
.ab-chk small { display: block; color: var(--mu); font-size: .85rem; }
.ab-chk-reset { margin-top: 10px; }

/* ---------- quiz (feature 3) ---------- */
.ab-quiz { border: 1px solid var(--bd); background: var(--srf); padding: 22px; margin: 2em 0; }
.ab-quiz fieldset { border: 0; border-top: 1px solid var(--bd); padding: 16px 0 6px; margin: 0; }
.ab-quiz legend { font: 700 1.02rem var(--ff-s); padding: 0; float: left; width: 100%; margin-bottom: 10px; }
.ab-quiz legend + * { clear: both; }
.ab-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-opt { position: relative; }
.ab-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ab-opt span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--bd); border-radius: 999px; cursor: pointer; font-size: .93rem; transition: border-color .2s, background .2s; }
.ab-opt input:checked + span { border-color: var(--ac); background: rgba(228, 87, 46, .14); color: var(--tx); }
.ab-opt input:focus-visible + span { outline: 2px solid var(--ac); outline-offset: 2px; }
.ab-quiz-res { margin-top: 18px; border-top: 1px solid var(--bd); padding-top: 18px; }
.ab-quiz-res:empty { display: none; }
.ab-quiz-res h3 { margin-bottom: .4em; }
.ab-quiz-res ol { margin: 0; }
.ab-quiz-nojs { color: var(--mu); font-size: .9rem; }
.js .ab-quiz-nojs { display: none; }

/* ---------- modulo ---------- */
.ab-form { display: grid; gap: 18px; border: 1px solid var(--bd); background: var(--srf); padding: clamp(20px, 3vw, 32px); }
@media (min-width: 768px) { .ab-form { grid-template-columns: 1fr 1fr; } .ab-form [data-span] { grid-column: 1 / -1; } }
.ab-fld label { display: block; font: 600 .88rem var(--ff-b); margin-bottom: 6px; }
.ab-fld label small { font-weight: 400; color: var(--mu); }
.ab-fld input, .ab-fld select, .ab-fld textarea { width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 1rem; color: var(--tx); background: var(--bg); border: 1px solid var(--bd); border-radius: 0; }
.ab-fld textarea { min-height: 150px; resize: vertical; }
.ab-fld input:focus, .ab-fld select:focus, .ab-fld textarea:focus { border-color: var(--ac); outline: none; box-shadow: 0 0 0 3px rgba(228, 87, 46, .25); }
.ab-fld[data-err] input, .ab-fld[data-err] textarea, .ab-fld[data-err] select { border-color: var(--ac); }
.ab-err { display: block; color: var(--ac-tx); font-size: .85rem; margin-top: 6px; min-height: 1em; }
.ab-form-ft { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.ab-form-ft p { margin: 0; font-size: .86rem; color: var(--mu); flex: 1 1 260px; }
.ab-status { font-size: .95rem; }
.ab-status:empty { display: none; }

/* ---------- FAQ ---------- */
.ab-faq { border-top: 1px solid var(--bd); }
.ab-faq details { border-bottom: 1px solid var(--bd); }
.ab-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 18px; padding: 18px 0; font: 700 1.08rem/1.35 var(--ff-s); min-height: 44px; }
.ab-faq summary::-webkit-details-marker { display: none; }
.ab-faq summary::after { content: "+"; color: var(--ac); font-size: 1.4rem; line-height: 1; transition: transform .3s; }
.ab-faq details[open] summary::after { transform: rotate(45deg); }
.ab-faq details > div { padding: 0 0 18px; color: var(--mu); max-width: 70ch; }
.ab-faq details > div p:last-child { margin: 0; }

/* ---------- banda CTA ---------- */
.ab-cta { padding: clamp(56px, 8vw, 96px) 0; border-top: 1px solid var(--bd); background: linear-gradient(180deg, var(--alt), var(--bg)); }
.ab-cta .ab-wrap { display: grid; gap: 28px; }
@media (min-width: 900px) { .ab-cta .ab-wrap { grid-template-columns: 1.3fr 1fr; align-items: end; } }
.ab-cta h2 { font-size: clamp(1.8rem, 4.2vw, 3rem); margin: 0 0 12px; }
.ab-cta p { color: var(--mu); margin: 0; }
.ab-cta-links { display: grid; gap: 4px; }
.ab-cta-links a { font: 700 1.05rem var(--ff-s); }

/* ---------- footer: mappa + contatti ---------- */
.ab-ft { border-top: 1px solid var(--bd); padding: 56px 0 28px; font-size: .92rem; color: var(--mu); }
.ab-ft-grid { display: grid; gap: 36px; }
@media (min-width: 768px) { .ab-ft-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .ab-ft-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.ab-ft h2 { font: 700 .78rem var(--ff-b); letter-spacing: .14em; text-transform: uppercase; color: var(--tx); margin: 0 0 14px; }
.ab-ft a { color: var(--tx); }
.ab-ft ul { list-style: none; padding: 0; margin: 0; }
.ab-ft li { margin: 0; }
.ab-ft li a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; }
.ab-ft li a:hover { text-decoration: underline; }
.ab-ft address { font-style: normal; line-height: 1.8; }
.ab-map { border: 1px solid var(--bd); background: var(--alt); }
.ab-map svg { width: 100%; height: auto; }
.ab-map p { margin: 0; padding: 10px 14px; border-top: 1px solid var(--bd); font-size: .82rem; }
.ab-legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--bd); display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: .82rem; }
.ab-legal p { margin: 0; }

/* ---------- SVG: carta ritagliata ---------- */
.pc1 { fill: var(--p1); } .pc2 { fill: var(--p2); } .pc3 { fill: var(--p3); } .pc4 { fill: var(--p4); }
.pcs { fill: var(--snow); } .pcg { fill: var(--b2); } .pca { fill: var(--ac); } .pcb { fill: var(--bg); } .pcl { fill: var(--alt); } .pct { fill: var(--tx); }
.pcm { fill: var(--mu); } .pcbd { fill: var(--bd); }
.pln { fill: none; stroke: var(--tx); stroke-width: 1.5; }
.plm { fill: none; stroke: var(--mu); stroke-width: 1.2; stroke-dasharray: 4 4; }
.plq { fill: none; stroke: var(--ac); stroke-width: 1.5; }
.ptx { fill: var(--tx); font: 600 13px var(--ff-b); }
.ptm { fill: var(--mu); font: 600 11px var(--ff-b); letter-spacing: .06em; }
.ptd { fill: #1B3352; font: 600 13px var(--ff-b); }
.pta { fill: var(--ac-tx); font: 700 13px var(--ff-s); }

/* ---------- utilità ---------- */
.ab-mt0 { margin-top: 0; }
.ab-mu { color: var(--mu); }
.ab-center { text-align: center; }

@media print {
  .ab-hd, .ab-ft, .ab-cta, .ab-toc, .ab-div { display: none; }
  body { background: #fff; color: #000; }
  main { padding: 0; }
}
@media (max-width: 399.98px) { .ab-logo small { display: none; } .ab-logo { font-size: .95rem; } }