/* ==========================================================================
   Components — measured 1:1 against programmahubble.it
   ========================================================================== */

/* --------------------------------------------------------------------------
   Eyebrow pill  ("Il Programma", "La Selezione", "I promotori", "Il Portfolio")
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  padding: 12px 24px;
  font-family: var(--font-body);
  font-size: var(--type-body-xs-size);
  line-height: var(--type-body-xs-lh);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-family: var(--font-body);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out),
              transform 0.25s var(--ease-out),
              color 0.25s var(--ease-out);
}
.btn:active { transform: translateY(1px); }

/* Primary — the big "Apply Now" in the closing CTA. */
.btn--primary {
  padding: 32px 80px;
  font-size: var(--type-body-l-size);
  line-height: var(--type-body-l-lh);
  font-weight: 800;
  color: var(--color-white);
  background: var(--color-cta);
  border: 3px solid rgba(0, 0, 0, 0.34);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-cta);
}
.btn--primary:hover { background: #e00049; }

/* Compact — the "Apply Now" inside the floating nav. */
.btn--compact {
  padding: 19px 16px;
  font-size: var(--type-body-s-size);
  line-height: var(--type-body-s-size);
  font-weight: 800;
  letter-spacing: 0.2px;
  color: var(--color-white);
  background: var(--color-cta);
  border: 1px solid var(--color-cta-border);
  border-radius: var(--radius-sm);
}
.btn--compact:hover { background: #e00049; }

/* Link — the promoters' "Vai al sito", text then arrow. */
.btn--link {
  gap: 16px;
  padding: 12px 24px;
  font-size: var(--type-body-m-size);
  line-height: var(--type-body-m-size);
  font-weight: 500;
  color: var(--color-primary);
  background: transparent;
  border-radius: var(--radius-xs);
}
.btn--link:hover { background: var(--color-accent); }
.btn--link .btn__icon {
  display: flex;
  align-items: center;
  width: 18px;
  height: 18px;
  flex: none;
}
.btn--link .btn__icon svg { width: 100%; height: 100%; fill: currentColor; }

/* Modal — the popup's "Continua". */
.btn--modal {
  gap: 15px;
  padding: 15px 20px;
  font-family: var(--font-ui);
  font-size: var(--type-body-l-size);
  font-weight: 500;
  color: var(--color-white);
  background: var(--color-primary);
}
.btn--modal:hover { background: #4530c9; }
.btn--modal .btn__icon { width: 24px; height: 24px; flex: none; }
.btn--modal .btn__icon svg { width: 100%; height: 100%; fill: currentColor; }

@media (max-width: 767px) {
  /* Qui c'era un mio rimpicciolimento non misurato - `padding: 24px 32px`,
     `font-size: var(--type-body-m-size)`, `line-height: 1.4` - che portava il
     bottone a 157x79. La regola base e' invece identica alla fonte
     (`padding: 32px 80px`, bordo di 3px, raggio 16px), e la fonte **non lo
     rimpicciolisce sul telefono**: misurato a 373, 253x102 con `font-size:
     18px` e `line-height: 32px`. Togliendo l'override il corpo torna giusto da
     solo (`--type-body-l-size` vale 18px sul telefono), mentre l'interlinea
     va riportata a mano: il token `--type-body-l-lh` scende a 28px sul
     telefono per il testo corrente, e qui servono i 32 della fonte. */
  .btn--primary { line-height: 2rem; }
}

/* --------------------------------------------------------------------------
   Floating nav — fixed pill, bottom of the viewport
   -------------------------------------------------------------------------- */
.floating-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  display: flex;
  justify-content: center;
  padding: 10px;
  pointer-events: none;
}
.floating-nav__pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  background: var(--color-nav-surface);
  border: 1px solid var(--color-nav-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-nav);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: auto;
}
.floating-nav__menu {
  display: flex;
  justify-content: center;
  gap: 8px;
}
.floating-nav__link {
  display: flex;
  align-items: center;
  padding: 16px;
  font-family: var(--font-body);
  font-size: var(--type-body-s-size);
  line-height: 20px;
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-nav-item);
  border: 1px solid var(--color-nav-item-border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background-color 0.25s var(--ease-out);
}
.floating-nav__link:hover,
.floating-nav__link.is-current { background: var(--color-nav-item-active); }

/* Burger — visible from tablet down, opens the full-screen menu. */
/* Only ever shown below 1025px, inside the pill - whose ground is
   rgba(20,2,97,.7), dark navy. In --color-primary it was purple on that navy
   and barely readable; white is the only value that reads there. 44px instead
   of 32 fits without growing the pill, whose content box is 56px tall, and it
   also meets the 44px touch target. The bars in the icon go from 2 to 2.6 of
   the 24-unit viewBox, so at 44px they are 4.8px thick instead of 2.7. */
.floating-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: #fff;
}
.floating-nav__toggle svg { width: 44px; height: 44px; fill: currentColor; }

@media (max-width: 1024px) {
  .floating-nav__pill {
    flex-direction: row-reverse;
    gap: 24px;
    padding: 6px;
  }
  .floating-nav__menu { display: none; }
  .floating-nav__toggle { display: flex; }
}

/* Sul desktop la pillola sfiorava il bordo basso dello schermo: i 10px di
   imbottitura della barra erano gli stessi su tutti e quattro i lati. Sotto
   diventano **32**, gli stessi gia' scelti per il tablet, quindi la misura e'
   una sola per tutta la fascia sopra il telefono.
   Solo da 1025 in su: sul telefono la pillola resta a 10px, perche' quello
   stato e' approvato (tag `mobile-ok`), e il tablet ha gia' la sua regola.
   **Il footer qui non e' stato toccato, ma un difetto ce l'ha.** La nota della
   decisione 15 diceva che la pillola, larga 562 e centrata, sorvola il vuoto in
   mezzo alla barra: **non e' vero**, misurato a 1440. La pillola sta a
   **439..1001** e il terzo bottone, "Informativa Acceleratore Certificato", a
   **428..691**: si sovrappongono in orizzontale, e in verticale anche - a
   pagina scorsa in fondo il bottone sta fra 37 e 75px dal fondo del documento,
   la pillola fra 32 e 108. I primi due bottoni invece sono liberi.
   Valeva **da prima** di questa regola (con 10px la pillola stava fra 10 e 86,
   e copriva lo stesso il bottone per intero), quindi alzarla non aveva
   peggiorato nulla. **Corretto l'8 ottobre**, con la stessa cura gia' usata su
   telefono e tablet: imbottitura sotto la barra pari all'ingombro della
   pillola. Vedi `.site-footer__bar-inner` in `sections.css`. */
@media (min-width: 1025px) {
  /* Ingombro totale della barra: 10 sopra + 76 di pillola + 32 di stacco.
     Lo legge il footer per tenere i suoi bottoni fuori di qui - vedi
     `.site-footer__bar-inner` in `sections.css`. Sta su `:root` perche' le
     proprieta' personalizzate si ereditano lungo l'albero e non sono globali:
     dichiarata sulla barra, il footer non la vedrebbe. */
  :root { --nav-ingombro: 118px; }
  .floating-nav { padding: 10px 10px 32px; }
}

/* --------------------------------------------------------------------------
   Full-screen menu overlay (popup 685)
   -------------------------------------------------------------------------- */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  background: var(--color-white);
  overflow-y: auto;
}
.menu-overlay.is-open { display: flex; }
.menu-overlay__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.menu-overlay__logo { width: 180px; }
.menu-overlay__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-primary);
}
.menu-overlay__close svg { width: 28px; height: 28px; fill: currentColor; }
.menu-overlay__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.menu-overlay__list {
  width: 100%;
  max-width: var(--container-narrow);
}
.menu-overlay__link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  font-family: var(--font-display);
  font-size: var(--type-display-l-size);
  line-height: var(--type-display-l-lh);
  color: var(--color-primary);
  transition: color 0.25s var(--ease-out);
}
.menu-overlay__link:hover { color: var(--color-text); }

@media (max-width: 767px) {
  .menu-overlay__link { padding: 16px 12px; }
}

/* --------------------------------------------------------------------------
   Benefit card — Key Benefit grid (6 items over a diagonal gradient)
   -------------------------------------------------------------------------- */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--gradient-benefit);
  border-right: 1px solid var(--rule);
}
/* Each cell is outlined on its top and left edge; together with the wrapper's
   right rule that draws the whole grid.

   Content is anchored to the top, not centred. The source centres it, which
   makes each title float to a different height depending on how long its body
   copy is — tidier here to have the titles, and with them the body copy, line
   up across a row. Deliberate divergence from the source. */
.benefit-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-5);
  padding: 80px 40px;
  text-align: center;
  color: var(--color-white);
  border-top: 1px solid var(--rule-cell-on-purple);
  border-left: 1px solid var(--rule-cell-on-purple);
}
.benefit-card__title {
  font-family: var(--font-display);
  font-size: var(--type-heading-size);
  line-height: var(--type-heading-lh);
  font-weight: 900;
}
/* Every title currently runs to two lines. Reserving that depth keeps the body
   copy on a common baseline even if one of them ever shortens to one line.
   Only from 768px up, where cards actually sit side by side. */
@media (min-width: 768px) {
  .benefit-card__title { min-height: calc(2 * var(--type-heading-lh)); }
}
.benefit-card__body {
  font-family: var(--font-body);
  font-size: var(--type-body-l-size);
  line-height: var(--type-body-l-lh);
}
.benefit-card__body strong { font-weight: 700; }

@media (max-width: 1024px) {
  .benefit-grid { grid-template-columns: repeat(2, 1fr); }
  .benefit-card { padding: 56px 32px; }
}
@media (max-width: 767px) {
  .benefit-grid { grid-template-columns: 1fr; }
  .benefit-card { padding: 48px 24px; }
}

/* --------------------------------------------------------------------------
   Timeline step — "Il percorso di accelerazione"
   -------------------------------------------------------------------------- */
.timeline-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: 80px 32px 0;
}
.timeline-step--first { padding-top: var(--space-14); }
.timeline-step--last { padding-bottom: 80px; }
.timeline-step__marker {
  position: absolute;
  top: 88px;
  left: -12px;
  width: 24px;
  height: 24px;
}
.timeline-step--first .timeline-step__marker { top: 168px; }
.timeline-step__title {
  font-family: var(--font-display);
  font-size: var(--type-heading-size);
  line-height: var(--type-heading-lh);
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color-text);
}
.timeline-step__body {
  font-family: var(--font-body);
  font-size: var(--type-body-l-size);
  line-height: var(--type-prose-lh);
}

@media (max-width: 1024px) {
  /* Longhand e non `padding: 48px 32px 0`: la forma breve azzerava anche il
     `padding-bottom: 80px` di `.timeline-step--last`, e la fascia col razzo
     attaccava sulla riga del testo. Il fondo del passo e' gia' 0 nella regola
     base, quindi qui non serve ridichiararlo. */
  .timeline-step { padding-top: 48px; padding-inline: 32px; }
  .timeline-step--first { padding-top: 48px; }
  /* Aria fra l'ultima tappa e la fascia: la fonte ne tiene 95px a 373 e 110 a
     834, misurate. 96 e' il passo della scala che le copre entrambe. */
  .timeline-step--last { padding-bottom: var(--space-12); }
  .timeline-step__marker,
  .timeline-step--first .timeline-step__marker { top: 56px; left: 0; }
}

/* Sul tablet il rombo restava a `left: 0`, cioe' **a filo del bordo dello
   schermo**, mentre il testo della tappa partiva dai 32px di gronda: il
   marcatore era l'unica cosa della pagina fuori dalla colonna.

   Senza il binario verticale - che sotto i 1025 non c'e' piu' - il rombo non ha
   una spina su cui appoggiarsi, quindi diventa un **bullet appeso**, come sul
   telefono (decisione 20): marcatore dentro la gronda, testo rientrato oltre di
   esso. Le misure sono quelle del telefono riscalate sul rombo da 24px che il
   tablet eredita dal desktop: gronda **32**, testo a **72** (32 + 24 + 16 di
   respiro; sul telefono era 16 + 16 + 12 = 44).

   In verticale il rombo si centra sulla **prima riga** del titolo, non sul
   blocco: con `padding-top: 48` e interlinea 48 quella riga sta a 48..96, il
   suo mezzo e' 72, e un rombo da 24 parte quindi da **60**. Prima era 56, cioe'
   4px alto, perche' quel valore veniva da un titolo piu' piccolo. */
@media (min-width: 768px) and (max-width: 1024px) {
  .timeline-step { padding-left: 72px; padding-right: 32px; }
  .timeline-step__marker,
  .timeline-step--first .timeline-step__marker { top: 60px; left: 32px; }
}

/* --------------------------------------------------------------------------
   Stat block — "Fino a 100K€ di grant"
   -------------------------------------------------------------------------- */
.stat {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.stat__label {
  font-family: var(--font-body);
  font-size: var(--type-body-xl-size);
  line-height: var(--type-body-xl-lh);
  font-weight: 700;
  color: var(--color-text);
}
.stat__value {
  font-family: var(--font-display);
  font-size: var(--type-display-xl-size);
  line-height: var(--type-display-xl-lh);
  font-weight: 900;
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Promoter block — logo + copy + link, with a portrait card alongside
   -------------------------------------------------------------------------- */
.promoter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: 64px 32px;
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
}
.promoter__logo { max-width: 240px; }
/* "Vai al sito" a filo del paragrafo, **a ogni larghezza**. I 24px orizzontali
   del bottone sono un'imbottitura invisibile - il fondo e' trasparente e si
   accende solo al passaggio del mouse - quindi non si vedono: spostano solo la
   scritta, 24px piu' a destra di tutto il resto della colonna. Misurato a 1440:
   logo e paragrafo a **x93**, scritta del bottone a **x117**.
   La fonte ha lo stesso scalino a tutte le larghezze, quindi questa e' una
   divergenza voluta (differenza n. 15). E' nata sul telefono, poi e' arrivata
   al tablet, poi al desktop: tre copie della stessa riga in tre media query
   diverse, quindi ora sta **una volta sola** nella regola base.
   Restano i 12px verticali, che tengono il bersaglio del dito a 42px. */
.promoter .btn--link { padding-inline: 0; }
.promoter__person {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  padding: 48px 80px;
  border-right: 1px solid var(--rule);
}
.promoter__photo {
  width: 100%;
  max-width: 275px;
  aspect-ratio: 1 / 1;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-photo);
}
.promoter__meta {
  max-width: 275px;
  display: flex;
  flex-direction: column;
}
.promoter__org {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-size);
  font-weight: 800;
}
.promoter__name {
  font-family: var(--font-body);
  font-size: var(--type-body-xl-size);
  line-height: var(--type-body-xl-lh);
  font-weight: 800;
}
.promoter__role {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
}

@media (max-width: 1024px) {
  .promoter { padding: 48px 32px; border-left: 0; border-right: 0; }
  .promoter__person { padding: 0 32px 48px; align-items: flex-start; border-right: 0; }
}

/* --------------------------------------------------------------------------
   Portfolio card — logo + pitch over a square cover photo
   -------------------------------------------------------------------------- */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}
.portfolio-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.portfolio-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 28px -6px rgba(0, 0, 0, 0.2);
}
/* Fixed at 238px so every card is exactly 550px tall and the covers line up
   across a row, as they do on the source. */
.portfolio-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: 24px;
  height: 238px;
  overflow: hidden;
}
.portfolio-card__logo {
  max-width: 200px;
  max-height: 50px;
  width: auto;
  object-fit: contain;
  object-position: left center;
}
.portfolio-card__body {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  letter-spacing: 1px;
  color: var(--color-ink);
}
.portfolio-card__cover {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@media (max-width: 1200px) { .portfolio-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1024px) { .portfolio-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
  .portfolio-card { border-radius: var(--radius-md); }
  .portfolio-card__head { padding: 16px; height: 152px; gap: var(--space-2); }
  .portfolio-card__logo { max-height: 34px; }
  .portfolio-card__body {
    font-size: 0.8125rem;
    line-height: 1.25rem;
    letter-spacing: 0;
    -webkit-line-clamp: 4;
  }
}

/* --------------------------------------------------------------------------
   Team member — square portrait beside name + role
   -------------------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-left: 1px solid var(--rule);
}
.team-member {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 330px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
/* Shrinkable: the cell is 440px only from 1440px up, so below that the two
   halves have to give ground rather than overflow the container. At 440 they
   resolve to the source's 207 + 232. */
.team-member__photo {
  flex: 0 1 207px;
  min-width: 0;
  align-self: stretch;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}
.team-member__meta {
  flex: 0 1 232px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-1);
  padding: 0 16px 0 32px;
  color: var(--color-white);
}
.team-member__org {
  font-family: var(--font-body);
  font-size: var(--type-body-s-size);
  line-height: var(--type-body-s-size);
  font-weight: 800;
}
.team-member__name {
  font-family: var(--font-body);
  font-size: var(--type-body-l-size);
  line-height: var(--type-body-l-lh);
  font-weight: 800;
}
.team-member__role {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--type-body-size);
}

@media (max-width: 1024px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .team-member { min-height: 0; }
  .team-member__photo { aspect-ratio: 207 / 330; }
  .team-member__meta { padding: 0 12px 0 20px; }
}
@media (max-width: 767px) {
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  /* `justify-content: center` viene dalla regola base, dove la scheda e' una
     riga orizzontale. Impilata in due colonne diventa un difetto: dove il
     ruolo va a capo su due righe la riga della griglia si allunga (312 contro
     296) e la scheda piu' corta **centra** il suo contenuto, mandando foto,
     nome e ruolo 8px piu' in basso della scheda accanto. Misurato: scarto di
     8px nelle righe 2 e 3, zero nelle altre. Con `flex-start` ogni scheda
     parte dal bordo alto della sua cella. */
  .team-member {
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-3);
  }
  .team-member__photo {
    flex: none;
    width: 100%;
    aspect-ratio: 1 / 1;
  }
  /* 15 e non 16: il filetto della griglia occupa il primo pixel a sinistra e
     quello di ogni scheda l'ultimo a destra, quindi 15px di imbottitura
     mettono il testo esattamente sulla gronda della pagina - inchiostro a 16
     nella colonna sinistra e bordo destro a 357 in quella destra, gli stessi
     valori del titolo della sezione. Prima erano 8px, cioe' testo a 9 e a 195,
     disallineato da titolo e paragrafo. La fonte ha lo stesso disallineamento:
     questa e' una divergenza voluta. */
  .team-member__meta { flex: none; padding: 0 15px 32px; }
  /* Senza il binario verticale il rombo non ha una spina su cui appoggiarsi:
     diventa un bullet appeso, con il marcatore nella gronda da 16px e il
     testo rientrato oltre di esso (prima si sovrapponeva al numero e
     toccava il bordo). Rombo a 16px: stesso rapporto col titolo che ha
     quello da 24px sul desktop. */
  .timeline-step { padding-top: 40px; padding-left: 44px; padding-right: 16px; }
  .timeline-step__marker,
  .timeline-step--first .timeline-step__marker {
    left: 16px;
    top: 47px;
    width: 16px;
    height: 16px;
  }
  .promoter { padding: 40px 16px; }
  .promoter__person { padding: 0 16px 40px; }
  /* Il tetto di 275px e' una misura della colonna stretta del desktop: sul
     telefono, dove la colonna e' larga quanto lo schermo, lasciava la foto
     ferma a 16..291 con 82px di vuoto a destra. Togliendolo la foto prende
     tutta la colonna, 341x341: quadrata per l'`aspect-ratio: 1/1` e con la
     stessa gronda da 16px di ogni altro elemento della pagina.
     Angoli e ombra restano quelli della fonte (24px, verificato a 1440). */
  .promoter__photo { max-width: none; }
  .team-member__name { font-size: 1.125rem; line-height: 1.5rem; }
  .team-member__role { font-size: 0.875rem; }
}

/* --------------------------------------------------------------------------
   Partner tile — square logo plate
   -------------------------------------------------------------------------- */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid var(--rule);
}
/* Logo plates: the source contains each mark inside a square-ish tile, so the
   artwork is never cropped, and outlines every cell. */
.partner-tile {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  width: 100%;
  aspect-ratio: 330 / 351;
  object-fit: contain;
  object-position: center;
  padding: 10px;
}
@media (max-width: 1024px) { .partner-grid { grid-template-columns: repeat(2, 1fr); } }

/* Loghi dei partner pareggiati sul telefono.

   Le tredici tele sono tutte ~620x320, ma l'inchiostro dentro ciascuna occupa
   una porzione molto diversa - misurata sui pixel, la frazione maggiore fra
   larghezza e altezza va da 0,594 (`pid`) a 0,925 (`first-lab`). Con
   `object-fit: contain` la tela viene disegnata sempre uguale, quindi quella
   differenza si trasferisce tutta al logo: a 373 l'inchiostro andava da 47px
   di larghezza (`mnf`) a 147 (`camera-commercio`), tre volte tanto.

   Il pareggio si fa con l'**imbottitura**, non con una scala: `.partner-tile`
   e' l'immagine stessa e porta `border-right` e `border-bottom`, cioe' i
   filetti della griglia. Una `scale` avrebbe spostato e assottigliato anche
   quelli - primo tentativo, griglia sfasata di +-33%. L'imbottitura invece
   agisce sulla content box, che e' l'area in cui `contain` iscrive la tela: il
   disegno rimpicciolisce e il bordo non si muove di un pixel.

   La formula: perche' l'inchiostro venga sempre largo `--target` (in frazione
   della cella), la tela deve essere disegnata larga `--target / --f`, quindi
   l'imbottitura e' meta' di quello che resta. Basta un numero per logo perche'
   il riquadro utile ha lo stesso rapporto della tela (1,94): la stessa
   imbottitura pareggia entrambi gli assi.

   `--target` vale 0,591 e non di piu' perche' la tela non puo' essere disegnata
   piu' larga della cella: il tetto e' la frazione piu' piccola della tabella
   (`pid`, 0,594), che infatti resta a imbottitura ~zero. Per loghi piu' grandi
   servirebbe ritagliare i file - ma le stesse tele servono anche altrove - o
   spostare i filetti dalla immagine a un contenitore.

   Il selettore usa il nome del file e non `nth-child`: se l'ordine dei partner
   cambia, le misure restano appaiate al logo giusto. Il valore di ripiego in
   `var(--f, ...)` lascia un logo nuovo senza imbottitura invece di deformarlo.

   L'inchiostro e' centrato nella tela in tutti e tredici i file - lo scarto
   massimo e' `artes`, 2% in orizzontale e 5% in verticale - quindi con
   `object-position: center` i centri cadono tutti sulla griglia. Sopra i 767
   non si tocca niente: la' lo scarto c'e' ancora, come nella fonte. */
@media (max-width: 767px) {
  .partner-tile {
    --target: 0.591;
    padding: calc(50% * (1 - var(--target) / var(--f, var(--target))));
  }

  .partner-tile[src$="camera-commercio.webp"] { --f: 0.890; }
  .partner-tile[src$="first-lab.webp"]        { --f: 0.925; }
  .partner-tile[src$="almacube.webp"]         { --f: 0.840; }
  .partner-tile[src$="sip-1.webp"]            { --f: 0.833; }
  .partner-tile[src$="cnttv.webp"]            { --f: 0.787; }
  .partner-tile[src$="unifi.png"]             { --f: 0.739; }
  .partner-tile[src$="cf.webp"]               { --f: 0.688; }
  .partner-tile[src$="wmf.webp"]              { --f: 0.688; }
  .partner-tile[src$="comune-firenze.webp"]   { --f: 0.671; }
  .partner-tile[src$="artes.webp"]            { --f: 0.632; }
  .partner-tile[src$="mnf.webp"]              { --f: 0.623; }
  .partner-tile[src$="confindustria.webp"]    { --f: 0.606; }
  .partner-tile[src$="pid.webp"]              { --f: 0.594; }
}

/* --------------------------------------------------------------------------
   Accordion — FAQ
   -------------------------------------------------------------------------- */
/* No divider between questions on the source — the 24px gap does the work. */
.accordion__item {
  margin-bottom: var(--space-5);
}
.accordion__summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px;
  cursor: pointer;
  list-style: none;
  color: #1F2124;
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__title {
  font-family: var(--font-body);
  font-size: var(--type-body-xl-size);
  line-height: var(--type-body-xl-lh);
  font-weight: 400;
}
/* Sits to the left of the question. The source keeps the icon last in the
   markup and pulls it forward with order, which also keeps the reading order
   question-then-control for assistive tech. Closed it is grey; open it turns
   primary. */
.accordion__icon {
  order: -1;
  position: relative;
  flex: none;
  width: 21px;
  height: 24px;
  color: var(--rule);
  transition: color var(--duration-icon) var(--ease-out);
}
.accordion__item[open] .accordion__icon { color: var(--color-primary); }

/* Two strokes: the horizontal one stays, the vertical one retracts into the
   centre when the question opens, leaving the minus behind.

   It retracts rather than rotating flat: rotating the stroke from 90 to 0
   sweeps it through 45 degrees, and against the stationary horizontal stroke
   the icon momentarily reads as a cross. Scaling along its own axis avoids
   that entirely, and needs no cross-fade to hide the sweep. */
.accordion__icon::before,
.accordion__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 21px;
  height: 3px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform var(--duration-icon) var(--ease-out);
}
.accordion__icon::after { transform: translateY(-50%) rotate(90deg); }
.accordion__item[open] .accordion__icon::after {
  transform: translateY(-50%) rotate(90deg) scaleX(0);
}

/* Stroke and colour share one duration, so the icon settles in a single beat
   instead of two. */
@media (prefers-reduced-motion: reduce) {
  .accordion__icon,
  .accordion__icon::before,
  .accordion__icon::after { transition: none; }
}
.accordion__panel {
  padding: 0 32px 24px 37px;
  font-family: var(--font-body);
  font-size: var(--type-body-m-size);
  line-height: var(--type-body-m-lh);
}
.accordion__panel p + p { margin-top: var(--type-body-m-size); }

@media (max-width: 767px) {
  .accordion__title { font-size: 1.25rem; line-height: 1.75rem; }
  .accordion__panel { padding: 0 8px 20px 10px; font-size: 1rem; line-height: 1.5rem; }
}

/* --------------------------------------------------------------------------
   Carousel — Key Benefit photo strip (2 slides visible, 29px gutter)
   -------------------------------------------------------------------------- */
.carousel {
  position: relative;
  overflow: hidden;
}
.carousel__track {
  display: flex;
  gap: 29px;
  will-change: transform;
}
/* The source's slide is 6px taller than the photo it holds, which is what
   makes the band 690px and not 684px at 1920 — and that in turn is where the
   purple/white break falls. */
.carousel__slide {
  flex: 0 0 calc((100% - 29px) / 2);
  padding-bottom: 6px;
}
.carousel__slide img {
  width: 100%;
  height: 100%;
  aspect-ratio: 690 / 388;
  object-fit: cover;
  border-radius: var(--radius-md);
}
@media (max-width: 1024px) {
  .carousel__slide { flex: 0 0 100%; }
}

/* Su telefono le foto diventano verticali, su richiesta di Francesca. Le dieci
   sorgenti sono tutte 1024x576, cioe' 16:9 orizzontali: non esistono versioni
   in piedi, quindi il formato si ottiene ritagliando. Scelto 4:5 e non 3:4 o
   2:3 perche' e' il ritratto che taglia meno - resta visibile il 45% della
   larghezza contro il 42% e il 37% - e il taglio e' centrato, quindi si perde
   cio' che sta ai lati. */
@media (max-width: 767px) {
  .carousel__slide img { aspect-ratio: 4 / 5; }

  /* Il ritaglio 4:5 mostra il 45% centrale del fotogramma, e su tre foto su
     dieci il soggetto cade fuori: la 5 ha l'oratore al 12-28%, la 9 la ragazza
     alla scrivania all'8-40%, la 7 l'oratrice al 62-88%. Misurato sui
     fotogrammi interi con la finestra sovrapposta, non a occhio. All'8% la
     finestra copre il 4-49% e prende le prime due; all'85% copre il 47-92% e
     prende la terza. Le altre sette stanno dentro la finestra centrata.
     A desktop non ha effetto: la' il riquadro e' 690/388, cioe' il rapporto
     della sorgente, quindi non c'e' ritaglio. */
  .carousel__img--crop-left { object-position: 8% center; }
  .carousel__img--crop-right { object-position: 85% center; }
}

/* --------------------------------------------------------------------------
   Modal — Apply Now (popup 1423)
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.6);
}
.modal.is-open { display: flex; }
.modal__dialog {
  position: relative;
  width: 100%;
  max-width: 530px;
  max-height: 100%;
  overflow-y: auto;
  background: var(--color-white);
  border-radius: var(--radius-md);
}
.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--color-white);
  background: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
}
.modal__close svg { width: 18px; height: 18px; fill: currentColor; }
.modal__media { width: 100%; aspect-ratio: 530 / 278; object-fit: cover; }
.modal__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  max-width: 350px;
  margin-inline: auto;
  padding: 48px 16px;
  text-align: center;
}
.modal__title {
  font-family: var(--font-body);
  font-size: var(--type-body-xl-size);
  line-height: var(--type-body-xl-lh);
  color: var(--color-text);
}
.modal__note {
  font-family: var(--font-ui);
  font-size: var(--type-body-size);
  font-weight: 300;
  line-height: 1.6rem;
  letter-spacing: -0.45px;
}
.modal__note a { color: var(--color-primary); text-decoration: underline; }
.modal__note a strong { font-weight: 400; }

/* --------------------------------------------------------------------------
   Cookie consent — CookieScript-equivalent, self-hosted
   -------------------------------------------------------------------------- */
/* z-index 110 e non 140: il banner sta sopra la pagina (nav flottante 90,
   scudo di riapertura 100) ma **sotto le sovrapposizioni che il visitatore
   apre di sua volonta'** - menu 120, modale 130. A 140 copriva il fondo del
   modale "Apply Now": su un telefono il banner e' alto 338px su 665, quindi si
   prendeva il bottone "Continua" (misurato a 373: bottone y512..566 dentro un
   banner y327..665, e `elementFromPoint` restituiva il banner). Il link a F6S
   sembrava rotto e invece il tocco non lo raggiungeva.
   Il banner resta comunque disponibile: chiuso il modale, e' ancora aperto. */
.cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 110;
  display: none;
  gap: 24px;
  align-items: center;
  padding: 20px 24px;
  color: var(--color-white);
  background: #1B1B1B;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.25);
}
.cookie-banner.is-open { display: flex; }
.cookie-banner__main { flex: 1 1 auto; min-width: 0; }
.cookie-banner__text {
  font-family: var(--font-body);
  font-size: var(--type-body-s-size);
  line-height: 1.4;
}
.cookie-banner__text a { color: var(--color-white); text-decoration: underline; }
.cookie-banner__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 14px;
}
.cookie-category {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  cursor: pointer;
}
.cookie-category input { width: 13px; height: 13px; accent-color: var(--color-primary); cursor: pointer; }
.cookie-category input:disabled { cursor: not-allowed; }
.cookie-banner__details-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-decoration: underline;
}
.cookie-banner__actions {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cookie-btn {
  padding: 11px 18px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  text-align: center;
  border-radius: var(--radius-pill);
  transition: filter 0.2s var(--ease-out);
}
.cookie-btn:hover { filter: brightness(1.12); }
.cookie-btn--accept { color: #0B2B15; background: #4ADE80; }
.cookie-btn--reject { color: var(--color-white); background: transparent; border: 1px solid rgba(255, 255, 255, 0.6); }
.cookie-btn--save { color: var(--color-white); background: var(--color-primary); }
.cookie-banner__close {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 18px;
  line-height: 1;
  color: var(--color-white);
  opacity: 0.75;
}
.cookie-banner__close:hover { opacity: 1; }

.cookie-details { display: none; margin-top: 16px; }
.cookie-details.is-open { display: block; }
.cookie-details__row {
  padding: 12px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1.5;
}
.cookie-details__row strong { display: block; text-transform: uppercase; letter-spacing: 0.4px; font-size: 0.6875rem; }

/* Re-open badge, bottom-left, like the live site's cookie shield. */
.cookie-badge {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--color-white);
  background: rgba(20, 2, 97, 0.75);
  border-radius: 50%;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cookie-badge.is-visible { display: flex; }
.cookie-badge svg { width: 20px; height: 20px; fill: currentColor; }

@media (max-width: 1024px) {
  .cookie-banner { flex-direction: column; align-items: stretch; gap: 16px; }
  .cookie-banner__actions { flex: none; }
}
@media (max-width: 767px) {
  .cookie-banner { padding: 20px 16px; max-height: 85vh; overflow-y: auto; }
}

/* --------------------------------------------------------------------------
   Lottie stage
   The outer container holds the position and the source's slow `shake` drift;
   this inner element takes the scroll-linked rotate and translate, so the two
   transforms do not overwrite each other. Elementor does the same, splitting
   the widget from its .elementor-motion-effects-element.
   -------------------------------------------------------------------------- */
.lottie-stage {
  width: 100%;
  height: 100%;
  will-change: transform;
  /* The source damps the scroll transform by 100ms so it glides rather than
     tracking every wheel tick exactly. */
  transition: transform 100ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .lottie-stage { transition: none; transform: none !important; }
}

/* --------------------------------------------------------------------------
   "Un network di innovazione" a tablet (768-1024)
   -------------------------------------------------------------------------- */
/* Francesca: *"tutti gli elementi devono avere la stessa gerarchia di
   grandezza, allinea tutti gli elementi"*.

   **Cos'era disallineato.** Misurato a 834, nel blocco di ogni promotore il
   logo, il testo, la foto e i dati della persona partivano tutti da x32, ma
   "Vai al sito" cominciava da **x56**: il bottone ha `padding: 12px 24px` e il
   fondo e' trasparente (si accende solo al passaggio del mouse), quindi quei
   24px non si vedono - spostano solo la scritta. E' lo stesso difetto gia'
   corretto sul telefono (differenza n. 15); qui la correzione arriva al tablet.
   La fonte fa lo stesso scalino e ne ha anzi tre, di fili: **33** per logo,
   testo e bottone, **57** per la scritta del bottone, **48** per foto e dati
   della persona. Allineare tutto su uno solo e' quindi una scelta diversa dalla
   fonte, chiesta da lei.

   **Cos'era fuori gerarchia.** Le misure non si parlavano: logo 240, testo 770
   (tutta la colonna), foto 275. Tre numeri senza una regola. Ora sono due:
   **immagini a 295 e testo a 600**. I 295 sono la misura che la fonte da' ai
   tre lockup proprio a questa larghezza; i 600 sono la stessa misura di lettura
   della sezione "Il processo di selezione" (circa 25em, 55-60 battute), cosi'
   le due sezioni si leggono uguali. L'80% entra in gioco solo a 768, dove la
   colonna e' 704.

   I tre lockup restano a **larghezza uguale** e non ad altezza uguale: dentro i
   file l'inchiostro occupa il 99,6% / 99,8% / 97,7% della tela in orizzontale
   (misurato sui pixel), quindi la larghezza della scatola e' gia' la larghezza
   del disegno; le altezze diverse - 125, 82, 92 a 295 - sono le proporzioni dei
   marchi, non un errore di misura, e la fonte le tiene identiche. */
@media (min-width: 768px) and (max-width: 1024px) {
  .promoter__logo,
  .promoter__photo { max-width: 295px; }
  .promoter .prose { max-width: min(600px, 80%); }
}

/* Il bottone del CTA piu' grande a tablet, su richiesta di Francesca
   ("aumenta le dimensioni del bottone"). Non e' un ridisegno: **e' lo stesso
   bottone moltiplicato per 1,25**, imbottitura, corpo e interlinea insieme -
   32/80 -> 40/100, 24 -> 30, 32 -> 40 - cosi' le proporzioni interne restano
   quelle della fonte e cambia solo la scala. Da 283x102 passa a **352x126**.
   Il bordo di 3px e il raggio di 16 restano: sono lo spessore del disegno, non
   una misura da scalare.
   Vale solo fra 768 e 1024: sul telefono e sul desktop il bottone resta alla
   misura della fonte. `.btn--primary` esiste solo dentro il CTA, ma il
   selettore lo dice comunque, cosi' la regola non segue il bottone altrove. */
@media (min-width: 768px) and (max-width: 1024px) {
  .cta .btn--primary {
    padding: 40px 100px;
    font-size: 30px;
    line-height: 40px;
  }
}

/* --------------------------------------------------------------------------
   Pillola flottante a tablet (768-1024) - alla misura della fonte
   -------------------------------------------------------------------------- */
/* *"Aumenta la dimensione del menu"*. Misurata la fonte a 834, la pillola li' e'
   **230x78** e l'hamburger **50x50**; la replica ne aveva **186x68** con
   l'icona a 44. Il bottone "Apply Now" dentro la pillola era invece gia'
   giusto - 104x54, corpo 14 - identico alla fonte, quindi non si tocca.

   Le misure della fonte, lette una per una: pillola da x302 a 532, "Apply Now"
   da 336 a 440, icona da 448 a 498. Cioe' **34px di gronda**, i due elementi
   staccati di **8**, e 11px sopra e sotto (78 meno i 56 del contenuto, diviso
   due). La replica aveva 6 di imbottitura e 24 di stacco: la pillola era piu'
   stretta e i due elementi piu' lontani fra loro che dal bordo, il contrario
   della fonte.

   I 44px dell'hamburger venivano da una scelta mia - "44 invece di 32 entra
   senza far crescere la pillola, ed e' anche il bersaglio minimo per il dito"
   (differenza n. 6). Ora che la pillola cresce, i 50 della fonte ci stanno e il
   bersaglio resta abbondante.

   Solo da 768 in su: sul telefono la pillola resta com'e', perche' quello stato
   e' approvato (tag `mobile-ok`). */
@media (min-width: 768px) and (max-width: 1024px) {
  .floating-nav__pill { gap: 8px; padding: 11px 34px; }
  .floating-nav__toggle,
  .floating-nav__toggle svg { width: 50px; height: 50px; }
}

/* Secondo giro, subito dopo: *"allunga il menu e ingrandiscilo, staccalo un po'
   dal basso dello schermo"*. Qui si va **oltre la fonte**, che restava a
   230x78 appoggiata a 10px dal bordo.

   **Ingrandire** e' di nuovo una moltiplicazione, non un ridisegno: tutto cio'
   che sta dentro la pillola cresce di **1,25**, lo stesso fattore gia' usato
   per il bottone del CTA - hamburger 50 -> **62**, "Apply Now" da 104x54 a
   **132x68** (imbottitura 19/16 -> 24/20, corpo 14 -> 18), stacco fra i due
   8 -> **10**, imbottitura sopra e sotto 11 -> **14**.

   **Allungare** e' invece un ritocco a parte: la gronda passa da 34 a **56**,
   piu' del fattore 1,25 (che darebbe 42). E' li' che si gioca la lunghezza,
   perche' i due elementi dentro sono di misura fissa. Risultato **318x98**
   contro i 232x78 di prima: **+37% in lunghezza, +26% in altezza**.

   **Staccare dal basso**: la barra flottante aveva 10px di imbottitura su tutti
   i lati, quindi la pillola sfiorava il bordo dello schermo. Sotto diventano
   **32**. */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Ingombro totale della barra: 10 sopra + 98 di pillola + 32 di stacco.
     Serve anche al footer, per tenere i suoi bottoni fuori da qui - vedi
     `.site-footer__bar-inner` in `sections.css`. Sta su `:root` e non su
     `.floating-nav` perche' le proprieta' personalizzate **si ereditano lungo
     l'albero**, non sono globali: dichiarata sulla barra, il footer - che non
     le e' dentro - non la vedrebbe.
     Se la pillola cambia misura, questo numero va rifatto: e' l'unico punto da
     toccare. */
  /* Ridotta "di un pochino" dopo il giro di ingrandimenti: l'imbottitura della
     pillola passa da 14/56 a **10/40**, quindi la lastra viola scende da 373x98
     a **341x90**, cioe' -8,6% in lunghezza e -8% in altezza. Cala solo il
     viola: "Apply Now" resta 187x68, l'hamburger 62 e lo stacco fra i due 10.
     `--nav-ingombro` scende di conseguenza a 132 = 10 sopra + 90 + 32 di
     stacco. */
  :root { --nav-ingombro: 132px; }
  .floating-nav { padding: 10px 10px 32px; }
  .floating-nav__pill { gap: 10px; padding: 10px 40px; }
  .floating-nav__toggle,
  .floating-nav__toggle svg { width: 62px; height: 62px; }
  /* Estremi arrotondati alle tre linee, su richiesta. Il raggio e' **meta'
     dello spessore** - le barre sono alte 2,6 unita' del viewBox da 24, quindi
     1,3 - che e' il valore oltre il quale non si arrotonda piu' nulla: da li'
     in su i due capi sono semicerchi pieni.
     Le barre erano un solo `path` di tre rettangoli; ora sono tre `rect` con la
     **stessa identica geometria** (x3, larghezza 18, altezza 2,6, a y 5,7 /
     10,7 / 15,7), perche' `rx` e' una proprieta' CSS e su un `rect` si puo'
     accendere per la sola fascia del tablet. Sul telefono e sul desktop l'icona
     resta a spigoli vivi, come prima: il disegno non cambia di un pixel,
     cambia solo il modo di scriverlo. */
  .floating-nav__toggle svg rect { rx: 1.3px; }
  /* *"Allunga solo il bottone Apply Now nel menu"*: cresce l'imbottitura
     laterale, **20 -> 48**, e nient'altro - corpo, altezza, hamburger e gronde
     della pillola restano quelli di prima.
     I 48 non sono a occhio: danno al bottone **188x68**, cioe' il rapporto
     **2,77** del bottone grande del CTA (283x102). Il "menu" e il "vai" della
     pagina diventano cosi' la stessa forma a due misure diverse.
     La pillola si allunga di conseguenza, da 317 a **374**: la sua larghezza e'
     data dal contenuto. */
  .floating-nav .btn--compact {
    padding: 24px 48px;
    font-size: 18px;
    line-height: 18px;
  }
}