/* The hotel and hospitality page (services/pages/hospitality.html), after its own design (2026-10-30: "this should is for
   hotel-management page, but change it to hospitality", with Kweepa_Hospitality_Standalone (1).html). Until then the page was the
   hotel management page, at /products/hotel-management, drawn to the design of 2026-10-25 (screens over a photograph, a lifecycle,
   kinds of business, a map of markets and a closing band); this stylesheet replaces that design's, and the pictures it used are
   left, unused except the company's resort photograph, which the new design uses three times (its hero, its sample booking and its
   closing call) and which is one file, so that a visitor who has seen the first has the others.

   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 console in 8 to 12px and its titles in 39 to 76px with a tracking of
   -0.058em: the console 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 photograph 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 choice of a workspace, the sample booking) 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 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 .hsp;
   its colours are the --hsp-* tokens, set again for the dark theme, and its text takes typography.md's two text colours through
   them. The deep navy band, the tour's side and the closing card are deep blue on both themes, as the design draws them. */
:root {
    --hsp-surface: #ffffff;
    /* the text: headings and body text in typography.md's primary colour, small text in its secondary */
    --hsp-ink: var(--text-primary);
    --hsp-muted: var(--text-secondary);
    /* the quiet half of a heading (large text: 3:1 is the least) */
    --hsp-faint: #66768a;
    --hsp-eyebrow: #0a4ce9;
    --hsp-blue: #0154e5;
    --hsp-blue-hover: #0043bd;
    --hsp-on-blue: #ffffff;
    --hsp-blue-soft: #e8f1ff;
    --hsp-blue-edge: #cbdcff;
    --hsp-blue-ink: #0a3fb8;
    --hsp-outline: #b4c9e8;
    --hsp-line: #e3e9f0;
    --hsp-line-strong: #d3deec;
    --hsp-wash: #f7f9fc;
    --hsp-band: #f1f6fa;
    --hsp-band-2: #f6f9fd;
    --hsp-crumb-chevron: #8790a8;
    /* what a status says */
    --hsp-green: #0b7a57;
    --hsp-dot: #17b982;
    --hsp-dot-ring: #dcf7ef;
    --hsp-green-soft: #e4f6ee;
    --hsp-amber: #8a5200;
    --hsp-amber-soft: #fff4e0;
    --hsp-blue-pill: #0a3fb8;
    --hsp-blue-pill-soft: #e5effe;
    /* the hero: a pale sky at its right, as the design draws it */
    --hsp-hero-bg: linear-gradient(108deg, #ffffff 2%, #f8fbfe 57%, #e1effa 100%);
    --hsp-scrim: linear-gradient(90deg, rgb(230 242 252 / 0.35), transparent 42%), linear-gradient(0deg, rgb(12 30 58 / 0.33), transparent 55%);
    --hsp-photo-filter: none;
    /* the cards and windows on the page */
    --hsp-card: #ffffff;
    --hsp-card-edge: #dbe5f3;
    --hsp-card-shadow: 0 18px 45px rgb(33 77 119 / 0.13);
    --hsp-float-shadow: 0 10px 32px rgb(22 62 115 / 0.19);
    --hsp-console-frame: #14253b;
    --hsp-console-shadow: 0 24px 50px rgb(6 35 66 / 0.31);
    --hsp-console-side: #eef4fa;
    --hsp-console-icon: #5f7690;
    --hsp-console-on: #d7e9ff;
    --hsp-bar-top: #1478f8;
    --hsp-bar-bottom: #0a62e6;
    --hsp-bar-line: #d8e5f5;
    --hsp-track: #e4edf6;
    --hsp-track-fill: #0267ec;
    /* the deep blue of the tour's side and of the band on what it is built to fit */
    --hsp-navy: #0a2345;
    --hsp-navy-text: #b8cce8;
    --hsp-navy-line: #3f5776;
    --hsp-navy-eyebrow: #95c5ff;
    --hsp-navy-selected: #1762d8;
    --hsp-navy-lead: #c2d4ea;
    /* the card beside a workspace's table */
    --hsp-task-bg: #e9f1fb;
    --hsp-task-track: #cfdeed;
    --hsp-task-fill: #0870e5;
    /* the closing call: a blue card */
    --hsp-closing: #0758e7;
    --hsp-closing-text: #e3eeff;
    --hsp-closing-eyebrow: #e3eeff;
    --hsp-closing-shadow: 0 24px 50px rgb(10 48 156 / 0.22);
    --hsp-white-ink: #0643be;
    /* the sample booking's own words, set apart */
    --hsp-error: #b3261e;
    --hsp-ok: #0b7a57;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --hsp-surface: #131314;
        --hsp-faint: #8d9bb0;
        --hsp-eyebrow: #a8c7fa;
        --hsp-blue: #a8c7fa;
        --hsp-blue-hover: #c2d7fb;
        --hsp-on-blue: #062e6f;
        --hsp-blue-soft: rgb(168 199 250 / 0.14);
        --hsp-blue-edge: rgb(168 199 250 / 0.3);
        --hsp-blue-ink: #a8c7fa;
        --hsp-outline: rgb(255 255 255 / 0.22);
        --hsp-line: rgb(255 255 255 / 0.09);
        --hsp-line-strong: rgb(255 255 255 / 0.16);
        --hsp-wash: #17181b;
        --hsp-band: #161719;
        --hsp-band-2: #151618;
        --hsp-crumb-chevron: #7f889c;
        --hsp-green: #6dd5a8;
        --hsp-dot: #4cd9a0;
        --hsp-dot-ring: rgb(76 217 160 / 0.2);
        --hsp-green-soft: rgb(109 213 168 / 0.12);
        --hsp-amber: #f2c46d;
        --hsp-amber-soft: rgb(242 196 109 / 0.12);
        --hsp-blue-pill: #a8c7fa;
        --hsp-blue-pill-soft: rgb(168 199 250 / 0.14);
        --hsp-hero-bg: linear-gradient(108deg, #131722 2%, #131720 57%, #121a2b 100%);
        --hsp-scrim: linear-gradient(90deg, rgb(19 23 34 / 0.55), transparent 46%), linear-gradient(0deg, rgb(4 12 26 / 0.5), transparent 58%);
        --hsp-photo-filter: brightness(0.78) saturate(1.05);
        --hsp-card: #1c1f25;
        --hsp-card-edge: rgb(255 255 255 / 0.12);
        --hsp-card-shadow: 0 18px 45px rgb(0 0 0 / 0.45);
        --hsp-float-shadow: 0 10px 32px rgb(0 0 0 / 0.5);
        --hsp-console-frame: #2b3a52;
        --hsp-console-shadow: 0 24px 50px rgb(0 0 0 / 0.55);
        --hsp-console-side: #181a1f;
        --hsp-console-icon: #8fa3bf;
        --hsp-console-on: rgb(168 199 250 / 0.18);
        --hsp-bar-top: #5f9be0;
        --hsp-bar-bottom: #3478e0;
        --hsp-bar-line: rgb(255 255 255 / 0.12);
        --hsp-track: rgb(255 255 255 / 0.1);
        --hsp-track-fill: #6aa7f5;
        --hsp-navy: #08182f;
        --hsp-task-bg: rgb(168 199 250 / 0.1);
        --hsp-task-track: rgb(255 255 255 / 0.12);
        --hsp-task-fill: #6aa7f5;
        --hsp-closing: #0a3d9d;
        --hsp-closing-text: #dbe7ff;
        --hsp-closing-eyebrow: #dbe7ff;
        --hsp-closing-shadow: 0 24px 50px rgb(0 0 0 / 0.4);
        --hsp-error: #f2b8b5;
        --hsp-ok: #6dd5a8;
    }
}

:root[data-theme="dark"] {
    --hsp-surface: #131314;
    --hsp-faint: #8d9bb0;
    --hsp-eyebrow: #a8c7fa;
    --hsp-blue: #a8c7fa;
    --hsp-blue-hover: #c2d7fb;
    --hsp-on-blue: #062e6f;
    --hsp-blue-soft: rgb(168 199 250 / 0.14);
    --hsp-blue-edge: rgb(168 199 250 / 0.3);
    --hsp-blue-ink: #a8c7fa;
    --hsp-outline: rgb(255 255 255 / 0.22);
    --hsp-line: rgb(255 255 255 / 0.09);
    --hsp-line-strong: rgb(255 255 255 / 0.16);
    --hsp-wash: #17181b;
    --hsp-band: #161719;
    --hsp-band-2: #151618;
    --hsp-crumb-chevron: #7f889c;
    --hsp-green: #6dd5a8;
    --hsp-dot: #4cd9a0;
    --hsp-dot-ring: rgb(76 217 160 / 0.2);
    --hsp-green-soft: rgb(109 213 168 / 0.12);
    --hsp-amber: #f2c46d;
    --hsp-amber-soft: rgb(242 196 109 / 0.12);
    --hsp-blue-pill: #a8c7fa;
    --hsp-blue-pill-soft: rgb(168 199 250 / 0.14);
    --hsp-hero-bg: linear-gradient(108deg, #131722 2%, #131720 57%, #121a2b 100%);
    --hsp-scrim: linear-gradient(90deg, rgb(19 23 34 / 0.55), transparent 46%), linear-gradient(0deg, rgb(4 12 26 / 0.5), transparent 58%);
    --hsp-photo-filter: brightness(0.78) saturate(1.05);
    --hsp-card: #1c1f25;
    --hsp-card-edge: rgb(255 255 255 / 0.12);
    --hsp-card-shadow: 0 18px 45px rgb(0 0 0 / 0.45);
    --hsp-float-shadow: 0 10px 32px rgb(0 0 0 / 0.5);
    --hsp-console-frame: #2b3a52;
    --hsp-console-shadow: 0 24px 50px rgb(0 0 0 / 0.55);
    --hsp-console-side: #181a1f;
    --hsp-console-icon: #8fa3bf;
    --hsp-console-on: rgb(168 199 250 / 0.18);
    --hsp-bar-top: #5f9be0;
    --hsp-bar-bottom: #3478e0;
    --hsp-bar-line: rgb(255 255 255 / 0.12);
    --hsp-track: rgb(255 255 255 / 0.1);
    --hsp-track-fill: #6aa7f5;
    --hsp-navy: #08182f;
    --hsp-task-bg: rgb(168 199 250 / 0.1);
    --hsp-task-track: rgb(255 255 255 / 0.12);
    --hsp-task-fill: #6aa7f5;
    --hsp-closing: #0a3d9d;
    --hsp-closing-text: #dbe7ff;
    --hsp-closing-eyebrow: #dbe7ff;
    --hsp-closing-shadow: 0 24px 50px rgb(0 0 0 / 0.4);
    --hsp-error: #f2b8b5;
    --hsp-ok: #6dd5a8;
}

/* ------------------------------------------------------------------ */
/* 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 workspaces' figures and the price of a stay */
.hsp-figure__value,
.hsp-total__sum {
    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 */
.hsp-cap__name,
.hsp-step__name,
.hsp-detail__title,
.hsp-pane__title,
.hsp-task__title,
.hsp-faq__question,
.hsp-demo__top strong,
.hsp-demo__label strong,
.hsp-metric__value {
    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 */
.hsp-lead,
.hsp-hero__lead,
.hsp-hero__sub,
.hsp-cap__text,
.hsp-detail__text,
.hsp-night__lead,
.hsp-closing__text,
.hsp-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 */
.hsp-trust,
.hsp-card__words span,
.hsp-console__status,
.hsp-metric__label,
.hsp-metric__note,
.hsp-metric__unit,
.hsp-arrival__name,
.hsp-arrival__room,
.hsp-pane__text,
.hsp-date,
.hsp-figure__label,
.hsp-figure__note,
.hsp-records__top span,
.hsp-table td,
.hsp-task__text,
.hsp-task__note,
.hsp-foot,
.hsp-step__text,
.hsp-demo__label span,
.hsp-demo__top span,
.hsp-total__label span,
.hsp-demo__feedback {
    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 console's names, pills, choices, table headers and the booking's labels) */
.hsp-card__words strong,
.hsp-console__k,
.hsp-console__top strong,
.hsp-console__label,
.hsp-panel__title,
.hsp-avatar,
.hsp-highlights,
.hsp-tab,
.hsp-records__top strong,
.hsp-table th,
.hsp-table td.hsp-table__first,
.hsp-pill,
.hsp-points,
.hsp-field > span,
.hsp-total__label strong,
.hsp-tool {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-small);
    letter-spacing: 0;
}

/* Form input: sans 400, 16px */
.hsp-input {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    letter-spacing: 0;
}

/* Buttons and navigation links: sans 500 */
.hsp-btn,
.hsp-crumbs__list,
.hsp-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 */
.hsp-eyebrow,
.hsp-tag {
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-medium);
    line-height: var(--lh-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}

/* ------------------------------------------------------------------ */
/* The page                                                            */
/* ------------------------------------------------------------------ */

/* 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 */
.hsp {
    background: var(--hsp-surface);
    color: var(--hsp-ink);
    overflow-wrap: anywhere;
}

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

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

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

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

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

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

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

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

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

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

.hsp-line {
    display: block;
}

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

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

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

/* a link of its own, in the blue, with its arrow, underlined as the design has it; a long word in its words breaks rather than
   widen it past its column, at 200% text on a small screen */
.hsp-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    color: var(--hsp-eyebrow);
    text-decoration: underline;
    text-decoration-color: var(--hsp-blue-edge);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.35em;
    transition: gap var(--spring) var(--ease-spring);
}

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

.hsp-link:hover {
    text-decoration-color: currentColor;
}

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

.hsp-dot {
    flex: none;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--hsp-dot);
    box-shadow: 0 0 0 4px var(--hsp-dot-ring);
}

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

.hsp-head > div,
.hsp-head > .hsp-lead {
    min-width: 0;
}

.hsp-head > .hsp-lead {
    margin: 0;
}

/* paragraphs that are rows of their own words are as wide as their rows, not as the base's 70ch */
.hsp-card__words,
.hsp-console__top,
.hsp-console__label,
.hsp-panel__title,
.hsp-trust,
.hsp-pane__over,
.hsp-pane__text,
.hsp-date,
.hsp-records__top,
.hsp-task__label,
.hsp-task__text,
.hsp-task__note,
.hsp-foot,
.hsp-demo__top,
.hsp-demo__label,
.hsp-total__label,
.hsp-demo__feedback,
.hsp-demo-tag,
.hsp-closing__text,
.hsp-night__lead {
    max-width: none;
}

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

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

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

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

.hsp-btn--filled {
    background: var(--hsp-blue);
    color: var(--hsp-on-blue);
    box-shadow: 0 8px 20px rgb(0 90 229 / 0.16);
}

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

.hsp-btn--text {
    padding-inline: 0.5rem;
    color: var(--hsp-eyebrow);
}

.hsp-btn--text:hover {
    color: var(--hsp-eyebrow);
    text-decoration: underline;
    text-underline-offset: 0.3em;
}

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

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

.hsp-btn--block {
    width: 100%;
    border-radius: 0.5rem;
}

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

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

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

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

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

.hsp-hero__inner {
    padding-block: 0.5rem var(--gap-max);
}

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

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

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

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

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

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

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

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

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

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

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

.hsp-hero__sub {
    margin: 0.75rem 0 0;
    max-width: 34rem;
    color: var(--hsp-muted);
    text-wrap: pretty;
}

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

.hsp-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--hsp-muted);
}

.hsp-trust li {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}

/* the picture: the company's resort photograph, with a card and a console over it. Under 64rem it is a band under the words, as high
   as its console and the room round it; from 64rem it is the right half of the hero. */
.hsp-art {
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
    align-content: end;
    min-height: 20rem;
    padding: 5.5rem 1rem 1.25rem;
    overflow: hidden;
}

.hsp-art__photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 59% 50%;
    filter: var(--hsp-photo-filter);
}

.hsp-art__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--hsp-scrim);
}

/* the card that lies over the picture's corner */
.hsp-card {
    position: absolute;
    z-index: 2;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    max-width: calc(100% - 2rem);
    padding: 0.625rem 0.875rem;
    border-radius: 0.75rem;
    background: var(--hsp-card);
    box-shadow: var(--hsp-float-shadow);
    color: var(--hsp-ink);
}

.hsp-card__tick {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.875rem;
    height: 1.875rem;
    border-radius: 50%;
    background: var(--hsp-green-soft);
    color: var(--hsp-green);
}

.hsp-card__tick .icon {
    width: 1rem;
    height: 1rem;
}

.hsp-card__words {
    display: grid;
    min-width: 0;
}

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

.hsp-card__go {
    flex: none;
    color: var(--hsp-muted);
}

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

/* the console: a size container, 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 30rem it has no side, its figures are rows and it says nothing of who is arriving
   or of the week's revenue; from 30rem it has all of them. */
.hsp-console {
    container: hsp-console / inline-size;
    position: relative;
    z-index: 1;
    width: min(100%, 38rem);
    border: 0.4375rem solid var(--hsp-console-frame);
    border-radius: 1.2rem;
    background: var(--hsp-card);
    box-shadow: var(--hsp-console-shadow);
    color: var(--hsp-ink);
    overflow: hidden;
}

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

.hsp-console__side {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: 0.875rem 0.25rem;
    border-right: 1px solid var(--hsp-line);
    background: var(--hsp-console-side);
}

.hsp-console__k {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 0.25rem;
    border-radius: 0.5rem;
    background: var(--hsp-blue);
    color: var(--hsp-on-blue);
}

.hsp-console__icon {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
    color: var(--hsp-console-icon);
}

.hsp-console__icon.is-on {
    background: var(--hsp-console-on);
    color: var(--hsp-blue-ink);
}

.hsp-console__icon .icon {
    width: 1.125rem;
    height: 1.125rem;
}

.hsp-console__main {
    min-width: 0;
    padding: 0.875rem 1rem 1rem;
}

.hsp-console__top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.125rem 0.75rem;
    margin: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--hsp-line);
}

.hsp-console__status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--hsp-green);
}

.hsp-console__label {
    margin: 0.5rem 0 0.5rem;
    color: var(--hsp-ink);
}

/* its three figures: rows (a name and its value) where it is narrow, three cards where it is wide */
.hsp-metrics {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

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

.hsp-metric__value {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--hsp-ink);
    text-align: right;
}

.hsp-metric__note {
    grid-column: 1;
    color: var(--hsp-green);
}

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

.hsp-metric__track::-webkit-progress-bar,
.hsp-task__bar::-webkit-progress-bar {
    background: var(--hsp-track);
}

.hsp-metric__track::-webkit-progress-value,
.hsp-task__bar::-webkit-progress-value {
    border-radius: 999px;
    background: var(--hsp-track-fill);
}

.hsp-metric__track::-moz-progress-bar,
.hsp-task__bar::-moz-progress-bar {
    border-radius: 999px;
    background: var(--hsp-track-fill);
}

.hsp-metric__track {
    grid-column: 1;
}

/* who is arriving, and the week's revenue: only where the console is wide enough for them */
.hsp-console__bottom {
    display: none;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.hsp-panel {
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--hsp-line);
    border-radius: 0.5rem;
}

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

.hsp-arrivals__list {
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
}

.hsp-arrival {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.25rem;
}

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

.hsp-avatar {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--hsp-blue-soft);
    color: var(--hsp-blue-ink);
    overflow: hidden;
}

.hsp-arrival__room {
    color: var(--hsp-muted);
    text-align: right;
}

.hsp-revenue {
    display: none;
}

.hsp-bars {
    display: flex;
    align-items: flex-end;
    gap: 0.375rem;
    height: 5rem;
    margin: 0.5rem 0 0;
    padding: 0;
    border-bottom: 1px solid var(--hsp-bar-line);
    list-style: none;
}

.hsp-bar {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(var(--hsp-bar-top), var(--hsp-bar-bottom));
}

.hsp-bar--43 { height: 43%; }
.hsp-bar--52 { height: 52%; }
.hsp-bar--64 { height: 64%; }
.hsp-bar--72 { height: 72%; }
.hsp-bar--82 { height: 82%; }
.hsp-bar--89 { height: 89%; }
.hsp-bar--100 { height: 100%; }

/* where the console is 30rem wide: its side, three cards and the week's revenue beside the arrivals */
@container hsp-console (min-width: 30rem) {
    .hsp-console__body {
        grid-template-columns: 3.25rem minmax(0, 1fr);
    }

    .hsp-console__side {
        display: flex;
    }

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

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

    .hsp-metric__value {
        grid-column: 1;
        grid-row: auto;
        text-align: left;
    }

    .hsp-console__bottom {
        display: grid;
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    }

    .hsp-revenue {
        display: block;
    }
}

/* at very large text on a small screen (the console is under 10rem wide) its figures have less room round them */
@container hsp-console (max-width: 9.99rem) {
    .hsp-console__main {
        padding-inline: 0.5rem;
    }
}

/* ------------------------------------------------------------------ */
/* The introduction                                                    */
/* ------------------------------------------------------------------ */

.hsp-intro {
    display: grid;
    gap: var(--gap-max);
}

.hsp-intro__head,
.hsp-intro__body {
    min-width: 0;
}

.hsp-intro__body .hsp-lead {
    margin: 0 0 1rem;
    max-width: 40rem;
}

/* four phrases under the paragraphs, a line between them and the words above */
.hsp-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid var(--hsp-line);
    list-style: none;
    color: var(--hsp-ink);
}

.hsp-highlights li {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.hsp-highlights li::before {
    content: "";
    flex: none;
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: var(--hsp-blue);
}

/* ------------------------------------------------------------------ */
/* Five workspaces of a property                                       */
/* ------------------------------------------------------------------ */

/* a band the page's pale blue, which has room inside itself and 20px over it */
.hsp-tour {
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    background: var(--hsp-band);
}

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

/* one card: the choice (over the work below 48rem, at its left from it, on the deep blue) and the workspace chosen */
.hsp-frame {
    display: grid;
    margin-top: 1rem;
    border: 1px solid var(--hsp-card-edge);
    border-radius: 0.875rem;
    background: var(--hsp-card);
    box-shadow: var(--hsp-card-shadow);
    overflow: hidden;
}

.hsp-frame__nav {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: 0.25rem;
    padding: 0.625rem;
    background: var(--hsp-navy);
}

.hsp-tab {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    border-radius: 0.5rem;
    color: var(--hsp-navy-text);
    text-decoration: none;
    transition: background-color 150ms var(--ease-standard), color 150ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.hsp-tab > span {
    min-width: 0;
}

.hsp-tab .icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    opacity: 0;
    transition: opacity 150ms var(--ease-standard), translate var(--spring) var(--ease-spring);
}

.hsp-tab:hover {
    background: rgb(255 255 255 / 0.08);
    color: #ffffff;
}

.hsp-tab[aria-selected="true"] {
    background: var(--hsp-navy-selected);
    color: #ffffff;
}

.hsp-tab[aria-selected="true"] .icon {
    opacity: 1;
}

/* a ring that shows on the deep blue, inside the card's edge, which clips what lies outside it */
.hsp-tab:focus-visible {
    outline-color: #ffffff;
    outline-offset: -2px;
}

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

/* the workspace: a size container, so what it holds follows its own width (the figures in rows, two or four, the table's third
   column, the card beside the table) */
.hsp-frame__stage {
    container: hsp-stage / inline-size;
    display: grid;
    align-content: start;
    gap: var(--gap-max);
    min-width: 0;
    padding: 1.25rem;
}

.hsp-pane {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    min-width: 0;
}

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

/* with no script every workspace is in the page, one after another, with a line between two */
.hsp-frame:not(.is-ready) .hsp-pane + .hsp-pane {
    padding-top: var(--gap-max);
    border-top: 1px solid var(--hsp-line);
}

.hsp-pane__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

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

.hsp-pane__over {
    color: var(--hsp-eyebrow);
}

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

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

.hsp-date {
    flex: none;
    max-width: 100%;
    margin: 0;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    background: var(--hsp-wash);
    color: var(--hsp-muted);
}

/* the four figures: rows (a name and its value) where the workspace is narrow, two cards, then four */
.hsp-figures {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.hsp-figure__label {
    grid-column: 1;
    color: var(--hsp-muted);
}

.hsp-figure__value {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--hsp-ink);
    text-align: right;
}

.hsp-figure__note {
    grid-column: 1;
    color: var(--hsp-green);
}

.hsp-pane__body {
    display: grid;
    gap: 0.75rem;
}

.hsp-records {
    min-width: 0;
    border: 1px solid var(--hsp-line);
    border-radius: 0.5rem;
    overflow: hidden;
}

.hsp-records__top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.125rem 0.75rem;
    margin: 0;
    padding: 0.625rem 1rem;
    color: var(--hsp-ink);
}

.hsp-records__top span {
    color: var(--hsp-eyebrow);
}

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

.hsp-table th,
.hsp-table td {
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    text-align: left;
    vertical-align: middle;
}

.hsp-table th:last-child,
.hsp-table td:last-child {
    padding-right: 1rem;
}

.hsp-table th {
    border-top: 1px solid var(--hsp-line);
    background: var(--hsp-wash);
    color: var(--hsp-muted);
}

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

.hsp-table td {
    color: var(--hsp-ink);
}

/* a status, in a tone of its own */
.hsp-pill {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0.125rem 0.625rem;
    border-radius: 0.375rem;
    background: var(--hsp-blue-pill-soft);
    color: var(--hsp-blue-pill);
}

.hsp-pill--green {
    background: var(--hsp-green-soft);
    color: var(--hsp-green);
}

.hsp-pill--blue {
    background: var(--hsp-blue-pill-soft);
    color: var(--hsp-blue-pill);
}

.hsp-pill--amber {
    background: var(--hsp-amber-soft);
    color: var(--hsp-amber);
}

/* the card beside the table: what the team is doing, and how far it has got */
.hsp-task {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    min-width: 0;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    background: var(--hsp-task-bg);
}

.hsp-task__label {
    color: var(--hsp-blue-ink);
}

.hsp-task__title {
    margin: 0.25rem 0 0;
    color: var(--hsp-ink);
}

.hsp-task__text,
.hsp-task__note {
    margin: 0;
    color: var(--hsp-muted);
}

.hsp-task__bar {
    height: 0.375rem;
    margin-top: 0.25rem;
    background: var(--hsp-task-track);
    color: var(--hsp-task-fill);
}

.hsp-task__bar::-webkit-progress-bar {
    background: var(--hsp-task-track);
}

.hsp-task__bar::-webkit-progress-value {
    background: var(--hsp-task-fill);
}

.hsp-task__bar::-moz-progress-bar {
    background: var(--hsp-task-fill);
}

.hsp-foot {
    margin: 0.75rem 0 0;
    color: var(--hsp-muted);
}

/* the figures in two cards where the workspace is 30rem wide, four from 44rem; its table's third column is left out under 30rem,
   and the card beside the table goes under it until 46rem */
@container hsp-stage (min-width: 30rem) {
    .hsp-figures {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .hsp-figure__value {
        grid-column: 1;
        grid-row: auto;
        text-align: left;
    }
}

@container hsp-stage (min-width: 44rem) {
    .hsp-figures {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@container hsp-stage (min-width: 46rem) {
    .hsp-pane__body {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.8fr);
        align-items: start;
    }
}

@container hsp-stage (max-width: 29.99rem) {
    .hsp-table :is(th, td):nth-child(3) {
        display: none;
    }
}

/* at very large text on a small screen (the workspace is under 12rem wide, which is a phone's at 200%) the table says a name and a
   status only */
@container hsp-stage (max-width: 11.99rem) {
    .hsp-table :is(th, td):nth-child(2) {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* What it covers                                                      */
/* ------------------------------------------------------------------ */

.hsp-caps {
    display: grid;
    gap: 0 var(--gap-max);
    margin: var(--gap-max) 0 0;
    padding: 0;
    list-style: none;
}

.hsp-cap {
    display: grid;
    align-content: start;
    min-width: 0;
    padding-block: 1rem;
}

/* a line between two rows, none over the first or under the last: below 40rem every thing is a row of its own, from 40rem two stand
   in a row, from 64rem three */
.hsp-cap + .hsp-cap {
    border-top: 1px solid var(--hsp-line-strong);
}

.hsp-cap:first-child {
    padding-top: 0;
}

.hsp-cap:last-child {
    padding-bottom: 0;
}

.hsp-cap__no {
    color: var(--hsp-eyebrow);
}

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

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

/* ------------------------------------------------------------------ */
/* The guest's side: a sample booking                                  */
/* ------------------------------------------------------------------ */

/* a band the page's other pale blue */
.hsp-booking {
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    background: var(--hsp-band-2);
}

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

.hsp-booking__copy {
    min-width: 0;
}

.hsp-points {
    display: grid;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--hsp-ink);
}

.hsp-points li {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.hsp-points__tick {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--hsp-green-soft);
    color: var(--hsp-green);
}

.hsp-points__tick .icon {
    width: 0.75rem;
    height: 0.75rem;
}

/* the sample booking engine: a photograph, and under it the form */
.hsp-demo {
    min-width: 0;
    max-width: 49rem;
    border: 1px solid var(--hsp-card-edge);
    border-radius: 1rem;
    background: var(--hsp-card);
    box-shadow: var(--hsp-card-shadow);
    overflow: hidden;
}

.hsp-demo__photo {
    position: relative;
    height: 11.875rem;
    overflow: hidden;
}

.hsp-demo__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 53%;
    filter: var(--hsp-photo-filter);
}

/* the property's name and its caption are white over the photograph's foot, where the sun is: the scrim is deep enough behind
   them for 4.5:1 against the brightest part of the picture, and fades out above */
.hsp-demo__photo::after {
    content: "";
    position: absolute;
    inset: 20% 0 0;
    background: linear-gradient(to top, rgb(8 28 60 / 0.86) 0%, rgb(8 28 60 / 0.78) 45%, transparent 100%);
}

.hsp-demo__label {
    position: absolute;
    z-index: 1;
    bottom: 1rem;
    left: 1.25rem;
    display: grid;
    margin: 0;
    color: #ffffff;
}

.hsp-demo__label span {
    color: #ffffff;
}

.hsp-demo__form {
    display: grid;
    gap: 0.75rem;
    padding: 1.25rem;
}

.hsp-demo__top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.125rem 0.75rem;
    margin: 0;
}

.hsp-demo__top strong {
    color: var(--hsp-ink);
}

.hsp-demo__top span {
    color: var(--hsp-muted);
}

.hsp-fields {
    display: grid;
    gap: 0.75rem;
}

.hsp-field {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
    color: var(--hsp-muted);
}

.hsp-input {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--hsp-line-strong);
    border-radius: 0.5rem;
    background: var(--hsp-card);
    color: var(--hsp-ink);
    accent-color: var(--hsp-blue);
}

.hsp-input:focus-visible {
    border-color: var(--hsp-blue);
    outline-offset: 1px;
}

/* a page without a script shows the first paint as a picture: the controls are as clear as any, not the browser's grey */
.hsp-input:disabled {
    opacity: 1;
    color: var(--hsp-ink);
    -webkit-text-fill-color: var(--hsp-ink);
    cursor: default;
}

.hsp-total {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--hsp-line);
}

.hsp-total__label {
    display: grid;
    margin: 0;
    color: var(--hsp-muted);
}

.hsp-total__label strong {
    color: var(--hsp-ink);
}

.hsp-total__sum {
    color: var(--hsp-ink);
}

.hsp-demo__feedback {
    margin: 0;
    color: var(--hsp-muted);
}

.hsp-demo__feedback.is-error {
    color: var(--hsp-error);
}

.hsp-demo__feedback.is-ok {
    color: var(--hsp-ok);
}

/* ------------------------------------------------------------------ */
/* A guest's journey                                                   */
/* ------------------------------------------------------------------ */

/* below 64rem the five steps are one under another with a rail down their numbers; from 64rem they stand in a row, the rail across */
.hsp-steps {
    position: relative;
    display: grid;
    gap: 0;
    margin: var(--gap-max) 0 0;
    padding: 0;
    list-style: none;
}

.hsp-step {
    position: relative;
    display: grid;
    grid-template-columns: 2.375rem minmax(0, 1fr);
    align-items: start;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
}

.hsp-step:last-child {
    padding-bottom: 0;
}

.hsp-step:not(:last-child)::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 2.375rem;
    bottom: 0;
    left: 1.1875rem;
    width: 1px;
    background: var(--hsp-line-strong);
}

.hsp-step__no {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 2.375rem;
    height: 2.375rem;
    border: 1px solid var(--hsp-blue-edge);
    border-radius: 50%;
    background: var(--hsp-surface);
    color: var(--hsp-eyebrow);
}

.hsp-step__name {
    margin: 0.25rem 0 0;
    color: var(--hsp-ink);
}

.hsp-step__text {
    margin: 0.125rem 0 0;
    color: var(--hsp-muted);
}

/* ------------------------------------------------------------------ */
/* What it is built to fit, on a deep blue band                         */
/* ------------------------------------------------------------------ */

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

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

.hsp-night__words,
.hsp-details {
    min-width: 0;
}

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

.hsp-detail + .hsp-detail {
    border-top: 1px solid var(--hsp-navy-line);
}

.hsp-detail {
    padding-block: 0.75rem;
}

.hsp-detail:first-child {
    padding-top: 0;
}

.hsp-detail:last-child {
    padding-bottom: 0;
}

.hsp-detail__title {
    margin: 0;
    color: #ffffff;
}

.hsp-detail__text {
    margin: 0.25rem 0 0;
    max-width: 34rem;
    color: var(--hsp-navy-lead);
}

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

.hsp-tools {
    display: grid;
    gap: 0 var(--gap-max);
    margin: 0.375rem 0 0;
    padding: 0;
    list-style: none;
}

.hsp-tool {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3rem;
    min-width: 0;
    color: var(--hsp-ink);
}

.hsp-tool .icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--hsp-eyebrow);
}

/* a line between two rows only: every thing a row of its own below 40rem, two to a row from it, four from 64rem */
.hsp-tool + .hsp-tool {
    border-top: 1px solid var(--hsp-line);
}

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

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

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

.hsp-faq__head .hsp-lead {
    max-width: 22rem;
}

.hsp-faq__head .hsp-link {
    margin-top: 0.25rem;
}

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

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

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

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

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

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

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

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

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

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

    .hsp-faq__item::details-content {
        block-size: 0;
        overflow: clip;
        opacity: 0;
        transition: block-size var(--spring) var(--ease-spring), opacity 250ms var(--ease-standard),
            content-visibility var(--spring) allow-discrete;
    }

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

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

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

.hsp-closing {
    position: relative;
    isolation: isolate;
    display: grid;
    border-radius: clamp(1rem, 1.5vw, 1.5rem);
    background: var(--hsp-closing);
    box-shadow: var(--hsp-closing-shadow);
    color: #ffffff;
    overflow: hidden;
}

.hsp-closing__words {
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: 1.75rem 1.25rem var(--gap-max);
}

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

.hsp-closing__title {
    margin: 0.5rem 0 0.75rem;
    max-width: 36rem;
    color: #ffffff;
    text-wrap: balance;
}

.hsp-closing__text {
    margin: 0 0 1rem;
    max-width: 36rem;
    color: var(--hsp-closing-text);
}

/* the picture is the resort again, under the words below 64rem (its top fading into the blue) and beside them from it (its left
   edge fading) */
.hsp-closing__photo {
    position: relative;
    min-height: 11rem;
    overflow: hidden;
}

.hsp-closing__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: var(--hsp-photo-filter);
}

.hsp-closing__photo::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, var(--hsp-closing), transparent 55%);
}

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

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

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

@media (prefers-contrast: more) {
    .hsp-art__scrim,
    .hsp-demo__photo::after {
        display: none;
    }

    .hsp-frame,
    .hsp-console,
    .hsp-demo,
    .hsp-panel,
    .hsp-figure,
    .hsp-records,
    .hsp-metric,
    .hsp-input,
    .hsp-btn--text {
        border-color: var(--md-outline);
    }

    .hsp-cap + .hsp-cap,
    .hsp-faq__item + .hsp-faq__item,
    .hsp-tool + .hsp-tool,
    .hsp-detail + .hsp-detail,
    .hsp-arrival + .hsp-arrival,
    .hsp-highlights,
    .hsp-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 picture last. A workspace that is chosen comes up under the choice. */
@media (prefers-reduced-motion: no-preference) {
    .hsp-hero__title,
    .hsp-hero__lead {
        animation: hero-settle var(--spring-slow) var(--ease-spring) both;
    }

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

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

    .hsp-hero__sub {
        animation-delay: 120ms;
    }

    .hsp-hero__actions {
        animation-delay: 160ms;
    }

    .hsp-trust {
        animation-delay: 220ms;
    }

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

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

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

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

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

    .hsp-night .hsp-title,
    .hsp-night__lead,
    .hsp-detail__title,
    .hsp-detail__text,
    .hsp-closing__title,
    .hsp-closing__text,
    .hsp-tab {
        color: inherit;
    }

    .hsp-art,
    .hsp-closing__photo {
        display: none;
    }
}

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

@media (min-width: 40rem) {
    .hsp-frame__stage {
        padding: 1.5rem;
    }

    .hsp-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hsp-closing__words {
        padding: 2rem 2rem var(--gap-max);
    }

    /* two things to a row: the first row has no room over it, the last none under it, a line between the rows */
    .hsp-caps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hsp-cap + .hsp-cap {
        border-top: 0;
    }

    .hsp-cap:nth-child(n + 3) {
        border-top: 1px solid var(--hsp-line-strong);
    }

    .hsp-cap:nth-child(2) {
        padding-top: 0;
    }

    .hsp-cap:nth-child(5) {
        padding-bottom: 0;
    }

    .hsp-tools {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hsp-tool + .hsp-tool {
        border-top: 0;
    }

    .hsp-tool:nth-child(n + 3) {
        border-top: 1px solid var(--hsp-line);
    }
}

/* ------------------------------------------------------------------ */
/* From 48rem: a heading beside what it heads, the card's two columns   */
/* ------------------------------------------------------------------ */

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

    .hsp-head > .hsp-demo-tag {
        justify-self: end;
    }

    .hsp-frame {
        grid-template-columns: 12.5rem minmax(0, 1fr);
    }

    .hsp-frame__nav {
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 1.25rem 0.75rem;
    }

    .hsp-frame__stage {
        padding: 1.5rem 1.75rem;
    }

    .hsp-night__inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

}

/* ------------------------------------------------------------------ */
/* From 64rem: the hero's two columns, the rows of three, the band's    */
/* ------------------------------------------------------------------ */

@media (min-width: 64rem) {
    .hsp-hero {
        min-height: 37.75rem;
    }

    /* the heading over the five steps is centred where they stand in a row, and starts at the column's edge over the rail below */
    .hsp-journey__head {
        text-align: center;
    }

    /* the base gives a paragraph 70ch, which would leave the label a block at the column's left edge with its words centred in
       it, off the middle of the heading under it */
    .hsp-journey__head .hsp-eyebrow {
        max-width: none;
    }

    .hsp-hero__inner {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        min-height: 37.75rem;
        padding-block: 1.5rem;
    }

    .hsp-hero__words {
        width: 49%;
        max-width: 40rem;
    }

    /* the picture is the right half of the hero, flush with the window's edge, its foot's left corner rounded; the console lies at its
       foot and the card at its top */
    .hsp-art {
        position: absolute;
        z-index: 1;
        inset: 0 0 0 51%;
        display: block;
        min-height: 0;
        padding: 0;
        border-radius: 0 0 0 2.25rem;
    }

    .hsp-console {
        position: absolute;
        bottom: 2.8rem;
        left: 5%;
        width: 78%;
    }

    .hsp-card {
        top: 5.4rem;
        right: 5%;
    }

    .hsp-intro {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    /* three things to a row */
    .hsp-caps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hsp-cap:nth-child(3) {
        padding-top: 0;
        border-top: 0;
    }

    .hsp-cap:nth-child(4) {
        padding-bottom: 0;
    }

    .hsp-booking__inner {
        grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    }

    /* the steps in a row, a rail across their numbers */
    .hsp-steps {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0 var(--gap-max);
    }

    .hsp-steps::before {
        content: "";
        position: absolute;
        top: 1.1875rem;
        right: calc(20% - 1.1875rem);
        left: 1.1875rem;
        height: 1px;
        background: var(--hsp-line-strong);
    }

    /* the steps are as high as the tallest, and the number and the words stay at the top of each: a grid's rows would stretch with
       it, and the names of the steps with a shorter caption would stand lower than the others */
    .hsp-step {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: 0.25rem;
        padding-bottom: 0;
    }

    .hsp-step:not(:last-child)::before {
        display: none;
    }

    .hsp-step__name {
        margin-top: 0;
    }

    /* four things to a row */
    .hsp-tools {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .hsp-tool:nth-child(n + 3) {
        border-top: 0;
    }

    .hsp-tool:nth-child(n + 5) {
        border-top: 1px solid var(--hsp-line);
    }

    .hsp-faq {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
        align-items: start;
    }

    .hsp-closing {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    }

    .hsp-closing__words {
        padding: 2rem 2.5rem;
    }

    .hsp-closing__photo {
        min-height: 100%;
    }

    .hsp-closing__photo::before {
        background: linear-gradient(90deg, var(--hsp-closing), transparent 42%);
    }
}

@media (min-width: 80rem) {
    .hsp-hero__words {
        width: 46%;
    }
}