.siteHeader{position:relative;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}

    .headerInner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0}
:root{
  --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --bg:#ffffff;
  --card:#ffffff;
  --text:#1F2937;
  --muted:#6b7280;
--line:#e5e7eb;

  --plus:#0F766E;
  --plus-100:#E6F4F1;

  --premium:#0B5F58;
  --premium-100:#E3F2F0;

  --ok:#16a34a;

  --shadow: 0 14px 40px rgba(17,24,39,.10);
  --r:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: var(--font-sans);
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

main{flex:1 0 auto}
footer{margin-top:auto}
a{color:inherit}
img{max-width:100%;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 16px}


/* Header (non sticky) */


.brand{display:inline-flex;align-items:center;text-decoration:none}
.brandLogo{height:46px;width:auto}

/* Desktop nav */
.navDesktop{display:none; gap:2px; align-items:center}
.navDesktop a{
  text-decoration:none;
  color: var(--muted);
  font-weight: 800;
  font-size: 14px;
  padding: 8px 10px;
  border-radius: 999px;
}
.navDesktop a:hover{color: var(--plus); background: var(--plus-100);}
.navDesktop a.active{color: var(--plus); background: var(--plus-100);}

/* Hamburger */
.menuBtn{
  border:1px solid rgba(17,24,39,.14);
  background:#fff;
  border-radius:999px;
  width:44px;
  height:44px;
  display:inline-grid;
  place-items:center;
  cursor:pointer;
}
.menuBtn:hover{background: var(--plus-100); border-color: rgba(15,118,110,.28)}
.menuBars{
  width:18px;height:2px;border-radius:2px;background:#111827;position:relative;display:block;
  box-shadow: 0 -5px 0 #111827, 0 5px 0 #111827;
}

/* Mobile menu */
.mobileMenu{
  margin:10px 0 14px;
  border:1px solid var(--line);
  border-radius: var(--r);
  background:#fff;
  padding:12px;
  box-shadow: 0 1px 0 rgba(17,24,39,.03);
  max-width:1120px;
}
.navMobile{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.navMobile a{
  display:block;
  padding:10px 12px;
  border-radius: 12px;
  font-weight:900;
  color:#374151;
  text-decoration:none;
}
.navMobile a:hover{background: var(--plus-100); color: var(--plus);}
.navMobile a.active{background: var(--plus-100); color: var(--plus);}

/* Buttons (used in some pages) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* Touch target (tablet/mobile) */
  min-height:44px;
  padding:12px 14px;
  border-radius:999px;
  font-weight:900;
  font-size:14px;
  border:1px solid rgba(17,24,39,.14);
  background:#fff;
  text-decoration:none;
  cursor:pointer;
  line-height:1;
}
.btn.primary{background:var(--plus); border-color:var(--plus); color:#fff;}
.btn.primary:hover{filter:brightness(.96)}
.btn.ghost:hover{background:#f9fafb}

/* Footer */
footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);font-size:13px;text-align:center}
.footRow{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;max-width:1120px;margin:0 auto;padding:0 16px;text-align:center}
.footLinks{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.footRow a{text-decoration:none;color:var(--muted);font-weight:600}
.footRow a:hover{color:var(--plus);}

@media(min-width:980px){
  .footRow{flex-direction:row;text-align:center}

  .menuBtn{display:none;}
  .navDesktop{display:flex;}
  .mobileMenu{display:none;}

  /* Footer desktop alignment */
  footer{text-align:left}
  .footRow{justify-content:space-between}
  .footLinks{justify-content:flex-end}
}

/* Baseline typography */
h1{margin:0 0 10px;font-size:40px;line-height:1.08;letter-spacing:-1px;font-weight:900;color:var(--text)}
h2{margin:0 0 8px;font-size:28px;letter-spacing:-.5px;font-weight:900}

/* Utility */
.text-teal{color:var(--plus);}
h3{margin:0 0 8px;font-size:18px;letter-spacing:-.2px;font-weight:900}
p{margin:0 0 12px;color:#374151;font-weight:600;line-height:1.5}

:root{
  --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    --bg:#ffffff;
    --text:#111827;
    --muted:#6b7280;
    --line:#e5e7eb;
    --plus:#0F766E;
    --plus-100:#E6F4F1;
    --r:16px;
  }
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family: var(--font-sans);
    background:var(--bg);
    color:var(--text);
  }
  a{color:inherit}
  .container{max-width:1120px;margin:0 auto;padding:0 16px}

  /* Header (same structure as piani) */
  
  
  .brand{display:inline-flex;align-items:center;text-decoration:none}
  .brandLogo{height:46px;width:auto;display:block}

  .menuBtn{
    border:1px solid rgba(17,24,39,.14);
    background:#fff;
    border-radius:999px;
    width:44px;height:44px;
    display:inline-grid;place-items:center;
    cursor:pointer;
  }
  .menuBtn:hover{background: var(--plus-100); border-color: rgba(15,118,110,.28)}
  .menuBars{width:18px;height:2px;border-radius:2px;background:#111827;display:block;box-shadow:0 -5px 0 #111827,0 5px 0 #111827}
  .navDesktop{display:none;}
  .mobileMenu{
    margin:10px 0 0;
    border:1px solid var(--line);
    border-radius: var(--r);
    background:#fff;
    padding:12px;
    box-shadow: 0 1px 0 rgba(17,24,39,.03);
    max-width:1120px;
  }
  .navMobile{display:flex;flex-direction:column;gap:6px;align-items:stretch}
  .navMobile a{
    display:block;
    padding:10px 12px;
    border-radius: 12px;
    font-weight:900;
    color:#374151;
    text-decoration:none;
  }
  .navMobile a:hover{background: var(--plus-100); color: var(--plus);}
  .btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:10px 12px;border-radius:999px;
    font-weight:800;font-size:14px;
    border:1px solid rgba(17,24,39,.14);
    background:#fff;text-decoration:none;cursor:pointer;
  }
  .btn.primary{background:var(--plus);border-color:var(--plus);color:#fff;}
  .btn.primary:active{transform:translateY(1px)}
  .mobileCta{width:100%;margin-top:10px}

  .nav.navDesktop a{ text-decoration:none; }
  .nav.navDesktop .cta{ background: var(--plus); color:#fff; border:1px solid var(--plus); }
  .nav.navDesktop .cta:hover{ background:#0b5f58; }
  .nav.navDesktop a{
    color: var(--muted);
    font-weight: 800;
    font-size: 14px;
    padding: 8px 10px;
    border-radius: 999px;
  }
  .nav.navDesktop a:hover{color: var(--plus); background: var(--plus-100);}

  @media(min-width:980px){
    .menuBtn{display:none;}
    .navDesktop{display:flex;}
    .mobileMenu{display:none;}
  }

  /* Legal page (classic, small, dense) */
  main{padding:0 0 34px}
  /* Condizioni: add breathing room under header without affecting other pages. */
  .page-condizioni main{padding-top:14px}
  /* Privacy: add breathing room under header without affecting other pages. */
  .page-privacy main{padding-top:14px}
  .legalWrap{max-width:920px;margin:0 auto}
  /* Legal pages: allow full-width alignment when needed (used on condizioni.html). */
  .legalWrap--full{max-width:none;margin:0}
  .kicker{font-size:11px;color:var(--muted);font-weight:800;letter-spacing:.03em;margin:0 0 6px}
  h1{margin:0 0 12px;font-size:20px;letter-spacing:-.2px;line-height:1.2;color:#111827}
  .legal{font-size:12.6px;line-height:1.55;color:#111827}
  .legal p{margin:0 0 7px}
  .legal h2{margin:12px 0 6px;font-size:13.2px;letter-spacing:-.1px}
  .legal h3{margin:10px 0 6px;font-size:12.9px;letter-spacing:-.1px}
  .secNum{color:var(--muted);font-weight:900}
  .legal ul{margin:4px 0 8px 18px;padding:0}
  .legal li{margin:2px 0}
  footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);font-size:13px}
  section{scroll-margin-top:90px}

:root{
  --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      --bg:#ffffff;
      --card:#ffffff;
      --text:#1F2937;
      --muted:#6b7280;
      --line:#e5e7eb;

      --plus:#0F766E;
      --plus-100:#E6F4F1;
      --plus-200:#CFECE7;

      --premium:#0B5F58;
      --premium-100:#E3F2F0;
      --premium-200:#C7E7E3;

      --ok:#16a34a;

      --shadow: 0 14px 40px rgba(17,24,39,.10);
      --r:16px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      font-family: var(--font-sans);
      margin:0;
      background:var(--bg);
      color:var(--text);
    }
    a{color:inherit}
    .container{max-width:1120px;margin:0 auto;padding:0 16px}
    section{scroll-margin-top:90px}

    /* Header (coerente con piani.html) */
    
    
    .brand{display:inline-flex;align-items:center;text-decoration:none}
    .brandLogo{height:46px;width:auto;display:block}

    .menuBtn{
      border:1px solid rgba(17,24,39,.14);
      background:#fff;
      border-radius:999px;
      width:44px;
      height:44px;
      display:inline-grid;
      place-items:center;
      cursor:pointer;
    }
    .menuBtn:hover{background: var(--plus-100); border-color: rgba(15,118,110,.28)}
    .menuBars{
      width:18px;height:2px;border-radius:2px;background:#111827;position:relative;display:block;
      box-shadow: 0 -5px 0 #111827, 0 5px 0 #111827;
    }
    .navDesktop{display:none;}
    .nav.navDesktop a{ text-decoration:none; }
    .nav.navDesktop .cta{ background: var(--plus); color:#fff; border:1px solid var(--plus); }
    .nav.navDesktop .cta:hover{ background:#0b5f58; }
    .nav.navDesktop a{
      color: var(--muted);
      font-weight: 800;
      font-size: 14px;
      padding: 8px 10px;
      border-radius: 999px;
    }
    .nav.navDesktop a:hover{color: var(--plus); background: var(--plus-100);}

    .mobileMenu{
      margin:10px 0 14px;
      border:1px solid var(--line);
      border-radius: var(--r);
      background:#fff;
      padding:12px;
      box-shadow: 0 1px 0 rgba(17,24,39,.03);
      max-width:1120px;
    }
    .navMobile{
      display:flex;
      flex-direction:column;
      gap:6px;
      align-items:stretch;
    }
    .navMobile a{
      display:block;
      padding:10px 12px;
      border-radius: 12px;
      font-weight:900;
      color:#374151;
      text-decoration:none;
    }
    .navMobile a:hover{background: var(--plus-100); color: var(--plus);}
    .mobileCta{width:100%; margin-top:10px;}

    @media(min-width:980px){
      .menuBtn{display:none;}
      .navDesktop{display:flex; gap:2px; align-items:center;}
      .mobileMenu{display:none;}
    }

    /* Buttons */
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:flex-start;
      padding:12px 14px;
      border-radius:999px;
      font-weight:900;
      font-size:14px;
      border:1px solid rgba(17,24,39,.14);
      background:#fff;
      text-decoration:none;
      cursor:pointer;
      line-height:1;
      white-space:nowrap;
    }
    .btn.primary{
      background:var(--plus);
      border-color:var(--plus);
      color:#fff;
    }
    .btn.primary:hover{filter:brightness(.96)}
    .btn.ghost:hover{background: #f9fafb}
    .btn:active{transform:translateY(1px)}

    .chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}
    .chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 12px;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      color:#111827;
      font-weight:800;
      font-size:13px;
      text-decoration:none;
    }

    /* Page spacing */

    .page{padding:0}
    
    .divider{border-top:1px solid var(--line); margin:26px 0}

    /* Accessibility */
    .srOnly{
      position:absolute;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
      border:0;
    }

    /* Hero */

    .heroWrap{padding:10px 0 22px}
    
    .heroGrid{
  display:grid;
  gap:18px;
  align-items:start;
  grid-template-columns:1fr;
  justify-items:center;
}

/* Hero split (Home) */
.heroSplit .heroGrid{
  gap:0;
  align-items:stretch;
  justify-items:stretch;
}
.heroMedia{
  border-radius: calc(var(--r) + 10px);
  overflow:hidden;
}
.heroSideImg{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
@media(min-width:980px){
  .heroSplit .heroGrid{
    grid-template-columns: 45% 55%;
    align-items:start;
  }
  .heroSplit .heroContent{
    text-align:left;
    padding-left: 42px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }
  .heroSplit .heroTitle,
  .heroSplit .heroSub,
  .heroSplit .hp-anchor,
  .heroSplit .hp-micro{
    margin-left:0;
    margin-right:0;
    text-align:left;
  }
  .heroSplit .heroCtas{ justify-content:flex-start; }
}

    .pill{
      display:inline-flex;
      align-items:center;
      gap:10px;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(15,118,110,.25);
      background: var(--plus-100);
      color:#0F3D3A;
      font-weight:900;
      font-size:13px;
      width:fit-content;
    }
    .pillDot{width:9px;height:9px;border-radius:999px;background:var(--plus)}
    .heroTitle{
  margin:0 0 12px;
  /* -2px on both mobile and responsive range */
  font-size: calc(clamp(29px, 4.2vw, 49px) - 2px);
  line-height:1.08;
  letter-spacing:-1px;
  font-weight:900;
  color: var(--plus);
  text-align:center;
  max-width: 30ch;
  margin-left:auto;
  margin-right:auto;
}

/* Hero title split (Home) */
.heroTitleLead{ margin-bottom:6px; }
.heroTitleSub{
  margin:0 0 12px;
  font-size: calc(clamp(24px, 3.6vw, 44px) - 2px);
  line-height:1.1;
  letter-spacing:-0.6px;
  max-width: 34ch;
  /* Keep the subtitle centered like the main title on non-desktop layouts.
     Without auto side margins, the max-width causes a visible offset on tablet. */
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* Home: tablet portrait should behave like a "bigger mobile".
   Keep the mobile layout, but slightly increase hero typography for readability. */
@media (min-width: 760px) and (max-width: 979px) and (orientation: portrait){
  /* Tablet portrait = "mobile XL"
     Layout stays mobile (hamburger + single column), but scale up type and spacing
     for better readability on 8"–9" devices. */

  /* Base scale */
  body{ font-size:18px; }
  .container{ padding:0 22px; }

  /* Header */
  .brandLogo{ height:56px; }
  .menuBtn{ width:52px; height:52px; }
  .menuBars{ width:20px; }

  /* Global type */
  p{ line-height:1.55; }
  h2{ font-size:32px; }
  h3{ font-size:20px; }

  /* Section headings */
  .kicker{ font-size:13px; }
  .h2{ font-size:32px; }
  .lead{ font-size:16px; }

  /* Buttons */
  .btn{
    min-height:52px;
    padding:14px 18px;
    font-size:16px;
  }

  /* Home hero */
  .home .heroTitleLead{ font-size: calc(clamp(29px, 4.2vw, 49px) + 8px); }
  .home .heroTitleSub{ font-size: calc(clamp(24px, 3.6vw, 44px) + 6px); }
  .heroSub{ font-size:17px; }
  .heroCtas{ gap:12px; margin-top:18px; }

  /* Cards / boxes */
  .card{ padding:20px; }
  .card h4{ font-size:18px; }
  .card p{ font-size:16px; line-height:1.5; }
  .card .hint{ font-size:14px; }

  .valueBox{ padding:20px 20px 18px; }
  .valueBox h3{ font-size:18px; }
  .ticks{ gap:12px; }
  .ticks li{ font-size:16px; line-height:1.4; }
  .tick{ width:20px; height:20px; flex-basis:20px; font-size:13px; }

  /* How it works */
  .stepNo{ width:36px; height:36px; }
  .stepTitle{ font-size:18px; }
  .stepText{ font-size:16px; line-height:1.5; }
  .stepHint{ font-size:14px; }

  /* Pricing teaser */
  .planCard{ padding:22px; }
  .planPrice{ font-size:34px; }
  .planPrice span{ font-size:15px; }

  /* Footer */
  footer{ font-size:14px; padding:30px 0; }
}
@media(min-width:980px){
  /* Keep the main hero title large, but shrink the subtitle on desktop */
  .heroTitle:not(.heroTitleSub){ font-size:51px; }
  .heroTitleSub{ font-size:42px; }
}
    .heroSub{
  margin:0;
  color: var(--muted);
  font-size:16px;
  line-height:1.55;
  font-weight:650;
  max-width:60ch;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
}
    .heroSub strong{color:#374151;font-weight:900}

/* Home hero: on small screens keep the descriptive text wide and readable */
@media(max-width:640px){
  .heroSplit .heroSub{
    max-width:none;
    text-align:center;
    margin-left:auto;
    margin-right:auto;
    padding-inline:8px;
  }
}

/* Hero centered copy (Home) */
.heroCenter .heroContent{ text-align:center; }
.heroCenter .heroContent > p{ margin-left:auto; margin-right:auto; }
.hp-anchor{ margin: 10px auto 0; max-width: 60ch; text-align:center; }
.hp-micro{
  margin: 14px auto 0;
  text-align:center;
  font-size:13px;
  color: var(--muted);
  font-weight:650;
}
.onlyMobile{ display:none; }
@media(max-width:640px){ .onlyMobile{ display:block; } }

    .heroCtas{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; justify-content:center}

    /* Value box (right) */
    .valueBox{
      background: var(--card);
      border:1px solid var(--line);
      border-radius: calc(var(--r) + 6px);
      padding:16px 16px 14px;
      box-shadow: 0 1px 0 rgba(17,24,39,.03);
    }
    .valueBox h3{
      margin:0 0 12px;
      font-size:16px;
      letter-spacing:-.2px;
      color: var(--plus);
      font-weight:900;
      line-height:1.25;
    }
    .ticks{margin:0;padding:0; list-style:none; display:grid; gap:10px}
    .ticks li{display:flex; gap:10px; align-items:flex-start; color:#374151; font-weight:700; line-height:1.35}
    .tick{
      width:18px;height:18px; flex:0 0 18px;
      display:grid;place-items:center;
      border-radius:999px;
      background:#ecfdf5;
      color: var(--ok);
      font-weight:900;
      font-size:12px;
      margin-top:2px;
    }

    /* Section headings */
    .kicker{color:var(--muted); font-weight:900; font-size:12px; text-transform:uppercase; letter-spacing:.08em}
    .h2{margin:8px 0 8px; font-size:26px; letter-spacing:-.5px; font-weight:900}
    @media(min-width:980px){ .h2{font-size:32px} }
    .lead{margin:0; color:var(--muted); font-weight:600; line-height:1.45}

    /* Cards grid */
    .grid2{display:grid; gap:14px; margin-top:16px}
    @media(min-width:980px){ .grid2{grid-template-columns:repeat(2, 1fr); gap:16px} }
    .grid3{display:grid; gap:14px; margin-top:16px}
    @media(min-width:980px){ .grid3{grid-template-columns:repeat(3, 1fr); gap:16px} }
    .grid4{display:grid; gap:14px; margin-top:16px}
    @media(min-width:980px){ .grid4{grid-template-columns:repeat(4, 1fr); gap:16px} }
    .card{
      background: var(--card);
      border:1px solid var(--line);
      border-radius: var(--r);
      padding:16px;
      box-shadow: 0 1px 0 rgba(17,24,39,.03);
    }
    .card h4{margin:0 0 6px; font-size:16px; letter-spacing:-.2px; font-weight:900}
    .card p{margin:0; color:#374151; font-weight:650; line-height:1.4}
    .card .hint{margin-top:8px; color:var(--muted); font-weight:700; font-size:13px}

    /* How it works */
    .steps{display:grid; gap:14px; margin-top:16px}
    @media(min-width:980px){ .steps{grid-template-columns:repeat(3,1fr);} }
    .stepNo{
      width:30px;height:30px;border-radius:999px;
      display:grid;place-items:center;
      border:1px solid rgba(15,118,110,.25);
      background: var(--plus-100);
      color: var(--plus);
      font-weight:900;
      margin-bottom:10px;
    }
    .stepTitle{margin:0 0 6px; font-size:16px; font-weight:900; letter-spacing:-.2px}
    .stepText{margin:0; color:#374151; font-weight:650; line-height:1.4}
    .stepHint{margin-top:10px; color:var(--muted); font-weight:700; font-size:13px; line-height:1.35}

    /* Before/After */
    .baGrid{display:grid; gap:14px; margin-top:16px}
    @media(min-width:980px){ .baGrid{grid-template-columns:1fr 1fr; gap:16px} }
    .ba{
      border:1px solid var(--line);
      border-radius: var(--r);
      padding:16px;
      background:#fff;
      box-shadow: 0 1px 0 rgba(17,24,39,.03);
    }
    .ba.after{
      border-color: rgba(15,118,110,.22);
      background: linear-gradient(180deg, #ffffff 0%, var(--plus-100) 100%);
    }
    .baTitle{margin:0 0 10px; font-weight:900; letter-spacing:-.2px}
    .ba ul{margin:0; padding-left:18px; color:#374151; font-weight:650; line-height:1.55}
    .ba ul li{margin:6px 0}

    /* Pricing teaser */
    .pricingWrap{padding:6px 0 0}
    .pricingGrid{display:grid; gap:14px; margin-top:16px}
    @media(min-width:980px){ .pricingGrid{grid-template-columns:repeat(3,1fr); gap:16px} }
    .planCard{
      background:#fff;
      border:1px solid var(--line);
      border-radius: var(--r);
      padding:18px;
      box-shadow: 0 1px 0 rgba(17,24,39,.03);
      display:flex;
      flex-direction:column;
      gap:10px;
      min-height:170px;
    }
    .planCard.plus{
      background: linear-gradient(180deg, #ffffff 0%, var(--plus-100) 100%);
      border-color: rgba(15,118,110,.25);
    }
    .planCard.premium{
      border:2px solid var(--premium);
      background: linear-gradient(180deg, #ffffff 0%, var(--premium-100) 100%);
      box-shadow: var(--shadow);
    }
    .planName{margin:0; font-weight:900; letter-spacing:.6px}
    .planTag{margin:0; color: var(--muted); font-weight:800}
    .planPrice{
      margin:2px 0 0;
      font-size:30px;
      letter-spacing:-.6px;
      font-weight:900;
    }
    .planPrice span{color:var(--muted); font-size:14px; font-weight:700; letter-spacing:0}
    .planCtaRow{margin-top:auto; display:flex; gap:10px; flex-wrap:wrap}
    .linkRow{margin-top:10px}
    .smallLink{color: var(--muted); font-weight:700; text-decoration:none}
    .smallLink:hover{color: var(--plus);}

    /* Final CTA */
    .ctaBox{
      margin: 24px 0 34px;
      border:1px solid var(--line);
      border-radius: calc(var(--r) + 8px);
      padding:18px;
      background:#fff;
      box-shadow: 0 1px 0 rgba(17,24,39,.03);
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    @media(min-width:980px){
      .ctaBox{padding:22px; flex-direction:row; align-items:center; justify-content:space-between; gap:18px}
    }
    .ctaBox h3{margin:0; font-size:22px; letter-spacing:-.4px; font-weight:900}
    .ctaBox p{margin:6px 0 0; color:var(--muted); font-weight:650; line-height:1.4}
    .ctaMeta{margin-top:10px; color:var(--muted); font-weight:700; font-size:13px}
    @media(min-width:980px){ .ctaMeta{margin-top:0} }

    /* Final CTA (Home) – simple, no card */
    .ctaSimple{
      margin: 24px 0 34px;
      text-align:center;
      padding: 8px 0;
    }

    /* Footer (coerente con piani.html) */
    footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);font-size:13px}

:root{
  --font-sans: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    --bg:#ffffff;
    --card:#ffffff;
    --text:#1F2937;
    --muted:#6b7280;
    --line:#e5e7eb;

    --plus:#0F766E;
    --plus-100:#E6F4F1;
    --plus-200:#CFECE7;

    --premium:#0B5F58;
    --premium-100:#E3F2F0;
    --premium-200:#C7E7E3;

    --ok:#16a34a;

    --shadow: 0 14px 40px rgba(17,24,39,.10);
    --r:16px;
  }

  *{box-sizing:border-box}
  body{
    font-family: var(--font-sans);
    margin:0;
    background:var(--bg);
    color:var(--text);
  }

  a{color:inherit}
  .container{max-width:1120px;margin:28px auto 40px;padding:0 16px}

  .hero{text-align:center;margin-top:26px;margin-bottom:14px}
  .hero h1{margin:0 0 8px;font-size:32px;letter-spacing:-.4px;line-height:1.15}
  .hero p{margin:0;color:var(--muted);font-size:16px}

  .note{
    margin:16px auto 18px;
    max-width:980px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r);
    padding:14px 16px;
    color:#374151;
    font-size:14px;
    line-height:1.35;
  }
  .note strong{color:var(--text)}
  .note .sub{color:var(--muted);margin-top:6px;font-size:13px}
  .note.centered{text-align:center}
  .note.centered .sub{max-width:860px;margin-left:auto;margin-right:auto}

  
  /* Buttons */
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:flex-start;
    padding:10px 12px;
    border-radius:999px;
    font-weight:800;
    font-size:14px;
    border:1px solid rgba(17,24,39,.14);
    background:#fff;
    text-decoration:none;
    cursor:pointer;
  }
  .btn.primary{
    background:var(--plus);
    border-color:var(--plus);
    color:#fff;
  }
  .btn:active{transform:translateY(1px)}

  /* Mobile: progressive cards */
  .plans{
    display:grid;
    gap:14px;
    max-width:980px;
    margin:0 auto 18px;
  }
  .plan{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--r);
    padding:16px;
    box-shadow: 0 1px 0 rgba(17,24,39,.03);
    position:relative;
  }
  .planTop{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
  }
  .plan h2{
    margin:0;
    font-size:18px;
    letter-spacing:-.2px;
  }
  .plans .plan.premium h2{font-weight:900;color:var(--plus);}
  /* Tone hierarchy for BASE/PLUS on cards (mobile/tablet) */
  .plans .plan:nth-of-type(1) h2{font-weight:800;color:var(--muted);}
  .plans .plan:nth-of-type(2) h2{font-weight:800;color:#374151;}
  .plans .plan:nth-of-type(1) .tagline{font-weight:700;color:var(--muted);}
  .plans .plan:nth-of-type(2) .tagline{font-weight:800;color:#374151;}
  .tagline{
    margin:6px 0 0;
    font-weight:900;
    color:var(--text);
    letter-spacing:-.2px;
  }
  .taglineSub{
    margin:4px 0 0;
    font-size:13px;
    line-height:1.25;
    color:var(--muted);
    font-weight:800;
  }
  .price{
    margin:10px 0 0;
    font-size:22px;
    font-weight:900;
    letter-spacing:-.2px;
  }
  .per{
    font-size:13px;
    color:var(--muted);
    font-weight:600;
    margin-left:4px;
  }

  .includesLabel{
    margin:12px 0 0;
    font-size:12px;
    color:var(--muted);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
  }

  .bullets{
    margin:10px 0 0;
    padding:0;
    list-style:none;
    color:#374151;
    font-size:14px;
    line-height:1.35;
  }
  .bullets li{
    display:flex;
    gap:10px;
    padding:7px 0;
    border-bottom:1px solid rgba(230,232,238,.75);
  }
  .bullets li:last-child{border-bottom:0}
  .dot{
    width:18px;height:18px;flex:0 0 18px;
    display:grid;place-items:center;
    border-radius:999px;
    background:#ecfdf5;
    color:var(--ok);
    font-weight:900;
    font-size:12px;
    margin-top:1px;
  }
  .dot.plus{
    background: var(--plus-100);
    color: var(--plus);
    font-weight:900;
  }

  .ctaRow{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap}

  .badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
    border:1px solid rgba(15,118,110,.28);
    background:var(--plus-100);
    color:#0F3D3A;
    white-space:nowrap;
  }
  .badgeDot{
    width:8px;height:8px;border-radius:999px;background:var(--plus);
  }

  .plan.plus{
    border:1px solid var(--line);
    box-shadow: 0 1px 0 rgba(17,24,39,.03);
    background: var(--card);
  }

  .badgeDotPremium{width:8px;height:8px;border-radius:999px;background:var(--premium);}
  .btn.premium{background:var(--premium);border-color:var(--premium);color:#fff;}
  .btn.premium:hover{filter:brightness(.96);}
  .plan.premium{
    border:2px solid var(--premium);
    box-shadow: var(--shadow);
    background: linear-gradient(180deg, #ffffff 0%, var(--premium-100) 100%);
  }

  /* Desktop: comparison table */
  .tableWrap{
    display:none;
    background:var(--card);
    border-radius:var(--r);
    overflow:hidden;
    border:1px solid var(--line);
    box-shadow: 0 1px 0 rgba(17,24,39,.03);
    max-width:1100px;
    margin: 0 auto 18px;
  }
  table{width:100%;border-collapse:collapse}
  th,td{padding:14px 12px;text-align:center;border-bottom:1px solid var(--line);font-size:14px}
  th:first-child,td:first-child{text-align:left}
  thead th{background:#f8fafc;font-weight:900}
  /* Desktop tone hierarchy: BASE lighter, PLUS standard, PREMIUM highlighted */
  /* Desktop plans header tone */
  .desktopPlans .plan.base h2{color:var(--muted);font-weight:800;}
  .desktopPlans .plan.base .price{color:#111827;font-weight:800;}
  .desktopPlans .plan.plus h2{color:#374151;font-weight:900;}
  .desktopPlans .plan.plus .price{color:#111827;font-weight:900;}

  .tableWrap thead th:nth-child(2){color:var(--muted); font-weight:800;}
  .tableWrap thead th:nth-child(2) .price{color:var(--text); font-weight:900;}
  .tableWrap thead th:nth-child(3){color:var(--text); font-weight:900;}
  thead th.plusCol{
    background:#f8fafc;
    font-size:18px;
  }
  tbody td.plusCol{background:transparent;font-weight:700}

  thead th.premiumCol{
    background:var(--premium-200);
    font-size:18px;
    border-left:2px solid var(--premium);
    border-right:2px solid var(--premium);
  }
  tbody td.premiumCol{background:var(--premium-100);font-weight:800}
  .sectionRow{background:#f8fafc;font-weight:900}
  .check{color:var(--ok);font-weight:900}
  .cross{color:#9ca3af;font-weight:900}
  .impactLabel{display:block;font-size:12px;color:var(--muted);margin-top:6px;font-weight:800;}

  .foot{
    max-width:980px;
    margin:14px auto 26px;
    color:var(--muted);
    font-size:13px;
    line-height:1.35;
    text-align:center;
  }

  @media (min-width: 980px){
    .plans{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr))}
    .tableWrap{display:none}
  }

  .link{color: var(--muted); font-weight: 600; text-decoration: none; font-size: 13px;}
  .link:hover{color: var(--plus);}

  .modalBackdrop{
    position: fixed;
    inset: 0;
    background: rgba(17,24,39,.55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 9999;
  }
  .modalBackdrop.open{display:flex;}
  .modal{
    width: min(560px, 100%);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: calc(var(--r) + 4px);
    box-shadow: var(--shadow);
    padding: 16px 16px 14px;
    text-align: left;
  }
  .modalHeader{
    display:flex;
    align-items:flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
  }
  .modalTitle{
    margin:0;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -.2px;
  }
  .modalClose{
    border: 1px solid rgba(17,24,39,.14);
    background: #fff;
    border-radius: 999px;
    width: 34px;
    height: 34px;
    display:grid;
    place-items:center;
    font-weight: 900;
    cursor: pointer;
    line-height: 1;
  }
  .modalBody{
    color:#374151;
    font-size:14px;
    line-height:1.4;
  }
  .modalBody ul{
    margin:10px 0 10px 18px;
    padding:0;
  }
  .modalBody li{margin:6px 0;}
  .modalFoot{
    margin-top: 10px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
  }

  /* Shared header + mobile menu (LocalTop) */
  .container{max-width:1120px;margin:0 auto;padding:0 16px}
  
  
  .brand{display:inline-flex;align-items:center;text-decoration:none}
  .brandLogo{height:46px;width:auto;display:block}

  .menuBtn{
    border:1px solid rgba(17,24,39,.14);
    background:#fff;
    border-radius:999px;
    width:44px;
    height:44px;
    display:inline-grid;
    place-items:center;
    cursor:pointer;
  }
  .menuBtn:hover{background: var(--plus-100); border-color: rgba(15,118,110,.28)}
  .menuBars{
    width:18px;height:2px;border-radius:2px;background:#111827;position:relative;display:block;
    box-shadow: 0 -5px 0 #111827, 0 5px 0 #111827;
  }
  .navDesktop{display:none;}
  .mobileMenu{
    margin:10px 0 0;
    border:1px solid var(--line);
    border-radius: var(--r);
    background:#fff;
    padding:12px;
    box-shadow: 0 1px 0 rgba(17,24,39,.03);
    max-width:1120px;
  }
  .navMobile{
    display:flex;
    flex-direction:column;
    gap:6px;
    align-items:stretch;
  }
  .navMobile a{
    display:block;
    padding:10px 12px;
    border-radius: 12px;
    font-weight:900;
    color:#374151;
    text-decoration:none;
  }
  .navMobile a:hover{background: var(--plus-100); color: var(--plus);}
  .mobileCta{width:100%; margin-top:10px;}

  .nav.navDesktop a{ text-decoration:none; }
  .nav.navDesktop .cta{ background: var(--plus); color:#fff; border:1px solid var(--plus); }
  .nav.navDesktop .cta:hover{ background:#0b5f58; }
  .nav.navDesktop a{
    color: var(--muted);
    font-weight: 800;
    font-size: 14px;
    padding: 8px 10px;
    border-radius: 999px;
  }
  .nav.navDesktop a:hover{color: var(--plus); background: var(--plus-100);}

  @media(min-width:980px){
    .menuBtn{display:none;}
    .navDesktop{display:flex;}
    .mobileMenu{display:none;}
  }

  /* Footer */
  footer{border-top:1px solid var(--line);padding:26px 0;color:var(--muted);font-size:13px}
  .footRow{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;max-width:1120px;margin:0 auto;padding:0 16px}
  .footLinks{display:flex;gap:12px;flex-wrap:wrap}
  .footRow a{text-decoration:none;color:var(--muted);font-weight:600}
  .footRow a:hover{color:var(--plus);}

  section{scroll-margin-top:90px}

/* === MOBILE ONLY: prezzo normale, mese grigio e senza spazio === */
@media (max-width:979px){
  .plans .price{
    font-weight:500;
  }
  .plans .price .per{
    color:var(--muted);
    font-weight:400;
  }
}


/* === MOBILE ONLY: riduci spazi box attivazione === */
@media (max-width:979px){
  .activationNote{
    padding:10px 12px;
    gap:6px;
  }
  .activationNote strong{
    line-height:1.2;
  }
  .activationNote .link{
    margin-top:0;
    line-height:1.2;
  }
}


/* === MOBILE ONLY: 'IN BREVE' -> 'INCLUDE' === */
@media (max-width:979px){
  .plans .includesLabel{
    font-size:0;
  }
  .plans .includesLabel::before{
    content:"INCLUDE";
    font-size:12px;
    color:var(--muted);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
  }
}


/* === BASE BUTTON: grigio chiaro come titolo BASE (desktop + mobile) === */
.btn.base{
  color: var(--muted);
  border-color: var(--line);
  background: #fff;
}
.btn.base:hover{
  background:#f9fafb;
}


  /* Mini link (Cosa comprende) */
  .miniInfoLink{
    color: var(--muted);
    font-weight: 600;
    text-decoration: none;
    font-size: 12px;
    margin-left: 6px;
    white-space: nowrap;
  }
  .miniInfoLink:hover{color: var(--plus); text-decoration: underline;}


    /* Inline toggle panels (tendina senza box) */
  .togglePanel{
    display:none;
    margin-top:6px;
    padding:0;
    border:0;
    background:transparent;
    font-size:14px;
    line-height:1.35;
  }
  .togglePanel.open{display:block;}
  .toggleList{margin:6px 0 0 0; padding-left:18px;}
  .toggleList li{margin:4px 0;}
  .toggleIntro{display:none;}
  .toggleFoot{margin-top:6px; color:var(--muted); font-size:13px; font-weight:600;}



/* Toggle link behavior */
.toggleLink{
  display:inline-block;
}
.activationNote .toggleLink{
  display:block;
  margin-top:4px;
}


/* Force activation tendina sotto (anche desktop) */
.activationNote .togglePanel{
  flex-basis:100%;
  width:100%;
}


.bullets li .togglePanel{
    margin-top:6px;
  }



/* DESKTOP: activation toggle sempre sotto */
.activationNote{
  flex-wrap:wrap;
}
.activationNote .togglePanel{
  width:100%;
}


/* titolo voce */
  .bullets li > span + span,
  .bullets li > span + div,
  .bullets li > span + a{
    display:block;
    margin-left:28px; /* allinea al testo dopo il check */
  }

  /* link Chiudi / Cosa comprende */
  .bullets li .miniInfoLink{
    display:block;
    margin:4px 0 0 28px;
  }

  /* contenuto tendina */
  .bullets li .togglePanel{
    margin-left:28px;
  }

  .toggleLine{
    margin:3px 0;
    font-size:14px;
  }



.bullets li .liContent{
    flex:1;
    min-width:0;
  }
  .bullets li .liText{
    display:block;
  }
  .bullets li .miniInfoLink{
    display:block;
    margin:4px 0 0 0;
  }
  .bullets li .togglePanel{
    margin-top:6px;
  }



.bullets li .liContent{
    margin-left:0;
  }
  .bullets li .liText{
    margin-left:0;
  }
  .bullets li .miniInfoLink{
    margin-left:0;
  }
  .bullets li .togglePanel{
    margin-left:0;
  }



/* Toggle content slightly smaller */
.togglePanel .toggleLine{
  font-size:13px;
  line-height:1.3;
}


/* MOBILE: '(cosa comprende)' inline dopo il testo */
@media (max-width:979px){
  .plans .bullets li .liText{display:inline;}
  .plans .bullets li .miniInfoLink{
    display:inline;
    margin:0 0 0 6px;
    white-space:nowrap;
  }
  .plans .bullets li .togglePanel{
    margin-top:6px;
  }
}


/* MOBILE: allineamento voci (dot + testo) */
@media (max-width:979px){
  .plans .bullets li{
    display:grid;
    grid-template-columns:18px 1fr;
    column-gap:10px;
    align-items:start;
  }
  .plans .bullets li > .dot{grid-column:1;}
  .plans .bullets li > .liContent{grid-column:2;}
}


/* MOBILE: elimina micro-spazio residuo tra spunta e testo */
@media (max-width:979px){
  .plans .bullets li .liContent{
    padding-left:0;
    margin-left:0;
  }
  .plans .bullets li .liText{
    padding-left:0;
    margin-left:0;
  }
}


/* SITE toggle: elenco puntato (solo menu sito) */
.siteToggle .toggleLine{
  position:relative;
  padding-left:14px;
}
.siteToggle .toggleLine::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color:var(--muted);
}


/* Hero title teal */
.hero h1{
  color: var(--plus);
}





.tableWrap thead th:nth-child(2) br{display:block;}
  .tableWrap thead th:nth-child(2){
    color: var(--muted);
    font-weight:800;
    letter-spacing:-.2px;
  }
  .tableWrap thead th:nth-child(2) .price{
    color: var(--text);
    font-weight:900;
  }
  .tableWrap thead th:nth-child(2) .impactLabel{
    color: var(--muted);
    font-weight:700;
  }

  /* PLUS */
  .tableWrap thead th:nth-child(3){
    background:#f8fafc;
    color:#374151;
    font-weight:900;
    letter-spacing:-.2px;
  }
  .tableWrap thead th:nth-child(3) .price{
    color: var(--text);
    font-weight:900;
  }
  .tableWrap thead th:nth-child(3) .impactLabel{
    color:#6b7280;
    font-weight:700;
  }

  /* PREMIUM */
  .tableWrap thead th.premiumCol{
    background: var(--premium-200);
    color: var(--premium);
    font-weight:900;
    letter-spacing:-.2px;
  }
  .tableWrap thead th.premiumCol .price{
    color: var(--text); /* prezzo come gli altri */
    font-weight:900;
  }
  .tableWrap thead th.premiumCol .impactLabel{
    color: var(--premium);
    font-weight:800;
  }



/* === DESKTOP: gerarchia colori + prezzi come richiesto === */
@media (min-width:980px){
  /* Prezzi: non bold, /mese più piccolo e leggero */
  .tableWrap thead .price{
    color: var(--text);
    font-weight:500;
    font-size:18px;
    letter-spacing:-.2px;
  }
  .tableWrap thead .price .per{
    font-size:12px;
    font-weight:400;
    color: var(--muted);
    margin-left:2px;
  }

  /* BASE + Essenziale grigio chiaro */
  .tableWrap thead th:nth-child(2){
    color: var(--muted);
  }
  .tableWrap thead th:nth-child(2) .impactLabel{
    color: var(--muted);
    font-weight:700;
  }

  /* PLUS + Personalizzato grigio più scuro (ma non troppo) */
  .tableWrap thead th:nth-child(3){
    color:#374151;
  }
  .tableWrap thead th:nth-child(3) .impactLabel{
    color:#374151;
    font-weight:800;
  }

  /* PREMIUM + sottotitolo teal scuro */
  .tableWrap thead th.premiumCol{
    color: var(--premium);
  }
  .tableWrap thead th.premiumCol .impactLabel{
    color: var(--premium);
    font-weight:800;
  }
}


/* DESKTOP: prezzi semplici, non bold, /mese attaccato */
@media (min-width:980px){
  .tableWrap thead .price{
    font-weight:400;
  }
  .tableWrap thead .price .per{
    margin-left:0; /* nessuno spazio tra prezzo e /mese */
  }
}


/* DESKTOP: 'Personalizzato' stesso colore del PLUS */
@media (min-width:980px){
  .tableWrap thead th:nth-child(3) .impactLabel{
    color:#374151;
    font-weight:700;
  }
}


/* DESKTOP: colonna PREMIUM coerente su tutta l'altezza */
@media (min-width:980px){
  /* background uniforme */
  .tableWrap td.premiumCol,
  .tableWrap th.premiumCol{
    background: var(--premium-200);
  }

  /* bordo sinistro continuo */
  .tableWrap td.premiumCol,
  .tableWrap th.premiumCol{
    border-left:2px solid var(--premium);
  }

  /* rimuove eventuali override alternati */
  .tableWrap tbody tr:nth-child(even) td.premiumCol,
  .tableWrap tbody tr:nth-child(odd) td.premiumCol{
    background: var(--premium-200);
  }
}


/* DESKTOP: aggiunge riga destra continua alla colonna PREMIUM */
@media (min-width:980px){
  .tableWrap th.premiumCol,
  .tableWrap td.premiumCol{
    border-right:2px solid var(--premium);
  }
}


/* DESKTOP: rimuove grassetto da 'fino a 5' */
@media (min-width:980px){
  .tableWrap tbody td strong{
    font-weight:400;
  }
}


/* DESKTOP: fix pesi testo PREMIUM */
@media (min-width:980px){
  /* 'Personalizzate' in grassetto solo nella colonna PREMIUM */
  .tableWrap td.premiumCol strong{
    font-weight:700;
  }

  /* '5 / mese*' normale */
  .tableWrap td.premiumCol{
    font-weight:400;
  }
}


/* === DESKTOP REFINEMENT TABELLA PIANI === */
@media (min-width:980px){

  /* PREMIUM: uniforma fondo (niente stacchi scuri alternati) */
  .tableWrap th.premiumCol{
    background: var(--premium-100);
    border-left: 1px solid rgba(11,95,88,.22);
    border-right: 1px solid rgba(11,95,88,.22);
    box-shadow: inset 0 3px 0 var(--premium);
  }
  .tableWrap td.premiumCol{
    background: var(--premium-100);
    border-left: 1px solid rgba(11,95,88,.22);
    border-right: 1px solid rgba(11,95,88,.22);
  }

  /* Sezioni (righe titolo): evita contrasto eccessivo sul Premium */
  .tableWrap tr.section td{
    background: #f9fafb;
  }
  .tableWrap tr.section td.premiumCol{
    background: var(--premium-100);
    font-weight: 600;
  }

  /* Checkmark: uniforma percezione visiva */
  .tableWrap td.check{
    font-size:16px;
    font-weight:700;
  }
  .tableWrap td.check.premiumCol{
    color: var(--ok);
  }

  /* Colonne BASE / PLUS: leggermente più contrasto per stacco */
  .tableWrap td.baseCol,
  .tableWrap td.plusCol{
    background:#ffffff;
  }

  /* CTA: allineamento visivo */
  .tableWrap .ctaWrap{
    padding-top:18px;
  }
}


/* Uniforma tutto il background della colonna PREMIUM */
  .tableWrap th.premiumCol,
  .tableWrap td.premiumCol{
    background: var(--premium-100);
  }

  /* Se ci sono righe di sezione / footer che sovrascrivono */
  .tableWrap tr.sectionRow td.premiumCol,
  .tableWrap tr.section td.premiumCol,
  .tableWrap tfoot td.premiumCol{
    background: var(--premium-100);
  }

  /* Neutralizza qualsiasi alternanza righe */
  .tableWrap tbody tr:nth-child(even) td.premiumCol,
  .tableWrap tbody tr:nth-child(odd) td.premiumCol{
    background: var(--premium-100);
  }

  /* Bordo: più soft (meno "aggressivo") */
  .tableWrap td.premiumCol,
  .tableWrap th.premiumCol{
    border-left: 1px solid rgba(11,95,88,.22);
    border-right: 1px solid rgba(11,95,88,.22);
  }

  /* Badge: più discreto */
  .tableWrap thead th.premiumCol .badge{
    font-size:12px;
    padding:6px 10px;
    opacity:.9;

}

/* === CONSOLIDAMENTO (aggiunto) === */

/* Intro sopra i piani (titolo + come funziona) */
.note.centered.howItWorksWrap{display:flex;flex-direction:column;align-items:center;gap:8px}
.note.centered.howItWorksWrap .introHeadline{
  font-weight:700;
  color:var(--plus); /* teal */
  font-size:24px;    /* mobile */
  line-height:1.25;
  text-align:center;
}
@media (min-width:980px){
  .note.centered.howItWorksWrap .introHeadline{font-size:36px;}
}
.note.centered.howItWorksWrap .howItWorksLink{font-size:13px}

/* Toggle "Come funziona" – leggibile ma discreto */
.note.centered.howItWorksWrap .togglePanel,
.note.centered.howItWorksWrap .togglePanel .toggleLine{
  font-size:10px;   /* mobile */
  line-height:1.35;
}
@media (max-width:979px){
  .note.centered.howItWorksWrap .togglePanel,
  .note.centered.howItWorksWrap .togglePanel .toggleLine{
    font-size:12px;
  }
}

/* Spazio tra Chiudi e testo (toggle) */
.note.centered.howItWorksWrap .toggleLink{
  display:block;
  margin:0 0 2px 0;
  padding:0;
}
.note.centered.howItWorksWrap .togglePanel{margin:0;padding:0}
.note.centered.howItWorksWrap .togglePanel .toggleLine{margin:0;padding:0}

/* Desktop: Premium uniforme e meno "patchwork" */
@media (min-width:980px){
  .tableWrap th.premiumCol,
  .tableWrap td.premiumCol{
    background:var(--premium-100);
    border-left:1px solid rgba(11,95,88,.22);
    border-right:1px solid rgba(11,95,88,.22);
  }
  .tableWrap tbody tr:nth-child(even) td.premiumCol,
  .tableWrap tbody tr:nth-child(odd) td.premiumCol{
    background:var(--premium-100);
  }
  .tableWrap td.check{font-size:16px;font-weight:700}
  .tableWrap td.check.premiumCol{color:var(--ok)}
}

/* Titolo PREMIUM: leggero letter-spacing (desktop + mobile) */
.premiumCol .title,
.premiumCol h3,
.premiumCol h2,
.premiumCol h1{
  letter-spacing:.6px;
}


@media (min-width:980px){
  .note.centered.howItWorksWrap .togglePanel,
  .note.centered.howItWorksWrap .togglePanel .toggleLine{
    font-size:12px;
  }
}
/* === FORCE FINALE: Intro (come deciso) === */
.note.centered.howItWorksWrap .introHeadline{
  color: var(--plus);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}
@media (min-width:980px){
  .note.centered.howItWorksWrap .introHeadline{
    font-size: 36px;
  }
}

/* Home-only (hp-) adjustments */
.hp-payoff{
  margin:10px 0 0;
  color: var(--muted);
  font-weight: 850;
  font-size: 13px;
}
.hp-premiumBtn{
  background: var(--premium);
  border-color: var(--premium);
}
.hp-badgeRow{display:flex;justify-content:flex-end;margin-bottom:6px}
.hp-note{
  margin:14px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}




/* --- Onboarding & Legal utility --- */
.miniList{margin:0;padding-left:18px}
.miniList li{margin:6px 0}

.noteBox{
  border:1px solid rgba(15,118,110,.25);
  background:rgba(15,118,110,.06);
  border-radius:16px;
  padding:12px 14px;
}

.noteTitle{
  margin:0 0 6px 0;
  font-size:16px;
  font-weight:800;
  color:var(--lt-accent,#0F766E);
}

.noteBox p{margin:0;}


.formStack{display:block}
.formRow{margin:12px 0}
.formRow label{display:block;margin:0 0 6px}
.formRow input:not([type="checkbox"]):not([type="radio"]),
.formRow textarea,
.formRow select{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(31,41,55,.18);
  background:#fff;
  color:var(--ink);
}
.formRow input:not([type="checkbox"]):not([type="radio"]):focus,
.formRow textarea:focus,
.formRow select:focus{
  outline:2px solid rgba(15,118,110,.25);
  border-color:rgba(15,118,110,.45);
}

.sep{border:0;border-top:1px solid rgba(31,41,55,.12);margin:16px 0}



.onbCounter{
  display:block;
  margin-top:6px;
  font-size:12px;
  opacity:.85;
}

/* =========================
   Onboarding (LocalTop)
   ========================= */

.onbGroupTitle{
  margin: 14px 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: rgba(31,41,55,.85);
}

.onbSectionTitle{
  margin: 6px 0 6px;
  font-size: 18px;
  letter-spacing: .2px;
}
.req{color: var(--teal); font-weight: 700;}
.radioGroup{
  display: grid;
  gap: 10px;
}
.radioOpt{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 12px;
  border:1px solid rgba(31,41,55,.14);
  border-radius:14px;
  background:#fff;
  cursor:pointer;
}
.radioOpt input{
  margin-top: 2px;
}
.radioOpt:hover{
  border-color: rgba(15,118,110,.35);
}
.onbInfoBox{
  margin-top: 10px;
}
.onbConditional{
  margin-top: 8px;
  padding-top: 2px;
}
.onbAlert{
  border-radius: 16px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border:1px solid rgba(31,41,55,.12);
  background: rgba(31,41,55,.04);
  color: var(--ink);
}
.onbAlert.isOk{
  border-color: rgba(15,118,110,.30);
  background: rgba(15,118,110,.08);
}
.onbAlert.isErr{
  border-color: rgba(220,38,38,.25);
  background: rgba(220,38,38,.06);
}



/* --- LocalTop Onboarding (mobile-first) --- */
.page.container{padding:18px 16px}
.contact-hero{padding:18px 0}
.contact-hero .lead{max-width: 62ch}

.contactGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.contactCard{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 16px;
}

.onbGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.formRow.full{grid-column:1 / -1}

.formRow input:not([type="checkbox"]):not([type="radio"]),
.formRow textarea,
.formRow select{
  width:100%;
  min-height: 44px;
  font-size:16px;
}

.formRow textarea{min-height: 110px; resize: vertical}

.radioGroup{display:grid;gap:10px}
.radioOpt{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 12px;
  border:1px solid var(--line);
  border-radius: 14px;
  background: rgba(31,41,55,.02);
}
.radioOpt input{margin-top:3px;min-width:18px;min-height:18px}

.onbPlanBox{margin: 10px 0 0}
.onbPlanBoxPremium{
  border-color: rgba(15,118,110,.38);
  background: rgba(15,118,110,.08);
}

.formRow button#submitBtn{
  width:100%;
  min-height:48px;
  font-size:16px;
}

/* Desktop: due colonne */
@media (min-width: 900px){
  .page.container{padding:26px 20px}
  .contactCard{padding: 22px}
  .onbGrid{grid-template-columns: 1fr 1fr; gap: 14px 16px}
  .formRow button#submitBtn{width:auto; min-width: 220px}
}


/* =========================
   Onboarding - Mobile-first polish
   ========================= */
/* === ONBOARDING (scoped) – mobile-first === */
.onboardingPage{
  background: #F9FAFB;
  color: #1F2937;
}
.onboardingPage .page{
  max-width:1120px;
  margin: 0 auto;
  padding: 16px 14px 28px;
}

/* fatturazione: evita doppio padding (page + container) che sposta il contenuto a destra */
.onboardingPage.billingPage .page{
  max-width: none;
  margin: 0;
  /* mantieni respiro verticale come onboarding, senza aggiungere padding orizzontale */
  padding: 16px 0 28px;
}

/* hero */
.onboardingPage .contact-hero{
  padding: 10px 0 16px;
}
.onboardingPage .contact-hero h1{
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.onboardingPage .contact-hero .lead{
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 10px;
  opacity: .92;
}
.onboardingPage .contact-hero .tip{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
.onboardingPage .contact-hero .tip strong{ color: #0F766E; }

/* layout */
.onboardingPage .contactGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.onboardingPage .contactCard{
  background: #fff;
  border: 1px solid rgba(31,41,55,.10);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 6px 18px rgba(31,41,55,.06);
}

/* section titles */
.onboardingPage .onbSectionTitle{
  font-size: 20px;
  line-height: 1.2;
  margin: 6px 0 12px;
  letter-spacing: -0.02em;
}
.onboardingPage .sep{
  border: 0;
  height: 1px;
  background: rgba(31,41,55,.10);
  margin: 16px 0;
}

/* grid fields */
.onboardingPage .onbGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.onboardingPage .onbGrid > .onbSectionTitle,
.onboardingPage .onbGrid > .sep{
  grid-column: 1 / -1;
}
/* blocks inside the grid must span full width on desktop too */
.onboardingPage .onbGrid > .onbConditional{
  grid-column: 1 / -1;
}
.onboardingPage .formRow{ margin: 0; }
.onboardingPage .formRow.full{ grid-column: 1 / -1; }

.onboardingPage .formRow label{
  display: block;
  font-size: 14px;
  line-height: 1.35;
  margin: 0 0 8px;
}
.onboardingPage .req{
  color: #0F766E;
  font-weight: 700;
}

/* controls */
.onboardingPage .formRow input:not([type="checkbox"]):not([type="radio"]),
.onboardingPage .formRow select,
.onboardingPage .formRow textarea{
  width: 100%;
  box-sizing: border-box;
  padding: 14px 12px;
  font-size: 16px;
  line-height: 1.25;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(31,41,55,.18);
  background: #fff;
  color: #1F2937;
}
.onboardingPage .formRow textarea{
  min-height: 132px;
  resize: vertical;
}
.onboardingPage .formRow input::placeholder,
.onboardingPage .formRow textarea::placeholder{
  color: rgba(31,41,55,.55);
}
.onboardingPage .formRow input:not([type="checkbox"]):not([type="radio"]):focus,
.onboardingPage .formRow select:focus,
.onboardingPage .formRow textarea:focus{
  outline: 2px solid rgba(15,118,110,.25);
  border-color: rgba(15,118,110,.55);
}

/* helper text */
.onboardingPage .formHelp{
  margin-top: 6px;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(31,41,55,.80);
  display: block;
}

.onboardingPage .formHelpAfterGroup{
  margin-bottom: 12px;
}

.onboardingPage .onbAfterServicesNote{
  display: block;
  margin-top: 6px;
  margin-bottom: 12px;
}

/* fatturazione: spaziatura più leggibile senza impattare l'onboarding */
.billingPage .legalWrap{
  margin: 0;
}

.billingPage .grid2,
.billingPage .grid3{
  margin-top: 0;
  margin-bottom: 16px;
}
.billingPage .full.formRow{
  margin-bottom: 16px;
}
.billingPage .checkboxRow{
  margin-top: 4px;
  margin-bottom: 16px;
}
.billingPage .formActions{
  margin-top: 8px;
}

/* radio as cards */
.onboardingPage .radioGroup{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
body.onboardingPage .radioGroup > label.radioOpt{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(31,41,55,.14);
  background: #fff;
  cursor: pointer;
}

body.onboardingPage .radioGroup > label.radioOpt input{
  margin-top: 0;
  padding: 0;
  width: auto;
  height: auto;
  min-width: 18px;
  min-height: 18px;
  accent-color: var(--teal);
}

body.onboardingPage .radioGroup > label.radioOpt span{
  display: block;
  flex: 1 1 auto;
  line-height: 1.25;
}

.onboardingPage .radioOpt strong{
  display: block;
  margin-bottom: 2px;
}
.onboardingPage .radioOpt .sub{
  font-size: 13px;
  line-height: 1.4;
  color: rgba(31,41,55,.78);
}

/* privacy consent */
.onboardingPage .privacy-consent{
  margin: 18px 0 26px;
}
.onboardingPage .privacy-label{
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.4;
}
.onboardingPage .privacy-label input[type="checkbox"]{
  margin-top: 0;
  padding: 0;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  accent-color: var(--teal);
}
.onboardingPage .privacy-label a{
  color: inherit;
  text-decoration: underline;
}

/* plan boxes */
.onboardingPage .onbPlanBox,
.onboardingPage .onbPlanBoxPremium{
  border-radius: 16px;
  padding: 14px;
  margin: 10px 0 14px;
  border: 1px solid rgba(31,41,55,.12);
  background: rgba(15,118,110,.06);
}
.onboardingPage .onbPlanBoxPremium{
  background: rgba(15,118,110,.08);
  border-color: rgba(15,118,110,.22);
}
.onboardingPage .noteTitle{
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.onboardingPage .onbPlanBox p,
.onboardingPage .onbPlanBoxPremium p{
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

/* alert / success */
.onboardingPage .onbAlert{
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid rgba(31,41,55,.12);
  background: #fff;
}

/* submit */
.onboardingPage #submitBtn{
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  font-size: 16px;
}

/* desktop */
@media (min-width: 900px){
  .onboardingPage .page.container{ padding: 22px 18px 34px; }
  .onboardingPage .contactGrid{ grid-template-columns: 1fr; gap: 18px;}
  .onboardingPage .contactCard{ padding: 22px; }
  .onboardingPage .contact-hero h1{ font-size: 34px; }
  .onboardingPage .onbGrid{ grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .onboardingPage .radioGroup{ grid-template-columns: 1fr 1fr; }
  .onboardingPage #submitBtn{ width: auto; min-width: 260px; padding-left: 18px; padding-right: 18px; }
}


/* ===== Demo & Prezzi (intro block sopra ai piani) ===== */
.demoPricesIntro{ margin-top: 22px; }
.demoIntroNote{
  margin-bottom: 18px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:18px 18px;
}
.demoIntroNote .introHeadline{
  font-weight:900;
  color:var(--plus);
  font-size:26px;
  line-height:1.15;
  letter-spacing:-.4px;
  text-align:center;
}
@media (min-width:760px){
  .demoIntroNote .introHeadline{ font-size:44px; }
}
.demoIntroSub{
  margin-top: 6px;
  color: var(--muted);
  font-size:15px;
  text-align:center;
}
@media (min-width:760px){
  .demoIntroSub{ font-size:17px; }
}

.demoCompare{ margin-top: 14px; }
.demoCompareGrid{
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 14px;
}
/* Tablet: 2 colonne (evita 3 colonne troppo strette in portrait) */
@media (min-width: 760px){
  .demoCompareGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
}
/* Desktop: 3 colonne */
@media (min-width: 980px){
  .demoCompareGrid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
}

.demoCompareCard{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  background: #fff;
  padding: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,.05);
}
.demoCompareCardPremium{
  /* Premium: evidenza senza alterare gli spazi della griglia (niente border più spesso) */
  border: 1px solid rgba(15,118,110,.22);
  box-shadow: 0 0 0 1px rgba(15,118,110,.30), 0 14px 40px rgba(0,0,0,.05);
  background: rgba(15,118,110,.05);
}

.demoCompareTop{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.demoCompareTitle{
  margin: 0;
  letter-spacing: .05em;
  font-size: 14px;
}
.demoCompareBase{ color:#9aa0a6; }
.demoComparePlus{ color:#444; }
.demoComparePremium{ color: var(--premium); }
/* Title hierarchy in demo/pricing cards */
.demoCompareTitle.demoComparePlus{ font-size: 16px; }
.demoCompareTitle.demoComparePremium{ font-size: 17px; }

/* PLUS button text matches PLUS title color */
.demoCompareCtas .btn.plus{ color:#444; }

/* BASE: bordo chiaro come il PLUS (default) */
.demoCompare .btn.base{
  /* Testo BASE più chiaro, vicino al titolo BASE */
  color: #9aa0a6;
  border-color: rgba(17,24,39,.14);
  background: #fff;
}


.demoComparePrice{
  font-weight: 800;
  font-size: 22px;
}
.demoComparePrice .per{
  font-weight: 600;
  font-size: 14px;
  color: var(--muted);
  margin-left: 4px;
}

.demoCompareBullets{
  margin: 12px 0 0 0;
  padding-left: 18px;
  color: var(--text);
}
.demoCompareBullets li{ margin: 8px 0; }

.demoCompareCtas{ margin-top: 14px; flex-wrap: wrap; }
.demoCompareCtas .btn{ flex: 1 1 180px; justify-content:center; }

.demoCompareFoot{
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* --- Demo e Prezzi: CTA attivazione (sobria) --- */
.checkoutCta{
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  background: #fff;
  text-align: center;
}
.checkoutCtaTitle{
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
}
.checkoutCtaBtns{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.checkoutCtaBtns .btn{ flex: 0 1 200px; justify-content: center; }
.btn.checkout{
  background: #fff;
  border-color: rgba(17,24,39,.20);
  color: var(--text);
}
/* Checkout CTA buttons: same hierarchy as plan demo buttons */
.btn.checkout.base{
  color: var(--muted);
  border-color: rgba(17,24,39,.20);
  background: #fff;
}
.btn.checkout.plus{
  color: #444;
  border-color: rgba(17,24,39,.30);
  background: #fff;
}
.btn.checkout.premium{
  background: rgba(11,95,88,.06);
  border-color: var(--premium);
  color: var(--premium);
}
.btn.checkout.premium:hover{
  background: rgba(11,95,88,.10);
}

.btn.checkout:not(.premium):hover{ background: #f9fafb; }
.checkoutCtaNote{
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
}


/* --- Demo e Prezzi: spacing refinements --- */
.demoPricesIntro { margin-bottom: 18px; }
.demoCompare { margin-top: 14px; }
.demoCompareFoot { margin-top: 10px; margin-bottom: 6px; }
.demoCompareFoot + .plans { margin-top: 14px; }
.plans { margin-top: 14px; }
@media (min-width: 980px){
  .demoPricesIntro { margin-bottom: 22px; }
  .demoCompareFoot { margin-bottom: 8px; }
  .plans { margin-top: 18px; }
}





/* --- Card details (accordion) --- */
.cardDetails{
  margin-top: 10px;
  border-top: 1px solid rgba(20, 30, 45, 0.08);
  padding-top: 10px;
}
.cardDetailsSummary{
  list-style: none;
  cursor: pointer;
  user-select: none;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cardDetailsSummary::-webkit-details-marker{ display:none; }
.cardDetailsBadge{
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(11, 98, 84, 0.10);
  border: 1px solid rgba(11, 98, 84, 0.25);
}
.cardDetailsBody{
  margin-top: 10px;
}
.cardDetailsBody .bullets{
  margin: 0;
}
.title-mobile{display:none}
@media(max-width:768px){.title-desktop{display:none}.title-mobile{display:block}}


/* --- Demo e Prezzi: gerarchia piani --- */
.demoCompareCardPlus{
  position: relative;
  z-index: 1;
}
.demoCompareCardPremium{
  position: relative;
  z-index: 2;
}
/* Micro-enfasi solo con dispositivi che supportano hover (evita "hover appiccicato" su touch) */
@media (hover:hover) and (pointer:fine) and (min-width: 760px){
  .demoCompareCardPlus:hover,
  .demoCompareCardPremium:hover{ transform: translateY(-2px); }
}

/* PLUS: bottone in grigio scuro come il titolo */
.demoCompareCardPlus .demoCompareCtas .btn{
  color: var(--text);
  border-color: rgba(17,24,39,.35);
  background: #fff;
}

/* PREMIUM: bottone outline teal (non pieno) */
.demoCompare .demoCompareCtas .btn.premium{
  background: transparent;
  border: 2px solid var(--premium);
  color: var(--premium);
}
.demoCompare .demoCompareCtas .btn.premium:hover{ filter: brightness(.96); }

/* Evita overflow su mobile */
@media (max-width: 900px){
  .demoCompareCardPlus,
  .demoCompareCardPremium{ transform: none; }
}



/* Nav: slightly darker default color only for “Demo e Prezzi” (keeps hover/active global behavior) */
.navDesktop a.nav-highlight:not(.active):not(:hover),
.navMobile a.nav-highlight:not(.active):not(:hover){
  color: var(--text);
}


@media (min-width: 980px) {
  .heroTitle {
    margin-bottom: 3rem;
  }
}


/* HERO – desktop fine-tuning */
@media (min-width: 980px) {
  /* più spazio tra testi e CTA */
  .heroCtas { margin-top: 2rem; }
  /* Home hero: aumenta ulteriormente lo stacco tra descrizione e CTA */
  /* Spazio extra solo per CTA dell'hero (desktop) */
  .home .heroSplit .heroCtas { margin-top: 4rem; }

  /* CTA più elegante (Home desktop) */
  .home .heroCtas .btn { padding: 14px 18px; }

  /* CTA più grande (altre pagine) */
  .heroCtas .btn { padding: 22px 24px; }

  /* microcopy sotto CTA: più leggero e -2px */
  .heroSplit .hp-micro {
    font-size: 14px;
    font-weight: 500;
  }
}



/* Desktop hero image width reduction (-15%) */
@media (min-width: 1024px) {
  .hero .hero-image,
  .hero .hero-media {
    flex: 0 0 38.25%;
    max-width: 38.25%;
  }
}


/* Desktop hero image column reduction (-15%) */
@media(min-width:980px){
  .heroSplit .heroGrid{
    grid-template-columns: 38.25% 61.75%;
  }
}

.hp-subline{margin-top:24px;}

/* Come funziona – testi descrittivi come "Cosa facciamo per te" */
section[aria-label="Come funziona"] .card p{font-weight:400;}


/* =========================
   Utilities (no inline styles)
   ========================= */
.brandLogo--teal{color:#0F766E;}
.logo--mint{color:#14B8A6;}

.u-text-center{text-align:center;}
.u-m-0{margin:0;}

.u-mt-8{margin-top:8px;}
.u-mt-10{margin-top:10px;}
.u-mt-12{margin-top:12px;}
.u-mt-14{margin-top:14px;}
.u-mt-16{margin-top:16px;}
.u-mt-18{margin-top:18px;}
.u-mt-22{margin-top:22px;}
.u-mb-12{margin-bottom:12px;}

.u-flex-center-gap-10{display:flex;align-items:center;gap:10px;}
.u-fw-900{font-weight:900;}
.u-fw-950{font-weight:950;}

/* Demo: hero image responsive */
.demoHeroImg{width:100%;height:100%;min-height:260px;object-fit:cover;border-radius:16px;border:1px solid var(--border);}


/* Optical alignment: privacy consent text */
.onboardingPage .privacy-label > span{
  position: relative;
  top: -2px;
}


/* Cookie banner (LocalTop) */
.cookieBanner{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: none;
  background: #1F2937;
  color: #fff;
  padding: 14px 16px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.cookieBanner__inner{
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cookieBanner__text{
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #E5E7EB;
}

.cookieBanner__text a{
  color: #0F766E;
  text-decoration: underline;
}

.cookieBanner__actions{
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}

.cookieBtn{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.18);
  background: transparent;
  color: #fff;
  font: inherit;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  line-height: 1;
}

.cookieBtn--accept{
  background: #0F766E;
  border-color: #0F766E;
}

.cookieBtn--reject{
  background: transparent;
}