/* ============================================================================
   page.css — shared stylesheet for Booost SUBPAGES (about, roadmap, legal/*).
   The home page (index.html) is a self-contained mock with its CSS inline and
   does NOT link this file. Everything here mirrors index.html's token system so
   the two look like one site: same :root tokens, same Atkinson type, same nav,
   same footer, same light/dark behaviour. Keep the token block in sync with
   index.html — no raw hex outside :root.
   ========================================================================== */

:root{
  /* constant brand */
  --ink:#0B0D13; --cream:#F3F2EF; --cream-sub:#E9E7E1; --ink-text:#191919;
  --pink:#FF2D6B; --pink-soft:rgba(255,45,107,.12); --pink-line:rgba(255,45,107,.42); --pink-glow:rgba(255,45,107,.35);
  --cyan:#00F0FF; --ok:#3FB950; --warn:#E3A008;
  /* fixed (non-theming) surfaces */
  --white:#fff; --text-fixed:#E8ECF4; --muted-fixed:#96A0B5;
  --ink-raised:#111319; --ink-overlay:#181B25;
  --fd:'Atkinson Hyperlegible Next','Segoe UI',system-ui,sans-serif;
  --fb:'Atkinson Hyperlegible Next',system-ui,-apple-system,sans-serif;
  --fm:'Atkinson Hyperlegible Next',ui-monospace,'SF Mono',Menlo,monospace;
  --maxw:1180px;
  /* themeable — DARK defaults */
  --page:var(--ink); --raised:var(--ink-raised); --overlay:var(--ink-overlay); --subtle:#1F2333;
  --text:var(--text-fixed); --muted:var(--muted-fixed); --faint:#6A7488;
  --line:rgba(140,155,190,.14); --line-2:rgba(140,155,190,.26);
  --nav-bg:rgba(11,13,19,.82);
}
:root[data-theme="dark"]{--page:var(--ink);--raised:var(--ink-raised);--overlay:var(--ink-overlay);--subtle:#1F2333;
  --text:var(--text-fixed);--muted:var(--muted-fixed);--faint:#6A7488;--line:rgba(140,155,190,.14);--line-2:rgba(140,155,190,.26);--nav-bg:rgba(11,13,19,.82)}
:root[data-theme="light"]{--page:var(--cream);--raised:var(--white);--overlay:var(--white);--subtle:#ECEAE4;
  --text:var(--ink-text);--muted:#565A66;--faint:#8A8E99;--line:rgba(20,24,40,.10);--line-2:rgba(20,24,40,.18);--nav-bg:rgba(243,242,239,.86)}
@media (prefers-color-scheme: light){
  :root:not([data-theme]){--page:var(--cream);--raised:var(--white);--overlay:var(--white);--subtle:#ECEAE4;
    --text:var(--ink-text);--muted:#565A66;--faint:#8A8E99;--line:rgba(20,24,40,.10);--line-2:rgba(20,24,40,.18);--nav-bg:rgba(243,242,239,.86)}
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:80px}
/* overflow-x:CLIP, not hidden — `hidden` makes body a scroll container and silently kills every
   position:sticky descendant (the article TOC stopped following the page because of it). */
body{margin:0;background:var(--page);color:var(--text);font-family:var(--fb);line-height:1.65;text-wrap:pretty;
  -webkit-font-smoothing:antialiased;overflow-x:clip;transition:background .3s,color .3s}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--fd);font-weight:600;letter-spacing:-.02em;text-wrap:balance;margin:0}
p{margin:0}img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--fm);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--pink)}

.wm{display:inline-flex;align-items:center;gap:0;font-family:var(--fd);font-weight:700;font-size:1.2rem;letter-spacing:-.02em}
.wm img{width:26px;height:26px;margin-right:.5rem}
.wm .oo{color:var(--pink)}

.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--fd);font-weight:600;font-size:.95rem;
  line-height:1;padding:.85rem 1.3rem;border-radius:11px;border:1px solid transparent;cursor:pointer;
  transition:transform .12s ease,box-shadow .2s ease,background .2s ease,filter .2s}
.btn:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.btn-pink{background:var(--pink);color:var(--white);box-shadow:0 12px 34px -14px var(--pink-glow)}
.btn-pink:hover{transform:translateY(-1px);filter:brightness(1.06);box-shadow:0 18px 42px -14px var(--pink-glow)}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--pink);color:var(--pink)}
.btn-sm{padding:.6rem .95rem;font-size:.85rem}

/* ---------- nav (always visible on subpages — no scroll reveal) ---------- */
.topnav{position:sticky;top:0;z-index:60;background:var(--nav-bg);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topnav-in{max-width:var(--maxw);width:100%;margin:0 auto;min-height:60px;display:flex;align-items:center;gap:22px;padding:0 24px}
.topnav .links{display:flex;gap:20px;margin-left:6px}
.topnav .links a{font-size:.88rem;color:var(--muted);transition:color .15s}
.topnav .links a:hover,.topnav .links a[aria-current="page"]{color:var(--text)}
.topnav .right{margin-left:auto;display:flex;align-items:center;gap:12px}
@media(max-width:820px){.topnav .links{display:none}.topnav-in{gap:12px;padding:0 20px}}
/* hamburger — prima dell'audit 1/9 sotto gli 821px la nav semplicemente spariva */
.nburger{display:none;width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2);background:transparent;color:var(--text);place-items:center;cursor:pointer;flex:none;transition:border-color .15s,color .15s}
.nburger:hover{border-color:var(--pink);color:var(--pink)}
.nburger:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.nburger svg{width:20px;height:20px}
.nburger .nb-close{display:none}
.topnav.nav-open .nburger .nb-open{display:none}
.topnav.nav-open .nburger .nb-close{display:block}
.links .mnav-dl{display:none}
@media(max-width:820px){
  .nburger{display:grid}
  .topnav{position:sticky}
  .topnav.nav-open .links{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;
    background:var(--page);border-bottom:1px solid var(--line);
    padding:10px 20px 16px;gap:2px;box-shadow:0 22px 40px -18px rgba(0,0,0,.4)}
  .topnav.nav-open .links a{padding:.6rem 2px;font-size:1rem}
}
@media(max-width:560px){.topnav.nav-open .links .mnav-dl{display:inline-flex;margin-top:12px;align-self:flex-start;padding:.6rem .95rem}}

.tgl{width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2);background:transparent;color:var(--text);
  display:grid;place-items:center;cursor:pointer;transition:border-color .15s,color .15s;flex:none}
.tgl:hover{border-color:var(--pink);color:var(--pink)}
.tgl svg{width:18px;height:18px}
.tgl .moon{display:none}
:root[data-theme="light"] .tgl .sun{display:none}
:root[data-theme="light"] .tgl .moon{display:block}
@media(prefers-color-scheme:light){:root:not([data-theme]) .tgl .sun{display:none}:root:not([data-theme]) .tgl .moon{display:block}}

/* ---------- language menu ---------- */
/* Six languages do not fit inline the way `EN · IT` did. Unlike the home's copy of this,
   the subpage nav is a normal themed surface, so the button uses --text/--line-2 and
   inherits light mode for free. */
.langsel{position:relative;flex:none}
.langsel-btn{display:inline-flex;align-items:center;gap:.35rem;font-family:var(--fm);font-size:.72rem;
  color:var(--text);background:transparent;border:1px solid var(--line-2);border-radius:999px;
  padding:.4rem .6rem .4rem .55rem;cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s}
.langsel-btn:hover{border-color:var(--pink-line);background:var(--pink-soft)}
.langsel-btn:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
.langsel-btn .glb{width:14px;height:14px;opacity:.65;flex:none}
.langsel-btn .crt{width:11px;height:11px;opacity:.55;flex:none;transition:transform .15s}
.langsel-btn[aria-expanded="true"] .crt{transform:rotate(180deg)}
.langsel-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;margin:0;padding:.3rem;
  list-style:none;min-width:150px;background:var(--overlay);border:1px solid var(--line-2);
  border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.28)}
.langsel-menu[hidden]{display:none}
.langsel-menu a{display:block;padding:.5rem .7rem;border-radius:8px;font-size:.86rem;color:var(--text);
  text-decoration:none;transition:background .12s,color .12s}
.langsel-menu a:hover{background:var(--subtle)}
.langsel-menu a:focus-visible{outline:2px solid var(--pink);outline-offset:-2px}
.langsel-menu a.on{color:var(--pink);font-weight:700}
.langsel-menu a.on::after{content:"✓";float:right;opacity:.8}
@media(max-width:560px){.topnav .btn-pink{display:none}.langsel-btn .glb{display:none}}

/* ---------- page header ---------- */
.phead{padding:70px 0 34px;border-bottom:1px solid var(--line);background:var(--raised)}
.phead h1{font-size:clamp(2.1rem,5vw,3.2rem);line-height:1.08;margin:.6rem 0 0}
.phead .sub{color:var(--muted);font-size:1.08rem;margin-top:1rem;max-width:62ch}
.phead .meta{margin-top:1.4rem;font-family:var(--fm);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
@media(max-width:820px){.phead{padding:48px 0 28px}}

/* ---------- body layout: prose + optional sticky TOC ---------- */
.pbody{padding:56px 0 90px}
/* minmax(0,...) — NOT 1fr — or the table's min-width blows the column out past
   the viewport on mobile (body's overflow-x:hidden then silently clips the text). */
.pgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:52px}
.pgrid.has-toc{grid-template-columns:minmax(0,1fr) 220px}
@media(max-width:980px){.pgrid.has-toc{grid-template-columns:minmax(0,1fr)}.toc{display:none}}
@media(max-width:820px){.pbody{padding:40px 0 64px}}

.toc{position:sticky;top:88px;align-self:start;max-height:calc(100vh - 120px);overflow-y:auto}
.toc h3{font-family:var(--fm);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 12px}
/* nav-scoped, NOT `.toc a`: the rail also carries a .btn (the toc-cta ask), and the broader
   selector out-specified .btn-pink — the button shipped with muted grey text. */
.toc nav a{display:block;font-size:.85rem;color:var(--muted);padding:5px 0 5px 12px;border-left:2px solid var(--line);line-height:1.4;transition:color .15s,border-color .15s}
.toc nav a:hover{color:var(--pink);border-left-color:var(--pink)}
/* the rail's one quiet ask, under the contents — our equivalent of a "share this" block */
.toc-cta{margin-top:20px;padding:14px 16px;border:1px solid var(--line-2);border-radius:12px;background:var(--raised)}
.toc-cta p{color:var(--muted);font-size:.82rem;line-height:1.55;margin:0 0 .8rem}

/* ---------- prose ---------- */
.prose{min-width:0;font-size:1.06rem}
/* Cap the TEXT at a readable measure, but let cards and tables use the whole
   column — so the page header, the body and the footer all align on the same
   left edge instead of the body sitting in a narrower container. */
.prose>p,.prose>ul,.prose>ol,.prose>h2,.prose>h3,.prose>blockquote,.prose>.note{max-width:74ch}
.prose>*+*{margin-top:1.2rem}
/* the opening lines carry the promise — a standfirst gives them presence and
   sets the reading rhythm before the body settles to its base size. */
.prose>p:first-of-type{font-size:1.22rem;line-height:1.55;color:var(--text)}
/* each H2 opens a new chapter: a hairline rule + air turns a wall of text into
   scannable sections. The first one needs neither (it follows the tldr/hero). */
.prose h2{font-size:1.72rem;margin-top:3.6rem;padding-top:1.9rem;border-top:1px solid var(--line-2);scroll-margin-top:80px}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose h3{font-size:1.22rem;margin-top:2.5rem;color:var(--text);scroll-margin-top:80px}
.prose p,.prose li{color:var(--muted)}
.prose strong{color:var(--text);font-weight:700}
.prose ul,.prose ol{margin-left:0;padding-left:1.25rem}
.prose li+li{margin-top:.45rem}
.prose li::marker{color:var(--pink)}
.prose a:not(.btn){color:var(--pink);border-bottom:1px solid var(--pink-line);transition:border-color .15s}
.prose a:not(.btn):hover{border-bottom-color:var(--pink)}
.prose code{font-family:var(--fm);font-size:.88em;background:var(--subtle);border:1px solid var(--line);border-radius:6px;padding:.12em .38em;color:var(--text)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.6rem 0}
.prose blockquote{margin:1.6rem 0;padding:1rem 1.2rem;background:var(--pink-soft);border-left:3px solid var(--pink);border-radius:0 10px 10px 0}
.prose blockquote p{color:var(--text);font-size:.95rem}

/* numbered "### 1. …" subsections render as STEP cards (build-pages.py wraps them), so a dense run of
   "1./2./3." paragraphs reads as three distinct blocks instead of one wall of text. */
/* pagine confronto: il grassetto-frase che apre il paragrafo diventa un titoletto
   run-in — il ritmo che a quelle corse di paragrafi mancava (audit 1/9) */
.prose p.leadin{margin-top:1.9em}
.prose p.leadin>strong:first-child{display:block;font-size:1.05em;margin-bottom:.28em;color:var(--text)}
.prose .step{border:1px solid var(--line);border-radius:14px;background:var(--raised);padding:20px 24px 22px;max-width:74ch}
.prose .step>*+*{margin-top:.85rem}
.prose .step h3{margin-top:0;display:flex;align-items:center;gap:.65rem;font-size:1.12rem}
.step-n{display:inline-grid;place-items:center;width:1.85rem;height:1.85rem;border-radius:50%;flex:none;
  background:var(--pink);color:#fff;font-family:var(--fm);font-size:.82rem;font-weight:700}

/* tables — a comparison table is an ARGUMENT, so it earns real contrast, not the
   flat grey of a legal appendix. Used by the blog comparisons AND the legal pages. */
/* The four-layer background is the classic pure-CSS scroll hint: two covers that travel with the
   content (attachment:local) and two shadows pinned to the edges (attachment:scroll). When the
   table is wider than its box, the far edge shows a soft shadow — the affordance a phone reader
   needs to discover the Booost column that sits off-screen. No JS. */
.tablewrap{overflow-x:auto;border:1px solid var(--line-2);border-radius:12px;background-color:var(--raised);
  background:
    linear-gradient(90deg,var(--raised) 38%,rgba(0,0,0,0)) 0 0/48px 100% no-repeat local,
    linear-gradient(270deg,var(--raised) 38%,rgba(0,0,0,0)) 100% 0/48px 100% no-repeat local,
    linear-gradient(90deg,rgba(2,4,10,.5),rgba(0,0,0,0)) 0 0/22px 100% no-repeat scroll,
    linear-gradient(270deg,rgba(2,4,10,.5),rgba(0,0,0,0)) 100% 0/22px 100% no-repeat scroll,
    var(--raised)}
.prose table{border-collapse:collapse;width:100%;font-size:.94rem;min-width:520px}
.prose th,.prose td{text-align:left;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);vertical-align:top}
.prose thead th{font-family:var(--fm);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text);background:var(--subtle);border-bottom:1px solid var(--line-2)}
.prose tbody tr:last-child td{border-bottom:0}
.prose tbody tr{transition:background .12s}
.prose tbody tr:hover td{background:var(--pink-soft)}
.prose td{color:var(--muted)}
.prose tbody td:first-child{color:var(--text);font-weight:600}
/* the column that is us: tinted pink so the eye lands on the difference */
.prose th.col-booost{color:var(--pink)}
.prose td.col-booost,.prose th.col-booost{background:var(--pink-soft)}
.prose tbody td.col-booost{color:var(--text);font-weight:600}
/* key/value table (no header row): fits any width, first column reads as a label */
.prose table.kv{min-width:0}
.prose table.kv td:first-child{color:var(--text);font-weight:700;white-space:nowrap}
/* on a phone the label may wrap — better than making a 2-column table scroll */
@media(max-width:560px){.prose table.kv td:first-child{white-space:normal}}

/* ⚠️ Su un telefono una tabella di confronto a quattro colonne NON ci sta: a 390 px
   si vedeva la colonna delle etichette e la sola Community, cioè una colonna di
   trattini — la lettura opposta a quella che la tabella deve dare. Due rimedi, e
   nessuno dei due nasconde contenuto (il mobile-first di Google lo indicizza).
   1. La prima colonna resta ferma: scorrendo verso Pro si sa sempre di che riga si
      parla. Senza `left:0` sticky è inerte, quindi dove la tabella ci sta è un no-op.
   2. Celle più strette sotto i 560 px, così la colonna successiva SPUNTA: è quello
      che dice «si scorre» meglio di qualunque ombra. */
.prose table:not(.kv) thead th:first-child,
.prose table:not(.kv) tbody td:first-child{position:sticky;left:0;z-index:1}
.prose table:not(.kv) tbody td:first-child{background:var(--raised)}
.prose table:not(.kv) thead th:first-child{background:var(--subtle)}
@media(max-width:560px){
  .prose table{font-size:.86rem}
  .prose th,.prose td{padding:.6rem .62rem}
  /* ⚠️ Bloccare la prima colonna serve solo se è STRETTA: misurata a 390 px era 229 px
     su 300 disponibili, cioè da ferma si mangiava il 76% dello schermo e restava meno
     spazio di prima per le colonne che si vanno a cercare. Qui si toglie il min-width
     (la tabella si adatta al contenitore) e si mette un tetto all'etichetta. */
  .prose table:not(.kv){min-width:0}
  .prose table:not(.kv) th:first-child,
  .prose table:not(.kv) td:first-child{max-width:140px;white-space:normal}
}

/* callout: the honest "this is what it is" note */
.note{display:flex;gap:.9rem;padding:1rem 1.15rem;border:1px solid var(--line-2);border-radius:12px;background:var(--raised);
  color:var(--muted);font-size:.92rem;line-height:1.6}
.note b{color:var(--text)}
.note .ic{color:var(--pink);flex:none;font-size:1rem;line-height:1.5}

/* ---------- roadmap timeline ---------- */
.rmap{display:grid;gap:18px;margin-top:2rem}
.rcard{border:1px solid var(--line);border-radius:14px;background:var(--raised);padding:20px 22px;position:relative;overflow:hidden}
.rcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--line-2)}
.rcard.now::before{background:var(--ok)}
.rcard.next::before{background:var(--pink)}
.rcard.later::before{background:var(--line-2)}
.rcard .rtag{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--fm);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.6rem}
.rcard.now .rtag{color:var(--ok)}
.rcard.next .rtag{color:var(--pink)}
.rcard h3{font-size:1.05rem;margin-bottom:.5rem}
.rcard ul{margin:.7rem 0 0;padding-left:1.15rem}
.rcard li{color:var(--muted);font-size:.94rem}
.rcard li+li{margin-top:.4rem}
.rcard li::marker{color:var(--pink)}

/* ---------- about: value cards ---------- */
.vals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:2rem}
@media(max-width:700px){.vals{grid-template-columns:minmax(0,1fr)}}
.val{border:1px solid var(--line);border-radius:14px;background:var(--raised);padding:20px}
.val h3{font-size:1rem;margin-bottom:.5rem}
.val p{color:var(--muted);font-size:.92rem}

/* ---------- article byline: a machine wrote this, and we say so ---------- */
.byline{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.4rem;max-width:76ch;
  color:var(--muted);font-size:.88rem;line-height:1.6}
.byline .bot{flex:none;font-family:var(--fm);font-size:.62rem;font-weight:700;letter-spacing:.1em;
  border:1px solid var(--pink-line);color:var(--pink);border-radius:5px;padding:.15rem .35rem;
  margin-top:.15rem}

/* ---------- blog index ---------- */
.plist{display:grid;gap:16px}
.pcard{border:1px solid var(--line);border-radius:14px;background:var(--raised);overflow:hidden;transition:border-color .18s,transform .18s}
.pcard:hover{border-color:var(--pink-line);transform:translateY(-2px)}
.pcard a{display:grid;grid-template-columns:260px 1fr;align-items:stretch}
/* Un articolo senza copertina (scritto a mano, non dalla pipeline) non deve
   lasciare vuota la colonna della miniatura: la card diventa a colonna unica. */
.pcard a:not(:has(.pthumb)){grid-template-columns:1fr}
.pthumb{background:var(--ink);overflow:hidden}
.pthumb img{display:block;width:100%;height:100%;min-height:200px;object-fit:cover}
.pthumb-fb{display:grid;place-items:center;min-height:200px;background:var(--ink)}
.pthumb-fb img{width:36%;height:auto;min-height:0;object-fit:contain;opacity:.9}
.pbody{padding:24px 26px;min-width:0}
.pcard h2{font-size:1.35rem;margin:.5rem 0 .6rem;max-width:38ch}
.pcard p{color:var(--muted);font-size:.96rem;max-width:70ch}
.pmeta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-family:var(--fm);font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.ptags{display:flex;gap:6px;flex-wrap:wrap}
.ptags span{border:1px solid var(--line-2);border-radius:999px;padding:.15rem .55rem;color:var(--muted);letter-spacing:.06em}
.plink{display:inline-block;margin-top:1rem;color:var(--pink);font-weight:700;font-size:.9rem}
@media(max-width:640px){.pcard a{grid-template-columns:1fr}.pthumb img{aspect-ratio:16/9;min-height:0}}
@media(max-width:820px){.pbody{padding:20px}.pcard h2{font-size:1.15rem}}

/* ---------- article sources (the anti-invention receipt) ---------- */
.sources{margin-top:3.4rem;padding-top:1.6rem;border-top:1px solid var(--line-2)}
.sources h2{font-size:1.15rem;margin:0 0 .6rem}
.sources .grounded{color:var(--muted);font-size:.92rem;max-width:74ch;margin-bottom:1rem}
.sources ol{padding-left:1.25rem;margin:0}
.sources li{color:var(--muted);font-size:.9rem;word-break:break-word}
.sources li+li{margin-top:.4rem}
.sources li::marker{color:var(--pink)}
.sources a{color:var(--pink);border-bottom:1px solid var(--pink-line)}


/* ============================================================================
   THE ARTICLE PAGE — laid out to convert, in the order the sales manual argues for.
   Its most repeated idea (6 of 8 sources): neutralise the objections BEFORE you name
   the price. Almost every company blog does the reverse — a priced button dropped
   mid-article, asking for the sale while the reader still has three doubts. So the
   price appears exactly once, at the end, after those doubts are answered.
   ========================================================================== */

/* the article's own illustration. Our ghost is hidden in it — the site already has a
   barely-visible ghost wandering the home page, kept there on purpose; this is the same
   creature in a new room, and finding it is the point. */
.heroart{margin:0 0 2.4rem;max-width:none}
/* aspect-ratio + cover: every cover renders at exactly the same shape, whatever size the
   generator produced (a 1280×720 and a 1024² have both shipped) — enforced here, in the page,
   not in the model. */
.heroart img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;
  border:1px solid var(--line);border-radius:14px}
.heroart figcaption{margin-top:.6rem;font-family:var(--fm);font-size:.72rem;letter-spacing:.06em;
  color:var(--faint)}
/* the hunt: the hero enlarges on click — at reading size the ghost is genuinely hard to see */
.heroart img{cursor:zoom-in}
.ghostbox{border:0;padding:0;background:transparent;max-width:min(96vw,1440px)}
/* no backdrop-filter: blurring the whole page behind a 1400px dialog is exactly the kind of
   repaint that made the win popup stutter. A near-opaque scrim reads the same and costs nothing. */
.ghostbox::backdrop{background:rgba(4,6,12,.9)}
.ghostbox .gb-img{display:block;width:min(94vw,1400px);height:auto;aspect-ratio:1200/630;object-fit:cover;
  border-radius:14px;cursor:crosshair}
.ghostbox.gb-won .gb-img{cursor:default}
.gb-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:12px}
.gb-msg{color:var(--text-fixed);font-size:.95rem;line-height:1.5;margin:0}
.gb-msg b{color:var(--pink)}
.gb-msg code{font-family:var(--fm);background:var(--pink-soft);border:1px solid var(--pink-line);
  border-radius:6px;padding:.1em .45em;color:var(--pink);font-weight:700}
.gb-msg small{color:var(--muted-fixed)}
.ghostbox .gb-close{flex:none;color:var(--text-fixed);border-color:rgba(140,155,190,.4)}
/* the win popup: a card OVER the picture (the scene stays visible behind, dimmed — the owner's
   call, and the right one: the prize appears where the hunt happened), THEMED like the site —
   var(--raised)/var(--text) resolve against :root[data-theme], so the card is white on a light
   site and ink on a dark one. The backdrop scrim is dark in both, as scrims are. */
.ghostbox{position:relative}
/* dimming the scene = a flat translucent veil, NOT a filter on the 1400px image: blur()/saturate()
   at popup time forced a full-image repaint in the same frame as the card animation — the lag the
   owner felt. pointer-events:none keeps the Close button under it clickable. */
.ghostbox.gb-won .gb-img{cursor:default}
.ghostbox.gb-won::after{content:"";position:absolute;inset:0;z-index:1;border-radius:14px;
  background:rgba(6,8,14,.62);pointer-events:none}
.gb-win{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);z-index:2;
  width:min(88vw,440px);text-align:center;background:var(--raised);color:var(--text);
  border:1px solid var(--pink-line);border-radius:18px;padding:32px 30px 24px;
  box-shadow:0 60px 120px -40px var(--pink-glow),0 30px 80px -30px rgba(0,0,0,.5);
  animation:gb-pop .45s cubic-bezier(.2,1.4,.4,1)}
.gb-win>img{width:64px;height:64px;margin-bottom:10px}
.gb-win h3{font-family:var(--fd);font-size:1.6rem;color:var(--text);margin:0 0 .8rem}
.gb-code{margin:0 0 1.1rem}
.gb-code code{display:inline-block;font-family:var(--fm);font-size:1.25rem;font-weight:700;color:var(--pink);
  background:var(--pink-soft);border:1px dashed var(--pink-line);border-radius:10px;padding:.45em .9em;cursor:copy}
.gb-code small,.gb-terms small{display:block;margin-top:.5rem;color:var(--muted);font-size:.75rem}
.gb-nocode{color:var(--muted);font-size:.9rem;margin:0 0 1.1rem}
.gb-sell{color:var(--text);font-size:.95rem;line-height:1.6;max-width:36ch;margin:0 auto 1.3rem}
.gb-terms{margin:.9rem 0 0}
@keyframes gb-pop{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}
  70%{transform:translate(-50%,-50%) scale(1.06)}100%{transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.gb-win{animation:none}}

/* the FOLD: takeaways + hero as ONE composed band (the hero alone, full-width, read as a slab
   "stuck on top" — the owner's words). Side by side where there is room, stacked on a phone. */
.foldgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin:0 0 2.6rem;align-items:center}
@media(min-width:980px){.foldgrid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:26px}}
.foldgrid .tldr,.foldgrid .heroart{margin:0;max-width:none}

/* the short version — for the reader who will not read (and for the machines that quote us) */
.tldr{border:1px solid var(--line-2);border-left:3px solid var(--pink);border-radius:0 14px 14px 0;
  background:var(--raised);padding:20px 24px;margin:0 0 2.4rem;max-width:74ch}
.tldr h2{font-size:.72rem!important;font-family:var(--fm);letter-spacing:.14em;text-transform:uppercase;
  color:var(--pink);margin:0 0 .7rem!important;padding:0!important}
.tldr ul{margin:0;padding-left:1.15rem}
.tldr li{color:var(--text);font-size:.97rem;line-height:1.6}
.tldr li+li{margin-top:.5rem}
.tldr li::marker{color:var(--pink)}

/* the quiet mid-article ask. No price. One line. It is a door, not a salesman. */
.softcta{margin:2.6rem 0;padding:14px 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  max-width:74ch}
.softcta p{color:var(--muted);font-size:.94rem}
.softcta a{color:var(--pink);font-weight:700;white-space:nowrap}
.softcta a:hover{text-decoration:underline}

/* the objections — answered before a single price is mentioned */
.convert{margin-top:3.6rem;padding-top:2.2rem;border-top:1px solid var(--line-2)}
.convert>h2{font-size:1.5rem;margin:0 0 1.4rem}
.objs{display:grid;gap:14px;margin-bottom:2.2rem}
.obj{border:1px solid var(--line);border-radius:13px;background:var(--raised);padding:18px 20px}
.obj h3{font-size:1rem;margin:0 0 .5rem;color:var(--text)}
.obj p{color:var(--muted);font-size:.94rem;line-height:1.65;margin:0}
@media(min-width:760px){.objs{grid-template-columns:repeat(3,1fr)}}

/* the offer. It appears once, and only here. */
.offer{border:1px solid var(--pink-line);border-radius:16px;background:var(--raised);padding:28px 30px;
  box-shadow:0 40px 90px -50px var(--pink-glow)}
.offer h3{font-size:1.35rem;margin:0 0 .6rem;max-width:26ch}
.offer>p{color:var(--muted);font-size:.96rem;max-width:62ch;margin:0 0 1.2rem}
.offer ul{list-style:none;padding:0;margin:0 0 1.6rem;display:grid;gap:10px}
.offer li{position:relative;padding-left:18px;color:var(--muted);font-size:.94rem;line-height:1.6}
.offer li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;
  background:var(--pink)}
.offer li b{color:var(--text)}
@media(max-width:820px){.offer{padding:22px}}

/* read next — a reader who stays is a reader who comes back */
.next{margin-top:3.2rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.next h2{font-size:1.1rem;margin:0 0 1rem}
.nextgrid{display:grid;gap:12px}
@media(min-width:760px){.nextgrid{grid-template-columns:1fr 1fr}}
.nextgrid a{display:block;border:1px solid var(--line);border-radius:12px;background:var(--raised);
  padding:16px 18px;overflow:hidden;transition:border-color .18s,transform .18s}
.nextgrid a:hover{border-color:var(--pink-line);transform:translateY(-2px)}
/* the card's cover — full-bleed against the card padding, same enforced shape as the hero */
.nthumb{display:block;margin:-16px -18px 14px}
.nthumb img{display:block;width:100%;aspect-ratio:1200/630;object-fit:cover}
.nextgrid span{display:block;font-family:var(--fm);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-bottom:.4rem}
.nextgrid b{font-family:var(--fd);font-weight:600;font-size:1rem;line-height:1.35;color:var(--text)}

/* ---------- final CTA strip ---------- */
.cta-strip{border-top:1px solid var(--line);background:var(--raised)}
.cta-in{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:44px 0}
.cta-in h2{font-size:1.5rem}
.cta-in p{color:var(--muted);font-size:.95rem;margin-top:.5rem}
@media(max-width:820px){.cta-in{flex-direction:column;align-items:flex-start;padding:36px 0}}

/* ---------- footer (identical to index.html) ---------- */
footer{border-top:1px solid var(--line);padding:54px 0 40px;background:var(--page)}
.foot{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:30px}
.foot h3{font-family:var(--fm);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 14px}
.foot a{display:block;color:var(--muted);font-size:.9rem;padding:4px 0}
.foot a:hover{color:var(--text)}
.foot .tag{color:var(--muted);font-size:.9rem;margin-top:12px;max-width:34ch;line-height:1.6}
.foot .socials{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.foot .social{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;padding:0;border:1px solid var(--line);border-radius:10px;color:var(--muted);transition:color .15s,border-color .15s,background .15s}
.foot .ph-badge{display:inline-flex;align-items:center;line-height:0;opacity:.9;transition:opacity .15s}
.foot .ph-badge:hover{opacity:1}
.foot .ph-badge rect{transition:stroke .15s}
.foot .ph-badge:hover rect{stroke:#DA552F}
.foot .social:hover{color:var(--pink);border-color:var(--pink-line);background:var(--pink-soft)}
.legal-line{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;margin-top:38px;padding-top:22px;
  border-top:1px solid var(--line);color:var(--faint);font-family:var(--fm);font-size:.72rem}
@media(max-width:820px){.foot{grid-template-columns:1fr 1fr}}

/* ── Modulo contatti (/contact/) ────────────────────────────────────────────
   Campi grandi e leggibili: chi scrive qui ha di norma un problema, e non deve
   combattere anche con il modulo. Focus visibile (WCAG 2.4.7) sullo stesso rosa
   dei bottoni, così la tastiera vede dov'è. */
/* Nessun max-width proprio: il modulo occupa la colonna come le tabelle e le
   schede, così la pagina ha UN bordo sinistro e UN bordo destro. Con una
   larghezza sua era il terzo allineamento della stessa pagina. */
.contact-form{display:grid;gap:16px;margin:6px 0 26px}
.contact-form .cf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-form .cf-field{display:grid;gap:6px}
.contact-form .cf-field > span{font-family:var(--fm);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint)}
.contact-form input,.contact-form select,.contact-form textarea{
  width:100%;padding:.75rem .85rem;font:inherit;font-size:.95rem;color:var(--text);
  background:var(--overlay);border:1px solid var(--line-2);border-radius:12px;
  transition:border-color .15s,box-shadow .15s}
.contact-form textarea{resize:vertical;min-height:150px;line-height:1.6}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
.contact-form input:focus-visible,.contact-form select:focus-visible,.contact-form textarea:focus-visible{
  outline:2px solid var(--pink);outline-offset:2px}
.contact-form .cf-note{color:var(--muted);font-size:.85rem;line-height:1.6;margin:0}
.contact-form .cf-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.contact-form .cf-status{font-size:.9rem;color:var(--muted)}
.contact-form .cf-status.cf-ok{color:var(--text)}
.contact-form .cf-status.cf-err{color:var(--pink)}
.contact-form .cf-hide{display:none}
@media(max-width:640px){.contact-form .cf-row{grid-template-columns:1fr}}

/* ---------- download: le tre schede, e il «coming soon» ---------- */
.dlgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:8px 0 10px}
@media(max-width:820px){.dlgrid{grid-template-columns:1fr}}
.dlcard{display:grid;gap:6px;padding:22px;border:1px solid var(--line);border-radius:14px;
  background:var(--raised);color:var(--text);position:relative;
  transition:border-color .15s,transform .15s}
.dlcard:hover{border-color:var(--pink);transform:translateY(-2px)}
/* Il link è il BOTTONE, non la scheda: dentro la nota c'è il .deb, e un'ancora
   dentro un'ancora è HTML non valido — il parser chiude la prima e il secondo
   link finisce fuori dalla scheda. Si vedeva solo guardando la pagina. */
.dlcard a.dlbtn{text-decoration:none}
.dlcard a.dlbtn:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.dlcard .dlos{font-family:var(--fm);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.dlcard .dlname{font-size:1.08rem;font-weight:600}
/* `a.dlbtn` e non `.dlbtn`: la regola generica dei link della prosa arriva dopo
   e vinceva sul colore — testo rosa su fondo rosa, cioè un bottone VUOTO. Si
   vede solo guardando la pagina: il testo nel sorgente c'era. */
.dlcard a.dlbtn{display:inline-flex;align-items:center;justify-content:center;margin-top:8px;
  padding:.6rem 1rem;border-radius:11px;background:var(--pink);color:#1a1005;font-weight:600;font-size:.95rem}
.dlcard .dlnote{color:var(--muted);font-size:.84rem;line-height:1.5}
.dlcard .dlnote a{color:var(--pink)}
/* La scheda del sistema riconosciuto si distingue con un bordo e un'etichetta,
   non nascondendo le altre: l'etichetta viene da `data-yours`, così il testo è
   tradotto nella pagina e non dentro il CSS. */
.dlcard.is-yours{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
.dlcard.is-yours::after{content:attr(data-yours);position:absolute;top:12px;right:14px;
  font-family:var(--fm);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--pink)}
.dlall{margin:.2rem 0 0;font-size:.9rem}
.dlall a{color:var(--pink)}

.dlsoon{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:22px;border:1px dashed var(--line-2);border-radius:14px;background:var(--overlay);margin:6px 0}
.dlsoon h3{margin:.35rem 0 .4rem;font-size:1.05rem}
.dlsoon p{margin:0;color:var(--muted);font-size:.94rem;line-height:1.6;max-width:62ch}
.dlsoon-tag{font-family:var(--fm);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}

.dlmodal{border:1px solid var(--line);border-radius:16px;background:var(--raised);color:var(--text);
  max-width:min(520px,92vw);padding:26px}
.dlmodal::backdrop{background:rgba(12,10,8,.55)}
.dlmodal h3{margin:0 0 .6rem;font-size:1.15rem}
.dlmodal p{margin:0 0 .8rem;color:var(--muted);font-size:.95rem;line-height:1.65}
.dlmodal a{color:var(--pink)}
.dlmodal form{margin-top:14px}

/* ============================================================================
   Pagine di prodotto — /business/, /personal/, /pricing/ (#286)
   Tre blocchi: le schede edizione, il tour a schermate, la fascia prezzo.
   ⚠️ `.edcard a.edbtn` e non `.edcard .edbtn`: la regola generica dei link
   della prosa arriva DOPO e vincerebbe sul colore — è lo stesso difetto già
   pagato su `.dlbtn`, e nel sorgente non si vede.
   ========================================================================== */

/* ⚠️ Le colonne rispondono al CONTENITORE, non alla finestra: dentro `.prose` la
   rail dell'indice si porta via 272 px, quindi a 1024 px di finestra una media query
   dava tre schede da 207 px — due parole per riga — mentre a 834 px, senza rail, ce
   n'erano 734 di spazio. La finestra non sa quanto è larga la colonna. */
.prose{container-type:inline-size;container-name:prose}
.edgrid{display:grid;grid-template-columns:1fr;gap:16px;margin:10px 0 6px}
@container prose (min-width:790px){.edgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@container prose (min-width:520px){.edgrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.edcard{position:relative;display:flex;flex-direction:column;gap:10px;padding:24px 22px;
  border:1px solid var(--line);border-radius:14px;background:var(--overlay);transition:border-color .2s,transform .2s}
.edcard:hover{border-color:var(--pink);transform:translateY(-2px)}
.edcard.is-lead{border-color:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
.edcard .edname{font-family:var(--fd);font-size:1.22rem;font-weight:600;letter-spacing:-.02em}
.edcard .edtag{font-family:var(--fm);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.edcard.is-lead .edtag{color:var(--pink)}
.edcard .edprice{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;margin:.1rem 0 .2rem}
.edcard .edbig{font-family:var(--fd);font-size:2.1rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.edcard .edper{color:var(--muted);font-size:.88rem}
.edcard .edline{color:var(--muted);font-size:.9rem;line-height:1.6}
.edcard ul{margin:.2rem 0 0;padding:0;list-style:none;display:grid;gap:.42rem}
.edcard li{position:relative;padding-left:1.4rem;font-size:.92rem;line-height:1.55;color:var(--text)}
.edcard li::before{content:'✓';position:absolute;left:0;top:-.02rem;color:var(--pink);font-weight:700}
.edcard li.no{color:var(--muted)}
.edcard li.no::before{content:'—';color:var(--faint);font-weight:600}
.edcard .edfoot{margin-top:auto;padding-top:14px}
.edcard a.edbtn{display:inline-flex;align-items:center;justify-content:center;width:100%;
  padding:.62rem 1rem;border-radius:11px;background:var(--pink);color:#1a1005;font-weight:600;
  font-size:.95rem;text-decoration:none}
.edcard a.edbtn:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.edcard a.edbtn.ghost{background:transparent;color:var(--text);border:1px solid var(--line-2)}
.edcard a.edbtn.ghost:hover{border-color:var(--pink)}

/* Il tour: una schermata con la sua didascalia. `loading=lazy` sulle immagini,
   e il bordo tiene il PNG chiaro staccato dal fondo scuro. */
.shots{display:grid;gap:26px;margin:8px 0 4px}
/* `margin:0` sulla figure: lo user agent ne mette 40px per lato e nel CSS non si
   vede. Su un telefono da 390 px riduceva le schermate a 222 px, cioè illeggibili. */
.shot{display:grid;gap:12px;margin:0}
.shot img{width:100%;border:1px solid var(--line);border-radius:14px;background:var(--subtle);display:block}
.shot figcaption{color:var(--muted);font-size:.92rem;line-height:1.6}
.shot figcaption b{color:var(--text);font-weight:600}
@container prose (min-width:720px){
  .shots.two{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
}

/* La fascia in testa alle pagine prodotto: il prezzo di attacco, senza tabella. */
.pstrip{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline;padding:18px 22px;
  border:1px solid var(--line);border-left:3px solid var(--pink);border-radius:12px;
  background:var(--overlay);margin:4px 0 6px}
.pstrip .psn{font-family:var(--fd);font-size:1.5rem;font-weight:600;letter-spacing:-.02em}
.pstrip .psl{color:var(--muted);font-size:.92rem;line-height:1.55}
.pstrip .psl b{color:var(--text)}