/* The web and mobile apps page (services/pages/web-and-mobile-apps.html), after its own design (2026-10-28: "web-and-mobile-apps
   page design"). 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, which the design carries too, byte for byte.

   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 9 to 11px and its titles in 49 to 73px with a
   tracking of -0.07em: the sample windows are set in the roles' sizes, so they are larger, and they give way where their own
   width is short). Mobile first: one column, the hero's picture a strip under its words below 80rem and beside them from 80rem,
   the examples' stories over their windows and beside them from 64rem. Where the page asks for a script (the choice of an example,
   of a stage) every answer is in the markup, and what chooses is 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 .app; its colours are the --app-* tokens, set again for the dark theme, and its
   text takes typography.md's two text colours through them. The deep blue bands are deep blue on both themes, as the design draws
   them. */

:root {
    --app-surface: #ffffff;
    /* the text: headings and body text in typography.md's primary colour, small text in its secondary */
    --app-ink: var(--text-primary);
    --app-muted: var(--text-secondary);
    --app-eyebrow: #0a4ce9;
    --app-crumb-chevron: #8790a8;
    --app-blue: #0154e5;
    --app-blue-hover: #0043bd;
    --app-on-blue: #ffffff;
    --app-blue-soft: #e8f1ff;
    --app-blue-soft-edge: #cbdcff;
    --app-outline: #b4c9e8;
    --app-outline-ink: #0f47a8;
    --app-outline-bg: rgb(255 255 255 / 0.74);
    --app-outline-hover: #eef6ff;
    --app-line: #e4eaf2;
    --app-line-strong: #d3deec;
    --app-tick: #0b7a57;
    --app-wash: #f5f8fe;
    --app-faq-band: #f9fbfd;
    /* the hero: the company's picture is the whole of its background (a scene cover, which css/pages/landing.css drew for this
       page until its own design): the page's own colour as channels over the picture's foot and its pale left; the picture's
       filter; the mask that lets its pale left give way to the page where the page is dark (a white mask, here); a scene
       cover's top fade and the veil over its left, short and none on the pale page, where its ground is the hero's own, long
       and half on the dark one, where a dimmed pale picture meets a dark ground and a short fade leaves a line */
    --app-hero-bg: linear-gradient(180deg, #f1f6ff 0%, #f6f9ff 58%, #ffffff 100%);
    --app-cover-rgb: 255 255 255;
    --app-cover-filter: none;
    --app-cover-mask-x: linear-gradient(#000, #000);
    --app-scene-top: 1.25rem;
    --app-scene-veil: 0;
    --app-scene-mask-x: linear-gradient(90deg, rgb(0 0 0 / 0) 0%, #000 14%);
    /* a sample window: a white card with a deep blue side, on a pale stage with a ring */
    --app-stage-bg: radial-gradient(ellipse at 60% 40%, #daebff 0%, #f2f7ff 55%, #f7fafe 100%);
    --app-stage-ring: rgb(37 105 210 / 0.14);
    --app-window: #ffffff;
    --app-window-edge: #e5ecf6;
    --app-window-shadow: 0 25px 60px rgb(23 59 120 / 0.16);
    --app-window-muted: #55627a;
    --app-window-rule: #eef2f8;
    --app-side: #102548;
    --app-side-ink: #b9c7e0;
    --app-side-on: #ffffff;
    --app-side-on-bg: #2465f2;
    --app-side-mark: #36a5ff;
    --app-avatar-bg: #deecff;
    --app-avatar-ink: #1a55cc;
    --app-metric-bg: #ffffff;
    --app-metric-edge: #e3e9f3;
    --app-chart-edge: #e3e9f3;
    --app-chart-line: #286ff0;
    --app-chart-area: rgb(43 124 255 / 0.16);
    --app-row-tag-ink: #0b7a57;
    --app-row-tag-bg: #e3f6ec;
    --app-corner-bg: #ffffff;
    --app-corner-edge: #e4edfa;
    --app-corner-ink: #1952b7;
    --app-corner-shadow: 0 8px 25px rgb(13 57 112 / 0.12);
    --app-corner-dot: #13bb87;
    /* the deep blue bands, and what is on them */
    --app-night: #071a41;
    --app-night-ring: rgb(125 165 255 / 0.3);
    --app-night-eyebrow: #8fbcff;
    --app-night-text: #b6c6e2;
    --app-night-icon: #7caeff;
    --app-night-rule: #345079;
    --app-light-ink: #0643be;
    --app-light-hover: #dbe8ff;
    /* the stages' board: a drawn product screen */
    --app-art-bg: linear-gradient(155deg, #ffffff, #eaf3ff);
    --app-art-edge: #e1e9f5;
    --app-art-ring: #c4dafb;
    --app-board: #ffffff;
    --app-board-edge: #dce7f5;
    --app-board-shadow: 0 18px 52px rgb(23 71 121 / 0.14);
    --app-board-side: #ecf3ff;
    --app-bar: #c9dbf5;
    --app-bar-on: #1262f1;
    --app-bar-head: #0b2a5c;
    --app-bar-line: #e6eefb;
    --app-widget: #edf5ff;
    --app-widget-edge: #dce8f7;
    --app-widget-bar: #8fbcff;
    --app-sticker: #0154e5;
    --app-sticker-ink: #ffffff;
    --app-sticker-shadow: 0 10px 30px rgb(28 99 229 / 0.28);
    /* the architecture's layers */
    --app-node-edge: #dbe5f2;
    --app-node-on-bg: #f7faff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --app-surface: #131314;
        --app-eyebrow: #a8c7fa;
        --app-crumb-chevron: #7f889c;
        --app-blue: #a8c7fa;
        --app-blue-hover: #c2d7fb;
        --app-on-blue: #062e6f;
        --app-blue-soft: rgb(168 199 250 / 0.14);
        --app-blue-soft-edge: rgb(168 199 250 / 0.3);
        --app-outline: rgb(255 255 255 / 0.2);
        --app-outline-ink: #a8c7fa;
        --app-outline-bg: rgb(255 255 255 / 0.04);
        --app-outline-hover: rgb(168 199 250 / 0.12);
        --app-line: rgb(255 255 255 / 0.08);
        --app-line-strong: rgb(255 255 255 / 0.14);
        --app-tick: #6dd5a8;
        --app-wash: #17181b;
        --app-faq-band: #161719;
        --app-hero-bg: linear-gradient(180deg, #121a2c 0%, #13171f 58%, #131314 100%);
        --app-cover-rgb: 19 19 20;
        --app-cover-filter: brightness(0.62) saturate(0.85);
        --app-cover-mask-x: linear-gradient(90deg, rgb(0 0 0 / 0) 8%, rgb(0 0 0 / 0.04) 13.75%, rgb(0 0 0 / 0.16) 19.5%, rgb(0 0 0 / 0.32) 25.25%, rgb(0 0 0 / 0.5) 31%, rgb(0 0 0 / 0.68) 36.75%, rgb(0 0 0 / 0.84) 42.5%, rgb(0 0 0 / 0.96) 48.25%, #000 54%);
        --app-scene-top: 3.5rem;
        --app-scene-veil: 0.5;
        --app-scene-mask-x: var(--app-cover-mask-x);
        --app-stage-bg: radial-gradient(ellipse at 60% 40%, #1f2a40 0%, #191d27 55%, #16181d 100%);
        --app-stage-ring: rgb(168 199 250 / 0.12);
        --app-window: #1c1f25;
        --app-window-edge: rgb(255 255 255 / 0.12);
        --app-window-shadow: 0 25px 60px rgb(0 0 0 / 0.5);
        --app-window-muted: #b3bac8;
        --app-window-rule: rgb(255 255 255 / 0.08);
        --app-side: #0e1a33;
        --app-side-ink: #b9c7e0;
        --app-side-on-bg: #2f6bf0;
        --app-avatar-bg: rgb(168 199 250 / 0.18);
        --app-avatar-ink: #a8c7fa;
        --app-metric-bg: #23272e;
        --app-metric-edge: rgb(255 255 255 / 0.1);
        --app-chart-edge: rgb(255 255 255 / 0.1);
        --app-chart-line: #7fa8f7;
        --app-chart-area: rgb(127 168 247 / 0.2);
        --app-row-tag-ink: #6dd5a8;
        --app-row-tag-bg: rgb(109 213 168 / 0.14);
        --app-corner-bg: #262a31;
        --app-corner-edge: rgb(255 255 255 / 0.12);
        --app-corner-ink: #a8c7fa;
        --app-corner-shadow: 0 8px 25px rgb(0 0 0 / 0.4);
        --app-art-bg: linear-gradient(155deg, #1d2128, #1a2233);
        --app-art-edge: rgb(255 255 255 / 0.1);
        --app-art-ring: rgb(168 199 250 / 0.2);
        --app-board: #20242b;
        --app-board-edge: rgb(255 255 255 / 0.12);
        --app-board-shadow: 0 18px 52px rgb(0 0 0 / 0.45);
        --app-board-side: #262c38;
        --app-bar: #3a4a68;
        --app-bar-on: #7fa8f7;
        --app-bar-head: #cfe0ff;
        --app-bar-line: #2f3a52;
        --app-widget: #1f2a40;
        --app-widget-edge: #34425e;
        --app-widget-bar: #5f86d6;
        --app-sticker: #a8c7fa;
        --app-sticker-ink: #062e6f;
        --app-sticker-shadow: 0 10px 30px rgb(0 0 0 / 0.4);
        --app-node-edge: rgb(255 255 255 / 0.14);
        --app-node-on-bg: rgb(168 199 250 / 0.08);
    }
}

:root[data-theme="dark"] {
    --app-surface: #131314;
    --app-eyebrow: #a8c7fa;
    --app-crumb-chevron: #7f889c;
    --app-blue: #a8c7fa;
    --app-blue-hover: #c2d7fb;
    --app-on-blue: #062e6f;
    --app-blue-soft: rgb(168 199 250 / 0.14);
    --app-blue-soft-edge: rgb(168 199 250 / 0.3);
    --app-outline: rgb(255 255 255 / 0.2);
    --app-outline-ink: #a8c7fa;
    --app-outline-bg: rgb(255 255 255 / 0.04);
    --app-outline-hover: rgb(168 199 250 / 0.12);
    --app-line: rgb(255 255 255 / 0.08);
    --app-line-strong: rgb(255 255 255 / 0.14);
    --app-tick: #6dd5a8;
    --app-wash: #17181b;
    --app-faq-band: #161719;
    --app-hero-bg: linear-gradient(180deg, #121a2c 0%, #13171f 58%, #131314 100%);
    --app-cover-rgb: 19 19 20;
    --app-cover-filter: brightness(0.62) saturate(0.85);
    --app-cover-mask-x: linear-gradient(90deg, rgb(0 0 0 / 0) 8%, rgb(0 0 0 / 0.04) 13.75%, rgb(0 0 0 / 0.16) 19.5%, rgb(0 0 0 / 0.32) 25.25%, rgb(0 0 0 / 0.5) 31%, rgb(0 0 0 / 0.68) 36.75%, rgb(0 0 0 / 0.84) 42.5%, rgb(0 0 0 / 0.96) 48.25%, #000 54%);
    --app-scene-top: 3.5rem;
    --app-scene-veil: 0.5;
    --app-scene-mask-x: var(--app-cover-mask-x);
    --app-stage-bg: radial-gradient(ellipse at 60% 40%, #1f2a40 0%, #191d27 55%, #16181d 100%);
    --app-stage-ring: rgb(168 199 250 / 0.12);
    --app-window: #1c1f25;
    --app-window-edge: rgb(255 255 255 / 0.12);
    --app-window-shadow: 0 25px 60px rgb(0 0 0 / 0.5);
    --app-window-muted: #b3bac8;
    --app-window-rule: rgb(255 255 255 / 0.08);
    --app-side: #0e1a33;
    --app-side-ink: #b9c7e0;
    --app-side-on-bg: #2f6bf0;
    --app-avatar-bg: rgb(168 199 250 / 0.18);
    --app-avatar-ink: #a8c7fa;
    --app-metric-bg: #23272e;
    --app-metric-edge: rgb(255 255 255 / 0.1);
    --app-chart-edge: rgb(255 255 255 / 0.1);
    --app-chart-line: #7fa8f7;
    --app-chart-area: rgb(127 168 247 / 0.2);
    --app-row-tag-ink: #6dd5a8;
    --app-row-tag-bg: rgb(109 213 168 / 0.14);
    --app-corner-bg: #262a31;
    --app-corner-edge: rgb(255 255 255 / 0.12);
    --app-corner-ink: #a8c7fa;
    --app-corner-shadow: 0 8px 25px rgb(0 0 0 / 0.4);
    --app-art-bg: linear-gradient(155deg, #1d2128, #1a2233);
    --app-art-edge: rgb(255 255 255 / 0.1);
    --app-art-ring: rgb(168 199 250 / 0.2);
    --app-board: #20242b;
    --app-board-edge: rgb(255 255 255 / 0.12);
    --app-board-shadow: 0 18px 52px rgb(0 0 0 / 0.45);
    --app-board-side: #262c38;
    --app-bar: #3a4a68;
    --app-bar-on: #7fa8f7;
    --app-bar-head: #cfe0ff;
    --app-bar-line: #2f3a52;
    --app-widget: #1f2a40;
    --app-widget-edge: #34425e;
    --app-widget-bar: #5f86d6;
    --app-sticker: #a8c7fa;
    --app-sticker-ink: #062e6f;
    --app-sticker-shadow: 0 10px 30px rgb(0 0 0 / 0.4);
    --app-node-edge: rgb(255 255 255 / 0.14);
    --app-node-on-bg: rgb(168 199 250 / 0.08);
}

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

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

/* H4 (card title): sans 500 */
.app-value__title,
.app-acc__name,
.app-faq__question,
.app-flow__name,
.app-window__heading {
    font-family: var(--font-sans);
    font-size: var(--fs-h4);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h4);
    letter-spacing: 0;
}

/* H3 (a figure of a sample window): sans 500 */
.app-metric__value {
    font-family: var(--font-sans);
    font-size: var(--fs-h3);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h3);
    letter-spacing: 0;
}

/* Body: sans 400 */
.app-lead,
.app-hero__lead,
.app-example__text,
.app-checks__item,
.app-values__intro,
.app-value__text,
.app-acc__text,
.app-stage__copy,
.app-faq__answer,
.app-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 */
.app-points,
.app-acc__hint,
.app-stage__output,
.app-flow__text,
.app-note,
.app-window__top,
.app-window__sub,
.app-window__item,
.app-metric > span,
.app-row {
    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 and labels, the stages' names) */
.app-window__brand,
.app-window__avatar,
.app-window__chart-title,
.app-row__name,
.app-ui__corner,
.app-art__sticker,
.app-stage-tab__label {
    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 */
.app-btn,
.app-crumbs__list,
.app-link,
.app-jump__link,
.app-tab {
    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 */
.app-eyebrow,
.app-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                                                            */
/* ------------------------------------------------------------------ */

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

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

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

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

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

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

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

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

/* 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 */
.app-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    color: var(--app-eyebrow);
    text-decoration: none;
    transition: gap var(--spring) var(--ease-spring);
}

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

.app-link:hover {
    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 */
.app-section {
    padding-top: var(--gap-max);
}

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

/* paragraphs that are rows of their own words are as wide as their rows, not as the base's 70ch */
.app-points,
.app-window__top,
.app-window__sub,
.app-ui__corner,
.app-art__sticker,
.app-stage__output,
.app-jump__label,
.app-note {
    max-width: none;
}

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

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

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

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

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

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

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

/* on the closing band: a white pill */
.app-btn--light {
    background: #ffffff;
    color: var(--app-light-ink);
}

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

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

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

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

/* The company's picture is the whole of the hero's background (2026-10-27, as the design draws it): a pale ground at the left,
   which the words lie on, and at the right the scene, two phones (a food-ordering app and an order being tracked) with their
   floating cards. The scene begins about half way across the picture (--app-scene, a share of its width: the first phone's left
   edge), and the words do not shrink with the window (--app-words, the widest of the title's lines and the rows under it), so
   the picture cannot be as wide as the hero wherever the hero is narrow, or the title would run into the scene.

   From 80rem it is as wide as the hero but never wider than --app-cover-max (as high as the words are: wider, the hero would
   crop the scene's tops) and never wider than leaves the scene's first element 2.5rem clear of the title's end: it moves to the
   right first, by up to --app-scene-shift of its width (what lies there is blank swoosh), and then shrinks. In a window wider
   than 120rem it stands in the middle, as the home page's frame does. Below 80rem it is a strip under the words, 72vw high to
   22rem, growing with the window once the whole picture is higher than that (100vw times --app-pic-ratio), so that a wide
   window does not crop the scene's feet. Its top fades over --app-scene-top, not further: the scene begins close under the
   picture's top edge, and a longer fade would ghost it. */
.app-hero {
    --app-scene: 0.519;
    --app-scene-shift: 0.05;
    --app-words: 34rem;
    --app-pic-ratio: 0.375;
    --app-cover-max: 66.75rem;
    --app-scene-edge: 0.055;
    --app-cover-strip: max(min(72vw, 22rem), calc(100vw * var(--app-pic-ratio)));
    position: relative;
    overflow: clip;
    isolation: isolate;
    background: var(--app-hero-bg);
}

.app-hero__inner {
    position: relative;
    padding-top: 0.75rem;
    padding-bottom: calc(var(--app-cover-strip) - 1rem);
}

/* in the strip the picture stands from its top, so that a narrow window crops the picture's left (blank) and not its top; its
   left fade, which the dark theme has (the pale left half goes into the dark ground), is laid on the picture, not on its box:
   the box shows all of the picture at 1024 and its right half at 390, so a fade of the box's left edge hid the first phone on a
   phone */
.app-hero__cover {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -2;
    width: 100%;
    height: var(--app-cover-strip);
    object-fit: cover;
    object-position: 100% 0;
    filter: var(--app-cover-filter);
    -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, #000 var(--app-scene-top)), var(--app-scene-mask-x);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, #000 var(--app-scene-top)), var(--app-scene-mask-x);
    mask-composite: intersect;
    -webkit-mask-size: 100% 100%, max(100%, calc(var(--app-cover-strip) / var(--app-pic-ratio))) 100%;
    mask-size: 100% 100%, max(100%, calc(var(--app-cover-strip) / var(--app-pic-ratio))) 100%;
    -webkit-mask-position: 0 0, 100% 0;
    mask-position: 0 0, 100% 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
}

/* the hero's foot goes into the page's colour, so that the strip under it begins on it without a seam */
.app-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(0deg, rgb(var(--app-cover-rgb)) 0, rgb(var(--app-cover-rgb) / 0) 3rem);
    pointer-events: none;
}

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

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

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

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

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

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

.app-hero__words {
    max-width: min(100%, var(--app-words));
    margin-top: 0.5rem;
}

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

/* each sentence of the title on a line of its own, the second in the accent colour */
.app-hero__line {
    display: block;
}

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

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

/* what it stands for: three short notes, ruled apart from 40rem */
.app-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--app-muted);
}

/* ------------------------------------------------------------------ */
/* The parts of the page                                               */
/* ------------------------------------------------------------------ */

.app-jump {
    border-block: 1px solid var(--app-line);
    background: var(--app-surface);
}

.app-jump__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--gap-max);
    padding-block: 0.5rem;
}

.app-jump__label {
    color: var(--app-muted);
}

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

/* a target as tall as a fingertip, with the icon of the part it leads to before its words, in the blue */
.app-jump__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    color: var(--app-muted);
    text-decoration: none;
    transition: color 200ms var(--ease-standard);
}

.app-jump__link .icon {
    color: var(--app-eyebrow);
}

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

/* ------------------------------------------------------------------ */
/* A section's head: a heading, and a line beside it                    */
/* ------------------------------------------------------------------ */

.app-head {
    display: grid;
    gap: 0.5rem var(--gap-max);
    align-items: end;
}

.app-head__words {
    min-width: 0;
}

.app-head .app-lead {
    margin: 0;
}

/* ------------------------------------------------------------------ */
/* One experience, every touchpoint                                    */
/* ------------------------------------------------------------------ */

/* the choice of an example: pills, wrapping where they do not fit; no line under it (2026-10-28: asked for) */
.app-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin-top: var(--gap-max);
}

.app-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    color: var(--app-muted);
    text-decoration: none;
    transition: background-color 200ms var(--ease-standard), color 200ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.app-tab:hover {
    color: var(--app-eyebrow);
}

.app-tab[aria-selected="true"] {
    background: var(--app-blue-soft);
    color: var(--app-outline-ink);
}

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

.app-tab__no {
    color: inherit;
}

/* an example has the room a row has over it and none under it, and no line under it (2026-10-28: asked for); where a page
   without a script shows all three, each is 20px from the one before */
.app-example {
    display: grid;
    gap: var(--gap-max);
    align-items: start;
    padding-top: var(--gap-max);
}

.app-example__story,
.app-ui {
    min-width: 0;
}

.app-example__title {
    margin: 0.5rem 0 0;
    color: var(--app-ink);
    text-wrap: balance;
}

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

/* three ticks, in the green */
.app-checks {
    display: grid;
    gap: 0.375rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--app-ink);
}

.app-checks__item {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.app-checks__item .icon {
    width: 1rem;
    height: 1rem;
    margin-top: 0.3125rem;
    flex: none;
    color: var(--app-tick);
}

.app-example__story > .app-link {
    margin-top: 0.5rem;
}

/* the sample window: a window on a pale stage; it is an illustration with sample data, and the chip over its corner says what it
   is a sample of (the caption that said so under it went on 2026-10-28: asked for) */
.app-ui__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.75rem 1.75rem;
    overflow: hidden;
    border-radius: 1.25rem;
    background: var(--app-stage-bg);
}

/* a ring at its top right, as the design draws it */
.app-ui__stage::before {
    content: "";
    position: absolute;
    top: -9rem;
    right: -8rem;
    width: 22rem;
    height: 22rem;
    border: 1px solid var(--app-stage-ring);
    border-radius: 50%;
    pointer-events: none;
}

/* the label that says what it is a sample of, a chip over the window's corner */
.app-ui__corner {
    position: absolute;
    right: 1rem;
    bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--app-corner-edge);
    border-radius: 0.75rem;
    background: var(--app-corner-bg);
    box-shadow: var(--app-corner-shadow);
    color: var(--app-corner-ink);
}

.app-ui__corner i {
    width: 0.5rem;
    height: 0.5rem;
    flex: none;
    border-radius: 50%;
    background: var(--app-corner-dot);
}

/* the window itself: a side of deep blue and a main part; what is in it follows its own width, not the page's */
.app-window {
    container: app-window / inline-size;
    display: flex;
    width: 100%;
    max-width: 36rem;
    overflow: hidden;
    border: 1px solid var(--app-window-edge);
    border-radius: 0.9375rem;
    background: var(--app-window);
    box-shadow: var(--app-window-shadow);
    color: var(--app-ink);
}

.app-window__side {
    flex: none;
    width: 7.5rem;
    padding: 1rem 0.5rem;
    background: var(--app-side);
    color: var(--app-side-ink);
}

.app-window__brand {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0 0 1rem;
    padding-inline: 0.375rem;
    color: var(--app-side-on);
}

/* the design's triangle, drawn */
.app-window__mark {
    width: 0.75rem;
    height: 0.75rem;
    flex: none;
    background: var(--app-side-mark);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

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

.app-window__item {
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
}

.app-window__item.is-on {
    background: var(--app-side-on-bg);
    color: var(--app-side-on);
}

.app-window__main {
    flex: 1;
    min-width: 0;
    padding: 0.75rem 1rem 1rem;
}

.app-window__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--app-window-rule);
    color: var(--app-window-muted);
}

.app-window__avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--app-avatar-bg);
    color: var(--app-avatar-ink);
}

.app-window__heading {
    margin: 0.75rem 0 0;
    color: var(--app-ink);
}

.app-window__sub {
    margin: 0;
    color: var(--app-window-muted);
}

.app-window__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.app-metric {
    display: grid;
    align-content: start;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--app-metric-edge);
    border-radius: 0.625rem;
    background: var(--app-metric-bg);
    color: var(--app-window-muted);
}

.app-metric__value {
    color: var(--app-ink);
    overflow-wrap: anywhere;
}

.app-window__chart {
    margin-top: 0.75rem;
    padding: 0.5rem 0.75rem 0.375rem;
    border: 1px solid var(--app-chart-edge);
    border-radius: 0.625rem;
}

.app-window__chart-title {
    margin: 0;
    color: var(--app-ink);
}

.app-window__svg {
    display: block;
    width: 100%;
    height: 3.75rem;
    margin-top: 0.25rem;
    overflow: visible;
}

.app-window__area {
    fill: var(--app-chart-area);
}

.app-window__line {
    fill: none;
    stroke: var(--app-chart-line);
    stroke-width: 3;
    vector-effect: non-scaling-stroke;
}

.app-window__rows {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

/* a row whose tag has no room beside its name puts it under the name, at 200% text on a small screen, where one line
   would push the window's edge out */
.app-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--app-window-rule);
    color: var(--app-window-muted);
}

.app-row__name {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--app-ink);
}

.app-row__tag {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 0 0.375rem;
    border-radius: 0.25rem;
    background: var(--app-row-tag-bg);
    color: var(--app-row-tag-ink);
    font-style: normal;
}

/* ------------------------------------------------------------------ */
/* What makes the difference: a deep blue band                          */
/* ------------------------------------------------------------------ */

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

/* a ring at its top right, as the design draws it */
.app-values::before {
    content: "";
    position: absolute;
    top: -22rem;
    right: -16rem;
    width: 56rem;
    height: 56rem;
    border: 1px solid var(--app-night-ring);
    border-radius: 50%;
    pointer-events: none;
}

.app-values > .container {
    position: relative;
}

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

.app-values__words {
    min-width: 0;
}

.app-values__intro {
    max-width: 24rem;
    margin: 0;
    color: var(--app-night-text);
    text-wrap: pretty;
}

.app-values__grid {
    display: grid;
    gap: var(--gap-max);
    margin-top: var(--gap-max);
}

.app-value {
    min-width: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--app-night-rule);
}

.app-value__icon {
    display: block;
    color: var(--app-night-icon);
}

.app-value__icon .icon {
    width: 2rem;
    height: 2rem;
}

.app-value__title {
    margin: 0.75rem 0 0;
    color: #ffffff;
}

.app-value__text {
    margin: 0.5rem 0 0;
    color: var(--app-night-text);
    text-wrap: pretty;
}

/* ------------------------------------------------------------------ */
/* What it builds: five things that open                                */
/* ------------------------------------------------------------------ */

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

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

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

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

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

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

/* where it is used: two or three words, at the right from 48rem */
.app-acc__hint {
    display: none;
    color: var(--app-muted);
}

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

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

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

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

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

.app-acc__detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    gap: 0.25rem var(--gap-max);
    max-width: 62rem;
    padding: 0 0.125rem 1rem 3rem;
}

/* a long word breaks rather than push the page sideways, at 200% text on a small screen */
.app-acc__text {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: var(--app-muted);
    text-wrap: pretty;
}

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

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

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

/* ------------------------------------------------------------------ */
/* Its way of working: five stages                                      */
/* ------------------------------------------------------------------ */

.app-process {
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    background: var(--app-wash);
}

/* the choice of a stage: each with its number and its name, over a rule, the chosen one's in the blue */
.app-stages {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    column-gap: 0.75rem;
    margin-top: var(--gap-max);
    border-top: 1px solid var(--app-line-strong);
}

.app-stage-tab {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: -2px;
    padding: 0.75rem 0.5rem 0.75rem 0;
    border-top: 3px solid transparent;
    color: var(--app-muted);
    text-decoration: none;
    transition: color 200ms var(--ease-standard), border-color 200ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.app-stage-tab__no,
.app-stage-tab__label {
    overflow-wrap: anywhere;
}

.app-stage-tab:hover {
    color: var(--app-eyebrow);
}

.app-stage-tab[aria-selected="true"] {
    border-top-color: var(--app-blue);
    color: var(--app-eyebrow);
}

.app-stage-tab:active {
    scale: var(--press-scale);
    transition-duration: 200ms, 200ms, var(--press-in);
}

.app-stage {
    display: grid;
    gap: var(--gap-max);
    align-items: center;
    padding-top: var(--gap-max);
}

.app-stage__story,
.app-art {
    min-width: 0;
}

.app-stage__title {
    margin: 0.5rem 0 0;
    color: var(--app-ink);
    text-wrap: balance;
}

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

/* what the client has at its end of the stage, with its arrow */
.app-stage__output {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 1rem 0 0;
    color: var(--app-outline-ink);
}

.app-stage__output .icon {
    width: 1rem;
    height: 1rem;
    margin-top: 0.25rem;
    flex: none;
}

/* the drawn board: a product screen on a pale stage, with the note of where the stage stands */
.app-art {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 16rem;
    padding: 1.25rem 1rem 3.25rem;
    overflow: hidden;
    border: 1px solid var(--app-art-edge);
    border-radius: 1.375rem;
    background: var(--app-art-bg);
}

.app-art::after {
    content: "";
    position: absolute;
    top: -16rem;
    right: -9rem;
    width: 26rem;
    height: 26rem;
    border: 1px solid var(--app-art-ring);
    border-radius: 50%;
    pointer-events: none;
}

.app-art__board {
    position: relative;
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    width: min(30rem, 100%);
    min-height: 12rem;
    overflow: hidden;
    border: 1px solid var(--app-board-edge);
    border-radius: 0.8125rem;
    background: var(--app-board);
    box-shadow: var(--app-board-shadow);
}

.app-art__side {
    padding: 1rem 0.625rem;
    border-right: 1px solid var(--app-board-edge);
    background: var(--app-board-side);
}

.app-art__side span {
    display: block;
    height: 0.5625rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: var(--app-bar);
}

.app-art__side span:first-child {
    width: 75%;
    background: var(--app-bar-on);
}

.app-art__body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
    padding: 1.25rem;
}

.app-art__title {
    display: block;
    width: 54%;
    height: 1rem;
    border-radius: 0.25rem;
    background: var(--app-bar-head);
}

.app-art__line {
    display: block;
    width: 88%;
    height: 0.5625rem;
    border-radius: 0.25rem;
    background: var(--app-bar-line);
}

.app-art__line--short {
    width: 64%;
}

.app-art__widgets {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
    margin-top: 0.5rem;
}

.app-art__widgets span {
    position: relative;
    min-height: 3.5rem;
    border: 1px solid var(--app-widget-edge);
    border-radius: 0.5rem;
    background: var(--app-widget);
}

.app-art__widgets span::before {
    content: "";
    position: absolute;
    top: 1rem;
    left: 0.75rem;
    width: 50%;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--app-widget-bar);
}

.app-art__sticker {
    position: absolute;
    right: 1rem;
    bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: calc(100% - 2rem);
    margin: 0;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    background: var(--app-sticker);
    color: var(--app-sticker-ink);
    box-shadow: var(--app-sticker-shadow);
}

.app-art__sticker .icon {
    width: 0.875rem;
    height: 0.875rem;
    flex: none;
}

/* ------------------------------------------------------------------ */
/* The architecture                                                    */
/* ------------------------------------------------------------------ */

.app-arch__intro {
    max-width: 46rem;
}

.app-arch__intro .app-lead {
    max-width: none;
}

.app-flow {
    display: grid;
    margin-top: var(--gap-max);
}

.app-flow__node {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
    padding: 1.25rem;
    border-top: 2px solid var(--app-node-edge);
}

.app-flow__node.is-highlighted {
    border-top-color: var(--app-blue);
    background: var(--app-node-on-bg);
}

.app-flow__icon {
    display: block;
    color: var(--app-eyebrow);
}

.app-flow__icon .icon {
    width: 1.75rem;
    height: 1.75rem;
}

.app-flow__name,
.app-flow__text {
    margin: 0;
}

.app-flow__name {
    color: var(--app-ink);
}

.app-flow__text {
    color: var(--app-muted);
}

/* the arrow between two layers: 20px wide, in the gap, pointing down where the layers stand one under another */
.app-flow__link {
    display: grid;
    place-items: center;
    height: var(--gap-max);
    color: var(--app-blue);
}

.app-flow__link .icon {
    rotate: 90deg;
}

.app-note {
    margin: var(--gap-max) 0 0;
    color: var(--app-muted);
}

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

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

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

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

.app-faq__head > .app-link {
    margin-top: 0.5rem;
}

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

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

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

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

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

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

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

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

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

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

/* ------------------------------------------------------------------ */
/* The closing call: a deep blue band                                   */
/* ------------------------------------------------------------------ */

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

/* a ring at its right, from 72rem: on a narrower band its words reach across it */
.app-closing::before {
    content: "";
    display: none;
    position: absolute;
    z-index: -1;
    top: -18rem;
    right: -12rem;
    width: 46rem;
    height: 46rem;
    border: 1px solid var(--app-night-ring);
    border-radius: 50%;
    pointer-events: none;
}

.app-closing__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-max);
}

.app-closing__words {
    min-width: 0;
}

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

.app-closing__text {
    max-width: 36rem;
    margin: 0.75rem 0 0;
    color: var(--app-night-text);
    text-wrap: pretty;
}

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

/* the panel a script has not chosen is `hidden`, and these panels are grids: their display must give way to the attribute */
.app-example[hidden],
.app-stage[hidden] {
    display: none;
}

/* a page without a script has every example and every stage one after another; where a script will make the choice, only the
   first of each, 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) .app-example ~ .app-example,
    [data-tabs]:not(.is-ready) .app-stage ~ .app-stage {
        display: none;
    }
}

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

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

    .app-points {
        gap: 0.25rem 0;
    }

    .app-points__item + .app-points__item {
        margin-left: 1rem;
        padding-left: 1rem;
        border-left: 1px solid var(--app-line-strong);
    }

    .app-ui__stage {
        padding: 1.25rem 1.25rem 1.75rem;
    }

    .app-window__main {
        padding: 0.875rem 1.25rem 1.25rem;
    }
}

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

@media (min-width: 48rem) {
    .app-values__head {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr);
    }

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

    /* a rule at the left of each but the first, in place of the one over each */
    .app-value {
        padding: 0 0 0 var(--gap-max);
        border-top: 0;
        border-left: 1px solid var(--app-night-rule);
    }

    .app-value:first-child {
        padding-left: 0;
        border-left: 0;
    }

    .app-acc__summary {
        grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 12rem) 2.25rem;
        column-gap: 1.25rem;
    }

    .app-acc__hint {
        display: block;
    }

    .app-acc__detail {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        padding-left: 4.75rem;
    }

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

    .app-note {
        max-width: 46rem;
        margin-inline: auto;
        text-align: center;
    }

    .app-closing__inner {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

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

@media (min-width: 64rem) {
    .app-example {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    }

    .app-stage {
        grid-template-columns: minmax(0, 0.76fr) minmax(0, 1.24fr);
    }

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

    /* the layers in a row, with an arrow in the gap between each two */
    .app-flow {
        grid-template-columns: minmax(0, 1fr) var(--gap-max) minmax(0, 1fr) var(--gap-max) minmax(0, 1fr);
        align-items: stretch;
    }

    .app-flow__link {
        align-self: center;
        height: auto;
    }

    .app-flow__link .icon {
        rotate: 0deg;
    }

    .app-faq__inner {
        grid-template-columns: minmax(0, 0.73fr) minmax(0, 1.27fr);
    }

    /* a heading with its line beside it: under 64rem the line follows the heading, which then has the column to itself */
    .app-head {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    }
}

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

@media (min-width: 72rem) {
    .app-closing::before {
        display: block;
    }
}

/* ------------------------------------------------------------------ */
/* From 80rem: the picture is beside the words                          */
/* ------------------------------------------------------------------ */

@media (min-width: 80rem) {
    .app-hero {
        /* the column's left edge, the title's end (--app-words on, and 2.5rem of room before the scene) and the picture's width */
        --app-left: calc((100vw - min(100vw, var(--container) + 2 * var(--gutter))) / 2 + var(--gutter));
        --app-clear: calc(var(--app-left) + var(--app-words) + 2.5rem);
        --app-cover-w: min(100vw, var(--app-cover-max), (100vw - var(--app-clear)) / (1 - var(--app-scene) - var(--app-scene-shift)));
        /* how far right it has moved: what the scene's first element (the rest of the picture, (1 - --app-scene) of its width,
           from its right edge) needs, no more than --app-scene-shift of its width */
        --app-cover-shift: clamp(0px, calc(var(--app-clear) - 100vw + (1 - var(--app-scene)) * var(--app-cover-w)), calc(var(--app-scene-shift) * var(--app-cover-w)));
        /* a veil of the page's colour over the picture's left, as far as the title's end and then gone 4rem into the scene: in
           the dark theme, where the picture is a pale one dimmed, the title lay on its blank left at 3.0:1; none in the pale
           theme, whose ground is the hero's own. It is long and soft: a short one left a vertical seam where the unveiled
           picture began. */
        --app-cover-veil-x: linear-gradient(90deg, rgb(var(--app-cover-rgb) / var(--app-scene-veil)) 0,
            rgb(var(--app-cover-rgb) / var(--app-scene-veil)) calc(var(--app-clear) - 2.5rem),
            rgb(var(--app-cover-rgb) / 0) calc(var(--app-clear) + 4rem));
    }

    .app-hero__inner {
        padding-bottom: var(--gap-max);
    }

    .app-hero__cover {
        right: calc(max(0px, (100vw - 120rem) / 2) - var(--app-cover-shift));
        width: var(--app-cover-w);
        height: auto;
        -webkit-mask-size: auto;
        mask-size: auto;
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
    }

    .app-hero::before {
        background:
            linear-gradient(0deg, rgb(var(--app-cover-rgb)) 0, rgb(var(--app-cover-rgb) / 0) 5rem),
            var(--app-cover-veil-x);
    }
}

/* in a window wider than 120rem the picture stands in the middle, in a frame 1920 wide, and does not reach the window's edge:
   its right edge, a blue swoosh, would end in a line against the hero's pale ground, so it is feathered over the picture's own
   margin (--app-scene-edge of its width), which its last marks do not reach */
@media (min-width: 120rem) {
    .app-hero__cover {
        -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, #000 var(--app-scene-top)), var(--app-scene-mask-x),
            linear-gradient(270deg, rgb(0 0 0 / 0) 0%, #000 calc(var(--app-scene-edge) * 100%));
        mask-image: linear-gradient(to bottom, rgb(0 0 0 / 0) 0%, #000 var(--app-scene-top)), var(--app-scene-mask-x),
            linear-gradient(270deg, rgb(0 0 0 / 0) 0%, #000 calc(var(--app-scene-edge) * 100%));
    }
}

/* what a sample window holds depends on the window's own width: its side drops away where it is under 28rem wide, its three
   figures are two and one where it is under 24rem (a phone: a figure's label, "Satisfaction", does not fit in a third) and
   stand one under another where it is under 18.5rem (the text at 150% on a phone); the sizes are in rem, so that they follow
   the text */
@container app-window (max-width: 28rem) {
    .app-window__side {
        display: none;
    }
}

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

    .app-metric:last-child {
        grid-column: 1 / -1;
    }
}

@container app-window (max-width: 18.5rem) {
    .app-window__metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .app-metric:last-child {
        grid-column: auto;
    }
}

.app-metric > span {
    overflow-wrap: anywhere;
}

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

@media (prefers-contrast: more) {
    .app-window,
    .app-art,
    .app-art__board,
    .app-metric,
    .app-window__chart,
    .app-acc__plus,
    .app-btn--outlined,
    .app-ui__corner {
        border-color: var(--app-ink);
    }

    /* the picture and its veil are gone, and the strip that held it: the words lie on the hero's own colour */
    .app-hero__cover,
    .app-hero::before {
        display: none;
    }

    .app-hero {
        --app-cover-strip: 0px;
        background: var(--app-surface);
    }

    .app-hero__inner {
        padding-bottom: var(--gap-max);
    }
}

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

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

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

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

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

    .app-example:not([hidden]) .app-example__story,
    .app-example:not([hidden]) .app-ui,
    .app-stage:not([hidden]) .app-stage__story,
    .app-stage:not([hidden]) .app-art {
        animation: app-swap var(--spring) var(--ease-spring) both;
    }
}

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

@media print {
    .app-hero,
    .app-jump,
    .app-ui__stage,
    .app-art,
    .app-process,
    .app-faq {
        background: none;
    }

    .app-values,
    .app-closing {
        background: none;
        color: inherit;
    }

    .app-hero__cover,
    .app-hero::before,
    .app-values::before,
    .app-closing::before {
        display: none;
    }

    .app-hero__inner {
        padding-bottom: var(--gap-max);
    }
}