/* The mortgage platform's page (services/pages/mortgage-applications.html), after its own design (2026-10-29: "these are the new
   mortgage-applications page design", with kweepa-mortgage-with-application-demo.html). Until then the page was drawn to the
   mortgage design of 2026-10-25 (a laptop with the dashboard in a blurred office, a lifecycle, capabilities, document
   requirements by market and a closing band with a photograph); this stylesheet replaces that design's, and the pictures it used
   are left, unused. The new design carries no picture: its hero is a sample workspace drawn in HTML, which a visitor may switch
   between four views, and it has a sample mortgage application a visitor may edit.

   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 windows in 10 to 13px and its titles in 38 to 60px with
   a tracking of -0.05em: the windows are set in the roles' sizes, so they are larger, and give way where their own width is short,
   by container queries, not the page's media). Mobile first: one column, the workspace under the hero's words and beside them from
   64rem, a heading beside what it heads from 64rem. Where the page asks for a script (the workspace's views, the choice of a
   stage and of a role, the application) every answer is in the markup, and what chooses is a link to what it means, or a button
   `disabled` or `hidden`, 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. A list has a line between two of its rows and none over the first or under the last (asked for, again
   and again; the design draws both). Everything is scoped to .mtg; its colours are the --mtg-* 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 {
    --mtg-surface: #ffffff;
    /* the text: headings and body text in typography.md's primary colour, small text in its secondary */
    --mtg-ink: var(--text-primary);
    --mtg-muted: var(--text-secondary);
    --mtg-eyebrow: #0a4ce9;
    --mtg-blue: #0154e5;
    --mtg-blue-hover: #0043bd;
    --mtg-on-blue: #ffffff;
    --mtg-blue-soft: #e8f1ff;
    --mtg-blue-soft-edge: #cbdcff;
    --mtg-blue-ink: #0a3fb8;
    --mtg-select-edge: #2474f2;
    --mtg-outline: #b4c9e8;
    --mtg-outline-ink: #0f47a8;
    --mtg-outline-bg: rgb(255 255 255 / 0.74);
    --mtg-outline-hover: #eef6ff;
    --mtg-line: #e4e9f1;
    --mtg-line-strong: #d3deec;
    --mtg-wash: #f5f8fc;
    --mtg-band: #f8faff;
    --mtg-demo-band: #f7f9fd;
    --mtg-crumb-chevron: #8790a8;
    /* what a status says: done, needs attention, neither */
    --mtg-green: #0b7a57;
    --mtg-green-dot: #17b982;
    --mtg-green-soft: #e4f6ee;
    --mtg-green-edge: #bfe6d5;
    --mtg-amber: #8a5200;
    --mtg-amber-soft: #fff4e0;
    --mtg-amber-edge: #f2d9a8;
    --mtg-amber-line: #e8a63a;
    --mtg-gray: #4a4a4a;
    --mtg-gray-soft: #eef1f5;
    --mtg-invalid: #b3261e;
    /* the hero: a pale sky with a ring, as the design draws it */
    --mtg-hero-bg: linear-gradient(112deg, #f7fafe 0%, #f0f6fe 48%, #e3efff 100%);
    --mtg-hero-ring: #c5dcfb;
    --mtg-dot: #17b982;
    /* the sample workspace and the sample application: white cards on the page */
    --mtg-card: #ffffff;
    --mtg-card-edge: #dbe5f3;
    --mtg-card-shadow: 0 30px 80px rgb(11 61 139 / 0.12), 0 8px 22px rgb(12 69 129 / 0.08);
    --mtg-surface-edge: #d6e2f3;
    --mtg-surface-shadow: 0 40px 100px rgb(11 61 139 / 0.16), 0 10px 30px rgb(12 69 129 / 0.1);
    --mtg-avatar: #2f62d0;
    --mtg-nav-hover: #eef4fd;
    --mtg-rail-on-bg: #e1ecfd;
    --mtg-rail-on-ink: #0a3fb8;
    --mtg-arrow: #7487a6;
    --mtg-check: #e0f5ec;
    --mtg-check-ink: #0b7a57;
    --mtg-track: #e3eaf5;
    --mtg-fill: #0154e5;
    --mtg-fill-warn: #c77700;
    --mtg-field-edge: #8094b6;
    --mtg-insights-bg: #f8fafd;
    --mtg-step-ok: #0b7a57;
    --mtg-step-missing: #b86b00;
    /* the capabilities' tags and the roles' windows */
    --mtg-tag-bg: #f0f5ff;
    --mtg-tag-edge: #d9e5fb;
    --mtg-tag-ink: #1f4d96;
    --mtg-role-bar: #ffffff;
    --mtg-role-body: #f7faff;
    --mtg-role-mark: #e1edff;
    --mtg-role-mark-ink: #0a3fb8;
    --mtg-dots-1: #f5b1aa;
    --mtg-dots-2: #f6d88b;
    --mtg-dots-3: #9bdec8;
    /* the deep blue band, and what is on it */
    --mtg-night: #071c40;
    --mtg-night-eyebrow: #8fbcff;
    --mtg-night-text: #b9c9e3;
    --mtg-night-line: #385072;
    --mtg-night-accent: #8db8f5;
    --mtg-night-hover: #a9c9ff;
    /* the closing call: a blue card with a ring of light */
    --mtg-closing: #0455e9;
    --mtg-closing-ring: rgb(255 255 255 / 0.22);
    --mtg-closing-text: #e3eeff;
    --mtg-closing-eyebrow: #e3eeff;
    --mtg-closing-shadow: 0 24px 50px rgb(10 48 156 / 0.22);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --mtg-surface: #131314;
        --mtg-eyebrow: #a8c7fa;
        --mtg-blue: #a8c7fa;
        --mtg-blue-hover: #c2d7fb;
        --mtg-on-blue: #062e6f;
        --mtg-blue-soft: rgb(168 199 250 / 0.14);
        --mtg-blue-soft-edge: rgb(168 199 250 / 0.3);
        --mtg-blue-ink: #a8c7fa;
        --mtg-select-edge: #a8c7fa;
        --mtg-outline: rgb(255 255 255 / 0.2);
        --mtg-outline-ink: #a8c7fa;
        --mtg-outline-bg: rgb(255 255 255 / 0.04);
        --mtg-outline-hover: rgb(168 199 250 / 0.12);
        --mtg-line: rgb(255 255 255 / 0.09);
        --mtg-line-strong: rgb(255 255 255 / 0.16);
        --mtg-wash: #17181b;
        --mtg-band: #161719;
        --mtg-demo-band: #151618;
        --mtg-crumb-chevron: #7f889c;
        --mtg-green: #6dd5a8;
        --mtg-green-dot: #4cd9a0;
        --mtg-green-soft: rgb(109 213 168 / 0.12);
        --mtg-green-edge: rgb(109 213 168 / 0.3);
        --mtg-amber: #f2c46d;
        --mtg-amber-soft: rgb(242 196 109 / 0.12);
        --mtg-amber-edge: rgb(242 196 109 / 0.3);
        --mtg-amber-line: #e8a63a;
        --mtg-gray: #c4c7c5;
        --mtg-gray-soft: rgb(255 255 255 / 0.08);
        --mtg-invalid: #f2b8b5;
        --mtg-hero-bg: linear-gradient(112deg, #131722 0%, #131720 48%, #121a2b 100%);
        --mtg-hero-ring: rgb(168 199 250 / 0.2);
        --mtg-dot: #4cd9a0;
        --mtg-card: #1c1f25;
        --mtg-card-edge: rgb(255 255 255 / 0.12);
        --mtg-card-shadow: 0 35px 90px rgb(0 0 0 / 0.5), 0 8px 22px rgb(0 0 0 / 0.35);
        --mtg-surface-edge: rgb(255 255 255 / 0.14);
        --mtg-surface-shadow: 0 40px 100px rgb(0 0 0 / 0.55), 0 10px 30px rgb(0 0 0 / 0.4);
        --mtg-avatar: #2f62d0;
        --mtg-nav-hover: rgb(168 199 250 / 0.1);
        --mtg-rail-on-bg: rgb(168 199 250 / 0.16);
        --mtg-rail-on-ink: #a8c7fa;
        --mtg-arrow: #8397b8;
        --mtg-check: rgb(109 213 168 / 0.16);
        --mtg-check-ink: #6dd5a8;
        --mtg-track: rgb(255 255 255 / 0.12);
        --mtg-fill: #a8c7fa;
        --mtg-fill-warn: #f2c46d;
        --mtg-field-edge: rgb(255 255 255 / 0.36);
        --mtg-insights-bg: #17191d;
        --mtg-step-ok: #6dd5a8;
        --mtg-step-missing: #f2c46d;
        --mtg-tag-bg: rgb(168 199 250 / 0.12);
        --mtg-tag-edge: rgb(168 199 250 / 0.26);
        --mtg-tag-ink: #c2d7fb;
        --mtg-role-bar: #1c1f25;
        --mtg-role-body: #181a1f;
        --mtg-role-mark: rgb(168 199 250 / 0.18);
        --mtg-role-mark-ink: #a8c7fa;
        --mtg-dots-1: #c9766e;
        --mtg-dots-2: #c9a84d;
        --mtg-dots-3: #5aa58b;
        --mtg-night: #071a3a;
        --mtg-closing: #0a3d9d;
        --mtg-closing-ring: rgb(255 255 255 / 0.18);
        --mtg-closing-text: #dbe7ff;
        --mtg-closing-eyebrow: #c4dcff;
        --mtg-closing-shadow: 0 24px 50px rgb(0 0 0 / 0.4);
    }
}

:root[data-theme="dark"] {
    --mtg-surface: #131314;
    --mtg-eyebrow: #a8c7fa;
    --mtg-blue: #a8c7fa;
    --mtg-blue-hover: #c2d7fb;
    --mtg-on-blue: #062e6f;
    --mtg-blue-soft: rgb(168 199 250 / 0.14);
    --mtg-blue-soft-edge: rgb(168 199 250 / 0.3);
    --mtg-blue-ink: #a8c7fa;
    --mtg-select-edge: #a8c7fa;
    --mtg-outline: rgb(255 255 255 / 0.2);
    --mtg-outline-ink: #a8c7fa;
    --mtg-outline-bg: rgb(255 255 255 / 0.04);
    --mtg-outline-hover: rgb(168 199 250 / 0.12);
    --mtg-line: rgb(255 255 255 / 0.09);
    --mtg-line-strong: rgb(255 255 255 / 0.16);
    --mtg-wash: #17181b;
    --mtg-band: #161719;
    --mtg-demo-band: #151618;
    --mtg-crumb-chevron: #7f889c;
    --mtg-green: #6dd5a8;
    --mtg-green-dot: #4cd9a0;
    --mtg-green-soft: rgb(109 213 168 / 0.12);
    --mtg-green-edge: rgb(109 213 168 / 0.3);
    --mtg-amber: #f2c46d;
    --mtg-amber-soft: rgb(242 196 109 / 0.12);
    --mtg-amber-edge: rgb(242 196 109 / 0.3);
    --mtg-amber-line: #e8a63a;
    --mtg-gray: #c4c7c5;
    --mtg-gray-soft: rgb(255 255 255 / 0.08);
    --mtg-invalid: #f2b8b5;
    --mtg-hero-bg: linear-gradient(112deg, #131722 0%, #131720 48%, #121a2b 100%);
    --mtg-hero-ring: rgb(168 199 250 / 0.2);
    --mtg-dot: #4cd9a0;
    --mtg-card: #1c1f25;
    --mtg-card-edge: rgb(255 255 255 / 0.12);
    --mtg-card-shadow: 0 35px 90px rgb(0 0 0 / 0.5), 0 8px 22px rgb(0 0 0 / 0.35);
    --mtg-surface-edge: rgb(255 255 255 / 0.14);
    --mtg-surface-shadow: 0 40px 100px rgb(0 0 0 / 0.55), 0 10px 30px rgb(0 0 0 / 0.4);
    --mtg-avatar: #2f62d0;
    --mtg-nav-hover: rgb(168 199 250 / 0.1);
    --mtg-rail-on-bg: rgb(168 199 250 / 0.16);
    --mtg-rail-on-ink: #a8c7fa;
    --mtg-arrow: #8397b8;
    --mtg-check: rgb(109 213 168 / 0.16);
    --mtg-check-ink: #6dd5a8;
    --mtg-track: rgb(255 255 255 / 0.12);
    --mtg-fill: #a8c7fa;
    --mtg-fill-warn: #f2c46d;
    --mtg-field-edge: rgb(255 255 255 / 0.36);
    --mtg-insights-bg: #17191d;
    --mtg-step-ok: #6dd5a8;
    --mtg-step-missing: #f2c46d;
    --mtg-tag-bg: rgb(168 199 250 / 0.12);
    --mtg-tag-edge: rgb(168 199 250 / 0.26);
    --mtg-tag-ink: #c2d7fb;
    --mtg-role-bar: #1c1f25;
    --mtg-role-body: #181a1f;
    --mtg-role-mark: rgb(168 199 250 / 0.18);
    --mtg-role-mark-ink: #a8c7fa;
    --mtg-dots-1: #c9766e;
    --mtg-dots-2: #c9a84d;
    --mtg-dots-3: #5aa58b;
    --mtg-night: #071a3a;
    --mtg-closing: #0a3d9d;
    --mtg-closing-ring: rgb(255 255 255 / 0.18);
    --mtg-closing-text: #dbe7ff;
    --mtg-closing-eyebrow: #c4dcff;
    --mtg-closing-shadow: 0 24px 50px rgb(0 0 0 / 0.4);
}

/* ------------------------------------------------------------------ */
/* 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. A button's text is the button role by site.css's base, so
   the small buttons of the sample workspace and the sample application are listed under the form label's; an input, a select,
   a th, a td and a strong are what site.css's base makes them. */

/* H4 (card title): sans 500 */
.mtg-panel__title,
.mtg-person-card__name,
.mtg-work__title,
.mtg-file__title,
.mtg-role__title,
.mtg-night__name,
.mtg-acc__name,
.mtg-faq__question,
.mtg-proof__title,
.mtg-stage-link__name,
.mtg-closing__cta,
.mtg-insights__title,
.mtg-view__title {
    font-family: var(--font-sans);
    font-size: var(--fs-h4);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h4);
    letter-spacing: 0;
}

/* Stat: mono 700 (the sample workspace's figures) */
.mtg-metric__value {
    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 */
.mtg-lead,
.mtg-hero__lead,
.mtg-proof__text,
.mtg-file__text,
.mtg-checks__item,
.mtg-acc__text,
.mtg-faq__answer,
.mtg-role__text,
.mtg-role__item,
.mtg-night__text,
.mtg-night__line,
.mtg-closing__text,
.mtg-summary dd,
.mtg-person-card__list dd,
.mtg-alert {
    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 */
.mtg-assure,
.mtg-surface__sample,
.mtg-surface__search,
.mtg-view__sub,
.mtg-metric__label,
.mtg-metric__note,
.mtg-table td,
.mtg-table__code,
.mtg-stage-link__line,
.mtg-file__next,
.mtg-live,
.mtg-app__file,
.mtg-app__saved,
.mtg-rail__hint,
.mtg-work__text,
.mtg-work__note,
.mtg-note,
.mtg-who__role,
.mtg-person-card__role,
.mtg-person-card__list dt,
.mtg-summary dt,
.mtg-panel__badge,
.mtg-field__help,
.mtg-gauge__row,
.mtg-gauge__note,
.mtg-ratios__title,
.mtg-ratio__row,
.mtg-ratios__note,
.mtg-issues__title,
.mtg-issue,
.mtg-copy__note,
.mtg-role__foot,
.mtg-closing__points,
.mtg-closing__mail {
    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 windows' names, chips, choices and small buttons, the tags of a capability) */
.mtg-surface__brand,
.mtg-avatar,
.mtg-chip,
.mtg-records__head,
.mtg-table th,
.mtg-table__name,
.mtg-status,
.mtg-nav,
.mtg-step__name,
.mtg-state,
.mtg-who__name,
.mtg-mode,
.mtg-ghost,
.mtg-edit,
.mtg-copy,
.mtg-field__label,
.mtg-doc__label,
.mtg-doc__button,
.mtg-tags__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 */
.mtg-btn,
.mtg-crumbs__list,
.mtg-link,
.mtg-chapters__link,
.mtg-role-link,
.mtg-next,
.mtg-continue {
    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 */
.mtg-eyebrow,
.mtg-tag,
.mtg-role__mark {
    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                                                            */
/* ------------------------------------------------------------------ */

/* a long word breaks (`anywhere`, which, unlike `break-word`, also shortens what the words ask for) rather than push a column
   out of the window, at 200% text on a small screen */
.mtg {
    background: var(--mtg-surface);
    color: var(--mtg-ink);
    overflow-wrap: anywhere;
}

/* a heading's own `break-word` (site.css) does not shorten what its words ask for */
.mtg :is(h1, h2, h3, h4, h5) {
    overflow-wrap: anywhere;
}

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

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

/* the label of the hero has a dot before it, as the design draws it */
.mtg-eyebrow--dot::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.5rem;
    border-radius: 50%;
    background: var(--mtg-blue);
    vertical-align: 0.0625rem;
}

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

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

.mtg-title--night {
    color: #ffffff;
}

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

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

.mtg-lead--ink {
    color: var(--mtg-ink);
}

/* a link of its own, in the blue, with its arrow; a long word in its words breaks rather than widen it past its column, at
   200% text on a small screen */
.mtg-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    color: var(--mtg-eyebrow);
    text-decoration: none;
    transition: gap var(--spring) var(--ease-spring);
}

.mtg-link > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.mtg-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.mtg-link--night {
    color: #ffffff;
}

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

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

/* this page's icons are lines (site.css's .icon fills with currentColor) */
.mtg .mtg-icon {
    fill: none;
}

/* paragraphs that are rows of their own words are as wide as their rows, not as the base's 70ch */
.mtg-assure,
.mtg-surface__brand,
.mtg-surface__caption,
.mtg-surface__sample,
.mtg-view__sub,
.mtg-view__over,
.mtg-view__title,
.mtg-records__head,
.mtg-metric__note,
.mtg-file__next,
.mtg-live,
.mtg-app__file,
.mtg-app__name,
.mtg-app__saved,
.mtg-rail__hint,
.mtg-work__text,
.mtg-work__note,
.mtg-note,
.mtg-person-card__role,
.mtg-gauge__row,
.mtg-gauge__note,
.mtg-ratios__title,
.mtg-ratio__row,
.mtg-ratios__note,
.mtg-issues__title,
.mtg-copy__note,
.mtg-demo__sample,
.mtg-role__text,
.mtg-role__foot,
.mtg-closing__mail,
.mtg-closing__card-top {
    max-width: none;
}

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

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

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

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

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

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

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

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

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

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

    .mtg-btn:hover .mtg-icon--arrow-right,
    .mtg-next:hover .mtg-icon--arrow-right,
    .mtg-continue:hover .mtg-icon--arrow-right,
    .mtg-edit:hover .mtg-icon--arrow-right {
        translate: 3px 0;
    }
}

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

.mtg-hero {
    position: relative;
    overflow: clip;
    isolation: isolate;
    background: var(--mtg-hero-bg);
}

/* a ring at the top right, as the design draws it */
.mtg-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -20rem;
    right: -22rem;
    width: 46rem;
    height: 46rem;
    border: 1px solid var(--mtg-hero-ring);
    border-radius: 50%;
    pointer-events: none;
}

.mtg-hero__inner {
    display: grid;
    gap: var(--gap-max);
    padding-block: 0.5rem 1.75rem;
}

.mtg-hero__words {
    min-width: 0;
}

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

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

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

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

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

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

.mtg-hero__words > .mtg-eyebrow {
    margin-top: 0.5rem;
}

.mtg-hero__title {
    margin: 0.75rem 0 0;
    color: var(--mtg-ink);
}

.mtg-hero__title > span {
    display: block;
}

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

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

/* the two phrases one under the other, and side by side with a dot between them from 40rem, where they fit one row (a dot
   would otherwise be left at the start of a wrapped line) */
.mtg-assure {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin: 1.25rem 0 0;
    color: var(--mtg-muted);
}

.mtg-assure > span {
    display: inline-flex;
    gap: 0.5rem;
}

.mtg-assure__dot {
    display: none;
    width: 0.25rem;
    height: 0.25rem;
    align-self: center;
    border-radius: 50%;
    background: var(--mtg-dot);
}

.mtg-hero__visual {
    min-width: 0;
}

/* ------------------------------------------------------------------ */
/* The sample workspace: a window drawn in HTML                        */
/* ------------------------------------------------------------------ */

/* what is inside follows the window's own width, not the page's: a phone's window has its entries in a row over the words, a
   wide one at the left */
.mtg-surface {
    container: mtg-surface / inline-size;
    width: 100%;
    max-width: 48rem;
    margin-inline: auto;
    border: 1px solid var(--mtg-surface-edge);
    border-radius: 0.9rem;
    background: var(--mtg-card);
    box-shadow: var(--mtg-surface-shadow);
    color: var(--mtg-ink);
    overflow: hidden;
}

.mtg-surface__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--mtg-line);
}

.mtg-surface__brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
    color: var(--mtg-muted);
}

.mtg-surface__brand strong {
    color: var(--mtg-ink);
}

.mtg-surface__k {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
}

.mtg-surface__sep {
    flex: none;
    height: 1rem;
    border-left: 1px solid var(--mtg-line-strong);
}

.mtg-surface__tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mtg-surface__search {
    display: none;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--mtg-line-strong);
    border-radius: 0.5rem;
    color: var(--mtg-muted);
}

.mtg-surface__search .icon {
    width: 1rem;
    height: 1rem;
}

.mtg-avatar {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--mtg-avatar);
    color: #ffffff;
}

.mtg-surface__body {
    display: grid;
}

.mtg-surface__side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--mtg-line);
    background: var(--mtg-wash);
}

.mtg-surface__label {
    display: none;
    color: var(--mtg-muted);
}

.mtg-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--mtg-muted);
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms var(--ease-standard), color 150ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.mtg-nav .icon {
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
}

.mtg-nav:hover:not(:disabled),
.mtg-nav:focus-visible {
    background: var(--mtg-nav-hover);
    color: var(--mtg-ink);
}

.mtg-nav[aria-pressed="true"] {
    background: var(--mtg-rail-on-bg);
    color: var(--mtg-rail-on-ink);
}

/* a disabled entry is drawn as the others are: the page without a script shows the window as a picture */
.mtg-nav:disabled {
    cursor: default;
    opacity: 1;
}

.mtg-nav:active:not(:disabled) {
    scale: var(--press-scale);
    transition-duration: 150ms, 150ms, var(--press-in);
}

.mtg-surface__sample {
    display: none;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    color: var(--mtg-muted);
}

.mtg-dot {
    display: inline-block;
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--mtg-green-dot);
}

.mtg-surface__main {
    min-width: 0;
    padding: 1rem;
}

.mtg-view {
    display: none;
}

.mtg-surface[data-view="pipeline"] .mtg-view[data-v="pipeline"],
.mtg-surface[data-view="underwriting"] .mtg-view[data-v="underwriting"],
.mtg-surface[data-view="documents"] .mtg-view[data-v="documents"],
.mtg-surface[data-view="servicing"] .mtg-view[data-v="servicing"] {
    display: block;
}

.mtg-view__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.mtg-view__head > div {
    flex: 1 1 10rem;
    min-width: 0;
}

.mtg-view__over,
.mtg-view__title,
.mtg-view__sub {
    margin: 0;
}

.mtg-view__over {
    color: var(--mtg-muted);
}

.mtg-view__title {
    margin-top: 0.25rem;
    color: var(--mtg-ink);
}

.mtg-view__sub {
    margin-top: 0.25rem;
    color: var(--mtg-muted);
}

.mtg-chip {
    flex: none;
    padding: 0.375rem 0.625rem;
    border-radius: 0.5rem;
    background: var(--mtg-blue-soft);
    color: var(--mtg-blue-ink);
}

/* the figures are rows where the window is narrow, three cards where it is wide */
.mtg-metrics {
    display: grid;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.mtg-metric {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 0.75rem;
    align-items: center;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--mtg-line);
    border-radius: 0.5rem;
    background: var(--mtg-card);
}

.mtg-metric__label {
    grid-column: 1;
    color: var(--mtg-muted);
}

.mtg-metric__value {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--mtg-ink);
}

.mtg-metric__note {
    grid-column: 1;
    color: var(--mtg-muted);
}

.mtg-records {
    margin-top: 1rem;
    border: 1px solid var(--mtg-line);
    border-radius: 0.5rem;
    overflow: hidden;
}

.mtg-records__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
    padding: 0.625rem 0.75rem;
    background: var(--mtg-wash);
}

.mtg-records__head span {
    color: var(--mtg-muted);
}

.mtg-table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    table-layout: fixed;
    text-align: left;
}

.mtg-table th,
.mtg-table td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--mtg-line);
    text-align: left;
    vertical-align: middle;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mtg-table thead th {
    background: var(--mtg-wash);
    color: var(--mtg-muted);
}

.mtg-table tbody tr:last-child td {
    border-bottom: 0;
}

.mtg-table th:nth-child(2),
.mtg-table td:nth-child(2) {
    display: none;
}

.mtg-table__name,
.mtg-table__code {
    display: block;
}

.mtg-table__code {
    color: var(--mtg-muted);
}

.mtg-status {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
}

.mtg-status--amber {
    background: var(--mtg-amber-soft);
    color: var(--mtg-amber);
}

.mtg-status--blue {
    background: var(--mtg-blue-soft);
    color: var(--mtg-blue-ink);
}

.mtg-status--green {
    background: var(--mtg-green-soft);
    color: var(--mtg-green);
}

.mtg-status--gray {
    background: var(--mtg-gray-soft);
    color: var(--mtg-gray);
}

.mtg-surface__caption {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    color: var(--mtg-muted);
}

.mtg-surface__ring {
    width: 0.375rem;
    height: 0.375rem;
    border: 1px solid var(--mtg-muted);
    border-radius: 50%;
    background: var(--mtg-blue-soft);
}

@container mtg-surface (min-width: 30rem) {
    .mtg-metrics {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .mtg-metric {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        align-items: start;
        row-gap: 0.125rem;
    }

    .mtg-metric__value {
        grid-column: 1;
        grid-row: auto;
    }

    .mtg-surface__search {
        display: inline-flex;
    }

    .mtg-table th:nth-child(2),
    .mtg-table td:nth-child(2) {
        display: table-cell;
    }
}

@container mtg-surface (min-width: 38rem) {
    .mtg-surface__body {
        grid-template-columns: 10.5rem minmax(0, 1fr);
    }

    .mtg-surface__side {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        padding: 1rem 0.625rem 0.75rem;
        border-right: 1px solid var(--mtg-line);
        border-bottom: 0;
    }

    .mtg-surface__label {
        display: block;
        padding: 0 0.75rem 0.5rem;
    }

    .mtg-surface__sample {
        display: flex;
        margin-top: 0.75rem;
        padding: 0.75rem 0.75rem 0;
        border-top: 1px solid var(--mtg-line);
    }

    .mtg-surface__main {
        padding: 1.25rem;
    }
}

/* ------------------------------------------------------------------ */
/* The strip of links to the page's parts                              */
/* ------------------------------------------------------------------ */

.mtg-chapters {
    border-bottom: 1px solid var(--mtg-line);
    background: var(--mtg-surface);
}

.mtg-chapters__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mtg-chapters__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--mtg-muted);
    text-decoration: none;
}

.mtg-chapters__link:hover {
    color: var(--mtg-eyebrow);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* ------------------------------------------------------------------ */
/* What it comes to                                                    */
/* ------------------------------------------------------------------ */

.mtg-overview {
    display: grid;
    gap: var(--gap-max);
}

.mtg-overview__body > .mtg-lead {
    max-width: 40rem;
}

.mtg-overview__body > .mtg-lead:first-child {
    margin-top: 0;
}

.mtg-proofs {
    display: grid;
    gap: 0.75rem var(--gap-max);
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.mtg-proof {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.mtg-proof__title {
    color: var(--mtg-ink);
}

.mtg-proof__text {
    color: var(--mtg-muted);
}

/* ------------------------------------------------------------------ */
/* A file's journey: five stages, one chosen at a time                 */
/* ------------------------------------------------------------------ */

/* a heading beside what it heads, or over it */
.mtg-head {
    display: grid;
    align-items: end;
    gap: var(--gap-max);
}

.mtg-head > .mtg-lead {
    margin-top: 0;
}

.mtg-head__hint {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mtg-muted);
}

.mtg-head__hint[hidden] {
    display: none;
}

.mtg-head__hint .icon {
    color: var(--mtg-eyebrow);
}

/* a band: the room it needs inside itself, and the section's own over it */
.mtg-tour {
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    background: var(--mtg-band);
}

.mtg-tour__grid {
    display: grid;
    gap: var(--gap-max);
    margin-top: var(--gap-max);
}

.mtg-stages {
    display: grid;
    align-content: start;
}

/* the list of stages: a line between two, none over the first or under the last */
.mtg-stage-link {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) 1.25rem;
    align-items: center;
    gap: 0.75rem;
    min-height: 4.5rem;
    padding-block: 0.75rem;
    color: var(--mtg-ink);
    text-decoration: none;
}

.mtg-stage-link + .mtg-stage-link {
    border-top: 1px solid var(--mtg-line-strong);
}

.mtg-stage-link__no {
    color: var(--mtg-muted);
}

.mtg-stage-link__text {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
}

.mtg-stage-link__line {
    color: var(--mtg-muted);
}

.mtg-stage-link .icon {
    color: var(--mtg-arrow);
    transition: translate var(--spring) var(--ease-spring), color 150ms var(--ease-standard);
}

.mtg-stage-link:hover {
    color: var(--mtg-eyebrow);
}

.mtg-stage-link:hover .icon {
    translate: 2px -2px;
}

.mtg-stage-link[aria-selected="true"],
.mtg-stage-link[aria-selected="true"] .mtg-stage-link__no,
.mtg-stage-link[aria-selected="true"] .icon {
    color: var(--mtg-eyebrow);
}

.mtg-stages__panels {
    display: grid;
    gap: var(--gap-max);
    min-width: 0;
}

/* the card of a stage: its file, its progress and what happens */
.mtg-file {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--mtg-card-edge);
    border-radius: 0.9rem;
    background: var(--mtg-card);
    box-shadow: var(--mtg-card-shadow);
    overflow: hidden;
}

.mtg-file[hidden] {
    display: none;
}

.mtg-file__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    padding: 1rem 1.25rem;
}

.mtg-file__top p {
    margin: 0;
    color: var(--mtg-muted);
}

.mtg-live {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--mtg-green);
}

.mtg-file__top .mtg-live {
    color: var(--mtg-green);
}

/* progress: a native element, so that what it says is said to everyone and nothing in it is drawn with an inline style */
.mtg-progress {
    display: block;
    width: calc(100% - 2.5rem);
    height: 0.25rem;
    margin: 0 1.25rem;
    border: 0;
    border-radius: 0.5rem;
    background: var(--mtg-track);
    color: var(--mtg-fill);
    -webkit-appearance: none;
    appearance: none;
    overflow: hidden;
}

.mtg-progress::-webkit-progress-bar {
    background: var(--mtg-track);
}

.mtg-progress::-webkit-progress-value {
    border-radius: 0.5rem;
    background: var(--mtg-fill);
    transition: width 250ms var(--ease-standard);
}

.mtg-progress::-moz-progress-bar {
    border-radius: 0.5rem;
    background: var(--mtg-fill);
}

.mtg-progress--thin {
    width: 100%;
    height: 0.4375rem;
    margin: 0.625rem 0 0;
}

.mtg-progress--ratio {
    width: 100%;
    height: 0.25rem;
    margin: 0.375rem 0 0;
}

.mtg-progress--ratio.is-warn::-webkit-progress-value {
    background: var(--mtg-fill-warn);
}

.mtg-progress--ratio.is-warn::-moz-progress-bar {
    background: var(--mtg-fill-warn);
}

.mtg-file__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.25rem;
}

.mtg-file__step {
    color: var(--mtg-eyebrow);
}

.mtg-file__title {
    margin: 0.5rem 0 0;
    max-width: 26rem;
    color: var(--mtg-ink);
    text-wrap: balance;
}

.mtg-file__text {
    margin: 0.75rem 0 0;
    max-width: 32rem;
    color: var(--mtg-muted);
}

.mtg-checks {
    display: grid;
    gap: 0.625rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.mtg-checks__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--mtg-ink);
}

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

.mtg-check .icon {
    width: 0.8125rem;
    height: 0.8125rem;
}

.mtg-file__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: auto;
    padding-top: 1rem;
}

.mtg-file__next {
    margin: 0;
    color: var(--mtg-muted);
}

.mtg-next {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    padding: 0.5rem 0;
    border: 0;
    background: none;
    color: var(--mtg-eyebrow);
    cursor: pointer;
    transition: scale var(--spring-quick) var(--ease-spring);
}

.mtg-next .icon {
    width: 1.125rem;
    height: 1.125rem;
    transition: translate var(--spring) var(--ease-spring);
}

.mtg-next:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.mtg-next:active {
    scale: var(--press-scale);
    transition-duration: var(--press-in);
}

/* ------------------------------------------------------------------ */
/* A sample application a visitor may edit                              */
/* ------------------------------------------------------------------ */

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

.mtg-demo__intro {
    display: grid;
    align-items: end;
    gap: var(--gap-max);
    margin-bottom: 0.75rem;
}

.mtg-demo__side > .mtg-lead {
    margin-top: 0;
}

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

/* the application: its parts follow its own width, not the page's */
.mtg-app {
    container: mtg-app / inline-size;
    border: 1px solid var(--mtg-card-edge);
    border-radius: 0.9rem;
    background: var(--mtg-card);
    box-shadow: var(--mtg-card-shadow);
    color: var(--mtg-ink);
    overflow: hidden;
}

.mtg-app__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--mtg-line);
}

.mtg-app__identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.mtg-app__mark {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: var(--mtg-blue-soft);
}

.mtg-app__mark img {
    width: 1.5rem;
    height: 1.5rem;
}

.mtg-app__name,
.mtg-app__file {
    margin: 0;
}

.mtg-app__file {
    color: var(--mtg-muted);
}

.mtg-app__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.mtg-demo-chip {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--mtg-blue-soft-edge);
    border-radius: 999px;
    background: var(--mtg-blue-soft);
    color: var(--mtg-blue-ink);
}

.mtg-app__saved {
    margin: 0;
    color: var(--mtg-muted);
}

.mtg-saved--dirty,
.mtg-app[data-dirty="true"] .mtg-saved--clean {
    display: none;
}

.mtg-app[data-dirty="true"] .mtg-saved--dirty {
    display: inline;
}

.mtg-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--mtg-line-strong);
    border-radius: 0.5rem;
    background: var(--mtg-card);
    color: var(--mtg-ink);
    cursor: pointer;
    transition: background-color 150ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.mtg-ghost[hidden] {
    display: none;
}

.mtg-ghost .icon {
    width: 1rem;
    height: 1rem;
}

.mtg-ghost:hover {
    background: var(--mtg-nav-hover);
}

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

/* one column that may shrink to the application's width: a track of `auto` would be as wide as the widest of the rail, the work and
   the insights, which at 200% text on a small screen is wider than the window */
.mtg-app__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

/* the rail of steps: a row of buttons over the work where the application is narrow, a list at its left where it is wide */
.mtg-rail {
    min-width: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--mtg-line);
    background: var(--mtg-wash);
}

.mtg-rail__title {
    display: none;
    margin: 0;
    padding: 0 0.75rem 0.75rem;
    color: var(--mtg-muted);
}

.mtg-rail__steps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 100%), 1fr));
    gap: 0.375rem;
}

.mtg-step {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) 1rem;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--mtg-muted);
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms var(--ease-standard), color 150ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.mtg-step:disabled {
    cursor: default;
    opacity: 1;
}

.mtg-step:hover:not(:disabled) {
    background: var(--mtg-nav-hover);
    color: var(--mtg-ink);
}

.mtg-step[aria-current="step"] {
    background: var(--mtg-rail-on-bg);
    color: var(--mtg-rail-on-ink);
}

.mtg-step:active:not(:disabled) {
    scale: var(--press-scale);
    transition-duration: 150ms, 150ms, var(--press-in);
}

.mtg-step__no {
    color: inherit;
    opacity: 0.8;
}

.mtg-step__name {
    min-width: 0;
}

.mtg-step__state {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 1rem;
    height: 1rem;
}

.mtg-step__state .icon {
    width: 0.9375rem;
    height: 0.9375rem;
}

.mtg-step[data-state="ok"] .mtg-icon--alert,
.mtg-step[data-state="missing"] .mtg-icon--check {
    display: none;
}

.mtg-step[data-state="ok"] .mtg-step__state {
    color: var(--mtg-step-ok);
}

.mtg-step[data-state="missing"] .mtg-step__state {
    color: var(--mtg-step-missing);
}

.mtg-rail__hint {
    display: none;
    margin: 0;
    padding: 1.25rem 0.75rem 0;
    color: var(--mtg-muted);
}

/* the work: the heading of the step, the borrowers, the fields */
.mtg-work {
    min-width: 0;
    padding: 1.25rem 1rem;
}

.mtg-work__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mtg-work__head > div {
    flex: 1 1 12rem;
    min-width: 0;
}

.mtg-stagehead {
    display: none;
}

.mtg-app[data-step="0"] .mtg-stagehead[data-mtg-stage="0"],
.mtg-app[data-step="1"] .mtg-stagehead[data-mtg-stage="1"],
.mtg-app[data-step="2"] .mtg-stagehead[data-mtg-stage="2"],
.mtg-app[data-step="3"] .mtg-stagehead[data-mtg-stage="3"],
.mtg-app[data-step="4"] .mtg-stagehead[data-mtg-stage="4"],
.mtg-app[data-step="5"] .mtg-stagehead[data-mtg-stage="5"] {
    display: block;
}

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

.mtg-work__title {
    margin: 0.25rem 0 0;
    color: var(--mtg-ink);
}

.mtg-work__text {
    margin: 0.25rem 0 0;
    color: var(--mtg-muted);
}

/* what the step comes to: it needs attention, or it is complete (the script says which, by the application's data-done) */
.mtg-state {
    flex: none;
    margin: 0;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--mtg-amber-edge);
    border-radius: 999px;
    background: var(--mtg-amber-soft);
    color: var(--mtg-amber);
    max-width: 100%;
}

.mtg-state__done,
.mtg-app[data-done="true"] .mtg-state__open {
    display: none;
}

.mtg-app[data-done="true"] .mtg-state {
    border-color: var(--mtg-green-edge);
    background: var(--mtg-green-soft);
    color: var(--mtg-green);
}

.mtg-app[data-done="true"] .mtg-state__done {
    display: inline;
}

/* the borrowers and the view of them: for the steps about a borrower only */
.mtg-people-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mtg-app[data-step="3"] .mtg-people-bar,
.mtg-app[data-step="4"] .mtg-people-bar,
.mtg-app[data-step="5"] .mtg-people-bar {
    display: none;
}

.mtg-switch--people {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
}

.mtg-who {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.125rem;
    /* as wide as the longest of its two lines asks for, but never wider than a window can hold at 200% text (a percentage would
       be of a box that is as wide as these) */
    min-width: min(9.5rem, 40vw);
    min-height: 3.25rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--mtg-line-strong);
    border-radius: 0.5rem;
    background: var(--mtg-card);
    color: var(--mtg-ink);
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms var(--ease-standard), border-color 150ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.mtg-who:disabled {
    cursor: default;
    opacity: 1;
}

.mtg-who[aria-pressed="true"] {
    border-color: var(--mtg-select-edge);
    background: var(--mtg-blue-soft);
    color: var(--mtg-blue-ink);
}

.mtg-who__role {
    color: var(--mtg-muted);
}

.mtg-who[aria-pressed="true"] .mtg-who__role {
    color: inherit;
}

.mtg-who:active:not(:disabled) {
    scale: var(--press-scale);
    transition-duration: 150ms, 150ms, var(--press-in);
}

.mtg-switch--mode {
    display: inline-flex;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 0.125rem;
    padding: 0.1875rem;
    border-radius: 0.5rem;
    background: var(--mtg-wash);
}

.mtg-mode {
    min-height: 2.75rem;
    padding: 0.375rem 0.875rem;
    border: 0;
    border-radius: 0.375rem;
    background: transparent;
    color: var(--mtg-muted);
    cursor: pointer;
    transition: background-color 150ms var(--ease-standard), color 150ms var(--ease-standard);
}

.mtg-mode:disabled {
    cursor: default;
    opacity: 1;
}

.mtg-mode[aria-pressed="true"] {
    background: var(--mtg-card);
    color: var(--mtg-eyebrow);
    box-shadow: 0 1px 3px rgb(16 41 72 / 0.14);
}

/* the steps, and which is shown: the application's data-step; the borrower and the view of them the same way */
.mtg-stage {
    display: none;
    gap: var(--gap-max);
}

.mtg-app[data-step="0"] .mtg-stage[data-mtg-stage="0"],
.mtg-app[data-step="1"] .mtg-stage[data-mtg-stage="1"],
.mtg-app[data-step="2"] .mtg-stage[data-mtg-stage="2"],
.mtg-app[data-step="3"] .mtg-stage[data-mtg-stage="3"],
.mtg-app[data-step="4"] .mtg-stage[data-mtg-stage="4"],
.mtg-app[data-step="5"] .mtg-stage[data-mtg-stage="5"] {
    display: grid;
}

.mtg-app[data-mode="individual"] [data-mtg-when="combined"],
.mtg-app[data-mode="combined"] [data-mtg-when="individual"] {
    display: none;
}

.mtg-app[data-borrower="0"] .mtg-person[data-mtg-person="1"],
.mtg-app[data-borrower="1"] .mtg-person[data-mtg-person="0"] {
    display: none;
}

.mtg-person,
[data-mtg-when] {
    display: grid;
    gap: var(--gap-max);
}

.mtg-app[data-mode="individual"] [data-mtg-when="combined"],
.mtg-app[data-mode="combined"] [data-mtg-when="individual"],
.mtg-app[data-borrower="0"] .mtg-person[data-mtg-person="1"],
.mtg-app[data-borrower="1"] .mtg-person[data-mtg-person="0"] {
    display: none;
}

.mtg-panel {
    min-width: 0;
}

.mtg-panel__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    margin-bottom: 0.75rem;
}

.mtg-panel__title {
    margin: 0;
    color: var(--mtg-ink);
}

.mtg-panel__badge {
    color: var(--mtg-muted);
}

.mtg-fields {
    display: grid;
    gap: 0.875rem;
}

.mtg-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.mtg-field__label {
    color: var(--mtg-ink);
}

.mtg-field__control {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--mtg-field-edge);
    border-radius: 0.5rem;
    background: var(--mtg-card);
    color: var(--mtg-ink);
}

.mtg-field__control:focus-visible {
    border-color: var(--mtg-select-edge);
}

.mtg-field__control:invalid:not(:placeholder-shown) {
    border-color: var(--mtg-invalid);
}

/* a field that is not yet at work is drawn as the others are: the page without a script shows the first screen as a picture */
.mtg-field__control:disabled {
    opacity: 1;
    -webkit-text-fill-color: currentColor;
}

.mtg-field__help {
    color: var(--mtg-muted);
}

.mtg-docs {
    display: grid;
}

.mtg-doc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding-block: 0.375rem;
}

.mtg-doc + .mtg-doc {
    border-top: 1px solid var(--mtg-line);
}

.mtg-doc__label {
    min-width: 0;
    color: var(--mtg-ink);
}

.mtg-doc__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--mtg-blue-soft-edge);
    border-radius: 0.5rem;
    background: var(--mtg-blue-soft);
    color: var(--mtg-blue-ink);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 150ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.mtg-doc__button:disabled {
    cursor: default;
    opacity: 1;
}

.mtg-doc__on {
    display: none;
    align-items: center;
    gap: 0.375rem;
}

.mtg-doc__on .icon {
    width: 1rem;
    height: 1rem;
}

.mtg-doc__button[data-done="true"] {
    border-color: var(--mtg-green-edge);
    background: var(--mtg-green-soft);
    color: var(--mtg-green);
}

.mtg-doc__button[data-done="true"] .mtg-doc__on {
    display: inline-flex;
}

.mtg-doc__button[data-done="true"] .mtg-doc__off {
    display: none;
}

.mtg-doc__button:active:not(:disabled) {
    scale: var(--press-scale);
    transition-duration: 150ms, var(--press-in);
}

.mtg-note {
    margin: 0.75rem 0 0;
    color: var(--mtg-muted);
}

/* a note under a step's panels is a row of the stage, which has its gap */
.mtg-stage > .mtg-note {
    margin: 0;
}

/* the borrowers together: a card for each */
.mtg-overviews {
    display: grid;
    gap: 0.875rem;
}

.mtg-person-card {
    min-width: 0;
    padding: 0.875rem;
    border: 1px solid var(--mtg-line);
    border-radius: 0.5rem;
}

.mtg-person-card__name {
    margin: 0;
    color: var(--mtg-ink);
}

.mtg-person-card__role {
    margin: 0.25rem 0 0.5rem;
    color: var(--mtg-muted);
}

.mtg-person-card__list {
    margin: 0;
    padding: 0;
}

.mtg-person-card__list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding-block: 0.5rem;
}

.mtg-person-card__list > div + div {
    border-top: 1px solid var(--mtg-line);
}

.mtg-person-card__list dt {
    color: var(--mtg-muted);
}

.mtg-person-card__list dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: right;
}

.mtg-edit {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    margin-top: 0.5rem;
    padding: 0.375rem 0.75rem;
    border: 0;
    border-radius: 0.5rem;
    background: var(--mtg-blue-soft);
    color: var(--mtg-blue-ink);
    cursor: pointer;
    transition: scale var(--spring-quick) var(--ease-spring);
}

.mtg-edit[hidden] {
    display: none;
}

.mtg-edit .icon {
    width: 1rem;
    height: 1rem;
    transition: translate var(--spring) var(--ease-spring);
}

.mtg-edit:active {
    scale: var(--press-scale);
    transition-duration: var(--press-in);
}

/* the review */
.mtg-summary {
    display: grid;
    gap: 0 0.875rem;
    margin: 0;
}

.mtg-summary > div {
    padding-block: 0.375rem;
}

.mtg-summary dt {
    color: var(--mtg-muted);
}

.mtg-summary dd {
    margin: 0.125rem 0 0;
    color: var(--mtg-ink);
    overflow-wrap: anywhere;
}

.mtg-alert {
    margin: 0.75rem 0 0;
    padding: 0.75rem 0.875rem;
    border-left: 3px solid var(--mtg-amber-line);
    background: var(--mtg-amber-soft);
    color: var(--mtg-amber);
}

.mtg-alert--good,
.mtg-app[data-complete="true"] .mtg-alert--open {
    display: none;
}

.mtg-app[data-complete="true"] .mtg-alert--good {
    display: block;
    border-left-color: var(--mtg-green-dot);
    background: var(--mtg-green-soft);
    color: var(--mtg-green);
}

/* the foot of the work: what to do, and on to the next step */
.mtg-work__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 1rem;
}

.mtg-work__note {
    margin: 0;
    color: var(--mtg-muted);
}

.mtg-work__note--last {
    display: none;
}

.mtg-app[data-step="5"] .mtg-work__note--last {
    display: inline;
}

.mtg-app[data-step="5"] .mtg-work__note--steps {
    display: none;
}

.mtg-continue {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 0.5rem;
    background: var(--mtg-blue);
    color: var(--mtg-on-blue);
    cursor: pointer;
    transition: background-color 150ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.mtg-continue[hidden] {
    display: none;
}

.mtg-continue:hover {
    background: var(--mtg-blue-hover);
}

.mtg-continue .icon {
    width: 1.125rem;
    height: 1.125rem;
    transition: translate var(--spring) var(--ease-spring);
}

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

.mtg-continue [data-mtg-stage] {
    display: none;
}

.mtg-app[data-step="0"] .mtg-continue [data-mtg-stage="0"],
.mtg-app[data-step="1"] .mtg-continue [data-mtg-stage="1"],
.mtg-app[data-step="2"] .mtg-continue [data-mtg-stage="2"],
.mtg-app[data-step="3"] .mtg-continue [data-mtg-stage="3"],
.mtg-app[data-step="4"] .mtg-continue [data-mtg-stage="4"],
.mtg-app[data-step="5"] .mtg-continue [data-mtg-stage="5"] {
    display: inline;
}

/* the insights: what the file comes to, as it is typed */
.mtg-insights {
    display: grid;
    min-width: 0;
    gap: 1rem;
    padding: 1.25rem 1rem;
    border-top: 1px solid var(--mtg-line);
    background: var(--mtg-insights-bg);
}

.mtg-insights__head {
    display: none;
}

.mtg-insights__head p {
    margin: 0;
}

.mtg-insights__title {
    margin-top: 0.125rem;
    color: var(--mtg-ink);
}

.mtg-gauge__row,
.mtg-ratio__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
}

.mtg-gauge__row span,
.mtg-ratio__row span {
    color: var(--mtg-muted);
}

.mtg-gauge__row strong,
.mtg-ratio__row strong {
    color: var(--mtg-ink);
}

.mtg-gauge__note {
    margin: 0.5rem 0 0;
    color: var(--mtg-muted);
}

.mtg-ratios__title {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    color: var(--mtg-ink);
}

.mtg-ratios__title .icon {
    width: 0.9375rem;
    height: 0.9375rem;
    color: var(--mtg-muted);
}

.mtg-ratio__row {
    margin-top: 0.75rem;
}

.mtg-ratios__note {
    margin: 0.75rem 0 0;
    color: var(--mtg-muted);
}

.mtg-issues__title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
    color: var(--mtg-ink);
}

.mtg-issues__title span {
    color: var(--mtg-amber);
}

.mtg-issues__list {
    display: grid;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.mtg-issue {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    color: var(--mtg-muted);
}

.mtg-issue[hidden] {
    display: none;
}

/* a marker for what is open, drawn: an amber dot, and a green one for what is clear */
.mtg-issue::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--mtg-step-missing);
}

.mtg-issue--clear::before {
    background: var(--mtg-green-dot);
}

.mtg-issue--more::before {
    background: var(--mtg-muted);
}

.mtg-insights__foot {
    display: grid;
    gap: 0.125rem;
}

.mtg-copy {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.375rem 0;
    border: 0;
    background: none;
    color: var(--mtg-eyebrow);
    text-align: left;
    cursor: pointer;
    transition: scale var(--spring-quick) var(--ease-spring);
}

.mtg-copy[hidden] {
    display: none;
}

.mtg-copy .icon {
    width: 1rem;
    height: 1rem;
}

.mtg-copy:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.mtg-copy:active {
    scale: var(--press-scale);
    transition-duration: var(--press-in);
}

.mtg-copy__note {
    margin: 0;
    min-height: 1.3125rem;
    color: var(--mtg-green);
}

.mtg-demo__outro {
    display: grid;
    gap: 0.5rem var(--gap-max);
    align-items: start;
    margin-top: var(--gap-max);
}

.mtg-demo__outro > p {
    margin: 0;
    max-width: 50rem;
    color: var(--mtg-muted);
}

.mtg-demo__outro > p strong {
    color: var(--mtg-ink);
}

/* where the application is wide enough, the work has two columns of fields and the steps are a list at its left */
@container mtg-app (min-width: 36rem) {
    .mtg-fields,
    .mtg-overviews,
    .mtg-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mtg-work {
        padding: var(--gap-max) 1.5rem;
    }
}

@container mtg-app (min-width: 44rem) {
    .mtg-app__grid {
        grid-template-columns: 11.5rem minmax(0, 1fr);
    }

    .mtg-rail {
        padding: 1.25rem 0.75rem;
        border-right: 1px solid var(--mtg-line);
        border-bottom: 0;
    }

    .mtg-rail__title {
        display: block;
    }

    .mtg-rail__steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.25rem;
    }

    .mtg-rail__hint {
        display: block;
    }

    /* the insights go under the work, across both columns, as three blocks side by side */
    .mtg-insights {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
        gap: 1.25rem var(--gap-max);
        padding-inline: 1.5rem;
    }

    .mtg-insights__foot {
        grid-column: 1 / -1;
    }
}

@container mtg-app (min-width: 62rem) {
    .mtg-app__grid {
        grid-template-columns: 11.5rem minmax(0, 1fr) 17rem;
    }

    .mtg-insights {
        grid-column: auto;
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 1rem;
        padding: 1.5rem 1rem;
        border-top: 0;
        border-left: 1px solid var(--mtg-line);
    }

    .mtg-insights__head {
        display: block;
    }

    .mtg-insights__foot {
        grid-column: auto;
        margin-top: auto;
    }
}

/* ------------------------------------------------------------------ */
/* What it covers: eight things, one open at a time                     */
/* ------------------------------------------------------------------ */

.mtg-acc__item {
    min-width: 0;
}

/* a line between two things, none over the first or under the last (the list begins and ends where its words do) */
.mtg-acc__item + .mtg-acc__item {
    border-top: 1px solid var(--mtg-line-strong);
}

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

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

.mtg-acc__item:first-child > .mtg-acc__summary {
    padding-top: 0;
}

.mtg-acc__no {
    grid-row: 1 / span 2;
    color: var(--mtg-muted);
}

.mtg-acc__name {
    grid-column: 2;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    transition: color 150ms var(--ease-standard);
}

.mtg-acc__line {
    grid-column: 2;
    min-width: 0;
    color: var(--mtg-muted);
}

.mtg-acc__plus {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: end;
    color: var(--mtg-eyebrow);
}

.mtg-acc__plus .icon {
    display: block;
    transition: rotate var(--spring) var(--ease-spring);
}

.mtg-acc__item[open] .mtg-acc__plus .icon {
    rotate: 45deg;
}

.mtg-acc__summary:hover .mtg-acc__name {
    color: var(--mtg-eyebrow);
}

.mtg-acc__detail {
    display: grid;
    gap: 0.75rem;
    padding: 0 0 1rem 3rem;
}

.mtg-acc__item:last-child > .mtg-acc__detail {
    padding-bottom: 0;
}

.mtg-acc__text {
    margin: 0;
    max-width: 50rem;
    color: var(--mtg-muted);
}

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

.mtg-tags__item {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--mtg-tag-edge);
    border-radius: 0.375rem;
    background: var(--mtg-tag-bg);
    color: var(--mtg-tag-ink);
}

/* ------------------------------------------------------------------ */
/* Every role, in sync: a choice of three roles and a window            */
/* ------------------------------------------------------------------ */

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

.mtg-roles__head > .mtg-lead {
    margin-top: 0.75rem;
}

/* the roles are links to their windows until the script makes tabs of them; a line between two, none over the first or under the last */
.mtg-roles__tabs {
    display: flex;
    flex-direction: column;
    max-width: 28.75rem;
    margin-top: 1rem;
}

.mtg-role-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3.5rem;
    color: var(--mtg-muted);
    text-decoration: none;
    transition: color 150ms var(--ease-standard);
}

.mtg-role-link + .mtg-role-link {
    border-top: 1px solid var(--mtg-line);
}

.mtg-role-link:first-child {
    min-height: 2.75rem;
}

.mtg-role-link > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.mtg-role-link .icon {
    flex: none;
    color: var(--mtg-arrow);
    transition: translate var(--spring) var(--ease-spring), color 150ms var(--ease-standard);
}

.mtg-role-link:hover,
.mtg-role-link[aria-selected="true"] {
    color: var(--mtg-eyebrow);
}

.mtg-role-link:hover .icon,
.mtg-role-link[aria-selected="true"] .icon {
    color: var(--mtg-eyebrow);
}

.mtg-roles__panels {
    display: grid;
    gap: var(--gap-max);
    min-width: 0;
}

.mtg-role {
    display: block;
    min-width: 0;
    border: 1px solid var(--mtg-card-edge);
    border-radius: 0.8rem;
    background: var(--mtg-role-body);
    overflow: hidden;
}

.mtg-role[hidden] {
    display: none;
}

.mtg-role__bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--mtg-line);
    background: var(--mtg-role-bar);
}

.mtg-role__bar .mtg-tag {
    min-width: 0;
    color: var(--mtg-muted);
}

.mtg-role__dots {
    display: flex;
    flex: none;
    gap: 0.3125rem;
}

.mtg-role__dots b {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.mtg-role__dots b:nth-child(1) {
    background: var(--mtg-dots-1);
}

.mtg-role__dots b:nth-child(2) {
    background: var(--mtg-dots-2);
}

.mtg-role__dots b:nth-child(3) {
    background: var(--mtg-dots-3);
}

.mtg-role__body {
    display: grid;
    gap: 1rem;
    padding: var(--gap-max) 1.25rem;
}

.mtg-role__who {
    display: flex;
    align-items: center;
    gap: 0.875rem;
}

.mtg-role__who > div {
    min-width: 0;
}

.mtg-role__who .mtg-tag {
    color: var(--mtg-muted);
}

.mtg-role__title {
    margin: 0.25rem 0 0;
    color: var(--mtg-ink);
}

.mtg-role__mark {
    display: grid;
    flex: none;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    background: var(--mtg-role-mark);
    color: var(--mtg-role-mark-ink);
}

.mtg-role__text {
    margin: 0;
    max-width: 33rem;
    color: var(--mtg-muted);
}

.mtg-role__list {
    margin: 0;
    padding: 0;
    border: 1px solid var(--mtg-line);
    border-radius: 0.5rem;
    background: var(--mtg-card);
    list-style: none;
    overflow: hidden;
}

.mtg-role__item {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) 1.25rem;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    overflow-wrap: anywhere;
}

.mtg-role__item + .mtg-role__item {
    border-top: 1px solid var(--mtg-line);
}

.mtg-role__item .mtg-tag {
    color: var(--mtg-muted);
}

.mtg-role__item .icon {
    width: 1rem;
    height: 1rem;
    color: var(--mtg-arrow);
}

.mtg-role__foot {
    margin: 0;
}

/* ------------------------------------------------------------------ */
/* Control and configuration: a deep blue band, on both themes          */
/* ------------------------------------------------------------------ */

.mtg-night {
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    background: var(--mtg-night);
    color: #ffffff;
}

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

.mtg-night__words {
    min-width: 0;
}

.mtg-night__words .mtg-title {
    max-width: 34rem;
}

.mtg-night__text {
    margin: 0.75rem 0 0.25rem;
    max-width: 31rem;
    color: var(--mtg-night-text);
}

.mtg-link--night:hover {
    color: var(--mtg-night-hover);
}

.mtg-night__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mtg-night__row {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.75rem;
    padding-block: 1rem;
}

.mtg-night__row + .mtg-night__row {
    border-top: 1px solid var(--mtg-night-line);
}

.mtg-night__row:first-child {
    padding-top: 0;
}

.mtg-night__row:last-child {
    padding-bottom: 0;
}

.mtg-night__no {
    color: var(--mtg-night-accent);
}

.mtg-night__name {
    margin: 0;
    color: #ffffff;
}

.mtg-night__line {
    margin: 0.25rem 0 0;
    max-width: 32rem;
    color: var(--mtg-night-text);
}

/* ------------------------------------------------------------------ */
/* Good to know: the questions, beside their heading                    */
/* ------------------------------------------------------------------ */

.mtg-faq {
    display: grid;
    gap: var(--gap-max);
}

.mtg-faq__head > .mtg-lead {
    margin-bottom: 0.25rem;
}

.mtg-faq__list {
    min-width: 0;
}

.mtg-faq__item + .mtg-faq__item {
    border-top: 1px solid var(--mtg-line-strong);
}

.mtg-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding-block: 0.75rem;
    list-style: none;
    cursor: pointer;
}

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

.mtg-faq__question > span {
    min-width: 0;
    overflow-wrap: anywhere;
    transition: color 150ms var(--ease-standard);
}

.mtg-faq__question:hover > span {
    color: var(--mtg-eyebrow);
}

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

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

/* the first question begins where its heading's label does and the last ends where its answer does; each still 44px to press */
.mtg-faq__item:first-child > .mtg-faq__question {
    min-height: 2.75rem;
    padding-top: 0;
}

.mtg-faq__answer {
    padding: 0 2.5rem 1rem 0;
}

.mtg-faq__item:last-child > .mtg-faq__answer {
    padding-bottom: 0;
}

.mtg-faq__answer p {
    margin: 0;
    max-width: 42rem;
    color: var(--mtg-muted);
    overflow-wrap: anywhere;
}

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

    .mtg-acc__item::details-content,
    .mtg-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;
    }

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

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

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

.mtg-closing {
    position: relative;
    isolation: isolate;
    display: grid;
    align-items: center;
    gap: var(--gap-max);
    padding: 1.75rem 1.25rem;
    overflow: hidden;
    border-radius: clamp(1rem, 1.5vw, 1.5rem);
    background: var(--mtg-closing);
    color: #ffffff;
}

/* a ring of light at the top right, from 64rem: on a narrower card its words reach across it, and a line of it lay over them */
.mtg-closing::before {
    content: "";
    display: none;
    position: absolute;
    z-index: -1;
    top: -15rem;
    right: -12rem;
    width: 44rem;
    height: 31rem;
    border: 1px solid var(--mtg-closing-ring);
    border-radius: 50%;
    pointer-events: none;
}

.mtg-closing__words,
.mtg-closing__words > *,
.mtg-closing__card {
    min-width: 0;
    overflow-wrap: anywhere;
}

.mtg-closing .mtg-eyebrow--night {
    color: var(--mtg-closing-eyebrow);
}

.mtg-closing__title {
    margin: 0.5rem 0 0.75rem;
    max-width: 41rem;
    color: #ffffff;
}

.mtg-closing__text {
    margin: 0;
    max-width: 41rem;
    color: var(--mtg-closing-text);
}

.mtg-closing__points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    color: #ffffff;
}

/* the tick before each is drawn, not a glyph */
.mtg-closing__points li::before {
    content: "";
    display: inline-block;
    width: 0.5rem;
    height: 0.3125rem;
    margin-right: 0.625rem;
    border-bottom: 2px solid currentColor;
    border-left: 2px solid currentColor;
    rotate: -45deg;
    vertical-align: 0.1875rem;
}

.mtg-closing__card {
    display: grid;
    gap: 0.75rem;
    padding: 1.25rem;
    border-radius: 0.75rem;
    background: var(--mtg-card);
    box-shadow: var(--mtg-closing-shadow);
    color: var(--mtg-ink);
}

.mtg-closing__card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    color: var(--mtg-muted);
}

.mtg-closing__card-top .icon {
    color: var(--mtg-eyebrow);
}

.mtg-closing__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    background: var(--mtg-blue-soft);
    color: var(--mtg-blue-ink);
    text-decoration: none;
    transition: background-color 150ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.mtg-closing__cta .icon {
    flex: none;
    transition: translate var(--spring) var(--ease-spring);
}

.mtg-closing__cta:hover .icon {
    translate: 3px 0;
}

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

.mtg-closing__mail {
    margin: 0;
    color: var(--mtg-muted);
}

.mtg-closing__mail a {
    color: var(--mtg-eyebrow);
}

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

/* a page without a script has every stage and every role 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) .mtg-file ~ .mtg-file,
    [data-tabs]:not(.is-ready) .mtg-role ~ .mtg-role {
        display: none;
    }
}

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

@media (min-width: 40rem) {
    .mtg-acc__summary {
        grid-template-columns: 3rem minmax(0, 1fr) 1.5rem;
    }

    .mtg-acc__detail {
        padding-left: 3.75rem;
    }

    .mtg-role__body {
        padding: var(--gap-max) 2.25rem;
    }

    .mtg-closing {
        padding: 2.25rem 2.5rem;
    }

    .mtg-night__row {
        grid-template-columns: 3rem minmax(0, 1fr);
    }
}

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

@media (min-width: 48rem) {
    /* the name and what it comes to side by side */
    .mtg-acc__summary {
        grid-template-columns: 3rem minmax(0, 1.2fr) minmax(0, 1fr) 1.5rem;
        gap: 0 1.25rem;
    }

    .mtg-acc__no {
        grid-row: auto;
    }

    /* what a thing comes to starts where its name does: the number's column and the gap after it */
    .mtg-acc__detail {
        padding-left: 4.25rem;
    }

    .mtg-acc__line {
        grid-column: 3;
    }

    .mtg-acc__plus {
        grid-column: 4;
        grid-row: auto;
    }

    .mtg-acc__name {
        grid-column: 2;
    }
}

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

@media (min-width: 64rem) {
    .mtg-roles {
        grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    }

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

    .mtg-faq {
        grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    }

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

    .mtg-closing::before {
        display: block;
    }
}

/* ------------------------------------------------------------------ */
/* Contrast and transparency                                           */
/* ------------------------------------------------------------------ */

@media (prefers-contrast: more) {
    .mtg-hero::before,
    .mtg-closing::before {
        display: none;
    }

    .mtg-surface,
    .mtg-app,
    .mtg-role,
    .mtg-who,
    .mtg-mode,
    .mtg-field__control,
    .mtg-ghost,
    .mtg-doc__button,
    .mtg-person-card,
    .mtg-role__list,
    .mtg-tags__item {
        border-color: var(--md-outline);
    }

    .mtg-acc__item + .mtg-acc__item,
    .mtg-faq__item + .mtg-faq__item,
    .mtg-role-link + .mtg-role-link,
    .mtg-role__item + .mtg-role__item {
        border-color: var(--md-outline);
    }
}

/* ------------------------------------------------------------------ */
/* 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 sample workspace last. */
@media (prefers-reduced-motion: no-preference) {
    .mtg-hero__title,
    .mtg-hero__lead {
        animation: hero-settle var(--spring-slow) var(--ease-spring) both;
    }

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

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

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

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

    .mtg-surface {
        animation: hero-enter var(--spring-slow) var(--ease-spring) 180ms both;
    }

    .mtg-file:not([hidden]) .mtg-file__title,
    .mtg-file:not([hidden]) .mtg-file__text,
    .mtg-file:not([hidden]) .mtg-checks,
    .mtg-role:not([hidden]) .mtg-role__body {
        animation: mtg-swap var(--spring) var(--ease-spring) both;
    }
}

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

@media print {
    .mtg-hero,
    .mtg-demo,
    .mtg-tour {
        background: none;
    }

    .mtg-night,
    .mtg-closing {
        background: none;
        color: inherit;
    }

    .mtg-night .mtg-title,
    .mtg-night__name,
    .mtg-closing__title {
        color: inherit;
    }

    .mtg-hero::before,
    .mtg-closing::before {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* Wider windows: the page's rows of two columns                        */
/* ------------------------------------------------------------------ */

@media (min-width: 40rem) {
    .mtg-assure {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 0.5rem;
    }

    .mtg-assure__dot {
        display: block;
    }

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

    .mtg-chapters__list {
        gap: 0 var(--gap-max);
    }
}

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

    /* a heading beside its line */
    .mtg-head:has(> .mtg-lead) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
    }

    .mtg-head:not(:has(> .mtg-lead)) {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@media (min-width: 64rem) {
    /* the words and the workspace side by side, the title's two sentences on two lines where there is room for them */
    .mtg-hero__inner {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        align-items: center;
    }

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

    .mtg-head__hint {
        justify-self: end;
    }

    /* the stages at the left, the file of the one chosen at the right */
    .mtg-tour__grid {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        align-items: start;
    }

    .mtg-demo__intro {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.7fr);
        margin-bottom: var(--gap-max);
    }
}