/* shared/carbon/fonts.css */
/* ==========================================================================
   Soft Carbon — Typefaces
   IBM Plex Sans 300/400/600 + IBM Plex Mono 400, self-hosted (SIL OFL 1.1).
   Carbon uses exactly these weights; 500/700 are intentionally absent.
   ========================================================================== */

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/shared/fonts/ibm-plex-sans-latin-300.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/shared/fonts/ibm-plex-sans-latin-400.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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/shared/fonts/ibm-plex-sans-latin-600.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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/shared/fonts/ibm-plex-mono-latin-400.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;
}

:root {
  --cds-font-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', Arial, sans-serif;
  --cds-font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

/* shared/carbon/tokens.css */
/* ==========================================================================
   Soft Carbon — Design Tokens
   IBM Carbon v11 role tokens (values verified against @carbon/themes),
   softened with a Reforge radius scale. Theme scoping is attribute-based so
   dark islands nest natively inside a light page:

     <html data-carbon-theme="light">        light page
       <section data-carbon-theme="dark">    dark hero island
       <footer data-carbon-theme="dark-alt">  dark footer island

   Themes: light / light-alt (light) · dark / dark-alt (dark).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Static scales — theme-independent
   -------------------------------------------------------------------------- */
:root {
  /* Spacing (Carbon spacing-01..13) */
  --cds-spacing-01: 0.125rem;  /*   2px */
  --cds-spacing-02: 0.25rem;   /*   4px */
  --cds-spacing-03: 0.5rem;    /*   8px */
  --cds-spacing-04: 0.75rem;   /*  12px */
  --cds-spacing-05: 1rem;      /*  16px */
  --cds-spacing-06: 1.5rem;    /*  24px */
  --cds-spacing-07: 2rem;      /*  32px */
  --cds-spacing-08: 2.5rem;    /*  40px */
  --cds-spacing-09: 3rem;      /*  48px */
  --cds-spacing-10: 4rem;      /*  64px */
  --cds-spacing-11: 5rem;      /*  80px */
  --cds-spacing-12: 6rem;      /*  96px */
  --cds-spacing-13: 10rem;     /* 160px */

  /* Container heights (Carbon container-01..05) */
  --cds-container-01: 1.5rem;  /* 24px */
  --cds-container-02: 2rem;    /* 32px */
  --cds-container-03: 2.5rem;  /* 40px */
  --cds-container-04: 3rem;    /* 48px */
  --cds-container-05: 4rem;    /* 64px */

  /* Soft Carbon radius scale — deliberate deviation from Carbon's 0px.
     Dense product chrome stays 0-4px; 8-12px reserved for marketing warmth. */
  --radius-none: 0;
  --radius-sm: 4px;    /* buttons, inputs, dropdowns, menus, notifications */
  --radius-md: 8px;    /* cards, tiles, modals, popovers */
  --radius-lg: 12px;   /* hero media, large marketing panels */
  --radius-pill: 999px; /* tags, badges, toggles */

  /* Motion (Carbon @carbon/motion) */
  --cds-duration-fast-01: 70ms;
  --cds-duration-fast-02: 110ms;
  --cds-duration-moderate-01: 150ms;
  --cds-duration-moderate-02: 240ms;
  --cds-duration-slow-01: 400ms;
  --cds-duration-slow-02: 700ms;
  --cds-easing-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --cds-easing-productive-entrance: cubic-bezier(0, 0, 0.38, 0.9);
  --cds-easing-productive-exit: cubic-bezier(0.2, 0, 1, 0.9);
  --cds-easing-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);
  --cds-easing-expressive-entrance: cubic-bezier(0, 0, 0.3, 1);
  --cds-easing-expressive-exit: cubic-bezier(0.4, 0.14, 1, 1);

  /* Reforge brand — marketing moments only (logo, hero accent word,
     select highlights). NOT for interactive elements: those are Carbon blue.
     --brand-gold reads well on dark surfaces; --brand-gold-deep is the
     WCAG-safe equivalent for text on light surfaces (5.2:1 on white). */
  --brand-gold: #ffb784;  /* warm palette: orange-30, 8.9:1 on the dark hero */
  --brand-gold-deep: #8a6d1e;
}

/* --------------------------------------------------------------------------
   White theme (marketing site default)
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   LIGHT - Page ground. Warm Gray 10 with white cards.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   LIGHT - Page ground. Warm Gray 10 with white cards.
   -------------------------------------------------------------------------- */
:root,
[data-carbon-theme='light'] {
  color-scheme: light;

  --cds-background: #f7f3f2;
  --cds-background-hover: rgba(141, 137, 137, 0.12);
  --cds-background-active: rgba(141, 137, 137, 0.5);
  --cds-background-selected: rgba(141, 137, 137, 0.2);

  --cds-layer-01: #ffffff;
  --cds-layer-02: #f7f3f2;
  --cds-layer-03: #ffffff;
  --cds-layer-hover-01: #e5e0df;
  --cds-layer-hover-02: #e5e0df;
  --cds-layer-selected-01: #cac5c4;
  --cds-layer-accent-01: #cac5c4;

  --cds-field-01: #ffffff;
  --cds-field-02: #ffffff;
  --cds-field-hover-01: #e5e0df;

  --cds-border-subtle: #e5e0df;
  --cds-border-subtle-selected: #cac5c4;
  --cds-border-strong: #8f8b8b;
  --cds-border-interactive: #ba4e00;
  --cds-border-inverse: #171414;
  --cds-border-disabled: #cac5c4;

  --cds-text-primary: #171414;
  --cds-text-secondary: #565151;
  --cds-text-placeholder: rgba(23, 20, 20, 0.65);
  --cds-text-helper: #565151;
  --cds-text-on-color: #ffffff;
  --cds-text-inverse: #ffffff;
  --cds-text-disabled: rgba(23, 20, 20, 0.25);
  --cds-text-error: #da1e28;
  --cds-text-success: #0e6027;
  --cds-text-warning: #8e6a00;
  --cds-text-info: #0043ce;

  --cds-link-primary: #ba4e00;
  --cds-link-primary-hover: #8a3800;
  --cds-link-inverse: #ff832b;
  --cds-link-visited: #6929c4;

  --cds-icon-primary: #171414;
  --cds-icon-secondary: #565151;
  --cds-icon-on-color: #ffffff;
  --cds-icon-disabled: rgba(23, 20, 20, 0.25);
  --cds-icon-interactive: #ba4e00;

  --cds-interactive: #ba4e00;
  --cds-focus: #ba4e00;
  --cds-focus-inset: #ffffff;
  --cds-highlight: #ffe2cc;

  --cds-support-error: #da1e28;
  --cds-support-success: #24a148;
  --cds-support-warning: #f1c21b;
  --cds-support-info: #0043ce;

  --cds-button-primary: #ba4e00;
  --cds-button-primary-hover: #8a3800;
  --cds-button-primary-active: #5e2900;
  --cds-button-secondary: #3c3838;
  --cds-button-secondary-hover: #565151;
  --cds-button-secondary-active: #726e6e;
  --cds-button-tertiary: #ba4e00;
  --cds-button-tertiary-hover: #8a3800;
  --cds-button-tertiary-active: #5e2900;
  --cds-button-danger: #da1e28;
  --cds-button-danger-hover: #a2191f;
  --cds-button-danger-active: #750e13;
  --cds-button-disabled: #cac5c4;
  --cds-text-on-button-disabled: #8f8b8b;

  --cds-overlay: rgba(23, 20, 20, 0.5);
  --cds-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  --cds-skeleton-background: #e5e0df;
  --cds-skeleton-element: #cac5c4;
  --cds-toggle-off: #8f8b8b;

  /* Tag colour pairs */
  --cds-tag-gray-bg: #e5e0df;              --cds-tag-gray-text: #171414;
  --cds-tag-orange-bg: #ffe2cc;            --cds-tag-orange-text: #8a3800;
  --cds-tag-blue-bg: #d0e2ff;              --cds-tag-blue-text: #0043ce;
  --cds-tag-green-bg: #a7f0ba;             --cds-tag-green-text: #0e6027;
  --cds-tag-red-bg: #ffd7d9;               --cds-tag-red-text: #a2191f;
  --cds-tag-purple-bg: #e8daff;            --cds-tag-purple-text: #6929c4;
  --cds-tag-teal-bg: #9ef0f0;              --cds-tag-teal-text: #005d5d;
  --cds-tag-cyan-bg: #bae6ff;              --cds-tag-cyan-text: #00539a;
  --cds-tag-magenta-bg: #ffd6e8;           --cds-tag-magenta-text: #9f1853;
  --cds-tag-gold-bg: #f8e6c0;              --cds-tag-gold-text: #6b5416;
}

/* --------------------------------------------------------------------------
   LIGHT-ALT - Alternating band. White ground with Warm Gray 10 cards - the same
   two values as `light`, swapped, so sections still read as bands.
   -------------------------------------------------------------------------- */
[data-carbon-theme='light-alt'] {
  color-scheme: light;

  --cds-background: #ffffff;
  --cds-background-hover: rgba(141, 137, 137, 0.12);
  --cds-background-active: rgba(141, 137, 137, 0.5);
  --cds-background-selected: rgba(141, 137, 137, 0.2);

  --cds-layer-01: #f7f3f2;
  --cds-layer-02: #ffffff;
  --cds-layer-03: #f7f3f2;
  --cds-layer-hover-01: #e5e0df;
  --cds-layer-hover-02: #e5e0df;
  --cds-layer-selected-01: #cac5c4;
  --cds-layer-accent-01: #cac5c4;

  --cds-field-01: #f7f3f2;
  --cds-field-02: #ffffff;
  --cds-field-hover-01: #e5e0df;

  --cds-border-subtle: #e5e0df;
  --cds-border-subtle-selected: #cac5c4;
  --cds-border-strong: #8f8b8b;
  --cds-border-interactive: #ba4e00;
  --cds-border-inverse: #171414;
  --cds-border-disabled: #cac5c4;

  --cds-text-primary: #171414;
  --cds-text-secondary: #565151;
  --cds-text-placeholder: rgba(23, 20, 20, 0.65);
  --cds-text-helper: #565151;
  --cds-text-on-color: #ffffff;
  --cds-text-inverse: #ffffff;
  --cds-text-disabled: rgba(23, 20, 20, 0.25);
  --cds-text-error: #da1e28;
  --cds-text-success: #0e6027;
  --cds-text-warning: #8e6a00;
  --cds-text-info: #0043ce;

  --cds-link-primary: #ba4e00;
  --cds-link-primary-hover: #8a3800;
  --cds-link-inverse: #ff832b;
  --cds-link-visited: #6929c4;

  --cds-icon-primary: #171414;
  --cds-icon-secondary: #565151;
  --cds-icon-on-color: #ffffff;
  --cds-icon-disabled: rgba(23, 20, 20, 0.25);
  --cds-icon-interactive: #ba4e00;

  --cds-interactive: #ba4e00;
  --cds-focus: #ba4e00;
  --cds-focus-inset: #ffffff;
  --cds-highlight: #ffe2cc;

  --cds-support-error: #da1e28;
  --cds-support-success: #24a148;
  --cds-support-warning: #f1c21b;
  --cds-support-info: #0043ce;

  --cds-button-primary: #ba4e00;
  --cds-button-primary-hover: #8a3800;
  --cds-button-primary-active: #5e2900;
  --cds-button-secondary: #3c3838;
  --cds-button-secondary-hover: #565151;
  --cds-button-secondary-active: #726e6e;
  --cds-button-tertiary: #ba4e00;
  --cds-button-tertiary-hover: #8a3800;
  --cds-button-tertiary-active: #5e2900;
  --cds-button-danger: #da1e28;
  --cds-button-danger-hover: #a2191f;
  --cds-button-danger-active: #750e13;
  --cds-button-disabled: #cac5c4;
  --cds-text-on-button-disabled: #8f8b8b;

  --cds-overlay: rgba(23, 20, 20, 0.5);
  --cds-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  --cds-skeleton-background: #e5e0df;
  --cds-skeleton-element: #cac5c4;
  --cds-toggle-off: #8f8b8b;

  /* Tag colour pairs */
  --cds-tag-gray-bg: #e5e0df;              --cds-tag-gray-text: #171414;
  --cds-tag-orange-bg: #ffe2cc;            --cds-tag-orange-text: #8a3800;
  --cds-tag-blue-bg: #d0e2ff;              --cds-tag-blue-text: #0043ce;
  --cds-tag-green-bg: #a7f0ba;             --cds-tag-green-text: #0e6027;
  --cds-tag-red-bg: #ffd7d9;               --cds-tag-red-text: #a2191f;
  --cds-tag-purple-bg: #e8daff;            --cds-tag-purple-text: #6929c4;
  --cds-tag-teal-bg: #9ef0f0;              --cds-tag-teal-text: #005d5d;
  --cds-tag-cyan-bg: #bae6ff;              --cds-tag-cyan-text: #00539a;
  --cds-tag-magenta-bg: #ffd6e8;           --cds-tag-magenta-text: #9f1853;
  --cds-tag-gold-bg: #f8e6c0;              --cds-tag-gold-text: #6b5416;
}

/* --------------------------------------------------------------------------
   DARK - Dark island (was g100). Warm Gray 100 ground.
   -------------------------------------------------------------------------- */
[data-carbon-theme='dark'] {
  color-scheme: dark;

  --cds-background: #171414;
  --cds-background-hover: rgba(143, 139, 139, 0.12);
  --cds-background-active: rgba(143, 139, 139, 0.5);
  --cds-background-selected: rgba(143, 139, 139, 0.2);

  --cds-layer-01: #272525;
  --cds-layer-02: #3c3838;
  --cds-layer-03: #272525;
  --cds-layer-hover-01: #3c3838;
  --cds-layer-hover-02: #565151;
  --cds-layer-selected-01: #565151;
  --cds-layer-accent-01: #565151;

  --cds-field-01: #272525;
  --cds-field-02: #171414;
  --cds-field-hover-01: #3c3838;

  --cds-border-subtle: #3c3838;
  --cds-border-subtle-selected: #565151;
  --cds-border-strong: #8f8b8b;
  --cds-border-interactive: #ff832b;
  --cds-border-inverse: #f7f3f2;
  --cds-border-disabled: #565151;

  --cds-text-primary: #f7f3f2;
  --cds-text-secondary: #cac5c4;
  --cds-text-placeholder: rgba(247, 243, 242, 0.65);
  --cds-text-helper: #ada8a8;
  --cds-text-on-color: #ffffff;
  --cds-text-inverse: #171414;
  --cds-text-disabled: rgba(247, 243, 242, 0.25);
  --cds-text-error: #ff8389;
  --cds-text-success: #42be65;
  --cds-text-warning: #fdd13a;
  --cds-text-info: #a6c8ff;

  --cds-link-primary: #ff832b;
  --cds-link-primary-hover: #ffb784;
  --cds-link-inverse: #ba4e00;
  --cds-link-visited: #d4bbff;

  --cds-icon-primary: #f7f3f2;
  --cds-icon-secondary: #cac5c4;
  --cds-icon-on-color: #ffffff;
  --cds-icon-disabled: rgba(247, 243, 242, 0.25);
  --cds-icon-interactive: #ff832b;

  --cds-interactive: #ff832b;
  --cds-focus: #ffffff;
  --cds-focus-inset: #171414;
  --cds-highlight: #5e2900;

  --cds-support-error: #ff8389;
  --cds-support-success: #42be65;
  --cds-support-warning: #f1c21b;
  --cds-support-info: #78a9ff;

  --cds-button-primary: #ba4e00;
  --cds-button-primary-hover: #8a3800;
  --cds-button-primary-active: #5e2900;
  --cds-button-secondary: #565151;
  --cds-button-secondary-hover: #726e6e;
  --cds-button-secondary-active: #8f8b8b;
  --cds-button-tertiary: #ff832b;
  --cds-button-tertiary-hover: #ffb784;
  --cds-button-tertiary-active: #ffffff;
  --cds-button-danger: #da1e28;
  --cds-button-danger-hover: #a2191f;
  --cds-button-danger-active: #750e13;
  --cds-button-disabled: #3c3838;
  --cds-text-on-button-disabled: #726e6e;

  --cds-overlay: rgba(23, 20, 20, 0.7);
  --cds-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  --cds-skeleton-background: #3c3838;
  --cds-skeleton-element: #565151;
  --cds-toggle-off: #8f8b8b;

  /* Tag colour pairs */
  --cds-tag-gray-bg: #565151;              --cds-tag-gray-text: #f7f3f2;
  --cds-tag-orange-bg: #5e2900;            --cds-tag-orange-text: #ffb784;
  --cds-tag-blue-bg: #001d6c;              --cds-tag-blue-text: #a6c8ff;
  --cds-tag-green-bg: #044317;             --cds-tag-green-text: #6fdc8c;
  --cds-tag-red-bg: #520408;               --cds-tag-red-text: #ffb3b8;
  --cds-tag-purple-bg: #31135e;            --cds-tag-purple-text: #d4bbff;
  --cds-tag-teal-bg: #022b30;              --cds-tag-teal-text: #3ddbd9;
  --cds-tag-cyan-bg: #012749;              --cds-tag-cyan-text: #82cfff;
  --cds-tag-magenta-bg: #510224;           --cds-tag-magenta-text: #ffafd2;
  --cds-tag-gold-bg: #5e2900;              --cds-tag-gold-text: #ffd9b0;
}

/* --------------------------------------------------------------------------
   DARK-ALT - Softer dark island (was g90). Warm Gray 90 ground.
   -------------------------------------------------------------------------- */
[data-carbon-theme='dark-alt'] {
  color-scheme: dark;

  --cds-background: #272525;
  --cds-background-hover: rgba(143, 139, 139, 0.12);
  --cds-background-active: rgba(143, 139, 139, 0.5);
  --cds-background-selected: rgba(143, 139, 139, 0.2);

  --cds-layer-01: #3c3838;
  --cds-layer-02: #3c3838;
  --cds-layer-03: #3c3838;
  --cds-layer-hover-01: #3c3838;
  --cds-layer-hover-02: #565151;
  --cds-layer-selected-01: #565151;
  --cds-layer-accent-01: #565151;

  --cds-field-01: #3c3838;
  --cds-field-02: #272525;
  --cds-field-hover-01: #3c3838;

  --cds-border-subtle: #3c3838;
  --cds-border-subtle-selected: #565151;
  --cds-border-strong: #8f8b8b;
  --cds-border-interactive: #ff832b;
  --cds-border-inverse: #f7f3f2;
  --cds-border-disabled: #565151;

  --cds-text-primary: #f7f3f2;
  --cds-text-secondary: #cac5c4;
  --cds-text-placeholder: rgba(247, 243, 242, 0.65);
  --cds-text-helper: #ada8a8;
  --cds-text-on-color: #ffffff;
  --cds-text-inverse: #171414;
  --cds-text-disabled: rgba(247, 243, 242, 0.25);
  --cds-text-error: #ff8389;
  --cds-text-success: #42be65;
  --cds-text-warning: #fdd13a;
  --cds-text-info: #a6c8ff;

  --cds-link-primary: #ff832b;
  --cds-link-primary-hover: #ffb784;
  --cds-link-inverse: #ba4e00;
  --cds-link-visited: #d4bbff;

  --cds-icon-primary: #f7f3f2;
  --cds-icon-secondary: #cac5c4;
  --cds-icon-on-color: #ffffff;
  --cds-icon-disabled: rgba(247, 243, 242, 0.25);
  --cds-icon-interactive: #ff832b;

  --cds-interactive: #ff832b;
  --cds-focus: #ffffff;
  --cds-focus-inset: #171414;
  --cds-highlight: #5e2900;

  --cds-support-error: #ff8389;
  --cds-support-success: #42be65;
  --cds-support-warning: #f1c21b;
  --cds-support-info: #78a9ff;

  --cds-button-primary: #ba4e00;
  --cds-button-primary-hover: #8a3800;
  --cds-button-primary-active: #5e2900;
  --cds-button-secondary: #565151;
  --cds-button-secondary-hover: #726e6e;
  --cds-button-secondary-active: #8f8b8b;
  --cds-button-tertiary: #ff832b;
  --cds-button-tertiary-hover: #ffb784;
  --cds-button-tertiary-active: #ffffff;
  --cds-button-danger: #da1e28;
  --cds-button-danger-hover: #a2191f;
  --cds-button-danger-active: #750e13;
  --cds-button-disabled: #3c3838;
  --cds-text-on-button-disabled: #726e6e;

  --cds-overlay: rgba(23, 20, 20, 0.7);
  --cds-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  --cds-skeleton-background: #3c3838;
  --cds-skeleton-element: #565151;
  --cds-toggle-off: #8f8b8b;

  /* Tag colour pairs */
  --cds-tag-gray-bg: #565151;              --cds-tag-gray-text: #f7f3f2;
  --cds-tag-orange-bg: #5e2900;            --cds-tag-orange-text: #ffb784;
  --cds-tag-blue-bg: #001d6c;              --cds-tag-blue-text: #a6c8ff;
  --cds-tag-green-bg: #044317;             --cds-tag-green-text: #6fdc8c;
  --cds-tag-red-bg: #520408;               --cds-tag-red-text: #ffb3b8;
  --cds-tag-purple-bg: #31135e;            --cds-tag-purple-text: #d4bbff;
  --cds-tag-teal-bg: #022b30;              --cds-tag-teal-text: #3ddbd9;
  --cds-tag-cyan-bg: #012749;              --cds-tag-cyan-text: #82cfff;
  --cds-tag-magenta-bg: #510224;           --cds-tag-magenta-text: #ffafd2;
  --cds-tag-gold-bg: #5e2900;              --cds-tag-gold-text: #ffd9b0;
}

/* shared/carbon/type.css */
/* ==========================================================================
   Soft Carbon — Type scale
   Carbon v11 type tokens as utility classes + element defaults.
   Fixed tokens for product UI; fluid display tokens for marketing heroes.
   Base: 16px = 1rem. Letter-spacing values are Carbon's, in px.
   ========================================================================== */

/* ------ Utility classes (match Carbon token names) ------ */

.type-label-01 {
  font-size: 0.75rem;      /* 12px */
  line-height: 1rem;       /* 16px */
  font-weight: 400;
  letter-spacing: 0.32px;
}

.type-label-02 {
  font-size: 0.875rem;     /* 14px */
  line-height: 1.125rem;   /* 18px */
  font-weight: 400;
  letter-spacing: 0.16px;
}

.type-helper-text-01 {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.32px;
}

.type-legal-01 {
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.32px;
}

.type-code-01 {
  font-family: var(--cds-font-mono);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 400;
  letter-spacing: 0.32px;
}

.type-code-02 {
  font-family: var(--cds-font-mono);
  font-size: 0.875rem;
  line-height: 1.25rem;    /* 20px */
  font-weight: 400;
  letter-spacing: 0.32px;
}

.type-body-compact-01 {
  font-size: 0.875rem;
  line-height: 1.125rem;
  font-weight: 400;
  letter-spacing: 0.16px;
}

.type-body-01 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.16px;
}

.type-body-02 {
  font-size: 1rem;         /* 16px */
  line-height: 1.5rem;     /* 24px */
  font-weight: 400;
  letter-spacing: 0;
}

.type-heading-compact-01 {
  font-size: 0.875rem;
  line-height: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.16px;
}

.type-heading-01 {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.16px;
}

.type-heading-02 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  letter-spacing: 0;
}

.type-heading-03 {
  font-size: 1.25rem;      /* 20px */
  line-height: 1.75rem;    /* 28px */
  font-weight: 400;
  letter-spacing: 0;
}

.type-heading-04 {
  font-size: 1.75rem;      /* 28px */
  line-height: 2.25rem;    /* 36px */
  font-weight: 400;
  letter-spacing: 0;
}

.type-heading-05 {
  font-size: 2rem;         /* 32px */
  line-height: 2.5rem;     /* 40px */
  font-weight: 400;
  letter-spacing: 0;
}

.type-heading-06 {
  font-size: 2.625rem;     /* 42px */
  line-height: 3.125rem;   /* 50px */
  font-weight: 300;
  letter-spacing: 0;
}

.type-heading-07 {
  font-size: 3.375rem;     /* 54px */
  line-height: 4rem;       /* 64px */
  font-weight: 300;
  letter-spacing: 0;
}

/* Fluid display tokens — marketing heroes (Carbon for IBM.com leadspace).
   Interpolate 42px @ 672px viewport → max @ 1584px. */
.type-display-01 {
  font-size: clamp(2.625rem, 1.031rem + 3.79vw, 4.75rem);  /* 42 → 76px */
  line-height: 1.19;
  font-weight: 300;
  letter-spacing: -0.64px;
}

.type-display-02 {
  font-size: clamp(2.625rem, 1.031rem + 3.79vw, 4.75rem);  /* 42 → 76px */
  line-height: 1.19;
  font-weight: 600;
  letter-spacing: -0.64px;
}

.type-fluid-heading-05 {
  font-size: clamp(2rem, 0.688rem + 3.13vw, 3.75rem);      /* 32 → 60px */
  line-height: 1.17;
  font-weight: 300;
  letter-spacing: 0;
}

/* ------ Element defaults (apply once carbon stack is imported) ------ */

body {
  font-family: var(--cds-font-sans);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
}

code,
kbd,
pre,
samp {
  font-family: var(--cds-font-mono);
}

strong,
b {
  font-weight: 600; /* Plex has no 700; Carbon uses SemiBold for emphasis */
}

/* shared/carbon/base.css */
/* ==========================================================================
   Soft Carbon — Base
   Reset, theme-driven page colors, Carbon's signature 2px focus outline,
   and the global reduced-motion kill-switch.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  background: var(--cds-background);
  color: var(--cds-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Theme islands repaint their own background */
[data-carbon-theme] {
  background-color: var(--cds-background);
  color: var(--cds-text-primary);
}

::selection {
  background: var(--cds-highlight);
  color: var(--cds-text-primary);
}

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

a {
  color: var(--cds-link-primary);
  text-decoration: none;
  transition: color var(--cds-duration-fast-01) var(--cds-easing-productive);
}

a:hover {
  color: var(--cds-link-primary-hover);
  text-decoration: underline;
}

hr {
  border: 0;
  border-top: 1px solid var(--cds-border-subtle);
  margin: var(--cds-spacing-06) 0;
}

/* --------------------------------------------------------------------------
   Focus — Carbon's signature 2px outline. The outline radius should hug the
   element: components set border-radius, outline follows automatically.
   -------------------------------------------------------------------------- */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: 1px;
}

/* Filled controls (primary/danger buttons) need an inset gap so the outline
   reads against the fill. Applied per-component via this helper. */
.focus-inset:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: -3px;
  box-shadow: inset 0 0 0 1px var(--cds-focus-inset);
}

/* --------------------------------------------------------------------------
   Screen-reader-only utility + skip link (visible on focus)
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only.skip-link:focus,
a.sr-only:focus {
  position: fixed;
  top: var(--cds-spacing-03);
  left: var(--cds-spacing-03);
  z-index: 10000;
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  clip: auto;
  white-space: normal;
  background: var(--cds-background);
  color: var(--cds-link-primary);
  border-radius: var(--radius-sm);
  box-shadow: var(--cds-shadow);
}

/* --------------------------------------------------------------------------
   Reduced motion — global kill-switch. Components may add their own
   refinements; this guarantees nothing keeps moving.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* site/css/tokens.css */
/* ══════════════════════════════════════════
   Soft Carbon — Site compat bridge
   Re-points the Option D token names at Carbon role tokens from
   shared/carbon/tokens.css. The page is the light theme; dark sections are
   data-carbon-theme="dark|dark-alt" islands and these vars re-resolve inside
   them automatically (var() is evaluated per element).

   The old .zd/.zl zone system is gone — islands replace it.
   ══════════════════════════════════════════ */

/* NB: declared on every theme boundary, not just :root — var() references in
   custom-property values resolve at the DEFINING element and the resolved
   value inherits, so islands must re-declare the aliases to re-resolve them
   against their own --cds-* values. */
:root,
[data-carbon-theme] {
  --bg:          var(--cds-background);
  --bg-2:        var(--cds-layer-01);
  --bg-3:        var(--cds-layer-02);
  --bg-4:        var(--cds-field-01);
  --border:      var(--cds-border-subtle);
  --border-2:    var(--cds-border-subtle-selected);
  --text:        var(--cds-text-primary);
  --text-2:      var(--cds-text-secondary);
  --text-3:      var(--cds-text-helper);

  /* Interactive accent = burnt orange. The tints are literal rgba because a
     colour-mix of a var() is not available everywhere we need it; they track
     --cds-interactive by hand and are re-declared per island below. */
  --accent:      var(--cds-interactive);
  --accent-dark: var(--cds-link-primary-hover);
  --accent-dim:  rgba(186, 78, 0, 0.08);
  --accent-glow: rgba(186, 78, 0, 0.18);

  --green:       var(--cds-support-success);
  --green-dim:   rgba(36, 161, 72, 0.10);
  --blue:        var(--cds-support-info);
  --red:         var(--cds-support-error);

  --radius:      var(--radius-sm);
  /* --radius-lg comes from shared/carbon/tokens.css (12px) */

  --font:        var(--cds-font-sans);
  --mono:        var(--cds-font-mono);
}

/* Accent tints need more alpha on dark islands, and the on-dark orange is a
   lighter step than the on-light one. */
[data-carbon-theme='dark'],
[data-carbon-theme='dark-alt'] {
  --accent-dim:  rgba(255, 131, 43, 0.14);
  --accent-glow: rgba(255, 131, 43, 0.28);
  --green-dim:   rgba(66, 190, 101, 0.14);
}

/* site/css/base.css */
/* Site Base Layer — Soft Carbon */

/* site/css/layout.css */
/* ══════════════════════════════════════════
   Option D — Layout & Structure
   ══════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;      /* Carbon body-02 */
  line-height: 1.5;
  overflow-x: clip;
  max-width: 100%;
}

/* ── Section shared ── */
.si { padding: 80px 64px; }
.sh {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 48px; padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.sec-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--accent); margin-bottom: 8px;
}
.sec-title {
  font-size: clamp(28px, 3.5vw, 42px); font-weight: 600;
  letter-spacing: -0.02em; color: var(--text); line-height: 1.15;
}

/* ════ NAV — Carbon masthead: 48px, solid, hairline ════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 48px; background: var(--cds-background);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 48px;
}
.nav-logo {
  font-size: 16px; font-weight: 600; letter-spacing: 0;
  color: var(--text); text-decoration: none;
  display: flex; align-items: center; gap: 10px;
  margin-right: 40px; flex-shrink: 0;
}
.nav-mark {
  width: 26px; height: 26px; object-fit: contain; flex-shrink: 0;
}
.nav-links { display: flex; gap: 2px; list-style: none; }
.nav-links a {
  font-size: 14px; font-weight: 400; letter-spacing: 0.16px; color: var(--text-2);
  text-decoration: none; padding: 6px 12px; border-radius: var(--radius);
  transition: color var(--cds-duration-fast-01) var(--cds-easing-productive),
              background var(--cds-duration-fast-01) var(--cds-easing-productive);
}
.nav-links a:hover { color: var(--text); background: var(--cds-background-hover); text-decoration: none; }
.nav-r { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav-meta { font-family: var(--mono); font-size: 11px; color: var(--text-3); }

/* Mobile nav */
.nav-hamburger {
  display: none; background: none; border: none; cursor: pointer;
  color: var(--text-2); padding: 6px; border-radius: var(--radius);
  transition: color var(--cds-duration-fast-01) var(--cds-easing-productive),
              background var(--cds-duration-fast-01) var(--cds-easing-productive);
}
.nav-hamburger:hover { color: var(--text); background: var(--cds-background-hover); }
.nav-hamburger svg { display: block; }

.mobile-menu {
  display: none; position: fixed; top: 48px; left: 0; right: 0;
  background: var(--cds-background);
  border-bottom: 1px solid var(--border);
  flex-direction: column; padding: 16px 24px 24px; gap: 4px;
  z-index: 199;
}
.mobile-menu.open,
.mobile-menu.active { display: flex; }
.mobile-menu a {
  font-size: 15px; color: var(--text-2); text-decoration: none;
  padding: 10px 12px; border-radius: var(--radius);
  transition: color var(--cds-duration-fast-01) var(--cds-easing-productive),
              background var(--cds-duration-fast-01) var(--cds-easing-productive);
}
.mobile-menu a:hover { color: var(--text); background: var(--cds-background-hover); text-decoration: none; }
/* The .mobile-menu a rule above is more specific than .btn-p, so the button's
   on-colour text has to be restated here or the label renders dark on blue. */
.mobile-menu .btn-p {
  color: var(--cds-text-on-color);
  text-align: center; justify-content: center; margin-top: 8px;
}
.mobile-menu .btn-p:hover { color: var(--cds-text-on-color); background: var(--cds-button-primary-hover); }

/* ════ HERO ════ */
.hero {
  min-height: 100vh; display: flex; align-items: center;
  padding: 120px 64px 80px; background: var(--bg); overflow: hidden;
}
.hero-wrap {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 72px; align-items: center;
  position: relative; z-index: 1; width: 100%;
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 10px; margin-bottom: 24px;
  opacity: 0; animation: fadeUp 0.6s 0.1s ease forwards;
}
/* Eyebrow + accent word stay Reforge gold — deliberate brand moments */
.hero-eyebrow-line { width: 32px; height: 1px; background: var(--brand-gold); }
.hero-eyebrow-text {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.32px;
  color: var(--brand-gold);
}
/* Carbon leadspace display type: fluid 42→76px, Plex Light */
.hero-h {
  font-size: clamp(42px, 6vw, 76px); font-weight: 300;
  letter-spacing: -0.01em; line-height: 1.19; color: var(--text);
  margin-bottom: 16px;
  opacity: 0; animation: fadeUp 0.7s 0.2s ease forwards;
}
.hero-h em { color: var(--brand-gold); font-style: normal; font-weight: 400; }
.hero-tag {
  font-size: 18px; font-weight: 400; color: var(--text-2);
  line-height: 1.6; margin-bottom: 28px; max-width: 520px;
  opacity: 0; animation: fadeUp 0.7s 0.32s ease forwards;
}
.hero-acts {
  display: flex; align-items: center; gap: 12px; margin-bottom: 36px;
  opacity: 0; animation: fadeUp 0.7s 0.44s ease forwards;
}
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 20px;
  opacity: 0; animation: fadeUp 0.6s 0.56s ease forwards;
}
.trust-i {
  font-size: 13px; color: var(--text-3);
  display: flex; align-items: center; gap: 7px;
}
.trust-i::before {
  content: ''; width: 5px; height: 5px;
  background: var(--accent); border-radius: 50%; flex-shrink: 0;
}
.hero-note {
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  margin-top: 14px; letter-spacing: 0.04em;
  opacity: 0; animation: fadeUp 0.6s 0.64s ease forwards;
}
.hero-r { opacity: 0; animation: fadeIn 1s 0.9s ease forwards; }

/* ════ STANDARDS STRIP ════ */
.std-strip {
  background: var(--bg-2); border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 14px 48px; display: flex; align-items: center; overflow: hidden;
}
.std-lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--text-3); white-space: nowrap; margin-right: 32px; flex-shrink: 0;
}
.std-scroll {
  flex: 1; overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
}
.std-track { display: flex; gap: 40px; animation: scroll-l 30s linear infinite; }
.std-i { display: flex; align-items: center; gap: 8px; white-space: nowrap; flex-shrink: 0; }
.std-dot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; flex-shrink: 0; }
.std-i span { font-family: var(--mono); font-size: 12px; color: var(--text-2); }

/* ════ STATS ════ */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--border); gap: 1px; }
.stat-c {
  background: var(--bg-2); padding: 28px 32px; position: relative; overflow: hidden;
  transition: background 0.2s;
}
.stat-c:hover { background: var(--bg-3); }
.stat-c::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 100%; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease;
}
.stat-c:hover::after { transform: scaleX(1); }

/* ════ PROOF / STEPS ════ */
.proof-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 52px;
}
.steps-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border); border-radius: var(--radius); overflow: hidden;
}

/* ════ FEATURES ════ */
.feat-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: auto auto; gap: 1px;
  border-radius: var(--radius); overflow: hidden;
}
.card.lg { grid-row: 1 / 3; display: flex; flex-direction: column; }
.feat-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: auto; }

/* ════ APP MOCKUP ════ */
.app-s { background: var(--bg); border-top: 1px solid var(--border); }
.wpf-w {
  background: var(--bg-3); border: 1px solid var(--border-2);
  border-radius: var(--radius-lg); overflow: hidden; max-width: 1060px; margin: 0 auto;
  box-shadow: 0 24px 72px rgba(0,0,0,0.4), 0 0 0 1px var(--border);
}
.wpf-tb {
  height: 36px; background: var(--bg-4); border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex; align-items: center; padding: 0 12px; gap: 8px;
}
.wpf-wc { display: flex; gap: 1px; }
.wpf-tlb {
  height: 32px; background: var(--bg-4); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 8px; gap: 1px;
}
.wpf-body { display: grid; grid-template-columns: 214px 1fr 250px; height: 450px; }
.wpf-l {
  background: var(--bg-2); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.wpf-set { padding: 12px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
.wpf-m { display: flex; flex-direction: column; overflow: hidden; }
.wpf-tabs {
  height: 30px; background: var(--bg-4); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 14px; gap: 4px; flex-shrink: 0;
}
.wpf-q { flex: 1; overflow-y: auto; }
.wpf-q::-webkit-scrollbar { width: 5px; }
.wpf-q::-webkit-scrollbar-track { background: transparent; }
.wpf-q::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
.wpf-r {
  background: var(--bg-2); border-left: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
}
.wpf-pv {
  flex: 1; background: #fff;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.wpf-pv svg { width: 88%; max-height: 250px; }
.wpf-inf { border-top: 1px solid var(--border); padding: 11px 13px; display: flex; flex-direction: column; gap: 5px; }
.wpf-sb {
  height: 24px; background: var(--cds-background); border-top: 1px solid var(--border);
  display: flex; align-items: center; padding: 0 14px; gap: 18px;
}

/* ════ PRICING ════ */
.pi { padding: 80px 64px; position: relative; z-index: 1; }
.plans {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--border); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 44px;
}
.plan-flist { list-style: none; display: flex; flex-direction: column; flex: 1; }
.plan-acts { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }

/* ════ FAQ ════ */
.faq-sec { background: var(--bg-2); }
.faq-group { margin-bottom: 40px; }
.faq-group-lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--accent); margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.faq-group-lbl::before {
  content: ''; display: block; width: 16px; height: 2px;
  background: var(--accent); border-radius: 1px;
}
/* The hairlines come from a 1px gap over a coloured container background. With an
   odd number of questions the unfilled cell showed that colour as a solid grey block
   that read as a card which had failed to load. Painting the item colour on the
   container and the hairline per item keeps the rules and makes any empty cell
   invisible, whatever the question count. */
.faq-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--bg-3); border-radius: var(--radius); overflow: hidden;
}
.faq-grid > .faq-item { box-shadow: 0 0 0 1px var(--border); }

/* ════ RESOURCES ════ */
.res-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border); border-radius: var(--radius); overflow: hidden;
}

/* ════ TRIAL SECTION (g90 island) ════ */
.trial-sec { background: var(--bg); border-top: 1px solid var(--border); }
.trial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: start; }
.trial-r { display: flex; flex-direction: column; gap: 14px; }
.trial-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ════ FOOTER ════ */
footer {
  background: var(--bg); border-top: 1px solid var(--border);
  padding: 32px 64px; display: flex; align-items: center; justify-content: space-between;
}
.fl { display: flex; flex-direction: column; gap: 5px; }
.f-links { display: flex; gap: 4px; list-style: none; }
.f-links a {
  font-size: 13px; color: var(--text-3); text-decoration: none;
  padding: 5px 10px; border-radius: var(--radius);
  transition: color var(--cds-duration-fast-01) var(--cds-easing-productive),
              background var(--cds-duration-fast-01) var(--cds-easing-productive);
}
.f-links a:hover { color: var(--text); background: var(--cds-background-hover); text-decoration: none; }

/* ════ REVEAL ON SCROLL ════ */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; }
.rv.vis { opacity: 1; transform: translateY(0); }

/* ════ ANIMATIONS ════ */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes blink    { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes scroll-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ════ RESPONSIVE ════ */
@media (max-width: 1100px) {
  .hero-wrap { grid-template-columns: 1fr; }
  .hero-r { display: none; }
  .hero { padding: 120px 40px 80px; }
}
@media (max-width: 900px) {
  .si, .pi { padding: 60px 32px; }
  .proof-grid, .steps-grid, .plans, .trial-grid { grid-template-columns: 1fr; }
  .feat-grid { grid-template-columns: 1fr; }
  .card.lg { grid-row: auto; }
  .stats { grid-template-columns: 1fr 1fr; }
  .faq-grid, .res-grid, .trial-2col { grid-template-columns: 1fr; }
  .wpf-r { display: none; }
  .wpf-body { grid-template-columns: 200px 1fr; }
  footer { flex-direction: column; gap: 20px; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  nav { padding: 0 24px; }
  .nav-links { display: none; }
  .nav-meta { display: none; }
  .nav-hamburger { display: flex; align-items: center; justify-content: center; }
  .nav-r .btn-p { display: none; }
}
@media (max-width: 600px) {
  nav { padding: 0 16px; }
  .sh { flex-direction: column; align-items: flex-start; gap: 12px; }
  .si, .pi { padding: 48px 20px; }
  .hero { padding: 100px 24px 60px; }
  .hero-acts { flex-wrap: wrap; }
  .std-strip { padding: 12px 20px; }
  .std-lbl { display: none; }
  .stats { grid-template-columns: 1fr; }
  footer { padding: 28px 24px; }
  .f-links { flex-wrap: wrap; justify-content: center; gap: 0; }
}
@media (max-width: 480px) {
  .hero-acts .btn-p,
  .hero-acts .btn-o { width: 100%; justify-content: center; }
}

/* site/css/components.css */
/* ══════════════════════════════════════════
   Option D — Components
   ══════════════════════════════════════════ */

/* ── Shared tag pill (Carbon tag) ── */
.tag {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.32px; color: var(--accent);
  padding: 3px 12px; border: 1px solid transparent;
  background: var(--accent-dim); border-radius: var(--radius-pill);
}

/* ── Buttons — Carbon primary / tertiary ── */
.btn-p {
  font-family: var(--font); font-size: 14px; font-weight: 400; letter-spacing: 0.16px;
  color: var(--cds-text-on-color); background: var(--cds-button-primary); border: none;
  min-height: 40px; padding: 0 20px; border-radius: var(--radius-sm); cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 10px;
  transition: background var(--cds-duration-fast-02) var(--cds-easing-productive);
}
.btn-p:hover  { background: var(--cds-button-primary-hover); }
.btn-p:active { background: var(--cds-button-primary-active); }
.btn-p:focus-visible {
  outline: 2px solid var(--cds-focus); outline-offset: -3px;
  box-shadow: inset 0 0 0 1px var(--cds-focus-inset);
}
.btn-p.lg { min-height: 48px; padding: 0 24px; font-size: 15px; }

.btn-o {
  font-family: var(--font); font-size: 14px; font-weight: 400; letter-spacing: 0.16px;
  color: var(--cds-button-tertiary); background: transparent;
  border: 1px solid var(--cds-button-tertiary); min-height: 40px; padding: 0 20px;
  border-radius: var(--radius-sm); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  transition: color var(--cds-duration-fast-02) var(--cds-easing-productive),
              background var(--cds-duration-fast-02) var(--cds-easing-productive),
              border-color var(--cds-duration-fast-02) var(--cds-easing-productive);
}
.btn-o:hover {
  color: var(--cds-text-inverse); background: var(--cds-button-tertiary-hover);
  border-color: var(--cds-button-tertiary-hover); text-decoration: none;
}
.btn-o.lg { min-height: 48px; padding: 0 24px; font-size: 15px; }

/* Loading state used by JS modules */
.btn-p.loading,
.btn-o.loading {
  opacity: 0.7; pointer-events: none; cursor: default;
}

/* ── Stats numbers ── */
.stat-n { font-size: 42px; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--text); margin-bottom: 6px; }
.stat-n em { color: var(--accent); font-style: normal; }
.stat-l { font-size: 13px; color: var(--text-3); }

/* ── Proof cards ── */
.proof-card {
  background: var(--bg-2); padding: 28px; transition: background 0.2s;
  display: flex; flex-direction: column; gap: 10px;
}
.proof-card:hover { background: var(--bg-3); }
.proof-sig   { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-3); }
.proof-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); line-height: 1.25; }
.proof-desc  { font-size: 14px; color: var(--text-2); line-height: 1.65; }
.proof-tags  { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; padding-top: 8px; }
.ptag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.32px;
  padding: 2px 10px; background: var(--accent-dim); color: var(--accent);
  border: 1px solid transparent; border-radius: var(--radius-pill);
}

/* ── Steps ── */
.step-c { background: var(--bg-2); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.step-num   { font-size: 44px; font-weight: 300; letter-spacing: -0.04em; line-height: 1; color: var(--accent); opacity: 0.4; }
.step-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.step-desc  { font-size: 14px; color: var(--text-2); line-height: 1.65; }
.step-note  { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-top: auto; padding-top: 4px; }

/* ── Feature cards ── */
.card { background: var(--bg-2); padding: 30px; transition: background 0.2s; }
.card:hover { background: var(--bg-3); }
.feat-icon {
  width: 40px; height: 40px; background: var(--accent-dim);
  border: 1px solid transparent; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; flex-shrink: 0;
}
.feat-icon svg { width: 18px; height: 18px; color: var(--accent); }
.feat-num   { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-3); margin-bottom: 7px; }
.feat-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); margin-bottom: 10px; }
.card.lg .feat-title { font-size: 22px; }
.feat-desc  { font-size: 14px; color: var(--text-2); line-height: 1.65; margin-bottom: 14px; }
.fmt-chips  { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 16px; }
/* Matches .ptag. These list the same supported standards as the proof cards, so
   they get the same chip; the outlined variant they used to have made one surface
   look like a different design system from the other. */
.fmt-chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.32px; padding: 3px 11px;
  border: 1px solid transparent; color: var(--accent); background: var(--accent-dim);
  border-radius: var(--radius-pill); cursor: default;
}
.cli-block {
  background: var(--bg-4); border: 1px solid var(--border-2);
  border-left: 3px solid var(--accent); padding: 12px 14px;
  margin-top: 14px; border-radius: 0 var(--radius) var(--radius) 0;
  font-family: var(--mono); font-size: 12px;
  /* --cds-support-success is a status-indicator fill and fails as 12px body text.
     --cds-text-success is the text-weight variant, resolved per theme. */
  color: var(--cds-text-success);
}
.li-dot { font-size: 14px; color: var(--text-2); display: flex; align-items: center; gap: 10px; }
.li-dot::before { content: ''; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; flex-shrink: 0; }

/* ── Terminal widget ── */
.terminal {
  background: var(--bg-3); border: 1px solid var(--border-2);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,0.35), 0 0 0 1px var(--border);
}
.term-bar {
  height: 36px; background: var(--bg-4);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex; align-items: center; padding: 0 14px; gap: 7px;
}
/* The product is Windows-only and its own screenshot two sections down shows Windows
   controls, so the terminal wears minimise / maximise / close rather than macOS
   traffic lights - and they sit on the RIGHT with the title on the left, which is
   where a console actually puts them. They were previously drawn Windows-style but
   positioned Mac-style, which is a combination no operating system produces. */
.term-lbl  { margin-right: auto; font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.term-ctl  { width: 11px; height: 11px; position: relative; opacity: 0.72; }
.term-ctl::before, .term-ctl::after { content: ''; position: absolute; background: var(--text-3); }
.term-ctl.min::before   { inset: 5px 0 auto 0; height: 1px; }
.term-ctl.max::before   { inset: 1px; border: 1px solid var(--text-3); background: none; }
.term-ctl.close::before { inset: 0 5px 0 0; width: 1px; transform: rotate(45deg); transform-origin: center; }
.term-ctl.close::after  { inset: 0 5px 0 0; width: 1px; transform: rotate(-45deg); transform-origin: center; }
.term-body { padding: 18px 20px; font-family: var(--mono); font-size: 12px; line-height: 1.9; min-height: 220px; }
/* The terminal sits inside a dark-themed section, so its own link colour is
   already the on-dark orange. Not --cds-link-inverse: in Carbon that names the
   colour for the *opposite* ground, which here resolved to the light orange. */
.tp  { color: var(--cds-link-primary); }
.tc  { color: var(--text); }
.td  { color: var(--text-3); }
.tok { color: var(--green); }
.tw  { color: var(--cds-link-primary); }  /* see .tp above */
.terr{ color: var(--red); }
.tbl { color: var(--cds-text-secondary); }  /* filenames are content, not an info status */
.tcur {
  display: inline-block; width: 8px; height: 13px;
  background: var(--accent); border-radius: 1px; vertical-align: middle;
  animation: blink 1s step-end infinite;
}
.tbar-w { display: flex; align-items: center; gap: 10px; margin: 2px 0; }
.tbar   { flex: 1; height: 3px; background: var(--border); border-radius: 2px; }
.tbar-f { height: 100%; background: var(--accent); width: 0%; transition: width 0.1s linear; border-radius: 2px; }
.tbar-p { font-size: 11px; color: var(--text-2); min-width: 32px; text-align: right; }

/* ── WPF window mockup ── */
.wpf-ico {
  width: 20px; height: 20px; background: var(--accent); border-radius: 5px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.wpf-ico svg { width: 10px; height: 10px; }
.wpf-tt  { font-size: 12px; color: var(--text-2); flex: 1; font-weight: 400; }
.wpf-wb  {
  width: 42px; height: 36px; background: transparent; border: none; cursor: pointer;
  font-size: 13px; color: var(--text-3); display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s; border-radius: 0;
}
.wpf-wb:hover:not(.wpf-wbc) { background: rgba(255,255,255,0.06); color: var(--text-2); }
.wpf-wbc:hover { background: var(--cds-button-danger); color: var(--cds-text-on-color); }
.wpf-tbtn {
  height: 26px; padding: 0 10px; border: none; background: transparent;
  font-size: 12px; color: var(--text-2); cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  border-radius: var(--radius); transition: background 0.15s, color 0.15s;
}
.wpf-tbtn:hover  { background: rgba(255,255,255,0.06); color: var(--text); }
.wpf-tbtn.act    { color: var(--accent); }
.wpf-tsep        { width: 1px; height: 16px; background: var(--border); margin: 0 3px; }
.wpf-ph          { height: 30px; background: var(--bg-4); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 14px; font-size: 11px; font-weight: 500; color: var(--text-3); flex-shrink: 0; }
.wfl             { display: block; font-size: 11px; font-weight: 500; color: var(--text-3); margin-bottom: 5px; letter-spacing: 0.01em; }
.wpf-sel, .wpf-inp {
  width: 100%; height: 26px; background: var(--bg-4); border: 1px solid var(--border-2);
  color: var(--text); font-family: var(--mono); font-size: 11px; padding: 0 8px;
  appearance: none; border-radius: var(--radius);
}
.wpf-sw          { position: relative; }
.wpf-sw::after   { content: '▾'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 10px; pointer-events: none; }
.wpf-pl          { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.wpf-pi          { padding: 6px 8px; font-size: 12px; color: var(--text-2); cursor: pointer; display: flex; align-items: center; gap: 6px; transition: background 0.15s; border-radius: var(--radius); }
.wpf-pi:hover    { background: var(--bg-4); color: var(--text); }
.wpf-pi.act      { background: var(--accent-dim); color: var(--accent); }
.wpf-pd          { width: 4px; height: 4px; background: currentColor; border-radius: 50%; flex-shrink: 0; }
.wpf-tr          { display: flex; align-items: center; justify-content: space-between; }
.wpf-tl          { font-size: 12px; color: var(--text-2); }
.wpf-tog         { width: 28px; height: 15px; background: var(--border-2); border-radius: 999px; position: relative; cursor: pointer; transition: background 0.2s; }
.wpf-tog.on      { background: var(--accent); }
.wpf-tog::after  { content: ''; position: absolute; width: 11px; height: 11px; background: white; border-radius: 50%; top: 2px; left: 2px; transition: left 0.2s; }
.wpf-tog.on::after { left: 15px; }
.wpf-tab         { font-size: 12px; color: var(--text-3); cursor: pointer; height: 100%; display: flex; align-items: center; padding: 0 8px; border-bottom: 2px solid transparent; }
.wpf-tab.act     { color: var(--accent); border-bottom-color: var(--accent); }
.qch             { display: grid; grid-template-columns: 20px 1fr 74px 66px 72px 58px; gap: 6px; padding: 5px 10px; background: var(--bg-4); border-bottom: 1px solid var(--border); }
.qch span        { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--text-3); }
.qr              { display: grid; grid-template-columns: 20px 1fr 74px 66px 72px 58px; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--border); align-items: center; transition: background 0.15s; }
.qr:hover        { background: var(--bg-3); }
.qr.active       { background: var(--accent-dim); }
.qs              { font-size: 12px; display: flex; align-items: center; justify-content: center; }
.qf              { font-family: var(--mono); font-size: 11px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qf .a           { color: var(--text-3); margin: 0 3px; }
.qsz, .qfmt      { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.qfmt            { color: var(--text-2); }
.qpw             { display: flex; align-items: center; gap: 4px; }
.qp              { flex: 1; height: 3px; background: var(--border); border-radius: 2px; }
.qpf             { height: 100%; background: var(--accent); transition: width 0.2s; border-radius: 2px; }
.qt              { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.qdr             { border: 1px dashed var(--border-2); margin: 10px; padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; border-radius: var(--radius); }
.qdr-i           { width: 30px; height: 30px; background: var(--accent-dim); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; margin-bottom: 3px; }
.qdr-t           { font-size: 13px; color: var(--text-2); font-weight: 500; }
.qdr-s           { font-family: var(--mono); font-size: 11px; color: var(--text-3); text-align: center; }
.ir              { display: flex; justify-content: space-between; align-items: center; }
.ik              { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.iv              { font-family: var(--mono); font-size: 11px; color: var(--text-2); }
.iv.ok           { color: var(--green); }
.sbi             { font-family: var(--mono); font-size: 11px; color: var(--text-3); display: flex; align-items: center; gap: 5px; }
.sbd             { width: 6px; height: 6px; border-radius: 50%; }
.sbd.g           { background: var(--green); }
.sbp             { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-left: auto; }

/* ── Pricing toggle — Carbon content switcher, pill ── */
.ptog {
  display: inline-flex; align-items: center; border: 1px solid var(--border-2);
  background: var(--bg-4); border-radius: var(--radius-pill); overflow: hidden; margin-bottom: 44px;
}
.ptog-o {
  font-size: 13px; font-weight: 500; padding: 8px 20px; cursor: pointer;
  color: var(--text-2); border-radius: var(--radius-pill);
  transition: color 0.15s, background 0.15s;
}
.ptog-o.act { background: var(--cds-layer-02); color: var(--text); }
.save-b {
  font-family: var(--mono); font-size: 11px; padding: 3px 11px; margin-left: 10px;
  background: var(--accent-dim); color: var(--accent);
  border: 1px solid transparent; border-radius: var(--radius-pill);
}

/* Also support old billing toggle class used by pricing.js */
.toggle-label        { font-size: 13px; font-weight: 500; padding: 8px 20px; cursor: pointer; color: var(--text-2); border-radius: var(--radius-pill); transition: color 0.15s, background 0.15s; }
.toggle-label.active { background: var(--cds-layer-02); color: var(--text); box-shadow: inset 0 0 0 1px var(--cds-border-interactive); }

/* ── Plan cards ── */
/* The ribbon used to sit in normal flow, so it pushed the Professional card's name
   and price ~26px below its neighbours' — the three prices in one row never shared a
   baseline. Every card now reserves the ribbon's band in its top padding and the
   ribbon is positioned into it. */
.plan-card {
  position: relative;
  background: var(--bg-2); padding: 58px 28px 32px; display: flex; flex-direction: column;
  transition: background 0.2s; border-top: 2px solid transparent;
}
.plan-card:hover  { background: var(--bg-3); }
.plan-card.featured { border-top-color: var(--accent); }
.plan-popular  {
  position: absolute; top: 32px; left: 28px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--accent);
}
.plan-name     { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--text); margin-bottom: 14px; }
.plan-price    { font-size: 48px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--text); margin-bottom: 4px; }
.plan-price sup{ font-size: 20px; font-weight: 500; vertical-align: super; letter-spacing: 0; }
.plan-period   { font-family: var(--mono); font-size: 12px; color: var(--text-3); margin-bottom: 4px; }
.plan-seats    { font-size: 13px; color: var(--text-2); margin-bottom: 20px; }
.plan-desc     { font-size: 14px; color: var(--text-2); line-height: 1.65; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.plan-fi       { font-size: 13px; color: var(--text-2); padding: 7px 0; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 9px; }
.plan-fi::before { content: ''; width: 5px; height: 5px; background: var(--accent); border-radius: 50%; flex-shrink: 0; }
.plan-fi.dim   { color: var(--text-3); }
.plan-fi.dim::before { background: var(--border-2); }
.plan-btn {
  display: block; font-size: 13px; font-weight: 500; color: var(--text-2);
  background: transparent; border: 1px solid var(--border-2); padding: 10px 0;
  border-radius: var(--radius); cursor: pointer; text-align: center;
  text-decoration: none; transition: color 0.2s, border-color 0.2s;
}
.plan-btn:hover { color: var(--text); border-color: var(--text-2); }

/* Seat selector */
.seat-row   { display: flex; align-items: center; gap: 0; margin-top: 14px; }
.seat-lbl   { font-size: 13px; color: var(--text-2); margin-right: 10px; }
.seat-btn   {
  width: 28px; height: 28px; background: var(--bg-3); border: 1px solid var(--border-2);
  color: var(--text-2); cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: 14px; transition: color 0.2s, border-color 0.2s;
}
.seat-btn:first-of-type { border-radius: var(--radius) 0 0 var(--radius); }
.seat-btn:last-of-type  { border-radius: 0 var(--radius) var(--radius) 0; }
.seat-btn:hover         { color: var(--accent); border-color: var(--accent); }
.seat-ctrl  {
  font-family: var(--mono); font-size: 13px; color: var(--text); background: var(--bg-4);
  border: 1px solid var(--border-2); border-left: none; border-right: none;
  padding: 4px 14px; min-width: 36px; text-align: center;
}
/* seat-btn is also named seats-btn in pricing.js */
.seats-btn  { width: 28px; height: 28px; background: var(--bg-3); border: 1px solid var(--border-2); color: var(--text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: color 0.2s, border-color 0.2s; }
.seats-btn:hover { color: var(--accent); border-color: var(--accent); }
.seat-note  { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-top: 6px; }

/* Comparison table */
.ctbl-wrap       { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ctbl            { width: 100%; border-collapse: collapse; }
.ctbl th         { font-size: 12px; font-weight: 500; color: var(--text-3); padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--border); }
.ctbl th:first-child { width: 32%; }
.ctbl td         { font-size: 13px; color: var(--text-2); padding: 9px 14px; border-bottom: 1px solid var(--border); }
.ctbl tr:hover td{ background: var(--cds-background-hover); }
.ctbl .rl        { color: var(--text); font-weight: 500; }
.cy { color: var(--green); }
.cn { color: var(--text-3); }
@media (max-width: 768px) {
  .ctbl { min-width: 540px; }
}

/* ── FAQ ── */
.faq-item  { background: var(--bg-3); overflow: hidden; }
.faq-q     { background: transparent; border: none; width: 100%; text-align: left; font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--text); padding: 15px 18px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; transition: background 0.15s; user-select: none; }
.faq-q:hover  { background: var(--bg-4); }
.faq-item.open .faq-q   { color: var(--accent); }
.btn-p svg, .btn-o svg { width: 20px; height: 20px; flex-shrink: 0; }
.faq-arr  { font-size: 20px; color: var(--text-3); transition: transform 0.25s; flex-shrink: 0; }
.faq-item.open .faq-arr { transform: rotate(180deg); color: var(--accent); }
.faq-a    { font-size: 14px; color: var(--text-2); line-height: 1.7; padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.25s ease; }
.faq-item.open .faq-a { max-height: 300px; padding: 0 18px 16px; }

/* ── Resource cards ── */
.res-card  { background: var(--bg-2); padding: 28px; border: none; transition: background 0.2s; display: flex; flex-direction: column; gap: 8px; }
.res-card:hover { background: var(--bg-3); }
.res-tag   { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-3); }
.res-title { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.res-desc  { font-size: 14px; color: var(--text-2); line-height: 1.65; }
.res-link  { font-size: 13px; font-weight: 500; color: var(--accent); text-decoration: none; margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 4px; transition: gap 0.2s; }
.res-link:hover { gap: 8px; }

/* ── Trial / Download form ── */
.trial-sub   { font-size: 15px; color: var(--text-2); margin-bottom: 28px; }
.form-field  { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.form-label  { font-size: 12px; font-weight: 500; color: var(--text-3); }
/* Carbon field: fill + bottom border only, 2px focus/error outlines */
.form-input  {
  height: 40px; background: var(--bg-4); border: none;
  border-bottom: 1px solid var(--cds-border-strong);
  color: var(--text); font-family: var(--font); font-size: 14px; padding: 0 14px;
  outline: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: background-color var(--cds-duration-fast-02) var(--cds-easing-productive); width: 100%;
}
.form-input::placeholder { color: var(--cds-text-placeholder); }
.form-input:focus { outline: 2px solid var(--cds-focus); outline-offset: -2px; border-bottom-color: transparent; }
.form-input.error { outline: 2px solid var(--cds-support-error); outline-offset: -2px; border-bottom-color: transparent; }

/* generic form-group used by modals */
.form-group  { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.form-group label { font-size: 12px; font-weight: 500; color: var(--text-3); }
.form-group input,
.form-group select,
.form-group textarea {
  background: var(--bg-4); border: none;
  border-bottom: 1px solid var(--cds-border-strong);
  color: var(--text); font-family: var(--font); font-size: 14px;
  padding: 0 14px; outline: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: background-color var(--cds-duration-fast-02) var(--cds-easing-productive); width: 100%;
}
.form-group input,
.form-group select { height: 40px; }
.form-group textarea { padding: 10px 14px; resize: vertical; min-height: 80px; }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--cds-text-placeholder); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: 2px solid var(--cds-focus); outline-offset: -2px; border-bottom-color: transparent; }
.form-group input.error,
.form-group select.error { outline: 2px solid var(--cds-support-error); outline-offset: -2px; border-bottom-color: transparent; }
.form-error { font-size: 12px; color: var(--cds-text-error); min-height: 16px; }
.required   { color: var(--cds-support-error); }
.turnstile-container { min-height: 68px; }

.cf-box {
  background: var(--bg-4); border: 1px solid var(--border-2); border-radius: var(--radius);
  padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
}
.cf-check { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 9px; }
.cf-check::before {
  content: '✓'; width: 20px; height: 20px; background: var(--green);
  color: #fff; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 12px; flex-shrink: 0;
}
.cf-brand { font-family: var(--mono); font-size: 11px; color: var(--text-3); }

/* Trial info sidebar */
.trial-box   { background: var(--bg-3); border: 1px solid var(--border-2); border-radius: var(--radius-lg); padding: 24px; }
.trial-box-h { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 14px; }
/* Included vs excluded used to be carried by dot colour alone (green / grey), which
   is a colour-only distinction. The marks give it a second, non-colour channel and
   the column headings state it in words. */
.trial-col-h {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-3);
  padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--border);
}
.trial-fi    { font-size: 13px; color: var(--text-2); display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; }
.trial-fi::before {
  content: '\2713'; color: var(--green);
  font-size: 12px; line-height: 1.35; width: 12px; flex-shrink: 0; text-align: center;
}
.trial-fi.x::before { content: '\2715'; color: var(--text-2); }
.ent-box  { background: var(--bg-3); border: 1px solid var(--border-2); border-radius: var(--radius-lg); padding: 22px; }
.ent-h    { font-size: 16px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.ent-d    { font-size: 14px; color: var(--text-2); line-height: 1.65; margin-bottom: 16px; }

/* Footer text */
.fl-logo { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--text-2); }
.fl-copy { font-family: var(--mono); font-size: 11px; color: var(--text-3); }

/* ════ MODALS ════ */
.modal {
  display: none; position: fixed; inset: 0; z-index: 500;
  align-items: center; justify-content: center;
}
.modal.active { display: flex; }
.modal-backdrop {
  position: absolute; inset: 0;
  background: var(--cds-overlay);
}
.modal-content {
  position: relative; background: var(--cds-layer-01); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 32px; max-width: 480px; width: 90%;
  max-height: 90vh; overflow-y: auto;
  box-shadow: var(--cds-shadow);
  animation: modal-enter var(--cds-duration-moderate-02) var(--cds-easing-expressive-entrance);
}
@keyframes modal-enter {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: none; }
}
.modal-content h3 {
  font-size: 20px; font-weight: 600; letter-spacing: -0.02em;
  color: var(--text); margin-bottom: 8px;
}
.modal-content > p {
  font-size: 14px; color: var(--text-2); margin-bottom: 20px;
}
.modal-close {
  position: absolute; top: 16px; right: 16px;
  background: none; border: none; cursor: pointer;
  font-size: 20px; color: var(--text-3); line-height: 1;
  width: 28px; height: 28px; display: flex; align-items: center;
  justify-content: center; border-radius: var(--radius);
  transition: color 0.15s, background 0.15s;
}
.modal-close:hover { color: var(--text); background: var(--cds-background-hover); }
.modal-note { font-size: 12px; color: var(--text-3); text-align: center; margin-top: 12px; }

/* A modal form taller than 90vh scrolls inside .modal-content, which used to carry
   the submit button out of sight with no cue that anything was below. Pinning the
   action row to the bottom of the scroll area keeps the primary action reachable at
   every viewport height; the top border doubles as the "more above" cue.
   bottom/margin cancel .modal-content's 32px padding so the band meets its edges. */
.modal-actions {
  position: sticky;
  bottom: -32px;
  margin: 20px -32px -32px;
  padding: 16px 32px 32px;
  background: var(--cds-layer-01);
  border-top: 1px solid var(--border);
}
.modal-actions .modal-note { margin-top: 10px; }

/* btn compatibility for modal buttons — Carbon primary / tertiary */
.btn          { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font); font-size: 14px; font-weight: 400; letter-spacing: 0.16px; min-height: 40px; padding: 0 20px; border-radius: var(--radius-sm); cursor: pointer; text-decoration: none; transition: background var(--cds-duration-fast-02) var(--cds-easing-productive), border-color var(--cds-duration-fast-02) var(--cds-easing-productive), color var(--cds-duration-fast-02) var(--cds-easing-productive); border: 1px solid transparent; }
.btn-primary  { color: var(--cds-text-on-color); background: var(--cds-button-primary); border-color: transparent; }
.btn-primary:hover  { background: var(--cds-button-primary-hover); }
.btn-primary:active { background: var(--cds-button-primary-active); }
.btn-secondary{ color: var(--cds-button-tertiary); background: transparent; border-color: var(--cds-button-tertiary); }
.btn-secondary:hover { color: var(--cds-text-inverse); background: var(--cds-button-tertiary-hover); border-color: var(--cds-button-tertiary-hover); }
.btn-block    { width: 100%; }
.btn-lg       { padding: 13px 28px; font-size: 15px; }
.btn-text     { pointer-events: none; }
.btn.loading  { opacity: 0.7; pointer-events: none; }
.btn.loading .btn-text::after { content: '…'; }

/* ── Utilities (replace former inline style attributes) ── */
.btn-block-center { width: 100%; justify-content: center; }
.input-hidden     { display: none; }
.mt-8   { margin-top: 8px; }
.mt-14  { margin-top: 14px; }
.mt-64  { margin-top: 64px; }
.mb-14  { margin-bottom: 14px; }
.billing-row { display: flex; align-items: center; gap: 14px; margin-bottom: 44px; }
.mono-note   { font-family: var(--mono); font-size: 11px; }
.seat-hint   { font-family: var(--mono); font-size: 11px; color: var(--text-3); margin-top: 4px; }
.plan-price.sm { font-size: 34px; letter-spacing: -0.02em; margin-bottom: 12px; }
.fine-print   { font-size: 12px; color: var(--text-3); margin-top: 12px; }
.fine-print a { color: var(--text-3); text-decoration: underline; }
.app-shot {
  display: block; width: 100%; max-width: 1060px; margin: 0 auto;
  border-radius: var(--radius-lg); border: 1px solid var(--border);
  box-shadow: var(--cds-shadow);
}
.fl .fl-copy { margin-top: 4px; }

/* ════ PAGE LOADING OVERLAY ════ */
.page-loading-overlay {
  display: none; position: fixed; inset: 0; z-index: 600;
  background: var(--cds-overlay);
  flex-direction: column; align-items: center; justify-content: center; gap: 16px;
}
.page-loading-overlay:not([aria-hidden="true"]) { display: flex; }
.page-loading-overlay.active { display: flex; }
.page-loading-spinner {
  width: 40px; height: 40px; border: 2px solid var(--border-2);
  border-top-color: var(--accent); border-radius: 50%;
  animation: spin 0.75s linear infinite;
}
.page-loading-text { font-family: var(--mono); font-size: 13px; color: var(--text-3); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ════ COOKIE CONSENT — Carbon inline notification, floating ════ */
.cookie-consent {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 400; display: none; background: var(--cds-layer-01); border: 1px solid var(--border);
  /* Brand accent, not an info status - support-info is blue and was the only
     blue left on the page. */
  border-left: 3px solid var(--cds-interactive);
  border-radius: var(--radius-sm); padding: 20px 24px; max-width: 560px; width: calc(100% - 40px);
  box-shadow: var(--cds-shadow);
}
.cookie-consent.show { display: block; }
.cookie-consent-content { display: flex; flex-direction: column; gap: 12px; }
.cookie-consent-title { font-size: 15px; font-weight: 600; color: var(--text); }
.cookie-consent-content > .cookie-consent-text p:last-child { font-size: 13px; color: var(--text-2); }
.cookie-consent-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.cookie-privacy-link { font-size: 12px; color: var(--cds-link-primary); text-decoration: none; }
.cookie-privacy-link:hover { color: var(--cds-link-primary-hover); }

/* ════ TOAST (used by shared/js/toast.js) ════ */
.toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 700;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
.toast {
  background: var(--bg-2); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 12px 16px;
  font-size: 13px; color: var(--text-2);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
  pointer-events: auto; max-width: 320px;
  animation: fadeIn 0.2s ease;
}
.toast.toast-error   { border-left: 3px solid var(--red); }
.toast.toast-success { border-left: 3px solid var(--green); }
.toast.toast-info    { border-left: 3px solid var(--accent); }

/* ── S-22: restore Carbon's field/layer pairing inside modals ─────────────
   Carbon pairs field-01 with a `background` surface and field-02 with a
   `layer-01` surface. .modal-content is layer-01, but its fields were using
   field-01 — the same value — so the fill collapsed to 1:1 against the card and
   the control read as a bare underline rather than a field. The bottom border
   still carries the 3:1 boundary either way (measured 3.02:1); this restores the
   fill that tells a reader the box is enterable. */
.modal-content .form-input,
.modal-content .form-group input,
.modal-content .form-group select,
.modal-content .form-group textarea {
  background: var(--cds-field-02);
}

.modal-content .form-group input:hover,
.modal-content .form-group select:hover,
.modal-content .form-group textarea:hover {
  background: var(--cds-field-hover-02, var(--cds-field-02));
}

/* ── App screenshots: light + dark pair ──────────────────────────────────
   The app ships both themes, so the section shows both rather than asserting
   it in prose. Stacks below the two-column breakpoint so neither shot ends up
   too small to read. */
.app-shots {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
.app-shot-fig { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.app-shot-fig figcaption {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-3); text-align: center;
}
@media (max-width: 900px) {
  .app-shots { gap: 20px; }
}

/* site/css/seo.css */
/* SEO content and resource page/editorial patterns */

/* ── Token bridge: maps old MD3 names to the Soft Carbon bridge tokens ── */
:root,
[data-carbon-theme] {
  --md3-primary:                 var(--accent);
  --md3-on-surface:              var(--text);
  --md3-on-surface-variant:      var(--text-2);
  --md3-outline-variant:         var(--border-2);
  --md3-surface-container-low:   var(--bg-2);
  --md3-surface-container-high:  var(--bg-3);
  --md3-surface-container-lowest:var(--bg);
  --md3-primary-container:       var(--accent-dim);
  --md3-elevation-1:             0 1px 4px rgba(0, 0, 0, 0.08);
  --md3-elevation-2:             0 2px 10px rgba(0, 0, 0, 0.10);
  --md3-duration-short3:         var(--cds-duration-fast-02);
  --md3-easing-standard:         var(--cds-easing-productive);
}

.resources-section {
    padding: 72px 0;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.resource-card {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 0;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--md3-outline-variant);
    border-radius: var(--radius-lg);
    padding: 20px;
    background: color-mix(in srgb, var(--md3-surface-container-low) 72%, transparent);
    box-shadow: var(--md3-elevation-1);
    transition: border-color var(--md3-duration-short3) var(--md3-easing-standard),
                box-shadow var(--md3-duration-short3) var(--md3-easing-standard),
                background-color var(--md3-duration-short3) var(--md3-easing-standard);
}

.resource-card:hover {
    border-color: color-mix(in srgb, var(--md3-primary) 45%, var(--md3-outline-variant));
    background: color-mix(in srgb, var(--md3-surface-container-low) 92%, transparent);
    box-shadow: var(--md3-elevation-2);
}

.resource-card h3 {
    margin: 0 0 8px;
    color: var(--md3-on-surface);
    font-size: 1.05rem;
    line-height: 1.26;
    letter-spacing: -0.012em;
}

.resource-card p {
    color: var(--md3-on-surface-variant);
    margin: 0 0 14px;
    line-height: 1.55;
    font-size: 0.92rem;
}

.resource-card .resource-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--md3-primary);
    font-size: 0.9rem;
}

.resource-card .resource-cta::after {
    content: '\2192';
    font-size: 0.9em;
}

.seo-content {
    max-width: 1040px;
    margin: 110px auto 72px;
    padding: 0 24px;
    display: grid;
    gap: 0;
}

.seo-content > * {
    margin-top: 0;
    margin-bottom: 0;
}

.seo-content .page-kicker {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 12px;
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid color-mix(in srgb, var(--md3-primary) 24%, var(--md3-outline-variant));
    background: color-mix(in srgb, var(--md3-primary-container) 28%, transparent);
    color: var(--md3-on-surface);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.seo-content h1 {
    margin-bottom: 14px;
    max-width: 22ch;
    font-size: clamp(2rem, 3.8vw, 2.85rem);
    line-height: 1.08;
    letter-spacing: -0.026em;
}

/* Legal page helpers (previously referenced but undefined) */
.last-updated {
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.32px;
    color: var(--text-3);
    margin-bottom: 24px;
}

.legal-note {
    padding: 12px 16px;
    background: var(--bg-2);
    border-left: 3px solid var(--cds-support-info);
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-2);
    margin: 16px 0;
}

.seo-content .page-intro {
    margin-bottom: 26px;
    max-width: 70ch;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--md3-outline-variant);
    background: color-mix(in srgb, var(--md3-surface-container-low) 86%, transparent);
    box-shadow: var(--md3-elevation-1);
    color: var(--md3-on-surface-variant);
    font-size: 1rem;
    line-height: 1.68;
}

.seo-content h2 {
    margin-top: 30px;
    margin-bottom: 12px;
    padding-top: 20px;
    border-top: 1px solid color-mix(in srgb, var(--md3-outline-variant) 72%, transparent);
    color: var(--md3-on-surface);
    font-size: clamp(1.15rem, 1.8vw, 1.45rem);
    line-height: 1.2;
    letter-spacing: -0.016em;
    scroll-margin-top: 96px;
}

.seo-content p,
.seo-content li {
    color: var(--md3-on-surface-variant);
    font-size: 0.96rem;
    line-height: 1.7;
}

.seo-content p + p {
    margin-top: 10px;
}

.seo-content ul {
    margin: 0 0 4px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.seo-content li {
    position: relative;
    padding-left: 18px;
}

.seo-content li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.68em;
    width: 8px;
    height: 2px;
    border-radius: 999px;
    background: var(--md3-primary);
    transform: translateY(-50%);
}

.seo-content a {
    color: var(--md3-primary);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--md3-primary) 45%, transparent);
    text-underline-offset: 3px;
}

.seo-content a:hover {
    text-decoration-color: currentColor;
}

.seo-note-box {
    border: 1px solid color-mix(in srgb, var(--md3-primary) 22%, var(--md3-outline-variant));
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    background: color-mix(in srgb, var(--md3-primary-container) 20%, transparent);
    box-shadow: var(--md3-elevation-1);
    margin: 24px 0 2px;
}

.seo-note-box p {
    margin: 0;
    color: var(--md3-on-surface);
}

/* Optional classes for future resource-page enhancements */
.seo-toc,
.seo-cta-panel,
.seo-kpi-grid {
    border-radius: var(--radius-lg);
    border: 1px solid var(--md3-outline-variant);
    background: color-mix(in srgb, var(--md3-surface-container-low) 82%, transparent);
    box-shadow: var(--md3-elevation-1);
}

.seo-page-grid {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.seo-main {
    min-width: 0;
}

.seo-main > *:first-child {
    margin-top: 0;
}

/* Option lists like `auto|generic|webcgm|s1000d|ata|cals|cgmplus|pip` carry no
   spaces to break at, so on a phone they pushed the page 250px past the viewport.
   overflow-x: hidden used to conceal that by clipping, which meant the end of the
   list was unreadable rather than merely off-screen. anywhere also lets the
   container shrink below the string's width, which break-word does not. */
.seo-main code,
.seo-toc code {
    overflow-wrap: anywhere;
}

.seo-toc {
    padding: 14px 16px;
    position: sticky;
    top: 96px;
}

.seo-toc h2,
.seo-toc h3 {
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.seo-toc-controls {
    display: grid;
    gap: 8px;
    margin: 0 0 10px;
}

.seo-toc-progress {
    display: grid;
    gap: 6px;
}

.seo-toc-progress-text {
    color: var(--md3-on-surface-variant);
    font-size: 0.74rem;
    line-height: 1.2;
    letter-spacing: 0.02em;
}

.seo-toc-progress-track {
    height: 4px;
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, var(--md3-surface-container-high) 78%, transparent);
    overflow: hidden;
}

.seo-toc-progress-bar {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: color-mix(in srgb, var(--md3-primary) 72%, white);
    transition: width 180ms ease;
}

.seo-toc-toggle {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 34px;
    padding: 6px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--md3-outline-variant);
    background: color-mix(in srgb, var(--md3-surface-container-lowest) 94%, transparent);
    color: var(--md3-on-surface);
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
}

.seo-toc-toggle-copy {
    min-width: 0;
    display: grid;
    gap: 1px;
    text-align: left;
}

.seo-toc-toggle-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.1;
}

.seo-toc-toggle-current {
    display: block;
    min-width: 0;
    max-width: 28ch;
    color: var(--md3-on-surface-variant);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.seo-toc-toggle:hover {
    border-color: color-mix(in srgb, var(--md3-primary) 36%, var(--md3-outline-variant));
    color: var(--md3-primary);
}

.seo-toc-toggle:hover .seo-toc-toggle-current {
    color: color-mix(in srgb, var(--md3-primary) 82%, var(--md3-on-surface-variant));
}

.seo-toc-toggle:focus-visible,
.seo-toc a:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--md3-primary) 68%, white);
    outline-offset: 2px;
}

.seo-toc-toggle-icon {
    display: inline-block;
    line-height: 1;
    transition: transform 160ms ease;
}

.seo-toc.is-collapsed .seo-toc-toggle-icon {
    transform: rotate(-90deg);
}

.seo-toc-list-wrap[hidden] {
    display: none;
}

.seo-toc ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 6px;
}

.seo-toc li {
    padding-left: 0;
}

.seo-toc li::before {
    display: none;
}

.seo-toc a {
    display: block;
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    color: var(--md3-on-surface-variant);
    text-decoration: none;
    line-height: 1.35;
    font-size: 0.86rem;
}

.seo-toc a:hover {
    color: var(--md3-on-surface);
    background: color-mix(in srgb, var(--md3-surface-container-lowest) 92%, transparent);
    text-decoration: none;
}

.seo-toc a.is-active,
.seo-toc a[aria-current="location"] {
    color: var(--md3-on-surface);
    background: color-mix(in srgb, var(--md3-primary-container) 36%, transparent);
    border: 1px solid color-mix(in srgb, var(--md3-primary) 28%, var(--md3-outline-variant));
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--md3-primary) 70%, transparent);
}

.seo-cta-panel {
    padding: 16px 18px;
    margin: 24px 0 2px;
}

.seo-cta-panel h2,
.seo-cta-panel h3 {
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    color: var(--md3-on-surface);
    font-size: 1rem;
    line-height: 1.25;
    letter-spacing: -0.012em;
}

.seo-cta-panel p {
    margin: 0;
    color: var(--md3-on-surface-variant);
    font-size: 0.9rem;
    line-height: 1.55;
}

.seo-cta-panel p + p {
    margin-top: 8px;
}

.seo-cta-panel .seo-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.seo-cta-panel .seo-cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--md3-outline-variant);
    background: color-mix(in srgb, var(--md3-surface-container-lowest) 92%, transparent);
    color: var(--md3-on-surface);
    text-decoration: none;
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.2;
}

.seo-cta-panel .seo-cta-link:hover {
    border-color: color-mix(in srgb, var(--md3-primary) 42%, var(--md3-outline-variant));
    color: var(--md3-primary);
    text-decoration: none;
}

.seo-cta-panel .seo-cta-link--primary {
    background: color-mix(in srgb, var(--md3-primary-container) 34%, var(--md3-surface-container-lowest));
    border-color: color-mix(in srgb, var(--md3-primary) 36%, var(--md3-outline-variant));
}

.seo-kpi-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 14px;
}

@media (max-width: 900px) {
    .resources-grid {
        grid-template-columns: 1fr;
    }

    .seo-content {
        margin: 104px auto 64px;
        padding: 0 20px;
    }

    .seo-content .page-intro {
        padding: 14px 16px;
    }

    .seo-page-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .seo-toc {
        position: static;
        top: auto;
    }

    .seo-toc-controls {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
        gap: 10px;
    }

    .seo-toc-progress {
        min-width: 0;
    }

    .seo-toc-toggle {
        display: inline-flex;
    }

    .seo-toc:not(.is-collapsed) .seo-toc-toggle-current {
        max-width: 20ch;
    }

    .seo-kpi-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .resource-card {
        padding: 16px;
    }

    .seo-content {
        margin: 96px auto 56px;
        padding: 0 16px;
    }

    .seo-content h1 {
        max-width: none;
    }

    .seo-content h2 {
        margin-top: 24px;
        padding-top: 16px;
        scroll-margin-top: 84px;
    }

    .seo-toc-controls {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .seo-toc-toggle {
        width: 100%;
    }

    .seo-toc-toggle-current {
        max-width: none;
    }

    .seo-cta-panel .seo-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .seo-cta-panel .seo-cta-link {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .seo-toc-progress-bar,
    .seo-toc-toggle-icon {
        transition: none;
    }
}

/* ════ 404 ════════════════════════════════════════════════════════════════
   Unmatched paths used to return an empty body. This is the branded stand-in;
   it borrows the content pages' shell so there is nothing new to maintain. */
.nf { padding: 140px 32px 100px; }
.nf-inner { max-width: 720px; margin: 0 auto; }
.nf-code {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em;
  color: var(--accent); margin-bottom: 14px;
}
.nf-title {
  font-size: clamp(30px, 4.5vw, 46px); font-weight: 600; letter-spacing: -0.02em;
  line-height: 1.12; color: var(--text); margin-bottom: 16px;
}
.nf-lede { font-size: 17px; line-height: 1.65; color: var(--text-2); margin-bottom: 32px; }
.nf-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 56px; }
.nf-guides { border-top: 1px solid var(--border); padding-top: 28px; }
.nf-guides-h {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-3); margin-bottom: 18px;
}
.nf-list { list-style: none; display: grid; gap: 18px; padding: 0; margin: 0; }
.nf-list li { display: flex; flex-direction: column; gap: 4px; }
.nf-list a { font-size: 15px; font-weight: 600; color: var(--accent); text-decoration: none; }
.nf-list a:hover { text-decoration: underline; }
.nf-list span { font-size: 14px; color: var(--text-2); line-height: 1.6; }
.nf-help { margin-top: 44px; font-size: 14px; color: var(--text-3); }
.nf-help a { color: var(--accent); }

@media (max-width: 640px) {
  .nf { padding: 110px 20px 72px; }
  .nf-acts .btn-p, .nf-acts .btn-o { width: 100%; justify-content: center; }
}

/* site/style.css */
/* Site CSS Entry (Layered) */
