/* ============================================================
   Protectly — main stylesheet (CSS-first, progressive enhancement)
   Values come from tokens.css; no raw hex/px outside documented cases.
   Breakpoints: 640 / 768 / 1024 / 1280 (see tokens.css header)
   ============================================================ */

/* ── Fonts (self-hosted, GDPR: no CDN) ─────────────────────── */
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin-wght.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter-latin-ext-wght.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/space-grotesk-latin-wght.woff2") format("woff2-variations");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/space-grotesk-latin-ext-wght.woff2") format("woff2-variations");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── Reset / base ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    background: var(--surface-50);
    color: var(--ink-900);
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.6;
    /* Footer stays at the bottom on short pages (main absorbs the free height). */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

body > main { flex: 1 0 auto; }

img, svg { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { font-family: var(--font-display); line-height: 1.2; }
/* Reflow 1.4.10: long compounds (de/sv/hu) must wrap at 320 px instead of
   widening the page. hyphens uses the lang attribute (html / fallback spans). */
body { overflow-wrap: break-word; } /* long legal/compound words wrap at 320 px */
h1, h2, h3, h4 { overflow-wrap: break-word; }
@media (max-width: 479.98px) {
    h1, h2, h3 { overflow-wrap: anywhere; hyphens: auto; }
    .prose { hyphens: auto; }
}
h1 { font-size: var(--text-3xl-fluid); font-weight: 700; line-height: 1.1; }
h2 { font-size: var(--text-2xl-fluid); font-weight: 600; }
h3 { font-size: var(--text-xl); font-weight: 600; line-height: 1.3; }

a { color: var(--blue-500); }
a:hover { color: var(--blue-700); }

:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 2px; border-radius: var(--radius-sm); }
/* Programmatic focus targets (main after the consent choice, dialog title):
   no ring around a whole region */
main:focus, main:focus-visible { outline: none; }
/* Dark surfaces: light cyan indicator (about 10:1 on navy-950) */
.surface-dark, .site-footer, .cta-band--accent, .cta-band--blue, .article-card--featured {
    --focus-color: var(--cyan-300);
    --focus-ring: 0 0 0 2px var(--navy-950), 0 0 0 4px var(--cyan-300);
}

ul, ol { padding-left: 1.2em; }

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: var(--space-md); top: calc(-1 * var(--space-3xl));
    z-index: 100;
    background: var(--surface-0); color: var(--blue-700);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.skip-link:focus { top: var(--space-md); }

/* ── Layout utilities ──────────────────────────────────────── */
.container, .container--narrow {
    margin-inline: auto;
    padding-inline: var(--gutter);
    width: 100%;
}
.container { max-width: calc(var(--container-max) + 2 * var(--gutter)); }
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }

.section { padding-block: var(--space-2xl); }
.section__heading { text-align: center; margin-bottom: var(--space-xl); }

@media (min-width: 1024px) {
    :root { --gutter: var(--space-xl); }
    .section { padding-block: var(--space-3xl); }
}

/* ── Buttons (components/buttons.md) ───────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-xs);
    border: 0; cursor: pointer; text-decoration: none;
    white-space: nowrap;
    max-width: 100%;
    font-family: var(--font-body); font-weight: 600;
    border-radius: var(--radius-md);
    transition: background var(--dur-base) var(--ease-standard),
                box-shadow var(--dur-base) var(--ease-standard),
                transform var(--dur-base) var(--ease-standard);
}
/* Reflow 1.4.10: on phones long labels (en/sv/es/hu) wrap instead of
   pushing the page wider than 320 px */
@media (max-width: 479.98px) { .btn { white-space: normal; text-align: center; } }
.btn--lg { min-height: 52px; padding-inline: var(--space-lg); font-size: var(--text-lg); }
.btn--md { min-height: 44px; padding-inline: var(--space-md); font-size: var(--text-md); }
.btn--sm { min-height: 36px; padding-inline: var(--space-sm); font-size: var(--text-sm); }

.btn--primary { background: var(--accent-500); color: var(--surface-0); }
.btn--primary:hover { background: var(--accent-600); color: var(--surface-0); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn--primary:active { background: var(--accent-600); transform: none; }

.btn--secondary {
    background: transparent; color: var(--blue-700);
    border: 1.5px solid var(--blue-500);
}
.btn--secondary:hover { background: var(--blue-100); color: var(--blue-700); box-shadow: var(--shadow-md); transform: translateY(-1px); }

.btn--link { background: none; color: var(--blue-500); padding-inline: var(--space-xs); }
.btn--link:hover { text-decoration: underline; color: var(--blue-700); }

.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }
.btn:disabled { background: var(--line-200); color: var(--ink-400); box-shadow: none; cursor: not-allowed; }

/* ── Site header (components/site-header.md) ───────────────── */
.site-header {
    position: sticky; top: 0; z-index: 40;
    background: var(--surface-0);
    transition: box-shadow var(--dur-base) var(--ease-standard);
}
.site-header.is-scrolled { box-shadow: var(--shadow-lg); border-bottom: 1px solid var(--line-200); }

.site-header__inner {
    display: flex; align-items: center; gap: var(--space-md);
    min-height: 64px; /* component spec: 64 mobile / 72 desktop */
}

.site-header__logo { display: flex; align-items: center; gap: var(--space-xs); text-decoration: none; margin-right: auto; }
/* Official lockup without slogan (illegible at header size); slogan and
   "powered by" live in the footer. */
.site-header__logo-img { display: block; height: 40px; width: auto; flex-shrink: 0; }
@media (min-width: 1180px) { .site-header__logo-img { height: 46px; } }

.site-header__nav { display: flex; list-style: none; padding: 0; gap: var(--space-lg); }
.site-header__nav a { color: var(--ink-900); text-decoration: none; font-size: var(--text-sm); font-weight: 500; }
.site-header__nav a:hover { color: var(--blue-700); }

.nav-dropdown { position: relative; }
.nav-dropdown summary {
    cursor: pointer; list-style: none;
    font-size: var(--text-sm); font-weight: 500;
}
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::after { content: " ▾"; font-size: var(--text-2xs); color: var(--ink-400); }
.nav-dropdown__list { list-style: none; padding: var(--space-xs) 0; }
.nav-dropdown__list a {
    display: flex; align-items: center; gap: var(--space-sm);
    width: 100%; box-sizing: border-box;
    padding: var(--space-xs) var(--space-md); white-space: nowrap;
}
/* compact icon circle: 40px tile, 20px glyph (tokens stay for the big tiles) */
.nav-dropdown__list .nav-dropdown__icon { width: 40px; height: 40px; }
.nav-dropdown__list .nav-dropdown__icon > .icon { width: 20px; height: 20px; }
.nav-dropdown__text { display: flex; flex-direction: column; min-width: 0; }
.nav-dropdown__desc { color: var(--ink-600); font-size: var(--text-xs); font-weight: 400; line-height: 1.35; }
.nav-dropdown__list a:hover,
.nav-dropdown__list a:focus-visible { background: var(--blue-100); }
.nav-dropdown__list a:hover .nav-dropdown__label,
.nav-dropdown__list a:focus-visible .nav-dropdown__label { color: var(--blue-700); }
/* on the tinted hover row the icon circle switches to white so it stays visible */
.nav-dropdown__list a:hover .nav-dropdown__icon,
.nav-dropdown__list a:focus-visible .nav-dropdown__icon { background: var(--surface-0); }

.site-header__actions { display: flex; align-items: center; gap: var(--space-sm); }

/* Language menu (components/lang-menu.php): native <details> dropdown */
.lang-menu { position: relative; }
.lang-menu__summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: var(--space-2xs);
    min-height: 36px; padding: var(--space-2xs) var(--space-xs);
    border-radius: var(--radius-sm);
    color: var(--ink-600); font-size: var(--text-2xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
}
.lang-menu__summary::-webkit-details-marker { display: none; }
.lang-menu__summary::after { content: "▾"; font-size: var(--text-2xs); color: var(--ink-400); }
.lang-menu__summary:hover,
.lang-menu__details[open] > .lang-menu__summary { background: var(--blue-100); color: var(--blue-700); }
.lang-menu__list {
    list-style: none; margin: 0; padding: var(--space-xs) 0;
    position: absolute; top: calc(100% + var(--space-2xs)); right: 0; z-index: 45;
    min-width: 160px;
    background: var(--surface-0);
    border: 1px solid var(--line-200); border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}
.lang-menu__list a {
    display: block; width: 100%; box-sizing: border-box; padding: var(--space-xs) var(--space-md);
    color: var(--ink-900); font-size: var(--text-sm); text-decoration: none; white-space: nowrap;
}
.lang-menu__list a:hover,
.lang-menu__list a:focus-visible { background: var(--blue-100); }
.lang-menu__list a[aria-current="true"] { color: var(--blue-700); font-weight: 600; }

/* Mobile: hamburger drawer; the primary CTA STAYS in the bar (spec) */
.site-header__toggle {
    order: 3;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    background: none; border: 0; cursor: pointer;
}
.site-header__toggle-icon,
.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
    content: ""; display: block;
    width: 20px; height: 2px; background: var(--ink-900);
    position: relative;
    transition: transform var(--dur-base) var(--ease-standard);
}
.site-header__toggle-icon::before { position: absolute; top: -6px; }
.site-header__toggle-icon::after { position: absolute; top: 6px; }
body.nav-open .site-header__toggle-icon { background: transparent; }
body.nav-open .site-header__toggle-icon::before { transform: translateY(6px) rotate(45deg); }
body.nav-open .site-header__toggle-icon::after { transform: translateY(-6px) rotate(-45deg); }

.site-header__cta--bar { order: 2; }
/* Trial off: "Demo vereinbaren" is longer than "Demo starten"; on phones the bar
   button gets a tighter padding and the small size so it stays on one line */
@media (max-width: 479.98px) { .site-header__cta--compact { padding-inline: var(--space-sm); font-size: var(--text-sm); } }

.site-header__panel {
    display: none;
    position: fixed; inset: 64px 0 0 0; z-index: 39;
    background: var(--surface-0);
    padding: var(--space-lg) var(--gutter) var(--space-2xl);
    overflow-y: auto;
}
body.nav-open .site-header__panel { display: block; }
body.nav-open { overflow: hidden; }

.site-header__panel .site-header__nav { flex-direction: column; gap: var(--space-md); }
.site-header__panel .site-header__nav > li { border-bottom: 1px solid var(--line-200); padding-bottom: var(--space-md); }
.site-header__panel .site-header__nav a { font-size: var(--text-lg); }
.site-header__panel .nav-dropdown summary { font-size: var(--text-lg); }
/* drawer: descriptions would make the list too long */
.site-header__panel .nav-dropdown__desc { display: none; }
.site-header__panel .nav-dropdown__list { padding-top: var(--space-sm); }
.site-header__panel .nav-dropdown__list a { font-size: var(--text-md, 1rem); }
.site-header__panel .site-header__actions {
    flex-direction: column; align-items: stretch;
    gap: var(--space-md); margin-top: var(--space-lg);
}
.site-header__panel .lang-menu__summary { min-height: 44px; font-size: var(--text-sm); }
.site-header__panel .lang-menu__list { position: static; box-shadow: none; border: 0; padding: var(--space-2xs) 0 0; }

/* Header breakpoint: the full nav (7 items + language menu + 2 buttons) only
   fits on one line from ~1180px; below that the drawer stays. Keep in sync
   with HEADER_DESKTOP_MQ in assets/js/main.js. */
@media (min-width: 1180px) {
    .site-header__inner { min-height: 72px; }
    .site-header__toggle { display: none; }
    .site-header__cta--bar { display: none; }
    .site-header__panel {
        display: flex; position: static; inset: auto;
        align-items: center; gap: var(--space-lg);
        padding: 0; overflow: visible; background: none;
    }
    /* undo the mobile-drawer stacking */
    .site-header__panel .site-header__nav { flex-direction: row; align-items: center; gap: var(--space-lg); }
    .site-header__panel .site-header__nav > li { border-bottom: 0; padding-bottom: 0; display: flex; align-items: center; }
    /* identical flex boxes for links AND the dropdown summary — the
       list-item/inline baseline mix left "Produkt" sitting ~1.5px high */
    .site-header__panel .site-header__nav a,
    .site-header__panel .nav-dropdown summary {
        font-size: var(--text-sm);
        display: inline-flex; align-items: center;
        line-height: 1.2;
    }
    .site-header__panel .site-header__actions { flex-direction: row; align-items: center; margin: 0; }
    .site-header__panel .lang-menu__summary { min-height: 36px; font-size: var(--text-2xs); }
    .site-header__panel .lang-menu__list {
        position: absolute; border: 1px solid var(--line-200); padding: var(--space-xs) 0;
        box-shadow: var(--shadow-lg);
    }
    /* 8 top-level entries incl. Blog: labels never wrap (hu/es are the longest) */
    .site-header__panel .site-header__nav a,
    .site-header__panel .nav-dropdown summary { white-space: nowrap; }
    .site-header__panel .nav-dropdown__desc { display: block; }
    .nav-dropdown__list.nav-dropdown__list--rich { min-width: 340px; }
    .nav-dropdown__list {
        position: absolute; top: 100%; left: calc(-1 * var(--space-md));
        min-width: 240px;
        overflow: hidden; /* row highlight follows the rounded panel corners */
        background: var(--surface-0);
        border: 1px solid var(--line-200); border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
    }
}

/* Narrow desktop (1180-1279px): one gap step tighter so the five-entry nav,
   language menu and both buttons still fit on one line in every locale */
@media (min-width: 1180px) and (max-width: 1279px) {
    .site-header__panel { gap: var(--space-md); }
    .site-header__panel .site-header__nav { gap: var(--space-md); }
    .site-header__panel .site-header__actions { gap: var(--space-xs); }
}

/* ── Icon (components/icon.php) ────────────────────────────── */
/* color comes from the consumer via currentColor */
.icon { flex: none; }

/* ── Reassurance chips (components/reassurance-chips.md) ───── */
.reassure-chips {
    display: flex; flex-wrap: wrap; gap: var(--space-md);
    list-style: none; padding: 0;
    font-size: var(--text-sm); color: var(--ink-600);
}
.reassure-chips li { display: inline-flex; align-items: center; gap: var(--space-2xs); }
.reassure-chips__check { display: inline-flex; color: var(--accent-500); }

/* ── Trust strip (components/trust-strip.md) ───────────────── */
.trust-strip { background: var(--surface-0); padding-block: var(--space-xl); text-align: center; }
.trust-strip__eyebrow { font-size: var(--text-sm); color: var(--ink-600); margin-bottom: var(--space-md); }
.trust-strip__logos {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
    gap: var(--space-xl); list-style: none; padding: 0;
    margin-bottom: var(--space-md);
}
.trust-strip__logo img {
    /* dual caps balance visual mass: wide wordmarks get limited by width,
       compact/tall marks by height — no per-logo tuning needed */
    height: auto; width: auto;
    max-height: 48px; max-width: 150px;
}
.trust-strip__logo--endorsement {
    font-family: var(--font-display); font-weight: 500; font-size: var(--text-sm);
    color: var(--ink-600);
}
.trust-strip__badges {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--space-sm); list-style: none; padding: 0;
}
.trust-strip__badges li {
    display: inline-flex; align-items: center; gap: var(--space-2xs);
    font-size: var(--text-sm); color: var(--ink-600);
    border: 1px solid var(--line-200); border-radius: var(--radius-full);
    padding: var(--space-2xs) var(--space-sm);
}
.trust-strip__badge-icon { display: inline-flex; color: var(--blue-500); }

/* ── Logo tint (shared by every partner/customer logo list) ──
   Grey by default on every device. Colour on hover / keyboard focus where a
   fine pointer can hover; on touch only while a linked logo is tapped
   (:active/:focus) or, for unlinked logos, after a tap (main.js toggles
   .is-coloured, one at a time, tapping elsewhere resets). Per-list sizing stays
   with the list; a list may tune the resting opacity via --logo-tint-opacity. */
.logo-tint { filter: grayscale(1); opacity: var(--logo-tint-opacity, .7); transition: filter .2s ease, opacity .2s ease; }
.logo-tint.is-coloured,
a:active > .logo-tint,
a:focus-visible > .logo-tint { filter: none; opacity: 1; }
@media (hover: none), (pointer: coarse) {
    a:focus > .logo-tint { filter: none; opacity: 1; }
}
@media (hover: hover) and (pointer: fine) {
    .logo-tint:hover, a:hover > .logo-tint { filter: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .logo-tint { transition: none; }
}

/* Quiet variant (home, below the proof): plain heading, small greyscale logos
   that regain colour on hover, borderless badges */
.trust-strip--quiet { padding-block: var(--space-2xl); }
.trust-strip--quiet .trust-strip__eyebrow { font-size: var(--text-xs); letter-spacing: .04em; margin-bottom: var(--space-lg); }
.trust-strip--quiet .trust-strip__logos { gap: var(--space-lg) var(--space-xl); align-items: center; margin-bottom: var(--space-lg); }
.trust-strip--quiet .trust-strip__logo img { max-height: 32px; max-width: 110px; --logo-tint-opacity: .55; }
.trust-strip--quiet .trust-strip__logo--endorsement { font-size: var(--text-xs); }
.trust-strip--quiet .trust-strip__badges li { border-color: transparent; font-size: var(--text-xs); }

/* ── Dark surface treatment (premium cyber look) ───────────────
   One shared recipe for heros + conversion bands: deep navy gradient
   with a restrained cyan/green glow. Apply via .surface-dark. */
.surface-dark {
    background:
        radial-gradient(56rem 32rem at 85% 12%, rgba(49, 187, 216, .13), transparent 60%),
        radial-gradient(44rem 26rem at 8% 95%, rgba(15, 129, 92, .10), transparent 55%),
        linear-gradient(160deg, #0C2036 0%, var(--navy-950) 78%);
    color: var(--ink-inverse);
}
.surface-dark h1, .surface-dark h2, .surface-dark h3 { color: var(--surface-0); }
.surface-dark .reassure-chips { color: var(--ink-inverse-muted); }
.surface-dark .reassure-chips__check { color: var(--accent-300); }
/* Quieter variant for the hero: smaller, tighter, hairline weight */
.reassure-chips--quiet { font-size: var(--text-xs); gap: var(--space-xs) var(--space-md); }
.surface-dark .reassure-chips--quiet { color: var(--ink-inverse-muted); opacity: .9; }
.reassure-chips--quiet .reassure-chips__check svg { width: 12px; height: 12px; }
/* :not(.btn) — plain links only; buttons keep their own ink (the
   unscoped rule beat .btn--primary and made cyan-on-green, AA fail) */
.surface-dark a:not(.btn) { color: var(--cyan-300); }
.surface-dark a:not(.btn):hover { color: var(--surface-0); }
.surface-dark .btn--secondary {
    color: var(--ink-inverse);
    border-color: rgba(159, 177, 196, .45);
    background: rgba(230, 237, 245, .04);
}
.surface-dark .btn--secondary:hover,
.surface-dark .btn--secondary:focus-visible {
    background: rgba(230, 237, 245, .10);
    color: var(--surface-0);
    border-color: rgba(230, 237, 245, .6);
}
.surface-dark .btn--primary { box-shadow: 0 0 0 1px rgba(52, 211, 153, .25), 0 8px 24px rgba(6, 12, 24, .5); }
/* Eyebrow pill on dark: cyan-tinted glass */
.eyebrow-dark {
    display: inline-block;
    background: rgba(49, 187, 216, .13);
    border: 1px solid rgba(49, 187, 216, .3);
    color: var(--cyan-300);
    font-size: var(--text-sm); font-weight: 600;
    line-height: 1.5;
    /* radius-md, not full: long eyebrows wrap to 2 lines and a pill
       shape looks cramped around multi-line text */
    border-radius: var(--radius-md);
    padding: var(--space-2xs) var(--space-sm);
}

/* ── Home: hero (dark) ─────────────────────────────────────── */
/* The section is a plain navy band; the stage carries the dark surface
   gradient so it travels with the sticky stage during the scroll effect. */
.home-hero { background: var(--navy-950); }
.home-hero__stage { padding-block: var(--space-2xl) var(--space-3xl); }
.home-hero__grid { display: grid; gap: var(--space-2xl); }
/* Short one-line pill link to the NIS2 page, quiet: no box, hairline border */
.home-hero__eyebrow {
    display: inline-flex; align-items: center; gap: var(--space-xs);
    margin-bottom: var(--space-lg);
    padding: var(--space-2xs) var(--space-md);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-full);
    color: var(--cyan-300);
    font-size: var(--text-sm); font-weight: 500; line-height: 1.5;
    text-decoration: none;
}
.home-hero__eyebrow:hover { border-color: rgba(49, 187, 216, .5); background: rgba(49, 187, 216, .08); }
.home-hero__headline { margin-bottom: var(--space-md); line-height: 1.15; }
.home-hero__subhead { font-size: var(--text-lg); line-height: 1.65; max-width: 34rem; color: var(--ink-inverse-muted); margin-bottom: var(--space-xl); }
.home-hero__cta-group { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.home-hero__visual svg { width: 100%; height: auto; }
.home-hero__visual img { width: 100%; height: auto; }

/* Product frame: calm browser chrome around a real screenshot */
.product-frame {
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--blue-900);
    box-shadow: 0 24px 64px rgba(6, 12, 24, .55), 0 0 48px rgba(49, 187, 216, .10);
}
.product-frame__bar {
    display: flex; align-items: center; gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-sm);
    border-bottom: 1px solid var(--line-dark);
    background: rgba(159, 177, 196, .06);
}
.product-frame__bar span {
    width: 9px; height: 9px; border-radius: var(--radius-full);
    background: rgba(159, 177, 196, .28);
}
.product-frame img { display: block; width: 100%; height: auto; }

@media (min-width: 1024px) {
    .home-hero__stage { padding-block: var(--space-3xl) var(--space-2xl); }
    .home-hero__grid { grid-template-columns: 1.1fr 1fr; align-items: center; }
}

/* Scroll-driven hero (class + custom properties set by pages/home-hero.js,
   desktop only, never with reduced motion). The section grows by the scroll
   distance (::after spacer) while the stage sticks below the header; the
   copy and the dashboard are transformed from their large, centered start
   pose back to their real two-column layout. --hc/--hx/--hy run 0..1
   (eased; --hcy = copy vertical + scale, --hf chips, --hs scroll cue),
   --c-* / --v-* hold the start offsets in px and start scales. */
.home-hero--scroll { overflow: clip; }
.home-hero--scroll::after { content: ""; display: block; height: var(--hero-dist, 70vh); }
/* The stage sticks right below the header from the start (no pre-scroll),
   so the copy never moves up under it (see home-hero.js). */
.home-hero--scroll .home-hero__stage { position: sticky; top: var(--hero-top, 72px); }
/* The stage's gradient spans the whole visible viewport while it is stuck,
   so there is no seam where the stage ends and the spacer begins (the
   section's overflow clip cuts it at the section bottom afterwards). */
.home-hero--scroll .home-hero__stage::before {
    content: ""; position: absolute; inset: 0 0 auto 0; z-index: -1;
    height: max(100%, calc(100vh - var(--hero-top, 72px)));
    background: inherit;
}
.home-hero--scroll .home-hero__copy {
    position: relative; z-index: 1;
    transform-origin: 0 0;
    transform:
        translate(calc(var(--c-x, 0) * (1 - var(--hc, 1)) * 1px), calc(var(--c-y, 0) * (1 - var(--hcy, 1)) * 1px))
        scale(calc(var(--c-s, 1) + (1 - var(--c-s, 1)) * var(--hcy, 1)));
}
.home-hero--scroll .home-hero__visual {
    transform-origin: 0 0;
    transform:
        translate(calc(var(--v-x, 0) * (1 - var(--hx, 1)) * 1px), calc(var(--v-y, 0) * (1 - var(--hy, 1)) * 1px))
        scale(calc(var(--v-s, 1) + (1 - var(--v-s, 1)) * var(--hx, 1)));
}
.home-hero--scroll .reassure-chips { opacity: var(--hf, 1); }

/* Scroll cue: bottom center of the viewport in the start pose, fades out as
   soon as the effect starts (--hs). Hidden whenever there is no effect. */
.home-hero__scroll-hint { display: none; }
.home-hero--scroll .home-hero__scroll-hint {
    position: absolute; z-index: 2; left: 50%;
    top: calc(100vh - var(--hero-top, 72px) - 76px);
    display: flex; align-items: center; gap: var(--space-xs);
    padding: var(--space-2xs) var(--space-md) var(--space-2xs) var(--space-sm);
    border: 1px solid var(--line-dark);
    border-radius: var(--radius-full);
    background: rgba(6, 12, 24, .92);
    box-shadow: 0 8px 24px rgba(6, 12, 24, .45);
    color: var(--ink-inverse);
    font-size: var(--text-sm); font-weight: 500; line-height: 1.5;
    opacity: var(--hs, 0);
    transform: translateX(-50%);
    pointer-events: none;
}
.home-hero__scroll-mouse {
    position: relative; flex: none;
    width: 16px; height: 24px;
    border: 1.5px solid currentColor; border-radius: 8px;
}
.home-hero__scroll-mouse::after {
    content: ""; position: absolute; left: 50%; top: 5px;
    width: 2px; height: 5px; margin-left: -1px;
    border-radius: 1px; background: var(--cyan-300);
    animation: home-hero-scroll-cue 1.8s var(--ease-standard) infinite;
}
@keyframes home-hero-scroll-cue {
    0% { transform: translateY(0); opacity: 1; }
    70% { transform: translateY(7px); opacity: 0; }
    100% { transform: translateY(0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .home-hero__scroll-mouse::after { animation: none; }
}

/* Hero visual placeholder (Phase-6 asset pending) */
.hv-bg { fill: var(--blue-100); }
.hv-card { fill: var(--surface-0); }
.hv-media { fill: var(--blue-100); }
.hv-avatar { fill: var(--blue-500); opacity: .85; }
.hv-line { fill: var(--line-200); }
.hv-line--lg { fill: var(--ink-400); }
.hv-progress-track { fill: var(--line-200); }
.hv-progress { fill: var(--accent-500); }
.hv-check-bg { fill: var(--accent-100); }
.hv-check { stroke: var(--accent-500); }

/* ── Home: NIS2 band ───────────────────────────────────────── */
.home-nis2 { background: var(--blue-100); padding-block: var(--space-2xl); text-align: center; }
.home-nis2 h2 { margin-bottom: var(--space-md); }
.home-nis2 p { color: var(--ink-600); }
.home-nis2 a { color: var(--blue-700); } /* blue-500 is only 4.15:1 on blue-100 */
/* Decorative "three senders, one question" flow. Static default is the final
   state. JS adds .is-armed (hidden start) then .is-playing (one-shot run). */
.home-nis2__grid { display: grid; gap: var(--space-xl); grid-template-columns: minmax(0, 1fr); align-items: center; }
.home-nis2__visual { display: flex; flex-direction: column; gap: var(--space-sm); width: 100%; max-width: 440px; margin-inline: auto; text-align: left; }
@media (min-width: 1024px) {
    .home-nis2 { text-align: left; }
    .home-nis2__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); }
}
.nis2-card {
    position: relative;
    padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-md);
    background: var(--surface-0); border: 1px solid var(--line-200); border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.nis2-card__label { display: flex; align-items: center; gap: var(--space-2xs); margin: 0; font-size: var(--text-xs); font-weight: 600; color: var(--blue-700); }
.home-nis2 .nis2-card__title { margin: var(--space-3xs) 0 var(--space-2xs); font-size: var(--text-sm); color: var(--ink-900); }
.home-nis2 .nis2-card__line { margin: 0; font-size: var(--text-sm); }
.nis2-card__mark { /* same marker on all three cards, 14:1. Gradient so the sweep can animate. */
    padding: 1px var(--space-2xs); color: var(--ink-900); border-radius: var(--radius-sm);
    background: linear-gradient(#FFE9A8, #FFE9A8) no-repeat 0 0 / 100% 100%;
    box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
.nis2-card__check {
    position: absolute; top: var(--space-sm); right: var(--space-sm);
    display: grid; place-items: center; width: 24px; height: 24px; /* raw px: check badge */
    border-radius: var(--radius-full); background: var(--accent-500); color: #fff;
}
/* Answer line inside each request: plain status text with a document icon, no control styling */
.home-nis2 .nis2-card__att {
    display: flex; align-items: center; gap: var(--space-2xs); margin: var(--space-xs) 0 0;
    font-size: var(--text-xs); font-weight: 600; color: var(--accent-600);
}
.nis2-card__att-doc { flex: none; position: relative; z-index: 2; }
.nis2-doc__page { fill: var(--surface-0); stroke: var(--ink-400); stroke-width: 1.5; stroke-linejoin: round; }
.nis2-doc__fold { fill: var(--surface-50); stroke: var(--ink-400); stroke-width: 1.5; stroke-linejoin: round; }
.nis2-doc__ink { fill: none; stroke: var(--line-200); stroke-width: 1.5; stroke-linecap: round; }
.nis2-card__att-doc .nis2-doc__page, .nis2-card__att-doc .nis2-doc__fold { stroke: var(--accent-600); stroke-width: 1.3; }
.nis2-card__att-doc .nis2-doc__ink { stroke: var(--accent-500); stroke-width: 1.3; }
/* The proof itself: a sheet of paper with a name list, ticks and a seal, its file name as a caption */
.nis2-doc { display: flex; flex-direction: column; align-items: center; gap: var(--space-2xs); margin-top: var(--space-xs); }
.nis2-doc__sheet { display: block; overflow: visible; filter: drop-shadow(0 4px 8px rgba(16, 42, 67, .12)); }
.nis2-doc__sheet .nis2-doc__page, .nis2-doc__sheet .nis2-doc__fold { stroke: var(--line-200); }
.nis2-doc__title { fill: var(--blue-700); }
.nis2-doc__text { fill: var(--line-200); }
.nis2-doc__tick-bg { fill: var(--accent-500); }
.nis2-doc__tick, .nis2-doc__seal-tick { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nis2-doc__seal-ring { fill: var(--blue-500); }
.nis2-doc__seal-tick { stroke-width: 2.2; }
.nis2-doc__seal-outer { fill: var(--surface-0); stroke: var(--blue-500); stroke-width: 1.2; stroke-dasharray: 2.2 1.8; }
.nis2-doc__type rect { fill: #C62828; }
.nis2-doc__type text { fill: #fff; font: 700 8px/1 var(--font-body); letter-spacing: .04em; }
.nis2-doc__row, .nis2-doc__seal { transform-box: fill-box; transform-origin: center; }
.home-nis2 .nis2-doc__name { margin: 0; font-size: var(--text-xs); font-weight: 600; color: var(--ink-600); }

/* Timeline (JS adds .is-armed at load, .is-playing about 1.2s after the
   visual is half visible). The three requests stay readable while waiting. */
.nis2-flow.is-armed .nis2-card__mark { background-size: 0 100%; }
.nis2-flow.is-armed .nis2-doc,
.nis2-flow.is-armed .nis2-doc__row,
.nis2-flow.is-armed .nis2-doc__seal,
.nis2-flow.is-armed .nis2-card__att-doc,
.nis2-flow.is-armed .nis2-card__att-text { opacity: 0; }
.nis2-flow.is-armed .nis2-card__check { opacity: 0; transform: scale(.3); }
.nis2-flow.is-playing .nis2-card__mark { animation: nis2-mark .5s ease-out both; }
.nis2-flow.is-playing .nis2-card--law .nis2-card__mark { animation-delay: .3s; }
.nis2-flow.is-playing .nis2-card--cust .nis2-card__mark { animation-delay: .6s; }
.nis2-flow.is-playing .nis2-doc { animation: nis2-in .5s ease-out 1.2s both; }
.nis2-flow.is-playing .nis2-doc__row { animation: nis2-pop .35s cubic-bezier(.3, 1.6, .5, 1) 1.6s both; }
.nis2-flow.is-playing .nis2-doc__row--2 { animation-delay: 1.8s; }
.nis2-flow.is-playing .nis2-doc__row--3 { animation-delay: 2s; }
.nis2-flow.is-playing .nis2-doc__seal { animation: nis2-stamp .45s cubic-bezier(.2, .9, .3, 1.2) 2.3s both; }
/* A copy of the sheet travels from the document into each request (--fx/--fy set by JS) */
.nis2-flow.is-playing .nis2-card__att-doc { animation: nis2-fly .7s cubic-bezier(.45, 0, .2, 1) 3s both; }
.nis2-flow.is-playing .nis2-card--law .nis2-card__att-doc { animation-delay: 3.35s; }
.nis2-flow.is-playing .nis2-card--ins .nis2-card__att-doc { animation-delay: 3.7s; }
.nis2-flow.is-playing .nis2-card__att-text { animation: nis2-fade .35s ease-out 3.6s both; }
.nis2-flow.is-playing .nis2-card--law .nis2-card__att-text { animation-delay: 3.95s; }
.nis2-flow.is-playing .nis2-card--ins .nis2-card__att-text { animation-delay: 4.3s; }
.nis2-flow.is-playing .nis2-card__check { animation: nis2-pop .4s cubic-bezier(.3, 1.6, .5, 1) 3.65s both; }
.nis2-flow.is-playing .nis2-card--law .nis2-card__check { animation-delay: 4s; }
.nis2-flow.is-playing .nis2-card--ins .nis2-card__check { animation-delay: 4.35s; }
@keyframes nis2-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
}
@keyframes nis2-pop {
    from { opacity: 0; transform: scale(.3); }
    to { opacity: 1; transform: none; }
}
@keyframes nis2-mark {
    from { background-size: 0 100%; }
    to { background-size: 100% 100%; }
}
@keyframes nis2-stamp {
    0% { opacity: 0; transform: scale(2.2) rotate(-18deg); }
    70% { opacity: 1; transform: scale(.92) rotate(0); }
    100% { opacity: 1; transform: none; }
}
@keyframes nis2-fly {
    0% { opacity: 0; transform: translate(var(--fx, 0px), var(--fy, 0px)) scale(2.4); }
    15% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}
@keyframes nis2-fade {
    from { opacity: 0; transform: translateX(-6px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .nis2-flow .nis2-doc, .nis2-flow .nis2-doc__row, .nis2-flow .nis2-doc__seal, .nis2-flow .nis2-card__att-doc,
    .nis2-flow .nis2-card__att-text, .nis2-flow .nis2-card__check { opacity: 1; transform: none; animation: none; }
    .nis2-flow .nis2-card__mark { background-size: 100% 100%; animation: none; }
}

/* ── Pillar cards (components/pillar-card.md) ──────────────── */
.pillar-grid {
    display: grid; gap: var(--space-lg);
    list-style: none; padding: 0;
}
@media (min-width: 768px) { .pillar-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pillar-grid { grid-template-columns: repeat(3, 1fr); } }

.pillar-card {
    position: relative;
    background: var(--surface-0);
    border: 1px solid var(--line-200); border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
    transition: box-shadow var(--dur-base) var(--ease-standard),
                transform var(--dur-base) var(--ease-standard);
}
.pillar-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.pillar-card--emphasized { border-color: var(--accent-500); } /* courses = differentiator */

.pillar-card__icon {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: var(--blue-100); color: var(--blue-700);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}
.pillar-card--emphasized .pillar-card__icon {
    background: var(--accent-100); color: var(--accent-600);
}
.pillar-card__headline { margin-bottom: var(--space-xs); font-family: var(--font-body); }
.pillar-card__headline a { color: var(--ink-900); text-decoration: none; }
/* whole-card click target via a single stretched link (spec a11y note) */
.pillar-card__headline a::after { content: ""; position: absolute; inset: 0; }
.pillar-card__teaser { color: var(--ink-600); margin-bottom: var(--space-md); }
.pillar-card__link { color: var(--blue-500); font-weight: 600; font-size: var(--text-sm); }

/* ── Home: proof (show, don't tell) ────────────────────────── */
.home-proof { background: var(--surface-0); }
.home-proof__grid { display: grid; gap: var(--space-xl); align-items: center; }
.home-proof__copy h2 { margin-bottom: var(--space-md); }
.home-proof__copy p { color: var(--ink-600); margin-bottom: var(--space-lg); }
.home-proof__visual svg { width: 100%; height: auto; border-radius: var(--radius-lg); }
.home-proof__visual img { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

@media (min-width: 1024px) {
    .home-proof__grid { grid-template-columns: 1fr 1.1fr; }
}

/* ── Icon circle: tinted round tile for a glyph (steps, tiles, guide) ── */
.icon-circle {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: var(--icon-circle); height: var(--icon-circle);
    background: var(--blue-100); color: var(--blue-700);
    border-radius: var(--radius-full);
}
.icon-circle > .icon { width: var(--icon-glyph); height: var(--icon-glyph); }
.icon-circle--lg { width: calc(var(--icon-circle) + 16px); height: calc(var(--icon-circle) + 16px); }
.icon-circle--lg > .icon { width: calc(var(--icon-glyph) + 4px); height: calc(var(--icon-glyph) + 4px); }

/* ── Steps (components/steps.php): icon circle + number badge + connector ── */
.steps {
    display: grid; gap: var(--space-lg);
    list-style: none; padding: 0; margin: 0;
}
.steps__item {
    position: relative;
    display: grid; grid-template-columns: var(--icon-circle) minmax(0, 1fr);
    column-gap: var(--space-md); align-items: start;
}
.steps__num {
    position: absolute; top: -4px; right: -4px;
    display: flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; padding-inline: var(--space-2xs);
    background: var(--ink-900); color: var(--surface-0);
    border: 2px solid var(--surface-0); border-radius: var(--radius-full);
    font-family: var(--font-display); font-size: var(--text-2xs); font-weight: 700; line-height: 1;
}
.steps__title { font-size: var(--text-lg); margin-bottom: var(--space-2xs); }
.steps__text { color: var(--ink-600); margin: 0; }
.steps__body { padding-top: var(--space-2xs); }
/* mobile: vertical connector under the circle */
.steps__item:not(:last-child)::after {
    content: ""; position: absolute;
    left: calc(var(--icon-circle) / 2 - 1px); top: calc(var(--icon-circle) + var(--space-2xs));
    bottom: calc(var(--space-lg) * -1 + var(--space-2xs));
    width: 2px; background: var(--blue-100);
}
@media (min-width: 768px) {
    .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* desktop: circle above text, horizontal connector to the next step */
@media (min-width: 1024px) {
    .steps--3 .steps__item { display: block; }
    .steps--3 .steps__body { padding-top: var(--space-md); }
    .steps--3 .steps__item:not(:last-child)::after {
        left: calc(var(--icon-circle) + var(--space-xs)); right: calc(var(--space-lg) * -1 + var(--space-xs));
        top: calc(var(--icon-circle) / 2 - 1px); bottom: auto; width: auto; height: 2px;
    }
}
@media (min-width: 768px) {
    .steps--4 .steps__item { display: block; }
    .steps--4 .steps__body { padding-top: var(--space-md); }
    .steps--4 .steps__item:not(:last-child)::after {
        left: calc(var(--icon-circle) + var(--space-xs)); right: calc(var(--space-lg) * -1 + var(--space-xs));
        top: calc(var(--icon-circle) / 2 - 1px); bottom: auto; width: auto; height: 2px;
    }
}

/* ── FAQ accordion (components/accordion.md) ───────────────── */
.faq-item { border-bottom: 1px solid var(--line-200); }
.faq-item summary {
    cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; align-items: center;
    gap: var(--space-md);
    padding-block: var(--space-md);
    font-size: var(--text-lg); font-weight: 600;
    min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "▸"; color: var(--ink-400);
    transition: transform var(--dur-base) var(--ease-standard);
}
.faq-item[open] summary::after { transform: rotate(90deg); }
.faq-item > p {
    background: var(--surface-0); /* subtle panel bg per spec */
    color: var(--ink-600);
    padding: var(--space-md); margin-bottom: var(--space-md);
    border-radius: var(--radius-md);
}

/* ── CTA band (components/cta-band.md) ─────────────────────── */
.cta-band { padding-block: var(--space-2xl); text-align: center; }
/* accent + blue variants share the premium dark treatment (see .surface-dark) */
.cta-band--accent,
.cta-band--blue {
    background:
        radial-gradient(56rem 32rem at 50% 0%, rgba(49, 187, 216, .12), transparent 60%),
        linear-gradient(160deg, #0C2036 0%, var(--navy-950) 85%);
    color: var(--ink-inverse);
}
.cta-band--accent .cta-band__heading,
.cta-band--blue .cta-band__heading { color: var(--surface-0); }
.cta-band--accent .reassure-chips,
.cta-band--blue .reassure-chips { color: var(--ink-inverse-muted); }
.cta-band--accent .reassure-chips__check,
.cta-band--blue .reassure-chips__check { color: var(--accent-300); }
.cta-band--accent .btn--secondary,
.cta-band--blue .btn--secondary {
    color: var(--ink-inverse);
    border-color: rgba(159, 177, 196, .45);
    background: rgba(230, 237, 245, .04);
}
.cta-band--accent .btn--secondary:hover,
.cta-band--blue .btn--secondary:hover,
.cta-band--accent .btn--secondary:focus-visible,
.cta-band--blue .btn--secondary:focus-visible {
    background: rgba(230, 237, 245, .10);
    color: var(--surface-0);
    border-color: rgba(230, 237, 245, .6);
}
.cta-band--soft { background: var(--surface-50); }
.cta-band__heading { margin-bottom: var(--space-lg); }
.cta-band__actions {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--space-sm); margin-bottom: var(--space-md);
}
.cta-band .reassure-chips { justify-content: center; }

/* ── Site footer (components/site-footer.md, blue-900 anchor) ─ */
.site-footer { background: var(--blue-900); color: var(--surface-50); padding-top: var(--space-2xl); }
.site-footer a { color: var(--surface-50); text-decoration: none; }
.site-footer a:hover { color: var(--surface-0); text-decoration: underline; }

.site-footer__grid { display: grid; gap: var(--space-xl); padding-bottom: var(--space-xl); }
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) {
    .site-footer { padding-top: var(--space-3xl); }
    .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

.site-footer__wordmark {
    font-family: var(--font-display); font-weight: 700;
    font-size: var(--text-lg); letter-spacing: .06em;
    display: block;
}
.site-footer__logo { height: 72px; width: auto; max-width: 100%; margin-bottom: var(--space-2xs); }
@media (min-width: 768px) { .site-footer__logo { height: 92px; } }
.site-footer__endorsement { font-size: var(--text-2xs); color: var(--ink-400); }
.site-footer__mission { margin-top: var(--space-md); color: var(--line-200); font-size: var(--text-sm); }
.site-footer__social { display: flex; gap: var(--space-md); list-style: none; padding: 0; margin-top: var(--space-md); }

.site-footer__heading {
    font-family: var(--font-body); font-size: var(--text-sm);
    font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-400); margin-bottom: var(--space-md);
}
.site-footer__col ul { list-style: none; padding: 0; display: grid; gap: var(--space-xs); }
.site-footer__col a { font-size: var(--text-sm); }

.site-footer__cta {
    text-align: center;
    border-top: 1px solid rgba(226, 232, 240, .15); /* line-200 @ 15% on dark */
    padding-block: var(--space-xl);
}
.site-footer__cta h2 { color: var(--surface-0); margin-bottom: var(--space-lg); }

.site-footer__badges {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--space-sm); list-style: none; padding: 0;
    padding-bottom: var(--space-lg);
    font-size: var(--text-xs); color: var(--ink-400);
}

.site-footer__legal {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-md);
    border-top: 1px solid rgba(226, 232, 240, .15);
    padding-block: var(--space-md);
    font-size: var(--text-xs); color: var(--ink-400);
}
.site-footer__legal nav { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; }
.site-footer__legal a { color: var(--ink-400); font-size: var(--text-xs); }
.site-footer__consent-reopen {
    background: none; border: 0; cursor: pointer;
    color: var(--ink-400); font-size: var(--text-xs); font-family: var(--font-body);
    padding: 0; text-decoration: none;
}
.site-footer__consent-reopen:hover { color: var(--surface-0); text-decoration: underline; }
.lang-menu--footer .lang-menu__summary { color: var(--ink-400); }
.lang-menu--footer .lang-menu__details[open] > .lang-menu__summary,
.lang-menu--footer .lang-menu__summary:hover { background: rgba(232, 240, 251, .12); color: var(--surface-0); }
.lang-menu--footer .lang-menu__list { top: auto; bottom: calc(100% + var(--space-2xs)); }
/* the open list is a light panel inside the dark footer: undo the footer link colours */
.surface-dark .lang-menu__list a:not(.btn) { color: var(--ink-900); }
.surface-dark .lang-menu__list a:not(.btn):hover,
.surface-dark .lang-menu__list a:not(.btn):focus-visible { color: var(--blue-700); background: var(--blue-100); }
.surface-dark .lang-menu__list a[aria-current="true"] { color: var(--blue-700); }
/* The menu is always pinned to the right end of the legal row, also when the
   row wraps, so the list can open leftwards (right: 0) at every width without
   overflowing the viewport. */
.lang-menu--footer { margin-left: auto; }

/* ── Utility pages (placeholder / 404) ─────────────────────── */
.utility-page { text-align: center; min-height: 40vh; }
.utility-page h1 { margin-bottom: var(--space-md); }
.utility-page p { color: var(--ink-600); margin-bottom: var(--space-lg); }
.utility-page__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); }

/* ── Cookie consent (components/cookie-consent.md) ─────────── */
.consent-banner {
    position: fixed; inset: auto 0 0 0; z-index: 50;
    background: var(--surface-0);
    border-top: 1px solid var(--line-200);
    box-shadow: var(--shadow-lg);
    padding: var(--space-lg) 0;
    /* 400 % zoom / short phones: never cover the whole viewport, scroll inside */
    max-height: 60vh; max-height: 60dvh; overflow-y: auto;
}
.consent-banner__inner { display: grid; gap: var(--space-md); }
.consent-banner__text { font-size: var(--text-sm); color: var(--ink-600); }
.consent-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
@media (min-width: 768px) {
    .consent-banner__inner { grid-template-columns: 1fr auto; align-items: center; }
}

.consent-settings {
    margin: auto; /* restore UA dialog centering (killed by the * reset) */
    border: 0; border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: var(--space-2xl);
    width: min(560px, calc(100vw - 2 * var(--space-md)));
    max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
    overflow-x: hidden; overflow-y: auto;
}
@media (max-width: 479.98px) {
    .consent-settings { padding: var(--space-md); }
    .consent-settings__cat { flex-wrap: wrap; }
}
.consent-settings::backdrop { background: rgba(19, 32, 46, .5); }
.consent-settings__head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--space-lg);
}
.consent-settings__close {
    background: none; border: 0; cursor: pointer;
    font-size: var(--text-xl); color: var(--ink-600); /* 1.4.11: ink-400 was 2.98:1 */
    width: 44px; height: 44px; border-radius: var(--radius-md);
}
.consent-settings__cats { list-style: none; padding: 0; display: grid; gap: var(--space-md); margin-bottom: var(--space-lg); }
.consent-settings__cat {
    display: flex; justify-content: space-between; align-items: center; gap: var(--space-md);
    border: 1px solid var(--line-200); border-radius: var(--radius-md);
    padding: var(--space-md);
}
.consent-settings__label { font-weight: 600; }
.consent-settings__purpose { font-size: var(--text-sm); color: var(--ink-600); }
.consent-settings__locked { font-size: var(--text-xs); color: var(--ink-600); }
.consent-settings__toggle { width: 24px; height: 24px; accent-color: var(--accent-500); flex-shrink: 0; }
.consent-settings__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); justify-content: flex-end; }

/* == Shared components: phase-2 build == */
/* Partials in templates/components/: feature-row, stat-tile, plan-card,
   compliance-matrix, download-card, reference-card, prose, breadcrumb,
   team-card, form-field. Tokens only; raw px only where documented. */

/* ── Feature row (components/feature-row.md) ───────────────── */
.feature-rows { display: grid; gap: var(--space-2xl); }

.feature-row { display: grid; gap: var(--space-lg); align-items: center; }
/* mobile default is copy-first; --media-first when the media is the proof point */
.feature-row--media-first .feature-row__media { order: -1; }

.feature-row__media img,
.feature-row__media svg {
    width: 100%; height: auto;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.feature-row__eyebrow { color: var(--blue-700); font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-xs); }
.feature-row__headline { margin-bottom: var(--space-sm); }
.feature-row__body { color: var(--ink-600); }
.feature-row__list {
    list-style: none; padding: 0;
    margin-top: var(--space-md);
    display: grid; gap: var(--space-xs);
}
.feature-row__list li { display: flex; align-items: baseline; gap: var(--space-xs); }
.feature-row__check { color: var(--accent-500); font-weight: 700; }
.feature-row__cta { margin-top: var(--space-md); }

@media (min-width: 1024px) {
    .feature-rows { gap: var(--space-3xl); }
    .feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); }
    .feature-row__media,
    .feature-row--media-first .feature-row__media { order: 0; } /* undo mobile --media-first (match its specificity) */
    .feature-row--media-left .feature-row__media { order: -1; }
}

/* ── Stat tile (components/stat-tile.md) ───────────────────── */
.stat-tiles {
    display: grid; gap: var(--space-md);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    list-style: none; padding: 0;
}
@media (min-width: 768px) { .stat-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .stat-tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stat-tile {
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
}
.stat-tile__value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; line-height: 1.2; }
.stat-tile__value--good { color: var(--accent-500); }
.stat-tile__value--risk { color: var(--error); } /* 32px bold = large text, 3:1 AA ok */
.stat-tile__label { font-size: var(--text-sm); font-weight: 600; margin-top: var(--space-2xs); }
.stat-tile__caption { font-size: var(--text-xs); color: var(--ink-600); margin-top: var(--space-3xs); }
/* spec says ink-400 for the neutral arrow, but the trend TEXT needs AA → ink-600 */
.stat-tile__trend { color: var(--ink-600); white-space: nowrap; }
.stat-tile__trend--good { color: var(--accent-500); }

/* ── Plan card (components/plan-card.md) ───────────────────── */
.plan-card {
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-xl);
}
@media (min-width: 640px) { .plan-card { padding: var(--space-2xl); } }
.plan-card--featured { border-top: 4px solid var(--accent-500); } /* raw px: border widths aren't tokenized */

.plan-card__name { margin-bottom: var(--space-2xs); }
.plan-card__tagline { color: var(--ink-600); }
.plan-card__features {
    list-style: none; padding: 0;
    margin-block: var(--space-lg);
    padding-block: var(--space-lg);
    border-block: 1px solid var(--line-200);
    display: grid; gap: var(--space-xs);
}
.plan-card__features li { display: flex; align-items: baseline; gap: var(--space-xs); }
.plan-card__check { color: var(--accent-500); font-weight: 700; }
/* forward-compat price slot: markup is always present, [hidden] while gated */
.plan-card__price { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-md); }
.plan-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); }
.plan-card__reframe { font-size: var(--text-sm); color: var(--ink-600); }

/* ── Compliance matrix (components/compliance-matrix.md) ───── */
.compliance-matrix table { width: 100%; border-collapse: collapse; text-align: left; }
.compliance-matrix a { color: var(--blue-700); font-weight: 600; } /* blue-500 misses 4.5:1 on the surface-50 zebra */
.compliance-matrix__scope { display: block; font-size: var(--text-xs); color: var(--ink-600); font-weight: 400; }

/* Mobile (base): one stacked card per standard; headers become data-labels */
.compliance-matrix thead {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.compliance-matrix tbody { display: grid; gap: var(--space-md); }
.compliance-matrix tr {
    display: block;
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-md);
}
.compliance-matrix th[scope="row"],
.compliance-matrix td { display: block; padding: var(--space-2xs) 0; }
.compliance-matrix td::before {
    content: attr(data-label);
    display: block;
    font-size: var(--text-2xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-600);
}

@media (min-width: 768px) {
    .compliance-matrix thead {
        position: static; width: auto; height: auto;
        margin: 0; clip-path: none; overflow: visible; white-space: normal;
    }
    .compliance-matrix tbody { display: table-row-group; }
    .compliance-matrix tr {
        display: table-row;
        background: none; border: 0; border-radius: 0; box-shadow: none;
        padding: 0;
    }
    .compliance-matrix tbody tr:nth-child(even) { background: var(--surface-50); } /* zebra */
    .compliance-matrix th,
    .compliance-matrix td {
        display: table-cell;
        padding: var(--space-sm) var(--space-md);
        border-bottom: 1px solid var(--line-200);
        vertical-align: top;
    }
    .compliance-matrix thead th { font-size: var(--text-sm); color: var(--ink-600); }
    .compliance-matrix td::before { content: none; }
}

/* ── Download card (components/download-card.md) ───────────── */
.download-grid { display: grid; gap: var(--space-lg); }
@media (min-width: 640px) { .download-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .download-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.download-card {
    display: flex; align-items: flex-start; gap: var(--space-md);
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
}
.download-card__icon {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; /* icon tile, matches 40–44px tiles elsewhere */
    background: var(--blue-100); color: var(--blue-700); /* spec: blue glyph; 700 keeps it legible on the tint */
    font-size: var(--text-2xs); font-weight: 700; letter-spacing: .04em;
    border-radius: var(--radius-md);
}
.download-card__title { font-family: var(--font-body); font-size: var(--text-md); margin-bottom: var(--space-2xs); }
.download-card__desc { font-size: var(--text-sm); color: var(--ink-600); }
.download-card__meta { font-size: var(--text-xs); color: var(--ink-600); margin-top: var(--space-2xs); }
.download-card__cta { margin-top: var(--space-md); }

/* ── Reference card (components/reference-card.md) ─────────── */
.reference-grid { display: grid; gap: var(--space-lg); }
@media (min-width: 768px) { .reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .reference-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.reference-card {
    display: flex; flex-direction: column; gap: var(--space-md);
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
}
.reference-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.reference-card__logo { max-height: 32px; width: auto; } /* raw px: logo cap height (wordmark scale) */
.reference-card__logo-text { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--ink-600); }
.reference-card__sector {
    font-size: var(--text-xs); font-weight: 600;
    color: var(--blue-700); background: var(--blue-100);
    border-radius: var(--radius-full);
    padding: var(--space-2xs) var(--space-sm);
    white-space: nowrap;
}
.reference-card__quote { border-left: 3px solid var(--blue-500); padding-left: var(--space-md); } /* raw px: rule width */
.reference-card__quote blockquote { font-style: italic; }
.reference-card__quote figcaption { font-size: var(--text-xs); color: var(--ink-600); margin-top: var(--space-2xs); }
.reference-card__teaser { font-size: var(--text-sm); color: var(--ink-600); }
.reference-card__link { font-size: var(--text-sm); font-weight: 600; margin-top: auto; }

/* ── Prose (components/prose.md) ───────────────────────────── */
.prose { max-width: var(--container-narrow); }
.prose > * + * { margin-top: var(--space-md); }
.prose h2 { font-size: var(--text-2xl); font-weight: 600; margin-top: var(--space-xl); }
.prose h2 + * { margin-top: var(--space-sm); }
.prose h3 { font-size: var(--text-xl); font-weight: 600; margin-top: var(--space-lg); }
.prose__lead { font-size: var(--text-lg); color: var(--ink-600); }
.prose ul, .prose ol { padding-left: var(--space-lg); } /* spec space-md is too tight for 2-digit ol markers */
.prose ul li::marker { color: var(--accent-500); }
.prose li + li { margin-top: var(--space-xs); }
.prose blockquote {
    border-left: 3px solid var(--blue-500); /* raw px: rule width */
    padding-left: var(--space-lg);
    color: var(--ink-600); font-style: italic;
}
.prose code, .prose kbd {
    background: var(--surface-50);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    padding: var(--space-3xs) var(--space-2xs);
}
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.prose th, .prose td { border: 1px solid var(--line-200); padding: var(--space-xs) var(--space-sm); text-align: left; }
.prose tbody tr:nth-child(even) { background: var(--surface-50); }
.prose figure img { width: 100%; border-radius: var(--radius-md); }
.prose figcaption { font-size: var(--text-xs); color: var(--ink-600); margin-top: var(--space-xs); }
.prose hr { border: 0; border-top: 1px solid var(--line-200); margin-block: var(--space-xl); }
.prose__updated { font-size: var(--text-sm); color: var(--ink-600); }
/* legal variant: plain-language summary callout above dense sections */
.prose__callout {
    background: var(--blue-100);
    border-radius: var(--radius-md);
    padding: var(--space-md) var(--space-lg);
}
.prose__callout a { color: var(--blue-700); } /* blue-500 is only 4.15:1 on blue-100 */

/* ── Breadcrumb (components/breadcrumb.md) ─────────────────── */
.breadcrumb { font-size: var(--text-sm); color: var(--ink-600); margin-bottom: var(--space-md); }
.breadcrumb__trail {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--space-xs);
    list-style: none; padding: 0;
}
.breadcrumb__trail li { display: inline-flex; align-items: center; gap: var(--space-xs); }
.breadcrumb__trail a { color: var(--blue-500); text-decoration: none; }
.breadcrumb__trail a:hover { color: var(--blue-700); text-decoration: underline; }
.breadcrumb__trail [aria-current="page"] { color: var(--ink-900); }
.breadcrumb__sep { color: var(--ink-400); } /* decorative, aria-hidden */

/* Mobile: collapse the middle of long trails (4+ items) to an ellipsis */
@media (max-width: 639px) {
    .breadcrumb__trail li:nth-child(n+2):nth-last-child(n+3) { display: none; }
    .breadcrumb__trail li:nth-child(n+2):nth-last-child(n+3) ~ li:nth-last-child(2)::before {
        content: "… ›" / ""; /* silent for AT; degrades to no ellipsis where unsupported */
        color: var(--ink-400);
    }
}

/* ── Team card (components/team-card.md) ───────────────────── */
.team-grid { display: grid; gap: var(--space-lg); }
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
    .team-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .team-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.team-card { text-align: center; padding: var(--space-lg); }
.team-card__photo {
    width: 96px; height: 96px; /* raw px: avatar size — one consistent crop across the team */
    border-radius: var(--radius-full);
    object-fit: cover;
    margin-inline: auto;
    margin-bottom: var(--space-md);
}
.team-card__photo--monogram {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--blue-100); color: var(--blue-700);
    font-family: var(--font-display); font-size: var(--text-xl); font-weight: 700;
}
.team-card__name { font-family: var(--font-body); font-size: var(--text-lg); }
.team-card__role { font-size: var(--text-sm); color: var(--ink-600); }
.team-card__bio { font-size: var(--text-sm); margin-top: var(--space-xs); }
.team-card__link {
    display: inline-flex; align-items: center;
    min-height: 44px; /* touch target */
    font-size: var(--text-sm); font-weight: 600;
}

/* ── Form field (components/form-field.md) ─────────────────── */
.form-field { display: grid; gap: var(--space-2xs); text-align: left; }
.form-field__label { font-size: var(--text-sm); font-weight: 600; color: var(--ink-900); }
.form-field__req { color: var(--ink-600); }
.form-field__input {
    width: 100%;
    min-height: 48px; /* spec: 48px target */
    padding: var(--space-sm) var(--space-md);
    font: inherit; color: var(--ink-900);
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard);
}
.form-field__input::placeholder { color: var(--ink-600); }
.form-field__input:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    border-color: var(--blue-500);
    box-shadow: var(--focus-ring);
}
textarea.form-field__input { resize: vertical; }
/* Select: own chevron (data: SVG, CSP img-src allows it) with room on the right, vertically centred,
   so the arrow keeps the same inset as the text on the left instead of hugging the edge. */
select.form-field__input {
    -webkit-appearance: none; appearance: none;
    padding-inline-end: calc(var(--space-md) + 1.5rem);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23566577' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center;
    background-size: 1rem 1rem;
    cursor: pointer;
}
select.form-field__input:dir(rtl) { background-position: left var(--space-md) center; }
.form-field__input:disabled { color: var(--ink-400); background-color: var(--surface-50); cursor: not-allowed; }
.form-field--valid .form-field__input { border-color: var(--accent-500); } /* JS adds class after blur */
.form-field--error .form-field__input { border-color: var(--error); } /* non-text indicator, 3:1 ok */
.form-field__note {
    font-size: var(--text-xs); color: var(--ink-600);
    min-height: calc(var(--text-xs) * 1.6); /* reserve the line so helper→error swaps don't shift layout */
}
.form-field__note--error { color: var(--error); font-weight: 600; } /* token AA-re-pinned (5.1:1) */

/* ── Form state banners (shared: demo, future forms) ───────── */
.form-banner {
    border-radius: var(--radius-md);
    padding: var(--space-md);
    font-weight: 500;
}
.form-banner--success { background: var(--accent-100); color: var(--accent-600); }
.form-banner--error { background: #FBE9EA; color: var(--error); } /* error tint on white */
.form-error-summary__title { font-weight: 600; }
.form-error-summary__list { margin-top: var(--space-xs); }
.form-error-summary__list a { color: inherit; text-decoration: underline; }
.form-required-note { font-size: var(--text-xs); color: var(--ink-600); margin-block: var(--space-sm); }

/* ── Illustrations (components/illustrations/*) ─────────────
   They draw their own panel + glow on a transparent canvas; the generic
   media radius/shadow would paint a ghost "white frame" around them. */
svg.illus { border-radius: 0; box-shadow: none; }
.utility-page svg.illus { margin-inline: auto; margin-bottom: var(--space-lg); }
.utility-page .e404-illustration {
    margin-inline: auto; margin-bottom: var(--space-lg);
    border-radius: var(--radius-lg);
}

/* ── Reduced motion (token spec: disable non-essential) ────── */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}

/* optional line under the CTA band heading */
.cta-band__sub { margin: calc(-1 * var(--space-sm)) auto var(--space-lg); max-width: var(--container-narrow); }
.cta-band--accent .cta-band__sub,
.cta-band--blue .cta-band__sub { color: var(--ink-inverse-muted); }

/* ── Blog teasers: article grid + article card (shared by blog, home, product pages) ── */
/* ── Article grid: 3 → 2 → 1; featured spans 2 columns ─────── */
.blog-grid { display: grid; gap: var(--space-lg); }
@media (min-width: 768px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ── Article card (components/article-card.md) ─────────────── */
.article-card {
    position: relative; /* stretched title link covers the card */
    display: flex; flex-direction: column;
    background: var(--surface-0);
    border: 1px solid var(--line-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: box-shadow var(--dur-base) var(--ease-standard),
                transform var(--dur-base) var(--ease-standard);
}
.article-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.article-card:focus-within { box-shadow: var(--focus-ring), var(--shadow-md); }

/* Thumb slot: no post images ported yet → brand tile fallback
   (dark navy with the shield mark; explicit ratio keeps CLS 0) */
.article-card__thumb {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 21 / 9;
    background:
        radial-gradient(18rem 10rem at 80% 0%, rgba(49, 187, 216, .16), transparent 60%),
        linear-gradient(160deg, #0C2036 0%, var(--navy-950) 85%);
    color: var(--cyan-300);
}
.article-card__thumb-mark { opacity: .85; }
/* Cover image (generated or uploaded, 1200:630): the box reserves the
   ratio before the image loads (no layout shift) */
.article-card__thumb--cover { background: var(--navy-950); aspect-ratio: 1200 / 630; }
.article-card__thumb--cover img { display: block; width: 100%; height: 100%; object-fit: cover; }

.article-card__body {
    display: flex; flex-direction: column; gap: var(--space-xs);
    padding: var(--space-lg);
    flex: 1;
}
/* read-time pushes right via margin (not space-between): the optional
   language badge on fallback cards sits next to the category pill */
.article-card__topline {
    display: flex; align-items: center;
    gap: var(--space-sm);
}
.article-card__category {
    display: inline-flex; align-items: center;
    background: var(--blue-100);
    color: var(--blue-700);
    border-radius: var(--radius-full);
    padding: var(--space-3xs) var(--space-sm);
    font-size: var(--text-xs); font-weight: 600;
}
.article-card__readtime { font-size: var(--text-xs); color: var(--ink-600); white-space: nowrap; margin-left: auto; }
/* Language badge on fallback cards: the article only exists in another
   locale — the card links there (never foreign content under this URL) */
.article-card__lang {
    display: inline-flex; align-items: center;
    border: 1px solid var(--line-200);
    color: var(--ink-600);
    border-radius: var(--radius-full);
    padding: var(--space-3xs) var(--space-2xs);
    font-size: var(--text-xs); font-weight: 600;
    letter-spacing: .04em;
}
.article-card__title { font-family: var(--font-body); font-size: var(--text-lg); }
.article-card__title a { color: var(--ink-900); text-decoration: none; }
/* whole-card click target via a single stretched link (DS a11y note) */
.article-card__title a::after { content: ""; position: absolute; inset: 0; }
.article-card__excerpt { font-size: var(--text-sm); color: var(--ink-600); }
/* spec says ink-400, but meta is real text → ink-600 for AA (house rule) */
.article-card__meta { margin-top: auto; font-size: var(--text-xs); color: var(--ink-600); }

/* Featured variant: newest post spans 2 columns as a dark brand
   panel (the premium-cyber echo of the hero) */
.article-card--featured {
    background:
        radial-gradient(32rem 18rem at 85% 8%, rgba(49, 187, 216, .14), transparent 60%),
        linear-gradient(160deg, #0C2036 0%, var(--navy-950) 80%);
    border-color: rgba(159, 177, 196, .25);
}
@media (min-width: 768px) { .article-card--featured { grid-column: span 2; } }
.article-card--featured .article-card__thumb:not(.article-card__thumb--cover) {
    background: none;
    aspect-ratio: auto; min-height: 72px;
    justify-content: flex-end;
    padding: var(--space-lg) var(--space-lg) 0;
}
.article-card--featured .article-card__category {
    background: rgba(49, 187, 216, .13);
    border: 1px solid rgba(49, 187, 216, .3);
    color: var(--cyan-300);
}
.article-card--featured .article-card__readtime { color: var(--ink-inverse-muted); }
.article-card--featured .article-card__lang {
    border-color: rgba(159, 177, 196, .4);
    color: var(--ink-inverse-muted);
}
.article-card--featured .article-card__title { font-family: var(--font-display); font-size: var(--text-xl); }
.article-card--featured .article-card__title a { color: var(--surface-0); }
.article-card--featured .article-card__excerpt { color: var(--ink-inverse-muted); max-width: 54em; }
.article-card--featured .article-card__meta { color: var(--ink-inverse-muted); }
@media (min-width: 640px) {
    .article-card--featured .article-card__title { font-size: var(--text-2xl-fluid); }
}

/* Teaser sections (home "Aus dem Blog", product-page "Weiterlesen"): 1 to 3
   cards, centered, same card width as the blog index */
.blog-grid--teasers { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) {
    .blog-grid--teasers {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 24rem));
        justify-content: center;
    }
}
.blog-teasers__all { text-align: center; margin-top: var(--space-xl); }