/* ParkAbility — mondo "contrassegno": blu del permesso, arancio del logo, carta bianca, campi etichetta/valore. */
@font-face{font-family:"Atkinson";src:url(/fonts/atkinson-next-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/fonts/atkinson-next-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Atkinson";src:url(/fonts/atkinson-next-800.woff2) format("woff2");font-weight:800;font-display:swap}

:root{
  --navy:#00487b;        /* inchiostro del logo */
  --permit:#1553a3;      /* campo del contrassegno */
  --permit-deep:#0d3f82;
  --ink:#0b1b33;
  --ink-2:#34445c;       /* testo secondario su carta, 9:1 */
  --on-blue-2:#d6e4f7;   /* testo secondario su blu, 7:1 */
  --orange:#f39a1e;      /* spunta del logo: solo segni grandi e superfici */
  --paper:#ffffff;
  --paper-2:#f2f5f9;
  --rule:#cfd9e6;
  --radius:14px;
  --gutter:clamp(1rem,4vw,2.5rem);
  --max:72rem;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:1rem}
body{margin:0;font-family:"Atkinson",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:1.125rem;line-height:1.6;color:var(--ink);background:var(--paper);font-variant-numeric:tabular-nums}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{line-height:1.12;letter-spacing:-.02em;text-wrap:balance;margin:0}
p{margin:0 0 1em}
a{color:var(--permit);text-decoration-thickness:.08em;text-underline-offset:.2em}
a:hover{color:var(--navy);text-decoration-thickness:.14em}
::selection{background:var(--orange);color:var(--ink)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
.on-blue :focus-visible{outline-color:#fff}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
.skip{position:absolute;left:-999px;top:.5rem;background:var(--ink);color:#fff;padding:.6rem 1rem;border-radius:8px;z-index:10}
.skip:focus{left:.5rem}

/* Testata */
.top{background:var(--paper);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.5rem;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--navy);text-decoration:none;font-weight:800;font-size:1.3rem;letter-spacing:-.01em;min-height:44px}
.brand img{width:44px;height:44px}
.nav{display:flex;gap:.25rem 1.25rem;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.nav a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);font-weight:700;text-decoration:none}
.nav a:hover,.nav a[aria-current]{color:var(--permit);text-decoration:underline}

/* Campi del documento */
.fields{display:grid;margin:0}
.field{padding:.7rem 0;border-top:1px solid var(--rule)}
.field:first-child{border-top:0}
.field dt{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.field dd{margin:.1rem 0 0;font-weight:700;font-size:1.1rem}

/* Hero */
.hero{background:var(--permit);color:#fff;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem);align-items:center;padding-block:clamp(2.5rem,7vw,5.5rem)}
.hero h1{font-size:clamp(2.3rem,5.2vw,4.2rem);font-weight:800;letter-spacing:-.03em}
.hero h1 span{display:block;color:var(--orange)}
.hero .lead{font-size:clamp(1.15rem,1.8vw,1.35rem);color:var(--on-blue-2);max-width:34rem;margin:1.4rem 0 2rem}
.stores{display:flex;flex-wrap:wrap;gap:.75rem;margin:0;padding:0;list-style:none}
.store{display:flex;align-items:center;gap:.7rem;min-height:3.5rem;padding:.55rem 1.1rem .55rem .9rem;border:2px solid rgba(255,255,255,.55);border-radius:12px;color:#fff}
.store svg{width:26px;height:26px;flex:none}
a.store{text-decoration:none}
a.store:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.closing a.store:hover{background:rgba(255,255,255,.14)}
.store b{display:block;font-size:1.05rem;line-height:1.2}
.store small{display:block;font-size:.85rem;color:var(--on-blue-2)}
.hero .note{margin-top:1.1rem;font-size:.95rem;color:var(--on-blue-2)}

/* Il permesso compilato */
.permit{position:relative;justify-self:center;width:min(100%,26rem)}
.permit .phone{width:62%;margin-left:auto;border-radius:22px;box-shadow:0 30px 60px -20px rgba(3,20,48,.6);border:6px solid #0a2a55}
.card{position:absolute;left:0;bottom:2.2rem;width:78%;background:var(--paper);color:var(--ink);border-radius:var(--radius);box-shadow:0 18px 40px -12px rgba(3,20,48,.55);overflow:hidden}
.card-head{display:flex;align-items:center;gap:.75rem;background:var(--navy);color:#fff;padding:.7rem 1rem}
.card-head img{width:40px;height:40px;background:#fff;border-radius:50%}
.card-head b{font-size:1rem;letter-spacing:.02em}
.card .fields{padding:.3rem 1rem .6rem}
.card .field{padding:.45rem 0}
.card .field dd{font-size:1rem}
.stamp{margin-left:auto;width:40px;height:40px;border-radius:50%;background:var(--orange);display:grid;place-items:center}
.stamp svg{width:24px;height:24px}
.stamp path{stroke-dasharray:40;stroke-dashoffset:0;animation:draw .9s cubic-bezier(.16,1,.3,1) .3s backwards}
@keyframes draw{from{stroke-dashoffset:40}to{stroke-dashoffset:0}}
.caption{font-size:.9rem;color:var(--on-blue-2);margin:2.2rem 0 0;text-align:right}

/* Sezioni */
section{padding-block:clamp(3.5rem,8vw,6rem)}
.sec-title{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:800;max-width:24ch}
.sec-lead{font-size:1.2rem;color:var(--ink-2);max-width:40rem;margin:1rem 0 0}

/* Come funziona: fasi */
.how{display:grid;grid-template-columns:1fr auto;gap:clamp(2rem,6vw,5rem);align-items:center;margin-top:3rem}
.phases{margin:0;padding:0;list-style:none;display:grid}
.phase{position:relative;padding:0 0 2.2rem 3.4rem}
.phase::before{content:"";position:absolute;left:1.05rem;top:2.4rem;bottom:.2rem;width:2px;background:var(--rule)}
.phase:last-child{padding-bottom:0}
.phase:last-child::before{display:none}
.phase-tag{font-weight:800;font-size:1.5rem;color:var(--navy);margin-bottom:.4rem}
.phase-tag i{position:absolute;left:0;top:-.1rem;font-style:normal;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--navy);color:#fff;font-size:1rem}
.phase p{color:var(--ink-2);margin:0;max-width:34rem}
.how-shot{width:17rem;border-radius:22px;border:6px solid #0a2a55;box-shadow:0 30px 60px -28px rgba(3,20,48,.55)}
.ios-extra{margin-top:3rem;padding:1.1rem 1.3rem;background:var(--paper-2);border-radius:var(--radius);max-width:46rem;color:var(--ink-2)}
.ios-extra strong{color:var(--ink)}

/* Copertura */
.coverage{background:var(--paper-2)}
.coverage .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.cities{width:100%;border-collapse:collapse;margin-top:.5rem}
.cities caption{text-align:left;font-size:.95rem;color:var(--ink-2);padding-bottom:.8rem}
.cities th,.cities td{padding:.75rem 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:middle}
.cities thead th{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);padding-top:0}
.cities td.n{text-align:right;font-weight:800;width:4.5rem;font-size:1.15rem}
.cities th[scope=row]{font-weight:700;width:11rem}
.bar{height:.7rem;border-radius:0 4px 4px 0;background:var(--permit);min-width:3px}
.cities td.b{padding-inline:1rem}
.elsewhere{margin-top:1.5rem;color:var(--ink-2)}

/* Gratis */
.free .wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.free .fields{grid-template-columns:1fr 1fr;column-gap:2rem}
.free .field:nth-child(2){border-top:0}
.free .field dd{font-size:1.2rem}
.free .field dd span{display:block;font-weight:400;font-size:1rem;color:var(--ink-2)}

/* Chiusura */
.closing{background:var(--navy);color:#fff}
.closing .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.closing h2{font-size:clamp(1.8rem,3.4vw,2.6rem);font-weight:800;max-width:20ch}
.closing .store{border-color:rgba(255,255,255,.5)}
.closing .stores{justify-content:flex-start}

/* Piede */
.foot{background:var(--ink);color:#c9d4e3;font-size:1rem;padding-block:2.5rem}
.foot .wrap{display:flex;justify-content:space-between;gap:1.5rem 3rem;flex-wrap:wrap}
.foot a{color:#fff}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.5rem}
.foot li a{display:inline-flex;min-height:44px;align-items:center}
.foot p{margin:.3rem 0}

/* Pagine legali */
.doc-head{background:var(--permit);color:#fff;padding-block:clamp(2.5rem,6vw,4rem)}
.doc-head h1{font-size:clamp(2.2rem,5vw,3.6rem);font-weight:800;letter-spacing:-.03em}
.doc-head .fields{grid-template-columns:repeat(auto-fit,minmax(12rem,max-content));column-gap:3rem;margin-top:1.8rem}
.doc-head .field{border-top:1px solid rgba(255,255,255,.3);padding-top:.6rem}
.doc-head .field:first-child{border-top:1px solid rgba(255,255,255,.3)}
.doc-head .field dt{color:var(--on-blue-2)}
.doc-head a{color:#fff}
.doc{padding-block:clamp(2.5rem,6vw,4rem)}
.doc .wrap{max-width:48rem}
.doc h2{font-size:1.5rem;font-weight:800;color:var(--navy);margin:2.6em 0 .7em}
.doc h2:first-child{margin-top:0}
.doc h3{font-size:1.15rem;font-weight:700;margin:1.6em 0 .5em}
.doc ul,.doc ol{padding-left:1.3rem;margin:0 0 1em}
.doc li{margin-bottom:.4em}
.doc li::marker{color:var(--permit)}
.doc .table{overflow-x:auto;margin:0 0 1.2em}
.doc table{width:100%;border-collapse:collapse;min-width:26rem}
.doc th,.doc td{text-align:left;padding:.65rem .8rem .65rem 0;border-bottom:1px solid var(--rule);vertical-align:top}
.doc th{font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.notice{background:var(--paper-2);border-radius:var(--radius);padding:1.1rem 1.3rem;margin:0 0 1.2em}
.notice p:last-child{margin:0}
.steps{counter-reset:s;list-style:none;padding:0!important}
.steps li{counter-increment:s;position:relative;padding:.7rem 0 .7rem 2.9rem;border-bottom:1px solid var(--rule)}
.steps li::before{content:counter(s);flex:none;display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:.95rem;position:absolute;left:0;top:.7rem}

/* Responsive */
@media (max-width:56rem){
  .hero .wrap,.coverage .wrap,.free .wrap{grid-template-columns:1fr}
  .permit{margin-top:1rem}
  .how{grid-template-columns:1fr}
  .how-shot{width:min(15rem,100%);justify-self:center}
}
@media (max-width:34rem){
  .free .fields{grid-template-columns:1fr}
  .free .field:nth-child(2){border-top:1px solid var(--rule)}
  .card{width:86%}
  .cities th[scope=row]{width:auto}
  .cities td.b{padding-inline:.6rem}
}
@media (prefers-reduced-motion:reduce){
  .stamp path{animation:none}
  html{scroll-behavior:auto}
}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.foot a:hover,.on-blue a:hover{color:#fff}
.foot .heart{color:var(--orange);vertical-align:-2px;margin-inline:1px}

/* Sostegno facoltativo */
.support{background:var(--paper-2)}
.support .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.support .sec-lead{max-width:52ch}
.support-author{font-weight:700;margin:1.2rem 0 0}
.coffee{display:inline-flex;align-items:center;justify-content:center;gap:.7rem;min-height:48px;padding:.8rem 1.2rem;border-radius:12px;background:var(--orange);color:var(--ink);font-weight:800;text-decoration:none}
.coffee svg{width:24px;height:24px;flex:none}
.coffee:hover{background:#e88b0c;color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
.support-action p{font-size:1rem;color:var(--ink-2);max-width:36ch;margin:1rem 0 0}
@media(max-width:56rem){.support .wrap{grid-template-columns:1fr}}