/* =====================================================================
   Calizr Marketing — Design System v1
   Tokens, primitives & component styles per Calizr DS handoff (May 2026).
   Jade + Saffron · Instrument Serif + Geist · Cream substrate.
   ===================================================================== */

:root {
    /* ---------------- Brand / neutrals ---------------- */
    --ink:        oklch(0.20 0.02 250);
    --ink-2:      oklch(0.32 0.02 250);
    --muted:      oklch(0.52 0.01 250);
    --muted-2:    oklch(0.68 0.008 250);
    --line:       oklch(0.92 0.005 85);
    --line-2:     oklch(0.96 0.004 85);
    --cream:      oklch(0.985 0.008 85);  /* page background */
    --cream-2:    oklch(0.965 0.012 85);
    --surface:    #ffffff;                 /* card / input fill */

    /* ---------------- Jade — primary ---------------- */
    --jade-50:    oklch(0.97 0.02 165);
    --jade-100:   oklch(0.93 0.04 165);
    --jade-200:   oklch(0.86 0.07 165);
    --jade-300:   oklch(0.75 0.10 165);
    --jade-400:   oklch(0.63 0.11 165);
    --jade-500:   oklch(0.52 0.11 165);
    --jade-600:   oklch(0.43 0.10 165);
    --jade-700:   oklch(0.34 0.08 165);
    --jade-900:   oklch(0.22 0.05 165);

    /* ---------------- Saffron — AI accent only ---------------- */
    --saffron-100: oklch(0.96 0.04 80);
    --saffron-300: oklch(0.88 0.10 78);
    --saffron-500: oklch(0.79 0.16 75);
    --saffron-700: oklch(0.55 0.13 60);

    /* ---------------- Semantic ---------------- */
    --danger:     oklch(0.58 0.18 25);
    --danger-bg:  oklch(0.96 0.03 25);
    --warn:       oklch(0.74 0.14 70);
    --info:       oklch(0.60 0.10 230);
    --ok:         var(--jade-500);

    /* ---------------- Service discipline swatches ---------------- */
    --svc-color:      oklch(0.62 0.14 35);
    --svc-cut:        oklch(0.55 0.14 280);
    --svc-treatment:  oklch(0.60 0.12 80);
    --svc-wellness:   oklch(0.55 0.13 165);

    /* ---------------- Type ---------------- */
    --serif: "Instrument Serif", "Times New Roman", Georgia, serif;
    --sans:  "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono:  "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* ---------------- Spacing (4 px base) ---------------- */
    --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
    --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;

    /* ---------------- Radii ---------------- */
    --r-xs: 4px; --r-sm: 6px; --r-md: 10px;
    --r-lg: 14px; --r-xl: 20px; --r-2xl: 28px; --r-pill: 999px;

    /* ---------------- Elevation ---------------- */
    --sh-1: 0 1px 0 rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.04);
    --sh-2: 0 1px 2px rgb(0 0 0 / 0.04), 0 4px 12px -2px rgb(0 0 0 / 0.06);
    --sh-3: 0 2px 4px rgb(0 0 0 / 0.04), 0 12px 28px -8px rgb(0 0 0 / 0.10);
    --sh-focus: 0 0 0 3px color-mix(in oklch, var(--jade-500) 28%, transparent);

    /* ---------------- Legacy aliases (mapped onto Calizr DS) ---------------- */
    --primary-color:   var(--jade-500);
    --primary-light:   var(--jade-400);
    --primary-dark:    var(--jade-700);
    --secondary-color: var(--jade-600);
    --success-color:   var(--jade-500);
    --error-color:     var(--danger);
    --text-primary:    var(--ink);
    --text-secondary:  var(--muted);
    --text-muted:      var(--muted-2);
    --bg-light:        var(--cream);
    --bg-white:        var(--surface);
    --border-color:    var(--line);
    --cloud:           var(--cream);
    --porcelain:       var(--surface);
    --lime:            var(--jade-400);
    --coral:           var(--saffron-500);
    --blue:            var(--info);
    --violet:          var(--jade-500);
}

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

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background-color: var(--cream);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

a { color: inherit; }

h1, h2, h3, h4 {
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--ink);
    text-wrap: balance;
    margin: 0 0 var(--s-4);
}
h5, h6 {
    font-family: var(--sans);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.005em;
    color: var(--ink);
    margin: 0 0 var(--s-3);
}
h1 { font-size: clamp(48px, 6.4vw, 84px); }
h2 { font-size: clamp(34px, 4vw, 52px); }
h3 { font-size: clamp(26px, 2.4vw, 36px); }
h4 { font-size: 24px; }

em { font-style: italic; color: var(--jade-600); }
::selection { background: color-mix(in oklch, var(--jade-300) 60%, transparent); color: var(--ink); }

/* =====================================================================
   Typography helpers
   ===================================================================== */
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; }
.mono  { font-family: var(--mono); }
.eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jade-700);
    font-weight: 500;
}
.lede {
    max-width: 62ch;
    color: var(--muted);
    font-size: 16px;
}
.serif-display {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(56px, 7vw, 92px);
    line-height: 0.95;
    letter-spacing: -0.02em;
}
.serif-numeral {
    font-family: var(--serif);
    font-size: 96px;
    line-height: 0.85;
    letter-spacing: -0.03em;
}

.text-gradient {
    background: linear-gradient(135deg, var(--jade-600) 0%, var(--jade-400) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* =====================================================================
   Buttons
   ===================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1;
    height: 40px;
    padding: 0 var(--s-5);
    border-radius: var(--r-md);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease,
                color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.btn.lg { height: 48px; padding: 0 var(--s-6); font-size: 15px; }
.btn.sm { height: 32px; padding: 0 var(--s-4); font-size: 13px; }
.btn[disabled], .btn.disabled { opacity: 0.45; cursor: not-allowed; }

.btn.primary { background: var(--ink); color: var(--cream); }
.btn.primary:hover { background: color-mix(in oklch, var(--ink) 88%, var(--jade-500)); }

.btn.jade { background: var(--jade-500); color: #ffffff; }
.btn.jade:hover { background: var(--jade-600); }

.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn.secondary:hover { border-color: var(--jade-300); }

.btn.ghost { background: transparent; color: var(--ink-2); }
.btn.ghost:hover { background: var(--cream-2); color: var(--ink); }

.btn.danger { background: var(--danger); color: #ffffff; }

.btn.ai {
    background: linear-gradient(135deg, var(--ink) 0%, oklch(0.16 0.03 250) 100%);
    color: var(--cream);
    border-color: color-mix(in oklch, var(--saffron-500) 35%, transparent);
}
.btn.ai:hover {
    border-color: var(--saffron-500);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--saffron-500) 24%, transparent);
}

/* Legacy compat */
.btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--jade-500); color: #fff; border: none;
    padding: 12px 24px; border-radius: var(--r-md); font-weight: 600;
    font-family: var(--sans); cursor: pointer;
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover { background: var(--jade-600); }
.btn-outline {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: transparent; color: var(--ink);
    border: 1px solid var(--line); padding: 11px 23px;
    border-radius: var(--r-md); font-weight: 600; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.btn-outline:hover { border-color: var(--jade-400); background: var(--cream-2); }

/* =====================================================================
   Navigation links
   ===================================================================== */
.nav-link {
    color: var(--ink-2);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    padding: 8px 12px;
    border-radius: var(--r-sm);
    transition: background-color .15s ease, color .15s ease;
}
.nav-link:hover { background-color: var(--cream-2); color: var(--ink); }
.nav-link.active { color: var(--jade-700); background-color: var(--jade-50); }

/* =====================================================================
   Cards
   ===================================================================== */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: var(--s-6);
    box-shadow: var(--sh-1);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.card:hover { border-color: var(--jade-300); box-shadow: var(--sh-2); }
.card-featured { border: 1px solid var(--jade-500); box-shadow: var(--sh-2); position: relative; }
.card-featured::before {
    content: '';
    position: absolute;
    inset: -1px auto auto -1px;
    width: 3px; height: 100%;
    background: var(--jade-500);
    border-radius: var(--r-xl) 0 0 var(--r-xl);
}

/* =====================================================================
   Hero patterns
   ===================================================================== */
.cs-hero {
    background: var(--cream);
    padding: clamp(56px, 9vw, 112px) 0 var(--s-12);
    border-bottom: 1px solid var(--line);
}
.cs-hero h1 em { color: var(--jade-600); font-style: italic; }

.cs-hero-dark {
    background: var(--ink);
    color: var(--cream);
    position: relative;
    overflow: hidden;
}
.cs-hero-dark h1, .cs-hero-dark h2, .cs-hero-dark h3 { color: var(--cream); }
.cs-hero-dark h1 em { color: var(--saffron-300); }
.cs-hero-dark .eyebrow { color: var(--saffron-300); }
.cs-hero-dark::before {
    content: '';
    position: absolute;
    top: -200px; right: -160px;
    width: 540px; height: 540px;
    background: radial-gradient(circle, color-mix(in oklch, var(--saffron-500) 12%, transparent) 0%, transparent 70%);
    pointer-events: none;
}

/* Legacy hero compat */
.hero {
    background: var(--cream);
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
}
.hero-content { position: relative; z-index: 1; }

/* =====================================================================
   Capability chips
   ===================================================================== */
.capability-strip {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: var(--s-5) 0;
}
.capability-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    background: var(--cream);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    padding: 8px 14px;
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--ink-2);
    white-space: nowrap;
    text-transform: none;
}
.capability-chip .chip-dot {
    width: 6px; height: 6px;
    border-radius: var(--r-pill);
    background: var(--jade-500);
    flex-shrink: 0;
}
.capability-chip .mud-icon-root { color: var(--jade-600); }

.proof-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    background: color-mix(in oklch, var(--jade-100) 60%, var(--cream));
    border: 1px solid var(--jade-200);
    border-radius: var(--r-pill);
    padding: 6px 12px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--jade-700);
}

/* =====================================================================
   Badges
   ===================================================================== */
.badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--muted);
}
.badge.jade    { background: var(--jade-50); border-color: var(--jade-200); color: var(--jade-700); }
.badge.saffron { background: var(--saffron-100); border-color: var(--saffron-300); color: var(--saffron-700); }
.badge.ink     { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.badge.danger  { background: var(--danger-bg); border-color: color-mix(in oklch, var(--danger) 40%, transparent); color: var(--danger); }

/* =====================================================================
   AI moments — used only when surfacing an AI action
   ===================================================================== */
.ai-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--ink) 0%, oklch(0.17 0.03 250) 100%);
    color: var(--cream);
    border: 1px solid color-mix(in oklch, var(--saffron-500) 22%, transparent);
    border-radius: var(--r-2xl);
    padding: var(--s-8);
    box-shadow: var(--sh-3);
}
.ai-card::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, color-mix(in oklch, var(--saffron-500) 30%, transparent) 0%, transparent 65%);
    pointer-events: none;
}
.ai-card > * { position: relative; z-index: 1; }
.ai-card .ai-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--saffron-300);
}
.ai-card .ai-body {
    font-family: var(--serif);
    font-size: clamp(20px, 2vw, 26px);
    line-height: 1.3;
    color: var(--cream);
    margin: var(--s-3) 0 0;
}
.ai-card .ai-body em { font-style: italic; color: var(--saffron-300); }

/* Mini AI suggestion box (e.g. inside a calendar preview card) */
.ai-suggestion-box {
    background: color-mix(in oklch, var(--saffron-500) 14%, transparent);
    border: 1px solid color-mix(in oklch, var(--saffron-500) 28%, transparent);
    border-radius: var(--r-md);
    padding: var(--s-3) var(--s-4);
}

/* =====================================================================
   Calendar preview blocks (used inside Home hero ai-card)
   ===================================================================== */
.appt-block {
    height: 22px;
    border-radius: var(--r-xs);
    color: #fff;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.04em;
    display: flex; align-items: center; justify-content: center;
    padding: 0 6px;
    box-shadow: inset 3px 0 0 rgba(0,0,0,0.18);
}
.appt-gap {
    height: 22px;
    border-radius: var(--r-xs);
    background: repeating-linear-gradient(135deg,
        rgba(255,255,255,0.04) 0 6px,
        rgba(255,255,255,0.08) 6px 12px);
    border: 1px dashed rgba(255,255,255,0.18);
}

/* =====================================================================
   Pricing card
   ===================================================================== */
.pricing-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-2xl);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pricing-card:hover { border-color: var(--jade-300); box-shadow: var(--sh-2); transform: translateY(-2px); }
.pricing-card.popular { border-color: var(--jade-500); box-shadow: var(--sh-2); }
.pricing-card.popular:hover { transform: translateY(-2px); }

.price-tag {
    font-family: var(--serif);
    font-size: 88px;
    line-height: 0.9;
    letter-spacing: -0.03em;
    color: var(--ink);
    font-weight: 400;
}
.price-period {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}

/* =====================================================================
   Feature icon (legacy)
   ===================================================================== */
.feature-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--r-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: var(--s-4);
    background: var(--jade-50);
    color: var(--jade-700);
}
.feature-icon.purple { background: var(--jade-50); color: var(--jade-700); }
.feature-icon.blue   { background: color-mix(in oklch, var(--info) 12%, transparent); color: var(--info); }
.feature-icon.green  { background: var(--jade-50); color: var(--jade-600); }
.feature-icon.orange { background: var(--saffron-100); color: var(--saffron-700); }

/* =====================================================================
   Comparison table
   ===================================================================== */
.comparison-table { border-collapse: collapse; width: 100%; }
.comparison-table th,
.comparison-table td {
    padding: var(--s-4);
    text-align: center;
    border-bottom: 1px solid var(--line);
}
.comparison-table th { background: var(--cream-2); font-weight: 600; font-family: var(--sans); }
.comparison-table th.salon25 { background: var(--ink); color: var(--cream); }
.comparison-table td:first-child { text-align: left; font-weight: 500; }
.check-icon { color: var(--jade-500); }
.cross-icon { color: var(--danger); }

/* =====================================================================
   Testimonial
   ===================================================================== */
.testimonial-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-xl);
    padding: var(--s-8);
    position: relative;
}
.testimonial-card::before {
    content: '"';
    position: absolute;
    top: 12px; left: 24px;
    font-family: var(--serif);
    font-size: 96px;
    line-height: 0.7;
    color: var(--jade-100);
}
.testimonial-content { position: relative; z-index: 1; }

/* =====================================================================
   Footer
   ===================================================================== */
.footer {
    background: var(--ink);
    color: var(--cream);
    padding: var(--s-16) 0 var(--s-6);
}
.footer-link {
    color: color-mix(in oklch, var(--cream) 75%, transparent);
    text-decoration: none;
    transition: color .15s ease;
}
.footer-link:hover { color: var(--cream); }

/* =====================================================================
   Animations
   ===================================================================== */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp .6s ease-out forwards; }
.delay-1 { animation-delay: .08s; }
.delay-2 { animation-delay: .16s; }
.delay-3 { animation-delay: .24s; }
.delay-4 { animation-delay: .32s; }

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}
.pulse { animation: pulse 2.4s ease-in-out infinite; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 960px) {
    .pricing-card.popular { transform: none; }
    .pricing-card.popular:hover { transform: translateY(-4px); }
}
@media (max-width: 600px) {
    .price-tag { font-size: 64px; }
}

/* =====================================================================
   Navigation progress
   ===================================================================== */
.navigation-progress {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 9999; height: 3px !important;
}
.navigation-progress .mud-progress-linear-bar { height: 3px; background: var(--jade-500); }

/* =====================================================================
   Brand wordmark / mark
   ===================================================================== */
.brand-word {
    font-family: var(--serif);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--ink);
}
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

/* =====================================================================
   Utility classes
   ===================================================================== */
.shadow-lg     { box-shadow: var(--sh-3); }
.rounded-xl    { border-radius: var(--r-xl); }
.rounded-2xl   { border-radius: var(--r-2xl); }
.border-primary{ border: 1px solid var(--jade-500); }
.bg-gradient   { background: linear-gradient(135deg, var(--jade-700) 0%, var(--jade-500) 100%); }
.bg-cream      { background: var(--cream); }
.bg-cream-2    { background: var(--cream-2); }
.bg-ink        { background: var(--ink); color: var(--cream); }
.text-white    { color: #ffffff; }
.text-cream    { color: var(--cream); }
.text-primary  { color: var(--jade-700); }
.text-muted    { color: var(--muted); }
.text-ink      { color: var(--ink); }

/* =====================================================================
   MudBlazor overrides
   ===================================================================== */
.mud-button.mud-button-filled {
    text-transform: none;
    font-weight: 600;
    border-radius: var(--r-md);
    letter-spacing: 0;
}
.mud-button.mud-button-outlined,
.mud-button.mud-button-text {
    text-transform: none;
    font-weight: 600;
    border-radius: var(--r-md);
    letter-spacing: 0;
}
.mud-paper { border-radius: var(--r-xl); }

.mud-input-outlined .mud-input-outlined-border { border-color: var(--line); }
.mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--jade-300); }
.mud-input-outlined.mud-input-focused .mud-input-outlined-border { border-color: var(--jade-500); }

.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4 {
    font-family: var(--serif) !important;
    font-weight: 400 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.05 !important;
}
.mud-typography-h5,
.mud-typography-h6 {
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: -0.005em;
}
.mud-typography-body1,
.mud-typography-body2 {
    font-family: var(--sans);
}
.mud-typography-caption,
.mud-typography-overline {
    font-family: var(--mono) !important;
    letter-spacing: 0.08em;
}

/* Suppress focus ring on <FocusOnNavigate> programmatic focus target (non-interactive h1). */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
}

/* =====================================================================
   Language selector — SEO friendly, hover dropdown
   ===================================================================== */
.language-selector {
    position: relative;
    display: inline-block;
}
.language-selector .language-button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--r-sm);
    cursor: pointer;
    font-size: 1.2rem;
    transition: background-color .15s ease, border-color .15s ease;
}
.language-selector .language-button:hover {
    background: var(--cream-2);
    border-color: var(--line);
}
.language-selector .current-flag { font-size: 1.2rem; line-height: 1; }
.language-selector .language-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 168px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    box-shadow: var(--sh-3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
    z-index: 1000;
    padding: 6px 0;
}
.language-selector:hover .language-dropdown,
.language-selector:focus-within .language-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.language-selector .language-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: var(--ink);
    transition: background-color .12s ease;
    font-size: 0.92rem;
}
.language-selector .language-option:hover { background: var(--cream-2); }
.language-selector .language-option.active {
    background: var(--jade-50);
    color: var(--jade-700);
    font-weight: 600;
}
.language-selector .language-option .flag { font-size: 1.2rem; line-height: 1; }

.mobile-language-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    text-decoration: none;
    color: var(--ink);
    transition: background-color .12s ease;
}
.mobile-language-link:hover { background: var(--cream-2); }
.mobile-language-link.active {
    background: var(--jade-50);
    color: var(--jade-700);
    font-weight: 600;
}