/* Marc Friedrich webinar design system, documented in DESIGN-SYSTEM.md at the repo root.
   Lives in the `brand` cascade layer, declared before Tailwind's `utilities` layer in the page head,
   so JS-toggled utilities (hidden …) still win.

   Rules of the house:
   - Raw colour values only in the palette (section 1). Everything else uses tokens.
   - Components read the semantic theme colours (--color-text, --color-border …) from section 2, so they
     work on dark, light and yellow surfaces without per-theme overrides.
   - Class names follow BEM (block__element--modifier), states are is-*.
   - Sizes in rem. px only for hairlines up to 2px, shadows/blur and media-query breakpoints. */

@font-face{font-family:"TT Norms Pro";src:url(../fonts/tt_norms_pro_regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TT Norms Pro";src:url(../fonts/tt_norms_pro_medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"TT Norms Pro";src:url(../fonts/tt_norms_pro_demibold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"TT Norms Pro";src:url(../fonts/tt_norms_pro_bold.woff2) format("woff2");font-weight:700;font-display:swap}

@layer brand {
  /* ───────────── 1. Tokens ─────────────
     Naming follows the CSS property: --color-*, --font-*, --line-height-*, --letter-spacing-*, --space-*,
     --size-*, --radius-*, --shadow-*, --duration-*, --z-*, --icon-*. The names stay clear of Tailwind's
     theme variables in main.css. */
  :root{
    /* Colour palette: the only raw colour values in this file */
    --color-neutral-0:#FFFFFF;
    --color-neutral-50:#F4F4F1;
    --color-neutral-100:#ECECEA;
    --color-neutral-200:#D6D6D1;
    --color-neutral-300:#C4C4BF;
    --color-neutral-400:#9A9A95;
    --color-neutral-500:#8A8A8A;
    --color-neutral-600:#6B6B6B;
    --color-neutral-700:#4A4A4A;
    --color-neutral-800:#2A2A2A;
    --color-neutral-850:#1E1E1E;
    --color-neutral-900:#141414;
    --color-neutral-950:#0A0A0A;
    --color-brand-100:#FFFBD1;--color-brand-300:#FFF36A;--color-brand-500:#FDE900;
    --color-success-100:#DCF5E6;--color-success-300:#5FDC96;--color-success-500:#1FA35B;--color-success-700:#11673A;
    --color-danger-100:#FDE3E4;--color-danger-300:#FF8A8D;--color-danger-500:#E5484D;--color-danger-600:#BE1E24;--color-danger-700:#A1161B;
    --color-warning-100:#FFF0D6;--color-warning-300:#FFC266;--color-warning-500:#F5A524;--color-warning-600:#C47F00;--color-warning-700:#8A5A00;
    --color-scrim:color-mix(in srgb,var(--color-neutral-950) 75%,transparent);
    --color-glass:color-mix(in srgb,var(--color-neutral-950) 86%,transparent);

    /* Typography */
    --font-family-sans:"TT Norms Pro",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
    --font-family-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
    --font-weight-regular:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;
    /* Fixed scale, 9 steps */
    --font-size-2xs:.75rem;--font-size-xs:.8125rem;--font-size-sm:.875rem;--font-size-md:.9375rem;--font-size-base:1rem;
    --font-size-lg:1.0625rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;
    --font-size-intro:clamp(1.0625rem,1.4vw,1.1875rem);
    --font-size-lead:clamp(1.125rem,1.6vw,1.3125rem);
    --font-size-subheading:clamp(1.375rem,2.2vw,1.75rem);
    --font-size-heading:clamp(1.75rem,3vw,2.5rem);
    --font-size-title:clamp(1.875rem,3.8vw,3.25rem);
    --font-size-h2:clamp(2.125rem,5.2vw,4.5rem);
    --font-size-h1:clamp(2.5rem,6vw,5.25rem);
    --font-size-display:clamp(2.75rem,6.6vw,6.25rem);
    --line-height-display:.98;--line-height-tight:1.04;--line-height-heading:1.12;--line-height-snug:1.25;
    --line-height-normal:1.35;--line-height-body:1.55;--line-height-prose:1.7;
    --letter-spacing-tight:-.01em;--letter-spacing-tighter:-.02em;--letter-spacing-tightest:-.03em;--letter-spacing-display:-.04em;
    --letter-spacing-caps:.14em;--letter-spacing-caps-sm:.08em;

    /* Spacing: --space-N = N × .25rem */
    --space-0-5:.125rem;--space-1:.25rem;--space-1-5:.375rem;--space-2:.5rem;--space-2-5:.625rem;--space-3:.75rem;
    --space-3-5:.875rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-7:1.75rem;--space-8:2rem;--space-9:2.25rem;
    --space-10:2.5rem;--space-11:2.75rem;--space-12:3rem;--space-14:3.5rem;--space-16:4rem;--space-20:5rem;
    /* Fluid layout rhythm */
    --space-gutter:clamp(1rem,4vw,3rem);
    --space-section:clamp(4rem,6.5vw,7rem);
    --space-band:clamp(3.5rem,7vw,6.5rem);
    --space-block:clamp(3rem,5vw,5rem);
    --space-head:clamp(2.5rem,4.5vw,4rem);
    --space-grid:clamp(2.75rem,4vw,3rem);
    --space-feature:clamp(2rem,4.5vw,4rem);
    --space-panel:clamp(1.5rem,3.4vw,2.75rem);

    /* Sizes */
    --size-container:82.5rem;--size-container-narrow:47.5rem;
    --size-nav:4.75rem;--space-sticky:calc(var(--size-nav) + var(--space-6));
    /* Controls: buttons, inputs and steppers share one height. .admin-body switches to compact density. */
    --size-control:3.25rem;--size-control-sm:2.5rem;--size-control-lg:3.625rem;--size-textarea:7.5rem;
    --space-control:var(--space-5);--space-btn:var(--space-7);--space-btn-sm:var(--space-5);--space-btn-lg:var(--space-8);
    --font-size-control:var(--font-size-base);--font-size-btn-lg:var(--font-size-lg);

    /* Shape, depth, motion, stacking */
    --radius-sm:.25rem;--radius:.375rem;--radius-full:100rem;
    --shadow-sm:0 1px 3px color-mix(in srgb,var(--color-neutral-950) 25%,transparent);
    --shadow-md:0 18px 40px color-mix(in srgb,var(--color-neutral-950) 16%,transparent);
    --shadow-lg:0 18px 50px color-mix(in srgb,var(--color-neutral-950) 40%,transparent);
    --ease:cubic-bezier(.2,.7,.2,1);--duration-fast:.2s;--duration:.3s;--duration-slow:.5s;--duration-reveal:.9s;
    --z-menu:49;--z-nav:50;--z-drawer:60;--z-modal:70;--z-toast:80;

    /* Icons (SVG data URIs). Used as mask on .icon (takes currentColor) or as background image. */
    --icon-mark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 9'%3E%3Crect y='3' width='40' height='3' rx='1.5' fill='%23FDE900'/%3E%3C/svg%3E");
    --icon-waves:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='212 0 128 316'%3E%3Cg fill='%230A0A0A' fill-opacity='.12'%3E%3Cpath d='M233.6,247.6c-.8,0-1.6-.2-2.3-.6-16.9-9.2-18.2-20.7-16.2-28.7,1.3-5.1,4.3-9.5,9.4-13.6,1.3-1,2.5-1.9,3.6-2.7l.9-.6c2.1-1.5,4-2.9,5.8-4.5,2.2-2,3.5-4.2,3.6-6.6,0-2.2-1.1-4.5-3.2-6.5-1.9-1.7-4.1-3.3-6.3-4.9-1.3-.9-2.5-1.8-3.7-2.8-8.9-6.9-12.2-15.3-9.8-24.8,1.3-5,4.4-9.5,9.5-13.5,1.4-1,2.7-2,4-3,2.2-1.5,4.1-3,5.9-4.6,1.7-1.4,3.7-3.9,3.7-6.8s-2.2-5.4-3.9-6.8c-1.7-1.4-3.5-2.8-5.4-4.2-1.8-1.3-3.7-2.7-5.5-4.2-5.8-4.8-9.1-11.2-9.2-17.6s2.9-12.8,8.5-17.8c2.2-1.9,4.4-3.6,6.6-5.1,1.4-1,2.7-2,4.1-3.1,2.2-1.8,4.9-4.6,4.9-7.8s-2.6-6-4.8-7.7c-1.4-1.1-2.9-2.2-4.4-3.3-1.4-1.1-2.9-2.1-4.4-3.2-8.3-6.6-11.9-15.2-9.9-23.5,1.3-5.4,4.8-10.6,9.6-14.5,1.2-.9,2.3-1.8,3.4-2.6,2.2-1.6,5.3-1.2,6.8,1.1,1.5,2.2,1.2,5.2-1,6.8-1,.7-2.1,1.5-3.1,2.3-3.1,2.4-5.3,5.8-6.1,9-1.4,5.9,2.8,10.7,6.5,13.7,1.3,1,2.6,2,4,3,1.6,1.2,3.2,2.3,4.9,3.6,7,5.7,8.4,11.5,8.4,15.5s-1.5,9.8-8.5,15.5c-1.4,1.2-2.9,2.2-4.3,3.2-2.1,1.5-4.1,3-5.8,4.6-3.5,3.2-5.3,6.7-5.2,10.3,0,3.7,2.1,7.2,5.7,10.2,1.6,1.3,3.2,2.6,5,3.9,2,1.4,4,3,5.9,4.6,4.7,4,7.3,9.1,7.3,14.3s-2.4,10.2-7,14.3c-2.2,1.9-4.4,3.5-6.6,5.1-1.3,1-2.5,1.8-3.7,2.8-3.4,2.6-5.3,5.2-6,8.1-1.4,5.7.5,10.2,6.3,14.7,1.1.9,2.2,1.7,3.5,2.6,2.4,1.7,4.9,3.6,7.2,5.7,4.2,3.9,6.6,8.8,6.5,13.9,0,5.1-2.6,10.1-7,13.8-2.1,1.8-4.2,3.4-6.4,4.9l-.9.6c-1.1.8-2.2,1.6-3.3,2.5-3.3,2.6-5.2,5.2-5.9,8.2-.6,2.5-2.4,10.2,11.3,17.7,2.3,1.3,3.2,4.3,2,6.6-1.2,1.6-2.9,2.5-4.6,2.5h0Z'/%3E%3Cpath d='M269.7,175.2c1.8,1.5,3.7,2.9,5.5,4.2,1.9,1.4,3.7,2.8,5.4,4.1,1.8,1.5,3.9,3.9,3.9,6.8s-2,5.3-3.7,6.7c-1.8,1.6-3.8,3.1-5.9,4.6-1.4,1-2.7,1.9-4,3-5.1,4.1-8.3,8.4-9.5,13.5-2.4,9.6.9,18,9.8,24.8,1.3,1,2.5,1.9,3.7,2.8,2.2,1.6,4.4,3.2,6.3,4.9,2.2,2,3.3,4.2,3.2,6.5,0,2.3-1.3,4.6-3.6,6.6-1.8,1.5-3.7,3-5.8,4.5-1.4,1.1-3,2.2-4.5,3.4-5,4-8.1,8.5-9.4,13.6-1.9,8-.7,19.4,16.2,28.7.7.5,1.5.6,2.3.6h0c1.7,0,3.4-.9,4.3-2.6,1.3-2.4.5-5.4-2-6.6-13.8-7.5-12-15.2-11.3-17.7.7-3,2.6-5.6,5.9-8.2,1.4-1.1,2.7-2.1,4.2-3.1,2.1-1.5,4.3-3.1,6.4-4.9,4.4-3.8,6.9-8.7,7-13.8s-2.2-10.1-6.5-13.9c-2.3-2.1-4.8-4-7.2-5.7-1.3-.9-2.3-1.7-3.5-2.6-5.8-4.5-7.7-9-6.3-14.7.7-2.9,2.6-5.5,6-8.1,1.2-.9,2.4-1.8,3.7-2.8,2.2-1.6,4.5-3.2,6.6-5.1,4.6-4.1,7-9.1,7-14.3s-2.6-10.2-7.3-14.3c-1.9-1.6-4-3.1-5.8-4.6-1.8-1.4-3.3-2.4-5.1-3.6,0,0-2.5-1.6-4.2-1.4-1.8.3-3.7,1.7-4.3,4-.5,2.3,2.4,4.9,2.4,4.9h0Z'/%3E%3Cpath d='M269.3,41.4c-9-7.5-9.2-17.6-9.2-17.6,0-6.4,1.6-11.6,8.5-17.8,2.2-1.9,4.4-3.6,6.4-5,2.2-1.6,5.3-1.1,6.8,1.1,1.6,2.2,1.1,5.3-1.1,6.8-1.8,1.4-3.9,2.8-5.6,4.4-.7.7-5.4,4.8-5.2,10.3,0,0,.2,5.6,5.7,10.2,0,0,.7.6,1.5,1.3,1.7,1.3,3.1,2.3,3.5,2.6,2.2,1.5,5.8,4.3,7.2,5.7.7.7,6.6,6.2,6.5,13.9,0,7.7-6.1,13-7,13.8-1.2,1-3.6,2.8-6.4,4.9-3.3,2.5-3.4,2.4-4.2,3.2-2,1.7-5.4,4.8-6.1,9-1.1,6.8,5.4,12.8,6.5,13.6,1.7,1.3,4,3,4,3,0,0,.1.1.2.2,2.4,1.7,4.4,3.3,4.6,3.5,8.5,6.8,8.5,15.5,8.5,15.5,0,8.6-7.6,14.6-8.5,15.5-.6.4-1.8,1.4-4.3,3.2-3.7,2.9-5.6,4.3-5.8,4.6s-1,1.1-2.2,1.8c-.5.3-1.3.6-2.2.7-1.2,0-2-.3-2.3-.4-.5-.2-1.9-.9-2.5-2.5-.5-1.3-.3-2.3-.2-2.7.3-1.1.8-2.2,3.1-4.2,2.2-2.1,4.4-3.6,6.6-5.1.4-.3,1.4-1,2.8-2.1.6-.4,1.1-.9,1.2-.9.9-.7,4.8-3.9,4.9-7.8,0-3.9-3.6-6.8-4.8-7.7-.3-.2-1.9-1.5-4.1-3.2,0,0-.1-.1-.2-.2,0,0-2.4-1.7-4.4-3.2-1.2-.9-12.4-11.3-9.9-23.5,1.5-7.6,7.6-12.9,9.6-14.5,2.7-2.1,4.5-3.4,4.5-3.4,4-3,4.6-3.2,5.8-4.4,1.6-1.7,3.5-3.8,3.6-6.6,0-2.8-1.8-4.9-3.2-6.5-1.1-1.3-2.8-2.4-6.3-4.9-.6-.5-2-1.3-3.7-2.8-.3-.3-1.4-1-2.2-1.7h0Z'/%3E%3Cpath d='M323.8,247.6c-.8,0-1.6-.2-2.3-.6-16.9-9.2-18.2-20.7-16.2-28.7,1.3-5.1,4.3-9.5,9.4-13.6,1.3-1,2.5-1.9,3.6-2.7l.9-.6c2.1-1.5,4-3,5.8-4.5,2.2-2,3.5-4.2,3.6-6.6,0-2.2-1.1-4.5-3.2-6.5-1.9-1.7-4-3.3-6.3-4.9-1.3-.9-2.5-1.8-3.7-2.8-8.9-6.9-12.2-15.3-9.8-24.8,1.3-5,4.4-9.5,9.5-13.5,1.4-1,2.7-2,4-3,2.2-1.5,4.1-3,5.9-4.6,1.7-1.4,3.7-3.9,3.7-6.8s-2.2-5.4-3.9-6.8-3.5-2.8-5.4-4.2c-1.8-1.3-3.7-2.7-5.5-4.2-5.8-4.8-9.1-11.2-9.2-17.6,0-6.5,2.9-12.8,8.5-17.8,2.2-1.9,4.4-3.6,6.6-5.1,1.4-1,2.7-2,4-3.1,2.2-1.8,4.9-4.6,4.9-7.8s-2.6-6-4.8-7.7c-1.4-1.1-2.9-2.2-4.4-3.3-1.4-1.1-2.9-2.1-4.4-3.2-8.3-6.6-11.9-15.2-9.9-23.5,1.3-5.4,4.8-10.6,9.6-14.5,1.2-.9,2.3-1.8,3.4-2.6,2.2-1.6,5.3-1.2,6.8,1.1,1.5,2.2,1.2,5.2-1,6.8-1,.7-2.1,1.5-3.1,2.3-3.1,2.4-5.4,5.8-6.1,9-1.4,5.9,2.7,10.7,6.5,13.7,1.3,1,2.6,2,4,3,1.6,1.2,3.2,2.3,4.9,3.6,7,5.7,8.5,11.5,8.5,15.5s-1.5,9.8-8.5,15.5c-1.4,1.2-2.9,2.2-4.3,3.2-2.1,1.5-4,3-5.8,4.6-3.5,3.2-5.3,6.7-5.2,10.3s2.1,7.2,5.7,10.2c1.6,1.3,3.2,2.6,5,3.9,2,1.4,4,3,5.9,4.6,4.7,4,7.3,9.1,7.3,14.3s-2.4,10.2-7,14.3c-2.2,1.9-4.4,3.5-6.6,5.1-1.3,1-2.5,1.8-3.7,2.8-3.4,2.6-5.3,5.2-6,8.1-1.4,5.7.5,10.2,6.3,14.7,1.1.9,2.2,1.7,3.5,2.6,2.4,1.7,4.9,3.6,7.2,5.7,4.2,3.9,6.6,8.8,6.5,13.9,0,5.1-2.6,10.1-7,13.8-2.1,1.8-4.2,3.4-6.4,4.9l-.9.6c-1.1.8-2.2,1.6-3.3,2.5-3.3,2.6-5.2,5.2-5.9,8.2-.6,2.5-2.4,10.2,11.3,17.7,2.3,1.3,3.2,4.3,2,6.6-1.3,1.6-3,2.5-4.7,2.5h0Z'/%3E%3C/g%3E%3C/svg%3E");
    --icon-chevron-light:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='1.6'/%3E%3C/svg%3E");
    --icon-chevron-dark:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230A0A0A' stroke-width='1.6'/%3E%3C/svg%3E");
    --icon-arrow-right:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
    --icon-arrow-left:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
    --icon-chevron-down:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    --icon-close:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 18 18 6M6 6l12 12'/%3E%3C/svg%3E");
    --icon-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
    --icon-menu:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M4 8h16M4 16h16'/%3E%3C/svg%3E");
    --icon-bell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 1 1 12 0c0 5 2 6 2 6H4s2-1 2-6Z'/%3E%3Cpath d='M10 19a2 2 0 0 0 4 0'/%3E%3C/svg%3E");
    --icon-calendar:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 10h18'/%3E%3C/svg%3E");
    --icon-user:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E");
    --icon-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8h.01M11 12h1v4h1'/%3E%3C/svg%3E");
    --icon-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16h.01'/%3E%3C/svg%3E");
    --icon-trash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M19 7l-.87 12.14A2 2 0 0 1 16.14 21H7.86a2 2 0 0 1-2-1.86L5 7m5 4v6m4-6v6m1-10V4a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v3M4 7h16'/%3E%3C/svg%3E");
    --icon-mail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3E%3C/svg%3E");
    --icon-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E");
  }

  /* ───────────── 2. Themes ─────────────
     Dark is the default. A theme class sets the semantic colour tokens and every component inside
     picks them up, so no component needs per-theme overrides. The nearest theme wins. */
  :root,.theme-dark,.panel,.countdown__unit,
  .admin__sidebar,.admin__mobilebar,.admin-login,.stat--dark{
    --color-text:var(--color-neutral-0);
    --color-text-secondary:color-mix(in srgb,var(--color-neutral-0) 78%,transparent);
    --color-text-muted:var(--color-neutral-500);
    --color-text-faint:color-mix(in srgb,var(--color-neutral-0) 45%,transparent);
    --color-surface:var(--color-neutral-900);
    --color-surface-sunken:var(--color-neutral-850);
    --color-border-subtle:color-mix(in srgb,var(--color-neutral-0) 7%,transparent);
    --color-border:color-mix(in srgb,var(--color-neutral-0) 12%,transparent);
    --color-border-strong:color-mix(in srgb,var(--color-neutral-0) 28%,transparent);
    --color-field:color-mix(in srgb,var(--color-neutral-0) 5%,transparent);
    --color-fill:color-mix(in srgb,var(--color-neutral-0) 8%,transparent);
    --color-focus:var(--color-brand-500);
    --color-ring:color-mix(in srgb,var(--color-brand-500) 18%,transparent);
    --color-link:var(--color-brand-500);
    --color-accent:var(--color-brand-500);--color-on-accent:var(--color-neutral-950);
    --color-accent-soft:color-mix(in srgb,var(--color-brand-500) 10%,transparent);
    --color-success:var(--color-success-300);--color-success-bg:color-mix(in srgb,var(--color-success-500) 15%,transparent);
    --color-danger:var(--color-danger-300);--color-danger-bg:color-mix(in srgb,var(--color-danger-500) 15%,transparent);
    --color-warning:var(--color-warning-300);--color-warning-bg:color-mix(in srgb,var(--color-warning-500) 15%,transparent);
    --icon-chevron:var(--icon-chevron-light);
  }
  .theme-light,.section--light,.section--off,body.site dialog,.admin-body{
    --color-text:var(--color-neutral-950);
    --color-text-secondary:var(--color-neutral-700);
    --color-text-muted:var(--color-neutral-600);
    --color-text-faint:var(--color-neutral-400);
    --color-surface:var(--color-neutral-0);
    --color-surface-sunken:var(--color-neutral-50);
    --color-border-subtle:color-mix(in srgb,var(--color-neutral-950) 7%,transparent);
    --color-border:color-mix(in srgb,var(--color-neutral-950) 12%,transparent);
    --color-border-strong:color-mix(in srgb,var(--color-neutral-950) 22%,transparent);
    --color-field:var(--color-neutral-0);
    --color-fill:var(--color-neutral-100);
    --color-focus:var(--color-neutral-950);
    --color-ring:color-mix(in srgb,var(--color-neutral-950) 10%,transparent);
    --color-link:var(--color-neutral-950);
    --color-accent:var(--color-neutral-950);--color-on-accent:var(--color-brand-500);
    --color-accent-soft:var(--color-brand-100);
    --color-success:var(--color-success-700);--color-success-bg:var(--color-success-100);
    --color-danger:var(--color-danger-700);--color-danger-bg:var(--color-danger-100);
    --color-warning:var(--color-warning-700);--color-warning-bg:var(--color-warning-100);
    --icon-chevron:var(--icon-chevron-dark);
  }
  .theme-brand,.band,.signup{
    --color-text:var(--color-neutral-950);
    --color-text-secondary:color-mix(in srgb,var(--color-neutral-950) 75%,transparent);
    --color-text-muted:color-mix(in srgb,var(--color-neutral-950) 55%,transparent);
    --color-text-faint:var(--color-neutral-400);
    --color-surface:var(--color-neutral-0);
    --color-surface-sunken:var(--color-neutral-0);
    --color-border-subtle:color-mix(in srgb,var(--color-neutral-950) 7%,transparent);
    --color-border:color-mix(in srgb,var(--color-neutral-950) 18%,transparent);
    --color-border-strong:color-mix(in srgb,var(--color-neutral-950) 22%,transparent);
    --color-field:var(--color-neutral-0);
    --color-fill:color-mix(in srgb,var(--color-neutral-950) 8%,transparent);
    --color-focus:var(--color-neutral-950);
    --color-ring:color-mix(in srgb,var(--color-neutral-950) 14%,transparent);
    --color-link:var(--color-neutral-950);
    --color-accent:var(--color-neutral-950);--color-on-accent:var(--color-brand-500);
    --color-accent-soft:color-mix(in srgb,var(--color-neutral-950) 6%,transparent);
    --color-success:var(--color-success-700);--color-success-bg:var(--color-success-100);
    --color-danger:var(--color-danger-700);--color-danger-bg:var(--color-danger-100);
    --color-warning:var(--color-warning-700);--color-warning-bg:var(--color-warning-100);
    --icon-chevron:var(--icon-chevron-dark);
  }
  /* Status borders are the base colour at 45 % in every theme */
  :root{
    --color-success-border:color-mix(in srgb,var(--color-success-500) 45%,transparent);
    --color-danger-border:color-mix(in srgb,var(--color-danger-500) 45%,transparent);
    --color-warning-border:color-mix(in srgb,var(--color-warning-500) 45%,transparent);
  }

  /* ───────────── 3. Base ───────────── */
  *,*::before,*::after{box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:var(--space-sticky);-webkit-text-size-adjust:100%}
  body.site{margin:0;background:var(--color-neutral-950);color:var(--color-neutral-0);font-family:var(--font-family-sans);font-size:var(--font-size-lg);line-height:var(--line-height-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
  body.site main{flex:1 0 auto}
  :where(body.site) img{display:block;max-width:100%}
  :where(body.site) a{color:inherit}
  :where(body.site) button{font:inherit;color:inherit;cursor:pointer}
  .wrapper{max-width:var(--size-container);margin:0 auto;padding:0 var(--space-gutter)}
  .wrapper--narrow{max-width:var(--size-container-narrow)}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

  /* ───────────── 4. Type ───────────── */
  /* Caps / overline: one treatment everywhere, the size depends on the role */
  .eyebrow,.hero__facts dt,.countdown-wrap__label,.countdown__label,.footer__grid h2,.legal__toc h2,.slot__kind,
  .admin-nav__label,.admin__eyebrow,.stat__label,.table th,.form__section,.list-card__metrics dt{text-transform:uppercase;letter-spacing:var(--letter-spacing-caps)}
  .eyebrow{font-size:var(--font-size-2xs);display:inline-flex;align-items:center;gap:var(--space-3);font-weight:var(--font-weight-medium)}
  .eyebrow::before{content:"";width:2.5rem;height:.5625rem;flex:none;background:no-repeat center/contain var(--icon-mark)}
  /* Eyebrow label → heading: one gap everywhere unless a component sets its own */
  .eyebrow + .h2{margin-top:var(--space-6)}
  :where(body.site) :is(h1,h2,h3){margin:0;font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tightest);line-height:var(--line-height-tight)}
  .h1{font-size:var(--font-size-h1)}
  .h2{font-size:var(--font-size-h2)}
  .h3{font-size:var(--font-size-subheading);letter-spacing:var(--letter-spacing-tighter);line-height:var(--line-height-snug)}
  .lead{font-size:var(--font-size-lead);line-height:var(--line-height-body)}
  mark{background:linear-gradient(transparent 58%,var(--color-brand-500) 58%);color:inherit;padding:0 .08em}

  /* ───────────── 4b. Icons ─────────────
     <span class="icon icon--name" aria-hidden="true"></span>. The SVG is a mask, so the icon takes the
     current text colour. Size it with width/height from the surrounding component. */
  .icon{display:inline-block;flex:none;width:1em;height:1em;background:currentColor;vertical-align:middle;-webkit-mask:var(--icon) no-repeat center/contain;mask:var(--icon) no-repeat center/contain}
  .icon--arrow-right{--icon:var(--icon-arrow-right)}.icon--arrow-left{--icon:var(--icon-arrow-left)}.icon--chevron-down{--icon:var(--icon-chevron-down)}.icon--close{--icon:var(--icon-close)}.icon--check{--icon:var(--icon-check)}.icon--user{--icon:var(--icon-user)}.icon--menu{--icon:var(--icon-menu)}.icon--bell{--icon:var(--icon-bell)}.icon--calendar{--icon:var(--icon-calendar)}.icon--info{--icon:var(--icon-info)}.icon--alert{--icon:var(--icon-alert)}.icon--trash{--icon:var(--icon-trash)}.icon--mail{--icon:var(--icon-mail)}

  /* ───────────── 5. Buttons ───────────── */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2-5);height:var(--size-control);padding:0 var(--space-btn);border-radius:var(--radius);font-weight:var(--font-weight-semibold);font-size:var(--font-size-control);line-height:1;text-decoration:none;border:1px solid transparent;transition:transform var(--duration-fast) var(--ease),background var(--duration-fast),color var(--duration-fast),border-color var(--duration-fast),opacity var(--duration-fast);white-space:nowrap;cursor:pointer;background:none}
  .btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;transform:none}
  .btn--primary{background:var(--color-brand-500);color:var(--color-neutral-950)}
  .btn--primary:hover{background:var(--color-brand-300)}
  .btn--outline{border-color:var(--color-border-strong);color:var(--color-text)}
  .btn--outline:hover{border-color:var(--color-text)}
  .btn--outline-brand{border-color:var(--color-brand-500);color:var(--color-brand-500)}
  .btn--outline-brand:hover{background:var(--color-brand-500);border-color:var(--color-brand-500);color:var(--color-neutral-950)}
  .btn--dark{background:var(--color-neutral-950);color:var(--color-neutral-0)}
  .btn--dark:hover{background:var(--color-neutral-850)}
  .btn--danger{background:transparent;border-color:var(--color-danger-border);color:var(--color-danger)}
  .btn--danger:hover{background:var(--color-danger-500);border-color:var(--color-danger-500);color:var(--color-neutral-0)}
  .btn--ghost{height:auto;padding:var(--space-1-5) var(--space-2);border:0;border-radius:var(--radius);background:none;color:var(--color-text-secondary);font-weight:var(--font-weight-semibold)}
  .btn--ghost:hover{transform:none;background:var(--color-fill);color:var(--color-text)}
  .btn .icon{width:1.125rem;height:1.125rem;flex:none}
  .btn--sm{height:var(--size-control-sm);padding:0 var(--space-btn-sm);font-size:var(--font-size-sm)}
  .btn--lg{height:var(--size-control-lg);padding:0 var(--space-btn-lg);font-size:var(--font-size-btn-lg)}
  .btn--block{display:flex;width:100%}

  /* ───────────── 6. Nav ───────────── */
  .nav{position:fixed;inset:0 0 auto 0;z-index:var(--z-nav);transition:background var(--duration),border-color var(--duration);border-bottom:1px solid transparent}
  .nav.is-scrolled,.nav--solid{background:var(--color-glass);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-color:var(--color-border)}
  .nav .wrapper{display:flex;align-items:center;justify-content:space-between;height:var(--size-nav);gap:var(--space-6)}
  .nav__logo img{height:2.875rem;width:auto;transition:opacity var(--duration)}
  .nav__links{display:flex;gap:var(--space-8);list-style:none;margin:0;padding:0}
  .nav__links a{text-decoration:none;font-size:var(--font-size-md);font-weight:var(--font-weight-medium);opacity:.78;transition:opacity var(--duration-fast)}
  .nav__links a{position:relative}
  .nav__links a:hover,.nav__links a.is-active{opacity:1}
  .nav__links a.is-active::after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--space-1-5) * -1);height:2px;background:var(--color-brand-500)}
  .nav__actions{display:flex;align-items:center;gap:var(--space-0-5)}
  .nav__actions .btn{margin-inline:.6875rem}
  .nav__burger{display:none}
  .nav__burger{place-items:center;width:2.75rem;height:2.75rem;padding:0;border:0;background:none;color:inherit;cursor:pointer;flex:none}
  .burger{display:flex;flex-direction:column;gap:var(--space-1-5);width:1.375rem}
  .burger span{display:block;height:2px;border-radius:2px;background:currentColor;transition:transform var(--duration) var(--ease),opacity var(--duration-fast)}
  .nav__burger[aria-expanded="true"] .burger span:nth-child(1){transform:translateY(calc(var(--space-1-5) + 2px)) rotate(45deg)}
  .nav__burger[aria-expanded="true"] .burger span:nth-child(2){opacity:0}
  .nav__burger[aria-expanded="true"] .burger span:nth-child(3){transform:translateY(calc((var(--space-1-5) + 2px) * -1)) rotate(-45deg)}
  .site-menu{position:fixed;inset:0;z-index:var(--z-menu);background:var(--color-neutral-950);padding:calc(var(--size-nav) + var(--space-6)) var(--space-gutter) var(--space-10);display:flex;flex-direction:column;gap:var(--space-1-5);opacity:0;pointer-events:none;transition:opacity var(--duration);overflow-y:auto}
  .site-menu.is-open{opacity:1;pointer-events:auto}
  .site-menu a:not(.btn){font-size:var(--font-size-2xl);font-weight:var(--font-weight-medium);letter-spacing:var(--letter-spacing-tighter);text-decoration:none;padding:var(--space-3) 0;border:0;border-bottom:1px solid var(--color-border);background:none;text-align:left;color:var(--color-neutral-0)}
  .site-menu__top{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-5)}
  .site-menu__actions{display:none}
  .site-menu form{margin:0}

  /* ───────────── 7. Page shell ───────────── */
  .page-head{margin-bottom:var(--space-head)}
  .page-head .h1,.page-head .h2{margin-top:var(--space-5)}
  .page-head p{margin:var(--space-5) 0 0;max-width:60ch}
  :where(body.site) section{position:relative}
  .section{padding:var(--space-section) 0}
  .section--page{padding-top:calc(var(--size-nav) + var(--space-section))}
  .section--light{background:var(--color-neutral-0);color:var(--color-neutral-950)}
  .section--off{background:var(--color-neutral-50);color:var(--color-neutral-950)}
  .section__head{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-10);align-items:end;margin-bottom:var(--space-head)}
  .section__head .h2{margin-top:var(--space-6)}
  .section__head p{margin:0;max-width:46ch;justify-self:end;font-size:var(--font-size-base)}

  /* ───────────── 8. Hero ───────────── */
  .hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
  .hero__media{position:absolute;inset:0;z-index:-1}
  .hero__media img{width:100%;height:100%;object-fit:cover;object-position:28% 30%;transform:scale(1.04);animation:heroZoom 14s var(--ease) forwards}
  .hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--color-neutral-950) 0%,color-mix(in srgb,var(--color-neutral-950) 88%,transparent) 30%,color-mix(in srgb,var(--color-neutral-950) 30%,transparent) 58%,transparent 76%),linear-gradient(90deg,color-mix(in srgb,var(--color-neutral-950) 45%,transparent) 0%,transparent 22%,transparent 55%,color-mix(in srgb,var(--color-neutral-950) 60%,transparent) 100%)}
  @keyframes heroZoom{to{transform:scale(1)}}
  .hero__inner{width:100%;padding-top:calc(var(--size-nav) + var(--space-11));padding-bottom:var(--space-11)}
  .hero .lead{max-width:40ch;color:var(--color-text-secondary);margin:0 0 var(--space-8)}
  .hero__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}
  .hero__facts{margin:var(--space-12) 0 0;border-top:1px solid var(--color-border);display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 clamp(2.5rem,6vw,6rem)}
  .hero__facts div{padding:var(--space-6) 0 0}
  .hero__facts dt{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-bottom:var(--space-1-5)}
  .hero__facts dd{margin:0;font-size:clamp(1.375rem,2.4vw,2.25rem);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tighter);line-height:var(--line-height-snug)}

  /* ───────────── 9. Countdown ───────────── */
  .countdown-wrap{position:relative;z-index:1}
  .countdown-wrap__label{margin:0 0 var(--space-3-5);font-size:var(--font-size-2xs);font-weight:var(--font-weight-medium)}
  .countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2-5);position:relative;z-index:1}
  .countdown__unit{background:var(--color-neutral-950);color:var(--color-text);border-radius:var(--radius);padding:clamp(1rem,2vw,1.5rem) var(--space-1-5) clamp(.875rem,1.6vw,1.25rem);text-align:center}
  .countdown__value{display:block;font-size:var(--font-size-title);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tighter);line-height:1;font-variant-numeric:tabular-nums}
  .countdown__label{display:block;font-size:var(--font-size-2xs);color:var(--color-text-muted);margin-top:var(--space-2)}
  .countdown--live{display:block;background:var(--color-neutral-950);color:var(--color-brand-500);border-radius:var(--radius);padding:var(--space-5);font-weight:var(--font-weight-semibold);text-align:center}

  /* ───────────── 10. Webinar hero & sign-up card ───────────── */
  /* Portrait tablets: no empty band above the content */
  .hero--webinar{justify-content:flex-end;min-height:min(100svh,75vw)}
  .hero__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,27.5rem);gap:clamp(2rem,5vw,5rem);align-items:end}
  .hero__headline{font-size:var(--font-size-h1);letter-spacing:var(--letter-spacing-display);line-height:var(--line-height-display);margin:var(--space-6) 0 0;max-width:13ch;text-wrap:balance}
  .hero__subtitle{margin:var(--space-5) 0 0;max-width:22ch;text-wrap:balance;font-size:clamp(1.75rem,3.4vw,3rem);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tighter);line-height:var(--line-height-snug);color:var(--color-brand-500)}
  .hero--webinar .hero__copy{container-type:inline-size}
  /* Desktop: photo slightly enlarged and shifted so Marc sits top left, beside the headline */
  @media (min-width:861px){
    .hero--webinar .hero__media{overflow:hidden}
    .hero--webinar .hero__media img{position:absolute;left:0;top:-13%;height:113%;object-position:72% 0}
  }
  /* Portrait windows crop more sideways: shift less so his face stays clear of the left edge */
  @media (min-width:861px) and (max-aspect-ratio:1/1){
    .hero--webinar .hero__media img{object-position:56% 0}
  }
  /* Narrow column: facts wrap from the left instead of spreading */
  @container (max-width:34rem){
    .hero--webinar .hero__facts{justify-content:flex-start;column-gap:var(--space-8)}
  }
  /* Headline as large as the column allows; 'Auswandern,' is the longest line at ~5.5em */
  .hero--webinar .hero__headline{font-size:clamp(3rem,17cqi,7rem);max-width:none}
  .hero--webinar .hero__facts{margin-top:var(--space-10);justify-content:space-between;column-gap:var(--space-6)}
  /* Scales with the column so date, time and format fill one row */
  .hero--webinar .hero__facts dd{white-space:nowrap;font-size:clamp(1.375rem,5cqi,2.25rem)}
  .signup{position:relative;overflow:hidden;display:grid;gap:var(--space-6);padding:var(--space-panel);border-radius:var(--radius);background:var(--color-brand-500);color:var(--color-neutral-950);scroll-margin-top:var(--space-sticky)}

  .signup .eyebrow::before{display:none}
  .signup .eyebrow{gap:.4em;align-items:baseline}
  .signup .eyebrow strong{font-size:var(--font-size-base);font-weight:var(--font-weight-bold)}
  .signup > *{position:relative;z-index:1}
  .signup__title{font-size:var(--font-size-heading);letter-spacing:var(--letter-spacing-tightest);line-height:var(--line-height-tight)}
  .signup .eyebrow + .signup__title{margin-top:calc(var(--space-3) * -1)}
  .countdown-band{background:var(--color-neutral-950);padding:clamp(3rem,6vw,4.5rem) 0;text-align:center}
  .countdown-band .wrapper{display:flex;flex-direction:column;align-items:center;gap:clamp(1.75rem,3vw,2.5rem)}
  .countdown-band .countdown-wrap{width:100%;max-width:32rem}
  .countdown-band .countdown-wrap__label{margin-bottom:var(--space-5)}
  .countdown-band .countdown__unit{background:var(--color-neutral-900,#141414);border:1px solid var(--color-border);padding:clamp(1rem,2.2vw,1.5rem) var(--space-1) clamp(.875rem,1.8vw,1.25rem)}
  .countdown-band .countdown__value{font-size:clamp(1.875rem,4vw,2.75rem)}
  .signup .countdown__unit{padding:var(--space-3) var(--space-1) var(--space-2-5)}
  .signup .countdown__value{font-size:clamp(1.5rem,2.6vw,2.125rem)}
  .signup__form{display:grid;gap:var(--space-4)}
  /* Rhythm: fields 16, then a larger break to the consents (24), consents tight (12), larger break to the button (24) */
  .signup__form .field + .signup__hp + .check{margin-top:var(--space-2)}
  .signup__form .check + .check{margin-top:calc(var(--space-1) * -1)}
  .signup__form .check{line-height:var(--line-height-normal)}
  .signup__form > .btn{margin-top:var(--space-2)}
  .signup__form .signup__notice{margin-top:calc(var(--space-1) * -1)}
  .signup__form[hidden],.signup-success[hidden],.signup__error[hidden]{display:none}
  .signup__hp{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);opacity:0}
  .signup__error{margin:0;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);color:var(--color-danger)}
  .signup__steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2);font-size:var(--font-size-sm);line-height:var(--line-height-normal)}
  .signup__steps li{display:flex;gap:var(--space-2-5,.625rem);align-items:flex-start}
  .signup__steps .icon{width:1.125rem;height:1.125rem;margin-top:.1em}
  .signup__notice{margin:0;font-size:var(--font-size-2xs);line-height:var(--line-height-body);color:var(--color-text-muted)}
  .signup__notice a{color:var(--color-text);text-decoration-thickness:.06em;text-underline-offset:.2em}
  .signup-success{display:flex;gap:var(--space-4);align-items:flex-start;animation:okIn var(--duration-slow) var(--ease)}
  .signup-success:focus{outline:none}
  .signup-success__icon{flex:none;width:2.75rem;height:2.75rem;border-radius:var(--radius-full);background:var(--color-accent);color:var(--color-on-accent);display:grid;place-items:center}
  .signup-success__icon .icon{width:1.375rem;height:1.375rem}
  .signup-success strong{display:block;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tight)}
  .signup-success p{margin:var(--space-1-5) 0 var(--space-3);color:var(--color-text-secondary)}
  .signup-success a{color:var(--color-link);font-weight:var(--font-weight-semibold);text-underline-offset:.1875rem}
  @keyframes okIn{from{opacity:0;transform:translateY(.625rem)}}
  @keyframes okIn{from{opacity:0;transform:translateY(.625rem)}}

  /* ───────────── 11. Intro ───────────── */
  .intro{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2.5rem,5vw,4rem) clamp(2.5rem,7vw,6.875rem);align-items:start}
  .intro__head{grid-column:1/-1}
  .intro__text{margin:0 0 var(--space-11);max-width:54ch;font-size:var(--font-size-intro);color:var(--color-text-secondary)}
  .intro__text p{margin:0 0 var(--space-4)}
  .intro__text p:last-child{margin:0}
  .intro__text strong{color:var(--color-text);font-weight:var(--font-weight-semibold)}
  .expect{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-8) clamp(1.5rem,3vw,3rem);margin:0 0 var(--space-11)}
  .expect li{display:grid;grid-template-columns:1fr;gap:var(--space-3);align-content:start;padding:0;font-size:var(--font-size-lg);line-height:var(--line-height-normal)}
  .expect li::before{content:"";width:3.75rem;height:.85rem;background:no-repeat left center/contain var(--icon-mark);margin:var(--space-1) 0 0}
  .expect strong{font-weight:var(--font-weight-semibold)}
  .signoff{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2)}
  .signoff p{margin:0;font-size:var(--font-size-intro);line-height:var(--line-height-body);color:var(--color-text-secondary)}
  .signoff img{width:clamp(9.5rem,14vw,12.5rem);height:auto;margin-left:-.25rem}

  /* ───────────── 13. Speakers & dialog ───────────── */
  .speakers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.75rem,1.6vw,1.375rem)}
  .speaker{background:none;border:0;padding:0;text-align:left;display:flex;flex-direction:column;gap:var(--space-3-5);color:inherit;min-width:0;overflow-wrap:break-word;hyphens:auto}
  .speaker__image{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--color-neutral-850)}
  .speaker__image img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transition:filter var(--duration-slow) var(--ease),transform var(--duration-slow) var(--ease)}
  .speaker__image::after{content:"+";position:absolute;right:var(--space-3);bottom:var(--space-3);width:2.25rem;height:2.25rem;border-radius:var(--radius);background:var(--color-brand-500);color:var(--color-neutral-950);display:grid;place-items:center;font-size:var(--font-size-2xl);font-weight:var(--font-weight-medium);line-height:1;transform:scale(.6);opacity:0;transition:all var(--duration) var(--ease)}
  .speakers > .speaker:nth-child(4n+2){transition-delay:60ms}.speakers > .speaker:nth-child(4n+3){transition-delay:120ms}.speakers > .speaker:nth-child(4n+4){transition-delay:180ms}
  .speaker:hover .speaker__image img,.speaker:focus-visible .speaker__image img{filter:grayscale(0);transform:scale(1.03)}
  .speaker:hover .speaker__image::after,.speaker:focus-visible .speaker__image::after{transform:scale(1);opacity:1}
  .speaker__name{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tight);line-height:var(--line-height-snug)}
  .speaker__role{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-top:var(--space-1);line-height:var(--line-height-normal)}
  .speaker--host .speaker__image{outline:2px solid var(--color-brand-500);outline-offset:-2px}
  .badge{position:absolute;left:var(--space-3);top:var(--space-3);background:var(--color-brand-500);color:var(--color-neutral-950);font-size:var(--font-size-2xs);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-caps-sm);text-transform:uppercase;padding:var(--space-1-5) var(--space-2-5);border-radius:var(--radius-full);z-index:1}

  body.site dialog{position:fixed;inset:0;margin:auto;height:fit-content;max-height:calc(100svh - 2rem);border:0;padding:0;max-width:min(60rem,calc(100vw - 2rem));width:100%;border-radius:var(--radius);background:var(--color-neutral-0);color:var(--color-neutral-950);overscroll-behavior:contain}
  html.scroll-locked,html:has(body.site dialog[open]){overflow:hidden;scrollbar-gutter:stable}
  body.site dialog::backdrop,.admin__scrim{background:var(--color-scrim);backdrop-filter:blur(6px)}
  body.site dialog[open]{animation:dlg var(--duration) var(--ease)}
  @keyframes dlg{from{opacity:0;transform:translateY(1rem)}}
  body.site dialog:has(.dialog__grid){overflow:hidden}
  .dialog__grid{display:grid;grid-template-columns:.85fr 1.15fr;max-height:calc(100svh - 2rem)}
  /* height:0 keeps the photo from sizing the row, so the text column alone sets the height and scrolls */
  .dialog__grid img{width:100%;height:0;min-height:max(100%,min(26.25rem,calc(100svh - 2rem)));object-fit:cover}
  .dialog__body{position:relative;padding:var(--space-panel);max-height:min(calc(100svh - 2rem),45rem);overflow:auto;overscroll-behavior:contain}
  .dialog__name{font-size:var(--font-size-heading);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tightest);line-height:var(--line-height-tight);margin:var(--space-4) 0 var(--space-1-5)}
  .dialog__body .dialog__role{color:var(--color-text-muted);margin:0 0 var(--space-6)}
  .dialog__body p{margin:0 0 var(--space-3-5)}
  .dialog__link{margin-top:var(--space-3)}
  .dialog__controls{position:absolute;right:var(--space-3-5);top:var(--space-3-5);display:flex;gap:var(--space-2);z-index:2}
  .dialog__btn{width:2.25rem;height:2.25rem;display:grid;place-items:center;border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-neutral-0);color:var(--color-text-muted);cursor:pointer;transition:border-color var(--duration-fast),color var(--duration-fast)}
  .dialog__btn:hover{border-color:var(--color-neutral-950);color:var(--color-neutral-950)}
  .dialog__btn .icon{width:1rem;height:1rem}
  body.site dialog.is-stepping{animation:none}

  /* ───────────── 13b. Webinar additions: topics, speaker placeholder, agenda, result panel ───────────── */
  .expect--stack{grid-template-columns:1fr;margin:0}
  .expect span{color:var(--color-text-secondary);font-size:var(--font-size-base);line-height:var(--line-height-body)}
  .speaker__initials{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(2.5rem,6vw,4.5rem);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tighter);color:var(--color-brand-500);background:var(--color-neutral-850)}
  .speaker__topic{margin-top:var(--space-2);font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-normal)}
  .dialog__grid--text{grid-template-columns:1fr}
  /* Agenda dialog on the watch page */
  body.site dialog.dialog--agenda{max-width:min(44rem,calc(100vw - 2rem));overflow:auto}
  .dialog--agenda .dialog__body{max-height:none;overflow:visible}
  .dialog--agenda .dialog__name{margin-bottom:var(--space-6)}
  /* Agenda without a time column: timeline on the left edge */
  .program--agenda .slot{grid-template-columns:1fr}
  .program--agenda .slot::before,.program--agenda .slot::after{left:.375rem}
  .program--agenda .slot > div{padding-left:var(--space-8)}
  .program--agenda .slot:first-child{padding-top:0}
  .program--agenda .slot:first-child::after{top:calc(var(--space-10) - var(--space-5))}
  @media (max-width:640px){ .program--agenda .slot > div{padding-left:0} }
  .program__actions{display:grid;gap:var(--space-3);margin-top:var(--space-7)}
  .band__cta{flex:none}
  .result__panel{display:grid;gap:var(--space-6);max-width:32rem;margin:0 0 var(--space-9);padding:var(--space-6) 0 0;border-top:1px solid var(--color-border)}
  .result__panel{max-width:26rem}
  .result__panel .countdown__unit{background:var(--color-neutral-900);border:1px solid var(--color-border);padding:var(--space-3) var(--space-1) var(--space-2-5)}
  .result__panel .countdown__value{font-size:clamp(1.5rem,2.6vw,2.125rem)}
  .result__fact{margin:0;color:var(--color-text-secondary)}
  .result__fact strong{display:block;margin-bottom:var(--space-1);color:var(--color-text);font-size:var(--font-size-subheading);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tighter);line-height:var(--line-height-snug)}
  .result form{display:flex;justify-content:flex-start}
  .watch__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-5);margin-bottom:var(--space-7)}
  .watch__head .h2{margin:var(--space-3) 0 0}
  .watch__player{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);background:var(--color-neutral-950);box-shadow:var(--shadow-lg)}
  .watch__player iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .watch__help{margin:var(--space-5) 0 0;font-size:var(--font-size-sm);color:var(--color-text-muted)}
  .watch__help a{color:var(--color-link);text-underline-offset:.1875rem}
  .watch__test{margin:0 0 var(--space-5);padding:var(--space-3) var(--space-4);border-radius:var(--radius);background:color-mix(in srgb,var(--color-warning-500) 14%,transparent);color:var(--color-warning-300);font-size:var(--font-size-sm)}
  .watch__stage--chat{display:grid;grid-template-columns:minmax(0,2fr) minmax(18rem,1fr);gap:var(--space-6);align-items:stretch}

  /* Live chat: the panel fills the row height set by the player column. */
  .chat{position:relative;min-height:30rem}
  .chat__panel{position:absolute;inset:0;display:flex;flex-direction:column;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);overflow:hidden}
  .chat__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border-subtle)}
  .chat__title{margin:0;font-size:var(--font-size-md);font-weight:var(--font-weight-semibold)}
  .chat__status{font-size:var(--font-size-2xs);color:var(--color-text-muted)}
  .chat__status.is-live{color:var(--color-success-300)}
  .chat__status.is-live::before{content:"";display:inline-block;width:.5rem;height:.5rem;margin-right:var(--space-1-5);border-radius:var(--radius-full);background:currentColor}
  .chat__pinned{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border-subtle);background:color-mix(in srgb,var(--color-brand-500) 10%,transparent)}
  .chat__pinned-label{font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);color:var(--color-brand-500)}
  .chat__pinned-text{margin:var(--space-1) 0 0;font-size:var(--font-size-sm);white-space:pre-line;overflow-wrap:anywhere}
  .chat__list{flex:1;min-height:0;margin:0;padding:var(--space-3) var(--space-4);list-style:none;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:var(--space-2-5)}
  .chat__empty{margin:auto;font-size:var(--font-size-sm);color:var(--color-text-muted);text-align:center}
  /* Bubbles: viewers on the left, team on the right in brand yellow. */
  .chat__msg{display:flex;flex-direction:column;align-items:flex-start;align-self:flex-start;max-width:85%;font-size:var(--font-size-sm);line-height:1.45;overflow-wrap:anywhere}
  .chat__msg--team{align-self:flex-end;align-items:flex-end}
  .chat__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1-5);margin:0 var(--space-1) var(--space-1)}
  .chat__author{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary)}
  .chat__time{font-size:var(--font-size-2xs);color:var(--color-text-faint)}
  .chat__tag{padding:0 var(--space-1-5);border-radius:var(--radius-sm);background:color-mix(in srgb,var(--color-warning-500) 18%,transparent);color:var(--color-warning-300);font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);line-height:1.5}
  .chat__bubble{margin:0;padding:var(--space-2) var(--space-3);border-radius:1rem 1rem 1rem var(--radius-sm);background:var(--color-neutral-800);color:var(--color-text);white-space:pre-line}
  .chat__msg--team .chat__bubble{border-radius:1rem 1rem var(--radius-sm) 1rem;background:var(--color-brand-500);color:var(--color-neutral-950)}
  .chat__msg--team .chat__author{color:var(--color-brand-500)}
  .chat__msg--mine .chat__bubble{background:var(--color-neutral-700)}
  .chat__msg--mine .chat__author{color:var(--color-success-300)}
  .chat__text{margin:var(--space-0-5) 0 0;color:var(--color-text-secondary);white-space:pre-line}
  .chat__notice{margin:0;padding:var(--space-3) var(--space-4);border-top:1px solid var(--color-border-subtle);font-size:var(--font-size-sm);color:var(--color-warning-300)}
  .chat__compose{display:grid;gap:var(--space-2);padding:var(--space-3) var(--space-4) 0;border-top:1px solid var(--color-border-subtle)}
  .chat__label{font-size:var(--font-size-sm);color:var(--color-text-secondary)}
  .chat__row{display:flex;gap:var(--space-2);align-items:flex-end}
  .chat__row .input{flex:1}
  .chat__compose .chat__input{flex:1;height:auto;min-height:var(--size-control-sm);max-height:7rem;padding-block:var(--space-2);font-size:var(--font-size-sm);resize:none;field-sizing:content}
  .chat__error{margin:0;font-size:var(--font-size-2xs);color:var(--color-danger-300)}
  .chat__rules{margin:0;padding:var(--space-2) var(--space-4) var(--space-3);font-size:var(--font-size-2xs);color:var(--color-text-muted)}
  .chat__rules a{color:var(--color-link)}
  @media (max-width:1080px){
    .watch__stage--chat{grid-template-columns:1fr}
    .chat{height:min(70vh,32rem)}
  }

  /* ───────────── 14. Programme ───────────── */
  .program__grid{display:grid;grid-template-columns:1.75fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
  .slot{position:relative;display:grid;grid-template-columns:4.75rem 1fr;gap:var(--space-4);padding:var(--space-5) 0;border-bottom:1px solid var(--color-border-subtle)}
  .slot time{font-size:var(--font-size-base);font-weight:var(--font-weight-medium);padding-top:2px}
  .slot h3{margin:0;font-size:clamp(1.3125rem,1.9vw,1.625rem);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tight);line-height:var(--line-height-normal)}
  .slot p{margin:var(--space-1-5) 0 0;color:var(--color-text-secondary);font-size:var(--font-size-base);white-space:pre-line}
  .slot::before{content:"";position:absolute;left:5.25rem;top:0;bottom:0;width:1px;background:var(--color-border-subtle)}
  .slot::after{content:"";position:absolute;left:5.25rem;top:var(--space-7);width:.625rem;height:.625rem;margin-left:calc(var(--space-1-5) * -1);border-radius:var(--radius-full);background:var(--color-brand-500);box-shadow:0 0 0 2px var(--color-neutral-50)}
  .slot__kind{display:block;margin:0 0 var(--space-2);font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);line-height:var(--line-height-snug);color:var(--color-text-muted)}
  .slot--has-kind::after{top:var(--space-10)}
  .slot--has-kind time{padding-top:var(--space-6)}
  .slot mark{-webkit-box-decoration-break:clone;box-decoration-break:clone}
  .program__side .slot mark{background:none;padding:0}
  .slot > div{padding-left:var(--space-2)}
  .slot:last-child{border-bottom:0}
  .slot--minor::after{top:var(--space-6);width:.375rem;height:.375rem;margin-left:calc(var(--space-1) * -1);background:var(--color-neutral-300)}
  .slot--minor time,.slot--minor h3,.slot--minor p{color:var(--color-text-muted)}
  .slot--minor time,.slot--minor p{font-size:var(--font-size-md)}
  .slot--minor h3{font-size:var(--font-size-lg);font-weight:var(--font-weight-medium)}
  .program__side{position:sticky;top:var(--space-sticky)}

  /* ───────────── 16. FAQ ───────────── */
  .faq__grid{display:grid;grid-template-columns:1fr 1.6fr;gap:clamp(2rem,6vw,6.25rem);align-items:start}
  .faq__side{position:sticky;top:var(--space-sticky)}
  .faq__side p{margin:var(--space-6) 0 var(--space-7);max-width:34ch}
  /* Two columns: start the list level with the heading, below the eyebrow */
  @media (min-width:861px){ .faq__grid .faq{margin-top:3.125rem} }
  .faq details{border-bottom:1px solid var(--color-border)}
  .faq details:first-child{border-top:1px solid var(--color-border)}
  .faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:var(--space-6);padding:var(--space-6) 0;font-size:clamp(1.125rem,1.5vw,1.25rem);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tight)}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"";flex:none;width:1.875rem;height:1.875rem;background:currentColor;-webkit-mask:var(--icon-plus) no-repeat center/.875rem;mask:var(--icon-plus) no-repeat center/.875rem;opacity:.55;transition:transform var(--duration) var(--ease),opacity var(--duration)}
  .faq details.is-open summary::after{transform:rotate(45deg);opacity:1}
  .faq .faq__answer{padding:0 var(--space-16) var(--space-7) 0;color:var(--color-text-secondary);overflow:hidden}
  .faq .faq__answer p{margin:0 0 var(--space-2-5)}
  .faq .faq__answer ul{margin:0;padding-left:var(--space-5)}
  .faq .faq__answer a{color:var(--color-text);text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.2em}
  .faq .faq__answer a:hover{text-decoration-color:var(--color-brand-500);text-decoration-thickness:.12em}

  /* ───────────── 17. CTA band ───────────── */
  .band{background:var(--color-brand-500);color:var(--color-neutral-950);padding:clamp(4rem,8vw,6.875rem) 0;overflow:hidden}
  .band .wrapper{display:flex;justify-content:space-between;align-items:center;gap:var(--space-8);flex-wrap:wrap}
  .band .wrapper>div:first-child{min-width:0}
  @media (min-width:861px){.band .wrapper{flex-wrap:nowrap}}
  .band h2{font-size:clamp(2.25rem,5.2vw,4rem);letter-spacing:var(--letter-spacing-display);line-height:var(--line-height-display);max-width:14ch}
  .band p{margin:var(--space-6) 0 0;font-size:var(--font-size-lead);font-weight:var(--font-weight-medium);max-width:38ch}

  /* ───────────── 18. Footer ───────────── */
  .footer{padding:var(--space-20) 0 var(--space-9);border-top:1px solid var(--color-border);background:var(--color-neutral-950);color:var(--color-neutral-0)}
  .footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--space-10);padding-bottom:var(--space-16)}
  .footer__grid img{height:3.25rem;width:auto;margin-bottom:var(--space-6)}
  .footer__grid h2{font-weight:var(--font-weight-medium);font-size:var(--font-size-2xs);color:var(--color-text-muted);margin:0 0 var(--space-5)}
  .footer__grid ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2-5)}
  .footer__grid a{text-decoration:none;opacity:.85}
  .footer__grid a:hover{opacity:1;color:var(--color-brand-500)}
  .footer__claim{margin:0;max-width:30ch;color:var(--color-text-secondary)}
  .footer__bottom{display:flex;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap;padding-top:var(--space-7);border-top:1px solid var(--color-border);font-size:var(--font-size-sm);color:var(--color-text-muted)}
  .footer__bottom a{text-decoration:none}
  .footer__bottom a:hover{color:var(--color-text)}

  /* ───────────── 19. Panels ───────────── */
  .panel{color:var(--color-text);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-panel)}
  .panel + .panel{margin-top:var(--space-5)}
  /* Text link, also for <button>s that should read as a link */
  .link{padding:0;border:0;background:none;font:inherit;font-weight:var(--font-weight-semibold);color:var(--color-link);text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.2em;cursor:pointer}
  .link:hover{color:var(--color-text)}

  /* ───────────── 20. Forms ───────────── */
  .form{display:grid;gap:var(--space-5)}
  .form__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
  .field{display:grid;gap:var(--space-2);min-width:0}
  .field > label,.field > .label{font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);color:var(--color-text-secondary)}
  .input,.select,.textarea{width:100%;min-width:0;height:var(--size-control);padding:0 var(--space-control);border-radius:var(--radius);border:1px solid var(--color-border-strong);background-color:var(--color-field);color:var(--color-text);font:inherit;font-size:var(--font-size-control);transition:border-color var(--duration-fast),box-shadow var(--duration-fast),background var(--duration-fast)}
  .textarea{height:auto;min-height:var(--size-textarea);padding-block:calc((var(--size-control) - var(--space-6)) / 2);resize:vertical}
  .select{appearance:none;background-image:var(--icon-chevron);background-repeat:no-repeat;background-position:right var(--space-control) center;background-size:.75rem;padding-right:calc(var(--space-control) + var(--space-7))}
  .select option{color:var(--color-neutral-950)}
  .input::placeholder,.textarea::placeholder{color:var(--color-text-faint)}
  /* Floating label: sits in the field like a placeholder, moves up small once the field is focused or filled */
  .field--float{position:relative;display:block}
  .field--float > label{position:absolute;left:calc(var(--space-control) + 1px);top:50%;transform:translateY(-50%);font-size:var(--font-size-control);font-weight:var(--font-weight-regular,400);color:var(--color-text-muted);pointer-events:none;transition:top var(--duration-fast),font-size var(--duration-fast),transform var(--duration-fast)}
  .field--float .input{padding-top:1.125rem}
  .field--float .input::placeholder{opacity:0;transition:opacity var(--duration-fast)}
  .field--float .input:focus::placeholder{opacity:1}
  /* On the yellow card the focus ring is just a black border */
  .signup .input:focus{border-color:var(--color-neutral-950);box-shadow:none}
  .field--float:has(.input:is(:focus,:not(:placeholder-shown))) > label{top:.5rem;transform:none;font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold)}
  .input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--color-focus);box-shadow:0 0 0 4px var(--color-ring);background-color:var(--color-field)}
  .input[aria-invalid=true]{border-color:var(--color-danger)}
  .input--sm{height:var(--size-control-sm);font-size:var(--font-size-sm)}
  .help{font-size:var(--font-size-xs);color:var(--color-text-muted);margin:0}
  .check{display:flex;gap:var(--space-3);align-items:flex-start;font-size:var(--font-size-sm);line-height:var(--line-height-body);color:var(--color-text-secondary);cursor:pointer}
  .check input{appearance:none;flex:none;width:1.25rem;height:1.25rem;margin-top:1px;border:1.5px solid var(--color-border-strong);border-radius:var(--radius-sm);background:transparent;display:grid;place-items:center;cursor:pointer;transition:background var(--duration-fast),border-color var(--duration-fast)}
  .check input:checked{background:var(--color-accent);border-color:var(--color-accent)}
  .check input:checked::after{content:"";width:.625rem;height:.375rem;border:2.5px solid var(--color-on-accent);border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
  .check input:focus-visible{box-shadow:0 0 0 4px var(--color-ring)}
  .check a{color:var(--color-link);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:.25rem}
  .check a:hover{text-decoration-color:currentColor}

  /* ───────────── 21. Alerts, pills, status ───────────── */
  .alert{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-4) var(--space-5);border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-surface);font-size:var(--font-size-md);line-height:var(--line-height-body)}
  .alert .icon{width:1.25rem;height:1.25rem;flex:none;margin-top:1px}
  .alert > i{margin-top:var(--space-1)}
  .alert--success{border-color:var(--color-success-border);background:var(--color-success-bg)}
  .alert--danger{border-color:var(--color-danger-border);background:var(--color-danger-bg)}
  .alert--warning{border-color:var(--color-warning-border);background:var(--color-warning-bg)}
  .alert--brand{border-color:var(--color-brand-500);background:var(--color-accent-soft)}
  .pill{display:inline-flex;align-items:center;gap:var(--space-1-5);height:1.625rem;padding:0 var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-2xs);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-caps-sm);text-transform:uppercase;background:var(--color-fill);color:var(--color-text-secondary);white-space:nowrap}
  .pill--muted{color:var(--color-text-secondary)}
  .pill--brand{background:var(--color-brand-500);color:var(--color-neutral-950)}
  .pill--dark{background:var(--color-neutral-950);color:var(--color-neutral-0)}
  .pill--success{background:var(--color-success-bg);color:var(--color-success)}
  .pill--danger{background:var(--color-danger-bg);color:var(--color-danger)}
  .pill--warning{background:var(--color-warning-bg);color:var(--color-warning)}

  /* ───────────── 23. Spinner ───────────── */
  .spinner{width:2.5rem;height:2.5rem;border-radius:var(--radius-full);border:.1875rem solid var(--color-border);border-top-color:var(--color-brand-500);animation:spin .9s linear infinite;margin:0 auto var(--space-4)}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* ───────────── 24. Toasts ───────────── */
  .result__icon{border-radius:var(--radius-full);display:grid;place-items:center;margin:0 auto var(--space-5)}

  .toast{position:fixed;bottom:var(--space-6);left:var(--space-6);z-index:var(--z-toast);display:flex;align-items:center;gap:var(--space-3);max-width:min(26.25rem,calc(100vw - 2.5rem));padding:var(--space-3-5) var(--space-5);border-radius:var(--radius);font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);box-shadow:var(--shadow-lg);transition:transform var(--duration) var(--ease),opacity var(--duration)}
  .toast .icon{width:1.25rem;height:1.25rem;flex:none}
  .toast--success{background:var(--color-brand-500);color:var(--color-neutral-950)}
  .toast--danger{background:var(--color-danger-500);color:var(--color-neutral-0)}
  .toast.is-hidden{opacity:0;transform:translateY(.75rem);pointer-events:none}
  .toast.is-visible{opacity:1;transform:none}
  .flash-stack{position:fixed;top:var(--space-sticky);right:var(--space-5);z-index:var(--z-toast);display:grid;gap:var(--space-2-5);justify-items:end}
  .flash-stack .toast{position:static}

  /* ───────────── 26. Result & error pages ───────────── */
  .btn .spinner,.result__icon .spinner{width:1.25rem;height:1.25rem;border-width:2px;margin:0;display:inline-block;vertical-align:middle}
  .btn--primary .spinner{border-color:color-mix(in srgb,var(--color-neutral-950) 20%,transparent);border-top-color:var(--color-neutral-950)}
  .result__icon .spinner{width:2.125rem;height:2.125rem}
  /* Result pages (confirm, thanks, access, unsubscribe, errors): left-aligned like the landing sections */
  .result{max-width:var(--size-container-narrow);margin:0;text-align:left}
  .result__icon{width:5.25rem;height:5.25rem;margin-bottom:var(--space-7);background:var(--color-brand-500);color:var(--color-neutral-950)}
  .result__icon .icon{width:2.5rem;height:2.5rem}
  .result__icon--danger{background:var(--color-danger-bg);color:var(--color-danger)}
  .result__icon i{font-size:var(--font-size-3xl)}
  .result__icon--neutral{background:var(--color-surface-sunken);color:var(--color-text)}
  .result .h2{margin-bottom:var(--space-4)}
  .result .lead{color:var(--color-text-secondary);margin:0 0 var(--space-9);max-width:46ch}
  .result__note{margin:calc(var(--space-3-5) * -1) 0 var(--space-8);font-size:var(--font-size-md)}
  .result__actions{display:flex;gap:var(--space-3);justify-content:flex-start;flex-wrap:wrap}
  .error-page{padding:clamp(1.25rem,4vw,3.75rem) 0}
  .error-page__code{margin:0 0 var(--space-2);font-size:clamp(6rem,16vw,12.5rem);font-weight:var(--font-weight-bold);letter-spacing:var(--letter-spacing-display);line-height:.9;color:var(--color-brand-500)}

  /* ───────────── 27. Legal prose ───────────── */
  .prose{color:var(--color-text-secondary);font-size:var(--font-size-base);line-height:var(--line-height-prose)}
  .prose h2{font-size:var(--font-size-subheading);color:var(--color-text);margin:var(--space-11) 0 var(--space-3-5);letter-spacing:var(--letter-spacing-tighter);line-height:var(--line-height-snug)}
  .prose h3{font-size:var(--font-size-xl);color:var(--color-text);margin:var(--space-7) 0 var(--space-2-5);letter-spacing:var(--letter-spacing-tight);line-height:var(--line-height-normal)}
  .prose h4{font-size:var(--font-size-lg);color:var(--color-text);margin:var(--space-6) 0 var(--space-2)}
  .prose p,.prose ul,.prose ol{margin:0 0 var(--space-3-5)}
  .prose ul,.prose ol{padding-left:var(--space-6)}
  .prose li{margin:var(--space-1) 0}
  .prose a{color:var(--color-link);text-underline-offset:.1875rem;word-break:break-word}
  .prose strong{color:var(--color-text)}
  .prose table{width:100%;border-collapse:collapse;margin:0 0 var(--space-5);font-size:var(--font-size-md)}
  .prose th,.prose td{border-bottom:1px solid var(--color-border);padding:var(--space-2-5) var(--space-2);text-align:left;vertical-align:top}
  .legal-page .page-head p + p{margin-top:var(--space-1-5)}
  /* Legal pages as on marc-laedt-ein.de: no boxes, sections separated by hairlines */
  .legal__toc{padding:var(--space-6) 0;margin:0 0 var(--space-5);border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border)}
  .legal__toc h2{font-size:var(--font-size-xs)!important;color:var(--color-text-muted);margin:0 0 var(--space-3-5)!important;font-weight:var(--font-weight-medium)!important}
  .legal__toc ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-2);font-size:var(--font-size-md)}
  .legal__toc a{color:var(--color-text-secondary);text-decoration:none}
  .legal__toc a:hover{color:var(--color-brand-500)}
  .legal > section{scroll-margin-top:var(--space-sticky)}
  .legal > section > h2:first-child,.legal > section:first-child h2{margin-top:var(--space-11)}
  .legal__num{color:var(--color-brand-500);margin-right:var(--space-2-5)}
  .legal__card{padding:var(--space-8) 0;border-top:1px solid var(--color-border)}
  .legal__card > h2:first-child,.legal__card > h3:first-child{margin-top:0}
  .legal__card > :last-child,.legal__card div > :last-child{margin-bottom:0}
  .legal__card div + div{margin-top:var(--space-3)}
  /* Address blocks: tight lines like a letterhead */
  .legal__card > div:not([class]){margin-bottom:var(--space-4)}
  .legal__card > div:not([class]) > p{margin:0}
  .legal__card > div:not([class]) > .legal__strong{margin-bottom:var(--space-1)}
  .legal__note{font-size:var(--font-size-sm);color:var(--color-text-muted)}
  .legal__sub{color:var(--color-brand-500)!important}
  .legal__strong{color:var(--color-text);font-weight:var(--font-weight-semibold);font-size:var(--font-size-lg)}
  .legal__split{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--color-border)}
  .legal__quote{border-left:2px solid var(--color-brand-500);padding-left:var(--space-4)}
  .legal .legal__alert{display:block;margin:0 0 var(--space-4);padding:0;border:0;border-radius:0;background:none}
  .legal__alert p{color:var(--color-text);font-weight:var(--font-weight-semibold)}
  .legal__alert-title{color:var(--color-text);font-weight:var(--font-weight-bold);margin:0 0 var(--space-1-5)}
  .legal__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3) var(--space-6);margin-top:var(--space-4)}
  .legal__grid .col-span-2{grid-column:span 2}
  .accordion{border-top:1px solid var(--color-border)}
  .accordion:last-of-type{border-bottom:1px solid var(--color-border)}
  .accordion summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-5) 0;cursor:pointer;font-weight:var(--font-weight-semibold);color:var(--color-text)}
  .accordion summary::-webkit-details-marker{display:none}
  .accordion__icon{width:1.125rem;height:1.125rem;flex:none;color:var(--color-brand-500);transition:transform var(--duration-fast)}
  .accordion[open] .accordion__icon{transform:rotate(180deg)}
  .accordion__body{padding:0 0 var(--space-5);font-size:var(--font-size-md);color:var(--color-text-secondary)}

  /* ───────────── 28. Reveal ───────────── */
  .reveal{opacity:0;transform:translateY(1.5rem);transition:opacity var(--duration-reveal) var(--ease),transform var(--duration-reveal) var(--ease)}
  .reveal.is-revealed{opacity:1;transform:none}
  .no-js .reveal{opacity:1;transform:none}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    .reveal{opacity:1;transform:none;transition:none}
    .hero__media img{animation:none;transform:none}
  }

  /* ───────────── 29. Utilities ─────────────
     Last in the layer so they win over components. Spacing follows the --space scale; use them for
     one-off nudges in templates instead of inline styles. */
  .mt-0{margin-top:0!important}.mt-1{margin-top:var(--space-1)!important}.mt-2{margin-top:var(--space-2)!important}
  .mt-3{margin-top:var(--space-3)!important}.mt-4{margin-top:var(--space-4)!important}.mt-5{margin-top:var(--space-5)!important}
  .mt-6{margin-top:var(--space-6)!important}.mt-7{margin-top:var(--space-7)!important}.mt-8{margin-top:var(--space-8)!important}
  .mt-10{margin-top:var(--space-10)!important}.mt-12{margin-top:var(--space-12)!important}
  .mb-0{margin-bottom:0!important}.mb-1{margin-bottom:var(--space-1)!important}.mb-2{margin-bottom:var(--space-2)!important}
  .mb-3{margin-bottom:var(--space-3)!important}.mb-4{margin-bottom:var(--space-4)!important}.mb-5{margin-bottom:var(--space-5)!important}
  .mb-6{margin-bottom:var(--space-6)!important}.mb-8{margin-bottom:var(--space-8)!important}
  .ml-2{margin-left:var(--space-2)!important}.mr-2{margin-right:var(--space-2)!important}
  .mx-auto{margin-left:auto!important;margin-right:auto!important}
  .text-center{text-align:center!important}
  .fs-2xs{font-size:var(--font-size-2xs)!important}.fs-xs{font-size:var(--font-size-xs)!important}
  .fs-sm{font-size:var(--font-size-sm)!important}.fs-md{font-size:var(--font-size-md)!important}
  .max-w-form{max-width:35rem!important}.max-w-narrow{max-width:var(--size-container-narrow)!important}
  .w-auto{width:auto!important}.w-full{width:100%!important}.pb-2{padding-bottom:var(--space-2)!important}
  .py-section{padding-block:var(--space-section)!important}
  .self-end{justify-self:end}.self-center{justify-self:center}
  .text-nowrap{white-space:nowrap}.text-uppercase{text-transform:uppercase}.flex-nowrap{flex-wrap:nowrap!important}
  .text-muted{color:var(--color-text-muted)}.text-faint{color:var(--color-text-faint)}.text-highlight{color:var(--color-brand-500)}
  .text-mono{font-family:var(--font-family-mono);font-size:var(--font-size-xs)}

  /* ───────────── 30. Responsive ───────────── */
  @media (max-width:1080px){
    .nav__links{display:none}
    .nav__burger{display:grid}
    .speakers{grid-template-columns:repeat(3,minmax(0,1fr))}
    .footer__grid{grid-template-columns:1fr 1fr}
  }
  @media (max-width:860px){
    .section__head,.intro,.program__grid,.faq__grid,.hero__grid{grid-template-columns:1fr}
    .section__head p{justify-self:start}
    .hero__facts{flex-direction:column}
    .hero{--hero-media-height:min(108vw,40rem);background:var(--color-neutral-950)}
    .hero__media{inset:0 0 auto 0;height:var(--hero-media-height)}
    .hero__media img{object-position:30% 0}
    .hero__media::after{background:linear-gradient(0deg,var(--color-neutral-950) 0%,color-mix(in srgb,var(--color-neutral-950) 70%,transparent) 22%,transparent 50%),linear-gradient(180deg,color-mix(in srgb,var(--color-neutral-950) 55%,transparent) 0%,transparent 18%)}
    .hero__inner{padding-top:calc(var(--hero-media-height) - var(--space-12) * 3)}
    .hero__facts div{padding-top:var(--space-4)}
    .expect{grid-template-columns:1fr 1fr}
    .program__side,.faq__side{position:static}
    .dialog__grid{grid-template-columns:1fr}
    .dialog__grid img{height:auto;min-height:0;aspect-ratio:4/3;object-position:50% 20%}
    .dialog__grid,.dialog__body{max-height:none}
    body.site dialog,body.site dialog:has(.dialog__grid){max-height:calc(100svh - 2rem);overflow:auto}
    .dialog__controls{position:sticky;justify-content:flex-end;margin:var(--space-3-5) var(--space-3-5) calc(var(--space-14) * -1)}
  }
  @media (max-width:600px){
    :root{--size-nav:4.125rem}
    .expect{grid-template-columns:1fr}
    body.site{font-size:var(--font-size-base)}
    .nav__logo img{height:2.375rem}
    .nav__actions .btn{display:none}
    .site-menu__actions{display:block}
    .site-menu__actions .btn{width:100%}
    .hero__inner{padding-bottom:var(--space-9)}
    .hero__actions .btn{flex:1 1 100%}
    .speakers{grid-template-columns:repeat(2,minmax(0,1fr))}
    .speaker__name{font-size:var(--font-size-base)}
    .speaker__role{font-size:var(--font-size-xs)}
    .slot{grid-template-columns:1fr;gap:var(--space-1-5)}
    .slot::before,.slot::after{display:none}
    .slot > div{padding-left:0}
    .faq .faq__answer{padding-right:0}
    .footer__grid{grid-template-columns:1fr}
    .form__row{grid-template-columns:1fr}
    .legal__grid{grid-template-columns:1fr}
    .legal__grid .col-span-2{grid-column:auto}
    .toast{left:var(--space-4);right:var(--space-4);bottom:var(--space-4)}
    .flash-stack{left:var(--space-5);right:var(--space-5);justify-items:stretch}
  }
}

/* ───────────── Admin: black sidebar, off-white workspace, white cards, compact density ───────────── */
@layer brand {
  body.admin-body{
    background:var(--color-neutral-50);color:var(--color-neutral-950);font-size:var(--font-size-md);line-height:var(--line-height-body);
    --size-control:2.75rem;--size-control-sm:2.25rem;--size-control-lg:3.25rem;
    --space-control:.875rem;--font-size-control:var(--font-size-md);--size-textarea:6rem;
    --space-btn:1.25rem;--space-btn-sm:.875rem;--space-btn-lg:1.625rem;--font-size-btn-lg:var(--font-size-base);
    --space-admin:clamp(1.25rem,3vw,2.75rem);
  }
  /* The admin login is a site-style page inside the admin shell: dark and full size. */
  .admin-login{
    --size-control:3.25rem;--size-control-sm:2.5rem;--size-control-lg:3.625rem;
    --space-control:1.125rem;--font-size-control:var(--font-size-base);
    --space-btn:1.625rem;--space-btn-sm:1.125rem;--space-btn-lg:2rem;--font-size-btn-lg:var(--font-size-lg);
  }
  .admin{display:grid;grid-template-columns:16.5rem minmax(0,1fr);min-height:100vh}
  .admin__sidebar{position:sticky;top:0;height:100vh;overflow-y:auto;background:var(--color-neutral-950);color:var(--color-neutral-0);display:flex;flex-direction:column;gap:var(--space-7);padding:var(--space-7) var(--space-4) var(--space-5)}
  .admin__brand{display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-2-5)}
  .admin__brand img{height:2.5rem;width:auto}
  .admin-nav{display:grid;gap:2px;flex:1;align-content:start}
  .admin-nav__label{display:block;margin:var(--space-5) var(--space-3) var(--space-1-5);font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);color:var(--color-text-faint)}
  .admin-nav__label:first-child{margin-top:0}
  .admin-nav a{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2-5) var(--space-3);border-radius:var(--radius);color:var(--color-text-secondary);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);text-decoration:none;transition:background var(--duration-fast),color var(--duration-fast)}
  .admin-nav a .fas{width:1.125rem;text-align:center;font-size:var(--font-size-sm);color:var(--color-text-faint);transition:color var(--duration-fast)}
  .admin-nav a:hover{background:var(--color-fill);color:var(--color-text)}
  .admin-nav a:hover .fas{color:var(--color-text)}
  .admin-nav a.is-active{background:var(--color-brand-500);color:var(--color-neutral-950);font-weight:var(--font-weight-semibold)}
  .admin-nav a.is-active .fas{color:var(--color-neutral-950)}
  .admin-nav .admin-nav__ext{width:auto;margin-left:auto;font-size:var(--font-size-2xs)}
  .admin__user{display:grid;gap:var(--space-3-5);padding:var(--space-4) var(--space-3) 0;border-top:1px solid var(--color-border)}
  .admin__user-row{display:flex;align-items:center;gap:var(--space-3);min-width:0}
  .admin__user-row div{display:grid;min-width:0}
  .admin__user-row strong{font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .admin__user-row span{font-size:var(--font-size-2xs);color:var(--color-text-faint)}
  .admin__avatar{flex:none;width:2.25rem;height:2.25rem;border-radius:var(--radius-full);display:grid;place-items:center;background:var(--color-neutral-800);color:var(--color-brand-500);font-weight:var(--font-weight-bold)}
  .admin__sidebar .pill--brand,.admin__mobilebar .pill--brand{height:1.375rem;font-size:var(--font-size-2xs)}
  .admin__main{display:flex;flex-direction:column;min-width:0}
  .admin__mobilebar{display:none}
  .admin__scrim[hidden]{display:none}
  .admin__header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--space-4) var(--space-6);padding:var(--space-10) var(--space-admin) var(--space-6)}
  .admin__eyebrow{margin:0 0 var(--space-2-5);font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);color:var(--color-text-muted)}
  .admin__eyebrow a{color:inherit;text-decoration:none}
  .admin__eyebrow a:hover{color:var(--color-text)}
  .admin__title{font-size:var(--font-size-heading)}
  .admin__subtitle{margin:var(--space-2) 0 0;color:var(--color-text-muted);font-size:var(--font-size-base)}
  .admin__actions{display:flex;flex-wrap:wrap;gap:var(--space-2-5)}
  .admin__flash{display:grid;gap:var(--space-2-5);padding:0 var(--space-admin) var(--space-5)}
  .admin__content{flex:1;padding:0 var(--space-admin) var(--space-16)}
  /* Outline buttons sit on the off-white workspace, so they get a white fill there. */
  .admin__content :is(.btn--outline,.btn--danger),.admin__header .btn--outline{background:var(--color-neutral-0)}
  .admin__content .btn--danger:hover{background:var(--color-danger-500)}
  .admin-body .pill{height:1.5rem;padding:0 var(--space-2-5);font-size:var(--font-size-2xs)}

  /* Admin components */
  .card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-6)}
  .card--media{padding:var(--space-3);background:var(--color-neutral-950);border-color:var(--color-neutral-950)}
  /* Empty state, shared by site and admin. Defined after .card so a card can be an empty state. */
  .empty{display:grid;justify-items:center;gap:var(--space-2);padding:var(--space-12) var(--space-5);text-align:center;color:var(--color-text-muted)}
  .empty--boxed{padding:var(--space-14) var(--space-6);border:1px dashed var(--color-border);border-radius:var(--radius)}
  .empty h3{font-size:var(--font-size-2xl);margin:0 0 var(--space-2);color:var(--color-text)}
  .empty p{margin:0}
  .empty > .btn{margin-top:var(--space-4)}
  .empty .fas{font-size:2rem;color:var(--color-neutral-300);margin-bottom:var(--space-1-5)}
  .empty strong{color:var(--color-text);font-weight:var(--font-weight-semibold)}
  .stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
  .card__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3) var(--space-4);margin-bottom:var(--space-5)}
  .card__title{margin:0;font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tight)}
  .card__subtitle{margin:var(--space-1) 0 0;color:var(--color-text-muted);font-size:var(--font-size-sm)}
  .grid{display:grid;gap:var(--space-5)}
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--space-5);align-items:start}
  .stat{display:grid;gap:var(--space-1-5);align-content:start}
  .stat__label{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);color:var(--color-text-muted)}
  .stat__value{font-size:clamp(1.75rem,2.6vw,2.25rem);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tightest);line-height:var(--line-height-heading);font-variant-numeric:tabular-nums}
  .stat__unit{font-size:.5em}
  .stat__meta{font-size:var(--font-size-xs);color:var(--color-text-muted)}
  .stat--dark{background:var(--color-neutral-950);color:var(--color-neutral-0);border-color:var(--color-neutral-950)}
  .stat--dark .stat__value{color:var(--color-brand-500)}
  /* Native <progress class="progress" value max>. The fill colour comes from --progress-fill. */
  .progress{--progress-fill:var(--color-text);display:block;width:100%;height:.375rem;border:0;border-radius:var(--radius-full);background:var(--color-fill);overflow:hidden;-webkit-appearance:none;appearance:none}
  .progress::-webkit-progress-bar{background:var(--color-fill);border-radius:inherit}
  .progress::-webkit-progress-value{background:var(--progress-fill);border-radius:inherit;transition:width var(--duration) var(--ease)}
  .progress::-moz-progress-bar{background:var(--progress-fill);border-radius:inherit}
  .progress--brand,.stat--dark .progress{--progress-fill:var(--color-brand-500)}
  .progress--success{--progress-fill:var(--color-success-500)}
  .table-wrap{overflow-x:auto;margin:0 calc(var(--space-6) * -1);-webkit-overflow-scrolling:touch}
  .table{width:100%;border-collapse:collapse;font-size:var(--font-size-sm);font-variant-numeric:tabular-nums}
  .table th{padding:var(--space-2-5) var(--space-3);text-align:left;font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);color:var(--color-text-muted);border-bottom:1px solid var(--color-border);white-space:nowrap;background:var(--color-surface)}
  .table td{padding:var(--space-3-5) var(--space-3);border-bottom:1px solid var(--color-border-subtle);vertical-align:middle}
  .table :is(th,td):first-child{padding-left:var(--space-6)}
  .table :is(th,td):last-child{padding-right:var(--space-6)}
  .table tbody tr{transition:background var(--duration-fast)}
  .table tbody tr:hover{background:var(--color-neutral-50)}
  .table tbody tr:last-child td{border-bottom:0}
  .table .table__num{text-align:right;white-space:nowrap}
  .table .text-center{text-align:center}
  .table .text-nowrap{white-space:nowrap}
  .table strong{font-weight:var(--font-weight-semibold)}
  .table .table__sub{display:block;font-size:var(--font-size-2xs);color:var(--color-text-muted)}
  .table--sticky thead th{position:sticky;top:0;z-index:1}
  .key-value{display:grid;grid-template-columns:auto 1fr;gap:var(--space-2-5) var(--space-5);margin:0;font-size:var(--font-size-sm)}
  .key-value dt{color:var(--color-text-muted)}
  .key-value dd{margin:0;font-weight:var(--font-weight-medium)}
  .toolbar{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center}
  .search{position:relative;flex:1 1 16.25rem}
  .search .fas{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%);color:var(--color-text-faint);font-size:var(--font-size-sm)}
  .search .input{padding-left:var(--space-11)}
  .select--auto{width:auto;min-width:11.25rem}
  .form--2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4) var(--space-5)}
  .form--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .form--2 .col-span-full{grid-column:1/-1}
  .form__actions{display:flex;flex-wrap:wrap;gap:var(--space-2-5);justify-content:flex-end;grid-column:1/-1;padding-top:var(--space-1)}
  .form__section{grid-column:1/-1;margin:var(--space-2) 0 calc(var(--space-1) * -1);padding-top:var(--space-4);border-top:1px solid var(--color-border);font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);color:var(--color-text-muted)}
  .form__section:first-child{margin-top:0;padding-top:0;border-top:0}
  .form--divided{margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--color-border)}
  .admin-login__back{font-size:var(--font-size-sm);text-decoration:none}
  .row-actions{display:flex;flex-wrap:wrap;gap:var(--space-1-5);justify-content:flex-end}
  .list-card-stack{display:grid;gap:var(--space-3)}
  .list-card,.team__panel{border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface)}
  .list-card{padding:var(--space-5) var(--space-5)}
  .list-card__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:var(--space-3) var(--space-4)}
  .list-card__title{margin:0 0 var(--space-2)!important;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tight)}
  .list-card__desc{margin:var(--space-3) 0 0;font-size:var(--font-size-sm);color:var(--color-text-muted)}
  .list-card__metrics{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-3);margin:var(--space-4) 0 0;padding-top:var(--space-3-5);border-top:1px solid var(--color-border-subtle)}
  .list-card__metrics dt{font-size:var(--font-size-2xs);font-weight:var(--font-weight-semibold);color:var(--color-text-muted)}
  .list-card__metrics dd{margin:var(--space-1) 0 0;font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}
  .list-card__form{margin-top:var(--space-5);padding-top:var(--space-5);border-top:1px solid var(--color-border)}
  .tag-list{display:flex;flex-wrap:wrap;gap:var(--space-1-5)}
  kbd{padding:1px var(--space-1-5);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-neutral-50);font-family:inherit;font-size:var(--font-size-2xs)}

  /* Admin login */
  .admin-login{min-height:100vh;display:grid;place-items:center;padding:var(--space-10) var(--space-5);background:var(--color-neutral-950);color:var(--color-neutral-0)}
  .admin-login__card{width:100%;max-width:26.25rem;display:grid;gap:var(--space-7)}
  .admin-login__card .admin-login__logo{display:flex;align-items:center;justify-content:space-between}
  .admin-login__card .admin-login__logo img{height:2.875rem;width:auto}
  .admin-login .panel{display:grid;gap:var(--space-5)}

  /* Segmented tabs */
  .segmented{display:flex;gap:var(--space-1);overflow-x:auto;padding:var(--space-1);border-radius:var(--radius-full);background:var(--color-surface);border:1px solid var(--color-border);width:max-content;max-width:100%}
  .segmented__item{display:inline-flex;align-items:center;gap:var(--space-2-5);height:2.5rem;padding:0 var(--space-5);border:0;border-radius:var(--radius-full);background:none;color:var(--color-text-secondary);font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);white-space:nowrap;cursor:pointer;text-decoration:none;transition:background var(--duration-fast),color var(--duration-fast)}
  .segmented__item:hover{color:var(--color-text);background:var(--color-fill)}
  .segmented__item.is-active{background:var(--color-neutral-950);color:var(--color-neutral-0)}
  .segmented__item .fas{font-size:var(--font-size-xs)}

  /* CMS */
  .cms-speaker.is-hidden{background:var(--color-neutral-50)}
  .cms-speaker.is-hidden .cms-speaker__thumb img{opacity:.45;filter:grayscale(1)}
  .cms-speaker__row{display:grid;grid-template-columns:2rem 4rem minmax(0,1fr) auto;gap:var(--space-4);align-items:center}
  .cms-speaker__thumb{width:4rem;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--color-fill);display:grid;place-items:center;color:var(--color-neutral-300)}
  .cms-speaker__thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 15%}
  .cms-speaker__info .list-card__title{margin:0 0 2px!important}
  .cms-speaker__role{margin:0;font-size:var(--font-size-sm);color:var(--color-text-muted)}
  .cms-speaker__role + .tag-list{margin-top:var(--space-2)}
  .drag-handle{width:2rem;height:var(--size-control);display:grid;place-items:center;border:0;border-radius:var(--radius);background:transparent;color:var(--color-text-faint);font-size:var(--font-size-base);cursor:grab;touch-action:none;user-select:none}
  .drag-handle:hover,.drag-handle:focus-visible{background:var(--color-fill);color:var(--color-text)}
  .drag-handle:focus-visible{outline:2px solid var(--color-focus);outline-offset:1px}
  .drag-handle.is-locked{cursor:default;color:var(--color-neutral-300);font-size:var(--font-size-xs);background:transparent}
  .is-sorting,.is-sorting *{cursor:grabbing!important;user-select:none}
  .cms-speaker.is-dragging{position:relative;z-index:2;box-shadow:var(--shadow-md);border-color:var(--color-text);background:var(--color-surface)}
  .switch{display:inline-flex;align-items:center;gap:var(--space-2-5);min-width:8.5rem;font-size:var(--font-size-sm);font-weight:var(--font-weight-semibold);cursor:pointer;user-select:none}
  .switch input{position:absolute;opacity:0;width:1px;height:1px}
  .switch__track{position:relative;flex:none;width:2.625rem;height:1.5rem;border-radius:var(--radius-full);background:var(--color-neutral-200);transition:background var(--duration-fast)}
  .switch__track::after{content:"";position:absolute;top:var(--space-1);left:var(--space-1);width:1.125rem;height:1.125rem;border-radius:var(--radius-full);background:var(--color-neutral-0);box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease)}
  .switch input:checked + .switch__track{background:var(--color-success-500)}
  .switch input:checked + .switch__track::after{transform:translateX(1.125rem)}
  .switch input:focus-visible + .switch__track{outline:2px solid var(--color-focus);outline-offset:2px}
  .switch input:disabled + .switch__track{opacity:.6}
  .switch input:not(:checked) ~ [data-switch-label]{color:var(--color-text-muted)}
  .cms-speaker__form{display:grid;grid-template-columns:13.75rem minmax(0,1fr);gap:var(--space-6);align-items:start}
  .image-field{display:grid;gap:var(--space-3)}
  .image-field__frame{aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--color-neutral-50);border:1px dashed var(--color-border-strong);display:grid;place-items:center}
  .image-field__frame img{width:100%;height:100%;object-fit:cover;object-position:50% 0%}
  .image-field__frame img.is-centered{object-position:50% 50%}
  .image-field__empty{display:grid;justify-items:center;gap:var(--space-2);font-size:var(--font-size-xs);color:var(--color-text-muted)}
  .image-field__empty .fas{font-size:var(--font-size-3xl);color:var(--color-neutral-300)}
  .image-field label.btn{cursor:pointer}
  .image-field:has(input[type=file]:focus-visible) label.btn{outline:2px solid var(--color-focus);outline-offset:2px}
  .check-group{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-7)}
  .col-span-2{grid-column:span 2}
  .cms-slots{list-style:none;margin:var(--space-2) 0 0;padding:0;display:grid}
  .cms-slots__item{border-top:1px solid var(--color-border-subtle);padding:var(--space-3-5) 0}
  .cms-slots__item:first-child{border-top:0}
  .cms-slots__row{display:grid;grid-template-columns:3.5rem minmax(0,1fr) auto;gap:var(--space-3-5);align-items:start}
  .cms-slots__row time{font-size:var(--font-size-md);font-weight:var(--font-weight-semibold);padding-top:2px}
  .cms-slots__text{display:grid;gap:var(--space-1);min-width:0}
  .cms-slots__text strong{font-weight:var(--font-weight-semibold);font-size:var(--font-size-md);line-height:var(--line-height-normal)}
  .cms-slots__text span{font-size:var(--font-size-xs);color:var(--color-text-muted);line-height:var(--line-height-body);white-space:pre-line}
  .cms-slots__item.is-minor .cms-slots__text strong,.cms-slots__item.is-minor time{color:var(--color-text-muted);font-weight:var(--font-weight-medium)}
  .cms-slots__item .row-actions{align-items:center}

  /* Team */
  .team__row{display:grid;grid-template-columns:2.5rem minmax(0,1fr) auto auto;gap:var(--space-4);align-items:center}
  .team__avatar{width:2.5rem;height:2.5rem;background:var(--color-neutral-950)}
  .team__info .list-card__title{margin:0!important;display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
  .team__email{margin:2px 0 0;font-size:var(--font-size-sm);color:var(--color-text-muted);overflow-wrap:anywhere}
  .team__account.is-inactive{background:var(--color-neutral-50)}
  .team__account.is-inactive .team__info,.team__account.is-inactive .team__avatar{opacity:.55}
  .team__edit{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:var(--space-5);align-items:start}
  .team__panel{padding:var(--space-5);min-width:0}
  .team__panel-title{margin:0 0 var(--space-3-5);font-size:var(--font-size-md);font-weight:var(--font-weight-semibold)}
  .team__panel + .team__panel .form--2{grid-template-columns:minmax(0,1fr)}
  .team__password{display:flex;gap:var(--space-2)}
  .team__password .input{flex:1;min-width:0}
  .team__password .btn{height:var(--size-control);width:var(--size-control);padding:0;flex:none}
  .team__password-tools{display:grid;gap:var(--space-2);justify-items:start}
  .team__password-tools .help{margin:0}
  .team__invite-note{display:flex;gap:var(--space-3);align-items:flex-start;margin:0;font-size:var(--font-size-sm);line-height:var(--line-height-body)}
  .team__invite-note .fas{margin-top:var(--space-1)}
  @media (max-width:1100px){ .team__edit{grid-template-columns:minmax(0,1fr)} }

  @media (max-width:1200px){
    .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))}
    .split{grid-template-columns:minmax(0,1fr)}
    .list-card__metrics{grid-template-columns:repeat(3,minmax(0,1fr))}
  }
  @media (max-width:960px){
    .admin{grid-template-columns:minmax(0,1fr)}
    .admin__sidebar{position:fixed;inset:0 auto 0 0;z-index:var(--z-modal);width:min(18.75rem,86vw);transform:translateX(-100%);transition:transform var(--duration) var(--ease)}
    .admin__sidebar.is-open{transform:none;box-shadow:var(--shadow-lg)}
    .admin__scrim{position:fixed;inset:0;z-index:calc(var(--z-modal) - 5)}
    .admin__mobilebar{position:sticky;top:0;z-index:var(--z-nav);display:flex;align-items:center;gap:var(--space-3-5);height:3.75rem;padding:0 var(--space-4);background:var(--color-neutral-950);color:var(--color-neutral-0)}
    .admin__mobilebar img{height:1.875rem;width:auto}
    .admin__mobilebar .pill--brand{margin-left:auto}
    .admin__burger{width:2.5rem;height:2.5rem;display:grid;place-items:center;border:0;border-radius:var(--radius);background:var(--color-fill);padding:0}
    .admin__burger span,.admin__burger span::before,.admin__burger span::after{display:block;width:1.125rem;height:2px;background:var(--color-neutral-0);border-radius:2px;position:relative}
    .admin__burger span::before,.admin__burger span::after{content:"";position:absolute;left:0}
    .admin__burger span::before{top:calc(var(--space-1-5) * -1)}
    .admin__burger span::after{top:var(--space-1-5)}
    .admin__header{padding-top:var(--space-7)}
    .grid--3{grid-template-columns:minmax(0,1fr)}
  }
  @media (max-width:640px){
    .grid--2,.form--2,.form--3{grid-template-columns:minmax(0,1fr)}
    .grid--4{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
    .card{padding:var(--space-5)}
    .table-wrap{margin:0 calc(var(--space-5) * -1)}
    .table :is(th,td):first-child{padding-left:var(--space-5)}
    .table :is(th,td):last-child{padding-right:var(--space-5)}
    .admin__header{padding:var(--space-6) var(--space-4) var(--space-4)}
    .admin__content{padding:0 var(--space-4) var(--space-12)}
    .admin__flash{padding:0 var(--space-4) var(--space-4)}
    .admin__actions{width:100%}
    .admin__actions .btn{flex:1}
    .stat__value{font-size:var(--font-size-3xl)}
    .hide-sm{display:none}
    .list-card{padding:var(--space-4)}
    .list-card__metrics{grid-template-columns:1fr 1fr}
    .col-span-2{grid-column:auto}
    .cms-speaker__form{grid-template-columns:minmax(0,1fr)}
    .image-field{grid-template-columns:7.5rem minmax(0,1fr);align-items:start}
    .image-field__frame{grid-row:span 3}
    .cms-slots__row{grid-template-columns:3.5rem minmax(0,1fr)}
    .cms-speaker__row{grid-template-columns:1.75rem 3.5rem minmax(0,1fr);gap:var(--space-3)}
    .switch{min-width:0;margin-right:auto}
    .team__row{grid-template-columns:2.5rem minmax(0,1fr);gap:var(--space-3)}
    .team__row .tag-list,.team__row .row-actions{grid-column:2/-1}
    .team__panel{padding:var(--space-4)}
    .cms-speaker__row .row-actions,.cms-slots__row .row-actions{grid-column:1/-1;justify-content:flex-start}
  }
  @media (max-width:1500px){ .hide-lg{display:none} }
  @media (max-width:1024px){ .hide-md{display:none} }

  /* Webinar admin: switcher, copy field, pager, chart */
  .admin-webinar{display:grid;gap:var(--space-2);padding:0 var(--space-2-5)}
  .admin-webinar .admin-nav__label{margin:0}
  .admin__subtitle .pill{vertical-align:middle}
  .copy-field{display:flex;gap:var(--space-2)}
  .copy-field .input{flex:1;min-width:0}

  /* Admin live chat moderation */
  .mod{display:grid;grid-template-columns:minmax(0,3fr) minmax(20rem,2fr);gap:var(--space-5);align-items:start}
  .mod__feed{display:flex;flex-direction:column;height:calc(100vh - 12rem);min-height:30rem}
  .mod__hint{font-size:var(--font-size-2xs);color:var(--color-text-muted)}
  .mod__stream{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}
  .mod__list{flex:1;min-height:0;margin:0 calc(var(--space-6) * -1);padding:0 var(--space-6) var(--space-2);list-style:none;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-3)}
  .mod__jump{position:absolute;inset:auto 0 var(--space-3);width:fit-content;margin-inline:auto;gap:var(--space-2);border-radius:var(--radius-full);box-shadow:var(--shadow-md);animation:dlg var(--duration) var(--ease)}
  .mod__jump[hidden]{display:none}
  .mod__menu{position:relative}
  .mod__menu-toggle{display:grid;place-items:center;width:1.75rem;height:1.5rem;padding:0;border:0;border-radius:var(--radius-sm);background:none;color:var(--color-text-muted);cursor:pointer;opacity:.55;transition:opacity var(--duration),background var(--duration)}
  .mod__msg:hover .mod__menu-toggle,.mod__menu-toggle:focus-visible,.mod__menu-toggle[aria-expanded="true"]{opacity:1}
  .mod__menu-toggle:hover,.mod__menu-toggle[aria-expanded="true"]{background:var(--color-neutral-100);color:var(--color-text)}
  .mod__menu-list{position:fixed;top:var(--menu-top,0);left:var(--menu-left,0);z-index:var(--z-menu);display:grid;min-width:12rem;padding:var(--space-1);background:var(--color-neutral-0);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-lg)}
  .mod__menu-list[hidden]{display:none}
  .mod__menu-item{display:flex;align-items:center;gap:var(--space-2-5);width:100%;padding:var(--space-2) var(--space-2-5);border:0;border-radius:var(--radius-sm);background:none;color:var(--color-text);font:inherit;font-size:var(--font-size-sm);text-align:left;cursor:pointer}
  .mod__menu-item i{width:1rem;color:var(--color-text-muted);text-align:center}
  .mod__menu-item:hover,.mod__menu-item:focus-visible{background:var(--color-neutral-100)}
  .mod__menu-item--danger,.mod__menu-item--danger i{color:var(--color-danger)}
  .mod__menu-item--danger:hover{background:var(--color-danger-50)}
  body.site dialog.confirm{max-width:min(26rem,calc(100vw - 2rem))}
  .confirm__body{display:grid;gap:var(--space-3);padding:var(--space-6)}
  .confirm__title{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);letter-spacing:var(--letter-spacing-tighter)}
  .confirm__text{margin:0;color:var(--color-text-secondary);font-size:var(--font-size-sm)}
  .confirm__quote{margin:0;padding:var(--space-2-5) var(--space-3);border-left:3px solid var(--color-border-strong);background:var(--color-neutral-50);border-radius:var(--radius-sm);font-size:var(--font-size-sm);overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .confirm__quote[hidden]{display:none}
  .confirm__actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin-top:var(--space-2)}
  .confirm .btn--danger{background:var(--color-danger-500);border-color:var(--color-danger-500);color:var(--color-neutral-0)}
  .mod__msg{max-width:80%}
  .admin-body .chat__bubble{background:var(--color-neutral-100);color:var(--color-neutral-950)}
  .admin-body .chat__msg--team .chat__bubble{background:var(--color-brand-500)}
  .admin-body .chat__author{color:var(--color-text)}
  .admin-body .chat__tag{color:var(--color-warning-700)}
  .mod__actions{display:flex;flex-wrap:wrap;gap:var(--space-1);margin-top:var(--space-1-5)}
  .mod__action{font-size:var(--font-size-2xs)}
  .mod__action--danger{color:var(--color-danger-300)}
  .mod__compose{display:grid;gap:var(--space-3);margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--color-border)}
  .mod__compose-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3)}
  .mod__error{margin:0;font-size:var(--font-size-sm);color:var(--color-danger-300)}
  .mod__side{display:grid;gap:var(--space-5)}
  .mod__pinned{margin:0;color:var(--color-text-secondary);white-space:pre-line;overflow-wrap:anywhere}
  .mod__questions,.mod__people{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none;max-height:24rem;overflow-y:auto}
  .mod__question{padding:var(--space-3);border:1px solid var(--color-border-subtle);border-radius:var(--radius);font-size:var(--font-size-sm)}
  .mod__person{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
  .mod__person .btn{margin-left:auto}
  .mod__empty{color:var(--color-text-muted);font-size:var(--font-size-sm)}
  @media (max-width:1080px){
    .mod{grid-template-columns:1fr}
    .mod__feed{height:70vh}
  }
  .list-card.is-inactive{background:var(--color-neutral-50)}
  .list-card.is-inactive .list-card__title{color:var(--color-text-muted)}
  .pager{display:flex;align-items:center;justify-content:center;gap:var(--space-4);margin-top:var(--space-2);padding-top:var(--space-5);border-top:1px solid var(--color-border-subtle)}
  .pager__info{font-size:var(--font-size-sm);color:var(--color-text-muted)}
  .text-success{color:var(--color-success)}
  .chart-box{position:relative;height:15rem}
  .chart-box--wide{height:17.5rem}
  .chart-box__empty{margin:0;padding:var(--space-10) 0;text-align:center;font-size:var(--font-size-sm)}
  .bullet-list{display:grid;gap:var(--space-2);margin:0;padding-left:var(--space-5);font-size:var(--font-size-sm);list-style:disc}
  .text-break{overflow-wrap:anywhere}
  .cms-slots__row--range{grid-template-columns:7rem minmax(0,1fr) auto}
  @media (max-width:640px){ .cms-slots__row--range{grid-template-columns:7rem minmax(0,1fr)} .chart-box--wide{height:14rem} }

  /* Cookie consent banner (public pages) */
  .consent{position:fixed;left:var(--space-5);bottom:var(--space-5);z-index:var(--z-modal);width:min(36rem,calc(100vw - 2 * var(--space-5)));max-height:calc(100dvh - 2 * var(--space-5));overflow-y:auto;overscroll-behavior:contain;background:var(--color-surface);color:var(--color-text);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}
  .consent[hidden]{display:none}
  .consent__panel{display:grid;gap:var(--space-4);padding:var(--space-6)}
  .consent__title{margin:0;font-size:var(--font-size-xl);line-height:1.2}
  .consent__title:focus{outline:none}
  .consent__text{margin:0;font-size:var(--font-size-sm);line-height:1.55;color:var(--color-text-secondary)}
  .consent__text a,.consent__category a{color:var(--color-text);text-decoration:underline;text-underline-offset:.15em}
  .consent__details{display:grid;gap:var(--space-3)}
  .consent__details[hidden]{display:none}
  .consent__category{display:grid;gap:var(--space-2);padding:var(--space-4);border:1px solid var(--color-border-subtle);border-radius:var(--radius-lg);background:var(--color-surface-sunken)}
  .consent__category p{margin:0;font-size:var(--font-size-xs);line-height:1.5;color:var(--color-text-muted)}
  .consent__toggle{display:flex;align-items:center;gap:var(--space-3);cursor:pointer}
  .consent__toggle input{width:1.125rem;height:1.125rem;accent-color:var(--color-neutral-950);flex:none}
  .consent__toggle input:disabled{cursor:not-allowed}
  .consent__toggle span{display:flex;flex:1;align-items:baseline;justify-content:space-between;gap:var(--space-3)}
  .consent__toggle small{font-size:var(--font-size-2xs);color:var(--color-text-muted)}
  .consent__services summary{cursor:pointer;font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold)}
  .consent__service{display:grid;gap:var(--space-0-5);margin:var(--space-2) 0 0;padding-top:var(--space-2);border-top:1px solid var(--color-border-subtle);font-size:var(--font-size-xs);color:var(--color-text-muted)}
  .consent__service dt{font-weight:var(--font-weight-semibold);color:var(--color-text)}
  .consent__service dd{margin:0}
  .consent__actions{display:flex;flex-wrap:wrap;gap:var(--space-2-5)}
  .consent__actions .btn{flex:1 1 10rem}
  .consent__actions [hidden]{display:none}
  @media (max-width:640px){
    .consent{left:var(--space-2-5);right:var(--space-2-5);bottom:var(--space-2-5);width:auto;max-height:calc(100dvh - 2 * var(--space-2-5))}
    .consent__panel{padding:var(--space-5)}
  }
}

/* Must beat component display rules regardless of layer order. */
.hidden{display:none!important}