/* ════════════════════════════════════════════════════════════════════
   Pagine prodotto (Memive, Chrono, Scadoo): stesso mondo del sito,
   un solo colore d'accento per prodotto in --accent.
   ════════════════════════════════════════════════════════════════════ */
:root { --accent: var(--sun-ink); --accent-soft: #e9dfc6; }

/* ── apertura ─────────────────────────────────────────────────────── */
.p-hero { min-height: 100svh; display: grid; align-items: center; padding: 120px clamp(20px, 5.5vw, 84px) 120px; }
.p-hero:has(.p-hero-shot) { grid-template-columns: minmax(0, 1fr) auto; gap: 5vw; }
.p-hero-shot { --shot-w: clamp(220px, 21vw, 290px); justify-self: center; transform: rotate(2.5deg); }
.js .p-hero-shot { animation: p-shot 1.4s .55s var(--ease) both; }
@keyframes p-shot { from { transform: translateY(32px) rotate(5deg); } }
.p-hero-panel { --tint: rgba(247, 244, 230, .62); --blur: 24px; --lg-scale: 24; --lg-band: 28; max-width: 680px; padding: clamp(30px, 3.6vw, 54px); color: var(--forest); }
.js .p-hero-panel { animation: p-rise 1.2s .3s var(--ease) both; }
@keyframes p-rise { from { transform: translateY(24px) scale(.98); } }
.p-name { margin: 0; font: 400 clamp(3.4rem, 8vw, 6rem)/.9 var(--serif); letter-spacing: -.025em; }
.p-tagline { margin: 10px 0 0; font: italic 400 clamp(1.5rem, 2.6vw, 2.1rem)/1.15 var(--serif); color: var(--accent); }
.p-hero-panel .lede { margin-top: 18px; color: var(--ink-2); }
.p-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.p-hero-panel .live { margin-top: 22px; }

.p-gap { margin-top: var(--space-10); }

/* ── passi numerati ───────────────────────────────────────────────── */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.steps b { display: block; font: 400 3.4rem/1 var(--serif); color: var(--accent); font-variant-numeric: tabular-nums; }
.steps h3 { margin: 14px 0 8px; font: 700 1.25rem/1.25 var(--sans); }
.steps p { margin: 0; color: var(--ink-2); max-width: 36ch; }

/* ── righe (nome · etichetta · descrizione) ───────────────────────── */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.6fr); gap: 8px 32px; align-items: baseline; padding: 24px 0; border-top: 1px solid var(--line); }
.rows li:last-child { border-bottom: 1px solid var(--line); }
.rows h3 { margin: 0; font: 400 clamp(1.7rem, 2.6vw, 2.2rem)/1.1 var(--serif); }
.rows .dur { padding: 5px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font: 700 .8125rem/1.2 var(--sans); white-space: nowrap; }
.rows p { margin: 0; color: var(--ink-2); }

/* ── elenco a righe (due colonne, filetti) ────────────────────────── */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; border-bottom: 1px solid var(--line); }
.cards li { padding: 22px 0 24px; border-top: 1px solid var(--line); }
.cards h3 { margin: 0 0 6px; font: 400 1.7rem/1.1 var(--serif); }
.cards p { margin: 0; color: var(--ink-2); max-width: 46ch; }
@media (max-width: 760px) { .cards { grid-template-columns: 1fr; } }

/* ── pannello di vetro su foto ───────────────────────────────────── */
.p-panel { --tint: rgba(247, 244, 230, .64); --blur: 26px; color: var(--forest); padding: clamp(32px, 5vw, 64px); }
.p-panel .lede { color: var(--ink-2); }
.points { list-style: none; margin: var(--space-7) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.points h3 { margin: 0 0 6px; font: 700 1.0625rem/1.3 var(--sans); }
.points p { margin: 0; color: var(--ink-2); font-size: .9688rem; }
.p-panel .p-cta { margin-top: var(--space-7); }

/* ── timeline: stati ──────────────────────────────────────────────── */
.tl-now.done { color: #2f4219; }
.tl-now.done::before { animation: none; }
.tl-soon { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font: 600 .8125rem/1 var(--sans); color: var(--ink-2); }
.tl-soon::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; }
.tl .tags { margin-top: 14px; }

/* ── prezzi ───────────────────────────────────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 900px; }
.plan { display: grid; align-content: start; gap: 6px; padding: clamp(26px, 3.4vw, 40px); border-radius: var(--r-panel); background: var(--paper-2); }
.plan-pro { background: var(--forest); color: #f3eedc; }
.plan h3 { margin: 0; font: 700 1rem/1.3 var(--sans); }
.price { margin: 8px 0 0; font: 400 3.4rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.price span { font: 500 1rem/1 var(--sans); color: var(--ink-2); }
.plan-pro .price span, .plan-pro .plan-note { color: rgba(243, 238, 220, .72); }
.plan-note { margin: 0; color: var(--ink-2); font-size: .9375rem; }
.plan ul { margin: 18px 0 26px; padding-left: 1.1em; display: grid; gap: 6px; }
.plan li::marker { color: var(--accent); }
.plan-pro li::marker { color: var(--sun); }
.plan .gbtn { justify-self: start; }
.plan-pro .gbtn.dark { --tint: rgba(243, 238, 220, .16); }
.plan-pro :focus-visible { outline-color: var(--sun); }

/* ── domande ──────────────────────────────────────────────────────── */
.faq { max-width: 860px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; font: 600 1.125rem/1.35 var(--sans); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 400 1.6rem/1 var(--serif); color: var(--accent); transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.faq details p { margin: 0 0 22px; max-width: 68ch; color: var(--ink-2); }

/* ── dietro le quinte ─────────────────────────────────────────────── */
.behind { max-width: 760px; }
.behind > p { margin: 0; font: 400 clamp(1.4rem, 2.2vw, 1.85rem)/1.35 var(--serif); }
.behind strong { font-weight: 400; color: var(--accent); }
.byline { margin-top: 24px !important; font: 600 .9375rem/1.4 var(--sans) !important; }
.byline a { text-underline-offset: .2em; }

/* ── lista d'attesa ───────────────────────────────────────────────── */
.wait-form { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.wait-input { flex: 1 1 260px; max-width: 360px; min-height: 48px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(35, 37, 27, .2); background: rgba(255, 253, 245, .75); color: var(--forest); font: 500 1rem/1 var(--sans); }
.wait-input:focus { outline: 2px solid var(--forest); outline-offset: 2px; }
.wait-msg { min-height: 1.5em; margin: 14px 0 0; font-weight: 600; color: var(--forest); }

@media (max-width: 960px) {
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rows li { grid-template-columns: minmax(0, 1fr) auto; }
  .rows p { grid-column: 1 / -1; }
  .plans { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .p-hero { padding: 100px 16px 110px; align-items: end; min-height: 92svh; }
  .p-hero:has(.p-hero-shot) { grid-template-columns: 1fr; gap: 40px; }
  .p-hero-shot { --shot-w: 230px; }
}
@media (max-width: 520px) {
  .points { grid-template-columns: 1fr; }
}