/* The cloud and DevOps page (services/pages/cloud-and-devops.html), after its own design (2026-10-28: "cloud-and-devops page").
   Until then the page was drawn to the landing design (css/pages/landing.css), which has no rule for it now. Its hero is a simulated
   operations console drawn in HTML, which a visitor may set to an incident and back; the company's picture of a laptop among
   cloud providers, which the page had, is left, unused.

   Its type is typography.md's: every text takes one of its roles, set in the Type roles block below and nowhere else, and its sizes
   are the tokens', in rem, not the design's (which sets its console in 9 to 12px and its titles in 38 to 78px with a tracking of
   -0.07em: the console is set in the roles' sizes, so it is larger, and it gives way where its own width is short). Mobile first:
   one column, the console under the hero's words and beside them from 64rem, a heading beside what it heads from 64rem. Where the
   page asks for a script (the console, the choice of a stage, the choice of a way to host) every answer is in the markup, and what
   chooses is `hidden`, or a link to what it means, until site.js makes it work; the accordion 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. Everything is scoped to .cld; its colours are the --cld-* tokens, set again for the dark theme, and its text
   takes typography.md's two text colours through them. The console, the deployment band and the closing card are deep blue on both
   themes, as the design draws them. */

:root {
    --cld-surface: #ffffff;
    /* the text: headings and body text in typography.md's primary colour, small text in its secondary */
    --cld-ink: var(--text-primary);
    --cld-muted: var(--text-secondary);
    --cld-eyebrow: #0a4ce9;
    --cld-crumb-chevron: #8790a8;
    --cld-blue: #0154e5;
    --cld-blue-hover: #0043bd;
    --cld-on-blue: #ffffff;
    --cld-blue-soft: #e8f1ff;
    --cld-blue-soft-edge: #cbdcff;
    --cld-outline: #b4c9e8;
    --cld-outline-ink: #0f47a8;
    --cld-outline-bg: rgb(255 255 255 / 0.74);
    --cld-outline-hover: #eef6ff;
    --cld-line: #e2eaf4;
    --cld-line-strong: #d3deec;
    --cld-green-dot: #17b982;
    --cld-wash: #edf4ff;
    /* the hero: a pale sky with a light at its right, a ring at its foot, and a ring behind the console */
    --cld-hero-bg: radial-gradient(ellipse 54% 69% at 84% 23%, #ddebff 0, transparent 70%), linear-gradient(120deg, #f7faff 0, #f3f8ff 62%, #ecf5ff 100%);
    --cld-hero-ring: #cde3ff;
    --cld-frame: #bcd4fb;
    /* the console: deep blue on both themes, its text pale on it, its state green or amber */
    --cld-ops-bg: #0b1930;
    --cld-ops-top: #101f38;
    --cld-ops-foot: #0e1e37;
    --cld-ops-edge: #254268;
    --cld-ops-rule: #253c5b;
    --cld-ops-shadow: 0 42px 85px rgb(24 58 118 / 0.19), 0 15px 25px rgb(16 53 125 / 0.09);
    --cld-ops-ink: #f2f6fd;
    --cld-ops-text: #d3e0f3;
    --cld-ops-muted: #9bb2d0;
    --cld-ops-stamp: #98b6dc;
    --cld-ops-stamp-edge: #3a5073;
    --cld-ops-ok: #5fe0ba;
    --cld-ops-ok-line: #29deb2;
    --cld-ops-ok-dot: #37dba6;
    --cld-ops-ok-chip-bg: #15382f;
    --cld-ops-ok-chip-ink: #86f2cc;
    --cld-ops-ok-chip-edge: #24614d;
    --cld-ops-warn: #ffb69c;
    --cld-ops-warn-line: #ffb37d;
    --cld-ops-warn-dot: #ffab74;
    --cld-ops-warn-chip-bg: #493021;
    --cld-ops-warn-chip-ink: #ffd0b6;
    --cld-ops-warn-chip-edge: #7d5030;
    --cld-ops-select-bg: #162d4f;
    --cld-ops-select-edge: #3f5f8a;
    --cld-ops-action-bg: #1558db;
    --cld-ops-action-edge: #3e73d2;
    --cld-ops-action-hover: #2470f5;
    /* the deployment band, and what is on it */
    --cld-night: #081a36;
    --cld-night-rule: #334561;
    --cld-night-eyebrow: #9cc3fb;
    --cld-night-text: #b9cbe4;
    --cld-night-name: #aebfd7;
    --cld-night-num: #8fb4e4;
    --cld-night-tab-on: #123a74;
    --cld-night-tab-hover: #112d56;
    --cld-night-tab-line: #73b8ff;
    --cld-night-link: #a6cbff;
    --cld-term-bg: #0d1425;
    --cld-term-edge: #375274;
    --cld-term-bar: #172338;
    --cld-term-rule: #283d56;
    --cld-term-ink: #c4e8dc;
    --cld-term-note: #93aec6;
    --cld-term-file: #b4c8de;
    --cld-dot-a: #f89d8e;
    --cld-dot-b: #f2cb68;
    --cld-dot-c: #42ceaf;
    --cld-dot-off: #6984a5;
    /* the example architecture: a white card, its places on a pale ground */
    --cld-card: #ffffff;
    --cld-card-edge: #d7e4f6;
    --cld-card-shadow: 0 20px 65px rgb(62 114 193 / 0.11);
    --cld-card-rule: #e8edf5;
    --cld-node-bg: #f8fbff;
    --cld-node-edge: #e1e9f5;
    --cld-node-ink: #0c5ce8;
    --cld-swap: #5f84b8;
    --cld-mode-edge: #a9bddb;
    --cld-mode-ink: #1d4580;
    --cld-mode-hover: #e3eeff;
    --cld-light-ink: #0643be;
    --cld-light-hover: #dbe8ff;
    --cld-closing: linear-gradient(110deg, #081c49 8%, #0a3aa6 62%, #0b47d0 100%);
    --cld-closing-ring: rgb(255 255 255 / 0.22);
    --cld-closing-text: #d3e2fd;
    --cld-closing-eyebrow: #c4dcff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --cld-surface: #131314;
        --cld-eyebrow: #a8c7fa;
        --cld-crumb-chevron: #7f889c;
        --cld-blue: #a8c7fa;
        --cld-blue-hover: #c2d7fb;
        --cld-on-blue: #062e6f;
        --cld-blue-soft: rgb(168 199 250 / 0.14);
        --cld-blue-soft-edge: rgb(168 199 250 / 0.3);
        --cld-outline: rgb(255 255 255 / 0.2);
        --cld-outline-ink: #a8c7fa;
        --cld-outline-bg: rgb(255 255 255 / 0.04);
        --cld-outline-hover: rgb(168 199 250 / 0.12);
        --cld-line: rgb(255 255 255 / 0.08);
        --cld-line-strong: rgb(255 255 255 / 0.14);
        --cld-green-dot: #4cd9a0;
        --cld-wash: #17181b;
        --cld-hero-bg: radial-gradient(ellipse 54% 69% at 84% 23%, #1b2a47 0, transparent 70%), linear-gradient(120deg, #131722 0, #131720 62%, #121a2b 100%);
        --cld-hero-ring: rgb(168 199 250 / 0.18);
        --cld-frame: rgb(168 199 250 / 0.26);
        --cld-ops-shadow: 0 42px 85px rgb(0 0 0 / 0.55), 0 15px 25px rgb(0 0 0 / 0.35);
        --cld-card: #1c1f25;
        --cld-card-edge: rgb(255 255 255 / 0.12);
        --cld-card-shadow: 0 20px 65px rgb(0 0 0 / 0.45);
        --cld-card-rule: rgb(255 255 255 / 0.08);
        --cld-node-bg: #22262d;
        --cld-node-edge: rgb(255 255 255 / 0.1);
        --cld-node-ink: #a8c7fa;
        --cld-swap: #7fa3d6;
        --cld-mode-edge: rgb(255 255 255 / 0.22);
        --cld-mode-ink: #a8c7fa;
        --cld-mode-hover: rgb(168 199 250 / 0.12);
    }
}

:root[data-theme="dark"] {
    --cld-surface: #131314;
    --cld-eyebrow: #a8c7fa;
    --cld-crumb-chevron: #7f889c;
    --cld-blue: #a8c7fa;
    --cld-blue-hover: #c2d7fb;
    --cld-on-blue: #062e6f;
    --cld-blue-soft: rgb(168 199 250 / 0.14);
    --cld-blue-soft-edge: rgb(168 199 250 / 0.3);
    --cld-outline: rgb(255 255 255 / 0.2);
    --cld-outline-ink: #a8c7fa;
    --cld-outline-bg: rgb(255 255 255 / 0.04);
    --cld-outline-hover: rgb(168 199 250 / 0.12);
    --cld-line: rgb(255 255 255 / 0.08);
    --cld-line-strong: rgb(255 255 255 / 0.14);
    --cld-green-dot: #4cd9a0;
    --cld-wash: #17181b;
    --cld-hero-bg: radial-gradient(ellipse 54% 69% at 84% 23%, #1b2a47 0, transparent 70%), linear-gradient(120deg, #131722 0, #131720 62%, #121a2b 100%);
    --cld-hero-ring: rgb(168 199 250 / 0.18);
    --cld-frame: rgb(168 199 250 / 0.26);
    --cld-ops-shadow: 0 42px 85px rgb(0 0 0 / 0.55), 0 15px 25px rgb(0 0 0 / 0.35);
    --cld-card: #1c1f25;
    --cld-card-edge: rgb(255 255 255 / 0.12);
    --cld-card-shadow: 0 20px 65px rgb(0 0 0 / 0.45);
    --cld-card-rule: rgb(255 255 255 / 0.08);
    --cld-node-bg: #22262d;
    --cld-node-edge: rgb(255 255 255 / 0.1);
    --cld-node-ink: #a8c7fa;
    --cld-swap: #7fa3d6;
    --cld-mode-edge: rgb(255 255 255 / 0.22);
    --cld-mode-ink: #a8c7fa;
    --cld-mode-hover: rgb(168 199 250 / 0.12);
}

/* ------------------------------------------------------------------ */
/* 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; an input is typography.md's form input by site.css's base,
   and the activity of the stages is its code. */

/* H4 (card title): sans 500 */
.cld-ops__title,
.cld-metric__value,
.cld-give__title,
.cld-pipe__name,
.cld-acc__name,
.cld-faq__question {
    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 */
.cld-lead,
.cld-hero__lead,
.cld-give__text,
.cld-deploy__lead,
.cld-pipe__body,
.cld-acc__text,
.cld-host__text,
.cld-faq__answer,
.cld-closing__text {
    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 */
.cld-notes,
.cld-ops__path,
.cld-ops__subtitle,
.cld-metric__label,
.cld-metric__note,
.cld-chart__head,
.cld-chart__caption,
.cld-event,
.cld-ops__hint,
.cld-aside,
.cld-node__caption,
.cld-arch__summary,
.cld-term__file {
    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, the chip, the choice of a way to host, the places of an architecture, the technologies) */
.cld-ops__name,
.cld-chip,
.cld-mode,
.cld-node__name,
.cld-arch__title,
.cld-tech__item {
    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 */
.cld-btn,
.cld-crumbs__list,
.cld-next,
.cld-ops__action {
    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 */
.cld-eyebrow,
.cld-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                                                            */
/* ------------------------------------------------------------------ */

.cld {
    background: var(--cld-surface);
    color: var(--cld-ink);
}

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

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

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

/* a section's heading (an h2, the H2 role), its lines balanced */
.cld-title {
    margin: 0.5rem 0 0;
    color: var(--cld-ink);
    text-wrap: balance;
}

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

/* a heading's sentences, each on a line of its own where it has room */
.cld-line {
    display: block;
}

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

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

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

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

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

/* paragraphs that are rows of their own words are as wide as their rows, not as the base's 70ch */
.cld-notes,
.cld-ops__path,
.cld-ops__subtitle,
.cld-chart__head,
.cld-chart__caption,
.cld-ops__hint,
.cld-aside,
.cld-node__caption,
.cld-arch__summary,
.cld-tech__label {
    max-width: none;
}

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

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

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

.cld-btn--filled {
    background: var(--cld-blue);
    color: var(--cld-on-blue);
    box-shadow: 0 11px 20px -13px var(--cld-blue);
}

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

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

.cld-btn--outlined:hover {
    background: var(--cld-outline-hover);
    color: var(--cld-outline-ink);
}

/* on the closing card: a white pill */
.cld-btn--light {
    background: #ffffff;
    color: var(--cld-light-ink);
}

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

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

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

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

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

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

/* a ring, from the foot at the left, as the design draws it */
.cld-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: -20%;
    bottom: -42%;
    width: 70%;
    height: 34rem;
    border: 1px solid var(--cld-hero-ring);
    border-radius: 50%;
    rotate: 14deg;
    pointer-events: none;
}

.cld-hero__inner {
    padding-block: 0 1.75rem;
}

.cld-hero__grid {
    display: grid;
    gap: var(--gap-max);
    align-items: center;
    margin-top: 0.5rem;
}

.cld-hero__words,
.cld-stage {
    min-width: 0;
}

.cld-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--cld-muted);
}

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

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

/* a target as tall as a fingertip */
.cld-crumbs__link {
    display: inline-flex;
    align-items: center;
    min-height: 2.5rem;
    padding-inline: 0.125rem;
    color: inherit;
    text-decoration: none;
}

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

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

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

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

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

/* what it stands for: three short notes, each after a green dot */
.cld-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--cld-muted);
}

.cld-notes__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.cld-notes__item::before {
    content: "";
    flex: none;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--cld-green-dot);
}

/* ------------------------------------------------------------------ */
/* The simulated console: a monitoring window in a healthy state and while an incident is handled */
/* ------------------------------------------------------------------ */

.cld-stage {
    position: relative;
}

/* what the console wears while it is handling an incident: amber where it was green */
.cld-ops {
    --cld-state-ink: var(--cld-ops-ok);
    --cld-state-dot: var(--cld-ops-ok-dot);
    --cld-chip-bg: var(--cld-ops-ok-chip-bg);
    --cld-chip-ink: var(--cld-ops-ok-chip-ink);
    --cld-chip-edge: var(--cld-ops-ok-chip-edge);
}

.cld-ops[data-state="incident"] {
    --cld-state-ink: var(--cld-ops-warn);
    --cld-state-dot: var(--cld-ops-warn-dot);
    --cld-chip-bg: var(--cld-ops-warn-chip-bg);
    --cld-chip-ink: var(--cld-ops-warn-chip-ink);
    --cld-chip-edge: var(--cld-ops-warn-chip-edge);
}

.cld-ops {
    container: cld-ops / inline-size;
    position: relative;
    max-width: 43rem;
    margin-inline: auto;
    border: 1px solid var(--cld-ops-edge);
    border-radius: 1.1875rem;
    background: var(--cld-ops-bg);
    color: var(--cld-ops-text);
    box-shadow: var(--cld-ops-shadow);
    overflow: hidden;
}

.cld-ops__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--cld-ops-top);
    border-bottom: 1px solid var(--cld-ops-rule);
}

.cld-ops__brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0;
}

/* three dots in the corner of a window */
.cld-dots {
    display: inline-flex;
    flex: none;
    gap: 0.375rem;
}

.cld-dots i {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--cld-dot-off);
}

.cld-ops .cld-dots i:nth-child(1) {
    background: var(--cld-dot-a);
}

.cld-ops .cld-dots i:nth-child(2) {
    background: var(--cld-dot-b);
}

.cld-ops .cld-dots i:nth-child(3) {
    background: var(--cld-dot-c);
}

.cld-ops__name {
    color: var(--cld-ops-text);
}

.cld-ops__name strong {
    color: #ffffff;
}

.cld-ops__stamp {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--cld-ops-stamp-edge);
    border-radius: 0.375rem;
    color: var(--cld-ops-stamp);
}

.cld-ops__body {
    padding: 1rem;
}

.cld-ops__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.cld-ops__path {
    margin: 0;
    color: var(--cld-ops-muted);
}

.cld-ops__env {
    min-width: 0;
    max-width: 100%;
}

/* the choice of environment: a select in the console's own colours, a target as tall as a fingertip */
.cld-ops__select {
    max-width: 100%;
    min-height: 2.75rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--cld-ops-select-edge);
    border-radius: 0.5rem;
    background: var(--cld-ops-select-bg);
    color: #ffffff;
    color-scheme: dark;
    cursor: pointer;
}

.cld-ops__select option {
    background: var(--cld-ops-select-bg);
    color: #ffffff;
}

.cld-ops__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-top: 0.75rem;
}

.cld-ops__words {
    flex: 1 1 12rem;
    min-width: 0;
}

.cld-ops__title {
    margin: 0;
    color: var(--cld-ops-ink);
}

.cld-ops__subtitle {
    margin: 0.125rem 0 0;
    color: var(--cld-ops-muted);
}

/* how it is, in a chip with a dot: green, or amber while an incident is handled; a chip that wraps is a rounded box, not a pill */
.cld-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--cld-chip-edge);
    border-radius: 1rem;
    background: var(--cld-chip-bg);
    color: var(--cld-chip-ink);
}

.cld-chip::before {
    content: "";
    flex: none;
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: var(--cld-state-dot);
    box-shadow: 0 0 0 4px rgb(255 255 255 / 0.08);
}

/* three figures between two rules */
.cld-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 1rem 0 0;
    border-block: 1px solid var(--cld-ops-rule);
}

.cld-metric {
    min-width: 0;
    padding: 0.75rem 0.625rem;
}

.cld-metric + .cld-metric {
    border-left: 1px solid var(--cld-ops-rule);
}

.cld-metric dt,
.cld-metric dd {
    margin: 0;
    overflow-wrap: anywhere;
}

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

.cld-metric__value {
    margin-top: 0.125rem;
    color: var(--cld-ops-ink);
}

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

/* the figure an incident turns to the colour of an alert */
.cld-metric .cld-warn {
    color: var(--cld-ops-warn);
}

.cld-chart {
    margin-top: 1rem;
}

.cld-chart__head,
.cld-chart__caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.125rem 0.75rem;
    margin: 0;
}

.cld-chart__head {
    color: var(--cld-ops-text);
}

.cld-chart__head > span:last-child,
.cld-chart__caption {
    color: var(--cld-ops-muted);
}

/* under the chart the two ends of the scale stay at the two ends, and what the demo says wraps between them */
.cld-chart__caption {
    flex-wrap: nowrap;
    gap: 0.75rem;
}

.cld-chart__caption > span {
    flex: none;
}

.cld-chart__caption > span:nth-child(2) {
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
    text-align: center;
}

.cld-chart__svg {
    width: 100%;
    height: 6.5rem;
    margin-top: 0.5rem;
}

.cld-chart__caption {
    margin-top: 0.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--cld-ops-rule);
}

/* the chart's line and the light under it: green, amber for the chart of an incident */
.cld-chart__svg {
    --cld-chart-line: var(--cld-ops-ok-line);
}

.cld-chart__svg[data-v="incident"] {
    --cld-chart-line: var(--cld-ops-warn-line);
}

.cld-chart__grid {
    fill: none;
    stroke: var(--cld-ops-rule);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.cld-chart__line {
    stroke: var(--cld-chart-line);
}

.cld-chart__stop {
    stop-color: var(--cld-chart-line);
    stop-opacity: 0.19;
}

.cld-chart__stop--end {
    stop-opacity: 0;
}

/* the log: what happened, after a dot, and when at the other end of its line */
.cld-events {
    margin: 0;
    padding: 0.75rem 0 0;
    list-style: none;
}

.cld-event {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.625rem;
    color: var(--cld-ops-text);
}

.cld-event + .cld-event {
    margin-top: 0.5rem;
}

.cld-event__text {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cld-event__text::before {
    content: "";
    flex: none;
    width: 0.375rem;
    height: 0.375rem;
    margin-top: calc((1lh - 0.375rem) / 2);
    border-radius: 50%;
    background: var(--cld-ops-ok-dot);
}

.cld-event--warning .cld-event__text::before {
    background: var(--cld-ops-warn-dot);
}

/* the time keeps its words whole, and takes at most half the line, so that a long entry wraps beside it, not through it */
.cld-event__time {
    flex: none;
    max-width: 50%;
    color: var(--cld-ops-muted);
    overflow-wrap: anywhere;
    text-align: right;
}

.cld-ops__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--cld-ops-rule);
    background: var(--cld-ops-foot);
}

.cld-ops__hint {
    flex: 1 1 10rem;
    min-width: 0;
    margin: 0;
    color: var(--cld-ops-muted);
}

.cld-ops__action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--cld-ops-action-edge);
    border-radius: 0.5rem;
    background: var(--cld-ops-action-bg);
    color: #ffffff;
    cursor: pointer;
    overflow-wrap: anywhere;
    text-align: left;
    transition: background-color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.cld-ops__action:hover {
    background: var(--cld-ops-action-hover);
}

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

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

/* What changes with the state is in the markup once for each (a .cld-v inline, a .cld-vb block, with its data-v); the one that the
   console's data-state names is shown, and the healthy one until a visitor chooses the other. The example architectures work the
   same way, by their section's data-mode. */
.cld-v,
.cld-vb {
    display: none;
}

.cld-ops[data-state="healthy"] .cld-v[data-v="healthy"],
.cld-ops[data-state="incident"] .cld-v[data-v="incident"],
.cld-host[data-mode="own"] .cld-v[data-v="own"],
.cld-host[data-mode="cloud"] .cld-v[data-v="cloud"],
.cld-host[data-mode="managed"] .cld-v[data-v="managed"] {
    display: inline;
}

.cld-ops[data-state="healthy"] .cld-vb[data-v="healthy"],
.cld-ops[data-state="incident"] .cld-vb[data-v="incident"] {
    display: block;
}

/* the console is narrow when a phone holds it at 150% text or more: its figures are one under another */
@container cld-ops (max-width: 17rem) {
    .cld-metrics {
        grid-template-columns: minmax(0, 1fr);
    }

    .cld-metric + .cld-metric {
        border-top: 1px solid var(--cld-ops-rule);
        border-left: 0;
    }
}

@container cld-ops (min-width: 30rem) {
    .cld-ops__top,
    .cld-ops__foot {
        padding-inline: 1.5rem;
    }

    .cld-ops__body {
        padding: 1.25rem 1.5rem;
    }

    .cld-chart__svg {
        height: 8rem;
    }

    .cld-metric {
        padding-inline: 1rem;
    }
}

/* ------------------------------------------------------------------ */
/* What infrastructure should give: a heading and a line, and three things */
/* ------------------------------------------------------------------ */

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

.cld-intro__head {
    min-width: 0;
}

.cld-intro .cld-lead {
    margin-top: 0;
}

.cld-gives {
    display: grid;
    margin: var(--gap-max) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--cld-line-strong);
}

.cld-give {
    min-width: 0;
    padding: 1rem 0;
}

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

.cld-give__no {
    color: var(--cld-eyebrow);
}

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

.cld-give__text {
    margin: 0.5rem 0 0;
    max-width: 24rem;
    color: var(--cld-muted);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* A controlled deployment: four stages and the activity each shows, on a deep blue band */
/* ------------------------------------------------------------------ */

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

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

.cld-deploy__top > * {
    min-width: 0;
}

.cld-deploy__lead {
    max-width: 28rem;
    margin: 0;
    color: var(--cld-night-text);
    text-wrap: pretty;
}

.cld-pipe {
    margin-top: var(--gap-max);
}

/* the choice: four links, a word over a name, in a row; two and two on a phone */
.cld-pipe__nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-block: 1px solid var(--cld-night-rule);
}

.cld-pipe__tab {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    min-height: 4.25rem;
    padding: 0.75rem 1rem;
    border-right: 1px solid var(--cld-night-rule);
    color: var(--cld-night-name);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: background-color 200ms var(--ease-standard), color 200ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.cld-pipe__tab:nth-child(2n) {
    border-right: 0;
}

.cld-pipe__tab:nth-child(n + 3) {
    border-top: 1px solid var(--cld-night-rule);
}

.cld-pipe__tab .cld-tag {
    color: var(--cld-night-num);
}

.cld-pipe__name {
    color: inherit;
}

.cld-pipe__tab:hover {
    background: var(--cld-night-tab-hover);
    color: #ffffff;
}

.cld-pipe__tab[aria-selected="true"] {
    background: var(--cld-night-tab-on);
    box-shadow: inset 0 3px 0 var(--cld-night-tab-line);
    color: #ffffff;
}

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

.cld-pipe__panels {
    min-width: 0;
}

.cld-pipe__panel {
    display: grid;
    gap: var(--gap-max);
    min-width: 0;
    padding-top: var(--gap-max);
}

.cld-pipe__panel + .cld-pipe__panel {
    margin-top: var(--gap-max);
    border-top: 1px solid var(--cld-night-rule);
}

.cld-pipe__copy {
    min-width: 0;
}

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

.cld-pipe__title {
    margin: 0.5rem 0 0;
    color: #ffffff;
    text-wrap: balance;
}

.cld-pipe__body {
    margin: 0.75rem 0 0;
    max-width: 28rem;
    color: var(--cld-night-text);
    text-wrap: pretty;
}

.cld-pipe__copy [data-tabs-controls] {
    display: block;
    margin-top: 0.25rem;
}

.cld-next {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cld-night-link);
    cursor: pointer;
    overflow-wrap: anywhere;
    text-align: left;
    transition: scale var(--spring-quick) var(--ease-spring);
}

.cld-next:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.cld-next:active {
    scale: var(--press-scale);
    transition-duration: var(--press-in);
}

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

/* the activity: a window with a file's name, its lines as a terminal prints them, the comment at its end set apart */
.cld-term {
    min-width: 0;
    border: 1px solid var(--cld-term-edge);
    border-radius: 0.875rem;
    background: var(--cld-term-bg);
    overflow: hidden;
}

.cld-term__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--cld-term-rule);
    background: var(--cld-term-bar);
}

.cld-term__file {
    min-width: 0;
    margin: 0 0 0 0.5rem;
    color: var(--cld-term-file);
    overflow-wrap: anywhere;
}

.cld-term .cld-dots i {
    background: var(--cld-dot-off);
}

/* the site's own code has a pale ground and padding; here the whole block is the ground */
.cld-term__pre {
    margin: 0;
    padding: 1.25rem 1.5rem;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--cld-term-ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cld-term__pre code {
    padding: 0;
    border-radius: 0;
    background: none;
    color: inherit;
}

.cld-term__note {
    color: var(--cld-term-note);
}

/* ------------------------------------------------------------------ */
/* A heading beside what it heads                                       */
/* ------------------------------------------------------------------ */

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

.cld-split__head {
    min-width: 0;
}

/* a line that says what the work is, after a small mark, under a rule */
.cld-aside {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--cld-line-strong);
    color: var(--cld-muted);
}

.cld-aside .icon {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--cld-eyebrow);
}

.cld-aside > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* What the company owns with a client: six things that open             */
/* ------------------------------------------------------------------ */

.cld-acc {
    min-width: 0;
    border-top: 1px solid var(--cld-line-strong);
}

.cld-acc__item {
    border-bottom: 1px solid var(--cld-line-strong);
}

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

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

.cld-acc__no {
    color: var(--cld-eyebrow);
}

.cld-acc__name {
    color: var(--cld-ink);
    overflow-wrap: anywhere;
    transition: color 200ms var(--ease-standard);
}

.cld-acc__plus {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--cld-line-strong);
    border-radius: 50%;
    color: var(--cld-eyebrow);
    transition: rotate var(--spring) var(--ease-spring), background-color 200ms var(--ease-standard),
        border-color 200ms var(--ease-standard);
}

.cld-acc__plus .icon {
    width: 1rem;
    height: 1rem;
}

.cld-acc__item[open] > .cld-acc__summary .cld-acc__plus {
    border-color: var(--cld-blue-soft-edge);
    background: var(--cld-blue-soft);
    rotate: 45deg;
}

.cld-acc__item[open] > .cld-acc__summary .cld-acc__name {
    color: var(--cld-eyebrow);
}

@media (hover: hover) {
    .cld-acc__item:not([open]) > .cld-acc__summary:hover .cld-acc__name {
        color: var(--cld-eyebrow);
    }
}

.cld-acc__detail {
    max-width: 62rem;
    padding: 0 0.125rem 1rem 3rem;
}

/* a long word breaks rather than push the page sideways, at 200% text on a small screen */
.cld-acc__text {
    min-width: 0;
    margin: 0;
    max-width: 40rem;
    overflow-wrap: anywhere;
    color: var(--cld-muted);
    text-wrap: pretty;
}

/* 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) {
    .cld-acc__item,
    .cld-faq__item {
        interpolate-size: allow-keywords;
    }

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

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

/* ------------------------------------------------------------------ */
/* Where the application runs: three ways to host it, on a pale band     */
/* ------------------------------------------------------------------ */

.cld-host {
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    background: var(--cld-wash);
}

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

.cld-host__words {
    min-width: 0;
}

.cld-host__text {
    margin: 0.75rem 0 0;
    max-width: 30rem;
    color: var(--cld-muted);
    text-wrap: pretty;
}

/* the choice: three pills, one pressed */
.cld-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.cld-mode {
    min-height: 2.75rem;
    max-width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid var(--cld-mode-edge);
    border-radius: 999px;
    background: transparent;
    color: var(--cld-mode-ink);
    cursor: pointer;
    overflow-wrap: anywhere;
    transition: background-color 200ms var(--ease-standard), border-color 200ms var(--ease-standard),
        color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.cld-mode:hover {
    background: var(--cld-mode-hover);
}

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

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

/* the example architecture: a card, its three places joined by arrows */
.cld-arch {
    container: cld-arch / inline-size;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--cld-card-edge);
    border-radius: 1.375rem;
    background: var(--cld-card);
    box-shadow: var(--cld-card-shadow);
}

.cld-arch__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--cld-card-rule);
}

.cld-arch__title {
    min-width: 0;
    margin: 0;
    color: var(--cld-ink);
}

.cld-arch__tag {
    color: var(--cld-muted);
}

.cld-topo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: 0.5rem;
    padding-block: 1rem;
}

.cld-topo__swap {
    display: grid;
    place-items: center;
    color: var(--cld-swap);
}

.cld-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 1rem 0.5rem;
    border: 1px solid var(--cld-node-edge);
    border-radius: 0.75rem;
    background: var(--cld-node-bg);
    text-align: center;
}

.cld-node > .icon {
    flex: none;
    width: 1.875rem;
    height: 1.875rem;
    color: var(--cld-node-ink);
}

.cld-node__words {
    min-width: 0;
}

.cld-node__name,
.cld-node__caption {
    margin: 0;
    overflow-wrap: anywhere;
}

.cld-node__name {
    color: var(--cld-ink);
}

.cld-node__caption {
    color: var(--cld-muted);
}

.cld-arch__summary {
    margin: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--cld-card-rule);
    color: var(--cld-muted);
}

.cld-arch__summary strong {
    color: var(--cld-eyebrow);
}

/* a card too narrow for three places side by side has them one under another, each an icon beside its words, the arrows between
   them pointing down */
@container cld-arch (max-width: 32rem) {
    .cld-topo {
        grid-template-columns: minmax(0, 1fr);
    }

    .cld-node {
        flex-direction: row;
        justify-content: flex-start;
        text-align: left;
    }

    .cld-topo__swap {
        rotate: 90deg;
    }
}

/* ------------------------------------------------------------------ */
/* The technologies it works with: a strip                              */
/* ------------------------------------------------------------------ */

.cld-tech {
    border-bottom: 1px solid var(--cld-line);
    background: var(--cld-surface);
}

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

.cld-tech__label {
    color: var(--cld-muted);
}

.cld-tech__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.25rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cld-tech__item {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    color: var(--cld-ink);
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* The questions                                                       */
/* ------------------------------------------------------------------ */

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

.cld-faq__head {
    min-width: 0;
}

.cld-faq__list {
    min-width: 0;
    border-top: 1px solid var(--cld-line-strong);
}

.cld-faq__item {
    border-bottom: 1px solid var(--cld-line-strong);
}

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

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

/* a long word breaks rather than push the plus out of the page, at 200% text on a small screen */
.cld-faq__question > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

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

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

@media (hover: hover) {
    .cld-faq__item:not([open]) > .cld-faq__question:hover {
        color: var(--cld-eyebrow);
    }
}

.cld-faq__answer {
    padding-bottom: 1.25rem;
    color: var(--cld-muted);
}

.cld-faq__answer p {
    max-width: 44rem;
    margin: 0;
}

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

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

.cld-closing {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-max);
    padding: 1.75rem 1.25rem;
    overflow: hidden;
    border-radius: clamp(1rem, 1.5vw, 1.5rem);
    background: var(--cld-closing);
    color: #ffffff;
}

/* a ring at its foot, from 72rem: on a narrower card its words reach across it, and a ring's line lay over them */
.cld-closing::before {
    content: "";
    display: none;
    position: absolute;
    z-index: -1;
    bottom: -20rem;
    right: 14%;
    width: 24.375rem;
    height: 24.375rem;
    border: 1px solid var(--cld-closing-ring);
    border-radius: 50%;
    pointer-events: none;
}

/* the words are as wide as their words, in a column of the card: a long word breaks (`anywhere`, which the heading's own
   `break-word` is not: it does not shorten what the words ask for) rather than push the card out of the page, at 200% text on a
   small screen */
.cld-closing__words,
.cld-closing__words > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

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

.cld-closing__title {
    max-width: 40rem;
    margin: 0.5rem 0 0;
    color: #ffffff;
    text-wrap: balance;
}

.cld-closing__text {
    max-width: 38rem;
    margin: 0.75rem 0 0;
    color: var(--cld-closing-text);
    text-wrap: pretty;
}

.cld-closing__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

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

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

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

@media (min-width: 40rem) {
    .cld-pipe__nav {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cld-pipe__tab:nth-child(2n) {
        border-right: 1px solid var(--cld-night-rule);
    }

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

    .cld-pipe__tab:last-child {
        border-right: 0;
    }

    .cld-arch {
        padding: 1.5rem;
    }
}

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

@media (min-width: 48rem) {
    .cld-intro {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    }

    .cld-deploy__top {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    }

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

    .cld-give {
        padding-block: 1rem 0;
    }

    .cld-give + .cld-give {
        border-top: 0;
        border-left: 1px solid var(--cld-line);
        padding-left: 1.25rem;
    }

    .cld-give:not(:last-child) {
        padding-right: 1.25rem;
    }
}

/* ------------------------------------------------------------------ */
/* From 64rem: the console is beside the words, a heading beside what it heads */
/* ------------------------------------------------------------------ */

@media (min-width: 64rem) {
    .cld-hero__inner {
        padding-block: 0 2.25rem;
    }

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

    /* the ring the design draws behind the console, turned a little, as its frame */
    .cld-stage::before {
        content: "";
        position: absolute;
        inset: -1.25rem -1rem 0 -1.5rem;
        border: 1px solid var(--cld-frame);
        border-radius: 2.25rem;
        rotate: 2.2deg;
        pointer-events: none;
    }

    /* beside the words the console is as wide as its parts need, at the right */
    .cld-ops {
        max-width: 44rem;
        margin-right: 0;
    }

    .cld-split {
        grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    }

    /* the heading stays in view while what it heads goes by */
    .cld-split__head {
        position: sticky;
        top: calc(var(--top-bar-h) + var(--gap-max));
    }

    .cld-pipe__panel {
        grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
        align-items: center;
    }

    .cld-host__inner {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    }

    .cld-faq__inner {
        grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    }

    .cld-closing {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-inline: 2rem;
    }
}

/* ------------------------------------------------------------------ */
/* From 72rem                                                          */
/* ------------------------------------------------------------------ */

@media (min-width: 72rem) {
    .cld-closing::before {
        display: block;
    }
}

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

@media (prefers-contrast: more) {
    .cld-hero::before,
    .cld-stage::before,
    .cld-closing::before {
        display: none;
    }

    .cld-ops,
    .cld-arch,
    .cld-node,
    .cld-mode,
    .cld-ops__select {
        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. */
@media (prefers-reduced-motion: no-preference) {
    .cld-hero__title,
    .cld-hero__lead {
        animation: hero-settle var(--spring-slow) var(--ease-spring) both;
    }

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

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

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

    .cld-notes {
        animation-delay: 220ms;
    }

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

    .cld-pipe__panel:not([hidden]) .cld-pipe__over,
    .cld-pipe__panel:not([hidden]) .cld-pipe__title,
    .cld-pipe__panel:not([hidden]) .cld-pipe__body,
    .cld-pipe__panel:not([hidden]) .cld-term {
        animation: cld-swap var(--spring) var(--ease-spring) both;
    }
}

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

@media print {
    .cld-hero,
    .cld-tech,
    .cld-host {
        background: none;
    }

    .cld-deploy,
    .cld-closing {
        background: none;
        color: inherit;
    }

    .cld-hero::before,
    .cld-stage::before,
    .cld-closing::before {
        display: none;
    }
}

/* what a script makes work is `hidden` until it has, whatever display the rules above gave it: the choice of environment, the
   button of the console, the choice of a way to host and the buttons that go to the next stage */
.cld [hidden] {
    display: none;
}