/*
Theme Name: Boost4biz
Theme URI: https://boost4biz.it
Author: Sergio De Carolis
Description: Tema custom Boost4biz — sistemi operativi per decidere sui numeri. Minimale-tech, numerico, conversion-first. Nessun page builder, nessun framework.
Version: 3.1.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: boost4biz
*/

/* Tutti i colori, i pattern, i font e il ritmo verticale sono in
   assets/css/variables.css, caricato prima di questo foglio. */

/* ============================================================
   1. RESET
   ============================================================ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  color: var(--graphite);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul, ol { list-style: none; }
button, input, select { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

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

/* ============================================================
   2. LAYOUT E RITMO VERTICALE
   Il passo tra sezioni non e costante: alterna 1.5x e 2x.
   ============================================================ */

.b4-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

@media (min-width: 768px) { .b4-wrap { padding-inline: var(--sp-8); } }

.b4-main { display: block; }

.b4-section {
  position: relative;
  padding-block: var(--rhythm-1_5);
  border-top: 1px solid var(--line);
}

/* Passo doppio sulle sezioni pari: rompe la regolarita della griglia */
.b4-section:nth-of-type(even) { padding-block: var(--rhythm-2); }

.b4-section--alt { background: var(--surface); }
.b4-section--tall { padding-block: var(--rhythm-2) var(--rhythm-1_5); border-top: 0; }

/* Separatore verticale in accento sul bordo interno delle sezioni alternate */
.b4-section--alt::before {
  content: '';
  position: absolute;
  inset-block: 0;
  inset-inline-start: max(var(--sp-4), calc((100vw - var(--wrap)) / 2 + var(--sp-8)));
  width: 1px;
  background: var(--accent-line);
  opacity: 0.55;
}

@media (max-width: 767px) { .b4-section--alt::before { display: none; } }

.b4-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) { .b4-grid--3 { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   3. TIPOGRAFIA
   Peso 600–700, tracking ridotto, line-height 1.3.
   ============================================================ */

.b4-h1 {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  margin-block-end: var(--sp-4);
  text-wrap: balance;
}

.b4-h2 {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-title);
  letter-spacing: var(--tr-title);
  margin-block-end: var(--sp-6);
  text-wrap: balance;
}

.b4-lead {
  font-size: var(--fs-lg);
  line-height: 1.4;
  color: var(--graphite-2);
  max-width: 58ch;
  margin-block-end: var(--sp-6);
}

.b4-note { font-size: var(--fs-sm); color: var(--gray); margin-block-start: var(--sp-4); }

/* Numeri e dati: font dedicato, cifre a larghezza fissa */
.b4-mono,
.b4-table__td,
.b4-proof__n,
.b4-card__n,
.b4-caso__delta,
.b4-side__delta,
.b4-fasi__n,
.b4-scala__id,
.b4-eyebrow__n {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

.b4-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-block-end: var(--sp-4);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--gray);
}
.b4-eyebrow__n { font-weight: var(--fw-bold); color: var(--accent); }
.b4-eyebrow::after {
  content: '';
  flex: 0 0 auto;
  width: clamp(1.5rem, 6vw, 4rem);
  height: 1px;
  background: var(--accent-line);
}

.b4-prose p { max-width: 66ch; margin-block-end: var(--sp-4); }
.b4-prose h2 { font-size: var(--fs-xl); font-weight: var(--fw-medium); margin-block: var(--sp-8) var(--sp-3); }
.b4-prose ul { list-style: disc; padding-inline-start: 1.25rem; margin-block-end: var(--sp-4); max-width: 66ch; }

.b4-list { display: grid; gap: var(--sp-2); max-width: 58ch; }
.b4-list__item { padding-inline-start: var(--sp-6); position: relative; color: var(--graphite-2); }
.b4-list__item::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.68em;
  width: 12px;
  height: 1px;
  background: var(--accent);
}

/* ============================================================
   4. LOGO
   ============================================================ */

.b4-logo {
  height: var(--b4-logo-h, 48px);
  width: auto;
  display: block;
}
.b4-logo--header { height: 40px; }
@media (min-width: 768px) { .b4-logo--header { height: 48px; } }

/* ============================================================
   5. SIMBOLI DI SEZIONE
   ============================================================ */

.b4-sigil {
  width: 28px;
  height: 28px;
  color: var(--accent);
  opacity: 0.9;
}
.b4-sigil--head {
  position: absolute;
  inset-block-start: var(--sp-8);
  inset-inline-end: max(var(--sp-4), calc((100vw - var(--wrap)) / 2 + var(--sp-8)));
  width: 32px;
  height: 32px;
  opacity: 0.5;
}
@media (max-width: 767px) { .b4-sigil--head { display: none; } }

/* ============================================================
   6. BOTTONI E LINK
   ============================================================ */

.b4-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-6);
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.005em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition:
    background-color var(--t-base) var(--ease),
    border-color var(--t-base) var(--ease),
    color var(--t-fast) var(--ease);
}

.b4-btn--primary {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
}
.b4-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.b4-btn--ghost {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent-line);
}
.b4-btn--ghost:hover { border-color: var(--accent); background: var(--accent-soft); }

.b4-btn--wide { width: 100%; }

.b4-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  padding-block-end: 2px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.b4-link:hover { color: var(--accent-hover); border-color: var(--accent); }
.b4-link--invert { color: var(--accent-bright); border-color: rgba(255, 255, 255, 0.3); }
.b4-link--invert:hover { color: var(--paper); border-color: var(--paper); }

.b4-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-block-start: var(--sp-6);
}

.b4-icon { width: 24px; height: 24px; color: var(--accent); }
.b4-icon--lg { width: 40px; height: 40px; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

.b4-skip {
  position: absolute;
  inset-inline-start: -9999px;
  inset-block-start: 0;
  z-index: 100;
  padding: var(--sp-3) var(--sp-4);
  background: var(--graphite);
  color: var(--paper);
  text-decoration: none;
}
.b4-skip:focus { inset-inline-start: 0; }

/* ============================================================
   7. SCROLL REVEAL
   Solo sui titoli principali. Il contenuto e visibile di default:
   la classe di partenza viene applicata dal JS, quindi senza
   JavaScript non sparisce nulla e il layout non si muove mai.
   ============================================================ */

.js .b4-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--t-slow) linear,
    transform var(--t-slow) var(--ease);
  will-change: opacity, transform;
}
.js .b4-reveal.is-in { opacity: 1; transform: none; }

/* Senza JavaScript la classe .js non esiste e nulla viene nascosto. */
@media (prefers-reduced-motion: reduce) {
  .js .b4-reveal { opacity: 1; transform: none; }
}

/* ============================================================
   8. HEADER
   ============================================================ */

.b4-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--paper);
  border-block-end: 1px solid var(--line);
}

.b4-header__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: var(--header-h);
}

.b4-header__brand { display: inline-flex; align-items: center; text-decoration: none; }

.b4-header__nav { display: none; margin-inline-start: auto; }
.b4-header__list { display: flex; gap: var(--sp-6); }
.b4-header__link {
  position: relative;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--graphite-2);
  text-decoration: none;
  padding-block: var(--sp-2);
  transition: color var(--t-fast) var(--ease);
}
.b4-header__link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--t-base) var(--ease);
}
.b4-header__link:hover { color: var(--accent); }
.b4-header__link:hover::after { transform: scaleX(1); }

.b4-header .b4-btn { margin-inline-start: auto; min-height: 40px; padding-inline: var(--sp-4); }

@media (min-width: 768px) {
  .b4-header__nav { display: block; }
  .b4-header .b4-btn { margin-inline-start: var(--sp-8); }
}

@media (max-width: 480px) {
  .b4-header .b4-btn { font-size: var(--fs-xs); padding-inline: var(--sp-3); }
}

/* ============================================================
   9. HERO
   Composizione asimmetrica: testo allineato a sinistra e spostato
   di --offset, prova numerica ancorata al margine opposto.
   Texture a griglia sottile sul fondo.
   ============================================================ */

.b4-hero {
  position: relative;
  padding-block: var(--rhythm-1_5) var(--rhythm);
  overflow: hidden;
}
@media (min-width: 768px) { .b4-hero { padding-block: var(--rhythm-2) var(--rhythm-1_5); } }

.b4-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--grid-pattern);
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  pointer-events: none;
}

.b4-hero__inner { position: relative; }

.b4-hero__cat {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--gray);
  margin-block-end: var(--sp-6);
}
.b4-hero__cat::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--accent);
}

.b4-hero__title {
  font-size: var(--fs-4xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-hero);
  text-wrap: balance;
  max-width: 17ch;
}

.b4-hero__sub {
  font-size: var(--fs-lg);
  line-height: 1.4;
  color: var(--graphite-2);
  max-width: 52ch;
  margin-block-start: var(--sp-6);
  text-wrap: pretty;
}

.b4-hero__actions { margin-block-start: var(--sp-8); }

/* Asimmetria: da tablet in su il blocco testuale rientra di --offset
   e la prova numerica resta ancorata a sinistra, fuori asse. */
@media (min-width: 900px) {
  .b4-hero__cat,
  .b4-hero__title,
  .b4-hero__sub,
  .b4-hero__actions { margin-inline-start: var(--offset); }

  .b4-hero__title { max-width: 15ch; }
}

.b4-proof {
  display: grid;
  gap: var(--sp-6);
  margin-block-start: var(--rhythm);
  padding-block-start: var(--sp-8);
  border-block-start: 1px solid var(--line);
}
@media (min-width: 700px) { .b4-proof { grid-template-columns: repeat(3, 1fr); } }

/* Separatori verticali in accento tra i tre elementi di prova */
@media (min-width: 700px) {
  .b4-proof__item + .b4-proof__item {
    padding-inline-start: var(--sp-6);
    border-inline-start: var(--divider);
  }
}

.b4-proof__item { display: grid; gap: var(--sp-1); align-content: start; }

/* Micro-asimmetria: il secondo dato scende leggermente */
@media (min-width: 700px) {
  .b4-proof__item:nth-child(2) { padding-block-start: var(--sp-4); }
}

.b4-proof__n {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
}
.b4-proof__label {
  font-size: var(--fs-sm);
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ============================================================
   10. CARD JOB
   ============================================================ */

.b4-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 1px solid var(--accent-line);
  transition: border-color var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.b4-card:hover { border-color: var(--accent-line); background: var(--accent-soft); }

/* Micro-asimmetria: la card centrale scende di mezzo passo */
@media (min-width: 900px) {
  .b4-grid--3 > .b4-card:nth-child(2) { margin-block-start: var(--sp-6); }
}

.b4-card__n {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-label);
  color: var(--gray);
}
.b4-card__icon { color: var(--accent); }
.b4-card__title { font-size: var(--fs-xl); font-weight: var(--fw-medium); letter-spacing: var(--tr-title); }

.b4-card__dl { display: grid; gap: var(--sp-1); margin-block-start: var(--sp-2); }
.b4-card__dl dt {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray);
  margin-block-start: var(--sp-3);
}
.b4-card__dl dd { font-size: var(--fs-sm); color: var(--graphite-2); }

.b4-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-block-start: auto;
  padding-block-start: var(--sp-6);
}

/* ============================================================
   11. METODO: triade, leve, fasi
   ============================================================ */

.b4-triade {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-block-start: var(--sp-8);
}
@media (min-width: 700px) { .b4-triade { grid-template-columns: repeat(3, 1fr); } }

.b4-triade__item { display: grid; gap: var(--sp-2); padding: var(--sp-6); background: var(--paper); }
.b4-triade__label {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--accent);
}
.b4-triade__valore { font-size: var(--fs-lg); font-weight: var(--fw-medium); letter-spacing: var(--tr-title); }

.b4-leve {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-block-start: var(--sp-8);
}
@media (min-width: 640px) { .b4-leve { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .b4-leve { grid-template-columns: repeat(3, 1fr); } }

.b4-leve__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-1) var(--sp-4);
  padding: var(--sp-6);
  background: var(--paper);
  transition: background-color var(--t-base) var(--ease);
}
.b4-leve__item:hover { background: var(--accent-soft); }
.b4-leve__icon { grid-row: span 3; align-self: start; }
.b4-leve__n { font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--gray); }
.b4-leve__nome { font-size: var(--fs-lg); font-weight: var(--fw-medium); letter-spacing: var(--tr-title); }
.b4-leve__oggetto { font-size: var(--fs-sm); color: var(--gray); }

.b4-fasi {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin-block-start: var(--sp-8);
}
.b4-fasi__item { display: grid; gap: var(--sp-1); padding: var(--sp-6); background: var(--paper); }
@media (min-width: 860px) {
  .b4-fasi__item {
    grid-template-columns: 3rem 12rem 1fr 18rem;
    align-items: baseline;
    gap: var(--sp-6);
  }
  /* Rientro progressivo: il protocollo si legge come una scala */
  .b4-fasi__item:nth-child(2) { padding-inline-start: calc(var(--sp-6) + 0.5rem); }
  .b4-fasi__item:nth-child(3) { padding-inline-start: calc(var(--sp-6) + 1rem); }
  .b4-fasi__item:nth-child(4) { padding-inline-start: calc(var(--sp-6) + 1.5rem); }
  .b4-fasi__item:nth-child(5) { padding-inline-start: calc(var(--sp-6) + 2rem); }
}
.b4-fasi__n {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--accent);
}
.b4-fasi__nome { font-size: var(--fs-lg); font-weight: var(--fw-medium); }
.b4-fasi__oggetto { color: var(--graphite-2); font-size: var(--fs-sm); }
.b4-fasi__output { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--accent); }

/* ============================================================
   12. SCALA OFFERTA L0 → L3
   ============================================================ */

.b4-scala { display: grid; gap: var(--sp-4); margin-block-start: var(--sp-8); }
@media (min-width: 1000px) {
  .b4-scala { grid-template-columns: repeat(4, 1fr); gap: 0; align-items: stretch; }
}

.b4-scala__step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--paper);
  border: 1px solid var(--line);
  transition: border-color var(--t-base) var(--ease);
}
.b4-scala__step:hover { border-color: var(--accent-line); }

@media (min-width: 1000px) {
  .b4-scala__step { border-inline-start-width: 0; }
  .b4-scala__step:first-child { border-inline-start-width: 1px; }
  .b4-scala__step + .b4-scala__step { border-inline-start: var(--divider); }
  .b4-scala__step { margin-block-start: calc(var(--b4-step) * 1.5rem); }
}

.b4-scala__step--l0 { border-block-start: 3px solid var(--accent); background: var(--accent-soft); }

.b4-scala__id { font-size: var(--fs-sm); font-weight: var(--fw-bold); letter-spacing: 0.1em; color: var(--accent); }
.b4-scala__nome {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-title);
  margin-block: var(--sp-2) var(--sp-4);
}
.b4-scala__dl { display: grid; gap: var(--sp-1); }
.b4-scala__dl dt {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray);
  margin-block-start: var(--sp-3);
}
.b4-scala__dl dd { font-size: var(--fs-sm); color: var(--graphite-2); }
.b4-scala__cta { margin-block-start: auto; padding-block-start: var(--sp-6); }
.b4-scala__lock {
  margin-block-start: auto;
  padding-block-start: var(--sp-6);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-2);
}

/* ============================================================
   13. CASI
   ============================================================ */

.b4-caso {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6);
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 1px solid var(--accent-line);
  transition: border-color var(--t-base) var(--ease);
}
.b4-caso:hover { border-color: var(--accent-line); }

.b4-caso__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block-end: var(--sp-4);
  border-block-end: 1px solid var(--line);
}
.b4-caso__title { font-size: var(--fs-xl); font-weight: var(--fw-medium); letter-spacing: var(--tr-title); }
.b4-caso__delta {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--accent);
  letter-spacing: -0.01em;
}
.b4-caso__dl { display: grid; gap: var(--sp-1); margin-block-start: var(--sp-4); }
.b4-caso__dl dt {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray);
  margin-block-start: var(--sp-3);
}
.b4-caso__dl dd { font-size: var(--fs-sm); color: var(--graphite-2); }
.b4-caso__risultato { font-weight: var(--fw-medium); color: var(--graphite); }
.b4-caso__livello { margin-block-start: auto; padding-block-start: var(--sp-6); font-size: var(--fs-xs); color: var(--gray); }

.b4-caso__full { display: grid; gap: var(--sp-8); }
@media (min-width: 900px) { .b4-caso__full { grid-template-columns: minmax(0, 1fr) 20rem; } }

/* ============================================================
   14. SIDEPLACE
   ============================================================ */

.b4-side {
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  padding: var(--sp-6);
  background: var(--surface);
  border: 1px solid var(--line);
  border-inline-start: 2px solid var(--accent-line);
}
.b4-section--alt .b4-side { background: var(--paper); }

/* Micro-asimmetria: il sideplace scende rispetto al testo affiancato */
@media (min-width: 900px) { .b4-side { margin-block-start: var(--sp-8); } }

.b4-side__icon { color: var(--accent); }
.b4-side__delta {
  font-family: var(--font-num);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.02em;
}
.b4-side__dl { display: grid; gap: var(--sp-1); }
.b4-side__dl dt {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray);
  margin-block-start: var(--sp-2);
}
.b4-side__dl dd { font-size: var(--fs-sm); font-weight: var(--fw-medium); }

/* ============================================================
   15. TABELLE
   ============================================================ */

.b4-table__wrap { overflow-x: auto; margin-block-start: var(--sp-6); border: 1px solid var(--line); }
.b4-table { font-size: var(--fs-sm); background: var(--paper); min-width: 34rem; }
.b4-table--wide { min-width: 52rem; }

.b4-table__caption {
  caption-side: top;
  text-align: start;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray);
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}

.b4-table__th {
  text-align: start;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--graphite);
  border-block-end: 2px solid var(--accent);
  white-space: nowrap;
}

.b4-table__rowhead {
  text-align: start;
  padding: var(--sp-3) var(--sp-4);
  font-weight: var(--fw-medium);
  color: var(--graphite);
  border-block-start: 1px solid var(--line);
  vertical-align: top;
}

.b4-table__td {
  padding: var(--sp-3) var(--sp-4);
  color: var(--graphite-2);
  border-block-start: 1px solid var(--line);
  vertical-align: top;
}

.b4-table__tr { transition: background-color var(--t-fast) var(--ease); }
.b4-table__tr:nth-child(even) .b4-table__td,
.b4-table__tr:nth-child(even) .b4-table__rowhead { background: var(--surface); }
.b4-table__tr:hover .b4-table__td,
.b4-table__tr:hover .b4-table__rowhead { background: var(--accent-soft); }

/* ============================================================
   16. DEFINIZIONE
   ============================================================ */

.b4-def {
  max-width: 76ch;
  padding: var(--sp-4) var(--sp-6);
  border-inline-start: 3px solid var(--accent);
  background: var(--paper);
  font-size: var(--fs-base);
  color: var(--graphite-2);
  margin-block-start: var(--sp-4);
}
.b4-def__tag {
  display: inline-block;
  margin-inline-end: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--accent);
}

/* ============================================================
   17. JOB PAGE
   ============================================================ */

.b4-job__head { display: grid; gap: var(--sp-8); }
@media (min-width: 900px) { .b4-job__head { grid-template-columns: minmax(0, 1fr) 20rem; } }

.b4-job__output { margin-block-start: var(--sp-4); font-size: var(--fs-lg); font-weight: var(--fw-medium); }
.b4-job__outputlabel {
  display: inline-block;
  margin-inline-end: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--accent);
}

/* ============================================================
   18. FORM
   ============================================================ */

.b4-form__wrap { max-width: 46rem; }
.b4-form { display: grid; gap: var(--sp-4); margin-block-start: var(--sp-8); }
@media (min-width: 700px) { .b4-form { grid-template-columns: repeat(2, 1fr); } }

.b4-field { display: grid; gap: var(--sp-2); }
.b4-field--full { grid-column: 1 / -1; }
.b4-field__label { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.b4-field__label--inline { font-weight: var(--fw-body); color: var(--graphite-2); }
.b4-field__opt { font-weight: var(--fw-body); color: var(--gray); }

.b4-field__input {
  min-height: 48px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  font-size: var(--fs-base);
  transition: border-color var(--t-fast) var(--ease);
}
.b4-field__input:hover { border-color: var(--accent-line); }
.b4-field__input:focus { border-color: var(--accent); }

.b4-field--check { grid-template-columns: auto 1fr; align-items: start; gap: var(--sp-3); }
.b4-field__check { width: 20px; height: 20px; margin-block-start: 2px; accent-color: var(--accent); }

.b4-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.b4-form__msg { grid-column: 1 / -1; min-height: 1.5rem; font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.b4-form__msg--ok  { color: var(--accent); }
.b4-form__msg--err { color: var(--danger); }

.b4-form__alt { margin-block-start: var(--sp-6); font-size: var(--fs-sm); color: var(--gray); }

/* ============================================================
   19. FAQ
   ============================================================ */

.b4-faq { border-block-start: 1px solid var(--line); max-width: 78ch; }
.b4-faq__item { border-block-end: 1px solid var(--line); }
.b4-faq__q {
  display: block;
  padding: var(--sp-4) 0;
  padding-inline-end: var(--sp-8);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
  position: relative;
  transition: color var(--t-fast) var(--ease);
}
.b4-faq__q:hover { color: var(--accent); }
.b4-faq__q::-webkit-details-marker { display: none; }
.b4-faq__q::after {
  content: '+';
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: var(--sp-4);
  color: var(--accent);
  font-weight: var(--fw-bold);
}
.b4-faq__item[open] .b4-faq__q::after { content: '−'; }
.b4-faq__a { padding-block-end: var(--sp-6); color: var(--graphite-2); max-width: 70ch; }

/* ============================================================
   20. FOOTER
   Blu istituzionale ereditato dal sito precedente, texture a
   linee verticali, marchio storico allineato a destra.
   ============================================================ */

.b4-footer {
  /* Nel footer l'accento e l'arancio del marchio, non il ciano:
     una sola dichiarazione, tutti i link e le icone la ereditano. */
  --accent: var(--orange-text);
  --accent-hover: var(--orange-hover);

  position: relative;
  background: var(--navy-veil);
  color: var(--navy-ink);
  padding-block: var(--rhythm-1_5);
  overflow: hidden;
  border-block-start: 1px solid var(--navy-dark);
}

.b4-footer::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--rule-pattern);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  pointer-events: none;
}

/* Griglia uniforme a tre colonne, spaziatura costante */
.b4-footer__inner { position: relative; display: grid; gap: var(--sp-8); }
@media (min-width: 760px)  { .b4-footer__inner { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .b4-footer__inner { grid-template-columns: repeat(3, 1fr); } }

.b4-footer__col { display: grid; gap: var(--sp-3); align-content: start; }

.b4-footer__brand {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tr-title);
}

/* La tagline e elemento identitario: bianco pieno, peso medio */
.b4-footer__claim {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1.35;
  color: var(--navy-ink);
  max-width: 26ch;
}

.b4-footer__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--accent);
}

.b4-footer__list { display: grid; gap: var(--sp-3); }

.b4-footer__row {
  display: grid;
  grid-template-columns: 20px 1fr;
  align-items: start;
  gap: var(--sp-3);
}
.b4-footer__ico { color: var(--accent); }
.b4-sigil--sm { width: 20px; height: 20px; opacity: 1; }

.b4-footer__link {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--navy-ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  padding-block-end: 1px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.b4-footer__link:hover { color: var(--accent); border-color: var(--accent); }

/* Riga di conversione: chiude il footer senza spezzare la griglia */
.b4-footer__cta {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-6);
  margin-block-start: var(--sp-2);
  border-block: 1px solid var(--navy-line);
}
.b4-footer__ctatext {
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-title);
}

/* Pulsante arancio: campitura piena e testo blu scuro (5.03:1).
   Il bianco sull'arancio si fermerebbe a 3.01:1 e non sarebbe leggibile. */
.b4-btn--orange {
  background: var(--orange);
  color: var(--orange-ink);
  border-color: var(--orange);
}
.b4-btn--orange:hover {
  background: var(--orange-hover);
  border-color: var(--orange-hover);
  color: var(--orange-ink);
}

/* Riga legale: corpo ridotto, tono attenuato, separata dall'operativo */
.b4-footer__legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-6);
  font-size: var(--fs-xs);
  color: var(--navy-muted);
}
.b4-footer__legal a { text-decoration: underline; transition: color var(--t-fast) var(--ease); }
.b4-footer__legal a:hover { color: var(--accent); }

/* ============================================================
   21. PRINT
   ============================================================ */

@media print {
  .b4-header, .b4-btn, .b4-skip { display: none !important; }
  .b4-hero::before, .b4-footer::before { display: none !important; }
  .b4-section { padding-block: 1rem; border: 0; }
  .b4-footer { background: #fff; color: #000; border: 0; }
  body { color: #000; }
  .b4-reveal { opacity: 1 !important; transform: none !important; }
}