/* ============================================================
   NetService homepage — styles
   Organised: globals → shared components/utilities → sections
   (top-to-bottom, same order as index.html) → responsive.
   ============================================================ */

/* ---------- Theme tokens ---------- */
/* The accent palette is the ONLY part exposed as CSS variables: the final
   colour is "Sito Servizi" #6A7FFA, and test.html's Tweakpane playground can
   still retint it live there. Everything else stays as literal design tokens
   (see CLAUDE.md). */
:root{
  --accent:#6A7FFA;        /* "Sito Servizi" blue    */
  --accent-rgb:106,127,250;/* same colour, for rgba()*/
  --accent-dark:#4960e3;   /* darker shade           */
  --accent-tint:#eff1fe;   /* light tint background  */
  --tray:#f5f7fb;          /* grey tray (.box & co.) */
  --wrap:1250px;           /* section width */
}

/* ---------- Globals / reset ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable}
body{margin:0;background:#fff;font-family:'Schibsted Grotesk',system-ui,sans-serif;color:#0B1220;-webkit-font-smoothing:antialiased}
img{max-width:100%}
h1,h2,h3,h4,p{text-wrap:balance}
input,textarea,select{font-family:inherit}

/* ---------- Shared components / utilities ---------- */
.btn{cursor:pointer;border:none;font-family:inherit;text-decoration:none;display:inline-flex;align-items:center;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.link-item{cursor:pointer;transition:color .15s ease}
a.link-item{color:inherit;text-decoration:none}
.nav-link{cursor:pointer;transition:color .15s ease;color:inherit;text-decoration:none;font-size: 15.5px;font-weight: 700;}
.card-hover{transition:transform .18s ease,box-shadow .18s ease}
/* A card with a single CTA is itself the link (the CTA inside becomes a <span>
   that only looks like one). Cards with several links can't be an <a> (links
   can't nest) and use a stretched link instead — see .sol-card--stretch. */
a.card-hover{color:inherit;text-decoration:none}
/* clickable cards tint their title on hover (rule in the hover block below) */
:is(a.card-hover,.sol-card--stretch) :is(.also-title,.brick-q,.sol-card-t,.solution-title,.news-item-title,.ct-v,.ct-ang-t){transition:color .15s ease}

/* ---------- Accessibility ---------- */
/* skip link: first tab stop on every page, hidden until focused (WCAG 2.4.1) */
.skip-link{position:absolute;left:16px;top:-100px;z-index:200;background:#0B1220;color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;font-weight:700;text-decoration:none}
.skip-link:focus{top:12px}
/* <main tabindex="-1"> receives focus from the skip link; it needs no ring of its own */
main:focus{outline:none}
/* one keyboard focus ring for everything interactive; :where() keeps it at zero
   specificity so component rules (.chk, .svc-opt, .sol-card…) still win. The outline
   follows border-radius, so plain links get a 6px radius and the ring is never square;
   pills and cards keep their own (larger) radius, which beats this one */
:where(a,button,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
/* the text fields drop the native outline for their own look: give focus a visible ring */
.field:focus,.map-input:focus{box-shadow:0 0 0 2px var(--accent)}
/* reduced motion: no smooth scrolling, transitions and animations reduced to an instant */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* visually hidden, still read by screen readers */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Hover styles only on devices with a real pointer — avoids sticky :hover on touch. */
@media (hover: hover) and (pointer: fine){
  .soc-link:hover .soc-arrow{opacity:1;translate:0 0}
  .btn:hover{transform:translateY(-1px)}
  .link-item:hover,a.footer-col-title:hover{color:var(--accent)}
  /* text links underline on hover; the offset keeps it off the descenders */
  .auth-link a:hover,
  .auth-alt a:hover,
  .auth-d a:hover,
  .footer-col-links .link-item:hover{text-decoration:underline;text-underline-offset:3px}
  .nav-link:hover{color:var(--accent)}
  .nav-dd-link:hover,.user-menu a:hover{color:var(--accent)}
  .svc-link:hover .solution-ico,a.card-hover:hover .solution-ico,.sol-card--stretch:hover .solution-ico{background:var(--accent);color:#fff}
  a.aziende-sec-card:hover{color:var(--accent)}
  a.aziende-sec-card:hover .aziende-sec-ico{background:var(--accent)}
  :is(a.card-hover,.sol-card--stretch):hover :is(.also-title,.brick-q,.sol-card-t,.solution-title,.news-item-title,.ct-v,.ct-ang-t){color:var(--accent)}
  a.card-hover:hover .contatti-v{color:color-mix(in srgb,var(--accent) 60%,#fff)}   /* on the dark band: the lighter accent (.accent-2) */
  .svc-dd-opt:hover{color:var(--accent)}
  .lng-link:hover{text-decoration:underline}
  .sol-svc:hover{color:var(--accent-dark);background:var(--accent-tint)}
  .sol-link:hover{color:var(--accent-dark);background:var(--accent-tint)}
  .sol-link:hover .solution-ico{background:var(--accent);color:#fff}
  .tut-item:hover{color:var(--accent-dark);background:var(--accent-tint)}
  .tut-item:hover .solution-ico{background:var(--accent);color:#fff}
  .sol-link--todo:hover{color:#A8161B;background:#FDECEC}   /* no page yet: the row's hover in red too */
  .sol-link--todo:hover .solution-ico{background:#D7262B}
  .ang-item:hover .ang-media-hover{opacity:1}
  .more-toggle:hover{box-shadow:0 10px 24px -14px rgba(11,18,32,.5)}
  .card-hover:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(11,18,32,.4)}
}

.accent{color:var(--accent)}
.accent-2{color:color-mix(in srgb,var(--accent) 60%,#fff)}
.arrow17{font-size:17px}
.arrow-ico{width:1em;height:auto;flex-shrink:0;vertical-align:-.08em}

/* grey rounded box wrapper + white check icon (used across sections) */
.box{background:var(--tray);border-radius:26px;padding:14px}
/* two trays stacked in the same section read as one block when they touch —
   the gap is wider than the 12px used *inside* a tray, so the grouping is clear */
.box + .box{margin-top:28px}
.check{display:flex;align-items:center;justify-content:center;flex-shrink:0}
.check svg{fill:var(--accent)}

/* Sprite icons — same inline-SVG glyphs as .check/.arrow-ico, but referenced
   from a <symbol> so repeated icons stay one short tag in the markup.
   Both still inherit the theme (fill:var(--accent) / currentColor). */
.sprite{display:none}
.ico-check{width:16px;height:13px;flex-shrink:0;fill:var(--accent)}
.ico-arrow{width:14px;height:12px;flex-shrink:0;fill:currentColor}
.ico-arrow--down{rotate:90deg}  /* downloads */

/* Dark-band tiles — the .bricks-list/.brick pattern (separate cards, 12px gap,
   16px radius) in its dark variant. Used by the stats in #chi-siamo and by the
   app features in #app; only the text styles inside differ. Mobile-first: one
   per row on phones, two-up from 600px. */
.tile-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:600px){.tile-grid{grid-template-columns:1fr 1fr}}
.tile-grid > .tile:only-child{grid-column:1/-1}   /* a lone tile spans both columns instead of leaving the right one empty */
.tile{background:#141d30;border-radius:16px;padding:30px}
/* a full-width tile leading the tiles under it (the dark-band .brick--lead: unipolmove's "Hai a disposizione:") */
.tile--lead{grid-column:1/-1;padding:20px 26px}
.tile--lead .app-item-t{margin:0}
/* a wide image across a whole grid row at its own ratio (pratica-assicurata's materials banner, under the whole .app-band) */
.tile-wide{grid-column:1/-1;display:block;width:100%;height:auto;border-radius:16px}

/* White note strip inside a .box tray — the full-width row that closes a card
   grid. Bare: an icon + a line of text. With --cta: text left, button right. */
.box-note{background:#fff;border-radius:16px;padding:20px 26px;display:flex;align-items:center;gap:14px;font-size:13.5px;line-height:1.5;color:rgba(11,18,32,.6);text-wrap:balance;}
.box-note--cta{justify-content:space-between;gap:50px;/*flex-wrap:wrap*/}
/* a note strip closing a tray takes its gap from whatever precedes it */
.fn-panel + .box-note,
.duo-grid + .box-note{margin-top:12px}
/* payment-service-provider credential: a labelled white card, so the Xoldy
   disclosure reads as an accreditation rather than another feature note */
.brand-card{background:#fff;border-radius:16px;padding:30px 32px}
.brand-card-logo{display:block;height:60px;width:auto;max-width:100%;margin:0 0 24px}
.psp-text{margin:0;font-size:13.5px;line-height:1.65;color:rgba(11,18,32,.6)}

/* monospace placeholder tag (screenshots / article images) */
.mono-tag{font:500 10px ui-monospace,Menlo,monospace;letter-spacing:.04em;color:rgba(11,18,32,.4);text-transform:uppercase}

/* repeated section heading/subhead variants */
.sec-title{margin:0 0 14px;font-size:35px;line-height:1.05;font-weight:800;letter-spacing:-.03em}
.sec-sub{margin:0;font-size:16.5px;line-height:1.55;color:rgba(11,18,32,.6)}
.title-38{margin:0 0 14px;font-size:38px;line-height:1.1;font-weight:800;letter-spacing:-.03em}
.sub-16{margin:0;font-size:16px;line-height:1.55;color:rgba(11,18,32,.6)}

/* buttons */
.btn-dark{font-size:13.5px;font-weight:700;color:#fff;background:#495061;padding:11px 22px;border-radius:100vw}
.btn-primary{font-size:15.5px;font-weight:700;color:#fff;background:var(--accent);padding:16px 32px;border-radius:100vw}
.btn-ghost{font-size:15.5px;font-weight:700;color:#0B1220;background:#fff;border:1px solid rgba(11,18,32,.14);padding:16px 32px;border-radius:100vw}
/* outline button for dark grounds (chi-siamo Contatti band: LinkedIn / YouTube) */
.btn-ghost-light{font-size:15.5px;font-weight:700;color:#fff;background:transparent;border:1px solid rgba(255,255,255,.28);padding:16px 32px;border-radius:100vw}

.btn-submit{font-size:14.5px;font-weight:700;color:#fff;background:var(--accent);padding:15px 30px;border-radius:100vw}
.btn-ok{background:#1B7a3a}
.btn-faq{gap:10px;font-size:15px;font-weight:700;color:#fff;background:var(--accent);padding:15px 28px;border-radius:100vw;}
.btn-cta{font-size:15.5px;font-weight:700;color:#0B1220;background:#fff;padding:16px 34px;border-radius:100vw;white-space:nowrap}

/* ---------- NAV ---------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid rgba(11,18,32,.07)}
.nav-grid{max-width:1180px;margin:0 auto;padding:15px 40px}
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
/* Burger + drawer exist only on mobile. On desktop the burger is hidden and
   .nav-collapse is display:contents, so its children (nav-center, nav-actions)
   act as direct grid items — the desktop layout is unchanged, nothing duplicated. */
.nav-burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;background:none;color:#0B1220;cursor:pointer;justify-self:start}
/* three-bar icon that animates into an × when .nav-open is set */
.nav-burger-box{position:relative;width:20px;height:14px;flex-shrink:0}
.nav-burger-bar{position:absolute;left:0;width:100%;height:2px;background:currentColor;border-radius:2px;transform-origin:center;transition:transform .28s ease,opacity .2s ease}
.nav-burger-bar:nth-child(1){top:0}
.nav-burger-bar:nth-child(2){top:6px}
.nav-burger-bar:nth-child(3){top:12px}
.nav-open .nav-burger-bar:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-open .nav-burger-bar:nth-child(2){opacity:0}
.nav-open .nav-burger-bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.nav-collapse{display:contents}
.nav-backdrop{display:none}
/* lock page scroll while the drawer is open (gutter stays reserved via
   scrollbar-gutter:stable, so hiding the scrollbar causes no layout shift) */
html:has(.nav-open){overflow:hidden}
.nav-logo{display:flex;align-items:center;gap:9px;justify-self:start}
.nav-logo img{height:20px;display:block}
.nav-center{display:flex;gap:24px;font-size: 15.5px;font-weight: 700;line-height:1em;color:#0B1220;font-weight:500;justify-self:center}
.nav-actions{display:flex;align-items:center;gap:14px;justify-self:end}
/* modulo-ordine.html: the nav button's slot holds a label (no login there) — accent, not clickable */
.nav-tag{background:var(--accent);cursor:default}
.btn.nav-tag{transform:none}
/* modulo-ordine.html focus header: no menu, the page name centred in the bar (the middle
   column of .nav-inner), an invisible copy of the nav button keeping the bar's height */
.nav-focus{margin:0;justify-self:center;font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--accent);white-space:nowrap;cursor:default}
.nav-ph{grid-column:3;justify-self:end;visibility:hidden;pointer-events:none}
/* current page: the link (or, inside a dropdown, the item and its trigger) turns accent */
.nav-link[aria-current],.nav-dd:has([aria-current]) > .nav-dd-btn{color:var(--accent)}
/* Soluzioni / Servizi dropdowns — click-to-open (data-open), like .nav-user.
   The panel is the .box pattern in miniature: grey tray, white item cards. */
.nav-dd{position:relative}
.nav-dd-btn{display:inline-flex;align-items:center;gap:7px;padding:0;border:none;background:none;font-family:inherit;line-height:inherit}
.nav-dd-chev{width:9px;height:auto;flex-shrink:0;transition:rotate .2s ease}
.nav-dd[data-open] .nav-dd-chev{rotate:180deg}
.nav-dd-menu{position:absolute;top:calc(100% + 22px);left:50%;translate:-50% -6px;min-width:290px;display:grid;gap:6px;background:var(--tray);border-radius:20px;padding:8px;box-shadow:0 24px 50px -20px rgba(11,18,32,.4);opacity:0;visibility:hidden;transition:opacity .18s ease,translate .18s ease,visibility .18s;z-index:60}
.nav-dd[data-open] .nav-dd-menu{opacity:1;visibility:visible;translate:-50% 0}
/* invisible bridge over the gap below the trigger, so the pointer can travel
   down to the panel without leaving .nav-dd (hover-open on desktop) */
.nav-dd-menu::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:24px}
.nav-dd-link{display:block;background:#fff;border-radius:12px;padding:13px 16px;font-size:14.5px;font-weight:700;line-height:1.3;color:#0B1220;text-decoration:none;white-space:nowrap;transition:color .15s ease}
.nav-dd-link[aria-current],.user-menu a[aria-current]{color:var(--accent)}

/* Floating header variant — toggled via Tweakpane (adds .header-floating on <html>).
   Same sticky behaviour, but offset down from the top and built from the .box
   pattern: a centered grey padded wrapper (capped at 1400px) framing a white
   inner bar. */
.header-floating .nav{position:fixed;top:12px;left:0;right:0;z-index:50;background:transparent;backdrop-filter:none;border-bottom:none;padding:0 16px}
.header-floating .nav-grid{max-width:1400px;background:var(--tray);border-radius:24px;padding:12px}
.header-floating .nav-inner{background:#fff;border-radius:16px;padding:10px 22px}

.hero-inner{max-width:880px;margin:0 auto;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:40px}
.badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:var(--accent-dark);background:var(--accent-tint);padding:6px 13px;border-radius:999px;margin-bottom:28px}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block}
.hero-title{margin:0 auto 22px;max-width:800px;font-size:60px;line-height:1.02;font-weight:800;letter-spacing:-.035em}
.hero-sub{margin:0 auto 32px;max-width:620px;font-size:18px;line-height:1.55;color:rgba(11,18,32,.62)}
.hero-cta{display:flex;gap:12px;justify-content:center;margin-bottom:38px;flex-wrap:wrap}

/* ---------- SOLUTIONS SHOWCASE ---------- */
.sec-solutions{max-width:var(--wrap);margin:0 auto;padding:96px 40px 30px}
.head-solutions{text-align:center;max-width:660px;margin:0 auto 50px}
.solutions-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.solution-card{text-decoration:none;color:inherit;background:#fff;border-radius:16px;padding:28px 30px;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:108px}
.solution-title{margin:0;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.18}
.solution-ico{width:46px;height:46px;border-radius:50%;background:#eef0f4;display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--accent);flex-shrink:0}
/* client highlights: visual placeholder on top, title + arrow underneath */
.solution-card--visual{display:grid;grid-template-columns:1fr auto;align-items:center;gap:22px 20px;padding:12px 12px 24px}
.solution-card--visual .solution-title{padding-left:16px;font-size:20px}
.solution-card--visual .solution-ico{margin-right:12px}
.solution-visual{grid-column:1/-1;height:200px;border-radius:12px;background-image:repeating-linear-gradient(135deg,rgba(var(--accent-rgb),.08) 0 11px,rgba(var(--accent-rgb),.03) 11px 22px);display:flex;align-items:center;justify-content:center}
.solution-img{display:block;width:100%;object-fit:cover}

/* ---------- GROUP BAND ---------- */
.sec-group{max-width:var(--wrap);margin:0 auto;padding:50px 40px 30px;text-align:center}
.group-label{margin:0 0 26px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(11,18,32,.6)}
.group-logos{display:flex;align-items:center;justify-content:center;gap:42px;flex-wrap:wrap;opacity:.55}
.group-logo{font-weight:700;font-size:17px}
.group-logo-1{font-weight:800;font-size:18px;letter-spacing:-.02em}
.group-logo-2{font-weight:700;font-size:17px;letter-spacing:.02em}
.group-logo-3{font-weight:800;font-size:18px}

/* ---------- SERVICES TABS ---------- */
.sec-white{background:#fff}
.sec-tabs{max-width:var(--wrap);margin:0 auto;padding:90px 40px}
.head-tabs{text-align:center;max-width:820px;margin:0 auto 44px}
.head-tabs .sec-title{max-width:640px;margin-inline:auto}
.head-tabs .sec-sub + .sec-sub{margin-top:12px}
.tabs-row{display:flex;gap:8px;justify-content:center;margin-bottom:34px;flex-wrap:wrap}
.tab{font-family:inherit;font-size:14.5px;font-weight:700;padding:13px 26px;border-radius:100vw;cursor:pointer;border:1px solid rgba(11,18,32,.12);background:#fff;color:rgba(11,18,32,.65)}
.tab.active,.tab[aria-current="page"]{border-color:#495061;background:#495061;color:#fff}
.tabs-row--lg .tab{font-size:15.5px;padding:15px 30px}  /* bigger pills: homepage sector tabs, servizi activity filter */
.tabs-row--xl .tab{font-size:18px}  /* homepage sector tabs only */
.tabs-panel{background:#fff;border-radius:18px;padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
/* display:grid would beat the UA [hidden] rule, so state it explicitly */
.tabs-panel[hidden]{display:none}
/* top-aligned variant: some lists have multi-line items, where a vertically
   centred check drifts away from the first line */
.svc-points--top .svc-point{align-items:flex-start}
.svc-points--top .ico-check{margin-top:4px}
.svc-title{margin:0 0 14px;font-size:28px;font-weight:800;letter-spacing:-.025em}
.svc-desc{margin:0 0 24px;font-size:16px;line-height:1.6;color:rgba(11,18,32,.6)}
.svc-points{display:flex;flex-direction:column;gap:12px}
/* homepage: the panel's title links to the target page; the cluster cards follow it in the tray */
.tabs-panel--clusters{margin-bottom:12px}
.svc-link{display:inline-flex;align-items:center;gap:14px;font-size:15.5px;font-weight:700;color:#0B1220;text-decoration:none}
.svc-link .solution-ico{transition:background .15s ease,color .15s ease}
/* the same "Scopri di più" inside a card: pinned to its foot (so links line up
   across a row), with a slightly smaller round icon */
.svc-link--card{margin-top:auto;font-size:14.5px}
.svc-link--card .solution-ico{width:40px;height:40px}
.svc-point{display:flex;align-items:center;gap:11px;font-size:14.5px;font-weight:500}
.tabs-shot{height:300px;border-radius:14px;overflow:hidden;background-image:repeating-linear-gradient(135deg,rgba(var(--accent-rgb),.08) 0 11px,rgba(var(--accent-rgb),.03) 11px 22px);display:flex;align-items:center;justify-content:center;border:1px solid rgba(var(--accent-rgb),.12)}
/* a target with a real image (the services array's img): photo cover-fills the frame, no stripes or border */
.tabs-shot:has(.tabs-shot-img:not([hidden])){background:none;border-color:transparent}
.tabs-shot-img{display:block;width:100%;height:100%;object-fit:cover}
.tabs-shot [hidden]{display:none}

/* Section entry animation, every page (html.reveal-on from head.js): every section of
   <main> after the first, and the footer CTA, rises 64px into place with a fade (1s) the
   first time it enters the viewport (.is-in, set by site.js). Without the class (no JS,
   reduced motion) nothing is hidden */
.reveal-on main > section:not(:first-child),.reveal-on .footer-cta{opacity:0;transform:translateY(64px);transition:opacity .8s ease,transform 1s cubic-bezier(.22,1,.36,1)}
.reveal-on main > section.is-in,.reveal-on .footer-cta.is-in{opacity:1;transform:none}

/* ---------- BUSINESS RESULTS ---------- */
.sec-results{max-width:var(--wrap);margin:0 auto;padding:40px 40px 88px}
.results-head{max-width:580px;margin-bottom:44px}
.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:12px}
.result-card{background:#fff;border-radius:16px;padding:30px}
.result-v{font-size:40px;font-weight:800;letter-spacing:-.02em;color:var(--accent)}
.result-l{font-size:14px;color:rgba(11,18,32,.6);margin-top:8px;line-height:1.45}
.result-list{background:#fff;border-radius:16px;overflow:hidden}
.result-row{display:flex;align-items:center;gap:14px;padding:18px 26px}
.result-row--bd{border-bottom:1px solid rgba(11,18,32,.07)}
.result-row-t{font-size:14.5px;font-weight:600}
.result-row-d{font-size:13px;color:rgba(11,18,32,.6)}

/* the news cards now use the shared .news-cards / .news-item component
   defined in the NEWS INDEX block below — the homepage uses it too */

/* ---------- CONTACT ---------- */
.contact-w{background:#fff;color:#0B1220}
.sec-contact{max-width:var(--wrap);margin:0 auto;padding:88px 40px;display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.contact-eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(11,18,32,.6);margin-bottom:16px}
.contact-title{margin:0 0 18px;font-size:40px;line-height:1.06;font-weight:800;letter-spacing:-.03em}
.contact-desc{margin:0 0 28px;font-size:16px;line-height:1.6;color:rgba(11,18,32,.6)}
.contact-note{display:flex;align-items:center;gap:13px;padding:16px 18px;background:#f4f5f8;border-radius:14px;max-width:400px}
/* a fixed slate, not the accent: it doesn't retint with the theme */
.contact-note-ico{width:44px;height:44px;border-radius:50%;background:#495061;color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}
/* the brand mark, cropped to its paths (the source SVG had a 45×45 box and no viewBox) */
.contact-note-mark{width:28px;height:auto}
.contact-note-t{font-size:13.5px;font-weight:600}
.contact-note-d{font-size:12.5px;color:rgba(11,18,32,.6)}
/* homepage: the note in the classic frame (grey tray → white card, 400px wide) + an
   optional stock image under it (3:2, 12px below), striped placeholder until the photo
   arrives — as an <img> it cover-crops */
.contact-note-box{max-width:428px}
.contact-note-box .contact-note{background:#fff;max-width:none}
.contact-photo{display:flex;align-items:flex-end;justify-content:flex-end;aspect-ratio:3/2;width:100%;height:auto;margin-top:12px;border-radius:16px;padding:18px 22px;background-color:#fff;background-image:repeating-linear-gradient(135deg,rgba(var(--accent-rgb),.08) 0 11px,rgba(var(--accent-rgb),.03) 11px 22px);object-fit:cover}
img.contact-photo{display:block;padding:0;background:none}
.contact-form{background:#fff;border-radius:18px;padding:40px;color:#0B1220}
.form-label{font-size:15px;font-weight:700;margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chip{display:inline-grid;place-items:center;font-family:inherit;font-size:12.5px;font-weight:500;color:rgba(11,18,32,.7);background:#f5f7fb;border:1px solid rgba(11,18,32,.1);padding:8px 13px;border-radius:8px;cursor:pointer}
/* Reserve the selected (bold) width up front so toggling .sel doesn't shift layout:
   a hidden bold clone of the label and the visible label share the same grid cell. */
.chip::before{content:attr(data-label);grid-area:1/1;font-weight:600;visibility:hidden}
.chip-txt{grid-area:1/1}
.chip.sel{font-weight:600;color:var(--accent-dark);background:var(--accent-tint);border-color:rgba(var(--accent-rgb),.3)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:6px 0 14px}
.field{background:#f4f5f8;border:none;border-radius:14px;padding:22px 24px;font-size:16px;color:#0B1220;outline:none}

/* --- floating labels ---------------------------------------------------
   A placeholder vanishes the moment the field is filled, so the user loses
   track of what they typed where. Wrapping each control in <label class="fld">
   keeps its name visible: the text sits over the empty field and shrinks to a
   caption once there's content. `placeholder=" "` (a single space) is what
   makes :placeholder-shown usable as an "is empty" test.
   ---------------------------------------------------------------------- */
.fld{position:relative;display:block;margin-bottom:14px}
.fld .field{width:100%;margin-bottom:0;padding:27px 24px 11px}
/* textarea: the grey box is the label, not the textarea — the caption sits in the label's
   top padding, the textarea (transparent) below it, so typed text scrolling up never runs
   under the caption; the focus ring moves to the label too */
.fld:has(> .field--area){background:#f4f5f8;border-radius:14px;padding-top:30px}
.fld .field--area{padding-top:0;min-height:74px;background:transparent;border-radius:0 0 14px 14px}
.fld .field--area:focus{box-shadow:none}
.fld:has(> .field--area:focus){box-shadow:0 0 0 2px var(--accent)}
.fld > span{position:absolute;left:25px;top:20px;font-size:16px;line-height:1;color:rgba(11,18,32,.6);pointer-events:none;transition:top .15s ease,font-size .15s ease,color .15s ease,letter-spacing .15s ease}
.fld .field:focus ~ span,
.fld .field:not(:placeholder-shown) ~ span,
/* a <select> always shows a value, so its caption is permanently raised */
.fld--select > span{top:11px;font-size:12px;font-weight:600;letter-spacing:.05em;color:var(--accent)}
/* a raised caption stays on one line (a long one, e.g. the textarea's, would wrap on a
   phone and run into the text below): cut with an ellipsis at the field's right padding */
.fld .field:focus ~ span,.fld .field:not(:placeholder-shown) ~ span,.fld--select > span{right:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fld--select .field{padding-top:27px}
/* the row grid holds .fld wrappers now, so they carry no extra bottom margin */
.form-row .fld,.form-row .fld-pw{margin-bottom:0}
.field--full{width:100%;margin-bottom:14px}
.fld .field--full{margin-bottom:0}
.field--area{width:100%;margin-bottom:22px;resize:vertical;min-height:96px}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.form-note{font-size:12px;color:rgba(11,18,32,.6)}

/* ---------- SFIDE ---------- */
.sec-sfide{max-width:var(--wrap);margin:0 auto;padding:60px 40px 50px}
.head-sfide{text-align:center;max-width:660px;margin:0 auto 48px}
.bricks-grid{display:grid;grid-template-columns:360px 1fr;gap:12px}
.brick-lead{background:#fff;border-radius:16px;padding:36px 38px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;min-height:200px}
.brick-lead-title{margin:0;font-size:26px;line-height:1.25;font-weight:800;letter-spacing:-.02em}
.brick-lead-desc{margin:0;font-size:16px;line-height:1.6;color:rgba(11,18,32,.6)}
.bricks-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.brick{background:#fff;border-radius:16px;padding:30px}
.brick-q{margin:0;font-size:19px;font-weight:800;line-height:1.25;letter-spacing:-.01em}
.brick-a{margin:16px 0 0;font-size:14.5px;line-height:1.55;color:rgba(11,18,32,.6)}
/* an image slot between a brick's title and text, as soluzioni.html's .sol-card-visual (300px
   here, full width): striped placeholder with a .mono-tag; an <img class="brick-visual"> cover-crops */
.brick-visual{display:flex;align-items:flex-end;justify-content:flex-end;height:300px;margin:18px 0 0;padding:14px 18px;border-radius:12px;background-image:repeating-linear-gradient(135deg,rgba(var(--accent-rgb),.08) 0 11px,rgba(var(--accent-rgb),.03) 11px 22px)}
img.brick-visual{display:block;width:100%;padding:0;object-fit:cover;background:none}

/* ---------- FAQ ---------- */
.sec-faq{max-width:var(--wrap);margin:0 auto;padding:90px 40px 60px}
.sec-faq .faq-q{font-weight:800}  /* homepage only; the product pages' .faq-list stays 700 */
.faq-grid{display:grid;grid-template-columns:0.85fr 1.4fr;gap:60px;align-items:start}
/* Mobile-first: static when the FAQ stacks in one column; sticky only in the
   two-column desktop layout (otherwise it overlaps the list on scroll). */
.faq-side{position:static}
@media(min-width:881px){.faq-side{position:sticky;top:96px}}

.faq-desc{margin:0 0 26px;font-size:16px;line-height:1.6;color:rgba(11,18,32,.6)}
.faq-list{display:flex;flex-direction:column;gap:12px}
.faq-item{border-radius:18px;overflow:hidden;background:#fff}
.faq-q-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:26px 28px;background:none;text-align:left}
.faq-q{font-size:18px;font-weight:700;letter-spacing:-.01em;color:#0B1220}
.faq-sign{width:44px;height:44px;border-radius:50%;background:#eef0f4;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:400;color:var(--accent);flex-shrink:0;line-height:1}
.faq-a{padding:0 28px 28px;font-size:15px;line-height:1.65;color:rgba(11,18,32,.62)}
/* faq.html: the homepage section as a page — hero above, help column on the left
   (heading + Contattaci + the Angeli card), pinned under the measured header */
.sec-faq--page{padding-top:70px;padding-bottom:70px}
.sec-faq--page .faq-side{top:calc(var(--nav-h,72px) + 24px)}
.faq-side-t{margin:0 0 10px;font-size:26px;line-height:1.15;font-weight:800;letter-spacing:-.02em}
.faq-help{margin-top:32px}  /* the Angeli card, in its grey tray */
/* faq.html: stock image under the Angeli card, inside that tray (3:2, 12px below the
   card); striped placeholder until the photo arrives — as an <img> it cover-crops */
.faq-photo{display:flex;align-items:flex-end;justify-content:flex-end;aspect-ratio:3/2;width:100%;height:auto;margin-top:12px;border-radius:16px;padding:18px 22px;background-color:#fff;background-image:repeating-linear-gradient(135deg,rgba(var(--accent-rgb),.08) 0 11px,rgba(var(--accent-rgb),.03) 11px 22px);object-fit:cover}
img.faq-photo{display:block;padding:0;background:none}
.sec-faq--page .faq-item{scroll-margin-top:calc(var(--nav-h,72px) + 20px)}

/* ---------- CTA BAND ---------- */
.sec-cta{max-width:var(--wrap);margin:0 auto;padding:10px 40px 80px}
.cta-band{background:radial-gradient(120% 140% at 80% -20%,var(--accent) 0%,var(--accent-dark) 60%);border-radius:22px;padding:60px 50px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cta-title{margin:0 0 8px;font-size:34px;font-weight:800;letter-spacing:-.03em}
.cta-desc{margin:0;font-size:16px;color:rgba(255,255,255,.8)}
/* the text block shrinks instead of claiming the whole row, so a long description
   wraps beside the button (kept on the right) rather than pushing it onto its own line */
.cta-band > div{flex:1 1 360px;max-width:720px}
/* the whole band is the link (Scopri tutte le soluzioni) */
.cta-band--link{text-decoration:none}
a.cta-band--link{color:#fff}  /* beats a.card-hover{color:inherit} */
.cta-band--link .solution-ico{background:#fff}
/* the round arrow stays white on hover here (overrides the a.card-hover fill) */
@media (hover: hover) and (pointer: fine){
  a.cta-band--link:hover .solution-ico{background:#fff;color:var(--accent)}
}
.box + .cta-band--link{margin-top:14px}

/* ---------- FOOTER ---------- */
.footer{background:#fff;padding:0 24px 24px}
.footer-pad{max-width:1640px;margin:0 auto;background:#f4f6fa;border-radius:30px;padding:64px 72px 28px}

.footer-illus{width:190px;height:170px;border-radius:16px;background-image:repeating-linear-gradient(135deg,rgba(var(--accent-rgb),.07) 0 9px,rgba(var(--accent-rgb),.02) 9px 18px);display:flex;align-items:flex-end;justify-content:center;flex-shrink:0;border:1px solid rgba(11,18,32,.07)}

/* Footer CTA as its own block above the footer (every page but contatti, the legal and the news ones; .footer-top is the
   retired in-footer version, still used by index_old.html):
   the same .cta-band as the other pages' CTA sections, at the same size
   (.sec-cta's 1180px container, the band's own 60px 50px padding). The gap to
   the footer below is this block's bottom padding and mirrors the space above
   it (100px, 60px on mobile). */
.footer-cta{max-width:var(--wrap);margin:0 auto;padding:0 40px 100px}
.footer-cta-band > .footer-illus{flex:none;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.14) 0 9px,rgba(255,255,255,.04) 9px 18px);border-color:rgba(255,255,255,.22)}

/* the real photo (images/cta/contattaci.jpg, 380×340 = 2× the 190×170 slot) in place of the striped placeholder */
.footer-cta-band > .footer-illus-img{display:block;object-fit:cover;border:0;background:none}
.footer-cta-t{margin:0;flex:1;min-width:280px}
/* accent text would vanish on the accent band: the highlight stays plain white */
.footer-cta-t .accent{color:inherit}

/* brand column (logo + tagline) wider, then the three link columns; the brand
   takes its own row at ≤880px, everything stacks at ≤600px */
.footer-cols{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:30px;padding-bottom:38px}
.footer-brand-logo{display:block;width:250px;max-width:100%;height:auto;margin-bottom:22px}
.footer-tagline{margin:0;max-width:44ch;font-size:16px;line-height:1.55;color:rgba(11,18,32,.6)}
.footer-tagline span{display:block}
.footer-tagline span + span{margin-top:8px}
/* same type as the nav links (.nav-link): ink, 15.5px bold, sentence case */
.footer-col-title{font-size:15.5px;font-weight:700;line-height:1.2;color:#0B1220;margin-bottom:24px}
/* a linked column title (none at the moment) */
a.footer-col-title{display:block;text-decoration:none;transition:color .15s ease}
.footer-col-links{display:flex;flex-direction:column;gap:16px;font-size:15px;font-weight:600;color:rgba(11,18,32,.72)}
.footer-bottom{margin-top:26px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.footer-copy{font-size:14px;color:rgba(11,18,32,.6)}
.footer-social{display:flex;align-items:center;gap:10px}
/* brand-grey round icons; hover lifts like the footer's Contattaci (.btn) instead of turning accent */
:is(.footer-social,.ct-social) .link-item{width:38px;height:38px;border-radius:50%;background:#495061;color:#fff;display:grid;place-items:center;transition:transform .15s ease}
:is(.footer-social,.ct-social) svg{width:15px;height:15px;fill:currentColor}
@media (hover: hover) and (pointer: fine){
  :is(.footer-social,.ct-social) .link-item:hover{color:#fff;transform:translateY(-1px)}
}

/* ============================================================
   PRODUCT PAGE — software-gestionale-pratiche-auto.html
   Sections in page order. Reuses the shared primitives above
   (.box, .btn-*, .check, .tab, .brick, .faq-*, .results-*,
   .featured-grid, .solution-card); only the page-specific
   pieces live here.
   ============================================================ */

/* --nav-h and --subnav-h are measured in JS (the two header variants have
   different heights/offsets, and the sub-nav height follows its pill size)
   and drive the sticky offsets below. */
.anchor{scroll-margin-top:calc(var(--nav-h,72px) + var(--subnav-h,48px) + 20px)}

/* ---------- PRODUCT HERO ---------- */
.hero-product{background:radial-gradient(120% 80% at 50% -8%,#f3f7ff 0%,#fff 62%);text-align:center;padding:120px 40px 54px}
/* the floating header is out of flow — reserve room for it above the crumb */
.header-floating .hero-product{padding-top:calc(var(--nav-h,72px) + 80px)}
.hero-product .hero-inner{padding-top:0}
.hero-product .hero-title{font-size:54px;max-width:900px;margin-bottom:20px}
.hero-product .hero-sub{max-width:660px;margin-bottom:30px}
.hero-product .hero-cta{margin-bottom:0}
/* Soluzioni 2° livello: the hero sits on a large .solution-visual (striped
   placeholder for a background image), full-bleed and square like the
   homepage / chi-siamo heroes, its label in the corner */
.hero-product--visual{position:relative;isolation:isolate}
.hero-visual{position:absolute;inset:0;z-index:-1;height:auto;border-radius:0;align-items:flex-end;justify-content:flex-end;padding:18px 26px}
/* photo ground (images/hero/): the page sets --hero-img; taller than the plain
   product hero, a white layer over the whole image keeps the ink text and the
   muted crumb readable */
.hero-product--img{background:linear-gradient(rgba(255,255,255,.65),rgba(255,255,255,.65)),var(--hero-img) center/cover no-repeat;padding-top:130px;padding-bottom:120px}
.header-floating .hero-product--img{padding-top:calc(var(--nav-h,72px) + 90px)}

/* blur the photo behind the copy, as on .hero-about--img; the same layer fades the
   hero's bottom 40% to white */
.hero-product--img{position:relative;isolation:isolate}
.hero-product--img::after{content:"";position:absolute;inset:0;z-index:-1;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);pointer-events:none;background:linear-gradient(rgba(255,255,255,0) 60%,#fff)}
.hero-product--faq{--hero-img:url(images/hero/hero-faq.png)}
.hero-product--soluzioni{--hero-img:url(images/hero/hero-soluzioni.png)}
/* soluzioni + faq: the image mirrored horizontally — a background can't be flipped, so it
   moves to a flipped ::before and the white layer rides on the blur layer (::after) */
.hero-product--soluzioni,.hero-product--faq{background:none}
.hero-product--soluzioni::before,.hero-product--faq::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--hero-img) center/cover no-repeat;transform:scaleX(-1);pointer-events:none}
.hero-product--soluzioni::after,.hero-product--faq::after{background:linear-gradient(rgba(255,255,255,0) 60%,#fff),linear-gradient(rgba(255,255,255,.65),rgba(255,255,255,.65))}
.hero-product--contatti{--hero-img:url(images/hero/hero-contatti.png)}
/* agenzia hero image v4 (trial); to go back, swap for one of the commented lines below
   (and update the page's <link rel="preload"> to match) */
.hero-product--agenzia{--hero-img:url(images/soluzioni/agenzia-pratiche-auto-big-v4.jpg)}
/* .hero-product--agenzia{--hero-img:url(images/soluzioni/agenzia-pratiche-auto-big-v2.jpg)} */
/* .hero-product--agenzia{--hero-img:url(images/soluzioni/agenzia-pratiche-auto-big.jpg)} */
.hero-product--autoscuola{--hero-img:url(images/soluzioni/autoscuola-big.jpg)}
.hero-product--revisione{--hero-img:url(images/soluzioni/centro-di-revisione-big.jpg)}
/* Soluzioni 2° livello (.hero-product--sol, on all three):
   the photo stays sharp — no blur, the fade to white kept — under the same 65% white layer */
.hero-product--img.hero-product--sol{background:linear-gradient(rgba(255,255,255,.65),rgba(255,255,255,.65)),var(--hero-img) center/cover no-repeat}
.hero-product--img.hero-product--sol::after{-webkit-backdrop-filter:none;backdrop-filter:none}
/* breadcrumb = the product pages' floating .subnav, same look: a grey frame
   (var(--tray)) sized to its content, white badge-sized pills, the current page
   filled brand grey; the "/" kept between the steps. Radius 22px = a full pill on
   one row, still soft if it wraps */
.crumb{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;width:fit-content;max-width:100%;margin:0 auto 22px;padding:8px;background:var(--tray);border-radius:22px;font-size:12px;font-weight:700;line-height:1}
.crumb a,.crumb-now{padding:8px 14px;border-radius:999px}
.crumb a{color:#6d7179;background:#fff;text-decoration:none;transition:color .15s ease}
/* the "/" between the steps stays in the markup but is hidden — visually and for screen
   readers, which read each step on its own and would only announce "barra" in between */
.crumb-sep{display:none}
.crumb-now{color:#fff;background:#495061}
/* …and the same place: in a product hero, on desktop, it sits where the .subnav
   appears — centred 8px under the header (in either variant), out of the copy's
   flow, inside the hero's top padding. The .subnav takes that spot once the hero
   has scrolled away. On mobile it stays in flow above the title */
.hero-product{position:relative}
@media(min-width:881px){
  .hero-product .crumb{position:absolute;top:8px;left:0;right:0;margin:0 auto}
  .header-floating .hero-product .crumb{top:calc(var(--nav-h,72px) + 8px)}
}

/* ---------- STICKY SUB-NAV ---------- */
/* Fixed, not sticky, and hidden until the hero has scrolled under the header.
   Out of flow means it reserves no space while hidden, so there's no gap
   under the hero and no layout shift when it appears. Hidden with
   visibility (not display:none) so it still has layout and --subnav-h can
   be measured before it's ever shown. The body class is set from the same
   scroll handler that drives the scroll-spy. */
/* Floating, in either header variant, like the floating header: no bar and no
   1px borders — a grey frame (var(--tray), the .box convention) sized to its
   pills and centred 8px under the header, the pills its white modules. The
   wrapper is a transparent, click-through band (its 8px top padding is the gap,
   so the measured --subnav-h already includes it). */
.subnav{position:fixed;top:var(--nav-h,72px);left:0;right:0;z-index:40;padding:8px 16px 0;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.subnav-on .subnav{opacity:1;visibility:visible}
.subnav-row{pointer-events:auto;width:fit-content;max-width:min(1400px,100%);margin:0 auto;padding:8px;background:var(--tray);border-radius:999px;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.subnav-row::-webkit-scrollbar{display:none}
/* badge-sized pills (12px text — see .badge), white on the grey frame; no border,
   so 1px more padding keeps the old size. Sharpness: the strip is a fixed layer,
   which the browser renders with plainer antialiasing, so it fades in without the
   old 8px slide (no transform, no fractional offsets) and the muted text is the
   solid equivalent of rgba(11,18,32,.6) on white — semi-transparent small text
   looks softer still */
.subnav-link{flex-shrink:0;text-decoration:none;font-size:12px;font-weight:700;line-height:1;padding:8px 14px;border-radius:999px;color:#6d7179;background:#fff;transition:background .15s ease,color .15s ease}
.subnav-link.active{background:#495061;color:#fff}

/* ---------- OVERVIEW + VANTAGGI ---------- */
.sec-overview{max-width:var(--wrap);margin:0 auto;padding:80px 40px 70px}
.overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;margin-bottom:48px}
.overview-desc{margin:0;font-size:17px;line-height:1.65;color:rgba(11,18,32,.62)}
.overview-desc strong{color:#0B1220;font-weight:700}
.vantaggi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.vantaggio{background:#fff;border-radius:16px;padding:28px 26px}
.vantaggio-ico{width:44px;height:44px;border-radius:12px;background:var(--accent-tint);color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.vantaggio-t{margin:0 0 8px;font-size:18px;font-weight:800;letter-spacing:-.02em}
.vantaggio-d{margin:0;font-size:14px;line-height:1.55;color:rgba(11,18,32,.6)}
/* compact icon cards: a .vantaggio-ico badge beside a short bold line, an optional muted
   detail under it (<small>), three per row in a tray (gdpr-pratico's activities,
   pagopa-pratiche-motorizzazione's features). Usually with .card-hover (lift + shadow) */
.ico-cards{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ico-cards:last-child{margin-bottom:0}
.ico-card{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:22px 24px;font-size:15px;font-weight:700;line-height:1.3}
.ico-card .vantaggio-ico{margin:0;flex-shrink:0}   /* beside the line, not above it */
.ico-card small{display:block;margin-top:3px;font-size:12.5px;font-weight:500;line-height:1.4;color:rgba(11,18,32,.6)}
.ico-cards--4{grid-template-columns:1fr 1fr}   /* four items as a 2×2 grid (one column below 600px) */
.ico-cards--balance .ico-card > span:last-child{text-wrap:balance}   /* long lines break into even lines (okta's Funzioni) */
.duo-grid > .ico-cards{margin:0;grid-template-columns:1fr}   /* stacked beside an image in a .duo-grid (pos-xoldy's features) */
/* a full-width image closing a tray, under its cards (pratica-assicurata's Vantaggi): striped
   placeholder with a .mono-tag (360px); an <img class="tray-img"> keeps its own ratio */
.tray-img{display:flex;align-items:flex-end;justify-content:flex-end;height:360px;padding:18px 22px;border-radius:16px;background-color:#fff;background-image:repeating-linear-gradient(135deg,rgba(var(--accent-rgb),.08) 0 11px,rgba(var(--accent-rgb),.03) 11px 22px)}
img.tray-img{display:block;width:100%;height:auto;padding:0;background:none}   /* a photo keeps its own ratio, uncropped */
@media(max-width:600px){div.tray-img{height:220px}}
/* numbered steps: an <ol>, one white row per step in a tray, the number in the
   .vantaggio-ico badge shape (accent tint), the .brick-q / .brick-a beside it
   (passaggio-di-proprieta's seven steps, bollini-dekra's three) */
.num-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.num-step{display:flex;align-items:flex-start;gap:18px;background:#fff;border-radius:16px;padding:22px 26px}
.num-step-n{flex-shrink:0;width:44px;height:44px;border-radius:12px;background:var(--accent-tint);color:var(--accent);display:grid;place-items:center;font-size:17px;font-weight:800}
.num-step .brick-a{margin-top:6px}
@media(max-width:880px){.ico-cards{grid-template-columns:1fr 1fr}}
/* a paragraph leading a list inside a white card (pagoPA PRA / Avvisi overview cards) */
.card-lead{margin:0 0 14px;font-size:15px;line-height:1.6;color:rgba(11,18,32,.62)}
.card-lead + .grp-list{margin-top:20px}
.card-lead:last-child{margin-bottom:0}
/* a tick list following a brick's text (visure-pra's Per i privati) */
.brick-a + .grp-list{margin-top:18px}
/* a full-width white card opening a tray, its .brick-q leading the cards under it
   (pagopa-avvisi's "Con Pratico pagoPA puoi:"); it carries the 12px gap */
.brick--lead{padding:22px 26px;margin-bottom:12px}
/* a section's heading + copy in a white card on top of its tray, the cards below it
   (pagopa-avvisi's Pratico pagoPA, the pratiche-auto overview) */
.brick--intro{padding:40px;margin-bottom:12px}
.brick--intro:last-child{margin-bottom:0}   /* alone in its tray (gdpr-pratico overview) */
.duo-grid > .brick--intro{margin-bottom:0}   /* beside an image in a .duo-grid (accesso-pagopa-okta's Assistenza) */
/* the photo takes the text card's height, never sets it; stacked on mobile, its own ratio */
.duo-grid > img.vantaggio--img{contain:size}
@media(max-width:880px){.duo-grid > img.vantaggio--img{contain:none;height:auto}}
/* text card + a vertical image in a narrower column (unipolmove's overview): on desktop the
   image is as tall as the text (grid stretch); stacked on mobile it keeps a 4:5 shape */
.duo-grid--img-v{grid-template-columns:1.6fr 1fr}
@media(max-width:880px){.duo-grid--img-v > .vantaggio--img{aspect-ratio:4/5;height:auto}}
.brick--intro .overview-grid{margin:0}
@media(max-width:880px){.brick--intro{padding:28px 24px}}
/* a .vantaggi-grid followed by a note in the same tray (pagopa-avvisi's A chi è rivolto) */
.vantaggi-grid + .box-note{margin-top:12px}
/* a two-up row then a three-up row in the same tray (consulenza-dati-tecnici-dtt's categories) */
.duo-grid + .vantaggi-grid{margin-top:12px}
@media(max-width:600px){.ico-cards{grid-template-columns:1fr}}

/* ---------- PRICING (esempi di configurazione) ---------- */
.sec-pricing{max-width:var(--wrap);margin:0 auto;padding:70px 40px}
.head-pricing{text-align:center;max-width:680px;margin:0 auto 46px}
/* Subgrid: each card spans the grid's 6 row tracks (name / tagline / amounts /
   price / vat / list) rather than stacking its own, so every band lines up
   across the three cards however long the copy is — the prices in particular.
   Row gap stays 0 because the rows carry their own margins. Where subgrid is
   unsupported the cards fall back to a plain grid, just unaligned. */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(6,auto);column-gap:12px;row-gap:0;margin-bottom:12px}
.price-card{background:#fff;border-radius:18px;padding:34px 32px;display:grid;grid-template-rows:subgrid;grid-row:span 6}
.price-name-wrapper{display:flex;align-items:center;justify-content:space-between;}
.price-name{margin:0;font-size:21px;font-weight:800;letter-spacing:-.02em}
.price-flag{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-dark);background:var(--accent-tint);padding:5px 10px;border-radius:7px;max-width:max-content;}
.price-tag{margin:12px 0 0;font-size:14px;line-height:1.55;color:rgba(11,18,32,.6)}
.price-amounts{display:flex;align-items:center;gap:10px;margin:26px 0 2px}
.price-old{font-size:15px;font-weight:500;color:rgba(11,18,32,.6);text-decoration:line-through}
.price-off{font-size:11.5px;font-weight:700;color:#fff;background:var(--accent);padding:4px 9px;border-radius:7px}
.price-new{font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.price-vat{margin:6px 0 0;font-size:12.5px;color:rgba(11,18,32,.6)}
.price-list{display:flex;flex-direction:column;gap:12px;margin:26px 0 0;padding-top:24px;border-top:1px solid rgba(11,18,32,.08)}
.price-item{display:flex;align-items:flex-start;gap:11px;font-size:14px;line-height:1.5;font-weight:500}
.price-item .ico-check{margin-top:3px}
/* one CTA for the whole block, in the closing .box-note--cta strip */
.btn-price{display:flex;align-items:center;gap:15px;font-size:14px;line-height: 1em;font-weight:700;color:#fff;background:#495061;padding:15px 28px;border-radius:100vw;white-space:nowrap}

/* ---------- FUNZIONI (tabs) ---------- */
.sec-funzioni{max-width:var(--wrap);margin:0 auto;padding:70px 40px}
.head-funzioni{text-align:center;max-width:660px;margin:0 auto 44px}
.fn-panel{background:#fff;border-radius:18px;padding:40px}
.fn-points{display:grid;grid-template-columns:1fr 1fr;gap:22px 40px}
.fn-point{display:flex;align-items:flex-start;gap:12px}
.fn-point .ico-check{margin-top:4px}
/* only the tab's own panel is shown; the others carry [hidden] */
.fn-panel[hidden]{display:none}
.fn-point-t{font-size:15px;font-weight:700;letter-spacing:-.01em;line-height:1.4}
.fn-point-d{margin:5px 0 0;font-size:14px;line-height:1.55;color:rgba(11,18,32,.6)}

/* ---------- VERSIONI + COMPARISON MATRIX ---------- */
.sec-versioni{max-width:var(--wrap);margin:0 auto;padding:70px 40px}
.head-versioni{text-align:center;max-width:660px;margin:0 auto 44px}
.duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* the two bricks stacked on the left, an image slot two bricks tall on the right (.span-img;
   pratiche-auto's Formazione e assistenza); on mobile the image follows them */
.duo-grid--img .brick{grid-column:1}
@media(max-width:880px){.duo-grid--img .brick,.duo-grid--img .span-img{grid-column:auto;grid-row:auto}}
.versioni-duo{margin-bottom:12px}
.vers-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-dark);background:var(--accent-tint);padding:5px 11px;border-radius:7px;margin-bottom:16px}
/* the first / lighter of two versions (Leonardo Net Light, GDPR Pratico Base): brand grey,
   the fuller one keeps the accent — badges and their ticks alike */
.vers-badge--base{color:#fff;background:#495061}
/* No overflow:hidden here — it would turn .cmp into a clipping container and
   break the sticky header. Every row, the header included, is its own white card
   in the tray, 6px apart (as gdpr-pratico.html's table) — no separator lines. */
.cmp-head,.cmp-row{display:grid;grid-template-columns:1fr 132px 132px;align-items:center;gap:16px;padding:14px 22px;background:#fff;border-radius:12px}
/* the header sticks under the bars inside a 6px tray-grey frame (all around, like the tray's
   own edge), so rows pass under frame and header alike; it stops 18px down — 12px of clear
   space between the sub-nav and the top of the frame, so the two greys never touch (as .gdpr-cmp's) */
.cmp-head{position:sticky;top:calc(var(--nav-h,72px) + var(--subnav-h,48px) + 18px);z-index:5;margin-bottom:6px;box-shadow:0 0 0 6px var(--tray);font-size:14px;font-weight:800}
.cmp-head-v{text-align:center}
.cmp-head .vers-badge{margin:0}
.cmp-rows{display:flex;flex-direction:column;gap:6px}
.cmp-row{font-size:14px;font-weight:600}
.cmp-ico{justify-self:center}
.cmp-row > .cmp-ico:nth-child(2){fill:#495061}   /* the Light column */
.cmp-no{justify-self:center;width:12px;height:2px;border-radius:2px;background:rgba(11,18,32,.18)}
/* Collapsed by default: only the first 10 rows show. #cmp-toggle flips .open
   on .cmp, which also swaps the button's two labels — no JS builds markup.
   Rows live in .cmp-rows so :nth-child counts rows only, not the header. */
.cmp:not(.open) .cmp-rows .cmp-row:nth-child(n+11){display:none}
.cmp-more{display:flex;justify-content:center;padding:20px 0 4px}
.btn-more{gap:10px;font-size:14px;font-weight:700;color:#0B1220;background:#fff;border:1px solid rgba(11,18,32,.14);padding:13px 26px;border-radius:100vw}
.cmp-less-t{display:none}
.cmp.open ~ .cmp-more .cmp-more-t,.cmp.open ~ .cmp-more .ico-arrow{display:none}
.cmp.open ~ .cmp-more .cmp-less-t{display:inline}

/* ---------- MODULI AGGIUNTIVI (accordion, reuses .faq-*) ---------- */
.sec-moduli{max-width:var(--wrap);margin:0 auto;padding:70px 40px}
.head-moduli{text-align:center;max-width:680px;margin:0 auto 44px}
/* rich bodies (paragraphs + lists) inside the shared .faq-a */
.faq-a p{margin:0 0 14px}
.faq-a p:last-child{margin-bottom:0}
.faq-a ul{margin:14px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.faq-a ul + p{margin-top:14px}
.faq-a a{color:var(--accent);text-decoration:none;font-weight:600;word-break:break-word}

/* ---------- APP NET SERVICE IN CLOUD (dark band) ---------- */
.sec-app{max-width:var(--wrap);margin:0 auto;padding:70px 40px}
.app-band{background:#0B1220;border-radius:22px;padding:56px 50px;color:#fff;display:grid;grid-template-columns:1fr 1.25fr;gap:50px;align-items:center}
.app-eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:16px}
.app-title{margin:0 0 18px;font-size:38px;line-height:1.08;font-weight:800;letter-spacing:-.03em}
.app-desc{margin:0;font-size:16px;line-height:1.6;color:rgba(255,255,255,.6)}
/* the app features sit on .tile-grid/.tile (shared dark-band card pattern) */
.app-item-t{font-size:16px;font-weight:800;letter-spacing:-.02em;color:#fff}
.app-item-d{font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.6);margin-top:8px}
/* an icon badge opening a dark-band tile: the .vantaggio-ico shape, accent on the dark (gdpr-pratico's flessibile band) */
.tile-ico{width:44px;height:44px;border-radius:12px;background:rgba(var(--accent-rgb),.18);color:color-mix(in srgb,var(--accent) 60%,#fff);display:flex;align-items:center;justify-content:center;margin-bottom:18px}

/* ---------- FORMAZIONE + ASSISTENZA ---------- */
.sec-support{max-width:var(--wrap);margin:0 auto;padding:70px 40px}
.head-support{text-align:center;max-width:660px;margin:0 auto 44px}

/* ---------- COSTI DI INSTALLAZIONE ---------- */
.sec-costi{max-width:var(--wrap);margin:0 auto;padding:70px 40px}
.head-costi{max-width:600px;margin-bottom:40px}
.costi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
/* the closing note uses the shared .box-note strip */

/* the two kinds of support, listed under the Assistenza intro */
.support-list{margin-top:16px}
.support-list .grp-item{color:rgba(11,18,32,.6)}
.support-list strong{color:#0B1220}

/* ---------- SERVIZI CORRELATI ---------- */
.sec-related{max-width:var(--wrap);margin:0 auto;padding:70px 40px}
.head-related{text-align:center;max-width:660px;margin:0 auto 44px}
/* Both cards are equal height (grid stretch), so making them flex columns and
   pushing the link (.svc-link--card, margin-top:auto) lands the two "Scopri" links on the
   same line whatever the descriptions above them do. Scoped to this section:
   .brick elsewhere holds an inline .vers-badge that flex would stretch.
   The whole brick is the link; padding-top (not margin) guarantees a gap
   when a description is long enough to fill the card. */
.sec-related .brick{display:flex;flex-direction:column}
.sec-related .brick .svc-link--card{padding-top:18px}
.head-also{margin:88px 0 28px;font-size:22px;font-weight:800;letter-spacing:-.02em;text-align:center}
.also-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.also-card{text-decoration:none;color:inherit;background:#fff;border-radius:16px;padding:28px 30px;display:flex;flex-direction:column;gap:8px;min-height:150px}
.also-title{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em}
.also-desc{margin:0;font-size:13.5px;line-height:1.55;color:rgba(11,18,32,.6)}

/* ============================================================
   SOFTWARE AUTOSCUOLA (software-autoscuola.html)
   Same shell as the pratiche-auto product page; adds the pieces
   that page didn't need — media figures, a video lightbox, the
   store badges, the allievi map and the <dialog> contact form.
   ============================================================ */

/* ---------- media figures (screenshots / logos) ---------- */
.shot{background:#fff;border-radius:18px;padding:22px;display:flex;align-items:center;justify-content:center}
.shot img{display:block;max-width:100%;height:auto;border-radius:10px}
/* Full-bleed variant for photographs: no white plate, and the image fills
   its grid cell so it matches the height of whatever sits beside it.
   (App screenshots keep plain .shot — they need the white background.) */
.shot--bare{background:none;padding:0;overflow:hidden;display:block}
.shot--bare img{width:100%;height:100%;object-fit:cover;border-radius:0}
.shot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:12px}
.shot-grid:last-child{margin-bottom:0}
/* a product/brand logo sitting above a block of copy */

/* ---------- video: poster buttons + <dialog> lightbox ---------- */
/* 12px below, so a following .box-note sits on it exactly like .costi-grid
   does on the pratiche-auto page — the gap is always the preceding element's */
.video-hero{position:relative;display:block;width:100%;padding:0;border:none;border-radius:18px;overflow:hidden;cursor:pointer;background:#0B1220;line-height:0;margin-bottom:12px}
.video-hero:last-child{margin-bottom:0}
.video-hero img{width:100%;height:auto;display:block;opacity:.92;transition:opacity .2s ease,transform .4s ease}
.video-strip{display:flex;gap:12px;overflow-x:auto;padding:2px;scrollbar-width:thin}
.video-tile{position:relative;flex:0 0 232px;padding:0;border:none;border-radius:14px;overflow:hidden;cursor:pointer;background:#0B1220;line-height:0}
.video-tile img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;opacity:.9;transition:opacity .2s ease,transform .4s ease}
.video-tile-cap{position:absolute;inset:auto 0 0 0;padding:26px 12px 10px;text-align:left;font-size:12px;font-weight:700;color:#fff;line-height:1.3;background:linear-gradient(to top,rgba(8,13,24,.9),rgba(8,13,24,0))}
/* play badge, centred over any poster */
.play-btn{position:absolute;top:50%;left:50%;translate:-50% -50%;width:62px;height:62px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 34px -10px rgba(var(--accent-rgb),.8);transition:transform .2s ease}
.video-tile .play-btn{width:42px;height:42px}
.play-btn svg{fill:#fff;margin-left:3px}
.video-tile .play-btn svg{width:12px}

/* shared lightbox/dialog shell */
/* overflow:visible so the close button, which sits outside the card, isn't
   clipped by the dialog box itself */
dialog.modal{border:none;padding:0;background:transparent;overflow:visible;max-width:min(1080px,92vw);width:100%}
dialog.modal::backdrop{background:rgba(8,13,24,.72);backdrop-filter:blur(4px)}
.modal-card{background:#fff;border-radius:22px;padding:14px;position:relative}
.modal-close{position:absolute;top:-14px;right:-14px;z-index:2;width:42px;height:42px;border-radius:50%;background:#0B1220;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;line-height:1;cursor:pointer;border:none}
.modal-frame{aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#000}
.modal-frame iframe{width:100%;height:100%;border:0;display:block}

/* ---------- fn-points as separate cards (autoscuola only) ----------
   The pratiche-auto Funzioni tabs keep the single white .fn-panel; here each
   point is its own white card sitting directly in the grey .box, so the
   screenshots, the features and the store strip read as one tray. */
.fn-points--cards{gap:12px;margin-bottom:12px}
.fn-points--cards:last-child{margin-bottom:0}
.fn-points--cards .fn-point{background:#fff;border-radius:16px;padding:26px 24px}
.fn-points--cards .fn-point-t{font-weight:800}

/* ---------- store badges ----------
   Full-width white strip closing the tray (same idiom as .box-note). */
.store-row{background:#fff;border-radius:16px;padding:22px 26px;display:flex;flex-wrap:wrap;align-items:center;gap:18px}
.store-row img{height:52px;width:auto;display:block}
.store-web{font-size:14px;color:rgba(11,18,32,.6)}
.store-web a{color:var(--accent);text-decoration:none;font-weight:700}

/* ---------- Nuovi Allievi (counter + map) ---------- */
.allievi-head{text-align:center;max-width:760px;margin:0 auto 40px}
.allievi-n{font-size:clamp(48px,7vw,86px);line-height:1;font-weight:800;letter-spacing:-.04em;color:var(--accent)}
.allievi-cap{margin:12px 0 0;font-size:20px;font-weight:700;letter-spacing:-.01em}
.map-wrap{position:relative;border-radius:18px;overflow:hidden;background:#fff}
.map-search{position:relative;z-index:2;padding:14px}
.map-input{width:100%;background:#f4f5f8;border:none;border-radius:14px;padding:20px 24px;font-size:16px;font-family:inherit;color:#0B1220;outline:none}
.map-canvas{height:520px;background-image:repeating-linear-gradient(135deg,rgba(var(--accent-rgb),.08) 0 11px,rgba(var(--accent-rgb),.03) 11px 22px);display:flex;align-items:center;justify-content:center}
/* the placeholder label disappears as soon as the Maps script paints the canvas */
.map-note{font:500 11px ui-monospace,Menlo,monospace;letter-spacing:.05em;color:rgba(11,18,32,.6);text-transform:uppercase;text-align:center;padding:0 24px}

/* ============================================================
   LA NUOVA GUIDA (la-nuova-guida.html)
   The Autoscuola product page rebuilt on the client's new copy
   (software-autoscuola.html stays as the previous version). Same
   shell and components; additions below are the opening numbers,
   the profiles list, the quiz intro strip and the 3-up Didattica.
   ============================================================ */
/* two figures opening the page: the shared .number-card, with long captions */
.lng-numbers .number-card{padding:38px 34px 34px}
.lng-numbers .number-l{max-width:46ch;margin-inline:auto;font-weight:500;line-height:1.55}
.lng-numbers .number-l strong{color:#0B1220;font-weight:700}
.lng-presenza-head{margin-top:70px}
.map-wrap + .box-note{margin-top:12px}
.lng-link{color:var(--accent);font-weight:700;text-decoration:none}
/* the profiles list, in a white card on the right of the intro */
.lng-profiles-t{margin:0;font-size:15.5px;line-height:1.55;color:rgba(11,18,32,.6)}
.lng-profiles-t strong{color:#0B1220}
.lng-profiles{margin-top:16px}
/* the strip between the screenshots and the four features */
.quiz-intro{margin-bottom:12px}
/* the line above the store badges takes the full row */
.store-lead{flex-basis:100%;margin:0;font-size:15px;line-height:1.55;color:rgba(11,18,32,.6)}
.store-lead strong{color:#0B1220}
.psp-lead{margin-bottom:16px}
/* nine Didattica points: three per row, so none is left alone */
.fn-points--3{grid-template-columns:repeat(3,1fr)}

/* ============================================================
   INFOCAMERE TELEMACO (infocamere-telemaco.html)
   Same shell as the other two product pages; adds the registry-field
   chips, the three-up audience cards and the tutorial link list.
   ============================================================ */
/* the 8 Registro Imprese fields — short labels, so small chips beat cards */
/* heading on the page background at the left, the grey tray at the right —
   the tray wraps only the card, not the copy */
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;margin-bottom:28px}
.split-grid:last-child{margin-bottom:0}
/* Heading on row 1 (left only); both paragraphs share row 2, so the right-hand
   copy starts level with the left one instead of being centred against the
   whole block. row-gap:0 because .sec-title carries its own bottom margin. */
.overview-grid--rows{align-items:start;row-gap:0}
.overview-grid--end{align-items:end}   /* the right-hand copy level with the foot of the left (pratiche-auto overview) */
/* …in the two-row layout only the right-hand paragraph drops to the foot of the left one */
.overview-grid--rows.overview-grid--end{align-items:start}
.overview-grid--rows.overview-grid--end .overview-desc{align-self:end}
.overview-grid--rows .sec-title{grid-column:1;grid-row:1}
.overview-grid--rows .sec-sub{grid-column:1;grid-row:2}
.overview-grid--rows .overview-desc{grid-column:2;grid-row:2}
.info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
/* the intro strip and the chips are separate blocks in the tray */
.box-note + .info-grid{margin-top:12px}
.info-chip{background:#fff;border-radius:14px;padding:18px 20px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:11px}
/* tutorial links: numbered full-width grey rows in the white card (the .sol-link look:
   number + title + round ↗), 6px apart, no separator lines */
.tut-list{display:grid;gap:6px}
.tut-item{display:flex;align-items:center;gap:12px;background:#f5f7fb;border-radius:10px;padding:5px 5px 5px 8px;font-size:14.5px;font-weight:600;line-height:1.4;color:#0B1220;text-decoration:none;transition:background .15s ease,color .15s ease}
.tut-item > span:nth-child(2){flex:1;text-wrap:balance}   /* the long first title breaks into even lines */
.tut-n{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--accent-dark);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700}
.tut-item .solution-ico{width:28px;height:28px;background:#fff;transition:background .15s ease,color .15s ease}
.tut-item .ico-ne{width:9px;height:9px}
.btn-tut{margin-top:22px;gap:10px;font-size:14px;font-weight:700;color:#fff;background:#495061;padding:14px 26px;border-radius:100vw}

/* ---------- grouped check lists + three-up audience cards ---------- */
.grp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grp-grid--4{grid-template-columns:repeat(4,1fr)}
.grp{background:#fff;border-radius:16px;padding:28px 26px}
.grp-t{margin:0 0 16px;font-size:19px;font-weight:800;letter-spacing:-.02em}  /* same look as .also-title */
.grp-list{display:flex;flex-direction:column;gap:12px}
.grp-item{display:flex;align-items:flex-start;gap:11px;font-size:14px;line-height:1.5}
.grp-item .ico-check{margin-top:3px}
.grp-item .check{margin-top:4px}
/* homepage clusters: titles always shown, check-lists slide open together
   (0fr -> 1fr row), toggled by the centred .more-toggle below the grid */
.grp-grid--4 .grp-t{margin:0;line-height:1.15}
.grp-collapse{display:grid;grid-template-rows:0fr;margin-top:0;transition:grid-template-rows .35s ease,margin-top .35s ease}
.grp-collapse > .grp-list{overflow:hidden;min-height:0;visibility:hidden;transition:visibility .35s}
.grp-grid.open .grp-collapse{grid-template-rows:1fr;margin-top:16px}
.grp-grid.open .grp-collapse > .grp-list{visibility:visible}
.grp-grid--4{margin-bottom:12px}
.more-toggle{display:flex;justify-content:center;align-items:center;width:46px;height:46px;margin:0 auto;padding:0;border-radius:50%;background:#fff;color:var(--accent)}
/* plus drawn from two bars; the vertical one folds away into a minus */
.more-ico{position:relative;width:16px;height:16px}
.more-ico::before,.more-ico::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2px;border-radius:2px;background:currentColor;transition:rotate .3s ease,opacity .3s ease}
.more-ico::after{rotate:90deg}
.more-toggle[aria-expanded="true"] .more-ico::after{rotate:0deg;opacity:0}

/* ---------- contact dialog ---------- */
dialog.modal-form{max-width:min(720px,94vw)}
.modal-form .modal-card{padding:0;border-radius:22px}
.form-head{padding:34px 40px 0}
.form-head-t{margin:0 0 8px;font-size:26px;font-weight:800;letter-spacing:-.025em}
.form-head-d{margin:0;font-size:15px;line-height:1.55;color:rgba(11,18,32,.6)}
.modal-form .contact-form{padding:26px 40px 34px;max-height:70vh;overflow-y:auto;border-radius:0 0 22px 22px}

@media(max-width:880px){
  .shot-grid{grid-template-columns:1fr 1fr!important}
  .grp-grid,.split-grid{grid-template-columns:1fr!important}
  /* single column: the explicit row placement would strand the paragraphs */
  .overview-grid--rows .sec-title,.overview-grid--rows .sec-sub,.overview-grid--rows .overview-desc{grid-column:1;grid-row:auto}
  .overview-grid--rows{row-gap:14px}
  .split-grid{gap:22px;margin-bottom:22px}
  .info-grid{grid-template-columns:1fr 1fr!important}
  .map-canvas{height:380px}
  .video-tile{flex-basis:180px}
  .form-head{padding:26px 24px 0}
  .modal-form .contact-form{padding:20px 24px 26px}
  .modal-close{top:-10px;right:-6px}
}
@media (hover: hover) and (pointer: fine){
  .video-hero:hover img,.video-tile:hover img{opacity:1;transform:scale(1.03)}
  .video-hero:hover .play-btn,.video-tile:hover .play-btn{transform:scale(2.0)}
}
@media (prefers-reduced-motion: reduce){
  .video-hero img,.video-tile img,.play-btn,.subnav{transition:none}
  .grp-collapse,.grp-collapse > .grp-list,.more-ico::before,.more-ico::after{transition:none}
}

/* ============================================================
   ASSISTENZA — "Angeli dell'Assistenza" landing (assistenza.html)
   The bolder page: the ground inverts to navy at the hero and again
   at the team, the stat pills are the site's 100vw-radius pill blown
   up to display size, and the reviews drift. Everything is built from
   existing tokens (#0B1220, var(--accent*), .box, .team-card) pushed
   harder — no new visual vocabulary.
   ============================================================ */

/* ---------- dark hero + halo ---------- */
.hero-ang{position:relative;overflow:hidden;background:#0B1220;color:#fff;text-align:center;padding:110px 40px 120px;isolation:isolate}
.header-floating .hero-ang{padding-top:calc(var(--nav-h,72px) + 90px)}
/* concentric accent arcs behind the type — inline SVG, so it retints with the theme */
.hero-halo{position:absolute;top:50%;left:50%;translate:-50% -50%;width:min(1100px,140%);height:auto;z-index:-1;opacity:.55;pointer-events:none}
.hero-halo circle,.hero-halo ellipse{fill:none;stroke:var(--accent)}
/* accent bloom washing up behind the halo */
.hero-ang::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(60% 55% at 50% 42%,rgba(var(--accent-rgb),.42) 0%,rgba(var(--accent-rgb),0) 70%)}
.hero-ang .hero-inner{padding-top:0;position:relative}
.hero-ang-title{margin:0 auto 22px;max-width:16ch;font-size:clamp(44px,7vw,88px);line-height:.98;font-weight:800;letter-spacing:-.04em}
.hero-ang-sub{margin:0 auto 38px;max-width:600px;font-size:18px;line-height:1.55;color:rgba(255,255,255,.65)}
/* photo ground (images/hero/hero-angeli.png): the hero turns light like the inner
   pages' .hero-product--img — 65% white layer, the image replacing halo + bloom, and
   the ::before becomes the 3px blur + bottom fade to white. Copy goes ink, the light
   .accent-2 back to the accent */
.hero-ang--img{--hero-img:url(images/hero/hero-angeli.png);background:linear-gradient(rgba(255,255,255,.65),rgba(255,255,255,.65)),var(--hero-img) center/cover no-repeat;color:#0B1220}
.hero-ang--img .hero-halo{display:none}
.hero-ang--img::before{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:linear-gradient(rgba(255,255,255,0) 60%,#fff);pointer-events:none}
.hero-ang--img .accent-2{color:var(--accent)}
.hero-ang--img .hero-ang-sub{color:rgba(11,18,32,.65)}
/* the Angeli wings trailing the mouse over the word "Angeli" in the hero ([data-wings]; the whole hero keeps the default cursor) (after chi-siamo's .polo-peek): one
   fixed element moved by the page script with a soft lag, up-right of the cursor and
   under the copy (z-index 1 vs 2; elsewhere site.js adds it at the end of <body>); an accent badge with the white wings that pops in
   from a small tilted scale. Hidden over the buttons. Mouse only */
.hero-ang .hero-inner{z-index:2}
.hero-ang{cursor:default}
[data-wings]{cursor:default}   /* every word with the popover: never the text cursor… */
a[data-wings],a [data-wings]{cursor:pointer}   /* …but a link, or a word inside one, keeps the pointer */
.wings-peek{position:fixed;top:0;left:0;z-index:1;pointer-events:none;will-change:transform}
.wings-peek-badge{display:flex;align-items:center;justify-content:center;width:64px;height:64px;border: 4px solid #fff;border-radius:50%;background:var(--accent);color:#fff;box-shadow:0 12px 30px rgba(var(--accent-rgb),.35);opacity:0;transform:scale(.6) rotate(-12deg);transition:opacity .2s ease,transform .35s cubic-bezier(.34,1.56,.64,1)}
.wings-peek-badge svg{display:block;width:40px;height:40px}
.wings-peek.is-on .wings-peek-badge{opacity:1;transform:none}
/* medium (data-wings="md", 48px) and small (data-wings="sm", 32px, for running text);
   the script scales the offset with the badge */
.wings-peek--md .wings-peek-badge{width:48px;height:48px;border-width:3px;box-shadow:0 9px 22px rgba(var(--accent-rgb),.35)}
.wings-peek--md .wings-peek-badge svg{width:30px;height:30px}
.wings-peek--sm .wings-peek-badge{width:32px;height:32px;border-width:2px;box-shadow:0 6px 15px rgba(var(--accent-rgb),.35)}
.wings-peek--sm .wings-peek-badge svg{width:20px;height:20px}
@media (hover: none),(pointer: coarse){.wings-peek{display:none}}

/* ---------- figures (99,1% / 4,9/5 / 8 min) ---------- */
/* two columns in a grey tray: the site's figure cards (.numbers-grid / .number-card,
   as on the homepage) stacked + the source note on the left, an image on the right */
/* top 40px (was 90): the figures come sooner after the hero */
.sec-stats{max-width:var(--wrap);margin:0 auto;padding:40px 40px 70px}
.head-stats{text-align:center;max-width:660px;margin:0 auto 56px}
.numbers-grid + .box-note{margin-top:12px;justify-content:center;text-align:center}
.stats-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stats-split .numbers-grid{grid-template-columns:1fr}
.stats-visual{min-height:320px;border-radius:16px;background-color:#fff;background-image:repeating-linear-gradient(135deg,rgba(var(--accent-rgb),.08) 0 11px,rgba(var(--accent-rgb),.03) 11px 22px);display:flex;align-items:flex-end;justify-content:flex-end;padding:18px 22px}
/* the real photo (images/assistenza/angeli-1.jpg), cover-filling the slot as tall
   as the figures column */
.stats-visual--img{position:relative;overflow:hidden;padding:0;background:none}
.stats-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---------- testimonial marquee ---------- */
.sec-reviews{padding:70px 0 80px}
.head-reviews{text-align:center;max-width:660px;margin:0 auto 52px;padding:0 40px}
/* fade the rows out at both edges so cards enter and leave, not pop */
.marquee{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:16px;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
/* padding-right = the gap: the row is then exactly two sets wide, so -50% lands on the seam.
   The duration is set per row by the page script (fixed px/s); 64s without JS */
.marquee-row{display:flex;gap:16px;padding-right:16px;width:max-content;animation:marquee var(--marquee-dur,64s) linear infinite}
.marquee-row--rev{animation-direction:reverse}

/* the track holds two identical copies of the list, so translating by exactly
   -50% lands on the seam and the loop is invisible */
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* each review is its own frame: the article is a grey tray (the .box look — not the class,
   whose .box + .box stacking margin would step every card after the first), the white card inside */
.review{flex-shrink:0;width:396px;display:flex;background:var(--tray);border-radius:26px;padding:14px}
.review-card{flex:1;background:#fff;border-radius:16px;padding:30px 32px;display:flex;flex-direction:column}
.review-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}
.review-mark{font-size:42px;line-height:.7;font-weight:800;color:var(--accent)}
.review-date{font-size:12.5px;font-weight:600;color:var(--accent)}
.review-q{margin:0 0 22px;font-size:15.5px;line-height:1.6;color:#0B1220}
.review-who{margin-top:auto;padding-top:20px;display:flex;align-items:center;gap:12px}
.review-ini{width:42px;height:42px;border-radius:50%;background:var(--accent-tint);color:var(--accent-dark);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0}
.review-name{font-size:14.5px;font-weight:800}
.review-role{font-size:12.5px;color:rgba(11,18,32,.6)}

/* ---------- 6.000 aziende band ---------- */
.sec-aziende{max-width:var(--wrap);margin:0 auto;padding:20px 40px 90px}
.aziende-n{font-size:clamp(64px,10vw,132px);line-height:.92;font-weight:800;letter-spacing:-.05em;color:var(--accent)}
.aziende-t{margin:16px 0 0;font-size:26px;font-weight:800;letter-spacing:-.02em;color:#0B1220}
.aziende-d{margin:14px auto 0;max-width:560px;font-size:16px;line-height:1.6;color:rgba(11,18,32,.6)}
/* 6.000+ — two variants to compare (keep one): white cards in a grey tray,
   figure in accent, text in ink */
.variant-tag{margin:0 0 12px;text-align:center}
.aziende-card{background:#fff;border-radius:16px;padding:44px 40px}
.aziende-ico{width:20px;height:20px;flex-shrink:0;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* variant 2: centred figure card, then the four sectors as small cards */
.aziende-card--center{text-align:center;padding:56px 40px;margin-bottom:12px}
.aziende-sec-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.aziende-sec-card{background:#fff;border-radius:16px;padding:24px 20px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;font-size:15px;font-weight:700;line-height:1.3}
/* each sector card is the link to its Soluzioni page: the <li> only holds it, the <a> fills the cell */
.aziende-sec-cards > li{display:flex}
a.aziende-sec-card{flex:1;text-decoration:none;color:inherit;transition:transform .18s ease,box-shadow .18s ease,color .15s ease}   /* keeps .card-hover's lift transition */
.aziende-sec-ico{width:48px;height:48px;border-radius:50%;background:#495061;display:grid;place-items:center;transition:background .15s ease}
.aziende-sec-ico .aziende-ico{stroke:#fff}

/* ---------- dark team band ---------- */
/* the interviews as the site's news cards (.news-item) in a grey tray */
.sec-ang-team{max-width:var(--wrap);margin:0 auto;padding:70px 40px 90px}
.head-ang-team{text-align:center;max-width:640px;margin:0 auto 52px}
.ang-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:700px){.ang-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.ang-grid{grid-template-columns:repeat(5,1fr)}}
/* five across: the cards are narrow, so a squarer image, a smaller title and a
   tighter body than the news listing; "Leggi"/"Guarda" sits at the bottom */
/* the live photos (574×640, own rounded shape on a light ground); the duotone
   copy sits on top, transparent, and fades in on hover / keyboard focus */
/* .ang-item scope: outweighs .news-item-media{aspect-ratio:16/10}, declared later */
.ang-item .ang-media{position:relative;aspect-ratio:574/640;background:none}
.ang-media img{object-position:center top}  /* should anything crop, never the heads */
.ang-media-hover{position:absolute;inset:0;opacity:0;transition:opacity .3s ease}
.ang-item:focus-visible .ang-media-hover{opacity:1}
.ang-item .news-item-body{padding:18px 18px 20px}
.ang-item .news-item-title{font-size:16px;line-height:1.3;margin-bottom:16px}

/* Motion is decorative here — stop it entirely when the user asks for less. */
@media (prefers-reduced-motion: reduce){
  .marquee-row{animation:none}
  .marquee{-webkit-mask:none;mask:none;overflow-x:auto}
}
@media (hover: hover) and (pointer: fine){
  /* only the row under the cursor stops; the other keeps drifting */
  .marquee-row:hover{animation-play-state:paused}
}
/* Mobile: the marquee as a slider (assistenza.html's script adds .marquee--slider at
   ≤880px): no drift, no clones, no edge fade; a scroll-snapping row, swipe / mouse drag /
   the two .rev-nav arrows under it. The next card peeks in at the right edge. */
.rev-nav{display:none}
@media(max-width:880px){
  .marquee--slider{-webkit-mask:none;mask:none;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:22px;overscroll-behavior-x:contain;scrollbar-width:none}
  .marquee--slider::-webkit-scrollbar{display:none}
  .marquee--slider .marquee-row{animation:none;gap:12px;padding:0 22px}
  .marquee--slider .review{width:calc(100vw - 80px);max-width:380px;scroll-snap-align:start}
  .marquee--slider.is-drag{scroll-snap-type:none;user-select:none;cursor:grabbing}
  .marquee--slider + .rev-nav{display:flex;justify-content:center;gap:12px;margin-top:24px}
  .rev-arrow{display:grid;place-items:center;width:48px;height:48px;padding:0;border:none;border-radius:50%;background:var(--tray);color:var(--accent);cursor:pointer;transition:opacity .15s ease}
  .rev-arrow svg{width:16px;height:auto}
  .rev-prev svg{transform:scaleX(-1)}
  .rev-arrow:disabled{opacity:.4;cursor:default}
}
@media(max-width:880px) and (hover: hover) and (pointer: fine){
  .marquee--slider{cursor:grab}
}

/* ============================================================
   MODULO D'ORDINE (modulo-ordine.html)
   The form in the same banded style as registrati.html. Adds a file-upload control, which didn't
   exist before.
   ============================================================ */

/* --- file upload --- */
.up{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;background:#f4f5f8;border-radius:14px;padding:16px 18px 16px 22px;cursor:pointer}
.up + .up{margin-top:12px}
.up-k{font-size:14.5px;font-weight:600;color:#0B1220}
.up-file{display:block;margin-top:3px;font-size:12.5px;font-weight:500;color:rgba(11,18,32,.6)}
.up input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.btn-up{gap:9px;font-size:13px;font-weight:700;color:#0B1220;background:#fff;border:1px solid rgba(11,18,32,.14);padding:11px 20px;border-radius:100vw;white-space:nowrap}
.btn-up svg{width:13px;height:auto;fill:currentColor}
.up-note{margin:16px 0 0;font-size:12.5px;line-height:1.55;color:rgba(11,18,32,.6)}
/* the three uploads side by side (modulo-ordine.html): each row becomes a card,
   name + file name on top, Carica below; one column at ≤880px */
.up-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.up-grid .up{grid-template-columns:1fr;align-content:space-between;gap:16px;padding:18px 18px 18px 20px}
.up-grid .up + .up{margin-top:0}
.up-grid .up-file{overflow-wrap:anywhere}
.up-grid .btn-up{justify-self:start}

@media(max-width:880px){
  .up{grid-template-columns:1fr;gap:12px}
  .up-grid{grid-template-columns:1fr}
  .btn-up{justify-content:center}
}

/* ============================================================
   AREA PERSONALE (area-personale.html)
   The read view of the registration form: the same five bands,
   the same tray, but label/value rows instead of fields.
   ============================================================ */
/* --- signed-in nav slot: company name + dropdown --- */
.nav-user{position:relative}
.btn-user{gap:9px;font-size:13.5px;font-weight:700;color:#0B1220;background:#f4f5f8;border:1px solid rgba(11,18,32,.1);padding:10px 16px;border-radius:100vw;white-space:nowrap}
.btn-user .badge-dot{background:#1B7a3a}
.btn-user svg{width:9px;height:auto;fill:currentColor;transition:rotate .2s ease}
.nav-user[data-open] .btn-user svg{rotate:180deg}
.user-menu{position:absolute;top:calc(100% + 12px);right:0;translate:0 -6px;min-width:220px;display:grid;gap:6px;background:var(--tray);border-radius:20px;padding:8px;box-shadow:0 24px 50px -20px rgba(11,18,32,.4);opacity:0;visibility:hidden;transition:opacity .18s ease,translate .18s ease,visibility .18s;z-index:60}
.nav-user[data-open] .user-menu{opacity:1;visibility:visible;translate:0 0}
/* same grey tray + white link cards as the Soluzioni / Servizi .nav-dd-menu */
.user-menu a{display:block;background:#fff;border-radius:12px;padding:13px 16px;font-size:14.5px;font-weight:700;line-height:1.3;color:#0B1220;text-decoration:none;white-space:nowrap;transition:color .15s ease}

/* --- page head --- */
/* the page opens with the shared .hero-product (centred, gradient) — same as
   every other inner page — so the intro block needs no rules of its own */
.sec-area{max-width:var(--wrap);margin:0 auto;padding:20px 40px 90px}
/* the floating header is out of flow: reserve its height on top of the usual padding */
.header-floating .sec-area{padding-top:calc(var(--nav-h,72px) + 20px)}
/* modulo-ordine.html: no step rail above the title any more, so more room under the header */
.sec-area--order{padding-top:70px}
.header-floating .sec-area--order{padding-top:calc(var(--nav-h,72px) + 70px)}
.sec-area--order .area-sec-head{margin-bottom:44px}
/* after a .hero-product (area-personale) the hero already holds the spacing — and the
   floating header's room — so the section adds none (modulo-ordine has no hero) */
.hero-product + .sec-area,.header-floating .hero-product + .sec-area{padding-top:0}
/* section heading with its actions on the same line */
.area-sec-head{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:22px}
.area-sec-head .title-38{margin:0}
.area-actions{display:flex;gap:10px;flex-wrap:wrap}
.area-actions .btn{font-size:14px;padding:11px 18px;}
.area-orders-t{margin-top:70px}

/* --- label/value rows inside a .form-group band --- */
.data-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:13px 0}
.data-row + .data-row{border-top:0}
.data-k{font-size:14.5px;line-height:1.5;color:rgba(11,18,32,.6)}
.data-v{font-size:14.5px;line-height:1.5;font-weight:700;color:#0B1220;word-break:break-word}
.data-v--empty{font-weight:500;color:rgba(11,18,32,.6)}
/* consent state: granted reads as accent, withheld as a neutral grey chip */
.data-yes,.data-no{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:40px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:5px 10px;border-radius:7px}
.data-yes{color:var(--accent-dark);background:var(--accent-tint)}
.data-no{color:rgba(11,18,32,.6);background:#f4f5f8}

/* --- orders as cards --- */
.orders{display:flex;flex-direction:column;gap:12px}
.order{background:#fff;border-radius:16px;padding:24px 26px;display:grid;grid-template-columns:1fr auto auto auto;gap:22px;align-items:center}
.order-t{font-size:16px;font-weight:800;letter-spacing:-.015em}
.order-k{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(11,18,32,.6);margin-bottom:4px}
.order-v{font-size:14.5px;font-weight:600;color:#0B1220;white-space:nowrap}
.btn-dl{gap:9px;font-size:13px;font-weight:700;color:#fff;background:var(--accent);padding:11px 18px;border-radius:100vw;white-space:nowrap}
.btn-dl svg{rotate:90deg}

@media(max-width:880px){
  .sec-area{padding:10px 22px 60px}
  .header-floating .sec-area{padding-top:calc(var(--nav-h,72px) + 10px)}
  .sec-area--order{padding-top:40px}
  .header-floating .sec-area--order{padding-top:calc(var(--nav-h,72px) + 40px)}
  .sec-area--order .area-sec-head{margin-bottom:32px}
  .area-sec-head{flex-direction:column;align-items:stretch;gap:16px}
  .area-actions .btn{flex:1;justify-content:center}
  .data-row{grid-template-columns:1fr;gap:4px;padding:11px 0}
  .order{grid-template-columns:1fr auto;gap:16px 18px}
  .order-t{grid-column:1/-1}
  .btn-dl{grid-column:2}
}

/* ============================================================
   AUTH PAGES (login.html, registrati.html)
   No hero: these are tasks, not pitches. Login is a compact card
   centred in the viewport; registration is the same card language
   split into labelled groups so 17 fields stay navigable.
   ============================================================ */
.sec-auth{max-width:var(--wrap);margin:0 auto;padding:70px 40px 90px}
.header-floating .sec-auth{padding-top:calc(var(--nav-h,72px) + 70px)}
/* login only: centre the card in what's left of the viewport under the header */
.sec-auth--center{min-height:calc(100dvh - var(--nav-h,72px) - 150px);display:grid;place-items:center;align-content:center}
.auth-narrow{width:100%;max-width:520px;margin:0 auto}
.auth-wide{width:100%;max-width:860px;margin:0 auto}
.auth-card{background:#fff;border-radius:18px;padding:38px 40px}
.auth-t{margin:0 0 8px;font-size:32px;font-weight:800;letter-spacing:-.03em}
.auth-d{margin:0 0 28px;font-size:15px;line-height:1.6;color:rgba(11,18,32,.6)}
.auth-d a{color:var(--accent);text-decoration:none;font-weight:600}
.auth-alt{margin:22px 0 0;text-align:center;font-size:14.5px;color:rgba(11,18,32,.6)}
.auth-alt a{color:var(--accent);text-decoration:none;font-weight:700}
.auth-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-block:26px}
.auth-link{font-size:13.5px;color:rgba(11,18,32,.6)}
.auth-link a{color:var(--accent);text-decoration:none;font-weight:600}
.btn-auth{display:flex;justify-content:center;max-width:max-content;width:100%;font-size:15px;font-weight:700;color:#fff;background:var(--accent);padding:16px 80px;border-radius:100vw;margin-inline:auto;}

/* --- field groups (registration) --- */
.form-group{background:#fff;border-radius:16px;padding:30px 32px}
.form-group + .form-group{margin-top:12px}
.form-group-t{margin:0 0 20px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.form-group .field:last-child{margin-bottom:0}
.form-req{margin:16px 0 0;font-size:12.5px;color:rgba(11,18,32,.6)}
/* the required-fields note alone in its own card (modulo-ordine.html): no top margin, a slimmer card */
.form-group--note{padding-block:20px}
.form-group--note .form-req{margin:0}
#ordine-form > .box,
.auth-wide form > .box{margin-bottom:24px}  /* registrati + modifica-dati: gap above the submit button */
/* password field + show/hide toggle (modifica-password). The <button> sits beside the
   <label class="fld">, not inside it (a button can't be nested in a label), positioned over
   the field's right edge; the wrapper carries the .fld spacing so top:50% centres on the field */
.fld-pw{position:relative;margin-bottom:14px}
.fld-pw .fld{margin-bottom:0}
.fld-pw .field{padding-right:62px}
.pw-eye{position:absolute;top:50%;right:12px;translate:0 -50%;width:40px;height:40px;padding:0;border:none;border-radius:50%;background:transparent;color:rgba(11,18,32,.6);display:grid;place-items:center;cursor:pointer;transition:color .15s ease,background .15s ease}
.pw-eye svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pw-eye[aria-pressed="true"]{color:var(--accent)}
.pw-eye:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (hover: hover) and (pointer: fine){
  .pw-eye:hover{color:#0B1220;background:rgba(11,18,32,.06)}
}
.btn-auth--pw{margin-top:26px}
.btn-auth--short{padding-inline:50px}  /* one-word label (recupera-password: Invia) */

/* --- checkbox: one custom control, used plain and as a chip --- */
.chk{display:flex;align-items:flex-start;gap:12px;font-size:14px;line-height:1.6;color:rgba(11,18,32,.7);cursor:pointer}
/* .chk + .chk{margin-top:16px} */
.chk a{color:var(--accent);text-decoration:none;font-weight:600}
.chk input[type=checkbox]{appearance:none;-webkit-appearance:none;flex-shrink:0;width:20px;height:20px;margin:1px 0 0;border:1.5px solid rgba(11,18,32,.22);border-radius:6px;background:#fff;cursor:pointer;display:grid;place-content:center;transition:background .15s ease,border-color .15s ease}
/* tick is an SVG background, not a rotated ::after border — that landed on sub-pixel
   offsets and its centring shifted with the box's position on the page */
.chk input[type=checkbox]:checked{border-color:var(--accent);background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2l3.1 3L10.5 1.8' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 10px no-repeat}
.chk input[type=checkbox]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* chip variant for multi-select answers, matching the .chip look */
.chk-chips{display:flex;flex-wrap:wrap;gap:8px;margin: 0 0 16px;}
.chk-chip{align-items:center;gap:10px;font-size:13px;font-weight:600;background:#f5f7fb;border:1px solid rgba(11,18,32,.1);padding:10px 15px;border-radius:10px}
.chk-chip input[type=checkbox]{margin:0}  /* same box + tick as the consent rows; the chip centres it */
.chk-chip:has(input:checked){color:var(--accent-dark);background:var(--accent-tint);border-color:rgba(var(--accent-rgb),.3)}

@media(max-width:880px){
  .sec-auth{padding:40px 22px 60px}
  .header-floating .sec-auth{padding-top:calc(var(--nav-h,72px) + 40px)}
  .sec-auth--center{min-height:0}
  .auth-card,.form-group{padding:26px 24px}
  .form-group--note{padding-block:18px}
  .auth-t{font-size:27px}
}

/* ============================================================
   PAGOPA TASSE AUTO (pagopa-tasse-auto.html)
   Single-service page on the product shell: split overview (copy +
   check list), 2×2 benefits, Prepagato/Plafond bricks with .vers-badge,
   the dark .app-band for POS / Virtual POS, inline contact form.
   ============================================================ */
/* the second intro paragraph, under the sec-sub in the left column */
.tasse-desc{margin-top:18px}

/* ============================================================
   PAGOPA PRATICHE PRA (pagopa-pratiche-pra.html)
   Same shell as pagoPA Tasse Auto (and its .tasse-desc): split overview with
   the PRA module + STA procedures in a card, five .vantaggio features, Prepagato /
   Plafond, the dark .app-band for POS Xoldy, Assistenza in two rows, four
   reasons with icons, inline contact form with the homepage's Angelo note.
   ============================================================ */
/* bollini-dekra.html: the three bollini (Rosso, Giallo, Verde) in the overview card — discs
   in the stickers' own colours (component-local, content, not the accent), name beside */
.dekra-plates{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:12px}
.dekra-plate{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 10px;border-radius:999px;background:var(--tray);font-size:15px;font-weight:700}
.dekra-dot{width:32px;height:32px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 3px rgba(255,255,255,.55)}
.dekra-dot--red{background:#D7262B}
.dekra-dot--yellow{background:#F2C200}
.dekra-dot--green{background:#2E9B47}
/* certificazione-veicolo.html: the report preview slot, the tray's full width (1142×480 on
   desktop, 260px tall on phones), striped until the image arrives; as an <img> it cover-crops */
.cv-preview{display:flex;align-items:flex-end;justify-content:flex-end;height:480px;padding:18px 22px;border-radius:16px;background-color:#fff;background-image:repeating-linear-gradient(135deg,rgba(var(--accent-rgb),.08) 0 11px,rgba(var(--accent-rgb),.03) 11px 22px)}
img.cv-preview{display:block;width:100%;padding:0;object-fit:cover;background:none}
@media(max-width:600px){.cv-preview{height:260px}}
/* …and the pratico.it card: its mark (chi-siamo's inline SVG, own colour) over a round-arrow
   link, the whole card linking to pratico.it */
.cv-pratico{display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.pratico-logo{display:block;width:180px;height:auto}
/* pos-xoldy.html: the Xoldy mark (chi-siamo's inline SVG, its own black — never recoloured)
   on the overview's white card, above the line naming the Institute */
.xoldy-logo{display:block;width:150px;height:auto;margin:0 0 20px}
/* the 6th slot of the features grid: striped image placeholder, as tall as its row
   (373px wide on desktop, ~215px tall with the current copy, 180px at least);
   as an <img> later it cover-crops the same slot */
.vantaggio--img{display:flex;align-items:flex-end;justify-content:flex-end;min-height:180px;padding:18px 22px;background-color:#fff;background-image:repeating-linear-gradient(135deg,rgba(var(--accent-rgb),.08) 0 11px,rgba(var(--accent-rgb),.03) 11px 22px)}
img.vantaggio--img{display:block;width:100%;height:100%;padding:0;object-fit:cover;background:none}
/* the POS band's image slot, beside the Virtual POS tile (the tile grid's second column,
   ~278px wide on desktop; under it, full width, below 600px): the same stripes in white on
   the dark band, a fixed 260px tall; as an <img> it cover-crops */
.tile--img{display:flex;align-items:flex-end;justify-content:flex-end;height:260px;padding:18px 22px;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 11px,rgba(255,255,255,.02) 11px 22px)}
.tile--img .mono-tag{color:rgba(255,255,255,.45)}
img.tile--img{display:block;width:100%;padding:0;object-fit:cover;object-position:50% 20%;background:none}   /* 20%: the photo is near-square, keep its upper part */
/* tiles split 1 + 2: the first tile fills the left column across both rows, the other two
   stack on the right; an image slot there takes the height the first tile leaves (160px
   at least). One column below 600px, in markup order (pagopa-avvisi's POS band) */
@media(min-width:600px){
  .tile-grid--split > :first-child{grid-row:span 2}
  .tile-grid--split .tile--img{height:auto;min-height:160px}
  .tile-grid--split img.tile--img{height:100%;object-position:50% 50%}   /* fill the row, centred */
}

/* ============================================================
   GDPR PRATICO (gdpr-pratico.html)
   Single-service page on the product shell, from the client's spec:
   overview in two rows, Base / Evoluta cards + their comparison table,
   the six target activities, two phases, the dark .app-band for the
   "nel tempo" list, inline contact form.
   ============================================================ */
.gdpr-vers-list{margin-top:20px}
/* the version cards and the table share one tray: the cards carry the gap */
.gdpr-vers{margin-bottom:12px}
/* Base in brand grey (.vers-badge--base), Evoluta in the accent (the default .vers-badge /
   .ico-check): badges and ticks, in its card and in its table column */
.gdpr-vers--base .ico-check,.gdpr-cmp td:nth-child(2) .ico-check{fill:#495061}
/* comparison: a real table whose rows — the header row included — are white cards in
   the tray: border-spacing opens the 6px gaps (cancelled at the table's edges), no separator lines */
.gdpr-cmp{width:100%;border-collapse:separate;border-spacing:0 6px;margin:-6px 0;font-size:14px;line-height:1.4}
.gdpr-cmp th,.gdpr-cmp td{padding:14px 22px;text-align:center;vertical-align:middle}
.gdpr-cmp th,.gdpr-cmp td{background:#fff}
/* the header row sticks like Leonardo Net's (.cmp-head): in a 6px tray-grey frame, 12px clear
   under the sub-nav. Built from offset shadows per cell — above and below on every cell, the
   outer side on the first and last — since a spread would paint over the neighbouring cell */
.gdpr-cmp thead th{position:sticky;top:calc(var(--nav-h,72px) + var(--subnav-h,48px) + 18px);z-index:5;box-shadow:0 -6px 0 var(--tray),0 6px 0 var(--tray)}
.gdpr-cmp thead th:first-child{box-shadow:0 -6px 0 var(--tray),0 6px 0 var(--tray),-6px 0 0 var(--tray)}
.gdpr-cmp thead th:last-child{box-shadow:0 -6px 0 var(--tray),0 6px 0 var(--tray),6px 0 0 var(--tray)}
.gdpr-cmp thead .vers-badge{margin:0}
.gdpr-cmp thead th:first-child{text-align:left;font-weight:800}
.gdpr-cmp tbody th{text-align:left;font-weight:600}
.gdpr-cmp tr > :first-child{border-radius:12px 0 0 12px}
.gdpr-cmp tr > :last-child{border-radius:0 12px 12px 0}
.gdpr-cmp th:first-child{width:60%}
.gdpr-cmp .ico-check{display:inline-block;vertical-align:middle}
.gdpr-no{color:rgba(11,18,32,.35);font-weight:700}
/* four title-only tiles: two by two */
.gdpr-tiles{grid-template-columns:1fr 1fr}
@media(max-width:880px){
  .gdpr-cmp th,.gdpr-cmp td{padding:12px 14px}
}
@media(max-width:600px){
  .gdpr-tiles{grid-template-columns:1fr}
  .gdpr-cmp{font-size:13px}
  .gdpr-cmp th,.gdpr-cmp td{padding:12px 10px}
  .gdpr-cmp th:first-child{width:auto}
}

/* ============================================================
   UNIPOLMOVE-TELEPEDAGGIO.HTML — single-service page (client spec): the overview in a tray, how it works + icon cards, the two targets, the materials band
   with the flyers, Dove sono i Punti, the link to UnipolMove's parking list, contact form.
   ============================================================ */
/* the two targets: the spec's bullet verbatim, its first word bold */
.unipol-target{margin:0;font-size:15.5px;line-height:1.55;color:rgba(11,18,32,.62)}
.unipol-target strong{color:#0B1220;font-weight:800}
.unipol-tiles .app-item-t{text-wrap:balance}   /* the four materials break into even lines */
/* the three flyers across the dark band, under the copy and the tiles: each a tile with the
   preview and its title (no link) */
.unipol-flyers{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.unipol-flyer{display:flex;flex-direction:column;gap:14px;padding:14px 14px 18px}
.unipol-flyer-img{display:block;width:100%;height:auto;aspect-ratio:1414/2000;border-radius:10px;background:rgba(255,255,255,.06)}
.unipol-flyer-t{padding:0 6px;font-size:16px;font-weight:800;letter-spacing:-.02em}
@media(max-width:880px){.unipol-flyers{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.unipol-flyers{grid-template-columns:1fr}}

/* ============================================================
   CHI SIAMO (chi-siamo.html)
   Its own identity: a dark hero with the network motif and the
   logo as title (the homepage reuses it, with the numbers tray
   riding up over its bottom edge), an oversized one-sentence
   mission, and a dark contact band closing the page.
   ============================================================ */
.hero-about{position:relative;isolation:isolate;overflow:hidden;background:#0B1220;color:#fff;text-align:center;padding:132px 40px 170px}
.header-floating .hero-about{padding-top:calc(var(--nav-h,72px) + 110px)}
/* A network, not a halo: a hub with two rings of nodes — "reti di operatori",
   and an echo of the Sermetra group diagram further down the page.
   Inline SVG stroked with var(--accent), so it retints with the theme. */
.hero-net{position:absolute;top:50%;left:50%;translate:-50% -50%;width:min(1150px,150%);height:auto;z-index:-1;opacity:.55;pointer-events:none}
.hero-net circle,.hero-net line,.hero-net polygon{fill:none;stroke:var(--accent)}
.hero-net .node{fill:var(--accent);stroke:none}
.hero-about::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(58% 52% at 50% 46%,rgba(var(--accent-rgb),.4) 0%,rgba(var(--accent-rgb),0) 70%)}
.hero-about-title{margin:0 0 20px;font-size:clamp(48px,8vw,96px);line-height:.95;font-weight:800;letter-spacing:-.045em}
.hero-about-sub{margin:0 auto;max-width:760px;font-size:19px;line-height:1.6;color:rgba(255,255,255,.72)}
/* homepage variant: longer headline */
.hero-about-title--home{margin:0 auto 22px;max-width:860px;font-size:clamp(32px,5vw,42px);line-height:1.15;letter-spacing:-.035em}
/* the brand mark, large. Its colours are the logo's own (as in netservice-logo.svg),
   on any ground: never recolour it, tint it or change its opacity */
.hero-logo{display:block;width:min(400px,78vw);height:auto;margin:0 auto 34px}
.hero-logo .logo-ink{fill:#495061}
.hero-logo .logo-soft{fill:#b5bac2}
/* chi-siamo: the logo is the page title, bigger, and the hero closes on its own
   (no numbers tray riding up over it) */
.hero-about-logo{margin:0}
.hero-logo--lg{width:min(620px,82vw);margin-bottom:30px}
.hero-about--solo{padding-bottom:132px}
/* light ground (chi-siamo, homepage): the logo keeps its own greys, so the hero turns light
   instead — tray grey, network and glow toned down so logo + copy stay readable */
.hero-about--light{background:#f5f7fb;color:#0B1220}
.hero-about--light::before{background:radial-gradient(58% 52% at 50% 46%,rgba(var(--accent-rgb),.12) 0%,rgba(var(--accent-rgb),0) 70%)}
.hero-about--light .hero-net{opacity:.22}
.hero-about--light .hero-about-sub{color:rgba(11,18,32,.7)}
/* photo ground (images/hero/, homepage + chi-siamo): the page modifier sets --hero-img,
   the image takes the network motif's place; a tray-grey wash, stronger at the centre,
   keeps logo + copy readable */
.hero-about--img{background:radial-gradient(60% 55% at 50% 45%,rgba(245,247,251,.8) 0%,rgba(245,247,251,.5) 100%),var(--hero-img) center/cover no-repeat}
.hero-about--img .hero-net{display:none}
/* blur the photo behind the copy: a backdrop-filter layer over the section's own
   background (+ the ::before glow), under the content; it also fades the hero's
   bottom 40% to white, into the page */
.hero-about--img::after{content:"";position:absolute;inset:0;z-index:-1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none;background:linear-gradient(rgba(255,255,255,0) 60%,#fff)}
/* homepage image v2 (trial); to go back, swap for the v1 line below (and update the
   <link rel="preload"> in index.html to match) */
.hero-about--home{--hero-img:url(images/hero/hero-home-v2.png)}
/* .hero-about--home{--hero-img:url(images/hero/hero-home.png)} */
.hero-about--chi-siamo{--hero-img:url(images/hero/hero-chi-siamo.png)}
/* chi-siamo: a lighter white layer than the homepage */
.hero-about--img.hero-about--chi-siamo{background:radial-gradient(60% 55% at 50% 45%,rgba(245,247,251,.2) 0%,rgba(245,247,251,.05) 100%),var(--hero-img) center/cover no-repeat}
/* inner pages with an image hero (faq, soluzioni, contatti + chi-siamo's .hero-about):
   one fixed height on desktop, copy centred in it, so the content below starts at the
   same point whatever the length of the title / subtitle. The floating header overlays
   the hero, so there the height grows by the header (padding-top: 130px vs nav-h + 90px).
   Kept after the .hero-about rules so it wins on order over .hero-about--solo and
   .header-floating .hero-about. The section after the hero opens at 70px on all four
   (.sec-sol, .sec-faq--page, .sec-ct, .sec-polo), 50px on mobile. */
@media(min-width:881px){
  :is(.hero-product--img,.hero-about--chi-siamo){display:flex;flex-direction:column;min-height:560px;padding-top:130px;padding-bottom:120px}
  .header-floating :is(.hero-product--img,.hero-about--chi-siamo){padding-top:calc(var(--nav-h,72px) + 90px);min-height:calc(var(--nav-h,72px) + 520px)}
}
/* 1st-level pages (chi-siamo, soluzioni, faq, contatti — not the Soluzioni 2° livello
   .hero-product--sol): a shorter fixed height, so the content arrives sooner.
   Same shared height on all four; the floating variant again adds nav-h - 40px */
@media(min-width:881px){
  :is(.hero-product--img:not(.hero-product--sol),.hero-about--chi-siamo){min-height:440px;padding-top:100px;padding-bottom:90px}
  .header-floating :is(.hero-product--img:not(.hero-product--sol),.hero-about--chi-siamo){padding-top:calc(var(--nav-h,72px) + 60px);min-height:calc(var(--nav-h,72px) + 400px)}
  /* …and the section right after (.sec-sol, .sec-faq--page, .sec-ct, .sec-polo) opens at 35px, not 70 */
  :is(.hero-product--img:not(.hero-product--sol),.hero-about--chi-siamo) + section{padding-top:35px}
}
/* software-gestionale-pratiche-auto.html: the hero split in two sections.
   .hero-band — the image alone, clear (no white layer, no blur), a fade to white at its
   foot; the floating header overlays it; the breadcrumb sits 8px under the header.
   .hero-product--plain — the copy, on white, right under it (no top room for the header,
   no absolute breadcrumb). */
.hero-band{position:relative;isolation:isolate;height:500px;background:var(--hero-img) top/cover no-repeat}
/* white fade at the foot — off on request
.hero-band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(255,255,255,0) 55%,rgba(255,255,255,.75) 68%,#fff 88%);pointer-events:none} */
.hero-band--leonardo{--hero-img:url(images/software-gestionale-pratiche-auto/hero.jpg)}
.hero-band .crumb{position:absolute;top:8px;left:16px;right:16px;margin:0 auto}
.header-floating .hero-band .crumb{top:calc(var(--nav-h,72px) + 8px)}
/* same space above the title as below the buttons: 80px top, no bottom padding, the
   next section (.sec-overview) opening at its own 80px */
.hero-product--plain,.header-floating .hero-product--plain{background:#fff;padding-top:80px;padding-bottom:0}
@media(max-width:880px){
  .hero-band{height:280px}
  .hero-product.hero-product--plain,
  .header-floating .hero-product.hero-product--plain{padding-top:80px!important;padding-bottom:0!important}
}
/* homepage rhythm: every section after the hero sits 140px from the next
   (70 + 70), as on the product pages. Scoped so index_old.html and the other
   pages that share these sections keep their own spacing. */
.page-home :is(.sec-tabs,.sec-solutions,.sec-sfide,.sec-group,.sec-results,.sec-faq,.sec-cta,.sec-contact){padding-top:70px;padding-bottom:70px}
/* the numbers tray closes the hero, so it carries the first half of the gap */
.page-home .sec-numbers{padding-bottom:70px}

/* --- numbers, overlapping the hero --- */
.sec-numbers{position:relative;z-index:2;max-width:940px;margin:-92px auto 0;padding:0 40px}
.box--float{box-shadow:0 40px 80px -40px rgba(11,18,32,.55)}
.numbers-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.numbers-grid--2{grid-template-columns:1fr 1fr}   /* two figures (visure-pra's overview) */
/* …half a column wide, so the figure is smaller and stays on one line: up to 36px, ~27px on a
   1024px landscape tablet (where the card is ~160px wide inside), 26px at least */
.numbers-grid--2 .number-v{font-size:clamp(26px,2.6vw,36px);white-space:nowrap}
/* …figures stacked on the left, an image slot two cards tall on the right (pagopa-avvisi's Assistenza).
   .span-img is shared: the column-2 slot spanning two rows, also in .duo-grid--img */
.numbers-grid--img .number-card{grid-column:1}
.span-img{grid-column:2;grid-row:1/span 2;display:flex;align-items:flex-end;justify-content:flex-end;min-height:180px;padding:18px 22px;border-radius:16px;background-color:#fff;background-image:repeating-linear-gradient(135deg,rgba(var(--accent-rgb),.08) 0 11px,rgba(var(--accent-rgb),.03) 11px 22px)}
/* number-card radius */
.numbers-grid .span-img{border-radius:18px}
img.span-img{display:block;width:100%;height:100%;padding:0;object-fit:cover;background:none;contain:size}   /* size: the photo takes the two cards' height, never sets it */
.number-card{background:#fff;border-radius:18px;padding:34px 22px 30px;text-align:center}
.number-v{font-size:clamp(32px,3.4vw,44px);line-height:1;font-weight:800;letter-spacing:-.035em;color:var(--accent)}
/* fixed-width digits only on the figures that count up (homepage): no jitter while counting.
   Not on static figures — in this font tabular-nums also widens "," and "." (99,1% / 4,9/5) */
.number-v [data-count]{font-variant-numeric:tabular-nums}
.number-l{margin:12px 0 0;font-size:14px;line-height:1.35;font-weight:600;color:rgba(11,18,32,.6)}

/* --- mission: one sentence, given room to be a statement --- */
.sec-mission{max-width:var(--wrap);margin:0 auto;padding:110px 40px 100px;text-align:center}
.mission-eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin-bottom:26px}
.mission-t{margin:0 auto;max-width:980px;font-size:clamp(26px,3.2vw,42px);line-height:1.25;font-weight:800;letter-spacing:-.03em;text-wrap:balance}
.mission-rule{width:64px;height:4px;border-radius:4px;background:var(--accent);margin:38px auto 0}
.mission-d{margin:38px auto 18px;font-size:16.5px;line-height:1.55;color:rgba(11,18,32,.6)}
.mission-sectors{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:980px;margin:0 auto}
.mission-sectors .brick{display:flex;align-items:center;justify-content:center;padding:26px 22px}

/* --- polo telematico: heading left, statement right, straight on the background --- */
.sec-polo{max-width:var(--wrap);margin:0 auto;padding:70px 40px 100px}
.polo-grid{margin-bottom:0}
/* "Siamo" + scrolling words (after the "you can design. prototype. solve." pen):
   "Siamo" is sticky on the --polo-line line of the viewport; the list scrolls
   under it in normal flow. Its containing block is .polo-says, so it unpins by
   itself once the last word reaches it, and the page scrolls on. The words sit
   fairly close together (.5em). */
.polo-says{--polo-lh:1.1em;display:flex;align-items:flex-start;gap:.28em;font-size:clamp(26px,4vw,44px);line-height:var(--polo-lh);font-weight:800;letter-spacing:-.03em}
/* --polo-line: where "Siamo" pins, in % of the viewport height from the top.
   Sticky never lets it sit above that line, so while the block is higher up it
   gets pushed down beside a later word: the line must be no lower than where
   the block sits once the hero has scrolled away, or the effect starts while
   the hero is still leaving. */
.polo-says{--polo-line:36}
/* the whole Siamo block shows the arrow, never the text I-beam (the words are hover targets) */
.polo-says{cursor:default}
/* light grey = the "service" of the logo */
.polo-pre{position:sticky;z-index:2;top:calc(var(--polo-line) * 1vh - var(--polo-lh) / 2);margin:0;font:inherit;letter-spacing:inherit;color:#b5bac2}
/* words: .5em apart */
.polo-words{display:grid;gap:.5em;margin:0;padding:0;list-style:none}
/* the words are brand grey (#495061, the logo's "net") at rest; the one at the mouse turns accent (no scroll trigger
   any more — "Siamo" only sticks). Each word is as wide as its text, so the
   hover zone (the script's) ends at the longest word, not the empty row beside it */
.polo-words li{justify-self:start;position:relative;z-index:2;color:#495061;transition:color .3s ease,opacity .3s ease}
/* the hover image (.polo-peek, z-index 1) passes under every text of the section */
.polo-grid .overview-desc{position:relative;z-index:2}

.polo-words:has(.is-hot) li:not(.is-hot){opacity:.35}

/* --- chi siamo: text beside a vertical image (placeholder for now) --- */
.sec-profilo{max-width:var(--wrap);margin:0 auto;padding:0 40px 100px}
.split-grid--about{grid-template-columns:1.15fr 1fr;gap:64px}
.about-lead{margin:0 0 22px;font-size:clamp(22px,2.2vw,28px);line-height:1.3;font-weight:800;letter-spacing:-.02em}
.sec-profilo .overview-desc + .overview-desc{margin-top:16px}
.about-visual{aspect-ratio:4/5;border-radius:16px;background-color:#fff;background-image:repeating-linear-gradient(135deg,rgba(var(--accent-rgb),.08) 0 11px,rgba(var(--accent-rgb),.03) 11px 22px);display:flex;align-items:flex-end;justify-content:flex-end;padding:18px 22px}
/* the real photo in the same frame: block, cover-cropped to the 4:5 (1:1 on mobile) */
.about-img{display:block;width:100%;height:auto;padding:0;object-fit:cover}

/* --- gruppo / certificazioni plates --- */
.sec-gruppo,.sec-cert{max-width:var(--wrap);margin:0 auto;padding:0 40px 70px}
.head-gruppo{text-align:center;max-width:720px;margin:0 auto 44px}

/* logos: inline SVGs (client artwork), sized by width — the height follows the viewBox.
   The companies' widths are the ones they have in the live chart, which keeps its balance */
.soc-mark{display:block;height:auto;max-width:100%}
.soc-mark--holding{width:190px}
.soc-mark--net{width:143px}
.soc-mark--go{width:86px}
.soc-mark--xoldy{width:119px}
.soc-mark--wichee{width:131px}
.soc-mark--pratico{width:142px}

.soc-co{position:relative;z-index:1;display:flex;min-height:150px;background:#fff;border-radius:16px;
  box-shadow:0 18px 40px -18px rgba(73,80,97,.22),0 4px 10px -4px rgba(73,80,97,.06)}
/* the whole card is the link to the company's site. Logo slot of fixed height:
   every name sits on the same line whatever the logo's size */
.soc-link{flex:1;display:grid;grid-template-rows:64px auto;place-items:center;align-content:center;gap:14px;padding:28px 10px 30px;border-radius:inherit;color:inherit;text-decoration:none}
.soc-link:focus-visible{border-radius:16px}
/* ↗ beside the name, shown on hover/focus; absolutely placed so the name doesn't shift */
.soc-name{position:relative}
.soc-arrow{position:absolute;left:100%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 7px;fill:var(--c);
  opacity:0;translate:-3px 3px;transition:opacity .2s ease,translate .2s ease}
.soc-link:focus-visible .soc-arrow{opacity:1;translate:0 0}
.soc-name{font-size:12.5px;font-weight:600;letter-spacing:.06em;color:#495061}
/* each company's own colour: a bar along the card's bottom edge (rounded top) and the ↗ */
.soc-co::after{content:"";position:absolute;left:28px;right:28px;bottom:0;height:4px;border-radius:4px 4px 0 0;background:var(--c);pointer-events:none}
.soc-co--net{--c:#7A8494}
.soc-co--go{--c:#1E8FE1}
.soc-co--xoldy{--c:#1F1F1F}
.soc-co--wichee{--c:#1BA0E2}
.soc-co--pratico{--c:#5A2D82}
/* version 2 (below the chart): one grey tray, the holding alone on row 1, the five
   company cards on row 2 — same .soc-co cards, flat on the tray, no tree */
.soc-flat-holding{display:flex;justify-content:center;background:#fff;border-radius:16px;padding:44px 24px;margin-bottom:12px}
.soc-flat-row{list-style:none;margin:0 0 12px;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.soc-flat-row:last-child{margin-bottom:0}
/* flat at rest; on hover the shared .card-hover lift + shadow (as on soluzioni.html):
   :where() keeps this at .soc-co's weight, so .card-hover:hover's shadow wins.
   Row 1 is itself the link (a.card-hover) to the group site */
.soc-flat :where(.soc-co){box-shadow:none}
.soc-flat .soc-co::after{content:none}  /* no colour bar either */
.soc-flat-row + .box-note{justify-content:center;text-align:center}
/* reveal, once in view (JS adds .soc--anim, then .soc--in): the holding rises, the
   branches draw out from it, the nodes appear and the companies rise one by one */

.cert-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cert-logos{background:#fff;border-radius:16px;padding:34px;display:flex;align-items:center;justify-content:center;gap:44px;flex-wrap:wrap}
.cert-logos img{display:block;height:104px;width:auto}

/* --- codice etico --- */
/* No tray, no card: the page has enough boxes by this point, so this block
   sits straight on the background, separated by a rule instead of a border. */
.sec-etico{max-width:var(--wrap);margin:0 auto;padding:20px 40px 90px}
.etico-card{padding:0;display:grid;grid-template-columns:1fr auto;gap:44px;align-items:center}
.etico-card .etico-d{max-width:70ch}
.etico-t{margin:0 0 10px;font-size:21px;font-weight:800;letter-spacing:-.02em}
.etico-d{margin:0;font-size:14.5px;line-height:1.65;color:rgba(11,18,32,.6)}

/* --- contatti: dark band closing the page — the .app-band ink and .tile cards --- */
.sec-contatti{max-width:var(--wrap);margin:0 auto;padding:0 40px 90px}
.contatti-band{background:#0B1220;color:#fff;border-radius:22px;padding:58px 50px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.contatti-t{margin:0 0 10px;font-size:34px;font-weight:800;letter-spacing:-.03em}
.contatti-d{margin:0;font-size:16px;line-height:1.6;color:rgba(255,255,255,.75)}
/* separate .tile cards, not hairline dividers — the same replacement the
   stats in #chi-siamo and the app features in #app already use */
.contatti-list{display:flex;flex-direction:column;gap:12px}
/* each card: the .tile-ico badge on the left across both lines (label + value) */
.contatti-list .tile{display:grid;grid-template-columns:auto 1fr;column-gap:18px;align-items:center}
.contatti-list .tile-ico{grid-row:1/span 2;margin:0}
/* each card links (map / mailto / tel) like contatti.html's .ct-item: lift on hover, the value turns accent */
.contatti-list .contatti-v{justify-self:start;overflow-wrap:anywhere;transition:color .15s ease}
.contatti-k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:8px}
.contatti-v{font-size:16px;line-height:1.4;font-weight:600;color:#fff;text-decoration:none}
.contatti-social{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}

@media(max-width:880px){
  .hero-about{padding:80px 22px 120px!important}
  .hero-about--solo{padding-bottom:80px!important}
  .sec-numbers{margin-top:-72px;padding:0 22px}
  .numbers-grid{grid-template-columns:1fr 1fr!important}
  .numbers-grid .number-card:last-child:nth-child(odd){grid-column:1/-1}
  .sec-mission{padding:70px 22px 60px}
  .sec-polo{padding:50px 22px 60px}
  .sec-profilo{padding:0 22px 60px}
  .split-grid--about{gap:28px}
  .about-visual{aspect-ratio:1/1}
  .mission-sectors{grid-template-columns:1fr!important}

  .soc-mark--holding{width:150px}
  .soc-flat-holding{padding:32px 20px}
  .cert-split,.etico-card,.contatti-band{grid-template-columns:1fr!important}
  .etico-card{gap:24px;padding-top:30px}
  .contatti-band{padding:36px 26px}
  .cert-logos{gap:28px;padding:26px}
  .cert-logos img{height:78px}
}

/* ============================================================
   SERVIZI (servizi.html)
   The catalogue: the activity filter uses the shared .tab pills ("who");
   the category ("what"): on desktop a Finder-style column view inside the
   grey tray (category list left, title + description + service rows right);
   on mobile a bottom sheet opened from the title of the white strip, above
   the .also-card services.
   ============================================================ */
.sec-servizi{max-width:var(--wrap);margin:0 auto;padding:40px 40px 70px}

/* --- activity filter: native radios inside .tab pills, visually hidden but focusable --- */
.svc-filter{display:flex;flex-direction:column;align-items:center;gap:26px;margin-bottom:34px}
.svc-filter-l{margin:0;text-align:center}  /* the shared .sec-title, as on soluzioni.html; .svc-filter's gap spaces it */
.svc-filter-opts{margin-bottom:0}
.svc-opt{position:relative;transition:background .15s ease,border-color .15s ease,color .15s ease}
.svc-opt input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.svc-opt:has(input:checked){border-color:#495061;background:#495061;color:#fff}
.svc-opt:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

/* --- category dropdown: the strip's title is the trigger --- */
.svc-dd{position:relative}
.svc-dd-btn{display:inline-flex;align-items:center;gap:12px;padding:0;border:none;background:none;font:inherit;letter-spacing:inherit;color:inherit;text-align:left;cursor:pointer}
/* the nav's own chevron (.nav-dd-chev), scaled up to the 26px title */
.svc-dd-btn .svc-dd-chev{width:14px}
.svc-dd[data-open] .svc-dd-chev{rotate:180deg}
/* the <dialog>: UA box reset; display only when [open] (an author display
   would beat the UA's dialog:not([open]){display:none}) */
.svc-dd-menu{position:absolute;top:calc(100% + 14px);left:-14px;right:auto;width:max-content;max-width:calc(100vw - 44px);margin:0;padding:0;border:none;background:transparent;color:inherit;overflow:visible;z-index:20}
.svc-dd-menu[open]{display:block;animation:svc-dd-in .18s ease}
@keyframes svc-dd-in{from{opacity:0;translate:0 -6px}}
@keyframes svc-sheet-in{from{translate:0 100%}}
/* the page behind the modal sheet doesn't scroll */
html:has(.svc-dd-menu:modal){overflow:hidden}
.svc-dd-sheet{background:var(--tray);border-radius:20px;padding:8px;box-shadow:0 24px 50px -20px rgba(11,18,32,.4)}
.svc-dd-body{display:grid;gap:6px}
/* the sheet's head (title + ✕) is mobile-only */
.svc-dd-head{display:none}
.svc-dd-sheet-t{margin:0;font-size:18px;line-height:1.3;font-weight:800;letter-spacing:-.02em}
.svc-dd-close{flex-shrink:0;width:38px;height:38px;border-radius:50%;border:none;background:#fff;color:#0B1220;font-size:22px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.svc-dd-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.svc-dd-opt{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;background:#fff;border:none;border-radius:12px;padding:13px 16px;font-family:inherit;font-size:14.5px;font-weight:700;line-height:1.3;color:#0B1220;text-align:left;cursor:pointer;transition:color .15s ease}
.svc-dd-opt[aria-current]{color:var(--accent)}
.svc-dd-opt:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tab-n{min-width:24px;padding:2px 7px;border-radius:999px;font-size:12px;font-weight:700;text-align:center;background:rgba(11,18,32,.07);color:rgba(11,18,32,.6)}

/* --- panel: intro strip + cards, inside the grey tray --- */
/* these set display, so [hidden] needs restating */
.svc-dd-opt[hidden],.svc-panel[hidden],.svc-card[hidden]{display:none}
.svc-intro{background:#fff;border-radius:16px;padding:30px 34px;margin-bottom:12px}
.svc-intro-t{margin:0;font-size:26px;line-height:1.2;font-weight:800;letter-spacing:-.025em}
/* the description: its own white block in the tray, under the title strip */
.svc-intro-d{margin:0 0 12px;background:#fff;border-radius:16px;padding:20px 34px;font-size:15px;line-height:1.6;color:rgba(11,18,32,.65)}
.svc-card .also-title{font-size:18px;line-height:1.2}
.ico-ne{width:10px;height:10px;fill:currentColor}
/* the category column only exists on desktop; on mobile the list lives in the sheet */
.svc-cats{display:none}

/* --- desktop: column view. The list sits in the left column (sticky under the
   header), the right column stacks the title strip, the description and the
   services as one-per-row white cards. --- */
@media(min-width:881px){
  .svc-box{display:grid;grid-template-columns:290px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:12px;align-items:start}
  .svc-box > *{grid-column:2}
  .svc-box > .svc-cats{display:block;grid-column:1;grid-row:1/-1;position:sticky;top:calc(var(--nav-h,0px) + 16px)}
  /* the title is a plain heading here (the script takes its button out of the tab order) */
  .svc-dd-btn{cursor:default}
  .svc-dd-btn .svc-dd-chev{display:none}
  /* title strip + description read as one white block: the strip loses its bottom
     padding/radius and the gap, the description its top */
  .svc-intro{margin-bottom:0;padding-bottom:10px;border-radius:16px 16px 0 0}
  .svc-intro-d{padding:0 34px 30px;border-radius:0 0 16px 16px}
  /* options: label, count, chevron; the selected one filled brand grey, like the checked activity pill */
  .svc-cats .svc-dd-opt{justify-content:flex-start;gap:10px;transition:color .15s ease,background .15s ease}
  .svc-cats .tab-n{margin-left:auto}
  .svc-cats .svc-dd-opt::after{content:"";flex:none;width:7px;height:12px;background:currentColor;opacity:.45;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
  .svc-cats .svc-dd-opt[aria-current]{background:#495061;color:#fff}
  .svc-cats .svc-dd-opt[aria-current]::after{opacity:1}
  .svc-cats .svc-dd-opt[aria-current] .tab-n{background:rgba(255,255,255,.16);color:#fff}
  /* services: rows instead of cards — name left, the round arrow right ("Scopri di più" stays for screen readers) */
  .svc-grid{grid-template-columns:1fr}
  .svc-card{flex-direction:row;align-items:center;justify-content:space-between;gap:20px;min-height:0;padding:14px 14px 14px 26px}
  .svc-card .also-title{font-size:17px}
  .svc-card .svc-link--card{margin-top:0}
  .svc-card .svc-link-t{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
}

@media(max-width:880px){
  .sec-servizi{padding:28px 22px 50px}
  .svc-intro{padding:24px 22px}
  .svc-intro-d{padding:18px 22px;font-size:14.5px}
  .svc-intro-t{font-size:22px}
  /* bottom sheet: the same <dialog>, opened modal */
  .svc-dd-menu{position:fixed;inset:auto 0 0 0;width:100%;max-width:none;max-height:85dvh}
  .svc-dd-menu[open]{display:flex;animation-name:svc-sheet-in;animation-duration:.26s}
  .svc-dd-menu::backdrop{background:rgba(8,13,24,.72);backdrop-filter:blur(4px)}
  .svc-dd-sheet{flex:1;min-height:0;display:flex;flex-direction:column;border-radius:22px 22px 0 0;padding:0;box-shadow:none}
  .svc-dd-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 18px 12px 22px}
  /* the list scrolls inside the sheet; the head stays put */
  .svc-dd-body{overflow-y:auto;overscroll-behavior:contain;padding:0 10px calc(10px + env(safe-area-inset-bottom))}
  .svc-dd-opt{padding:16px 18px;font-size:15.5px}
}
/* after the sheet rules, which set their own animation-name */
@media (prefers-reduced-motion: reduce){.svc-dd-menu[open]{animation:none}}

/* ============================================================
   SOLUZIONI — 2° livello (soluzioni-*.html)
   One page per activity: product hero, then a 2×2 tray with one white
   card per servizi.html category — description, the activity's main
   services as chips, and the homepage "Scopri di più" into the catalogue.
   ============================================================ */
.sec-sol{max-width:var(--wrap);margin:0 auto;padding:70px 40px}
.head-sol{text-align:center;max-width:660px;margin:0 auto 44px}
.sol-card{background:#fff;border-radius:16px;padding:32px 34px;display:flex;flex-direction:column;align-items:flex-start}
/* soluzioni.html: small striped placeholder between each profile card's title
   and description (the homepage's .solution-visual, shorter), as wide as the text */
.sol-card-visual{align-self:stretch;height:140px;margin:6px 0 22px}
/* a real photo in the same slot */
.sol-card-img{display:block;width:100%;border-radius:12px;object-fit:cover}
.sol-card-t{margin:0 0 12px;font-size:22px;line-height:1.25;font-weight:800;letter-spacing:-.02em}
.sol-card-d{margin:0 0 20px;font-size:15px;line-height:1.6;color:rgba(11,18,32,.6)}
/* the profile cards' long "Scopri…" sentence: even lines instead of a stranded last word */
.sol-card .svc-link--card{text-wrap:balance}
/* the activity's services: small grey chips, each a direct link */
.sol-svcs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.sol-svc{font-size:13px;font-weight:600;color:rgba(11,18,32,.75);background:#f5f7fb;padding:7px 12px;border-radius:8px;text-decoration:none;transition:color .15s ease,background .15s ease}
.sol-svc--more{color:var(--accent-dark);background:var(--accent-tint)}
/* the activity's services as row-links on the three Soluzioni 2° livello pages (replacing
   the chips + "Scopri di più"): grey rows on the white card, name + round ↗ */
.sol-links{list-style:none;margin:-6px 0 0;padding:0;align-self:stretch;display:grid;gap:6px}
.sol-link{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#f5f7fb;border-radius:10px;padding:5px 5px 5px 14px;font-size:14px;font-weight:700;line-height:1.3;color:#0B1220;text-decoration:none;transition:background .15s ease,color .15s ease}
.sol-link .solution-ico{width:28px;height:28px;background:#fff;transition:background .15s ease,color .15s ease}
.sol-link .ico-ne{width:9px;height:9px}
/* the service's own icon (sprite symbols s-*, outline): accent, before the name */
.sol-link-ico{width:20px;height:20px;flex-shrink:0;margin-right:-2px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sol-link-t{flex:1}
/* a service with no page yet (href="#"): icon and arrow in red, a reminder until the page exists */
.sol-link--todo .sol-link-ico{stroke:#D7262B}
.sol-link--todo .solution-ico{color:#D7262B}
/* the same rows in a white card under a .card-lead (pagopa-avvisi's Pratico pagoPA services);
   the page itself is a tinted row with no arrow, as tall as the others (28px icon + 2×5px) */
.sol-links--card{margin:20px 0 0}
.sol-link--current{min-height:38px;padding-right:14px;color:var(--accent-dark);background:var(--accent-tint)}
/* pagopa-avvisi's Pratico pagoPA: the copy in a white card on top of the tray, then the
   four things the platform does as a row of four cards (not links) */
.also-grid--4{grid-template-columns:repeat(4,1fr)}
.avv-card{min-height:0}
.avv-card .vantaggio-ico{margin-bottom:10px}
.avv-card .sol-link-ico{width:22px;height:22px;margin:0}
@media(max-width:1100px){.also-grid--4{grid-template-columns:1fr 1fr}}
/* Whole card clickable although it holds several links (which can't nest):
   "Scopri di più" stays the card's link and its ::after is stretched over the
   card; the chips sit above that layer and keep their own targets. */
.sol-card--stretch{position:relative}
.sol-card--stretch .svc-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.sol-card--stretch .svc-link:focus-visible{outline:none}
.sol-card--stretch:has(.svc-link:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.sol-card--stretch .sol-svc{position:relative;z-index:1}

@media(max-width:880px){
  .sec-sol{padding:50px 22px}
  .head-sol{margin-bottom:28px}
  .sol-card{padding:26px 24px}
  .sol-card-t{font-size:20px}
}

/* ============================================================
   NEWS INDEX (news*.html)
   Vertical cards: image → tag + date → title → summary → CTA.
   The category filters deliberately look nothing like .subnav-link:
   those are small filled pills that jump within a page, these are
   large underlined tabs that navigate between pages.
   ============================================================ */
.sec-news-index{max-width:var(--wrap);margin:0 auto;padding:20px 40px 90px}

/* --- category tabs --- */
.cat-tabs{margin-bottom:44px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.cat-tabs::-webkit-scrollbar{display:none}
/* the shared .tab pills, as links: the current page is the filled one (aria-current) */
.cat-tabs .tab{flex-shrink:0;text-decoration:none;white-space:nowrap;transition:background .15s ease,border-color .15s ease,color .15s ease}

/* --- card grid --- */
/* Same tray-and-white-cards pattern as the homepage's "Le ultime novità":
   the grid carries .box, the cards are plain white with no border.
   With fewer than three cards the tray drops columns and shrinks to fit,
   centred — otherwise a 2-card row leaves a third of the grey empty.
   Widths are the 3-column card width (349px) times the card count. */
.news-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-inline:auto}
.news-cards:has(> :nth-child(2):last-child){grid-template-columns:repeat(2,1fr);max-width:740px}
.news-cards:has(> :only-child){grid-template-columns:1fr;max-width:378px}
.news-item{display:flex;flex-direction:column;background:#fff;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit}
.news-item-media{aspect-ratio:16/10;background:#f5f7fb;overflow:hidden}
/* no photo yet: the striped accent placeholder used across the prototype */
.news-item-media--ph{background-image:repeating-linear-gradient(135deg,rgba(var(--accent-rgb),.08) 0 10px,rgba(var(--accent-rgb),.03) 10px 20px);display:flex;align-items:center;justify-content:center}
.news-item-media img{width:100%;height:100%;object-fit:cover;display:block}
.news-item-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.news-item-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.news-tag{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-dark);background:var(--accent-tint);padding:5px 10px;border-radius:7px}
.news-when{font-size:12.5px;font-weight:500;color:rgba(11,18,32,.6)}
.news-item-title{margin:0 0 10px;font-size:19px;line-height:1.3;font-weight:800;letter-spacing:-.02em}
.news-item-desc{margin:0 0 20px;font-size:14px;line-height:1.55;color:rgba(11,18,32,.6)}
/* CTA: the shared .svc-link--card ("Scopri di più" look), margin-top:auto pins it to the bottom */
/* --- featured (latest) article: the same card laid out horizontally, in its
   own tray above the grid, so the newest item carries more weight --- */
.news-lead{margin-bottom:12px}
.news-item--wide{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.news-item--wide .news-item-media{aspect-ratio:auto;height:100%;min-height:280px}
.news-item--wide .news-item-body{justify-content:center;padding:40px 44px}
.news-item--wide .news-item-title{font-size:29px;line-height:1.18;margin-bottom:14px}
.news-item--wide .news-item-desc{font-size:16px;line-height:1.6;margin-bottom:24px}
.news-item--wide .svc-link--card{margin-top:0}
.news-empty{padding:60px 0;text-align:center;font-size:16px;color:rgba(11,18,32,.6)}

/* --- pager ---
   Rounded squares, so it reads as neither the fully-round anchor pills nor
   the underlined category tabs. Inert in the prototype: there is no page 2
   to serve, so the links carry no destination. */
.pager{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:56px}
.pager-item{min-width:44px;height:44px;padding:0 12px;border-radius:12px;border:1px solid rgba(11,18,32,.12);background:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:14.5px;font-weight:700;color:rgba(11,18,32,.6);text-decoration:none;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}
.pager-item[aria-current="page"]{background:#0B1220;border-color:#0B1220;color:#fff}
.pager-item[aria-disabled="true"]{opacity:.35;pointer-events:none}
.pager-item .ico-arrow{fill:currentColor}
.pager-prev .ico-arrow{transform:scaleX(-1)}

@media(max-width:880px){
  .news-item--wide{grid-template-columns:1fr!important}
  .news-item--wide .news-item-media{aspect-ratio:16/10;min-height:0}
  .news-item--wide .news-item-body{padding:24px 24px 26px}
  .news-item--wide .news-item-title{font-size:22px}
  .news-cards{grid-template-columns:1fr 1fr!important}
  .news-cards:has(> :only-child){grid-template-columns:1fr!important}
  .cat-tabs{margin-bottom:32px}
}
@media(max-width:600px){
  .news-cards{grid-template-columns:1fr!important}
}
@media (hover: hover) and (pointer: fine){
  .cat-tabs .tab:not([aria-current="page"]):hover{color:#0B1220;border-color:rgba(11,18,32,.32)}
  .pager-item:not([aria-current="page"]):hover{color:#0B1220;border-color:rgba(11,18,32,.32)}
}

/* ============================================================
   CONTATTI (contatti.html)
   Product hero, then one grey tray: the contact details as white
   cards on the left — each one a link (map, mailto, tel) — and the
   shared .contact-form on the right. Social circles reuse the footer's.
   ============================================================ */
.sec-ct{max-width:var(--wrap);margin:0 auto;padding:70px 40px 100px}
.ct-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:12px}
/* the contact cards stay in view beside the (taller) form, pinned under the header */
.ct-list{display:flex;flex-direction:column;gap:12px;position:sticky;top:calc(var(--nav-h,72px) + 20px);align-self:start}
.ct-item{display:flex;align-items:center;gap:16px;background:#fff;border-radius:16px;padding:22px 24px;text-decoration:none;color:inherit}
.ct-item--social{flex-direction:column;align-items:flex-start;gap:12px}
/* stock image under the cards, last in the column (a module in the tray, 3:2, images/contatti/), cover-cropped */
.ct-photo{display:block;aspect-ratio:3/2;width:100%;height:auto;border-radius:16px;object-fit:cover}
.ct-ico{width:44px;height:44px;border-radius:50%;background:#495061;color:#fff;display:grid;place-items:center;flex-shrink:0}
.ct-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ct-k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(11,18,32,.6);margin-bottom:4px}
.ct-v{display:block;font-size:16px;font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.ct-social{display:flex;gap:10px}
.ct-grid .contact-form{padding:36px 40px}
/* Angeli card: takes the column's leftover height so both columns end level; CTA pinned to the bottom */
.ct-item--ang{flex:1;flex-direction:column;align-items:flex-start;gap:0;padding:26px 26px 24px}
.ct-ang-t{display:block;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.3;margin-bottom:8px}
.ct-ang-d{display:block;font-size:14px;line-height:1.55;color:rgba(11,18,32,.6);margin-bottom:20px;text-wrap:balance}
.ct-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-bottom:22px}
.ct-stat{background:#f5f7fb;border-radius:12px;padding:14px 16px}
.ct-stat-v{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--accent);margin-bottom:6px}
.ct-stat-l{display:block;font-size:12.5px;line-height:1.4;color:rgba(11,18,32,.6);text-wrap:balance}

@media(max-width:880px){
  .sec-ct{padding:50px 22px 60px}
  .sec-faq--page{padding-top:50px}
  /* faq.html: the questions first, then the side column (Non trovi quello che cerchi? +
     Contattaci + the Angeli card). A flex column, not the one-column grid: a grid track
     grows to its widest item's minimum width and drags every item to it, so the side
     column came out wider than the screen; flex items just take the container's width */
  .sec-faq--page .faq-grid{display:flex;flex-direction:column;gap:60px}
  .sec-faq--page .faq-list{order:-1}
  /* heading, line and Contattaci inset 14px (the trays' padding), so they line up with the
     cards in the trays; the Angeli tray itself keeps the full width */
  .sec-faq--page .faq-side{padding-inline:14px}
  .sec-faq--page .faq-help{margin-inline:-14px}
  /* homepage: Perché scegliere Net Service + its line inset 14px, level with the cards in the tray below */
  .results-head{padding-inline:14px}
  /* a note with a CTA: the button goes on its own line under the text, left-aligned */
  .box-note--cta{flex-direction:column;align-items:flex-start;gap:16px}
  /* contact section (every page with the form): eyebrow, title and line inset the same way, level with the Angelo note's card */
  :is(.contact-eyebrow,.contact-title,.contact-desc){padding-inline:14px}
  /* Area Legale pages: the hero title and the document text inset the same 14px */
  main:has(.sec-legal) .hero-title,.legal-doc{padding-inline:14px}
  /* chi-siamo.html: its paragraphs too (overview-desc is shared, so scoped to the page) */
  main:has(.hero-about--chi-siamo) :is(.overview-desc,.about-lead){padding-inline:14px}
  /* …and the Angelo note's tray and the form's tray become one frame: no gap between the
     two columns, the note tray open at the bottom, the form tray open at the top, 12px
     between the photo and the form card as between any two cards in a tray */
  .sec-contact:has(.contact-note-box){row-gap:0}
  .sec-contact .contact-note-box{max-width:none;border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:0}
  .sec-contact:has(.contact-note-box) > .box{border-top-left-radius:0;border-top-right-radius:0;padding-top:12px}
  .ct-grid{grid-template-columns:1fr}
  .ct-list{position:static;order:1}  /* contatti.html: the form first, the contact cards (Sede, Email, Telefono…) under it */
  .ct-grid .contact-form{padding:24px}
}

/* ============================================================
   ERROR PAGES (pagina404.html, pagina500.html)
   The product hero, taller so the footer doesn't ride up, with the
   status code set huge in accent above the title.
   ============================================================ */
.hero-error{padding-top:110px;padding-bottom:130px}
.header-floating .hero-error{padding-top:calc(var(--nav-h,72px) + 70px)}
.error-code{margin:0 0 10px;font-size:clamp(96px,15vw,170px);line-height:.9;font-weight:800;letter-spacing:-.05em;color:var(--accent)}
.hero-error .hero-cta{margin-bottom:0}

@media(max-width:880px){
  /* must beat the product-hero phone rule (.hero-product{padding:40px 22px!important}) */
  .hero-product.hero-error{padding:70px 22px 90px!important}
  .header-floating .hero-product.hero-error{padding-top:calc(var(--nav-h,72px) + 40px)!important}
}

/* ============================================================
   NEWS ARTICLE (news-articolo.html)
   The body is a three-track grid: everything lands in the centre
   track — a ~66ch reading measure — while figures opt into the
   wider tracks. That's what lets images sit *with* the text
   instead of interrupting it: a portrait can occupy the gutter
   beside the paragraph it belongs to, and a full-width image can
   break past the measure without the prose ever getting too wide.
   ============================================================ */
.sec-article{max-width:var(--wrap);margin:0 auto;padding:82px 40px 40px}
.header-floating .sec-article{padding-top:calc(var(--nav-h,72px) + 82px)}
.article-grid{display:grid;grid-template-columns:1fr min(66ch,100%) 1fr}
.article-grid > *{grid-column:2}

/* --- header --- */
.article-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.article-title{margin:0 0 22px;font-size:clamp(32px,4.4vw,50px);line-height:1.08;font-weight:800;letter-spacing:-.035em}
.article-lead{margin:0 0 14px;font-size:19.5px;line-height:1.6;color:rgba(11,18,32,.68)}
.article-lead:last-of-type{margin-bottom:0}

/* --- body copy --- */
.article-grid p{margin:0 0 20px;font-size:16.5px;line-height:1.75;color:rgba(11,18,32,.75)}
/* inline links only — :not(.btn) so buttons keep their own colours
   (.article-grid a is more specific than .btn-primary and was winning) */
.article-grid a:not(.btn){color:var(--accent);text-decoration:none;font-weight:600}
/* interviewer question: accent, larger, with air above it */
.qa-q{margin:38px 0 12px;font-size:21px;line-height:1.35;font-weight:800;letter-spacing:-.02em;color:var(--accent)}
.qa-q:first-child{margin-top:0}

/* --- figures --- */
/* image straight onto the grey tray — no white plate */
.fig{margin:0 0 28px}
.fig .box img{display:block;width:100%;height:auto;border-radius:16px}
.fig figcaption{margin-top:12px;font-size:12.5px;line-height:1.5;color:rgba(11,18,32,.6)}
/* breaks past the reading measure, up to the container */
.fig-wide{grid-column:1/-1;margin:14px 0 34px}
/* sits in the gutter beside the text it belongs to */
.fig-pair{grid-column:1/-1;display:grid;grid-template-columns:328px min(66ch,100%);gap:40px;justify-content:center;align-items:start;margin:34px 0 10px}
.fig-pair .fig{margin:0;position:sticky;top:calc(var(--nav-h,72px) + 24px)}
.fig-pair-text > :last-child{margin-bottom:0}

/* --- pull quote --- */
.pull{grid-column:1/-1;max-width:900px;margin:38px auto 40px;padding:4px 0 4px 26px;border-left:4px solid var(--accent);font-size:24px;line-height:1.45;font-weight:700;letter-spacing:-.02em;color:#0B1220}

/* --- closing note --- */
.article-end{margin-top:36px;padding-top:26px;border-top:1px solid rgba(11,18,32,.1)}

@media(max-width:880px){
  .sec-article{padding:0 22px 30px}
  .header-floating .sec-article{padding-top:calc(var(--nav-h,72px) + 20px)}
  /* the gutters collapse, so a paired figure stacks above its text */
  .fig-pair{grid-template-columns:1fr;gap:22px;margin:24px 0 4px}
  .fig-pair .fig{position:static;max-width:348px}
  .pull{margin:28px auto 30px;font-size:20px;padding-left:20px}
  .qa-q{font-size:19px;margin-top:30px}
}

/* ---------- LEGAL PAGES (privacy-policy.html) ----------
   Plain running document: no cards or trays, on the same 1180px/40px measure
   as the header and every other section. Body copy is justified; hyphens:auto
   (the page is lang="it") lets the browser break words so justification
   doesn't open rivers of white space, and text-wrap:auto disables the global
   `balance` on <p>, which is meant for short headings and fights justify. */
.sec-legal{max-width:var(--wrap);margin:0 auto;padding:30px 40px 90px}
.legal-doc h2{margin:46px 0 14px;font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.35;scroll-margin-top:calc(var(--nav-h,72px) + 24px)}
.legal-doc p{margin:0 0 16px;font-size:16px;line-height:1.8;color:rgba(11,18,32,.72);text-align:justify;text-wrap:auto;hyphens:auto}
.legal-doc ul{margin:0 0 16px;padding-left:22px;display:flex;flex-direction:column;gap:10px;font-size:16px;line-height:1.75;color:rgba(11,18,32,.72);text-align:justify;hyphens:auto}
.legal-doc a{color:var(--accent);text-decoration:none;font-weight:600;word-break:break-word}
/* the opening, un-headed passage sets the document up, so it reads larger */
.legal-lead{margin-bottom:8px;padding-bottom:30px;border-bottom:1px solid rgba(11,18,32,.1)}
.legal-lead p{font-size:17.5px;line-height:1.75;color:rgba(11,18,32,.6)}
.legal-lead p:last-child{margin-bottom:0}

/* ---------- COOKIE DECLARATION (informativa-cookie.html) ----------
   Markup generated by Cookiebot's cd.js inside .legal-doc, so the running text
   already takes the legal paragraph style. Its category blocks become grey cards and
   the cookie tables lose their row hairlines (site rule: no 1px separators) in favour
   of zebra rows; !important beats the inline/injected Cookiebot styles. */
.legal-doc .CookieDeclarationType{background:#f5f7fb;border:0!important;border-radius:16px;padding:22px 24px!important;margin:16px 0!important;overflow-x:auto}
.legal-doc .CookieDeclarationTypeHeader{margin:0 0 8px;font-size:17px;font-weight:800;letter-spacing:-.01em}
.legal-doc .CookieDeclarationTable{width:100%;border-collapse:collapse;margin-top:14px;font-size:13.5px;line-height:1.5}
.legal-doc .CookieDeclarationTableHeader,.legal-doc .CookieDeclarationTableCell{border:0!important;padding:10px 12px!important;text-align:left;vertical-align:top}
.legal-doc .CookieDeclarationTableHeader{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(11,18,32,.6)}
.legal-doc .CookieDeclarationTable tbody tr:nth-child(odd) td{background:#fff}
.legal-doc .CookieDeclarationTable tbody tr td:first-child{border-radius:8px 0 0 8px}
.legal-doc .CookieDeclarationTable tbody tr td:last-child{border-radius:0 8px 8px 0}
.legal-doc #CookieDeclarationChangeConsentChange,.legal-doc #CookieDeclarationChangeConsentWithdraw{font-weight:700}

/* ---------- CONTACT extras (province select + privacy) ---------- */
select.field{color:rgba(11,18,32,.6);}  /* same grey as an empty field's caption */
select.field option{color:#0B1220;}
select.field:has(option:checked:not([value])),
select.field:has(option:checked:not([value=""])){color:#0B1220;}
select.field:has(option:checked:not([value])) option,
select.field:has(option:checked:not([value=""])) option{color:#0B1220;}
select.field{appearance:none;-webkit-appearance:none;width:100%;margin-bottom:14px;cursor:pointer;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='rgba(11,18,32,.45)' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 24px center;padding-right:54px}
.form-privacy{margin:0 0 20px;font-size:12px;line-height:1.5;color:rgba(11,18,32,.6)}
.form-privacy a{color:var(--accent);text-decoration:none;font-weight:600}
.asterisk-accent{color:var(--accent);}
/* order form: required marks and the mandatory note in red */
.asterisk-req,.form-req--alert{color:#D92D20}

/* ---------- Responsive ---------- */
@media (hover: hover) and (pointer: fine){
  .crumb a:hover{color:#0B1220}
  .subnav-link:hover{color:#0B1220}
  .subnav-link.active:hover{color:#fff}
  .form-privacy a:hover,.faq-a a:hover,.legal-doc a:hover{text-decoration:underline;text-underline-offset:3px}
}

@media(max-width:880px){
  .hero-title{font-size:40px!important}

  .sec-pad{padding-left:22px!important;padding-right:22px!important}
  .footer-pad{padding:40px 26px 24px!important}
  .footer-cta{padding-bottom:60px}
  .footer-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-brand{grid-column:1/-1}
  .footer-brand-logo{width:200px}
  .footer-cta-band{flex-direction:column;align-items:flex-start;gap:24px}
  /* a title + text block (modulo-ordine.html): its desktop flex-basis (360px, a width in a row)
     would become a 360px height once the band is a column */
  .footer-cta-band > div{flex:none}
  .footer-cta-t{min-width:0}
/* was 280px — forced the footer wider than a phone viewport */
  .solutions-grid,.results-grid,.tabs-panel,.sec-contact,.form-row,.faq-grid,.bricks-grid,.bricks-list{grid-template-columns:1fr!important}
  /* contact form: smaller padding + let the grid item and its fields shrink below
     their intrinsic min-content width, so the form can't push the page wider */
  .contact-form{padding:24px;min-width:0}
  .field{min-width:0}
  /* contact-form submit (Registrati) spans the full width of the form footer */
  .btn-submit{width:100%;justify-content:center}

  /* --- product page --- */
  .hero-product{padding:40px 22px!important}
  /* …but under the fixed floating header the top padding must clear it first */
  .header-floating .hero-product{padding-top:calc(var(--nav-h,72px) + 40px)!important}
  .hero-visual{padding:14px 18px}
  .hero-product .hero-title{font-size:36px!important}
  .overview-grid,.vantaggi-grid,.pricing-grid,.fn-points,.duo-grid,.app-band,.also-grid{grid-template-columns:1fr!important}
  .overview-grid{gap:28px;margin-bottom:32px}
  .fn-panel{padding:26px 22px}
  .app-band{padding:36px 26px}
  .app-title{font-size:30px}
  .costi-grid{grid-template-columns:1fr 1fr!important}
  .legal-doc h2{margin-top:36px}
  /* --- assistenza --- */
  .hero-ang{padding:70px 22px 80px!important}
  .header-floating .hero-ang{padding-top:calc(var(--nav-h,72px) + 40px)!important}  /* clear the fixed floating header first */
  .head-reviews{padding:0 22px}
  .review{width:300px}
  .review-card{padding:24px}

  /* figures: the image goes under the column; the three cards stay stacked
     (beats the shared .numbers-grid two-up rule) */
  .stats-split{grid-template-columns:1fr}
  .stats-split .numbers-grid{grid-template-columns:1fr!important}
  .stats-visual{min-height:0;aspect-ratio:4/3}
  .aziende-card{padding:32px 24px}
  .aziende-sec-cards{grid-template-columns:1fr 1fr}
  .sec-ang-team{padding-top:50px;padding-bottom:60px}
  /* pricing stacks to one column here — no cross-card alignment left to do,
     so drop the subgrid and let the cards be plain flex columns again */
  .pricing-grid{grid-template-rows:none;row-gap:12px}
  .price-card{display:flex;flex-direction:column;grid-row:auto}
  /* matrix: narrower value columns + tighter padding so it never overflows */
  .cmp-head,.cmp-row{grid-template-columns:1fr 62px 62px;gap:10px;padding:14px 18px}
  .cmp-head{font-size:12.5px}
  .cmp-row{font-size:13.5px}
}

/* Smartphone-only tweaks */
/* ---------- Nav drawer (<=1100px) ----------
   The burger + slide-in drawer take over at 1100px, not 880px: the five-item
   menu + Accedi don't fit the desktop bar below that.
   Keep in sync with ddHover's min-width (1101px) in each page's script. */
@media(max-width:1100px){
  .nav-grid{padding:14px 22px!important}
  /* …but the floating header's grey tray keeps its even 12px frame on every side */
  .header-floating .nav-grid{padding:12px!important}
  .nav-inner{grid-template-columns:1fr auto 1fr!important}
  .nav-burger{display:inline-flex!important;position:relative;z-index:65}
  /* keep logo (and burger) above the full-width drawer, in their exact positions */
  .nav-logo{justify-self:center!important;position:relative;z-index:65}
  /* .nav-collapse becomes a left slide-in drawer holding the same links + button */
  .nav-collapse{display:flex;flex-direction:column;gap:28px;position:fixed;top:0;left:0;width:100dvw;height:100dvh;padding:calc(var(--nav-h,72px) + 40px) 26px 26px;background:#fff;box-shadow:0 24px 60px -20px rgba(11,18,32,.45);transform:translateX(-100%);transition:transform .28s ease;z-index:60;overflow-y:auto}
  .nav-open .nav-collapse{transform:translateX(0)}
  .nav-collapse .nav-center{flex-direction:column;align-items:stretch;gap:14px}
  .nav-collapse .nav-link{display:flex;align-items:center;justify-content:center;min-height:47px;font-size:19px}
  /* dropdowns become in-drawer accordions: trigger spans the row, items stack below */
  .nav-dd-btn{justify-content:space-between;width:100%;text-align:left}
  .nav-dd-chev{width:12px}
  /* …styled like the rest of the drawer: plain text rows, no tray or cards, indented one level */
  .nav-dd-menu{position:static;translate:none;min-width:0;box-shadow:none;opacity:1;visibility:visible;display:none;
    gap:0;margin-top:4px;padding:0 0 0 16px;background:none;border-radius:0}
  .nav-dd[data-open] .nav-dd-menu{display:grid;translate:none}
  .nav-dd-link{display:flex;align-items:center;min-height:44px;padding:0;background:none;border-radius:0;white-space:normal;font-size:16.5px;font-weight:600}
  .nav-dd-menu::before{content:none}
  .nav-collapse .nav-actions{flex-direction:column;align-items:stretch;gap:14px}
  /* focus header: logo back on the left (no burger); the row as tall as the 40px burger makes it
     elsewhere — on the row, not min-height on the box, which (border-box) would swallow the floating bar's padding */
  .nav-inner--focus{grid-auto-rows:minmax(40px,auto)}
  .nav-inner--focus .nav-logo{justify-self:start!important}
  .nav-ph{display:none}
  /* a full-width tap target in the drawer: taller and larger than the bar's compact pill */
  .nav-collapse .nav-actions .btn-dark{justify-content:center;padding-block:16px;font-size:16.5px}
  /* Size via viewport units, not inset:0 — the classic nav's backdrop-filter makes
     it the containing block for fixed children, which would clip the backdrop to
     the header. top/left:0 + 100%/100dvh cover the full viewport in both modes. */
  .nav-backdrop{display:block;position:fixed;top:0;left:0;width:100%;height:100dvh;z-index:55;background:rgba(11,18,32,.45);opacity:0;visibility:hidden;transition:opacity .28s ease,visibility .28s ease}
  .nav-open .nav-backdrop{opacity:1;visibility:visible}
  /* signed-in pages: in the drawer the user menu opens left-aligned under its button */
  .user-menu{right:auto;left:0}
}
@media(max-width:1100px){
  .grp-grid--4{grid-template-columns:1fr 1fr}

  .soc-co{min-height:120px}
  .soc-co:last-child:nth-child(odd){grid-column:1/-1}
  .soc-flat-row{grid-template-columns:1fr 1fr}
}

@media(max-width:600px){
  /* breadcrumbs: no "Home" step on a phone (the logo is the home link) */
  .crumb > a:first-child{display:none}
  /* focus header: on a phone logo + centred label don't fit three columns — label to the right */
  .nav-inner--focus{grid-template-columns:auto 1fr!important;gap:16px}
  .nav-focus{justify-self:end;font-size:14px}
  .tabs-row--lg .tab{font-size:15px;padding:14px 26px}
  .footer-cols{grid-template-columns:1fr}
  /* stacked: a column title right after the brand or another column's links gets more room above it (30px gap + 18) */
  .footer-cols > :is(:has(> .footer-col-links),.footer-brand) + * > .footer-col-title{margin-top:18px}
  .soc-flat-row{grid-template-columns:1fr}
  /* chips as radio rows on a phone (every group picks one): one per line, a radio circle
     before the label, filled with an accent dot when selected. ::before is the desktop
     bold-width reserve; a full-width row doesn't need it, so it becomes the circle */
  .chips{flex-direction:column;align-items:stretch}
  .chip{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:14px 16px;font-size:14px;text-align:left}
  .chip::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(11,18,32,.25);background:#fff;visibility:visible;box-sizing:border-box}
  .chip.sel::before{border-color:var(--accent);background:radial-gradient(circle,var(--accent) 0 4px,#fff 4.5px)}
  .costi-grid{grid-template-columns:1fr!important}
  .price-card{padding:28px 24px}
}


/* ============================================================
   Backend Laravel — stati dei form (errori, conferma, honeypot)
   ============================================================ */
.hp-field{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.fld-err{margin:-6px 0 12px;font-size:13px;color:#D92D20}
.field[aria-invalid="true"]{box-shadow:0 0 0 2px #D92D20}
.form-alert{margin:0 0 14px;padding:14px 18px;border-radius:16px;background:#fdecea;color:#8a1c12;font-size:14.5px}
.form-done .form-group-t{margin-top:14px}
.btn[disabled]{opacity:.6;cursor:progress}
/* chip "Richiesta inviata" nella conferma (tolto dal mock insieme al riepilogo ordine) */
.flag-ok{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#1B7a3a;background:rgba(27,122,58,.1);padding:8px 14px;border-radius:100vw}
.flag-ok svg{width:14px;height:auto;fill:#1B7a3a;flex-shrink:0}
/* caricamenti affiancati: ogni card sta in un wrapper insieme al suo eventuale errore */
.up-grid > div{display:grid;grid-template-rows:1fr auto}
.up-grid .fld-err{margin:8px 0 0}