/* =====================================================================
   CropWater child theme — design tokens + component styles
   ---------------------------------------------------------------------
   1. Brand tokens (aliased to Total palette)   7. Screenshot frames
   2. Dark-mode tie-ins               8. Header
   3. Hero                            9. Footer (builder page)
   4. Section bands                  10. Grids (responsive fix)
   5. Type helpers                   11. AX Contact Form
   6. Steps / checklists             12. Divisi refinement layer
                                     13. Style-guide specimens
                                     14. DS type-scale enforcement
   Tokens alias Total's Color Palette vars — the palette posts are the single
   source of truth for light AND dark values (color_dark meta), per the
   Total Dark Mode doc. WPBakery-first: flat band colors ride on rows via
   wpex_bg_color; only gradients (no row param) live here as the fallback.
   ===================================================================== */

/* ---------- 0. Typeface ----------
   Nunito Sans, self-hosted variable font (brief §8: app and site share the
   typeface). One file covers weights 200–1000; loaded from the child theme
   so the site works offline. */
@font-face {
  font-family: 'Nunito Sans';
  src: url('../assets/fonts/NunitoSans-VariableFont.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* ---------- 1. Brand tokens — aliased to Total's Color Palette ----------
   Single source of truth = Theme Panel palette posts (wpex_color_palette).
   Dark values live on each palette post's `color_dark` meta, and Total emits
   the .wpex-dark-mode overrides itself (see totalwptheme.com/docs/dark-mode).
   Nothing about dark mode is hard-coded here. */
:root {
  --brand-ink: var(--wpex-ink-color);
  --brand-primary: var(--wpex-primary-color);
  --brand-primary-dark: var(--wpex-primary-dark-color);
  --brand-accent: var(--wpex-accent-color);
  --brand-on-accent: var(--wpex-on-accent-color);
  --brand-surface: var(--wpex-surface-color);
  --brand-surface-alt: var(--wpex-surface-alt-color);
  --brand-tint: var(--wpex-tint-color);
  --brand-muted: var(--wpex-muted-color);
  --brand-deep: #1e3a8a;   /* constant by design: always-dark blue bands */
  --brand-deep-darker: #16306b;  /* final-band gradient end (deep shaded once) */

  /* Channel lists for the two colours the site tints with. Every rgba() below
     composes from these, so a palette change re-tints the whole site and dark
     mode re-tints by overriding one line (§2). */
  --brand-primary-rgb: 49, 109, 247;
  --brand-on-deep-rgb: 255, 255, 255;

  /* Text on the always-blue bands (hero/final/footer). White plus the DS's two
     softened steps — the only place text is not ink/muted. */
  --brand-on-deep: rgb(var(--brand-on-deep-rgb));
  --brand-on-deep-soft: #dbe7ff;   /* body copy on blue */
  --brand-on-deep-muted: #c9d9f8;  /* eyebrows, taglines, footer links */
  --brand-on-deep-fine: #a9bde4;   /* small print */

  /* Composed tints (one definition each, referenced everywhere) */
  /* Neutral, not blue-tinted — "modern retro" per Divisi: a crisp outline at
     rest, brand colour saved for the hard-offset shadow on hover (below). */
  --brand-card-border: rgba(0, 0, 0, .14);
  --brand-card-hover-shadow: 5px 5px 0 rgba(var(--brand-primary-rgb), .22);
  --brand-frame-border: rgba(var(--brand-primary-rgb), .18);
  --brand-frame-shadow: 8px 8px 0 rgba(var(--brand-primary-rgb), .10);
  --brand-frame-shadow-sm: 5px 5px 0 rgba(var(--brand-primary-rgb), .10);
  --brand-focus-ring: 0 0 0 3px rgba(var(--brand-primary-rgb), .25);
  --brand-hairline-onblue: rgba(var(--brand-on-deep-rgb), .15);
  --brand-fill-onblue: rgba(var(--brand-on-deep-rgb), .12);
  --brand-fill-onblue-strong: rgba(var(--brand-on-deep-rgb), .14);
  --brand-border-onblue: rgba(var(--brand-on-deep-rgb), .22);

  --brand-radius: var(--ds-radius-md);  /* DS default 12px — site chrome + AX form */
  --brand-section-y: 64px;

  /* ---- CropWater Design System (app) tokens ----
     Source: the CropWater Design System bundle (tokens/*.css, components/).
     Colours live in the palette CPT (ink #1a202c, muted #718096, surfaces
     #ffffff/#f1f3f7, tint #e8f4ff, primary #316df7/#1e3a8a/#2d99ff, success
     #10b981, error #ef4444, warning #f59e0b) — aliased below; DS literals
     only where the DS itself ships literals. */
  --brand-primary-hover: var(--wpex-primary-hover-color);
  --brand-success: var(--wpex-success-color);
  --brand-error: var(--wpex-error-color);
  --brand-warning: var(--wpex-warning-color);
  --brand-hairline: var(--wpex-border-color);        /* DS --color-border, palette post 93 */
  --brand-text: var(--wpex-text-primary-color);      /* DS --color-text-primary, post 94 */
  --brand-text-secondary: var(--wpex-text-secondary-color); /* DS --color-text-secondary, post 95 */
  --brand-gradient-primary: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%); /* DS signature fill */
  --brand-gradient-deep: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand-deep-darker) 100%); /* final band */
  --brand-gradient-motion: linear-gradient(135deg, #1e3c72 0%, #2a5298 25%, #16a085 50%, #27ae60 75%, #2ecc71 100%); /* DS motion-demo gradient — hero background */
  --brand-gradient-shimmer: linear-gradient(90deg, transparent, rgba(var(--brand-on-deep-rgb), .2), transparent);
  --brand-lift-primary: 0 12px 24px rgba(var(--brand-primary-rgb), .3);   /* DS --shadow-lift-primary */
  --brand-press-primary: 0 6px 12px rgba(var(--brand-primary-rgb), .3);   /* DS --shadow-press-primary */
  --brand-ease: cubic-bezier(.25, .46, .45, .94);             /* DS --ease-standard */
  --brand-dur: .3s;                                           /* DS --duration-base */
  --brand-dur-slow: .4s;                                      /* DS --duration-slow */

  /* DS foundations (tokens/radius.css, tokens/shadows.css, tokens/typography.css) */
  --ds-radius-sm: 8px;    /* inputs, toasts */
  --ds-radius-md: 12px;   /* the default: buttons, cards, panels */
  --ds-radius-lg: 16px;   /* dialogs */
  --ds-radius-xl: 20px;   /* feature cards */
  --ds-radius-pill: 999px;
  --ds-radius-nav: 11px;  /* sidebar rows (shipped off-scale) */
  --ds-radius-tag: 25px;  /* crop/field pills (shipped off-scale) */
  --ds-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);
  --ds-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);
  --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
  --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
  --ds-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
  --ds-shadow-hover: 3px 3px 10px rgba(0, 0, 0, .082);
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;
  --ds-weight-black: 800; /* marketing hero title only */

  /* DS type scale — the seven steps the style guide specimens declare
     (/style-guide/ → "Type scale"). Every heading, lede, eyebrow and caption
     on the site now sizes from these, so the scale has one definition. */
  --ds-text-display: clamp(2.5rem, 6vw, 4rem);
  --ds-text-h2: clamp(1.75rem, 3vw, 2.25rem);
  --ds-text-h3: 1.375rem;
  --ds-text-lede: 1.25rem;
  --ds-text-body: 1.0625rem;
  --ds-text-small: 0.875rem;
  --ds-text-eyebrow: 0.75rem;
  --ds-lh-heading: 1.2;
  --ds-lh-body: 1.7;
  --ds-ls-eyebrow: 1px;   /* DS eyebrow tracking */
  --ds-ls-heading: -0.01em;
}

/* ---------- 2. Dark-mode tie-ins ----------
   The palette vars flip automatically (Total). Only the decorative
   shadows/borders need a dark variant, and Total's own scheme colors are
   chained to the palette vars so the palette stays the single source. */
.wpex-dark-mode {
  /* Re-tint everything composed from the channel lists in one place. */
  --brand-primary-rgb: 107, 154, 255;   /* dark primary #6b9aff */
  --brand-card-border: rgba(var(--brand-on-deep-rgb), .11);
  --brand-card-hover-shadow: 5px 5px 0 rgba(var(--brand-primary-rgb), .30);
  --brand-frame-border: rgba(var(--brand-on-deep-rgb), .11);
  /* DS dark shadows get heavier, not lighter (tokens/shadows.css) */
  --ds-shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .3);
  --ds-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .4), 0 1px 2px 0 rgba(0, 0, 0, .3);
  --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .5), 0 2px 4px -1px rgba(0, 0, 0, .4);
  --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .6), 0 4px 6px -2px rgba(0, 0, 0, .5);
  --ds-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .7), 0 10px 10px -5px rgba(0, 0, 0, .6);
  --ds-shadow-hover: 3px 3px 15px rgba(0, 0, 0, .4);
  --wpex-accent: var(--wpex-accent-color);
  --wpex-accent-alt: var(--wpex-accent-color);
  --wpex-on-accent: var(--wpex-on-accent-color);
  --wpex-on-accent-alt: var(--wpex-on-accent-color);
  --wpex-link-color: var(--wpex-accent-color);
  --wpex-hover-link-color: var(--wpex-primary-hover-color);
  --wpex-heading-color: var(--wpex-ink-color);
  --wpex-hover-heading-link-color: var(--wpex-primary-hover-color);
}
/* Bands that are brand-blue in both modes: pin the blue family to its light
   values inside them (the palette's dark blues are too pale to carry white
   text) and keep the on-blue text steps. Everything else in the band still
   composes from tokens, so the gradient, contour rings, pills and CTAs all
   follow from these four lines. */
.wpex-dark-mode .cw-hero,
.wpex-dark-mode .cw-final {
  --brand-primary-rgb: 49, 109, 247;
  --brand-primary: #316df7;             /* DS --color-primary, light value */
  --brand-primary-dark: var(--brand-deep);
  /* A custom property's own var()s are substituted where it is declared, so
     the gradients have to be restated here to pick up the two lines above. */
  --brand-gradient-primary: linear-gradient(135deg, #316df7 0%, var(--brand-deep) 100%);
  --brand-lift-primary: 0 12px 24px rgba(49, 109, 247, .3);
  --brand-press-primary: 0 6px 12px rgba(49, 109, 247, .3);
  --brand-on-accent: var(--brand-on-deep);
  --brand-surface: var(--brand-on-deep);
  --brand-muted: var(--brand-on-deep-soft);
}

/* ---------- 3. Hero ---------- */
.cw-hero {
  background: var(--brand-gradient-motion);
  padding: calc(var(--brand-section-y) + 24px) 0 var(--brand-section-y);
  text-align: center;
  position: relative;
  z-index: 0; /* own stacking context — contains .cw-contours' negative z-index */
}
/* Signature: field contours (Divisi's own name for its one hero graphic —
   an animated line-drawing of a field boundary). Homepage hero only, and
   quiet: low opacity, draws in once, hidden below tablet, off under
   prefers-reduced-motion. Colour comes from the on-blue token set already
   used for hero text, so it's consistent in light and dark without a
   separate hard-coded value. */
.cw-contours {
  position: absolute;
  right: 3%;
  bottom: 2%;
  width: 220px;
  height: auto;
  opacity: .5;
  z-index: -1;
  color: var(--brand-on-deep-fine);
  pointer-events: none;
}
.cw-contour {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: cw-contour-draw 2.6s cubic-bezier(.45, 0, .2, 1) forwards;
}
.cw-contour--2 { animation-delay: .15s; opacity: .9; }
.cw-contour--3 { animation-delay: .3s; opacity: .75; }
.cw-contour--4 { animation-delay: .45s; opacity: .6; }
.cw-contour-pin {
  fill: currentColor;
  opacity: 0;
  animation: cw-pin-fade .5s ease forwards;
  animation-delay: 2.4s;
}
.cw-contour-pin--2 { animation-delay: 2.7s; }
@keyframes cw-contour-draw { to { stroke-dashoffset: 0; } }
@keyframes cw-pin-fade { to { opacity: .9; } }
@media (max-width: 767px) {
  .cw-contours { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cw-contour { animation: none; stroke-dashoffset: 0; }
  .cw-contour-pin { animation: none; opacity: .45; }
}
.cw-hero .cw-sub {
  color: var(--brand-on-deep-soft);
  font-size: var(--ds-text-lede);
  font-weight: var(--ds-weight-regular);
}
.cw-hero--sub { padding: calc(var(--brand-section-y) * .6) 0 var(--brand-section-y); }
.cw-btnrow {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 8px;
}

/* ---------- 4. Section bands ----------
   Band backgrounds (surface-alt / tint) ride WPBakery row params
   (wpex_bg_color="<palette-slug>") resolved through Total's color map —
   see functions.php. Only the rhythm lives here now. */
.cw-band { padding: var(--brand-section-y) 0; }

/* ---------- 5. Type helpers ---------- */
.cw-eyebrow {
  color: var(--brand-muted);
  font-size: var(--ds-text-eyebrow);
  font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-ls-eyebrow);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.cw-eyebrow--onblue { color: var(--brand-on-deep-muted); }
.cw-lede { font-size: var(--ds-text-lede); line-height: 1.5; font-weight: var(--ds-weight-regular); }

/* ---------- 6. Steps / checklists ---------- */
.cw-step-num {
  width: 44px; height: 44px; border-radius: var(--ds-radius-pill);
  background: var(--brand-primary); color: var(--brand-on-accent);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--ds-weight-black); font-size: var(--ds-text-body); margin-bottom: 18px;
}
.cw-check { list-style: none; padding: 0; margin: 0; }
.cw-check li { padding-left: 30px; position: relative; margin-bottom: 12px; }
.cw-check li::before {
  content: '\2713'; position: absolute; left: 0; top: 0;
  color: var(--brand-primary); font-weight: var(--ds-weight-black);
}

/* ---------- 7. Screenshot frames ---------- */
.cw-frame {
  background: var(--brand-tint); border: 1px solid var(--brand-frame-border);
  border-radius: var(--brand-radius); padding: 48px 24px; text-align: center;
  color: var(--brand-muted);
}
.cw-shot {
  position: relative;
  margin: 0; background: var(--brand-surface); border: 1px solid var(--brand-frame-border);
  border-radius: var(--ds-radius-md); padding: 12px; box-shadow: var(--ds-shadow-lg);
}
/* Soft bloom behind the dashboard screenshot — Divisi's slow pulsing glow
   behind its chart stack, in brand blue. Bleeds outside the frame since
   .cw-shot isn't clipped; sits behind the frame via negative z-index. */
.cw-shot::before {
  content: '';
  position: absolute;
  inset: -14% -8%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(var(--brand-primary-rgb), .16) 0%, rgba(var(--brand-primary-rgb), .05) 45%, transparent 72%);
  filter: blur(24px);
  animation: cw-bloom 19s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cw-bloom {
  0%, 100% { transform: scale(1); opacity: .85; }
  50% { transform: scale(1.08); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cw-shot::before { animation: none; }
}
.cw-shot img { display: block; width: 100%; height: auto; border-radius: var(--ds-radius-sm); }
.cw-shot figcaption {
  font-size: var(--ds-text-small); color: var(--brand-muted); text-align: center; padding: 10px 8px 4px;
  font-weight: var(--ds-weight-medium);
}

/* ---------- 7b. Photo bands (real-world photography, not app UI) ---------- */
.cw-photo-band { padding-top: calc(var(--brand-section-y) * .5); padding-bottom: calc(var(--brand-section-y) * .5); }

/* FAQ accordion — vcex_toggle_group's own max_width param doesn't auto-center */
.cw-faq-accordion { margin-left: auto; margin-right: auto; }
.cw-photo {
  margin: 0; overflow: hidden; border-radius: var(--brand-radius);
  border: 1px solid var(--brand-frame-border); box-shadow: var(--ds-shadow-lg);
  height: 420px;
  background-position: center; background-repeat: no-repeat; background-size: cover;
  background-attachment: fixed; /* parallax feel — disabled on mobile below, iOS/Android don't support it */
}
.cw-photo figcaption {
  font-size: var(--ds-text-small); color: var(--brand-muted); text-align: center; padding: 10px 8px 0;
  font-weight: var(--ds-weight-medium);
}
@media (max-width: 767px) {
  .cw-photo { height: 280px; background-attachment: scroll; }
}

/* ---------- 8. Header — compact brand bar ---------- */
#site-header { border-bottom: 1px solid var(--brand-card-border); }
.wpex-dark-mode #site-header { border-bottom-color: var(--brand-fill-onblue); }
#site-logo img { height: 34px; width: auto; }
#site-navigation .menu > li.menu-item > a { font-weight: var(--ds-weight-bold); font-size: var(--ds-text-small); }
#site-navigation .cw-menu-cta > a .link-inner {
  display: inline-block; background: var(--brand-accent); color: var(--brand-on-accent);
  padding: 9px 18px; border-radius: var(--brand-radius);
  transition: background var(--brand-dur) var(--brand-ease);
}
#site-navigation .cw-menu-signin > a .link-inner { font-weight: var(--ds-weight-bold); }

/* ---------- 9. Footer (Total footer-builder page) ---------- */
#footer-builder { background: var(--brand-deep); }
.cw-footer-main { padding-top: 56px !important; padding-bottom: 28px !important; }
.cw-footer-main .wpb_wrapper > :last-child { margin-bottom: 0; }
.cw-footer-logo img { height: 30px; width: auto; }
.cw-footer-tagline { color: var(--brand-on-deep-muted); font-size: var(--ds-text-small); margin-top: 14px; max-width: 300px; }
.cw-footer-h { color: var(--brand-on-deep); font-size: var(--ds-text-body); font-weight: var(--ds-weight-black); margin: 0 0 14px; }
.cw-footer-links { list-style: none; margin: 0; padding: 0; }
.cw-footer-links li { margin-bottom: 9px; }
.cw-footer-links a { color: var(--brand-on-deep-muted); text-decoration: none; transition: color var(--brand-dur) var(--brand-ease); }
.cw-footer-links a:hover { color: var(--brand-on-deep); text-decoration: underline; }
.cw-footer-note { padding-top: 10px !important; }
/* Legal row sits above the fine print — horizontal, same fine-print scale */
.cw-footer-legal {
  display: flex; gap: 20px; flex-wrap: wrap; list-style: none; margin: 0 0 14px; padding: 0;
}
.cw-footer-legal li { margin-bottom: 0; }
.cw-footer-legal a { color: var(--brand-on-deep-fine); font-size: var(--ds-text-eyebrow); }
.cw-footer-legal a:hover { color: var(--brand-on-deep); }
.cw-footer-fine {
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--brand-hairline-onblue); margin: 0; padding-top: 20px;
  color: var(--brand-on-deep-fine); font-size: var(--ds-text-eyebrow);
}

/* ---------- 10. Grids (responsive fix) ----------
   vcex icon-box/step grids set base columns with unscoped wpex-grid-cols-N
   classes; the responsive variants only kick in at >=768px. Below 640px
   force one column (two columns through the small-tablet gap) using
   Total's own grid variable. */
@media (max-width: 639px) {
  .vcex-grid-container[class*="wpex-grid-cols-"] { --wpex-grid-columns: 1 !important; }
}
@media (min-width: 640px) and (max-width: 767px) {
  .vcex-grid-container[class*="wpex-grid-cols-"] { --wpex-grid-columns: 2 !important; }
}

/* ---------- 11. AX Contact Form — align with brand ---------- */
.ax-contact-form__wrap { font-family: 'Nunito Sans', sans-serif; }
.ax-contact-form__wrap--card { border-radius: var(--brand-radius); border-color: var(--brand-frame-border); }
.ax-contact-form__wrap--card input[type="text"], .ax-contact-form__wrap--card input[type="email"],
.ax-contact-form__wrap--card input[type="tel"], .ax-contact-form__wrap--card select,
.ax-contact-form__wrap--card textarea { border-radius: var(--ds-radius-sm); }
.ax-contact-form__submit { background: var(--brand-gradient-primary) !important; border-radius: var(--brand-radius) !important; transition: transform var(--brand-dur) var(--brand-ease), box-shadow var(--brand-dur) var(--brand-ease); }
.ax-contact-form__submit:hover { background: var(--brand-gradient-primary) !important; transform: translateY(-2px); box-shadow: var(--brand-lift-primary) !important; }
/* Dark mode: card, fields and labels follow the dark palette */
.wpex-dark-mode .ax-contact-form__wrap--card {
  background: var(--brand-surface-alt); border-color: rgba(var(--brand-primary-rgb), .25);
}
.wpex-dark-mode .ax-contact-form__wrap--card input[type="text"],
.wpex-dark-mode .ax-contact-form__wrap--card input[type="email"],
.wpex-dark-mode .ax-contact-form__wrap--card input[type="tel"],
.wpex-dark-mode .ax-contact-form__wrap--card select,
.wpex-dark-mode .ax-contact-form__wrap--card textarea {
  background: var(--brand-surface); color: var(--brand-ink);
  border-color: rgba(var(--brand-on-deep-rgb), .16);
}
.wpex-dark-mode .ax-contact-form__wrap--card label,
.wpex-dark-mode .ax-contact-form__wrap--card .ax-contact-form__label { color: var(--brand-ink); }

/* ---------- 12. Divisi-style refinement layer ----------
   Reference: divisi.africa — pale tag pills, cards with hard-offset
   hover shadows, contour rings + radial blooms on hero bands, CTAs that
   brighten (not darken) on hover, and arrow links after each section.
   Translated to the CropWater blue palette. */

/* Tag-pill eyebrows (styles the heading's inner span to keep centering) */
.cw-eyebrow .vcex-heading-inner {
  display: inline-block;
  background: var(--brand-tint);
  color: var(--brand-primary-dark);
  padding: .34rem .95rem;
  border-radius: var(--ds-radius-tag);
  border: 1px solid var(--brand-card-border);
  letter-spacing: var(--ds-ls-eyebrow);
  font-size: var(--ds-text-eyebrow);
}
.cw-eyebrow--onblue .vcex-heading-inner {
  background: var(--brand-fill-onblue-strong);
  border-color: var(--brand-border-onblue);
  color: var(--brand-on-deep-soft);
}

/* Contour rings + radial blooms on the blue/motion bands (Divisi's signature) */
.cw-hero, .cw-final {
  overflow: hidden;
}
.cw-hero {
  background:
    repeating-radial-gradient(circle at 86% 18%, rgba(var(--brand-on-deep-rgb), .05) 0 1.5px, transparent 1.5px 58px),
    radial-gradient(circle at 86% 18%, rgba(var(--brand-on-deep-rgb), .11), transparent 44%),
    radial-gradient(circle at 8% 96%, rgba(var(--brand-on-deep-rgb), .07), transparent 46%),
    var(--brand-gradient-motion);
  /* only the motion layer (last) is oversized/animated — the ring layers
     stay auto so they still cover the box at their authored positions */
  background-size: auto, auto, auto, 400% 400%;
  animation: cwsg-gradient-shift 15s ease infinite;
}
.cw-final {
  background:
    repeating-radial-gradient(circle at 12% 14%, rgba(var(--brand-on-deep-rgb), .05) 0 1.5px, transparent 1.5px 58px),
    radial-gradient(circle at 12% 14%, rgba(var(--brand-on-deep-rgb), .09), transparent 42%),
    radial-gradient(circle at 92% 92%, rgba(var(--brand-primary-rgb), .35), transparent 48%),
    var(--brand-gradient-deep);
}

/* Cards: border + hard-offset shadow that lifts on hover */
.vcex-icon-box {
  border: 1px solid var(--brand-card-border) !important;
  border-radius: var(--brand-radius);
  transition: transform var(--brand-dur) var(--brand-ease), box-shadow var(--brand-dur) var(--brand-ease);
}
.vcex-icon-box:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--brand-card-hover-shadow);
}
.cw-steps .vcex-grid-container .wpb_text_column {
  background: var(--brand-surface);
  border: 1px solid var(--brand-card-border);
  border-radius: var(--brand-radius);
  padding: 28px 26px 22px;
  transition: transform var(--brand-dur) var(--brand-ease), box-shadow var(--brand-dur) var(--brand-ease);
}
.cw-steps .vcex-grid-container .wpb_text_column:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--brand-card-hover-shadow);
}

/* Screenshot frames: hard-offset shadow instead of soft */
.cw-shot {
  border: 1.5px solid var(--brand-card-border);
  box-shadow: var(--brand-frame-shadow);
}
.cw-frame {
  border: 1.5px solid var(--brand-card-border);
  box-shadow: var(--brand-frame-shadow);
}

/* Band CTAs: the DS signature button — 135° gradient fill, shimmer sweep on
   hover, lift on hover / half-shadow press. Out-specifies the inline
   vcex_button styles printed in page markup. */
.cw-band .vcex-flex-container .vcex-button,
.cw-hero .vcex-flex-container .vcex-button {
  background: var(--brand-gradient-primary) !important;
  position: relative;
  overflow: hidden;
  transition: transform var(--brand-dur) var(--brand-ease), box-shadow var(--brand-dur) var(--brand-ease);
}
.cw-band .vcex-flex-container .vcex-button::after,
.cw-hero .vcex-flex-container .vcex-button::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: var(--brand-gradient-shimmer);
  transition: left .5s ease;
  pointer-events: none;
}
.cw-band .vcex-flex-container .vcex-button:hover,
.cw-hero .vcex-flex-container .vcex-button:hover {
  background: var(--brand-gradient-primary) !important;
  transform: translateY(-3px);
  box-shadow: var(--brand-lift-primary) !important;
}
.cw-band .vcex-flex-container .vcex-button:hover::after,
.cw-hero .vcex-flex-container .vcex-button:hover::after { left: 100%; }
.cw-band .vcex-flex-container .vcex-button:active,
.cw-hero .vcex-flex-container .vcex-button:active {
  transform: translateY(-1px);
  box-shadow: var(--brand-press-primary) !important;
}
.wpex-dark-mode .cw-band .vcex-flex-container .vcex-button,
.wpex-dark-mode .cw-hero .vcex-flex-container .vcex-button {
  background: var(--brand-gradient-primary) !important;
}
#site-navigation .cw-menu-cta > a .link-inner {
  background: var(--brand-gradient-primary);
}
#site-navigation .cw-menu-cta:hover > a .link-inner {
  background: var(--brand-gradient-primary);
  transform: translateY(-1px);
  box-shadow: var(--brand-press-primary);
}

/* Trust pills (product facts under hero / final CTAs) */
.cw-pills {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; margin: 26px auto 0; max-width: 720px;
}
.cw-pill {
  display: inline-block;
  padding: .32rem .9rem;
  border-radius: var(--ds-radius-tag);
  font-size: var(--ds-text-eyebrow);
  font-weight: var(--ds-weight-bold);
  background: var(--brand-tint);
  color: var(--brand-primary-dark);
  border: 1px solid var(--brand-card-border);
}
.cw-pills--final .cw-pill {
  background: var(--brand-fill-onblue);
  color: var(--brand-on-deep-soft);
  border-color: var(--brand-border-onblue);
}
/* Divisi's stat-pill dot — currentColor, so it matches whichever pill
   variant (on-white or on-blue) it's dropped into with no extra token. */
.cw-pill-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; margin-right: 6px; vertical-align: middle;
}

/* Arrow links after each pillar (Divisi "See X →"). Bottom margin is 0:
   the band's own padding supplies the closing rhythm, same as every other
   last element in a band. */
.cw-arrowlink { text-align: center; margin: -6px auto 0; }
.cw-arrowlink a {
  color: var(--brand-primary);
  font-weight: var(--ds-weight-bold);
  font-size: var(--ds-text-small);
  text-decoration: none;
  transition: color var(--brand-dur) var(--brand-ease);
}
.cw-arrowlink a:hover { color: var(--brand-primary-hover); text-decoration: underline; }

/* Airier section rhythm on phones */
@media (max-width: 639px) {
  :root { --brand-section-y: 56px; }
  .cw-shot { box-shadow: var(--brand-frame-shadow-sm); }
}

/* ---------- 13. Style guide page (/style-guide/) ----------
   Living regression specimens for the CropWater Design System. Everything
   references the --brand-* aliases so dark mode re-themes the whole page
   through Total's palette system — the specimens are the test. */
.cwsg-band { padding: calc(var(--brand-section-y) * .55) 0; }
.cwsg-band--tint { background: var(--brand-tint); }
.cwsg-band--alt { background: var(--brand-surface-alt); }

.cwsg-lede { font-size: var(--ds-text-lede); color: var(--brand-muted); max-width: 720px; }

/* Specimen card = DS card: white, hairline or shadow, 12px radius */
.cwsg-card {
  background: var(--brand-surface);
  border: 1px solid var(--brand-hairline);
  border-radius: var(--ds-radius-md);
  padding: 24px;
  transition: transform var(--brand-dur) var(--brand-ease), box-shadow var(--brand-dur) var(--brand-ease);
}
.cwsg-card:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-hover); }

/* DS eyebrow: 12px 700 uppercase 1px tracking + 20x2px blue underline */
.cwsg-eyebrow {
  display: inline-block;
  font-size: var(--ds-text-eyebrow); font-weight: var(--ds-weight-bold);
  letter-spacing: var(--ds-ls-eyebrow); text-transform: uppercase;
  color: var(--brand-muted);
  padding-bottom: 8px; border-bottom: 2px solid var(--brand-primary);
  margin-bottom: 16px;
}

/* Swatches */
.cwsg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.cwsg-swatch { border: 1px solid var(--brand-hairline); border-radius: var(--ds-radius-md); overflow: hidden; background: var(--brand-surface); }
.cwsg-swatch-chip { height: 64px; }
.cwsg-swatch-body { padding: 10px 12px; font-size: .78rem; line-height: 1.45; }
.cwsg-swatch-name { font-weight: var(--ds-weight-bold); display: block; }
.cwsg-swatch-hex { color: var(--brand-muted); font-family: ui-monospace, monospace; font-size: .72rem; }
.cwsg-swatch-sub { color: var(--brand-muted); display: block; font-size: .7rem; }

/* Type scale */
.cwsg-type-row { display: flex; align-items: baseline; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--brand-hairline); flex-wrap: wrap; }
.cwsg-type-row:last-child { border-bottom: 0; }
.cwsg-type-meta { font-size: .72rem; color: var(--brand-muted); font-family: ui-monospace, monospace; min-width: 200px; }

/* Buttons — the DS button skins, re-created from components/core/Button.jsx */
.cwsg-btnrow { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.cwsg-btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Nunito Sans', sans-serif; font-weight: var(--ds-weight-bold);
  font-size: var(--ds-text-small); line-height: var(--ds-lh-heading); padding: 8px 16px;
  border: none; cursor: pointer; text-decoration: none !important;
  border-radius: var(--ds-radius-md);
  transition: all var(--brand-dur) var(--brand-ease);
}
.cwsg-btn--lg { padding: 14px 28px; }
.cwsg-btn--pill { border-radius: var(--ds-radius-pill); }
.cwsg-btn--upper { text-transform: uppercase; letter-spacing: .5px; }
.cwsg-btn--primary { background: var(--brand-gradient-primary); color: var(--brand-on-deep); }
.cwsg-btn--primary::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: var(--brand-gradient-shimmer); transition: left .5s ease; pointer-events: none;
}
.cwsg-btn--primary:hover { transform: translateY(-3px); box-shadow: var(--brand-lift-primary); color: var(--brand-on-deep); }
.cwsg-btn--primary:hover::after { left: 100%; }
.cwsg-btn--primary:active { transform: translateY(-1px); box-shadow: var(--brand-press-primary); }
.cwsg-btn--secondary { background: var(--brand-surface); color: var(--brand-primary); box-shadow: var(--ds-shadow-sm); }
.cwsg-btn--secondary:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-md); }
.cwsg-btn--success { background: var(--brand-success); color: var(--brand-on-deep); }
.cwsg-btn--success:hover { transform: translateY(-3px); box-shadow: 0 12px 24px rgba(16, 185, 129, .3); } /* DS success lift (ships as a literal) */
.cwsg-btn--outline { background: transparent; color: var(--brand-primary); border: 1px solid var(--brand-primary); font-weight: var(--ds-weight-semibold); }
.cwsg-btn--outline:hover { background: var(--brand-primary); color: var(--brand-on-deep); }

/* Feature cards (DS radius-xl 20px, gradient header, lift -8px) */
.cwsg-feature { border-radius: var(--ds-radius-xl); overflow: hidden; background: var(--brand-surface); border: 1px solid var(--brand-hairline); transition: transform var(--brand-dur-slow) var(--brand-ease), box-shadow var(--brand-dur-slow) var(--brand-ease); }
.cwsg-feature:hover { transform: translateY(-8px); box-shadow: var(--ds-shadow-lg); }
.cwsg-feature-head {
  background: var(--brand-gradient-primary);
  color: var(--brand-on-deep); padding: 18px 22px; position: relative; overflow: hidden;
  font-weight: var(--ds-weight-bold);
}
.cwsg-feature-head::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: var(--brand-gradient-shimmer); transition: left .5s ease; pointer-events: none;
}
.cwsg-feature:hover .cwsg-feature-head::after { left: 100%; }
.cwsg-feature-body { padding: 22px; font-size: .92rem; color: var(--brand-muted); line-height: 1.6; }

/* Schedule table (DS: fixed layout, striped rows, status cells, 2px green rule) */
.cwsg-tablewrap { border: 1px solid var(--brand-hairline); border-radius: var(--ds-radius-md); overflow-x: auto; background: var(--brand-surface); }
.cwsg-table { width: 100%; border-collapse: collapse; font-size: .88rem; min-width: 560px; }
.cwsg-table th {
  font-weight: var(--ds-weight-semibold); text-align: left; padding: 12px 16px;
  border-bottom: 2px solid var(--brand-success);
  background: var(--brand-surface);
  white-space: nowrap;
}
.cwsg-table td { padding: 11px 16px; border-bottom: 1px solid var(--brand-hairline); }
.cwsg-table tr:nth-child(even) { background: var(--brand-surface-alt); }
.cwsg-table tbody tr { transition: transform var(--brand-dur) var(--brand-ease); }
.cwsg-table tbody tr:hover { transform: translateY(-2px); }
.cwsg-status { display: inline-block; padding: 3px 10px; border-radius: var(--ds-radius-sm); font-size: .8rem; font-weight: var(--ds-weight-semibold); }
.cwsg-status--ok { background: #c8e6c9; color: #2e7d32; }
.cwsg-status--warn { background: #fff9c4; color: #f57f17; }
.cwsg-status--crit { background: #ef5350; color: #000; }
.cwsg-status--grey { background: #e0e0e0; color: #616161; }
.wpex-dark-mode .cwsg-status--ok { background: rgba(16, 185, 129, .25); color: #6ee7b7; }
.wpex-dark-mode .cwsg-status--warn { background: rgba(245, 158, 11, .22); color: #fcd34d; }
.wpex-dark-mode .cwsg-status--crit { background: rgba(239, 68, 68, .3); color: #fca5a5; }
.wpex-dark-mode .cwsg-status--grey { background: rgba(var(--brand-on-deep-rgb), .12); color: #d1d5db; }

/* Tags / pills (DS radius-tag 25px, hover lift 2px) */
.cwsg-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.cwsg-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: var(--ds-weight-semibold);
  padding: 5px 14px; border-radius: var(--ds-radius-tag);
  background: var(--brand-tint); color: var(--brand-primary-dark);
  border: 1px solid transparent;
  transition: transform var(--brand-dur) var(--brand-ease), box-shadow var(--brand-dur) var(--brand-ease);
}
.cwsg-tag:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-sm); }
.cwsg-tag--onblue { background: var(--brand-fill-onblue-strong); color: var(--brand-on-deep-soft); border-color: var(--brand-border-onblue); }

/* Forms (DS Input: 1px #e5e7eb, radius-sm 8, hover tint #e8f4ff, 3px focus) */
.cwsg-form { display: grid; gap: 18px; max-width: 420px; }
.cwsg-field label { display: block; font-size: .82rem; font-weight: var(--ds-weight-semibold); margin-bottom: 6px; color: var(--brand-ink); }
.cwsg-input, .cwsg-select {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--brand-hairline); border-radius: var(--ds-radius-sm);
  background: var(--brand-surface); color: var(--brand-ink);
  font-family: 'Nunito Sans', sans-serif; font-size: .92rem;
  transition: border-color var(--brand-dur) var(--brand-ease), box-shadow var(--brand-dur) var(--brand-ease), background var(--brand-dur) var(--brand-ease);
}
.cwsg-input:hover, .cwsg-select:hover { border-color: var(--brand-primary); background: var(--brand-tint); }
.cwsg-input:focus, .cwsg-select:focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--brand-focus-ring); background: var(--brand-surface); }
.cwsg-check { display: flex; gap: 10px; align-items: center; font-size: .92rem; }
.cwsg-check input { width: 18px; height: 18px; accent-color: var(--brand-primary); }

/* Foundations: shadows (dark variants flip per DS) and radius */
.cwsg-shadow-demo { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 18px; }
.cwsg-shadow-demo > div {
  background: var(--brand-surface); border-radius: var(--ds-radius-md);
  height: 72px; display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-family: ui-monospace, monospace; color: var(--brand-muted);
}
.cwsg-sh-xs { box-shadow: var(--ds-shadow-xs); }
.cwsg-sh-sm { box-shadow: var(--ds-shadow-sm); }
.cwsg-sh-md { box-shadow: var(--ds-shadow-md); }
.cwsg-sh-lg { box-shadow: var(--ds-shadow-lg); }
.cwsg-sh-lift { box-shadow: var(--brand-lift-primary); }

/* Motion demo: animated signature gradient (DS gradientShift keyframe) */
@keyframes cwsg-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.cwsg-gradient-demo {
  border-radius: var(--ds-radius-md);
  background: var(--brand-gradient-motion);
  background-size: 400% 400%;
  animation: cwsg-gradient-shift 15s ease infinite;
  color: var(--brand-on-deep); padding: 40px 28px; text-align: center;
}
.cwsg-gradient-demo h3 { color: var(--brand-on-deep); margin: 0 0 8px; font-size: 1.3rem; }
.cwsg-gradient-demo p { color: rgba(var(--brand-on-deep-rgb), .85); margin: 0; font-size: .95rem; }

/* Icon chips (Bootstrap Icons, DS colour rules: blue chrome, green data) */
.cwsg-icons { display: flex; gap: 22px; flex-wrap: wrap; }
.cwsg-icon-chip { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; font-size: .72rem; color: var(--brand-muted); }
.cwsg-icon-chip i { font-size: 24px; color: var(--brand-primary); }
.cwsg-icon-chip--green i { color: var(--brand-success); }

/* Dark-mode note chip (theme toggle live in the header) */
.cwsg-note { font-size: .82rem; color: var(--brand-muted); border-left: 3px solid var(--brand-primary); padding: 10px 14px; background: var(--brand-surface); border-radius: 0 var(--ds-radius-sm) var(--ds-radius-sm) 0; }

@media (max-width: 639px) {
  .cwsg-type-meta { min-width: 0; }
}

/* ---------- 14. DS type-scale enforcement ----------
   The type scale is declared once as the --ds-text and --ds-weight tokens
   (§1) and is applied through the Customizer typography mods. Two cases the mods cannot
   reach, so they are stated here rather than as literals in page content:
   the hero display step (800 — the only 800 on the site, and Total's
   .wpex-heading utility out-specifies the h1 mod), and the lede step, whose
   weight vcex_heading can only carry as a bare numeral. */
.cw-hero h1,
.cw-final h1 { font-weight: var(--ds-weight-black); }
.cw-lede,
.cw-lede .vcex-heading-inner { font-weight: var(--ds-weight-regular); }
.cw-sub { font-size: var(--ds-text-lede); font-weight: var(--ds-weight-regular); }