/* ==========================================================================
   Just Electrolyte — Site A ("minimal") stylesheet
   The complete stylesheet for the whole site. No frameworks, no libraries.
   Black and white IS the system. Freshwater (#A9D2E8) <=5% of any surface:
   thin rules, hover states, dose-line details only. Never text.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Brand tokens — inlined verbatim from ../brand/tokens.css v1.0.
      Do not fork or override these values locally. If brand/tokens.css
      changes, re-inline this block.
   -------------------------------------------------------------------------- */
:root {
  /* Color — core palette */
  --je-ink:        #0A0A0A;
  --je-paper:      #FFFFFF;
  --je-offwhite:   #FAFAFA;
  --je-gray-600:   #525252;
  --je-gray-400:   #A3A3A3;
  --je-freshwater: #A9D2E8; /* accent — <=5% of any surface; dose-lines, fine
                               rules, hover states, micro-details only.
                               Never text. Never a text-block background. */

  /* Color — semantic */
  --je-bg:             var(--je-paper);
  --je-bg-alt:         var(--je-offwhite);
  --je-bg-inverse:     var(--je-ink);
  --je-text:           var(--je-ink);
  --je-text-secondary: var(--je-gray-600);
  --je-text-inverse:   var(--je-paper);
  --je-hairline:       var(--je-gray-400); /* decorative rules only — fails text contrast */
  --je-accent:         var(--je-freshwater);

  /* Typography */
  --je-font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --je-display-size:     clamp(2.75rem, 8vw, 4.5rem);
  --je-display-weight:   900;
  --je-display-tracking: -0.02em;
  --je-display-leading:  1.0;

  --je-h1-size:     3rem;
  --je-h1-weight:   800;
  --je-h1-tracking: -0.02em;
  --je-h1-leading:  1.05;

  --je-h2-size:     2rem;
  --je-h2-weight:   800;
  --je-h2-tracking: -0.02em;
  --je-h2-leading:  1.1;

  --je-h3-size:     1.375rem;
  --je-h3-weight:   700;
  --je-h3-tracking: -0.01em;
  --je-h3-leading:  1.25;

  --je-body-lg-size:  1.125rem;
  --je-body-size:     1rem;
  --je-body-weight:   400;
  --je-body-tracking: 0;
  --je-body-leading:  1.6;

  --je-caption-size:     0.8125rem;
  --je-caption-weight:   400;
  --je-caption-tracking: 0.01em;
  --je-caption-leading:  1.45;

  --je-eyebrow-size:     0.75rem;
  --je-eyebrow-weight:   500;
  --je-eyebrow-tracking: 0.24em;
  --je-eyebrow-leading:  1.2;

  /* Spacing — 4px base scale */
  --je-space-1:  0.25rem;
  --je-space-2:  0.5rem;
  --je-space-3:  0.75rem;
  --je-space-4:  1rem;
  --je-space-6:  1.5rem;
  --je-space-8:  2rem;
  --je-space-12: 3rem;
  --je-space-16: 4rem;
  --je-space-24: 6rem;
  --je-space-32: 8rem;

  /* Structure & details */
  --je-radius: 0;            /* the system is square — no rounded corners */
  --je-rule-hairline: 1px;
  --je-rule-accent: 2px;     /* the Freshwater dose-line */
  --je-container-max: 70rem; /* 1120px */
  --je-transition: 150ms ease;

  /* Focus ring — always Ink on light / Paper on dark. Never Freshwater. */
  --je-focus-ring: 2px solid var(--je-ink);
  --je-focus-offset: 2px;
}

/* Site-A structural variables (layout plumbing — not brand tokens) */
:root {
  --header-height: 4rem;
}
@media (min-width: 720px) {
  :root { --header-height: 4.75rem; }
}

/* --------------------------------------------------------------------------
   2. Base / reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--je-font-sans);
  font-size: var(--je-body-size);
  font-weight: var(--je-body-weight);
  letter-spacing: var(--je-body-tracking);
  line-height: var(--je-body-leading);
  color: var(--je-text);
  background: transparent; /* the water canvas (#water) paints the white→pale field */
  padding-top: var(--header-height); /* clears the fixed header */
}

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

a { color: inherit; }

button, input, textarea, select { font: inherit; color: inherit; }

ul[class], ol[class] { list-style: none; padding: 0; }

::selection { background: var(--je-ink); color: var(--je-paper); }

:focus-visible {
  outline: var(--je-focus-ring);
  outline-offset: var(--je-focus-offset);
}
.section--inverse :focus-visible,
.site-footer :focus-visible,
.product-card--inverse :focus-visible {
  outline-color: var(--je-paper);
}

/* --------------------------------------------------------------------------
   3. Type scale
      Display–H2 are ALL CAPS via text-transform (markup stays sentence case).
   -------------------------------------------------------------------------- */
.display {
  font-size: var(--je-display-size);
  font-weight: var(--je-display-weight);
  letter-spacing: var(--je-display-tracking);
  line-height: var(--je-display-leading);
  text-transform: uppercase;
}

h1, .h1 {
  font-size: var(--je-h1-size);
  font-weight: var(--je-h1-weight);
  letter-spacing: var(--je-h1-tracking);
  line-height: var(--je-h1-leading);
  text-transform: uppercase;
}

h2, .h2 {
  font-size: var(--je-h2-size);
  font-weight: var(--je-h2-weight);
  letter-spacing: var(--je-h2-tracking);
  line-height: var(--je-h2-leading);
  text-transform: uppercase;
}

h3, .h3 {
  font-size: var(--je-h3-size);
  font-weight: var(--je-h3-weight);
  letter-spacing: var(--je-h3-tracking);
  line-height: var(--je-h3-leading);
  /* sentence case — no transform */
}

.body-lg { font-size: var(--je-body-lg-size); }
.body    { font-size: var(--je-body-size); }

.caption {
  font-size: var(--je-caption-size);
  font-weight: var(--je-caption-weight);
  letter-spacing: var(--je-caption-tracking);
  line-height: var(--je-caption-leading);
}

.eyebrow {
  font-size: var(--je-eyebrow-size);
  font-weight: var(--je-eyebrow-weight);
  letter-spacing: var(--je-eyebrow-tracking);
  line-height: var(--je-eyebrow-leading);
  text-transform: uppercase;
}

.text-secondary { color: var(--je-text-secondary); }

.text-link {
  color: var(--je-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.text-link:hover {
  text-decoration-color: var(--je-accent);
  text-decoration-thickness: 2px;
}

/* Heading rhythm when followed by content */
:is(h1, h2, h3, .display, .h1, .h2, .h3) + :is(p, ul, ol, .body, .body-lg) {
  margin-top: var(--je-space-4);
}
.flow > * + * { margin-top: var(--je-space-4); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.container {
  max-width: var(--je-container-max);
  margin-inline: auto;
  padding-inline: var(--je-space-4);
}
@media (min-width: 720px) {
  .container { padding-inline: var(--je-space-6); }
}

.section { padding-block: var(--je-space-16); }
@media (min-width: 720px) {
  .section { padding-block: var(--je-space-24); }
}

.section--alt { background: rgba(250, 250, 250, 0.62); } /* off-white over water */

.section--inverse {
  background: var(--je-bg-inverse);
  color: var(--je-text-inverse);
}
/* Gray-600 fails contrast on Ink — secondary text inside inverse is Paper. */
.section--inverse :is(.text-secondary, .hero-sub, .pillar-body, .product-desc, .caption) {
  color: var(--je-text-inverse);
}

/* --------------------------------------------------------------------------
   5. Header / nav — fixed, white, thin bottom hairline
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  background: rgba(255, 255, 255, 0.97); /* near-opaque: fixed over scrolling type, no backdrop-filter — 0.92 ghosted headings */
  border-bottom: var(--je-rule-hairline) solid var(--je-hairline);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}


.site-nav { position: relative; }

/* Mobile toggle — two bars, no icon font */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: var(--je-space-3);
  margin-right: calc(-1 * var(--je-space-3));
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--je-ink);
}

.nav-menu {
  display: none;
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  background: var(--je-bg);
  border-bottom: var(--je-rule-hairline) solid var(--je-hairline);
  padding: var(--je-space-4) var(--je-space-4) var(--je-space-6);
}
.site-header.nav-open .nav-menu { display: block; }

.nav-link {
  display: block;
  padding: var(--je-space-3) 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--je-ink);
  text-decoration: none;
}
.nav-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--je-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.nav-link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--je-ink);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

@media (min-width: 720px) {
  .nav-toggle { display: none; }
  .nav-menu {
    display: flex;
    position: static;
    gap: var(--je-space-8);
    padding: 0;
    border: 0;
    background: transparent;
  }
  .nav-link { padding: var(--je-space-2) 0; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--je-space-24) var(--je-space-16); }
@media (min-width: 720px) {
  .hero { padding-block: var(--je-space-32) var(--je-space-24); }
}

.hero-headline {
  font-size: var(--je-display-size);
  font-weight: var(--je-display-weight);
  letter-spacing: var(--je-display-tracking);
  line-height: var(--je-display-leading);
  text-transform: uppercase;
  max-width: 16ch;
}

.hero-sub {
  margin-top: var(--je-space-6);
  font-size: var(--je-body-lg-size);
  color: var(--je-text-secondary);
  max-width: 38rem;
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */
.btn-primary,
.btn-prime {
  display: inline-block;
  appearance: none;
  border-radius: var(--je-radius);
  padding: var(--je-space-4) var(--je-space-8);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--je-transition),
              color var(--je-transition),
              border-color var(--je-transition);
}

/* Primary — black block button */
.btn-primary {
  background: var(--je-ink);
  color: var(--je-paper);
  border: 1px solid var(--je-ink);
}
.btn-primary:hover {
  background: var(--je-paper);
  color: var(--je-ink);
}
.btn-primary:disabled {
  background: var(--je-gray-400);
  border-color: var(--je-gray-400);
  color: var(--je-paper);
  cursor: default;
}

/* Buy with Prime — placeholder style; swapped for the real Buy with Prime
   widget when the Amazon side is wired up. Keep the footprint identical. */
.btn-prime {
  background: rgba(255, 255, 255, 0.72);
  color: var(--je-ink);
  border: 1px solid var(--je-ink);
}
.btn-prime:hover { border-color: var(--je-accent); }

.btn-block { display: block; width: 100%; }

/* Inverse contexts — the black button disappears on Ink; flip it. */
.site-footer .btn-primary,
.section--inverse .btn-primary,
.product-card--inverse .btn-primary {
  background: var(--je-paper);
  color: var(--je-ink);
  border-color: var(--je-paper);
}
.site-footer .btn-primary:hover,
.section--inverse .btn-primary:hover,
.product-card--inverse .btn-primary:hover {
  background: var(--je-ink);
  color: var(--je-paper);
}

/* --------------------------------------------------------------------------
   8. Product cards
   -------------------------------------------------------------------------- */
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--je-space-6);
}
@media (min-width: 720px) {
  .product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--je-space-8);
  }
}

.product-card {
  display: flex;
  flex-direction: column;
  gap: var(--je-space-4);
  padding: var(--je-space-8);
  background: rgba(255, 255, 255, 0.72); /* solid-white card → panel over water */
  border: 1px solid var(--je-ink);
}

/* Quick Rehydrate — the inverse vessel */
.product-card--inverse {
  background: var(--je-ink);
  color: var(--je-paper);
  border-color: var(--je-ink);
}

.product-name {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-transform: uppercase;
}

.product-desc { color: var(--je-text-secondary); }
.product-card--inverse .product-desc { color: var(--je-paper); }

/* The dose-line — one thin Freshwater rule carrying the electrolyte numbers.
   The single accent occurrence per card; counts toward the <=5% budget. */
.dose-line {
  display: flex;
  flex-wrap: wrap;
  gap: var(--je-space-2) var(--je-space-4);
  border-top: var(--je-rule-accent) solid var(--je-accent);
  padding-top: var(--je-space-3);
  font-size: var(--je-caption-size);
  letter-spacing: var(--je-caption-tracking);
  line-height: var(--je-caption-leading);
}

.product-price {
  font-size: 1.125rem;
  font-weight: 700;
}

.product-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--je-space-3);
  padding-top: var(--je-space-2);
}

/* --------------------------------------------------------------------------
   9. Science pillars
   -------------------------------------------------------------------------- */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--je-space-8);
}
@media (min-width: 720px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1080px) {
  .pillars { grid-template-columns: repeat(3, 1fr); gap: var(--je-space-12); }
}

.pillar {
  border-top: var(--je-rule-hairline) solid var(--je-ink);
  padding-top: var(--je-space-4);
}
.section--inverse .pillar { border-top-color: var(--je-paper); }

.pillar-number {
  font-size: var(--je-eyebrow-size);
  font-weight: var(--je-eyebrow-weight);
  letter-spacing: var(--je-eyebrow-tracking);
  line-height: var(--je-eyebrow-leading);
  text-transform: uppercase;
  color: var(--je-text-secondary);
}
.section--inverse .pillar-number { color: var(--je-text-inverse); }

.pillar-title {
  margin-top: var(--je-space-3);
  font-size: var(--je-h3-size);
  font-weight: var(--je-h3-weight);
  letter-spacing: var(--je-h3-tracking);
  line-height: var(--je-h3-leading);
}

.pillar-body {
  margin-top: var(--je-space-3);
  color: var(--je-text-secondary);
}

/* --------------------------------------------------------------------------
   10. Data table — dense, rigorous, lab-sheet style (science / dose facts)
   -------------------------------------------------------------------------- */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--je-caption-size);
  letter-spacing: var(--je-caption-tracking);
  line-height: var(--je-caption-leading);
}
.data-table th {
  text-align: left;
  font-size: var(--je-eyebrow-size);
  font-weight: var(--je-eyebrow-weight);
  letter-spacing: var(--je-eyebrow-tracking);
  text-transform: uppercase;
  padding: var(--je-space-2) var(--je-space-3) var(--je-space-2) 0;
  border-bottom: var(--je-rule-hairline) solid var(--je-ink);
}
.data-table td {
  padding: var(--je-space-2) var(--je-space-3) var(--je-space-2) 0;
  border-bottom: var(--je-rule-hairline) solid var(--je-hairline);
}

/* --------------------------------------------------------------------------
   11. FAQ accordion — native <details>; JS only adds exclusive-open
   -------------------------------------------------------------------------- */
.faq-list { border-bottom: var(--je-rule-hairline) solid var(--je-hairline); }

.faq-item { border-top: var(--je-rule-hairline) solid var(--je-hairline); }

.faq-question {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--je-space-4);
  padding: var(--je-space-4) 0;
  font-size: var(--je-h3-size);
  font-weight: var(--je-h3-weight);
  letter-spacing: var(--je-h3-tracking);
  line-height: var(--je-h3-leading);
  cursor: pointer;
  list-style: none;
}
.faq-question::-webkit-details-marker { display: none; }
.faq-question::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
}
.faq-item[open] .faq-question::after { content: "\2212"; }

.faq-answer {
  padding-bottom: var(--je-space-6);
  color: var(--je-text-secondary);
  max-width: 44rem;
}

/* --------------------------------------------------------------------------
   12. Forms — large fields, visible focus
   -------------------------------------------------------------------------- */
.form-field { margin-bottom: var(--je-space-6); }

.label {
  display: block;
  margin-bottom: var(--je-space-2);
  font-size: var(--je-eyebrow-size);
  font-weight: var(--je-eyebrow-weight);
  letter-spacing: var(--je-eyebrow-tracking);
  line-height: var(--je-eyebrow-leading);
  text-transform: uppercase;
}

.input,
.textarea {
  display: block;
  width: 100%;
  padding: var(--je-space-4);
  font-size: var(--je-body-lg-size);
  background: rgba(255, 255, 255, 0.72); /* water reads faintly through fields */
  color: var(--je-ink);
  border: 1px solid var(--je-ink);
  border-radius: var(--je-radius);
}
.input::placeholder,
.textarea::placeholder { color: var(--je-gray-600); }

.textarea { min-height: 10rem; resize: vertical; }

.form-status {
  margin-top: var(--je-space-3);
  font-size: var(--je-caption-size);
  letter-spacing: var(--je-caption-tracking);
  line-height: var(--je-caption-leading);
  min-height: 1.2em;
}
.form-status.is-error { font-weight: 700; }

/* Honeypot — invisible to humans, present in the DOM for bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Footer signup — single row from 720px up */
.signup-form {
  display: flex;
  flex-direction: column;
  gap: var(--je-space-3);
  max-width: 28rem;
}
@media (min-width: 720px) {
  .signup-form { flex-direction: row; flex-wrap: wrap; }
  .signup-form .input { flex: 1 1 12rem; }
  .signup-form .btn-primary { flex: none; }
  .signup-form .form-status { flex-basis: 100%; margin-top: 0; }
}

/* Inputs on Ink (footer) */
.site-footer .input,
.site-footer .textarea {
  background: var(--je-ink);
  color: var(--je-paper);
  border-color: var(--je-paper);
}
.site-footer .input::placeholder,
.site-footer .textarea::placeholder { color: var(--je-paper); opacity: 0.75; }

/* --------------------------------------------------------------------------
   13. Footer — black, white text
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--je-bg-inverse);
  color: var(--je-text-inverse);
  padding: var(--je-space-16) 0 var(--je-space-8);
}

.footer-inner {
  display: grid;
  gap: var(--je-space-12);
}
@media (min-width: 720px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-legal { grid-column: 1 / -1; }
}


/* The tagline. Exactly "Just Hydration" — standalone, never modified. */
.footer-tagline {
  margin-top: var(--je-space-4);
  font-size: var(--je-body-size);
  font-weight: 400;
}

.footer-heading {
  font-size: var(--je-eyebrow-size);
  font-weight: var(--je-eyebrow-weight);
  letter-spacing: var(--je-eyebrow-tracking);
  line-height: var(--je-eyebrow-leading);
  text-transform: uppercase;
}

.footer-signup-note {
  margin-block: var(--je-space-3) var(--je-space-4);
  font-size: var(--je-caption-size);
  letter-spacing: var(--je-caption-tracking);
  line-height: var(--je-caption-leading);
}

.footer-legal {
  display: grid;
  gap: var(--je-space-4);
  border-top: var(--je-rule-hairline) solid var(--je-gray-600);
  padding-top: var(--je-space-6);
}

/* FDA disclaimer slot — fill on any page carrying a structure/function
   claim (verbatim text: compliance/claims-guardrails.md section 1.2). Hidden
   while empty; bordered box when filled. */
.fda-disclaimer {
  font-size: var(--je-caption-size);
  letter-spacing: var(--je-caption-tracking);
  line-height: var(--je-caption-leading);
  border: 1px solid var(--je-paper);
  padding: var(--je-space-3) var(--je-space-4);
  max-width: 44rem;
}
.fda-disclaimer:empty { display: none; }

.legal-line {
  font-size: var(--je-caption-size);
  letter-spacing: var(--je-caption-tracking);
  line-height: var(--je-caption-leading);
}

.footer-link { color: var(--je-paper); text-decoration: none; }
.footer-link:hover {
  text-decoration: underline;
  text-decoration-color: var(--je-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   14. Utilities
   -------------------------------------------------------------------------- */
/* 1px Freshwater rule — static accent ink; counts toward the <=5% budget */
.accent-rule {
  border: 0;
  height: var(--je-rule-hairline);
  background: var(--je-accent);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--je-space-4);
  z-index: 200;
  padding: var(--je-space-3) var(--je-space-4);
  background: var(--je-ink);
  color: var(--je-paper);
  text-decoration: none;
}
.skip-link:focus-visible { top: var(--je-space-2); }

/* --------------------------------------------------------------------------
   15. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --------------------------------------------------------------------------
   16. Water engine (fluid.js) — fixed full-viewport canvas behind everything
       The engine paints the white→pale-blue field; body is transparent so
       the water reads through light sections. html.no-water (no WebGL / init
       threw) hides the canvas and restores a static gradient; same gradient
       for reduced motion. Black/inverse sections and the footer stay opaque —
       type contrast is sacred.
   -------------------------------------------------------------------------- */
#water {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

html.no-water #water { display: none; }
html.no-water body { background: linear-gradient(#FFFFFF, #EAF4FA); }

@media (prefers-reduced-motion: reduce) {
  body { background: linear-gradient(#FFFFFF, #EAF4FA); }
}

/* --no-tier-delegate — single hand-authored breakpoint block, values are design decisions */
/* --------------------------------------------------------------------------
   17. Mobile rhythm pass (<= 640px)
       The desktop-first rules above tune section/hero/footer spacing for wide
       screens; their *base* (un-prefixed) values were generous and read as
       sparse on a phone — large empty bands between stacked sections, a yawning
       tagline moment, a hero taller than the viewport. This block tightens the
       VERTICAL rhythm only. It changes no colors, no z-index, no background
       logic, and nothing at >= 720px (the established desktop step) is touched.

       Strategy: shrink the three *section-scale* spacing tokens
       (--je-space-16/24/32) here. Those tokens are used exclusively for
       section / hero / footer vertical spacing (audited) — never for component
       padding — so overriding them tightens every consumer, including inline
       margins, with no specificity battles and no !important. Component-internal
       tokens (--je-space-8 card padding, etc.) are deliberately left alone so
       cards keep their breathing room. A few inter-block gaps that ride on
       larger tokens are then nudged by class.
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  :root {
    /* Section-scale tokens only — compresses .section, .hero, .footer,
       .tagline-section, contact grid gap, and every inline section margin. */
    --je-space-16: 2.75rem; /* was 4rem  — .section padding, footer top, hero bottom */
    --je-space-24: 3rem;    /* was 6rem  — hero top */
    --je-space-32: 3.5rem;  /* was 8rem  — tagline moment band */
  }

  /* Hero: keep it to roughly one viewport. Explicit (not token-driven) so the
     top/bottom rhythm is intentional rather than inherited. */
  .hero { padding-block: 2.5rem 2rem; }

  /* Inter-block gaps that ride on --je-space-8 / --je-space-12 (which we leave
     at full size for component padding) — tighten just the stack gaps. */
  .editorial { gap: 1.5rem; }
  .pillars   { gap: 1.5rem; }

  /* Footer: the brand/signup/legal stack was 3rem apart — too airy stacked. */
  .footer-inner { gap: 1.75rem; }

  /* Heading rhythm: the display/H1 floor (2.75rem) can crowd its lede on a
     narrow column; trim the gap a touch so the pairing reads as one unit. */
  :is(h1, h2, h3, .display, .h1, .h2, .h3) + :is(p, ul, ol, .body, .body-lg) {
    margin-top: var(--je-space-3);
  }

  /* Big display type: the clamp floor is 2.75rem; on a 390px column the hero
     "ALL DAY HYDRATION" and the tagline can wrap hard. Ease the floors down a
     hair so they breathe without forcing awkward three-line wraps. */
  .display,
  .hero-headline { font-size: clamp(2.25rem, 11vw, 2.75rem); }
  h1, .h1        { font-size: 2.25rem; }
}

/* Narrow phones (<= 380px): a final small step down so the tightest devices
   don't reintroduce overflow or cramped wraps on the largest type. */
@media (max-width: 380px) {
  :root {
    --je-space-16: 2.5rem;
    --je-space-32: 3rem;
  }
  .display,
  .hero-headline { font-size: clamp(2rem, 11vw, 2.4rem); }
  .product-name  { font-size: 1.3rem; }
}

/* ---- §18 Mobile: inverse sections read as blocks, not the footer -------
   On a phone a full-bleed black band fills the viewport and reads as "the
   site is over" (the real footer is also black). Inset inverse SECTIONS so
   the white page stays visible at the edges — clearly a block within the
   page. The <footer> alone stays full-bleed black, keeping the end-of-page
   signal unambiguous. Desktop unchanged. */
@media (max-width: 640px) {
  .section--inverse {
    margin-inline: 0.875rem;
  }
}