/* =========================================================
   araldo — design system (revamp 08/09/2026, DESIGN-REVAMP.md)
   Carta, inchiostro e UN verde. Verde solo per ciò che araldo ha
   portato e per «Approva» / «Inizia gratis». Ambra per ciò che aspetta
   te, rosso solo per gli errori. Poppins per le parole, JetBrains Mono
   solo per i numeri grandi dei risultati.
   Sezioni: 1 token · 2 base · 3 componenti · 4 sito · 5 app (legacy,
   il guscio dell'app costruisce sopra in static/css/app-shell.css).

   I TOKEN NON SONO PIÙ QUI: colori, font, raggi, ombre, spazi e misure vivono in un file solo,
   static/css/tokens.css (cantiere chiarezza, V3-PLAN §5). Questo foglio li usa e basta: nessun
   colore e nessun font scritto a mano, così un cantiere «look» cambia tutto toccando tokens.css.
   ========================================================= */
@import url("tokens.079e6c8bdadb.css");

/* ---------- 2. base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased}
@media (min-width:900px){body{font-size:17px}}
b,strong{font-weight:600}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
ul,ol{padding-left:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;color:var(--ink);background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--r-md);padding:0 14px;min-height:48px;width:100%}
textarea{min-height:120px;padding:12px 14px;resize:vertical;line-height:1.45}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:4px}
img,svg{display:block;max-width:100%}
img{height:auto}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.brought{color:var(--green)}

/* scala tipografica: h1 40/48, h2 28/34, h3 20/22, corpo 17-18, note 15 */
.display,.h1{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;line-height:1.1;font-size:40px;max-width:20ch}
.h2{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;line-height:1.18;font-size:28px;max-width:26ch}
.h3{font-family:var(--font-display);font-weight:600;letter-spacing:0;line-height:1.3;font-size:20px}
@media (min-width:900px){.display,.h1{font-size:48px}.h2{font-size:34px}.h3{font-size:22px}}
.lead{font-size:1.05em;line-height:1.55;color:var(--ink-2);max-width:56ch}
.small{font-size:15px;color:var(--ink-2)}
.fine{font-size:15px;color:var(--ink-2)}
.muted{color:var(--ink-2)}
.faint{color:var(--ink-2)}
.accent{color:var(--accent-text)}
p,li{max-width:62ch}

/* ---------- layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
@media (min-width:900px){.wrap{padding:0 32px}}
.section{padding:var(--section) 0}
.section.tight{padding:40px 0}
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media (min-width:760px){.grid-2{grid-template-columns:1fr 1fr}.grid-3{grid-template-columns:repeat(3,1fr)}.grid{gap:20px}}
.stack>*+*{margin-top:var(--stack,12px)}
.row{display:flex;align-items:center;gap:12px}
.between{justify-content:space-between}
.wrapline{flex-wrap:wrap}

/* ---------- 3. componenti ---------- */
/* bottoni del sito: 48px, raggio md, 16px 500. Primario = inchiostro pieno; verde SOLO per Approva e Inizia gratis (.brought) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--r-md);font-weight:500;font-size:16px;line-height:1.2;border:1px solid var(--line-strong);background:var(--bg);color:var(--ink);white-space:nowrap;text-align:center}
.btn:hover{background:var(--bg-2);border-color:var(--ink)}
.btn.primary,.btn.dark{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.btn.primary:hover,.btn.dark:hover{background:var(--br-dark-2);border-color:var(--br-dark-2)}
.btn.brought{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.btn.brought:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.btn.quiet{border-color:transparent;background:transparent;color:var(--ink-2)}
.btn.quiet:hover{color:var(--ink);border-color:transparent;background:var(--bg-3)}
.btn.sm{min-height:var(--btn-h-sm);padding:0 var(--s-2);font-size:var(--text-sm);border-radius:var(--r-sm)}
.btn.lg{min-height:52px;padding:0 28px;font-size:17px}
.btn.block{width:100%}
.btn.danger{color:var(--red);border-color:var(--line)}
.btn:disabled{opacity:.5;cursor:default}
.link{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hint)}
.link:hover{text-decoration-color:var(--ink)}
a.link,button.link{display:inline-block;min-height:24px}
/* un link dentro una frase resta alto quanto la riga; un link che sta DA SOLO (la fila del bottone, la nota
   dei prezzi, le due righe sotto il modulo di accesso) è una cosa che si tocca: 48 px come tutte le altre */
.hero .cta>.link,.plans-note>.link,.auth .after>.link{display:inline-flex;align-items:center;min-height:var(--tap)}

/* badge: pillole 36 px, testo 15 (i token, come dentro l'app). verde «pubblicato», ambra «da approvare», grigio «bozza» */
.pill{display:inline-flex;align-items:center;gap:var(--s-1);min-height:var(--pill-h);padding:var(--s-h) var(--s-1h);border-radius:var(--r-pill);border:1px solid var(--line-strong);font-size:var(--text-sm);font-weight:500;line-height:1.3;color:var(--ink-2);background:var(--bg-2);white-space:normal;text-align:left}
.pill.ok{border-color:transparent;background:var(--green-tint);color:var(--green-dark)}
.pill.warn{border-color:transparent;background:var(--amber-tint);color:var(--amber)}
.pill.bad{border-color:transparent;background:var(--red-tint);color:var(--red)}
.pill.draft,.pill.grey{border-color:transparent;background:var(--bg-3);color:var(--ink-2)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
.badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--amber);color:var(--on-amber);font-family:var(--font-mono);font-size:12px;font-weight:500}
.badge.zero{display:none}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:var(--r-pill);background:var(--card);border:1px solid var(--line);font-size:15px}
.chip button{color:var(--ink-2);font-size:16px;line-height:1}
.chips{display:flex;flex-wrap:wrap;gap:8px}

/* controllo segmentato */
.seg{display:inline-flex;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px;gap:2px}
.seg button{min-height:40px;padding:0 16px;border-radius:var(--r-pill);font-size:15px;font-weight:500;color:var(--ink-2)}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm)}
.seg.wide{display:flex}
.seg.wide button{flex:1;text-align:center}

/* card: bianco, bordo, raggio lg, ombra leggera. Titolo 20px. Niente card dentro card */
.card,.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-sm)}
@media (min-width:900px){.card,.panel{padding:24px}}
.card.pad-sm{padding:14px 16px}
.card>.h3:first-child,.card>h3:first-child,.panel>.h3:first-child{margin-bottom:8px}
.divider{height:1px;background:var(--line);margin:24px 0}

/* passi numerati: cerchio 40px verde, titolo, una riga, mockup accanto da 900px */
.steps{display:grid;gap:40px;counter-reset:s}
.step{display:grid;gap:16px;align-items:center}
.step .k{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;background:var(--green);color:var(--on-green);font-family:var(--font-body);font-weight:600;font-size:18px;line-height:1}
.step h3{font-size:22px;margin:14px 0 8px}
.step p{color:var(--ink-2);max-width:46ch}
@media (min-width:900px){.steps{gap:56px}.step{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}.step:nth-child(even) .step-text{order:2}}

/* stato vuoto: icona + una frase + il bottone che lo fa. Mai una pagina bianca */
.empty{margin-top:22px;padding:32px 20px;border:1px dashed var(--line-strong);border-radius:var(--r-lg);text-align:center;color:var(--ink-2);background:var(--bg-2)}
.empty svg{width:40px;height:40px;margin:0 auto 12px;stroke:var(--green);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.empty b{display:block;color:var(--ink);font-weight:600;font-size:18px;margin-bottom:4px}
.empty .btn{margin-top:16px}

/* toast: in basso, 3 secondi, una frase */
.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(10px);max-width:calc(100vw - 32px);background:var(--ink);color:var(--on-ink);padding:12px 18px;border-radius:var(--r-md);font-size:16px;line-height:1.35;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;box-shadow:var(--shadow-lg)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media (min-width:960px){.toast{bottom:28px}}

/* stepper del setup: 5 passi con etichetta, il corrente pieno, i fatti con spunta */
.stepper{display:flex;gap:8px;padding:0;margin:0;list-style:none;counter-reset:st}
.stepper li{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font-size:13px;color:var(--ink-2);counter-increment:st;position:relative}
.stepper li a{color:inherit;display:contents}
.stepper .dot{width:32px;height:32px;border-radius:50%;border:2px solid var(--line-strong);background:var(--bg-2);display:grid;place-items:center;font-weight:600;font-size:14px;color:var(--ink-2)}
.stepper .dot::before{content:counter(st)}
.stepper .dot svg{display:none;width:16px;height:16px;stroke:var(--on-green);fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.stepper .on .dot{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.stepper .on{color:var(--ink);font-weight:500}
.stepper .done .dot{background:var(--green);border-color:var(--green);color:var(--on-green)}
.stepper .done .dot::before{content:none}
.stepper .done .dot svg{display:block}
.stepper li+li::before{content:"";position:absolute;top:15px;right:calc(50% + 20px);left:calc(-50% + 20px);height:2px;background:var(--line)}
.stepper li.done+li::before{background:var(--green)}
@media (max-width:599px){.stepper li:not(.on) span.lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}

/* tabelle */
.table{width:100%;border-collapse:collapse;font-size:16px}
.table th{text-align:left;font-weight:500;color:var(--ink-2);padding:10px 12px;border-bottom:1px solid var(--line);font-size:15px}
.table td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}
.table tr:last-child td{border-bottom:0}
.table .r{text-align:right}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg-2)}

/* moduli */
.field{margin-top:16px}
.field label{display:block;font-size:15px;color:var(--ink);margin-bottom:6px;font-weight:500}
.field .hint{margin-top:6px;font-size:15px;color:var(--ink-2)}
.field.inline{display:flex;align-items:center;justify-content:space-between;gap:16px}
.field.inline label{margin:0}
.switch{position:relative;width:48px;height:28px;border-radius:14px;background:var(--line-strong);flex:none;transition:background .15s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--knob);transition:transform .15s}
.switch[aria-checked="true"]{background:var(--green)}
.switch[aria-checked="true"]::after{transform:translateX(20px)}
.note{margin-top:10px;font-size:15px;color:var(--ink-2)}
.note.error,.error-note{color:var(--red)}
.callout{padding:14px 16px;border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--r-md);background:var(--bg-2);font-size:16px}
.callout.ok{border-left-color:var(--green)}

/* componenti di brand (scontrino, percorso) */
.br-row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:12px 0;border-bottom:var(--br-tear);font-size:15px;color:var(--br-ink);align-items:baseline}
.br-row__cause{color:var(--br-ink-2)}
.br-row__n{font-family:var(--font-mono);font-weight:500;color:var(--br-green);font-variant-numeric:tabular-nums}
.br-route{display:inline-flex;align-items:center;gap:6px;vertical-align:middle}
.br-route__dot{width:7px;height:7px;border-radius:50%;background:var(--br-ink)}
.br-route__dash{width:22px;border-top:2px dashed var(--br-ink-3)}
.br-route__check{color:var(--br-green)}
.br-route__n{font-family:var(--font-mono);font-weight:500;color:var(--br-green);font-size:13px;margin-left:2px}
.br-route--published .br-route__dash{opacity:.5}
.br-route--published .br-route__check,.br-route--tracked .br-route__check{color:var(--hint)}
.br-route--tracked .br-route__dash{border-top-color:var(--ink-2)}
.br-route--brought .br-route__dash{border-top-color:var(--ink)}
.receipt .br-row{font-size:16px}
.receipt .br-row:last-of-type{border-bottom:0}
.receipt-sum{font-size:18px}

/* canali: .ch-x .ch-linkedin .ch-reddit .ch-meta .ch-facebook .ch-instagram .ch-tiktok .ch-youtube .ch-google .ch-email
   .ch-badge = pillola (tinta 15 % + testo del canale) · .ch-dot = pallino pieno · .ch-bar i = barra piena · .ch-icon = icona piena */
.ch-badge{--c:var(--ink-2);--ct:var(--ink-2)}.ch-badge{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 10px;border-radius:var(--r-pill);font-size:13px;font-weight:500;line-height:1.3;white-space:nowrap;color:var(--ct);background:color-mix(in srgb,var(--c) 15%,transparent)}
.ch-x{--c:var(--ch-x);--ct:var(--ch-x-text)}.ch-linkedin{--c:var(--ch-linkedin);--ct:var(--ch-linkedin-text)}.ch-reddit{--c:var(--ch-reddit);--ct:var(--ch-reddit-text)}
.ch-meta{--c:var(--ch-meta);--ct:var(--ch-meta-text)}.ch-facebook{--c:var(--ch-facebook);--ct:var(--ch-facebook-text)}.ch-instagram{--c:var(--ch-instagram);--ct:var(--ch-instagram-text)}
.ch-tiktok{--c:var(--ch-tiktok);--ct:var(--ch-tiktok-text)}.ch-youtube{--c:var(--ch-youtube);--ct:var(--ch-youtube-text)}.ch-google{--c:var(--ch-google);--ct:var(--ch-google-text)}.ch-email{--c:var(--ch-email);--ct:var(--ch-email-text)}
.ch-badge::before,.ch-dot{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c)}
.ch-badge.lg{min-height:40px;padding:6px 14px;font-size:15px}
.ch-badge.lg::before{width:10px;height:10px}
.ch-icon{color:var(--c)}
.ch-icon svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ch-bar{height:6px;border-radius:3px;background:var(--bg-3);overflow:hidden}
.ch-bar i{display:block;height:100%;background:var(--c,var(--green))}
.ch-list{display:flex;flex-wrap:wrap;gap:8px}

/* interruttore sole/luna */
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--bg-2);color:var(--ink)}
.theme-btn:hover{background:var(--bg-3)}
.theme-btn svg{width:var(--icon);height:var(--icon);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .moon{display:none}
[data-theme="dark"] .theme-btn .sun{display:none}
[data-theme="dark"] .theme-btn .moon{display:block}

/* cornice per i mockup (schermate vere dell'app) */
.frame{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden;max-width:100%}
.frame img{display:block;width:100%;height:auto}
.frame .bar{display:flex;align-items:center;gap:var(--s-1);padding:var(--s-1h) var(--s-2);border-bottom:1px solid var(--line);background:var(--bg-3);font-size:var(--text-sm);color:var(--ink-2)}
.frame .bar i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.frame .bar b{margin-left:6px;font-weight:500;color:var(--ink-2)}
.frame-caption{margin-top:12px;font-size:15px;color:var(--ink-2)}
.video-frame{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:var(--bg-2)}
.video-frame video{display:block;width:100%;height:auto}
.shot-img{display:block;width:100%;height:auto}

/* grafico dei 7 giorni: 160px, assi leggibili */
.chart7{width:100%;height:160px;display:block}
.chart7 .axis{stroke:var(--line);stroke-width:1}
.chart7 .lbl{font-family:var(--font-body);font-size:12px;fill:var(--ink-2)}
.chart7 .bar{fill:var(--green)}
.chart7 .area{fill:var(--green-tint)}
.chart7 .line{fill:none;stroke:var(--green);stroke-width:2}

/* =========================================================
   4. SITO PUBBLICO
   ========================================================= */
/* La testata resta attaccata in alto sul computer, dove avanza schermo. Sul telefono no, e non è una
   rinuncia: «la striscia nera in alto col bottone mi segue per tutta la pagina e mi copre le righe mentre
   scorro: il 49 € me lo sono ritrovato tagliato a metà con al mese nascosto sotto» (Gino, pizzeria). Su
   844 px di schermo una testata alta 64 si mangia l'8 % di ogni schermata per tenere in vista un bottone
   che la pagina ha già in cima e in fondo, con le stesse parole. Il menù resta raggiungibile: si torna su
   con il pollice, come su ogni pagina di questo telefono. */
/* --- cantiere v3-pieghevole (13/09/2026): la soglia della testata larga e' UNA, 1080 px, e sta dove le voci ci
   stanno DAVVERO su una riga. Fino a 1079 la testata e' quella del telefono (marchio, «Inizia gratis», il tasto
   del menu'). Prima la barra intera compariva a 860, ma marchio + quattro voci + lingua + tema + Accedi + Inizia
   gratis misurano 1.061 px con le parole intere: sul Galaxy Fold aperto (~900) «How it works» finiva su TRE righe,
   sul tablet a 1024 su due. Le voci non vanno mai a capo (white-space:nowrap): se non ci stanno, si passa al
   menu' compatto, non si spezzano. tests/test_public_phone.py misura le righe di ogni voce a 820, 880, 904 e 1024. */
/* --- cantiere v3-fold2 (13/09/2026) ---: attaccata in alto da 760 px in su, non solo da 1080. Sul Fold aperto (848-904)
   la testata era quella del telefono ma scorreva via, e con lei «Inizia gratis» e il menu': la ragione di Gino (una
   striscia che si mangia l'8 % di 844 px) vale sul telefono stretto, non su uno schermo da 900 px e quasi 1.100 di
   altezza. Sotto i 760 resta libera. Perche' non copra niente: i titoli, le ancore e il 49 € hanno scroll-margin
   pari alla testata piu' un respiro. tests/test_public_phone.py::test_on_the_open_fold_the_header_stays_and_covers_nothing. */
.site-header{position:static;z-index:30;background:var(--bg-glass);border-bottom:1px solid var(--line)}
@media (min-width:760px){
  .site-header{position:sticky;top:0;backdrop-filter:blur(var(--blur))}
  main [id],main h1,main h2,main h3,main .eur{scroll-margin-top:calc(var(--header-h) + var(--s-2))}
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:var(--s-2)}
.logo{display:inline-flex;align-items:center;flex:0 1 auto;min-width:0;min-height:var(--tap)}
.logo img{height:var(--logo-h);width:auto;max-width:100%;display:block}
.logo .logo-svg{max-width:100%}
.logo-text{font-family:var(--font-display);font-weight:600;font-size:26px;letter-spacing:-.02em;color:var(--ink);line-height:1}
.site-nav{display:none;align-items:center;gap:6px;font-size:16px;color:var(--ink-2)}
.site-nav a{display:inline-flex;align-items:center;min-height:48px;padding:0 12px;border-radius:var(--r-sm);white-space:nowrap}
.site-nav a:hover{color:var(--ink);background:var(--bg-3)}
.site-nav a.on{color:var(--ink);font-weight:500}
.site-actions{display:flex;align-items:center;gap:var(--s-1);flex:none}
.lang{position:relative}
.lang select{min-height:var(--tap);padding:0 var(--s-4) 0 var(--s-1h);font-size:var(--text-sm);border-radius:var(--r-sm);appearance:none;width:auto}
.lang::after{content:"";position:absolute;right:10px;top:50%;width:12px;height:12px;margin-top:-6px;pointer-events:none;background:var(--ink-2);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat}
.menu-btn{display:inline-flex;flex:none;width:var(--tap);height:var(--tap);align-items:center;justify-content:center;border-radius:var(--r-sm);border:1px solid var(--line-strong);background:var(--bg-2)}
.menu-btn svg{width:var(--icon);height:var(--icon);stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.menu-btn[aria-expanded="true"]{background:var(--bg-3)}
.mobile-nav{display:none;border-top:1px solid var(--line);background:var(--bg);padding:8px 20px 20px;box-shadow:var(--shadow)}
.mobile-nav.open{display:block}
.mobile-nav a{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--line);font-size:18px}
.mobile-nav a.on{font-weight:500}
.mobile-nav .mobile-lang,.mobile-nav .mobile-theme{display:flex;align-items:center;justify-content:space-between;gap:var(--s-1h);padding:var(--s-2) 0 0;font-size:var(--text-sm);color:var(--ink-2)}
.mobile-nav select{min-height:var(--tap);padding:0 var(--s-1h);font-size:var(--text-sm)}
@media (max-width:1079px){.site-actions .lang,.site-actions .btn.quiet,.site-actions .theme-btn{display:none}}
@media (min-width:1080px){.site-nav{display:flex}.menu-btn{display:none}.mobile-nav{display:none!important}}
.prefer-bar{background:var(--amber-tint);color:var(--ink);font-size:15px}
.prefer-bar .wrap{padding:10px 20px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.prefer-bar .link{color:inherit}

/* hero: una frase, due righe, UN bottone, il mockup di Oggi grande */
.hero{padding:56px 0 0;text-align:center}
.hero .display{margin:0 auto;max-width:18ch}
.hero .lead{margin:20px auto 0;max-width:46ch;font-size:19px}
.hero .cta{margin-top:32px;display:flex;flex-direction:column;gap:14px;align-items:center}
.hero .cta .link{font-size:16px}
.hero .fine{margin:16px auto 0}
.hero .frame{margin:48px auto 0;max-width:1040px}
@media (min-width:900px){.hero{padding:96px 0 0}.hero .lead{font-size:20px}.hero .frame{margin-top:64px}}
.section-head{margin-bottom:40px}
.section-head .lead{margin-top:12px}
.section-head.center{text-align:center}
.section-head.center .h2,.section-head.center .lead{margin-left:auto;margin-right:auto}
@media (min-width:900px){.section-head{margin-bottom:56px}}

/* cosa vedi ogni lunedì */
.monday{display:grid;gap:32px;align-items:center}
@media (min-width:900px){.monday{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px}}
.monday-lines{display:grid;gap:18px}
.monday-lines li{display:grid;grid-template-columns:28px 1fr;gap:14px;align-items:start;font-size:19px;line-height:1.45}
.monday-lines li::before{content:"";width:20px;height:12px;margin:8px 0 0 4px;border-left:3px solid var(--green);border-bottom:3px solid var(--green);border-radius:2px;transform:rotate(-45deg)}
.monday-lines .k{color:var(--green);font-weight:600}
.monday-zero{align-self:start}
.monday-zero p{margin-top:var(--s-1);color:var(--ink-2)}

/* per chi è: tre card con un esempio concreto.
   --- V3 landing ---: la pagina di ingresso non le usa più. Erano tre riquadri con l'iconcina e la storia di
   un cliente che non abbiamo («una pasticceria approva dal telefono…»): la forma esatta che il nostro critico
   anti-schema esiste per bocciare. Al loro posto ci sono `.fit` e `.fit-list`, più in basso in questo foglio.
   Le regole restano perché `tests/test_rifiniture_vestito.py` risponde di `.who .card .ex b`: chi le toglie
   aggiorna quell'elenco. */
.who{display:grid;gap:16px}
@media (min-width:760px){.who{grid-template-columns:repeat(3,1fr);gap:20px}}
.who .card svg{width:40px;height:40px;stroke:var(--green);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.who .card p{color:var(--ink-2);margin-top:8px}
.who .card .ex{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line-strong);font-size:16px;color:var(--ink)}
.who .card .ex b{display:block;font-size:var(--text-sm);font-weight:500;color:var(--ink-2);margin-bottom:var(--s-h);text-transform:uppercase;letter-spacing:.04em}

/* quanto costa: due card, prezzo grande */
.plans{display:grid;gap:16px;max-width:860px;margin:0 auto}
@media (min-width:760px){.plans{grid-template-columns:1fr 1fr;gap:20px}}
.plan{display:flex;flex-direction:column;gap:16px}
.plan.featured{border-color:var(--ink)}
.plan .name{font-family:var(--font-display);font-size:20px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:12px}
.plan .amount{font-family:var(--font-mono);font-size:48px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.plan .amount small{font-family:var(--font-body);font-size:16px;font-weight:400;color:var(--ink-2);margin-left:4px}
.plan .desc{color:var(--ink-2)}
.plan ul{display:grid;gap:10px;font-size:16px}
.plan ul li{display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start;line-height:1.45}
.plan ul li::before{content:"";width:20px;height:20px;margin-top:2px;background:var(--green);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l4 4L19 6'/%3E%3C/svg%3E") center/contain no-repeat}
.plan ul li.no{color:var(--ink-2)}
.plan ul li.no::before{background:var(--hint);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E")}
.plan .btn{margin-top:auto;white-space:normal;text-wrap:balance;padding-top:10px;padding-bottom:10px}
.plans-note{text-align:center;margin-top:24px;color:var(--ink-2);font-size:16px}

/* domande: cinque, aperte una alla volta */
.faq{max-width:760px;margin:0 auto}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:48px;padding:16px 0;font-weight:500;font-size:18px;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:24px;height:24px;background:var(--ink);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .15s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;color:var(--ink-2);max-width:62ch}

/* chiusura: la frase del hero e il bottone */
.closing{text-align:center}
.closing .h2{margin:0 auto}
.closing .lead{margin:14px auto 0}
.closing .btn{margin-top:28px}
.closing .fine{margin-top:14px}

/* footer: 3 colonne, corte */
.site-footer{border-top:1px solid var(--line);padding:var(--s-6) 0 var(--s-4);color:var(--ink-2);font-size:var(--text-sm)}
.site-footer .cols{display:grid;gap:var(--s-4);grid-template-columns:1fr}
.site-footer .cols>div{display:flex;flex-direction:column;align-items:stretch;gap:var(--s-1)}
/* --- cantiere v3-pagina ---: sul telefono il piede era alto 854 px, cioe' una schermata intera:
   dodici link uno sotto l'altro, ognuno alto un bersaglio (48 px, e quello non si tocca). Le due
   colonne di link stanno AFFIANCATE sotto il marchio: nessun link e' sparito, nessun bersaglio si e'
   ristretto, e il piede scende di un terzo su ogni pagina del sito. */
@media (max-width:759px){.site-footer .cols{grid-template-columns:1fr 1fr;gap:var(--s-3) var(--s-2)}
  .site-footer .cols>div:first-child{grid-column:1 / -1}}
@media (min-width:760px){.site-footer .cols{grid-template-columns:1.4fr 1fr 1fr}}
.site-footer h4{font-size:var(--text-sm);color:var(--ink);font-weight:600;margin-bottom:0}
.site-footer a{display:inline-flex;align-items:center;min-height:var(--tap);color:var(--ink-2)}
.site-footer .cols>div>a{display:flex}
.site-footer a:hover{color:var(--ink)}
.site-footer .tagline{margin-top:0;max-width:34ch}
/* il recapito: una riga di fatto, non un link. Sta nella colonna «Azienda», sotto l'indirizzo a cui
   si scrive, e dice il numero da chiamare quando c'e' e che non c'e' ancora quando non c'e'.
   Il colore NON e' `--hint`: sul fondo del piede esce a 1,8:1, cioe' una riga che si vede solo se la
   si sa gia'. E' lo stesso grigio del resto del piede (`--ink-2`, 5,9:1): un fatto non si smorza. */
.site-footer .foot-note{color:var(--ink-2);line-height:1.4;max-width:30ch}
.site-footer .bottom{margin-top:var(--s-4);padding-top:var(--s-2h);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:var(--s-1h);flex-wrap:wrap;font-size:var(--text-sm)}

/* accesso / registrazione */
.auth{min-height:calc(100vh - var(--header-h));display:grid;place-items:start center;padding:var(--s-5) var(--s-2h) var(--s-9)}
@media (min-width:900px){.auth{padding-top:var(--s-9)}}
.auth .box{width:100%;max-width:440px}
.auth .box .h2{margin-bottom:8px}
.auth .box .card{margin-top:24px}
.auth .oauth{display:grid;gap:8px}
.auth .oauth:empty{display:none}
.auth .or{display:flex;align-items:center;gap:12px;color:var(--ink-2);font-size:15px;margin:18px 0 4px}
.auth .or::before,.auth .or::after{content:"";flex:1;height:1px;background:var(--line)}
.auth .after{margin-top:20px;display:flex;flex-direction:column;gap:8px;font-size:15px}

/* pagine di testo (termini, privacy) */
.prose{max-width:66ch;color:var(--ink-2)}
.prose h2{color:var(--ink);font-size:22px;margin:32px 0 8px}
.prose p+p{margin-top:10px}

/* i nostri numeri / pagina pubblica */
.public-hero{padding:56px 0 0}
.public-hero .h1{max-width:20ch}
.pub-nums{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (min-width:760px){.pub-nums{grid-template-columns:repeat(4,1fr);gap:16px}}
.pub-num{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-sm)}
.pub-num b{display:block;font-family:var(--font-mono);font-size:36px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums;color:var(--green)}
.pub-num span{display:block;margin-top:8px;font-size:15px;color:var(--ink-2);line-height:1.35}
.pub-feed li{padding:14px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:16px}
.pub-feed li .w{color:var(--ink-2);font-size:15px}
.pub-feed li .n{font-family:var(--font-mono);font-weight:500;font-size:22px;color:var(--green);font-variant-numeric:tabular-nums}
.pub-feed li:last-child{border-bottom:1px solid var(--line)}

/* audit gratuito */
.audit-form{margin:28px auto 0;display:flex;flex-direction:column;gap:12px;max-width:560px}
@media (min-width:600px){.audit-form{flex-direction:row}.audit-form input{flex:1}}
.score{text-align:right;flex:none}
.score b{display:block;font-family:var(--font-mono);font-weight:500;font-size:44px;color:var(--green);line-height:1;font-variant-numeric:tabular-nums}
.score span{display:block;font-size:15px;color:var(--ink-2);margin-top:4px}
.audit-list{margin-top:12px;display:grid;gap:8px}
.audit-list.ok li{position:relative;padding-left:28px;color:var(--ink);line-height:1.5}
.audit-list.ok li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:600}
.audit-fixes{margin-top:12px;display:grid;gap:10px}
.audit-fixes .fix{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;background:var(--card)}
.audit-fixes .fix b{display:block;font-weight:600;color:var(--ink)}
.audit-fixes .fix span{display:block;color:var(--ink-2);font-size:16px;margin-top:4px;line-height:1.5}
.audit-plan{margin-top:12px;display:grid;gap:10px}
.audit-plan .pl{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:baseline;border-bottom:1px dashed var(--line-strong);padding:12px 2px}
.audit-plan .pl:last-child{border-bottom:0}
.audit-plan .ch{white-space:nowrap}
.audit-plan .pl b{font-weight:600;color:var(--ink)}
.audit-plan .pl span{display:block;color:var(--ink-2);font-size:16px;margin-top:3px;line-height:1.45}

/* come funziona: modalità e limiti */
.modes{display:grid;gap:12px}
.modes .card h3{font-size:20px;margin-bottom:6px}
.modes .card p{color:var(--ink-2)}
.never li{display:grid;grid-template-columns:24px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line);align-items:start}
.never li:last-child{border-bottom:1px solid var(--line)}
.never li svg{width:24px;height:24px;stroke:var(--ink-2);fill:none;stroke-width:2;stroke-linecap:round;margin-top:2px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{.site-header,.site-footer,.app-side,.app-header,.app-tabs,header,nav,.page-head .btn,.page-head button,#toast,.banner{display:none!important}body{background:var(--print-paper)!important;color:var(--print-ink)!important}.app-main{padding:0!important;max-width:100%!important}.card{border:1px solid var(--print-line)!important;break-inside:avoid}}

/* =========================================================
   5. APP (base condivisa; il guscio dell'app costruisce sopra in app-shell.css)
   ========================================================= */
.app{min-height:100vh;display:flex;flex-direction:column}
.app-header{position:sticky;top:0;z-index:30;background:var(--bg-glass);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.app-header .wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:12px;max-width:none}
.product-switch{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:var(--r-sm);border:1px solid var(--line-strong);font-size:15px}
.product-switch b{font-weight:500}
.product-switch svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

.app-body{display:flex;flex:1;width:100%}
.app-side{display:none}
.app-main{flex:1;min-width:0;padding:22px 20px 100px}
.app-main .wrap{max-width:880px;margin:0}
@media (min-width:960px){
  .app-side{display:flex;flex-direction:column;gap:4px;width:224px;padding:18px 12px;border-right:1px solid var(--line);position:sticky;top:60px;height:calc(100vh - 60px)}
  .app-side a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);color:var(--ink-3);font-size:15px}
  .app-side a:hover{color:var(--ink);background:var(--bg-2)}
  .app-side a.on{color:var(--ink);background:var(--bg-2)}
  .app-side a svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .app-side .badge{margin-left:auto}
  .app-side .sep{height:1px;background:var(--line);margin:8px 4px}
  .app-side .grow{flex:1}
  .app-main{padding:28px 32px 60px}
}
.app-tabs{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--bg-glass);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));z-index:30}
.app-tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 2px;font-size:12px;color:var(--ink-3);position:relative;border-radius:var(--r-sm)}
.app-tabs a.on{color:var(--ink)}
.app-tabs a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.app-tabs .badge{position:absolute;top:0;right:calc(50% - 22px)}
@media (min-width:960px){.app-tabs{display:none}}

.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.page-head .h2{margin-bottom:4px}
.page-head p{color:var(--ink-3);font-size:15px;max-width:62ch}

.kpi{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (min-width:760px){.kpi{grid-template-columns:repeat(4,1fr)}}
.kpi .k{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.kpi .k b{display:block;font-family:var(--font-mono);font-size:28px;font-weight:500;letter-spacing:0;line-height:1;font-variant-numeric:tabular-nums}
.kpi .k b.acc{color:var(--green)}
.kpi .k span{display:block;margin-top:5px;font-size:15px;color:var(--ink-3)}
.kpi .k .delta{font-size:15px;margin-top:6px;color:var(--green)}
.kpi .k .delta.down{color:var(--red)}

.headline{font-family:var(--font-display);font-weight:500;font-size:clamp(22px,2.8vw,28px);letter-spacing:0;line-height:1.2;max-width:24ch}
.headline b{color:var(--green);font-family:var(--font-mono);font-weight:500;font-variant-numeric:tabular-nums}
/* «Da lunedì araldo ha portato 9 iscritti e 4 vendite .» — lo stacco prima del punto si vedeva in
   vetrina, nella schermata dei risultati della pagina di ingresso. Nella stringa quello spazio NON c'è
   (locales/it.json, `app.results.headline_tpl_this`): nasce qui, perché il numero e le parole accanto
   sono in monospaziato dentro una frase in carattere di display, e la cella del monospaziato porta con
   sé il suo bianco di destra. MISURATO sulla fotografia: fra l'ultima «e» e il punto correvano 10 px,
   esattamente quanti ne corrono fra «iscritti» e la «e» che la segue, cioè uno spazio intero.
   La stringa non si tocca — le stringhe sono testo, non impaginazione — e si recupera il bianco QUI,
   solo sull'ultimo <b>, che è l'unico seguito dal punto: lo spazio prima della «e», che sta bene dov'è,
   è dopo il PRIMO <b> e non si muove. */
.headline b:last-of-type{margin-right:-.36em}


.ledger{border-top:1px solid var(--line)}
.cause{border-bottom:var(--br-tear)}
.cause>button{width:100%;display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:start;padding:13px 0;text-align:left}
.cause .what{font-size:15px;line-height:1.35}
.cause .where{color:var(--ink-3);font-size:15px;margin-top:3px}
.cause .n{font-family:var(--font-mono);font-size:22px;font-weight:500;color:var(--green);line-height:1;text-align:right;font-variant-numeric:tabular-nums}
.cause .bar{grid-column:1/-1;height:4px;border-radius:2px;background:var(--bg-3);overflow:hidden}
.cause .bar i{display:block;height:100%;background:var(--green)}
.cause .detail{display:none;padding:0 0 14px;color:var(--ink-3);font-size:15px}
.cause.open .detail{display:block}
.cause .quote{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;color:var(--ink);margin:4px 0 8px;font-size:15px;line-height:1.45}

.section-title{font-size:15px;font-weight:500;color:var(--ink-2);margin:26px 0 10px}

.draft{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;transition:opacity .25s,transform .25s}
.draft+.draft{margin-top:12px}
.draft.out{opacity:0;transform:translateX(24px)}
.draft .meta{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:15px;color:var(--ink-3);margin-bottom:10px}
.draft .text{white-space:pre-wrap;font-size:15.5px;line-height:1.5}
.draft textarea.text{margin-top:4px}
.draft .why{margin-top:12px;font-size:15px;color:var(--ink-2);border-left:2px dashed var(--hint);padding-left:10px}
.draft .why b{color:var(--ink);font-weight:500}
.draft .actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.note{margin-top:10px;font-size:15px;color:var(--ink-3)}

.timeline .evt{display:grid;grid-template-columns:54px 1fr;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);align-items:start}
.timeline .evt .t{color:var(--ink-3);font-size:15px;padding-top:2px}
.timeline .evt .d{font-size:15px}
.timeline .evt .d span{display:block;color:var(--ink-3);font-size:15px;margin-top:2px}
.timeline .evt.new{background:linear-gradient(90deg,var(--amber-tint),transparent);border-radius:var(--r-sm);padding-left:6px;margin-left:-6px}
.timeline .evt.paused .d{color:var(--red)}
.timeline .evt.win .d{color:var(--green)}
.timeline .evt .tag{display:inline-block;margin-left:6px;font-size:15px;color:var(--ink-3);border:1px solid var(--line-strong);border-radius:var(--r-pill);padding:1px 7px;vertical-align:middle}

.report h3{font-family:var(--font-display);font-size:18px;font-weight:500;margin:22px 0 8px}
.report ol{padding-left:20px;list-style:decimal;font-size:15px}
.report li{margin:7px 0;color:var(--ink-2)}
.report li b{color:var(--ink);font-weight:500}
.report-list li{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:14px 0;border-bottom:1px solid var(--line)}
.report-list li:first-child{border-top:1px solid var(--line)}
.report-list .w{color:var(--ink-3);font-size:15px}
.report-list .n{font-family:var(--font-mono);font-weight:500;font-size:20px;color:var(--green);text-align:right;font-variant-numeric:tabular-nums}

.day{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:12px;min-height:110px}
.day h4{font-size:15px;color:var(--ink-3);font-weight:500;margin-bottom:8px}
.day .item{font-size:15px;padding:6px 8px 0;border-bottom:6px solid transparent;background-clip:padding-box;border-radius:6px;background:var(--bg-3);margin-top:6px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.day .item.exp{border:1px dashed var(--line-strong);background:transparent}
.day.today{border-color:var(--ink)}

.rowline{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:15px}
.rowline .sub{display:block;color:var(--ink-3);font-size:15px;margin-top:2px}

.tabs-inline{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px;overflow:auto}
.tabs-inline button{padding:10px 12px;font-size:15px;color:var(--ink-3);border-bottom:2px solid transparent;white-space:nowrap}
.tabs-inline button.on{color:var(--ink);border-bottom-color:var(--ink)}
.tab-pane{display:none}
.tab-pane.on{display:block}

.brief h3{font-family:var(--font-display);font-size:18px;margin:26px 0 8px}
.brief .rule{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.brief .rule .from{color:var(--ink-3);font-size:15px;white-space:nowrap}

/* sheet / modal */
.sheet{position:fixed;inset:0;background:var(--backdrop);display:none;align-items:flex-end;justify-content:center;z-index:40}
.sheet.open{display:flex}
.sheet .panel{width:100%;max-width:560px;max-height:90vh;overflow:auto;background:var(--bg);border-radius:20px 20px 0 0;border:1px solid var(--line);border-bottom:0;padding:18px 20px 30px}
@media (min-width:760px){.sheet{align-items:center}.sheet .panel{border-radius:20px;border-bottom:1px solid var(--line)}}
.sheet .handle{width:40px;height:4px;border-radius:2px;background:var(--line-strong);margin:0 auto 14px}

@media (max-width:759px){
  .app-header .lang{display:none}
  .seg.wide button{font-size:15px;padding:7px 8px}
  .page-head{align-items:flex-start}
}

/* brief: remove-rule button */
.chip-x{background:none;border:0;color:inherit;opacity:.6;cursor:pointer;font-size:1em;padding:0 2px}.chip-x:hover{opacity:1}

pre.code{background:var(--bg-3);border-radius:10px;padding:12px 14px;font-size:.85em;overflow:auto}

/* V2 phase 1 */
.prefer-bar{background:var(--amber-tint);color:var(--ink);font-size:15px}.prefer-bar .wrap{padding:8px 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}.prefer-bar .link{color:inherit;font-weight:500;text-decoration:underline}
.draft.example{opacity:.7;border-style:dashed}
/* preview: the draft as the reader will see it */
.pv{margin-top:4px;border:1px solid var(--line-strong);border-radius:12px;padding:12px 14px;background:var(--bg-2)}
.pv-head{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px;font-size:15px;line-height:1.3}
.pv-head b{font-weight:600}
.pv-avatar{width:34px;height:34px;border-radius:50%;background:var(--green);color:var(--on-green);display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:15px;flex:none}
.pv-linkedin .pv-avatar{border-radius:8px}.pv-reddit .pv-avatar{background:var(--line-strong);color:var(--ink)}
.pv-subject{display:block;font-weight:600;margin-top:2px}
.pv .draft-img{margin:0 0 10px}
.pv-note{margin-top:10px;font-size:15px;color:var(--ink-3);border-top:1px dashed var(--line);padding-top:8px}
.pv-note.thread,.pv-note.fold{color:var(--ink-2)}.pv-note.link,.pv-note.noimage{color:var(--amber)}
.app-tabs button{appearance:none;background:none;border:0;font:inherit;color:inherit}
.more-nav{display:grid;gap:4px;padding:6px 0 14px}.more-nav a{display:flex;align-items:center;gap:12px;padding:12px 10px;border-radius:12px;min-height:var(--tap);color:inherit;text-decoration:none}.more-nav a.on{background:var(--bg-3)}.more-nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}

.app-tabs a,.app-tabs button,.draft .actions .btn{min-height:var(--tap)}

.draft .meta .grow{flex:1}.draft .counter{margin-top:6px}.draft .counter.over{color:var(--red);font-weight:500}.draft textarea.text{width:100%;min-height:140px;font:inherit;line-height:1.5;padding:10px;border-radius:10px;border:1px solid var(--line-strong);background:var(--card);color:inherit}

/* settings sections on phones: a vertical list with --tap targets instead of a scrolling tab strip */
@media (max-width:759px){.tabs-inline{display:grid;grid-template-columns:1fr 1fr;gap:6px;overflow:visible;border-bottom:0}.tabs-inline button{min-height:var(--tap);width:100%;text-align:center;border:1px solid var(--line);border-radius:12px;white-space:normal}.tabs-inline button.on{border-color:var(--amber)}}
.tabs-inline button{scroll-margin:12px}

/* il setup non si veste più qui: le sue regole (.ob, .stepper, .setup-wait, .setup-ok) vivono in
   static/css/app-shell.css, con i token — vedi DESIGN-REVAMP.md §9, passata di correzione, punto 1 */


/* creative studio */
.studio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:18px}
@media (min-width:760px){.studio-grid{grid-template-columns:repeat(3,1fr)}}
.creative{margin:0;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm)}
.creative .frame{background:var(--bg-3);display:flex;align-items:center;justify-content:center}
.creative .frame img{width:100%;height:100%;object-fit:cover;display:block}
.creative .ar-1x1{aspect-ratio:1/1}.creative .ar-4x5{aspect-ratio:4/5}.creative .ar-16x9{aspect-ratio:16/9}.creative .ar-9x16{aspect-ratio:9/16}
.creative figcaption{padding:11px 13px;display:block}
.creative .p{display:block;font-size:15px;color:var(--ink);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.creative .m{display:block;margin-top:6px;font-family:var(--font-mono);font-size:15px;color:var(--ink-3)}
.creative .stub{color:var(--amber)}

/* studio: selfie video with an AI person */
.selfie-toggle{position:absolute;opacity:0;width:0;height:0}
.selfie-lab{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:var(--text-sm);min-height:var(--tap);color:var(--ink-2);margin:2px 0 6px}
.selfie-lab::before{content:"";width:16px;height:16px;border:1px solid var(--line);border-radius:4px;background:var(--card)}
.selfie-toggle:checked + .selfie-lab::before{background:var(--green);border-color:var(--green)}
.selfie-toggle:focus-visible + .selfie-lab::before{outline:2px solid var(--green);outline-offset:2px}
.avatar-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:6px;max-height:330px;overflow-y:auto;padding:3px}
.avatar-pick label{position:relative;display:block;cursor:pointer;border:2px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-3)}
.avatar-pick label:has(input:checked){border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 22%,transparent)}
.avatar-pick label:has(input:focus-visible){outline:2px solid var(--green);outline-offset:2px}
.avatar-pick input{position:absolute;opacity:0;width:0;height:0}
.avatar-pick img,.avatar-pick .noimg{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--bg-3)}
.avatar-pick .nm{display:block;padding:5px 6px;font-size:13px;line-height:1.2;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
.selfie-toggle:checked ~ .avatar-pick label[data-selfie="0"]{display:none}
.vidcard video{display:block;width:100%;aspect-ratio:9/16;max-height:420px;background:var(--video-mat);object-fit:contain}
.vidcard .vplace{aspect-ratio:9/16;max-height:420px;padding:14px;text-align:center;font-size:14px;color:var(--ink-3)}


/* confronto (agent chat) */
.chat .thread{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.chat .bubble{max-width:80%;padding:11px 14px;border-radius:14px;font-size:15px;line-height:1.5}
.chat .bubble .who{font-family:var(--font-mono);font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-bottom:4px}
.chat .bubble.you{align-self:flex-end;background:var(--green-tint);color:var(--ink);border:1px solid color-mix(in srgb,var(--green) 30%,transparent)}
.chat .bubble.agent{align-self:flex-start;background:var(--bg-3);border:1px solid var(--line)}
.chat .composer{display:flex;gap:10px;align-items:flex-end;border-top:1px solid var(--line);padding-top:14px}
.chat .composer textarea{flex:1;min-height:52px}
.draft-img{width:100%;max-height:260px;object-fit:contain;background:var(--bg-3);border-radius:10px;border:1px solid var(--line);margin-bottom:10px;display:block}

/* experiments */
.exps{display:grid;gap:8px;margin-top:12px}
.exp{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--bg-2)}
.exp b{font-weight:500;color:var(--ink)}
.exp .sub{display:block;color:var(--ink-2);font-size:15px;margin-top:3px;line-height:1.45}
.exp .num{font-family:var(--font-mono);color:var(--ink-2);white-space:nowrap}


/* Today: the week in one line; approval rows stack on a phone */
.tab-alert{position:absolute;top:4px;right:calc(50% - 16px);width:7px;height:7px;border-radius:50%;background:var(--amber)}
.app-side .tab-alert{position:static;margin-left:auto}
.rowline>div:first-child{min-width:0}
@media (max-width:560px){
  .rowline[data-today-draft]{flex-wrap:wrap}
  .rowline[data-today-draft]>div:first-child{flex:1 1 100%}
  .rowline[data-today-draft]>.row{margin-left:auto}
}

/* setup step 2: trust level */
.trust-form{margin-top:14px}
.trust-opt{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;margin-top:10px}
.trust-opt.on,.trust-opt:has(input:checked){border-color:var(--green);box-shadow:0 0 0 1px color-mix(in srgb,var(--green) 25%,transparent)}
.trust-opt input{width:auto;flex:none;margin:4px 0 0;padding:0;accent-color:var(--green)}
.trust-body b{display:block;font-weight:600}.trust-body span{display:block;color:var(--ink-2);font-size:15px;margin-top:3px}


/* phone ergonomics (audit) */
.sheet .panel{max-height:90dvh;overscroll-behavior:contain;padding-bottom:calc(30px + env(safe-area-inset-bottom))}
.draft,[data-ready-list]{scroll-margin-top:76px}
.draft .text,.draft .why,.rowline .sub,.cause .what,.cause .quote{overflow-wrap:anywhere}
@media (max-width:759px){
  .app-header .wrap>.row:first-child{flex:1 1 auto;min-width:0}
  .app-header .wrap>.row:last-child{flex:none}
  .app-header .product-switch{min-width:0;flex:0 1 auto}
  .app-header .product-switch b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media (max-width:560px){
  .app-main{padding:16px 16px 100px}
  .app-main .wrap{padding:0}
  .card{padding:16px}
  .draft{padding:14px 16px}
  .app .btn{min-height:var(--btn-h)}
  .app .btn.sm{padding:9px 14px;font-size:15px}
  .draft .meta .chip-x{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);margin:-12px 0;padding:0;font-size:18px;opacity:.85}
  .draft .meta .chip-x:last-child{margin-right:-10px}
  .draft .move-form .row,.draft .regen-form .row,.draft .posted-form .row{flex-wrap:wrap;gap:8px}
  .draft .move-form input,.draft .regen-form input,.draft .posted-form input{flex:1 1 100%;min-width:0;min-height:var(--tap)}
  .draft .move-form .btn,.draft .regen-form .btn,.draft .posted-form .btn{flex:1 1 auto}
  .draft .actions .btn{flex:1 1 auto}
  .draft .actions .btn.brought,.draft .actions .btn.primary{flex:1 1 100%}
  .draft .actions .btn[data-act="discard"],.draft .actions [data-ready-discard]{flex:0 0 auto;margin-left:auto}
  .page-head>div:first-child{flex:1 1 100%}
  .app .seg button{min-height:var(--tap)}
  [data-mode-switch]{display:flex;flex-direction:column;width:100%;gap:6px;border-radius:14px}
  [data-mode-switch] button{text-align:left;min-height:var(--tap);font-size:15px;padding:10px 12px;border-radius:10px}
  .rowline[data-channel-row]{flex-wrap:wrap;gap:8px}
  .rowline[data-channel-row]>div:first-child{flex:1 1 100%}
  .brief .chip button,.brief .chip-x{display:inline-flex;align-items:center;justify-content:center;min-width:var(--tap);min-height:var(--tap);margin:-10px -6px}
  .exps .exp{flex-wrap:wrap}
  .exps .exp .num{white-space:normal;flex:1 1 100%;text-align:left}
  [data-filter-switch]{flex-wrap:wrap;max-width:100%}
  .page-head .seg{display:flex;width:100%}
  .page-head .seg button{flex:1;min-width:0;min-height:var(--tap);padding:10px 8px;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .page-head>[data-approve-all]{flex:1 1 100%;min-height:var(--tap)}
  [data-nudge] .nudge-actions{flex:1 1 100%}
  [data-nudge] .nudge-actions .btn{flex:1 1 auto}
  .app-main .note .link,.app-main .row>.link,.app-main .link.back{display:inline-block;padding:10px 4px;margin:-10px -4px}
  .rowline[data-today-row],.rowline[data-today-out]{flex-wrap:wrap}
  .rowline[data-today-row]>div:first-child,.rowline[data-today-out]>div:first-child{flex:1 1 100%}
  .rowline[data-today-row]>.btn,.rowline[data-today-out]>.btn,.rowline[data-today-out]>.row{margin-left:auto}
  .cause .detail .link{display:inline-block;padding:12px 0;margin:-12px 0}
}
@media (max-width:400px){.app-tabs a{font-size:12px;padding:6px 0;letter-spacing:-.01em}}

/* talk to the agent: newest message in view, dated bubbles */
.chat .thread{max-height:60vh;overflow-y:auto}
.chat .bubble .who .when{margin-left:8px;text-transform:none;letter-spacing:0;opacity:.7;font-weight:400}

/* report list rows are one tap target */
.report-list .report-row{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:var(--tap);width:100%;color:inherit;text-decoration:none}

/* sito: paragrafi centrati nel hero e nella chiusura */
.hero p,.closing p,.section-head.center p,.plans-note{margin-left:auto;margin-right:auto}
.plan .amount{letter-spacing:-.03em}
.hero{padding-bottom:48px}
@media (min-width:900px){.hero{padding-bottom:64px}}
.hero .frame-caption{margin-bottom:0}
.empty p,.empty span{margin-left:auto;margin-right:auto}
.who .card svg .warm{fill:var(--amber);stroke:none}

/* mockup per tema: base.html imposta sempre html[data-theme] */
[data-theme="dark"] .shot-light,:root:not([data-theme="dark"]) .shot-dark{display:none}

/* =========================================================
   4b. SITO — identità, tinte, animazioni (08/09, sera)
   ========================================================= */
/* logo: marchio (asta inchiostro, bandierina verde) + wordmark in tracciati, segue il tema */
.logo svg.logo-svg{height:28px;width:auto;color:var(--ink)}
.site-footer .logo svg.logo-svg{height:24px}
.logo .mark{color:var(--ink)}

/* loghi dei canali: tondo tinta 15 %, glifo pieno nel colore del canale; chip con il nome (testo AA) */
:where(.ch-logo,.ch-chip){--c:var(--ink-2);--ct:var(--ink-2)}
.ch-logo{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;flex:none;color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent)}
.ch-logo svg{display:block}
.ch-logo.sm{width:32px;height:32px;border-radius:9px}
.ch-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px 6px 10px;border-radius:var(--r-pill);font-size:15px;font-weight:500;line-height:1.2;white-space:nowrap;color:var(--ct);background:color-mix(in srgb,var(--c) 15%,transparent)}
.ch-chip svg{color:var(--c);flex:none}
.ch-row{display:flex;flex-wrap:wrap;gap:8px}

/* sezioni: carta / tinta verde / bianco si alternano; niente righe come unico separatore */
.section.tint-1{background:var(--bg-tint-1)}
.section.tint-2{background:var(--bg-tint-2)}
.section.tint-2 .card,.section.tint-2 .pub-num{border-color:var(--line-strong)}
.hero{background:radial-gradient(60% 55% at 50% 0%,color-mix(in srgb,var(--green) 9%,transparent),transparent 70%)}
[data-theme="dark"] .hero{background:radial-gradient(60% 55% at 50% 0%,color-mix(in srgb,var(--green) 20%,transparent),transparent 70%),linear-gradient(180deg,var(--bg-tint-1),var(--bg))}
.hero .frame{max-width:880px;margin-top:40px}
@media (min-width:900px){.hero .frame{margin-top:56px}}

/* hero con vita: i post partono da araldo verso i canali e tornano come iscritti (SMIL, 7 s, fermo con reduced-motion) */
.hero-flow{position:relative;margin:36px auto 0;max-width:640px}
.hero-flow svg{width:100%;height:auto;display:block;overflow:visible}
.hero-flow .wire{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-dasharray:3 6;stroke-linecap:round}
.hero-flow .node{fill:var(--bg-2);stroke:var(--line-strong);stroke-width:1.5}
.hero-flow .node.me{fill:var(--bg-2);stroke:var(--green);stroke-width:2}
.hero-flow .node.ch{fill:color-mix(in srgb,var(--c) 15%,var(--bg-2));stroke:none}
.hero-flow .glyph{color:var(--c)}
.hero-flow .me-mark{color:var(--ink)}
.hero-flow .pulse{fill:none;stroke:var(--c,var(--green));stroke-width:2;opacity:0}
.hero-flow .post rect{fill:var(--ink)}
.hero-flow .post path{stroke:var(--bg);stroke-width:1.6;stroke-linecap:round;fill:none}
.hero-flow .back{fill:var(--green)}
/* --- il correttore --- Le etichette del disegno erano 15-16 unità di un viewBox largo 560 reso a 350 px
   sul telefono: meno di dieci pixel veri, contro la regola di casa «testo mai sotto 15 px». A 24 unità
   fanno 15 px a 390 px di larghezza; da 640 in su il disegno è largo 640 e bastano 17 unità per farne 19. */
.hero-flow .lbl,.hero-flow .lbl.sm{fill:var(--ink-2);font-family:var(--font-body);font-size:24px;font-weight:500}
@media (min-width:640px){.hero-flow .lbl,.hero-flow .lbl.sm{font-size:17px}}
.hero-flow .lbl.alone{fill:var(--green);font-weight:600}
.hero-flow .brace{fill:none;stroke:var(--line-strong);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.hero-flow .receipt rect{fill:var(--green)}
.hero-flow .receipt text{fill:var(--on-green);font-family:var(--font-body);font-size:24px;font-weight:600}
.hero-flow .receipt-static{display:none}
@media (prefers-reduced-motion:reduce){.hero-flow .mover,.hero-flow .pulse,.hero-flow .receipt{display:none}.hero-flow .receipt-static{display:block}}

/* --- LE ANIMAZIONI CHE NON POSSONO NASCONDERE NIENTE (cantiere v3-pieghevole, 13/09/2026) -----------------
   La dissolvenza allo scroll c'era (opacity:0 finche' un IntersectionObserver non accendeva il pezzo) ed e' stata
   tolta in 2db5c2c: un colpo di pollice saltava l'observer e le sezioni restavano invisibili per sempre. Il
   fondatore la rivuole («era bella»), e ne vuole di piu'. La regola non cambia: il contenuto non dipende mai da uno
   script per essere visibile. Quindi il meccanismo e' rovesciato: nessun pezzo e' nascosto IN ATTESA di qualcosa.
   `.reveal` e' solo un segno (site.js) e non ha stile; `.in-view` fa partire l'ENTRATA, un'animazione finita che
   comincia trasparente e finisce piena, e il pezzo e' trasparente SOLO DENTRO quell'animazione. Senza script, con
   «riduci il movimento» (animation:none, qui sotto), o se lo script cade a meta', non esiste nessuno stato nascosto
   da cui uscire. site.js aggiunge le tre sicurezze del tempo: a ogni scroll chi e' gia' sopra il fondo dello schermo
   non fa l'entrata (e' gia' visibile: farla ora sarebbe un lampo), ogni entrata ha un tetto dopo il quale la classe
   cade comunque, e un tetto dal caricamento toglie ogni entrata rimasta appesa. Le figure dei pilastri scivolano dal
   loro lato (la figura da destra, il testo da sinistra, e nel pilastro specchiato il contrario), sul telefono dal
   basso. Prove: tests/test_public_phone.py (il pollice veloce, «riduci il movimento», l'observer che manca). */
/* --- cantiere v3-fold2 (13/09/2026) ---: l'entrata era .6 s da 18 px e partiva 96 px prima del bordo (site.js): a passo
   svelto il pezzo arrivava sullo schermo gia' all'80-90 % e non si vedeva niente. Adesso .8 s da 22-24 px, e parte al
   bordo. Il tetto per entrata in site.js (DUR) e' calibrato su questa durata: se la cambi, cambia anche quello. */
.in-view{animation:entra .8s cubic-bezier(.2,.7,.2,1) both}
.in-view.from-left{animation-name:entra-sx}
.in-view.from-right{animation-name:entra-dx}
@keyframes entra{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes entra-sx{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes entra-dx{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
/* la mappa dell'eroe si disegna all'apertura, tutto in CSS e sotto 1,5 s: le linee dal centro verso le stazioni
   (dashoffset; quelle «in arrivo», tratteggiate, si accendono invece di disegnarsi, perche' il tratteggio e' il loro
   segno e non va toccato), le stazioni una dopo l'altra in senso orario (--i dal template, l'ordine di
   web/vetrina.STAZIONI), il centro che arriva e poi respira piano. Lo stato BASE (senza animazione) e' quello
   intero: con «riduci il movimento» e' fermo e visibile dal primo frame. Le stazioni animano solo l'opacita' e la
   scala del loro cerchio (transform-box), mai il gruppo: il gruppo porta la sua posizione in un attributo
   transform e la prova delle etichette (tests/test_landing_vetrina.py) le misura mentre la mappa si sta disegnando. */
.mappa .line{animation:mappa-linea .45s ease-out both;animation-delay:calc(.15s + var(--i,0) * .08s)}
@keyframes mappa-linea{from{stroke-dasharray:130;stroke-dashoffset:130}to{stroke-dasharray:130;stroke-dashoffset:0}}
@keyframes mappa-accendi{from{opacity:0}to{opacity:1}}
.mappa .st{animation:mappa-accendi .4s ease-out both;animation-delay:calc(.35s + var(--i,0) * .09s)}
.mappa .st .st-bg{transform-box:fill-box;transform-origin:center;animation:mappa-stazione .4s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.35s + var(--i,0) * .09s)}
@keyframes mappa-stazione{from{transform:scale(.6)}to{transform:none}}
.mappa .hub-g{animation:mappa-accendi .5s ease-out both}
.mappa .hub{transform-box:fill-box;transform-origin:center;animation:mappa-centro .5s cubic-bezier(.2,.7,.2,1) both,mappa-respiro 4s ease-in-out 1.5s infinite}
@keyframes mappa-centro{from{transform:scale(.85)}to{transform:none}}
@keyframes mappa-respiro{0%,100%{transform:none}50%{transform:scale(1.025)}}
/* card che rispondono al passaggio */
.who .card,.plan,.modes .card,.pub-num{transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.who .card:hover,.plan:hover,.modes .card:hover,.pub-num:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.frame{transition:transform .25s ease,box-shadow .25s ease}
.step .frame:hover,.monday .frame:hover{transform:translateY(-4px)}

/* i tre numeri grandi di esempio («31 iscritti», «4 vendite», «5,10 €») sono andati via con la
   sezione: nessuno li aveva misurati, e salivano da zero davanti agli occhi di chi legge. */
.sample-tag{display:inline-flex;align-items:center;gap:var(--s-1);margin-top:var(--s-1h);font-size:var(--text-sm);color:var(--ink-2);border:1px dashed var(--line-strong);border-radius:var(--r-pill);padding:var(--s-h) var(--s-1h)}

/* passo «Colleghi»: la lista dei canali con i loghi */
.step .ch-row{margin-top:16px}
.step .ch-row .ch-chip{min-height:var(--pill-h);padding:var(--s-h) var(--s-1h) var(--s-h) var(--s-1);font-size:var(--text-sm)}

/* pagina «Entra nella demo» */
.demo-intro{padding:56px 0 var(--section)}
.demo-intro .box{max-width:600px;margin:0 auto;text-align:center}
.demo-intro .box .lead{margin:16px auto 0}
.demo-intro .lines{display:grid;gap:12px;margin:28px auto 0;max-width:480px;text-align:left}
.demo-intro .lines li{display:grid;grid-template-columns:40px 1fr;gap:12px;align-items:center;font-size:17px}
.demo-intro .lines svg{width:40px;height:40px;stroke:var(--green);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.demo-intro .btn{margin-top:28px}
.demo-intro .fine{margin-top:14px}
@media (min-width:900px){.demo-intro{padding-top:88px}}

/* i nostri numeri: in attesa dei primi numeri veri */
.proof-wait{max-width:640px;margin:0 auto}
.proof-wait .empty{margin-top:0}
.proof-wait .when{display:block;margin-top:10px;font-family:var(--font-mono);font-weight:500;color:var(--green);font-size:20px}
/* accesso e registrazione: lo stesso respiro del hero */
.auth{background:radial-gradient(60% 40% at 50% 0%,color-mix(in srgb,var(--green) 9%,transparent),transparent 70%)}
[data-theme="dark"] .auth{background:radial-gradient(60% 40% at 50% 0%,color-mix(in srgb,var(--green) 18%,transparent),transparent 70%),linear-gradient(180deg,var(--bg-tint-1),var(--bg))}
.auth .card{box-shadow:var(--shadow)}
/* per chi è, e per chi no: due elenchi di situazioni, senza iconcine e senza clienti inventati */
.fit{display:grid;gap:var(--s-4)}
@media (min-width:760px){.fit{grid-template-columns:1fr 1fr;gap:var(--s-6)}}
.fit-list{display:grid;gap:var(--s-1h);margin-top:var(--s-2)}
.fit-list li{position:relative;padding-left:var(--s-4);font-size:var(--text-lg);line-height:1.5;color:var(--ink-2)}
.fit-list li::before{position:absolute;left:0;top:0;font-weight:600;color:var(--green)}
.fit-list.yes li::before{content:"\2713"}
.fit-list.no li::before{content:"\2715";color:var(--amber)}
.fit-note{margin-top:var(--s-4);font-size:var(--text-sm);color:var(--ink-2);max-width:64ch}

/* provalo prima di iscriverti: la demo e lo studio del sito, due riquadri e basta */
.try{display:grid;gap:var(--s-2);max-width:860px;margin:0 auto}
@media (min-width:760px){.try{grid-template-columns:1fr 1fr;gap:var(--s-2h)}}
.try .card{display:flex;flex-direction:column;gap:var(--s-1h)}
.try .card p{color:var(--ink-2)}
.try .card .link{margin-top:auto;display:inline-flex;align-items:center;min-height:var(--tap)}

/* cosa non fa: i limiti in ambra (aspetta te, non è ancora acceso) */
.limits{display:grid;gap:var(--s-3)}
@media (min-width:760px){.limits{grid-template-columns:1fr 1fr;gap:var(--s-4)}}
.limit{border-top:2px solid var(--amber);padding-top:var(--s-2)}
.limit p{margin-top:var(--s-1);color:var(--ink-2);max-width:52ch}
/* i tre piani in casa stanno su una riga sola: sono un'informazione, non tre bottoni da scegliere */
@media (min-width:960px){.plans.three{grid-template-columns:repeat(3,1fr);max-width:100%}}

/* =========================================================
   4c. SITO — LA PAGINA DI INGRESSO (cantiere v3-vetrina, 13/09/2026)

   La pagina che VENDE: l'eroe con i quattro pilastri e un collage di tre cose che araldo produce, i tre
   passi con la loro figura, quattro sezioni-pilastro con UNA figura di risultato ciascuna, il lunedi',
   il prezzo, la chiusura (scratchpad/vetrina/STRAVOLGIMENTO.md). Il vestito e' quello del cantiere
   v3-pagina, che ha funzionato, e resta: i TERRENI che cambiano fondo (carta → inchiostro → carta →
   pietra → carta → pietra; due vicini mai dello stesso colore, e il cambio di fondo e' la composizione),
   la CORNICE DEL TELEFONO disegnata in CSS, tutto allineato a sinistra, testo mai sotto 15 px, ogni
   misura sulla scala di 8 px dei token, nessun colore scritto a mano.

   LE FIGURE NON SONO SCREENSHOT: sono disegnate qui. La mappa della piattaforma (.mappa, --- v3-eroe ---),
   le nuvole della conversazione (.chat), la pagina di vendita in miniatura
   (.mini), il piano della settimana (.week), i post pronti della mattina (.ready), e le tre piccole dei
   passi (.paste, .study, .okrow). Ognuna e' un
   oggetto PIENO, bordato e con l'ombra — e' quello che araldo da' — e dentro ogni figura il testo sta
   sopra i 15 px, perche' la porta del telefono lo misura anche li' (tests/test_public_phone.py).
   ========================================================= */

/* --- i terreni ---------------------------------------------------------------------------------
   I colori non si scrivono: si scelgono fra i token. Sul tema scuro l'inchiostro non puo' restare
   --br-ink (sarebbe una fascia nera su una pagina gia' nera): diventa il pannello rialzato --bg-2. Il
   rimpasto della tavolozza sta sul FIGLIO (.land-ink>.wrap) e non sulla sezione, perche' sulla sezione
   chiudeva un anello di variabili (--bg-3 → --land-ink-panel → --bg-3) che le rendeva tutte invalide
   in silenzio: tests/test_site_v2.py::test_the_grounds_really_change_colour_in_both_themes. */
.land{--land-paper:var(--bg);--land-stone:var(--bg-3);
      --land-ink:var(--br-ink);--land-ink-fg:var(--br-paper);--land-ink-fg-2:var(--br-ink-3);
      --land-ink-fg-3:var(--br-dark-ink-2);--land-ink-line:var(--br-dark-line);
      --land-ink-panel:var(--br-dark-2);
      /* --- correttore copy (14/09/2026), difetto L ---: il verde del marchio (--br-green) su fondo
         inchiostro stava a 2,87:1, sotto la soglia — «il token del verde non cambia quando la sezione e'
         scura» (Gino, misurato sulle etichette CAPISCE/PIANIFICA/ESEGUE e su meta' del titolo dei passi).
         Sul terreno inchiostro il verde e' quello che il tema scuro usa gia', --br-green-lift: non un
         colore nuovo e non un colore scritto a mano. Nel tema scuro l'inchiostro e' un pannello chiaro e
         il verde resta quello della pagina. */
      --land-ink-green:var(--br-green-lift);
      padding:var(--s-2) 0 var(--s-2h);text-align:left}
[data-theme="dark"] .land{--land-ink:var(--bg-2);--land-ink-fg:var(--ink);--land-ink-fg-2:var(--ink-2);
      --land-ink-fg-3:var(--hint);--land-ink-line:var(--line);--land-ink-panel:var(--bg-3);
      --land-ink-green:var(--green)}
@media (min-width:900px){.land{padding:var(--s-6) 0}}
.land-paper,.hero.land-paper{background:var(--land-paper)}
.land-stone{background:var(--land-stone)}
.land-ink{background:var(--land-ink);color:var(--land-ink-fg)}
.land-ink>.wrap{
  --ink:var(--land-ink-fg);--ink-2:var(--land-ink-fg-2);--ink-3:var(--land-ink-fg-2);
  --hint:var(--land-ink-fg-3);--line:var(--land-ink-line);--line-strong:var(--land-ink-line);
  --bg-2:var(--land-ink-panel);--bg-3:var(--land-ink-panel);--card:var(--land-ink-panel)}
/* il verde SCRITTO sulle fasce scure: il titolo a due tempi e il nome del passo. Il bottone tiene il suo
   verde (e' un fondo, non un testo: il contrasto lo da' --on-green). */
.land-ink .h2 em,.land-ink .display em,.land-ink .steps-tre .step-name,.land-ink .beats .beat:last-child{color:var(--land-ink-green)}
.land p,.land .display,.land .h2,.land ul{margin-left:0;margin-right:0}

/* --- le misure del testo: h1 26/44, h2 23/30, testo 16, secondario e mono 15 --------------------- */
.land .display{margin:0;font-size:26px;font-weight:500;line-height:1.2;letter-spacing:-.01em;
  max-width:22ch;color:var(--ink-2)}
.land .display em{font-style:normal;font-weight:600;color:var(--green)}
.land .h2{margin:0;font-size:23px;font-weight:600;line-height:1.2;max-width:26ch;color:var(--ink)}
.land .lead{margin:var(--s-1) 0 0;max-width:40ch;font-size:var(--text);line-height:1.5;color:var(--ink-2)}
.land .fine{margin:var(--s-1) 0 0;font-size:var(--text-sm);line-height:1.5;color:var(--ink-2);max-width:56ch}
/* la didascalia: nel carattere del testo, non in mono («sembra un avviso dell'avvocato», Gino) */
.land .cap{margin:var(--s-1) 0 0;font-size:var(--text-sm);line-height:1.4;color:var(--ink-2)}
@media (min-width:900px){
  .land .display{font-size:44px;max-width:22ch}
  .land .h2{font-size:30px}
  .land .lead{font-size:var(--text-lg);max-width:44ch}
}

/* --- LE FIGURE ------------------------------------------------------------------------------------ */
.fig{margin:0;display:grid;justify-items:start}
/* la conversazione: la domanda a sinistra, la risposta a destra, l'ora in mono, sotto chi l'ha scritta */
.chat{display:grid;gap:var(--s-1);width:100%}
.bub{margin:0;max-width:92%;padding:var(--s-1h) var(--s-2);border-radius:var(--r-lg);font-size:var(--text-sm);
  line-height:1.45;background:var(--bg-3);color:var(--ink);box-shadow:var(--shadow-sm)}
.bub-q{justify-self:start;border-bottom-left-radius:var(--s-h)}
.bub-a{justify-self:end;background:var(--green-tint);color:var(--state-ok-ink);border-bottom-right-radius:var(--s-h)}
.bub-t{display:inline-block;margin-left:var(--s-1);font-family:var(--font-mono);font-size:var(--text-sm);
  color:var(--ink-2);white-space:nowrap}
.bub-a .bub-t{color:var(--state-ok-ink);opacity:.8}
.bub-by{margin:0;justify-self:end;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--ink-2)}
/* --- correttore copy (14/09/2026), difetto J ---: la scheda del lunedi' («9 iscritti · 4 vendite»,
   etichettata «Esempi di un'attivita' di prova») e' uscita dalla pagina con il suo vestito: «Nove. Un
   numero cosi', dichiarato finto, fa piu' danno che non metterlo» (il fondatore). */
/* la didascalia che dichiara l'attivita' di prova, sotto la figura dello studio */
.fig-tag{margin:var(--s-1) 0 0;max-width:380px;font-size:var(--text-sm);line-height:1.4;color:var(--ink-2)}
/* la pagina di vendita in miniatura: la barra del browser, il titolo, una riga, il bottone (che non e' un <a>) */
.mini{width:100%;max-width:360px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);overflow:hidden}
.mini-bar{display:flex;align-items:center;gap:var(--s-1);padding:var(--s-1) var(--s-1h);border-bottom:1px solid var(--line);background:var(--bg-3)}
.mini-bar i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.mini-url{margin-left:var(--s-1);font-family:var(--font-mono);font-size:var(--text-sm);color:var(--ink-2)}
.mini-body{padding:var(--s-2h) var(--s-2) var(--s-3)}
.mini-title{margin:0;font-size:22px;font-weight:600;line-height:1.2;color:var(--ink)}
.mini-p{margin:var(--s-1) 0 0;font-size:var(--text-sm);line-height:1.45;color:var(--ink-2)}
.mini-go{display:inline-flex;align-items:center;min-height:var(--btn-h-sm);margin-top:var(--s-2);padding:0 var(--s-2h);
  border-radius:var(--r-md);background:var(--green);color:var(--on-green);font-weight:500;font-size:var(--text)}
/* il piano della settimana: sette righe, come un'agenda */
.week{width:100%;max-width:380px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:var(--s-1h) var(--s-2)}
.week-h{margin:0 0 var(--s-h);font-size:var(--text-sm);font-weight:600;color:var(--ink-2)}
.week-rows{list-style:none;margin:0;padding:0;display:grid}
.week-rows li{display:grid;grid-template-columns:var(--s-5) 46px minmax(0,1fr);gap:0 var(--s-1);align-items:baseline;
  padding:var(--s-h) 0;border-top:1px solid var(--line);font-size:var(--text-sm);line-height:1.3;color:var(--ink)}
.week-rows li:first-child{border-top:0}
.week-d{font-family:var(--font-mono);font-weight:500;color:var(--ink-2)}
.week-t{font-family:var(--font-mono);color:var(--ink-2)}
.week-ch{color:var(--ct);font-weight:500}
.week-more{color:var(--hint);padding-bottom:0}
.week-more .week-d{font-size:var(--text)}
/* le tre figure dei passi: il campo dove incolli, cosa ha capito, il si' */
.fig-step>*{max-width:380px}
.paste{display:flex;align-items:center;gap:var(--s-1h);width:100%;min-height:var(--btn-h);padding:0 var(--s-1h) 0 var(--s-2);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--bg-2);box-shadow:var(--shadow-sm)}
.paste-in{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);
  font-family:var(--font-mono);font-size:var(--text-sm)}
.paste-ok{display:inline-flex;align-items:center;gap:var(--s-h);flex:0 0 auto;min-height:var(--pill-h);padding:0 var(--s-1h);
  border-radius:var(--r-pill);background:var(--green-tint);color:var(--state-ok-ink);font-size:var(--text-sm);font-weight:500}
.paste-ok svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* i post pronti della mattina: il canale, il titolo, e accanto la verita' (dove esce da solo, dove lo pubblichi tu) */
.ready{width:100%;max-width:380px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow);padding:var(--s-1h) var(--s-2)}
.ready-h{margin:0 0 var(--s-h);font-size:var(--text-sm);font-weight:600;color:var(--ink-2)}
.ready-rows{list-style:none;margin:0;padding:0;display:grid}
.ready-rows li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 var(--s-1);align-items:baseline;
  padding:var(--s-1) 0;border-top:1px solid var(--line);font-size:var(--text-sm);line-height:1.35}
.ready-rows li:first-child{border-top:0}
.ready-ch{color:var(--ct);font-weight:500;font-family:var(--font-mono)}
.ready-t{font-weight:600;color:var(--ink)}
.ready-s{grid-column:1 / -1;font-family:var(--font-mono);color:var(--ink-2)}
.study{width:100%;padding:var(--s-1h) var(--s-2);border-radius:var(--r-lg);background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.study-h{margin:0;font-size:var(--text-sm);font-weight:600;color:var(--ink-2)}
.study-p{margin:var(--s-h) 0 0;font-size:var(--text-sm);line-height:1.45;color:var(--ink)}
.okrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-h) var(--s-2);align-items:center;width:100%;
  padding:var(--s-1h) var(--s-2);border-radius:var(--r-lg);background:var(--bg-2);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.okrow-t{font-weight:600;font-size:var(--text-sm);color:var(--ink)}
.okrow-w{grid-row:2;font-family:var(--font-mono);font-size:var(--text-sm);color:var(--ink-2)}
.okrow-ok{grid-column:2;grid-row:1 / span 2;display:inline-flex;align-items:center;gap:var(--s-h);min-height:var(--pill-h);
  padding:0 var(--s-1h);border-radius:var(--r-pill);background:var(--green-tint);color:var(--state-ok-ink);font-size:var(--text-sm);font-weight:500}
.okrow-ok svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* --- 1. CARTA: l'eroe -----------------------------------------------------------------------------
   --- cantiere v3-eroe (13/09/2026) ---: titolo, sottotitolo, LA MAPPA della piattaforma, l'azione con la sua
   conseguenza. Sul telefono in colonna, in quest'ordine, e tutto dentro la prima schermata (844 px: la prova
   in tests/test_landing_vetrina.py); sul computer le parole a sinistra e la mappa a destra. */
.hero.land{padding-top:var(--s-2);padding-bottom:var(--s-2h)}
.land-hero{display:grid;gap:var(--s-1h)}
.hero-words{display:contents}
.hero-words .display{order:1;color:var(--ink);font-weight:600}
.hero-sub{order:2;margin:0;line-height:1.4}
.mappa{order:3;max-width:340px;justify-self:center}
.hero-go{order:4;display:grid;justify-items:start;gap:0}
.hero-go .btn{width:100%}
.hero-go .fine{margin-top:var(--s-1h)}
/* la mappa: araldo al centro, e intorno i servizi CHE FA OGGI — cerchio verde pieno, linea piena.
   --- correttore copy (14/09/2026), difetto F ---: le stazioni tratteggiate «in arrivo» non si disegnano
   piu'. Erano quattro su nove, e la prima impressione era «che quasi meta' del prodotto non c'e'» (il
   fondatore) mentre lo stesso anello, ripetuto piu' sotto senza la sua legenda, le faceva sembrare
   disponibili (Gino). Quello che arriva resta scritto per nome nella legenda sotto la mappa e nella riga
   del prezzo, e l'anello (.ring-soon) vive solo li'. Nel tema scuro il centro resta il cerchio piu'
   contrastato (--ink e' chiaro sul fondo scuro). Tutto dai token. */
.mappa{margin:0;width:100%;display:grid;justify-items:stretch;gap:var(--s-1)}
.mappa-svg{display:block;width:100%;height:auto;font-family:var(--font-display)}
.mappa .hub{fill:var(--ink)}
.mappa .hub-word{fill:var(--on-ink);font-weight:600;font-size:22px;letter-spacing:-.02em}
.mappa .hub-sub{fill:var(--on-ink);font-size:16px;opacity:.75;letter-spacing:-.01em}
.mappa .flag{fill:var(--green);stroke:var(--on-ink);stroke-width:1.5;stroke-linejoin:round}
.mappa .flag-pole{stroke:var(--on-ink);stroke-width:2;stroke-linecap:round}
.mappa .line{stroke:var(--line-strong);stroke-width:2.5;fill:none;stroke-linecap:round}
.mappa .st-bg{fill:var(--green-tint);stroke:var(--green);stroke-width:2}
.mappa .st-ic{fill:none;stroke:var(--green-dark);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* le etichette: fuori dal raggio delle linee, e con un alone color carta sotto il testo per sicurezza */
.mappa .lbl{fill:var(--ink);font-size:16px;font-weight:500;text-anchor:middle;paint-order:stroke fill;
  stroke:var(--land-paper);stroke-width:4px;stroke-linejoin:round}
.ring-soon{fill:var(--bg-2);stroke:var(--ink-2);stroke-width:1.5;stroke-dasharray:4 4}
.ring-leg{width:var(--s-2h);height:var(--s-2h);flex:none;vertical-align:calc(-1 * var(--s-h))}
.mappa-leg{display:flex;align-items:flex-start;gap:var(--s-1);margin:0;font-size:var(--text-sm);line-height:1.35;color:var(--ink-2)}
@media (min-width:560px){
  .hero-go .btn{width:auto}
}
/* --- correttore copy (14/09/2026), difetto K ---: le due colonne dell'eroe si aprivano solo da 900 px. Sul
   pieghevole aperto (848) l'eroe restava una colonna: il titolo largo 352 px con meta' pagina vuota a
   destra, la mappa centrata sotto e il bottone «staccato dal discorso che deve chiudere», in basso a
   sinistra (il fondatore). Adesso si aprono da 760, come i pilastri, il lunedi', il prezzo e la chiusura:
   una larghezza sola per tutta la pagina. */
@media (min-width:760px){
  .land-hero{grid-template-columns:minmax(0,11fr) minmax(0,9fr);column-gap:var(--s-4);align-items:center}
  .hero-words{display:grid;justify-items:start;gap:var(--s-2)}
  .hero-sub{max-width:44ch}
  .hero-go{margin-top:var(--s-1)}
  .mappa{max-width:420px;justify-self:end}
}
@media (min-width:900px){
  .hero.land{padding-top:var(--s-8);padding-bottom:var(--s-8)}
  .land-hero{column-gap:var(--s-9)}
  .hero-words{gap:var(--s-2h)}
  .mappa{max-width:520px}
  .hero-sub{line-height:var(--lh)}
}

/* --- 2. INCHIOSTRO: i tre passi ------------------------------------------------------------------
   Numerati grossi, ognuno con la sua figura sotto le sue parole; sul computer tre colonne. */
.land-ink .h2{margin-top:0}
/* --- v3-eroe ---: «Sotto a tutto, il direttore» e' il titolo della fascia scura, e la sua riga sta sotto */
.director{max-width:40ch;font-size:var(--text-sm)}
.steps-wrap{display:grid;gap:var(--s-2h)}
.steps-tre{list-style:none;margin:var(--s-1h) 0 0;padding:0;display:grid;gap:var(--s-1h)}
.steps-tre .step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s-1h);align-items:baseline;text-align:left}
.steps-tre .step .k{width:auto;height:auto;display:block;background:none;border-radius:0;
  font-family:var(--font-mono);font-size:var(--title);font-weight:600;line-height:1.2;color:var(--ink)}
.steps-tre .step p{margin:0;max-width:34ch;font-size:var(--text);line-height:1.5;color:var(--ink-2)}
.steps-tre .step-t{display:block;font-weight:600;font-size:var(--text-lg);line-height:1.35;color:var(--ink)}
.fig-step{margin:0}
/* --- v3-pieghevole ---: sotto le due colonne la figura riempie la colonna (niente tetto a 380 px con meta' pagina vuota) */
@media (max-width:759px){.fig-step>*{max-width:none}}
@media (min-width:760px){
  .steps-wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-4);align-items:center}
  .fig-step{justify-items:end}
}
@media (min-width:900px){
  .steps-wrap{gap:var(--s-8)}
  .steps-tre{gap:var(--s-3);margin-top:var(--s-3)}
}

/* --- 3. CARTA: i quattro pilastri ----------------------------------------------------------------
   L'etichetta in mono, il titolo forte, il beneficio, tre cose concrete, UNA figura. Sul computer
   parole e figura si alternano di lato. */
#pilastri .wrap{display:grid;gap:var(--s-2)}
.pillar{display:grid;gap:var(--s-1);align-items:center}
.pillar-words{display:grid;justify-items:start}
/* --- correttore copy (14/09/2026), difetti D, F, G ---: la soprariga di ogni pilastro (il verbo del
   capitolo, poi la fila delle stazioni con l'anello «in arrivo») e' uscita: tre righe di tassonomia prima
   di ogni titolo, meta' delle quali nominava cose che non facciamo. Il vestito se n'e' andato con lei. */
.does{list-style:none;margin:var(--s-1h) 0 0;padding:0;display:grid;gap:var(--s-h);max-width:46ch}
.does li{position:relative;padding-left:var(--s-3);font-size:var(--text-sm);line-height:1.5;color:var(--ink)}
.does li::before{content:"\2014";position:absolute;left:0;top:0;color:var(--hint)}
.fig-pillar{width:100%}
/* --- cantiere v3-pieghevole (13/09/2026) ---: a OGNI larghezza testo e figura riempiono il contenitore. Il fondatore, sul
   Galaxy Fold aperto (~880 px CSS), vedeva tutto ammassato nella meta' sinistra: la griglia apriva le due colonne solo
   da 900, e sotto la figura aveva un tetto a 380 px e il testo i suoi 46ch, con la meta' destra vuota. Adesso: due
   colonne vere (testo | figura) da 760 in su, e sotto una colonna PIENA, con la figura larga quanto la colonna.
   tests/test_public_phone.py misura il blocco testo + figura contro la larghezza utile del .wrap a 820, 880, 904, 1024. */
@media (max-width:759px){.fig-pillar>*{max-width:none}}
@media (min-width:760px){
  #pilastri .wrap{gap:var(--s-8)}
  .pillar{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s-4)}
  .pillar:nth-child(even) .pillar-words{order:2}
  .pillar:nth-child(odd) .fig-pillar{justify-items:end}
}
@media (min-width:900px){
  #pilastri .wrap{gap:var(--s-9)}
  .pillar{gap:var(--s-8)}
}

/* --- 4. PIETRA: il lunedi' · 5. CARTA: il prezzo -------------------------------------------------- */
.land-two{display:grid;gap:var(--s-2h)}
.land-col{min-width:0}
.monday-line{margin-top:var(--s-1h);max-width:52ch;font-size:var(--text);line-height:1.5;color:var(--ink-2)}
.monday-line .quando{font-weight:600;color:var(--ink)}
.truth-h{margin:var(--s-1h) 0 0;max-width:40ch;padding-left:var(--s-2);border-left:3px solid var(--green);
  font-size:var(--text);font-weight:500;line-height:1.5;color:var(--ink)}
.truth{display:grid;gap:var(--s-1);margin-top:var(--s-1h);max-width:52ch}
.truth li{position:relative;padding-left:var(--s-3);font-size:var(--text-sm);line-height:1.45;color:var(--ink-2)}
.truth li::before{content:"\2014";position:absolute;left:0;top:0;color:var(--hint)}
.truth-links{display:flex;flex-wrap:wrap;gap:0 var(--s-3);margin:0}
.truth-links .link{display:inline-flex;align-items:center;min-height:var(--tap);font-size:var(--text-sm)}
/* --- correttore copy (14/09/2026), difetto A ---: come si paga sta SOPRA la cifra, non undici righe
   sotto e in grigio. E' la seconda riga della sezione, e si legge come il resto del testo. */
.price-pay{margin:var(--s-1h) 0 0;max-width:52ch;font-size:var(--text);line-height:1.5;color:var(--ink)}
.price-big{margin:var(--s-1h) 0 0;font-size:var(--text);line-height:1.5;color:var(--ink-2)}
.price-big .eur{display:block;font-family:var(--font-mono);font-size:54px;font-weight:600;line-height:1;
  letter-spacing:-.02em;word-spacing:-.3em;color:var(--ink)}
/* --- difetto B (Gino) ---: quanti post con la foto sono, al mese. La divisione la fa il codice. */
.price-posts{margin:var(--s-1) 0 0;max-width:46ch;font-size:var(--text-lg);font-weight:600;line-height:1.35;color:var(--ink)}
.price-in{margin-top:var(--s-1h);max-width:46ch;font-size:var(--text);line-height:1.5;color:var(--ink)}
.price-note{margin:0;max-width:52ch;font-size:var(--text);line-height:1.5;color:var(--ink)}
.welcome-what{margin:var(--s-1h) 0 0;max-width:56ch;font-size:var(--text-sm);line-height:1.5;color:var(--ink-2)}
.price-small{margin:var(--s-1) 0 0;max-width:56ch;font-size:var(--text-sm);line-height:1.5;color:var(--ink-2)}
.price-next{margin:var(--s-1) 0 0;max-width:56ch;font-size:var(--text-sm);line-height:1.5;color:var(--ink-2)}
.who-line{margin-top:var(--s-2);max-width:56ch;font-size:var(--text-sm);line-height:1.5;color:var(--ink-2)}
@media (min-width:760px){
  .land-two{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s-4);align-items:start}
}
@media (min-width:900px){
  .land-two{gap:var(--s-8)}
  .truth-h{font-size:var(--text-lg)}
  .price-big .eur{font-size:64px}
}

/* --- 6. PIETRA: comincia -------------------------------------------------------------------------- */
.closing.land{text-align:left}
.closing.land .h2{margin:0}
.close-p{margin-top:var(--s-1h);max-width:52ch;font-size:var(--text);line-height:1.5;color:var(--ink-2)}
.closing.land .btn{margin-top:var(--s-2);width:100%}
.closing.land .fine{margin:var(--s-1) 0 0}
.close-demo{margin:var(--s-1) 0 0;max-width:56ch;font-size:var(--text-sm);line-height:1.5;color:var(--ink-2)}
.close-demo .link{display:inline-flex;align-items:center;min-height:var(--tap);font-size:var(--text-sm)}
@media (min-width:560px){.closing.land .btn{width:auto}}
/* --- cantiere v3-fold2 (13/09/2026) ---: la chiusura come i pilastri. Sul Fold aperto (848-904 px) era rimasta una
   colonna da 520 px con 350 px vuoti a destra: da 760 in su sono due colonne vere.
   --- correttore copy (14/09/2026), difetto C ---: nella seconda colonna c'era il telefono SPENTO, un
   riquadro nero da 200x404 senza schermo. «Non sembra una metafora, sembra un'immagine non caricata», e a
   390 px non compariva affatto: la metafora esisteva solo dove sembrava un guasto (il fondatore,
   bloccante). Al suo posto ci sono PAROLE — quello che arriva per le agenzie (era in mezzo al prezzo, dove
   distraeva Gino mentre decideva) e la riga della societa' che fattura — cosi' la colonna dice qualcosa a
   tutte le larghezze, e a 390 la pagina guadagna una riga invece di perderne una.
   tests/test_public_phone.py::test_on_the_open_fold_the_closing_fills_the_width_like_the_pillars. */
.land-close{display:grid}   /* niente gap sotto i 760: la riga della societa' ha gia' il suo margine, e l'altezza a 390 e' contata (test_landing_altezza) */
.close-words{min-width:0}
.close-next{min-width:0}
.next-p{margin:var(--s-2) 0 0;max-width:52ch;font-size:var(--text-sm);line-height:1.5;color:var(--ink-2)}
.close-next .who-line{margin-top:var(--s-1)}
@media (min-width:760px){
  .land-close{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s-2) var(--s-4);align-items:start}
  .close-next{justify-self:start}
  .next-p{margin-top:0}
}
@media (min-width:900px){
  .land-close{column-gap:var(--s-8)}
}

/* =========================================================================================
   CANTIERE COPY (14/09/2026) — le sezioni nuove del testo del fondatore.
   Il vestito non cambia: gli stessi terreni (carta · pietra · inchiostro, che adesso si alternano per
   tredici sezioni), gli stessi token, tutto allineato a sinistra, testo mai sotto 15 px e bersagli da 48
   (tests/test_public_phone.py). Qui sotto stanno SOLO i pezzi che il copy nuovo ha portato: la riga
   dell'operatore unico nell'eroe, le sette cose della settimana, l'apertura dei passi con «01», la fila
   dei canali, i tre battiti dell'approvazione, la lista di quello che araldo sa scrivere, le sei righe del
   lunedi', la prima settimana, le tre righe dei crediti, i sei mestieri.
   ========================================================================================= */

/* 1. l'eroe: sotto la frase, la riga che dice cosa araldo E' — un operatore solo per tre mestieri */
.hero-role{order:3;margin:var(--s-1) 0 0;font-size:var(--text-sm);line-height:1.45;color:var(--ink-2);max-width:44ch}
.land-hero .mappa{order:4}
.land-hero .hero-go{order:5}
@media (min-width:900px){.hero-role{font-size:var(--text)}}

/* 2. il tempo: le due righe che riconoscono, e le sette cose in colonna. Nude: niente riquadri, niente
   iconcine — tre riquadri corti senza un fatto dentro sono lo schema che il nostro critico boccia (B1). */
.sai{margin-top:var(--s-h);max-width:34ch}
.time-close{margin:var(--s-2) 0 0;max-width:40ch;font-size:var(--text-lg);font-weight:600;line-height:1.35;color:var(--ink)}
.time-lead{margin:0 0 var(--s-1);font-size:var(--text-sm);line-height:1.5;color:var(--ink-2)}
.chores{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-h);max-width:40ch}
.chores li{position:relative;padding-left:var(--s-3);font-size:var(--text-sm);line-height:1.5;color:var(--ink)}
.chores li::before{content:"\2014";position:absolute;left:0;top:0;color:var(--hint)}
@media (min-width:900px){.time-close{font-size:24px}}

/* 3. i tre passi: l'apertura in quattro righe (le quattro porte), poi 01-02-03 con il nome del passo.
   Lo «0» e' un figlio del numero, non una cifra a parte: il critico legge la cifra del passo. */
.steps-intro{margin:var(--s-1h) 0 0;display:grid;gap:var(--s-h);max-width:44ch}
.steps-intro p{margin:0;font-size:var(--text-sm);line-height:1.5;color:var(--ink-2)}
.steps-tre .k-zero{font-style:normal;color:var(--hint)}
.steps-tre .step-name{display:block;font-family:var(--font-mono);font-size:var(--text-sm);font-weight:500;
  line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:var(--green)}
.land-ink .h2 em{font-style:normal}

/* 5. i canali: una fila di nomi, non una parete di loghi. Chi pubblica da solo e' in verde (la fila la
   scrive web.vetrina.canali dal catalogo del prodotto), e i tre battiti dell'approvazione stanno sotto. */
.canali{margin:var(--s-1h) 0 0;max-width:46ch;font-size:var(--text);line-height:1.6;color:var(--ink)}
.canali .canale{white-space:nowrap}
.canali .canale.solo{color:var(--green);font-weight:600}
.canali .sep{color:var(--hint)}
.beats{display:flex;flex-wrap:wrap;gap:0 var(--s-1h);margin:var(--s-1h) 0 0}
.beats .beat{font-size:var(--text-lg);font-weight:600;line-height:1.35;color:var(--ink)}
.beats .beat:last-child{color:var(--green)}

/* 6. quello che araldo sa scrivere: l'elenco del fondatore, due colonne quando c'e' posto */
.sell-lead{margin:var(--s-1h) 0 var(--s-1);font-size:var(--text-sm);font-weight:600;color:var(--ink-2)}
.sells{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-h);max-width:46ch}
.sells li{position:relative;padding-left:var(--s-3);font-size:var(--text-sm);line-height:1.5;color:var(--ink)}
.sells li::before{content:"\2014";position:absolute;left:0;top:0;color:var(--hint)}
@media (min-width:560px){.sells{grid-template-columns:1fr 1fr;column-gap:var(--s-2)}}
/* --- correttore copy (14/09/2026), difetto E ---: le tre righe che CHIUDONO le conversioni stanno dopo la
   lista, nell'ordine del fondatore, e sono righe — non un secondo elenco di trattini attaccato al primo
   («Nove trattini di fila dove avevo una lista sola»). L'ultima e' la sua battuta, e si legge come tale. */
.sell-close{margin:var(--s-1h) 0 0;max-width:46ch;font-size:var(--text);line-height:1.5;color:var(--ink)}
.sell-close:last-child{font-size:var(--text-lg);font-weight:600;line-height:1.35}

/* 8. il lunedi': le sei righe del conto, poi cosa il lunedi' NON e' e la domanda a cui risponde */
.monday-list{margin-top:var(--s-1h)}
.monday-no{margin:var(--s-1h) 0 0;max-width:46ch;font-size:var(--text);line-height:1.5;color:var(--ink)}
.plan-note{margin:var(--s-1h) 0 0;max-width:52ch;font-size:var(--text-sm);line-height:1.5;color:var(--ink-2)}

/* 9. la prima settimana: tre righe numerate a sinistra, l'azione a destra (una colonna sul telefono) */
.prima-steps{list-style:none;counter-reset:p;margin:var(--s-1h) 0 0;padding:0;display:grid;gap:var(--s-1);max-width:40ch}
.prima-steps li{counter-increment:p;position:relative;padding-left:var(--s-4);font-size:var(--text);
  line-height:1.45;color:var(--ink)}
.prima-steps li::before{content:counter(p);position:absolute;left:0;top:0;font-family:var(--font-mono);
  font-size:var(--text-sm);font-weight:600;color:var(--green)}
.prima-free{margin:var(--s-2) 0 0;font-size:var(--text-sm);line-height:1.5;color:var(--ink-2)}
.prima-go .btn{margin-top:var(--s-1h);width:100%}
.prima-go .fine{margin-top:var(--s-1)}
@media (min-width:560px){.prima-go .btn{width:auto}}
@media (min-width:760px){.prima-free{margin-top:0}}

/* 10. il prezzo: le tre righe dei crediti (il regalo, la ricarica, il mese) sono tre cose diverse */
.credits-life{margin-top:var(--s-1h)}

/* 11. per chi: i sei mestieri, nudi, e le due righe di quello che non devi diventare */
.fit{list-style:none;margin:var(--s-1h) 0 0;padding:0;display:grid;gap:var(--s-h);max-width:40ch}
.fit li{position:relative;padding-left:var(--s-3);font-size:var(--text);line-height:1.45;color:var(--ink)}
.fit li::before{content:"\2014";position:absolute;left:0;top:0;color:var(--hint)}
@media (min-width:560px){.fit{grid-template-columns:1fr 1fr;column-gap:var(--s-2)}}
.fit-no{margin:0 0 var(--s-1);max-width:40ch;font-size:var(--text);line-height:1.5;color:var(--ink-2)}
.fit-do{margin:var(--s-2) 0 0;max-width:40ch;font-size:var(--text-lg);font-weight:600;line-height:1.35;color:var(--ink)}

/* --- cantiere copy: l'eroe ha una riga in piu' (l'operatore unico) e la prima schermata a 390 x 844 deve
   tenere titolo, frase, riga, mappa E azione. I 17 px che mancavano si prendono dall'aria, non dalla mappa:
   le etichette della mappa stanno a 16 unita' su 340 px di larghezza, cioe' 15,1 px reali, e rimpicciolirla
   le manderebbe sotto i 15 (tests/test_public_phone.py). Quindi: il passo della colonna dell'eroe scende da
   12 a 8 px sul telefono, e la riga dell'operatore non aggiunge un suo margine sopra il passo. */
@media (max-width:899px){
  .land-hero{gap:var(--s-1)}
  .hero-role{margin:0}
  .hero.land{padding-top:var(--s-1h)}
  .hero-go .fine{margin-top:var(--s-1)}
}
.price-next .seats{font-weight:600;color:var(--ink)}