/* ============================================================
   VA CLASSES — conversion + polish layer (loads after site.css)
   Only additive styles. Nothing here overrides brand tokens.
   ============================================================ */

/* CRITICAL: the HTML [hidden] attribute must always win over
   component display rules (.modal-scrim/.nav-drawer/.dropdown use
   display:flex|block, which would otherwise keep them visible). */
[hidden]{ display:none !important; }

/* Hide the floating WhatsApp button while a modal is open */
body.va-modal-open .wa-float{ display:none; }

/* Comparison table: let it swipe-scroll on small phones instead of clipping */
.cmp-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
@media (max-width:600px){
  .cmp-scroll{ margin:0 -16px; padding:0 16px; }
  .cmp-scroll .cmp2{ min-width:460px; }
}

/* ============================================================
   HIGH-CONVERSION + PREMIUM VISUAL LAYER
   ============================================================ */

/* ---- Footer logo on a clean white chip (clearly visible on dark) ---- */
.footer .logo-chip{
  background:#fff; padding:8px; border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.28); display:inline-flex;
  align-items:center; justify-content:center;
}
.footer .logo-chip img{ width:34px; height:34px; display:block; }
.footer .brand{ display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.footer .brand .wm{ font-weight:800; letter-spacing:-.01em; }

/* ---- Top urgency / value bar ---- */
.promo-bar{
  position:relative; z-index:60;
  display:flex; align-items:center; justify-content:center; gap:14px;
  padding:9px 44px 9px 16px; text-align:center;
  background:linear-gradient(90deg,#14130E,#2a2718,#14130E);
  color:#FBF8F0; font:600 13.5px/1.35 var(--font-sans,"Hanken Grotesk",system-ui,sans-serif);
}
.promo-bar b{ color:var(--brand-yellow,#FFC700); }
.promo-bar .promo-dot{ width:8px; height:8px; border-radius:50%; background:#25D366; box-shadow:0 0 0 0 rgba(37,211,102,.7); animation:promo-pulse 1.8s infinite; flex:none; }
@keyframes promo-pulse{ 0%{box-shadow:0 0 0 0 rgba(37,211,102,.6)} 70%{box-shadow:0 0 0 8px rgba(37,211,102,0)} 100%{box-shadow:0 0 0 0 rgba(37,211,102,0)} }
.promo-bar-cta{
  background:var(--brand-yellow,#FFC700); color:#14130E; border:none; cursor:pointer;
  font:800 13px/1 var(--font-sans,"Hanken Grotesk",system-ui,sans-serif);
  padding:8px 14px; border-radius:999px; white-space:nowrap; transition:transform .15s ease;
}
.promo-bar-cta:hover{ transform:translateY(-1px) scale(1.03); }
.promo-bar-x{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#FBF8F0; opacity:.6; font-size:20px; line-height:1; cursor:pointer;
}
.promo-bar-x:hover{ opacity:1; }
@media (max-width:640px){
  .promo-bar{ font-size:12px; padding:8px 34px 8px 12px; gap:9px; }
  .promo-bar .promo-hide-sm{ display:none; }
  .promo-bar-cta{ padding:7px 11px; font-size:12px; }
}

/* ---- Hero: soft premium aura behind the copy ---- */
.hero{ position:relative; overflow:hidden; }
.hero::before{
  content:""; position:absolute; top:-140px; left:-160px; width:480px; height:480px;
  background:radial-gradient(circle at center, rgba(255,199,0,.16), rgba(255,199,0,0) 70%);
  filter:blur(8px); pointer-events:none; z-index:0;
}
.hero .wrap, .hero-copy, .hero-form{ position:relative; z-index:1; }

/* ---- Urgency chip in the hero ---- */
.hero-urgency{
  display:inline-flex; align-items:center; gap:8px; margin-top:14px;
  padding:7px 13px; border-radius:999px;
  background:rgba(255,199,0,.16); border:1.5px solid rgba(255,199,0,.5);
  color:#5a4a00; font:700 12.5px/1 var(--font-sans,"Hanken Grotesk",system-ui,sans-serif);
}
.hero-urgency svg, .hero-urgency i{ color:#a8820a; flex:none; }

/* Premium elevation for the conversion cards (softer than the hard brand shadow) */
.hero-form.card-pop, .fca-form.card-pop{
  box-shadow:0 30px 64px -28px rgba(20,19,14,.38), 0 10px 26px -14px rgba(20,19,14,.16) !important;
  border:1px solid rgba(20,19,14,.10) !important;
}
.hero-form.card-pop{ max-width:520px; margin-left:auto; }

/* ---- Scroll reveal (premium entrance) ---- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); will-change:opacity,transform; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1 !important; transform:none !important; transition:none; } }

/* ---- Sticky mobile bottom CTA bar ---- */
.mobile-cta{ display:none; }
@media (max-width:760px){
  .mobile-cta{
    display:flex; gap:10px; align-items:center;
    position:fixed; left:0; right:0; bottom:0; z-index:880;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(251,248,240,.94); backdrop-filter:blur(10px);
    border-top:1px solid #ece5d4; box-shadow:0 -8px 24px rgba(20,19,14,.10);
  }
  .mobile-cta .btn{ flex:1; justify-content:center; }
  .mobile-cta .mc-wa{ flex:none; width:52px; padding:0; }
  body{ padding-bottom:74px; }
  .wa-float{ display:none !important; }   /* mobile uses the bar's WhatsApp button */
}

/* ---- Count-up numbers keep layout stable ---- */
[data-count]{ font-variant-numeric:tabular-nums; }

/* ---- Card hover lift (premium feel) on interactive cards ---- */
.subject, .tutor, .tier{ transition:transform .22s ease, box-shadow .22s ease; }
.subject:hover, .tutor:hover{ transform:translateY(-4px); }


/* ---- Floating WhatsApp button ---- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:900;
  display:inline-flex; align-items:center; gap:10px;
  height:60px; padding:0 16px 0 15px;
  background:#25D366; color:#fff; border-radius:999px;
  box-shadow:0 10px 28px rgba(37,211,102,.45), 0 3px 10px rgba(0,0,0,.18);
  text-decoration:none; font:600 15px/1 var(--font-sans, "Hanken Grotesk", system-ui, sans-serif);
  transition:transform .18s ease, box-shadow .18s ease;
  animation:wa-pop 3.4s ease-in-out infinite;
}
.wa-float:hover{ transform:translateY(-2px) scale(1.03); box-shadow:0 14px 34px rgba(37,211,102,.55); }
.wa-float svg{ flex:none; }
.wa-float .wa-float-txt{ white-space:nowrap; }
@keyframes wa-pop{ 0%,90%,100%{transform:translateY(0)} 45%{transform:translateY(-4px)} }
@media (prefers-reduced-motion: reduce){ .wa-float{ animation:none; } }
/* collapse to a circle on small phones to save space */
@media (max-width:600px){
  .wa-float{ height:56px; width:56px; padding:0; justify-content:center; right:16px; bottom:16px; }
}

/* ---- WhatsApp alt link inside forms ---- */
.hf-wa-alt{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:12px; padding:11px 12px;
  border:1.5px solid #25D366; border-radius:var(--r-sm,12px);
  color:#128C4B; background:rgba(37,211,102,.06);
  font:600 14px/1.2 var(--font-sans, "Hanken Grotesk", system-ui, sans-serif);
  text-decoration:none; transition:background .15s ease, transform .15s ease;
}
.hf-wa-alt:hover{ background:rgba(37,211,102,.14); transform:translateY(-1px); }
.hf-wa-alt svg,.hf-wa-alt i{ color:#25D366; }

/* ---- Real tutor photos (upgrade from the plain icon) ---- */
.t-photo{ overflow:hidden; position:relative; background:var(--paper-2,#f3efe4); }
.t-photo img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 22%; display:block;
}
.t-photo .t-initial{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font:800 22px/1 var(--font-display, "Archivo", sans-serif); color:#fff;
}

/* ---- Modal success reuses hf-done spacing ---- */
.va-modal-form .hf-done{ text-align:center; padding:30px 26px; }
.va-modal-form .hf-done h3{ margin:14px 0 6px; }

/* ---- Small accessibility / focus polish ---- */
.btn:focus-visible,.field:focus-visible,.chip:focus-visible,.nav-burger:focus-visible{
  outline:3px solid rgba(255,199,0,.55); outline-offset:2px;
}

/* ---- Nav: on mobile hide the desktop right cluster, burger takes over ---- */
@media (max-width:900px){
  .nav-right{ display:none; }
}

/* ---- Make hero form success state fill nicely ---- */
.hf-done[hidden]{ display:none; }
.hf-live[hidden]{ display:none; }