/* ==========================================================================
   Kivana 360 — stylesheet
   Dark professional theme. Charcoal ground, glass panels, gold and rose from
   the logo, mint reserved for settled figures. Ambient light behind the heroes.

   Sections: tokens -> base -> progress -> topbar -> hero -> phone mock
             -> sections -> cards -> lists -> table -> pricing -> steps
             -> cta -> forms -> modal -> footer -> motion -> responsive
   ========================================================================== */

/* A cream gradient is the page ground, and the topbar is the one maroon
   surface on it — the reverse of the arrangement before. Nothing sets
   data-theme="dark", so the block below never applies. Every colour here is
   a token, which is why that inversion was a change of values in two blocks
   and not a change of rules anywhere.

   Maroon and gold are sampled from assets/kivana-logo.png, not guessed:
   the wordmark averages #790A10 and the gold #DF9618.

   Gold splits in two here, and the split is load-bearing. #DF9618 on cream
   is about 2:1 — nowhere near readable — so the logo gold is confined to
   fills and anything that has to be *read* uses --gld at 5.0:1. Inside the
   topbar, which is dark, the two collapse back to one value. */
:root{
  /* ground — cream gradient */
  --bg:#F7EBD7;
  --pan:#FFFBF3;
  --rai:#F2E4CC;
  --ln:#E5D5BA;
  --ln2:#D3BE9C;

  /* type */
  --ink:#2A1216;
  --mut:#6B5A50;
  --dim:#91806F;

  /* brand */
  --gld:#8A5A05;          /* text-safe gold */
  --gld2:#6E4704;
  --gld-fill:#DF9618;     /* the logo gold — fills, never text */
  --gld-fill2:#B87A10;
  --gld-soft:rgba(223,150,24,.20);
  --gld-ring:rgba(184,122,16,.48);
  --rose:#96131F;         /* the logo maroon, lifted just enough to read */
  --rose-soft:rgba(150,19,31,.10);
  --mint:#0F7F5B;
  --err:#C42B2B;
  --err-ring:rgba(196,43,43,.14);

  --on-gold:#2A1216;

  /* surfaces that aren't flat fills */
  --glass:rgba(255,251,243,.86);
  --scrim:rgba(42,18,22,.48);
  --shadow-k:rgba(90,50,20,.34);

  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:"JetBrains Mono","Consolas",ui-monospace,monospace;

  --wrap:1160px;
  --e:cubic-bezier(.22,.8,.3,1);
  --shadow:0 24px 60px -34px var(--shadow-k);
}

/* Dark theme — CURRENTLY UNREACHABLE. The toggle that set data-theme="dark"
   was removed, and nothing else sets the attribute, so none of this applies.
   It is kept because the values are tuned and re-enabling is a small job:
   restore the .kv-theme button markup and styles, section 4b of script.js,
   and the pre-paint <script> in each <head>. Delete this block if dark is
   never coming back.

   Not an inversion of the cream — the brand colours brighten, because the
   maroon that reads at 7.4:1 on cream disappears on near-black. */
:root[data-theme="dark"]{
  --bg:#0F0D10;
  --pan:#17141A;
  --rai:#221D25;
  --ln:#2C2632;
  --ln2:#3A3341;

  --ink:#EFEAEE;
  --mut:#9B9099;
  --dim:#756B73;

  --gld:#E8A317;
  --gld2:#C9880C;
  --gld-fill:#E8A317;
  --gld-fill2:#C9880C;
  --gld-soft:rgba(232,163,23,.14);
  --gld-ring:rgba(232,163,23,.42);
  --rose:#E2566C;
  --rose-soft:rgba(226,86,108,.14);
  --mint:#4ECFA4;
  --err:#FF7A7A;
  --err-ring:rgba(255,122,122,.15);

  --on-gold:#2A0E14;

  --glass:rgba(23,20,26,.78);
  --scrim:rgba(6,4,7,.72);
  --shadow-k:#000;
}

*{box-sizing:border-box;}
/* the topbar is sticky, so an anchor jump has to stop short of it or the
   heading it lands on sits underneath the bar */
/* The ground moves to <html> so <body> can be transparent — the fixed hero
   canvas sits at z-index:-1, which paints above the root background but below
   every bit of content. A background on <body> would bury it. */
html{background:linear-gradient(135deg,#FFFBF3 0%,#F7EBD7 52%,#EFE0C4 100%);scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }

body{
  margin:0;
  background:transparent;   /* see the note on <html> above */
  color:var(--ink);
  font-family:var(--font);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body *{text-wrap:pretty;}
h1,h2,h3{text-wrap:balance;}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
p{margin:0 0 1.05em;}
p:last-child{margin-bottom:0;}
h1,h2,h3,h4{margin:0;letter-spacing:-.028em;font-weight:700;line-height:1.12;}
strong,b{color:var(--ink);font-weight:600;}

::selection{background:var(--gld-soft);color:var(--ink);}
:focus-visible{outline:2px solid var(--gld);outline-offset:3px;border-radius:4px;}

.kv-wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px;}

/* ---------- scroll progress ---------- */
.kv-progress{
  position:fixed;top:0;left:0;height:2px;width:0%;z-index:60;
  background:linear-gradient(90deg,var(--rose),var(--gld-fill));
  transition:width .12s ease-out;
}

/* ---------- topbar ----------
   The one maroon surface on a cream page, so it re-declares the dark tokens
   for itself. Nothing inside it needs a new rule: the links, the CTA and the
   mobile sheet all already read these names, so they resolve to dark values
   in the bar and cream ones everywhere else. That is the whole reason the
   palette inversion touched two token blocks and no components.

   Gold goes the other way here than on the page. --gld-fill is the BRIGHT
   #E8A317, because on maroon that is the readable one and the page's #DF9618
   would muddy; --gld and --gld-fill collapse to a single value, since the
   split that cream forces does not apply on a dark ground.

   The fill is opaque, so there is deliberately no backdrop-filter — a blur
   behind an opaque colour is a compositing cost that buys nothing. Restore
   it if the fill ever goes translucent. */
.kv-topbar{
  --pan:#4A1F2B;
  --rai:#5C2A35;
  --ln:#6B3340;
  --ln2:#7A3C4A;
  --ink:#FFFBF3;          /* hover + current link, hamburger bars */
  --mut:#C4B0BC;          /* resting links */
  --gld:#E8A317;
  --gld-fill:#E8A317;
  --gld-fill2:#C9880C;
  --gld-ring:rgba(232,163,23,.48);
  --on-gold:#2A0E14;

  position:sticky;top:0;z-index:40;
  background:linear-gradient(100deg,#2A1216 0%,#4A1F2B 55%,#3D1621 100%);
  border-bottom:1px solid #240E13;
  animation:kv-drop .4s var(--e) both;
}
@keyframes kv-drop{ from{ opacity:0; transform:translateY(-100%); } }

/* An animation with `both` keeps applying its final value forever, and
   animations beat normal declarations — so .hide's transform would be
   silently ignored while it holds. Section 2b clears the animation once it
   has played, and only then does this transition own the transform. With JS
   off the bar simply drops in and never retracts, which is a fine floor. */
.kv-topbar.ready{ animation:none; }

/* leaving for another page — opacity only. A transform on <body> would make
   it the containing block for position:fixed children, and .kv-hero-bg is
   exactly that, so the background would come unstuck mid-navigation. */
/* kept in step with the 150ms navigation timer in section 2c of script.js */
body{ transition:opacity .15s ease; }
body.kv-leaving{ opacity:0; }

@media (prefers-reduced-motion: reduce){
  .kv-topbar{ animation:none; }
  .kv-topbar.ready{ transition:none; }
  body{ transition:none; }
}
/* space-between only works while the bar has BOTH children — the brand and
   the nav. Remove the lockup again and a lone nav gets parked at the *start*,
   sliding to the left edge; that needs flex-end, not space-between. */
.kv-topbar-inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  max-width:var(--wrap);margin:0 auto;padding:11px 28px;
}
/* The lockup sits directly on the bar — no plate behind it. The two lockups
   are NOT the same file: the bar is the dark surface so it takes the
   reversed cream artwork, and the footer sits on the cream page so it takes
   the maroon original. Swapping them makes each one vanish into its own
   background. The hero canvas loads the maroon file too, for the corner
   marks. */
.kv-brand{display:flex;align-items:center;}
.kv-brand img{height:46px;width:auto;}

.kv-nav{display:flex;align-items:center;gap:16px;}
.kv-nav-links{display:flex;gap:4px;}
.kv-nav-links a{
  font-size:.9rem;color:var(--mut);padding:8px 12px;border-radius:8px;
  transition:background .18s var(--e),color .18s var(--e);
}
.kv-nav-links a:hover{color:var(--ink);background:var(--rai);}
.kv-nav-links a[aria-current="page"]{color:var(--ink);background:var(--rai);font-weight:600;}

.kv-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border:0;border-radius:9px;cursor:pointer;
  font-family:var(--font);font-size:.88rem;font-weight:700;white-space:nowrap;
  background:linear-gradient(135deg,var(--gld-fill),var(--gld-fill2));color:var(--on-gold);
  transition:transform .18s var(--e),box-shadow .18s var(--e);
}
.kv-btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px var(--gld-ring);}
.kv-btn--ghost{
  background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ln2);
}
.kv-btn--ghost:hover{box-shadow:inset 0 0 0 1px var(--gld);color:var(--gld);}
.kv-btn--block{width:100%;}
.kv-btn-row{display:flex;gap:11px;flex-wrap:wrap;}

.kv-menu-toggle{
  display:none;width:40px;height:40px;padding:0;cursor:pointer;
  background:none;border:1px solid var(--ln2);border-radius:9px;
}
.kv-menu-toggle span{
  display:block;width:18px;height:2px;margin:4px auto;border-radius:2px;background:var(--ink);
  transition:transform .25s var(--e),opacity .2s var(--e);
}
.kv-topbar.open .kv-menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.kv-topbar.open .kv-menu-toggle span:nth-child(2){opacity:0;}
.kv-topbar.open .kv-menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ---------- hero ---------- */
.kv-hero{
  position:relative;overflow:hidden;isolation:isolate;
  padding:66px 0 58px;
}
/* The connection sphere. Fixed to the viewport rather than parked inside the
   hero: pinned to the hero it vanished the moment you scrolled past it, which
   is most of the page. Fixed, it stays behind the content the whole way down
   and fades back as you go so it never competes with the copy.

   It replaced two blurred ambient circles that used to sit on .kv-hero — a
   drifting blur behind a structured mesh only smears it. */
.kv-hero-bg{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:-1;pointer-events:none;display:block;
}

.kv-hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:44px;align-items:center;}
.kv-hero-copy{max-width:56ch;}

.kv-chip{
  display:inline-flex;align-items:center;gap:9px;padding:5px 14px;border-radius:999px;
  background:var(--rai);box-shadow:inset 0 0 0 1px var(--ln);
  font-size:.76rem;color:var(--mut);margin-bottom:20px;
}
.kv-chip i{
  width:6px;height:6px;border-radius:50%;background:var(--mint);
  animation:kv-pulse 2.6s ease-in-out infinite;
}
@keyframes kv-pulse{0%,100%{opacity:.5;}50%{opacity:1;}}

.kv-hero h1{
  font-size:clamp(2rem,4vw,3rem);line-height:1.06;letter-spacing:-.035em;margin-bottom:16px;
}
.accent{
  background:linear-gradient(120deg,var(--gld),var(--rose));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.kv-hero-sub{color:var(--mut);font-size:1.05rem;margin-bottom:14px;}
.kv-hero-sub strong{color:var(--ink);}
.kv-expansion{
  font-family:var(--mono);font-size:.75rem;line-height:1.6;color:var(--dim);
  border-left:2px solid var(--gld);padding-left:14px;margin-bottom:26px;max-width:52ch;
}
.kv-expansion b{color:var(--gld);font-weight:600;}

/* compact hero for interior pages */
.kv-hero--page{padding:52px 0 46px;}
.kv-hero--page .kv-hero-copy{max-width:58ch;}

/* ---------- phone mock ---------- */
.kv-phone{position:relative;width:100%;max-width:300px;margin:0 auto;}
.kv-phone-frame{
  border-radius:30px;background:var(--pan);overflow:hidden;padding-bottom:18px;
  box-shadow:inset 0 0 0 1px var(--ln),var(--shadow);
}
.kv-phone-bar{
  height:32px;display:flex;align-items:center;justify-content:center;
  background:var(--gld-soft);border-bottom:1px solid var(--ln);
}
.kv-phone-notch{width:74px;height:7px;border-radius:999px;background:var(--gld-fill);opacity:.6;}
.kv-phone-head{display:flex;align-items:center;gap:11px;padding:16px 16px 13px;}
.kv-phone-avatar{
  width:36px;height:36px;flex:none;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1rem;color:var(--on-gold);
  background:linear-gradient(135deg,var(--gld-fill),var(--rose));
}
.kv-phone-head b{display:block;font-size:.94rem;font-weight:600;}
.kv-phone-head em{
  font-style:normal;font-size:.72rem;color:var(--mut);font-variant-numeric:tabular-nums;
}
.kv-phone-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 16px 13px;}
.kv-phone-tile{
  aspect-ratio:1/1;border-radius:11px;background:var(--rai);
  box-shadow:inset 0 0 0 1px var(--ln);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:4px 2px;text-align:center;font-size:.5rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--mut);
  /* Every label is a single word, so there is nowhere to break one: it either
     stays on its line or strands a letter on a second. nowrap forbids the
     break, and the size and tracking above are set so the longest label
     (ANNOUNCEMENT — 8.5em of advance) still clears the tile's inner width
     down to a 320px viewport. A label longer than that means stepping these
     down again, not letting the wrap come back. */
  white-space:nowrap;line-height:1.18;
  transition:box-shadow .22s var(--e),transform .22s var(--e),color .22s var(--e);
}
.kv-phone-tile:hover{box-shadow:inset 0 0 0 1px var(--gld);color:var(--gld);transform:translateY(-2px);}
.kv-phone-tile svg{width:17px;height:17px;stroke:var(--gld);stroke-width:1.7;fill:none;}
.kv-phone-strip{
  margin:0 16px;padding:11px 13px;border-radius:11px;background:var(--rai);
  box-shadow:inset 0 0 0 1px var(--ln);display:flex;align-items:center;
  justify-content:space-between;gap:10px;font-size:.72rem;color:var(--mut);
}
.kv-phone-strip b{color:var(--gld);font-weight:700;font-variant-numeric:tabular-nums;}
.kv-tag{
  position:absolute;padding:6px 12px;border-radius:999px;
  font-size:.68rem;font-weight:700;white-space:nowrap;box-shadow:0 12px 26px -14px var(--shadow-k);
}
.kv-tag--a{top:15%;right:-11%;background:linear-gradient(135deg,var(--gld-fill),var(--gld-fill2));color:var(--on-gold);}
.kv-tag--b{bottom:13%;left:-13%;background:var(--rose);color:#FFF6EE;}

/* ---------- section shell ---------- */
.kv-section{padding:64px 0;border-top:1px solid var(--ln);}
.kv-section--tight{padding:48px 0;}
.kv-kicker{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gld);font-weight:600;margin:0 0 11px;
}
.kv-section h2{font-size:clamp(1.55rem,2.7vw,2.1rem);margin-bottom:11px;}
.kv-lede{color:var(--mut);max-width:62ch;margin:0 0 32px;font-size:1rem;}
.kv-lede:last-child{margin-bottom:0;}
.kv-head{max-width:66ch;margin-bottom:32px;}
.kv-head .kv-lede{margin-bottom:0;}

/* A head with a mark beside it. The 66ch cap has to be released here and
   moved onto the copy column instead — left on the flex container it caps
   the text AND the mark together, and the mark gets squeezed to nothing. */
.kv-head--mark{
  max-width:none;
  display:flex;align-items:center;gap:36px;
  justify-content:space-between;
}
.kv-head--mark .kv-head-copy{max-width:66ch;min-width:0;}
.kv-mark{
  /* Monochrome in the page's own muted ink, not WhatsApp green: the section
     is about what the community has left behind, and a saturated green would
     be the loudest thing on a cream-and-maroon page. */
  flex:0 0 auto;width:104px;color:var(--dim);opacity:.72;
  /* decorative: it must never take pointer or selection focus away from copy */
  pointer-events:none;-webkit-user-select:none;user-select:none;
}
.kv-mark svg{width:100%;height:auto;display:block;}
@media (max-width:760px){
  /* below this the mark would steal width the heading needs, so it goes */
  .kv-head--mark{display:block;}
  .kv-mark{display:none;}
}

.kv-split{display:grid;grid-template-columns:.92fr 1.08fr;gap:44px;align-items:start;}
.kv-pullquote{
  font-size:1.3rem;line-height:1.36;font-weight:600;letter-spacing:-.022em;
  border-left:2px solid var(--rose);padding-left:22px;margin:0;
}
.kv-pullquote span{color:var(--gld);}

/* The quote is one short line, so the row's free space falls to its right —
   that is where the brand mark sits. The quote keeps its own left rule as the
   anchor; space-between pushes the mark out to the wrap's right edge. */
.kv-quoteline{display:flex;align-items:center;justify-content:space-between;gap:34px;}
.kv-quoteline .kv-pullquote{min-width:0;}
.kv-quote-logo{
  /* dark mark: this sits on the cream page ground, not the maroon bar */
  flex:0 0 auto;height:46px;width:auto;opacity:.92;
  -webkit-user-select:none;user-select:none;
}
@media (max-width:760px){
  /* side by side there is no width left for the quote, so the mark drops under
     it rather than being hidden — it is the payoff of the sentence above it */
  .kv-quoteline{display:block;}
  .kv-quote-logo{height:36px;margin-top:20px;}
}

/* ---------- cards ---------- */
.kv-grid{display:grid;gap:14px;}
.kv-grid--2{grid-template-columns:repeat(2,1fr);}
.kv-grid--3{grid-template-columns:repeat(3,1fr);}
.kv-grid--4{grid-template-columns:repeat(4,1fr);}

.kv-card{
  background:var(--pan);border-radius:13px;padding:24px;
  box-shadow:inset 0 0 0 1px var(--ln);
  transition:transform .24s var(--e),box-shadow .24s var(--e);
}
.kv-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px var(--ln2),0 22px 44px -28px var(--shadow-k);}
.kv-card h3{font-size:1.03rem;font-weight:600;margin-bottom:7px;}
.kv-card > p{font-size:.9rem;color:var(--mut);}
.kv-card--flat:hover{transform:none;}
.kv-card--gold{box-shadow:inset 0 0 0 1px var(--gld-ring);}

.kv-ico{
  width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--gld-soft),var(--rose-soft));
  color:var(--gld);margin-bottom:13px;
}
.kv-ico svg{width:17px;height:17px;}

.kv-meta{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gld);margin:0 0 9px;
}

/* ---------- lists ---------- */
.kv-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:9px;}
.kv-list li{
  position:relative;padding-left:20px;font-size:.89rem;color:var(--mut);
}
.kv-list li::before{
  content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;
  background:linear-gradient(135deg,var(--gld-fill),var(--gld-fill2));
}
.kv-list li b{color:var(--ink);font-weight:600;}
.kv-list--x li::before{background:var(--rose);opacity:.75;}

/* feature rows with a rule on top */
.kv-feats{display:grid;gap:14px;margin-top:16px;}
.kv-feats--2{grid-template-columns:1fr 1fr;}
.kv-feat{border-top:1px solid var(--ln2);padding-top:11px;transition:border-color .24s var(--e);}
.kv-feat:hover{border-top-color:var(--gld);}
.kv-feat h4{font-size:.9rem;font-weight:600;margin-bottom:4px;}
.kv-feat p{font-size:.83rem;color:var(--mut);line-height:1.5;margin:0;}

/* module / community tags */
.kv-taglist{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none;}
.kv-taglist li{
  font-family:var(--mono);font-size:.68rem;padding:4px 10px;border-radius:999px;
  background:var(--rai);box-shadow:inset 0 0 0 1px var(--ln);color:var(--mut);
  transition:box-shadow .2s var(--e),color .2s var(--e);
}
.kv-card:hover .kv-taglist li{box-shadow:inset 0 0 0 1px var(--gld-ring);color:var(--gld);}
.kv-taglabel{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin:18px 0 9px;
}

/* ---------- table ---------- */
.kv-table-wrap{
  border-radius:13px;overflow-x:auto;background:var(--pan);
  box-shadow:inset 0 0 0 1px var(--ln);
}
.kv-table{width:100%;border-collapse:collapse;min-width:620px;}
.kv-table th,.kv-table td{padding:14px 20px;text-align:left;font-size:.9rem;}
.kv-table thead th{
  background:var(--rai);font-family:var(--mono);font-size:.65rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dim);font-weight:600;
}
.kv-table tbody tr{border-top:1px solid var(--ln);transition:background .18s var(--e);}
.kv-table tbody tr:hover{background:var(--rai);}
.kv-table td strong{color:var(--ink);}
.kv-table .kv-num{
  font-family:var(--mono);font-size:.85rem;color:var(--gld);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.kv-table .kv-num small{color:var(--dim);}

/* ---------- pricing ---------- */
.kv-plans{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.kv-plans--1{grid-template-columns:minmax(0,560px);justify-content:center;}
.kv-plans--2{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;}
.kv-plans--3{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;}
.kv-plans--4{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;}
/* Lone card on the 2-col homepage grid; skipped when numbered plan grids are used. */
.kv-plans:not([class*="kv-plans--"]) .kv-plan:only-child,
.kv-plans:not(.kv-plans--1):not(.kv-plans--2):not(.kv-plans--3):not(.kv-plans--4) .kv-plan:only-child{
  grid-column:1 / -1;max-width:560px;margin-inline:auto;width:100%;
}
.kv-pricing-status{
  margin:0;padding:28px;text-align:center;color:var(--mut);font-size:.95rem;
  background:var(--pan);border-radius:15px;box-shadow:inset 0 0 0 1px var(--ln);
}
.kv-plan{
  background:var(--pan);border-radius:15px;padding:28px;
  box-shadow:inset 0 0 0 1px var(--ln);display:flex;flex-direction:column;
  position:relative;isolation:isolate;overflow:hidden;
  transition:transform .32s var(--e),box-shadow .32s var(--e),background .32s var(--e);
}
.kv-plans--4 .kv-plan{padding:22px 16px;}
.kv-plans--3 .kv-plan{padding:24px 18px;}
.kv-plan::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(145deg,rgba(223,150,24,.0),rgba(150,19,31,.0));
  transition:background .35s var(--e),opacity .35s var(--e);
  opacity:0;
}
.kv-plan > *{position:relative;z-index:1;}
.kv-plan:hover{
  transform:translateY(-10px) scale(1.015);
  box-shadow:
    inset 0 0 0 1px var(--gld-ring),
    0 22px 40px -24px var(--shadow-k),
    0 10px 28px -18px rgba(150,19,31,.22);
  background:#FFFEFA;
}
.kv-plan:hover::before{
  opacity:1;
  background:linear-gradient(160deg,rgba(223,150,24,.10),transparent 42%,rgba(150,19,31,.06));
}
.kv-plan:hover .kv-price-now{color:var(--rose);}
.kv-plan:hover .kv-price-was{color:var(--dim);}
.kv-plan--featured{box-shadow:inset 0 0 0 1.5px var(--rose);}
.kv-plan--featured:hover{
  transform:translateY(-12px) scale(1.02);
  box-shadow:
    inset 0 0 0 1.5px var(--rose),
    0 26px 48px -22px rgba(150,19,31,.38),
    0 12px 30px -16px rgba(223,150,24,.28);
}
.kv-plan--featured:hover .kv-badge--rose{
  transform:scale(1.05);
}
.kv-badge--rose{transition:transform .28s var(--e);}
.kv-plan .kv-btn{transition:transform .28s var(--e),box-shadow .28s var(--e),background .28s var(--e),color .28s var(--e);}
.kv-price{transition:color .28s var(--e);}
.kv-plan-head{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:5px;}
.kv-plan-head h3{font-size:1.3rem;transition:color .28s var(--e);}
.kv-plan:hover .kv-plan-head h3{color:var(--rose);}
.kv-plan-title--accent{color:var(--rose);}
.kv-badge{
  font-family:var(--mono);font-size:.63rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 9px;border-radius:999px;
  background:var(--gld-soft);color:var(--gld);box-shadow:inset 0 0 0 1px var(--gld-ring);
}
.kv-badge--rose{
  background:var(--rose);color:#fff;box-shadow:none;
}
.kv-plan-meta{font-family:var(--mono);font-size:.75rem;color:var(--dim);margin-bottom:16px;}
.kv-price{
  display:flex;flex-wrap:nowrap;align-items:flex-end;column-gap:8px;
  margin-bottom:16px;padding-top:2px;
  font-variant-numeric:tabular-nums;line-height:1;
  min-width:0;overflow:visible;
}
.kv-price-was,
.kv-price-now{
  display:inline-flex;align-items:flex-start;column-gap:1px;
  white-space:nowrap;flex:0 0 auto;line-height:1;
}
.kv-rupee{
  font-size:.48em;font-weight:600;line-height:1;
  position:relative;top:.12em;flex:0 0 auto;
}
.kv-price-num{
  font-weight:inherit;letter-spacing:-.04em;line-height:1;
}
.kv-price-was{
  font-size:1.45rem;font-weight:500;color:var(--dim);
  text-decoration:none;
}
.kv-price-was .kv-price-num{
  text-decoration:line-through;
  text-decoration-thickness:1.75px;
  text-decoration-color:currentColor;
}
.kv-price-now{
  font-size:2.1rem;font-weight:700;color:var(--ink);
  letter-spacing:-.04em;transition:color .28s var(--e);
}
.kv-price-suffix{
  font-size:.72rem;font-weight:500;letter-spacing:0;color:var(--dim);
  line-height:1;white-space:nowrap;flex:0 1 auto;min-width:0;
  padding-bottom:.28em;
}
.kv-plans--4 .kv-price{column-gap:6px;}
.kv-plans--4 .kv-price-was{font-size:1.4rem;}
.kv-plans--4 .kv-price-now{font-size:1.9rem;}
.kv-plans--4 .kv-price-suffix{font-size:.68rem;padding-bottom:.26em;}
.kv-plan-note{color:var(--mut);font-size:.88rem;margin-bottom:20px;}
.kv-sublabel{
  font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);margin:18px 0 11px;
}
.kv-plan .kv-btn{margin-top:auto;}
.kv-plan .kv-list{margin-bottom:22px;}
.kv-section--plans .kv-plan .kv-btn{margin-top:0;}
.kv-section--plans .kv-plan .kv-list{
  margin-bottom:0;flex:0 0 auto;align-content:start;
}

.kv-btn--muted{
  background:var(--rai);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ln);
}
.kv-btn--muted:hover{background:var(--ln);box-shadow:inset 0 0 0 1px var(--ln2);transform:translateY(-2px);}
.kv-plan .kv-btn--ghost,
.kv-section--plans .kv-btn--ghost{
  background:var(--pan);color:var(--rose);box-shadow:inset 0 0 0 1px var(--rose);
}
.kv-plan .kv-btn--ghost:hover,
.kv-section--plans .kv-btn--ghost:hover{
  background:var(--rose-soft);color:var(--rose);box-shadow:inset 0 0 0 1px var(--rose);
}

.kv-list--check{gap:2px;margin-top:8px;}
.kv-list--check li{
  padding-left:18px;line-height:1.3;
  display:flex;align-items:flex-start;gap:6px;
}
.kv-list--check li::before{
  width:5px;height:9px;border-radius:0;top:.4em;left:3px;
  background:none;border:solid var(--mint);border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.kv-list--check li::after{content:none;}
.kv-list--inline{
  display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:8px;
}
.kv-list--inline li{font-size:.82rem;}
.kv-feature-label{flex:1 1 auto;min-width:0;}
.kv-feature-info{
  position:relative;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;margin-top:.15em;border-radius:50%;
  background:var(--rai);color:var(--dim);cursor:help;
  box-shadow:inset 0 0 0 1px var(--ln);
}
.kv-feature-info-mark{
  font-family:var(--mono);font-size:.62rem;font-weight:700;line-height:1;
  font-style:normal;text-transform:lowercase;
}
.kv-feature-tip{
  /* Anchor right so tips grow left into the card (cards use overflow:hidden). */
  position:absolute;right:0;left:auto;bottom:calc(100% + 8px);transform:translateY(2px);
  width:max-content;max-width:min(220px,calc(100vw - 48px));padding:7px 10px;border-radius:8px;
  background:var(--ink);color:#FFFBF3;font-size:.72rem;font-weight:500;line-height:1.35;
  text-align:left;white-space:normal;pointer-events:none;z-index:20;
  opacity:0;visibility:hidden;
  transition:opacity .16s var(--e),visibility .16s var(--e),transform .16s var(--e);
  box-shadow:0 8px 18px -12px var(--shadow-k);
}
.kv-feature-tip::after{
  content:"";position:absolute;top:100%;right:4px;left:auto;transform:none;
  border:5px solid transparent;border-top-color:var(--ink);
}
.kv-feature-info:hover .kv-feature-tip,
.kv-feature-info:focus .kv-feature-tip,
.kv-feature-info:focus-visible .kv-feature-tip{
  opacity:1;visibility:visible;transform:translateY(0);
}
.kv-feature-info:focus{outline:none;}
.kv-feature-info:focus-visible{box-shadow:inset 0 0 0 1px var(--rose);}

.kv-hero-copy--center{text-align:center;max-width:720px;margin-inline:auto;}
.kv-hero-copy--center .kv-hero-sub{margin-inline:auto;}
/* Dussera responsive header — from ChatGPT package */
.kivana-dussera-banner,
.kivana-dussera-banner *{box-sizing:border-box;}
.kivana-dussera-banner{
  width:100%;margin:0;overflow:hidden;background:#520b1c;color:#fff;
}
.kivana-dussera-banner[hidden]{display:none !important;}
.kivana-dussera-banner__desktop{
  display:block;width:100%;height:auto;vertical-align:middle;
}
.kivana-dussera-banner__mobile{display:none;}
@media (max-width:700px){
  .kivana-dussera-banner__desktop{display:none;}
  .kivana-dussera-banner__mobile{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    position:relative;isolation:isolate;min-height:370px;padding:44px 22px;
    text-align:center;
    background:#520b1c url('../assets/dussera-banner-mobile.webp') center / cover no-repeat;
  }
  .kivana-dussera-banner__mobile::before{
    content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(60,0,18,.42),rgba(68,0,19,.20) 45%,rgba(40,0,15,.64));
  }
  .kivana-dussera-banner__brand{
    font:700 clamp(1.35rem,6vw,1.75rem)/1.2 Arial,Verdana,sans-serif;
    letter-spacing:.2px;margin:0 0 24px;
  }
  .kivana-dussera-banner__brand span{color:#f8be55;}
  .kivana-dussera-banner__title{
    font:700 clamp(1.65rem,7.8vw,2.5rem)/1.12 Georgia,serif;margin:0;max-width:520px;
    color:#ffde96;text-wrap:balance;text-shadow:0 2px 14px rgba(0,0,0,.65);
  }
  .kivana-dussera-banner__subtitle{
    font:600 clamp(1.2rem,5.3vw,1.7rem)/1.35 Verdana,Arial,sans-serif;
    margin:14px 0 0;max-width:500px;text-wrap:balance;text-shadow:0 2px 12px rgba(0,0,0,.8);
  }
  .kivana-dussera-banner__lamp{font-size:2rem;margin-top:20px;}
}
@media (prefers-reduced-motion:reduce){
  .kivana-dussera-banner *{animation:none !important;}
}
.kv-intro-offer{
  display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:8px;
  width:100%;box-sizing:border-box;color:var(--rose);margin:18px 0 0;line-height:1.2;text-align:center;
  padding:12px 22px;border-radius:20px;white-space:nowrap;
  background:linear-gradient(90deg,var(--rose-soft),rgba(223,150,24,.18),var(--rose-soft));
  background-size:200% 100%;
  box-shadow:inset 0 0 0 1px rgba(150,19,31,.18);
  animation:kv-offer-glow 2.8s ease-in-out infinite;
}
.kv-intro-offer__eyebrow{
  font-size:.95rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.kv-intro-offer__pop{display:inline-block;letter-spacing:0;flex:0 0 auto;}
.kv-intro-offer__pop--flip{transform:scaleX(-1);}
.kv-intro-offer__dot{opacity:.45;font-weight:700;}
.kv-intro-offer__headline{
  font-size:1.15rem;font-weight:800;letter-spacing:.04em;
}
.kv-intro-offer__sub{
  font-size:.95rem;font-weight:600;letter-spacing:.02em;
}
@media (max-width:720px){
  .kv-intro-offer{padding:10px 14px;gap:6px;border-radius:10px;}
  .kv-intro-offer__eyebrow{font-size:.8rem;letter-spacing:.06em;}
  .kv-intro-offer__headline{font-size:1rem;}
  .kv-intro-offer__sub{font-size:.85rem;}
}
@media (max-width:560px){
  .kv-intro-offer__sub,
  .kv-intro-offer__dot:nth-of-type(2){display:none;}
}
@keyframes kv-offer-glow{
  0%,100%{
    background-position:0% 50%;
    box-shadow:inset 0 0 0 1px rgba(150,19,31,.18),0 0 0 0 rgba(150,19,31,0);
  }
  50%{
    background-position:100% 50%;
    box-shadow:inset 0 0 0 1px rgba(150,19,31,.28),0 6px 22px -10px rgba(150,19,31,.35);
  }
}
.kv-billing{
  display:flex;width:fit-content;margin-inline:auto;padding:4px;border-radius:999px;background:var(--rai);
  box-shadow:inset 0 0 0 1px var(--ln);gap:2px;
}
.kv-billing-btn{
  appearance:none;border:0;cursor:pointer;font-family:var(--font);
  font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:10px 22px;border-radius:999px;background:transparent;color:var(--mut);
  transition:background .18s var(--e),color .18s var(--e);
}
.kv-billing-btn.is-active{
  background:var(--rose);color:#fff;
}
.kv-billing-save{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;margin:12px 0 0;font-size:.85rem;font-weight:600;color:var(--mint);
}
.kv-billing-save[hidden]{display:none !important;}

.kv-section--plans{padding-top:8px;}
.kv-pricing-addon-wrap{margin-top:18px;}
.kv-plan-addon{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  background:var(--pan);border-radius:15px;padding:22px 26px;
  box-shadow:inset 0 0 0 1px var(--ln);
  transition:transform .32s var(--e),box-shadow .32s var(--e),background .32s var(--e);
}
.kv-plan-addon:hover{
  transform:translateY(-6px);
  background:#FFFEFA;
  box-shadow:
    inset 0 0 0 1px var(--gld-ring),
    0 18px 36px -22px var(--shadow-k),
    0 8px 22px -14px rgba(150,19,31,.2);
}
.kv-plan-addon:hover .kv-plan-addon-icon{
  transform:scale(1.08) rotate(-6deg);
  box-shadow:0 10px 20px -10px rgba(150,19,31,.45);
}
.kv-plan-addon-icon{
  flex:0 0 auto;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--rose);color:#fff;
  transition:transform .32s var(--e),box-shadow .32s var(--e);
}
.kv-plan-addon .kv-btn{transition:transform .28s var(--e),box-shadow .28s var(--e);}
.kv-plan-addon-body{flex:1 1 240px;min-width:0;}
.kv-plan-addon-body h3{font-size:1.1rem;margin:0 0 4px;}
.kv-plan-addon-body p{font-size:.9rem;color:var(--mut);margin:0;}
.kv-plan-addon-desc{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 8px;
  line-height:1.45;
}
.kv-plan-addon-desc-lead{flex:0 1 auto;min-width:0;}
.kv-plan-addon-desc .kv-price--inline{
  display:inline-flex;flex-wrap:nowrap;align-items:flex-end;column-gap:8px;
  margin:0;vertical-align:baseline;padding-top:2px;
}
.kv-plan-addon-desc .kv-price-was{
  font-size:1.3rem;font-weight:500;color:var(--dim);
}
.kv-plan-addon-desc .kv-price-now{
  font-size:1.65rem;font-weight:700;color:var(--ink);letter-spacing:-.03em;
}
.kv-plan-addon-desc .kv-price-suffix{
  font-size:.78rem;font-weight:600;color:var(--ink);
  padding-bottom:.22em;
}
.kv-plan-addon:hover .kv-price-now{color:var(--rose);}
.kv-plan-addon:hover .kv-price-was{color:var(--dim);}
.kv-plan-addon .kv-btn{flex:0 0 auto;margin-left:auto;}

.kv-addon{background:var(--pan);border-radius:14px;padding:24px;box-shadow:inset 0 0 0 1px var(--ln);}
.kv-addon h3{font-size:1.1rem;margin-bottom:8px;}
.kv-addon p{font-size:.9rem;color:var(--mut);margin-bottom:14px;}
/* Currently unused on index.html — the add-on price tags were pulled while the
   figures are being settled, and the add-ons were moved onto the Free plan.
   Kept, not deleted: the markup goes back as
   <span class="kv-addon-price">…</span> after the closing </p> of the card. */
.kv-addon-price{
  display:inline-block;font-family:var(--mono);font-size:.78rem;color:var(--gld);
  padding:7px 12px;border-radius:8px;background:var(--gld-soft);
}
.kv-addon-note{font-family:var(--mono);font-size:.68rem;color:var(--dim);margin:12px 0 0;}

/* ---------- numbered steps ---------- */
.kv-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;}
.kv-steps--4{grid-template-columns:repeat(4,1fr);}
.kv-step{padding:0 22px;border-left:1px solid var(--ln);}
/* The card that opens a row has nothing to its left to be ruled off from.
   Which cards those are depends on the column count, so this is stated once
   per breakpoint and each statement is bounded on both sides — an unbounded
   rule here would outrank the narrower ones on specificity. */
@media (min-width:1001px){
  .kv-steps:not(.kv-steps--4) > .kv-step:nth-child(3n+1),
  .kv-steps--4 > .kv-step:nth-child(4n+1){padding-left:0;border-left:none;}
}
.kv-steps--rows{row-gap:34px;}
.kv-step-n{
  font-family:var(--mono);font-size:.85rem;color:var(--gld);font-weight:600;margin:0 0 9px;
}
.kv-step h3{font-size:1rem;font-weight:600;margin-bottom:6px;}
.kv-step p{font-size:.88rem;color:var(--mut);margin:0;}

/* ---------- cta band ---------- */
.kv-cta{
  margin:0 0 62px;border-radius:16px;padding:44px 34px;text-align:center;
  background:linear-gradient(135deg,var(--rose-soft),var(--gld-soft));
  box-shadow:inset 0 0 0 1px var(--ln);
}
.kv-cta h2{font-size:clamp(1.4rem,2.6vw,1.85rem);margin-bottom:11px;max-width:24ch;margin-inline:auto;}
.kv-cta p{color:var(--mut);margin-bottom:24px;max-width:52ch;margin-inline:auto;}
.kv-cta .kv-btn-row{justify-content:center;}

/* ---------- forms ---------- */
.kv-form-card{
  background:var(--pan);border-radius:15px;padding:32px;box-shadow:inset 0 0 0 1px var(--ln);
}
.kv-form-card h2{font-size:1.4rem;margin-bottom:9px;}
.kv-form-card > p{color:var(--mut);font-size:.94rem;margin-bottom:24px;}
.kv-form{display:flex;flex-direction:column;gap:17px;}
.kv-form-row{display:grid;grid-template-columns:1fr 1fr;gap:17px;}
.kv-field{display:flex;flex-direction:column;gap:7px;}
.kv-type-other-field[hidden]{display:none !important;}
.kv-field label{font-size:.84rem;font-weight:600;color:var(--ink);}
.kv-field input,.kv-field select,.kv-field textarea{
  font-family:var(--font);font-size:.95rem;color:var(--ink);width:100%;
  background:var(--rai);border:1px solid var(--ln);border-radius:9px;padding:12px 14px;
  resize:vertical;
  transition:border-color .2s var(--e),background .2s var(--e),box-shadow .2s var(--e);
}
.kv-field textarea{min-height:130px;}
.kv-field input::placeholder,.kv-field textarea::placeholder{color:var(--dim);}
.kv-field input:focus,.kv-field select:focus,.kv-field textarea:focus{
  outline:none;border-color:var(--gld);background:var(--pan);
  box-shadow:0 0 0 3px var(--gld-soft);
}
.kv-field select option{background:var(--pan);color:var(--ink);}

/* Inline validation. The browser's own "Please fill out this field" bubble is
   unstyleable, shows one field at a time and vanishes on click, so the forms
   carry novalidate and these messages take its place. */
.kv-field.kv-bad input,.kv-field.kv-bad select,.kv-field.kv-bad textarea{border-color:var(--err);}
.kv-field.kv-bad input:focus,.kv-field.kv-bad select:focus,.kv-field.kv-bad textarea:focus{
  box-shadow:0 0 0 3px var(--err-ring);
}
.kv-err{font-size:.78rem;color:var(--err);display:none;align-items:center;gap:6px;}
.kv-field.kv-bad .kv-err{display:flex;}
.kv-err::before{
  content:"!";flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;
  background:var(--err);color:#FFF6EE;font-size:.64rem;font-weight:700;line-height:1;
}
.kv-form .kv-btn{align-self:flex-start;}
.kv-form .kv-btn[disabled]{
  opacity:.72;cursor:not-allowed;transform:none;
  background:var(--rai);color:var(--mut);border-color:var(--ln2);
}

/* Modal phone + OTP verify (UI-only until backend lands) */
.kv-phone-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.kv-cc{
  position:relative;flex:0 0 auto;width:auto;min-width:84px;max-width:100px;
}
.kv-cc-toggle{
  width:100%;min-height:46px;
  display:inline-flex;align-items:center;justify-content:space-between;gap:4px;
  font-family:var(--font);font-size:.8rem;font-weight:600;color:var(--ink);
  background:var(--rai);border:1px solid var(--ln);border-radius:9px;padding:10px 8px;
  cursor:pointer;white-space:nowrap;
  transition:border-color .2s var(--e),background .2s var(--e),box-shadow .2s var(--e);
}
.kv-cc-toggle:focus{
  outline:none;border-color:var(--gld);background:var(--pan);
  box-shadow:0 0 0 3px var(--gld-soft);
}
.kv-cc-toggle svg{flex:0 0 auto;opacity:.7;}
.kv-cc-dropdown{
  position:absolute;top:calc(100% + 6px);left:0;z-index:20;
  width:min(280px,70vw);
  background:var(--pan);border:1px solid var(--ln2);border-radius:12px;
  box-shadow:0 18px 40px -18px var(--shadow-k);
  padding:10px;display:flex;flex-direction:column;gap:8px;
}
.kv-cc-dropdown[hidden]{display:none;}
.kv-cc-search{
  width:100%;font-family:var(--font);font-size:.88rem;color:var(--ink);
  background:var(--rai);border:1px solid var(--ln);border-radius:8px;padding:10px 12px;
}
.kv-cc-search:focus{
  outline:none;border-color:var(--gld);background:var(--pan);
  box-shadow:0 0 0 3px var(--gld-soft);
}
.kv-cc-list{
  list-style:none;margin:0;padding:0;max-height:220px;overflow-y:auto;
  display:flex;flex-direction:column;gap:2px;
}
.kv-cc-list li[hidden]{display:none;}
.kv-cc-option{
  width:100%;text-align:left;appearance:none;border:0;background:transparent;
  font-family:var(--font);font-size:.86rem;color:var(--ink);
  padding:9px 10px;border-radius:8px;cursor:pointer;
  display:flex;justify-content:space-between;gap:10px;
}
.kv-cc-option:hover,.kv-cc-option:focus{
  outline:none;background:var(--rai);
}
.kv-cc-option.is-selected{background:var(--gld-soft);font-weight:600;}
.kv-cc-option em{font-style:normal;color:var(--mut);flex:0 0 auto;}
.kv-phone-row input[type=tel]{
  flex:1 1 140px;min-width:0;width:auto;height:auto;
}
.kv-phone-row .kv-btn{
  flex:0 0 auto;align-self:center;white-space:nowrap;padding:10px 14px;min-height:46px;
}
.kv-field.kv-bad .kv-cc-toggle,
.kv-field.kv-bad .kv-phone-row input{border-color:var(--err);}
.kv-field.kv-phone-verify.kv-bad > .kv-err{display:none;}
.kv-field.kv-phone-verify.kv-bad > .kv-phone-err{display:flex;}
.kv-field.kv-phone-verify.kv-otp-bad > .kv-otp-err{display:flex;}
.kv-field.kv-phone-verify.kv-verify-needed > .kv-otp-err{display:none;}

.kv-otp-panel{display:flex;flex-direction:column;gap:10px;margin-top:4px;width:100%;max-width:100%;}
.kv-otp-panel[hidden]{display:none;}
.kv-otp-label{
  margin:0;font-size:.84rem;font-weight:600;color:var(--ink);
}
.kv-otp-label .kv-req,
.kv-field label .kv-req{color:var(--err);margin-left:2px;}
.kv-otp-hint{
  margin:0;font-size:.82rem;color:var(--mut);line-height:1.4;
}
.kv-otp-boxes-wrap{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  width:100%;max-width:100%;
}
.kv-otp-boxes{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;width:100%;max-width:100%;
}
.kv-field input.kv-otp-digit{
  width:100%;max-width:100%;min-width:0;height:48px;padding:0;text-align:center;
  font-family:var(--font);font-size:1.15rem;font-weight:600;color:var(--ink);
  background:var(--rai);border:1px solid transparent;border-radius:10px;
  box-sizing:border-box;
  transition:border-color .2s var(--e),background .2s var(--e),box-shadow .2s var(--e);
}
.kv-field input.kv-otp-digit:focus{
  outline:none;border-color:var(--gld-fill);background:var(--rai);
  box-shadow:0 0 0 2px var(--gld-soft);
}
.kv-field.kv-otp-bad input.kv-otp-digit{border-color:var(--err);}
.kv-otp-timer{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.84rem;font-weight:600;color:var(--mut);font-variant-numeric:tabular-nums;
  flex:0 0 auto;
}
.kv-otp-timer svg{flex:0 0 auto;}
.kv-otp-resend{
  margin:0;font-size:.84rem;color:var(--mut);
}
.kv-otp-resend-btn{
  appearance:none;border:0;background:none;padding:0;margin:0;
  font:inherit;font-weight:700;color:var(--gld);cursor:pointer;
}
.kv-otp-resend-btn:hover{color:var(--rose);}
.kv-otp-resend-btn:disabled{
  color:var(--dim);cursor:default;pointer-events:none;
}

.kv-phone-verified{
  font-size:.78rem;font-weight:600;color:var(--gld);display:none;
}
.kv-field.kv-phone-ok .kv-phone-verified{display:block;}
.kv-field.kv-phone-ok .kv-verify-btn{
  opacity:.72;pointer-events:none;cursor:default;
}
.kv-field.kv-phone-ok .kv-otp-panel{display:none;}

/* Toasts — success / error feedback for phone OTP flow */
.kv-toast-host{
  position:fixed;top:20px;right:20px;z-index:2000;
  display:flex;flex-direction:column;gap:10px;
  pointer-events:none;max-width:min(360px,calc(100vw - 32px));
}
.kv-toast{
  pointer-events:auto;
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;border-radius:12px;
  background:var(--pan);color:var(--ink);
  border:1px solid var(--ln2);
  box-shadow:0 18px 40px -18px var(--shadow-k),0 4px 12px rgba(42,18,22,.08);
  font-size:.9rem;font-weight:600;line-height:1.35;
  transform:translateX(18px);opacity:0;
  transition:transform .28s var(--e),opacity .28s var(--e);
}
.kv-toast.kv-in{transform:none;opacity:1;}
.kv-toast-icon{
  flex:0 0 auto;width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;line-height:1;color:#FFFBF3;
}
.kv-toast--success{border-color:rgba(46,125,50,.28);}
.kv-toast--success .kv-toast-icon{background:#2E7D32;}
.kv-toast--error{border-color:var(--err-ring);}
.kv-toast--error .kv-toast-icon{background:var(--err);}
.kv-toast-msg{flex:1 1 auto;padding-top:1px;}
@media (max-width:540px){
  .kv-toast-host{left:16px;right:16px;top:16px;max-width:none;}
}
.kv-form-alt{color:var(--mut);font-size:.86rem;margin:20px 0 0;}
.kv-form-alt a{color:var(--gld);font-weight:600;}
.kv-form-alt a:hover{color:var(--rose);}

.kv-details{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.kv-details li{padding:16px 0;border-top:1px solid var(--ln);}
.kv-details li:first-child{border-top:none;}
.kv-detail-label{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--gld);margin:0 0 5px;
}
.kv-details a,.kv-details p{font-size:1rem;font-weight:600;color:var(--ink);margin:0;}
.kv-details a:hover{color:var(--gld);}

/* ---------- modal ---------- */
.kv-modal-overlay{
  position:fixed;inset:0;z-index:1000;padding:24px;
  background:var(--scrim);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
}
.kv-modal-overlay[hidden]{display:none;}
.kv-modal-overlay{opacity:0;transition:opacity .25s var(--e);}
.kv-modal-overlay.kv-in{opacity:1;}
.kv-modal{
  position:relative;width:100%;max-width:600px;max-height:90vh;overflow-y:auto;
  background:var(--pan);border-radius:18px;padding:42px 36px;
  box-shadow:inset 0 0 0 1px var(--ln2),0 44px 100px -44px var(--shadow-k);
  transform:translateY(18px) scale(.985);opacity:0;
  transition:transform .34s var(--e),opacity .34s var(--e);
  scrollbar-width:none;           /* Firefox */
  -ms-overflow-style:none;        /* legacy Edge */
}
.kv-modal::-webkit-scrollbar{display:none;} /* Chrome, Safari, Edge */
.kv-modal-overlay.kv-in .kv-modal{transform:none;opacity:1;}
.kv-modal h2{font-size:1.55rem;margin-bottom:9px;}
.kv-modal-lede{color:var(--mut);font-size:.97rem;margin-bottom:28px;}
.kv-modal-close{
  position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;
  background:var(--rai);border:1px solid var(--ln);color:var(--mut);
  font-size:1.2rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:color .18s var(--e),border-color .18s var(--e);
}
.kv-modal-close:hover{color:var(--gld);border-color:var(--gld);}
body.kv-modal-open{overflow:hidden;}

/* ---------- footer ---------- */
.kv-footer{border-top:1px solid var(--ln);padding:40px 0 34px;}
.kv-footer-top{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  flex-wrap:wrap;margin-bottom:26px;
}
.kv-footer-top img{height:44px;width:auto;}
.kv-footer-expansion{
  font-family:var(--mono);font-size:.7rem;color:var(--dim);max-width:52ch;margin:0;
}
.kv-footer-links{
  display:flex;gap:18px;flex-wrap:wrap;list-style:none;margin:0;
  padding:20px 0 0;border-top:1px solid var(--ln);
}
.kv-footer-links a{font-size:.85rem;color:var(--mut);font-weight:500;}
.kv-footer-links a:hover{color:var(--gld);}
.kv-footer-bottom{margin:18px 0 0;font-size:.78rem;color:var(--dim);}

/* ---------- motion ---------- */
.kv-reveal{
  opacity:0;transform:translateY(15px);
  transition:opacity .62s var(--e) var(--d,0s),transform .62s var(--e) var(--d,0s);
}
.kv-reveal.in{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;}
  .kv-reveal{opacity:1 !important;transform:none !important;transition:none !important;}
  /* the modal fades in from a transform, so it needs the same release as the
     reveals — without this it would sit permanently at opacity 0 */
  .kv-modal-overlay,.kv-modal{opacity:1 !important;transform:none !important;transition:none !important;}
  .kv-plan,.kv-plan-addon,.kv-plan-addon-icon,.kv-plan .kv-btn,.kv-plan-addon .kv-btn,.kv-badge--rose{
    transition:none !important;
  }
  .kv-plan:hover,.kv-plan--featured:hover,.kv-plan-addon:hover{
    transform:none;
  }
}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .kv-grid--4{grid-template-columns:repeat(2,1fr);}
  .kv-steps,.kv-steps--4{grid-template-columns:repeat(2,1fr);row-gap:30px;}
}
/* two columns, so every odd card opens a row. Bounded below as well, because
   under 760px the steps stack and swap the left rule for a top one. */
@media (min-width:761px) and (max-width:1000px){
  .kv-steps > .kv-step:nth-child(odd){padding-left:0;border-left:none;}
}
@media (max-width:940px){
  .kv-menu-toggle{display:block;}
  .kv-nav-links{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--pan);border-bottom:1px solid var(--ln);
    max-height:0;overflow:hidden;opacity:0;padding:0 28px;pointer-events:none;
    transition:max-height .3s var(--e),opacity .3s var(--e),padding .3s var(--e);
  }
  .kv-topbar.open .kv-nav-links{max-height:430px;opacity:1;padding:8px 28px 18px;pointer-events:auto;}
  .kv-nav-links a{padding:12px 0;border-top:1px solid var(--ln);border-radius:0;}
  .kv-nav-links a:first-child{border-top:none;}
  .kv-hero-grid{grid-template-columns:1fr;gap:38px;}
  .kv-split{grid-template-columns:1fr;gap:30px;}
  .kv-grid--3{grid-template-columns:repeat(2,1fr);}
  .kv-plans--3,.kv-plans--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:760px){
  .kv-grid--2,.kv-grid--3,.kv-grid--4{grid-template-columns:1fr;}
  .kv-plans,.kv-plans--1,.kv-plans--2,.kv-plans--3,.kv-plans--4{grid-template-columns:1fr;}
  .kv-plan-addon{flex-direction:column;align-items:flex-start;}
  .kv-plan-addon .kv-btn{margin-left:0;width:100%;}
  .kv-steps,.kv-steps--4{grid-template-columns:1fr;row-gap:0;}
  .kv-step{padding:22px 0 0;border-left:none;border-top:1px solid var(--ln);margin-top:22px;}
  .kv-step:first-child{padding-top:0;border-top:none;margin-top:0;}
  .kv-feats--2{grid-template-columns:1fr;}
  .kv-form-row{grid-template-columns:1fr;}
  /* Country + phone stay on one row; Verify wraps full-width underneath */
  .kv-phone-row{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
  }
  .kv-cc{
    width:auto;
    flex:0 0 auto;
    max-width:96px;
  }
  .kv-cc-dropdown{
    width:min(280px,calc(100vw - 64px));
    left:0;
    right:auto;
  }
  .kv-phone-row input[type=tel]{
    flex:1 1 0;
    min-width:0;
    width:auto;
  }
  .kv-phone-row .kv-btn{
    flex:1 1 100%;
    width:100%;
  }
  .kv-otp-boxes{gap:6px;}
  .kv-field input.kv-otp-digit{height:44px;font-size:1.05rem;}
}
@media (max-width:540px){
  body{font-size:16px;}
  html{scroll-padding-top:76px;}
  .kv-wrap,.kv-topbar-inner{padding-left:18px;padding-right:18px;}
  .kv-topbar.open .kv-nav-links{padding-left:18px;padding-right:18px;}
  .kv-nav-links{padding-left:18px;padding-right:18px;}
  .kv-brand img{height:38px;}
  /* brand + CTA + hamburger is still a lot for a 360px bar, so the gaps and
     the hamburger come down a notch */
  .kv-nav{gap:10px;}
  .kv-menu-toggle{width:36px;height:36px;}
  .kv-btn{padding:10px 16px;font-size:.83rem;}
  .kv-cta{padding:32px 20px;}
  .kv-form-card,.kv-modal{padding:26px 22px;}
  .kv-modal h2{font-size:1.3rem;}
  .kv-tag--a{right:-2%;}
  .kv-tag--b{left:-2%;}
}