/* The discovery and design page (services/pages/discovery-and-design.html), after its own design (2026-10-28: "The
   discovery-and-design designs but use existing hero image dont replace"). Until then the page was drawn to the landing design
   (css/pages/landing.css), which has no rule for it now. The hero's picture is the one the page has always had.

   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 the sample booking in 9 to 13px: the sample is set in the roles'
   sizes, so it is larger, its choices stand one under another where its window is narrow, and its steps are tags, not
   headings). Mobile first: one column, the briefs under their choice on a phone and beside it from 48rem, the sample's
   explanation over its window and beside it from 64rem, the hero in two columns from 64rem. Where the page asks for a script
   (the brief, the step of the booking) 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 .dis; its colours are the --dis-* tokens, set again for the dark theme, and its
   text takes typography.md's two text colours through them. The deep blue band is deep blue on both themes, as the design draws
   it. */

:root {
    --dis-surface: #ffffff;
    /* the text: headings and body text in typography.md's primary colour, small text in its secondary */
    --dis-ink: var(--text-primary);
    --dis-muted: var(--text-secondary);
    --dis-eyebrow: #0a4ce9;
    --dis-crumb-chevron: #8790a8;
    --dis-blue: #0154e5;
    --dis-blue-hover: #0043bd;
    --dis-on-blue: #ffffff;
    --dis-blue-soft: #e8f1ff;
    --dis-blue-soft-edge: #cbdcff;
    --dis-outline: #b4c9e8;
    --dis-outline-ink: #0f47a8;
    --dis-outline-bg: rgb(255 255 255 / 0.74);
    --dis-outline-hover: #eef6ff;
    /* the hero: a pale blue that deepens to the right, a ring at its top right and a soft swell at its foot */
    --dis-hero-bg: linear-gradient(111deg, #f9fbff 0%, #f0f5ff 63%, #e9f1ff 100%);
    --dis-hero-ring: #d5e3ff;
    --dis-hero-swell: rgb(224 236 255 / 0.75);
    --dis-hero-edge: #e4ebf5;
    --dis-art-edge: rgb(255 255 255 / 0.8);
    --dis-art-shadow: 0 20px 40px rgb(10 48 104 / 0.14);
    --dis-art-bg: #f2f7ff;
    --dis-line: #e4eaf2;
    --dis-line-strong: #d3deec;
    --dis-card: #ffffff;
    --dis-card-edge: #cddcee;
    --dis-card-shadow: 0 18px 56px rgb(29 65 112 / 0.12), 0 4px 14px rgb(16 50 101 / 0.05);
    --dis-dot: #0bc48d;
    --dis-tick-bg: #d3f4e5;
    --dis-tick: #0b7a57;
    /* the deep blue band of the starting points, and the brief on it */
    --dis-night: #091d46;
    --dis-night-ring: rgb(255 255 255 / 0.1);
    --dis-night-eyebrow: #8cb9ff;
    --dis-night-text: #b8cae5;
    --dis-night-rule: #476080;
    --dis-night-ink: #b8c9e2;
    --dis-night-no: #7aa6e0;
    --dis-night-on: #ffffff;
    --dis-night-on-bg: rgb(255 255 255 / 0.05);
    --dis-night-on-no: #82afff;
    --dis-night-arrow: #78b2ff;
    --dis-brief-bg: #f5f8ff;
    --dis-brief-top: #ffffff;
    --dis-brief-edge: #e1e8f3;
    --dis-brief-ink: #0b2047;
    --dis-brief-muted: #4a5a73;
    --dis-brief-kicker: #0b4fd8;
    --dis-brief-tag: #3f5f84;
    --dis-brief-tag-edge: #cfdcec;
    --dis-brief-rule: #c6d8f5;
    --dis-brief-step: #0b4fd8;
    --dis-brief-foot-bg: #e4edfe;
    --dis-brief-foot: #35516f;
    --dis-brief-check: #067a52;
    --dis-brief-shadow: 0 24px 60px rgb(0 0 0 / 0.2);
    /* the sample booking: its stage, its explanation and its window */
    --dis-stage-bg: linear-gradient(125deg, #f7faff, #eef5ff);
    --dis-stage-edge: #d9e3f1;
    --dis-stage-shadow: 0 22px 80px rgb(7 46 101 / 0.08);
    --dis-play-tag: #2454a2;
    --dis-insight-rule: #d2dff0;
    --dis-insight-label: #0a4ce9;
    --dis-step-bg: #ffffff;
    --dis-step-edge: #cedbef;
    --dis-step-ink: #35506f;
    --dis-step-hover: #e4edff;
    --dis-step-on: #0a55e8;
    --dis-step-on-ink: #ffffff;
    --dis-proto-bg: linear-gradient(145deg, #dfedff, #eaf2ff);
    --dis-window: #ffffff;
    --dis-window-edge: #dce7f7;
    --dis-window-shadow: 0 25px 75px rgb(21 60 126 / 0.17);
    --dis-window-rule: #e8edf6;
    --dis-window-ink: #152849;
    --dis-window-muted: #566b87;
    --dis-window-label: #3f6694;
    --dis-mark-bg: linear-gradient(145deg, #0a67ff, #0144be);
    --dis-demo-edge: #cbd7e8;
    --dis-demo-ink: #4a617f;
    --dis-progress: #e8eff9;
    --dis-progress-on: #0756f2;
    --dis-choice-bg: #ffffff;
    --dis-choice-edge: #d3deee;
    --dis-choice-hover: #7ba5fc;
    --dis-choice-on-bg: #edf4ff;
    --dis-choice-on-edge: #1965ee;
    --dis-choice-icon-bg: #e7efff;
    --dis-choice-icon: #0b4fd8;
    --dis-chip-bg: #eaf2ff;
    --dis-chip-on-bg: #dbeaff;
    --dis-chip-ink: #3a587c;
    --dis-check-edge: #a9b9cf;
    --dis-summary-bg: #eef5ff;
    --dis-summary-ink: #355a85;
    --dis-slot-off-bg: #f5f7fa;
    --dis-slot-off-ink: #6d7b8e;
    --dis-field-edge: #aebed3;
    --dis-field-ink: #213e60;
    --dis-field-focus: #3677f0;
    --dis-privacy-bg: #f0f6ff;
    --dis-privacy-ink: #4a617f;
    --dis-error-bg: #fff1f2;
    --dis-error-edge: #f3cbd1;
    --dis-error-ink: #9f2536;
    --dis-stamp-bg: #eff6ff;
    --dis-stamp-ink: #3e5a80;
    --dis-done-bg: #dcf8ed;
    --dis-done-ink: #067a52;
    --dis-receipt-bg: #f7faff;
    --dis-receipt-edge: #bfd2e9;
    --dis-action: #0756f2;
    --dis-action-hover: #0044c7;
    --dis-action-outline-edge: #c3d1e6;
    --dis-action-outline-ink: #2e4f7a;
    /* what it does, what is handed over, the questions */
    --dis-band: #fafcff;
    --dis-band-edge: #dde7f5;
    --dis-paper-bg: linear-gradient(150deg, #eef5ff, #fafcff);
    --dis-paper-edge: #dce6f5;
    --dis-paper-shadow: 0 17px 50px rgb(11 65 130 / 0.1);
    --dis-paper-rule: #d8e4f4;
    --dis-paper-tag: #35597f;
    --dis-faq-band: #f7faff;
    /* 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 bright end on a phone), the design's from 72rem, where its words stay in its dark left */
    --dis-closing: linear-gradient(115deg, #091b3c 5%, #10378a 70%, #1245a8 100%);
    --dis-closing-wide: linear-gradient(107deg, #06153d, #103ba0 70%, #0c5bef);
    --dis-closing-ring: rgb(125 165 255 / 0.55);
    --dis-closing-eyebrow: #b9d3ff;
    --dis-closing-text: #d2e0fb;
    --dis-light-ink: #0b2a63;
    --dis-light-hover: #e8f1ff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --dis-surface: #131314;
        --dis-ink: var(--text-primary);
        --dis-muted: var(--text-secondary);
        --dis-eyebrow: #a8c7fa;
        --dis-crumb-chevron: #7f889c;
        --dis-blue: #a8c7fa;
        --dis-blue-hover: #c2d8fc;
        --dis-on-blue: #062e6f;
        --dis-blue-soft: rgb(168 199 250 / 0.14);
        --dis-blue-soft-edge: rgb(168 199 250 / 0.42);
        --dis-outline: #5d7fbf;
        --dis-outline-ink: #a8c7fa;
        --dis-outline-bg: transparent;
        --dis-outline-hover: rgb(168 199 250 / 0.1);
        --dis-hero-bg: linear-gradient(111deg, #131720 0%, #121722 63%, #111a2a 100%);
        --dis-hero-ring: rgb(168 199 250 / 0.14);
        --dis-hero-swell: rgb(90 125 200 / 0.1);
        --dis-hero-edge: rgb(255 255 255 / 0.08);
        --dis-art-edge: rgb(255 255 255 / 0.12);
        --dis-art-shadow: 0 24px 48px rgb(0 0 0 / 0.5);
        --dis-art-bg: #1b1c1f;
        --dis-line: rgb(255 255 255 / 0.1);
        --dis-line-strong: rgb(168 199 250 / 0.3);
        --dis-card: #1b1c1f;
        --dis-card-edge: rgb(255 255 255 / 0.12);
        --dis-card-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 28px 56px -28px rgb(0 0 0 / 0.7);
        --dis-dot: #4be0b3;
        --dis-tick-bg: rgb(109 213 140 / 0.16);
        --dis-tick: #6dd58c;
        --dis-night: #0a1630;
        --dis-night-ring: rgb(255 255 255 / 0.08);
        --dis-brief-bg: #1b1c1f;
        --dis-brief-top: #202226;
        --dis-brief-edge: rgb(255 255 255 / 0.1);
        --dis-brief-ink: var(--text-primary);
        --dis-brief-muted: var(--text-secondary);
        --dis-brief-kicker: #a8c7fa;
        --dis-brief-tag: #b9c7e2;
        --dis-brief-tag-edge: rgb(255 255 255 / 0.2);
        --dis-brief-rule: rgb(168 199 250 / 0.4);
        --dis-brief-step: #a8c7fa;
        --dis-brief-foot-bg: rgb(168 199 250 / 0.12);
        --dis-brief-foot: #c6d4ee;
        --dis-brief-check: #6dd58c;
        --dis-brief-shadow: 0 24px 60px rgb(0 0 0 / 0.5);
        --dis-stage-bg: linear-gradient(125deg, #17181b, #15181d);
        --dis-stage-edge: rgb(255 255 255 / 0.1);
        --dis-stage-shadow: 0 22px 80px rgb(0 0 0 / 0.4);
        --dis-play-tag: #a8c7fa;
        --dis-insight-rule: rgb(255 255 255 / 0.14);
        --dis-insight-label: #a8c7fa;
        --dis-step-bg: transparent;
        --dis-step-edge: rgb(168 199 250 / 0.4);
        --dis-step-ink: #c6d4ee;
        --dis-step-hover: rgb(168 199 250 / 0.12);
        --dis-step-on: #a8c7fa;
        --dis-step-on-ink: #062e6f;
        --dis-proto-bg: linear-gradient(145deg, #1b2230, #171b25);
        --dis-window: #1b1c1f;
        --dis-window-edge: rgb(255 255 255 / 0.12);
        --dis-window-shadow: 0 25px 75px rgb(0 0 0 / 0.5);
        --dis-window-rule: rgb(255 255 255 / 0.1);
        --dis-window-ink: var(--text-primary);
        --dis-window-muted: var(--text-secondary);
        --dis-window-label: #9cbcf0;
        --dis-demo-edge: rgb(255 255 255 / 0.2);
        --dis-demo-ink: #b9c7e2;
        --dis-progress: rgb(255 255 255 / 0.1);
        --dis-progress-on: #a8c7fa;
        --dis-choice-bg: #202226;
        --dis-choice-edge: rgb(255 255 255 / 0.16);
        --dis-choice-hover: #6f9cf0;
        --dis-choice-on-bg: rgb(168 199 250 / 0.14);
        --dis-choice-on-edge: #a8c7fa;
        --dis-choice-icon-bg: rgb(168 199 250 / 0.14);
        --dis-choice-icon: #a8c7fa;
        --dis-chip-bg: rgb(168 199 250 / 0.12);
        --dis-chip-on-bg: rgb(168 199 250 / 0.2);
        --dis-chip-ink: #b9cdef;
        --dis-check-edge: #7f889c;
        --dis-summary-bg: rgb(168 199 250 / 0.12);
        --dis-summary-ink: #c6d4ee;
        --dis-slot-off-bg: #17181b;
        --dis-slot-off-ink: #8a93a5;
        --dis-field-edge: rgb(255 255 255 / 0.24);
        --dis-field-ink: var(--text-primary);
        --dis-field-focus: #a8c7fa;
        --dis-privacy-bg: rgb(168 199 250 / 0.1);
        --dis-privacy-ink: #b9c7e2;
        --dis-error-bg: rgb(255 120 140 / 0.12);
        --dis-error-edge: rgb(255 120 140 / 0.4);
        --dis-error-ink: #ffb3bf;
        --dis-stamp-bg: rgb(168 199 250 / 0.1);
        --dis-stamp-ink: #b9c7e2;
        --dis-done-bg: rgb(109 213 140 / 0.18);
        --dis-done-ink: #6dd58c;
        --dis-receipt-bg: rgb(255 255 255 / 0.04);
        --dis-receipt-edge: rgb(168 199 250 / 0.4);
        --dis-action: #a8c7fa;
        --dis-action-hover: #c2d8fc;
        --dis-action-outline-edge: rgb(255 255 255 / 0.24);
        --dis-action-outline-ink: #c6d4ee;
        --dis-band: #17181b;
        --dis-band-edge: rgb(255 255 255 / 0.08);
        --dis-paper-bg: linear-gradient(150deg, #1c2029, #181b21);
        --dis-paper-edge: rgb(255 255 255 / 0.12);
        --dis-paper-shadow: 0 17px 50px rgb(0 0 0 / 0.4);
        --dis-paper-rule: rgb(255 255 255 / 0.12);
        --dis-paper-tag: #a8c7fa;
        --dis-faq-band: #161719;
        --dis-closing: linear-gradient(115deg, #070f23 5%, #0c2760 74%, #0d3a9a 100%);
        --dis-closing-wide: linear-gradient(107deg, #050d22, #0a2260 70%, #0b3590);
        --dis-closing-ring: rgb(125 165 255 / 0.4);
        --dis-closing-eyebrow: #b9d3ff;
        --dis-closing-text: #cfdcf2;
        --dis-light-ink: #0b2a63;
        --dis-light-hover: #dbe8ff;
    }
}

:root[data-theme="dark"] {
    --dis-surface: #131314;
    --dis-ink: var(--text-primary);
    --dis-muted: var(--text-secondary);
    --dis-eyebrow: #a8c7fa;
    --dis-crumb-chevron: #7f889c;
    --dis-blue: #a8c7fa;
    --dis-blue-hover: #c2d8fc;
    --dis-on-blue: #062e6f;
    --dis-blue-soft: rgb(168 199 250 / 0.14);
    --dis-blue-soft-edge: rgb(168 199 250 / 0.42);
    --dis-outline: #5d7fbf;
    --dis-outline-ink: #a8c7fa;
    --dis-outline-bg: transparent;
    --dis-outline-hover: rgb(168 199 250 / 0.1);
    --dis-hero-bg: linear-gradient(111deg, #131720 0%, #121722 63%, #111a2a 100%);
    --dis-hero-ring: rgb(168 199 250 / 0.14);
    --dis-hero-swell: rgb(90 125 200 / 0.1);
    --dis-hero-edge: rgb(255 255 255 / 0.08);
    --dis-art-edge: rgb(255 255 255 / 0.12);
    --dis-art-shadow: 0 24px 48px rgb(0 0 0 / 0.5);
    --dis-art-bg: #1b1c1f;
    --dis-line: rgb(255 255 255 / 0.1);
    --dis-line-strong: rgb(168 199 250 / 0.3);
    --dis-card: #1b1c1f;
    --dis-card-edge: rgb(255 255 255 / 0.12);
    --dis-card-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 28px 56px -28px rgb(0 0 0 / 0.7);
    --dis-dot: #4be0b3;
    --dis-tick-bg: rgb(109 213 140 / 0.16);
    --dis-tick: #6dd58c;
    --dis-night: #0a1630;
    --dis-night-ring: rgb(255 255 255 / 0.08);
    --dis-brief-bg: #1b1c1f;
    --dis-brief-top: #202226;
    --dis-brief-edge: rgb(255 255 255 / 0.1);
    --dis-brief-ink: var(--text-primary);
    --dis-brief-muted: var(--text-secondary);
    --dis-brief-kicker: #a8c7fa;
    --dis-brief-tag: #b9c7e2;
    --dis-brief-tag-edge: rgb(255 255 255 / 0.2);
    --dis-brief-rule: rgb(168 199 250 / 0.4);
    --dis-brief-step: #a8c7fa;
    --dis-brief-foot-bg: rgb(168 199 250 / 0.12);
    --dis-brief-foot: #c6d4ee;
    --dis-brief-check: #6dd58c;
    --dis-brief-shadow: 0 24px 60px rgb(0 0 0 / 0.5);
    --dis-stage-bg: linear-gradient(125deg, #17181b, #15181d);
    --dis-stage-edge: rgb(255 255 255 / 0.1);
    --dis-stage-shadow: 0 22px 80px rgb(0 0 0 / 0.4);
    --dis-play-tag: #a8c7fa;
    --dis-insight-rule: rgb(255 255 255 / 0.14);
    --dis-insight-label: #a8c7fa;
    --dis-step-bg: transparent;
    --dis-step-edge: rgb(168 199 250 / 0.4);
    --dis-step-ink: #c6d4ee;
    --dis-step-hover: rgb(168 199 250 / 0.12);
    --dis-step-on: #a8c7fa;
    --dis-step-on-ink: #062e6f;
    --dis-proto-bg: linear-gradient(145deg, #1b2230, #171b25);
    --dis-window: #1b1c1f;
    --dis-window-edge: rgb(255 255 255 / 0.12);
    --dis-window-shadow: 0 25px 75px rgb(0 0 0 / 0.5);
    --dis-window-rule: rgb(255 255 255 / 0.1);
    --dis-window-ink: var(--text-primary);
    --dis-window-muted: var(--text-secondary);
    --dis-window-label: #9cbcf0;
    --dis-demo-edge: rgb(255 255 255 / 0.2);
    --dis-demo-ink: #b9c7e2;
    --dis-progress: rgb(255 255 255 / 0.1);
    --dis-progress-on: #a8c7fa;
    --dis-choice-bg: #202226;
    --dis-choice-edge: rgb(255 255 255 / 0.16);
    --dis-choice-hover: #6f9cf0;
    --dis-choice-on-bg: rgb(168 199 250 / 0.14);
    --dis-choice-on-edge: #a8c7fa;
    --dis-choice-icon-bg: rgb(168 199 250 / 0.14);
    --dis-choice-icon: #a8c7fa;
    --dis-chip-bg: rgb(168 199 250 / 0.12);
    --dis-chip-on-bg: rgb(168 199 250 / 0.2);
    --dis-chip-ink: #b9cdef;
    --dis-check-edge: #7f889c;
    --dis-summary-bg: rgb(168 199 250 / 0.12);
    --dis-summary-ink: #c6d4ee;
    --dis-slot-off-bg: #17181b;
    --dis-slot-off-ink: #8a93a5;
    --dis-field-edge: rgb(255 255 255 / 0.24);
    --dis-field-ink: var(--text-primary);
    --dis-field-focus: #a8c7fa;
    --dis-privacy-bg: rgb(168 199 250 / 0.1);
    --dis-privacy-ink: #b9c7e2;
    --dis-error-bg: rgb(255 120 140 / 0.12);
    --dis-error-edge: rgb(255 120 140 / 0.4);
    --dis-error-ink: #ffb3bf;
    --dis-stamp-bg: rgb(168 199 250 / 0.1);
    --dis-stamp-ink: #b9c7e2;
    --dis-done-bg: rgb(109 213 140 / 0.18);
    --dis-done-ink: #6dd58c;
    --dis-receipt-bg: rgb(255 255 255 / 0.04);
    --dis-receipt-edge: rgb(168 199 250 / 0.4);
    --dis-action: #a8c7fa;
    --dis-action-hover: #c2d8fc;
    --dis-action-outline-edge: rgb(255 255 255 / 0.24);
    --dis-action-outline-ink: #c6d4ee;
    --dis-band: #17181b;
    --dis-band-edge: rgb(255 255 255 / 0.08);
    --dis-paper-bg: linear-gradient(150deg, #1c2029, #181b21);
    --dis-paper-edge: rgb(255 255 255 / 0.12);
    --dis-paper-shadow: 0 17px 50px rgb(0 0 0 / 0.4);
    --dis-paper-rule: rgb(255 255 255 / 0.12);
    --dis-paper-tag: #a8c7fa;
    --dis-faq-band: #161719;
    --dis-closing: linear-gradient(115deg, #070f23 5%, #0c2760 74%, #0d3a9a 100%);
    --dis-closing-wide: linear-gradient(107deg, #050d22, #0a2260 70%, #0b3590);
    --dis-closing-ring: rgb(125 165 255 / 0.4);
    --dis-closing-eyebrow: #b9d3ff;
    --dis-closing-text: #cfdcf2;
    --dis-light-ink: #0b2a63;
    --dis-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; an input is typography.md's form input by site.css's base. */

/* H4 (card title): sans 500 */
.dis-route__name,
.dis-screen__title,
.dis-window__mark,
.dis-date strong,
.dis-acc__name,
.dis-faq__question {
    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 */
.dis-lead,
.dis-hero__lead,
.dis-audience__text,
.dis-brief__copy,
.dis-explain__text,
.dis-acc__text,
.dis-faq__answer,
.dis-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 */
.dis-points,
.dis-flow__step,
.dis-brief__foot,
.dis-insight__text,
.dis-acc__output,
.dis-paper__row,
.dis-paper__tag,
.dis-paper__foot,
.dis-caption,
.dis-window__sub,
.dis-screen__count,
.dis-screen__lead,
.dis-screen__note,
.dis-choice__text,
.dis-meta,
.dis-date span,
.dis-summary,
.dis-review__line,
.dis-stamp,
.dis-privacy,
.dis-receipt,
.dis-error,
.dis-field__optional {
    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's names and choices, its labels, its times and the steps) */
.dis-brief__brand,
.dis-window__name,
.dis-choice__title,
.dis-summary b,
.dis-screen__label,
.dis-field label,
.dis-time,
.dis-step,
.dis-review dd,
.dis-receipt strong,
.dis-paper__name {
    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 */
.dis-btn,
.dis-crumbs__list,
.dis-action {
    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 */
.dis-eyebrow,
.dis-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;
}

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

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

.dis-eyebrow,
.dis-tag {
    margin: 0;
}

.dis-eyebrow {
    color: var(--dis-eyebrow);
}

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

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

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

/* a link in a paragraph is underlined */
.dis-link {
    color: var(--dis-eyebrow);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

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

.dis .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 */
.dis .dis-icon {
    fill: none;
}

/* paragraphs that are rows of their own words are as wide as their rows, not as the base's 70ch */
.dis-caption,
.dis-screen__head,
.dis-paper__head,
.dis-brief__top,
.dis-privacy,
.dis-summary,
.dis-brief__foot {
    max-width: none;
}

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

.dis-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);
}

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

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

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

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

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

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

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

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

.dis-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 */
    .dis-btn:hover .dis-icon--arrow-up-right {
        translate: 2px -2px;
    }

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

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

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

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

/* a ring at its top right and a soft swell at its foot, as the design draws them */
.dis-hero::before,
.dis-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.dis-hero::before {
    top: -24rem;
    right: -12rem;
    width: 53rem;
    height: 53rem;
    border: 1px solid var(--dis-hero-ring);
    border-radius: 50%;
}

.dis-hero::after {
    bottom: -30rem;
    left: -13rem;
    width: 78rem;
    height: 34rem;
    border-radius: 50%;
    background: var(--dis-hero-swell);
    rotate: -7deg;
}

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

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

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

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

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

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

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

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

.dis-hero__words,
.dis-hero__art {
    min-width: 0;
}

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

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

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

/* what it stands for: three short phrases, each with its icon in the blue */
.dis-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--dis-muted);
}

.dis-points__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.dis-points__item .icon {
    width: 1rem;
    height: 1rem;
    flex: none;
    color: var(--dis-eyebrow);
}

/* the company's picture, in a frame, as the design has it */
.dis-hero__art {
    overflow: hidden;
    border: 1px solid var(--dis-art-edge);
    border-radius: 1rem;
    background: var(--dis-art-bg);
    box-shadow: var(--dis-art-shadow);
}

.dis-hero__art img {
    display: block;
    width: 100%;
    height: auto;
}

/* ------------------------------------------------------------------ */
/* The thinking before the building                                    */
/* ------------------------------------------------------------------ */

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

.dis-statement__words,
.dis-audience {
    min-width: 0;
}

.dis-audience {
    padding-top: 1rem;
    border-top: 1px solid var(--dis-line-strong);
}

.dis-audience__label {
    color: var(--dis-muted);
}

.dis-audience__text {
    max-width: 34rem;
    margin: 0.75rem 0 0;
    color: var(--dis-ink);
    text-wrap: pretty;
}

/* ------------------------------------------------------------------ */
/* Starting points: a deep blue band, a choice and a brief for each     */
/* ------------------------------------------------------------------ */

.dis-routes {
    position: relative;
    overflow: hidden;
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    background: var(--dis-night);
    color: var(--dis-night-on);
}

.dis-routes::before {
    content: "";
    position: absolute;
    right: -6rem;
    bottom: -36rem;
    width: 62rem;
    height: 62rem;
    border: 1px solid var(--dis-night-ring);
    border-radius: 50%;
    pointer-events: none;
}

.dis-routes > .container {
    position: relative;
}

.dis-routes .dis-eyebrow {
    color: var(--dis-night-eyebrow);
}

.dis-routes .dis-title {
    color: var(--dis-night-on);
}

.dis-routes .dis-lead {
    color: var(--dis-night-text);
}

.dis-routes__head {
    max-width: 52rem;
}

/* the choice follows the lead and the brief begins where it does, so the choice is not centred beside a brief that is taller
   than it (the design centres it: that leaves a hundred pixels between the lead and the first row) */
.dis-routes__layout {
    display: grid;
    gap: var(--gap-max);
    align-items: start;
    margin-top: var(--gap-max);
}

.dis-route-list,
.dis-briefs {
    min-width: 0;
}

/* the choice: three rows between rules, the one chosen lit, with an arrow */
.dis-route-list {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--dis-night-rule);
}

.dis-route {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 4rem;
    padding: 0.75rem 0.25rem;
    border-bottom: 1px solid var(--dis-night-rule);
    color: var(--dis-night-ink);
    text-decoration: none;
    transition: color 200ms var(--ease-standard), padding-left var(--spring) var(--ease-spring),
        background-color 200ms var(--ease-standard);
}

.dis-route__no {
    flex: none;
    color: var(--dis-night-no);
}

.dis-route__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dis-route .icon {
    flex: none;
    margin-left: auto;
    opacity: 0.45;
    transition: opacity 200ms var(--ease-standard);
}

.dis-route:hover {
    color: var(--dis-night-on);
}

.dis-route[aria-selected="true"] {
    padding-left: 1rem;
    background: var(--dis-night-on-bg);
    color: var(--dis-night-on);
}

.dis-route[aria-selected="true"] .dis-route__no {
    color: var(--dis-night-on-no);
}

.dis-route[aria-selected="true"] .icon {
    color: var(--dis-night-arrow);
    opacity: 1;
}

/* the brief: a light card with what the company would write for that starting point */
.dis-brief {
    overflow: hidden;
    border-radius: 1.375rem;
    background: var(--dis-brief-bg);
    box-shadow: var(--dis-brief-shadow);
    color: var(--dis-brief-ink);
}

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

.dis-brief__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin: 0;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--dis-brief-edge);
    background: var(--dis-brief-top);
}

.dis-brief__brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
    color: var(--dis-brief-ink);
}

.dis-brief__brand .icon {
    flex: none;
    color: var(--dis-brief-kicker);
}

.dis-brief__tag {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--dis-brief-tag-edge);
    border-radius: 999px;
    color: var(--dis-brief-tag);
}

.dis-brief__body {
    padding: 1.25rem;
}

.dis-brief__kicker {
    color: var(--dis-brief-kicker);
}

.dis-brief__title {
    margin: 0.5rem 0 0;
    color: var(--dis-brief-ink);
    text-wrap: balance;
}

.dis-brief__copy {
    max-width: 36rem;
    margin: 0.5rem 0 0;
    color: var(--dis-brief-muted);
    text-wrap: pretty;
}

.dis-flow {
    display: grid;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.dis-flow__step {
    display: grid;
    gap: 0.125rem;
    padding: 0.25rem 0 0.25rem 0.875rem;
    border-left: 2px solid var(--dis-brief-rule);
    color: var(--dis-brief-muted);
}

.dis-flow__name {
    color: var(--dis-brief-step);
}

.dis-brief__foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0.75rem 0.875rem;
    border-radius: 0.625rem;
    background: var(--dis-brief-foot-bg);
    color: var(--dis-brief-foot);
}

.dis-brief__foot .icon {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--dis-brief-check);
}

/* ------------------------------------------------------------------ */
/* A prototype to try: a fictional studio's booking in four steps       */
/* ------------------------------------------------------------------ */

.dis-play__head {
    display: grid;
    gap: 0.75rem var(--gap-max);
    align-items: end;
}

.dis-play__words {
    min-width: 0;
}

.dis-play__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--dis-blue-soft-edge);
    color: var(--dis-play-tag);
}

.dis-play__tag[hidden] {
    display: none;
}

.dis-play__tag .icon {
    width: 0.875rem;
    height: 0.875rem;
}

.dis-dot {
    display: inline-block;
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--dis-dot);
    box-shadow: 0 0 0 4px rgb(11 196 141 / 0.14);
}

.dis-dot--small {
    width: 0.375rem;
    height: 0.375rem;
    box-shadow: none;
}

.dis-stage {
    display: grid;
    margin-top: var(--gap-max);
    overflow: hidden;
    border: 1px solid var(--dis-stage-edge);
    border-radius: 1.25rem;
    background: var(--dis-stage-bg);
    box-shadow: var(--dis-stage-shadow);
}

.dis-explainer,
.dis-prototype {
    min-width: 0;
}

.dis-explainer {
    padding: 1.5rem 1.25rem 1.25rem;
}

/* what the page says of a step, and of the ending: the one that data-step names is shown, the first until a visitor goes on */
.dis-v,
.dis-vi {
    display: none;
}

.dis-play[data-step="1"] .dis-v[data-v="1"],
.dis-play[data-step="2"] .dis-v[data-v="2"],
.dis-play[data-step="3"] .dis-v[data-v="3"],
.dis-play[data-step="4"] .dis-v[data-v="4"],
.dis-play[data-step="done"] .dis-v[data-v="done"] {
    display: block;
}

.dis-play[data-step="1"] .dis-vi[data-v="1"],
.dis-play[data-step="2"] .dis-vi[data-v="2"],
.dis-play[data-step="3"] .dis-vi[data-v="3"],
.dis-play[data-step="4"] .dis-vi[data-v="4"],
.dis-play[data-step="done"] .dis-vi[data-v="done"] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.dis-explain__label {
    color: var(--dis-insight-label);
}

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

.dis-explain__text {
    max-width: 28rem;
    margin: 0.5rem 0 0;
    color: var(--dis-muted);
    text-wrap: pretty;
}

.dis-insight {
    max-width: 26rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--dis-insight-rule);
}

.dis-insight__label {
    color: var(--dis-insight-label);
}

.dis-insight__text {
    margin: 0.25rem 0 0;
    color: var(--dis-muted);
}

/* the four steps, as buttons (`hidden` until the script) */
.dis-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.dis-steps[hidden] {
    display: none;
}

.dis-step {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    padding: 0.25rem 1rem;
    border: 1px solid var(--dis-step-edge);
    border-radius: 999px;
    background: var(--dis-step-bg);
    color: var(--dis-step-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);
}

.dis-step:hover {
    background: var(--dis-step-hover);
}

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

.dis-step[aria-pressed="true"] {
    border-color: var(--dis-step-on);
    background: var(--dis-step-on);
    color: var(--dis-step-on-ink);
}

/* the prototype: a pale ground with the window on it */
.dis-prototype {
    padding: 1.25rem 0.75rem;
    background: var(--dis-proto-bg);
}

.dis-window {
    container: dis-window / inline-size;
    max-width: 35.5rem;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--dis-window-edge);
    border-radius: 1.1875rem;
    background: var(--dis-window);
    box-shadow: var(--dis-window-shadow);
    color: var(--dis-window-ink);
}

.dis-window__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--dis-window-rule);
}

.dis-window__brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    margin: 0;
}

.dis-window__mark {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.6875rem;
    background: var(--dis-mark-bg);
    color: #ffffff;
}

.dis-window__name,
.dis-window__sub {
    display: block;
}

.dis-window__sub {
    color: var(--dis-window-muted);
}

.dis-window__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--dis-demo-edge);
    border-radius: 999px;
    overflow-wrap: anywhere;
    color: var(--dis-demo-ink);
}

.dis-window__body {
    padding: 1rem;
}

.dis-progress {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.25rem;
    margin-bottom: 0.75rem;
}

.dis-progress i {
    display: block;
    height: 0.3125rem;
    border-radius: 999px;
    background: var(--dis-progress);
    transition: background-color 250ms var(--ease-standard);
}

.dis-play[data-step="1"] .dis-progress i:nth-child(-n + 1),
.dis-play[data-step="2"] .dis-progress i:nth-child(-n + 2),
.dis-play[data-step="3"] .dis-progress i:nth-child(-n + 3),
.dis-play[data-step="4"] .dis-progress i:nth-child(-n + 4),
.dis-play[data-step="done"] .dis-progress i {
    background: var(--dis-progress-on);
}

/* a screen of the sample */
.dis-screen__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.125rem 0.75rem;
    margin: 0;
    color: var(--dis-window-muted);
}

.dis-screen__head .dis-tag {
    color: var(--dis-window-label);
}

.dis-screen__kicker {
    margin-top: 0.75rem;
    color: var(--dis-window-label);
}

.dis-screen__title {
    margin: 0.125rem 0 0;
    color: var(--dis-window-ink);
}

.dis-screen__lead {
    margin: 0.125rem 0 0;
    max-width: none;
    color: var(--dis-window-muted);
}

.dis-screen__label {
    margin: 0.5rem 0 0.375rem;
    color: var(--dis-window-ink);
}

.dis-screen__note {
    margin: 0.5rem 0 0;
    color: var(--dis-window-muted);
}

.dis-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin: 0.5rem 0 0;
    padding: 0.375rem 0.75rem;
    border-radius: 0.625rem;
    background: var(--dis-summary-bg);
    color: var(--dis-summary-ink);
}

.dis-summary b {
    color: var(--dis-window-ink);
}

/* step 1: three kinds of session, one under another */
.dis-choices {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.375rem;
    margin-top: 0.75rem;
}

.dis-choice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--dis-choice-edge);
    border-radius: 0.75rem;
    background: var(--dis-choice-bg);
    color: var(--dis-window-ink);
    text-align: left;
    cursor: pointer;
    transition: border-color 180ms var(--ease-standard), background-color 180ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.dis-choice:not(:disabled):hover {
    border-color: var(--dis-choice-hover);
}

.dis-choice:not(:disabled):active {
    scale: var(--press-scale-card);
    transition-duration: 180ms, 180ms, var(--press-in);
}

/* a page without a script shows the first screen as a picture: the choices are not pressed until the script has made them work */
.dis-choice:disabled {
    cursor: default;
}

.dis-choice[aria-pressed="true"] {
    border-color: var(--dis-choice-on-edge);
    background: var(--dis-choice-on-bg);
}

.dis-choice__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.75rem;
    background: var(--dis-choice-icon-bg);
    color: var(--dis-choice-icon);
}

.dis-choice__copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.dis-choice__title {
    overflow-wrap: anywhere;
}

.dis-choice__text {
    color: var(--dis-window-muted);
}

.dis-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
}

.dis-meta span {
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    background: var(--dis-chip-bg);
    color: var(--dis-chip-ink);
}

.dis-choice[aria-pressed="true"] .dis-meta span {
    background: var(--dis-chip-on-bg);
}

.dis-choice__check {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    border: 1.5px solid var(--dis-check-edge);
    border-radius: 50%;
}

.dis-choice[aria-pressed="true"] .dis-choice__check {
    border-color: var(--dis-choice-on-edge);
    background: var(--dis-choice-on-edge);
    box-shadow: inset 0 0 0 4px var(--dis-choice-on-bg);
}

/* step 2: five dates and six times */
.dis-dates {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.375rem;
    margin-top: 0.5rem;
}

.dis-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    padding: 0.25rem 0.125rem;
    border: 1px solid var(--dis-choice-edge);
    border-radius: 0.625rem;
    background: var(--dis-choice-bg);
    color: var(--dis-window-muted);
    cursor: pointer;
    transition: border-color 180ms var(--ease-standard), background-color 180ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.dis-date strong {
    color: var(--dis-window-ink);
}

.dis-times {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.375rem;
}

.dis-time {
    min-height: 2.75rem;
    padding: 0.25rem;
    border: 1px solid var(--dis-choice-edge);
    border-radius: 0.5625rem;
    background: var(--dis-choice-bg);
    color: var(--dis-window-ink);
    cursor: pointer;
    transition: border-color 180ms var(--ease-standard), background-color 180ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.dis-date:hover,
.dis-time:hover {
    border-color: var(--dis-choice-hover);
}

.dis-date:active,
.dis-time:active {
    scale: var(--press-scale);
    transition-duration: 180ms, 180ms, var(--press-in);
}

.dis-date[aria-pressed="true"],
.dis-time[aria-pressed="true"] {
    border-color: var(--dis-choice-on-edge);
    background: var(--dis-choice-on-bg);
    box-shadow: inset 0 0 0 1px var(--dis-choice-on-edge);
}

.dis-time:disabled {
    border-style: dashed;
    background: var(--dis-slot-off-bg);
    color: var(--dis-slot-off-ink);
    cursor: not-allowed;
}

/* step 3: what a visitor is asked for, which goes nowhere */
.dis-fields {
    display: grid;
    gap: 0.625rem;
    margin-top: 0.5rem;
}

.dis-fields__row {
    display: grid;
    gap: 0.625rem;
}

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

.dis-field label {
    color: var(--dis-window-ink);
}

.dis-field__optional {
    color: var(--dis-window-muted);
}

.dis-field input,
.dis-field textarea {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--dis-field-edge);
    border-radius: 0.5625rem;
    background: var(--dis-window);
    color: var(--dis-field-ink);
}

.dis-field textarea {
    min-height: 4rem;
    max-height: 11rem;
    resize: vertical;
}

.dis-field input:focus,
.dis-field textarea:focus {
    border-color: var(--dis-field-focus);
    outline: 3px solid color-mix(in srgb, var(--dis-field-focus) 40%, transparent);
    outline-offset: 0;
}

.dis-field input[aria-invalid="true"] {
    border-color: var(--dis-error-ink);
}

.dis-privacy {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--dis-privacy-bg);
    color: var(--dis-privacy-ink);
}

.dis-privacy .icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-top: 0.1875rem;
}

/* step 4: what was chosen, a line each */
.dis-review {
    margin: 0.5rem 0 0;
    padding: 0;
    border-top: 1px solid var(--dis-window-rule);
}

.dis-review__line {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.125rem 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--dis-window-rule);
}

.dis-review__line[hidden] {
    display: none;
}

.dis-review dt {
    color: var(--dis-window-muted);
}

.dis-review dd {
    max-width: 100%;
    margin: 0;
    overflow-wrap: anywhere;
    text-align: right;
    color: var(--dis-window-ink);
}

.dis-stamp {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--dis-stamp-bg);
    color: var(--dis-stamp-ink);
}

/* the ending */
.dis-done {
    display: grid;
    justify-items: start;
    margin-top: 0.5rem;
}

.dis-done__mark {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: var(--dis-done-bg);
    color: var(--dis-done-ink);
}

.dis-done__mark .icon {
    width: 1.5rem;
    height: 1.5rem;
}

.dis-done .dis-screen__kicker {
    margin-top: 0.5rem;
}

.dis-receipt {
    display: grid;
    gap: 0.125rem;
    width: 100%;
    max-width: none;
    margin: 0.5rem 0 0;
    padding: 0.625rem 0.75rem;
    border: 1px dashed var(--dis-receipt-edge);
    border-radius: 0.625rem;
    background: var(--dis-receipt-bg);
    color: var(--dis-window-muted);
}

.dis-receipt strong {
    color: var(--dis-window-ink);
}

.dis-error {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--dis-error-edge);
    border-radius: 0.5rem;
    background: var(--dis-error-bg);
    color: var(--dis-error-ink);
}

.dis-error[hidden] {
    display: none;
}

.dis-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--dis-window-rule);
}

.dis-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    max-width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid var(--dis-action);
    border-radius: 0.5625rem;
    background: var(--dis-action);
    color: var(--dis-on-blue);
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.dis-action[hidden] {
    display: none;
}

.dis-action:hover {
    background: var(--dis-action-hover);
}

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

.dis-action .icon {
    flex: none;
    width: 1rem;
    height: 1rem;
}

.dis-action--outline {
    border-color: var(--dis-action-outline-edge);
    background: var(--dis-window);
    color: var(--dis-action-outline-ink);
}

.dis-action--outline:hover {
    background: var(--dis-outline-hover);
}

.dis-action--next {
    margin-left: auto;
}

/* the way back is not offered at the first step or when it is done */
.dis-play[data-step="1"] .dis-action--back,
.dis-play[data-step="done"] .dis-action--back {
    display: none;
}

.dis-caption {
    margin: 0.5rem auto 0;
    max-width: 35.5rem;
    text-align: center;
    color: var(--dis-muted);
}

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

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

.dis-deliver__head {
    display: grid;
    gap: 1rem var(--gap-max);
    align-items: end;
}

.dis-deliver__words {
    min-width: 0;
}

.dis-deliver__head .dis-btn {
    justify-self: start;
}

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

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

.dis-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;
}

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

.dis-acc__no {
    color: var(--dis-eyebrow);
}

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

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

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

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

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

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

.dis-acc__detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem var(--gap-max);
    max-width: 62rem;
    padding: 0 0.125rem 1.25rem 3rem;
}

/* a long word breaks rather than push the page sideways, at 200% text on a small screen */
.dis-acc__text,
.dis-acc__output {
    min-width: 0;
    overflow-wrap: anywhere;
}

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

/* what a client has at the end of it, under a line in the blue */
.dis-acc__output {
    display: grid;
    align-content: start;
    gap: 0.25rem;
    margin: 0;
    padding-left: 1rem;
    border-left: 2px solid var(--dis-blue-soft-edge);
    color: var(--dis-muted);
}

.dis-acc__output .dis-tag {
    color: var(--dis-eyebrow);
}

/* 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) {
    .dis-acc__item {
        interpolate-size: allow-keywords;
    }

    .dis-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;
    }

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

/* ------------------------------------------------------------------ */
/* What is handed over                                                 */
/* ------------------------------------------------------------------ */

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

.dis-outcomes__words,
.dis-paper {
    min-width: 0;
}

.dis-outcomes__words .dis-btn {
    margin-top: 1rem;
}

/* an example of the handover: a sheet with what it holds */
.dis-paper {
    padding: 1.25rem;
    border: 1px solid var(--dis-paper-edge);
    border-radius: 1.25rem;
    background: var(--dis-paper-bg);
    box-shadow: var(--dis-paper-shadow);
}

.dis-paper__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    margin: 0 0 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--dis-paper-rule);
}

.dis-paper__head p {
    margin: 0;
}

.dis-paper__name {
    color: var(--dis-paper-tag);
}

.dis-paper__tag {
    color: var(--dis-muted);
}

.dis-paper__rows {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--dis-ink);
}

.dis-paper__row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

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

.dis-tick .icon {
    width: 0.8125rem;
    height: 0.8125rem;
}

.dis-paper__foot {
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--dis-paper-rule);
    color: var(--dis-muted);
}

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

.dis-faq {
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    background: var(--dis-faq-band);
}

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

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

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

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

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

.dis-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 */
.dis-faq__question > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

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

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

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

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

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

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

    .dis-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;
    }

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

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

.dis-closing-wrap {
    padding-block: var(--gap-max);
    background: var(--dis-faq-band);
}

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

/* a ring 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) */
.dis-closing::after {
    content: "";
    display: none;
    position: absolute;
    z-index: -1;
    top: -13rem;
    right: -10rem;
    width: 34rem;
    height: 34rem;
    border: 1px solid var(--dis-closing-ring);
    border-radius: 50%;
    pointer-events: none;
}

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

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

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

.dis-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 brief 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) .dis-brief ~ .dis-brief {
        display: none;
    }
}

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

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

    .dis-flow {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.75rem;
    }

    .dis-flow__step {
        padding: 0.75rem 0 0;
        border-left: 0;
        border-top: 2px solid var(--dis-brief-rule);
    }

    .dis-brief__body {
        padding: 1.25rem 1.5rem 1.5rem;
    }

    .dis-explainer {
        padding: 1.75rem 1.75rem 1.25rem;
    }

    .dis-prototype {
        padding: 1.5rem 1.25rem;
    }

    .dis-paper {
        padding: 1.5rem;
    }
}

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

@media (min-width: 48rem) {
    .dis-statement__grid {
        grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    }

    .dis-routes__layout {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    }

    .dis-play__head {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .dis-deliver__head {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .dis-acc__detail {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr);
    }

    .dis-outcomes__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    }

    .dis-faq__inner {
        grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
    }

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

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

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

    .dis-hero__art {
        border-radius: 1.375rem;
    }

    /* a rule between the two columns of the statement */
    .dis-audience {
        padding: 0 0 0 1.25rem;
        border-top: 0;
        border-left: 1px solid var(--dis-line-strong);
    }

    .dis-stage {
        grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
    }

    .dis-explainer {
        padding: 2.25rem 1.75rem 2rem 2rem;
    }

    .dis-prototype {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 1.25rem 1.5rem;
    }

    .dis-window {
        width: 100%;
    }
}

/* ------------------------------------------------------------------ */
/* From 72rem                                                          */
/* ------------------------------------------------------------------ */

@media (min-width: 72rem) {
    .dis-closing {
        background: var(--dis-closing-wide);
    }

    .dis-closing::after {
        display: block;
    }
}

/* what the window holds depends on the window's own width: its choices as they are, its fields side by side and its body roomier
   where it is 30rem wide */
@container dis-window (min-width: 30rem) {
    .dis-window__body {
        padding: 1rem 1.5rem 1.25rem;
    }

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

/* a window narrower than what it holds needs (the text at 150% or more on a phone): the choices drop their tiles, and the
   times and the dates take fewer to a row, down to one, so that nothing is cut off by the window's edge; the sizes are in rem,
   so that they follow the text */
@container dis-window (max-width: 14rem) {
    .dis-choice__icon {
        display: none;
    }
}

@container dis-window (max-width: 12rem) {
    .dis-times {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container dis-window (max-width: 11rem) {
    .dis-dates {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container dis-window (max-width: 8rem) {
    .dis-times {
        grid-template-columns: minmax(0, 1fr);
    }

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

@container dis-window (max-width: 5.5rem) {
    .dis-dates {
        grid-template-columns: minmax(0, 1fr);
    }
}

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

@media (prefers-contrast: more) {
    .dis-stage,
    .dis-window,
    .dis-paper,
    .dis-choice,
    .dis-date,
    .dis-time,
    .dis-step,
    .dis-acc__plus,
    .dis-btn--outlined,
    .dis-hero__art {
        border-color: var(--dis-ink);
    }

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

    .dis-hero::before,
    .dis-hero::after,
    .dis-routes::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 picture rises into place. */
@media (prefers-reduced-motion: no-preference) {
    .dis-hero__title,
    .dis-hero__lead {
        animation: hero-settle var(--spring-slow) var(--ease-spring) both;
    }

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

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

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

    .dis-points {
        animation-delay: 220ms;
    }

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

    .dis-brief:not([hidden]),
    .dis-play .dis-v {
        animation: dis-swap var(--spring) var(--ease-spring) both;
    }
}

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

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

@media print {
    .dis-hero,
    .dis-stage,
    .dis-prototype,
    .dis-deliver,
    .dis-faq,
    .dis-closing-wrap {
        background: none;
    }

    .dis-routes,
    .dis-closing {
        background: none;
        color: inherit;
    }

    .dis-hero::before,
    .dis-hero::after,
    .dis-routes::before,
    .dis-closing::after {
        display: none;
    }
}