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

   Its type is typography.md's: every text takes one of its roles, set in the Type roles block below and nowhere else, and its sizes
   are the tokens', in rem, not the design's (which sets its console in 9 to 13px and its titles in 31 to 65px with a tracking of
   -0.059em: 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 console under the hero's words and beside them from 64rem, a heading
   beside what it heads from 48rem. Where the page asks for a script (the console's views, the stages, the teams, the facilities)
   every answer is in the markup, and what chooses is a link to what it means, or a control `disabled` or `hidden`, until site.js
   makes it work; the capabilities and the questions need none.

   The space between rows, columns and items is 20px at the most (--gap-max, site.css); a painted band or card has the room it needs
   inside itself. A list has a line between two of its rows and none over the first or under the last. Everything is scoped to .cln;
   its colours are the --cln-* tokens, set again for the dark theme, and its text takes typography.md's two text colours through
   them. The deep navy band and the closing card are deep blue on both themes, as the design draws them. */
:root {
    --cln-surface: #ffffff;
    /* the text: headings and body text in typography.md's primary colour, small text in its secondary */
    --cln-ink: var(--text-primary);
    --cln-muted: var(--text-secondary);
    /* the quiet half of a heading (large text: 3:1 is the least) */
    --cln-faint: #66768a;
    --cln-eyebrow: #0a4ce9;
    --cln-blue: #0154e5;
    --cln-blue-hover: #0043bd;
    --cln-on-blue: #ffffff;
    --cln-blue-soft: #e8f1ff;
    --cln-blue-edge: #cbdcff;
    --cln-blue-ink: #0a3fb8;
    --cln-line: #e3e9f0;
    --cln-line-strong: #d3deec;
    --cln-wash: #f7f9fc;
    --cln-band: #f8fafc;
    --cln-band-blue: linear-gradient(135deg, #eaf3ff 0%, #f7faff 72%);
    --cln-crumb-chevron: #8790a8;
    /* what a status says */
    --cln-green: #0b7a57;
    --cln-dot: #17b982;
    --cln-dot-ring: #dcf7ef;
    --cln-green-soft: #e4f6ee;
    --cln-amber: #8a5200;
    --cln-amber-soft: #fff4e0;
    --cln-blue-pill: #0a3fb8;
    --cln-blue-pill-soft: #e5effe;
    /* the hero: a pale sky at its right with a glow and two rings behind the console, as the design draws it */
    --cln-hero-bg: linear-gradient(112deg, #ffffff 8%, #f5f9ff 55%, #e6f1ff 100%);
    --cln-glow: radial-gradient(circle, #c6e2ff 0, #e0efff 45%, transparent 73%);
    --cln-ring: rgb(78 151 240 / 0.22);
    /* the windows and cards on the page */
    --cln-card: #ffffff;
    --cln-card-edge: #dbe5f3;
    --cln-card-shadow: 0 18px 45px rgb(33 77 119 / 0.11);
    --cln-window-shadow: 0 28px 64px rgb(15 62 139 / 0.18), 0 6px 16px rgb(20 50 95 / 0.09);
    --cln-float-shadow: 0 12px 30px rgb(20 67 110 / 0.16);
    --cln-side: #f6f9fd;
    --cln-side-edge: #e5ebf3;
    --cln-nav-on: #e4efff;
    --cln-nav-icon: #5f7690;
    --cln-track: #e4edf6;
    --cln-track-from: #2478ee;
    --cln-track-to: #5bacf9;
    /* the stages' frame, the encounter's foot and the teams' figures */
    --cln-journey-bg: #f5f8fd;
    --cln-journey-edge: #e0e8f2;
    --cln-rail: #fafdff;
    --cln-timeline: #f3f8ff;
    --cln-figure-bg: #f8fbff;
    --cln-figure-edge: #e5edf7;
    --cln-avatar-bg: #dbe9fe;
    --cln-avatar-ink: #1d4fa8;
    --cln-avatar-edge: #bfd3f2;
    --cln-chip-bg: #e8f1ff;
    --cln-chip-ink: #3d5f8f;
    --cln-tag-edge: #d6e1ee;
    --cln-note-ring: #c5daf6;
    --cln-note-ink: #2d71d4;
    /* the deep navy band on trust */
    --cln-navy: #0f2851;
    --cln-navy-text: #d4dfef;
    --cln-navy-line: #496183;
    --cln-navy-eyebrow: #9cbbf7;
    --cln-navy-note: #a9b9d1;
    /* the closing call: a blue card with two rings of light */
    --cln-closing: linear-gradient(120deg, #0c43c2, #0757ed);
    --cln-closing-text: #dce8ff;
    --cln-closing-eyebrow: #dce8ff;
    --cln-closing-ring: rgb(255 255 255 / 0.15);
    --cln-closing-shadow: 0 24px 50px rgb(10 48 156 / 0.22);
    --cln-white-ink: #0643be;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --cln-surface: #131314;
        --cln-faint: #8d9bb0;
        --cln-eyebrow: #a8c7fa;
        --cln-blue: #a8c7fa;
        --cln-blue-hover: #c2d7fb;
        --cln-on-blue: #062e6f;
        --cln-blue-soft: rgb(168 199 250 / 0.14);
        --cln-blue-edge: rgb(168 199 250 / 0.3);
        --cln-blue-ink: #a8c7fa;
        --cln-line: rgb(255 255 255 / 0.09);
        --cln-line-strong: rgb(255 255 255 / 0.16);
        --cln-wash: #17181b;
        --cln-band: #161719;
        --cln-band-blue: linear-gradient(135deg, #15191f 0%, #141518 72%);
        --cln-crumb-chevron: #7f889c;
        --cln-green: #6dd5a8;
        --cln-dot: #4cd9a0;
        --cln-dot-ring: rgb(76 217 160 / 0.2);
        --cln-green-soft: rgb(109 213 168 / 0.12);
        --cln-amber: #f2c46d;
        --cln-amber-soft: rgb(242 196 109 / 0.12);
        --cln-blue-pill: #a8c7fa;
        --cln-blue-pill-soft: rgb(168 199 250 / 0.14);
        --cln-hero-bg: linear-gradient(112deg, #131722 8%, #131720 55%, #121a2b 100%);
        --cln-glow: radial-gradient(circle, rgb(70 120 200 / 0.3) 0, rgb(70 120 200 / 0.12) 45%, transparent 73%);
        --cln-ring: rgb(168 199 250 / 0.16);
        --cln-card: #1c1f25;
        --cln-card-edge: rgb(255 255 255 / 0.12);
        --cln-card-shadow: 0 18px 45px rgb(0 0 0 / 0.45);
        --cln-window-shadow: 0 28px 64px rgb(0 0 0 / 0.55);
        --cln-float-shadow: 0 12px 30px rgb(0 0 0 / 0.5);
        --cln-side: #181a1f;
        --cln-side-edge: rgb(255 255 255 / 0.09);
        --cln-nav-on: rgb(168 199 250 / 0.18);
        --cln-nav-icon: #8fa3bf;
        --cln-track: rgb(255 255 255 / 0.1);
        --cln-track-from: #4f8fe8;
        --cln-track-to: #7db8f7;
        --cln-journey-bg: #17181b;
        --cln-journey-edge: rgb(255 255 255 / 0.1);
        --cln-rail: #1a1c20;
        --cln-timeline: rgb(168 199 250 / 0.08);
        --cln-figure-bg: #202329;
        --cln-figure-edge: rgb(255 255 255 / 0.1);
        --cln-avatar-bg: rgb(168 199 250 / 0.18);
        --cln-avatar-ink: #c2d7fb;
        --cln-avatar-edge: rgb(168 199 250 / 0.3);
        --cln-chip-bg: rgb(168 199 250 / 0.14);
        --cln-chip-ink: #bcd0ee;
        --cln-tag-edge: rgb(255 255 255 / 0.18);
        --cln-note-ring: rgb(168 199 250 / 0.35);
        --cln-note-ink: #a8c7fa;
        --cln-navy: #08182f;
        --cln-closing: linear-gradient(120deg, #0a3496, #0a46c9);
        --cln-closing-shadow: 0 24px 50px rgb(0 0 0 / 0.4);
    }
}

:root[data-theme="dark"] {
    --cln-surface: #131314;
    --cln-faint: #8d9bb0;
    --cln-eyebrow: #a8c7fa;
    --cln-blue: #a8c7fa;
    --cln-blue-hover: #c2d7fb;
    --cln-on-blue: #062e6f;
    --cln-blue-soft: rgb(168 199 250 / 0.14);
    --cln-blue-edge: rgb(168 199 250 / 0.3);
    --cln-blue-ink: #a8c7fa;
    --cln-line: rgb(255 255 255 / 0.09);
    --cln-line-strong: rgb(255 255 255 / 0.16);
    --cln-wash: #17181b;
    --cln-band: #161719;
    --cln-band-blue: linear-gradient(135deg, #15191f 0%, #141518 72%);
    --cln-crumb-chevron: #7f889c;
    --cln-green: #6dd5a8;
    --cln-dot: #4cd9a0;
    --cln-dot-ring: rgb(76 217 160 / 0.2);
    --cln-green-soft: rgb(109 213 168 / 0.12);
    --cln-amber: #f2c46d;
    --cln-amber-soft: rgb(242 196 109 / 0.12);
    --cln-blue-pill: #a8c7fa;
    --cln-blue-pill-soft: rgb(168 199 250 / 0.14);
    --cln-hero-bg: linear-gradient(112deg, #131722 8%, #131720 55%, #121a2b 100%);
    --cln-glow: radial-gradient(circle, rgb(70 120 200 / 0.3) 0, rgb(70 120 200 / 0.12) 45%, transparent 73%);
    --cln-ring: rgb(168 199 250 / 0.16);
    --cln-card: #1c1f25;
    --cln-card-edge: rgb(255 255 255 / 0.12);
    --cln-card-shadow: 0 18px 45px rgb(0 0 0 / 0.45);
    --cln-window-shadow: 0 28px 64px rgb(0 0 0 / 0.55);
    --cln-float-shadow: 0 12px 30px rgb(0 0 0 / 0.5);
    --cln-side: #181a1f;
    --cln-side-edge: rgb(255 255 255 / 0.09);
    --cln-nav-on: rgb(168 199 250 / 0.18);
    --cln-nav-icon: #8fa3bf;
    --cln-track: rgb(255 255 255 / 0.1);
    --cln-track-from: #4f8fe8;
    --cln-track-to: #7db8f7;
    --cln-journey-bg: #17181b;
    --cln-journey-edge: rgb(255 255 255 / 0.1);
    --cln-rail: #1a1c20;
    --cln-timeline: rgb(168 199 250 / 0.08);
    --cln-figure-bg: #202329;
    --cln-figure-edge: rgb(255 255 255 / 0.1);
    --cln-avatar-bg: rgb(168 199 250 / 0.18);
    --cln-avatar-ink: #c2d7fb;
    --cln-avatar-edge: rgb(168 199 250 / 0.3);
    --cln-chip-bg: rgb(168 199 250 / 0.14);
    --cln-chip-ink: #bcd0ee;
    --cln-tag-edge: rgb(255 255 255 / 0.18);
    --cln-note-ring: rgb(168 199 250 / 0.35);
    --cln-note-ink: #a8c7fa;
    --cln-navy: #08182f;
    --cln-closing: linear-gradient(120deg, #0a3496, #0a46c9);
    --cln-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 figures of the console, of the teams and of the facilities */
.cln-stat__value,
.cln-figure__value,
.cln-metric__value {
    font-family: var(--font-sans);
    font-size: var(--fs-h3);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h3);
    letter-spacing: 0;
}

/* H4 (card title): sans 500 */
.cln-acc__name,
.cln-patient__name,
.cln-view__title,
.cln-org__title,
.cln-faq__question,
.cln-window__k {
    font-family: var(--font-sans);
    font-size: var(--fs-h4);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h4);
    letter-spacing: 0;
}

/* Body: sans 400 */
.cln-lead,
.cln-hero__lead,
.cln-pane__text,
.cln-team__text,
.cln-acc__text,
.cln-night__text,
.cln-closing__text,
.cln-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 */
.cln-hero__note,
.cln-card__words span,
.cln-window__search,
.cln-window__name span,
.cln-window__who span,
.cln-side__note,
.cln-date,
.cln-stat__label,
.cln-stat__note,
.cln-list__top span,
.cln-table td,
.cln-table__detail,
.cln-ledger__code,
.cln-patient__detail,
.cln-chip,
.cln-journey__demo,
.cln-count__of,
.cln-encounter__detail,
.cln-encounter__signal,
.cln-fact__label,
.cln-encounter__note,
.cln-figure__note,
.cln-row__label,
.cln-team__tag,
.cln-acc__line,
.cln-note__text,
.cln-metric__label,
.cln-chart__top span,
.cln-bar__name,
.cln-night__note,
.cln-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 console's names, pills, choices and table headers, the facts' values, the tags and the tools) */
.cln-card__words strong,
.cln-window__name strong,
.cln-window__who strong,
.cln-avatar,
.cln-nav,
.cln-list__top strong,
.cln-table th,
.cln-table td.cln-table__who,
.cln-table__name,
.cln-ledger__what,
.cln-ledger__amount,
.cln-pill,
.cln-strip__list,
.cln-step__name,
.cln-encounter__title,
.cln-encounter__name,
.cln-fact__value,
.cln-tab,
.cln-row__value,
.cln-note__title,
.cln-chipbtn,
.cln-report__name,
.cln-chart__top strong,
.cln-bar__value,
.cln-tags__item,
.cln-pills__item,
.cln-tool {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-small);
    letter-spacing: 0;
}

/* Buttons and navigation links: sans 500 */
.cln-btn,
.cln-crumbs__list,
.cln-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 */
.cln-eyebrow,
.cln-tag,
.cln-caption,
.cln-side__label {
    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;
}

/* Stat: mono 700 (the number of the stage) */
.cln-count {
    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;
}

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

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

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

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

.cln .cln-icon--medical {
    fill: currentColor;
}

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

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

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

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

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

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

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

.cln-line {
    display: block;
}

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

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

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

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

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

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

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

/* the tick before a line of the encounter's foot: a dot without its ring */
.cln-dot--tick {
    box-shadow: none;
}

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

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

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

/* paragraphs that are rows of their own words are as wide as their rows, not as the base's 70ch */
.cln-card__words,
.cln-view__crumb,
.cln-view__title,
.cln-date,
.cln-list__top,
.cln-patient__label,
.cln-patient__name,
.cln-patient__detail,
.cln-journey__demo,
.cln-pane__over,
.cln-pane__text,
.cln-count,
.cln-encounter__title,
.cln-encounter__who,
.cln-encounter__note,
.cln-controls__label,
.cln-team__over,
.cln-team__chip,
.cln-team__text,
.cln-team__tag,
.cln-note__title,
.cln-note__text,
.cln-org__over,
.cln-org__title,
.cln-report__scope,
.cln-chart__top,
.cln-night__text,
.cln-night__note,
.cln-closing__text,
.cln-closing__note,
.cln-caption,
.cln-hero__note,
.cln-side__label,
.cln-side__note,
.cln-strip__label {
    max-width: none;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    .cln-btn:hover .cln-icon--arrow-right {
        translate: 3px 0;
    }

    .cln-btn:hover .cln-icon--arrow-left {
        translate: -3px 0;
    }
}

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

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

/* a glow at the top right, as the design draws it */
.cln-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -16rem;
    right: -12rem;
    width: 38rem;
    height: 38rem;
    border-radius: 50%;
    background: var(--cln-glow);
    opacity: 0.8;
    pointer-events: none;
}

.cln-hero__inner {
    display: grid;
    gap: 1rem var(--gap-max);
    padding-block: 0.5rem var(--gap-max);
}

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

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

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

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

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

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

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

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

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

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

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

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

.cln-hero__note {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    margin: 1rem 0 0;
    color: var(--cln-muted);
}

/* a tick in a green disc, as the design draws it */
.cln-check {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--cln-green-soft);
    color: var(--cln-green);
}

.cln-check .icon {
    width: 0.75rem;
    height: 0.75rem;
}

/* the console and what lies over and under it: the window is a picture of an interface whose views a script chooses between */
.cln-hero__product {
    position: relative;
    width: 100%;
    max-width: 50rem;
    min-width: 0;
    margin-inline: auto;
}

/* two rings behind the window, as the design draws them */
.cln-hero__product::before,
.cln-hero__product::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: 1px solid var(--cln-ring);
    border-radius: 50%;
    pointer-events: none;
}

.cln-hero__product::before {
    top: -12rem;
    right: -15rem;
    width: 30rem;
    height: 30rem;
}

.cln-hero__product::after {
    top: -5rem;
    right: -9rem;
    width: 23rem;
    height: 23rem;
}

/* the window: a size container, so what it holds follows its own width, not the page's. It is a picture of an interface, so what does
   not fit it at 200% text is clipped by it. Below 34rem its three views are a row of choices over the work; from 34rem they are its
   side. Below 30rem it has no search, and its figures and its table give up room. */
.cln-window {
    container: cln-window / inline-size;
    position: relative;
    border: 1px solid var(--cln-card-edge);
    border-radius: 1rem;
    background: var(--cln-card);
    box-shadow: var(--cln-window-shadow);
    color: var(--cln-ink);
    overflow: hidden;
}

.cln-window__bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--cln-line);
}

.cln-window__brand {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
}

.cln-window__k {
    color: var(--cln-blue);
}

.cln-window__name,
.cln-window__who {
    display: grid;
    min-width: 0;
}

.cln-window__name span,
.cln-window__who span {
    color: var(--cln-muted);
}

.cln-window__search {
    display: none;
    flex: 1;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--cln-line);
    border-radius: 0.5rem;
    background: var(--cln-wash);
    color: var(--cln-muted);
    white-space: nowrap;
}

.cln-window__search .icon {
    flex: none;
    width: 1rem;
    height: 1rem;
}

.cln-window__search span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cln-window__user {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.cln-window__who {
    display: none;
}

.cln-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--cln-avatar-edge);
    border-radius: 50%;
    background: var(--cln-avatar-bg);
    color: var(--cln-avatar-ink);
}

.cln-avatar--lg {
    width: 3rem;
    height: 3rem;
}

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

/* the side: three buttons, `disabled` until the script makes them work */
.cln-side {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: 0.25rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--cln-side-edge);
    background: var(--cln-side);
}

.cln-side__label,
.cln-side__note {
    display: none;
    margin: 0;
}

.cln-side__label {
    color: var(--cln-muted);
}

.cln-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--cln-muted);
    text-align: left;
    cursor: pointer;
    transition: background-color 150ms var(--ease-standard), color 150ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.cln-nav:disabled {
    cursor: default;
    opacity: 1;
}

.cln-nav .icon {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    color: var(--cln-nav-icon);
}

.cln-nav[aria-pressed="true"] {
    background: var(--cln-nav-on);
    color: var(--cln-blue-ink);
}

.cln-nav[aria-pressed="true"] .icon {
    color: var(--cln-blue-ink);
}

.cln-nav:not(:disabled):hover {
    background: var(--cln-blue-soft);
    color: var(--cln-blue-ink);
}

.cln-nav:active:not(:disabled) {
    scale: var(--press-scale);
    transition-duration: 150ms, 150ms, var(--press-in);
}

.cln-side__note {
    align-items: flex-start;
    gap: 0.5rem;
    color: var(--cln-muted);
}

.cln-side__note .cln-dot {
    margin-top: 0.4375rem;
}

/* the work: one view at a time, the window's data-view saying which (the first until a visitor chooses, and for a page without a
   script) */
.cln-main {
    min-width: 0;
    padding: 1rem 1rem 1.5rem;
}

.cln-view {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.cln-window[data-view="overview"] .cln-view:not([data-v="overview"]),
.cln-window[data-view="queue"] .cln-view:not([data-v="queue"]),
.cln-window[data-view="billing"] .cln-view:not([data-v="billing"]) {
    display: none;
}

.cln-view__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
}

.cln-view__head > div {
    min-width: 0;
}

.cln-view__crumb {
    color: var(--cln-muted);
}

.cln-view__title {
    margin: 0.125rem 0 0;
    color: var(--cln-ink);
}

.cln-date {
    flex: none;
    margin: 0;
    color: var(--cln-muted);
    white-space: nowrap;
}

/* the figures: rows below 28rem, three cards from it */
.cln-stats {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.cln-stat__label {
    grid-column: 1;
    color: var(--cln-muted);
}

.cln-stat__value {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--cln-ink);
}

.cln-stat__note {
    grid-column: 1;
    color: var(--cln-green);
}

.cln-list__top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 0.75rem;
    margin: 0;
    color: var(--cln-ink);
}

.cln-list__top span {
    color: var(--cln-muted);
}

/* the queue, in a box that clips its rounded border */
.cln-records {
    min-width: 0;
    border: 1px solid var(--cln-line);
    border-radius: 0.5rem;
    overflow: hidden;
}

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

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

.cln-table th:last-child,
.cln-table td:last-child {
    padding-right: 0.75rem;
}

.cln-table th {
    background: var(--cln-wash);
    color: var(--cln-muted);
}

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

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

.cln-table__who {
    min-width: 0;
}

.cln-table__name,
.cln-table__detail {
    display: block;
}

.cln-table__detail {
    color: var(--cln-muted);
}

/* under 30rem the care team's column gives way: a name and where the visit stands are what a narrow window keeps */
.cln-table th:nth-child(2),
.cln-table td:nth-child(2) {
    display: none;
}

/* the recent charges: a name and a number, an amount and a status */
.cln-ledger {
    display: grid;
    margin: 0;
    padding: 0;
    border: 1px solid var(--cln-line);
    border-radius: 0.5rem;
    list-style: none;
    overflow: hidden;
}

.cln-ledger__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.25rem 0.75rem;
    padding: 0.5rem 0.75rem;
    color: var(--cln-ink);
}

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

.cln-ledger__what {
    display: grid;
    grid-column: 1 / -1;
    min-width: 0;
}

.cln-ledger__code {
    color: var(--cln-muted);
}

.cln-ledger__amount {
    white-space: nowrap;
}

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

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

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

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

/* the card that lies over the window's lower corner, by 1.25rem, which the work keeps clear (it has 1.5rem under its last line) */
.cln-card {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: fit-content;
    max-width: calc(100% - 1.5rem);
    margin: -1.25rem 0.75rem 0 auto;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--cln-card-edge);
    border-radius: 0.75rem;
    background: var(--cln-card);
    box-shadow: var(--cln-float-shadow);
    color: var(--cln-ink);
}

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

.cln-card__icon .icon {
    width: 1.25rem;
    height: 1.25rem;
}

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

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

.cln-card__tick {
    flex: none;
    margin-left: 0.5rem;
    color: var(--cln-green);
}

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

.cln-caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    margin: 0.75rem 0 0;
    color: var(--cln-muted);
}

/* ------------------------------------------------------------------ */
/* One connected platform                                              */
/* ------------------------------------------------------------------ */

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

.cln-strip__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 1.25rem;
    padding-block: 0.75rem;
}

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

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

.cln-strip__list li {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
}

/* ------------------------------------------------------------------ */
/* The six stages of a patient's visit                                  */
/* ------------------------------------------------------------------ */

/* the frame: a rail with the sample patient and the six stages, and the stage chosen. Under 48rem the rail is over the stage and its
   stages are boxes, as the design's phone has them; from 48rem it is beside it and they are rows. */
.cln-journey {
    display: grid;
    margin-top: 1rem;
    border: 1px solid var(--cln-journey-edge);
    border-radius: 1rem;
    background: var(--cln-journey-bg);
    overflow: hidden;
}

.cln-journey__rail {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    min-width: 0;
    padding: 1rem;
    border-bottom: 1px solid var(--cln-journey-edge);
    background: var(--cln-rail);
}

.cln-patient {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--cln-line);
}

.cln-patient__words {
    flex: 1 1 8rem;
    min-width: 0;
}

.cln-patient__label {
    color: var(--cln-muted);
}

.cln-patient__name {
    margin: 0.125rem 0 0;
    color: var(--cln-ink);
}

.cln-patient__detail {
    margin: 0;
    color: var(--cln-muted);
}

/* a small pill that says it is a sample or an example */
.cln-chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    margin: 0;
    padding: 0.125rem 0.625rem;
    border-radius: 999px;
    background: var(--cln-chip-bg);
    color: var(--cln-chip-ink);
    white-space: nowrap;
}

.cln-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.375rem;
}

.cln-step {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    min-width: 0;
    min-height: 3.5rem;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--cln-line-strong);
    border-radius: 0.5rem;
    background: var(--cln-card);
    color: var(--cln-ink);
    text-decoration: none;
    transition: background-color 150ms var(--ease-standard), color 150ms var(--ease-standard),
        border-color 150ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.cln-step .icon {
    display: none;
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--cln-faint);
    transition: translate var(--spring) var(--ease-spring);
}

.cln-step__no {
    color: var(--cln-muted);
}

.cln-step__name {
    min-width: 0;
}

.cln-step:hover {
    border-color: var(--cln-blue-edge);
    color: var(--cln-blue-ink);
}

.cln-step[aria-selected="true"] {
    border-color: var(--cln-blue-edge);
    background: var(--cln-blue-soft);
    color: var(--cln-blue-ink);
}

.cln-step[aria-selected="true"] .cln-step__no,
.cln-step[aria-selected="true"] .icon {
    color: var(--cln-blue-ink);
}

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

.cln-journey__demo {
    margin: 0;
    color: var(--cln-muted);
}

/* the stage: a size container, so what it holds follows its own width (the facts in a column or two) */
.cln-journey__stage {
    container: cln-stage / inline-size;
    display: grid;
    align-content: start;
    min-width: 0;
    padding: 1rem;
}

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

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

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

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

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

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

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

.cln-pane__text {
    margin: 0.5rem 0 0;
    max-width: 34rem;
    color: var(--cln-muted);
}

/* the number of the stage, and of how many */
.cln-count {
    display: flex;
    flex: none;
    align-items: baseline;
    gap: 0.25rem;
    margin: 0;
    color: var(--cln-eyebrow);
}

.cln-count__of {
    color: var(--cln-muted);
}

/* the window of the encounter: what the stage does to the visit */
.cln-encounter {
    border: 1px solid var(--cln-line);
    border-radius: 0.625rem;
    background: var(--cln-card);
    box-shadow: 0 16px 36px rgb(39 79 134 / 0.07);
    overflow: hidden;
}

.cln-encounter__top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--cln-line);
    background: var(--cln-wash);
}

.cln-encounter__dots {
    display: inline-flex;
    flex: none;
    gap: 0.25rem;
}

.cln-encounter__dots i {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--cln-line-strong);
}

.cln-encounter__title {
    min-width: 0;
    margin: 0;
    color: var(--cln-ink);
}

.cln-encounter__top .cln-pill {
    margin-left: auto;
}

.cln-encounter__patient {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--cln-line);
}

.cln-encounter__who {
    display: grid;
    flex: 1 1 8rem;
    min-width: 0;
    margin: 0;
}

.cln-encounter__name {
    color: var(--cln-ink);
}

.cln-encounter__detail {
    color: var(--cln-muted);
}

.cln-encounter__signal {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    color: var(--cln-green);
}

.cln-facts {
    display: grid;
    margin: 0;
    padding: 0.25rem 1rem;
}

.cln-fact {
    min-width: 0;
    padding-block: 0.5rem;
}

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

.cln-fact__label,
.cln-fact__value {
    display: block;
    margin: 0;
}

.cln-fact__label {
    color: var(--cln-muted);
}

.cln-fact__value {
    color: var(--cln-ink);
}

.cln-encounter__note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 1rem;
    background: var(--cln-timeline);
    color: var(--cln-muted);
}

.cln-encounter__note .cln-dot {
    margin-top: 0.4375rem;
}

/* the buttons that go back and on, `hidden` until the script makes tabs of the stages */
.cln-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
}

.cln-controls[hidden] {
    display: none;
}

.cln-controls__label {
    margin: 0;
    color: var(--cln-muted);
}

.cln-controls__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cln-controls .cln-btn {
    min-height: 2.75rem;
    padding-block: 0.5rem;
}

/* ------------------------------------------------------------------ */
/* What each team sees                                                 */
/* ------------------------------------------------------------------ */

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

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

.cln-teams__words,
.cln-teams__stage {
    min-width: 0;
}

.cln-teams__words .cln-link {
    margin-top: 0.25rem;
}

/* the choice: three links until the script makes tabs of them, with a line under them that the chosen one's underline lies over */
.cln-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    border-bottom: 1px solid var(--cln-line-strong);
}

.cln-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.5rem 0.125rem;
    color: var(--cln-muted);
    text-decoration: none;
    transition: color 150ms var(--ease-standard);
}

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

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

.cln-tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 2px;
    background: var(--cln-blue);
}

.cln-teams__panes {
    display: grid;
    gap: var(--gap-max);
}

.cln-team {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--cln-line-strong);
    border-top: 0;
    border-radius: 0 0 0.75rem 0.75rem;
    background: var(--cln-card);
    box-shadow: var(--cln-card-shadow);
}

.cln-team[hidden] {
    display: none;
}

/* with no script the three are cards of their own, one after another */
.cln-teams__stage:not(.is-ready) .cln-team + .cln-team {
    border-top: 1px solid var(--cln-line-strong);
    border-radius: 0.75rem;
}

.cln-team__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
}

.cln-team__over {
    margin: 0;
    color: var(--cln-muted);
}

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

.cln-team__title {
    margin: 0.25rem 0 0;
    color: var(--cln-ink);
}

.cln-team__text {
    margin: 0;
    max-width: 34rem;
    color: var(--cln-muted);
}

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

.cln-figure {
    display: grid;
    min-width: 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--cln-figure-edge);
    border-radius: 0.5rem;
    background: var(--cln-figure-bg);
}

.cln-figure__label {
    color: var(--cln-muted);
}

.cln-figure__value {
    color: var(--cln-blue-ink);
}

.cln-figure__note {
    color: var(--cln-muted);
}

.cln-rows {
    display: grid;
    margin: 0.25rem 0 0;
    padding: 0;
}

.cln-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 0.75rem;
    padding-block: 0.5rem;
}

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

.cln-row__label,
.cln-row__value {
    margin: 0;
}

.cln-row__label {
    color: var(--cln-muted);
}

.cln-row__value {
    color: var(--cln-ink);
    text-align: right;
}

.cln-team__tag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.25rem 0 0;
    color: var(--cln-green);
}

/* ------------------------------------------------------------------ */
/* What the platform covers: six things, one open at a time             */
/* ------------------------------------------------------------------ */

.cln-acc {
    margin-top: 1rem;
}

.cln-acc__item {
    min-width: 0;
}

/* a line between two things, none over the first or under the last (the list begins and ends where its words do) */
.cln-acc__item + .cln-acc__item {
    border-top: 1px solid var(--cln-line-strong);
}

.cln-acc__summary {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) 1.5rem;
    align-items: center;
    gap: 0.125rem 0.75rem;
    min-height: 3.5rem;
    padding-block: 0.75rem;
    list-style: none;
    cursor: pointer;
}

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

.cln-acc__item:first-child > .cln-acc__summary {
    padding-top: 0;
}

.cln-acc__no {
    grid-row: 1 / span 2;
    color: var(--cln-muted);
}

.cln-acc__name {
    grid-column: 2;
    min-width: 0;
    margin: 0;
    color: var(--cln-ink);
    overflow-wrap: anywhere;
    transition: color 150ms var(--ease-standard);
}

.cln-acc__line {
    grid-column: 2;
    min-width: 0;
    color: var(--cln-muted);
}

.cln-acc__plus {
    grid-column: 3;
    grid-row: 1 / span 2;
    justify-self: end;
    color: var(--cln-muted);
}

.cln-acc__plus .icon {
    display: block;
    transition: rotate var(--spring) var(--ease-spring), color 150ms var(--ease-standard);
}

.cln-acc__item[open] .cln-acc__name,
.cln-acc__item[open] .cln-acc__plus {
    color: var(--cln-eyebrow);
}

.cln-acc__item[open] .cln-acc__plus .icon {
    rotate: 45deg;
}

.cln-acc__summary:hover .cln-acc__name {
    color: var(--cln-eyebrow);
}

.cln-acc__detail {
    display: grid;
    gap: 0.75rem;
    padding: 0 0 1rem 3rem;
}

.cln-acc__item:last-child > .cln-acc__detail {
    padding-bottom: 0;
}

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

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

.cln-tags__item {
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--cln-tag-edge);
    border-radius: 0.375rem;
    color: var(--cln-muted);
}

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

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

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

/* ------------------------------------------------------------------ */
/* One clinic or a group of hospitals                                  */
/* ------------------------------------------------------------------ */

.cln-scale {
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    background: var(--cln-band-blue);
}

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

.cln-scale__words,
.cln-org {
    min-width: 0;
}

.cln-note {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1rem;
}

.cln-note__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--cln-note-ring);
    border-radius: 50%;
    background: var(--cln-card);
    color: var(--cln-note-ink);
}

.cln-note__icon .icon {
    width: 1.25rem;
    height: 1.25rem;
}

.cln-note > div {
    min-width: 0;
}

.cln-note__title {
    margin: 0;
    color: var(--cln-ink);
}

.cln-note__text {
    margin: 0.25rem 0 0;
    max-width: 28rem;
    color: var(--cln-muted);
}

/* the organisation view: a size container, so what it holds follows its own width (the figures and the bars) */
.cln-org {
    container: cln-org / inline-size;
    display: grid;
    align-content: start;
    gap: 0.75rem;
    padding: 1.25rem;
    border: 1px solid var(--cln-card-edge);
    border-radius: 0.875rem;
    background: var(--cln-card);
    box-shadow: var(--cln-card-shadow);
}

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

.cln-org__top > div {
    min-width: 0;
}

.cln-org__over {
    color: var(--cln-muted);
}

.cln-org__title {
    margin: 0.25rem 0 0;
    color: var(--cln-ink);
}

/* the choice: three links until the script makes tabs of them */
.cln-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cln-chipbtn {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--cln-line-strong);
    border-radius: 0.5rem;
    background: var(--cln-card);
    color: var(--cln-muted);
    text-decoration: none;
    transition: background-color 150ms var(--ease-standard), color 150ms var(--ease-standard),
        border-color 150ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.cln-chipbtn:hover {
    border-color: var(--cln-blue-edge);
    color: var(--cln-blue-ink);
}

.cln-chipbtn[aria-selected="true"] {
    border-color: var(--cln-blue-edge);
    background: var(--cln-blue-soft);
    color: var(--cln-blue-ink);
}

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

.cln-reports {
    display: grid;
}

.cln-report {
    display: grid;
    gap: 0.75rem;
    min-width: 0;
}

.cln-report[hidden] {
    display: none;
}

/* with no script every facility is in the page, one after another, with a line between two */
.cln-org:not(.is-ready) .cln-report + .cln-report {
    margin-top: 0.5rem;
    padding-top: var(--gap-max);
    border-top: 1px solid var(--cln-line);
}

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

.cln-report__scope .cln-tag {
    color: var(--cln-muted);
}

.cln-report__name {
    color: var(--cln-ink);
}

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

.cln-metric {
    display: grid;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--cln-figure-edge);
    border-radius: 0.5rem;
    background: var(--cln-figure-bg);
}

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

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

.cln-chart {
    display: grid;
    gap: 0.25rem;
    min-width: 0;
}

.cln-chart__top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 0.75rem;
    margin: 0;
    color: var(--cln-ink);
}

.cln-chart__top span {
    color: var(--cln-muted);
}

.cln-bars {
    display: grid;
    gap: 0.25rem;
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
}

.cln-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2rem;
    grid-template-areas: "name value" "track track";
    align-items: center;
    gap: 0 0.5rem;
    min-height: 2.75rem;
}

.cln-bar__name {
    grid-area: name;
    min-width: 0;
    color: var(--cln-muted);
}

.cln-bar__track {
    grid-area: track;
    width: 100%;
    height: 0.5rem;
    border: 0;
    border-radius: 999px;
    background: var(--cln-track);
    color: var(--cln-track-from);
    overflow: hidden;
    appearance: none;
}

.cln-bar__track::-webkit-progress-bar {
    border-radius: 999px;
    background: var(--cln-track);
}

.cln-bar__track::-webkit-progress-value {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cln-track-from), var(--cln-track-to));
}

.cln-bar__track::-moz-progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cln-track-from), var(--cln-track-to));
}

.cln-bar__value {
    grid-area: value;
    color: var(--cln-ink);
    text-align: right;
}

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

.cln-connect {
    display: grid;
    gap: 0 var(--gap-max);
    align-items: center;
}

.cln-connect > div {
    min-width: 0;
}

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

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

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

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

/* ------------------------------------------------------------------ */
/* Trust, on a deep navy band                                          */
/* ------------------------------------------------------------------ */

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

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

.cln-night__words,
.cln-night__body {
    min-width: 0;
}

.cln-night__text {
    margin: 0;
    max-width: 40rem;
    color: var(--cln-navy-text);
    text-wrap: pretty;
}

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

.cln-pills__item {
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--cln-navy-line);
    border-radius: 999px;
    color: #edf4ff;
}

.cln-night__note {
    margin: 0.75rem 0 0;
    max-width: 36rem;
    color: var(--cln-navy-note);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.cln-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(--cln-closing);
    box-shadow: var(--cln-closing-shadow);
    color: #ffffff;
    overflow: hidden;
}

/* two arcs of light in the card's top right corner, as the design draws its rings. They end above the button and its note, which a
   ring would cross (the words read 3.8:1 where a line of one lay behind them), and they are not drawn below 64rem, where the corner is
   under the words and the call is under them */
.cln-closing::before,
.cln-closing::after {
    content: "";
    display: none;
    position: absolute;
    z-index: -1;
    border: 1px solid var(--cln-closing-ring);
    border-radius: 50%;
    pointer-events: none;
}

.cln-closing__words,
.cln-closing__actions {
    position: relative;
    min-width: 0;
}

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

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

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

.cln-closing__actions {
    display: grid;
    justify-items: start;
    gap: 0.75rem;
}

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

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

/* the console: who is signed in from 26rem, the figures as cards and the ledger on one line from 28rem, the care team's column from
   30rem, the three views as a side from 34rem, and the search from 40rem */
@container cln-window (min-width: 26rem) {
    .cln-window__who {
        display: grid;
    }
}

@container cln-window (min-width: 28rem) {
    .cln-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cln-stat {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }

    .cln-stat__label,
    .cln-stat__value,
    .cln-stat__note {
        grid-column: 1;
        grid-row: auto;
    }

    .cln-ledger__row {
        grid-template-columns: minmax(0, 1fr) auto auto;
    }

    .cln-ledger__what {
        grid-column: auto;
    }
}

@container cln-window (min-width: 30rem) {
    .cln-table th:nth-child(2),
    .cln-table td:nth-child(2) {
        display: table-cell;
    }
}

/* the search is a picture of a field whose words are long: it is shown where they fit, not cut short by an ellipsis */
@container cln-window (min-width: 40rem) {
    .cln-window__search {
        display: flex;
    }
}

@container cln-window (min-width: 34rem) {
    .cln-window__body {
        grid-template-columns: 11rem minmax(0, 1fr);
    }

    .cln-side {
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 1rem 0.5rem;
        border-right: 1px solid var(--cln-side-edge);
        border-bottom: 0;
    }

    .cln-side__label {
        display: block;
        padding-inline: 0.75rem;
        margin-bottom: 0.25rem;
    }

    .cln-nav {
        width: 100%;
    }

    .cln-side__note {
        display: flex;
        margin-top: 0.75rem;
        padding-inline: 0.75rem;
    }

    .cln-main {
        padding: 1.25rem 1.25rem 1.5rem;
    }
}

/* under 10rem (a phone's window at 200% text) the window gives up its bar's brand and the care team's column is long gone: what is
   left is clipped by the window's edge, as it is a picture of an interface */
@container cln-window (max-width: 11.99rem) {
    .cln-window__bar {
        padding-inline: 0.5rem;
    }

    .cln-window__name {
        display: none;
    }
}

/* the stage: the facts in two columns from 26rem of its own width, with a line between two rows only */
@container cln-stage (min-width: 26rem) {
    .cln-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--gap-max);
    }

    .cln-fact + .cln-fact {
        border-top: 0;
    }

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

/* the organisation view: a bar of its own row from 24rem, its name, its length and its figure on one line */
@container cln-org (min-width: 24rem) {
    .cln-bar {
        grid-template-columns: minmax(6rem, 9rem) minmax(0, 1fr) 2rem;
        grid-template-areas: "name track value";
        gap: 0 0.75rem;
        min-height: 2.25rem;
    }
}

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

/* a page without a script has every stage, team and facility 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) .cln-pane ~ .cln-pane,
    [data-tabs]:not(.is-ready) .cln-team ~ .cln-team,
    [data-tabs]:not(.is-ready) .cln-report ~ .cln-report {
        display: none;
    }
}

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

@media (prefers-contrast: more) {
    .cln-hero::before,
    .cln-hero__product::before,
    .cln-hero__product::after,
    .cln-closing::before,
    .cln-closing::after {
        display: none;
    }

    .cln-window,
    .cln-card,
    .cln-stat,
    .cln-records,
    .cln-ledger,
    .cln-journey,
    .cln-step,
    .cln-encounter,
    .cln-team,
    .cln-figure,
    .cln-org,
    .cln-metric,
    .cln-chipbtn,
    .cln-tags__item,
    .cln-btn--quiet {
        border-color: var(--md-outline);
    }

    .cln-acc__item + .cln-acc__item,
    .cln-faq__item + .cln-faq__item,
    .cln-tool + .cln-tool,
    .cln-row + .cln-row,
    .cln-fact + .cln-fact,
    .cln-ledger__row + .cln-ledger__row,
    .cln-strip,
    .cln-tabs {
        border-color: var(--md-outline);
    }
}

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

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

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

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

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

    .cln-hero__note {
        animation-delay: 180ms;
    }

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

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

    .cln-view,
    .cln-pane:not([hidden]) > :not(.cln-pane__head),
    .cln-team:not([hidden]) > :not(.cln-team__head),
    .cln-report:not([hidden]) {
        animation: cln-swap var(--spring) var(--ease-spring) both;
    }
}

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

@media print {
    .cln-hero,
    .cln-teams,
    .cln-scale {
        background: none;
    }

    .cln-hero::before,
    .cln-hero__product::before,
    .cln-hero__product::after,
    .cln-closing::before,
    .cln-closing::after {
        display: none;
    }

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

    .cln-title--night,
    .cln-night__text,
    .cln-night__note,
    .cln-pills__item,
    .cln-closing__title,
    .cln-closing__text,
    .cln-closing__note {
        color: inherit;
    }
}

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

@media (min-width: 40rem) {
    .cln-journey__rail,
    .cln-journey__stage {
        padding: 1.25rem;
    }

    .cln-team {
        padding: 1.5rem;
    }

    .cln-org {
        padding: 1.5rem;
    }

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

    .cln-tool:nth-child(2) {
        border-top: 0;
    }

    .cln-closing {
        padding: 2rem;
    }

    .cln-acc__summary {
        grid-template-columns: 3rem minmax(0, 1fr) 1.5rem;
    }

    .cln-acc__detail {
        padding-left: 3.75rem;
    }
}

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

@media (min-width: 48rem) {
    /* the rail beside the stage, its stages rows with an arrow, a line between two */
    .cln-journey {
        grid-template-columns: minmax(0, 0.39fr) minmax(0, 0.61fr);
    }

    .cln-journey__rail {
        border-right: 1px solid var(--cln-journey-edge);
        border-bottom: 0;
    }

    .cln-steps {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .cln-step {
        flex-direction: row;
        align-items: center;
        gap: 0.75rem;
        min-height: 3.25rem;
        padding: 0.5rem;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

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

    .cln-step .icon {
        display: block;
        margin-left: auto;
    }

    .cln-step:hover,
    .cln-step[aria-selected="true"] {
        border-color: transparent;
        background: transparent;
    }

    .cln-step + .cln-step:hover,
    .cln-step + .cln-step[aria-selected="true"] {
        border-top-color: var(--cln-line);
    }

    /* the stage chosen is marked by a bar at its left as well as by its colour */
    .cln-step[aria-selected="true"] {
        box-shadow: inset 3px 0 0 var(--cln-blue);
    }

    /* the name and what it comes to side by side, and the tags at the right of what it covers */
    .cln-acc__summary {
        grid-template-columns: 3rem minmax(0, 1.2fr) minmax(0, 1fr) 1.5rem;
        gap: 0 1.25rem;
    }

    .cln-acc__no {
        grid-row: auto;
    }

    .cln-acc__name {
        grid-column: 2;
    }

    .cln-acc__line {
        grid-column: 3;
    }

    .cln-acc__plus {
        grid-column: 4;
        grid-row: auto;
    }

    .cln-acc__detail {
        grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
        align-items: end;
        gap: 0.75rem var(--gap-max);
        padding-left: 4.25rem;
    }

    .cln-tags {
        justify-content: flex-end;
    }
}

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

@media (min-width: 64rem) {
    /* the words at the left, the console at the right, level with the middle of the words */
    .cln-hero__inner {
        grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
        align-items: center;
    }

    .cln-hero__product {
        max-width: none;
        margin-inline: 0;
    }

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

    /* a heading beside what it heads, on the line they end on */
    .cln-head {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    }

    .cln-journey {
        grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
    }

    .cln-journey__rail {
        padding: 1.5rem;
    }

    .cln-journey__stage {
        padding: 1.5rem 2rem;
    }

    .cln-teams__inner {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }

    .cln-scale__inner {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }

    .cln-connect {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }

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

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

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

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

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

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

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

@media (min-width: 80rem) {
    .cln-hero__inner {
        grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr);
    }
}