/* ============================================================================
   LOCUS — locus.acquisizioniforensi.com
   Design system + components

   Aesthetic: "Forensic Editorial"
   Typography of judicial publications meets modern technical SaaS.
   Distinctive Italian-feel serif (Fraunces) for headlines, Inter for body,
   JetBrains Mono for data. Section numerals in margins, hairline rules between
   content blocks, generous whitespace. Warm off-white "paper" instead of
   clinical pure white. Sharp red (LOCUS) + deep navy (Acquisizioni Forensi
   heritage) as primary accents.
   ============================================================================ */


/* ─── Fonts ────────────────────────────────────────────────────────────────
   Self-hosted variable fonts via Google Fonts subset split.
   I @font-face sono INLINE in questo file (non più @import) per evitare il
   cascade serial-load — il browser parsa locus.css una sola volta e sa
   subito quali subset (`unicode-range`) sono necessari.
   I file .woff2 stanno in `../fonts/`.
   ─────────────────────────────────────────────────────────────────────────── */

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-italic-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/fraunces-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrainsmono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrainsmono-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrainsmono-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrainsmono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrainsmono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ─── Design tokens ──────────────────────────────────────────────────────── */

:root {
  /* Ink / text scale */
  --ink-100: rgb(8, 13, 24);      /* deepest, headlines */
  --ink-90:  rgb(16, 22, 36);     /* primary text */
  --ink-70:  rgb(38, 49, 71);     /* dark secondary */
  --ink-60:  rgb(75, 85, 99);     /* secondary text */
  --ink-40:  rgb(107, 114, 128);  /* tertiary text */
  --ink-25:  rgb(156, 163, 175);  /* muted */

  /* Paper / surfaces — warm, not clinical white */
  --paper:        rgb(252, 250, 246);  /* base page */
  --paper-warm:   rgb(248, 244, 234);  /* section blocks */
  --paper-cream:  rgb(245, 240, 226);  /* deeper warm */
  --paper-card:   rgb(255, 253, 249);  /* card surface */
  --rule:         rgb(229, 226, 217);  /* hairlines (warm) */
  --rule-strong:  rgb(195, 188, 168);  /* visible dividers */

  /* Brand */
  --locus-red:        rgb(234, 27, 29);
  --locus-red-deep:   rgb(168, 18, 20);
  --locus-red-tint:   rgba(234, 27, 29, 0.08);
  --acqf-navy:        rgb(26, 58, 92);
  --acqf-navy-deep:   rgb(15, 36, 58);
  --acqf-navy-tint:   rgba(26, 58, 92, 0.06);

  /* Functional accents */
  --ok:    rgb(15, 118, 110);
  --warn:  rgb(180, 83, 9);
  --fail:  rgb(190, 24, 30);

  /* Dark mode (used inversely on dark sections only — site is light-default) */
  --ink-on-dark:     rgb(244, 240, 230);
  --ink-on-dark-dim: rgb(195, 188, 168);

  /* Type families */
  --font-display: "Fraunces", "Iowan Old Style", Cambria, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (fluid, clamp() based on viewport) */
  --fs-xs:   clamp(0.75rem, 0.74rem + 0.04vw, 0.78rem);   /* 12-12.5px */
  --fs-sm:   clamp(0.85rem, 0.84rem + 0.05vw, 0.9rem);    /* 13.6-14.4px */
  --fs-base: clamp(0.95rem, 0.93rem + 0.1vw, 1.05rem);    /* 15.2-16.8px */
  --fs-md:   clamp(1.05rem, 1.02rem + 0.15vw, 1.15rem);   /* 16.8-18.4px */
  --fs-lg:   clamp(1.2rem, 1.15rem + 0.25vw, 1.35rem);    /* 19.2-21.6px */
  --fs-xl:   clamp(1.5rem, 1.4rem + 0.5vw, 1.85rem);
  --fs-2xl:  clamp(2rem, 1.7rem + 1.5vw, 2.75rem);
  --fs-3xl:  clamp(2.8rem, 2.2rem + 3vw, 4.5rem);
  --fs-4xl:  clamp(3.5rem, 2.5rem + 5vw, 6.5rem);

  /* Spacing scale */
  --sp-0: 0;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sp-11: 12rem;

  /* Layout */
  --content-max:  78rem;     /* 1248px */
  --content-wide: 90rem;     /* 1440px */
  --content-text: 42rem;     /* 672px reading width */
  --header-h:     4.5rem;
  --section-y:    clamp(3rem, 2.2rem + 3vw, 5.5rem);

  /* Radius (subtle) */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 10px;
  --r-4: 16px;

  /* Shadows — soft, warm, never blue */
  --shadow-sm: 0 1px 2px rgba(28, 22, 8, 0.06);
  --shadow-md: 0 4px 14px rgba(28, 22, 8, 0.08), 0 1px 3px rgba(28, 22, 8, 0.04);
  --shadow-lg: 0 24px 48px -12px rgba(28, 22, 8, 0.18), 0 8px 16px -8px rgba(28, 22, 8, 0.1);
  --shadow-elev: 0 40px 80px -20px rgba(15, 36, 58, 0.25), 0 16px 32px -12px rgba(15, 36, 58, 0.15);

  /* Transitions */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
}


/* ─── Reset & base ───────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "ss01", "cv02";
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-h);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink-90);
  background: var(--paper);
  /* Subtle grain for "paper" feel — applied as 0.5% alpha noise */
  background-image:
    radial-gradient(ellipse at top, rgba(234, 27, 29, 0.015), transparent 60%),
    radial-gradient(ellipse at bottom right, rgba(26, 58, 92, 0.012), transparent 60%);
  background-attachment: fixed;
  font-variation-settings: "opsz" 16;
  font-feature-settings: "kern", "ss01", "cv02", "cv11";

  /* Sticky footer pattern: body è flex-column con altezza minima viewport,
     <main> si espande, il footer resta sempre incollato a fondo pagina
     anche quando il contenuto è corto (login, forgot-password, 404…). */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Il main wrapper si prende lo spazio rimanente. flex: 1 0 auto = grow
   sempre, no shrink, base auto (rispetta il contenuto). */
main#main {
  flex: 1 0 auto;
  /* Reset tabindex outline su skip-link target */
  outline: none;
}

/* Il footer resta della sua altezza naturale, non si compatta */
.site-footer { flex-shrink: 0; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; transition: color var(--dur-fast) var(--ease); }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--locus-red); color: var(--paper); }


/* ─── Typography primitives ──────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink-100);
  margin: 0;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
}

h1 { font-size: var(--fs-3xl); font-weight: 500; letter-spacing: -0.035em; }
h2 { font-size: var(--fs-2xl); font-weight: 500; letter-spacing: -0.025em; }
h3 { font-size: var(--fs-xl); font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; }
h4 { font-size: var(--fs-lg); font-weight: 600; line-height: 1.25; }

/* Italic in headlines uses Fraunces italic which is gorgeous — emphasize it */
h1 em, h2 em, h3 em {
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
  color: var(--acqf-navy);
}

p { margin: 0 0 1em; }
p.lede {
  font-size: var(--fs-md);
  color: var(--ink-60);
  line-height: 1.55;
  max-width: var(--content-text);
  font-weight: 400;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--locus-red);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-bottom: var(--sp-5);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: var(--locus-red);
}

.mono { font-family: var(--font-mono); font-feature-settings: "ss01"; }
.tnum { font-variant-numeric: tabular-nums; }
.smallcaps {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
}


/* ─── Layout primitives ──────────────────────────────────────────────────── */

.container {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 2vw, 2rem);
}
.container--wide { max-width: var(--content-wide); }
.container--text { max-width: var(--content-text); }

.section {
  padding-block: var(--section-y);
  position: relative;
}
.section--warm { background: var(--paper-warm); }
.section--cream { background: var(--paper-cream); }
.section--dark {
  background: var(--acqf-navy-deep);
  color: var(--ink-on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 {
  color: var(--ink-on-dark);
}
.section--dark h1 em, .section--dark h2 em, .section--dark h3 em {
  color: var(--locus-red);
}
.section--dark p { color: var(--ink-on-dark-dim); }
.section--dark .eyebrow { color: rgba(244, 240, 230, 0.7); }
.section--dark .eyebrow::before { background: rgba(244, 240, 230, 0.5); }

/* Section header pattern: kicker + headline + lede */
.section-head {
  max-width: var(--content-text);
  margin-bottom: var(--sp-7);
}
.section-head--center {
  margin-inline: auto;
  text-align: center;
}
.section-head--center .eyebrow {
  justify-content: center;
}
.section-head--center .eyebrow::before {
  display: none;
}
.section-head--center .eyebrow {
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  padding-block: 0.6em;
  padding-inline: 1.2em;
  display: inline-flex;
  margin-inline: auto;
}

/* Hairline divider — judicial document feel */
.rule {
  height: 1px;
  background: var(--rule-strong);
  margin-block: var(--sp-7);
  border: 0;
}
.rule--narrow { max-width: 6rem; margin-inline: auto; }
.rule--red { background: var(--locus-red); height: 2px; }


/* ─── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  --bg: var(--ink-100);
  --fg: var(--paper);
  --bd: var(--ink-100);

  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.85em 1.5em;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--r-2);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn:active { transform: translateY(0); }
.btn:focus-visible {
  outline: 2px solid var(--locus-red);
  outline-offset: 3px;
}

.btn--primary {
  --bg: var(--locus-red);
  --bd: var(--locus-red);
  --fg: var(--paper);
}
.btn--primary:hover {
  --bg: var(--locus-red-deep);
  --bd: var(--locus-red-deep);
}

.btn--ghost {
  --bg: transparent;
  --bd: var(--rule-strong);
  --fg: var(--ink-90);
}
.btn--ghost:hover {
  --bg: var(--paper-card);
  --bd: var(--ink-70);
}

.btn--inline {
  padding: 0.4em 0.8em;
  font-size: 0.85rem;
  border-radius: var(--r-1);
}

.btn .arrow {
  display: inline-block;
  transition: transform var(--dur-fast) var(--ease);
}
.btn:hover .arrow { transform: translateX(3px); }


/* ─── Header (top nav) ──────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--header-h);
  background: rgba(252, 250, 246, 0.85);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 2vw, 2rem);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink-100);
  white-space: nowrap;
}
.brand__mark {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}
.brand__by {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-40);
  margin-top: 1px;
  font-weight: 400;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-left: auto;
}
.site-nav__list {
  display: flex;
  gap: var(--sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__link {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-70);
  padding: 0.4em 0;
  position: relative;
  transition: color var(--dur-fast) var(--ease);
}
.site-nav__link:hover { color: var(--ink-100); }
.site-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--locus-red);
  transition: right var(--dur-fast) var(--ease);
}
.site-nav__link:hover::after { right: 0; }

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

/* Language switcher */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--paper-cream);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  padding: 2px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.lang-switch a, .lang-switch span {
  padding: 4px 10px;
  border-radius: 4px;
  color: var(--ink-60);
  transition: all var(--dur-fast) var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lang-switch a:hover { background: var(--paper); color: var(--ink-100); }
.lang-switch [aria-current="true"] {
  background: var(--ink-100);
  color: var(--paper);
  font-weight: 600;
}
.lang-flag {
  width: 14px;
  height: 10px;
  border-radius: 1px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 0 0.5px rgba(28,22,8,0.15);
}

/* Mobile burger */
.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-1);
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  color: var(--ink-90);
  padding: 0;
}

@media (max-width: 960px) {
  .menu-toggle { display: inline-flex; }
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.5rem;
    transform: translateY(-110%);
    transition: transform var(--dur-base) var(--ease);
    height: calc(100vh - var(--header-h));
    overflow-y: auto;
  }
  .site-nav.is-open { transform: translateY(0); }
  .site-nav__list {
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--rule);
  }
  .site-nav__link {
    display: block;
    padding: 1em 0;
    border-bottom: 1px solid var(--rule);
    font-size: 1.15rem;
    font-family: var(--font-display);
    font-weight: 500;
  }
  .site-nav__actions {
    margin-top: 1.5rem;
    flex-direction: column;
    align-items: stretch;
  }
  .site-nav__actions .btn { justify-content: center; }
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -10000px;
  top: 0;
  padding: 1em;
  background: var(--ink-100);
  color: var(--paper);
  z-index: 100;
}
.skip-link:focus { left: 1rem; top: 1rem; }


/* ─── Inner pages shell ────────────────────────────────────────────────── */

.page-inner__hero {
  padding-block: clamp(4rem, 6vw, 7rem) clamp(3rem, 5vw, 5rem);
  border-bottom: 1px solid var(--rule);
}
.page-inner__h1 {
  font-size: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: var(--sp-3) 0 var(--sp-5);
  max-width: 22ch;
}
.page-inner__lede {
  font-size: clamp(1.05rem, 0.95rem + 0.3vw, 1.2rem);
  color: var(--ink-60);
  line-height: 1.55;
  max-width: var(--content-text);
}

.page-block { padding-block: clamp(3rem, 4vw, 5rem); }
.page-block--warm { background: var(--paper-warm); }


/* ─── Hero ──────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding-top: var(--sp-9);
  padding-bottom: var(--sp-10);
  overflow: hidden;
}

/* Decorative section numerals in the left margin (Editorial reference) */
.hero::before {
  content: "§ 01";
  position: absolute;
  top: var(--sp-7);
  left: clamp(1rem, 4vw, 4rem);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--ink-25);
  text-transform: uppercase;
}

/* Subtle decorative grid in the background */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: -1px -1px;
  opacity: 0.4;
  mask-image: radial-gradient(ellipse at right top, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at right top, black 0%, transparent 70%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 2vw, 2rem);
  z-index: 1;
}

@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: 3rem; }
}

.hero__copy { max-width: 36rem; }

.hero__title {
  font-size: var(--fs-4xl);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 0.98;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
  margin-bottom: var(--sp-5);
}

.hero__lede {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem);
  line-height: 1.55;
  color: var(--ink-60);
  max-width: 32rem;
  margin-bottom: var(--sp-6);
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.hero__kicker {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  max-width: 28rem;
}
.hero__kicker-latin {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--acqf-navy);
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
}
.hero__kicker-tr {
  font-size: 0.82rem;
  color: var(--ink-40);
  letter-spacing: 0.01em;
}

/* Stagger reveal */
.reveal-stagger > * { opacity: 0; transform: translateY(8px); animation: heroIn 700ms var(--ease) forwards; }
.reveal-stagger > *:nth-child(1) { animation-delay: 80ms; }
.reveal-stagger > *:nth-child(2) { animation-delay: 200ms; }
.reveal-stagger > *:nth-child(3) { animation-delay: 320ms; }
.reveal-stagger > *:nth-child(4) { animation-delay: 440ms; }
.reveal-stagger > *:nth-child(5) { animation-delay: 560ms; }
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }

/* Hero mockup column */
.hero__mockup {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  animation: floatIn 1.2s var(--ease) 280ms backwards;
}
@keyframes floatIn {
  from { opacity: 0; transform: translateY(20px) rotate(-1deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0); }
}

/* iPhone "frame" usato per wrappare lo screenshot reale (app-home.webp).
   Niente notch overlay (lo screenshot include la status bar reale). Solo
   bordo nero spesso + corner radius alti per dare l'effetto device. */
.iphone-frame {
  position: relative;
  width: 100%;
  max-width: 340px;
  padding: 12px;
  background: #0a0d18;
  border-radius: 48px;
  box-shadow:
    0 40px 60px rgba(15, 36, 58, 0.25),
    0 16px 24px rgba(15, 36, 58, 0.12),
    inset 0 0 0 1px rgba(255,255,255,0.04);
  transform: rotate(-1deg);
  transition: transform 600ms var(--ease);
}
.hero__mockup:hover .iphone-frame { transform: rotate(0deg); }

.iphone-frame__screen {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 36px;
  background: var(--paper);
}

/* Legacy class kept for any existing inline reference */
.iphone-mockup { all: unset; }

/* ──────────────────────────────────────────────────────────────────────
   Page-inner hero — variante split per pagine che passano $HERO_MOCKUP a
   _shell.php (es. features.php con lo screenshot live della pipeline a
   destra del titolone). Quando $HERO_MOCKUP è vuoto, la grid collassa a
   colonna unica e il layout torna identico alla hero standard.
   ─────────────────────────────────────────────────────────────────── */
.page-inner__hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
}
.page-inner__hero--split .page-inner__hero-grid {
  grid-template-columns: 1.15fr 1fr;
}
@media (max-width: 880px) {
  .page-inner__hero--split .page-inner__hero-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}
.page-inner__hero-copy { max-width: 36rem; }
.page-inner__hero-mockup {
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Lo screenshot iPhone nella hero usa un tilt sottile opposto a quello
   della home (.hero .iphone-frame ha -1°), così le due pagine non
   "fotocopiano" l'angolazione. */
.page-inner__hero-mockup .iphone-frame {
  max-width: 320px;
  transform: rotate(1deg);
}
.page-inner__hero-mockup:hover .iphone-frame { transform: rotate(0deg); }
@media (max-width: 880px) {
  .page-inner__hero-mockup .iphone-frame { max-width: 260px; transform: none; }
}

/* ─── Contact: badge unico indirizzo (colonna destra hero split) ─── */
/* Il badge si allinea in ALTO (no centratura verticale) così riduce il
   vuoto sopra e parte alla stessa altezza dell'eyebrow/h1. */
.page-inner__hero-mockup:has(.contact-card) {
  align-self: start;
  justify-content: flex-start;
}
.contact-card {
  width: 100%;
  max-width: 32rem;
  background: var(--paper, #fbf8f1);
  border: 1px solid rgba(15, 36, 58, 0.12);
  border-radius: var(--r-2, 18px);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: 0 24px 50px rgba(15, 36, 58, 0.10), 0 6px 14px rgba(15, 36, 58, 0.06);
  text-align: left;
}
.contact-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--locus-red-tint, rgba(234, 27, 29, 0.08));
  color: var(--locus-red-deep, #a81214);
  margin-bottom: 0.9rem;
}
.contact-card__icon svg { width: 20px; height: 20px; }
.contact-card__k {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-40, #6b7280);
}
.contact-card__addr {
  display: inline-block;
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  font-weight: 600;
  color: var(--locus-red-deep, #a81214);
  text-decoration: none;
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
  border-bottom: 2px solid transparent;
  transition: border-color var(--dur-fast, .15s) var(--ease, ease);
}
.contact-card__addr:hover { border-bottom-color: currentColor; }
.contact-card__desc {
  margin: 0.9rem 0 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-60, #4b5563);
}

/* Forensic seal (decorative) */
.seal {
  position: absolute;
  width: 130px;
  height: 130px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--locus-red);
  display: flex;
  align-items: center;
  justify-content: center;
}
.seal--hero {
  right: -10px;
  top: -10px;
  animation: sealSpin 32s linear infinite;
}
@keyframes sealSpin { to { transform: rotate(360deg); } }
.seal__ring {
  position: absolute;
  inset: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.seal__ring--inner {
  inset: 14px;
  opacity: 0.5;
}
.seal__center {
  width: 30px;
  height: 30px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  letter-spacing: 0;
}


/* ─── Store badges (App Store / Play Store) ────────────────────────────── */

.store-badges {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}
.store-badges__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-40);
  margin: 0;
}
.store-badges--dark {
  align-items: center;
  margin-top: var(--sp-7);
}
.store-badges--dark .store-badges__label { color: rgba(244,240,230,0.55); }

.store-badges__row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* "Disponibile presto / Coming soon": i badge store sono rimossi finché l'app
   non è rilasciata, quindi l'etichetta diventa un pill autoportante. */
.store-badges--soon .store-badges__label {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 8px 16px;
  border: 1px solid var(--line, rgba(0,0,0,0.14));
  border-radius: 999px;
  color: var(--ink-60, var(--ink-40));
}
.store-badges--soon.store-badges--dark .store-badges__label {
  align-self: center;
  border-color: rgba(244,240,230,0.28);
}

.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px 12px 18px;
  background: var(--ink-100);
  color: var(--paper);
  border-radius: var(--r-2);
  border: 1px solid var(--ink-100);
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
  text-decoration: none;
  white-space: nowrap;
  min-width: 180px;
  min-height: 56px;
}
.store-badge:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
  background: rgb(20, 26, 42);
}
.store-badge:focus-visible {
  outline: 2px solid var(--locus-red);
  outline-offset: 3px;
}
.store-badge svg { flex: 0 0 auto; width: 28px; height: 28px; }

.store-badge__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
  gap: 2px;
}
.store-badge__sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  opacity: 0.85;
  text-transform: none;
}
.store-badge__main {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}


/* ─── Pricing rules box (slot model) ──────────────────────────────────── */

.pricing-rules {
  max-width: 56rem;
  margin: 0 auto var(--sp-7);
  background: var(--paper-card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-3);
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
}
.pricing-rules__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-40);
  margin: 0 0 var(--sp-4);
}
.pricing-rules__list {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.pricing-rules__row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--sp-4);
  align-items: center;
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
}
.pricing-rules__row:first-child { border-top: none; padding-top: 0; }
.pricing-rules__row:last-child  { padding-bottom: 0; }
.pricing-rules__k {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--locus-red);
  letter-spacing: 0.02em;
}
.pricing-rules__v {
  margin: 0;
  color: var(--ink-70);
  font-size: 0.97rem;
  line-height: 1.5;
}
@media (max-width: 540px) {
  .pricing-rules__row { grid-template-columns: 1fr; gap: 4px; padding: 0.7rem 0; }
}


/* ─── Plan slots line + badge override ────────────────────────────────── */

.plan__badge {
  position: absolute;
  top: -0.7em;
  left: 50%;
  transform: translateX(-50%);
  background: var(--locus-red);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.4em 0.9em;
  border-radius: var(--r-1);
  white-space: nowrap;
}
/* Override the ::before generic badge when an explicit .plan__badge exists */
.plan--featured:has(.plan__badge)::before { content: none; }

.plan__slots {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--locus-red);
  margin: 0 0 var(--sp-2);
}
.plan--featured .plan__slots { color: var(--locus-red); }

.pricing-all {
  color: var(--acqf-navy);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}


/* ─── Trust bar ─────────────────────────────────────────────────────────── */

.trust {
  padding-block: var(--sp-6) var(--sp-7);
  border-block: 1px solid var(--rule);
  background: var(--paper-warm);
}
.trust__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-40);
  text-align: center;
  margin-bottom: var(--sp-5);
}
.trust__list {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
}
@media (max-width: 960px) {
  .trust__list { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 540px) {
  .trust__list { grid-template-columns: repeat(2, 1fr); }
}
.trust__item {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-70);
  padding: 0.5em 0.6em;
  border-left: 1px solid var(--rule);
  letter-spacing: 0.01em;
  transition: color var(--dur-fast) var(--ease);
}
.trust__item:first-child { border-left: none; }
@media (max-width: 540px) {
  .trust__item { border-left: none; }
}
.trust__item:hover { color: var(--ink-100); }


/* ─── Problem / Solution ───────────────────────────────────────────────── */

.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 2.5rem);
  margin-top: var(--sp-6);
}
@media (max-width: 880px) { .problem-grid { grid-template-columns: 1fr; } }

.problem-card {
  padding: var(--sp-6) 0;
  border-top: 2px solid var(--ink-100);
  position: relative;
}
.problem-card__number {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-40);
  margin-bottom: var(--sp-3);
}
.problem-card__h {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.7rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
  color: var(--ink-100);
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 0;
}
.problem-card__p {
  color: var(--ink-60);
  line-height: 1.55;
  margin: 0;
}


/* ─── Pipeline (timeline orizzontale) ──────────────────────────────────── */

.pipeline {
  padding-block: var(--section-y);
  background: var(--ink-100);
  color: var(--ink-on-dark);
  position: relative;
  overflow: hidden;
}
.pipeline::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at top left, rgba(234, 27, 29, 0.12), transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(26, 58, 92, 0.3), transparent 50%);
  pointer-events: none;
}
.pipeline > * { position: relative; }

.pipeline .eyebrow { color: var(--locus-red); }
.pipeline .eyebrow::before { background: var(--locus-red); }
.pipeline h2 { color: var(--ink-on-dark); }
.pipeline h2 em { color: var(--locus-red); font-style: italic; }
.pipeline .lede { color: var(--ink-on-dark-dim); }

.pipeline__rail {
  margin-top: var(--sp-7);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  position: relative;
}
@media (max-width: 720px) {
  .pipeline__rail { grid-template-columns: 1fr; }
}

.pipeline__step {
  padding: var(--sp-5);
  border-left: 1px solid rgba(244, 240, 230, 0.15);
  position: relative;
  transition: background var(--dur-fast) var(--ease);
}
.pipeline__step:first-child { border-left: none; }
@media (max-width: 720px) {
  .pipeline__step { border-left: none; border-top: 1px solid rgba(244, 240, 230, 0.15); }
  .pipeline__step:first-child { border-top: none; }
}

.pipeline__step:hover {
  background: rgba(234, 27, 29, 0.04);
}

.pipeline__step::before {
  content: "";
  position: absolute;
  top: var(--sp-5);
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--locus-red);
  box-shadow: 0 0 0 3px var(--ink-100), 0 0 16px rgba(234, 27, 29, 0.6);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease) calc(var(--idx, 0) * 60ms);
}
.pipeline__step.is-visible::before { opacity: 1; }

@media (max-width: 720px) {
  .pipeline__step::before {
    top: -4px;
    left: var(--sp-5);
  }
}

.pipeline__step-n {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--locus-red);
  margin-bottom: var(--sp-2);
}
.pipeline__step-label {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: var(--sp-3);
  color: var(--ink-on-dark);
  letter-spacing: -0.01em;
}
.pipeline__step-desc {
  font-size: 0.85rem;
  color: rgba(244, 240, 230, 0.65);
  line-height: 1.5;
  margin: 0;
}
.pipeline__step-desc .mono {
  color: rgba(244, 240, 230, 0.95);
  font-size: 0.82em;
}


/* ─── PEC section (Italian certified e-mail callout — editorial redesign) ─
   Layout: 2 col (copy | mockup notifica PEC realistica)
   Sfondo paper-warm sobrio, tricolore come dettaglio tipografico
   ─────────────────────────────────────────────────────────────────────── */

.pec-section {
  padding-block: var(--section-y);
  background: var(--paper-warm);
  position: relative;
  overflow: hidden;
}
/* Decorative vertical tricolour gutter on the far left edge */
.pec-section::before {
  content: "";
  position: absolute;
  top: 18%;
  left: 0;
  bottom: 18%;
  width: 4px;
  background: linear-gradient(
    180deg,
    #009246 0%, #009246 33.33%,
    var(--paper) 33.33%, var(--paper) 66.66%,
    #CE2B37 66.66%, #CE2B37 100%
  );
  opacity: 0.35;
}

.pec-section__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
}
@media (max-width: 880px) {
  .pec-section__grid { grid-template-columns: 1fr; }
}

/* Discreet tricolour mark in the eyebrow — three vertical lines, no flag silliness */
.pec-section__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-60);
  margin: 0 0 var(--sp-4);
}
.pec-tricolore {
  display: inline-flex;
  gap: 1.5px;
  height: 14px;
  align-items: stretch;
}
.pec-tricolore span {
  display: block;
  width: 3px;
  border-radius: 0.5px;
}
.pec-tricolore span:nth-child(1) { background: #009246; }
.pec-tricolore span:nth-child(2) { background: var(--ink-25); }
.pec-tricolore span:nth-child(3) { background: #CE2B37; }

.pec-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.5rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin: 0 0 var(--sp-4);
  color: var(--ink-100);
  max-width: 18ch;
}
.pec-section__title em {
  font-style: italic;
  font-weight: 500;
  font-variation-settings: "opsz" 144, "SOFT" 50, "WONK" 1;
  color: var(--acqf-navy);
}

.pec-section__lede {
  color: var(--ink-60);
  line-height: 1.6;
  font-size: 1rem;
  margin: 0 0 var(--sp-6);
  max-width: 32rem;
}

.pec-section__pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--rule-strong);
}
.pec-section__pillar {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.pec-section__pillar dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--locus-red);
}
.pec-section__pillar dd {
  margin: 0;
  color: var(--ink-70);
  font-size: 0.92rem;
  line-height: 1.5;
}
@media (max-width: 540px) {
  .pec-section__pillar { grid-template-columns: 1fr; gap: 2px; }
  .pec-section__title { max-width: 100%; }
}


/* ── PEC mockup (right column) ──────────────────────────────────────────
   A stylised but realistic email notification card — what the user
   actually receives in their PEC inbox. */

.pec-mockup {
  display: flex;
  justify-content: center;
  align-items: stretch;
  perspective: 1200px;
}

.pec-mail {
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-3);
  padding: clamp(1.25rem, 2vw, 1.75rem);
  box-shadow:
    0 24px 48px -16px rgba(15, 36, 58, 0.18),
    0 8px 16px -8px rgba(15, 36, 58, 0.1);
  transform: rotate(-0.6deg);
  transition: transform 500ms var(--ease);
  width: 100%;
  max-width: 460px;
}
.pec-mail:hover { transform: rotate(0deg); }

.pec-mail__top {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: var(--sp-4);
}
.pec-mail__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 100px;
  background: var(--paper-cream);
  color: var(--ink-70);
  border: 1px solid var(--rule);
}
.pec-mail__chip svg { color: var(--ink-60); }
.pec-mail__chip--ok {
  background: rgba(15, 118, 110, 0.08);
  color: var(--ok);
  border-color: rgba(15, 118, 110, 0.3);
}
.pec-mail__chip--ok svg { color: var(--ok); }

.pec-mail__from {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rule);
}
.pec-mail__label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-40);
  display: block;
  margin-bottom: 2px;
}
.pec-mail__addr {
  font-size: 0.88rem;
  color: var(--ink-90);
  font-weight: 500;
}

.pec-mail__subject {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  margin: var(--sp-4) 0 var(--sp-4);
  color: var(--ink-100);
}
.pec-mail__code {
  color: var(--locus-red);
  font-weight: 600;
  font-size: 0.92em;
}

.pec-mail__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-block: 1px solid var(--rule);
}
.pec-mail__ts {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-70);
}

.pec-mail__attachments {
  list-style: none;
  margin: var(--sp-4) 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.pec-mail__attachments li {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--paper-cream);
  border-radius: var(--r-1);
  font-size: 0.84rem;
}
.pec-mail__attachments li svg { color: var(--locus-red); }
.pec-mail__attachments li .mono { color: var(--ink-90); }
.pec-mail__size {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink-40);
  letter-spacing: 0.04em;
}

.pec-mail__foot {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--rule);
  font-size: 0.72rem;
  color: var(--ok);
  letter-spacing: 0.02em;
}


/* ─── Standards table ──────────────────────────────────────────────────── */

.standards-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  margin-top: var(--sp-6);
}
.standards-table thead {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-40);
  border-bottom: 2px solid var(--ink-100);
}
.standards-table th {
  text-align: left;
  font-weight: 500;
  padding: var(--sp-3) var(--sp-4);
}
.standards-table td {
  padding: var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  line-height: 1.45;
}
.standards-table tbody tr {
  transition: background var(--dur-fast) var(--ease);
}
.standards-table tbody tr:hover { background: var(--paper-cream); }
.standards-table .std-code {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--acqf-navy);
  white-space: nowrap;
}
.standards-table .std-scope { color: var(--ink-70); }
.standards-table .std-where {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-60);
}
@media (max-width: 720px) {
  .standards-table thead { display: none; }
  .standards-table, .standards-table tbody, .standards-table tr, .standards-table td { display: block; }
  .standards-table tr { padding: var(--sp-5) 0; border-bottom: 1px solid var(--rule); }
  .standards-table td { padding: 4px 0; border: none; }
  .standards-table td.std-code { font-size: 1rem; margin-bottom: var(--sp-2); }
}


/* ─── Use cases grid ───────────────────────────────────────────────────── */

.usecases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
.usecase {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  padding: var(--sp-6);
  position: relative;
  transition: transform var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.usecase:hover {
  transform: translateY(-3px);
  border-color: var(--ink-100);
  box-shadow: var(--shadow-md);
}
.usecase__icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--sp-4);
  color: var(--locus-red);
}
.usecase__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-3);
  color: var(--ink-100);
}
.usecase__p {
  color: var(--ink-60);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}


/* ─── Pricing ──────────────────────────────────────────────────────────── */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
@media (max-width: 960px) { .pricing-grid { grid-template-columns: 1fr; } }

.plan {
  background: var(--paper-card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-3);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  position: relative;
}
.plan--featured {
  border-color: var(--ink-100);
  background: var(--ink-100);
  color: var(--paper);
  box-shadow: var(--shadow-elev);
  transform: scale(1.02);
  z-index: 1;
}
@media (max-width: 960px) { .plan--featured { transform: none; } }

.plan--featured::before {
  content: "Most popular";
  position: absolute;
  top: -0.7em;
  left: 50%;
  transform: translateX(-50%);
  background: var(--locus-red);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 0.4em 0.9em;
  border-radius: var(--r-1);
}
:root[data-lang="it"] .plan--featured::before { content: "Più scelto"; }

.plan__name {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-40);
  margin-bottom: var(--sp-3);
}
.plan--featured .plan__name { color: rgba(244, 240, 230, 0.6); }

.plan__price {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink-100);
  margin-bottom: var(--sp-2);
}
.plan--featured .plan__price { color: var(--paper); }

.plan__unit {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-60);
  letter-spacing: 0.02em;
  margin-bottom: var(--sp-5);
}
.plan--featured .plan__unit { color: rgba(244, 240, 230, 0.7); }

.plan__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-6);
  flex: 1;
}
.plan__features li {
  padding-left: 1.6em;
  position: relative;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: var(--sp-2);
  color: var(--ink-70);
}
.plan--featured .plan__features li { color: var(--ink-on-dark-dim); }
.plan__features li::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--locus-red);
  font-weight: 700;
}
.plan--featured .plan__features li::before { color: var(--locus-red); }

.plan__cta {
  width: 100%;
  justify-content: center;
}
.plan--featured .plan__cta {
  background: var(--locus-red);
  border-color: var(--locus-red);
}
.plan--featured .plan__cta:hover {
  background: var(--locus-red-deep);
  border-color: var(--locus-red-deep);
}


/* ─── Verify (live demo) ───────────────────────────────────────────────── */

.verify-block {
  background: var(--paper-cream);
  border-radius: var(--r-4);
  padding: clamp(2rem, 4vw, 4rem);
  position: relative;
  overflow: hidden;
}
.verify-block::before {
  content: "";
  position: absolute;
  top: -120px;
  right: -120px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(234, 27, 29, 0.1), transparent 70%);
  pointer-events: none;
}

.verify-form {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  max-width: 32rem;
}
.verify-form__input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  /* NIENTE text-transform: i codici LOCUS sono CASE-SENSITIVE (es. iBvP7o ≠ IBVP7O) */
  padding: 0.9em 1.1em;
  border: 1px solid var(--ink-70);
  border-radius: var(--r-2);
  background: var(--paper);
  color: var(--ink-100);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.verify-form__input:focus {
  outline: none;
  border-color: var(--locus-red);
  box-shadow: 0 0 0 3px var(--locus-red-tint);
}
.verify-form__input::placeholder {
  color: var(--ink-25);
  /* Placeholder lowercase-friendly per ricordare visivamente la case sensitivity */
  text-transform: none;
}

.verify-hint {
  margin-top: var(--sp-4);
  font-size: 0.85rem;
  color: var(--ink-40);
}
.verify-hint a {
  color: var(--acqf-navy);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.verify-result {
  margin-top: var(--sp-6);
  display: none;
}
.verify-result.is-visible { display: block; animation: fadeUp 400ms var(--ease); }
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ─── Validator section (desktop tool) ─────────────────────────────────── */

.validator-section {
  background: linear-gradient(180deg, var(--acqf-navy-deep) 0%, var(--ink-100) 100%);
  color: var(--ink-on-dark);
  padding-block: var(--section-y);
  position: relative;
  overflow: hidden;
}
.validator-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(234,27,29,0.10), transparent 50%),
    radial-gradient(circle at 0% 80%, rgba(26,58,92,0.4), transparent 60%);
  pointer-events: none;
}
.validator-section > * { position: relative; }
.validator-section h2 { color: var(--ink-on-dark); }
.validator-section h2 em { color: var(--locus-red); font-style: italic; }
.validator-section .lede { color: var(--ink-on-dark-dim); max-width: 38rem; }
.validator-section .eyebrow { color: var(--locus-red); }
.validator-section .eyebrow::before { background: var(--locus-red); }

.validator-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
@media (max-width: 960px) {
  .validator-grid { grid-template-columns: 1fr; }
}

.validator-pillars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4) var(--sp-5);
  margin: var(--sp-6) 0 0;
}
@media (max-width: 540px) { .validator-pillars { grid-template-columns: 1fr; } }

.validator-pillar dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--locus-red);
  margin-bottom: 4px;
}
.validator-pillar dd {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(244,240,230,0.78);
}

.validator-downloads {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid rgba(244,240,230,0.12);
}
.validator-downloads__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(244,240,230,0.55);
  margin: 0 0 var(--sp-3);
}
.validator-downloads__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 640px) {
  .validator-downloads__row { grid-template-columns: 1fr; }
}

.dl-tile {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(244,240,230,0.06);
  color: var(--ink-on-dark);
  border: 1px solid rgba(244,240,230,0.18);
  border-radius: var(--r-2);
  text-decoration: none;
  transition: all var(--dur-fast) var(--ease);
  min-width: 0;
}
.dl-tile:hover {
  background: rgba(244,240,230,0.12);
  border-color: rgba(244,240,230,0.32);
  transform: translateY(-1px);
}
.dl-tile:focus-visible {
  outline: 2px solid var(--locus-red);
  outline-offset: 3px;
}
.dl-tile svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
.dl-tile__col {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  gap: 2px;
}
.dl-tile__os {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.dl-tile__sub {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: rgba(244,240,230,0.6);
  letter-spacing: 0.02em;
}

.validator-mockup {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
/* Gli screenshot reali del Validator includono già finestra arrotondata +
   ombra macOS: niente clip/ombra aggiuntiva, solo larghezza piena. */
.validator-shot {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}

/* ─── Galleria "Inside the app" (3 screenshot iPhone, cliccabili → lightbox) ─── */
.app-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
}
.app-gallery__item { margin: 0; text-align: center; }
.app-gallery .iphone-frame { max-width: 260px; transform: none; }
.app-gallery .iphone-frame__screen { cursor: zoom-in; }
.app-gallery__cap {
  margin-top: 16px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-40, #6b7280);
}
@media (max-width: 640px) {
  .app-gallery { gap: 24px; }
  .app-gallery .iphone-frame { max-width: 64vw; }
}

/* ─── Banner video landscape (esempio registrazione video) ─── */
.capture-banner {
  max-width: 900px;
  margin: 0 auto 40px;
}
.capture-banner picture { display: block; }
.capture-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 30px 60px rgba(15, 36, 58, 0.32), 0 12px 22px rgba(15, 36, 58, 0.16);
  cursor: zoom-in;
}
.capture-banner figcaption {
  margin-top: 16px;
  text-align: center;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink-40, #6b7280);
}


/* ─── FAQ ──────────────────────────────────────────────────────────────── */

.faq-list {
  margin-top: var(--sp-7);
  max-width: 52rem;
  margin-inline: auto;
}
.faq-item {
  border-top: 1px solid var(--rule-strong);
  padding-block: var(--sp-5);
}
.faq-item:last-child { border-bottom: 1px solid var(--rule-strong); }
.faq-item__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 0.95rem + 0.35vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-100);
  text-align: left;
  cursor: pointer;
  line-height: 1.3;
}
.faq-item__q-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  position: relative;
  transition: transform var(--dur-base) var(--ease);
}
.faq-item__q-icon::before,
.faq-item__q-icon::after {
  content: "";
  position: absolute;
  inset: 50% 0;
  height: 1.5px;
  background: var(--ink-100);
}
.faq-item__q-icon::after { transform: rotate(90deg); transition: transform var(--dur-base) var(--ease); }
.faq-item.is-open .faq-item__q-icon::after { transform: rotate(0); }
.faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-slow) var(--ease);
  color: var(--ink-60);
  line-height: 1.6;
}
.faq-item.is-open .faq-item__a { max-height: 400px; }
.faq-item__a-inner {
  padding-top: var(--sp-3);
  max-width: 52rem;
}


/* ─── Final CTA ────────────────────────────────────────────────────────── */

.final-cta {
  position: relative;
  text-align: center;
  padding-block: var(--sp-10);
  background: var(--ink-100);
  color: var(--paper);
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: -20% -10%;
  background:
    radial-gradient(ellipse at center, rgba(234,27,29,0.25), transparent 60%),
    radial-gradient(ellipse at top, rgba(26,58,92,0.4), transparent 60%);
  pointer-events: none;
}
.final-cta > * { position: relative; }

.final-cta h2 {
  font-size: var(--fs-3xl);
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--paper);
  margin-bottom: var(--sp-4);
  max-width: 28ch;
  margin-inline: auto;
}
.final-cta h2 em { color: var(--locus-red); font-style: italic; }
.final-cta p { color: var(--ink-on-dark-dim); font-size: 1.1rem; max-width: 36rem; margin-inline: auto var(--sp-6) auto; }
.final-cta__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-6);
}
.final-cta .btn--ghost {
  --bg: transparent;
  --bd: rgba(244, 240, 230, 0.3);
  --fg: var(--paper);
}
.final-cta .btn--ghost:hover {
  --bg: rgba(244, 240, 230, 0.06);
  --bd: rgba(244, 240, 230, 0.5);
}


/* ─── Footer ───────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--paper-warm);
  padding-block: var(--sp-9) var(--sp-6);
  font-size: 0.92rem;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1.4fr repeat(5, 1fr);
  gap: var(--sp-6);
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 2vw, 2rem);
}
@media (max-width: 960px) {
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}

.site-footer__brand p {
  color: var(--ink-60);
  margin-top: var(--sp-3);
  max-width: 22rem;
  font-size: 0.92rem;
  line-height: 1.55;
}
.site-footer__brand .brand { margin-bottom: var(--sp-2); }
.site-footer__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--acqf-navy);
  margin-bottom: var(--sp-3) !important;
}

.site-footer__col h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-40);
  margin-bottom: var(--sp-4);
}
.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__col li { margin-bottom: var(--sp-2); }
.site-footer__col a {
  color: var(--ink-70);
  transition: color var(--dur-fast) var(--ease);
}
.site-footer__col a:hover { color: var(--locus-red); }

.site-footer__legal {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-4);
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 2vw, 2rem);
  font-size: 0.85rem;
  color: var(--ink-40);
}


/* ─── Pipeline detail (features page) ──────────────────────────────────── */

.pipeline-detail {
  display: grid;
  gap: 0;
}
.pipeline-detail__row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--sp-5);
  padding-block: var(--sp-5);
  border-top: 1px solid var(--rule-strong);
  align-items: start;
}
.pipeline-detail__row:last-child { border-bottom: 1px solid var(--rule-strong); }
.pipeline-detail__n {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--locus-red);
  padding-top: 6px;
}
.pipeline-detail__label {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.75rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-2);
  color: var(--ink-100);
}
.pipeline-detail__desc {
  margin: 0;
  font-size: 1rem;
  color: var(--ink-60);
  line-height: 1.6;
  max-width: 48rem;
}
@media (max-width: 640px) {
  .pipeline-detail__row { grid-template-columns: 1fr; gap: var(--sp-2); }
}


/* ─── Pricing tier list (horizontal card rows — readable, ariosa) ──────── */

.tier-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.tier-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(420px, 2.2fr) auto;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  background: var(--paper-card);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-3);
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.tier-row:hover {
  transform: translateY(-1px);
  border-color: var(--ink-70);
  box-shadow: var(--shadow-md);
}
.tier-row.is-pop {
  border-color: var(--ink-100);
  background: linear-gradient(90deg, var(--paper-card) 0%, var(--paper-cream) 100%);
}
.tier-row.is-best {
  border-color: var(--locus-red);
  background: linear-gradient(90deg, var(--paper-card) 0%, rgba(234,27,29,0.06) 100%);
}

@media (max-width: 920px) {
  .tier-row {
    grid-template-columns: 1fr;
    gap: var(--sp-4);
    padding: var(--sp-5);
  }
}

.tier-row__head { min-width: 0; }
.tier-row__name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.tier-row__name h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.3rem + 0.5vw, 1.8rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink-100);
}
.tier-row__badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: 3px 8px;
  border-radius: var(--r-1);
  background: var(--ink-100);
  color: var(--paper);
  white-space: nowrap;
}
.tier-row.is-best .tier-row__badge { background: var(--locus-red); }
.tier-row__bestfor {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-60);
}

.tier-row__numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  align-items: end;
  padding-left: var(--sp-5);
  border-left: 1px solid var(--rule);
}
@media (max-width: 920px) {
  .tier-row__numbers {
    grid-template-columns: repeat(4, 1fr);
    padding-left: 0;
    border-left: none;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--rule);
  }
}
@media (max-width: 540px) {
  .tier-row__numbers { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
}

.tier-row__cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tier-row__cell-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-40);
}
.tier-row__cell-value {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink-100);
  letter-spacing: -0.01em;
}
.tier-row__cell-value--lg {
  font-size: clamp(1.4rem, 1.2rem + 0.5vw, 1.7rem);
  font-weight: 600;
}
.tier-row__cell--save .tier-row__cell-value {
  color: var(--ok);
  font-weight: 700;
}
.tier-row.is-best .tier-row__cell--save .tier-row__cell-value {
  color: var(--locus-red);
}

.tier-row__cta {
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 920px) {
  .tier-row__cta { justify-content: stretch; }
  .tier-row__cta .btn { width: 100%; justify-content: center; }
}

.pricing-notes {
  background: var(--paper-card);
  border-left: 3px solid var(--locus-red);
  padding: var(--sp-5) var(--sp-6);
  border-radius: var(--r-2);
  max-width: 56rem;
}
.pricing-notes__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--locus-red);
  margin: 0 0 var(--sp-3);
}
.pricing-notes ul { margin: 0; padding-left: 1.2em; }
.pricing-notes li { color: var(--ink-70); line-height: 1.55; margin-bottom: 6px; }


/* ─── Standards detailed list (page /standards) ────────────────────────── */

.std-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.std-entry {
  padding-block: var(--sp-7);
  border-top: 1px solid var(--rule-strong);
}
.std-entry:first-child { border-top: none; padding-top: 0; }

.std-entry__head {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.std-entry__n {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--ink-25);
  padding-top: 6px;
}
.std-entry__code {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--locus-red);
  margin: 0 0 4px;
  text-transform: uppercase;
}
.std-entry__name {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.3rem + 0.7vw, 2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--ink-100);
  max-width: 38ch;
}

.std-entry__body {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--sp-4);
}
@media (max-width: 640px) {
  .std-entry__head, .std-entry__body { grid-template-columns: 1fr; }
}

.std-entry__body > * { grid-column: 2 / 3; }
@media (max-width: 640px) {
  .std-entry__body > * { grid-column: auto; }
}

.std-entry__lead {
  margin: 0;
  color: var(--ink-70);
  line-height: 1.65;
  font-size: 1rem;
  max-width: 56rem;
}
.std-entry__lead strong { color: var(--ink-100); font-weight: 600; }
.std-entry__lead em { font-style: italic; color: var(--acqf-navy); }

.std-entry__where {
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper-cream);
  border-left: 3px solid var(--locus-red);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  max-width: 56rem;
}
.std-entry__where-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--locus-red);
  margin: 0 0 6px;
}
.std-entry__where-text {
  margin: 0;
  color: var(--ink-90);
  line-height: 1.55;
  font-size: 0.95rem;
}

.std-entry__link {
  margin-top: var(--sp-4);
  font-size: 0.9rem;
}
.std-entry__link a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--acqf-navy);
  font-weight: 500;
  border-bottom: 1px solid var(--acqf-navy);
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.std-entry__link a:hover {
  color: var(--locus-red);
  border-bottom-color: var(--locus-red);
}


/* ─── Contact channels (redesigned) ────────────────────────────────────── */

.contact-channels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
@media (max-width: 720px) { .contact-channels { grid-template-columns: 1fr; } }

.ch-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  transition: transform var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.ch-card:hover {
  transform: translateY(-2px);
  border-color: var(--ink-100);
  box-shadow: var(--shadow-md);
}

.ch-card__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--r-2);
  background: var(--paper-cream);
  color: var(--locus-red);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  flex: 0 0 auto;
}
.ch-card__icon svg { width: 26px; height: 26px; }

.ch-card__body { min-width: 0; }
.ch-card__k {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-40);
  margin: 0 0 6px;
}
.ch-card__addr {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--ink-100);
  margin-bottom: var(--sp-3);
  word-break: break-all;
  transition: color var(--dur-fast) var(--ease);
}
.ch-card__addr:hover { color: var(--locus-red); }
.ch-card__desc {
  margin: 0;
  color: var(--ink-60);
  font-size: 0.92rem;
  line-height: 1.5;
}


/* ─── Contact form (redesigned editorial) ─────────────────────────────── */

.contact-form-wrap {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 880px) { .contact-form-wrap { grid-template-columns: 1fr; } }

.contact-form-wrap__intro h2 {
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: var(--sp-3) 0 var(--sp-4);
  max-width: 14ch;
}

/* ─── Form feedback badge (esito invio contatti) ─── */
.cf-alert {
  border-radius: var(--r-2, 14px);
  padding: 18px 20px;
  font-size: 0.95rem;
  line-height: 1.55;
}
.cf-alert strong { display: block; margin-bottom: 2px; font-weight: 700; }
.cf-alert ul { margin: 0; padding-left: 1.1rem; }
.cf-alert li { margin: 2px 0; }
.cf-alert--ok {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(16, 122, 76, 0.08);
  border: 1px solid rgba(16, 122, 76, 0.28);
  color: #0b5e3a;
  position: relative;
  padding-left: 52px;
}
.cf-alert--ok::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 18px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #107a4c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.cf-alert--err {
  background: var(--locus-red-tint, rgba(234, 27, 29, 0.08));
  border: 1px solid rgba(234, 27, 29, 0.30);
  color: var(--locus-red-deep, #a81214);
}

.cf {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.cf__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
@media (max-width: 640px) { .cf__row { grid-template-columns: 1fr; gap: var(--sp-4); } }

.cf__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cf__field label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-60);
  margin: 0;
}
.cf__hint {
  font-family: var(--font-body);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-40);
  font-size: 0.72rem;
  margin-left: 0.4em;
}
.cf__field input,
.cf__field textarea,
.cf__field select {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--ink-100);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  padding: 0.55em 0;
  transition: border-color var(--dur-fast) var(--ease),
              padding var(--dur-fast) var(--ease);
}
.cf__field input::placeholder,
.cf__field textarea::placeholder { color: var(--ink-25); }
.cf__field input:focus,
.cf__field textarea:focus,
.cf__field select:focus {
  outline: none;
  border-bottom-color: var(--locus-red);
  border-bottom-width: 2px;
  padding-bottom: calc(0.55em - 1px);
}
.cf__field textarea {
  resize: vertical;
  min-height: 100px;
}

/* Select: stesso look underline-only di input, ma serve override appearance
   + freccia custom (SVG inline) perché il chevron nativo OS-X spacca la
   coerenza estetica. Background-image è una freccia chevron-down 1.5px
   stroke colorata --ink-60. */
.cf__field select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 16px 16px;
}
.cf__field select:focus {
  /* Freccia rossa quando il campo è in focus per coerenza con underline rosso */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
}
.cf__field select::-ms-expand { display: none; }   /* IE/Edge legacy */
/* Riga vuota a fine option list nascosta in Safari (workaround historic) */
.cf__field select option { color: var(--ink-100); background: var(--paper); }


/* ─── Combobox cercabile (combobox.js) ──────────────────────────────────── */
/* Stesso underline-only del select nativo (`.cf__field` o `.auth-form__field`),
   ma con dropdown JS filtrato (autocomplete substring + diacritic-fold).
   Markup in combobox.js. */

.cf-combo__wrap {
  position: relative;
}

/* NB: `input.cf-combo__input` (qualificato sul type) ha specificità (0,1,1)
   che pareggia `.cf__field input` / `.auth-form__field input` (0,1,1) — vince
   per ordine nel file (questo blocco viene dopo). Senza qualificare con `input`
   il selettore `.cf-combo__input` (0,1,0) perde e lo shorthand `background:`
   dei ruleset wrapper resetta `background-repeat` a `repeat` → chevron ripetuto. */

input.cf-combo__input {
  width: 100%;
  cursor: text;
  padding-right: 28px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 16px 16px;
}
.cf-combo.is-open input.cf-combo__input,
input.cf-combo__input:focus {
  /* Freccia rossa quando aperto/focus per coerenza con underline rosso */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e63946' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 4px center;
  background-size: 16px 16px;
}

.cf-combo__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  max-height: 280px;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12),
              0 2px 6px rgba(15, 23, 42, 0.06);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.cf-combo__list[hidden] { display: none; }

.cf-combo__list [role="option"] {
  padding: 8px 14px;
  color: var(--ink-90);
  cursor: pointer;
  line-height: 1.3;
  transition: background-color 0.08s ease, color 0.08s ease;
}
.cf-combo__list [role="option"][hidden] { display: none; }
.cf-combo__list [role="option"]:hover,
.cf-combo__list [role="option"].is-active {
  background: var(--locus-red);
  color: var(--paper);
}

/* Scrollbar pulita */
.cf-combo__list::-webkit-scrollbar { width: 8px; }
.cf-combo__list::-webkit-scrollbar-track { background: transparent; }
.cf-combo__list::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: 4px;
  border: 2px solid var(--paper);
}
.cf-combo__list::-webkit-scrollbar-thumb:hover { background: var(--ink-30); }

/* Empty state quando il filtro non trova niente (gestito via JS opzionale) */
.cf-combo__list:empty::after,
.cf-combo__list.is-empty::after {
  content: 'No matches';
  display: block;
  padding: 14px;
  color: var(--ink-50);
  font-size: 0.9rem;
  text-align: center;
}

.cf__consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--ink-70);
  line-height: 1.5;
}
.cf__consent input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--locus-red);
  flex: 0 0 auto;
}
.cf__consent a {
  color: var(--acqf-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cf__cta { align-self: flex-start; }


/* ─── Form alerts (errors / warnings / success) ─────────────────────────── */

.form-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-2);
  font-size: 0.92rem;
  line-height: 1.5;
  margin: 0 auto var(--sp-5);
  max-width: 28rem;
}
.form-alert svg { flex: 0 0 auto; margin-top: 2px; }
.form-alert--err {
  background: rgba(190, 24, 30, 0.08);
  border: 1px solid rgba(190, 24, 30, 0.3);
  color: var(--fail);
}
.form-alert--ok {
  background: rgba(15, 118, 110, 0.08);
  border: 1px solid rgba(15, 118, 110, 0.3);
  color: var(--ok);
}
.form-alert--warn {
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.35);
  color: var(--warn);
}


/* ─── Auth forms (login / register / forgot) — REDESIGNED ───────────────
   Stile editorial coerente col contact form: underline-only fields, mono
   uppercase labels, no card heavy.
   ─────────────────────────────────────────────────────────────────────── */

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  max-width: 28rem;
  margin-inline: auto;
  padding: clamp(2rem, 3vw, 3rem) 0;
}

.auth-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}
@media (max-width: 480px) { .auth-form__row { grid-template-columns: 1fr; gap: var(--sp-5); } }

.auth-form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.auth-form__field span,
.auth-form__field > label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-60);
}
.auth-form__field input {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink-100);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  padding: 0.6em 0;
  transition: border-color var(--dur-fast) var(--ease),
              padding var(--dur-fast) var(--ease);
}
.auth-form__field input:focus {
  outline: none;
  border-bottom-color: var(--locus-red);
  border-bottom-width: 2px;
  padding-bottom: calc(0.6em - 1px);
}

.auth-form__check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.9rem;
  color: var(--ink-70);
  line-height: 1.5;
  font-weight: 400;
}
.auth-form__check input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--locus-red);
  flex: 0 0 auto;
}
.auth-form__check a {
  color: var(--acqf-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.auth-form__cta {
  align-self: flex-start;
  margin-top: var(--sp-3);
}

.auth-form__alt {
  font-size: 0.88rem;
  color: var(--ink-60);
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-4);
  margin-top: var(--sp-3);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.auth-form__alt a {
  color: var(--locus-red);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--dur-fast) var(--ease);
}
.auth-form__alt a:hover { text-decoration: underline; }
.auth-form__sep { color: var(--ink-25); }


/* ─── Verify page — hero + checks + media + data sections ──────────────── */

.verify-hero {
  background: linear-gradient(180deg, var(--paper-card) 0%, var(--paper) 100%);
  border-block: 1px solid var(--rule-strong);
  padding-block: clamp(2rem, 4vw, 3.5rem);
}
.verify-hero__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-5);
  flex-wrap: wrap;
}
.verify-hero__status {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-width: 0;
}
.verify-hero__check {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(15, 118, 110, 0.12);
  color: var(--ok);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.verify-hero__check svg { width: 40px; height: 40px; }
.verify-hero__label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--ok);
  margin: 0 0 6px;
}
.verify-hero__h {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  line-height: 1.1;
}
.verify-hero__code {
  color: var(--locus-red);
  font-weight: 600;
  font-size: 0.82em;
}
.verify-hero__uuid {
  font-size: 0.85rem;
  color: var(--ink-40);
  margin: 0;
  word-break: break-all;
}
.verify-hero__tsa {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
@media (max-width: 720px) {
  .verify-hero__tsa { align-items: flex-start; }
}


/* Checks list (one row per crypto check) */
.verify-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-3);
}
.verify-check {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  padding: var(--sp-4);
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  align-items: center;
}
.verify-check.is-ok { border-left: 3px solid var(--ok); }
.verify-check.is-err { border-left: 3px solid var(--fail); }
.verify-check__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 118, 110, 0.12);
  color: var(--ok);
}
.verify-check.is-err .verify-check__icon { background: rgba(190, 24, 30, 0.1); color: var(--fail); }
.verify-check__icon svg { width: 18px; height: 18px; }
.verify-check__body { display: flex; flex-direction: column; min-width: 0; }
.verify-check__label {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-100);
  margin-bottom: 2px;
}
.verify-check__value {
  font-size: 0.74rem;
  color: var(--ink-60);
  word-break: break-all;
  line-height: 1.45;
  /* Hash completi non troncati: wrap multi-line */
}


/* Media + GPS map row */
.verify-media {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--sp-5);
  align-items: start;
}
@media (max-width: 880px) { .verify-media { grid-template-columns: 1fr; } }
.verify-media figure { margin: 0; }
.verify-media__preview img,
.verify-media__preview video {
  width: 100%;
  height: auto;
  border-radius: var(--r-2);
  border: 1px solid var(--rule);
  background: var(--ink-100);
  display: block;
}

/* Bottone zoom — la foto è cliccabile per aprire il lightbox */
.verify-media__zoom {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  border-radius: var(--r-2);
  overflow: hidden;
  transition: transform var(--dur-fast) var(--ease);
}
.verify-media__zoom:hover { transform: scale(1.005); }
.verify-media__zoom:focus-visible {
  outline: 2px solid var(--locus-red);
  outline-offset: 3px;
}
.verify-media__zoom img { transition: filter var(--dur-fast) var(--ease); }
.verify-media__zoom:hover img { filter: brightness(0.94); }

.verify-media__zoom-hint {
  position: absolute;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(10, 13, 24, 0.78);
  color: var(--paper);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  pointer-events: none;
}
.verify-media__zoom:hover .verify-media__zoom-hint,
.verify-media__zoom:focus-visible .verify-media__zoom-hint {
  opacity: 1;
  transform: translateY(0);
}
.verify-media__zoom-hint svg { width: 14px; height: 14px; }


/* ─── Lightbox ─────────────────────────────────────────────────────────── */

.lb {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(8, 13, 24, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  animation: lbFade 200ms var(--ease);
}
@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }

.lb[hidden] { display: none; }

.lb__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(244, 240, 230, 0.12);
  color: var(--paper);
  border: 1px solid rgba(244, 240, 230, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.lb__close:hover {
  background: rgba(244, 240, 230, 0.2);
  transform: scale(1.05);
}
.lb__close svg { width: 22px; height: 22px; }

.lb__stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.lb__img {
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  display: block;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  cursor: zoom-out;
}

.lb__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(244, 240, 230, 0.12);
  color: var(--paper);
  border: 1px solid rgba(244, 240, 230, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.lb__nav:hover { background: rgba(244, 240, 230, 0.22); }
.lb__nav--prev { left: 18px; }
.lb__nav--next { right: 18px; }
.lb__nav svg { width: 26px; height: 26px; }
@media (max-width: 640px) {
  .lb__nav { width: 40px; height: 40px; }
  .lb__nav--prev { left: 8px; }
  .lb__nav--next { right: 8px; }
}

.lb__caption {
  margin-top: var(--sp-3);
  font-size: 0.78rem;
  color: rgba(244, 240, 230, 0.6);
  letter-spacing: 0.04em;
  text-align: center;
  word-break: break-all;
  max-width: 80%;
}
.verify-media figcaption {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--ink-40);
  word-break: break-all;
}
#verify-map {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-2);
  border: 1px solid var(--rule);
  background: var(--paper-cream);
}


/* Data sections grid */
.verify-data {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--sp-4);
}
.verify-section {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  padding: var(--sp-5);
}
.verify-section h3 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--locus-red);
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--rule);
}
.verify-section dl { margin: 0; }
.verify-section dl > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--sp-3);
  padding: 0.4em 0;
  border-top: 1px solid var(--rule);
  font-size: 0.92rem;
  align-items: baseline;
}
.verify-section dl > div:first-child { border-top: none; padding-top: 0; }
.verify-section dt {
  color: var(--ink-60);
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.verify-section dd { margin: 0; color: var(--ink-100); }
.verify-section dd a {
  color: var(--acqf-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 540px) {
  .verify-section dl > div { grid-template-columns: 1fr; gap: 2px; }
}


/* ─── Verify result (verify page) ─────────────────────────────────────── */

.verify-form--page {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.verify-form__label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-60);
}
.verify-form__row { display: flex; gap: var(--sp-3); }
@media (max-width: 540px) { .verify-form__row { flex-direction: column; } }

/* Card del form di verifica nella colonna destra dell'hero */
.page-inner__hero-mockup:has(.verify-hero-card) {
  align-self: start;
  justify-content: stretch;
}
.verify-hero-card {
  width: 100%;
  background: var(--paper-card, #ffffff);
  border: 1px solid var(--rule-strong, rgba(15, 36, 58, 0.12));
  border-radius: var(--r-3, 20px);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: 0 24px 50px rgba(15, 36, 58, 0.10), 0 6px 14px rgba(15, 36, 58, 0.06);
}
.verify-hero-card .verify-help { margin-top: var(--sp-3); }

.verify-help {
  margin-top: var(--sp-4);
  font-size: 0.92rem;
  color: var(--ink-60);
}
.verify-help summary {
  cursor: pointer;
  color: var(--acqf-navy);
  font-weight: 500;
  font-size: 0.88rem;
  padding: var(--sp-2) 0;
}
.verify-help[open] summary { color: var(--locus-red); }

/* ════════════════════════════════════════════════════════════════════════
   VERIFY — contenuto editoriale "dossier" mostrato nello stato iniziale
   ═══════════════════════════════════════════════════════════════════════ */

/* — Procedura in 3 passi, legata da una hairline "catena di custodia" — */
.vproc__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-xl); letter-spacing: -0.01em; }
.vproc__steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  position: relative;
}
.vproc__steps::before {
  content: ""; position: absolute; top: 23px; left: 8%; right: 8%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--rule-strong) 0 7px, transparent 7px 15px);
  z-index: 0;
}
@media (max-width: 760px) {
  .vproc__steps { grid-template-columns: 1fr; gap: 1.75rem; }
  .vproc__steps::before { display: none; }
}
.vproc__step { position: relative; z-index: 1; }
.vproc__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--locus-red);
  color: var(--locus-red); font-size: 0.95rem; font-weight: 700;
  margin-bottom: var(--sp-3);
  box-shadow: 0 0 0 6px var(--paper);
}
.page-block--warm .vproc__n { background: var(--paper-warm); box-shadow: 0 0 0 6px var(--paper-warm); }
.vproc__step h3 {
  font-family: var(--font-display); font-weight: 500; font-size: var(--fs-md);
  margin: 0 0 var(--sp-2); color: var(--ink-100); letter-spacing: -0.01em;
}
.vproc__step p { color: var(--ink-60); font-size: var(--fs-sm); line-height: 1.6; margin: 0; }

/* — Anteprima rapporto: reperto in cornice + checklist — */
.vprev__grid {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
}
@media (max-width: 820px) { .vprev__grid { grid-template-columns: 1fr; gap: 2.5rem; } }
.vprev__exhibit { margin: 0; text-align: center; }
.vprev__exhibit .iphone-frame { max-width: 270px; margin: 0 auto; }
.vprev__exhibit figcaption {
  margin-top: var(--sp-4); font-family: var(--font-mono);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-40);
}
.vprev__copy h2 {
  font-family: var(--font-display); font-weight: 400; font-size: var(--fs-xl);
  letter-spacing: -0.01em; margin: var(--sp-2) 0 var(--sp-5); color: var(--ink-100);
}
.vprev__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.vprev__list li {
  position: relative; padding-left: 34px;
  color: var(--ink-70); font-size: var(--fs-base); line-height: 1.5;
}
.vprev__list li strong { color: var(--ink-100); font-weight: 600; }
.vprev__list li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
  background: rgba(15, 118, 110, 0.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f766e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}

/* — Banda validator offline (navy, screenshot desktop) — */
.voff__card {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(234,27,29,0.16) 0%, transparent 55%),
    var(--acqf-navy-deep);
  color: var(--ink-on-dark);
  border-radius: var(--r-3); padding: clamp(1.75rem, 4vw, 3rem); overflow: hidden;
}
@media (max-width: 760px) { .voff__card { grid-template-columns: 1fr; } }
.voff__shot { margin: 0; }
.voff__shot img {
  display: block; width: 100%; height: auto; border-radius: var(--r-2);
  box-shadow: 0 28px 56px rgba(0, 0, 0, 0.45); border: 1px solid rgba(255,255,255,0.08);
}
.eyebrow--ondark { color: #ff7e80; }
.eyebrow--ondark::before { background: #ff7e80; }
.voff__copy h2 {
  font-family: var(--font-display); font-weight: 400; font-size: var(--fs-lg);
  color: #ffffff; letter-spacing: -0.01em; margin: var(--sp-2) 0 var(--sp-3);
}
.voff__copy p { color: var(--ink-on-dark-dim); font-size: var(--fs-sm); line-height: 1.65; margin: 0 0 var(--sp-5); }
.voff__copy p strong { color: #ffffff; font-weight: 600; }

.verify-result--ok {
  background: rgba(15, 118, 110, 0.06);
  border: 1px solid var(--ok);
  border-radius: var(--r-3);
  padding: var(--sp-5);
  margin-top: var(--sp-5);
}
.verify-result--err {
  background: rgba(190, 24, 30, 0.06);
  border: 1px solid var(--fail);
  border-radius: var(--r-3);
  padding: var(--sp-5);
  margin-top: var(--sp-5);
  color: var(--fail);
}
.verify-result__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ok);
  margin-bottom: var(--sp-3);
}
.verify-result--err .verify-result__badge { color: var(--fail); }
.verify-result__h {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  margin: 0 0 var(--sp-4);
  letter-spacing: -0.01em;
}
.verify-result__data { margin: 0; }
.verify-result__row {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--sp-3);
  padding: 0.5em 0;
  border-top: 1px solid var(--rule);
  font-size: 0.92rem;
}
.verify-result__row:first-child { border-top: none; }
.verify-result__row dt { color: var(--ink-60); font-weight: 500; }
.verify-result__row dd { margin: 0; color: var(--ink-90); word-break: break-all; }
@media (max-width: 540px) {
  .verify-result__row { grid-template-columns: 1fr; gap: 2px; }
}

.verify-offline {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  text-align: center;
}
.verify-offline__label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-60);
  margin-bottom: var(--sp-3);
}


/* ─── Download page rows ──────────────────────────────────────────────── */

.download-row {
  padding-block: var(--sp-5);
}
.download-row h2 {
  font-size: clamp(1.6rem, 1.4rem + 0.8vw, 2.2rem);
  margin: var(--sp-3) 0;
}
.download-row__req {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-60);
  letter-spacing: 0.02em;
}
.download-row__req span:first-child {
  font-weight: 600;
  color: var(--locus-red);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-right: 1em;
}

/* Light variant of dl-tile per la pagina download */
.dl-tile--light {
  background: var(--paper-card);
  color: var(--ink-100);
  border-color: var(--rule-strong);
}
.dl-tile--light:hover {
  background: var(--paper);
  border-color: var(--ink-100);
}
.dl-tile--light .dl-tile__sub { color: var(--ink-40); }


/* ─── Legal pages prose ───────────────────────────────────────────────── */

.legal-prose h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  margin: var(--sp-6) 0 var(--sp-3);
  color: var(--ink-100);
}
.legal-prose p, .legal-prose li {
  color: var(--ink-70);
  line-height: 1.7;
  font-size: 0.97rem;
}
.legal-prose ul { padding-left: 1.4em; margin: 0 0 var(--sp-4); }
.legal-prose li { margin-bottom: 6px; }
.legal-prose a { color: var(--acqf-navy); text-decoration: underline; text-underline-offset: 3px; }
.legal-prose a:hover { color: var(--locus-red); }
.legal-prose strong { color: var(--ink-90); }
.legal-prose code { font-family: var(--font-mono); background: var(--paper-cream); padding: 1px 6px; border-radius: 3px; font-size: 0.88em; }


/* ─── Dashboard layout (collapsible sidebar) ───────────────────────────── */

.page-dashboard .site-header { border-bottom-color: var(--rule); }
.page-dashboard .site-footer { display: none; }

.dashboard {
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 68px;
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: calc(100vh - var(--header-h));
  background: var(--paper);
  transition: grid-template-columns var(--dur-base) var(--ease);
}
.dashboard.is-collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

@media (max-width: 880px) {
  .dashboard { grid-template-columns: 1fr; }
  .dashboard.is-collapsed { grid-template-columns: 1fr; }
}

.dash-sidebar {
  background: var(--paper-cream);
  border-right: 1px solid var(--rule);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  position: sticky;
  top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto;
  overflow-x: hidden;
  transition: padding var(--dur-base) var(--ease);
}
.dashboard.is-collapsed .dash-sidebar { padding: var(--sp-3) 10px; }

@media (max-width: 880px) {
  .dash-sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--rule); }

  /* La topbar diventa una barra "Menu" a tutta larghezza, sempre tappabile */
  .dash-sidebar__topbar { margin-bottom: 0; }
  .dash-sidebar__toggle {
    width: 100%;
    height: auto;
    justify-content: space-between;
    padding: 11px 14px;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ink-100);
  }
  .dash-sidebar__toggle-label { display: inline; }

  /* Drawer CHIUSO (default su mobile, impostato via JS): mostra solo la barra Menu */
  .dashboard.is-mobile-collapsed .dash-sidebar__user,
  .dashboard.is-mobile-collapsed .dash-sidebar__slots,
  .dashboard.is-mobile-collapsed .dash-sidebar__nav,
  .dashboard.is-mobile-collapsed .dash-sidebar__link--logout { display: none; }

  /* Drawer chiuso: niente padding extra / niente bordo doppio */
  .dashboard.is-mobile-collapsed .dash-sidebar { padding-bottom: var(--sp-3); }
}

/* Top bar with toggle button */
.dash-sidebar__topbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}
.dashboard.is-collapsed .dash-sidebar__topbar { justify-content: center; }

.dash-sidebar__toggle {
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-1);
  color: var(--ink-60);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all var(--dur-fast) var(--ease);
}
.dash-sidebar__toggle:hover { color: var(--ink-100); border-color: var(--ink-70); }
.dash-sidebar__toggle svg { width: 18px; height: 18px; }
/* Label "Menu" nel toggle: nascosta su desktop, visibile su mobile (vedi @media 880) */
.dash-sidebar__toggle-label { display: none; }

/* User block */
.dash-sidebar__user {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--rule);
  min-width: 0;
}
.dashboard.is-collapsed .dash-sidebar__user {
  justify-content: center;
  border-bottom: none;
  padding-bottom: var(--sp-3);
}
.dash-sidebar__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--locus-red);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  flex: 0 0 auto;
}
.dash-sidebar__user-meta { min-width: 0; flex: 1; }
.dash-sidebar__name {
  font-weight: 600;
  color: var(--ink-100);
  font-size: 0.95rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash-sidebar__email {
  font-size: 0.72rem;
  color: var(--ink-40);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Slots block */
.dash-sidebar__slots {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  padding: var(--sp-3) var(--sp-4);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  transition: padding var(--dur-base) var(--ease);
}
.dashboard.is-collapsed .dash-sidebar__slots {
  flex-direction: column;
  align-items: center;
  padding: var(--sp-2) 6px;
  gap: 2px;
}
.dash-sidebar__slots-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-40);
}
.dash-sidebar__slots-n {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--locus-red);
}
.dashboard.is-collapsed .dash-sidebar__slots-n { font-size: 1rem; }

/* Nav */
.dash-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  margin-top: var(--sp-2);
}
.dash-sidebar__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.65em 0.85em;
  border-radius: var(--r-2);
  color: var(--ink-70);
  font-size: 0.92rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}
.dash-sidebar__link:hover { background: var(--paper-card); color: var(--ink-100); }
.dash-sidebar__link.is-active {
  background: var(--ink-100);
  color: var(--paper);
}
.dash-sidebar__icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: currentColor;
}
.dash-sidebar__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 1;
  transition: opacity var(--dur-fast) var(--ease);
}

/* Collapsed state: hide labels, keep icons centered */
.dashboard.is-collapsed .dash-sidebar__link {
  justify-content: center;
  padding: 0.7em 0;
}
.dashboard.is-collapsed .dash-sidebar__label,
.dashboard.is-collapsed .dash-sidebar__user-meta { display: none; }

/* Logout link variant */
.dash-sidebar__link--logout {
  margin-top: auto;
  border-top: 1px solid var(--rule);
  border-radius: 0;
  padding-top: var(--sp-3);
  color: var(--ink-60);
}
.dash-sidebar__link--logout:hover {
  color: var(--locus-red);
  background: transparent;
}

.dash-main {
  padding: clamp(1.5rem, 3vw, 3rem);
  background: var(--paper);
  min-width: 0;  /* permette al main di shrinkare quando il content è wide */
}

.dash-head { margin-bottom: var(--sp-6); }
.dash-head h1 {
  font-size: clamp(1.7rem, 1.4rem + 1vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.025em;
  margin: 0 0 var(--sp-2);
}
.dash-head__sub { color: var(--ink-60); font-size: 0.92rem; margin: 0; }

.dash-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
.dash-tile {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  padding: var(--sp-5);
}
.dash-tile__value {
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--ink-100);
  line-height: 1;
  margin-bottom: var(--sp-3);
}
.dash-tile__k {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-90);
  margin-bottom: 2px;
}
.dash-tile__sub {
  font-size: 0.78rem;
  color: var(--ink-40);
}

.dash-block { margin-bottom: var(--sp-7); }
.dash-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--rule);
}
.dash-block__head h2 {
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0;
}

.dash-empty {
  text-align: center;
  padding: var(--sp-9) var(--sp-5);
  background: var(--paper-card);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-3);
  color: var(--ink-60);
}
.dash-empty svg { color: var(--ink-25); margin: 0 auto var(--sp-4); }
.dash-empty p { margin: 0 0 var(--sp-5); }

.dash-table-wrap {
  overflow-x: auto;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
}
.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.dash-table thead {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-40);
  background: var(--paper-cream);
}
.dash-table th {
  text-align: left;
  font-weight: 500;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--rule-strong);
}
.dash-table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--rule);
  color: var(--ink-90);
  vertical-align: middle;
}
.dash-table tbody tr:last-child td { border-bottom: none; }
.dash-table tbody tr:hover { background: var(--paper-cream); }

.dash-note {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--paper-cream);
  border-left: 3px solid var(--locus-red);
  border-radius: 0 var(--r-2) var(--r-2) 0;
  color: var(--ink-70);
  font-size: 0.92rem;
  line-height: 1.55;
}
.dash-note a { color: var(--acqf-navy); text-decoration: underline; text-underline-offset: 3px; }
.dash-note code {
  font-family: var(--font-mono);
  background: var(--paper);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.85em;
  border: 1px solid var(--rule);
}
.dash-link {
  color: var(--acqf-navy);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 0.92rem;
}
.dash-link:hover { color: var(--locus-red); }


/* Dashboard pill chips (status badges in tables) */
.dash-pill {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: var(--r-1);
  background: var(--paper-cream);
  color: var(--ink-70);
  border: 1px solid var(--rule-strong);
  white-space: nowrap;
}
.dash-pill--photo { background: var(--acqf-navy-tint); color: var(--acqf-navy); border-color: var(--acqf-navy); }
.dash-pill--video { background: var(--locus-red-tint); color: var(--locus-red); border-color: var(--locus-red); }
.dash-pill--audio { background: #e0f2fe; color: #0369a1; border-color: #0369a1; }
.dash-pill--tsa   { background: var(--paper-cream); color: var(--ink-70); }
.dash-pill--eidas { background: rgba(15, 118, 110, 0.1); color: var(--ok); border-color: var(--ok); }
.dash-pill--ok    { background: rgba(15, 118, 110, 0.1); color: var(--ok); border-color: var(--ok); }
.dash-pill--warn  { background: rgba(245, 158, 11, 0.1); color: var(--warn); border-color: var(--warn); }
.dash-pill--err   { background: rgba(190, 24, 30, 0.08); color: var(--fail); border-color: var(--fail); }


/* Dashboard filters (library) */
.dash-filters {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.dash-filters__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: end;
}
.dash-filters__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 140px;
}
.dash-filters__field > span {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-40);
}
.dash-filters__field input,
.dash-filters__field select {
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 0.5em 0.7em;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-2);
  background: var(--paper);
  color: var(--ink-90);
  transition: border-color var(--dur-fast) var(--ease);
}
.dash-filters__field input:focus,
.dash-filters__field select:focus {
  outline: none;
  border-color: var(--locus-red);
}
.dash-filters__check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.88rem;
  color: var(--ink-70);
  padding-bottom: 6px;
}
.dash-filters__check input {
  width: 16px;
  height: 16px;
  accent-color: var(--locus-red);
}
.dash-filters__reset {
  align-self: end;
  padding-bottom: 6px;
  color: var(--ink-60);
  font-size: 0.85rem;
  text-decoration: underline;
}
.dash-filters__reset:hover { color: var(--locus-red); }


/* Dashboard pager */
.dash-pager {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--sp-5);
  justify-content: center;
}
.dash-pager__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-70);
  border: 1px solid var(--rule);
  transition: all var(--dur-fast) var(--ease);
}
.dash-pager__page:hover { background: var(--paper-card); border-color: var(--ink-70); color: var(--ink-100); }
.dash-pager__page.is-active {
  background: var(--ink-100);
  color: var(--paper);
  border-color: var(--ink-100);
  pointer-events: none;
}


/* Bundle detail page */
.dash-bundle {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 1.4fr;
  gap: var(--sp-6);
  align-items: start;
}
@media (max-width: 960px) { .dash-bundle { grid-template-columns: 1fr; } }
.dash-bundle__preview { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
@media (max-width: 960px) { .dash-bundle__preview { position: static; } }
.dash-bundle__data {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.dash-data-section {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  padding: var(--sp-5);
}
.dash-data-section__h {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--locus-red);
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--rule);
}
.dash-data-section__dl { margin: 0; }
.dash-data-section__row {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--sp-3);
  padding: 0.45em 0;
  border-top: 1px solid var(--rule);
  font-size: 0.92rem;
}
.dash-data-section__row:first-child { border-top: none; padding-top: 0; }
.dash-data-section__row dt {
  color: var(--ink-60);
  font-weight: 500;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.dash-data-section__row dd { margin: 0; color: var(--ink-100); }
@media (max-width: 540px) {
  .dash-data-section__row { grid-template-columns: 1fr; gap: 2px; }
}


/* API key box */
.api-key-box {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4);
  background: var(--ink-100);
  border-radius: var(--r-2);
  margin-top: var(--sp-3);
}
.api-key-box__code {
  flex: 1;
  color: var(--paper);
  font-size: 0.9rem;
  word-break: break-all;
  letter-spacing: 0.04em;
  font-weight: 400;
}
.api-key-box .btn {
  background: var(--paper);
  color: var(--ink-100);
  border-color: var(--paper);
}
.api-key-box .btn:hover { background: var(--paper-cream); }


/* ─── Scroll reveal (IntersectionObserver-driven) ──────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-delay="100"] { transition-delay: 100ms; }
[data-reveal-delay="200"] { transition-delay: 200ms; }
[data-reveal-delay="300"] { transition-delay: 300ms; }
[data-reveal-delay="400"] { transition-delay: 400ms; }


/* ─── Utility ──────────────────────────────────────────────────────────── */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.no-wrap { white-space: nowrap; }

/* ============================================================
   Tickets — badge / timeline / modal / attachments / form
   ============================================================ */

/* Stat tiles row riusabile */
.tk-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-bottom: var(--sp-6); }
@media (max-width: 720px) { .tk-stats { grid-template-columns: repeat(2, 1fr); } }
.tk-stat {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  padding: var(--sp-4) var(--sp-4);
  text-align: center;
}
.tk-stat__n {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink-100);
}
.tk-stat--open  .tk-stat__n { color: var(--locus-red); }
.tk-stat--work  .tk-stat__n { color: #b45309; }
.tk-stat--done  .tk-stat__n { color: var(--ok); }
.tk-stat__l {
  margin-top: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-60);
}

/* Badge (stati + priorità) — pill compatte */
.tk-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.tk-status--aperto         { background: #dbeafe; color: #1d4ed8; }
.tk-status--in_attesa      { background: #fef3c7; color: #92400e; }
.tk-status--in_lavorazione { background: #cffafe; color: #155e75; }
.tk-status--risolto        { background: #dcfce7; color: #166534; }
.tk-status--chiuso         { background: #e5e7eb; color: #374151; }

.tk-prio--bassa   { background: #f3f4f6; color: #4b5563; }
.tk-prio--normale { background: #dbeafe; color: #1d4ed8; }
.tk-prio--alta    { background: #fef3c7; color: #92400e; }
.tk-prio--urgente { background: #fee2e2; color: #991b1b; }

/* Lista ticket: link riga */
.dash-table a.tk-link { color: var(--ink-100); font-weight: 600; text-decoration: none; }
.dash-table a.tk-link:hover { color: var(--locus-red); }
.dash-table .tk-code { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-70); }

/* Tutta la riga ticket è cliccabile (gestito via JS). Cursore + hover sottolineano l'interattività. */
.dash-table tr.tk-row-clickable { cursor: pointer; }
.dash-table tr.tk-row-clickable:hover a.tk-link { color: var(--locus-red); }

/* Toolbar lista (filtri + nuovo) */
.tk-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;              /* "New ticket" centrato sul form filtri */
  justify-content: space-between;
  margin-bottom: var(--sp-5);
}
.tk-toolbar form { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; flex: 1; }

/* Bottoni dentro la toolbar ticket: stessa altezza dei textbox/select per non
   spezzare l'allineamento orizzontale. Riduciamo il padding verticale al
   livello degli input (.dash-filters__field input/select: padding 0.5em 0.7em,
   font 0.92rem). */
.tk-toolbar .btn {
  padding: 0.5em 1.1em;
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Dettaglio ticket */
.tk-detail {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: var(--sp-5);
}
@media (max-width: 900px) { .tk-detail { grid-template-columns: 1fr; } }

.tk-header {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.tk-header__title {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 0 0 var(--sp-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
}
.tk-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  color: var(--ink-60);
  font-size: 0.88rem;
}

.tk-side {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  align-self: start;
}
.tk-side h3 {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin: 0 0 var(--sp-3);
}
.tk-side dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 10px 12px; }
.tk-side dt { font-size: 0.75rem; color: var(--ink-50); text-transform: uppercase; letter-spacing: 0.05em; }
.tk-side dd { margin: 0; font-size: 0.9rem; color: var(--ink-90); }

/* Timeline conversazione */
.tk-timeline { display: flex; flex-direction: column; gap: var(--sp-4); }
.tk-msg {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-3);
  padding: var(--sp-4);
  position: relative;
}
.tk-msg--staff {
  background: var(--paper-cream);
  border-color: rgba(234, 27, 29, 0.2);
  border-left: 3px solid var(--locus-red);
}
.tk-msg__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}
.tk-msg__author { font-weight: 600; color: var(--ink-100); display: inline-flex; gap: 8px; align-items: center; }
.tk-msg__staff-tag {
  background: var(--locus-red);
  color: white;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tk-msg__date { color: var(--ink-50); font-size: 0.82rem; font-family: var(--font-mono); }
.tk-msg__body { color: var(--ink-90); line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }

/* Allegati: chips + lista verticale */
.tk-attach-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.tk-attach {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-2);
  color: var(--ink-90);
  font-size: 0.85rem;
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.tk-attach:hover { border-color: var(--locus-red); color: var(--locus-red); }
.tk-attach__size { color: var(--ink-50); font-family: var(--font-mono); font-size: 0.75rem; }
.tk-attach-list--stacked { flex-direction: column; align-items: stretch; }
.tk-attach-list--stacked .tk-attach { width: 100%; }

/* Form reply + nuovo ticket */
.tk-form { display: grid; gap: var(--sp-3); }
.tk-form__field { display: flex; flex-direction: column; gap: 6px; }
.tk-form__field > label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-60);
}
.tk-form__field > label .req { color: var(--locus-red); }
.tk-form__field input,
.tk-form__field select,
.tk-form__field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.55em 0.75em;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-2);
  background: var(--paper);
  color: var(--ink-100);
  transition: border-color var(--dur-fast) var(--ease);
}
.tk-form__field textarea { resize: vertical; min-height: 110px; line-height: 1.5; }
.tk-form__field input:focus,
.tk-form__field select:focus,
.tk-form__field textarea:focus { outline: none; border-color: var(--locus-red); }
.tk-form__hint { font-size: 0.78rem; color: var(--ink-50); }
.tk-form__actions {
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}
.tk-form__actions .tk-grow { flex: 1; }
.tk-form__alert {
  padding: var(--sp-3);
  border-radius: var(--r-2);
  font-size: 0.92rem;
  display: none;
}
.tk-form__alert.is-err { display: block; background: rgba(190,24,30,0.08); color: var(--fail); border: 1px solid rgba(190,24,30,0.25); }
.tk-form__alert.is-ok  { display: block; background: rgba(15,118,110,0.08); color: var(--ok);   border: 1px solid rgba(15,118,110,0.25); }

/* Native <dialog> modal */
.tk-modal {
  border: none;
  border-radius: var(--r-3);
  padding: 0;
  max-width: 640px;
  width: calc(100% - 32px);
  box-shadow: 0 24px 64px rgba(0,0,0,0.22);
}
.tk-modal::backdrop { background: rgba(16, 22, 36, 0.55); }
.tk-modal__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--rule);
}
.tk-modal__head h2 { margin: 0; font-size: 1.05rem; }
.tk-modal__close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-60);
  cursor: pointer;
  padding: 4px 8px;
}
.tk-modal__close:hover { color: var(--locus-red); }
.tk-modal__body { padding: var(--sp-5); max-height: 70vh; overflow-y: auto; }

/* Print */
@media print {
  .site-header, .site-footer, .final-cta { display: none; }
  body { background: white; color: black; }
}

/* ===================================================================
   DOCUMENTAZIONE v2.0 — claim/intro/garanzie/crossplatform (2026-06)
   =================================================================== */

/* Claim "Locus in due righe" — fascia statement su navy, molto enfatizzata */
.statement{background:var(--acqf-navy-deep);color:var(--ink-on-dark);
  padding:clamp(2.4rem,5vw,4rem) 0;}
.statement__inner{max-width:1320px;margin:0 auto;padding:0 clamp(1.2rem,4vw,2.5rem);text-align:center;}
.statement__eyebrow{font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-on-dark-dim);margin:0 0 1.2rem;}
.statement__q{font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.55rem, 0.85rem + 2.2vw, 2.7rem);line-height:1.16;letter-spacing:-0.02em;
  margin:0 auto;max-width:none;text-wrap:balance;}
.statement__q b{font-weight:600;color:#fff;}
.statement__q .accent{color:var(--locus-red);font-style:normal;}

/* Blocco "Cos'è LOCUS" — intro narrativa */
.intro__lede{font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.25rem, 0.9rem + 1.2vw, 1.7rem);line-height:1.35;letter-spacing:-0.01em;
  color:var(--ink-90);max-width:34ch;}
.intro__grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(1.5rem,4vw,3.2rem);
  align-items:center;}
.intro__text .intro__lede{margin-bottom:1.2rem;}
.intro__p{color:var(--ink-60);line-height:1.7;margin:0 0 1rem;max-width:60ch;}
.intro__p:last-child{margin-bottom:0;}
.intro__devices{display:flex;gap:clamp(.7rem,2.5vw,1.6rem);justify-content:center;
  align-items:flex-start;flex-wrap:wrap;}
.intro__devices .xplat__device img{width:min(188px,40vw);}
@media (max-width:760px){.intro__grid{grid-template-columns:1fr;gap:1.6rem;}}

/* Cross-platform — iPhone + Android affiancati */
.xplat__devices{display:flex;gap:clamp(1.2rem,5vw,4rem);justify-content:center;
  align-items:flex-end;flex-wrap:wrap;margin-top:2.2rem;}
.xplat__device{text-align:center;margin:0;}
.xplat__device img{width:min(230px,42vw);height:auto;border-radius:20px;
  border:1px solid var(--rule);box-shadow:0 24px 60px -28px rgba(15,36,58,.5);background:#fff;}
.xplat__os{display:inline-block;margin-top:1rem;font-family:var(--font-mono);font-size:var(--fs-xs);
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-40);}
.xplat__os b{color:var(--acqf-navy);font-weight:600;}

/* Breadcrumb visibile (pagine interne) — coerente con BreadcrumbList JSON-LD */
.breadcrumb{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:0 0 1.1rem;
  font-family:var(--font-mono);font-size:var(--fs-xs);letter-spacing:.04em;}
.breadcrumb__link{color:var(--ink-40);text-decoration:none;transition:color .15s ease;}
.breadcrumb__link:hover,.breadcrumb__link:focus-visible{color:var(--locus-red);}
.breadcrumb__sep{color:var(--ink-25);}
.breadcrumb__current{color:var(--ink-60);}

/* Numeri step grandi nei card "Modello di fiducia" (features) */
.problem-card__number.trust-num{
  font-family:var(--font-display);
  font-size:clamp(2.4rem, 1.6rem + 1.8vw, 3.2rem);
  font-weight:600;
  line-height:1;
  letter-spacing:-0.02em;
  text-transform:none;
  color:var(--locus-red);
  margin-bottom:.5rem;
}

/* Sezione Zero-Trust (home) — manifesto su banda navy */
.zt { background: var(--acqf-navy-deep); color: var(--ink-on-dark); }
.zt__inner { max-width: 860px; margin: 0 auto; text-align: center;
  padding: 0 clamp(1rem, 4vw, 2rem); }
.zt__h { font-family: var(--font-display); font-weight: 500; color: #fff;
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3.4rem); line-height: 1.12; letter-spacing: -0.02em;
  margin: .8rem 0 1.5rem; }
.zt__h em { color: var(--locus-red); font-style: normal; }
.zt__lede { color: var(--ink-on-dark-dim); font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.28rem);
  line-height: 1.65; max-width: 62ch; margin: 0 auto; text-wrap: pretty; }
.zt__lede strong { color: #fff; font-weight: 600; }
.zt__motto { font-family: var(--font-display); font-style: italic; font-weight: 500;
  color: var(--locus-red); }

/* Riga d'impatto finale della sezione Zero-Trust */
.zt__punch { margin: 1.7rem auto 0; max-width: 50ch; font-family: var(--font-display);
  font-style: italic; font-weight: 500; color: var(--locus-red); text-wrap: balance;
  font-size: clamp(1.15rem, 1rem + 0.75vw, 1.6rem); line-height: 1.3; }