/* Stile del sito pubblico (home e guide). Caricato con ?v=data del file per non restare in cache dopo un rilascio. */
  :root {
    --verde: #2f7c52;
    --verde-scuro: #235e3e;
    --verde-chiaro: #e6efea;
    --grano: #f6f1e7;
    --testo: #1f2a24;
  }
  html { scroll-behavior: smooth; }
  body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: var(--testo); }

  h1, h2, h3, .display-3, .display-4, .display-5 { font-weight: 800; letter-spacing: -0.02em; }
  .lead { font-size: 1.25rem; }
  section { scroll-margin-top: 72px; }

  .text-verde { color: var(--verde) !important; }
  .bg-grano { background: var(--grano); }
  .bg-verde-chiaro { background: var(--verde-chiaro); }

  .navbar-brand b { color: var(--verde); }
  .btn-verde { background: var(--verde); border-color: var(--verde); color: #fff; }
  .btn-verde:hover { background: var(--verde-scuro); border-color: var(--verde-scuro); color: #fff; }
  .btn-outline-verde { color: var(--verde); border-color: var(--verde); }
  .btn-outline-verde:hover { background: var(--verde); color: #fff; }

  /* HERO */
  .hero {
    background:
      radial-gradient(1200px 500px at 80% -10%, rgba(47,124,82,.14), transparent 60%),
      linear-gradient(180deg, var(--grano) 0%, #ffffff 100%);
    padding: 88px 0 64px;
  }
  .hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.05; }
  .hero-badge { display:inline-flex; align-items:center; gap:.5rem;
    background: var(--verde-chiaro); color: var(--verde-scuro);
    padding: .4rem .9rem; border-radius: 999px; font-weight: 600; font-size: .95rem; }

  /* Badge store */
  .stores { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .stores img.apple  { height: 52px; }
  .stores img.google { height: 76px; }  /* il PNG Google ha margini interni: 76px lo pareggia all'Apple */

  /* Card funzionalità */
  .feature-card { height:100%; border:1px solid #eee; border-radius: 18px; transition: .2s; background:#fff; }
  .feature-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(35,94,62,.12); border-color: var(--verde-chiaro); }
  .feature-ico {
    width: 60px; height: 60px; border-radius: 16px; display:flex; align-items:center; justify-content:center;
    background: var(--verde-chiaro); color: var(--verde); font-size: 1.7rem; margin-bottom: 1rem;
  }

  /* Step "come funziona" */
  .step-num {
    width: 56px; height: 56px; border-radius: 50%; background: var(--verde); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:800; margin: 0 auto 1rem;
  }

  /* Telefono con screenshot reale dell'app.
     Gli screenshot sono mostrati INTERI, nelle proporzioni native (1:2.16): niente
     object-fit/cover, che li ingrandirebbe tagliando il testo ai lati. Per contenere
     l'altezza si agisce sulla larghezza della cornice, non sul ritaglio. */
  .phone {
    width: 215px; max-width: 100%; margin: 0 auto; position: relative;
    background: #1f2a24; border-radius: 32px; padding: 8px;
    box-shadow: 0 24px 46px rgba(0,0,0,.26);
  }
  .phone::before {   /* tacca superiore */
    content:''; position:absolute; top: 15px; left:50%; transform: translateX(-50%);
    width: 62px; height: 4px; background: rgba(255,255,255,.35); border-radius: 99px; z-index: 2;
  }
  .phone img { width: 100%; height: auto; display: block; border-radius: 25px; }
  .phone-cap { font-size: .9rem; color: #6c757d; margin-top: 1rem; }

  /* Galleria schermate: stessa logica, cornice leggermente più piccola */
  .shot {
    width: 195px; max-width: 100%; margin: 0 auto; background:#1f2a24; border-radius: 28px; padding: 7px;
    box-shadow: 0 16px 36px rgba(0,0,0,.18);
  }
  .shot img { width:100%; height: auto; display:block; border-radius: 22px; }

  .cta { background: linear-gradient(135deg, var(--verde) 0%, var(--verde-scuro) 100%); color:#fff; }
  .form-box { background:#fff; border-radius: 22px; box-shadow: 0 20px 50px rgba(0,0,0,.18); color: var(--testo); }
  .form-box .form-label { font-weight: 700; margin-bottom: .35rem; }
  .form-box .form-control, .form-box .form-select { border-radius: 12px; border:1px solid #dde3df; }
  .form-box .form-control:focus, .form-box .form-select:focus {
    border-color: var(--verde); box-shadow: 0 0 0 .2rem rgba(47,124,82,.18); }
  footer a { color: #cfe3d8; text-decoration: none; }
  footer a:hover { color:#fff; }
  .note-marchi { font-size:.72rem; color: rgba(255,255,255,.55); }

  /* Richiamo alla promo nell'hero */
  .promo-link { display:inline-flex; align-items:center; flex-wrap:wrap; gap:.6rem; text-decoration:none; color: var(--testo);
    background:#fff; border:2px solid var(--verde); border-radius: 999px; padding:.45rem .55rem .45rem .5rem;
    box-shadow: 0 8px 22px rgba(35,94,62,.14); transition:.2s; }
  .promo-link:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(35,94,62,.2); color: var(--testo); }
  .promo-ico { width:34px; height:34px; border-radius:50%; background: var(--verde); color:#fff; display:inline-flex;
    align-items:center; justify-content:center; }
  .promo-cta { background: var(--verde); color:#fff; font-weight:700; border-radius:999px; padding:.3rem .9rem; white-space:nowrap; }

  /* Riquadro "moduli singoli" sotto i piani */
  .moduli-box { max-width: 860px; background:#fff; border:1px dashed var(--verde); border-radius: 18px; padding: 1rem 1.25rem; }

  /* Fascia della promo sopra i piani */
  .promo-banner { position:relative; background: linear-gradient(135deg, var(--verde) 0%, var(--verde-scuro) 100%); color:#fff;
    border-radius: 22px; padding: 1.6rem 1.25rem 1.4rem; box-shadow: 0 18px 40px rgba(35,94,62,.22); }
  .promo-banner-ico { width:56px; height:56px; margin:-3.1rem auto .6rem; border-radius:50%; background:#fff; color: var(--verde);
    display:flex; align-items:center; justify-content:center; font-size:1.6rem; box-shadow: 0 6px 16px rgba(0,0,0,.15); }

  /* Domande frequenti */
  .faq .accordion-button { font-weight: 700; font-size: 1.1rem; }
  .faq .accordion-button:not(.collapsed) { color: var(--verde-scuro); background: var(--verde-chiaro); box-shadow: none; }
  .faq .accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(47,124,82,.18); }

  /* Etichetta del piano sulle funzioni */
  .badge-piano { font-size:.72rem; font-weight:700; color: var(--verde-scuro); background: var(--verde-chiaro);
    border:1px solid rgba(47,124,82,.25); border-radius: 999px; padding: .2rem .6rem; white-space: nowrap; }

  /* Piani */
  .piano-card { position:relative; background:#fff; border:1px solid #e3e8e5; border-radius: 22px; }
  .piano-evid { border: 2px solid var(--verde); box-shadow: 0 18px 40px rgba(35,94,62,.14); }
  .piano-nastro { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background: var(--verde); color:#fff;
    font-size:.8rem; font-weight:700; padding:.25rem .9rem; border-radius:999px; white-space:nowrap; }
  .piano-prezzo { font-size: 2.4rem; font-weight: 800; letter-spacing:-0.02em; line-height:1.1; }
  .confronto thead th { background: var(--verde-chiaro); color: var(--verde-scuro); font-size:.85rem; }
  .confronto td { font-size:.9rem; }

/* Guide (pagine di approfondimento) */
.guida-hero { padding: 56px 0 32px; }
.guida-hero h1 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.1; }
.guida h2 { font-weight: 800; letter-spacing: -0.02em; }
.guida .testo { font-size: 1.1rem; line-height: 1.7; }
.guida .testo p, .guida .testo li { color: #3b4740; }
.guida .riquadro { background: var(--verde-chiaro); border-left: 4px solid var(--verde); border-radius: 12px; padding: 1rem 1.25rem; }
.guida table.registro th { background: var(--verde-chiaro); color: var(--verde-scuro); }