/* ═══════════════════════════════════════════════════════════════
   KAIVALYA ACADEMY — PREMIUM LAYER
   Loaded last. Everything here refines or extends website.css +
   enhancements.css; nothing below removes existing behaviour.

   1.  Design tokens & global polish
   2.  Hero — live abacus instrument
   3.  Trust bar
   4.  Dynamic announcement banner   (.kb-*)
   5.  Dynamic admission popup       (.kp-*)
   6.  "How to join" steps
   7.  Areas we serve (local SEO)
   8.  Mobile action dock
   9.  Card / button / form refinement
   10. Accessibility & reduced motion
   ═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   1 · DESIGN TOKENS & GLOBAL POLISH
   ══════════════════════════════════════════════ */
:root {
  --ink:        #0b1020;
  --ink-2:      #334155;
  --ink-3:      #64748b;
  --line:       #e6ebf3;
  --surface:    #ffffff;
  --surface-2:  #f7f9fc;

  --brand:      #1a237e;
  --brand-2:    #1d4ed8;
  --accent:     #f59e0b;
  --accent-2:   #fbbf24;
  --success:    #16a34a;
  --wa:         #25d366;

  --lift-1: 0 1px 2px rgba(15,23,42,.05), 0 2px 8px rgba(15,23,42,.05);
  --lift-2: 0 2px 6px rgba(15,23,42,.06), 0 12px 28px rgba(15,23,42,.09);
  --lift-3: 0 8px 20px rgba(15,23,42,.10), 0 28px 64px rgba(15,23,42,.16);
  --ring:   0 0 0 3px rgba(29,78,216,.35);

  --spring: cubic-bezier(.34,1.4,.64,1);
  --swift:  cubic-bezier(.32,.72,0,1);
}

::selection { background: rgba(251,191,36,.35); color: #0b1020; }

html { scroll-padding-top: 88px; }          /* sticky header offset for anchors */

/* Slightly tighter, more editorial headings */
.sec-h2 { letter-spacing: -.4px; text-wrap: balance; }
.sec-sub { text-wrap: pretty; }

/* A visible, consistent keyboard focus ring everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: 8px;
}

/* Screen-reader-only helper (used by the skip link and SEO headings) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 10000;
  background: var(--brand); color: #fff; padding: 10px 18px;
  border-radius: 0 0 10px 10px; font-weight: 700; font-size: 14px;
  text-decoration: none; transition: top .2s var(--swift);
}
.skip-link:focus { top: 0; }

/* Floating WhatsApp button — add a label on wide screens */
.wa-btn { box-shadow: 0 10px 30px rgba(37,211,102,.4) !important; }
.wa-btn::after {
  content: 'Chat with us';
  position: absolute; right: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) scale(.85);
  background: #0b1020; color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 7px 12px; border-radius: 9px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: all .25s var(--spring);
}
.wa-btn:hover::after { opacity: 1; transform: translateY(-50%) scale(1); }
@media (max-width: 860px) { .wa-btn::after { display: none; } }


/* ══════════════════════════════════════════════
   2 · HERO — LIVE ABACUS INSTRUMENT
   ══════════════════════════════════════════════ */

/* The visual column is no longer decoration — it holds a working abacus, the
   level ladder and the app feature list — so show it on phones too. Keeping
   every slide's visual visible also keeps the slides close in height, which
   matters because they share one stretched track (see the ≤860 block below). */
@media (max-width: 860px) {
  .slide-visual { display: flex !important; margin-top: 4px; }
}

.hero-ab-wrap { width: 100%; max-width: 380px; }

.hero-ab-card {
  background: linear-gradient(165deg, rgba(255,255,255,.13), rgba(255,255,255,.05));
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 22px;
  padding: 14px 14px 16px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.16);
}

.hero-ab-top {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 11px; padding: 0 2px;
}
.hero-ab-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #34d399; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(52,211,153,.7);
  animation: kacPulse 2.2s infinite;
}
@keyframes kacPulse {
  70%  { box-shadow: 0 0 0 9px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
.hero-ab-caption {
  font-size: 12px; font-weight: 700; color: #fff;
  letter-spacing: .3px; flex: 1;
}
.hero-ab-tag {
  font-size: 10px; font-weight: 700; color: var(--accent-2);
  background: rgba(251,191,36,.14); border: 1px solid rgba(251,191,36,.3);
  border-radius: 20px; padding: 3px 9px; white-space: nowrap;
}

/* Re-skin the shared .ab-frame for the dark hero — premium walnut + brass */
.hero-ab-frame.ab-frame {
  background: linear-gradient(180deg, #241b12, #17110b);
  border: 3px solid #8d6e4f;
  border-radius: 16px;
  padding: 10px 6px 4px;              /* padding-top must equal FRAME_PAD in js/hero-abacus.js */
  box-shadow: inset 0 2px 18px rgba(0,0,0,.6), 0 6px 18px rgba(0,0,0,.35);
}
.hero-ab-frame.ab-frame::before,
.hero-ab-frame.ab-frame::after { background: #c99b5e; }

/* Real-abacus geometry: 2 bead-slots above the beam, 5 below (not the 43/57
   split the compact in-page widget uses). js/hero-abacus.js repositions the
   beam to match — keep the 30% here in sync with BEAM_RATIO there. */
.hero-ab-frame .ab-rods { height: 240px; }
.hero-ab-frame .ab-beam {
  background: linear-gradient(180deg, #c99b5e, #8d6e4f);
  box-shadow: 0 2px 8px rgba(0,0,0,.55);
}

/* Heaven bead rests UP, away from the beam — it drops DOWN only when counted */
.hero-ab-frame .hz { height: 30%; padding: 4px 0; align-items: flex-start; }
.hero-ab-frame .hz:has(.hb.on) { align-items: flex-end; }

/* Earth beads: counted beads sit against the beam, the rest fall to the floor.
   The renderer always emits the "on" beads first, so the first bead without
   .on is where the gap belongs. */
.hero-ab-frame .ez { height: 70%; padding: 12px 0 4px; }
.hero-ab-frame .ez .bead.on + .bead:not(.on),
.hero-ab-frame .ez .bead:first-child:not(.on) { margin-top: auto; }
.hero-ab-frame .rod-line   { background: rgba(201,155,94,.35); width: 4px; }
.hero-ab-frame .rod-line.lit { background: var(--accent); box-shadow: 0 0 10px rgba(245,158,11,.55); }
.hero-ab-frame .rod-dv     { color: var(--accent-2); font-size: 12px; }
.hero-ab-frame .rod-dv.z   { color: rgba(255,255,255,.2); }
.hero-ab-frame .rl .en     { color: rgba(255,255,255,.55); }
.hero-ab-frame .rl .mr     { color: rgba(255,255,255,.32); }
.hero-ab-frame .bead {
  width: 40px; height: 23px;
  transition: transform .18s var(--spring), background .25s var(--swift), border-color .25s;
}
.hero-ab-frame .bead:hover { transform: scale(1.14); }

.hero-ab-readout {
  display: flex; align-items: center; gap: 12px;
  margin-top: 11px; padding: 10px 13px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 13px;
}
.hero-ab-num {
  font-size: 32px; font-weight: 900; line-height: 1;
  color: var(--accent-2); font-variant-numeric: tabular-nums;
  min-width: 62px; text-shadow: 0 2px 14px rgba(251,191,36,.4);
}
.hero-ab-meta { min-width: 0; }
.hero-ab-word {
  font-size: 12.5px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-ab-note { font-size: 10.5px; color: rgba(255,255,255,.62); margin-top: 2px; }
.hero-ab-note b { color: var(--accent-2); }

@media (max-width: 860px) {
  .hero-ab-wrap  { max-width: 340px; margin: 20px auto 0; }
  .hero-ab-frame .ab-rods { height: 220px; }
  .hero-ab-frame .bead { width: 34px; height: 18px; font-size: 9.5px; }
  .hero-ab-num { font-size: 27px; min-width: 52px; }
}
@media (max-width: 400px) {
  .hero-ab-frame .ab-rods { height: 200px; }
  .hero-ab-frame .bead { width: 29px; height: 16px; font-size: 9px; }
}

/* On phones the carousel is content-sized. A fixed min-height would leave a
   dead band of background under the shorter slides, so instead let the track
   size itself to the tallest slide and stretch every slide to match. */
@media (max-width: 860px) {
  .hero-carousel-outer { min-height: 0; }
  .carousel-track  { height: auto; align-items: stretch; }
  /* Slides stretch so their background always fills the track, but their
     content is pinned to the top — otherwise a short slide would centre its
     text halfway down the tallest slide's height. */
  .carousel-slide  { height: auto; align-items: flex-start; }
  .slide-content   { padding: 44px 20px 64px; }   /* bottom clears dots + progress bar */
}


/* ══════════════════════════════════════════════
   3 · TRUST BAR
   ══════════════════════════════════════════════ */
.trust-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  /* beats `section { padding: 60px 0 !important }` in enhancements.css —
     this strip is a thin band, not a full content section */
  padding: 20px 0 !important;
}
.trust-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  text-align: center;
}
.trust-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 4px; border-radius: 12px;
  transition: background .25s var(--swift);
}
.trust-item:hover { background: var(--surface-2); }
.trust-ico { font-size: 22px; line-height: 1; }
.trust-v {
  font-size: 19px; font-weight: 900; color: var(--brand);
  line-height: 1.1; font-variant-numeric: tabular-nums;
}
.trust-l { font-size: 11px; font-weight: 600; color: var(--ink-3); line-height: 1.3; }

@media (max-width: 760px) {
  .trust-grid { grid-template-columns: repeat(3, 1fr); gap: 14px 8px; }
  .trust-item:nth-child(4) { grid-column: 1 / 2; }
  .trust-v { font-size: 16px; }
  .trust-ico { font-size: 19px; }
}
@media (max-width: 420px) { .trust-grid { grid-template-columns: repeat(2, 1fr); } }


/* ══════════════════════════════════════════════
   4 · DYNAMIC ANNOUNCEMENT BANNER  (.kb-*)
   ══════════════════════════════════════════════ */
#kacBanner {
  background: linear-gradient(90deg, #7c2d12, #b45309 45%, #d97706);
  position: relative; z-index: 40;
}
#kacBanner[hidden] { display: none; }
.kb-inner {
  max-width: 1140px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 44px 9px 20px;
}
.kb-emoji { font-size: 16px; flex-shrink: 0; animation: kacWiggle 3.5s ease-in-out infinite; }
@keyframes kacWiggle { 0%,88%,100% { transform: rotate(0); } 92% { transform: rotate(-12deg); } 96% { transform: rotate(12deg); } }
.kb-title { font-size: 13px; font-weight: 800; color: #fff; flex-shrink: 0; }
.kb-desc  {
  font-size: 13px; color: rgba(255,255,255,.9); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kb-btn {
  margin-left: auto; flex-shrink: 0;
  background: #fff; color: #92400e; border: none;
  border-radius: 20px; padding: 5px 15px;
  font-size: 12px; font-weight: 800; cursor: pointer;
  font-family: inherit; transition: transform .2s var(--spring), box-shadow .2s;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.kb-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.kb-close {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.16); border: none; color: rgba(255,255,255,.85);
  font-size: 17px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.kb-close:hover { background: rgba(255,255,255,.3); color: #fff; }

@media (max-width: 700px) {
  .kb-inner { padding: 8px 38px 8px 14px; gap: 8px; }
  .kb-desc  { display: none; }
  .kb-title { font-size: 12px; }
  .kb-btn   { padding: 4px 12px; font-size: 11px; }
}


/* ══════════════════════════════════════════════
   5 · DYNAMIC ADMISSION POPUP  (.kp-*)
   ══════════════════════════════════════════════ */
body.kp-locked { overflow: hidden; }

.kp-overlay {
  position: fixed; inset: 0; z-index: 9500;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: rgba(6, 10, 26, .68);
  backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  opacity: 0; transition: opacity .3s var(--swift);
}
.kp-overlay.is-open { opacity: 1; }
.kp-overlay[hidden] { display: none; }

.kp-box {
  position: relative;
  width: 100%; max-width: 440px;
  max-height: min(92vh, 780px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface);
  border-radius: 24px;
  box-shadow: var(--lift-3);
  transform: translateY(22px) scale(.96);
  opacity: 0;
  transition: transform .38s var(--spring), opacity .3s var(--swift);
  scrollbar-width: thin;
}
.kp-overlay.is-open .kp-box { transform: none; opacity: 1; }
.kp-box:focus { outline: none; box-shadow: var(--lift-3); }
.kp-box::-webkit-scrollbar { width: 5px; }
.kp-box::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.kp-close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.3);
  color: #fff; font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, transform .2s var(--spring);
}
.kp-close:hover { background: rgba(255,255,255,.4); transform: rotate(90deg); }

/* The popup steps are <section> elements, so they inherit the site-wide
   `section { padding: 60px 0 !important }` from enhancements.css and open with
   a 60px blank gap above the header. !important is required to beat it. */
.kp-step { padding: 0 !important; }

/* ── Coloured header, themed per campaign ── */
.kp-hero {
  position: relative; overflow: hidden;
  padding: 26px 26px 22px; text-align: center; color: #fff;
  background: linear-gradient(135deg, #1a237e, #1d4ed8);
}
.kp-hero::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 22% 12%, rgba(255,255,255,.22), transparent 55%);
  pointer-events: none;
}
.kp-theme-summer   .kp-hero { background: linear-gradient(135deg, #c2410c, #f59e0b); }
.kp-theme-festive  .kp-hero { background: linear-gradient(135deg, #7c2d12, #b91c1c 55%, #f59e0b); }
.kp-theme-school   .kp-hero { background: linear-gradient(135deg, #1e3a8a, #0891b2); }
.kp-theme-newyear  .kp-hero { background: linear-gradient(135deg, #4c1d95, #7c3aed 60%, #db2777); }
.kp-theme-evergreen .kp-hero { background: linear-gradient(135deg, #14532d, #16a34a 65%, #0d9488); }

.kp-icon {
  font-size: 46px; line-height: 1; margin-bottom: 8px;
  display: block; animation: kacFloat 3.4s ease-in-out infinite;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.3));
}
@keyframes kacFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.kp-badge {
  display: inline-block; position: relative; z-index: 1;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3);
  border-radius: 30px; padding: 4px 14px;
  font-size: 11px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; margin-bottom: 12px;
  backdrop-filter: blur(6px);
}
.kp-title {
  position: relative; z-index: 1;
  font-size: clamp(1.35rem, 5.2vw, 1.75rem);
  font-weight: 900; line-height: 1.15; margin-bottom: 6px;
  text-shadow: 0 2px 12px rgba(0,0,0,.2);
}
.kp-title-mr { position: relative; z-index: 1; font-size: 13px; color: rgba(255,255,255,.88); }

/* ── Body ── */
.kp-body { padding: 20px 24px 24px; }
.kp-subtitle {
  font-size: 14px; color: var(--ink-2); line-height: 1.6;
  text-align: center; margin-bottom: 16px;
}

.kp-bullets { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0 0 16px; padding: 0; }
.kp-bullet {
  display: flex; align-items: flex-start; gap: 11px;
  font-size: 13.5px; color: var(--ink-2); line-height: 1.45;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 11px; padding: 10px 12px;
}
.kp-bullet strong { color: var(--brand); }
.kp-bullet-ico { font-size: 16px; flex-shrink: 0; line-height: 1.3; }

/* ── Countdown ── */
.kp-countdown {
  background: linear-gradient(135deg, #0b1020, #1e293b);
  border-radius: 14px; padding: 12px; margin-bottom: 12px; text-align: center;
}
.kp-cd-label { font-size: 11px; font-weight: 700; color: var(--accent-2); letter-spacing: .5px; margin-bottom: 8px; }
.kp-cd-units { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.kp-cd-unit {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px; padding: 7px 2px;
}
.kp-cd-num {
  display: block; font-size: 20px; font-weight: 900; color: #fff;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.kp-cd-cap { display: block; font-size: 9.5px; color: rgba(255,255,255,.55); font-weight: 600; margin-top: 3px; }

/* ── Seat meter ── */
.kp-seats { margin-bottom: 12px; }
.kp-seats-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11.5px; color: var(--ink-3); font-weight: 600; margin-bottom: 5px;
}
.kp-seats-row strong { color: #dc2626; font-weight: 800; }
.kp-seats-track { height: 7px; background: var(--line); border-radius: 5px; overflow: hidden; }
.kp-seats-fill {
  height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, #f59e0b, #dc2626);
  transition: width 1.2s var(--swift);
}

.kp-valid { font-size: 11.5px; color: var(--ink-3); text-align: center; margin-bottom: 16px; }

/* ── Actions ── */
.kp-actions { display: flex; flex-direction: column; gap: 9px; }
.kp-cta {
  display: block; width: 100%;
  background: linear-gradient(135deg, var(--accent), #f97316);
  color: #3b2506; border: none; border-radius: 13px;
  padding: 15px 18px; font-size: 15px; font-weight: 800;
  font-family: inherit; cursor: pointer; text-align: center; text-decoration: none;
  box-shadow: 0 8px 22px rgba(245,158,11,.4);
  transition: transform .22s var(--spring), box-shadow .22s var(--swift);
}
.kp-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(245,158,11,.5); }
.kp-cta:active { transform: translateY(0); }
.kp-cta.is-loading { opacity: .65; cursor: progress; }
.kp-cta:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.kp-actions-split { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.kp-wa, .kp-call {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 8px; border-radius: 12px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: transform .2s var(--spring), filter .2s;
}
.kp-wa   { background: var(--wa); color: #05321a; }
.kp-call { background: var(--surface-2); color: var(--brand); border: 1.5px solid var(--line); }
.kp-wa:hover, .kp-call:hover { transform: translateY(-2px); filter: brightness(1.03); }

.kp-later {
  display: block; width: 100%; margin-top: 12px;
  background: none; border: none; font-family: inherit;
  font-size: 12.5px; color: var(--ink-3); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.kp-later:hover { color: var(--brand); }

/* ── Step 2 · form ── */
.kp-step-form { padding: 26px 24px 24px; }
.kp-form-head { text-align: center; margin-bottom: 18px; }
.kp-form-ico  { font-size: 34px; margin-bottom: 6px; }
.kp-form-title { font-size: 20px; font-weight: 900; color: var(--brand); margin-bottom: 5px; }
.kp-form-sub   { font-size: 12.5px; color: var(--ink-3); line-height: 1.55; }
.kp-form-sub .mr { display: block; font-size: 11.5px; margin-top: 2px; }

.kp-form { display: flex; flex-direction: column; gap: 13px; }
.kp-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kp-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.kp-label { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.kp-req   { color: #dc2626; }

.kp-input {
  width: 100%; padding: 12px 13px;
  border: 1.6px solid var(--line); border-radius: 11px;
  font-size: 15px; font-family: inherit; color: var(--ink);
  background: var(--surface); transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
.kp-input::placeholder { color: #b0bccd; }
.kp-input:focus { outline: none; border-color: var(--brand-2); box-shadow: 0 0 0 3px rgba(29,78,216,.14); }
.kp-input.is-invalid { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
select.kp-input {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px;
}

.kp-phone-wrap { display: flex; align-items: stretch; }
.kp-phone-cc {
  display: flex; align-items: center; padding: 0 12px;
  background: var(--surface-2); border: 1.6px solid var(--line); border-right: none;
  border-radius: 11px 0 0 11px; font-size: 14px; font-weight: 700; color: var(--ink-2);
}
.kp-input-phone { border-radius: 0 11px 11px 0; letter-spacing: .8px; }

.kp-err { font-size: 11.5px; color: #dc2626; font-weight: 600; min-height: 0; }
.kp-err:empty { display: none; }

.kp-form-err {
  background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c;
  border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5;
}
.kp-form-err a { color: #b91c1c; font-weight: 800; }
.kp-form-err[hidden] { display: none; }

.kp-submit { margin-top: 2px; }
.kp-privacy { font-size: 11px; color: var(--ink-3); text-align: center; }

/* ── Step 3 · thank you ── */
.kp-step-done { padding: 34px 26px 26px; text-align: center; }
.kp-done-tick { font-size: 54px; margin-bottom: 10px; animation: kacPop .5s var(--spring) both; }
@keyframes kacPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.kp-done-title { font-size: 24px; font-weight: 900; color: var(--success); margin-bottom: 8px; }
.kp-done-sub   { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; margin-bottom: 18px; }
.kp-done-sub .mr { display: block; font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.kp-done-next { display: flex; flex-direction: column; gap: 8px; text-align: left; margin-bottom: 18px; }
.kp-done-step {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 11px; padding: 10px 12px;
  font-size: 12.5px; color: var(--ink-2); font-weight: 600;
}
.kp-done-step span {
  width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%;
  background: var(--success); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900;
}
.kp-done-wa { background: linear-gradient(135deg, var(--wa), #128c7e); color: #fff; box-shadow: 0 8px 22px rgba(37,211,102,.35); }
.kp-done-wa:hover { box-shadow: 0 14px 32px rgba(37,211,102,.45); }

@media (max-width: 480px) {
  .kp-overlay { padding: 10px; align-items: flex-end; }
  .kp-box { max-height: 94vh; border-radius: 22px 22px 16px 16px; }
  .kp-hero { padding: 22px 20px 18px; }
  .kp-icon { font-size: 38px; }
  .kp-body, .kp-step-form { padding: 18px 18px 22px; }
  .kp-field-row { grid-template-columns: 1fr; }
  .kp-cd-num { font-size: 17px; }
}


/* ══════════════════════════════════════════════
   6 · "HOW TO JOIN" STEPS
   ══════════════════════════════════════════════ */
.join-sec { background: var(--surface-2); }
.join-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  position: relative;
}
.join-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 26px 22px 22px;
  box-shadow: var(--lift-1);
  transition: transform .3s var(--spring), box-shadow .3s var(--swift), border-color .3s;
}
.join-card:hover { transform: translateY(-6px); box-shadow: var(--lift-2); border-color: #c7d2fe; }
.join-num {
  position: absolute; top: -16px; left: 22px;
  width: 38px; height: 38px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; font-size: 17px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(26,35,126,.35);
}
.join-ico   { font-size: 30px; margin: 8px 0 10px; }
.join-title { font-size: 16.5px; font-weight: 800; color: var(--ink); margin-bottom: 3px; }
.join-mr    { font-size: 12px; color: var(--accent); font-weight: 700; margin-bottom: 8px; }
.join-body  { font-size: 13.5px; color: var(--ink-3); line-height: 1.65; }
.join-cta-row { text-align: center; margin-top: 26px; }
.join-cta {
  display: inline-flex; align-items: center; gap: 9px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff; border: none; border-radius: 14px;
  padding: 15px 34px; font-size: 15.5px; font-weight: 800;
  font-family: inherit; cursor: pointer; text-decoration: none;
  box-shadow: 0 10px 26px rgba(26,35,126,.32);
  transition: transform .25s var(--spring), box-shadow .25s var(--swift);
}
.join-cta:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(26,35,126,.42); }
.join-note { font-size: 12.5px; color: var(--ink-3); margin-top: 11px; }

@media (max-width: 820px) { .join-grid { grid-template-columns: 1fr; gap: 26px; } }


/* ══════════════════════════════════════════════
   7 · AREAS WE SERVE  (local SEO)
   ══════════════════════════════════════════════ */
.areas-sec { background: var(--surface); border-top: 1px solid var(--line); }
.areas-grid {
  display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; margin-top: 6px;
}
.area-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 30px; padding: 8px 15px;
  font-size: 13px; font-weight: 600; color: var(--ink-2);
  transition: all .25s var(--swift);
}
.area-chip:hover {
  background: linear-gradient(135deg, #eef2ff, #dbeafe);
  border-color: #c7d2fe; color: var(--brand); transform: translateY(-2px);
}
.area-chip::before { content: '📍'; font-size: 12px; }
.areas-note {
  text-align: center; font-size: 13px; color: var(--ink-3);
  margin-top: 18px; line-height: 1.7; max-width: 720px;
  margin-left: auto; margin-right: auto;
}
.areas-note strong { color: var(--brand); }


/* ══════════════════════════════════════════════
   8 · MOBILE ACTION DOCK
   ══════════════════════════════════════════════ */
.mobile-dock { display: none; }

@media (max-width: 860px) {
  .mobile-dock {
    display: grid;
    grid-template-columns: 1fr 1fr 1.35fr;
    gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 880;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom, 0px));
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(15,23,42,.12);
    transform: translateY(110%);
    transition: transform .35s var(--spring);
  }
  .mobile-dock.is-on { transform: translateY(0); }

  .dock-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; padding: 9px 4px; border-radius: 12px;
    font-size: 11.5px; font-weight: 700; font-family: inherit;
    border: 1px solid var(--line); background: var(--surface-2);
    color: var(--ink-2); text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .dock-btn i { font-style: normal; font-size: 17px; line-height: 1; }
  .dock-btn:active { transform: scale(.96); }
  .dock-call { color: var(--brand); border-color: #c7d2fe; background: #eef2ff; }
  .dock-wa   { color: #05321a; background: #dcfce7; border-color: #86efac; }
  .dock-demo {
    background: linear-gradient(135deg, var(--accent), #f97316);
    color: #3b2506; border-color: transparent;
    box-shadow: 0 4px 14px rgba(245,158,11,.4);
  }

  /* Keep the floating buttons clear of the dock */
  .wa-btn    { bottom: 84px !important; }
  .scroll-up { bottom: 84px !important; }
  body { padding-bottom: 66px; }
  .academy-branches { margin-bottom: 8px; }
}


/* ══════════════════════════════════════════════
   9 · CARD / BUTTON / FORM REFINEMENT
   ══════════════════════════════════════════════ */

/* Softer, more consistent elevation on the main content cards */
.why-card, .online-feat-card, .faq-item, .testi-card, .info-card, .form-card {
  transition: transform .3s var(--spring), box-shadow .3s var(--swift), border-color .3s;
}
.why-card:hover, .online-feat-card:hover, .testi-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--lift-2);
}

/* Enquiry form — clearer hierarchy and touch targets */
.form-card { box-shadow: var(--lift-2); }
.fi, .fs, .fta {
  transition: border-color .2s, box-shadow .2s;
  font-size: 15px;           /* ≥16px-ish stops iOS zooming on focus */
}
.fi:focus, .fs:focus, .fta:focus {
  border-color: var(--brand-2) !important;
  box-shadow: 0 0 0 3px rgba(29,78,216,.14);
  outline: none;
}
.fi.is-invalid, .fs.is-invalid, .fta.is-invalid {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}
.field-err {
  display: block; font-size: 11.5px; color: #dc2626;
  font-weight: 600; margin-top: 4px;
}
.field-err:empty { display: none; }

.fsub {
  transition: transform .22s var(--spring), box-shadow .22s var(--swift), opacity .2s;
}
.fsub:hover:not(:disabled) { transform: translateY(-2px); }
.fsub:disabled { opacity: .6; cursor: progress; }

/* Form reassurance strip under the submit button */
.form-assure {
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
  margin-top: 12px; font-size: 11.5px; color: var(--ink-3); font-weight: 600;
}
.form-assure span { display: inline-flex; align-items: center; gap: 4px; }

/* FAQ — smoother open/close */
.faq-q { transition: background .2s, color .2s; }
.faq-arrow { transition: transform .25s var(--swift); }

/* Section rhythm: a little more air between big blocks on desktop.
   !important is needed to beat enhancements.css's own !important section rule. */
@media (min-width: 861px) {
  section { padding: 72px 0 !important; }
  .trust-bar { padding: 22px 0 !important; }
  .sec-head { margin-bottom: 34px; }
}


/* ══════════════════════════════════════════════
   10 · ACCESSIBILITY & REDUCED MOTION
   ══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none !important; }
}

@media print {
  .kp-overlay, #kacBanner, .mobile-dock, .wa-btn, .scroll-up,
  .carousel-arrow, .carousel-dots, .topbar { display: none !important; }
}