/* The home page (index.html), after its editorial design (2026-10-31: asked for, "the homepage redesign but use our standard design
   tokens, though follow this new design", with Kweepa_Editorial_Applications_Standalone (1).html). Until then the page was a hero over a
   card for each service, the steps of a project and a call on a blue band, drawn in design pixels from 80rem, and site.css drew it; this
   stylesheet is the new design's, and the old page's rules are gone from site.css (the cards of the overviews, which share them, stay).

   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 title in 80px Arial, its sample in 9 to 12px and its accents in an italic serif,
   which typography.md does not have: an accent is the blue and the weight of the line it is in). Mobile first: one column, the film
   under the hero's words and beside them from 64rem (where it reaches the window's right edge), a heading beside what it heads from
   48rem. Where the page asks for a script (the film, the choice of a solution, the stages of the sample) every answer is in the markup,
   and what chooses is a link to what it means, or a control `hidden`, until site.js makes it work; the steps of how a project is run and
   the rest 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. Everything is scoped to .hm; its
   colours are the --hm-* tokens, set again for the dark theme, and its text takes typography.md's two text colours through them. The
   page is drawn in the site's blue and navy, as the other pages are (the design's #0758ee and its darker navies are the site's #0154e5
   and #0f2851 here): the two deep bands are navy on both themes. */

:root {
    --hm-surface: #ffffff;
    --hm-ink: var(--text-primary);
    --hm-muted: var(--text-secondary);
    --hm-eyebrow: #0a4ce9;
    --hm-blue: #0154e5;
    --hm-blue-hover: #0043bd;
    --hm-on-blue: #ffffff;
    --hm-soft: #e8f1ff;
    --hm-outline: #7b8797;
    --hm-line: #e3e9f0;
    --hm-line-strong: #cfd9e6;
    --hm-slash: #8794a6;
    --hm-wash: #f4f8fd;
    --hm-hero-bg: linear-gradient(105deg, #fcfdff 0%, #f6f9ff 55%, #eef4fe 100%);
    --hm-film-bg: radial-gradient(circle at 50% 45%, #f8fbff, #dfeaf7 70%, #d2e3f8);
    --hm-film-frame: #f5f9ff;
    --hm-film-edge: #d5e4f5;
    --hm-film-shadow: 0 24px 56px rgb(24 59 105 / 0.2), 0 4px 12px rgb(24 59 105 / 0.08);
    --hm-clip-track: rgb(15 40 81 / 0.2);
    --hm-chip-bg: rgb(255 255 255 / 0.94);
    --hm-chip-ink: #123868;
    --hm-chip-edge: #d1e1f7;
    --hm-chip-hover: #ffffff;
    --hm-art-filter: none;
    --hm-photo-bg: #e4eaf1;
    --hm-photo-label-bg: #ffffff;
    --hm-photo-label-ink: #3f4d62;
    --hm-tab-ink: var(--text-secondary);
    --hm-tab-line: #c7d0da;
    --hm-tour-bg: #eef3fa;
    --hm-rail-bg: #f8fafe;
    --hm-rail-line: #d8e2ed;
    --hm-rail-on-bg: #e7effb;
    --hm-card: #ffffff;
    --hm-card-edge: #dce5ee;
    --hm-card-shadow: 0 12px 28px rgb(26 58 97 / 0.1);
    --hm-window-ink: #0f315c;
    --hm-head-bg: #f3f6fa;
    --hm-row-line: #edf0f4;
    --hm-status: #0b7a57;
    --hm-status-bg: #e4f6ee;
    --hm-badge-bg: #e8f1ff;
    --hm-badge-ink: #0a3fb8;
    --hm-night: #0f2851;
    --hm-night-text: #d4dfef;
    --hm-night-line: #496183;
    --hm-night-eyebrow: #9cbbf7;
    --hm-night-accent: #9cbbf7;
    --hm-night-foot: #9cbbf7;
    --hm-night-ring: #ffffff;
    --hm-light-bg: #ffffff;
    --hm-light-ink: #0f2851;
    --hm-light-hover: #e8f1ff;
    --hm-closing-k: rgb(255 255 255 / 0.05);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --hm-surface: #131314;
        --hm-eyebrow: #a8c7fa;
        --hm-blue: #a8c7fa;
        --hm-blue-hover: #c2d7fb;
        --hm-on-blue: #062e6f;
        --hm-soft: rgb(168 199 250 / 0.14);
        --hm-outline: rgb(255 255 255 / 0.55);
        --hm-line: rgb(255 255 255 / 0.1);
        --hm-line-strong: rgb(255 255 255 / 0.18);
        --hm-slash: #7f889c;
        --hm-wash: #17181b;
        --hm-hero-bg: linear-gradient(105deg, #14161a 0%, #131314 55%, #121722 100%);
        --hm-film-bg: radial-gradient(circle at 50% 45%, #1c2535, #151c2a 70%, #111723);
        --hm-film-frame: #1a2230;
        --hm-film-edge: rgb(255 255 255 / 0.14);
        --hm-film-shadow: 0 24px 56px rgb(0 0 0 / 0.55);
    --hm-clip-track: rgb(255 255 255 / 0.26);
        --hm-chip-bg: rgb(28 31 37 / 0.94);
        --hm-chip-ink: #d3e3fd;
        --hm-chip-edge: rgb(255 255 255 / 0.16);
        --hm-chip-hover: #262b33;
        --hm-art-filter: brightness(0.9) saturate(1.05);
        --hm-photo-bg: #1e2227;
        --hm-photo-label-bg: #1c1f25;
        --hm-photo-label-ink: #c4c7c5;
        --hm-tab-line: rgb(255 255 255 / 0.2);
        --hm-tour-bg: #161719;
        --hm-rail-bg: #1a1d22;
        --hm-rail-line: rgb(255 255 255 / 0.12);
        --hm-rail-on-bg: rgb(168 199 250 / 0.12);
        --hm-card: #1c1f25;
        --hm-card-edge: rgb(255 255 255 / 0.12);
        --hm-card-shadow: 0 12px 28px rgb(0 0 0 / 0.5);
        --hm-window-ink: #d3e3fd;
        --hm-head-bg: #23272e;
        --hm-row-line: rgb(255 255 255 / 0.08);
        --hm-status: #7fe0b2;
        --hm-status-bg: rgb(109 213 168 / 0.14);
        --hm-badge-bg: rgb(168 199 250 / 0.14);
        --hm-badge-ink: #a8c7fa;
        --hm-night: #08182f;
        --hm-light-hover: #d3e3fd;
        --hm-closing-k: rgb(255 255 255 / 0.04);
    }
}

:root[data-theme="dark"] {
    --hm-surface: #131314;
    --hm-eyebrow: #a8c7fa;
    --hm-blue: #a8c7fa;
    --hm-blue-hover: #c2d7fb;
    --hm-on-blue: #062e6f;
    --hm-soft: rgb(168 199 250 / 0.14);
    --hm-outline: rgb(255 255 255 / 0.55);
    --hm-line: rgb(255 255 255 / 0.1);
    --hm-line-strong: rgb(255 255 255 / 0.18);
    --hm-slash: #7f889c;
    --hm-wash: #17181b;
    --hm-hero-bg: linear-gradient(105deg, #14161a 0%, #131314 55%, #121722 100%);
    --hm-film-bg: radial-gradient(circle at 50% 45%, #1c2535, #151c2a 70%, #111723);
    --hm-film-frame: #1a2230;
    --hm-film-edge: rgb(255 255 255 / 0.14);
    --hm-film-shadow: 0 24px 56px rgb(0 0 0 / 0.55);
    --hm-clip-track: rgb(255 255 255 / 0.26);
    --hm-chip-bg: rgb(28 31 37 / 0.94);
    --hm-chip-ink: #d3e3fd;
    --hm-chip-edge: rgb(255 255 255 / 0.16);
    --hm-chip-hover: #262b33;
    --hm-art-filter: brightness(0.9) saturate(1.05);
    --hm-photo-bg: #1e2227;
    --hm-photo-label-bg: #1c1f25;
    --hm-photo-label-ink: #c4c7c5;
    --hm-tab-line: rgb(255 255 255 / 0.2);
    --hm-tour-bg: #161719;
    --hm-rail-bg: #1a1d22;
    --hm-rail-line: rgb(255 255 255 / 0.12);
    --hm-rail-on-bg: rgb(168 199 250 / 0.12);
    --hm-card: #1c1f25;
    --hm-card-edge: rgb(255 255 255 / 0.12);
    --hm-card-shadow: 0 12px 28px rgb(0 0 0 / 0.5);
    --hm-window-ink: #d3e3fd;
    --hm-head-bg: #23272e;
    --hm-row-line: rgb(255 255 255 / 0.08);
    --hm-status: #7fe0b2;
    --hm-status-bg: rgb(109 213 168 / 0.14);
    --hm-badge-bg: rgb(168 199 250 / 0.14);
    --hm-badge-ink: #a8c7fa;
    --hm-night: #08182f;
    --hm-light-hover: #d3e3fd;
    --hm-closing-k: rgb(255 255 255 / 0.04);
}

/* ------------------------------------------------------------------ */
/* 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 th, a td and a strong are what site.css's base makes them. The design
   sets its type in Arial and Courier New at 9 to 19px with a title of 80px and its accents in an italic serif; none of that is taken. */

/* H4 (card title): sans 500 */
.hm-window__title,
.hm-list__title,
.hm-process__name {
    font-family: var(--font-sans);
    font-size: var(--fs-h4);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h4);
    letter-spacing: 0;
}

/* Body: sans 400 */
.hm-hero__lead,
.hm-lead,
.hm-idea__aside p,
.hm-solution__text,
.hm-points li,
.hm-thinking__words p,
.hm-approach__text,
.hm-process__answer p,
.hm-principles__text,
.hm-list__text,
.hm-closing__text,
.hm-closing__email {
    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 */
.hm-hero__note,
.hm-film__now,
.hm-window__subtitle,
.hm-window__note,
.hm-stage__caption {
    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 names of the fields, the names of the film's clips, the words over its picture, the window's name, the tags) */
.hm-clip__name,
.hm-film__now-name,
.hm-focus__list,
.hm-solution__label,
.hm-window__brand,
.hm-status,
.hm-badge {
    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 */
.hm-btn,
.hm-link,
.hm-film__button,
.hm-tab,
.hm-step {
    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 */
.hm-eyebrow,
.hm-tag,
.hm-rail__label,
.hm-thinking__foot {
    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 */
.hm {
    background: var(--hm-surface);
    color: var(--hm-ink);
    overflow-wrap: anywhere;
}

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

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

/* this page's icons are lines (site.css's .icon fills with currentColor); the solid triangle of the play button is the one that is not */
.hm .hm-icon {
    fill: none;
}

/* what a script makes work is `hidden` until it has, whatever display a rule gave it */
.hm [hidden] {
    display: none;
}

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

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

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

/* a section's heading (an h2, the H2 role), its sentences each a line of its own */
.hm-title {
    margin: 0.5rem 0 0;
    color: var(--hm-ink);
    text-wrap: balance;
}

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

.hm-line {
    display: block;
}

/* the accent is the blue and the weight of the line it is in: typography.md has no italic and no serif, which the design sets its
   accents in */
.hm-accent {
    color: var(--hm-eyebrow);
}

.hm-title--night .hm-accent {
    color: var(--hm-night-accent);
}

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

/* a link of its own, in the blue, with its arrow, underlined as the design has it */
.hm-link {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    color: var(--hm-eyebrow);
    text-decoration: underline;
    text-decoration-color: var(--hm-line-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
    transition: gap var(--spring) var(--ease-spring);
}

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

.hm-link:hover {
    color: var(--hm-eyebrow);
    text-decoration-color: currentColor;
}

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

/* a heading beside what goes with it, or over it */
.hm-head {
    display: grid;
    gap: 0.75rem var(--gap-max);
    align-items: end;
    margin-bottom: 1.25rem;
}

.hm-head > div {
    min-width: 0;
}

/* paragraphs that are rows of their own words are as wide as their rows, not as the base's 70ch */
.hm-hero__note,
.hm-film__now,
.hm-solution__label,
.hm-window__subtitle,
.hm-window__note,
.hm-stage__caption,
.hm-closing__email {
    max-width: none;
}

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

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

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

.hm-btn--filled {
    background: var(--hm-blue);
    color: var(--hm-on-blue);
    box-shadow: 0 10px 22px rgb(1 84 229 / 0.2);
}

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

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

.hm-btn--outlined:hover {
    background: var(--hm-soft);
    color: var(--hm-ink);
}

/* on the deep band: a white pill */
.hm-btn--light {
    background: var(--hm-light-bg);
    color: var(--hm-light-ink);
}

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

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

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

    .hm-btn:hover .hm-icon--arrow-down {
        translate: 0 2px;
    }

    .hm-link:hover {
        gap: 0.875rem;
    }
}

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

.hm-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--hm-line);
    background: var(--hm-hero-bg);
}

/* the words and the film are one under the other until 64rem; the film's ground reaches the window's edges */
.hm-hero__grid {
    display: grid;
    padding-block: 0;
}

.hm-hero__words {
    min-width: 0;
    padding-block: 1.75rem var(--gap-max);
}

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

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

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

.hm-hero__note {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    margin: 1.25rem 0 0;
    color: var(--hm-muted);
}

.hm-rule {
    flex: none;
    width: 2.625rem;
    height: 1px;
    background: var(--hm-blue);
}

/* The film: the controls over it at the right, the film in its frame, the list of its clips under it and, where that list has no room
   for names, the line that says what the clip on show is. On a phone it is the width of the window; from 64rem it reaches the window's
   right edge. It is a container, so that the list follows the film's own width. What a script makes work is not shown until it has
   run (`.is-ready`), and keeps its room, so that nothing moves when it is. */
.hm-film {
    position: relative;
    display: grid;
    align-content: center;
    gap: 0.75rem;
    min-width: 0;
    margin: 0 calc(-1 * var(--gutter));
    padding: 0.75rem var(--gutter) 1rem;
    background: var(--hm-film-bg);
    container: hm-film / inline-size;
}

.hm-film:not(.is-ready) :is(.hm-film__actions, .hm-film__clips, .hm-film__now) {
    visibility: hidden;
}

.hm-film__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.hm-film__button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--hm-chip-edge);
    border-radius: 999px;
    background: var(--hm-chip-bg);
    color: var(--hm-chip-ink);
    box-shadow: 0 3px 12px rgb(9 40 91 / 0.1);
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.hm-film__button:hover {
    background: var(--hm-chip-hover);
}

.hm-film__button .icon {
    flex: none;
    width: 1rem;
    height: 1rem;
}

/* the button shows what it will do: a pause while the film plays, a play while it is stopped */
.hm-film__button .hm-icon--play,
.hm-film[data-state="paused"] .hm-film__button .hm-icon--pause {
    display: none;
}

.hm-film[data-state="paused"] .hm-film__button .hm-icon--play {
    display: inline;
}

/* the same for the button of the whole screen: the expand mark, and the collapse mark while the film is on the whole screen (on a phone
   the words are not shown, and the mark is all that says it) */
.hm-film__button .hm-icon--collapse,
.hm-film:fullscreen .hm-film__button .hm-icon--expand {
    display: none;
}

.hm-film:fullscreen .hm-film__button .hm-icon--collapse {
    display: inline;
}

/* the frame is the shape of the film (16 to 9, or 3 to 4 for a phone's), so that nothing is cropped and nothing moves when the film
   takes the place of its first frame */
.hm-film__stage {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--hm-film-edge);
    border-radius: 10px;
    background: var(--hm-film-frame);
    box-shadow: var(--hm-film-shadow);
    filter: var(--hm-art-filter);
}

.hm-film__poster,
.hm-film__poster img,
.hm-film__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hm-film__poster img,
.hm-film__video {
    object-fit: cover;
}

/* two videos lie one over the other, the first frame of the first clip under both: the clip on show is the front one (it fades in over
   what was on show), and the clip that was on show stays whole under it until the front one is opaque, so that nothing dips between
   the two */
.hm-film__video {
    z-index: 1;
    background: var(--hm-film-frame);
    opacity: 0;
    transition: opacity 400ms var(--ease-standard);
}

.hm-film__video.is-leaving {
    z-index: 2;
    opacity: 1;
}

.hm-film__video.is-front {
    z-index: 3;
    opacity: 1;
}

/* The list of the clips: one cell for each, a bar that fills as its clip plays (`--hm-progress`, set by the script) and its name. A
   cell is 44px high to press, the bar 4px of it. Where the film has no room for the names (under 37rem of its own width: the longest,
   "Restaurants", is 75px, and a seventh of the list less its gaps must hold it) they are
   said to a screen reader and not shown, and the line under the list says which clip is on. */
.hm-film__clips {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-film__clips > li {
    min-width: 0;
}

.hm-clip {
    /* how much of its clip has played, 0 to 1: the script sets it on the clip that is on */
    --hm-progress: 0;
    position: relative;
    display: grid;
    align-content: center;
    gap: 0.375rem;
    width: 100%;
    min-height: 2.75rem;
    padding: 0.25rem 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--hm-muted);
    text-align: left;
    cursor: pointer;
    transition: color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.hm-clip:hover,
.hm-clip[aria-current] {
    color: var(--hm-ink);
}

.hm-clip__bar {
    display: block;
    height: 4px;
    overflow: hidden;
    border-radius: 2px;
    background: var(--hm-clip-track);
    transition: transform 250ms var(--ease-standard);
}

/* the clip on show has a thicker bar as well as a darker name: a difference that does not rest on colour alone */
.hm-clip[aria-current] .hm-clip__bar {
    transform: scaleY(1.5);
}

.hm-clip__fill {
    display: block;
    height: 100%;
    background: var(--hm-blue);
    transform: scaleX(var(--hm-progress));
    transform-origin: left center;
    transition: transform 250ms linear;
}

.hm-clip:not([aria-current]) .hm-clip__fill {
    transform: scaleX(0);
    transition: none;
}

/* the name a screen reader hears is the visually hidden one beside it; this one is the same word, shown only where the film has the room */
.hm-clip__name {
    display: none;
    white-space: nowrap;
}

/* what the clip on show is, in a line: the name and what it shows, two lines of room so that the page below does not move when the
   clip changes. It follows the list closely: a cell of the list is 44px high and its bar sits in the middle of it, so that the cell
   already leaves 20px between the bar and the words. Its type is the small role, 14px, the least typography.md allows a sentence:
   making it smaller would not make it one line (the longest is 93 characters), so a phone's height is saved elsewhere (below). */
.hm-film__now {
    min-height: calc(2 * var(--fs-small) * var(--lh-small));
    margin: -0.5rem 0 0;
    color: var(--hm-muted);
}

.hm-film__now-name {
    color: var(--hm-ink);
}

.hm-film__now-name::after {
    content: ":";
}

@container hm-film (min-width: 37rem) {
    .hm-clip__name {
        display: block;
    }

    .hm-film__now {
        display: none;
    }
}

/* on the whole screen the film stays what it is, a stage with its controls and its list, on a dark ground, as large as the screen
   leaves room for */
.hm-film:fullscreen {
    --hm-ink: #f2f4f8;
    --hm-muted: #c4c7c5;
    --hm-blue: #a8c7fa;
    --hm-clip-track: rgb(255 255 255 / 0.26);
    justify-items: center;
    padding: 1rem;
    background: #0b1424;
}

.hm-film:fullscreen > * {
    width: 100%;
}

.hm-film:fullscreen .hm-film__stage {
    width: min(100%, calc((100dvh - 10rem) * 16 / 9));
}

.hm-film:fullscreen .hm-film__video,
.hm-film:fullscreen .hm-film__poster img {
    object-fit: contain;
}

/* ------------------------------------------------------------------ */
/* Where we focus                                                      */
/* ------------------------------------------------------------------ */

.hm-focus {
    border-bottom: 1px solid var(--hm-line);
}

.hm-focus__inner {
    display: grid;
    gap: 0.5rem var(--gap-max);
    align-items: center;
    padding-block: 1rem;
}

.hm-focus__label {
    color: var(--hm-muted);
}

/* The list is as wide as its words, and as the row at the most, so that where it wraps it begins at the row's edge, which is what clips
   the slash that lies in the gap before each item: a line never begins with one. */
.hm-focus__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem var(--gap-max);
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    color: var(--hm-ink);
}

.hm-focus__list li {
    position: relative;
}

.hm-focus__list li::before {
    content: "/";
    content: "/" / "";
    position: absolute;
    left: calc(var(--gap-max) / -2);
    translate: -50% 0;
    color: var(--hm-slash);
}

/* ------------------------------------------------------------------ */
/* The idea behind Kweepa                                              */
/* ------------------------------------------------------------------ */

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

.hm-idea__head {
    min-width: 0;
}

/* what it comes to stands under a heavy rule, as the design draws it */
.hm-idea__aside {
    min-width: 0;
    padding-top: 1.25rem;
    border-top: 2px solid var(--hm-ink);
}

.hm-idea__aside p {
    max-width: 34rem;
    margin: 0 0 1rem;
    color: var(--hm-muted);
}

/* ------------------------------------------------------------------ */
/* What we build                                                       */
/* ------------------------------------------------------------------ */

.hm-solutions {
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    border-block: 1px solid var(--hm-line);
    background: var(--hm-wash);
}

.hm-solutions__shell {
    min-width: 0;
}

/* the choice: two to a row on a phone, five in a row from 40rem, a line between two and the chosen one underlined in the blue */
.hm-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-bottom: 1px solid var(--hm-tab-line);
}

.hm-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-width: 0;
    min-height: 3rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--hm-tab-line);
    color: var(--hm-tab-ink);
    text-decoration: none;
    transition: color 200ms var(--ease-standard);
}

.hm-tab:nth-child(-n + 2) {
    border-top: 0;
}

.hm-tab:nth-child(even) {
    border-left: 1px solid var(--hm-tab-line);
}

.hm-tab:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.hm-tab:hover {
    color: var(--hm-ink);
}

.hm-tab[aria-selected="true"] {
    color: var(--hm-eyebrow);
}

.hm-tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    inset: auto 0 -1px;
    height: 3px;
    background: var(--hm-blue);
}

.hm-tab__no {
    flex: none;
}

.hm-tab__name {
    min-width: 0;
}

.hm-solutions__panels {
    padding-top: 1.25rem;
}

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

/* with the others only until a script will make the choice, where a page without one shows them all, one after another with a line
   between two; once the choice is made the one shown has no room of its own over it (the container's padding is the room), whichever
   it is: a rule on `+` alone gave the third, with the others `hidden`, 20px of margin and 20px of padding */
[data-tabs]:not(.is-ready) .hm-solution + .hm-solution {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hm-tab-line);
}

.hm-solution__picture {
    position: relative;
    min-width: 0;
    aspect-ratio: 1.65;
    overflow: hidden;
    background: var(--hm-photo-bg);
}

.hm-solution__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: var(--hm-art-filter);
}

/* it says the picture is an illustration */
.hm-solution__label {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    max-width: calc(100% - 2rem);
    margin: 0;
    padding: 0.375rem 0.75rem;
    background: var(--hm-photo-label-bg);
    color: var(--hm-photo-label-ink);
}

.hm-solution__detail {
    min-width: 0;
}

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

.hm-solution__text {
    max-width: 30rem;
    margin: 0;
    color: var(--hm-muted);
}

.hm-points {
    margin: 0.625rem 0 0.5rem;
    padding: 0;
    list-style: none;
}

.hm-points li {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    max-width: none;
    margin: 0;
    padding: 0.625rem 0;
    color: var(--hm-ink);
}

.hm-points li + li {
    border-top: 1px solid var(--hm-line-strong);
}

.hm-points .hm-tag {
    flex: none;
    color: var(--hm-eyebrow);
}

/* ------------------------------------------------------------------ */
/* The thinking behind the screens                                     */
/* ------------------------------------------------------------------ */

.hm-thinking {
    padding-block: 1.75rem;
    background: var(--hm-night);
    color: #ffffff;
}

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

.hm-thinking__head,
.hm-thinking__words {
    min-width: 0;
}

.hm-thinking__words p {
    max-width: 34rem;
    margin: 0 0 1rem;
    color: var(--hm-night-text);
}

.hm-thinking__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem var(--gap-max);
    margin: 1.25rem 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--hm-night-line);
    list-style: none;
    color: var(--hm-night-foot);
}

.hm-thinking__foot li {
    display: flex;
    gap: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* A sample workflow                                                   */
/* ------------------------------------------------------------------ */

.hm-head--tour .hm-lead {
    max-width: 36rem;
}

.hm-tour__note {
    color: var(--hm-ink);
}

.hm-tour__stage {
    display: grid;
    border: 1px solid var(--hm-card-edge);
    background: var(--hm-tour-bg);
}

/* the stages: a row over the window on a phone, a column at its left from 48rem */
.hm-rail {
    min-width: 0;
    border-bottom: 1px solid var(--hm-rail-line);
    background: var(--hm-rail-bg);
}

.hm-rail__label {
    display: none;
    margin: 0;
    padding: 0.375rem 1.4375rem 1.25rem;
    color: var(--hm-muted);
}

.hm-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hm-step {
    display: block;
    min-width: 0;
    padding: 0.875rem 1rem 0.6875rem;
    border-bottom: 3px solid transparent;
    color: var(--hm-tab-ink);
    text-decoration: none;
    transition: color 200ms var(--ease-standard), background-color 200ms var(--ease-standard);
}

.hm-step__no {
    display: block;
    margin-bottom: 0.25rem;
    opacity: 0.75;
}

.hm-step__name {
    display: block;
    min-width: 0;
}

.hm-step:hover {
    color: var(--hm-ink);
}

.hm-step[aria-selected="true"] {
    border-bottom-color: var(--hm-blue);
    background: var(--hm-rail-on-bg);
    color: var(--hm-eyebrow);
}

.hm-tour__screens {
    min-width: 0;
    padding: 0.75rem;
}

.hm-stage {
    display: grid;
    gap: 0.75rem;
}

[data-tabs]:not(.is-ready) .hm-stage + .hm-stage {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--hm-rail-line);
}

/* the window is a picture of an interface, and what it holds follows its own width, not the page's */
.hm-window {
    container: hm-window / inline-size;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 20rem;
    border: 1px solid var(--hm-card-edge);
    background: var(--hm-card);
    box-shadow: var(--hm-card-shadow);
}

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

.hm-window__brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    color: var(--hm-window-ink);
}

.hm-window__mark {
    flex: none;
    width: 0.875rem;
    height: 1.1rem;
    color: var(--hm-blue);
}

.hm-window__note {
    margin: 0;
    color: var(--hm-muted);
}

.hm-window__body {
    flex: 1;
    padding: 1rem;
}

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

.hm-window__top > div {
    min-width: 0;
}

.hm-window__title {
    margin: 0;
    color: var(--hm-ink);
}

.hm-window__subtitle {
    margin: 0.125rem 0 0;
    color: var(--hm-muted);
}

.hm-status {
    flex: none;
    padding: 0.25rem 0.625rem;
    background: var(--hm-status-bg);
    color: var(--hm-status);
}

.hm-table {
    width: 100%;
    margin-top: 0.75rem;
    border-collapse: collapse;
}

.hm-table th {
    padding: 0.625rem 0.75rem;
    background: var(--hm-head-bg);
    color: var(--hm-muted);
    text-align: left;
}

.hm-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--hm-row-line);
    color: var(--hm-ink);
    overflow-wrap: anywhere;
}

/* a line between two rows and none under the last */
.hm-table tbody tr:last-child td {
    border-bottom: 0;
}

/* a reference and where a request stands keep to a line; what it asks for and who has it may wrap */
.hm-table__reference,
.hm-table__owner,
.hm-table__status {
    white-space: nowrap;
}

.hm-table__request {
    min-width: 0;
}

.hm-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    background: var(--hm-badge-bg);
    color: var(--hm-badge-ink);
}

/* in a window too narrow for four columns the owner's goes: the reference, the request and where it stands are what a row says */
@container hm-window (max-width: 27rem) {
    .hm-table th:nth-child(3),
    .hm-table td:nth-child(3) {
        display: none;
    }

    .hm-table th,
    .hm-table td {
        padding-inline: 0.5rem;
    }
}

/* in a window too narrow for three (a phone, or the text enlarged: it is the window's own width in rem that decides) a row is a small card,
   its reference and where it stands on a line, wrapping apart where they must, over what it asks for; the head is left to a screen reader
   (the table keeps its roles, as the guides' tables do) */
@container hm-window (max-width: 20rem) {
    .hm-table,
    .hm-table tbody,
    .hm-table tr,
    .hm-table td {
        display: block;
        width: auto;
        min-width: 0;
    }

    .hm-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .hm-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.25rem 0.75rem;
        padding: 0.625rem 0;
    }

    .hm-table tbody tr + tr {
        border-top: 1px solid var(--hm-row-line);
    }

    /* the first row has no room over it of its own: the table's margin is the room under the window's title */
    .hm-table tbody tr:first-child {
        padding-top: 0;
    }

    .hm-table td {
        padding: 0;
        border-bottom: 0;
    }

    .hm-table__reference {
        order: 1;
    }

    .hm-table__status {
        order: 2;
    }

    .hm-table__request {
        order: 3;
        flex-basis: 100%;
    }
}

/* the sample's layout follows the width of its own column in rem, not the window's (a media query in rem does not see the text enlarged: at
   200% text the rail's 17rem left a window 160px wide at 768, and the table stuck out of it) */
.hm-tour > .container {
    container: hm-tour / inline-size;
}

@container hm-tour (min-width: 34rem) {
    .hm-steps {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hm-tour__screens {
        padding: 1.25rem;
    }

    .hm-window__body {
        padding: 1.25rem 1.5rem;
    }
}

/* the stages are a column at the left of the window */
@container hm-tour (min-width: 41rem) {
    .hm-tour__stage {
        grid-template-columns: 17rem minmax(0, 1fr);
        min-height: 26rem;
    }

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

    .hm-rail__label {
        display: block;
    }

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

    .hm-step {
        padding: 1rem 1.4375rem;
        border-bottom: 0;
        border-left: 3px solid transparent;
    }

    .hm-step[aria-selected="true"] {
        border-left-color: var(--hm-blue);
    }

    .hm-window {
        min-height: 22rem;
    }
}

.hm-stage__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

.hm-stage__caption {
    min-width: 0;
    margin: 0;
    color: var(--hm-muted);
}

.hm-stage__controls {
    display: inline-flex;
    gap: 0.375rem;
}

.hm-arrow {
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--hm-line-strong);
    background: var(--hm-card);
    color: var(--hm-eyebrow);
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.hm-arrow:hover {
    background: var(--hm-soft);
}

/* a page whose script will make the choice shows the first alone until it has */
@media (scripting: enabled) {
    [data-tabs]:not(.is-ready) .hm-solution ~ .hm-solution,
    [data-tabs]:not(.is-ready) .hm-stage ~ .hm-stage {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* Our approach                                                        */
/* ------------------------------------------------------------------ */

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

.hm-approach__words,
.hm-process {
    min-width: 0;
}

.hm-approach__text {
    max-width: 26rem;
    margin: 1rem 0 0;
    color: var(--hm-muted);
}

/* a line between two steps and none over the first or under the last */
.hm-process__item + .hm-process__item {
    border-top: 1px solid var(--hm-line-strong);
}

.hm-process__summary {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: 3.5rem;
    padding-block: 0.75rem;
    color: var(--hm-ink);
    cursor: pointer;
    list-style: none;
}

.hm-process__summary::-webkit-details-marker {
    display: none;
}

/* the first step is level with the label over the heading beside it, and is as high as a press needs */
.hm-process__item:first-child > .hm-process__summary {
    min-height: 2.75rem;
    padding-top: 0;
}

.hm-process__summary:focus-visible {
    outline-offset: 2px;
}

.hm-process__no {
    flex: none;
    min-width: 1.5rem;
    color: var(--hm-eyebrow);
}

.hm-process__name {
    flex: 1;
    min-width: 0;
}

.hm-process__summary .icon {
    flex: none;
    color: var(--hm-eyebrow);
}

/* the plus loses its upright bar when the step is open, which leaves the minus the design draws */
.hm-icon__bar {
    transform-box: fill-box;
    transform-origin: center;
    transition: scale var(--spring) var(--ease-spring);
}

.hm-process__item[open] .hm-icon__bar {
    scale: 1 0;
}

.hm-process__answer {
    padding: 0 2.5rem 0.75rem 2.75rem;
}

.hm-process__answer p {
    max-width: 36rem;
    margin: 0;
    color: var(--hm-muted);
}

.hm-process__item:last-child > .hm-process__answer {
    padding-bottom: 0;
}

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

    .hm-process__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;
    }

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

/* ------------------------------------------------------------------ */
/* What you can count on                                               */
/* ------------------------------------------------------------------ */

.hm-principles {
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    border-block: 1px solid var(--hm-line);
    background: var(--hm-wash);
}

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

.hm-principles__words {
    min-width: 0;
}

.hm-principles__text {
    max-width: 28rem;
    margin: 1rem 0 0;
    color: var(--hm-muted);
}

/* a line between two things and none over the first or under the last */
.hm-list {
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hm-list__item {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: 0.5rem;
    padding-block: 1rem;
}

.hm-list__item:first-child {
    padding-top: 0;
}

.hm-list__item:last-child {
    padding-bottom: 0;
}

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

.hm-list__no {
    padding-top: 0.25rem;
    color: var(--hm-eyebrow);
}

.hm-list__title {
    margin: 0;
    color: var(--hm-ink);
}

.hm-list__text {
    max-width: 34rem;
    margin: 0.25rem 0 0;
    color: var(--hm-muted);
}

/* ------------------------------------------------------------------ */
/* The closing call                                                    */
/* ------------------------------------------------------------------ */

.hm-closing {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: 2rem;
    background: var(--hm-night);
    color: #ffffff;
}

/* a large K behind the words at the right, faint, as the design sets one letter in the band */
.hm-closing__k {
    position: absolute;
    z-index: -1;
    top: 50%;
    right: 2%;
    width: auto;
    height: 26rem;
    translate: 0 -50%;
    color: var(--hm-closing-k);
    pointer-events: none;
}

.hm-closing__grid {
    display: grid;
    gap: var(--gap-max);
    align-items: end;
}

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

.hm-closing__title {
    margin: 0.5rem 0 0.75rem;
    color: #ffffff;
    text-wrap: balance;
}

.hm-closing__text {
    max-width: 38rem;
    margin: 0;
    color: var(--hm-night-text);
}

.hm-closing__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.hm-closing__email {
    margin: 0;
    color: var(--hm-night-text);
}

.hm-closing__email a {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* the focus ring on a navy band is white: the site's blue is 2.3:1 on it, and a ring needs 3:1 (WCAG 1.4.11) */
.hm-closing :focus-visible,
.hm-thinking :focus-visible {
    outline-color: var(--hm-night-ring);
}

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

@media (min-width: 40rem) {
    /* five choices in a row, a line between two */
    .hm-tabs {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .hm-tab,
    .hm-tab:nth-child(-n + 2) {
        border-top: 0;
    }

    .hm-tab:nth-child(even) {
        border-left: 0;
    }

    .hm-tab + .hm-tab {
        border-left: 1px solid var(--hm-tab-line);
    }

    .hm-tab:last-child:nth-child(odd) {
        grid-column: auto;
    }
}

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

@media (min-width: 48rem) {
    .hm-focus__inner {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .hm-focus__list {
        margin-left: auto;
    }

    .hm-idea__grid {
        grid-template-columns: minmax(0, 1.17fr) minmax(0, 0.67fr);
    }

    .hm-idea__aside {
        margin-top: 1.25rem;
    }

    .hm-head {
        grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    }

    .hm-head--tour {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    }

    .hm-solution {
        grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
    }

    .hm-thinking__grid,
    .hm-principles__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .hm-thinking__words {
        padding-top: 1rem;
    }

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

    .hm-closing__grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    }
}

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

@media (min-width: 64rem) {
    /* the film is beside the words and reaches the window's right edge: the hero is as high as the film and its frame */
    .hm-hero__grid {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        align-items: stretch;
    }

    .hm-hero__words {
        align-self: center;
        padding-block: 1.75rem;
        padding-right: 1.25rem;
    }

    .hm-film {
        margin: 0 calc(-1 * max(var(--gutter), (100vw - var(--container)) / 2)) 0 0;
        padding: 0.75rem 1.25rem 1rem;
    }
}

/* the film cut for a phone is upright, and its controls lie over its top right corner as two round buttons with a picture each and no
   words (what they are called is said to a screen reader as before): the row they stood in took 56px of a phone's height. They
   straddle the film's top edge, as the design's pills do, so that what they cover is the app's bar (its avatar) and nothing below it:
   the chips and stamps that a clip puts at the right of its title start under the bar */
@media (max-width: 43.75rem) {
    .hm-film__stage {
        aspect-ratio: 3 / 4;
    }

    .hm-film__actions {
        position: absolute;
        top: 0.375rem;
        right: calc(var(--gutter) + 0.25rem);
        z-index: 4;
        gap: 0.375rem;
    }

    .hm-film__button {
        justify-content: center;
        width: 2.75rem;
        padding: 0;
    }

    .hm-film__button > span {
        display: none;
    }

    .hm-film__button .icon {
        width: 1.25rem;
        height: 1.25rem;
    }

    /* on the whole screen they are in their row again, over the ground and not over the film */
    .hm-film:fullscreen .hm-film__actions {
        position: static;
    }

    .hm-film:fullscreen .hm-film__stage {
        width: min(100%, calc((100dvh - 10rem) * 3 / 4));
    }
}

/* ------------------------------------------------------------------ */
/* 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; a solution or a stage that is chosen comes in as it is shown. */
@media (prefers-reduced-motion: no-preference) {
    .hm-hero__title,
    .hm-hero__lead {
        animation: hero-settle var(--spring-slow) var(--ease-spring) both;
    }

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

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

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

    .hm-hero__note {
        animation-delay: 200ms;
    }

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

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

/* ------------------------------------------------------------------ */
/* A visitor who asks for more contrast, forced colours, and paper     */
/* ------------------------------------------------------------------ */

@media (prefers-contrast: more) {
    .hm-btn--outlined,
    .hm-film__button,
    .hm-clip__bar,
    .hm-arrow,
    .hm-film__stage,
    .hm-tour__stage,
    .hm-window {
        border-color: var(--md-outline);
    }

    .hm-tab,
    .hm-tabs,
    .hm-process__item + .hm-process__item,
    .hm-list__item + .hm-list__item,
    .hm-points li + li {
        border-color: var(--md-outline);
    }
}

@media (forced-colors: active) {
    .hm-btn,
    .hm-film__button,
    .hm-arrow {
        border: 1px solid ButtonText;
    }

    /* the bar of a clip and what has filled of it are drawn in the system's colours: a background would be taken away */
    .hm-clip__bar {
        border: 1px solid ButtonText;
    }

    .hm-clip__fill {
        forced-color-adjust: none;
        background: Highlight;
    }

    .hm-tab[aria-selected="true"]::after {
        background: Highlight;
    }

    .hm-rule {
        background: CanvasText;
    }

    .hm-closing__k {
        display: none;
    }
}

@media print {
    .hm-film__actions,
    .hm-film__clips,
    .hm-film__now,
    .hm-film__video,
    .hm-closing__k {
        display: none;
    }

    .hm-film {
        margin: 0;
        padding: 0;
        background: none;
    }

    .hm-thinking,
    .hm-closing {
        background: none;
        color: #000000;
    }

    .hm-thinking .hm-title,
    .hm-thinking__words p,
    .hm-closing__title,
    .hm-closing__text,
    .hm-closing__email,
    .hm-closing__email a,
    .hm-title--night {
        color: #000000;
    }
}