/* Proposta di restyle "indie": carta calda, inchiostro, un solo colore.
 * Solo CSS: stessi testi, stessa struttura HTML. Si carica DOPO lo <style> della
 * pagina, per questo i selettori contro gli stili inline usano !important. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT@9..144,600..800,100&display=swap");

:root {
  --paper: #f4eee1;
  --paper-2: #ebe3d1;
  --card: #fbf7ee;
  --ink: #231c14;
  --ink-soft: #5b5042;
  --amber: #f0a300;
  --amber-ink: #9a5b00;
  --note: #fff0b8;
  --win: #1e1812;
  --green: #1f8a5b;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
}

::selection { background: var(--amber); color: var(--ink); }

.sf {
  font-family: var(--ui) !important;
  background-color: var(--paper) !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .14  0 0 0 0 .1  0 0 0 0 .06  0 0 0 .05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color: var(--ink) !important;
}
.sf a { color: var(--amber-ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.sf a:hover { color: var(--ink); }
.sf a.btn-primary, .sf a.btn-secondary, .sf .nav-links a, .sf .lang-switch-menu a, .sf .plan-card a { text-decoration: none; }

/* via i bagliori e i gradienti decorativi */
.sf [style*="radial-gradient(circle, rgba(253,182,0,.35)"],
.sf [style*="radial-gradient(circle at 50% 0%"] { display: none !important; }

/* testo fuori dalle finestre: da bianco traslucido a inchiostro */
.sf [style*="color:rgba(255,255,255,.85)"]{ color: #3a3025 !important; }
.sf [style*="color:rgba(255,255,255,.75)"]{ color: #3a3025 !important; }
.sf [style*="color:rgba(255,255,255,.65)"]{ color: #5b5042 !important; }
.sf [style*="color:rgba(255,255,255,.6)"]{ color: #5b5042 !important; }
.sf [style*="color:rgba(255,255,255,.55)"]{ color: #6b5f4e !important; }
.sf [style*="color:rgba(255,255,255,.5)"]{ color: #6b5f4e !important; }
.sf [style*="color:rgba(255,255,255,.45)"]{ color: #85785f !important; }
.sf [style*="color:rgba(255,255,255,.4)"]{ color: #85785f !important; }
.sf [style*="color:rgba(255,255,255,.3)"]{ color: #a39880 !important; }
.sf [style*="color:rgba(255,255,255,.28)"]{ color: #a39880 !important; }
.sf [style*="color:#3DDC97"] { color: var(--green) !important; }
.sf [style*="color:#FDB600"] { color: var(--amber-ink) !important; }
.sf [style*="color: #fff"] { color: var(--ink) !important; }

h1, h2, h3, .sf [style*="font-size:32px"] {
  font-family: var(--serif);
  font-variation-settings: "SOFT" 100;
}
.sf h1.hero-h1 { font-weight: 700 !important; letter-spacing: -.025em !important; line-height: 1.06 !important; }
.sf h2 { font-weight: 700 !important; letter-spacing: -.02em !important; }
.sf h3 { font-weight: 700 !important; }
.sf [style*="font-weight:800; font-size:18px"] { font-family: var(--serif); font-weight: 700 !important; font-size: 21px !important; }

/* titoli di sezione a sinistra, non centrati su ogni blocco */
.sf div:has(> .section-h2) { text-align: left !important; align-items: flex-start !important; }
.sf div:has(> .section-h2) p { text-align: left !important; }
.sf > div:first-of-type > .container[style*="max-width:980px"] { text-align: left !important; align-items: flex-start !important; }
.sf > div:first-of-type > .container[style*="max-width:980px"] > div { align-items: flex-start !important; }

/* etichette: testo da terminale invece di pillole di vetro */
.chip {
  background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  font-family: var(--mono); font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: .08em; text-transform: uppercase; color: var(--amber-ink) !important;
}
.chip::before { content: ""; width: 8px; height: 8px; background: var(--amber); border: 1.5px solid var(--ink); display: inline-block; }

/* pulsanti: piatti, bordo d'inchiostro, ombra dura che si schiaccia al click */
.sf a.btn-primary {
  background: var(--amber) !important; color: var(--ink) !important;
  border: 2px solid var(--ink) !important; border-radius: 8px !important;
  box-shadow: 3px 3px 0 var(--ink) !important;
  transition: transform .08s, box-shadow .08s;
}
.sf a.btn-primary:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--ink) !important; color: var(--ink); }
.sf a.btn-primary:active { transform: translate(3px,3px); box-shadow: 0 0 0 var(--ink) !important; }
.sf a.btn-secondary {
  background: var(--card) !important; color: var(--ink) !important;
  border: 2px solid var(--ink) !important; border-radius: 8px !important;
  box-shadow: 2px 2px 0 var(--ink); transition: transform .08s, box-shadow .08s;
}
.sf a.btn-secondary:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); background: var(--amber) !important; }
.sf a.btn-secondary:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }

.nav-burger { border: 2px solid var(--ink) !important; background: var(--card) !important; color: var(--ink) !important; border-radius: 8px !important; }
.lang-switch > summary { background: var(--card) !important; color: var(--ink) !important; border: 2px solid var(--ink) !important; border-radius: 8px !important; font-family: var(--mono); font-size: 12px !important; }
.lang-switch[open] > summary { background: var(--amber) !important; }
.lang-switch-menu { background: var(--card) !important; border: 2px solid var(--ink) !important; border-radius: 10px !important; box-shadow: 4px 4px 0 var(--ink) !important; }
.lang-switch-menu a, .lang-switch-menu span { color: var(--ink) !important; border-radius: 6px !important; }
.lang-switch-menu a:hover { background: var(--paper-2) !important; }
.lang-switch-menu span.current { color: var(--amber-ink) !important; }

/* carte su carta: FAQ, iPhone, contatti */
.panel {
  background: var(--card) !important; border: 2px solid var(--ink) !important; border-radius: 10px !important;
  box-shadow: 4px 4px 0 var(--ink); backdrop-filter: none;
}

/* finestre di app: scure, con barra del titolo da macOS */
:is(.feature-visual .panel, .sf > div:first-of-type > .container[style*="max-width:940px"] .panel, .status-strip, #iphone .panel) { color: #fff; }
.feature-visual .panel, .sf > div:first-of-type > .container[style*="max-width:940px"] .panel {
  background: var(--win) !important; border-radius: 12px !important; box-shadow: 6px 6px 0 var(--ink);
  padding-top: 56px !important;
}
.feature-visual .panel::before, .sf > div:first-of-type > .container[style*="max-width:940px"] .panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 28px;
  background:
    radial-gradient(circle at 16px 14px, #ff5f57 5px, transparent 5.5px),
    radial-gradient(circle at 34px 14px, #febc2e 5px, transparent 5.5px),
    radial-gradient(circle at 52px 14px, #28c840 5px, transparent 5.5px),
    #2b231a;
  border-bottom: 1px solid #000;
}
#iphone .panel { background: var(--win) !important; box-shadow: 6px 6px 0 var(--ink); }
:is(.feature-visual .panel, .sf > div:first-of-type > .container[style*="max-width:940px"] .panel, .status-strip, #iphone .panel) [style*="color:rgba(255,255,255,.85)"]{ color: rgba(255,255,255,.85) !important; }
:is(.feature-visual .panel, .sf > div:first-of-type > .container[style*="max-width:940px"] .panel, .status-strip, #iphone .panel) [style*="color:rgba(255,255,255,.75)"]{ color: rgba(255,255,255,.75) !important; }
:is(.feature-visual .panel, .sf > div:first-of-type > .container[style*="max-width:940px"] .panel, .status-strip, #iphone .panel) [style*="color:rgba(255,255,255,.65)"]{ color: rgba(255,255,255,.65) !important; }
:is(.feature-visual .panel, .sf > div:first-of-type > .container[style*="max-width:940px"] .panel, .status-strip, #iphone .panel) [style*="color:rgba(255,255,255,.6)"]{ color: rgba(255,255,255,.6) !important; }
:is(.feature-visual .panel, .sf > div:first-of-type > .container[style*="max-width:940px"] .panel, .status-strip, #iphone .panel) [style*="color:rgba(255,255,255,.55)"]{ color: rgba(255,255,255,.55) !important; }
:is(.feature-visual .panel, .sf > div:first-of-type > .container[style*="max-width:940px"] .panel, .status-strip, #iphone .panel) [style*="color:rgba(255,255,255,.5)"]{ color: rgba(255,255,255,.5) !important; }
:is(.feature-visual .panel, .sf > div:first-of-type > .container[style*="max-width:940px"] .panel, .status-strip, #iphone .panel) [style*="color:rgba(255,255,255,.45)"]{ color: rgba(255,255,255,.45) !important; }
:is(.feature-visual .panel, .sf > div:first-of-type > .container[style*="max-width:940px"] .panel, .status-strip, #iphone .panel) [style*="color:rgba(255,255,255,.4)"]{ color: rgba(255,255,255,.4) !important; }
:is(.feature-visual .panel, .sf > div:first-of-type > .container[style*="max-width:940px"] .panel, .status-strip, #iphone .panel) [style*="color:rgba(255,255,255,.3)"]{ color: rgba(255,255,255,.3) !important; }
:is(.feature-visual .panel, .sf > div:first-of-type > .container[style*="max-width:940px"] .panel, .status-strip, #iphone .panel) [style*="color:rgba(255,255,255,.28)"]{ color: rgba(255,255,255,.28) !important; }

.armed-tile { background: #2b2113 !important; border: 2px solid var(--amber) !important; border-radius: 14px !important; animation: none !important; }
.mini-tile { background: #261e15 !important; border: 1.5px dashed #5b4a33 !important; border-radius: 12px !important; }
.status-strip { background: #15100a !important; border: 1px solid #3a2f22 !important; border-radius: 8px !important; }
.bar-track, .bar-fill { border-radius: 2px !important; }
.bar-fill { background: var(--amber) !important; }

.num-badge {
  background: var(--ink) !important; color: var(--paper) !important; border: 0 !important; border-radius: 4px !important;
  font-family: var(--mono); font-weight: 600 !important; width: auto !important; min-width: 34px; padding: 0 8px; height: 28px !important;
}

/* piani: biglietti di carta, quello consigliato giallo con adesivo storto */
.plan-card {
  background: var(--card) !important; border: 2px solid var(--ink) !important; border-radius: 10px !important;
  box-shadow: 4px 4px 0 var(--ink);
}
.plan-card.recommended { background: var(--note) !important; box-shadow: 6px 6px 0 var(--ink); }
.rec-badge {
  background: var(--amber) !important; color: var(--ink) !important; border: 2px solid var(--ink); border-radius: 4px !important;
  font-family: var(--mono); transform: rotate(-3deg); top: -16px !important;
}
/* Il badge di un piano non evidenziato (Lifetime, "il più conveniente") resta un'etichetta,
   non compete con quello del piano da cui si comincia. */
.plan-card:not(.recommended) .rec-badge { background: var(--card) !important; }

/* "Why I built this": un biglietto lasciato sul tavolo */
.sf .container[style*="max-width:720px"] {
  background: var(--note); border: 2px solid var(--ink); border-radius: 4px; padding: 40px 40px 34px !important;
  box-shadow: 6px 6px 0 var(--ink); transform: rotate(-.6deg); align-items: flex-start !important; text-align: left !important;
}
.sf .container[style*="max-width:720px"] [style*="font-weight:700; color"] { font-family: var(--serif); font-style: italic; font-size: 17px !important; }

.sf .container[style*="border-top:1px solid rgba(255,255,255,.08)"] { border-top: 2px dashed var(--ink-soft) !important; }

/* banner cookie */
#ga-consent-banner { background: var(--card) !important; border: 2px solid var(--ink) !important; border-radius: 10px !important; box-shadow: 4px 4px 0 var(--ink); backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
#ga-consent-banner p { color: var(--ink-soft) !important; }
#ga-consent-banner a { color: var(--ink) !important; }
#ga-consent-banner button { border-radius: 8px !important; border: 2px solid var(--ink) !important; color: var(--ink) !important; }
#ga-consent-accept { background: var(--amber) !important; }
#ga-consent-reject { background: var(--card) !important; }

@media (max-width: 860px) {
  .nav-links.open { background: var(--paper) !important; border-bottom: 2px solid var(--ink) !important; }
  .nav-links.open a { border-bottom: 1px dashed var(--ink-soft) !important; }
  .sf .container[style*="max-width:720px"] { padding: 28px 22px !important; }
}

/* correzioni dopo la prima prova a schermo */
.num-badge { display: inline-flex !important; align-self: flex-start; width: auto !important; }
.mascot-scene { margin-left: 0 !important; margin-right: 0 !important; }

/* sottopagine: logo e link con colore bianco scritto senza spazio */
.sf [style*="color:#fff"] { color: var(--ink) !important; }
:is(.feature-visual .panel, .sf > div:first-of-type > .container[style*="max-width:940px"] .panel, .status-strip, #iphone .panel) [style*="color:#fff"] { color: #fff !important; }
.sf a[style*="display:flex"], .sf a[style*="display:inline-flex"] { text-decoration: none; }
.sf [style*="font-weight:800; font-size:17px"] { font-family: var(--serif); font-weight: 700 !important; font-size: 21px !important; }

/* sottopagine (pricing, features, compare, articoli): le regole di testo stanno nel loro <style>, non inline */
.sf .feature-text p, .sf .trust-list li, .sf .container p, .sf .container li, .sf article p, .sf .callout p { color: #3a3025; }
.sf .for-line { color: var(--ink-soft); border-top-color: rgba(35,28,20,.25); }
.sf table.cmp th { color: var(--ink-soft); border-bottom: 2px solid var(--ink); font-family: var(--mono); }
.sf table.cmp td { color: #3a3025; border-bottom: 1px dashed rgba(35,28,20,.3); }
.sf table.cmp td.row-label { color: var(--ink); }
.sf .compare-card { color: var(--ink); }
.sf code { background: var(--paper-2); border: 1px solid rgba(35,28,20,.25); border-radius: 4px; font-family: var(--mono); color: var(--ink); }
.sf .tree { font-family: var(--mono); }
.sf .tree .l1 { color: var(--amber-ink); }
.sf .tree .l2 { color: var(--ink); }
.sf .tree .l3 { color: var(--ink-soft); }
.sf .tree .l4 { color: #85785f; }
.sf .callout strong { color: var(--amber-ink); }
.sf article h1, .sf .article-h1 { font-weight: 700 !important; letter-spacing: -.02em; }

/* privacy.html e simili: variabili invece di colori diretti */
:root {
  --text-primary: #231c14;
  --text-secondary: #5b5042;
  --text-tertiary: #85785f;
  --card-stroke: #231c14;
  --card-fill: #fbf7ee;
}
body { background-color: var(--paper); color: var(--ink); }

/* finestre: il verde e l'ambra dei testi restano quelli originali sul fondo scuro */
:is(.feature-visual .panel, .sf > div:first-of-type > .container[style*="max-width:940px"] .panel, .status-strip, #iphone .panel) [style*="color:#3DDC97"] { color: #3ddc97 !important; }
:is(.feature-visual .panel, .sf > div:first-of-type > .container[style*="max-width:940px"] .panel, .status-strip, #iphone .panel) [style*="color:#FDB600"] { color: #fdb600 !important; }
.panel { position: relative; }

/* privacy.html: sfondo scuro con gradienti propri */
:root { color-scheme: light; }
body { background-image: none; }
main a { color: var(--amber-ink); }
main h1, main h2 { font-family: var(--serif); font-weight: 700; }
#ga-manage-consent { border: 2px solid var(--ink) !important; border-radius: 8px !important; box-shadow: 2px 2px 0 var(--ink); color: var(--ink) !important; }
.back { color: var(--ink-soft); }

/* tabella di compare: la carta deve coprire tutta la tabella, altrimenti su mobile
   il bordo resta largo come lo schermo e scorre insieme al contenuto */
.table-wrap { padding: 0 6px 8px 0; }
.table-wrap > .panel { min-width: 720px; }

/* blog: titoli delle sezioni e sfumature del carosello sul tema carta */
.article-section-title { color: var(--ink-soft); }
.strip-fade-left { background: linear-gradient(90deg, var(--paper), transparent); }
.strip-fade-right { background: linear-gradient(270deg, var(--paper), transparent); }

/* home: funzioni 04-07 in breve e secondo invito a scaricare */
/* Le quattro funzioni stanno in un solo foglio diviso a tratteggio: quattro riquadri
   pieni con solo un titolo sembravano pulsanti. Il link sta sulla riga dell'etichetta. */
.feature-more { margin-top: 110px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px 20px; }
.feature-more > .chip { grid-column: 1; grid-row: 1; justify-self: start; }
.feature-more > a { grid-column: 2; grid-row: 1; font-weight: 700; }
.feature-more ul {
  grid-column: 1 / -1; grid-row: 2; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--card); border: 2px solid var(--ink); border-radius: 10px; box-shadow: 4px 4px 0 var(--ink);
}
.feature-more li {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 24px 22px 26px;
  font-family: var(--serif); font-variation-settings: "SOFT" 100; font-weight: 700; font-size: 18px; line-height: 1.3;
}
.feature-more li + li { border-left: 2px dashed rgba(35,28,20,.3); }
.feature-more li .num-badge { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; }
/* Secondo invito senza riquadro: due fogli gialli di fila (questo e "Why I built this")
   si somigliavano troppo. Resta solo una riga tratteggiata a separarlo. */
.cta-download {
  margin-top: 90px; padding: 56px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  border-top: 2px dashed rgba(35,28,20,.3);
}
.cta-download h2 { font-size: 32px; margin: 0; }
@media (max-width: 1100px) {
  .feature-more ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-more li + li { border-left: 0; }
  .feature-more li:nth-child(even) { border-left: 2px dashed rgba(35,28,20,.3); }
  .feature-more li:nth-child(n+3) { border-top: 2px dashed rgba(35,28,20,.3); }
}
@media (max-width: 600px) {
  .feature-more ul { grid-template-columns: 1fr; }
  .feature-more li { flex-direction: row; align-items: center; padding: 18px; font-size: 17px; }
  .feature-more li:nth-child(even) { border-left: 0; }
  .feature-more li + li { border-top: 2px dashed rgba(35,28,20,.3); }
}
@media (max-width: 860px) {
  .cta-download { padding-top: 40px; }
  .cta-download h2 { font-size: 26px; }
}