/* ===========================================================
   page-sitemap.css
   -----------------------------------------------------------
   Page wrapper: .page-sitemap
   Loaded by the CMS via getVersionedFile('css/page-sitemap.css').

   FRAME WIDTHS (per FIGMA_HANDOFF.md, confirmed with the user)
     Desktop: 1440px design (content 1200 + 120px gutter each side).
       (Figma artboard is 1640 wide but the design is a 1440 layout;
        content container caps at 1200.)
     Mobile:  no mobile frame supplied. Layout collapses with
       "standard block wrapping" via the shared 1024 / 767 tiers;
       type is em-anchored (fixed) except a few large headings that
       use a single clamp() with a sensible floor (no second frame
       to derive an exact slope from, so floors are chosen, not
       computed -- flagged inline).
     Section backgrounds are full-bleed at any viewport width.

   PAGE FONT-SIZE BASE
     font-size: 18px on .page-sitemap (dominant Figma body size).
     Non-clamp sizes are em, calibrated to this base (18px == 1em).
     Clamp endpoints are PX (see micropulsing note re: em-in-clamp).

   INHERITED FROM CMS-LOADED CSS (do not re-declare unless overriding):
     - font-family: 'Roboto', sans-serif
     - color-scheme: light only

   ASCII rule: this file MUST stay ASCII-clean.

   SECTION INDEX
     0. Tokens / resets / layout utilities
     1. Hero (gradient + search)
     2. Quick-link jump pills
     3. Main pages (4-col directory)
     4. Beige wave divider (chunk 2)
     5. By your Unit type (accordions) (chunk 2)
     6. Help and Support (chunk 3)
=========================================================== */

/* -- TOKENS ------------------------------------------------ */
.page-sitemap {
  font-size: 18px;
  font-family: 'Roboto', sans-serif;
  color: var(--color-dark);

  /* Typography scale (px clamp endpoints; em for fixed sizes). */
  --text-eyebrow:    1.222em;                          /* 22px hero eyebrow */
  --text-hero-title: clamp(32px, 2.1vw + 23.83px, 54px); /* 54 -> 32 (floor chosen) */
  --text-lead:       1.111em;                          /* 20px hero lead */
  --text-h2:         clamp(30px, 1.9vw + 22.57px, 50px); /* 50 -> 30 (floor chosen) */
  --text-h2-sub:     1.222em;                          /* 22px section intro */
  --text-card-title: 1.389em;                          /* 25px card heading */
  --text-body:       1em;                              /* 18px */
  --text-pill:       1em;                              /* 18px pill label */
  --text-search:     1.222em;                          /* 22px search placeholder */

  /* Spacing */
  --space-section-y: clamp(48px, 2.86vw + 36.86px, 80px); /* 80 -> 48 */
  --space-container: 20px;     /* min side gutter; content caps at 1200 (the
                                Figma 220px side space is canvas -> ignored) */
  --space-gap-card:        20px;
  --space-gap-cards-row:   20px;

  /* Radius */
  --radius-pill:  9999px;
  --radius-card:  1.333em;   /* 24px */
  --radius-input: 1.333em;   /* 24px */

  /* Brand colours (product-named convention). Water Ozonator blue
     is the site primary and the accent used throughout this page. */
  --color-silver-pulser:   #92ca6a;
  --color-magnetic-pulser: #59afb2;
  --color-water-ozonator:  #4792bc;  /* site primary -- page accent */
  --color-bio-tuner:       #a194c7;
  /* Dark brand shades (match the --color-*-dark tokens on the product pages) */
  --color-silver-pulser-dark:   #4a8b3f;
  --color-magnetic-pulser-dark: #268e92;
  --color-water-ozonator-dark:  #3f799a;
  --color-bio-tuner-dark:       #62538e;

  /* Page accent aliases -- consumed by the shared site-* CSS (every page
     must map them; STANDARDS.md section 3). Site primary blue. */
  --color-accent:      var(--color-water-ozonator);
  --color-accent-dark: var(--color-water-ozonator-dark);

  /* Interaction. SITE-WIDE STANDARD: blue buttons/pills darken to #555 on
     hover (confirmed by designer; applies across all pages -- see the note
     to add to COMPONENTS.md "Recurring conventions"). */
  --color-btn-hover:   #555555;

  /* Neutrals */
  --color-dark:        #3b3b3b;
  --color-text-muted:  #555555;
  --color-white:       #ffffff;
  --color-card-border: #e2e8e3;  /* Figma green/90 card stroke */
  --color-input-border:#d4d4d4;

  /* Backgrounds */
  --bg-cream:   #f8f4f2;
  --hero-grad-1:#f9fbf6;
  --hero-grad-2:#f5faf0;
  --hero-grad-3:#e6f4f8;
}

/* -- SCOPED RESETS ----------------------------------------- */
.page-sitemap *,
.page-sitemap *::before,
.page-sitemap *::after { box-sizing: border-box; }
.page-sitemap a { color: inherit; text-decoration: none; }
.page-sitemap ul { margin: 0; padding: 0; list-style: none; }
.page-sitemap img { display: block; max-width: 100%; }

/* Neutralise the CMS bare-<header> font-size leak wherever this
   page uses a semantic <header>. */
.page-sitemap header { font: inherit; }

/* Full button reset (all five inherits -- see COMPONENTS.md). */
.page-sitemap button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

/* Standard keyboard focus ring (STANDARDS.md section 3). Component
   :focus-visible rules further down add their own hover-style cues. */
.page-sitemap a:focus-visible,
.page-sitemap button:focus-visible,
.page-sitemap input:focus-visible,
.page-sitemap [tabindex]:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 2px;
}

/* Brand subscript "3" for Water Ozonator (see PROJECT.md). */
.page-sitemap .brand-sub {
  font-size: 0.7em;
  line-height: 0;
  vertical-align: -0.15em;
}

/* -- LAYOUT UTILITIES -------------------------------------- */
.page-sitemap .section {
  width: 100%;
  padding-block: var(--space-section-y);
}
/* Content caps at 1200 and centres; section backgrounds stay full-bleed
   (the section/.hero/.quicklinks/.units elements are full width). */
.page-sitemap .container {
  /* Standard gutters-outside form (site standard, Aug 2026): a true
     1200px content column; the padding only bites once the viewport is
     narrower than 1200 + gutters. border-box keeps the padding inside
     the max-width so the content column never exceeds 1200. Renders
     identically to the previous min(100% - 2*pad, 1200px) form. */
  box-sizing: border-box;
  width: 100%;
  max-width: calc(1200px + 2 * var(--space-container));
  margin-inline: auto;
  padding-inline: var(--space-container);
}

/* Anchor targets sit under the fixed CMS nav -- offset native jumps. */
.page-sitemap [id] { scroll-margin-top: 120px; }

/* ===========================================================
   SECTION 1: HERO  (Figma 8129:5792)
   Full-bleed diagonal gradient. Left-aligned text column capped
   at 1200, with eyebrow, big headline ("SOTA" in primary blue),
   lead paragraph, and a rounded search field.
=========================================================== */
.page-sitemap .hero {
  background-image: linear-gradient(
    172deg,
    var(--hero-grad-1) 0%,
    var(--hero-grad-2) 40%,
    var(--hero-grad-3) 100%
  );
}
.page-sitemap .hero__inner {
  width: min(100% - (var(--space-container) * 2), 1200px);
  margin-inline: auto;
  padding-block: clamp(48px, 3.6vw + 33.95px, 80px);  /* 80 -> 48 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.page-sitemap .hero__eyebrow {
  margin: 0;
  font-size: var(--text-eyebrow);
  font-weight: 700;
  line-height: 1.364;          /* 30/22 */
  letter-spacing: 0.3em;       /* ~6.6px at 22px */
  text-transform: uppercase;
  color: var(--color-dark);
}
.page-sitemap .hero__title {
  margin: 0;
  font-size: var(--text-hero-title);
  font-weight: 400;
  line-height: 1.08;           /* 58.32/54 */
  color: var(--color-dark);
  max-width: 20em;
}
.page-sitemap .hero__title b {
  font-weight: 900;            /* Roboto Black "SOTA" */
  color: var(--color-water-ozonator);
}
.page-sitemap .hero__lead {
  margin: 0;
  font-size: var(--text-lead);
  line-height: 1.53;           /* 30.6/20 */
  color: var(--color-dark);
  max-width: 64em;
}

/* Search: a Google Custom Search Engine (.gcse-search) sits here in the
   hero. Its appearance (rounded input, transparent control) is overridden
   in the page's own in-page <style> block, NOT here -- that block is placed
   after the CSE script so it wins over Google's runtime-injected CSS. Do not
   restyle .gsc-* / .gcse-* from this file; it would load too early to apply.
   (To cap the field near the Figma 623px width, add a max-width rule to that
   in-page block.) */

/* ===========================================================
   SECTION 2: QUICK-LINK PILLS  (Figma 8129:1625)
   White band. Row of rounded blue pills that jump to the unit
   accordions / help section further down the page. Wraps freely.
=========================================================== */
.page-sitemap .quicklinks {
  background: var(--color-white);
}
.page-sitemap .quicklinks__inner {
  width: min(100% - (var(--space-container) * 2), 1200px);
  margin-inline: auto;
  padding-block: clamp(20px, 1.14vw + 15.55px, 30px);  /* 30 -> 20 */
}
.page-sitemap .quicklinks__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 5px;        /* between the two groups on one line */
  row-gap: 20px;          /* between the two rows once they wrap to 3 + 3 */
}
.page-sitemap .quicklinks__group {
  display: flex;
  justify-content: center;
  column-gap: 5px;        /* between the three pills in a group */
}
/* Phone: list and groups both stack -> a single centred column of six. */
@media (max-width: 767px) {
  .page-sitemap .quicklinks__list  { flex-direction: column; align-items: center; row-gap: 10px; }
  .page-sitemap .quicklinks__group { flex-direction: column; align-items: center; row-gap: 10px; }
}
.page-sitemap .quicklink {
  display: inline-flex;
  align-items: center;
  padding: 0.389em 1.111em 0.167em;  /* 7 / 20 / 3 -- caps optically centred
                                         (COMPONENTS.md: more top than bottom) */
  background: var(--color-water-ozonator);
  color: var(--color-white);
  border-radius: var(--radius-pill);
  font-size: var(--text-pill);
  font-weight: 700;
  line-height: 1.389;          /* 25/18 */
  letter-spacing: 0.1em;       /* ~1.8px at 18px */
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.page-sitemap .quicklink:hover,
.page-sitemap .quicklink:focus-visible {
  background: var(--color-btn-hover);   /* site-wide standard blue-button hover */
}

/* ===========================================================
   SECTION 3: MAIN PAGES  (Figma 8551:3704)
   Cream band. Centred heading + intro, then a 4-up row of
   bordered white directory cards (About Us / How It Works /
   Shop / Learn), each a heading + sublabel + a list of links.
=========================================================== */
.page-sitemap .directory {
  background: var(--bg-cream);
}
.page-sitemap .directory__head {
  text-align: center;
  margin-bottom: 30px;
}
.page-sitemap .directory__title {
  margin: 0 0 0.2em 0;
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-text-muted);
}
.page-sitemap .directory__sub {
  margin: 0;
  font-size: var(--text-h2-sub);
  font-weight: 700;            /* per designer reading of Figma 8551:3708 */
  line-height: 1.364;
  color: var(--color-dark);
}
.page-sitemap .directory__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-gap-cards-row);
  align-items: start;
}
.page-sitemap .dir-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-gap-card);
  height: 100%;
  padding: 21px 16px;
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
}
.page-sitemap .dir-card__head {
  padding-top: 0.611em;        /* 11px */
}
.page-sitemap .dir-card__title {
  margin: 0;
  font-size: var(--text-card-title);
  font-weight: 700;
  line-height: 1.2;            /* 30/25 */
  color: var(--color-water-ozonator);
}
.page-sitemap .dir-card__sub {
  margin: 0.111em 0 0 0;
  font-size: var(--text-body);
  line-height: 1.667;          /* 30/18 */
  color: rgba(59, 59, 59, 0.7);
}
.page-sitemap .dir-card__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-sitemap .dir-card__links a {
  display: inline-block;
  font-size: var(--text-body);
  line-height: 1.111;          /* 20/18 */
  color: var(--color-dark);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-decoration-skip-ink: none;
  text-underline-offset: 4px;  /* sits below the descenders, per Figma */
  transition: text-decoration-color 0.15s ease;
}
.page-sitemap .dir-card__links a:hover,
.page-sitemap .dir-card__links a:focus-visible {
  text-decoration-color: var(--color-water-ozonator);   /* #4792bc underline through descenders */
}
/* Featured Learn items: bold with a trailing arrow (per designer screenshot).
   The arrow uses an escaped code point (\2192) to keep this file ASCII-clean. */
.page-sitemap .dir-card__link--feature {
  font-weight: 700;
}
.page-sitemap .dir-card__link--feature::after {
  content: " \2192";
  text-decoration: none;   /* arrow itself never underlines on hover */
}
/* Nested product variants (e.g. SP8/SP7/Lite under "Silver Pulsers"). */
.page-sitemap .dir-card__sublist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding-left: 1.5em;
}
.page-sitemap .dir-card__sublist li { list-style: disc; }
.page-sitemap .dir-card__sublist li::marker { color: rgba(59, 59, 59, 0.5); }

/* -- RESPONSIVE -------------------------------------------- */
/* Tablet: 4-col directory -> 2-col. */
@media (max-width: 1024px) {
  .page-sitemap .directory__grid { grid-template-columns: repeat(2, 1fr); }
}
/* Phone: directory -> single column. */
@media (max-width: 767px) {
  .page-sitemap .directory__grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   SECTION 5: BY YOUR UNIT TYPE  (Figma 8129:1669)
   One bordered card per product family. Inside each: the
   current/supported models render OPEN (heading + tri-colour
   accent + library columns), then a "Previous models" block
   whose discontinued rows are collapsed accordions powered by
   the shared site-reveal.js disclosure pattern.
   (Section 4 beige wave divider: added in a following step.)
=========================================================== */
.page-sitemap .units { background: var(--color-white); }
.page-sitemap .units__head {
  text-align: center;
  margin-bottom: 30px;
}
.page-sitemap .units__title {
  margin: 0 0 0.2em 0;
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-water-ozonator);   /* Figma 8139:1972 (#4792bc) */
}
.page-sitemap .units__sub {
  margin: 0 auto;
  max-width: 60em;
  font-size: var(--text-h2-sub);
  font-weight: 700;                      /* Figma Heading 2 is Roboto Bold */
  line-height: 1.364;
  color: var(--color-dark);
}
.page-sitemap .units__list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* -- Product card ------------------------------------------ */
.page-sitemap .unit-card {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 21px 16px;
  background: var(--color-white);
  border: 1px solid var(--color-silver-pulser);  /* per-card brand colour */
  border-radius: var(--radius-card);
  --unit-accent: var(--color-silver-pulser-dark);        /* per-card column-header / badge accent */
}
.page-sitemap .unit-card--silver-pulser   { border-color: var(--color-silver-pulser);   --unit-accent: var(--color-silver-pulser-dark); }
.page-sitemap .unit-card--magnetic-pulser { border-color: var(--color-magnetic-pulser); --unit-accent: var(--color-magnetic-pulser-dark); }
.page-sitemap .unit-card--water-ozonator  { border-color: var(--color-water-ozonator);  --unit-accent: var(--color-water-ozonator-dark); }
.page-sitemap .unit-card--bio-tuner       { border-color: var(--color-bio-tuner);      --unit-accent: var(--color-bio-tuner-dark); }
.page-sitemap .unit-card--discontinued    { border-color: var(--color-water-ozonator); --unit-accent: var(--color-water-ozonator-dark); }

.page-sitemap .unit-card__head { display: flex; flex-direction: column; gap: 10px; }
.page-sitemap .unit-card__title {
  margin: 0;
  font-size: 1.667em;            /* 30px */
  font-weight: 700;
  line-height: 1;
  color: var(--color-silver-pulser);
}
.page-sitemap .unit-card--magnetic-pulser .unit-card__title { color: var(--color-magnetic-pulser); }
.page-sitemap .unit-card--water-ozonator  .unit-card__title { color: var(--color-water-ozonator); }
.page-sitemap .unit-card--bio-tuner       .unit-card__title { color: var(--color-bio-tuner); }
.page-sitemap .unit-card--discontinued    .unit-card__title { color: var(--color-water-ozonator); }
.page-sitemap .unit-card__sub {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.111;
  color: var(--color-dark);
}
.page-sitemap .unit-card__rule {
  border: 0;
  height: 1px;
  margin: 0;
  background: var(--color-card-border);
}
/* Frame 212: the four-segment multi-colour divider between current and
   previous models. Built in CSS (image-free) from the brand palette;
   if the exact Figma SVG is preferred, drop it in /images/elements and
   this can swap to it. */
.page-sitemap .unit-card__rainbow {
  border: 0;
  height: 3px;
  margin: 0;
  border-radius: 20px;
  background: linear-gradient(
    to right,
    var(--color-silver-pulser)   0%,   var(--color-silver-pulser)   25%,
    var(--color-bio-tuner)       25%,  var(--color-bio-tuner)       50%,
    var(--color-magnetic-pulser) 50%,  var(--color-magnetic-pulser) 75%,
    var(--color-water-ozonator)  75%,  var(--color-water-ozonator)  100%
  );
}

/* -- A model block (open by default: SP8/SP7/SPL2 etc.) ----- */
.page-sitemap .unit-model { display: flex; flex-direction: column; gap: 10px; }
.page-sitemap .unit-model__title {
  margin: 0;
  font-size: 1.222em;            /* 22px */
  font-weight: 700;
  line-height: 1.364;
  color: var(--color-text-muted);
}
.page-sitemap .unit-model__accent { display: flex; gap: 5px; }
.page-sitemap .unit-model__accent span {
  width: 25px;
  height: 3px;
  border-radius: 20px;
}
.page-sitemap .unit-model__accent span:nth-child(1) { background: var(--color-silver-pulser); }
.page-sitemap .unit-model__accent span:nth-child(2) { background: var(--color-bio-tuner); }
.page-sitemap .unit-model__accent span:nth-child(3) { background: var(--color-magnetic-pulser); }

/* Library columns. SP8 uses three; SP7/SPL2 use two. */
.page-sitemap .unit-cols {
  display: grid;
  gap: 30px;
  margin-top: 5px;
}
.page-sitemap .unit-cols--3 { grid-template-columns: repeat(3, 1fr); gap: 50px; }
.page-sitemap .unit-cols--2 { grid-template-columns: repeat(2, 1fr); }
.page-sitemap .unit-cols--1 { grid-template-columns: 1fr; }
.page-sitemap .unit-col { display: flex; flex-direction: column; gap: 30px; }

.page-sitemap .unit-group { display: flex; flex-direction: column; gap: 15px; }
.page-sitemap .unit-group__title {
  margin: 0;
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.389;
  letter-spacing: 0.1em;         /* ~1.8px */
  text-transform: uppercase;
  color: var(--unit-accent);    /* per-card accent */
}
.page-sitemap .unit-group--tips { padding-inline: 10px; }
.page-sitemap .unit-group--tips .unit-group__title { color: var(--color-text-muted); }

.page-sitemap .unit-links { display: flex; flex-direction: column; gap: 15px; }
/* Bullet drawn as ::before rather than list-style:disc. The li is a flex item
   whose <a> wraps a block <div>; Firefox misaligns the native ::marker in that
   case (floats it above-left), so we position our own dot instead. */
.page-sitemap .unit-links li {
  position: relative;
  list-style: none;
  padding-left: 1.5em;
}
.page-sitemap .unit-links li::before {
  content: "";
  position: absolute;
  left: 0.4em;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(59, 59, 59, 0.5);
}
.page-sitemap .unit-links a {
  font-size: var(--text-body);
  line-height: 1.111;
  color: var(--color-dark);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1.5px;
  text-decoration-skip-ink: none;
  text-underline-offset: 4px;  /* sits below the descenders, per Figma */
  transition: text-decoration-color 0.15s ease;
}
.page-sitemap .unit-links a:hover,
.page-sitemap .unit-links a:focus-visible {
  text-decoration-color: var(--color-water-ozonator);   /* #4792bc underline through descenders */
}

/* -- Previous-models block --------------------------------- */
.page-sitemap .unit-prev { display: flex; flex-direction: column; gap: 10px; }
.page-sitemap .unit-prev__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px;
}
.page-sitemap .unit-prev__label {
  margin: 0;
  font-size: 1.222em;            /* 22px */
  font-weight: 700;
  line-height: 1.364;
  letter-spacing: 0.1em;         /* ~2.2px */
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.page-sitemap .unit-prev__badge {
  padding: 0.278em 1.111em;      /* 5/20 */
  background: var(--bg-cream);
  border-radius: 20px;
  font-size: 0.889em;            /* 16px */
  font-weight: 700;
  line-height: 1.563;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--unit-accent);
  white-space: nowrap;
}
.page-sitemap .unit-prev__sub {
  margin: 0 0 20px 0;            /* extra breathing room before the accordion list */
  font-size: var(--text-body);
  line-height: 1.111;
  color: var(--color-dark);
}

/* -- Collapsed accordion rows (site-reveal.js) ------------- */
.page-sitemap .unit-acclist { display: flex; flex-direction: column; gap: 10px; }
.page-sitemap .unit-acc {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  padding: 21px 16px;
  background: var(--bg-cream);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
}
.page-sitemap .unit-acc__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  text-align: left;
}
.page-sitemap .unit-acc__title {
  font-size: 1.222em;            /* 22px */
  font-weight: 700;
  line-height: 1.364;
  color: var(--color-text-muted);
}
.page-sitemap .unit-acc__chevron {
  flex-shrink: 0;
  width: 12px;                   /* icon_down_arrow_green.svg (viewBox 12 x 10) */
  height: 10px;
  color: var(--unit-accent);     /* arrow tint per section (Silver/MP/WOZ/BT/Disc.) */
  transition: transform 0.2s ease;
}
.page-sitemap .unit-acc__trigger[aria-expanded="true"] .unit-acc__chevron { transform: rotate(180deg); }
.page-sitemap .unit-acc__panel { display: flex; flex-direction: column; gap: 20px; }
.page-sitemap .unit-acc__panel[hidden] { display: none; }
.page-sitemap .unit-acc__rule { border: 0; height: 1px; margin: 0; background: var(--color-card-border); }

/* -- Responsive: stack library columns ---------------------- */
@media (max-width: 1024px) {
  .page-sitemap .unit-cols--3,
  .page-sitemap .unit-cols--2 { grid-template-columns: 1fr; gap: 30px; }
}

/* ============================================================
   HELP & SUPPORT  (Figma 8607:611) -- full-bleed cream section
   ============================================================ */
.page-sitemap .help {
  background: var(--bg-cream);
  padding: 80px 20px;
  --unit-accent: var(--color-water-ozonator-dark);        /* column-header / link accent */
}
.page-sitemap .help__inner {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(1200px + 2 * var(--space-container)); /* standard gutters-outside form */
  padding-inline: var(--space-container);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.page-sitemap .help__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
}
.page-sitemap .help__title {
  margin: 0;
  font-size: 2.778em;            /* 50px */
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-water-ozonator);
}
.page-sitemap .help__lead {
  margin: 0;
  font-size: 1.222em;            /* 22px */
  font-weight: 700;              /* Roboto Bold (inherits from Heading 2) */
  line-height: 1.364;
  color: var(--color-dark);
}
.page-sitemap .help__panel {
  padding: 20px 15px;
  border-radius: var(--radius-card);
}
.page-sitemap .help__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 50px;
  align-items: start;
}
.page-sitemap .help__col {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.page-sitemap .help__toplink {
  font-size: 1em;                /* 18px */
  font-weight: 700;
  line-height: 1.389;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--unit-accent);
  text-decoration: none;
}
.page-sitemap .help__toplink:hover { text-decoration: underline; }

@media (max-width: 767px) {
  .page-sitemap { --space-container: 10px; }   /* 10px side gutter on phones */
  .page-sitemap .help__cols { grid-template-columns: 1fr; gap: 30px; }
  .page-sitemap .help { padding: 56px 0; }   /* side gutter comes from .help__inner (10px) */
  .page-sitemap .help__panel { padding-inline: 0; }  /* align panel content to the 10px gutter */
}

/* ============================================================
   BEIGE WAVE DIVIDER  (Figma 8551:4781) -- full-bleed band that
   bridges the cream directory into the white units section.
   Image is 1640x70; scales to viewport width keeping ratio.
   ============================================================ */
.page-sitemap .wave-divider {
  font-size: 0;                  /* remove inline-image whitespace */
  line-height: 0;
}
.page-sitemap .wave-divider img {
  display: block;
  width: 100%;
  height: auto;
}