:root{
      /* ===== CANVAS ===== */
      --canvas:#FFFFFF;
      --canvas-2:#F5F5F7;
      --ink:#1D1D1F;
      --ink-2:#6E6E73;

      /* ===== DARK MOMENTS (rare) ===== */
      --dark:#0A1410;
      --dark-2:#11201A;
      --ink-on-dark:rgba(255,255,255,.92);
      --ink-on-dark-2:rgba(255,255,255,.64);

      /* ===== BRAND ===== */
      --saffron:#FF9933;
      --saffron-ink:#B25A00;
      --green:#138808;
      --green-soft:#E8F5E8;
      --navy:#1E2A78;
      --brand-maroon:#781216;        /* Keelambi logo color — brand signature, used sparingly */
      --brand-maroon-soft:#F4E6E7;   /* faint maroon tint, for rare subtle fills only */

      /* ===== LINES (1px, retina-safe) ===== */
      --line:rgba(0,0,0,.08);
      --line-strong:rgba(0,0,0,.14);
      --line-on-dark:rgba(255,255,255,.12);

      /* ===== SPACING ===== */
      --s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;--s10:128px;

      /* ===== RADII / MOTION ===== */
      --r-pill:980px;--r-card:16px;--r-media:12px;
      --ease:cubic-bezier(.22,1,.36,1);--fast:160ms;--base:240ms;--slow:480ms;

      /* ===== LAYOUT ===== */
      --nav-h:64px;--nav-h-lg:80px;

      /* FONTS */
      --f-body:"DM Sans",-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Segoe UI",Roboto,sans-serif;
      --f-head:"DM Sans",-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif;
      --f-display:"Bebas Neue","DM Sans",sans-serif;   /* machinery voice — display only */
      --f-hand:"Caveat","Segoe Script","Bradley Hand",cursive;  /* annotation voice — accent only */
      --f-kn:"Noto Sans Kannada","DM Sans",sans-serif;
      --f-en:"Inter",-apple-system,BlinkMacSystemFont,sans-serif;

      /* TYPE SCALE (fluid clamp) */
      --t-display:clamp(40px,6.5vw,80px);
      --t-h1:clamp(32px,4.5vw,56px);
      --t-h2:clamp(24px,3.2vw,36px);
      --t-h3:clamp(18px,2vw,22px);
      --t-body:clamp(15px,1.4vw,17px);
      --t-stat:clamp(36px,5.5vw,64px);
    }

    /* BASE RESET + HARDENING */
    *{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px + env(safe-area-inset-top,0px));color-scheme:light;-webkit-text-size-adjust:100%}
    @media(min-width:744px){html{scroll-padding-top:calc(var(--nav-h-lg) + 16px + env(safe-area-inset-top,0px))}}
    @media(min-width:744px){html:has(.chapters){scroll-padding-top:calc(var(--nav-h-lg) + 50px + 8px + env(safe-area-inset-top,0px))}}
    @media(max-width:743px){html:has(.chapters){scroll-padding-top:calc(var(--nav-h) + 50px + 8px + env(safe-area-inset-top,0px))}}
    body{overflow-x:hidden}              /* guard on BODY only, never html */
    body{font-family:var(--f-body);font-weight:400;font-size:var(--t-body);line-height:1.55;letter-spacing:-0.005em;color:var(--ink);
         background:var(--canvas);-webkit-font-smoothing:antialiased}
    img,svg,video{display:block;max-width:100%}
    button,a{font-family:inherit;color:inherit}

    /* LANGUAGE SYSTEM */
    html[lang="en"] [data-kn]{display:none}
    html[lang="kn"] [data-en]{display:none}
    /* Untranslated KN placeholder spans fall back to English — .kn-fallback applied by JS */
    [data-kn].kn-fallback{display:none}
    html[lang="kn"] [data-en].kn-fallback{display:inline}
    :lang(kn),[lang="kn"]{font-family:var(--f-kn);letter-spacing:0}
    /* Force Noto Sans Kannada on every visible KN string, overriding Inter on buttons & headings */
    html[lang="kn"] [data-kn]{font-family:var(--f-kn)}
    /* Hybrid phrases: Latin tokens (Reserve, Fuel, On-Site, Year, Operator) inside KN strings keep the Latin font */
    .lat{white-space:nowrap}
    html[lang="kn"] .lat{font-family:var(--f-en);font-weight:inherit;letter-spacing:normal}
    html[lang="kn"] body{line-height:1.7;letter-spacing:0;font-family:var(--f-kn)}
    #app{transition:opacity 90ms var(--ease)} #app.fading{opacity:0}

    /* UTILITIES */
    .container{max-width:1200px;margin-inline:auto;padding-inline:20px}
    @media(min-width:744px){.container{padding-inline:48px}}
    .eyebrow{font-family:var(--f-head);font-size:13px;font-weight:600;letter-spacing:.1em;
             text-transform:uppercase;color:var(--saffron-ink)}
    html[lang="kn"] .eyebrow{font-family:var(--f-kn);text-transform:none;letter-spacing:0;font-weight:700}
    /* brand-maroon eyebrow — brand/trust sections only (story); product eyebrows stay saffron */
    .eyebrow--brand{color:var(--brand-maroon)}
    .sec-title{font-family:var(--f-head);font-size:var(--t-h1);font-weight:700;line-height:1.05;letter-spacing:-0.025em}
    html[lang="kn"] .sec-title{font-family:var(--f-kn);letter-spacing:0;line-height:1.35;font-weight:700}
    .sec-sub{margin-top:var(--s4);color:var(--ink-2);max-width:56ch}
    .section{background:var(--canvas);color:var(--ink);padding-block:var(--s9)}
    @media(min-width:900px){.section{padding-block:var(--s10)}}
    .section--alt{background:var(--canvas-2)}
    .section--dark{background:var(--dark);color:var(--ink-on-dark)}
    .section--dark .sec-sub{color:var(--ink-on-dark-2)}
    .section--dark .eyebrow{color:var(--saffron)}
    .section--navy{background:var(--navy);color:#fff;text-align:center}
    .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:48px;
         padding-inline:28px;border-radius:var(--r-pill);font-family:var(--f-head);font-weight:600;
         font-size:16px;text-decoration:none;cursor:pointer;border:0;transition:transform var(--fast) var(--ease),background-color var(--fast) var(--ease),box-shadow var(--base) var(--ease)}
    .btn:active{transform:scale(.98)}
    .btn-pri{background:var(--saffron);color:#1A1208;box-shadow:0 1px 2px rgba(255,153,51,0);transition:transform var(--fast) var(--ease),background-color var(--fast) var(--ease),box-shadow var(--base) var(--ease)}
    .btn-pri:hover{background:#FFA64D;transform:translateY(-1px);box-shadow:0 6px 16px rgba(255,153,51,.32)}
    .btn-pri:active{transform:translateY(0);box-shadow:0 1px 2px rgba(255,153,51,.2)}
    .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid var(--line-on-dark);backdrop-filter:blur(6px)}
    .btn-ghost:hover{background:rgba(255,255,255,.16)}
    .btn-sec{background:var(--canvas);color:var(--ink);border:1px solid var(--line-strong)}
    .btn-sec:hover{background:var(--canvas-2);border-color:var(--ink)}
    .reveal{opacity:0;transform:translateY(24px);transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
    .reveal.in{opacity:1;transform:none}
    .skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 18px;z-index:200}
    .skip:focus{left:0}
    :focus-visible{outline:2px solid var(--saffron);outline-offset:3px;border-radius:4px}
    .btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--saffron);outline-offset:3px;border-radius:var(--r-pill)}

    /* ===== DISCLOSURE / DETAILS (shared chevron accordions) ===== */
    details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);font-family:var(--f-head);font-weight:600;font-size:15px;color:var(--saffron-ink);min-height:44px;padding:10px 0;user-select:none}
    details>summary::-webkit-details-marker{display:none}
    details>summary::marker{content:""}
    .disclosure-chevron{flex:0 0 auto;transition:transform var(--base) var(--ease);color:currentColor}
    details[open]>summary .disclosure-chevron{transform:rotate(180deg)}
    html[lang="kn"] details>summary{font-family:var(--f-kn)}

    /* ===== NAV ===== */
    .nav{position:fixed;inset:0 0 auto 0;z-index:60;height:calc(64px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);transition:background var(--base) var(--ease),border-color var(--base)}
    @media(min-width:744px){.nav{height:calc(80px + env(safe-area-inset-top,0px))}}
    .nav-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:100%;
      gap:var(--s4);width:100%;
      padding-inline:clamp(20px,4vw,64px)}     /* breathing room: 20px mobile → up to 64px wide */
    @media(min-width:1600px){ .nav-row{padding-inline:80px} }   /* extra room on very wide screens */
    .nav-zone{min-width:0}
    .nav-zone--left{justify-self:start;display:flex;align-items:center}
    .nav-zone--center{justify-self:center;display:inline-flex;align-items:center;text-decoration:none;flex:0 0 auto}
    .nav-zone--right{justify-self:end;display:flex;align-items:center;gap:var(--s3)}
    /* K mark sizing — visible glyph fills the bar height nicely */
    .nav-logo-img{height:30px;width:auto;display:block}
    @media(min-width:744px){ .nav-logo-img{height:34px} }
    @media(min-width:1280px){ .nav-logo-img{height:38px} }
    /* brand lockup: mark + text wordmark (same identity as the footer mark; the SVG
       wordmark exports are multi-MB, so type IS the asset — free on rural 4G).
       The wordmark earns its space only where the bar can afford it (mobile + >=1280). */
    .nav-logo{gap:10px}
    .nav-logo-word{display:flex;flex-direction:column;line-height:1;text-align:left}
    .nlw-main{font-family:var(--f-head);font-weight:800;font-size:15px;letter-spacing:.2em;color:currentColor}
    .nlw-sub{font-family:var(--f-head);font-weight:600;font-size:8.5px;letter-spacing:.44em;margin-top:3px;
      color:currentColor;opacity:.72}
    @media(min-width:1024px) and (max-width:1279px){ .nav-logo-word{display:none} }
    @media(max-width:743px){ .nav-logo{gap:8px} .nlw-main{font-size:12.5px;letter-spacing:.16em} .nlw-sub{font-size:7.5px;letter-spacing:.36em} }
    /* ── DESKTOP RECOMPOSITION (>=1024, CSS-only like the mobile variant): brand takes
       position one, navigation reads beside it, actions right. A centred logo cannot
       coexist with a growing primary nav — the left zone was overflowing beneath it. ── */
    @media(min-width:1024px){
      .nav-row{grid-template-columns:auto minmax(0,1fr) auto}
      .nav-zone--center{grid-column:1;grid-row:1;justify-self:start}
      .nav-zone--left{grid-column:2;grid-row:1;padding-left:clamp(18px,2.6vw,44px)}
      .nav-zone--right{grid-column:3;grid-row:1}
    }
    /* compact density step: six items + brand + actions must fit a 1024 bar (EN and KN) */
    @media(min-width:1024px) and (max-width:1279px){
      .nav-row{padding-inline:24px;gap:var(--s3)}
      .nav-links{gap:13px}
      .nav-zone--left{padding-left:14px}
      .navx-trigger{font-size:13px}
      .navx-chev{display:none}   /* ~120px back; hover underline keeps the menu affordance */
      .nav-cta{padding-inline:15px;font-size:13.5px}
      .langseg{padding-inline:8px}
      .nav-wa{width:40px;height:40px}
    }

    .nav--on-dark{background:transparent;border-bottom:1px solid transparent}
    .nav--on-dark .nav-logo{color:#fff}
    .nav--solid{background:rgba(255,255,255,.78);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
      border-bottom:1px solid var(--line)}
    .nav--solid .nav-logo{color:var(--ink)}

    .nav-links{display:none;align-items:center;gap:var(--s6)}
    .nav-links a{position:relative;font-family:var(--f-head);font-weight:600;font-size:14px;text-decoration:none}
    html[lang="kn"] .nav-links a{font-family:var(--f-kn)}
    .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px;
      background:var(--saffron);transition:right var(--base) var(--ease)}
    .nav-links a.active::after,.nav-links a:hover::after{right:0}

    .nav-right{display:flex;align-items:center;gap:var(--s3)}
    /* ── 2026-08 header redesign: ONE visual weight per element class. Navigation is text,
       the language switch is text, WhatsApp is a glyph — the Reserve CTA is the ONLY pill.
       Removes the four competing outlined pills that crowded the bar. ── */
    .langctl{display:inline-flex;align-items:center;flex:0 0 auto}
    .langseg{position:relative;height:40px;padding-inline:10px;background:transparent;font-weight:600;
      font-size:13.5px;cursor:pointer;border:0;line-height:1;color:var(--ink);opacity:.55;
      transition:opacity var(--fast) var(--ease)}
    .langseg + .langseg{border-left:1px solid rgba(128,128,128,.35)}
    .nav--on-dark .langseg{color:#fff}
    .langseg[data-lang="kn"]{font-family:var(--f-kn)}
    .langseg:hover{opacity:.85}
    .langseg[aria-pressed="true"]{opacity:1}
    .langseg[aria-pressed="true"]::after{content:"";position:absolute;left:10px;right:10px;bottom:5px;height:2px;
      background:var(--saffron);border-radius:2px}
    /* the single header CTA — white over the dark hero, saffron once the bar goes solid */
    .nav-cta{height:40px;padding-inline:20px;font-size:14px;font-weight:600;border:0;
      transition:transform var(--fast) var(--ease),box-shadow var(--base) var(--ease),
        background-color var(--base) var(--ease),color var(--base) var(--ease)}
    .nav--on-dark .nav-cta{background:#fff;color:var(--ink)}
    .nav--on-dark .nav-cta:hover{background:#F4F1EA;transform:translateY(-1px);box-shadow:0 8px 20px rgba(0,0,0,.28)}
    .nav--solid .nav-cta,.nav--megaopen .nav-cta{background:var(--saffron);color:#1A1208}
    .nav--solid .nav-cta:hover,.nav--megaopen .nav-cta:hover{background:#FFA64D;transform:translateY(-1px);
      box-shadow:0 6px 16px rgba(255,153,51,.32)}
    /* WhatsApp: recognisable glyph, no pill — aria-label carries the name */
    .nav-wa{width:44px;height:44px;padding:0;justify-content:center;background:transparent;border:0;border-radius:50%;
      color:#25D366;transition:background-color var(--fast) var(--ease)}
    .nav-wa > span{display:none}
    .nav-wa svg{width:22px;height:22px}
    .nav--solid .nav-wa{color:#1FA855}
    .nav-wa:hover{background:rgba(37,211,102,.14)}
    @media(max-width:1023px){.nav-wa{display:none}}

    .nav-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
      background:transparent;border:0;cursor:pointer;padding:10px}
    .nav-burger span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px;
      transition:transform var(--fast) var(--ease),opacity var(--fast) var(--ease)}
    .nav--on-dark .nav-burger{color:#fff}.nav--solid .nav-burger{color:var(--ink)}
    .nav-burger[aria-expanded="true"]{color:#fff}
    .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
    .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

    .nav-overlay{position:fixed;inset:0;z-index:59;background:var(--dark);
      display:flex;flex-direction:column;gap:var(--s5);padding:96px 32px;transform:translateX(100%);
      transition:transform var(--base) var(--ease);overflow-y:auto}
    .nav-overlay.open{transform:none}
    .nav-overlay a{color:#fff;text-decoration:none;font-family:var(--f-head);font-weight:600;font-size:24px}
    html[lang="kn"] .nav-overlay a{font-family:var(--f-kn)}
    .nav-overlay .btn{align-self:flex-start;margin-top:var(--s4);font-size:16px}

    @media(min-width:1024px){
      .nav-links{display:flex}
      .nav-burger{display:none}
      .nav-overlay{display:none}
    }

    /* ===== MOBILE NAV ORDER (≤743px): hamburger LEFT · logo CENTER · language RIGHT =====
       Desktop (≥744px) is untouched. The burger + lang toggle live in the SAME right zone in the
       DOM, so order alone can't split them: the burger is absolutely pinned to the left edge and the
       logo is absolute-centred, which leaves the right zone holding only the language toggle.
       CSS-only — no markup or JS change; burger still opens the menu, toggle still switches language. */
    @media(max-width:743px){
      .nav-row{position:relative}
      .nav-burger{position:absolute;left:clamp(20px,4vw,64px);top:50%;transform:translateY(-50%)}
      .nav-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
      /* the left zone is display:none and the logo is now absolute, so the right zone is the only
         in-flow grid item — pin it to column 3 so it stays RIGHT (else it auto-places into col 1). */
      .nav-zone--right{grid-column:3}
      .langseg{height:44px}      /* ≥44px touch target on mobile */
    }

    /* ===== MEGA-MENU (desktop ≥1024px) — rendered from NAV config ===== */
    .navx{position:relative;display:flex;align-items:center}
    .navx-trigger{position:relative;display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;
      cursor:pointer;font-family:var(--f-head);font-weight:600;font-size:14px;line-height:1;padding:8px 2px;color:inherit;white-space:nowrap}
    html[lang="kn"] .navx-trigger{font-family:var(--f-kn)}
    .nav-links{gap:clamp(18px,2vw,32px)}
    .navx-chev{flex:0 0 auto;transition:transform var(--fast) var(--ease)}
    .navx.open .navx-trigger .navx-chev{transform:rotate(180deg)}
    .nav--on-dark .navx-trigger{color:#fff}
    .nav--solid .navx-trigger{color:var(--ink)}
    .navx-trigger::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
      background:var(--saffron);transition:right var(--base) var(--ease)}
    .navx-trigger[aria-expanded="true"]::after,.navx-trigger:hover::after{right:0}
    .navx-trigger[aria-expanded="true"] .navx-chev{transform:rotate(180deg)}
    .nav--megaopen .navx-trigger[aria-expanded="true"]{color:var(--saffron-ink)}
    /* direct top-level link (Careers) — same type treatment, no chevron, no panel */
    a.navx-trigger{text-decoration:none}
    .navx-trigger[aria-current="page"]::after{right:0}
    /* mobile drawer: direct L1 row rendered as a link */
    a.navrow{text-decoration:none;color:var(--ink)}

    /* ── DIRECT EXTERNAL DESTINATION (Store ↗) ── restrained by mandate. It carries the
       same face, weight and saffron underline as every other top-level entry; only the
       ↗ separates it. It must never read as a second filled button beside "Build your
       Rancher" — high-consideration and ready-to-buy are different jobs, and giving them
       the same visual weight tells the farmer nothing. One accent, one pill, in the whole
       bar. ── */
    /* no font-size of its own: the arrow INHERITS the entry it belongs to, so it can
       never become an 89th type step on a page already 79 over the R6.6 cap of 8 */
    .navx-ext{margin-left:5px;line-height:1;opacity:.72;
      transition:opacity var(--fast) var(--ease)}
    .navx-trigger:hover .navx-ext,.navx-trigger:focus-visible .navx-ext{opacity:1}
    /* mobile L1 store row: .navrow-lab already takes the free space, so the ↗ lands
       exactly where the chevron sits on every other row */
    /* 20px is an existing step on these surfaces, so matching the 18px chevron's weight
       here costs no new type value — checked against R6.6, not assumed. */
    .navrow--store .navx-ext{flex:0 0 auto;margin-left:8px;font-size:20px;opacity:1;color:#9aa0a6}

    /* ===== DESKTOP FULL-BLEED CARD MEGA-PANEL (≥1024px) — rendered from NAV config ===== */
    .navmega-scrim{position:fixed;left:0;right:0;bottom:0;top:calc(64px + env(safe-area-inset-top,0px));
      background:rgba(10,20,16,.28);opacity:0;visibility:hidden;pointer-events:none;z-index:55;
      transition:opacity var(--base) var(--ease),visibility var(--base)}
    .navmega-scrim.on{opacity:1;visibility:visible;pointer-events:auto}
    .navmega{position:fixed;left:0;right:0;top:calc(64px + env(safe-area-inset-top,0px));z-index:58;
      background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
      box-shadow:0 26px 48px -22px rgba(0,0,0,.34);max-height:calc(100vh - 80px);overflow-y:auto}
    @media(min-width:744px){ .navmega,.navmega-scrim{top:calc(80px + env(safe-area-inset-top,0px))} }
    @media(prefers-reduced-motion:no-preference){ .navmega{animation:megaIn .18s var(--ease)} }
    @keyframes megaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
    .navmega-inner{display:grid;grid-template-columns:1fr 300px;gap:clamp(24px,3vw,48px);
      max-width:1360px;margin:0 auto;padding:clamp(24px,3vw,40px) clamp(20px,4vw,64px)}
    .navmega-cats{display:flex;flex-direction:column;gap:clamp(18px,2.4vw,30px);min-width:0}
    .navcat-h{display:block;font-family:var(--f-head);font-weight:700;font-size:12px;letter-spacing:.08em;
      text-transform:uppercase;color:var(--ink-2,#6b6b70);margin-bottom:10px}
    html[lang="kn"] .navcat-h{font-family:var(--f-kn);letter-spacing:0;text-transform:none}
    .navcat-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:10px}
    .navcat-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}

    /* — product card — */
    .navcard{display:flex;gap:12px;align-items:center;padding:10px;border-radius:12px;text-decoration:none;
      border:1px solid transparent;background:#fff;transition:background var(--fast) var(--ease),border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease);position:relative;min-width:0}
    a.navcard:hover,a.navcard:focus-visible{background:var(--canvas-2);border-color:var(--line);box-shadow:0 8px 20px -12px rgba(0,0,0,.28)}
    .navcard-thumb{flex:0 0 56px;width:56px;height:56px;border-radius:9px;background:var(--canvas-2);
      display:flex;align-items:center;justify-content:center;overflow:hidden}
    .navcard-thumb img{width:100%;height:100%;object-fit:cover}
    .navcard-glyph{width:30px;height:30px;color:var(--saffron)}
    .navcard-body{display:flex;flex-direction:column;gap:1px;min-width:0}
    .navcard-name{font-family:var(--f-head);font-weight:600;font-size:14px;color:var(--ink);line-height:1.25}
    html[lang="kn"] .navcard-name{font-family:var(--f-kn);line-height:1.4}
    .navcard-meta{font-size:12px;color:#6b6b70;line-height:1.3;overflow:hidden;text-overflow:ellipsis}
    html[lang="kn"] .navcard-meta{font-family:var(--f-kn);letter-spacing:0;line-height:1.45}
    .navcard-price{font-family:var(--f-head);font-weight:700;font-size:13px;color:var(--saffron-ink);margin-top:2px;
      font-variant-numeric:tabular-nums lining-nums}
    .navcard.is-soon{cursor:default;opacity:.62}
    .navcard.is-soon .navcard-glyph{color:#9aa0a6}
    .navcard-tag{position:absolute;top:8px;right:8px;font-family:var(--f-head);font-weight:700;font-size:10px;
      letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:var(--r-pill);line-height:1.4}
    html[lang="kn"] .navcard-tag{font-family:var(--f-kn);letter-spacing:0;text-transform:none}
    .navcard-tag.is-new{background:var(--saffron);color:#3a2400}
    .navcard-tag.is-top{background:var(--green-soft);color:var(--green)}
    .navcard-tag.is-soon{background:#eceef0;color:#6b6b70}

    /* — SHOWROOM HIERARCHY (2026-08 review pass): the mega-panel read as one undifferentiated
       wall of cards — two real hero products next to nine placeholder-boxed attachments with
       equal visual weight. Split it: the lead category (Rancher Machines) gets large
       photographic cards; every other category becomes a quiet, compact catalogue row. — */
    .navcat--lead .navcat-cards{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;max-width:640px}
    .navcat--lead .navcard{flex-direction:column;align-items:stretch;padding:0;border:1px solid var(--line);
      border-radius:16px;overflow:hidden;background:#fff}
    a.navcat--lead .navcard:hover,a.navcat--lead .navcard:focus-visible{box-shadow:0 16px 32px -18px rgba(0,0,0,.28)}
    .navcat--lead .navcard-thumb{width:100%;height:150px;flex-basis:auto;border-radius:0;background:var(--canvas-2)}
    .navcat--lead .navcard-body{padding:14px 16px 16px;gap:3px}
    .navcat--lead .navcard-name{font-size:16.5px}
    .navcat--lead .navcard-meta{font-size:12.5px;white-space:normal}
    .navcat--lead .navcard-price{font-size:14.5px}
    .navcat--lead .navcard-tag{top:12px;right:12px}
    /* quiet catalogue rows: smaller tile, no card border/shadow until hover — reads as a
       parts list beneath the two hero products, not a competing product grid */
    .navcat:not(.navcat--lead) .navcard-thumb{width:40px;height:40px;flex-basis:40px}
    .navcat:not(.navcat--lead) .navcard-glyph{width:22px;height:22px}
    .navcat:not(.navcat--lead) .navcard{padding:8px 10px}
    .navcat:not(.navcat--lead) .navcard-name{font-size:13.5px}
    .navcat:not(.navcat--lead) .navcard-meta{font-size:11.5px}
    .navcat:not(.navcat--lead) .navcard-price{font-size:12px}
    /* — showroom composition (brand pass): lead imagery breathes, an explicit Explore
       affordance, spec-sheet hairline on category heads, one path to the full catalogue — */
    .navcat--lead .navcat-cards{max-width:700px}
    .navcat--lead .navcard-thumb{height:180px}
    .navcard-thumb img{transition:transform .45s var(--ease)}
    @media(prefers-reduced-motion:reduce){ .navcard-thumb img{transition:none} }
    a.navcard:hover .navcard-thumb img,a.navcard:focus-visible .navcard-thumb img{transform:scale(1.04)}
    @media(prefers-reduced-motion:reduce){ a.navcard:hover .navcard-thumb img{transform:none} }
    .navcat--lead .navcard-name{font-size:18px}
    .navcard-explore{display:block;padding:10px 16px 14px;font-family:var(--f-head);font-weight:600;
      font-size:13px;color:var(--saffron-ink)}
    html[lang="kn"] .navcard-explore{font-family:var(--f-kn)}
    .navcat--lead a.navcard:hover .navcard-explore{text-decoration:underline;text-underline-offset:3px}
    .navcat-h{display:flex;align-items:center;gap:14px;letter-spacing:.13em}
    .navcat-h::after{content:"";flex:1 1 auto;height:1px;background:var(--line)}
    .navmega-all{display:inline-flex;margin-top:4px;font-family:var(--f-head);font-weight:600;
      font-size:14px;color:var(--saffron-ink);text-decoration:none}
    .navmega-all:hover{text-decoration:underline;text-underline-offset:3px}
    html[lang="kn"] .navmega-all{font-family:var(--f-kn)}

    /* — link row (Solutions / Buy / Company / TV) — */
    .navlink{display:flex;flex-direction:column;gap:1px;padding:9px 12px;border-radius:10px;text-decoration:none;
      transition:background var(--fast) var(--ease)}
    .navlink:hover,.navlink:focus-visible{background:var(--canvas-2)}
    .navlink-name{font-family:var(--f-head);font-weight:600;font-size:14px;color:var(--ink)}
    html[lang="kn"] .navlink-name{font-family:var(--f-kn)}
    .navlink-sub{font-size:12px;color:#6b6b70}
    html[lang="kn"] .navlink-sub{font-family:var(--f-kn);letter-spacing:0}

    /* — spotlight rail — */
    .navrail{display:flex;flex-direction:column;background:var(--canvas-2);border:1px solid var(--line);
      border-radius:var(--r-card);padding:22px 20px}
    .navrail-eyebrow{font-family:var(--f-head);font-weight:700;font-size:11px;letter-spacing:.1em;
      text-transform:uppercase;color:var(--saffron-ink)}
    html[lang="kn"] .navrail-eyebrow{font-family:var(--f-kn);letter-spacing:0;text-transform:none}
    .navrail-title{font-family:var(--f-head);font-weight:700;font-size:19px;color:var(--ink);line-height:1.2;margin-top:6px}
    html[lang="kn"] .navrail-title{font-family:var(--f-kn);line-height:1.35}
    .navrail-desc{font-size:13.5px;color:#4b4b50;line-height:1.5;margin-top:8px}
    html[lang="kn"] .navrail-desc{font-family:var(--f-kn);letter-spacing:0;line-height:1.6}
    .navrail-cta{align-self:flex-start;margin-top:16px;height:42px;font-size:14px}
    .navrail-tel{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding-top:14px;
      border-top:1px solid var(--line);color:var(--ink);text-decoration:none;font-family:var(--f-head);
      font-weight:600;font-size:14px;font-variant-numeric:tabular-nums}
    .navrail-tel:hover{color:var(--saffron-ink)}

    /* ===== MOBILE TWO-LEVEL SLIDE DRAWER (<1024px overlay) — rendered from NAV config ===== */
    .nav-overlay{background:#fff;padding:calc(64px + env(safe-area-inset-top,0px)) 0 0;gap:0;display:flex;flex-direction:column}
    @media(min-width:744px){ .nav-overlay{padding-top:calc(80px + env(safe-area-inset-top,0px))} }
    .navdrawer{display:flex;flex-direction:column;flex:1 1 auto;min-height:0;width:100%}
    .navdrawer-viewport{flex:1 1 auto;overflow:hidden;position:relative}
    .navdrawer-lane{display:flex;width:200%;height:100%;transition:transform var(--base) var(--ease)}
    .navdrawer.l2 .navdrawer-lane{transform:translateX(-50%)}
    .navdrawer-l1,.navdrawer-l2{width:50%;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 20px 24px}
    /* Level-1 tap rows */
    .navrow{display:flex;align-items:center;gap:12px;width:100%;min-height:64px;background:transparent;border:0;
      border-bottom:1px solid var(--line);cursor:pointer;text-align:left;padding:12px 4px;color:var(--ink)}
    .navrow-lab{flex:1 1 auto;font-family:var(--f-head);font-weight:600;font-size:22px;line-height:1.1}
    html[lang="kn"] .navrow-lab{font-family:var(--f-kn);font-size:20px;line-height:1.3}
    .navrow-badge{flex:0 0 auto;font-family:var(--f-head);font-weight:700;font-size:10px;letter-spacing:.04em;
      text-transform:uppercase;padding:2px 8px;border-radius:var(--r-pill);background:var(--saffron);color:#3a2400}
    html[lang="kn"] .navrow-badge{font-family:var(--f-kn);letter-spacing:0;text-transform:none}
    .navrow-arw{flex:0 0 auto;color:#9aa0a6}
    /* Level-2 panes */
    .navl2pane{display:flex;flex-direction:column;gap:20px}
    .navl2pane[hidden]{display:none}   /* display:flex would beat the UA [hidden] rule */
    .navl2-back{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:44px;
      background:transparent;border:0;cursor:pointer;color:var(--saffron-ink);font-family:var(--f-head);font-weight:600;font-size:15px;padding:6px 2px}
    html[lang="kn"] .navl2-back{font-family:var(--f-kn)}
    .navl2-title{font-family:var(--f-head);font-weight:700;font-size:26px;color:var(--ink);line-height:1.1}
    html[lang="kn"] .navl2-title{font-family:var(--f-kn);line-height:1.3}
    .navdrawer-l2 .navcat-cards{grid-template-columns:1fr 1fr;gap:10px}
    .navdrawer-l2 .navcat-links{grid-template-columns:1fr;gap:4px}
    .navdrawer-l2 .navcard{flex-direction:column;align-items:flex-start;text-align:left;border:1px solid var(--line);padding:12px}
    .navdrawer-l2 .navcard-thumb{width:100%;height:74px;flex-basis:auto}
    /* sticky conversion bar — both levels */
    .navdrawer-cta{flex:0 0 auto;display:flex;gap:10px;padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px));
      border-top:1px solid var(--line);background:#fff}
    .navdrawer-cta .btn{flex:1 1 0;height:52px;justify-content:center;font-size:15px}
    .navdrawer-wa{background:#25D366;color:#fff;border:0;gap:8px}
    .navdrawer-wa:hover{background:#1eb457}
    /* Trap 3: burger is a ✕ over a WHITE drawer → force ink colour + sit above the overlay */
    .nav-burger[aria-expanded="true"]{color:var(--ink);position:relative;z-index:61}
    /* Trap 3 partner: the whole bar sits over the white drawer while it is open — the language
       toggle and logo were white-on-white. JS stamps nav--overlayopen alongside aria-expanded. */
    .nav--overlayopen .langseg,.nav--overlayopen .nav-logo{color:var(--ink)}
    .nav--overlayopen .nav-cta{background:var(--saffron);color:#1A1208}

    /* ═══ NAV GOD-MODE (2026-08-18, owner-approved): Google-Store-grade geometry in
       Keelambi's own skin. ≥1024 the bar becomes a floating frosted pill and every
       mega a detached rounded sheet; <1024 the app bar stays edge-to-edge and the
       drawer gains the flagship pane + a first-class Ask Bullman row. This is a pure
       ADDITIVE cascade layer — the base rules above are untouched, so anything not
       overridden here (and all mobile chrome) behaves exactly as before. ═══ */
    @media(min-width:1024px){
      /* LIQUID GLASS (2026-08-18 refinement): layered material — translucency, live
         blur+saturation, inner top highlight, hairline edge, controlled shadow. The
         material adapts by translucency (denser once content scrolls beneath, denser
         again under an open sheet); blur radius is constant — filters never animate. */
      /* the material lives on ::before, NOT on .nav itself: a backdrop-filter on .nav
         would make the pill the backdrop ROOT for its child sheets — their own blur
         could then only sample inside the pill, never the page (symptom: crisp hero
         text ghosting through an unblurred sheet). transform alone keeps .nav the
         containing block, so the sheets still position off the pill (top:100%). */
      .nav{top:calc(10px + env(safe-area-inset-top,0px));left:50%;right:auto;transform:translateX(-50%);
        width:min(1280px,calc(100vw - 40px));height:64px;padding-top:0;border-radius:980px;
        background:transparent;border:0;box-shadow:none}
      .nav::before{content:"";position:absolute;inset:0;border-radius:980px;z-index:0;
        background:rgba(251,250,247,.62);
        -webkit-backdrop-filter:blur(26px) saturate(1.7);backdrop-filter:blur(26px) saturate(1.7);
        border:1px solid rgba(17,24,20,.09);
        box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(255,255,255,.12),
          0 1px 2px rgba(10,20,16,.05),0 12px 32px -18px rgba(10,20,16,.28);
        transition:background-color .25s var(--ease)}
      /* ONE bar state on desktop: the pill is always light — ink chrome over any hero */
      .nav--on-dark{background:transparent;border:0}
      .nav--on-dark .nav-logo,.nav--on-dark .navx-trigger,.nav--on-dark .langseg{color:var(--ink)}
      .nav--on-dark .nav-cta{background:var(--saffron);color:#1A1208}
      .nav--on-dark .nav-cta:hover{background:#FFA64D;transform:translateY(-1px);
        box-shadow:0 6px 16px rgba(255,153,51,.32)}
      .nav--on-dark .nav-wa{color:#1FA855}
      .nav--solid{background:transparent;border:0}
      .nav--solid::before{background:rgba(251,250,247,.8)}
      .nav--megaopen::before{background:rgba(251,250,247,.82)}
      .nav-row{padding-inline:10px;gap:var(--s3);position:relative;z-index:1}
      .nav-zone--center{padding-left:16px}
      .nav-zone--left{padding-left:clamp(20px,2.4vw,40px)}
      /* body-parented scrim dims the whole page behind the glass; closes on click only */
      .navmega-scrim{top:0;background:rgba(12,18,14,.28)}
      /* mega → the SAME glass surface grown downward from the pill. #nav's backdrop-filter
         makes it the containing block for these fixed sheets, so top:100% is the pill's
         own bottom edge — the sheet tracks the pill by construction. */
      .navmega{left:50%;right:auto;transform:translate(-50%,-8px);
        width:min(1240px,calc(100vw - 40px));
        top:calc(100% + 10px);
        background:rgba(252,251,248,.84);
        -webkit-backdrop-filter:blur(30px) saturate(1.55);backdrop-filter:blur(30px) saturate(1.55);
        border:1px solid rgba(17,24,20,.09);border-radius:26px;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.6),
          0 1px 2px rgba(10,20,16,.05),0 40px 110px -36px rgba(10,20,16,.45);
        max-height:calc(100vh - 108px - env(safe-area-inset-top,0px))}
      .navmega.open{transform:translate(-50%,0)}
      /* invisible bridge across the pill→sheet gap — part of #nav's hit area, so the
         pointer crossing the moat never leaves the interactive surface */
      .nav--megaopen::after{content:"";position:absolute;left:32px;right:32px;top:100%;height:14px}
      .navmega-inner{padding:clamp(26px,2.8vw,42px) clamp(26px,3.2vw,52px)}
    }
    /* ── sheet state engine (all widths): closed = invisible, out of the a11y tree,
       no pointer hits. Open 200ms / close 160ms, opacity+transform only — the DOM is
       stable, nothing re-renders, no entry keyframe ever replays. ── */
    .navmega{visibility:hidden;opacity:0;pointer-events:none;animation:none;
      transition:opacity .16s var(--ease),transform .16s var(--ease),visibility 0s linear .16s}
    .navmega.open{visibility:visible;opacity:1;pointer-events:auto;
      transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s}
    @media(prefers-reduced-motion:reduce){
      .navmega,.navmega.open{transition:none}
    }
    /* honest fallbacks (desktop pill only — the mobile bar is untouched): no
       backdrop-filter support, or the user asked for less transparency → calm solid */
    @media(min-width:1024px){
      @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
        .nav::before,.nav--on-dark::before,.nav--solid::before,.nav--megaopen::before,
        .navmega{background:#FBFAF7}
      }
    }
    @media(min-width:1024px) and (prefers-reduced-transparency:reduce){
      .nav::before,.nav--on-dark::before,.nav--solid::before,.nav--megaopen::before,
      .navmega{background:#FBFAF7;-webkit-backdrop-filter:none;backdrop-filter:none}
    }

    /* ═══ NAVBAR FIT LADDER (P0, 2026-08-19) — six primary items + brand + four
       controls must never collide, EN or KN, at 1440/1366/1280/1180/1024.
       MEASURED CAUSE: the old density step existed only in the 1024–1279 band, so
       every width >=1280 had no protection at all; the nav list (nowrap triggers)
       overflowed its grid track and painted over the Ask Bullman pill — 22px EN /
       78px KN at 1440, 42/99 at 1280. Note the pill is capped at min(1280px,100vw-40)
       so NO desktop width has more room than 1280: the ladder below is the full set
       of states. Preservation order (owner): nav > Careers > Bullman > language >
       WhatsApp > CTA. Type never drops below 13px. ═══ */
    @media(min-width:1024px){
      /* Bullman keeps its portrait + aria-label/title; the word-label cannot coexist
         with six Kannada items at ANY desktop width, and the drawer row still reads
         "Not sure? Ask Bullman" in full. */
      .nav-bull{padding:0 6px}
      .nav-bull-lab{display:none}
      .nav-links{gap:22px}
      /* structural guard: the middle track may shrink, and the controls always paint
         above it — so even an unforeseen overflow can never hide a control again. */
      .nav-zone--left{min-width:0}
      .nav-zone--right{position:relative;z-index:2}
    }
    /* the wordmark is the cheapest sacrifice (it is not in the preservation order) */
    @media(min-width:1024px) and (max-width:1399px){
      .nav-logo-word{display:none}
    }

    /* ═══ CTA GOVERNANCE (Phase B, 2026-08-19) — Bullman consolidates, never adds.
       WhatsApp and Call are now channels INSIDE the Bullman hub, so their
       duplicate icons leave the sticky bar. The bar is left holding exactly one
       primary contextual action, and the support layer sits beside it. The
       markup is intentionally left in place (no page-content edits) — these two
       rules are the whole change and are trivially reversible. ═══ */
    .stickybar .sb-icon--wa{display:none}
    .stickybar .sb-call{display:none}

    /* the 744–768px governance gap found in the Phase B audit: the bottom-slot
       controller in showroom.js only ran at ≤743, so .roi-stickybar (bottom 74px)
       and .stickybar (bottom 0) could both occupy the bottom edge on a small
       tablet. The controller now runs to 768; this keeps the CSS in step. */
    @media(min-width:744px) and (max-width:768px){
      .roi-stickybar.bslot-off,.stickybar.bslot-off{
        transform:translateY(210%)!important;pointer-events:none}
    }

    @media(min-width:1024px) and (max-width:1279px){
      /* the tightest cell on the whole ladder is Kannada at exactly 1024 (bar =
         984px). Reclaimed from pill padding and control gaps only — type stays
         13px and every control keeps its place, WhatsApp included. */
      .nav-links{gap:9px}
      .nav-row{padding-inline:16px}
      .nav-zone--left{padding-left:10px}
      .langseg{padding-inline:6px}
      /* extra headroom so a Noto-Kannada font fallback (wider glyphs) still cannot
         collide — the CTA keeps its full label, only its padding tightens */
      .nav-cta{padding-inline:11px}
      .nav-wa{width:38px;height:38px}
    }

    /* — Ask Bullman: the one identity control in the bar (real portrait, quiet ring).
       Phones keep a clean top bar — Bullman lives as the drawer's own row there. — */
    .nav-bull{display:none;align-items:center;gap:8px;height:40px;padding:0 14px 0 6px;border-radius:980px;
      border:1px solid var(--line);background:#fff;text-decoration:none;color:var(--ink);flex:0 0 auto;
      transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease),transform var(--fast) var(--ease)}
    .nav-bull img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--canvas-2)}
    .nav-bull-lab{font-family:var(--f-head);font-weight:600;font-size:13.5px;white-space:nowrap;line-height:1}
    html[lang="kn"] .nav-bull-lab{font-family:var(--f-kn)}
    .nav-bull:hover,.nav-bull:focus-visible{border-color:var(--saffron);box-shadow:0 8px 20px -12px rgba(255,153,51,.6);transform:translateY(-1px)}
    @media(min-width:744px){ .nav-bull{display:inline-flex} }
    @media(min-width:1024px) and (max-width:1279px){ .nav-bull{padding:0 6px} .nav-bull-lab{display:none} }
    @media(max-width:743px){ .nav-bull{display:none} }

    /* — flagship showroom panel (Rancher mega): hero product on the left, the three
       journey steps + quiet explore rows + Bullman concierge on the right — */
    .navmega-inner--fs{grid-template-columns:minmax(0,1.28fr) minmax(300px,.92fr);
      grid-template-rows:auto auto 1fr;align-items:start}
    .navfs-hero{display:flex;flex-direction:column;gap:16px;text-decoration:none;min-width:0}
    /* hero owns the left column top-to-bottom; the journey stack owns the right */
    .navmega-inner--fs > .navfs-hero{grid-column:1;grid-row:1/4}
    .navmega-inner--fs > .navfs-acts{grid-column:2;grid-row:1}
    .navmega-inner--fs > .navfs-explore{grid-column:2;grid-row:2}
    .navmega-inner--fs > .navfs-bull{grid-column:2;grid-row:3;align-self:start}
    .navfs-stage{display:flex;align-items:center;justify-content:center;background:var(--canvas-2);
      border:1px solid var(--line);border-radius:20px;padding:clamp(18px,2.4vw,34px);overflow:hidden}
    /* the panel's height is set by THIS image, not by the link list beside it — capping
       it is what makes the SEV sheet shorter than the Rancher panel it replaced, which
       is the whole point of the rework (§24/§25: the menu helps you navigate the site,
       it does not take over the site). object-fit keeps the machine undistorted. */
    .navfs-stage img{width:100%;max-width:560px;height:auto;max-height:300px;object-fit:contain;
      transition:transform .5s var(--ease)}
    a.navfs-hero:hover .navfs-stage img,a.navfs-hero:focus-visible .navfs-stage img{transform:scale(1.03)}
    @media(prefers-reduced-motion:reduce){ .navfs-stage img{transition:none}
      a.navfs-hero:hover .navfs-stage img,a.navfs-hero:focus-visible .navfs-stage img{transform:none} }
    .navfs-hb{display:flex;flex-direction:column;gap:4px;padding-inline:4px}
    .navfs-name{font-family:var(--f-display);font-weight:400;letter-spacing:.03em;font-size:30px;line-height:1;color:var(--ink)}
    html[lang="kn"] .navfs-name{font-family:var(--f-kn);font-weight:700;font-size:24px;line-height:1.25;letter-spacing:0}
    .navfs-tag{font-size:14px;color:#4b4b50;line-height:1.45}
    html[lang="kn"] .navfs-tag{font-family:var(--f-kn)}
    .navfs-price{display:flex;align-items:baseline;gap:8px;margin-top:6px}
    .navfs-price-val{font-family:var(--f-head);font-weight:700;font-size:17px;color:var(--ink);
      font-variant-numeric:tabular-nums lining-nums}
    .navfs-price [data-en],.navfs-price [data-kn]{font-size:12px;color:#6b6b70}
    /* the flagship card states its own action — a product card with no verb makes the
       farmer guess whether it is a picture or a door */
    .navfs-hero-cta{margin-top:10px;font-family:var(--f-head);font-weight:700;font-size:14px;
      color:var(--saffron-ink)}
    html[lang="kn"] .navfs-hero-cta{font-family:var(--f-kn)}
    a.navfs-hero:hover .navfs-hero-cta,a.navfs-hero:focus-visible .navfs-hero-cta{
      text-decoration:underline;text-underline-offset:3px}
    html[lang="kn"] .navfs-price [data-kn]{font-family:var(--f-kn)}
    .navfs-acts{display:flex;flex-direction:column}
    .navfs-act{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 6px;text-decoration:none;
      border-bottom:1px solid var(--line);color:var(--ink)}
    .navfs-act:first-child{border-top:1px solid var(--line)}
    .navfs-act-lab{flex:1 1 auto;font-family:var(--f-head);font-weight:600;font-size:16.5px}
    html[lang="kn"] .navfs-act-lab{font-family:var(--f-kn);font-size:15.5px}
    .navfs-act .navrow-arw{color:#9aa0a6;transition:transform var(--fast) var(--ease),color var(--fast) var(--ease)}
    .navfs-act:hover .navrow-arw,.navfs-act:focus-visible .navrow-arw{transform:translateX(3px);color:var(--saffron-ink)}
    .navfs-act:hover .navfs-act-lab,.navfs-act:focus-visible .navfs-act-lab{color:var(--saffron-ink)}
    .navfs-explore{margin-top:18px}
    .navmega-inner--fs .navcat-links{grid-template-columns:1fr 1fr;gap:2px 14px}
    .navfs-bull{display:flex;align-items:center;gap:12px;margin-top:18px;padding:12px 14px;border-radius:16px;
      border:1px solid var(--line);background:var(--canvas-2);text-decoration:none;
      transition:border-color var(--fast) var(--ease),box-shadow var(--fast) var(--ease)}
    .navfs-bull:hover,.navfs-bull:focus-visible{border-color:var(--saffron);box-shadow:0 10px 26px -16px rgba(255,153,51,.55)}
    .navfs-bull img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#fff;flex:0 0 auto}
    .navfs-bull-b{display:flex;flex-direction:column;gap:1px;min-width:0}
    .navfs-bull-q{font-size:13px;color:#4b4b50}
    html[lang="kn"] .navfs-bull-q{font-family:var(--f-kn)}
    .navfs-bull-cta{font-family:var(--f-head);font-weight:700;font-size:14.5px;color:var(--saffron-ink)}
    html[lang="kn"] .navfs-bull-cta{font-family:var(--f-kn)}

    /* — drawer: flagship pane stacks; Ask Bullman is a first-class row — */
    .navdrawer-l2 .navfs-stage{border-radius:16px;padding:18px}
    .navdrawer-l2 .navfs-name{font-size:24px}
    .navdrawer-l2 .navfs-explore,.navdrawer-l2 .navfs-bull{margin-top:0}
    .navrow--bull{border-top:1px solid var(--line);margin-top:12px}
    .navrow-bull-img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--canvas-2);flex:0 0 auto}
    .navrow--bull .navrow-lab{font-size:18px}
    html[lang="kn"] .navrow--bull .navrow-lab{font-size:17px}

    /* — 'Soon' machines in the lead grid: a quiet roadmap strip, never a hollow tile
       the size of a real product. The two live machines keep the stage. — */
    .navcat--lead .navcard.is-soon{flex-direction:row;align-items:center;gap:12px;padding:10px 14px;
      border-style:dashed}
    .navcat--lead .navcard.is-soon .navcard-thumb{width:40px;height:40px;flex-basis:40px;border-radius:9px}
    .navcat--lead .navcard.is-soon .navcard-thumb img,.navcat--lead .navcard.is-soon .navcard-ph{width:26px;height:26px}
    .navcat--lead .navcard.is-soon .navcard-body{padding:0;gap:1px}
    .navcat--lead .navcard.is-soon .navcard-name{font-size:14px}
    .navcat--lead .navcard.is-soon .navcard-meta{font-size:11.5px}
    .navcat--lead .navcard.is-soon .navcard-tag{position:static;order:3;margin-left:auto;flex:0 0 auto}
    .navdrawer-l2 .navcat--lead .navcard.is-soon{grid-column:1/-1;flex-direction:row;align-items:center}

    /* — drawer chrome fixes — */
    @media(max-width:743px){
      /* the ✕ stays exactly where the burger was (left-pinned). The generic
         aria-expanded rule sets position:relative for z-stacking on wider bars,
         but here that re-enters the right zone's flow: the toggle jumped sides
         and pushed the language control under the brand lockup. */
      .nav-burger[aria-expanded="true"]{position:absolute;z-index:61}
    }
    .navdrawer-cta .btn{white-space:nowrap;padding-inline:12px}

    /* ═══ DISPLAY TYPE (2026-08 brand pass · blueprint direction): Bebas Neue is the
       machinery voice — major headlines, big numerals, the wordmark. Kannada display
       falls back to Noto Sans Kannada 700 (Bebas carries no Kannada glyphs) exactly as
       the visual blueprint specifies. Interface/body runs DM Sans. ═══ */
    .sec-title{font-family:var(--f-display);font-weight:400;letter-spacing:.015em;line-height:.98;
      font-size:calc(var(--t-h1)*1.12)}
    html[lang="kn"] .sec-title{font-size:var(--t-h1)}

    /* ── Shared type-system classes (mirrored in kb.css so both stylesheets expose the
       same vocabulary). Layer B = .kb-statement, Layer C = .kb-pen. A page may only use
       .kb-pen if it also loads Caveat in its font link — otherwise it degrades to the
       system cursive fallback. Accent only: one or two per section, never a paragraph. ── */
    .kb-statement{font-family:var(--f-display);font-weight:400;line-height:.98;letter-spacing:.02em;
      font-size:clamp(32px,4.6vw,60px);color:var(--ink)}
    html[lang="kn"] .kb-statement{font-family:var(--f-kn);font-weight:700;line-height:1.32;
      letter-spacing:0;font-size:clamp(25px,3.6vw,44px)}
    .kb-pen{font-family:var(--f-hand);font-weight:600;line-height:1.14;letter-spacing:.01em;
      font-size:clamp(19px,2.1vw,28px);color:var(--saffron-ink);display:inline-block;
      transform:rotate(-1.8deg);transform-origin:left bottom}
    .kb-pen--lg{font-size:clamp(24px,2.9vw,38px)}
    .kb-pen--dark{color:var(--saffron)}
    /* Kannada: Noto carries the note — upright, because rotated Kannada script reads as
       broken rather than handwritten. Still an aside via saffron ink and smaller size. */
    html[lang="kn"] .kb-pen{font-family:var(--f-kn);font-weight:500;transform:none;
      font-size:clamp(15px,1.6vw,19px);line-height:1.55;letter-spacing:0}
    @media(prefers-reduced-motion:reduce){.kb-pen{transform:none}}
    html .story-h{font-family:var(--f-display);font-weight:400;letter-spacing:.015em;line-height:.96;
      font-size:clamp(36px,5.4vw,74px)}
    html .hpill-stat{font-family:var(--f-display);font-weight:400;letter-spacing:.025em;
      font-size:clamp(28px,3.4vw,46px)}
    html[lang="kn"] .hpill-stat{font-family:var(--f-kn);font-weight:700;letter-spacing:0;
      font-size:clamp(22px,2.8vw,36px)}
    .navl2-title{font-family:var(--f-display);font-weight:400;letter-spacing:.025em;font-size:30px}
    html[lang="kn"] .navl2-title{font-family:var(--f-kn);font-weight:700;letter-spacing:0;font-size:24px}
    .navrail-title{font-family:var(--f-display);font-weight:400;letter-spacing:.025em;font-size:23px}
    html[lang="kn"] .navrail-title{font-family:var(--f-kn);font-weight:700;letter-spacing:0;font-size:19px}
    .nlw-main{font-family:var(--f-display);font-weight:400;font-size:17.5px;letter-spacing:.15em}
    .fmk-line{font-family:var(--f-display)!important;font-weight:400!important;letter-spacing:.02em!important}

    /* while a mega-panel is open, force the bar solid even over the hero (so triggers read) */
    .nav--megaopen{background:rgba(255,255,255,.9)!important;backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);border-bottom:1px solid var(--line)}
    .nav--megaopen .navx-trigger,.nav--megaopen .nav-logo,.nav--megaopen .langseg{color:var(--ink)}
    .nav--megaopen .nav-wa{color:#1FA855}

    /* desktop-only surface; the `hidden` attribute governs open/close at ≥1024px */
    @media(max-width:1023px){ .navmega,.navmega-scrim{display:none!important} }

    /* ===== HERO (Tesla-style product identity over cinematic video) ===== */
    .hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:var(--dark)}
    .hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
    .hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to bottom,rgba(10,20,16,.55) 0%,transparent 35%,transparent 70%,rgba(10,20,16,.35) 100%)}
    /* Tesla-style top model-name label (text, not image — machine stays unobstructed) */
    .hero-model{position:absolute;top:clamp(76px,9vh,108px);left:50%;transform:translateX(-50%);
      z-index:3;text-align:center;pointer-events:none;
      text-shadow:0 1px 12px rgba(0,0,0,.35)}
    .hero-model-name{font-family:var(--f-head);font-weight:700;letter-spacing:-.02em;
      font-size:clamp(28px,4vw,52px);color:#fff;line-height:1.05;margin:0}
    .hero-lockup{width:clamp(260px,18vw,380px);height:auto;display:block;margin:0 auto;
      max-width:90vw}
    @media(prefers-reduced-motion:no-preference){
      .hero-model{opacity:0;transform:translateX(-50%) translateY(12px);
        animation:heroModelIn .6s var(--ease) .15s forwards}
    }
    /* keyframe preserves translateX(-50%) at the end so the label stays centred (heroIn's
       transform:none would have dropped the centring offset) */
    @keyframes heroModelIn{from{opacity:0;transform:translateX(-50%) translateY(12px)}
      to{opacity:1;transform:translateX(-50%)}}

    .hero-scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:3;color:rgba(255,255,255,.6);animation:bob 2.2s var(--ease) infinite}
    @keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}

    /* MOBILE hero — full-bleed cinematic video (matches desktop), CAPPED height so it's never a
       100svh void. The base .hero-model (absolute, top, animated) is left in place so the lockup
       overlays the bright sky at the top — dark-ink reads there. The 2×2 stat grid sits in the dark
       glass strip at the bottom (hero-data block below). Poster = a real frame of the clip, so the
       iOS Low-Power fallback shows the scene with the same overlay legibility — no white washout. */
    @media(max-width:743px){
      /* MOBILE RECOMPOSITION: vertical stack — machine stage on top, stats band in its OWN
         space below (no more bottom-anchored glass overlay sitting on the machine). */
      .hero{height:auto;min-height:0;max-height:none;--hero-stage:clamp(360px,54svh,460px)}
      .hero-scroll-hint{display:none}
      /* confine the cinematic video + scrim to the top stage; the band flows beneath it */
      .hero-video{height:var(--hero-stage);inset:0 0 auto 0}
      .hero-scrim{height:var(--hero-stage);inset:0 0 auto 0;
        background:linear-gradient(to bottom,rgba(8,16,12,.14) 0%,transparent 30%,transparent 64%,rgba(8,16,12,.35) 100%)}
      .hero-lockup{width:min(58vw,230px)}
    }

    /* ===== HERO DATA STRIP (Tesla-style glass, welded to the hero's bottom edge) ===== */
    .hero-data{position:absolute;left:0;right:0;bottom:0;z-index:4;
      padding:clamp(16px,3vw,28px) clamp(16px,5vw,64px) clamp(20px,3vw,32px);
      background:linear-gradient(to top, rgba(8,16,12,.88) 0%, rgba(8,16,12,.62) 50%, rgba(8,16,12,0) 100%);
      backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);
      -webkit-mask-image:linear-gradient(to top,#000 72%,transparent 100%);
              mask-image:linear-gradient(to top,#000 72%,transparent 100%)}
    .hero-data-pillars{max-width:1100px;margin-inline:auto;display:flex;align-items:center;
      justify-content:center;gap:clamp(20px,4vw,56px);flex-wrap:wrap}
    .hpill{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px}
    .hpill-stat{font-family:var(--f-head);font-weight:700;line-height:1;color:#fff;
      font-size:clamp(24px,3vw,40px);letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
    .hpill-lab{font-size:clamp(11px,1.1vw,13px);font-weight:500;color:rgba(255,255,255,.72);
      letter-spacing:.01em;max-width:16ch}
    html[lang="kn"] .hpill-lab{font-family:var(--f-kn);max-width:22ch;line-height:1.35}
    .hero-data-cta{margin-left:0}
    /* PHASE B: the hero carries ONE journey (primary) and the reservation
       (secondary) side by side. .btn-sec is authored for light surfaces, so over
       the dark hero it gets a legible glass treatment instead of dim ink. */
    /* the pair travels together: one group, so the reservation can never wrap
       away from the journey it belongs to */
    /* 2026-08-23: the group owns the offset and stacks the two considered actions
       over the tertiary one. The PAIR stays a row so Reserve and Eligibility read
       as a deliberate couple; Doti sits beneath, never as a third button. */
    .hero-cta-group{display:inline-flex;flex-direction:column;align-items:center;
      gap:6px;flex:0 0 auto;margin-left:clamp(8px,2vw,24px)}
    .hero-cta-pair{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;
      margin-left:0}
    .hero-data-cta2{background:rgba(255,255,255,.14);color:#fff;
      border:1px solid rgba(255,255,255,.42);
      -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
    .hero-data-cta2:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.62);color:#fff}
    /* the ghost sits on a photograph, so its focus ring needs a dark backing to stay
       visible over a bright frame — the saffron outline alone can vanish on soil */
    .hero-data-cta2:focus-visible{outline:2px solid var(--saffron);outline-offset:3px;
      background:rgba(8,16,12,.55);border-color:rgba(255,255,255,.72)}
    /* NO html[lang="kn"] .hero-data-cta2 font rule here on purpose: this label has no
       sourced Kannada, so in ಕನ್ನಡ mode it shows the ENGLISH fallback — a face rule on the
       BUTTON would style that English text in the Kannada face. The global
       html[lang="kn"] [data-kn] rule already scopes the face to the Kannada span, which
       is the only thing that should ever carry it. */
    .hero-data-hook{max-width:1100px;margin:clamp(10px,1.5vw,16px) auto 0;text-align:center;
      font-size:clamp(12px,1.2vw,14px);font-weight:500;color:rgba(255,255,255,.62)}
    html[lang="kn"] .hero-data-hook{font-family:var(--f-kn)}
    @media(max-width:743px){
      /* 2×2 stat grid + full-width CTA, kept INSIDE the dark glass strip (absolute, bottom — the
         desktop position/backdrop are deliberately NOT overridden). The gradient is strengthened so
         white text reads over the mid-bright soil at the worst-case bright frame, not just dark ones. */
      /* the stat band now flows BELOW the machine stage as its own solid band —
         no overlap, no gradient-over-image, no mask fade, no backdrop blur. */
      .hero-data{position:relative;left:auto;right:auto;bottom:auto;margin-top:var(--hero-stage);
        background:var(--dark);backdrop-filter:none;-webkit-backdrop-filter:none;
        -webkit-mask-image:none;mask-image:none;
        padding:clamp(20px,6vw,28px) 16px calc(20px + env(safe-area-inset-bottom))}
      .hero-data-pillars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px;
        max-width:none;width:100%;justify-content:stretch}
      .hpill{align-items:center;text-align:center;min-width:0}
      .hpill-lab,html[lang="kn"] .hpill-lab{max-width:100%;overflow-wrap:break-word}
      .hpill-stat{font-size:26px}
      .hero-data-cta{grid-column:1/-1;order:9;justify-self:center;width:100%;max-width:320px;margin-top:10px;margin-left:0}
      /* phones: one column, in commitment order — Reserve, then Eligibility, then
         Doti. The GROUP is now the grid item (it holds the tertiary link too), so the
         placement moved off .hero-cta-pair; leaving it there would have made the
         tertiary link a sibling of the stat pills instead of the actions. */
      .hero-cta-group{grid-column:1/-1;order:9;justify-self:center;width:100%;max-width:320px;
        margin-top:10px;margin-left:0;gap:4px}
      .hero-cta-pair{flex-direction:column;gap:8px;width:100%;margin-top:0;margin-left:0}
      /* the legacy order:9 was written for the pillars grid; inside the pair it
         would push the PRIMARY below the reservation. Reset both. */
      .hero-cta-pair .hero-data-cta{order:0;width:100%;max-width:none;margin-top:0}
      .hero-data-cta2{order:1;width:100%;margin-left:0}
      .hero-data-hook{display:none}  /* keep mobile hero uncluttered; hook lives in #story on mobile */
    }

    @media(prefers-reduced-motion:reduce){
      .hero-scroll-hint{animation:none}
    }

    .mono{font-variant-numeric:tabular-nums lining-nums}

    /* ===== STORY (editorial section after hero) ===== */
    .story-inner{max-width:880px}
    /* full-sentence headline (not a 3-word stack): smaller display size, fits beside founder photo */
    .story-h{font-family:var(--f-head);font-weight:700;font-size:clamp(30px,4.5vw,60px);line-height:1.1;
      letter-spacing:-0.025em;color:var(--ink);margin:18px 0 22px}
    html[lang="kn"] .story-h{font-family:var(--f-kn);font-size:clamp(26px,4vw,48px);letter-spacing:0;line-height:1.35;font-weight:700}
    .story-sub{font-family:var(--f-body);font-size:clamp(16px,1.6vw,19px);line-height:1.6;
      color:var(--ink-2);max-width:60ch;margin-bottom:32px}
    html[lang="kn"] .story-sub{font-family:var(--f-kn)}
    .story-ctas{display:flex;gap:12px;flex-wrap:wrap}
    @media(max-width:430px){.story-ctas .btn{width:100%}}
    /* ===== STORY TRUST BADGES (in-system SVG · thin 0.5px border · hover lift) ===== */
    .story-badges{list-style:none;display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 0;padding:0}
    .sbadge{flex:1 1 200px;min-width:0;display:flex;align-items:flex-start;gap:10px;
      padding:12px 14px;background:#fff;border:0.5px solid var(--line-strong);border-radius:14px;
      transition:transform var(--base) var(--ease),box-shadow var(--base) var(--ease),border-color var(--base) var(--ease)}
    .sbadge:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.07);border-color:var(--line)}
    .sbadge-ico{flex:0 0 auto;width:26px;height:26px}
    .sbadge-ico svg{width:26px;height:26px;display:block}
    .sbadge--navy .sbadge-ico{color:var(--navy)}
    .sbadge--saffron .sbadge-ico{color:var(--saffron-ink)}   /* AA-safe saffron for the small icon */
    .sbadge--green .sbadge-ico{color:var(--green)}
    .sbadge-txt{min-width:0}
    .sbadge-title{display:block;font-family:var(--f-head);font-weight:700;font-size:13.5px;
      line-height:1.2;letter-spacing:-0.01em;color:var(--ink)}
    html[lang="kn"] .sbadge-title{font-family:var(--f-kn);letter-spacing:0;line-height:1.3}
    .sbadge-sub{display:block;font-size:11.5px;line-height:1.35;color:var(--ink-2);margin-top:3px}
    html[lang="kn"] .sbadge-sub{font-family:var(--f-kn)}
    @media(max-width:430px){.sbadge{flex:1 1 100%}}

    /* ===== KARNATAKA ILLUMINATES ===== */
    .kt{position:relative;overflow:hidden;background:var(--canvas);text-align:center}
    /* sunrise aurora — invisible until the section reveals, then warms in very softly */
    .kt-aurora{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.6s var(--ease);
      background:
        radial-gradient(55% 40% at 50% 6%, rgba(255,153,51,.12), transparent 70%),
        radial-gradient(48% 38% at 82% 26%, rgba(120,18,22,.07), transparent 70%),
        radial-gradient(42% 38% at 16% 24%, rgba(19,136,8,.05), transparent 70%);}
    .kt.lit .kt-aurora{opacity:1}
    @media(prefers-reduced-motion:no-preference){
      .kt.lit .kt-aurora{animation:ktDrift 22s ease-in-out infinite alternate}
    }
    @keyframes ktDrift{
      0%{transform:translate3d(0,0,0) scale(1)}
      100%{transform:translate3d(0,-14px,0) scale(1.04)}}
    .kt-wrap{position:relative;max-width:960px}

    .kt-eyebrow{display:block;margin-bottom:var(--s4)}
    .kt-h{font-family:var(--f-head);font-size:var(--t-h1);font-weight:700;line-height:1.05;
      letter-spacing:-0.025em;margin-bottom:var(--s6);
      color:var(--brand-maroon);
      background:linear-gradient(100deg,var(--brand-maroon) 0%,#9A2A2E 45%,var(--brand-maroon) 100%);
      background-size:200% 100%;background-position:100% 0;
      -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
      transition:background-position 2s var(--ease)}
    .kt.lit .kt-h{background-position:0 0}
    html[lang="kn"] .kt-h{font-family:var(--f-kn);letter-spacing:0;line-height:1.35}

    /* --- map --- */
    .kt-map{max-width:340px;margin:0 auto;position:relative}
    .kt-map svg{width:100%;height:auto;display:block;overflow:visible}
    .kt-outline{stroke-dasharray:var(--len,2800);stroke-dashoffset:var(--len,2800);
      transition:stroke-dashoffset 1.8s var(--ease);
      fill:url(#ktFill);stroke:var(--brand-maroon);stroke-opacity:.55;stroke-width:1.1;
      filter:drop-shadow(0 8px 24px rgba(120,18,22,.10))}
    .kt.lit .kt-outline{stroke-dashoffset:0}
    .kt-dot{fill:var(--saffron);opacity:0;transform:scale(.4);transform-origin:center;transform-box:fill-box;
      transition:opacity .5s var(--ease),transform .5s var(--ease);
      /* stagger: each dot lights --i*140ms after the outline starts drawing */
      transition-delay:calc(.6s + var(--i) * .14s)}
    .kt.lit .kt-dot{opacity:1;transform:scale(1)}
    /* gentle perpetual glow once lit */
    @media(prefers-reduced-motion:no-preference){
      .kt.lit .kt-dot{animation:ktPulse 3.2s var(--ease) infinite;animation-delay:calc(1.4s + var(--i) * .14s)}
    }
    @keyframes ktPulse{
      0%,100%{filter:drop-shadow(0 0 2px rgba(255,153,51,.45))}
      50%{filter:drop-shadow(0 0 9px rgba(255,153,51,.95)) drop-shadow(0 0 3px rgba(120,18,22,.6))}}
    .kt-links line{stroke-dasharray:200;stroke-dashoffset:200;stroke:url(#ktLink);stroke-width:1;
      transition:stroke-dashoffset 1s var(--ease);transition-delay:1.6s}
    .kt.lit .kt-links line{stroke-dashoffset:0}
    /* junction halos (sparks) behind each district dot */
    .kt-spark{fill:url(#ktGlow);opacity:0;transform-origin:center;transform-box:fill-box;
      transition:opacity .6s var(--ease)}
    .kt.lit .kt-spark{opacity:1}
    @media(prefers-reduced-motion:no-preference){
      .kt.lit .kt-spark{animation:ktSparkPulse 2.8s var(--ease) infinite;animation-delay:calc(2s + var(--i,0)*.14s)}
    }
    @keyframes ktSparkPulse{0%,100%{transform:scale(.6);opacity:.2}50%{transform:scale(1.3);opacity:.7}}
    /* one-shot arrival ping ring per district */
    .kt-ring{fill:none;stroke:var(--brand-maroon);stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center}
    @media(prefers-reduced-motion:no-preference){
      .kt.lit .kt-ring{animation:ktPing .9s var(--ease) forwards;animation-delay:calc(.6s + var(--i)*.14s)}
    }
    @keyframes ktPing{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(3)}}
    /* cursor-follow glow on the map (desktop, pointer only) */
    @media(hover:hover) and (pointer:fine){
      .kt-map::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:16px;opacity:.7;
        background:radial-gradient(160px 160px at var(--mx,50%) var(--my,50%),
          rgba(255,153,51,.16), rgba(120,18,22,.06) 40%, transparent 72%);
        transition:opacity .4s var(--ease);}
    }

    .kt-map-caption{margin:var(--s5) auto 0;max-width:46ch;color:var(--ink-2);
      font-size:clamp(14px,1.4vw,16px);line-height:1.6;font-style:italic;
      transition-delay:2.2s}   /* fades in last, as the closing line of the map act */
    html[lang="kn"] .kt-map-caption{font-family:var(--f-kn);font-style:normal}

    /* --- stats --- */
    .kt-stats{margin-top:var(--s9);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
    @media(max-width:640px){.kt-stats{grid-template-columns:repeat(2,1fr);gap:var(--s6) var(--s4)}}
    /* Numbers rendered as lit maroon->saffron metal, not flat ink */
    .kt-num{display:block;font-family:var(--f-head);font-weight:700;
      font-size:clamp(30px,4.4vw,52px);line-height:1;font-variant-numeric:tabular-nums;
      background:linear-gradient(100deg,
        var(--brand-maroon) 0%, #9A2A2E 34%, var(--saffron) 64%, var(--brand-maroon) 100%);
      background-size:220% 100%;
      background-position:100% 0;
      -webkit-background-clip:text;background-clip:text;
      -webkit-text-fill-color:transparent;color:var(--brand-maroon); /* fallback if clip unsupported */
      letter-spacing:-0.01em;
      transition:background-position 1.6s var(--ease);}
    /* when the section ignites, the light sweeps across the numerals once */
    .kt.lit .kt-num{background-position:0 0}
    /* a hairline maroon underscore that draws in under each number after it lands */
    .kt-stat{position:relative}
    .kt-stat::after{content:"";position:absolute;left:50%;bottom:-10px;height:2px;width:0;
      background:linear-gradient(90deg,var(--brand-maroon),var(--saffron));border-radius:2px;
      transform:translateX(-50%);transition:width .7s var(--ease);transition-delay:1.2s}
    .kt.lit .kt-stat::after{width:38px}
    /* 4th stat: the phase name leads, status sits small beneath it */
    .kt-stat--status{display:flex;flex-direction:column;justify-content:flex-start;gap:var(--s2)}
    .kt-stat--status::after{display:none}   /* green dot is the status signal; underscore would be redundant */
    .kt-phase{font-family:var(--f-head);font-weight:700;letter-spacing:-0.015em;line-height:1.1;
      font-size:clamp(18px,2vw,24px);
      /* same lit maroon→saffron fill as .kt-num, so it belongs to the row */
      background:linear-gradient(100deg,var(--brand-maroon) 0%,#9A2A2E 45%,var(--saffron) 90%);
      background-size:200% 100%;background-position:100% 0;
      -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--brand-maroon);
      transition:background-position 1.6s var(--ease)}
    .kt.lit .kt-phase{background-position:0 0}
    html[lang="kn"] .kt-phase{font-family:var(--f-kn);letter-spacing:0;line-height:1.35}
    .kt-phase-status{display:inline-flex;align-items:center;gap:6px;
      font-family:var(--f-head);font-weight:600;font-size:13px;color:var(--green);letter-spacing:.02em}
    html[lang="kn"] .kt-phase-status{font-family:var(--f-kn)}
    /* small check dot before "Complete" to read as a finished status, not a headline */
    .kt-phase-status::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);
      box-shadow:0 0 0 3px rgba(19,136,8,.15)}
    .kt-lab{display:block;margin-top:var(--s2);color:var(--ink-2);font-size:13px;letter-spacing:.01em}
    html[lang="kn"] .kt-lab{font-family:var(--f-kn)}

    /* --- pillars --- */
    .kt-pillars{margin-top:var(--s9);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
    @media(max-width:760px){.kt-pillars{grid-template-columns:repeat(2,1fr)}}
    .kt-pillar{padding:var(--s6) var(--s4);border:0.5px solid var(--line);border-radius:var(--r-card);
      background:var(--canvas);
      opacity:0;transform:translateY(16px);
      transition:opacity .6s var(--ease),transform .6s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);
      transition-delay:calc(var(--j) * .1s)}
    .kt.lit .kt-pillar{opacity:1;transform:none}
    @media(hover:hover){.kt-pillar:hover{transform:translateY(-4px);box-shadow:0 12px 30px -12px rgba(0,0,0,.12);border-color:var(--line-strong)}}
    .kt-pillar-t{font-family:var(--f-head);font-weight:600;font-size:15px;color:var(--ink);letter-spacing:-0.01em}
    html[lang="kn"] .kt-pillar-t{font-family:var(--f-kn)}

    /* --- finale --- */
    .kt-finale{margin-top:var(--s9)}
    .kt-mission{font-family:var(--f-head);font-weight:700;letter-spacing:-0.02em;
      font-size:clamp(22px,3vw,34px);color:var(--brand-maroon);display:flex;flex-wrap:wrap;justify-content:center;gap:.32em}
    html[lang="kn"] .kt-mission{font-family:var(--f-kn);letter-spacing:0}
    .kt-word{display:inline-block;opacity:0;transform:translateY(14px) scale(.98);
      transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--k) * .18s)}
    .kt.lit .kt-word{opacity:1;transform:none}
    .kt-word:last-child{color:var(--saffron-ink);-webkit-text-fill-color:var(--saffron-ink)}
    /* mission: gate word-wrappers per language so there are no empty animated boxes.
       EN staggers word-by-word; KN reveals as one approved sentence. */
    html[lang="kn"] .kt-en-only{display:none}
    html[lang="en"] .kt-kn-only{display:none}
    .kt-cta-row{margin-top:var(--s7);display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
    .kt-cta-note{color:var(--ink-2);font-size:13.5px}
    html[lang="kn"] .kt-cta-note{font-family:var(--f-kn)}

    /* --- reduced motion: everything visible instantly, no draw/pulse/stagger --- */
    @media(prefers-reduced-motion:reduce){
      .kt-aurora{transition:none;animation:none;transform:none}
      .kt-outline{transition:none;stroke-dashoffset:0}
      .kt-dot,.kt-links line,.kt-pillar,.kt-word{transition:none}
      .kt.lit .kt-dot{animation:none}
      .kt-dot{opacity:1;transform:none}
      .kt-links line{stroke-dashoffset:0}
      .kt-pillar{opacity:1;transform:none}
      .kt-word{opacity:1;transform:none}
      .kt-num{transition:none;background-position:0 0}
      .kt-phase{transition:none;background-position:0 0}
      .kt-h{transition:none;background-position:0 0}
      .kt-stat::after{transition:none;width:38px}
      .kt-spark,.kt-ring{animation:none;opacity:0}
      .kt-map-caption{transition:none}
    }

    /* ===== STORY LAYOUT (2-col: content left ~55%, founder+machine right ~45%) ===== */
    .story-grid{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);
      align-items:center;gap:clamp(24px,4vw,64px)}
    /* content column: drop the 880px cap so it fills its 55% track (typography/spacing untouched) */
    .story-grid .story-inner{max-width:none}
    /* image column: no card, no border, no shadow, no radius — merges into the white section */
    .story-media{position:relative;min-width:0}
    .story-img{display:block;width:100%;height:auto;object-fit:contain;
      background:transparent;border:0;border-radius:0;box-shadow:none}
    /* "break the grid" on large screens — let the product overflow the container edge slightly
       (clipped by body overflow-x:hidden; clamp caps it so the page never scrolls sideways) */
    @media(min-width:1280px){
      .story-media{margin-right:clamp(-60px,-3vw,-40px)}
    }
    /* MOBILE: content first, image below, full width */
    @media(max-width:899px){
      .story-grid{grid-template-columns:1fr;gap:clamp(24px,6vw,40px)}
      .story-media{margin-right:0;order:2}
      .story-inner{order:1}
      .story-img{width:100%}
    }

    /* ===== POWERS (P-1 scaffold — static; motion in P-2/P-3) ===== */
    .powers{background:var(--dark);color:var(--ink-on-dark);padding:0}
    /* Item B: NORMAL-FLOW tabbed section on ALL devices — no pin, no scrub, no forced 100svh.
       Sizes to its content with comfortable padding; the page scrolls straight through and past it. */
    .powers-pin{min-height:0;height:auto;padding-block:clamp(56px,8vh,96px);
      padding-left:max(env(safe-area-inset-left),20px);padding-right:max(env(safe-area-inset-right),20px)}
    .powers-inner{width:100%}
    .powers .eyebrow{color:var(--saffron)}
    /* intro is the section header (modest) — the per-panel word and the finale are the big payoffs (dedupe) */
    .powers-title{color:#fff;margin-top:var(--s2);font-size:clamp(22px,3vw,36px);line-height:1.05}
    .powers-support{margin-top:var(--s3);font-size:clamp(15px,1.6vw,19px);color:var(--ink-on-dark);max-width:60ch}
    html[lang="kn"] .powers-support{font-family:var(--f-kn)}

    .powers-tabs{display:flex;gap:var(--s6);flex-wrap:wrap;margin-top:clamp(10px,2vh,20px)}
    .ptab{background:none;border:0;cursor:pointer;padding:10px 0;min-height:44px;
      font-family:var(--f-head);font-weight:600;font-size:clamp(14px,1.5vw,17px);
      color:var(--ink-on-dark-2);transition:color var(--fast) var(--ease)}
    .ptab:hover{color:#fff}
    .ptab[aria-selected="true"]{color:#fff}
    html[lang="kn"] .ptab{font-family:var(--f-kn)}

    /* ===== POWERS STAGE — three zones: capability title (L) · real machine (C) · single KPI (R) ===== */
    .powers-stage{position:relative;margin-top:clamp(12px,2.5vh,28px);
      display:grid;grid-template-columns:1fr;gap:var(--s4);align-items:center}
    @media(min-width:744px){
      .powers-stage{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(16px,2vw,40px)}
    }

    /* LEFT — capability word + benefit (5 stacked, one active) */
    .pz-left{position:relative;min-height:clamp(110px,16vh,190px)}
    .pz-left .ppanel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
      gap:var(--s3);max-width:34ch}
    .pz-left .ppanel[hidden]{display:none}
    .pz-left .ppanel.is-active{position:relative}
    /* Item B: calmer, confident-but-not-dominating type (all devices) */
    .ppanel-word{font-family:var(--f-head);font-weight:700;letter-spacing:-.03em;line-height:1.1;
      font-size:clamp(26px,3.2vw,42px);color:#fff;margin:0}
    html[lang="kn"] .ppanel-word{font-family:var(--f-kn);letter-spacing:0;font-size:clamp(24px,3vw,38px);line-height:1.15}
    .ppanel-word--sd{font-size:clamp(24px,3vw,40px);line-height:1.1}
    html[lang="kn"] .ppanel-word--sd{font-size:clamp(22px,2.8vw,36px);line-height:1.15}
    .ppanel-benefit{font-size:clamp(15px,1.2vw,17px);line-height:1.6;color:var(--ink-on-dark);max-width:46ch;margin:0}
    .ppanel-cta{display:inline-block;margin-top:var(--s4);font-family:var(--f-head);
      font-weight:600;font-size:14px;color:var(--saffron);text-decoration:underline;
      text-underline-offset:3px}
    .ppanel-cta:hover{color:#fff}
    html[lang="kn"] .ppanel-cta{font-family:var(--f-kn)}
    html[lang="kn"] .ppanel-benefit{font-family:var(--f-kn)}

    /* CENTER — the persistent real machine + spotlight overlay (no fabricated parts) */
    .pz-center{display:flex;justify-content:center;align-items:center;min-width:0;perspective:1100px}
    .powers-machine{position:relative;width:100%;max-width:clamp(260px,34vw,440px);margin:0 auto;
      will-change:transform;transition:transform var(--base) var(--ease)}
    /* uniform 16:10 product-demo card for all 5 action photos (cover-crop, never distort) */
    .machine-img{display:block;width:100%;aspect-ratio:16/10;height:auto;max-height:min(46svh,420px);
      object-fit:cover;object-position:center;border-radius:16px;margin:0 auto;background:#fff;
      box-shadow:0 8px 30px rgba(0,0,0,.18)}

    /* RIGHT — ONE KPI (single number + label) */
    .pz-right{display:flex;flex-direction:column;justify-content:center;align-items:flex-end;
      text-align:right;min-height:clamp(70px,11vh,130px)}
    .pkpi{display:flex;flex-direction:column;gap:6px}
    .pkpi-num{font-family:var(--f-head);font-weight:700;line-height:1.05;color:var(--saffron);
      font-size:clamp(28px,3vw,40px);font-variant-numeric:tabular-nums lining-nums}
    .pkpi-lab{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-on-dark-2)}
    html[lang="kn"] .pkpi-lab{font-family:var(--f-kn);text-transform:none;letter-spacing:0}

    /* reduced-motion / no-gsap: machine switches instantly */
    @media(prefers-reduced-motion:reduce){
      .powers-machine{transition:none}
    }

    /* closing finale — now a permanent block below the capability card (no 6th scrub beat) */
    .ppanel-finale{display:grid;align-content:center;gap:var(--s4);max-width:820px;margin-inline:auto;
      grid-column:1/-1;margin-top:clamp(28px,4vh,52px)}
    .ppanel-finale[hidden]{display:none}
    .finale-icons{display:flex;gap:var(--s4);color:var(--saffron);margin-bottom:var(--s3)}
    .finale-ic-wrap{width:clamp(34px,5vw,52px);height:clamp(34px,5vw,52px);opacity:0;transform:translateY(10px)}
    .finale-ic-wrap svg{width:100%;height:100%}
    .finale-h{font-family:var(--f-head);font-weight:700;letter-spacing:-.03em;line-height:1.1;
      font-size:clamp(26px,4.4vw,52px);color:#fff}
    html[lang="kn"] .finale-h{font-family:var(--f-kn);letter-spacing:0;font-size:clamp(24px,3.6vw,44px);line-height:1.15}
    .finale-sub{font-size:clamp(16px,1.8vw,20px);color:var(--ink-on-dark);max-width:46ch}
    html[lang="kn"] .finale-sub{font-family:var(--f-kn)}
    /* P-7 money story: three one-number benefit cards (NO price — that lives in the pricing section) */
    .finale-cards{display:grid;gap:var(--s4);margin-top:var(--s4);
      grid-template-columns:1fr}
    @media(min-width:769px){.finale-cards{grid-template-columns:repeat(3,1fr)}}
    .fcard{display:flex;flex-direction:column;gap:6px;padding:clamp(16px,2vw,22px);
      background:rgba(255,255,255,.04);border:1px solid var(--line-on-dark);border-radius:var(--r-card);
      border-top:3px solid var(--line-on-dark)}
    .fcard--save{border-top-color:var(--green)}
    .fcard--payback{border-top-color:var(--saffron)}
    .fcard--book{border-top-color:var(--navy)}
    .fcard-label{font-family:var(--f-head);font-weight:600;font-size:13px;letter-spacing:.04em;
      text-transform:uppercase;color:var(--ink-on-dark-2)}
    html[lang="kn"] .fcard-label{font-family:var(--f-kn);text-transform:none;letter-spacing:0}
    .fcard-num{font-family:var(--f-head);font-weight:700;font-size:clamp(28px,5vw,40px);line-height:1.05;color:#fff}
    html[lang="kn"] .fcard-num{font-family:var(--f-kn)}
    .fcard--save .fcard-num{color:var(--green)}
    .fcard--payback .fcard-num{color:var(--saffron)}
    .fcard-unit{font-size:13px;color:var(--ink-on-dark-2)}
    html[lang="kn"] .fcard-unit{font-family:var(--f-kn)}
    .fcard-basis{margin-top:auto;padding-top:6px;font-size:12px;line-height:1.4;color:var(--ink-on-dark-2);font-style:italic}
    html[lang="kn"] .fcard-basis{font-family:var(--f-kn);font-style:normal}
    .fcard-cta{margin-top:auto;align-self:flex-start;padding:10px 20px;font-size:14px}
    @media(max-width:480px){ .fcard-cta{align-self:stretch;text-align:center} }
    /* Card-3 asterisk footnote — small muted caption (in-system), not a card */
    .finale-foot{margin-top:12px;max-width:62ch;font-size:12px;line-height:1.45;color:var(--ink-on-dark-2)}
    .finale-foot a{color:inherit;text-decoration:underline;text-underline-offset:2px}
    html[lang="kn"] .finale-foot{font-family:var(--f-kn)}
    .finale-cta{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-top:var(--s5)}
    .finale-chip{font-family:var(--f-head);font-weight:600;font-size:13px;color:var(--saffron)}
    html[lang="kn"] .finale-chip{font-family:var(--f-kn)}
    .finale-call{font-family:var(--f-head);font-weight:600;font-size:14px;
      color:var(--ink-on-dark-2);text-decoration:underline;text-underline-offset:3px}
    .finale-call:hover{color:#fff}
    html[lang="kn"] .finale-call{font-family:var(--f-kn)}

    /* (Removed the max-height:1024/860 "fit the pinned finale in one viewport" blocks — the section
       is normal-flow now and simply scrolls, so there's nothing to compress.) */

    /* ===== KANNADA DENSITY FIX — scoped to #powers ONLY (English untouched) =====
       KN strings are longer and taller (site-wide KN line-height 1.7), so the pinned Power
       Scroller's finale overflowed into #viewer. Shrink type + tighten KN line-height HERE only;
       the site-wide KN 1.7 elsewhere is unchanged. Sizing/spacing only — no copy/structure change. */
    html[lang="kn"] #powers{line-height:1.5}
    html[lang="kn"] #powers .powers-title{font-size:clamp(22px,3.4vw,40px);line-height:1.25}
    html[lang="kn"] #powers .powers-support{font-size:clamp(14px,1.5vw,17px);line-height:1.5}
    html[lang="kn"] #powers .ppanel-benefit{font-size:clamp(14px,1.5vw,17px);line-height:1.5}
    html[lang="kn"] #powers .ppanel-word{line-height:1.05}
    html[lang="kn"] #powers .pkpi-lab{font-size:12px;line-height:1.4}
    html[lang="kn"] #powers .finale-h{font-size:clamp(24px,3.6vw,44px);line-height:1.25}
    html[lang="kn"] #powers .finale-sub{font-size:clamp(14px,1.5vw,17px);line-height:1.5}
    html[lang="kn"] #powers .fcard-num{font-size:clamp(24px,3vw,40px);line-height:1.1}
    html[lang="kn"] #powers .fcard-label{font-size:12px;line-height:1.4}
    html[lang="kn"] #powers .fcard-unit{font-size:12px;line-height:1.4}
    html[lang="kn"] #powers .fcard-basis{font-size:12px;line-height:1.4}
    html[lang="kn"] #powers .finale-foot{font-size:12px;line-height:1.45;margin-top:10px}
    /* tighten the KN finale's vertical rhythm so the taller block still fits one viewport */
    html[lang="kn"] #powers .ppanel-finale{gap:clamp(10px,2vh,18px)}
    html[lang="kn"] #powers .finale-cards{margin-top:clamp(10px,1.8vh,16px)}
    html[lang="kn"] #powers .finale-cta{margin-top:clamp(12px,2vh,20px)}

    @media(max-width:743px){
      /* #powers on mobile = breathable tap-through tabs (the base section is now normal-flow on all
         devices; this block just makes the tabs a pill row and stacks the stage vertically). */
      /* tabs become a scrollable pill row */
      .powers-tabs{flex-wrap:nowrap;overflow-x:auto;gap:var(--s3);margin-top:20px;
        -webkit-overflow-scrolling:touch;scrollbar-width:none}
      .powers-tabs::-webkit-scrollbar{display:none}
      .ptab{flex:0 0 auto;white-space:nowrap;padding:8px 14px;min-height:40px;
        border:1px solid var(--line-on-dark);border-radius:var(--r-pill)}
      .ptab[aria-selected="true"]{background:var(--saffron);color:#1a1208;border-color:var(--saffron)}

      /* clean vertical stack, generous 24px gaps: capability word(+benefit) → photo → KPI → finale.
         (word+benefit live in one .ppanel, so they stay together above the photo — splitting them
         would need a DOM change that touches the locked desktop layout.) */
      .powers-stage{display:flex;flex-direction:column;gap:24px;min-height:0;margin-top:24px}
      .pz-left{min-height:0;text-align:center}
      .pz-left .ppanel{align-items:center;text-align:center;max-width:none}
      .pz-right{min-height:0;align-items:center;text-align:center}
      .pkpi{align-items:center}
      .powers-machine{max-width:none}              /* let the action photo fill the column width */
      .machine-img{max-height:none;aspect-ratio:16/10}
      .ppanel-word{font-size:clamp(28px,8vw,40px);line-height:1.1}
      .ppanel-word--sd{font-size:clamp(26px,7.5vw,40px)}
      .ppanel-benefit{font-size:16px;line-height:1.6;max-width:none}
      /* finale shows as the closing block at the bottom (no scrub on mobile) */
      .ppanel-finale{position:static;margin-top:var(--s6)}
    }

    /* ===== PRODUCT VIEWER (frame-sequence container) ===== */
    .viewer{background:var(--canvas)}
    /* full-bleed peek carousel — product floats on the white canvas (no card/box) */
    .viewer-stage{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:var(--s6);
      height:clamp(340px,52vh,600px);overflow:hidden;background:transparent;
      touch-action:pan-y;user-select:none;cursor:grab}
    .viewer-stage.is-dragging{cursor:grabbing}
    .viewer-stage.is-rotating .vhot{opacity:0;pointer-events:none}
    .viewer-track{position:absolute;inset:0;z-index:1}
    .vslide{position:absolute;top:50%;left:50%;height:clamp(240px,46vh,520px);
      transform:translate(-50%,-50%);transform-origin:center center;will-change:transform,opacity;
      transition:transform .35s var(--ease),opacity .35s var(--ease)}
    .viewer-track.no-anim .vslide{transition:none}
    .vslide-img{height:100%;width:auto;max-width:none;object-fit:contain;display:block;
      pointer-events:none;-webkit-user-drag:none}
    .vhot{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);
      width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
      background:var(--saffron);color:#1a1208;font-weight:700;font-size:20px;line-height:1;
      box-shadow:0 2px 10px rgba(0,0,0,.25);transition:transform var(--fast) var(--ease),opacity var(--base)}
    .vhot::before{content:"+";display:block}
    .vhot::after{content:"";position:absolute;inset:-8px;border-radius:50%;
      border:2px solid var(--saffron);opacity:.5;animation:vpulse 2s var(--ease) infinite}
    .vhot:hover,.vhot:focus-visible{transform:translate(-50%,-50%) scale(1.12)}
    .vhot[aria-expanded="true"]{background:#fff;box-shadow:0 0 0 3px var(--saffron)}
    @keyframes vpulse{0%{transform:scale(1);opacity:.5}70%,100%{transform:scale(1.6);opacity:0}}
    /* frame-preload shimmer — only seen in 360° rotate mode, before decode completes */
    .viewer-stage.is-loading::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
      background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
      background-size:220% 100%;animation:vshimmer 1.2s linear infinite}
    @keyframes vshimmer{to{background-position:-220% 0}}
    .viewer-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
      background:rgba(255,255,255,.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
      border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 18px;
      font-family:var(--f-head);font-weight:600;font-size:13px;color:var(--ink-2);
      pointer-events:none;transition:opacity var(--base)}
    .viewer-hint.is-hidden{opacity:0}
    html[lang="kn"] .viewer-hint{font-family:var(--f-kn)}
    .vcard{max-width:520px;margin:var(--s6) auto 0;background:var(--canvas);border:1px solid var(--line);
      border-radius:var(--r-card);padding:var(--s6);position:relative;box-shadow:0 12px 40px rgba(0,0,0,.08)}
    .vcard[hidden]{display:none}
    .vcard-close{position:absolute;top:12px;right:14px;background:none;border:0;font-size:24px;
      line-height:1;cursor:pointer;color:var(--ink-2);min-height:44px;min-width:44px}
    .vcard-title{font-family:var(--f-head);font-weight:700;font-size:var(--t-h3);color:var(--ink)}
    .vcard-body{margin-top:var(--s3);color:var(--ink-2)}
    .vcard-stat{display:inline-block;margin-top:var(--s4);color:var(--saffron-ink);font-family:var(--f-head);font-weight:700}
    html[lang="kn"] .vcard-title,html[lang="kn"] .vcard-body,html[lang="kn"] .vcard-stat{font-family:var(--f-kn)}
    @media(prefers-reduced-motion:reduce){.vhot::after,.viewer-stage.is-loading::after{animation:none}}
    @media(max-width:743px){.vhot{width:30px;height:30px;font-size:18px}}

    /* ===== MULTI-ANGLE VIEWER: watermark · cross-fade · controls ===== */
    /* giant faint wordmark behind the product (Monarch "MK-V" style) */
    .viewer-watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
      font-family:var(--f-head);font-weight:700;letter-spacing:-.02em;white-space:nowrap;
      font-size:clamp(120px,22vw,380px);line-height:1;color:#1D1D1F;opacity:.06;
      z-index:0;pointer-events:none;user-select:none}
    /* slideshow mode: hotspots hidden by default, revealed only while RESTING on the side-profile frame
       (JS adds .show-hotspots when index===rest, settled, not auto-rotating/dragging). The 4-class
       selector outranks .is-rotating .vhot{opacity:0}, so they stay visible on the rest frame. */
    .viewer-stage.viewer-slideshow .vhot{display:none}
    .viewer-stage.viewer-slideshow.show-hotspots .vhot{display:block;opacity:1;pointer-events:auto}

    .viewer-controls{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
      gap:var(--s3);margin-top:var(--s5)}
    .viewer-controls[hidden]{display:none}
    .vbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;
      font-family:var(--f-head);font-weight:600;font-size:14px;border-radius:980px;
      border:0.5px solid var(--line-strong);background:var(--canvas);color:var(--ink);
      min-height:44px;padding:0 18px;transition:background var(--fast) var(--ease),box-shadow var(--fast) var(--ease),transform var(--fast)}
    html[lang="kn"] .vbtn{font-family:var(--f-kn)}
    .vbtn-nav{width:44px;padding:0;font-size:24px;line-height:1}
    .vbtn:hover{box-shadow:0 4px 14px rgba(0,0,0,.10)}
    .vbtn:active{transform:scale(.97)}
    .vbtn-play .vplay-ico{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;
      border-color:transparent transparent transparent currentColor}      /* ▶ play glyph */
    .vbtn-play[aria-pressed="true"]{background:var(--saffron);color:#1a1208;border-color:var(--saffron)}
    .vbtn-play[aria-pressed="true"] .vplay-ico{width:10px;height:12px;border:0;
      border-left:3px solid currentColor;border-right:3px solid currentColor;background:transparent}  /* ❚❚ pause glyph */
    .viewer-dots{display:inline-flex;align-items:center;gap:4px;margin-left:var(--s3)}
    .vdot{width:32px;height:32px;border:0;background:transparent;cursor:pointer;padding:0;position:relative;border-radius:50%}
    .vdot::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
      width:11px;height:11px;border-radius:50%;background:#D2D2D7;transition:background var(--fast) var(--ease),transform var(--fast) var(--ease)}
    .vdot:hover::before{background:#B0B0B8}
    .vdot[aria-current="true"]::before{background:var(--saffron);transform:translate(-50%,-50%) scale(1.18)}
    .vdot:focus-visible{outline:2px solid var(--saffron);outline-offset:2px}
    @media(prefers-reduced-motion:reduce){.vslide{transition:none}}

    /* ===== VIEWER LAYOUT: centered heading · full-bleed peek carousel · centered controls ===== */
    #viewer{padding-block:clamp(40px,6vh,80px);overflow:hidden}   /* clip the peeking neighbours */
    #viewer .viewer-head{text-align:center}
    #viewer .viewer-sub{margin:var(--s4) auto 0;max-width:60ch;color:var(--ink-2);
      font-size:clamp(15px,1.6vw,18px);line-height:1.6}
    html[lang="kn"] #viewer .viewer-sub{font-family:var(--f-kn)}
    /* vcard (hotspot detail) is toggled via [hidden] by JS — shown when a rest-frame hotspot is tapped */
    @media(min-width:992px){
      .viewer-stage{height:clamp(420px,56vh,620px)}
      .vslide{height:clamp(320px,50vh,560px)}
    }
    @media(max-width:743px){
      .viewer-stage{height:clamp(300px,46vh,440px)}
      .vslide{height:clamp(210px,40vh,360px)}
      /* P1-2: drop the giant Monarch-style "SEV 5.1" wordmark on mobile — decorative only
         (aria-hidden, pointer-events:none), and oversized (min 120px) behind the small stage. */
      .viewer-watermark{display:none}
    }

    /* ===== CHAPTER STRIP ===== */
    /* "On this page" jump-nav — a distinct frosted, floating control (not page-white) */
    .chapters{position:sticky;top:calc(var(--nav-h) + env(safe-area-inset-top,0px));z-index:40;
      background:rgba(255,255,255,.85);backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1);
      border-top:0.5px solid var(--line);border-bottom:0.5px solid var(--line);
      box-shadow:0 2px 12px rgba(17,32,26,.06);
      overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
    .chapters::-webkit-scrollbar{display:none}
    @media(min-width:744px){.chapters{top:calc(var(--nav-h-lg) + env(safe-area-inset-top,0px))}}
    .chapters .container{display:flex;align-items:center;gap:var(--s4);white-space:nowrap}
    @media(min-width:744px){.chapters .container{justify-content:center}}
    .chapters-eyebrow{flex:0 0 auto;font-family:var(--f-head);font-weight:600;font-size:11px;letter-spacing:.1em;
      text-transform:uppercase;color:var(--ink-2);padding-right:var(--s3);margin-right:var(--s2);border-right:0.5px solid var(--line)}
    html[lang="kn"] .chapters-eyebrow{font-family:var(--f-kn);letter-spacing:0;text-transform:none}
    .chapters a{flex:0 0 auto;font-family:var(--f-head);font-weight:600;font-size:15px;text-decoration:none;
      color:var(--ink);padding:14px 12px;border-bottom:2px solid transparent;
      transition:color var(--fast),border-color var(--fast)}
    html[lang="kn"] .chapters a{font-family:var(--f-kn)}
    .chapters a:hover,.chapters a:focus-visible{color:var(--ink);border-bottom-color:rgba(255,153,51,.5)}
    .chapters a.active{color:var(--saffron);border-bottom-width:3px;border-bottom-color:var(--saffron)}

    /* ===== FEATURE SECTIONS ===== */
    .feature{display:grid;gap:var(--s6);align-items:center}
    @media(min-width:900px){.feature{grid-template-columns:1fr 1fr}
      .feature--rev .feature-media{order:2}}
    .feature-media img{width:100%;border-radius:var(--r-media);aspect-ratio:4/3;object-fit:cover;
      background:rgba(127,127,127,.08)}
    /* lazy in-view autoplay video (fills the media frame; bg shows cleanly while loading / poster-only) */
    .feature-video{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
      border-radius:var(--r-media);background:var(--canvas-2)}
    .feature-media{position:relative}                       /* anchor for the unmute button */
    /* tap-to-unmute toggle — only added (by JS) to videos with an audio track */
    .feature-unmute{position:absolute;right:10px;bottom:10px;width:40px;height:40px;border-radius:50%;
      border:0.5px solid rgba(255,255,255,.5);background:rgba(20,20,22,.55);
      backdrop-filter:blur(6px) saturate(1.1);-webkit-backdrop-filter:blur(6px) saturate(1.1);
      color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:2;
      transition:background var(--fast) var(--ease),transform var(--fast) var(--ease)}
    .feature-unmute:hover{transform:scale(1.06)}
    .feature-unmute:active{transform:scale(.96)}
    .feature-unmute[aria-pressed="true"]{background:var(--saffron);color:#1a1208;border-color:var(--saffron)}
    .feature-unmute svg{width:20px;height:20px;display:block}
    .feature-unmute .wave{display:none}
    .feature-unmute[aria-pressed="true"] .wave{display:block}
    .feature-unmute[aria-pressed="true"] .slash{display:none}
    .feature-unmute:focus-visible{outline:2px solid var(--saffron);outline-offset:2px}
    /* manual tap-to-play — created by JS ONLY when autoplay is suppressed (Data Saver / reduced-motion /
       no IntersectionObserver). Saffron = action. Centered over the poster; applies on every device. */
    .feature-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;z-index:2;
      background:var(--saffron);color:#1a1208;display:flex;align-items:center;justify-content:center;
      box-shadow:0 6px 20px rgba(0,0,0,.35);transition:transform var(--fast) var(--ease)}
    .feature-play svg{width:26px;height:26px;margin-left:3px}
    .feature-play:hover{transform:translate(-50%,-50%) scale(1.04)}
    .feature-play:active{transform:translate(-50%,-50%) scale(.94)}
    .feature-play:focus-visible{outline:2px solid var(--saffron);outline-offset:3px}
    .feature-body .sec-sub{max-width:50ch}
    .feature-chips{margin-top:var(--s5)}
    .chip{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--line-strong);background:var(--canvas);color:var(--ink);border-radius:var(--r-pill);
      padding:6px 14px;font-family:var(--f-head);font-weight:600;font-size:13px;margin:4px 6px 0 0}
    .section--dark .chip{border-color:var(--line-on-dark);background:transparent;color:var(--ink-on-dark)}
    html[lang="kn"] .chip{font-family:var(--f-kn)}
    .feature-card{margin-top:var(--s5);background:var(--canvas);border:1px solid var(--line);
      border-radius:var(--r-card);padding:var(--s5);font-family:var(--f-head);font-weight:700;
      font-size:var(--t-h3);line-height:1.3}
    html[lang="kn"] .feature-card{font-family:var(--f-kn)}

    /* ===== ROI CALCULATOR ===== */
    /* minmax(0,1fr) + min-width:0 — the swipe row's min-content must never widen the column */
    .roi-wrap{display:grid;gap:var(--s6);margin-top:var(--s7);grid-template-columns:minmax(0,1fr)}
    .roi-controls,.roi-results{min-width:0}
    @media(min-width:900px){.roi-wrap{grid-template-columns:340px minmax(0,1fr);align-items:start}}
    .roi-controls{background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-card);
      padding:var(--s5);display:grid;gap:var(--s6)}
    @media(min-width:900px){.roi-controls{position:sticky;top:140px}}
    .roi-field{display:grid;gap:var(--s3)}
    .roi-field-label{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
      font-family:var(--f-head);font-weight:600;font-size:14px;color:var(--ink-2)}
    html[lang="kn"] .roi-field-label{font-family:var(--f-kn)}
    .roi-acres{color:var(--ink);font-weight:700}
    .roi-crop{display:inline-flex;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;width:100%}
    .roi-crop-btn{flex:1;height:52px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
      background:transparent;border:0;cursor:pointer;
      font-family:var(--f-head);font-weight:600;font-size:15px;color:var(--ink);transition:background var(--fast)}
    html[lang="kn"] .roi-crop-btn{font-family:var(--f-kn)}
    .roi-crop-btn[aria-pressed="true"]{background:var(--saffron);color:#1a1208}
    .roi-crop-ico{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;
      stroke-linecap:round;stroke-linejoin:round}
    .roi-slider-wrap{position:relative;margin-top:34px}
    .roi-acres-bubble{position:absolute;top:-34px;transform:translateX(-50%);
      background:var(--saffron);color:#1a1208;font-weight:700;font-size:13px;
      padding:5px 10px;border-radius:var(--r-pill);white-space:nowrap;pointer-events:none;left:50%;
      transition:left .08s linear}
    html[lang="kn"] .roi-acres-bubble{font-family:var(--f-kn)}
    .roi-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:999px;
      background:var(--line);outline-offset:6px;margin-block:6px}
    .roi-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%;
      background:var(--saffron);border:3px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.28);cursor:pointer}
    .roi-slider::-moz-range-thumb{width:30px;height:30px;border:3px solid #fff;border-radius:50%;
      background:var(--saffron);box-shadow:0 1px 5px rgba(0,0,0,.28);cursor:pointer}
    .roi-slider-scale{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-2)}
    /* ROI tool chips (mirrors Build-Your-Rancher; the hidden checkbox stays the state carrier) */
    .roi-build{display:block}
    .roi-tools{display:grid;gap:8px}
    .roi-tool{position:relative;display:flex;align-items:center;gap:10px;padding:12px 14px;min-height:52px;
      border:0.5px solid var(--line);border-radius:14px;background:var(--canvas);cursor:pointer;
      transition:border-color .2s var(--ease),background .2s var(--ease),transform .15s var(--ease)}
    .roi-tool input{position:absolute;opacity:0;pointer-events:none}
    .roi-tool .rt-ico{width:26px;height:26px;color:var(--ink-2);flex:none}
    .roi-tool .rt-ico svg{width:26px;height:26px;display:block;fill:none;stroke:currentColor;
      stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
    .roi-tool .rt-name{flex:1;font-size:14.5px;color:var(--ink)}
    html[lang="kn"] .roi-tool .rt-name{font-family:var(--f-kn);line-height:1.45}
    .roi-tool .rt-price{font-size:12.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
    .roi-tool:active{transform:scale(.98)}
    .roi-tool:focus-within{outline:2px solid var(--saffron);outline-offset:2px;border-radius:14px}
    .roi-tool.on{border-color:var(--green);background:var(--green-soft)}
    .roi-tool.on .rt-ico{color:var(--green)}
    .roi-tool.on .rt-name{font-weight:600}
    .roi-tool--base{cursor:default;margin-bottom:8px}
    .roi-tool--base:active{transform:none}
    .roi-machine-cost{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-top:var(--s4);
      padding-top:var(--s3);border-top:1px solid var(--line)}
    .rmc-label{font-size:12.5px;color:var(--ink-2)}
    html[lang="kn"] .rmc-label,html[lang="kn"] .rmc-note{font-family:var(--f-kn)}
    .rmc-value{font-family:var(--f-head);font-weight:700;font-size:20px;color:var(--brand-maroon);font-variant-numeric:tabular-nums}
    .rmc-note{font-size:11.5px;color:var(--ink-2)}
    /* ROI capability breakdown — owned savings show ₹; un-owned show a tap-to-unlock chip */
    .roi-breakdown{margin-top:var(--s4);display:grid;gap:0}
    .roi-cat{display:flex;justify-content:space-between;align-items:center;gap:var(--s4);
      padding:14px 0;border-bottom:0.5px solid var(--line)}
    .rc-label{font-size:14.5px;color:var(--ink)}
    html[lang="kn"] .rc-label{font-family:var(--f-kn)}
    .roi-cat--on .rc-label::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
      background:var(--green);margin-right:8px;vertical-align:middle}
    .roi-cat--off{opacity:.75}
    .roi-cat--off .rc-label{color:var(--ink-2)}
    .rc-val{font-family:var(--f-head);font-weight:700;font-size:15px;color:var(--green);font-variant-numeric:tabular-nums}
    .rc-val--muted{color:var(--ink-2);font-weight:600}
    .rc-req{display:inline-flex;align-items:center;gap:6px;min-height:34px;font-family:var(--f-head);
      font-weight:600;font-size:12.5px;color:var(--saffron-ink);background:#FFF4E5;
      padding:6px 12px;border-radius:var(--r-pill);cursor:pointer;border:0;
      transition:transform .15s var(--ease)}
    .rc-req:active{transform:scale(.96)}
    .rc-req::before{content:"+";font-weight:800}
    html[lang="kn"] .rc-req{font-family:var(--f-kn);line-height:1.4}
    @media(prefers-reduced-motion:no-preference){
      .roi-cat--on.rc-just-on{animation:rcUnlock .6s var(--ease)}
    }
    @keyframes rcUnlock{0%{background:var(--green-soft)}100%{background:transparent}}
    .roi-estimate-note{margin-top:var(--s4);font-size:12px;color:var(--ink-2);line-height:1.5;font-style:italic}
    html[lang="kn"] .roi-estimate-note{font-family:var(--f-kn);font-style:normal}

    /* ONE hero answer + three supporting stats (same ids as the old 2×2 cards) */
    .roi-hero-answer{background:var(--canvas);border:0.5px solid var(--line);border-radius:var(--r-card);
      padding:var(--s7) var(--s6);text-align:center;position:relative;overflow:hidden}
    /* soft green wealth-glow behind the number */
    .roi-hero-answer::before{content:"";position:absolute;inset:-30%;pointer-events:none;
      background:radial-gradient(50% 40% at 50% 45%, rgba(19,136,8,.07), transparent 70%)}
    .rha-label{display:block;font-family:var(--f-head);font-weight:600;font-size:14px;color:var(--navy);letter-spacing:.02em}
    html[lang="kn"] .rha-label{font-family:var(--f-kn);line-height:1.5}
    .rha-value{display:block;margin-top:var(--s3);font-family:var(--f-head);font-weight:800;
      font-size:clamp(44px,9vw,76px);line-height:1;color:var(--green);
      font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
    .rha-payback{display:inline-flex;gap:6px;align-items:baseline;flex-wrap:wrap;justify-content:center;
      margin-top:var(--s4);background:#FFF4E5;color:var(--saffron-ink);font-weight:600;font-size:14px;
      padding:8px 16px;border-radius:var(--r-pill)}
    html[lang="kn"] .rha-payback{font-family:var(--f-kn);line-height:1.5}
    .rha-note{display:block;margin-top:var(--s3);font-size:12px;color:var(--ink-2)}
    html[lang="kn"] .rha-note{font-family:var(--f-kn)}
    @media(prefers-reduced-motion:no-preference){
      .roi-hero-answer.tick .rha-value{animation:rhaPulse .45s var(--ease)}
    }
    @keyframes rhaPulse{0%{transform:scale(.985)}60%{transform:scale(1.012)}100%{transform:scale(1)}}
    .roi-support{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s4)}
    @media(max-width:560px){.roi-support{grid-template-columns:1fr 1fr}.rs-item:last-child{grid-column:1/-1}}
    .rs-item{background:var(--canvas);border:0.5px solid var(--line);border-radius:var(--r-card);
      padding:var(--s4);text-align:center}
    .rs-val{display:block;font-family:var(--f-head);font-weight:700;font-size:clamp(18px,2.6vw,26px);
      color:var(--green);font-variant-numeric:tabular-nums}
    .rs-val--cost{color:var(--brand-maroon)}
    .rs-lab{display:block;margin-top:4px;font-size:12px;color:var(--ink-2)}
    html[lang="kn"] .rs-lab{font-family:var(--f-kn);line-height:1.4}
    .roi-num{font-variant-numeric:tabular-nums lining-nums}
    .roi-chart{margin-top:var(--s5);background:var(--canvas);border:1px solid var(--line);
      border-radius:var(--r-card);padding:var(--s5)}
    .roi-chart svg{width:100%;height:auto;display:block}
    .roi-wa{margin-top:var(--s5);width:100%}
    html[lang="kn"] .roi-wa{font-family:var(--f-kn)}
    .roi-trust{margin-top:var(--s4);font-size:13px;color:var(--ink-2);max-width:60ch}
    html[lang="kn"] .roi-trust{font-family:var(--f-kn)}
    /* ===== ROI EDITORIAL POLISH (presentation only — math/IDs untouched) ===== */
    .roi-sub{margin:var(--s3) 0 0;max-width:64ch;color:var(--ink-2)}
    html[lang="kn"] .roi-sub{font-family:var(--f-kn)}
    .roi-chart{border-width:0.5px}

    /* Mobile sticky answer bar — sits ABOVE the global #stickybar (booking CTA) so both stay visible */
    .roi-stickybar{display:none}
    @media(max-width:768px){
      .roi-stickybar{display:flex;align-items:center;gap:10px;position:fixed;left:12px;right:12px;
        bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:54;cursor:pointer;
        background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
        border:0.5px solid var(--line);border-radius:var(--r-pill);padding:12px 18px;min-height:48px;
        box-shadow:0 12px 32px -12px rgba(0,0,0,.18);
        transform:translateY(200%)}
      .roi-stickybar.show{transform:none}
      .rsb-lab{font-size:12px;color:var(--ink-2)}
      html[lang="kn"] .rsb-lab{font-family:var(--f-kn)}
      .rsb-val{font-family:var(--f-head);font-weight:800;font-size:18px;color:var(--green);flex:1;text-align:left}
      .rsb-pb{font-size:12px;color:var(--saffron-ink);background:#FFF4E5;padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap}
      html[lang="kn"] .rsb-pb{font-family:var(--f-kn)}
    }
    @media(max-width:768px) and (prefers-reduced-motion:no-preference){
      .roi-stickybar{transition:transform .35s var(--ease)}
    }

    /* ===== ROI MOBILE WIZARD (≤743px; choreography of the SAME blocks — content/math untouched).
       Activates ONLY when JS adds html.roiw-active under matchMedia(max-width:743px);
       desktop and no-JS render the normal flow. ===== */
    .roiw-progress,.roiw-next{display:none}
    @media(max-width:743px){
      /* stage the steps: non-active blocks hide; active keeps its natural display (grid stays grid) */
      html.roiw-active #roi [data-step]:not(.roiw-on){display:none}
      html.roiw-active #roi.roiw-s4 .roi-controls{display:none}   /* no empty bordered card on the result step */
      html.roiw-active .roiw-progress{display:flex;align-items:center;gap:12px;position:sticky;
        top:calc(var(--nav-h) + 58px + env(safe-area-inset-top,0px));z-index:5;
        background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
        padding:8px 14px;border-radius:var(--r-pill);border:0.5px solid var(--line);
        width:max-content;margin:0 auto var(--s4)}
      .roiw-dot{width:8px;height:8px;padding:0;border-radius:50%;border:0;cursor:pointer;
        background:var(--line-strong);transition:background .3s var(--ease),transform .3s var(--ease);
        position:relative}
      .roiw-dot::after{content:"";position:absolute;inset:-18px -8px}   /* 44px-tall hit area on an 8px dot */
      .roiw-dot.on{background:var(--saffron);transform:scale(1.25)}
      .roiw-steplabel{font-size:12px;color:var(--ink-2);margin-left:4px;white-space:nowrap}
      html[lang="kn"] .roiw-steplabel{font-family:var(--f-kn)}
      html.roiw-cta .roiw-next{display:block;position:fixed;left:16px;right:16px;
        bottom:max(16px,env(safe-area-inset-bottom));z-index:60;height:54px;border:0;
        border-radius:var(--r-pill);background:var(--saffron);color:#1a1208;cursor:pointer;
        font-family:var(--f-head);font-weight:700;font-size:16px;
        box-shadow:0 12px 32px -12px rgba(255,153,51,.5)}
      .roiw-next:active{transform:scale(.97)}
      html[lang="kn"] .roiw-next{font-family:var(--f-kn)}
      /* one fixed bottom element at a time: mid-wizard the Continue bar owns the bottom edge */
      html.roiw-cta .stickybar,html.roiw-cta .roi-stickybar{transform:translateY(210%)!important}
      /* slider: 30px hit height, same 6px visual track (drawn as a centered gradient) */
      html.roiw-active #roi .roi-slider{height:30px;border-radius:999px;
        background:linear-gradient(var(--line),var(--line)) 50% 50%/100% 6px no-repeat}
    }
    @media(max-width:743px) and (prefers-reduced-motion:no-preference){
      html.roiw-active #roi [data-step].roiw-on{animation:roiwIn .4s var(--ease)}
      html.roiw-active #roi [data-step].roiw-out{animation:roiwOut .3s var(--ease) forwards}
      .roiw-next{transition:transform .15s var(--ease)}
      .roi-hero-answer.roiw-settle{animation:roiwSettle .6s var(--ease)}
    }
    @keyframes roiwIn{0%{opacity:0;transform:translateX(24px)}100%{opacity:1;transform:none}}
    @keyframes roiwOut{100%{opacity:0;transform:translateX(-24px)}}
    @keyframes roiwSettle{0%{transform:scale(.97);box-shadow:0 0 0 0 rgba(19,136,8,.18)}
      60%{box-shadow:0 0 0 14px rgba(19,136,8,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(19,136,8,0)}}
    @media(min-width:744px){.roiw-progress,.roiw-next{display:none!important}}
    /* trust-anchor banner */
    .roi-guarantee{display:flex;align-items:flex-start;gap:var(--s4);margin-top:var(--s6);
      padding:clamp(16px,2.2vw,24px);background:var(--green-soft);
      border:0.5px solid rgba(19,136,8,.22);border-radius:var(--r-card)}
    .roi-guarantee-ico{flex:0 0 auto;width:30px;height:30px;color:var(--green)}
    .roi-guarantee-ico svg{width:30px;height:30px;display:block}
    .roi-guarantee-txt{min-width:0}
    .roi-guarantee-h{display:block;font-family:var(--f-head);font-weight:700;
      font-size:clamp(16px,2vw,19px);color:var(--ink)}
    html[lang="kn"] .roi-guarantee-h{font-family:var(--f-kn)}
    .roi-guarantee-sub{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--ink-2);max-width:72ch}
    html[lang="kn"] .roi-guarantee-sub{font-family:var(--f-kn)}
    .roi-demo{margin-top:var(--s5);text-align:center}
    .roi-demo-lead{font-family:var(--f-head);font-weight:700;font-size:clamp(16px,2vw,20px);color:var(--ink)}
    html[lang="kn"] .roi-demo-lead{font-family:var(--f-kn)}
    .roi-demo-actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;justify-content:center;margin-top:var(--s4)}
    .roi-demo-call{font-family:var(--f-head);font-weight:600;font-size:14px;color:var(--saffron-ink);text-decoration:underline;text-underline-offset:3px;padding:10px 4px}
    html[lang="kn"] .roi-demo-call{font-family:var(--f-kn)}
    .roi-demo-note{margin-top:var(--s3);font-size:13px;color:var(--ink-2)}
    html[lang="kn"] .roi-demo-note{font-family:var(--f-kn)}

    /* ===== ROI jerrycan-vs-battery comparison (COMPACT, mobile-first — NO brown) ===== */
    .roi-cmp{--roi-petrol:#C0392B}                              /* muted red = petrol cost (blueprint) */
    .roi-cmp-title{font-family:var(--f-head);font-weight:700;font-size:clamp(18px,2.4vw,24px);
      line-height:1.3;color:var(--ink);margin:0 0 var(--s2)}
    html[lang="kn"] .roi-cmp-title{font-family:var(--f-kn);line-height:1.45}
    .roi-cmp-hero{font-family:var(--f-head);font-weight:500;font-size:clamp(13.5px,1.6vw,16px);
      line-height:1.5;color:var(--ink-2);margin:0 0 var(--s3)}
    .roi-cmp-hero b{color:var(--navy);font-weight:800}
    html[lang="kn"] .roi-cmp-hero{font-family:var(--f-kn);line-height:1.6}
    /* small inline legend near the heading (NOT giant standalone icons) */
    .roi-cmp-legend{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;
      margin:0 0 var(--s4);font-size:12px;color:var(--ink-2)}
    .roi-cmp-leg{display:inline-flex;align-items:center;gap:6px}
    html[lang="kn"] .roi-cmp-leg{font-family:var(--f-kn)}
    .roi-chart .roi-leg-ico{width:18px;height:18px;flex:0 0 auto}   /* override .roi-chart svg{width:100%} */
    .roi-leg-ico--petrol{color:var(--roi-petrol)}
    .roi-leg-ico--sev{color:var(--green)}
    /* mobile: thumb-friendly horizontal swipe row with snap → 2×2 ≥640 → 4-across ≥1024 */
    .roi-cmp-grid{display:grid;grid-template-columns:1fr;gap:var(--s3)}
    @media(max-width:639px){
      .roi-cmp-grid{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;
        scroll-snap-type:x mandatory;padding-bottom:6px;scrollbar-width:none}
      .roi-cmp-grid::-webkit-scrollbar{display:none}
      .roi-cmp-cell{flex:0 0 76%;scroll-snap-align:center}
    }
    @media(min-width:640px){.roi-cmp-grid{grid-template-columns:1fr 1fr}}
    @media(min-width:1024px){.roi-cmp-grid{grid-template-columns:repeat(4,1fr)}}
    .roi-cmp-cell{display:flex;flex-direction:column;align-items:center;gap:6px;
      padding:clamp(10px,2vw,16px);background:#fff;border:0.5px solid var(--line);border-radius:12px}
    /* empty (un-owned) cells: fade the cans/amounts only — the unlock chip below stays vivid */
    .roi-cmp-cell.is-empty .roi-cmp-objects,.roi-cmp-cell.is-empty .roi-cmp-label{opacity:.45}
    .roi-cmp-add{margin-top:2px}
    .roi-cmp-label{font-family:var(--f-head);font-weight:600;font-size:clamp(12px,3vw,14px);
      color:var(--navy);text-align:center}
    html[lang="kn"] .roi-cmp-label{font-family:var(--f-kn)}
    .roi-cmp-objects{display:flex;align-items:flex-end;justify-content:center;
      gap:clamp(10px,3vw,20px);min-height:clamp(56px,13vw,100px)}
    .roi-cmp-obj{display:flex;flex-direction:column;align-items:center;gap:4px}
    /* ICON SIZE CAP — height-capped + width:auto; overrides the generic .roi-chart svg{width:100%} */
    .roi-chart .roi-can,.roi-chart .roi-batt{width:auto;height:clamp(52px,13vw,96px);display:block}
    .roi-ico-line{fill:none;stroke:var(--roi-petrol);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
    .roi-ico-line--sev{stroke:var(--green)}
    .roi-fill--petrol{fill:var(--roi-petrol)}
    .roi-fill--sev{fill:var(--green)}
    .roi-cmp-amt{font-family:var(--f-head);font-weight:700;font-size:clamp(12px,3vw,15px);
      font-variant-numeric:tabular-nums lining-nums}
    .roi-cmp-amt--petrol{color:var(--roi-petrol)}
    .roi-cmp-amt--sev{color:var(--green)}
    .roi-cmp-keep{font-family:var(--f-head);font-weight:700;font-size:clamp(12px,3vw,15px);
      color:var(--saffron-ink);text-align:center}
    html[lang="kn"] .roi-cmp-keep{font-family:var(--f-kn)}

    /* ===== KANNADA DENSITY — scoped to #roi only (English untouched). Longer KN must not overflow
       or push the comparison off-screen on mobile. Site-wide KN 1.7 elsewhere stays unchanged. ===== */
    html[lang="kn"] #roi{line-height:1.5}
    html[lang="kn"] #roi .roi-sub{font-size:clamp(14px,3.4vw,17px);line-height:1.5}
    html[lang="kn"] #roi .rha-label{font-size:13.5px;line-height:1.5}
    html[lang="kn"] #roi .rha-payback{font-size:13.5px}
    html[lang="kn"] #roi .rs-lab{font-size:11.5px}
    html[lang="kn"] #roi .rt-name{font-size:14px}
    html[lang="kn"] #roi .rc-req{font-size:12px}
    html[lang="kn"] #roi .roi-cmp-title{font-size:clamp(17px,4vw,22px)}
    html[lang="kn"] #roi .roi-cmp-hero{font-size:clamp(14px,3.4vw,17px);line-height:1.55}
    html[lang="kn"] #roi .roi-cmp-label{font-size:clamp(11px,3vw,13px);line-height:1.4}
    html[lang="kn"] #roi .roi-cmp-keep{font-size:clamp(11px,3vw,13px);line-height:1.4}
    html[lang="kn"] #roi .roi-trust{font-size:12px;line-height:1.4}
    html[lang="kn"] #roi .roi-guarantee-sub{font-size:clamp(13px,3.2vw,15px);line-height:1.5}

    /* ===== PROOF ===== */
    .proof-grid{display:grid;gap:var(--s5);margin-top:var(--s7)}
    @media(min-width:768px){.proof-grid{grid-template-columns:repeat(3,1fr)}}
    .tcard{position:relative;background:var(--canvas);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s7) var(--s5) var(--s5);margin:0}
    .tcard::before{content:"\201C";position:absolute;top:-4px;left:18px;font-family:Georgia,"Times New Roman",serif;font-size:96px;line-height:1;color:var(--saffron);pointer-events:none;user-select:none}
    .tcard q{display:block;quotes:none;font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:var(--ink)}
    .tcard q::before,.tcard q::after{content:""}
    html[lang="kn"] .tcard q{font-family:var(--f-kn)}
    .tcard-portrait{width:56px;height:56px;border-radius:50%;object-fit:cover;background:var(--canvas-2);margin-bottom:var(--s4)}
    .tcard .who{margin-top:var(--s4);color:var(--ink-2);font-size:13px;font-weight:500}
    .trustbar{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s7);justify-content:center}
    .trustbadge{font-family:var(--f-head);font-weight:600;font-size:14px;color:var(--ink-2)}
    html[lang="kn"] .trustbadge{font-family:var(--f-kn)}

    /* Founder video — centred, sensible max-width on desktop, full-width on mobile, 16:9 */
    .founder-video-wrap{position:relative;max-width:860px;margin:var(--s7) auto 0;aspect-ratio:16/9;
      border-radius:var(--r-media);overflow:hidden;background:#000}
    .founder-video{width:100%;height:100%;object-fit:contain;background:var(--canvas-2);display:block}
    .founder-soon{text-align:center;margin-top:var(--s4);color:var(--ink-2);font-size:14px}
    html[lang="kn"] .founder-soon{font-family:var(--f-kn)}

    .proof-video{position:relative;aspect-ratio:16/9;border-radius:var(--r-media);overflow:hidden;
      background:#000;margin-top:var(--s7)}
    .proof-poster{width:100%;height:100%;object-fit:cover}
    .proof-play{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;
      background:var(--saffron);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
      box-shadow:0 6px 24px rgba(0,0,0,.35);transition:transform var(--fast) var(--ease)}
    .proof-play:hover{transform:scale(1.06)}
    .proof-play svg{margin-left:3px}
    .proof-vid{width:100%;height:100%;object-fit:cover;display:block}

    /* ===== PRICING + SPECS ===== */
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
      clip:rect(0,0,0,0);white-space:nowrap;border:0}
    .pricing .sec-sub{max-width:64ch}
    /* ── single hero product card ── */
    .price-hero-title{text-align:center}
    .rancher-hero-card{max-width:860px;margin:var(--s8) auto 0;border:0.5px solid var(--line);
      border-radius:var(--r-card);background:var(--canvas);overflow:hidden;
      display:grid;grid-template-columns:1fr 1fr;align-items:stretch;transition:box-shadow .3s var(--ease)}
    /* tablet & down: stack, image on top, body below */
    @media(max-width:768px){
      .rancher-hero-card{grid-template-columns:1fr;max-width:520px}
      .rhc-media{min-height:auto;padding:var(--s6) var(--s6) 0}
      .rhc-media img{max-height:340px}
    }
    /* phones: tighter padding, image sized to viewport, comfortable body */
    @media(max-width:480px){
      .rancher-hero-card{margin-top:var(--s6);border-radius:14px}
      .rhc-media{padding:var(--s5) var(--s5) 0}
      .rhc-media img{max-height:min(56vw,300px)}
      .rhc-body{padding:var(--s6) var(--s5)}
    }
    .rancher-hero-card:hover{box-shadow:0 24px 60px -24px rgba(0,0,0,.16)}
    .rhc-media{background:var(--canvas-2);position:relative;display:flex;align-items:center;justify-content:center;
      padding:var(--s5);min-height:300px}
    /* soft shadow-pool so the contain letterboxing never reads as empty space */
    .rhc-media::before{content:"";position:absolute;inset:0;pointer-events:none;
      background:radial-gradient(60% 55% at 50% 45%, rgba(0,0,0,.04), transparent 70%)}
    .rhc-media img{display:block;width:100%;height:100%;max-height:420px;object-fit:contain;object-position:center;
      position:relative;image-rendering:auto;-webkit-user-select:none;user-select:none;pointer-events:none}
    /* iOS Safari: height:100% inside a flex column with no fixed parent height can collapse — use auto there */
    @supports (-webkit-touch-callout: none){
      .rhc-media{min-height:260px}
      .rhc-media img{height:auto}
    }
    /* respect notches/safe areas if the card ever goes edge-to-edge on phones */
    @media(max-width:480px){
      .rancher-hero-card{margin-left:max(16px,env(safe-area-inset-left));margin-right:max(16px,env(safe-area-inset-right))}
    }
    .rhc-body{padding:var(--s7)}
    .rhc-name{font-family:var(--f-head);font-weight:700;font-size:clamp(22px,2.4vw,30px);letter-spacing:-0.02em}
    .rhc-tag{color:var(--ink-2);margin-top:4px}
    html[lang="kn"] .rhc-tag{font-family:var(--f-kn)}
    .rhc-price{margin:var(--s5) 0}
    .rhc-price-label,.rhc-price-note{display:block;font-size:12.5px;color:var(--ink-2);letter-spacing:.02em}
    html[lang="kn"] .rhc-price-label,html[lang="kn"] .rhc-price-note{font-family:var(--f-kn)}
    .rhc-price-value{display:block;font-family:var(--f-head);font-weight:700;
      font-size:clamp(30px,4vw,46px);color:var(--brand-maroon);letter-spacing:-0.01em;font-variant-numeric:tabular-nums}
    .rhc-ticks{list-style:none;margin:var(--s5) 0;padding:0;display:grid;gap:8px}
    .rhc-ticks li{position:relative;padding-left:26px;color:var(--ink);font-size:15px}
    .rhc-ticks li::before{content:"";position:absolute;left:0;top:3px;width:17px;height:17px;border-radius:50%;background:var(--green-soft)}
    .rhc-ticks li::after{content:"";position:absolute;left:6px;top:6px;width:4px;height:8px;border:solid var(--green);border-width:0 2px 2px 0;transform:rotate(45deg)}
    html[lang="kn"] .rhc-ticks li{font-family:var(--f-kn)}
    .rhc-cta{width:100%;justify-content:center}

    .price-divider{border:0;height:0.5px;background:var(--line);max-width:720px;margin:var(--s9) auto}

    .expand-head,.setups-head{text-align:center;margin-top:var(--s8)}
    /* add-on gallery */
    .addon-cat{margin-top:var(--s8)}
    .addon-cat-label{font-family:var(--f-head);font-weight:700;font-size:15px;letter-spacing:.06em;
      text-transform:uppercase;color:var(--navy);margin-bottom:var(--s4)}
    html[lang="kn"] .addon-cat-label{font-family:var(--f-kn);text-transform:none;letter-spacing:.02em}
    .addon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--s4)}
    .addon-card{border:0.5px solid var(--line);border-radius:var(--r-card);background:var(--canvas);overflow:hidden;
      transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
    @media(hover:hover){.addon-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px -18px rgba(0,0,0,.14)}}
    .addon-media{aspect-ratio:16/10;background:var(--canvas-2);position:relative}
    .addon-media img{width:100%;height:100%;object-fit:cover;display:block}
    .addon-media--ph{background:linear-gradient(135deg,var(--canvas-2),#ececef)}
    .addon-body{padding:var(--s5)}
    .addon-name{font-family:var(--f-head);font-weight:600;font-size:16px}
    html[lang="kn"] .addon-name{font-family:var(--f-kn)}
    .addon-promise{color:var(--saffron-ink);font-weight:600;font-size:13px;margin-top:2px}
    html[lang="kn"] .addon-promise{font-family:var(--f-kn)}
    .addon-desc{color:var(--ink-2);font-size:13.5px;line-height:1.5;margin-top:6px}
    html[lang="kn"] .addon-desc{font-family:var(--f-kn)}
    .addon-price{display:block;margin-top:var(--s4);font-family:var(--f-head);font-weight:700;color:var(--ink)}
    .addon-price--tba{color:var(--ink-2);font-weight:500}
    html[lang="kn"] .addon-price--tba{font-family:var(--f-kn)}

    /* ===== PRICE TREATMENT — struck selling price + highlighted offer + save badge ===== */
    .priceblock{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 10px;margin-top:var(--s4)}
    .price-was{font-size:14px;color:var(--ink-2);text-decoration:line-through;
      text-decoration-color:rgba(120,18,22,.5);text-decoration-thickness:1.5px;font-variant-numeric:tabular-nums;
      position:relative}
    /* animated strike: the line draws across on reveal */
    @media(prefers-reduced-motion:no-preference){
      .priceblock--in .price-was{animation:strikeIn .5s var(--ease) both}
    }
    @keyframes strikeIn{
      0%{text-decoration-color:transparent}
      60%{text-decoration-color:transparent}
      100%{text-decoration-color:rgba(120,18,22,.5)}}
    .price-now{font-family:var(--f-head);font-weight:700;color:var(--brand-maroon);
      font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
    .price-save{display:inline-flex;align-items:center;gap:4px;
      background:var(--green-soft);color:var(--green);font-weight:700;font-size:11.5px;
      padding:3px 8px;border-radius:var(--r-pill);letter-spacing:.02em;white-space:nowrap}
    @media(prefers-reduced-motion:no-preference){
      .priceblock--in .price-now{animation:offerPop .5s var(--ease) both}
      .priceblock--in .price-save{animation:savePop .55s var(--ease) .15s both}
    }
    @keyframes offerPop{0%{opacity:0;transform:translateY(6px) scale(.96)}100%{opacity:1;transform:none}}
    @keyframes savePop{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.08)}100%{opacity:1;transform:scale(1)}}

    /* size variants */
    .priceblock--hero .price-now{font-size:clamp(30px,4vw,46px)}
    .priceblock--hero .price-was{font-size:17px}
    .priceblock--card .price-now{font-size:18px}
    .priceblock--total .price-now{font-size:clamp(28px,3.4vw,40px)}
    .priceblock--total .price-was{font-size:15px}
    /* builder row: compact, right-aligned */
    .br-was{color:var(--ink-2);text-decoration:line-through;text-decoration-color:rgba(120,18,22,.45);
      font-size:12px;margin-right:6px;font-variant-numeric:tabular-nums}
    .br-save{color:var(--green);font-weight:600;font-size:11px;margin-left:6px}
    html[lang="kn"] .price-save,html[lang="kn"] .price-now{font-family:var(--f-kn)}

    /* recommended setups */
    .setup-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--s4);margin-top:var(--s6)}
    .setup-card{border:0.5px solid var(--line);border-radius:var(--r-card);padding:var(--s6);background:var(--canvas);
      display:flex;flex-direction:column;gap:var(--s3);transition:box-shadow .3s var(--ease)}
    .setup-card:hover{box-shadow:0 16px 36px -18px rgba(0,0,0,.12)}
    .setup-name{font-family:var(--f-head);font-weight:700;font-size:17px;color:var(--navy)}
    html[lang="kn"] .setup-name{font-family:var(--f-kn)}
    .setup-ticks{list-style:none;padding:0;margin:0;display:grid;gap:6px;color:var(--ink)}
    html[lang="kn"] .setup-ticks{font-family:var(--f-kn)}
    .setup-ticks .setup-base{font-weight:600}
    .setup-est{margin-top:auto}
    .setup-est-lab{display:block;font-size:12px;color:var(--ink-2)}
    html[lang="kn"] .setup-est-lab{font-family:var(--f-kn)}
    .setup-est-val{font-family:var(--f-head);font-weight:700;color:var(--brand-maroon);font-size:20px}
    .setup-est--tba{color:var(--ink-2);font-size:13px}
    html[lang="kn"] .setup-est--tba{font-family:var(--f-kn)}
    .setup-load{align-self:flex-start}

    /* build your rancher */
    .builder{margin-top:var(--s9);background:var(--canvas-2);border-radius:var(--r-card);padding:var(--s7)}
    .builder-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s6);margin-top:var(--s5)}
    @media(max-width:760px){.builder-grid{grid-template-columns:1fr}}
    .builder-row{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;border-bottom:0.5px solid var(--line);cursor:pointer}
    .builder-row--base{opacity:.85;cursor:default}
    .br-name{flex:1}
    html[lang="kn"] .br-name{font-family:var(--f-kn)}
    .br-price{font-variant-numeric:tabular-nums;color:var(--ink-2)}
    .builder-total{background:var(--canvas);border:0.5px solid var(--line);border-radius:var(--r-card);
      padding:var(--s6);align-self:start;position:sticky;top:100px;text-align:center}
    .bt-label{display:block;font-size:12.5px;color:var(--ink-2)}
    html[lang="kn"] .bt-label{font-family:var(--f-kn)}
    .bt-value{display:block;font-family:var(--f-head);font-weight:700;font-size:clamp(28px,3.4vw,40px);
      color:var(--brand-maroon);font-variant-numeric:tabular-nums;margin:6px 0}
    .bt-note{display:block;font-size:11.5px;color:var(--ink-2);margin-bottom:var(--s4)}
    html[lang="kn"] .bt-note{font-family:var(--f-kn)}
    .builder-note{font-size:12.5px;color:var(--ink-2);margin-top:var(--s3)}
    html[lang="kn"] .builder-note{font-family:var(--f-kn)}

    .table-scroll{overflow-x:auto;margin-top:var(--s7);-webkit-overflow-scrolling:touch}
    .spec-table{width:100%;border-collapse:collapse;min-width:420px}
    .spec-table th,.spec-table td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
    .spec-table tr:nth-child(even){background:rgba(17,32,26,.03)}
    .spec-table th{font-family:var(--f-head);font-weight:600;color:var(--ink-2);white-space:nowrap}
    html[lang="kn"] .spec-table th{font-family:var(--f-kn)}
    .spec-table td{font-weight:500}
    html[lang="kn"] .spec-table td{font-family:var(--f-kn)}
    .specs-pdf{margin-top:var(--s5)}
    html[lang="kn"] .specs-pdf{font-family:var(--f-kn)}

    /* ===== SPECS MOBILE (≤743px only): snap rails + glass builder total + settings accordions.
       Desktop (≥744px) is untouched; fixed/accordion modes are gated behind JS-added classes
       so no-JS keeps the normal flow and the real table. ===== */
    .spec-acc{display:none}
    @media(max-width:743px){
      /* add-on catalogue + setups: horizontal snap rails instead of 7-screen stacks */
      .addon-grid,.setup-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
        padding:4px 20px 16px;margin-inline:-20px;-webkit-overflow-scrolling:touch;scrollbar-width:none;
        -webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);
        mask-image:linear-gradient(90deg,#000 86%,transparent)}
      .addon-grid::-webkit-scrollbar,.setup-grid::-webkit-scrollbar{display:none}
      .addon-card,.setup-card{flex:0 0 78%;max-width:300px;scroll-snap-align:center}
      .addon-card:active,.setup-card:active{transform:scale(.98)}
      .setup-load{min-height:54px}
      .rail-hint{display:inline-flex;margin-left:10px;font-size:11px;font-weight:600;
        color:var(--saffron-ink);letter-spacing:.04em;vertical-align:middle}
      .rail-hint.gone{opacity:0}
      /* builder total → collapsed glass bottom bar; tap expands to the full sheet */
      html.btbar-ready .builder-total{position:fixed;left:12px;right:12px;top:auto;
        bottom:max(12px,env(safe-area-inset-bottom));z-index:59;cursor:pointer;
        display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:20px;text-align:left;
        background:rgba(255,255,255,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
        box-shadow:0 16px 40px -14px rgba(0,0,0,.22);transform:translateY(160%)}
      html.btbar-ready .builder-total.bt-show{transform:none}
      html.btbar-ready .builder-total .bt-note,
      html.btbar-ready .builder-total .bt-label,
      html.btbar-ready .builder-total .price-was,
      html.btbar-ready .builder-total .price-save{display:none}   /* collapsed: total + CTA only */
      html.btbar-ready .builder-total .priceblock--total{margin-top:0;flex:1;min-width:0}
      html.btbar-ready .builder-total .priceblock--total .price-now{font-size:22px;margin:0;white-space:nowrap}
      html.btbar-ready .builder-total .btn{height:48px;padding-inline:18px;font-size:14px;flex:0 0 auto}
      html.btbar-ready .builder-total.open{flex-direction:column;align-items:stretch;text-align:center;padding:16px}
      html.btbar-ready .builder-total.open .bt-note{display:block}
      html.btbar-ready .builder-total.open .price-was{display:inline}
      html.btbar-ready .builder-total.open .price-save{display:inline-flex}
      html.btbar-ready .builder-total.open .priceblock--total{justify-content:center;flex:none}
      html.btbar-ready .builder-total.open .bt-label{display:block;font-size:12.5px}
      html.btbar-ready .builder-total.open .btn{height:50px}
      /* one bottom bar at a time: the live total bar owns the bottom edge */
      html.btbar-on .stickybar{transform:translateY(110%)!important}
      /* spec table → iPhone-Settings accordions (only once JS has built them from the table) */
      #specs.spec-acc-ready .table-wrap{display:none}
      .spec-acc{display:grid;gap:10px;margin-top:var(--s7)}
      .spec-acc details{border:0.5px solid var(--line);border-radius:16px;background:var(--canvas);overflow:hidden}
      .spec-acc summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
        min-height:56px;padding:14px 16px;cursor:pointer;list-style:none;color:var(--ink)}
      .spec-acc summary::-webkit-details-marker{display:none}
      .spec-acc summary:active{background:rgba(0,0,0,.03)}
      .spec-acc .sa-title{font-family:var(--f-head);font-weight:600;font-size:15px;flex:0 0 auto}
      .spec-acc .sa-sum{font-weight:400;font-size:12.5px;color:var(--ink-2);flex:1;min-width:0;
        text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
      .spec-acc summary::after{content:"";width:8px;height:8px;border:solid var(--ink-2);
        border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .3s var(--ease);flex:none}
      .spec-acc details[open] summary::after{transform:rotate(-135deg)}
      .spec-acc .sa-body{padding:2px 16px 14px;display:grid;gap:10px}
      .spec-acc .sa-row{display:flex;justify-content:space-between;gap:12px;font-size:14px}
      .spec-acc .sa-row .sa-lab{color:var(--ink-2)}
      .spec-acc .sa-row b{font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
      html[lang="kn"] .spec-acc summary,html[lang="kn"] .spec-acc .sa-row{font-family:var(--f-kn)}
    }
    @media(max-width:743px) and (prefers-reduced-motion:no-preference){
      html.btbar-ready .builder-total{transition:transform .35s var(--ease)}
      .rail-hint{transition:opacity .3s var(--ease)}
      .addon-card:active,.setup-card:active{transition:transform .15s var(--ease)}
      .spec-acc .sa-body{animation:saIn .3s var(--ease)}
    }
    @keyframes saIn{0%{opacity:0;transform:translateY(-8px)}100%{opacity:1;transform:none}}
    @media(min-width:744px){.spec-acc,.rail-hint{display:none!important}}

    /* ===== ON-FARM DEMO ===== */
    .demo{background:var(--canvas)}
    .demo-wrap{max-width:760px}
    .demo .sec-title{margin-top:var(--s3)}
    .demo-sub{margin-top:var(--s4);color:var(--ink-2);font-size:clamp(16px,1.5vw,19px);max-width:48ch}
    html[lang="kn"] .demo-sub{font-family:var(--f-kn)}
    .demo-steps{list-style:none;margin:var(--s8) 0 0;padding:0;display:grid;gap:var(--s6)}
    .demo-step{display:flex;gap:var(--s4);align-items:flex-start}
    .demo-step-n{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--saffron);
      color:#1a1208;font-family:var(--f-head);font-weight:700;font-size:16px;
      display:flex;align-items:center;justify-content:center}
    .demo-step-body{min-width:0}
    .demo-step-h{font-family:var(--f-head);font-weight:700;font-size:clamp(17px,1.8vw,20px);color:var(--ink)}
    html[lang="kn"] .demo-step-h{font-family:var(--f-kn);line-height:1.35}
    .demo-step-p{margin-top:4px;color:var(--ink-2);font-size:15px;line-height:1.55;max-width:54ch}
    html[lang="kn"] .demo-step-p{font-family:var(--f-kn)}
    .demo-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s8)}
    @media(max-width:430px){.demo-actions .btn{width:100%}}
    .demo-foot{margin-top:var(--s5);font-size:13px;color:var(--ink-2);max-width:60ch}
    html[lang="kn"] .demo-foot{font-family:var(--f-kn)}


    /* ===== FOOTER ===== */
    .footer{background:var(--brand-maroon);color:rgba(255,255,255,.7);padding-block:var(--s8);border-top:2px solid var(--saffron)}
    .footer-cols{display:grid;gap:var(--s6)}
    .footer-brand{display:inline-block;margin-bottom:var(--s5)}
    .footer-brand-img{height:48px;width:auto;display:block}
    @media(min-width:768px){.footer-cols{grid-template-columns:repeat(4,1fr)}}
    .footer h4{color:#fff;font-family:var(--f-head);font-weight:700;font-size:14px;
      letter-spacing:.04em;margin-bottom:var(--s3)}
    html[lang="kn"] .footer h4{font-family:var(--f-kn)}
    .footer ul{list-style:none;display:grid;gap:10px}
    .footer a{color:rgba(255,255,255,.74);text-decoration:none;font-size:14px}
    .footer a:hover{color:#fff}
    html[lang="kn"] .footer-col a{font-family:var(--f-kn)}
    .footer-meta{margin-top:var(--s7);border-top:1px solid rgba(255,255,255,.16);padding-top:var(--s5)}
    .footer-address{color:#fff;font-size:14px;font-weight:500}
    .footer-disclaimer{margin-top:var(--s3);font-size:12px;line-height:1.6;max-width:92ch;color:rgba(255,255,255,.6)}
    html[lang="kn"] .footer-disclaimer{font-family:var(--f-kn)}
    .footer-bottom{margin-top:var(--s5);border-top:1px solid rgba(255,255,255,.16);padding-top:var(--s4);
      display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;justify-content:space-between;font-size:13px}
    .footer-links{display:flex;flex-wrap:wrap;gap:var(--s4)}

    /* §3.2 Keelambi Universe wayfinding — footer + mobile overlay */
    .footer-universe{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.16)}
    .fu-lead{color:#fff;font-size:14px;font-weight:500;margin-bottom:var(--s3)}
    html[lang="kn"] .fu-lead{font-family:var(--f-kn)}
    .fu-worlds{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;padding:0;margin:0}
    .fu-worlds a{color:rgba(255,255,255,.74);text-decoration:none;font-size:14px}
    .fu-worlds a:hover{color:#fff}
    .fu-here{color:#fff;font-weight:600;font-size:14px}
    html[lang="kn"] .fu-worlds{font-family:var(--f-kn)}
    /* drawer is WHITE now: override the legacy white-on-dark overlay link styles */
    .nav-overlay a{color:var(--ink);font-size:inherit;font-weight:inherit}
    .nav-universe{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);color:var(--ink)}
    .nu-lead{font-weight:600;margin-bottom:10px;color:#6b6b70}
    .nu-worlds{list-style:none;display:grid;gap:10px;padding:0;margin:0}
    .nu-worlds a{font-family:var(--f-head);font-weight:600;font-size:16px}
    html[lang="kn"] .nu-worlds a{font-family:var(--f-kn)}
    .nu-here{font-weight:600;color:#6b6b70}
    .nav-overlay-call{display:inline-flex;align-items:center;gap:8px;margin-top:var(--s4);
      font-family:var(--f-head);font-weight:600;font-size:16px;color:var(--saffron-ink);
      font-variant-numeric:tabular-nums}
    html[lang="kn"] .nav-overlay-call{font-family:var(--f-kn)}
    html[lang="kn"] .nav-universe{font-family:var(--f-kn)}

    /* §4 PWA — update sheet + install chip (product tokens) */
    .pwa-update{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 70px);transform:translate(-50%,200%);z-index:60;width:min(calc(100% - 24px),440px);background:rgba(20,17,14,.94);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:0.5px solid var(--brand-maroon);border-radius:16px;box-shadow:0 20px 54px -20px rgba(0,0,0,.9);padding:13px 14px 13px 18px;opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s ease;pointer-events:none}
    .pwa-update.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
    .pu-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
    .pu-txt{display:flex;flex-direction:column}
    .pu-title{font-weight:700;font-size:13px;letter-spacing:.02em;color:#fff}
    .pu-sub{font-size:12px;color:rgba(255,255,255,.7)}
    .pu-btn{flex:0 0 auto;height:38px;padding:0 18px;border:0;border-radius:980px;background:var(--saffron);color:#1a1205;font-weight:700;font-size:13px;cursor:pointer}
    .pwa-toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 80px);transform:translate(-50%,200%);z-index:60;background:rgba(20,17,14,.95);border:0.5px solid rgba(255,255,255,.12);border-radius:980px;padding:10px 22px;font-size:13px;font-weight:500;color:#F5F5F5;opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s ease;pointer-events:none}
    .pwa-toast.show{transform:translate(-50%,0);opacity:1}
    .pwa-install{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 72px);transform:translate(-50%,-200%);z-index:60;width:min(calc(100% - 24px),430px);display:flex;align-items:center;gap:12px;background:rgba(20,17,14,.95);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:0.5px solid var(--brand-maroon);border-radius:14px;box-shadow:0 18px 44px -18px rgba(0,0,0,.85);padding:10px 10px 10px 16px;opacity:0;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .4s ease;pointer-events:none}
    .pwa-install.show{transform:translate(-50%,0);opacity:1;pointer-events:auto}
    .pi-txt{flex:1;font-size:13px;line-height:1.3;color:#fff}
    .pi-install{flex:0 0 auto;height:36px;padding:0 16px;border:0;border-radius:980px;background:var(--saffron);color:#1a1205;font-weight:700;font-size:13px;cursor:pointer}
    .pi-close{flex:0 0 auto;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:rgba(255,255,255,.6);font-size:18px;line-height:1;cursor:pointer}
    @media(prefers-reduced-motion:reduce){.pwa-update,.pwa-toast,.pwa-install{transition:opacity .3s ease}.pwa-update.show,.pwa-toast.show,.pwa-install.show{transform:translate(-50%,0)}}

    /* ===== FOOTER CLOSING WORDMARK — on the maroon surface, no separate band ===== */
    .footer-mark{
      display:block;
      background:transparent;            /* inherit the maroon footer — NO dark band */
      padding:clamp(20px,4vw,48px) clamp(20px,5vw,56px) 0;
      margin-top:var(--s6);
      text-decoration:none;
      overflow:hidden;
      text-align:center;
    }
    .fmk-line{
      display:block;
      font-family:var(--f-head);
      font-weight:700;
      line-height:.9;
      white-space:nowrap;
      /* maroon-tinted emboss: letters a few shades lighter than --brand-maroon (#781216),
         with one diagonal sheen stop. Reads as pressed INTO the maroon. */
      background:linear-gradient(118deg,
        #8A2A2D 0%,
        #9A3A3C 22%,
        #B25457 38%,
        #8E2E31 52%,
        #842224 70%,
        #963436 100%);
      -webkit-background-clip:text;background-clip:text;
      -webkit-text-fill-color:transparent;color:transparent;
      text-shadow:0 1px 0 rgba(255,255,255,.05);   /* faint top-light emboss edge */
    }
    .fmk-main{
      font-size:clamp(48px,15vw,180px);
      letter-spacing:-.02em;
    }
    .fmk-sub{
      font-size:clamp(13px,3.6vw,42px);
      letter-spacing:.2em;
      margin-top:clamp(2px,1vw,8px);
      /* sub-line a touch dimmer than the main word */
      background:linear-gradient(118deg,#842224 0%,#9A3A3C 40%,#822022 100%);
      -webkit-background-clip:text;background-clip:text;
      -webkit-text-fill-color:transparent;color:transparent;
    }
    @media(max-width:600px){ .fmk-sub{letter-spacing:.14em} }
    .footer-mark:hover .fmk-main{
      background:linear-gradient(118deg,#963436 0%,#A84446 22%,#C05E60 38%,#8E2E31 52%,#842224 70%,#9A3A3C 100%);
      -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
    }

    /* ===== MOBILE PASS (sticky bar, tap targets, scroll affordances) ===== */
    /* Bottom sticky action bar — mobile only.
       --sticky-h is the bar's RENDERED height excluding env(safe-area-inset-bottom) (which the
       bar pads for separately): 10 + 46 + 10 + 1px border-top = 67px here, and
       6 + 44 + 6 + 1px = 57px in the ≤743px pass below. Both values are confirmed against
       getBoundingClientRect() on the real bar. It lives on :root so anything fixed to the
       bottom edge can clear the bar without re-deriving it — the body bottom-padding and the
       AiSensy launcher both read it. Keep it in step with the padding/height/border rules
       directly beneath. */
    :root{--sticky-h:67px}
    .stickybar{position:fixed;left:0;right:0;bottom:0;z-index:55;display:flex;gap:10px;
      padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(248,246,241,.96);
      backdrop-filter:blur(10px);border-top:1px solid var(--line);transform:translateY(110%);
      transition:transform var(--base) var(--ease)}
    .stickybar.show{transform:none}
    .stickybar .btn{flex:1;height:46px;white-space:nowrap}
    .sb-icon{flex:0 0 auto;width:46px;height:46px;display:inline-flex;align-items:center;
      justify-content:center;border-radius:var(--r-pill);background:var(--canvas);
      border:1px solid var(--line-strong);color:var(--ink);text-decoration:none}
    .sb-icon:active{transform:scale(.97)}
    .sb-icon--wa{background:#25D366;border-color:#1FAE53;color:#fff}
    .sb-icon:focus-visible{outline:2px solid var(--saffron);outline-offset:3px}
    html[lang="kn"] .stickybar .btn{font-family:var(--f-kn)}
    @media(max-width:360px){.stickybar .btn{padding-inline:16px}}
    @media(min-width:1024px){.stickybar{display:none}}
    @media(max-width:1023px){body{padding-bottom:calc(var(--sticky-h) + env(safe-area-inset-bottom))}}

    /* ===== AiSensy WhatsApp launcher — keep clear of the mobile sticky action bar =====
       Selector verified against the LIVE rendered DOM (widget-id aab45e), not guessed:

         body > #df-btn-cont            ← static wrapper, zero height, NOT positioned
                  └ .df-btn             ← the actual launcher: position:fixed;
                                          bottom:24px; right:20px; z-index:10005
                       └ .df-btn-content  (chat panel)  ·  .df-btn-text  (pill + CTA label)

       Overriding #df-btn-cont does nothing — bottom/z-index are inert on a static box. The
       fixed element is .df-btn, so that is what we move. It is plain DOM (no iframe, no shadow
       root), but every declaration in the widget's injected <style id="df-style"> is flagged
       !important, so ours must be too; we win the tie on specificity (#id .class beats .class).
       Scoped under #df-btn-cont so no other .df-btn on the page could be caught. */
    #df-btn-cont .df-btn{
      /* below the navbar (60) and the mobile drawer (70); above ordinary page content */
      z-index:50!important;
      transition:opacity var(--fast) var(--ease),visibility var(--fast) var(--ease)!important;
    }
    /* Mobile: lift above the sticky bar — bar height + the inset it pads for + breathing room.
       A constant offset (not one gated on .stickybar.show) keeps the launcher from jumping as
       the bar reveals and hides on scroll. */
    @media(max-width:1023px){
      #df-btn-cont .df-btn{bottom:calc(var(--sticky-h) + env(safe-area-inset-bottom) + 12px)!important}
    }
    /* Desktop: no sticky bar at this width — return to a normal inset. */
    @media(min-width:1024px){
      #df-btn-cont .df-btn{bottom:24px!important}
    }
    /* Drawer open: the launcher must not float over the menu. Set by the hamburger handler. */
    html.nav-open #df-btn-cont .df-btn{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
    @media(prefers-reduced-motion:reduce){#df-btn-cont .df-btn{transition:none!important}}
    /* The widget ships .df-btn:focus{outline:none!important}, so a keyboard user gets no ring at
       all. Restore the site's standard saffron focus ring on the pill the a11y shim makes
       focusable (see the AiSensy mount block at the end of index.html). */
    #df-btn-cont .df-btn-text:focus-visible{
      outline:2px solid var(--saffron)!important;outline-offset:3px!important;border-radius:var(--r-pill)}

    /* Nav: drop the redundant Reserve CTA on mobile (sticky bar + overlay cover it); cap logo width */
    @media(max-width:1023px){.nav-cta{display:none}}

    /* Tap targets ≥44px */
    .langseg{height:44px}
    @media(max-width:1023px){
      .footer-col li a{display:inline-block;padding:10px 0;min-height:44px}
      .footer-links a{display:inline-block;padding:9px 0;min-height:44px}
    }

    /* Chapter strip momentum scroll */
    .chapters{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}

    /* Spec table right-edge fade hint (only when it scrolls, i.e. mobile) */
    .table-wrap{position:relative}
    .table-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:36px;pointer-events:none;
      background:linear-gradient(to left,var(--canvas-2),rgba(248,246,241,0))}
    @media(min-width:768px){.table-wrap::after{display:none}}

    /* ===== ARC BRIDGES — slim narrative hand-offs between story stages (Spec A §3).
       Pure presentation: nothing in JS references .bridge; removing any bridge leaves the
       page intact. Quiet centered line + a thin plumb line that borrows the brand accent. */
    .bridge{padding-block:clamp(56px,9vh,104px);text-align:center;background:var(--canvas)}
    .bridge::before{content:"";display:block;width:1px;height:36px;margin:0 auto 18px;
      background:linear-gradient(180deg,rgba(120,18,22,0),var(--brand-maroon))}
    .bridge-line{font-family:var(--f-head);font-weight:600;font-size:clamp(17px,2vw,22px);
      letter-spacing:-0.01em;color:var(--ink-2);margin:0 auto;max-width:34ch;padding-inline:24px}
    html[lang="kn"] .bridge-line{font-family:var(--f-kn);letter-spacing:0;line-height:1.5}
    .bridge--gesture{padding-block:clamp(40px,7vh,72px)}
    .bridge--gesture::before{height:52px;margin-bottom:0;
      background:linear-gradient(180deg,rgba(120,18,22,0),var(--brand-maroon) 60%,var(--saffron))}
    @media(max-width:743px){
      .bridge{padding-block:clamp(40px,10vw,64px)}
      .bridge--gesture{padding-block:clamp(28px,8vw,44px)}
    }

    /* ===== SPEC C — shareable cards + decision triad (additive) ===== */
    .roi-sharecard{margin-top:var(--s5);width:100%;justify-content:center}
    .roi-sharecard:not([hidden]) ~ .roi-wa{margin-top:var(--s3)}
    html[lang="kn"] .roi-sharecard{font-family:var(--f-kn)}
    .roi-sharecard[hidden],.bt-share[hidden]{display:none!important}   /* .btn's display would beat [hidden] */
    .btn.is-busy{pointer-events:none;opacity:.75}
    .btn.is-busy::after{content:"";width:15px;height:15px;flex:0 0 auto;margin-left:6px;border-radius:50%;
      border:2px solid currentColor;border-right-color:transparent;animation:kcspin .7s linear infinite}
    @keyframes kcspin{to{transform:rotate(360deg)}}
    .kcard-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
      z-index:90;max-width:min(92vw,480px);background:var(--ink);color:#fff;border-radius:12px;padding:12px 18px;
      font-family:var(--f-head);font-weight:500;font-size:14px;line-height:1.45;text-align:center;
      opacity:0;pointer-events:none;transition:opacity var(--base) var(--ease)}
    html[lang="kn"] .kcard-toast{font-family:var(--f-kn)}
    .kcard-toast.show{opacity:1}

    /* triad on the pricing hero card: Reserve stays primary; demo secondary; WhatsApp quiet */
    .rhc-triad{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s3)}
    .rhc-triad .triad-demo{width:100%;justify-content:center}
    .triad-wa{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:48px;
      font-family:var(--f-head);font-weight:600;font-size:14px;color:var(--ink-2);text-decoration:none}
    .triad-wa:hover{color:var(--ink)}
    html[lang="kn"] .triad-wa{font-family:var(--f-kn)}

    /* mini triad + share inside the configurator summary */
    .bt-share{width:100%;justify-content:center;margin-top:var(--s3)}
    .triad-mini{display:flex;flex-wrap:wrap;gap:4px 18px;justify-content:center;margin-top:var(--s3)}
    .triad-mini a{display:inline-flex;align-items:center;min-height:44px;font-family:var(--f-head);font-weight:600;
      font-size:13.5px;color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent}
    .triad-mini a:hover{color:var(--ink);border-bottom-color:var(--line-strong)}
    html[lang="kn"] .triad-mini a{font-family:var(--f-kn)}
    @media(max-width:743px){
      /* the collapsed fixed builder bar shows only total + Reserve; extras return in .open */
      html.btbar-ready .builder-total .bt-share,
      html.btbar-ready .builder-total .triad-mini{display:none}
      html.btbar-ready .builder-total.open .bt-share{display:inline-flex}
      html.btbar-ready .builder-total.open .triad-mini{display:flex}
    }

    /* demo request form — paper panel, 4 fields, one-handed at 390px, sunlight contrast */
    .demo-form{max-width:720px;margin:var(--s7) auto 0;background:#fff;border:1px solid var(--line-strong);
      border-radius:var(--r-card);padding:clamp(20px,4vw,32px);text-align:left}
    .demo-form-h{font-family:var(--f-head);font-weight:700;font-size:clamp(20px,2.4vw,26px);letter-spacing:-0.01em;margin-bottom:var(--s4)}
    html[lang="kn"] .demo-form-h{font-family:var(--f-kn);letter-spacing:0}
    .demo-form-grid{display:grid;gap:var(--s4)}
    @media(min-width:744px){.demo-form-grid{grid-template-columns:1fr 1fr}}
    .df-field{display:flex;flex-direction:column;gap:7px;min-width:0}
    .df-lab{font-family:var(--f-head);font-weight:600;font-size:13.5px;color:var(--ink)}
    html[lang="kn"] .df-lab{font-family:var(--f-kn)}
    .df-input{height:52px;border:1px solid var(--line-strong);border-radius:10px;background:#fff;
      padding:0 14px;font-family:var(--f-body);font-size:16px;color:var(--ink);width:100%}
    .df-input:focus-visible{outline:2px solid var(--saffron);outline-offset:1px;border-color:transparent}
    .df-crop{display:flex;gap:8px}
    .df-crop-btn{flex:1;min-height:52px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
      border:1px solid var(--line-strong);border-radius:10px;background:#fff;cursor:pointer;
      font-family:var(--f-head);font-weight:600;font-size:15px;color:var(--ink)}
    html[lang="kn"] .df-crop-btn{font-family:var(--f-kn)}
    .df-crop-btn[aria-pressed="true"]{border-color:var(--saffron);background:rgba(255,153,51,.12);color:var(--saffron-ink)}
    .df-send{width:100%;justify-content:center;margin-top:var(--s4)}
    .df-hint{margin-top:var(--s3);font-family:var(--f-head);font-weight:600;font-size:13.5px;color:var(--brand-maroon)}
    html[lang="kn"] .df-hint{font-family:var(--f-kn)}
    .df-note{margin-top:var(--s3);font-family:var(--f-head);font-weight:600;font-size:14px;color:var(--green)}
    html[lang="kn"] .df-note{font-family:var(--f-kn)}
    .demo-reserve{margin-top:var(--s4);text-align:center;font-family:var(--f-head);font-weight:600;font-size:14px}
    .demo-reserve a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line-strong);
      padding-bottom:2px;min-height:44px;display:inline-flex;align-items:center}
    .demo-reserve a:hover{color:var(--ink)}
    html[lang="kn"] .demo-reserve{font-family:var(--f-kn)}

    /* ===== SPEC B — four explanatory animations (each block independently removable;
       base markup is the informative STATIC state — JS only "arms" motion when allowed,
       so no-JS and prefers-reduced-motion users see complete diagrams) ===== */

    /* --- B1: machine assembles itself (configurator) --- */
    .bviz{max-width:720px;margin:var(--s5) auto var(--s2);}
    .bviz svg{display:block;width:100%;height:auto}
    .bviz [data-viz]{opacity:0;visibility:hidden}
    .bviz [data-viz].on{opacity:1;visibility:visible}
    .bviz.ready [data-viz]{transition:opacity .28s var(--ease),transform .34s cubic-bezier(.3,.7,.3,1),visibility 0s .3s;
      transform:translate(var(--ex,0px),var(--ey,0px))}
    .bviz.ready [data-viz].on{transform:none;transition-delay:0s;
      animation:bvizSeat .42s cubic-bezier(.22,.75,.3,1) both}
    @keyframes bvizSeat{
      0%{opacity:0;transform:translate(var(--ex,0px),var(--ey,0px))}
      72%{opacity:1;transform:translate(0,1.5px)}          /* the mechanical "seat" settle */
      100%{opacity:1;transform:none}
    }

    /* --- B2: smart-drive follow (autonomy) --- */
    .sdf{position:relative;max-width:330px;margin-top:var(--s5)}
    .sdf svg{display:block;width:100%;height:auto}
    .sdf-label{position:absolute;top:46%;right:8%;font-family:var(--f-head);font-weight:600;font-size:12px;
      letter-spacing:.05em;color:var(--ink-2);background:rgba(255,255,255,.82);border:0.5px solid var(--line);
      border-radius:var(--r-pill);padding:3px 10px;opacity:.9;pointer-events:none}
    @media(max-width:743px){.sdf{margin-left:auto;margin-right:auto}}

    /* --- B3: battery day-cycle (battery) --- */
    .bday{max-width:400px;margin-top:var(--s5)}
    .bday svg{display:block;width:100%;height:auto}
    .bday-read{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s2)}
    .bday-batt{flex:0 0 auto}
    .bday-batt svg{width:64px;height:auto;display:block}
    .bday-nums{display:flex;gap:var(--s5);align-items:baseline;flex-wrap:wrap}
    .bday-num b{font-family:var(--f-head);font-weight:700;font-size:clamp(22px,2.4vw,28px);color:var(--ink);font-style:normal}
    .bday-num{display:flex;flex-direction:column;gap:2px}
    .bday-num-lab{font-family:var(--f-head);font-weight:600;font-size:11.5px;letter-spacing:.04em;color:var(--ink-2);text-transform:uppercase}
    html[lang="kn"] .bday-num-lab{font-family:var(--f-kn);text-transform:none;letter-spacing:0}
    .bday-unit{font-family:var(--f-head);font-weight:600;font-size:14px;color:var(--ink-2)}
    html[lang="kn"] .bday-unit{font-family:var(--f-kn)}
    #bdayFill{transform:scaleX(.15);transform-origin:left center;transform-box:fill-box}
    #bdaySun{will-change:transform}
    @media(max-width:743px){.bday{margin-left:auto;margin-right:auto;max-width:360px}}

    /* --- B4: before/after labour (powers · spray tab; dark ground) --- */
    .bfa{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;
      margin-top:var(--s4);max-width:420px}
    .bfa-pane{display:flex;flex-direction:column;gap:4px;min-width:0}
    .bfa-pane svg{display:block;width:100%;height:auto}
    .bfa-cap{font-family:var(--f-head);font-weight:600;font-size:12px;letter-spacing:.03em;
      color:var(--ink-on-dark-2);text-align:center}
    html[lang="kn"] .bfa-cap{font-family:var(--f-kn);letter-spacing:0}
    .bfa-cap .bfa-num{color:var(--saffron)}
    .bfa-arrow{color:var(--ink-on-dark-2);opacity:.8;display:flex}
    .bfa-arrow svg{width:22px;height:22px}
    /* armed (motion allowed) → elements hide, then .play choreographs them in */
    .bfa.bfa-armed .bfa-fig{opacity:0}
    .bfa.bfa-armed .bfa-draw{stroke-dasharray:1;stroke-dashoffset:1}
    .bfa.bfa-armed .bfa-arrow{opacity:0}
    .bfa.bfa-play .bfa-before .bfa-fig{animation:bfaIn .5s var(--ease) both;animation-delay:calc(var(--i,0)*.13s)}
    .bfa.bfa-play .bfa-arrow{animation:bfaIn .45s var(--ease) .75s both}
    .bfa.bfa-play .bfa-after .bfa-fig{animation:bfaIn .5s var(--ease) 1s both}
    .bfa.bfa-play .bfa-draw{animation:bfaDraw .95s var(--ease) 1.05s both}
    .bfa.bfa-play .bfa-before svg{animation:bfaDim .6s var(--ease) 1.7s both}
    @keyframes bfaIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
    @keyframes bfaDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
    @keyframes bfaDim{to{opacity:.45}}
    @media(max-width:743px){.bfa{margin-left:auto;margin-right:auto}}

    /* ===== REDUCED MOTION ===== */
    @media(prefers-reduced-motion:reduce){
      .reveal{transition:none;opacity:1;transform:none}
      .disclosure-chevron{transition:none}
      *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
        transition-duration:.001ms!important;scroll-behavior:auto!important}
      html{scroll-behavior:auto}
    }

    /* ===== MOBILE REFINEMENT v2 (≤743px) — empty weight, bottom-slot governance, reunited payoffs.
       The base rules directly below only (a) style the broken-image fallback state and (b) hide NEW
       elements so desktop stays pixel-identical; every layout override lives in the ≤743px block. ===== */

    /* 1a — a broken pricing-hero image can never ship: clean wordmark tile instead of the glyph */
    .rhc-media--fallback{display:flex;align-items:center;justify-content:center;min-height:200px}
    .rhc-media--fallback::after{content:"Rancher SEV 5.1";font-family:var(--f-head);font-weight:700;
      font-size:22px;color:var(--ink-2);letter-spacing:-0.02em}

    /* new-element neutralizers — these elements render ONLY on ≤743px */
    .kt-pillar-ico{display:none}
    .chapters .ch-short{display:none}
    .sb-menu{display:none}
    .stickybar .sbr-short{display:none}
    [data-mobile-copy]{display:none}
    .roiw-back,.roiw-ctx,.roiw-illus{display:none}

    @media(max-width:743px){
      /* ---- 1a: tighter fallback tile on phones ---- */
      .rhc-media--fallback{min-height:140px}

      /* ---- 1b: imageless add-on cards collapse the media void to a slim brand strip.
         When a real photo ships, the normal .addon-media path takes over automatically. ---- */
      .addon-media--ph{aspect-ratio:auto;height:6px;border-radius:0;
        background:linear-gradient(90deg,var(--brand-maroon),var(--saffron))}

      /* ---- 1c: trust pillars → compact 2×2 with in-system line icons ---- */
      .kt-pillars{grid-template-columns:1fr 1fr;gap:10px;margin-top:var(--s6)}
      .kt-pillar{padding:var(--s4);display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
      .kt-pillar-ico{display:block;width:22px;height:22px;color:var(--brand-maroon)}
      .kt-pillar-ico svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;
        stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
      .kt-pillar-t{font-size:13.5px}

      /* ---- 1d: section rhythm — no screen-tall gaps between blocks ---- */
      .section{padding-block:clamp(48px,12vw,72px)}
      .kt-stats{margin-top:var(--s6)}
      .kt-finale{margin-top:var(--s7)}

      /* ---- 4a: map + caption + stats read as one arc (~1.5 viewports) ---- */
      .kt-map{max-width:min(72vw,300px)}
      .kt-map-caption{margin-top:var(--s3)}

      /* ---- 4b: next-section peek — the dark #powers block never ends exactly at the fold ---- */
      .powers-pin{padding-bottom:calc(clamp(56px,8vh,96px) - 24px)}

      /* ---- 4c: chapter strip — the INNER container scrolls (so the fade mask never erases the
         frosted bar itself), snap rail, one line, never clipped mid-word ---- */
      .chapters{overflow-x:hidden}
      .chapters .container{overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        -webkit-mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 28px),transparent);
        mask-image:linear-gradient(90deg,transparent,#000 20px,#000 calc(100% - 28px),transparent)}
      .chapters .container::-webkit-scrollbar{display:none}
      .chapters a{scroll-snap-align:center;padding:12px 10px;font-size:14px;line-height:1.4}
      .chapters .ch-short{display:inline}
      .chapters .ch-full{display:none}

      /* ---- 2b: global action bar — wayfinding-first: Menu · WhatsApp · one contextual CTA (56px) ---- */
      :root{--sticky-h:57px}   /* 6 + 44 + 6 + 1px border — body padding and the launcher follow it */
      .stickybar{gap:8px;padding:6px 12px calc(6px + env(safe-area-inset-bottom));
        background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(1.1);
        -webkit-backdrop-filter:blur(14px) saturate(1.1)}
      .stickybar .btn{height:44px}
      .sb-icon{width:44px;height:44px}
      .sb-menu{display:inline-flex;cursor:pointer}
      .stickybar .sb-call{display:none}          /* phone moves inside the menu — one contact channel */
      .stickybar .sbr-short{display:inline}
      .stickybar .sbr-full{display:none}
      html.sb-price .stickybar .sbr-short{display:none}   /* price context on screen → price on the CTA */
      html.sb-price .stickybar .sbr-full{display:inline}

      /* ---- 2a: bottom-slot governance — at most ONE fixed bottom element; losers slide out ---- */
      .bslot-off{transform:translateY(210%)!important;pointer-events:none}
      /* the ROI answer pill owns the whole bottom edge on phones (never stacked above the bar) */
      .roi-stickybar{bottom:max(12px,env(safe-area-inset-bottom))}

      /* ---- 2c: wizard sub-copy — sliders line only where sliders are visible ---- */
      html.roiw-active [data-mobile-copy]{display:inline}
      html.roiw-active [data-desktop-copy]{display:none}

      /* ---- 3: wizard screens — back affordance, live context strip, step illustration ---- */
      html.roiw-active .roiw-back:not([hidden]){display:inline-flex;align-items:center;gap:6px;
        min-height:44px;margin:0 0 4px;padding:6px 12px 6px 0;border:0;background:none;cursor:pointer;
        font-family:var(--f-head);font-weight:600;font-size:14px;color:var(--ink-2)}
      html[lang="kn"] .roiw-back{font-family:var(--f-kn)}
      .roiw-back svg{width:16px;height:16px;display:block;fill:none;stroke:currentColor;
        stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
      html.roiw-active .roi-controls{position:relative}
      html.roiw-active .roiw-illus{display:block;position:absolute;top:14px;right:14px;width:44px;height:44px;
        color:var(--brand-maroon);opacity:.2;pointer-events:none}
      .roiw-illus svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;
        stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
      html.roiw-active .roiw-ctx:not([hidden]){display:flex;flex-wrap:wrap;gap:8px}
      .roiw-ctx-chip{display:inline-flex;align-items:baseline;gap:6px;border:0.5px solid var(--line);
        background:var(--canvas-2);border-radius:var(--r-pill);padding:6px 12px;
        font-family:var(--f-head);font-weight:600;font-size:12.5px;color:var(--ink-2)}
      .roiw-ctx-chip b{color:var(--ink);font-weight:700}
      html[lang="kn"] .roiw-ctx-chip{font-family:var(--f-kn)}
    }


/* ---- section-local styles (moved from inline for transfer weight) ---- */
 so the whole feature is one reviewable block.)
         ═══════════════════════════════════════════════════════════════════════ -->
    <style>
      /* — #family product-family grid (cards rendered from the NAV config) — */
      .family{background:var(--canvas)}
      .fam-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px;margin-top:var(--s6)}
      .fam-grid .navcard{flex-direction:column;align-items:stretch;text-align:left;border:1px solid var(--line);
        padding:16px;border-radius:var(--r-card);gap:14px}
      .fam-grid .navcard-thumb{width:100%;height:150px;flex-basis:auto;border-radius:12px}
      .fam-grid .navcard-glyph{width:52px;height:52px}
      .fam-grid .navcard-name{font-size:19px}
      .fam-grid .navcard-meta{font-size:13.5px;white-space:normal}
      .fam-grid .navcard-price{font-size:16px}
      .fam-grid .navcard-tag{top:24px;right:24px}
      .famcard-notify{color:var(--saffron-ink)!important}

      /* — #doti section — */
      .doti{background:var(--canvas-2)}
      .doti-badge{display:inline-flex;align-items:center;gap:8px;background:var(--saffron);color:#3a2400;
        font-family:var(--f-head);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;
        padding:6px 14px;border-radius:var(--r-pill)}
      html[lang="kn"] .doti-badge{font-family:var(--f-kn);letter-spacing:0;text-transform:none}
      .doti-h{font-family:var(--f-head);font-weight:700;letter-spacing:-.03em;font-size:var(--t-h1);
        line-height:1.05;margin:18px 0 10px;max-width:16ch}
      html[lang="kn"] .doti-h{font-family:var(--f-kn);letter-spacing:0;line-height:1.25}
      .doti-lead{font-size:var(--t-body);color:#4b4b50;max-width:52ch;line-height:1.6}
      html[lang="kn"] .doti-lead{font-family:var(--f-kn);line-height:1.7}
      .doti-benefits{list-style:none;padding:0;margin:var(--s6) 0 0;display:grid;
        grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
      .doti-benefits li{display:flex;gap:10px;font-size:14.5px;line-height:1.45;color:var(--ink)}
      html[lang="kn"] .doti-benefits li{font-family:var(--f-kn);line-height:1.6}
      .doti-benefits svg{flex:0 0 auto;width:20px;height:20px;color:var(--green);margin-top:1px}
      .doti-sub{font-family:var(--f-head);font-weight:700;font-size:var(--t-h3);margin:var(--s8) 0 var(--s4)}
      html[lang="kn"] .doti-sub{font-family:var(--f-kn)}
      /* reach selector */
      .reach{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
      .reach-card{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px;min-height:44px;
        background:#fff;border:1.5px solid var(--line);border-radius:var(--r-card);cursor:pointer;text-align:left}
      .reach-card:focus-visible{outline:2px solid var(--saffron);outline-offset:2px}
      .reach-card[aria-checked="true"]{border-color:var(--saffron);box-shadow:0 0 0 3px rgba(255,153,51,.18)}
      .reach-code{font-family:var(--f-head);font-weight:700;font-size:18px;font-variant-numeric:tabular-nums}
      .reach-ft{font-size:13px;color:#6b6b70}
      html[lang="kn"] .reach-ft{font-family:var(--f-kn)}
      .reach-price{font-family:var(--f-head);font-weight:700;font-size:14px;color:var(--saffron-ink);
        margin-top:6px;font-variant-numeric:tabular-nums}
      .reach-pos{position:absolute;top:12px;right:12px;font-family:var(--f-head);font-weight:700;font-size:10px;
        letter-spacing:.04em;text-transform:uppercase;color:var(--green);background:var(--green-soft);
        padding:2px 7px;border-radius:var(--r-pill)}
      html[lang="kn"] .reach-pos{font-family:var(--f-kn);letter-spacing:0;text-transform:none}
      .reach-echo{margin-top:var(--s4);font-family:var(--f-head);font-weight:600;font-size:15px;color:var(--ink);
        font-variant-numeric:tabular-nums}
      html[lang="kn"] .reach-echo{font-family:var(--f-kn)}
      .doti-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s5)}
      .doti-indicative{margin-top:14px;font-size:12.5px;color:#6b6b70}
      html[lang="kn"] .doti-indicative{font-family:var(--f-kn)}
      /* engineering cards */
      .doti-eng{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
      .eng-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:18px}
      .eng-card h4{font-family:var(--f-head);font-weight:700;font-size:15px;margin-bottom:6px}
      html[lang="kn"] .eng-card h4{font-family:var(--f-kn)}
      .eng-card p{font-size:13.5px;color:#4b4b50;line-height:1.5}
      html[lang="kn"] .eng-card p{font-family:var(--f-kn);line-height:1.65}
      /* measuring-tape warning callout */
      .doti-warn{display:flex;gap:16px;margin-top:var(--s8);padding:20px 22px;background:#FFF6EC;
        border:1px solid var(--saffron);border-left:4px solid var(--saffron);border-radius:var(--r-card)}
      .doti-warn svg{flex:0 0 auto;width:26px;height:26px;color:var(--saffron-ink);margin-top:2px}
      .doti-warn-h{font-family:var(--f-head);font-weight:700;font-size:15px;margin-bottom:4px}
      html[lang="kn"] .doti-warn-h{font-family:var(--f-kn)}
      .doti-warn p{font-size:14px;color:#5a4326;line-height:1.55}
      html[lang="kn"] .doti-warn p{font-family:var(--f-kn);line-height:1.7}
    

      .ba{background:var(--canvas)}
      .ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s7)}
      @media(max-width:743px){.ba-grid{grid-template-columns:1fr;gap:var(--s3)}}
      .ba-card{display:flex;flex-direction:column;align-items:center;gap:var(--s3);text-align:center;
        padding:var(--s6) var(--s5);background:#fff;border:0.5px solid var(--line-strong);border-radius:var(--r-card);
        opacity:0;transform:translateY(16px)}
      @media(min-width:744px){.ba-card{flex-direction:row;gap:var(--s5);justify-content:center}}
      @media(hover:hover){.ba-card:hover{box-shadow:0 12px 30px -16px rgba(0,0,0,.14);border-color:var(--line)}}
      .ba-side{display:flex;flex-direction:column;gap:6px;min-width:0;flex:0 1 auto}
      .ba-lab{font-family:var(--f-head);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
      html[lang="kn"] .ba-lab{font-family:var(--f-kn);text-transform:none;letter-spacing:0}
      .ba-val{font-family:var(--f-head);font-weight:700;font-size:clamp(19px,2.6vw,26px);line-height:1.1;letter-spacing:-0.01em}
      html[lang="kn"] .ba-val{font-family:var(--f-kn);letter-spacing:0;line-height:1.3}
      .ba-before .ba-val{color:var(--ink-2)}
      .ba-after .ba-val{color:var(--green)}
      .ba-card--time .ba-after .ba-val{color:var(--saffron-ink)}
      .ba-arrow{flex:0 0 auto;color:var(--saffron);line-height:0}
      .ba-arrow svg{transform:rotate(90deg)}
      @media(min-width:744px){.ba-arrow svg{transform:none}}
      /* reveal on scroll (staggered); prefers-reduced-motion falls straight to visible */
      .ba.ba-in .ba-card{opacity:1;transform:none;transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}
      .ba.ba-in .ba-card:nth-child(2){transition-delay:.09s}
      .ba.ba-in .ba-card:nth-child(3){transition-delay:.18s}
      .ba-foot{margin-top:var(--s6);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4)}
      .ba-note{color:var(--ink-2);font-size:clamp(15px,1.5vw,17px);max-width:52ch}
      @media(prefers-reduced-motion:reduce){.ba .ba-card{opacity:1 !important;transform:none !important;transition:none !important}}
    

      .kbtv{background:var(--canvas-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
      .kbtv-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:var(--s6)}
      .kbtv-title{font-family:var(--f-head);font-weight:700;font-size:var(--t-h1);line-height:1.05;letter-spacing:-0.025em}
      html[lang="kn"] .kbtv-title{font-family:var(--f-kn);letter-spacing:0;line-height:1.3}
      .kbtv-sub{margin-top:var(--s3);color:var(--ink-2);max-width:54ch}
      .kbtv-watchall{flex:0 0 auto}
      .kbtv-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s5)}
      @media(max-width:860px){.kbtv-grid{grid-template-columns:1fr}}
      .kbtv-hero{position:relative;border-radius:var(--r-card);overflow:hidden;min-height:320px;display:flex;align-items:flex-end;background:var(--dark);color:#fff}
      .kbtv-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6}
      .kbtv-hero-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,16,.1),rgba(10,20,16,.9))}
      .kbtv-hero-body{position:relative;z-index:1;padding:var(--s6)}
      .kbtv-hero-kick{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-head);font-weight:600;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--saffron)}
      html[lang="kn"] .kbtv-hero-kick{font-family:var(--f-kn);text-transform:none;letter-spacing:0}
      .kbtv-hero-h{font-family:var(--f-head);font-weight:700;font-size:var(--t-h3);line-height:1.2;margin-top:8px;max-width:22ch}
      html[lang="kn"] .kbtv-hero-h{font-family:var(--f-kn)}
      .kbtv-hero-play{margin-top:var(--s4);display:inline-flex;align-items:center;gap:8px;height:44px;padding-inline:20px;border-radius:var(--r-pill);background:var(--saffron);color:#1A1208;font-family:var(--f-head);font-weight:600;font-size:15px;border:0;cursor:pointer}
      html[lang="kn"] .kbtv-hero-play{font-family:var(--f-kn)}
      .kbtv-side{display:flex;flex-direction:column;gap:var(--s4)}
      .kbtv-mini{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center;text-align:left;background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px;cursor:pointer;transition:transform var(--fast) var(--ease),box-shadow var(--base) var(--ease)}
      .kbtv-mini:hover{transform:translateY(-2px);box-shadow:0 10px 24px -14px rgba(0,0,0,.3)}
      .kbtv-mini-media{position:relative;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:var(--canvas-2)}
      .kbtv-mini-media img{width:100%;height:100%;object-fit:cover}
      .kbtv-mini-tag{display:inline-block;font-family:var(--f-head);font-weight:600;font-size:11px;color:var(--saffron-ink)}
      html[lang="kn"] .kbtv-mini-tag{font-family:var(--f-kn)}
      .kbtv-mini-h{font-family:var(--f-head);font-weight:600;font-size:14px;line-height:1.3;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
      html[lang="kn"] .kbtv-mini-h{font-family:var(--f-kn);line-height:1.45}
      .kbtv-strip{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s6)}
      .kbtv-pill{height:34px;padding-inline:14px;border-radius:var(--r-pill);background:#fff;border:1px solid var(--line-strong);font-family:var(--f-head);font-weight:600;font-size:13px;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
      html[lang="kn"] .kbtv-pill{font-family:var(--f-kn)}
    

/* #solutions - ported from the router homepage (home.css subset) */
.door{padding-block:clamp(36px,7.4vw,84px)}
.door--alt{background:var(--canvas-2)}
.door-cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--s5)}
.door-more{margin-top:var(--s5)}
.door-more a{font-family:var(--f-head);font-weight:600;font-size:14.5px;color:var(--saffron-ink);
  text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.door-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:var(--s6)}
.crop-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:var(--s6)}
.crop-tile{display:flex;flex-direction:column;gap:6px;padding:18px 16px;background:var(--canvas);
  border:0.5px solid var(--line);border-radius:var(--r-card);text-decoration:none;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.crop-tile:hover{transform:translateY(-3px);box-shadow:0 14px 32px -18px rgba(0,0,0,.16)}
.crop-tile .ct-name{font-family:var(--f-head);font-weight:700;font-size:17px;color:var(--ink)}
.crop-tile .ct-sub{font-size:13px;color:var(--ink-2);line-height:1.45}
.crop-tile .ct-go{margin-top:auto;padding-top:8px;font-family:var(--f-head);font-weight:600;font-size:13.5px;color:var(--saffron-ink)}


/* ---- #solutions stage/tiles (kb.css + home.css subset) ---- */
.kb-stage{position:relative;border:0.5px solid var(--line);border-radius:20px;background:var(--canvas);
  padding:clamp(24px,4.5vw,40px) clamp(18px,3.5vw,34px);text-align:center;overflow:hidden}
.kb-stage::before{content:"";position:absolute;inset:-30%;pointer-events:none;
  background:radial-gradient(50% 40% at 50% 42%,rgba(19,136,8,.08),transparent 70%)}
.kb-stage.tick .kb-stage-val{animation:kbPulse .45s var(--ease)}
.kb-stage-lab{display:block;font-weight:600;font-size:14px;color:var(--navy)}
.kb-stage-val{display:block;margin-top:10px;font-weight:800;line-height:1;letter-spacing:-0.02em;
  font-size:clamp(46px,11vw,76px);color:var(--green);font-variant-numeric:tabular-nums}
.kb-stage-pb{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:14px;
  background:#FFF4E5;color:var(--saffron-ink);font-weight:600;font-size:14px;padding:8px 16px;border-radius:var(--r-pill)}
.kb-stage-note{display:block;margin-top:10px;font-size:12.5px;color:var(--ink-2)}
.crop-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:var(--s6)}
.crop-tile{display:flex;flex-direction:column;gap:6px;padding:18px 16px;background:var(--canvas);
  border:0.5px solid var(--line);border-radius:var(--r-card);text-decoration:none;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.crop-tile:hover{transform:translateY(-3px);box-shadow:0 14px 32px -18px rgba(0,0,0,.16)}
.crop-tile .ct-name{font-family:var(--f-head);font-weight:700;font-size:17px;color:var(--ink)}
.crop-tile .ct-sub{font-size:13px;color:var(--ink-2);line-height:1.45}
.crop-tile .ct-go{margin-top:auto;padding-top:8px;font-family:var(--f-head);font-weight:600;font-size:13.5px;color:var(--saffron-ink)}
html[lang="kn"] .crop-tile .ct-name{font-family:var(--f-kn)}
html[lang="kn"] .crop-tile .ct-sub{font-family:var(--f-kn)}
html[lang="kn"] .crop-tile .ct-go{font-family:var(--f-kn)}
/* ---- .kb-rev reveal parity (kb.css subset, armed by showroom.js) ---- */
html.kb-js .kb-rev{opacity:0;transform:translateY(22px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
html.kb-js .kb-rev.in{opacity:1;transform:none}
.kb-rev.in{opacity:1;transform:none}
.kb-rev[data-rev-d="1"]{transition-delay:.08s}.kb-rev[data-rev-d="2"]{transition-delay:.16s}.kb-rev[data-rev-d="3"]{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.kb-rev{opacity:1;transform:none;transition:none}}

/* ===== #range - the platform's shop window (Phase D-platform) ===== */
.rng{background:var(--canvas-2,#F8F6F1);border-top:0.5px solid var(--line)}
.rng-grid{display:grid;gap:14px;margin-top:28px}
.rng-card{display:grid;grid-template-columns:118px 1fr;gap:16px;align-items:center;text-decoration:none;color:inherit;
  background:#fff;border:0.5px solid var(--line);border-radius:20px;padding:16px;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.rng-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -22px rgba(0,0,0,.18)}
.rng-card--lead{grid-template-columns:1fr;text-align:center;padding:26px 18px}
.rng-card--lead .rng-media{max-width:340px;margin:0 auto}
.rng-media img{width:100%;height:auto;display:block}
.rng-ph{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;border-radius:14px;
  background:linear-gradient(160deg,#fff, #F3EFE7);border:0.5px solid var(--line)}
.rng-ph-mark{font-family:var(--f-head);font-weight:800;font-size:34px;color:#781216;opacity:.35}
.rng-body{min-width:0}
.rng-badge{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;border-radius:980px;
  padding:3px 10px;margin-bottom:8px;border:0.5px solid var(--line);color:var(--ink-2,#6E6E73)}
.rng-badge--soon{color:#C2700E;border-color:rgba(255,153,51,.5)}
.rng-badge--dealer{color:var(--navy,#000080);border-color:rgba(0,0,128,.25)}
.rng-name{font-family:var(--f-head);font-weight:700;font-size:19px;line-height:1.2;margin:0}
html[lang="kn"] .rng-name span[data-kn]{font-family:var(--f-kn);letter-spacing:0}
.rng-line{font-size:13.5px;color:var(--ink-2,#6E6E73);line-height:1.5;margin:6px 0 0}
.rng-foot{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:12px}
.rng-card--lead .rng-foot{justify-content:center;gap:18px}
.rng-price{font-weight:700;font-size:15px;color:var(--ink,#1D1D1F)}
.rng-go{font-family:var(--f-head);font-weight:600;font-size:13.5px;color:#C2700E;white-space:nowrap}
.rng-more{margin-top:20px;text-align:center}
.rng-more a{font-family:var(--f-head);font-weight:600;color:#C2700E;text-decoration:none}
@media(min-width:744px){
  .rng-grid{grid-template-columns:repeat(2,1fr)}
  .rng-card--lead{grid-column:1/-1;grid-template-columns:minmax(280px,420px) 1fr;text-align:left;align-items:center}
  .rng-card--lead .rng-foot{justify-content:flex-start}
}
@media(min-width:1200px){ .rng-grid{grid-template-columns:repeat(3,1fr)} .rng-card--lead{grid-column:1/-1} }
/* hero range strip - the breadth signal inside screen one. MOBILE-ONLY: on >=744px the hero
   composes its children absolutely, which left this in-flow strip parked at the very top of
   the section - directly under the transparent header, doubling the nav as a row of dark
   pills (the "corrupted navbar"). Desktop breadth lives in the Products mega + #range. */
.hero-range-strip{position:relative;z-index:3;display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:10px 16px 14px;scrollbar-width:none}
@media(min-width:744px){ .hero-range-strip{display:none} }
.hero-range-strip::-webkit-scrollbar{display:none}
.hrs-chip{flex:0 0 auto;font-family:var(--f-head);font-weight:600;font-size:12.5px;color:#fff;text-decoration:none;
  border:0.5px solid rgba(255,255,255,.35);border-radius:980px;padding:7px 14px;background:rgba(0,0,0,.28);
  backdrop-filter:blur(6px)}
.hrs-chip--soon{border-color:rgba(255,153,51,.7)}
html[lang="kn"] .hrs-chip span[data-kn]{font-family:var(--f-kn);letter-spacing:0}
/* ===== #why - company-level trust tiles ===== */
.why{background:#fff}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.why-tile{border:0.5px solid var(--line);border-radius:16px;padding:18px 14px;background:var(--canvas-2,#F8F6F1)}
.why-t{font-family:var(--f-head);font-weight:600;font-size:14.5px;line-height:1.45;color:var(--ink,#1D1D1F)}
html[lang="kn"] .why-t span[data-kn]{font-family:var(--f-kn);letter-spacing:0;line-height:1.6}
@media(min-width:744px){ .why-grid{grid-template-columns:repeat(4,1fr)} }