/* ==========================================================================
   EcoFarm AgTech — style.css  (ONE file: tokens → base → layout → components →
   pages → payment → dark theme → shell/chat/cart). Cascade layers keep the order
   explicit, so there are no specificity wars.
   ==========================================================================

   EcoFarm AgTech — Design Tokens
   --------------------------------------------------------------------------
   The single source of truth for colour, type, spacing, radius, elevation,
   motion and stacking. Nothing outside this file should contain a raw hex
   value, magic z-index or ad-hoc shadow.

   Cascade layers (declared once, here, because this file loads first).
   Later layers win regardless of selector specificity, which is what lets
   us avoid `!important` everywhere except the two documented exceptions
   (reduced-motion and Google-Translate overrides in base.css).
   ========================================================================== */
@layer reset, tokens, base, layout, components, pages, payment, shell, utilities;

@layer tokens {
  :root {
    color-scheme: light;

    /* ---- Neutrals: cool slate / charcoal -------------------------------- */
    --n-0:   #ffffff;
    --n-25:  #fafbfc;
    --n-50:  #f4f6f8;
    --n-100: #eaeef2;
    --n-200: #d9dfe5;
    --n-300: #bcc5cf;
    --n-400: #85919f;   /* 3.1:1 on white — minimum for form-control borders */
    --n-500: #5f6b78;   /* 5.4:1 — muted text */
    --n-600: #4b5663;
    --n-700: #36404b;
    --n-800: #232b34;   /* body text, 14.3:1 */
    --n-900: #151b21;   /* charcoal: headings, footer, dark surfaces */

    /* ---- Accent: deep teal (the only brand hue) ------------------------- */
    --a-50:  #eaf6f3;
    --a-100: #d0ece5;
    --a-200: #a3d9cc;
    --a-300: #6fbfae;
    --a-400: #3a9f8c;
    --a-500: #1b8472;
    --a-600: #0d6e5e;   /* primary: 6.2:1 on white */
    --a-700: #0a5a4d;
    --a-800: #08473d;
    --a-900: #06352e;

    /* ---- Semantic states (never used for decoration) -------------------- */
    --success:     #17744a;
    --success-bg:  #e7f5ed;
    --success-bd:  #b4dfc6;
    --warning:     #92580a;
    --warning-bg:  #fdf3dc;
    --warning-bd:  #f1d48f;
    --danger:      #b42318;
    --danger-bg:   #fdecea;
    --danger-bd:   #f5b9b3;
    --info:        #235a96;
    --info-bg:     #e8f1fb;
    --info-bd:     #b7d2ef;

    /* ---- Role aliases (what components should actually use) ------------- */
    --bg:             var(--n-50);
    --surface:        var(--n-0);
    --surface-sunken: var(--n-25);
    --text:           var(--n-800);
    --text-strong:    var(--n-900);
    --text-muted:     var(--n-500);
    --text-on-accent: var(--n-0);
    --border:         var(--border);
    --border-strong:  var(--n-300);
    --border-control: var(--n-400);
    --accent:         var(--a-600);
    --accent-hover:   var(--a-700);
    --accent-active:  var(--a-800);
    --accent-tint:    var(--a-50);
    --accent-tint-2:  var(--a-100);
    --link:           var(--a-700);
    --ring:           rgb(13 110 94 / 0.30);
    --surface-2:      var(--n-100);   /* hover fills, chips, skeletons */
    --surface-3:      var(--n-50);    /* table heads, sunken panels */
    --border-hover:   var(--n-600);
    --accent-ink:     var(--a-800);   /* accent text on tinted fills */
    --inv-bg:         var(--n-900);   /* inverse surface (flips in dark) */
    --inv-fg:         var(--n-0);
    --inv-bg-hover:   var(--n-700);
    --harvest:        #e3a008;        /* marigold: highlights, ratings, offers */
    --harvest-bg:     #fdf3dc;
    --glass:          rgb(255 255 255 / 0.72);
    --scrim:          rgb(21 27 33 / 0.55);
    --sidebar-w:      272px;
    --sidebar-w-rail: 76px;

    /* ---- Typography ----------------------------------------------------- */
    --font-sans:  "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto,
                  "Noto Sans", "Noto Sans Devanagari", "Noto Sans Bengali",
                  "Noto Sans Tamil", "Noto Sans Telugu", "Noto Sans Gujarati",
                  "Noto Sans Kannada", "Noto Sans Malayalam", "Noto Sans Gurmukhi",
                  "Noto Sans Oriya", "Noto Naskh Arabic", sans-serif;
    --font-serif: "Bricolage Grotesque", "DM Sans", system-ui, sans-serif;
    --font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Fluid type scale (min → max across 360px … 1280px viewports) */
    --fs-xs:  0.75rem;
    --fs-sm:  0.875rem;
    --fs-md:  1rem;
    --fs-lg:  1.125rem;
    --fs-xl:  clamp(1.25rem,  1.15rem + 0.45vw, 1.5rem);
    --fs-2xl: clamp(1.5rem,   1.25rem + 1vw,    2rem);
    --fs-3xl: clamp(1.875rem, 1.45rem + 1.8vw,  2.75rem);
    --fs-4xl: clamp(2.25rem,  1.5rem  + 3.2vw,  3.75rem);

    --lh-tight:  1.15;
    --lh-snug:   1.3;
    --lh-normal: 1.55;
    --lh-loose:  1.7;

    /* ---- Spacing (4px base) --------------------------------------------- */
    --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
    --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
    --sp-12: 3rem;    --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;

    /* ---- Radius hierarchy: controls < cards < sheets < pills ------------ */
    --r-xs:   4px;
    --r-sm:   6px;
    --r-md:   10px;    /* buttons, inputs */
    --r-lg:   14px;    /* cards */
    --r-xl:   20px;    /* dialogs, sheets */
    --r-pill: 999px;

    /* ---- Elevation ------------------------------------------------------ */
    --sh-1: 0 1px 2px rgb(21 27 33 / 0.06), 0 1px 1px rgb(21 27 33 / 0.04);
    --sh-2: 0 4px 12px -2px rgb(21 27 33 / 0.08), 0 2px 4px -2px rgb(21 27 33 / 0.06);
    --sh-3: 0 16px 32px -8px rgb(21 27 33 / 0.18), 0 4px 8px -4px rgb(21 27 33 / 0.08);
    --sh-up: 0 -8px 24px -6px rgb(21 27 33 / 0.14);

    /* ---- Motion --------------------------------------------------------- */
    --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --dur-1: 120ms;
    --dur-2: 200ms;
    --dur-3: 320ms;

    /* ---- Layout --------------------------------------------------------- */
    --container:        1200px;
    --container-narrow: 760px;
    --container-wide:   1360px;
    --gutter:           clamp(1rem, 4vw, 2rem);
    --header-h:         64px;

    /* ---- Stacking ------------------------------------------------------- */
    --z-header:   100;
    --z-sidebar:  120;
    --z-fab:      180;
    --z-dropdown: 110;
    --z-paybar:   150;
    --z-drawer:   200;
    --z-sheet:    300;
    --z-toast:    400;
  }
}

/* ==========================================================================
   EcoFarm AgTech — Reset & Base
   Element-level defaults only. No classes live here except a11y utilities.
   ========================================================================== */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }

  * { margin: 0; }

  html {
    -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
    /* Keeps in-page anchors from hiding under the sticky header. */
    scroll-padding-top: calc(var(--header-h) + var(--sp-4));
  }

  img, picture, svg, video, canvas { display: block; max-width: 100%; }
  img, video { height: auto; }

  input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
  button { background: none; border: 0; padding: 0; cursor: pointer; }

  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

  table { border-collapse: collapse; border-spacing: 0; }

  /* Native `hidden` must always win over component display rules. */
  [hidden] { display: none !important; }
}

@layer base {
  html { scroll-behavior: smooth; }

  body {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  main { flex: 1 0 auto; }
  main:focus { outline: none; }

  /* ---- Headings: serif display for page-level, sans for UI-level -------- */
  h1, h2, h3, h4, h5, h6 {
    color: var(--text-strong);
    font-weight: 600;
    text-wrap: balance;
  }
  h1, h2 {
    font-family: var(--font-serif);
    line-height: var(--lh-tight);
    letter-spacing: -0.012em;
  }
  h1 { font-size: var(--fs-4xl); }
  h2 { font-size: var(--fs-3xl); }
  h3 { font-size: var(--fs-xl);  line-height: var(--lh-snug); }
  h4 { font-size: var(--fs-lg);  line-height: var(--lh-snug); }
  h5, h6 { font-size: var(--fs-md); line-height: var(--lh-snug); }

  p { text-wrap: pretty; }
  strong, b { font-weight: 600; }
  small { font-size: var(--fs-sm); }

  a {
    color: var(--link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--dur-1) var(--ease-out);
  }
  a:hover { color: var(--accent-active); text-decoration-thickness: 2px; }

  ul, ol { padding-inline-start: 1.25em; }
  li + li { margin-block-start: var(--sp-1); }

  hr { border: 0; border-block-start: 1px solid var(--border); margin-block: var(--sp-6); }

  ::selection { background: var(--a-200); color: var(--n-900); }

  /* ---- Focus: one consistent, always-visible ring ----------------------- */
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-xs);
  }
  .on-dark :focus-visible { outline-color: var(--a-200); }

  /* ---- Icons (inline SVG sprite) --------------------------------------- */
  .icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .icon--fill { fill: currentColor; stroke: none; }

  /* Numbers that must not jitter as they change (prices, counters, timers) */
  .num { font-variant-numeric: tabular-nums; }
}

/* --------------------------------------------------------------------------
   Accessibility utilities (live in `utilities` so they always win)
   -------------------------------------------------------------------------- */
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .skip-link {
    position: fixed;
    inset-block-start: var(--sp-2);
    inset-inline-start: var(--sp-2);
    z-index: calc(var(--z-toast) + 1);
    padding: var(--sp-3) var(--sp-5);
    background: var(--n-900);
    color: var(--n-0);
    font-weight: 600;
    border-radius: var(--r-md);
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--dur-2) var(--ease-out);
  }
  .skip-link:focus { transform: none; color: var(--n-0); }

  .text-muted  { color: var(--text-muted); }
  .text-center { text-align: center; }
  .nowrap      { white-space: nowrap; }
  .stack > * + * { margin-block-start: var(--stack-gap, var(--sp-4)); }
  .stack--sm { --stack-gap: var(--sp-3); }
}

/* --------------------------------------------------------------------------
   Exception 1 — reduced motion. `!important` is deliberate: user preference
   must beat every component-level animation, including inline ones.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Exception 2 — Google Translate armor. The widget injects inline styles on
   <body> and an iframe banner that shifts the layout (CLS). Inline styles can
   only be beaten with `!important`.
   -------------------------------------------------------------------------- */
html.translated-ltr body,
html.translated-rtl body { top: 0 !important; position: static !important; }

.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.VIpgJd-ZVi9od-ORHb-OEVmcd,
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf {
  display: none !important;
  visibility: hidden !important;
}
body > .skiptranslate { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
#google_translate_element {
  position: fixed; inset: auto auto -9999px -9999px;
  width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none;
}

/* ==========================================================================
   EcoFarm AgTech — Layout
   Page scaffolding: containers, header & navigation, hero, sections, grids,
   footer. Mobile-first; breakpoints are written as min-width queries:
     40rem  (640)  large phone / small tablet
     48rem  (768)  tablet
     64rem  (1024) desktop — navigation switches from drawer to inline
     90rem  (1440) wide desktop / ultra-wide
   ========================================================================== */

@layer layout {

  /* ---- Containers ------------------------------------------------------ */
  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .container--narrow { max-width: var(--container-narrow); }
  .container--wide   { max-width: var(--container-wide); }

  /* ---- Header ---------------------------------------------------------- */
  .site-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    height: var(--header-h);
    background: var(--header-bg);
    border-block-end: 1px solid var(--border);
    transition: box-shadow var(--dur-2) var(--ease-out);
  }
  @supports (backdrop-filter: blur(1px)) {
    .site-header { background: var(--header-bg-glass); backdrop-filter: saturate(1.4) blur(12px); }
  }
  .site-header[data-scrolled="true"] { box-shadow: var(--sh-2); }

  .site-header__inner {
    height: 100%;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
  }

  /* Zero-height element observed by IntersectionObserver (no scroll listener). */
  .scroll-sentinel { position: absolute; inset-block-start: 0; height: 1px; width: 1px; pointer-events: none; }

  /* ---- Brand ----------------------------------------------------------- */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-strong);
    text-decoration: none;
    flex: none;
    border-radius: var(--r-md);
  }
  .brand:hover { color: var(--text-strong); }
  .brand__logo { width: 40px; height: 40px; border-radius: 50%; }
  .brand__name {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: var(--fs-xl);
    letter-spacing: -0.01em;
    line-height: 1;
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
  }
  .brand__sub {
    display: none;
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.04em;
  }
  @media (min-width: 40rem) { .brand__sub { display: inline; } }

  /* ---- Header controls (language + menu button) ------------------------ */
  .header-controls {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-inline-start: auto;
  }

  .lang {
    position: relative;
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
  }
  .lang .icon { position: absolute; inset-inline-start: 10px; pointer-events: none; width: 1.1em; height: 1.1em; }
  .lang__select {
    appearance: none;
    height: 40px;
    min-width: 0;
    max-width: 8.5rem;
    padding-inline: 32px 28px;
    background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 16px;
    border: 1px solid var(--border-control);
    border-radius: var(--r-md);
    color: var(--text);
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: border-color var(--dur-1), box-shadow var(--dur-1);
  }
  [dir="rtl"] .lang__select,
  html.translated-rtl .lang__select { background-position: left 8px center; }
  .lang__select:hover { border-color: var(--border-hover); }
  .lang__select:focus-visible { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }

  .menu-btn {
    display: inline-grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: var(--r-md);
    color: var(--text-strong);
    transition: background-color var(--dur-1);
  }
  .menu-btn:hover { background: var(--surface-2); }
  .menu-btn:active { transform: scale(0.94); }
  .menu-btn .icon { grid-area: 1 / 1; width: 1.5rem; height: 1.5rem; transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out); }
  .menu-btn .icon--close { opacity: 0; transform: rotate(-90deg) scale(0.7); }
  .menu-btn[aria-expanded="true"] .icon--menu  { opacity: 0; transform: rotate(90deg) scale(0.7); }
  .menu-btn[aria-expanded="true"] .icon--close { opacity: 1; transform: none; }

  /* ---- Navigation: mobile drawer (default) ----------------------------- */
  .nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: var(--z-drawer);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--sp-4) var(--gutter) calc(var(--sp-8) + env(safe-area-inset-bottom));
    background: var(--surface);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--dur-2) var(--ease-out),
                transform var(--dur-2) var(--ease-out),
                visibility 0s linear var(--dur-2);
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  html.nav-open { overflow: hidden; }

  .nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
  .nav__list > li + li { margin: 0; }

  .nav__link,
  .nav__trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    width: 100%;
    min-height: 48px;
    padding: var(--sp-3) var(--sp-3);
    border-radius: var(--r-md);
    color: var(--text-strong);
    font-weight: 600;
    font-size: var(--fs-md);
    text-decoration: none;
    text-align: start;
    transition: background-color var(--dur-1), color var(--dur-1);
  }
  .nav__link:hover, .nav__trigger:hover { background: var(--surface-2); color: var(--text-strong); }
  .nav__link[aria-current="page"],
  .nav__group[data-current="true"] > .nav__trigger { color: var(--accent); background: var(--accent-tint); }

  .nav__chev { transition: transform var(--dur-2) var(--ease-out); }
  .nav__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }

  /* Accordion panel: animates height via grid-template-rows 0fr → 1fr */
  .nav__panel {
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    transition: grid-template-rows var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
  }
  .nav__panel > ul { overflow: hidden; min-height: 0; list-style: none; margin: 0; padding: 0; }
  .nav__trigger[aria-expanded="true"] + .nav__panel {
    grid-template-rows: 1fr;
    visibility: visible;
    transition-delay: 0s;
  }
  .nav__panel li + li { margin: 0; }

  .nav__item {
    display: block;
    padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-6);
    border-radius: var(--r-md);
    text-decoration: none;
    color: var(--text);
    transition: background-color var(--dur-1);
  }
  .nav__item:hover { background: var(--surface-2); color: var(--text); }
  .nav__item[aria-current="page"] { background: var(--accent-tint); }
  .nav__item-title { display: block; font-weight: 600; color: var(--text-strong); }
  .nav__item[aria-current="page"] .nav__item-title { color: var(--accent); }
  .nav__item-desc { display: block; margin-block-start: 2px; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--text-muted); }

  /* ---- Navigation: desktop inline + dropdown panels -------------------- */
  @media (min-width: 64rem) {
    .menu-btn { display: none; }
    html.nav-open { overflow: auto; }

    .header-controls { margin-inline-start: 0; }

    .nav {
      position: static;
      inset: auto;
      z-index: auto;
      overflow: visible;
      padding: 0;
      background: none;
      opacity: 1;
      visibility: visible;
      transform: none;
      margin-inline-start: auto;
    }
    .nav__list { flex-direction: row; align-items: center; gap: var(--sp-1); }

    .nav__link, .nav__trigger {
      width: auto;
      min-height: 40px;
      padding: var(--sp-2) var(--sp-3);
      font-size: var(--fs-sm);
      justify-content: flex-start;
      white-space: nowrap;
    }

    .nav__group { position: relative; }

    .nav__panel {
      position: absolute;
      inset-block-start: calc(100% + 8px);
      inset-inline-start: 0;
      display: block;
      width: 22rem;
      max-width: calc(100vw - 2 * var(--gutter));
      padding: var(--sp-2);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--r-lg);
      box-shadow: var(--sh-3);
      opacity: 0;
      visibility: hidden;
      transform: translateY(-6px) scale(0.98);
      transform-origin: top left;
      transition: opacity var(--dur-2) var(--ease-out),
                  transform var(--dur-2) var(--ease-out),
                  visibility 0s linear var(--dur-2);
    }
    /* Last group aligns to the right edge so it never overflows the viewport. */
    .nav__group:last-child .nav__panel { inset-inline-start: auto; inset-inline-end: 0; transform-origin: top right; }

    /* Invisible bridge so the pointer can travel from trigger to panel. */
    .nav__panel::before { content: ""; position: absolute; inset: -10px 0 auto 0; height: 10px; }

    .nav__trigger[aria-expanded="true"] + .nav__panel {
      display: block;
      opacity: 1;
      visibility: visible;
      transform: none;
      transition-delay: 0s;
    }
    .nav__panel > ul { overflow: visible; }
    .nav__item { padding: var(--sp-3); }
  }

  /* ---- Minimal header (checkout / payment flows) ----------------------- */
  .site-header--minimal .secure-label {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    margin-inline-start: auto;
    color: var(--success); font-size: var(--fs-sm); font-weight: 600;
  }
  .site-header--minimal .secure-label, .site-header--minimal .header-back { white-space: nowrap; }
  @media (max-width: 39.999rem) { .site-header--minimal .secure-label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
  .site-header--minimal .header-back {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    min-height: 44px; padding-inline: var(--sp-3);
    font-size: var(--fs-sm); font-weight: 600; text-decoration: none;
    color: var(--text-muted); border-radius: var(--r-md);
  }
  .site-header--minimal .header-back:hover { background: var(--surface-2); color: var(--text-strong); }

  /* ---- Hero (all content pages) ---------------------------------------- */
  .hero {
    --hero-img: url("../images/brand/hero-landscape-800.webp");
    position: relative;
    isolation: isolate;
    color: var(--n-0);
    background:
      linear-gradient(100deg, rgb(6 53 46 / 0.94) 0%, rgb(21 27 33 / 0.84) 55%, rgb(21 27 33 / 0.62) 100%),
      var(--hero-img) center / cover no-repeat,
      var(--n-900);
  }
  @media (min-width: 50rem) { .hero { --hero-img: url("../images/brand/hero-landscape.webp"); } }

  .hero h1 { color: var(--n-0); max-width: 18ch; }
  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
    padding-block: var(--sp-12);
  }
  .hero__lede {
    margin-block-start: var(--sp-4);
    max-width: 52ch;
    font-size: var(--fs-lg);
    color: var(--n-200);
    line-height: var(--lh-normal);
  }
  .hero__lede strong { color: var(--n-0); }
  .hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-6); }

  .hero__grid--single { padding-block: var(--sp-12); }
  .hero__aside { display: grid; gap: var(--sp-4); align-content: center; }
  @media (min-width: 40rem) and (max-width: 63.999rem) {
    .hero__aside { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  }
  @media (min-width: 64rem) {
    .hero__grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: var(--sp-12); padding-block: var(--sp-20); }
    .hero__grid--single { grid-template-columns: minmax(0, 1fr); padding-block: var(--sp-16); }
  }
  @media (min-width: 90rem) {
    .hero__grid { padding-block: calc(var(--sp-24) + var(--sp-4)); }
  }

  /* Glass cards that sit on the hero photograph */
  .glass {
    padding: var(--sp-5);
    border: 1px solid rgb(255 255 255 / 0.16);
    border-radius: var(--r-lg);
    background: rgb(255 255 255 / 0.08);
  }
  @supports (backdrop-filter: blur(1px)) {
    .glass { backdrop-filter: blur(10px); background: rgb(255 255 255 / 0.07); }
  }
  .glass h2 {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--a-200);
    margin-block-end: var(--sp-3);
  }
  .glass a { color: var(--n-0); text-decoration-color: rgb(255 255 255 / 0.4); }
  .glass a:hover { color: var(--a-200); }
  .glass ul { list-style: none; padding: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); }
  .glass li + li { margin: 0; }
  .glass li a { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 28px; }

  /* ---- Sections -------------------------------------------------------- */
  .section { padding-block: var(--sp-12); }
  @media (min-width: 48rem) { .section { padding-block: var(--sp-20); } }
  .section--tight  { padding-block: var(--sp-8); }
  .section--flush-top { padding-block-start: 0; }
  .section--surface { background: var(--surface); border-block: 1px solid var(--border); }
  .section--dark { background: var(--n-900); color: var(--n-200); }
  .section--dark h2, .section--dark h3 { color: var(--n-0); }

  .section__head { max-width: 46rem; margin-block-end: var(--sp-8); }
  .section__head--center { margin-inline: auto; text-align: center; }
  .section__title { font-size: var(--fs-2xl); }
  .section__lede { margin-block-start: var(--sp-3); font-size: var(--fs-lg); color: var(--text-muted); }

  /* ---- Grid helpers ---------------------------------------------------- */
  .grid { display: grid; gap: var(--grid-gap, var(--sp-6)); }
  .grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 17.5rem)), 1fr)); }
  .grid > * { min-width: 0; }
  @media (min-width: 48rem) {
    .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (min-width: 64rem) {
    .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  @media (min-width: 48rem) and (max-width: 63.999rem) {
    .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* ---- Footer ---------------------------------------------------------- */
  .site-footer {
    background: var(--n-900);
    color: var(--n-300);
    padding-block: var(--sp-12) var(--sp-6);
    font-size: var(--fs-sm);
  }
  .site-footer a { color: var(--n-200); text-decoration: none; }
  .site-footer a:hover { color: var(--n-0); text-decoration: underline; }
  .site-footer h2 {
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--n-0);
    margin-block-end: var(--sp-3);
  }
  .footer__grid { display: grid; gap: var(--sp-8); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; max-width: 30rem; }
  .footer__brand .brand { color: var(--n-0); margin-block-end: var(--sp-3); }
  .footer__brand .brand__sub { color: var(--n-400); }
  .footer__list { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
  .footer__list li + li { margin: 0; }
  .footer__list a { display: inline-block; padding-block: 2px; }
  .footer__legal {
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3);
    margin-block-start: var(--sp-10); padding-block-start: var(--sp-5);
    border-block-start: 1px solid rgb(255 255 255 / 0.12);
    color: var(--n-400);
  }
  @media (min-width: 48rem) {
    .footer__grid { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); }
    .footer__brand { grid-column: auto; }
  }
}

/* ==========================================================================
   EcoFarm AgTech — Components
   Reusable, page-agnostic building blocks. BEM-ish naming:
   .block, .block__element, .block--modifier. State is expressed with
   ARIA attributes (aria-expanded, aria-invalid, aria-busy…) wherever one
   exists, so styling and accessibility can never drift apart.
   ========================================================================== */

@layer components {

  /* ======================================================================
     Buttons
     ====================================================================== */
  .btn {
    --_bg: var(--surface);
    --_fg: var(--text-strong);
    --_bd: var(--border-control);
    --_bg-h: var(--surface-2);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    min-height: 44px;                      /* WCAG 2.5.8 touch target */
    padding: var(--sp-2) var(--sp-5);
    border: 1px solid var(--_bd);
    border-radius: var(--r-md);
    background: var(--_bg);
    color: var(--_fg);
    font-size: var(--fs-md);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-1) var(--ease-out),
                border-color var(--dur-1) var(--ease-out),
                box-shadow var(--dur-2) var(--ease-out),
                transform var(--dur-1) var(--ease-out),
                color var(--dur-1) var(--ease-out);
  }
  .btn:hover { background: var(--_bg-h); color: var(--_fg); text-decoration: none; }
  /* Tactile press feedback */
  .btn:active { transform: translateY(1px) scale(0.985); box-shadow: none; }
  .btn:focus-visible { outline: 0; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent); }

  .btn--primary {
    --_bg: var(--accent); --_fg: var(--text-on-accent); --_bd: var(--accent); --_bg-h: var(--accent-hover);
    box-shadow: var(--sh-1);
  }
  .btn--primary:hover { --_bd: var(--accent-hover); box-shadow: var(--sh-2); }

  .btn--dark      { --_bg: var(--inv-bg); --_fg: var(--inv-fg); --_bd: var(--inv-bg); --_bg-h: var(--inv-bg-hover); }
  .btn--on-dark   { --_bg: var(--n-0);   --_fg: var(--n-900); --_bd: var(--n-0);   --_bg-h: var(--accent-tint); }
  .btn--outline-light { --_bg: transparent; --_fg: var(--n-0); --_bd: rgb(255 255 255 / 0.5); --_bg-h: rgb(255 255 255 / 0.12); }
  .btn--ghost     { --_bg: transparent; --_bd: transparent; --_bg-h: var(--surface-2); }
  .btn--success   { --_bg: var(--success); --_fg: var(--n-0); --_bd: var(--success); --_bg-h: color-mix(in srgb, var(--success) 85%, black); }

  .btn--lg    { min-height: 52px; padding-inline: var(--sp-6); font-size: var(--fs-lg); }
  .btn--sm    { min-height: 36px; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); }
  .btn--block { display: flex; width: 100%; }

  .btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.55; cursor: not-allowed; pointer-events: none; box-shadow: none;
  }

  /* Loading: label hidden, spinner centred. Keeps width stable (no CLS). */
  .btn[aria-busy="true"] { pointer-events: none; color: transparent; }
  .btn[aria-busy="true"] > * { visibility: hidden; }
  .btn[aria-busy="true"]::after {
    content: "";
    position: absolute;
    width: 1.2em; height: 1.2em;
    border: 2px solid rgb(255 255 255 / 0.4);
    border-top-color: var(--n-0);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
  .btn:not(.btn--primary):not(.btn--dark):not(.btn--success)[aria-busy="true"]::after {
    border-color: var(--border-strong); border-top-color: var(--accent);
  }

  .icon-btn {
    display: inline-grid; place-items: center;
    width: 40px; height: 40px;
    border-radius: var(--r-md);
    color: inherit;
    transition: background-color var(--dur-1), transform var(--dur-1);
  }
  .icon-btn:hover { background: rgb(255 255 255 / 0.12); }
  .icon-btn:active { transform: scale(0.92); }

  .link-arrow {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    font-weight: 600; text-decoration: none;
  }
  .link-arrow .icon { transition: transform var(--dur-2) var(--ease-out); }
  .link-arrow:hover .icon { transform: translateX(3px); }
  [dir="rtl"] .link-arrow .icon, html.translated-rtl .link-arrow .icon { transform: scaleX(-1); }

  /* ======================================================================
     Cards
     ====================================================================== */
  .card {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-1);
  }
  .card > * { margin: 0; }
  .card--flat { box-shadow: none; }
  .card--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--sh-2); }
  .card--muted { background: var(--surface-sunken); border-style: dashed; box-shadow: none; }
  .card__title { font-size: var(--fs-xl); }
  .card__foot { margin-block-start: auto; }

  /* Only genuinely interactive cards respond to hover. */
  .card--link { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2); }
  .card--link:hover { transform: translateY(-2px); box-shadow: var(--sh-2); border-color: var(--border-strong); }

  .icon-tile {
    display: inline-grid; place-items: center;
    width: 44px; height: 44px; flex: none;
    border-radius: var(--r-md);
    background: var(--accent-tint);
    color: var(--accent-ink);
    font-size: 1.4rem;
    line-height: 1;
  }
  .icon-tile--lg { width: 56px; height: 56px; font-size: 1.75rem; border-radius: var(--r-lg); }
  .icon-tile--muted { background: var(--surface-2); color: var(--text-muted); filter: grayscale(1); }

  .card__head { display: flex; align-items: center; gap: var(--sp-3); }
  .card__head > h3 { margin: 0; }

  /* One-line summary under a title (replaces the old “conclusion” boxes) */
  .takeaway {
    padding: var(--sp-3) var(--sp-4);
    border-inline-start: 3px solid var(--accent);
    background: var(--accent-tint);
    border-radius: 0 var(--r-md) var(--r-md) 0;
    color: var(--accent-ink);
    font-weight: 500;
  }
  [dir="rtl"] .takeaway, html.translated-rtl .takeaway { border-radius: var(--r-md) 0 0 var(--r-md); }

  /* ======================================================================
     Badges, chips, alerts
     ====================================================================== */
  .badge {
    display: inline-flex; align-items: center; gap: var(--sp-1);
    padding: 2px var(--sp-3);
    border-radius: var(--r-pill);
    background: var(--surface-2); color: var(--text);
    font-size: var(--fs-xs); font-weight: 600; line-height: 1.6;
    white-space: nowrap;
  }
  .badge--accent  { background: var(--accent-tint-2); color: var(--accent-ink); }
  .badge--success { background: var(--success-bg); color: var(--success); }
  .badge--warning { background: var(--warning-bg); color: var(--warning); }
  .badge--danger  { background: var(--danger-bg);  color: var(--danger); }
  .badge--info    { background: var(--info-bg);    color: var(--info); }
  .badge--on-dark { background: rgb(255 255 255 / 0.14); color: var(--n-0); }

  .alert {
    display: flex; gap: var(--sp-3); align-items: flex-start;
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--_bd); border-radius: var(--r-md);
    background: var(--_bg); color: var(--_fg);
    font-size: var(--fs-sm); line-height: var(--lh-snug);
  }
  .alert > .icon { margin-block-start: 1px; }
  .alert p { margin: 0; }
  .alert--info    { --_bg: var(--info-bg);    --_fg: var(--info);    --_bd: var(--info-bd); }
  .alert--success { --_bg: var(--success-bg); --_fg: var(--success); --_bd: var(--success-bd); }
  .alert--warning { --_bg: var(--warning-bg); --_fg: var(--warning); --_bd: var(--warning-bd); }
  .alert--danger  { --_bg: var(--danger-bg);  --_fg: var(--danger);  --_bd: var(--danger-bd); }
  .alert a { color: inherit; font-weight: 600; }
  .alert strong { color: inherit; }

  /* ======================================================================
     Disclosure (native <details>) — replaces hover-only expanding cards
     ====================================================================== */
  .disclosure {
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    background: var(--surface-sunken);
    transition: border-color var(--dur-2), background-color var(--dur-2);
  }
  .disclosure[open] { background: var(--surface); border-color: var(--border-strong); }
  .disclosure--warn > summary { color: var(--warning); }
  .disclosure--warn > summary:hover { background: var(--warning-bg); }
  .disclosure--warn .detail-list li::before { background: var(--warning); }
  .disclosure > summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    min-height: 44px;
    padding: var(--sp-2) var(--sp-4);
    list-style: none;
    cursor: pointer;
    color: var(--accent-ink);
    font-size: var(--fs-sm);
    font-weight: 600;
    border-radius: var(--r-md);
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-1);
  }
  .disclosure > summary::-webkit-details-marker { display: none; }
  .disclosure > summary:hover { background: var(--accent-tint); }
  .disclosure > summary::after {
    content: "";
    width: 1.1rem; height: 1.1rem; flex: none;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--dur-2) var(--ease-out);
  }
  .disclosure[open] > summary::after { transform: rotate(180deg); }
  .disclosure__body { padding: var(--sp-1) var(--sp-4) var(--sp-4); overflow: hidden; }
  .disclosure__body > * + * { margin-block-start: var(--sp-3); }

  .detail-list { list-style: none; padding: 0; display: grid; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text); }
  .detail-list li { position: relative; margin: 0; padding-inline-start: var(--sp-5); line-height: var(--lh-normal); }
  .detail-list li::before {
    content: ""; position: absolute; inset-inline-start: 2px; inset-block-start: 0.6em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--a-400);
  }
  .detail-list strong { color: var(--text-strong); }

  /* ======================================================================
     Forms
     ====================================================================== */
  .form { display: grid; gap: var(--sp-5); }
  .form__row { display: grid; gap: var(--sp-5); }
  @media (min-width: 40rem) { .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 48rem) { .form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  .field { display: grid; gap: var(--sp-2); align-content: start; }
  .field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); }
  .field__req { color: var(--danger); margin-inline-start: 2px; }
  .field__opt { color: var(--text-muted); font-weight: 400; }
  .field__hint { font-size: var(--fs-sm); color: var(--text-muted); }
  .field__control { position: relative; display: flex; align-items: center; }

  .input, .select, .textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border-control);
    border-radius: var(--r-md);
    color: var(--text-strong);
    font-size: 1rem;                       /* ≥16px prevents iOS focus-zoom */
    line-height: 1.4;
    transition: border-color var(--dur-1), box-shadow var(--dur-1), background-color var(--dur-1);
  }
  .textarea { min-height: 7.5rem; resize: vertical; }
  .select {
    appearance: none;
    padding-inline-end: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
  }
  html.translated-rtl .select, [dir="rtl"] .select { background-position: left 12px center; }
  .input::placeholder, .textarea::placeholder { color: var(--text-muted); opacity: 0.8; }
  .input:hover, .select:hover, .textarea:hover { border-color: var(--border-hover); }
  .input:focus, .select:focus, .textarea:focus {
    outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring);
  }
  .input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; }

  /* Validation states. Colour is never the only cue: the error text carries
     an icon and wording, and the field is exposed via aria-invalid. */
  .input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] {
    border-color: var(--danger);
    background-color: var(--danger-bg);
  }
  .input[aria-invalid="true"]:focus, .select[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 4px rgb(180 35 24 / 0.2);
  }
  .field.is-valid .input:not(:focus), .field.is-valid .select:not(:focus) { border-color: var(--success); }
  .field.is-valid .field__control:not(.field__control--adorned)::after {
    content: ""; position: absolute; inset-inline-end: 14px;
    width: 18px; height: 18px; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317744a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .field__error {
    display: flex; align-items: flex-start; gap: var(--sp-2);
    min-height: 0;
    color: var(--danger);
    font-size: var(--fs-sm); font-weight: 500; line-height: var(--lh-snug);
    animation: error-in var(--dur-2) var(--ease-out);
  }
  .field__error::before {
    content: ""; flex: none; width: 1rem; height: 1rem; margin-block-start: 1px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* Error summary shown above a form after a failed submit */
  .error-summary {
    padding: var(--sp-4); border: 1px solid var(--danger-bd); border-radius: var(--r-md);
    background: var(--danger-bg); color: var(--danger);
  }
  .error-summary:focus { outline: 2px solid var(--danger); outline-offset: 2px; }
  .error-summary h2 { font-family: var(--font-sans); font-size: var(--fs-md); color: inherit; margin-block-end: var(--sp-2); }
  .error-summary ul { margin: 0; padding-inline-start: 1.2em; font-size: var(--fs-sm); }
  .error-summary a { color: inherit; font-weight: 600; }

  /* Honeypot field for spam bots (Netlify Forms). Off-screen, not display:none. */
  .hp-field { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

  /* Checkbox / radio rows */
  .choice {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    min-height: 44px; padding-block: var(--sp-2); cursor: pointer;
  }
  .choice input { width: 1.25rem; height: 1.25rem; margin-block-start: 0.15rem; accent-color: var(--accent); flex: none; }

  /* ======================================================================
     Method picker (payment method radio cards)
     ====================================================================== */
  .picker { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--sp-3); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .picker > legend { grid-column: 1 / -1; padding: 0; margin-block-end: var(--sp-1); font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); }
  .picker__opt { position: relative; display: block; cursor: pointer; }
  .picker__opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
  .picker__body {
    display: flex; align-items: center; gap: var(--sp-3);
    min-height: 64px; padding: var(--sp-3) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border-control);
    border-radius: var(--r-md);
    transition: border-color var(--dur-1), background-color var(--dur-1), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1);
  }
  .picker__opt:hover .picker__body { border-color: var(--border-hover); }
  .picker__opt:active .picker__body { transform: scale(0.985); }
  .picker__opt input:checked + .picker__body { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 1px var(--accent); }
  .picker__opt input:focus-visible + .picker__body { box-shadow: 0 0 0 1px var(--accent), 0 0 0 4px var(--ring); }
  .picker__body .icon { width: 1.5rem; height: 1.5rem; color: var(--text-muted); }
  .picker__opt input:checked + .picker__body .icon { color: var(--accent); }
  .picker__title { display: block; font-weight: 600; color: var(--text-strong); line-height: 1.2; }
  .picker__sub { display: block; font-size: var(--fs-xs); color: var(--text-muted); margin-block-start: 2px; }

  /* ======================================================================
     Tables
     ====================================================================== */
  .table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
  .table { width: 100%; font-size: var(--fs-md); }
  .table caption { padding: var(--sp-4) var(--sp-5); text-align: start; font-weight: 600; color: var(--text-strong); }
  .table th, .table td { padding: var(--sp-4) var(--sp-5); text-align: start; vertical-align: top; border-block-start: 1px solid var(--border); }
  .table thead th { background: var(--surface-3); border-block-start: 0; font-size: var(--fs-sm); color: var(--text-strong); }
  .table tbody tr:hover { background: var(--surface-sunken); }

  /* ======================================================================
     Media, video facade, skeleton
     ====================================================================== */
  @keyframes shimmer { to { background-position: -200% 0; } }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes error-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes pop-in { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
  @keyframes draw { to { stroke-dashoffset: 0; } }

  .skeleton, .media, .video {
    background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%) 0 0 / 200% 100%;
    animation: shimmer 1.4s linear infinite;
  }
  .skeleton { border-radius: var(--r-sm); min-height: 1em; }
  .skeleton--line { height: 0.9em; margin-block: 0.4em; }
  .skeleton--line:last-child { width: 60%; }

  /* Fixed aspect ratio reserves space before the image arrives → zero CLS. */
  .media {
    position: relative; overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-md);
  }
  .media--3x2 { aspect-ratio: 3 / 2; }
  .media--4x3 { aspect-ratio: 4 / 3; }
  .media--1x1 { aspect-ratio: 1 / 1; }
  .media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-3) var(--ease-out); }
  .media.is-loaded { animation: none; background: var(--surface-2); }
  .media.is-loaded > img { opacity: 1; }
  /* If JS is unavailable the image must still show. */
  .no-js .media > img { opacity: 1; }

  .video {
    position: relative; overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
  }
  .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .video.is-loaded { animation: none; background: var(--n-900); }
  .video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-3); }
  .video.is-loaded .video__poster { opacity: 1; }
  .video__play {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: linear-gradient(to top, rgb(21 27 33 / 0.55), rgb(21 27 33 / 0));
    color: var(--n-0); text-decoration: none; cursor: pointer;
  }
  .video__play:hover { color: var(--n-0); }
  .video__btn {
    display: grid; place-items: center; width: 64px; height: 64px;
    border-radius: 50%;
    background: var(--accent); color: var(--n-0);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);
    transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-1);
  }
  .video__btn .icon { width: 1.75rem; height: 1.75rem; margin-inline-start: 3px; }
  .video__play:hover .video__btn { transform: scale(1.08); background: var(--accent-hover); }
  .video__play:active .video__btn { transform: scale(0.96); }
  .video__label {
    position: absolute; inset-inline: var(--sp-4); inset-block-end: var(--sp-3);
    font-size: var(--fs-sm); font-weight: 600; text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
  }

  /* ======================================================================
     Facts rotator (accessible: pausable, pauses on hover/focus/hidden tab)
     ====================================================================== */
  .facts { display: grid; }
  .facts__list { display: grid; list-style: none; padding: 0; margin: 0; }
  .facts__item {
    grid-area: 1 / 1;                       /* all items overlap → height = tallest */
    margin: 0;
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
    font-size: var(--fs-md); line-height: var(--lh-normal);
  }
  .facts__item.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .no-js .facts__item { grid-area: auto; opacity: 1; visibility: visible; transform: none; }
  .facts__controls { display: flex; align-items: center; gap: var(--sp-1); margin-block-start: var(--sp-3); margin-inline: calc(var(--sp-2) * -1); }
  .facts__count { margin-inline-start: auto; margin-inline-end: var(--sp-2); font-size: var(--fs-xs); color: var(--n-300); }

  /* ======================================================================
     Stats
     ====================================================================== */
  .stat { display: grid; gap: var(--sp-1); align-content: start; }
  .stat__value {
    font-family: var(--font-serif);
    font-size: var(--fs-3xl);
    font-weight: 600;
    line-height: 1;
    color: var(--text-strong);
    font-variant-numeric: tabular-nums;
    min-width: 3ch;                         /* reserves width while counting up */
  }
  .stat__label { font-weight: 600; color: var(--text-strong); }
  .stat__desc  { font-size: var(--fs-sm); color: var(--text-muted); }

  /* ======================================================================
     Toasts
     ====================================================================== */
  .toast-region {
    position: fixed; z-index: var(--z-toast);
    inset-inline: var(--sp-4);
    inset-block-end: calc(var(--toast-offset, 0px) + var(--sp-4) + env(safe-area-inset-bottom));
    display: grid; justify-items: center; gap: var(--sp-2);
    pointer-events: none;
  }
  .toast {
    pointer-events: auto;
    display: flex; align-items: center; gap: var(--sp-3);
    max-width: 28rem; padding: var(--sp-3) var(--sp-4);
    background: var(--inv-bg); color: var(--inv-fg);
    border-radius: var(--r-md); box-shadow: var(--sh-3);
    font-size: var(--fs-sm); font-weight: 500;
    animation: toast-in var(--dur-3) var(--ease-out);
  }
  .toast.is-leaving { animation: toast-out var(--dur-2) var(--ease-in-out) forwards; }
  .toast--success .icon { color: #6ee7a8; }
  .toast--danger  .icon { color: #ff9a8f; }
  @keyframes toast-in  { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
  @keyframes toast-out { to   { opacity: 0; transform: translateY(8px) scale(0.98); } }

  /* ======================================================================
     Dialog / bottom sheet (native <dialog>: focus trap + Esc for free)
     ====================================================================== */
  dialog.sheet {
    width: min(calc(100% - 2rem), 32rem);
    max-height: min(92dvh, 54rem);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--r-xl);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--sh-3);
    overflow: auto;
    overscroll-behavior: contain;
  }
  dialog.sheet::backdrop { background: rgb(21 27 33 / 0.58); animation: fade-in var(--dur-2) var(--ease-out); }
  dialog.sheet[open] { animation: sheet-in var(--dur-3) var(--ease-out); }
  dialog.sheet.is-closing { animation: sheet-out var(--dur-2) var(--ease-in-out) forwards; }
  dialog.sheet.is-closing::backdrop { animation: fade-out var(--dur-2) forwards; }
  @keyframes sheet-in  { from { opacity: 0; transform: translateY(24px) scale(0.98); } to { opacity: 1; transform: none; } }
  @keyframes sheet-out { to   { opacity: 0; transform: translateY(16px) scale(0.98); } }
  @keyframes fade-out  { to   { opacity: 0; } }

  /* Phones: dock to the bottom edge as a true bottom sheet */
  @media (max-width: 39.999rem) {
    dialog.sheet {
      width: 100%; max-width: none;
      margin: auto 0 0;
      border-radius: var(--r-xl) var(--r-xl) 0 0;
      padding-block-end: env(safe-area-inset-bottom);
    }
    @keyframes sheet-in  { from { transform: translateY(100%); } to { transform: none; } }
    @keyframes sheet-out { to   { transform: translateY(100%); } }
  }

  .sheet__head {
    position: sticky; inset-block-start: 0; z-index: 1;
    display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    background: var(--surface);
    border-block-end: 1px solid var(--border);
  }
  .sheet__head .icon-btn:hover { background: var(--surface-2); }
  .sheet__grab { display: none; }
  @media (max-width: 39.999rem) {
    .sheet__grab { display: block; width: 40px; height: 4px; margin: var(--sp-2) auto 0; border-radius: 2px; background: var(--border-strong); }
  }
  .sheet__title { font-family: var(--font-sans); font-size: var(--fs-lg); line-height: 1.25; }
  .sheet__sub { font-size: var(--fs-sm); color: var(--text-muted); margin-block-start: 2px; }
  .sheet__body { padding: var(--sp-5); display: grid; gap: var(--sp-5); }
  .sheet__foot { padding: var(--sp-4) var(--sp-5) var(--sp-5); border-block-start: 1px solid var(--border); display: grid; gap: var(--sp-3); }

  /* Result panes (processing / success / failure) */
  .state { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; padding: var(--sp-8) var(--sp-5); }
  .state h3, .state h2 { font-family: var(--font-sans); font-size: var(--fs-xl); }
  .state p { color: var(--text-muted); max-width: 32ch; }
  .spinner {
    width: 44px; height: 44px; border-radius: 50%;
    border: 3px solid var(--border); border-top-color: var(--accent);
    animation: spin 0.8s linear infinite;
  }
  .state__icon {
    display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
    animation: pop-in var(--dur-3) var(--ease-out);
  }
  .state__icon .icon { width: 2rem; height: 2rem; stroke-width: 2.5; }
  .state__icon--success { background: var(--success-bg); color: var(--success); }
  .state__icon--danger  { background: var(--danger-bg);  color: var(--danger); }
  .state__icon--success .icon path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw 0.45s 0.15s var(--ease-out) forwards; }
}

/* ==========================================================================
   EcoFarm AgTech — Page compositions
   Layout and styling specific to a page or content type. Everything here is
   built from tokens + components; there are no raw colours.
   ========================================================================== */

@layer pages {

  /* ======================================================================
     Home (index.html)
     ====================================================================== */
  .hero--home h1 { max-width: 20ch; font-size: var(--fs-4xl); }
  .hero--home .hero__lede { font-size: var(--fs-lg); max-width: 56ch; }

  /* The platform really is a sequence (learn → equip → analyse), so
     numbering here encodes information. */
  .journey { list-style: none; padding: 0; display: grid; gap: var(--sp-3); counter-reset: step; }
  .journey > li { margin: 0; counter-increment: step; }
  .journey__step {
    display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-4); align-items: start;
    padding: var(--sp-4); border-radius: var(--r-lg);
    border: 1px solid rgb(255 255 255 / 0.16);
    background: rgb(255 255 255 / 0.07);
    color: var(--n-0); text-decoration: none;
    transition: background-color var(--dur-2), transform var(--dur-2) var(--ease-out), border-color var(--dur-2);
  }
  .journey__step:hover { background: rgb(255 255 255 / 0.14); border-color: rgb(255 255 255 / 0.32); color: var(--n-0); transform: translateX(4px); }
  .journey__step::before {
    content: counter(step);
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
    background: var(--a-300); color: var(--n-900); font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .journey__title { display: block; font-weight: 600; font-size: var(--fs-lg); }
  .journey__desc  { display: block; font-size: var(--fs-sm); color: var(--n-300); margin-block-start: 2px; }
  html.translated-rtl .journey__step:hover { transform: translateX(-4px); }

  .ecosystem {
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-1);
  }
  .ecosystem__img { width: 100%; aspect-ratio: 1600 / 672; object-fit: cover; background: var(--surface-2); }
  .ecosystem__body { padding: var(--sp-6); display: grid; gap: var(--sp-5); }
  .ecosystem__list { list-style: none; padding: 0; display: grid; gap: var(--sp-4); }
  @media (min-width: 48rem) { .ecosystem__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64rem) { .ecosystem__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ecosystem__body { padding: var(--sp-8); } }
  .ecosystem__list li { margin: 0; padding-inline-start: var(--sp-4); border-inline-start: 2px solid var(--a-300); }
  .ecosystem__list strong { display: block; color: var(--text-strong); }

  .lead-card { display: grid; gap: var(--sp-4); max-width: 60rem; }
  .lead-card p:first-child { font-size: var(--fs-xl); font-weight: 600; color: var(--text-strong); line-height: var(--lh-snug); }

  .stats-band { display: grid; gap: var(--sp-6); grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 36rem) { .stats-band { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64rem) { .stats-band { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-8); } }
  .stats-band .stat { padding-block-start: var(--sp-4); border-block-start: 2px solid var(--accent); }

  /* ======================================================================
     Content pages (about, methods, advantages, challenges, intro)
     ====================================================================== */
  .pair { display: grid; gap: var(--sp-5); align-items: start; }
  .pair > .card { height: 100%; }
  @media (min-width: 64rem) {
    .pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: center; }
    .pair:nth-child(even) > .card { order: 2; }
  }
  .pair-list { display: grid; gap: var(--sp-8); }
  @media (min-width: 64rem) { .pair-list { gap: var(--sp-12); } }

  .method-grid { display: grid; gap: var(--sp-6); }
  @media (min-width: 48rem) { .method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 90rem) { .method-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .method { display: grid; gap: var(--sp-4); align-content: start; }

  .compare { margin-block-start: var(--sp-12); display: grid; gap: var(--sp-6); }
  .compare__title { text-align: center; font-size: var(--fs-2xl); }

  /* Advantage / challenge items: image + disclosure inside a card */
  .benefit-grid { display: grid; gap: var(--sp-6); }
  @media (min-width: 40rem) { .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64rem) { .benefit-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .benefit { display: flex; flex-direction: column; gap: var(--sp-4); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
  .benefit .disclosure { margin-block-start: auto; }
  .benefit__title { font-size: var(--fs-lg); display: flex; align-items: center; gap: var(--sp-3); }

  /* ======================================================================
     Quiz
     ====================================================================== */
  .quiz { display: grid; gap: var(--sp-6); }
  .quiz__progress-wrap {
    position: sticky; inset-block-start: var(--header-h); z-index: 5;
    margin-inline: calc(var(--gutter) * -1); padding: var(--sp-3) var(--gutter);
    background: var(--sticky-bg); backdrop-filter: blur(8px);
    border-block-end: 1px solid var(--border);
  }
  .quiz__progress-text { display: flex; justify-content: space-between; font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); margin-block-end: var(--sp-2); }
  .progress { height: 8px; border-radius: var(--r-pill); background: var(--border); overflow: hidden; }
  .progress__bar { height: 100%; width: 0; background: var(--accent); border-radius: inherit; transition: width var(--dur-3) var(--ease-out); }

  .question { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: var(--sp-5); display: grid; gap: var(--sp-4); min-width: 0; box-shadow: var(--sh-1); scroll-margin-block-start: calc(var(--header-h) + 5rem); }
  .question[data-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgb(180 35 24 / 0.14); }
  .question > legend { float: left; width: 100%; padding: 0; font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--text-strong); }
  .question > legend + * { clear: both; }
  .question__no { display: block; font-size: var(--fs-xs); font-weight: 600; color: var(--accent); margin-block-end: var(--sp-1); }
  .options { display: grid; gap: var(--sp-2); }
  @media (min-width: 40rem) { .options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .option { position: relative; display: block; cursor: pointer; }
  .option input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
  .option__body {
    display: flex; align-items: center; gap: var(--sp-3);
    min-height: 52px; padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border-control); border-radius: var(--r-md); background: var(--surface);
    transition: border-color var(--dur-1), background-color var(--dur-1), box-shadow var(--dur-2), transform var(--dur-1);
  }
  .option__body::before {
    content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--border-control); background: var(--surface);
    transition: border-color var(--dur-1), background-color var(--dur-1), box-shadow var(--dur-1);
  }
  .option:hover .option__body { border-color: var(--border-hover); }
  .option:active .option__body { transform: scale(0.99); }
  .option input:checked + .option__body { border-color: var(--accent); background: var(--accent-tint); }
  .option input:checked + .option__body::before { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--accent-tint); }
  .option input:focus-visible + .option__body { box-shadow: 0 0 0 4px var(--ring); }

  /* Result marking: icon + text label + colour (never colour alone) */
  .option.is-correct .option__body { border-color: var(--success); background: var(--success-bg); color: var(--success); font-weight: 600; }
  .option.is-correct .option__body::before { border-color: var(--success); background: var(--success); box-shadow: inset 0 0 0 3px var(--success-bg); }
  .option.is-wrong .option__body { border-color: var(--danger); background: var(--danger-bg); color: var(--danger); }
  .option.is-wrong .option__body::before { border-color: var(--danger); background: var(--danger); box-shadow: inset 0 0 0 3px var(--danger-bg); }
  .option__tag { margin-inline-start: auto; font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
  .quiz.is-graded .option { pointer-events: none; }

  .reveal { display: grid; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-md); background: var(--success-bg); border: 1px solid var(--success-bd); color: var(--success); animation: error-in var(--dur-3) var(--ease-out); }
  .reveal p { font-weight: 600; margin: 0; }
  .reveal img { border-radius: var(--r-sm); width: 100%; max-width: 28rem; height: auto; }

  .quiz__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
  .quiz-result { display: grid; justify-items: center; gap: var(--sp-3); text-align: center; padding: var(--sp-8) var(--sp-5); scroll-margin-block-start: calc(var(--header-h) + 5rem); }
  .quiz-result__score { font-family: var(--font-serif); font-size: var(--fs-4xl); font-weight: 600; color: var(--accent); line-height: 1; font-variant-numeric: tabular-nums; }

  /* ======================================================================
     Pricing (upgrade)
     ====================================================================== */
  .plan-grid { display: grid; gap: var(--sp-6); align-items: stretch; }
  @media (min-width: 64rem) { .plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .plan { position: relative; gap: var(--sp-5); padding: var(--sp-6); }
  @media (min-width: 64rem) { .plan--featured { padding-block: var(--sp-8); margin-block: calc(var(--sp-4) * -1); } }
  .plan__flag { position: absolute; inset-block-start: calc(var(--sp-3) * -1); inset-inline-start: var(--sp-6); }
  .plan__price { display: flex; align-items: baseline; gap: var(--sp-2); font-family: var(--font-serif); font-size: var(--fs-3xl); font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
  .plan__price small { font-family: var(--font-sans); font-size: var(--fs-sm); font-weight: 400; color: var(--text-muted); }
  .plan__features { list-style: none; padding: 0; display: grid; gap: var(--sp-3); }
  .plan__features li { position: relative; margin: 0; padding-inline-start: var(--sp-6); }
  .plan__features li::before {
    content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.2em; width: 1.1rem; height: 1.1rem;
    background: var(--accent);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  .plan .btn { margin-block-start: auto; }

  /* ======================================================================
     Marketplace
     ====================================================================== */
  .trust-strip { background: var(--surface); border-block: 1px solid var(--border); }
  .trust-strip ul { list-style: none; margin: 0; padding: var(--sp-4) 0; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-8); justify-content: center; font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); }
  .trust-strip li { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; }
  .trust-strip .icon { color: var(--accent); }

  .product-grid { display: grid; gap: var(--sp-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  .product { gap: var(--sp-3); }
  .product__price { font-size: var(--fs-xl); font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
  .product--soon { background: var(--surface-sunken); border-style: dashed; box-shadow: none; }
  .product--soon .product__price { font-size: var(--fs-md); font-weight: 600; color: var(--warning); }

  /* ======================================================================
     Academy & garden (premium modules)
     ====================================================================== */
  .unlock-hero { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-block-start: var(--sp-6); }
  .unlock-hero__note { font-size: var(--fs-sm); color: var(--n-300); max-width: 34ch; }

  .course { display: grid; gap: var(--sp-6); }
  @media (min-width: 64rem) { .course { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
  .module { gap: var(--sp-4); }
  .module__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
  .module__head h3 { font-size: var(--fs-lg); }
  .module__teaser { color: var(--text); }

  .premium { position: relative; border-radius: var(--r-md); }
  .premium__data { display: grid; gap: var(--sp-4); padding: var(--sp-4); background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--r-md); transition: filter var(--dur-3) var(--ease-out); }
  .premium__data p { margin: 0; line-height: var(--lh-loose); }
  .premium__tip { padding: var(--sp-3) var(--sp-4); border-inline-start: 3px solid var(--warning); background: var(--warning-bg); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: var(--fs-sm); color: var(--warning); }
  .premium[data-locked="true"] .premium__data { filter: blur(7px); user-select: none; pointer-events: none; min-height: 9rem; }
  .premium__lock {
    position: absolute; inset: 0; display: none;
    place-items: center; align-content: center; gap: var(--sp-2);
    border-radius: var(--r-md);
    background: var(--overlay-soft);
    color: var(--text-strong); font-weight: 600; text-align: center;
  }
  .premium[data-locked="true"] .premium__lock { display: grid; }
  .premium__lock .icon { width: 1.75rem; height: 1.75rem; color: var(--accent); }

  /* ======================================================================
     Dashboards (starter / pro / enterprise)
     ====================================================================== */
  .dash { padding-block: var(--sp-8) var(--sp-16); display: grid; gap: var(--sp-6); }
  .tier-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
  .tier-bar__title { display: grid; gap: var(--sp-2); }
  .tier-bar__title h1 { font-family: var(--font-sans); font-size: var(--fs-xl); }
  .dash-grid { display: grid; gap: var(--sp-6); }
  @media (min-width: 64rem) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

  .npk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
  .npk__tile { display: grid; gap: 2px; padding: var(--sp-4) var(--sp-2); text-align: center; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--r-md); }
  .npk__tile span { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
  .npk__tile output { font-family: var(--font-serif); font-size: var(--fs-2xl); font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }

  .result { padding: var(--sp-4); border-radius: var(--r-md); background: var(--success-bg); border: 1px solid var(--success-bd); color: var(--success); display: grid; gap: var(--sp-2); }
  .result h3, .result h4 { color: inherit; font-size: var(--fs-lg); }
  .result p { margin: 0; color: var(--text); }
  .result[data-tone="info"] { background: var(--info-bg); border-color: var(--info-bd); color: var(--info); }
  .result[aria-busy="true"] { background: var(--surface-sunken); border-color: var(--border); }

  .upsell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-sunken); }
  .upsell__text { display: flex; gap: var(--sp-3); align-items: flex-start; }
  .upsell .icon { width: 1.5rem; height: 1.5rem; color: var(--n-500); margin-block-start: 2px; }

  .terminal { border-radius: var(--r-lg); overflow: hidden; background: var(--n-900); color: #7be0b0; box-shadow: var(--sh-2); }
  .terminal__bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--n-800); color: var(--n-300); font-size: var(--fs-xs); }
  .terminal__dots { display: flex; gap: 6px; }
  .terminal__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--n-600); }
  .terminal__body { display: grid; gap: var(--sp-4); padding: var(--sp-5); }
  @media (min-width: 40rem) { .terminal__body { grid-template-columns: 11rem minmax(0, 1fr); align-items: center; } }
  .terminal__link { display: grid; justify-items: center; gap: var(--sp-2); text-align: center; font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; color: #7be0b0; }
  .terminal__pulse { font-size: 1.5rem; }
  .terminal__pulse { position: relative; display: grid; place-items: center; width: 64px; height: 64px; }
  .terminal__pulse::before, .terminal__pulse::after { content: ""; position: absolute; inset: 0; border: 2px solid #7be0b0; border-radius: 50%; opacity: 0; animation: pulse-ring 2.4s var(--ease-out) infinite; }
  .terminal__pulse::after { animation-delay: 1.2s; }
  @keyframes pulse-ring { from { transform: scale(0.5); opacity: 0.8; } to { transform: scale(1.3); opacity: 0; } }
  .terminal__logs { height: 9.5rem; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-sm); line-height: 1.5; }
  .terminal__logs div { animation: fade-in var(--dur-3) var(--ease-out); overflow-wrap: anywhere; }

  .steps-list { padding-inline-start: 0; list-style: none; display: grid; gap: var(--sp-3); counter-reset: s; }
  .steps-list li { counter-increment: s; position: relative; margin: 0; padding-inline-start: 2.5rem; font-size: var(--fs-sm); line-height: var(--lh-normal); }
  .steps-list li::before { content: counter(s); position: absolute; inset-inline-start: 0; inset-block-start: 0; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--accent-tint-2); color: var(--accent-ink); font-weight: 700; font-size: var(--fs-xs); }
  .live-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

  /* ======================================================================
     SDGs & contact
     ====================================================================== */
  .horizons { display: grid; gap: var(--sp-4); }
  @media (min-width: 64rem) { .horizons { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .horizon { gap: var(--sp-3); }
  .horizon__no { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--n-0); font-weight: 700; font-size: var(--fs-sm); }

  .sdg-grid { display: grid; gap: var(--sp-6); }
  @media (min-width: 48rem) { .sdg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 90rem) { .sdg-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .sdg-card { gap: var(--sp-3); }
  .sdg-card__metric { margin-block-start: auto; padding: var(--sp-3) var(--sp-4); background: var(--accent-tint); border-radius: var(--r-md); color: var(--accent-ink); font-size: var(--fs-sm); font-weight: 600; }

  .contact-layout { display: grid; gap: var(--sp-8); }
  @media (min-width: 64rem) { .contact-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-12); align-items: start; } }
  .contact-info { display: grid; gap: var(--sp-5); align-content: start; }
  .contact-list { list-style: none; padding: 0; display: grid; gap: var(--sp-4); }
  .contact-layout > * { min-width: 0; }
  .contact-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-3); margin: 0; align-items: start; }
  .contact-list li > div { min-width: 0; overflow-wrap: anywhere; }   /* long URLs / device IDs must wrap, not widen the page */
  .contact-list strong { display: block; color: var(--text-strong); }
  .form-status { min-height: 1.5rem; }

  /* ======================================================================
     404
     ====================================================================== */
  .not-found { display: grid; justify-items: center; gap: var(--sp-4); text-align: center; padding-block: var(--sp-24); }
  .not-found__code { font-family: var(--font-serif); font-size: clamp(5rem, 20vw, 9rem); line-height: 1; color: var(--accent); font-weight: 600; }
}

/* ==========================================================================
   EcoFarm AgTech — Payment UI
   --------------------------------------------------------------------------
   Two deliberately different experiences from one DOM:

   DESKTOP (≥ 64rem)  Spacious two-column layout. Form on the left, a sticky
                      order summary with the full price breakdown on the right.
                      Everything is visible at once; the Pay button lives at
                      the end of the form.

   MOBILE  (< 48rem)  A stepped, thumb-first flow: 1 Details → 2 Payment.
                      The summary collapses to a single tappable row, inputs are
                      56px tall with a large font, payment methods stack as
                      full-width tap targets, and a sticky bottom bar carries
                      the total and the primary action.

   TABLET  (48–63.99rem) Single column, summary on top, all steps visible.
   ========================================================================== */

@layer payment {

  /* ---- Test-mode notice ------------------------------------------------ */
  .test-banner {
    padding: var(--sp-2) var(--gutter);
    background: var(--warning-bg);
    border-block-end: 1px solid var(--warning-bd);
    color: var(--warning);
    font-size: var(--fs-sm); font-weight: 600; text-align: center;
  }

  /* ---- Page shell ------------------------------------------------------ */
  .checkout { padding-block: var(--sp-6) calc(7rem + env(safe-area-inset-bottom)); }
  .checkout__head { display: grid; gap: var(--sp-3); margin-block-end: var(--sp-6); }
  .checkout__head h1 { font-size: var(--fs-2xl); }
  .checkout__head p { color: var(--text-muted); }

  .checkout__layout { display: grid; gap: var(--sp-6); align-items: start; }

  /* Mobile-only stepper (hidden ≥ 48rem) */
  .stepper { display: flex; gap: var(--sp-2); list-style: none; padding: 0; margin: 0; counter-reset: st; }
  .stepper li { flex: 1; margin: 0; counter-increment: st; display: grid; gap: var(--sp-1); font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
  .stepper li::before { content: ""; height: 4px; border-radius: var(--r-pill); background: var(--border); transition: background-color var(--dur-3) var(--ease-out); }
  .stepper li[aria-current="step"], .stepper li.is-done { color: var(--accent); }
  .stepper li[aria-current="step"]::before, .stepper li.is-done::before { background: var(--accent); }

  /* ---- Panels (form sections) ------------------------------------------ */
  .panel { display: grid; gap: var(--sp-5); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
  .panel + .panel { margin-block-start: var(--sp-5); }
  .panel__title { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-sans); font-size: var(--fs-lg); }
  .panel__no { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--n-0); font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }

  .pay-fields { min-height: 22rem; display: grid; gap: var(--sp-5); align-content: start; }   /* reserved height → no layout jump when fields mount */
  .method-panel { display: grid; gap: var(--sp-5); animation: error-in var(--dur-3) var(--ease-out); }

  /* ---- Card-number adornment (detected brand) -------------------------- */
  .field__control--adorned .input { padding-inline-end: 5.25rem; }
  .card-brand {
    position: absolute; inset-inline-end: 10px;
    padding: 3px 8px; border-radius: var(--r-xs);
    background: var(--surface-2); color: var(--text-muted);
    font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    pointer-events: none; transition: background-color var(--dur-2), color var(--dur-2);
  }
  .card-brand[data-brand="visa"]       { background: #e8edfb; color: #1a3a9c; }
  .card-brand[data-brand="mastercard"] { background: #fdeee0; color: #a2480b; }
  .card-brand[data-brand="rupay"]      { background: #e4f4ea; color: #17613b; }
  .card-brand[data-brand="amex"]       { background: #e3f1f8; color: #14587d; }
  .card-brand[data-brand="diners"]     { background: #ece8f7; color: #4b3a8f; }

  .field-row-2 { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* ---- UPI --------------------------------------------------------------- */
  .upi-alt { display: grid; gap: var(--sp-4); padding: var(--sp-5); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-sunken); }
  .upi-alt__title { font-size: var(--fs-md); font-family: var(--font-sans); }
  .upi-alt__grid { display: grid; gap: var(--sp-5); align-items: center; }
  @media (min-width: 40rem) { .upi-alt__grid { grid-template-columns: auto 1fr; } }

  .qr { display: grid; place-items: center; width: 11.5rem; height: 11.5rem; padding: var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
  .qr svg { width: 100%; height: 100%; }
  .qr--loading { background: linear-gradient(100deg, var(--surface-2) 30%, var(--surface-3) 50%, var(--surface-2) 70%) 0 0 / 200% 100%; animation: shimmer 1.4s linear infinite; }

  .vpa-chip { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); word-break: break-all; }
  .vpa-chip button { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-inline-end: -6px; border-radius: 50%; color: var(--accent); }
  .vpa-chip button:hover { background: var(--accent-tint); }

  /* App deep-link is only meaningful on touch devices */
  .only-touch { display: none; }
  .only-pointer { display: grid; }
  @media (hover: none) and (pointer: coarse) {
    .only-touch { display: inline-flex; }
    .only-pointer { display: none; }
  }

  /* ---- Order summary ----------------------------------------------------- */
  .summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
  .summary__toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); width: 100%; min-height: 56px; padding: var(--sp-3) var(--sp-5); font-weight: 600; color: var(--text-strong); text-align: start; }
  .summary__toggle .icon { transition: transform var(--dur-2) var(--ease-out); color: var(--text-muted); }
  .summary__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
  .summary__toggle-total { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
  .summary__title { font-family: var(--font-sans); font-size: var(--fs-lg); padding: var(--sp-5) var(--sp-5) var(--sp-4); display: none; }
  .summary__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-3) var(--ease-out); }
  .summary__body.is-open { grid-template-rows: 1fr; }
  .summary__inner { overflow: hidden; min-height: 0; }
  .summary__content { display: grid; gap: var(--sp-5); padding: var(--sp-2) var(--sp-5) var(--sp-5); border-block-start: 1px solid var(--border); padding-block-start: var(--sp-5); }

  .summary__plan { display: flex; gap: var(--sp-4); align-items: center; }
  .summary__plan h3 { font-size: var(--fs-md); font-family: var(--font-sans); }
  .summary__plan p { font-size: var(--fs-sm); color: var(--text-muted); }

  .summary__lines { display: grid; gap: var(--sp-3); margin: 0; }
  .summary__line { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-sm); }
  .summary__line dt { color: var(--text); }
  .summary__line dd { margin: 0; font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .summary__line--free dd { color: var(--success); }
  .summary__total { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); padding-block-start: var(--sp-4); border-block-start: 1px solid var(--border); }
  .summary__total dt { font-weight: 600; color: var(--text-strong); }
  .summary__total dd { margin: 0; font-family: var(--font-serif); font-size: var(--fs-2xl); font-weight: 600; color: var(--text-strong); font-variant-numeric: tabular-nums; }
  .summary__trust { list-style: none; padding: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); }
  .summary__trust li { display: flex; gap: var(--sp-2); align-items: flex-start; margin: 0; }
  .summary__trust .icon { color: var(--success); margin-block-start: 2px; }

  .secure-note { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-muted); text-align: center; }
  .secure-note .icon { color: var(--success); }

  /* ---- Sticky pay bar (mobile) ----------------------------------------- */
  .pay-bar {
    position: fixed; z-index: var(--z-paybar);
    inset-inline: 0; inset-block-end: 0;
    display: flex; align-items: center; gap: var(--sp-4);
    padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));
    background: var(--surface);
    border-block-start: 1px solid var(--border);
    box-shadow: var(--sh-up);
  }
  .pay-bar__total { display: grid; line-height: 1.15; flex: none; }
  .pay-bar__total span { font-size: var(--fs-xs); color: var(--text-muted); }
  .pay-bar__total strong { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; color: var(--text-strong); }
  .pay-bar .btn { flex: 1; min-height: 56px; font-size: var(--fs-lg); }
  .pay-inline { display: none; }
  .step-back { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 44px; font-weight: 600; color: var(--accent); }

  /* ---- MOBILE: stepped flow ------------------------------------------------ */
  @media (max-width: 47.999rem) {
    :root { --toast-offset: 5.5rem; }
    /* Only the active step is shown */
    .js [data-step-panel]:not(.is-active) { display: none; }
    .panel { padding: var(--sp-5) var(--sp-4); }
    .checkout .input, .checkout .select { min-height: 56px; font-size: 1.125rem; padding-inline: var(--sp-4); border-radius: var(--r-lg); }
    .checkout .field__label { font-size: var(--fs-md); }
    .picker { grid-template-columns: 1fr; }
    .picker__body { min-height: 68px; border-radius: var(--r-lg); }
    .field__control--adorned .input { padding-inline-end: 5.5rem; }
    .qr { width: 13rem; height: 13rem; }
  }

  /* ---- TABLET & UP ------------------------------------------------------- */
  @media (min-width: 48rem) {
    .checkout { padding-block: var(--sp-10) var(--sp-16); }
    .checkout__head h1 { font-size: var(--fs-3xl); }
    .stepper, .pay-bar, .step-back { display: none; }
    .pay-inline { display: flex; }
    .panel { padding: var(--sp-8); gap: var(--sp-6); }
    .panel + .panel { margin-block-start: var(--sp-6); }
    /* Summary is always expanded; the toggle disappears */
    .summary__toggle { display: none; }
    .summary__title { display: block; }
    .summary__body { grid-template-rows: 1fr; }
  }

  /* ---- DESKTOP: two columns, sticky summary -------------------------------- */
  @media (min-width: 64rem) {
    .checkout__layout { grid-template-columns: minmax(0, 1fr) 24rem; gap: var(--sp-12); }
    /* Summary is first in the DOM (logical order) but sits on the right. */
    .summary { grid-column: 2; grid-row: 1; position: sticky; inset-block-start: calc(var(--header-h) + var(--sp-6)); }
    .checkout__main { grid-column: 1; grid-row: 1; }
    .summary__content { gap: var(--sp-6); padding-inline: var(--sp-6); }
    .summary__title { padding-inline: var(--sp-6); }
  }
  @media (min-width: 90rem) {
    .checkout__layout { grid-template-columns: minmax(0, 1fr) 27rem; }
  }

  /* ---- Standalone UPI page (/upi-*) -------------------------------------- */
  .upi-page { padding-block: var(--sp-6) calc(7rem + env(safe-area-inset-bottom)); }
  .upi-card { display: grid; gap: var(--sp-6); max-width: 30rem; margin-inline: auto; }
  .upi-amount { display: grid; gap: var(--sp-1); justify-items: center; text-align: center; padding: var(--sp-6) var(--sp-5); border-radius: var(--r-xl); background: var(--n-900); color: var(--n-200); }
  .upi-amount__value { font-family: var(--font-serif); font-size: var(--fs-4xl); font-weight: 600; color: var(--n-0); line-height: 1.05; font-variant-numeric: tabular-nums; }
  .upi-amount .badge { margin-block-start: var(--sp-2); }
  .upi-steps { display: grid; gap: var(--sp-5); }
  .upi-steps > section { display: grid; gap: var(--sp-3); }
  .upi-steps h2 { font-family: var(--font-sans); font-size: var(--fs-md); display: flex; align-items: center; gap: var(--sp-3); }
  .upi-page .qr { margin-inline: auto; }
  @media (min-width: 48rem) {
    .upi-page { padding-block: var(--sp-12) var(--sp-16); }
  }

  /* ---- Payment sheet extras (marketplace / academy / garden) ----------------- */
  .sheet-amount { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); padding: var(--sp-4); border-radius: var(--r-md); background: var(--surface-3); border: 1px solid var(--border); }
  .sheet-amount strong { font-family: var(--font-serif); font-size: var(--fs-2xl); font-variant-numeric: tabular-nums; color: var(--text-strong); }
  .sheet__fields { min-height: 18rem; }   /* reserves space so the sheet doesn't jump when fields mount */
  .sheet-amount span { font-size: var(--fs-sm); color: var(--text-muted); }

  /* Lock page scroll behind any open modal sheet */
  html:has(dialog.sheet[open]) { overflow: hidden; }
}

/* ==========================================================================
   DARK THEME — every colour is a role token, so components never need a
   per-theme override. Set by <html data-theme="dark"> (see inline head script).
   ========================================================================== */
@layer tokens {
  :root {
    --header-bg: rgb(255 255 255 / 0.94);
    --header-bg-glass: rgb(255 255 255 / 0.82);
    --sticky-bg: rgb(244 246 248 / 0.92);
    --overlay-soft: rgb(255 255 255 / 0.55);
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg:             #0a1210;
    --surface:        #111b18;
    --surface-sunken: #0d1613;
    --surface-2:      #1a2723;
    --surface-3:      #15211e;
    --text:           #d3e1dc;
    --text-strong:    #f2f8f6;
    --text-muted:     #93aaa3;
    --text-on-accent: #04231d;
    --border:         #22332e;
    --border-strong:  #314842;
    --border-control: #5d776f;
    --border-hover:   #8cabA1;
    --accent:         #3cc4a8;
    --accent-hover:   #5ad3ba;
    --accent-active:  #7fe0cb;
    --accent-tint:    rgb(60 196 168 / 0.12);
    --accent-tint-2:  rgb(60 196 168 / 0.22);
    --accent-ink:     #8fe6d2;
    --link:           #6fdcc4;
    --ring:           rgb(60 196 168 / 0.42);
    --inv-bg:         #e6f2ee;
    --inv-fg:         #0a1210;
    --inv-bg-hover:   #c9e0d8;
    --harvest:        #f2b632;
    --harvest-bg:     rgb(242 182 50 / 0.14);
    --glass:          rgb(17 27 24 / 0.72);
    --scrim:          rgb(0 0 0 / 0.62);

    --success:    #5ad39a; --success-bg: rgb(90 211 154 / 0.12); --success-bd: rgb(90 211 154 / 0.35);
    --warning:    #f2b632; --warning-bg: rgb(242 182 50 / 0.12); --warning-bd: rgb(242 182 50 / 0.35);
    --danger:     #ff8f84; --danger-bg:  rgb(255 143 132 / 0.12); --danger-bd:  rgb(255 143 132 / 0.38);
    --info:       #7db7f2; --info-bg:    rgb(125 183 242 / 0.12); --info-bd:    rgb(125 183 242 / 0.35);

    --sh-1: 0 1px 2px rgb(0 0 0 / 0.5);
    --sh-2: 0 6px 16px -4px rgb(0 0 0 / 0.55), 0 2px 4px -2px rgb(0 0 0 / 0.4);
    --sh-3: 0 22px 44px -10px rgb(0 0 0 / 0.7), 0 4px 10px -4px rgb(0 0 0 / 0.5);
    --sh-up: 0 -8px 24px -6px rgb(0 0 0 / 0.6);

    --header-bg: rgb(10 18 16 / 0.94);
    --header-bg-glass: rgb(10 18 16 / 0.78);
    --sticky-bg: rgb(10 18 16 / 0.92);
    --overlay-soft: rgb(10 18 16 / 0.6);
  }
  :root[data-theme="dark"] ::selection { background: #1d5e51; color: #fff; }
}

/* ==========================================================================
   SHELL — app frame: sidebar, topbar, palette, cart, effects
   ========================================================================== */
@view-transition { navigation: auto; }
@keyframes vt-in  { from { opacity: 0; transform: translateY(6px); } }
::view-transition-old(root) { animation: 140ms ease-out both fade-out; }
::view-transition-new(root) { animation: 260ms var(--ease-out) both vt-in; }
@keyframes fade-out { to { opacity: 0; } }

@layer shell {
  html { color-scheme: light dark; }
  html[data-theme="light"] { color-scheme: light; }
  html[data-theme="dark"]  { color-scheme: dark; }
  body { transition: background-color var(--dur-3) var(--ease-out), color var(--dur-3) var(--ease-out); }
  html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after {
    transition: background-color 280ms ease, border-color 280ms ease, color 280ms ease, box-shadow 280ms ease, fill 280ms ease !important;
  }

  .site-header { background: var(--header-bg); }
  @supports (backdrop-filter: blur(1px)) { .site-header { background: var(--header-bg-glass); backdrop-filter: saturate(1.5) blur(14px); } }
  .quiz__progress { background: var(--sticky-bg); }
  h1, h2 { letter-spacing: -0.02em; font-weight: 700; }
  h3 { font-weight: 650; }

  /* Dark-mode surface polish for things that were light-only */
  :root[data-theme="dark"] .ecosystem__img,
  :root[data-theme="dark"] .media img,
  :root[data-theme="dark"] .quiz img { filter: brightness(0.86) contrast(1.04) saturate(0.95); }
  :root[data-theme="dark"] .site-footer { border-block-start: 1px solid var(--border); }
  :root[data-theme="dark"] .card-brand { filter: brightness(0.92); }
  :root[data-theme="dark"] .badge--warning { color: var(--warning); }
  :root[data-theme="dark"] .qr { background: #fff; }                  /* QR must stay light to scan */
  :root[data-theme="dark"] .lang__select { background-color: var(--surface); }
  .btn--primary { box-shadow: var(--sh-1), inset 0 1px 0 rgb(255 255 255 / 0.18); }

  /* ------------------------------------------------------------------
     Reading progress + back-to-top
     ------------------------------------------------------------------ */
  .scroll-progress {
    position: fixed; inset: 0 0 auto 0; height: 3px; z-index: calc(var(--z-header) + 5);
    transform-origin: 0 50%; transform: scaleX(0);
    background: linear-gradient(90deg, var(--accent), var(--harvest));
    pointer-events: none;
  }
  .to-top {
    position: fixed; inset-inline-end: var(--sp-5); inset-block-end: calc(var(--sp-5) + 68px);
    z-index: var(--z-fab); width: 44px; height: 44px; border-radius: 50%;
    display: grid; place-items: center; color: var(--text-strong);
    background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--sh-2);
    opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none;
    transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out);
  }
  .to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
  .to-top:hover { border-color: var(--accent); color: var(--accent); }

  /* ------------------------------------------------------------------
     Sidebar frame (enabled by JS: html.has-sidebar)
     ------------------------------------------------------------------ */
  .sidebar {
    position: fixed; inset-block: 0; inset-inline-start: 0; z-index: var(--z-sidebar);
    width: var(--sidebar-w); display: flex; flex-direction: column;
    background: var(--surface); border-inline-end: 1px solid var(--border);
    transform: translateX(-102%); visibility: hidden;
    transition: transform var(--dur-3) var(--ease-out), width var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
  }
  [dir="rtl"] .sidebar { transform: translateX(102%); }
  html.sb-open .sidebar { transform: none; visibility: visible; transition-delay: 0s; box-shadow: var(--sh-3); }
  .sidebar-scrim {
    position: fixed; inset: 0; z-index: calc(var(--z-sidebar) - 1); background: var(--scrim);
    opacity: 0; pointer-events: none; transition: opacity var(--dur-3); backdrop-filter: blur(2px);
  }
  html.sb-open .sidebar-scrim { opacity: 1; pointer-events: auto; }
  html.sb-open { overflow: hidden; }

  .sb__top { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-4) var(--sp-4) var(--sp-3); }
  .sb__top .brand { flex: 1; min-width: 0; }
  .sb__collapse { display: none; width: 34px; height: 34px; border-radius: var(--r-sm); place-items: center; color: var(--text-muted); }
  .sb__collapse:hover { background: var(--surface-2); color: var(--text-strong); }
  .sb__collapse .icon { transition: transform var(--dur-3) var(--ease-out); }

  .sb__search {
    margin: 0 var(--sp-4) var(--sp-3); display: flex; align-items: center; gap: var(--sp-2);
    height: 40px; padding-inline: var(--sp-3); border-radius: var(--r-md); text-align: start;
    background: var(--surface-3); border: 1px solid var(--border); color: var(--text-muted); font-size: var(--fs-sm);
    transition: border-color var(--dur-1), background-color var(--dur-1);
  }
  .sb__search:hover { border-color: var(--border-hover); background: var(--surface-2); }
  .sb__search span { flex: 1; white-space: nowrap; overflow: hidden; }
  kbd, .kbd {
    font: 600 0.6875rem/1 var(--font-sans); padding: 3px 6px; border-radius: 5px;
    background: var(--surface); border: 1px solid var(--border-strong); border-block-end-width: 2px; color: var(--text-muted);
  }

  .sb__scroll { flex: 1; overflow-y: auto; padding: var(--sp-1) var(--sp-3) var(--sp-4); scrollbar-width: thin; }
  .sb__group + .sb__group { margin-block-start: var(--sp-4); }
  .sb__label { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); letter-spacing: 0.02em; }
  .sb__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
  .sb__list li + li { margin: 0; }
  .sb__link {
    position: relative; display: flex; align-items: center; gap: var(--sp-3); min-height: 40px;
    padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); color: var(--text); text-decoration: none;
    font-size: var(--fs-sm); font-weight: 500; transition: background-color var(--dur-1), color var(--dur-1), transform var(--dur-1) var(--ease-out);
  }
  .sb__link:hover { background: var(--surface-2); color: var(--text-strong); text-decoration: none; transform: translateX(2px); }
  .sb__link .icon { width: 1.15rem; height: 1.15rem; color: var(--text-muted); transition: color var(--dur-1); }
  .sb__link:hover .icon { color: var(--accent); }
  .sb__link[aria-current="page"] { background: var(--accent-tint); color: var(--accent-ink); font-weight: 600; }
  .sb__link[aria-current="page"] .icon { color: var(--accent); }
  .sb__link[aria-current="page"]::before {
    content: ""; position: absolute; inset-inline-start: -12px; inset-block: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent);
  }
  .sb__link-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sb__pill { font-size: 0.6875rem; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); background: var(--harvest-bg); color: var(--harvest); }

  .sb__foot { padding: var(--sp-3) var(--sp-4) var(--sp-4); border-block-start: 1px solid var(--border); display: grid; gap: var(--sp-3); }
  .pulse {
    padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-3); border: 1px solid var(--border);
  }
  .pulse__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--text-muted); }
  .pulse__row strong { font-size: var(--fs-lg); color: var(--text-strong); font-variant-numeric: tabular-nums; }
  .pulse__live { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--success); }
  .pulse__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse-dot 1.8s ease-in-out infinite; }
  @keyframes pulse-dot { 50% { opacity: 0.25; transform: scale(0.7); } }
  .pulse canvas { width: 100%; height: 44px; margin-block-start: var(--sp-2); }
  .pulse__valve { margin-block-start: 6px; font-size: var(--fs-xs); color: var(--text-muted); }
  .sb__plan { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); text-decoration: none; color: var(--text); border: 1px solid var(--border); }
  .sb__plan:hover { border-color: var(--accent); text-decoration: none; }
  .sb__plan small { display: block; color: var(--text-muted); }
  .sb__plan b { color: var(--text-strong); }

  /* Desktop: permanent column + optional icon rail */
  @media (min-width: 64rem) {
    html.has-sidebar body { padding-inline-start: var(--sidebar-w); transition: padding var(--dur-3) var(--ease-out), background-color var(--dur-3); }
    html.has-sidebar .sidebar { transform: none; visibility: visible; box-shadow: none; }
    html.has-sidebar.sb-open { overflow: auto; }
    html.has-sidebar .sidebar-scrim { display: none; }
    html.has-sidebar .menu-btn { display: none; }
    .sb__collapse { display: grid; }

    html[data-sidebar="rail"] { --sidebar-w: var(--sidebar-w-rail); }
    html[data-sidebar="rail"] .sb__collapse .icon { transform: rotate(180deg); }
    html[data-sidebar="rail"] .sb__top { flex-direction: column; padding-inline: var(--sp-3); }
    html[data-sidebar="rail"] .sb__top .brand__name,
    html[data-sidebar="rail"] .sb__link-t, html[data-sidebar="rail"] .sb__pill,
    html[data-sidebar="rail"] .sb__label, html[data-sidebar="rail"] .sb__search span, html[data-sidebar="rail"] .sb__search kbd,
    html[data-sidebar="rail"] .pulse, html[data-sidebar="rail"] .sb__plan > div { display: none; }
    html[data-sidebar="rail"] .sb__link { justify-content: center; padding-inline: 0; }
    html[data-sidebar="rail"] .sb__link:hover { transform: none; }
    html[data-sidebar="rail"] .sb__link[aria-current="page"]::before { inset-inline-start: -12px; }
    html[data-sidebar="rail"] .sb__search { justify-content: center; margin-inline: var(--sp-3); padding: 0; }
    html[data-sidebar="rail"] .sb__plan { justify-content: center; padding: var(--sp-2); }
    html[data-sidebar="rail"] .sb__group + .sb__group { margin-block-start: var(--sp-2); padding-block-start: var(--sp-2); border-block-start: 1px solid var(--border); }
    html[data-sidebar="rail"] .sb__link .icon { width: 1.3rem; height: 1.3rem; }
    /* rail tooltips */
    html[data-sidebar="rail"] .sb__link[data-tip]:hover::after {
      content: attr(data-tip); position: absolute; inset-inline-start: calc(100% + 10px); top: 50%; translate: 0 -50%;
      padding: 6px 10px; border-radius: var(--r-sm); background: var(--inv-bg); color: var(--inv-fg);
      font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; z-index: 5; box-shadow: var(--sh-2);
    }
  }

  /* Header becomes a slim top bar when the sidebar is present */
  html.has-sidebar .site-header .nav { display: none; }
  html.has-sidebar .site-header > .container { max-width: none; padding-inline: var(--gutter); }
  html.has-sidebar .site-header .brand { display: none; }
  @media (max-width: 63.999rem) { html.has-sidebar .site-header .brand { display: inline-flex; } }
  html.has-sidebar .site-header__inner { gap: var(--sp-3); }

  .crumbs { display: none; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--fs-sm); color: var(--text-muted); }
  @media (min-width: 48rem) { .crumbs { display: flex; } }
  .crumbs a { color: var(--text-muted); text-decoration: none; }
  .crumbs a:hover { color: var(--accent); }
  .crumbs b { color: var(--text-strong); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .crumbs .icon { width: 0.9em; height: 0.9em; opacity: 0.6; }
  .tb { display: flex; align-items: center; gap: var(--sp-1); margin-inline-start: auto; }
  .header-controls { margin-inline-start: 0; }
  .tb-btn {
    position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-md);
    color: var(--text); transition: background-color var(--dur-1), color var(--dur-1), transform var(--dur-1);
  }
  .tb-btn:hover { background: var(--surface-2); color: var(--text-strong); }
  .tb-btn:active { transform: scale(0.92); }
  .tb-btn .icon { width: 1.3rem; height: 1.3rem; }
  .tb-badge {
    position: absolute; inset-block-start: 3px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding-inline: 4px;
    display: grid; place-items: center; border-radius: var(--r-pill); background: var(--harvest); color: #231a00;
    font-size: 0.6875rem; font-weight: 800; transform: scale(0); transition: transform var(--dur-2) cubic-bezier(.3,1.6,.5,1);
  }
  .tb-badge.is-on { transform: scale(1); }
  .tb-badge.bump { animation: bump 420ms var(--ease-out); }
  @keyframes bump { 40% { transform: scale(1.5); } }

  /* Theme toggle: sun ⇄ moon morph */
  .theme-toggle .sun-core { transition: transform 500ms var(--ease-out); transform-origin: center; }
  .theme-toggle .sun-rays { transition: transform 500ms var(--ease-out), opacity 300ms; transform-origin: center; }
  .theme-toggle .moon-mask { transition: transform 500ms var(--ease-out); }
  :root[data-theme="dark"] .theme-toggle .sun-core { transform: scale(1.55); }
  :root[data-theme="dark"] .theme-toggle .sun-rays { transform: rotate(80deg) scale(0.4); opacity: 0; }
  :root[data-theme="dark"] .theme-toggle .moon-mask { transform: translate(-7px, 4px); }
  .theme-toggle svg { overflow: visible; width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  .theme-toggle .sun-core { fill: currentColor; }

  /* "On this page" popover */
  .otp { position: relative; display: none; }
  @media (min-width: 48rem) { .otp.has-items { display: block; } }
  .otp__panel {
    position: absolute; inset-inline-end: 0; top: calc(100% + 8px); width: 280px; max-height: 60vh; overflow: auto;
    padding: var(--sp-2); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--sh-3);
    transform-origin: top right; transform: scale(0.96) translateY(-4px); opacity: 0; visibility: hidden;
    transition: opacity var(--dur-2), transform var(--dur-2) var(--ease-out), visibility 0s linear var(--dur-2);
  }
  .otp.is-open .otp__panel { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
  .otp__panel a { display: block; padding: 8px 12px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--text); text-decoration: none; }
  .otp__panel a:hover, .otp__panel a.is-active { background: var(--accent-tint); color: var(--accent-ink); }
  .otp__t { padding: 6px 12px; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }

  /* ------------------------------------------------------------------
     Command palette + keyboard help
     ------------------------------------------------------------------ */
  dialog.palette, dialog.modal {
    margin: 12vh auto auto; width: min(640px, calc(100vw - 24px)); max-height: 76vh; padding: 0; overflow: hidden;
    border: 1px solid var(--border-strong); border-radius: var(--r-xl); background: var(--surface); color: var(--text); box-shadow: var(--sh-3);
  }
  dialog.palette[open], dialog.modal[open] { animation: pal-in 220ms var(--ease-out); display: flex; flex-direction: column; }
  dialog.palette::backdrop, dialog.modal::backdrop, dialog.drawer::backdrop { background: var(--scrim); backdrop-filter: blur(3px); animation: fade-in var(--dur-2); }
  @keyframes pal-in { from { opacity: 0; transform: translateY(-10px) scale(0.97); } }
  .pal__bar { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-block-end: 1px solid var(--border); }
  .pal__bar .icon { color: var(--text-muted); }
  .pal__input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font-size: var(--fs-lg); color: var(--text-strong); }
  .pal__list { list-style: none; margin: 0; padding: var(--sp-2); overflow-y: auto; }
  .pal__list li + li { margin: 0; }
  .pal__grp { padding: var(--sp-3) var(--sp-3) var(--sp-1); font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); }
  .pal__item { display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-3); border-radius: var(--r-md); cursor: pointer; color: var(--text); }
  .pal__item .icon { color: var(--text-muted); }
  .pal__item small { color: var(--text-muted); margin-inline-start: auto; font-size: var(--fs-xs); white-space: nowrap; }
  .pal__item[aria-selected="true"] { background: var(--accent-tint); color: var(--accent-ink); }
  .pal__item[aria-selected="true"] .icon { color: var(--accent); }
  .pal__item mark { background: none; color: var(--accent); font-weight: 700; }
  .pal__empty { padding: var(--sp-8) var(--sp-5); text-align: center; color: var(--text-muted); }
  .pal__foot { display: flex; gap: var(--sp-4); padding: var(--sp-3) var(--sp-5); border-block-start: 1px solid var(--border); font-size: var(--fs-xs); color: var(--text-muted); }
  .modal__body { padding: var(--sp-5); overflow: auto; }
  .kbd-grid { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3) var(--sp-6); align-items: center; }
  .kbd-grid dt { color: var(--text); } .kbd-grid dd { margin: 0; display: flex; gap: 4px; }

  /* ------------------------------------------------------------------
     Cart drawer
     ------------------------------------------------------------------ */
  dialog.drawer {
    margin: 0 0 0 auto; height: 100dvh; max-height: none; width: min(440px, 100vw); padding: 0;
    border: 0; border-inline-start: 1px solid var(--border-strong); background: var(--surface); color: var(--text); box-shadow: var(--sh-3);
  }
  dialog.drawer[open] { display: flex; flex-direction: column; animation: drawer-in 320ms var(--ease-out); }
  dialog.drawer.is-closing { animation: drawer-out 220ms var(--ease-in-out) forwards; }
  @keyframes drawer-in  { from { transform: translateX(100%); } }
  @keyframes drawer-out { to { transform: translateX(100%); } }
  .drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4) var(--sp-5); border-block-end: 1px solid var(--border); }
  .drawer__head h2 { font-size: var(--fs-xl); }
  .drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-5); display: grid; align-content: start; gap: var(--sp-3); }
  .drawer__foot { padding: var(--sp-4) var(--sp-5) var(--sp-5); border-block-start: 1px solid var(--border); display: grid; gap: var(--sp-3); background: var(--surface-sunken); }
  .ship { display: grid; gap: 6px; font-size: var(--fs-sm); }
  .ship__bar { height: 6px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
  .ship__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--harvest)); transition: width 500ms var(--ease-out); border-radius: inherit; }
  .cart-item { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: center; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); animation: item-in 300ms var(--ease-out); }
  @keyframes item-in { from { opacity: 0; transform: translateX(16px); } }
  .cart-item h3 { font-size: var(--fs-md); font-family: var(--font-sans); }
  .cart-item p { font-size: var(--fs-sm); color: var(--text-muted); }
  .qty { display: inline-flex; align-items: center; border: 1px solid var(--border-control); border-radius: var(--r-md); overflow: hidden; margin-block-start: 6px; }
  .qty button { width: 32px; height: 32px; display: grid; place-items: center; color: var(--text-strong); }
  .qty button:hover { background: var(--surface-2); }
  .qty output { min-width: 28px; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
  .cart-empty { text-align: center; padding: var(--sp-12) var(--sp-4); color: var(--text-muted); }
  .cart-empty .icon-tile { margin-inline: auto; margin-block-end: var(--sp-3); }
  .cart-sum { display: grid; gap: 6px; font-size: var(--fs-sm); }
  .cart-sum > div { display: flex; justify-content: space-between; }
  .cart-sum .is-total { font-size: var(--fs-lg); font-weight: 700; color: var(--text-strong); padding-block-start: var(--sp-2); border-block-start: 1px dashed var(--border-strong); }
  .cart-sum .is-off { color: var(--success); }
  .coupon { display: flex; gap: var(--sp-2); }
  .coupon .input { flex: 1; text-transform: uppercase; }
  .coupon-msg { font-size: var(--fs-xs); min-height: 1.2em; }
  .coupon-msg.ok { color: var(--success); } .coupon-msg.bad { color: var(--danger); }
  .coupon-hint { font-size: var(--fs-xs); color: var(--text-muted); }

  /* Marketplace toolbar */
  .mk-bar { position: sticky; inset-block-start: var(--header-h); z-index: 20; background: var(--sticky-bg); backdrop-filter: blur(10px); border-block-end: 1px solid var(--border); }
  .mk-bar__in { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; padding-block: var(--sp-3); }
  .mk-search { position: relative; flex: 1 1 240px; max-width: 380px; }
  .mk-search .icon { position: absolute; inset-inline-start: 12px; top: 50%; translate: 0 -50%; color: var(--text-muted); pointer-events: none; }
  .mk-search .input { padding-inline-start: 38px; }
  .chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
  .chip { padding: 7px 14px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); font-size: var(--fs-sm); font-weight: 500; color: var(--text); background: var(--surface); transition: all var(--dur-1); }
  .chip:hover { border-color: var(--accent); color: var(--accent-ink); }
  .chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
  .mk-empty { padding: var(--sp-12) 0; text-align: center; color: var(--text-muted); }
  .product.is-hidden, .section.is-empty { display: none; }
  .product .card__foot { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .product .card__foot .product__price { grid-column: 1 / -1; }
  .product .card__foot .btn { min-height: 42px; padding-inline: var(--sp-3); font-size: var(--fs-sm); }
  .product .card__foot .btn--block { width: 100%; }
  .btn.is-added { --_bg: var(--success); --_fg: #fff; --_bd: var(--success); }

  /* ------------------------------------------------------------------
     Interactive effects
     ------------------------------------------------------------------ */
  .hero { overflow: hidden; }
  .hero__fx { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: 0.9; }
  .hero__grid { position: relative; z-index: 1; }
  .hero h1 { text-wrap: balance; }
  .hero--home h1 { font-size: clamp(2.2rem, 1.4rem + 2.8vw, 3.5rem); max-width: 20ch; }
  .hero__copy > * { animation: hero-in 700ms var(--ease-out) both; }
  .hero__copy > :nth-child(2) { animation-delay: 80ms; } .hero__copy > :nth-child(3) { animation-delay: 160ms; } .hero__copy > :nth-child(4) { animation-delay: 240ms; }
  @keyframes hero-in { from { opacity: 0; transform: translateY(18px); } }
  .typed-caret::after { content: ""; display: inline-block; width: 3px; height: 0.9em; margin-inline-start: 4px; vertical-align: -0.08em; background: var(--harvest); animation: caret 1s steps(1) infinite; }
  @keyframes caret { 50% { opacity: 0; } }

  .card { position: relative; transition: border-color var(--dur-2), box-shadow var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out); }
  .card::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity var(--dur-3);
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--accent-tint-2), transparent 55%);
  }
  .card:hover::before { opacity: 1; }
  .card:hover { border-color: var(--border-strong); box-shadow: var(--sh-2); }
  .card > * { position: relative; }
  .product:hover { transform: translateY(-3px); }
  [data-tilt] { transform-style: preserve-3d; will-change: transform; }

  .btn { overflow: hidden; }
  .ripple { position: absolute; border-radius: 50%; pointer-events: none; background: rgb(255 255 255 / 0.35); transform: scale(0); animation: ripple 650ms ease-out forwards; }
  @keyframes ripple { to { transform: scale(1); opacity: 0; } }
  .fx-confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: calc(var(--z-toast) + 10); }

  .stat__value { font-family: var(--font-serif); font-variant-numeric: tabular-nums; }
  .toast { box-shadow: var(--sh-3); border: 1px solid var(--border-strong); }
  .toast-region { z-index: calc(var(--z-toast) + 5); }

  /* Page-level section rhythm bug-fixes */
  .section + .section--tight, .section--tight + .section { padding-block-start: var(--sp-6); }
  img { height: auto; } table { max-width: 100%; }
  .table-wrap, .table { overflow-x: auto; }
  main { min-width: 0; }
  .container { width: 100%; }
  :where(h1, h2, h3, p, li) { overflow-wrap: anywhere; }
  .lang__select { max-width: 7.5rem; }
  @media (max-width: 39.999rem) { .lang { display: none; } .tb .lang { display: inline-flex; } }

  /* ------------------------------------------------------------------
     CHATBOT
     ------------------------------------------------------------------ */
  .chat-fab {
    position: fixed; inset-inline-end: var(--sp-5); inset-block-end: var(--sp-5); z-index: var(--z-fab);
    display: inline-flex; align-items: center; gap: var(--sp-2); height: 54px; padding-inline: 18px 20px; border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--a-600), var(--a-800)); color: #fff; font-weight: 600; box-shadow: var(--sh-3);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2);
  }
  :root[data-theme="dark"] .chat-fab { background: linear-gradient(135deg, #2fae95, #0d6e5e); }
  .chat-fab:hover { transform: translateY(-2px) scale(1.03); }
  .chat-fab .icon { width: 1.4rem; height: 1.4rem; }
  .chat-fab__dot { position: absolute; inset-block-start: 8px; inset-inline-start: 12px; width: 10px; height: 10px; border-radius: 50%; background: var(--harvest); border: 2px solid var(--a-700); animation: pulse-dot 2s infinite; }
  .chat-fab.is-hidden { transform: scale(0.6); opacity: 0; pointer-events: none; }
  @media (max-width: 39.999rem) { .chat-fab span { display: none; } .chat-fab { width: 54px; padding: 0; justify-content: center; } .chat-fab__dot { inset-inline-start: auto; inset-inline-end: 10px; } }
  .chat-nudge {
    position: fixed; inset-inline-end: var(--sp-5); inset-block-end: 88px; z-index: var(--z-fab); max-width: 260px; padding: 12px 14px;
    border-radius: var(--r-lg) var(--r-lg) 4px var(--r-lg); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--sh-3); font-size: var(--fs-sm);
    animation: item-in 400ms var(--ease-out);
  }
  .chat-nudge button { position: absolute; inset-block-start: 2px; inset-inline-end: 4px; color: var(--text-muted); font-size: 18px; line-height: 1; padding: 4px; }

  .chat {
    position: fixed; inset-inline-end: var(--sp-5); inset-block-end: var(--sp-5); z-index: calc(var(--z-fab) + 5);
    width: min(420px, calc(100vw - 24px)); height: min(680px, calc(100dvh - 32px));
    display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl);
    background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--sh-3);
    transform-origin: bottom right; transform: scale(0.92) translateY(20px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform var(--dur-3) var(--ease-out), opacity var(--dur-2), visibility 0s linear var(--dur-3);
  }
  .chat.is-open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
  .chat.is-wide { width: min(760px, calc(100vw - 24px)); height: min(820px, calc(100dvh - 32px)); }
  @media (max-width: 39.999rem) { .chat { inset: 0; width: 100%; height: 100dvh; border-radius: 0; border: 0; } }
  .chat__head { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); color: #fff; background: linear-gradient(135deg, #0a5a4d, #08473d 60%, #06352e); }
  .chat__av { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgb(255 255 255 / 0.16); font-size: 20px; position: relative; }
  .chat__av::after { content: ""; position: absolute; inset-inline-end: -2px; inset-block-end: -2px; width: 11px; height: 11px; border-radius: 50%; background: #4ade80; border: 2px solid #08473d; }
  .chat__title { flex: 1; min-width: 0; line-height: 1.2; }
  .chat__title b { display: block; font-size: var(--fs-md); } .chat__title small { color: rgb(255 255 255 / 0.75); font-size: var(--fs-xs); }
  .chat__head .icon-btn { color: #fff; } .chat__head .icon-btn:hover { background: rgb(255 255 255 / 0.16); }
  .chat__tools { display: flex; align-items: center; gap: 8px; padding: 8px var(--sp-4); border-block-end: 1px solid var(--border); background: var(--surface-3); font-size: var(--fs-xs); color: var(--text-muted); }
  .chat__tools select { height: 30px; border: 1px solid var(--border-control); border-radius: var(--r-sm); background: var(--surface); color: var(--text); padding-inline: 8px; font-size: var(--fs-xs); max-width: 9.5rem; }
  .chat__tools .grow { flex: 1; }
  .chat__log { flex: 1; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); scroll-behavior: smooth; overscroll-behavior: contain; }
  .msg { max-width: 88%; display: flex; flex-direction: column; gap: 4px; animation: msg-in 280ms var(--ease-out); }
  @keyframes msg-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } }
  .msg--user { align-self: flex-end; align-items: flex-end; }
  .msg__b { padding: 10px 14px; border-radius: 18px; font-size: var(--fs-sm); line-height: 1.55; word-break: break-word; }
  .msg--bot .msg__b { background: var(--surface-2); color: var(--text); border-end-start-radius: 5px; }
  .msg--user .msg__b { background: var(--accent); color: var(--text-on-accent); border-end-end-radius: 5px; }
  .msg__b p { margin: 0; } .msg__b p + p, .msg__b ul + p, .msg__b p + ul, .msg__b ol + p, .msg__b p + ol { margin-block-start: 8px; }
  .msg__b ul, .msg__b ol { padding-inline-start: 1.2em; margin: 4px 0; } .msg__b li + li { margin-block-start: 2px; }
  .msg__b code { font-family: var(--font-mono); font-size: 0.85em; padding: 1px 5px; border-radius: 4px; background: rgb(0 0 0 / 0.12); }
  .msg__b pre { margin: 8px 0; padding: 10px; border-radius: var(--r-md); overflow-x: auto; background: var(--n-900); color: #d6f5e8; font-size: 0.8rem; }
  .msg__b pre code { background: none; padding: 0; color: inherit; }
  .msg__b a { color: var(--link); } .msg--user .msg__b a { color: inherit; }
  .msg__b h4 { font-size: var(--fs-sm); margin-block: 6px 2px; }
  .msg__act { display: flex; gap: 2px; opacity: 0; transition: opacity var(--dur-1); }
  .msg:hover .msg__act, .msg:focus-within .msg__act { opacity: 1; }
  @media (hover: none) { .msg__act { opacity: 1; } }
  .msg__act button { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--text-muted); }
  .msg__act button:hover { background: var(--surface-2); color: var(--accent); }
  .msg__act .icon { width: 1rem; height: 1rem; }
  .typing { display: inline-flex; gap: 4px; padding: 14px; }
  .typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); animation: typing 1.1s infinite ease-in-out; }
  .typing i:nth-child(2) { animation-delay: 0.15s; } .typing i:nth-child(3) { animation-delay: 0.3s; }
  @keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-5px); opacity: 1; } }
  .chat__sugg { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 var(--sp-4) var(--sp-3); }
  .chat__sugg button { padding: 7px 12px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); font-size: var(--fs-xs); font-weight: 500; color: var(--text); transition: all var(--dur-1); }
  .chat__sugg button:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-tint); transform: translateY(-1px); }
  .chat__form { display: flex; align-items: flex-end; gap: 8px; padding: var(--sp-3) var(--sp-4) var(--sp-4); border-block-start: 1px solid var(--border); background: var(--surface); }
  .chat__ta { flex: 1; min-height: 44px; max-height: 140px; resize: none; padding: 11px 14px; border-radius: 22px; border: 1px solid var(--border-control); background: var(--surface-3); color: var(--text); line-height: 1.4; }
  .chat__ta:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
  .chat__btn { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--text-muted); background: var(--surface-2); transition: all var(--dur-1); }
  .chat__btn:hover { color: var(--accent); }
  .chat__btn--send { background: var(--accent); color: var(--text-on-accent); }
  .chat__btn--send:hover { background: var(--accent-hover); color: var(--text-on-accent); transform: scale(1.06); }
  .chat__btn--send[disabled] { opacity: 0.45; transform: none; }
  .chat__btn.is-rec { background: var(--danger); color: #fff; animation: rec 1.2s infinite; }
  @keyframes rec { 50% { box-shadow: 0 0 0 8px rgb(220 38 38 / 0.18); } }
  .chat__foot { padding: 0 var(--sp-4) var(--sp-3); font-size: 0.6875rem; text-align: center; color: var(--text-muted); }

  /* ------------------------------------------------------------------
     PAYMENTS (more real)
     ------------------------------------------------------------------ */
  .picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .picker__body { align-items: flex-start; min-height: 64px; }
  .picker__sub { display: block; line-height: 1.3; }
  .picker__opt { min-width: 0; }
  .pm-panel-in { animation: item-in 260ms var(--ease-out); }
  .cc { perspective: 1000px; margin-block-end: var(--sp-5); }
  .cc__in { position: relative; width: 100%; max-width: 340px; aspect-ratio: 1.586; margin-inline: auto; transform-style: preserve-3d; transition: transform 700ms var(--ease-out); }
  .cc.is-flipped .cc__in { transform: rotateY(180deg); }
  .cc__f, .cc__b { position: absolute; inset: 0; border-radius: 18px; padding: 18px 20px; backface-visibility: hidden; color: #fff; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; box-shadow: var(--sh-3); }
  .cc__f { background: radial-gradient(120% 120% at 0% 0%, #1b8472, #0a3f37 55%, #0b1f1c); }
  .cc[data-brand="visa"] .cc__f { background: radial-gradient(120% 120% at 0% 0%, #2a4fd6, #14307f 60%, #0b1a45); }
  .cc[data-brand="mastercard"] .cc__f { background: radial-gradient(120% 120% at 0% 0%, #e0651f, #8e2f12 60%, #3a1208); }
  .cc[data-brand="rupay"] .cc__f { background: radial-gradient(120% 120% at 0% 0%, #1f9d5f, #0d5a37 60%, #072b1b); }
  .cc[data-brand="amex"] .cc__f { background: radial-gradient(120% 120% at 0% 0%, #2f9bd0, #145b83 60%, #0a2c40); }
  .cc__f::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 0.16) 48%, transparent 62%); transform: translateX(-100%); animation: sheen 5s ease-in-out infinite; }
  @keyframes sheen { 60%, 100% { transform: translateX(100%); } }
  .cc__b { transform: rotateY(180deg); background: linear-gradient(160deg, #1d2b27, #0b1412); padding-inline: 0; }
  .cc__top { display: flex; justify-content: space-between; align-items: center; }
  .cc__chip { width: 40px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #f3d98b, #b98f2c); }
  .cc__brand { font-weight: 800; font-style: italic; letter-spacing: 0.04em; font-size: 1.1rem; }
  .cc__num { font: 600 1.25rem/1 var(--font-mono); letter-spacing: 0.08em; text-shadow: 0 1px 2px rgb(0 0 0 / 0.35); }
  .cc__row { display: flex; justify-content: space-between; gap: 12px; font-size: 0.75rem; }
  .cc__row small { display: block; opacity: 0.65; font-size: 0.625rem; letter-spacing: 0.06em; }
  .cc__row b { font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; display: block; }
  .cc__stripe { height: 40px; background: #000; margin-block-start: 8px; }
  .cc__sig { margin: 0 20px; padding: 8px 12px; background: #f4f4f0; color: #111; text-align: end; font: 700 0.95rem var(--font-mono); border-radius: 4px; letter-spacing: 0.1em; min-height: 34px; }
  .cc__note { padding-inline: 20px; font-size: 0.625rem; opacity: 0.6; }

  .apps { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-end: var(--sp-3); }
  .app-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); text-decoration: none; transition: all var(--dur-1); }
  .app-chip:hover { border-color: var(--accent); background: var(--accent-tint); transform: translateY(-1px); text-decoration: none; color: var(--text-strong); }
  .app-chip i { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 0.7rem var(--font-sans); color: #fff; font-style: normal; }
  .handles { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 8px; }
  .handles button { padding: 4px 10px; border-radius: var(--r-pill); background: var(--surface-2); font-size: var(--fs-xs); color: var(--text); font-weight: 600; }
  .handles button:hover { background: var(--accent-tint-2); color: var(--accent-ink); }
  .vpa-verify { margin-block-start: 8px; font-size: var(--fs-sm); display: flex; align-items: center; gap: 8px; min-height: 1.4em; }
  .vpa-verify.ok { color: var(--success); font-weight: 600; } .vpa-verify.bad { color: var(--danger); }

  .bank-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--sp-2); margin-block-end: var(--sp-3); }
  .bank { position: relative; }
  .bank input, .wallet input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
  .bank__b, .wallet__b { display: flex; align-items: center; gap: 10px; padding: 12px; min-height: 56px; border: 1px solid var(--border-control); border-radius: var(--r-md); background: var(--surface); font-size: var(--fs-sm); font-weight: 600; color: var(--text-strong); transition: all var(--dur-1); }
  .bank:hover .bank__b, .wallet:hover .wallet__b { border-color: var(--border-hover); }
  .bank input:checked + .bank__b, .wallet input:checked + .wallet__b { border-color: var(--accent); background: var(--accent-tint); box-shadow: 0 0 0 1px var(--accent); }
  .bank input:focus-visible + .bank__b, .wallet input:focus-visible + .wallet__b { outline: 2px solid var(--accent); outline-offset: 2px; }
  .bank__b i, .wallet__b i { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: #fff; font: 800 0.7rem var(--font-sans); font-style: normal; flex: none; }
  .wallet-list { display: grid; gap: var(--sp-2); }
  .wallet__b small { margin-inline-start: auto; color: var(--text-muted); font-weight: 500; }
  .wallet { position: relative; }

  .gst-note { font-size: var(--fs-xs); color: var(--text-muted); margin-block-start: var(--sp-2); }
  .pin-hint { margin-block-start: 6px; font-size: var(--fs-xs); color: var(--success); font-weight: 600; min-height: 1.2em; }
  .summary .coupon-box { margin-block: var(--sp-4); padding-block: var(--sp-4); border-block: 1px dashed var(--border-strong); display: grid; gap: 8px; }
  .summary__line--off dd, .summary__line--off dt { color: var(--success); }

  /* Auth / processing states inside the result dialog */
  .proc { display: grid; gap: var(--sp-4); justify-items: center; text-align: center; width: 100%; }
  .proc-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; width: min(300px, 100%); text-align: start; }
  .proc-steps li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--text-muted); transition: color var(--dur-2); }
  .proc-steps li + li { margin: 0; }
  .proc-steps li::before { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); flex: none; transition: all var(--dur-2); }
  .proc-steps li.is-active { color: var(--text-strong); font-weight: 600; }
  .proc-steps li.is-active::before { border-color: var(--accent); border-top-color: transparent; animation: spin 0.8s linear infinite; }
  .proc-steps li.is-done { color: var(--text); }
  .proc-steps li.is-done::before { border-color: var(--success); background: var(--success) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center/70% no-repeat; }
  @keyframes spin { to { transform: rotate(360deg); } }
  .bank-logo { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: #fff; font: 800 1.1rem var(--font-sans); box-shadow: var(--sh-2); }
  .otp-box { display: flex; gap: 8px; justify-content: center; }
  .otp-box input { width: 44px; height: 54px; text-align: center; font: 700 1.4rem var(--font-mono); border-radius: var(--r-md); border: 1.5px solid var(--border-control); background: var(--surface); color: var(--text-strong); }
  .otp-box input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 4px var(--ring); }
  .otp-box.is-bad input { border-color: var(--danger); animation: shake 380ms; }
  @keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
  .otp-msg { min-height: 1.3em; font-size: var(--fs-sm); color: var(--danger); }
  .timer-ring { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-ink); }
  .upi-wait__phone { width: 74px; height: 118px; border-radius: 18px; border: 3px solid var(--text-strong); position: relative; display: grid; place-items: center; animation: buzz 1.6s infinite; }
  .upi-wait__phone::after { content: ""; position: absolute; inset-block-start: 6px; width: 22px; height: 4px; border-radius: 4px; background: var(--text-strong); }
  .upi-wait__phone .icon { width: 2rem; height: 2rem; color: var(--accent); }
  @keyframes buzz { 0%, 70%, 100% { transform: none; } 74% { transform: rotate(-4deg); } 80% { transform: rotate(4deg); } 86% { transform: rotate(-3deg); } 92% { transform: rotate(3deg); } }
  .state__icon--success svg path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw 520ms 160ms var(--ease-out) forwards; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  .state__icon--success { animation: pop 520ms cubic-bezier(.3,1.5,.5,1); }
  @keyframes pop { from { transform: scale(0.4); opacity: 0; } }

  .receipt { width: 100%; text-align: start; border: 1px dashed var(--border-strong); border-radius: var(--r-lg); padding: var(--sp-4); background: var(--surface-3); font-size: var(--fs-sm); display: grid; gap: 6px; }
  .receipt > div { display: flex; justify-content: space-between; gap: var(--sp-3); }
  .receipt dt { color: var(--text-muted); } .receipt dd { margin: 0; font-weight: 600; color: var(--text-strong); text-align: end; word-break: break-all; }
  .receipt hr { margin: 4px 0; border-block-start-style: dashed; }
  .receipt__total dd, .receipt__total dt { font-size: var(--fs-md); color: var(--text-strong); }
  .state__row { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }

  @media print {
    body > *:not(.print-receipt) { display: none !important; }
    .print-receipt { display: block !important; padding: 24px; color: #000; background: #fff; font-family: var(--font-sans); }
  }
  .print-receipt { display: none; }

  @media (prefers-reduced-motion: reduce) {
    .hero__copy > *, .cc__f::after { animation: none; }
    .hero__fx { display: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  }

  @media (max-width: 47.999rem) { body:has(.pay-bar) .chat-fab, body:has(.pay-bar) .to-top { inset-block-end: calc(var(--sp-5) + 64px); } body:has(.pay-bar) .to-top { inset-block-end: calc(var(--sp-5) + 128px); } }
}

@layer shell {
  @media (min-width: 64rem) {
    html.sb-pending body { padding-inline-start: var(--sidebar-w); }
  }
  .product .card__foot > * { margin: 0; }
  .sidebar { view-transition-name: sidebar; }
  .site-header { view-transition-name: site-header; }
  .site-header__inner > .crumbs + .tb { margin-inline-start: auto; }
}
/* Theme-switch circular reveal (unlayered on purpose: must beat the page-navigation fade above) */
html.theme-vt::view-transition-old(root), html.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-vt::view-transition-old(root) { z-index: 1; }
html.theme-vt::view-transition-new(root) { z-index: 2; }
@media print {
  :root, :root[data-theme="dark"] { color-scheme: light; --bg:#fff; --surface:#fff; --text:#111; --text-strong:#000; }
  .sidebar, .site-header, .chat, .chat-fab, .to-top, .scroll-progress, .site-footer { display: none !important; }
  html.has-sidebar body { padding: 0 !important; }
}