/*
 * km-glass.css — KiranaMitra marketing site: Liquid Glass layer (v5, Oct 2026)
 *
 * Material stack per surface (liquid-glass-design skill): backdrop -> translucent body -> window
 * reflection (upper-left) -> hairline rim -> lift shadow -> opaque content. One light, upper-left.
 * Implementation notes (honest labelling):
 *   - [IMPLEMENTATION] rim/window/lift are drawn with inset box-shadow + background-image so they never
 *     collide with a page's own ::before/::after.
 *   - Cards are "lite" glass (translucent body + rim + window + lift, NO backdrop-filter): the backdrops
 *     are already soft colour fields, so blur adds little and ~50 live blurs would stall low-end phones.
 *     Live backdrop-filter is reserved for the nav, phone bezels and hero stat strip.
 *   - No SVG edge-refraction (Chromium-only) — not used on this site.
 * Section/card light-vs-dark is detected at load by km-glass.js from each element's authored background,
 * so every page keeps its authored text colours and stays readable.
 */

:root{
  --kg-navy:#06142a; --kg-navy-2:#0a1f3d;
  --kg-emerald:#17a05a; --kg-mint:#52e39a; --kg-sky:#2f7fe0;

  /* glass on DARK ground */
  --kgd-body:rgba(255,255,255,.075);
  --kgd-body-hi:rgba(255,255,255,.12);
  --kgd-rim-a:rgba(255,255,255,.46);
  --kgd-rim-b:rgba(255,255,255,.14);
  --kgd-window:rgba(255,255,255,.17);
  --kgd-lift:0 16px 44px rgba(0,8,22,.42);

  /* glass on LIGHT ground */
  --kgl-body:rgba(255,255,255,.64);
  --kgl-rim-a:rgba(255,255,255,.98);
  --kgl-rim-b:rgba(255,255,255,.55);
  --kgl-window:rgba(255,255,255,.7);
  --kgl-lift:0 14px 40px rgba(12,40,64,.13);
  --kgl-edge:rgba(20,60,90,.10);
}

/* ───────── 1. section backdrops (colour fields, layered over each section's own authored background) ───────── */
.kg-sec{position:relative}
.kg-sec--dark.kg-bd{
  background-image:
    radial-gradient(60% 70% at 4% 8%,  rgba(33,110,214,.42), transparent 62%),
    radial-gradient(55% 65% at 96% 18%, rgba(24,170,98,.34), transparent 62%),
    radial-gradient(70% 60% at 70% 104%, rgba(30,190,110,.30), transparent 64%);
}
.kg-sec--light.kg-bd{
  background-image:
    radial-gradient(60% 70% at 2% 0%,   rgba(125,185,255,.42), transparent 62%),
    radial-gradient(55% 60% at 98% 12%, rgba(130,225,170,.38), transparent 62%),
    radial-gradient(70% 60% at 62% 106%, rgba(120,215,165,.32), transparent 64%);
}
/* hero / CTA bands: the app's own wave art as the backdrop */
.kg-has-wave{isolation:isolate;overflow:hidden}
.kg-wave{position:absolute;inset:0;z-index:-1;pointer-events:none;background-size:cover;background-repeat:no-repeat;
  background-position:50% 100%;opacity:.95;
  -webkit-mask-image:linear-gradient(#000 74%,transparent);mask-image:linear-gradient(#000 74%,transparent)}
.kg-wave--dark{background-image:linear-gradient(180deg,rgba(4,14,32,.66),rgba(4,14,32,.34) 58%,rgba(4,14,32,.10)),url("assets/bg/km-dark-wave.webp")}
.kg-wave--light{background-image:url("assets/bg/km-light-wave.webp")}

/* ───────── 2. glass surfaces (added by km-glass.js to cards / panels / callouts) ───────── */
.kg-gl{
  background-image:radial-gradient(120% 90% at 20% 0%,var(--kg-window),transparent 46%) !important;
  backdrop-filter:none;
}
.kg-gl--dark{
  --kg-window:var(--kgd-window);
  background-color:var(--kgd-body) !important;
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:inset 1px 1px 0 var(--kgd-rim-a),inset -1px -1px 0 var(--kgd-rim-b),var(--kgd-lift) !important;
}
.kg-gl--light{
  --kg-window:var(--kgl-window);
  background-color:var(--kgl-body) !important;
  border-color:var(--kgl-edge) !important;
  box-shadow:inset 1px 1px 0 var(--kgl-rim-a),inset -1px -1px 0 var(--kgl-rim-b),var(--kgl-lift) !important;
}
/* a light card sitting on a dark section: denser body so its dark text keeps >= 4.5:1 on the worst patch */
.kg-gl--light.kg-on-dark{background-color:rgba(255,255,255,.90) !important}
/* a dark card sitting on a light section */
.kg-gl--dark.kg-on-light{background-color:rgba(8,26,50,.80) !important}
@media (hover:hover){
  .kg-gl{transition:transform .26s cubic-bezier(.23,1,.32,1),box-shadow .26s ease}
  .kg-gl:hover{transform:translateY(-2px)}
}

/* ───────── 3. nav — a real glass bar ───────── */
.nav.scrolled,.nav--scrolled{
  background:rgba(7,22,44,.50) !important;
  -webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.14),0 10px 30px rgba(0,8,22,.28) !important;
}

/* ───────── 4. phone bezels — glass, app UI inside ───────── */
.phone-frame,.screen-phone,.bphone,.kg-phone{
  background:linear-gradient(150deg,rgba(255,255,255,.30),rgba(255,255,255,.07) 55%,rgba(255,255,255,.16)) !important;
  border:1px solid rgba(255,255,255,.34) !important;
  -webkit-backdrop-filter:blur(16px) saturate(1.6);backdrop-filter:blur(16px) saturate(1.6);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.6),inset -1px -1px 0 rgba(255,255,255,.18),
             0 30px 70px rgba(0,10,30,.45),0 0 60px rgba(60,220,140,.14) !important;
}
.phone-screen,.screen-inner,.bphone__screen{background:var(--kg-navy) !important}
.phone-screen img,.screen-inner img,.slide-show__img{object-fit:cover;object-position:top center;width:100%;height:100%}

/* ───────── 5. buttons — glass pills / lit primaries ───────── */
.nav__cta,.btn-playstore,.btn-cta-play,.cta-btn,.btn-primary,.btn-white,.footer__cta,.download-btn,
.form-submit,.stickybar__cta,.btn.primary{
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.55),inset -1px -1px 0 rgba(255,255,255,.14),0 10px 26px rgba(0,10,30,.30) !important;
}
.btn-secondary,.btn-outline,.btn-watch,.btn.ghost,.trust-chip,.pay-pill,.offline-pill,.trust-pill,.icp-chip,.example-chip,.biz-chip{
  background-color:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.26) !important;
  -webkit-backdrop-filter:blur(10px) saturate(1.5);backdrop-filter:blur(10px) saturate(1.5);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.35),0 6px 18px rgba(0,10,30,.18);
}

/* ───────── 6. footer ───────── */
.footer.kg-sec--dark{background-image:
  radial-gradient(50% 90% at 0% 0%,rgba(33,110,214,.30),transparent 62%),
  radial-gradient(50% 90% at 100% 100%,rgba(24,170,98,.28),transparent 62%)}

/* ───────── 7. accessibility + graceful degradation ───────── */
@media (prefers-reduced-transparency:reduce){
  .nav.scrolled,.nav--scrolled,.phone-frame,.screen-phone,.bphone,.kg-phone,.btn-secondary,.btn-outline,.trust-chip,.pay-pill{
    -webkit-backdrop-filter:none;backdrop-filter:none}
  .kg-gl--dark{background-color:rgba(12,34,62,.94) !important}
  .kg-gl--light{background-color:rgba(255,255,255,.96) !important}
  .nav.scrolled{background:rgba(7,22,44,.97) !important}
}
@media (prefers-reduced-motion:reduce){.kg-gl,.kg-gl:hover{transition:none;transform:none}}
@media (forced-colors:active){.kg-gl{background-image:none !important;box-shadow:none !important;border:1px solid CanvasText !important}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav.scrolled{background:rgba(7,22,44,.96) !important}
}

/* ───────── 8. phone mockups — taller (+10%) and thinner (−5%) than v5.0 ─────────
   Screens are 540×1020 and cannot be stretched or side-cropped, so the frame is now ~9:19.7 (a modern phone) and
   the screenshot sits at the top at its natural proportions; the last 18% fades into the app's own navy→green
   ground, as if the screen continues below — the same bleed-off the Play Store posters use. */
:root{--kg-screen-ar:451/1000}
.phone-screen,.screen-inner,.bphone__screen,.kg-device__screen{
  aspect-ratio:var(--kg-screen-ar) !important;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#06142a 0%,#07283a 58%,#0a4a35 100%) !important}
.phone-screen.kg-lightscreen,.screen-inner.kg-lightscreen,.bphone__screen.kg-lightscreen,.kg-device__screen.kg-lightscreen{
  background:linear-gradient(180deg,#eef7ff 0%,#e1f4ea 100%) !important}
.phone-screen img,.screen-inner img,.slide-show__img,.bphone__screen img,.kg-device__screen img{
  position:absolute !important;inset:0 0 auto 0 !important;width:100% !important;height:auto !important;
  aspect-ratio:540/1020;object-fit:fill !important;
  -webkit-mask-image:linear-gradient(180deg,#000 78%,transparent 100%);mask-image:linear-gradient(180deg,#000 78%,transparent 100%)}
/* widths: −5% on every mockup (heights follow from the aspect ratio: +10% overall) */
.phone-float .phone-frame{width:266px !important}                      /* home hero      was 280 */
html[data-kgp="early-access"] .phone-frame{width:247px !important}      /* early access   was 260 */
.bphone{width:218px !important}                                         /* for business   was 230 */
.screen-card{flex-basis:190px !important}                               /* home carousel  was 200 */
html[data-kgp="install"] .screen-card{flex-basis:157px !important}      /* install        was 165 */
.kg-device{width:199px;max-width:100%}                                       /* guides         was 210 */

/* ───────── 9. device frame for pages that had hand-drawn app illustrations (how-to, user guide) ───────── */
.kg-device{margin:0 auto;padding:8px;border-radius:32px}
.kg-device__screen{border-radius:24px}


.kg-figure{margin:22px auto;text-align:center}
.kg-figure figcaption{margin-top:12px;font-size:13px;line-height:1.45;color:inherit;opacity:.72}

/* the glass bezel needs its own edge on LIGHT sections (white-on-white would vanish) */
.kg-sec--light .kg-phone,.kg-sec--light .kg-device,.kg-sec--light .screen-phone{
  background:linear-gradient(150deg,rgba(255,255,255,.85),rgba(255,255,255,.35)) !important;
  border:1px solid rgba(20,60,90,.18) !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.95),inset -1px -1px 0 rgba(255,255,255,.5),0 26px 56px rgba(12,40,64,.22) !important;
}
/* nav links: never wrap the labels (the language switcher added a button to the row) */
.nav__link{white-space:nowrap}
@media (max-width:1280px){.nav__links{gap:14px !important}.nav__link{font-size:13px}}

/* nav: the bar now carries 9 links + language switcher + CTA — give it room instead of wrapping/overlapping */
.nav__inner{max-width:min(1360px,100%) !important}
.nav__cta,.nav-cta{white-space:nowrap}
.nav.scrolled,.nav--scrolled{background:rgba(7,22,44,.80) !important}
@media (max-width:1180px){.nav__links{gap:10px !important}.nav__link{font-size:12px}}

/* language switcher in the nav: the bar is always dark glass or sits over a dark hero — keep it light-on-dark */
.nav .km-langsw__btn,.nav .km-langsw--onlight .km-langsw__btn{
  color:#fff !important;background:rgba(255,255,255,.10) !important;border-color:rgba(255,255,255,.30) !important;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.32)}

/* small mobile fixes found while verifying at 375px (both pre-date this layer) */
@media (max-width:900px){.guide-layout{grid-template-columns:minmax(0,1fr) !important}.guide-toc{min-width:0;max-width:100%}}
.legal-content{overflow-wrap:anywhere}

/* ───────── 10. screens carousel — phone-first (home + install) ───────── */
.section-title,.screens-header .section-title{text-wrap:balance}
.kg-dots{display:none;justify-content:center;gap:8px;margin:2px 0 6px}
.kg-dots.kg-on{display:flex}
.kg-dot{width:8px;height:8px;padding:0;border:0;border-radius:99px;cursor:pointer;background:rgba(20,50,80,.26);
  transition:width .25s cubic-bezier(.23,1,.32,1),background .25s}
.kg-sec--dark .kg-dot{background:rgba(255,255,255,.34)}
.kg-dot[aria-current="true"]{width:26px;background:var(--kg-emerald)}
.kg-dot:focus-visible{outline:2px solid var(--kg-emerald);outline-offset:3px}
@media (max-width:640px){
  /* one readable phone at a time, centred, with the next one peeking in */
  .screens-scroll{gap:16px !important;
    padding:14px calc((100vw - min(68.4vw,266px))/2) 22px !important;
    scroll-padding-inline:calc((100vw - min(68.4vw,266px))/2)}
  .screen-card{flex:0 0 min(68.4vw,266px) !important}
  .screen-cap__name,.screen-label{font-size:16px}
  .screen-cap__desc{font-size:13.5px;line-height:1.45}
  .section-screens .screens-header{padding-inline:20px}
  .section-screens .section-title{font-size:clamp(26px,7.6vw,32px);line-height:1.12}
}