/* assets/css/src/00-layers.css */
/* NBCS design system — layer order.
   Later layers win regardless of selector specificity, so components never need specificity hacks. */
@layer reset, tokens, fonts, base, layout, components, patterns, utilities, motion, print;

/* assets/css/src/01-tokens.css */
/* Design tokens. Brand hues are fixed; everything else is expressed as roles.
   Theme scopes (.theme-dark, .theme-light) re-map roles so components adapt without extra selectors. */
@layer tokens {
  :root {
    /* Brand palette (preserved NBCS values) */
    --nbcs-ink: #0b1526;
    --nbcs-ink-2: #3b4757;
    --nbcs-ink-3: #5e6b7a;
    --nbcs-teal: #0a7a78;
    --nbcs-teal-700: #06605e;
    --nbcs-teal-300: #3fd5c7;
    --nbcs-violet: #6b54d3;
    --nbcs-violet-700: #5340ac;
    --nbcs-violet-300: #b7a9f5;
    --nbcs-mist: #f4f7f8;

    /* Derived neutrals */
    --nbcs-mist-2: #eaeff2;
    --nbcs-line: #e1e7ec;
    --nbcs-line-2: #cdd6dd;
    --nbcs-control: #7a8694;
    --nbcs-ink-raised: #121f35;
    --nbcs-ink-deep: #08101e;

    /* Typography */
    --font-inter: "Inter Variable", "Inter Fallback", "Segoe UI", system-ui, sans-serif;
    --font-manrope: "Manrope Variable", "Manrope Fallback", "Segoe UI", system-ui, sans-serif;
    --font-sans: var(--font-inter);
    --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", menlo, consolas, monospace;
    --text-display: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);
    --text-h1: clamp(2rem, 1.5rem + 2vw, 2.875rem);
    --text-h2: clamp(1.625rem, 1.3rem + 1.3vw, 2.25rem);
    --text-h3: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
    --text-h4: 1.125rem;
    --text-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
    --text-body: 1rem;
    --text-body-lg: 1.125rem;
    --text-sm: 0.875rem;
    --leading-display: 1.08;
    --leading-heading: 1.18;
    --leading-snug: 1.3;
    --leading-normal: 1.5;
    --leading-body: 1.65;
    --leading-prose: 1.72;
    --tracking-display: -0.024em;
    --tracking-heading: -0.016em;
    --tracking-snug: -0.006em;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-heading: 650;

    /* Spacing (4px base) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;
    --space-10: 5rem;
    --space-11: 6rem;
    --section-y: clamp(3.5rem, 2.25rem + 4.5vw, 6rem);
    --section-y-tight: clamp(2.5rem, 1.75rem + 3vw, 4rem);
    --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem);

    /* Containers */
    --container: 76rem;
    --container-wide: 84rem;
    --container-narrow: 60rem;
    --container-prose: 44rem;
    --header-h: 4rem;
    --mobile-bar-h: 4.25rem;

    /* Radius (balanced: mature, not square, not bubbly) */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 999px;

    /* Elevation */
    --shadow-xs: 0 1px 2px rgb(11 21 38 / 5%);
    --shadow-sm: 0 1px 2px rgb(11 21 38 / 5%), 0 4px 12px -4px rgb(11 21 38 / 8%);
    --shadow-md: 0 2px 4px rgb(11 21 38 / 4%), 0 16px 32px -12px rgb(11 21 38 / 16%);
    --shadow-lg: 0 4px 8px rgb(11 21 38 / 4%), 0 32px 64px -24px rgb(11 21 38 / 30%);

    /* Motion: expo-out without overshoot for movement, standard easing for state changes. Durations suit a long page;
       phones get shorter durations, smaller travel and a lighter stagger (media query below). */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --dur-instant: 90ms;
    --dur-fast: 150ms;
    --dur-base: 220ms;
    --dur-slow: 320ms;
    --dur-reveal: 460ms;
    --reveal-distance: 12px;
    --stagger: 60ms;

    /* Layers */
    --z-mobile-bar: 40;
    --z-header: 50;
    --z-drawer: 60;
    --z-cookie: 70;
    --z-dialog: 80;
    --z-skip: 100;
  }

  /* Colour roles — light theme (default, and re-applied inside dark sections via .theme-light) */
  :root,
  .theme-light {
    --color-bg: #fff;
    --color-surface: #fff;
    --color-surface-muted: var(--nbcs-mist);
    --color-surface-sunken: var(--nbcs-mist-2);
    --color-text: var(--nbcs-ink);
    --color-text-secondary: var(--nbcs-ink-2);
    --color-text-tertiary: var(--nbcs-ink-3);
    --color-border: var(--nbcs-line);
    --color-border-strong: var(--nbcs-line-2);
    --color-border-control: var(--nbcs-control);
    --color-action: var(--nbcs-teal);
    --color-action-hover: var(--nbcs-teal-700);
    --color-action-tint: rgb(10 122 120 / 8%);
    --color-action-tint-strong: rgb(10 122 120 / 14%);
    --color-on-action: #fff;
    --color-link: var(--nbcs-teal-700);
    --color-ai: var(--nbcs-violet);
    --color-ai-text: var(--nbcs-violet-700);
    --color-ai-tint: rgb(107 84 211 / 8%);
    --color-ai-tint-strong: rgb(107 84 211 / 16%);
    --color-success: #0f7b53;
    --color-warning: #b3541e;
    --color-error: #b42318;
    --color-error-tint: #fdf2f1;
    --color-focus: var(--nbcs-teal);
    --color-scrim: rgb(8 16 30 / 56%);

    color-scheme: light;
  }

  /* Gate 1 evaluation hook: the owner compares Inter and Manrope. Remove the losing family after the decision. */
  :root[data-font="manrope"] {
    --font-sans: var(--font-manrope);
  }

  @media (width >= 64rem) {
    :root {
      --header-h: 4.5rem;
    }
  }

  @media (width < 48rem) {
    :root {
      --dur-slow: 260ms;
      --dur-reveal: 340ms;
      --reveal-distance: 8px;
      --stagger: 35ms;
    }
  }

  .theme-dark {
    --color-bg: var(--nbcs-ink);
    --color-surface: var(--nbcs-ink-raised);
    --color-surface-muted: #0f1b2f;
    --color-surface-sunken: var(--nbcs-ink-deep);
    --color-text: #fff;
    --color-text-secondary: #b6c3d2;
    --color-text-tertiary: #8b9bb0;
    --color-border: rgb(255 255 255 / 11%);
    --color-border-strong: rgb(255 255 255 / 20%);
    --color-border-control: rgb(255 255 255 / 42%);
    --color-action: var(--nbcs-teal-300);
    --color-action-hover: #7ae6dc;
    --color-action-tint: rgb(63 213 199 / 10%);
    --color-action-tint-strong: rgb(63 213 199 / 18%);
    --color-on-action: var(--nbcs-ink);
    --color-link: var(--nbcs-teal-300);
    --color-ai: var(--nbcs-violet-300);
    --color-ai-text: var(--nbcs-violet-300);
    --color-ai-tint: rgb(183 169 245 / 10%);
    --color-ai-tint-strong: rgb(183 169 245 / 18%);
    --color-focus: var(--nbcs-teal-300);
    --color-scrim: rgb(0 0 0 / 60%);

    color-scheme: dark;
  }
}

/* assets/css/src/02-fonts.css */
/* Generated by tools/fonts/prepare.mjs — do not edit by hand. */
@layer fonts {
  @font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-weight: 100 900;
    font-display: optional;
    src: url("../fonts/inter-cyrillic-wght.woff2") format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
  }

  @font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-weight: 100 900;
    font-display: optional;
    src: url("../fonts/inter-latin-ext-wght.woff2") format("woff2");
    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: "Inter Variable";
    font-style: normal;
    font-weight: 100 900;
    font-display: optional;
    src: url("../fonts/inter-latin-wght.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("ArialMT"), local("Helvetica");
    font-weight: 100 449;
    unicode-range: U+0000-10FFFF;
    size-adjust: 104.38%;
    ascent-override: 92.81%;
    descent-override: 23.11%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("ArialMT"), local("Helvetica");
    font-weight: 100 449;
    unicode-range: U+0041-005A,U+0061-007A,U+00C0-00D6,U+00D8-00F6,U+00F8-024F;
    size-adjust: 107.28%;
    ascent-override: 90.30%;
    descent-override: 22.48%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("ArialMT"), local("Helvetica");
    font-weight: 100 449;
    unicode-range: U+0400-04FF;
    size-adjust: 107.20%;
    ascent-override: 90.37%;
    descent-override: 22.50%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("ArialMT"), local("Helvetica");
    font-weight: 100 449;
    unicode-range: U+0030-0039;
    size-adjust: 107.23%;
    ascent-override: 90.34%;
    descent-override: 22.49%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("ArialMT"), local("Helvetica");
    font-weight: 100 449;
    unicode-range: U+0020,U+00A0,U+2009,U+202F;
    size-adjust: 101.23%;
    ascent-override: 95.70%;
    descent-override: 23.83%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("ArialMT"), local("Helvetica");
    font-weight: 450 549;
    unicode-range: U+0000-10FFFF;
    size-adjust: 108.11%;
    ascent-override: 89.61%;
    descent-override: 22.31%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("ArialMT"), local("Helvetica");
    font-weight: 450 549;
    unicode-range: U+0041-005A,U+0061-007A,U+00C0-00D6,U+00D8-00F6,U+00F8-024F;
    size-adjust: 109.04%;
    ascent-override: 88.84%;
    descent-override: 22.12%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("ArialMT"), local("Helvetica");
    font-weight: 450 549;
    unicode-range: U+0400-04FF;
    size-adjust: 108.87%;
    ascent-override: 88.98%;
    descent-override: 22.16%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("ArialMT"), local("Helvetica");
    font-weight: 450 549;
    unicode-range: U+0030-0039;
    size-adjust: 109.09%;
    ascent-override: 88.80%;
    descent-override: 22.11%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial"), local("ArialMT"), local("Helvetica");
    font-weight: 450 549;
    unicode-range: U+0020,U+00A0,U+2009,U+202F;
    size-adjust: 95.96%;
    ascent-override: 100.95%;
    descent-override: 25.14%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
    font-weight: 550 624;
    unicode-range: U+0000-10FFFF;
    size-adjust: 108.99%;
    ascent-override: 88.88%;
    descent-override: 22.13%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
    font-weight: 550 624;
    unicode-range: U+0041-005A,U+0061-007A,U+00C0-00D6,U+00D8-00F6,U+00F8-024F;
    size-adjust: 101.73%;
    ascent-override: 95.23%;
    descent-override: 23.71%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
    font-weight: 550 624;
    unicode-range: U+0400-04FF;
    size-adjust: 101.69%;
    ascent-override: 95.27%;
    descent-override: 23.72%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
    font-weight: 550 624;
    unicode-range: U+0030-0039;
    size-adjust: 110.81%;
    ascent-override: 87.42%;
    descent-override: 21.77%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
    font-weight: 550 624;
    unicode-range: U+0020,U+00A0,U+2009,U+202F;
    size-adjust: 90.69%;
    ascent-override: 106.82%;
    descent-override: 26.60%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
    font-weight: 625 674;
    unicode-range: U+0000-10FFFF;
    size-adjust: 110.74%;
    ascent-override: 87.48%;
    descent-override: 21.78%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
    font-weight: 625 674;
    unicode-range: U+0041-005A,U+0061-007A,U+00C0-00D6,U+00D8-00F6,U+00F8-024F;
    size-adjust: 102.54%;
    ascent-override: 94.48%;
    descent-override: 23.52%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
    font-weight: 625 674;
    unicode-range: U+0400-04FF;
    size-adjust: 102.46%;
    ascent-override: 94.55%;
    descent-override: 23.54%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
    font-weight: 625 674;
    unicode-range: U+0030-0039;
    size-adjust: 111.76%;
    ascent-override: 86.68%;
    descent-override: 21.58%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
    font-weight: 625 674;
    unicode-range: U+0020,U+00A0,U+2009,U+202F;
    size-adjust: 87.87%;
    ascent-override: 110.25%;
    descent-override: 27.45%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
    font-weight: 675 900;
    unicode-range: U+0000-10FFFF;
    size-adjust: 112.61%;
    ascent-override: 86.03%;
    descent-override: 21.42%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
    font-weight: 675 900;
    unicode-range: U+0041-005A,U+0061-007A,U+00C0-00D6,U+00D8-00F6,U+00F8-024F;
    size-adjust: 103.34%;
    ascent-override: 93.74%;
    descent-override: 23.34%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
    font-weight: 675 900;
    unicode-range: U+0400-04FF;
    size-adjust: 103.24%;
    ascent-override: 93.83%;
    descent-override: 23.36%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
    font-weight: 675 900;
    unicode-range: U+0030-0039;
    size-adjust: 112.69%;
    ascent-override: 85.97%;
    descent-override: 21.40%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Inter Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold");
    font-weight: 675 900;
    unicode-range: U+0020,U+00A0,U+2009,U+202F;
    size-adjust: 85.24%;
    ascent-override: 113.65%;
    descent-override: 28.30%;
    line-gap-override: 0.00%;
  }

  @font-face {
    font-family: "Manrope Variable";
    font-style: normal;
    font-weight: 100 900;
    font-display: optional;
    src: url("../fonts/manrope-cyrillic-wght.woff2") format("woff2");
    unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
  }

  @font-face {
    font-family: "Manrope Variable";
    font-style: normal;
    font-weight: 100 900;
    font-display: optional;
    src: url("../fonts/manrope-latin-ext-wght.woff2") format("woff2");
    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: "Manrope Variable";
    font-style: normal;
    font-weight: 100 900;
    font-display: optional;
    src: url("../fonts/manrope-latin-wght.woff2") format("woff2");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }

  @font-face {
    font-family: "Manrope Fallback";
    src: local("Arial"), local("ArialMT"), local("Helvetica");
    size-adjust: 99.15%;
    ascent-override: 107.51%;
    descent-override: 30.26%;
    line-gap-override: 0.00%;
  }
}

/* assets/css/src/03-reset.css */
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

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

  body {
    min-height: 100dvh;
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
  }

  img,
  video {
    height: auto;
  }

  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
  }

  button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
  }

  table {
    border-collapse: collapse;
    border-spacing: 0;
  }

  ul[role="list"],
  ol[role="list"] {
    list-style: none;
    padding: 0;
  }

  p,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    overflow-wrap: break-word;
  }
}

/* assets/css/src/04-base.css */
@layer base {
  html {
    font-family: var(--font-sans);
    font-size: 100%;
    line-height: var(--leading-body);
    color: var(--color-text);
    background: var(--color-bg);
    scroll-padding-top: calc(var(--header-h) + 1.5rem);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizelegibility;
    font-optical-sizing: auto;
    hanging-punctuation: first;
  }

  body {
    font-size: var(--text-body);
    background: var(--color-bg);
    color: var(--color-text);
  }

  h1,
  h2,
  h3,
  h4 {
    color: var(--color-text);
    font-weight: var(--weight-heading);
    text-wrap: balance;
  }

  h1 {
    font-size: var(--text-h1);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
  }

  h2 {
    font-size: var(--text-h2);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-heading);
  }

  h3 {
    font-size: var(--text-h3);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-snug);
    font-weight: var(--weight-semibold);
  }

  h4 {
    font-size: var(--text-h4);
    line-height: var(--leading-snug);
    font-weight: var(--weight-semibold);
  }

  p {
    text-wrap: pretty;
  }

  a {
    color: var(--color-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--dur-fast) var(--ease-standard), text-decoration-color var(--dur-fast) var(--ease-standard);
  }

  a:hover {
    text-decoration-thickness: 2px;
  }

  strong,
  b {
    font-weight: var(--weight-semibold);
  }

  small {
    font-size: var(--text-sm);
  }

  code,
  kbd,
  pre {
    font-family: var(--font-mono);
    font-size: 0.9em;
  }

  :not(pre) > code {
    padding: 0.1em 0.35em;
    border-radius: var(--radius-xs);
    background: var(--color-surface-muted);
  }

  ::selection {
    background: var(--color-action-tint-strong);
    color: var(--color-text);
  }

  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
  }

  [hidden] {
    display: none !important; /* stylelint-disable-line declaration-no-important */
  }

  svg {
    flex-shrink: 0;
  }

  hr {
    border: 0;
    border-top: 1px solid var(--color-border);
  }

  .skip-link {
    position: fixed;
    top: var(--space-3);
    left: var(--space-3);
    z-index: var(--z-skip);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--nbcs-ink);
    color: #fff;
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transform: translateY(-160%);
    transition: transform var(--dur-base) var(--ease-out);
  }

  .skip-link:focus-visible {
    transform: none;
    outline-color: var(--nbcs-teal-300);
  }
}

/* assets/css/src/05-layout.css */
/* Layout primitives: container, section, grid, split, stack, cluster.
   Breakpoints (mobile-first): sm 30rem · md 48rem · lg 64rem · xl 80rem. */
@layer layout {
  .container {
    width: min(100% - 2 * var(--gutter), var(--container));
    margin-inline: auto;
  }

  .container--wide {
    width: min(100% - 2 * var(--gutter), var(--container-wide));
  }

  .container--narrow {
    width: min(100% - 2 * var(--gutter), var(--container-narrow));
  }

  .container--prose {
    width: min(100% - 2 * var(--gutter), var(--container-prose));
  }

  .section {
    position: relative;
    padding-block: var(--section-y);
    background: var(--color-bg);
    color: var(--color-text);
  }

  .section--tight {
    padding-block: var(--section-y-tight);
  }

  .section--muted {
    --color-bg: var(--color-surface-muted);
  }

  .section--flush-top {
    padding-top: 0;
  }

  .section--divided {
    border-top: 1px solid var(--color-border);
  }

  .grid {
    display: grid;
    gap: var(--grid-gap, var(--space-5));
    grid-template-columns: minmax(0, 1fr);
  }

  @media (width >= 48rem) {
    .grid.g-2,
    .grid.g-3,
    .grid.g-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width >= 64rem) {
    .grid {
      --grid-gap: var(--space-6);
    }

    .grid.g-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .grid.g-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .split {
    display: grid;
    gap: var(--split-gap, var(--space-8));
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  @media (width >= 64rem) {
    .split {
      --split-gap: clamp(var(--space-8), 4vw, var(--space-10));

      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .split--5-7 {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .split--7-5 {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }

    .split--4-8 {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    }

    .split--center {
      align-items: center;
    }
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap, var(--space-4));
  }

  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-3));
  }

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

/* assets/css/src/90-utilities.css */
@layer utilities {
  .text-center {
    text-align: center;
  }

  .text-secondary {
    color: var(--color-text-secondary);
  }

  .text-tertiary {
    color: var(--color-text-tertiary);
  }

  .nowrap {
    white-space: nowrap;
  }

  .tabular {
    font-variant-numeric: tabular-nums;
  }

  .mt-auto {
    margin-top: auto;
  }

  .mt-6 {
    margin-top: var(--space-6);
  }

  .mt-8 {
    margin-top: var(--space-8);
  }

  @media (width < 64rem) {
    .hide-below-lg {
      display: none;
    }
  }

  @media (width >= 64rem) {
    .hide-lg {
      display: none;
    }
  }
}

/* assets/css/src/95-motion.css */
/* Motion language: fast, restrained, purposeful. Movement uses transform/opacity; state changes (hover, selection,
   focus) transition colour, background, border and shadow.
   html.motion-ok is set by JS only when prefers-reduced-motion is "no-preference";
   without JS or with reduced motion, every element is simply visible. */
@layer motion {
  @keyframes nbcs-spin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes nbcs-rise {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }

  @keyframes nbcs-rise-solid {
    from {
      transform: translateY(8px);
    }
  }

  @keyframes nbcs-fade {
    from {
      opacity: 0;
    }
  }

  @keyframes nbcs-pop {
    from {
      opacity: 0;
      transform: translateY(6px) scale(0.985);
    }
  }

  @keyframes nbcs-panel-in {
    from {
      opacity: 0;
      transform: translateY(6px);
    }
  }

  @keyframes nbcs-frame-in {
    from {
      opacity: 0;
      transform: translateY(12px) scale(0.99);
    }
  }

  @keyframes nbcs-grow-y {
    from {
      transform: scaleY(0);
    }
  }

  @keyframes nbcs-grow-x {
    from {
      transform: scaleX(0);
    }
  }

  @keyframes nbcs-grow-x-linear {
    from {
      transform: scaleX(0);
    }

    to {
      transform: scaleX(1);
    }
  }

  @keyframes nbcs-typing {
    0%,
    60%,
    100% {
      opacity: 0.35;
      transform: translateY(0);
    }

    30% {
      opacity: 1;
      transform: translateY(-3px);
    }
  }

  /* Section reveal */
  .motion-ok [data-reveal] {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition:
      opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms),
      transform var(--dur-reveal) var(--ease-out) var(--reveal-delay, 0ms);
  }

  .motion-ok [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }

  /* Section headers resolve in reading order (eyebrow → heading → lead) within one short reveal. */
  .motion-ok .section-header[data-reveal] {
    opacity: 1;
    transform: none;
  }

  :where(.motion-ok) .section-header[data-reveal] > * {
    opacity: 0;
    transform: translateY(var(--reveal-distance));
    transition:
      opacity var(--dur-reveal) var(--ease-out),
      transform var(--dur-reveal) var(--ease-out);
  }

  :where(.motion-ok) .section-header[data-reveal] > :nth-child(2) {
    transition-delay: calc(var(--stagger) * 0.75);
  }

  :where(.motion-ok) .section-header[data-reveal] > :nth-child(n + 3) {
    transition-delay: calc(var(--stagger) * 1.5);
  }

  :where(.motion-ok) .section-header[data-reveal].is-revealed > * {
    opacity: 1;
    transform: none;
  }

  @media (prefers-reduced-motion: no-preference) {
    html {
      scroll-behavior: smooth;
    }

    @supports (interpolate-size: allow-keywords) {
      :root {
        interpolate-size: allow-keywords;
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* stylelint-disable declaration-no-important */
    *,
    *::before,
    *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
      scroll-behavior: auto !important;
    }
    /* stylelint-enable declaration-no-important */
  }
}

/* assets/css/src/99-print.css */
@layer print {
  @media print {
    .site-header,
    .site-footer,
    .mobile-bar,
    .cookie-bar,
    .search-dialog,
    .cta,
    .article-layout__aside,
    .reading-progress,
    .skip-link {
      display: none;
    }

    body {
      padding: 0;
      font-size: 11pt;
      color: #000;
      background: #fff;
    }

    .page-hero {
      background: none;
      border: 0;
    }

    .article-layout {
      display: block;
    }

    .prose a::after {
      content: " (" attr(href) ")";
      font-size: 0.85em;
      color: #555;
    }

    h2,
    h3 {
      break-after: avoid;
    }

    tr,
    .callout,
    .card {
      break-inside: avoid;
    }
  }
}

/* assets/css/src/components/badge.css */
/* Eyebrow, badge, tag, demo label, kbd hint. Sentence case; no monospace. */
@layer components {
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: var(--color-link);
  }

  .eyebrow--ai {
    color: var(--color-ai-text);
  }

  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    padding: 0.3125rem 0.75rem 0.3125rem 0.625rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-surface) 70%, transparent);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1.35;
    color: var(--color-text-secondary);
  }

  .badge__dot {
    flex: none;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--color-action);
    box-shadow: 0 0 0 3px var(--color-action-tint-strong);
  }

  .tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-xs);
    background: var(--color-action-tint);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1.5;
    color: var(--color-action-hover);
  }

  .tag--neutral {
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
  }

  .tag--ai {
    background: var(--color-ai-tint);
    color: var(--color-ai-text);
  }

  .demo-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.125rem 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-tertiary);
    white-space: nowrap;
  }

  .demo-label::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--color-warning);
  }

  kbd.kbd {
    display: inline-grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.5rem;
    padding-inline: 0.375rem;
    border: 1px solid var(--color-border-strong);
    border-bottom-width: 2px;
    border-radius: var(--radius-xs);
    background: var(--color-surface);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
  }
}

/* assets/css/src/components/breadcrumb.css */
@layer components {
  .breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-tertiary);
  }

  .breadcrumb li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
  }

  .breadcrumb li + li::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-top: 1.5px solid currentcolor;
    border-right: 1.5px solid currentcolor;
    opacity: 0.55;
    transform: rotate(45deg);
  }

  .breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    color: var(--color-text-secondary);
    text-decoration: none;
  }

  .breadcrumb a:hover {
    color: var(--color-text);
    text-decoration: underline;
  }

  .breadcrumb [aria-current="page"] {
    color: var(--color-text-tertiary);
  }
}

/* assets/css/src/components/button.css */
/* Buttons. Class names .btn-primary / .btn-ghost are an analytics contract (CTA intent tracking). */
@layer components {
  .btn {
    --btn-bg: var(--color-surface);
    --btn-bg-hover: var(--color-surface-muted);
    --btn-fg: var(--color-text);
    --btn-border: var(--color-border-strong);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.625rem 1.125rem;
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-sm);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-size: 1rem;
    font-weight: var(--weight-semibold);
    line-height: 1.25;
    letter-spacing: -0.005em;
    text-align: center;
    text-decoration: none;
    text-wrap: balance;
    cursor: pointer;
    transition:
      background-color var(--dur-fast) var(--ease-standard),
      border-color var(--dur-fast) var(--ease-standard),
      color var(--dur-fast) var(--ease-standard),
      box-shadow var(--dur-base) var(--ease-standard),
      transform var(--dur-fast) var(--ease-out);
    -webkit-tap-highlight-color: transparent;
  }

  .btn:hover {
    background: var(--btn-bg-hover);
    text-decoration: none;
  }

  .btn:active {
    transform: translateY(1px);
  }

  .btn svg {
    width: 1.125rem;
    height: 1.125rem;
    transition: transform var(--dur-base) var(--ease-out);
  }

  .btn:hover .btn__arrow {
    transform: translateX(3px);
  }

  .btn-primary {
    --btn-bg: var(--color-action);
    --btn-bg-hover: var(--color-action-hover);
    --btn-fg: var(--color-on-action);
    --btn-border: transparent;

    box-shadow: var(--shadow-xs), inset 0 1px 0 rgb(255 255 255 / 14%);
  }

  .btn-primary:hover {
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--color-action) 70%, transparent);
    transform: translateY(-1px);
  }

  .btn-primary:active {
    transform: translateY(0);
  }

  .btn-ghost {
    --btn-bg: transparent;
    --btn-bg-hover: var(--color-surface-muted);
  }

  .btn-link {
    --btn-bg: transparent;
    --btn-bg-hover: transparent;
    --btn-fg: var(--color-link);
    --btn-border: transparent;

    justify-self: start;
    align-self: start;
    min-height: 2.75rem;
    padding-inline: 0;
  }

  .btn-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  .btn-sm {
    min-height: 2.5rem;
    padding: 0.5rem 0.875rem;
    font-size: var(--text-sm);
  }

  .btn-lg {
    min-height: 3.25rem;
    padding: 0.875rem 1.5rem;
    font-size: 1.0625rem;
  }

  .btn-block {
    width: 100%;
  }

  .btn-icon {
    width: 2.75rem;
    padding: 0;
  }

  .btn:disabled,
  .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
  }

  .btn[aria-busy="true"] {
    cursor: progress;
  }

  .btn[aria-busy="true"]::after {
    content: "";
    width: 1rem;
    height: 1rem;
    border: 2px solid currentcolor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: nbcs-spin 700ms linear infinite;
  }
}

/* assets/css/src/components/card.css */
/* Cards: base, link, quiet, feature icon. Hover motion is a lift + border, never an inversion. */
@layer components {
  .card {
    --card-pad: var(--space-5);

    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--card-pad);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    transition:
      border-color var(--dur-base) var(--ease-standard),
      box-shadow var(--dur-slow) var(--ease-out),
      transform var(--dur-slow) var(--ease-out);
  }

  @media (width >= 64rem) {
    .card {
      --card-pad: var(--space-6);
    }
  }

  .card p {
    color: var(--color-text-secondary);
  }

  .card__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: var(--space-1);
    border-radius: var(--radius-sm);
    background: var(--color-action-tint);
    color: var(--color-action-hover);
  }

  .card__icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  /* The meta line may end with an icon (production renders it as an inline-flex link), which keeps the text's line. */
  .card__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }

  .card__meta svg {
    flex: none;
    width: 1rem;
    height: 1rem;
  }

  .card__footer {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-link);
  }

  .card__footer svg {
    width: 1rem;
    height: 1rem;
    transition: transform var(--dur-base) var(--ease-out);
  }

  a.card {
    color: inherit;
    text-decoration: none;
  }

  a.card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }

  :where(a.card:hover) .card__footer svg {
    transform: translateX(3px);
  }

  a.card:focus-visible {
    outline-offset: 3px;
  }

  .card--quiet {
    border-color: transparent;
    background: var(--color-surface-muted);
  }

  .card--flat {
    padding: 0;
    border: 0;
    background: none;
  }
}

/* assets/css/src/components/faq.css */
/* FAQ on native <details>. Open/close animates where ::details-content is supported; content stays indexable. */
@layer components {
  .faq {
    border-top: 1px solid var(--color-border);
  }

  .faq details {
    border-bottom: 1px solid var(--color-border);
  }

  .faq summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-5);
    padding-block: var(--space-5);
    list-style: none;
    font-size: 1.0625rem;
    font-weight: var(--weight-semibold);
    line-height: 1.45;
    color: var(--color-text);
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-standard);
  }

  .faq summary::-webkit-details-marker {
    display: none;
  }

  .faq summary::after {
    content: "";
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    margin-top: -0.125rem;
    border-radius: 50%;
    background:
      linear-gradient(currentcolor, currentcolor) center / 0.6875rem 1.5px no-repeat,
      linear-gradient(currentcolor, currentcolor) center / 1.5px 0.6875rem no-repeat,
      var(--color-surface-muted);
    color: var(--color-text-secondary);
    transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-fast);
  }

  .faq summary:hover {
    color: var(--color-link);
  }

  .faq details[open] > summary::after {
    transform: rotate(135deg);
  }

  .faq details > :not(summary) {
    padding: 0 3rem var(--space-5) 0;
    font-size: 1rem;
    line-height: var(--leading-body);
    color: var(--color-text-secondary);
  }

  .faq details > :not(summary) + :not(summary) {
    margin-top: calc(-1 * var(--space-3));
  }

  @supports selector(::details-content) {
    .faq details::details-content {
      block-size: 0;
      overflow-y: clip;
      transition:
        content-visibility var(--dur-base) allow-discrete,
        block-size var(--dur-base) var(--ease-standard);
    }

    .faq details[open]::details-content {
      block-size: auto;
    }
  }

  /* Homepage FAQ: the consultation action sits under the heading on desktop and after the questions on phones. */
  .faq-layout__cta {
    margin: 0;
  }

  @media (width >= 64rem) {
    .faq-layout {
      grid-template-rows: auto 1fr;
      row-gap: var(--space-5);
    }

    .faq-layout > .faq-layout__intro {
      grid-column: 1;
      grid-row: 1;
    }

    .faq-layout__intro .section-header {
      margin-bottom: 0;
    }

    .faq-layout > .faq-layout__cta {
      grid-column: 1;
      grid-row: 2;
      align-self: start;
    }

    .faq-layout > .faq {
      grid-column: 2;
      grid-row: 1 / span 2;
    }
  }

  @media (width < 48rem) {
    .faq summary {
      font-size: 1rem;
      gap: var(--space-4);
    }

    .faq details > :not(summary) {
      padding-right: 0;
    }
  }
}

/* assets/css/src/components/form.css */
/* Forms: fields, controls, choices, status messages. */
@layer components {
  .form {
    display: grid;
    gap: var(--space-4);
  }

  .form__row {
    display: grid;
    gap: var(--space-4);
  }

  @media (width >= 48rem) {
    .form__row--2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .field {
    display: grid;
    gap: 0.375rem;
    min-width: 0;
  }

  .field__label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1.4;
    color: var(--color-text);
  }

  .field__optional {
    font-weight: var(--weight-regular);
    color: var(--color-text-tertiary);
  }

  .control {
    width: 100%;
    min-height: 3rem;
    padding: 0.6875rem 0.875rem;
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
  }

  .control::placeholder {
    color: var(--color-text-tertiary);
    opacity: 1;
  }

  .control:hover {
    border-color: var(--color-text-secondary);
  }

  .control:focus-visible {
    border-color: var(--color-focus);
    outline: 2px solid var(--color-focus);
    outline-offset: 1px;
    box-shadow: 0 0 0 5px var(--color-action-tint);
  }

  .control[aria-invalid="true"] {
    border-color: var(--color-error);
  }

  textarea.control {
    min-height: 7.5rem;
    resize: vertical;
  }

  .field__hint,
  .field__error {
    font-size: var(--text-sm);
    line-height: 1.45;
  }

  .field__hint {
    color: var(--color-text-tertiary);
  }

  .field__error {
    display: flex;
    gap: 0.375rem;
    color: var(--color-error);
  }

  .field__error svg {
    width: 1rem;
    height: 1rem;
    margin-top: 0.125rem;
  }

  .form__note {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }

  .form__note a {
    color: var(--color-link);
  }

  /* Mail-form status boxes are shown and hidden through style.display by the production mail-form script, so the box
     keeps the default display and the icon + text layout lives on .form-status__inner. */
  .form-status {
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    line-height: 1.5;
  }

  .form-status__inner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .form-status svg {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.0625rem;
  }

  .form-status--success {
    border-color: color-mix(in srgb, var(--color-success) 35%, transparent);
    background: color-mix(in srgb, var(--color-success) 7%, var(--color-surface));
    color: var(--color-text);
  }

  .form-status--success svg {
    color: var(--color-success);
  }

  .form-status--error {
    border-color: color-mix(in srgb, var(--color-error) 35%, transparent);
    background: var(--color-error-tint);
    color: var(--color-text);
  }

  .form-status--error svg {
    color: var(--color-error);
  }

  /* Choice chips: native radio/checkbox kept for semantics and keyboard. */
  .choice {
    position: relative;
    display: inline-flex;
  }

  .choice input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
  }

  .choice__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast);
  }

  .choice input:hover + .choice__label {
    border-color: var(--color-text-secondary);
  }

  .choice input:checked + .choice__label {
    border-color: var(--color-action);
    background: var(--color-action-tint);
    color: var(--color-action-hover);
  }

  .choice input:focus-visible + .choice__label {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  input[type="checkbox"].control-check,
  input[type="radio"].control-check {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--color-action);
  }
}

/* assets/css/src/components/prose.css */
/* Long-form content. These class names form the content contract of existing article bodies
   (.prose, .callout, .article-cta, .price-src, .cluster-link, .cost-nav) — styled from scratch. */
@layer components {
  .prose {
    /* Production caps every prose block at 72ch. Legal and article pages got a measure from their container; content
       page prose sits in a plain section container and ran 97 characters per line (Industries visual review).
       The cap is em, never ch: ch changes while Inter's subsets load (Pilot 1). 0.63086 is Inter's "0" advance at the
       prose weight, measured in Chromium, so this equals 72ch once Inter is in. */
    max-width: calc(72em * 0.63086);
    font-size: 1.0625rem;
    line-height: var(--leading-prose);
    color: var(--color-text-secondary);
  }

  /* Production's own opt-out for full-width prose (services, calculator). */
  .prose--wide {
    max-width: none;
  }

  @media (width >= 48rem) {
    .prose {
      font-size: var(--text-body-lg);
    }
  }

  .prose > * + * {
    margin-top: 1.1em;
  }

  .prose h2 {
    margin-top: 2.25em;
    font-size: clamp(1.5rem, 1.25rem + 1vw, 1.875rem);
    line-height: 1.22;
    color: var(--color-text);
    scroll-margin-top: calc(var(--header-h) + 1.5rem);
  }

  .prose h3 {
    margin-top: 1.8em;
    font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem);
    color: var(--color-text);
    scroll-margin-top: calc(var(--header-h) + 1.5rem);
  }

  .prose h2 + *,
  .prose h3 + * {
    margin-top: 0.6em;
  }

  /* Text that opens with a heading (legal pages) already sits below the section padding */
  .prose > h2:first-child,
  .prose > h3:first-child {
    margin-top: 0;
  }

  .prose strong {
    color: var(--color-text);
  }

  /* Small print inside legal and article text, e.g. "Останнє оновлення" */
  .prose .prose__meta {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }

  .prose ul,
  .prose ol {
    padding-left: 1.25em;
  }

  .prose li + li {
    margin-top: 0.45em;
  }

  .prose li::marker {
    color: var(--color-action);
  }

  .prose blockquote {
    padding-left: 1.25rem;
    border-left: 2px solid var(--color-action);
    color: var(--color-text);
  }

  .prose .table-scroll {
    margin-block: 1.75em;
  }

  /* Article diagrams: inline SVG with its own fallback colours, full column width */
  .prose figure {
    margin-block: 2em;
  }

  .prose figure svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .prose figcaption {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-tertiary);
  }

  /* "All articles" link that closes the article text */
  .prose .article-back {
    margin-top: 2.25em;
  }

  .prose .faq {
    margin-top: 1.5em;
  }

  .callout {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-action);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    color: var(--color-text);
  }

  .callout > * + * {
    margin-top: 0.6em;
  }

  .callout h2,
  .callout h3 {
    margin-top: 0;
    font-size: 1.0625rem;
  }

  .callout p {
    color: var(--color-text-secondary);
  }

  .prose .callout {
    margin-block: 1.75em;
    font-size: 1rem;
  }

  .article-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
  }

  .article-cta a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--weight-semibold);
  }

  /* Production ends some links with an arrow icon (article CTA, cluster link). Without a size rule the inline SVG fills
     the column: 491px on an article CTA and 652px on a cluster link at 1440 (Batch 1 layout scans). */
  .prose a > svg,
  .callout a > svg,
  .article-cta svg {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    vertical-align: -0.15em;
  }

  .price-src {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }

  .cluster-link {
    font-weight: var(--weight-semibold);
  }

  .cost-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .cost-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    text-decoration: none;
  }

  .cost-nav a:hover {
    border-color: var(--color-action);
    color: var(--color-link);
  }
}

/* assets/css/src/components/section-header.css */
@layer components {
  .section-header {
    display: grid;
    gap: var(--space-4);
    max-width: 46rem;
    margin-bottom: clamp(var(--space-7), 4vw, var(--space-9));
  }

  .section-header > * {
    margin: 0;
  }

  .section-header__lead {
    max-width: 40rem;
    font-size: var(--text-lead);
    line-height: 1.6;
    color: var(--color-text-secondary);
  }

  .section-header--center {
    justify-items: center;
    margin-inline: auto;
    text-align: center;
  }

  .section-header--compact {
    margin-bottom: var(--space-6);
  }

  .section-header--compact h2 {
    font-size: var(--text-h3);
    letter-spacing: var(--tracking-snug);
  }

  @media (width >= 64rem) {
    .section-header--split {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      max-width: none;
    }

    .section-header--split .section-header__lead {
      grid-column: 1;
    }

    .section-header--split .section-header__action {
      grid-column: 2;
      grid-row: 1 / span 3;
      align-self: end;
    }
  }
}

/* assets/css/src/components/table.css */
/* Data tables. .table-scroll is a focusable labelled region; edge shadows show there is more to scroll. */
@layer components {
  .table-scroll {
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background:
      linear-gradient(to right, var(--color-surface) 30%, transparent) left / 2.5rem 100% no-repeat local,
      linear-gradient(to left, var(--color-surface) 30%, transparent) right / 2.5rem 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgb(11 21 38 / 14%), transparent) left / 0.875rem 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgb(11 21 38 / 14%), transparent) right / 0.875rem 100% no-repeat scroll,
      var(--color-surface);
    scrollbar-width: thin;
  }

  .table-scroll:focus-visible {
    outline-offset: 2px;
  }

  .table-scroll > table,
  .data-table {
    width: 100%;
    min-width: 34rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
  }

  .table-scroll th,
  .table-scroll td,
  .data-table th,
  .data-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
  }

  .table-scroll thead th,
  .data-table thead th {
    background: var(--color-surface-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text);
  }

  .table-scroll tbody tr:last-child > *,
  .data-table tbody tr:last-child > * {
    border-bottom: 0;
  }

  .table-scroll tbody td:first-child,
  .table-scroll tbody th,
  .data-table tbody td:first-child {
    font-weight: var(--weight-medium);
    color: var(--color-text);
  }

  .table-scroll tbody tr,
  .data-table tbody tr {
    transition: background-color var(--dur-fast) var(--ease-standard);
  }

  .table-scroll tbody tr:hover,
  .data-table tbody tr:hover {
    background: color-mix(in srgb, var(--color-surface-muted) 60%, transparent);
  }

  .table-scroll caption,
  .data-table caption {
    padding: 0.75rem 1rem;
    caption-side: top;
    text-align: left;
    font-weight: var(--weight-semibold);
    color: var(--color-text);
  }

  @media (width < 48rem) {
    .table-scroll > table,
    .data-table {
      min-width: 30rem;
      font-size: var(--text-sm);
    }

    .table-scroll th,
    .table-scroll td {
      padding: 0.625rem 0.75rem;
    }
  }
}

/* assets/css/src/components/toc.css */
/* Table of contents: quiet rail with an animated active marker (scroll-spy sets aria-current). */
@layer components {
  .toc {
    font-size: var(--text-sm);
  }

  .toc h2 {
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.01em;
    color: var(--color-text-tertiary);
  }

  .toc ol {
    display: grid;
    gap: 1px;
    padding: 0;
    border-left: 1px solid var(--color-border);
    list-style: none;
  }

  .toc a {
    display: block;
    margin-left: -1px;
    padding: 0.4375rem 0.75rem;
    border-left: 2px solid transparent;
    line-height: 1.4;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-base) var(--ease-out),
      background-color var(--dur-fast);
  }

  .toc a:hover {
    color: var(--color-text);
    background: var(--color-surface-muted);
  }

  .toc a[aria-current="true"] {
    border-left-color: var(--color-action);
    color: var(--color-link);
    font-weight: var(--weight-medium);
  }

  /* Collapsible TOC for small screens */
  .toc-disclosure {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }

  .toc-disclosure > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 3rem;
    padding: 0.75rem 1rem;
    list-style: none;
    font-weight: var(--weight-semibold);
    cursor: pointer;
  }

  .toc-disclosure > summary::-webkit-details-marker {
    display: none;
  }

  .toc-disclosure > summary::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1.5px solid currentcolor;
    border-bottom: 1.5px solid currentcolor;
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--dur-base) var(--ease-out);
  }

  .toc-disclosure[open] > summary::after {
    transform: rotate(225deg) translateY(-2px);
  }

  .toc-disclosure .toc {
    padding: 0 1rem 1rem;
  }

  .toc-disclosure .toc h2 {
    display: none;
  }
}

/* assets/css/src/patterns/ai-assistant.css */
/* NBCS AI Assistant demo. Violet is used here because this is AI content. Prompts are .assistant__prompt (not the legacy .ai-q hook). */
@layer patterns {
  .section--ai {
    background:
      radial-gradient(48rem 28rem at 85% 0%, rgb(107 84 211 / 7%), transparent 70%),
      var(--color-surface-muted);
  }

  /* The AI layer begins here: a violet hairline continues the Business Central section above. */
  .section--ai::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(100% - 2 * var(--gutter), var(--container));
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-ai-tint-strong) 25%, var(--color-ai-tint-strong) 75%, transparent);
    transform: translateX(-50%);
  }

  .assistant {
    display: grid;
    gap: var(--space-6);
  }

  @media (width >= 64rem) {
    .assistant {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: var(--space-8);
      align-items: start;
    }
  }

  .assistant__intro {
    display: grid;
    gap: var(--space-5);
  }

  /* The intro grid already spaces its children; no extra header margin above the questions. */
  .assistant__intro .section-header {
    margin-bottom: 0;
  }

  .assistant__list {
    display: grid;
    gap: var(--space-2);
  }

  .assistant__prompt {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.8125rem 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 0.9375rem;
    font-weight: var(--weight-medium);
    line-height: 1.45;
    text-align: left;
    transition: border-color var(--dur-fast), box-shadow var(--dur-base), transform var(--dur-base) var(--ease-out);
  }

  .assistant__prompt svg {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    color: var(--color-ai);
  }

  .assistant__prompt:hover {
    border-color: var(--color-ai-tint-strong);
    box-shadow: var(--shadow-sm);
    transform: translateX(2px);
  }

  .assistant__prompt[aria-selected="true"] {
    border-color: var(--color-ai);
    box-shadow: 0 0 0 3px var(--color-ai-tint);
  }

  .assistant__prompt:focus-visible {
    outline-color: var(--color-ai);
  }

  .assistant__window {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
  }

  .assistant__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }

  .assistant__avatar {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: var(--nbcs-violet);
    color: #fff;
  }

  .assistant__avatar svg {
    width: 1.125rem;
    height: 1.125rem;
  }

  .assistant__name {
    display: grid;
    font-size: 0.9375rem;
    font-weight: var(--weight-semibold);
    line-height: 1.25;
  }

  .assistant__status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    color: var(--color-text-tertiary);
  }

  .assistant__status::before {
    content: "";
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--color-success);
  }

  .assistant__bar .demo-label {
    margin-left: auto;
  }

  .assistant__thread {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: 24rem;
    padding: clamp(var(--space-4), 2.5vw, var(--space-6));
  }

  .ai-msg {
    max-width: 100%;
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  .ai-msg--user {
    align-self: flex-end;
    max-width: min(85%, 30rem);
    padding: 0.625rem 0.875rem;
    border-radius: 14px 14px 4px;
    background: var(--nbcs-ink);
    color: #fff;
  }

  .ai-msg--assistant {
    max-width: 40rem;
    padding-left: var(--space-4);
    border-left: 2px solid var(--color-ai-tint-strong);
    color: var(--color-text-secondary);
  }

  .ai-msg--assistant strong {
    color: var(--color-text);
  }

  .ai-facts {
    display: grid;
    margin: var(--space-3) 0 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    list-style: none;
  }

  .ai-facts li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: 0.625rem 0.875rem;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
  }

  .ai-facts li + li {
    border-top: 1px solid var(--color-border);
  }

  .ai-facts b {
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--color-ai-text);
    white-space: nowrap;
  }

  .ai-typing {
    display: inline-flex;
    gap: 0.3125rem;
    padding: 0.625rem 0;
  }

  .ai-typing i {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--color-ai);
    animation: nbcs-typing 1s var(--ease-in-out) infinite;
  }

  .ai-typing i:nth-child(2) {
    animation-delay: 140ms;
  }

  .ai-typing i:nth-child(3) {
    animation-delay: 280ms;
  }

  .assistant__composer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 var(--space-4) var(--space-4);
    padding: 0.5rem 0.5rem 0.5rem 0.875rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    color: var(--color-text-tertiary);
  }

  .assistant__composer-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .assistant__composer-text.is-typing {
    color: var(--color-text);
  }

  .assistant__send {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    background: var(--nbcs-violet);
    color: #fff;
  }

  .assistant__send svg {
    width: 1rem;
    height: 1rem;
  }

  /* Message motion */
  .motion-ok .ai-msg.is-entering {
    animation: nbcs-panel-in var(--dur-base) var(--ease-out) both;
  }

  :where(.motion-ok .ai-msg.is-entering) .ai-facts li {
    animation: nbcs-rise var(--dur-slow) var(--ease-out) both;
  }

  :where(.motion-ok .ai-msg.is-entering) .ai-facts li:nth-child(1) { animation-delay: 80ms; }
  :where(.motion-ok .ai-msg.is-entering) .ai-facts li:nth-child(2) { animation-delay: 140ms; }
  :where(.motion-ok .ai-msg.is-entering) .ai-facts li:nth-child(3) { animation-delay: 200ms; }

  .motion-ok .ai-word {
    animation: nbcs-fade 180ms var(--ease-out) both;
  }

  .assistant__footnote {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }
}

/* assets/css/src/patterns/article.css */
/* Article layout: reading column + sticky TOC aside (right on desktop, disclosure on top below lg). */
@layer patterns {
  .article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    padding-block: clamp(var(--space-7), 4vw, var(--space-9)) var(--section-y);
  }

  .article-layout__main,
  .article-layout__aside {
    min-width: 0;
  }

  /* Reading measure: the article column keeps the approved 44rem measure at every width (the grid column sets it on
     desktop; below 64rem the single column would otherwise span the whole container). */
  .article-layout__main {
    max-width: 44rem;
  }

  @media (width >= 64rem) {
    .article-layout {
      grid-template-columns: minmax(0, 44rem) 17rem;
      justify-content: space-between;
      gap: var(--space-9);
    }

    .article-layout__aside {
      grid-column: 2;
      grid-row: 1;
    }

    .article-layout__main {
      grid-column: 1;
      grid-row: 1;
    }

    .article-layout__sticky {
      position: sticky;
      top: calc(var(--header-h) + var(--space-6));
      display: grid;
      gap: var(--space-6);
      max-height: calc(100dvh - var(--header-h) - var(--space-8));
      overflow-y: auto;
      scrollbar-width: thin;
    }

    .toc-disclosure {
      border: 0;
      background: none;
    }

    .toc-disclosure > summary {
      min-height: 0;
      padding: 0 0 var(--space-3);
      pointer-events: none;
    }

    .toc-disclosure > summary::after {
      display: none;
    }

    .toc-disclosure .toc {
      padding: 0;
    }
  }

  .toc__title {
    font-size: 1rem;
    font-weight: var(--weight-semibold);
  }

  @media (width >= 64rem) {
    .toc__title {
      font-size: var(--text-sm);
      color: var(--color-text-tertiary);
    }
  }

  .aside-cta {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    font-size: var(--text-sm);
  }

  .aside-cta strong {
    font-size: 1rem;
    color: var(--color-text);
  }

  .aside-cta p {
    color: var(--color-text-secondary);
  }

  @media (width < 64rem) {
    .aside-cta {
      display: none;
    }
  }

  /* Blocks the source page places after the article text (author box, collection link, back link) */
  .article-end {
    display: grid;
    gap: var(--space-5);
    margin-top: var(--space-8);
  }

  .article-end .author-card {
    margin-top: 0;
  }

  .author-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-9);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
  }

  .author-card img {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    object-fit: cover;
  }

  .author-card__name {
    font-weight: var(--weight-semibold);
    color: var(--color-text);
  }

  .author-card__meta {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }

  .reading-progress {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: var(--z-header);
    height: 2px;
    background: var(--color-action);
    transform: scaleX(0);
    transform-origin: left;
    pointer-events: none;
  }

  @supports (animation-timeline: scroll()) {
    .motion-ok .reading-progress {
      animation: nbcs-grow-x-linear linear both;
      animation-timeline: scroll(root block);
    }
  }
}

/* assets/css/src/patterns/calculator.css */
/* Cost calculator. The production inline script owns the DOM and the arithmetic, so this styles the ported markup
   (migration/recipes/calculator.mjs) and changes nothing it reads: #calcForm, the input ids and names, [data-step] /
   [data-dir] steppers and the result ids stay exactly as production wrote them. The legacy design is carried over on
   design-system tokens; the one deliberate change is the result link, which production rendered as a 20px-tall text
   link below the 24px minimum target size. */
@layer patterns {
  .calc {
    display: grid;
    gap: clamp(var(--space-6), 3vw, var(--space-8));
    align-items: start;
  }

  @media (width >= 64rem) {
    .calc {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
  }

  /* Question form */

  .calc__form {
    min-width: 0;
    padding: clamp(var(--space-5), 2.5vw, var(--space-7));
    border: 1px solid var(--color-border);
    border-top: 2px solid var(--color-text);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }

  .calc__form fieldset {
    min-width: 0;
    margin: 0 0 var(--space-8);
    padding: 0 0 var(--space-6);
    border: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .calc__form fieldset:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .calc__question {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
  }

  .calc__question legend {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
    font-size: var(--text-h4);
    font-weight: 700;
    line-height: 1.45;
  }

  .calc__num {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-action);
  }

  .calc__hint {
    clear: both;
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text-secondary);
  }

  /* Stepper: two buttons around a numeric input, all at least 44px tall */

  .stepper {
    display: flex;
    width: max-content;
    max-width: 100%;
    align-items: stretch;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
  }

  .stepper button {
    width: 2.75rem;
    min-height: 3rem;
    padding: 0;
    border: 0;
    background: var(--color-surface-muted);
    color: var(--color-action);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
  }

  .stepper input {
    width: 5.25rem;
    min-width: 0;
    min-height: 3rem;
    padding: var(--space-2) var(--space-1);
    border: 0;
    border-inline: 1px solid var(--color-border-strong);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: var(--text-h4);
    text-align: center;
  }

  .stepper input:focus-visible,
  .stepper button:focus-visible {
    outline: 3px solid var(--color-action);
    outline-offset: -3px;
  }

  /* Choice chips: the real radio/checkbox stays, the label span is the visible control */

  .choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .choice {
    position: relative;
    min-width: 0;
    max-width: 100%;
  }

  .choice input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
  }

  .choice__label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    min-height: 3rem;
    max-width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    line-height: 1.5;
    cursor: pointer;
  }

  .choice small {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
  }

  .choice input:checked + .choice__label {
    border-color: var(--color-action);
    background: var(--color-action);
    color: var(--color-on-action);
  }

  /* The secondary-grey note inside a chip has to invert with it, or it sits on the action colour at ~2:1 contrast.
     Scoped through .choice__label rather than .choice, to stay inside the selector-max-specificity budget. */
  input:checked + .choice__label small {
    color: var(--color-on-action);
  }

  .choice input:focus-visible + .choice__label {
    outline: 3px solid var(--color-action);
    outline-offset: 3px;
  }

  .choice input:disabled + .choice__label {
    border-color: var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-text-secondary);
    cursor: not-allowed;
  }

  .calc__subrow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-top: var(--space-6);
  }

  .calc__sub {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
  }

  .calc__sub-label {
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
  }

  /* Result panel */

  .calc-result {
    min-width: 0;
  }

  @media (width >= 64rem) {
    .calc-result {
      position: sticky;
      top: calc(var(--header-h, 4rem) + var(--space-6));
    }
  }

  .calc-panel {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
  }

  .calc-panel__bar {
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
  }

  .calc-panel__body {
    padding: clamp(var(--space-5), 2.5vw, var(--space-6));
  }

  .calc-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
  }

  .calc-row:first-child {
    padding-top: 0;
  }

  .calc-row__name {
    min-width: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
  }

  .calc-row__value {
    min-width: 0;
    max-width: 60%;
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    font-weight: 700;
    text-align: right;
    overflow-wrap: anywhere;
    color: var(--color-text);
  }

  .calc-total {
    padding: var(--space-6) 0 0;
  }

  .calc-total .calc-row__name {
    font-size: var(--text-body);
    color: var(--color-text);
  }

  .calc-total__value {
    display: block;
    margin-top: var(--space-3);
    font-family: var(--font-mono);
    font-size: clamp(1.375rem, 1rem + 1.1vw, 2rem);
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.035em;
    overflow-wrap: anywhere;
    color: var(--color-action);
  }

  .calc-total__note {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
  }

  .calc-note {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    line-height: 1.6;
    color: var(--color-text-secondary);
  }

  .calc-result .btn {
    width: 100%;
    margin-top: var(--space-6);
  }

  /* Production rendered this as a bare 20px-tall text link, below the 24px minimum target size. */
  .calc-aux {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-action);
    text-decoration: underline;
  }

  /* Comparison table built from divs with ARIA roles (the real <table> pattern is .prose-table) */

  .aria-table {
    max-width: 100%;
    margin: var(--space-6) 0;
    border-block: 2px solid var(--color-text);
    background: var(--color-surface);
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .aria-table__row {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1.8fr);
    gap: var(--space-4);
    min-width: 38rem;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
  }

  .aria-table__row:last-child {
    border-bottom: 0;
  }

  .aria-table__row span:nth-child(2) {
    font-family: var(--font-mono);
    color: var(--color-text);
  }

  .aria-table__head {
    background: var(--color-surface-muted);
    font-weight: 700;
    color: var(--color-text);
  }

  .aria-table__head span:nth-child(2) {
    font-family: inherit;
  }
}

/* assets/css/src/patterns/cookie.css */
/* Analytics consent card (behaviour kept: #cookieBar, [data-cookie], hidden attribute). */
@layer patterns {
  .cookie-bar {
    position: fixed;
    left: var(--gutter);
    bottom: var(--space-4);
    z-index: var(--z-cookie);
    display: grid;
    gap: var(--space-4);
    width: min(26rem, 100% - 2 * var(--gutter));
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    opacity: 1;
    transform: none;
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out),
      display var(--dur-slow) allow-discrete;
  }

  @starting-style {
    .cookie-bar {
      opacity: 0;
      transform: translateY(12px);
    }
  }

  .cookie-bar p {
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--color-text-secondary);
  }

  .cookie-bar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .cookie-bar__actions .btn {
    flex: 1;
  }

  /* Phones: the mobile action bar steps aside while this card is shown (mobile-bar.js), so the card uses the
     bottom edge itself instead of floating above an empty bar slot. */
  @media (width < 64rem) {
    .cookie-bar {
      bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    }
  }
}

/* assets/css/src/patterns/cta.css */
/* Consultation CTA band: dark section, light form card. */
@layer patterns {
  .cta {
    overflow: hidden;
    isolation: isolate;
  }

  .cta::before {
    content: "";
    position: absolute;
    inset: -20% 40% auto -20%;
    z-index: -1;
    height: 38rem;
    background: radial-gradient(closest-side, rgb(63 213 199 / 9%), transparent);
    pointer-events: none;
  }

  .cta__copy {
    --stack-gap: var(--space-5);

    max-width: 34rem;
  }

  .cta__copy h2 {
    font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem);
  }

  .cta__lead {
    font-size: var(--text-lead);
    line-height: 1.6;
    color: var(--color-text-secondary);
  }

  .check-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .check-list li {
    position: relative;
    padding-left: 2rem;
    line-height: 1.5;
    color: var(--color-text);
  }

  .check-list li::before {
    content: "";
    position: absolute;
    top: 0.125rem;
    left: 0;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--color-action-tint-strong);
  }

  .check-list li::after {
    content: "";
    position: absolute;
    top: 0.4375rem;
    left: 0.4375rem;
    width: 0.375rem;
    height: 0.625rem;
    border-right: 2px solid var(--color-action);
    border-bottom: 2px solid var(--color-action);
    transform: rotate(45deg);
  }

  .cta__direct {
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
  }

  .cta__direct a {
    color: var(--color-text);
    font-weight: var(--weight-medium);
  }

  .cta__form-card {
    padding: clamp(var(--space-5), 3vw, var(--space-7));
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: 0 32px 64px -32px rgb(0 0 0 / 55%);
  }

  .cta__form-title {
    margin-bottom: var(--space-5);
    font-size: 1.1875rem;
    font-weight: var(--weight-semibold);
  }
}

/* assets/css/src/patterns/features.css */
/* Feature grids, link rows, scenario (pain → outcome) cards and before/after comparison. */
@layer patterns {
  .features {
    display: grid;
    gap: var(--space-6) var(--space-6);
  }

  @media (width >= 48rem) {
    .features {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width >= 64rem) {
    .features--3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-8) var(--space-7);
    }
  }

  /* One bordered panel with column dividers (platform points), distinct from open icon grids */
  .features--panel {
    padding: clamp(var(--space-5), 3vw, var(--space-7));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
  }

  @media (width >= 64rem) {
    .features--panel {
      column-gap: 0;
    }

    .features--panel > .feature {
      padding-inline: var(--space-6);
    }

    .features--panel > .feature:first-child {
      padding-left: 0;
    }

    .features--panel > .feature:last-child {
      padding-right: 0;
    }

    .features--panel > .feature + .feature {
      border-left: 1px solid var(--color-border);
    }
  }

  .feature {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--space-1) var(--space-4);
    align-content: start;
  }

  .feature__icon {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    background: var(--color-action-tint);
    color: var(--color-action-hover);
  }

  .feature__icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .feature__title {
    font-size: 1.0625rem;
    line-height: 1.35;
  }

  .feature p {
    grid-column: 2;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
  }

  /* Merged platform benefit: the usual pain it replaces, shown under the benefit */
  .feature .feature__contrast {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-tertiary);
  }

  .feature__contrast-label {
    font-weight: var(--weight-semibold);
    color: var(--color-text-secondary);
  }

  .link-rows {
    display: grid;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
    list-style: none;
  }

  .link-row {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4) var(--space-2);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-standard);
  }

  .link-row:hover {
    background: var(--color-surface-muted);
  }

  .link-row__icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    background: var(--color-action-tint);
    color: var(--color-action-hover);
  }

  .link-row__icon svg,
  .link-row__arrow {
    width: 1.125rem;
    height: 1.125rem;
  }

  .link-row__title {
    display: block;
    font-weight: var(--weight-semibold);
  }

  .link-row__desc {
    display: block;
    margin-top: 0.125rem;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
  }

  .link-row__arrow {
    color: var(--color-text-tertiary);
    transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast);
  }

  .link-row:hover .link-row__arrow {
    color: var(--color-link);
    transform: translateX(3px);
  }

  /* Scenario cards: current pain → outcome in Business Central */
  .scenarios {
    display: grid;
    gap: var(--space-4);
  }

  @media (width >= 48rem) and (width < 64rem) {
    .scenarios {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-5);
    }
  }

  @media (width >= 64rem) {
    .scenario {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      grid-template-rows: 1fr auto;
    }

    .scenario__pain {
      grid-row: 1 / span 2;
      flex-direction: column;
      justify-content: center;
      padding: var(--space-6);
      border-right: 1px solid var(--color-border);
      border-bottom: 0;
      font-size: 1.1875rem;
      font-weight: var(--weight-medium);
      line-height: 1.45;
      color: var(--color-text);
    }
  }

  .scenario {
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--dur-base), box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }

  .scenario:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }

  .scenario__pain {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
  }

  .scenario__pain-label {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-warning) 12%, transparent);
    color: var(--color-warning);
  }

  .scenario__pain-label svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  .scenario__body {
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--space-2);
    padding: var(--space-5);
  }

  /* Link affordance: the arrow moves, the card lifts 2px; nothing scales. */
  .scenario__arrow {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    width: 1.125rem;
    height: 1.125rem;
    color: var(--color-text-tertiary);
    transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast);
  }

  .scenario:hover .scenario__arrow {
    color: var(--color-link);
    transform: translateX(3px);
  }

  .scenario__kicker {
    padding-right: 2rem;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-link);
  }

  .scenario__body h3 {
    font-size: 1.1875rem;
  }

  .scenario__body p {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
  }

  .scenario__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--color-border);
  }

  .scenario__metric {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
    padding: var(--space-3) var(--space-5);
  }

  .scenario__metric + .scenario__metric {
    border-left: 1px solid var(--color-border);
  }

  .scenario__metric span {
    overflow: hidden;
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .scenario__metric b {
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  @media (width < 30rem) {
    .scenario__metrics {
      grid-template-columns: minmax(0, 1fr);
    }

    .scenario__metric {
      display: flex;
      justify-content: space-between;
      padding-block: var(--space-2);
    }

    .scenario__metric + .scenario__metric {
      border-top: 1px solid var(--color-border);
      border-left: 0;
    }
  }

  .scenario__flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
  }

  .scenario__step {
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius-full);
    background: var(--color-action-tint);
    color: var(--color-action-hover);
    font-weight: var(--weight-medium);
  }

  .scenario__step--pending {
    background: var(--color-surface-muted);
    color: var(--color-text-tertiary);
  }

  .scenario__flow svg {
    width: 0.875rem;
    height: 0.875rem;
    color: var(--color-text-tertiary);
  }

  /* Before / after comparison, paired rows */
  .compare {
    margin-top: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
  }

  .compare__head,
  .compare__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  @media (width >= 48rem) {
    .compare__head,
    .compare__row {
      grid-template-columns: minmax(0, 1fr) 2.5rem minmax(0, 1fr);
      align-items: center;
    }
  }

  .compare__head {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-tertiary);
  }

  .compare__head-after {
    color: var(--color-link);
  }

  @media (width < 48rem) {
    .compare__head {
      display: none;
    }
  }

  .compare__rows {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .compare__row {
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
  }

  .compare__row + .compare__row {
    border-top: 1px solid var(--color-border);
  }

  .compare__before,
  .compare__after {
    display: flex;
    gap: var(--space-3);
    font-size: 0.9375rem;
    line-height: 1.5;
  }

  .compare__before {
    color: var(--color-text-tertiary);
  }

  .compare__after {
    font-weight: var(--weight-medium);
    color: var(--color-text);
  }

  .compare__before::before,
  .compare__after::before {
    content: "";
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    border-radius: 50%;
  }

  .compare__before::before {
    background:
      linear-gradient(45deg, transparent 45%, var(--color-text-tertiary) 45% 55%, transparent 55%) center / 0.5rem 0.5rem no-repeat,
      linear-gradient(-45deg, transparent 45%, var(--color-text-tertiary) 45% 55%, transparent 55%) center / 0.5rem 0.5rem no-repeat,
      var(--color-surface-muted);
  }

  .compare__after::before {
    background: var(--color-action-tint-strong);
    box-shadow: inset 0 0 0 4px var(--color-action-tint-strong), inset 0 0 0 5.5px var(--color-action);
  }

  .compare__arrow {
    display: none;
  }

  @media (width >= 48rem) {
    .compare__arrow {
      display: block;
      width: 1rem;
      height: 1rem;
      justify-self: center;
      color: var(--color-text-tertiary);
    }
  }

  .compare-heading {
    margin: clamp(var(--space-8), 5vw, var(--space-10)) 0 var(--space-5);
    font-size: var(--text-h3);
  }

  /* Subsections inside a merged homepage section */
  .subsection {
    margin-top: clamp(var(--space-9), 6vw, var(--space-11));
  }

  .subsection__head {
    display: grid;
    gap: var(--space-3);
    max-width: 40rem;
    margin-bottom: var(--space-7);
  }

  .subsection__title {
    font-size: var(--text-h3);
  }

  .subsection__lead {
    color: var(--color-text-secondary);
  }

  .approach {
    display: grid;
    gap: var(--space-9);
    margin-top: clamp(var(--space-9), 6vw, var(--space-11));
    padding-top: clamp(var(--space-8), 5vw, var(--space-10));
    border-top: 1px solid var(--color-border);
  }

  @media (width >= 64rem) {
    .approach {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-10);
    }
  }

  .approach__col {
    display: grid;
    align-content: start;
    gap: var(--space-4);
  }

  .mini-list {
    display: grid;
    gap: var(--space-5);
    margin: var(--space-3) 0 var(--space-2);
    padding: 0;
    list-style: none;
  }

  .mini-item {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--space-4);
  }

  .mini-item p {
    margin-top: 0.125rem;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
  }

  /* Services as a typographic two-column list: no icons, so it reads differently from the "why" features and the
     industry link rows next to it. */
  .mini-list--grid {
    gap: var(--space-5) var(--space-6);
  }

  /* Two columns when the list has room: full width below 64rem, or a wide half column from 80rem. */
  @media (width >= 36rem) and (width < 64rem), (width >= 80rem) {
    .mini-list--grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .mini-list--grid .mini-item {
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
  }

  .knowledge {
    display: grid;
    gap: var(--space-6);
    margin-top: clamp(var(--space-9), 6vw, var(--space-11));
    padding: clamp(var(--space-5), 3vw, var(--space-8));
    border-radius: var(--radius-lg);
    background: var(--color-surface-muted);
  }

  .knowledge__head {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
    max-width: 44rem;
  }

  .link-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--section-y-tight);
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: 1.0625rem;
    font-weight: var(--weight-semibold);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--dur-base), box-shadow var(--dur-slow) var(--ease-out);
  }

  .link-banner svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-link);
    transition: transform var(--dur-base) var(--ease-out);
  }

  .link-banner:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
  }

  .link-banner:hover svg {
    transform: translateX(4px);
  }
}

/* assets/css/src/patterns/footer.css */
/* Site footer (dark). Link inventory mirrors the current site. */
@layer patterns {
  .site-footer {
    padding-top: clamp(var(--space-9), 6vw, var(--space-11));
    padding-bottom: var(--space-6);
    background: var(--color-bg);
    color: var(--color-text-secondary);
  }

  .cta + .site-footer,
  .section.theme-dark + .site-footer {
    border-top: 1px solid var(--color-border);
  }

  .site-footer__top {
    display: grid;
    gap: var(--space-8);
  }

  @media (width >= 64rem) {
    .site-footer__top {
      grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
      gap: var(--space-9);
    }
  }

  .site-footer .brand {
    margin-right: 0;
  }

  .site-footer__about {
    max-width: 24rem;
    margin-top: var(--space-4);
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  .site-footer__contact {
    display: grid;
    gap: 0.25rem;
    margin-top: var(--space-5);
    font-size: 0.9375rem;
  }

  .site-footer__contact a {
    width: fit-content;
    color: var(--color-text);
    text-decoration: none;
  }

  .site-footer__contact a:hover {
    color: var(--color-link);
  }

  .site-footer__social {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-5);
  }

  .site-footer__social a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.375rem 0.875rem 0.375rem 0.625rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color var(--dur-fast), background-color var(--dur-fast);
  }

  .site-footer__social a:hover {
    border-color: var(--color-action);
    background: var(--color-action-tint);
  }

  .site-footer__social svg {
    width: 1rem;
    height: 1rem;
  }

  .site-footer__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7) var(--space-5);
  }

  @media (width >= 48rem) {
    .site-footer__nav {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .site-footer__title {
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    letter-spacing: 0.01em;
    color: var(--color-text-tertiary);
  }

  .site-footer__links {
    display: grid;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-footer__links a,
  .site-footer__links span {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    font-size: 0.9375rem;
    line-height: 1.35;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--dur-fast);
  }

  .site-footer__links a:hover {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    margin-top: clamp(var(--space-8), 5vw, var(--space-10));
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }

  .site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
  }

  .site-footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    color: var(--color-text-secondary);
    text-decoration: none;
  }

  .site-footer__legal a:hover {
    color: var(--color-text);
    text-decoration: underline;
  }
}

/* assets/css/src/patterns/header.css */
/* Global header, desktop navigation, language switch, icon buttons and the mobile drawer.
   Full inline navigation from 80rem; below that the same <nav> becomes a drawer. */
@layer patterns {
  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--color-bg);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-slow) var(--ease-out);
  }

  .site-header.is-scrolled {
    border-bottom-color: var(--color-border);
    box-shadow: 0 8px 24px -20px rgb(11 21 38 / 35%);
  }

  .site-header__bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: var(--header-h);
  }

  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    margin-right: auto;
    color: var(--color-text);
    text-decoration: none;
  }

  .brand__mark {
    width: 2rem;
    height: 2rem;
    transition: transform var(--dur-base) var(--ease-out);
  }

  .brand:hover .brand__mark {
    transform: translateY(-1px);
  }

  .brand__word {
    font-size: 1.1875rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
  }

  .brand__descriptor {
    display: block;
    margin-top: 0.1875rem;
    font-size: 0.6875rem;
    font-weight: var(--weight-medium);
    letter-spacing: 0.01em;
    color: var(--color-text-tertiary);
  }

  @media (width < 22.5rem) {
    .brand__text {
      display: none;
    }
  }

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

  .icon-btn {
    display: inline-grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
  }

  @media (width >= 24rem) {
    .icon-btn {
      width: 2.75rem;
      height: 2.75rem;
    }
  }

  .icon-btn svg {
    width: 1.25rem;
    height: 1.25rem;
  }

  .icon-btn:hover {
    background: var(--color-surface-muted);
    color: var(--color-text);
  }

  .lang-switch {
    display: inline-flex;
    padding: 2px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
  }

  .lang-switch a {
    display: inline-grid;
    place-items: center;
    min-width: 2.25rem;
    height: 2.125rem;
    padding-inline: 0.375rem;
    border-radius: 6px;
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-tertiary);
    text-decoration: none;
    transition: background-color var(--dur-fast), color var(--dur-fast);
  }

  .lang-switch a:hover {
    color: var(--color-text);
  }

  .lang-switch a[aria-current="true"] {
    background: var(--color-surface-muted);
    color: var(--color-text);
    box-shadow: inset 0 0 0 1px var(--color-border);
  }

  .site-header__cta {
    display: none;
  }

  @media (width >= 64rem) {
    .site-header__cta {
      display: inline-flex;
      margin-left: var(--space-2);
    }
  }

  /* Menu toggle with animated bars */
  .nav-toggle {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
  }

  .nav-toggle:hover {
    background: var(--color-surface-muted);
  }

  .nav-toggle__bars,
  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    display: block;
    width: 1.25rem;
    height: 1.5px;
    border-radius: 2px;
    background: currentcolor;
    transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast);
  }

  .nav-toggle__bars {
    position: relative;
  }

  .nav-toggle__bars::before,
  .nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
  }

  .nav-toggle__bars::before {
    transform: translateY(-6px);
  }

  .nav-toggle__bars::after {
    transform: translateY(6px);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bars {
    background: transparent;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
    background: currentcolor;
    transform: rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
    background: currentcolor;
    transform: rotate(-45deg);
  }

  /* Navigation list (shared by desktop bar and drawer) */
  .site-nav__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--color-text-secondary);
    font-weight: var(--weight-medium);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast);
  }

  .site-nav__link:hover,
  .site-nav__link[aria-current="page"] {
    color: var(--color-text);
  }

  .site-nav__link--ai .site-nav__ai-dot {
    width: 0.375rem;
    height: 0.375rem;
    margin-left: 0.375rem;
    border-radius: 50%;
    background: var(--color-ai);
  }

  .nav-scrim {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: calc(var(--z-drawer) - 1);
    background: var(--color-scrim);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-out), display var(--dur-base) allow-discrete;
  }

  .nav-scrim.is-visible {
    opacity: 1;
  }

  @starting-style {
    .nav-scrim.is-visible {
      opacity: 0;
    }
  }

  @media (width >= 80rem) {
    .site-header__bar {
      gap: var(--space-5);
    }

    .brand {
      margin-right: 0;
    }

    .site-nav {
      display: flex;
      flex: 1;
      justify-content: center;
    }

    .site-nav__list {
      gap: 0.125rem;
    }

    .site-nav__link {
      min-height: 2.5rem;
      padding: 0.5rem 0.625rem;
      border-radius: var(--radius-xs);
      font-size: 0.9375rem;
      white-space: nowrap;
    }

    .site-nav__link::after {
      content: "";
      position: absolute;
      left: 0.625rem;
      right: 0.625rem;
      bottom: 0.1875rem;
      height: 2px;
      border-radius: 2px;
      background: var(--color-action);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform var(--dur-slow) var(--ease-out);
    }

    .site-nav__link:hover::after,
    .site-nav__link[aria-current="page"]::after {
      transform: scaleX(1);
    }

    .site-nav__link--ai::after {
      background: var(--color-ai);
    }

    .site-nav__extra,
    .nav-toggle,
    .nav-scrim {
      display: none;
    }
  }

  @media (width < 80rem) {
    .site-nav {
      position: fixed;
      inset: var(--header-h) 0 0 auto;
      z-index: var(--z-drawer);
      display: flex;
      flex-direction: column;
      gap: var(--space-6);
      width: min(100%, 26rem);
      padding: var(--space-4) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom));
      overflow-y: auto;
      overscroll-behavior: contain;
      border-left: 1px solid var(--color-border);
      background: var(--color-bg);
      box-shadow: var(--shadow-lg);
      visibility: hidden;
      transform: translateX(100%);
      transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
    }

    .site-nav.is-open {
      visibility: visible;
      transform: none;
      transition: transform var(--dur-slow) var(--ease-out), visibility 0s;
    }

    .site-nav__list {
      flex-direction: column;
    }

    .site-nav__link {
      justify-content: space-between;
      min-height: 3.5rem;
      border-bottom: 1px solid var(--color-border);
      font-size: 1.1875rem;
      font-weight: var(--weight-semibold);
      color: var(--color-text);
    }

    .site-nav__link::after {
      content: "";
      width: 0.5rem;
      height: 0.5rem;
      margin-right: 0.25rem;
      border-top: 1.5px solid var(--color-text-tertiary);
      border-right: 1.5px solid var(--color-text-tertiary);
      transform: rotate(45deg);
      transition: transform var(--dur-base) var(--ease-out);
    }

    .site-nav__link:hover::after {
      transform: translateX(3px) rotate(45deg);
    }

    .site-nav__link[aria-current="page"] {
      color: var(--color-link);
    }

    .site-nav__link--ai .site-nav__ai-dot {
      margin-right: auto;
    }

    :where(.site-nav.is-open) .site-nav__list > li,
    :where(.site-nav.is-open) .site-nav__extra {
      animation: nbcs-rise var(--dur-slow) var(--ease-out) both;
    }

    :where(.site-nav.is-open) .site-nav__list > li:nth-child(2) { animation-delay: 20ms; }
    :where(.site-nav.is-open) .site-nav__list > li:nth-child(3) { animation-delay: 40ms; }
    :where(.site-nav.is-open) .site-nav__list > li:nth-child(4) { animation-delay: 60ms; }
    :where(.site-nav.is-open) .site-nav__list > li:nth-child(5) { animation-delay: 80ms; }
    :where(.site-nav.is-open) .site-nav__list > li:nth-child(6) { animation-delay: 100ms; }
    :where(.site-nav.is-open) .site-nav__list > li:nth-child(7) { animation-delay: 120ms; }
    :where(.site-nav.is-open) .site-nav__extra { animation-delay: 140ms; }

    .site-nav__extra {
      display: grid;
      gap: var(--space-4);
    }

    .site-nav__contacts {
      display: grid;
      gap: var(--space-2);
      font-size: var(--text-sm);
    }

    .site-nav__contacts a {
      display: inline-flex;
      align-items: center;
      gap: 0.625rem;
      min-height: 2.75rem;
      color: var(--color-text-secondary);
      text-decoration: none;
    }

    .site-nav__contacts svg {
      width: 1.125rem;
      height: 1.125rem;
      color: var(--color-text-tertiary);
    }
  }

  @media (width < 48rem) {
    .site-nav {
      width: 100%;
      border-left: 0;
    }
  }

  @media (width < 23.4375rem) {
    .site-header__tg {
      display: none;
    }
  }

  :root.is-nav-open {
    overflow: hidden;
  }
}

/* assets/css/src/patterns/hero.css */
/* Homepage hero (dark) + facts row. The h1 never starts transparent (LCP-safe entrance). */
@layer patterns {
  .hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-top: clamp(var(--space-8), 6vw, var(--space-11));
    background: var(--color-bg);
    color: var(--color-text);
  }

  .hero::before {
    content: "";
    position: absolute;
    top: -18rem;
    right: -12rem;
    z-index: -1;
    width: 56rem;
    height: 56rem;
    background: radial-gradient(closest-side, rgb(63 213 199 / 11%), transparent 70%);
    pointer-events: none;
  }

  .hero__inner {
    display: grid;
    gap: clamp(var(--space-8), 5vw, var(--space-10));
    align-items: center;
  }

  @media (width >= 64rem) {
    .hero__inner {
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }
  }

  .hero__copy {
    display: grid;
    gap: var(--space-5);
    justify-items: start;
  }

  /* em, not ch: Inter ships as unicode-range subsets and the Cyrillic subset has no "0" glyph, so a ch cap resolves to
     a different width as each subset arrives and the heading wraps and unwraps during load. 1366/2048 is Inter's "0"
     advance at the heading weight in Chromium, so this equals the approved 14ch once Inter is in. Same fix, and the
     same reasoning, as the sub-page heroes in page-hero.css. Regression test: tools/visual/font-race.mjs, whose control
     re-injects the legacy cap — its pattern expects max-width to follow the brace, so keep this comment outside the
     block or the control is silently never applied. */
  .hero__title {
    max-width: calc(14em * 1366 / 2048);
    font-size: var(--text-display);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-display);
    font-weight: 700;
  }

  .hero__title-accent {
    display: block;
    color: var(--color-action);
  }

  .hero__lead {
    max-width: 36rem;
    font-size: var(--text-lead);
    line-height: 1.6;
    color: var(--color-text-secondary);
  }

  .hero__actions {
    --cluster-gap: var(--space-3);

    margin-top: var(--space-2);
  }

  .hero__note {
    max-width: 34rem;
    font-size: var(--text-sm);
    line-height: 1.55;
    color: var(--color-text-tertiary);
  }

  @media (width < 30rem) {
    .hero__actions,
    .hero__actions .btn {
      width: 100%;
    }
  }

  .hero__visual {
    position: relative;
    min-width: 0;
  }

  .facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-6);
    margin: clamp(var(--space-8), 5vw, var(--space-10)) 0 0;
    padding: var(--space-6) 0 clamp(var(--space-6), 4vw, var(--space-8));
    border-top: 1px solid var(--color-border);
    list-style: none;
  }

  @media (width >= 64rem) {
    .facts {
      grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr);
    }
  }

  .facts__value {
    display: block;
    font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
    font-weight: var(--weight-heading);
    line-height: 1.3;
    letter-spacing: var(--tracking-snug);
    color: var(--color-text);
  }

  .facts__label {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--color-text-tertiary);
  }

  .hero__stack {
    grid-column: 1 / -1;
    margin-top: calc(-1 * var(--space-3));
    padding-bottom: clamp(var(--space-6), 4vw, var(--space-8));
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }

  .hero__stack strong {
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
  }

  /* Entrance (about 0.7s, never blocks use): positioning → headline → copy → actions → product frame last.
     The h1 and the lead (the largest text, LCP candidates) are never transparent: they only settle a few pixels. */
  :where(.motion-ok .hero.is-ready) .hero__copy > * {
    animation: nbcs-rise var(--dur-reveal) var(--ease-out) both;
  }

  :where(.motion-ok .hero.is-ready) .hero__copy > .badge {
    animation-name: nbcs-fade;
  }

  :where(.motion-ok .hero.is-ready) .hero__title {
    animation-name: nbcs-rise-solid;
    animation-delay: 40ms;
  }

  :where(.motion-ok .hero.is-ready) .hero__lead {
    animation-name: nbcs-rise-solid;
    animation-delay: 100ms;
  }

  :where(.motion-ok .hero.is-ready) .hero__actions {
    animation-delay: 150ms;
  }

  :where(.motion-ok .hero.is-ready) .hero__note {
    animation-delay: 190ms;
  }

  :where(.motion-ok .hero.is-ready) .hero__visual {
    animation: nbcs-frame-in 560ms var(--ease-out) 230ms both;
  }

  :where(.motion-ok .hero.is-ready) .facts,
  :where(.motion-ok .hero.is-ready) .hero__stack {
    animation: nbcs-fade var(--dur-reveal) var(--ease-out) 320ms both;
  }

  @media (width < 48rem) {
    :where(.motion-ok .hero.is-ready) .hero__visual {
      animation-duration: 380ms;
      animation-delay: 160ms;
    }
  }
}

/* assets/css/src/patterns/mobile-bar.css */
/* Bottom mobile action bar (Call + Free consultation). Hidden near forms/footer and while the drawer is open.
   The footer reserves its height (inside the dark footer, so no light band appears below it) and is never covered. */
@layer patterns {
  .mobile-bar {
    display: none;
  }

  @media (width < 64rem) {
    .has-mobile-bar .site-footer {
      padding-bottom: calc(var(--space-6) + var(--mobile-bar-h) + env(safe-area-inset-bottom));
    }

    .mobile-bar {
      position: fixed;
      inset: auto 0 0;
      z-index: var(--z-mobile-bar);
      display: flex;
      gap: var(--space-2);
      padding: 0.625rem var(--gutter) calc(0.625rem + env(safe-area-inset-bottom));
      border-top: 1px solid var(--color-border);
      background: var(--color-bg);
      box-shadow: 0 -12px 28px -20px rgb(11 21 38 / 30%);
      transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-standard),
        visibility 0s linear 0s;
    }

    .mobile-bar.is-hidden {
      visibility: hidden;
      opacity: 0;
      transform: translateY(calc(100% + 0.5rem));
      transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-standard),
        visibility 0s linear var(--dur-slow);
    }

    .mobile-bar .btn {
      min-height: 3rem;
    }

    .mobile-bar__call {
      flex: none;
      min-width: 3rem;
    }

    .mobile-bar__cta {
      flex: 1;
    }

    .mobile-bar__call-label {
      display: none;
    }
  }

  /* Keep “Безкоштовна консультація” on one line down to 320px. */
  @media (width < 22.5rem) {
    .mobile-bar {
      padding-inline: 0.75rem;
    }

    .mobile-bar__cta {
      padding-inline: 0.625rem;
      font-size: 0.9375rem;
    }
  }

  @media (width >= 26.875rem) and (width < 64rem) {
    .mobile-bar__call-label {
      display: inline;
    }
  }
}

/* assets/css/src/patterns/module-explorer.css */
/* Business Central module explorer: a single tablist + product panel.
   Keeps data-eco / data-layer / #eco-panel hooks; layer changes are separated visually, not with extra ARIA groups. */
@layer patterns {
  .explorer {
    display: grid;
    gap: var(--space-6);
  }

  @media (width >= 64rem) {
    .explorer {
      grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
      gap: var(--space-8);
      align-items: start;
    }
  }

  .explorer__core {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }

  .explorer__core strong {
    font-size: 1rem;
    font-weight: var(--weight-semibold);
    color: var(--color-text);
  }

  .explorer__tabs {
    display: grid;
    gap: 0.125rem;
  }

  .explorer__tab {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    font-weight: var(--weight-medium);
    text-align: left;
    transition: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast), box-shadow var(--dur-base);
  }

  .explorer__tab svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-tertiary);
    transition: color var(--dur-fast);
  }

  .explorer__tab:hover {
    background: var(--color-surface);
    color: var(--color-text);
  }

  .explorer__tab[aria-selected="true"] {
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-border), var(--shadow-sm);
    color: var(--color-text);
  }

  .explorer__tab[aria-selected="true"] svg {
    color: var(--color-action);
  }

  .explorer__tab[data-layer="ai"] svg,
  .explorer__tab[data-layer="ai"][aria-selected="true"] svg {
    color: var(--color-ai);
  }

  .explorer__tab[data-layer="ai"][aria-selected="true"] {
    box-shadow: inset 0 0 0 1px var(--color-ai-tint-strong), var(--shadow-sm);
  }

  @media (width >= 64rem) {
    .explorer__tabs > [data-layer="core"] + [data-layer="data"],
    .explorer__tabs > [data-layer="data"] + [data-layer="ai"] {
      margin-top: var(--space-3);
    }
  }

  @media (width < 64rem) {
    .explorer__nav {
      min-width: 0;
      margin-inline: calc(-1 * var(--gutter));
      padding-inline: var(--gutter);
      overflow-x: auto;
      scroll-padding-inline: var(--gutter);
      scroll-snap-type: x proximity;
      scrollbar-width: none;
    }

    .explorer__tabs {
      display: flex;
      gap: var(--space-2);
      width: max-content;
      padding-bottom: var(--space-1);
    }

    .explorer__tab {
      width: auto;
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-full);
      background: var(--color-surface);
      white-space: nowrap;
      scroll-snap-align: start;
    }

    .explorer__tab[aria-selected="true"] {
      border-color: var(--color-action);
      background: var(--color-action-tint);
      box-shadow: none;
    }

    .explorer__tab[data-layer="ai"][aria-selected="true"] {
      border-color: var(--color-ai);
      background: var(--color-ai-tint);
      box-shadow: none;
    }
  }

  .explorer__panel {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
  }

  .explorer__panel:focus-visible {
    outline-offset: 4px;
  }

  .explorer__panel-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 2.75rem;
    padding: 0.375rem var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }

  .explorer__panel-bar svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-action);
  }

  .explorer__panel[data-layer="ai"] .explorer__panel-bar svg {
    color: var(--color-ai);
  }

  .explorer__panel-bar strong {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
  }

  .explorer__panel-bar .demo-label {
    margin-left: auto;
  }

  /* explorer.js reserves the height of the tallest module (min-height), so switching never shifts the page. */
  .explorer__content {
    display: grid;
    align-content: start;
    gap: var(--space-4);
    padding: clamp(var(--space-5), 3vw, var(--space-7));
  }

  .explorer__content h3 {
    font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
    letter-spacing: var(--tracking-heading);
  }

  .explorer__content p {
    max-width: 38rem;
    color: var(--color-text-secondary);
  }

  /* Capabilities of the selected module */
  .explorer__caps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .explorer__caps li {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    line-height: 1.5;
    color: var(--color-text-secondary);
  }

  .explorer__panel[data-layer="ai"] .explorer__caps li {
    border-color: var(--color-ai-tint-strong);
    background: var(--color-ai-tint);
    color: var(--color-ai-text);
  }

  .metrics {
    display: grid;
    margin-top: var(--space-2);
    border-top: 1px solid var(--color-border);
  }

  .metric {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: center;
    padding-block: 0.875rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9375rem;
  }

  .metric__label {
    color: var(--color-text-secondary);
  }

  .metric__meter {
    height: 0.375rem;
    overflow: hidden;
    border-radius: var(--radius-full);
    background: var(--color-surface-sunken);
  }

  .metric__fill {
    display: block;
    width: var(--value);
    height: 100%;
    border-radius: inherit;
    background: var(--color-action);
    transform-origin: left;
  }

  .explorer__panel[data-layer="ai"] .metric__fill {
    background: var(--color-ai);
  }

  .metric__value {
    min-width: 5.5rem;
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
  }

  @media (width < 30rem) {
    .metric {
      grid-template-columns: minmax(0, 1fr) auto;
      gap: var(--space-2) var(--space-3);
    }

    .metric__meter {
      grid-column: 1 / -1;
      grid-row: 2;
    }
  }

  /* Panel switch motion */
  .motion-ok .explorer__content.is-entering {
    animation: nbcs-panel-in var(--dur-base) var(--ease-out) both;
  }

  :where(.motion-ok .explorer__content.is-entering) .metric__fill {
    animation: nbcs-grow-x 480ms var(--ease-out) 60ms both;
  }
}

/* assets/css/src/patterns/page-hero.css */
/* Inner page hero: breadcrumb, eyebrow, h1, lead, optional actions, article meta. Single column. */
@layer patterns {
  .page-hero {
    padding-block: clamp(var(--space-6), 4vw, var(--space-9)) clamp(var(--space-8), 5vw, var(--space-10));
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(to bottom, var(--color-surface-muted), var(--color-bg));
  }

  .page-hero__inner {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
  }

  .page-hero .breadcrumb {
    margin-bottom: var(--space-3);
  }

  /* Heading caps are em, not ch. Inter ships as unicode-range subsets and the Cyrillic subset has no "0" glyph, so ch
     resolved to 0.595em (fallback), then 0.5em (Cyrillic loaded, Latin pending), then 0.667em (Inter complete), and the
     heading wrapped and unwrapped during load. 1366/2048 is Inter's "0" advance at the heading weight 650 (Chromium;
     the default-weight advance 1292/2048 matches fontkit), so these caps equal the approved 24ch / 28ch exactly once
     Inter has loaded. Regression test: tools/visual/font-race.mjs. */
  .page-hero h1 {
    max-width: calc(24em * 1366 / 2048);
  }

  .page-hero--article h1 {
    max-width: calc(28em * 1366 / 2048);
  }

  .page-hero__lead {
    max-width: 44rem;
    font-size: var(--text-lead);
    line-height: 1.6;
    color: var(--color-text-secondary);
  }

  .page-hero__actions {
    margin-top: var(--space-3);
  }

  .page-hero__note {
    max-width: 44rem;
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }

  .article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }

  .article-meta__author {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-weight: var(--weight-medium);
    color: var(--color-text);
  }

  .article-meta__author img {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
  }

  .article-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }

  /* Every meta icon, the author's included: production articles mark the author with an icon, not a photo. Without a
     size an inline SVG fills the line (about 115px) and pushes the name over the next item (Pilot 2 visual review). */
  .article-meta svg {
    flex: none;
    width: 1rem;
    height: 1rem;
  }
}

/* assets/css/src/patterns/post-card.css */
/* Article listing cards + blog index toolbar/filters. Keeps .post-card[data-group], #postGrid, [data-filter]. */
@layer patterns {
  .post-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    transition:
      border-color var(--dur-base) var(--ease-standard),
      box-shadow var(--dur-slow) var(--ease-out),
      transform var(--dur-slow) var(--ease-out),
      opacity var(--dur-base);
  }

  .post-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }

  .post-card .tag {
    align-self: flex-start;
  }

  .post-card[data-group="ai"] .tag {
    background: var(--color-ai-tint);
    color: var(--color-ai-text);
  }

  .post-card__title {
    font-size: 1.125rem;
    font-weight: var(--weight-semibold);
    line-height: 1.35;
    letter-spacing: -0.006em;
    color: var(--color-text);
    transition: color var(--dur-fast);
  }

  .post-card:hover .post-card__title {
    color: var(--color-link);
  }

  .post-card__excerpt {
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
  }

  /* Production renders this line as an inline-flex link ending with an arrow icon: the icon keeps the text's line and
     its own size, instead of wrapping below it (Industries visual review). */
  .post-card__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }

  .post-card__meta svg {
    flex: none;
    width: 1rem;
    height: 1rem;
  }

  .post-grid {
    display: grid;
    gap: var(--space-4);
  }

  @media (width >= 48rem) {
    .post-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-5);
    }
  }

  @media (width >= 64rem) {
    .post-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .blog-toolbar {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-7);
  }

  .filter-chips {
    display: flex;
    gap: var(--space-2);
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) var(--space-1);
    overflow-x: auto;
    scrollbar-width: none;
  }

  @media (width >= 64rem) {
    .filter-chips {
      flex-wrap: wrap;
      margin-inline: 0;
      padding-inline: 0;
      overflow: visible;
    }
  }

  .tagchip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.5rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    white-space: nowrap;
    transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast);
  }

  .tagchip:hover {
    border-color: var(--color-text-secondary);
    color: var(--color-text);
  }

  .tagchip[aria-pressed="true"] {
    border-color: var(--color-action);
    background: var(--color-action-tint);
    color: var(--color-action-hover);
  }

  .tagchip__count {
    font-variant-numeric: tabular-nums;
    color: var(--color-text-tertiary);
  }

  .blog-toolbar__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2) var(--space-6);
  }

  .blog-toolbar__status {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }

  .category-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }

  .category-links a {
    color: var(--color-text-secondary);
  }

  .motion-ok .post-card.is-filter-in {
    animation: nbcs-pop var(--dur-slow) var(--ease-out) both;
  }
}

/* assets/css/src/patterns/pricing.css */
/* Pricing cards. No invented "recommended" emphasis; prices use tabular figures. */
@layer patterns {
  .price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: clamp(var(--space-5), 2.5vw, var(--space-7));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition: border-color var(--dur-base), box-shadow var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  }

  .price-card:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }

  .price-card__head {
    display: grid;
    align-content: start;
    gap: 0.25rem;
  }

  .price-card__name {
    font-size: 1.125rem;
    font-weight: var(--weight-semibold);
  }

  .price-card__term {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }

  .price-card__term svg {
    width: 1rem;
    height: 1rem;
  }

  .price-card__price {
    font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem);
    font-weight: var(--weight-heading);
    line-height: 1.15;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
  }

  .price-card__unit {
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    letter-spacing: 0;
    color: var(--color-text-tertiary);
  }

  .price-card__scope {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
  }

  .price-card__list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-4) 0 0;
    border-top: 1px solid var(--color-border);
    list-style: none;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
  }

  .price-card__list li {
    position: relative;
    padding-left: 1.5rem;
  }

  .price-card__list li::before {
    content: "";
    position: absolute;
    top: 0.4375rem;
    left: 0.25rem;
    width: 0.375rem;
    height: 0.625rem;
    border-right: 2px solid var(--color-action);
    border-bottom: 2px solid var(--color-action);
    transform: rotate(45deg);
  }

  /* Icon variant. Production writes its own check as an inline <svg> in each item (every one of the 9 pages using
     .flist does), and the migration keeps that markup verbatim. The generated tick would then render a second
     checkmark, and an unsized svg fills its grid column (the reset makes svg display:block), so the variant sizes the
     icon and drops the pseudo-element instead. */
  .price-card__list--icons li {
    display: grid;
    grid-template-columns: 1.25rem 1fr;
    gap: var(--space-2);
    align-items: start;
    padding-left: 0;
  }

  .price-card__list--icons li::before {
    content: none;
  }

  .price-card__list--icons li > svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-action);
  }

  .price-card__badge {
    position: absolute;
    top: 0;
    left: clamp(var(--space-5), 2.5vw, var(--space-7));
    padding: 0.1875rem 0.75rem;
    border-radius: var(--radius-full);
    background: var(--color-action);
    color: var(--color-on-action);
    font-weight: var(--weight-semibold);
    transform: translateY(-50%);
  }

  .price-card__footer {
    margin-top: auto;
    padding-top: var(--space-2);
  }

  .pricing__addon {
    display: grid;
    gap: var(--space-2) var(--space-6);
    margin-top: var(--space-5);
    padding: var(--space-5);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
  }

  @media (width >= 48rem) {
    .pricing__addon {
      grid-template-columns: minmax(0, 1fr) auto auto;
      align-items: center;
    }
  }

  .pricing__addon-name {
    font-weight: var(--weight-semibold);
  }

  .pricing__addon-value {
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
  }

  .pricing__note {
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }

  .pricing__actions {
    margin-top: var(--space-6);
  }

  .price-card--featured {
    border-color: var(--color-action);
    box-shadow: 0 0 0 1px var(--color-action);
  }

  .price-card--featured:hover {
    border-color: var(--color-action);
    box-shadow: 0 0 0 1px var(--color-action), var(--shadow-md);
  }

  .price-card__desc {
    color: var(--color-text-secondary);
  }

  /* Cards share row tracks on desktop so names, prices and lists line up across cards. */
  .pricing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6) var(--space-5);
  }

  .pricing-grid--3 {
    --rows: 3;
  }

  .pricing-grid--5 {
    --rows: 5;
  }

  @media (width >= 64rem) {
    .pricing-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: var(--space-6);
    }

    .pricing-grid > .price-card {
      display: grid;
      grid-row: span var(--rows, 3);
      grid-template-rows: subgrid;
      row-gap: var(--space-4);
    }
  }
}

/* assets/css/src/patterns/product-frame.css */
/* Business Central-style product UI frame (demo data). Always rendered on a light surface. */
@layer patterns {
  .product-frame {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
  }

  .theme-dark .product-frame {
    box-shadow: 0 0 0 1px rgb(255 255 255 / 8%), 0 40px 80px -32px rgb(0 0 0 / 60%);
  }

  .product-frame__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 2.75rem;
    padding: 0.375rem var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-muted);
  }

  .product-frame__app {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: var(--weight-semibold);
    white-space: nowrap;
  }

  .product-frame__app svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-action);
  }

  .product-frame__page {
    /* A flex item defaults to min-width:auto, so this could not shrink below its text and the demo label (margin-left:
       auto) overlapped it at 390 and 375px. min-width:0 lets the ellipsis actually engage. */
    min-width: 0;
    overflow: hidden;
    color: var(--color-text-tertiary);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .product-frame__bar .demo-label {
    margin-left: auto;
  }

  .product-frame__body {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  @media (width >= 48rem) {
    .product-frame__body {
      padding: var(--space-5);
    }
  }

  .pf-tabs {
    display: flex;
    gap: var(--space-1);
    overflow: hidden;
    border-bottom: 1px solid var(--color-border);
  }

  .pf-tabs span {
    padding: 0.25rem 0.625rem 0.625rem;
    color: var(--color-text-tertiary);
    white-space: nowrap;
  }

  .pf-tabs .is-active {
    box-shadow: inset 0 -2px 0 var(--color-action);
    color: var(--color-text);
    font-weight: var(--weight-medium);
  }

  .pf-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .pf-kpi {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 10px;
  }

  .pf-kpi__label {
    overflow: hidden;
    color: var(--color-text-tertiary);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .pf-kpi__value {
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
    font-weight: var(--weight-heading);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  .trend {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    width: fit-content;
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
    color: var(--color-success);
  }

  .trend svg {
    width: 0.875rem;
    height: 0.875rem;
  }

  .trend--down {
    color: var(--color-warning);
  }

  .pf-split {
    display: grid;
    gap: var(--space-3);
  }

  @media (width >= 36rem) {
    .pf-split {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    }
  }

  .pf-chart {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 10px;
  }

  .pf-chart__head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem var(--space-3);
  }

  .pf-chart__head strong {
    font-weight: var(--weight-semibold);
  }

  .pf-chart__head span {
    color: var(--color-text-tertiary);
  }

  .pf-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 7.5rem;
    padding-bottom: 1px;
    background: linear-gradient(to top, var(--color-border) 1px, transparent 1px) left bottom / 100% 25%;
  }

  .pf-bars span {
    flex: 1;
    height: var(--value);
    border-radius: 4px 4px 0 0;
    background: color-mix(in srgb, var(--color-action) 78%, white);
    transform-origin: bottom;
  }

  .pf-bars span:last-child {
    background: var(--color-action);
  }

  .pf-axis {
    display: flex;
    justify-content: space-between;
    color: var(--color-text-tertiary);
  }

  .pf-insight {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-ai-tint-strong);
    border-radius: 10px;
    background: var(--color-ai-tint);
  }

  .pf-insight__label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: var(--weight-semibold);
    color: var(--color-ai-text);
  }

  .pf-insight__label svg {
    width: 1rem;
    height: 1rem;
  }

  .pf-insight p {
    line-height: 1.5;
    color: var(--color-text-secondary);
  }

  .pf-insight strong {
    color: var(--color-text);
  }

  /* Motion: bars grow once the frame is revealed; the AI insight follows the figures */
  :where(.motion-ok .product-frame.is-live) .pf-bars span {
    animation: nbcs-grow-y 520ms var(--ease-out) both;
  }

  :where(.motion-ok .product-frame.is-live) .pf-bars span:nth-child(2) { animation-delay: 40ms; }
  :where(.motion-ok .product-frame.is-live) .pf-bars span:nth-child(3) { animation-delay: 80ms; }
  :where(.motion-ok .product-frame.is-live) .pf-bars span:nth-child(4) { animation-delay: 120ms; }
  :where(.motion-ok .product-frame.is-live) .pf-bars span:nth-child(5) { animation-delay: 160ms; }
  :where(.motion-ok .product-frame.is-live) .pf-bars span:nth-child(6) { animation-delay: 200ms; }
  :where(.motion-ok .product-frame.is-live) .pf-bars span:nth-child(7) { animation-delay: 240ms; }

  :where(.motion-ok .product-frame.is-live) .pf-insight {
    animation: nbcs-rise var(--dur-reveal) var(--ease-out) 380ms both;
  }
}

/* assets/css/src/patterns/search.css */
/* Site search dialog (static generated index, client-side ranking). */
@layer patterns {
  .search-dialog {
    width: min(46rem, 100% - 2rem);
    max-width: none;
    max-height: min(44rem, 100dvh - 6rem);
    margin: max(4rem, 9vh) auto auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
    transition:
      opacity var(--dur-base) var(--ease-out),
      transform var(--dur-base) var(--ease-out),
      overlay var(--dur-base) allow-discrete,
      display var(--dur-base) allow-discrete;
  }

  .search-dialog[open] {
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: none;
  }

  @starting-style {
    .search-dialog[open] {
      opacity: 0;
      transform: translateY(-8px) scale(0.985);
    }
  }

  .search-dialog::backdrop {
    background: rgb(8 16 30 / 0%);
    transition: background-color var(--dur-base) var(--ease-out), overlay var(--dur-base) allow-discrete,
      display var(--dur-base) allow-discrete;
  }

  .search-dialog[open]::backdrop {
    background: var(--color-scrim);
  }

  @starting-style {
    .search-dialog[open]::backdrop {
      background: rgb(8 16 30 / 0%);
    }
  }

  .search__field {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0.5rem var(--space-3) 0.5rem var(--space-5);
    border-bottom: 1px solid var(--color-border);
  }

  .search__field > svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-text-tertiary);
  }

  .search__input {
    flex: 1;
    min-width: 0;
    min-height: 3.5rem;
    border: 0;
    background: transparent;
    font-size: 1.125rem;
    color: var(--color-text);
  }

  .search__input::placeholder {
    color: var(--color-text-tertiary);
  }

  .search__input:focus-visible {
    outline: none;
  }

  .search__input::-webkit-search-cancel-button {
    display: none;
  }

  .search__field:focus-within {
    box-shadow: inset 0 -2px 0 var(--color-action);
  }

  .search__filters {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    overflow-x: auto;
    border-bottom: 1px solid var(--color-border);
    scrollbar-width: none;
  }

  /* Phones scroll the chip row; wider dialogs wrap it so no filter is clipped. */
  @media (width >= 48rem) {
    .search__filters {
      flex-wrap: wrap;
      overflow-x: visible;
    }
  }

  .search__filter {
    flex: none;
    min-height: 2.25rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-secondary);
    transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
  }

  .search__filter:hover {
    color: var(--color-text);
  }

  .search__filter[aria-pressed="true"] {
    border-color: var(--color-action);
    background: var(--color-action-tint);
    color: var(--color-action-hover);
  }

  .search__filter-count {
    margin-left: 0.25rem;
    color: var(--color-text-tertiary);
    font-variant-numeric: tabular-nums;
  }

  .search__body {
    flex: 1;
    min-height: 12rem;
    padding: var(--space-2) var(--space-3) var(--space-3);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .search__group + .search__group {
    margin-top: var(--space-2);
  }

  .search__group-title {
    padding: var(--space-3) var(--space-3) var(--space-2);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-tertiary);
  }

  .search-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.125rem var(--space-3);
    padding: 0.625rem var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-decoration: none;
    scroll-margin: var(--space-3);
    transition: background-color var(--dur-instant) var(--ease-standard);
  }

  .search-result:hover,
  .search-result[aria-selected="true"] {
    background: var(--color-action-tint);
  }

  .search-result[aria-selected="true"] .search-result__enter {
    opacity: 1;
  }

  .search-result__title {
    font-size: 0.9375rem;
    font-weight: var(--weight-semibold);
    line-height: 1.4;
  }

  .search-result__excerpt {
    display: -webkit-box;
    grid-column: 1;
    overflow: hidden;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--color-text-secondary);
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .search-result__path {
    grid-column: 1;
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }

  .search-result__enter {
    grid-row: 1 / span 3;
    grid-column: 2;
    align-self: center;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--color-action-hover);
    opacity: 0;
    transition: opacity var(--dur-instant);
  }

  .search-result mark {
    border-radius: 3px;
    background: var(--color-action-tint-strong);
    color: inherit;
  }

  /* "Show all" row: an option of its group (keyboard reachable) that switches the type filter. */
  .search-result--more {
    cursor: pointer;
  }

  .search-result--more .search-result__title {
    font-weight: var(--weight-medium);
    color: var(--color-link);
  }

  .search-result[data-type="ai"] .search-result__title::before {
    content: "";
    display: inline-block;
    width: 0.4375rem;
    height: 0.4375rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    background: var(--color-ai);
    vertical-align: 0.15em;
  }

  .search__empty {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-3);
    color: var(--color-text-secondary);
  }

  .search__empty strong {
    color: var(--color-text);
  }

  .search__suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .search__suggestions a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    color: var(--color-text);
    text-decoration: none;
  }

  .search__suggestions a:hover {
    border-color: var(--color-action);
    color: var(--color-link);
  }

  .search__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-muted);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
  }

  .search__keys {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  .search__keys span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
  }

  .search__field,
  .search__filters,
  .search__footer {
    flex-shrink: 0;
  }

  .search__close {
    display: none;
  }

  @media (width < 48rem) {
    .search-dialog {
      width: 100%;
      height: 100dvh;
      max-height: none;
      margin: 0;
      border: 0;
      border-radius: 0;
    }

    .search__keys {
      display: none;
    }

    .search__close {
      display: inline-grid;
    }
  }

  .search-trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 3rem;
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: 1rem;
    color: var(--color-text-tertiary);
    text-align: left;
    transition: border-color var(--dur-fast), box-shadow var(--dur-base);
  }

  .search-trigger:hover {
    border-color: var(--color-text-secondary);
    box-shadow: var(--shadow-sm);
  }

  .search-trigger svg {
    width: 1.125rem;
    height: 1.125rem;
  }

  .search-trigger .kbd {
    margin-left: auto;
  }
}

/* assets/css/src/patterns/steps.css */
/* Process steps: vertical timeline (long text) and row (short steps). Semantics come from <ol>. */
@layer patterns {
  .steps {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .steps--timeline {
    position: relative;
    display: grid;
    gap: 0;
  }

  .steps--timeline::before {
    content: "";
    position: absolute;
    top: 1.125rem;
    bottom: 1.125rem;
    left: 1.125rem;
    width: 1px;
    background: var(--color-border-strong);
  }

  .steps--timeline .step {
    position: relative;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: var(--space-5);
    padding-bottom: var(--space-7);
  }

  .steps--timeline .step:last-child {
    padding-bottom: 0;
  }

  .step__marker {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-bg);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary);
    transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base), color var(--dur-base), box-shadow var(--dur-slow) var(--ease-out);
  }

  .step__body {
    display: grid;
    gap: var(--space-2);
    padding-top: 0.25rem;
  }

  .step__body h3 {
    font-size: 1.125rem;
  }

  .step__body p {
    max-width: 40rem;
    color: var(--color-text-secondary);
  }

  .step.is-active .step__marker {
    border-color: var(--color-action);
    background: var(--color-action);
    color: var(--color-on-action);
    box-shadow: 0 0 0 4px var(--color-action-tint);
  }

  .steps__progress {
    position: absolute;
    top: 1.125rem;
    bottom: 1.125rem;
    left: 1.125rem;
    width: 1px;
    background: var(--color-action);
    transform: scaleY(var(--progress, 0));
    transform-origin: top;
    transition: transform 120ms linear;
  }

  .steps--row {
    display: grid;
    gap: var(--space-6);
    counter-reset: step;
  }

  @media (width >= 48rem) {
    .steps--row {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (width >= 64rem) {
    .steps--row {
      grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    }
  }

  .steps--row .step {
    display: grid;
    align-content: start;
    gap: var(--space-3);
    padding-top: var(--space-5);
    border-top: 1px solid var(--color-border-strong);
    counter-increment: step;
  }

  .steps--row .step::before {
    content: counter(step, decimal-leading-zero);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--color-link);
  }

  .steps--row .step h3 {
    font-size: 1.0625rem;
  }

  .steps--row .step p {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
  }

  .timeline {
    position: relative;
  }

  @media (width >= 64rem) {
    .process__intro {
      position: sticky;
      top: calc(var(--header-h) + var(--space-8));
    }
  }
}