/* Guida "Come funziona": stili estratti dall'inline per un CSP style-src 'self' stretto.
   Riusa le variabili di styles.css (che va incluso PRIMA). */
    /* --- Guida "Come funziona": riusa le variabili della landing --- */
    .guide { max-width: 720px; }
    .guide-hero { padding-bottom: .5rem; }
    .guide-hero h1 span { color: var(--muted); font-weight: 400; display: block; font-size: .62em;
      letter-spacing: normal; margin-top: .2rem; }
    .gsteps { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.6rem; }
    .gstep { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .7rem 1rem; align-items: start; }
    .gstep-num { grid-row: span 2; width: 2.2rem; height: 2.2rem; border-radius: 999px; flex: none;
      background: var(--brand); color: #fff; font-weight: 700; font-size: 1.2rem;
      display: flex; align-items: center; justify-content: center; }
    .gstep-head, .gstep-shot { min-width: 0; }
    .gstep-head { align-self: center; }
    .gstep-head h2 { font-size: 1.15rem; margin: 0 0 .15rem; }
    .gstep-head p { margin: 0; color: var(--muted); }
    .gstep-shot { grid-column: 2; margin: .2rem 0 0; }
    .gstep-shot img { border: 1px solid var(--line); }
    .gstep-shot figcaption { color: var(--muted); font-size: .8rem; margin-top: .35rem; }

    /* Mockup Telegram (illustrazioni HTML, non foto) */
    .tg { background: #cfe3d8; border: 1px solid var(--line); border-radius: 10px;
      padding: .7rem; display: grid; gap: .45rem; max-width: 320px; }
    .tg b { font-weight: 600; }
    .bubble { padding: .5rem .7rem; border-radius: 12px; font-size: .9rem; max-width: 85%;
      box-shadow: 0 1px 1px rgba(0,0,0,.08); }
    .bubble.me { background: #d6f2c4; justify-self: end; border-bottom-right-radius: 3px; }
    .bubble.bot { background: #fff; justify-self: start; border-bottom-left-radius: 3px; }
    .tg-opts { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .3rem; }
    .tg-opt { background: #eef6f1; color: var(--brand-dark); border: 1px solid var(--line);
      border-radius: 999px; padding: .12rem .5rem; font-size: .78rem; }

    /* Illustrazione della schermata permessi Google (passo 4) */
    .goog { max-width: 320px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
      font-size: .88rem; background: #fff; }
    .goog-top { padding: .6rem .8rem; border-bottom: 1px solid var(--line); }
    .goog-top strong { display: block; margin-top: .2rem; font-size: .95rem; }
    .goog-perm { display: flex; gap: .5rem; padding: .55rem .8rem; align-items: flex-start;
      border-bottom: 1px solid var(--soft); }
    .goog-perm::before { content: "✓"; color: var(--brand); font-weight: 700; }
    .goog-btns { display: flex; justify-content: flex-end; gap: .6rem; padding: .6rem .8rem; }
    .goog-btns span { color: #1a73e8; font-weight: 600; }
    .goog-btns .primary { background: #1a73e8; color: #fff; padding: .25rem .8rem; border-radius: 6px; }

    .illus-label { display: inline-block; background: #fff4d6; color: #7a5b00;
      font-size: .72rem; padding: .1rem .5rem; border-radius: 4px; margin-top: .4rem; }

    /* Box "Il momento Google" — il cuore, visivamente distinto */
    .google-moment { background: var(--brand); color: #fff; border-radius: var(--radius);
      max-width: 720px; }
    .google-moment h2 { color: #fff; }
    .google-moment p { font-size: 1.05rem; margin: 0; }
    .google-moment strong { color: #fff; }

    /* Le 3 domande di sicurezza */
    .qa { display: grid; gap: 1rem; margin-top: 1rem; }
    .qa div { border-left: 3px solid var(--brand); padding-left: .8rem; }
    .qa dt { font-weight: 700; margin-bottom: .2rem; }
    .qa dd { margin: 0; color: var(--muted); }
    .qa .path { background: var(--soft); border-radius: 6px; padding: .1rem .4rem; font-size: .92em; }

    .print-link { text-align: center; margin: 2rem 0 0; font-size: .9rem; }
    .guide-footer { text-align: center; color: var(--muted); font-size: .9rem;
      padding: 2rem 1rem; border-top: 1px solid var(--line); }
    .guide-footer strong { color: var(--ink); }

    @media (min-width: 640px) {
      .guide-hero h1 span { display: inline; font-size: .55em; }
    }

    /* ============ FOGLIO DA BATTAGLIA (stampa A4, una pagina) ============ */
    @media print {
      @page { size: A4; margin: 12mm; }
      .site-header, .print-link, .gstep-shot, .illus-label { display: none !important; }
      body { font-size: 11pt; }
      .guide, .google-moment { max-width: none; }
      section { padding: .3rem 0; }
      .guide-hero h1 { font-size: 18pt; }
      .gsteps { gap: .5rem; margin-top: .6rem; }
      .gstep { grid-template-columns: auto 1fr; gap: .2rem .6rem; break-inside: avoid; }
      .gstep-num { width: 1.5rem; height: 1.5rem; font-size: .9rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
      .google-moment { -webkit-print-color-adjust: exact; print-color-adjust: exact; padding: .6rem .8rem; margin: .5rem 0; }
      .google-moment p { font-size: 10.5pt; }
      .qa { gap: .35rem; }
      .qa dd { color: #333; }
      .guide-footer { border: 0; padding: .5rem 0; }
      .guide-footer .phone { font-size: 20pt; font-weight: 700; color: #000; display: block; margin-top: .2rem; }
    }