@charset "UTF-8";

/*
 * Kweepa Technologies: the one stylesheet of the site.
 *
 * Its type is typography.md's (kweepawebsite designs/typography.md, 2026-10-26: "authoritative", to be followed
 * strictly): its fonts, tokens and base stylesheet first, as section 8 gives them, then the site's colour roles
 * (light, then dark), the rest of the base, and one block per component in the order a page meets them (top bar,
 * hero, sections, cards, forms, footer, admin), the utilities last. A text's size, weight, line height, letter
 * spacing and case come from its role (typography.md, 3) and only from the tokens: each stylesheet names the
 * classes that take each role in one block, "Type roles", and its component rules set none of them. Nothing here
 * is inline in a page: the Content Security Policy allows no inline styles.
 */

/* ------------------------------------------------------------------ */
/* Typography: typography.md, section 8, as it gives it                */
/* ------------------------------------------------------------------ */

/* Fonts (self-hosted): Roboto subset to Latin and Latin Extended (the names visitors type), Noto Sans Mono to Latin */
@font-face { font-family: 'Roboto'; src: url('/fonts/roboto-400-b5cdd5ea6a67e8712147745a7e2efd74.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/fonts/roboto-500-d4703bf733881b52c9849d7504c17ac2.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/fonts/roboto-700-625ac5023fcc5d72cfb44d17c4243ea9.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Sans Mono'; src: url('/fonts/noto-sans-mono-400-2169693e5597c8bf3f938cf7a1b06ea8.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Sans Mono'; src: url('/fonts/noto-sans-mono-500-b00e0411064d410c8de174f4794daeb6.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Noto Sans Mono'; src: url('/fonts/noto-sans-mono-700-89d1d55747f0db31d1dd081fc3423975.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Families */
  --font-sans: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'Noto Sans Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Sizes (desktop) */
  --fs-h1: 3.5rem;
  --fs-h2: 2.5rem;
  --fs-h3: 1.75rem;
  --fs-h4: 1.25rem;
  --fs-body: 1rem;
  --fs-article: 1.125rem;
  --fs-small: 0.875rem;
  --fs-button: 1rem;
  --fs-eyebrow: 0.8125rem;
  --fs-stat: 2.5rem;
  --fs-code: 0.9375rem;

  /* Line heights */
  --lh-h1: 1.1;
  --lh-h2: 1.2;
  --lh-h3: 1.3;
  --lh-h4: 1.4;
  --lh-body: 1.5;
  --lh-article: 1.6;
  --lh-small: 1.5;
  --lh-button: 1;
  --lh-eyebrow: 1.4;
  --lh-stat: 1.1;
  --lh-code: 1.6;

  /* Letter spacing */
  --ls-h1: -0.02em;
  --ls-h2: -0.01em;
  --ls-eyebrow: 0.08em;

  /* Color */
  --text-primary: #1a1a1a;
  --text-secondary: #4a4a4a;
}

@media (max-width: 640px) {
  :root {
    --fs-h1: 2.25rem;
    --fs-h2: 1.75rem;
    --fs-h3: 1.375rem;
    --fs-h4: 1.125rem;
    --fs-article: 1.0625rem;
    --fs-eyebrow: 0.75rem;
    --fs-stat: 2rem;
    --fs-code: 0.875rem;
    --lh-body: 1.55;
  }
}

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

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  color: var(--text-primary);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-sans); margin: 2em 0 0.5em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); font-weight: var(--fw-bold);   line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold);   line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); font-weight: var(--fw-medium); line-height: var(--lh-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: var(--lh-h4); }

p { margin: 0 0 1em; max-width: 70ch; text-wrap: pretty; }

.article { font-size: var(--fs-article); line-height: var(--lh-article); max-width: 70ch; }
small, .caption { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-secondary); }

a { text-decoration: underline; }
button, nav a { font-size: var(--fs-button); font-weight: var(--fw-medium); line-height: var(--lh-button); text-decoration: none; }
label { font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: var(--lh-small); }
input, select, textarea { font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body); }

.eyebrow, .tag {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  line-height: var(--lh-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

.stat {
  font-family: var(--font-mono);
  font-size: var(--fs-stat);
  font-weight: var(--fw-bold);
  line-height: var(--lh-stat);
  font-variant-numeric: tabular-nums;
}

code, pre, kbd, samp { font-family: var(--font-mono); font-size: var(--fs-code); line-height: var(--lh-code); }

th { font-size: var(--fs-small); font-weight: var(--fw-medium); line-height: var(--lh-small); text-align: left; }
td { font-size: var(--fs-small); line-height: var(--lh-small); }
td.num, th.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }

/* ------------------------------------------------------------------ */
/* Tokens                                                              */
/* ------------------------------------------------------------------ */

:root {
    color-scheme: light;

    /* Colour roles (Material 3 roles; the primary is the blue of the home page's design) */
    --md-primary: #0154e5;
    --md-on-primary: #ffffff;
    --md-primary-hover: #0043bd;
    --md-primary-ink: #0a4ce9;
    --md-primary-container: #d3e3fd;
    --md-on-primary-container: #041e49;
    --md-secondary: #00639b;
    --md-secondary-container: #c2e7ff;
    --md-on-secondary-container: #001d35;
    --md-tertiary: #146c2e;
    --md-tertiary-container: #c4eed0;
    --md-on-tertiary-container: #072711;
    --md-error: #b3261e;
    --md-on-error: #ffffff;
    --md-error-container: #f9dedc;
    --md-on-error-container: #410e0b;

    --md-surface: #ffffff;
    --md-surface-dim: #d3dbe5;
    --md-surface-container-lowest: #ffffff;
    --md-surface-container-low: #f8fafd;
    --md-surface-container: #f0f4f9;
    --md-surface-container-high: #e9eef6;
    --md-surface-container-highest: #dde3ea;
    /* the text colours are typography.md's (2.6): its primary and secondary */
    --md-on-surface: var(--text-primary);
    --md-on-surface-variant: var(--text-secondary);
    --md-outline: #747775;
    --md-outline-variant: #c4c7c5;
    --md-inverse-surface: #303030;
    --md-inverse-on-surface: #f2f2f2;
    --md-inverse-primary: #a8c7fa;
    --md-scrim: rgb(0 0 0 / 0.32);

    /* Accents: the colour of a service's or a product's icon tile, as the home page's design draws them */
    --accent-blue: #0457ee;
    --accent-blue-container: #d2e5fd;
    --accent-blue-on: #041e49;
    --accent-green: #06702d;
    --accent-green-container: #c1f0da;
    --accent-green-on: #072711;
    --accent-amber: #b86a12;
    --accent-amber-container: #fee4b9;
    --accent-amber-on: #2a1800;
    --accent-purple: #6c3bbd;
    --accent-purple-container: #e8d9fe;
    --accent-purple-on: #21005d;
    --accent-teal: #066762;
    --accent-teal-container: #b1e9e4;
    --accent-teal-on: #003731;
    --accent-red: #b3261e;
    --accent-red-container: #f9dedc;
    --accent-red-on: #410e0b;
    --accent-slate: #45506c;
    --accent-slate-container: #dee1ee;
    --accent-slate-on: #1a1b21;

    /* The frame of every page: the top bar and the footer */
    --frame-surface: #ffffff;
    --frame-ink: var(--text-primary);
    --frame-nav: #4e5666;
    --frame-icon: #515e75;
    /* the top bar's material: the white of the page, a fifth of it clear, and the hairline at its edge */
    --frame-material: rgb(255 255 255 / 0.8);
    --frame-edge: rgb(16 24 40 / 0.1);
    /* the top bar's open menu: a card hanging under the bar, its material, edge and shadow, and the rule between its columns,
       which the search's rows use too; and a hovered row and a chevron, which only the search draws with them */
    --mega-rule: #e3e7ee;
    --mega-panel: rgb(255 255 255 / 0.9);
    --mega-edge: rgb(16 40 90 / 0.09);
    --mega-shadow: 0 2px 6px rgb(16 40 90 / 0.05), 0 36px 72px -28px rgb(16 40 90 / 0.32);
    --mega-item-hover: #f6f9ff;
    --mega-item-hover-edge: rgb(1 84 229 / 0.28);
    --mega-chevron: #7a8399;
    /* the search over the page: the page dimmed behind it, and its shadow */
    --search-scrim: rgb(9 16 34 / 0.3);
    --search-shadow: 0 2px 6px rgb(16 40 90 / 0.08), 0 40px 80px -32px rgb(16 40 90 / 0.5);
    /* the footer, after its design: a pale blue, a light from its corner on the right and two faint rings at
       its left (footer-rings.svg, at --footer-art-opacity) */
    --footer-surface: #f2f7fd;
    --footer-glow: radial-gradient(35rem 22.5rem at 100% 100%, #fbfcfe, rgb(251 252 254 / 0));
    --footer-art-opacity: 1;
    --footer-ink: var(--text-primary);
    --footer-heading: var(--text-primary);
    --footer-value: var(--text-primary);
    --footer-text: var(--text-primary);
    --footer-muted: var(--text-secondary);
    --footer-copyright: var(--text-secondary);
    /* the design's #6c799c, made dark enough to read at 4.5:1 */
    --footer-label: var(--text-secondary);
    --footer-legal: #455372;
    --footer-icon: #3b4e78;
    --footer-social: #e8f0fb;
    --footer-social-hover: #d9e6f9;
    --footer-badge: #e5eefc;
    --footer-badge-ink: #0466ea;
    --footer-rule: #e3eaf5;
    --footer-separator: #dce4f1;
    --contact-bg: #ecf4fd;
    --contact-circle: rgb(255 255 255 / 0.5);
    --contact-dot: #d6e8fc;
    --contact-card: #ffffff;
    --contact-card-tint: #f6fafe;
    --contact-card-shadow: 0 10px 30px rgb(16 60 140 / 0.06), 0 1px 2px rgb(16 60 140 / 0.04);
    --contact-ink: var(--text-primary);
    --contact-text: var(--text-primary);
    --contact-label: var(--text-primary);
    --contact-optional: var(--text-secondary);
    --contact-muted: var(--text-secondary);
    --contact-placeholder: #707582;
    --contact-field-border: #d6dde7;
    --contact-field-icon: #65718a;
    --contact-accent: #005ef5;
    --contact-link: #1362f1;
    --contact-disc: #e0eefe;
    --contact-step-line: #e1ecfc;
    --contact-files-hover: #f3f8ff;
    --contact-toolbar: #f6fafe;
    --contact-number-glow: 0 2px 6px rgb(0 94 245 / 0.22);
    --solution-hint: var(--text-secondary);
    --solution-required: #d4181f;
    --solution-field: #fbfcfe;
    --solution-border: #d9dfe8;
    --solution-field-shadow: 0 1px 2px rgb(16 24 40 / 0.05);
    --solution-icon: #536280;
    --solution-placeholder: #53617f;
    --solution-chevron: #5c6a87;
    --solution-focus: #1f62f9;
    --solution-focus-glow: rgb(31 98 249 / 0.14);
    --solution-panel: #ffffff;
    --solution-panel-border: #dee5ec;
    --solution-panel-shadow: 0 16px 40px rgb(15 30 60 / 0.12), 0 2px 6px rgb(15 30 60 / 0.06);
    --solution-search: #f6f8fa;
    --solution-search-border: #e0e7ef;
    --solution-search-icon: #566281;
    --solution-search-placeholder: #5c6985;
    --solution-search-focus: #93a6c2;
    --solution-heading: var(--text-secondary);
    --solution-title: var(--text-primary);
    --solution-desc: var(--text-secondary);
    --solution-row-chevron: #3f5278;
    --solution-active: #e7f1fe;
    --solution-active-title: #0b1d8c;
    --solution-active-chevron: #0b4cf5;
    --solution-divider: #e6eaf0;
    --solution-blue: #0065fd;
    --solution-blue-tile: #d9e9fe;
    --solution-mint: #05c4a0;
    --solution-mint-tile: #d3fbf4;
    --solution-purple: #7a1af9;
    --solution-purple-tile: #ece4fe;
    --solution-amber: #fd9a00;
    --solution-amber-tile: #fef2d5;
    --solution-red: #f90e15;
    --solution-red-tile: #fee4e5;
    --solution-slate: #4d5978;
    --solution-slate-tile: #e8ebf1;
    /* the services page's sections drawn to their own designs (2026-10-24): the ground, the words, the card,
       the tiles' colours and the pictures */
    --svc-show-bg: #f2f8fe;
    --svc-show-ink: var(--text-primary);
    --svc-show-eyebrow: #0037f4;
    --svc-show-text: var(--text-primary);
    --svc-show-muted: var(--text-secondary);
    --svc-show-for: var(--text-primary);
    --svc-show-card: #ffffff;
    --svc-show-card-shadow: 0 2px 6px rgb(28 64 140 / 0.04), 0 18px 48px rgb(28 64 140 / 0.08);
    --svc-show-rule: #e6eaf0;
    --svc-show-tile: #e7f1fe;
    --svc-show-tile-ink: #0354f4;
    --svc-btn-outline-hover: #edf3fe;
    --svc-tone-blue: #e9f1fe;
    --svc-tone-blue-ink: #2060f7;
    --svc-tone-green: #e7f8e9;
    --svc-tone-green-ink: #339449;
    --svc-tone-purple: #f3effd;
    --svc-tone-purple-ink: #8342f6;
    --svc-tone-amber: #fff5dc;
    --svc-tone-amber-ink: #e9a124;
    --svc-tone-red: #fdecf1;
    --svc-tone-red-ink: #ef5f80;
    --svc-show-scene-opacity: 1;
    --svc-show-screens-filter: none;
    /* the services page's other rows (Services.SPOTLIGHTS): the panel, the list's card, the words and the
       tiles' and ticks' colours of their designs */
    --spot-panel: #f2f7fd;
    --spot-card: #f9fbfe;
    --spot-card-shadow: 0 1px 2px rgb(16 40 90 / 0.03), 0 12px 32px rgb(16 40 90 / 0.05);
    --spot-ink: var(--text-primary);
    --spot-tagline: var(--text-primary);
    --spot-text: var(--text-primary);
    --spot-rule: #e3e8f2;
    --spot-pill: #eef2fb;
    --spot-blue: #0154e5;
    --spot-blue-hover: #0043bd;
    --spot-purple: #6d1cfb;
    --spot-purple-hover: #5810d6;
    --spot-purple-soft: #f3edff;
    --spot-tile-blue: #e3edfe;
    --spot-icon-blue: #0159fc;
    --spot-tile-green: #cff1e3;
    --spot-icon-green: #058630;
    --spot-tile-teal: #d6f4f2;
    --spot-icon-teal: #0a997a;
    --spot-tile-red: #fbe4e4;
    --spot-icon-red: #c42b24;
    --spot-tile-purple: #efe6fe;
    --spot-icon-purple: #6d1cfb;
    --spot-tile-amber: #fdefd5;
    --spot-icon-amber: #ef9a0c;
    --spot-tick-green: #048526;
    --spot-lead-line: var(--text-primary);
    --steps-bg-top: #f6f9fe;
    --steps-bg-bottom: #f2f5fa;
    --steps-eyebrow: #025bfb;
    --steps-rule: #85acfb;
    --steps-ink: var(--text-primary);
    --steps-text: var(--text-primary);
    --steps-card: #ffffff;
    --steps-card-shadow: 0 1px 3px rgb(30 60 130 / 0.04), 0 10px 28px rgb(30 60 130 / 0.06);
    --steps-card-shadow-raised: 0 2px 6px rgb(30 60 130 / 0.06), 0 18px 40px rgb(30 60 130 / 0.12);
    --steps-number: #0058fd;
    --steps-number-ink: #ffffff;
    --steps-number-shadow: 0 4px 12px rgb(0 70 220 / 0.2);
    --steps-line: #a7c3fa;
    --steps-dot: #7ca5f7;
    --steps-picture-filter: none;
    --steps-cta-bg: #e8f1fe;
    --steps-cta-border: #ffffff;
    --steps-cta-rule: #0044fd;
    --steps-cta-title: var(--text-primary);
    --steps-cta-text: var(--text-primary);
    --steps-cta-button: #005cfd;
    --steps-cta-button-hover: #004ad6;
    --steps-cta-button-glow: 0 8px 22px rgb(0 92 253 / 0.3);
    --steps-cta-art-filter: none;
    --contact-button: #005ef5;
    --contact-button-hover: #004fd1;
    --contact-button-ink: #ffffff;

    /* The cards of the offerings that have no row of their own on an overview (the home page drew its services as these until
       2026-10-31, whence their names) */
    --home-card-surface: #ffffff;
    --home-card-border: #e9eff7;
    --home-card-shadow: 0 1px 2px rgb(13 38 89 / 0.04), 0 2px 8px rgb(13 38 89 / 0.035);
    --home-card-shadow-raised: 0 2px 6px rgb(13 38 89 / 0.06), 0 12px 28px rgb(13 38 89 / 0.1);
    --home-card-title: var(--text-primary);
    --home-card-tagline: var(--text-secondary);
    --home-card-text: var(--text-primary);
    --home-card-list: #65676e;
    --home-card-rule: #d8e4f3;

    /* Elevation */
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px 1px rgb(0 0 0 / 0.15);
    --shadow-2: 0 1px 2px rgb(0 0 0 / 0.3), 0 2px 6px 2px rgb(0 0 0 / 0.15);
    --shadow-3: 0 4px 8px 3px rgb(0 0 0 / 0.15), 0 1px 3px rgb(0 0 0 / 0.3);

    /* Shape */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 28px;
    --radius-full: 999px;

    /* Layout */
    --container: 76rem;
    --gutter: 1rem;
    --top-bar-h: 3.75rem; /* 60 pixels */
    /* The most the site leaves between its rows, columns and items (2026-10-28: asked for, "the max gap or space between
       each rows, or columns or items should be 20px"): every gap, and the space between one block and the next, is
       min(var(--gap-max), what its layout would take). Inside a card, a band or a button the padding is its own and
       is not a gap; SpacingTest keeps every gap under it. */
    --gap-max: 20px;

    /* Motion */
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
    --dur-short: 150ms;
    --dur-medium: 250ms;
    /* Springs (2026-10-26, after Apple's guidance): the step of a critically damped spring, which settles without
       overshoot, as a CSS curve. Every such spring has this one shape, scaled in time by its response, so the
       durations below are its settle times: 0.3s of response (--spring-quick), 0.4s (--spring) and 0.55s
       (--spring-slow). A transition that is interrupted turns back from where it is. The bouncy curve (a damping
       of 0.8) is kept for what a gesture threw, never for what merely appears. */
    --ease-spring: linear(0, 0.0028 0.8%, 0.0232 2.5%, 0.0741 4.8%, 0.1578 7.6%, 0.2674 10.9%, 0.3908 14.6%,
        0.5153 18.6%, 0.6304 23.1%, 0.7293 27.9%, 0.8092 33%, 0.8704 38.4%, 0.915 44.2%, 0.9461 50.2%, 0.9669 56.5%,
        0.9803 63.1%, 0.9886 70%, 0.9936 77.1%, 0.9965 84.5%, 0.9981 92.1%, 1);
    --ease-spring-bounce: linear(0, 0.0024 0.8%, 0.0202 2.5%, 0.0667 4.8%, 0.1472 7.6%, 0.2585 10.9%, 0.3905 14.6%,
        0.5297 18.6%, 0.6626 23.1%, 0.7782 27.9%, 0.8702 33%, 0.9365 38.4%, 0.9794 44.2%, 1.0031 50.2%, 1.0133 56.5%,
        1.0151 63.1%, 1.0126 70%, 1.0088 77.1%, 1.0053 84.5%, 1.0026 92.1%, 1);
    --spring-quick: 450ms;
    --spring: 590ms;
    --spring-slow: 810ms;
    --spring-bounce: 540ms;
    /* a press: what can be pressed gives a little at once, on the press itself, and springs back as it is let go */
    --press-scale: 0.97;
    --press-scale-card: 0.985;
    --press-in: 90ms;
}

@media (min-width: 48rem) {
    :root {
        --gutter: 1.5rem;
    }
}

@media (min-width: 64rem) {
    :root {
        --gutter: 2rem;
    }
}

/* From 80rem every page has the home page's column: 1316 pixels of a frame 1536 wide, growing with the
   window up to 1645 (in a window 1920 wide) and no further, so that the pages are as wide as one another */
@media (min-width: 80rem) {
    :root {
        --container: min(85.6771vw, 102.8125rem);
    }
}

/* Dark theme: the system's choice, unless the visitor chose light */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --md-primary: #a8c7fa;
        --md-on-primary: #062e6f;
        --md-primary-hover: #bdd5fb;
        --md-primary-container: #0842a0;
        --md-on-primary-container: #d3e3fd;
        --md-secondary: #7fcfff;
        --md-secondary-container: #004a77;
        --md-on-secondary-container: #c2e7ff;
        --md-tertiary: #6dd58c;
        --md-tertiary-container: #0f5223;
        --md-on-tertiary-container: #c4eed0;
        --md-error: #f2b8b5;
        --md-on-error: #601410;
        --md-error-container: #8c1d18;
        --md-on-error-container: #f9dedc;
        --md-surface: #131314;
        --md-surface-dim: #131314;
        --md-surface-container-lowest: #0e0e0e;
        --md-surface-container-low: #1b1b1b;
        --md-surface-container: #1e1f20;
        --md-surface-container-high: #282a2c;
        --md-surface-container-highest: #333537;
        /* typography.md has no dark theme: its two text colours are the site's dark surface's (14.5:1 and 10.9:1) */
        --text-primary: #e3e3e3;
        --text-secondary: #c4c7c5;
        --md-on-surface: var(--text-primary);
        --md-on-surface-variant: var(--text-secondary);
        --md-outline: #8e918f;
        --md-outline-variant: #444746;
        --md-inverse-surface: #e3e3e3;
        --md-inverse-on-surface: #303030;
        --md-inverse-primary: #0154e5;
        --md-scrim: rgb(0 0 0 / 0.6);
        --accent-blue: #a8c7fa;
        --accent-blue-container: #0842a0;
        --accent-blue-on: #d3e3fd;
        --accent-green: #6dd58c;
        --accent-green-container: #0f5223;
        --accent-green-on: #c4eed0;
        --accent-amber: #ffb95f;
        --accent-amber-container: #5c3a00;
        --accent-amber-on: #ffdf9e;
        --accent-purple: #d0bcff;
        --accent-purple-container: #4f378b;
        --accent-purple-on: #eaddff;
        --accent-teal: #70d8c7;
        --accent-teal-container: #004d44;
        --accent-teal-on: #b2dfdb;
        --accent-red: #f2b8b5;
        --accent-red-container: #8c1d18;
        --accent-red-on: #f9dedc;
        --accent-slate: #c4c6d0;
        --accent-slate-container: #44474f;
        --accent-slate-on: #e0e2ec;
        --md-primary-ink: #a8c7fa;
        --frame-surface: #131314;
        --frame-ink: var(--text-primary);
        --frame-nav: #c4c7c5;
        --frame-icon: #c4c7c5;
        --frame-material: rgb(19 19 20 / 0.76);
        --frame-edge: rgb(255 255 255 / 0.09);
        --mega-rule: #333537;
        --mega-panel: rgb(30 31 32 / 0.9);
        --mega-edge: rgb(255 255 255 / 0.08);
        --mega-shadow: 0 2px 6px rgb(0 0 0 / 0.3), 0 36px 72px -28px rgb(0 0 0 / 0.75);
        --mega-item-hover: #2a2c30;
        --mega-item-hover-edge: rgb(168 199 250 / 0.32);
        --mega-chevron: #9aa0ab;
        --search-scrim: rgb(0 0 0 / 0.55);
        --search-shadow: 0 2px 6px rgb(0 0 0 / 0.3), 0 40px 80px -32px rgb(0 0 0 / 0.8);
        --footer-surface: #1b1b1b;
        --footer-glow: none;
        --footer-art-opacity: 1;
        --footer-ink: var(--text-primary);
        --footer-heading: var(--text-primary);
        --footer-value: var(--text-primary);
        --footer-text: var(--text-primary);
        --footer-muted: var(--text-secondary);
        --footer-copyright: var(--text-secondary);
        --footer-label: var(--text-secondary);
        --footer-legal: #c4c7c5;
        --footer-icon: #c4c7c5;
        --footer-social: rgb(255 255 255 / 0.07);
        --footer-social-hover: rgb(255 255 255 / 0.12);
        --footer-badge: rgb(168 199 250 / 0.12);
        --footer-badge-ink: #a8c7fa;
        --footer-rule: #333537;
        --footer-separator: #3c3f42;
        --contact-bg: #131314;
        --contact-circle: rgb(255 255 255 / 0.025);
        --contact-dot: rgb(168 199 250 / 0.2);
        --contact-card: #1e1f20;
        --contact-card-tint: #1e1f20;
        --contact-card-shadow: none;
        --contact-ink: var(--text-primary);
        --contact-text: var(--text-primary);
        --contact-label: var(--text-primary);
        --contact-optional: var(--text-secondary);
        --contact-muted: var(--text-secondary);
        --contact-placeholder: #9aa0a6;
        --contact-field-border: #5c5f61;
        --contact-field-icon: #c4c7c5;
        --contact-accent: #a8c7fa;
        --contact-link: #a8c7fa;
        --contact-disc: rgb(168 199 250 / 0.12);
        --contact-step-line: #3b4a63;
        --contact-files-hover: rgb(168 199 250 / 0.06);
    --contact-toolbar: rgb(168 199 250 / 0.05);
        --contact-number-glow: none;
        --solution-hint: var(--text-secondary);
        --solution-required: #ff8a80;
        --solution-field: #1e1f20;
        --solution-border: #5c5f61;
        --solution-field-shadow: none;
        --solution-icon: #c4c7c5;
        --solution-placeholder: #aeb1b5;
        --solution-chevron: #c4c7c5;
        --solution-focus: #a8c7fa;
        --solution-focus-glow: rgb(168 199 250 / 0.18);
        --solution-panel: #1e1f20;
        --solution-panel-border: #3c4043;
        --solution-panel-shadow: 0 16px 40px rgb(0 0 0 / 0.5);
        --solution-search: #282a2c;
        --solution-search-border: #444746;
        --solution-search-icon: #c4c7c5;
        --solution-search-placeholder: #aeb1b5;
        --solution-search-focus: #8e918f;
        --solution-heading: var(--text-secondary);
        --solution-title: var(--text-primary);
        --solution-desc: var(--text-secondary);
        --solution-row-chevron: #aeb1b5;
        --solution-active: rgb(168 199 250 / 0.12);
        --solution-active-title: #d3e3fd;
        --solution-active-chevron: #a8c7fa;
        --solution-divider: #3c4043;
        --solution-blue: #a8c7fa;
        --solution-blue-tile: rgb(168 199 250 / 0.14);
        --solution-mint: #6fdcc4;
        --solution-mint-tile: rgb(111 220 196 / 0.14);
        --solution-purple: #cdb5ff;
        --solution-purple-tile: rgb(205 181 255 / 0.14);
        --solution-amber: #ffcc80;
        --solution-amber-tile: rgb(255 204 128 / 0.14);
        --solution-red: #ffb4ab;
        --solution-red-tile: rgb(255 180 171 / 0.14);
        --solution-slate: #c4c7c5;
        --solution-slate-tile: rgb(196 199 197 / 0.14);
        --svc-show-bg: #15171a;
        --svc-show-ink: var(--text-primary);
        --svc-show-eyebrow: #a8c7fa;
        --svc-show-text: var(--text-primary);
        --svc-show-muted: var(--text-secondary);
        --svc-show-for: var(--text-primary);
        --svc-show-card: #1e1f20;
        --svc-show-card-shadow: none;
        --svc-show-rule: #333537;
        --svc-show-tile: rgb(168 199 250 / 0.14);
        --svc-show-tile-ink: #a8c7fa;
        --svc-btn-outline-hover: rgb(168 199 250 / 0.1);
        --svc-tone-blue: rgb(168 199 250 / 0.14);
        --svc-tone-blue-ink: #a8c7fa;
        --svc-tone-green: rgb(109 213 140 / 0.14);
        --svc-tone-green-ink: #6dd58c;
        --svc-tone-purple: rgb(208 188 255 / 0.14);
        --svc-tone-purple-ink: #d0bcff;
        --svc-tone-amber: rgb(253 214 99 / 0.14);
        --svc-tone-amber-ink: #fdd663;
        --svc-tone-red: rgb(242 139 130 / 0.14);
        --svc-tone-red-ink: #f28b82;
        --svc-show-scene-opacity: 0.3;
        --svc-show-screens-filter: brightness(0.9);
        --spot-panel: #1b1c1e;
        --spot-card: #232427;
        --spot-card-shadow: none;
        --spot-ink: var(--text-primary);
        --spot-tagline: var(--text-primary);
        --spot-text: var(--text-primary);
        --spot-rule: #333537;
        --spot-pill: #2d2f31;
        --spot-blue: #a8c7fa;
        --spot-blue-hover: #c2d7fb;
        --spot-purple: #d0bcff;
        --spot-purple-hover: #e0d2ff;
        --spot-purple-soft: rgb(208 188 255 / 0.1);
        --spot-tile-blue: rgb(168 199 250 / 0.14);
        --spot-icon-blue: #a8c7fa;
        --spot-tile-green: rgb(109 213 140 / 0.14);
        --spot-icon-green: #6dd58c;
        --spot-tile-teal: rgb(110 214 196 / 0.14);
        --spot-icon-teal: #6ed6c4;
        --spot-tile-red: rgb(242 139 130 / 0.14);
        --spot-icon-red: #f28b82;
        --spot-tile-purple: rgb(208 188 255 / 0.14);
        --spot-icon-purple: #d0bcff;
        --spot-tile-amber: rgb(253 214 99 / 0.14);
        --spot-icon-amber: #fdd663;
        --spot-tick-green: #6dd58c;
        --spot-lead-line: var(--text-primary);
        --steps-bg-top: #131314;
        --steps-bg-bottom: #131314;
        --steps-eyebrow: #a8c7fa;
        --steps-rule: #4f72b8;
        --steps-ink: var(--text-primary);
        --steps-text: var(--text-primary);
        --steps-card: #1e1f20;
        --steps-card-shadow: none;
        --steps-card-shadow-raised: 0 12px 32px rgb(0 0 0 / 0.45);
        --steps-number: #0b57d0;
        --steps-number-ink: #ffffff;
        --steps-number-shadow: none;
        --steps-line: rgb(168 199 250 / 0.45);
        --steps-dot: #7aa5f0;
        --steps-picture-filter: brightness(0.9);
        --steps-cta-bg: #d5e1f5;
        --steps-cta-border: #333537;
        --steps-cta-rule: #0044fd;
        --steps-cta-title: #000c36;
        --steps-cta-text: #1c283f;
        --steps-cta-button: #0b57d0;
        --steps-cta-button-hover: #0a4cb8;
        --steps-cta-button-glow: none;
        --steps-cta-art-filter: brightness(0.9);
        --contact-button: #a8c7fa;
        --contact-button-hover: #c2d7fb;
        --contact-button-ink: #062e6f;
        --home-card-surface: #1b1b1b;
        --home-card-border: #333537;
        --home-card-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
        --home-card-shadow-raised: 0 2px 6px rgb(0 0 0 / 0.4), 0 12px 28px rgb(0 0 0 / 0.45);
        --home-card-title: var(--text-primary);
        --home-card-tagline: var(--text-secondary);
        --home-card-text: var(--text-primary);
        --home-card-list: #c4c7c5;
        --home-card-rule: #444746;
        --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5), 0 1px 3px 1px rgb(0 0 0 / 0.3);
        --shadow-2: 0 1px 2px rgb(0 0 0 / 0.5), 0 2px 6px 2px rgb(0 0 0 / 0.3);
        --shadow-3: 0 4px 8px 3px rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.5);
    }
}

/* Dark theme: the visitor's choice, whatever the system says */
:root[data-theme="dark"] {
    color-scheme: dark;
    --md-primary: #a8c7fa;
    --md-on-primary: #062e6f;
    --md-primary-hover: #bdd5fb;
    --md-primary-container: #0842a0;
    --md-on-primary-container: #d3e3fd;
    --md-secondary: #7fcfff;
    --md-secondary-container: #004a77;
    --md-on-secondary-container: #c2e7ff;
    --md-tertiary: #6dd58c;
    --md-tertiary-container: #0f5223;
    --md-on-tertiary-container: #c4eed0;
    --md-error: #f2b8b5;
    --md-on-error: #601410;
    --md-error-container: #8c1d18;
    --md-on-error-container: #f9dedc;
    --md-surface: #131314;
    --md-surface-dim: #131314;
    --md-surface-container-lowest: #0e0e0e;
    --md-surface-container-low: #1b1b1b;
    --md-surface-container: #1e1f20;
    --md-surface-container-high: #282a2c;
    --md-surface-container-highest: #333537;
    --text-primary: #e3e3e3;
    --text-secondary: #c4c7c5;
    --md-on-surface: var(--text-primary);
    --md-on-surface-variant: var(--text-secondary);
    --md-outline: #8e918f;
    --md-outline-variant: #444746;
    --md-inverse-surface: #e3e3e3;
    --md-inverse-on-surface: #303030;
    --md-inverse-primary: #0154e5;
    --md-scrim: rgb(0 0 0 / 0.6);
    --accent-blue: #a8c7fa;
    --accent-blue-container: #0842a0;
    --accent-blue-on: #d3e3fd;
    --accent-green: #6dd58c;
    --accent-green-container: #0f5223;
    --accent-green-on: #c4eed0;
    --accent-amber: #ffb95f;
    --accent-amber-container: #5c3a00;
    --accent-amber-on: #ffdf9e;
    --accent-purple: #d0bcff;
    --accent-purple-container: #4f378b;
    --accent-purple-on: #eaddff;
    --accent-teal: #70d8c7;
    --accent-teal-container: #004d44;
    --accent-teal-on: #b2dfdb;
    --accent-red: #f2b8b5;
    --accent-red-container: #8c1d18;
    --accent-red-on: #f9dedc;
    --accent-slate: #c4c6d0;
    --accent-slate-container: #44474f;
    --accent-slate-on: #e0e2ec;
    --md-primary-ink: #a8c7fa;
    --frame-surface: #131314;
    --frame-ink: var(--text-primary);
    --frame-nav: #c4c7c5;
    --frame-icon: #c4c7c5;
    --frame-material: rgb(19 19 20 / 0.76);
    --frame-edge: rgb(255 255 255 / 0.09);
    --mega-rule: #333537;
    --mega-panel: rgb(30 31 32 / 0.9);
    --mega-edge: rgb(255 255 255 / 0.08);
    --mega-shadow: 0 2px 6px rgb(0 0 0 / 0.3), 0 36px 72px -28px rgb(0 0 0 / 0.75);
    --mega-item-hover: #2a2c30;
    --mega-item-hover-edge: rgb(168 199 250 / 0.32);
    --mega-chevron: #9aa0ab;
    --search-scrim: rgb(0 0 0 / 0.55);
    --search-shadow: 0 2px 6px rgb(0 0 0 / 0.3), 0 40px 80px -32px rgb(0 0 0 / 0.8);
    --footer-surface: #1b1b1b;
    --footer-glow: none;
    --footer-art-opacity: 1;
    --footer-ink: var(--text-primary);
    --footer-heading: var(--text-primary);
    --footer-value: var(--text-primary);
    --footer-text: var(--text-primary);
    --footer-muted: var(--text-secondary);
    --footer-copyright: var(--text-secondary);
    --footer-label: var(--text-secondary);
    --footer-legal: #c4c7c5;
    --footer-icon: #c4c7c5;
    --footer-social: rgb(255 255 255 / 0.07);
    --footer-social-hover: rgb(255 255 255 / 0.12);
    --footer-badge: rgb(168 199 250 / 0.12);
    --footer-badge-ink: #a8c7fa;
    --footer-rule: #333537;
    --footer-separator: #3c3f42;
    --contact-bg: #131314;
    --contact-circle: rgb(255 255 255 / 0.025);
    --contact-dot: rgb(168 199 250 / 0.2);
    --contact-card: #1e1f20;
    --contact-card-tint: #1e1f20;
    --contact-card-shadow: none;
    --contact-ink: var(--text-primary);
    --contact-text: var(--text-primary);
    --contact-label: var(--text-primary);
    --contact-optional: var(--text-secondary);
    --contact-muted: var(--text-secondary);
    --contact-placeholder: #9aa0a6;
    --contact-field-border: #5c5f61;
    --contact-field-icon: #c4c7c5;
    --contact-accent: #a8c7fa;
    --contact-link: #a8c7fa;
    --contact-disc: rgb(168 199 250 / 0.12);
    --contact-step-line: #3b4a63;
    --contact-files-hover: rgb(168 199 250 / 0.06);
    --contact-toolbar: rgb(168 199 250 / 0.05);
    --contact-number-glow: none;
    --solution-hint: var(--text-secondary);
    --solution-required: #ff8a80;
    --solution-field: #1e1f20;
    --solution-border: #5c5f61;
    --solution-field-shadow: none;
    --solution-icon: #c4c7c5;
    --solution-placeholder: #aeb1b5;
    --solution-chevron: #c4c7c5;
    --solution-focus: #a8c7fa;
    --solution-focus-glow: rgb(168 199 250 / 0.18);
    --solution-panel: #1e1f20;
    --solution-panel-border: #3c4043;
    --solution-panel-shadow: 0 16px 40px rgb(0 0 0 / 0.5);
    --solution-search: #282a2c;
    --solution-search-border: #444746;
    --solution-search-icon: #c4c7c5;
    --solution-search-placeholder: #aeb1b5;
    --solution-search-focus: #8e918f;
    --solution-heading: var(--text-secondary);
    --solution-title: var(--text-primary);
    --solution-desc: var(--text-secondary);
    --solution-row-chevron: #aeb1b5;
    --solution-active: rgb(168 199 250 / 0.12);
    --solution-active-title: #d3e3fd;
    --solution-active-chevron: #a8c7fa;
    --solution-divider: #3c4043;
    --solution-blue: #a8c7fa;
    --solution-blue-tile: rgb(168 199 250 / 0.14);
    --solution-mint: #6fdcc4;
    --solution-mint-tile: rgb(111 220 196 / 0.14);
    --solution-purple: #cdb5ff;
    --solution-purple-tile: rgb(205 181 255 / 0.14);
    --solution-amber: #ffcc80;
    --solution-amber-tile: rgb(255 204 128 / 0.14);
    --solution-red: #ffb4ab;
    --solution-red-tile: rgb(255 180 171 / 0.14);
    --solution-slate: #c4c7c5;
    --solution-slate-tile: rgb(196 199 197 / 0.14);
    --svc-show-bg: #15171a;
    --svc-show-ink: var(--text-primary);
    --svc-show-eyebrow: #a8c7fa;
    --svc-show-text: var(--text-primary);
    --svc-show-muted: var(--text-secondary);
    --svc-show-for: var(--text-primary);
    --svc-show-card: #1e1f20;
    --svc-show-card-shadow: none;
    --svc-show-rule: #333537;
    --svc-show-tile: rgb(168 199 250 / 0.14);
    --svc-show-tile-ink: #a8c7fa;
    --svc-btn-outline-hover: rgb(168 199 250 / 0.1);
    --svc-tone-blue: rgb(168 199 250 / 0.14);
    --svc-tone-blue-ink: #a8c7fa;
    --svc-tone-green: rgb(109 213 140 / 0.14);
    --svc-tone-green-ink: #6dd58c;
    --svc-tone-purple: rgb(208 188 255 / 0.14);
    --svc-tone-purple-ink: #d0bcff;
    --svc-tone-amber: rgb(253 214 99 / 0.14);
    --svc-tone-amber-ink: #fdd663;
    --svc-tone-red: rgb(242 139 130 / 0.14);
    --svc-tone-red-ink: #f28b82;
    --svc-show-scene-opacity: 0.3;
    --svc-show-screens-filter: brightness(0.9);
    --spot-panel: #1b1c1e;
    --spot-card: #232427;
    --spot-card-shadow: none;
    --spot-ink: var(--text-primary);
    --spot-tagline: var(--text-primary);
    --spot-text: var(--text-primary);
    --spot-rule: #333537;
    --spot-pill: #2d2f31;
    --spot-blue: #a8c7fa;
    --spot-blue-hover: #c2d7fb;
    --spot-purple: #d0bcff;
    --spot-purple-hover: #e0d2ff;
    --spot-purple-soft: rgb(208 188 255 / 0.1);
    --spot-tile-blue: rgb(168 199 250 / 0.14);
    --spot-icon-blue: #a8c7fa;
    --spot-tile-green: rgb(109 213 140 / 0.14);
    --spot-icon-green: #6dd58c;
    --spot-tile-teal: rgb(110 214 196 / 0.14);
    --spot-icon-teal: #6ed6c4;
    --spot-tile-red: rgb(242 139 130 / 0.14);
    --spot-icon-red: #f28b82;
    --spot-tile-purple: rgb(208 188 255 / 0.14);
    --spot-icon-purple: #d0bcff;
    --spot-tile-amber: rgb(253 214 99 / 0.14);
    --spot-icon-amber: #fdd663;
    --spot-tick-green: #6dd58c;
    --spot-lead-line: var(--text-primary);
    --steps-bg-top: #131314;
    --steps-bg-bottom: #131314;
    --steps-eyebrow: #a8c7fa;
    --steps-rule: #4f72b8;
    --steps-ink: var(--text-primary);
    --steps-text: var(--text-primary);
    --steps-card: #1e1f20;
    --steps-card-shadow: none;
    --steps-card-shadow-raised: 0 12px 32px rgb(0 0 0 / 0.45);
    --steps-number: #0b57d0;
    --steps-number-ink: #ffffff;
    --steps-number-shadow: none;
    --steps-line: rgb(168 199 250 / 0.45);
    --steps-dot: #7aa5f0;
    --steps-picture-filter: brightness(0.9);
    --steps-cta-bg: #d5e1f5;
    --steps-cta-border: #333537;
    --steps-cta-rule: #0044fd;
    --steps-cta-title: #000c36;
    --steps-cta-text: #1c283f;
    --steps-cta-button: #0b57d0;
    --steps-cta-button-hover: #0a4cb8;
    --steps-cta-button-glow: none;
    --steps-cta-art-filter: brightness(0.9);
    --contact-button: #a8c7fa;
    --contact-button-hover: #c2d7fb;
    --contact-button-ink: #062e6f;
    --home-card-surface: #1b1b1b;
    --home-card-border: #333537;
    --home-card-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
    --home-card-shadow-raised: 0 2px 6px rgb(0 0 0 / 0.4), 0 12px 28px rgb(0 0 0 / 0.45);
    --home-card-title: var(--text-primary);
    --home-card-tagline: var(--text-secondary);
    --home-card-text: var(--text-primary);
    --home-card-list: #c4c7c5;
    --home-card-rule: #444746;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.5), 0 1px 3px 1px rgb(0 0 0 / 0.3);
    --shadow-2: 0 1px 2px rgb(0 0 0 / 0.5), 0 2px 6px 2px rgb(0 0 0 / 0.3);
    --shadow-3: 0 4px 8px 3px rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.5);
}

/* Accent classes: a card, a tile or a hero takes the colour of what it is about */
.accent-blue   { --accent: var(--accent-blue);   --accent-container: var(--accent-blue-container);   --accent-on: var(--accent-blue-on); }
.accent-green  { --accent: var(--accent-green);  --accent-container: var(--accent-green-container);  --accent-on: var(--accent-green-on); }
.accent-amber  { --accent: var(--accent-amber);  --accent-container: var(--accent-amber-container);  --accent-on: var(--accent-amber-on); }
.accent-purple { --accent: var(--accent-purple); --accent-container: var(--accent-purple-container); --accent-on: var(--accent-purple-on); }
.accent-teal   { --accent: var(--accent-teal);   --accent-container: var(--accent-teal-container);   --accent-on: var(--accent-teal-on); }
.accent-red    { --accent: var(--accent-red);    --accent-container: var(--accent-red-container);    --accent-on: var(--accent-red-on); }
.accent-slate  { --accent: var(--accent-slate);  --accent-container: var(--accent-slate-container);  --accent-on: var(--accent-slate-on); }

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--top-bar-h) + 1rem);
}

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--md-surface);
    text-rendering: optimizeLegibility;
}

main {
    flex: 1 0 auto;
}

ul, ol, dl {
    margin: 0;
}

/* a long word breaks rather than runs out of its column, at 200% text on a phone */
h1, h2, h3, h4 {
    overflow-wrap: break-word;
}

a {
    color: var(--md-primary);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--md-primary-hover);
}

:focus-visible {
    outline: 3px solid var(--md-primary);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

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

button, input, select, textarea {
    color: inherit;
}

/* a button's text is Roboto too (a browser gives a button its system font) */
button {
    font-family: inherit;
    cursor: pointer;
}

/* bold is Roboto 700, never a heavier step of a weight already bold */
strong, b {
    font-weight: var(--fw-bold);
}

/* no italics (typography.md, 1: there are no italic files): emphasis is weight */
em, i, cite, dfn, var, address {
    font-style: normal;
}

code {
    background: var(--md-surface-container);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-xs);
}

::selection {
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
}

/* ------------------------------------------------------------------ */
/* Type styles                                                         */
/* ------------------------------------------------------------------ */

.lead {
    text-wrap: pretty;
    margin-bottom: 0;
}

/* a plain page's title: nothing above it but its label, and the base's half line under it */
.display {
    margin-top: 0;
    margin-bottom: min(var(--gap-max), 0.5em);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--md-primary);
    margin-bottom: 0.75rem;
}

.eyebrow .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.text-center {
    text-align: center;
}

/* Long-form text: the thank-you page (body). The legal pages are set out as documents, with a stylesheet of their own
   (css/pages/legal.css, 2026-10-30), and use typography.md's .article (18px, its line height 1.6) there */
.prose {
    max-width: 70ch;
    text-wrap: pretty;
}

.prose > :first-child {
    margin-top: 0;
}

.prose > :last-child {
    margin-bottom: 0;
}

.prose h2 {
    margin-top: var(--gap-max);
    margin-bottom: 0.75rem;
}

.prose h3 {
    margin-top: var(--gap-max);
    margin-bottom: 0.5rem;
}

.prose p {
    margin-bottom: 1em;
}

.prose ul, .prose ol {
    padding-left: 1.5rem;
    margin-bottom: 1em;
}

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

/* ------------------------------------------------------------------ */
/* Type roles (typography.md, 3)                                        */
/* ------------------------------------------------------------------ */

/* Each text of the site's own components takes one role of typography.md's table (section 3), and only here:
   the component rules below set none of its family, size, weight, line height, letter spacing or case. An
   element's tag gives it its role when the base above has one (h1 to h4, p, label, button, a link in a nav, a
   field, a table's cells); a class is listed here when its role is another, or when a heading takes another
   level's style ("apply the style of another level through a class and keep the correct tag"). */

/* H3: sans 500 */
.prose h2,
.svc-spot__name,
.ins-group__title,
.admin-head h1,
.login-card h1 {
    font-family: var(--font-sans);
    font-size: var(--fs-h3);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h3);
    letter-spacing: 0;
}

/* H4 (card title): sans 500 */
.prose h3,
.card__title,
.step h3,
.faq__question,
.contact-page__card-title,
.contact-next h3,
.svc-spot__list-title,
.svc-step__title,
.feature-grid .card h3,
.aside-card h2, .aside-card h3,
.footer__name,
.footer__heading,
.home-card__title,
.guides-strip__name,
.admin-documents__title,
.admin-bar .brand__name {
    font-family: var(--font-sans);
    font-size: var(--fs-h4);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h4);
    letter-spacing: 0;
}

/* Body: sans 400 */
.step p,
.contact-page__lead,
.contact-page__card-intro,
.solution-field__native .field__control, .solution-picker__button,
.solution-picker__empty,
.contact-ways div > span, .contact-ways div > a,
.contact-next p,
.svc-intro__lead,
.ins-group__lead,
.svc-show__lead,
.svc-show__title p,
.svc-show__summary, .svc-show__for,
.svc-spot__lead,
.svc-spot__tagline,
.svc-spot__summary, .svc-spot__for,
.svc-spot__list li,
.svc-step__text,
.svc-cta__line,
.footer__about,
.footer__value,
.home-card__text,
.home-card__list,
.guides-strip__text,
.snackbar,
.solution-option__text strong,
.search__name,
.rich__editor {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    letter-spacing: 0;
}

/* Body, its bold part: sans 700 (a strong) */
.svc-point__text strong {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-bold);
    line-height: var(--lh-body);
    letter-spacing: 0;
}

/* Small, captions: sans 400 */
.text-small,
.search__line,
.hero__note,
.card__meta,
.field__optional,
.field__hint,
.field__error,
.form__note,
.contact-files__drop,
.contact-files__item,
.contact-files__size,
.contact-form__note,
.rich__count,
.svc-point__text span,
.footer__label,
.footer__copyright,
.footer__list a,
.mega__name,
.home-card__tagline,
.guides-strip__meta,
.admin-bar__user,
.table caption,
.admin-files {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    line-height: var(--lh-small);
    letter-spacing: 0;
}

/* Form labels: sans 500 */
.field__label,
.contact-ways strong,
.kv dt {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-small);
    letter-spacing: 0;
}

/* Buttons and navigation links: sans 500 */
.btn,
.skip-link,
.top-nav__link,
.top-nav__trigger,
.drawer__link,
.card__action,
.contact-files__again,
.contact-form__send,
.svc-btn,
.svc-cta__button,
.home-card__more, .home-card__demo,
.guides-strip__all,
.admin-bar__title,
.admin-bar__nav a,
.footer__legal a,
a.chip {
    font-family: var(--font-sans);
    font-size: var(--fs-button);
    font-weight: var(--fw-medium);
    line-height: var(--lh-button);
    letter-spacing: 0;
}

/* Eyebrow labels and tags: mono 500, uppercase */
.drawer__label,
.search__group,
.step::before,
span.chip,
.solution-picker__heading,
.contact-next__number,
.svc-intro__eyebrow,
.svc-show__eyebrow,
.svc-spot__eyebrow,
.svc-steps__eyebrow,
.svc-step__number,
.error-page__code {
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-medium);
    line-height: var(--lh-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}

/* Code: mono 400, as typed (an enquiry's reference beside its eyebrow) */
.eyebrow code {
    font-family: var(--font-mono);
    font-size: var(--fs-code);
    font-weight: var(--fw-regular);
    line-height: var(--lh-code);
    letter-spacing: 0;
    text-transform: none;
}

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */

.container {
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container--narrow {
    max-width: calc(48rem + 2 * var(--gutter));
}

.section {
    padding-block: var(--gap-max);
}

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

.section--tonal {
    background: var(--md-surface-container-low);
}

.section--top {
    padding-top: var(--gap-max);
}

.section__head {
    max-width: 46rem;
    margin-bottom: var(--gap-max);
}

.section__head--center {
    margin-inline: auto;
    text-align: center;
}

.section__head .lead {
    margin-top: 0.875rem;
}

.section__head h2 {
    margin: 0;
}

.section__foot {
    margin-top: var(--gap-max);
}

.grid {
    display: grid;
    gap: 1rem;
}

@media (min-width: 48rem) {
    .grid {
        gap: var(--gap-max);
    }

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

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

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

.stack {
    display: grid;
    gap: 1rem;
}

.stack--sm {
    gap: 0.5rem;
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

/* ------------------------------------------------------------------ */
/* Icons                                                               */
/* ------------------------------------------------------------------ */

.icon {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    fill: currentColor;
}

.icon-tile {
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-md);
    background: var(--accent-container, var(--md-primary-container));
    color: var(--accent, var(--md-primary));
    flex: none;
}

.icon-tile .icon {
    width: 1.625rem;
    height: 1.625rem;
}

.icon-tile--lg {
    width: 4rem;
    height: 4rem;
    border-radius: var(--radius-lg);
}

.icon-tile--lg .icon {
    width: 2rem;
    height: 2rem;
}

.icon-tile--round {
    border-radius: var(--radius-full);
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0.5rem 1.5rem;
    border: 1px solid transparent;
    border-radius: var(--radius-full);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-short) var(--ease-standard), box-shadow var(--dur-short) var(--ease-standard),
        color var(--dur-short) var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

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

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

.btn--filled {
    background: var(--md-primary);
    color: var(--md-on-primary);
}

.btn--filled:hover {
    background: var(--md-primary-hover);
    color: var(--md-on-primary);
    box-shadow: var(--shadow-1);
}

.btn--tonal {
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
}

.btn--tonal:hover {
    color: var(--md-on-secondary-container);
    box-shadow: var(--shadow-1);
    filter: brightness(0.97);
}

.btn--outlined {
    border-color: var(--md-outline);
    color: var(--md-primary);
    background: transparent;
}

.btn--outlined:hover {
    background: color-mix(in srgb, var(--md-primary) 8%, transparent);
}

.btn--text {
    padding-inline: 0.75rem;
    color: var(--md-primary);
    background: transparent;
}

.btn--text:hover {
    background: color-mix(in srgb, var(--md-primary) 8%, transparent);
}

.btn--inverse {
    background: var(--md-surface);
    color: var(--md-primary);
}

.btn--inverse:hover {
    background: var(--md-surface-container-high);
    color: var(--md-primary);
}

.btn--ghost-inverse {
    border-color: color-mix(in srgb, var(--md-on-primary) 50%, transparent);
    color: var(--md-on-primary);
    background: transparent;
}

.btn--ghost-inverse:hover {
    background: color-mix(in srgb, var(--md-on-primary) 12%, transparent);
    color: var(--md-on-primary);
}

.btn--lg {
    min-height: 3rem;
    padding: 0.75rem 1.75rem;
}

.btn--block {
    width: 100%;
}

.icon-btn {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--md-on-surface-variant);
    transition: background-color var(--dur-short) var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.icon-btn:hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
    color: var(--md-on-surface);
}

/* The theme switch shows the icon of the theme it would switch to */
.icon--moon,
.icon--sun {
    display: inline-flex;
}

.icon-btn[data-theme-toggle] .icon--sun,
.icon-btn[data-theme-toggle][aria-pressed="true"] .icon--moon {
    display: none;
}

.icon-btn[data-theme-toggle][aria-pressed="true"] .icon--sun {
    display: inline-flex;
}

/* ------------------------------------------------------------------ */
/* Skip link and top bar                                               */
/* ------------------------------------------------------------------ */

.skip-link {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 100;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    background: var(--md-inverse-surface);
    color: var(--md-inverse-on-surface);
    transform: translateY(-200%);
    transition: transform var(--dur-short) var(--ease-standard);
}

.skip-link:focus {
    transform: translateY(0);
    color: var(--md-inverse-on-surface);
}

/* The bar: the mark and the name, the sections with a line under the current one, the theme switch and the
   way to us. Sized in rem. Since 2026-10-26 it
   is a translucent material, after Apple's guidance: white over the white page, so that it is the same white bar
   from the first paint, and what scrolls under it then shows through, blurred and a little richer, instead of
   being cut off by an opaque strip; once the page has scrolled, a hairline marks the edge where the page meets it.
   The material is drawn by its ::before, so that the bar itself never becomes the backdrop of what opens from it.
   Asked for less transparency, it is solid. */
.top-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    isolation: isolate;
}

.top-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--frame-material);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    box-shadow: inset 0 -1px 0 transparent;
    transition: box-shadow var(--dur-medium) var(--ease-standard);
}

.top-bar.is-scrolled::before {
    box-shadow: inset 0 -1px 0 var(--frame-edge);
}

.top-bar__row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--top-bar-h);
}

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

.brand:hover {
    color: var(--frame-ink);
}

.brand__mark {
    width: 2.25rem;
    height: 2.25rem;
}

/* The logo: the gradient K and the name, drawn whole; its letters are navy, and light in the dark theme */
.brand__wordmark {
    width: auto;
    height: 2.125rem;
}

.brand__wordmark--dark {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .brand__wordmark--light {
        display: none;
    }

    :root:not([data-theme="light"]) .brand__wordmark--dark {
        display: block;
    }
}

:root[data-theme="dark"] .brand__wordmark--light {
    display: none;
}

:root[data-theme="dark"] .brand__wordmark--dark {
    display: block;
}

.top-nav {
    display: none;
    position: relative;
}

.top-nav__list {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.top-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--top-bar-h);
    padding-inline: 0.75rem;
    color: var(--frame-nav);
    text-decoration: none;
    transition: color var(--dur-short) var(--ease-standard);
}

.top-nav__link:hover {
    color: var(--frame-ink);
}

.top-nav__link.is-active {
    color: var(--md-primary-ink);
}

.top-nav__link.is-active::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1.75rem;
    height: 3px;
    border-radius: 2px 2px 0 0;
    background: var(--md-primary);
    transform: translateX(-50%);
}

.top-bar__actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.top-bar__theme {
    color: var(--frame-icon);
}

.top-bar__cta {
    display: none;
}

@media (min-width: 64rem) {
    .top-nav {
        display: block;
        margin-inline: auto;
    }

    .brand {
        margin-right: 0;
    }

    .top-bar__cta {
        display: inline-flex;
        margin-left: 0.75rem;
        padding-inline: 1.375rem 1.125rem;
    }

    .menu-btn {
        display: none;
    }
}

/* The menus (2026-10-25; moving as Apple's guidance has it, 2026-10-26; made very simple, 2026-10-29: asked for,
   "I need you to simplify the dropwoens menus. Make them very simple and clean, no unsessary text", and then, with a
   picture of a card of plain links in three columns, "something like this, but the links when hover get underlined"):
   each name in the bar a button with a chevron (a link to its overview without a script); open, a card hanging from
   the bar, centred under the nav, which holds its pages as plain links in three columns and nothing else, an
   underline under the one the pointer or the keyboard is on, and last the way to its overview. No icon, tile, label,
   heading, sentence, chevron, point or line. The card grows out of the top of its middle as it opens and goes back into
   it as it closes, along the same path, on the site's spring; a menu opened while another is open changes in place
   instead. One menu is open at a time; Esc, a click outside or the focus leaving it closes it. */
.top-nav__trigger {
    gap: 0.25rem;
    padding-right: 0.5rem;
    border: 0;
    background: none;
    cursor: pointer;
}

.top-nav__trigger .icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--frame-icon);
    transition: rotate var(--spring) var(--ease-spring);
}

.top-nav__trigger[aria-expanded="true"] {
    color: var(--md-primary-ink);
}

.top-nav__trigger[aria-expanded="true"] .icon {
    rotate: 180deg;
    color: var(--md-primary-ink);
}

.top-nav__trigger:focus-visible {
    outline: 2px solid var(--md-primary);
    outline-offset: -0.875rem;
    border-radius: var(--radius-sm);
}

.mega {
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 0;
    width: max-content;
    max-width: calc(100vw - 2rem);
    padding-top: 0.5rem;
    opacity: 1;
    transition: opacity 200ms var(--ease-standard), display 260ms allow-discrete;
}

.mega[hidden] {
    display: none;
    opacity: 0;
}

/* the card: a thick material, the page behind it blurred away. Its corners are 2px (2026-10-27: asked for, "the header
   dropdowns panel card should be rounded 2px, lets see"; they were 1.5rem before that; 12px for a turn on 2026-10-29, after
   the picture of a card it was to follow, and 2px again when asked for: "make the dropdown a 2px rounded"). Its links are
   cells that carry the room at their sides, 1.5rem each, so that a line between two columns has as much on each side */
.mega__inner {
    padding: 0.75rem 0;
    border: 1px solid var(--mega-edge);
    border-radius: 2px;
    background: var(--mega-panel);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    box-shadow: var(--mega-shadow);
    transform-origin: 50% 0;
    transition: scale var(--spring) var(--ease-spring), translate var(--spring) var(--ease-spring);
}

/* closing, it goes back into the bar, faster than it came */
.mega[hidden] .mega__inner {
    scale: 0.96;
    translate: 0 -0.5rem;
    transition-duration: 260ms;
}

@starting-style {
    .mega:not([hidden]) {
        opacity: 0;
    }

    .mega:not([hidden]) .mega__inner {
        scale: 0.96;
        translate: 0 -0.5rem;
    }
}

/* from one menu to the next, the cards change in place: no growing, a short cross-fade */
.mega.is-switching {
    transition-duration: 140ms;
}

.mega.is-switching .mega__inner,
.mega.is-switching[hidden] .mega__inner {
    scale: 1;
    translate: 0 0;
}

@starting-style {
    .mega.is-switching:not([hidden]) .mega__inner {
        scale: 1;
        translate: 0 0;
    }
}

/* the pages: plain links, row by row, in three columns of one width (the longest name's), so that a menu of three, six or
   nine pages fills its rows, and a line between two columns (2026-10-29: asked for, "add | between the columns"); a name
   keeps its one line; each link is a cell 44px high to press. A short window scrolls the list, not the card */
.mega__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
    max-height: calc(100dvh - var(--top-bar-h) - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.mega__list > li:nth-child(3n + 2),
.mega__list > li:nth-child(3n) {
    border-left: 1px solid var(--mega-rule);
}

.mega__item {
    display: flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.375rem 1.5rem;
    border-radius: 2px;
    color: var(--md-on-surface);
    text-decoration: none;
    transition: scale var(--spring-quick) var(--ease-spring);
}

/* the link the pointer or the keyboard is on is underlined (2026-10-29: asked for, "the links when hover get underlined"),
   and keeps its colour: the page's links turn blue under the pointer, these only take the line */
.mega__item:hover {
    color: var(--md-on-surface);
}

.mega__item:hover .mega__name,
.mega__item:focus-visible .mega__name {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}

.mega__item:active {
    scale: var(--press-scale-card);
    transition-duration: var(--press-in);
}

.mega__item:focus-visible {
    outline: 2px solid var(--md-primary);
    outline-offset: -2px;
}

.mega__item[aria-current="page"] {
    color: var(--md-primary-ink);
}

/* the tile of an icon on its colour: the search's rows draw it (the menus' cards have no icons since 2026-10-29) */
.mega__tile {
    display: grid;
    flex: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: var(--accent-container);
    color: var(--accent);
}

.mega__tile .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.mega__name {
    min-width: 0;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* Navigation drawer (small windows)                                   */
/* ------------------------------------------------------------------ */

/* A sheet from the right (2026-10-26, after Apple's guidance): it comes in on the site's spring and goes back the
   way it came. With site.js it follows a finger dragged across it, one to one, resists being pulled further open,
   and when let go carries on at the finger's speed, to closed or back open, whichever the flick was heading for
   (--drawer-x is where it is, --drawer-shade how dark the page behind it is). Without the script, the native
   dialog: Esc, the close button and the shade close it. */
.drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(23rem, 88vw);
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 1.5rem 0 0 1.5rem;
    background: var(--md-surface-container-low);
    color: var(--md-on-surface);
    box-shadow: -1px 0 0 var(--frame-edge), -24px 0 48px -24px rgb(0 0 0 / 0.3);
    overflow-y: auto;
    overscroll-behavior: contain;
    translate: var(--drawer-x, 0) 0;
    touch-action: pan-y;
}

.drawer::backdrop {
    background: var(--md-scrim);
    opacity: var(--drawer-shade, 1);
}

.drawer[open]:not(.is-driven) {
    animation: drawer-in var(--spring) var(--ease-spring);
}

.drawer[open]:not(.is-driven)::backdrop {
    animation: drawer-shade 300ms var(--ease-standard);
}

@keyframes drawer-in {
    from {
        translate: 100% 0;
    }
}

@keyframes drawer-shade {
    from {
        opacity: 0;
    }
}

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--top-bar-h);
    padding: 0.5rem 0.75rem 0.5rem 1.5rem;
}

.drawer__section {
    padding: 0.5rem 0.75rem;
}

.drawer__label {
    padding: 0.75rem 1rem 0.25rem;
    color: var(--md-on-surface-variant);
}

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

.drawer__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    color: var(--md-on-surface-variant);
    text-decoration: none;
}

.drawer__link:hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
    color: var(--md-on-surface);
}

.drawer__link.is-active {
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
}

.drawer__link--sub {
    min-height: 2.75rem;
    padding-left: 1rem;
}

/* each menu a group that opens under its name; the one that holds the page open already */
.drawer__summary {
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
}

.drawer__summary::-webkit-details-marker {
    display: none;
}

.drawer__summary .icon {
    transition: rotate var(--dur-short) var(--ease-standard);
}

.drawer__group[open] > .drawer__summary .icon {
    rotate: 180deg;
}

.drawer__summary.is-current {
    color: var(--md-primary-ink);
}

.drawer__group > .drawer__list {
    padding-bottom: 0.5rem;
}

.drawer__tile {
    display: grid;
    flex: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: var(--accent-container);
    color: var(--accent);
}

.drawer__tile .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.drawer__link--all {
    gap: 0.375rem;
    color: var(--md-primary-ink);
}

.drawer__link--all .icon {
    width: 1rem;
    height: 1rem;
}

.drawer__divider {
    height: 1px;
    margin: 0.5rem 1rem;
    background: var(--md-outline-variant);
}

.drawer__footer {
    padding: 1rem 1.5rem 1.5rem;
    display: grid;
    gap: 0.75rem;
}

/* ------------------------------------------------------------------ */
/* Search (2026-10-26)                                                  */
/* ------------------------------------------------------------------ */

/* The search, as the designs' top bar has it: a card of the menus' thick material near the top of the window, the
   page dimmed and a little blurred behind it, as a task of its own. It comes in from a little smaller and higher on
   the spring and goes back the same way. What the visitor types narrows every page the menus lead to; without
   anything typed, they are listed under their menus. site.js shows its button and fills it. */
.search {
    position: fixed;
    inset: 0;
    width: min(40rem, calc(100% - 2rem));
    max-width: none;
    height: fit-content;
    max-height: min(38rem, calc(100dvh - 6rem));
    margin: clamp(4.25rem, 11vh, 7.5rem) auto auto;
    padding: 0;
    border: 1px solid var(--mega-edge);
    border-radius: 1.5rem;
    background: var(--mega-panel);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    box-shadow: var(--search-shadow);
    color: var(--md-on-surface);
    overflow: hidden;
    opacity: 0;
    scale: 0.96;
    translate: 0 -0.75rem;
    transition: opacity 200ms var(--ease-standard), scale var(--spring) var(--ease-spring),
        translate var(--spring) var(--ease-spring), display 260ms allow-discrete, overlay 260ms allow-discrete;
}

.search[open] {
    display: flex;
    flex-direction: column;
    opacity: 1;
    scale: 1;
    translate: 0 0;
}

@starting-style {
    .search[open] {
        opacity: 0;
        scale: 0.96;
        translate: 0 -0.75rem;
    }
}

.search::backdrop {
    background: var(--search-scrim);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 260ms var(--ease-standard), display 260ms allow-discrete, overlay 260ms allow-discrete;
}

.search[open]::backdrop {
    opacity: 1;
}

@starting-style {
    .search[open]::backdrop {
        opacity: 0;
    }
}

.search__field {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.75rem;
    padding: 0 0.5rem 0 1.25rem;
    border-bottom: 1px solid var(--mega-rule);
    transition: box-shadow 200ms var(--ease-standard);
}

.search__field:focus-within {
    box-shadow: inset 0 -2px 0 var(--md-primary);
}

.search__field > .icon {
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    color: var(--md-on-surface-variant);
}

.search__input {
    flex: 1;
    min-width: 0;
    height: 3.75rem;
    border: 0;
    background: transparent;
    color: var(--md-on-surface);
    appearance: none;
}

.search__input::placeholder {
    color: var(--md-on-surface-variant);
}

.search__input:focus-visible {
    outline: none;
}

.search__input::-webkit-search-cancel-button {
    appearance: none;
}

.search__close {
    flex: none;
}

.search__results {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0.375rem 0.5rem 0.75rem;
}

.search__group {
    padding: 0.875rem 0.75rem 0.375rem;
    color: var(--md-primary-ink);
}

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

.search__result {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    min-height: 3.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.875rem;
    color: var(--md-on-surface);
    text-decoration: none;
    transition: background-color 150ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.search__result:hover,
.search__result.is-active {
    background: var(--mega-item-hover);
    box-shadow: inset 0 0 0 1px var(--mega-item-hover-edge);
    color: var(--md-on-surface);
}

.search__result:active {
    scale: var(--press-scale-card);
    transition-duration: 150ms, var(--press-in);
}

.search__result .mega__tile {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
}

.search__result .mega__tile .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.search__words {
    display: grid;
    gap: 0.0625rem;
    min-width: 0;
}

.search__line {
    color: var(--md-on-surface-variant);
}

.search__result mark {
    background: none;
    color: var(--md-primary-ink);
}

.search__go {
    flex: none;
    margin-left: auto;
    color: var(--mega-chevron);
    opacity: 0;
    transition: opacity 150ms var(--ease-standard), translate var(--spring) var(--ease-spring);
}

.search__go .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.search__result:hover .search__go,
.search__result.is-active .search__go {
    opacity: 1;
    translate: 2px 0;
}

.search__empty {
    padding: 1.25rem 1.25rem 1.5rem;
    color: var(--md-on-surface);
    margin-bottom: 0;
}

@media (prefers-reduced-transparency: reduce) {
    .search {
        background: var(--frame-surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .search::backdrop {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

.hero {
    position: relative;
    padding-block: clamp(2.5rem, 1.5rem + 4vw, 6rem);
    overflow: hidden;
}

.hero__grid {
    display: grid;
    gap: var(--gap-max);
    align-items: center;
}

@media (min-width: 64rem) {
    .hero__grid {
        grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
        gap: var(--gap-max);
    }
}

.hero__content {
    max-width: 40rem;
}

.hero__title {
    margin-bottom: 1.25rem;
}

.hero__lead {
    margin-bottom: var(--gap-max);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.hero__note {
    margin-top: var(--gap-max);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    color: var(--md-on-surface-variant);
}

.hero__note span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.hero__note .icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--md-tertiary);
}

.hero__art {
    position: relative;
    margin-inline: auto;
    width: min(100%, 34rem);
}

.hero__art svg {
    width: 100%;
    height: auto;
}

/* The page hero: an eyebrow, a title and a line, on a tonal band */
.hero--page {
    background: var(--md-surface-container-low);
}

.hero--page .hero__content {
    max-width: 46rem;
}

.hero--accent {
    background: var(--accent-container, var(--md-primary-container));
    color: var(--accent-on, var(--md-on-primary-container));
}

.hero--accent .eyebrow,
.hero--accent .lead {
    color: inherit;
}

.hero--accent .lead {
    opacity: 0.9;
}

.hero--accent .eyebrow a {
    color: inherit;
}

.hero--accent .btn--filled {
    background: var(--accent-on);
    color: var(--accent-container);
}

.hero--accent .btn--filled:hover {
    background: var(--accent-on);
    color: var(--accent-container);
    filter: brightness(1.15);
}

.hero--accent .btn--outlined {
    border-color: color-mix(in srgb, var(--accent-on) 50%, transparent);
    color: var(--accent-on);
}

.hero--accent .btn--outlined:hover {
    background: color-mix(in srgb, var(--accent-on) 10%, transparent);
}

.hero--accent .icon-tile {
    background: var(--accent-on);
    color: var(--accent-container);
}

.hero__blob {
    position: absolute;
    right: -10%;
    top: -30%;
    width: 60%;
    aspect-ratio: 1;
    border-radius: var(--radius-full);
    background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent, var(--md-primary)) 22%, transparent), transparent 65%);
    pointer-events: none;
}

/* The hero illustration: a product in the site's own colours, which follow the theme */
.art__bg { fill: var(--md-surface-container); }
.art__surface { fill: var(--md-surface); }
.art__surface-2 { fill: var(--md-surface-container-low); }
.art__outline { stroke: var(--md-outline-variant); fill: none; }
.art__primary { fill: var(--md-primary); }
.art__primary-container { fill: var(--md-primary-container); }
.art__secondary-container { fill: var(--md-secondary-container); }
.art__tertiary { fill: var(--md-tertiary); }
.art__tertiary-container { fill: var(--md-tertiary-container); }
.art__amber { fill: var(--accent-amber-container); }
.art__text { fill: var(--md-on-surface); }
.art__text-variant { fill: var(--md-on-surface-variant); }
.art__muted { fill: var(--md-surface-container-highest); }
.art__line { stroke: var(--md-primary); fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.art__line-area { fill: var(--md-primary-container); opacity: 0.6; }
.art__shadow { fill: rgb(0 0 0 / 0.08); }
.art__white { fill: #fff; }

/* ------------------------------------------------------------------ */
/* Cards                                                               */
/* ------------------------------------------------------------------ */

.card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--radius-lg);
    background: var(--md-surface);
    color: var(--md-on-surface);
}

.card--filled {
    border-color: transparent;
    background: var(--md-surface-container-low);
}

.card--elevated {
    border-color: transparent;
    box-shadow: var(--shadow-1);
}

.card--link {
    text-decoration: none;
    transition: box-shadow var(--dur-short) var(--ease-standard), background-color var(--dur-short) var(--ease-standard),
        border-color var(--dur-short) var(--ease-standard);
}

.card--link:hover {
    color: var(--md-on-surface);
    box-shadow: var(--shadow-2);
    background: var(--md-surface-container-lowest);
    border-color: transparent;
}

.card--link:hover .card__action {
    gap: 0.625rem;
}

.card__text {
    color: var(--md-on-surface);
    text-wrap: pretty;
}

.card__action {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: auto;
    padding-top: 0.5rem;
    color: var(--md-primary);
    transition: gap var(--dur-short) var(--ease-standard);
}

.card__action .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.card__meta {
    color: var(--md-on-surface-variant);
}

.card--row {
    flex-direction: row;
    align-items: flex-start;
    gap: 1rem;
}

.card--row .card__body {
    display: grid;
    gap: 0.375rem;
}

/* ------------------------------------------------------------------ */
/* Lists                                                               */
/* ------------------------------------------------------------------ */

.check-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.75rem;
}

.check-list li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.check-list .icon {
    width: 1.375rem;
    height: 1.375rem;
    margin-top: 0.1rem;
    color: var(--md-tertiary);
}

.steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--gap-max);
    counter-reset: step;
}

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

@media (min-width: 64rem) {
    .steps--5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.step {
    counter-increment: step;
    display: grid;
    gap: 0.75rem;
    align-content: start;
}

.step::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background: var(--md-primary);
    color: var(--md-on-primary);
}

.step p {
    color: var(--md-on-surface);
}

/* ------------------------------------------------------------------ */
/* Chips                                                               */
/* ------------------------------------------------------------------ */

.chip-set {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2rem;
    padding: 0.25rem 0.875rem;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--radius-sm);
    color: var(--md-on-surface-variant);
    text-decoration: none;
    background: transparent;
}

a.chip:hover, button.chip:hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
    color: var(--md-on-surface);
}

.chip--selected {
    border-color: transparent;
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
}

.chip .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.chip__count {
    opacity: 0.8;
}

.chip--status-new {
    border-color: transparent;
    background: var(--md-primary-container);
    color: var(--md-on-primary-container);
}

.chip--status-progress {
    border-color: transparent;
    background: var(--accent-amber-container);
    color: var(--accent-amber-on);
}

.chip--status-closed {
    border-color: transparent;
    background: var(--md-tertiary-container);
    color: var(--md-on-tertiary-container);
}

.chip--status-spam {
    border-color: transparent;
    background: var(--md-error-container);
    color: var(--md-on-error-container);
}

/* ------------------------------------------------------------------ */
/* FAQ                                                                 */
/* ------------------------------------------------------------------ */

.faq {
    display: grid;
    gap: 0.5rem;
    max-width: 52rem;
}

.faq__item {
    border-radius: var(--radius-md);
    background: var(--md-surface-container-low);
}

.faq__item[open] {
    background: var(--md-surface-container);
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius-md);
}

.faq__question::-webkit-details-marker {
    display: none;
}

.faq__question .icon {
    color: var(--md-on-surface-variant);
    transition: transform var(--dur-short) var(--ease-standard);
}

.faq__item[open] .faq__question .icon {
    transform: rotate(180deg);
}

.faq__answer {
    padding: 0 1.25rem 1.25rem;
    color: var(--md-on-surface);
    max-width: 65ch;
}

/* ------------------------------------------------------------------ */
/* Call to action band                                                 */
/* ------------------------------------------------------------------ */

.cta-band {
    display: grid;
    gap: var(--gap-max);
    padding: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
    border-radius: var(--radius-xl);
    background: var(--md-primary);
    color: var(--md-on-primary);
}

@media (min-width: 64rem) {
    .cta-band {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}

.cta-band h2 {
    margin-bottom: 0.5rem;
    margin-top: 0;
}

.cta-band p {
    opacity: 0.92;
    max-width: 48rem;
    text-wrap: pretty;
    margin-bottom: 0;
}

.cta-band__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ------------------------------------------------------------------ */
/* Forms                                                               */
/* ------------------------------------------------------------------ */

.form {
    display: grid;
    gap: 1.25rem;
}

.form__row {
    display: grid;
    gap: 1.25rem;
}

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

.field {
    display: grid;
    gap: 0.375rem;
}

.field__optional {
    color: var(--md-on-surface-variant);
}

.field__control {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--md-outline);
    border-radius: var(--radius-sm);
    background: var(--md-surface);
    color: var(--md-on-surface);
    transition: border-color var(--dur-short) var(--ease-standard), box-shadow var(--dur-short) var(--ease-standard);
}

.field__control::placeholder {
    color: var(--md-outline);
}

.field__control:hover {
    border-color: var(--md-on-surface);
}

.field__control:focus {
    outline: none;
    border-color: var(--md-primary);
    box-shadow: inset 0 0 0 1px var(--md-primary);
}

.field__control:focus-visible {
    outline: none;
}

textarea.field__control {
    min-height: 9rem;
    resize: vertical;
}

select.field__control {
    appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23747775'%3E%3Cpath d='M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    background-size: 1.5rem;
}

.field--invalid .field__control {
    border-color: var(--md-error);
    box-shadow: inset 0 0 0 1px var(--md-error);
}

.field__hint {
    color: var(--md-on-surface-variant);
    margin-bottom: 0;
}

.field__error {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--md-error);
    margin-bottom: 0;
}

.field__error .icon {
    width: 1rem;
    height: 1rem;
}

.form__alert {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    background: var(--md-error-container);
    color: var(--md-on-error-container);
}

.form__alert .icon {
    flex: none;
    margin-top: 0.125rem;
}

.form__alert strong {
    display: block;
    margin-bottom: 0.25rem;
}

.form__alert ul {
    padding-left: 1.25rem;
    margin-top: 0.25rem;
}

.form__alert a {
    color: inherit;
}

.form__notice {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-md);
    background: var(--md-tertiary-container);
    color: var(--md-on-tertiary-container);
}

.form__notice .icon {
    flex: none;
}

.form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.form__note {
    color: var(--md-on-surface-variant);
    max-width: 48rem;
}

/* The honeypot: a field no person sees, kept out of the tab order and out of sight */
.hp {
    position: absolute;
    left: -200vw;
    top: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Contact page                                                        */
/* ------------------------------------------------------------------ */

/* The contact page, as its design draws it (2026-10-24), scaled so that its two columns fill the site's
   column (0.923 of the design's pixels): the heading in the middle of a pale blue with faint circles and a
   grid of dots, the form in a white card, and beside it two tinted cards, the other ways to reach us and
   what happens next. No label over the heading (2026-10-24). Its type is typography.md's roles (the Type roles
   block): what is typed in the form 16px, the labels 14px, the hints small. */
/* over the footer after it, so that the form's list can open over it */
.contact-page {
    position: relative;
    z-index: 1;
    isolation: isolate;
    padding-block: 2rem 4rem;
    background: var(--contact-bg);
}

/* the faint circles behind it */
.contact-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(circle at 10% 26rem, var(--contact-circle) 25rem, transparent calc(25rem + 1px)),
        radial-gradient(circle at 94% 9rem, var(--contact-circle) 16rem, transparent calc(16rem + 1px)),
        radial-gradient(circle at 104% 44rem, var(--contact-circle) 18rem, transparent calc(18rem + 1px));
    pointer-events: none;
}

/* the grid of dots at the top right, five across and four down, where the heading leaves room for it */
@media (min-width: 64rem) {
    .contact-page::after {
        content: "";
        position: absolute;
        top: 2.25rem;
        right: max(1rem, 6%);
        z-index: -1;
        width: 6.6rem;
        height: 4.5rem;
        background: radial-gradient(circle, var(--contact-dot) 2px, transparent 2.5px) 0 0 / 1.65rem 1.4rem;
        pointer-events: none;
    }
}

/* the heading and its lead at the start of the column, centred only where the lead is one line (typography.md 4:
   no centred paragraph of three lines) */
.contact-page__head {
    text-align: start;
}

@media (min-width: 64rem) {
    .contact-page__head {
        text-align: center;
    }
}

.contact-page__title {
    color: var(--contact-ink);
    margin-bottom: 0;
    margin-top: 0;
}

.contact-page__lead {
    max-width: 44rem;
    margin: 0.45rem 0 0;
    color: var(--contact-text);
}

@media (min-width: 64rem) {
    .contact-page__lead {
        margin-inline: auto;
    }
}

/* one column that may shrink to the window: what is in it (the choice's field, the browser's file field) never
   pushes the page out sideways on a narrow phone */
.contact-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    margin-top: var(--gap-max);
}

@media (min-width: 64rem) {
    .contact-page__grid {
        grid-template-columns: minmax(0, 807fr) minmax(0, 484fr);
        column-gap: var(--gap-max);
    }
}

.contact-form,
.contact-page__card {
    padding: 1.55rem 1.95rem 1.95rem;
    border-radius: 1rem;
    background: var(--contact-card);
    box-shadow: var(--contact-card-shadow);
}

.contact-page__card {
    padding: 1.5rem 1.8rem 1.6rem;
    background: var(--contact-card-tint);
}

.contact-page__aside {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* on a phone the cards keep less of the width for their margins */
@media (max-width: 39.99rem) {
    .contact-form,
    .contact-page__card {
        padding-inline: 1.25rem;
    }
}

/* the second card reaches down to the form's foot */
.contact-page__card--next {
    flex: 1;
    padding-top: 1.3rem;
    padding-bottom: 0.9rem;
}

.contact-page__card-title {
    color: var(--contact-ink);
    margin-bottom: 0;
    margin-top: 0;
}

.contact-page__card-intro {
    margin-top: 0.25rem;
    color: var(--contact-text);
    margin-bottom: 0;
}

/* the form: its fields with an icon at their start */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.0625rem;
}

.contact-form > .contact-page__card-intro {
    margin-top: -0.8125rem;
    margin-bottom: 0;
}

.contact-form > .form__alert {
    margin-top: 0.25rem;
}

.contact-form__row {
    display: grid;
    gap: 1.0625rem;
}

@media (min-width: 40rem) {
    .contact-form__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--gap-max);
    }
}

/* a field keeps its label, box and hint at the top when the field beside it is taller */
.contact-form .field {
    align-content: start;
    gap: 0.5rem;
}

.contact-form .field__label {
    color: var(--contact-label);
}

.contact-form .field__optional {
    color: var(--contact-optional);
}

.field__box {
    position: relative;
}

.field__box > .icon {
    position: absolute;
    top: 50%;
    left: 0.875rem;
    width: 1.25rem;
    height: 1.25rem;
    transform: translateY(-50%);
    color: var(--contact-field-icon);
    pointer-events: none;
}

.field__box--text > .icon {
    top: 0.7rem;
    transform: none;
}

.contact-form .field__control {
    min-height: 2.6rem;
    padding: 0.5rem 1rem 0.5rem 2.95rem;
    border-color: var(--contact-field-border);
    border-radius: 0.45rem;
    background-color: var(--contact-card);
    color: var(--contact-ink);
}

.contact-form .field__control::placeholder {
    color: var(--contact-placeholder);
    opacity: 1;
}

.contact-form .field__control:hover {
    border-color: var(--contact-field-icon);
}

.contact-form .field__control:focus {
    border-color: var(--contact-accent);
    box-shadow: inset 0 0 0 1px var(--contact-accent);
}

/* a block, so that no line's descent is left under it; twice as high as it was (2026-10-26: asked for) */
.contact-form textarea.field__control {
    display: block;
    height: 13.2rem;
    min-height: 8rem;
    padding-top: 0.6rem;
}

.contact-form select.field__control {
    padding-right: 2.75rem;
    background-position: right 0.875rem center;
    background-size: 1.25rem;
}

.contact-form .field--invalid .field__control {
    border-color: var(--md-error);
    box-shadow: inset 0 0 0 1px var(--md-error);
}

.contact-form .field__hint {
    margin-top: -0.0625rem;
    color: var(--contact-muted);
}

/* The message (2026-10-26: asked for twice as high, with lists, links and the like, and the documents' paperclip
   among them). Without the script it is the textarea, as the other fields are boxes. With it (data-rich-ready), a
   frame round a bar of marks (bold, a bulleted and a numbered list, a link) and the paperclip, the box that is
   written in (.rich__editor, its words written back into the textarea in plain text with light marks), and at its
   foot the documents chosen, their rules and what is wrong with them, moved there from the field under it. A file
   dropped on the frame is attached. No italic and no underline: typography.md has neither. */
.rich[data-rich-ready] .rich__frame {
    display: grid;
    border: 1px solid var(--contact-field-border);
    border-radius: 0.45rem;
    background: var(--contact-card);
    container-type: inline-size;
    transition: border-color var(--dur-short) var(--ease-standard), box-shadow var(--dur-short) var(--ease-standard),
        background-color var(--dur-short) var(--ease-standard);
}

.rich[data-rich-ready] .rich__frame:hover {
    border-color: var(--contact-field-icon);
}

.rich[data-rich-ready] .rich__frame:focus-within,
.rich__frame.is-dragging {
    border-color: var(--contact-accent);
    box-shadow: inset 0 0 0 1px var(--contact-accent);
}

.rich__frame.is-dragging {
    background: var(--contact-files-hover);
}

.contact-form .rich.field--invalid[data-rich-ready] .rich__frame {
    border-color: var(--md-error);
    box-shadow: inset 0 0 0 1px var(--md-error);
}

.rich__frame [hidden] {
    display: none;
}

/* the bar: the marks, then after a rule the paperclip; it wraps on the narrowest phones */
.rich__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem;
    padding: 0.25rem;
    border-bottom: 1px solid var(--contact-field-border);
    border-radius: calc(0.45rem - 1px) calc(0.45rem - 1px) 0 0;
    background: var(--contact-toolbar);
}

/* each a target of 44px */
.rich__tool {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.625rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--contact-field-icon);
    cursor: pointer;
    transition: background-color var(--dur-short) var(--ease-standard), color var(--dur-short) var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.rich__tool .icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}

.rich__tool:hover {
    background: var(--contact-disc);
    color: var(--contact-ink);
}

.rich__tool[aria-pressed="true"],
.rich__tool[aria-expanded="true"],
.rich__tool.is-on {
    background: var(--contact-disc);
    color: var(--contact-accent);
}

.rich__tool:focus-visible {
    outline: 2px solid var(--contact-accent);
    outline-offset: -2px;
}

/* the paperclip says what it does, but where the frame is too narrow for its word */
.rich__tool--attach {
    color: var(--contact-muted);
}

.rich__divider {
    flex: none;
    width: 1px;
    height: 1.5rem;
    margin-inline: 0.25rem;
    background: var(--contact-field-border);
}

@container (max-width: 19rem) {
    .rich__tool--attach > span {
        display: none;
    }

    /* the five in one row at 320 wide */
    .rich__divider {
        margin-inline: 0.125rem;
    }
}

/* a link's address, asked for under the bar */
.rich__link {
    display: grid;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem 0.75rem;
    border-bottom: 1px solid var(--contact-field-border);
    background: var(--contact-toolbar);
}

.rich__link .field__label {
    color: var(--contact-label);
}

.rich__link-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.rich__link-input {
    flex: 1 1 12rem;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--contact-field-border);
    border-radius: 0.375rem;
    background: var(--contact-card);
    color: var(--contact-ink);
}

.rich__link-input::placeholder {
    color: var(--contact-placeholder);
    opacity: 1;
}

.rich__link-input:focus {
    outline: none;
    border-color: var(--contact-accent);
    box-shadow: inset 0 0 0 1px var(--contact-accent);
}

.rich__link-button {
    flex: none;
    min-height: 2.75rem;
    padding: 0 1.1rem;
    border: 0;
    border-radius: 0.625rem;
    background: var(--contact-button);
    color: var(--contact-button-ink);
    cursor: pointer;
    transition: background-color var(--dur-short) var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.rich__link-button:hover {
    background: var(--contact-button-hover);
}

.rich__link-button--quiet {
    background: transparent;
    color: var(--contact-link);
}

.rich__link-button--quiet:hover {
    background: var(--contact-disc);
}

.rich__link-close {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--contact-field-icon);
    cursor: pointer;
    transition: background-color var(--dur-short) var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.rich__link-close .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.rich__link-close:hover {
    background: var(--contact-disc);
    color: var(--contact-ink);
}

.rich__link-button:focus-visible,
.rich__link-close:focus-visible {
    outline: 2px solid var(--contact-accent);
    outline-offset: 2px;
}

.rich__link .field__error {
    margin: 0;
}

/* the box written in: as high as the textarea it stands for, growing with its words to twice that, then
   scrolling; a line is a block of its own, close to the next, as in the textarea */
.rich__editor {
    position: relative;
    min-height: 13.2rem;
    max-height: 26.4rem;
    overflow-y: auto;
    padding: 0.6rem 1rem 0.75rem;
    color: var(--contact-ink);
    overflow-wrap: anywhere;
    outline: none;
}

.rich__editor p,
.rich__editor ul,
.rich__editor ol {
    max-width: none;
    margin: 0;
}

.rich__editor ul,
.rich__editor ol {
    padding-left: 1.5rem;
}

.rich__editor ul {
    list-style: disc;
}

.rich__editor ol {
    list-style: decimal;
}

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

/* what to write, while nothing is */
.rich__editor.is-empty::before {
    content: attr(data-placeholder);
    position: absolute;
    top: 0.6rem;
    left: 1rem;
    right: 1rem;
    color: var(--contact-placeholder);
    pointer-events: none;
}

/* the foot: the documents chosen and what is said of them, drawn only once there is one (its live region, unseen,
   is always there) */
.rich__foot {
    display: grid;
    gap: 0.5rem;
}

.rich__foot:has(> :not([hidden], .visually-hidden)) {
    padding: 0.625rem 0.75rem 0.75rem;
    border-top: 1px solid var(--contact-field-border);
}

.rich__foot .field__hint,
.rich__foot .field__error {
    margin: 0;
}

/* how much is left, once little is (the form takes 4,000 characters) */
.rich__count {
    margin: 0;
    color: var(--contact-muted);
}

.rich__count.is-over {
    color: var(--md-error);
}

/* the documents' own field, its box gone to the paperclip and its list to the message's foot */
.contact-files[data-files-attach] {
    display: none;
}

/* the documents sent with the message (2026-10-25): without the script, the browser's own file field in a dashed
   box; with it, the box is what is seen, the field laid over it unseen (a click opens it, a file dropped on it lands
   in it), and the chosen files are listed under it, each with its size and a button to take it off */
.contact-files__drop {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    min-height: 3.25rem;
    padding: 0.6rem 1rem 0.6rem 0.875rem;
    border: 1.5px dashed var(--contact-field-border);
    border-radius: 0.45rem;
    background: var(--contact-card);
    color: var(--contact-text);
    transition: border-color var(--dur-short) var(--ease-standard), background-color var(--dur-short) var(--ease-standard);
}

.contact-files__drop > .icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--contact-field-icon);
}

.contact-files__input {
    max-width: 100%;
    color: var(--contact-text);
}

.contact-files__prompt {
    display: none;
}

.contact-files__prompt strong {
    color: var(--contact-link);
}

[data-files-ready] .contact-files__prompt {
    display: inline;
}

[data-files-ready] .contact-files__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

[data-files-ready] .contact-files__drop:hover,
.contact-files.is-dragging .contact-files__drop {
    border-color: var(--contact-accent);
    background: var(--contact-files-hover);
}

.contact-files__drop:has(.contact-files__input:focus-visible) {
    border-color: var(--contact-accent);
    outline: 2px solid var(--contact-accent);
    outline-offset: 2px;
}

.contact-form .field--invalid .contact-files__drop,
.contact-files--wrong .contact-files__drop {
    border-color: var(--md-error);
}

.contact-files__list {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-files [hidden] {
    display: none;
}

.contact-files__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding-left: 0.875rem;
    border: 1px solid var(--contact-field-border);
    border-radius: 0.45rem;
    background: var(--contact-card);
    color: var(--contact-ink);
}

.contact-files__item > .icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--contact-accent);
}

/* a long name wraps rather than being cut off (typography.md 4: no truncation without the whole text elsewhere) */
.contact-files__name {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.contact-files__size {
    flex: none;
    color: var(--contact-muted);
}

/* a target of 44px, the cross drawn smaller inside it */
.contact-files__remove {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 0;
    border-radius: 0.45rem;
    background: transparent;
    color: var(--contact-field-icon);
    cursor: pointer;
}

.contact-files__remove .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.contact-files__remove:hover {
    background: var(--contact-disc);
    color: var(--contact-ink);
}

.contact-files__remove:focus-visible {
    outline: 2px solid var(--contact-accent);
    outline-offset: -2px;
}

.contact-files__again {
    color: var(--contact-ink);
}

.contact-form__actions {
    display: grid;
    justify-items: start;
    gap: 0.625rem;
    margin-top: 0.125rem;
}

.contact-form__send {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 2.75rem;
    padding: 0 1.6rem 0 1.75rem;
    border: 0;
    border-radius: 0.875rem;
    background: var(--contact-button);
    color: var(--contact-button-ink);
    cursor: pointer;
    transition: background-color var(--dur-short) var(--ease-standard), box-shadow var(--dur-short) var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.contact-form__send .icon {
    width: 1.25rem;
    height: 1.25rem;
}

@media (hover: hover) {
    .contact-form__send:hover {
        background: var(--contact-button-hover);
        box-shadow: var(--shadow-1);
    }
}

.contact-form__send:focus-visible {
    outline: 3px solid var(--contact-accent);
    outline-offset: 3px;
}

.contact-form__note {
    color: var(--contact-muted);
    margin-bottom: 0;
}

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

/* The form's choice, as its design draws it (2026-10-24): the question, a label like the form's others, with a
   red asterisk and a line beside it, a field with a grid icon, and, opened, a list under it with a search, the choices in three groups,
   each with a coloured icon on a tile, its name and a chevron. Where the list is wide enough the industries and
   the technology services are two columns side by side, "not sure yet" under them (2026-10-24: asked for, and
   the lines under the names left out). What is typed in the closed field is 16px, as in the form's other
   fields. Without a script the field is a select with the same choices,
   in the same groups (site.js draws the list and keeps the select's value). */
.field__required {
    color: var(--solution-required);
}

.contact-form .solution-field__label {
    color: var(--contact-ink);
}

.contact-form .solution-field__hint {
    margin: -0.35rem 0 0.35rem;
    color: var(--solution-hint);
}

.solution-field__native .field__control,
.solution-picker__button {
    min-height: 3.2rem;
    border: 1px solid var(--solution-border);
    border-radius: 0.625rem;
    background-color: var(--solution-field);
    box-shadow: var(--solution-field-shadow);
}

.contact-form .solution-field__native .field__control {
    padding: 0 3.25rem 0 4rem;
    border-radius: 0.625rem;
    background-position: right 1.35rem center;
}

.solution-field__native > .icon {
    left: 1.4rem;
    width: 1.2rem;
    height: 1.2rem;
    color: var(--solution-icon);
}

.solution-picker {
    position: relative;
}

.solution-picker__button {
    display: flex;
    align-items: center;
    gap: var(--gap-max);
    width: 100%;
    padding: 0.5rem 1.35rem 0.5rem 1.4rem;
    color: var(--solution-placeholder);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--dur-short) var(--ease-standard), box-shadow var(--dur-short) var(--ease-standard);
}

.solution-picker__button:hover {
    border-color: var(--solution-icon);
}

/* on a narrow phone the field's gaps close up, so that "Select a solution area" keeps its last letters */
@media (max-width: 23.99rem) {
    .solution-picker__button {
        gap: 0.75rem;
        padding-inline: 0.875rem 0.75rem;
    }
}

.solution-picker__lead {
    display: grid;
    flex: none;
    place-items: center;
    min-width: 1.2rem;
}

.solution-picker__lead > .icon {
    width: 1.2rem;
    height: 1.2rem;
    color: var(--solution-icon);
}

/* the choice's whole name, on two lines where a phone has no room for one */
.solution-picker__value {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.solution-picker__button > .icon {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    color: var(--solution-chevron);
    transition: rotate var(--dur-medium) var(--ease-emphasized);
}

/* open, or with the focus: a blue border twice as thick, with a soft glow */
.solution-picker.is-open .solution-picker__button,
.solution-picker__button:focus-visible {
    outline: none;
    border-color: var(--solution-focus);
    box-shadow: 0 0 0 1px var(--solution-focus), 0 0 0 4px var(--solution-focus-glow);
}

.solution-picker.is-open .solution-picker__button > .icon {
    rotate: 180deg;
}

/* chosen: the choice's own tile and its name in place of the grid and the prompt */
.solution-picker.has-value .solution-picker__value {
    color: var(--solution-title);
}

.solution-picker.has-value .solution-picker__button {
    gap: 1rem;
    padding-left: 0.6rem;
}

.solution-picker__lead .solution-option__tile {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
}

.solution-picker__lead .solution-option__tile .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.contact-form .field--invalid .solution-picker__button {
    border-color: var(--md-error);
    box-shadow: inset 0 0 0 1px var(--md-error);
}

/* the list, under the field and over what follows */
.solution-picker__panel {
    position: absolute;
    top: calc(100% + 0.375rem);
    right: 0;
    left: 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    padding: 0.375rem 0 0.8rem;
    border: 1px solid var(--solution-panel-border);
    border-radius: 0.75rem;
    background: var(--solution-panel);
    box-shadow: var(--solution-panel-shadow);
    container-type: inline-size;
}

.solution-picker__panel[hidden],
.solution-picker__empty[hidden],
.solution-picker__group[hidden],
.solution-option[hidden] {
    display: none;
}

.solution-picker__search {
    position: relative;
    margin: 0 1.45rem 0 1.5rem;
}

.solution-picker__search > .icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    width: 1.25rem;
    height: 1.25rem;
    translate: 0 -50%;
    color: var(--solution-search-icon);
    pointer-events: none;
}

.solution-picker__input {
    width: 100%;
    height: 2.6875rem;
    padding: 0 1rem 0 3.45rem;
    border: 1px solid var(--solution-search-border);
    border-radius: 0.5rem;
    background: var(--solution-search);
    color: var(--solution-title);
}

.solution-picker__input::placeholder {
    color: var(--solution-search-placeholder);
    opacity: 1;
}

/* the field above is already drawn blue while the list is open: the search, which has the focus then, shows
   it by a darker edge */
.solution-picker__input:focus {
    outline: none;
    border-color: var(--solution-search-focus);
}

/* every choice in a window tall enough for them all; in a shorter one the list scrolls under the search */
.solution-picker__list {
    max-height: min(52rem, 100vh - var(--top-bar-h) - 13rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.solution-picker__group:first-child {
    padding-top: 1.28rem;
}

/* a thin rule between the groups */
.solution-picker__group + .solution-picker__group::before {
    content: "";
    display: block;
    height: 1px;
    margin: 1rem 1.5rem 1.03rem;
    background: var(--solution-divider);
}

.solution-picker__heading {
    margin: 0 1.5rem 0.55rem;
    color: var(--solution-heading);
}

.solution-option {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) 1rem;
    column-gap: 1rem;
    align-items: center;
    min-height: 3rem;
    margin: 0 0.625rem 0.25rem;
    padding: 0.25rem 1rem 0.25rem 0.5rem;
    border-radius: 0.625rem;
    cursor: pointer;
}

.solution-option:last-child {
    margin-bottom: 0;
}

.solution-option__tile {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: var(--tone-tile);
    color: var(--tone-icon);
}

.solution-option__tile .icon {
    width: 1.5rem;
    height: 1.5rem;
}

.solution-option__text strong {
    display: block;
    color: var(--solution-title);
}

.solution-option > .icon {
    width: 1rem;
    height: 1rem;
    color: var(--solution-row-chevron);
}

/* the choice the keys or the pointer are on: a pale blue, its name and chevron blue */
.solution-option.is-active {
    background: var(--solution-active);
}

.solution-option.is-active strong,
.solution-option[aria-selected="true"] strong {
    color: var(--solution-active-title);
}

.solution-option.is-active > .icon {
    color: var(--solution-active-chevron);
}

.solution-picker__empty {
    margin: 1.25rem 1.5rem 0.25rem;
    color: var(--solution-desc);
}

.solution-tone--blue {
    --tone-tile: var(--solution-blue-tile);
    --tone-icon: var(--solution-blue);
}

.solution-tone--mint {
    --tone-tile: var(--solution-mint-tile);
    --tone-icon: var(--solution-mint);
}

.solution-tone--purple {
    --tone-tile: var(--solution-purple-tile);
    --tone-icon: var(--solution-purple);
}

.solution-tone--amber {
    --tone-tile: var(--solution-amber-tile);
    --tone-icon: var(--solution-amber);
}

.solution-tone--red {
    --tone-tile: var(--solution-red-tile);
    --tone-icon: var(--solution-red);
}

.solution-tone--slate {
    --tone-tile: var(--solution-slate-tile);
    --tone-icon: var(--solution-slate);
}

/* on a phone the rows keep more of the width for their words */
@media (max-width: 39.99rem) {
    .solution-picker__search {
        margin-inline: 0.75rem;
    }

    .solution-picker__heading {
        margin-inline: 0.875rem;
    }

    .solution-option {
        column-gap: 0.875rem;
        margin-inline: 0.375rem;
        padding-inline: 0.5rem 0.625rem;
    }
}

/* where the list is wide enough for its names on a line (or two): two columns, a thin upright rule between
   them, the industries and under them the platforms for developers in the first, the technology services down
   the second, and "not sure yet" under both after a rule, in the first column; no chevrons, which would take
   the names' room. Every row is as high as a name on two lines (3rem), so that the columns' rows stay level.
   Up and down go through the choices in the list's order: the industries, the technology services, the
   platforms, then "not sure yet". */
@container (min-width: 37rem) {
    .solution-picker__list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .solution-option {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        column-gap: 0.875rem;
        margin-inline: 0.5rem;
        padding-inline: 0.5rem;
    }

    .solution-option > .icon {
        display: none;
    }

    .solution-picker__group:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    /* as tall as the first column, so that the rule beside it runs the whole way down */
    .solution-picker__group:nth-child(2) {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: stretch;
        padding-top: 1.28rem;
    }

    .solution-picker__group:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
    }

    /* a search that leaves no industry: the platforms rise to the top of their column */
    .solution-picker__group:nth-child(1)[hidden] ~ .solution-picker__group:nth-child(3) {
        grid-row: 1;
        padding-top: 1.28rem;
    }

    .solution-picker__group:nth-child(2)::before,
    .solution-picker__group:nth-child(1)[hidden] ~ .solution-picker__group:nth-child(3)::before {
        content: none;
    }

    /* the rule only while there is a first column to its left (a search can leave the second alone) */
    .solution-picker__list:has(> .solution-picker__group:nth-child(odd):not(:last-child):not([hidden]))
            > .solution-picker__group:nth-child(2) {
        border-left: 1px solid var(--solution-divider);
    }

    .solution-picker__group:last-child:not([hidden]) {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
        grid-row: 3;
    }

    .solution-picker__group:last-child::before,
    .solution-picker__group:last-child .solution-picker__heading {
        grid-column: 1 / -1;
    }

    .solution-picker__group:last-child::before {
        margin-top: 0.75rem;
    }
}

/* the other ways to reach us, each icon in a pale circle */
.contact-ways {
    display: grid;
    gap: var(--gap-max);
    margin-top: var(--gap-max);
    padding: 0;
    list-style: none;
}

.contact-ways li {
    display: flex;
    align-items: center;
    gap: 1.1rem;
}

.contact-ways__badge {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.875rem;
    height: 2.875rem;
    border-radius: 50%;
    background: var(--contact-disc);
    box-shadow: 0 0 0.375rem var(--contact-disc);
    color: var(--contact-accent);
}

/* each icon at the size the design draws it */
.contact-ways__badge .icon {
    width: 1.4rem;
    height: 1.4rem;
}

.contact-ways__badge--mail .icon {
    width: 1.45rem;
    height: 1.45rem;
}

.contact-ways__badge--location .icon {
    width: 1.6rem;
    height: 1.6rem;
}

.contact-ways__badge--clock .icon {
    width: 1.5rem;
    height: 1.5rem;
}

.contact-ways strong {
    display: block;
    color: var(--contact-ink);
}

.contact-ways div > span,
.contact-ways div > a {
    display: block;
    margin-top: 0.25rem;
    color: var(--contact-muted);
}

.contact-ways div > a {
    color: var(--contact-link);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* what happens next: numbered circles joined by a line */
.contact-next {
    display: grid;
    gap: 1.0625rem;
    margin-top: 0.875rem;
    padding: 0;
    list-style: none;
}

.contact-next li {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--gap-max);
}

.contact-next li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 2.06rem;
    bottom: -1.0625rem;
    left: calc(1.03rem - 1px);
    width: 2px;
    background: var(--contact-step-line);
}

.contact-next__number {
    position: relative;
    display: grid;
    flex: none;
    place-items: center;
    width: 2.06rem;
    height: 2.06rem;
    border-radius: 50%;
    background: var(--contact-accent);
    box-shadow: var(--contact-number-glow);
    color: var(--contact-button-ink);
}

.contact-next h3 {
    color: var(--contact-ink);
    margin-bottom: 0;
    margin-top: 0;
}

.contact-next p {
    margin-top: 0.1875rem;
    color: var(--contact-muted);
    margin-bottom: 0;
}

/* On a desktop the page was one screen (2026-10-25: asked for); with typography.md's sizes (2026-10-26: the
   heading 56px, the fields 16px, the cards' titles 20px) it is a little more than one, and the heading has its room
   again. The lead on one line, the fields closer, each hint on its label's line, the send button with its note
   beside it. */
@media (min-width: 64rem) {
    .contact-page {
        padding-block: 2.25rem 2.5rem;
    }

    .contact-page__lead {
        max-width: 62rem;
        margin-top: 0.75rem;
    }

    .contact-page__grid {
        margin-top: var(--gap-max);
    }

    .contact-form,
    .contact-page__card {
        padding: 1rem 1.6rem 1.1rem;
    }

    .contact-page__card-intro {
        margin-top: 0.1rem;
    }

    .contact-form {
        gap: 0.7rem;
    }

    .contact-form > .contact-page__card-intro {
        margin-top: -0.6rem;
        margin-bottom: 0;
    }

    .contact-form__row {
        gap: 0.7rem;
    }

    .contact-form .field {
        gap: 0.3rem;
    }

    .contact-form .field__control {
        min-height: 2.5rem;
        padding-block: 0.4rem;
    }

    .contact-form textarea.field__control {
        height: 8.8rem;
    }

    .rich__editor {
        min-height: 8.8rem;
        max-height: 17.6rem;
    }

    /* a field's hint on its label's line, after it; what else the field has under its box */
    .contact-form .field:has(> .field__hint[id]) {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 0.75rem;
    }

    .contact-form .field:has(> .field__hint[id]) > * {
        grid-column: 1 / -1;
    }

    .contact-form .field:has(> .field__hint[id]) > .field__label {
        grid-area: 1 / 1;
        align-self: baseline;
    }

    .contact-form .field:has(> .field__hint[id]) > .field__hint[id] {
        grid-area: 1 / 2;
        align-self: baseline;
        margin: 0;
    }

    .solution-field__native .field__control,
    .solution-picker__button {
        min-height: 2.75rem;
    }

    .contact-files__drop {
        min-height: 2.6rem;
        padding-block: 0.35rem;
    }

    .contact-form__actions {
        display: flex;
        align-items: center;
        gap: 1.25rem;
        margin-top: 0.1rem;
    }

    .contact-form__send {
        flex: none;
        white-space: nowrap;
    }

    .contact-page__aside {
        gap: 0.9rem;
    }

    .contact-page__card--next {
        padding-bottom: 0.8rem;
    }

    .contact-ways {
        gap: 0.75rem;
        margin-top: 0.75rem;
    }

    .contact-ways__badge {
        width: 2.5rem;
        height: 2.5rem;
    }

    .contact-ways div > span,
    .contact-ways div > a {
        margin-top: 0.05rem;
    }

    .contact-next {
        gap: 0.6rem;
        margin-top: 0.65rem;
    }

    .contact-next li:not(:last-child)::before {
        bottom: -0.6rem;
    }

    .contact-next p {
        margin-top: 0.05rem;
    }
}

/* a desktop window less high (a 1280 by 800 screen, or 1536 by 864 with a bookmarks bar): a little less space
   between the fields, and the message box four lines high */
@media (min-width: 64rem) and (max-height: 45.4rem) {
    .contact-page__grid {
        margin-top: var(--gap-max);
    }

    .contact-form,
    .contact-page__card {
        padding-block: 0.85rem 0.95rem;
    }

    .contact-form textarea.field__control {
        height: 6.8rem;
    }

    .rich__editor {
        min-height: 6.8rem;
        max-height: 13.6rem;
    }

    .contact-ways,
    .contact-next {
        margin-top: 0.6rem;
    }
}

/* lower still (a 1366 by 768 laptop): the fields closer and a little lower, and the cards' first sentences, which
   the heading's lead already says, left out */
@media (min-width: 64rem) and (max-height: 43rem) {
    .contact-form > .contact-page__card-intro,
    .contact-page__aside .contact-page__card-intro {
        display: none;
    }

    .contact-form,
    .contact-form__row {
        gap: 0.5rem;
    }

    .contact-form .field__control {
        min-height: 2.375rem;
    }

    .solution-field__native .field__control,
    .solution-picker__button {
        min-height: 2.5rem;
    }

    .contact-files__drop {
        min-height: 2.4rem;
    }

    .contact-form__send {
        min-height: 2.5rem;
    }
}

/* ------------------------------------------------------------------ */
/* Services page: a service drawn to its own design                    */
/* ------------------------------------------------------------------ */

/* An overview that does not open on a row with a heading of its own (services, developers): its name, what it
   holds and a line (its menu's words), set as the mortgage platform's row on the products page sets its
   heading (2026-10-25) */
.svc-intro {
    padding-block: var(--gap-max) 0;
}

.svc-intro__eyebrow {
    margin-bottom: 0.9rem;
    color: var(--svc-show-eyebrow);
}

.svc-intro__title {
    max-width: 44rem;
    color: var(--svc-show-ink);
    margin-bottom: 0;
    margin-top: 0;
}

.svc-intro__lead {
    max-width: 38rem;
    margin-top: 1rem;
    color: var(--svc-show-text);
    margin-bottom: 0;
}

/* The guides for buyers that a page leads to, under its content (2026-11-01: asked for, "optimize the seo, I wanted my target niches
   to drive me traffic"): an offering's page and its overview link to the guides written for the same buyers, so that a visitor who is
   deciding is given the plain answer and a search engine is told which pages go together. It is a band, as the page's own closing
   bands are, 28px inside itself and with no room round it: a card above it keeps its own 20px, a band touches it. */
.guides-strip {
    padding-block: 1.75rem;
    border-top: 1px solid var(--md-outline-variant);
    background: var(--md-surface-container-low);
}

.guides-strip__inner {
    display: grid;
    gap: var(--gap-max);
}

.guides-strip__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem var(--gap-max);
}

.guides-strip__label {
    margin: 0;
    color: var(--md-primary-ink);
}

.guides-strip__all {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--md-primary-ink);
    text-decoration: none;
}

.guides-strip__all:hover,
.guides-strip__all:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

.guides-strip__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--gap-max);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* a guide's name, who it is for and what it answers are three rows that line up across the guides of a row, whatever the length of a name */
.guides-strip__item {
    display: grid;
    grid-row: span 3;
    grid-template-rows: subgrid;
    row-gap: 0.25rem;
}

.guides-strip__name {
    color: var(--md-on-surface);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.guides-strip__name:hover,
.guides-strip__name:focus-visible {
    color: var(--md-primary-ink);
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

.guides-strip__meta,
.guides-strip__text {
    margin: 0;
    max-width: none;
}

.guides-strip__meta {
    color: var(--md-on-surface-variant);
}

.guides-strip__text {
    color: var(--md-on-surface);
}

/* The list of the guides for buyers, in groups (2026-11-01): a heading and a line over the cards of each, 20px apart */
.ins-groups {
    display: grid;
    gap: var(--gap-max);
}

.ins-group {
    display: grid;
    gap: var(--gap-max);
}

.ins-group__head {
    display: grid;
    gap: 0.5rem;
}

.ins-group__title,
.ins-group__lead {
    margin: 0;
}

.ins-group__title {
    color: var(--svc-show-ink);
}

.ins-group__lead {
    max-width: 44rem;
    color: var(--svc-show-text);
}

/* the offerings with no row of their own design, as cards */
.svc-cards {
    padding-block: var(--gap-max) var(--gap-max);
}

@media (min-width: 64rem) {
    .svc-cards {
        padding-block: var(--gap-max) var(--gap-max);
    }
}

/* The mortgage platform's section, as its design draws it (2026-10-24), at 0.882 of its pixels, so that its
   words and its screens fill the site's column: a heading and a lead; a white card under them with the tile,
   the name and the tagline, a paragraph, who it is for, the two links and, under a rule, what it does in two
   columns of three, each an icon on a tile of its colour; and at the right the platform's screens
   (tools/mortgage-screens.html), over the card's right edge, with a house behind their top right. Its type is
   typography.md's roles (the Type roles block), not the design's sizes, so its lines break where the words
   take them. Phones and tablets have the card, then the screens, without the house. */
.svc-show {
    position: relative;
    overflow: clip;
    padding-block: 3rem 4rem;
    background: linear-gradient(var(--md-surface-container-low), var(--svc-show-bg) 6rem);
}

.svc-show__inner {
    position: relative;
    display: grid;
    gap: var(--gap-max);
}

/* "Services" over the heading, as the design has it, now that the page has no hero */
.svc-show__eyebrow {
    margin-bottom: 0.9rem;
    color: var(--svc-show-eyebrow);
}

/* "Mortgage software for" on its first line, as the design has it */
.svc-show__heading {
    max-width: 34rem;
    color: var(--svc-show-ink);
    text-wrap: wrap;
    margin-bottom: 0;
    margin-top: 0;
}

/* its lines as long as the design's */
.svc-show__lead {
    max-width: 35rem;
    margin-top: 1rem;
    color: var(--svc-show-text);
    margin-bottom: 0;
}

.svc-show__card {
    position: relative;
    padding: 2rem 1.25rem 2.1rem;
    border-radius: 1.25rem;
    background: var(--svc-show-card);
    box-shadow: var(--svc-show-card-shadow);
}

.svc-show__title {
    display: flex;
    align-items: center;
    gap: var(--gap-max);
}

.svc-show__tile {
    display: grid;
    flex: none;
    place-items: center;
    width: 3.7rem;
    height: 3.7rem;
    border-radius: 0.66rem;
    background: var(--svc-show-tile);
    color: var(--svc-show-tile-ink);
}

.svc-show__tile .icon {
    width: 2rem;
    height: 2rem;
}

.svc-show__title h3 {
    color: var(--svc-show-ink);
    margin-bottom: 0;
    margin-top: 0;
}

.svc-show__title p {
    margin-top: 0.2rem;
    color: var(--svc-show-text);
    margin-bottom: 0;
}

.svc-show__summary,
.svc-show__for {
    max-width: 29rem;
    color: var(--svc-show-text);
}

.svc-show__summary {
    margin-top: 1.25rem;
    margin-bottom: 0;
}

.svc-show__for {
    margin-top: 1.05rem;
    margin-bottom: 0;
}

.svc-show__for strong {
    color: var(--svc-show-for);
}

.svc-show__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.05rem;
    margin-top: 1rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--svc-show-rule);
}

/* the two links, pills as the design draws them: a filled one and an outlined one */
.svc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    padding: 0 1.6rem;
    border: 1.5px solid var(--md-primary);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-short) var(--ease-standard), box-shadow var(--dur-short) var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

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

.svc-btn--filled {
    background: var(--md-primary);
    color: var(--md-on-primary);
}

.svc-btn--outlined {
    background: transparent;
    color: var(--md-primary-ink);
}

@media (hover: hover) {
    .svc-btn--filled:hover {
        background: var(--md-primary-hover);
        box-shadow: var(--shadow-1);
    }

    .svc-btn--outlined:hover {
        background: var(--svc-btn-outline-hover);
    }
}

.svc-btn:focus-visible {
    outline: 3px solid var(--md-primary);
    outline-offset: 3px;
}

/* what it does: one column on a phone, two of three from 40rem, read down the first column first */
.svc-show__points {
    display: grid;
    gap: var(--gap-max) var(--gap-max);
    margin-top: 1.25rem;
    padding: 0;
    list-style: none;
}

@media (min-width: 40rem) {
    .svc-show__points {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, auto);
        grid-auto-flow: column;
    }
}

.svc-point {
    display: flex;
    align-items: flex-start;
    gap: 0.98rem;
}

.svc-point__tile {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.425rem;
    height: 2.425rem;
    border-radius: 0.55rem;
    background: var(--tone-bg);
    color: var(--tone-ink);
}

.svc-point__tile .icon {
    width: 1.35rem;
    height: 1.35rem;
}

.svc-point__text strong {
    display: block;
    margin-top: 0.1rem;
    color: var(--svc-show-ink);
}

.svc-point__text span {
    display: block;
    margin-top: 0.2rem;
    color: var(--svc-show-muted);
}

.svc-tone--blue {
    --tone-bg: var(--svc-tone-blue);
    --tone-ink: var(--svc-tone-blue-ink);
}

.svc-tone--green {
    --tone-bg: var(--svc-tone-green);
    --tone-ink: var(--svc-tone-green-ink);
}

.svc-tone--purple {
    --tone-bg: var(--svc-tone-purple);
    --tone-ink: var(--svc-tone-purple-ink);
}

.svc-tone--amber {
    --tone-bg: var(--svc-tone-amber);
    --tone-ink: var(--svc-tone-amber-ink);
}

.svc-tone--red {
    --tone-bg: var(--svc-tone-red);
    --tone-ink: var(--svc-tone-red-ink);
}

/* the screens: under the card on a phone or a tablet, as wide as the column up to 54rem */
.svc-show__art {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 54rem;
    justify-self: center;
}

/* the picture has 30 of the design's pixels round the screens for their shadows (60 under them): it is wider
   than the box by those margins and drawn up and to the left by them, so that the screens fill the box */
.svc-show__screens {
    display: block;
    width: 107.092%;
    max-width: none;
    height: auto;
    margin: -3.546% 0 0 -3.546%;
    filter: var(--svc-show-screens-filter);
}

.svc-show__scene {
    display: none;
}

@media (max-width: 39.99rem) {
    .svc-show__title {
        gap: 1rem;
    }

    .svc-show__tile {
        width: 3.25rem;
        height: 3.25rem;
    }

    .svc-show__tile .icon {
        width: 1.75rem;
        height: 1.75rem;
    }
}

/* from 72rem the design's composition, all of it in --u, a 1316th of the site's column, so that the words, the
   card and the screens grow and shrink together and lie over one another as the design draws them at every width
   (2026-10-25: in rem the card kept its size while the screens shrank with the window, and at 1280 they covered
   only its top): the heading and the lead over the card at the left, the card 40.64u wider than the column at its
   left (its words on the column's edge, as the heading's) and running on under the screens; the screens at the
   right in the column's width left over (528u of words and 41.6u between), their foot 40.7u below the card's, so
   that the card's corner is under them (52.1u of the picture's foot is room for their shadows), and their top
   where that puts it: 80u over the card's, beside the lead, as in the design, unless its words make the card
   taller; the house behind their top right, as far as the window's edge. The layout's sizes are the px of a 1536
   window, where --u is a pixel; the type is typography.md's, in rem, and the same at every width. */
@media (min-width: 72rem) {
    .svc-show {
        container-type: inline-size;
        overflow: visible;
        overflow-x: clip;
        padding-block: 0;
    }

    .svc-show__inner {
        --u: calc(min(var(--container), 100cqi - 2 * var(--gutter)) / 1316);
        grid-template-columns: calc(528 * var(--u)) calc(41.6 * var(--u)) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        gap: 0;
        padding-block: calc(45 * var(--u)) calc(88 * var(--u));
    }

    .svc-show__head {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .svc-show__eyebrow {
        margin-bottom: calc(9 * var(--u));
    }

    .svc-show__heading {
        max-width: calc(544 * var(--u));
    }

    .svc-show__lead {
        max-width: min(calc(560 * var(--u)), 70ch);
        margin-top: calc(16 * var(--u));
    }

    .svc-show__card {
        grid-column: 1 / 3;
        grid-row: 2;
        align-self: start;
        margin: min(var(--gap-max), calc(24.8 * var(--u))) calc(-60 * var(--u)) 0 calc(-40.64 * var(--u));
        padding: calc(34.4 * var(--u)) calc(101.6 * var(--u)) calc(36.8 * var(--u)) calc(40.64 * var(--u));
        border-radius: calc(20 * var(--u));
    }

    .svc-show__title {
        gap: min(var(--gap-max), calc(22 * var(--u)));
    }

    .svc-show__tile {
        width: calc(59.2 * var(--u));
        height: calc(59.2 * var(--u));
        border-radius: calc(10.56 * var(--u));
    }

    .svc-show__tile .icon {
        width: calc(32 * var(--u));
        height: calc(32 * var(--u));
    }

    .svc-show__title p {
        margin-top: calc(3.2 * var(--u));
    }

    .svc-show__summary,
    .svc-show__for {
        max-width: calc(464 * var(--u));
    }

    .svc-show__summary {
        margin-top: min(var(--gap-max), calc(20 * var(--u)));
    }

    .svc-show__for {
        margin-top: min(var(--gap-max), calc(16.8 * var(--u)));
    }

    .svc-show__actions {
        gap: min(var(--gap-max), calc(16.8 * var(--u)));
        margin-top: calc(16 * var(--u));
        padding-bottom: calc(22.4 * var(--u));
    }

    .svc-show .svc-btn {
        gap: calc(12 * var(--u));
        min-height: max(2.25rem, calc(44 * var(--u)));
        padding-inline: calc(25.6 * var(--u));
    }

    .svc-show .svc-btn .icon {
        width: calc(20 * var(--u));
        height: calc(20 * var(--u));
    }

    .svc-show__points {
        gap: min(var(--gap-max), calc(20.8 * var(--u))) min(var(--gap-max), calc(32.96 * var(--u)));
        margin-top: min(var(--gap-max), calc(20 * var(--u)));
    }

    .svc-show .svc-point {
        gap: calc(15.68 * var(--u));
    }

    .svc-show .svc-point__tile {
        width: calc(38.8 * var(--u));
        height: calc(38.8 * var(--u));
        border-radius: calc(8.8 * var(--u));
    }

    .svc-show .svc-point__tile .icon {
        width: calc(21.6 * var(--u));
        height: calc(21.6 * var(--u));
    }

    .svc-show .svc-point__text strong {
        margin-top: calc(1.6 * var(--u));
    }

    /* the line under each point a little under its name */
    .svc-show .svc-point__text span {
        margin-top: calc(3.2 * var(--u));
    }

    .svc-show__art {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: end;
        justify-self: end;
        max-width: none;
        margin-bottom: calc(-92.8 * var(--u));
    }

    .svc-show__scene {
        position: absolute;
        top: calc(-211.75 * var(--u));
        left: calc(209.98 * var(--u));
        z-index: -1;
        display: block;
        width: calc(592.9 * var(--u));
        height: auto;
        opacity: var(--svc-show-scene-opacity);
    }
}

/* ------------------------------------------------------------------ */
/* Services page: the other rows, each after a design of its own        */
/* ------------------------------------------------------------------ */

/* The rows after the mortgage platform's (2026-10-24, Services.SPOTLIGHTS): on a tinted panel, the words (a
   tile, the name and its line, a paragraph, who it is for and the two links), the list of what it does on a
   card of its own, and the screens (tools/*-screens.html), as each row's design arranges them: --panel (words,
   list, screens), --duo (a heading over two services, the screens beside both), --mirror (the screens first;
   the list on the panel after a rule) and --lead (a heading that names the service, over its words). On a
   phone or a tablet each is the words, the list and then the screens. From 80rem each is drawn to its design
   in its pixels, 0.66 of them to the --u of a 1536 window: the rows' own blocks below give the positions. The words keep typography.md's roles, in rem. */
.svc-spot {
    --spot-accent: var(--spot-blue);
    --spot-accent-hover: var(--spot-blue-hover);
    overflow-x: clip;
    padding-block: var(--gap-max) 0;
}

.svc-spot--accent-purple {
    --spot-accent: var(--spot-purple);
    --spot-accent-hover: var(--spot-purple-hover);
}



.svc-spot__panel {
    position: relative;
    padding: 1.75rem 1.25rem;
    border-radius: 1.25rem;
    background: var(--spot-panel);
}

/* the AI row's design has no panel: what is not painted has no room of its own, the row's is the --gap-max over it */
.svc-spot--ai .svc-spot__panel {
    background: transparent;
}

.svc-spot--ai .svc-spot__panel {
    padding-block: 0;
}

.spot-tone--blue {
    --spot-tile: var(--spot-tile-blue);
    --spot-icon: var(--spot-icon-blue);
    --spot-tick: var(--spot-icon-blue);
}

.spot-tone--green {
    --spot-tile: var(--spot-tile-green);
    --spot-icon: var(--spot-icon-green);
    --spot-tick: var(--spot-tick-green);
}

.spot-tone--teal {
    --spot-tile: var(--spot-tile-teal);
    --spot-icon: var(--spot-icon-teal);
    --spot-tick: var(--spot-tick-green);
}

.spot-tone--red {
    --spot-tile: var(--spot-tile-red);
    --spot-icon: var(--spot-icon-red);
    --spot-tick: var(--spot-tick-green);
}

.spot-tone--purple {
    --spot-tile: var(--spot-tile-purple);
    --spot-icon: var(--spot-icon-purple);
    --spot-tick: var(--spot-icon-purple);
}

.spot-tone--amber {
    --spot-tile: var(--spot-tile-amber);
    --spot-icon: var(--spot-icon-amber);
    --spot-tick: var(--spot-icon-amber);
}

.svc-spot__eyebrow {
    color: var(--spot-accent);
    margin-bottom: 0;
}

.svc-spot__heading {
    color: var(--spot-ink);
    text-wrap: wrap;
    margin-bottom: 0;
    margin-top: 0;
}

.svc-spot__head .svc-spot__heading {
    margin-top: 0.6rem;
}

.svc-spot__lead {
    max-width: 36rem;
    margin-top: 0.75rem;
    color: var(--spot-text);
    margin-bottom: 0;
}

.svc-spot__head {
    margin-bottom: var(--gap-max);
}

.svc-spot__entry {
    display: grid;
    gap: var(--gap-max);
}

.svc-spot__entry + .svc-spot__entry {
    margin-top: var(--gap-max);
}

/* the words: the tile beside the name and its line, then the rest under both */
.svc-spot__words {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
        "eyebrow eyebrow"
        "tile name"
        "tile tagline"
        "summary summary"
        "for for"
        "actions actions";
    column-gap: 1rem;
    align-content: start;
}

/* the payments' tile over its name; the lead rows' heading over their words, the AI row's tile beside them */
.svc-spot--mirror .svc-spot__words,
.svc-spot--lead .svc-spot__words {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "tile" "eyebrow" "heading" "name" "tagline" "summary" "for" "actions";
}

.svc-spot__words > .svc-spot__eyebrow {
    grid-area: eyebrow;
    margin-bottom: 0.9rem;
}

.svc-spot--lead .svc-spot__words > .svc-spot__eyebrow {
    margin-bottom: 0.5rem;
}

.svc-spot__tile {
    grid-area: tile;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.75rem;
    background: var(--spot-tile);
    color: var(--spot-icon);
}

.svc-spot__tile .icon {
    width: 1.875rem;
    height: 1.875rem;
}

.svc-spot--mirror .svc-spot__tile,
.svc-spot--lead .svc-spot__tile {
    margin-bottom: 1rem;
}

.svc-spot__words > .svc-spot__heading {
    grid-area: heading;
}

.svc-spot__name {
    grid-area: name;
    align-self: end;
    color: var(--spot-ink);
    margin-bottom: 0;
    margin-top: 0;
}

.svc-spot__tagline {
    grid-area: tagline;
    align-self: start;
    margin-top: 0.25rem;
    color: var(--spot-tagline);
    margin-bottom: 0;
}

.svc-spot--lead .svc-spot__tagline {
    margin-top: 0.9rem;
    color: var(--spot-text);
}

.svc-spot__summary,
.svc-spot__for {
    color: var(--spot-text);
}

.svc-spot__summary {
    grid-area: summary;
    margin-top: 1.25rem;
    margin-bottom: 0;
}

.svc-spot__for {
    grid-area: for;
    margin-top: 0.9rem;
    margin-bottom: 0;
}

.svc-spot__for strong {
    color: var(--spot-ink);
}

.svc-spot__actions {
    grid-area: actions;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.25rem;
}

.svc-spot .svc-btn {
    border-color: var(--spot-accent);
}

.svc-spot .svc-btn--filled {
    background: var(--spot-accent);
}

.svc-spot .svc-btn--outlined {
    color: var(--spot-accent);
}

@media (hover: hover) {
    .svc-spot .svc-btn--filled:hover {
        border-color: var(--spot-accent-hover);
        background: var(--spot-accent-hover);
    }
}

.svc-spot--accent-purple .svc-btn--outlined:hover {
    background: var(--spot-purple-soft);
}

.svc-spot .svc-btn:focus-visible {
    outline-color: var(--spot-accent);
}

/* the payments' second link is a plain link, as its design draws it */
.svc-spot--mirror .svc-btn--outlined {
    border-color: transparent;
    padding-inline: 0.75rem;
}

/* what it does: a card of its own, each line after a tick */
.svc-spot__list {
    align-self: start;
    padding: 1.4rem 1.5rem 1.5rem;
    border-radius: 1rem;
    background: var(--spot-card);
    box-shadow: var(--spot-card-shadow);
}

.svc-spot__list-title {
    color: var(--spot-ink);
    margin-bottom: 0;
    margin-top: 0;
}

.svc-spot__list ul {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0;
    list-style: none;
}

.svc-spot__list li {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: var(--spot-ink);
}

.svc-spot__list .icon {
    flex: none;
    width: 1.3rem;
    height: 1.3rem;
    color: var(--spot-tick);
}

/* the payments' list: on the panel, its heading in a pale pill */
.svc-spot--mirror .svc-spot__list {
    padding: 0;
    background: none;
    box-shadow: none;
}

.svc-spot--mirror .svc-spot__list-title {
    display: inline-block;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: var(--spot-pill);
}

.svc-spot__art {
    margin-top: var(--gap-max);
}

.svc-spot__screens {
    display: block;
    width: 100%;
    max-width: 50rem;
    height: auto;
    margin-inline: auto;
    filter: var(--svc-show-screens-filter);
}

/* the screens without the soft shapes behind them on a dark page, whether the system's or the switch's */
.svc-spot__screens--dark {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .svc-spot__screens--light {
        display: none;
    }

    :root:not([data-theme="light"]) .svc-spot__screens--dark {
        display: block;
    }
}

:root[data-theme="dark"] .svc-spot__screens--light {
    display: none;
}

:root[data-theme="dark"] .svc-spot__screens--dark {
    display: block;
}

/* a tablet: the words and the list side by side, the screens under them */
@media (min-width: 48rem) {
    .svc-spot__panel {
        padding: 2.25rem 2rem;
    }

    .svc-spot__entry {
        grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
        column-gap: var(--gap-max);
    }
}

/* from 80rem each row in its design's pixels: --u is one pixel of a 1536 window, and N * var(--u) is N of the
   design's pixels times 0.66. The rows' blocks set the panel's place and size (--panel-l, --panel-r, --panel-h),
   the words' (--pad-t, --pad-l, --words-w), the list's (--gap, --list-w, --list-y, --list-h) and the screens'
   (--art-x, --art-y, --art-w), all in --u, from the panel's top left corner. The panel is the design's height
   at least; where typography.md's sizes make its words or list taller, it grows, and keeps as much room under
   them as over them (--pad-b, the top's by default). */
@media (min-width: 80rem) {
    .svc-spot {
        --u: min(100vw / 1536, 1.25px);
    }

    .svc-spot__panel {
        min-height: calc(var(--panel-h) * var(--u));
        margin: 0 calc(var(--panel-r, 0) * var(--u)) 0 calc(var(--panel-l, 0) * var(--u));
        padding: calc(var(--pad-t) * var(--u)) 0 calc(var(--pad-b, var(--pad-t)) * var(--u)) calc(var(--pad-l) * var(--u));
        border-radius: calc(var(--panel-radius, 26) * var(--u));
    }

    .svc-spot__head {
        width: calc(var(--words-w) * var(--u));
        margin-bottom: min(var(--gap-max), calc(var(--head-after, 24) * var(--u)));
    }

    .svc-spot__entry {
        grid-template-columns: calc(var(--words-w) * var(--u)) calc(var(--list-w) * var(--u));
        column-gap: min(var(--gap-max), calc(var(--gap) * var(--u)));
        row-gap: 0;
    }

    .svc-spot__entry + .svc-spot__entry {
        margin-top: min(var(--gap-max), calc(var(--entry-gap, 30) * var(--u)));
    }

    .svc-spot__words {
        column-gap: min(var(--gap-max), calc(var(--tile-gap, 25) * var(--u)));
    }

    .svc-spot__tile {
        width: calc(var(--tile, 61) * var(--u));
        height: calc(var(--tile, 61) * var(--u));
        border-radius: calc(var(--tile, 61) * 0.2 * var(--u));
    }

    .svc-spot__tile .icon {
        width: calc(var(--tile, 61) * 0.5 * var(--u));
        height: calc(var(--tile, 61) * 0.5 * var(--u));
    }

    .svc-spot--mirror .svc-spot__tile,
    .svc-spot--lead .svc-spot__tile {
        margin-bottom: min(var(--gap-max), calc(var(--tile-after, 20) * var(--u)));
    }

    .svc-spot__words > .svc-spot__eyebrow {
        margin-bottom: min(var(--gap-max), calc(var(--eyebrow-after, 14) * var(--u)));
    }

    .svc-spot__lead {
        max-width: none;
        margin-top: min(var(--gap-max), calc(var(--lead-before, 12) * var(--u)));
    }

    .svc-spot__tagline {
        margin-top: min(var(--gap-max), calc(var(--tagline-before, 4) * var(--u)));
    }

    .svc-spot--lead .svc-spot__tagline {
        margin-top: min(var(--gap-max), calc(var(--tagline-before, 16) * var(--u)));
    }

    .svc-spot__summary {
        margin-top: min(var(--gap-max), calc(var(--summary-before, 26) * var(--u)));
    }

    .svc-spot__for {
        margin-top: min(var(--gap-max), calc(var(--for-before, 19) * var(--u)));
    }

    .svc-spot__actions {
        gap: min(var(--gap-max), calc(var(--btn-gap, 17) * var(--u)));
        margin-top: min(var(--gap-max), calc(var(--actions-before, 24) * var(--u)));
    }

    /* on a desktop the links as small as their designs draw them, never under 36px */
    .svc-spot .svc-btn {
        min-height: max(2.25rem, calc(var(--btn-h, 43) * var(--u)));
        padding-inline: calc(var(--btn-pad, 25) * var(--u));
        border-width: max(1.5px, calc(1.8 * var(--u)));
    }

    .svc-spot__list {
        margin-top: min(var(--gap-max), calc(var(--list-y, 0) * var(--u)));
        min-height: calc(var(--list-h, 0) * var(--u));
        padding: calc(var(--list-pad-t, 26) * var(--u)) calc(var(--list-pad-r, 16) * var(--u)) calc(var(--list-pad-b, 20) * var(--u)) calc(var(--list-pad-l, 18.5) * var(--u));
        border-radius: calc(var(--list-radius, 14) * var(--u));
    }

    .svc-spot__list ul {
        gap: min(var(--gap-max), calc(var(--item-gap, 12) * var(--u)));
        margin-top: min(var(--gap-max), calc(var(--items-before, 17) * var(--u)));
    }

    .svc-spot__list li {
        gap: min(var(--gap-max), calc(var(--tick-gap, 12) * var(--u)));
    }

    .svc-spot__list .icon {
        width: calc(var(--tick, 14.5) * var(--u));
        height: calc(var(--tick, 14.5) * var(--u));
    }

    .svc-spot__art {
        position: absolute;
        z-index: 1;
        top: calc(var(--art-y) * var(--u));
        left: calc(var(--art-x) * var(--u));
        width: calc(var(--art-w) * var(--u));
        margin: 0;
    }

    .svc-spot__screens {
        max-width: none;
    }

    /* every row's panel 40.6u wider than the column at each side, as the mortgage card is at its left, and
       its words (or its screens, on the payments' row) on the column's edge: each design's own positions are
       read from that edge */
    .svc-spot {
        --panel-l: -40.6;
        --panel-r: -40.6;
        --pad-l: 40.6;
    }

    /* the AI row and the hotels' and restaurants': the tile at the column's edge and all the words beside it */
    .svc-spot--ai .svc-spot__words {
        grid-template-columns: calc(var(--tile) * var(--u)) minmax(0, 1fr);
        grid-template-areas: "tile eyebrow" "tile heading" ". tagline" ". summary" ". for" ". actions";
        column-gap: min(var(--gap-max), calc(var(--tile-gap) * var(--u)));
    }

    .svc-spot--duo .svc-spot__words {
        grid-template-areas: "tile name" "tile tagline" ". summary" ". for" ". actions";
    }

    .svc-spot--ai .svc-spot__tile,
    .svc-spot--duo .svc-spot__tile {
        align-self: start;
        margin: 0;
    }

    .svc-spot--duo .svc-spot__name {
        align-self: start;
    }

    /* the lead rows' line under the heading, grey as their designs draw it */
    .svc-spot--lead .svc-spot__tagline {
        max-width: calc(var(--tagline-w, 9999) * var(--u));
        color: var(--spot-lead-line);
    }

    /* the payments' list after an upright rule */
    .svc-spot--mirror .svc-spot__list {
        padding: 0 0 0 calc(var(--list-pad-l) * var(--u));
        border-left: 1px solid var(--spot-rule);
        border-radius: 0;
    }

    .svc-spot--mirror .svc-spot__list-title {
        padding: calc(6 * var(--u)) calc(17 * var(--u));
    }

    /* the fintech systems (sacco.png): the words from x 120, the panel from y 74; its label over the tile */
    .svc-spot--fintech {
        --panel-h: 376;
        --pad-t: 16;
        --pad-b: 33.7;
        --eyebrow-after: 12;
        --words-w: 481;
        --gap: 55.6;
        --list-w: 214;
        --list-y: 17.7;
        --list-h: 256;
        --art-x: 791.7;
        --art-y: -15.8;
        --art-w: 595.3;
        --tile: 60.7;
        --tile-gap: 25;
        --summary-before: 21;
        --actions-before: 20;
    }

    /* the hotels and restaurants (hosp.png, 1821 wide, 0.793 of its pixels to the --u): from x 105, y 32 */
    .svc-spot--hotels-restaurants {
        --panel-h: 644;
        --pad-t: 30;
        --lead: 14.3;
        --lead-before: 12;
        --head-after: 23;
        --words-w: 432;
        --gap: 8;
        --list-w: 231;
        --list-y: -10.3;
        --list-h: 195;
        --art-x: 698.8;
        --art-y: 6.3;
        --art-w: 690;
        --tile: 57;
        --tile-gap: 21.4;
        --tagline-before: 4;
        --summary-before: 9;
        --for-before: 8;
        --actions-before: 12;
        --btn-h: 31.7;
        --btn-pad: 22;
        --btn-gap: 18;
        --entry-gap: 32.5;
        --list-pad-t: 16;
        --list-pad-l: 19;
        --list-pad-r: 6;
        --items-before: 13;
        --item-gap: 7.3;
        --tick: 12.7;
        --tick-gap: 8;
    }

    .svc-spot--hotels-restaurants .svc-spot__lead {
        max-width: calc(440 * var(--u));
    }

    /* the clinics (clinic.png): from x 94, y 90 */
    .svc-spot--clinics {
        --panel-h: 356.4;
        --pad-t: 61.4;
        --pad-b: 48.2;
        --words-w: 496;
        --gap: 6;
        --list-w: 222;
        --list-y: -13.2;
        --list-h: 245;
        --art-x: 724.4;
        --art-y: -59.4;
        --art-w: 693;
        --tile: 54.8;
        --tile-gap: 19.8;
        --tagline-before: 8;
        --summary-before: 20.6;
        --for-before: 15.5;
        --actions-before: 14.7;
        --btn-h: 35;
        --list-pad-t: 21;
        --list-pad-l: 19;
        --list-pad-r: 6;
        --items-before: 15;
        --item-gap: 8;
        --tick: 12;
        --tick-gap: 8;
    }

    /* the payment integrations (payments.png), mirrored: the screens from x 80, the panel from y 70; the words 26
       narrower than the design's, so that the list, its lines now longer, ends on the column's edge */
    .svc-spot--payments {
        --panel-h: 386.8;
        --pad-t: 30.4;
        --pad-l: 695.3;
        --words-w: 406;
        --gap: 17.5;
        --list-w: 238;
        --list-y: 35;
        --list-h: 278;
        --list-pad-l: 27;
        --art-x: 20.8;
        --art-y: 14.5;
        --art-w: 656;
        --tile: 51.5;
        --tile-after: 7.3;
        --tagline-before: 9;
        --summary-before: 17;
        --for-before: 17;
        --actions-before: 22;
        --btn-h: 34;
        --btn-pad: 22;
        --btn-gap: 6;
        --items-before: 22;
        --item-gap: 14.8;
        --tick: 15.8;
        --tick-gap: 14.5;
    }

    /* custom software (custom.png): from x 120, the panel from y 82 */
    .svc-spot--custom {
        --panel-h: 365;
        --pad-t: 31;
        --eyebrow-after: 13;
        --words-w: 440;
        --gap: 18.7;
        --tagline-w: 386;
        --list-w: 263.4;
        --list-y: 39.6;
        --list-h: 250.8;
        --art-x: 752.1;
        --art-y: -47.5;
        --art-w: 648;
        --tagline-before: 17;
        --summary-before: 18;
        --for-before: 14;
        --actions-before: 22;
        --btn-h: 44;
        --list-pad-t: 25.7;
        --list-pad-l: 22.4;
        --list-pad-r: 10;
        --items-before: 22;
        --item-gap: 11.2;
        --tick: 15.8;
        --tick-gap: 12;
    }

    /* AI and automation (automation.png): its tile from x 67, its words from y 140, no panel */
    .svc-spot--ai {
        --panel-h: 330;
        --pad-t: 19;
        --eyebrow-after: 10;
        --words-w: 482;
        --gap: 8;
        --list-w: 260;
        --list-y: -5.8;
        --list-h: 288.4;
        --art-x: 755.4;
        --art-y: -92.4;
        --art-w: 674.5;
        --tile: 63.4;
        --tile-gap: 23;
        --tagline-before: 18;
        --summary-before: 17;
        --for-before: 15;
        --actions-before: 17;
        --btn-h: 39.6;
        --list-pad-t: 26.4;
        --list-pad-l: 21.8;
        --items-before: 20;
        --item-gap: 8.7;
        --tick: 15.2;
        --tick-gap: 12;
    }
}

/* ------------------------------------------------------------------ */
/* Services page: how a project runs, and the call to talk              */
/* ------------------------------------------------------------------ */

/* The last part of the services page, as its design draws it (2026-10-25): "How we work" with a short line after
   it, the heading, and five white cards, each with its number on a blue disc over its top edge, its drawing (cut
   from the design, steps-*.webp), its name and what happens; then a pale band with a white edge, its words, a
   blue pill, and at its right a picture of someone at work among floating cards (steps-cta-band.webp, cut from
   the design, its words taken out). On a phone the cards are one under the other, two side by side from 40rem
   and three from 64rem, and the band's picture is under its words. From 80rem it is the design in --u, a 1316th
   of the site's column, 0.7348 of the design's pixels (its column, from the heading's left edge, is 1791 wide):
   the five cards in a row, joined by a dashed line with a dot between each two, and the band's picture across
   it. */
.svc-steps {
    padding-block: clamp(3rem, 2rem + 4vw, 5rem);
    background: linear-gradient(var(--steps-bg-top), var(--steps-bg-bottom));
}

.svc-steps__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--steps-eyebrow);
    margin-bottom: 0;
}

.svc-steps__eyebrow::after {
    content: "";
    width: 2.25rem;
    height: 1.5px;
    background: var(--steps-rule);
}

.svc-steps__title {
    margin-top: 0.75rem;
    color: var(--steps-ink);
    margin-bottom: 0;
}

.svc-steps__flow {
    position: relative;
    margin-top: var(--gap-max);
}

.svc-steps__line {
    display: none;
}

/* the cards, a row's as high as the highest; room above each for its disc */
.svc-steps__list {
    display: grid;
    gap: var(--gap-max) 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* two cards a row, then three: each spans two of twice as many columns, so that the cards left over in the last
   row stand in its middle (from 80rem the five are one row) */
@media (min-width: 40rem) and (max-width: 79.99rem) {
    .svc-steps__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .svc-step {
        grid-column: span 2;
    }

    .svc-step:last-child:nth-child(odd) {
        grid-column: 2 / span 2;
    }
}

@media (min-width: 64rem) and (max-width: 79.99rem) {
    .svc-steps__list {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .svc-step:last-child:nth-child(odd) {
        grid-column: span 2;
    }

    .svc-step:nth-child(3n + 1):nth-last-child(2) {
        grid-column: 2 / span 2;
    }
}

.svc-step {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.9rem 1.35rem 1.5rem;
    border-radius: 1rem;
    background: var(--steps-card);
    box-shadow: var(--steps-card-shadow);
}

.svc-step__number {
    position: absolute;
    top: 0;
    left: 50%;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 2px solid var(--steps-card);
    border-radius: 50%;
    background: var(--steps-number);
    box-shadow: var(--steps-number-shadow);
    color: var(--steps-number-ink);
    translate: -50% -62%;
}

/* the drawing has the card's white round it, so that it melts into the card; on a dark page it is a pale tile */
.svc-step__picture {
    display: block;
    width: 100%;
    max-width: 22rem;
    height: auto;
    margin-inline: auto;
    border-radius: 0.75rem;
    filter: var(--steps-picture-filter);
}

.svc-step__title {
    margin-top: 1rem;
    color: var(--steps-ink);
    margin-bottom: 0;
}

.svc-step__text {
    margin-top: 0.4rem;
    color: var(--steps-text);
    margin-bottom: 0;
}

/* the band: its words over the pale blue, and its picture under them on a phone or a tablet, its top fading into
   the blue; from 80rem the picture across the whole band, as the design has it */
.svc-cta {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: var(--gap-max);
    padding: 2rem 1.5rem 11.5rem;
    border: 3px solid var(--steps-cta-border);
    border-radius: 1.4rem;
    background: var(--steps-cta-bg);
    color: var(--steps-cta-text);
}

.svc-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("/images/steps-cta-band-54e38f0ba1e0ae7644960287ed3a65d0.webp") right bottom / auto 10.5rem no-repeat;
    filter: var(--steps-cta-art-filter);
    -webkit-mask-image: linear-gradient(to bottom, transparent calc(100% - 10.5rem), #000 calc(100% - 5.5rem));
    mask-image: linear-gradient(to bottom, transparent calc(100% - 10.5rem), #000 calc(100% - 5.5rem));
}

/* a short blue line over the heading */
.svc-cta__title::before {
    content: "";
    display: block;
    width: 2.6rem;
    height: 2px;
    margin-bottom: 1.1rem;
    background: var(--steps-cta-rule);
}

.svc-cta__title {
    color: var(--steps-cta-title);
    margin-bottom: 0;
    margin-top: 0;
}

.svc-cta__line {
    max-width: 36rem;
    margin-top: 0.6rem;
    margin-bottom: 0;
}

/* the two sentences one under the other where they fit */
@media (min-width: 48rem) {
    .svc-cta__line span {
        display: block;
    }
}

.svc-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 3rem;
    margin-top: var(--gap-max);
    padding: 0 1.75rem;
    border-radius: 999px;
    background: var(--steps-cta-button);
    box-shadow: var(--steps-cta-button-glow);
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-short) var(--ease-standard);
}

.svc-cta__button .icon {
    width: 1.25rem;
    height: 1.25rem;
}

@media (hover: hover) {
    .svc-cta__button:hover {
        background: var(--steps-cta-button-hover);
    }
}

.svc-cta__button:focus-visible {
    outline: 3px solid var(--steps-cta-button);
    outline-offset: 3px;
}

/* from 80rem the design, in --u: the layout's sizes are the px of a 1536 window, where --u is a pixel; the five
   cards in a row 15.8u past the column at each side, as the band is; the words in typography.md's roles, in rem */
@media (min-width: 80rem) {
    .svc-steps {
        container-type: inline-size;
        padding-block: 0;
    }

    .svc-steps__inner {
        --u: calc(min(var(--container), 100cqi - 2 * var(--gutter)) / 1316);
        padding-block: calc(72 * var(--u)) calc(60 * var(--u));
    }

    .svc-steps__eyebrow {
        gap: calc(14.6 * var(--u));
    }

    .svc-steps__eyebrow::after {
        width: calc(28.7 * var(--u));
        height: max(1px, calc(1.4 * var(--u)));
    }

    .svc-steps__title {
        margin-top: calc(9.7 * var(--u));
    }

    .svc-steps__flow {
        margin: min(var(--gap-max), calc(28.2 * var(--u))) calc(-15.8 * var(--u)) 0;
        padding-top: calc(29.4 * var(--u));
    }

    /* the dashed line and its dots, from the design's 43..1878 by 140..200: its 175 the discs' middle */
    .svc-steps__line {
        position: absolute;
        top: calc(-6.6 * var(--u));
        left: 0;
        display: block;
        width: 100%;
        height: calc(44.1 * var(--u));
        overflow: visible;
        color: var(--steps-line);
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-dasharray: 8 6;
        stroke-linecap: round;
    }

    .svc-steps__line circle {
        fill: var(--steps-dot);
        stroke: none;
    }

    .svc-steps__list {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: min(var(--gap-max), calc(17.3 * var(--u)));
    }

    .svc-step {
        min-height: calc(237.3 * var(--u));
        padding: calc(11.8 * var(--u)) calc(14 * var(--u)) calc(13.1 * var(--u)) calc(19.1 * var(--u));
        border-radius: calc(16.2 * var(--u));
    }

    .svc-step__number {
        top: calc(-29.4 * var(--u));
        width: calc(36.7 * var(--u));
        height: calc(36.7 * var(--u));
        border-width: calc(1.5 * var(--u));
        translate: -50% 0;
    }

    .svc-step__picture {
        width: calc(235.1 * var(--u));
        max-width: none;
        margin: 0 0 0 calc(-8.7 * var(--u));
        border-radius: calc(10 * var(--u));
    }

    .svc-step__title {
        margin-top: calc(10 * var(--u));
    }

    /* the design's widths (the first card's a little wider) */
    .svc-step__text {
        max-width: calc(209.5 * var(--u));
        margin-top: calc(5 * var(--u));
    }

    .svc-step:first-child .svc-step__text {
        max-width: calc(222 * var(--u));
    }

    .svc-cta {
        min-height: calc(184.8 * var(--u));
        margin: min(var(--gap-max), calc(26.5 * var(--u))) calc(-15.8 * var(--u)) 0;
        padding: calc(23.5 * var(--u)) 0 calc(20.5 * var(--u)) calc(44.1 * var(--u));
        border-width: calc(2.94 * var(--u));
        border-radius: calc(20.6 * var(--u));
    }

    .svc-cta::before {
        background-position: right center;
        background-size: cover;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .svc-cta__title::before {
        width: calc(30.1 * var(--u));
        height: max(1.5px, calc(1.5 * var(--u)));
        margin-bottom: calc(12.6 * var(--u));
    }

    .svc-cta__line {
        max-width: none;
        margin-top: calc(2.5 * var(--u));
    }

    .svc-cta__button {
        gap: calc(11 * var(--u));
        min-height: max(2.25rem, calc(37.5 * var(--u)));
        min-width: calc(140.3 * var(--u));
        margin-top: calc(10.4 * var(--u));
        padding: 0 calc(22 * var(--u));
    }

    .svc-cta__button .icon {
        width: calc(17 * var(--u));
        height: calc(17 * var(--u));
    }
}

/* ------------------------------------------------------------------ */
/* The plain service page                                              */
/* ------------------------------------------------------------------ */

.feature-grid .card {
    gap: 0.5rem;
}

.aside-card {
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    background: var(--md-surface-container-low);
    display: grid;
    gap: 1rem;
    align-content: start;
}

/* what the card holds is spaced by its gap alone: a margin on a paragraph or a heading would be a second one */
.aside-card > * {
    margin-block: 0;
}

.two-col {
    display: grid;
    gap: var(--gap-max);
}

@media (min-width: 64rem) {
    .two-col {
        grid-template-columns: minmax(0, 70ch) minmax(16rem, 24rem);
        justify-content: start;
        gap: var(--gap-max);
        align-items: start;
    }
}

.service-list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: 0.25rem;
}

.service-list a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--md-on-surface);
    text-decoration: none;
}

.service-list a:hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
}

.service-list .icon-tile {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
}

.service-list .icon-tile .icon {
    width: 1.25rem;
    height: 1.25rem;
}

/* ------------------------------------------------------------------ */
/* Footer                                                              */
/* ------------------------------------------------------------------ */

/* The footer, as its design draws it (2026-10-24), its layout at four fifths of its size, its type typography.md's
   roles (its links navigation links, its labels small): the name and what the company does, with its social profiles in pale circles; the services, the company's pages and the ways to reach it,
   between thin upright rules on a desktop; and under a rule the copyright and the legal links. Its row was
   made 120px lower than the design's (2026-10-24, asked for): the links closer together, less space round it. */
.footer {
    position: relative;
    isolation: isolate;
    margin-top: auto;
    background: var(--footer-glow), var(--footer-surface);
    color: var(--footer-text);
}

/* the two faint rings at its left, from its top left corner */
.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("/images/footer-rings-250bf0802ee246f0dd1f4d4ca3c45ac1.svg") 0 0 / 15rem auto no-repeat;
    opacity: var(--footer-art-opacity);
    pointer-events: none;
}

/* its layout follows its own width (a container query), not the window's */
.footer__inner {
    container-type: inline-size;
}

.footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--gap-max);
    padding-top: 2.4rem;
}

/* the name, what the company does and its social profiles */
.footer__brand {
    display: grid;
    justify-items: start;
    align-content: start;
}

.footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    color: var(--footer-ink);
    text-decoration: none;
}

.footer__mark {
    width: 2.75rem;
    height: 2.75rem;
}

.footer__name {
    white-space: nowrap;
}

.footer__about {
    max-width: 22.6rem;
    margin-top: 0.75rem;
    color: var(--footer-muted);
    margin-bottom: 0;
}

.footer__social {
    display: flex;
    gap: 0.625rem;
    margin-top: 1rem;
    padding: 0;
    list-style: none;
}

.footer__profile {
    display: grid;
    place-items: center;
    width: 2.55rem;
    height: 2.55rem;
    border-radius: 50%;
    background: var(--footer-social);
    color: var(--footer-icon);
    transition: background-color var(--dur-short) var(--ease-standard), color var(--dur-short) var(--ease-standard);
}

/* each mark at the size the design gives it */
.footer__profile .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.footer__profile--linkedin .icon {
    width: 1.35rem;
    height: 1.35rem;
}

.footer__profile--x .icon {
    width: 0.98rem;
    height: 0.98rem;
}

.footer__profile--youtube .icon {
    width: 1.05rem;
    height: 1.05rem;
}

@media (hover: hover) {
    .footer__profile:hover {
        background: var(--footer-social-hover);
        color: var(--md-primary-ink);
    }
}

/* the columns: the services, the company's pages, and the ways to reach it */
.footer__heading {
    color: var(--footer-heading);
    margin-bottom: 0;
    margin-top: 0;
}

/* the links in small type, the size of the contact labels (2026-10-27: asked for), each on a line of its own, the
   lines touching: a link's target is its line, at least 24px high (WCAG 2.5.8) though the type is 14px, and as far
   as the next */
.footer__list {
    display: grid;
    justify-items: start;
    row-gap: 0;
    margin-top: 0.9rem;
    padding: 0;
    list-style: none;
}

.footer__list a {
    display: flex;
    align-items: center;
    min-height: 1.5rem;
    color: var(--footer-text);
    text-decoration: none;
}

.footer__list a:hover {
    color: var(--md-primary-ink);
    text-decoration: underline;
}

.footer__contact {
    display: grid;
    row-gap: 1rem;
    margin-top: 0.9rem;
    padding: 0;
    list-style: none;
}

.footer__reach {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    color: inherit;
    text-decoration: none;
}

.footer__badge {
    display: grid;
    flex: none;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--footer-badge);
    color: var(--footer-badge-ink);
}

.footer__badge .icon {
    width: 1.5625rem;
    height: 1.5625rem;
}

.footer__label {
    display: block;
    color: var(--footer-label);
}

.footer__value {
    display: block;
    margin-top: 0.125rem;
    color: var(--footer-value);
    text-wrap: balance;
}

a.footer__reach:hover .footer__value {
    color: var(--md-primary-ink);
    text-decoration: underline;
}

/* at its foot, a white strip the width of the window, as the top bar is, with the copyright and the legal
   links (each after a short upright line) in the footer's column */
.footer__bottom {
    margin-top: var(--gap-max);
    background: var(--frame-surface);
}

.footer__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--gap-max);
    min-height: var(--top-bar-h);
    padding-block: 0.5rem;
}

.footer__copyright {
    color: var(--footer-copyright);
    margin-bottom: 0;
}

.footer__legal {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}

.footer__legal li {
    display: flex;
    align-items: center;
}

.footer__legal li::before {
    content: "";
    width: 1px;
    height: 1.4rem;
    background: var(--footer-separator);
}

.footer__legal a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 1.15rem 0 1.55rem;
    color: var(--footer-legal);
    text-decoration: none;
}

.footer__legal li:first-child a {
    padding-left: 2.15rem;
}

.footer__legal li:last-child a {
    padding-right: 0;
}

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

/* on a phone the legal links start at the left, under the copyright, without a line before the first */
@media (max-width: 47.99rem) {
    .footer__legal li:first-child::before {
        display: none;
    }

    .footer__legal li:first-child a {
        padding-left: 0;
    }
}

/* a second group in a column (the company, under the platforms for developers) */
.footer__list + .footer__heading {
    margin-top: var(--gap-max);
}

/* the products and the services side by side, then the developers' and the company's beside the way to us */
@container (min-width: 36rem) {
    .footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .footer__brand {
        grid-column: 1 / -1;
    }
}

/* the name above, and the four columns under it, of one width, between upright rules: from where a column holds
   its longest link on one line (the links are small type, 14px/400: a name broken over two lines reads badly) */
@container (min-width: 69rem) {
    .footer__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: var(--gap-max) 0;
    }

    .footer__column {
        padding-right: 1rem;
    }

    .footer__column:not(.footer__column--products) {
        padding-left: 1.5rem;
        border-left: 1px solid var(--footer-rule);
    }
}

/* the five blocks across the footer, between upright rules (2026-10-25: the menus' groups, in place of the
   services alone), of one width (2026-10-26: typography.md's type in a fifth of 81rem takes the longest name on
   one line, where the name's quarter more and 1.5rem after each rule did not): the name flush with the
   rule's start, as the copyright under it, and each other column 1rem after its rule, all aligned on their left */
@container (min-width: 81rem) {
    .footer__grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
        padding-top: 2.4rem;
    }

    .footer__brand {
        grid-column: auto;
        padding: 0.5rem 1rem 0 0;
    }

    .footer__column {
        padding: 0.25rem 0.5rem 0 1rem;
        border-left: 1px solid var(--footer-rule);
    }
}

/* The cards of the overviews: the offerings with no row of their own, three to a row from 64rem (the home page drew its services
   as these until 2026-10-31, whence the names) */
.home-services__grid {
    display: grid;
    /* one column that cannot be wider than the window: a card's longest word asks for more at 200% text on a phone, and the
       card, not the page, gives way (2026-11-01: found by the check of the list of guides at 320 wide) */
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    width: 100%;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

@media (min-width: 48rem) {
    .home-services__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {

    .home-services__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

.home-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.5rem 0.5rem;
    border: 1px solid var(--home-card-border);
    border-radius: 0.875rem;
    background: var(--home-card-surface);
    box-shadow: var(--home-card-shadow);
}

.home-card__head {
    display: flex;
    align-items: flex-start;
    gap: 1.125rem;
}

.home-card__tile {
    display: grid;
    place-items: center;
    flex: none;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 0.875rem;
    background: var(--accent-container, var(--md-primary-container));
    color: var(--accent, var(--md-primary));
}

.home-card__tile .icon {
    width: 2rem;
    height: 2rem;
}

/* the name and its line may be narrower than their longest word asks, and break inside it, so that a card never sticks out of its column */
.home-card__head > :not(.home-card__tile) {
    min-width: 0;
}

.home-card__title {
    color: var(--home-card-title);
    margin-bottom: 0;
    margin-top: 0;
    overflow-wrap: anywhere;
}

.home-card__tagline {
    margin-top: 0.25rem;
    color: var(--home-card-tagline);
    margin-bottom: 0;
    overflow-wrap: anywhere;
}

.home-card__text {
    margin-top: 1rem;
    color: var(--home-card-text);
    text-wrap: pretty;
    margin-bottom: 0;
}

.home-card__list {
    display: grid;
    gap: 0.375rem;
    margin-top: 0.875rem;
    padding: 0;
    list-style: none;
    color: var(--home-card-list);
}

.home-card__list li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.home-card__list .icon {
    width: 1.125rem;
    height: 1.125rem;
    color: var(--md-primary-ink);
}

/* the links follow the list: pinned to the card's foot (margin-top: auto) they left more than --gap-max between the list and
   them in the cards that are shorter than the tallest of their row */
.home-card__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0;
    padding-top: 0.75rem;
}

/* the line between the two links, put between them by order */
.home-card__links::after {
    content: "";
    order: 1;
    width: 1px;
    height: 1em;
    margin-inline: calc(var(--gap-max) / 2 - 0.5px);
    background: var(--home-card-rule);
}

.home-card__more,
.home-card__demo {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--md-primary-ink);
    text-decoration: none;
}

.home-card__more {
    gap: 0.5rem;
}

.home-card__more .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.home-card__demo {
    order: 2;
}

/* a card for two services: a link to each, with the line between them */
.home-card__more--next {
    order: 2;
}

/* The cards answer the pointer: on hover, or when one of their links has the focus, a card rises a little,
   its shadow deepens, its border takes its colour, its tile grows and its arrow moves on; pressed, it
   settles. A card for one service is one big link, its "Learn more" stretched over it (its demo link stays
   above); a card for two leads only through its two links. */
.home-card {
    position: relative;
    transition: transform var(--dur-medium) var(--ease-emphasized), box-shadow var(--dur-medium) var(--ease-emphasized),
        border-color var(--dur-medium) var(--ease-standard);
}

.home-card__tile,
.home-card__more .icon {
    transition: transform var(--dur-medium) var(--ease-emphasized);
}

/* over the whole card, with the card's corners */
.home-card__more--cover::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0.875rem;
}

.home-card__more--cover:focus-visible {
    outline: none;
}

.home-card__more--cover:focus-visible::before {
    outline: 3px solid var(--md-primary);
    outline-offset: 2px;
}

.home-card__demo {
    position: relative;
    z-index: 1;
}

.home-card:focus-within {
    transform: translateY(-4px);
    border-color: color-mix(in srgb, var(--accent, var(--md-primary)) 45%, var(--home-card-border));
    box-shadow: var(--home-card-shadow-raised);
}

@media (hover: hover) {
    .home-card:hover {
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--accent, var(--md-primary)) 45%, var(--home-card-border));
        box-shadow: var(--home-card-shadow-raised);
    }

    .home-card:hover .home-card__tile {
        transform: scale(1.06);
    }

    .home-card:hover .home-card__more .icon {
        transform: translateX(4px);
    }
}

.home-card:active {
    transform: translateY(-1px);
    transition-duration: var(--dur-short);
}

.home-card__more:hover,
.home-card__demo:hover {
    color: var(--md-primary-hover);
    text-decoration: underline;
}

/* A card alone in the last row (the seventh, of seven) runs across the row: its name and paragraph at the
   left, its list beside them and its links at the foot, or, in three columns, each in the column of the
   cards above */
@media (min-width: 48rem) and (max-width: 63.99rem) {
    .home-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "head list" "text list" "links links";
        align-content: start;
        column-gap: var(--gap-max);
    }

    .home-card:last-child:nth-child(odd) .home-card__head {
        grid-area: head;
    }

    .home-card:last-child:nth-child(odd) .home-card__text {
        grid-area: text;
    }

    .home-card:last-child:nth-child(odd) .home-card__list {
        grid-area: list;
        align-self: center;
    }

    .home-card:last-child:nth-child(odd) .home-card__links {
        grid-area: links;
    }
}

@media (min-width: 64rem) {
    /* the columns' gap puts the list and the links where the words of the cards above begin */
    .home-card:last-child:nth-child(3n + 1) {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas: "head list links" "text list links";
        align-content: start;
        column-gap: var(--gap-max);
        padding-bottom: 1.25rem;
    }

    .home-card:last-child:nth-child(3n + 1) .home-card__head {
        grid-area: head;
    }

    .home-card:last-child:nth-child(3n + 1) .home-card__text {
        grid-area: text;
    }

    .home-card:last-child:nth-child(3n + 1) .home-card__list {
        grid-area: list;
        align-self: center;
        margin-top: 0;
    }

    .home-card:last-child:nth-child(3n + 1) .home-card__links {
        grid-area: links;
        align-self: center;
        margin-top: 0;
        padding-top: 0;
    }
}

/* The cards and the bands rise into place as they come into the window: site.js marks what is still below
   it when the page opens (is-reveal-pending) and, as each comes in, starts its entrance (is-revealed), a
   little after the one before it (data-reveal-step); the steps follow their band one by one. What is in the
   window when the page opens is shown as it is, and nothing moves for a visitor who asks for less motion.
   The entrance moves "translate", so that a card's own "transform" on hover is left to it. */
@media (prefers-reduced-motion: no-preference) {
    .is-reveal-pending {
        opacity: 0;
    }

    .is-revealed {
        animation: reveal-up var(--spring-slow) var(--ease-spring) both;
    }

    .is-revealed[data-reveal-step="1"] {
        animation-delay: 80ms;
    }

    .is-revealed[data-reveal-step="2"] {
        animation-delay: 160ms;
    }

    .is-revealed[data-reveal-step="3"] {
        animation-delay: 240ms;
    }

    .is-revealed[data-reveal-step="4"] {
        animation-delay: 320ms;
    }

    .is-revealed[data-reveal-step="5"] {
        animation-delay: 400ms;
    }
}

@keyframes reveal-up {
    from {
        opacity: 0;
        translate: 0 1.25rem;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* More motion (2026-10-24: asked for), all of it for a visitor who has not asked for less. As a page opens,
   its hero's words settle into place: the title and the lead rise a little without fading, so that they are
   painted from the first frame (the largest of them is what the page's loading is measured by), and the rest
   rises and fades in after them, one after another. What has a pointer over it answers: an arrow moves on,
   an icon grows, a tile lifts. (The home page and the pages drawn to a design of their own do this in their own
   stylesheets, with these two keyframes.) */
@media (prefers-reduced-motion: no-preference) {
    .hero__content h1,
    .hero__content .lead {
        animation: hero-settle 800ms var(--ease-emphasized) both;
    }

    .hero__content .lead {
        animation-delay: 80ms;
    }

    .hero__content .eyebrow,
    .hero__actions {
        animation: hero-enter 700ms var(--ease-emphasized) both;
    }

    .hero__actions {
        animation-delay: 260ms;
    }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .contact-form__send .icon {
        transition: translate var(--dur-medium) var(--ease-emphasized);
    }

    .contact-form__send:hover .icon {
        translate: 3px -3px;
    }

    .contact-ways__badge {
        transition: scale 300ms var(--ease-emphasized);
    }

    .contact-ways li:hover .contact-ways__badge {
        scale: 1.12;
    }

    /* the services page's steps rise; "transform", since the entrance has "translate" */
    .svc-step {
        transition: transform 300ms var(--ease-emphasized), box-shadow 300ms var(--ease-emphasized);
    }

    .svc-step__picture {
        transition: scale 600ms var(--ease-emphasized);
    }

    .svc-step:hover {
        transform: translateY(-4px);
        box-shadow: var(--steps-card-shadow-raised);
    }

    .svc-step:hover .svc-step__picture {
        scale: 1.04;
    }

    .svc-cta__button .icon {
        transition: translate var(--dur-medium) var(--ease-emphasized);
    }

    .svc-cta__button:hover .icon {
        translate: 3px 0;
    }

    .footer__profile {
        transition: background-color var(--dur-short) var(--ease-standard), color var(--dur-short) var(--ease-standard),
            translate var(--dur-medium) var(--ease-emphasized);
    }

    .footer__profile:hover {
        translate: 0 -2px;
    }
}

@keyframes hero-settle {
    from {
        translate: 0 0.75rem;
    }
    to {
        translate: 0 0;
    }
}

@keyframes hero-enter {
    from {
        opacity: 0;
        translate: 0 0.75rem;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

/* ------------------------------------------------------------------ */
/* Admin area                                                          */
/* ------------------------------------------------------------------ */

.admin-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--md-surface-container);
    box-shadow: var(--shadow-1);
}

/* the name, the title and the user; on a phone the user's part goes under them rather than out of the window */
.admin-bar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    min-height: var(--top-bar-h);
    padding-block: 0.5rem;
}

.admin-bar__title {
    color: var(--md-on-surface-variant);
}

.admin-bar__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.admin-bar__nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 1rem;
    border-radius: var(--radius-full);
    color: var(--md-on-surface-variant);
    text-decoration: none;
}

.admin-bar__nav a:hover {
    background: color-mix(in srgb, var(--md-on-surface) 8%, transparent);
    color: var(--md-on-surface);
}

.admin-bar__nav a[aria-current="page"] {
    background: var(--md-secondary-container);
    color: var(--md-on-secondary-container);
}

.admin-bar__user {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--md-on-surface-variant);
}

.admin-bar form {
    margin: 0;
}

.admin-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: var(--gap-max);
}

.login-card {
    max-width: 26rem;
    margin: min(var(--gap-max), clamp(2rem, 10vh, 6rem)) auto;
    padding: 2rem;
    border-radius: var(--radius-xl);
    background: var(--md-surface-container-low);
    display: grid;
    gap: var(--gap-max);
}

.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--radius-lg);
    background: var(--md-surface);
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table caption {
    text-align: left;
    padding: 1rem 1.25rem;
    color: var(--md-on-surface-variant);
}

.table th, .table td {
    padding: 0.875rem 1.25rem;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid var(--md-outline-variant);
}

.table th {
    color: var(--md-on-surface-variant);
    white-space: nowrap;
    background: var(--md-surface-container-low);
}

.table tbody tr:hover {
    background: var(--md-surface-container-low);
}

.table .text-small {
    display: block;
    color: var(--md-on-surface-variant);
}

.table__empty {
    padding: 3rem 1.25rem;
    text-align: center;
    color: var(--md-on-surface-variant);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    color: var(--md-on-surface-variant);
}

.kv {
    display: grid;
    gap: 0.75rem var(--gap-max);
    margin: 0;
}

@media (min-width: 40rem) {
    .kv {
        grid-template-columns: max-content minmax(0, 1fr);
    }
}

.kv dt {
    color: var(--md-on-surface);
}

.kv dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* the documents sent with an enquiry: each a row with its kind and size, and a button to download it */

.admin-documents__list {
    display: grid;
    gap: 0.5rem;
    margin: 0.75rem 0 0.5rem;
    padding: 0;
    list-style: none;
}

.admin-documents__item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.625rem 0.75rem 0.625rem 1rem;
    border: 1px solid var(--md-outline-variant);
    border-radius: var(--radius-md);
}

.admin-documents__item > .icon {
    flex: none;
    color: var(--md-primary-ink);
}

.admin-documents__name {
    display: grid;
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.admin-files {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    margin-left: 0.375rem;
    color: var(--md-on-surface-variant);
    vertical-align: middle;
}

.admin-files .icon {
    width: 1rem;
    height: 1rem;
}

/* an enquiry's message (fragments/message.html): its paragraphs and lists as its writer marked them, each keeping
   the writer's spaces and breaks */
.message-box {
    display: grid;
    gap: 0.75rem;
    overflow-wrap: anywhere;
    padding: 1.25rem;
    border-radius: var(--radius-md);
    background: var(--md-surface-container-low);
}

.message-box p,
.message-box li {
    white-space: pre-wrap;
}

.message-box p,
.message-box ul,
.message-box ol {
    margin: 0;
}

.message-box ul,
.message-box ol {
    display: grid;
    gap: 0.25rem;
    padding-left: 1.5rem;
}

.message-box ul {
    list-style: disc;
}

.message-box ol {
    list-style: decimal;
}

.snackbar {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    z-index: 60;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: min(22rem, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
    padding: 0.75rem 1rem 0.75rem 1.25rem;
    border-radius: var(--radius-sm);
    background: var(--md-inverse-surface);
    color: var(--md-inverse-on-surface);
    box-shadow: var(--shadow-3);
    animation: snackbar-in var(--dur-medium) var(--ease-emphasized);
}

.snackbar.is-leaving {
    opacity: 0;
    transition: opacity var(--dur-short) var(--ease-standard);
}

.snackbar .icon-btn {
    color: var(--md-inverse-on-surface);
    width: 2.25rem;
    height: 2.25rem;
}

@keyframes snackbar-in {
    from {
        transform: translate(-50%, 1rem);
        opacity: 0;
    }
    to {
        transform: translate(-50%, 0);
        opacity: 1;
    }
}

/* ------------------------------------------------------------------ */
/* Error pages                                                         */
/* ------------------------------------------------------------------ */

/* at the start of the column on a phone, where the line under the heading takes three lines; centred from 40rem,
   where it takes two at most (typography.md 4) */
.error-page {
    max-width: 40rem;
    margin-inline: auto;
    padding-block: min(var(--gap-max), clamp(3rem, 10vh, 8rem));
    text-align: start;
    display: grid;
    gap: 1rem;
    justify-items: start;
}

@media (min-width: 40rem) {
    .error-page {
        text-align: center;
        justify-items: center;
    }
}

.error-page__code {
    color: var(--md-on-surface-variant);
    margin-bottom: 0;
}

.error-page h1 {
    margin: 0;
}

.error-page .cluster {
    margin-top: 0;
}

@media (min-width: 40rem) {
    .error-page .cluster {
        justify-content: center;
    }
}

/* ------------------------------------------------------------------ */
/* Utilities                                                           */
/* ------------------------------------------------------------------ */

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

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: var(--gap-max); }
.mt-4 { margin-top: var(--gap-max); }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: var(--gap-max); }

/* ------------------------------------------------------------------ */
/* Feel (2026-10-26, after Apple's guidance)                            */
/* ------------------------------------------------------------------ */

/* What can be pressed answers the press itself, not its release: it gives a little at once and springs back as it
   is let go (each has "scale" in its transition, on the spring). A card that is one big link gives less than a
   button. Nothing moves for a visitor who asks for less motion. */
:is(.btn, .icon-btn, .svc-btn, .contact-form__send, .ai-btn, .cln-btn, .cs-btn,
    .mtg-btn, .rst-btn, .fin-btn, .rich__tool, .rich__link-button, .rich__link-close):active:not(:disabled, [aria-busy="true"]) {
    scale: var(--press-scale);
    transition-duration: var(--press-in);
}

.drawer__link {
    transition: background-color var(--dur-short) var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.drawer__link:active {
    scale: var(--press-scale-card);
    transition-duration: var(--press-in);
}

.home-card {
    transition: transform var(--dur-medium) var(--ease-emphasized), box-shadow var(--dur-medium) var(--ease-emphasized),
        border-color var(--dur-medium) var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.home-card:has(.home-card__more--cover:active) {
    scale: var(--press-scale-card);
    transition-duration: var(--dur-medium), var(--dur-medium), var(--dur-medium), var(--press-in);
}

/* The theme changes as a cross-fade (site.js asks the browser for one), so that the page's brightness does not
   jump from white to black in one frame */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 320ms;
    animation-timing-function: var(--ease-standard);
}

/* Asked for less transparency, the materials are solid; asked for more contrast, their edges are drawn */
@media (prefers-reduced-transparency: reduce) {
    .top-bar::before {
        background: var(--frame-surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .mega__inner {
        background: var(--frame-surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

@media (prefers-contrast: more) {
    .top-bar::before {
        background: var(--frame-surface);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        box-shadow: inset 0 -1px 0 var(--md-outline);
    }

    .mega__inner,
    .mega__list > li:nth-child(3n + 2),
    .mega__list > li:nth-child(3n) {
        border-color: var(--md-outline);
    }
}

/* ------------------------------------------------------------------ */
/* Motion and print                                                    */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media print {
    .top-bar, .footer, .drawer, .skip-link, .cta-band, .hero__art, .admin-bar, .snackbar, .guides-strip {
        display: none !important;
    }

    /* what had not yet come into the window is printed all the same */
    .is-reveal-pending {
        opacity: 1 !important;
    }

    body {
        color: #000;
        background: #fff;
    }

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

/* The tick in the hero's payment card */
.art__check {
    stroke: var(--md-tertiary);
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Steps in a narrow column, one under the other whatever the window's width */
.steps--stack {
    grid-template-columns: 1fr;
}