/* website/src/assets/elite.css */
/* Elite polish layer: conversion clarity + big wow modules. */

/* -----------------------------
   Accessibility + focus
------------------------------*/
:focus-visible{
  outline: 2px solid rgba(var(--ventaGold),0.90);
  outline-offset: 3px;
}

.btn:focus-visible,
.nav a:focus-visible,
.navMobile a:focus-visible,
.input:focus-visible{
  outline: 2px solid rgba(var(--ventaGold),0.92);
  outline-offset: 3px;
}

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

/* -----------------------------
   Background dampening for conversion-heavy pages
------------------------------*/
.page-pricing .bgGlow{ opacity: 0.48; }
.page-pricing .bgGrid{ opacity: 0.06; }

.page-demo .bgGlow{ opacity: 0.42; }
.page-demo .bgGrid{ opacity: 0.05; }

.page-sms .bgGlow{ opacity: 0.48; }
.page-sms .bgGrid{ opacity: 0.06; }

/* -----------------------------
   Logo strip (home proof row)
------------------------------*/
.logoStrip{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 14px;
}

.logoChip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: rgba(var(--text2),0.92);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.logoDot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgb(var(--ventaIndigo)), rgb(var(--ventaEmerald)));
  box-shadow: 0 0 18px rgba(var(--ventaIndigo),0.26);
}

/* -----------------------------
   Proof Wall
------------------------------*/
.proofWall{ padding-top: 44px; }

.proofKpiGrid{
  display:grid;
  gap: 12px;
  margin-top: 18px;
}
@media (min-width: 860px){
  .proofKpiGrid{ grid-template-columns: repeat(4, 1fr); }
}

.proofKpiTile{
  border-radius: var(--rLg);
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(260px 90px at 18% 0%, rgba(var(--ventaIndigo),0.16), transparent 62%),
    rgba(255,255,255,0.04);
  box-shadow: var(--shadow1);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  padding: 14px;
}

.proofKpiLabel{
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(var(--text2),0.92);
}
.proofKpiValue{
  margin-top: 6px;
  font-family: var(--fontDisplay);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: rgba(var(--text0),0.98);
}
.proofKpiNote{
  margin-top: 4px;
  color: rgba(var(--text1),0.92);
  font-size: 13px;
  line-height: 1.55;
}

.proofKpiTile.tone-gold .proofKpiValue{ color: rgb(var(--ventaGold)); }
.proofKpiTile.tone-indigo .proofKpiValue{ color: rgb(var(--ventaIndigo)); }
.proofKpiTile.tone-emerald .proofKpiValue{ color: rgb(var(--ventaEmerald)); }

.proofCards{
  display:grid;
  gap: 12px;
  margin-top: 14px;
}
@media (min-width: 980px){
  .proofCards{ grid-template-columns: repeat(3, 1fr); }
}

.proofCard{
  border-radius: var(--rLg);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.03);
  padding: 14px;
}
.proofCardTitle{
  font-family: var(--fontDisplay);
  font-weight: 850;
  letter-spacing: -0.01em;
}
.proofCardList{
  margin: 10px 0 0;
  padding: 0;
  display:grid;
  gap: 8px;
}
.proofCardList li{
  list-style: none;
  position: relative;
  padding-left: 16px;
  color: rgba(var(--text1),0.92);
  font-size: 13px;
  line-height: 1.55;
}
.proofCardList li::before{
  content:"";
  position:absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgb(var(--ventaIndigo)), rgb(var(--ventaEmerald)));
  box-shadow: 0 0 10px rgba(var(--ventaIndigo),0.35);
}

.proofStack{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 14px;
  align-items:center;
}
.proofStackNote{
  color: rgba(var(--text2),0.86);
  font-size: 12px;
  margin-left: 2px;
}

/* -----------------------------
   Leakage Calculator + Presets
------------------------------*/
.calcGrid{
  display:grid;
  gap: 12px;
  margin-top: 18px;
}
@media (min-width: 980px){
  .calcGrid{ grid-template-columns: 1.05fr 0.95fr; }
}

.calcCard{
  border-radius: var(--rLg);
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(520px 180px at 18% 0%, rgba(var(--ventaIndigo),0.14), transparent 62%),
    radial-gradient(520px 180px at 88% 0%, rgba(var(--ventaEmerald),0.10), transparent 62%),
    rgba(255,255,255,0.03);
  box-shadow: var(--shadow1);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  padding: 16px;
}

.calcTitle{
  font-family: var(--fontDisplay);
  font-weight: 900;
  letter-spacing: -0.02em;
}
.calcSub{
  margin-top: 6px;
  color: rgba(var(--text2),0.92);
  font-size: 13px;
  line-height: 1.6;
}

/* Preset toggle row */
.calcPreset{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
}

.presetBtn{
  appearance:none;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  color: rgba(var(--text1),0.92);
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.presetBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.05);
}

.presetBtn.isActive{
  border-color: rgba(var(--ventaGold),0.34);
  background:
    radial-gradient(260px 90px at 18% 0%, rgba(var(--ventaGold),0.18), transparent 62%),
    rgba(255,255,255,0.05);
  color: rgba(var(--text0),0.96);
  box-shadow: 0 0 40px rgba(var(--ventaGold),0.10);
}

.presetBtn:focus-visible{
  outline: 2px solid rgba(var(--ventaGold),0.92);
  outline-offset: 3px;
}

.presetHint{
  color: rgba(var(--text2),0.90);
  font-size: 12px;
  margin-left: 2px;
}

.calcFields{
  display:grid;
  gap: 10px;
  margin-top: 12px;
}
@media (min-width: 680px){
  .calcFields{ grid-template-columns: 1fr 1fr; }
}

.calcField{ display:flex; flex-direction:column; gap: 6px; }
.calcLabel{
  font-size: 12px;
  font-weight: 850;
  color: rgba(var(--text1),0.92);
}
.calcHint{
  font-size: 12px;
  color: rgba(var(--text2),0.90);
}

.calcCtas{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.calcResultGrid{
  display:grid;
  gap: 10px;
  margin-top: 12px;
}
@media (min-width: 680px){
  .calcResultGrid{ grid-template-columns: 1fr 1fr; }
}

.calcMetric{
  border-radius: var(--rMd);
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  padding: 12px;
}
.calcMetricLabel{
  font-size: 12px;
  font-weight: 850;
  color: rgba(var(--text2),0.92);
  letter-spacing: 0.02em;
}
.calcMetricValue{
  margin-top: 6px;
  font-family: var(--fontDisplay);
  font-weight: 900;
  font-size: 18px;
  color: rgba(var(--text0),0.98);
}
.calcMetric.toneGold .calcMetricValue{
  color: rgb(var(--ventaGold));
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}

.calcAssumptions{
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 12px;
}
.calcAssumpTitle{
  font-size: 12px;
  font-weight: 900;
  color: rgba(var(--text1),0.92);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.calcAssumpText{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(var(--text2),0.92);
  line-height: 1.6;
}

.calcFootnote{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(var(--text2),0.86);
}

/* Launch badge */
.launchBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(var(--ventaGold),0.30);
  background:
    radial-gradient(240px 90px at 18% 0%, rgba(var(--ventaGold),0.18), transparent 62%),
    rgba(255,255,255,0.04);
  color: rgba(var(--text0),0.96);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  box-shadow: 0 0 40px rgba(var(--ventaGold),0.10);
  white-space: nowrap;
}

.navMobileMeta{
  padding: 10px 0 6px;
}

/* Footer launch note */
.footerLaunch{
  margin-top: 10px;
  font-size: 12px;
  color: rgba(var(--text2),0.92);
}
.footerLaunch b{
  color: rgba(var(--text0),0.96);
}

/* =========================
   Pricing: force calculator module to win
   (prevents site.css overrides)
   ========================= */

.page-pricing [data-calc]{
  display:block;
}

.page-pricing .calcGrid{
  display:grid;
  gap: 12px;
  margin-top: 18px;
}

@media (min-width: 980px){
  .page-pricing .calcGrid{
    grid-template-columns: 1.05fr 0.95fr;
  }
}

.page-pricing .calcCard{
  border-radius: var(--rLg);
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(520px 180px at 18% 0%, rgba(var(--ventaIndigo),0.14), transparent 62%),
    radial-gradient(520px 180px at 88% 0%, rgba(var(--ventaEmerald),0.10), transparent 62%),
    rgba(255,255,255,0.03);
  box-shadow: var(--shadow1);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  padding: 16px;
}

.page-pricing .calcTitle{
  font-family: var(--fontDisplay);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.page-pricing .calcSub{
  margin-top: 6px;
  color: rgba(var(--text2),0.92);
  font-size: 13px;
  line-height: 1.6;
}

.page-pricing .calcFields{
  display:grid;
  gap: 10px;
  margin-top: 12px;
}

@media (min-width: 680px){
  .page-pricing .calcFields{
    grid-template-columns: 1fr 1fr;
  }
}

.page-pricing .calcCtas{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.page-pricing .calcResultGrid{
  display:grid;
  gap: 10px;
  margin-top: 12px;
}

@media (min-width: 680px){
  .page-pricing .calcResultGrid{
    grid-template-columns: 1fr 1fr;
  }
}

/* Safety: prevent accidental "display:none" overrides */
.page-pricing #calc,
.page-pricing #calc *{
  visibility: visible;
}