/* Timeseer base style. Everything down to the line 'Styleguide page only' is the template: copy it as it is.
       Rules marked 'Website' are copied from the timeseer.ai stylesheet (Webflow) with their names unchanged, so they
       behave the same once pages move into Webflow. Rules marked 'New' use names the website does not use */

    /* Website: fonts, the same files the site loads. Only Inter Regular is uploaded, so every Inter weight
       renders as Regular, and 600 is thickened by the browser */
    @font-face {
      font-family: Inter;
      src: url("https://cdn.prod.website-files.com/69284afe5815eb87e8a3d749/6928605fcde31576c8d5ef2e_Inter.ttf") format("truetype");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }
    @font-face {
      font-family: Ibmplexmono;
      src: url("https://cdn.prod.website-files.com/69284afe5815eb87e8a3d749/6928617575ba9af40a866466_IBMPlexMono-Regular.ttf") format("truetype");
      font-weight: 400;
      font-style: normal;
      font-display: swap;
    }

    /* Website tokens: the timeseer.ai variables, names and values unchanged. Leftover variables from the site's
       starter template that point at deleted colours are left out */
    :root {
      /* Primitives: raw colours and opacities */
      --_primitives---color--neutral-darker: #222;
      --_primitives---opacity--white-5: #ffffff0d;
      --_primitives---color--neutral-darkest: #000;
      --_primitives---brand--yellow-30: #ffcc004d;
      --_primitives---brand--red-30: #ea00134d;
      --_primitives---brand--green-30: #00b36d4d;
      --_primitives---brand--yellow: #fc0;
      --_primitives---opacity--white-10: #ffffff1a;
      --_primitives---brand--red-10: #ea00131a;
      --_primitives---brand--green-10: #00b36d1a;
      --_primitives---opacity--white-30: #ffffff4d;
      --_primitives---opacity--white-20: #fff3;
      --_primitives---opacity--white-15: #ffffff26;
      --_primitives---opacity--neutral-darkest-5: #0000000d;
      --_primitives---opacity--transparent: #fff0;
      --_primitives---opacity--neutral-darkest-30: #0000004d;
      --_primitives---opacity--white-40: #fff6;
      --_primitives---opacity--neutral-darkest-15: #00000026;
      --_primitives---opacity--neutral-darkest-60: #0009;
      --_primitives---opacity--neutral-darkest-50: #00000080;
      --_primitives---opacity--white-60: #fff9;
      --_primitives---opacity--neutral-darkest-20: #0003;
      --_primitives---opacity--white-50: #ffffff80;
      --_primitives---opacity--neutral-darkest-40: #0006;
      --_primitives---opacity--neutral-darkest-10: #0000001a;
      --_primitives---color--white: #fff;
      --_primitives---color--neutral: #666;
      --_primitives---color--neutral-lighter: #ccc;
      --_primitives---color--neutral-dark: #444;
      --_primitives---color--neutral-light: #aaa;
      --_primitives---color--neutral-lightest: #eee;
      --_primitives---brand--light: #f2f2f2;
      --_primitives---brand--green: #00b36d;
      --_primitives---brand--dark: #0d0d0d;
      --_primitives---brand--yellow-10: #ffcc001a;
      --_primitives---brand--red: #ea0000;
      /* Brand roles */
      --brand--brand-1: var(--_primitives---brand--yellow);
      --brand--brand-3: var(--_primitives---brand--red);
      --brand--brand-2: var(--_primitives---brand--green);
      /* Named colours */
      --color--white: white;
      --color--light-80: color-mix(in srgb, var(--color--light) 80%, transparent);
      --color--light-40: color-mix(in srgb, var(--color--light) 40%, transparent);
      --color--light-60: color-mix(in srgb, var(--color--light) 60%, transparent);
      --color--black: black;
      --color--dark: var(--_primitives---brand--dark);
      --color--dark-secondary: var(--_primitives---color--neutral-darker);
      --color--light-20: color-mix(in srgb, var(--color--light) 20%, transparent);
      --color--dark-20: color-mix(in srgb, var(--color--dark) 20%, transparent);
      --color--light: var(--_primitives---brand--light);
      --color--light-secondary: #d8d8d8;
      --color--grey: #888;
      --color--dark-40: color-mix(in srgb, var(--color--dark) 40%, transparent);
      --color--dark-60: color-mix(in srgb, var(--color--dark) 60%, transparent);
      --color--dark-80: color-mix(in srgb, var(--color--dark) 80%, transparent);
      /* Typography */
      --_typography---font--font-body: Inter, Arial, sans-serif;
      --_typography---line-height--body: var(--_typography---line-height--1-5);
      --_typography---font-weight--body: var(--_typography---font-weight--regular);
      --_typography---font--font-title: Inter, Arial, sans-serif;
      --_typography---line-height--title: var(--_typography---line-height--1-2);
      --_typography---font-weight--title: var(--_typography---font-weight--medium);
      --_typography---letter-spacing--title: -.05em;
      --_typography---line-height--1-2: 1.2;
      --_typography---line-height--1-4: 1.4;
      --_typography---font-weight--medium: 500;
      --_typography---letter-spacing--0-03em: -.03em;
      --_typography---font-weight--regular: 400;
      --_typography---line-height--1-3: 1.3;
      --_typography---font-weight--light: 300;
      --_typography---font-weight--bold: 700;
      --_typography---font-weight--semibold: 600;
      --_typography---letter-spacing--subtitle: .05em;
      --_typography---line-height--1: 1;
      --_typography---line-height--1-1: 1.1;
      --_typography---line-height--1-5: 1.5;
      --_typography---line-height--0: 0;
      --_typography---letter-spacing--0em: 0em;
      /* Sizes, spacing and radii, desktop values */
      --_responsive---font-size--text-regular: 1rem;
      --_responsive---font-size--h1: 4rem;
      --_responsive---font-size--h2: 3rem;
      --_responsive---font-size--h3: 2.5rem;
      --_responsive---font-size--h4: 2rem;
      --_responsive---font-size--h5: 1.5rem;
      --_responsive---font-size--h6: 1.25rem;
      --_responsive---margin--tiny: .25rem;
      --_responsive---margin--xxsmall: .5rem;
      --_responsive---margin--xsmall: 1rem;
      --_responsive---margin--small: 1.5rem;
      --_responsive---margin--medium: 2rem;
      --_responsive---margin--large: 3rem;
      --_responsive---margin--xlarge: 4rem;
      --_responsive---margin--xxlarge: 5rem;
      --_responsive---margin--huge: 6rem;
      --_responsive---margin--xhuge: 7rem;
      --_responsive---margin--xxhuge: 10rem;
      --_responsive---font-size--text-medium: 1.125rem;
      --_responsive---font-size--text-tiny: .75rem;
      --_responsive---radius--input: .1875rem;
      --_responsive---radius--small: .5rem;
      --_responsive---font-size--text-small: .875rem;
      --_responsive---font-size--text-large: 1.25rem;
      --_responsive---section-space--small: 3rem;
      --_responsive---section-space--medium: 5rem;
      --_responsive---section-space--large: 7rem;
      --_responsive---font-size--text-xlarge: 1.5rem;
      --_responsive---font-size--text-xxlarge: 2rem;
      --_responsive---section-space--none: 0rem;
      --_responsive---radius--normal: 1rem;
      --_responsive---radius--large: 2rem;
      --_responsive---radius--img: 1rem;
      --_responsive---radius--img-large: 2rem;
      --_responsive---gap--gap-small: .5rem;
      --_responsive---gap--gap-regular: 1rem;
      --_responsive---gap--gap-large: 3rem;
      /* Theme: what text, backgrounds, borders, buttons and fields use */
      --_theme---background--bg-primary: var(--color--dark);
      --_theme---text-color--text-primary: var(--color--light-80);
      --_theme---text-color--text-title: var(--color--light);
      --_theme---link-color--link-primary: var(--color--light);
      --_theme---text-color--text-highlight: var(--brand--brand-1);
      --_theme---input--border: var(--_primitives---opacity--white-20);
      --_theme---input--background: transparent;
      --_theme---background--bg-white: var(--color--white);
      --_theme---background--bg-highlight: var(--brand--brand-1);
      --_theme---link-color--link-alt: var(--color--light);
      --_theme---background--bg-secondary: var(--_primitives---opacity--white-5);
      --_theme---background--bg-alt: var(--_primitives---opacity--white-10);
      --_theme---text-color--text-alt: var(--color--light);
      --_theme---text-color--text-secondary: var(--color--light-60);
      --_theme---button-primary--border: var(--_primitives---opacity--white-30);
      --_theme---button-secondary--border: var(--_primitives---opacity--neutral-darkest-20);
      --_theme---button-primary--text: var(--color--dark);
      --_theme---button-primary--background-hover: var(--color--dark-secondary);
      --_theme---button-primary--background: var(--brand--brand-1);
      --_theme---button-secondary--background: var(--color--light);
      --_theme---border-color--border-primary: var(--_primitives---opacity--white-5);
      --_theme---border-color--border-secondary: var(--color--dark-20);
      --_theme---border-color--border-alt: var(--color--light-60);
      --_theme---border-color--border-highlight: var(--brand--brand-1);
      --_theme---link-color--link-secondary: var(--color--grey);
      --_theme---button-primary--text-hover: var(--color--light-secondary);
      --_theme---button-secondary--text: var(--color--dark);
      --_theme---button-secondary--background-hover: var(--color--dark);
      --_theme---button-secondary--text-hover: var(--color--white);
      --_theme---input--border-focused: var(--color--dark-40);
      --_theme---input--text-placeholder: var(--color--light-40);
      /* Container widths */
      --container--large: 80rem;
      --container--medium: 64rem;
      --container--small: 50rem;
      --container--nav: var(--container--large);
    }
    /* Website: the same sizes at 991px and narrower */
    @media screen and (max-width: 991px) {
      body {
        --_responsive---font-size--text-regular: 1rem;
        --_responsive---font-size--h1: 3rem;
        --_responsive---font-size--h2: 2.5rem;
        --_responsive---font-size--h3: 2.25rem;
        --_responsive---font-size--h4: 1.75rem;
        --_responsive---font-size--h5: 1.5rem;
        --_responsive---font-size--h6: 1.125rem;
        --_responsive---margin--tiny: .25rem;
        --_responsive---margin--xxsmall: .5rem;
        --_responsive---margin--xsmall: 1rem;
        --_responsive---margin--small: 1.5rem;
        --_responsive---margin--medium: 2rem;
        --_responsive---margin--large: 2.5rem;
        --_responsive---margin--xlarge: 3.5rem;
        --_responsive---margin--xxlarge: 4.5rem;
        --_responsive---margin--huge: 5rem;
        --_responsive---margin--xhuge: 6rem;
        --_responsive---margin--xxhuge: 7.5rem;
        --_responsive---font-size--text-medium: 1.125rem;
        --_responsive---font-size--text-tiny: .75rem;
        --_responsive---radius--input: .1875rem;
        --_responsive---radius--small: .5rem;
        --_responsive---font-size--text-small: .875rem;
        --_responsive---font-size--text-large: 1.25rem;
        --_responsive---section-space--small: 3rem;
        --_responsive---section-space--medium: 4rem;
        --_responsive---section-space--large: 6rem;
        --_responsive---font-size--text-xlarge: 1.375rem;
        --_responsive---font-size--text-xxlarge: 1.5rem;
        --_responsive---section-space--none: 0rem;
        --_responsive---radius--normal: 1rem;
        --_responsive---radius--large: 2rem;
        --_responsive---radius--img: .75rem;
        --_responsive---radius--img-large: 1.5rem;
        --_responsive---gap--gap-small: .5rem;
        --_responsive---gap--gap-regular: 1rem;
        --_responsive---gap--gap-large: 3rem;
      }
    }
    /* Website: the same sizes at 767px and narrower */
    @media screen and (max-width: 767px) {
      body {
        --_responsive---font-size--text-regular: 1rem;
        --_responsive---font-size--h1: 2.25rem;
        --_responsive---font-size--h2: 2rem;
        --_responsive---font-size--h3: 1.75rem;
        --_responsive---font-size--h4: 1.5rem;
        --_responsive---font-size--h5: 1.25rem;
        --_responsive---font-size--h6: 1.125rem;
        --_responsive---margin--tiny: .25rem;
        --_responsive---margin--xxsmall: .5rem;
        --_responsive---margin--xsmall: .75rem;
        --_responsive---margin--small: 1.25rem;
        --_responsive---margin--medium: 1.5rem;
        --_responsive---margin--large: 2rem;
        --_responsive---margin--xlarge: 2.5rem;
        --_responsive---margin--xxlarge: 3rem;
        --_responsive---margin--huge: 3.5rem;
        --_responsive---margin--xhuge: 4rem;
        --_responsive---margin--xxhuge: 5rem;
        --_responsive---font-size--text-medium: 1.125rem;
        --_responsive---font-size--text-tiny: .75rem;
        --_responsive---radius--input: .1875rem;
        --_responsive---radius--small: .375rem;
        --_responsive---font-size--text-small: .875rem;
        --_responsive---font-size--text-large: 1.125rem;
        --_responsive---section-space--small: 2rem;
        --_responsive---section-space--medium: 3rem;
        --_responsive---section-space--large: 4rem;
        --_responsive---font-size--text-xlarge: 1.25rem;
        --_responsive---font-size--text-xxlarge: 1.375rem;
        --_responsive---section-space--none: 0rem;
        --_responsive---radius--normal: .75rem;
        --_responsive---radius--large: 1.5rem;
        --_responsive---radius--img: .5rem;
        --_responsive---radius--img-large: 1rem;
        --_responsive---gap--gap-small: .5rem;
        --_responsive---gap--gap-regular: 1rem;
        --_responsive---gap--gap-large: 3rem;
      }
    }

    /* New tokens, named the way Webflow names variables so they can be recreated there one to one */
    :root {
      --_layout---size--bar-height: 4rem;
      --_layout---size--menu-width: 15rem;
      --_layout---size--dialog-width: 30rem;
      --_layout---size--control: 2rem;
      --_layout---size--icon: 1.25rem;
      --_layout---size--card-padding: 1.5rem;
      --_layout---size--gutter: 3rem;
      --_responsive---radius--tag: .125rem;
      --color--dark-raised: color-mix(in srgb, var(--color--white) 5%, var(--color--dark));
      /* Red as text on dark, lifted with light until it reads; as a fill it stays pure red */
      --_primitives---brand--red-on-dark: color-mix(in srgb, var(--_primitives---brand--red) 70%, var(--_primitives---brand--light));
      /* Brand colours as text on light, mixed with dark until they read; yellow is never plain text on light */
      --_primitives---brand--yellow-on-light: color-mix(in srgb, var(--_primitives---brand--yellow) 45%, var(--_primitives---brand--dark));
      --_primitives---brand--green-on-light: color-mix(in srgb, var(--_primitives---brand--green) 60%, var(--_primitives---brand--dark));
      --_primitives---brand--red-on-light: color-mix(in srgb, var(--_primitives---brand--red) 80%, var(--_primitives---brand--dark));
    }
    @media screen and (max-width: 991px) { :root { --_layout---size--gutter: 2rem; } }
    @media screen and (max-width: 767px) { :root { --_layout---size--gutter: 1rem; } }

    /* Website: base */
    * { box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
    [hidden] { display: none !important; }
    body {
      margin: 0;
      min-height: 100%;
      background-color: var(--_theme---background--bg-primary);
      font-family: var(--_typography---font--font-body);
      color: var(--_theme---text-color--text-primary);
      font-size: var(--_responsive---font-size--text-regular);
      line-height: var(--_typography---line-height--body);
      font-weight: var(--_typography---font-weight--body);
    }
    a { color: inherit; text-decoration: none; }
    p { margin: 0; }
    /* New: paragraphs stop at a reading width */
    :where(main) p { max-width: var(--container--small); }

    /* Website: titles. The classes .h1 to .h6 give any element a title style without making it a heading */
    h1, h2, h3, h4, h5, h6 {
      font-family: var(--_typography---font--font-title);
      color: var(--_theme---text-color--text-title);
      font-weight: var(--_typography---font-weight--title);
      margin-top: 0;
      margin-bottom: 0;
    }
    h1 { font-size: var(--_responsive---font-size--h1); line-height: var(--_typography---line-height--title); letter-spacing: var(--_typography---letter-spacing--title); }
    h2 { font-size: var(--_responsive---font-size--h2); line-height: var(--_typography---line-height--title); }
    h3 { font-size: var(--_responsive---font-size--h3); line-height: var(--_typography---line-height--title); letter-spacing: var(--_typography---letter-spacing--title); }
    h4 { font-size: var(--_responsive---font-size--h4); line-height: var(--_typography---line-height--1-2); }
    h5 { font-size: var(--_responsive---font-size--h5); line-height: var(--_typography---line-height--1-2); letter-spacing: var(--_typography---letter-spacing--title); }
    h6 { font-size: var(--_responsive---font-size--h6); line-height: var(--_typography---line-height--1-4); letter-spacing: var(--_typography---letter-spacing--title); }
    .h1, .h2, .h3, .h4, .h5, .h6 {
      font-family: var(--_typography---font--font-title);
      color: var(--_theme---text-color--text-title);
      font-weight: var(--_typography---font-weight--title);
    }
    .h1 { font-size: var(--_responsive---font-size--h1); line-height: var(--_typography---line-height--title); letter-spacing: var(--_typography---letter-spacing--title); }
    .h2 { font-size: var(--_responsive---font-size--h2); line-height: var(--_typography---line-height--title); letter-spacing: var(--_typography---letter-spacing--title); }
    .h3 { font-size: var(--_responsive---font-size--h3); line-height: var(--_typography---line-height--title); letter-spacing: var(--_typography---letter-spacing--title); }
    .h4 { font-size: var(--_responsive---font-size--h4); line-height: var(--_typography---line-height--1-3); letter-spacing: var(--_typography---letter-spacing--title); }
    .h5 { font-size: var(--_responsive---font-size--h5); line-height: var(--_typography---line-height--1-4); letter-spacing: var(--_typography---letter-spacing--0-03em); }
    .h6 { font-size: var(--_responsive---font-size--h6); line-height: var(--_typography---line-height--1-4); letter-spacing: var(--_typography---letter-spacing--0-03em); }
    .h2.tc-yellow { color: var(--_theme---text-color--text-highlight); }

    /* Website: text sizes and colours */
    .text-size-tiny { font-size: var(--_responsive---font-size--text-tiny); }
    .text-size-small { font-size: var(--_responsive---font-size--text-small); }
    .text-size-regular { font-size: var(--_responsive---font-size--text-regular); }
    .text-size-medium { font-size: var(--_responsive---font-size--text-medium); }
    .text-size-large { font-size: var(--_responsive---font-size--text-large); }
    .tc-primary { color: var(--_theme---text-color--text-primary); }
    .tc-secondary { color: var(--_theme---text-color--text-secondary); }

    /* Website: the tagline, IBM Plex Mono in capitals, above a title or inside a tag */
    .text-style-tagline {
      color: var(--_theme---text-color--text-title);
      text-transform: uppercase;
      justify-content: center;
      align-items: center;
      font-family: Ibmplexmono, Impact, sans-serif;
      font-size: .75rem;
      font-weight: 400;
      text-decoration: none;
      display: inline-block;
    }
    .text-style-tagline.tc-highlight { color: var(--_theme---text-color--text-highlight); font-size: 1rem; }

    /* New: surfaces. Each sets the website's own theme variables, so every Website rule follows it, plus its
       card border and chart colours. The website itself only uses surface-dark */
    .surface-dark, .surface-secondary, .surface-light {
      background-color: var(--_theme---background--bg-primary);
      color: var(--_theme---text-color--text-primary);
    }
    .surface-dark, .surface-secondary {
      --_theme---background--bg-primary: var(--color--dark);
      --_theme---background--bg-secondary: var(--_primitives---opacity--white-5);
      --_theme---text-color--text-title: var(--color--light);
      --_theme---text-color--text-primary: var(--color--light-80);
      --_theme---text-color--text-secondary: var(--color--light-60);
      --_theme---text-color--text-highlight: var(--brand--brand-1);
      --_theme---text-color--text-good: var(--brand--brand-2);
      --_theme---text-color--text-bad: var(--_primitives---brand--red-on-dark);
      --_theme---link-color--link-primary: var(--color--light);
      --_theme---border-color--border-card: var(--_primitives---opacity--white-10);
      --_theme---border-color--border-line: var(--_primitives---color--neutral-darker);
      --_theme---input--border: var(--color--light-40);
      --_theme---input--border-focused: var(--color--light-80);
      --_theme---input--text-placeholder: var(--color--light-60);
      --_theme---button-secondary--background: var(--color--light);
      --_theme---button-secondary--text: var(--color--dark);
      --_theme---button-secondary--border: var(--_primitives---opacity--neutral-darkest-20);
      --_theme---chart--chart-1: var(--brand--brand-1);
      --_theme---chart--chart-2: var(--color--light);
      --_theme---chart--chart-3: var(--brand--brand-2);
    }
    .surface-secondary { --_theme---background--bg-primary: var(--color--dark-raised); }
    .surface-light {
      --_theme---background--bg-primary: var(--color--light);
      --_theme---background--bg-secondary: var(--_primitives---opacity--neutral-darkest-5);
      --_theme---text-color--text-title: var(--color--dark);
      --_theme---text-color--text-primary: var(--color--dark-80);
      --_theme---text-color--text-secondary: var(--color--dark-60);
      --_theme---text-color--text-highlight: var(--_primitives---brand--yellow-on-light);
      --_theme---text-color--text-good: var(--_primitives---brand--green-on-light);
      --_theme---text-color--text-bad: var(--_primitives---brand--red-on-light);
      --_theme---link-color--link-primary: var(--color--dark);
      --_theme---border-color--border-card: var(--_primitives---opacity--neutral-darkest-10);
      --_theme---border-color--border-line: var(--color--dark-20);
      --_theme---input--border: var(--color--dark-60);
      --_theme---input--border-focused: var(--color--dark);
      --_theme---input--text-placeholder: var(--color--dark-60);
      --_theme---button-secondary--background: var(--color--dark-secondary);
      --_theme---button-secondary--text: var(--color--light);
      --_theme---button-secondary--border: var(--_primitives---opacity--white-20);
      --_theme---chart--chart-1: var(--_primitives---brand--yellow-on-light);
      --_theme---chart--chart-2: var(--color--dark);
      --_theme---chart--chart-3: var(--_primitives---brand--green-on-light);
    }

    /* Website: cards and the grid they sit in. New: is-text gives a text card its padding */
    .card {
      border: 1px solid var(--_primitives---opacity--white-10);
      background-color: var(--_primitives---opacity--white-5);
      border-radius: .5rem;
      padding: .75rem;
    }
    .card.is-text { padding: var(--_layout---size--card-padding); }
    .surface-light .card { border-color: var(--_theme---border-color--border-card); background-color: var(--_theme---background--bg-secondary); }
    .u-grid {
      grid-column-gap: 1rem;
      grid-row-gap: 1rem;
      grid-template-rows: auto;
      grid-template-columns: 1fr 1fr 1fr;
      grid-auto-columns: 1fr;
      width: 100%;
      display: grid;
    }
    @media screen and (max-width: 991px) { .u-grid { grid-template-columns: 1fr 1fr; } }
    @media screen and (max-width: 479px) { .u-grid { grid-template-columns: 1fr; } }
    /* New: equal gaps between the blocks inside a card, a pop-up or a column */
    .u-stack > * + * { margin-top: var(--_responsive---margin--xxsmall); }

    /* Website: tags, a tagline in a thin frame. New: is-green and is-red carry the colours of the site's green and red
       tagline variants under a name that travels, is-small fits a table row, and icons take the tag's colour */
    .tag {
      grid-column-gap: .5rem;
      grid-row-gap: .5rem;
      border: 1px solid var(--_primitives---brand--yellow-30);
      background-color: var(--_primitives---color--neutral-darkest);
      letter-spacing: var(--_typography---letter-spacing--subtitle);
      border-radius: .125rem;
      justify-content: center;
      align-items: center;
      padding: .5rem 1rem;
      font-size: .875rem;
      font-weight: 600;
      text-decoration: none;
      display: inline-flex;
    }
    .tag.is-green { border-color: var(--_primitives---brand--green-30); }
    .tag.is-red { border-color: var(--_primitives---brand--red-30); }
    .tag.is-small { padding: .25rem .5rem; }
    .tag .ph, .tag .ph-fill { font-size: 1rem; color: var(--_theme---text-color--text-highlight); }
    .tag.is-green .ph, .tag.is-green .ph-fill { color: var(--_theme---text-color--text-good); }
    .tag.is-red .ph, .tag.is-red .ph-fill { color: var(--_theme---text-color--text-bad); }
    .surface-light .tag { background-color: var(--color--white); border-color: var(--_theme---text-color--text-highlight); }
    .surface-light .tag.is-green { border-color: var(--_theme---text-color--text-good); }
    .surface-light .tag.is-red { border-color: var(--_theme---text-color--text-bad); }

    /* Website: headline numbers, a row of items split by thin lines, the lead figure in yellow.
       New: number_list is the row */
    .number_list { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
    .number_item {
      grid-column-gap: 3rem;
      grid-row-gap: 3rem;
      border-right: 1px solid var(--color--dark-secondary);
      flex-flow: column;
      justify-content: space-between;
      align-items: flex-start;
      padding: 1.5rem;
      display: flex;
    }
    .number_item.is-last { border-right-style: none; }
    .number_item .h2 { font-variant-numeric: lining-nums tabular-nums; }
    .surface-light .number_item { border-color: var(--_theme---border-color--border-line); }
    @media screen and (max-width: 479px) {
      .number_item { border-bottom: 1px solid var(--color--light-20); border-right-style: none; padding: 1rem; }
      .number_item.is-last { border-bottom-style: none; }
    }

    /* New: tables. A thin frame, a line between rows, a header row in the tagline style, and figures aligned right */
    .table_wrap {
      overflow-x: auto;
      border: 1px solid var(--_theme---border-color--border-card);
      border-radius: var(--_responsive---radius--small);
    }
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: var(--_responsive---font-size--text-small);
      line-height: var(--_typography---line-height--1-5);
    }
    th, td {
      padding: .75rem 1rem;
      text-align: left;
      color: var(--_theme---text-color--text-primary);
      border-bottom: 1px solid var(--_theme---border-color--border-card);
    }
    tbody tr:last-child td { border-bottom: 0; }
    tbody tr:hover { background: var(--_theme---background--bg-secondary); }
    th {
      font-family: Ibmplexmono, Impact, sans-serif;
      font-size: var(--_responsive---font-size--text-tiny);
      font-weight: 400;
      letter-spacing: var(--_typography---letter-spacing--subtitle);
      text-transform: uppercase;
      color: var(--_theme---text-color--text-title);
      background: var(--_theme---background--bg-secondary);
    }
    .num { text-align: right; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }

    /* New: charts. 2px lines, a dot with a surface ring at each end, a light grid, ticks in the tagline font */
    .chart { position: relative; }
    .chart-svg { display: block; overflow: visible; outline-offset: 4px; }
    .chart-grid { stroke: var(--_theme---border-color--border-card); stroke-width: 1; }
    .chart-tick { fill: var(--_theme---text-color--text-secondary); font-family: Ibmplexmono, Impact, sans-serif; font-size: var(--_responsive---font-size--text-tiny); }
    .chart-label { fill: var(--_theme---text-color--text-primary); font-size: var(--_responsive---font-size--text-small); }
    .chart-line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .chart-dot { stroke: var(--_theme---background--bg-primary); stroke-width: 2; }
    .chart-cross { stroke: var(--_theme---text-color--text-secondary); stroke-width: 1; }
    .chart-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: .75rem; }
    .chart-legend span, .chart-tip-row {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      font-size: var(--_responsive---font-size--text-small);
      color: var(--_theme---text-color--text-primary);
    }
    .chart-tip-row { display: flex; }
    .chart-key { display: inline-block; width: 12px; height: 2px; }
    .chart-tip {
      position: absolute;
      z-index: 1;
      pointer-events: none;
      padding: .5rem .75rem;
      background: linear-gradient(var(--_theme---background--bg-secondary), var(--_theme---background--bg-secondary)), var(--_theme---background--bg-primary);
      border: 1px solid var(--_theme---border-color--border-card);
      border-radius: .25rem;
      white-space: nowrap;
    }
    .chart-tip p { margin: 0; font-size: var(--_responsive---font-size--text-small); }
    .chart-tip strong { color: var(--_theme---text-color--text-title); font-weight: 400; }
    details > summary { cursor: pointer; }

    /* Website: buttons. A square block with Plex Mono capitals and an arrow in a small box; under the pointer a dark
       panel sweeps in, the text rolls over and the arrow slides through. Markup as on the site, with spans so it
       also fits inside a button element */
    .button-group { grid-column-gap: 1rem; grid-row-gap: 1rem; flex-wrap: wrap; align-items: center; display: flex; }
    .btn-icon-link {
      grid-column-gap: .5em;
      grid-row-gap: .5em;
      color: var(--_theme---link-color--link-primary);
      background-color: #0000;
      justify-content: flex-start;
      align-items: center;
      padding: 0;
      font-size: 1em;
      line-height: 1.2;
      text-decoration: none;
      display: flex;
    }
    .btn-icon-content {
      grid-column-gap: .5em;
      grid-row-gap: .5em;
      background-color: var(--_theme---button-primary--background);
      color: var(--_theme---button-primary--text);
      justify-content: flex-start;
      align-items: center;
      padding: .6125em .75em;
      display: flex;
      position: relative;
      overflow: hidden;
    }
    .btn-icon-content__mask { z-index: 1; flex: none; justify-content: flex-start; align-items: center; display: flex; position: relative; overflow: hidden; }
    .btn-icon-content__text {
      text-transform: uppercase;
      font-family: Ibmplexmono, Impact, sans-serif;
      font-size: .875rem;
      --text-duplicate-distance: 1.5em;
      text-shadow: 0px var(--text-duplicate-distance) white;
    }
    .btn-icon-content__bg {
      z-index: 0;
      background-color: var(--_theme---button-primary--background-hover);
      width: 120%;
      height: 100%;
      position: absolute;
      bottom: 0%;
      left: -10%;
      transform: translate(0, 175%) rotate(15deg);
    }
    .btn-icon-icon { z-index: 1; flex: none; justify-content: center; align-items: center; width: 1.25rem; height: 1.25rem; display: flex; position: relative; }
    .btn-icon-icon__bg { background-color: var(--_theme---button-primary--border); border-radius: .125em; width: 100%; height: 100%; position: absolute; }
    .btn-icon-icon__bg.bg-yellow { background-color: var(--_primitives---brand--yellow); }
    .btn-icon-icon__wrap { width: 100%; height: 100%; color: var(--_theme---button-primary--text); justify-content: flex-end; align-items: center; display: flex; position: relative; overflow: hidden; }
    .btn-icon-icon__list { flex: none; justify-content: flex-start; align-items: center; height: 100%; display: flex; }
    .btn-icon-icon__arrow { flex: none; width: 1.25rem; height: 100%; padding: .25rem; }
    .btn-icon-icon__arrow.tc-black { color: var(--color--black); }
    [data-button-anim-target] { transition: transform 0.525s cubic-bezier(0.625, 0.05, 0, 1); }
    @media (hover: hover) and (pointer: fine) {
      .btn-icon-link:hover .btn-icon-content__text { transform: translate(0px, calc(-1 * var(--text-duplicate-distance))); }
      .btn-icon-link:hover .btn-icon-icon__bg { transform: rotate(90deg); }
      .btn-icon-link:hover .btn-icon-icon__arrow { transform: translate(200%, 0px); }
      .btn-icon-link:hover .btn-icon-content__bg { transform: translate(0px, 0%) rotate(0deg); }
    }
    /* New: the same button as a button element, and its variants */
    button.btn-icon-link { border: 0; font: inherit; line-height: 1.2; cursor: pointer; }
    .btn-icon-content.is-secondary { background-color: var(--_theme---button-secondary--background); color: var(--_theme---button-secondary--text); }
    .btn-icon-content.is-secondary .btn-icon-icon__bg { background-color: var(--_theme---button-secondary--border); }
    .btn-icon-content.is-secondary .btn-icon-icon__wrap { color: var(--_theme---button-secondary--text); }
    .btn-icon-content.is-danger { background-color: var(--brand--brand-3); color: var(--color--white); }
    .btn-icon-content.is-danger .btn-icon-icon__wrap { color: var(--color--white); }
    .btn-icon-content.is-link { background-color: #0000; color: var(--_theme---link-color--link-primary); padding-inline: 0; }
    .btn-icon-content.is-link .btn-icon-content__bg { display: none; }
    .btn-icon-content.is-link .btn-icon-content__text { text-shadow: 0px var(--text-duplicate-distance) currentColor; }
    .btn-icon-link.is-small .btn-icon-content { padding: .375em .625em; }
    .btn-icon-link.is-small .btn-icon-content__text { font-size: .75rem; }
    .btn-icon-link.is-small .btn-icon-icon { width: 1rem; height: 1rem; }
    .btn-icon-link:disabled { cursor: not-allowed; }
    .btn-icon-link:disabled .btn-icon-content {
      background-color: var(--_theme---background--bg-secondary);
      color: var(--_theme---text-color--text-secondary);
      box-shadow: inset 0 0 0 1px var(--_theme---border-color--border-card);
    }
    .btn-icon-link:disabled .btn-icon-content__text { text-shadow: none; }
    .btn-icon-link:disabled .btn-icon-content__bg { display: none; }
    .btn-icon-link:disabled [data-button-anim-target] { transform: none !important; }

    /* New: a square button holding only an icon */
    .icon-button {
      display: inline-grid;
      place-items: center;
      flex: none;
      width: var(--_layout---size--control);
      height: var(--_layout---size--control);
      padding: 0;
      color: var(--_theme---text-color--text-title);
      background: transparent;
      border: 1px solid var(--_theme---input--border);
      border-radius: var(--_responsive---radius--tag);
      cursor: pointer;
      transition: background-color .2s;
    }
    .icon-button:hover { background: var(--_theme---background--bg-secondary); }
    .icon-button .ph { font-size: 1.125rem; }

    /* New: links in text keep the title colour and are underlined in the surface's highlight */
    :where(p, li, td) a {
      color: var(--_theme---text-color--text-title);
      text-decoration: underline;
      text-decoration-color: var(--_theme---text-color--text-highlight);
      text-decoration-thickness: 1px;
      text-underline-offset: 3px;
    }
    :where(p, li, td) a:hover { text-decoration-thickness: 2px; }

    /* Website: form fields, a thin outline with small corners. The outline and focus colours come from the surface.
       New: form_grid, form_field, form_label and form_check around them */
    .form_grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1rem; }
    .form_field { display: grid; gap: .25rem; align-content: start; }
    .form_field.is-wide { grid-column: 1 / -1; }
    .form_label {
      font-family: Ibmplexmono, Impact, sans-serif;
      font-size: var(--_responsive---font-size--text-tiny);
      text-transform: uppercase;
      letter-spacing: var(--_typography---letter-spacing--subtitle);
      color: var(--_theme---text-color--text-title);
    }
    .form_input {
      width: 100%;
      font: inherit;
      border: 1px solid var(--_theme---input--border);
      border-radius: var(--_responsive---radius--input);
      background-color: var(--_theme---input--background);
      height: auto;
      min-height: 2.75rem;
      color: var(--_theme---text-color--text-primary);
      margin-bottom: 0;
      padding: .5rem .75rem;
      font-size: 1rem;
      line-height: 1.6;
      transition: border-color .1s;
    }
    .form_input:focus { border-color: var(--_theme---input--border-focused); outline: 0; }
    .form_input:focus-visible { outline: 2px solid var(--_theme---text-color--text-highlight); outline-offset: 2px; }
    .form_input::placeholder { color: var(--_theme---input--text-placeholder); opacity: 1; }
    .form_input.text-area { min-height: 5rem; resize: vertical; }
    /* A chevron drawn in the text colour */
    select.form_input {
      appearance: none;
      padding-right: 2.5rem;
      background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
      background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
      background-size: 5px 5px;
      background-repeat: no-repeat;
    }
    /* Where the browser allows it (Chrome and Edge), the list opens below the field as a panel in the page's own style */
    @supports (appearance: base-select) {
      select.form_input, ::picker(select) { appearance: base-select; }
      select.form_input { justify-content: space-between; align-items: center; padding-right: .75rem; background-image: none; }
      select.form_input::picker-icon {
        content: '\e136' / '';
        font-family: 'Phosphor';
        font-size: 1rem;
        line-height: 1;
        color: var(--_theme---text-color--text-secondary);
        transition: rotate .2s;
      }
      select.form_input:open::picker-icon { rotate: 180deg; }
      ::picker(select) {
        margin-block: .25rem;
        padding: .25rem;
        border: 1px solid var(--_theme---input--border);
        border-radius: var(--_responsive---radius--input);
        background: linear-gradient(var(--_theme---background--bg-secondary), var(--_theme---background--bg-secondary)), var(--_theme---background--bg-primary);
        color: var(--_theme---text-color--text-primary);
      }
      select.form_input option { padding: .5rem .75rem; border-radius: var(--_responsive---radius--tag); color: var(--_theme---text-color--text-primary); }
      select.form_input option:hover, select.form_input option:focus-visible { background: var(--_theme---background--bg-secondary); color: var(--_theme---text-color--text-title); outline: none; }
      select.form_input option:checked { color: var(--_theme---text-color--text-title); }
      select.form_input option::checkmark { content: '\e182' / ''; font-family: 'Phosphor'; font-size: 1rem; color: var(--_theme---text-color--text-highlight); }
    }
    input[type="checkbox"], input[type="radio"] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--brand--brand-1); }
    .surface-light :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--color--dark); }
    .form_check { display: inline-flex; align-items: center; gap: .5rem; color: var(--_theme---text-color--text-primary); cursor: pointer; }
    .form_checks { display: flex; flex-wrap: wrap; gap: 1.5rem; }

    /* New: keyboard focus, a yellow ring on every control. The website's own ring is a leftover blue from its template */
    :focus-visible { outline: 2px solid var(--_theme---text-color--text-highlight); outline-offset: 2px; }

    /* New: pop-ups, the browser's own dialog opened with showModal(). It keeps focus inside, closes with Escape and,
       with closedby="any", on a click outside, and darkens the page behind it */
    .dialog {
      width: min(var(--_layout---size--dialog-width), calc(100% - 2rem));
      max-height: calc(100vh - 6rem);
      overflow-y: auto;
      padding: var(--_layout---size--card-padding);
      border: 1px solid var(--_theme---border-color--border-card);
      border-radius: var(--_responsive---radius--small);
      background: var(--_theme---background--bg-primary);
      color: var(--_theme---text-color--text-primary);
    }
    dialog.dialog::backdrop { background: var(--_primitives---opacity--neutral-darkest-60); }
    dialog.dialog[open] { animation: dialog-in .15s ease-out; }
    @keyframes dialog-in { from { opacity: 0; transform: translateY(8px); } }
    .dialog_head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
    .dialog_head .text-style-tagline { display: block; margin-bottom: .5rem; }
    .dialog .form_grid { margin-top: 1rem; }
    .dialog_actions { justify-content: flex-end; margin-top: 1.5rem; }

    /* A link to a section stops below the top bar */
    html { scroll-padding-top: var(--_layout---size--bar-height); }

    /* Scrollbars follow the surface they scroll on */
    html { scrollbar-color: var(--color--grey) var(--color--dark); }
    .surface-dark, .surface-secondary, .surface-light, .table_wrap { scrollbar-color: var(--_theme---text-color--text-secondary) transparent; }

    /* New: top bar, in both layouts. Logo on the left, user area on the right, always in view, like the site's nav */
    .app-bar {
      position: sticky;
      top: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: .75rem;
      height: var(--_layout---size--bar-height);
      padding: 0 1.5rem;
      border-bottom: 1px solid var(--_primitives---color--neutral-darker);
    }
    .app-brand { display: flex; align-items: center; gap: 1rem; }
    .app-logo { display: block; width: auto; height: 1.5rem; }
    .app-brand .text-style-tagline { padding-left: 1rem; border-left: 1px solid var(--_primitives---color--neutral-darker); }
    .app-user { position: relative; margin-left: auto; }
    .avatar {
      display: grid;
      place-items: center;
      width: var(--_layout---size--control);
      height: var(--_layout---size--control);
      padding: 0;
      border: 0;
      border-radius: var(--_responsive---radius--tag);
      background: var(--color--light);
      color: var(--color--dark);
      font-family: Ibmplexmono, Impact, sans-serif;
      font-size: var(--_responsive---font-size--text-tiny);
      cursor: pointer;
    }
    .user-menu {
      position: absolute;
      /* Opens just below the bar, not just below the avatar */
      top: calc(100% + (var(--_layout---size--bar-height) - var(--_layout---size--control)) / 2 + .5rem);
      right: 0;
      min-width: var(--_layout---size--menu-width);
      padding: .5rem;
      border: 1px solid var(--_theme---border-color--border-card);
      border-radius: var(--_responsive---radius--small);
    }
    .user-menu-head { padding: .5rem .75rem; }

    /* Menu links, in the menu column and the user menu. The section in view is marked in yellow with a bar on its left */
    .app-links { display: grid; gap: 2px; }
    .app-links a, .user-menu a {
      display: block;
      padding: .5rem .75rem;
      border-radius: .25rem;
      color: var(--_theme---text-color--text-primary);
      transition: background-color .2s, color .2s;
    }
    .app-links a:hover, .user-menu a:hover { background: var(--_theme---background--bg-secondary); color: var(--_theme---text-color--text-title); }
    .app-links a[aria-current] {
      background: var(--_theme---background--bg-secondary);
      color: var(--_theme---text-color--text-highlight);
      box-shadow: inset 2px 0 0 var(--_theme---text-color--text-highlight);
    }

    /* Website layout: the site's frame. Content within the large container, centred, with thin lines on both sides and
       under every section, and small triangles where the lines meet. On the site this is padding-global and
       container-large with corner_triangle images */
    .layout-page main { padding-inline: 5%; }
    .layout-page main > :is(section, footer) {
      --corner: var(--_primitives---color--neutral-darker);
      max-width: var(--container--large);
      margin-inline: auto;
      padding: var(--_responsive---section-space--small) var(--_layout---size--gutter);
      border: 1px solid var(--corner);
      border-top: 0;
      background-image:
        linear-gradient(to top right, var(--corner) 50%, transparent 50%),
        linear-gradient(to top left, var(--corner) 50%, transparent 50%),
        linear-gradient(to bottom right, var(--corner) 50%, transparent 50%),
        linear-gradient(to bottom left, var(--corner) 50%, transparent 50%);
      background-size: 1rem 1rem;
      background-position: left bottom, right bottom, left top, right top;
      background-repeat: no-repeat;
    }
    @media screen and (max-width: 479px) { .layout-page main { padding-inline: 3%; } }

    /* App layout: a menu column on the left below the top bar, the content area uses the rest of the window */
    .layout-app { display: grid; grid-template-columns: var(--_layout---size--menu-width) minmax(0, 1fr); }
    .layout-app .app-bar { grid-column: 1 / -1; }
    .layout-app main > :is(section, footer) { padding: var(--_responsive---margin--medium); }
    .app-menu {
      position: sticky;
      top: var(--_layout---size--bar-height);
      height: calc(100vh - var(--_layout---size--bar-height));
      overflow-y: auto;
      padding: 1.5rem 1rem;
      border-right: 1px solid var(--_primitives---color--neutral-darker);
    }
    .app-menu-button { display: none; }

    /* App layout on a phone: the menu column folds away; the button at the left of the top bar opens it */
    @media (max-width: 767px) {
      .layout-app { grid-template-columns: minmax(0, 1fr); }
      .layout-app .app-menu-button { display: inline-grid; }
      .app-bar { padding: 0 1rem; }
      .app-menu {
        display: none;
        position: fixed;
        inset: var(--_layout---size--bar-height) 0 auto 0;
        height: auto;
        max-height: calc(100vh - var(--_layout---size--bar-height));
        z-index: 2;
        border-right: 0;
        border-bottom: 1px solid var(--_primitives---color--neutral-darker);
      }
      .menu-open .app-menu { display: block; }
    }

    /* Icons: Phosphor, loaded in the head. An icon is a span with ph and ph-name (or ph-fill for the filled form);
       it takes the text colour */
    .ph, .ph-fill { font-size: var(--_layout---size--icon); line-height: 1; }

    /* Website: tabs, Plex Mono capitals over a thin line that turns yellow under the open tab. New: as buttons with
       the tab roles, and the closed tabs at 60% instead of the site's 38% so their names stay readable */
    .tab_button_list { display: flex; overflow: auto clip; }
    .tab_button_item {
      grid-column-gap: .5rem;
      grid-row-gap: .5rem;
      border-bottom-style: solid;
      border-bottom-width: .094rem;
      border-bottom-color: var(--_theme---border-color--border-line);
      opacity: .6;
      cursor: pointer;
      outline-offset: calc(.125rem * -1);
      outline-width: .125rem;
      justify-content: center;
      align-items: center;
      width: 100%;
      min-width: 10rem;
      padding-top: clamp(1.25rem, 1.17857rem + .357143vw, 1.5rem);
      padding-bottom: clamp(1.25rem, 1.17857rem + .357143vw, 1.5rem);
      padding-right: clamp(1.25rem, 1.17857rem + .357143vw, 1.5rem);
      display: flex;
      position: relative;
    }
    .tab_button_item.is-active { border-bottom-color: var(--brand--brand-1); opacity: 1; }
    .tab_button_text.u-text-style-main {
      color: var(--_theme---text-color--text-title);
      text-transform: uppercase;
      font-family: Ibmplexmono, Impact, sans-serif;
    }
    button.tab_button_item { background: none; border-top: 0; border-left: 0; border-right: 0; font: inherit; color: inherit; }
    .tab_button_item:hover { opacity: 1; }
    .surface-light .tab_button_item.is-active { border-bottom-color: var(--_theme---text-color--text-title); }
    @media screen and (max-width: 767px) {
      .tab_button_text.u-text-style-main { font-size: var(--_responsive---font-size--text-tiny); }
      .tab_button_item { min-width: 8rem; padding: .75rem 1rem .75rem 0; }
    }
    .tab_panel[hidden] { display: none; }

    /* New: filter buttons, a row of tag-shaped toggles; the one pressed turns yellow. A count can sit inside */
    .filter_list { display: flex; flex-wrap: wrap; gap: .5rem; }
    .filter_button {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      padding: .375rem .75rem;
      border: 1px solid var(--_theme---input--border);
      border-radius: var(--_responsive---radius--tag);
      background: transparent;
      color: var(--_theme---text-color--text-title);
      font-family: Ibmplexmono, Impact, sans-serif;
      font-size: var(--_responsive---font-size--text-tiny);
      letter-spacing: var(--_typography---letter-spacing--subtitle);
      text-transform: uppercase;
      line-height: 1.5;
      cursor: pointer;
      transition: background-color .2s, border-color .2s;
    }
    .filter_button:hover { background: var(--_theme---background--bg-secondary); }
    .filter_button[aria-pressed="true"] { background: var(--brand--brand-1); border-color: var(--brand--brand-1); color: var(--color--dark); }
    .filter_count { color: var(--_theme---text-color--text-secondary); }
    .filter_button[aria-pressed="true"] .filter_count { color: var(--color--dark-60); }

    /* New: a story card, a card on a faint yellow tone for the accounts that have a full story behind them */
    .card.is-story { background-color: var(--_primitives---brand--yellow-10); border-color: var(--_primitives---brand--yellow-30); }
    .surface-light .card.is-story { background-color: color-mix(in srgb, var(--_primitives---brand--yellow) 14%, var(--color--light)); border-color: var(--_theme---text-color--text-highlight); }

    /* New: facts on a card, short labels in the tagline style beside their values */
    .card_facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .75rem; margin: 0; font-size: var(--_responsive---font-size--text-small); }
    .card_facts dt {
      font-family: Ibmplexmono, Impact, sans-serif;
      font-size: var(--_responsive---font-size--text-tiny);
      text-transform: uppercase;
      letter-spacing: var(--_typography---letter-spacing--subtitle);
      color: var(--_theme---text-color--text-secondary);
      padding-top: .15rem;
    }
    .card_facts dd { margin: 0; color: var(--_theme---text-color--text-primary); }

    /* New: customer logos, drawn as one-colour silhouettes in the title colour so every logo sits evenly on any
       surface, as on the website. is-plate keeps a logo's own colours on a light plate, for logos a silhouette breaks */
    .customer_logo { display: inline-block; height: 1.75rem; width: auto; max-width: 9rem; object-fit: contain; vertical-align: middle; filter: brightness(0) invert(1); opacity: .85; }
    .surface-light .customer_logo { filter: brightness(0); opacity: .8; }
    .customer_logo.is-plate { filter: none; opacity: 1; background: var(--color--light); padding: .25rem .5rem; border-radius: var(--_responsive---radius--tag); box-sizing: content-box; height: 1.25rem; }
    .customer_logo.is-large { height: 2.5rem; max-width: 11rem; }
    .customer_logo.is-large.is-plate { height: 2rem; }
    .logo_row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
    .logo_wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 1rem; align-items: center; justify-items: center; }
    .logo_wall .customer_logo { height: 2rem; }

    /* New: the wide pop-up, for reading a whole story */
    .dialog.is-wide { width: min(48rem, calc(100% - 2rem)); padding: var(--_responsive---margin--medium); }

    /* Website: a quote set off by a line on its left */
    .text-style-quote {
      border-left: .1875rem solid var(--_theme---text-color--text-primary);
      margin-bottom: 0;
      padding: .75rem 1.25rem;
      font-size: 1.25rem;
      line-height: 1.5;
    }
    @media screen and (max-width: 767px) { .text-style-quote { font-size: 1.125rem; } }

    /* App build: a smaller type scale, after Rombit's dashboard. Was h1 4rem, h2 3rem, h3 2.5rem,
       h4 2rem, h5 1.5rem, h6 1.25rem, body 1rem, small .875rem, tiny .75rem (desktop) */
    body {
      --_responsive---font-size--h1: 2.25rem;
      --_responsive---font-size--h2: 1.75rem;
      --_responsive---font-size--h3: 1.5rem;
      --_responsive---font-size--h4: 1.25rem;
      --_responsive---font-size--h5: 1.125rem;
      --_responsive---font-size--h6: 1rem;
      --_responsive---font-size--text-xxlarge: 1.5rem;
      --_responsive---font-size--text-xlarge: 1.25rem;
      --_responsive---font-size--text-large: 1.125rem;
      --_responsive---font-size--text-medium: 1rem;
      --_responsive---font-size--text-regular: .875rem;
      --_responsive---font-size--text-small: .8125rem;
      --_responsive---font-size--text-tiny: .6875rem;
    }
    .app-user { display: flex; align-items: center; gap: .5rem; }