:root {
  /* ---- Brand primaries (Brand Guideline > Color palettes > Primary) ---- */
  --kg-green: #39b635;
  --kg-black: #222222;
  --kg-blue: #0086ff;

  /* ---- Brand secondaries (Brand Guideline > Color palettes > Secondary) ---- */
  --kg-purple: #c474ff;
  --kg-red: #f45170;
  --kg-gray: #dedeef;

  /* ---- Green ramp (derived from --kg-green; 500 is the brand value) ---- */
  --green-50: #eef9ed;
  --green-100: #d6f0d4;
  --green-200: #a9e0a5;
  --green-300: #78ce73;
  --green-400: #52c04c;
  --green-500: #39b635;
  --green-600: #2e982b;
  --green-700: #237a21;
  --green-800: #1a5b19;
  --green-900: #123d11;

  /* ---- Ink ramp (neutral; 800 is the brand black) ---- */
  --ink-1000: #0d0f0d;
  --ink-900: #161816;
  --ink-800: #222222;
  --ink-700: #3a3d3a;
  --ink-600: #555956;
  --ink-500: #6b706c;
  --ink-400: #949994;
  --ink-300: #b9bec4;
  --ink-200: #dedeef; /* brand gray */
  --ink-100: #eceef4;
  --ink-50: #f5f6f9;
  --white: #ffffff;

  /* ---- Site theme surfaces (from kahfguard.com, Sept 2026) ----
     The live site does NOT use neutral ink + white. Dark bands are a deep forest
     green and light bands are a warm cream. Both are recorded here as their own
     tokens rather than being folded into the ink ramp. */
  --forest-900: #071d12; /* nav bar, deepest */
  --forest-800: #0b2618; /* dark band base */
  --forest-700: #103021; /* dark band, raised card */
  --forest-600: #16402c;
  --cream-100: #f7f3ea; /* light band base */
  --cream-200: #efe9db; /* light band, alternate */

  /* ---- Amber accent (from the live site) ----
     Not in the 2024 brand guideline, but load-bearing on the site: display
     headlines on dark, step numerals, the Best Value badge, swipe hints, stars. */
  --amber-500: #e8a33c;
  --amber-400: #efb75c;
  --amber-300: #f5cd84;
  --amber-100: #fbeed3;

  /* ---- Support hues ---- */
  --blue-500: #0086ff;
  --blue-100: #d9ecff;
  --purple-500: #c474ff;
  --purple-100: #f1e2ff;
  --red-500: #f45170;
  --red-100: #ffe1e7;

  /* ---- Semantic surfaces ---- */
  --surface-page: var(--cream-100);
  --surface-subtle: var(--cream-200);
  --surface-raised: var(--white); /* cards sit white on cream */
  --surface-brand: var(--green-500);
  --surface-brand-tint: var(--green-50);
  --surface-dark: var(--forest-800);
  --surface-dark-nav: var(--forest-900);
  --surface-dark-raised: var(--forest-700);
  --surface-dark-tint: rgba(255, 255, 255, 0.06);

  /* ---- Semantic text ---- */
  --text-primary: var(--ink-800);
  --text-secondary: var(--ink-500);
  --text-muted: var(--ink-400);
  --text-brand: var(--green-600);
  --text-inverse: var(--cream-100);
  --text-display-dark: var(--amber-500); /* display headline on forest bands */
  --text-inverse-secondary: rgba(255, 255, 255, 0.7);
  --text-on-brand: var(--white);
  --text-link: var(--green-600);
  --text-link-hover: var(--green-700);

  /* ---- Semantic borders ---- */
  --border-default: var(--ink-200);
  --border-strong: var(--ink-300);
  --border-input: #c9cbdc;
  --border-brand: var(--green-500);
  --border-on-dark: rgba(255, 255, 255, 0.14);
  --border-on-dark-strong: rgba(255, 255, 255, 0.3);

  /* ---- Status ---- */
  --status-safe: var(--green-500);
  --status-blocked: var(--red-500);
  --status-info: var(--blue-500);
  --status-premium: var(--purple-500);
  --status-highlight: var(--amber-500);

  /* ---- Gradients (shield mark + hero accents) ---- */
  --gradient-shield: linear-gradient(158deg, #57c94a 0%, #39b635 38%, #17a3c9 76%, #0086ff 100%); /* @kind color */
  --gradient-brand-band: linear-gradient(135deg, var(--green-500) 0%, var(--green-700) 100%);
  --gradient-dark-band: linear-gradient(180deg, var(--forest-800) 0%, var(--forest-900) 100%);

  /* ---- Decorative halos (behind icons, never content-bearing) ---- */
  --halo-green: rgba(57, 182, 53, 0.14);
  --halo-blue: rgba(0, 134, 255, 0.12);
  --halo-purple: rgba(196, 116, 255, 0.16);
  --halo-red: rgba(244, 81, 112, 0.14);
  --halo-amber: rgba(232, 163, 60, 0.18);

  /* ---- Geometric pattern overlay on forest bands ----
     Faint outlined diamonds/octagons, barely visible. Decorative only. */
  --pattern-on-dark: rgba(255, 255, 255, 0.035);
}
:root {
  /* ---- Families ---- */
  --font-heading: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Lato", "Segoe UI", system-ui, sans-serif;
  --font-arabic: "Noto Kufi Arabic", "Poppins", system-ui, sans-serif;
  --font-bengali: "Hind Siliguri", "Poppins", system-ui, sans-serif;

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* ---- Heading scale (Brand Guideline > Typography > Heading, Poppins) ---- */
  --text-h1: 60px;
  --text-h2: 48px;
  --text-h3: 32px;
  --text-h4: 24px;
  --text-h5: 24px;

  /* Addition beyond the guideline: hero display size for wide marketing bands. */
  --text-display: 72px;

  /* ---- Content scale (Brand Guideline > Typography > Content, Lato) ---- */
  --text-body: 16px;
  --text-body-lg: 18px;
  --text-body-sm: 14px;
  --text-caption: 13px;
  --text-eyebrow: 13px;

  /* ---- Line heights ---- */
  --leading-display: 1.04;
  --leading-heading: 1.14;
  --leading-subheading: 1.3;
  --leading-body: 1.62;
  --leading-tight: 1.4;
  /* Bengali and Arabic glyphs need roughly +25% over the Latin value. */
  --leading-body-script: 2;

  /* ---- Letter spacing ---- */
  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-body: 0;
  --tracking-eyebrow: 0.14em;

  /* ---- Composite roles ---- */
  --type-h1: var(--weight-bold) var(--text-h1) / var(--leading-heading) var(--font-heading);
  --type-h2: var(--weight-bold) var(--text-h2) / var(--leading-heading) var(--font-heading);
  --type-h3: var(--weight-semibold) var(--text-h3) / var(--leading-subheading) var(--font-heading);
  --type-h4: var(--weight-semibold) var(--text-h4) / var(--leading-subheading) var(--font-heading);
  --type-h5: var(--weight-regular) var(--text-h5) / var(--leading-subheading) var(--font-heading);
  --type-body: var(--weight-regular) var(--text-body) / var(--leading-body) var(--font-body);
  --type-body-lg: var(--weight-regular) var(--text-body-lg) / var(--leading-body) var(--font-body);
  --type-body-sm: var(--weight-regular) var(--text-body-sm) / var(--leading-body) var(--font-body);
  --type-label: var(--weight-semibold) var(--text-body-sm) / var(--leading-tight) var(--font-heading);
  --type-button: var(--weight-semibold) var(--text-body) / 1 var(--font-heading);
}
:root {
  /* 8px rhythm, with 4px available for icon-to-label gaps */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 128px;
  --space-13: 160px;

  /* Section rhythm */
  --section-y-desktop: 112px;
  --section-y-mobile: 64px;
  --card-padding: 24px;
  --card-padding-lg: 32px;
  --card-gap: 24px;
  --card-gap-mobile: 16px;

  /* Containers */
  --container-wide: 1200px;
  --container-desktop: 1120px;
  --container-text: 720px;
  --gutter-mobile: 20px;
  --gutter-desktop: 40px;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Controls */
  --control-height-sm: 36px;
  --control-height: 44px;
  --control-height-lg: 54px;
  --tap-target-min: 44px;
  --border-width: 1px;
  --border-width-focus: 2px;
}
:root {
  --shadow-none: none;
  --shadow-card: 0 1px 2px rgba(34, 34, 34, 0.04), 0 6px 20px rgba(34, 34, 34, 0.06);
  --shadow-card-hover: 0 2px 4px rgba(34, 34, 34, 0.05), 0 16px 40px rgba(34, 34, 34, 0.1);
  --shadow-float: 0 18px 48px rgba(13, 15, 13, 0.18);
  --shadow-brand: 0 10px 28px rgba(57, 182, 53, 0.32);
  --shadow-on-dark: 0 18px 44px rgba(0, 0, 0, 0.45);
  --ring-brand: 0 0 0 3px rgba(57, 182, 53, 0.28);
  --ring-danger: 0 0 0 3px rgba(244, 81, 112, 0.28);
}
:root {
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */
  --ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */

  --duration-press: 80ms; /* @kind other */
  --duration-hover: 140ms; /* @kind other */
  --duration-enter: 240ms; /* @kind other */
  --duration-section: 320ms; /* @kind other */
  --duration-carousel: 420ms; /* @kind other */

  --transition-hover: color var(--duration-hover) var(--ease-out),
    background-color var(--duration-hover) var(--ease-out),
    border-color var(--duration-hover) var(--ease-out),
    box-shadow var(--duration-hover) var(--ease-out),
    transform var(--duration-hover) var(--ease-out);
}
@media (prefers-reduced-motion: reduce){:root{--duration-press:0ms; /* @kind other */--duration-hover:0ms; /* @kind other */--duration-enter:0ms; /* @kind other */--duration-section:0ms; /* @kind other */--duration-carousel:0ms; /* @kind other */}}
/* element defaults */
html{-webkit-text-size-adjust:100%}
body{margin:0;font:var(--type-body);color:var(--text-primary);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5{font-family:var(--font-heading);letter-spacing:var(--tracking-heading);margin:0;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:var(--text-link);text-decoration:none;transition:var(--transition-hover)}
a:hover{color:var(--text-link-hover);text-decoration:underline}
:lang(bn),.kg-bn{font-family:var(--font-bengali);line-height:var(--leading-body-script)}
:lang(ar),.kg-ar{font-family:var(--font-arabic);line-height:var(--leading-body-script)}
:focus-visible{outline:none;box-shadow:var(--ring-brand)}
/* page */
:root{--font-heading:'Bricolage Grotesque','Noto Sans Bengali',sans-serif;--font-body:'Inter Variable','Inter','Noto Sans Bengali',system-ui,sans-serif;--font-bengali:'Noto Sans Bengali',system-ui,sans-serif}
    body{font-family:var(--font-body)}
    html{scroll-behavior:smooth}
    [data-rail]::-webkit-scrollbar{display:none}
    body{background:var(--cream-100)}
    input[type=number]::-webkit-inner-spin-button{opacity:.4}
    @keyframes kgPulse{0%{box-shadow:0 0 0 0 rgba(244,81,112,.55)}70%{box-shadow:0 0 0 9px rgba(244,81,112,0)}100%{box-shadow:0 0 0 0 rgba(244,81,112,0)}}
    @keyframes kgGlow{0%,100%{box-shadow:0 0 0 0 rgba(57,182,53,0)}50%{box-shadow:0 0 0 7px rgba(57,182,53,.2)}}
    @keyframes kgPop{0%{transform:scale(.82);opacity:0}100%{transform:scale(1);opacity:1}}
    @keyframes kgShine{0%{transform:translateX(-140%) skewX(-12deg)}35%,100%{transform:translateX(320%) skewX(-12deg)}}
    @keyframes kgRise{0%{transform:translateY(14px);opacity:0}100%{transform:translateY(0);opacity:1}}
    @keyframes kgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
    @keyframes kgRoll{0%{transform:translateY(-60%);opacity:0}100%{transform:none;opacity:1}}
    @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}