/* ===========================================================
   page-faqs.css  --  Frequently Asked Questions (master FAQ page)
   -----------------------------------------------------------
   Wrapper: .page-faqs      Slug: ?page=Frequently-Asked-Questions
   Loaded by CMS via:
     Out ('\t<link rel="stylesheet" href="'+getVersionedFile('css/page-faqs.css')+'" />\n');

   FRAME WIDTHS
     Desktop: 1640px frame, content at 1200 (Figma 15107:20726)
     Mobile:  NO mobile frame was provided -- clamp mobile
     endpoints use the site-standard 400px basis and the
     established mobile sizes (titles 50->30, hero 54->30);
     flagged as unverified against a mobile design.

   PAGE FONT-SIZE BASE
     font-size: 18px on .page-faqs (dominant Figma paragraph
     size: question titles, rail labels, contact details).
     Every non-clamp size is em against it; clamp endpoints are px.

   CLAMP FORMULA (1200 desktop / 400 mobile basis)
     slope_vw = (desktop_px - mobile_px) / 8
     value    = clamp(mobile_px, slope_vw vw + intercept_px, desktop_px)

   INHERITED FROM CMS-LOADED CSS (not re-declared):
     - font-family: 'Roboto', sans-serif
     - color-scheme: light only
     - .icon mechanics (site-icons.css), .faq__answer list/link
       restore (site-faqs.css), reveal behaviour (site-reveal.js)

   ASCII rule: this file MUST stay ASCII-clean.

   SECTION INDEX (search the block prefix)
     hero      1. Hero (gradient, live search, speech-bubble render)
     topics    2a. Topic rail (sticky panel + scroll-position thumb)
     faqs      2b. FAQ column head + search empty state
     faq-sec   2c. Section cards (reveal per topic; "Open all answers")
     faq       2d. Question rows (reveal per question, gradient rules)
     ask       3. Still have a question? (contact panel + wave)
=========================================================== */

/* -- TOKENS ------------------------------------------------ */
.page-faqs {
  font-size: 18px;
  font-family: 'Roboto', sans-serif;

  /* Ink: this design's text colour throughout is #3b3b3b. */
  --color-ink: #3b3b3b;
  color: var(--color-ink);

  /* Brand colours -- product-named convention. */
  --color-silver-pulser:   #92ca6a; /* green */
  --color-magnetic-pulser: #59afb2; /* teal */
  --color-water-ozonator:  #4792bc; /* blue -- site primary */
  --color-bio-tuner:       #a194c7; /* purple */

  /* Page accent: site-primary blue (non-product page). */
  --color-accent:      var(--color-water-ozonator);
  --color-accent-dark: #3f799a; /* Figma 15121:22510 eyebrow blue */
  --color-dark:        var(--color-ink);   /* .text-dark role */

  /* Surfaces & hairlines */
  --color-white:       #ffffff;
  --color-cream:       #f8f4f2; /* topic panel (Figma color/sand) */
  --color-line:        #e2dbd7; /* card border (Figma sota-line) */
  --color-track:       #d9d9d9; /* rail scroll track */
  --color-field-line:  #d4d4d4; /* search field border */
  --color-placeholder: color-mix(in srgb, #555555 50%, var(--color-white)); /* rgba(85,85,85,.5) on white */
  --color-panel-tint:  #eff9fd; /* contact panel (site light blue) */
  --color-btn-hover:   #555555; /* site-wide blue-button hover */
  --tint-cream:        #f9fbf6; /* hero gradient start */
  --tint-warm-light:   #f5faf0; /* hero gradient mid */
  --tint-azure-light:  #e6f4f8; /* hero gradient end */

  /* The "Gradient SOTA" rule under every question (Figma style):
     blue -> green -> purple, left to right. */
  --gradient-rule: linear-gradient(90deg, var(--color-water-ozonator) 0%, var(--color-silver-pulser) 50%, var(--color-bio-tuner) 100%);

  /* Type scale (clamps: 1200/400 basis, px endpoints) */
  --text-hero:        clamp(30px, 3vw + 18px, 54px);        /* hero H1 54 -> 30 */
  --text-heading:     clamp(30px, 1.75vw + 23px, 44px);     /* "Still have a question?" 44 -> 30 */
  --text-subheading:  1.222em;                              /* 22px, constant (site convention) */
  --text-lead:        clamp(18px, 0.25vw + 17px, 20px);     /* hero + contact lead 20 -> 18 */
  --text-body:        1em;                                  /* 18px */
  --text-col-title:   clamp(26px, 0.5vw + 24px, 30px);      /* "FAQs" column head 30 -> 26 */
  --text-card-title:  clamp(22px, 0.375vw + 20.5px, 25px);  /* section card head 25 -> 22 */
  --text-question:    1em;                                  /* 18px question rows */
  --text-answer:      0.917em;                              /* 16.5px answer copy */
  --text-small:       0.833em;                              /* 15px counts, links, pill labels */
  --text-search:      clamp(18px, 0.5vw + 16px, 22px);      /* search field 22 -> 18 */
  --text-subtitle:    1.111em;                              /* 20px contact values */

  /* Spacing */
  --space-section-y:  clamp(50px, 3.75vw + 35px, 80px);    /* 80 -> 50 */
  --space-container:  clamp(10px, 2.5vw, 30px);            /* 30 -> 10 gutter */
  --space-header-gap: 0.556em;                             /* 10px title-to-subhead (site rule) */
  --space-card-gap:   1.111em;                             /* 20px between section cards */
  --space-rail-gap:   1.111em;                             /* 20px rail-to-column */

  /* Radii (px: corner-matching) */
  --radius-card:   24px;  /* section cards (Figma rounded-24) */
  --radius-card-in: 23px; /* card head inner arc = 24 - 1px border */
  --radius-panel:  20px;  /* topic panel */
  --radius-pillbtn: 12px; /* active topic pill */
  --radius-field:  24px;  /* search field */
  --radius-ask:    32px;  /* contact panel */
  --radius-ask-card: 18px;/* contact cards */
  --radius-pill:   999px;

  /* Sticky-rail clearance below the menu bar. NOTE: anchor jumps are
     offset site-wide by html { scroll-padding-top: 100px } in
     site-menu.css -- do NOT add scroll-margin-top here (they add up). */
  --menu-clearance: 100px;
}

/* -- Required boilerplate ---------------------------------- */
.page-faqs button {
  cursor: pointer; border: none; background: none;
  font-family: inherit; font-size: inherit; line-height: inherit; color: inherit;
}
.page-faqs header { font: inherit; } /* CMS bare-header leak */
.page-faqs .sec-title {
  font-size: var(--text-heading);
  font-weight: 900;
  line-height: 1.227; /* 54/44 */
  margin: 0;
}
.page-faqs a:focus-visible,
.page-faqs button:focus-visible,
.page-faqs input:focus-visible,
.page-faqs [tabindex]:focus-visible {
  outline: 2px solid var(--color-accent-dark);
  outline-offset: 2px;
}

/* -- Shared page utilities --------------------------------- */
.page-faqs .container {
  box-sizing: border-box;
  width: 100%;
  max-width: calc(1200px + 2 * var(--space-container));
  margin-inline: auto;
  padding-inline: var(--space-container);
}
.page-faqs .section { padding-block: var(--space-section-y); }
.page-faqs .text-ink    { color: var(--color-water-ozonator); }
.page-faqs .text-accent { color: var(--color-accent); }
.page-faqs .text-dark   { color: var(--color-dark); }
.page-faqs .brand-sub   { font-size: 0.7em; line-height: 0; vertical-align: -0.15em; }
.page-faqs p { margin: 0; }

/* Pill CTAs (Figma 15121:22526: 15px Roboto Black white on blue,
   r-pill, 20px inline / 5px block padding, 27px line box). */
.page-faqs .pill {
  display: inline-flex;
  align-items: center;
  padding: 0.278em 1.111em; /* 5px 20px at 18 */
  border-radius: var(--radius-pill);
  font-size: var(--text-small);
  font-weight: 900;
  line-height: 1.8; /* 27/15 */
  color: var(--color-white);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.page-faqs .pill:hover { background: var(--color-btn-hover); }
.page-faqs .pill--caps { text-transform: uppercase; letter-spacing: 0.1em; }
.page-faqs .pill--primary { background: var(--color-accent); }

/* === SECTION 1: HERO ====================================== */
/* Figma 15107:20757. Soft cream->blue gradient (177.58deg). */
.page-faqs .hero {
  background: linear-gradient(178deg, var(--tint-cream) 0%, var(--tint-warm-light) 40%, var(--tint-azure-light) 100%);
  padding-block: 1.111em 0; /* 20px top; image sits on the bottom edge */
  overflow: hidden;
}
.page-faqs .hero__inner {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3.75vw + 5px, 50px); /* 50 -> 20 */
}
.page-faqs .hero__text {
  flex: 1 1 0;
  min-width: 18em; /* the image takes the squeeze first (site hero rule) */
  display: flex;
  flex-direction: column;
  gap: 1.222em; /* 22px (Figma container gap) */
  padding-block: 2.222em;
}
.page-faqs .hero__title {
  margin: 0;
  font-size: var(--text-hero);
  font-weight: 400; /* deliberate: the Figma H1 is Regular */
  line-height: 1.08; /* 58.32/54 */
  color: var(--color-ink);
}
.page-faqs .hero__title-accent {
  display: block; /* Figma breaks "ask most." to its own line */
  font-weight: 700;
  color: var(--color-accent);
}
.page-faqs .hero__lead {
  font-size: var(--text-lead);
  line-height: 1.53; /* 30.6/20 */
}
/* Live search field (Figma 15107:21087): white, 1px #d4d4d4, r24,
   10px/20px padding, 22px Regular placeholder at 50% ink. */
.page-faqs .hero__search {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 623px;
  margin: 0;
  background: var(--color-white);
  border: 1px solid var(--color-field-line);
  border-radius: var(--radius-field);
  padding: 0.556em 1.111em; /* 10px 20px */
  gap: 0.556em;
  transition: border-color 0.2s ease;
}
.page-faqs .hero__search:focus-within { border-color: var(--color-accent); }
.page-faqs .hero__search-label {
  position: absolute;
  width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; /* visually hidden */
}
.page-faqs .hero__search-input {
  flex: 1 1 0;
  min-width: 0;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  font: inherit;
  font-size: var(--text-search);
  line-height: 1.227; /* 27/22 */
  color: var(--color-ink);
  -webkit-appearance: none;
  appearance: none;
}
.page-faqs .hero__search-input:focus { outline: none; } /* the wrapper carries the focus ring */
.page-faqs .hero__search:focus-within { outline: 2px solid var(--color-accent-dark); outline-offset: 2px; }
.page-faqs .hero__search-input::placeholder { color: var(--color-placeholder); opacity: 1; }
.page-faqs .hero__search-input::-webkit-search-cancel-button,
.page-faqs .hero__search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.page-faqs .hero__search-icon {
  flex: 0 0 auto;
  font-size: 1.222em; /* 22px glyph */
  color: var(--color-ink);
}
.page-faqs .hero__search-clear {
  flex: 0 0 auto;
  width: 1.333em; height: 1.333em; /* 24px hit box */
  border-radius: 50%;
  font-size: 1.222em;
  line-height: 1;
  color: var(--color-ink);
  background: var(--color-cream);
}
.page-faqs .hero__search-clear:hover { background: var(--color-line); }
.page-faqs .hero__search-status {
  font-size: var(--text-small);
  line-height: 1.333;
  color: var(--color-ink);
  min-height: 1.333em; /* keeps the hero from jumping as it fills */
  margin-top: -0.667em; /* tighten to the field (the column gap is 22px) */
}
.page-faqs .hero__search-status:empty { display: none; }
.page-faqs .hero__media {
  flex: 0 1 558px;
  min-width: 0;
  align-self: flex-end;
}
.page-faqs .hero__img {
  display: block;
  width: 100%;
  max-width: 558px;
  height: auto;
  margin-inline: auto;
}

/* === SECTION 2: FAQS ====================================== */
/* Figma 15107:20774 / 15265:28961. Rail 268 + 20 gap + column. */
.page-faqs .faqs {
  background: var(--color-white);
  padding-top: 2.778em; /* 50px (Figma body at y=50) */
}
.page-faqs .faqs__body {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: var(--space-rail-gap);
  align-items: start;
}

/* --- 2a. Topic rail (Figma 15265:28999) ------------------- */
.page-faqs .topics {
  position: sticky;
  top: var(--menu-clearance);
  display: flex;
  flex-direction: column;
  gap: 0.667em; /* 12px */
}
.page-faqs .topics__title {
  margin: 0;
  font-size: var(--text-subheading);
  font-weight: 500;
  line-height: 1.364; /* 30/22 */
  color: var(--color-ink);
}
.page-faqs .topics__rail {
  display: flex;
  align-items: stretch;
  gap: 9px; /* panel-to-track (px: pixel art) */
}
.page-faqs .topics__panel {
  position: relative; /* thumb offsets measure against this box */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.222em; /* 4px */
  box-sizing: border-box;
  padding: 1.111em; /* 20px */
  background: var(--color-cream);
  border-radius: var(--radius-panel);
}
.page-faqs .topics__link {
  display: flex;
  align-items: center;
  gap: 0.556em; /* 10px */
  padding: 0.444em 0.556em; /* 8px 10px */
  border-radius: var(--radius-pillbtn);
  color: var(--color-ink);
  text-decoration: none;
  line-height: 1.444; /* 26/18 */
  transition: background-color 0.15s ease, color 0.15s ease;
}
.page-faqs .topics__link:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.page-faqs .topics__label {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 500;
}
.page-faqs .topics__count {
  flex: 0 0 auto;
  font-size: var(--text-small);
  line-height: 1.733; /* 26/15 */
  opacity: 0.55;
}
.page-faqs .topics__link.is-active {
  background: var(--color-accent);
  color: var(--color-white);
}
.page-faqs .topics__link.is-active .topics__count { opacity: 0.8; }
.page-faqs .topics__link.is-dim { opacity: 0.45; }
/* Scroll-position indicator: 7px track, 11px accent thumb
   overhanging 2px each side, both r10 (Figma 15265:29035). */
.page-faqs .topics__track {
  position: relative;
  flex: 0 0 7px;
  width: 7px;
  background: var(--color-track);
  border-radius: 10px;
}
.page-faqs .topics__thumb {
  position: absolute;
  left: -2px;
  width: 11px;
  top: 20px;   /* first topic at rest; page-faqs.js tracks the active topic */
  height: 42px;
  border-radius: 10px;
  background: var(--color-accent);
  transition: top 0.3s ease, height 0.3s ease;
}

/* --- 2b. FAQ column head (Figma 15265:28963) -------------- */
.page-faqs .faqs__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-card-gap);
  min-width: 0;
}
.page-faqs .faqs__head {
  display: flex;
  align-items: center;
  gap: 0.778em; /* 14px */
  padding-bottom: 2px;
}
.page-faqs .faqs__title {
  margin: 0;
  font-size: var(--text-col-title);
  font-weight: 500;
  line-height: 1; /* 30/30 */
  color: var(--color-ink);
}
.page-faqs .faqs__sub {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--text-small);
  line-height: 1.333; /* 20/15 */
}
.page-faqs .faqs__empty {
  padding: 1.333em 1.333em; /* 24px */
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
  line-height: 1.5;
}
.page-faqs .faqs__empty a { color: var(--color-accent); }

/* --- 2c. Section cards (Figma 15349:189 set) -------------- */
.page-faqs .faq-sec {
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-card);
}
.page-faqs .faq-sec__head { margin: 0; font: inherit; }
.page-faqs .faq-sec__toggle {
  display: flex;
  align-items: center;
  gap: 0.778em; /* 14px */
  width: 100%;
  box-sizing: border-box;
  padding: 1.167em 1.333em; /* 21px 24px */
  border-radius: var(--radius-card-in); /* inner arc: 24 - 1 border */
  text-align: left;
  color: var(--color-accent);
  transition: background-color 0.2s ease, color 0.2s ease, border-radius 0.2s ease;
}
.page-faqs .faq-sec__toggle:hover { background: color-mix(in srgb, var(--color-accent) 8%, transparent); }
.page-faqs .faq-sec__toggle[aria-expanded="true"] {
  background: var(--color-accent);
  color: var(--color-white);
  border-radius: var(--radius-card-in) var(--radius-card-in) 0 0;
}
.page-faqs .faq-sec__title {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--text-card-title);
  font-weight: 700;
  line-height: 1.2; /* 30/25 */
}
.page-faqs .faq-sec__chevron {
  flex: 0 0 auto;
  font-size: 0.722em; /* 13px box for the 11x8 glyph */
  transition: transform 0.25s ease;
}
.page-faqs .faq-sec__toggle[aria-expanded="true"] .faq-sec__chevron { transform: rotate(180deg); }
/* Body: no vertical padding on a reveal region (site-reveal
   animates height) -- sides only + in-flow spacer below. */
.page-faqs .faq-sec__body { padding: 0 1.333em; } /* 24px sides */
.page-faqs .faq-sec__body::after { content: ''; display: block; height: 1.167em; } /* 21px */
.page-faqs .faq-sec__tools {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.778em; /* 14px */
}
.page-faqs .faq-sec__openall {
  font-size: var(--text-small);
  line-height: 1.333; /* 20/15 */
  text-decoration: underline;
  text-underline-offset: 0.15em;
  color: var(--color-ink);
}
.page-faqs .faq-sec__openall:hover { color: var(--color-accent); }
.page-faqs .faq-sec__list { padding-top: 0.556em; } /* 10px */

/* --- 2d. Question rows (Figma 15348:153) ------------------ */
.page-faqs .faq__item {
  border-top: 1px solid transparent;
  border-image: var(--gradient-rule) 1; /* the "Gradient SOTA" rule */
}
.page-faqs .faq__trigger {
  display: flex;
  align-items: flex-start;
  gap: 0.889em; /* 16px */
  width: 100%;
  box-sizing: border-box;
  padding: 1em 0; /* 18px */
  text-align: left;
  color: var(--color-ink);
  transition: color 0.2s ease;
}
.page-faqs .faq__trigger[aria-expanded="true"] {
  padding-bottom: 0.667em; /* 12px head-to-answer gap when open */
  color: var(--color-accent);
}
.page-faqs .faq__trigger:hover .faq__question { color: var(--color-accent); }
.page-faqs .faq__question {
  flex: 1 1 0;
  min-width: 0;
  font-size: var(--text-question);
  font-weight: 500;
  line-height: 1.5; /* 27/18 */
}
/* Plus / minus: two 2px accent bars in an 18px box (r1). */
.page-faqs .faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 1em; height: 1em; /* 18px */
  margin-top: 0.25em; /* centre on the first 27px line */
}
.page-faqs .faq__icon::before,
.page-faqs .faq__icon::after {
  content: '';
  position: absolute;
  background: var(--color-accent);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.page-faqs .faq__icon::before { left: 0; top: 8px; width: 18px; height: 2px; }
.page-faqs .faq__icon::after  { left: 8px; top: 0; width: 2px; height: 18px; }
.page-faqs .faq__trigger[aria-expanded="true"] .faq__icon::after { transform: scaleY(0); opacity: 0; }
/* Answer region: 16.5/28 copy; sides 0 (the row has no gutter);
   bottom spacing is an in-flow spacer (COMPONENTS.md FAQ close fix). */
.page-faqs .faq__answer {
  padding: 0;
  font-size: var(--text-answer);
  line-height: 1.697; /* 28/16.5 */
  color: var(--color-ink);
}
.page-faqs .faq__answer::after { content: ''; display: block; height: 1.091em; } /* 18px at 16.5 */
.page-faqs .faq__answer p { margin: 0 0 0.727em; } /* 12px paragraph gap */
.page-faqs .faq__answer p:last-child { margin-bottom: 0; }
.page-faqs .faq__answer ul,
.page-faqs .faq__answer ol { margin: 0 0 0.727em; }
.page-faqs .faq__answer li { margin-bottom: 0.364em; }
.page-faqs .faq__answer strong { font-weight: 700; }
/* Search hit highlight (page-faqs.js wraps matches in <mark>) */
.page-faqs .faq__question mark {
  background: color-mix(in srgb, var(--color-silver-pulser) 35%, transparent);
  color: inherit;
  border-radius: 2px;
}

/* === SECTION 3: STILL HAVE A QUESTION? ==================== */
/* Figma 15121:22505. Light-blue panel r32 p60; white cards r18. */
.page-faqs .ask__panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.333em; /* 24px */
  box-sizing: border-box;
  padding: clamp(24px, 4.5vw + 6px, 60px); /* 60 -> 24 */
  background: var(--color-panel-tint);
  border-radius: var(--radius-ask);
}
.page-faqs .ask__lead {
  font-size: var(--text-lead);
  line-height: 1.5; /* 30/20 */
}
.page-faqs .ask__cards {
  display: flex;
  flex-direction: column;
  gap: 0.556em; /* 10px */
  width: 100%;
}
.page-faqs .ask__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.556em; /* 10px */
}
.page-faqs .ask__card {
  display: flex;
  flex-direction: column;
  gap: 0.333em; /* 6px */
  box-sizing: border-box;
  padding: 1.111em; /* 20px */
  background: var(--color-white);
  border-radius: var(--radius-ask-card);
}
.page-faqs .ask__eyebrow {
  font-size: var(--text-body);
  font-weight: 700;
  line-height: 1.389; /* 25/18 */
  letter-spacing: 0.1em; /* 1.8px */
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
.page-faqs .ask__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.111em; /* 20px */
}
.page-faqs .ask__cell {
  display: flex;
  flex-direction: column;
  gap: 0.333em;
}
.page-faqs .ask__value {
  font-size: var(--text-subtitle);
  font-weight: 700;
  line-height: 1.4; /* 28/20 */
}
.page-faqs .ask__detail {
  font-size: var(--text-body);
  line-height: 1.667; /* 30/18 */
}
.page-faqs .ask__tel,
.page-faqs .ask__mail {
  color: inherit;
  text-decoration: none;
}
.page-faqs .ask__tel:hover,
.page-faqs .ask__mail:hover { color: var(--color-accent); text-decoration: underline; }

/* Page-bottom wave into the stats band (site element) */
.page-faqs .section--wave { padding-bottom: 0 !important; }
.page-faqs .page-wave { margin-top: var(--space-section-y); }

/* === RESPONSIVE: 1024 (layout / column count) ============= */
@media (max-width: 1024px) {
  /* Rail + column stack: the topics become one horizontal
     scroller of pills above the sections (no mobile frame --
     best fit, to tune on designer feedback). */
  .page-faqs .faqs__body { grid-template-columns: minmax(0, 1fr); }
  .page-faqs .topics {
    position: static;
    gap: 0.556em;
  }
  .page-faqs .topics__track { display: none; }
  .page-faqs .topics__panel {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 0.333em;
    padding: 0.556em; /* 10px */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .page-faqs .topics__panel::-webkit-scrollbar { display: none; }
  .page-faqs .topics__link { flex: 0 0 auto; white-space: nowrap; }
  .page-faqs .ask__row,
  .page-faqs .ask__pair { grid-template-columns: 1fr; }
}

/* === RESPONSIVE: 767 (phone spacing / stacking) =========== */
@media (max-width: 767px) {
  /* DOCUMENTED EXCEPTION to the "layout at 1024" rule: the hero
     stays side-by-side down to 767 (site hero rule) -- the image
     shrinks in the 768-1024 zone instead of wrapping. */
  .page-faqs .hero__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .page-faqs .hero__media {
    flex-basis: auto;
    align-self: center;
    width: 100%; /* lets the width/height attributes reserve space before load */
  }
  .page-faqs .hero__text {
    min-width: 0;
    padding-block: 1.111em 0; /* 20px top; image sits on the section's bottom edge below */
  }
  .page-faqs .faqs { padding-top: 1.667em; } /* 30px */
  .page-faqs .faqs__head { flex-direction: column; align-items: flex-start; gap: 0.278em; }
  .page-faqs .faq-sec__toggle { padding: 0.889em 1em; } /* 16px 18px */
  .page-faqs .faq-sec__body { padding: 0 1em; }
  .page-faqs .faq__question { font-size: 0.944em; line-height: 1.47; } /* 17/25 */
  .page-faqs .ask__panel { gap: 1em; }
  .page-faqs .pill { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .page-faqs .topics__thumb,
  .page-faqs .topics__link,
  .page-faqs .faq-sec__toggle,
  .page-faqs .faq-sec__chevron,
  .page-faqs .faq__trigger,
  .page-faqs .faq__icon::before,
  .page-faqs .faq__icon::after,
  .page-faqs .pill,
  .page-faqs .hero__search { transition: none; }
}