/**
 * chrome.css — site chrome: header, primary navigation, language switcher,
 * mobile menu, footer, skip link and chat widget placement.
 * Phase 4 / audit #1 (kept), #3, #4, #14, #15.
 *
 * Markup: resources/views/layouts/app.blade.php and
 * resources/views/partials/{header-nav,mobile-nav,language-switcher,footer-links}.blade.php
 * Behaviour: public/assets/js/main.js (fixed header, menu, language dropdown).
 * Loaded after ds.css. Tokens and logical properties only.
 *
 * Breakpoints used here
 *   header      burger menu below 1280px, desktop row from 1280px
 *   wide        header social icons from 1440px
 *   mobile / tablet / desktop (footer grid): < 768, 768–1023, >= 1024
 */

:root {
    /* 64px mobile / 80px desktop. main.js keeps it equal to the rendered height. */
    --header-height: var(--space-16);
    /* Header row max width. The header carries more items (language, social,
       seven links, CTA, logo) than the 1200px content column can hold. */
    --chrome-max: 1600px;
}
@media (min-width: 1280px) {
    :root { --header-height: var(--space-20); }
    /* Anchors land below the fixed header. */
    html { scroll-padding-block-start: var(--header-height); }
}

/* ==========================================================================
   1. Header
   Three states: hero (homepage top, over the red ground: transparent, white
   ink, light logo), solid (inner pages: raised surface, dark ink, colour
   logo), fixed (after scrolling, desktop only: solid + elevation-1, pinned
   flush to the top).
   ========================================================================== */
.site-header {
    position: relative;
    z-index: var(--z-nav);
    inline-size: 100%;
    background-color: var(--surface-raised);
    color: var(--ink-primary);
    font-family: var(--font-sans);
    transition:
        background-color var(--duration-standard) var(--ease-standard),
        box-shadow var(--duration-standard) var(--ease-standard),
        color var(--duration-standard) var(--ease-standard);
}
.site-header--solid {
    box-shadow: inset 0 -1px 0 var(--border-subtle);
}
.site-header--hero {
    /* Continues the homepage hero's brand surface above it. */
    background-color: var(--surface-brand);
    color: var(--ink-on-brand);
}

.site-header.is-fixed {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    background-color: var(--surface-raised);
    color: var(--ink-primary);
    box-shadow: var(--elevation-1);
    animation: site-header-in var(--duration-standard) var(--ease-standard);
}
/* Glass: while the header floats over scrolling content it takes the
   overlay surface (design system: --surface-overlay + blur 20px, saturate
   180%). Browsers without backdrop-filter keep the solid surface above. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header.is-fixed {
        background-color: var(--surface-overlay);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        backdrop-filter: blur(20px) saturate(180%);
        box-shadow: inset 0 -1px 0 var(--border-subtle), var(--elevation-1);
    }
}
/* Reduced transparency: back to the solid surface. */
@media (prefers-reduced-transparency: reduce) {
    .site-header.is-fixed {
        background-color: var(--surface-raised);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}
@keyframes site-header-in {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}
/* While fixed, main.js pads the body by the space the header occupied in the
   flow (--header-flow-offset), so the content never jumps. */
body.header-fixed {
    padding-block-start: var(--header-flow-offset, var(--header-height));
}

.site-header__bar {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    block-size: var(--space-16);
    max-inline-size: var(--chrome-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Logo cell (end of the row). */
.site-header__brand {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-block-size: 44px;
    margin-inline-start: auto;
    border-radius: var(--radius-xs);
}
.site-header__logo {
    display: block;
    block-size: var(--space-10);
    inline-size: auto;
}
.site-header__logo--light {
    display: none;
    /* The settings logo ships with a salmon (#F55855) mark (brand-drift audit).
       Forced to the permitted white-on-red colourway. */
    filter: brightness(0) invert(1);
}
.site-header--hero:not(.is-fixed) .site-header__logo--light { display: block; }
.site-header--hero:not(.is-fixed) .site-header__logo--solid { display: none; }

/* Burger (start of the row, < 1280px). */
.site-header__burger,
.site-menu__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    inline-size: 44px;
    block-size: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    cursor: pointer;
}
.site-header__burger .ds-icon,
.site-menu__close .ds-icon {
    inline-size: 24px;
    block-size: 24px;
}
.site-header__burger:hover,
.site-menu__close:hover { background-color: var(--surface-sunken); }
.site-header--hero:not(.is-fixed) .site-header__burger:hover { background-color: var(--brand-red-hover); }

/* Desktop-only cells are hidden below 1280px. */
.site-header__utilities,
.site-header__nav,
.site-header__actions {
    display: none;
}

@media (min-width: 1280px) {
    .site-header__bar {
        block-size: var(--space-20);
        gap: var(--space-6);
    }
    .site-header__burger { display: none; }

    .site-header__utilities {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        gap: var(--space-2);
        padding-inline-end: var(--space-4);
        border-inline-end: 1px solid var(--border-default);
    }
    .site-header--hero:not(.is-fixed) .site-header__utilities { border-inline-end-color: var(--red-400); }

    .site-header__nav {
        display: flex;
        justify-content: center;
        flex: 1 1 auto;
        min-inline-size: 0;
    }
    .site-header__actions {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }
    .site-header__brand { margin-inline-start: 0; }
    .site-header__logo { block-size: var(--space-12); }
}

/* Header social icons only where there is room for them (they stay in the
   footer and in the mobile menu). */
.site-header__social.site-social { display: none; }
@media (min-width: 1440px) {
    .site-header__social.site-social { display: flex; }
}

/* Focus: brand ring on light states, white ring on the red hero. */
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-menu a:focus-visible,
.site-menu button:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--focus-ring);
}
.site-header--hero:not(.is-fixed) a:focus-visible,
.site-header--hero:not(.is-fixed) button:focus-visible {
    outline-color: var(--ink-on-brand);
    box-shadow: none;
}
/* The language menu is a white surface, also over the hero: brand ring,
   drawn inside the option so the menu's edge never clips it. */
.site-header .lang-switch__menu a:focus-visible,
.site-header--hero:not(.is-fixed) .lang-switch__menu a:focus-visible {
    outline: 2px solid var(--border-brand);
    outline-offset: -2px;
    box-shadow: inset 0 0 0 6px var(--focus-ring);
}

/* ==========================================================================
   2. Primary navigation (desktop)
   ========================================================================== */
.site-nav__list {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-nav__item { display: flex; }
.site-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: var(--space-2);
    border-radius: var(--radius-xs);
    color: inherit;
    font-family: var(--font-sans);
    font-size: var(--type-subheadline-size);
    line-height: var(--type-subheadline-leading);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--duration-micro) var(--ease-standard);
}
/* 2px underline: hover preview, solid on the current page. */
.site-nav__link::after {
    content: "";
    position: absolute;
    inset-inline: var(--space-2);
    inset-block-end: var(--space-1);
    block-size: 2px;
    border-radius: var(--radius-full);
    background-color: currentColor;
    transform: scaleX(0);
    transition: transform var(--duration-micro) var(--ease-standard);
}
.site-nav__link:hover { color: var(--ink-brand); text-decoration: none; }
.site-nav__link:hover::after,
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.site-nav__link[aria-current="page"] {
    color: var(--ink-brand);
    font-weight: 600;
}
/* On the red hero the brand ink would vanish: white text, white underline. */
.site-header--hero:not(.is-fixed) .site-nav__link,
.site-header--hero:not(.is-fixed) .site-nav__link:hover,
.site-header--hero:not(.is-fixed) .site-nav__link[aria-current="page"] {
    color: var(--ink-on-brand);
}

.site-header__cta { flex-shrink: 0; }

/* ==========================================================================
   3. Social icons (header, mobile menu, footer)
   24px line icons in 44px targets.
   ========================================================================== */
.site-social {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border-radius: var(--radius-full);
    color: inherit;
    transition:
        background-color var(--duration-micro) var(--ease-standard),
        color var(--duration-micro) var(--ease-standard);
}
.site-social__link .ds-icon {
    inline-size: 24px;
    block-size: 24px;
}
.site-social__link:hover {
    background-color: var(--brand-red-tint);
    color: var(--ink-brand);
}
.site-header--hero:not(.is-fixed) .site-social__link:hover,
.site-footer .site-social__link:hover {
    background-color: var(--brand-red-hover);
    color: var(--ink-on-brand);
}

/* ==========================================================================
   4. Language switcher
   Compact dropdown in the header; a direct link in the mobile menu.
   ========================================================================== */
.lang-switch {
    position: relative;
    flex-shrink: 0;
}
.lang-switch__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-block-size: 44px;
    margin: 0;
    padding-inline: var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    font-family: var(--font-sans);
    font-size: var(--type-subheadline-size);
    line-height: var(--type-subheadline-leading);
    font-weight: 600;
    cursor: pointer;
}
.lang-switch__toggle:hover { background-color: var(--surface-sunken); }
.site-header--hero:not(.is-fixed) .lang-switch__toggle:hover { background-color: var(--brand-red-hover); }
.lang-switch__code { font-family: var(--font-sans); }
.lang-switch__caret {
    inline-size: 16px;
    block-size: 16px;
    transition: transform var(--duration-micro) var(--ease-standard);
}
.lang-switch__toggle[aria-expanded="true"] .lang-switch__caret { transform: rotate(180deg); }

.lang-switch__menu {
    position: absolute;
    inset-block-start: calc(100% + var(--space-2));
    inset-inline-start: 0;
    z-index: var(--z-overlay);
    min-inline-size: 160px;
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    background-color: var(--surface-raised);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--elevation-3);
}
.lang-switch__menu[hidden] { display: none; }
.lang-switch__option {
    display: flex;
    align-items: center;
    min-block-size: 44px;
    padding-inline: var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--ink-primary);
    font-size: var(--type-callout-size);
    line-height: var(--type-callout-leading);
    font-weight: 500;
    text-decoration: none;
}
.lang-switch__option:hover {
    background-color: var(--brand-red-tint);
    color: var(--ink-brand);
    text-decoration: none;
}

/* ==========================================================================
   5. Mobile menu (< 1280px)
   Full-height sheet from the inline-start edge, scrim behind it.
   ========================================================================== */
.site-menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0s linear var(--duration-standard);
}
.site-menu.is-open {
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}
html.menu-open { overflow: hidden; }

.site-menu__scrim {
    position: absolute;
    inset: 0;
    background-color: var(--surface-scrim);
    opacity: 0;
    transition: opacity var(--duration-standard) var(--ease-standard);
}
.site-menu.is-open .site-menu__scrim { opacity: 1; }

.site-menu__sheet {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    max-inline-size: 420px;
    overscroll-behavior: contain;
    background-color: var(--surface-raised);
    color: var(--ink-primary);
    font-family: var(--font-sans);
    box-shadow: var(--elevation-4);
    transform: translateX(-100%);
    transition: transform var(--duration-standard) var(--ease-standard);
}
[dir="rtl"] .site-menu__sheet { transform: translateX(100%); }
.site-menu.is-open .site-menu__sheet { transform: none; }

.site-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-shrink: 0;
    block-size: var(--space-16);
    padding-inline: var(--gutter);
    border-block-end: 1px solid var(--border-subtle);
}
.site-menu__brand {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
}
.site-menu__logo {
    display: block;
    block-size: var(--space-10);
    inline-size: auto;
}

.site-menu__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-3) var(--gutter);
}
.site-menu__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-menu__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-block-size: var(--space-12);
    padding-inline: var(--space-4);
    border-radius: var(--radius-sm);
    border-inline-start: 3px solid transparent;
    color: var(--ink-primary);
    font-size: var(--type-headline-size);
    line-height: var(--type-headline-leading);
    font-weight: 500;
    text-decoration: none;
}
.site-menu__link:hover {
    background-color: var(--surface-raised-alt);
    color: var(--ink-primary);
    text-decoration: none;
}
.site-menu__link[aria-current="page"] {
    background-color: var(--brand-red-tint);
    border-inline-start-color: var(--brand-red);
    color: var(--ink-brand);
    font-weight: 600;
}
.site-menu__chevron {
    color: var(--ink-tertiary);
}
.site-menu__link[aria-current="page"] .site-menu__chevron { color: var(--ink-brand); }

.site-menu__foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    flex-shrink: 0;
    padding: var(--space-4) var(--gutter) var(--space-6);
    border-block-start: 1px solid var(--border-subtle);
}
.site-menu__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.site-menu .site-social__link { color: var(--ink-secondary); }

@media (min-width: 1280px) {
    .site-menu { display: none; }
}

/* ==========================================================================
   6. Footer
   Brand surface: white ink only. Grid: brand · programs & company · legal ·
   contact, then app links, then the bottom bar.
   ========================================================================== */
.site-footer {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-16) var(--space-6);
    background-color: var(--surface-brand);
    color: var(--ink-on-brand);
    font-family: var(--font-sans);
    font-size: var(--type-subheadline-size);
    line-height: var(--type-subheadline-leading);
}
.site-footer a {
    color: var(--ink-on-brand);
    text-decoration: none;
}
.site-footer a:hover {
    color: var(--ink-on-brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.site-footer a:focus-visible {
    outline: 2px solid var(--ink-on-brand);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* The graphic device: one edge crop inside the top padding band, so it never
   sits under text. The F never mirrors, it only changes corner. */
.site-footer__device {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    inline-size: 240px;
    block-size: var(--space-12);
    fill: none;
    stroke: currentColor;
    stroke-width: 40;
    opacity: var(--opacity-device-graphic);
    pointer-events: none;
}

/* Phones: brand and contact span the width, the two link lists sit side by side. */
.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8) var(--space-4);
}
@media (max-width: 767px) {
    .site-footer__brand,
    .site-footer__grid > .site-footer__col:last-child { grid-column: 1 / -1; }
}
@media (min-width: 768px) {
    .site-footer__grid { gap: var(--space-10) var(--space-8); }
}
@media (min-width: 1024px) {
    .site-footer__grid {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.5fr);
    }
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
}
.site-footer__logo-link {
    display: inline-flex;
    min-block-size: 44px;
}
.site-footer__logo {
    display: block;
    inline-size: var(--space-16);
    block-size: var(--space-16);
    object-fit: contain;
}
.site-footer .site-footer__slogan {
    margin: 0;
    max-inline-size: 42ch;
    color: var(--ink-on-brand);
    font-size: var(--type-subheadline-size);
    line-height: var(--type-subheadline-leading);
}

.site-footer__title {
    margin: 0 0 var(--space-3);
    color: var(--ink-on-brand);
    font-family: var(--font-sans);
    font-size: var(--type-headline-size);
    line-height: var(--type-headline-leading);
    font-weight: 600;
}

.site-footer__links,
.site-footer__contact {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}
.site-footer__links a {
    display: inline-flex;
    align-items: center;
    min-block-size: 36px;
}
@media (pointer: coarse) {
    .site-footer__links a { min-block-size: 44px; }
}
.site-footer__links a[aria-current="page"] {
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.site-footer__contact { gap: var(--space-2); }
.site-footer__contact li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-block-size: 36px;
}
.site-footer__contact li > .ds-icon {
    flex-shrink: 0;
    margin-block-start: 1px;
}
.site-footer__contact a {
    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
}
@media (pointer: coarse) {
    /* A 44px target around a 24px line: pulled up so the text stays on
       the icon's line. */
    .site-footer__contact a { min-block-size: 44px; margin-block-start: calc(-1 * var(--space-3) + var(--space-px) * 2); }
}
.site-footer__address { max-inline-size: 36ch; }
.site-footer__map {
    display: inline-block;
    margin-inline-start: var(--space-1);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer__apps {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    margin-block-start: var(--space-10);
}
.site-footer .site-footer__apps-title {
    margin: 0;
    font-size: var(--type-headline-size);
    line-height: var(--type-headline-leading);
    font-weight: 600;
}
.site-footer__apps-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.site-footer .site-footer__app {
    border-color: var(--ink-on-brand);
    color: var(--ink-on-brand);
}
.site-footer .site-footer__app:hover {
    background-color: var(--brand-red-hover);
    text-decoration: none;
}

.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    margin-block-start: var(--space-12);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--red-400);
}
/* Legal row: the regulatory licence line, then the copyright. */
.site-footer__legal {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: 0;
}
.site-footer .site-footer__licence,
.site-footer .site-footer__notice,
.site-footer .site-footer__copyright {
    margin: 0;
    max-inline-size: 72ch;
    font-size: var(--type-footnote-size);
    line-height: var(--type-footnote-leading);
    color: var(--ink-on-brand);
}
.site-footer .site-footer__licence { font-weight: 600; }
/* Admin-only reminder that required content is missing. */
.site-footer .site-footer__notice {
    padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--ink-on-brand);
    border-radius: var(--radius-xs);
}
.site-footer__social { margin-inline-start: calc(-1 * var(--space-3)); }
@media (min-width: 768px) {
    .site-footer__social { margin-inline-start: 0; margin-inline-end: calc(-1 * var(--space-3)); }
}

/* Reduced motion: no slide-ins; state changes still fade (tokens shorten
   durations to 100ms). */
@media (prefers-reduced-motion: reduce) {
    .site-header.is-fixed { animation: none; }
    .site-menu__sheet,
    [dir="rtl"] .site-menu__sheet { transition: none; }
}

/* ==========================================================================
   7. Skip link — visually hidden until it receives keyboard focus.
   ========================================================================== */
.skip-link {
    position: fixed;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    /* Parked above the viewport; slides in with transform (no layout work). */
    transform: translateY(calc(-100% - var(--space-4)));
    z-index: var(--z-toast);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-sm);
    background-color: var(--brand-red);
    color: var(--ink-on-brand);
    font-family: var(--font-sans);
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--duration-standard) var(--ease-standard);
}
.skip-link:focus {
    transform: none;
    outline: 2px solid var(--ink-on-brand);
    outline-offset: calc(-1 * var(--space-1));
}

/* ==========================================================================
   8. Zoho SalesIQ chat button (#15)
   Collapsed icon only, at the block-end / inline-end corner, clear of form
   buttons; smaller on phones. Main behaviour is set through the SalesIQ JS
   API in partials/tracking-footer.blade.php; these rules are the fallback.
   ========================================================================== */
/* The widget renders its own RTL layout whatever the page language, so the
   button takes the page direction for the logical insets to resolve. */
[dir="ltr"] #zsiq_float.zsiq-float { direction: ltr; }
[dir="rtl"] #zsiq_float.zsiq-float { direction: rtl; }
#zsiq_float.zsiq-float {
    inset-block-end: var(--space-6);
    inset-inline-end: var(--space-6);
    inset-inline-start: auto;
    z-index: var(--z-sticky);
}
/* The teaser bubble ("we are offline / leave a message") never opens by itself. */
#zs-fl-tip.zsiq-float-tooltip { display: none; }

/* Phones: the widget already scales the 55px button to 0.8 (44px visual,
   the minimum tap target); only the offset tightens. */
@media (max-width: 767px) {
    #zsiq_float.zsiq-float {
        inset-block-end: var(--space-3);
        inset-inline-end: var(--space-3);
    }
}

/* ==========================================================================
   9. Tracking consent banner (partials/tracking-consent.blade.php)
   A plain card at the block end, opposite the chat button. Shown only when
   the consent gate is on and FFC has supplied the text.
   ========================================================================== */
.site-consent {
    position: fixed;
    inset-block-end: var(--space-4);
    inset-inline-start: var(--space-4);
    z-index: var(--z-overlay);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    inline-size: calc(100% - 2 * var(--space-4));
    max-inline-size: calc(var(--content-max) * 0.4);
    padding: var(--space-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background-color: var(--surface-raised);
    box-shadow: var(--elevation-3);
    color: var(--ink-primary);
}
.site-consent[hidden] { display: none; }
.site-consent__text {
    margin: 0;
    font-size: var(--type-subheadline-size);
    line-height: var(--type-subheadline-leading);
}
.site-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.site-consent__actions .ds-btn { flex: 1 1 auto; }