/*
 * Chiaro v2: il documento annotato, su un tavolo scuro.
 *
 * Colori: solo token dell'app (src/styles.css). Le sezioni chiare usano :root, quelle scure il blocco
 * .dark, che l'app oggi non usa ma che fa parte della sua palette. tests/tokens.test.mjs confronta ogni
 * token con la variabile dell'app e controlla i contrasti AA delle coppie chiare e scure.
 * Nessun interruttore di tema: ogni sezione ha il suo tono fisso (tone-night, tone-paper, tone-white).
 *
 * Font: Inter in locale (scripts/fonts.sh). Nessun JavaScript: menu e domande usano <details>.
 */

@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Toni chiari: :root dell'app */
  --paper: oklch(1 0 0);
  --ink: oklch(0.129 0.042 264.695);
  --ink-soft: oklch(0.554 0.038 250);
  --surface: oklch(0.968 0.008 247.896);
  --line: oklch(0.929 0.013 255.508);
  --blue: oklch(0.52 0.115 248);
  --on-blue: oklch(0.99 0.005 240);
  --blue-wash: oklch(0.966 0.012 240);
  --blue-ink: oklch(0.32 0.06 250);
  --amber: oklch(0.76 0.14 76);
  --amber-on: oklch(0.28 0.06 66);
  --amber-wash: oklch(0.965 0.045 88);
  --amber-ink: oklch(0.36 0.075 66);
  --green: oklch(0.52 0.1 163);
  --green-wash: oklch(0.955 0.035 165);
  --green-ink: oklch(0.35 0.07 165);
  --household: oklch(0.46 0.09 200);
  --shadow-card: 0 1px 2px oklch(0.129 0.042 264.695 / 0.05), 0 1px 3px oklch(0.129 0.042 264.695 / 0.06);
  --shadow-raised: 0 8px 24px -12px oklch(0.129 0.042 264.695 / 0.18);

  /* Toni scuri: .dark dell'app */
  --night: oklch(0.129 0.042 264.695);
  --night-raised: oklch(0.208 0.042 265.755);
  --night-muted: oklch(0.279 0.038 258);
  --night-ink: oklch(0.984 0.003 247.858);
  --night-soft: oklch(0.704 0.035 250);
  --night-line: oklch(1 0 0 / 10%);
  --night-blue: oklch(0.68 0.11 245);
  --night-on-blue: oklch(0.16 0.03 250);
  --night-amber: oklch(0.78 0.13 78);
  --night-amber-on: oklch(0.2 0.04 66);
  --night-green: oklch(0.68 0.11 163);
  --night-green-wash: oklch(0.3 0.05 165);
  --night-green-ink: oklch(0.93 0.035 165);
  --night-shadow-card: 0 1px 2px oklch(0 0 0 / 0.3), 0 1px 3px oklch(0 0 0 / 0.25);
  --night-shadow-raised: 0 8px 24px -12px oklch(0 0 0 / 0.5);

  /* Forma */
  --radius: 0.625rem;
  --radius-paper: 3px;

  /* Tipografia: base 17px, rapporto 1.25 (terza maggiore) */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.3125rem;
  --step-2: 1.625rem;
  --step-3: clamp(1.75rem, 1.4rem + 1.2vw, 2.125rem);
  --step-4: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --step-5: clamp(2.5rem, 1.5rem + 4.4vw, 5rem);
  --label: 0.8125rem;

  /* Spaziature: base 4px */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Griglia */
  --container: min(100% - 32px, 1180px);
  --measure: 66ch;
  --header-h: 64px;
}

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

html {
  scroll-padding-top: calc(var(--header-h) + var(--space-4));
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.6;
  font-feature-settings: "calt", "kern";
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

h1,
h2,
h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

a {
  color: var(--blue);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 2px;
}

.container {
  width: var(--container);
  margin-inline: auto;
}

.skip {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 30;
  padding: var(--space-3) var(--space-4);
  background: var(--night-amber);
  color: var(--night-amber-on);
  font-weight: 700;
  border-radius: var(--radius-paper);
}

.skip:focus {
  top: var(--space-2);
}

/* Toni delle sezioni */

.tone-night {
  background: var(--night);
  color: var(--night-ink);
}

.tone-night a {
  color: var(--night-blue);
}

.tone-night :focus-visible {
  outline-color: var(--night-blue);
}

.tone-paper {
  background: var(--surface);
  color: var(--ink);
}

.tone-white {
  background: var(--paper);
  color: var(--ink);
}

/* Intestazione con le voci visibili e il menu "Altro" */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--night);
  color: var(--night-ink);
  border-bottom: 1px solid var(--night-line);
}

.site-header a {
  color: var(--night-ink);
}

.site-header :focus-visible {
  outline-color: var(--night-blue);
}

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

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.nav {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.nav-list,
.more-list {
  list-style: none;
  padding: 0;
}

.nav-list {
  display: flex;
  align-items: center;
}

.nav-item {
  display: none;
}

.nav-list a,
.more-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.nav-list a:hover {
  text-decoration: underline;
}

.nav-num {
  color: var(--night-blue);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.nav-more {
  position: relative;
}

.nav-more summary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0 var(--space-4);
  border: 1px solid var(--night-line);
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.nav-more summary::-webkit-details-marker {
  display: none;
}

.nav-more summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.nav-more[open] summary::after {
  transform: translateY(2px) rotate(-135deg);
}

.more-label-rest {
  display: none;
}

.more-list {
  position: absolute;
  right: 0;
  top: calc(100% + var(--space-2));
  min-width: 248px;
  padding: var(--space-2);
  background: var(--night-raised);
  border: 1px solid var(--night-line);
  border-radius: var(--radius);
  box-shadow: var(--night-shadow-raised);
}

.more-list a {
  display: flex;
  border-radius: 6px;
}

.more-list a:hover {
  background: var(--night-muted);
}

.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--night-amber);
  color: var(--night-amber-on);
  font-size: var(--label);
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}

/* Voci che compaiono a scaglioni. Soglie misurate con Chrome (report 020): fino a 639 px solo il menu
 * "Indice"; poi le voci entrano nella barra e quelle che non ci stanno restano in "Altro". */

@media (min-width: 640px) {
  .nav-1,
  .nav-2 {
    display: list-item;
  }

  .more-1,
  .more-2 {
    display: none;
  }

  .more-label-all {
    display: none;
  }

  .more-label-rest {
    display: inline;
  }
}

@media (min-width: 660px) {
  .nav-3 {
    display: list-item;
  }

  .more-3 {
    display: none;
  }
}

@media (min-width: 770px) {
  .nav-4 {
    display: list-item;
  }

  .more-4 {
    display: none;
  }
}

@media (min-width: 910px) {
  .nav-5 {
    display: list-item;
  }

  .more-5 {
    display: none;
  }
}

@media (min-width: 1000px) {
  .nav-6 {
    display: list-item;
  }

  .more-6 {
    display: none;
  }
}

@media (min-width: 1085px) {
  .nav-7 {
    display: list-item;
  }

  .more-7 {
    display: none;
  }
}

@media (min-width: 1205px) {
  .nav-8 {
    display: list-item;
  }

  .more-8 {
    display: none;
  }
}

@media (min-width: 1230px) {
  .nav-9 {
    display: list-item;
  }

  .nav-more {
    display: none;
  }
}

/* Hero */

.hero {
  padding: var(--space-8) 0 var(--space-9);
}

.hero-grid {
  display: grid;
  gap: var(--space-9);
}

.eyebrow {
  color: var(--night-soft);
  font-size: 0.9375rem;
  max-width: 34em;
}

h1 {
  margin-top: var(--space-5);
  font-size: var(--step-5);
  line-height: 1.02;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

h1 mark {
  background: var(--night-amber);
  color: var(--night-amber-on);
  padding: 0 0.1em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.lede {
  margin-top: var(--space-6);
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 32em;
}

.facts {
  display: flex;
  flex-wrap: wrap;
  margin-top: var(--space-6);
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--night-line);
  list-style: none;
  font-size: 0.9375rem;
  font-weight: 600;
}

.facts {
  gap: var(--space-2) var(--space-6);
}

.facts li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.facts li::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--night-amber);
  border-radius: 1px;
}

.contact {
  margin-top: var(--space-5);
  color: var(--night-soft);
}

/* Capitoli */

.chapter {
  padding: var(--space-8) 0;
}

.chapter-head {
  border-top: 3px solid currentColor;
  padding-top: var(--space-5);
  margin-bottom: var(--space-7);
}

.chapter-label {
  display: inline-block;
  padding: 1px var(--space-2);
  background: var(--amber);
  color: var(--amber-on);
  font-size: var(--label);
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 2px;
}

.tone-night .chapter-label {
  background: var(--night-amber);
  color: var(--night-amber-on);
}

h2 {
  margin-top: var(--space-4);
  font-size: var(--step-4);
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.chapter-intro {
  margin-top: var(--space-4);
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 34em;
}

.tone-white .chapter-intro {
  color: var(--ink-soft);
}

/* --ink-soft arriva a 4.5:1 solo su --paper: nei toni --surface il testo resta --ink. */
.tone-paper .chapter-intro {
  color: var(--ink);
}

.tone-night .chapter-intro {
  color: var(--night-soft);
}

.chapter-short .split p + p {
  margin-top: var(--space-4);
}

.body-large {
  font-size: var(--step-1);
  line-height: 1.5;
  max-width: 30em;
}

.body-large + .body-large {
  margin-top: var(--space-5);
}

.split {
  display: grid;
  gap: var(--space-7);
}

/* Figure: fogli di carta con ombra e lieve rotazione, una descrizione unica per lettore di schermo. */

main {
  counter-reset: figura;
}

.figure {
  counter-increment: figura;
  cursor: default;
}

.art {
  position: relative;
  padding: var(--space-3) var(--space-2);
}

figcaption {
  margin-top: var(--space-6);
  font-size: var(--step--1);
  color: var(--ink);
}

figcaption::before {
  content: "Fig. " counter(figura) " · ";
  font-weight: 700;
}

.tone-night figcaption {
  color: var(--night-soft);
}

.paper {
  position: relative;
  padding: var(--space-6);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-paper);
  box-shadow: var(--shadow-card), var(--shadow-raised), var(--shadow-raised);
}

.tone-night .paper {
  box-shadow: var(--night-shadow-card), var(--night-shadow-raised), var(--night-shadow-raised);
}

/* Angolo piegato in alto a destra. */
.paper::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 26px;
  height: 26px;
  background: linear-gradient(225deg, var(--surface) 50%, var(--line) 50%);
  border-bottom-left-radius: 2px;
}

.tone-night .paper::after {
  background: linear-gradient(225deg, var(--night) 50%, var(--line) 50%);
}

.tone-white .paper::after {
  background: linear-gradient(225deg, var(--paper) 50%, var(--line) 50%);
}

.paper-tilt-left {
  transform: rotate(-1.4deg);
}

.paper-tilt-right {
  transform: rotate(1.2deg);
}

.paper-kicker {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.paper-title {
  margin-top: var(--space-1);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.paper-lines {
  display: grid;
  gap: 9px;
  margin: var(--space-5) 0;
}

.paper-lines span {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--line);
}

.paper-lines span:nth-child(2) {
  width: 88%;
}

.paper-lines span:nth-child(3) {
  width: 62%;
}

.paper mark {
  background: var(--amber);
  color: var(--ink);
  padding: 0 0.15em;
  border-radius: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.annotated {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  font-weight: 600;
}

/* Rimando a margine: file e pagina da cui arriva il dato. */
.note {
  display: inline-block;
  padding-left: var(--space-2);
  border-left: 2px solid var(--blue);
  color: var(--blue);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.slip {
  position: relative;
  padding: var(--space-5);
  border-radius: var(--radius-paper);
  border-top: 6px solid;
  font-size: 0.9375rem;
  box-shadow: var(--shadow-card), var(--shadow-raised);
}

.tone-night .slip {
  box-shadow: var(--night-shadow-card), var(--night-shadow-raised);
}

.slip-amber {
  background: var(--amber-wash);
  color: var(--amber-ink);
  border-top-color: var(--amber);
}

.slip-green {
  background: var(--green-wash);
  color: var(--green-ink);
  border-top-color: var(--green);
}

.slip-tilt-right {
  transform: rotate(1.8deg);
}

.slip-tilt-left {
  transform: rotate(-1deg);
}

.slip-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--amber-on);
}

.slip-text {
  margin-top: var(--space-2);
  font-weight: 600;
  color: var(--amber-on);
}

.slip-done {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-weight: 600;
}

.slip-amber .slip-done {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--amber);
  color: var(--green-ink);
}

.slip-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.slip-fields dt {
  font-size: 0.75rem;
  font-weight: 600;
}

.slip-fields dd {
  margin-top: 2px;
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--amber-on);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.tick {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--green);
}

.tick::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border-right: 2px solid var(--on-blue);
  border-bottom: 2px solid var(--on-blue);
  transform: rotate(45deg);
}

/* Hero: il foglietto ambra sopra la scheda. */
.art-hero .slip {
  margin: calc(var(--space-6) * -1) var(--space-2) 0 var(--space-7);
}

/* Passo 1: fogli impilati. */
.art-stack {
  padding-top: var(--space-5);
}

.paper-back {
  position: absolute;
  inset: var(--space-5) var(--space-2) var(--space-3);
}

.paper-back-1 {
  transform: rotate(-2.6deg) translate(-6px, 4px);
}

.paper-back-2 {
  transform: rotate(-5deg) translate(-12px, 10px);
}

.file-list {
  list-style: none;
  padding: 0;
  margin-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.file-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  font-weight: 500;
}

.file-list li span:first-child {
  overflow-wrap: anywhere;
}

.file-list li span:last-child {
  color: var(--ink-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.ledger {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.ledger div {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.ledger dt {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.ledger dd + dd {
  margin-top: var(--space-2);
}

.ledger dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  margin-top: 2px;
  font-weight: 600;
}

.art-slips .slip-green {
  margin: calc(var(--space-3) * -1) var(--space-6) 0 var(--space-4);
}

.paper-mail {
  border-top: 6px solid var(--blue);
}

.mail-from {
  font-size: 0.8125rem;
  color: var(--ink-soft);
}

.mail-subject {
  margin-top: var(--space-1);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.mail-rows {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-4);
}

.mail-rows div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.mail-rows dt {
  font-weight: 700;
}

/* Cartella del nucleo, con la linguetta. */
.paper-folder {
  margin-top: var(--space-4);
  border-top: 6px solid var(--household);
}

.paper-folder::before {
  content: "";
  position: absolute;
  top: -20px;
  left: var(--space-6);
  width: 120px;
  height: 14px;
  background: var(--household);
  border-radius: 6px 6px 0 0;
}

.people {
  list-style: none;
  padding: 0;
  margin-top: var(--space-5);
  border-top: 1px solid var(--line);
}

.people li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.people em {
  font-weight: 500;
  color: var(--ink-soft);
}

.initial {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--household);
  color: var(--on-blue);
  font-size: 0.875rem;
  font-weight: 700;
}

.initial-empty {
  background: var(--paper);
  border: 2px dashed var(--ink-soft);
}

/* Capitolo 1: i passi */

.step-list {
  list-style: none;
  padding: 0;
  counter-reset: none;
}

.step {
  padding: var(--space-5) 0;
  border-top: 1px solid var(--line);
}

.step:first-child {
  padding-top: 0;
  border-top: 0;
}

.step-number {
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.step h3 {
  margin-top: var(--space-2);
  font-size: var(--step-2);
  letter-spacing: -0.03em;
}

.step p:last-child {
  margin-top: var(--space-3);
  max-width: 34em;
}

/* Capitolo 2: i campi della scheda */

.fields {
  display: grid;
  border-top: 3px solid var(--ink);
}

.fields div {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--line);
}

.fields dt {
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.callout {
  margin-top: var(--space-7);
  padding: var(--space-5) var(--space-6);
  border-left: 6px solid var(--blue);
  background: var(--surface);
  max-width: 48em;
}

.callout p + p {
  margin-top: var(--space-2);
  font-weight: 700;
}

/* Capitolo 3: domanda e risposta sul foglio */

.qa-question {
  margin-top: var(--space-1);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.qa-kicker {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.qa-answer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-1);
  font-weight: 500;
}

/* Capitolo 5: foglietto e email affiancati */

.art-pair {
  display: grid;
  gap: var(--space-5);
}

/* Elenchi con il visto (piani) e con il trattino (capitolo 8) */

.marks {
  list-style: none;
  padding: 0;
}

.marks li {
  position: relative;
  padding-left: 34px;
}

.marks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}

.marks-yes li::before {
  background: var(--green);
}

.marks-yes li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: calc(0.2em + 4px);
  width: 5px;
  height: 10px;
  border-right: 2px solid var(--on-blue);
  border-bottom: 2px solid var(--on-blue);
  transform: rotate(45deg);
}

.marks-no li::before {
  background: var(--night-amber);
}

.marks-no li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: calc(0.2em + 10px);
  width: 10px;
  height: 2px;
  background: var(--night-amber-on);
}

.limits-list {
  display: grid;
  gap: var(--space-5);
  font-size: var(--step-1);
  line-height: 1.45;
  max-width: 44em;
}

/* Art. 4: i listini */

.plans {
  display: grid;
  gap: var(--space-6);
}

.plan {
  padding: var(--space-6);
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-paper);
  border-top: 8px solid var(--ink-soft);
  box-shadow: var(--shadow-card), var(--shadow-raised), var(--shadow-raised);
}

.plan-premium {
  border-top-color: var(--blue);
}

.plan h3 {
  font-size: var(--step-2);
  letter-spacing: -0.03em;
}

.price {
  margin-top: var(--space-4);
  font-size: var(--step-4);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.price span {
  font-size: var(--step-0);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.price-note {
  margin-top: var(--space-3);
  color: var(--ink-soft);
}

.plan .marks {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
}

/* Art. 5: domande */

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: var(--space-4) var(--space-8) var(--space-4) 0;
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::before,
.faq summary::after {
  content: "";
  position: absolute;
  right: var(--space-2);
  top: 50%;
  width: 16px;
  height: 2px;
  background: var(--blue);
}

.faq summary::after {
  transform: rotate(90deg);
}

.faq details[open] summary::after {
  transform: rotate(0deg);
}

.faq summary:hover {
  color: var(--blue);
}

.faq p {
  padding-bottom: var(--space-5);
  max-width: var(--measure);
}

/* Art. 6: informativa */

.legal {
  max-width: var(--measure);
}

.legal h3 {
  margin-top: var(--space-6);
  font-size: var(--step-0);
  letter-spacing: 0;
}

.legal > p:first-child {
  font-size: var(--step-1);
  line-height: 1.5;
}

.legal p {
  margin-top: var(--space-2);
}

.chapter-head .legal-updated {
  margin-top: var(--space-4);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Piè di pagina */

.site-footer {
  padding: var(--space-8) 0 var(--space-7);
  border-top: 1px solid var(--night-line);
  font-size: 0.9375rem;
}

.footer-grid {
  display: grid;
  gap: var(--space-5);
}

.footer-brand {
  font-size: var(--step-2);
  font-weight: 700;
  letter-spacing: -0.03em;
}

.footer-note {
  margin-top: var(--space-2);
  color: var(--night-ink);
}

.footer-links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-5);
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.fine {
  color: var(--night-soft);
  font-size: var(--step--1);
}

.fine small {
  font-size: inherit;
}

.fine a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Pagina non trovata */

.notfound {
  padding: var(--space-10) 0;
}

.notfound p {
  margin-top: var(--space-4);
  font-size: var(--step-1);
}

/* Schermi medi e larghi */

@media (min-width: 780px) {
  :root {
    --container: min(100% - 64px, 1180px);
  }

  .hero {
    padding: var(--space-9) 0 var(--space-10);
  }

  .chapter {
    padding: var(--space-9) 0;
  }

  .plans {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .chapter-short {
    padding: var(--space-8) 0;
  }

  .split {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    gap: var(--space-8);
    align-items: center;
  }

  .split-faq,
  .split-legal {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    align-items: start;
  }

  /* Sui telefoni basta il filetto del capitolo; affiancate, le domande hanno il loro. */
  .faq {
    border-top: 3px solid var(--ink);
  }

  .split-faq .chapter-head,
  .split-legal .chapter-head {
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
  }

  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .figure-hero {
    max-width: 560px;
  }
}

@media (min-width: 1080px) {
  .footer-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
  }

  .figure-hero {
    max-width: none;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center;
    gap: var(--space-8);
  }
}