/* ==========================================================================
   AquaKhata — midnight and champagne
   --------------------------------------------------------------------------
   Loaded after styles.css on every screen. The page changes register:
   midnight and champagne where it was aqua and white, a serif for the
   headings, hairlines instead of shadows, and more air between things.
   The aqua stays as the brand's own colour in the logo and the product
   screenshots; gold is the accent everywhere else.
   It began as the phone edition (26 Oct 2026) and went to every screen the
   same day at the owner's word. Blocks marked max-width: 760px are the
   phone's own layout; the min-width: 761px block at the end sizes the
   computer's.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&display=swap");

@media all {

  :root {
    --lx-night: #051d2a;
    --lx-night-2: #072233;
    --lx-night-3: #0e3b4f;
    --lx-ivory: #f7f3ec;
    --lx-pearl: #efe9df;
    --lx-paper: #fffdf9;
    --lx-ink: #16212c;
    --lx-ink-2: #4b5560;
    --lx-ink-3: #6b737b;
    --lx-gold: #c9a55e;
    --lx-gold-hi: #ead39c;
    --lx-gold-ink: #85652b;           /* gold that reads on ivory: 5.0:1 */
    --lx-line: rgba(133, 101, 43, 0.22);
    --lx-line-dark: rgba(234, 211, 156, 0.18);
    --lx-serif: "Cormorant Garamond", "Noto Serif Telugu", Georgia, serif;
    --lx-grad-gold: linear-gradient(135deg, #f1dca8 0%, #c9a55e 48%, #a8853f 100%);
    /* the same gold, deep enough to read on ivory */
    --lx-grad-gold-deep: linear-gradient(135deg, #a07c37 0%, #85652b 55%, #6a4f1f 100%);

    /* the old tokens, re-pointed, so the 4,000 lines underneath follow */
    --paper: var(--lx-paper);
    --paper-2: var(--lx-ivory);
    --paper-3: var(--lx-pearl);
    --line: var(--lx-line);
    --ink-900: var(--lx-ink);
    --ink-700: #2b3640;
    --ink-500: var(--lx-ink-2);
    --ink-400: var(--lx-ink-3);
    --shadow-sm: 0 1px 2px rgba(22, 33, 44, 0.05);
    --shadow-md: 0 14px 34px rgba(22, 33, 44, 0.08);
    --shadow-lg: 0 24px 60px rgba(22, 33, 44, 0.12);
    --shadow-glow: 0 10px 30px rgba(168, 133, 63, 0.28);
    --radius: 18px;

    /* the brand's aqua becomes champagne for every accent on the page … */
    --aqua-900: #051d2a;
    --aqua-800: #072233;
    --aqua-700: #6e5322;
    --aqua-600: #85652b;
    --aqua-500: #a8853f;
    --aqua-400: #c9a55e;
    --aqua-300: #dcc28a;
    --aqua-200: #ead39c;
    --aqua-100: #f3ead6;
    --teal-500: #85652b;
    --grad-brand: var(--lx-grad-gold-deep);
    --grad-hero: linear-gradient(180deg, #051d2a 0%, #0c3547 100%);
  }

  /* … except inside the pictures of the product, which show the real app
     in its real colours */
  .hv-stage, .iph, .panel, .split-media, .bill-flow, .shot {
    --aqua-900: #062a3f; --aqua-800: #083a54; --aqua-700: #0a4c6e; --aqua-600: #0e6b93;
    --aqua-500: #0891b2; --aqua-400: #06b6d4; --aqua-300: #22d3ee; --aqua-200: #67e8f9;
    --aqua-100: #cffafe; --teal-500: #0d9488;
    --paper-2: #f4fafc; --paper-3: #eaf6f9; --line: #d8ebf0;
    --grad-brand: linear-gradient(120deg, #0891b2 0%, #06b6d4 55%, #22d3ee 100%);
  }
  .panel-body, .panel-head { background: #fff; }

  body { background: var(--lx-ivory); color: var(--ink-700); font-size: 16.5px; letter-spacing: 0.002em; }
  ::selection { background: var(--lx-gold-hi); color: var(--lx-ink); }

  /* ---------- type ---------- */
  h1, h2, h3 {
    font-family: var(--lx-serif);
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.08;
  }
  h2 { font-size: 2.15rem; }
  h3 { font-size: 1.45rem; line-height: 1.15; }
  html[lang="te"] h1, html[lang="te"] h2, html[lang="te"] h3 {
    font-family: "Noto Serif Telugu", var(--lx-serif);
    font-weight: 600; line-height: 1.4; letter-spacing: 0;
  }
  html[lang="te"] h2 { font-size: 1.62rem; }
  html[lang="te"] h3 { font-size: 1.16rem; }

  /* gradient text in aqua becomes gold */
  .hl, h1 .hl, h2 .hl {
    background: var(--lx-grad-gold-deep) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }
  /* on night the light gold */
  .hero .hl, .hero-v2 .hv-title .hl, .ai-band .hl, .cta .hl, .lead-sec .hl, .site-footer .hl {
    background: var(--lx-grad-gold) !important;
    -webkit-background-clip: text !important; background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
  }

  .te-h2, .card .te-sub, .spec-card .te-sub { color: var(--lx-gold-ink) !important; }
  .te-sub { color: var(--lx-ink-3); }

  /* the eyebrow: no pill, small caps between two hairlines */
  .eyebrow {
    background: none; padding: 0; border-radius: 0;
    color: var(--lx-gold-ink);
    font-size: 11px; letter-spacing: 0.28em; font-weight: 700;
    gap: 12px; margin-bottom: 16px;
  }
  .eyebrow::before, .eyebrow::after {
    content: ""; width: 22px; height: 1px; background: currentColor; opacity: 0.55;
  }
  .section-head { margin-bottom: 40px; }
  .section-head p { font-size: 1rem; line-height: 1.7; }

  /* ---------- rhythm ---------- */
  .section { padding: 76px 0; }
  .section-tight { padding: 54px 0; }
  .bg-paper2 { background: var(--lx-paper); }
  .bg-paper3 { background: var(--lx-pearl); }
  .container { padding-left: 22px; padding-right: 22px; }

  /* ---------- the bar above the header ---------- */
  .topbar-call {
    background: var(--lx-night);
    border-bottom: 1px solid var(--lx-line-dark);
    color: var(--lx-gold-hi);
  }
  .tb-in { min-height: 34px; }
  .tb-phone { color: var(--lx-gold-hi); letter-spacing: 0.12em; }
  .tb-phone b { font-family: var(--lx-serif); font-size: 1.05rem; font-weight: 600; }
  .tb-phone i {
    background: transparent; border: 1px solid var(--lx-line-dark); color: var(--lx-gold);
    border-radius: 50%;
  }

  /* ---------- header: midnight glass ---------- */
  .site-header {
    background: rgba(5, 29, 42, 0.86) !important;
    -webkit-backdrop-filter: saturate(140%) blur(16px);
    backdrop-filter: saturate(140%) blur(16px);
    border-bottom: 1px solid var(--lx-line-dark) !important;
    box-shadow: none !important;
  }
  /* the word mark is the footer's, unchanged: Sora 800, white and champagne
     (26 Oct 2026, the owner) — no serif, no gradient, no pan */
  .site-header .brand-name { color: #fff; font-family: var(--font-display, "Sora"), "Sora", Inter, system-ui, sans-serif; font-weight: 800; letter-spacing: -0.02em; }
  .site-header .brand-name b {
    background: none !important; -webkit-text-fill-color: #ead39c; color: #ead39c;
    animation: none !important; font-weight: 800;
  }
  .site-header .brand-tag { color: rgba(234, 211, 156, 0.72); letter-spacing: 0.06em; }
  .site-header .logo-badge { box-shadow: 0 0 0 1px rgba(234, 211, 156, 0.55), 0 6px 18px rgba(0,0,0,0.35); }
  .nav-toggle span { background: var(--lx-gold-hi); height: 1.5px; }
  .lang-toggle {
    background: transparent !important; color: var(--lx-gold-hi) !important;
    border: 1px solid var(--lx-line-dark) !important; box-shadow: none !important;
  }
  .lang-toggle svg { color: var(--lx-gold) !important; }

  /* the open menu */
  .site-header.open .nav-links,
  .site-header.open .nav-cta {
    background: var(--lx-night) !important;
    border-color: var(--lx-line-dark) !important;
    box-shadow: 0 30px 50px rgba(0, 0, 0, 0.45) !important;
  }
  .site-header.open .nav-links a {
    color: #efe6d4 !important; font-family: var(--lx-serif); font-size: 1.35rem; font-weight: 500;
    border-bottom: 1px solid var(--lx-line-dark); border-radius: 0; background: none !important;
  }
  .site-header.open .nav-links a.active { color: var(--lx-gold-hi) !important; }
  /* "Shop Login", not "Login" (owner, 27 Oct): a visitor has to see at a
     glance that this door is for shops already on AquaKhata. A gold-outline
     pill, a size up, so it reads as a button beside Request Demo rather than
     a menu word. */
  .nav-login {
    color: var(--lx-gold-hi) !important;
    font-size: 1.05rem; font-weight: 700; letter-spacing: 0.02em;
    padding: 12px 22px; border-radius: 999px;
    border: 1.5px solid rgba(234, 211, 156, 0.55);
    gap: 8px; white-space: nowrap;
    transition: background 0.2s, border-color 0.2s;
  }
  .nav-login:hover { background: rgba(234, 211, 156, 0.10); border-color: var(--lx-gold-hi); }
  .nav-login::after { display: none !important; }
  .nav-login .btn-ico svg { width: 18px; height: 18px; }
  html[lang="te"] .nav-login { letter-spacing: 0; }

  /* ---------- buttons ---------- */
  .btn {
    border-radius: 999px; font-weight: 600; letter-spacing: 0.04em;
    padding: 15px 28px;
  }
  .btn-primary {
    background: var(--lx-grad-gold) !important;
    color: #1b1408 !important;
    box-shadow: 0 10px 28px rgba(168, 133, 63, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
    border: 0 !important;
  }
  .btn-primary svg { color: #1b1408 !important; }
  .btn-outline, .btn-line {
    background: transparent !important;
    color: var(--lx-ink) !important;
    border: 1px solid rgba(22, 33, 44, 0.35) !important;
    box-shadow: none !important;
  }
  .btn-light { background: var(--lx-paper) !important; color: var(--lx-ink) !important; }
  .btn-ghost { border: 1px solid rgba(234, 211, 156, 0.45) !important; color: #f4ead6 !important; background: transparent !important; }

  /* ---------- the home hero: night ---------- */
  .hero-v2 {
    background:
      radial-gradient(120% 60% at 85% 0%, rgba(201, 165, 94, 0.20) 0%, transparent 55%),
      radial-gradient(90% 50% at 0% 70%, rgba(14, 107, 147, 0.22) 0%, transparent 60%),
      linear-gradient(180deg, #051d2a 0%, #082838 55%, #0c3547 100%) !important;
    color: #efe6d4;
    padding-top: 44px; padding-bottom: 46px;
  }
  .hv-wash { display: none; }
  .hv-badge {
    background: transparent; color: var(--lx-gold-hi);
    border: 1px solid var(--lx-line-dark); box-shadow: none;
    letter-spacing: 0.06em; font-weight: 600;
  }
  .hv-badge i { background: var(--lx-grad-gold); color: #1b1408; }
  .hero-v2 .hv-title {
    color: #f6efe1;
    font-family: var(--lx-serif); font-weight: 600;
    font-size: 2.55rem; line-height: 1.04; letter-spacing: -0.01em;
    margin-top: 22px;
  }
  html[lang="te"] .hero-v2 .hv-title { font-family: "Noto Serif Telugu", var(--lx-serif); font-size: 1.85rem; line-height: 1.38; }
  .hero-v2 .te-sub, .hero-v2 .te-h2 { color: rgba(234, 211, 156, 0.78) !important; }
  .hv-lead { color: rgba(239, 230, 212, 0.74); font-size: 1rem; line-height: 1.7; }
  .hv-strong { color: var(--lx-gold-hi); font-family: var(--lx-serif); font-size: 1.32rem; font-weight: 600; line-height: 1.3; }
  .hv-ticks li { color: rgba(239, 230, 212, 0.8); }
  .hv-ticks i { color: var(--lx-gold); }
  .hero-v2 .btn-line, .hero-v2 .btn-outline {
    color: #f4ead6 !important; border-color: rgba(234, 211, 156, 0.5) !important;
  }
  .hero-v2 .btn-line svg, .hero-v2 .btn-outline svg { color: var(--lx-gold) !important; }

  /* the title carried its own navy gradient, clipped to the text */
  .hero-v2 .hv-title { background: none !important; -webkit-text-fill-color: #f6efe1; }
  .hero-v2 .hv-title .hl { animation: none; }

  /* store chips and the small lines around them, on night — the copy
     column only, so the product screens on the right keep their own ink */
  .hv-copy .chip-store {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--lx-line-dark) !important;
    color: #f4ead6 !important; box-shadow: none !important;
  }
  .hv-copy .chip-store .cs-top { color: rgba(234, 211, 156, 0.7) !important; }
  .hv-copy .chip-store .cs-name { color: #f6efe1 !important; }
  .hv-copy .chip-store .cs-ico { border: 0 !important; color: var(--lx-gold-hi) !important; }
  .hv-copy .hv-dl { color: var(--lx-gold-hi); letter-spacing: 0.24em; font-size: 0.72rem; }
  .hv-copy .store-note { color: rgba(239, 230, 212, 0.55); }
  .hv-copy .te-sub { color: rgba(234, 211, 156, 0.7) !important; }

  /* the four promises under the machine: night glass, gold marks */
  .hv-strip {
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid var(--lx-line-dark) !important;
    box-shadow: none !important;
  }
  .hv-strip::after { display: none; }
  .hv-item i { background: transparent !important; border: 1px solid var(--lx-line-dark) !important; color: var(--lx-gold-hi) !important; border-radius: 50% !important; }
  .hv-item b { color: #f4ead6 !important; font-family: var(--lx-serif); font-size: 1.05rem; font-weight: 600; }
  .hv-item small { color: rgba(239, 230, 212, 0.6) !important; }
  .hv-item .te-sub { color: rgba(234, 211, 156, 0.72) !important; }
  .hv-sea { opacity: 0.35; }

  /* the product shots keep their own light — framed in gold instead of glow */
  .hv-bezel { box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(234, 211, 156, 0.25) !important; }

  /* ---------- the other pages' heroes (already dark) ---------- */
  .hero:not(.hero-v2), .page-hero {
    background:
      radial-gradient(120% 70% at 90% 0%, rgba(201, 165, 94, 0.18) 0%, transparent 55%),
      linear-gradient(180deg, #051d2a 0%, #0c3547 100%) !important;
  }
  .hero:not(.hero-v2) h1, .page-hero h1 { color: #f6efe1; font-size: 2.4rem; }
  .hero:not(.hero-v2) p, .page-hero p { color: rgba(239, 230, 212, 0.74); }
  .hero .eyebrow, .page-hero .eyebrow { color: var(--lx-gold-hi); }

  /* ---------- cards: paper, a gold hairline, no lift ---------- */
  .card, .spec-card, .stat-card, .panel, .faq-item {
    background: var(--lx-paper) !important;
    border: 1px solid var(--lx-line) !important;
    border-radius: 20px !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 18px 40px -26px rgba(22, 33, 44, 0.25) !important;
  }
  .card:hover { transform: none; }
  .card { padding: 30px 26px; }
  .card .ico, .spec-ic, .st-ic, .cs-ico {
    background: transparent !important;
    border: 1px solid var(--lx-line) !important;
    color: var(--lx-gold-ink) !important;
    border-radius: 50% !important;
  }
  .card h3 { font-size: 1.5rem; }
  .check-list li::before, .check-list li svg { color: var(--lx-gold-ink) !important; }

  .tag, .chip {
    background: transparent !important;
    border: 1px solid var(--lx-line) !important;
    color: var(--lx-gold-ink) !important;
    letter-spacing: 0.04em;
  }

  /* ---------- FAQ ---------- */
  .faq-q { font-family: var(--lx-serif); font-size: 1.25rem; font-weight: 600; color: var(--lx-ink); }
  html[lang="te"] .faq-q { font-family: "Noto Serif Telugu", var(--lx-serif); font-size: 1rem; }
  .faq-q .chev, .faq-q svg { color: var(--lx-gold-ink) !important; }

  /* ---------- dark bands inside the page ---------- */
  .ai-band, .cta {
    background:
      radial-gradient(100% 70% at 100% 0%, rgba(201, 165, 94, 0.16) 0%, transparent 60%),
      linear-gradient(180deg, #082838, #051d2a) !important;
  }
  .ai-band h2, .cta h2 { color: #f6efe1 !important; }
  .ai-band p, .cta p { color: rgba(239, 230, 212, 0.74) !important; }
  /* the call-back card stays paper on ivory */
  .lead-sec { background: var(--lx-pearl) !important; }

  /* ---------- footer ---------- */
  .site-footer {
    background: var(--lx-night) !important;
    border-top: 1px solid var(--lx-line-dark);
    color: rgba(239, 230, 212, 0.62);
  }
  .site-footer h4, .site-footer h5 { color: var(--lx-gold-hi); font-family: var(--lx-serif); font-weight: 600; letter-spacing: 0.04em; }
  .site-footer a { color: rgba(239, 230, 212, 0.78); }
  .site-footer .brand b { color: var(--lx-gold-hi) !important; }

  /* ---------- the floating WhatsApp button wears a gold ring ---------- */
  .wa-float { box-shadow: 0 0 0 2px rgba(234, 211, 156, 0.85), 0 14px 30px rgba(0, 0, 0, 0.35) !important; }
  .wa-float::before { display: none; }

  /* links in running text */
  main a:not(.btn), .section p a { color: var(--lx-gold-ink); text-decoration-color: var(--lx-line); }
}

/* ---------- photographs of the real app, phone edition only ---------- */
@media (max-width: 760px) {
  .lx-shot { display: block !important; margin: 8px -22px 0; position: relative; }
  .lx-shot img { width: 100%; height: auto; display: block; }
  .lx-shot-desk { margin-top: 18px; }
  .lx-shot-desk::after {               /* melt the photo's edges into the night */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, #082838 0%, transparent 14%, transparent 80%, #0c3547 100%);
  }
  .hv-right .hv-stage { display: none; }
  .lx-shot-phone { margin: 0 -22px; border-radius: 0; overflow: hidden; }
  .lx-shot-phone img { border-radius: 0; }
  #app .split-media .iph { display: none; }
}

/* ---------- the khata-book story (legacy section) ---------- */
@media all {
  .lg-sec { background: linear-gradient(180deg, var(--lx-paper) 0%, var(--lx-ivory) 100%) !important; }
  .lg-sec::before, .lg-sec::after { opacity: 0.25; }
  .lg-card, .lg-sign {
    background: var(--lx-paper) !important; border: 1px solid var(--lx-line) !important;
    box-shadow: 0 18px 40px -26px rgba(22, 33, 44, 0.25) !important;
  }
  .lg-core { background: linear-gradient(168deg, #fffdf9 0%, #f6efe2 100%) !important; border-color: rgba(201, 165, 94, 0.45) !important; }
  .lg-line, .lg-say, .lg-sign-mark { font-family: var(--lx-serif); font-weight: 600; letter-spacing: 0; }
  .lg-line { font-size: 1.45rem; line-height: 1.2; }
  .lg-say { font-size: 2.1rem !important; line-height: 1.12 !important; }
  .lg-join { background: linear-gradient(90deg, transparent, rgba(201,165,94,0.6), transparent) !important; }
  .lg-pts li::before, .lg-adot { background: var(--lx-gold) !important; }
}

@media (max-width: 760px) {
  .lg-say-big { font-family: var(--lx-serif) !important; font-weight: 600 !important; font-size: 2.05rem !important; line-height: 1.12 !important; letter-spacing: 0 !important; }
  html[lang="te"] .lg-say-big { font-family: "Noto Serif Telugu", var(--lx-serif) !important; font-size: 1.45rem !important; line-height: 1.45 !important; }
  .lx-shot-desk { margin-top: 26px; }
}

@media all {
  /* a gold ring with a tick, not a teal tile */
  .check-list li::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385652b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px 12px no-repeat !important;
    border: 1px solid var(--lx-gold) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
  }
  .check-list li { font-weight: 500; }
  /* the photograph's top edge melts further into the hero's night */
  .lx-shot-desk::after {
    background: linear-gradient(180deg, #082c3d 0%, rgba(8,44,61,0.6) 16%, transparent 34%, transparent 78%, #0c3547 100%);
  }
}

@media (max-width: 760px) {
  /* fade the photograph itself, so it melts into whatever night is behind it */
  .lx-shot-desk::after { display: none; }
  .lx-shot-desk img {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 80%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 24%, #000 80%, transparent 100%);
  }
  /* the media column centres a grid item, which shrank the picture to nothing */
  #app .split-media { display: block !important; }
  .lx-shot-phone { width: calc(100% + 44px); }
  .lx-shot-phone img {
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }
}

@media (max-width: 760px) {
  /* on ivory the phone photograph is a framed plate, not a fade */
  .lx-shot-phone { width: auto; margin: 6px 0 0; border-radius: 26px; overflow: hidden;
    border: 1px solid var(--lx-line); box-shadow: 0 30px 60px -30px rgba(5, 29, 42, 0.55); }
  .lx-shot-phone img { -webkit-mask-image: none; mask-image: none; }
}

@media all {
  /* the header's running cyan line, and the heroes' cyan glows, go champagne */
  .site-header::after { background: linear-gradient(90deg, transparent, rgba(201,165,94,0.7), transparent) !important; height: 1px !important; }
  .hero::before, .page-hero::before {
    background: radial-gradient(420px 240px at 82% 6%, rgba(201,165,94,0.20), transparent 62%) !important;
  }
}

/* ---------- the hero's photograph: the ponds the trade lives on ---------- */
@media (max-width: 760px) {
  .hero-v2 {
    background:
      linear-gradient(180deg, rgba(5,29,42,0.5) 0%, rgba(5,29,42,0.1) 18%, rgba(5,29,42,0.28) 32%, rgba(5,29,42,0.66) 40%, rgba(5,29,42,0.86) 50%, #082838 64%) top / 100% auto no-repeat,
      image-set(url("/shots/lux-ponds.webp") type("image/webp"), url("/shots/lux-ponds.jpg") type("image/jpeg")) top center / 100% auto no-repeat,
      linear-gradient(180deg, #051d2a 0%, #082838 55%, #0c3547 100%) !important;
    background-size: 100% 1180px, 100% auto, auto !important;
  }
  .hv-mind, .hv-sea { opacity: 0.18; }
  .hero-v2 .hv-title, .hero-v2 .hv-badge { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); }
  .hv-copy .te-sub, .hv-copy .hv-lead { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }
}

/* ---------- the shop, right under the headline ---------- */
@media (max-width: 760px) {
  .lx-shot-shop {
    margin: 24px 0 8px !important; border-radius: 24px; overflow: hidden;
    border: 1px solid rgba(234, 211, 156, 0.45);
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7), 0 0 0 6px rgba(234, 211, 156, 0.06);
  }
  .lx-shot-shop img { width: 100%; height: auto; display: block; }
  /* one photograph of the product is enough in the hero */
  .lx-shot-desk { display: none !important; }
}

/* ---------- the last of the aqua, gone champagne (26 Oct 2026) ----------
   The tiles beside each section's points, the steps, the farmer's frame, the
   badges and the call-back card. The app's own screens keep their colours. */
@media all {
  .bill-step { background: var(--lx-paper) !important; border-color: var(--lx-line) !important; }
  .bill-step .n {
    background: transparent !important; color: var(--lx-gold-ink) !important;
    border: 1px solid var(--lx-gold); border-radius: 50% !important; box-shadow: none !important;
    font-family: var(--lx-serif); font-size: 1.25rem; font-weight: 600;
  }
  .ticks li::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385652b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px 11px no-repeat !important;
    border: 1px solid var(--lx-gold) !important; box-shadow: none !important;
  }
  .raithu-photo { background: var(--lx-grad-gold) !important; padding: 3px !important; box-shadow: 0 30px 60px -30px rgba(5, 29, 42, 0.55) !important; }
  .raithu-hook { color: var(--lx-gold-ink) !important; font-family: var(--lx-serif); font-size: 1.35rem !important; font-weight: 600 !important; }
  .new-tag {
    background: var(--lx-night) !important; color: var(--lx-gold-hi) !important;
    border: 1px solid rgba(234, 211, 156, 0.5) !important; box-shadow: none !important;
  }
  .rg-ic { background: transparent !important; color: var(--lx-gold-ink) !important; border: 1px solid var(--lx-line); box-shadow: none !important; }
  .ai-feature-text .ai-chip { background: var(--lx-grad-gold) !important; color: var(--lx-night) !important; }
  .quote { background: var(--lx-paper) !important; border-color: var(--lx-line) !important; }
  .quote .who .av { background: var(--lx-grad-gold-deep) !important; }
  .uptime-pill {
    background: var(--lx-paper) !important; color: var(--lx-gold-ink) !important;
    border-color: var(--lx-line) !important; box-shadow: none !important;
  }
  .form-card, .lead-sec .form-card { background: var(--lx-paper) !important; border-color: var(--lx-line) !important; }
  .tb-ic, .tb-ic.tb-up, .tb-ic.tb-ok {
    background: transparent !important; color: var(--lx-gold-hi) !important;
    border-color: rgba(234, 211, 156, 0.4) !important; box-shadow: none !important;
  }
  .lg-does { border-color: var(--lx-line) !important; }
  .lg-does li { color: var(--lx-gold-ink) !important; }
  .chip-store .cs-ico rect[stroke], .chip-store .cs-ico path[stroke] { stroke: var(--lx-gold); }
}

@media (max-width: 760px) {
  /* the legacy section, shorter on a phone: its idea and its photograph stay;
     the drawn ledger and the three lists of abstract nouns go */
  .lg-art, .lg-flow { display: none !important; }
}

@media all {
  /* the plan most shops take: a gold rim, not an aqua one */
  .price.pop {
    background:
      linear-gradient(180deg, #fffdf9 0%, #f8f1e4 100%) padding-box,
      var(--lx-grad-gold) border-box !important;
    box-shadow: 0 30px 60px -30px rgba(133, 101, 43, 0.45) !important;
  }
  .price.pop .badge { background: var(--lx-night) !important; color: var(--lx-gold-hi) !important; box-shadow: none !important; }
}
@media all {
  .price.pop ul li:not(.off)::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2385652b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px 11px no-repeat !important;
    border: 1px solid var(--lx-gold) !important; box-shadow: none !important; color: transparent !important;
  }
}

/* ---------- the app's screens sit in a slim bezel, not a thick slab ----------
   (26 Oct 2026, the owner: the dark borders were heavy.) Eight pixels of
   midnight with a gold hairline, like the edge of a good tablet; the screen
   inside keeps its own corners and no shadow of its own. #app holds a photo. */
@media all {
  .split-media:not(:has(.lx-shot-phone)) {
    background: linear-gradient(160deg, #0e3b4f 0%, #051d2a 100%) !important;
    padding: 7px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(201, 165, 94, 0.55);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      0 0 0 5px rgba(201, 165, 94, 0.07),
      0 34px 60px -34px rgba(5, 29, 42, 0.6) !important;
  }
  .split-media .panel {
    border: 0 !important;
    border-radius: 23px !important;
    box-shadow: none !important;
  }
  .split-media .panel-head { padding: 14px 18px; }
}

/* ---------- the computer's own sizes and the things only it has ---------- */
@media (min-width: 761px) {
  h2 { font-size: clamp(2.3rem, 3.4vw, 3.05rem); }
  h3 { font-size: 1.55rem; }
  html[lang="te"] h2 { font-size: clamp(1.7rem, 2.4vw, 2.1rem); }
  html[lang="te"] h3 { font-size: 1.22rem; }
  .section { padding: 108px 0; }
  .section-tight { padding: 70px 0; }
  .container { padding-left: 32px; padding-right: 32px; }
  .section-head p { font-size: 1.08rem; }
  .eyebrow { font-size: 12px; }

  /* the hero: the ponds at dusk behind the words, night under the machine */
  .hero-v2 {
    background:
      linear-gradient(90deg, rgba(5,29,42,0.94) 0%, rgba(5,29,42,0.82) 32%, rgba(5,29,42,0.55) 58%, rgba(5,29,42,0.78) 100%),
      linear-gradient(180deg, rgba(5,29,42,0.2) 0%, rgba(5,29,42,0.2) 60%, #082838 100%),
      image-set(url("/shots/lux-ponds.webp") type("image/webp"), url("/shots/lux-ponds.jpg") type("image/jpeg")) center 30% / cover no-repeat,
      #051d2a !important;
    padding-top: 52px; padding-bottom: 56px;
  }
  .hero-v2 .hv-title { font-size: clamp(2.4rem, 3.5vw, 3.5rem); line-height: 1.04; }
  html[lang="te"] .hero-v2 .hv-title { font-size: clamp(1.8rem, 2.4vw, 2.4rem); line-height: 1.36; }
  .hv-copy .hv-title, .hv-copy .hv-badge { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45); }
  .hero:not(.hero-v2) h1, .page-hero h1 { font-size: clamp(2.6rem, 4vw, 3.6rem); }

  /* the bar of links on midnight glass */
  .nav-links a { color: rgba(239, 230, 212, 0.78) !important; font-weight: 500; letter-spacing: 0.02em; }
  .nav-links a:hover { color: var(--lx-gold-hi) !important; background: none !important; }
  .nav-links a.active { color: var(--lx-gold-hi) !important; background: rgba(234, 211, 156, 0.08) !important; box-shadow: none !important; }
  .nav-links a::after { background: var(--lx-grad-gold) !important; height: 1px !important; }
  .nav-cta .btn { padding: 11px 24px; }

  /* the drawn computer and phone in the hero sit on night, framed in gold */
  .hv-stage { filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.45)); }

  /* the twelve phone photographs: a little lift on a pointer */
  .lx-ph .lx-phone-shot { transition: transform 0.5s cubic-bezier(.2,.7,.2,1), box-shadow 0.5s; }
  .lx-ph:hover .lx-phone-shot { transform: translateY(-6px); box-shadow: 0 40px 60px -30px rgba(5, 29, 42, 0.7); }

  .split-media:not(:has(.lx-shot-phone)) { padding: 9px !important; border-radius: 32px !important; }
  .split-media .panel { border-radius: 24px !important; }
}

/* the call-back card and the legacy line, on every screen */
.lead-band { background: var(--lx-paper) !important; border-color: var(--lx-line) !important; }
.lg-say-big { font-family: var(--lx-serif) !important; font-weight: 600 !important; letter-spacing: 0 !important; }
html[lang="te"] .lg-say-big { font-family: "Noto Serif Telugu", var(--lx-serif) !important; }
@media (min-width: 761px) {
  .lg-say-big { font-size: clamp(2.4rem, 3.6vw, 3.3rem) !important; line-height: 1.1 !important; }
}

/* ---------- the app's real screens, on every screen (26 Oct 2026) ----------
   The owner: the screens should be the app's own. Captured from the demo shop
   with phone numbers, GSTINs and emails masked. A computer gets the computer
   screen; a phone gets the app as it looks on a phone, the slim bezel round it
   standing in for the phone's own edge. The drawn panels stay in the markup
   for the page's text and translation, but are not shown. */
.lx-app { display: block; }
.split-media:has(.lx-app) > .lx-app { border-radius: 24px; overflow: hidden; background: #f4f7f9; }
.split-media:has(.lx-app) > .lx-app img { display: block; width: 100%; height: auto; }
.split-media:has(.lx-app) > :not(.lx-app) { display: none !important; }
.web-shot:has(.lx-app) > .lx-app img { display: block; width: 100%; height: auto; }
.web-shot:has(.lx-app) > .ak-scr { display: none !important; }
.split-media:has(.lx-app-phone) > .lx-app-phone {
  width: 270px; max-width: 78%; margin: 18px auto; padding: 8px; border-radius: 42px !important;
  background: linear-gradient(160deg, #0e3b4f, #051d2a) !important;
  border: 1px solid rgba(201, 165, 94, 0.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 30px 60px -28px rgba(5,29,42,0.7);
}
.split-media:has(.lx-app-phone) > .lx-app-phone img { border-radius: 34px; }
.split-media:has(.lx-app-phone) { background: radial-gradient(70% 60% at 50% 40%, rgba(201,165,94,0.14), transparent 70%), linear-gradient(160deg, #0c3547, #051d2a) !important; padding: 26px !important; }
@media (max-width: 760px) {
  /* a phone screen in a phone-wide bezel */
  .split-media:has(.lx-app):not(:has(.lx-app-phone)) { max-width: 300px; margin-left: auto !important; margin-right: auto !important; border-radius: 34px !important; }
  .split-media:has(.lx-app):not(:has(.lx-app-phone)) > .lx-app { border-radius: 27px; }
}
/* the owner-app section on a computer: the photograph, not the drawn phone */
@media (min-width: 761px) {
  #app .split-media .lx-shot-phone { display: block !important; max-width: 440px; margin: 0 auto; border-radius: 28px; overflow: hidden;
    border: 1px solid var(--lx-line); box-shadow: 0 40px 70px -34px rgba(5, 29, 42, 0.6); }
  #app .split-media .lx-shot-phone img { display: block; width: 100%; height: auto; }
  #app .split-media .iph { display: none !important; }
}
@media (max-width: 760px) {
  /* on a phone the browser figures show the phone's own screen, in the same
     slim bezel as the rest: no browser bar over a phone */
  .web-shot:has(.lx-app) {
    max-width: 300px; margin: 0 auto; padding: 7px; border-radius: 34px !important;
    background: linear-gradient(160deg, #0e3b4f 0%, #051d2a 100%) !important;
    border: 1px solid rgba(201, 165, 94, 0.55) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 0 0 5px rgba(201,165,94,0.07), 0 34px 60px -34px rgba(5,29,42,0.6) !important;
  }
  .web-shot:has(.lx-app) > .ws-bar { display: none !important; }
  .web-shot:has(.lx-app) > .lx-app { border-radius: 27px; overflow: hidden; }
}
/* the Ai band's suggestion card: the real one from the follow-ups screen */
.lx-app-ai { display: block; max-width: 330px; margin: 0 auto; border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(201, 165, 94, 0.45); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
.lx-app-ai img { display: block; width: 100%; height: auto; }
.lx-app-ai + .ai-suggest { display: none !important; }

/* ---------- the hero's computer and phone, photographed (26 Oct 2026) ----------
   The owner: make them real, make them bigger, and let the numbers move. A
   real monitor and phone on a walnut desk with the app's real Dashboard on
   both. The money figures are text laid over the screens through each
   screen's own perspective (matrix3d, measured from the photograph), so
   script.js can count them up. The layer is drawn at the photograph's own
   1800px and scaled to the column by --hd-s. Its edges melt into the night. */
/* on every screen now (26 Oct 2026): on a phone it sits under the words,
   edge to edge, fading only at top and bottom */
.hv-right .hv-stage { display: none !important; }
.lx-hero-desk { display: block; position: relative; margin: 6px -22px 0; }
.lx-hero-desk img {
  display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 86%, transparent 100%);
}
.hd-layer { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform: scale(var(--hd-s, 0.2)); pointer-events: none; }
.hd-scr { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.hd-n {
  position: absolute; display: flex; align-items: center; white-space: nowrap; overflow: hidden;
  font-family: "Noto Sans Telugu", "Noto Sans", Inter, system-ui, sans-serif; letter-spacing: -0.01em;
  line-height: 1; font-variant-numeric: tabular-nums;
  transition: text-shadow 0.6s ease;
}
.hd-n.hd-tick { text-shadow: 0 0 14px rgba(201, 165, 94, 0.9); }
@media (min-width: 761px) {
  .lx-hero-desk { display: block; position: relative; margin: -30px -10% -10px -8%; }
  .lx-hero-desk img {
    display: block; width: 100%; height: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 86%, transparent 100%);
            mask-composite: intersect;
  }
}

/* ---------- the first screen (26 Oct 2026) ----------
   The owner: the buttons, the promises and the four tiles must be on the
   first screen. The buttons now follow the headline in the markup; here the
   photograph column starts at the top instead of centring on the long copy,
   the photograph is a little tighter, and the four tiles are one slim row
   tucked under its faded bottom edge. */
@media (min-width: 761px) {
  .hero-v2 { padding-top: 26px !important; padding-bottom: 36px !important; }
  .hero-v2 .hero-grid { align-items: start !important; }
  .hv-badge { margin-bottom: 0; }
  .hero-v2 .hv-title { margin-top: 16px; }
  .hv-actions { margin-top: 22px !important; display: flex !important; flex-wrap: wrap !important; gap: 12px !important; }
  .hv-actions .btn { padding: 13px 18px !important; font-size: 0.98rem !important; white-space: nowrap; flex: 0 0 auto; }
  /* a little more room for the words, so the two buttons sit side by side */
  .hero-v2 .hero-grid { grid-template-columns: 37fr 63fr !important; }
  .hv-ticks { margin-top: 14px !important; }
  .lx-hero-desk { margin: -18px -6% 0 -4% !important; }
  /* on a short laptop screen the photograph gives way, so the tiles stay on it */
  .hero-v2 .hv-right { max-width: min(980px, calc((100vh - 300px) * 1.5)) !important; margin-left: auto; margin-right: 0; }
  .hv-strip { position: relative; z-index: 2; margin-top: -26px !important; padding: 14px 16px !important;
    background: rgba(5, 29, 42, 0.72) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .hv-strip-grid { gap: 12px !important; }
  .hv-item i { width: 30px !important; height: 30px !important; margin-bottom: 6px !important; }
  .hv-item b { font-size: 0.98rem !important; }
  .hv-item small { font-size: 0.72rem !important; margin-top: 2px !important; }
  .hv-item .te-sub { font-size: 0.7rem !important; }
}
@media (max-width: 760px) {
  .hv-actions { margin-top: 22px; }
}
@media (min-width: 761px) and (max-height: 720px) {
  .hero-v2 .hv-title { font-size: clamp(2rem, 3vw, 2.75rem) !important; }
  .hero-v2 { padding-top: 16px !important; }
}

/* ---------- Telugu is never letter-spaced (26 Oct 2026) ----------
   Tracking that dresses an English label pulls a Telugu word apart at its
   conjuncts — యాప్ డౌన్‌లోడ్ came out as యా ప్ డౌ న్ లో డ్. So in Telugu every
   element keeps its letters together, and every Telugu line inside an
   English page does too. The word mark keeps its own tight setting. */
html[lang="te"] body *:not(.brand-name):not(.brand-name *),
.te-sub, [lang="te"] { letter-spacing: 0 !important; }
html[lang="te"] .hero-v2 .hv-title { text-wrap: balance; }
@media (min-width: 761px) {
  html[lang="te"] .hv-actions .btn { padding: 13px 18px !important; font-size: 0.98rem; }
}

/* ---------- deep water, the app's own (26 Oct 2026) ----------
   The owner: the website takes the sign-in screen's ground. The midnight
   navy became the app's deep-950 #051d2a / deep-900 #082838 / deep-800
   #0c3547 throughout; the gold accents stay. The hero gets the sign-in
   screen's light: an aqua pool at the top left and a low warm sun mostly
   off the right edge. */
.hero-v2, .page-hero { isolation: isolate; }
.hero-v2::after, .page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(520px 520px at -8% -10%, rgba(38, 166, 178, 0.22), transparent 70%),
    radial-gradient(360px 340px at 104% -6%, rgba(255, 196, 120, 0.20), rgba(255, 150, 80, 0.07) 45%, transparent 70%),
    radial-gradient(120% 85% at 50% -15%, rgba(255, 255, 255, 0.06), transparent 62%) !important;
  height: auto !important;
}
.hero-v2 > .container, .page-hero > .container { position: relative; z-index: 1; }

/* ==========================================================================
   The whole site in deep water (26 Oct 2026, the owner)
   --------------------------------------------------------------------------
   Every section on the app's sign-in ground: deep-950/900/800 teal, light
   ink, glass cards with a white hairline, gold for the accents. The tokens
   are re-pointed first, so the light rules above follow; what follows them
   is the handful of places that wrote a light colour by hand. The pictures
   of the product keep their own light (the restore block near the top).
   ========================================================================== */
:root {
  --lx-ivory: #051d2a;
  --lx-pearl: #072536;
  --lx-paper: rgba(255, 255, 255, 0.045);
  --lx-ink: #f3efe6;
  --lx-ink-2: rgba(222, 234, 238, 0.78);
  --lx-ink-3: rgba(222, 234, 238, 0.62);
  --lx-gold-ink: #dcc28a;
  --lx-line: rgba(255, 255, 255, 0.12);
  --lx-grad-gold-deep: linear-gradient(135deg, #f1dca8 0%, #d9b971 50%, #c9a55e 100%);
  --paper: #062433;
  --paper-2: #051d2a;
  --paper-3: #072536;
  --ink-700: rgba(232, 240, 242, 0.86);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 14px 34px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
  --aqua-700: #dcc28a;
  --aqua-600: #dcc28a;
  --aqua-100: rgba(234, 211, 156, 0.10);
  --teal-500: #dcc28a;
  color-scheme: dark;
}
html, body { background: #051d2a !important; color: var(--ink-700); }
body {
  background:
    radial-gradient(900px 600px at -10% 0%, rgba(38, 166, 178, 0.10), transparent 70%),
    radial-gradient(800px 700px at 110% 40%, rgba(66, 194, 204, 0.06), transparent 70%),
    #051d2a !important;
}
/* every section is the water; alternate bands a shade apart */
.section, .section-tight, .strip, .lg-sec, .lead-sec, .day-sec, .bg-paper2, .bg-paper3 { background: transparent !important; }
.bg-paper2, .bg-paper3 { background: rgba(255, 255, 255, 0.02) !important; }
h1, h2, h3, h4, h5, h6 { color: var(--lx-ink); }
p, li, dd, td, th, label, small { color: inherit; }
.section-head p, .split p, .card p, .lg-body p, .day-txt p { color: var(--lx-ink-2) !important; }

/* glass cards, as on the sign-in card */
.card, .spec-card, .stat-card, .faq-item, .quote, .price, .form-card, .bill-step, .referral-chip,
.lg-card, .lg-sign, .lg-core, .lead-band, .day, .loc-card, .strip-items > span {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 24px 50px -30px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  color: var(--ink-700);
}
.price.pop {
  /* the inner layer must be opaque, or the gold rim shows through it */
  background: linear-gradient(180deg, #123a44, #0a2c3a) padding-box, var(--lx-grad-gold) border-box !important;
  border: 1px solid transparent !important;
}
.day h3 { color: var(--lx-ink) !important; }
.day-txt > p:not(.day-time):not(.te-sub) { color: var(--lx-ink-2) !important; }
.day-time b { color: #dcc28a !important; }
.day-time span { color: rgba(222, 234, 238, 0.6) !important; }
.day h3 + .te-sub { color: #dcc28a !important; }
.day-txt > p.te-sub:last-child { color: var(--lx-ink-3) !important; }
.te-sub { color: var(--lx-ink-3); }
.te-h2, .card .te-sub, .spec-card .te-sub { color: #dcc28a !important; }

/* buttons that were dark ink on ivory */
.btn-outline, .btn-line { color: #f3efe6 !important; border-color: rgba(234, 211, 156, 0.45) !important; }
.btn-light { background: rgba(255, 255, 255, 0.92) !important; color: #051d2a !important; }

/* forms: glass fields, as on the sign-in card */
input:not([type=checkbox]):not([type=radio]), select, textarea {
  background: rgba(255, 255, 255, 0.06) !important; color: #f3efe6 !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
}
input::placeholder, textarea::placeholder { color: rgba(222, 234, 238, 0.45) !important; }
select option { background: #072536; color: #f3efe6; }

/* tables in the legal pages */
.legal .tbl-wrap, .legal table { background: rgba(255, 255, 255, 0.03) !important; }
.legal th { background: rgba(255, 255, 255, 0.06) !important; color: #f3efe6 !important; }
.legal td { border-color: rgba(255, 255, 255, 0.1) !important; }

/* the header and the bar above it sit on the same water */
.site-header { background: rgba(5, 29, 42, 0.82) !important; }
.topbar-call { background: #041722 !important; }
/* on gold, ink is the water's own */
.av, .quote .who .av, .seg-btn.on, .skip-link, .ai-chip { color: #051d2a !important; -webkit-text-fill-color: #051d2a; }
/* gold text clipped from a gradient: its Telugu line underneath reads in plain light ink */
.lg-kicker .te-sub, .lg-pull-b .te-sub, .lg-sign-tag .te-sub { -webkit-text-fill-color: rgba(222, 234, 238, 0.78) !important; color: rgba(222, 234, 238, 0.78) !important; }
.lg-chips span { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; color: var(--ink-700) !important; }
/* white chips and bubbles that were left on the water */
.rg-districts a, .seg, .addon-chip, .callout, .ac-ico, .sup-ch {
  background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: var(--ink-700) !important; box-shadow: none !important;
}
.rg-districts a:hover { border-color: rgba(234, 211, 156, 0.5) !important; color: #f3efe6 !important; }
.callout.warn { background: rgba(245, 180, 60, 0.08) !important; border-color: rgba(245, 180, 60, 0.35) !important; }
.callout h3, .callout p { color: inherit !important; }
.callout h3 { color: #f3efe6 !important; }
.wa-tip, .wa-tip * { color: #0b2a1a !important; -webkit-text-fill-color: #0b2a1a; }
.plan-tag { color: #dcc28a !important; }
.badge { color: #ead39c !important; -webkit-text-fill-color: #ead39c; }
.sup-ch b { color: #f3efe6 !important; }
.rg-items span {
  background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(234, 211, 156, 0.35) !important;
  color: #f3efe6 !important; box-shadow: none !important;
}
.rg-items span:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important; }
.rg-title, .rg-note, .rg-d-lead { color: var(--lx-ink-2) !important; }

/* the drawn pictures of the product keep the app's own light page and ink
   on the deep-water site — the Ai Doctor chat, the Ai Assistant browser
   figure and the owner phone mock. Without this their text took the
   site's light ink on their own white cards. */
.panel, .ak-scr, .app-phone .screen, .iph-scr {
  --lx-ink: #16212c; --lx-ink-2: #4b5560; --lx-ink-3: #6b737b;
  --ink-900: #0b1f2a; --ink-700: #2b3640; --ink-500: #4b5560; --ink-400: #6b737b;
  --paper: #ffffff; --paper-2: #f4fafc; --paper-3: #eaf6f9; --line: #d8ebf0;
  color: #2b3640;
  color-scheme: light;
}
.panel h1, .panel h2, .panel h3, .panel h4, .panel h5, .panel h6,
.ak-scr h1, .ak-scr h2, .ak-scr h3, .ak-scr h4, .ak-scr h5, .ak-scr h6 { color: #0b1f2a; }
.panel p, .panel li, .panel span:not([class*=btn]), .ak-scr p, .ak-scr li { color: inherit; }
.panel-body { background: #fff !important; }
.panel-head { background: linear-gradient(180deg, #ffffff, #f4fafc) !important; color: #0b1f2a !important; }
.panel .doc-body { background: linear-gradient(180deg, #f4fafc, #eaf6f9) !important; }
.panel .d-foot { background: #fff !important; }
.panel .d-instock { color: #0b7a4b !important; }
/* the footer's last line on a phone: the CIN and GSTIN break, the links wrap */
@media (max-width: 760px) {
  .footer-bottom { align-items: stretch !important; }
  .footer-bottom > span { overflow-wrap: anywhere; line-height: 1.6; }
  .footer-bottom .links { flex-wrap: wrap; justify-content: center; gap: 10px 18px !important; }
}
/* the features page set four Ai columns inline; on a phone that pushed two
   of every four cards past the band's clipped edge */
@media (max-width: 900px) { .ai-grid[style] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 560px) { .ai-grid[style] { grid-template-columns: minmax(0, 1fr) !important; } }

/* ---------- tablets (26 Oct 2026) ----------
   A portrait tablet got the computer's two columns: the words squeezed into
   a third of the width, the photograph small beside them. Up to 1000px the
   hero is one column — words, then the desk across the full width, then the
   tiles — and the twelve phone photographs are three across, not one. */
@media (min-width: 761px) and (max-width: 1000px) {
  .hero-v2 .hero-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 8px !important; }
  .hero-v2 .hv-right { max-width: none !important; margin: 0 !important; }
  .lx-hero-desk { margin: 0 -32px !important; }
  .hv-strip { margin-top: -20px !important; }
  .hero-v2 .hv-title { font-size: clamp(2.6rem, 6vw, 3.4rem) !important; }
}
@media (min-width: 761px) and (max-width: 1200px) {
  .hv-actions .btn { padding: 12px 16px !important; font-size: 0.92rem !important; }
  .iph-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px !important; }
}
@media (min-width: 1001px) and (max-width: 1200px) {
  .hero-v2 .hero-grid { grid-template-columns: 42fr 58fr !important; }
}
.hero-v2 .hv-title { text-wrap: balance; }
/* the Ai Doctor chat is a phone-shaped picture: on a computer it sits in a
   phone-wide bezel in its column rather than stretching across it */
@media (min-width: 761px) {
  .split-media:has(img[src*="m-ai-doctor"]) { max-width: 360px; margin-left: auto !important; margin-right: auto !important; border-radius: 34px !important; }
  .split-media:has(img[src*="m-ai-doctor"]) > .lx-app { border-radius: 27px; }
}
/* the headline's gold tail runs to two lines on a phone and its descenders
   sat on the Telugu line beneath; a little more leading, and air above it */
@media (max-width: 760px) {
  .hero-v2 .hv-title { line-height: 1.12 !important; }
  .hero-v2 .hv-title .te-sub { display: block; margin-top: 14px !important; }
}
@media (max-width: 760px) {
  /* the ponds' bright channels ran behind the gold tail; the water is
     darker where the words sit, lighter again under the buttons */
  .hero-v2 {
    background:
      linear-gradient(180deg, rgba(5,29,42,0.55) 0%, rgba(5,29,42,0.62) 14%, rgba(5,29,42,0.68) 30%, rgba(5,29,42,0.78) 42%, rgba(5,29,42,0.9) 52%, #082838 64%) top / 100% auto no-repeat,
      image-set(url("/shots/lux-ponds.webp") type("image/webp"), url("/shots/lux-ponds.jpg") type("image/jpeg")) top center / 100% auto no-repeat,
      linear-gradient(180deg, #051d2a 0%, #082838 55%, #0c3547 100%) !important;
    background-size: 100% 1180px, 100% auto, auto !important;
  }
}

/* ---------- the hero's phone, drawn (27 Oct 2026) ----------
   The owner: "mobile size penchu, lopala screen kuda clear ga kanipinchali".
   The photograph's phone was small and its screen was JPEG inside JPEG. This
   one is the real 780px screen in a frame, ~1.4x the size, laid over the
   photograph's phone on the same stand. The layer takes the photograph's own
   fade so the phone's foot melts into the desk with it. */
.hd-layer {
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 86%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 86%, transparent 100%);
}
@media (min-width: 761px) {
  .hd-layer {
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 86%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg, transparent 0%, #000 3%, #000 92%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 86%, transparent 100%);
            mask-composite: intersect;
  }
}
.hd-phone2 {
  position: absolute; border-radius: 54px;
  background: linear-gradient(160deg, #1d232b, #07090c 40%, #0b0e12);
  box-shadow:
    inset 0 0 0 2px #2b313a,
    0 0 0 2px #11151a,
    0 0 0 3.5px rgba(201, 165, 94, 0.38),
    -26px 38px 46px -14px rgba(0, 0, 0, 0.62),
    0 60px 70px -40px rgba(0, 0, 0, 0.8);
}
.hd-phone2 .hd-scr { overflow: hidden; border-radius: 50px; background: #fff; }
.lx-hero-desk .hd-phone2 img {
  display: block; width: 390px; height: 818px;
  -webkit-mask-image: none; mask-image: none;
}
/* the island, as the photographed phone had */
.hd-phone2::after {
  content: ""; position: absolute; left: 50%; top: 22px; width: 100px; height: 28px;
  margin-left: -50px; border-radius: 16px; background: #05070a; z-index: 2;
}
/* a glint along the glass */
.hd-phone2::before {
  content: ""; position: absolute; inset: 12px; border-radius: 42px; z-index: 1; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 28%);
}

/* ---------- the phone, tidied (27 Oct 2026) ----------
   The owner: "website mobile buttons page allignments anni neat ga set
   cheyyii — andaru chusedhi website mobile lone ekkuva". Measured on every
   page at 390px: nothing overflowed, but the same few things looked loose
   everywhere, so they are fixed once here rather than page by page. */

/* the App Store apple was drawn in near-black on a night chip: invisible */
.chip-store .cs-ico path[fill="#0b1f2a"] { fill: #f2e6c9; }

/* a question and its arrow share the first line; the Telugu goes under it.
   With flex-wrap a long question took the whole line and pushed the arrow
   onto a row of its own. */
.faq-q { display: grid !important; grid-template-columns: 1fr auto; align-items: start; column-gap: 14px; }
.faq-q .chev { grid-column: 2; grid-row: 1; margin: 0.15em 0 0 !important; }
.faq-q .te-sub { grid-column: 1 / -1; grid-row: 2; }

/* no heading leaves one word alone on its last line */
h1:not(.hv-title), h2, h3, .faq-q { text-wrap: balance; }

@media (max-width: 640px) {
  /* every button in the page is the full column, one under another, with its
     words centred: before, some were full, some half and left, some broke
     onto two lines inside a pill */
  section .btn, .page-hero .btn, .site-footer .btn, .hv-actions .btn {
    display: flex !important; width: 100% !important; max-width: 100% !important;
    justify-content: center; text-align: center; white-space: normal;
    letter-spacing: 0.02em; padding: 15px 20px !important;
    box-sizing: border-box; margin-left: 0 !important; margin-right: 0 !important;
  }
  .hv-actions, .cta-actions, .btn-row, .hero-ctas { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }

  /* the three app buttons: two side by side, the web app across under them */
  .store-chips { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px !important; }
  .store-chips .chip-store { justify-content: center; min-width: 0; padding-left: 10px !important; padding-right: 10px !important; }
  .store-chips .chip-store:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* section labels: tighter tracking, short rules, centred if they wrap */
  .eyebrow { letter-spacing: 0.16em; gap: 10px; text-align: center; text-wrap: balance; line-height: 1.6; }
  .eyebrow::before, .eyebrow::after { width: 14px; flex: 0 0 14px; }

  /* a pill that has to wrap becomes a rounded box, not a stretched capsule */
  .plan-tag, .uptime-pill { border-radius: 14px !important; text-align: center; line-height: 1.45; text-wrap: balance; }

  /* the four results sit two by two instead of four screens of one each */
  .stat-cards { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .stat-card { padding: 22px 12px !important; }
  .stat-card b { font-size: 2rem !important; }
  .stat-card span { font-size: 0.86rem; line-height: 1.35; display: block; }

  /* a Telugu line under a centred heading is centred with it */
  .center + .te-sub { text-align: center; }

  /* "Across the Andhra aqua belt" on its own line above the districts */
  .rg-d-lead { flex: 0 0 100%; text-align: center; margin: 0 0 4px !important; }

  /* less dead water between the top of an inner page and its first section */
  .page-hero { padding-top: 46px !important; padding-bottom: 40px !important; }
  .page-hero + .section, .page-hero + section { padding-top: 40px !important; }
  .section { padding-top: 54px; padding-bottom: 54px; }

  /* tables become one card per row, each value under its column's name */
  .tbl-wrap { overflow: visible !important; border: 0 !important; background: none !important; }
  .tbl-wrap table, .tbl-wrap tbody, .tbl-wrap tr, .tbl-wrap td { display: block; width: auto !important; min-width: 0 !important; max-width: 100%; white-space: normal !important; }
  .tbl-wrap thead { display: none; }
  .tbl-wrap tr {
    border: 1px solid var(--lx-line-dark, rgba(255,255,255,0.1)); border-radius: 16px;
    padding: 14px 16px; margin-bottom: 12px; background: rgba(255, 255, 255, 0.03);
  }
  .tbl-wrap td { border: 0 !important; padding: 4px 0 !important; }
  .tbl-wrap td:first-child { font-weight: 700; font-size: 1.02rem; color: var(--lx-ink, #f2e6c9); padding-bottom: 6px !important; }
  .tbl-wrap td[data-label]:not(:first-child)::before {
    content: attr(data-label); display: block; font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--lx-gold-ink, #c9a55e); margin-bottom: 2px;
  }

  .lang-toggle { min-height: 40px; }
}

/* ---------- Telugu on a small phone (27 Oct 2026) ----------
   The owner: "website mobile lo telugu lo check cheyyi". Telugu runs wider
   than the English it replaces: on a 360px phone five buttons broke onto two
   lines by 6 to 30px, and the pricing ones left their ✦ stranded on the left.
   No tracking (it only spreads the conjuncts), less side padding, a little
   smaller: every one of them fits on one line again. */
@media (max-width: 400px) {
  html[lang="te"] section .btn, html[lang="te"] .page-hero .btn,
  html[lang="te"] .site-footer .btn, html[lang="te"] .hv-actions .btn {
    letter-spacing: 0; padding-left: 12px !important; padding-right: 12px !important; font-size: 0.96rem;
  }
  /* "…App Store లో" left its last word alone on the next line */
  .store-note { text-wrap: balance; }
}