/* =========================================================================
   XSiter Design System — public site layer
   =========================================================================
   Loads AFTER the legacy public stylesheets and upgrades them in place. It
   never renames a class, so existing markup keeps working; it only restates
   presentation using tokens.

   Contents
     1. Tokens            6. Cards & surfaces
     2. Base & typography 7. Forms
     3. Layout rhythm     8. Navigation
     4. Motion & a11y     9. Hero & sections
     5. Buttons          10. Footer, badges, tables, utilities
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Brand — `--in-primary` is written by the theme engine; everything here
     derives from it so a single brand colour restyles the whole surface. */
  --xs-brand:        var(--in-primary, #5d579e);
  --xs-brand-ink:    color-mix(in oklab, var(--xs-brand) 78%, black);
  --xs-brand-soft:   color-mix(in oklab, var(--xs-brand) 12%, white);
  --xs-brand-line:   color-mix(in oklab, var(--xs-brand) 24%, white);
  --xs-accent:       var(--in-accent, #01696f);

  /* Neutrals — a single warm-grey ramp keeps surfaces from looking muddy. */
  --xs-n-0:  #ffffff;
  --xs-n-25: #fcfcfd;
  --xs-n-50: #f8f9fb;
  --xs-n-100:#f1f3f7;
  --xs-n-200:#e5e8ef;
  --xs-n-300:#d2d7e2;
  --xs-n-400:#a4acbe;
  --xs-n-500:#78829a;
  --xs-n-600:#565f76;
  --xs-n-700:#3c4459;
  --xs-n-800:#262c3c;
  --xs-n-900:#151a26;

  /* Semantic surfaces */
  --xs-bg:        var(--xs-n-50);
  --xs-surface:   var(--xs-n-0);
  --xs-surface-2: var(--xs-n-100);
  --xs-border:    var(--xs-n-200);
  --xs-border-str:var(--xs-n-300);
  --xs-text:      var(--xs-n-800);
  --xs-text-mute: var(--xs-n-500);
  --xs-heading:   var(--xs-n-900);

  --xs-success: #0f8a5f;
  --xs-warning: #b3730a;
  --xs-danger:  #cc3341;
  --xs-info:    #1668b8;

  /* Type — fluid between a 360px phone and a 1280px desktop. */
  --xs-font: var(--theme-font-body, var(--in-font, 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif));
  --xs-font-head: var(--theme-font-heading, var(--xs-font));
  --xs-text-xs:   0.78rem;
  --xs-text-sm:   0.875rem;
  --xs-text-base: 1rem;
  --xs-text-lg:   clamp(1.06rem, 0.99rem + 0.30vw, 1.19rem);
  --xs-text-xl:   clamp(1.25rem, 1.14rem + 0.50vw, 1.50rem);
  --xs-text-2xl:  clamp(1.55rem, 1.34rem + 0.94vw, 2.05rem);
  --xs-text-3xl:  clamp(1.95rem, 1.57rem + 1.70vw, 2.90rem);
  --xs-text-4xl:  clamp(2.35rem, 1.72rem + 2.80vw, 3.90rem);

  --xs-leading-tight: 1.14;
  --xs-leading-snug:  1.32;
  --xs-leading:       1.62;
  --xs-tracking-tight: -0.022em;
  --xs-tracking-wide:   0.06em;

  /* Space — a 4px base with a musical progression. */
  --xs-1: .25rem;  --xs-2: .5rem;   --xs-3: .75rem;  --xs-4: 1rem;
  --xs-5: 1.5rem;  --xs-6: 2rem;    --xs-7: 3rem;    --xs-8: 4rem;
  --xs-9: 6rem;    --xs-10: 8rem;
  --xs-section: clamp(3.5rem, 2.2rem + 5.5vw, 7rem);

  /* Shape */
  --xs-r-sm: 8px;
  --xs-r:    var(--theme-radius, 12px);
  --xs-r-lg: calc(var(--xs-r) + 6px);
  --xs-r-xl: calc(var(--xs-r) + 14px);
  --xs-r-pill: 999px;

  /* Elevation — layered low-opacity shadows read as real depth,
     a single large blur reads as a smudge. */
  --xs-shadow-xs: 0 1px 2px rgb(16 24 40 / .05);
  --xs-shadow-sm: 0 1px 3px rgb(16 24 40 / .07), 0 1px 2px -1px rgb(16 24 40 / .05);
  --xs-shadow:    0 4px 8px -2px rgb(16 24 40 / .07), 0 2px 4px -2px rgb(16 24 40 / .05);
  --xs-shadow-md: 0 12px 16px -4px rgb(16 24 40 / .08), 0 4px 6px -2px rgb(16 24 40 / .04);
  --xs-shadow-lg: 0 20px 24px -4px rgb(16 24 40 / .10), 0 8px 8px -4px rgb(16 24 40 / .04);
  --xs-shadow-xl: 0 24px 48px -12px rgb(16 24 40 / .18);
  --xs-ring: 0 0 0 4px color-mix(in oklab, var(--xs-brand) 22%, transparent);

  /* Motion */
  --xs-ease:     cubic-bezier(.4, 0, .2, 1);
  --xs-ease-out: cubic-bezier(.16, 1, .3, 1);
  --xs-fast: 120ms;
  --xs-mid:  220ms;
  --xs-slow: 420ms;
}

/* Dark mode: the theme engine sets data-pc-theme / .theme-dark, and we also
   honour the OS preference when the operator has not forced light. */
:root[data-pc-theme="dark"],
body.theme-dark {
  --xs-bg:        #0d1017;
  --xs-surface:   #151a24;
  --xs-surface-2: #1c2331;
  --xs-border:    #262f3f;
  --xs-border-str:#364155;
  --xs-text:      #dde3ee;
  --xs-text-mute: #929cb0;
  --xs-heading:   #f3f6fb;
  --xs-brand-soft: color-mix(in oklab, var(--xs-brand) 22%, #151a24);
  --xs-brand-line: color-mix(in oklab, var(--xs-brand) 38%, #151a24);
  --xs-shadow-xs: 0 1px 2px rgb(0 0 0 / .40);
  --xs-shadow-sm: 0 1px 3px rgb(0 0 0 / .45);
  --xs-shadow:    0 4px 10px -2px rgb(0 0 0 / .50);
  --xs-shadow-md: 0 12px 20px -6px rgb(0 0 0 / .55);
  --xs-shadow-lg: 0 20px 32px -8px rgb(0 0 0 / .60);
  --xs-shadow-xl: 0 28px 56px -12px rgb(0 0 0 / .70);
  color-scheme: dark;
}

/* ---------- 2. Base & typography ---------------------------------------- */

body.landing-page {
  background: var(--xs-bg);
  color: var(--xs-text);
  font-family: var(--xs-font);
  font-size: var(--xs-text-base);
  line-height: var(--xs-leading);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-synthesis-weight: none;
}

body.landing-page h1, body.landing-page h2, body.landing-page h3,
body.landing-page h4, body.landing-page h5, body.landing-page h6 {
  font-family: var(--xs-font-head);
  color: var(--xs-heading);
  line-height: var(--xs-leading-tight);
  letter-spacing: var(--xs-tracking-tight);
  font-weight: 700;
  text-wrap: balance;          /* no single-word last lines in headings */
  margin-block-end: .5em;
}
body.landing-page h1 { font-size: var(--xs-text-4xl); }
body.landing-page h2 { font-size: var(--xs-text-3xl); }
body.landing-page h3 { font-size: var(--xs-text-2xl); }
body.landing-page h4 { font-size: var(--xs-text-xl); line-height: var(--xs-leading-snug); }
body.landing-page h5 { font-size: var(--xs-text-lg); line-height: var(--xs-leading-snug); }
body.landing-page h6 {
  font-size: var(--xs-text-sm); text-transform: uppercase;
  letter-spacing: var(--xs-tracking-wide); color: var(--xs-text-mute); font-weight: 600;
}

body.landing-page p { text-wrap: pretty; }
body.landing-page .lead {
  font-size: var(--xs-text-lg);
  line-height: 1.55;
  color: var(--xs-text-mute);
  font-weight: 400;
  max-width: 62ch;
}
body.landing-page .text-muted { color: var(--xs-text-mute) !important; }
body.landing-page small, body.landing-page .small { font-size: var(--xs-text-sm); }

body.landing-page a { color: var(--xs-brand); text-decoration-thickness: 1px; text-underline-offset: .18em; }
body.landing-page a:hover { color: var(--xs-brand-ink); }

body.landing-page hr { border-color: var(--xs-border); opacity: 1; }
body.landing-page code, body.landing-page kbd {
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
  font-size: .9em; background: var(--xs-surface-2);
  padding: .12em .4em; border-radius: var(--xs-r-sm);
}
body.landing-page ::selection { background: color-mix(in oklab, var(--xs-brand) 26%, transparent); }

body.landing-page img { max-width: 100%; height: auto; }

/* ---------- 3. Layout rhythm -------------------------------------------- */

body.landing-page .in-section { padding-block: var(--xs-section); }
body.landing-page .in-section.pt-0 { padding-block-start: 0; }
body.landing-page .in-section + .in-section { padding-block-start: 0; }

/* Long-form prose inside a builder block should not run edge to edge. */
body.landing-page .page-html-content,
body.landing-page .sb-block-wrap .rte-content { max-width: 72ch; }

/* ---------- 4. Motion & accessibility ------------------------------------ */

body.landing-page :focus-visible {
  outline: 2px solid var(--xs-brand);
  outline-offset: 2px;
  border-radius: var(--xs-r-sm);
}
body.landing-page :focus:not(:focus-visible) { outline: none; }

.skip-link {
  position: fixed; inset-block-start: 0; inset-inline-start: 50%;
  translate: -50% -120%;
  z-index: 2000;
  background: var(--xs-brand); color: #fff;
  padding: var(--xs-3) var(--xs-5);
  border-radius: 0 0 var(--xs-r) var(--xs-r);
  font-weight: 600; text-decoration: none;
  transition: translate var(--xs-mid) var(--xs-ease-out);
}
.skip-link:focus { translate: -50% 0; color: #fff; }

html { scroll-behavior: smooth; scroll-padding-block-start: calc(var(--in-nav-height, 76px) + 1rem); }

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

/* ---------- 5. Buttons --------------------------------------------------- */

body.landing-page .btn {
  --_bg: transparent; --_fg: var(--xs-text); --_bd: transparent;
  font-weight: 600;
  font-size: var(--xs-text-sm);
  letter-spacing: -.005em;
  border-radius: var(--xs-r-sm);
  padding: .625rem 1.05rem;
  border: 1px solid var(--_bd);
  background: var(--_bg);
  color: var(--_fg);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  transition: background var(--xs-fast) var(--xs-ease),
              border-color var(--xs-fast) var(--xs-ease),
              color var(--xs-fast) var(--xs-ease),
              box-shadow var(--xs-mid) var(--xs-ease),
              translate var(--xs-fast) var(--xs-ease);
  text-decoration: none;
}
body.landing-page .btn:active { translate: 0 1px; }
body.landing-page .btn:focus-visible { box-shadow: var(--xs-ring); outline: none; }
body.landing-page .btn-lg { padding: .8rem 1.5rem; font-size: var(--xs-text-base); border-radius: var(--xs-r); }
body.landing-page .btn-sm { padding: .4rem .8rem; font-size: var(--xs-text-xs); }
body.landing-page .btn i, body.landing-page .btn .ti { font-size: 1.1em; line-height: 0; }

body.landing-page .btn-in-primary,
body.landing-page .btn-primary {
  --_bg: var(--xs-brand); --_fg: #fff; --_bd: var(--xs-brand);
  box-shadow: var(--xs-shadow-xs);
}
body.landing-page .btn-in-primary:hover,
body.landing-page .btn-primary:hover {
  --_bg: var(--xs-brand-ink); --_bd: var(--xs-brand-ink); --_fg: #fff;
  box-shadow: var(--xs-shadow);
}

body.landing-page .btn-outline-primary,
body.landing-page .btn-in-outline {
  --_bg: transparent; --_fg: var(--xs-brand); --_bd: var(--xs-brand-line);
}
body.landing-page .btn-outline-primary:hover,
body.landing-page .btn-in-outline:hover {
  --_bg: var(--xs-brand-soft); --_fg: var(--xs-brand-ink); --_bd: var(--xs-brand);
}

body.landing-page .btn-light   { --_bg: var(--xs-surface); --_fg: var(--xs-text); --_bd: var(--xs-border); box-shadow: var(--xs-shadow-xs); }
body.landing-page .btn-light:hover { --_bg: var(--xs-surface-2); --_bd: var(--xs-border-str); }
body.landing-page .btn-outline-secondary { --_bg: transparent; --_fg: var(--xs-text-mute); --_bd: var(--xs-border-str); }
body.landing-page .btn-outline-secondary:hover { --_bg: var(--xs-surface-2); --_fg: var(--xs-text); }
body.landing-page .btn-outline-light { --_bd: rgb(255 255 255 / .45); --_fg: #fff; }
body.landing-page .btn-outline-light:hover { --_bg: rgb(255 255 255 / .14); --_bd: #fff; --_fg: #fff; }

/* ---------- 6. Cards & surfaces ------------------------------------------ */

body.landing-page .card {
  background: var(--xs-surface);
  border: 1px solid var(--xs-border);
  border-radius: var(--xs-r-lg);
  box-shadow: var(--xs-shadow-xs);
  transition: box-shadow var(--xs-mid) var(--xs-ease),
              border-color var(--xs-mid) var(--xs-ease),
              translate var(--xs-mid) var(--xs-ease-out);
  overflow: clip;
}
body.landing-page .card-body { padding: var(--xs-5); }
body.landing-page .card-header,
body.landing-page .card-footer { background: transparent; border-color: var(--xs-border); }

/* Only cards that are actually a link target get the lift. */
body.landing-page a.card:hover,
body.landing-page .card:has(> a:hover),
body.landing-page .in-card-hover:hover {
  translate: 0 -3px;
  box-shadow: var(--xs-shadow-md);
  border-color: var(--xs-brand-line);
}

body.landing-page .card img.card-img-top { transition: scale var(--xs-slow) var(--xs-ease-out); }
body.landing-page a.card:hover img.card-img-top,
body.landing-page .card:has(> a:hover) img.card-img-top { scale: 1.04; }

body.landing-page .shadow-sm { box-shadow: var(--xs-shadow-sm) !important; }
body.landing-page .shadow    { box-shadow: var(--xs-shadow) !important; }
body.landing-page .shadow-lg { box-shadow: var(--xs-shadow-lg) !important; }
body.landing-page .rounded   { border-radius: var(--xs-r) !important; }
body.landing-page .rounded-3, body.landing-page .rounded-4 { border-radius: var(--xs-r-lg) !important; }

/* ---------- 7. Forms ----------------------------------------------------- */

body.landing-page .form-control,
body.landing-page .form-select {
  background: var(--xs-surface);
  border: 1px solid var(--xs-border-str);
  border-radius: var(--xs-r-sm);
  color: var(--xs-text);
  padding: .625rem .875rem;
  font-size: var(--xs-text-base);
  transition: border-color var(--xs-fast) var(--xs-ease), box-shadow var(--xs-fast) var(--xs-ease);
}
body.landing-page .form-control::placeholder { color: var(--xs-n-400); }
body.landing-page .form-control:focus,
body.landing-page .form-select:focus {
  border-color: var(--xs-brand);
  box-shadow: var(--xs-ring);
  outline: none;
}
body.landing-page .form-control-lg { padding: .8rem 1rem; font-size: var(--xs-text-lg); border-radius: var(--xs-r); }
body.landing-page .form-label { font-weight: 600; color: var(--xs-text); margin-block-end: .4rem; }
body.landing-page .form-text  { color: var(--xs-text-mute); font-size: var(--xs-text-sm); }
body.landing-page .form-check-input:checked { background-color: var(--xs-brand); border-color: var(--xs-brand); }
body.landing-page .form-check-input:focus  { box-shadow: var(--xs-ring); border-color: var(--xs-brand); }
body.landing-page .input-group-text { background: var(--xs-surface-2); border-color: var(--xs-border-str); color: var(--xs-text-mute); }

body.landing-page .form-control[aria-invalid="true"],
body.landing-page .form-control.is-invalid { border-color: var(--xs-danger); }
body.landing-page .invalid-feedback { color: var(--xs-danger); font-size: var(--xs-text-sm); }

/* ---------- 8. Navigation ------------------------------------------------ */

body.landing-page .in-navbar {
  background: var(--theme-nav-bg, color-mix(in oklab, var(--xs-surface) 82%, transparent));
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-block-end: 1px solid transparent;
  padding-block: .6rem;
  transition: background var(--xs-mid) var(--xs-ease),
              border-color var(--xs-mid) var(--xs-ease),
              box-shadow var(--xs-mid) var(--xs-ease),
              padding var(--xs-mid) var(--xs-ease);
}
/* `.is-stuck` is toggled by app.js once the page scrolls. */
body.landing-page .in-navbar.is-stuck,
body.landing-page .in-navbar.scrolled {
  background: color-mix(in oklab, var(--xs-surface) 94%, transparent);
  border-block-end-color: var(--xs-border);
  box-shadow: var(--xs-shadow-sm);
  padding-block: .35rem;
}
body.landing-page .in-navbar .navbar-brand img.in-logo {
  max-height: 40px; width: auto;
  transition: max-height var(--xs-mid) var(--xs-ease);
}
body.landing-page .in-navbar.is-stuck .navbar-brand img.in-logo { max-height: 34px; }

body.landing-page .in-navbar .nav-link {
  color: var(--theme-nav-text, var(--xs-text));
  font-weight: 500;
  font-size: var(--xs-text-sm);
  padding-inline: .8rem;
  border-radius: var(--xs-r-sm);
  position: relative;
  transition: color var(--xs-fast) var(--xs-ease), background var(--xs-fast) var(--xs-ease);
}
body.landing-page .in-navbar .nav-link:hover { color: var(--xs-brand); background: var(--xs-brand-soft); }
body.landing-page .in-navbar .nav-link.active { color: var(--xs-brand); font-weight: 600; }
body.landing-page .in-navbar .nav-link.active::after {
  content: ''; position: absolute; inset-inline: .8rem; inset-block-end: -.15rem;
  block-size: 2px; border-radius: 2px; background: var(--xs-brand);
}
body.landing-page .in-navbar .dropdown-menu {
  border: 1px solid var(--xs-border);
  border-radius: var(--xs-r);
  box-shadow: var(--xs-shadow-lg);
  padding: var(--xs-2);
  background: var(--xs-surface);
}
body.landing-page .in-navbar .dropdown-item {
  border-radius: var(--xs-r-sm); padding: .5rem .75rem;
  font-size: var(--xs-text-sm); color: var(--xs-text);
}
body.landing-page .in-navbar .dropdown-item:hover { background: var(--xs-brand-soft); color: var(--xs-brand-ink); }

body.landing-page .navbar-toggler { border: 1px solid var(--xs-border); border-radius: var(--xs-r-sm); padding: .4rem .55rem; }
body.landing-page .navbar-toggler:focus-visible { box-shadow: var(--xs-ring); }

@media (max-width: 991.98px) {
  body.landing-page .in-navbar .navbar-collapse {
    background: var(--xs-surface);
    border: 1px solid var(--xs-border);
    border-radius: var(--xs-r-lg);
    box-shadow: var(--xs-shadow-lg);
    margin-block-start: var(--xs-3);
    padding: var(--xs-3);
  }
  body.landing-page .in-navbar .nav-link { padding-block: .6rem; }
  body.landing-page .in-nav-actions { margin-block-start: var(--xs-2); }
}

/* ---------- 9. Hero & sections ------------------------------------------- */

body.landing-page .in-hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  background:
    radial-gradient(90ch 60ch at 12% -10%, color-mix(in oklab, var(--xs-brand) 55%, transparent), transparent 62%),
    radial-gradient(70ch 50ch at 92% 8%,  color-mix(in oklab, var(--xs-accent) 42%, transparent), transparent 60%),
    linear-gradient(150deg, var(--theme-hero-start, var(--xs-brand)) 0%, var(--theme-hero-end, var(--xs-brand-ink)) 100%);
  overflow: clip;
}
/* Subtle grain keeps a large flat gradient from banding on wide screens. */
body.landing-page .in-hero::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .16;
  background-image: radial-gradient(rgb(255 255 255 / .5) .5px, transparent .5px);
  background-size: 3px 3px;
}
body.landing-page .in-hero h1,
body.landing-page .in-hero h2 { color: #fff; }
body.landing-page .in-hero p,
body.landing-page .in-hero .lead { color: rgb(255 255 255 / .84); }
/* When a hero carries a photo, keep text legible over it. */
body.landing-page .in-hero[style*="background-image"]::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(8 11 18 / .68) 0%, rgb(8 11 18 / .42) 55%, rgb(8 11 18 / .72) 100%);
}

body.landing-page .section-title,
body.landing-page .in-section-head { margin-block-end: var(--xs-6); }
body.landing-page .section-eyebrow {
  display: inline-block;
  font-size: var(--xs-text-xs);
  font-weight: 700;
  letter-spacing: var(--xs-tracking-wide);
  text-transform: uppercase;
  color: var(--xs-brand);
  margin-block-end: var(--xs-2);
}

/* ---------- 10. Footer, badges, tables, utilities ------------------------ */

body.landing-page footer,
body.landing-page .in-footer {
  background: linear-gradient(160deg, var(--theme-footer-start, var(--xs-n-900)), var(--theme-footer-end, #000));
  color: rgb(255 255 255 / .74);
}
body.landing-page .in-footer a { color: rgb(255 255 255 / .74); text-decoration: none; }
body.landing-page .in-footer a:hover { color: #fff; text-decoration: underline; }
body.landing-page .in-footer h5,
body.landing-page .in-footer h6 { color: #fff; }

body.landing-page .badge {
  font-weight: 600; font-size: var(--xs-text-xs);
  padding: .32em .68em; border-radius: var(--xs-r-pill);
  letter-spacing: .01em;
}
body.landing-page .badge.bg-success   { background: color-mix(in oklab, var(--xs-success) 16%, var(--xs-surface)) !important; color: var(--xs-success) !important; }
body.landing-page .badge.bg-warning   { background: color-mix(in oklab, var(--xs-warning) 18%, var(--xs-surface)) !important; color: var(--xs-warning) !important; }
body.landing-page .badge.bg-danger    { background: color-mix(in oklab, var(--xs-danger) 14%, var(--xs-surface)) !important; color: var(--xs-danger) !important; }
body.landing-page .badge.bg-info      { background: color-mix(in oklab, var(--xs-info) 14%, var(--xs-surface)) !important; color: var(--xs-info) !important; }
body.landing-page .badge.bg-primary   { background: var(--xs-brand-soft) !important; color: var(--xs-brand-ink) !important; }
body.landing-page .badge.bg-secondary { background: var(--xs-surface-2) !important; color: var(--xs-text-mute) !important; }

body.landing-page .alert { border: 1px solid var(--xs-border); border-radius: var(--xs-r); padding: var(--xs-4) var(--xs-5); }
body.landing-page .alert-success { background: color-mix(in oklab, var(--xs-success) 9%, var(--xs-surface)); border-color: color-mix(in oklab, var(--xs-success) 26%, var(--xs-surface)); color: var(--xs-success); }
body.landing-page .alert-danger  { background: color-mix(in oklab, var(--xs-danger) 8%, var(--xs-surface));  border-color: color-mix(in oklab, var(--xs-danger) 24%, var(--xs-surface));  color: var(--xs-danger); }
body.landing-page .alert-warning { background: color-mix(in oklab, var(--xs-warning) 10%, var(--xs-surface)); border-color: color-mix(in oklab, var(--xs-warning) 26%, var(--xs-surface)); color: var(--xs-warning); }
body.landing-page .alert-info    { background: color-mix(in oklab, var(--xs-info) 8%, var(--xs-surface));    border-color: color-mix(in oklab, var(--xs-info) 24%, var(--xs-surface));    color: var(--xs-info); }

/* Wide tables must scroll inside their own box, never the page. */
body.landing-page .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.landing-page .table { color: var(--xs-text); border-color: var(--xs-border); }
body.landing-page .table > thead th {
  font-size: var(--xs-text-xs); text-transform: uppercase;
  letter-spacing: var(--xs-tracking-wide); color: var(--xs-text-mute);
  font-weight: 600; border-block-end: 1px solid var(--xs-border-str);
}
body.landing-page .table > tbody td { border-block-end: 1px solid var(--xs-border); padding-block: .8rem; }

body.landing-page .accordion-item   { background: var(--xs-surface); border: 1px solid var(--xs-border); border-radius: var(--xs-r) !important; margin-block-end: var(--xs-2); overflow: clip; }
body.landing-page .accordion-button { background: var(--xs-surface); color: var(--xs-heading); font-weight: 600; box-shadow: none; }
body.landing-page .accordion-button:not(.collapsed) { background: var(--xs-brand-soft); color: var(--xs-brand-ink); }
body.landing-page .accordion-button:focus-visible   { box-shadow: var(--xs-ring); }

/* Images that are still loading should reserve space, not jump the layout. */
body.landing-page img[loading="lazy"] { background: var(--xs-surface-2); }

/* Honour the platform's own container width but tighten the reading measure. */
body.landing-page .container { padding-inline: max(var(--xs-4), env(safe-area-inset-left)); }

@media print {
  body.landing-page .in-navbar, body.landing-page .in-footer,
  body.landing-page .skip-link, body.landing-page .btn { display: none !important; }
  body.landing-page { background: #fff; color: #000; }
}

/* ===================================================================
   Cookie consent banner (includes/analytics-tags.php)
   Theme-aware, keyboard reachable, never taller than the viewport.
   =================================================================== */
.xs-consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 2000;
  padding: 0 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.xs-consent[hidden] { display: none !important; }

.xs-consent__body {
  pointer-events: auto;
  width: min(62rem, 100%);
  max-height: 70vh;
  overflow-y: auto;
  background: var(--xs-surface, #fff);
  color: var(--xs-text, #1f2430);
  border: 1px solid var(--xs-border, rgba(0,0,0,.12));
  border-radius: var(--xs-radius, 14px);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .22);
  padding: 1.1rem 1.25rem;
  display: grid;
  gap: .85rem;
}

.xs-consent__text { margin: 0; font-size: .92rem; line-height: 1.55; }
.xs-consent__link { text-decoration: underline; color: var(--xs-primary, #5D579E); }

.xs-consent__options {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: .87rem;
}
.xs-consent__options label { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.xs-consent__options input[disabled] { cursor: not-allowed; opacity: .6; }

.xs-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
}

.xs-consent__btn {
  font: inherit;
  font-size: .87rem;
  font-weight: 600;
  padding: .5rem .95rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .08s;
}
.xs-consent__btn:active { transform: translateY(1px); }
.xs-consent__btn:focus-visible { outline: 2px solid var(--xs-primary, #5D579E); outline-offset: 2px; }

.xs-consent__btn--ghost {
  background: transparent;
  border-color: var(--xs-border, rgba(0,0,0,.18));
  color: inherit;
}
.xs-consent__btn--ghost:hover { background: rgba(0,0,0,.04); }

.xs-consent__btn--primary {
  background: var(--xs-primary, #5D579E);
  color: #fff;
}
.xs-consent__btn--primary:hover { filter: brightness(1.06); }

@media (max-width: 34rem) {
  .xs-consent__actions { justify-content: stretch; }
  .xs-consent__btn { flex: 1 1 auto; }
}

@media (prefers-color-scheme: dark) {
  .xs-consent__body {
    background: var(--xs-surface-dark, #1b2030);
    color: var(--xs-text-dark, #e8ecf6);
    border-color: rgba(255,255,255,.14);
  }
  .xs-consent__btn--ghost:hover { background: rgba(255,255,255,.07); }
}