/* total salary – presentation site. Brand: ink text, paper background, fog lines, lake links,
   red only for the main action. Archivo for the text, IBM Plex Mono for the figures. */
:root {
  --rosso: #d42a20;
  --rosso-scuro: #a81f17;
  --inchiostro: #15171c;
  --grafite: #50555e;
  --nebbia: #e4e5e8;
  --carta: #f7f7f5;
  --bianco: #ffffff;
  --lago: #1d5fa8;
  --abete: #1f7a4d;
  --ambra: #9c620a;
  --testo: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--testo);
  font-size: 16px;
  line-height: 1.55;
  color: var(--inchiostro);
  background: var(--carta);
  font-variant-numeric: tabular-nums;
}
a { color: var(--lago); }
h1, h2, h3 { line-height: 1.15; margin: 0 0 0.5em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; }
h3 { font-size: 1.125rem; font-weight: 600; }
p { margin: 0 0 1em; }
.contenitore { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.etichetta {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grafite);
  margin-bottom: 12px;
}

/* top bar: ink, negative logo, languages and the single red button */
.barra {
  background: var(--inchiostro);
  color: var(--bianco);
  position: sticky;
  top: 0;
  z-index: 10;
}
.barra .contenitore { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 16px; }
.barra img { display: block; height: 28px; }
.barra nav { display: flex; align-items: center; gap: 20px; }
.barra nav a { color: #c9cbd0; text-decoration: none; font-size: 0.9375rem; }
.barra nav a:hover { color: var(--bianco); }
.lingue { display: flex; gap: 2px; margin-left: 8px; }
.lingue a { padding: 4px 8px; border: 1px solid #3b3f47; color: #c9cbd0; font-size: 0.8125rem; font-weight: 600; }
.lingue a[aria-current] { background: var(--bianco); color: var(--inchiostro); border-color: var(--bianco); }
.bottone {
  display: inline-block;
  padding: 11px 20px;
  border: 1px solid var(--inchiostro);
  border-radius: 2px;
  background: var(--inchiostro);
  color: var(--bianco);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9375rem;
}
.bottone:hover { background: #2a2d34; }
.bottone.principale { background: var(--rosso); border-color: var(--rosso); }
.bottone.principale:hover { background: var(--rosso-scuro); border-color: var(--rosso-scuro); }
.bottone.chiaro { background: transparent; color: var(--inchiostro); }
.bottone.chiaro:hover { background: var(--nebbia); }
.barra .bottone { padding: 8px 14px; }
@media (max-width: 720px) { .barra nav a.voce { display: none; } }

/* hero */
.apertura { padding: 72px 0 56px; border-bottom: 1px solid var(--nebbia); background: var(--bianco); }
.apertura .contenitore { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: center; }
.apertura p.sommario { font-size: 1.125rem; color: var(--grafite); max-width: 36em; }
.azioni { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.nota { font-size: 0.875rem; color: var(--grafite); margin-top: 16px; }
@media (max-width: 860px) { .apertura .contenitore { grid-template-columns: 1fr; } }

/* sample payslip: the double line of the total, the red on the amount paid */
.busta {
  background: var(--bianco);
  border: 1px solid var(--nebbia);
  padding: 24px 28px;
  box-shadow: 0 1px 0 var(--nebbia);
  font-size: 0.9375rem;
}
.busta .intestazione { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.busta .intestazione strong { font-size: 1.0625rem; }
.busta .stato { color: var(--abete); font-size: 0.8125rem; font-weight: 600; }
.busta table { width: 100%; border-collapse: collapse; }
.busta td { padding: 7px 0; border-bottom: 1px solid var(--nebbia); }
.busta td:last-child { text-align: right; font-family: var(--mono); white-space: nowrap; }
.busta td.pct { text-align: right; color: var(--grafite); font-family: var(--mono); width: 5em; }
.busta tr.netto td { border-bottom: 0; padding-top: 14px; font-weight: 700; }
.busta tr.netto td:last-child { color: var(--rosso); font-size: 1.125rem; border-bottom: 3px double var(--inchiostro); padding-bottom: 4px; }

/* sections */
section { padding: 64px 0; }
section + section { border-top: 1px solid var(--nebbia); }
.griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
@media (max-width: 860px) { .griglia { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .griglia { grid-template-columns: 1fr; } }
.scheda { background: var(--bianco); border: 1px solid var(--nebbia); padding: 24px; }
.scheda svg { width: 28px; height: 28px; stroke: var(--inchiostro); fill: none; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; margin-bottom: 12px; }
.scheda p { color: var(--grafite); font-size: 0.9375rem; margin: 0; }
.passi { counter-reset: passo; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 32px; }
@media (max-width: 860px) { .passi { grid-template-columns: repeat(2, 1fr); } }
.passi div::before {
  counter-increment: passo;
  content: counter(passo, decimal-leading-zero);
  display: block;
  font-family: var(--mono);
  color: var(--rosso);
  font-weight: 500;
  margin-bottom: 8px;
}
.passi p { color: var(--grafite); font-size: 0.9375rem; margin: 0; }
.due { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 860px) { .due { grid-template-columns: 1fr; } }
ul.elenco { padding-left: 0; list-style: none; margin: 0; }
ul.elenco li { padding: 10px 0; border-bottom: 1px solid var(--nebbia); display: flex; gap: 12px; }
ul.elenco li::before { content: ""; width: 12px; height: 3px; background: var(--inchiostro); margin-top: 11px; flex: none; }
.numeri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; }
.numeri div { border-left: 3px solid var(--rosso); padding-left: 16px; }
.numeri strong { display: block; font-family: var(--mono); font-size: 1.75rem; font-weight: 500; }
.numeri span { color: var(--grafite); font-size: 0.9375rem; }
.prezzo { background: var(--inchiostro); color: var(--bianco); }
.prezzo h2, .prezzo .etichetta { color: var(--bianco); }
.prezzo p { color: #c9cbd0; max-width: 40em; }
.prezzo .bottone.chiaro { color: var(--bianco); border-color: #6b6f78; }
.prezzo .bottone.chiaro:hover { background: #2a2d34; }

/* footer */
footer { padding: 32px 0; border-top: 1px solid var(--nebbia); font-size: 0.875rem; color: var(--grafite); }
footer .contenitore { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
footer img { height: 22px; display: block; }
footer a { color: var(--grafite); }