/*
Theme Name:        UricAcid.online
Theme URI:         https://www.uricacid.online
Author:            UricAcid.online
Author URI:        https://www.uricacid.online
Description:       Clinical food information theme for UricAcid.online — the multilingual purine reference for high uric acid and gout patients. Doctor reviewed, evidence-based, USDA-sourced data. No accounts, no health-data storage. Session-only Gemini AI assistance via WordPress AJAX proxy.
Version:           1.0.0
Requires at least: 6.0
Tested up to:      6.5
Requires PHP:      7.4
License:           GPL v2 or later
License URI:       http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       uricacid-online
Domain Path:       /languages
Tags:              health, medical, food, multilingual, rtl-language-support, translation-ready, accessibility-ready, custom-menu, threaded-comments
*/

/* ==========================================================================
   1. DESIGN TOKENS — NEVER CHANGE THESE
   ========================================================================== */

:root {
    /* Brand colors */
    --ua-primary:        #0d7c6e;
    --ua-primary-dark:   #0a5e54;
    --ua-primary-mid:    #0f9482;
    --ua-primary-light:  #15b89e;
    --ua-primary-xlight: #e4f5f2;

    /* Accent */
    --ua-accent:       #c8a84b;
    --ua-accent-light: #f5edd5;

    /* Neutrals */
    --ua-dark:        #0f1f1c;
    --ua-dark-mid:    #162e2a;
    --ua-mid-text:    #2e4d47;
    --ua-muted-text:  #5e7a74;
    --ua-muted-light: #8fa8a3;
    --ua-bg:          #f8faf9;
    --ua-white:       #ffffff;
    --ua-border:      #cfe4e0;
    --ua-border-light:#e4f0ed;

    /* Status colors */
    --ua-safe:     #0f9482;
    --ua-safe-bg:  #e4f5f2;
    --ua-mod:      #c8a84b;
    --ua-mod-bg:   #f5edd5;
    --ua-avoid:    #d94f4f;
    --ua-avoid-bg: #fbe7e7;
    --ua-red:      #d94f4f;

    /* Typography */
    --ua-font-heading: 'Playfair Display', 'Times New Roman', Georgia, serif;
    --ua-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

    /* Type scale */
    --ua-fs-h1:   clamp(2rem, 4vw + 1rem, 3.75rem);
    --ua-fs-h2:   clamp(1.625rem, 2.4vw + 1rem, 2.5rem);
    --ua-fs-h3:   clamp(1.25rem, 1.4vw + 0.9rem, 1.625rem);
    --ua-fs-h4:   1.125rem;
    --ua-fs-body: 1rem;
    --ua-fs-sm:   0.875rem;
    --ua-fs-xs:   0.75rem;

    /* Line heights */
    --ua-lh-tight: 1.15;
    --ua-lh-snug:  1.35;
    --ua-lh-body:  1.65;

    /* Radius */
    --ua-radius-sm: 8px;
    --ua-radius-md: 16px;
    --ua-radius-lg: 24px;
    --ua-radius-pill: 999px;

    /* Spacing scale */
    --ua-space-1:  4px;
    --ua-space-2:  8px;
    --ua-space-3:  12px;
    --ua-space-4:  16px;
    --ua-space-5:  20px;
    --ua-space-6:  24px;
    --ua-space-8:  32px;
    --ua-space-10: 40px;
    --ua-space-12: 48px;
    --ua-space-16: 64px;
    --ua-space-20: 80px;

    /* Section padding from instructions: 80px top/bottom, 5% sides */
    --ua-section-y: 80px;
    --ua-section-x: 5%;

    /* Container */
    --ua-container: 1280px;

    /* Shadows */
    --ua-shadow-sm: 0 2px 12px rgba(13, 124, 110, 0.07);
    --ua-shadow-md: 0 8px 32px rgba(13, 124, 110, 0.11);
    --ua-shadow-lg: 0 24px 64px rgba(13, 124, 110, 0.15);

    /* Motion */
    --ua-ease:     cubic-bezier(0.4, 0, 0.2, 1);
    --ua-dur-fast: 160ms;
    --ua-dur:      240ms;
    --ua-dur-slow: 420ms;

    /* Z-index scale */
    --ua-z-nav:    100;
    --ua-z-modal:  200;
    --ua-z-toast:  300;
}

/* ==========================================================================
   2. RESET + BASE
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

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

body {
    margin: 0;
    font-family: var(--ua-font-body);
    font-size: var(--ua-fs-body);
    line-height: var(--ua-lh-body);
    color: var(--ua-mid-text);
    background: var(--ua-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

a {
    color: var(--ua-primary);
    text-decoration: none;
    transition: color var(--ua-dur-fast) var(--ua-ease);
}

a:hover,
a:focus-visible {
    color: var(--ua-primary-dark);
    text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--ua-primary-light);
    outline-offset: 2px;
    border-radius: var(--ua-radius-sm);
}

::selection {
    background: var(--ua-primary-xlight);
    color: var(--ua-dark);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ua-font-heading);
    color: var(--ua-dark);
    margin: 0 0 var(--ua-space-4);
    line-height: var(--ua-lh-tight);
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1 { font-size: var(--ua-fs-h1); line-height: var(--ua-lh-tight); }
h2 { font-size: var(--ua-fs-h2); line-height: var(--ua-lh-snug); }
h3 { font-size: var(--ua-fs-h3); line-height: var(--ua-lh-snug); }
h4 { font-size: var(--ua-fs-h4); line-height: var(--ua-lh-snug); font-weight: 600; }

p {
    margin: 0 0 var(--ua-space-4);
    color: var(--ua-mid-text);
}

ul, ol {
    margin: 0 0 var(--ua-space-4);
    padding-left: var(--ua-space-6);
}

hr {
    border: 0;
    border-top: 1px solid var(--ua-border-light);
    margin: var(--ua-space-12) 0;
}

small { font-size: var(--ua-fs-sm); }

mark {
    background: var(--ua-accent-light);
    color: var(--ua-dark);
    padding: 0 4px;
    border-radius: 4px;
}

/* Skip link for screen readers */
.ua-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ua-primary);
    color: var(--ua-white);
    padding: 12px 20px;
    z-index: 9999;
    border-radius: 0 0 var(--ua-radius-sm) 0;
    font-weight: 600;
}

.ua-skip-link:focus {
    left: 0;
}

/* Visually hidden but available to assistive tech */
.ua-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================== */

.ua-container {
    width: 100%;
    max-width: var(--ua-container);
    margin: 0 auto;
    padding-left: var(--ua-section-x);
    padding-right: var(--ua-section-x);
}

.ua-section {
    padding-top: var(--ua-section-y);
    padding-bottom: var(--ua-section-y);
}

.ua-section--tight  { padding-top: 56px; padding-bottom: 56px; }
.ua-section--xtight { padding-top: 32px; padding-bottom: 32px; }

.ua-section--tint {
    background: var(--ua-primary-xlight);
}

.ua-section--dark {
    background: var(--ua-dark);
    color: #cfe4e0;
}

.ua-section--dark h1,
.ua-section--dark h2,
.ua-section--dark h3,
.ua-section--dark h4 {
    color: var(--ua-white);
}

.ua-section--brand {
    background: linear-gradient(135deg, var(--ua-primary) 0%, var(--ua-primary-dark) 100%);
    color: var(--ua-white);
}

.ua-section--brand h1,
.ua-section--brand h2,
.ua-section--brand h3 {
    color: var(--ua-white);
}

.ua-grid {
    display: grid;
    gap: var(--ua-space-6);
}

.ua-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ua-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ua-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ua-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

.ua-flex { display: flex; gap: var(--ua-space-4); }
.ua-flex-center { display: flex; align-items: center; justify-content: center; gap: var(--ua-space-3); }
.ua-flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--ua-space-4); }
.ua-flex-wrap { flex-wrap: wrap; }

.ua-stack > * + * { margin-top: var(--ua-space-4); }
.ua-stack-lg > * + * { margin-top: var(--ua-space-8); }

.ua-text-center { text-align: center; }
.ua-text-muted  { color: var(--ua-muted-text); }
.ua-text-accent { color: var(--ua-accent); }
.ua-text-primary { color: var(--ua-primary); }

.ua-eyebrow {
    display: inline-block;
    font-size: var(--ua-fs-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ua-primary);
    margin-bottom: var(--ua-space-3);
}

.ua-lede {
    font-size: 1.125rem;
    line-height: var(--ua-lh-body);
    color: var(--ua-mid-text);
    max-width: 64ch;
}

.ua-section-head {
    max-width: 760px;
    margin: 0 auto var(--ua-space-12);
    text-align: center;
}

/* ==========================================================================
   4. BUTTONS
   ========================================================================== */

.ua-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ua-space-2);
    padding: 14px 28px;
    font-family: var(--ua-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
    border: 2px solid transparent;
    border-radius: var(--ua-radius-pill);
    cursor: pointer;
    text-decoration: none;
    transition: transform var(--ua-dur-fast) var(--ua-ease),
                box-shadow var(--ua-dur) var(--ua-ease),
                background var(--ua-dur-fast) var(--ua-ease),
                color var(--ua-dur-fast) var(--ua-ease),
                border-color var(--ua-dur-fast) var(--ua-ease);
    white-space: nowrap;
}

.ua-btn:focus-visible { outline-offset: 3px; }

.ua-btn--primary {
    background: var(--ua-primary);
    color: var(--ua-white);
    box-shadow: var(--ua-shadow-sm);
}
.ua-btn--primary:hover {
    background: var(--ua-primary-dark);
    color: var(--ua-white);
    box-shadow: var(--ua-shadow-md);
    transform: translateY(-1px);
    text-decoration: none;
}

.ua-btn--ghost {
    background: transparent;
    color: var(--ua-primary);
    border-color: var(--ua-border);
}
.ua-btn--ghost:hover {
    background: var(--ua-primary-xlight);
    border-color: var(--ua-primary);
    color: var(--ua-primary-dark);
    text-decoration: none;
}

.ua-btn--accent {
    background: var(--ua-accent);
    color: var(--ua-dark);
}
.ua-btn--accent:hover {
    background: #b6963f;
    color: var(--ua-dark);
    text-decoration: none;
}

.ua-btn--sm  { padding: 10px 18px; font-size: var(--ua-fs-sm); }
.ua-btn--lg  { padding: 18px 36px; font-size: 1.0625rem; }
.ua-btn--block { width: 100%; }

.ua-btn[disabled],
.ua-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* ==========================================================================
   5. NAVIGATION (header.php)
   ========================================================================== */

.ua-nav {
    position: sticky;
    top: 0;
    z-index: var(--ua-z-nav);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--ua-border-light);
    transition: box-shadow var(--ua-dur) var(--ua-ease), background var(--ua-dur) var(--ua-ease);
}
.ua-nav.is-scrolled {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 6px 22px rgba(15, 31, 28, 0.06);
}

.ua-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ua-space-6);
    height: 72px;
    width: 100%;
    max-width: var(--ua-container);
    margin: 0 auto;
    padding-left: var(--ua-section-x);
    padding-right: var(--ua-section-x);
}

.ua-nav__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ua-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ua-dark);
    text-decoration: none;
}
.ua-nav__brand:hover { color: var(--ua-primary); text-decoration: none; }

.ua-nav__logo-mark {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--ua-primary) 0%, var(--ua-primary-light) 100%);
    color: var(--ua-white);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-family: var(--ua-font-body);
    font-size: 20px;
    box-shadow: var(--ua-shadow-sm);
    flex-shrink: 0;
}

.ua-nav__brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.05;
}
.ua-nav__brand-name {
    font-family: var(--ua-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ua-dark);
    letter-spacing: -0.01em;
}
.ua-nav__brand-name strong {
    color: var(--ua-primary);
    font-weight: 700;
}
.ua-nav__brand-tag {
    font-family: var(--ua-font-body);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ua-muted-text);
    margin-top: 2px;
}

.ua-nav__links {
    display: flex;
    align-items: center;
    gap: var(--ua-space-8);
    list-style: none;
    margin: 0;
    padding: 0;
}

.ua-nav__link {
    font-size: var(--ua-fs-sm);
    font-weight: 500;
    color: var(--ua-mid-text);
    padding: 8px 2px;
    position: relative;
    text-decoration: none;
}
.ua-nav__link:hover,
.ua-nav__link.is-active {
    color: var(--ua-primary);
    text-decoration: none;
}
.ua-nav__link.is-active::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    background: var(--ua-primary);
    border-radius: 2px;
}

.ua-nav__actions {
    display: flex;
    align-items: center;
    gap: var(--ua-space-3);
}

.ua-nav__hamburger {
    display: none;
    width: 44px; height: 44px;
    border: 1px solid var(--ua-border);
    background: var(--ua-white);
    border-radius: var(--ua-radius-sm);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.ua-nav__hamburger span {
    display: block;
    width: 22px; height: 2px;
    background: var(--ua-dark);
    position: relative;
}
.ua-nav__hamburger span::before,
.ua-nav__hamburger span::after {
    content: '';
    position: absolute;
    left: 0; width: 22px; height: 2px;
    background: var(--ua-dark);
}
.ua-nav__hamburger span::before { top: -7px; }
.ua-nav__hamburger span::after  { top:  7px; }

/* Language switcher */
.ua-lang {
    position: relative;
}
.ua-lang__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--ua-border);
    border-radius: var(--ua-radius-pill);
    color: var(--ua-mid-text);
    font-size: var(--ua-fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--ua-dur-fast) var(--ua-ease);
}
.ua-lang__toggle:hover {
    border-color: var(--ua-primary);
    color: var(--ua-primary);
}
.ua-lang__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-md);
    box-shadow: var(--ua-shadow-md);
    padding: 8px;
    list-style: none;
    margin: 0;
    display: none;
    max-height: 70vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ua-border) transparent;
}
.ua-lang__menu::-webkit-scrollbar         { width: 6px; }
.ua-lang__menu::-webkit-scrollbar-thumb   { background: var(--ua-border); border-radius: 3px; }
.ua-lang.is-open .ua-lang__menu { display: block; }
.ua-lang__menu li { margin: 0; }
.ua-lang__menu a {
    display: block;
    padding: 8px 12px;
    border-radius: var(--ua-radius-sm);
    color: var(--ua-mid-text);
    font-size: var(--ua-fs-sm);
    text-decoration: none;
}
.ua-lang__menu a:hover,
.ua-lang__menu a.is-active {
    background: var(--ua-primary-xlight);
    color: var(--ua-primary);
    text-decoration: none;
}

/* Region-group section headers inside the dropdown */
.ua-lang__group {
    padding: 10px 12px 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ua-muted-text);
    cursor: default;
    pointer-events: none;
}
.ua-lang__group:not(:first-child) {
    margin-top: 4px;
    border-top: 1px solid var(--ua-border-light);
    padding-top: 10px;
}

/* Footer mini-strip — 18 codes is too many for a single pipe-separated row;
   allow it to wrap gracefully on smaller widths. */
.ua-footer__lang-mini ul {
    flex-wrap: wrap;
    gap: 4px 8px;
}

/* Mobile drawer language grouping */
.ua-mobile-drawer__lang-group {
    margin: var(--ua-space-3) 0 var(--ua-space-1);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ua-muted-text);
    pointer-events: none;
    list-style: none;
}
.ua-mobile-drawer__lang-group:first-child { margin-top: 0; }

/* ==========================================================================
   GOOGLE TRANSLATE INTEGRATION
   ========================================================================== */

/* "auto" badge next to Google-translated language entries in the dropdown */
.ua-lang__gt-badge {
    display: inline-block;
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(13,124,110,0.08);
    color: var(--ua-primary);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* ----- Flag icons next to language labels ----- */
/* Every <a> entry inside the language menu lays out as: flag | name | badge */
.ua-lang__menu a,
.ua-mobile-drawer__lang a {
    display: flex !important;
    align-items: center;
    gap: 10px;
}
.ua-lang__flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    flex-shrink: 0;
    font-size: 1.05rem;
    line-height: 1;
    /* Slight elevation so the emoji aligns nicely with the text baseline */
    transform: translateY(-1px);
    /* Make flags render reliably even on Windows where Microsoft hides them */
    font-family: "Twemoji Country Flags", "Segoe UI Emoji", "Apple Color Emoji",
                 "Noto Color Emoji", "EmojiOne Color", system-ui, sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
.ua-lang__name { flex: 1; min-width: 0; }

/* Flag on the toggle button itself */
.ua-lang__toggle-flag {
    font-size: 1rem;
    line-height: 1;
    margin-right: 2px;
    transform: translateY(-1px);
    font-family: "Twemoji Country Flags", "Segoe UI Emoji", "Apple Color Emoji",
                 "Noto Color Emoji", system-ui, sans-serif;
}

/* ----- Footer mini language-strip with inline flags ----- */
.ua-footer__lang-mini ul a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ua-footer__lang-flag {
    font-size: 0.85rem;
    line-height: 1;
    font-family: "Twemoji Country Flags", "Segoe UI Emoji", "Apple Color Emoji",
                 "Noto Color Emoji", system-ui, sans-serif;
}
.ua-footer__lang-code {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* "Auto-translated" disclaimer banner — hidden by default */
.ua-gt-banner {
    display: none;
    background: linear-gradient(90deg, #fff7e0 0%, #fff4d6 100%);
    border-bottom: 1px solid #f0d68a;
    color: #6b4f0a;
    font-size: 0.85rem;
    line-height: 1.45;
    position: sticky;
    top: 0;
    z-index: calc(var(--ua-z-nav, 100) + 1);
}
.ua-gt-banner.is-on { display: block; }
.ua-gt-banner__inner {
    max-width: var(--ua-container, 1200px);
    margin: 0 auto;
    padding: 8px 5%;
    display: flex;
    align-items: center;
    gap: var(--ua-space-3, 12px);
}
.ua-gt-banner__icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}
.ua-gt-banner p {
    margin: 0;
    flex: 1;
}
.ua-gt-banner strong {
    color: #5a4204;
    margin-right: 6px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.ua-gt-banner__close {
    background: transparent;
    border: 1px solid #c19a3a;
    color: #6b4f0a;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--ua-dur, 200ms) var(--ua-ease, ease);
}
.ua-gt-banner__close:hover { background: #f6e8c2; }
@media (max-width: 760px) {
    .ua-gt-banner__inner { flex-wrap: wrap; padding: 8px 5%; }
    .ua-gt-banner p      { font-size: 0.8rem; }
}

/* ---- Hide Google Translate's own intrusive UI ----
   The widget injects a top bar, a floating frame, and a tooltip on hover.
   These overrides keep our own design intact while Google still translates
   the content below. */
.goog-te-banner-frame.skiptranslate,
.goog-tooltip,
.goog-tooltip:hover,
.goog-text-highlight {
    display: none !important;
    visibility: hidden !important;
    box-shadow: none !important;
    background-color: transparent !important;
}
/* Google adds margin-top to <body> for its top bar — undo that. */
body { top: 0 !important; }
body.translated-ltr,
body.translated-rtl {
    top: 0 !important;
}
/* Hide the Google logo + "Powered by" footer when the widget is rendered. */
.goog-logo-link,
.goog-te-gadget span,
.goog-te-gadget img { display: none !important; }
.goog-te-gadget { font-size: 0 !important; }
/* Hidden host div */
#google_translate_element { display: none !important; }

/* Mobile drawer (slides down from the nav under 768px) */
.ua-mobile-drawer {
    display: none;
    background: var(--ua-white);
    border-top: 1px solid var(--ua-border-light);
    padding: var(--ua-space-5) var(--ua-section-x) var(--ua-space-6);
    box-shadow: var(--ua-shadow-md);
    transform: translateY(-8px);
    opacity: 0;
    transition: transform var(--ua-dur) var(--ua-ease),
                opacity var(--ua-dur) var(--ua-ease);
}
.ua-nav.is-mobile-open .ua-mobile-drawer {
    display: block;
    transform: translateY(0);
    opacity: 1;
}
.ua-mobile-drawer__links {
    list-style: none;
    margin: 0 0 var(--ua-space-5);
    padding: 0;
    display: flex;
    flex-direction: column;
}
.ua-mobile-drawer__link {
    display: block;
    padding: 14px 4px;
    color: var(--ua-mid-text);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--ua-border-light);
}
.ua-mobile-drawer__link:hover,
.ua-mobile-drawer__link.is-active {
    color: var(--ua-primary);
    text-decoration: none;
}
.ua-mobile-drawer__lang {
    margin: 0 0 var(--ua-space-5);
}
.ua-mobile-drawer__lang-label {
    display: block;
    font-size: var(--ua-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ua-muted-text);
    font-weight: 600;
    margin-bottom: var(--ua-space-3);
}
.ua-mobile-drawer__lang ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ua-mobile-drawer__lang a {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--ua-border);
    border-radius: var(--ua-radius-pill);
    color: var(--ua-mid-text);
    font-size: var(--ua-fs-sm);
    text-decoration: none;
}
.ua-mobile-drawer__lang a.is-active,
.ua-mobile-drawer__lang a:hover {
    background: var(--ua-primary);
    color: var(--ua-white);
    border-color: var(--ua-primary);
    text-decoration: none;
}
.ua-mobile-drawer__cta { margin-top: var(--ua-space-2); }

/* ==========================================================================
   6. HERO + GAUGE
   ========================================================================== */

.ua-hero {
    padding-top: 96px;
    padding-bottom: var(--ua-section-y);
    background: linear-gradient(160deg, #e4f5f2 0%, #f8faf9 50%, #fef9ef 100%);
    position: relative;
    overflow: hidden;
}
.ua-hero__blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(70px);
    opacity: 0.45;
    z-index: 0;
}
.ua-hero__blob--a {
    top: -160px; right: -120px;
    width: 460px; height: 460px;
    background: var(--ua-primary-light);
}
.ua-hero__blob--b {
    bottom: -180px; left: -120px;
    width: 380px; height: 380px;
    background: var(--ua-accent);
    opacity: 0.25;
}
.ua-hero > .ua-container { position: relative; z-index: 1; }

/* Hero badge */
.ua-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--ua-radius-pill);
    background: rgba(255,255,255,0.75);
    border: 1px solid var(--ua-border);
    color: var(--ua-mid-text);
    font-size: var(--ua-fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-bottom: var(--ua-space-5);
    backdrop-filter: blur(6px);
}
.ua-hero-badge__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ua-primary);
    box-shadow: 0 0 0 4px rgba(13,124,110,0.15);
}

.ua-hero__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--ua-space-16);
    align-items: center;
}

.ua-hero__title {
    font-size: var(--ua-fs-h1);
    color: var(--ua-dark);
    margin-bottom: var(--ua-space-6);
}

.ua-hero__subtext {
    font-size: 1.125rem;
    color: var(--ua-mid-text);
    margin-bottom: var(--ua-space-8);
    max-width: 56ch;
}

.ua-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ua-space-3);
}

.ua-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ua-space-6);
    margin-top: var(--ua-space-10);
    color: var(--ua-muted-text);
    font-size: var(--ua-fs-sm);
}
.ua-hero__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ua-hero__meta-item::before {
    content: '';
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ua-primary);
}

/* Gauge card */
.ua-gauge-card {
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-lg);
    box-shadow: var(--ua-shadow-lg);
    padding: var(--ua-space-8);
    position: relative;
}
.ua-gauge-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ua-space-3);
    margin-bottom: var(--ua-space-4);
}
.ua-gauge-card__label {
    font-size: var(--ua-fs-xs);
    font-weight: 600;
    color: var(--ua-muted-text);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.ua-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--ua-radius-pill);
    background: var(--ua-primary-xlight);
    color: var(--ua-primary-dark);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}
.ua-live-badge__pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ua-primary);
    position: relative;
}
.ua-live-badge__pulse::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--ua-primary);
    animation: ua-pulse 1.6s ease-out infinite;
}
@keyframes ua-pulse {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(2.6); opacity: 0;   }
}

.ua-gauge {
    position: relative;
    width: 100%;
    aspect-ratio: 2 / 1.15;
    margin: 0 auto var(--ua-space-6);
}

.ua-gauge__svg { width: 100%; height: 100%; display: block; }
.ua-gauge__value {
    position: absolute;
    bottom: 18%;
    left: 0; right: 0;
    text-align: center;
    font-family: var(--ua-font-heading);
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--ua-dark);
    line-height: 1;
}
.ua-gauge__unit {
    font-size: 1rem;
    font-family: var(--ua-font-body);
    color: var(--ua-muted-text);
    font-weight: 500;
}
.ua-gauge__label {
    text-align: center;
    color: var(--ua-safe);
    font-weight: 600;
    font-size: var(--ua-fs-sm);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ua-gauge-card__food-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ua-space-3);
    margin-top: var(--ua-space-6);
}

.ua-mini-food {
    background: var(--ua-bg);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-3) var(--ua-space-4);
    display: flex;
    align-items: center;
    gap: var(--ua-space-3);
}
.ua-mini-food__icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--ua-white);
    display: grid; place-items: center;
    font-size: 22px;
    flex-shrink: 0;
}
.ua-mini-food__name {
    font-weight: 600;
    color: var(--ua-dark);
    font-size: var(--ua-fs-sm);
    line-height: 1.2;
}
.ua-mini-food__status { font-size: var(--ua-fs-xs); margin-top: 2px; }

/* ==========================================================================
   7. TRUST BAR
   ========================================================================== */

.ua-trust {
    background: var(--ua-white);
    border-top: 1px solid var(--ua-border-light);
    border-bottom: 1px solid var(--ua-border-light);
    padding: var(--ua-space-6) 0;
}
.ua-trust__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    gap: var(--ua-space-6);
    max-width: var(--ua-container);
    margin: 0 auto;
    padding-left: var(--ua-section-x);
    padding-right: var(--ua-section-x);
}
.ua-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--ua-mid-text);
    font-size: var(--ua-fs-sm);
    font-weight: 500;
}
.ua-trust__icon {
    width: 22px; height: 22px;
    color: var(--ua-primary);
    flex-shrink: 0;
}

/* ==========================================================================
   8. STAT BLOCKS / STATS BAND
   ========================================================================== */

.ua-stat {
    text-align: center;
}
.ua-stat__num {
    font-family: var(--ua-font-heading);
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--ua-primary);
    line-height: 1;
    display: block;
    margin-bottom: 6px;
}
.ua-stat__label {
    font-size: var(--ua-fs-sm);
    color: var(--ua-muted-text);
}
.ua-section--dark .ua-stat__num { color: var(--ua-accent); }
.ua-section--dark .ua-stat__label { color: #cfe4e0; }

.ua-stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid var(--ua-border);
    background: var(--ua-white);
    border-radius: var(--ua-radius-pill);
    font-size: var(--ua-fs-sm);
    color: var(--ua-mid-text);
    font-weight: 500;
}
.ua-stat-pill__num {
    color: var(--ua-primary);
    font-weight: 700;
}

/* ==========================================================================
   9. FEATURE CARDS
   ========================================================================== */

.ua-feature {
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-6);
    transition: transform var(--ua-dur) var(--ua-ease),
                box-shadow var(--ua-dur) var(--ua-ease),
                border-color var(--ua-dur) var(--ua-ease);
    height: 100%;
}
.ua-feature:hover {
    transform: translateY(-3px);
    box-shadow: var(--ua-shadow-md);
    border-color: var(--ua-border);
}

.ua-feature__icon {
    width: 56px; height: 56px;
    border-radius: var(--ua-radius-md);
    background: var(--ua-primary-xlight);
    color: var(--ua-primary);
    display: grid;
    place-items: center;
    margin-bottom: var(--ua-space-4);
}
.ua-feature__icon svg { width: 28px; height: 28px; }

.ua-feature__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ua-dark);
    margin-bottom: var(--ua-space-2);
    font-family: var(--ua-font-heading);
}

.ua-feature__desc {
    color: var(--ua-mid-text);
    font-size: var(--ua-fs-sm);
    margin: 0;
}

/* Mission stats — used inside the teal mission band */
.ua-mission-stats {
    margin-top: var(--ua-space-12);
    text-align: center;
}
.ua-mission-stat {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--ua-radius-lg);
    padding: var(--ua-space-8) var(--ua-space-6);
    color: var(--ua-white);
}
.ua-mission-stat__icon { font-size: 36px; display: block; margin-bottom: var(--ua-space-3); line-height: 1; }
.ua-mission-stat__num {
    font-family: var(--ua-font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ua-accent);
    line-height: 1;
    margin-bottom: 6px;
}
.ua-mission-stat__label {
    color: #e4f5f2;
    font-size: var(--ua-fs-sm);
    line-height: var(--ua-lh-snug);
}

/* ==========================================================================
   10. STEP LIST (How It Works)
   ========================================================================== */

.ua-steps {
    counter-reset: ua-step;
    display: grid;
    gap: var(--ua-space-6);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Connected 4-step row (front-page Section 5) */
.ua-how-steps {
    list-style: none;
    counter-reset: ua-how;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--ua-space-6);
    position: relative;
}
.ua-how-steps::before {
    content: '';
    position: absolute;
    top: 32px;
    left: 8%; right: 8%;
    border-top: 2px dotted rgba(200,168,75,0.45);
    z-index: 0;
}
.ua-how-step {
    text-align: center;
    position: relative;
    z-index: 1;
    padding: 0 var(--ua-space-2);
}
.ua-how-step__num {
    width: 64px; height: 64px;
    margin: 0 auto var(--ua-space-4);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ua-primary) 0%, var(--ua-primary-dark) 100%);
    color: var(--ua-white);
    font-family: var(--ua-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 6px rgba(13,124,110,0.18);
    letter-spacing: 0.04em;
}
.ua-how-step h3 {
    color: var(--ua-white);
    font-size: 1.0625rem;
    margin-bottom: var(--ua-space-2);
}
.ua-how-step p {
    color: #b3cfca;
    font-size: var(--ua-fs-sm);
    margin: 0;
    line-height: var(--ua-lh-snug);
}

.ua-step {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-6);
    counter-increment: ua-step;
    position: relative;
}
.ua-step::before {
    content: counter(ua-step, decimal-leading-zero);
    display: inline-block;
    font-family: var(--ua-font-heading);
    font-size: 1.25rem;
    color: var(--ua-accent);
    font-weight: 700;
    margin-bottom: var(--ua-space-3);
    letter-spacing: 0.06em;
}
.ua-step h3 {
    color: var(--ua-white);
    font-size: 1.125rem;
    margin-bottom: var(--ua-space-2);
}
.ua-step p {
    color: #b3cfca;
    font-size: var(--ua-fs-sm);
    margin: 0;
}

/* Dark stats band (front-page Section 6) — near-black, large numbers */
.ua-stats-band {
    background: #0a1513;
    color: #cfe4e0;
    padding: 56px 0;
}
.ua-stats-band__grid { text-align: center; }
.ua-stats-band .ua-stat__num {
    font-size: 3rem;
    color: var(--ua-accent);
}
.ua-stats-band .ua-stat__label { color: #b3cfca; }

/* Protocol checklist card (front-page Section 7) */
.ua-protocol-card {
    max-width: 880px;
    margin: 0 auto;
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-lg);
    padding: var(--ua-space-12) var(--ua-space-12) var(--ua-space-10);
    box-shadow: var(--ua-shadow-md);
}
.ua-protocol-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ua-space-3) var(--ua-space-8);
}
.ua-protocol-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: var(--ua-mid-text);
    font-size: var(--ua-fs-sm);
    padding: var(--ua-space-2) 0;
    border-bottom: 1px solid var(--ua-border-light);
    line-height: var(--ua-lh-snug);
}
.ua-protocol-list li:nth-last-child(1),
.ua-protocol-list li:nth-last-child(2) { border-bottom: 0; }
.ua-protocol-list svg {
    color: var(--ua-primary);
    flex-shrink: 0;
    margin-top: 2px;
}
.ua-protocol-list span {
    color: var(--ua-dark);
    font-weight: 500;
}
.ua-protocol-card__cta {
    text-align: center;
    margin-top: var(--ua-space-10);
}

/* ==========================================================================
   11. FOOD CARD GRID
   ========================================================================== */

.ua-food-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ua-space-5);
}

.ua-food-card {
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-5);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ua-space-3);
    transition: transform var(--ua-dur) var(--ua-ease),
                box-shadow var(--ua-dur) var(--ua-ease),
                border-color var(--ua-dur) var(--ua-ease);
}
.ua-food-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--ua-shadow-md);
    border-color: var(--ua-border);
}
.ua-food-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ua-space-3);
}
.ua-food-card__icon {
    width: 64px; height: 64px;
    border-radius: var(--ua-radius-md);
    background: var(--ua-primary-xlight);
    display: grid; place-items: center;
    font-size: 32px;
    flex-shrink: 0;
}
.ua-food-card__heart {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ua-border);
    background: var(--ua-white);
    color: var(--ua-muted-text);
    cursor: pointer;
    display: grid; place-items: center;
    transition: all var(--ua-dur-fast) var(--ua-ease);
}
.ua-food-card__heart:hover { color: var(--ua-red); border-color: var(--ua-red); }
.ua-food-card__heart.is-saved {
    background: var(--ua-avoid-bg);
    color: var(--ua-red);
    border-color: var(--ua-red);
}
.ua-food-card__heart svg { width: 18px; height: 18px; }

.ua-food-card__name {
    font-family: var(--ua-font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ua-dark);
    margin: 0;
}
.ua-food-card__cat {
    font-size: var(--ua-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ua-muted-text);
    font-weight: 600;
}
.ua-food-card__purine {
    font-size: var(--ua-fs-sm);
    color: var(--ua-mid-text);
    margin: 0;
}
.ua-food-card__purine strong { color: var(--ua-dark); }
.ua-food-card__note {
    font-size: var(--ua-fs-sm);
    color: var(--ua-muted-text);
    line-height: var(--ua-lh-snug);
    margin: 0;
}

/* Status badges */
.ua-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--ua-radius-pill);
    font-size: var(--ua-fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ua-badge--safe  { background: var(--ua-safe-bg);  color: var(--ua-safe); }
.ua-badge--mod   { background: var(--ua-mod-bg);   color: #8e7522; }
.ua-badge--avoid { background: var(--ua-avoid-bg); color: var(--ua-avoid); }
.ua-badge--info  { background: var(--ua-primary-xlight); color: var(--ua-primary); }

/* Food-list page hero stat cards */
.ua-food-stats { margin-top: var(--ua-space-6); }
.ua-food-stat {
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-5) var(--ua-space-6);
    text-align: left;
    border-left: 4px solid var(--ua-primary);
}
.ua-food-stat--safe  { border-left-color: var(--ua-safe);  }
.ua-food-stat--mod   { border-left-color: var(--ua-mod);   }
.ua-food-stat--avoid { border-left-color: var(--ua-avoid); }
.ua-food-stat__num {
    display: block;
    font-family: var(--ua-font-heading);
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--ua-dark);
    line-height: 1;
    margin-bottom: 4px;
}
.ua-food-stat__label {
    font-size: var(--ua-fs-sm);
    color: var(--ua-muted-text);
}

/* 2-column food list layout */
.ua-food-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--ua-space-10);
    align-items: start;
}
.ua-food-sidebar { position: sticky; top: 96px; }

.ua-food-controls {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--ua-space-4);
    align-items: center;
    margin-bottom: var(--ua-space-5);
}
.ua-tabs__count {
    font-size: var(--ua-fs-xs);
    margin-left: 4px;
    opacity: 0.85;
}
.ua-food-meta {
    color: var(--ua-muted-text);
    font-size: var(--ua-fs-sm);
    margin: 0 0 var(--ua-space-5);
}
.ua-food-meta strong { color: var(--ua-dark); }
.ua-food-empty {
    padding: var(--ua-space-12);
    background: var(--ua-white);
    border: 1px dashed var(--ua-border);
    border-radius: var(--ua-radius-md);
    margin-top: var(--ua-space-6);
}

/* ==========================================================================
   12. SEARCH + FILTERS
   ========================================================================== */

.ua-search {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--ua-white);
    border: 1px solid var(--ua-border);
    border-radius: var(--ua-radius-pill);
    padding: 4px 6px 4px 20px;
    box-shadow: var(--ua-shadow-sm);
    transition: border-color var(--ua-dur-fast) var(--ua-ease),
                box-shadow var(--ua-dur-fast) var(--ua-ease);
}
.ua-search:focus-within {
    border-color: var(--ua-primary);
    box-shadow: 0 0 0 4px var(--ua-primary-xlight);
}
.ua-search__icon {
    width: 20px; height: 20px;
    color: var(--ua-muted-text);
    flex-shrink: 0;
}
.ua-search input {
    flex: 1;
    border: 0;
    outline: none;
    background: transparent;
    padding: 12px 14px;
    font-size: 1rem;
    font-family: inherit;
    color: var(--ua-dark);
    min-width: 0;
}
.ua-search input::placeholder { color: var(--ua-muted-light); }
.ua-search button {
    border: 0;
    background: var(--ua-primary);
    color: var(--ua-white);
    padding: 10px 18px;
    border-radius: var(--ua-radius-pill);
    font-weight: 600;
    cursor: pointer;
    font-size: var(--ua-fs-sm);
}

.ua-tabs {
    display: inline-flex;
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-pill);
    padding: 4px;
    gap: 4px;
}
.ua-tabs button {
    border: 0;
    background: transparent;
    padding: 8px 18px;
    border-radius: var(--ua-radius-pill);
    font-weight: 500;
    cursor: pointer;
    color: var(--ua-mid-text);
    font-size: var(--ua-fs-sm);
    font-family: inherit;
}
.ua-tabs button[aria-selected="true"],
.ua-tabs button.is-active {
    background: var(--ua-primary);
    color: var(--ua-white);
}

.ua-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ua-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--ua-radius-pill);
    background: var(--ua-white);
    border: 1px solid var(--ua-border);
    font-size: var(--ua-fs-sm);
    color: var(--ua-mid-text);
    cursor: pointer;
    transition: all var(--ua-dur-fast) var(--ua-ease);
    text-decoration: none;
}
.ua-chip:hover, .ua-chip.is-active {
    background: var(--ua-primary);
    color: var(--ua-white);
    border-color: var(--ua-primary);
    text-decoration: none;
}
.ua-chip--safe.is-active  { background: var(--ua-safe);  border-color: var(--ua-safe); }
.ua-chip--mod.is-active   { background: var(--ua-mod);   border-color: var(--ua-mod);  color: var(--ua-dark); }
.ua-chip--avoid.is-active { background: var(--ua-avoid); border-color: var(--ua-avoid); }

/* Sidebar category list */
.ua-sidebar-cats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ua-sidebar-cats a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    border-radius: var(--ua-radius-sm);
    color: var(--ua-mid-text);
    font-size: var(--ua-fs-sm);
    text-decoration: none;
}
.ua-sidebar-cats a:hover {
    background: var(--ua-primary-xlight);
    color: var(--ua-primary);
    text-decoration: none;
}
.ua-sidebar-cats a.is-active {
    background: var(--ua-primary);
    color: var(--ua-white);
}
.ua-sidebar-cats__count {
    font-size: var(--ua-fs-xs);
    opacity: 0.8;
}

/* Pagination */
.ua-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: var(--ua-space-12);
}
.ua-pager a, .ua-pager span {
    min-width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 12px;
    border-radius: var(--ua-radius-sm);
    color: var(--ua-mid-text);
    font-size: var(--ua-fs-sm);
    text-decoration: none;
    border: 1px solid var(--ua-border-light);
    background: var(--ua-white);
}
.ua-pager a:hover { border-color: var(--ua-primary); color: var(--ua-primary); }
.ua-pager .is-current,
.ua-pager span.is-current {
    background: var(--ua-primary);
    color: var(--ua-white);
    border-color: var(--ua-primary);
}

/* ==========================================================================
   13. AI ASSISTANT BLOCK
   ========================================================================== */

.ua-ai {
    background: linear-gradient(135deg, #0d7c6e 0%, #0a5e54 100%);
    color: var(--ua-white);
    border-radius: var(--ua-radius-lg);
    padding: var(--ua-space-12);
    position: relative;
    overflow: hidden;
}
.ua-ai::before {
    content: '';
    position: absolute;
    inset: -40% -10% auto auto;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(21,184,158,0.5), transparent 60%);
    pointer-events: none;
}
.ua-ai__inner { position: relative; z-index: 1; }
.ua-ai h2 { color: var(--ua-white); }
.ua-ai p { color: #cfe4e0; }

.ua-ai__form {
    display: grid;
    gap: var(--ua-space-4);
    grid-template-columns: 1fr 1fr;
    margin-top: var(--ua-space-8);
}
.ua-ai__form > .ua-ai__full { grid-column: 1 / -1; }

.ua-input,
.ua-textarea,
.ua-select {
    width: 100%;
    padding: 14px 16px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--ua-radius-sm);
    font-family: inherit;
    font-size: 1rem;
    color: var(--ua-dark);
}
.ua-input:focus,
.ua-textarea:focus,
.ua-select:focus {
    outline: none;
    border-color: var(--ua-accent);
    box-shadow: 0 0 0 3px rgba(200,168,75,0.4);
}
.ua-textarea { min-height: 120px; resize: vertical; line-height: var(--ua-lh-body); }
.ua-label {
    display: block;
    font-size: var(--ua-fs-sm);
    font-weight: 500;
    color: var(--ua-white);
    margin-bottom: 8px;
}

.ua-ai__response {
    margin-top: var(--ua-space-6);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-5);
    color: #e4f0ed;
    line-height: var(--ua-lh-body);
    font-size: var(--ua-fs-sm);
    display: none;
}
.ua-ai__response.is-visible,
.ua-ai__response.is-loading,
.ua-ai__response.is-success,
.ua-ai__response.is-error    { display: block; }
.ua-ai__response strong { color: var(--ua-white); }
.ua-ai__response a { color: var(--ua-accent); }

/* ----- AI loading state ----- */
.ua-ai-loading {
    display: flex;
    align-items: center;
    gap: var(--ua-space-3);
    padding: var(--ua-space-2) 0;
}
.ua-ai-loading p {
    margin: 0;
    color: #cfe4e0;
    font-size: var(--ua-fs-sm);
}
.ua-ai-spinner {
    color: var(--ua-accent);
    flex-shrink: 0;
}

/* ----- AI error state ----- */
.ua-ai__response.is-error {
    background: rgba(217, 79, 79, 0.12);
    border-color: rgba(217, 79, 79, 0.4);
    color: #ffd9d9;
}
.ua-ai-error {
    display: flex;
    align-items: flex-start;
    gap: var(--ua-space-2);
}
.ua-ai-error strong { color: #ffd9d9; font-weight: 600; font-size: 0.95rem; }

/* ----- AI success response card ----- */
.ua-ai-response {
    display: flex;
    flex-direction: column;
    gap: var(--ua-space-4);
}
.ua-ai-response__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--ua-space-3);
    flex-wrap: wrap;
    padding-bottom: var(--ua-space-3);
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.ua-ai-response__badge {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ua-accent);
    background: rgba(229,169,59,0.12);
    padding: 4px 10px;
    border-radius: 999px;
}
.ua-ai-response__hint {
    font-size: 0.7rem;
    color: #9fb8b3;
    letter-spacing: 0.04em;
}
.ua-ai-response__body {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #e4f0ed;
}
.ua-ai-response__body h4,
.ua-ai-response__body h5 {
    font-family: var(--ua-font-heading);
    color: var(--ua-white);
    margin: var(--ua-space-4) 0 var(--ua-space-2);
    line-height: 1.3;
}
.ua-ai-response__body h4 { font-size: 1.1rem; }
.ua-ai-response__body h5 { font-size: 0.95rem; color: var(--ua-accent); letter-spacing: 0.02em; }
.ua-ai-response__body p {
    margin: 0 0 var(--ua-space-3);
}
.ua-ai-response__body ul,
.ua-ai-response__body ol {
    margin: 0 0 var(--ua-space-3);
    padding-left: var(--ua-space-5);
}
.ua-ai-response__body li {
    margin-bottom: 6px;
}
.ua-ai-response__body strong { color: var(--ua-white); }
.ua-ai-response__body em     { color: #d8e8e4; font-style: italic; }
.ua-ai-response__foot {
    padding-top: var(--ua-space-3);
    border-top: 1px solid rgba(255,255,255,0.10);
}
.ua-ai-response__foot small {
    color: #9fb8b3;
    font-size: 0.75rem;
    font-style: italic;
}

.ua-ai__loader {
    display: inline-flex; gap: 6px; align-items: center;
    color: #cfe4e0;
    font-size: var(--ua-fs-sm);
}
.ua-ai__loader::before {
    content: '';
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.25);
    border-top-color: var(--ua-accent);
    animation: ua-spin 0.7s linear infinite;
}
@keyframes ua-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   13.5  PAGE HERO + BREADCRUMB (used by inner pages)
   ========================================================================== */

.ua-page-hero {
    padding: 88px 0 var(--ua-space-12);
    background: linear-gradient(180deg, var(--ua-primary-xlight) 0%, var(--ua-bg) 100%);
    border-bottom: 1px solid var(--ua-border-light);
}
.ua-page-hero h1 { max-width: 800px; }
.ua-page-hero .ua-lede { max-width: 64ch; margin-top: var(--ua-space-3); }
.ua-page-hero__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--ua-space-6);
}

.ua-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--ua-fs-sm);
    color: var(--ua-muted-text);
    margin-bottom: var(--ua-space-4);
}
.ua-breadcrumb a {
    color: var(--ua-mid-text);
    text-decoration: none;
}
.ua-breadcrumb a:hover { color: var(--ua-primary); }
.ua-breadcrumb [aria-current="page"] { color: var(--ua-primary-dark); font-weight: 500; }

/* ==========================================================================
   14. DIET PLAN
   ========================================================================== */

.ua-diet-grid {
    display: grid;
    grid-template-columns: 280px 1fr 280px;
    gap: var(--ua-space-8);
    align-items: start;
}

.ua-side-card {
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-6);
    box-shadow: var(--ua-shadow-sm);
}
.ua-side-card + .ua-side-card { margin-top: var(--ua-space-5); }
.ua-side-card h3 {
    font-size: 1rem;
    margin-bottom: var(--ua-space-3);
    color: var(--ua-dark);
    font-family: var(--ua-font-body);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.ua-side-card__note,
.ua-side-card p {
    font-size: var(--ua-fs-sm);
    color: var(--ua-muted-text);
    line-height: var(--ua-lh-snug);
    margin: var(--ua-space-3) 0 0;
}
.ua-side-card__big {
    font-family: var(--ua-font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ua-dark);
    line-height: 1;
}
.ua-side-card--tip {
    background: var(--ua-accent-light);
    border-color: #ead8a3;
}
.ua-side-card--tip h3 { color: #8e7522; }
.ua-side-card--tip p  { color: #6b5a1d; }

/* Level scale ticks under the meter */
.ua-level-scale {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    font-size: var(--ua-fs-xs);
    color: var(--ua-muted-text);
}

.ua-level-display__unit {
    font-size: 1rem;
    color: var(--ua-muted-text);
    font-family: var(--ua-font-body);
    font-weight: 500;
}
.ua-level-display__num--warn { color: var(--ua-mod); }

/* Purine Quick-Calc */
.ua-mini-label {
    display: block;
    font-size: var(--ua-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ua-muted-text);
    font-weight: 600;
    margin: var(--ua-space-3) 0 6px;
}
.ua-mini-input {
    width: 100%;
    padding: 10px 12px;
    background: var(--ua-bg);
    border: 1px solid var(--ua-border);
    border-radius: var(--ua-radius-sm);
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--ua-dark);
}
.ua-mini-input:focus {
    outline: none;
    border-color: var(--ua-primary);
    box-shadow: 0 0 0 3px var(--ua-primary-xlight);
}
.ua-pcalc-result {
    margin-top: var(--ua-space-4);
    padding: var(--ua-space-3) var(--ua-space-4);
    background: var(--ua-primary-xlight);
    border-radius: var(--ua-radius-sm);
    text-align: center;
    color: var(--ua-primary-dark);
}
.ua-pcalc-result__num {
    font-family: var(--ua-font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ua-primary-dark);
}
.ua-pcalc-result__unit {
    font-size: var(--ua-fs-sm);
    color: var(--ua-mid-text);
}

.ua-meal-card {
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-6);
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: var(--ua-space-5);
    box-shadow: var(--ua-shadow-sm);
}
.ua-meal-card + .ua-meal-card { margin-top: var(--ua-space-5); }
.ua-meal-card__photo {
    width: 100px; height: 100px;
    border-radius: var(--ua-radius-md);
    background: var(--ua-primary-xlight);
    display: grid; place-items: center;
    font-size: 44px;
}
.ua-meal-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ua-space-3);
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.ua-meal-card__time {
    font-size: var(--ua-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ua-muted-text);
    font-weight: 600;
}
.ua-meal-card__name {
    font-family: var(--ua-font-heading);
    font-size: 1.25rem;
    color: var(--ua-dark);
    margin: 0;
}
.ua-meal-card__desc {
    font-size: var(--ua-fs-sm);
    color: var(--ua-mid-text);
    margin: 8px 0 var(--ua-space-3);
    line-height: var(--ua-lh-body);
}
.ua-meal-card__body { min-width: 0; }
.ua-meal-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ua-space-3);
    flex-wrap: wrap;
    margin-top: var(--ua-space-3);
}
.ua-meal-card__purine {
    font-size: var(--ua-fs-xs);
    color: var(--ua-muted-text);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ua-meal-card__note {
    margin-top: var(--ua-space-6);
    text-align: center;
    font-size: var(--ua-fs-sm);
}
.ua-meal-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ua-tag {
    font-size: var(--ua-fs-xs);
    padding: 3px 10px;
    border-radius: var(--ua-radius-pill);
    background: var(--ua-bg);
    color: var(--ua-mid-text);
    border: 1px solid var(--ua-border-light);
}

.ua-redline {
    background: var(--ua-avoid-bg);
    border: 1px solid #f5c8c8;
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-6);
}
.ua-redline h3 {
    color: var(--ua-avoid);
    font-family: var(--ua-font-body);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.ua-redline__intro {
    color: #8a3030;
    font-size: var(--ua-fs-sm);
    line-height: var(--ua-lh-snug);
    margin: 0 0 var(--ua-space-4);
}
.ua-redline + .ua-side-card { margin-top: var(--ua-space-5); }

/* Section header within the diet plan center column */
.ua-diet-section-head {
    margin-bottom: var(--ua-space-6);
}
.ua-diet-section-head h2 {
    font-size: 1.625rem;
    margin-bottom: 6px;
}

/* AI privacy note */
.ua-ai__privacy {
    font-size: var(--ua-fs-xs);
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.ua-redline ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ua-redline li {
    color: #8a3030;
    font-size: var(--ua-fs-sm);
    padding-left: 22px;
    position: relative;
}
.ua-redline li::before {
    content: '✕';
    position: absolute;
    left: 0; top: 0;
    color: var(--ua-avoid);
    font-weight: 700;
}

/* Hydration / level widgets */
.ua-meter {
    height: 10px;
    background: var(--ua-border-light);
    border-radius: var(--ua-radius-pill);
    overflow: hidden;
    margin: 10px 0;
}
.ua-meter__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--ua-primary) 0%, var(--ua-primary-light) 100%);
    border-radius: var(--ua-radius-pill);
}
.ua-meter--warn .ua-meter__fill { background: linear-gradient(90deg, var(--ua-mod) 0%, #d9a23b 100%); }

.ua-level-display {
    text-align: center;
    padding: var(--ua-space-3) 0;
}
.ua-level-display__num {
    font-family: var(--ua-font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--ua-mod);
    line-height: 1;
}
.ua-level-display__num--safe  { color: var(--ua-safe); }
.ua-level-display__num--avoid { color: var(--ua-avoid); }
.ua-level-display__label {
    font-size: var(--ua-fs-xs);
    color: var(--ua-muted-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
}

/* ==========================================================================
   15. SYMPTOMS — LEVEL BAR & PATHWAY
   ========================================================================== */

.ua-level-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-radius: var(--ua-radius-md);
    overflow: hidden;
    box-shadow: var(--ua-shadow-sm);
}
.ua-level-bar__zone {
    padding: var(--ua-space-6) var(--ua-space-4);
    color: var(--ua-white);
    text-align: center;
    font-weight: 600;
}
.ua-level-bar__zone small { display: block; opacity: 0.85; font-weight: 400; margin-top: 4px; font-size: var(--ua-fs-xs); }
.ua-level-bar__zone--safe   { background: #15a37d; }
.ua-level-bar__zone--border { background: #d9a23b; }
.ua-level-bar__zone--high   { background: #d97a3b; }
.ua-level-bar__zone--severe { background: var(--ua-avoid); }

.ua-pathway {
    background: var(--ua-dark);
    color: #b3cfca;
    border-radius: var(--ua-radius-lg);
    padding: var(--ua-space-8);
}
.ua-pathway h3 { color: var(--ua-white); }
.ua-pathway ol {
    list-style: none;
    counter-reset: ua-path;
    padding: 0;
    margin: var(--ua-space-6) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--ua-space-4);
}
.ua-pathway li {
    counter-increment: ua-path;
    padding-left: 56px;
    position: relative;
    font-size: var(--ua-fs-sm);
    line-height: var(--ua-lh-body);
}
.ua-pathway li::before {
    content: counter(ua-path);
    position: absolute;
    left: 0; top: 0;
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--ua-primary);
    color: var(--ua-white);
    display: grid; place-items: center;
    font-family: var(--ua-font-heading);
    font-weight: 700;
}

.ua-symptom-card {
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-6);
    height: 100%;
    transition: box-shadow var(--ua-dur) var(--ua-ease);
}
.ua-symptom-card:hover { box-shadow: var(--ua-shadow-md); }
.ua-symptom-card__head {
    display: flex;
    align-items: center;
    gap: var(--ua-space-3);
    margin-bottom: var(--ua-space-3);
}
.ua-symptom-card__icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: var(--ua-avoid-bg);
    color: var(--ua-avoid);
    display: grid; place-items: center;
    font-size: 22px;
    flex-shrink: 0;
}
.ua-symptom-card__title {
    font-family: var(--ua-font-heading);
    font-size: 1.125rem;
    color: var(--ua-dark);
    margin: 0;
}
.ua-severity {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: var(--ua-space-3);
    font-size: var(--ua-fs-xs);
    color: var(--ua-muted-text);
}
.ua-severity__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ua-border);
}
.ua-severity__dot.is-on { background: var(--ua-avoid); }
.ua-severity__label {
    margin-left: var(--ua-space-2);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ua-dark);
}

/* ----- Symptom card — new __top + __tag structure ----- */
.ua-symptom-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ua-space-3);
    margin-bottom: var(--ua-space-4);
}
.ua-symptom-card__tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--ua-primary-bg, #e4f5f2);
    color: var(--ua-primary);
}
.ua-symptom-card__tag--avoid {
    background: var(--ua-avoid-bg);
    color: var(--ua-avoid);
}
.ua-symptom-card__tag--mod {
    background: #fdf2dd;
    color: #b07d18;
}

/* ----- Pathway coloured-step variant (4 numbered steps with tone colours) ----- */
.ua-pathway--coloured .ua-pathway__list {
    list-style: none;
    margin: var(--ua-space-6) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ua-space-4);
    position: relative;
}
.ua-pathway--coloured .ua-pathway__list::before {
    content: "";
    position: absolute;
    left: 27px;
    top: 56px;
    bottom: 28px;
    width: 2px;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.25) 0 4px,
        transparent 4px 9px
    );
    pointer-events: none;
}
.ua-pathway__step {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--ua-space-4);
    align-items: flex-start;
    counter-increment: none;
    padding: 0;
}
.ua-pathway__step::before { content: none; } /* override the generic li::before */
.ua-pathway__step h4 {
    color: var(--ua-white);
    font-family: var(--ua-font-heading);
    font-size: 1.05rem;
    margin: 0 0 4px;
}
.ua-pathway__step p {
    margin: 0;
    font-size: var(--ua-fs-sm);
    line-height: var(--ua-lh-body);
    color: #b3cfca;
}
.ua-pathway__num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: var(--ua-font-heading);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--ua-white);
    background: var(--ua-primary);
    box-shadow: 0 0 0 4px rgba(13,124,110,0.18);
    flex-shrink: 0;
    z-index: 1;
}
.ua-pathway__step--teal   .ua-pathway__num { background: var(--ua-primary);  box-shadow: 0 0 0 4px rgba(13,124,110,0.25); }
.ua-pathway__step--gold   .ua-pathway__num { background: var(--ua-accent, #e5a93b); box-shadow: 0 0 0 4px rgba(229,169,59,0.25); }
.ua-pathway__step--orange .ua-pathway__num { background: #d97a3b; box-shadow: 0 0 0 4px rgba(217,122,59,0.25); }
.ua-pathway__step--red    .ua-pathway__num { background: var(--ua-avoid); box-shadow: 0 0 0 4px rgba(195,57,57,0.28); }

/* ----- Level-reference zone cards ----- */
.ua-zone-card {
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-top: 4px solid var(--ua-border);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-6);
    height: 100%;
    transition: box-shadow var(--ua-dur) var(--ua-ease), transform var(--ua-dur) var(--ua-ease);
}
.ua-zone-card:hover { box-shadow: var(--ua-shadow-md); transform: translateY(-2px); }
.ua-zone-card__head {
    display: flex;
    align-items: center;
    gap: var(--ua-space-3);
    margin-bottom: var(--ua-space-3);
}
.ua-zone-card__head h3 {
    margin: 0;
    font-family: var(--ua-font-heading);
    font-size: 1.1rem;
    color: var(--ua-dark);
}
.ua-zone-card__icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: grid; place-items: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}
.ua-zone-card__range {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ua-bg-soft, #f1f6f5);
    color: var(--ua-muted-text);
    font-size: var(--ua-fs-xs);
    font-weight: 600;
    margin-bottom: var(--ua-space-3);
}
.ua-zone-card p { margin: 0; font-size: var(--ua-fs-sm); line-height: var(--ua-lh-body); color: var(--ua-muted-text); }
.ua-zone-card--safe   { border-top-color: #15a37d; }
.ua-zone-card--safe   .ua-zone-card__icon { background: #def3e9; color: #15a37d; }
.ua-zone-card--border { border-top-color: #d9a23b; }
.ua-zone-card--border .ua-zone-card__icon { background: #fdf2dd; color: #b07d18; }
.ua-zone-card--high   { border-top-color: #d97a3b; }
.ua-zone-card--high   .ua-zone-card__icon { background: #fde6d6; color: #b35a1a; }
.ua-zone-card--severe { border-top-color: var(--ua-avoid); }
.ua-zone-card--severe .ua-zone-card__icon { background: var(--ua-avoid-bg); color: var(--ua-avoid); }

/* ----- Red-flag checklist (when to see a doctor) ----- */
.ua-redflag-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ua-space-4);
}
.ua-redflag-list > li {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: var(--ua-space-4);
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-left: 4px solid var(--ua-avoid);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-5);
    box-shadow: var(--ua-shadow-sm);
}
.ua-redflag-list__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid; place-items: center;
    background: var(--ua-avoid-bg);
    color: var(--ua-avoid);
    font-size: 1.25rem;
    flex-shrink: 0;
}
.ua-redflag-list strong {
    display: block;
    color: var(--ua-dark);
    font-size: 1rem;
    line-height: 1.35;
    margin-bottom: 4px;
}
.ua-redflag-list p {
    margin: 0;
    font-size: var(--ua-fs-sm);
    line-height: var(--ua-lh-body);
    color: var(--ua-muted-text);
}

/* ----- Important medical notice dark card ----- */
.ua-medical-notice {
    background: var(--ua-dark, #0f1f1c);
    color: #cfe4df;
    border-radius: var(--ua-radius-lg);
    padding: var(--ua-space-8);
    height: 100%;
    box-shadow: var(--ua-shadow-md);
}
.ua-medical-notice h3 {
    color: var(--ua-white);
    margin: var(--ua-space-2) 0 var(--ua-space-5);
    font-family: var(--ua-font-heading);
}
.ua-medical-notice ul {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--ua-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--ua-space-3);
}
.ua-medical-notice li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: var(--ua-space-3);
    align-items: flex-start;
    font-size: var(--ua-fs-sm);
    line-height: var(--ua-lh-body);
}
.ua-medical-notice li svg {
    width: 20px; height: 20px;
    color: var(--ua-accent, #e5a93b);
    margin-top: 2px;
}

/* ----- 2-column with aside grid (text + dark card / list + dark card) ----- */
.ua-grid-2-aside {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--ua-space-8);
    align-items: start;
}

/* ----- Sub-heading inside long content ----- */
.ua-h-sub {
    font-family: var(--ua-font-heading);
    font-size: 1.15rem;
    color: var(--ua-dark);
    margin: var(--ua-space-6) 0 var(--ua-space-3);
}

/* ----- Clean bullet list with custom marker ----- */
.ua-clean-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ua-space-3);
}
.ua-clean-list li {
    position: relative;
    padding-left: 22px;
    font-size: var(--ua-fs-sm);
    line-height: var(--ua-lh-body);
    color: var(--ua-muted-text);
}
.ua-clean-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--ua-primary);
}
.ua-clean-list strong { color: var(--ua-dark); }

/* ----- Narrow reading container + clinical prose block ----- */
.ua-container--narrow {
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}
.ua-prose p {
    font-size: 1.0625rem;
    line-height: var(--ua-lh-body);
    color: var(--ua-muted-text);
    margin: 0 0 var(--ua-space-5);
}
.ua-prose p:last-child { margin-bottom: 0; }
.ua-prose strong { color: var(--ua-dark); }

/* ----- Full-width pathway variant (standalone dark section) ----- */
.ua-pathway--full {
    background: transparent;
    padding: 0;
    margin-top: var(--ua-space-6);
}
.ua-pathway--full .ua-pathway__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ua-space-6);
}
.ua-pathway--full .ua-pathway__list::before {
    top: 28px;
    bottom: auto;
    left: 56px;
    right: 56px;
    height: 2px;
    width: auto;
    background: repeating-linear-gradient(
        to right,
        rgba(255,255,255,0.22) 0 6px,
        transparent 6px 12px
    );
}
.ua-pathway--full .ua-pathway__step {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--ua-space-3);
}
.ua-pathway--full .ua-pathway__num {
    margin: 0 auto;
}

/* ----- Severity meter — prefix + dots + label ----- */
.ua-severity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ua-space-3);
    margin-top: var(--ua-space-4);
    padding-top: var(--ua-space-4);
    border-top: 1px solid var(--ua-border-light);
    font-size: var(--ua-fs-xs);
    color: var(--ua-muted-text);
}
.ua-severity__prefix {
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ua-muted-text);
}
.ua-severity__meter {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ----- Responsive collapse for symptoms-specific blocks ----- */
@media (max-width: 1100px) {
    .ua-grid-2-aside { grid-template-columns: 1fr; }
    .ua-level-bar { grid-template-columns: repeat(2, 1fr); }
    .ua-pathway--full .ua-pathway__list { grid-template-columns: repeat(2, 1fr); gap: var(--ua-space-6); }
    .ua-pathway--full .ua-pathway__list::before { display: none; }
}
@media (max-width: 760px) {
    .ua-redflag-list > li { grid-template-columns: 1fr; }
    .ua-redflag-list__icon { width: 36px; height: 36px; }
    .ua-zone-card { padding: var(--ua-space-5); }
    .ua-pathway--coloured .ua-pathway__list::before { display: none; }
    .ua-pathway__step { grid-template-columns: 48px 1fr; }
    .ua-pathway__num { width: 48px; height: 48px; font-size: 1.1rem; }
    .ua-pathway--full .ua-pathway__list { grid-template-columns: 1fr; gap: var(--ua-space-5); }
    .ua-pathway--full .ua-pathway__step { grid-template-columns: 56px 1fr; text-align: left; }
    .ua-pathway--full .ua-pathway__num { margin: 0; }
}

/* ==========================================================================
   16. FAQ ACCORDION
   ========================================================================== */

.ua-faq {
    display: grid;
    gap: var(--ua-space-4);
    grid-template-columns: 1fr 1fr;
}
.ua-faq--single { grid-template-columns: 1fr; }

.ua-faq__item {
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-md);
    overflow: hidden;
}
.ua-faq__q {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: var(--ua-space-5);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ua-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ua-space-4);
    cursor: pointer;
    line-height: var(--ua-lh-snug);
}
.ua-faq__q::after {
    content: '+';
    font-size: 1.5rem;
    color: var(--ua-primary);
    font-weight: 400;
    line-height: 1;
    transition: transform var(--ua-dur) var(--ua-ease);
}
.ua-faq__item.is-open .ua-faq__q::after {
    content: '−';
}
.ua-faq__a {
    padding: 0 var(--ua-space-5) var(--ua-space-5);
    color: var(--ua-mid-text);
    font-size: var(--ua-fs-sm);
    line-height: var(--ua-lh-body);
    display: none;
}
.ua-faq__item.is-open .ua-faq__a { display: block; }

/* ==========================================================================
   17. BLOG
   ========================================================================== */

.ua-blog-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--ua-space-12);
    align-items: start;
}

.ua-article-card {
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-md);
    overflow: hidden;
    transition: transform var(--ua-dur) var(--ua-ease), box-shadow var(--ua-dur) var(--ua-ease);
    display: flex;
    flex-direction: column;
}
.ua-article-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--ua-shadow-md);
}
.ua-article-card__media {
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, var(--ua-primary) 0%, var(--ua-primary-light) 100%);
    display: grid; place-items: center;
    color: var(--ua-white);
    font-size: 48px;
}
.ua-article-card__body { padding: var(--ua-space-5); flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ua-article-card__meta { display: flex; gap: 12px; font-size: var(--ua-fs-xs); color: var(--ua-muted-text); }
.ua-article-card__title {
    font-family: var(--ua-font-heading);
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--ua-dark);
    margin: 4px 0 0;
    line-height: var(--ua-lh-snug);
}
.ua-article-card__title a { color: inherit; text-decoration: none; }
.ua-article-card__title a:hover { color: var(--ua-primary); }
.ua-article-card__author {
    margin-top: auto;
    font-size: var(--ua-fs-xs);
    color: var(--ua-muted-text);
    padding-top: var(--ua-space-3);
}

.ua-article-card--wide { grid-column: 1 / -1; flex-direction: row; }
.ua-article-card--wide .ua-article-card__media { flex: 0 0 45%; aspect-ratio: auto; }
.ua-article-card--wide .ua-article-card__body  { padding: var(--ua-space-8); }

.ua-articles-list {
    display: grid;
    gap: var(--ua-space-6);
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ua-blog-side {
    display: flex;
    flex-direction: column;
    gap: var(--ua-space-6);
    position: sticky;
    top: 96px;
}

/* ----- Featured blog guide card ----- */
.ua-blog-featured {
    position: relative;
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-lg);
    overflow: hidden;
    box-shadow: var(--ua-shadow-md);
}
.ua-blog-featured__tag {
    position: absolute;
    top: var(--ua-space-5);
    left: var(--ua-space-5);
    z-index: 2;
    background: var(--ua-accent);
    color: var(--ua-dark);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 999px;
    box-shadow: var(--ua-shadow-sm);
}
.ua-blog-featured__grid {
    display: grid;
    grid-template-columns: 1.05fr 1.1fr;
    gap: 0;
}
.ua-blog-featured__media {
    position: relative;
    min-height: 320px;
    background: linear-gradient(135deg, var(--ua-primary) 0%, var(--ua-primary-light) 100%);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.ua-blog-featured__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ua-blog-featured__placeholder {
    font-size: 96px;
    color: var(--ua-white);
    opacity: 0.85;
}
.ua-blog-featured__body {
    padding: var(--ua-space-8);
    display: flex;
    flex-direction: column;
    gap: var(--ua-space-3);
}
.ua-blog-featured__body h2 {
    font-family: var(--ua-font-heading);
    font-size: 1.85rem;
    line-height: 1.18;
    margin: 0;
    color: var(--ua-dark);
}
.ua-blog-featured__body h2 a { color: inherit; text-decoration: none; }
.ua-blog-featured__body h2 a:hover { color: var(--ua-primary); }
.ua-blog-featured__body p {
    margin: 0;
    font-size: 1rem;
    line-height: var(--ua-lh-body);
    color: var(--ua-muted-text);
}
.ua-blog-featured__body .ua-btn { align-self: flex-start; margin-top: var(--ua-space-3); }

/* ----- Blog meta row (avatar + author + date) ----- */
.ua-blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ua-space-2);
    font-size: var(--ua-fs-sm);
    color: var(--ua-muted-text);
    margin-top: var(--ua-space-2);
}
.ua-blog-meta--sm { font-size: var(--ua-fs-xs); margin-top: auto; padding-top: var(--ua-space-3); }
.ua-blog-meta__avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--ua-primary);
    color: var(--ua-white);
    display: grid; place-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
.ua-blog-meta--sm .ua-blog-meta__avatar { width: 26px; height: 26px; font-size: 0.65rem; }
.ua-blog-meta__author { font-weight: 600; color: var(--ua-dark); }
.ua-blog-meta__dot { opacity: 0.5; }

/* ----- Toolbar: title + search + sort ----- */
.ua-blog-toolbar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: var(--ua-space-6);
    margin-bottom: var(--ua-space-6);
}
.ua-blog-toolbar h2 { margin: 0; }
.ua-blog-toolbar__controls {
    display: flex;
    gap: var(--ua-space-3);
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.ua-blog-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 280px;
}
.ua-blog-search svg {
    position: absolute;
    left: 12px;
    color: var(--ua-muted-text);
    pointer-events: none;
}
.ua-blog-search input {
    width: 100%;
    height: 42px;
    padding: 0 14px 0 38px;
    border: 1px solid var(--ua-border);
    border-radius: 999px;
    background: var(--ua-white);
    font-size: 0.95rem;
    color: var(--ua-dark);
    transition: border-color var(--ua-dur) var(--ua-ease), box-shadow var(--ua-dur) var(--ua-ease);
}
.ua-blog-search input:focus {
    outline: none;
    border-color: var(--ua-primary);
    box-shadow: 0 0 0 3px rgba(13,124,110,0.18);
}

/* ----- Category chip row ----- */
.ua-blog-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ua-space-2);
    margin-bottom: var(--ua-space-6);
}
.ua-blog-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--ua-border);
    border-radius: 999px;
    background: var(--ua-white);
    color: var(--ua-dark);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--ua-dur) var(--ua-ease), color var(--ua-dur) var(--ua-ease), border-color var(--ua-dur) var(--ua-ease);
}
.ua-blog-chip:hover { border-color: var(--ua-primary); color: var(--ua-primary); }
.ua-blog-chip.is-active { background: var(--ua-primary); color: var(--ua-white); border-color: var(--ua-primary); }
.ua-blog-chip__count {
    background: rgba(0,0,0,0.06);
    color: inherit;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
}
.ua-blog-chip.is-active .ua-blog-chip__count { background: rgba(255,255,255,0.22); }

/* ----- Post card grid (inner, 3-col on desktop) ----- */
.ua-blog-posts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ua-space-6);
}
.ua-post-card {
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-md);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform var(--ua-dur) var(--ua-ease), box-shadow var(--ua-dur) var(--ua-ease);
}
.ua-post-card:hover { transform: translateY(-3px); box-shadow: var(--ua-shadow-md); }
.ua-post-card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--ua-primary) 0%, var(--ua-primary-light) 100%);
    display: grid;
    place-items: center;
    color: var(--ua-white);
    overflow: hidden;
}
.ua-post-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ua-post-card__placeholder { font-size: 56px; }
.ua-post-card__placeholder--lg { font-size: 72px; }
.ua-post-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--ua-accent);
    color: var(--ua-dark);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
}
.ua-post-card__read {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0,0,0,0.55);
    color: var(--ua-white);
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}
.ua-post-card__body {
    padding: var(--ua-space-5);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--ua-space-2);
}
.ua-post-card__cat {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ua-primary);
}
.ua-post-card__title {
    font-family: var(--ua-font-heading);
    font-size: 1.075rem;
    line-height: 1.3;
    margin: 0;
    color: var(--ua-dark);
}
.ua-post-card__title a { color: inherit; text-decoration: none; }
.ua-post-card__title a:hover { color: var(--ua-primary); }
.ua-post-card__body p {
    margin: 0;
    font-size: var(--ua-fs-sm);
    line-height: var(--ua-lh-body);
    color: var(--ua-muted-text);
}
.ua-post-card__link {
    margin-top: auto;
    color: var(--ua-primary);
    font-weight: 700;
    font-size: var(--ua-fs-sm);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding-top: var(--ua-space-2);
}
.ua-post-card__link:hover { gap: 10px; }

/* ----- "Load more" / pagination row ----- */
.ua-blog-more { text-align: center; }

/* ----- Sidebar widgets ----- */
.ua-widget {
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-5);
    box-shadow: var(--ua-shadow-sm);
}
.ua-widget__title {
    font-family: var(--ua-font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ua-muted-text);
    margin: 0 0 var(--ua-space-4);
    padding-bottom: var(--ua-space-3);
    border-bottom: 1px solid var(--ua-border-light);
}
.ua-widget p { font-size: var(--ua-fs-sm); line-height: var(--ua-lh-body); color: var(--ua-muted-text); margin: 0 0 var(--ua-space-3); }
.ua-widget__fineprint { font-size: var(--ua-fs-xs); color: var(--ua-muted-text); text-align: center; margin: var(--ua-space-3) 0 0; }

/* Newsletter variant */
.ua-widget--newsletter {
    background: linear-gradient(160deg, #e4f5f2 0%, var(--ua-white) 100%);
    border-color: rgba(13,124,110,0.18);
}
.ua-newsletter-form { display: flex; flex-direction: column; gap: var(--ua-space-3); }
.ua-newsletter-form input[type=email] {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--ua-border);
    border-radius: var(--ua-radius-sm, 8px);
    background: var(--ua-white);
    font-size: 0.95rem;
}
.ua-newsletter-form input[type=email]:focus {
    outline: none;
    border-color: var(--ua-primary);
    box-shadow: 0 0 0 3px rgba(13,124,110,0.18);
}

/* Stats list */
.ua-widget-stats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ua-space-3); }
.ua-widget-stats li { display: flex; justify-content: space-between; align-items: center; font-size: var(--ua-fs-sm); }
.ua-widget-stats li span { color: var(--ua-muted-text); }
.ua-widget-stats li strong { font-family: var(--ua-font-heading); color: var(--ua-primary); font-size: 1.1rem; }

/* Ranked list (most read) */
.ua-widget-rank { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--ua-space-4); counter-reset: rk; }
.ua-widget-rank li { display: grid; grid-template-columns: 36px 1fr; gap: var(--ua-space-3); align-items: start; }
.ua-widget-rank__num {
    font-family: var(--ua-font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ua-primary);
    line-height: 1;
}
.ua-widget-rank li a { color: var(--ua-dark); font-weight: 600; font-size: 0.92rem; line-height: 1.35; text-decoration: none; }
.ua-widget-rank li a:hover { color: var(--ua-primary); }
.ua-widget-rank li small { display: block; color: var(--ua-muted-text); font-size: var(--ua-fs-xs); margin-top: 4px; }

/* Tag cloud */
.ua-tag-cloud { display: flex; flex-wrap: wrap; gap: 6px; }
.ua-tag {
    display: inline-block;
    padding: 5px 11px;
    background: var(--ua-bg-soft, #f1f6f5);
    color: var(--ua-dark);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--ua-dur) var(--ua-ease), color var(--ua-dur) var(--ua-ease);
}
.ua-tag:hover { background: var(--ua-primary); color: var(--ua-white); }

/* Promo widget */
.ua-widget--promo {
    background: linear-gradient(140deg, var(--ua-primary) 0%, var(--ua-dark) 100%);
    color: var(--ua-white);
    border: none;
    box-shadow: var(--ua-shadow-md);
}
.ua-widget--promo .ua-widget__title { color: var(--ua-white); border-bottom-color: rgba(255,255,255,0.18); }
.ua-widget--promo p { color: #cfe4df; }

/* ----- Editorial commitments strip ----- */
.ua-edit-strip {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--ua-space-4);
}
.ua-edit-strip li {
    display: flex;
    align-items: center;
    gap: var(--ua-space-2);
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-4);
    font-size: var(--ua-fs-sm);
    color: var(--ua-dark);
    font-weight: 600;
}
.ua-edit-strip li svg {
    width: 22px;
    height: 22px;
    color: var(--ua-primary);
    flex-shrink: 0;
}

/* ----- Muted helper class ----- */
.ua-muted { color: var(--ua-muted-text); }
.ua-mt-2 { margin-top: var(--ua-space-2); }

/* ----- Blog responsive collapses ----- */
@media (max-width: 1100px) {
    .ua-blog-grid { grid-template-columns: 1fr; }
    .ua-blog-side { position: static; top: auto; }
    .ua-blog-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ua-blog-featured__grid { grid-template-columns: 1fr; }
    .ua-blog-featured__media { min-height: 240px; }
    .ua-edit-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .ua-blog-toolbar { grid-template-columns: 1fr; }
    .ua-blog-toolbar__controls { justify-content: flex-start; }
    .ua-blog-search { min-width: 0; flex: 1 1 100%; }
    .ua-blog-posts { grid-template-columns: 1fr; }
    .ua-blog-featured__body { padding: var(--ua-space-6); }
    .ua-blog-featured__body h2 { font-size: 1.45rem; }
    .ua-edit-strip { grid-template-columns: 1fr; }
}

/* ==========================================================================
   18. CONTACT FORM
   ========================================================================== */

.ua-form {
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-8);
    box-shadow: var(--ua-shadow-sm);
}
.ua-form .ua-label { color: var(--ua-dark); }
.ua-form .ua-input,
.ua-form .ua-textarea,
.ua-form .ua-select {
    background: var(--ua-bg);
    border: 1px solid var(--ua-border);
    color: var(--ua-dark);
}
.ua-form .ua-input:focus,
.ua-form .ua-textarea:focus,
.ua-form .ua-select:focus {
    border-color: var(--ua-primary);
    box-shadow: 0 0 0 3px var(--ua-primary-xlight);
}
.ua-form__field + .ua-form__field { margin-top: var(--ua-space-4); }
.ua-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ua-space-4); }
.ua-form__note { font-size: var(--ua-fs-xs); color: var(--ua-muted-text); margin-top: var(--ua-space-3); }

/* ----- Contact form (hyphen-cased variant used on page-contact.php) ----- */
.ua-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: var(--ua-space-4);
}
.ua-form-field label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ua-muted-text);
}
.ua-form-field input,
.ua-form-field select,
.ua-form-field textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--ua-border);
    border-radius: var(--ua-radius-sm, 8px);
    background: var(--ua-white);
    color: var(--ua-dark);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.5;
    transition: border-color var(--ua-dur) var(--ua-ease), box-shadow var(--ua-dur) var(--ua-ease);
}
.ua-form-field textarea { resize: vertical; min-height: 140px; }
.ua-form-field input:focus,
.ua-form-field select:focus,
.ua-form-field textarea:focus {
    outline: none;
    border-color: var(--ua-primary);
    box-shadow: 0 0 0 3px rgba(13,124,110,0.18);
}
.ua-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ua-space-4);
}
.ua-form-row .ua-form-field { margin-bottom: 0; }
.ua-form-fineprint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: var(--ua-fs-xs);
    color: var(--ua-muted-text);
    margin: var(--ua-space-4) 0 var(--ua-space-5);
    line-height: 1.5;
}
.ua-form-fineprint svg {
    width: 14px;
    height: 14px;
    color: var(--ua-primary);
    flex-shrink: 0;
    margin-top: 2px;
}
.ua-form-response {
    margin-top: var(--ua-space-4);
    padding: 0;
}
.ua-form-response.is-success {
    padding: var(--ua-space-4);
    background: var(--ua-safe-bg, #def3e9);
    color: var(--ua-safe, #15a37d);
    border-radius: var(--ua-radius-sm, 8px);
    font-size: var(--ua-fs-sm);
    font-weight: 600;
}
.ua-form-response.is-error {
    padding: var(--ua-space-4);
    background: var(--ua-avoid-bg);
    color: var(--ua-avoid);
    border-radius: var(--ua-radius-sm, 8px);
    font-size: var(--ua-fs-sm);
    font-weight: 600;
}

/* Honeypot — hidden from humans, present for bots */
.ua-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ----- Contact method cards (3-up) ----- */
.ua-contact-card {
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-6);
    box-shadow: var(--ua-shadow-sm);
    display: flex;
    flex-direction: column;
    transition: transform var(--ua-dur) var(--ua-ease), box-shadow var(--ua-dur) var(--ua-ease);
}
.ua-contact-card:hover { transform: translateY(-3px); box-shadow: var(--ua-shadow-md); }
.ua-contact-card__icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--ua-primary-bg, #e4f5f2);
    color: var(--ua-primary);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    margin-bottom: var(--ua-space-4);
}
.ua-contact-card h3 {
    font-family: var(--ua-font-heading);
    font-size: 1.15rem;
    color: var(--ua-dark);
    margin: 0 0 var(--ua-space-3);
}
.ua-contact-card p {
    margin: 0 0 var(--ua-space-4);
    font-size: var(--ua-fs-sm);
    line-height: var(--ua-lh-body);
    color: var(--ua-muted-text);
}
.ua-contact-card__link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ua-primary);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
}
.ua-contact-card__link:hover { gap: 10px; }
.ua-contact-card--featured {
    background: linear-gradient(140deg, var(--ua-primary) 0%, var(--ua-dark) 100%);
    color: var(--ua-white);
    border: none;
}
.ua-contact-card--featured .ua-contact-card__icon { background: rgba(255,255,255,0.12); color: var(--ua-accent); }
.ua-contact-card--featured h3 { color: var(--ua-white); }
.ua-contact-card--featured p { color: #cfe4df; }
.ua-contact-card--featured .ua-contact-card__link { color: var(--ua-accent); }

/* ----- Channel list (Other Channels widget) ----- */
.ua-channel-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ua-space-3);
}
.ua-channel-list li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: var(--ua-space-3);
    align-items: start;
}
.ua-channel-list__icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--ua-bg-soft, #f1f6f5);
    color: var(--ua-primary);
    display: grid;
    place-items: center;
    font-size: 1.1rem;
}
.ua-channel-list strong {
    display: block;
    color: var(--ua-dark);
    font-size: 0.85rem;
    margin-bottom: 2px;
}
.ua-channel-list a {
    font-size: var(--ua-fs-sm);
    color: var(--ua-primary);
    text-decoration: none;
    word-break: break-word;
}
.ua-channel-list a:hover { text-decoration: underline; }

/* ----- Inline disclaimer block ----- */
.ua-disclaimer-inline {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: var(--ua-space-4);
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-left: 4px solid var(--ua-primary);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-5) var(--ua-space-6);
    box-shadow: var(--ua-shadow-sm);
}
.ua-disclaimer-inline__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--ua-primary-bg, #e4f5f2);
    color: var(--ua-primary);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.ua-disclaimer-inline strong {
    display: block;
    color: var(--ua-dark);
    font-size: 1rem;
    margin-bottom: 4px;
}
.ua-disclaimer-inline p {
    margin: 0;
    font-size: var(--ua-fs-sm);
    line-height: var(--ua-lh-body);
    color: var(--ua-muted-text);
}

/* ----- AI form row (button + privacy text) ----- */
.ua-ai-form__actions {
    display: flex;
    align-items: center;
    gap: var(--ua-space-4);
    flex-wrap: wrap;
    margin-top: var(--ua-space-4);
}

/* ----- Contact responsive ----- */
@media (max-width: 760px) {
    .ua-form-row { grid-template-columns: 1fr; }
    .ua-disclaimer-inline { grid-template-columns: 1fr; }
    .ua-disclaimer-inline__icon { width: 36px; height: 36px; }
}

/* ==========================================================================
   19. CTA BAND
   ========================================================================== */

.ua-cta-band {
    background: linear-gradient(135deg, var(--ua-primary) 0%, var(--ua-primary-dark) 100%);
    color: var(--ua-white);
    text-align: center;
    padding: var(--ua-section-y) var(--ua-section-x);
    position: relative;
    overflow: hidden;
}
.ua-cta-band__blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
    opacity: 0.4;
}
.ua-cta-band__blob--a {
    top: -180px; right: -120px;
    width: 460px; height: 460px;
    background: var(--ua-primary-light);
}
.ua-cta-band__blob--b {
    bottom: -200px; left: -80px;
    width: 380px; height: 380px;
    background: var(--ua-accent);
    opacity: 0.25;
}
.ua-cta-band__inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0 auto;
}
.ua-cta-band h2 { color: var(--ua-white); margin-bottom: var(--ua-space-4); }
.ua-cta-band p  { color: #e4f5f2; font-size: 1.0625rem; max-width: 56ch; margin-left: auto; margin-right: auto; }
.ua-cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ua-space-3);
    justify-content: center;
    margin-top: var(--ua-space-8);
}

/* CTA-band buttons — white solid + white outline */
.ua-btn--white {
    background: var(--ua-white);
    color: var(--ua-primary-dark);
    box-shadow: var(--ua-shadow-sm);
}
.ua-btn--white:hover {
    background: var(--ua-bg);
    color: var(--ua-primary-dark);
    box-shadow: var(--ua-shadow-md);
    transform: translateY(-1px);
    text-decoration: none;
}
.ua-btn--outline-white {
    background: transparent;
    color: var(--ua-white);
    border-color: rgba(255,255,255,0.55);
}
.ua-btn--outline-white:hover {
    background: rgba(255,255,255,0.12);
    color: var(--ua-white);
    border-color: var(--ua-white);
    text-decoration: none;
}

/* ==========================================================================
   19.1 WRITE-FOR-US PAGE COMPONENTS
   ========================================================================== */

/* ----- Accept/reject 2-col list ----- */
.ua-accept-col {
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-7);
    box-shadow: var(--ua-shadow-sm);
}
.ua-accept-col--yes { border-top: 4px solid #15a37d; }
.ua-accept-col--no  { border-top: 4px solid var(--ua-avoid); }
.ua-accept-col__head {
    display: flex;
    align-items: center;
    gap: var(--ua-space-3);
    margin-bottom: var(--ua-space-5);
}
.ua-accept-col__head h3 {
    font-family: var(--ua-font-heading);
    font-size: 1.2rem;
    color: var(--ua-dark);
    margin: 0;
}
.ua-accept-col__icon {
    width: 36px; height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.ua-accept-col--yes .ua-accept-col__icon { background: #def3e9; color: #15a37d; }
.ua-accept-col--no  .ua-accept-col__icon { background: var(--ua-avoid-bg); color: var(--ua-avoid); }
.ua-accept-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ua-space-3);
}
.ua-accept-col li {
    position: relative;
    padding-left: 26px;
    font-size: 0.94rem;
    line-height: var(--ua-lh-body);
    color: var(--ua-muted-text);
}
.ua-accept-col li::before {
    position: absolute;
    left: 0;
    top: 0.05em;
    font-weight: 700;
    font-size: 0.95rem;
}
.ua-accept-col--yes li::before { content: "✓"; color: #15a37d; }
.ua-accept-col--no  li::before { content: "✗"; color: var(--ua-avoid); }

/* ----- Submission spec list (label · value rows) ----- */
.ua-spec-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-md);
    overflow: hidden;
    box-shadow: var(--ua-shadow-sm);
}
.ua-spec-list li {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--ua-space-5);
    padding: var(--ua-space-5) var(--ua-space-6);
    border-bottom: 1px solid var(--ua-border-light);
}
.ua-spec-list li:last-child { border-bottom: none; }
.ua-spec-list__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ua-primary);
    padding-top: 4px;
}
.ua-spec-list__value {
    color: var(--ua-dark);
    font-size: 0.95rem;
    line-height: var(--ua-lh-body);
}

/* ----- 4-step horizontal process ladder ----- */
.ua-process {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--ua-space-5);
    position: relative;
}
.ua-process__step {
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-6);
    box-shadow: var(--ua-shadow-sm);
    display: flex;
    flex-direction: column;
    gap: var(--ua-space-3);
}
.ua-process__num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ua-primary) 0%, var(--ua-primary-light) 100%);
    color: var(--ua-white);
    display: grid;
    place-items: center;
    font-family: var(--ua-font-heading);
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(13,124,110,0.18);
}
.ua-process__step h3 {
    font-family: var(--ua-font-heading);
    font-size: 1.05rem;
    color: var(--ua-dark);
    margin: 0;
}
.ua-process__step p {
    margin: 0;
    font-size: var(--ua-fs-sm);
    line-height: var(--ua-lh-body);
    color: var(--ua-muted-text);
}

/* ----- Honesty note ----- */
.ua-honesty-note {
    background: var(--ua-white);
    border: 1px dashed var(--ua-border);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-5) var(--ua-space-6);
    font-size: 0.95rem;
    line-height: var(--ua-lh-body);
    color: var(--ua-muted-text);
    text-align: center;
}
.ua-honesty-note strong { color: var(--ua-dark); display: block; margin-bottom: 6px; font-size: 1rem; }

/* ----- Write-for-us responsive ----- */
@media (max-width: 1100px) {
    .ua-process { grid-template-columns: repeat(2, 1fr); }
    .ua-spec-list li { grid-template-columns: 1fr; gap: var(--ua-space-2); }
    .ua-spec-list__label { padding-top: 0; }
}
@media (max-width: 760px) {
    .ua-process { grid-template-columns: 1fr; }
    .ua-accept-col { padding: var(--ua-space-5); }
}

/* ==========================================================================
   19.2 LEGAL PAGES — MEDICAL DISCLAIMER + PRIVACY POLICY
   ========================================================================== */

/* ----- Compact legal hero ----- */
.ua-legal-hero {
    padding: var(--ua-space-12) 0 var(--ua-space-8);
    background: linear-gradient(180deg, var(--ua-bg-soft, #f1f6f5) 0%, var(--ua-white) 100%);
    border-bottom: 1px solid var(--ua-border-light);
}
.ua-legal-hero h1 {
    font-family: var(--ua-font-heading);
    font-size: clamp(1.6rem, 3.5vw, 2.2rem);
    color: var(--ua-dark);
    margin: var(--ua-space-3) 0 var(--ua-space-5);
}

/* ----- Document metadata strip (effective/reviewed/by) ----- */
.ua-legal-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ua-space-6);
    margin: var(--ua-space-4) 0 0;
    padding: var(--ua-space-4) 0;
    border-top: 1px solid var(--ua-border-light);
    border-bottom: 1px solid var(--ua-border-light);
}
.ua-legal-meta > div { display: flex; flex-direction: column; gap: 4px; }
.ua-legal-meta dt {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ua-muted-text);
}
.ua-legal-meta dd {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--ua-dark);
}

/* ----- Single-line summary callout ----- */
.ua-legal-summary {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: var(--ua-space-4);
    align-items: start;
    background: var(--ua-primary-bg, #e4f5f2);
    border: 1px solid rgba(13,124,110,0.22);
    border-left: 4px solid var(--ua-primary);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-5) var(--ua-space-6);
}
.ua-legal-summary__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--ua-primary);
    color: var(--ua-white);
    display: grid;
    place-items: center;
    font-size: 1.3rem;
}
.ua-legal-summary p {
    margin: 0;
    font-size: 0.95rem;
    line-height: var(--ua-lh-body);
    color: var(--ua-dark);
}
.ua-legal-summary strong { color: var(--ua-primary); margin-right: 4px; }

/* ----- 2-col legal layout: sticky TOC + content ----- */
.ua-legal-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--ua-space-10);
    align-items: start;
}
.ua-legal-toc {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: var(--ua-space-3);
}
.ua-legal-toc nav ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ua-legal-toc nav a {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: var(--ua-space-3);
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--ua-radius-sm, 8px);
    text-decoration: none;
    color: var(--ua-dark);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.4;
    transition: background var(--ua-dur) var(--ua-ease), color var(--ua-dur) var(--ua-ease);
}
.ua-legal-toc nav a:hover {
    background: var(--ua-primary-bg, #e4f5f2);
    color: var(--ua-primary);
}
.ua-legal-toc__num {
    font-family: var(--ua-font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ua-primary);
    letter-spacing: 0.06em;
}

/* ----- Legal content sections ----- */
.ua-legal-content { min-width: 0; }
.ua-legal-section {
    position: relative;
    padding-left: 88px;
    margin-bottom: var(--ua-space-10);
    scroll-margin-top: 110px;
}
.ua-legal-section__num {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--ua-font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--ua-primary);
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--ua-primary-bg, #e4f5f2);
    display: grid;
    place-items: center;
    letter-spacing: 0.04em;
}
.ua-legal-section__num--alert {
    background: var(--ua-avoid-bg);
    color: var(--ua-avoid);
}
.ua-legal-section h2 {
    font-family: var(--ua-font-heading);
    font-size: 1.4rem;
    color: var(--ua-dark);
    margin: 0 0 var(--ua-space-4);
    line-height: 1.25;
}
.ua-legal-section p {
    margin: 0 0 var(--ua-space-3);
    font-size: 0.97rem;
    line-height: var(--ua-lh-body);
    color: var(--ua-muted-text);
}
.ua-legal-section ul {
    margin: 0 0 var(--ua-space-4);
    padding-left: var(--ua-space-5);
    color: var(--ua-muted-text);
}
.ua-legal-section li {
    margin-bottom: var(--ua-space-2);
    font-size: 0.96rem;
    line-height: var(--ua-lh-body);
}
.ua-legal-section a {
    color: var(--ua-primary);
    text-decoration: underline;
    text-decoration-color: rgba(13,124,110,0.4);
    text-underline-offset: 3px;
}
.ua-legal-section a:hover { text-decoration-color: var(--ua-primary); }

/* ----- Alert legal section (emergency care) ----- */
.ua-legal-section--alert h2 { color: var(--ua-avoid); }
.ua-legal-alert {
    background: var(--ua-avoid-bg);
    border: 1px solid rgba(217,79,79,0.3);
    border-left: 4px solid var(--ua-avoid);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-5) var(--ua-space-6);
}
.ua-legal-alert strong {
    display: block;
    color: var(--ua-avoid);
    font-size: 1rem;
    margin-bottom: var(--ua-space-3);
}
.ua-legal-alert ul { margin: 0; padding-left: var(--ua-space-5); }
.ua-legal-alert li {
    color: var(--ua-dark);
    margin-bottom: 6px;
    font-size: 0.95rem;
}

/* ----- Alert variant of the .ua-callout block (footer) ----- */
.ua-callout--alert {
    border-left-color: var(--ua-avoid);
}
.ua-callout--alert .ua-callout__icon {
    background: var(--ua-avoid-bg);
    color: var(--ua-avoid);
}

/* ----- Legal page responsive ----- */
@media (max-width: 1100px) {
    .ua-legal-layout { grid-template-columns: 1fr; }
    .ua-legal-toc { position: static; top: auto; }
    .ua-legal-toc nav ol { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
}
@media (max-width: 760px) {
    .ua-legal-toc nav ol { grid-template-columns: 1fr; }
    .ua-legal-meta { gap: var(--ua-space-4); }
    .ua-legal-summary { grid-template-columns: 1fr; }
    .ua-legal-section { padding-left: 0; }
    .ua-legal-section__num {
        position: static;
        width: 48px;
        height: 48px;
        font-size: 1.1rem;
        margin-bottom: var(--ua-space-3);
    }
}

/* ==========================================================================
   19.3 MISSION / MANIFESTO PAGE COMPONENTS
   ========================================================================== */

/* ----- Mission hero (declarative, manifesto style) ----- */
.ua-mission-hero {
    position: relative;
    padding: var(--ua-space-16) 0 var(--ua-space-12);
    background: linear-gradient(160deg, #e4f5f2 0%, #f8faf9 55%, #fef9ef 100%);
    overflow: hidden;
}
.ua-mission-hero .ua-container { position: relative; z-index: 1; max-width: 920px; }
.ua-mission-hero h1 {
    font-family: var(--ua-font-heading);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    line-height: 1.18;
    color: var(--ua-dark);
    margin: var(--ua-space-4) 0 var(--ua-space-5);
    max-width: 22ch;
}
.ua-mission-hero .ua-lede {
    font-size: 1.0625rem;
    max-width: 60ch;
    color: var(--ua-muted-text);
}
.ua-mission-hero__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}
.ua-mission-hero__blob--a {
    top: -160px; right: -120px;
    width: 460px; height: 460px;
    background: var(--ua-primary-light, #b9e3da);
}
.ua-mission-hero__blob--b {
    bottom: -180px; left: -80px;
    width: 380px; height: 380px;
    background: var(--ua-accent, #c8a84b);
    opacity: 0.28;
}

/* ----- Pledge list — 5 large numbered lines ----- */
.ua-pledge-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 920px;
    counter-reset: pledge;
    display: flex;
    flex-direction: column;
    gap: var(--ua-space-5);
}
.ua-pledge-list__item {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--ua-space-6);
    align-items: start;
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-lg);
    padding: var(--ua-space-7);
    box-shadow: var(--ua-shadow-sm);
    transition: transform var(--ua-dur) var(--ua-ease), box-shadow var(--ua-dur) var(--ua-ease);
}
.ua-pledge-list__item:hover {
    transform: translateY(-2px);
    box-shadow: var(--ua-shadow-md);
    border-color: var(--ua-primary);
}
.ua-pledge-list__num {
    font-family: var(--ua-font-heading);
    font-size: 3.6rem;
    line-height: 1;
    color: var(--ua-primary);
    opacity: 0.18;
    font-weight: 700;
    user-select: none;
}
.ua-pledge-list__item h3 {
    font-family: var(--ua-font-heading);
    font-size: 1.35rem;
    color: var(--ua-dark);
    margin: 0 0 var(--ua-space-3);
    line-height: 1.25;
}
.ua-pledge-list__item p {
    margin: 0;
    font-size: 0.96rem;
    line-height: var(--ua-lh-body);
    color: var(--ua-muted-text);
}

/* ----- Signature block ----- */
.ua-signature {
    text-align: center;
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-lg);
    padding: var(--ua-space-8);
    box-shadow: var(--ua-shadow-sm);
}
.ua-signature__intro {
    font-family: var(--ua-font-heading);
    font-style: italic;
    color: var(--ua-muted-text);
    margin: 0 0 var(--ua-space-6);
    font-size: 1rem;
}
.ua-signature__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ua-space-6);
    padding: var(--ua-space-5) 0;
    border-top: 1px dashed var(--ua-border);
    border-bottom: 1px dashed var(--ua-border);
}
.ua-signature__sig {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ua-signature__name {
    font-family: var(--ua-font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ua-dark);
    letter-spacing: 0.02em;
}
.ua-signature__role {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ua-primary);
}
.ua-signature__date {
    margin: var(--ua-space-5) 0 0;
    font-size: var(--ua-fs-xs);
    color: var(--ua-muted-text);
    letter-spacing: 0.05em;
}

/* ----- Mission responsive ----- */
@media (max-width: 760px) {
    .ua-mission-hero { padding: var(--ua-space-10) 0 var(--ua-space-8); }
    .ua-pledge-list__item { grid-template-columns: 1fr; padding: var(--ua-space-5); gap: var(--ua-space-3); }
    .ua-pledge-list__num { font-size: 2.6rem; }
    .ua-signature__row { grid-template-columns: 1fr; gap: var(--ua-space-4); }
}

/* ==========================================================================
   19.4 FAQ PAGE COMPONENTS
   ========================================================================== */

/* ----- 2-col layout: sticky nav + scrollable content ----- */
.ua-faq-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: var(--ua-space-10);
    align-items: start;
}

/* ----- Sticky category nav ----- */
.ua-faq-nav {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: var(--ua-space-3);
}
.ua-faq-nav > .ua-eyebrow {
    margin-bottom: var(--ua-space-2);
}
.ua-faq-nav nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ua-faq-nav__link {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: var(--ua-space-3);
    align-items: center;
    padding: 10px 14px;
    border-radius: var(--ua-radius-md);
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    text-decoration: none;
    color: var(--ua-dark);
    font-size: 0.92rem;
    font-weight: 600;
    transition: background var(--ua-dur) var(--ua-ease), border-color var(--ua-dur) var(--ua-ease);
}
.ua-faq-nav__link:hover {
    background: var(--ua-primary-bg, #e4f5f2);
    border-color: var(--ua-primary);
    color: var(--ua-primary);
}
.ua-faq-nav__icon {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: var(--ua-primary-bg, #e4f5f2);
    display: grid; place-items: center;
    font-size: 1rem;
}
.ua-faq-nav__count {
    background: var(--ua-bg-soft, #f1f6f5);
    color: var(--ua-muted-text);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
}

/* ----- FAQ content (right column) ----- */
.ua-faq-content { min-width: 0; }

.ua-faq-group {
    margin-bottom: var(--ua-space-12);
    scroll-margin-top: 110px; /* offset for sticky header on anchor jumps */
}
.ua-faq-group__head {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--ua-space-4);
    align-items: start;
    margin-bottom: var(--ua-space-5);
    padding-bottom: var(--ua-space-4);
    border-bottom: 1px solid var(--ua-border-light);
}
.ua-faq-group__icon {
    width: 48px; height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ua-primary) 0%, var(--ua-primary-light) 100%);
    color: var(--ua-white);
    display: grid;
    place-items: center;
    font-size: 1.45rem;
    box-shadow: 0 6px 18px rgba(13,124,110,0.18);
}
.ua-faq-group__head h2 {
    font-family: var(--ua-font-heading);
    font-size: 1.45rem;
    margin: 0 0 4px;
    color: var(--ua-dark);
}
.ua-faq-group__head p {
    margin: 0;
    font-size: var(--ua-fs-sm);
    color: var(--ua-muted-text);
    line-height: var(--ua-lh-body);
}

/* ----- Callout block ("Still have a question?") ----- */
.ua-callout {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: var(--ua-space-6);
    align-items: start;
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-left: 4px solid var(--ua-primary);
    border-radius: var(--ua-radius-lg);
    padding: var(--ua-space-7) var(--ua-space-8);
    box-shadow: var(--ua-shadow-sm);
    max-width: 900px;
    margin: 0 auto;
}
.ua-callout__icon {
    width: 56px; height: 56px;
    border-radius: 16px;
    background: var(--ua-primary-bg, #e4f5f2);
    color: var(--ua-primary);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
}
.ua-callout h2 {
    font-family: var(--ua-font-heading);
    font-size: 1.35rem;
    margin: 0 0 var(--ua-space-3);
    color: var(--ua-dark);
}
.ua-callout p {
    margin: 0 0 var(--ua-space-5);
    font-size: var(--ua-fs-sm);
    line-height: var(--ua-lh-body);
    color: var(--ua-muted-text);
}
.ua-callout__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ua-space-3);
}

/* ----- FAQ responsive ----- */
@media (max-width: 1100px) {
    .ua-faq-layout { grid-template-columns: 1fr; }
    .ua-faq-nav { position: static; top: auto; }
    .ua-faq-nav nav ul { display: grid; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
    .ua-faq-nav nav ul { grid-template-columns: 1fr; }
    .ua-faq-group__head { grid-template-columns: 44px 1fr; }
    .ua-faq-group__icon { width: 40px; height: 40px; font-size: 1.2rem; }
    .ua-callout { grid-template-columns: 1fr; padding: var(--ua-space-5) var(--ua-space-6); }
}

/* ==========================================================================
   19.5 ABOUT PAGE COMPONENTS
   ========================================================================== */

/* ----- Single-line pull-quote band (between sections) ----- */
.ua-quote-band {
    padding: var(--ua-space-12) 0;
    background: linear-gradient(160deg, #e4f5f2 0%, var(--ua-bg-soft, #f1f6f5) 100%);
    border-top: 1px solid var(--ua-border-light);
    border-bottom: 1px solid var(--ua-border-light);
}
.ua-quote-band__text {
    margin: 0 auto;
    max-width: 880px;
    text-align: center;
    font-family: var(--ua-font-heading);
    font-size: 1.5rem;
    line-height: 1.45;
    color: var(--ua-dark);
    font-weight: 600;
    quotes: none;
}
.ua-quote-band__text cite { font-style: normal; }

/* ----- Large stat block (3-up problem stats) ----- */
.ua-stat-block {
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-top: 4px solid var(--ua-primary);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-7);
    box-shadow: var(--ua-shadow-sm);
}
.ua-stat-block__num {
    display: block;
    font-family: var(--ua-font-heading);
    font-size: 2.6rem;
    line-height: 1;
    color: var(--ua-primary);
    font-weight: 700;
    margin-bottom: var(--ua-space-3);
}
.ua-stat-block__title {
    font-family: var(--ua-font-heading);
    font-size: 1.1rem;
    color: var(--ua-dark);
    margin: 0 0 var(--ua-space-3);
}
.ua-stat-block p {
    margin: 0;
    font-size: var(--ua-fs-sm);
    line-height: var(--ua-lh-body);
    color: var(--ua-muted-text);
}

/* ----- Numbered belief cards (01 / 02 / 03) ----- */
.ua-belief-card {
    position: relative;
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-lg);
    padding: var(--ua-space-8) var(--ua-space-6) var(--ua-space-6);
    box-shadow: var(--ua-shadow-sm);
    overflow: hidden;
    transition: transform var(--ua-dur) var(--ua-ease), box-shadow var(--ua-dur) var(--ua-ease);
}
.ua-belief-card:hover { transform: translateY(-3px); box-shadow: var(--ua-shadow-md); }
.ua-belief-card__num {
    position: absolute;
    top: -8px;
    right: var(--ua-space-5);
    font-family: var(--ua-font-heading);
    font-size: 4.5rem;
    line-height: 1;
    color: rgba(13,124,110,0.10);
    font-weight: 700;
    user-select: none;
    pointer-events: none;
}
.ua-belief-card h3 {
    font-family: var(--ua-font-heading);
    font-size: 1.2rem;
    color: var(--ua-dark);
    margin: 0 0 var(--ua-space-3);
    position: relative;
    z-index: 1;
}
.ua-belief-card p {
    margin: 0;
    font-size: var(--ua-fs-sm);
    line-height: var(--ua-lh-body);
    color: var(--ua-muted-text);
    position: relative;
    z-index: 1;
}

/* ----- Mission statement pull-quote ----- */
.ua-pullquote {
    position: relative;
    margin: 0 auto;
    max-width: 920px;
    padding: var(--ua-space-12) var(--ua-space-8);
    text-align: center;
    color: var(--ua-white);
}
.ua-pullquote__mark {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--ua-font-heading);
    font-size: 7rem;
    line-height: 1;
    color: var(--ua-accent);
    opacity: 0.85;
    user-select: none;
    pointer-events: none;
}
.ua-pullquote p {
    font-family: var(--ua-font-heading);
    font-size: 1.85rem;
    line-height: 1.45;
    color: var(--ua-white);
    margin: 0 0 var(--ua-space-6);
    font-weight: 500;
}
.ua-pullquote cite {
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ua-accent);
}

/* ----- Persona list (Who We Serve) ----- */
.ua-persona-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ua-space-4);
    max-width: 920px;
    margin-inline: auto;
}
.ua-persona-list > li {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--ua-space-4);
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-left: 4px solid var(--ua-primary);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-5) var(--ua-space-6);
    box-shadow: var(--ua-shadow-sm);
}
.ua-persona-list__icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: var(--ua-primary-bg, #e4f5f2);
    color: var(--ua-primary);
    display: grid; place-items: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.ua-persona-list p {
    margin: 0;
    align-self: center;
    font-size: 1rem;
    line-height: var(--ua-lh-body);
    color: var(--ua-dark);
}

/* ----- Commitment cards (4-up grid) ----- */
.ua-commit-card {
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-6);
    box-shadow: var(--ua-shadow-sm);
    transition: transform var(--ua-dur) var(--ua-ease), box-shadow var(--ua-dur) var(--ua-ease);
}
.ua-commit-card:hover { transform: translateY(-3px); box-shadow: var(--ua-shadow-md); }
.ua-commit-card__icon {
    display: inline-grid;
    place-items: center;
    width: 52px; height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--ua-primary) 0%, var(--ua-primary-light) 100%);
    color: var(--ua-white);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--ua-space-4);
}
.ua-commit-card h3 {
    font-family: var(--ua-font-heading);
    font-size: 1.15rem;
    color: var(--ua-dark);
    margin: 0 0 var(--ua-space-3);
}
.ua-commit-card p {
    margin: 0;
    font-size: var(--ua-fs-sm);
    line-height: var(--ua-lh-body);
    color: var(--ua-muted-text);
}

/* ----- Big stat cards (4-up dark band) ----- */
.ua-big-stat {
    text-align: left;
    padding: var(--ua-space-5) var(--ua-space-2) 0;
    border-left: 2px solid rgba(229,169,59,0.35);
}
.ua-big-stat:first-child { border-left: none; padding-left: 0; }
.ua-big-stat__num {
    display: block;
    font-family: var(--ua-font-heading);
    font-size: 3rem;
    line-height: 1;
    color: var(--ua-accent);
    font-weight: 700;
    margin-bottom: var(--ua-space-3);
}
.ua-big-stat__label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #cfe4df;
    line-height: 1.5;
    max-width: 24ch;
}

/* ----- Team contributor cards ----- */
.ua-team-card {
    background: var(--ua-white);
    border: 1px solid var(--ua-border-light);
    border-radius: var(--ua-radius-md);
    padding: var(--ua-space-6);
    box-shadow: var(--ua-shadow-sm);
    text-align: center;
    transition: transform var(--ua-dur) var(--ua-ease), box-shadow var(--ua-dur) var(--ua-ease);
}
.ua-team-card:hover { transform: translateY(-3px); box-shadow: var(--ua-shadow-md); }
.ua-team-card__avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ua-primary) 0%, var(--ua-primary-light) 100%);
    color: var(--ua-white);
    display: grid; place-items: center;
    font-family: var(--ua-font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0 auto var(--ua-space-4);
    box-shadow: 0 6px 18px rgba(13,124,110,0.18);
}
.ua-team-card__name {
    font-family: var(--ua-font-heading);
    font-size: 1.2rem;
    color: var(--ua-dark);
    margin: 0 0 var(--ua-space-2);
}
.ua-team-card__role {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ua-primary);
    margin-bottom: var(--ua-space-3);
}
.ua-team-card p {
    margin: 0 0 var(--ua-space-4);
    font-size: var(--ua-fs-sm);
    line-height: var(--ua-lh-body);
    color: var(--ua-muted-text);
    text-align: left;
}
.ua-team-card__creds {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.ua-team-card__creds li {
    background: var(--ua-bg-soft, #f1f6f5);
    color: var(--ua-dark);
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* ----- Edit-strip large variant (with title + small descriptor) ----- */
.ua-edit-strip--lg {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ua-edit-strip--lg li {
    align-items: flex-start;
    padding: var(--ua-space-5) var(--ua-space-6);
}
.ua-edit-strip--lg li svg { margin-top: 4px; }
.ua-edit-strip--lg strong {
    display: block;
    color: var(--ua-dark);
    font-size: 1rem;
    margin-bottom: 4px;
}
.ua-edit-strip--lg small {
    display: block;
    color: var(--ua-muted-text);
    font-size: 0.85rem;
    line-height: var(--ua-lh-body);
    font-weight: 400;
}

/* ----- Hero CTA pair ----- */
.ua-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ua-space-3);
}

/* ----- About-page responsive collapses ----- */
@media (max-width: 1100px) {
    .ua-quote-band__text { font-size: 1.2rem; padding: 0 var(--ua-space-5); }
    .ua-pullquote p { font-size: 1.45rem; }
    .ua-pullquote__mark { font-size: 5rem; }
    .ua-big-stat { border-left: none; padding-left: 0; }
    .ua-big-stat__num { font-size: 2.4rem; }
}
@media (max-width: 760px) {
    .ua-persona-list > li { grid-template-columns: 1fr; }
    .ua-persona-list__icon { width: 40px; height: 40px; font-size: 1.1rem; }
    .ua-stat-block__num { font-size: 2rem; }
    .ua-belief-card__num { font-size: 3.5rem; }
    .ua-edit-strip--lg { grid-template-columns: 1fr; }
}

/* ==========================================================================
   20. FOOTER
   ========================================================================== */

.ua-footer {
    background: var(--ua-dark);
    color: #b3cfca;
    padding: var(--ua-space-16) 0 0;
}
.ua-footer__container {
    max-width: var(--ua-container);
    margin: 0 auto;
    padding: 0 var(--ua-section-x);
}

/* Medical disclaimer box — left teal border, dark tinted background */
.ua-disclaimer-box {
    display: flex;
    align-items: flex-start;
    gap: var(--ua-space-4);
    padding: var(--ua-space-5) var(--ua-space-6);
    margin-bottom: var(--ua-space-12);
    background: rgba(255,255,255,0.04);
    border-left: 4px solid var(--ua-primary);
    border-radius: var(--ua-radius-sm);
}
.ua-disclaimer-box__icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}
.ua-disclaimer-box__text {
    margin: 0;
    color: #b3cfca;
    font-size: var(--ua-fs-sm);
    line-height: var(--ua-lh-body);
}

.ua-footer__grid {
    display: grid;
    grid-template-columns: 1.7fr 1fr 1fr 1fr;
    gap: var(--ua-space-10);
    align-items: start;
}
.ua-footer__col h4 {
    color: var(--ua-white);
    font-family: var(--ua-font-body);
    font-size: var(--ua-fs-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: var(--ua-space-4);
}
.ua-footer__col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ua-footer__link {
    color: #b3cfca;
    font-size: var(--ua-fs-sm);
    text-decoration: none;
    transition: color var(--ua-dur-fast) var(--ua-ease);
}
.ua-footer__link:hover {
    color: var(--ua-white);
    text-decoration: none;
}
.ua-footer__link.is-active {
    color: var(--ua-primary-light);
}
.ua-footer__link--small {
    font-size: var(--ua-fs-xs);
    color: #8fa8a3;
}

/* Brand column */
.ua-footer__col--brand { padding-right: var(--ua-space-4); }
.ua-footer__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: var(--ua-space-4);
}
.ua-footer__brand .ua-nav__logo-mark {
    width: 40px; height: 40px;
    font-size: 20px;
}
.ua-footer__brand-name {
    font-family: var(--ua-font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ua-white);
    letter-spacing: -0.01em;
}
.ua-footer__brand-name strong {
    color: var(--ua-primary-light);
    font-weight: 700;
}
.ua-footer__about-text {
    color: #b3cfca;
    font-size: var(--ua-fs-sm);
    line-height: var(--ua-lh-body);
    margin: 0 0 var(--ua-space-5);
    max-width: 42ch;
}

/* Social row */
.ua-footer__social {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    list-style: none;
    padding: 0;
    margin: 0;
}
.ua-footer__social a {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: #b3cfca;
    display: grid;
    place-items: center;
    transition: all var(--ua-dur-fast) var(--ua-ease);
}
.ua-footer__social a:hover {
    background: var(--ua-primary);
    border-color: var(--ua-primary);
    color: var(--ua-white);
    transform: translateY(-2px);
}
.ua-footer__social a:hover svg { color: var(--ua-white); }

/* Bottom bar — copyright | mini lang | credibility */
.ua-footer__bottom {
    margin-top: var(--ua-space-12);
    padding: var(--ua-space-5) var(--ua-section-x);
    border-top: 1px solid rgba(255,255,255,0.07);
    color: #8fa8a3;
    font-size: 0.74rem;
}
.ua-footer__bottom-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--ua-space-5);
    max-width: var(--ua-container);
    margin: 0 auto;
}
.ua-footer__copy { margin: 0; }
.ua-footer__credibility {
    margin: 0;
    text-align: right;
    color: #8fa8a3;
}

/* Mini language switcher in the footer — small, single-line, pipe-separated */
.ua-footer__lang-mini {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #8fa8a3;
}
.ua-footer__lang-globe { font-size: 0.95rem; line-height: 1; }
.ua-footer__lang-mini ul {
    display: inline-flex !important;
    flex-direction: row !important;
    gap: 0;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ua-footer__lang-mini li { position: relative; }
.ua-footer__lang-mini li + li::before {
    content: '·';
    color: #4a6a64;
    margin: 0 8px;
}
.ua-footer__lang-mini a {
    color: #8fa8a3;
    font-weight: 600;
    font-size: 0.74rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    padding: 2px 0;
    border-bottom: 1px solid transparent;
    transition: color var(--ua-dur-fast) var(--ua-ease),
                border-color var(--ua-dur-fast) var(--ua-ease);
}
.ua-footer__lang-mini a:hover { color: var(--ua-white); }
.ua-footer__lang-mini a.is-active {
    color: var(--ua-white);
    border-bottom-color: var(--ua-primary-light);
}

/* ==========================================================================
   21. ADSENSE PLACEHOLDERS (visible only to admins or in DEBUG)
   ========================================================================== */

.ua-ad {
    display: block;
    margin: var(--ua-space-8) auto;
    max-width: 728px;
    min-height: 90px;
    text-align: center;
}
.ua-ad--rectangle { max-width: 300px; min-height: 250px; }
.ua-ad--placeholder {
    background: repeating-linear-gradient(45deg, var(--ua-border-light), var(--ua-border-light) 8px, var(--ua-bg) 8px, var(--ua-bg) 16px);
    border: 1px dashed var(--ua-border);
    color: var(--ua-muted-text);
    font-size: var(--ua-fs-xs);
    padding: var(--ua-space-4);
    border-radius: var(--ua-radius-sm);
    display: grid; place-items: center;
}

/* ==========================================================================
   22. REVEAL / SCROLL ANIMATIONS
   ========================================================================== */

.ua-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--ua-dur-slow) var(--ua-ease),
                transform var(--ua-dur-slow) var(--ua-ease);
    will-change: opacity, transform;
}
.ua-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   23. RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
    .ua-hero__grid { grid-template-columns: 1fr; gap: var(--ua-space-12); }
    .ua-grid-3, .ua-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ua-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ua-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ua-how-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ua-how-steps::before { display: none; }
    .ua-protocol-card { padding: var(--ua-space-10) var(--ua-space-8) var(--ua-space-8); }
    .ua-diet-grid { grid-template-columns: 1fr; }
    .ua-blog-grid { grid-template-columns: 1fr; }
    .ua-blog-side { position: static; }
    .ua-articles-list { grid-template-columns: 1fr; }
    .ua-food-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ua-food-layout { grid-template-columns: 240px 1fr; gap: var(--ua-space-6); }
    .ua-food-sidebar { position: static; }
    .ua-food-controls { grid-template-columns: 1fr; }
    .ua-footer__grid { grid-template-columns: 1fr 1fr; gap: var(--ua-space-8); }
    .ua-footer__col--brand { grid-column: 1 / -1; }
    .ua-footer__bottom-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: var(--ua-space-4); }
    .ua-footer__credibility { text-align: center; }
}

@media (max-width: 768px) {
    :root {
        --ua-section-y: 56px;
        --ua-section-x: 5%;
    }
    h1 { font-size: 2rem; }
    h2 { font-size: 1.625rem; }

    .ua-nav__primary,
    .ua-nav__cta,
    .ua-nav .ua-lang { display: none; }
    .ua-nav__hamburger { display: inline-flex; }
    .ua-nav__brand-tag { display: none; }

    .ua-grid-2, .ua-grid-3, .ua-grid-4, .ua-grid-6 { grid-template-columns: 1fr; }
    .ua-steps { grid-template-columns: 1fr; }
    .ua-food-grid { grid-template-columns: 1fr; }
    .ua-food-layout { grid-template-columns: 1fr; }
    .ua-faq { grid-template-columns: 1fr; }
    .ua-form__row { grid-template-columns: 1fr; }
    .ua-meal-card { grid-template-columns: 1fr; }
    .ua-meal-card__photo { width: 100%; height: 160px; }
    .ua-level-bar { grid-template-columns: 1fr 1fr; }
    .ua-article-card--wide { flex-direction: column; }
    .ua-article-card--wide .ua-article-card__media { flex: none; aspect-ratio: 16/9; }
    .ua-footer__grid { grid-template-columns: 1fr; }
    .ua-ai__form { grid-template-columns: 1fr; }
    .ua-ai { padding: var(--ua-space-8); }
    .ua-trust__inner { justify-content: flex-start; }
}

/* ==========================================================================
   24. PRINT
   ========================================================================== */

@media print {
    .ua-nav, .ua-cta-band, .ua-ai, .ua-ad, .ua-footer__bottom { display: none !important; }
    body { background: #fff; color: #000; }
    a { color: #000; text-decoration: underline; }
}

/* ==========================================================================
   25. UTILITIES
   ========================================================================== */

.ua-hidden { display: none !important; }
.ua-mt-0 { margin-top: 0 !important; }
.ua-mt-4 { margin-top: var(--ua-space-4); }
.ua-mt-6 { margin-top: var(--ua-space-6); }
.ua-mt-8 { margin-top: var(--ua-space-8); }
.ua-mb-0 { margin-bottom: 0 !important; }
.ua-mb-4 { margin-bottom: var(--ua-space-4); }
.ua-mb-6 { margin-bottom: var(--ua-space-6); }
.ua-mb-8 { margin-bottom: var(--ua-space-8); }
.ua-w-full { width: 100%; }

/* End of style.css */