/* The FoodToGo page (services/pages/foodtogo.html), after its own design (2026-10-30: asked for, "Foodtogo page, but make the colours
   blue as the rest of the pages", with FoodToGo_Editorial_Standalone_20261030.html). Until then the page was drawn to the landing design
   (a hero with two phones, who it is for, what you get, what it does, what it connects to, the questions and a closing band) and the
   landing stylesheet drew it; this stylesheet is the new design's, and the pictures of the old one are left, unused.

   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 91px at a tracking of -0.065em, its sample in 9 to 13px, 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 plate 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 three views, its bag, its kitchen and its delivery) 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 roles, the questions 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 .ftg; its
   colours are the --ftg-* 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 service pages are (the design's greens, its lime and its coral are the company's
   to ask for): the deep navy band and the closing card are deep blue on both themes, and the green and the amber are what a status says. */
:root {
    --ftg-surface: #ffffff;
    /* the text: headings and body text in typography.md's primary colour, small text in its secondary */
    --ftg-ink: var(--text-primary);
    --ftg-muted: var(--text-secondary);
    --ftg-eyebrow: #0a4ce9;
    --ftg-blue: #0154e5;
    --ftg-blue-hover: #0043bd;
    --ftg-on-blue: #ffffff;
    --ftg-soft: #e8f1ff;
    --ftg-soft-ink: #0a3fb8;
    --ftg-edge: #cbdcff;
    --ftg-line: #e3e9f0;
    --ftg-line-strong: #d3deec;
    --ftg-wash: #f4f8fd;
    --ftg-crumb-chevron: #8790a8;
    --ftg-dot: #17b982;
    --ftg-dot-ring: rgb(23 185 130 / 0.16);
    /* the hero: a pale ground, and a blue sun (two discs) behind the plate */
    --ftg-hero-bg: linear-gradient(105deg, #fcfdff 0%, #f6f9ff 55%, #eef4fe 100%);
    --ftg-sun: #c9dcfb;
    --ftg-sun-soft: #e3edfe;
    /* the band of three phrases */
    --ftg-band-bg: #dbe8fd;
    --ftg-band-ink: #0a2a6b;
    --ftg-band-mark: #0154e5;
    /* the windows and cards on the page */
    --ftg-card: #ffffff;
    --ftg-card-edge: #dbe5f3;
    --ftg-window-shadow: 0 28px 64px rgb(15 62 139 / 0.18), 0 6px 16px rgb(20 50 95 / 0.09);
    --ftg-float-shadow: 0 20px 46px rgb(15 62 139 / 0.2), 0 4px 12px rgb(20 50 95 / 0.08);
    --ftg-k: linear-gradient(135deg, #0675ef, #3626d6);
    --ftg-tour-bg: #f2f6fb;
    /* the sample's side, deep blue on both themes, and what is chosen in it */
    --ftg-side: #0f2851;
    --ftg-side-ink: #e6eefc;
    --ftg-side-muted: #a9bddd;
    --ftg-side-on: #d3e3fd;
    --ftg-side-on-ink: #0b2a63;
    --ftg-side-hover: rgb(255 255 255 / 0.1);
    --ftg-bar-line: #e6ebf3;
    --ftg-tile: #e8f1ff;
    --ftg-add: #e8f1ff;
    --ftg-add-edge: #b8cdf2;
    --ftg-add-hover: #d3e3fd;
    --ftg-bag: #f6f9fd;
    --ftg-bag-edge: #e3e9f2;
    --ftg-count-bg: #d3e3fd;
    --ftg-count-ink: #0a3fb8;
    --ftg-stepper-bg: #ffffff;
    --ftg-stepper-edge: #b8cdf2;
    --ftg-stepper-hover: #e8f1ff;
    --ftg-ticket-edge: #dfe7f2;
    --ftg-move-bg: #edf3ff;
    --ftg-move-edge: #c3d4f3;
    --ftg-move-ink: #0a3fb8;
    --ftg-empty-bg: #f8fafd;
    --ftg-empty-edge: #c9d8ee;
    --ftg-disabled-bg: #66758c;
    --ftg-disabled-ink: #ffffff;
    /* the route in the rider's view: a pale map, a dotted way, three places */
    --ftg-route-bg: linear-gradient(135deg, #dbe8fd, #eef4fd);
    --ftg-route-road: rgb(255 255 255 / 0.75);
    --ftg-route-way: #0154e5;
    --ftg-node: #0f2851;
    --ftg-node-rider: #0154e5;
    --ftg-node-ink: #ffffff;
    --ftg-route-cap: rgb(255 255 255 / 0.9);
    /* what a status says */
    --ftg-pending: #8a5200;
    --ftg-pending-bg: #fff4e0;
    --ftg-ready: #0b7a57;
    --ftg-ready-bg: #e4f6ee;
    /* the big numbers of the three roles: large text, so 3:1 is the least */
    --ftg-big: #5b86d6;
    --ftg-pill-bg: #eef3fb;
    --ftg-pill-edge: #d3deec;
    /* the deep navy band of what a restaurant gains */
    --ftg-night: #0f2851;
    --ftg-night-text: #d4dfef;
    --ftg-night-line: #496183;
    --ftg-night-eyebrow: #9cbbf7;
    --ftg-night-accent: #9cbbf7;
    --ftg-night-light: #d3e3fd;
    --ftg-night-light-hover: #e8f1ff;
    --ftg-night-light-ink: #0b2a63;
    /* the closing call: a blue card with two arcs of light */
    --ftg-closing: linear-gradient(120deg, #0c43c2, #0757ed);
    --ftg-closing-text: #dce8ff;
    --ftg-closing-eyebrow: #dce8ff;
    --ftg-closing-ring: rgb(255 255 255 / 0.15);
    --ftg-closing-shadow: 0 24px 50px rgb(10 48 156 / 0.22);
    --ftg-white-ink: #0643be;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ftg-surface: #131314;
        --ftg-eyebrow: #a8c7fa;
        --ftg-blue: #a8c7fa;
        --ftg-blue-hover: #c2d7fb;
        --ftg-on-blue: #062e6f;
        --ftg-soft: rgb(168 199 250 / 0.14);
        --ftg-soft-ink: #a8c7fa;
        --ftg-edge: rgb(168 199 250 / 0.3);
        --ftg-line: rgb(255 255 255 / 0.1);
        --ftg-line-strong: rgb(255 255 255 / 0.18);
        --ftg-wash: #17181b;
        --ftg-crumb-chevron: #7f889c;
        --ftg-dot: #4cd9a0;
        --ftg-dot-ring: rgb(76 217 160 / 0.2);
        --ftg-hero-bg: linear-gradient(105deg, #14161a 0%, #131314 55%, #121722 100%);
        --ftg-sun: #1a2b4b;
        --ftg-sun-soft: #15213a;
        --ftg-band-bg: #172742;
        --ftg-band-ink: #d3e3fd;
        --ftg-band-mark: #a8c7fa;
        --ftg-card: #1c1f25;
        --ftg-card-edge: rgb(255 255 255 / 0.12);
        --ftg-window-shadow: 0 28px 64px rgb(0 0 0 / 0.55);
        --ftg-float-shadow: 0 20px 46px rgb(0 0 0 / 0.55);
        --ftg-tour-bg: #161719;
        --ftg-side: #0a1a36;
        --ftg-side-on: #a8c7fa;
        --ftg-side-on-ink: #062e6f;
        --ftg-bar-line: rgb(255 255 255 / 0.09);
        --ftg-tile: #262b33;
        --ftg-add: rgb(168 199 250 / 0.12);
        --ftg-add-edge: rgb(168 199 250 / 0.4);
        --ftg-add-hover: rgb(168 199 250 / 0.24);
        --ftg-bag: #1e2227;
        --ftg-bag-edge: rgb(255 255 255 / 0.1);
        --ftg-count-bg: rgb(255 255 255 / 0.1);
        --ftg-count-ink: #c3d4ec;
        --ftg-stepper-bg: #1c1f25;
        --ftg-stepper-edge: rgb(168 199 250 / 0.4);
        --ftg-stepper-hover: rgb(168 199 250 / 0.2);
        --ftg-ticket-edge: rgb(255 255 255 / 0.12);
        --ftg-move-bg: rgb(168 199 250 / 0.12);
        --ftg-move-edge: rgb(168 199 250 / 0.35);
        --ftg-move-ink: #c2d7fb;
        --ftg-empty-bg: #1a1d22;
        --ftg-empty-edge: rgb(255 255 255 / 0.2);
        --ftg-disabled-bg: #4c5666;
        --ftg-disabled-ink: #c8d0dc;
        --ftg-route-bg: linear-gradient(135deg, #1b2a47, #16213a);
        --ftg-route-road: rgb(255 255 255 / 0.07);
        --ftg-route-way: #a8c7fa;
        --ftg-node: #3a5486;
        --ftg-node-rider: #4d8bf5;
        --ftg-route-cap: rgb(19 20 24 / 0.88);
        --ftg-pending: #f2c46d;
        --ftg-pending-bg: rgb(242 196 109 / 0.14);
        --ftg-ready: #7fe0b2;
        --ftg-ready-bg: rgb(109 213 168 / 0.14);
        --ftg-big: #5575b0;
        --ftg-pill-bg: rgb(255 255 255 / 0.07);
        --ftg-pill-edge: rgb(255 255 255 / 0.16);
        --ftg-night: #08182f;
        --ftg-closing: linear-gradient(120deg, #0a3496, #0a46c9);
        --ftg-closing-shadow: 0 24px 50px rgb(0 0 0 / 0.4);
    }
}

:root[data-theme="dark"] {
    --ftg-surface: #131314;
    --ftg-eyebrow: #a8c7fa;
    --ftg-blue: #a8c7fa;
    --ftg-blue-hover: #c2d7fb;
    --ftg-on-blue: #062e6f;
    --ftg-soft: rgb(168 199 250 / 0.14);
    --ftg-soft-ink: #a8c7fa;
    --ftg-edge: rgb(168 199 250 / 0.3);
    --ftg-line: rgb(255 255 255 / 0.1);
    --ftg-line-strong: rgb(255 255 255 / 0.18);
    --ftg-wash: #17181b;
    --ftg-crumb-chevron: #7f889c;
    --ftg-dot: #4cd9a0;
    --ftg-dot-ring: rgb(76 217 160 / 0.2);
    --ftg-hero-bg: linear-gradient(105deg, #14161a 0%, #131314 55%, #121722 100%);
    --ftg-sun: #1a2b4b;
    --ftg-sun-soft: #15213a;
    --ftg-band-bg: #172742;
    --ftg-band-ink: #d3e3fd;
    --ftg-band-mark: #a8c7fa;
    --ftg-card: #1c1f25;
    --ftg-card-edge: rgb(255 255 255 / 0.12);
    --ftg-window-shadow: 0 28px 64px rgb(0 0 0 / 0.55);
    --ftg-float-shadow: 0 20px 46px rgb(0 0 0 / 0.55);
    --ftg-tour-bg: #161719;
    --ftg-side: #0a1a36;
    --ftg-side-on: #a8c7fa;
    --ftg-side-on-ink: #062e6f;
    --ftg-bar-line: rgb(255 255 255 / 0.09);
    --ftg-tile: #262b33;
    --ftg-add: rgb(168 199 250 / 0.12);
    --ftg-add-edge: rgb(168 199 250 / 0.4);
    --ftg-add-hover: rgb(168 199 250 / 0.24);
    --ftg-bag: #1e2227;
    --ftg-bag-edge: rgb(255 255 255 / 0.1);
    --ftg-count-bg: rgb(255 255 255 / 0.1);
    --ftg-count-ink: #c3d4ec;
    --ftg-stepper-bg: #1c1f25;
    --ftg-stepper-edge: rgb(168 199 250 / 0.4);
    --ftg-stepper-hover: rgb(168 199 250 / 0.2);
    --ftg-ticket-edge: rgb(255 255 255 / 0.12);
    --ftg-move-bg: rgb(168 199 250 / 0.12);
    --ftg-move-edge: rgb(168 199 250 / 0.35);
    --ftg-move-ink: #c2d7fb;
    --ftg-empty-bg: #1a1d22;
    --ftg-empty-edge: rgb(255 255 255 / 0.2);
    --ftg-disabled-bg: #4c5666;
    --ftg-disabled-ink: #c8d0dc;
    --ftg-route-bg: linear-gradient(135deg, #1b2a47, #16213a);
    --ftg-route-road: rgb(255 255 255 / 0.07);
    --ftg-route-way: #a8c7fa;
    --ftg-node: #3a5486;
    --ftg-node-rider: #4d8bf5;
    --ftg-route-cap: rgb(19 20 24 / 0.88);
    --ftg-pending: #f2c46d;
    --ftg-pending-bg: rgb(242 196 109 / 0.14);
    --ftg-ready: #7fe0b2;
    --ftg-ready-bg: rgb(109 213 168 / 0.14);
    --ftg-big: #5575b0;
    --ftg-pill-bg: rgb(255 255 255 / 0.07);
    --ftg-pill-edge: rgb(255 255 255 / 0.16);
    --ftg-night: #08182f;
    --ftg-closing: linear-gradient(120deg, #0a3496, #0a46c9);
    --ftg-closing-shadow: 0 24px 50px rgb(0 0 0 / 0.4);
}

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

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

/* H3 (28px, 500): the three phrases of the band */
.ftg-band__phrase {
    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 */
.ftg-card__title,
.ftg-side__name strong,
.ftg-benefit__title,
.ftg-faq__question,
.ftg-sums__row--total dt,
.ftg-sums__row--total dd,
.ftg-k {
    font-family: var(--font-sans);
    font-size: var(--fs-h4);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h4);
    letter-spacing: 0;
}

/* Stat: mono 700 (the figures of the kitchen, the big numbers of the roles) */
.ftg-stat__value,
.ftg-role__big {
    font-family: var(--font-mono);
    font-size: var(--fs-stat);
    font-weight: var(--fw-bold);
    line-height: var(--lh-stat);
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* Body: sans 400 (and what is typed or chosen: 16px) */
.ftg-lead,
.ftg-hero__lead,
.ftg-night__lead,
.ftg-role__text,
.ftg-benefit__text,
.ftg-detail__text,
.ftg-closing__text,
.ftg-faq__answer,
.ftg-say,
.ftg-select {
    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 */
.ftg-hero__notes,
.ftg-caption,
.ftg-card__line > span,
.ftg-card__foot > span,
.ftg-pane__text,
.ftg-side__note,
.ftg-dish__line,
.ftg-bag__empty,
.ftg-bag__hint,
.ftg-sums__row dt,
.ftg-stat__label,
.ftg-empty__text,
.ftg-ticket__meta,
.ftg-handover__text,
.ftg-delivery__text,
.ftg-delivery__note,
.ftg-route__cap > span,
.ftg-demo__note,
.ftg-closing__note {
    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, prices and sums, the orders' numbers and buttons) */
.ftg-card__line > strong,
.ftg-view,
.ftg-cat,
.ftg-flag,
.ftg-dish__name,
.ftg-dish__price,
.ftg-add,
.ftg-count,
.ftg-mine,
.ftg-mine strong,
.ftg-row__name,
.ftg-row__sum,
.ftg-qty__n,
.ftg-sums__row dd,
.ftg-status,
.ftg-move,
.ftg-reset,
.ftg-route__cap > strong,
.ftg-tags__item,
.ftg-pill {
    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 */
.ftg-btn,
.ftg-crumbs__list,
.ftg-link,
.ftg-inline {
    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 */
.ftg-eyebrow,
.ftg-tag,
.ftg-view__no,
.ftg-bar__crumb strong {
    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 */
.ftg {
    background: var(--ftg-surface);
    color: var(--ftg-ink);
    overflow-wrap: anywhere;
}

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

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

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

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

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

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

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

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

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

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

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

.ftg-line {
    display: block;
}

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

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

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

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

.ftg-link > span,
.ftg-inline > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

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

/* a link that is a button in a view of the sample: no border or ground of its own */
.ftg-inline {
    gap: 0.375rem;
}

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

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

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

.ftg-pulse--small {
    width: 0.375rem;
    height: 0.375rem;
    box-shadow: 0 0 0 3px var(--ftg-dot-ring);
}

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

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

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

.ftg-head .ftg-lead {
    margin: 0;
    max-width: 26rem;
}

/* paragraphs that are rows of their own words are as wide as their rows, not as the base's 70ch */
.ftg-hero__notes,
.ftg-caption,
.ftg-card__label,
.ftg-card__line,
.ftg-card__foot,
.ftg-index__line,
.ftg-micro,
.ftg-pane__text,
.ftg-side__note,
.ftg-side__label,
.ftg-side__live,
.ftg-bar__crumb,
.ftg-bar__live,
.ftg-bag__empty,
.ftg-bag__hint,
.ftg-bag__label,
.ftg-bag__sample,
.ftg-stat__label,
.ftg-empty__text,
.ftg-ticket__label,
.ftg-ticket__meta,
.ftg-handover__text,
.ftg-delivery__text,
.ftg-delivery__note,
.ftg-route__cap,
.ftg-demo__note,
.ftg-say,
.ftg-role__no,
.ftg-role__text,
.ftg-benefit__text,
.ftg-detail__no,
.ftg-detail__text,
.ftg-night__lead,
.ftg-closing__text,
.ftg-closing__note,
.ftg-flag,
.ftg-mine {
    max-width: none;
}

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

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

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

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

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

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

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

/* on the deep band: a pale blue pill */
.ftg-btn--light {
    background: var(--ftg-night-light);
    color: var(--ftg-night-light-ink);
}

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

.ftg-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 */
.ftg-btn[aria-disabled="true"],
.ftg-btn:disabled {
    background: var(--ftg-disabled-bg);
    color: var(--ftg-disabled-ink);
    box-shadow: none;
    cursor: not-allowed;
}

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

    .ftg-btn:hover:not([aria-disabled="true"], :disabled) .ftg-icon--arrow-right {
        translate: 3px 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* four words and a dot, as the design has them under its buttons */
.ftg-hero__notes {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 1rem 0 0;
    color: var(--ftg-muted);
}

.ftg-hero__notes .ftg-dot {
    background: var(--ftg-blue);
}

/* the picture: a drawn plate of food on a blue sun (two discs, which run to the window's edge: the hero clips them), a card of a
   sample order over its corner, which is a picture of an interface */
.ftg-hero__art {
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    min-width: 0;
    padding-block: 1rem 7.5rem;
}

.ftg-hero__art::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: -1rem;
    right: -9rem;
    width: 24rem;
    height: 24rem;
    border-radius: 50%;
    background: var(--ftg-sun);
}

.ftg-hero__art::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: 0;
    bottom: 0.5rem;
    width: 13rem;
    height: 13rem;
    border-radius: 50%;
    background: var(--ftg-sun-soft);
}

.ftg-plate {
    display: block;
    width: min(100%, 34rem);
    height: auto;
    rotate: -8deg;
}

.ftg-card {
    position: absolute;
    bottom: 1.75rem;
    left: 0;
    width: min(21rem, 92%);
    padding: 1rem;
    border: 1px solid var(--ftg-card-edge);
    border-radius: 0.875rem;
    background: var(--ftg-card);
    box-shadow: var(--ftg-float-shadow);
}

.ftg-card__top {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

/* the product's mark: a tile with its letter, in the blue gradient of the site's K */
.ftg-k {
    display: grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
    background: var(--ftg-k);
    color: #ffffff;
}

.ftg-card__label {
    flex: 1;
    min-width: 0;
    color: var(--ftg-muted);
}

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

.ftg-card__tick .icon {
    width: 0.875rem;
    height: 0.875rem;
}

.ftg-card__title {
    margin: 0.75rem 0 0.25rem;
    color: var(--ftg-ink);
}

.ftg-card__line,
.ftg-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0;
    color: var(--ftg-muted);
}

.ftg-card__line > strong {
    flex: none;
    color: var(--ftg-ink);
}

.ftg-card__foot {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ftg-line-strong);
}

.ftg-card__go {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--ftg-soft);
    color: var(--ftg-blue);
}

.ftg-card__go .icon {
    width: 1rem;
    height: 1rem;
}

.ftg-caption {
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 0;
    color: var(--ftg-muted);
    text-align: end;
}

/* the strip at the hero's foot: a line, and a link to the next section */
.ftg-index {
    position: relative;
}

.ftg-index__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--gap-max);
    border-top: 1px solid var(--ftg-line-strong);
}

.ftg-index__line {
    margin: 0;
    color: var(--ftg-muted);
}

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

.ftg-index__scroll:hover {
    color: var(--ftg-blue);
}

/* ------------------------------------------------------------------ */
/* Why FoodToGo                                                        */
/* ------------------------------------------------------------------ */

.ftg-story {
    display: grid;
    gap: 0.5rem var(--gap-max);
}

.ftg-story__label {
    margin: 0;
}

.ftg-story__body {
    min-width: 0;
}

.ftg-story .ftg-lead {
    max-width: 40rem;
}

.ftg-story .ftg-link {
    margin-top: 0.25rem;
}

/* ------------------------------------------------------------------ */
/* Three phrases on a pale blue band                                   */
/* ------------------------------------------------------------------ */

.ftg-band {
    margin-top: var(--gap-max);
    padding-block: 0.875rem;
    background: var(--ftg-band-bg);
    color: var(--ftg-band-ink);
}

.ftg-band__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.25rem 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ftg-band__item {
    display: inline-flex;
    align-items: center;
    gap: 1.25rem;
}

.ftg-band__mark {
    display: inline-flex;
    color: var(--ftg-band-mark);
}

.ftg-band__mark .icon {
    width: 1.375rem;
    height: 1.375rem;
}

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

.ftg-tour {
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    background: var(--ftg-tour-bg);
}

/* the window: a size container, so that what it holds follows its own width and not the page's */
.ftg-demo {
    container: ftg-window / inline-size;
    margin-top: var(--gap-max);
    border: 1px solid var(--ftg-card-edge);
    border-radius: 1.125rem;
    background: var(--ftg-card);
    box-shadow: var(--ftg-window-shadow);
    overflow: clip;
}

/* what holds the window and what is under it, and is the root of the script's work */
.ftg-sample {
    min-width: 0;
}

.ftg-demo__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

/* the side: deep blue; over the work on a small window (only the choice of a view), a column at its left from 44rem */
.ftg-side {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--ftg-side);
    color: var(--ftg-side-ink);
}

.ftg-side__brand,
.ftg-side__label,
.ftg-side__live,
.ftg-side__note {
    display: none;
}

.ftg-side__brand {
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}

.ftg-side__name {
    display: grid;
    min-width: 0;
}

.ftg-side__name strong {
    color: #ffffff;
}

.ftg-side__name .ftg-tag,
.ftg-side__label {
    color: var(--ftg-side-muted);
}

.ftg-side__live {
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--ftg-side-ink);
}

.ftg-side__note {
    margin: 0;
    color: var(--ftg-side-muted);
}

.ftg-views {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
}

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

.ftg-view__no {
    flex: none;
    opacity: 0.8;
}

.ftg-view__name {
    min-width: 0;
}

.ftg-view .icon {
    display: none;
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-left: auto;
}

.ftg-view:hover {
    background: var(--ftg-side-hover);
    color: #ffffff;
}

/* the view that is chosen (aria-selected is the script's: a page without one has none chosen) */
.ftg-view[aria-selected="true"] {
    background: var(--ftg-side-on);
    color: var(--ftg-side-on-ink);
}

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

.ftg-view:focus-visible {
    outline-offset: -2px;
}

/* the views, one after another where no script chooses, ruled apart */
.ftg-main {
    min-width: 0;
}

.ftg-pane {
    min-width: 0;
}

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

.ftg-pane:focus-visible {
    outline-offset: -2px;
}

/* the bar over a view: where it is, and that it is a preview */
.ftg-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 var(--gap-max);
    min-height: 3rem;
    padding: 0.25rem 1rem;
    border-bottom: 1px solid var(--ftg-bar-line);
}

.ftg-bar__crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 0.5rem;
    margin: 0;
    color: var(--ftg-muted);
}

.ftg-bar__crumb strong {
    color: var(--ftg-ink);
}

.ftg-bar__slash {
    color: var(--ftg-muted);
}

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

.ftg-pane__body {
    display: grid;
    gap: var(--gap-max);
    padding: 1rem;
}

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

.ftg-pane__head > div {
    min-width: 0;
}

.ftg-micro {
    color: var(--ftg-eyebrow);
}

.ftg-pane__title {
    margin: 0.25rem 0 0;
    color: var(--ftg-ink);
}

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

/* a pill beside a view's title: where the sample is, a mode */
.ftg-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--ftg-line-strong);
    border-radius: 999px;
    color: var(--ftg-muted);
}

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

.ftg-flag--live {
    color: var(--ftg-ready);
    border-color: var(--ftg-ready-bg);
}

/* the customer's own order, over the menu once there is one */
.ftg-mine {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin: 0;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--ftg-ready-bg);
    border-radius: 0.625rem;
    background: var(--ftg-ready-bg);
    color: var(--ftg-ink);
}

.ftg-mine__total {
    margin-left: auto;
    color: var(--ftg-ready);
}

/* ---- 1. The customer's view: the menu and the bag ---- */

.ftg-shop {
    display: grid;
    gap: var(--gap-max);
}

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

.ftg-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ftg-cat {
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--ftg-line-strong);
    border-radius: 999px;
    background: var(--ftg-surface);
    color: var(--ftg-muted);
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), color 200ms var(--ease-standard),
        border-color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.ftg-cat:hover {
    border-color: var(--ftg-edge);
    background: var(--ftg-soft);
    color: var(--ftg-soft-ink);
}

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

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

.ftg-dishes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: 0.625rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.ftg-dish {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    min-width: 0;
    padding: 0.75rem;
    border: 1px solid var(--ftg-card-edge);
    border-radius: 0.75rem;
    background: var(--ftg-card);
}

/* a dish is drawn on a pale tile (the design's are warm, one for each); the drawing is a line in the blue */
.ftg-dish__art {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    border-radius: 0.625rem;
    background: var(--ftg-tile);
    color: var(--ftg-blue);
}

.ftg-dish__art .icon {
    width: 2rem;
    height: 2rem;
}

.ftg-dish__words {
    display: grid;
    gap: 0.125rem;
    min-width: 0;
}

.ftg-dish__name {
    color: var(--ftg-ink);
}

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

.ftg-dish__price {
    color: var(--ftg-ink);
}

.ftg-add {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--ftg-add-edge);
    border-radius: 50%;
    background: var(--ftg-add);
    color: var(--ftg-soft-ink);
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.ftg-add:hover {
    background: var(--ftg-add-hover);
}

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

.ftg-bag {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--ftg-bag-edge);
    border-radius: 0.875rem;
    background: var(--ftg-bag);
}

.ftg-bag__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.ftg-bag__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--ftg-ink);
}

.ftg-count {
    min-width: 1.5rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--ftg-count-bg);
    color: var(--ftg-count-ink);
    text-align: center;
}

.ftg-bag__sample {
    margin: 0;
    color: var(--ftg-muted);
}

.ftg-bag__rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* a list with none of its rows to show takes no room, nor the gap round it */
.ftg-bag__rows:not(:has(.ftg-row:not([hidden]))) {
    display: none;
}

.ftg-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    align-items: center;
    padding-block: 0.375rem;
}

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

.ftg-row__words {
    display: grid;
    min-width: 0;
}

.ftg-row__name {
    color: var(--ftg-ink);
}

.ftg-row__sum {
    color: var(--ftg-muted);
}

.ftg-qty {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.ftg-qty__n {
    min-width: 1.25rem;
    text-align: center;
}

.ftg-stepper {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--ftg-stepper-edge);
    border-radius: 50%;
    background: var(--ftg-stepper-bg);
    color: var(--ftg-soft-ink);
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.ftg-stepper:hover {
    background: var(--ftg-stepper-hover);
}

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

.ftg-stepper .icon {
    width: 1rem;
    height: 1rem;
}

.ftg-bag__empty {
    display: grid;
    margin: 0;
    color: var(--ftg-muted);
}

.ftg-bag__line {
    display: block;
}

.ftg-sums {
    display: grid;
    gap: 0.375rem;
    margin: 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ftg-line-strong);
}

.ftg-sums__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.ftg-sums__row dt,
.ftg-sums__row dd {
    margin: 0;
}

.ftg-sums__row dt {
    color: var(--ftg-muted);
}

.ftg-sums__row dd {
    color: var(--ftg-ink);
}

.ftg-sums__row--total {
    margin-top: 0.25rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--ftg-line-strong);
}

.ftg-sums__row--total dt,
.ftg-sums__row--total dd {
    color: var(--ftg-ink);
}

.ftg-bag__label {
    margin: 0.25rem 0 0;
    color: var(--ftg-muted);
}

.ftg-select {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ftg-line-strong);
    border-radius: 0.5rem;
    background: var(--ftg-surface);
    color: var(--ftg-ink);
}

.ftg-bag__hint {
    margin: 0;
    color: var(--ftg-muted);
}

/* ---- 2. The restaurant's view: the figures and the one order ---- */

.ftg-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0 0 1rem;
    list-style: none;
    border-bottom: 1px solid var(--ftg-line);
}

.ftg-stat {
    display: grid;
    align-content: start;
    gap: 0.25rem;
    min-width: 0;
    padding-left: 0.75rem;
    border-left: 1px solid var(--ftg-line);
}

.ftg-stat:first-child {
    padding-left: 0;
    border-left: 0;
}

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

.ftg-stat__value {
    color: var(--ftg-ink);
}

.ftg-orders {
    min-width: 0;
}

/* a view with nothing in it: a dashed card and the way to make something, which is a link to the customer's view */
.ftg-empty {
    display: grid;
    justify-items: start;
    gap: 0.25rem;
    padding: 1.25rem;
    border: 1px dashed var(--ftg-empty-edge);
    border-radius: 0.75rem;
    background: var(--ftg-empty-bg);
}

.ftg-empty__mark {
    display: inline-flex;
    color: var(--ftg-blue);
}

.ftg-empty__mark .icon {
    width: 1.5rem;
    height: 1.5rem;
}

.ftg-empty__title {
    margin: 0.25rem 0 0;
    color: var(--ftg-ink);
}

.ftg-empty__text {
    margin: 0;
    color: var(--ftg-muted);
}

.ftg-ticket {
    display: grid;
    gap: 0.75rem var(--gap-max);
    padding: 1rem;
    border: 1px solid var(--ftg-ticket-edge);
    border-radius: 0.75rem;
    background: var(--ftg-card);
}

.ftg-ticket__main {
    min-width: 0;
}

.ftg-ticket__label {
    color: var(--ftg-muted);
}

.ftg-ticket__items {
    margin: 0.5rem 0 0.25rem;
    color: var(--ftg-ink);
}

.ftg-ticket__meta {
    margin: 0;
    color: var(--ftg-muted);
}

.ftg-ticket__state {
    margin: 0.5rem 0 0;
}

.ftg-ticket__side {
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 0.25rem;
}

/* what a status says: the amber of work in hand, the green of an order that is ready or delivered */
.ftg-status {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    background: var(--ftg-pending-bg);
    color: var(--ftg-pending);
}

.ftg-status::before {
    content: "";
    flex: none;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: currentColor;
}

.ftg-status--ready,
.ftg-status--delivered {
    background: var(--ftg-ready-bg);
    color: var(--ftg-ready);
}

/* the button that moves an order on */
.ftg-move {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--ftg-move-edge);
    border-radius: 0.625rem;
    background: var(--ftg-move-bg);
    color: var(--ftg-move-ink);
    text-align: start;
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.ftg-move:hover {
    background: var(--ftg-add-hover);
}

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

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

.ftg-handover {
    display: grid;
    justify-items: start;
}

.ftg-handover__text {
    margin: 0;
    color: var(--ftg-muted);
}

/* ---- 3. The rider's view: the way, and the delivery ---- */

.ftg-rider {
    display: grid;
    gap: var(--gap-max);
}

.ftg-route {
    position: relative;
    overflow: hidden;
    min-height: 16rem;
    border-radius: 0.75rem;
    background: var(--ftg-route-bg);
}

/* roads, as two sets of pale lines across the map */
.ftg-route::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(130deg, transparent 0 38px, var(--ftg-route-road) 40px 43px, transparent 45px 88px),
        repeating-linear-gradient(37deg, transparent 0 34px, var(--ftg-route-road) 37px 40px, transparent 42px 87px);
    pointer-events: none;
}

/* the way: a dotted line through the three places, in the map's own units, so that it meets them at any width (the dots keep their
   size: the stroke does not scale) */
.ftg-route__way {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.ftg-route__way path {
    fill: none;
    stroke: var(--ftg-route-way);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 0.1 10;
    vector-effect: non-scaling-stroke;
}

.ftg-node {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--ftg-node);
    color: var(--ftg-node-ink);
    box-shadow: 0 5px 16px rgb(15 40 81 / 0.25);
    translate: -50% -50%;
}

.ftg-node--shop {
    top: 62%;
    left: 12%;
}

.ftg-node--rider {
    top: 46%;
    left: 50%;
    background: var(--ftg-node-rider);
}

.ftg-node--home {
    top: 30%;
    left: 88%;
}

.ftg-route__cap {
    position: absolute;
    z-index: 3;
    display: grid;
    margin: 0;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--ftg-route-cap);
    color: var(--ftg-muted);
}

.ftg-route__cap > strong {
    color: var(--ftg-ink);
}

.ftg-route__cap--from {
    bottom: 0.75rem;
    left: 0.75rem;
}

.ftg-route__cap--to {
    right: 0.75rem;
    bottom: 0.75rem;
    text-align: end;
}

.ftg-delivery {
    display: grid;
    align-content: center;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--ftg-card-edge);
    border-radius: 0.75rem;
}

.ftg-delivery__empty,
.ftg-delivery__order {
    display: grid;
    justify-items: start;
    gap: 0.25rem;
}

.ftg-delivery__title {
    margin: 0.25rem 0 0;
    color: var(--ftg-ink);
}

.ftg-delivery__text {
    margin: 0 0 0.5rem;
    color: var(--ftg-muted);
}

.ftg-delivery__text strong {
    color: var(--ftg-ink);
}

.ftg-delivery__note {
    margin: 0.5rem 0 0;
    color: var(--ftg-pending);
}

/* what a press came to: one line that stays until the next, which is the design's toast, kept where it can be read */
.ftg-say {
    margin: 0;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--ftg-bar-line);
    background: var(--ftg-wash);
    color: var(--ftg-ink);
}

.ftg-say:empty {
    display: none;
}

/* what is under the window: that it is a prototype, and the way to start it again */
.ftg-demo__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem var(--gap-max);
    margin-top: 0.75rem;
}

.ftg-demo__note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
    margin: 0;
    color: var(--ftg-muted);
}

.ftg-demo__mark {
    display: inline-flex;
    flex: none;
    margin-top: 0.125rem;
    color: var(--ftg-blue);
}

.ftg-demo__mark .icon {
    width: 1rem;
    height: 1rem;
}

.ftg-reset {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.25rem 0.5rem;
    border: 0;
    border-radius: 0.5rem;
    background: none;
    color: var(--ftg-blue);
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

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

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

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

/* ------------------------------------------------------------------ */
/* One connected journey: the three roles                              */
/* ------------------------------------------------------------------ */

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

/* a role: its number and name, what it comes to and what it includes, and an arrow at its end; ruled from the next */
.ftg-role {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem var(--gap-max);
    align-items: start;
    padding-block: 1.25rem;
}

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

.ftg-role:first-child {
    padding-top: 0;
}

.ftg-role:last-child {
    padding-bottom: 0;
}

.ftg-role__no {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0;
}

.ftg-role__big {
    color: var(--ftg-big);
}

.ftg-role__label {
    color: var(--ftg-muted);
}

.ftg-role__body {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
}

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

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

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

/* what a role includes, and what a detail includes, are pills */
.ftg-tags__item {
    padding: 0.375rem 0.75rem;
    border-radius: 999px;
    background: var(--ftg-soft);
    color: var(--ftg-soft-ink);
}

.ftg-role__go {
    display: inline-flex;
    grid-column: 2;
    grid-row: 1;
    color: var(--ftg-blue);
}

.ftg-role__go .icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* ------------------------------------------------------------------ */
/* What a restaurant gains, on a deep navy band                        */
/* ------------------------------------------------------------------ */

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

.ftg-night__inner {
    display: grid;
    gap: 1.25rem var(--gap-max);
}

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

.ftg-night__lead {
    margin: 0.75rem 0 1rem;
    max-width: 32rem;
    color: var(--ftg-night-text);
    text-wrap: pretty;
}

.ftg-benefits {
    margin: 0;
    padding: 0;
    list-style: none;
}

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

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

.ftg-benefit:first-child {
    padding-top: 0;
}

.ftg-benefit:last-child {
    padding-bottom: 0;
}

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

.ftg-benefit__title {
    margin: 0 0 0.25rem;
    color: #ffffff;
}

.ftg-benefit__text {
    margin: 0;
    color: var(--ftg-night-text);
}

/* ------------------------------------------------------------------ */
/* The practical details                                               */
/* ------------------------------------------------------------------ */

.ftg-details {
    display: grid;
    gap: 1rem var(--gap-max);
}

.ftg-details__words {
    min-width: 0;
}

.ftg-details__words .ftg-lead {
    max-width: 32rem;
}

/* a detail is ruled from the words, and from the one before it */
.ftg-detail {
    min-width: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--ftg-line-strong);
}

.ftg-detail__no {
    color: var(--ftg-eyebrow);
}

.ftg-detail__title {
    margin: 0.5rem 0 0;
    color: var(--ftg-ink);
}

.ftg-detail__text {
    margin: 0.5rem 0 0;
    color: var(--ftg-muted);
}

.ftg-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.ftg-pill {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--ftg-pill-edge);
    border-radius: 999px;
    background: var(--ftg-pill-bg);
    color: var(--ftg-ink);
}

/* ------------------------------------------------------------------ */
/* Good questions                                                      */
/* ------------------------------------------------------------------ */

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

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

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

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

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

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

.ftg-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 */
.ftg-faq__item:first-child > .ftg-faq__question {
    min-height: 2.75rem;
    padding-top: 0;
}

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

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

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

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

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

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

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

.ftg-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(--ftg-closing);
    box-shadow: var(--ftg-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 */
.ftg-closing::before,
.ftg-closing::after {
    content: "";
    display: none;
    position: absolute;
    z-index: -1;
    border: 1px solid var(--ftg-closing-ring);
    border-radius: 50%;
    pointer-events: none;
}

.ftg-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 */
.ftg-closing .ftg-eyebrow--night {
    color: var(--ftg-closing-eyebrow);
}

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

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

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

/* white: the card's light blue is 3.9:1 on the bright end of its blue, where the note stands (the contrast measure found it) */
.ftg-closing__note {
    margin: 0;
    color: #ffffff;
}

.ftg-closing__mail {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

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

/* from 22rem the choice of a view is a row of three, with the numbers from 30rem; below it, one under another */
@container ftg-window (min-width: 22rem) {
    .ftg-views {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ftg-view {
        justify-content: center;
        padding-inline: 0.375rem;
    }

    .ftg-view__no {
        display: none;
    }
}

@container ftg-window (min-width: 30rem) {
    .ftg-view__no {
        display: inline;
    }
}

/* from 44rem the side is a column at the left, with the name, the label and the note */
@container ftg-window (min-width: 44rem) {
    .ftg-demo__layout {
        grid-template-columns: 13.5rem minmax(0, 1fr);
    }

    .ftg-side {
        gap: 0.75rem;
        padding: 1.5rem 1rem;
    }

    .ftg-side__brand,
    .ftg-side__label,
    .ftg-side__live,
    .ftg-side__note {
        display: flex;
    }

    .ftg-side__label {
        padding-inline: 0.75rem;
    }

    .ftg-side__note {
        display: block;
    }

    /* the note and the live line follow the views, where the design pins them to the side's foot (the limit) */
    .ftg-side__live {
        margin-top: 0.5rem;
        padding-inline: 0.75rem;
    }

    .ftg-side__note {
        padding-inline: 0.75rem;
    }

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

    .ftg-view {
        justify-content: flex-start;
        padding-inline: 0.75rem;
    }

    .ftg-view .icon {
        display: inline-flex;
    }

    .ftg-bar {
        padding-inline: 1.5rem;
    }

    .ftg-pane__body {
        padding: 1.25rem;
    }
}

/* from 56rem a ticket has its button beside its words, the rider's route beside the delivery, and an empty view is centred (its
   sentence is then one line) */
@container ftg-window (min-width: 56rem) {
    .ftg-ticket {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .ftg-rider {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }

    .ftg-empty {
        justify-items: center;
        padding-block: 2rem;
        text-align: center;
    }
}

/* from 62rem the bag is beside the menu */
@container ftg-window (min-width: 62rem) {
    .ftg-shop {
        grid-template-columns: minmax(0, 1fr) 19rem;
        align-items: start;
    }
}

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

/* a page without a script has the three 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) .ftg-pane ~ .ftg-pane {
        display: none;
    }
}

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

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

    .ftg-demo,
    .ftg-card,
    .ftg-dish,
    .ftg-bag,
    .ftg-stat,
    .ftg-ticket,
    .ftg-empty,
    .ftg-delivery,
    .ftg-flag,
    .ftg-cat,
    .ftg-add,
    .ftg-stepper,
    .ftg-move,
    .ftg-pill {
        border-color: var(--md-outline);
    }

    .ftg-role + .ftg-role,
    .ftg-detail,
    .ftg-faq__item + .ftg-faq__item,
    .ftg-index__inner,
    .ftg-pane + .ftg-pane,
    .ftg-row:not([hidden]) ~ .ftg-row:not([hidden]),
    .ftg-sums,
    .ftg-sums__row--total {
        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 plate last. A view that is chosen comes up in its place. */
@media (prefers-reduced-motion: no-preference) {
    .ftg-hero__title,
    .ftg-hero__lead {
        animation: hero-settle var(--spring-slow) var(--ease-spring) both;
    }

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

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

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

    .ftg-hero__notes {
        animation-delay: 180ms;
    }

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

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

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

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

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

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

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

    .ftg-band__phrase,
    .ftg-title--night,
    .ftg-night__lead,
    .ftg-benefit__title,
    .ftg-benefit__text,
    .ftg-closing__title,
    .ftg-closing__text,
    .ftg-closing__note,
    .ftg-closing__mail {
        color: inherit;
    }
}

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

@media (min-width: 40rem) {
    .ftg-hero__art {
        min-height: 26rem;
        padding-block: 1rem 3.25rem;
    }

    .ftg-card {
        bottom: 2.75rem;
    }

    .ftg-hero__art::before {
        width: 30rem;
        height: 30rem;
    }

    .ftg-hero__art::after {
        width: 16rem;
        height: 16rem;
    }

    .ftg-night {
        padding-block: 2rem;
    }

    .ftg-closing {
        padding: 2rem 1.75rem;
    }
}

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

@media (min-width: 48rem) {
    .ftg-head {
        grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    }

    .ftg-story {
        grid-template-columns: 12rem minmax(0, 1fr);
    }

    /* a role is its number and name, then what it says, then the arrow: the number's column is as wide as the longest name */
    .ftg-role {
        grid-template-columns: 11rem minmax(0, 1fr) auto;
    }

    .ftg-role__no {
        display: grid;
        align-content: start;
        gap: 0.5rem;
    }

    .ftg-role__body {
        grid-column: 2;
        grid-row: 1;
    }

    .ftg-role__go {
        grid-column: 3;
    }

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

    .ftg-details__words {
        grid-column: 1 / -1;
    }

    .ftg-detail:nth-child(2) {
        padding-left: 0;
    }
}

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

@media (min-width: 64rem) {
    .ftg-hero__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
        gap: var(--gap-max);
        align-items: center;
    }

    .ftg-hero__words {
        padding-block: 0.5rem 1.5rem;
    }

    .ftg-hero__art {
        align-self: stretch;
        min-height: 26rem;
        padding-block: 1rem 3rem;
    }

    .ftg-hero__art::before {
        top: -3rem;
        right: -16rem;
        width: 44rem;
        height: 44rem;
    }

    .ftg-hero__art::after {
        right: 3rem;
        bottom: 1rem;
        width: 22rem;
        height: 22rem;
    }

    .ftg-plate {
        width: min(100%, 36rem);
    }

    .ftg-card {
        bottom: 3rem;
        left: -1.25rem;
    }

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

    .ftg-details {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
    }

    .ftg-details__words {
        grid-column: auto;
    }

    /* the details are ruled from the words and from each other by a line at their left, not over them */
    .ftg-detail {
        padding: 0 0 0 var(--gap-max);
        border-top: 0;
        border-left: 1px solid var(--ftg-line-strong);
    }

    .ftg-detail:nth-child(2) {
        padding-left: var(--gap-max);
    }

    .ftg-faq {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        align-items: start;
        gap: var(--gap-max);
    }

    .ftg-closing {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.75rem var(--gap-max);
    }

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

    .ftg-closing::before {
        top: -9rem;
        right: -7rem;
        width: 24rem;
        height: 24rem;
    }

    .ftg-closing::after {
        top: -13rem;
        right: -11rem;
        width: 32rem;
        height: 32rem;
    }
}

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

@media (min-width: 80rem) {
    .ftg-hero__art {
        min-height: 28rem;
    }

    .ftg-plate {
        width: min(104%, 37rem);
    }

    .ftg-role {
        grid-template-columns: 14rem minmax(0, 1fr) auto;
    }

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