/* Pennino — stile del sito (condiviso da tutte le pagine).
   Palette derivata dall'icona reale dell'app: fondo scuro #1D1F24,
   banda rossa #E5484D, spunta verde #2EA043. Nessuna dipendenza esterna:
   font di sistema, coerente con "tutto in locale". Due temi. */

:root {
  --paper:   #F8F8FA;
  --paper-2: #FFFFFF;
  --paper-3: #EEEFF3;
  --ink:     #1D1F24;   /* lo scuro dell'icona */
  --ink-soft:#5B6070;
  --accent:  #E5484D;   /* la banda rossa "PDF" */
  --accent-2:#C43136;
  --green:   #2E9E44;
  --line:    #E3E4EA;
  --shadow:  rgba(29,31,36,.09);
  --nav-bg:  rgba(248,248,250,.82);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --w: min(1120px, 92vw);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#141519; --paper-2:#1C1E24; --paper-3:#22242B;
    --ink:#F1F2F5; --ink-soft:#A6ABB8; --accent:#F26166; --accent-2:#F5787C;
    --green:#4BC062; --line:#2A2C34; --shadow:rgba(0,0,0,.45);
    --nav-bg:rgba(20,21,25,.82);
  }
}
:root[data-theme="light"] {
  --paper:#F8F8FA; --paper-2:#FFFFFF; --paper-3:#EEEFF3; --ink:#1D1F24;
  --ink-soft:#5B6070; --accent:#E5484D; --accent-2:#C43136; --green:#2E9E44;
  --line:#E3E4EA; --shadow:rgba(29,31,36,.09); --nav-bg:rgba(248,248,250,.82);
}
:root[data-theme="dark"] {
  --paper:#141519; --paper-2:#1C1E24; --paper-3:#22242B; --ink:#F1F2F5;
  --ink-soft:#A6ABB8; --accent:#F26166; --accent-2:#F5787C; --green:#4BC062;
  --line:#2A2C34; --shadow:rgba(0,0,0,.45); --nav-bg:rgba(20,21,25,.82);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); line-height: 1.6; -webkit-font-smoothing: antialiased;
}
.wrap { width: var(--w); margin-inline: auto; }
a { color: inherit; }
h1,h2,h3,h4 { margin: 0; line-height: 1.1; text-wrap: balance; letter-spacing: -.02em; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 5px; }
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto} }

/* ---------- barra sticky ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg); backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-in { width: var(--w); margin-inline: auto; display: flex; align-items: center;
          gap: 18px; height: 64px; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800;
         font-size: 1.12rem; text-decoration: none; color: var(--ink); letter-spacing: -.02em; }
.brand img { width: 30px; height: 30px; display: block; }
.nav-links { display: flex; gap: 6px; margin-left: 10px; }
.nav-links a {
  text-decoration: none; color: var(--ink-soft); font-size: .95rem; font-weight: 500;
  padding: 8px 12px; border-radius: 8px;
}
.nav-links a:hover { color: var(--ink); background: var(--paper-3); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.icon-btn {
  border: 1px solid var(--line); background: var(--paper-2); color: var(--ink-soft);
  width: 38px; height: 38px; border-radius: 9px; cursor: pointer; display: grid;
  place-items: center; font-size: 1rem;
}
.icon-btn:hover { color: var(--ink); }
.nav-toggle { display: none; }

/* ---------- bottoni ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  text-decoration: none; font-weight: 700; border-radius: 10px; padding: 12px 20px;
  font-size: .98rem; border: 1px solid transparent; cursor: pointer;
  transition: transform .12s ease, background .12s ease; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px -8px var(--accent); }
.btn-primary:hover { background: var(--accent-2); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--paper-3); }
.btn-sm { padding: 9px 15px; font-size: .9rem; }

/* ---------- struttura pagina ---------- */
main { display: block; }
.section { padding: 66px 0; border-top: 1px solid var(--line); }
.section:first-of-type { border-top: none; }
.eyebrow { text-transform: uppercase; letter-spacing: .15em; font-size: .74rem;
           font-weight: 700; color: var(--accent); }
.sec-label { text-transform: uppercase; letter-spacing: .14em; font-size: .74rem;
             font-weight: 700; color: var(--ink-soft); }
.sec-title { font-size: clamp(1.7rem, 3.8vw, 2.4rem); font-weight: 800; margin-top: 12px; max-width: 22ch; }
.sec-sub { color: var(--ink-soft); font-size: 1.05rem; margin-top: 14px; max-width: 58ch; }
.lead { font-size: clamp(1.05rem, 2.2vw, 1.28rem); color: var(--ink-soft); }

/* hero */
.hero { padding: 64px 0 56px; position: relative; }
.hero h1 { font-size: clamp(2.3rem, 6vw, 3.9rem); font-weight: 800; margin-top: 16px; max-width: 15ch; }
.hero .lead { max-width: 48ch; margin-top: 20px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; align-items: center; }
.price-note { font-size: .92rem; color: var(--ink-soft); }
.price-note b { color: var(--ink); }

.trust { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 34px;
         font-size: .93rem; color: var(--ink-soft); }
.trust span { display: inline-flex; align-items: center; gap: 8px; }
.tick { width: 15px; height: 9px; border-left: 2px solid var(--green);
        border-bottom: 2px solid var(--green); transform: rotate(-50deg); flex: none; }

/* card / griglie */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px,1fr)); gap: 18px; margin-top: 34px; }
.card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px;
        padding: 24px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px var(--shadow); }
.card h3 { font-size: 1.12rem; font-weight: 800; }
.card p { margin: 0; color: var(--ink-soft); font-size: .96rem; }
.ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
      background: color-mix(in srgb, var(--accent) 12%, transparent); margin-bottom: 8px; }
.ic::before {
  content: ""; width: 21px; height: 21px; background: var(--accent);
  -webkit-mask: var(--i) center / contain no-repeat;
          mask: var(--i) center / contain no-repeat;
}
/* set di icone coerenti (SVG a tratto, mascherate col colore accento) */
.ic--sign    { --i: 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' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); }
.ic--verify  { --i: 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' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.ic--scan    { --i: 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' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M17 3h2a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M21 17v2a2 2 0 0 1-2 2h-2'/%3E%3Cpath d='M7 21H5a2 2 0 0 1-2-2v-2'/%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E"); }
.ic--edit    { --i: 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' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4Z'/%3E%3C/svg%3E"); }
.ic--form    { --i: 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' stroke-linejoin='round'%3E%3Crect x='4' y='3' width='16' height='18' rx='2'/%3E%3Cpath d='M8 8h8'/%3E%3Cpath d='M8 12h8'/%3E%3Cpath d='M8 16h5'/%3E%3C/svg%3E"); }
.ic--check   { --i: 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' stroke-linejoin='round'%3E%3Cpath d='M9 11l3 3L22 4'/%3E%3Cpath d='M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11'/%3E%3C/svg%3E"); }
.ic--layers  { --i: 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' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3C/svg%3E"); }
.ic--hash    { --i: 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' stroke-linejoin='round'%3E%3Cpath d='M4 9h16'/%3E%3Cpath d='M4 15h16'/%3E%3Cpath d='M10 3 8 21'/%3E%3Cpath d='M16 3l-2 18'/%3E%3C/svg%3E"); }
.ic--compare { --i: 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' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='6' r='3'/%3E%3Cpath d='M6 15V9a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M18 9v6a2 2 0 0 1-2 2h-6'/%3E%3C/svg%3E"); }
.ic--image   { --i: 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' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='9' cy='9' r='1.6'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E"); }
.ic--lock    { --i: 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' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
.ic--compress{ --i: 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' stroke-linejoin='round'%3E%3Cpath d='M4 14h6v6'/%3E%3Cpath d='M20 10h-6V4'/%3E%3Cpath d='M14 10 21 3'/%3E%3Cpath d='M3 21l7-7'/%3E%3C/svg%3E"); }
.ic--folder  { --i: 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' stroke-linejoin='round'%3E%3Cpath d='M4 4h5l2 3h9a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); }

/* tabella */
.table-scroll { overflow-x: auto; margin-top: 30px; border: 1px solid var(--line); border-radius: 14px; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .96rem; }
th, td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--line); }
thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); font-weight: 700; }
tbody tr:last-child td { border-bottom: none; }
td.num, .tnum { font-variant-numeric: tabular-nums; }
.col-us { background: color-mix(in srgb, var(--accent) 7%, transparent); font-weight: 600; }
th.col-us { color: var(--accent); }
.yes { color: var(--green); font-weight: 700; }
.no  { color: var(--ink-soft); }

/* box acquisto */
.buy { margin-top: 30px; background: var(--paper-2); border: 1px solid var(--line);
       border-radius: 18px; padding: 34px; display: flex; flex-wrap: wrap;
       align-items: center; justify-content: space-between; gap: 26px; box-shadow: 0 2px 8px var(--shadow); }
.buy .big { font-size: 3rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.buy .big span { font-size: 1rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
.buy ul { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; color: var(--ink-soft); font-size: .96rem; }
.buy li { display: flex; gap: 10px; align-items: center; }

/* changelog */
.release { display: grid; grid-template-columns: 160px 1fr; gap: 26px; padding: 30px 0; border-top: 1px solid var(--line); }
.release:first-child { border-top: none; }
.release .ver { position: sticky; top: 84px; align-self: start; }
.release .tag { display: inline-block; font-weight: 800; font-size: 1.1rem; }
.release .date { color: var(--ink-soft); font-size: .9rem; margin-top: 2px; }
.badge { display: inline-block; font-size: .7rem; font-weight: 700; text-transform: uppercase;
         letter-spacing: .06em; padding: 3px 8px; border-radius: 999px; margin-top: 8px;
         background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.release h3 { font-size: 1.15rem; margin-bottom: 4px; }
.release ul { margin: 6px 0 16px; padding-left: 20px; color: var(--ink-soft); }
.release li { margin: 5px 0; }
.release li b { color: var(--ink); font-weight: 600; }
@media (max-width: 720px){ .release { grid-template-columns: 1fr; gap: 10px; } .release .ver{ position: static; } }

/* faq */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 2px; }
.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 800; }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--ink-soft); margin: 12px 0 0; }

/* footer */
footer.site { padding: 46px 0 60px; border-top: 1px solid var(--line); background: var(--paper-2); }
footer.site .cols { display: flex; flex-wrap: wrap; gap: 30px 60px; justify-content: space-between; }
footer.site .brand { font-size: 1.05rem; }
footer.site nav { display: flex; flex-direction: column; gap: 8px; }
footer.site nav a { color: var(--ink-soft); text-decoration: none; font-size: .93rem; }
footer.site nav a:hover { color: var(--ink); }
footer.site .col h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); margin-bottom: 12px; }
footer.site .legal { margin-top: 34px; color: var(--ink-soft); font-size: .86rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }

/* responsive nav */
@media (max-width: 720px){
  .nav-links { display: none; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; background: var(--paper-2); border-bottom: 1px solid var(--line);
    padding: 10px; gap: 2px; }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px; }
  .nav-toggle { display: grid; }
  .nav .cta-nav { display: none; }
}

/* --------------------------------------------------- schermate dell'app
   Immagini vere della finestra di Pennino (generate da
   scripts/make_screenshots.py). Cornice sobria, angoli tondi e ombra:
   la schermata deve sembrare una finestra, non un banner. */
.shot { margin: 0; }
.shot img { width: 100%; height: auto; display: block; border-radius: 12px;
  border: 1px solid var(--line); box-shadow: 0 18px 50px var(--shadow);
  background: var(--paper-3); }
.shot figcaption { color: var(--ink-soft); font-size: .9rem; margin-top: 12px;
  text-align: center; }
.shot--hero { margin-top: 40px; }
.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 34px; margin-top: 26px; }

/* nota onesta (requisiti, limiti): informa senza spaventare */
.note { border-left: 3px solid var(--accent); background: var(--paper-2);
  border-radius: 0 10px 10px 0; padding: 14px 18px; margin-top: 22px;
  color: var(--ink-soft); font-size: .93rem; }
.note b { color: var(--ink); }

/* pagine di testo legale */
.legalpage { max-width: 760px; }
.legalpage h2 { margin: 34px 0 10px; font-size: 1.25rem; }
.legalpage h3 { margin: 22px 0 8px; font-size: 1.02rem; }
.legalpage p, .legalpage li { color: var(--ink-soft); line-height: 1.65; }
.legalpage ul { padding-left: 20px; margin: 8px 0 14px; }
.legalpage li { margin: 6px 0; }
.legalpage .updated { font-size: .86rem; }

/* ------------------------------------------------------ pagina Scarica
   Una scheda per sistema operativo: il pulsante non deve mai far
   indovinare quale file scaricare. */
.dl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px; margin-top: 30px; }
.dl-card { background: var(--paper-2); border: 1px solid var(--line);
  border-radius: 16px; padding: 26px; display: flex; flex-direction: column;
  gap: 16px; box-shadow: 0 10px 30px var(--shadow); }
.dl-os { display: flex; align-items: center; gap: 14px; }
.dl-os svg { color: var(--accent); flex: none; }
.dl-os h3 { font-size: 1.15rem; margin: 0; }
.dl-os p { margin: 2px 0 0; }
.dl-card .btn { justify-content: center; }
.dl-steps { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: .93rem; }
.dl-steps li { margin: 8px 0; line-height: 1.55; }
.dl-steps code { background: var(--paper-3); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px 6px; font-size: .86em;
  word-break: break-all; }

/* --------------------------------------------------- selettore di lingua */
/* Il pulsante mostra la lingua verso cui si passa (EN quando sei in
   italiano). Il testo lo scrive site.js: qui c'e' solo la forma. */
.lang-btn { font: 600 .78rem/1 var(--font, inherit); letter-spacing: .04em;
  min-width: 34px; padding: 0 8px; }

/* Avviso sulle pagine non ancora tradotte: invisibile in italiano,
   compare solo quando si passa all'inglese. Meglio dirlo che lasciare
   l'utente davanti a una pagina che non cambia. */
[data-untranslated] { display: none; }
html[data-lang="en"] [data-untranslated] { display: block; }