/**
 * FivoTools - tokens.css
 * Canonical CSS custom properties defining the single global design system.
 * Source: MAIN.html Section 3 & AGENTS.md Section 5.
 */

:root {
  /* ==========================================================================
     Colors
     ========================================================================== */
  /* Brand */
  --color-brand: #315FE8;
  --color-brand-hover: #254ec8;
  --color-brand-active: #1c3ea8;
  --color-brand-strong: #0D2342;
  --color-brand-subtle: #EEF2FD;

  /* Shared header action accent, matched to the FivoSoft reference header. */
  --color-header-action: #514BFF;
  --color-header-action-hover: #433DDF;
  --color-header-action-active: #3731C2;

  /* Accent (Accessible Teal) */
  --color-accent: #0B7E79;
  --color-accent-hover: #08635f;
  --color-accent-subtle: #E8F6F5;

  /* Text */
  --color-text: #14213A;
  --color-text-muted: #667085;
  --color-text-inverse: #FFFFFF;
  --color-footer-muted: #C4D1E5;
  --color-footer-secondary: #AEBED5;
  --color-footer-border: #344967;
  --color-footer-link-line: #819BC3;

  /* Backgrounds & Surfaces */
  --color-bg: #F6F8FB;
  --color-surface: #FFFFFF;
  --color-surface-subtle: #F0F3F8;
  --color-surface-elevated: #FFFFFF;

  /* Borders */
  --color-border: #DDE2EB;
  --color-border-subtle: #EDF1F7;
  --color-border-strong: #CBD5E1;

  /* Feedback / Semantic */
  --color-success: #0B7E79;
  --color-success-bg: #E8F6F5;
  --color-success-border: #99DDD9;

  --color-warning: #B54708;
  --color-warning-bg: #FEF6EE;
  --color-warning-border: #FECDCA;

  --color-danger: #B42318;
  --color-danger-bg: #FEF3F2;
  --color-danger-border: #FECDCA;
  --color-search-highlight-bg: #FFF2A8;
  --color-score-medium: #8A6000;
  --color-score-medium-bg: #FFF4C2;
  --color-score-medium-border: #E8CA66;

  /* Focus */
  --color-focus: #315FE8;
  --color-focus-ring: rgba(49, 95, 232, 0.25);

  /* Typography tokens and heading/paragraph sizing live in typography.css. */

  /* ==========================================================================
     Spacing Rhythm
     ========================================================================== */
  --space-1: 0.25rem;  /* 4px */
  --space-2: 0.5rem;   /* 8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */

  /* ==========================================================================
     Shape & Radii
     ========================================================================== */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  /* ==========================================================================
     Shadows (subtle, clean)
     ========================================================================== */
  --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.04);
  --shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.08), 0 1px 2px -1px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.08), 0 2px 4px -2px rgba(16, 24, 40, 0.04);
  --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);

  /* ==========================================================================
     Layout & Sizing
     ========================================================================== */
  --container-max: 1400px;
  --content-max: 880px;
  --header-height: 4rem;
  --workroom-sidebar-width: 16rem;
  --gutter-mobile: 1rem;
  --gutter-tablet: 1.5rem;
  --gutter-desktop: 2rem;

  /* Shared form controls */
  --field-height: 44px;
  --field-font-size: 1rem;
  --field-padding-inline: var(--space-3);
  --field-radius: var(--radius-md);

  /* ==========================================================================
     Z-Index Scale
     ========================================================================== */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-drawer-backdrop: 250;
  --z-drawer: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-skip-link: 1000;

  /* ==========================================================================
     Transitions
     ========================================================================== */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * FivoTools - utilities.css
 * Global layout, accessibility, and typography utility classes.
 * Source: MAIN.html Section 3 & 5, AGENTS.md Section 4 & 5.
 */

/* ==========================================================================
   Layout Containers
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--gutter-tablet);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: var(--gutter-desktop);
  }
}

/* ==========================================================================
   Accessibility Utilities
   ========================================================================== */
.sr-only,
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border-width: 0 !important;
}

.skip-link {
  position: absolute;
  top: -9999px;
  left: var(--space-4);
  background-color: var(--color-brand-strong);
  color: var(--color-text-inverse);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: var(--z-skip-link);
  text-decoration: none;
  font-weight: var(--weight-semibold);
  box-shadow: var(--shadow-md);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-4);
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* ==========================================================================
   Typography & Number Formatting
   ========================================================================== */
.tabular-nums {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.text-muted {
  color: var(--color-text-muted);
}

.text-brand {
  color: var(--color-brand);
}

/* Secondary actions rendered inside Preact tool islands. */
.tool-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: var(--weight-semibold);
  text-align: center;
  cursor: pointer;
}
.tool-action-button:hover:not(:disabled) {
  border-color: var(--color-brand);
  color: var(--color-brand);
}
.tool-action-button:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
.tool-action-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.tool-action-button--primary {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-text-inverse);
}
.tool-action-button--primary:hover:not(:disabled) {
  border-color: var(--color-brand-hover);
  background: var(--color-brand-hover);
  color: var(--color-text-inverse);
}

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg { font-size: var(--text-lg); }
.text-xl { font-size: var(--text-xl); }

.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }

.text-center { text-align: center; }
.text-right { text-align: right; }

/* ==========================================================================
   Surfaces & Borders
   ========================================================================== */
.surface-subtle {
  background-color: var(--color-surface-subtle);
  border-radius: var(--radius-md);
}

/* ==========================================================================
   Flex & Grid Utilities
   ========================================================================== */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.flex-wrap { flex-wrap: wrap; }

.grid { display: grid; }

/* Stack flow rhythm */
.flow > * + * {
  margin-top: var(--space-4);
}

/**
 * Shared heading and paragraph typography for every public page.
 * Change the scale below to resize the site. Role selectors keep homepage,
 * tool titles, prose, cards and help text distinct without local size rules.
 * Keep new h1–h6 / p font-size rules here, including responsive variants.
 * Document previews and exported PDF/canvas text have independent user settings.
 */

:root {
  /* ==========================================================================
     Typography
     ========================================================================== */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Type Scale */
  --text-xs: clamp(0.78rem, 0.75rem + 0.1vw, 0.82rem);
  --text-sm: clamp(0.875rem, 0.84rem + 0.12vw, 0.94rem);
  --text-base: clamp(1rem, 0.98rem + 0.08vw, 1.05rem);
  --text-lg: clamp(1.125rem, 1.06rem + 0.25vw, 1.25rem);
  --text-xl: clamp(1.3rem, 1.18rem + 0.45vw, 1.55rem);
  --heading-sm: clamp(1.45rem, 1.25rem + 0.7vw, 1.8rem);
  --heading-md: clamp(1.8rem, 1.5rem + 1vw, 2.35rem);
  --heading-lg: clamp(2.15rem, 1.75rem + 1.7vw, 3.2rem);
  --heading-xl: clamp(2.55rem, 2rem + 2.5vw, 4.25rem);

  /* Compact, uniform tool-workspace roles. */
  --text-tool-heading: 1.125rem; /* 18px */
  --text-tool-label: 0.875rem;   /* 14px */
  --text-tool-control: 1rem;    /* 16px; readable native inputs on phones */

  /* Line Heights */
  --line-tight: 1.15;
  --line-heading: 1.25;
  --line-snug: 1.375;
  --line-normal: 1.6;
  --line-relaxed: 1.7;

  /* Font Weights */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
}

/* Default semantic hierarchy; paragraphs never inherit a tiny panel label. */
h1 { font-size: var(--heading-xl); }
.workroom-nav-label, .workroom-status { font-size: var(--text-sm); }
.workroom-page h1 { font-size: var(--heading-sm); }
.auth-field-error, .auth-error-message, .auth-notice .alert__title { font-size: var(--text-sm); }
.auth-eyebrow { font-size: var(--text-sm); }
.auth-heading h1 { font-size: var(--heading-sm); }
h2 { font-size: var(--heading-lg); }
h3 { font-size: var(--heading-md); }
h4 { font-size: var(--heading-sm); }
h5 { font-size: var(--text-xl); }
h6 { font-size: var(--text-lg); }
p { font-size: var(--text-base); }

/* Workroom headings and search summary use the same global type scale. */
.workroom-dashboard h2,
.workroom-dashboard-recent-header h2 { font-size: var(--text-lg); }
.blog-view-header h2 { font-size: var(--heading-md); }
.blog-view-body h2 { font-size: var(--heading-sm); }
.blog-view-body h3,
.blog-view-body h4 { font-size: var(--text-lg); }
.blog-view-panel h3 { font-size: var(--text-base); }
.blog-view-search p { font-size: var(--text-sm); }
@container blog-view (max-width: 48rem) {
  .blog-view-header h2 { font-size: var(--heading-sm); }
}

/* Shared roles, including existing component class names. */
.about-hero h1,
.hero h1 {
  font-size: var(--heading-xl);
}

.content-page__title,
.not-found-page__heading,
.category-hero__title,
.contact-hero__copy h1,
.promise-section h2,
.bfc-result-number {
  font-size: var(--heading-lg);
}

.ai-editorial-prose h2,
.asphalt-editorial h2,
.editorial-block h2,
.dm-editorial-prose h2,
.gc-editorial h2,
.heic-editorial-prose h2,
.pc-editorial-prose h2,
.pr-editorial-prose h2,
.qr-editorial-prose h2,
.rbc-editorial h2,
.rp-editorial h2,
.rm-editorial h2,
.sh-editorial-prose h2,
.tc-editorial-prose h2,
.content-page__prose h2,
.about-section-heading h2,
.about-accuracy h2,
.about-contact h2,
.hub-section__title,
.hub-guide-prose h2,
.contact-section-heading h2,
.contact-help h2,
.guides-hero h1,
.guides-library__intro h2,
.guides-method h2,
.section-heading h2,
.method-section h2,
.bfc-editorial h2,
.catalog-header__title,
.irs-print-title {
  font-size: var(--heading-md);
}

.asphalt-editorial h3,
.content-page__prose h3,
.tool-related-guide h2,
.tool-hero__title,
.guide-preview h3,
.spotlight h2,
.more-heading h3,
.report-card h2,
.avif-list-title,
.bfc-editorial h3,
.ct-panel-title,
.ct-results-title,
.ct-empty-heading,
.dc-card-title,
.dc-results-header h2,
.fc-card-title,
.fc-section-title,
.fc-results-title,
.ic-config-title,
.ic-list-title,
.ic-modal-title,
.ic-card-title,
.ic-results-header h2,
.irs-section-title,
.jc-section-title,
.jc-results-title,
.rbc-card-title,
.rbc-results-header h2,
.topsoil-panel-title,
.topsoil-results-title,
.topsoil-empty-heading {
  font-size: var(--heading-sm);
}

.about-hero__lead,
.hub-section--prose h2,
.hub-section--faq h2,
.mpdf-result-title {
  font-size: var(--text-xl);
}

.analytics-consent__title,
.empty-state__title,
.guide-card__title,
.tool-card__title,
.ai-editorial-prose h3,
.heic-editorial-prose h3,
.pc-editorial-prose h3,
.rbc-editorial h3,
.sh-editorial-prose h3,
.content-page__subtitle,
.about-work__card h3,
.about-principles h3,
.category-hero__desc,
.hub-guide-prose h3,
.contact-hero__copy p,
.hero__lede,
.promise-grid h3,
.trust-grid h3,
.asphalt-panel-title,
.form-card-title,
.resume-preview-heading h2,
.bfc-section-title,
.dc-section h3,
.dc-breakdown h3,
.fc-section h3,
.fc-details h3,
.ic-section h3,
.mpdf-queue-heading,
.opdf-result-title,
.pr-section-title,
.p2i-results-title,
.rbc-subheading,
.rp-section-title,
.rp-results-title,
.spdf-result-title,
.tc-section-title {
  font-size: var(--text-lg);
}

.alert__title,
.ai-editorial-prose p,
.editorial-block p,
.formula-card h3,
.faq-item h3,
.editorial-block h3,
.heic-editorial-prose p,
.step-card h3,
.feature-card h3,
.pc-editorial-prose p,
.faq-card h3,
.sh-editorial-prose p,
.not-found-page__text,
.hub-section__subtitle,
.workflow-step h3,
.hub-guide-prose p,
.guide-cta-banner h3,
.guides-hero > p,
.ai-panel-title,
.asphalt-section-heading h3,
.asphalt-breakdown h3,
.asphalt-empty-state h3,
.bfc-reverse-price h3,
.bfc-cost-summary h3,
.bfc-breakdown h3,
.bir-files-title,
.bir-settings-title,
.cp-panel-title,
.cp-results-title,
.cp-empty-heading,
.cover-letter-workspace .form-section-title,
.dm-section-title,
.dm-results-title,
.dc-subheading h3,
.dc-area-result h4,
.dc-empty-result h3,
.fc-error-summary h3,
.fc-result-subheading,
.fc-empty-result h3,
.fc-subsection-title,
.gc-panel-title,
.itp-pages-title,
.itp-settings-title,
.catalog-header__intro,
.ic-openings h4,
.ic-error-summary h3,
.ic-breakdown h3,
.ic-area-result h4,
.ic-empty-result h3,
.mpdf-result-desc,
.opdf-result-desc,
.ot-mode-title,
.ot-results-title,
.ot-empty-heading,
.pc-panel-title,
.pr-results-title,
.mm-section-title,
.qr-options-heading,
.preview-title,
.rbc-error-summary h3,
.ra-panel-title,
.rp-optional h3,
.rm-section-title,
.rm-results-title,
.rm-empty-title,
.sh-panel-title,
.spdf-result-desc,
.tc-options-title,
.tc-summary-title {
  font-size: var(--text-base);
}

.analytics-consent__message,
.site-footer__brand p,
.site-footer__group h2,
.tools-dropdown__status,
.tools-dropdown__head p,
.empty-state__desc,
.guide-card__desc,
.tool-card__desc,
.formula-card p,
.faq-answer p,
.faq-item p,
.formula-code,
.step-card p,
.feature-card p,
.faq-card p,
.content-page__category-links,
.tool-related-guide p,
.tool-hero__desc,
.search-title,
.helpful-title,
.about-hero__aside p,
.about-work__card p,
.about-principles p,
.about-contact p,
.workflow-step p,
.contact-email-card p,
.contact-help li p,
.contact-help__note p,
.guide-cta-banner p,
.guides-library__aside,
.guide-preview p,
.spotlight p,
.more-heading p,
.promise-grid p,
.trust-grid p,
.pn-section-title,
.ai-empty-title,
.asphalt-header-note,
.asphalt-planning-intro,
.asphalt-form-error,
.asphalt-density-note,
.asphalt-empty-state p,
.resume-card-heading p,
.bfc-measurement-help,
.bfc-note,
.bfc-linear-note,
.bfc-disclaimer,
.bfc-field .field-hint,
.bfc-field .field-error,
.bfc-reverse-price > p,
.bfc-result-sub,
.bfc-editorial .bfc-privacy,
.bfc-editorial .bfc-sources,
.bir-feature-title,
.cp-section-title,
.dm-joint-note,
.dc-card-intro,
.dc-help,
.dc-error,
.dc-sheet-result p,
.dc-disclaimer,
.dc-privacy-note,
.dc-area-result > p,
.dc-cost-warning,
.dc-status,
.dc-empty-result p,
.eg-form-heading,
.eg-section-title,
.eg-totals-title,
.eg-acceptance-text,
.fc-card-intro,
.fc-help,
.fc-error,
.fc-empty-note,
.fc-status,
.fc-span-card p,
.fc-empty-result p,
.fc-disclaimer,
.fc-warning,
.fc-section-desc,
.fc-action-message,
.gc-empty-title,
.itp-feature-title,
.catalog-header__count,
.ic-card-intro,
.ic-help,
.ic-error,
.ic-status,
.ic-package-result p,
.ic-disclaimer,
.ic-privacy-note,
.ic-empty-result p,
.ig-toolbar-heading p,
.ig-finish p,
.jc-section-desc,
.mpdf-queue-sub,
.pc-empty-title,
.p2i-results-sub,
.mm-message,
.mm-disclaimer,
.example-card h3,
.disclaimer-box h3,
.qr-preview-status,
.rbc-card-intro,
.rbc-help,
.rbc-privacy,
.rbc-status,
.rbc-results-status,
.rbc-error,
.rbc-safety-note,
.rbc-neutral-warning,
.ra-input-intro,
.ra-section-title,
.ra-breakdown-title,
.ra-error-message,
.ra-empty-title,
.rp-optional p,
.rp-result-help,
.rp-message,
.rp-disclaimer,
.rm-inputs-card .field-hint,
.rm-message,
.rm-empty-desc,
.sh-empty-title,
.tc-boundary-warning {
  font-size: var(--text-sm);
}

.analytics-consent__details,
.site-footer__bottom p,
.mobile-nav-tagline,
.tool-session__status,
.helpful-contact,
.contact-composer__action p,
.formula-example,
.ai-footnote,
.ai-empty-desc,
.ai-message,
.asphalt-field-help,
.asphalt-result-note,
.asphalt-live-message,
.avif-bg-hint,
.bir-feature-desc,
.bir-files-sub,
.bir-settings-sub,
.cp-panel-subtitle,
.cp-subpanel-title,
.cp-currency-note,
.cp-results-sub,
.cp-breakdown-title,
.cp-table-title,
.cp-tip-text,
.cp-empty-text,
.ct-panel-subtitle,
.ct-subpanel-title,
.ct-results-sub,
.ct-cue-text,
.ct-breakdown-title,
.ct-table-title,
.ct-empty-text,
.cover-letter-workspace .privacy-hint-note,
.cover-letter-workspace .preview-title,
.dm-disclaimer,
.eg-scope-hint,
.field-help,
.field-error,
.fc-table-heading,
.gc-empty-desc,
.gc-message,
.itp-feature-desc,
.itp-pages-sub,
.itp-settings-sub,
.itp-help-text,
.ic-area-result > p,
.ig-status,
.ig-currency-note,
.irs-help-text,
.irs-card-disclaimer,
.irs-print-sub,
.jc-status-message,
.ot-mode-desc,
.ot-error,
.ot-mode-note,
.ot-results-sub,
.ot-breakdown-title,
.ot-table-title,
.ot-tip-text,
.ot-empty-text,
.pc-footnote,
.pc-empty-desc,
.pc-message,
.field-hint,
.pr-table-hint,
.pr-disclaimer,
.mm-callout-desc,
.formula-box p,
.disclaimer-box p,
.alert-warning,
.preview-disclaimer,
.ra-breakdown-card p,
.ra-message,
.ra-footnote,
.ra-empty-text,
.rm-breakdown-title,
.rm-result-help,
.sh-footnote,
.sh-empty-desc,
.sh-message,
.tc-settings-summary,
.topsoil-panel-subtitle,
.topsoil-subpanel-title,
.topsoil-results-sub,
.topsoil-cue-text,
.topsoil-breakdown-title,
.topsoil-table-title,
.topsoil-empty-text {
  font-size: var(--text-xs);
}

/* Compact titles and breakdown cards on narrow screens. */
@media (max-width: 639px) {
  .contact-hero__copy h1 {
    font-size: var(--heading-md);
  }

  .contact-hero__copy p,
  .bfc-result-row h4 {
    font-size: var(--text-base);
  }

  .hero h1 {
    font-size: var(--heading-lg);
  }
}

@media (max-width: 599px) {
  .asphalt-breakdown-card h4 {
    font-size: var(--text-sm);
  }

  .asphalt-breakdown-card p {
    font-size: var(--text-xs);
  }
}

/* Explicit shared roles for inline tool notices and dialog headings. */
:is(h1, h2, h3, h4, h5, h6, p).type-heading-xl { font-size: var(--heading-xl); }
:is(h1, h2, h3, h4, h5, h6, p).type-heading-lg { font-size: var(--heading-lg); }
:is(h1, h2, h3, h4, h5, h6, p).type-heading-md { font-size: var(--heading-md); }
:is(h1, h2, h3, h4, h5, h6, p).type-heading-sm { font-size: var(--heading-sm); }
:is(h1, h2, h3, h4, h5, h6, p).type-text-xl { font-size: var(--text-xl); }
:is(h1, h2, h3, h4, h5, h6, p).type-text-lg { font-size: var(--text-lg); }
:is(h1, h2, h3, h4, h5, h6, p).type-text-base { font-size: var(--text-base); }
:is(h1, h2, h3, h4, h5, h6, p).type-text-sm { font-size: var(--text-sm); }
:is(h1, h2, h3, h4, h5, h6, p).type-text-xs { font-size: var(--text-xs); }

/* Workspace titles share one compact size irrespective of their semantic level.
   Public page titles and editorial headings keep their separate hierarchy. */
.tool-page .tool-workspace :is(h2, h3, h4, h5, h6) {
  font-size: var(--text-tool-heading);
  font-weight: var(--weight-semibold);
  line-height: var(--line-snug);
}

.tool-page .tool-workspace label {
  font-size: var(--text-tool-label);
  font-weight: var(--weight-semibold);
  line-height: var(--line-snug);
}

.tool-page .tool-workspace :is(select, option) {
  --field-font-size: var(--text-tool-control);
  font-size: var(--text-tool-control);
  font-weight: var(--weight-normal);
}

@media (min-width: 768px) {
  :root {
    --text-tool-control: 0.875rem;
  }
}

/* Server-rendered public article roles share the global type scale. */
.article-header h1 { font-size: var(--heading-md); }
.article-summary { font-size: var(--text-base); }
.article-body h2 { font-size: var(--heading-sm); }
.article-body h3 { font-size: var(--text-xl); }
.article-body h4 { font-size: var(--text-lg); }

/* Public article discovery roles. */
.blog-index-header h1 { font-size: var(--heading-md); }
.blog-index-header > p:last-child { font-size: var(--text-base); }
.blog-library-heading h2 { font-size: var(--text-xl); }
.blog-card h3 { font-size: var(--text-xl); }
.blog-card-excerpt { font-size: var(--text-base); }

/* Catalog supporting headings remain subordinate to its page title. */
.catalog-section__heading, .catalog-guidance h2 { font-size: var(--text-xl); }
.catalog-guidance__text { font-size: var(--text-base); }

/* Workroom and public blog typography share the global scale. */
.workroom-topbar-title {
    font-size: var(--text-base)
}
.workroom-page-heading h1 {
    font-size: var(--heading-md)
}
.blog-page-layout:has(.blog-library-heading) > .workroom-page-heading h1 {
    font-size: var(--heading-sm)
}
.blog-table.blog-post-table { font-size: var(--text-xs); }
.blog-table-heading p {
    font-size: var(--text-sm)
}
.blog-empty-state h3 {
    font-size: var(--text-lg)
}
.blog-empty-state p {
    font-size: var(--text-sm)
}
.blog-detail-head h2 {
    font-size: var(--heading-sm)
}
.blog-detail-block h3 {
    font-size: var(--text-base)
}
.blog-seo-checks > p {
    font-size: var(--text-xs)
}
.blog-section-header > p {
    font-size: var(--text-xs)
}
.blog-section-header h4 {
    font-size: var(--text-sm)
}
.blog-link-dialog h3 {
    font-size: var(--text-base)
}
.blog-category-dialog > header h2 {
    font-size: var(--heading-sm)
}
.blog-rich-content h2 {
    font-size: var(--heading-sm)
}
.blog-rich-content h3 {
    font-size: var(--text-lg)
}
.blog-side-card-heading h3, .blog-publish-card h3 {
    font-size: var(--text-base)
}
.blog-audit-overview p {
    font-size: var(--text-xs)
}
.blog-audit-group h4 {
    font-size: var(--text-xs)
}
.blog-seo-audit-card .blog-seo-checks > p {
    font-size: var(--text-xs)
}
.blog-audit-method p {
    font-size: var(--text-xs)
}
.blog-schema-fieldset h4 {
    font-size: var(--text-sm)
}
.blog-publish-card h3 {
    font-size: var(--text-base)
}
.workroom-page:has(.blog-editor-page) .workroom-page-heading h1 {
    font-size: var(--heading-sm)
}
.blog-disclosure p {
    font-size: var(--text-xs)
}
@media (max-width: 899px) {
    .workroom-page-heading h1 {
        font-size: var(--heading-sm)
    }
}
@container blog-list (max-width: 52rem) {
    .blog-empty-state h3 {
        font-size: var(--text-base)
    }
}
.home-articles-section .section-heading h2 {
    font-size: var(--heading-sm)
}
.home-article-card h3 {
    font-size: var(--heading-sm)
}
@media (max-width:560px) {
    .home-articles-section .section-heading p {
        font-size: var(--text-sm)
    }
}
@media (max-width:560px) {
    .home-article-card h3 {
        font-size: var(--text-base)
    }
}

.site-header { position: sticky; top: 0; z-index: var(--z-sticky); width: 100%; background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-xs); }
  .site-header__inner { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-5); width: min(var(--container-max), calc(100% - 2 * var(--gutter-desktop))); min-height: 76px; margin-inline: auto; }
  .site-header__brand { display: flex; align-items: center; flex: none; width: 158px; min-height: 48px; text-decoration: none; }
  .site-header__brand-picture { display: block; width: 100%; }
  .site-header__brand img { display: block; width: 100%; height: auto; }
  .site-header__brand-divider, .site-header__actions-divider { display: block; flex: none; width: 1px; height: 36px; background: var(--color-border); }
  .site-header__nav { display: flex; flex: 1; align-self: stretch; align-items: center; min-width: 0; margin-inline-start: var(--space-3); }
  .nav-list { display: flex; align-items: center; gap: clamp(var(--space-4), 2.2vw, var(--space-8)); height: 100%; padding: 0; margin: 0; list-style: none; }
  .nav-list > li { display: flex; align-items: center; height: 100%; margin: 0; }
  .nav-link { display: inline-flex; align-items: center; min-height: 44px; position: relative; color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap; }
  .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; border-radius: var(--radius-full); background: var(--color-brand); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-fast); }
  .nav-link:hover, .nav-link--active { color: var(--color-brand-strong); }
  .nav-link:hover::after, .nav-link--active::after { transform: scaleX(1); }
  .nav-link--active { font-weight: var(--weight-semibold); }
  .nav-item--tools { position: relative; gap: var(--space-1); }
  .tools-toggle { position: relative; display: grid; place-items: center; width: 24px; height: 44px; margin-left: calc(-1 * var(--space-2)); padding: 0; border: 0; border-radius: var(--radius-full); appearance: none; background: transparent; color: var(--color-text); font: inherit; cursor: pointer; }
  .tools-toggle svg { position: relative; z-index: 1; width: 16px; height: 16px; transition: transform var(--transition-fast); }
  .nav-item--tools[data-open] .tools-toggle svg, .nav-item--tools:hover .tools-toggle svg, .nav-item--tools:focus-within .tools-toggle svg { transform: rotate(180deg); }
  .tools-dropdown { position: fixed; top: 75px; left: 50%; width: min(1160px, calc(100vw - 2 * var(--gutter-desktop))); max-height: calc(100dvh - 86px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--color-border); border-radius: 0 0 var(--radius-xl) var(--radius-xl); background: var(--color-surface); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-50%) translateY(-6px); transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast); }
  .nav-item--tools[data-open] .tools-dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
  .tools-dropdown__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) var(--space-6); border-bottom: 1px solid var(--color-border); background: linear-gradient(110deg, var(--color-brand-subtle), var(--color-surface) 65%); }
  .tools-dropdown [hidden] { display: none !important; }
  .tools-dropdown__actions { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
  .tools-dropdown__search { width: min(280px, 30vw); }
  .tools-dropdown__results { padding: var(--space-5) var(--space-6); }
  .tools-dropdown__results-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .tools-dropdown__status { margin: 0 0 var(--space-3); color: var(--color-text-muted); }
  .tools-dropdown__result { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); text-decoration: none; }
  .tools-dropdown__result:hover { border-color: var(--color-brand); background: var(--color-brand-subtle); }
  .tools-dropdown__result strong { color: var(--color-brand-strong); font-size: var(--text-sm); }
  .tools-dropdown__result span { color: var(--color-text-muted); font-size: var(--text-xs); }
  .tools-dropdown__eyebrow { display: block; margin-bottom: 2px; color: var(--color-brand); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: .09em; }
  .tools-dropdown__head strong { display: block; color: var(--color-brand-strong); font-size: var(--text-lg); line-height: var(--line-tight); }
  .tools-dropdown__head p { margin: var(--space-1) 0 0; color: var(--color-text-muted); }
  .tools-dropdown__all { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 36px; padding: 0 var(--space-3); flex: none; border: 1px solid var(--color-brand); border-radius: var(--radius-md); color: var(--color-brand); background: var(--color-surface); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; }
  .tools-dropdown__all:hover { background: var(--color-brand); color: var(--color-text-inverse); }
  .tools-dropdown__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--space-3) var(--space-4) var(--space-4); }
  .tools-dropdown__column { display: flex; flex-direction: column; min-width: 0; padding: 0 var(--space-4); }
  .tools-dropdown__column + .tools-dropdown__column { border-left: 1px solid var(--color-border-subtle); }
  .tools-dropdown__group { min-width: 0; padding-bottom: var(--space-2); }
  .tools-dropdown__group + .tools-dropdown__group { padding-top: var(--space-2); border-top: 1px solid var(--color-border-subtle); }
  .tools-dropdown__group:last-child { padding-bottom: 0; }
  .tools-dropdown__category { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 28px; margin-bottom: 2px; color: var(--color-brand-strong); font-size: 13px; font-weight: var(--weight-bold); line-height: var(--line-snug); text-decoration: none; }
  .tools-dropdown__category::before { content: ''; flex: none; width: 3px; height: 16px; border-radius: var(--radius-full); background: var(--color-brand); }
  .tools-dropdown__category span { margin-left: auto; color: var(--color-brand); font-size: var(--text-base); font-weight: var(--weight-medium); }
  .tools-dropdown__links { display: flex; flex-direction: column; }
  .tools-dropdown__tool { display: flex; align-items: center; min-height: 25px; padding: 2px var(--space-2); border-radius: var(--radius-sm); color: var(--color-text); font-size: 13px; line-height: 1.3; text-decoration: none; }
  .tools-dropdown__tool:hover { background: var(--color-brand-subtle); color: var(--color-brand); }
  .tools-dropdown__category:hover { color: var(--color-brand); }
  .site-header__actions { display: flex; align-items: center; flex: none; gap: var(--space-5); margin-inline-start: auto; }
  .site-header-report { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-5); border: 1px solid var(--color-header-action); border-radius: var(--radius-md); background: var(--color-header-action); color: var(--color-text-inverse); box-shadow: var(--shadow-xs); font-size: var(--text-sm); font-weight: var(--weight-semibold); text-decoration: none; white-space: nowrap; transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); }
  .site-header-report:hover { border-color: var(--color-header-action-hover); background: var(--color-header-action-hover); color: var(--color-text-inverse); transform: translateY(-1px); }
  .site-header-report:active { border-color: var(--color-header-action-active); background: var(--color-header-action-active); transform: none; }
  .site-header-report__bug { width: 16px; height: 16px; flex: none; }
  .site-header-report__arrow { width: 15px; height: 15px; flex: none; }
  .mobile-menu-button { display: none; align-items: center; justify-content: center; gap: var(--space-2); min-width: 44px; min-height: 44px; padding: 0 var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-brand-strong); font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; }
  .mobile-menu-button svg { width: 20px; height: 20px; }
  .site-header a:focus-visible, .site-header button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
  .site-header .tools-toggle:focus-visible { outline: none; }
  .site-header .tools-toggle:focus-visible::before { content: ''; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; border: 2px solid var(--color-focus); border-radius: var(--radius-full); transform: translate(-50%, -50%); pointer-events: none; }
  @media (max-width: 899px) { .site-header__inner { width: calc(100% - 2 * var(--gutter-tablet)); min-height: 64px; gap: var(--space-3); } .site-header__brand { width: 132px; } .site-header__brand-divider, .site-header__nav, .site-header__actions-divider { display: none; } .site-header__actions { margin-inline-start: auto; } .site-header-report { min-height: 44px; padding: 0 var(--space-2); border-radius: var(--radius-md); font-size: var(--text-xs); } .site-header-report__bug { width: 14px; height: 14px; } .site-header-report__arrow { display: none; } .mobile-menu-button { display: inline-flex; } }
  @media (max-width: 639px) { .site-header__inner { width: calc(100% - 2 * var(--gutter-mobile)); } }
  @media (max-width: 1050px) and (min-width: 900px) { .tools-dropdown__search { width: 240px; } }
  @media (max-width: 359px) { .site-header__inner { gap: var(--space-1); } .site-header__brand { width: 118px; } .site-header-report { padding-inline: 6px; } .mobile-menu-button__label { display: none; } }
  @media (prefers-reduced-motion: reduce) { .nav-link::after, .tools-toggle svg, .tools-dropdown { transition: none; } }

.mobile-nav-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(13, 35, 66, 0.45);
    backdrop-filter: blur(2px);
    z-index: var(--z-drawer-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
  }

  .mobile-nav-backdrop--open {
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(90vw, 350px);
    background-color: var(--color-surface);
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
    transform: translateX(-100%);
    transition: transform var(--transition-base);
  }

  .mobile-nav-drawer--open {
    transform: translateX(0);
  }

  .mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-5);
    border-bottom: 1px solid var(--color-border-subtle);
    min-height: var(--header-height);
  }

  .mobile-nav-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    text-decoration: none;
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    color: var(--color-brand-strong);
  }
  .mobile-nav-logo-picture { display: block; width: 132px; }
  .mobile-nav-logo img {
    display: block;
    width: 100%;
    height: auto;
  }
  .mobile-nav-categories {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-5);
  }
  .mobile-nav-section-title {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: 0.08em;
    margin-bottom: var(--space-2);
  }
  .mobile-nav-categories a {
    color: var(--color-text);
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
    text-decoration: none;
    border-radius: var(--radius-sm);
  }
  .mobile-nav-category { border: 1px solid var(--color-border); border-radius: var(--radius-md); }
  .mobile-nav-category summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: var(--space-2) var(--space-3); color: var(--color-brand-strong); font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer; list-style: none; }
  .mobile-nav-category summary::-webkit-details-marker { display: none; }
  .mobile-nav-category summary::after { content: '+'; font-size: var(--text-lg); font-weight: var(--weight-medium); }
  .mobile-nav-category[open] summary::after { content: '−'; }
  .mobile-nav-category__links { display: flex; flex-direction: column; padding: 0 var(--space-2) var(--space-2); border-top: 1px solid var(--color-border); }
  .mobile-nav-category__links a { min-height: 40px; display: flex; align-items: center; line-height: var(--line-snug); }
  .mobile-nav-category__all { color: var(--color-brand-strong) !important; font-weight: var(--weight-semibold); }
  .mobile-nav-categories a:hover {
    background: var(--color-surface-subtle);
    color: var(--color-brand);
  }
  .mobile-nav-categories a:focus-visible,
  .mobile-nav-category summary:focus-visible,
  .mobile-nav-link:focus-visible,
  .mobile-nav-logo:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  .mobile-nav-body {
    flex: 1 1 0%;
    overflow-y: auto;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

  .mobile-nav-search {
    width: 100%;
    margin: 0;
  }

  .mobile-nav-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }

  .mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    transition:
      background-color var(--transition-fast),
      color var(--transition-fast);
  }

  .mobile-nav-link:hover {
    background-color: var(--color-surface-subtle);
    color: var(--color-brand);
  }

  .mobile-nav-link--active {
    background-color: var(--color-brand-subtle);
    color: var(--color-brand);
    font-weight: var(--weight-semibold);
  }
  .mobile-nav-link span {
    color: var(--color-text-muted);
  }

  .mobile-nav-footer {
    padding: var(--space-4);
    border-top: 1px solid var(--color-border-subtle);
    background-color: var(--color-surface-subtle);
  }

  .mobile-nav-tagline {
    color: var(--color-text-muted);
    margin: 0;
    text-align: center;
  }

.search-box {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition:
      border-color var(--transition-fast),
      box-shadow var(--transition-fast);
  }

  .search-box:focus-within {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
  }

  .search-box--sm {
    min-height: 36px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    background-color: var(--color-bg);
    box-shadow: none;
  }

  .search-box--md {
    min-height: var(--field-height);
    padding: 0 var(--space-3);
  }

  .search-box--lg {
    min-height: 48px;
    padding: 0 var(--space-4);
    box-shadow: var(--shadow-md);
  }

  .search-box__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
    margin-right: var(--space-2);
  }

  .search-box--sm .search-box__icon {
    width: 1.05rem;
    height: 1.05rem;
  }

  .search-box--lg .search-box__icon {
    width: 1.5rem;
    height: 1.5rem;
    margin-right: var(--space-3);
  }

  .search-box__icon svg {
    width: 100%;
    height: 100%;
  }

  .search-box__input {
    width: 100%;
    min-width: 0;
    min-height: var(--field-height);
    flex: 1 1 auto;
    font-family: var(--font-sans);
    font-size: var(--field-font-size);
    color: var(--color-text);
    background: transparent;
    border: none;
    outline: none;
  }

  .search-box--sm .search-box__input {
    min-height: 36px;
    font-size: var(--text-sm);
  }

  .search-box--lg .search-box__input {
    min-height: 48px;
    font-size: var(--field-font-size);
  }

  .search-box__input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.85;
  }

  /* Clear search styling */
  .search-box__input::-webkit-search-cancel-button {
    cursor: pointer;
  }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    line-height: 1;
    transition:
      background-color var(--transition-fast),
      border-color var(--transition-fast),
      color var(--transition-fast);
    flex-shrink: 0;
  }

  /* Accessible sizing */
  .icon-btn--sm {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
  }

  .icon-btn--md {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
  }

  .icon-btn--lg {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
  }

  /* Variants */
  .icon-btn--ghost {
    background-color: transparent;
    color: var(--color-text-muted);
  }

  .icon-btn--ghost:hover:not(:disabled) {
    background-color: var(--color-surface-subtle);
    color: var(--color-brand-strong);
  }

  .icon-btn--ghost:active:not(:disabled) {
    background-color: var(--color-border-subtle);
  }

  .icon-btn--secondary {
    background-color: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
    box-shadow: var(--shadow-xs);
  }

  .icon-btn--secondary:hover:not(:disabled) {
    background-color: var(--color-surface-subtle);
    border-color: var(--color-border-strong);
    color: var(--color-brand-strong);
  }

  .icon-btn--primary {
    background-color: var(--color-brand);
    color: var(--color-text-inverse);
    border-color: var(--color-brand);
    box-shadow: var(--shadow-xs);
  }

  .icon-btn--primary:hover:not(:disabled) {
    background-color: var(--color-brand-hover);
    border-color: var(--color-brand-hover);
  }

  /* States */
  .icon-btn:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  .icon-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  /* Global SVG sizing inside icon button */
  .icon-btn svg {
    width: 1.25rem;
    height: 1.25rem;
  }

/* Shared by the Astro footer and PHP-rendered Articles pages. */
.site-footer {
  position: relative;
  margin-top: auto;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 12% 0%, color-mix(in srgb, var(--color-brand) 22%, transparent), transparent 34rem),
    var(--color-brand-strong);
  color: var(--color-text-inverse);
}

.site-footer::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--color-accent), var(--color-brand), #7c8fff);
  content: '';
}

.site-footer__main {
  display: grid;
  gap: var(--space-10);
  padding-block: var(--space-12) var(--space-10);
}

.site-footer__brand { min-width: 0; }
.site-footer__brand-link { display: inline-flex; width: min(100%, 180px); text-decoration: none; }
.site-footer__brand-picture { display: block; width: 100%; }
.site-footer__brand-link img { width: 100%; height: auto; }
.site-footer__brand p {
  max-width: 32ch;
  margin: var(--space-4) 0 var(--space-5);
  color: var(--color-footer-muted);
  line-height: var(--line-relaxed);
}

.site-footer__discover {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 42px;
  padding: 0 var(--space-4);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--color-footer-muted) 30%, transparent);
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-text-inverse) 5%, transparent);
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
.site-footer__discover:hover {
  border-color: color-mix(in srgb, var(--color-text-inverse) 60%, transparent);
  background: color-mix(in srgb, var(--color-text-inverse) 11%, transparent);
  transform: translateY(-1px);
}

.site-footer__links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-8) var(--space-5); }
.site-footer__group { min-width: 0; }
.site-footer__group--tools { grid-column: 1 / -1; }
.site-footer__group h2 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-4);
  color: var(--color-text-inverse);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
}
.site-footer__group h2::after { flex: 1; height: 1px; background: color-mix(in srgb, var(--color-footer-border) 78%, transparent); content: ''; }
.site-footer__group ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.site-footer__group--tools ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); }
.site-footer__group li { min-width: 0; margin: 0; }
.site-footer__group a, .site-footer__bottom-links a {
  display: inline-block;
  padding-block: 3px;
  color: var(--color-footer-muted);
  font-size: var(--text-sm);
  line-height: var(--line-snug);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
}
.site-footer a:hover, .site-footer__preferences:hover { color: var(--color-text-inverse); }
.site-footer__group a:hover, .site-footer__bottom-links a:hover { text-decoration: underline; }
.site-footer a:focus-visible { outline: 2px solid var(--color-text-inverse); outline-offset: 4px; border-radius: var(--radius-xs); }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  padding-block: var(--space-5);
  border-top: 1px solid color-mix(in srgb, var(--color-footer-border) 85%, transparent);
}
.site-footer__bottom p { margin: 0; color: var(--color-footer-secondary); }
.site-footer__bottom-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); }
.site-footer__bottom-links a { font-size: var(--text-xs); }
.site-footer__preferences { min-height: 44px; padding: var(--space-1) 0; border: 0; background: none; color: var(--color-footer-muted); font: inherit; font-size: var(--text-xs); cursor: pointer; text-underline-offset: 3px; transition: color var(--transition-fast); }
.site-footer__preferences:hover { text-decoration: underline; }
.site-footer__preferences:focus-visible { outline: 2px solid var(--color-text-inverse); outline-offset: 4px; }

@media (max-width: 767px) {
  .site-footer__main { gap: var(--space-8); padding-block: var(--space-10) var(--space-8); }
  .site-footer__brand { max-width: 34rem; }
  .site-footer__links { gap: var(--space-6) var(--space-4); }
  .site-footer__group--tools ul { row-gap: var(--space-2); }
  .site-footer__bottom { align-items: flex-start; flex-direction: column; gap: var(--space-3); }
  .site-footer__bottom-links { display: grid; grid-template-columns: repeat(2, max-content); column-gap: var(--space-6); row-gap: var(--space-1); }
}

@media (min-width: 768px) {
  .site-footer__main { gap: var(--space-12); padding-block: var(--space-16) var(--space-12); }
  .site-footer__brand { display: flex; align-items: center; gap: var(--space-6); }
  .site-footer__brand-link { flex: none; }
  .site-footer__brand p { flex: 1; margin: 0; }
  .site-footer__discover { flex: none; }
  .site-footer__links { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-6); }
  .site-footer__group--tools { grid-column: auto; }
  .site-footer__group--tools ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-3); }
  .site-footer__group--legal {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid color-mix(in srgb, var(--color-footer-border) 85%, transparent);
  }
  .site-footer__group--legal h2 { margin: 0; }
  .site-footer__group--legal h2::after { display: none; }
  .site-footer__group--legal ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); }
}

@media (min-width: 1100px) {
  .site-footer__main { grid-template-columns: minmax(14rem, 1fr) minmax(0, 2.25fr); gap: var(--space-16); padding-block: var(--space-16); }
  .site-footer__brand { display: block; }
  .site-footer__brand p { margin: var(--space-5) 0 var(--space-6); }
  .site-footer__links { grid-template-columns: 1.35fr 1fr 1fr; gap: var(--space-8); }
}

@media (max-width: 359px) {
  .site-footer__links { column-gap: var(--space-4); }
  .site-footer__group--tools ul { column-gap: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__discover, .site-footer__group a, .site-footer__bottom-links a, .site-footer__preferences { transition: none; }
}