/* The restaurant page (services/pages/restaurant-management.html), after its own design (2026-10-30: asked for, "yes" to the
   restaurant page after the clinic page, with standalone.html). Until then the page was drawn to the design of 2026-10-25 (a laptop
   of the product over a photograph, a lifecycle, kinds of business, what you get and a closing band); this stylesheet replaces that
   design's, in place, and the pictures it used are left, unused: the new design draws everything in HTML and carries no picture.

   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 in 10 to 13px and its titles in 34 to 76px with a tracking of
   -0.06em: the sample is set in the roles' sizes, so it is larger, and gives way where its own width is short, by container
   queries, not the page's media). Mobile first: one column, the console under the hero's words and beside them from 64rem, a heading
   beside what it heads from 48rem. Where the page asks for a script (the sample's four views, its bill, its kitchen) every answer
   is in the markup, and what chooses is a link to what it means, or a control `disabled` or `hidden`, until site.js makes it work;
   the capabilities, the journey and the questions need none.

   The space between rows, columns and items is 20px at the most (--gap-max, site.css); a painted band or card has the room it needs
   inside itself. A list has a line between two of its rows and none over the first or under the last. Everything is scoped to .rst;
   its colours are the --rst-* tokens, set again for the dark theme, and its text takes typography.md's two text colours through
   them. The deep navy band and the closing card are deep blue on both themes (2026-10-30: the page is drawn in the site's blue and navy,
   as the other service pages are; the design's greens are the company's to ask for again), and the green and the amber are what a
   status says, as on the other pages. */
:root {
    --rst-surface: #ffffff;
    /* the text: headings and body text in typography.md's primary colour, small text in its secondary */
    --rst-ink: var(--text-primary);
    --rst-muted: var(--text-secondary);
    /* the quiet half of a heading (large text: 3:1 is the least) */
    --rst-faint: #66768a;
    --rst-eyebrow: #0a4ce9;
    --rst-blue: #0154e5;
    --rst-blue-hover: #0043bd;
    --rst-on-blue: #ffffff;
    --rst-green: #0b7a57;
    --rst-soft: #e8f1ff;
    --rst-soft-ink: #0a3fb8;
    --rst-edge: #cbdcff;
    --rst-line: #e3e9f0;
    --rst-line-strong: #d3deec;
    --rst-wash: #f7f9fc;
    --rst-band: #f2f6fb;
    --rst-crumb-chevron: #8790a8;
    --rst-dot: #17b982;
    --rst-dot-ring: rgb(23 185 130 / 0.16);
    /* the hero: a pale ground and, at the right of it, a wash of sky with a ring behind the console */
    --rst-hero-bg: linear-gradient(105deg, #fcfdff 0%, #ffffff 50%, #f6f9ff 100%);
    --rst-art-wash: radial-gradient(circle at 27% 26%, #e1eeff 0%, #d4e6fd 23%, #e8f1fd 46%, #eef4fc 77%, #f1f6fc 100%);
    --rst-ring: rgb(255 255 255 / 0.5);
    --rst-ring-fill: rgb(255 255 255 / 0.25);
    /* the windows and cards on the page */
    --rst-card: #ffffff;
    --rst-card-edge: #dbe5f3;
    --rst-card-soft: #f6f9fd;
    --rst-window-shadow: 0 28px 64px rgb(15 62 139 / 0.18), 0 6px 16px rgb(20 50 95 / 0.09);
    --rst-float-shadow: 0 12px 30px rgb(20 67 110 / 0.16);
    --rst-side: #f6f9fd;
    --rst-side-edge: #e5ebf3;
    --rst-tab-on: #e4efff;
    --rst-tab-on-ink: #0a3fb8;
    --rst-tab-hover: #eef3fa;
    --rst-no: #566b88;
    --rst-count-bg: #e3ecf8;
    --rst-count-ink: #2d4f82;
    --rst-tile: #e8f1ff;
    --rst-stepper-bg: #f1f6ff;
    --rst-stepper-edge: #b8cdf2;
    --rst-stepper-hover: #d9e7ff;
    --rst-bill: #f8fafd;
    --rst-bill-edge: #e3e9f2;
    --rst-lane: #fbfcfe;
    --rst-lane-edge: #e4eaf3;
    --rst-ticket-edge: #dfe7f2;
    --rst-move-bg: #edf3ff;
    --rst-move-edge: #c3d4f3;
    --rst-move-ink: #0a3fb8;
    --rst-th: #f1f5fa;
    --rst-th-ink: #4b5d78;
    --rst-note: #f3f6fb;
    --rst-bar: #c9dcfb;
    --rst-bar-peak: #0154e5;
    --rst-baseline: #d5dfee;
    --rst-disabled: #8b99ad;
    --rst-disabled-bg: #66758c;
    --rst-disabled-ink: #ffffff;
    /* what a status says */
    --rst-preparing: #8a5200;
    --rst-preparing-bg: #fff4e0;
    --rst-ready: #0b7a57;
    --rst-ready-bg: #e4f6ee;
    --rst-new: #0a3fb8;
    --rst-new-bg: #e5effe;
    --rst-low: #98530b;
    --rst-ok: #0b7a57;
    --rst-live-bg: #e4f6ee;
    --rst-live-ink: #0a6a4b;
    /* the deep navy band on the journey */
    --rst-night: #0f2851;
    --rst-night-text: #d4dfef;
    --rst-night-line: #496183;
    --rst-night-eyebrow: #9cbbf7;
    --rst-night-no: #9cbbf7;
    --rst-night-link: #bcd2fb;
    /* the closing call: a blue card with two arcs of light */
    --rst-closing: linear-gradient(120deg, #0c43c2, #0757ed);
    --rst-closing-text: #dce8ff;
    --rst-closing-eyebrow: #dce8ff;
    --rst-closing-ring: rgb(255 255 255 / 0.15);
    --rst-closing-shadow: 0 24px 50px rgb(10 48 156 / 0.22);
    --rst-white-ink: #0643be;
    --rst-k: linear-gradient(135deg, #0675ef, #3626d6);
    --rst-card-shadow: 0 18px 45px rgb(33 77 119 / 0.11);
    /* the capabilities' drawings: a pale stage, and the colours they are drawn in (the roles of fragments/art-restaurant-management) */
    --rst-ill-stage: linear-gradient(135deg, #e8f1ff 0%, #f5f9ff 100%);
    --rst-ill-glow: rgb(255 255 255 / 0.72);
    --rst-ill-shadow: rgb(15 40 81 / 0.13);
    --rst-ill-body: #0f2851;
    --rst-ill-screen: #ffffff;
    --rst-ill-pale: #e3edfc;
    --rst-ill-soft: #f3f8ff;
    --rst-ill-line: #b9cbe8;
    --rst-ill-blue: #0154e5;
    --rst-ill-sky: #8db3f5;
    --rst-ill-navy: #0f2851;
    --rst-ill-paper: #ffffff;
    --rst-ill-green: #17b982;
    --rst-ill-amber: #f2a93b;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --rst-surface: #131314;
        --rst-faint: #8d9bb0;
        --rst-eyebrow: #a8c7fa;
        --rst-blue: #a8c7fa;
        --rst-blue-hover: #c2d7fb;
        --rst-on-blue: #062e6f;
        --rst-green: #6dd5a8;
        --rst-soft: rgb(168 199 250 / 0.14);
        --rst-soft-ink: #a8c7fa;
        --rst-edge: rgb(168 199 250 / 0.3);
        --rst-line: rgb(255 255 255 / 0.1);
        --rst-line-strong: rgb(255 255 255 / 0.18);
        --rst-wash: #17181b;
        --rst-band: #161719;
        --rst-crumb-chevron: #7f889c;
        --rst-dot: #4cd9a0;
        --rst-dot-ring: rgb(76 217 160 / 0.2);
        --rst-hero-bg: linear-gradient(105deg, #14161a 0%, #131314 50%, #121722 100%);
        --rst-art-wash: radial-gradient(circle at 27% 26%, #1b2740 0%, #172033 23%, #161b26 46%, #16181d 77%, #151619 100%);
        --rst-ring: rgb(255 255 255 / 0.1);
        --rst-ring-fill: rgb(255 255 255 / 0.03);
        --rst-card: #1c1f25;
        --rst-card-edge: rgb(255 255 255 / 0.12);
        --rst-card-soft: #242830;
        --rst-window-shadow: 0 28px 64px rgb(0 0 0 / 0.55);
        --rst-float-shadow: 0 12px 30px rgb(0 0 0 / 0.5);
        --rst-side: #181a1f;
        --rst-side-edge: rgb(255 255 255 / 0.09);
        --rst-tab-on: rgb(168 199 250 / 0.18);
        --rst-tab-on-ink: #c2d7fb;
        --rst-tab-hover: rgb(255 255 255 / 0.06);
        --rst-no: #9fb2cc;
        --rst-count-bg: rgb(255 255 255 / 0.1);
        --rst-count-ink: #c3d4ec;
        --rst-tile: #262b33;
        --rst-stepper-bg: rgb(168 199 250 / 0.1);
        --rst-stepper-edge: rgb(168 199 250 / 0.4);
        --rst-stepper-hover: rgb(168 199 250 / 0.22);
        --rst-bill: #1e2227;
        --rst-bill-edge: rgb(255 255 255 / 0.1);
        --rst-lane: #1d2126;
        --rst-lane-edge: rgb(255 255 255 / 0.09);
        --rst-ticket-edge: rgb(255 255 255 / 0.12);
        --rst-move-bg: rgb(168 199 250 / 0.12);
        --rst-move-edge: rgb(168 199 250 / 0.35);
        --rst-move-ink: #c2d7fb;
        --rst-th: #252a31;
        --rst-th-ink: #b7c6dc;
        --rst-note: #22262c;
        --rst-bar: #34486a;
        --rst-bar-peak: #a8c7fa;
        --rst-baseline: rgb(255 255 255 / 0.16);
        --rst-disabled: #4c5666;
        --rst-disabled-bg: #4c5666;
        --rst-disabled-ink: #c8d0dc;
        --rst-preparing: #f2c46d;
        --rst-preparing-bg: rgb(242 196 109 / 0.14);
        --rst-ready: #7fe0b2;
        --rst-ready-bg: rgb(109 213 168 / 0.14);
        --rst-new: #a8c7fa;
        --rst-new-bg: rgb(168 199 250 / 0.14);
        --rst-low: #f2b36d;
        --rst-ok: #7fe0b2;
        --rst-live-bg: rgb(109 213 168 / 0.14);
        --rst-live-ink: #8fe0bd;
        --rst-night: #08182f;
        --rst-closing: linear-gradient(120deg, #0a3496, #0a46c9);
        --rst-closing-shadow: 0 24px 50px rgb(0 0 0 / 0.4);
        --rst-card-shadow: 0 18px 45px rgb(0 0 0 / 0.45);
        --rst-ill-stage: linear-gradient(135deg, #1d2b47 0%, #162034 100%);
        --rst-ill-glow: rgb(168 199 250 / 0.07);
        --rst-ill-shadow: rgb(0 0 0 / 0.3);
        --rst-ill-body: #3a5486;
        --rst-ill-screen: #e6eefb;
        --rst-ill-pale: #cfdcf2;
        --rst-ill-soft: #dbe6f7;
        --rst-ill-line: #9db3d6;
        --rst-ill-blue: #4d8bf5;
        --rst-ill-sky: #87abee;
        --rst-ill-navy: #1b3260;
        --rst-ill-paper: #f1f6fd;
        --rst-ill-green: #2fcf9a;
        --rst-ill-amber: #f5b650;
    }
}

:root[data-theme="dark"] {
    --rst-surface: #131314;
    --rst-faint: #8d9bb0;
    --rst-eyebrow: #a8c7fa;
    --rst-blue: #a8c7fa;
    --rst-blue-hover: #c2d7fb;
    --rst-on-blue: #062e6f;
    --rst-green: #6dd5a8;
    --rst-soft: rgb(168 199 250 / 0.14);
    --rst-soft-ink: #a8c7fa;
    --rst-edge: rgb(168 199 250 / 0.3);
    --rst-line: rgb(255 255 255 / 0.1);
    --rst-line-strong: rgb(255 255 255 / 0.18);
    --rst-wash: #17181b;
    --rst-band: #161719;
    --rst-crumb-chevron: #7f889c;
    --rst-dot: #4cd9a0;
    --rst-dot-ring: rgb(76 217 160 / 0.2);
    --rst-hero-bg: linear-gradient(105deg, #14161a 0%, #131314 50%, #121722 100%);
    --rst-art-wash: radial-gradient(circle at 27% 26%, #1b2740 0%, #172033 23%, #161b26 46%, #16181d 77%, #151619 100%);
    --rst-ring: rgb(255 255 255 / 0.1);
    --rst-ring-fill: rgb(255 255 255 / 0.03);
    --rst-card: #1c1f25;
    --rst-card-edge: rgb(255 255 255 / 0.12);
    --rst-card-soft: #242830;
    --rst-window-shadow: 0 28px 64px rgb(0 0 0 / 0.55);
    --rst-float-shadow: 0 12px 30px rgb(0 0 0 / 0.5);
    --rst-side: #181a1f;
    --rst-side-edge: rgb(255 255 255 / 0.09);
    --rst-tab-on: rgb(168 199 250 / 0.18);
    --rst-tab-on-ink: #c2d7fb;
    --rst-tab-hover: rgb(255 255 255 / 0.06);
    --rst-no: #9fb2cc;
    --rst-count-bg: rgb(255 255 255 / 0.1);
    --rst-count-ink: #c3d4ec;
    --rst-tile: #262b33;
    --rst-stepper-bg: rgb(168 199 250 / 0.1);
    --rst-stepper-edge: rgb(168 199 250 / 0.4);
    --rst-stepper-hover: rgb(168 199 250 / 0.22);
    --rst-bill: #1e2227;
    --rst-bill-edge: rgb(255 255 255 / 0.1);
    --rst-lane: #1d2126;
    --rst-lane-edge: rgb(255 255 255 / 0.09);
    --rst-ticket-edge: rgb(255 255 255 / 0.12);
    --rst-move-bg: rgb(168 199 250 / 0.12);
    --rst-move-edge: rgb(168 199 250 / 0.35);
    --rst-move-ink: #c2d7fb;
    --rst-th: #252a31;
    --rst-th-ink: #b7c6dc;
    --rst-note: #22262c;
    --rst-bar: #34486a;
    --rst-bar-peak: #a8c7fa;
    --rst-baseline: rgb(255 255 255 / 0.16);
    --rst-disabled: #4c5666;
    --rst-disabled-bg: #4c5666;
    --rst-disabled-ink: #c8d0dc;
    --rst-preparing: #f2c46d;
    --rst-preparing-bg: rgb(242 196 109 / 0.14);
    --rst-ready: #7fe0b2;
    --rst-ready-bg: rgb(109 213 168 / 0.14);
    --rst-new: #a8c7fa;
    --rst-new-bg: rgb(168 199 250 / 0.14);
    --rst-low: #f2b36d;
    --rst-ok: #7fe0b2;
    --rst-live-bg: rgb(109 213 168 / 0.14);
    --rst-live-ink: #8fe0bd;
    --rst-night: #08182f;
    --rst-closing: linear-gradient(120deg, #0a3496, #0a46c9);
    --rst-closing-shadow: 0 24px 50px rgb(0 0 0 / 0.4);
    --rst-card-shadow: 0 18px 45px rgb(0 0 0 / 0.45);
    --rst-ill-stage: linear-gradient(135deg, #1d2b47 0%, #162034 100%);
    --rst-ill-glow: rgb(168 199 250 / 0.07);
    --rst-ill-shadow: rgb(0 0 0 / 0.3);
    --rst-ill-body: #3a5486;
    --rst-ill-screen: #e6eefb;
    --rst-ill-pale: #cfdcf2;
    --rst-ill-soft: #dbe6f7;
    --rst-ill-line: #9db3d6;
    --rst-ill-blue: #4d8bf5;
    --rst-ill-sky: #87abee;
    --rst-ill-navy: #1b3260;
    --rst-ill-paper: #f1f6fd;
    --rst-ill-green: #2fcf9a;
    --rst-ill-amber: #f5b650;
}

/* ------------------------------------------------------------------ */
/* 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, unless
   they are listed. */

/* H3 (28px, 500): the figures of the console and of the report */
.rst-stat__value,
.rst-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;
}

/* H4 (card title): sans 500 */
.rst-bill__title,
.rst-bill__sum,
.rst-step__name,
.rst-faq__question,
.rst-k {
    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 */
.rst-lead,
.rst-hero__lead,
.rst-cap__text,
.rst-cap__points,
.rst-step__text,
.rst-night__lead,
.rst-closing__text,
.rst-faq__answer {
    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 */
.rst-note,
.rst-caption,
.rst-card__words span,
.rst-console__name span,
.rst-console__tab,
.rst-console__top span,
.rst-console__foot,
.rst-stat__label,
.rst-stat__unit,
.rst-order__where,
.rst-demotag__note,
.rst-ws__name span,
.rst-ws__tools,
.rst-ws__note,
.rst-pane__text,
.rst-dish__line,
.rst-row__each,
.rst-bill__tax,
.rst-bill__hint,
.rst-ticket__where,
.rst-ticket__items,
.rst-lane__empty,
.rst-bill__empty,
.rst-panenote,
.rst-table td,
.rst-metric__label,
.rst-metric__note,
.rst-chart__caption,
.rst-detail__text,
.rst-closing__note,
.rst-status {
    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, pills, choices and table headers, the prices and sums, the orders' numbers and buttons) */
.rst-console__name strong,
.rst-console__top strong,
.rst-card__words strong,
.rst-live,
.rst-order__no,
.rst-pill,
.rst-ws__name strong,
.rst-reset,
.rst-view,
.rst-count,
.rst-cat,
.rst-chip,
.rst-dish__name,
.rst-dish__price,
.rst-row__name,
.rst-row__sum,
.rst-qty__n,
.rst-bill__sub > span:first-child,
.rst-pay__option,
.rst-lane__title,
.rst-ticket__no,
.rst-move,
.rst-table th,
.rst-table__name,
.rst-stock,
.rst-strip__list,
.rst-detail__title,
.rst-tool {
    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 */
.rst-btn,
.rst-crumbs__list,
.rst-link {
    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 */
.rst-eyebrow,
.rst-tag,
.rst-art__under {
    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 */
.rst {
    background: var(--rst-surface);
    color: var(--rst-ink);
    overflow-wrap: anywhere;
}

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

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

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

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

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

/* the label of the hero has a short rule before it, as the design draws it */
.rst-eyebrow--rule {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.rst-eyebrow--rule::before {
    content: "";
    flex: none;
    width: 1.5rem;
    height: 2px;
    background: var(--rst-blue);
}

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

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

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

.rst-line {
    display: block;
}

.rst-line--faint {
    color: var(--rst-faint);
}

.rst-accent {
    color: var(--rst-blue);
}

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

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

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

.rst-link:hover {
    color: var(--rst-blue);
    text-decoration-color: currentColor;
}

.rst-link--night {
    color: var(--rst-night-link);
    text-decoration-color: var(--rst-night-line);
}

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

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

/* a pulse and a dot: the green that says something is live, as on the other pages */
.rst-pulse,
.rst-dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--rst-dot);
}

.rst-pulse {
    box-shadow: 0 0 0 5px var(--rst-dot-ring);
}

.rst-dot {
    width: 0.375rem;
    height: 0.375rem;
}

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

.rst-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 */
.rst-caption,
.rst-card__words > span,
.rst-console__name > span,
.rst-console__top,
.rst-stat__label,
.rst-order__where,
.rst-console__foot,
.rst-art__under,
.rst-demotag,
.rst-demotag__note,
.rst-ws__brand,
.rst-ws__tools,
.rst-ws__note,
.rst-pane__text,
.rst-flag,
.rst-kicker,
.rst-chip,
.rst-bill__empty,
.rst-bill__total,
.rst-bill__hint,
.rst-ticket__top,
.rst-ticket__items,
.rst-lane__empty,
.rst-panenote,
.rst-metric__label,
.rst-metric__note,
.rst-chart__caption,
.rst-cap__label,
.rst-cap__text,
.rst-step__text,
.rst-night__lead,
.rst-closing__text,
.rst-closing__note,
.rst-strip__label,
.rst-status {
    max-width: none;
}

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

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

.rst-btn[hidden] {
    display: none;
}

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

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

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

/* the quiet one beside the filled one: outlined, on the page's own ground */
.rst-btn--quiet {
    border-color: var(--rst-line-strong);
    background: var(--rst-surface);
    color: var(--rst-blue);
}

.rst-btn--quiet:hover {
    border-color: var(--rst-edge);
    background: var(--rst-soft);
    color: var(--rst-blue);
}

.rst-btn--white {
    background: #ffffff;
    color: var(--rst-white-ink);
}

.rst-btn--white:hover {
    background: #e8f1ff;
    color: var(--rst-white-ink);
}

.rst-btn--block {
    display: flex;
    width: 100%;
    min-height: 2.75rem;
}

/* a button that cannot be pressed now but keeps the keyboard's place: it says so and ignores the press (a `disabled` one would let
   go of the focus). Its label is still text: the ground is deep enough for it to stay at 4.5:1 (white on the stepper's lighter
   grey was 3.04:1, which the contrast measure found with the bill empty) */
.rst-btn[aria-disabled="true"],
.rst-btn:disabled {
    background: var(--rst-disabled-bg);
    color: var(--rst-disabled-ink);
    box-shadow: none;
    cursor: not-allowed;
}

.rst-btn:active:not([aria-disabled="true"], :disabled) {
    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 */
    .rst-btn:hover:not([aria-disabled="true"], :disabled) .rst-icon--arrow-right,
    .rst-link:hover .rst-icon--arrow-right {
        translate: 3px 0;
    }
}

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

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

/* the words and the picture are one under the other until 64rem; the picture has the wash, so the hero has no padding of its own
   (the wash reaches the hero's top and foot) */
.rst-hero__inner {
    display: grid;
    padding-block: 0;
}

.rst-hero__words {
    min-width: 0;
    padding-block: 0.5rem 0.75rem;
}

.rst-crumbs {
    min-width: 0;
}

.rst-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

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

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

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

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

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

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

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

.rst-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-top: 1.25rem;
}

/* three ticked notes, side by side where they fit */
.rst-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--rst-muted);
}

.rst-note {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 1.75rem;
}

.rst-check {
    display: inline-flex;
    flex: none;
    color: var(--rst-green);
}

.rst-check .icon {
    width: 1.125rem;
    height: 1.125rem;
}

/* the picture: a console of a restaurant's evening on a wash of pale sky, a card over its corner. The wash reaches the
   window's edges (the hero clips what lies past them); a ring of light lies behind the console. */
.rst-hero__art {
    position: relative;
    isolation: isolate;
    /* what the wash and its ring paint stays within the picture's own height (the ring would lie over the words above it, and its
       light over the button), and runs sideways to the window's edges */
    clip-path: inset(0 -100vw);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding-block: 1.25rem 1.5rem;
}

.rst-hero__art::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    width: 100vw;
    background: var(--rst-art-wash);
}

.rst-hero__art::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -9rem;
    left: 8%;
    width: 22rem;
    height: 22rem;
    border: 1px solid var(--rst-ring);
    border-radius: 50%;
    background: var(--rst-ring-fill);
    box-shadow: 0 0 0 3rem rgb(255 255 255 / 0.06), 0 0 0 6rem rgb(255 255 255 / 0.04);
    pointer-events: none;
}

.rst-caption {
    display: flex;
    align-items: center;
    align-self: flex-end;
    gap: 0.625rem;
    margin: 0 0 0.75rem;
    color: var(--rst-blue);
}

/* the console: a size container, so what it holds follows its own width, not the page's. It is a picture of an interface, so what does
   not fit it at 200% text is clipped by it. Below 35.5rem its three figures are rows. */
.rst-console {
    container: rst-console / inline-size;
    position: relative;
    align-self: center;
    width: 100%;
    max-width: 41.25rem;
    border: 1px solid var(--rst-card-edge);
    border-radius: 1rem;
    background: var(--rst-card);
    box-shadow: var(--rst-window-shadow);
    color: var(--rst-ink);
    overflow: hidden;
}

.rst-console__bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--rst-line);
}

/* the company's K, as the design draws it: a letter on a blue tile */
.rst-k {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    background: var(--rst-k);
    color: #ffffff;
    box-shadow: 0 2px 7px rgb(33 94 221 / 0.18);
}

/* the name takes what the row has left, so that the chip stays at the row's end with the gap between them the row's own (an auto
   margin on the chip leaves the same room, which the spacing audit reads as a gap when it is between 9 and 20px, as at 360 wide) */
.rst-console__name {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.rst-console__name span {
    color: var(--rst-muted);
}

.rst-live {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: none;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--rst-live-bg);
    color: var(--rst-live-ink);
}

.rst-console__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    margin: 0;
    padding: 0 1.25rem;
    list-style: none;
    border-bottom: 1px solid var(--rst-line);
}

.rst-console__tab {
    padding: 0.75rem 0;
    color: var(--rst-muted);
}

.rst-console__tab.is-on {
    color: var(--rst-blue);
    box-shadow: inset 0 -2px 0 var(--rst-blue);
}

.rst-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.625rem;
    margin: 0;
    padding: 1rem 1.25rem;
    list-style: none;
}

.rst-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 0.875rem 0.75rem;
    border-radius: 0.625rem;
    background: var(--rst-card-soft);
}

.rst-stat__label {
    color: var(--rst-muted);
}

.rst-stat__value {
    color: var(--rst-ink);
    white-space: nowrap;
}

.rst-stat__unit {
    margin-left: 0.25rem;
    color: var(--rst-muted);
}

.rst-console__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
    padding: 0.25rem 1.25rem 0.125rem;
}

.rst-console__top span {
    color: var(--rst-muted);
}

.rst-orders {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rst-order {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 0.75rem;
    padding: 0.875rem 1.25rem;
}

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

.rst-order__where {
    color: var(--rst-muted);
}

.rst-pill {
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    white-space: nowrap;
}

.rst-pill--preparing {
    background: var(--rst-preparing-bg);
    color: var(--rst-preparing);
}

.rst-pill--ready {
    background: var(--rst-ready-bg);
    color: var(--rst-ready);
}

.rst-pill--new {
    background: var(--rst-new-bg);
    color: var(--rst-new);
}

/* its foot keeps room under its words for the card that lies over the corner, which covers none of them */
.rst-console__foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.875rem 1.25rem 1.75rem;
    border-top: 1px solid var(--rst-line);
    background: var(--rst-wash);
    color: var(--rst-muted);
}

.rst-console__foot .icon {
    flex: none;
    color: var(--rst-green);
}

/* the card over the console's lower corner, and the caption beside it: one row, the card hanging from the console's foot */
.rst-art__foot {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem var(--gap-max);
    align-self: center;
    width: 100%;
    max-width: 41.25rem;
    margin-top: -1.25rem;
    padding-inline: 0.75rem;
}

.rst-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rst-card-edge);
    border-radius: 0.8125rem;
    background: var(--rst-card);
    box-shadow: var(--rst-float-shadow);
}

.rst-card__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: var(--rst-soft);
    color: var(--rst-soft-ink);
}

.rst-card__words {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rst-card__words > span {
    color: var(--rst-muted);
}

.rst-card__tick {
    display: inline-flex;
    flex: none;
    color: var(--rst-green);
}

.rst-art__under {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--rst-blue);
}

.rst-art__under .icon {
    flex: none;
    width: 1rem;
    height: 1rem;
}

/* ------------------------------------------------------------------ */
/* Who it is made for                                                  */
/* ------------------------------------------------------------------ */

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

.rst-strip__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem var(--gap-max);
    padding-block: 0.75rem;
}

.rst-strip__label {
    color: var(--rst-muted);
}

.rst-strip__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--rst-ink);
}

/* ------------------------------------------------------------------ */
/* Why Kweepa for restaurants                                          */
/* ------------------------------------------------------------------ */

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

.rst-why__head,
.rst-why__body {
    min-width: 0;
}

.rst-why__body .rst-lead {
    margin-top: 0;
    max-width: 33rem;
}

/* ------------------------------------------------------------------ */
/* The working sample, on a pale band                                   */
/* ------------------------------------------------------------------ */

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

.rst-demotag {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    margin: 0;
}

.rst-demotag__label {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--rst-blue);
}

.rst-demotag__note {
    color: var(--rst-muted);
}

/* the window: a size container, so what it holds follows its own width, not the page's. It works (its controls are real), so nothing
   in it is clipped: what does not fit wraps. Below 40rem its four views are a row of choices over the work; from 40rem they are its
   side. Below 36rem its figures are rows and its table has no category; from 56rem the point of sale and the kitchen are in columns. */
.rst-ws {
    container: rst-ws / inline-size;
    margin-top: var(--gap-max);
    border: 1px solid var(--rst-card-edge);
    border-radius: 1.125rem;
    background: var(--rst-card);
    box-shadow: 0 12px 50px rgb(20 50 95 / 0.08);
    color: var(--rst-ink);
    overflow: clip;
}

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

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

.rst-ws__name {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rst-ws__name span {
    color: var(--rst-muted);
}

.rst-ws__tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.625rem;
    margin: 0;
    color: var(--rst-muted);
}

/* the button that puts the sample back as it opened: 44px to press */
.rst-reset {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    padding: 0.25rem 0.875rem;
    border: 1px solid var(--rst-line-strong);
    border-radius: 0.5rem;
    background: var(--rst-card);
    color: var(--rst-blue);
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.rst-reset[hidden] {
    display: none;
}

.rst-reset .icon {
    width: 1rem;
    height: 1rem;
}

.rst-reset:hover {
    background: var(--rst-soft);
}

.rst-ws__layout {
    display: grid;
}

/* the four views: a row of choices over the work, until the window is wide enough for a side */
.rst-ws__side {
    display: flex;
    flex-direction: column;
    padding: 0.625rem;
    background: var(--rst-side);
    border-bottom: 1px solid var(--rst-side-edge);
}

.rst-views {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

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

.rst-view__no {
    color: var(--rst-no);
}

.rst-view:hover {
    background: var(--rst-tab-hover);
    color: var(--rst-ink);
}

.rst-view[aria-selected="true"] {
    background: var(--rst-tab-on);
    color: var(--rst-tab-on-ink);
}

.rst-view[aria-selected="true"] .rst-view__no {
    color: var(--rst-tab-on-ink);
}

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

.rst-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding-inline: 0.375rem;
    border-radius: 999px;
    background: var(--rst-count-bg);
    color: var(--rst-count-ink);
}

.rst-ws__note {
    display: none;
    margin: 0;
    color: var(--rst-muted);
}

.rst-ws__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1rem;
}

/* a page without a script shows the four views one after another, a line between two; a view is a grid of its head, its work and its
   note, 20px apart at the most */
.rst-pane {
    display: grid;
    gap: var(--gap-max);
    min-width: 0;
}

.rst-pane[hidden] {
    display: none;
}

.rst-ws:not(.is-ready) .rst-pane + .rst-pane {
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--rst-line);
}

.rst-pane__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem var(--gap-max);
}

.rst-pane__head > div {
    flex: 1 1 14rem;
    min-width: 0;
}

.rst-pane__title {
    margin: 0;
    color: var(--rst-ink);
}

.rst-pane__text {
    margin: 0.25rem 0 0;
    color: var(--rst-muted);
}

.rst-flag {
    flex: none;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--rst-note);
    color: var(--rst-muted);
    white-space: nowrap;
}

.rst-panenote {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 0.5625rem;
    background: var(--rst-note);
    color: var(--rst-muted);
}

/* what the last press came to, to the eye and to a screen reader alike; empty, it has no height */
.rst-status {
    margin: var(--gap-max) 0 0;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    background: var(--rst-soft);
    color: var(--rst-soft-ink);
}

.rst-status:empty {
    margin: 0;
    padding: 0;
}

/* ---- 1. The point of sale ---- */

.rst-pos {
    display: grid;
    gap: var(--gap-max);
}

.rst-menu {
    min-width: 0;
}

.rst-kicker {
    margin: 0;
    color: var(--rst-muted);
}

.rst-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.25rem;
    margin-top: 0.25rem;
    border-bottom: 1px solid var(--rst-line);
}

.rst-cat {
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--rst-muted);
    cursor: pointer;
    transition: color 200ms var(--ease-standard);
}

.rst-cat:hover:not(:disabled) {
    color: var(--rst-ink);
}

.rst-cat[aria-pressed="true"] {
    border-bottom-color: var(--rst-blue);
    color: var(--rst-blue);
}

.rst-cat:disabled {
    cursor: default;
}

.rst-dishes {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rst-dish {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 0 0.75rem;
    padding: 0.625rem 0;
}

.rst-dish[hidden] {
    display: none;
}

.rst-dish:not([hidden]) ~ .rst-dish:not([hidden]) {
    border-top: 1px solid var(--rst-line);
}

.rst-dish__art {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.6875rem;
    background: var(--rst-tile);
    color: var(--rst-blue);
}

.rst-dish__art .icon {
    width: 1.5rem;
    height: 1.5rem;
}

.rst-dish__words {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rst-dish__line {
    color: var(--rst-muted);
}

.rst-dish__price {
    white-space: nowrap;
    color: var(--rst-ink);
}

/* a stepper: 44px to press, a plus on a dish and a plus and a minus on the bill. One that cannot go on says so and ignores the press
   (`aria-disabled`: a `disabled` button would let go of the keyboard's place) */
.rst-stepper {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--rst-stepper-edge);
    border-radius: 0.5rem;
    background: var(--rst-stepper-bg);
    color: var(--rst-blue);
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.rst-stepper .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.rst-stepper:hover:not([aria-disabled="true"], :disabled) {
    background: var(--rst-stepper-hover);
}

.rst-stepper[aria-disabled="true"],
.rst-stepper:disabled {
    border-color: var(--rst-line);
    background: transparent;
    color: var(--rst-disabled);
    cursor: not-allowed;
}

.rst-stepper:active:not([aria-disabled="true"], :disabled) {
    scale: var(--press-scale);
    transition-duration: 200ms, var(--press-in);
}

/* the order being taken */
.rst-bill {
    container: rst-bill / inline-size;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--rst-bill-edge);
    border-radius: 0.75rem;
    background: var(--rst-bill);
}

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

.rst-bill__title {
    margin: 0;
    color: var(--rst-ink);
}

.rst-chip {
    margin: 0;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--rst-soft);
    color: var(--rst-soft-ink);
}

.rst-bill__rows {
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
}

.rst-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "words sum"
        "words qty";
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 0.5rem 0;
}

.rst-row[hidden] {
    display: none;
}

.rst-row:not([hidden]) ~ .rst-row:not([hidden]) {
    border-top: 1px solid var(--rst-line);
}

.rst-row__words {
    grid-area: words;
    align-self: start;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rst-row__each {
    color: var(--rst-muted);
}

.rst-qty {
    grid-area: qty;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.rst-qty__n {
    min-width: 1.5rem;
    text-align: center;
}

.rst-row__sum {
    grid-area: sum;
    text-align: right;
    white-space: nowrap;
}

.rst-bill__empty {
    margin: 0.5rem 0;
    text-align: center;
    color: var(--rst-muted);
}

.rst-bill__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0;
    padding: 0.75rem 0;
    border-top: 1px solid var(--rst-line);
}

.rst-bill__sub {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rst-bill__tax {
    color: var(--rst-muted);
}

.rst-bill__sum {
    color: var(--rst-ink);
    white-space: nowrap;
}

.rst-pay {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    min-width: 0;
    margin: 0 0 0.75rem;
    padding: 0;
    border: 0;
}

.rst-pay__option {
    position: relative;
    display: flex;
    flex: 1 1 5rem;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.5rem;
    border: 1px solid var(--rst-line-strong);
    border-radius: 0.5rem;
    background: var(--rst-card);
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), border-color 200ms var(--ease-standard);
}

/* the radio is the label's, drawn by it: it is still there for the keyboard and a screen reader */
.rst-pay__input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.rst-pay__option:has(.rst-pay__input:checked) {
    border-color: var(--rst-blue);
    background: var(--rst-soft);
    color: var(--rst-soft-ink);
}

.rst-pay__option:has(.rst-pay__input:focus-visible) {
    outline: 3px solid var(--md-primary);
    outline-offset: 2px;
}

.rst-pay__option:has(.rst-pay__input:disabled) {
    cursor: default;
}

.rst-bill__hint {
    margin: 0.5rem 0 0;
    color: var(--rst-muted);
}

/* ---- 2. The kitchen display ---- */

.rst-lanes {
    display: grid;
    gap: 0.75rem;
}

.rst-lane {
    min-width: 0;
    padding: 0.875rem;
    border: 1px solid var(--rst-lane-edge);
    border-radius: 0.625rem;
    background: var(--rst-lane);
}

.rst-lane__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rst-line);
    color: var(--rst-ink);
}

.rst-lane__list {
    display: grid;
    gap: 0.75rem;
    margin-top: 0.75rem;
}

.rst-ticket {
    padding: 0.875rem;
    border: 1px solid var(--rst-ticket-edge);
    border-radius: 0.5625rem;
    background: var(--rst-card);
    box-shadow: 0 3px 10px rgb(20 50 95 / 0.05);
}

.rst-ticket__top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 0.5rem;
    margin: 0;
}

.rst-ticket__where {
    color: var(--rst-muted);
}

.rst-ticket__items {
    margin: 0.375rem 0 0.75rem;
    color: var(--rst-muted);
}

.rst-move {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--rst-move-edge);
    border-radius: 0.5rem;
    background: var(--rst-move-bg);
    color: var(--rst-move-ink);
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.rst-move .icon {
    flex: none;
    width: 1rem;
    height: 1rem;
}

.rst-move:hover:not(:disabled) {
    background: var(--rst-stepper-hover);
}

.rst-move:disabled {
    cursor: default;
}

.rst-move:active:not(:disabled) {
    scale: var(--press-scale);
    transition-duration: 200ms, var(--press-in);
}

.rst-lane__empty {
    margin: 0;
    padding: 0.375rem 0.25rem 1rem;
    text-align: center;
    color: var(--rst-muted);
}

/* ---- 3 and 4. The stock and the report ---- */

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

.rst-table th {
    padding: 0.625rem 0.75rem;
    background: var(--rst-th);
    color: var(--rst-th-ink);
}

.rst-table td {
    padding: 0.625rem 0.75rem;
    color: var(--rst-muted);
}

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

.rst-table__name {
    color: var(--rst-ink);
}

.rst-table__end {
    text-align: right;
}

.rst-stock--ok {
    color: var(--rst-ok);
}

.rst-stock--low {
    color: var(--rst-low);
}

.rst-metrics {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rst-metric {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    padding: 0.875rem 1rem;
    border: 1px solid var(--rst-line);
    border-radius: 0.625rem;
}

.rst-metric__label {
    color: var(--rst-muted);
}

.rst-metric__value {
    color: var(--rst-ink);
}

.rst-metric__note {
    color: var(--rst-ok);
}

.rst-chart {
    min-width: 0;
}

.rst-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    height: 9rem;
    margin: 0;
    padding: 0.5rem 0.1875rem 0;
    border-bottom: 1px solid var(--rst-baseline);
    list-style: none;
}

.rst-bar {
    flex: 1;
    min-width: 0.5rem;
    border-radius: 0.3125rem 0.3125rem 0 0;
    background: var(--rst-bar);
}

.rst-bar--peak {
    background: var(--rst-bar-peak);
}

.rst-bar--35 {
    height: 35%;
}

.rst-bar--43 {
    height: 43%;
}

.rst-bar--54 {
    height: 54%;
}

.rst-bar--60 {
    height: 60%;
}

.rst-bar--65 {
    height: 65%;
}

.rst-bar--69 {
    height: 69%;
}

.rst-bar--77 {
    height: 77%;
}

.rst-bar--79 {
    height: 79%;
}

.rst-bar--92 {
    height: 92%;
}

.rst-bar--100 {
    height: 100%;
}

.rst-chart__caption {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    color: var(--rst-muted);
}

/* what the controls are pressed in keep their own corners when the ring is drawn (site.css rounds the one that has the focus) */
.rst-btn:focus-visible {
    border-radius: 999px;
}

.rst-reset:focus-visible,
.rst-view:focus-visible,
.rst-stepper:focus-visible,
.rst-move:focus-visible {
    border-radius: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* What it covers: four things                                         */
/* ------------------------------------------------------------------ */

.rst-intro {
    max-width: 56rem;
}

.rst-intro .rst-lead {
    max-width: 40rem;
}

/* the four things it covers: four cards in a grid, each a drawing over its words (2026-10-30: asked for, "this section is bad,
   redesign it, you can use illustrations", after a list of four texts with nothing to look at). The drawing stands on a pale stage, a
   picture and not a photograph, decorative since the words under it say what it shows; the card has the room it needs inside itself and
   there are 20px between cards. One column, two from 48rem. */
.rst-caps {
    display: grid;
    gap: var(--gap-max);
    margin: var(--gap-max) 0 0;
    padding: 0;
    list-style: none;
}

.rst-cap {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--rst-card-edge);
    border-radius: 1.25rem;
    background: var(--rst-card);
    box-shadow: var(--rst-card-shadow);
    overflow: hidden;
}

.rst-cap__art {
    border-bottom: 1px solid var(--rst-card-edge);
    background: var(--rst-ill-stage);
}

.rst-cap__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1.25rem 1.25rem 1.5rem;
}

.rst-cap__label {
    color: var(--rst-eyebrow);
}

.rst-cap__name {
    margin: 0.25rem 0 0;
    color: var(--rst-ink);
}

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

/* what it includes: three pills, each with a tick, after the words (a card has three sizes of type: the tag, the heading and the body) */
.rst-cap__points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.rst-cap__points li {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.875rem 0.3125rem 0.5rem;
    border-radius: 999px;
    background: var(--rst-soft);
    color: var(--rst-soft-ink);
}

.rst-cap__points .icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--rst-blue);
}

/* the drawings: flat colour roles, which are tokens, so that both themes have them */
.rst-ill {
    display: block;
    width: 100%;
    height: auto;
}

.rst-ill-glow {
    fill: var(--rst-ill-glow);
}

.rst-ill-shadow {
    fill: var(--rst-ill-shadow);
}

.rst-ill-body {
    fill: var(--rst-ill-body);
}

.rst-ill-screen {
    fill: var(--rst-ill-screen);
}

.rst-ill-pale {
    fill: var(--rst-ill-pale);
}

.rst-ill-soft {
    fill: var(--rst-ill-soft);
}

.rst-ill-line {
    fill: var(--rst-ill-line);
}

.rst-ill-blue {
    fill: var(--rst-ill-blue);
}

.rst-ill-sky {
    fill: var(--rst-ill-sky);
}

.rst-ill-navy {
    fill: var(--rst-ill-navy);
}

.rst-ill-paper {
    fill: var(--rst-ill-paper);
}

.rst-ill-green {
    fill: var(--rst-ill-green);
}

.rst-ill-amber {
    fill: var(--rst-ill-amber);
}

.rst-ill-edge {
    stroke: var(--rst-ill-line);
}

.rst-ill-ring,
.rst-ill-stroke-paper {
    stroke: var(--rst-ill-paper);
}

.rst-ill-stroke-sky {
    stroke: var(--rst-ill-sky);
}

.rst-ill-stroke-navy {
    stroke: var(--rst-ill-navy);
}

.rst-ill-stroke-amber {
    stroke: var(--rst-ill-amber);
}

/* ------------------------------------------------------------------ */
/* The journey of an order, on a deep navy band                         */
/* ------------------------------------------------------------------ */

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

.rst-night__inner {
    display: grid;
    gap: var(--gap-max);
}

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

.rst-night__lead {
    margin: 0.75rem 0 0.25rem;
    max-width: 34rem;
    color: var(--rst-night-text);
    text-wrap: pretty;
}

.rst-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.rst-step {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    gap: 0 0.75rem;
    padding: 0;
}

.rst-step + .rst-step {
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--rst-night-line);
}

.rst-step__no {
    color: var(--rst-night-no);
    padding-top: 0.25rem;
}

.rst-step__name {
    margin: 0;
    color: #ffffff;
}

.rst-step__text {
    margin: 0.25rem 0 0;
    color: var(--rst-night-text);
}

/* ------------------------------------------------------------------ */
/* How it grows                                                        */
/* ------------------------------------------------------------------ */

.rst-growth {
    display: grid;
    gap: 0.75rem var(--gap-max);
    align-items: start;
}

.rst-growth__head,
.rst-growth__body {
    min-width: 0;
}

.rst-growth__body .rst-lead {
    margin-top: 0;
    max-width: 34rem;
}

.rst-details {
    margin: var(--gap-max) 0 0;
    padding: 0;
    list-style: none;
}

.rst-detail {
    display: flex;
    flex-direction: column;
    gap: 0.125rem 1.25rem;
}

.rst-detail + .rst-detail {
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--rst-line-strong);
}

.rst-detail__title {
    color: var(--rst-ink);
}

.rst-detail__text {
    color: var(--rst-muted);
}

/* ------------------------------------------------------------------ */
/* What it connects to                                                 */
/* ------------------------------------------------------------------ */

/* six names, each with a line under it as the design draws them; they are not links, so nothing is underlined as text */
.rst-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: var(--gap-max) 0 0;
    padding: 0;
    list-style: none;
}

.rst-tool {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--rst-line-strong);
    color: var(--rst-blue);
}

/* ------------------------------------------------------------------ */
/* Common questions                                                    */
/* ------------------------------------------------------------------ */

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

.rst-faq__head,
.rst-faq__list {
    min-width: 0;
}

.rst-faq__head .rst-lead {
    max-width: 24rem;
}

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

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

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

.rst-faq__question > span {
    min-width: 0;
}

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

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

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

.rst-faq__question:focus-visible {
    outline-offset: 2px;
}

.rst-faq__answer {
    padding: 0 2.5rem 0.75rem 0;
}

.rst-faq__answer p {
    margin: 0;
    max-width: 40rem;
    color: var(--rst-muted);
}

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

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

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

/* two rings of light in the card's top right corner, from 64rem, where the corner is clear of the words: they end above the button
   and its note, since a ring that crosses words puts a line of lighter blue behind them */
.rst-closing::before,
.rst-closing::after {
    content: "";
    display: none;
    position: absolute;
    z-index: -1;
    border: 1px solid var(--rst-closing-ring);
    border-radius: 50%;
    pointer-events: none;
}

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

/* its label is the light tint of the card's words: the band's light blue is 3.5:1 on this blue (the contrast measure found it) */
.rst-closing .rst-eyebrow--night {
    color: var(--rst-closing-eyebrow);
}

.rst-closing__title {
    margin: 0.5rem 0 0;
    color: #ffffff;
}

.rst-closing__text {
    margin: 0.75rem 0 0;
    max-width: 40rem;
    color: var(--rst-closing-text);
}

.rst-closing__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.rst-closing__note {
    margin: 0;
    color: var(--rst-closing-text);
}

/* ------------------------------------------------------------------ */
/* What each window holds, by its own width                            */
/* ------------------------------------------------------------------ */

/* the console: below 35.5rem its figures are rows (a name and its number: "KES 184.6k" does not fit a third of less), and its tabs and orders
   give up room */
@container rst-console (max-width: 35.5rem) {
    .rst-stats {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .rst-stat {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        padding: 0.5rem 0.875rem;
    }

    .rst-console__bar,
    .rst-console__tabs,
    .rst-stats,
    .rst-console__top,
    .rst-order,
    .rst-console__foot {
        padding-inline: 1rem;
    }

    .rst-console__tabs {
        gap: 0 1rem;
    }

    .rst-order {
        grid-template-columns: 3rem minmax(0, 1fr) auto;
    }
}

/* the sample: from 36rem its figures are cards side by side and its table has its category */
@container rst-ws (max-width: 35.99rem) {
    .rst-table__category {
        display: none;
    }
}

/* the bill: from 24rem of its own width a dish, its steppers and its sum are one line, as the design draws them; below it the steppers
   are under the sum (a dish's name, three buttons and a sum do not share a line of 250px) */
@container rst-bill (min-width: 24rem) {
    .rst-row {
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas: "words qty sum";
    }

    .rst-row__sum {
        min-width: 5.5rem;
    }
}

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

    .rst-ws__bar {
        padding: 0.875rem 1.25rem;
    }
}

/* from 40rem the four views are a side at the left of the work */
@container rst-ws (min-width: 40rem) {
    .rst-ws__layout {
        grid-template-columns: 13.5rem minmax(0, 1fr);
    }

    .rst-ws__side {
        padding: 1.25rem 0.75rem;
        border-right: 1px solid var(--rst-side-edge);
        border-bottom: 0;
    }

    .rst-views {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0.375rem;
    }

    .rst-view {
        width: 100%;
    }

    .rst-ws__note {
        display: block;
        margin-top: 0.5rem;
        padding: 0.625rem 0.75rem 0;
        border-top: 1px solid var(--rst-side-edge);
    }

    .rst-ws__main {
        padding: 1.5rem 1.5rem 1.5rem;
    }
}

/* from 56rem the menu and the order are side by side, and the kitchen's three lanes in a row */
@container rst-ws (min-width: 56rem) {
    .rst-pos {
        grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.73fr);
        align-items: start;
    }

    .rst-lanes {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
    }

    .rst-lane {
        min-height: 13rem;
    }
}

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

/* a page without a script has the four views one after another; where a script will make the choice, only the first, until it has
   (the markup has no `hidden` on them, which a page without a script could not undo) */
@media (scripting: enabled) {
    [data-tabs]:not(.is-ready) .rst-pane ~ .rst-pane {
        display: none;
    }
}

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

@media (prefers-contrast: more) {
    .rst-hero__art::before,
    .rst-hero__art::after,
    .rst-closing::before,
    .rst-closing::after {
        display: none;
    }

    .rst-console,
    .rst-ws,
    .rst-card,
    .rst-cap,
    .rst-cap__art,
    .rst-stat,
    .rst-bill,
    .rst-lane,
    .rst-ticket,
    .rst-metric,
    .rst-stepper,
    .rst-move,
    .rst-pay__option,
    .rst-reset,
    .rst-btn--quiet {
        border-color: var(--md-outline);
    }

    .rst-detail + .rst-detail,
    .rst-faq__item + .rst-faq__item,
    .rst-tool,
    .rst-strip,
    .rst-order + .rst-order,
    .rst-dish:not([hidden]) ~ .rst-dish:not([hidden]),
    .rst-row:not([hidden]) ~ .rst-row:not([hidden]),
    .rst-table tbody tr + tr td {
        border-color: var(--md-outline);
    }
}

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

/* As the page opens the hero's words settle (the title and the lead only rise, so that they are painted at once), the rest comes in
   after them, and the console last. A view that is chosen comes up in its place, and a ticket that arrives in a lane. */
@media (prefers-reduced-motion: no-preference) {
    .rst-hero__title,
    .rst-hero__lead {
        animation: hero-settle var(--spring-slow) var(--ease-spring) both;
    }

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

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

    .rst-hero__actions {
        animation-delay: 120ms;
    }

    .rst-notes {
        animation-delay: 180ms;
    }

    .rst-console {
        animation: hero-enter var(--spring-slow) var(--ease-spring) 160ms both;
    }

    .rst-card {
        animation: hero-enter var(--spring-slow) var(--ease-spring) 280ms both;
    }

    .rst-pane:not([hidden]) > :not(.rst-pane__head),
    .rst-ticket {
        animation: rst-swap var(--spring) var(--ease-spring) both;
    }
}

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

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

    .rst-hero__art::before,
    .rst-hero__art::after,
    .rst-closing::before,
    .rst-closing::after {
        display: none;
    }

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

    .rst-title--night,
    .rst-night__lead,
    .rst-step__name,
    .rst-step__text,
    .rst-closing__title,
    .rst-closing__text,
    .rst-closing__note {
        color: inherit;
    }
}

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

@media (min-width: 40rem) {
    .rst-ws__bar {
        padding-inline: 1.25rem;
    }

    .rst-closing {
        padding: 2rem;
    }

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

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

@media (min-width: 48rem) {
    /* a heading beside what it heads, and the label of the sample at the right of its heading */
    .rst-head {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .rst-demotag {
        align-items: flex-end;
        text-align: right;
    }

    /* two columns of things it covers */
    .rst-caps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rst-detail {
        flex-direction: row;
        align-items: baseline;
    }

    .rst-detail__title {
        flex: 0 0 11rem;
    }
}

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

@media (min-width: 64rem) {
    /* the words at the left, the console at the right on its wash, which starts at the column's edge and runs to the window's */
    .rst-hero__inner {
        grid-template-columns: minmax(0, 0.47fr) minmax(0, 0.53fr);
        align-items: stretch;
    }

    .rst-hero__words {
        align-self: center;
        padding-block: 1rem var(--gap-max);
        padding-right: var(--gap-max);
    }

    .rst-hero__art {
        padding-block: 3rem 2.5rem;
        padding-left: 1rem;
    }

    .rst-hero__art::before {
        left: 0;
    }

    .rst-caption {
        position: absolute;
        top: 1.25rem;
        right: 0;
        margin: 0;
    }

    .rst-strip__inner {
        padding-block: 1rem;
    }

    .rst-strip__list {
        margin-left: auto;
        justify-content: flex-end;
    }

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

    .rst-night__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
        gap: var(--gap-max);
        align-items: start;
    }

    .rst-growth {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--gap-max);
    }

    .rst-growth__body .rst-lead {
        margin-top: 0.25rem;
    }

    .rst-faq {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: var(--gap-max);
    }

    .rst-closing {
        grid-template-columns: minmax(0, 1fr) auto;
        padding: 2.25rem 2.5rem;
    }

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

    .rst-closing::before {
        top: -12.5rem;
        right: -5rem;
        width: 17rem;
        height: 17rem;
    }

    .rst-closing::after {
        top: -9rem;
        right: -1rem;
        width: 13rem;
        height: 13rem;
    }
}

/* ------------------------------------------------------------------ */
/* From 80rem                                                          */
/* ------------------------------------------------------------------ */

@media (min-width: 80rem) {
    .rst-hero__inner {
        grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr);
    }
}