/* ══════════════════════════════════════════════════════════════
   moneyplan.css — stili specifici della landing MoneyPlan - Drops of Memories
   Caricato DOPO /dropsofmemories/css/dom-core.css, solo dalla landing
   dropsofmemories/moneyplan/. Reset/base, nav, footer colophon,
   .reveal e prefers-reduced-motion di base arrivano da dom-core.css.
   Eccezioni hex documentate: ombre in rgba(), fondo scuro #14161d
   della cornice .shot (il "vetro" degli screenshot dark, senza token),
   #145C38 (hover link) e #FFFDF7 (hover bottone) dal mockup approvato,
   grigio #B8B0A0 del footer scuro (lo stesso di .footer-contact).
   ══════════════════════════════════════════════════════════════ */

/* ─── BASE TIPOGRAFICA DELLA PAGINA (dal mockup approvato) ─── */
body { line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-weight: 400; line-height: 1.15; margin: 0 0 0.5em; text-wrap: balance; }
p { margin: 0 0 1em; color: var(--text); text-wrap: pretty; }
a { color: var(--accent); }
a:hover { color: #145C38; } /* eccezione: hover verde scuro del mockup, nessun token/equivalente in dom-core o travels.css */
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.eyebrow { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent2-strong); font-weight: 700; margin-bottom: 14px; }
.muted { color: var(--muted); }

/* ─── SKIP-LINK (solo CSS, niente handler inline) ─── */
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 300; }
.skip-link:focus-visible { left: 16px; }

/* ─── NAV: aggiunte di pagina alla nav standard DoM ─── */
.nav-logo { color: var(--heading); }

/* ─── SCREENSHOT FRAME ─── */
.shot {
  background: #14161d; /* eccezione: "vetro" scuro dietro gli screenshot dark, non ha token */
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px -18px rgba(38, 34, 28, 0.35), 0 4px 14px -6px rgba(38, 34, 28, 0.18);
  overflow: hidden;
}
.shot img { width: 100%; height: auto; }
.shot--crop { position: relative; }
.shot--crop img { height: 100%; width: 100%; object-fit: cover; }
figcaption { font-size: 14px; color: var(--muted); margin-top: 12px; line-height: 1.5; }

/* ─── BOTTONI CTA ─── */
.store-btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface); color: var(--heading);
  border: 1px solid var(--border); border-radius: 999px;
  font-family: var(--font-body); font-weight: 500; font-size: 15px;
  padding: 11px 22px; text-decoration: none;
  box-shadow: 0 1px 3px rgba(38, 34, 28, 0.06);
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
a.btn-pill:hover { border-color: var(--ink); background: #FFFDF7; color: var(--heading); transform: translateY(-1px); } /* eccezione: bianco caldo hover del mockup, senza token */
.btn-pill svg { flex: none; }
.friction { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 0; margin: 18px 0 0; list-style: none; font-size: 14px; color: var(--muted); }
.friction li { display: flex; align-items: center; gap: 7px; }
.friction li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }

/* ─── HERO (72px del mockup + ~82px di nav fixed) ─── */
.hero { padding: 154px 0 56px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(38px, 4.6vw, 58px); font-weight: 400; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero .lead { font-size: 19px; color: var(--text); max-width: 46ch; }
.hero-cta { margin-top: 28px; }

/* ─── PROBLEMA ─── */
.problema { padding: 72px 0; }
.problema-inner { max-width: 780px; margin: 0 auto; text-align: center; }
.problema h2 { font-size: clamp(30px, 3.6vw, 44px); }
.problema h2 em { font-style: italic; color: var(--accent2); }
.problema p { font-size: 18px; color: var(--muted); max-width: 60ch; margin-left: auto; margin-right: auto; }

/* ─── DIMOSTRAZIONE ─── */
.demo { padding: 24px 0 40px; }
.demo-head { max-width: 720px; margin: 0 0 56px; }
.demo-head h2 { font-size: clamp(28px, 3.2vw, 40px); }
.feature { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; align-items: center; padding: 40px 0; }
.feature:nth-of-type(even) .feature-copy { order: 2; }
.feature:nth-of-type(even) .feature-media { order: 1; }
.feature h3 { font-size: 27px; }
.feature p { font-size: 16.5px; color: var(--text); }
.feature .num { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.feature-kicker { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 10px; }
.feature-kicker--follow { margin-top: 28px; }
.feature-media--stack { display: grid; gap: 20px; }

/* Ritaglio del grafico (pixel reali di 01-piano) */
.shot--chart { aspect-ratio: 2.6 / 1; }
.shot--chart img { height: 100%; width: 100%; object-fit: cover; object-position: 82% 26%; }

/* Tab granularità */
.gran-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.gran-tab {
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  padding: 8px 18px; border-radius: 999px; cursor: pointer;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  transition: background-color 0.15s ease, color 0.15s ease;
}
.gran-tab[aria-selected="true"] { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.gran-panel[hidden] { display: none; }

/* CTA intermedia */
.midcta { padding: 56px 0 72px; text-align: center; }
.midcta p { font-size: 18px; color: var(--muted); max-width: 52ch; margin: 0 auto 24px; }
.midcta .store-btns { justify-content: center; }

/* ─── CINQUE MINUTI ─── */
.minuti { padding: 72px 0; border-top: 1px solid var(--border); }
.minuti h2 { font-size: clamp(28px, 3.2vw, 40px); max-width: 640px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; }
.step-n { font-family: var(--font-head); font-size: 40px; font-weight: 300; color: var(--accent2); line-height: 1; margin-bottom: 12px; }
.step h3 { font-size: 21px; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--muted); margin: 0; }
.minuti-note { margin-top: 24px; font-size: 15px; color: var(--muted); }

/* ─── PERSONALE E BUSINESS ─── */
.piani { padding: 72px 0; }
.piani-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.piani h2 { font-size: clamp(28px, 3.2vw, 40px); }
.piani-cards { display: grid; gap: 16px; }
.piano-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.piano-card strong { font-family: var(--font-head); font-size: 22px; font-weight: 500; color: var(--heading); }
.piano-card span { font-size: 14px; color: var(--muted); text-align: right; }

/* ─── PRIVACY (sezione della landing) ─── */
.privacy { padding: 72px 0; border-top: 1px solid var(--border); }
.privacy-inner { max-width: 720px; }
.privacy h2 { font-size: clamp(28px, 3.2vw, 40px); }
.privacy ul { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 32px; }
.privacy li { display: flex; gap: 12px; font-size: 16px; align-items: flex-start; }
.privacy li svg { flex: none; margin-top: 4px; color: var(--accent); }

/* ─── CHIUSURA ─── */
.chiusura { padding: 88px 0 96px; text-align: center; border-top: 1px solid var(--border); }
.chiusura h2 { font-size: clamp(32px, 4vw, 50px); max-width: 18ch; margin-left: auto; margin-right: auto; }
.chiusura h2 em { font-style: italic; color: var(--accent); }
.chiusura p { font-size: 18px; color: var(--muted); max-width: 52ch; margin: 0 auto 28px; }
.chiusura .friction { justify-content: center; }
.chiusura .store-btns { justify-content: center; }

/* ─── FOOTER: aggiunte di pagina al colophon di dom-core ─── */
.footer-note { margin: 0; max-width: 40ch; font-size: 0.82rem; line-height: 1.6; color: #B8B0A0; } /* grigio footer scuro, lo stesso di .footer-contact in dom-core */
.footer-links { flex-wrap: wrap; }

/* ─── CTA STICKY MOBILE ─── */
.sticky-cta {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(246, 242, 234, 0.95);
  border-top: 1px solid var(--border);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.sticky-cta .btn-pill { width: 100%; justify-content: center; padding: 13px 18px; background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ─── MOTION RIDOTTO (page-specific; .reveal è gestito da dom-core) ─── */
@media (prefers-reduced-motion: reduce) {
  .btn-pill, .gran-tab { transition: none; }
  a.btn-pill:hover { transform: none; }
}

/* ─── RESPONSIVE ─── */
@media (max-width: 980px) {
  .hero-grid, .feature, .piani-grid { grid-template-columns: 1fr; gap: 28px; }
  .feature:nth-of-type(even) .feature-copy { order: 1; }
  .feature:nth-of-type(even) .feature-media { order: 2; }
  .steps { grid-template-columns: 1fr; }
  .privacy ul { grid-template-columns: 1fr; }
  .hero { padding: 130px 0 40px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav-hamburger { display: flex; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    position: fixed;
    top: 82px;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 1.6rem 2rem 2rem;
    box-shadow: 0 18px 40px rgba(42, 38, 32, 0.14);
  }
  .nav-overlay.open { display: block; }
  .sticky-cta { display: block; }
  .chiusura { padding-bottom: 140px; }
  /* Ritagli leggibili su mobile: mostra la porzione sinistra/densa dello screenshot */
  .shot--mobilecrop { aspect-ratio: 4 / 3; }
  .shot--mobilecrop img { height: 100%; object-fit: cover; object-position: left top; }
}