/* ═══════════════════════════════════════════════════════════════
   Studio — Lu Taormina
   Impostazione da scheda tecnica d'officina. I colori stanno tutti
   nei token qui sotto, con i tre stati del tema. Non scrivere mai un
   colore dentro una media query.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --paper:   #F6F7F8;
  --surface: #FFFFFF;
  --sunk:    #EDEFF1;
  --ink:     #141C24;
  --steel:   #56646F;
  --faint:   #82909C;
  --rule:    #D4DADF;
  --hair:    #E5E9EC;
  --brass:   #A9761F;
  --on-brass:#FFFFFF;
  --brass-soft: rgba(169, 118, 31, 0.09);
  --flag:    #A2402C;
  --flag-soft: rgba(162, 64, 44, 0.08);
  --good:    #2F6B54;
  --good-soft: rgba(47, 107, 84, 0.09);
  --shadow: 0 1px 2px rgba(20, 28, 36, 0.06), 0 8px 24px rgba(20, 28, 36, 0.08);

  /* Excel: cromatura sua, uguale nei due temi — è una citazione, non un tema */
  --xl-green: #107C41;
  --xl-green-dark: #0E6B38;
  --xl-chrome: #F3F2F1;
  --xl-chrome-line: #D8D6D4;
  --xl-cell-line: #D4D4D4;
  --xl-head: #E9E8E7;
  --xl-text: #2B2B2B;
  --xl-mute: #6B6B6B;
  --xl-sel: #217346;

  --display: "IBM Plex Sans Condensed", "Helvetica Neue", Arial, sans-serif;
  --body: "Source Serif 4", Georgia, "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  --measure: 63ch;
  --rail: 8.5rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #0F151B;
    --surface: #161E25;
    --sunk:    #0A0F14;
    --ink:     #E2E8ED;
    --steel:   #9CA9B4;
    --faint:   #6C7A86;
    --rule:    #2A343D;
    --hair:    #1F282F;
    --brass:   #D2A048;
    --on-brass:#0F151B;
    --brass-soft: rgba(210, 160, 72, 0.12);
    --flag:    #D97A62;
    --flag-soft: rgba(217, 122, 98, 0.11);
    --good:    #6FB394;
    --good-soft: rgba(111, 179, 148, 0.11);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.45);
  }
}

:root[data-theme="dark"] {
  --paper:   #0F151B;
  --surface: #161E25;
  --sunk:    #0A0F14;
  --ink:     #E2E8ED;
  --steel:   #9CA9B4;
  --faint:   #6C7A86;
  --rule:    #2A343D;
  --hair:    #1F282F;
  --brass:   #D2A048;
  --on-brass:#0F151B;
  --brass-soft: rgba(210, 160, 72, 0.12);
  --flag:    #D97A62;
  --flag-soft: rgba(217, 122, 98, 0.11);
  --good:    #6FB394;
  --good-soft: rgba(111, 179, 148, 0.11);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.45);
}

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

.sheet { max-width: 66rem; margin: 0 auto; padding: 0 1.75rem 5rem; }

/* ─── Griglia: colonnino a sinistra, contenuto a destra ─── */
.row {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
  padding: 3.5rem 0;
  border-top: 1px solid var(--rule);
}
.row:first-of-type { border-top: none; }

.mark {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  position: sticky;
  top: 1.75rem;
}
.mark b { color: var(--brass); font-weight: 600; }

.col { min-width: 0; display: flex; flex-direction: column; gap: 1.4rem; }
.col.tight { gap: 1rem; }

/* ─── Tipografia ─── */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  text-wrap: balance;
  margin: 0;
  line-height: 1.09;
  letter-spacing: -0.012em;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.3rem); font-weight: 700; max-width: 20ch; }
h2 { font-size: clamp(1.45rem, 3vw, 1.95rem); }
h3 { font-size: 1.16rem; letter-spacing: 0; }
h4 { font-size: 1rem; letter-spacing: 0; }
p  { margin: 0; max-width: var(--measure); }
a  { color: var(--ink); text-underline-offset: 3px; text-decoration-color: var(--brass); }
a:hover { color: var(--brass); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
strong { font-weight: 600; }

.lede  { font-size: 1.16rem; color: var(--steel); }
.small { font-size: 0.94rem; color: var(--steel); }
.tiny  { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--faint); }

/* ─── Testata e marchio ─── */
.masthead {
  display: flex; flex-wrap: wrap; gap: 0.7rem 1.5rem;
  align-items: center; justify-content: space-between;
  padding: 1.6rem 0 1.4rem;
  font-family: var(--mono); font-size: 0.73rem;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint);
}
.brand { display: flex; align-items: center; gap: 0.65rem; }
a.brand { text-decoration: none; }
a.brand:hover b { color: var(--brass); }
.brand svg { flex: none; display: block; }
.brand b {
  font-family: var(--display); font-size: 1.05rem;
  letter-spacing: 0.01em; font-weight: 600; color: var(--ink);
  text-transform: none;
}
.brand i {
  font-style: normal; font-family: var(--mono); font-size: 0.66rem;
  color: var(--faint); display: block; letter-spacing: 0.08em;
  text-transform: uppercase; margin-top: 0.05rem;
}
.masthead nav { display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: center; }
.masthead nav a { text-decoration: none; color: var(--faint); }
.masthead nav a:hover { color: var(--brass); }

/* ─── Eroe ─── */
.dim { display: flex; align-items: center; gap: 0.7rem; max-width: 31rem; margin-top: 0.2rem; color: var(--brass); }
.dim::before, .dim::after { content: ""; flex: none; width: 1px; height: 0.85rem; background: currentColor; }
.dim i { flex: 1 1 auto; height: 1px; background: currentColor; }
.dim span { flex: none; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; }

.actions { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; align-items: center; }
.cta {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--display); font-weight: 600;
  font-size: 1rem; letter-spacing: 0.01em; padding: 0.72rem 1.4rem;
  background: var(--ink); color: var(--paper);
  text-decoration: none; border: 1px solid var(--ink);
}
.cta:hover { background: var(--brass); border-color: var(--brass); color: var(--on-brass); }
.cta-quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.cta-quiet:hover { background: transparent; color: var(--brass); border-color: var(--brass); }

/* ═══ LA FINESTRA DI EXCEL ═══════════════════════════════════
   Cromatura fissa nei due temi: è la citazione di un programma
   che ha i suoi colori, non un elemento del sito. */
.xl {
  background: var(--xl-chrome);
  border: 1px solid var(--xl-chrome-line);
  border-radius: 5px;
  overflow: hidden;
  box-shadow: var(--shadow);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  color: var(--xl-text);
  display: flex; flex-direction: column;
  min-width: 0;
}
.xl-title {
  background: var(--xl-green);
  color: #FFFFFF;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.68rem;
}
.xl-title .x {
  flex: none; width: 1.05rem; height: 1.05rem;
  background: #FFFFFF; color: var(--xl-green);
  border-radius: 2px; display: grid; place-items: center;
  font-weight: 700; font-size: 0.68rem;
}
.xl-title .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xl-title .btns { flex: none; display: flex; gap: 0.55rem; opacity: 0.85; letter-spacing: 0.1em; }
.xl-ribbon {
  display: flex; gap: 0.9rem; padding: 0.35rem 0.7rem 0;
  background: var(--xl-chrome); border-bottom: 1px solid var(--xl-chrome-line);
  color: var(--xl-mute); font-size: 0.66rem; overflow-x: auto;
}
.xl-ribbon span { flex: none; padding-bottom: 0.3rem; border-bottom: 2px solid transparent; }
.xl-ribbon span.on { color: var(--xl-green); border-bottom-color: var(--xl-green); font-weight: 600; }
.xl-fx {
  display: flex; align-items: stretch; gap: 0;
  background: #FFFFFF; border-bottom: 1px solid var(--xl-chrome-line);
  font-family: var(--mono); font-size: 0.63rem; min-width: 0;
}
.xl-fx .cellref {
  flex: none; width: 4.2rem; padding: 0.3rem 0.45rem;
  border-right: 1px solid var(--xl-chrome-line); color: var(--xl-text);
}
.xl-fx .fxi { flex: none; padding: 0.3rem 0.5rem; color: var(--xl-mute); border-right: 1px solid var(--xl-chrome-line); font-style: italic; }
.xl-fx .formula { flex: 1; min-width: 0; padding: 0.3rem 0.5rem; overflow-x: auto; white-space: nowrap; color: var(--xl-text); }
.xl-grid { background: #FFFFFF; overflow-x: auto; }
.xl-grid table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.xl-grid th, .xl-grid td {
  border: 1px solid var(--xl-cell-line);
  padding: 0.2rem 0.4rem; white-space: nowrap; text-align: left;
  color: var(--xl-text);
}
.xl-grid thead th, .xl-grid td.rn {
  background: var(--xl-head); color: var(--xl-mute);
  text-align: center; font-weight: 400; width: 2.2rem;
}
.xl-grid td.num { text-align: right; }
.xl-grid td.err { color: #C0392B; background: #FDEDEA; font-weight: 600; }
.xl-grid td.sel { outline: 2px solid var(--xl-sel); outline-offset: -2px; }
.xl-tabs {
  display: flex; align-items: flex-end; gap: 1px;
  background: var(--xl-chrome); border-top: 1px solid var(--xl-chrome-line);
  padding: 0.25rem 0.5rem 0; overflow-x: auto; font-size: 0.65rem;
}
.xl-tabs span {
  flex: none; padding: 0.25rem 0.55rem; color: var(--xl-mute);
  border: 1px solid transparent; border-bottom: none; white-space: nowrap;
}
.xl-tabs span.on { background: #FFFFFF; color: var(--xl-green); font-weight: 600; border-color: var(--xl-chrome-line); }
.xl-tabs span.dupe { color: #C0392B; }
.xl-tabs span.rest { color: var(--xl-mute); opacity: 0.7; }
.xl-status {
  background: var(--xl-green); color: #FFFFFF; opacity: 0.95;
  padding: 0.22rem 0.6rem; font-size: 0.62rem;
  display: flex; justify-content: space-between; gap: 1rem;
}

/* ═══ LA FINESTRA DELL'APP ═══ */
.ui {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 5px; overflow: hidden;
  box-shadow: var(--shadow);
  display: flex; flex-direction: column; min-width: 0;
  font-family: var(--display); font-size: 0.8rem;
}
.ui-chrome {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.42rem 0.6rem; background: var(--sunk);
  border-bottom: 1px solid var(--hair);
}
.ui-chrome .dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--rule); flex: none; }
.ui-chrome .addr {
  flex: 1; min-width: 0; margin-left: 0.35rem;
  font-family: var(--mono); font-size: 0.6rem; color: var(--faint);
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: 999px; padding: 0.12rem 0.6rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ui-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: 0.65rem 0.85rem; border-bottom: 1px solid var(--hair);
}
.ui-head b { font-size: 0.95rem; font-weight: 600; }
.ui-head span { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.ui-body { padding: 0.85rem; display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.ui-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem;
  align-items: baseline; border-bottom: 1px dotted var(--hair); padding-bottom: 0.35rem;
}
.ui-row span { color: var(--steel); }
.ui-row b { font-family: var(--mono); font-size: 0.75rem; font-variant-numeric: tabular-nums; font-weight: 500; }
.ui-total {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.6rem;
  align-items: baseline; margin-top: auto; padding-top: 0.55rem; border-top: 2px solid var(--ink);
}
.ui-total span { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint); }
.ui-total b { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ui-ok {
  font-family: var(--mono); font-size: 0.62rem; color: var(--good);
  display: flex; align-items: center; gap: 0.35rem; letter-spacing: 0.03em;
}

/* ═══ IL CONFRONTO PRIMA/DOPO ═══ */
.swap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1rem; align-items: center;
}
.swap > .arrow {
  flex: none; display: grid; place-items: center; gap: 0.3rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--brass); text-align: center;
}
.swap > .arrow svg { display: block; }
.stack { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; }
.stack > .tag {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.5rem;
}
.stack > .tag::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.stack.was > .tag { color: var(--flag); }
.stack.now > .tag { color: var(--good); }

/* ═══ SCHEDE PROBLEMA, con icona ═══ */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.card { background: var(--surface); padding: 1.2rem 1.25rem; display: flex; flex-direction: column; gap: 0.55rem; }
.card .ico { color: var(--brass); }
.card .ico svg { display: block; }
.card h3 { font-size: 1.02rem; }
.card p { font-size: 0.92rem; color: var(--steel); max-width: none; }

/* ═══ PORTFOLIO ═══ */
.works { display: flex; flex-direction: column; gap: 1.5rem; }
.work {
  border: 1px solid var(--rule); background: var(--surface);
  padding: 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 1.1rem;
}
.work-head { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; align-items: baseline; justify-content: space-between; }
.work-head .kind { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.work p { max-width: var(--measure); }
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1px; background: var(--hair); border: 1px solid var(--hair);
}
.facts div { background: var(--surface); padding: 0.7rem 0.85rem; }
.facts dt { font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
.facts dd { margin: 0.2rem 0 0; font-family: var(--display); font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.facts dd.win { color: var(--good); }
.facts .to, .facts .win { font-weight: 700; }
.facts .to { color: var(--faint); font-weight: 400; }

/* ═══ Liste ═══ */
.findings { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.findings li { position: relative; padding-left: 1.6rem; font-size: 0.96rem; color: var(--steel); max-width: var(--measure); }
.findings li::before {
  content: "!"; position: absolute; left: 0; top: 0.15em;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600;
  color: var(--flag); border: 1px solid var(--flag);
  width: 1.05rem; height: 1.05rem; display: grid; place-items: center;
}
.findings code, .under code, .notes code {
  font-family: var(--mono); font-size: 0.87em; color: var(--ink);
  background: var(--sunk); padding: 0.05em 0.3em;
}

.notes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.notes li { position: relative; padding-left: 1.1rem; font-size: 0.96rem; color: var(--steel); max-width: var(--measure); }
.notes li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.5rem; height: 1px; background: var(--brass); }
.notes b { color: var(--ink); font-weight: 600; }

.wins { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.wins li { position: relative; padding-left: 1.6rem; font-size: 0.96rem; color: var(--steel); max-width: var(--measure); }
.wins li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--good); font-family: var(--mono); font-size: 0.8rem; font-weight: 600;
}

.ledger { border-top: 1px solid var(--rule); margin: 0; }
.ledger div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 0.4rem 0.9rem; align-items: baseline;
  padding: 0.6rem 0; border-bottom: 1px solid var(--hair);
  font-family: var(--mono); font-size: 0.78rem; font-variant-numeric: tabular-nums;
}
.ledger dt { color: var(--steel); font-size: 0.94rem; font-family: var(--body); }
.ledger .was { color: var(--flag); }
.ledger .arw { color: var(--faint); }
.ledger .now { color: var(--good); font-weight: 600; }

.callout { border-left: 2px solid var(--brass); background: var(--brass-soft); padding: 1rem 1.2rem; max-width: var(--measure); }
.callout p { font-size: 0.99rem; }
.under { font-family: var(--mono); font-size: 0.71rem; color: var(--faint); border-top: 1px solid var(--hair); padding-top: 0.6rem; }

/* ═══ Tabella dei costi ═══ */
.compare-x { overflow-x: auto; }
table.compare { border-collapse: collapse; width: 100%; min-width: 33rem; font-size: 0.93rem; }
table.compare th, table.compare td { text-align: left; padding: 0.7rem 0.9rem 0.7rem 0; border-bottom: 1px solid var(--hair); vertical-align: baseline; }
table.compare thead th { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); border-bottom-color: var(--rule); font-weight: 500; }
table.compare tbody th { font-family: var(--body); font-weight: 400; color: var(--steel); }
table.compare td.fig { font-family: var(--mono); font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--steel); }
table.compare tr.mine th { font-family: var(--display); font-size: 1.05rem; font-weight: 600; color: var(--ink); border-bottom: none; padding-top: 0.9rem; }
table.compare tr.mine td { border-bottom: none; padding-top: 0.9rem; }
table.compare tr.mine td.fig { color: var(--brass); font-weight: 600; }

/* ═══ Passi ═══ */
.steps { display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: 0.35rem 1rem; align-items: baseline; padding: 1.25rem 0; border-top: 1px solid var(--hair); }
.step:first-child { border-top: none; padding-top: 0.2rem; }
.step .no { font-family: var(--mono); font-size: 0.75rem; font-weight: 600; color: var(--brass); }
.step p { grid-column: 2 / -1; font-size: 0.96rem; color: var(--steel); }
.price { font-family: var(--mono); font-size: 0.92rem; font-variant-numeric: tabular-nums; color: var(--brass); white-space: nowrap; }

/* ═══ Domande ═══ */
details { border-bottom: 1px solid var(--hair); }
details summary {
  cursor: pointer; list-style: none; padding: 0.85rem 0;
  font-family: var(--display); font-weight: 600; font-size: 1.04rem;
  display: flex; align-items: baseline; gap: 0.7rem;
}
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "+"; font-family: var(--mono); color: var(--brass); font-size: 0.9rem; flex: none; }
details[open] summary::before { content: "\2212"; }
details p { padding: 0 0 0.95rem 1.4rem; font-size: 0.97rem; color: var(--steel); }

footer {
  border-top: 1px solid var(--rule); padding-top: 1.4rem;
  font-family: var(--mono); font-size: 0.71rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--faint);
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between;
}

/* ═══ Entrata ═══ */
.rise { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) backwards; }
.rise:nth-child(2) { animation-delay: 0.07s; }
.rise:nth-child(3) { animation-delay: 0.14s; }
.rise:nth-child(4) { animation-delay: 0.21s; }
.rise:nth-child(5) { animation-delay: 0.28s; }
.rise:nth-child(6) { animation-delay: 0.35s; }
@keyframes rise { from { opacity: 0; transform: translateY(0.55rem); } }
@media (prefers-reduced-motion: reduce) { .rise { animation: none; } }

@media (max-width: 52rem) {
  .swap { grid-template-columns: minmax(0, 1fr); }
  .swap > .arrow { flex-direction: row; gap: 0.5rem; }
  .swap > .arrow svg { transform: rotate(90deg); }
}

@media (max-width: 46rem) {
  :root { --rail: 0; }
  .row { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 2.5rem 0; }
  .mark { position: static; flex-direction: row; gap: 0.8rem; }
  body { font-size: 16px; }
  .sheet { padding: 0 1.1rem 4rem; }
  .work { padding: 1.2rem 1.1rem; }
  .ledger div { font-size: 0.72rem; }
  .step { grid-template-columns: 1.8rem minmax(0, 1fr); }
  .step .price { grid-column: 2; }
  .masthead nav { display: none; }
}

/* ═══ NUMERI DI MERCATO ═══ */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.stat { background: var(--surface); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.3rem; }
.stat b { font-family: var(--display); font-size: 2.1rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--flag); }
.stat span { font-size: 0.9rem; color: var(--steel); }
.stat i { font-style: normal; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.05em; color: var(--faint); margin-top: auto; padding-top: 0.4rem; }

/* ═══ CASI STUDIO ═══ */
.phase { display: flex; flex-direction: column; gap: 0.7rem; }
.phase > .lbl {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.11em; text-transform: uppercase; color: var(--brass);
  display: flex; align-items: center; gap: 0.55rem;
}
.phase > .lbl::before {
  content: attr(data-n); flex: none;
  width: 1.25rem; height: 1.25rem; display: grid; place-items: center;
  border: 1px solid var(--brass); font-size: 0.6rem;
}
.phase > .lbl::after { content: ""; flex: 1; height: 1px; background: var(--hair); }
.case-body { display: flex; flex-direction: column; gap: 0.9rem; }

.pull {
  font-family: var(--display); font-size: 1.22rem; font-weight: 600;
  line-height: 1.32; color: var(--ink); max-width: 46ch;
  border-left: 2px solid var(--flag); padding-left: 1rem;
}
.pull.good { border-left-color: var(--good); }

/* ═══ MVP / estro ═══ */
.mvp { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (max-width: 52rem) { .mvp { grid-template-columns: minmax(0, 1fr); } }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chips span {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.05em;
  color: var(--steel); border: 1px solid var(--rule); padding: 0.22rem 0.55rem;
}

/* ═══ Nota fiscale ═══ */
.aside {
  border: 1px dashed var(--rule); padding: 0.9rem 1.1rem;
  font-size: 0.92rem; color: var(--steel); max-width: var(--measure);
}
.aside b { color: var(--ink); }

/* ═══ AUTOPSIA ═══ */
.facts dd small {
  display: block; margin-top: 0.3rem;
  font-family: var(--mono); font-size: 0.6rem; font-weight: 400;
  letter-spacing: 0.04em; color: var(--faint);
}
.drop {
  border: 2px dashed var(--rule); background: var(--surface);
  padding: 2.6rem 1.5rem; text-align: center; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 0.7rem;
  transition: border-color .15s, background .15s;
}
.drop:hover, .drop.over, .drop:focus-visible { border-color: var(--brass); background: var(--brass-soft); }
.drop svg { color: var(--brass); }
.drop b { font-family: var(--display); font-size: 1.16rem; font-weight: 600; }
.drop span { font-size: 0.94rem; color: var(--steel); max-width: 40ch; }
.drop i { font-style: normal; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em; color: var(--faint); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.verdict { display: flex; flex-direction: column; gap: 0.35rem; border-left: 3px solid var(--rule); padding: 0.9rem 1.1rem; }
.verdict b { font-family: var(--display); font-size: 1.7rem; font-weight: 700; line-height: 1; }
.verdict span { color: var(--steel); font-size: 0.97rem; }
.verdict i { font-style: normal; font-family: var(--mono); font-size: 0.68rem; color: var(--faint); }
.verdict.bad { border-left-color: var(--flag); } .verdict.bad b { color: var(--flag); }
.verdict.warn { border-left-color: var(--brass); } .verdict.warn b { color: var(--brass); }
.verdict.ok { border-left-color: var(--good); } .verdict.ok b { color: var(--good); }

.fnds { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.fnd { background: var(--surface); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.4rem; }
.fnd .badge {
  align-self: flex-start; font-family: var(--mono); font-size: 0.6rem;
  letter-spacing: 0.09em; text-transform: uppercase; padding: 0.12rem 0.45rem;
  border: 1px solid currentColor;
}
.fnd.grave .badge { color: var(--flag); }
.fnd.medio .badge { color: var(--brass); }
.fnd h4 { font-size: 1.05rem; }
.fnd p { font-size: 0.95rem; color: var(--steel); max-width: var(--measure); }
.fnd code { font-family: var(--mono); font-size: 0.87em; color: var(--ink); background: var(--sunk); padding: 0.05em 0.3em; }

#report { display: flex; flex-direction: column; gap: 1.3rem; }
#report .callout h4 { margin-bottom: 0.4rem; }
.wait, .err { font-family: var(--mono); font-size: 0.9rem; color: var(--steel); }
.err { color: var(--flag); }
.nojs { border: 1px dashed var(--rule); padding: 0.9rem 1.1rem; font-size: 0.93rem; color: var(--steel); }

/* ═══ REFERTO DEL CHECK-UP ═══ */
.rep-block { display: flex; flex-direction: column; gap: 0.6rem; }
.rep-block h3 { font-size: 1.3rem; }
.rep-block > .small { margin-bottom: 0.2rem; }
.wedge-block h3 { color: var(--brass); }
.fnd.wedge { border-left: 2px solid var(--brass); }
.fnd.wedge h4 { color: var(--ink); }
#report .callout h4 { font-size: 1.1rem; margin-bottom: 0.4rem; }
#report .callout .actions { margin-top: 0.9rem; }

.repfoot { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0; }
.repfoot button {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--steel); cursor: pointer;
  background: transparent; border: 1px solid var(--rule); padding: 0.5rem 0.9rem;
}
.repfoot button:hover { color: var(--brass); border-color: var(--brass); }

/* Il referto si stampa: in una PMI la decisione la prendono in due, e il
   secondo socio quasi mai è quello che ha trascinato il file. */
@media print {
  .masthead nav, .drop, .nojs, .repfoot, .row:not(:first-of-type), footer { display: none !important; }
  body { background: #FFF; color: #000; font-size: 11pt; }
  .sheet { max-width: none; padding: 0; }
  .row { grid-template-columns: 1fr; padding: 0; border: none; }
  .mark, .dim, .lede, h1 { display: none; }
  .masthead { padding: 0 0 0.6rem; border-bottom: 1px solid #999; }
  .verdict, .fnd, .facts div, .callout { break-inside: avoid; }
  .fnds, .facts, .cards { border-color: #999; background: #999; }
  a[href]::after { content: ""; }
}

/* ═══ SCHERMATE VERE ═══
   Le finestre ricostruite in HTML dicono cosa fa il programma; una
   schermata vera dice come è fatto. Servono tutt'e due. */
.shots {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.1rem; align-items: start;
}
.shot { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.shot figcaption {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.05em;
  color: var(--faint);
}
.phone {
  border: 1px solid var(--rule); border-radius: 14px; padding: 0.45rem;
  background: var(--surface); box-shadow: var(--shadow); overflow: hidden;
}
.phone img { display: block; width: 100%; height: auto; border-radius: 8px; }
.frame { border: 1px solid var(--rule); border-radius: 5px; overflow: hidden; box-shadow: var(--shadow); }
.frame img { display: block; width: 100%; height: auto; }
.shots-note { font-family: var(--mono); font-size: 0.68rem; color: var(--faint); }

@media print { .shots { grid-template-columns: repeat(3, 1fr); } }