/*
  AquaPulse site theme — redesign phase two.

  Carries the approved homepage/App page look (serif display headings,
  restrained teal accents, calm pale surfaces, subtle borders) through to
  the educational and utility pages.

  Load order: link this file LAST in <head>, after the page's own styles
  (guide.css, inline <style>, catalog.css), so equal-specificity rules here
  win without !important. It only refines existing components; it never
  redefines layout or the shared header/nav markup.

  Linked by every AquaPulse page except index.html and app.html (which keep
  app-showcase.css) and the My ATS Job App Optimizer pages (ats*.html).
  Scope and maintenance notes: docs/REDESIGN_PHASE_2.md.

  Deep-blue panels are intentionally NOT used here: educational pages stay
  light and readable; the deep-blue phone presentation belongs to product
  pages (homepage app section, /app).
*/

:root {
  /* Same values as assets/app-showcase.css (homepage/App page). Kept in sync
     by hand until rollout consolidates the tokens into one file. */
  --teal: #0f766e;
  --teal-tint: #e3f3f0;
  --serif-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;

  /* Theme-only tokens */
  --teal-ink: #0b4f4a;
  --teal-line: #b9ddd7;
  --reading-size: 17px;
  --reading-leading: 1.72;
}

/* ---------- Page canvas ---------- */

/* Soft top-to-base gradient, matching the App page hero, applied to the
   page rather than one section so breadcrumbs never sit on a seam. */
body {
  background: var(--page-bg) linear-gradient(180deg, var(--page-bg-soft), var(--page-bg) 640px) no-repeat;
}

::selection {
  background: var(--teal-tint);
  color: var(--text);
}

/* ---------- Header: match the homepage/App page brand size ---------- */

@media (min-width: 561px) {
  .brand {
    font-size: 17px;
  }
}

/* ---------- Eyebrows (replace the old pill kickers) ---------- */

/* Same treatment as the App page hero label ("THE AQUAPULSE APP"). */
.hero-tag,
.guide-kicker {
  display: block;
  width: auto;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--teal);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

/* ---------- Display headings (serif, as homepage/App page) ---------- */

.page-hero h1,
.guide-title,
.section-title,
.guide-body h2,
.knowledge-group-heading h2,
.panel > h2,
.theme-display {
  font-family: var(--serif-display);
  font-weight: 500;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.page-hero h1 {
  margin: 0 0 18px;
  max-width: 760px;
  font-size: clamp(34px, 4.6vw, 52px);
  line-height: 1.1;
}

.guide-title {
  max-width: 820px;
  margin: 0 0 22px;
  font-size: clamp(31px, 4.2vw, 46px);
  line-height: 1.12;
}

.section-title {
  line-height: 1.15;
}

.page-hero .section-lead {
  color: var(--soft);
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.65;
}

/* ---------- Shared links & focus ---------- */

.section-lead a,
.panel-copy a,
.guide-body a:not(.related-guide-card):not(.btn):not(.source-ref) {
  color: var(--blue-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.section-lead a:hover,
.panel-copy a:hover,
.guide-body a:not(.related-guide-card):not(.btn):not(.source-ref):hover {
  color: var(--blue);
  text-decoration-thickness: 2px;
}

/* One consistent focus ring for every interactive control. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.breadcrumb-nav {
  padding-block: 20px 6px;
}

/* The mobile menu is a visually hidden checkbox + label; show the ring on
   the visible menu button when the checkbox has keyboard focus. */
.nav-toggle-checkbox:focus-visible ~ .nav-actions .nav-toggle-label {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

/* ---------- Cards ---------- */

.card {
  border-color: var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

a.card,
.related-guide-card {
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

a.card:hover,
.related-guide-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 10px 26px rgba(15, 32, 57, 0.08);
  transform: translateY(-1px);
  color: inherit;
}

/* =========================================================================
   Knowledge Centre & Species directory (knowledge.html, species.html)
   ========================================================================= */

.knowledge-hero-frame {
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 32px rgba(15, 32, 57, 0.14);
}

/* Search & filter panel: a white card, with roomier tap targets. */
.catalog-controls {
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.catalog-search-label {
  margin-bottom: 8px;
  color: var(--text);
  font-size: 14px;
}

/* 16px text stops iOS Safari zooming the page when the field is focused. */
.catalog-search-input {
  min-height: 48px;
  max-width: 520px;
  padding: 11px 16px 11px 42px;
  border-radius: 12px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235b6b80' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 15px center;
  font-size: 16px;
  transition: border-color 160ms ease;
}

.catalog-search-input:hover {
  border-color: var(--muted);
}

.catalog-search-input:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-color: var(--blue);
}

.catalog-filter-row {
  gap: 18px 36px;
  margin-top: 4px;
}

.catalog-filter-group legend {
  margin-bottom: 8px;
  color: var(--blue-deep);
  font-size: 11.5px;
  letter-spacing: 0.1em;
}

.catalog-filter-group label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 4px 0;
  font-size: 14.5px;
}

.catalog-filter-group label:hover {
  color: var(--text);
}

.catalog-filter-group input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--blue);
}

.catalog-filter-group input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.catalog-status-row {
  margin-top: 16px;
  padding-top: 14px;
}

.catalog-chip,
.catalog-clear {
  min-height: 34px;
  padding: 6px 14px;
  transition: border-color 160ms ease, color 160ms ease;
}

.catalog-chip {
  border-color: var(--teal-line);
  background: var(--teal-tint);
  color: var(--teal-ink);
}

.catalog-chip:hover {
  border-color: var(--teal);
}

.catalog-empty {
  background: var(--surface);
  border-radius: var(--radius-lg);
}

/* Hub sections: hairline rule + serif heading, like the homepage lists. */
.knowledge-group {
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--line);
}

.knowledge-group-heading {
  margin-bottom: 8px;
}

.knowledge-group-heading h2 {
  font-size: clamp(25px, 3vw, 32px);
  line-height: 1.15;
}

.knowledge-group-note {
  color: var(--muted);
  font-size: 15px;
}

.species-subgroup-heading {
  color: var(--text);
  font-size: 16px;
}

.pilot-tag,
.cornerstone-tag {
  border-color: var(--teal-line);
  background: var(--teal-tint);
  color: var(--teal-ink);
}

.cornerstone-tag:hover {
  border-color: var(--teal);
  color: var(--teal-ink);
}

.start-here {
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--surface);
}

.start-here-label {
  color: var(--teal);
  font-size: 11.5px;
  letter-spacing: 0.1em;
}

.start-here-list a {
  padding: 5px 0;
  font-size: 14.5px;
}

/* Guide/species cards: same shape as homepage need-list rows. */
.guide-live-card {
  gap: 16px;
}

.guide-live-icon {
  border-radius: 12px;
}

.guide-live-title {
  display: block;
  font-size: 17px;
  line-height: 1.35;
}

.guide-live-body {
  font-size: 14.5px;
}

.guide-live-link {
  color: var(--blue-deep);
}

/* =========================================================================
   Guides (guides/*.html)
   ========================================================================= */

.guide-header {
  padding-block: clamp(16px, 3vw, 28px) clamp(28px, 4vw, 44px);
}

.guide-answer {
  padding: 2px 0 2px 22px;
  border-left-color: var(--teal);
  color: var(--soft);
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.65;
}

/* Reading column: slightly larger leading for long-form calm reading. */
.guide-body p,
.guide-body ul,
.guide-body ol {
  font-size: var(--reading-size);
  line-height: var(--reading-leading);
}

.guide-body h2 {
  margin-bottom: 16px;
  font-size: clamp(25px, 2.8vw, 31px);
  line-height: 1.2;
}

.guide-body h3 {
  font-size: 18.5px;
  line-height: 1.35;
}

.guide-section {
  margin-bottom: clamp(36px, 4.5vw, 52px);
}

/* Small uppercase labels (At a glance / Before adding / On this page). */
.at-a-glance-heading,
.on-this-page-label,
.steps-group-label {
  color: var(--blue-deep);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.at-a-glance-item,
.fit-check-item,
.on-this-page {
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.on-this-page {
  border-radius: var(--radius-lg);
  padding: 18px 22px;
}

.on-this-page-list a {
  font-size: 14px;
}

.fit-check-item h3,
.at-a-glance-item h3 {
  font-size: 14.5px;
}

.fit-check-item p,
.at-a-glance-item p {
  font-size: 15px;
}

/* Tables: white surface, clear header, first column as row label. */
.table-scroll {
  margin: 24px 0;
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.guide-table {
  font-size: 14.5px;
}

.guide-table caption {
  padding: 14px 18px 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.guide-table th,
.guide-table td {
  padding: 13px 18px;
  vertical-align: top;
}

.guide-table thead th {
  border-bottom: 1px solid var(--line-strong);
  background: var(--surface-tint);
  color: var(--soft);
  font-size: 11.5px;
  letter-spacing: 0.08em;
}

.guide-table tbody td:first-child,
.guide-table tbody th {
  color: var(--text);
  font-weight: 700;
}

.guide-table tbody tr:nth-child(even) td,
.guide-table tbody tr:nth-child(even) th {
  background: #fafbfd;
}

/* Callouts: tinted panel with a coloured left rule. The text label inside
   each callout (never colour alone) is kept from the guide markup. */
.callout {
  --callout-accent: var(--line-strong);
  --callout-bg: var(--surface-tint);
  --callout-ink: var(--text);
  margin: 24px 0;
  padding: 18px 20px 18px 22px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--callout-accent);
  border-radius: 6px var(--radius-md) var(--radius-md) 6px;
  background: var(--callout-bg);
  color: var(--soft);
  font-size: 15.5px;
  line-height: 1.68;
}

.callout-info {
  --callout-accent: var(--teal);
  --callout-bg: var(--teal-tint);
  --callout-ink: var(--teal-ink);
  border-color: var(--teal-line);
}

.callout-caution {
  --callout-accent: #c48a0e;
  --callout-bg: var(--amber-tint);
  --callout-ink: #5f4307;
  border-color: #f0dba3;
}

.callout-urgent {
  --callout-accent: var(--red);
  --callout-bg: var(--red-tint);
  --callout-ink: #7a2019;
  border-color: #f0c3bd;
}

.callout-info,
.callout-caution,
.callout-urgent {
  border-left-color: var(--callout-accent);
  color: var(--soft);
}

.callout strong {
  color: var(--callout-ink);
}

.guide-body .callout h3,
.callout h3 {
  margin: 0 0 8px;
  color: var(--callout-ink);
  font-size: 16.5px;
}

.guide-body .callout p {
  margin: 0 0 8px;
  font-size: 15.5px;
  line-height: 1.65;
}

.guide-body .callout p:last-child {
  margin-bottom: 0;
}

.callout a,
.guide-body .callout a {
  color: var(--blue-deep);
}

.disclaimer {
  border-radius: var(--radius-md);
  font-size: 13.5px;
}

.faq-q {
  font-size: 17px;
  line-height: 1.4;
}

.faq-a {
  font-size: 16px;
}

.editorial-box,
.sources-list li {
  background: var(--surface);
}

.related-guide-card h3 {
  font-size: 16px;
}

/* App bridge on guides: stays light (teal tint), never deep blue. */
.bridge {
  border-color: var(--teal-line);
  border-left-color: var(--teal);
  background: var(--teal-tint);
}

/* =========================================================================
   Calculators (form.card is the shared shell on every calculator page)
   ========================================================================= */

form.card label:not([class*="-card"]):not([class*="-option"]),
form.card legend {
  color: var(--text);
}

form.card input[type="number"],
form.card input[type="text"],
form.card select {
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background-color: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  transition: border-color 160ms ease, background-color 160ms ease;
}

form.card input[type="number"]:hover,
form.card input[type="text"]:hover,
form.card select:hover {
  border-color: var(--muted);
}

form.card input[type="number"]:focus-visible,
form.card input[type="text"]:focus-visible,
form.card select:focus-visible {
  border-color: var(--blue);
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

form.card input::placeholder {
  color: #7a889b;
}

/* Invalid state: border + tint + the existing text message. */
form.card input[aria-invalid="true"],
form.card select[aria-invalid="true"] {
  border-color: var(--red);
  background-color: #fff8f7;
}

form.card [id$="-error"]:not(:empty) {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: #b0281e;
  font-size: 13px;
  line-height: 1.45;
}

form.card [id$="-error"]:not(:empty)::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 15h-2v-2h2v2Zm0-4h-2V7h2v6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Zero specificity, so pages that visually hide inputs inside selectable
   cards (Emergency Diagnosis) keep their own rules. */
:where(form.card) :where(input[type="radio"], input[type="checkbox"]) {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

/* ---- Calculator results and options ----
   Every calculator uses the same component names behind its own prefix
   (ac- aquarium, hc- heater, mdc- medication, pfc- planted fertiliser,
   rdc- reef dosing, rmc- RO/DI mixing, smc- saltwater mixing, wcp- water
   change planner, ed- emergency diagnosis, ftc- filter turnover).
   Listed explicitly rather than with wildcard selectors so nothing outside
   these components can match. */

.ac-form,
.hc-form,
.mdc-form,
.pfc-form,
.rdc-form,
.rmc-form,
.smc-form,
.wcp-form,
.ed-form,
.ftc-form,
.ac-results,
.hc-results,
.mdc-results,
.pfc-results,
.rdc-results,
.rmc-results,
.smc-results,
.wcp-results,
.ed-results,
.ftc-results {
  padding: clamp(22px, 3.2vw, 32px);
}

.ac-form-intro,
.hc-form-intro,
.mdc-form-intro,
.pfc-form-intro,
.rdc-form-intro,
.rmc-form-intro,
.smc-form-intro,
.wcp-form-intro,
.ed-form-intro,
.ftc-form-intro {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.ac-field label,
.hc-field label,
.mdc-field label,
.pfc-field label,
.rdc-field label,
.rmc-field label,
.smc-field label,
.wcp-field label,
.ed-field label,
.ftc-field label {
  font-size: 14px;
}

.ac-inline-link a,
.hc-inline-link a,
.mdc-inline-link a,
.pfc-inline-link a,
.rdc-inline-link a,
.rmc-inline-link a,
.smc-inline-link a,
.wcp-inline-link a,
.ed-inline-link a,
.ftc-inline-link a {
  color: var(--blue-deep);
}

.ac-inline-link,
.hc-inline-link,
.mdc-inline-link,
.pfc-inline-link,
.rdc-inline-link,
.rmc-inline-link,
.smc-inline-link,
.wcp-inline-link,
.ftc-inline-link {
  margin: -4px 0 20px;
}

/* Selectable option cards (radio presets). */
.ftc-adjustment-option,
.wcp-radio-card {
  padding: 13px 15px;
  border-color: var(--line);
  transition: border-color 160ms ease, background-color 160ms ease;
}

.ftc-adjustment-option-desc,
.wcp-radio-card-desc {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.ftc-adjustment-option:hover,
.wcp-radio-card:hover {
  border-color: var(--line-strong);
}

.ftc-adjustment-option:has(input:checked),
.wcp-radio-card:has(input:checked) {
  border-color: var(--blue);
  background: var(--blue-tint);
}

.ftc-adjustment-option:has(input:focus-visible),
.wcp-radio-card:has(input:focus-visible) {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.ftc-adjustment-option input:focus-visible,
.wcp-radio-card input:focus-visible {
  outline: none;
}

.ed-symptom-card,
.ed-choice-card,
.ed-level-card {
  transition: border-color 160ms ease, background-color 160ms ease;
}

.ed-symptom-card:hover,
.ed-choice-card:hover,
.ed-level-card:hover {
  border-color: var(--muted);
}

/* Results panel heading */
.ac-results h3,
.hc-results h3,
.mdc-results h3,
.pfc-results h3,
.rdc-results h3,
.rmc-results h3,
.smc-results h3,
.wcp-results h3,
.ed-results h3,
.ftc-results h3,
.ac-results-heading,
.hc-results-heading,
.mdc-results-heading,
.pfc-results-heading,
.rdc-results-heading,
.rmc-results-heading,
.smc-results-heading,
.wcp-results-heading,
.ed-results-heading,
.ftc-results-heading {
  font-family: var(--serif-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Headline result: teal panel. The heater's "not needed"/"optional"
   states keep their own neutral panel, which carries meaning. */
.ac-hero-stat,
.hc-hero-stat:not(.hc-hero-stat-not-needed):not(.hc-hero-stat-optional),
.mdc-hero-stat,
.pfc-hero-stat,
.rdc-hero-stat,
.rmc-hero-stat,
.smc-hero-stat,
.wcp-hero-stat,
.ftc-hero-stat {
  padding: 20px 22px;
  border: 1px solid var(--teal-line);
  background: var(--teal-tint);
}

.ac-hero-stat .ac-hero-label,
.hc-hero-stat:not(.hc-hero-stat-not-needed):not(.hc-hero-stat-optional) .hc-hero-label,
.mdc-hero-stat .mdc-hero-label,
.pfc-hero-stat .pfc-hero-label,
.rdc-hero-stat .rdc-hero-label,
.rmc-hero-stat .rmc-hero-label,
.smc-hero-stat .smc-hero-label,
.wcp-hero-stat .wcp-hero-label,
.ftc-hero-stat .ftc-hero-label,
.ac-hero-stat .ac-hero-sub,
.hc-hero-stat:not(.hc-hero-stat-not-needed):not(.hc-hero-stat-optional) .hc-hero-sub,
.mdc-hero-stat .mdc-hero-sub,
.pfc-hero-stat .pfc-hero-sub,
.rdc-hero-stat .rdc-hero-sub,
.rmc-hero-stat .rmc-hero-sub,
.smc-hero-stat .smc-hero-sub,
.wcp-hero-stat .wcp-hero-sub,
.ftc-hero-stat .ftc-hero-sub,
.ac-hero-stat .ac-hero-value span,
.hc-hero-stat:not(.hc-hero-stat-not-needed):not(.hc-hero-stat-optional) .hc-hero-value span,
.mdc-hero-stat .mdc-hero-value span,
.pfc-hero-stat .pfc-hero-value span,
.rdc-hero-stat .rdc-hero-value span,
.rmc-hero-stat .rmc-hero-value span,
.smc-hero-stat .smc-hero-value span,
.wcp-hero-stat .wcp-hero-value span,
.ftc-hero-stat .ftc-hero-value span {
  color: var(--teal-ink);
}

.ac-hero-label,
.hc-hero-stat:not(.hc-hero-stat-not-needed):not(.hc-hero-stat-optional) .hc-hero-label,
.mdc-hero-label,
.pfc-hero-label,
.rdc-hero-label,
.rmc-hero-label,
.smc-hero-label,
.wcp-hero-label,
.ftc-hero-label {
  font-size: 11.5px;
  letter-spacing: 0.1em;
}

.ac-hero-value,
.hc-hero-value,
.mdc-hero-value,
.pfc-hero-value,
.rdc-hero-value,
.rmc-hero-value,
.smc-hero-value,
.wcp-hero-value,
.ftc-hero-value {
  font-variant-numeric: tabular-nums;
}

.ftc-hero-value {
  font-size: clamp(34px, 5vw, 44px);
}

.ac-result-section-heading,
.hc-result-section-heading,
.mdc-result-section-heading,
.pfc-result-section-heading,
.rdc-result-section-heading,
.rmc-result-section-heading,
.smc-result-section-heading,
.wcp-result-section-heading,
.ed-result-section-heading,
.ftc-result-section-heading {
  color: var(--blue-deep);
  font-size: 11.5px;
  letter-spacing: 0.1em;
}

.ftc-band-item {
  background: var(--surface);
  font-size: 13.5px;
}

.ftc-band-within-range {
  border-color: #bfe3cf;
  background: var(--green-tint);
}

/* =========================================================================
   Support & policy pages (support.html)
   ========================================================================= */

.page-lead {
  max-width: var(--guide-width);
  margin: 0;
  color: var(--soft);
  font-size: clamp(17px, 1.7vw, 19px);
  line-height: 1.65;
}

.contact-card {
  display: grid;
  gap: 4px;
  margin: 8px 0 18px;
  padding: clamp(20px, 3vw, 26px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.guide-body .contact-card p {
  margin: 0;
}

.guide-body .contact-card .contact-email {
  justify-self: start;
  margin: 4px 0;
  color: var(--blue-deep);
  font-size: clamp(20px, 2.6vw, 24px);
  font-weight: 800;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.guide-body .contact-card .contact-response {
  color: var(--muted);
  font-size: 15px;
}

.contact-response strong {
  color: var(--text);
}

/* ---- Long-form policies (privacy.html, cookie-policy.html) ----
   The policy text sits unchanged inside .guide-body.policy-body; these
   rules give its plain h1/.updated/.notice/.company-box/table markup the
   same look as the rest of the site. */

.policy-body {
  padding-block: clamp(16px, 3vw, 28px) var(--section-space);
}

.policy-body h1 {
  margin: 0 0 12px;
  color: var(--text);
  font-family: var(--serif-display);
  font-size: clamp(31px, 4.2vw, 46px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.012em;
  text-wrap: balance;
}

.policy-body .updated {
  margin: 0 0 28px;
  color: var(--muted);
  font-size: 14px;
}

.guide-body.policy-body h2 {
  margin: clamp(34px, 4vw, 46px) 0 14px;
}

.policy-body .notice {
  margin: 24px 0;
  padding: 18px 20px 18px 22px;
  border: 1px solid var(--teal-line);
  border-left: 4px solid var(--teal);
  border-radius: 6px var(--radius-md) var(--radius-md) 6px;
  background: var(--teal-tint);
  color: var(--soft);
  font-size: 15.5px;
  line-height: 1.68;
}

.policy-body .company-box {
  margin: 20px 0;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  color: var(--soft);
  font-size: 15.5px;
  line-height: 1.65;
}

.policy-body .company-box strong {
  color: var(--text);
}

/* Wide table: scrolls inside its own container on narrow screens. */
.policy-body .table-wrap {
  margin: 24px 0;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.policy-body table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14.5px;
}

.policy-body caption {
  padding: 14px 18px 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

.policy-body th,
.policy-body td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--soft);
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
}

.policy-body thead th {
  border-bottom-color: var(--line-strong);
  background: var(--surface-tint);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.policy-body tbody tr:last-child td {
  border-bottom: 0;
}

.policy-body code {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface-tint);
  font-size: 0.88em;
  white-space: nowrap;
}

.policy-body .manage-btn {
  margin: 4px 0 16px;
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  a.card,
  .related-guide-card,
  .catalog-search-input,
  .catalog-chip,
  .catalog-clear,
  form.card input,
  form.card select,
  .ftc-adjustment-option,
  .wcp-radio-card,
  .ed-symptom-card,
  .ed-choice-card,
  .ed-level-card {
    transition: none;
  }

  a.card:hover,
  .related-guide-card:hover {
    transform: none;
  }
}

@media (max-width: 560px) {
  .guide-answer {
    padding-left: 16px;
  }

  .guide-table th,
  .guide-table td {
    padding: 12px 14px;
  }
}