/* ============================================================================
 * EnterHouse — Vertical landing pages (per-XXX)
 * Stile condiviso da /per-estetiste, /per-parrucchieri, /per-spa, /per-barber,
 * /per-massaggi, /per-onicotecniche, /per-lash-brow, /per-solarium, /per-tatuatori.
 * Dipende da brand.css per design tokens (--eh-*).
 * ============================================================================ */

body { background: var(--eh-bg); display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* Topbar */
.v-topbar {
  padding: var(--eh-sp-4) var(--eh-sp-5);
  border-bottom: 1px solid var(--eh-neutro-light);
  background: white; position: sticky; top: 0; z-index: 50;
}
.v-topbar-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--eh-sp-4);
}
.v-brand {
  font-family: var(--eh-font-heading); font-weight: 700; font-size: 1.25rem;
  color: var(--eh-primario); text-decoration: none; letter-spacing: -0.02em;
}
.v-brand span { color: var(--eh-accento); }
.v-topbar-cta { display: flex; gap: var(--eh-sp-2); }
.v-topbar-cta .eh-btn { padding: 0.45rem 1rem; font-size: 0.9rem; }

/* Section base */
.v-section { padding: var(--eh-sp-8) var(--eh-sp-5); }
.v-section-bg { background: var(--eh-bg-elev); border-top: 1px solid var(--eh-neutro-light); border-bottom: 1px solid var(--eh-neutro-light); }
.v-section-inner { max-width: 1080px; margin: 0 auto; }
.v-section-narrow { max-width: 760px; }

/* Typography helpers */
.v-eyebrow {
  display: inline-block; font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--eh-accento); margin-bottom: var(--eh-sp-3);
}
.v-lead { font-size: 1.1rem; color: var(--eh-neutro); line-height: 1.6; margin: 0 auto var(--eh-sp-5); max-width: 720px; }
.v-section-lead { font-size: 1.02rem; color: var(--eh-neutro); text-align: center; max-width: 680px; margin: 0 auto var(--eh-sp-7); line-height: 1.55; }
.v-h2 { font-family: var(--eh-font-heading); font-size: clamp(1.7rem, 3.2vw, 2.2rem); letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 var(--eh-sp-4); text-align: center; }
.v-note { font-size: 0.85rem; color: var(--eh-neutro); margin: var(--eh-sp-4) 0 0; }

/* Hero */
.v-hero {
  padding: var(--eh-sp-8) var(--eh-sp-5) var(--eh-sp-7);
  text-align: center;
  background: linear-gradient(180deg, var(--eh-bg) 0%, white 100%);
}
.v-hero h1 {
  font-family: var(--eh-font-heading);
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  letter-spacing: -0.025em; line-height: 1.1;
  color: var(--eh-primario);
  margin: 0 auto var(--eh-sp-4); max-width: 780px;
}
.v-hero h1 em { color: var(--eh-accento); font-style: italic; font-weight: 700; }
.v-cta-row { display: flex; gap: var(--eh-sp-3); justify-content: center; flex-wrap: wrap; }
.v-btn-lg { padding: 0.85rem 1.6rem; font-size: 1rem; font-weight: 600; }
.v-btn-light { background: transparent; color: white; border-color: rgba(255,255,255,0.3); }
.v-btn-light:hover { background: rgba(255,255,255,0.1); border-color: white; color: white; }

/* Use cases grid */
.v-usecase-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--eh-sp-5);
}
.v-usecase {
  background: white; border: 1px solid var(--eh-neutro-light);
  border-radius: var(--eh-radius-lg); padding: var(--eh-sp-5);
  position: relative;
}
.v-usecase-num {
  font-family: var(--eh-font-heading); font-weight: 700; font-size: 0.85rem;
  color: var(--eh-accento); letter-spacing: 0.04em; margin-bottom: var(--eh-sp-3);
}
.v-usecase h3 { font-family: var(--eh-font-heading); font-size: 1.15rem; margin: 0 0 var(--eh-sp-3); color: var(--eh-primario); }
.v-usecase p { font-size: 0.95rem; line-height: 1.55; color: var(--eh-neutro); margin: 0; }
.v-usecase p strong { color: var(--eh-primario); }

/* Add-on grid */
.v-addon-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--eh-sp-3); margin-bottom: var(--eh-sp-6);
}
.v-addon {
  background: white; border: 1px solid var(--eh-neutro-light);
  border-radius: var(--eh-radius); padding: var(--eh-sp-4);
  position: relative;
}
.v-addon-essential { border: 1px solid var(--eh-accento); background: linear-gradient(180deg, #FAF0F2 0%, white 100%); }
.v-addon-tag {
  display: inline-block; font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--eh-accento-hover); background: var(--eh-accento-light);
  padding: 2px 8px; border-radius: 999px; margin-bottom: var(--eh-sp-2);
}
.v-addon h3 { font-family: var(--eh-font-heading); font-size: 1rem; margin: 0 0 var(--eh-sp-2); color: var(--eh-primario); }
.v-addon p { font-size: 0.88rem; line-height: 1.45; color: var(--eh-neutro); margin: 0; }

.v-pricing-hint {
  background: var(--eh-primario); color: white;
  border-radius: var(--eh-radius-lg); padding: var(--eh-sp-5);
  text-align: center; margin-top: var(--eh-sp-6);
}
.v-pricing-hint p { color: rgba(255,255,255,0.85); font-size: 1rem; margin: 0 0 var(--eh-sp-4); line-height: 1.55; }
.v-pricing-hint p strong { color: white; }
.v-pricing-hint .eh-btn-primary { padding: var(--eh-sp-3) var(--eh-sp-5); }

/* Trust section */
.v-section-trust { background: white; }
.v-trust-list { list-style: none; padding: 0; margin: var(--eh-sp-6) 0 0; }
.v-trust-list li {
  padding: var(--eh-sp-4) 0;
  border-bottom: 1px solid var(--eh-neutro-light);
  display: flex; gap: var(--eh-sp-4); align-items: start;
  font-size: 1rem; color: var(--eh-primario); line-height: 1.55;
}
.v-trust-list li:last-child { border-bottom: none; }
.v-trust-list li strong { color: var(--eh-primario); }
.v-trust-list li a { color: var(--eh-accento); }
.v-check {
  color: var(--eh-successo); font-weight: 700; font-size: 1.2rem; flex-shrink: 0;
  width: 24px; text-align: center;
}

/* CTA finale */
.v-cta-final {
  background: var(--eh-primario); color: white; padding: var(--eh-sp-8) var(--eh-sp-5);
  text-align: center;
}
.v-cta-final h2 { color: white; font-family: var(--eh-font-heading); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 var(--eh-sp-4); }
.v-cta-final .v-lead { color: rgba(255,255,255,0.8); margin-bottom: var(--eh-sp-6); }
.v-cta-final-buttons { justify-content: center; }

/* Footer */
.v-footer {
  padding: var(--eh-sp-5);
  text-align: center;
  color: var(--eh-neutro);
  font-size: 0.85rem;
  background: white;
  border-top: 1px solid var(--eh-neutro-light);
}
.v-footer a { color: var(--eh-neutro); }
.v-footer a:hover { color: var(--eh-accento); }

@media (max-width: 720px) {
  .v-section { padding: var(--eh-sp-7) var(--eh-sp-4); }
  .v-hero { padding: var(--eh-sp-7) var(--eh-sp-4); }
  .v-topbar-cta .eh-btn { padding: 0.4rem 0.8rem; font-size: 0.85rem; }
}