/* ── 3. Token ── */
:root {
  color-scheme: light;
  --ink: #111D14;
  --muted: #4B6652;
  --quiet: #5E6A60;
  --lime: #1A6B45;
  --lime-deep: #005131;
  --lime-wash: #E8F5EE;
  --night: #F7F9F7;
  --night-2: #FFFFFF;
  --night-3: #F0F5F1;
  --line: #E5E9E5;
  --paper: #FBFAF6;
  --crease: rgba(17, 29, 20, .08);
  --fold-shadow: rgba(0, 0, 0, .06);
  --dot: #9DB5A3;
  --on-lime: #FFFFFF;
  --wash-line: #C6E2D1;
  --ghost-line: #BFC9BF;
  --header-bg: rgba(251, 250, 246, .94);
  --selection-bg: #DCEFE3;
  --selection-ink: #111D14;
  --phone-line: #111D14;
  --phone-shadow: 0 22px 60px rgba(17, 29, 20, .12);
  --screen: #FFFFFF;
  --chip-bg: rgba(255, 255, 255, .95);
  --ok-text: #1A6B45; --ok-wash: #E8F5EE;
  --soon-text: #92400E; --soon-wash: #FEF3C7; --soon-dot: #F59E0B;
  --late-text: #B00000; --late-wash: #FEE2E2; --late-dot: #DC2626;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #ECF2ED;
    --muted: #A6B8AB;
    --quiet: #7F9285;
    --lime: #6FCF9B;
    --lime-deep: #8EDBB1;
    --lime-wash: #173325;
    --night: #0E1611;
    --night-2: #15201A;
    --night-3: #1B2820;
    --line: rgba(255, 255, 255, .11);
    --paper: #121A15;
    --crease: rgba(255, 255, 255, .07);
  --fold-shadow: rgba(0, 0, 0, .06);
    --dot: #3C5A48;
    --on-lime: #0E1611;
    --wash-line: #24503A;
    --ghost-line: rgba(255, 255, 255, .22);
    --header-bg: rgba(18, 26, 21, .88);
    --selection-bg: #1F4A33;
    --selection-ink: #ECF2ED;
    --phone-line: #2A3B31;
    --phone-shadow: 0 22px 60px rgba(0, 0, 0, .45);
    --screen: #FFFFFF;
    --chip-bg: rgba(21, 32, 26, .95);
    --ok-text: #6FCF9B; --ok-wash: #173325;
    --soon-text: #FBBF24; --soon-wash: #3A2A0A; --soon-dot: #F59E0B;
    --late-text: #FF8A80; --late-wash: #3B1414; --late-dot: #DC2626;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #ECF2ED;
  --muted: #A6B8AB;
  --quiet: #7F9285;
  --lime: #6FCF9B;
  --lime-deep: #8EDBB1;
  --lime-wash: #173325;
  --night: #0E1611;
  --night-2: #15201A;
  --night-3: #1B2820;
  --line: rgba(255, 255, 255, .11);
  --paper: #121A15;
  --crease: rgba(255, 255, 255, .07);
  --fold-shadow: rgba(0, 0, 0, .06);
  --dot: #3C5A48;
  --on-lime: #0E1611;
  --wash-line: #24503A;
  --ghost-line: rgba(255, 255, 255, .22);
  --header-bg: rgba(18, 26, 21, .88);
  --selection-bg: #1F4A33;
  --selection-ink: #ECF2ED;
  --phone-line: #2A3B31;
  --phone-shadow: 0 22px 60px rgba(0, 0, 0, .45);
  --screen: #FFFFFF;
  --chip-bg: rgba(21, 32, 26, .95);
  --ok-text: #6FCF9B; --ok-wash: #173325;
  --soon-text: #FBBF24; --soon-wash: #3A2A0A; --soon-dot: #F59E0B;
  --late-text: #FF8A80; --late-wash: #3B1414; --late-dot: #DC2626;
}

/* ── 3. Font ── */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* ── 3. Base ── */
:root {
  --display: "Plus Jakarta Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text: Nunito, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.2, .75, .25, 1);
  --wrap: min(100% - 32px, 620px);
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 500 16px/1.55 var(--text);
  overflow-wrap: break-word;
}
::selection { background: var(--selection-bg); color: var(--selection-ink); }
img, svg, picture { display: block; max-width: 100%; height: auto; }
a { color: var(--lime); text-underline-offset: 3px; }
a:hover { color: var(--lime-deep); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--lime); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4, p, ol, ul, figure { margin: 0; }

.container { width: var(--wrap); margin-inline: auto; }
.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 50;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px;
  font: 700 14px var(--display); text-decoration: none;
}
.skip-link:focus { top: 12px; color: var(--paper); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mono { font-family: var(--mono); }
.chapter-num { display: block; font: 600 11px/1.3 var(--mono); letter-spacing: .06em; color: var(--lime); margin-bottom: 10px; }
.display {
  font: 800 clamp(37px, 11.6vw, 56px)/.98 var(--display);
  letter-spacing: -.05em;
}
.title {
  font: 800 30px/1.02 var(--display);
  letter-spacing: -.04em;
}
.display em, .title em { font-style: normal; color: var(--lime); }
.display span, .title span { display: block; }
.lede { font: 500 clamp(17px, 2vw, 21px)/1.55 var(--text); color: var(--muted); }
.fine { font: 500 11px/1.5 var(--mono); color: var(--quiet); }

@media (min-width: 780px) {
  :root { --wrap: min(100% - 48px, 900px); }
  .chapter-num { font-size: 12px; }
}
@media (min-width: 1080px) {
  :root { --wrap: min(1180px, 100vw - 48px); }
  body { font-size: 17px; line-height: 1.6; }
  .display { font-size: clamp(56px, 6.6vw, 100px); line-height: .95; letter-spacing: -.055em; }
  .title { font-size: clamp(38px, 3.4vw, 48px); line-height: 1; letter-spacing: -.045em; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ── 4. Header ── */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--header-bg);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; flex-wrap: wrap; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font: 800 19px var(--display); letter-spacing: -.03em; min-height: 44px; }
.brand img { width: 32px; height: 32px; }
.menu-toggle {
  display: none; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--ink); border-radius: 999px; background: transparent;
  font: 600 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.js .menu-toggle { display: inline-flex; align-items: center; }
.site-nav { flex-basis: 100%; padding-bottom: 12px; }
.js .site-nav:not(.is-open) { display: none; }
.js .site-nav.is-open { max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; }
.nav-list { list-style: none; padding: 0; border-top: 1px solid var(--ink); }
.nav-list a {
  display: flex; gap: 10px; align-items: center; min-height: 48px;
  border-bottom: 1px dotted var(--dot);
  color: var(--ink); text-decoration: none; font: 700 16px var(--display);
}
.nav-list .mono { color: var(--lime); font-weight: 600; font-size: 13px; }
.theme-toggle {
  display: none; align-items: center; gap: 10px; min-height: 44px; margin-top: 10px; padding: 0 14px;
  border: 1px solid var(--ghost-line); border-radius: 999px; background: transparent; cursor: pointer; font: 600 14px var(--text);
}
.js .theme-toggle { display: inline-flex; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle[aria-pressed="true"] .icon-sun { display: block; }
.theme-toggle[aria-pressed="true"] .icon-moon { display: none; }
.nav-cta { display: none; }
.leaflet-strip {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-top: 2px solid var(--ink);
  font-size: 10px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.strip-long { display: none; }

@media (min-width: 780px) {
  .strip-long { display: inline; }
  .strip-short { display: none; }
}
@media (min-width: 1080px) {
  .header-inner { flex-wrap: nowrap; }
  .js .menu-toggle { display: none; }
  .js .site-nav.is-open { max-height: none; overflow: visible; }
  .site-nav, .js .site-nav:not(.is-open) { display: flex; align-items: center; gap: 18px; flex-basis: auto; padding: 0; }
  .nav-list { display: flex; gap: 18px; border: 0; }
  .nav-list a { min-height: 44px; border: 0; font: 600 14px var(--text); color: var(--muted); }
  .nav-list a:hover { color: var(--ink); }
  .theme-toggle { margin: 0; padding: 0; width: 44px; justify-content: center; }
  .theme-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .nav-cta {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
    background: var(--lime); color: var(--on-lime); text-decoration: none; font: 700 14px var(--display);
    transition: background .2s var(--ease), transform .2s var(--ease);
  }
  .nav-cta:hover { background: var(--lime-deep); color: var(--on-lime); transform: translateY(-2px); }
}

/* ── 4. Pieghe del foglio ── */
/* Each two-column block draws its own fold in the middle of its column gap, so folds
   never cross text or images and end up staggered block by block. --fold-x is the
   gap centre, computed from the block's own columns and column-gap. */
.sheet { position: relative; }
@media (min-width: 780px) {
  .hero-grid { --fold-x: calc((100% - 28px) * 1.3 / 2.3 + 14px); }
  .workflow { --fold-x: 50%; }
  .tour:has(.tour-tabs:not([hidden])) { --fold-x: calc((100% - 40px) / 3 + 20px); }
  /* Blocks without --fold-x (two columns only from 1080px) get an invalid gradient, i.e. no fold. */
  .hero-grid, .workflow, .tour:has(.tour-tabs:not([hidden])),
  .section-head:not(.section-head--stack):not(.section-head--center), .features-layout, .privacy-grid, .faq-grid, .footer-grid {
    background-image: linear-gradient(90deg, transparent calc(var(--fold-x) - .5px), var(--crease) calc(var(--fold-x) - .5px), var(--crease) calc(var(--fold-x) + .5px), transparent calc(var(--fold-x) + .5px));
    background-repeat: no-repeat;
  }
}
@media (min-width: 1080px) {
  .hero-grid, .workflow { --fold-x: calc((100% - 48px) * 2 / 3 + 24px); }
  .section-head:not(.section-head--stack):not(.section-head--center), .features-layout, .privacy-grid, .faq-grid, .footer-grid { --fold-x: calc((100% - 48px) / 3 + 24px); }
}

/* ── 4. Badge degli store ── */
.store-badges { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.store-badge { display: inline-block; padding: 0; line-height: 0; border-radius: 8px; }
.store-badge img { height: 48px; width: auto; }
.store-badge--dark { display: none; }
:root[data-theme="dark"] .store-badge--light { display: none; }
:root[data-theme="dark"] .store-badge--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .store-badge--light { display: none; }
  :root:not([data-theme="light"]) .store-badge--dark { display: block; }
}
.android-pill {
  display: inline-flex; align-items: center; height: 48px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font: 600 14px var(--text);
}
@media (min-width: 480px) { .store-badges { flex-direction: row; flex-wrap: wrap; align-items: center; } }

/* ── 4. Telefono ── */
.phone {
  position: relative; width: min(78%, 300px); margin-inline: auto;
  border: 10px solid var(--phone-line); border-radius: 44px; overflow: hidden;
  background: var(--screen); box-shadow: var(--phone-shadow);
}
.phone img { width: 100%; }
.phone--peek { border-bottom: 0; border-radius: 44px 44px 0 0; max-height: 440px; }
@media (min-width: 1080px) { .phone--peek { border-bottom: 10px solid var(--phone-line); border-radius: 44px; max-height: none; width: 320px; } }

/* ── 4. Hero ── */
.hero { position: relative; padding: 28px 0 0; overflow: hidden; }
.hero-grid { display: grid; gap: 28px; }
.hero-lede { margin: 16px 0 22px; max-width: 34em; }
.proofs { list-style: none; padding: 0; margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--muted); font-size: 14px; }
.proofs li::before { content: "✓ "; color: var(--lime); font-weight: 800; }
.hero-preview { position: relative; padding-top: 8px; }
.float-chip {
  position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; max-width: 176px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--chip-bg);
  box-shadow: var(--phone-shadow); font-size: 13px; line-height: 1.3; color: var(--muted);
}
.float-chip b { color: var(--ink); font: 800 13px var(--display); white-space: nowrap; }
.float-chip--soon { left: 0; top: 280px; }
.float-chip--leaflet { right: 0; top: 360px; }
.chip-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--soon-dot); }
.chip-check { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--lime); color: var(--on-lime); font-size: 12px; }
.hero-index { padding-bottom: 8px; }
.index-title { padding: 10px 0; border-top: 1px solid var(--ink); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.index-list { list-style: none; padding: 0; border-top: 1px solid var(--ink); }
.index-list a { display: flex; gap: 10px; min-height: 44px; align-items: center; border-bottom: 1px dotted var(--dot); color: var(--ink); text-decoration: none; font-weight: 600; }
.index-list b { font: 600 12px var(--mono); color: var(--lime); width: 22px; flex: none; }
.index-list a:hover { color: var(--lime); }

@media (min-width: 780px) {
  .hero { padding-top: 48px; }
  .hero::before {
    content: ""; position: absolute; right: 0; top: 0; width: 56px; height: 56px;
    background: linear-gradient(225deg, var(--paper) 50%, var(--night-3) 50%);
    box-shadow: -2px 2px 8px var(--fold-shadow);
  }
  .hero-grid { grid-template-columns: 1.3fr 1fr; align-items: start; }
  .hero-index { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
  .hero { padding: 64px 0 40px; }
  .hero-grid { grid-template-columns: 2fr 1fr; column-gap: 48px; }
  .hero-index { grid-column: 1; grid-row: 2; max-width: 520px; }
  .hero-preview { grid-column: 2; grid-row: 1 / span 2; }
  .float-chip { max-width: 220px; }
  .float-chip--soon { left: -40px; top: 18%; }
  .float-chip--leaflet { right: -16px; top: 52%; }
}

/* ── 5. Capitoli (condiviso) ── */
.chapter { padding: 56px 0; border-top: 1px dashed var(--dot); }
.chapter--continued { border-top: 0; padding-top: 8px; }
.section-head { display: grid; gap: 18px; margin-bottom: 28px; }
.section-head--stack .lede { margin-top: 2px; }
.section-text { display: grid; gap: 14px; color: var(--muted); }
.card { background: var(--night-2); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.card-num { display: block; font: 600 11px var(--mono); color: var(--quiet); margin-bottom: 10px; }
.card h3 { font: 800 19px/1.2 var(--display); letter-spacing: -.02em; margin-bottom: 8px; }
.card p { color: var(--muted); }
@media (min-width: 780px) {
  .chapter { padding: 90px 0; border-top: 2px solid var(--ink); }
  .chapter--continued { border-top: 0; padding-top: 0; }
  .card { border-radius: 24px; padding: 28px; }
}
@media (min-width: 1080px) {
  .chapter { padding: 130px 0; }
  .chapter--continued { padding-top: 0; }
  .section-head { grid-template-columns: 1fr 2fr; column-gap: 48px; align-items: end; margin-bottom: 48px; }
  .section-head--stack { grid-template-columns: 1fr; align-items: start; margin: 0; }
}

/* ── 5. Capitolo 1 ── */
.states { display: grid; gap: 14px; }
.state { background: var(--night-2); border: 1px solid var(--line); border-radius: 18px; padding: 22px; }
.state-after { border-color: var(--wash-line); }
.state-label { display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 999px; background: var(--night-3); font: 700 12px var(--display); letter-spacing: .04em; color: var(--muted); }
.state-after .state-label { background: var(--lime-wash); color: var(--lime-deep); }
.state ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.state li::before { content: "×"; display: inline-block; width: 18px; color: var(--late-text); font-weight: 800; }
.state-after li::before { content: "✓"; color: var(--lime); }
.state-arrow { justify-self: center; transform: rotate(90deg); font-size: 22px; color: var(--quiet); }

.feature-grid { list-style: none; padding: 0; display: grid; gap: 14px; }
.feature-icon { float: right; display: grid; place-items: center; width: 40px; height: 40px; margin: -4px 0 0 12px; border-radius: 12px; background: var(--lime-wash); border: 1px solid var(--wash-line); color: var(--lime); }
.feature-icon svg { fill: currentColor; }
.search-demo { margin: 18px 0 10px; display: grid; gap: 8px; cursor: default; user-select: none; -webkit-user-select: none; }
/* Static picture of the app's search bar: no input-like focus border, so it doesn't invite typing. */
.search-field { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; background: var(--night-3); color: var(--muted); font-size: 14px; }
.search-field svg { flex: none; fill: var(--lime); }
.result { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); font-size: 13px; color: var(--muted); }
.result b { color: var(--ink); font: 800 14px var(--display); text-transform: uppercase; }
.tag { justify-self: start; margin-top: 4px; padding: 3px 8px; border-radius: 6px; background: var(--night-3); color: var(--muted); font: 700 10px var(--display); font-style: normal; text-transform: uppercase; letter-spacing: .03em; }
.tag--ok { background: var(--ok-wash); color: var(--ok-text); }
.chips { list-style: none; padding: 0; margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 6px 12px; border-radius: 999px; background: var(--lime-wash); color: var(--ink); font-size: 14px; }
.chip::before { content: "✓ "; color: var(--lime); font-weight: 800; }

@media (min-width: 780px) {
  .states { grid-template-columns: 1fr auto 1fr; align-items: center; }
  .state-arrow { transform: none; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .feature-card--large, .feature-card--wide { grid-column: 1 / -1; }
}
@media (min-width: 1080px) {
  .features-layout { display: grid; grid-template-columns: 1fr 2fr; column-gap: 48px; align-items: start; }
  .features-layout .section-head { position: sticky; top: 120px; }
  .feature-card--large { grid-column: auto; grid-row: span 2; }
}

/* ── 6. Tour ── */
.tour-panels { display: grid; gap: 40px; }
.tour-panel { display: grid; gap: 18px; }
.tour-panel .phone { width: min(70%, 280px); margin-inline: auto; }
.tour-panel figcaption { display: grid; gap: 8px; }
.tour-step { font-size: 12px; color: var(--quiet); }
.tour-panel h3 { font: 800 24px/1.1 var(--display); letter-spacing: -.03em; }
.tour-panel h3 span { display: block; }
.tour-panel h3 em { font-style: normal; color: var(--lime); }
.tour-panel p { color: var(--muted); }
.tour-hint { display: none; }
/* The note sits centred under the phone, at the phone's width. */
.tour-note { max-width: 300px; margin: 16px auto 0; text-align: center; }

.js .tour-panels {
  grid-auto-flow: column; grid-auto-columns: 84%; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; overscroll-behavior-x: contain;
  margin-inline: -16px; padding: 4px 16px 12px; scrollbar-width: thin;
}
.js .tour-panel { scroll-snap-align: start; }
.js .tour-hint { display: block; text-align: right; margin-top: 4px; }

.sheet-demo { flex: 1; display: grid; gap: 10px; align-content: end; padding: 120px 16px 22px; background: linear-gradient(180deg, var(--night-3), var(--night-2) 45%); }
.phone--ui { aspect-ratio: 1344 / 2992; display: flex; flex-direction: column; background: var(--night-3); }
.sheet-grip { justify-self: center; width: 44px; height: 5px; border-radius: 5px; background: var(--dot); }
.sheet-title { font: 800 17px/1.25 var(--display); color: var(--ink); }
.sheet-text { font-size: 13px; color: var(--muted); }
.sheet-btn { display: grid; place-items: center; min-height: 42px; border-radius: 12px; border: 1px solid var(--ghost-line); font: 700 13px var(--display); color: var(--lime); }
.sheet-btn--primary { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }

@media (min-width: 780px) {
  .js .tour-panels { display: block; overflow: visible; margin: 0; padding: 0; }
  .js .tour-hint { display: none; }
  .tour:has(.tour-tabs:not([hidden])) { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: start; }
  .tour-tabs:not([hidden]) { display: grid; gap: 8px; }
  .tour-bar { padding-bottom: 8px; border-bottom: 1px solid var(--ink); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
  .tour-tablist { display: grid; gap: 4px; }
  .tour-tablist button {
    display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 0 14px; text-align: left;
    border: 1px solid transparent; border-radius: 12px; background: transparent; cursor: pointer; font: 700 15px var(--display); color: var(--muted);
  }
  .tour-tablist button .mono { color: var(--quiet); font-size: 12px; }
  .tour-tablist button[aria-selected="true"] { background: var(--lime-wash); border-color: var(--wash-line); color: var(--ink); }
  .tour-panel .phone { width: 300px; margin: 0 auto; }
  .tour:has(.tour-tabs:not([hidden])) .tour-note { grid-column: 2; margin-top: 0; }
}
@media (min-width: 1080px) {
  .tour-panel { grid-template-columns: 300px 1fr; gap: 36px; align-items: center; }
  .tour-panel .phone { margin: 0; }
  .tour:has(.tour-tabs:not([hidden])) .tour-note { margin-inline: 0; }
}

/* ── 6. Come funziona ── */
.workflow { display: grid; gap: 40px; }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 24px 0 28px; display: grid; gap: 18px; }
.steps li { counter-increment: step; position: relative; padding-left: 44px; color: var(--muted); }
.steps li::before { content: "0" counter(step); position: absolute; left: 0; top: 2px; font: 600 12px var(--mono); color: var(--lime); }
.steps b { display: block; color: var(--ink); font: 800 18px var(--display); margin-bottom: 2px; }
.phone--lock { justify-content: flex-start; gap: 10px; padding: 40px 12px; background: linear-gradient(160deg, var(--lime-deep), var(--lime)); }
.lock-time { text-align: center; font: 700 44px var(--display); color: var(--on-lime); margin-bottom: 18px; }
.notif {
  display: grid; grid-template-columns: 20px 1fr auto; gap: 2px 8px; align-items: center;
  padding: 12px; border-radius: 22px; background: var(--chip-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-size: 12px; color: var(--muted);
}
.notif img { width: 20px; height: 20px; }
.notif-app { font: 700 10px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.notif-time { font-size: 11px; color: var(--muted); }
.notif b { grid-column: 1 / -1; color: var(--ink); font: 800 13px var(--display); }
.notif-body { grid-column: 1 / -1; }
@media (min-width: 780px) { .workflow { grid-template-columns: 1fr 1fr; align-items: center; } }
@media (min-width: 1080px) { .workflow { grid-template-columns: 2fr 1fr; column-gap: 48px; } }

/* ── 7. Capitolo 3 · Privacy ── */
.chapter--wash { background: var(--lime-wash); }
.chapter--wash .section-text { color: var(--muted); margin-top: 18px; }
.privacy-grid { display: grid; gap: 36px; }
.text-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; font: 700 15px var(--display); color: var(--lime-deep); }
.numbered-points { list-style: none; counter-reset: point; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--ink); }
.numbered-points li { counter-increment: point; display: grid; grid-template-columns: 40px 1fr; padding: 18px 0; border-bottom: 1px dotted var(--dot); color: var(--muted); }
.numbered-points li::before { content: "0" counter(point); grid-row: span 2; font: 600 12px/1.9 var(--mono); color: var(--lime); }
.numbered-points b { color: var(--ink); font: 800 18px var(--display); margin-bottom: 4px; }
@media (min-width: 1080px) {
  .privacy-grid { grid-template-columns: 1fr 2fr; column-gap: 48px; align-items: start; }
  .privacy-intro { position: sticky; top: 120px; }
}

/* ── 7. Capitolo 4 · Limiti ── */
.limits-list { list-style: none; padding: 0; border-top: 1px solid var(--ink); }
.limits-list li { position: relative; padding: 16px 0 16px 30px; border-bottom: 1px dotted var(--dot); color: var(--muted); }
.limits-list li::before { content: "—"; position: absolute; left: 0; top: 16px; color: var(--quiet); }
.limits-list b { color: var(--ink); font: 800 17px var(--display); }
@media (min-width: 780px) { .limits-list { columns: 2; column-gap: 40px; } .limits-list li { break-inside: avoid; } }
@media (min-width: 1080px) { .limits-list { margin-left: calc(33.333% + 16px); } }

/* ── 8. Capitolo 5 · Prezzi ── */
.section-head--center { text-align: center; justify-items: center; }
.section-head--center .lede { max-width: 36em; }
@media (min-width: 1080px) { .section-head--center { grid-template-columns: 1fr; } }
.price-cards { display: grid; gap: 16px; }
.price-card { display: grid; gap: 14px; align-content: start; padding: 28px; }
.price-card h3 { font: 800 22px var(--display); margin: 0; }
.price-card--premium { background: var(--lime-wash); border-color: var(--wash-line); }
.state-label--ok { justify-self: start; background: var(--ok-wash); color: var(--ok-text); margin: 0; }
.state-label--soon { justify-self: start; background: var(--soon-wash); color: var(--soon-text); margin: 0; }
.price { font: 800 44px/1.1 var(--display); letter-spacing: -.04em; color: var(--ink); }
.price-card--premium .price { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--muted); font-family: var(--text); }
.price-card--premium .price b { font: 800 44px/1.1 var(--display); letter-spacing: -.04em; color: var(--ink); }
.price-or { display: block; margin: 4px 0; }
.price-note { font-size: 15px; color: var(--muted); }
.check-list { list-style: none; padding: 0; display: grid; gap: 10px; }
.check-list li { position: relative; padding-left: 26px; color: var(--muted); }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--lime); font-weight: 800; }
@media (min-width: 780px) { .price-cards { grid-template-columns: 1fr 1fr; } .price-card { padding: 36px; } }

/* ── 8. Capitolo 6 · Domande ── */
.faq-grid { display: grid; gap: 28px; }
.faq-list { border-top: 1px solid var(--ink); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 56px; padding: 14px 0;
  cursor: pointer; list-style: none; font: 700 18px/1.3 var(--display); color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; font: 600 22px var(--mono); color: var(--lime); transition: transform .2s var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 0 18px; color: var(--muted); max-width: 46em; }
@media (min-width: 1080px) {
  .faq-grid { grid-template-columns: 1fr 2fr; column-gap: 48px; align-items: start; }
  .faq-list summary { font-size: 20px; }
}

/* ── 8. CTA ── */
.cta-section { padding: 56px 0; }
.cta-panel { display: grid; justify-items: center; gap: 16px; text-align: center; padding: 40px 20px; border-radius: 24px; background: var(--night-3); border: 1px solid var(--line); }
.cta-door { display: grid; place-items: center; width: 120px; height: 120px; border-radius: 28px; background: var(--lime-wash); border: 1px solid var(--wash-line); }
.cta-door img { width: 88px; height: 88px; }
.store-badges--center { align-items: center; }
@media (min-width: 480px) { .store-badges--center { justify-content: center; } }
@media (min-width: 780px) { .cta-section { padding: 90px 0 130px; } .cta-panel { border-radius: 32px; padding: 64px 40px; } }

/* ── 8. Footer ── */
.site-footer { padding: 40px 0 48px; border-top: 1px solid var(--line); background: var(--paper); }
.footer-grid { display: grid; gap: 18px; }
.footer-brand p { margin-top: 6px; color: var(--muted); }
.footer-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-links a { display: inline-flex; min-height: 44px; align-items: center; color: var(--muted); text-decoration: none; font-weight: 600; }
.footer-links a:hover { color: var(--ink); }
.site-footer small { display: block; font-size: 12px; }
@media (min-width: 1080px) { .footer-grid { grid-template-columns: 1fr 2fr; column-gap: 48px; } .site-footer small { grid-column: 2; } }
.price-card--premium .fine { color: var(--muted); }

/* ── 10. Comparse ── */
.reveal { transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-ready .reveal:not(.is-visible) { opacity: 0; transform: translateY(18px); }
.card { transition: transform .25s var(--ease), border-color .25s var(--ease); }
.reveal.card { transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .25s var(--ease); }
@media (hover: hover) { .feature-card:hover { transform: translateY(-3px); border-color: var(--wash-line); } }

/* ── Pagine legali (privacy, termini) ── */
.legal { padding: 40px 0 72px; }
.legal-head { display: grid; gap: 10px; padding-bottom: 24px; margin-bottom: 8px; border-bottom: 2px solid var(--ink); }
.legal-body { max-width: 46em; color: var(--muted); }
.legal-body h2 { margin: 40px 0 12px; font: 800 22px/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.legal-body h3 { margin: 28px 0 8px; font: 800 18px/1.25 var(--display); color: var(--ink); }
.legal-body p, .legal-body ul, .legal-body ol, .legal-body table { margin: 0 0 14px; }
.legal-body ul, .legal-body ol { padding-left: 22px; }
.legal-body li { margin-bottom: 6px; }
.legal-body strong { color: var(--ink); }
.legal-body hr { border: 0; border-top: 1px dotted var(--dot); margin: 32px 0; }
.legal-body table { display: block; overflow-x: auto; border-collapse: collapse; font-size: 15px; }
.legal-body th, .legal-body td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; min-width: 160px; }
.legal-body th { color: var(--ink); font: 700 14px var(--display); border-bottom: 1px solid var(--ink); }
@media (min-width: 1080px) { .legal { padding: 64px 0 110px; } .legal-body h2 { font-size: 26px; } }