/* pages.css - stile condiviso pagine secondarie DeBabel (#641).
   UN foglio per credits/buy/gift/privacy/terms. Stessa identita della landing
   (token + font da landing.css). Link in-text ed email: #F0ABCB (rosa landing).
   Scope per gruppo per evitare collisioni. Caricare DOPO landing.css. */

/* ===== FOOTER: stessa larghezza/padding della landing in ogni scope ===== */
.page-legal footer .container,
.page-credits footer .container,
.page-form footer .container {
  max-width: 1200px;
  padding-left: clamp(22px, 5vw, 80px);
  padding-right: clamp(22px, 5vw, 80px);
}


/* ===== NAVBAR: stessa spaziatura/larghezza della landing in ogni scope =====
   Gli scope ridefiniscono --pad-x/--max-width per il contenuto; la barra deve
   invece restare identica alla landing (--max:1200px, --pad-x:clamp(22px,5vw,80px)). */
.page-legal .topnav .row,
.page-credits .topnav .row,
.page-form .topnav .row {
  max-width: 1200px;
  padding-left: clamp(22px, 5vw, 80px);
  padding-right: clamp(22px, 5vw, 80px);
}


/* ===== STACKING: contenuto sopra i layer di sfondo (come la landing) ===== */
.page-legal .privacy-header,
.page-legal .meta-row,
.page-legal .body-wrap,
.page-legal article,
.page-legal .closing-note,
.page-legal footer,
.page-credits .wrap,
.page-credits footer,
.page-form .wrap,
/* ===== LEGALE (privacy, terms) ===== */
.page-legal {
  --max-width: 1180px;
  --pad-x: clamp(20px, 4vw, 64px);
  --radius: 12px;
  --radius-pill: 999px;
}

:root {
      --bg-deep:     #0A0A1F;
      --bg-base:     #0F0F23;
      --indigo:      #312E81;
      --indigo-2:    #4338CA;
      --magenta:     #9D174D;
      --magenta-2:   #BE185D;
      --teal:        #0D9488;
      --teal-bright: #14B8A6;
      --text-hi:     #F8FAFC;
      --text-md:     #CBD5E1;
      --text-lo:     #94A3B8;
      --text-faint:  #475569;
      --border:      rgba(99, 102, 241, 0.18);
      --border-soft: rgba(148, 163, 184, 0.12);
      --grad-brand:  linear-gradient(135deg, var(--indigo) 0%, var(--magenta) 100%);
      --grad-word:   linear-gradient(90deg, #A78BFA 0%, #F472B6 100%);
      --max-width:   1180px;
      --pad-x:       clamp(20px, 4vw, 64px);
      --radius:      12px;
      --radius-pill: 999px;
      --ease:        cubic-bezier(0.22, 1, 0.36, 1);
      --t-fast:      180ms;
    }
.page-legal *, .page-legal *::before, .page-legal *::after { box-sizing: border-box; }
.page-legal {
      scroll-behavior: smooth;
      background: var(--bg-deep);
      overflow-x: hidden;
      scroll-padding-top: 88px;
    }
.page-legal {
      margin: 0;
      font-family: var(--font-body);
      font-size: 16.5px;
      line-height: 1.7;
      color: var(--text-md);
      background: var(--bg-deep);
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    @media (max-width: 920px) {
}
    @media (max-width: 560px) {
}
    @media (min-width: 561px) {
}
.page-legal .privacy-header {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 40px var(--pad-x) 28px;
      position: relative;
    }
.page-legal .pre-title {
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.2em;
      color: var(--teal-bright);
      text-transform: uppercase;
      margin: 0 0 12px;
    }
.page-legal .page-title {
      font-family: var(--font-display);
      font-size: clamp(36px, 5vw, 60px);
      font-weight: 700;
      letter-spacing: -0.028em;
      line-height: 1.08;
      color: var(--text-hi);
      margin: 0 0 16px;
      max-width: 18ch;
    }
.page-legal .page-title .accent {
      background: var(--grad-word);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }
.page-legal .page-lede {
      font-size: 18px;
      color: var(--text-md);
      max-width: 680px;
      margin: 0 0 24px;
      line-height: 1.6;
    }
.page-legal .meta-row {
      display: flex;
      gap: 20px;
      flex-wrap: wrap;
      align-items: center;
      font-family: var(--font-mono);
      font-size: 12.5px;
      color: var(--text-faint);
      letter-spacing: 0.02em;
    }
.page-legal .meta-row .pill {
      padding: 4px 12px;
      border: 1px solid var(--border);
      border-radius: var(--radius-pill);
      color: var(--text-lo);
    }
.page-legal .meta-row a { color: #F0ABCB; text-decoration: none; }
.page-legal .meta-row a:hover { text-decoration: underline; }
.page-legal .body-wrap {
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 32px var(--pad-x) 80px;
      display: grid;
      grid-template-columns: 240px 1fr;
      gap: 80px;
      align-items: start;
      position: relative;
      z-index: 2;
    }
    @media (max-width: 980px) {
.page-legal .body-wrap { grid-template-columns: 1fr; gap: 32px; }
.page-legal .toc-wrap { position: static !important; }
    }
.page-legal .toc-wrap {
      position: sticky;
      top: 100px;
      align-self: start;
    }
.page-legal .toc-title {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: 0.18em;
      color: var(--text-faint);
      text-transform: uppercase;
      margin: 0 0 16px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border-soft);
    }
.page-legal .toc {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
.page-legal .toc a {
      display: block;
      padding: 6px 12px 6px 14px;
      color: var(--text-lo);
      text-decoration: none;
      font-size: 14px;
      line-height: 1.4;
      border-left: 2px solid transparent;
      transition: all var(--t-fast) var(--ease);
      border-radius: 0 6px 6px 0;
    }
.page-legal .toc a:hover {
      color: var(--text-hi);
      border-left-color: var(--teal);
      background: rgba(99, 102, 241, 0.06);
    }
.page-legal .toc a.active {
      color: var(--text-hi);
      border-left-color: var(--teal-bright);
      background: rgba(20, 184, 166, 0.06);
      font-weight: 500;
    }
.page-legal .toc-num {
      font-family: var(--font-mono);
      color: var(--text-faint);
      font-size: 12px;
      margin-right: 8px;
    }
.page-legal article.privacy-content {
      max-width: 720px;
    }
.page-legal article h2 {
      font-family: var(--font-display);
      font-size: clamp(24px, 2.6vw, 32px);
      font-weight: 700;
      letter-spacing: -0.02em;
      line-height: 1.2;
      color: var(--text-hi);
      margin: 64px 0 20px;
      scroll-margin-top: 96px;
      padding-left: 18px;
      border-left: 4px solid #F0ABCB;
    }
.page-legal article h2:first-child { margin-top: 0; }
.page-legal article h2 .num {
      font-family: var(--font-mono);
      font-size: 0.6em;
      color: var(--magenta-2);
      margin-right: 14px;
      font-weight: 600;
    }
.page-legal article p {
      margin: 0 0 18px;
      color: var(--text-md);
    }
.page-legal article ul {
      padding-left: 0;
      list-style: none;
      margin: 18px 0;
    }
.page-legal article ul li {
      position: relative;
      padding: 8px 0 8px 28px;
      color: var(--text-md);
    }
.page-legal article ul li::before {
      content: "—";
      position: absolute;
      left: 0;
      top: 8px;
      color: var(--magenta-2);
      font-weight: 700;
    }
.page-legal article ul li strong { color: var(--text-hi); font-weight: 600; }
.page-legal article strong { color: var(--text-hi); font-weight: 600; }
.page-legal article code {
      font-family: var(--font-mono);
      font-size: 0.92em;
      background: rgba(99, 102, 241, 0.12);
      padding: 2px 7px;
      border-radius: 4px;
      color: var(--text-hi);
    }
.page-legal article a {
      color: #F0ABCB;
      text-decoration: none;
      border-bottom: 1px solid rgba(20, 184, 166, 0.3);
      transition: border-color var(--t-fast) var(--ease);
    }
.page-legal article a:hover { border-bottom-color: #F0ABCB; }
.page-legal article hr {
      border: none;
      border-top: 1px solid var(--border-soft);
      margin: 56px 0 32px;
    }
.page-legal article .closing-note {
      margin-top: 40px;
      padding: 24px;
      border-left: 3px solid var(--teal);
      background: rgba(13, 148, 136, 0.05);
      border-radius: 0 8px 8px 0;
      font-size: 14.5px;
      color: var(--text-lo);
      font-style: italic;
    }
/* ===== CREDITI ===== */
.page-credits {
  --bg-card: rgba(148, 163, 184, 0.05);
  --accent: var(--teal-bright);
  --accent-soft: rgba(20, 184, 166, 0.12);
  --accent-border: rgba(20, 184, 166, 0.3);
  --max-width: 820px;
  --pad-x: clamp(20px, 4vw, 48px);
  --radius: 12px;
}
.page-credits.mode-community { --accent: #F472B6; --accent-soft: rgba(244,114,182,.12); --accent-border: rgba(244,114,182,.32); }
.page-credits.mode-admin     { --accent: #14B8A6; --accent-soft: rgba(20,184,166,.12); --accent-border: rgba(20,184,166,.3); }
.page-credits.mode-business  { --accent: #818CF8; --accent-soft: rgba(129,140,248,.12); --accent-border: rgba(129,140,248,.3); }

:root {
      --bg-deep: #0A0A1F;
      --bg-base: #0F0F23;
      --bg-card: rgba(148, 163, 184, 0.05);
      --indigo: #312E81;
      --magenta: #9D174D;
      --teal: #0D9488;
      --teal-bright: #14B8A6;
      --text-hi: #F8FAFC;
      --text-md: #CBD5E1;
      --text-lo: #94A3B8;
      --text-faint: #475569;
      --border: rgba(99, 102, 241, 0.18);
      --border-soft: rgba(148, 163, 184, 0.12);
      --grad-word: linear-gradient(90deg, #A78BFA 0%, #F472B6 100%);
      --accent: var(--teal-bright);
      --accent-soft: rgba(20, 184, 166, 0.12);
      --accent-border: rgba(20, 184, 166, 0.3);
      --max-width: 820px;
      --pad-x: clamp(20px, 4vw, 48px);
      --radius: 12px;
    }
.page-credits.mode-community { --accent: #F472B6; --accent-soft: rgba(244, 114, 182, 0.12); --accent-border: rgba(244, 114, 182, 0.32); }
.page-credits.mode-admin { --accent: #14B8A6; --accent-soft: rgba(20, 184, 166, 0.12); --accent-border: rgba(20, 184, 166, 0.3); }
.page-credits.mode-business { --accent: #818CF8; --accent-soft: rgba(129, 140, 248, 0.12); --accent-border: rgba(129, 140, 248, 0.3); }
.page-credits *, .page-credits *::before, .page-credits *::after { box-sizing: border-box; }
.page-credits { background: var(--bg-deep); scroll-behavior: smooth; }
.page-credits {
      margin: 0;
      background: var(--bg-deep);
      color: var(--text-md);
      font-family: var(--font-body);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
    }
.page-credits .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--pad-x); }
.page-credits header.page-head { padding: 72px 0 40px; text-align: center; }
.page-credits .eyebrow {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent);
      background: var(--accent-soft);
      border: 1px solid var(--accent-border);
      border-radius: 999px;
      padding: 4px 14px;
      margin-bottom: 20px;
    }
.page-credits .wrap h1 {
      font-family: var(--font-display);
      font-size: clamp(28px, 5vw, 42px);
      font-weight: 600;
      line-height: 1.15;
      color: var(--text-hi);
      margin: 0 0 16px;
      letter-spacing: -0.02em;
    }
.page-credits .lede { font-size: 18px; color: var(--text-md); max-width: 620px; margin: 0 auto; }
.page-credits section { padding: 28px 0; border-top: 1px solid var(--border-soft); }
.page-credits section:first-of-type { border-top: none; }
.page-credits .wrap h2 {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 600;
      color: var(--text-hi);
      margin: 0 0 12px;
      letter-spacing: -0.01em;
    }
.page-credits .wrap p { margin: 0 0 14px; }
.page-credits .wrap strong { color: var(--text-hi); font-weight: 600; }
.page-credits code {
      font-family: var(--font-mono);
      font-size: 0.88em;
      background: var(--accent-soft);
      color: var(--accent);
      padding: 1px 6px;
      border-radius: 5px;
    }
.page-credits .card {
      background: var(--bg-card);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius);
      padding: 20px 24px;
      margin: 16px 0;
    }
.page-credits .day-list { list-style: none; margin: 12px 0 0; padding: 0; }
.page-credits .day-list li {
      display: flex;
      gap: 12px;
      padding: 7px 0;
      border-bottom: 1px solid var(--border-soft);
      font-size: 15px;
    }
.page-credits .day-list li:last-child { border-bottom: none; }
.page-credits .day-list .d { width: 38px; color: var(--text-lo); flex-shrink: 0; }
.page-credits .day-list .c { width: 78px; color: var(--accent); font-family: var(--font-mono); font-size: 14px; flex-shrink: 0; }
.page-credits .day-list .n { color: var(--text-lo); font-size: 14px; }
.page-credits .day-tot { margin-top: 12px; font-size: 15px; color: var(--text-md); }
.page-credits .pkg-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin: 16px 0;
    }
    @media (max-width: 640px) {
.page-credits .pkg-grid { grid-template-columns: repeat(2, 1fr); } }
.page-credits .pkg {
      background: var(--bg-card);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius);
      padding: 16px;
      text-align: center;
    }
.page-credits .pkg .pname { font-family: var(--font-display); font-weight: 600; color: var(--text-hi); font-size: 15px; }
.page-credits .pkg .pprice { font-size: 24px; font-weight: 600; color: var(--accent); margin: 6px 0 2px; }
.page-credits .pkg .pdur { font-size: 13px; color: var(--text-lo); }
.page-credits .recharge { background: var(--accent-soft); border: 1px solid var(--accent-border); border-radius: var(--radius); padding: 20px 24px; margin: 16px 0; }
.page-credits .note { font-size: 14px; color: var(--text-faint); }
.page-credits .wrap section a { color: var(--accent); }


/* ===== FORM (buy, gift) ===== */
.page-form {
  --bg-card: rgba(148, 163, 184, 0.05);
  --accent: var(--teal-bright);
  --accent-soft: rgba(20, 184, 166, 0.12);
  --accent-border: rgba(20, 184, 166, 0.3);
  --max-width: 820px;
  --pad-x: clamp(20px, 4vw, 48px);
  --radius: 12px;
}
.page-form.mode-community { --accent: #F472B6; --accent-soft: rgba(244,114,182,.12); --accent-border: rgba(244,114,182,.32); }
.page-form.mode-admin     { --accent: #14B8A6; --accent-soft: rgba(20,184,166,.12); --accent-border: rgba(20,184,166,.3); }
.page-form.mode-business  { --accent: #818CF8; --accent-soft: rgba(129,140,248,.12); --accent-border: rgba(129,140,248,.3); }

:root {
      --bg-deep: #0A0A1F;
      --bg-base: #0F0F23;
      --bg-card: rgba(148, 163, 184, 0.05);
      --indigo: #312E81;
      --magenta: #9D174D;
      --teal: #0D9488;
      --teal-bright: #14B8A6;
      --text-hi: #F8FAFC;
      --text-md: #CBD5E1;
      --text-lo: #94A3B8;
      --text-faint: #475569;
      --border: rgba(99, 102, 241, 0.18);
      --border-soft: rgba(148, 163, 184, 0.12);
      --grad-word: linear-gradient(90deg, #A78BFA 0%, #F472B6 100%);
      --accent: var(--teal-bright);
      --accent-soft: rgba(20, 184, 166, 0.12);
      --accent-border: rgba(20, 184, 166, 0.3);
      --danger: #F87171;
      --danger-soft: rgba(248, 113, 113, 0.1);
      --max-width: 820px;
      --pad-x: clamp(20px, 4vw, 48px);
      --radius: 12px;
    }
@@L2@@
    body.mode-community { --accent: #F472B6; --accent-soft: rgba(244, 114, 182, 0.12); --accent-border: rgba(244, 114, 182, 0.32); }
.page-form.mode-admin { --accent: #14B8A6; --accent-soft: rgba(20, 184, 166, 0.12); --accent-border: rgba(20, 184, 166, 0.3); }
.page-form.mode-business { --accent: #818CF8; --accent-soft: rgba(129, 140, 248, 0.12); --accent-border: rgba(129, 140, 248, 0.3); }
.page-form *, .page-form *::before, .page-form *::after { box-sizing: border-box; }
.page-form { background: var(--bg-deep); scroll-behavior: smooth; }
.page-form {
      margin: 0;
      background: var(--bg-deep);
      color: var(--text-md);
      font-family: var(--font-body);
      line-height: 1.7;
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
    }
.page-form .wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 var(--pad-x); }
.page-form header.page-head { padding: 72px 0 32px; text-align: center; }
.page-form .eyebrow {
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--accent);
      background: var(--accent-soft);
      border: 1px solid var(--accent-border);
      border-radius: 999px;
      padding: 4px 14px;
      margin-bottom: 20px;
    }
.page-form .wrap h1 {
      font-family: var(--font-display);
      font-size: clamp(28px, 5vw, 42px);
      font-weight: 600;
      line-height: 1.15;
      margin: 0 0 14px;
      color: var(--text-hi);
    }
.page-form .lede { font-size: 18px; color: var(--text-md); max-width: 620px; margin: 0 auto; }
.page-form section { padding: 24px 0; }
.page-form .card {
      background: var(--bg-card);
      border: 1px solid var(--border-soft);
      border-radius: var(--radius);
      padding: clamp(20px, 4vw, 32px);
    }
.page-form label.field { display: block; margin-bottom: 18px; }
.page-form label.field > span { display: block; font-size: 14px; color: var(--text-lo); margin-bottom: 6px; }
.page-form input[type=text] {
      width: 100%;
      font-family: var(--font-mono);
      font-size: 15px;
      color: var(--text-hi);
      background: rgba(10, 10, 31, 0.6);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 12px 14px;
    }
.page-form input[type=text]:focus { outline: none; border-color: var(--accent-border); box-shadow: 0 0 0 3px var(--accent-soft); }
.page-form .hint { font-size: 13px; color: var(--text-faint); margin-top: 6px; }
.page-form .wrap button {
      font-family: var(--font-body);
      font-weight: 600;
      cursor: pointer;
      border: none;
      border-radius: 8px;
      transition: transform .08s ease, filter .15s ease;
    }
.page-form .wrap button:active { transform: translateY(1px); }
.page-form .btn-primary {
      background: linear-gradient(135deg, var(--indigo), var(--magenta));
      color: #fff;
      font-size: 16px;
      padding: 13px 28px;
    }
.page-form .btn-primary:hover { filter: brightness(1.1); }
.page-form .btn-primary:disabled { opacity: .5; cursor: not-allowed; filter: none; }
.page-form .server-banner {
      display: flex; align-items: center; gap: 12px;
      background: var(--accent-soft);
      border: 1px solid var(--accent-border);
      border-radius: 10px;
      padding: 12px 16px;
      margin-bottom: 24px;
    }
.page-form .server-banner .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.page-form .server-banner b { color: var(--text-hi); }
.page-form .pkg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.page-form .pkg {
      text-align: left;
      background: rgba(10, 10, 31, 0.5);
      border: 1.5px solid var(--border-soft);
      border-radius: 10px;
      padding: 18px;
      color: var(--text-md);
      display: flex; flex-direction: column; gap: 4px;
    }
.page-form .pkg:hover { border-color: var(--accent-border); }
.page-form .pkg.selected { border-color: var(--accent); background: var(--accent-soft); }
.page-form .pkg .pname { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--text-hi); }
.page-form .pkg .pprice { font-size: 24px; font-weight: 700; color: var(--text-hi); }
.page-form .pkg .pcred { font-size: 13px; color: var(--text-lo); }
.page-form .toggle-row { display: flex; align-items: center; gap: 10px; margin: 18px 0; }
.page-form .toggle-row input { width: 18px; height: 18px; accent-color: var(--accent); }
.page-form .toggle-row label { font-size: 15px; color: var(--text-md); }
.page-form .err {
      background: var(--danger-soft);
      border: 1px solid var(--danger);
      color: #FCA5A5;
      border-radius: 8px;
      padding: 12px 16px;
      font-size: 14px;
      margin-bottom: 18px;
    }
.page-form .business-note {
      background: rgba(129, 140, 248, 0.08);
      border: 1px solid rgba(129, 140, 248, 0.3);
      border-radius: 10px;
      padding: 20px;
      color: var(--text-md);
    }
.page-form .hidden { display: none !important; }
.page-form .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite; vertical-align: -2px; margin-right: 8px; }
    @keyframes spin { to { transform: rotate(360deg); } }


/* ===== #1222 + spazio-top: pagina crediti al rosa del sito + header visibile ===== */
.page-credits,
.page-credits.mode-admin {
  --accent: #F0ABCB;
  --accent-soft: rgba(240, 171, 203, 0.12);
  --accent-border: rgba(240, 171, 203, 0.3);
}
.page-credits header.page-head {
  position: relative;
  z-index: 2;
  padding: 40px 0 32px;
}

/* ---- design pass #1222: occhiello=kicker, parola-chiave titolo in gradiente, prezzi bianchi ---- */
.page-credits .eyebrow, .page-form .eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-body); font-weight: 600; letter-spacing: 0.14em;
  color: #F0ABCB; background: rgba(190, 24, 93, 0.07);
  border: 1px solid var(--border, rgba(148,163,184,0.18)); padding: 6px 14px;
}
.page-credits .wrap h1 i {
  font-style: italic; font-weight: 400;
  background: var(--grad-word); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.page-credits .pkg .pprice { color: var(--text-hi); }

/* ---- coerenza accento sito: rosa standard (#F0ABCB) su default+admin di TUTTE le pagine ----
   Elimina il teal residuo su buy/privacy/terms. Le varianti community/business (piu specifiche)
   mantengono il loro colore. Ref #1222 (coerenza sito). */
.page-form, .page-legal,
.page-form.mode-admin, .page-legal.mode-admin, .page-credits.mode-admin {
  --accent: #F0ABCB;
  --accent-soft: rgba(240, 171, 203, 0.12);
  --accent-border: rgba(240, 171, 203, 0.3);
}