/* The legacy modernisation page (services/pages/modernisation.html), after its own design (2026-10-28: "legacy design"). Until
   then the page was drawn to the landing design (css/pages/landing.css), which has no rule for it now.

   Its type is typography.md's: every text takes one of its roles, set in the Type roles block below and nowhere else, and its
   sizes are the tokens', in rem, not the design's (which sets its sample workspace in 7 to 12px: the workspace is set in the
   roles' sizes, so it is larger, and its panels stand one under the other on a phone). Mobile first: one column, the stages
   as a grid of boxes under the heading on a phone and a tablet and as a list beside their card from 64rem, the accordion
   beside its heading from 48rem, the hero in two columns from 72rem. Where the page asks for a script (the view of the
   workspace, the choice of a stage and of a starting point) every answer is in the markup, and what chooses is `hidden`, or a
   link to what it means, until site.js makes it work; the accordion and the questions need none.

   The space between rows, columns and items is 20px at the most (--gap-max, site.css); a painted band or card has the room it
   needs inside itself. Everything is scoped to .mod; its colours are the --mod-* tokens, set again for the dark theme, and its
   text takes typography.md's two text colours through them. */

:root {
    --mod-surface: #ffffff;
    /* the text: headings and body text in typography.md's primary colour, small text in its secondary */
    --mod-ink: var(--text-primary);
    --mod-muted: var(--text-secondary);
    --mod-eyebrow: #0a4ce9;
    --mod-crumb-chevron: #8790a8;
    --mod-blue: #0154e5;
    --mod-blue-hover: #0043bd;
    --mod-on-blue: #ffffff;
    --mod-blue-soft: #e8f1ff;
    --mod-blue-soft-edge: #cbdcff;
    --mod-outline: #b4c9e8;
    --mod-outline-ink: #0f47a8;
    --mod-outline-bg: rgb(255 255 255 / 0.74);
    --mod-outline-hover: #eef6ff;
    /* the hero: a pale blue light at its right over a white that goes to blue at its foot, and two rings */
    --mod-hero-bg: radial-gradient(ellipse 70% 80% at 85% 28%, #dceafe 0, #eaf2ff 38%, rgb(244 248 254 / 0) 72%),
        linear-gradient(180deg, #f4f8fe 0%, #ffffff 97%);
    --mod-hero-ring: #c9dbf4;
    --mod-hero-ring-2: #d9e6f6;
    --mod-hero-edge: #e4ebf5;
    --mod-line: #e4eaf2;
    --mod-line-strong: #d3deec;
    --mod-card: #ffffff;
    --mod-card-edge: #cddcee;
    --mod-card-shadow: 0 18px 56px rgb(29 65 112 / 0.12), 0 4px 14px rgb(16 50 101 / 0.05);
    /* the sample workspace, after the work */
    --mod-scene-glow: radial-gradient(circle at center, #c8e0ff 4%, rgb(200 224 255 / 0) 67%);
    --mod-toggle-edge: #d0def0;
    --mod-toggle-glow: rgb(150 190 255 / 0.55);
    --mod-window-bar: #f7faff;
    --mod-window-edge: #e5ebf4;
    --mod-window-dot: #d5dfed;
    --mod-body-bg: #ffffff;
    --mod-badge-bg: #e1f6ee;
    --mod-badge-ink: #0b654d;
    --mod-status-bg: #e3f6ed;
    --mod-status-ink: #0b654a;
    --mod-metric-bg: #ffffff;
    --mod-metric-edge: #e0e8f3;
    --mod-metric-ink: var(--mod-ink);
    --mod-tag-ink: #0b654d;
    --mod-panel-edge: #e2e8f3;
    --mod-chart-line: #145cf2;
    --mod-chart-fill: #e4eeff;
    --mod-chart-grid: #e1e9f5;
    --mod-chart-opacity: 1;
    --mod-chart-filter: none;
    --mod-tile: #e6eeff;
    --mod-pill-bg: #dff5ea;
    --mod-pill-ink: #0b654a;
    --mod-pill-muted-bg: #e9eef8;
    --mod-pill-muted-ink: #44587a;
    --mod-live-dot: #1caa7e;
    --mod-live-ring: #d7f5e9;
    --mod-note-bg: #ffffff;
    --mod-note-edge: #e0e8f3;
    --mod-note-shadow: 0 16px 30px rgb(14 48 92 / 0.14);
    --mod-note-tick-bg: #dcf8ec;
    --mod-note-tick: #0b7a57;
    /* the same workspace before it: separate tools, rust where the new one is green */
    --mod-legacy-body: linear-gradient(130deg, #ffffff, #fbf8f5);
    --mod-legacy-metric-bg: #fbfaf9;
    --mod-legacy-value: #9a4a31;
    --mod-legacy-tag: #8a4a15;
    --mod-legacy-status-bg: #ffeee2;
    --mod-legacy-status-ink: #8a4a15;
    --mod-legacy-badge-bg: #ffeee2;
    --mod-legacy-badge-ink: #8a4a15;
    --mod-legacy-tile: #f1ecea;
    --mod-legacy-pill-bg: #fff0de;
    --mod-legacy-pill-ink: #7f4a0e;
    --mod-legacy-pill-muted-bg: #f1ecef;
    --mod-legacy-pill-muted-ink: #594e5c;
    --mod-legacy-chart-line: #b08467;
    --mod-legacy-chart-fill: #f4e9e1;
    --mod-legacy-chart-opacity: 0.8;
    --mod-legacy-chart-filter: grayscale(1);
    /* what modernising comes to */
    --mod-outcome-rule: #d7dfec;
    --mod-outcome-rule-first: #1662ef;
    --mod-outcome-num: #1f58b0;
    /* how an engagement goes: a deep blue band and a card on it */
    --mod-night: #0c1d40;
    --mod-night-ring: rgb(120 160 235 / 0.34);
    --mod-night-eyebrow: #8fbaff;
    --mod-night-text: #c3d1e8;
    --mod-step-ink: #b4c3dc;
    --mod-step-no: #8aa7d4;
    --mod-step-line: rgb(180 202 239 / 0.2);
    --mod-step-on-bg: #183967;
    --mod-step-on-edge: #71a9ff;
    --mod-step-arrow: #74abff;
    --mod-stage-card: linear-gradient(130deg, #152e5b, #10244c 85%);
    --mod-stage-edge: rgb(150 182 231 / 0.3);
    --mod-stage-glow: radial-gradient(circle, #1f4f9b 0%, rgb(31 79 155 / 0) 68%);
    --mod-stage-shadow: 0 25px 55px rgb(2 11 34 / 0.24);
    --mod-stage-meta: #a7bce0;
    --mod-stage-no: #77adff;
    --mod-stage-text: #c9d6ec;
    --mod-stage-label: #86a9df;
    --mod-stage-item: #edf3ff;
    --mod-tick-bg: #155e71;
    --mod-tick-ink: #91f0c9;
    --mod-progress: #31517e;
    --mod-progress-on: #74adff;
    --mod-round-edge: #6f89b4;
    --mod-round-hover: #1f3b69;
    --mod-hint: #98aed2;
    /* where to start */
    --mod-band: #f2f6fc;
    --mod-band-edge: #e1e9f4;
    --mod-chip-edge: #bccbe0;
    --mod-chip-ink: #35496a;
    --mod-case-card: #ffffff;
    --mod-case-edge: #d9e4f2;
    --mod-case-shadow: 0 24px 70px -40px rgb(13 39 84 / 0.32);
    --mod-case-label: #3a609e;
    --mod-tag-bg: #eef4fc;
    --mod-tag-ink-2: #2f527d;
    --mod-env-dot: #1766ed;
    /* the closing card */
    /* the card's blue: deeper at its far end where the card is narrow and its words reach across it (3.3:1 for them over the
       design's #1259ed on a phone), the design's from 72rem, where its words stay in its dark left */
    --mod-closing: linear-gradient(115deg, #091b3c 5%, #10378a 70%, #1245a8 100%);
    --mod-closing-wide: linear-gradient(115deg, #091b3c 5%, #123f9a 74%, #1259ed 100%);
    --mod-closing-ring: rgb(125 165 255 / 0.55);
    --mod-closing-ring-2: rgb(95 140 235 / 0.5);
    --mod-closing-eyebrow: #b9d3ff;
    --mod-closing-text: #d2e0fb;
    --mod-light-ink: #0b2a63;
    --mod-light-hover: #e8f1ff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --mod-surface: #131314;
        --mod-ink: var(--text-primary);
        --mod-muted: var(--text-secondary);
        --mod-eyebrow: #a8c7fa;
        --mod-crumb-chevron: #7f889c;
        --mod-blue: #a8c7fa;
        --mod-blue-hover: #c2d8fc;
        --mod-on-blue: #062e6f;
        --mod-blue-soft: rgb(168 199 250 / 0.14);
        --mod-blue-soft-edge: rgb(168 199 250 / 0.42);
        --mod-outline: #5d7fbf;
        --mod-outline-ink: #a8c7fa;
        --mod-outline-bg: transparent;
        --mod-outline-hover: rgb(168 199 250 / 0.1);
        --mod-hero-bg: radial-gradient(ellipse 70% 80% at 85% 28%, rgb(120 160 255 / 0.15) 0, rgb(120 160 255 / 0.05) 50%, rgb(120 160 255 / 0) 80%),
            linear-gradient(180deg, #121620 0%, #131314 97%);
        --mod-hero-ring: rgb(168 199 250 / 0.16);
        --mod-hero-ring-2: rgb(168 199 250 / 0.1);
        --mod-hero-edge: rgb(255 255 255 / 0.08);
        --mod-line: rgb(255 255 255 / 0.1);
        --mod-line-strong: rgb(168 199 250 / 0.3);
        --mod-card: #1b1c1f;
        --mod-card-edge: rgb(255 255 255 / 0.12);
        --mod-card-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 28px 56px -28px rgb(0 0 0 / 0.7);
        --mod-scene-glow: radial-gradient(circle at center, rgb(90 140 235 / 0.22) 4%, rgb(90 140 235 / 0) 67%);
        --mod-toggle-edge: rgb(255 255 255 / 0.16);
        --mod-toggle-glow: rgb(60 110 200 / 0.4);
        --mod-window-bar: #202226;
        --mod-window-edge: rgb(255 255 255 / 0.08);
        --mod-window-dot: #4a4f59;
        --mod-body-bg: #1b1c1f;
        --mod-badge-bg: rgb(109 213 140 / 0.14);
        --mod-badge-ink: #6dd58c;
        --mod-status-bg: rgb(109 213 140 / 0.14);
        --mod-status-ink: #6dd58c;
        --mod-metric-bg: #1f2024;
        --mod-metric-edge: rgb(255 255 255 / 0.1);
        --mod-tag-ink: #6dd58c;
        --mod-panel-edge: rgb(255 255 255 / 0.1);
        --mod-chart-line: #a8c7fa;
        --mod-chart-fill: rgb(168 199 250 / 0.16);
        --mod-chart-grid: rgb(255 255 255 / 0.1);
        --mod-tile: rgb(168 199 250 / 0.14);
        --mod-pill-bg: rgb(109 213 140 / 0.14);
        --mod-pill-ink: #6dd58c;
        --mod-pill-muted-bg: rgb(168 199 250 / 0.14);
        --mod-pill-muted-ink: #b9c7e2;
        --mod-live-dot: #6dd58c;
        --mod-live-ring: rgb(109 213 140 / 0.2);
        --mod-note-bg: #24262b;
        --mod-note-edge: rgb(255 255 255 / 0.12);
        --mod-note-shadow: 0 16px 30px rgb(0 0 0 / 0.5);
        --mod-note-tick-bg: rgb(109 213 140 / 0.18);
        --mod-note-tick: #6dd58c;
        --mod-legacy-body: linear-gradient(130deg, #1b1c1f, #211d1b);
        --mod-legacy-metric-bg: #232120;
        --mod-legacy-value: #f0a58a;
        --mod-legacy-tag: #f0b27a;
        --mod-legacy-status-bg: rgb(240 178 122 / 0.16);
        --mod-legacy-status-ink: #f0b27a;
        --mod-legacy-badge-bg: rgb(240 178 122 / 0.16);
        --mod-legacy-badge-ink: #f0b27a;
        --mod-legacy-tile: rgb(240 200 170 / 0.14);
        --mod-legacy-pill-bg: rgb(240 178 122 / 0.16);
        --mod-legacy-pill-ink: #f0b27a;
        --mod-legacy-pill-muted-bg: rgb(255 255 255 / 0.1);
        --mod-legacy-pill-muted-ink: #cfc4d2;
        --mod-legacy-chart-line: #b89a85;
        --mod-legacy-chart-fill: rgb(184 154 133 / 0.18);
        --mod-legacy-chart-opacity: 0.8;
        --mod-legacy-chart-filter: grayscale(1);
        --mod-outcome-rule: rgb(255 255 255 / 0.16);
        --mod-outcome-rule-first: #a8c7fa;
        --mod-outcome-num: #a8c7fa;
        --mod-night: #0a1630;
        --mod-night-ring: rgb(120 160 235 / 0.24);
        --mod-night-eyebrow: #9cc3ff;
        --mod-night-text: #c7d3e8;
        --mod-step-ink: #b4c3dc;
        --mod-step-no: #8aa7d4;
        --mod-step-line: rgb(180 202 239 / 0.2);
        --mod-step-on-bg: #15305b;
        --mod-step-on-edge: #71a9ff;
        --mod-step-arrow: #74abff;
        --mod-stage-card: linear-gradient(130deg, #112650, #0d1f43 85%);
        --mod-stage-edge: rgb(150 182 231 / 0.26);
        --mod-stage-glow: radial-gradient(circle, #1b4488 0%, rgb(27 68 136 / 0) 68%);
        --mod-stage-shadow: 0 25px 55px rgb(0 0 0 / 0.4);
        --mod-band: #17181b;
        --mod-band-edge: rgb(255 255 255 / 0.08);
        --mod-chip-edge: rgb(168 199 250 / 0.4);
        --mod-chip-ink: #c6d4ee;
        --mod-case-card: #1b1c1f;
        --mod-case-edge: rgb(255 255 255 / 0.12);
        --mod-case-shadow: 0 24px 60px -34px rgb(0 0 0 / 0.7);
        --mod-case-label: #9cbcf0;
        --mod-tag-bg: rgb(168 199 250 / 0.12);
        --mod-tag-ink-2: #b9cdef;
        --mod-env-dot: #6f9cf0;
        --mod-closing: linear-gradient(115deg, #070f23 5%, #0c2760 74%, #0d3a9a 100%);
        --mod-closing-wide: linear-gradient(115deg, #070f23 5%, #0c2760 74%, #0d3a9a 100%);
        --mod-closing-ring: rgb(125 165 255 / 0.4);
        --mod-closing-ring-2: rgb(95 140 235 / 0.35);
        --mod-closing-eyebrow: #b9d3ff;
        --mod-closing-text: #cfdcf2;
        --mod-light-ink: #0b2a63;
        --mod-light-hover: #dbe8ff;
    }
}

:root[data-theme="dark"] {
    --mod-surface: #131314;
    --mod-ink: var(--text-primary);
    --mod-muted: var(--text-secondary);
    --mod-eyebrow: #a8c7fa;
    --mod-crumb-chevron: #7f889c;
    --mod-blue: #a8c7fa;
    --mod-blue-hover: #c2d8fc;
    --mod-on-blue: #062e6f;
    --mod-blue-soft: rgb(168 199 250 / 0.14);
    --mod-blue-soft-edge: rgb(168 199 250 / 0.42);
    --mod-outline: #5d7fbf;
    --mod-outline-ink: #a8c7fa;
    --mod-outline-bg: transparent;
    --mod-outline-hover: rgb(168 199 250 / 0.1);
    --mod-hero-bg: radial-gradient(ellipse 70% 80% at 85% 28%, rgb(120 160 255 / 0.15) 0, rgb(120 160 255 / 0.05) 50%, rgb(120 160 255 / 0) 80%),
        linear-gradient(180deg, #121620 0%, #131314 97%);
    --mod-hero-ring: rgb(168 199 250 / 0.16);
    --mod-hero-ring-2: rgb(168 199 250 / 0.1);
    --mod-hero-edge: rgb(255 255 255 / 0.08);
    --mod-line: rgb(255 255 255 / 0.1);
    --mod-line-strong: rgb(168 199 250 / 0.3);
    --mod-card: #1b1c1f;
    --mod-card-edge: rgb(255 255 255 / 0.12);
    --mod-card-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 28px 56px -28px rgb(0 0 0 / 0.7);
    --mod-scene-glow: radial-gradient(circle at center, rgb(90 140 235 / 0.22) 4%, rgb(90 140 235 / 0) 67%);
    --mod-toggle-edge: rgb(255 255 255 / 0.16);
    --mod-toggle-glow: rgb(60 110 200 / 0.4);
    --mod-window-bar: #202226;
    --mod-window-edge: rgb(255 255 255 / 0.08);
    --mod-window-dot: #4a4f59;
    --mod-body-bg: #1b1c1f;
    --mod-badge-bg: rgb(109 213 140 / 0.14);
    --mod-badge-ink: #6dd58c;
    --mod-status-bg: rgb(109 213 140 / 0.14);
    --mod-status-ink: #6dd58c;
    --mod-metric-bg: #1f2024;
    --mod-metric-edge: rgb(255 255 255 / 0.1);
    --mod-tag-ink: #6dd58c;
    --mod-panel-edge: rgb(255 255 255 / 0.1);
    --mod-chart-line: #a8c7fa;
    --mod-chart-fill: rgb(168 199 250 / 0.16);
    --mod-chart-grid: rgb(255 255 255 / 0.1);
    --mod-tile: rgb(168 199 250 / 0.14);
    --mod-pill-bg: rgb(109 213 140 / 0.14);
    --mod-pill-ink: #6dd58c;
    --mod-pill-muted-bg: rgb(168 199 250 / 0.14);
    --mod-pill-muted-ink: #b9c7e2;
    --mod-live-dot: #6dd58c;
    --mod-live-ring: rgb(109 213 140 / 0.2);
    --mod-note-bg: #24262b;
    --mod-note-edge: rgb(255 255 255 / 0.12);
    --mod-note-shadow: 0 16px 30px rgb(0 0 0 / 0.5);
    --mod-note-tick-bg: rgb(109 213 140 / 0.18);
    --mod-note-tick: #6dd58c;
    --mod-legacy-body: linear-gradient(130deg, #1b1c1f, #211d1b);
    --mod-legacy-metric-bg: #232120;
    --mod-legacy-value: #f0a58a;
    --mod-legacy-tag: #f0b27a;
    --mod-legacy-status-bg: rgb(240 178 122 / 0.16);
    --mod-legacy-status-ink: #f0b27a;
    --mod-legacy-badge-bg: rgb(240 178 122 / 0.16);
    --mod-legacy-badge-ink: #f0b27a;
    --mod-legacy-tile: rgb(240 200 170 / 0.14);
    --mod-legacy-pill-bg: rgb(240 178 122 / 0.16);
    --mod-legacy-pill-ink: #f0b27a;
    --mod-legacy-pill-muted-bg: rgb(255 255 255 / 0.1);
    --mod-legacy-pill-muted-ink: #cfc4d2;
    --mod-legacy-chart-line: #b89a85;
    --mod-legacy-chart-fill: rgb(184 154 133 / 0.18);
    --mod-legacy-chart-opacity: 0.8;
    --mod-legacy-chart-filter: grayscale(1);
    --mod-outcome-rule: rgb(255 255 255 / 0.16);
    --mod-outcome-rule-first: #a8c7fa;
    --mod-outcome-num: #a8c7fa;
    --mod-night: #0a1630;
    --mod-night-ring: rgb(120 160 235 / 0.24);
    --mod-night-eyebrow: #9cc3ff;
    --mod-night-text: #c7d3e8;
    --mod-step-ink: #b4c3dc;
    --mod-step-no: #8aa7d4;
    --mod-step-line: rgb(180 202 239 / 0.2);
    --mod-step-on-bg: #15305b;
    --mod-step-on-edge: #71a9ff;
    --mod-step-arrow: #74abff;
    --mod-stage-card: linear-gradient(130deg, #112650, #0d1f43 85%);
    --mod-stage-edge: rgb(150 182 231 / 0.26);
    --mod-stage-glow: radial-gradient(circle, #1b4488 0%, rgb(27 68 136 / 0) 68%);
    --mod-stage-shadow: 0 25px 55px rgb(0 0 0 / 0.4);
    --mod-band: #17181b;
    --mod-band-edge: rgb(255 255 255 / 0.08);
    --mod-chip-edge: rgb(168 199 250 / 0.4);
    --mod-chip-ink: #c6d4ee;
    --mod-case-card: #1b1c1f;
    --mod-case-edge: rgb(255 255 255 / 0.12);
    --mod-case-shadow: 0 24px 60px -34px rgb(0 0 0 / 0.7);
    --mod-case-label: #9cbcf0;
    --mod-tag-bg: rgb(168 199 250 / 0.12);
    --mod-tag-ink-2: #b9cdef;
    --mod-env-dot: #6f9cf0;
    --mod-closing: linear-gradient(115deg, #070f23 5%, #0c2760 74%, #0d3a9a 100%);
    --mod-closing-wide: linear-gradient(115deg, #070f23 5%, #0c2760 74%, #0d3a9a 100%);
    --mod-closing-ring: rgb(125 165 255 / 0.4);
    --mod-closing-ring-2: rgb(95 140 235 / 0.35);
    --mod-closing-eyebrow: #b9d3ff;
    --mod-closing-text: #cfdcf2;
    --mod-light-ink: #0b2a63;
    --mod-light-hover: #dbe8ff;
}

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

/* The page's texts take typography.md's roles (section 3) here, and only here: the rules below set none of their family, size,
   weight, line height, letter spacing or case. A heading's tag gives it its role (site.css's base) unless it is listed here,
   taking another level's style; the rest are listed by their roles. */

/* H4 (card title): sans 500 */
.mod-window__title,
.mod-outcome__title,
.mod-step__name,
.mod-acc__name,
.mod-faq__question,
.mod-case__title {
    font-family: var(--font-sans);
    font-size: var(--fs-h4);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h4);
    letter-spacing: 0;
}

/* H3: sans 500 (a figure of the sample workspace, the systems' heading) */
.mod-metric__value,
.mod-env__title {
    font-family: var(--font-sans);
    font-size: var(--fs-h3);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h3);
    letter-spacing: 0;
}

/* Stat (a big figure): mono 700, tabular */
.mod-stage__no {
    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;
}

/* Body: sans 400 */
.mod-lead,
.mod-hero__lead,
.mod-acc__text,
.mod-stage__text,
.mod-case__text,
.mod-outcome__text,
.mod-faq__answer,
.mod-closing__text {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    letter-spacing: 0;
}

/* Small, captions: sans 400 */
.mod-window__sub,
.mod-metric__label,
.mod-metric__tag,
.mod-scene__caption,
.mod-outcomes__aside,
.mod-assure__item span,
.mod-stage__list li,
.mod-stage__hint,
.mod-note__words {
    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 (the sample workspace's names and pills, the choices, the tags, the systems) */
.mod-toggle__btn,
.mod-chip,
.mod-status,
.mod-pill,
.mod-panel__title,
.mod-window__name,
.mod-scene__demo,
.mod-item__name,
.mod-assure__item strong,
.mod-note__words strong,
.mod-case__tags li,
.mod-env__item {
    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 */
.mod-btn,
.mod-crumbs__list {
    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 */
.mod-eyebrow,
.mod-badge,
.mod-scene__tag,
.mod-step__no,
.mod-acc__no {
    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;
}

/* ------------------------------------------------------------------ */
/* The page                                                            */
/* ------------------------------------------------------------------ */

.mod {
    background: var(--mod-surface);
    color: var(--mod-ink);
}

.mod-eyebrow {
    margin: 0;
    color: var(--mod-eyebrow);
}

/* a label with a short line before it, as the design's hero has it */
.mod-eyebrow--line {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mod-eyebrow--line::before {
    content: "";
    flex: none;
    width: 1.5rem;
    height: 2px;
    background: currentColor;
}

/* a section's heading (an h2, the H2 role), its lines balanced */
.mod-title {
    margin: 0.5rem 0 0;
    color: var(--mod-ink);
    text-wrap: balance;
}

.mod-accent {
    color: var(--mod-eyebrow);
}

.mod-lead {
    margin: 0.75rem 0 0;
    max-width: 36rem;
    color: var(--mod-muted);
    text-wrap: pretty;
}

/* a section has its room over it and none under it (--gap-max); a band has the room it needs inside itself */
.mod-section {
    padding-top: var(--gap-max);
}

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

/* this page's icons are lines (site.css's .icon fills with currentColor); the site's own icon, in the trail, is left as it is */
.mod .mod-icon {
    fill: none;
}

/* ------------------------------------------------------------------ */
/* Buttons: pills that answer the press itself                         */
/* ------------------------------------------------------------------ */

.mod-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    min-height: 3rem;
    padding: 0.625rem 1.5rem;
    border: 1px solid transparent;
    max-width: 100%;
    border-radius: 999px;
    overflow-wrap: anywhere;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), border-color 200ms var(--ease-standard),
        color 200ms var(--ease-standard), box-shadow 250ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.mod-btn .icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    transition: translate var(--spring) var(--ease-spring);
}

.mod-btn--filled {
    background: var(--mod-blue);
    color: var(--mod-on-blue);
    box-shadow: 0 11px 20px -13px var(--mod-blue);
}

.mod-btn--filled:hover {
    background: var(--mod-blue-hover);
    color: var(--mod-on-blue);
}

.mod-btn--outlined {
    border-color: var(--mod-outline);
    background: var(--mod-outline-bg);
    color: var(--mod-outline-ink);
}

.mod-btn--outlined:hover {
    background: var(--mod-outline-hover);
    color: var(--mod-outline-ink);
}

/* on the closing card: a white pill, and one with a white line */
.mod-btn--light {
    background: #ffffff;
    color: var(--mod-light-ink);
}

.mod-btn--light:hover {
    background: var(--mod-light-hover);
    color: var(--mod-light-ink);
}

.mod-btn--ghost {
    border-color: rgb(255 255 255 / 0.5);
    background: transparent;
    color: #ffffff;
}

.mod-btn--ghost:hover {
    background: rgb(255 255 255 / 0.14);
    color: #ffffff;
}

@media (hover: hover) and (pointer: fine) {
    /* an arrow moves the way it points */
    .mod-btn:hover .mod-icon--arrow-up-right {
        translate: 2px -2px;
    }

    .mod-btn:hover .mod-icon--arrow-right {
        translate: 3px 0;
    }

    .mod-btn:hover .mod-icon--arrow-down {
        translate: 0 3px;
    }
}

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

.mod-hero {
    position: relative;
    overflow: hidden;
    padding-bottom: var(--gap-max);
    border-bottom: 1px solid var(--mod-hero-edge);
    background: var(--mod-hero-bg);
}

/* two rings at its right, as the design draws them */
.mod-hero::before,
.mod-hero::after {
    content: "";
    position: absolute;
    border: 1px solid var(--mod-hero-ring);
    border-radius: 50%;
    pointer-events: none;
}

.mod-hero::before {
    top: -24rem;
    right: -18rem;
    width: 51rem;
    height: 51rem;
}

.mod-hero::after {
    top: -33rem;
    right: -29rem;
    width: 70rem;
    height: 70rem;
    border-color: var(--mod-hero-ring-2);
}

.mod-hero > .container {
    position: relative;
    z-index: 1;
    padding-top: 0.75rem;
}

.mod-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--mod-muted);
}

.mod-crumbs__list li {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.mod-crumbs__list .icon {
    width: 1rem;
    height: 1rem;
    color: var(--mod-crumb-chevron);
}

/* a target as tall as a fingertip */
.mod-crumbs__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding-inline: 0.125rem;
    color: inherit;
    text-decoration: none;
}

.mod-crumbs__link:hover {
    color: var(--mod-ink);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.mod-crumbs__current {
    color: var(--mod-ink);
}

.mod-hero__grid {
    display: grid;
    gap: 1rem var(--gap-max);
    align-items: center;
    margin-top: 0.5rem;
}

.mod-hero__words,
.mod-scene {
    min-width: 0;
}

.mod-hero__title {
    margin: 0.75rem 0 0;
    color: var(--mod-ink);
    text-wrap: balance;
}

.mod-hero__lead {
    margin: 1rem 0 0;
    max-width: 34rem;
    color: var(--mod-muted);
    text-wrap: pretty;
}

.mod-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* three short promises: a line over its few words; ruled apart from 40rem */
.mod-assure {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.mod-assure__item {
    display: grid;
    align-content: start;
    gap: 0.125rem;
    min-width: 0;
    color: var(--mod-muted);
}

.mod-assure__item strong {
    color: var(--mod-ink);
}

/* ------------------------------------------------------------------ */
/* The sample workspace: the same software before the work and after it, which a visitor switches between */
/* ------------------------------------------------------------------ */

.mod-scene {
    position: relative;
    isolation: isolate;
}

.mod-scene::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 11% -9% 5% 7%;
    background: var(--mod-scene-glow);
    pointer-events: none;
}

.mod-scene__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-bottom: 0.75rem;
}

.mod-scene__tag {
    margin: 0;
    color: var(--mod-muted);
}

.mod-scene__demo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--mod-muted);
}

.mod-dot {
    display: inline-block;
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--mod-live-dot);
    box-shadow: 0 0 0 4px var(--mod-live-ring);
}

/* the choice of view: a pill with two ends, the one shown filled */
.mod-toggle {
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    max-width: 100%;
    gap: 0.25rem;
    margin-bottom: 0.75rem;
    padding: 0.25rem;
    border: 1px solid var(--mod-toggle-edge);
    border-radius: 999px;
    background: var(--mod-card);
}

.mod-toggle[hidden] {
    display: none;
}

.mod-toggle__btn {
    min-height: 2.75rem;
    max-width: 100%;
    padding: 0.25rem 1rem;
    border: 0;
    border-radius: 999px;
    overflow-wrap: anywhere;
    background: transparent;
    color: var(--mod-muted);
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), color 200ms var(--ease-standard),
        box-shadow 250ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.mod-toggle__btn:hover {
    color: var(--mod-ink);
}

.mod-toggle__btn:active {
    scale: var(--press-scale);
    transition-duration: 200ms, 200ms, 250ms, var(--press-in);
}

.mod-toggle__btn[aria-pressed="true"] {
    background: var(--mod-blue);
    color: var(--mod-on-blue);
    box-shadow: 0 4px 11px var(--mod-toggle-glow);
}

.mod-window {
    container: mod-window / inline-size;
    border: 1px solid var(--mod-card-edge);
    border-radius: 1.1875rem;
    background: var(--mod-card);
    box-shadow: var(--mod-card-shadow);
    overflow: hidden;
}

.mod-window__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mod-window-edge);
    background: var(--mod-window-bar);
}

.mod-window__name {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    color: var(--mod-muted);
}

.mod-window__name > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.mod-window__dots {
    display: inline-flex;
    flex: none;
    gap: 0.375rem;
}

.mod-window__dots i {
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--mod-window-dot);
}

.mod-badge {
    flex: none;
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    background: var(--mod-badge-bg);
    color: var(--mod-badge-ink);
}

.mod-window__body {
    padding: 1rem;
    background: var(--mod-body-bg);
}

.mod-window__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1rem;
}

.mod-window__head > div {
    min-width: 0;
}

.mod-window__title {
    margin: 0;
    color: var(--mod-ink);
    overflow-wrap: anywhere;
}

.mod-window__sub {
    margin: 0.125rem 0 0;
    color: var(--mod-muted);
}

.mod-status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    background: var(--mod-status-bg);
    color: var(--mod-status-ink);
}

.mod-status .mod-dot {
    width: 0.4375rem;
    height: 0.4375rem;
    background: currentColor;
    box-shadow: none;
}

.mod-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0;
}

.mod-metric {
    min-width: 0;
    padding: 0.625rem;
    border: 1px solid var(--mod-metric-edge);
    border-radius: 0.75rem;
    background: var(--mod-metric-bg);
}

.mod-metric dt,
.mod-metric dd {
    margin: 0;
}

.mod-metric__label {
    color: var(--mod-muted);
    overflow-wrap: anywhere;
}

.mod-metric__value {
    margin-top: 0.125rem;
    color: var(--mod-metric-ink);
    overflow-wrap: anywhere;
}

.mod-metric__tag {
    margin-top: 0.125rem;
    color: var(--mod-tag-ink);
    overflow-wrap: anywhere;
}

.mod-window__grid {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.mod-panel {
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--mod-panel-edge);
    border-radius: 0.75rem;
}

.mod-panel__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.5rem;
    margin: 0;
    color: var(--mod-muted);
}

.mod-live {
    display: inline-flex;
    align-items: center;
    flex: none;
    gap: 0.375rem;
}

.mod-chart {
    opacity: var(--mod-chart-opacity);
    filter: var(--mod-chart-filter);
}

.mod-chart__svg {
    display: block;
    width: 100%;
    height: 6.75rem;
    margin-top: 0.25rem;
}

.mod-chart__grid {
    stroke: var(--mod-chart-grid);
}

.mod-chart__fill {
    fill: var(--mod-chart-fill);
}

.mod-chart__line {
    stroke: var(--mod-chart-line);
}

.mod-items {
    filter: var(--mod-chart-filter);
}

.mod-items__list {
    display: grid;
    gap: 0.625rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.mod-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mod-item__tile {
    flex: none;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 0.375rem;
    background: var(--mod-tile);
}

.mod-item__name {
    flex: 1;
    min-width: 0;
    color: var(--mod-ink);
    overflow-wrap: anywhere;
}

.mod-pill {
    flex: 0 1 auto;
    min-width: 0;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    overflow-wrap: anywhere;
    background: var(--mod-pill-bg);
    color: var(--mod-pill-ink);
}

.mod-pill--muted {
    background: var(--mod-pill-muted-bg);
    color: var(--mod-pill-muted-ink);
}

/* Where the window is wide enough for the chart and the list side by side they stand so: the window's own width decides. */
@container mod-window (min-width: 34rem) {
    .mod-window__body {
        padding: 1.25rem;
    }

    .mod-window__grid {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    }
}

/* What changes with the view is in the markup once for each (a .mod-v, with its data-v); the one that the scene's data-view
   names is shown, and the modern one until a visitor chooses the other */
.mod-v {
    display: none;
}

.mod-scene[data-view="modern"] .mod-v[data-v="modern"],
.mod-scene[data-view="legacy"] .mod-v[data-v="legacy"] {
    display: inline;
}

/* and what the old workspace wears: rust where the new one is green, greys where it was live */
.mod-scene[data-view="legacy"] {
    --mod-body-bg: var(--mod-legacy-body);
    --mod-metric-bg: var(--mod-legacy-metric-bg);
    --mod-metric-ink: var(--mod-legacy-value);
    --mod-tag-ink: var(--mod-legacy-tag);
    --mod-status-bg: var(--mod-legacy-status-bg);
    --mod-status-ink: var(--mod-legacy-status-ink);
    --mod-badge-bg: var(--mod-legacy-badge-bg);
    --mod-badge-ink: var(--mod-legacy-badge-ink);
    --mod-tile: var(--mod-legacy-tile);
    --mod-pill-bg: var(--mod-legacy-pill-bg);
    --mod-pill-ink: var(--mod-legacy-pill-ink);
    --mod-pill-muted-bg: var(--mod-legacy-pill-muted-bg);
    --mod-pill-muted-ink: var(--mod-legacy-pill-muted-ink);
    --mod-chart-line: var(--mod-legacy-chart-line);
    --mod-chart-fill: var(--mod-legacy-chart-fill);
    --mod-chart-opacity: var(--mod-legacy-chart-opacity);
    --mod-chart-filter: var(--mod-legacy-chart-filter);
}

.mod-scene__caption {
    margin: 0.75rem 0 0;
    color: var(--mod-muted);
}

.mod-note {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    margin: 1rem 0 0;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--mod-note-edge);
    border-radius: 0.8125rem;
    background: var(--mod-note-bg);
    box-shadow: var(--mod-note-shadow);
    color: var(--mod-muted);
}

.mod-note__tick {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--mod-note-tick-bg);
    color: var(--mod-note-tick);
}

.mod-note__tick .icon {
    width: 0.875rem;
    height: 0.875rem;
}

.mod-note__words {
    min-width: 0;
}

.mod-note__words strong {
    display: block;
    color: var(--mod-ink);
}

/* ------------------------------------------------------------------ */
/* What modernising comes to                                           */
/* ------------------------------------------------------------------ */

.mod-outcomes__head {
    display: grid;
    gap: 0.75rem;
}

.mod-outcomes__head > div {
    min-width: 0;
}

.mod-outcomes__aside {
    max-width: 20rem;
    margin: 0;
    color: var(--mod-muted);
}

.mod-outcomes__list {
    display: grid;
    gap: var(--gap-max);
    margin: var(--gap-max) 0 0;
    padding: 0;
    list-style: none;
}

.mod-outcome {
    min-width: 0;
    padding-top: 0.75rem;
    border-top: 2px solid var(--mod-outcome-rule);
}

.mod-outcome:first-child {
    border-color: var(--mod-outcome-rule-first);
}

.mod-outcome__label {
    color: var(--mod-outcome-num);
}

.mod-outcome__title {
    margin: 0.5rem 0 0.25rem;
    color: var(--mod-ink);
}

.mod-outcome__text {
    max-width: 24rem;
    margin: 0;
    color: var(--mod-muted);
}

/* ------------------------------------------------------------------ */
/* How an engagement goes: a deep blue band, the stages beside a card   */
/* ------------------------------------------------------------------ */

.mod-approach {
    position: relative;
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    overflow: hidden;
    background: var(--mod-night);
    color: #ffffff;
}

/* a ring at its right */
.mod-approach::after {
    content: "";
    position: absolute;
    top: -16rem;
    right: -12rem;
    width: 44rem;
    height: 44rem;
    border: 1px solid var(--mod-night-ring);
    border-radius: 50%;
    pointer-events: none;
}

.mod-approach > .container {
    position: relative;
    z-index: 1;
}

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

.mod-approach__words,
.mod-journey {
    min-width: 0;
}

.mod-approach .mod-eyebrow {
    color: var(--mod-night-eyebrow);
}

.mod-approach .mod-title {
    color: #ffffff;
}

.mod-approach .mod-lead {
    color: var(--mod-night-text);
}

/* the stages' names: boxes in a grid on a phone and a tablet, a list with an arrow beside the card from 64rem */
.mod-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.25rem;
    margin-top: 1rem;
}

.mod-step {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 0.25rem;
    min-height: 3.5rem;
    padding: 0.625rem 0.25rem;
    border: 1px solid var(--mod-step-line);
    border-radius: 0.5625rem;
    color: var(--mod-step-ink);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: color 200ms var(--ease-standard), border-color 200ms var(--ease-standard),
        background-color 200ms var(--ease-standard), padding-left var(--spring) var(--ease-spring),
        scale var(--spring-quick) var(--ease-spring);
}

.mod-step:hover,
.mod-step[aria-selected="true"] {
    border-color: var(--mod-step-on-edge);
    background: var(--mod-step-on-bg);
    color: #ffffff;
}

.mod-step:active {
    scale: var(--press-scale);
    transition-duration: 200ms, 200ms, 200ms, var(--spring), var(--press-in);
}

.mod-step__no {
    color: var(--mod-step-no);
}

.mod-step__name {
    color: inherit;
    overflow-wrap: anywhere;
}

.mod-step .icon {
    display: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    color: var(--mod-step-arrow);
    opacity: 0;
    transition: opacity 200ms var(--ease-standard);
}

.mod-stage {
    position: relative;
    isolation: isolate;
    padding: 1.5rem 1.25rem;
    border: 1px solid var(--mod-stage-edge);
    border-radius: clamp(1rem, 1.5vw, 1.375rem);
    overflow: hidden;
    background: var(--mod-stage-card);
    box-shadow: var(--mod-stage-shadow);
}

.mod-stage::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -13rem;
    right: -7rem;
    width: 28rem;
    height: 28rem;
    background: var(--mod-stage-glow);
    opacity: 0.7;
    pointer-events: none;
}

/* a page without a script has every stage one after another; the room between two is the limit's */
.mod-stage:not([hidden]) ~ .mod-stage:not([hidden]) {
    margin-top: var(--gap-max);
}

.mod-stage__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin: 0;
}

.mod-stage__meta .mod-eyebrow {
    color: var(--mod-stage-meta);
}

.mod-stage__no {
    margin: 1rem 0 0;
    color: var(--mod-stage-no);
}

.mod-stage__title {
    margin: 0.5rem 0 0;
    color: #ffffff;
    text-wrap: balance;
}

.mod-stage__text {
    max-width: 28rem;
    margin: 0.75rem 0 0;
    color: var(--mod-stage-text);
    text-wrap: pretty;
}

.mod-approach .mod-stage__label {
    margin: 1rem 0 0;
    color: var(--mod-stage-label);
}

.mod-stage__list {
    display: grid;
    gap: 0.625rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.mod-stage__list li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--mod-stage-item);
}

.mod-tick {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--mod-tick-bg);
    color: var(--mod-tick-ink);
}

.mod-tick .icon {
    width: 0.75rem;
    height: 0.75rem;
}

.mod-stage__progress {
    display: flex;
    gap: 0.3125rem;
    margin-top: 1.25rem;
}

.mod-stage__progress i {
    flex: 1;
    height: 3px;
    border-radius: 10px;
    background: var(--mod-progress);
}

.mod-stage__progress i.is-on {
    background: var(--mod-progress-on);
}

.mod-stage__controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.mod-stage__controls[hidden] {
    display: none;
}

.mod-round {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--mod-round-edge);
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), border-color 200ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.mod-round:hover {
    border-color: #ffffff;
    background: var(--mod-round-hover);
}

.mod-round:active {
    scale: var(--press-scale);
    transition-duration: 200ms, 200ms, var(--press-in);
}

.mod-stage__hint {
    margin-left: auto;
    color: var(--mod-hint);
}

/* ------------------------------------------------------------------ */
/* What it does: the heading beside six things that open                */
/* ------------------------------------------------------------------ */

.mod-what__inner {
    display: grid;
    gap: var(--gap-max);
    align-items: start;
}

.mod-what__intro {
    min-width: 0;
}

.mod-what__intro .mod-btn {
    margin-top: 1rem;
}

.mod-acc {
    min-width: 0;
    border-top: 1px solid var(--mod-line-strong);
}

.mod-acc__item {
    border-bottom: 1px solid var(--mod-line-strong);
}

.mod-acc__summary {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) 2rem;
    align-items: center;
    column-gap: 0.75rem;
    min-height: 4rem;
    padding: 1rem 0.125rem;
    list-style: none;
    cursor: pointer;
}

.mod-acc__summary::-webkit-details-marker {
    display: none;
}

.mod-acc__no {
    color: var(--mod-muted);
}

.mod-acc__name {
    color: var(--mod-ink);
    overflow-wrap: anywhere;
    transition: color 200ms var(--ease-standard);
}

.mod-acc__plus {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--mod-line-strong);
    border-radius: 50%;
    color: var(--mod-eyebrow);
    transition: rotate var(--spring) var(--ease-spring), background-color 200ms var(--ease-standard),
        border-color 200ms var(--ease-standard);
}

.mod-acc__plus .icon {
    width: 1rem;
    height: 1rem;
}

.mod-acc__item[open] > .mod-acc__summary .mod-acc__plus {
    border-color: var(--mod-blue-soft-edge);
    background: var(--mod-blue-soft);
    rotate: 45deg;
}

.mod-acc__item[open] > .mod-acc__summary .mod-acc__name {
    color: var(--mod-eyebrow);
}

@media (hover: hover) {
    .mod-acc__item:not([open]) > .mod-acc__summary:hover .mod-acc__name {
        color: var(--mod-eyebrow);
    }
}

.mod-acc__detail {
    max-width: 42rem;
    padding: 0 0.125rem 1.25rem 3rem;
}

.mod-acc__text {
    margin: 0;
    color: var(--mod-muted);
    text-wrap: pretty;
}

/* where the browser can animate a disclosure's content, a thing opens to its height and closes back, on the site's spring */
@supports (interpolate-size: allow-keywords) {
    .mod-acc__item {
        interpolate-size: allow-keywords;
    }

    .mod-acc__item::details-content {
        block-size: 0;
        overflow: clip;
        opacity: 0;
        transition: block-size var(--spring) var(--ease-spring), opacity 250ms var(--ease-standard),
            content-visibility var(--spring) allow-discrete;
    }

    .mod-acc__item[open]::details-content {
        block-size: auto;
        opacity: 1;
    }
}

/* ------------------------------------------------------------------ */
/* Where to start: three situations, each with the first step           */
/* ------------------------------------------------------------------ */

.mod-compare {
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    border-block: 1px solid var(--mod-band-edge);
    background: var(--mod-band);
}

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

.mod-compare__words,
.mod-cases {
    min-width: 0;
}

.mod-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.mod-chips[hidden] {
    display: none;
}

.mod-chip {
    min-height: 2.75rem;
    padding: 0.375rem 1rem;
    border: 1px solid var(--mod-chip-edge);
    border-radius: 999px;
    background: transparent;
    color: var(--mod-chip-ink);
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), border-color 200ms var(--ease-standard),
        color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.mod-chip:hover {
    border-color: var(--mod-blue);
}

.mod-chip:active {
    scale: var(--press-scale);
    transition-duration: 200ms, 200ms, 200ms, var(--press-in);
}

.mod-chip[aria-selected="true"] {
    border-color: var(--mod-blue);
    background: var(--mod-blue);
    color: var(--mod-on-blue);
}

.mod-case {
    padding: 1.25rem;
    border: 1px solid var(--mod-case-edge);
    border-radius: 1.125rem;
    background: var(--mod-case-card);
    box-shadow: var(--mod-case-shadow);
}

.mod-case:not([hidden]) ~ .mod-case:not([hidden]) {
    margin-top: var(--gap-max);
}

.mod-case__label {
    color: var(--mod-case-label);
}

.mod-case__title {
    margin: 0.5rem 0 0;
    color: var(--mod-ink);
}

.mod-case__text {
    max-width: 30rem;
    margin: 0.75rem 0 0;
    color: var(--mod-muted);
    text-wrap: pretty;
}

.mod-case__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.mod-case__tags li {
    padding: 0.375rem 0.75rem;
    border-radius: 0.4375rem;
    background: var(--mod-tag-bg);
    color: var(--mod-tag-ink-2);
}

/* ------------------------------------------------------------------ */
/* The systems it works with                                           */
/* ------------------------------------------------------------------ */

.mod-env {
    margin-top: var(--gap-max);
    padding-block: 1.25rem;
    border-block: 1px solid var(--mod-line);
}

.mod-env__inner {
    display: grid;
    gap: 0.75rem;
    align-items: center;
}

.mod-env__inner > div {
    min-width: 0;
}

.mod-env__title {
    max-width: 20rem;
    margin: 0.25rem 0 0;
    color: var(--mod-ink);
}

.mod-env__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem var(--gap-max);
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    color: var(--mod-muted);
}

.mod-env__item {
    position: relative;
}

/* A dot in the gap before each item, said by no screen reader (an empty text alternative where the browser knows one).
   The one before the first item of a line lies outside the list, which clips it: a line that wraps never begins with one. */
.mod-env__item::before {
    content: "•";
    content: "•" / "";
    position: absolute;
    left: calc(var(--gap-max) / -2);
    translate: -50% 0;
    color: var(--mod-env-dot);
}

/* ------------------------------------------------------------------ */
/* The questions                                                       */
/* ------------------------------------------------------------------ */

.mod-faq__inner {
    display: grid;
    gap: var(--gap-max);
    align-items: start;
}

.mod-faq__head {
    min-width: 0;
}

.mod-faq__head .mod-btn {
    margin-top: 1rem;
}

.mod-faq__list {
    min-width: 0;
    border-top: 1px solid var(--mod-line-strong);
}

.mod-faq__item {
    border-bottom: 1px solid var(--mod-line-strong);
}

.mod-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding-block: 1rem;
    color: var(--mod-ink);
    list-style: none;
    cursor: pointer;
    transition: color 200ms var(--ease-standard);
}

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

/* a long word breaks rather than push the plus out of the window, at 200% text on a small screen */
.mod-faq__question > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.mod-faq__question .icon {
    flex: none;
    color: var(--mod-eyebrow);
    transition: rotate var(--spring) var(--ease-spring);
}

.mod-faq__item[open] > .mod-faq__question .icon {
    rotate: 45deg;
}

@media (hover: hover) {
    .mod-faq__item:not([open]) > .mod-faq__question:hover {
        color: var(--mod-eyebrow);
    }
}

.mod-faq__answer {
    padding-bottom: 1.25rem;
    color: var(--mod-muted);
}

.mod-faq__answer p {
    max-width: 44rem;
    margin: 0;
}

@supports (interpolate-size: allow-keywords) {
    .mod-faq__item {
        interpolate-size: allow-keywords;
    }

    .mod-faq__item::details-content {
        block-size: 0;
        overflow: clip;
        opacity: 0;
        transition: block-size var(--spring) var(--ease-spring), opacity 250ms var(--ease-standard),
            content-visibility var(--spring) allow-discrete;
    }

    .mod-faq__item[open]::details-content {
        block-size: auto;
        opacity: 1;
    }
}

/* ------------------------------------------------------------------ */
/* The closing call: a blue card in the column                          */
/* ------------------------------------------------------------------ */

.mod-closing-wrap {
    padding-block: var(--gap-max);
}

.mod-closing {
    position: relative;
    isolation: isolate;
    padding: 1.75rem 1.25rem;
    overflow: hidden;
    border-radius: clamp(1rem, 1.5vw, 1.5rem);
    background: var(--mod-closing);
    color: #ffffff;
}

/* two rings at its right, from 72rem: on a narrower card its words reach across it, and a ring's line lay over them (3.5:1) */
.mod-closing::before,
.mod-closing::after {
    content: "";
    display: none;
    position: absolute;
    z-index: -1;
    border: 1px solid var(--mod-closing-ring);
    border-radius: 50%;
    pointer-events: none;
}

.mod-closing::before {
    top: -14rem;
    right: -15rem;
    width: 38rem;
    height: 38rem;
    border-color: var(--mod-closing-ring-2);
}

.mod-closing::after {
    top: -8rem;
    right: -6rem;
    width: 27rem;
    height: 27rem;
}

.mod-closing__eyebrow {
    color: var(--mod-closing-eyebrow);
}

.mod-closing__title {
    max-width: 40rem;
    margin: 0.5rem 0 0;
    color: #ffffff;
    text-wrap: balance;
}

.mod-closing__text {
    max-width: 38rem;
    margin: 0.75rem 0 0;
    color: var(--mod-closing-text);
    text-wrap: pretty;
}

.mod-closing__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

/* ------------------------------------------------------------------ */
/* Where a script chooses                                              */
/* ------------------------------------------------------------------ */

/* a page without a script has every stage and every starting point one after another; where a script will make the choice,
   only the first, until it has (the markup has no `hidden` on them, which a page without a script could not undo) */
@media (scripting: enabled) {
    [data-tabs]:not(.is-ready) .mod-stage:not(:first-child),
    [data-tabs]:not(.is-ready) .mod-case:not(:first-child) {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* From 40rem                                                          */
/* ------------------------------------------------------------------ */

@media (min-width: 40rem) {
    .mod-btn {
        overflow-wrap: normal;
    }

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

    .mod-assure__item {
        padding-inline: 1rem;
        border-left: 1px solid var(--mod-line-strong);
    }

    .mod-assure__item:first-child {
        padding-left: 0;
        border-left: 0;
    }

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

    .mod-stage {
        padding: 1.75rem;
    }
}

/* ------------------------------------------------------------------ */
/* From 48rem                                                          */
/* ------------------------------------------------------------------ */

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

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

    .mod-what__inner {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    }

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

    .mod-faq__inner {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }

    .mod-closing {
        padding: 2.25rem clamp(1.5rem, 4.8vw, 4.7rem);
    }
}

/* ------------------------------------------------------------------ */
/* From 64rem                                                          */
/* ------------------------------------------------------------------ */

@media (min-width: 64rem) {
    /* the heading stays in view beside the list that opens and closes */
    .mod-what__intro {
        position: sticky;
        top: calc(var(--top-bar-h) + 1.5rem);
    }

    .mod-approach__inner {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }

    /* the stages become a list, the one chosen with an arrow and a step in */
    .mod-steps {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }

    .mod-step {
        display: flex;
        justify-items: initial;
        align-items: center;
        gap: 1.25rem;
        min-height: 3.75rem;
        padding: 0.75rem 0.375rem;
        border: 0;
        border-bottom: 1px solid var(--mod-step-line);
        border-radius: 0;
        background: transparent;
        text-align: left;
    }

    .mod-step:hover,
    .mod-step[aria-selected="true"] {
        padding-left: 0.8rem;
        background: transparent;
    }

    .mod-step .icon {
        display: block;
    }

    .mod-step:hover .icon,
    .mod-step[aria-selected="true"] .icon {
        opacity: 1;
    }

    .mod-env__inner {
        grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
        gap: var(--gap-max);
    }

    .mod-stage {
        padding: 2rem;
    }
}

/* ------------------------------------------------------------------ */
/* From 72rem: the hero in two columns                                  */
/* ------------------------------------------------------------------ */

@media (min-width: 72rem) {
    .mod-hero__grid {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    }

    .mod-closing {
        background: var(--mod-closing-wide);
    }

    .mod-closing::before,
    .mod-closing::after {
        display: block;
    }

    /* the note lies over the window's foot at its right, as the design lays it */
    .mod-note {
        position: absolute;
        right: -1rem;
        bottom: -1.25rem;
        margin: 0;
    }
}

/* ------------------------------------------------------------------ */
/* Materials for a visitor who asks for more contrast                   */
/* ------------------------------------------------------------------ */

@media (prefers-contrast: more) {
    .mod-window,
    .mod-metric,
    .mod-panel,
    .mod-chip,
    .mod-toggle,
    .mod-acc__plus,
    .mod-case,
    .mod-btn--outlined {
        border-color: var(--mod-ink);
    }

    .mod-hero {
        background: var(--mod-surface);
    }

    .mod-hero::before,
    .mod-hero::after,
    .mod-scene::before {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* Motion                                                              */
/* ------------------------------------------------------------------ */

/* As the page opens the hero's words settle (the title and the lead only rise, so that they are painted at once), the rest comes
   in after them, and the workspace rises into place. */
@media (prefers-reduced-motion: no-preference) {
    .mod-hero__title,
    .mod-hero__lead {
        animation: hero-settle var(--spring-slow) var(--ease-spring) both;
    }

    .mod-hero__lead {
        animation-delay: 60ms;
    }

    .mod-crumbs,
    .mod-hero__words > .mod-eyebrow,
    .mod-hero__actions,
    .mod-assure {
        animation: hero-enter var(--spring-slow) var(--ease-spring) both;
    }

    .mod-hero__actions {
        animation-delay: 140ms;
    }

    .mod-assure {
        animation-delay: 220ms;
    }

    .mod-scene {
        animation: mod-rise var(--spring-slow) var(--ease-spring) 200ms both;
    }

    .mod-stage:not([hidden]),
    .mod-case:not([hidden]) {
        animation: mod-swap var(--spring) var(--ease-spring) both;
    }
}

@keyframes mod-rise {
    from {
        opacity: 0;
        translate: 0 1rem;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@keyframes mod-swap {
    from {
        opacity: 0;
        translate: 0 0.5rem;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

@media print {
    .mod-hero,
    .mod-compare {
        background: none;
    }

    .mod-approach,
    .mod-closing,
    .mod-stage {
        background: none;
        color: inherit;
    }

    .mod-hero::before,
    .mod-hero::after,
    .mod-approach::after,
    .mod-closing::before,
    .mod-closing::after {
        display: none;
    }
}