/* Common public-site styles (shared across landing, features, blog, docs, etc.) */

/* Newsreader (Production Type, SIL OFL 1.1: fonts/newsreader/OFL.txt), from
   google/fonts ofl/newsreader v1.003, instanced to opsz 60 and wght 400-700,
   Latin + Latin-1 + Latin Extended-A. Preloaded by public/base.html only. */
@font-face {
    font-family: 'Newsreader';
    src: url("../fonts/newsreader/newsreader-latin-opsz60-wght400-700.3bb64c99533e.woff2") format('woff2');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
/* Georgia / Times scaled to Newsreader's widths and line box, so the swap does
   not move the page (measured on the site's EN/FR/DE headings in Chromium,
   2026-11-06: widths within ~1%, line boxes equal). */
@font-face {
    font-family: 'Newsreader Fallback';
    src: local('Georgia');
    font-weight: 400 500;
    size-adjust: 100.6%;
    ascent-override: 73.06%;
    descent-override: 26.34%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Newsreader Fallback';
    src: local('Georgia Bold'), local('Georgia-Bold');
    font-weight: 600 700;
    size-adjust: 89.1%;
    ascent-override: 82.49%;
    descent-override: 29.74%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Newsreader Fallback Times';
    src: local('Times New Roman'), local('TimesNewRomanPSMT');
    font-weight: 400 500;
    size-adjust: 111.2%;
    ascent-override: 66.1%;
    descent-override: 23.83%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Newsreader Fallback Times';
    src: local('Times New Roman Bold'), local('TimesNewRomanPS-BoldMT');
    font-weight: 600 700;
    size-adjust: 107.37%;
    ascent-override: 68.45%;
    descent-override: 24.68%;
    line-gap-override: 0%;
}
/* Android has neither Georgia nor Times: its serif is Noto Serif. */
@font-face {
    font-family: 'Newsreader Fallback Noto';
    src: local('Noto Serif'), local('NotoSerif-Regular');
    font-weight: 400 500;
    size-adjust: 92.1%;
    ascent-override: 79.8%;
    descent-override: 28.77%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Newsreader Fallback Noto';
    src: local('Noto Serif Bold'), local('NotoSerif-Bold');
    font-weight: 600 700;
    size-adjust: 91.18%;
    ascent-override: 80.61%;
    descent-override: 29.06%;
    line-gap-override: 0%;
}

/* Brand "Ledger" (2026-11): logo ink on warm paper, Newsreader headings,
   hairlines. The palette is tailwind.public.config.js (ink, paper). One dark
   base: the dark heroes (hero.css), the footer and the dark-mode page sit on
   the same ink-black; the bands that are grey on paper sit one step above it
   (--site-dark-band). */
:root {
    --site-dark: #100f17;
    --site-dark-band: #1a1922;
    --hairline: rgba(20, 19, 26, 0.1);
    --rule: #14131a;
    --display: 'Newsreader', 'Newsreader Fallback', 'Newsreader Fallback Times', 'Newsreader Fallback Noto', Georgia, serif;
}
.dark { --hairline: rgba(255, 255, 255, 0.1); --rule: rgba(239, 236, 229, 0.4); }

[id] { scroll-margin-top: 80px; }

/* Docs code blocks: keep the first line of code clear of the absolute Copy
   button (which sits top-right of the block). */
.code-block pre { padding-top: 1.75rem; overflow-x: auto; }

/* Long paths and class names in prose code break instead of widening the page. */
:not(pre) > code { overflow-wrap: anywhere; }

/* Touch-screen refinements (the sticky CTA bar is lg:hidden, so scope to
   below the lg breakpoint). */
@media (max-width: 1023px) {
    /* Focus and in-page jumps stop above the sticky bar (WCAG 2.4.11). */
    html { scroll-padding-bottom: 88px; }
    /* Reserve space so the fixed sticky CTA never covers page content. Use the
       footer's own bottom padding (body padding-bottom gets collapsed at the
       scroll extreme in some browsers). While the bar shows, our own chat
       launcher docks inside it, in space the bar keeps free on its right: a
       launcher stacked above the bar covered body copy and crowded the bar.
       The selectors beat embed.js's own `.emporiqa-chat-button.bottom-right`. */
    body.sticky-cta-visible footer { padding-bottom: 6.5rem; }
    body.sticky-cta-visible .emporiqa-chat-button.bottom-right,
    body.sticky-cta-visible .emporiqa-chat-button.bottom-left { bottom: 6px; }
    body:has(.emporiqa-chat-button.bottom-right) #sticky-cta > div { padding-right: 88px; }
    body:has(.emporiqa-chat-button.bottom-left) #sticky-cta > div { padding-left: 88px; }
    body.sticky-cta-visible .emporiqa-trigger-bubble.bottom-right,
    body.sticky-cta-visible .emporiqa-trigger-bubble.bottom-left { bottom: 80px; }

    /* Without the bar, the 60px launcher at 20px from the corner covered line
       ends and the estimator's results on a phone: tuck it in, and let the
       footer's last line scroll clear of it. */
    body .emporiqa-chat-button.bottom-right,
    body .emporiqa-chat-button.bottom-left {
        width: 52px;
        height: 52px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
    body .emporiqa-chat-button.bottom-right { right: 12px; }
    body .emporiqa-chat-button.bottom-left { left: 12px; }
    body:not(.sticky-cta-visible) footer { padding-bottom: 5rem; }

    /* The open mobile menu covers the page: no launcher on top of it. */
    body.mobile-menu-open .emporiqa-chat-button,
    body.mobile-menu-open .emporiqa-trigger-bubble { display: none !important; }

    /* Footer link tap targets reach the 44px minimum. */
    footer ul a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

/* Native details/summary: hide default marker across browsers */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

.chat-bubble { animation: float-slow 4s ease-in-out infinite; }

html.dark { background: var(--site-dark) !important; }
html.dark body { background: var(--site-dark) !important; color: #f7f5f0 !important; }
html.dark main section.dark\:bg-gray-900 { background-color: var(--site-dark); }
/* The bands that are grey on paper sit a step above the dark base, so a band change reads on dark too. */
html.dark main section.bg-gray-50 { background-color: var(--site-dark-band); }
html:not(.dark) { background: #f7f5f0 !important; }
html:not(.dark) body { background: #f7f5f0 !important; color: #14131a !important; }

/* Headings and money figures in Newsreader. Low specificity on purpose: a
   heading set as a small label opts out with `font-sans`. The stage draws our
   widget and demo store, and the footer's column titles are labels: both keep
   Inter. */
:where(h1, h2, h3, h4):where(:not([data-stage] *, footer *)),
.font-display {
    font-family: var(--display);
}
:where(h1, h2):where(:not([data-stage] *, footer *)):not(.font-sans),
.font-display {
    font-weight: 500 !important;
    letter-spacing: -0.012em !important;
}
:where(h3, h4):where(:not([data-stage] *, footer *)):not(.font-sans),
dt.font-display { font-weight: 600 !important; letter-spacing: 0 !important; }
/* A pill inside a heading ("Optional", "Coming soon") is a label, not type. */
:is(h1, h2, h3, h4) :is(.fx-tag, [class*="rounded-full"]) { font-family: Inter, system-ui, sans-serif; font-weight: 500; letter-spacing: 0; }
/* The one quote on a page is set like a pull quote. */
figure > blockquote { font-family: var(--display); font-weight: 400 !important; letter-spacing: 0 !important; }

/* A link inside running text is underlined: the ink is close to the body
   text, so colour alone does not mark it (WCAG 1.4.1). Buttons, card links
   and links ending in an arrow (the arrow is the cue) keep their own look. */
main :is(p, li, dd, td, figcaption) a:not([class*="btn"], [class*="block"], [class*="flex"], [class*="rounded"], [class*="bg-"], .no-underline, :has(> i[class*="fa-arrow"]:last-child), :is(nav, [role="tablist"], [role="menu"]) *) {
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
/* An arrow inside a link is never underlined (inline-block stops it). */
a > i[class*="fa-arrow"] { display: inline-block; }

/* Field edges at 3:1 against the field and the band (WCAG 1.4.11). */
main :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"]), select, textarea):not([data-stage] *) { border-color: #857f74; }
.dark main :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"]), select, textarea):not([data-stage] *) { border-color: #a39d92; }
.dark main :is(input, textarea)::placeholder { color: #a39d92; }
/* A select still on its empty choice reads as a placeholder, not a value. */
main select:has(option[value=""]:checked) { color: #6a645a; }
.dark main select:has(option[value=""]:checked) { color: #a39d92; }

/* Last lines of cards and paragraphs do not end on one lone word. */
:where(main) :where(h3, h4, p, li, dd, figcaption) { text-wrap: pretty; }

/* Paper all the way down: the bands that were white take the page colour and
   white stays for cards on it. */
html:not(.dark) main section.bg-white,
html:not(.dark) main > .bg-white { background-color: #f7f5f0; }
html:not(.dark) main section.bg-gray-50 { background-color: #efece5; }
/* A grey tile was drawn to sit on white; on paper it takes the second tone. */
html:not(.dark) main .bg-gray-50:not(section, [data-stage] *) { background-color: #efece5; }

/* The ledger line: a hairline in ink over each heading of the open page
   (not inside cards or flex rows, the stage or the dark hero). When the
   heading opens its content column, the line spans that column whatever
   measure the heading keeps, 22px above everything in it; anywhere else it
   spans the heading. */
main section:not(.hero-dark) h2:not(.sr-only, .no-rule, [data-stage] *, :where([class*="rounded-"]:is([class*="border"], [class*="bg-"])) *, .flex.items-center > *) {
    border-top: 1px solid var(--rule);
    padding-top: 22px;
}
main section:not(.hero-dark) :is(.max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl).mx-auto:not([class*="rounded-"]):has(> h2:first-child:not(.sr-only, .no-rule), > :is(header, div):first-child:not([class*="rounded-"]) > h2:nth-child(-n+2):not(.sr-only, .no-rule)) {
    padding-top: 22px;
    background-image: linear-gradient(var(--rule), var(--rule));
    background-size: 100% 1px;
    background-position: 0 -22px;
    background-repeat: no-repeat;
    background-origin: content-box;
}
main section:not(.hero-dark) :is(.max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl).mx-auto:not([class*="rounded-"]) > h2:first-child,
main section:not(.hero-dark) :is(.max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl).mx-auto:not([class*="rounded-"]) > :is(header, div):first-child:not([class*="rounded-"]) > h2:nth-child(-n+2) {
    border-top-color: transparent;
    padding-top: 0;
}

/* One width per band: a section heading, its line and a card that opens the
   band span the content column; running text keeps its measure on the same
   left edge. A wrapper that capped a heading and its text together spans the
   column, and its text keeps the wrapper's old measure. Centred wrappers
   (mx-auto) are deliberate and stay. */
main section:not(.hero-dark) h2[class*="max-w-"] { max-width: none; }
main section:not(.hero-dark) .mx-auto > :is(header, div)[class*="max-w-"]:not([class*="rounded-"], .mx-auto):has(> h2) { max-width: none; }
main section:not(.hero-dark) .mx-auto > :is(header, div).max-w-xl:not([class*="rounded-"], .mx-auto) > :not(h2) { max-width: 36rem; }
main section:not(.hero-dark) .mx-auto > :is(header, div).max-w-2xl:not([class*="rounded-"], .mx-auto) > :not(h2) { max-width: 42rem; }
main section:not(.hero-dark) .mx-auto > :is(header, div).max-w-3xl:not([class*="rounded-"], .mx-auto) > :not(h2) { max-width: 48rem; }
main section:not(.hero-dark) .mx-auto > :is(header, div).max-w-4xl:not([class*="rounded-"], .mx-auto) > :not(h2) { max-width: 56rem; }
main section:not(.hero-dark) .mx-auto > div[class*="max-w-"][class*="rounded-"]:not(.mx-auto) { max-width: none; }
main section:not(.hero-dark) .mx-auto > div[class*="max-w-"][class*="rounded-"]:not(.mx-auto) > :is(p, h2, h3) { max-width: 70ch; }
/* In a band whose heading sits beside its content, a bordered list that opens
   the other column starts on the line: it has no top border of its own. */
main section:not(.hero-dark) .mx-auto:is(.grid, [class*="lg:grid"]) > :not(:first-child):is(ul, ol, dl, div)[class*="border-y"],
main section:not(.hero-dark) .mx-auto:is(.grid, [class*="lg:grid"]) > :not(:first-child) > :first-child:is(ul, ol, dl, div)[class*="border-y"] { border-top-width: 0; }
/* A block further down a band that opens with a heading (a header after the
   stage caption, a two-column heading-and-text block) carries the line
   across the whole column. In a band laid out as columns, the band's own
   line is the only one: no column heading draws another. */
main section:not(.hero-dark) :is(.max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl).mx-auto:not(.grid, [class*="lg:grid"]) > :is(header, div):not(:first-child, [class*="rounded-"]):has(> h2:first-child:not(.sr-only, .no-rule)) {
    border-top: 1px solid var(--rule);
    padding-top: 22px;
}
main section:not(.hero-dark) .mx-auto:not(.grid, [class*="lg:grid"]) > :is(header, div):not(:first-child, [class*="rounded-"]) > h2:first-child,
main section:not(.hero-dark) .mx-auto:is(.grid, [class*="lg:grid"]) > :is(header, div) > h2:first-child { border-top-color: transparent; padding-top: 0; }
/* A header deeper in the band spans its container too; its text keeps the measure. */
main section:not(.hero-dark) .mx-auto header[class*="max-w-"]:not(.mx-auto, [class*="rounded-"] *):has(> h2:first-child) { max-width: none; }
main section:not(.hero-dark) .mx-auto header.max-w-2xl:not(.mx-auto) > :not(h2) { max-width: 42rem; }
main section:not(.hero-dark) .mx-auto header.max-w-3xl:not(.mx-auto) > :not(h2) { max-width: 48rem; }
main section:not(.hero-dark) .mx-auto header.max-w-4xl:not(.mx-auto) > :not(h2) { max-width: 56rem; }

/* Click-to-expand images (lightbox) */
.image-zoomable {
    cursor: zoom-in;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.image-zoomable:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.dark .image-zoomable:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.image-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 2rem;
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.image-lightbox.is-open {
    display: flex;
    opacity: 1;
}
.image-lightbox img {
    max-width: 95vw;
    max-height: 92vh;
    border-radius: 0.75rem;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    transform: scale(0.97);
    transition: transform 0.25s ease;
}
.image-lightbox.is-open img {
    transform: scale(1);
}
.image-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.image-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.28);
}
body.lightbox-open {
    overflow: hidden;
}

/* Type (2026-10-23): balanced headline lines, and no automatic hyphens in
   them (DE compounds broke mid-word). */
h1, h2 { text-wrap: balance; hyphens: manual; }
/* On phones a DE compound can be wider than the screen: hyphenate there only. */
@media (max-width: 640px) {
    h1, h2 { hyphens: auto; overflow-wrap: break-word; }
}

/* Buttons: one size everywhere, one primary per surface. On the dark heroes
   the primary is .hero-dark-cta (hero.css), the secondary .hero-dark-outline. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0 1.25rem;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}
/* A label longer than a small phone wraps instead of widening the page. */
@media (max-width: 639.98px) {
    .btn { white-space: normal; text-align: center; padding-block: 0.5rem; }
}
.btn-primary { background-color: #1e1b4b; color: #ffffff; transition: background-color 0.15s ease; }
.btn-primary:hover { background-color: #2e2a6b; color: #ffffff; }
/* The secondary on a light surface: outline, in light and dark theme. */
.btn-secondary { border: 1px solid #cdc7ba; background-color: #ffffff; color: #14131a; transition: border-color 0.15s ease, background-color 0.15s ease; }
.btn-secondary:hover { border-color: #1e1b4b; background-color: #efedec; color: #14131a; }
.dark .btn-secondary { border-color: #5c574f; background-color: transparent; color: #f7f5f0; }
.dark .btn-secondary:hover { border-color: #cdc8f5; background-color: rgba(205, 200, 245, 0.1); color: #ffffff; }
/* On a dark surface the primary flips to paper with ink text: logo ink on
   ink-black would not read. */
:where(.dark, .hero-dark, nav.glass-light:not(.nav-scrolled)) :is(.btn-primary, a.bg-indigo-600, button.bg-indigo-600):not(html:not(.dark) .mobile-menu *) {
    background-color: #f4f1ea;
    color: #1e1b4b;
}
:where(.dark, .hero-dark, nav.glass-light:not(.nav-scrolled)) :is(.btn-primary, a.bg-indigo-600, button.bg-indigo-600):not(html:not(.dark) .mobile-menu *):hover {
    background-color: #ffffff;
    color: #1e1b4b;
}

/* Keyboard focus that shows on every surface: links (incl. card links),
   buttons, tabs and FAQ summaries. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="tab"]:focus-visible,
input[type="range"]:focus-visible {
    outline: 2px solid #1e1b4b;
    outline-offset: 2px;
    border-radius: 6px;
}
/* The light ring where the surface is dark: 3:1 on both (WCAG 1.4.11). */
/* (Each at the specificity of the rule it overrides, so Tailwind focus
   utilities and later component rules such as .nav-panel-item still win.) */
:where(.dark, .hero-dark, nav.glass-light:not(.nav-scrolled), footer, .code-block) :is(a, button, summary):focus-visible,
:where(.dark, .hero-dark, nav.glass-light:not(.nav-scrolled), footer, .code-block) [role="tab"]:focus-visible {
    outline-color: #cdc8f5;
}
:where(.dark) input[type="range"]:focus-visible {
    outline-color: #cdc8f5;
}
:where(html:not(.dark) [role="menu"], html:not(.dark) .mobile-menu) :is(a, button):focus-visible {
    outline-color: #1e1b4b;
}

/* Pricing estimator sliders. --fill is set by the estimator script; the
   accent-color is the fallback where the custom track is not drawn. */
.range-input {
    --fill: 0%;
    --track: #e2ded4;
    --ink: #1e1b4b;
    accent-color: var(--ink);
    -webkit-appearance: none;
    appearance: none;
    height: 18px;
    background: transparent;
}
.dark .range-input { --track: #3a3732; --ink: #cdc8f5; }
.range-input::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 9999px;
    background: linear-gradient(to right, var(--ink) var(--fill), var(--track) var(--fill));
}
.range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -7px;
    border-radius: 9999px;
    background: #ffffff;
    box-shadow: 0 0 0 2px var(--ink), 0 1px 3px rgba(0, 0, 0, 0.3);
}
.range-input::-moz-range-track { height: 4px; border-radius: 9999px; background: var(--track); }
.range-input::-moz-range-progress { height: 4px; border-radius: 9999px; background: var(--ink); }
.range-input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 9999px;
    background: #ffffff;
    box-shadow: 0 0 0 2px var(--ink), 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Pricing: the three price tiles share one card. */
.price-tile {
    border-radius: 10px;
    border: 1px solid #e2ded4;
    background: #ffffff;
    padding: 1.5rem;
    text-align: center;
}
.dark .price-tile { border-color: #3f3c40; background: #16151e; }
/* The rate tile: on dark a light edge and a lifted fill mark it, as the ring and grey header do on paper. */
.dark .price-tile-featured { border-color: #a39d92; background: #1f1e24; }
.price-tile-value { display: flex; align-items: baseline; justify-content: center; min-height: 2.5rem; }

/* /compare/ matrix: Emporiqa is the first vendor column (compare_matrix.VENDORS). */
.cmp-vs-table tr > :nth-child(2) { background-color: rgba(30, 27, 75, 0.05); }
.dark .cmp-vs-table tr > :nth-child(2) { background-color: rgba(205, 200, 245, 0.07); }

/* Nav disclosure panels (base.html, base.js). Colours sit on the inner spans:
   hero.css colours every nav `a` by scroll state, and the panel is always a
   light (or dark-mode) card whatever the bar behind it looks like. */
.nav-dd { position: relative; display: flex; align-items: center; gap: 0.125rem; }
.nav-dd-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5rem; height: 1.5rem; border-radius: 0.375rem;
}
.nav-dd-toggle:focus-visible { outline: 2px solid #cdc8f5; outline-offset: 1px; }
/* One chevron for both panels and the language picker: 12px, thin, grey. */
.nav-chevron { width: 12px; height: 12px; color: #a39d92; flex-shrink: 0; transition: transform 0.16s ease, color 0.16s ease; }
.nav-dd-toggle:hover .nav-chevron, [data-lang-toggle]:hover .nav-chevron { color: currentColor; }
.nav-dd[data-open] .nav-chevron, [data-lang-toggle][aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }

.nav-panel {
    position: absolute; top: 100%; left: -0.875rem; padding-top: 1.375rem;
    width: 22rem; visibility: hidden; opacity: 0; transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}
.nav-panel-wide { width: 36rem; }
.nav-dd[data-open] .nav-panel {
    visibility: visible; opacity: 1; transform: none; pointer-events: auto;
    transition-delay: 0s;
}
.nav-panel-card {
    background: #fff; border: 1px solid #e2ded4; border-radius: 8px;
    box-shadow: 0 16px 40px -16px rgba(20, 19, 26, 0.22), 0 2px 6px -2px rgba(20, 19, 26, 0.06);
    padding: 0.5rem;
}
.nav-panel-grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 0.125rem 0.25rem;
}
html nav.glass-light .nav-panel a.nav-panel-item {
    display: block; padding: 0.625rem 0.75rem; border-radius: 6px;
}
html nav.glass-light .nav-panel-grid-compact a.nav-panel-item { padding-top: 0.5rem; padding-bottom: 0.5rem; }
html nav.glass-light .nav-panel a.nav-panel-item:hover { background-color: #f7f5f0; }
.nav-panel-item:focus-visible, .nav-panel-more:focus-visible { outline: 2px solid #1e1b4b; outline-offset: -2px; border-radius: 6px; }
.nav-panel-title { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; color: #14131a; }
.nav-panel-line { display: block; margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.125rem; color: #6a645a; }
.nav-panel-item:hover .nav-panel-title { color: #2e2a6b; }
.nav-panel-item-all .nav-panel-title { color: #1e1b4b; }
.dark .nav-panel-item-all .nav-panel-title { color: #cdc8f5; }
.nav-panel-foot {
    margin-top: 0.375rem; padding: 0.625rem 0.75rem 0.375rem;
    border-top: 1px solid #efece5;
}
.nav-panel-foot-split { display: flex; justify-content: space-between; gap: 1rem; }
.nav-panel-more { display: inline-flex; align-items: center; gap: 0.375rem; }
.nav-panel-more > span { font-size: 0.875rem; font-weight: 500; color: #1e1b4b; }
.nav-panel-more-quiet > span { color: #5c574f; }
.nav-panel-more:hover > span { color: #2e2a6b; }
.nav-panel-more > span[aria-hidden] { transition: transform 0.16s ease; }
.nav-panel-more:hover > span[aria-hidden] { transform: translateX(2px); }

.dark .nav-panel-card {
    background: #16151e; border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
}
html.dark nav.glass-light .nav-panel a.nav-panel-item:hover { background-color: rgba(255, 255, 255, 0.04); }
.dark .nav-panel-title { color: #efece5; }
.dark .nav-panel-line { color: #a39d92; }
.dark .nav-panel-item:hover .nav-panel-title { color: #cdc8f5; }
.dark .nav-panel-foot { border-top-color: rgba(255, 255, 255, 0.06); }
.dark .nav-panel-more > span { color: #cdc8f5; }
.dark .nav-panel-more-quiet > span { color: #cdc7ba; }
.dark .nav-panel-more:hover > span { color: #dad6f7; }

@media (prefers-reduced-motion: reduce) {
    .nav-panel, .nav-chevron, .nav-panel-more > span[aria-hidden] { transition: none; transform: none; }
    .nav-dd[data-open] .nav-chevron, [data-lang-toggle][aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
}

/* Mobile menu: the sub-links sit indented under their item, quieter, and the
   menu scrolls inside the fixed header when it is taller than the screen. */
.mobile-menu { max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); overflow-y: auto; overscroll-behavior: contain; }
.mobile-menu-sub { margin: 0 0 0.375rem 0.75rem; padding-left: 0.5rem; border-left: 1px solid #e2ded4; }
.mobile-menu-sub a { display: flex; align-items: center; min-height: 44px; }
.mobile-menu-icon-close, .mobile-menu-button[aria-expanded="true"] .mobile-menu-icon-open { display: none; }
.mobile-menu-button[aria-expanded="true"] .mobile-menu-icon-close { display: inline-block; }
/* Below the fixed header (z-50), above the page and the sticky bar (z-40). */
.mobile-menu-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(0, 0, 0, 0.4); }
.mobile-menu-backdrop[hidden] { display: none; }
body.mobile-menu-open { overflow: hidden; }
.mobile-menu-sub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mobile-menu-sub-grid > :last-child { grid-column: 1 / -1; }
nav.glass-light .mobile-menu .mobile-menu-sub a:not(.bg-indigo-600) { color: #6a645a; }
.dark .mobile-menu-sub { border-left-color: #3f3c40; }
.dark nav.glass-light .mobile-menu .mobile-menu-sub a:not(.bg-indigo-600) { color: #a39d92; }

/* Footer (base.html): five link columns after the brand, legal links in the bottom bar. */
.site-footer { padding: 4rem 0 2rem; }
/* The shadow carries the footer's ink below it, so a page shorter than the
   window does not end on a strip of paper (it adds no scroll). */
footer[role="contentinfo"] { border-top: 1px solid rgba(255, 255, 255, 0.08); background-color: var(--site-dark); box-shadow: 0 50vh 0 50vh var(--site-dark); }
.footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 2rem; }
.footer-brand { grid-column: 1 / -1; }
@media (min-width: 768px) {
    .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
    .footer-grid { grid-template-columns: 1.35fr repeat(5, minmax(0, 1fr)); }
    .footer-brand { grid-column: auto; }
}
.footer-heading { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; color: #efece5; margin-bottom: 1rem; }
/* Below 1024px every footer link is already a 44px row (top of this file). */
@media (min-width: 1024px) {
    .footer-list > li + li { margin-top: 0.625rem; }
}
@media (max-width: 1023px) {
    .footer-legal-link { padding: 0.5rem 0; }
}
.footer-link, .footer-legal-link { font-size: 0.875rem; line-height: 1.25rem; color: #a39d92; transition: color 0.15s ease; }
.footer-link:hover, .footer-legal-link:hover { color: #fff; }
.footer-bottom {
    margin-top: 3.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex; flex-direction: column; gap: 0.75rem;
    font-size: 0.75rem; line-height: 1.125rem; color: #948e83;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 0.375rem 1.25rem; }
.footer-legal-link { font-size: 0.75rem; line-height: 1.125rem; }
@media (min-width: 1280px) {
    .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; gap: 2rem; }
    .footer-bottom > p { flex-shrink: 0; }
    .footer-legal { justify-content: flex-end; }
}

/* French typography: a narrow no-break space inside the guillemets of a <q>. */
q:lang(fr) { quotes: "\00AB\202F" "\202F\00BB"; }