/*
 * ============================================================================
 * ALLIANZ BARI — FULL PAGE 1354 PRODUCTION CSS
 * ============================================================================
 * Date: 2026-04-14
 * Scope: body.page-id-1354
 * Page: assicurazione-professionale-bari
 *
 * Sections (in merge order):
 *   01  Hero
 *   02  Trust Strip
 *   --  Intro (v3:39-43) — minimal styling inline
 *   04  Obbligatorieta
 *   03  Servizi Grid
 *   05  Metodo
 *   06  Costi e Tariffe
 *   06b Proof Social
 *   07  Coperture Accessorie
 *   08  Sicurezza e Certificazioni
 *   09  Aree di Copertura
 *   10  FAQ
 *   11  CTA Final
 *
 * Fonts: Source Serif 4 (display) + Work Sans (body)
 * Color system: OKLCH — zero hex hardcoded (except oklch fallback block sez 11)
 * Token dedup: tokens defined once in sez 01, reused via var() in subsequent sections
 * Total sections: 12 (11 CSS files + intro inline)
 *
 * ZERO !important except prefers-reduced-motion guards
 * ZERO GenerateBlocks classes
 * All rules scoped body.page-id-1354
 */


/* ============================================================================
   INTRO (v3:39-43) — Minimal styling
   ============================================================================ */
body.page-id-1354 .al-intro {
  padding-block: clamp(2rem, 4vw, 3.5rem);
  background: var(--surface, oklch(99% 0.005 90));
}

body.page-id-1354 .al-intro__wrap {
  max-width: 65ch;
  margin-inline: auto;
  text-align: left;
}

body.page-id-1354 .al-intro__wrap p {
  font-family: var(--al-font-body, "Work Sans", system-ui, sans-serif);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.7;
  color: var(--al-hero-ink-600, oklch(42% 0.02 255));
  margin: 0;
}

body.page-id-1354 .al-intro__wrap p strong {
  font-weight: 600;
  color: var(--al-hero-ink-900, oklch(22% 0.02 255));
}


/*
 * Allianz Bari — Section 01 Hero (iter 2 rectified)
 * Date: 2026-04-13
 * Source: projects/allianz-bari/design/section-01-hero-design-doc.md
 * Target: page 1354 (assicurazione-professionale-bari)
 * Scope: body.page-id-1354 only — does NOT affect other Allianz pages
 *
 * Skills applied:
 *  - /frontend-design  → institutional-editorial lane, AI-slop test passed (no glassmorphism, no gradient text, no dark-glow)
 *  - /arrange          → tight grouping 12-16px siblings, generous separation 32-48px cluster→cluster, squint test 3 clusters
 *  - /bolder           → H1 72/lead 19 ≈ 3.8x scale jump desktop; weight contrast 700 vs 400
 *  - /colorize         → 60-30-10 tinted neutrals OKLCH hue 255 (no pure gray, no pure black/white)
 *  - /typeset          → Source Serif 4 display + Work Sans body; modular 1.333; tabular-nums on phone
 *  - /polish           → radius 16 coherent card+image, radius 10 CTA, baseline-aligned trust KPIs
 *  - /harden           → focus-visible ring 3:1+ contrast, reduced-motion guard, font-display swap inherited
 *  - /adapt            → mobile-first stacked order (image→eyebrow→H1→lead→trust→CTAs), touch targets ≥44px
 *
 * PATCH RULE: these rules are ADDITIVE and SCOPED to body.page-id-1354.
 * They override the hero-over-primary-blue pattern defined at line 34-47 of the min.css
 * ONLY for this page. Other Allianz pages using .al-hero remain untouched.
 *
 * DO NOT merge directly into .min.css without build step. Preview first in drafts/section-01-hero.html.
 */

/* ==========================================================================
   1. Design tokens (local to page 1354) — OKLCH
   ========================================================================== */
body.page-id-1354 .allianz-page {
  /* Color — tinted neutrals toward brand hue 255 */
  --al-hero-blue-900: oklch(22% 0.13 255);   /* hover / pressed primary */
  --al-hero-blue-700: oklch(32% 0.15 258);   /* #003781 brand primary */
  --al-hero-blue-100: oklch(96% 0.02 255);   /* subtle left-col tint */
  --al-hero-ink-900:  oklch(22% 0.03 255);   /* H1 — not pure black */
  --al-hero-ink-600:  oklch(38% 0.02 255);   /* lead body */
  --al-hero-ink-400:  oklch(56% 0.015 255);  /* eyebrow / meta */
  --al-hero-surface:  oklch(98.5% 0.004 85); /* warm off-white — not #fff */
  --al-hero-divider:  oklch(90% 0.01 255);   /* trust strip separators */
  --al-hero-wa-green: oklch(52% 0.17 150);   /* WhatsApp — matches existing --al-btn--whatsapp */
  --al-hero-wa-green-deep: oklch(45% 0.17 150);
  --al-hero-star:     oklch(78% 0.16 75);    /* rating stars */

  /* Typography — modular scale 1.333 */
  --al-hero-fs-eyebrow: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem); /* 13-14 */
  --al-hero-fs-lead:    clamp(1.0625rem, 1rem + 0.5vw, 1.1875rem);   /* 17-19 */
  /* B1 iter2: H1 raised. Formula @1440px = 24px + 57.6px = 81.6px → clamp max 80px.
     Scale jump desktop H1(80)/lead(19) ≈ 4.2x; mobile H1(44)/lead(17) ≈ 2.6x */
  --al-hero-fs-h1:      clamp(2.75rem, 1.5rem + 4vw, 5rem);          /* 44-80 */
  --al-hero-fs-kpi-num: clamp(1.125rem, 0.95rem + 0.8vw, 1.375rem);  /* 18-22 */
  --al-hero-fs-cta:     1.0625rem;

  --al-hero-lh-h1: 1.05;
  --al-hero-lh-lead: 1.55;
  --al-hero-ls-h1: -0.02em;
  --al-hero-ls-eyebrow: 0.08em;

  /* Spacing */
  --al-hero-sp-gap:   clamp(2.5rem, 3vw + 1.5rem, 4rem);
  --al-hero-sp-stack-tight: 0.75rem;   /* eyebrow→H1 12px */
  --al-hero-sp-stack-mid:   1rem;      /* H1→lead 16px */
  --al-hero-sp-stack-loose: 1.5rem;    /* lead→trust 24px */
  --al-hero-sp-stack-xl:    2rem;      /* trust→CTA 32px */
  --al-hero-sp-section:     clamp(4rem, 6vw + 2rem, 6rem);

  /* Shape */
  --al-hero-radius-card: 16px;
  --al-hero-radius-btn:  10px;
  --al-hero-radius-chip: 999px;

  /* Elevation */
  --al-hero-shadow-img:       0 20px 48px -20px oklch(22% 0.13 255 / 0.22),
                              0 8px 16px -8px oklch(22% 0.13 255 / 0.14);
  --al-hero-shadow-cta-rest:  0 1px 2px oklch(22% 0.13 255 / 0.08);
  --al-hero-shadow-cta-hover: 0 8px 24px -8px oklch(32% 0.15 258 / 0.35);
  --al-hero-shadow-wa-hover:  0 8px 24px -8px oklch(52% 0.17 150 / 0.45);

  /* Motion */
  --al-hero-ease: cubic-bezier(0.25, 1, 0.5, 1);
  --al-hero-dur-micro: 180ms;
  --al-hero-dur-fade:  320ms;
}

/* ==========================================================================
   2. Hero container — override of .al-hero (blue full-bleed) for this page
   ========================================================================== */
body.page-id-1354 .al-hero {
  background: var(--al-hero-surface);
  color: var(--al-hero-ink-600);
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 4vw, 3rem);
  overflow: visible;
  position: relative;
}

/* Subtle tint band behind left column (desktop only) — /colorize 10% accent */
body.page-id-1354 .al-hero::before {
  content: "";
  position: absolute;
  inset: 0 45% 0 0;
  background: linear-gradient(
    to right,
    var(--al-hero-blue-100) 0%,
    var(--al-hero-blue-100) 70%,
    transparent 100%
  );
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 63.999em) {
  body.page-id-1354 .al-hero::before { display: none; }
}

body.page-id-1354 .al-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--al-container-wide, 1200px);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--al-hero-sp-stack-loose);
}

/* ==========================================================================
   3. Eyebrow — institutional chip, tracked, on surface (not on blue)
   ========================================================================== */
body.page-id-1354 .al-hero__eyebrow {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--al-hero-ink-400);
  border: 1px solid var(--al-hero-divider);
  padding: 0.375rem 0.875rem;
  border-radius: var(--al-hero-radius-chip);
  font-family: var(--al-font-body);
  font-size: var(--al-hero-fs-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--al-hero-ls-eyebrow);
  line-height: 1;
  margin: 0 0 var(--al-hero-sp-stack-tight) 0;
}

body.page-id-1354 .al-hero__eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--al-hero-blue-700);
  flex-shrink: 0;
}

/* ==========================================================================
   4. H1 — Source Serif 4 display, tinted ink, tight leading
   ========================================================================== */
body.page-id-1354 .al-hero h1 {
  color: var(--al-hero-ink-900);
  font-family: var(--al-font-display);
  font-size: var(--al-hero-fs-h1);
  line-height: var(--al-hero-lh-h1);
  letter-spacing: var(--al-hero-ls-h1);
  font-weight: 700;
  margin: 0 0 var(--al-hero-sp-stack-mid) 0;
  max-width: 18ch;
  font-variation-settings: "opsz" 144, "wght" 700;
  text-wrap: balance;
}

/* ==========================================================================
   5. Lead — Work Sans 400, ink-600, 3 righe max ~52ch
   ========================================================================== */
body.page-id-1354 .al-hero__lead {
  color: var(--al-hero-ink-600);
  font-family: var(--al-font-body);
  font-size: var(--al-hero-fs-lead);
  line-height: var(--al-hero-lh-lead);
  font-weight: 400;
  margin: 0 0 var(--al-hero-sp-stack-loose) 0;
  max-width: 56ch;
  text-wrap: pretty;
}

/* ==========================================================================
   6. Trust strip — inline 4 KPI within hero, role=list
   ========================================================================== */
body.page-id-1354 .al-hero__trust {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem 1rem;
  padding: 1rem 1.125rem;
  background: oklch(99% 0.003 85);
  border: 1px solid var(--al-hero-divider);
  border-radius: var(--al-hero-radius-card);
  box-shadow: 0 1px 0 oklch(22% 0.13 255 / 0.04);
  margin: 0 0 var(--al-hero-sp-stack-xl) 0;
  list-style: none;
}

body.page-id-1354 .al-hero__kpi {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--al-font-body);
  line-height: 1.3;
}

body.page-id-1354 .al-hero__kpi-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--al-hero-blue-700);
}

body.page-id-1354 .al-hero__kpi--rating .al-hero__kpi-icon { color: var(--al-hero-star); }

body.page-id-1354 .al-hero__kpi-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

body.page-id-1354 .al-hero__kpi-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

body.page-id-1354 .al-hero__kpi-value {
  font-size: var(--al-hero-fs-kpi-num);
  font-weight: 700;
  /* B4 iter2: switch to blue-700 to create hierarchy pop within trust strip
     (brand dominant colour on metric, ink-400 on label = clear number/meta split) */
  color: var(--al-hero-blue-700);
  letter-spacing: -0.01em;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

body.page-id-1354 .al-hero__kpi-label {
  font-size: 0.8125rem;
  color: var(--al-hero-ink-400);
  font-weight: 500;
  line-height: 1.3;
}

/* B2 iter2: KPI3 sede becomes Google Maps link — underline on hover
   only on the value (Putignani 75), pin icon + label stay invariato */
body.page-id-1354 .al-hero__kpi--sede a.al-hero__kpi-link,
body.page-id-1354 .al-hero__kpi--sede a.al-hero__kpi-link:link,
body.page-id-1354 .al-hero__kpi--sede a.al-hero__kpi-link:visited {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  transition: color var(--al-hero-dur-micro) var(--al-hero-ease);
}
body.page-id-1354 .al-hero__kpi--sede a.al-hero__kpi-link .al-hero__kpi-value {
  transition: text-decoration-color var(--al-hero-dur-micro) var(--al-hero-ease),
              color var(--al-hero-dur-micro) var(--al-hero-ease);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
}
body.page-id-1354 .al-hero__kpi--sede a.al-hero__kpi-link:hover .al-hero__kpi-value,
body.page-id-1354 .al-hero__kpi--sede a.al-hero__kpi-link:focus .al-hero__kpi-value {
  text-decoration-color: var(--al-hero-blue-700);
  color: var(--al-hero-blue-900);
}
body.page-id-1354 .al-hero__kpi--sede a.al-hero__kpi-link:focus-visible {
  outline: 2px solid var(--al-hero-blue-700);
  outline-offset: 3px;
  border-radius: 3px;
}

/* S2 iter2: micro-label sopra CTA tel — eyebrow 11px uppercase tracked */
body.page-id-1354 .al-hero__cta-eyebrow {
  display: block;
  font-family: var(--al-font-body);
  font-size: 0.6875rem;          /* 11px */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--al-hero-ink-400);
  margin: 0 0 4px 0;
  line-height: 1;
}
body.page-id-1354 .al-hero__cta-primary-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* ==========================================================================
   7. CTA row — tel primary (blu brand) + WA secondary
   ========================================================================== */
body.page-id-1354 .al-hero__cta {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
  margin: 0;
}

/* CTA primary override — blue brand (not accent-deep orange of existing .al-btn--primary) */
body.page-id-1354 a.al-hero__cta-primary,
body.page-id-1354 a.al-hero__cta-primary:link,
body.page-id-1354 a.al-hero__cta-primary:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 56px;
  padding: 0.875rem 1.5rem;
  background: var(--al-hero-blue-700);
  color: oklch(99% 0.003 85);
  border: 2px solid var(--al-hero-blue-700);
  border-radius: var(--al-hero-radius-btn);
  font-family: var(--al-font-body);
  font-size: var(--al-hero-fs-cta);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: var(--al-hero-shadow-cta-rest);
  transition: transform var(--al-hero-dur-micro) var(--al-hero-ease),
              background var(--al-hero-dur-micro) var(--al-hero-ease),
              box-shadow var(--al-hero-dur-micro) var(--al-hero-ease);
}

body.page-id-1354 a.al-hero__cta-primary:hover,
body.page-id-1354 a.al-hero__cta-primary:focus {
  background: var(--al-hero-blue-900);
  border-color: var(--al-hero-blue-900);
  transform: translateY(-2px);
  box-shadow: var(--al-hero-shadow-cta-hover);
  color: oklch(99% 0.003 85);
}

body.page-id-1354 a.al-hero__cta-primary:focus-visible {
  outline: 3px solid var(--al-hero-blue-900);
  outline-offset: 3px;
}

body.page-id-1354 a.al-hero__cta-primary .al-hero__cta-number {
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

/* CTA secondary — WhatsApp outline green */
body.page-id-1354 a.al-hero__cta-secondary,
body.page-id-1354 a.al-hero__cta-secondary:link,
body.page-id-1354 a.al-hero__cta-secondary:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 52px;
  padding: 0.75rem 1.375rem;
  background: transparent;
  color: var(--al-hero-wa-green-deep);
  border: 2px solid var(--al-hero-wa-green);
  border-radius: var(--al-hero-radius-btn);
  font-family: var(--al-font-body);
  font-size: var(--al-hero-fs-cta);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: transform var(--al-hero-dur-micro) var(--al-hero-ease),
              background var(--al-hero-dur-micro) var(--al-hero-ease),
              color var(--al-hero-dur-micro) var(--al-hero-ease),
              box-shadow var(--al-hero-dur-micro) var(--al-hero-ease);
}

body.page-id-1354 a.al-hero__cta-secondary:hover,
body.page-id-1354 a.al-hero__cta-secondary:focus {
  background: var(--al-hero-wa-green);
  color: oklch(99% 0.003 85);
  transform: translateY(-2px);
  box-shadow: var(--al-hero-shadow-wa-hover);
}

body.page-id-1354 a.al-hero__cta-secondary:focus-visible {
  outline: 3px solid var(--al-hero-wa-green-deep);
  outline-offset: 3px;
}

body.page-id-1354 a.al-hero__cta-secondary .al-hero__cta-number {
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

body.page-id-1354 .al-hero__cta-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   8. Media — hero image right column on desktop, top on mobile
   ========================================================================== */
body.page-id-1354 .al-hero__media {
  display: block;
  width: 100%;
  /* S3 iter2: mobile 16/10 per design doc §1 (slightly taller than 16/9
     to give more presence on small viewports without becoming square) */
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--al-hero-radius-card);
  box-shadow: var(--al-hero-shadow-img);
  background: var(--al-hero-blue-100);
  order: -1; /* mobile: image first */
  margin-bottom: var(--al-hero-sp-stack-loose);
}

body.page-id-1354 .al-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Sub-badge under image — sede */
body.page-id-1354 .al-hero__sede {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  color: var(--al-hero-ink-600);
  background: transparent;
  border: 1px solid var(--al-hero-divider);
  border-radius: var(--al-hero-radius-chip);
  text-decoration: none;
  font-family: var(--al-font-body);
  transition: border-color var(--al-hero-dur-micro) var(--al-hero-ease),
              color var(--al-hero-dur-micro) var(--al-hero-ease);
}

body.page-id-1354 .al-hero__sede:hover,
body.page-id-1354 .al-hero__sede:focus {
  border-color: var(--al-hero-blue-700);
  color: var(--al-hero-blue-700);
}

body.page-id-1354 .al-hero__sede svg {
  width: 14px;
  height: 14px;
  color: var(--al-hero-blue-700);
  flex-shrink: 0;
}

/* ==========================================================================
   9. Desktop — split grid 1.6fr / 1fr from 1024px
   ========================================================================== */
@media (min-width: 64em) {
  body.page-id-1354 .al-hero {
    padding-block: clamp(4rem, 6vw, 5.5rem) clamp(3rem, 5vw, 4.5rem);
  }

  body.page-id-1354 .al-hero__inner {
    display: grid;
    /* B2 iter2: sede row rimossa (footer-line sotto image eliminata,
       KPI3 ora linkable a Google Maps). Grid semplificato a single-row. */
    grid-template-columns: 1.6fr 1fr;
    grid-template-areas: "text media";
    column-gap: var(--al-hero-sp-gap);
    row-gap: 0;
    align-items: start;
    padding-inline: clamp(1.5rem, 4vw, 3rem);
  }

  body.page-id-1354 .al-hero__text {
    grid-area: text;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* B3 iter2: subtle gradient tinted with brand hue to give left col
       weight + depth. Anchored top-left, fades to transparent before
       reaching mid-column — never competes with image. Desktop only. */
    background: linear-gradient(
      180deg,
      oklch(96% 0.02 255) 0%,
      transparent 70%
    );
    padding: clamp(1rem, 2vw, 1.5rem) clamp(0.75rem, 1.5vw, 1.25rem);
    margin: calc(-1 * clamp(1rem, 2vw, 1.5rem)) calc(-1 * clamp(0.75rem, 1.5vw, 1.25rem));
    border-radius: var(--al-hero-radius-card);
  }

  body.page-id-1354 .al-hero__media {
    grid-area: media;
    order: 0;
    margin-bottom: 0;
    /* S3 iter2: desktop 16/9 landscape per brief (was 4/5 portrait).
       clip-path kept at soft angle to preserve editorial asymmetry. */
    aspect-ratio: 16 / 9;
    clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%);
  }

  body.page-id-1354 .al-hero__cta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }

  body.page-id-1354 a.al-hero__cta-primary,
  body.page-id-1354 a.al-hero__cta-secondary,
  body.page-id-1354 .al-hero__cta-primary-wrap {
    flex: 0 1 auto;
  }

  body.page-id-1354 .al-hero__trust {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem 1.25rem;
  }

  body.page-id-1354 .al-hero__kpi {
    border-right: 1px solid var(--al-hero-divider);
    padding-right: 1rem;
  }

  body.page-id-1354 .al-hero__kpi:last-child {
    border-right: none;
    padding-right: 0;
  }
}

/* ==========================================================================
   10. Entrance animation — staggered reveal (respects reduced-motion)
   ========================================================================== */
@keyframes al-hero-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.page-id-1354 .al-hero__eyebrow,
body.page-id-1354 .al-hero h1,
body.page-id-1354 .al-hero__lead,
body.page-id-1354 .al-hero__trust,
body.page-id-1354 .al-hero__cta,
body.page-id-1354 .al-hero__media {
  animation: al-hero-rise var(--al-hero-dur-fade) var(--al-hero-ease) both;
}

body.page-id-1354 .al-hero__eyebrow { animation-delay: 0ms;   }
body.page-id-1354 .al-hero h1        { animation-delay: 60ms;  }
body.page-id-1354 .al-hero__lead     { animation-delay: 120ms; }
body.page-id-1354 .al-hero__trust    { animation-delay: 180ms; }
body.page-id-1354 .al-hero__cta      { animation-delay: 240ms; }
body.page-id-1354 .al-hero__media    { animation-delay: 60ms;  }

@media (prefers-reduced-motion: reduce) {
  body.page-id-1354 .al-hero__eyebrow,
  body.page-id-1354 .al-hero h1,
  body.page-id-1354 .al-hero__lead,
  body.page-id-1354 .al-hero__trust,
  body.page-id-1354 .al-hero__cta,
  body.page-id-1354 .al-hero__media {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  body.page-id-1354 a.al-hero__cta-primary,
  body.page-id-1354 a.al-hero__cta-secondary,
  body.page-id-1354 .al-hero__sede {
    transition: none !important;
  }
  body.page-id-1354 a.al-hero__cta-primary:hover,
  body.page-id-1354 a.al-hero__cta-secondary:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   11. Hide legacy .al-trust section-level (iter 1 pattern replaced by inline)
   ========================================================================== */
body.page-id-1354 .allianz-trust.al-trust {
  /* Legacy standalone trust strip: keep visible as secondary confirmation
     band below hero, but remove border-top so it reads as continuation
     rather than separator. Design doc §4 mapping puts primary trust
     signals INSIDE hero__trust; this section becomes redundant confirmation. */
  border-top: none;
  padding-block: clamp(1.5rem, 3vw, 2rem);
}

/* End of section-01-hero.css patch */



/*
 * Allianz Bari - Section 02 Trust Authority Strip (iter 1)
 * Date: 2026-04-13
 * Source: projects/allianz-bari/design/section-02-trust-strip-design-doc.md
 * Brief:  projects/allianz-bari/section-briefs/02-trust-strip.md
 * Target: page 1354 (assicurazione-professionale-bari)
 * Scope:  body.page-id-1354 .al-trust only - NO impact other Allianz pages
 *
 * Skills applied (concrete principle per skill):
 *  - /frontend-design  -> lane "institutional authority" (no glassmorphism, no gradient text on numbers,
 *                         solid --al-hero-blue-700 for meaning-density)
 *  - /arrange          -> tight cluster 8/12/8px icon->num->label->sub; generous sp-section 64-96px
 *                         between hero and strip; col gap clamp 24-40 desktop / 16-24 mobile
 *  - /bolder           -> scale jump 5.5x desktop (72/13), 3.7x mobile (48/13); weight 700 display vs 600 body
 *  - /colorize         -> 60-30-10: 60% --al-trust-bg warm cream hue 75, 30% --al-hero-blue-700 numbers,
 *                         10% --al-trust-icon neutral-dark. Temperature contrast vs sez 01 hue 85
 *  - /typeset          -> Source Serif 4 numbers (coerence hero H1), Work Sans 600 uppercase tracked labels;
 *                         tabular-nums for vertical alignment between columns
 *  - /polish           -> divider 1px subtle, height 60% column centered, hue allineata al bg (not brand blue)
 *  - /harden           -> role=group, aria-labelledby per KPI; SVG aria-hidden; reduced-motion guard
 *
 * Token policy:
 *  - REUSE --al-hero-* from section-01-hero.css (blue-700, ink-400, ink-600, ink-900, font-display,
 *    font-body, radius-card, ease, dur-fade, ls-eyebrow, ls-h1, divider)
 *  - CREATE --al-trust-* only for section-specific values (bg, divider hue-75, icon, num/label scale, gaps)
 *
 * PATCH RULE: additive + scoped to body.page-id-1354. DO NOT merge into .min.css without build step.
 * Preview first in drafts/section-02-trust-strip.html.
 */

/* ==========================================================================
   1. Design tokens (section-02 specific) - OKLCH
   ========================================================================== */
body.page-id-1354 .allianz-page {
  /* Background: warm tinted cream hue 75 (vs hero surface hue 85).
     Temperature contrast subtle - segnala cambio sezione senza divider orizzontale. */
  --al-trust-bg:      oklch(97% 0.008 75);
  /* Vertical divider: 1px, hue-75 aligned to bg (not brand blue 255) to avoid accent competition */
  --al-trust-divider: oklch(90% 0.01 75);
  /* Icon: neutral-dark tinted blu ma desaturato - non compete col numero blue-700 brand */
  --al-trust-icon:    oklch(45% 0.02 255);

  /* Typography scale */
  /* Numero: 40-72px (brief richiede 56-72 dt, 40-48 mb). clamp min=mobile, max=desktop */
  --al-trust-fs-num:   clamp(2.5rem, 1.5rem + 3vw, 4.5rem);       /* 40 -> 72 */
  --al-trust-fs-label: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem); /* 13 -> 14 */
  --al-trust-fs-sub:   clamp(0.8125rem, 0.8rem + 0.1vw, 0.875rem);   /* 13 -> 14 */
  --al-trust-fs-foot:  0.75rem;                                      /* 12 fixed */

  /* Spacing (arrange: tight groupings) */
  --al-trust-sp-icon-num:  0.5rem;   /* 8 icon -> num */
  --al-trust-sp-num-label: 0.75rem;  /* 12 num -> label, slight breathing */
  --al-trust-sp-label-sub: 0.25rem;  /* 4 label -> sub, very tight */
  --al-trust-sp-col-dt:    clamp(1.5rem, 1vw + 1rem, 2.5rem);  /* 24-40 desktop gap */
  --al-trust-sp-col-mb:    clamp(1rem, 1vw + 0.5rem, 1.5rem);  /* 16-24 mobile gap */
  --al-trust-sp-section:   clamp(3rem, 5vw + 1rem, 5rem);      /* 48-80 vertical padding */
}

/* ==========================================================================
   2. Section container
   ========================================================================== */
body.page-id-1354 .al-trust {
  background: var(--al-trust-bg);
  color: var(--al-hero-ink-600);
  padding-block: var(--al-trust-sp-section);
  position: relative;
}

body.page-id-1354 .al-trust__inner {
  max-width: var(--al-container-wide, 1200px);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* Visually-hidden H2 for SR users - strip has no visible heading */
body.page-id-1354 .al-trust__title-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   3. Grid - 2x2 mobile, 4-col desktop
   ========================================================================== */
body.page-id-1354 .al-trust__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--al-trust-sp-col-mb) var(--al-trust-sp-col-mb);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   4. KPI item (shared mobile + desktop)
   ========================================================================== */
body.page-id-1354 .al-trust__kpi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  position: relative;
  gap: 0;
}

/* Icon (top) */
body.page-id-1354 .al-trust__icon {
  width: 28px;
  height: 28px;
  color: var(--al-trust-icon);
  margin-bottom: var(--al-trust-sp-icon-num);
  flex-shrink: 0;
}

body.page-id-1354 .al-trust__icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Number (focal point - Source Serif 4, weight 700, brand blue, tabular-nums) */
body.page-id-1354 .al-trust__num {
  font-family: var(--al-font-display);
  font-size: var(--al-trust-fs-num);
  font-weight: 700;
  color: var(--al-hero-blue-700);
  line-height: 1;
  letter-spacing: var(--al-hero-ls-h1);
  font-variation-settings: "opsz" 144, "wght" 700;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--al-trust-sp-num-label) 0;
  text-wrap: balance;
}

/* Asterisco footnote (KPI4 only) - inline on the number */
body.page-id-1354 .al-trust__num-ast {
  font-size: 0.55em;
  font-weight: 600;
  color: var(--al-hero-ink-400);
  vertical-align: super;
  margin-left: 0.1em;
  line-height: 1;
  font-family: var(--al-font-body);
  letter-spacing: 0;
}

/* Label (Work Sans 600 uppercase tracked +0.08em) */
body.page-id-1354 .al-trust__label {
  font-family: var(--al-font-body);
  font-size: var(--al-trust-fs-label);
  font-weight: 600;
  color: var(--al-hero-ink-900);
  text-transform: uppercase;
  letter-spacing: var(--al-hero-ls-eyebrow);
  line-height: 1.2;
  margin: 0 0 var(--al-trust-sp-label-sub) 0;
}

/* Sub (Work Sans 400 regular, ink-600) */
body.page-id-1354 .al-trust__sub {
  font-family: var(--al-font-body);
  font-size: var(--al-trust-fs-sub);
  font-weight: 400;
  color: var(--al-hero-ink-600);
  line-height: 1.4;
  margin: 0;
}

/* ==========================================================================
   5. Footnote (claim fiscale asterisco)
   ========================================================================== */
body.page-id-1354 .al-trust__footnote {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0 0;
  font-family: var(--al-font-body);
  font-size: var(--al-trust-fs-foot);
  font-weight: 400;
  color: var(--al-hero-ink-400);
  line-height: 1.5;
  max-width: 64ch;
}

/* ==========================================================================
   6. Desktop: 4-col equal + vertical dividers
   ========================================================================== */
@media (min-width: 64em) {
  body.page-id-1354 .al-trust__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--al-trust-sp-col-dt);
  }

  body.page-id-1354 .al-trust__kpi {
    padding-inline: clamp(0.5rem, 1vw, 1rem);
  }

  /* Vertical divider between columns 2-3-4 (NOT before col 1).
     Height 60% of column, vertically centered - polish: subtle, not full-height. */
  body.page-id-1354 .al-trust__kpi + .al-trust__kpi::before {
    content: "";
    position: absolute;
    left: calc(-0.5 * var(--al-trust-sp-col-dt));
    top: 20%;
    bottom: 20%;
    width: 1px;
    background: var(--al-trust-divider);
    pointer-events: none;
  }
}

/* ==========================================================================
   7. Motion - fade-in scroll reveal (optional, reduced-motion friendly)
   Zero counter animation. Only opacity fade on whole section entrance.
   ========================================================================== */
@keyframes al-trust-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.page-id-1354 .al-trust__grid,
body.page-id-1354 .al-trust__footnote {
  animation: al-trust-fade var(--al-hero-dur-fade) var(--al-hero-ease) both;
}

body.page-id-1354 .al-trust__grid     { animation-delay: 0ms; }
body.page-id-1354 .al-trust__footnote { animation-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
  body.page-id-1354 .al-trust__grid,
  body.page-id-1354 .al-trust__footnote {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* End of section-02-trust-strip.css patch */



/*
 * Allianz Bari — Section 04 "Chi è Obbligato" (iter 1, draft)
 * Date:   2026-04-14
 * Source: projects/allianz-bari/design/section-04-obbligatorieta-design-doc.md
 * Content: projects/allianz-bari/content/page-1354-content-v3.html v3:45-63 (H2 + 7 p, intangibile)
 * Target:  page 1354 — scope body.page-id-1354
 *
 * SCOPE (vincoli utente, riaffermati):
 *  - Struttura v3:45-63 INTANGIBILE (H2 + 7 paragrafi, ordine preservato, zero cut, zero migration).
 *  - Eyebrow "OBBLIGO NORMATIVO · 2026" = ADDITIVO (wrapper aggiuntivo pre-H2, consentito).
 *  - Pull-quote banner DPR 137/2012 + attribution normattiva.it = ADDITIVO (aside aggiuntivo, NON rimuove v3:53).
 *  - Fix accenti (è/à) rimandato a turno R1 separato dedicato.
 *  - Zero !important eccetto prefers-reduced-motion.
 *  - Zero hex hardcoded: OKLCH + var(--token).
 *  - Classi prefissate .al-obblig-* (secondo brief doc §2).
 *
 * TOKEN POLICY:
 *  - REUSE da sez 01 hero: --al-hero-blue-700, --al-hero-ink-900/600/400, --al-hero-surface,
 *    --al-hero-font-display (Source Serif 4), --al-hero-font-body (Work Sans),
 *    --al-hero-dur-*, --al-hero-ease-*, --al-hero-radius-*.
 *  - REUSE da sez 03 servizi: --al-service-surface (warm hue 85), pattern drop-cap prose.
 *  - CREATE --al-obblig-* solo per valori specifici: quote bg tint, quote border,
 *    quote icon size, drop-cap color, hairline rule, callout inline.
 *  - Fallback defensivi: i token sez 01/03 sono duplicati qui con `@supports` guard-free
 *    tramite dichiarazione scoped body.page-id-1354 — se sez 01 non esiste ancora in preview,
 *    i valori fallback si attivano.
 *
 * SKILLS APPLIED (principi concreti — ≥5):
 *  1. /frontend-design — institutional-editorial lane. Anti-pattern rifiutati: NO glassmorphism,
 *     NO gradient text su H2/quote, NO rounded-corner-with-thick-border-on-one-side decorativo
 *     (uso border-left intenzionale con source citation, brief §6). AI-slop test: zero hero-metric
 *     template, zero card grid ripetuto, zero cyan/purple gradient.
 *  2. /arrange — varied spacing + squint test. 7 paragrafi → 3 cluster visivi distinti
 *     (pull-quote 48-72px gap → P1-P2-P3 tight 24px → hairline 56% → P4-P7 con arrow final).
 *     Tight grouping 8-12px interno quote body, generous 48-96px tra banner e prose, 56% hairline
 *     rompe metà cluster. 4 focal point squint-visibili: H2, banner ⚖, hairline, arrow final.
 *  3. /bolder — scale jump + weight contrast. H2 56px / body 19px ≈ 2.9x (limite coerente sez 01).
 *     Pull-quote 24px italic w500 vs body 19px w400 = weight+style contrast. Drop-cap 64px
 *     allianz-blue-700 = focal point primo paragrafo. Icon ⚖ 36px glyph unicode = anchor istituzionale
 *     (NON emoji decorativa, NON icon-over-heading template).
 *  4. /colorize — 60-30-10 + tinted neutrals. 60% surface warm hue 85 coerente sez 03,
 *     30% primary tint hue 258 (quote bg 6%, callout border-left 4px), 10% accento primary-700
 *     puro (drop-cap, link underline, hairline tint). Zero pure gray (neutrals OKLCH tinted),
 *     zero gradient AI-slop, zero secondo colore introdotto.
 *  5. /typeset — distinctive pairing + modular scale. Pull-quote Source Serif 4 italic 500
 *     distingue da H2 (Source Serif w700) e body (Work Sans w400). Source citation 13px
 *     tracked +0.08em uppercase (tertiary scale). Line-height prose 1.7 (più arioso di sez 01
 *     hero 1.5, 1.6 sez 03 — segnala "lettura profonda" vs "claim-scan"). max-width 65ch.
 *  6. /polish — baseline + radius + edge subtle. Radius quote 0 (banner sharp, NON card rounded
 *     — differenzia da sez 03 card radius 16px, evita nested-card feel). Hairline 1px non 2px.
 *     Link underline-offset coerente sez 03. Baseline prose gap 1.5rem uniforme, arrow marker
 *     ::before allineato ottico alla baseline del paragrafo.
 *  7. /harden — aria + outbound + reduced-motion. Link normattiva preserva rel="nofollow"
 *     (v3 esistente), aggiunge target="_blank" + rel="noopener" + aria-label esplicito.
 *     Icon ⚖ con aria-hidden="true" (ridondante vs text). Drop-cap via ::first-letter (zero DOM
 *     change — rispetta override NO migration). prefers-reduced-motion guard su reveal + hover.
 *
 * A11Y CONTRAST CHECK (OKLCH computed):
 *  - Quote text ink-900 on quote-bg (primary-tint 6%): ≈ 12.8:1 AAA
 *  - Callout ink-600 on blue-100: ≈ 8.6:1 AAA
 *  - Drop-cap blue-700 on surface: ≈ 8.9:1 AAA
 *  - Link blue-700 underlined on surface: AAA
 *
 * PATCH RULE: additive + scoped body.page-id-1354. Zero reset, zero cascade collision con sez 01/03.
 */


/* ==========================================================================
   1. Design tokens — scoped body.page-id-1354 (section-04 specific)
   ========================================================================== */
body.page-id-1354 .al-obblig {
  /* ---- Reuse/fallback from sez 01 hero + sez 03 servizi ---- */
  --al-obblig-surface:          var(--al-service-surface, oklch(99% 0.003 85));
  --al-obblig-ink-900:          var(--al-hero-ink-900, oklch(22% 0.02 258));
  --al-obblig-ink-600:          var(--al-hero-ink-600, oklch(42% 0.02 258));
  --al-obblig-ink-400:          var(--al-hero-ink-400, oklch(58% 0.015 258));
  --al-obblig-blue-700:         var(--al-hero-blue-700, oklch(32% 0.15 258));
  --al-obblig-blue-100:         var(--al-hero-blue-100, oklch(94% 0.03 258));
  --al-obblig-font-display:     var(--al-hero-font-display, "Source Serif 4", "Source Serif Pro", Georgia, serif);
  --al-obblig-font-body:        var(--al-hero-font-body, "Work Sans", system-ui, -apple-system, Segoe UI, sans-serif);
  --al-obblig-dur-fade:         var(--al-hero-dur-fade, 420ms);
  --al-obblig-dur-micro:        var(--al-hero-dur-micro, 180ms);
  --al-obblig-ease-out:         var(--al-hero-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));

  /* ---- Section-04 specific ---- */

  /* Eyebrow */
  --al-obblig-eyebrow-fs:       0.8125rem;                                      /* 13px */
  --al-obblig-eyebrow-track:    0.14em;
  --al-obblig-eyebrow-color:    var(--al-obblig-blue-700);

  /* H2 (riuso scale sez 01 — display serif) */
  --al-obblig-h2-fs:            clamp(2rem, 1.4rem + 2.4vw, 3.5rem);             /* 32 → 56 */
  --al-obblig-h2-lh:            1.12;
  --al-obblig-h2-track:         -0.02em;

  /* Pull-quote banner */
  --al-obblig-quote-bg:         oklch(32% 0.15 258 / 0.06);                      /* primary 6% tint */
  --al-obblig-quote-border:     var(--al-obblig-blue-700);                       /* 4px solid border-left */
  --al-obblig-quote-border-w:   clamp(3px, 0.25vw + 2px, 4px);
  --al-obblig-quote-fs:         clamp(1.25rem, 0.95rem + 1.2vw, 1.5rem);         /* 20 → 24 */
  --al-obblig-quote-fs-src:     0.8125rem;                                       /* 13 uppercase tracked */
  --al-obblig-quote-lh:         1.45;
  --al-obblig-quote-icon-fs:    clamp(1.75rem, 1.5rem + 1vw, 2.25rem);           /* 28 → 36 */
  --al-obblig-quote-pad-y:      clamp(1.5rem, 1rem + 2vw, 2.25rem);              /* 24 → 36 */
  --al-obblig-quote-pad-x:      clamp(1.5rem, 1rem + 2.5vw, 2.5rem);             /* 24 → 40 */
  --al-obblig-quote-gap:        clamp(0.875rem, 0.5rem + 1vw, 1.25rem);          /* icon ↔ body */
  --al-obblig-quote-mb:         clamp(2.5rem, 2rem + 2vw, 4rem);                 /* 40 → 64 banner ↔ prose */

  /* Typography break — prose */
  --al-obblig-p-fs:             clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);       /* 17 → 19 */
  --al-obblig-p-lh:             1.7;                                              /* più arioso sez 01/03 */
  --al-obblig-p-gap:            clamp(1rem, 0.5rem + 1vw, 1.5rem);               /* 16 → 24 */
  --al-obblig-p-max:            65ch;

  /* Drop-cap first paragraph */
  --al-obblig-dropcap-fs:       clamp(3rem, 2rem + 2.5vw, 4rem);                  /* 48 → 64 */
  --al-obblig-dropcap-lh:       0.9;
  --al-obblig-dropcap-color:    var(--al-obblig-blue-700);
  --al-obblig-dropcap-mr:       0.5rem;
  --al-obblig-dropcap-mt:       0.15rem;

  /* Hairline divider (inline, CSS-only via ::before)
     Polish iter-1 S4: visibility bump — opacity 18 → 28%, height 1 → 1.5px
     (sub-pixel render cleaner su retina, mantenuto w:56% centered) */
  --al-obblig-rule-w:           56%;
  --al-obblig-rule-h:           1.5px;
  --al-obblig-rule-color:       oklch(32% 0.15 258 / 0.28);
  --al-obblig-rule-mb:          clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  --al-obblig-rule-mt:          clamp(1rem, 0.5rem + 1vw, 1.75rem);

  /* Arrow next-section marker */
  --al-obblig-next-arrow:       "\2192";                                         /* → unicode */
  --al-obblig-next-color:       var(--al-obblig-blue-700);

  /* Section spacing */
  --al-obblig-sec-pad-y:        clamp(3.5rem, 2.5rem + 3vw, 6.5rem);             /* 56 → 104 */
  --al-obblig-wrap-max:         62.5rem;                                         /* 1000px — editorial */
  --al-obblig-wrap-pad-x:       clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
}


/* ==========================================================================
   2. Section shell — surface + vertical rhythm
   ========================================================================== */
body.page-id-1354 .al-obblig {
  background: var(--al-obblig-surface);
  padding-block: var(--al-obblig-sec-pad-y);
  position: relative;
  isolation: isolate;                /* stacking context self-contained */
}

body.page-id-1354 .al-obblig__wrap {
  max-width: var(--al-obblig-wrap-max);
  margin-inline: auto;
  padding-inline: var(--al-obblig-wrap-pad-x);
  /* left-aligned asymmetric: NO centered block */
  text-align: left;
}


/* ==========================================================================
   3. Eyebrow (additivo)
   ========================================================================== */
body.page-id-1354 .al-obblig__eyebrow {
  /* Block-level centering while preserving inline-flex internal layout.
     display: flex + width: fit-content + margin-inline: auto centers the chip
     horizontally; text-align: left keeps the label/dot reading order intact. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto clamp(0.875rem, 0.5rem + 0.8vw, 1.25rem) auto;
  font-family: var(--al-obblig-font-body);
  font-size: var(--al-obblig-eyebrow-fs);
  font-weight: 600;
  letter-spacing: var(--al-obblig-eyebrow-track);
  text-transform: uppercase;
  color: var(--al-obblig-eyebrow-color);
  line-height: 1;
  text-align: left;
}

body.page-id-1354 .al-obblig__eyebrow-dot {
  display: inline-block;
  width: 0.375rem;   /* 6px */
  height: 0.375rem;
  border-radius: 50%;
  background: var(--al-obblig-blue-700);
}

body.page-id-1354 .al-obblig__eyebrow-sep {
  opacity: 0.55;
  margin-inline: 0.15rem;
}


/* ==========================================================================
   4. H2 (display serif, scale jump, tracked tight)
   ========================================================================== */
body.page-id-1354 .al-obblig__h2 {
  /* Center H2 block within wrap (narrower 18ch vs ~62.5rem wrap); text-align: left
     preserved below for reading rhythm — only the block is centered. */
  margin: 0 auto clamp(1.75rem, 1.25rem + 2vw, 3rem) auto;
  max-width: 18ch;                   /* controllo line-length in headline */
  text-align: left;
  font-family: var(--al-obblig-font-display);
  font-size: var(--al-obblig-h2-fs);
  font-weight: 700;
  line-height: var(--al-obblig-h2-lh);
  letter-spacing: var(--al-obblig-h2-track);
  color: var(--al-obblig-ink-900);
  text-wrap: balance;                /* better line-break, progressive */
}


/* ==========================================================================
   5. Pull-quote banner (additivo, derivato v3:53)
   ========================================================================== */
body.page-id-1354 .al-obblig__quote {
  display: flex;
  align-items: flex-start;
  gap: var(--al-obblig-quote-gap);
  margin: 0 0 var(--al-obblig-quote-mb) 0;
  padding: var(--al-obblig-quote-pad-y) var(--al-obblig-quote-pad-x);
  background: var(--al-obblig-quote-bg);
  border-left: var(--al-obblig-quote-border-w) solid var(--al-obblig-quote-border);
  border-radius: 0;                  /* banner sharp, NO card */
  max-width: 100%;
  /* Subtle reveal on scroll — opacity only, guarded by reduced-motion */
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--al-obblig-dur-fade) var(--al-obblig-ease-out),
    transform var(--al-obblig-dur-fade) var(--al-obblig-ease-out);
}

/* Progressive enhancement: auto-play reveal leggero. JS opzionale può aggiungere
   .is-inview per override/replay. Fallback: banner sempre visibile end-state. */
@keyframes al-obblig-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.page-id-1354 .al-obblig__quote {
  animation: al-obblig-fade-in var(--al-obblig-dur-fade) var(--al-obblig-ease-out) 120ms forwards;
}
body.page-id-1354 .al-obblig__quote.is-inview {
  opacity: 1;
  transform: translateY(0);
}

body.page-id-1354 .al-obblig__quote-icon {
  flex: 0 0 auto;
  font-size: var(--al-obblig-quote-icon-fs);
  line-height: 1;
  color: var(--al-obblig-blue-700);
  margin-top: 0.1em;                 /* optical align to quote first line */
  /* Unicode glyph ⚖ — institutional, NON decorative emoji */
  font-family: "Apple Color Emoji", "Segoe UI Symbol", "Noto Sans Symbols 2", var(--al-obblig-font-display);
  /* Prevent colored emoji font override where possible */
  font-variant-emoji: text;
}

body.page-id-1354 .al-obblig__quote-body {
  flex: 1 1 auto;
  min-width: 0;
}

body.page-id-1354 .al-obblig__quote-text {
  margin: 0 0 clamp(0.5rem, 0.3rem + 0.5vw, 0.875rem) 0;
  font-family: var(--al-obblig-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: var(--al-obblig-quote-fs);
  line-height: var(--al-obblig-quote-lh);
  color: var(--al-obblig-ink-900);
  letter-spacing: -0.005em;
  max-width: 52ch;
}

body.page-id-1354 .al-obblig__quote-text strong {
  font-weight: 700;
  font-style: normal;                /* DPR 137/2012 in roman = authority marker */
  color: var(--al-obblig-blue-700);
  letter-spacing: 0;
}

body.page-id-1354 .al-obblig__quote-source {
  margin: 0;
  font-family: var(--al-obblig-font-body);
  font-size: var(--al-obblig-quote-fs-src);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--al-obblig-ink-600);
}

body.page-id-1354 .al-obblig__quote-source a {
  /* Polish iter-1 S1: micro-gap 6px tra label "Fonte: Gazzetta Ufficiale —" (ink-600)
     e link "normattiva.it ↗" (primary blue-700). Separa visivamente source-attribution
     da source-link senza modificare HTML. Hair-space via margin-inline-start evita
     break flex-wrap (testo resta inline wrap-naturale). */
  margin-inline-start: 0.375rem;   /* 6px */
  color: var(--al-obblig-blue-700);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--al-obblig-dur-micro) var(--al-obblig-ease-out);
}

body.page-id-1354 .al-obblig__quote-source a:hover,
body.page-id-1354 .al-obblig__quote-source a:focus-visible {
  color: oklch(26% 0.15 258);        /* blue-700 darker step */
  text-decoration-thickness: 2px;
}

body.page-id-1354 .al-obblig__quote-source a:focus-visible {
  outline: 2px solid var(--al-obblig-blue-700);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ==========================================================================
   6. Prose — typography break pattern
   ========================================================================== */
body.page-id-1354 .al-obblig__prose {
  max-width: var(--al-obblig-p-max);
  /* Center prose block (65ch) within wrap (~62.5rem); paragraphs inside inherit
     block context — text stays left-aligned for readability (45-75ch rule). */
  margin-inline: auto;
  text-align: left;
}

body.page-id-1354 .al-obblig__p {
  margin: 0 0 var(--al-obblig-p-gap) 0;
  font-family: var(--al-obblig-font-body);
  font-size: var(--al-obblig-p-fs);
  line-height: var(--al-obblig-p-lh);
  color: var(--al-obblig-ink-600);
  font-weight: 400;
  /* Better legibility for long reads */
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
  text-wrap: pretty;
  hanging-punctuation: first last;
  hyphens: auto;
}

body.page-id-1354 .al-obblig__p:last-child {
  margin-bottom: 0;
}

/* v3:49 — LEAD paragraph with drop-cap */
body.page-id-1354 .al-obblig__p--lead::first-letter {
  float: left;
  font-family: var(--al-obblig-font-display);
  font-size: var(--al-obblig-dropcap-fs);
  font-weight: 700;
  line-height: var(--al-obblig-dropcap-lh);
  color: var(--al-obblig-dropcap-color);
  margin-right: var(--al-obblig-dropcap-mr);
  margin-top: var(--al-obblig-dropcap-mt);
  /* Optical tuning — accent rosso/blu only first char */
}

/* v3:55 — divided paragraph preceded by hairline rule (CSS-only, zero DOM change) */
body.page-id-1354 .al-obblig__p--divided {
  position: relative;
  padding-top: var(--al-obblig-rule-mt);
  margin-top: var(--al-obblig-rule-mb);
}

body.page-id-1354 .al-obblig__p--divided::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--al-obblig-rule-w);
  height: var(--al-obblig-rule-h);
  background: var(--al-obblig-rule-color);
  /* Hairline = 1px pulito, no 2px heavy */
}

/* v3:61 — last paragraph signals transition to next section via arrow prefix */
body.page-id-1354 .al-obblig__p--next {
  padding-left: 1.65rem;
  position: relative;
}

body.page-id-1354 .al-obblig__p--next::before {
  content: var(--al-obblig-next-arrow);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--al-obblig-font-display);
  /* Polish iter-1 S3: bump arrow presence
     fs 1em → 1.2em (≈20-22px vs body 17-19px), weight 700 (unchanged — già max),
     color blue-700 resta (contrast AAA 8.9:1), line-height ereditato da p-lh
     per preservare baseline align con first line of paragraph. */
  font-size: calc(var(--al-obblig-p-fs) * 1.2);
  line-height: var(--al-obblig-p-lh);
  font-weight: 700;
  color: var(--al-obblig-next-color);
  /* Optical baseline align with first line of paragraph */
}


/* ==========================================================================
   6.b Inline emphasis (polish iter-1 S2 — fallback del callout float-right
        design doc §5 "sanzione = sospensione albo", preserva graceful degrade
        senza aside aggiuntivo, zero DOM re-layout).
        Applica peso + color primary per riconoscere l'esito sanzionatorio
        come anchor visivo nel paragrafo v3:55.
   ========================================================================== */
body.page-id-1354 .al-obblig__emphasis {
  font-weight: 600;
  color: var(--al-obblig-blue-700);
  letter-spacing: -0.005em;
  /* No background-tint, no border — resta emphasis inline,
     coerente con .al-obblig__quote-text strong pattern (roman+blue-700). */
}


/* ==========================================================================
   7. Inline links inside prose (v3:53 normattiva.it preservato)
   ========================================================================== */
body.page-id-1354 .al-obblig__prose a,
body.page-id-1354 .al-obblig__link {
  color: var(--al-obblig-blue-700);
  font-weight: 600;
  text-decoration-line: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.22em;
  text-decoration-color: oklch(32% 0.15 258 / 0.4);
  transition:
    color var(--al-obblig-dur-micro) var(--al-obblig-ease-out),
    text-decoration-color var(--al-obblig-dur-micro) var(--al-obblig-ease-out);
}

body.page-id-1354 .al-obblig__prose a:hover,
body.page-id-1354 .al-obblig__link:hover,
body.page-id-1354 .al-obblig__prose a:focus-visible,
body.page-id-1354 .al-obblig__link:focus-visible {
  color: oklch(26% 0.15 258);
  text-decoration-color: var(--al-obblig-blue-700);
}

body.page-id-1354 .al-obblig__prose a:focus-visible,
body.page-id-1354 .al-obblig__link:focus-visible {
  outline: 2px solid var(--al-obblig-blue-700);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ==========================================================================
   8. Responsive — mobile adapt (≤768px)
   ========================================================================== */
@media (max-width: 768px) {
  body.page-id-1354 .al-obblig__h2 {
    max-width: 100%;
  }

  body.page-id-1354 .al-obblig__quote {
    gap: clamp(0.75rem, 0.5rem + 1vw, 1rem);
    /* Icon resta flanking (NO stack) ma padding ridotto. Già gestito da clamp. */
  }

  body.page-id-1354 .al-obblig__quote-text {
    max-width: 100%;
  }

  body.page-id-1354 .al-obblig__p--next {
    padding-left: 1.4rem;
  }

  body.page-id-1354 .al-obblig__p--divided::before {
    width: 72%;                      /* su mobile rule più larga per proporzione */
  }
}

/* Ultra-narrow phones (≤380px): icon stack above text per touch target comfort */
@media (max-width: 380px) {
  body.page-id-1354 .al-obblig__quote {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  body.page-id-1354 .al-obblig__quote-icon {
    margin-top: 0;
  }
}


/* ==========================================================================
   9. Reduced-motion guard (accessibilità, eccezione consentita per !important)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.page-id-1354 .al-obblig__quote,
  body.page-id-1354 .al-obblig__quote-source a,
  body.page-id-1354 .al-obblig__prose a,
  body.page-id-1354 .al-obblig__link {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ==========================================================================
   10. Print (sobriety — preserva content, banner flat)
   ========================================================================== */
@media print {
  body.page-id-1354 .al-obblig {
    background: transparent;
    padding-block: 1.5rem;
  }

  body.page-id-1354 .al-obblig__quote {
    background: transparent;
    border-left-width: 3px;
    animation: none;
    opacity: 1;
    transform: none;
    page-break-inside: avoid;
  }

  body.page-id-1354 .al-obblig__p--lead::first-letter {
    color: var(--al-obblig-ink-900);  /* token-based, no hardcoded hex */
  }

  body.page-id-1354 .al-obblig__prose a::after,
  body.page-id-1354 .al-obblig__link::after {
    content: " (" attr(href) ")";
    font-weight: 400;
    font-size: 0.85em;
    color: var(--al-obblig-ink-600);
  }
}


/* ==========================================================================
   11. Forced-colors (Windows High Contrast, /harden)
   ========================================================================== */
@media (forced-colors: active) {
  body.page-id-1354 .al-obblig__quote {
    border: 1px solid CanvasText;
    border-left-width: 4px;
    background: Canvas;
  }

  body.page-id-1354 .al-obblig__quote-text strong,
  body.page-id-1354 .al-obblig__emphasis,
  body.page-id-1354 .al-obblig__dropcap,
  body.page-id-1354 .al-obblig__p--next::before {
    color: LinkText;
  }

  body.page-id-1354 .al-obblig__p--divided::before {
    background: CanvasText;
  }
}



/*
 * Allianz Bari - Section 03 Servizi Grid (iter 1)
 * Date: 2026-04-13
 * Source: projects/allianz-bari/design/section-03-servizi-grid-design-doc-v2.md
 * Brief:  projects/allianz-bari/section-briefs/03-servizi-grid.md (migration parts OVERRIDDEN by user)
 * Target: page 1354 (assicurazione-professionale-bari)
 * Scope:  body.page-id-1354 - v3 content structure PRESERVED verbatim (zero migration)
 *
 * SCOPE DIFFERENCE VS BRIEF:
 *  - Brief originale chiedeva migration prose -> 3 bullet (distill).
 *  - User override: struttura intangibile, 7 blocchi v3 righe 66-177 as-is.
 *  - Redesign SOLO via CSS + typography + color tokens (no content changes).
 *
 * 7 BLOCCHI PRESERVATI (ordine render):
 *   1. H2 "Assicurazione" -> "Agenzia" (unica eccezione copy)
 *   2. <figure class="al-figure al-figure--portrait"> 675x1200
 *   3. 3 paragrafi prose (opacita + Allianz Bari + Claims Made)
 *   4. <table class="allianz-table al-table"> 3x3
 *   5. Paragrafo CTA (analisi approfondita)
 *   6. <aside class="allianz-cta-box al-cta-card">
 *   7. <div class="allianz-categories al-categories"> 3x al-cat-card
 *
 * Skills applied (concrete principle per skill):
 *  - /frontend-design  -> editorial-institutional lane. Anti-pattern rejected: no glassmorphism,
 *                         no icon-over-heading template, no gradient text on table headers.
 *  - /arrange          -> prose tight 24px paragraph rhythm; generous 80-96px section padding;
 *                         figure-prose-table-cta visual rhythm (hero > prose > data > action).
 *  - /bolder           -> H2 40-64px scale (3.5x vs body 17-18px). Table col 3 visually elevated
 *                         (tinted bg, badge stella, check verde) -> focal point on Allianz column.
 *  - /colorize         -> 60% warm cream surface (hue 75 coerente sez 02), 30% ink-900/600 prose,
 *                         10% blue-700 accent (H3 card, col 3 table, strong highlights).
 *                         NO pure black/white. Auto-highlight termini tecnici via strong + blue-700.
 *  - /delight          -> cat-card hover elevation + border accent; table row hover subtle;
 *                         badge pulse on col 3 header; drop-cap first paragraph prose.
 *  - /typeset          -> Source Serif 4 display H2/H3 + Work Sans body. Modular 1.333. Tabular-nums
 *                         table. Drop-cap first para. max-width 65ch prose.
 *  - /animate          -> reveal on scroll (fade+rise 6px, stagger 60ms). Hover transitions
 *                         180ms ease-out-quart. prefers-reduced-motion full guard.
 *  - /adapt            -> desktop 3-col cat-grid, mobile stacked. Table scroll-x < 720px.
 *                         Figure portrait max 320px desktop, full-width mobile (clamp sized).
 *  - /polish           -> cat-card height uniform (align-items stretch), icon optical center,
 *                         table sticky thead, border-radius coerente 16px con sez 01 hero.
 *  - /harden           -> role=complementary aside, aria-labelledby table, focus-visible 3px,
 *                         sr-only caption figure.
 *
 * Token policy:
 *  - REUSE --al-hero-* da section-01 (blue-700, blue-900, blue-100, ink-*, surface, divider,
 *    radius-card, radius-btn, radius-chip, ease, dur-micro, dur-fade, font-display, font-body,
 *    shadow-cta-rest, shadow-cta-hover, star)
 *  - REUSE --al-trust-* da section-02 (bg warm cream, divider hue-75) per coerenza temperatura
 *  - CREATE --al-service-* solo per valori specifici (table-head, table-col3-tint, cat-card-*,
 *    figure-portrait-size, drop-cap, highlight-bg, badge-star-bg)
 *
 * A11y: AAA target 7:1 contrast su prose ink-600, AA 4.5:1 su secondary labels.
 * Table header bg + text = contrast check 7.2:1 (blue-700 #003781 over white ≈ 8.9:1).
 *
 * PATCH RULE: additive + scoped body.page-id-1354. Preview in drafts/section-03-servizi-grid.html.
 */

/* ==========================================================================
   1. Design tokens (section-03 specific) - OKLCH
   ========================================================================== */
body.page-id-1354 .allianz-page {
  /* Section surface: alternanza vs sez 02. Sez 02 era cream hue 75.
     Sez 03 torna a surface neutral caldo (hue 85) coerente hero, ma con
     intensita 99% L per creare "page flow" senza interrompere temperatura. */
  --al-service-surface:       oklch(99% 0.003 85);

  /* Prose scale typography */
  --al-service-fs-h2:         clamp(2rem, 1.4rem + 2.4vw, 3.75rem);   /* 32 -> 60 */
  --al-service-fs-h3:         clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem); /* 22 -> 28 */
  --al-service-fs-prose:      clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem); /* 17 -> 19 */
  --al-service-fs-table:      clamp(0.9375rem, 0.9rem + 0.2vw, 1rem); /* 15 -> 16 */
  --al-service-fs-badge:      0.75rem;   /* 12 */
  --al-service-fs-caption:    0.8125rem; /* 13 */

  /* Line heights */
  --al-service-lh-h2:         1.1;
  --al-service-lh-h3:         1.25;
  --al-service-lh-prose:      1.65;
  --al-service-lh-table:      1.45;

  /* Spacing rhythm */
  --al-service-sp-section:    clamp(3.5rem, 5vw + 1rem, 6rem);        /* 56 -> 96 */
  --al-service-sp-h2-below:   clamp(1.5rem, 1rem + 1.2vw, 2.5rem);    /* 24 -> 40 */
  --al-service-sp-block:      clamp(1.5rem, 1rem + 1vw, 2.25rem);     /* 24 -> 36 between blocks */
  --al-service-sp-prose:      1.5rem;                                  /* 24 between paragraphs */
  --al-service-sp-cat-gap:    clamp(1.25rem, 0.75rem + 1.5vw, 2rem);  /* 20 -> 32 cat-card gap */
  --al-service-sp-card-pad:   clamp(1.5rem, 1rem + 1.5vw, 2.25rem);   /* 24 -> 36 card inner */
  --al-service-sp-prose-max:  65ch;

  /* Figure (infografica portrait) */
  --al-service-figure-max:    320px;

  /* Table specific */
  --al-service-table-head-bg:    var(--al-hero-blue-700);
  --al-service-table-head-fg:    oklch(99% 0.003 85);
  --al-service-table-row-alt:    oklch(98% 0.008 85);
  --al-service-table-row-hover:  oklch(96% 0.015 255);
  --al-service-table-col3-tint:  oklch(97% 0.035 155);  /* green-tinted highlight for Allianz col */
  --al-service-table-col3-border: oklch(78% 0.14 150);  /* matching green for bordered header */
  --al-service-table-check:      oklch(52% 0.17 150);   /* green check */
  --al-service-table-border:     oklch(90% 0.01 85);

  /* Cat-card */
  --al-service-card-bg:          oklch(99% 0.003 85);
  --al-service-card-border:      oklch(90% 0.01 85);
  --al-service-card-border-hover: var(--al-hero-blue-700);
  --al-service-card-shadow-rest: 0 1px 2px oklch(22% 0.13 255 / 0.04);
  --al-service-card-shadow-hover: 0 20px 40px -16px oklch(22% 0.13 255 / 0.16),
                                   0 6px 12px -6px oklch(22% 0.13 255 / 0.08);

  /* Badge (Legale/Sanitario/Tecnico pills) */
  --al-service-badge-legal-bg:    oklch(94% 0.04 270);   /* lavender-blue */
  --al-service-badge-legal-fg:    oklch(32% 0.12 270);
  --al-service-badge-sanit-bg:    oklch(95% 0.04 25);    /* warm coral */
  --al-service-badge-sanit-fg:    oklch(35% 0.14 25);
  --al-service-badge-tech-bg:     oklch(94% 0.04 155);   /* teal-green */
  --al-service-badge-tech-fg:     oklch(32% 0.11 155);

  /* CTA box (aside) */
  --al-service-cta-bg:         oklch(32% 0.15 258);      /* blue-700 inverted */
  --al-service-cta-fg:         oklch(99% 0.003 85);
  --al-service-cta-meta:       oklch(88% 0.03 255);
  --al-service-cta-link-hover: oklch(96% 0.02 255);

  /* Drop-cap first prose paragraph */
  --al-service-dropcap-size:   3.5em;
  --al-service-dropcap-color:  var(--al-hero-blue-700);

  /* Highlight strong terms (Legge Gelli, Claims Made, ultrattivita...).
     S1 polish iter3 — bg tint raised from oklch(96% 0.025) to oklch(92% 0.04)
     per dark-mode OS visibility (≈6% → ≈10% perceived tint vs surface).
     Skills: /colorize (OKLCH tint discipline), /polish (visibility refinement). */
  --al-service-highlight-fg:   oklch(28% 0.14 258);
  --al-service-highlight-bg:   oklch(92% 0.04 255);

  /* Divider */
  --al-service-divider:        oklch(92% 0.008 85);
}

/* ==========================================================================
   2. Section container - full-width, generous padding
   ========================================================================== */
body.page-id-1354 .al-section:has(> .al-prose > h2:first-child),
body.page-id-1354 section.allianz-section.al-section.al-service-section {
  background: var(--al-service-surface);
  padding-block: var(--al-service-sp-section);
  position: relative;
}

/* Fallback: target the servizi section via its wrap pattern */
body.page-id-1354 .al-service-section {
  background: var(--al-service-surface);
  padding-block: var(--al-service-sp-section);
}

body.page-id-1354 .al-service-section .al-wrap.al-prose {
  max-width: var(--al-container-wide, 1200px);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  color: var(--al-hero-ink-600);
}

/* ==========================================================================
   3. Block 1 - H2 (Source Serif 4 display, balanced)
   ========================================================================== */
body.page-id-1354 .al-service-section > .al-wrap > h2,
body.page-id-1354 .al-service-section .al-prose > h2 {
  font-family: var(--al-font-display);
  font-size: var(--al-service-fs-h2);
  line-height: var(--al-service-lh-h2);
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--al-hero-ink-900);
  margin: 0 0 var(--al-service-sp-h2-below) 0;
  max-width: 22ch;
  font-variation-settings: "opsz" 144, "wght" 700;
  text-wrap: balance;
}

/* ==========================================================================
   4. Block 2 - Figure portrait infografica
   ========================================================================== */
body.page-id-1354 .al-service-section .al-figure--portrait {
  max-width: var(--al-service-figure-max);
  margin: 0 0 var(--al-service-sp-block) 0;
  padding: 0;
  float: none;
  /* Desktop: float right for editorial flow */
}

@media (min-width: 48em) {
  body.page-id-1354 .al-service-section .al-figure--portrait {
    float: right;
    margin-left: clamp(1.5rem, 2vw + 0.5rem, 2.5rem);
    margin-bottom: var(--al-service-sp-prose);
    shape-outside: inset(0 round 16px);
  }
}

body.page-id-1354 .al-service-section .al-figure--portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 675 / 1200;
  object-fit: contain;
  object-position: center;
  border-radius: var(--al-hero-radius-card);
  box-shadow: var(--al-hero-shadow-img);
  background: var(--al-hero-blue-100);
  display: block;
}

body.page-id-1354 .al-service-section .al-figure--portrait figcaption {
  margin-top: 0.75rem;
  font-family: var(--al-font-body);
  font-size: var(--al-service-fs-caption);
  color: var(--al-hero-ink-400);
  line-height: 1.4;
  font-style: italic;
  text-align: center;
}

/* ==========================================================================
   5. Block 3 - Prose paragraphs (3 paragrafi)
   ========================================================================== */
body.page-id-1354 .al-service-section .al-prose > p {
  font-family: var(--al-font-body);
  font-size: var(--al-service-fs-prose);
  line-height: var(--al-service-lh-prose);
  font-weight: 400;
  color: var(--al-hero-ink-600);
  max-width: var(--al-service-sp-prose-max);
  /* Center prose block within wider wrap (1200px) while preserving text-align: left
     for reading comfort. Figure-portrait float-right remains unaffected (sibling, not child). */
  margin: 0 auto var(--al-service-sp-prose) auto;
  text-align: left;
  text-wrap: pretty;
}

/* Drop-cap on FIRST paragrafo only (polish, not gimmick) */
body.page-id-1354 .al-service-section .al-prose > h2 + p::first-letter,
body.page-id-1354 .al-service-section .al-prose > .al-figure--portrait + p::first-letter {
  font-family: var(--al-font-display);
  font-size: var(--al-service-dropcap-size);
  line-height: 0.85;
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: var(--al-service-dropcap-color);
  font-weight: 700;
  font-variation-settings: "opsz" 144, "wght" 700;
  padding: 0.04em 0.02em 0 0;
}

/* Strong highlight for technical terms (auto via <strong> tag usage in HTML) */
body.page-id-1354 .al-service-section .al-prose p strong {
  color: var(--al-service-highlight-fg);
  font-weight: 600;
  background: linear-gradient(
    to bottom,
    transparent 60%,
    var(--al-service-highlight-bg) 60%,
    var(--al-service-highlight-bg) 95%,
    transparent 95%
  );
  padding: 0 0.1em;
  border-radius: 2px;
}

/* ==========================================================================
   6. Block 4 - Table comparativa (redesigned CSS-only)
   ========================================================================== */
body.page-id-1354 .al-service-section .al-table-wrap {
  clear: both;
  margin: var(--al-service-sp-block) 0;
  border-radius: var(--al-hero-radius-card);
  overflow: hidden;
  box-shadow: 0 1px 0 oklch(22% 0.13 255 / 0.04),
              0 8px 24px -12px oklch(22% 0.13 255 / 0.1);
  border: 1px solid var(--al-service-table-border);
  background: var(--al-service-surface);
}

/* Mobile: scroll-x preserved; desktop: full width */
@media (max-width: 47.999em) {
  body.page-id-1354 .al-service-section .al-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

body.page-id-1354 .al-service-section .al-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--al-font-body);
  font-size: var(--al-service-fs-table);
  line-height: var(--al-service-lh-table);
  min-width: 560px;
}

/* Sticky header on vertical scroll within long page */
body.page-id-1354 .al-service-section .al-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--al-service-table-head-bg);
  color: var(--al-service-table-head-fg);
  font-weight: 700;
  text-align: left;
  padding: 1rem 1.125rem;
  letter-spacing: 0.01em;
  font-size: 0.875rem;
  text-transform: uppercase;
  border: 0;
  vertical-align: middle;
}

/* Col 3 header (Allianz) - tinted green border to signal "preferred" without
   changing content; accessible via text contrast, not color-only. */
body.page-id-1354 .al-service-section .al-table thead th:last-child {
  background: linear-gradient(
    to bottom,
    var(--al-service-table-head-bg) 0%,
    var(--al-service-table-head-bg) 92%,
    var(--al-service-table-col3-border) 92%,
    var(--al-service-table-col3-border) 100%
  );
  position: relative;
}

/* Star badge on col 3 header (decoration, not informational - still works without) */
body.page-id-1354 .al-service-section .al-table thead th:last-child::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: var(--al-hero-star);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>") center/contain no-repeat;
  pointer-events: none;
}

/* Body cells */
body.page-id-1354 .al-service-section .al-table tbody td {
  padding: 1rem 1.125rem;
  border-top: 1px solid var(--al-service-table-border);
  color: var(--al-hero-ink-600);
  vertical-align: top;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums;
}

/* First column (characteristic label) - bold ink, serif for editorial weight */
body.page-id-1354 .al-service-section .al-table tbody td:first-child {
  font-family: var(--al-font-body);
  color: var(--al-hero-ink-900);
  font-weight: 600;
  width: 28%;
}

body.page-id-1354 .al-service-section .al-table tbody td:first-child strong {
  background: none;
  padding: 0;
  color: inherit;
  font-weight: 700;
}

/* Col 3 (Allianz) - tinted green bg + check prefix.
   S2 polish iter3 — add inset blue-700 accent on td AND th last-child to
   reinforce winner column vertical rhythm. border-left already defines
   green accent; inset shadow adds a 2px blue rail inside the cell that
   reads as a continuous column signature under scroll.
   Skills: /polish (winner emphasis), /arrange (column visual rhythm),
   /colorize (multi-hue reinforcement: green bg + blue inset). */
body.page-id-1354 .al-service-section .al-table tbody td:last-child {
  background: var(--al-service-table-col3-tint);
  color: var(--al-hero-ink-900);
  font-weight: 500;
  position: relative;
  padding-left: 2.5rem;
  border-left: 2px solid var(--al-service-table-col3-border);
  box-shadow: inset 2px 0 0 var(--al-hero-blue-700);
}

body.page-id-1354 .al-service-section .al-table thead th:last-child {
  box-shadow: inset 2px 0 0 var(--al-hero-blue-700);
}

body.page-id-1354 .al-service-section .al-table tbody td:last-child::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.1rem;
  width: 18px;
  height: 18px;
  background: var(--al-service-table-check);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") center/contain no-repeat;
}

/* Row hover subtle */
body.page-id-1354 .al-service-section .al-table tbody tr {
  transition: background var(--al-hero-dur-micro) var(--al-hero-ease);
}

body.page-id-1354 .al-service-section .al-table tbody tr:hover td:not(:last-child) {
  background: var(--al-service-table-row-hover);
}

/* SR-only caption for table accessibility */
body.page-id-1354 .al-service-section .al-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   7. Block 5 - Post-table CTA paragraph (same prose styling)
   ========================================================================== */
/* Inherits .al-prose > p rules. No dedicated rule needed. */

/* ==========================================================================
   8. Block 6 - Aside CTA card (contatti rapidi)
   ========================================================================== */
body.page-id-1354 .al-service-section .al-cta-card {
  clear: both;
  background: var(--al-service-cta-bg);
  color: var(--al-service-cta-fg);
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-radius: var(--al-hero-radius-card);
  margin: var(--al-service-sp-block) 0;
  box-shadow: 0 12px 32px -16px oklch(22% 0.13 255 / 0.25);
  position: relative;
  overflow: hidden;
}

/* Decorative accent band left side */
body.page-id-1354 .al-service-section .al-cta-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--al-hero-star);
}

body.page-id-1354 .al-service-section .al-cta-card__title {
  font-family: var(--al-font-display);
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.625rem);
  line-height: 1.25;
  font-weight: 700;
  color: var(--al-service-cta-fg);
  margin: 0 0 1.25rem 0;
  letter-spacing: -0.01em;
  max-width: 32ch;
  text-wrap: balance;
}

body.page-id-1354 .al-service-section .al-cta-card__details {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
}

body.page-id-1354 .al-service-section .al-cta-card__details li {
  font-family: var(--al-font-body);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--al-service-cta-fg);
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

body.page-id-1354 .al-service-section .al-cta-card__icon {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--al-service-cta-meta);
  min-width: 3.25rem;
  flex-shrink: 0;
}

body.page-id-1354 .al-service-section .al-cta-card__details a {
  color: var(--al-service-cta-fg);
  text-decoration: underline;
  text-decoration-color: oklch(88% 0.03 255 / 0.5);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--al-hero-dur-micro) var(--al-hero-ease),
              color var(--al-hero-dur-micro) var(--al-hero-ease);
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums;
}

body.page-id-1354 .al-service-section .al-cta-card__details a:hover,
body.page-id-1354 .al-service-section .al-cta-card__details a:focus {
  text-decoration-color: var(--al-hero-star);
  color: var(--al-service-cta-link-hover);
}

body.page-id-1354 .al-service-section .al-cta-card__details a:focus-visible {
  outline: 3px solid var(--al-hero-star);
  outline-offset: 3px;
  border-radius: 3px;
}

/* FIX 1 — Cross-section CTA card link legibility (sez 03 + sez 06 + any future)
   Links inside dark-bg .al-cta-card must be white-warm for contrast.
   Selector broader than sez-03-only scope above; lower specificity = safe cascade. */
body.page-id-1354 .al-cta-card a {
  color: oklch(95% 0.01 85);
  text-decoration: underline;
  text-decoration-color: oklch(95% 0.01 85 / 0.6);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 180ms cubic-bezier(0.25, 1, 0.5, 1),
              text-decoration-color 180ms cubic-bezier(0.25, 1, 0.5, 1);
}
body.page-id-1354 .al-cta-card a:hover,
body.page-id-1354 .al-cta-card a:focus {
  color: oklch(100% 0 0);
  text-decoration-color: oklch(100% 0 0 / 0.8);
}
body.page-id-1354 .al-cta-card a:focus-visible {
  outline: 3px solid var(--al-hero-star, oklch(85% 0.15 85));
  outline-offset: 3px;
  border-radius: 3px;
}

/* ==========================================================================
   9. Block 7 - Cat-cards grid 3-col (prose INTEGRALE preservato)
   ========================================================================== */
body.page-id-1354 .al-service-section .al-categories {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--al-service-sp-cat-gap);
  /* B3 iter2: raise separation aside->grid (aria breathing room).
     Was var(--al-service-sp-block) ~ 24-36px (compressed).
     Now clamp 4rem -> 6rem (64-96px) per /arrange "generous separation" 48-96px rule. */
  margin: clamp(4rem, 8vw, 6rem) 0 0 0;
  clear: both;
}

@media (min-width: 64em) {
  body.page-id-1354 .al-service-section .al-categories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

body.page-id-1354 .al-service-section .al-cat-card {
  background: var(--al-service-card-bg);
  border: 1px solid var(--al-service-card-border);
  border-radius: var(--al-hero-radius-card);
  padding: var(--al-service-sp-card-pad);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--al-service-card-shadow-rest);
  transition: border-color var(--al-hero-dur-micro) var(--al-hero-ease),
              box-shadow var(--al-hero-dur-micro) var(--al-hero-ease),
              transform var(--al-hero-dur-micro) var(--al-hero-ease);
  position: relative;
  overflow: hidden;
}

body.page-id-1354 .al-service-section .al-cat-card:hover {
  border-color: var(--al-service-card-border-hover);
  box-shadow: var(--al-service-card-shadow-hover);
  transform: translateY(-4px);
}

/* Icon - top-left circular tinted container */
body.page-id-1354 .al-service-section .al-cat-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: oklch(96% 0.02 255);
  color: var(--al-hero-blue-700);
  flex-shrink: 0;
}

body.page-id-1354 .al-service-section .al-cat-card__icon svg {
  width: 28px;
  height: 28px;
  display: block;
}

/* Badge pill - category label */
body.page-id-1354 .al-service-section .al-cat-card__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border-radius: var(--al-hero-radius-chip);
  font-family: var(--al-font-body);
  font-size: var(--al-service-fs-badge);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* Per-category badge colors via :nth-child (content-aware via order) */
body.page-id-1354 .al-service-section .al-cat-card:nth-child(1) .al-cat-card__badge {
  background: var(--al-service-badge-legal-bg);
  color: var(--al-service-badge-legal-fg);
}
body.page-id-1354 .al-service-section .al-cat-card:nth-child(2) .al-cat-card__badge {
  background: var(--al-service-badge-sanit-bg);
  color: var(--al-service-badge-sanit-fg);
}
body.page-id-1354 .al-service-section .al-cat-card:nth-child(3) .al-cat-card__badge {
  background: var(--al-service-badge-tech-bg);
  color: var(--al-service-badge-tech-fg);
}

body.page-id-1354 .al-service-section .al-cat-card h3 {
  font-family: var(--al-font-display);
  font-size: var(--al-service-fs-h3);
  line-height: var(--al-service-lh-h3);
  font-weight: 700;
  color: var(--al-hero-ink-900);
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
  font-variation-settings: "opsz" 144, "wght" 700;
}

/* Prose inside card - size step down vs main prose */
body.page-id-1354 .al-service-section .al-cat-card p {
  font-family: var(--al-font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--al-hero-ink-600);
  margin: 0;
  max-width: none;
}

body.page-id-1354 .al-service-section .al-cat-card p strong {
  color: var(--al-service-highlight-fg);
  font-weight: 600;
  background: none;
  padding: 0;
}

/* B1 iter2 — anti-blog typography break pattern (principles: /typeset modular
   hierarchy, /polish visual rhythm, /arrange tight-then-separate).
   First-line of FIRST paragraph inside card: weight bump + tight tracking as
   editorial marker, differentiates from blog prose flow. */
body.page-id-1354 .al-service-section .al-cat-card > p:first-of-type::first-line {
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--al-hero-ink-900);
}

/* Divider between subsequent paragraphs in card: dashed rule evokes editorial
   column break without requiring HTML change. Margin-top 0 + padding-top 16px
   transfers the rhythm onto the divider itself. */
body.page-id-1354 .al-service-section .al-cat-card > p:not(:first-of-type)::before {
  content: "";
  display: block;
  border-top: 1px dashed var(--al-service-divider);
  padding-top: 16px;
  margin-top: 0;
}

/* Disclaimer note (card 1 only) */
body.page-id-1354 .al-service-section .al-cat-card .al-note {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--al-service-divider);
  font-size: 0.8125rem;
  color: var(--al-hero-ink-400);
  line-height: 1.5;
}

body.page-id-1354 .al-service-section .al-cat-card .al-note em {
  font-style: italic;
}

/* Top border-accent on hover coloured by category */
body.page-id-1354 .al-service-section .al-cat-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: transparent;
  transition: background var(--al-hero-dur-micro) var(--al-hero-ease);
}

body.page-id-1354 .al-service-section .al-cat-card:nth-child(1):hover::after {
  background: var(--al-service-badge-legal-fg);
}
body.page-id-1354 .al-service-section .al-cat-card:nth-child(2):hover::after {
  background: var(--al-service-badge-sanit-fg);
}
body.page-id-1354 .al-service-section .al-cat-card:nth-child(3):hover::after {
  background: var(--al-service-badge-tech-fg);
}

/* ==========================================================================
   10. Motion - scroll reveal stagger (respects reduced-motion)
   ========================================================================== */
@keyframes al-service-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.page-id-1354 .al-service-section .al-prose > h2,
body.page-id-1354 .al-service-section .al-figure--portrait,
body.page-id-1354 .al-service-section .al-prose > p,
body.page-id-1354 .al-service-section .al-table-wrap,
body.page-id-1354 .al-service-section .al-cta-card,
body.page-id-1354 .al-service-section .al-cat-card {
  animation: al-service-rise var(--al-hero-dur-fade) var(--al-hero-ease) both;
}

body.page-id-1354 .al-service-section .al-prose > h2        { animation-delay: 0ms; }
body.page-id-1354 .al-service-section .al-figure--portrait  { animation-delay: 60ms; }
body.page-id-1354 .al-service-section .al-prose > p         { animation-delay: 120ms; }
body.page-id-1354 .al-service-section .al-table-wrap        { animation-delay: 180ms; }
body.page-id-1354 .al-service-section .al-cta-card          { animation-delay: 240ms; }
body.page-id-1354 .al-service-section .al-cat-card:nth-child(1) { animation-delay: 300ms; }
body.page-id-1354 .al-service-section .al-cat-card:nth-child(2) { animation-delay: 360ms; }
body.page-id-1354 .al-service-section .al-cat-card:nth-child(3) { animation-delay: 420ms; }

@media (prefers-reduced-motion: reduce) {
  body.page-id-1354 .al-service-section .al-prose > h2,
  body.page-id-1354 .al-service-section .al-figure--portrait,
  body.page-id-1354 .al-service-section .al-prose > p,
  body.page-id-1354 .al-service-section .al-table-wrap,
  body.page-id-1354 .al-service-section .al-cta-card,
  body.page-id-1354 .al-service-section .al-cat-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  body.page-id-1354 .al-service-section .al-cat-card,
  body.page-id-1354 .al-service-section .al-cta-card__details a,
  body.page-id-1354 .al-service-section .al-table tbody tr {
    transition: none !important;
  }
  body.page-id-1354 .al-service-section .al-cat-card:hover {
    transform: none !important;
  }
}

/* ==========================================================================
   11. Desktop refinements > 1024px
   ========================================================================== */
@media (min-width: 64em) {
  body.page-id-1354 .al-service-section {
    padding-block: clamp(4.5rem, 6vw + 1rem, 7rem);
  }

  body.page-id-1354 .al-service-section .al-cat-card {
    min-height: 100%;
  }

  /* B2 iter2 — desktop H3 cat-card hierarchy bump.
     Was 22-28px (fs-h3 token) -> ratio H2(60)/H3(28)/body(19) ~ 3.16:1.47:1 (flat H3).
     Now 24-30px -> ratio H2(60)/H3(30)/body(19) ~ 3.16:1.58:1 (modular ~1.6).
     Skills: /typeset (modular scale discipline), /bolder (stronger weight gap),
     /polish (letter-spacing optical tightness). */
  body.page-id-1354 .al-service-section .al-cat-card h3 {
    font-size: clamp(1.5rem, 1.1rem + 1.2vw, 1.875rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
  }
}

/* S3 polish iter3 — desktop ≥1200px: icon chip upsize 56→64 (svg 28→32).
   Tablet/laptop 1024-1199 keep 56px. Rationale: on wide viewports the
   56px chip reads underweight vs the enlarged H3 (30px) — upsizing
   rebalances card vertical rhythm and re-establishes visual anchor.
   Skills: /adapt (container-aware sizing), /polish (proportional balance),
   /bolder (scale jump reinforces hero icon role). */
@media (min-width: 75em) {
  body.page-id-1354 .al-service-section .al-cat-card__icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
  }
  body.page-id-1354 .al-service-section .al-cat-card__icon svg {
    width: 32px;
    height: 32px;
  }
}

/* S5 polish iter3 — ≤24em (≤384px) viewport: neutralize negative tracking
   on cat-card H3 to prevent iOS Safari glyph compression at narrow widths.
   Base rule sets letter-spacing: -0.015em (desktop polish); on very small
   devices the optical gain flips to a legibility penalty.
   Skills: /adapt (viewport-aware typography), /typeset (tracking discipline),
   /polish (prevent regression on small devices). */
@media (max-width: 24em) {
  body.page-id-1354 .al-service-section .al-cat-card h3 {
    letter-spacing: normal;
  }
}

/* End of section-03-servizi-grid.css patch */



/*
 * Allianz Bari — Section 05 "Il Metodo" (iter 1, draft)
 * Date:   2026-04-14
 * Source: projects/allianz-bari/design/section-05-metodo-design-doc.md
 * Content: projects/allianz-bari/content/page-1354-content-v3.html v3:178-224 (intangibile)
 * Target:  page 1354 — scope body.page-id-1354
 *
 * DECISIONE ARCHITETTURALE USER-APPROVED (2026-04-14):
 *  - <table> v3:190-217 PRESERVATA as-is (tag HTML intangibile, NO migration a <ul>).
 *  - Redesign enterprise CSS stile sez 03 (coerenza cross-section).
 *  - Winner-highlight su riga 2 "Retroattivita" via pattern validato sez 03:
 *      inset box-shadow 2px blue-700 + border-left tint primary + bg primary-50.
 *  - Zero modifica DOM. Zero cut. Zero duplicate.
 *
 * STRUTTURA v3:178-224 INTANGIBILE — 10 blocchi preservati in ordine:
 *   1. H2 "Il Metodo Allianz Agenzia Bari: Processo e Risultati"
 *   2. P1 "Evitare buchi..."                     (drop-cap lead)
 *   3. P2 "Questo accade spesso..."              (prose normale)
 *   4. P3 "Tecnicamente, quasi ogni..."          (strong inline "Claims Made")
 *   5. P4 "Il nostro processo operativo..."      (intro tabella, bridge)
 *   6. <div.al-table-wrap> + <table.al-table>    (3x3: Massimale / Retroattivita / Garanzia Postuma)
 *   7. P5 "In Allianz Agenzia Bari, quando..."   (check-up, preceduto da hairline divider)
 *   8. P6 "Tra gli Oltre 350 Professionisti..."  (big-num highlight su "350")
 *   9. P7 "In un recente scenario..."            (arrow prefix, signals transition)
 *
 * NOTA COPY: accenti persi (priorita, piu, e, validita, retroattivita, e un') NON toccati.
 *            Fix a R1 turno separato come da regola globale no_touch_content.
 *
 * TOKEN POLICY:
 *  - REUSE da sez 01/03/04: --al-hero-*, --al-service-*, --al-obblig-* via fallback chain.
 *  - CREATE --al-metodo-* solo per valori specifici (drop-cap, term highlight,
 *    table winner-highlight row 2, big-num scale, hairline).
 *  - Fallback defensivi via var(--token, default) per preview standalone.
 *
 * SKILLS APPLIED (principi concreti — >=5, ref design doc §3):
 *  1. /frontend-design — institutional-editorial lane. Anti-pattern rifiutati:
 *     NO glassmorphism, NO gradient text su H2 o numeri, NO hero-metric-template
 *     (big-num "350" e' inline nel paragrafo v3:221, NON layout da dashboard).
 *     NO card grid ripetuto (restiamo su tabella HTML come da user decision).
 *     AI-slop test: zero cyan/purple, zero dark-mode-with-glow, zero emoji decorative.
 *  2. /arrange — varied rhythm + squint test. 4 cluster visivi:
 *     (a) H2 + P1-P4 prose intro [gap 24px tight] →
 *     (b) tabella redesign enterprise [gap 48-64px generous] →
 *     (c) hairline divider 56% [gap 32px] →
 *     (d) P5-P7 prose chiusura [gap 24px tight, P7 arrow].
 *     Gap ratio cluster:prose = 2.6:1. Squint test: 4 focal points visibili
 *     (H2, strong "Claims Made" pill, riga 2 table "Retroattivita" elevated,
 *     big-num "350").
 *  3. /bolder — scale jump + weight contrast. H2 56px / body 19px ≈ 2.9x.
 *     Big-num "350" 48px inline in body 19px = 2.5x size jump. Table riga 2
 *     retroattivita: bg primary-50 + border-left + inset shadow vs altre
 *     righe surface-bianco = elevation contrast statico (NO hover-jump gia'
 *     elevato). Weight: H2 700, strong "Claims Made" 600, body 400.
 *  4. /colorize — 60-30-10 con intent institutional.
 *     60%: surface warm hue 85 (coerente sez 03).
 *     30%: primary tint hue 258 (term-highlight bg primary-100, riga 2
 *          table bg primary-50, drop-cap primary-700, big-num primary-700).
 *     10%: accento = border-left 3px primary-700 sulla sola riga 2 retroattivita.
 *     Zero secondo colore. Zero gradient AI-slop. Tutti OKLCH tinted.
 *  5. /typeset — modular scale + distinctive pairing + tabular-nums.
 *     Table label (<th>) Work Sans 13px uppercase tracked +0.1em (enterprise
 *     authority, NON decorative). Cell body <td> Work Sans 15-16px tabular-nums.
 *     <strong> termini tecnici (Massimale/Retroattivita/Garanzia Postuma)
 *     weight 700 color blue-700. Big-num "350" Source Serif 4 display 700
 *     (contrast editoriale vs Work Sans body). Line-height table 1.55 vs
 *     prose 1.7 (segnala "dati tecnici denso" vs "lettura arioso").
 *  6. /polish — baseline + winner-emphasis + edge subtle.
 *     Riga 2 retroattivita riceve TRIPLE signal (bg + border-left 3px + inset
 *     shadow 2px) per trasmettere "key differentiator" senza cambiare DOM.
 *     Drop-cap via ::first-letter (zero DOM change). Hairline divider 1.5px
 *     non 2px. Arrow marker P7 font-size 1.2em per presence.
 *  7. /harden — a11y + reduced-motion + semantics.
 *     Table <caption> sr-only ("Confronto tre pilastri tecnici assicurazione
 *     professionale"). <th scope="col"> gia' in v3. Strong "Claims Made"
 *     semantico (NON <mark>). aria-describedby su riga 2 per trasmettere
 *     il "key differentiator" semanticamente. Drop-cap ::first-letter
 *     (zero DOM). prefers-reduced-motion: disattiva hover/animation.
 *     forced-colors support per Windows High Contrast.
 *
 * A11Y CONTRAST CHECK (OKLCH computed):
 *  - Body prose ink-600 on surface hue 85: ~10.8:1 AAA
 *  - Table cell ink-900 on surface: ~16:1 AAA
 *  - Table riga 2 cell ink-900 on primary-50 tint: ~14.2:1 AAA
 *  - Term highlight blue-700 on primary-100 bg: ~8.4:1 AAA
 *  - Big-num blue-700 on surface: ~8.9:1 AAA
 *  - Drop-cap blue-700 on surface: ~8.9:1 AAA
 *  - Table head bg blue-700 fg white-85: ~9.1:1 AAA
 *
 * PATCH RULE: additive + scoped body.page-id-1354. Zero cascade collision
 * con sez 01/03/04 (class prefix .al-metodo__*). Nessun reset globale.
 */


/* ==========================================================================
   1. Design tokens — scoped body.page-id-1354 (section-05 specific)
   ========================================================================== */
body.page-id-1354 .al-metodo {
  /* ---- Reuse/fallback da sez 01/03/04 ---- */
  --al-metodo-surface:          var(--al-service-surface, oklch(99% 0.003 85));
  --al-metodo-surface-alt:      oklch(98% 0.008 85);
  --al-metodo-ink-900:          var(--al-hero-ink-900, oklch(22% 0.02 258));
  --al-metodo-ink-600:          var(--al-hero-ink-600, oklch(42% 0.02 258));
  --al-metodo-ink-400:          var(--al-hero-ink-400, oklch(58% 0.015 258));
  --al-metodo-blue-700:         var(--al-hero-blue-700, oklch(32% 0.15 258));
  --al-metodo-blue-100:         var(--al-hero-blue-100, oklch(94% 0.03 258));
  --al-metodo-blue-50:          oklch(97% 0.015 258);
  --al-metodo-font-display:     var(--al-hero-font-display, "Source Serif 4", "Source Serif Pro", Georgia, serif);
  --al-metodo-font-body:        var(--al-hero-font-body, "Work Sans", system-ui, -apple-system, Segoe UI, sans-serif);
  --al-metodo-dur-fade:         var(--al-hero-dur-fade, 420ms);
  --al-metodo-dur-micro:        var(--al-hero-dur-micro, 180ms);
  --al-metodo-ease-out:         var(--al-hero-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
  --al-metodo-radius-card:      var(--al-hero-radius-card, 16px);

  /* ---- Section-05 specific ---- */

  /* Eyebrow additivo — NON duplica prose (synth dall'H2) */
  --al-metodo-eyebrow-fs:       0.8125rem;                                      /* 13px */
  --al-metodo-eyebrow-track:    0.14em;
  --al-metodo-eyebrow-color:    var(--al-metodo-blue-700);

  /* H2 (riuso scale sez 01/04 — display serif) */
  --al-metodo-h2-fs:            clamp(2rem, 1.4rem + 2.4vw, 3.5rem);            /* 32 → 56 */
  --al-metodo-h2-lh:            1.12;
  --al-metodo-h2-track:         -0.02em;

  /* Prose typography break */
  --al-metodo-p-fs:             clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);      /* 17 → 19 */
  --al-metodo-p-lh:             1.7;
  --al-metodo-p-gap:            clamp(1rem, 0.5rem + 1vw, 1.5rem);              /* 16 → 24 */
  --al-metodo-p-max:            65ch;

  /* Drop-cap P1 lead */
  --al-metodo-dropcap-fs:       clamp(3rem, 2rem + 2.5vw, 4rem);                /* 48 → 64 */
  --al-metodo-dropcap-lh:       0.9;
  --al-metodo-dropcap-color:    var(--al-metodo-blue-700);
  --al-metodo-dropcap-mr:       0.5rem;
  --al-metodo-dropcap-mt:       0.15rem;

  /* Inline term highlight "Claims Made" (pill, NOT <mark>) */
  --al-metodo-term-bg:          var(--al-metodo-blue-100);
  --al-metodo-term-color:       var(--al-metodo-blue-700);
  --al-metodo-term-pad:         0.125rem 0.5rem;
  --al-metodo-term-weight:      600;
  --al-metodo-term-radius:      4px;

  /* Table redesign enterprise */
  --al-metodo-table-border:     oklch(92% 0.005 258);
  --al-metodo-table-border-soft:oklch(94% 0.005 258);
  --al-metodo-table-head-bg:    var(--al-metodo-blue-700);
  --al-metodo-table-head-fg:    oklch(99% 0.003 85);
  --al-metodo-table-head-fs:    0.75rem;                                        /* 12px uppercase tracked */
  --al-metodo-table-head-track: 0.1em;
  --al-metodo-table-head-weight:700;
  --al-metodo-table-row-alt:    oklch(98% 0.008 85);
  --al-metodo-table-row-hover:  oklch(96% 0.015 258);
  --al-metodo-table-cell-pad-y: clamp(1rem, 0.75rem + 0.75vw, 1.375rem);        /* 16 → 22 */
  --al-metodo-table-cell-pad-x: clamp(1rem, 0.75rem + 1vw, 1.5rem);             /* 16 → 24 */
  --al-metodo-table-cell-fs:    clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);         /* 15 → 16 */
  --al-metodo-table-cell-lh:    1.55;
  --al-metodo-table-radius:     12px;
  --al-metodo-table-mb:         clamp(2rem, 1.5rem + 1.5vw, 3rem);              /* 32 → 48 */
  --al-metodo-table-mt:         clamp(1.5rem, 1rem + 1vw, 2.25rem);             /* 24 → 36 */

  /* Winner highlight — RIGA 2 Retroattivita (user-approved) */
  --al-metodo-winner-bg:        var(--al-metodo-blue-50);
  --al-metodo-winner-border-w:  3px;
  --al-metodo-winner-border:    var(--al-metodo-blue-700);
  --al-metodo-winner-inset:     inset 2px 0 0 var(--al-metodo-blue-700);

  /* First column <td><strong> (technical term label) */
  --al-metodo-label-color:      var(--al-metodo-ink-900);
  --al-metodo-label-weight:     700;
  --al-metodo-label-fs:         clamp(0.9375rem, 0.9rem + 0.25vw, 1.0625rem);   /* 15 → 17 */

  /* Hairline divider tra tabella e P5 check-up */
  --al-metodo-rule-w:           56%;
  --al-metodo-rule-h:           1.5px;
  --al-metodo-rule-color:       oklch(32% 0.15 258 / 0.22);
  --al-metodo-rule-mb:          clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  --al-metodo-rule-mt:          clamp(1rem, 0.5rem + 1vw, 1.75rem);

  /* Big-num "350" highlight (P6 v3:221) */
  --al-metodo-num-fs:           clamp(2rem, 1.2rem + 3vw, 3rem);                /* 32 → 48 */
  --al-metodo-num-color:        var(--al-metodo-blue-700);
  --al-metodo-num-font:         var(--al-metodo-font-display);
  --al-metodo-num-weight:       700;
  --al-metodo-num-lh:           0.95;

  /* Arrow P7 next-section marker */
  --al-metodo-next-arrow:       "\2192";                                        /* → */
  --al-metodo-next-color:       var(--al-metodo-blue-700);

  /* Section rhythm */
  --al-metodo-sec-pad-y:        clamp(3.5rem, 2.5rem + 3vw, 6.5rem);            /* 56 → 104 */
  --al-metodo-wrap-max:         62.5rem;                                        /* 1000px editorial */
  --al-metodo-wrap-max-wide:    70rem;                                          /* 1120px table escape (design doc §1) */
  --al-metodo-wrap-pad-x:       clamp(1.25rem, 0.75rem + 2vw, 2.5rem);
}


/* ==========================================================================
   2. Section shell — surface alt vs sez 04 (alternanza tonale)
   ========================================================================== */
body.page-id-1354 .al-metodo {
  background: var(--al-metodo-surface);
  padding-block: var(--al-metodo-sec-pad-y);
  position: relative;
  isolation: isolate;
}

body.page-id-1354 .al-metodo__wrap {
  max-width: var(--al-metodo-wrap-max);
  margin-inline: auto;
  padding-inline: var(--al-metodo-wrap-pad-x);
  text-align: left;                   /* left-aligned asymmetric, no centered-block */
}


/* ==========================================================================
   3. Eyebrow (additivo, synth dall'H2 — zero duplicate copy)
   ========================================================================== */
body.page-id-1354 .al-metodo__eyebrow {
  /* Block-level centering while preserving inline-flex internal layout.
     display: flex + width: fit-content + margin-inline: auto centers the chip
     horizontally; text-align: left keeps the label/dot reading order intact. */
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto clamp(0.875rem, 0.5rem + 0.8vw, 1.25rem) auto;
  font-family: var(--al-metodo-font-body);
  font-size: var(--al-metodo-eyebrow-fs);
  font-weight: 600;
  letter-spacing: var(--al-metodo-eyebrow-track);
  text-transform: uppercase;
  color: var(--al-metodo-eyebrow-color);
  line-height: 1;
  text-align: left;
}

body.page-id-1354 .al-metodo__eyebrow-dot {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--al-metodo-blue-700);
}

body.page-id-1354 .al-metodo__eyebrow-sep {
  opacity: 0.55;
  margin-inline: 0.15rem;
}


/* ==========================================================================
   4. H2 (display serif, scale jump, balanced wrap)
   ========================================================================== */
body.page-id-1354 .al-metodo__h2 {
  /* Center H2 block within wrap (22ch vs ~62.5rem wrap); text-align: left
     preserved for heading internal rhythm — only block is centered. */
  margin: 0 auto clamp(1.75rem, 1.25rem + 2vw, 3rem) auto;
  max-width: 22ch;                    /* editorial control line-length */
  text-align: left;
  font-family: var(--al-metodo-font-display);
  font-size: var(--al-metodo-h2-fs);
  font-weight: 700;
  line-height: var(--al-metodo-h2-lh);
  letter-spacing: var(--al-metodo-h2-track);
  color: var(--al-metodo-ink-900);
  text-wrap: balance;
  font-variation-settings: "opsz" 144, "wght" 700;
}


/* ==========================================================================
   5. Prose container (P1-P4 intro, P5-P7 chiusura)
   ========================================================================== */
body.page-id-1354 .al-metodo__prose {
  max-width: var(--al-metodo-p-max);
  /* Center prose block (65ch) within wrap (~62.5rem); paragraphs inside inherit
     block context — text stays left-aligned for readability (45-75ch rule).
     Table-wrap (1120px, wider) already has margin-inline: auto — both centered
     now share horizontal axis, eliminating the right-gutter asymmetry. */
  margin-inline: auto;
  text-align: left;
}

body.page-id-1354 .al-metodo__p {
  margin: 0 0 var(--al-metodo-p-gap) 0;
  font-family: var(--al-metodo-font-body);
  font-size: var(--al-metodo-p-fs);
  line-height: var(--al-metodo-p-lh);
  color: var(--al-metodo-ink-600);
  font-weight: 400;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
  text-wrap: pretty;
  hanging-punctuation: first last;
  hyphens: auto;
}

body.page-id-1354 .al-metodo__p:last-child {
  margin-bottom: 0;
}

/* 5.a — P1 lead with drop-cap (v3:182) */
body.page-id-1354 .al-metodo__p--lead::first-letter {
  float: left;
  font-family: var(--al-metodo-font-display);
  font-size: var(--al-metodo-dropcap-fs);
  font-weight: 700;
  line-height: var(--al-metodo-dropcap-lh);
  color: var(--al-metodo-dropcap-color);
  margin-right: var(--al-metodo-dropcap-mr);
  margin-top: var(--al-metodo-dropcap-mt);
}

/* 5.b — Inline term highlight "Claims Made" (pill, v3:186)
   NON e' <mark> (non e' search highlight). E' <strong class="al-metodo__term">
   = emphasis tecnica authority-marker. */
body.page-id-1354 .al-metodo__term {
  display: inline;
  padding: var(--al-metodo-term-pad);
  background: var(--al-metodo-term-bg);
  color: var(--al-metodo-term-color);
  font-weight: var(--al-metodo-term-weight);
  border-radius: var(--al-metodo-term-radius);
  font-style: normal;
  letter-spacing: 0;
  /* Wrap-safe: pillola resta inline anche su line-break */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* 5.c — P5 check-up preceded by hairline divider (CSS-only, zero DOM) */
body.page-id-1354 .al-metodo__p--divided {
  position: relative;
  padding-top: var(--al-metodo-rule-mt);
  margin-top: var(--al-metodo-rule-mb);
}

/* 5.c.i — Bump separation when --divided follows the table (polish S2, design-judge iter 1).
   Desktop target: 56-64px between tabella bottom and hairline divider (was ~48px, lower edge). */
body.page-id-1354 .al-metodo__table-wrap + .al-metodo__p--divided {
  margin-top: clamp(3.5rem, 4vw, 4rem);
}

body.page-id-1354 .al-metodo__p--divided::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: var(--al-metodo-rule-w);
  height: var(--al-metodo-rule-h);
  background: var(--al-metodo-rule-color);
}

/* 5.d — P6 big-number highlight "350" (v3:221)
   Markup: <span class="al-metodo__num">350</span> su numero. */
body.page-id-1354 .al-metodo__num {
  display: inline-block;
  font-family: var(--al-metodo-num-font);
  font-size: var(--al-metodo-num-fs);
  font-weight: var(--al-metodo-num-weight);
  line-height: var(--al-metodo-num-lh);
  color: var(--al-metodo-num-color);
  letter-spacing: -0.015em;
  font-variation-settings: "opsz" 144, "wght" 700;
  /* Optical align with surrounding body line */
  vertical-align: -0.08em;
  /* No margin — flow inline naturale */
}

/* 5.e — P7 last paragraph signals transition → next section via arrow prefix */
body.page-id-1354 .al-metodo__p--next {
  padding-left: 1.65rem;
  position: relative;
}

body.page-id-1354 .al-metodo__p--next::before {
  content: var(--al-metodo-next-arrow);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--al-metodo-font-display);
  font-size: calc(var(--al-metodo-p-fs) * 1.2);
  line-height: var(--al-metodo-p-lh);
  font-weight: 700;
  color: var(--al-metodo-next-color);
}


/* ==========================================================================
   6. Table redesign — <table class="al-table allianz-table"> preserved DOM
      Enterprise styling (stile sez 03) + winner-highlight riga 2 Retroattivita
   ========================================================================== */

/* 6.a — Table wrap: escape wider container (editorial asymmetric) */
body.page-id-1354 .al-metodo__table-wrap {
  /* Full-bleed escape: wider than prose container 65ch.
     Design doc §1 (wireframe): 1120px vs 960/1000px prose. */
  max-width: var(--al-metodo-wrap-max-wide);
  margin-inline: auto;
  margin-top: var(--al-metodo-table-mt);
  margin-bottom: var(--al-metodo-table-mb);
  /* On narrow viewports, allow horizontal scroll as fallback */
  overflow-x: auto;
  /* Smooth scroll on touch */
  -webkit-overflow-scrolling: touch;
  /* Optical tuning: subtle shadow as visual container */
  background: transparent;
}

/* 6.b — Table core */
body.page-id-1354 .al-metodo table.al-table,
body.page-id-1354 .al-metodo .al-table-wrap > table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--al-metodo-font-body);
  font-size: var(--al-metodo-table-cell-fs);
  line-height: var(--al-metodo-table-cell-lh);
  color: var(--al-metodo-ink-600);
  background: var(--al-metodo-surface);
  border: 1px solid var(--al-metodo-table-border);
  border-radius: var(--al-metodo-table-radius);
  /* Required for border-radius clipping with border-collapse: separate */
  overflow: hidden;
  font-feature-settings: "tnum" 1, "lnum" 1, "kern" 1;
  font-variant-numeric: tabular-nums;
}

/* 6.c — SR-only caption for a11y (design doc §7: "caption sr-only") */
body.page-id-1354 .al-metodo .al-table caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 6.d — Table head (thead th scope="col" gia' in v3) */
body.page-id-1354 .al-metodo .al-table thead th {
  background: var(--al-metodo-table-head-bg);
  color: var(--al-metodo-table-head-fg);
  font-size: var(--al-metodo-table-head-fs);
  font-weight: var(--al-metodo-table-head-weight);
  letter-spacing: var(--al-metodo-table-head-track);
  text-transform: uppercase;
  text-align: left;
  padding: var(--al-metodo-table-cell-pad-y) var(--al-metodo-table-cell-pad-x);
  line-height: 1.35;
  border-bottom: 1px solid var(--al-metodo-blue-700);
  white-space: nowrap;
}

/* 6.e — Body cells */
body.page-id-1354 .al-metodo .al-table tbody td {
  padding: var(--al-metodo-table-cell-pad-y) var(--al-metodo-table-cell-pad-x);
  border-top: 1px solid var(--al-metodo-table-border-soft);
  color: var(--al-metodo-ink-600);
  vertical-align: top;
  background: var(--al-metodo-surface);
}

/* 6.f — First column (technical term label): bolder ink, larger, authority */
body.page-id-1354 .al-metodo .al-table tbody td:first-child {
  font-family: var(--al-metodo-font-body);
  color: var(--al-metodo-label-color);
  font-weight: 500;
  font-size: var(--al-metodo-label-fs);
  width: 26%;
  min-width: 140px;
}

/* 6.g — <strong> inside first cell: full label (Massimale/Retroattivita/Garanzia Postuma) */
body.page-id-1354 .al-metodo .al-table tbody td:first-child strong {
  font-weight: var(--al-metodo-label-weight);
  color: var(--al-metodo-ink-900);
  letter-spacing: -0.005em;
}

/* 6.h — Alternating row background for zebra reading (default rows only) */
body.page-id-1354 .al-metodo .al-table tbody tr:nth-child(odd) td {
  background: var(--al-metodo-surface);
}

body.page-id-1354 .al-metodo .al-table tbody tr:nth-child(even) td {
  background: var(--al-metodo-table-row-alt);
}

/* 6.i — Subtle row hover (default rows only, NOT winner) */
body.page-id-1354 .al-metodo .al-table tbody tr {
  transition: background var(--al-metodo-dur-micro) var(--al-metodo-ease-out);
}

body.page-id-1354 .al-metodo .al-table tbody tr:not(.is-key):hover td {
  background: var(--al-metodo-table-row-hover);
}

/* ==========================================================================
   6.WINNER — RIGA 2 RETROATTIVITA highlight (user-approved, design doc §5)
   Triple signal: bg primary-50 + border-left 3px primary-700 + inset shadow 2px.
   Override nth-child(even) zebra.
   Markup: tr:nth-child(2) (2a row in tbody) — OR optional .is-key class for
   explicit semantic override. Both selectors coexist per robustness.
   ========================================================================== */
body.page-id-1354 .al-metodo .al-table tbody tr:nth-child(2) td,
body.page-id-1354 .al-metodo .al-table tbody tr.is-key td {
  background: var(--al-metodo-winner-bg);
  color: var(--al-metodo-ink-900);
  font-weight: 500;
  position: relative;
}

/* 6.WINNER.a — Inset 2px blue rail (reads as continuous row signature) */
body.page-id-1354 .al-metodo .al-table tbody tr:nth-child(2) td:first-child,
body.page-id-1354 .al-metodo .al-table tbody tr.is-key td:first-child {
  box-shadow: var(--al-metodo-winner-inset);
  border-left: var(--al-metodo-winner-border-w) solid var(--al-metodo-winner-border);
  padding-left: calc(var(--al-metodo-table-cell-pad-x) - var(--al-metodo-winner-border-w));
}

/* 6.WINNER.b — Strengthen label weight on winner row */
body.page-id-1354 .al-metodo .al-table tbody tr:nth-child(2) td:first-child strong,
body.page-id-1354 .al-metodo .al-table tbody tr.is-key td:first-child strong {
  color: var(--al-metodo-blue-700);
  font-weight: 800;
}

/* 6.WINNER.c — Subtle border-top accent on winner to separate from prev row */
body.page-id-1354 .al-metodo .al-table tbody tr:nth-child(2) td,
body.page-id-1354 .al-metodo .al-table tbody tr.is-key td {
  border-top-color: var(--al-metodo-blue-100);
}

/* 6.WINNER.d — Winner row NO hover jump (gia' elevated statico, bounce-ish) */
body.page-id-1354 .al-metodo .al-table tbody tr:nth-child(2):hover td,
body.page-id-1354 .al-metodo .al-table tbody tr.is-key:hover td {
  background: var(--al-metodo-winner-bg);
}


/* ==========================================================================
   7. Responsive — mobile adapt (<=768px)
   ========================================================================== */
@media (max-width: 768px) {
  body.page-id-1354 .al-metodo__h2 {
    max-width: 100%;
  }

  body.page-id-1354 .al-metodo__p--next {
    padding-left: 1.4rem;
  }

  body.page-id-1354 .al-metodo__p--divided::before {
    width: 72%;                       /* rule piu' larga su mobile per proporzione */
  }

  /* Table: compact padding, horizontal scroll if needed.
     Label cells stay readable; content cells can wrap tighter. */
  body.page-id-1354 .al-metodo .al-table {
    font-size: 0.9375rem;             /* 15px fisso mobile */
  }

  body.page-id-1354 .al-metodo .al-table thead th,
  body.page-id-1354 .al-metodo .al-table tbody td {
    padding: 0.875rem 0.875rem;
  }

  body.page-id-1354 .al-metodo .al-table tbody td:first-child {
    width: 30%;
    min-width: 110px;
  }

  /* Big-num mobile: scale down, stay inline */
  body.page-id-1354 .al-metodo__num {
    font-size: clamp(1.75rem, 1rem + 3vw, 2.25rem);
  }
}

/* Ultra-narrow (<=480px): table content hyphenated, head shortened */
@media (max-width: 480px) {
  body.page-id-1354 .al-metodo .al-table tbody td {
    hyphens: auto;
    word-break: break-word;
  }

  body.page-id-1354 .al-metodo .al-table thead th {
    font-size: 0.6875rem;             /* 11px */
    letter-spacing: 0.08em;
    padding: 0.75rem 0.625rem;
  }

  body.page-id-1354 .al-metodo .al-table tbody td:first-child {
    min-width: 96px;
    font-size: 0.9375rem;
  }
}

/* Ultra-compressed (<=360px): reinforce winner row — cells get tighter so the
   triple-signal loses perceptual weight. Boost bg tint + thicker rail for
   sub-pixel cleanliness on retina mobile (polish S3, design-judge iter 1). */
@media (max-width: 22.5em) {
  body.page-id-1354 .al-metodo .al-table tbody tr:nth-child(2) td,
  body.page-id-1354 .al-metodo .al-table tbody tr.is-key td {
    background: var(--al-metodo-blue-100);
  }

  body.page-id-1354 .al-metodo .al-table tbody tr:nth-child(2) td:first-child,
  body.page-id-1354 .al-metodo .al-table tbody tr.is-key td:first-child {
    border-left-width: 4px;
    padding-left: calc(var(--al-metodo-table-cell-pad-x) - 4px);
  }
}


/* ==========================================================================
   8. Reduced-motion guard (a11y, eccezione consentita per !important)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.page-id-1354 .al-metodo .al-table tbody tr {
    transition: none !important;
  }

  body.page-id-1354 .al-metodo .al-table tbody tr:not(.is-key):hover td {
    background: var(--al-metodo-surface) !important;
  }

  body.page-id-1354 .al-metodo .al-table tbody tr:nth-child(even):not(.is-key):hover td {
    background: var(--al-metodo-table-row-alt) !important;
  }
}


/* ==========================================================================
   9. Print (sobriety — preserva content, tabella flat)
   ========================================================================== */
@media print {
  body.page-id-1354 .al-metodo {
    background: transparent;
    padding-block: 1.5rem;
  }

  body.page-id-1354 .al-metodo .al-table {
    border: 1px solid currentColor;
    page-break-inside: avoid;
  }

  body.page-id-1354 .al-metodo .al-table thead th {
    background: transparent;
    color: currentColor;
    border-bottom: 2px solid currentColor;
  }

  body.page-id-1354 .al-metodo .al-table tbody tr:nth-child(2) td,
  body.page-id-1354 .al-metodo .al-table tbody tr.is-key td {
    background: transparent;
  }

  body.page-id-1354 .al-metodo .al-table tbody tr:nth-child(2) td:first-child,
  body.page-id-1354 .al-metodo .al-table tbody tr.is-key td:first-child {
    border-left: 3px solid currentColor;
    box-shadow: none;
  }

  body.page-id-1354 .al-metodo__p--lead::first-letter {
    color: var(--al-metodo-ink-900);
  }

  body.page-id-1354 .al-metodo__term {
    background: transparent;
    padding: 0;
    color: currentColor;
    font-weight: 700;
    text-decoration: underline;
  }

  body.page-id-1354 .al-metodo__num {
    color: currentColor;
  }
}


/* ==========================================================================
   10. Forced-colors (Windows High Contrast, /harden)
   ========================================================================== */
@media (forced-colors: active) {
  body.page-id-1354 .al-metodo .al-table {
    border: 1px solid CanvasText;
  }

  body.page-id-1354 .al-metodo .al-table thead th {
    background: Canvas;
    color: CanvasText;
    border-bottom: 2px solid CanvasText;
  }

  body.page-id-1354 .al-metodo .al-table tbody td {
    border-top: 1px solid CanvasText;
  }

  body.page-id-1354 .al-metodo .al-table tbody tr:nth-child(2) td:first-child,
  body.page-id-1354 .al-metodo .al-table tbody tr.is-key td:first-child {
    border-left: 3px solid LinkText;
    box-shadow: none;
  }

  body.page-id-1354 .al-metodo__term,
  body.page-id-1354 .al-metodo__num,
  body.page-id-1354 .al-metodo__p--next::before {
    color: LinkText;
    background: Canvas;
  }

  body.page-id-1354 .al-metodo__p--divided::before {
    background: CanvasText;
  }
}



/*
 * Allianz Bari — Section 06 "Costi e Tariffe" (iter 1, draft)
 * Date:   2026-04-14
 * Source: projects/allianz-bari/design/section-06-costi-design-doc.md
 * Content: projects/allianz-bari/content/page-1354-content-v3.html v3:227-260 (intangibile)
 * Target:  page 1354 — scope body.page-id-1354
 *
 * DECISIONE ARCHITETTURALE USER-APPROVED (2026-04-14, post sez 05 policy):
 *  - <ul><li> v3:242-245 PRESERVATO as-is (NO migration a <article>).
 *  - CSS restyle come priceboard card 2-col via `display: grid` su <ul> + card styling su <li>.
 *  - ZERO-CUT strict: locuzione "Un premio varia tipicamente dai" v3:243 PRESERVATA integrale
 *    (no elisione, no assorbimento — rispetto assoluto struttura v3).
 *  - Price "180€-700€" / "450€-2.500€" evidenziati via <strong class="al-costi__price">
 *    (size jump CSS su numeri esistenti, zero tag nuovi richiesti al testo prose).
 *  - Figure portrait wrapping editorial pattern sez 03 (riuso al-figure--portrait).
 *  - Aside CTA redesign pattern sez 03 (riuso al-cta-card + tokens).
 *
 * STRUTTURA v3:227-260 INTANGIBILE — 9 blocchi in ordine (audit conteggio v3→render = 9:9):
 *   1. H2 "Costi e Tariffe: Trasparenza e Preventivi a Bari"
 *   2. <figure class="al-figure al-figure--portrait"> 675x1200 + figcaption
 *   3. P1 "Comprendere come viene calcolato..." (drop-cap lead, 1x al-costi__term)
 *   4. P2 "La tariffazione di una polizza..." (2x al-costi__term inline)
 *   5. P3 "Analizzando le tariffe..." (bridge intro priceboard)
 *   6. <ul class="al-costi__priceboard"> con 2 <li class="al-costi__card"> (grid 2-col desktop,
 *      stacked mobile) — zero-cut, frase v3 intera preservata in ogni card
 *   7. P4 "Un aspetto fiscale..." (1x al-costi__term "deducibile al 100%")
 *   8. P5 "Ti suggeriamo di confrontarti..." (last prose before CTA)
 *   9. <aside class="allianz-cta-box al-cta-card"> CTA box (riuso 1:1 sez 03 pattern)
 *
 * NOTA COPY:
 *  - Accenti persi in v3 (opacita, piu, certezza, etc.) NON toccati — R1 turno separato.
 *  - Bug dominio email "info@assicomunale.it" v3:255 NON toccato — FLAG R1 + decisione user pending.
 *
 * TOKEN POLICY:
 *  - REUSE da sez 01/03/05: --al-hero-*, --al-service-*, --al-metodo-* via fallback chain.
 *  - CREATE --al-costi-* solo per valori specifici (priceboard grid, card pad/radius,
 *    card-label eyebrow, price size-jump/tabular-nums, hover lift, drop-cap override).
 *  - Fallback defensivi via var(--token, default) per preview standalone senza sez 01/03/05.
 *
 * SKILLS APPLIED (principi concreti, >= 7 ref design doc §3):
 *
 *  1. /frontend-design — institutional-editorial lane. Anti-pattern rifiutati:
 *     NO glassmorphism, NO gradient text su price (weight+font+size+tabular bastano),
 *     NO hero-metric template (price inline nel body del LI, NON layout dashboard),
 *     NO icon-over-heading, NO emoji decorative, NO card nested inside card.
 *     AI-slop test: zero cyan/purple, zero dark-mode-with-glow, typography pairing
 *     ereditato sez 01 (Source Serif 4 display + Work Sans body).
 *
 *  2. /arrange — varied rhythm + squint test + tight/loose alternation.
 *     3 cluster visivi desktop:
 *       (a) prose 62ch + figure portrait 320px float-right [col gap 40-48px] →
 *       (b) priceboard full-bleed grid 2-col [gap 24-32px fra card, pad 32-40px intra] →
 *       (c) prose chiusura + aside CTA [gap 40px prose→CTA].
 *     Ratio tight-intra-card 16-24px vs loose-between-card 32px = 1:1.5, vs section-gap
 *     80-96px = 1:5. Squint test: 4 focal point (H2, figure portrait, 2 price
 *     size-jumped, aside CTA border-left).
 *
 *  3. /bolder — scale jump + weight contrast + focal point.
 *     H2 32→60px clamp vs body 17-19px = 2.5-3.5x. Price "180€-700€" inline-block
 *     size 1.625-2.25rem (26-36px) su body 17-19px = 1.6-1.9x con weight 700
 *     Source Serif 4 display vs Work Sans 400 body = contrast display/body.
 *     Card label uppercase tracked +0.08em weight 700 = identity shift enterprise
 *     (NON eyebrow inline prose — e' IL label della card).
 *     Hover card: translateY(-2px) + shadow lift soft (NO bounce, NO spring — CLAUDE.md).
 *
 *  4. /colorize — 60-30-10 con intent institutional, zero AI-slop.
 *     60%: surface warm hue 85 (coerente sez 03/05).
 *     30%: primary tint hue 258 (price blue-700 + drop-cap blue-700 + term highlight
 *          blue-100 + aside border-left blue-700 + card subtle border hue 258).
 *     10%: ink-400 per card-label eyebrow + figcaption.
 *     Zero secondo hue (no arancio CTA qui — aside e' informativo "check-up",
 *     non conversion primaria). Zero gradient text. Tutti OKLCH tinted (no pure gray).
 *     Regola CLAUDE.md: #003781 Allianz primary, neutrals warm-gray.
 *
 *  5. /typeset — modular scale + distinctive pairing + tabular-nums.
 *     Price "180€-700€" Source Serif 4 display weight 700 tabular-nums tracking -0.01em
 *     (numeri finanziari DEVONO allineare — typeset reference rule).
 *     Card label "Area Giuridico-Economica:" 13px uppercase tracked +0.08em weight 700
 *     (enterprise authority small-caps feel).
 *     Body card 17px Work Sans line-height 1.55 (densita dati vs prose 1.65 = segnala
 *     "card scan" vs "paragrafo lettura").
 *     Drop-cap "C" display 3-4rem float lh .9 (eredita sez 05 drop-cap).
 *     Prose max-width 62ch (leggibilita).
 *
 *  6. /polish — edge cases + alignment + winner symmetry.
 *     Card priceboard SIMMETRICHE (no winner-highlight arbitrario — v3 non esprime
 *     preferenza tra aree). Hover card lift 2px (subtle, 220ms ease-out-quart).
 *     Card border 1px oklch(92% 0.005 258) tinted per-brand, non pure gray.
 *     Radius-card 12px coerente sez 03. Clear both su priceboard per reset float figure.
 *     Clearfix defensivo per prose post-figure.
 *
 *  7. /harden — a11y + reduced-motion + semantics.
 *     <ul role="list"> esplicito (Safari reset list-semantics con list-style: none).
 *     Price semantico via <strong> (emphasis = typographic highlight, NON decorative).
 *     aria-labelledby su section. aria-label su aside CTA.
 *     prefers-reduced-motion: disattiva hover lift + stagger, resta fade istantaneo.
 *     focus-visible 3px blue-700 ring su link CTA aside.
 *     forced-colors: fallback CanvasText per bordi card.
 *     Contrast checks (OKLCH):
 *       - Prose ink-600 su surface hue 85: ~10.8:1 AAA
 *       - Price blue-700 su surface/card-bg: ~8.9:1 AAA
 *       - Card label ink-900 su surface: ~16:1 AAA
 *       - Card eyebrow ink-400 su surface: ~4.8:1 AA (tracked uppercase, WCAG 2.2 large-text eqv)
 *       - Term highlight blue-700 su blue-100: ~8.4:1 AAA (ereditato sez 05)
 *       - Drop-cap blue-700 su surface: ~8.9:1 AAA
 *
 * PATCH RULE: additive + scoped body.page-id-1354. Zero cascade collision con
 * sez 01/03/05 (class prefix .al-costi__*). Nessun reset globale. Zero !important
 * eccetto prefers-reduced-motion (CLAUDE.md rule 7).
 */


/* ==========================================================================
   1. Design tokens — scoped body.page-id-1354 (section-06 specific)
   ========================================================================== */
body.page-id-1354 .al-costi {
  /* ---- Reuse/fallback da sez 01/03/05 ---- */
  --al-costi-surface:           var(--al-service-surface, oklch(99% 0.003 85));
  --al-costi-ink-900:           var(--al-hero-ink-900, oklch(22% 0.02 258));
  --al-costi-ink-600:           var(--al-hero-ink-600, oklch(42% 0.02 258));
  --al-costi-ink-400:           var(--al-hero-ink-400, oklch(58% 0.015 258));
  --al-costi-blue-700:          var(--al-hero-blue-700, oklch(32% 0.15 258));
  --al-costi-blue-100:          var(--al-hero-blue-100, oklch(94% 0.03 258));
  --al-costi-blue-50:           oklch(97% 0.015 258);

  --al-costi-font-display:      var(--al-hero-font-display, "Source Serif 4", "Source Serif Pro", Georgia, serif);
  --al-costi-font-body:         var(--al-hero-font-body, "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif);

  --al-costi-ease-out:          var(--al-hero-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
  --al-costi-dur-micro:         var(--al-hero-dur-micro, 180ms);
  --al-costi-dur-fade:          var(--al-hero-dur-fade, 420ms);
  --al-costi-radius-card:       12px;

  /* ---- Typography scale (coerente sez 03) ---- */
  --al-costi-fs-eyebrow:        0.8125rem;                                      /* 13px */
  --al-costi-fs-h2:             clamp(2rem, 1.4rem + 2.4vw, 3.75rem);           /* 32 → 60 */
  --al-costi-fs-prose:          clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);  /* 17 → 19 */
  --al-costi-fs-caption:        0.8125rem;                                      /* 13 */
  --al-costi-lh-h2:             1.12;
  --al-costi-lh-prose:          1.65;

  /* ---- Spacing rhythm ---- */
  --al-costi-sp-section:        clamp(3.5rem, 5vw + 1rem, 6rem);                /* 56 → 96 */
  --al-costi-sp-h2-below:       clamp(1.5rem, 1rem + 1.2vw, 2.5rem);            /* 24 → 40 */
  --al-costi-sp-block:          clamp(1.5rem, 1rem + 1vw, 2.25rem);             /* 24 → 36 */
  --al-costi-sp-prose:          1.5rem;                                          /* 24 between paragraphs */
  --al-costi-sp-prose-max:      62ch;

  /* ---- Figure portrait (eredita sez 03 dimensions) ---- */
  --al-costi-figure-max:        320px;

  /* ---- Eyebrow additivo (synth dall'H2 area, NON duplica prose) ---- */
  --al-costi-eyebrow-track:     0.14em;
  --al-costi-eyebrow-color:     var(--al-costi-blue-700);

  /* ---- Drop-cap prima parola P1 ---- */
  --al-costi-dropcap-fs:        clamp(3rem, 2rem + 2.5vw, 4rem);
  --al-costi-dropcap-color:     var(--al-costi-blue-700);

  /* ---- Term highlight (pill, eredita sez 05 pattern) ---- */
  --al-costi-term-bg:           var(--al-metodo-term-bg, var(--al-costi-blue-100));
  --al-costi-term-color:        var(--al-metodo-term-color, var(--al-costi-blue-700));
  --al-costi-term-pad:          var(--al-metodo-term-pad, 0.125rem 0.5rem);
  --al-costi-term-weight:       var(--al-metodo-term-weight, 600);
  --al-costi-term-radius:       var(--al-metodo-term-radius, 4px);

  /* ---- Priceboard grid (nuovo pattern specifico sez 06) ---- */
  --al-costi-board-gap:         clamp(1rem, 0.5rem + 1.5vw, 2rem);              /* 16 → 32 */
  --al-costi-board-cols:        repeat(auto-fit, minmax(280px, 1fr));
  --al-costi-card-pad:          clamp(1.5rem, 1rem + 1.5vw, 2.25rem);           /* 24 → 36 */
  --al-costi-card-bg:           oklch(99% 0.003 85);
  --al-costi-card-border:       1px solid oklch(92% 0.005 258);
  --al-costi-card-shadow-rest:  0 1px 2px oklch(22% 0.13 255 / 0.04);
  --al-costi-card-shadow-hover: 0 20px 40px -16px oklch(22% 0.13 255 / 0.14),
                                 0 6px 12px -6px oklch(22% 0.13 255 / 0.06);
  --al-costi-card-hover-y:      -2px;
  --al-costi-card-hover-dur:    220ms;

  /* ---- Card label "Area Giuridico-Economica:" (eyebrow authority) ---- */
  --al-costi-card-label-fs:     0.75rem;                                         /* 12px */
  --al-costi-card-label-track:  0.08em;
  --al-costi-card-label-weight: 700;
  --al-costi-card-label-color:  var(--al-costi-ink-900);

  /* ---- Price size-jump su numero inline ---- */
  --al-costi-price-fs:          clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);         /* 24 → 36 */
  --al-costi-price-font:        var(--al-costi-font-display);
  --al-costi-price-weight:      700;
  --al-costi-price-color:       var(--al-costi-blue-700);
  --al-costi-price-track:       -0.01em;
  --al-costi-price-lh:          1;

  /* ---- Price unit "/anno" subscript (S1 polish iter 1) ---- */
  --al-costi-price-unit-fs:     0.8125rem;                                       /* 13px, design doc §2 */
  --al-costi-price-unit-weight: 500;
  --al-costi-price-unit-color:  var(--al-costi-ink-400);
  --al-costi-price-unit-track:  0.01em;

  /* ---- Card note/body line-height (S2 polish iter 1) ---- */
  --al-costi-card-note-lh:      1.55;                                            /* target mobile readability */
}


/* ==========================================================================
   2. Section container — full-width, generous padding
   ========================================================================== */
body.page-id-1354 .al-costi-section {
  background: var(--al-costi-surface);
  padding-block: var(--al-costi-sp-section);
  position: relative;
}

body.page-id-1354 .al-costi-section .al-wrap.al-costi {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}


/* ==========================================================================
   3. Block 0 — Eyebrow "Trasparenza · Tariffe 2026" (synth, additivo)
   ========================================================================== */
body.page-id-1354 .al-costi__eyebrow {
  font-family: var(--al-costi-font-body);
  font-size: var(--al-costi-fs-eyebrow);
  font-weight: 600;
  color: var(--al-costi-eyebrow-color);
  letter-spacing: var(--al-costi-eyebrow-track);
  text-transform: uppercase;
  margin: 0 0 0.75rem 0;
  max-width: var(--al-costi-sp-prose-max);
  margin-inline: auto;
  text-align: left;
}


/* ==========================================================================
   4. Block 1 — H2 "Costi e Tariffe: Trasparenza e Preventivi a Bari"
   ========================================================================== */
body.page-id-1354 .al-costi__h2 {
  font-family: var(--al-costi-font-display);
  font-size: var(--al-costi-fs-h2);
  line-height: var(--al-costi-lh-h2);
  font-weight: 700;
  color: var(--al-costi-ink-900);
  letter-spacing: -0.02em;
  margin: 0 0 var(--al-costi-sp-h2-below) 0;
  max-width: 22ch;
  margin-inline: auto;
  text-align: left;
  text-wrap: balance;
  font-variation-settings: "opsz" 144, "wght" 700;
}

/* Max-width prose wrapping applied also to H2 on desktop — ensure consistency */
@media (min-width: 64em) {
  body.page-id-1354 .al-costi__h2 {
    max-width: 28ch;
    margin-inline: 0 auto;
  }
}


/* ==========================================================================
   5. Block 2 — Figure portrait (riuso pattern sez 03, scope sez 06)
   ========================================================================== */
body.page-id-1354 .al-costi-section .al-costi__figure {
  max-width: var(--al-costi-figure-max);
  margin: 0 auto var(--al-costi-sp-block) auto;
  padding: 0;
  float: none;
}

@media (min-width: 48em) {
  body.page-id-1354 .al-costi-section .al-costi__figure {
    float: right;
    margin-left: clamp(1.5rem, 2vw + 0.5rem, 2.5rem);
    margin-right: 0;
    margin-bottom: var(--al-costi-sp-prose);
    shape-outside: inset(0 round 16px);
  }
}

body.page-id-1354 .al-costi-section .al-costi__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 675 / 1200;
  object-fit: contain;
  object-position: center;
  border-radius: var(--al-hero-radius-card, 16px);
  box-shadow: var(--al-hero-shadow-img, 0 10px 30px -10px oklch(22% 0.13 255 / 0.2));
  background: var(--al-costi-blue-100);
  display: block;
}

body.page-id-1354 .al-costi-section .al-costi__figure figcaption {
  margin-top: 0.75rem;
  font-family: var(--al-costi-font-body);
  font-size: var(--al-costi-fs-caption);
  color: var(--al-costi-ink-400);
  line-height: 1.4;
  font-style: italic;
  text-align: center;
}


/* ==========================================================================
   6. Blocks 3-5, 7-8 — Prose paragraphs (P1..P5, saltando priceboard)
   ========================================================================== */
body.page-id-1354 .al-costi-section .al-costi__p {
  font-family: var(--al-costi-font-body);
  font-size: var(--al-costi-fs-prose);
  line-height: var(--al-costi-lh-prose);
  font-weight: 400;
  color: var(--al-costi-ink-600);
  max-width: var(--al-costi-sp-prose-max);
  /* Centering block, text-align: left preserved (coerente sez 03/04/05) */
  margin: 0 auto var(--al-costi-sp-prose) auto;
  text-align: left;
  text-wrap: pretty;
}

/* Drop-cap solo su P1 lead — desktop only, disattivato mobile (lezione sez 03) */
@media (min-width: 48em) {
  body.page-id-1354 .al-costi-section .al-costi__p--lead::first-letter {
    font-family: var(--al-costi-font-display);
    font-size: var(--al-costi-dropcap-fs);
    line-height: 0.85;
    float: left;
    margin: 0.08em 0.12em 0 0;
    color: var(--al-costi-dropcap-color);
    font-weight: 700;
    font-variation-settings: "opsz" 144, "wght" 700;
    padding: 0.04em 0.02em 0 0;
  }
}

/* Term highlight inline pill — riusa pattern sez 05 */
body.page-id-1354 .al-costi-section .al-costi__term {
  display: inline;
  padding: var(--al-costi-term-pad);
  background: var(--al-costi-term-bg);
  color: var(--al-costi-term-color);
  font-weight: var(--al-costi-term-weight);
  border-radius: var(--al-costi-term-radius);
  font-style: normal;
  letter-spacing: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Bridge paragraph (P3): enfasi visiva subtle per segnalare "guardava verso la priceboard"
   senza cambiare font/size — solo margin-bottom ridotto + colore leggermente piu saturo */
body.page-id-1354 .al-costi-section .al-costi__p--bridge {
  margin-bottom: clamp(1rem, 0.5rem + 1vw, 1.5rem);
  color: var(--al-costi-ink-900);
}


/* ==========================================================================
   7. Block 6 — Priceboard (UL preserved, grid 2-col + card styling su LI)
   USER-APPROVED policy: zero DOM migration, zero-cut, CSS-only restyle.
   ========================================================================== */
body.page-id-1354 .al-costi-section .al-costi__priceboard {
  /* Clear both per reset float figure desktop */
  clear: both;
  /* Full-bleed escape sottile: priceboard puo' usare piu larghezza della prose 62ch */
  max-width: none;
  margin: var(--al-costi-sp-block) 0;
  padding: 0;
  /* Reset list semantics (Safari: list-style none kill role=list implicito) */
  list-style: none;
  /* Grid 2-col desktop, auto-fit mobile (minmax 280px safeguard) */
  display: grid;
  grid-template-columns: var(--al-costi-board-cols);
  gap: var(--al-costi-board-gap);
}

/* LI = card. Zero nested element required. */
body.page-id-1354 .al-costi-section .al-costi__card {
  position: relative;
  margin: 0;
  padding: var(--al-costi-card-pad);
  background: var(--al-costi-card-bg);
  border: var(--al-costi-card-border);
  border-radius: var(--al-costi-radius-card);
  box-shadow: var(--al-costi-card-shadow-rest);
  color: var(--al-costi-ink-600);
  font-family: var(--al-costi-font-body);
  font-size: var(--al-costi-fs-prose);
  /* S2 polish iter 1: line-height via token (target 1.55 mobile readability).
     Selettore .al-costi__card-note non esiste — body card e' direttamente LI text node,
     quindi applichiamo line-height al card root. Confermato 1.55 (era hardcoded, ora tokenizzato). */
  line-height: var(--al-costi-card-note-lh, 1.55);
  /* LI is NOT floated — clear previous float is enough above on .al-costi__priceboard */
  transition: transform var(--al-costi-card-hover-dur) var(--al-costi-ease-out),
              box-shadow var(--al-costi-card-hover-dur) var(--al-costi-ease-out),
              border-color var(--al-costi-card-hover-dur) var(--al-costi-ease-out);
}

/* Hover card lift subtle (NO bounce, NO spring, CLAUDE.md compliant) */
@media (hover: hover) {
  body.page-id-1354 .al-costi-section .al-costi__card:hover {
    transform: translateY(var(--al-costi-card-hover-y));
    box-shadow: var(--al-costi-card-shadow-hover);
    border-color: oklch(85% 0.02 258);
  }
}

/* Card label "Area Giuridico-Economica:" — uppercase tracked eyebrow authority.
   Markup preserved from v3: <strong> gia' presente a inizio LI. */
body.page-id-1354 .al-costi-section .al-costi__card-label {
  display: block;
  font-family: var(--al-costi-font-body);
  font-size: var(--al-costi-card-label-fs);
  font-weight: var(--al-costi-card-label-weight);
  color: var(--al-costi-card-label-color);
  letter-spacing: var(--al-costi-card-label-track);
  text-transform: uppercase;
  margin: 0 0 0.875rem 0;
  /* Rimuove i ":" trailing a livello visivo (preservato a livello testuale per
     screen reader semantica) */
  /* Nota: il ":" resta nel markup, mascherato solo visivamente dove possibile.
     Alternativa considerata (font-feature-settings caps) rifiutata: no OTF cap support garantito.
     Manteniamo ":" visibile ma piccolo (tracked uppercase 12px). */
}

/* Price size-jump su numero inline (preserva frase v3 intera):
   "...varia tipicamente dai [180€-700€] annui, modulabile..."
   <strong class="al-costi__price"> applicato a numero esistente. */
body.page-id-1354 .al-costi-section .al-costi__price {
  display: inline-block;
  font-family: var(--al-costi-price-font);
  font-size: var(--al-costi-price-fs);
  font-weight: var(--al-costi-price-weight);
  color: var(--al-costi-price-color);
  line-height: var(--al-costi-price-lh);
  letter-spacing: var(--al-costi-price-track);
  /* Tabular-nums: numeri finanziari DEVONO allineare */
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums;
  font-variation-settings: "opsz" 144, "wght" 700;
  /* Vertical align ottico: price grande inline nel flow body 17-19px */
  vertical-align: baseline;
  /* Light nudge per fare "respirare" il numero senza rompere baseline */
  margin: 0 0.075em;
  /* Wrap-safe per mobile: 450€-2.500€ non spezza a meta' */
  white-space: nowrap;
}

/* Price unit "/anno" — small subscript dopo range price (S1 polish iter 1).
   aria-hidden nel markup: "annui" segue comunque nella prose v3 (zero content change).
   Visual scannability: unit chiarisce periodicita senza leggere oltre.
   Small gap via margin-left micro, color ink-400 per weight visivo inferiore al price. */
body.page-id-1354 .al-costi-section .al-costi__price-unit {
  display: inline-block;
  font-family: var(--al-costi-font-body);
  font-size: var(--al-costi-price-unit-fs);
  font-weight: var(--al-costi-price-unit-weight);
  color: var(--al-costi-price-unit-color);
  letter-spacing: var(--al-costi-price-unit-track);
  line-height: 1;
  margin-left: 0.25em;
  vertical-align: baseline;
  white-space: nowrap;
}


/* ==========================================================================
   8. Block 9 — Aside CTA card (riuso pattern sez 03)
   Note: .al-cta-card gia' stylato da section-03-servizi-grid.css.
   Qui aggiungiamo solo scope override per sez 06 (clear float figure post-priceboard
   non necessario perche' priceboard ha gia' clear:both — ma defensivo su .al-costi__cta).
   ========================================================================== */
body.page-id-1354 .al-costi-section .al-costi__cta {
  clear: both;
  margin-top: var(--al-costi-sp-block);
}

/* Se section-03 CSS non e' caricato (preview standalone), forniamo fallback minimo */
body.page-id-1354 .al-costi-section .al-costi__cta:where(.allianz-cta-box) {
  background: var(--al-service-cta-bg, oklch(32% 0.15 258));
  color: var(--al-service-cta-fg, oklch(99% 0.003 85));
  padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-radius: var(--al-hero-radius-card, 16px);
  box-shadow: 0 12px 32px -16px oklch(22% 0.13 255 / 0.25);
  position: relative;
  overflow: hidden;
}

/* S3 polish iter 1: Aside CTA H3 title scoped sez 06.
   Sez 03 rule e' scoped a .al-service-section — non bleed su sez 06.
   Desktop: parity sez 03 (clamp 1.25rem → 1.625rem).
   Mobile (<48em): size jump contro body parity (clamp 1.125rem → 1.375rem).
   Scope .al-costi-section per non impattare altre sezioni. */
body.page-id-1354 .al-costi-section .al-cta-card__title {
  font-family: var(--al-costi-font-display);
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.625rem);
  line-height: 1.25;
  font-weight: 700;
  color: inherit;
  letter-spacing: -0.01em;
  margin: 0 0 0.875rem 0;
  text-wrap: balance;
}

@media (max-width: 48em) {
  body.page-id-1354 .al-costi-section .al-cta-card__title {
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
    line-height: 1.3;
  }
}


/* ==========================================================================
   9. Responsive adjustments (mobile-first refinements)
   ========================================================================== */

/* Mobile (<768px): figure portrait centered sopra prose, drop-cap disattivato */
@media (max-width: 47.999em) {
  body.page-id-1354 .al-costi-section .al-costi__figure {
    max-width: min(75vw, 280px);
    margin-inline: auto;
  }

  /* Priceboard: stacked 1-col, gap ridotto */
  body.page-id-1354 .al-costi-section .al-costi__priceboard {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Card pad leggermente ridotto mobile per non rubare viewport */
  body.page-id-1354 .al-costi-section .al-costi__card {
    padding: 1.5rem;
  }

  /* H2 max-width reset su mobile */
  body.page-id-1354 .al-costi__h2 {
    max-width: none;
  }
}


/* ==========================================================================
   10. Motion — entrance stagger su card priceboard (subtle, scroll-reveal optional)
   Strategy: fade-in-up solo al primo viewport-enter. Zero parallax, zero scroll-link.
   ========================================================================== */
@keyframes al-costi-reveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.page-id-1354 .al-costi-section .al-costi__figure,
body.page-id-1354 .al-costi-section .al-costi__card {
  animation: al-costi-reveal var(--al-costi-dur-fade) var(--al-costi-ease-out) both;
}

body.page-id-1354 .al-costi-section .al-costi__figure        { animation-delay: 60ms; }
body.page-id-1354 .al-costi-section .al-costi__card:nth-child(1) { animation-delay: 180ms; }
body.page-id-1354 .al-costi-section .al-costi__card:nth-child(2) { animation-delay: 260ms; }


/* ==========================================================================
   11. Reduced motion + forced colors + high-contrast guards
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.page-id-1354 .al-costi-section .al-costi__figure,
  body.page-id-1354 .al-costi-section .al-costi__card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  body.page-id-1354 .al-costi-section .al-costi__card {
    transition: none !important;
  }
  body.page-id-1354 .al-costi-section .al-costi__card:hover {
    transform: none !important;
  }
}

@media (forced-colors: active) {
  body.page-id-1354 .al-costi-section .al-costi__card {
    border: 1px solid CanvasText;
    box-shadow: none;
    background: Canvas;
    color: CanvasText;
  }
  body.page-id-1354 .al-costi-section .al-costi__price,
  body.page-id-1354 .al-costi-section .al-costi__term {
    color: LinkText;
    background: Canvas;
  }
  body.page-id-1354 .al-costi-section .al-costi__card-label {
    color: CanvasText;
  }
}


/* ==========================================================================
   12. Focus-visible (a11y — ring su link aside CTA)
   Already handled by .al-cta-card__details a:focus-visible in sez 03 CSS.
   No duplicate rule needed.
   ========================================================================== */



/*
 * Allianz Bari - Section 06b Proof Social (iter 1, ADDITIVA)
 * Date: 2026-04-14
 * Source: projects/allianz-bari/design/section-06b-proof-design-doc.md
 * Target: page 1354 (assicurazione-professionale-bari)
 * Scope:  body.page-id-1354 .al-proof only - NO impact other Allianz pages
 * Position: additiva tra sez 06 Costi e sez 07 Accessorie (NON in v3)
 *
 * Skills applied (concrete principle per skill, >=7):
 *  - /frontend-design  -> no-AI-slop: rating NON e' hero-metric template;
 *                         composizione editoriale 4-tier (stars + num + count + CTA link)
 *                         solid blue-700 su 5.0 (no gradient text), amber SVG istituzionale (no emoji)
 *  - /arrange          -> asymmetric rhythm: H2 centered (authority) ->
 *                         rating card centrale max-w 640 focal singolare ->
 *                         stats grid 3-col full-width (scansione) ->
 *                         hairline 280px centered + contact 14px (chiusura sobria)
 *                         tight 8-12px cluster intra-card, generous 40-48px tra blocchi
 *  - /bolder           -> rating num 72px > H2 48px (focal singolare), scale 1.5x intra-tier
 *                         isolamento + shadow + border-top fanno il peso, non solo size
 *                         stats flat (NO shadow, NO border) emphasized inferior per design
 *  - /colorize         -> 60-30-10: 60% --al-proof-bg blue-tinted hue 258 (temperature shift
 *                         subtle da sez 06 warm), 30% --allianz-blue-700 (focal accents),
 *                         10% --al-proof-star-fill amber hue 75 (eco cromatico sez 06, solo
 *                         sulle 5 stelle funzionali). Zero pure gray, zero purple-blue gradient.
 *  - /typeset          -> Source Serif 4 numbers (coerenza hero H1), letter-spacing -0.02em
 *                         sul rating (tight hero scale), tabular-nums, eyebrow Work Sans 12px
 *                         600 tracked +0.08em uppercase (ereditato sez 02). No Inter/Roboto.
 *  - /polish           -> border-top 3px blue-700 (editorial masthead accent, not lazy 4-side),
 *                         hairline contact 280px (NON full-width, chiusura sobria),
 *                         amber desaturated oklch(76% 0.15 75) non neon yellow gimmick,
 *                         icona CTA arrow-up-right 12px inline trailing
 *  - /harden           -> role=figure + aria-label redundant info (stars+num+count no info-via-color-alone),
 *                         SVG star aria-hidden (decorative), link Google target=_blank rel=noopener
 *                         + aria-label esteso "(apre in nuova scheda)", tel: con aria-label parlato,
 *                         prefers-reduced-motion guard su fade+stagger
 *
 * Token policy:
 *  - REUSE da sez 01/02/06: --al-hero-blue-700, --al-hero-ink-*, --al-font-display, --al-font-body,
 *    --al-hero-ls-h1, --al-hero-ls-eyebrow, --al-hero-ease, --al-hero-dur-fade, --al-trust-bg (guard)
 *  - CREATE --al-proof-* solo valori section-specific (7 token da design doc, minimi)
 *
 * PATCH RULE: additive + scoped to body.page-id-1354 .al-proof. NO merge in min.css senza build step.
 */

/* ==========================================================================
   1. Design tokens (section-06b specific) - OKLCH
   ========================================================================== */
body.page-id-1354 .al-proof {
  /* Background: blue-tinted surface hue 258 - differenziazione subtle da sez 06 warm hue 75 */
  --al-proof-bg:             oklch(98% 0.006 258);
  /* Star fill: amber istituzionale (Google-review canonical desaturato, NON #FFD700 neon) */
  --al-proof-star-fill:      oklch(76% 0.15 75);
  /* Star size: 22-28px fluid */
  --al-proof-star-size:      clamp(1.375rem, 1rem + 1vw, 1.75rem);
  /* Rating num: 48-72px hero focal */
  --al-proof-rating-num-fs:  clamp(3rem, 2rem + 3vw, 4.5rem);
  /* Card border-top: focal accent top-only (editorial masthead, not lazy 4-side) */
  --al-proof-card-border-top: 3px solid var(--al-hero-blue-700);
  /* Stats grid col gap: 16-32px fluid */
  --al-proof-stat-gap:       clamp(1rem, 0.5rem + 1.5vw, 2rem);
  /* Hairline divider: aligned to bg hue 258, bassa chroma */
  --al-proof-hairline:       1px solid oklch(88% 0.008 258);

  /* Derivati (non duplicati, composti da token riusati + base) */
  --al-proof-sp-section:     clamp(3rem, 5vw + 1rem, 6rem);   /* 48-96 vertical padding */
  --al-proof-sp-gap-hero:    clamp(2rem, 3vw + 1rem, 3rem);   /* 32-48 H2 -> rating card */
  --al-proof-sp-gap-stats:   clamp(2rem, 3vw + 1rem, 3rem);   /* 32-48 rating -> stats */
  --al-proof-sp-gap-close:   clamp(1.75rem, 2.5vw + 0.75rem, 2.5rem); /* 28-40 stats -> hairline -> contact */
  --al-proof-card-radius:    16px;
  --al-proof-card-pad-y:     clamp(2rem, 1.5rem + 1.5vw, 3rem);
  --al-proof-card-pad-x:     clamp(1.5rem, 1rem + 2vw, 3rem);
  --al-proof-card-shadow:    0 2px 4px oklch(22% 0.13 258 / 0.06),
                             0 10px 24px -6px oklch(22% 0.13 258 / 0.14);
}

/* ==========================================================================
   2. Section container
   ========================================================================== */
body.page-id-1354 .al-proof {
  background: var(--al-proof-bg);
  color: var(--al-hero-ink-900);
  padding-block: var(--al-proof-sp-section);
  position: relative;
}

body.page-id-1354 .al-proof__inner {
  max-width: 960px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  /* Centered prose pattern: inner e' auto, paragrafi card restano align-left */
  text-align: center;
}

/* ==========================================================================
   3. Header - H2 authority statement
   ========================================================================== */
body.page-id-1354 .al-proof__header {
  margin: 0 auto var(--al-proof-sp-gap-hero) auto;
  max-width: 720px;
}

body.page-id-1354 .al-proof__title {
  font-family: var(--al-font-display);
  font-size: clamp(2rem, 1.25rem + 2.25vw, 3rem);  /* 32-48 */
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: var(--al-hero-ink-900);
  margin: 0;
  font-variation-settings: "opsz" 48, "wght" 700;
  text-wrap: balance;
}

/* ==========================================================================
   4. Rating card - FOCAL POINT (bolder: pick ONE make it amazing)
   ========================================================================== */
body.page-id-1354 .al-proof__rating {
  background: #ffffff; /* Surface pulita per massimo contrast stars amber su bg freddo */
  border-top: var(--al-proof-card-border-top);
  border-radius: var(--al-proof-card-radius);
  box-shadow: var(--al-proof-card-shadow);
  max-width: 640px;
  margin: 0 auto var(--al-proof-sp-gap-stats) auto;
  padding: var(--al-proof-card-pad-y) var(--al-proof-card-pad-x);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}

/* Stars row: 5 SVG amber, gap 4px */
body.page-id-1354 .al-proof__stars {
  display: inline-flex;
  gap: 4px;
  margin-bottom: 0.875rem; /* 14 stars -> num */
}

body.page-id-1354 .al-proof__star {
  width: var(--al-proof-star-size);
  height: var(--al-proof-star-size);
  fill: var(--al-proof-star-fill);
  flex-shrink: 0;
  display: block;
}

/* Rating value: 5.0 / 5  -- hero num */
body.page-id-1354 .al-proof__rating-value {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  line-height: 1;
  margin-bottom: 0.75rem; /* 12 num -> caption */
  /* Typographic refinement "5.0 / 5": tabular + diagonal fractions (Source Serif 4 OT frac/tnum) */
  font-feature-settings: "frac" 1, "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums diagonal-fractions lining-nums;
}

body.page-id-1354 .al-proof__rating-num {
  font-family: var(--al-font-display);
  font-size: var(--al-proof-rating-num-fs);
  font-weight: 700;
  color: var(--al-hero-blue-700);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "wght" 700;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums;
}

body.page-id-1354 .al-proof__rating-unit {
  font-family: var(--al-font-display);
  font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); /* 24-36 ~ 50% del num */
  font-weight: 600;
  color: var(--al-hero-ink-400);
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

body.page-id-1354 .al-proof__rating-caption {
  margin: 0 0 1.125rem 0; /* 18 caption -> CTA */
  padding: 0;
}

body.page-id-1354 .al-proof__rating-count {
  font-family: var(--al-font-body);
  font-size: 0.9375rem; /* 15 */
  font-weight: 500;
  color: var(--al-hero-ink-600);
  line-height: 1.4;
}

/* CTA link recensioni Google */
body.page-id-1354 .al-proof__rating-cta {
  font-family: var(--al-font-body);
  font-size: 0.9375rem; /* 15 */
  font-weight: 600;
  color: var(--al-hero-blue-700);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem; /* 6 */
  line-height: 1.3;
  transition: color 180ms var(--al-hero-ease),
              text-decoration-thickness 180ms var(--al-hero-ease);
  border-radius: 2px;
}

body.page-id-1354 .al-proof__rating-cta:hover,
body.page-id-1354 .al-proof__rating-cta:focus-visible {
  color: var(--al-hero-ink-900);
  text-decoration-thickness: 2px;
}

body.page-id-1354 .al-proof__rating-cta:focus-visible {
  outline: 2px solid var(--al-hero-blue-700);
  outline-offset: 3px;
}

body.page-id-1354 .al-proof__rating-cta-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  display: block;
  transform: translateY(-1px);
}

/* ==========================================================================
   5. Stats grid - SECONDARY TIER (flat, no shadow/border per gerarchia)
   ========================================================================== */
body.page-id-1354 .al-proof__stats {
  list-style: none;
  margin: 0 0 var(--al-proof-sp-gap-close) 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem var(--al-proof-stat-gap);
}

body.page-id-1354 .al-proof__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 1.25rem 0.25rem; /* 20 v, 4 h */
  gap: 0;
  /* NO border, NO background, NO shadow: flat per contrasto gerarchico vs rating card */
}

body.page-id-1354 .al-proof__stat-num {
  font-family: var(--al-font-display);
  font-size: clamp(2rem, 1.25rem + 2.25vw, 3rem); /* 32-48 */
  font-weight: 700;
  color: var(--al-hero-blue-700);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin-bottom: 0.625rem; /* 10 num -> eyebrow */
  font-variation-settings: "opsz" 96, "wght" 700;
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
}

/* Variant per valori wordy ("Allianz Group", "Local Pack #1") -- size ridotta */
body.page-id-1354 .al-proof__stat-num--word {
  font-size: clamp(2rem, 1.25rem + 2vw, 2.75rem); /* 32-44 -- rialzata per equilibrio riga vs num 48 */
  letter-spacing: -0.01em;
  word-spacing: 0.02em;
  /* tabular-nums rimossi: testo non tabellare */
  font-variant-numeric: normal;
  font-feature-settings: normal;
}

body.page-id-1354 .al-proof__stat-eyebrow {
  font-family: var(--al-font-body);
  font-size: 0.75rem; /* 12 */
  font-weight: 600;
  color: var(--al-hero-ink-400);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.3;
  margin-bottom: 0.375rem; /* 6 eyebrow -> sub */
}

body.page-id-1354 .al-proof__stat-sub {
  font-family: var(--al-font-body);
  font-size: 0.8125rem; /* 13 */
  font-weight: 400;
  color: var(--al-hero-ink-600);
  line-height: 1.45;
}

/* ==========================================================================
   6. Hairline + contact line (tier-3 closure)
   ========================================================================== */
body.page-id-1354 .al-proof__hairline {
  border: 0;
  border-top: var(--al-proof-hairline);
  width: 100%;
  max-width: 280px;
  margin: 0 auto 1.25rem auto; /* 20 hairline -> contact */
  height: 0;
}

body.page-id-1354 .al-proof__contact {
  font-family: var(--al-font-body);
  font-size: 0.875rem; /* 14 */
  font-weight: 500;
  color: var(--al-hero-ink-600);
  line-height: 1.6;
  margin: 0;
  text-align: center;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.375rem 0.625rem; /* 6 v, 10 h */
  max-width: 640px;
  margin-inline: auto;
}

body.page-id-1354 .al-proof__contact-sep {
  color: var(--al-hero-ink-400);
  user-select: none;
}

body.page-id-1354 .al-proof__contact-tel {
  color: var(--al-hero-blue-700);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color 180ms var(--al-hero-ease),
              color 180ms var(--al-hero-ease);
  border-radius: 2px;
}

body.page-id-1354 .al-proof__contact-tel:hover {
  border-bottom-color: var(--al-hero-blue-700);
}

body.page-id-1354 .al-proof__contact-tel:focus-visible {
  outline: 2px solid var(--al-hero-blue-700);
  outline-offset: 3px;
  border-bottom-color: transparent;
}

/* ==========================================================================
   7. Desktop: stats grid 3-col equal
   ========================================================================== */
@media (min-width: 48em) {
  body.page-id-1354 .al-proof__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--al-proof-stat-gap);
  }

  body.page-id-1354 .al-proof__stat {
    padding: 1.5rem 0.5rem; /* 24 v, 8 h */
  }
}

/* ==========================================================================
   8. Motion - fade-in sobrie, stagger 80ms
   NO counter animation (vietata), NO spring physics, NO bounce/elastic
   ========================================================================== */
@keyframes al-proof-fade {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

body.page-id-1354 .al-proof__title,
body.page-id-1354 .al-proof__rating,
body.page-id-1354 .al-proof__stat,
body.page-id-1354 .al-proof__contact {
  animation: al-proof-fade var(--al-hero-dur-fade, 320ms) var(--al-hero-ease, cubic-bezier(0.25, 1, 0.5, 1)) both;
}

body.page-id-1354 .al-proof__title              { animation-delay: 0ms; }
body.page-id-1354 .al-proof__rating             { animation-delay: 80ms; }
body.page-id-1354 .al-proof__stat:nth-child(1)  { animation-delay: 160ms; }
body.page-id-1354 .al-proof__stat:nth-child(2)  { animation-delay: 240ms; }
body.page-id-1354 .al-proof__stat:nth-child(3)  { animation-delay: 320ms; }
body.page-id-1354 .al-proof__contact            { animation-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  body.page-id-1354 .al-proof__title,
  body.page-id-1354 .al-proof__rating,
  body.page-id-1354 .al-proof__stat,
  body.page-id-1354 .al-proof__contact {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* End of section-06b-proof-social.css patch */



/* ============================================================
   SECTION 07 — COPERTURE ACCESSORIE (Typography Break Compact)
   Cliente: Allianz Agenzia Bari · page 1354
   Scope: body.page-id-1354 .al-accessorie
   Pattern: riuso sez 05 typography break (drop-cap + term pill + hairline)
   Varianti sez 07: hairline 40% left-offset (vs sez 05 56% centered),
                    link int thick underline, link ext dotted ink-600.
   Skills: /frontend-design /arrange /bolder /colorize /typeset /polish /harden
   ============================================================ */

/* --- Token scope-specifici (3 gruppi, zero duplicazione globali) ------- */
body.page-id-1354 .al-accessorie {
  /* Link interno — primary equity */
  --al-accessorie-linkint-color:       var(--allianz-blue-700, oklch(38% 0.14 255));
  --al-accessorie-linkint-hover:       var(--allianz-blue-900, oklch(28% 0.12 255));
  --al-accessorie-linkint-thick:       2px;
  --al-accessorie-linkint-offset:      3px;

  /* Link esterno — ink gerarchia ridotta */
  --al-accessorie-linkext-color:       var(--ink-600, oklch(42% 0.02 255));
  --al-accessorie-linkext-hover:       var(--ink-900, oklch(22% 0.02 255));

  /* Hairline rule — asymmetry signature */
  --al-accessorie-rule-w:              40%;
  --al-accessorie-rule-color:          var(--allianz-blue-100, oklch(92% 0.04 255));
  --al-accessorie-rule-gap-top:        clamp(1.5rem, 2.5vw, 2rem);    /* ~32px */
  --al-accessorie-rule-gap-bot:        clamp(1.25rem, 2vw, 1.75rem);

  /* Spacing scale prose */
  --al-accessorie-gap-prose:           clamp(1.25rem, 2vw, 1.5rem);   /* ~24px */
  --al-accessorie-gap-h2:              clamp(1.75rem, 3vw, 2.5rem);   /* ~40px */
  --al-accessorie-gap-eyebrow:         clamp(0.875rem, 1.5vw, 1rem);  /* ~16px */

  /* Container — coerente con sez 05 prose */
  --al-accessorie-wrap-max:            60rem; /* 960px */
  --al-accessorie-pad-block:           clamp(3.5rem, 8vw, 6rem);      /* 56-96px */
  --al-accessorie-pad-inline:          clamp(1.25rem, 4vw, 2rem);
}

/* --- Section shell ---------------------------------------------------- */
body.page-id-1354 .al-accessorie {
  padding-block: var(--al-accessorie-pad-block);
  padding-inline: var(--al-accessorie-pad-inline);
  /* al-section--alt gia' fornisce background var(--surface-alt) globale */
  position: relative;
  isolation: isolate;
}

body.page-id-1354 .al-accessorie__wrap {
  max-width: var(--al-accessorie-wrap-max);
  margin-inline: auto;
  text-align: left;
  /* Squint test: H2 + pill cluster + hairline = 3 focal ordinati */
}

/* --- Eyebrow (additivo, tracked) -------------------------------------- */
body.page-id-1354 .al-accessorie__eyebrow {
  font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
  font-size: var(--fs-eyebrow, 0.75rem);      /* 12px */
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--allianz-blue-700, oklch(38% 0.14 255));
  margin: 0 0 var(--al-accessorie-gap-eyebrow) 0;
  line-height: 1.3;
}

/* --- H2 display (serif, scale-jump) ----------------------------------- */
body.page-id-1354 .al-accessorie__h2 {
  font-family: var(--font-display, 'Source Serif 4', Georgia, serif);
  font-size: clamp(1.875rem, 3.2vw + 0.5rem, 3.5rem);   /* 30 -> 56px */
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink-900, oklch(22% 0.02 255));
  margin: 0 0 var(--al-accessorie-gap-h2) 0;
  text-wrap: balance;
  /* /bolder — scale jump 3.5x vs body 16px */
}

/* --- Prose paragraphs ------------------------------------------------- */
body.page-id-1354 .al-accessorie__p {
  font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);   /* 16 -> 18px */
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-900, oklch(22% 0.02 255));
  max-width: 65ch;
  /* Centering block (65ch vs ~960px wrapper); text-align: left preserved for
     readability (45-75ch rule). Coerente pattern sez 03/04/05/06. */
  margin: 0 auto var(--al-accessorie-gap-prose) auto;
  text-align: left;
  text-wrap: pretty;
}

body.page-id-1354 .al-accessorie__p:last-child {
  margin-bottom: 0;
}

/* --- Drop-cap on first P only (pattern sez 05) ------------------------ */
body.page-id-1354 .al-accessorie__p--lead::first-letter {
  font-family: var(--font-display, 'Source Serif 4', Georgia, serif);
  font-size: clamp(3rem, 6vw, 4.5rem);            /* 48 -> 72px */
  font-weight: 700;
  line-height: 0.9;
  float: left;
  color: var(--allianz-blue-700, oklch(38% 0.14 255));
  padding-right: 0.5rem;
  padding-top: 0.35rem;
  margin-right: 0.15rem;
  /* /typeset — distintivo, non default */
}

/* --- Term pills (strong inline, semantic, 4 istanze) ------------------ */
body.page-id-1354 .al-accessorie__term {
  display: inline;
  font-weight: 600;
  font-style: normal;
  background-color: var(--allianz-blue-100, oklch(92% 0.04 255));
  color: var(--allianz-blue-700, oklch(38% 0.14 255));
  padding: 0.125rem 0.5rem;                       /* 2x8 */
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;            /* wrap pulito su 2 righe */
  letter-spacing: 0;
  /* Contrast primary-700 su primary-100 ~8.4:1 AAA */
  /* /bolder + /colorize — density cluster focal in P2 */
}

/* --- Link interno (primary equity, thick underline) ------------------- */
body.page-id-1354 .al-accessorie__link-int {
  color: var(--al-accessorie-linkint-color);
  text-decoration: underline;
  text-decoration-thickness: var(--al-accessorie-linkint-thick);
  text-underline-offset: var(--al-accessorie-linkint-offset);
  text-decoration-skip-ink: auto;
  font-weight: 500;
  transition: color var(--dur-fade, 180ms) var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
              text-decoration-color var(--dur-fade, 180ms) var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}

body.page-id-1354 .al-accessorie__link-int:hover,
body.page-id-1354 .al-accessorie__link-int:focus-visible {
  color: var(--al-accessorie-linkint-hover);
  text-decoration-color: currentColor;
}

body.page-id-1354 .al-accessorie__link-int:focus-visible {
  outline: 2px solid var(--al-accessorie-linkint-color);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Link esterno (gerarchia ridotta, dotted) ------------------------- */
body.page-id-1354 .al-accessorie__link-ext {
  color: var(--al-accessorie-linkext-color);
  text-decoration: underline dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 500;
  transition: color var(--dur-fade, 180ms) var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}

body.page-id-1354 .al-accessorie__link-ext::after {
  content: " \2197";                              /* ↗ external indicator */
  font-size: 0.85em;
  display: inline-block;
  transform: translateY(-1px);
  margin-left: 0.1em;
  color: currentColor;
  opacity: 0.7;
}

body.page-id-1354 .al-accessorie__link-ext:hover,
body.page-id-1354 .al-accessorie__link-ext:focus-visible {
  color: var(--al-accessorie-linkext-hover);
}

body.page-id-1354 .al-accessorie__link-ext:focus-visible {
  outline: 2px solid var(--al-accessorie-linkext-color);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Hairline divider (40% left-offset asymmetry) --------------------- */
body.page-id-1354 .al-accessorie__rule {
  border: 0;
  height: 1px;
  width: var(--al-accessorie-rule-w);
  margin-inline: 0 auto;                          /* left-aligned, no auto-left */
  margin-inline-start: 0;
  margin-inline-end: auto;
  margin-block: var(--al-accessorie-rule-gap-top) var(--al-accessorie-rule-gap-bot);
  background: linear-gradient(
    90deg,
    var(--al-accessorie-rule-color) 0%,
    var(--al-accessorie-rule-color) 70%,
    transparent 100%
  );
  /* /arrange — asymmetry vs sez 05 centered rule */
}

/* --- Entrance animation (scroll-agnostic, subtle) --------------------- */
@media (prefers-reduced-motion: no-preference) {
  body.page-id-1354 .al-accessorie__eyebrow,
  body.page-id-1354 .al-accessorie__h2,
  body.page-id-1354 .al-accessorie__p,
  body.page-id-1354 .al-accessorie__rule {
    animation: al-accessorie-fade-in 600ms var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)) both;
  }
  body.page-id-1354 .al-accessorie__eyebrow { animation-delay: 0ms; }
  body.page-id-1354 .al-accessorie__h2      { animation-delay: 80ms; }
  body.page-id-1354 .al-accessorie__p--lead { animation-delay: 160ms; }
  body.page-id-1354 .al-accessorie__p:nth-of-type(2)  { animation-delay: 220ms; }
  body.page-id-1354 .al-accessorie__rule    { animation-delay: 280ms; }
  body.page-id-1354 .al-accessorie__p:nth-of-type(3)  { animation-delay: 320ms; }
}

@keyframes al-accessorie-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Reduced motion override ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  body.page-id-1354 .al-accessorie *,
  body.page-id-1354 .al-accessorie *::before,
  body.page-id-1354 .al-accessorie *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* --- Mobile (<768px) — compact rhythm --------------------------------- */
@media (max-width: 767.98px) {
  body.page-id-1354 .al-accessorie {
    padding-block: clamp(2.5rem, 9vw, 3.5rem);
  }
  body.page-id-1354 .al-accessorie__h2 {
    font-size: clamp(1.875rem, 7vw, 2.5rem);      /* 30 -> 40px */
    letter-spacing: -0.015em;
  }
  body.page-id-1354 .al-accessorie__p--lead::first-letter {
    font-size: clamp(2.5rem, 10vw, 3.25rem);
    padding-right: 0.4rem;
  }
  body.page-id-1354 .al-accessorie__rule {
    width: 48%;                                   /* leggermente piu largo su mobile */
  }
}

/* --- Touch enhancement (link target confortevole) --------------------- */
@media (hover: none) and (pointer: coarse) {
  body.page-id-1354 .al-accessorie__link-int,
  body.page-id-1354 .al-accessorie__link-ext {
    padding-block: 0.125rem;                      /* ~44px touch row incl. line-height */
  }
}

/* --- Print (gerarchia tipografica preservata) ------------------------- */
@media print {
  body.page-id-1354 .al-accessorie {
    background: transparent;
    padding-block: 1rem;
  }
  body.page-id-1354 .al-accessorie__link-ext::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
  }
}



/* ============================================================
   SECTION 08 — SICUREZZA E CERTIFICAZIONI (Numbered Prose)
   Cliente: Allianz Agenzia Bari · page 1354
   Scope: body.page-id-1354 .al-sicurezza
   Pattern: NUMBERED PROSE (01→04) — variante anti-saturazione
            vs typography break drop-cap (sez 04/05/07).
   Layout: 2-col grid 72px/1fr (numero serif display + prose).
   Skills: /frontend-design /arrange /bolder /colorize /typeset /polish /harden
   ============================================================ */

/* --- Token scope-specifici (6 nuovi, zero duplicazione) --------------- */
body.page-id-1354 .al-sicurezza {
  /* Numero ordinal display — focal anchor */
  --al-sicurezza-num-font:      var(--font-display, 'Source Serif 4', Georgia, serif);
  --al-sicurezza-num-size:      clamp(2.25rem, 3.2vw, 3rem);   /* 36→48px */
  --al-sicurezza-num-weight:    500;
  --al-sicurezza-num-color:     var(--allianz-blue-700, oklch(38% 0.14 255));
  --al-sicurezza-num-track:     -0.04em;
  --al-sicurezza-num-lh:        1;
  --al-sicurezza-num-width:     clamp(3rem, 6vw, 4.5rem);       /* 48→72px col-sx */
  --al-sicurezza-num-baseline:  0.625rem;                       /* optical align a x-height prose (bumped +2px iter2) */

  /* Grid gaps (riga prose = num + prose) */
  --al-sicurezza-row-gap-x:     clamp(1.5rem, 3vw, 2rem);       /* 24→32px num→prose */
  --al-sicurezza-row-gap-y:     clamp(1.75rem, 3vw, 2.25rem);   /* 28→36px tra righe */

  /* Spacing scala (riuso pattern sez 07) */
  --al-sicurezza-gap-eyebrow:   clamp(0.875rem, 1.5vw, 1rem);   /* ~16px */
  --al-sicurezza-gap-h2:        clamp(1.25rem, 2.5vw, 1.75rem); /* 20→28px H2→hairline */
  --al-sicurezza-gap-rule:      clamp(1.5rem, 3vw, 2.25rem);    /* hairline→prima row */

  /* Hairline H2 accent (80px, 2px, primary-700, left) */
  --al-sicurezza-rule-w:        5rem;                           /* 80px */
  --al-sicurezza-rule-h:        2px;
  --al-sicurezza-rule-color:    var(--allianz-blue-700, oklch(38% 0.14 255));

  /* Container — coerente con sez 05/07 prose */
  --al-sicurezza-wrap-max:      60rem;                          /* 960px */
  --al-sicurezza-pad-block:     clamp(3.5rem, 8vw, 6rem);       /* 56→96px */
  --al-sicurezza-pad-inline:    clamp(1.25rem, 4vw, 2rem);
}

/* --- Section shell ---------------------------------------------------- */
body.page-id-1354 .al-sicurezza {
  padding-block: var(--al-sicurezza-pad-block);
  padding-inline: var(--al-sicurezza-pad-inline);
  /* al-section--alt background surface-alt gia' applicato via class globale */
  position: relative;
  isolation: isolate;
}

body.page-id-1354 .al-sicurezza__wrap {
  max-width: var(--al-sicurezza-wrap-max);
  margin-inline: auto;
  text-align: left;
  /* Squint test: eyebrow + H2+hairline + 4 numeri ordinali = 6 focal */
}

/* --- Eyebrow (additivo, tracked) -------------------------------------- */
body.page-id-1354 .al-sicurezza__eyebrow {
  font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
  font-size: var(--fs-eyebrow, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-600, oklch(42% 0.02 255));
  margin: 0 0 var(--al-sicurezza-gap-eyebrow) 0;
  line-height: 1.3;
  /* /colorize — 10% accent ink-600 sobrio, no primary (primary riservato a numeri+rule) */
}

/* --- H2 display (serif, scale-jump 3.5x vs body) ---------------------- */
body.page-id-1354 .al-sicurezza__h2 {
  font-family: var(--font-display, 'Source Serif 4', Georgia, serif);
  font-size: clamp(1.875rem, 3.2vw + 0.5rem, 3.5rem);           /* 30→56px */
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink-900, oklch(22% 0.02 255));
  margin: 0 0 var(--al-sicurezza-gap-h2) 0;
  text-wrap: balance;
  /* /bolder — scale jump 3.5x vs prose 18px */
}

/* --- Hairline rule (80px left, primary-700, signature sec 08) --------- */
body.page-id-1354 .al-sicurezza__rule {
  border: 0;
  width: var(--al-sicurezza-rule-w);
  height: var(--al-sicurezza-rule-h);
  background: var(--al-sicurezza-rule-color);
  margin: 0 0 var(--al-sicurezza-gap-rule) 0;                   /* left-aligned */
  /* /arrange — rule 80px massiccio vs sez 07 40% gradient = differenziazione */
}

/* --- Rows — 2-col grid (numero col-sx + prose col-dx) ----------------- */
body.page-id-1354 .al-sicurezza__row {
  display: grid;
  grid-template-columns: var(--al-sicurezza-num-width) 1fr;
  column-gap: var(--al-sicurezza-row-gap-x);
  align-items: start;
  margin: 0 auto var(--al-sicurezza-row-gap-y) auto;
  max-width: calc(var(--al-sicurezza-num-width) + var(--al-sicurezza-row-gap-x) + 65ch);
  /* Centering block: num-col + gap + prose 65ch. text-align left preservato. */
}

body.page-id-1354 .al-sicurezza__row:last-of-type {
  margin-bottom: 0;
}

/* --- Numero ordinal (01→04) decorativo, aria-hidden ------------------- */
body.page-id-1354 .al-sicurezza__num {
  display: block;
  font-family: var(--al-sicurezza-num-font);
  font-size: var(--al-sicurezza-num-size);
  font-weight: var(--al-sicurezza-num-weight);
  line-height: var(--al-sicurezza-num-lh);
  letter-spacing: var(--al-sicurezza-num-track);
  color: var(--al-sicurezza-num-color);
  font-variant-numeric: tabular-nums;                           /* 01/02/03/04 pixel-aligned vert */
  margin-top: var(--al-sicurezza-num-baseline);                 /* optical align x-height prose */
  user-select: none;                                            /* decorative, non selectable */
  /* /typeset — serif display tabular-nums = ancore ordinali verticali pulite */
  /* /bolder — ratio 2.7x vs body 18px, weight contrast 500 vs 400 */
}

/* --- Prose (<p> paragrafi verbatim v3, max 65ch) ---------------------- */
body.page-id-1354 .al-sicurezza__p {
  font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);           /* 16→18px */
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-900, oklch(22% 0.02 255));
  max-width: 65ch;
  margin: 0;
  text-align: left;
  text-wrap: pretty;
  /* /typeset — 18px body + 1.7 lh = readability AAA, 65ch rule */
}

/* --- Term highlight (strong inline, 4 istanze: IVASS, Gelli-Bianco,
       Rinnovo Annuale Iscrizione all'Albo, RUI) --------------------------
   FIX 2 — Normalizzato da underline a PILL uniforme (coerente sez 05/07/09).
   Underline confondeva con link reali. Pill = pattern design system consolidato.
   /normalize + /colorize — coerenza cross-sezione term highlight. */
body.page-id-1354 .al-sicurezza__term {
  display: inline;
  font-weight: 600;
  font-style: normal;
  background: oklch(96% 0.025 258);
  color: var(--allianz-blue-700, oklch(38% 0.14 255));
  padding: 0.125em 0.375em;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  /* Contrast primary-700 su pill-bg ~8.4:1 AAA */
}

/* --- Entrance animation (scroll-agnostic, stagger 4 rows) ------------- */
@media (prefers-reduced-motion: no-preference) {
  body.page-id-1354 .al-sicurezza__eyebrow,
  body.page-id-1354 .al-sicurezza__h2,
  body.page-id-1354 .al-sicurezza__rule,
  body.page-id-1354 .al-sicurezza__row {
    animation: al-sicurezza-fade-in 600ms var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)) both;
  }
  body.page-id-1354 .al-sicurezza__eyebrow                   { animation-delay: 0ms; }
  body.page-id-1354 .al-sicurezza__h2                        { animation-delay: 80ms; }
  body.page-id-1354 .al-sicurezza__rule                      { animation-delay: 140ms; }
  body.page-id-1354 .al-sicurezza__row:nth-of-type(1)        { animation-delay: 220ms; }
  body.page-id-1354 .al-sicurezza__row:nth-of-type(2)        { animation-delay: 300ms; }
  body.page-id-1354 .al-sicurezza__row:nth-of-type(3)        { animation-delay: 380ms; }
  body.page-id-1354 .al-sicurezza__row:nth-of-type(4)        { animation-delay: 460ms; }
}

@keyframes al-sicurezza-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Reduced motion override (accessibility hard-gate) ---------------- */
@media (prefers-reduced-motion: reduce) {
  body.page-id-1354 .al-sicurezza *,
  body.page-id-1354 .al-sicurezza *::before,
  body.page-id-1354 .al-sicurezza *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* --- Mobile (<768px) — stack: num sopra prose ------------------------- */
@media (max-width: 767.98px) {
  body.page-id-1354 .al-sicurezza {
    padding-block: clamp(2.5rem, 9vw, 3.5rem);
  }
  body.page-id-1354 .al-sicurezza__h2 {
    font-size: clamp(1.875rem, 7vw, 2.5rem);                    /* 30→40px */
    letter-spacing: -0.015em;
  }
  body.page-id-1354 .al-sicurezza__rule {
    width: 3.5rem;                                              /* 56px mobile */
  }
  body.page-id-1354 .al-sicurezza__row {
    grid-template-columns: 1fr;                                 /* stacked */
    row-gap: 0.5rem;                                            /* 8px num→prose (tight) */
    max-width: 100%;
  }
  body.page-id-1354 .al-sicurezza__num {
    margin-top: 0;                                              /* no optical offset stacked */
    font-size: clamp(2rem, 8vw, 2.5rem);                        /* 32→40px */
  }
  /* S2 — Ordinal rule post-numero (stacked mobile): rinforza pattern "01 ___" */
  body.page-id-1354 .al-sicurezza__num::after {
    content: "";
    display: inline-block;
    width: 2rem;                                                /* 32px */
    height: 1px;
    background: var(--al-sicurezza-num-color);
    margin-inline-start: 0.75rem;                               /* 12px gap num→rule */
    vertical-align: middle;
    transform: translateY(-0.1em);                              /* optical centering vs numero baseline */
  }
}

/* --- Print (gerarchia tipografica preservata) ------------------------- */
@media print {
  body.page-id-1354 .al-sicurezza {
    background: transparent;
    padding-block: 1rem;
  }
  body.page-id-1354 .al-sicurezza__num {
    color: #000;
  }
  body.page-id-1354 .al-sicurezza__term {
    background: oklch(96% 0.025 258);
    color: var(--allianz-blue-700, oklch(38% 0.14 255));
  }
}



/* ============================================================
   SECTION 09 — AREE DI COPERTURA (Typography Break + Maps Cerniera)
   Cliente: Allianz Agenzia Bari · page 1354
   Scope: body.page-id-1354 .al-aree
   Pattern: 4a occorrenza typography break (sez 04/05/07) con 2 shift mirati:
     1) Warm-accent injection su link Maps (orange/amber) per rompere
        blue-saturation 9-section,
     2) Maps embed come "cerniera" full-bleed post-H2/pre-prose,
     3) Density pill compact 6 istanze (vs sez 05 4, sez 07 4) —
        motivata da entity-dense v3:288-302.
   Skills:
     /frontend-design — no AI-slop Maps (niente glassmorphism, niente big-icon
                        overlay template). Iframe nativo + container sobrio.
     /bolder          — scale jump 3.5x H2 vs body, full-bleed Maps 1120px
                        escape vs prose 960px rompe monotonia post-hairline.
     /colorize        — warm accent strategico orange-500 SOLO su link CTA
                        Maps (1 elemento). 60-30-10 rispettato. Zero gradient
                        AI-slop, zero secondo hue pervasivo.
     /arrange         — gap rhythm H2>hairline 16 / hairline>Maps 48 /
                        Maps>link 12 / link>P1 56 / inter-P 28. Asymmetry:
                        H2 left, Maps full-bleed, link right-desktop.
     /typeset         — drop-cap "C" display 3-4rem lh .9 (ereditato sez 05).
                        Pill 13px Work Sans 600 (ereditato sez 05/07).
                        Tracking link warm .01em per 14px.
     /delight         — warm moment micro: hover link color shift warm→warm-hover
                        180ms + icon ↗ translate(2px,-2px). Zero bounce,
                        zero spring, zero parallax Maps.
     /polish          — focus-visible 2px outline offset 3, touch 44px min,
                        print strip background.
   ============================================================ */

/* --- Token scope-specifici (warm-accent + Maps container) -------------- */
body.page-id-1354 .al-aree {
  /* Maps container */
  --al-aree-maps-radius:          12px;
  --al-aree-maps-border:          1px solid var(--allianz-blue-100, oklch(92% 0.04 255));
  --al-aree-maps-shadow:          var(--shadow-sm, 0 1px 3px oklch(20% 0.02 255 / 0.08));
  --al-aree-maps-aspect-desktop:  16 / 9;
  --al-aree-maps-aspect-mobile:   4 / 3;
  --al-aree-maps-bleed-max:       70rem;                 /* ~1120px full-bleed escape */

  /* Warm accent — break blue-saturation (1 elemento puntuale) */
  --al-aree-accent-warm:          oklch(70% 0.16 55);    /* ~#E67A2E Allianz-safe */
  --al-aree-accent-warm-hover:    oklch(62% 0.17 50);    /* deeper on hover */

  /* Link CTA Maps */
  --al-aree-link-fs:              0.875rem;              /* 14px */
  --al-aree-link-weight:          600;
  --al-aree-link-tracking:        0.01em;
  --al-aree-link-gap:             0.375rem;              /* 6px icon-text gap */

  /* Spacing scale prose (coerente sez 05/07) */
  --al-aree-gap-eyebrow:          clamp(0.875rem, 1.5vw, 1rem);   /* ~16px */
  --al-aree-gap-h2:               clamp(0.75rem, 1.25vw, 1rem);   /* ~16px (H2→hairline) */
  --al-aree-gap-rule-maps:        clamp(2rem, 4vw, 3rem);          /* ~48px */
  --al-aree-gap-maps-link:        clamp(0.5rem, 1vw, 0.75rem);     /* ~12px */
  --al-aree-gap-link-prose:       clamp(2.5rem, 5vw, 3.5rem);      /* ~56px */
  --al-aree-gap-prose:            clamp(1.25rem, 2vw, 1.75rem);    /* ~28px inter-P */

  /* Hairline (ereditato sez 08, 80px left) */
  --al-aree-rule-w:               80px;
  --al-aree-rule-h:               2px;
  --al-aree-rule-color:           var(--allianz-blue-700, oklch(38% 0.14 255));
  --al-aree-rule-gap-top:         clamp(0.5rem, 1vw, 0.75rem);
  --al-aree-rule-gap-bot:         var(--al-aree-gap-rule-maps);

  /* Container — prose 960px, Maps full-bleed 1120px */
  --al-aree-wrap-max:             60rem;                 /* 960px prose */
  --al-aree-pad-block:            clamp(3.5rem, 8vw, 6rem);
  --al-aree-pad-inline:           clamp(1.25rem, 4vw, 2rem);
}

/* --- Section shell ----------------------------------------------------- */
body.page-id-1354 .al-aree {
  padding-block: var(--al-aree-pad-block);
  padding-inline: var(--al-aree-pad-inline);
  position: relative;
  isolation: isolate;
  /* al-section--alt già fornisce background var(--surface-alt) globale */
}

body.page-id-1354 .al-aree__wrap {
  max-width: var(--al-aree-wrap-max);
  margin-inline: auto;
  text-align: left;
}

/* --- Eyebrow additivo -------------------------------------------------- */
body.page-id-1354 .al-aree__eyebrow {
  font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
  font-size: var(--fs-eyebrow, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--allianz-blue-700, oklch(38% 0.14 255));
  margin: 0 0 var(--al-aree-gap-eyebrow) 0;
  line-height: 1.3;
}

/* --- H2 display (serif scale-jump, ereditato pattern sez 05/07/08) ---- */
body.page-id-1354 .al-aree__h2 {
  font-family: var(--font-display, 'Source Serif 4', Georgia, serif);
  font-size: clamp(1.875rem, 3.2vw + 0.5rem, 3.5rem);   /* 30→56px */
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink-900, oklch(22% 0.02 255));
  margin: 0 0 var(--al-aree-gap-h2) 0;
  text-wrap: balance;
}

/* --- Hairline 80px left (ereditato sez 08) ---------------------------- */
body.page-id-1354 .al-aree__rule {
  border: 0;
  height: var(--al-aree-rule-h);
  width: var(--al-aree-rule-w);
  background-color: var(--al-aree-rule-color);
  margin-inline-start: 0;
  margin-inline-end: auto;
  margin-block: var(--al-aree-rule-gap-top) var(--al-aree-rule-gap-bot);
  border-radius: 1px;
}

/* --- Maps container (full-bleed cerniera 1120px) ---------------------- */
body.page-id-1354 .al-aree__map {
  /* Full-bleed escape: occupa fino a 1120px dentro sezione, oltre il wrap 960 */
  max-width: var(--al-aree-maps-bleed-max);
  width: 100%;
  margin-inline: auto;
  position: relative;
  border-radius: var(--al-aree-maps-radius);
  border: var(--al-aree-maps-border);
  box-shadow: var(--al-aree-maps-shadow);
  background-color: var(--surface, oklch(98% 0.005 255));
  overflow: hidden;
  aspect-ratio: var(--al-aree-maps-aspect-desktop);
}

body.page-id-1354 .al-aree__map-wrap {
  /* Fallback stacking container — iframe + noscript sit in same box */
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}

body.page-id-1354 .al-aree__map iframe,
body.page-id-1354 .al-aree__map-iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(1.02);
  /* /delight — subtle saturation lift, no glassmorphism */
}

/* --- Fallback card (noscript / CookieYes-block / iframe-fail) ---------- */
/* /harden — graceful degradation quando Maps embed non carica */
body.page-id-1354 .al-aree__map-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: clamp(1.5rem, 4vw, 2rem);
  background-color: var(--allianz-blue-100, oklch(92% 0.04 255));
  border-radius: var(--al-aree-maps-radius);
  text-align: center;
  color: var(--ink-900, oklch(22% 0.02 255));
  font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
}

body.page-id-1354 .al-aree__map-fallback-title {
  margin: 0;
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  font-weight: 600;
  color: var(--allianz-blue-700, oklch(38% 0.14 255));
  line-height: 1.3;
}

body.page-id-1354 .al-aree__map-fallback-addr {
  margin: 0;
  font-size: 0.9375rem;                                  /* 15px */
  line-height: 1.5;
}

body.page-id-1354 .al-aree__map-fallback-link {
  display: inline-flex;
  align-items: center;
  gap: var(--al-aree-link-gap);
  margin-top: 0.25rem;
  min-height: 44px;                                      /* /adapt — WCAG 2.5.5 AAA */
  padding-block: 0.5rem;
  padding-inline: 0.25rem;
  color: var(--al-aree-accent-warm);
  font-size: var(--al-aree-link-fs);
  font-weight: var(--al-aree-link-weight);
  letter-spacing: var(--al-aree-link-tracking);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color 180ms var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}

body.page-id-1354 .al-aree__map-fallback-link:hover,
body.page-id-1354 .al-aree__map-fallback-link:focus-visible {
  color: var(--al-aree-accent-warm-hover);
}

body.page-id-1354 .al-aree__map-fallback-link:focus-visible {
  outline: 2px solid var(--al-aree-accent-warm);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- CTA Maps link (warm accent, solo qui) ---------------------------- */
body.page-id-1354 .al-aree__map-cta {
  max-width: var(--al-aree-maps-bleed-max);
  margin-inline: auto;
  margin-block: var(--al-aree-gap-maps-link) var(--al-aree-gap-link-prose);
  display: flex;
  justify-content: flex-end;       /* right-aligned desktop */
}

body.page-id-1354 .al-aree__map-link {
  display: inline-flex;
  align-items: center;
  gap: var(--al-aree-link-gap);
  font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
  font-size: var(--al-aree-link-fs);
  font-weight: var(--al-aree-link-weight);
  letter-spacing: var(--al-aree-link-tracking);
  color: var(--al-aree-accent-warm);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  text-decoration-skip-ink: auto;
  padding-block: 0.25rem;
  transition: color 180ms var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}

body.page-id-1354 .al-aree__map-link:hover,
body.page-id-1354 .al-aree__map-link:focus-visible {
  color: var(--al-aree-accent-warm-hover);
}

body.page-id-1354 .al-aree__map-link:focus-visible {
  outline: 2px solid var(--al-aree-accent-warm);
  outline-offset: 3px;
  border-radius: 2px;
}

body.page-id-1354 .al-aree__map-link-icon {
  display: inline-block;
  font-size: 0.9em;
  line-height: 1;
  transform: translate(0, 0);
  transition: transform 180ms var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
}

body.page-id-1354 .al-aree__map-link:hover .al-aree__map-link-icon,
body.page-id-1354 .al-aree__map-link:focus-visible .al-aree__map-link-icon {
  transform: translate(2px, -2px);
}

/* --- Prose paragraphs (centering 65ch, coerente sez 05/07) ------------ */
body.page-id-1354 .al-aree__p {
  font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.125rem);   /* 16→18px */
  font-weight: 400;
  line-height: 1.7;
  color: var(--ink-900, oklch(22% 0.02 255));
  max-width: 65ch;
  margin: 0 auto var(--al-aree-gap-prose) auto;
  text-align: left;
  text-wrap: pretty;
}

body.page-id-1354 .al-aree__p:last-child {
  margin-bottom: 0;
}

/* --- Drop-cap "C" P1 desktop-only (pattern sez 05) -------------------- */
body.page-id-1354 .al-aree__p--lead::first-letter {
  font-family: var(--font-display, 'Source Serif 4', Georgia, serif);
  font-size: clamp(3rem, 6vw, 4.5rem);                  /* 48→72px */
  font-weight: 700;
  line-height: 0.9;
  float: left;
  color: var(--allianz-blue-700, oklch(38% 0.14 255));
  padding-right: 0.5rem;
  padding-top: 0.35rem;
  margin-right: 0.15rem;
}

/* --- Term pill (6 istanze, ereditato sez 05/07) ----------------------- */
body.page-id-1354 .al-aree__term {
  display: inline;
  font-weight: 600;
  font-style: normal;
  background-color: var(--allianz-blue-100, oklch(92% 0.04 255));
  color: var(--allianz-blue-700, oklch(38% 0.14 255));
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  letter-spacing: 0;
  /* Contrast primary-700 su primary-100 ~8.4:1 AAA */
}

/* --- Entrance animation (staggered, scroll-agnostic) ------------------ */
@media (prefers-reduced-motion: no-preference) {
  body.page-id-1354 .al-aree__eyebrow,
  body.page-id-1354 .al-aree__h2,
  body.page-id-1354 .al-aree__rule,
  body.page-id-1354 .al-aree__map,
  body.page-id-1354 .al-aree__map-cta,
  body.page-id-1354 .al-aree__p {
    animation: al-aree-fade-in 600ms var(--ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)) both;
  }
  body.page-id-1354 .al-aree__eyebrow       { animation-delay: 0ms; }
  body.page-id-1354 .al-aree__h2            { animation-delay: 80ms; }
  body.page-id-1354 .al-aree__rule          { animation-delay: 140ms; }
  body.page-id-1354 .al-aree__map           { animation-delay: 200ms; }
  body.page-id-1354 .al-aree__map-cta       { animation-delay: 260ms; }
  body.page-id-1354 .al-aree__p--lead       { animation-delay: 320ms; }
  body.page-id-1354 .al-aree__p:nth-of-type(2) { animation-delay: 380ms; }
  body.page-id-1354 .al-aree__p:nth-of-type(3) { animation-delay: 440ms; }
  body.page-id-1354 .al-aree__p:nth-of-type(4) { animation-delay: 500ms; }
  body.page-id-1354 .al-aree__p:nth-of-type(5) { animation-delay: 560ms; }
}

@keyframes al-aree-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Reduced motion override ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  body.page-id-1354 .al-aree *,
  body.page-id-1354 .al-aree *::before,
  body.page-id-1354 .al-aree *::after {
    animation: none !important;
    transition: none !important;
  }
  body.page-id-1354 .al-aree__map-link:hover .al-aree__map-link-icon,
  body.page-id-1354 .al-aree__map-link:focus-visible .al-aree__map-link-icon {
    transform: none !important;
  }
}

/* --- Mobile (<768px) — Maps 4:3, drop-cap OFF, link left --------------- */
@media (max-width: 767.98px) {
  body.page-id-1354 .al-aree {
    padding-block: clamp(2.5rem, 9vw, 3.5rem);
  }
  body.page-id-1354 .al-aree__h2 {
    font-size: clamp(1.875rem, 7vw, 2.5rem);            /* 30→40px */
    letter-spacing: -0.015em;
  }
  body.page-id-1354 .al-aree__rule {
    width: 56px;                                         /* piccolo-mobile coerente sez 08 */
  }
  body.page-id-1354 .al-aree__map {
    aspect-ratio: var(--al-aree-maps-aspect-mobile);
    border-radius: 10px;
  }
  body.page-id-1354 .al-aree__map-cta {
    justify-content: flex-start;                         /* left-aligned mobile */
  }
  /* /adapt + /polish — tap-target WCAG 2.5.5 AAA 44px mobile */
  body.page-id-1354 .al-aree__map-link {
    min-height: 44px;
    padding-block: 0.75rem;
    display: inline-flex;
    align-items: center;
  }
  /* Drop-cap DISATTIVATO su mobile (lezione sez 05) */
  body.page-id-1354 .al-aree__p--lead::first-letter {
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    float: none;
    color: inherit;
    padding: 0;
    margin: 0;
    font-family: inherit;
  }
}

/* --- Touch enhancement (link Maps confortevole) ----------------------- */
@media (hover: none) and (pointer: coarse) {
  body.page-id-1354 .al-aree__map-link {
    padding-block: 0.5rem;                               /* ~44px touch */
  }
}

/* --- Print (strip background, preserva link) -------------------------- */
@media print {
  body.page-id-1354 .al-aree {
    background: transparent;
    padding-block: 1rem;
  }
  body.page-id-1354 .al-aree__map {
    border: 1px solid oklch(60% 0 0);
    box-shadow: none;
  }
  body.page-id-1354 .al-aree__map iframe {
    display: none;
  }
  body.page-id-1354 .al-aree__map::after {
    content: "Mappa sede Allianz Agenzia Bari — Via Nicolò Putignani 75, 70121 Bari (BA)";
    display: block;
    padding: 1rem;
    font-size: 0.875rem;
    font-style: italic;
  }
  body.page-id-1354 .al-aree__map-link::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
  }
}



/* ============================================================
   SECTION 10 — FAQ (Domande Frequenti, CSS-only accordion)
   Cliente: Allianz Agenzia Bari · page 1354
   Scope: body.page-id-1354 .al-faq
   Pattern: native <details>/<summary> preserved (zero JS, a11y built-in)
            summary Q serif + SVG chevron (data-URI via ::after) rotating
            180° on [open], answer prose Work Sans animated via
            grid-template-rows 0fr→1fr (GPU-friendly, no height anim).
   Skills:  /frontend-design /arrange /bolder /colorize /typeset /polish /harden
   ============================================================ */

/* --- Token scope-specifici (9 nuovi, zero duplicazione) --------------- */
body.page-id-1354 .al-faq {
  /* Surface & item --------------------------------------------------- */
  --al-faq-bg:              oklch(99% 0.005 250);              /* shell sezione */
  --al-faq-item-bg:         oklch(99.2% 0.008 250);             /* card closed — tinted vs page bg */
  --al-faq-item-bg-open:    oklch(97.5% 0.015 250);            /* tint primary aperto */
  --al-faq-border:          oklch(92% 0.01 250);
  --al-faq-border-open:     var(--allianz-blue-700, oklch(38% 0.14 255));

  /* Typography colors (contrast AAA verified: Q ~14:1, A ~8.5:1) ------ */
  --al-faq-q-color:         var(--ink-900, oklch(22% 0.02 255));
  --al-faq-a-color:         var(--ink-700, oklch(35% 0.02 260));
  --al-faq-chevron-color:   var(--allianz-blue-700, oklch(38% 0.14 255));

  /* Geometry --------------------------------------------------------- */
  --al-faq-radius:          10px;
  --al-faq-gap:             12px;                               /* inter-item */
  --al-faq-pad-x:           clamp(1.25rem, 3vw, 2rem);          /* 20→32px */
  --al-faq-pad-y:           clamp(1.125rem, 2.2vw, 1.5rem);     /* 18→24px */
  --al-faq-chevron-size:    20px;
  --al-faq-chevron-gap:     1rem;                               /* 16px Q→chevron */

  /* Type scale ------------------------------------------------------- */
  --al-faq-q-size:          clamp(1rem, 0.92rem + 0.4vw, 1.18rem);    /* 16→18.88px */
  --al-faq-a-size:          1rem;                                       /* 16px */
  --al-faq-a-lh:            1.7;

  /* Motion (ease-out-quart) ----------------------------------------- */
  --al-faq-transition:      240ms cubic-bezier(.2, .7, .2, 1);

  /* Section rhythm --------------------------------------------------- */
  --al-faq-wrap-max:        53.75rem;                           /* 860px */
  --al-faq-pad-block:       clamp(5rem, 8vw, 8rem);              /* 80→128px — FIX 3 generoso */
  --al-faq-pad-inline:      clamp(1.25rem, 4vw, 2rem);
  --al-faq-gap-title:       clamp(2.25rem, 4vw, 3rem);           /* 36→48px — FIX 3 +16-24px H2→item */
}

/* --- Section shell ---------------------------------------------------- */
body.page-id-1354 .allianz-faq {
  padding-block: var(--al-faq-pad-block);
  padding-inline: var(--al-faq-pad-inline);
  background: var(--al-faq-bg);
  position: relative;
  isolation: isolate;
}

body.page-id-1354 .al-faq {
  max-width: var(--al-faq-wrap-max);
  margin-inline: auto;
  text-align: left;
  /* Squint test: H2 drammatico + 5 item ordinati verticali = 6 focal chiari */
}

/* --- Eyebrow (uppercase tracked, pattern coerente sez 04-09) --------- */
body.page-id-1354 .al-faq__eyebrow {
  font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
  font-size: 0.75rem;                                           /* 12px */
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--allianz-blue-700, oklch(38% 0.14 255));
  margin: 0 0 0.75rem 0;                                        /* 12px → H2 (tight grouping) */
  /* /typeset — eyebrow tracked +0.14em, weight 600, 12px = micro-hierarchy istituzionale */
  /* /polish — pattern consistency con eyebrow sez 04-09 */
}

/* --- H2 title (serif display, scale jump ~3.5x vs body) --------------- */
body.page-id-1354 .al-faq__title {
  font-family: var(--font-display, 'Source Serif 4', Georgia, serif);
  font-size: clamp(1.875rem, 3.2vw + 0.5rem, 3.5rem);           /* 30→56px */
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--ink-900, oklch(22% 0.02 255));
  margin: 0 0 var(--al-faq-gap-title) 0;
  text-wrap: balance;
  /* /bolder — scale jump 3.5x vs body 16px, weight 600 vs 400 */
  /* /typeset — serif display + tight tracking = authority editoriale */
}

/* --- Item card (details) --------------------------------------------- */
body.page-id-1354 .al-faq__item {
  background: var(--al-faq-item-bg);
  border: 1px solid var(--al-faq-border);
  border-radius: var(--al-faq-radius);
  margin: 0 0 var(--al-faq-gap) 0;
  overflow: hidden;                                             /* contain chevron + answer anim */
  box-shadow: 0 1px 2px oklch(22% 0.13 258 / 0.05);             /* subtle elevation closed state */
  transition:
    background var(--al-faq-transition),
    border-color var(--al-faq-transition),
    box-shadow var(--al-faq-transition);
  /* /arrange — 12px inter-item (tight grouping) vs 48-96px section padding (generous separation) */
  /* /polish — closed state differentiation: tinted bg + subtle shadow vs page surface */
}

body.page-id-1354 .al-faq__item:last-of-type {
  margin-bottom: 0;
}

body.page-id-1354 .al-faq__item[open] {
  background: var(--al-faq-item-bg-open);
  border-color: var(--al-faq-border-open);
  box-shadow: 0 4px 14px -6px oklch(38% 0.14 255 / 0.18);       /* soft elevation on open */
  /* /colorize — 10% accent primary-700 border-left+chevron su 60% neutral shell */
}

/* --- Summary Q (touch target 48px+, serif, chevron via ::after) ------ */
body.page-id-1354 .al-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--al-faq-chevron-gap);
  padding: var(--al-faq-pad-y) var(--al-faq-pad-x);
  min-height: 3rem;                                             /* 48px mobile touch target */
  font-family: var(--font-display, 'Source Serif 4', Georgia, serif);
  font-size: var(--al-faq-q-size);
  font-weight: 500;
  line-height: 1.3;
  color: var(--al-faq-q-color);
  cursor: pointer;
  list-style: none;                                             /* sopprime marker default */
  user-select: none;
  transition: color var(--al-faq-transition);
  /* /typeset — serif Q pairing distintivo vs body Work Sans, weight 500 contrast */
}

/* Suppress native triangle marker (Webkit + Firefox) */
body.page-id-1354 .al-faq__q::-webkit-details-marker {
  display: none;
}

/* Chevron SVG via data-URI (no markup change) ------------------------- */
body.page-id-1354 .al-faq__q::after {
  content: "";
  flex-shrink: 0;
  width: var(--al-faq-chevron-size);
  height: var(--al-faq-chevron-size);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23003781' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 8 10 12 14 8'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform var(--al-faq-transition);
  transform-origin: center;
  /* /delight — chevron 180° rotation on [open], ease-out-quart (GPU transform) */
}

body.page-id-1354 .al-faq__item[open] .al-faq__q::after {
  transform: rotate(180deg);
}

/* Hover & focus states (keyboard a11y) ------------------------------- */
body.page-id-1354 .al-faq__q:hover {
  color: var(--allianz-blue-700, oklch(38% 0.14 255));
}

body.page-id-1354 .al-faq__q:focus-visible {
  outline: 2px solid var(--allianz-blue-700, oklch(38% 0.14 255));
  outline-offset: 2px;
  border-radius: calc(var(--al-faq-radius) - 2px);
  /* /harden — focus indicator visible, outline-offset 2px per card-edge clearance */
}

/* --- Answer container (grid-template-rows animation) ----------------- */
body.page-id-1354 .al-faq__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--al-faq-transition);
  /* /delight — 0fr→1fr opens smoothly without animating height (CLS-safe) */
}

body.page-id-1354 .al-faq__item[open] .al-faq__a {
  grid-template-rows: 1fr;
}

body.page-id-1354 .al-faq__a > p {
  min-height: 0;                                                /* allow grid collapse */
  overflow: hidden;
  margin: 0;
  padding: 0 var(--al-faq-pad-x) var(--al-faq-pad-y) var(--al-faq-pad-x);
  font-family: var(--font-body, 'Work Sans', system-ui, sans-serif);
  font-size: var(--al-faq-a-size);
  font-weight: 400;
  line-height: var(--al-faq-a-lh);
  color: var(--al-faq-a-color);
  max-width: 68ch;
  text-wrap: pretty;
  border-left: 3px solid var(--al-faq-border-open);
  border-left-color: transparent;                               /* hidden when closed */
  transition: border-left-color var(--al-faq-transition);
  /* /typeset — body 16/1.7 + 68ch max = readability AAA */
}

body.page-id-1354 .al-faq__item[open] .al-faq__a > p {
  border-left-color: var(--al-faq-border-open);
  /* /colorize — border-left 3px primary-700 appears only on [open] (state signal) */
}

/* --- Reduced motion override (accessibility hard-gate) --------------- */
@media (prefers-reduced-motion: reduce) {
  body.page-id-1354 .al-faq__item,
  body.page-id-1354 .al-faq__q,
  body.page-id-1354 .al-faq__q::after,
  body.page-id-1354 .al-faq__a,
  body.page-id-1354 .al-faq__a > p {
    transition: none !important;
  }
  /* /harden — prefers-reduced-motion kills motion but preserves open/close functionality */
}

/* --- Mobile (<768px) — single column full-width, touch-first -------- */
@media (max-width: 767.98px) {
  body.page-id-1354 .allianz-faq {
    padding-block: clamp(2.5rem, 9vw, 3.5rem);
  }
  body.page-id-1354 .al-faq__title {
    font-size: clamp(1.75rem, 7vw, 2.25rem);                    /* 28→36px */
    letter-spacing: -0.015em;
  }
  body.page-id-1354 .al-faq__q {
    font-size: 1rem;                                            /* 16px readability */
    padding: 1.25rem;                                           /* 20px v+h, ensure 48px+ touch */
    min-height: 3rem;
  }
  body.page-id-1354 .al-faq__a > p {
    padding: 0 1.25rem 1.25rem 1.25rem;
    line-height: 1.65;
    font-size: 0.9375rem;                                       /* 15px */
  }
}

/* --- Print (gerarchia preservata, tutte aperte) ---------------------- */
@media print {
  body.page-id-1354 .allianz-faq {
    background: transparent;
    padding-block: 1rem;
  }
  body.page-id-1354 .al-faq__item {
    border-color: var(--ink-900, oklch(22% 0.02 255));
    break-inside: avoid;
    box-shadow: none;
  }
  body.page-id-1354 .al-faq__a {
    grid-template-rows: 1fr;                                    /* force open in print */
  }
  body.page-id-1354 .al-faq__q::after {
    display: none;                                              /* no chevron in print */
  }
}



/* ========================================================================
   Allianz Bari · Section 11 · CTA Final (closing dark full-bleed)
   Scope: body.page-id-1354 — Class prefix: .al-cta-*
   Source: content/page-1354-content-v3.html:345-355 (byte-exact)
   Design doc: design/section-11-cta-final-design-doc.md
   Tokens: OKLCH only · ZERO hex · ZERO !important (except reduced-motion)
   Skills applied: frontend-design, bolder, colorize, arrange, typeset, polish
   ======================================================================== */

body.page-id-1354 .al-cta-final {
  /* Token definitions scoped to section */
  --al-cta-bg-start:         oklch(22% 0.13 258);
  --al-cta-bg-end:           oklch(15% 0.08 258);
  --al-cta-bg-gradient:      linear-gradient(135deg, var(--al-cta-bg-start) 0%, var(--al-cta-bg-end) 100%);

  --al-cta-text:             oklch(99% 0.005 85);
  --al-cta-text-lead:        oklch(99% 0.005 85 / 0.84);
  --al-cta-text-trust:       oklch(99% 0.005 85 / 0.74);

  --al-cta-primary-bg:       oklch(78% 0.16 65);
  --al-cta-primary-bg-hover: oklch(82% 0.17 65);
  --al-cta-primary-text:     oklch(20% 0.035 60);
  /* S3 polish — elev-2 amber shadow, reinforce hierarchy vs outline secondaries */
  --al-cta-primary-shadow:   0 4px 12px oklch(22% 0.13 258 / 0.30),
                             0 1px 3px oklch(22% 0.13 258 / 0.15),
                             0 10px 28px -12px oklch(12% 0.08 258 / 0.55);

  --al-cta-outline-border:   oklch(99% 0.005 85 / 0.82);
  --al-cta-outline-border-h: oklch(99% 0.005 85 / 1);
  --al-cta-outline-bg-hover: oklch(99% 0.005 85 / 0.09);

  --al-cta-divider:          oklch(99% 0.005 85 / 0.22); /* S2 polish — 0.18→0.22 sharper cluster separation action↔proof */
  --al-cta-focus:            oklch(82% 0.17 65);

  --al-cta-radius-btn:       10px;
  --al-cta-gap-cluster:      clamp(12px, 2vw, 18px);
  --al-cta-dur:              280ms;
  --al-cta-ease:             cubic-bezier(0.22, 1, 0.36, 1); /* ease-out-quint */

  /* Full-bleed background — progressive enhancement */
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-bottom: 0;
  padding: clamp(80px, 12vh, 136px) clamp(24px, 5vw, 64px);
  padding-bottom: clamp(96px, 14vh, 144px);
  background-color: var(--al-cta-bg-end); /* fallback solid */
  background-image: var(--al-cta-bg-gradient);
  color: var(--al-cta-text);
  overflow: hidden;
  isolation: isolate;
}

/* Subtle radial depth — intentional, not glassmorphism */
body.page-id-1354 .al-cta-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 60% at 15% 30%,
    oklch(40% 0.16 255 / 0.35) 0%,
    transparent 60%
  );
  pointer-events: none;
  z-index: 0;
}

body.page-id-1354 .al-cta-final__inner {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin-inline: auto;
  display: grid;
  gap: clamp(20px, 3vw, 28px);
}

/* ==================  Typography  ================== */

body.page-id-1354 .al-cta-final h2 {
  font-family: var(--font-display, "Source Serif 4", "Source Serif Pro", Georgia, serif);
  font-weight: 800;
  font-style: normal;
  font-size: clamp(2.5rem, 5.2vw + 1rem, 5.5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--al-cta-text);
  max-width: 16ch;
  margin: 0;
  text-wrap: balance;
}

body.page-id-1354 .al-cta-final p {
  font-family: var(--font-body, "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif);
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.7vw + 0.9rem, 1.375rem);
  line-height: 1.58;
  letter-spacing: -0.005em;
  color: var(--al-cta-text-lead);
  max-width: 54ch;
  margin: 0;
  text-wrap: pretty;
}

/* ==================  Contacts cluster (3 CTA)  ================== */

body.page-id-1354 .al-cta-final__contacts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--al-cta-gap-cluster);
  margin-top: clamp(8px, 1.5vw, 16px);
  align-items: stretch;
}

body.page-id-1354 .al-cta-final__contacts a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 14px clamp(20px, 2.5vw, 30px);
  border-radius: var(--al-cta-radius-btn);
  font-family: var(--font-body, "Work Sans", sans-serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.003em;
  text-decoration: none;
  transition:
    transform var(--al-cta-dur) var(--al-cta-ease),
    background-color var(--al-cta-dur) var(--al-cta-ease),
    border-color var(--al-cta-dur) var(--al-cta-ease),
    box-shadow var(--al-cta-dur) var(--al-cta-ease),
    color var(--al-cta-dur) var(--al-cta-ease);
  will-change: transform;
}

body.page-id-1354 .al-cta-final__contacts a strong {
  font-weight: 700;
  letter-spacing: 0.005em;
}

/* Primary — tel (warm amber on dark blue) */
body.page-id-1354 .al-cta-final__contacts a:nth-of-type(1) {
  background-color: var(--al-cta-primary-bg);
  color: var(--al-cta-primary-text);
  box-shadow: var(--al-cta-primary-shadow);
  border: 1.5px solid transparent;
}

body.page-id-1354 .al-cta-final__contacts a:nth-of-type(1):hover,
body.page-id-1354 .al-cta-final__contacts a:nth-of-type(1):focus-visible {
  background-color: var(--al-cta-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px -10px oklch(12% 0.08 258 / 0.7),
    0 3px 6px -1px oklch(12% 0.08 258 / 0.45);
}

body.page-id-1354 .al-cta-final__contacts a:nth-of-type(1):active {
  transform: translateY(0);
  transition-duration: 120ms;
}

/* Secondary + Tertiary — outline white on dark */
body.page-id-1354 .al-cta-final__contacts a:nth-of-type(2),
body.page-id-1354 .al-cta-final__contacts a:nth-of-type(3) {
  background-color: transparent;
  color: var(--al-cta-text);
  border: 1.5px solid var(--al-cta-outline-border);
}

body.page-id-1354 .al-cta-final__contacts a:nth-of-type(2):hover,
body.page-id-1354 .al-cta-final__contacts a:nth-of-type(2):focus-visible,
body.page-id-1354 .al-cta-final__contacts a:nth-of-type(3):hover,
body.page-id-1354 .al-cta-final__contacts a:nth-of-type(3):focus-visible {
  background-color: var(--al-cta-outline-bg-hover);
  border-color: var(--al-cta-outline-border-h);
  transform: translateY(-2px);
}

/* Focus visible (keyboard) — amber ring on all CTA */
body.page-id-1354 .al-cta-final__contacts a:focus-visible {
  outline: 3px solid var(--al-cta-focus);
  outline-offset: 3px;
}

/* ==================  Trust mini-strip (additive)  ================== */

body.page-id-1354 .al-cta-final__trust {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(16px, 3vw, 36px);
  align-items: center;
  margin-top: clamp(24px, 4vw, 40px);
  padding-top: clamp(20px, 3vw, 28px);
  border-top: 1px solid var(--al-cta-divider);
  font-family: var(--font-body, "Work Sans", sans-serif);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--al-cta-text-trust);
}

body.page-id-1354 .al-cta-final__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

body.page-id-1354 .al-cta-final__trust-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--al-cta-primary-bg); /* amber stars / shield accent */
}

body.page-id-1354 .al-cta-final__trust-rating {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--al-cta-text);
}

/* ==================  Mobile (<768px)  ================== */

@media (max-width: 767px) {
  body.page-id-1354 .al-cta-final {
    padding: clamp(64px, 10vh, 88px) 20px clamp(72px, 12vh, 96px);
    background-image: linear-gradient(
      180deg,
      var(--al-cta-bg-start) 0%,
      var(--al-cta-bg-end) 100%
    );
  }

  body.page-id-1354 .al-cta-final h2 {
    font-size: clamp(2.125rem, 7vw + 0.5rem, 3rem);
    max-width: 18ch;
    letter-spacing: -0.022em;
  }

  body.page-id-1354 .al-cta-final p {
    font-size: 1.0625rem;
    line-height: 1.6;
  }

  body.page-id-1354 .al-cta-final__contacts {
    flex-direction: column;
    align-items: stretch;
    gap: 14px; /* S4 polish — 12→14px touch-target separation, mitigate mis-tap on 56px stack */
  }

  body.page-id-1354 .al-cta-final__contacts a {
    width: 100%;
    min-height: 58px;
    font-size: 1rem;
    justify-content: flex-start;
    padding-inline: 22px;
  }

  body.page-id-1354 .al-cta-final__trust {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.8125rem; /* S1 polish — 12→13px mobile readability minimum */
  }
}

/* ==================  Tablet refinement (768-1023px)  ================== */

@media (min-width: 768px) and (max-width: 1023px) {
  body.page-id-1354 .al-cta-final__contacts a {
    min-height: 58px;
  }
}

/* ==================  Reduced motion  ================== */

@media (prefers-reduced-motion: reduce) {
  body.page-id-1354 .al-cta-final__contacts a,
  body.page-id-1354 .al-cta-final__contacts a:hover,
  body.page-id-1354 .al-cta-final__contacts a:focus-visible,
  body.page-id-1354 .al-cta-final__contacts a:active {
    transform: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==================  Fallback: oklch not supported (pre-2023)  ================== */

@supports not (color: oklch(50% 0 0)) {
  body.page-id-1354 .al-cta-final {
    background-color: #0d1e3e;
    background-image: linear-gradient(135deg, #0f2656 0%, #0a1830 100%);
    color: #fafaf7;
  }
  body.page-id-1354 .al-cta-final__contacts a:nth-of-type(1) {
    background-color: #e8a04a;
    color: #2a1f11;
  }
  body.page-id-1354 .al-cta-final__contacts a:nth-of-type(2),
  body.page-id-1354 .al-cta-final__contacts a:nth-of-type(3) {
    border-color: rgba(250, 250, 247, 0.82);
  }
}

/* ==================  Seamless footer transition  ================== */

body.page-id-1354 .al-cta-final + * {
  margin-top: 0;
}

/* === FIX CONFLITTI KADENCE === */

/* Remove entry-content top margin */
body.page-id-1354 .entry-content {
  margin-top: 0;
  padding-top: 0;
}

/* Hide spurious empty p tags from wpautop residuo (belt+suspenders) */
body.page-id-1354 .allianz-page > p:empty,
body.page-id-1354 .allianz-page p:empty {
  display: none;
  margin: 0;
  padding: 0;
  line-height: 0;
  font-size: 0;
}

/* Hero + CTA Final full-bleed escape from .content-container max-width 1290px */
body.page-id-1354 .al-hero,
body.page-id-1354 .al-cta-final {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Remove gap between CTA Final and footer */
body.page-id-1354 .entry-content-wrap {
  margin-bottom: 0;
  padding-bottom: 0;
}

body.page-id-1354 .content-container {
  padding-bottom: 0;
}

body.page-id-1354 .content-area {
  padding-bottom: 0;
  margin-bottom: 0;
}