/* The custom software page (services/pages/custom-software.html), after its second design (2026-10-28: "this is the design
   of the new custom page"). The first design's stylesheet, in the design's pixels, is gone with it.

   Its type is typography.md's: every text takes one of its roles, set in the Type roles block below and nowhere else, and
   its sizes are the tokens', in rem, not the design's (which sets its sample workspace in 8 to 11px: the workspace is set in
   the roles' sizes, so it has less in it than the design's, and it is larger). Mobile first: one column, the workspace's
   sidebar and chart left out on a phone, the accordion beside its heading from 48rem, the hero in two columns from 72rem.
   Where the page asks for a script (the industry of the workspace, the choice of a stage and of a way to work) every
   answer is in the markup, and the buttons that choose are `hidden` until site.js makes them work; the choices of a stage
   and of a way to work are links to what they mean until it has, and the accordion needs none.

   The space between rows, columns and items is 20px at the most (--gap-max, site.css); a painted band has the room it
   needs inside itself. Everything is scoped to .cs; its colours are the --cs-* tokens, set again for the dark theme, and
   its text takes typography.md's two text colours through them. */

:root {
    --cs-surface: #ffffff;
    /* the text: headings and body text in typography.md's primary colour, small text in its secondary */
    --cs-ink: var(--text-primary);
    --cs-muted: var(--text-secondary);
    --cs-eyebrow: #0a4ce9;
    --cs-crumb-chevron: #8790a8;
    --cs-blue: #0154e5;
    --cs-blue-hover: #0043bd;
    --cs-on-blue: #ffffff;
    --cs-blue-soft: #e8f1ff;
    --cs-blue-soft-edge: #cbdcff;
    --cs-outline: #b4c9e8;
    --cs-outline-ink: #0f47a8;
    --cs-outline-bg: rgb(255 255 255 / 0.74);
    --cs-outline-hover: #eef6ff;
    /* the hero: a pale blue light at its top right over a white that goes to blue at its foot, and two rings */
    --cs-hero-bg: radial-gradient(ellipse 70% 80% at 95% 18%, #e6f1ff 0, #f6faff 50%, rgb(246 250 255 / 0) 80%),
        linear-gradient(130deg, #ffffff 4%, #fcfdff 56%, #f1f7ff 100%);
    --cs-hero-ring: #cfe1ff;
    --cs-hero-ring-2: #dbeaff;
    --cs-hero-edge: #e4ebf5;
    --cs-line: #e4eaf2;
    --cs-line-strong: #d3deec;
    --cs-tint: #f7faff;
    --cs-tint-edge: #e3ecf8;
    --cs-card: #ffffff;
    --cs-card-edge: #d9e3f0;
    --cs-card-shadow: 0 28px 65px rgb(30 80 142 / 0.13), 0 6px 18px rgb(16 50 101 / 0.06);
    --cs-window-bar: #f9fbff;
    --cs-window-edge: #e7edf6;
    --cs-dot-1: #e7b7aa;
    --cs-dot-2: #eccb78;
    --cs-dot-3: #9bdbc6;
    --cs-side: #fbfcff;
    --cs-tile: #f0f6ff;
    --cs-tile-edge: #d6e6ff;
    --cs-tile-ink: #0a58f0;
    --cs-tick: #0a8f77;
    --cs-live: #16c2a7;
    --cs-live-ring: #dcf8f3;
    --cs-avatar: #e7e8ff;
    --cs-avatar-ink: #3a40a0;
    --cs-flow: #eff6ff;
    --cs-flow-ink: #1d4fb5;
    --cs-flow-good: #e7f7ef;
    --cs-flow-good-ink: #0e7a4e;
    --cs-arrow: #8d9bb3;
    --cs-up: #0e7a4e;
    --cs-status-blue-bg: #e8f0ff;
    --cs-status-blue: #1d4fb5;
    --cs-status-green-bg: #def8ec;
    --cs-status-green: #0e7a4e;
    --cs-bar-1: #bed8ff;
    --cs-bar-2: #76adff;
    --cs-bar-3: #0154e5;
    --cs-bar-axis: #d3deec;
    /* the card of the ways to work: a deep blue, darkest at its left, with two rings at its right */
    --cs-engage: linear-gradient(125deg, #071d47 0%, #082d6d 68%, #0748b8 130%);
    --cs-engage-ring: rgb(255 255 255 / 0.17);
    --cs-engage-ring-2: rgb(255 255 255 / 0.1);
    --cs-engage-ink: #ffffff;
    --cs-engage-eyebrow: #9cc9ff;
    --cs-engage-text: #d3e1f6;
    --cs-engage-line: rgb(224 235 255 / 0.22);
    --cs-engage-radio: #9ab8e4;
    --cs-engage-radio-on: #6cc6ff;
    --cs-engage-underline: #81b5ff;
    --cs-closing: #eaf3ff;
    /* the drawing beside a stage */
    --cs-art-ground: radial-gradient(circle at 80% 23%, #e4f0ff 0, #eff6ff 45%, rgb(239 246 255 / 0) 75%);
    --cs-art-1: #ffffff;
    --cs-art-2: #eaf3ff;
    --cs-art-edge: #cadcf5;
    --cs-art-trail: #bcd6fc;
    --cs-art-title: #d4e2f5;
    --cs-art-line: #e3ecf9;
    --cs-art-blue-bg: #dceaff;
    --cs-art-blue: #1262f0;
    --cs-art-green-bg: #d9f8ef;
    --cs-art-green: #10af8a;
    --cs-art-purple-bg: #ece3ff;
    --cs-art-purple: #8e5cf5;
    --cs-art-badge: #0b5df5;
    --cs-art-badge-ink: #ffffff;
    --cs-art-ring: #a4d5ff;
    --cs-art-ring-in: #ffffff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --cs-surface: #131314;
        --cs-ink: var(--text-primary);
        --cs-muted: var(--text-secondary);
        --cs-eyebrow: #a8c7fa;
        --cs-crumb-chevron: #7f889c;
        --cs-blue: #a8c7fa;
        --cs-blue-hover: #c2d8fc;
        --cs-on-blue: #062e6f;
        --cs-blue-soft: rgb(168 199 250 / 0.14);
        --cs-blue-soft-edge: rgb(168 199 250 / 0.42);
        --cs-outline: #5d7fbf;
        --cs-outline-ink: #a8c7fa;
        --cs-outline-bg: transparent;
        --cs-outline-hover: rgb(168 199 250 / 0.1);
        --cs-hero-bg: radial-gradient(ellipse 70% 80% at 95% 18%, rgb(120 160 255 / 0.14) 0, rgb(120 160 255 / 0.05) 50%, rgb(120 160 255 / 0) 80%),
            linear-gradient(130deg, #131314 4%, #121620 56%, #111a2c 100%);
        --cs-hero-ring: rgb(168 199 250 / 0.16);
        --cs-hero-ring-2: rgb(168 199 250 / 0.1);
        --cs-hero-edge: rgb(255 255 255 / 0.08);
        --cs-line: rgb(255 255 255 / 0.1);
        --cs-line-strong: rgb(168 199 250 / 0.3);
        --cs-tint: #17181b;
        --cs-tint-edge: rgb(255 255 255 / 0.08);
        --cs-card: #1b1c1f;
        --cs-card-edge: rgb(255 255 255 / 0.1);
        --cs-card-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 28px 56px -28px rgb(0 0 0 / 0.7);
        --cs-window-bar: #202226;
        --cs-window-edge: rgb(255 255 255 / 0.08);
        --cs-dot-1: #8a5f55;
        --cs-dot-2: #8f7a3d;
        --cs-dot-3: #4f8a77;
        --cs-side: #17181b;
        --cs-tile: rgb(168 199 250 / 0.12);
        --cs-tile-edge: rgb(168 199 250 / 0.3);
        --cs-tile-ink: #a8c7fa;
        --cs-tick: #6dd58c;
        --cs-live: #6dd58c;
        --cs-live-ring: rgb(109 213 140 / 0.2);
        --cs-avatar: rgb(168 199 250 / 0.18);
        --cs-avatar-ink: #c9d7ff;
        --cs-flow: rgb(168 199 250 / 0.12);
        --cs-flow-ink: #a8c7fa;
        --cs-flow-good: rgb(109 213 140 / 0.14);
        --cs-flow-good-ink: #6dd58c;
        --cs-arrow: #8a93a6;
        --cs-up: #6dd58c;
        --cs-status-blue-bg: rgb(168 199 250 / 0.14);
        --cs-status-blue: #a8c7fa;
        --cs-status-green-bg: rgb(109 213 140 / 0.14);
        --cs-status-green: #6dd58c;
        --cs-bar-1: rgb(168 199 250 / 0.3);
        --cs-bar-2: rgb(168 199 250 / 0.6);
        --cs-bar-3: #a8c7fa;
        --cs-bar-axis: rgb(255 255 255 / 0.16);
        --cs-engage: linear-gradient(125deg, #050d24 0%, #081a45 68%, #0c2b6c 130%);
        --cs-engage-ring: rgb(255 255 255 / 0.1);
        --cs-engage-ring-2: rgb(255 255 255 / 0.06);
        --cs-engage-eyebrow: #a8c7fa;
        --cs-engage-text: #dde3ee;
        --cs-engage-line: rgb(224 235 255 / 0.2);
        --cs-engage-radio: #8aa4d0;
        --cs-engage-radio-on: #a8c7fa;
        --cs-engage-underline: #7d9fd6;
        --cs-closing: #172033;
        --cs-art-ground: radial-gradient(circle at 80% 23%, rgb(120 160 255 / 0.14) 0, rgb(120 160 255 / 0.06) 45%, rgb(120 160 255 / 0) 75%);
        --cs-art-1: #1f2a40;
        --cs-art-2: #18202f;
        --cs-art-edge: rgb(168 199 250 / 0.3);
        --cs-art-trail: rgb(168 199 250 / 0.35);
        --cs-art-title: rgb(168 199 250 / 0.3);
        --cs-art-line: rgb(168 199 250 / 0.18);
        --cs-art-blue-bg: rgb(168 199 250 / 0.2);
        --cs-art-blue: #a8c7fa;
        --cs-art-green-bg: rgb(109 213 140 / 0.2);
        --cs-art-green: #6dd58c;
        --cs-art-purple-bg: rgb(208 188 255 / 0.2);
        --cs-art-purple: #d0bcff;
        --cs-art-badge: #a8c7fa;
        --cs-art-badge-ink: #062e6f;
        --cs-art-ring: rgb(168 199 250 / 0.5);
        --cs-art-ring-in: #131314;
    }
}

:root[data-theme="dark"] {
    --cs-surface: #131314;
    --cs-ink: var(--text-primary);
    --cs-muted: var(--text-secondary);
    --cs-eyebrow: #a8c7fa;
    --cs-crumb-chevron: #7f889c;
    --cs-blue: #a8c7fa;
    --cs-blue-hover: #c2d8fc;
    --cs-on-blue: #062e6f;
    --cs-blue-soft: rgb(168 199 250 / 0.14);
    --cs-blue-soft-edge: rgb(168 199 250 / 0.42);
    --cs-outline: #5d7fbf;
    --cs-outline-ink: #a8c7fa;
    --cs-outline-bg: transparent;
    --cs-outline-hover: rgb(168 199 250 / 0.1);
    --cs-hero-bg: radial-gradient(ellipse 70% 80% at 95% 18%, rgb(120 160 255 / 0.14) 0, rgb(120 160 255 / 0.05) 50%, rgb(120 160 255 / 0) 80%),
        linear-gradient(130deg, #131314 4%, #121620 56%, #111a2c 100%);
    --cs-hero-ring: rgb(168 199 250 / 0.16);
    --cs-hero-ring-2: rgb(168 199 250 / 0.1);
    --cs-hero-edge: rgb(255 255 255 / 0.08);
    --cs-line: rgb(255 255 255 / 0.1);
    --cs-line-strong: rgb(168 199 250 / 0.3);
    --cs-tint: #17181b;
    --cs-tint-edge: rgb(255 255 255 / 0.08);
    --cs-card: #1b1c1f;
    --cs-card-edge: rgb(255 255 255 / 0.1);
    --cs-card-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 28px 56px -28px rgb(0 0 0 / 0.7);
    --cs-window-bar: #202226;
    --cs-window-edge: rgb(255 255 255 / 0.08);
    --cs-dot-1: #8a5f55;
    --cs-dot-2: #8f7a3d;
    --cs-dot-3: #4f8a77;
    --cs-side: #17181b;
    --cs-tile: rgb(168 199 250 / 0.12);
    --cs-tile-edge: rgb(168 199 250 / 0.3);
    --cs-tile-ink: #a8c7fa;
    --cs-tick: #6dd58c;
    --cs-live: #6dd58c;
    --cs-live-ring: rgb(109 213 140 / 0.2);
    --cs-avatar: rgb(168 199 250 / 0.18);
    --cs-avatar-ink: #c9d7ff;
    --cs-flow: rgb(168 199 250 / 0.12);
    --cs-flow-ink: #a8c7fa;
    --cs-flow-good: rgb(109 213 140 / 0.14);
    --cs-flow-good-ink: #6dd58c;
    --cs-arrow: #8a93a6;
    --cs-up: #6dd58c;
    --cs-status-blue-bg: rgb(168 199 250 / 0.14);
    --cs-status-blue: #a8c7fa;
    --cs-status-green-bg: rgb(109 213 140 / 0.14);
    --cs-status-green: #6dd58c;
    --cs-bar-1: rgb(168 199 250 / 0.3);
    --cs-bar-2: rgb(168 199 250 / 0.6);
    --cs-bar-3: #a8c7fa;
    --cs-bar-axis: rgb(255 255 255 / 0.16);
    --cs-engage: linear-gradient(125deg, #050d24 0%, #081a45 68%, #0c2b6c 130%);
    --cs-engage-ring: rgb(255 255 255 / 0.1);
    --cs-engage-ring-2: rgb(255 255 255 / 0.06);
    --cs-engage-eyebrow: #a8c7fa;
    --cs-engage-text: #dde3ee;
    --cs-engage-line: rgb(224 235 255 / 0.2);
    --cs-engage-radio: #8aa4d0;
    --cs-engage-radio-on: #a8c7fa;
    --cs-engage-underline: #7d9fd6;
    --cs-closing: #172033;
    --cs-art-ground: radial-gradient(circle at 80% 23%, rgb(120 160 255 / 0.14) 0, rgb(120 160 255 / 0.06) 45%, rgb(120 160 255 / 0) 75%);
    --cs-art-1: #1f2a40;
    --cs-art-2: #18202f;
    --cs-art-edge: rgb(168 199 250 / 0.3);
    --cs-art-trail: rgb(168 199 250 / 0.35);
    --cs-art-title: rgb(168 199 250 / 0.3);
    --cs-art-line: rgb(168 199 250 / 0.18);
    --cs-art-blue-bg: rgb(168 199 250 / 0.2);
    --cs-art-blue: #a8c7fa;
    --cs-art-green-bg: rgb(109 213 140 / 0.2);
    --cs-art-green: #6dd58c;
    --cs-art-purple-bg: rgb(208 188 255 / 0.2);
    --cs-art-purple: #d0bcff;
    --cs-art-badge: #a8c7fa;
    --cs-art-badge-ink: #062e6f;
    --cs-art-ring: rgb(168 199 250 / 0.5);
    --cs-art-ring-in: #131314;
}

/* ------------------------------------------------------------------ */
/* 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. */

/* H4 (card title): sans 500 */
.cs-app__title,
.cs-app__k,
.cs-acc__name,
.cs-option__name,
.cs-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;
}

/* H3 (a figure of the sample workspace): sans 500 */
.cs-stat__value {
    font-family: var(--font-sans);
    font-size: var(--fs-h3);
    font-weight: var(--fw-medium);
    line-height: var(--lh-h3);
    letter-spacing: 0;
}

/* Body: sans 400 */
.cs-lead,
.cs-hero__lead,
.cs-acc__text,
.cs-stage__text,
.cs-stage__give,
.cs-engage__text,
.cs-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 */
.cs-app__sub,
.cs-stat__label,
.cs-row__when,
.cs-preview__hint,
.cs-preview__note,
.cs-trust__item,
.cs-option__line,
.cs-window__address,
.cs-response {
    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 sample workspace's labels and names, the strip's lines, the technologies, the examples) */
.cs-chip,
.cs-flow__node,
.cs-row__name,
.cs-status,
.cs-app__nav,
.cs-app__h,
.cs-app__avatar,
.cs-app__logo,
.cs-value__text,
.cs-stack__title,
.cs-stack__item,
.cs-acc__examples,
.cs-track__name,
.cs-preview__switch {
    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 */
.cs-btn,
.cs-crumbs__list,
.cs-link,
.cs-engage__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 */
.cs-eyebrow,
.cs-preview__tag,
.cs-acc__no,
.cs-track__no,
.cs-axis {
    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                                                            */
/* ------------------------------------------------------------------ */

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

.cs-eyebrow {
    margin: 0;
    color: var(--cs-eyebrow);
}

/* a section's heading (an h2, the H2 role), its lines balanced; the end of it that the design sets in blue */
.cs-title {
    margin: 0.5rem 0 0;
    color: var(--cs-ink);
    text-wrap: balance;
}

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

.cs-lead {
    margin: 0.75rem 0 0;
    max-width: 36rem;
    color: var(--cs-ink);
    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 */
.cs-section {
    padding-top: var(--gap-max);
}

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

/* this page's icons are lines (site.css's .icon fills with currentColor); the site's own icon, in the trail, is left as it is */
.cs .cs-icon {
    fill: none;
}

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

.cs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    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);
}

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

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

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

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

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

@media (hover: hover) and (pointer: fine) {
    /* the arrow points the way the button goes */
    .cs-btn:hover .icon {
        translate: 3px 0;
    }

    .cs-btn--outlined:hover .icon {
        translate: 0 2px;
    }
}

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

.cs-hero {
    position: relative;
    overflow: hidden;
    padding-bottom: var(--gap-max);
    border-bottom: 1px solid var(--cs-hero-edge);
    background: var(--cs-hero-bg);
}

/* two rings at its right, as the design draws them */
.cs-hero::before,
.cs-hero::after {
    content: "";
    position: absolute;
    border: 1px solid var(--cs-hero-ring);
    border-radius: 50%;
    pointer-events: none;
}

.cs-hero::before {
    top: -25rem;
    right: -15rem;
    width: 47rem;
    height: 47rem;
}

.cs-hero::after {
    top: -20.5rem;
    right: -2.5rem;
    width: 37.5rem;
    height: 37.5rem;
    border-color: var(--cs-hero-ring-2);
}

.cs-hero > .container {
    position: relative;
    z-index: 1;
    padding-top: 0.75rem;
}

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

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

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

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

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

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

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

.cs-hero__words,
.cs-preview {
    min-width: 0;
}

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

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

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

.cs-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.cs-trust__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--cs-muted);
}

.cs-trust__tick {
    display: inline-flex;
    flex: none;
    color: var(--cs-tick);
}

.cs-trust__tick .icon {
    width: 1rem;
    height: 1rem;
}

/* ------------------------------------------------------------------ */
/* The sample workspace: a software in a window, which a visitor switches between industries */
/* ------------------------------------------------------------------ */

.cs-preview__caption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin-bottom: 0.75rem;
}

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

.cs-preview__live {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--cs-live);
    box-shadow: 0 0 0 4px var(--cs-live-ring);
}

.cs-preview__hint {
    margin: 0;
    color: var(--cs-muted);
}

.cs-window {
    container: cs-window / inline-size;
    border: 1px solid var(--cs-card-edge);
    border-radius: 1.0625rem;
    background: var(--cs-card);
    box-shadow: var(--cs-card-shadow);
    overflow: hidden;
}

.cs-window__bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--cs-window-edge);
    background: var(--cs-window-bar);
}

.cs-window__dot {
    flex: none;
    width: 0.5625rem;
    height: 0.5625rem;
    border-radius: 50%;
    background: var(--cs-dot-1);
}

.cs-window__dot:nth-child(2) {
    background: var(--cs-dot-2);
}

.cs-window__dot:nth-child(3) {
    background: var(--cs-dot-3);
}

.cs-window__address {
    flex: 1;
    min-width: 0;
    max-width: 15.5rem;
    margin-inline: auto;
    padding: 0.125rem 0.5rem;
    overflow: hidden;
    border: 1px solid var(--cs-window-edge);
    border-radius: 0.3125rem;
    background: var(--cs-card);
    color: var(--cs-muted);
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-app {
    display: grid;
}

/* the sidebar and the chart are left out on a phone, as the design leaves its chart out */
.cs-app__side,
.cs-chart {
    display: none;
}

.cs-app__main {
    min-width: 0;
    padding: 1rem;
}

.cs-app__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.cs-app__top > div {
    min-width: 0;
}

.cs-app__title {
    margin: 0;
    color: var(--cs-ink);
    overflow-wrap: anywhere;
}

.cs-app__sub {
    margin: 0.125rem 0 0;
    color: var(--cs-muted);
}

.cs-app__avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--cs-avatar);
    color: var(--cs-avatar-ink);
}

.cs-app__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--cs-window-edge);
}

.cs-app__tabs[hidden] {
    display: none;
}

/* the choice of industry: a target as tall as a fingertip, the chosen one in the brand's blue */
.cs-chip {
    min-height: 2.75rem;
    padding: 0.25rem 0.875rem;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: var(--cs-muted);
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), color 200ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

.cs-chip:hover {
    color: var(--cs-ink);
}

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

.cs-chip[aria-pressed="true"] {
    background: var(--cs-blue-soft);
    color: var(--cs-eyebrow);
}

.cs-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 1rem 0;
    border-bottom: 1px solid var(--cs-window-edge);
}

.cs-stat {
    min-width: 0;
    padding-left: 0.75rem;
}

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

.cs-stat + .cs-stat {
    border-left: 1px solid var(--cs-window-edge);
}

.cs-stat__label,
.cs-stat__value {
    margin: 0;
}

.cs-stat__label {
    color: var(--cs-muted);
    overflow-wrap: anywhere;
}

.cs-stat__value {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    margin-top: 0.25rem;
    color: var(--cs-ink);
}

.cs-stat__up {
    display: inline-flex;
    color: var(--cs-up);
}

.cs-stat__up .icon {
    width: 0.875rem;
    height: 0.875rem;
}

.cs-app__body {
    display: grid;
    gap: var(--gap-max);
    padding-top: 1rem;
}

/* Where the window is wide enough for the process and the chart side by side (a laptop's, a tablet's, a desktop's of 1440 or
   more, not a window of 1280, which is narrower than the page is), they stand so: the window's own width decides, not the page's. */
@container cs-window (min-width: 36rem) {
    .cs-app__body {
        grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
    }
}

.cs-process-box,
.cs-chart {
    min-width: 0;
}

.cs-app__h {
    margin: 0 0 0.75rem;
    color: var(--cs-ink);
}

.cs-flow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.cs-flow__node {
    position: relative;
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.25rem;
    border-radius: 0.5rem;
    background: var(--cs-flow);
    color: var(--cs-flow-ink);
    text-align: center;
}

.cs-flow__node--good {
    background: var(--cs-flow-good);
    color: var(--cs-flow-good-ink);
}

/* the arrow between two steps, in the room between them */
.cs-flow__node + .cs-flow__node::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -0.25rem;
    width: 0.3125rem;
    height: 0.3125rem;
    border-top: 1.5px solid var(--cs-arrow);
    border-right: 1.5px solid var(--cs-arrow);
    translate: -50% -50%;
    rotate: 45deg;
}

.cs-rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cs-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, auto);
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.5rem;
    border-top: 1px solid var(--cs-window-edge);
}

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

.cs-row__when {
    color: var(--cs-muted);
}

.cs-status {
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
    overflow-wrap: anywhere;
    text-align: center;
}

.cs-status--blue {
    background: var(--cs-status-blue-bg);
    color: var(--cs-status-blue);
}

.cs-status--green {
    background: var(--cs-status-green-bg);
    color: var(--cs-status-green);
}

.cs-bars {
    display: block;
    width: 100%;
    height: 7rem;
    border-bottom: 1px dashed var(--cs-bar-axis);
}

.cs-bar {
    fill: var(--cs-bar-1);
}

.cs-bar--alt {
    fill: var(--cs-bar-2);
}

.cs-bar--last {
    fill: var(--cs-bar-3);
}

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

.cs-preview__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin: 0.75rem 0 0;
}

.cs-preview__note {
    color: var(--cs-muted);
}

.cs-preview__switch {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--cs-eyebrow);
}

.cs-preview__switch[hidden] {
    display: none;
}

.cs-preview__switch .icon {
    width: 1rem;
    height: 1rem;
}

/* What changes with the industry is in the markup once for each (a .cs-v, with its data-v); the one that the preview's
   data-industry names is shown, and the first until a visitor chooses another */
.cs-v {
    display: none;
}

.cs-preview[data-industry="operations"] .cs-v[data-v="operations"],
.cs-preview[data-industry="finance"] .cs-v[data-v="finance"],
.cs-preview[data-industry="healthcare"] .cs-v[data-v="healthcare"] {
    display: inline;
}

/* ------------------------------------------------------------------ */
/* What the software is built around                                   */
/* ------------------------------------------------------------------ */

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

.cs-values__list {
    display: grid;
    gap: 0.75rem;
    margin-block: 0;
    padding-block: var(--gap-max);
    list-style: none;
}

.cs-value {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--cs-ink);
}

.cs-value__tile {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--cs-tile-edge);
    border-radius: 0.625rem;
    background: var(--cs-tile);
    color: var(--cs-tile-ink);
}

.cs-value__text {
    min-width: 0;
}

/* ------------------------------------------------------------------ */
/* What we do: the heading beside four things that open                 */
/* ------------------------------------------------------------------ */

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

.cs-what__intro {
    min-width: 0;
}

.cs-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    min-height: 2.75rem;
    margin-top: 0.5rem;
    color: var(--cs-eyebrow);
    text-decoration: none;
}

.cs-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.cs-link .icon {
    width: 1rem;
    height: 1rem;
}

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

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

.cs-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;
}

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

.cs-acc__no {
    color: var(--cs-muted);
}

.cs-acc__name {
    color: var(--cs-ink);
}

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

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

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

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

.cs-acc__detail {
    max-width: 42rem;
    padding: 0 0.125rem 1.25rem 3rem;
}

.cs-acc__text {
    margin: 0;
    color: var(--cs-ink);
    text-wrap: pretty;
}

.cs-acc__examples {
    margin: 0.75rem 0 0;
    color: var(--cs-eyebrow);
}

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

    .cs-acc__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;
    }

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

/* ------------------------------------------------------------------ */
/* How we work                                                         */
/* ------------------------------------------------------------------ */

.cs-process {
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    border-block: 1px solid var(--cs-tint-edge);
    background: var(--cs-tint);
}

.cs-process__top {
    display: grid;
    gap: 0.75rem;
}

.cs-process__top .cs-lead {
    margin: 0;
    max-width: 24rem;
}

.cs-stages {
    margin-top: var(--gap-max);
}

.cs-track {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--cs-line-strong);
}

.cs-track__step {
    position: relative;
    flex: 1 1 auto;
    display: grid;
    align-content: start;
    min-height: 4.5rem;
    padding: 0.5rem 0.125rem 1rem;
    color: var(--cs-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.cs-track__step:hover {
    color: var(--cs-ink);
}

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

.cs-track__no {
    color: var(--cs-muted);
}

.cs-track__name {
    margin-top: 0.5rem;
    color: inherit;
}

.cs-track__step[aria-selected="true"] {
    color: var(--cs-eyebrow);
}

/* the line under the stage that is chosen */
.cs-track__step[aria-selected="true"]::after {
    content: "";
    position: absolute;
    right: 0.75rem;
    bottom: -1px;
    left: 0;
    height: 3px;
    border-radius: 2px;
    background: var(--cs-blue);
}

.cs-focus {
    display: grid;
    gap: var(--gap-max);
    align-items: center;
    margin-top: var(--gap-max);
}

.cs-focus__panels {
    min-width: 0;
}

/* a page without a script has every stage one after another; the room between two is the limit's */
.cs-stage:not([hidden]) ~ .cs-stage:not([hidden]) {
    margin-top: var(--gap-max);
}

.cs-stage__no {
    margin: 0;
    color: var(--cs-muted);
}

.cs-stage__title {
    margin: 0.5rem 0 0;
    color: var(--cs-ink);
}

.cs-stage__text {
    max-width: 30rem;
    margin: 0.75rem 0 0;
    color: var(--cs-ink);
    text-wrap: pretty;
}

.cs-stage__give {
    margin: 1rem 0 0;
    color: var(--cs-eyebrow);
}

.cs-art {
    display: grid;
    place-items: center;
    min-height: 11rem;
    border-radius: 1rem;
    background: var(--cs-art-ground);
}

.cs-art__svg {
    width: min(100%, 30rem);
    height: auto;
    overflow: visible;
}

.cs-art__stop--1 {
    stop-color: var(--cs-art-1);
}

.cs-art__stop--2 {
    stop-color: var(--cs-art-2);
}

.cs-art__trail {
    stroke: var(--cs-art-trail);
}

.cs-art__screen {
    stroke: var(--cs-art-edge);
}

.cs-art__title {
    fill: var(--cs-art-title);
}

.cs-art__line {
    fill: var(--cs-art-line);
}

.cs-art__tile--blue {
    fill: var(--cs-art-blue-bg);
}

.cs-art__tile--green {
    fill: var(--cs-art-green-bg);
}

.cs-art__tile--purple {
    fill: var(--cs-art-purple-bg);
}

.cs-art__mark--blue {
    stroke: var(--cs-art-blue);
}

.cs-art__mark--green {
    stroke: var(--cs-art-green);
}

.cs-art__mark--purple {
    stroke: var(--cs-art-purple);
}

.cs-art__badge {
    fill: var(--cs-art-badge);
}

.cs-art__badge-tick {
    stroke: var(--cs-art-badge-ink);
}

.cs-art__ring {
    fill: var(--cs-art-ring);
}

.cs-art__ring-in {
    fill: var(--cs-art-ring-in);
}

/* ------------------------------------------------------------------ */
/* Work with us your way: a dark card                                   */
/* ------------------------------------------------------------------ */

.cs-engage-wrap {
    padding-top: var(--gap-max);
}

.cs-engage {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: var(--gap-max);
    padding: 1.75rem 1.25rem;
    overflow: hidden;
    border-radius: clamp(1rem, 1.5vw, 1.375rem);
    background: var(--cs-engage);
    color: var(--cs-engage-ink);
}

/* two rings at its top right */
.cs-engage::before,
.cs-engage::after {
    content: "";
    position: absolute;
    z-index: -1;
    border: 1px solid var(--cs-engage-ring);
    border-radius: 50%;
    pointer-events: none;
}

.cs-engage::before {
    top: -16rem;
    right: -16rem;
    width: 31rem;
    height: 31rem;
}

.cs-engage::after {
    top: -22rem;
    right: -11rem;
    width: 40rem;
    height: 40rem;
    border-color: var(--cs-engage-ring-2);
}

.cs-engage__words,
.cs-ways {
    min-width: 0;
}

.cs-engage__eyebrow {
    color: var(--cs-engage-eyebrow);
}

.cs-engage__title {
    margin: 0.5rem 0 0;
    color: var(--cs-engage-ink);
    text-wrap: balance;
}

.cs-engage__text {
    max-width: 34rem;
    margin: 0.75rem 0 0;
    color: var(--cs-engage-text);
    text-wrap: pretty;
}

.cs-engage__link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.75rem;
    margin-top: 1rem;
    border-bottom: 1px solid var(--cs-engage-underline);
    color: var(--cs-engage-ink);
    text-decoration: none;
}

.cs-engage__link .icon {
    width: 1.125rem;
    height: 1.125rem;
    transition: translate var(--spring) var(--ease-spring);
}

@media (hover: hover) and (pointer: fine) {
    .cs-engage__link:hover .icon {
        translate: 3px 0;
    }
}

.cs-options {
    display: grid;
}

.cs-option {
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr);
    column-gap: 0.5rem;
    min-height: 3.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--cs-engage-line);
    color: var(--cs-engage-ink);
    text-decoration: none;
    cursor: pointer;
    transition: scale var(--spring-quick) var(--ease-spring);
}

.cs-option:first-child {
    padding-top: 0;
}

.cs-option:active {
    scale: var(--press-scale-card);
    transition-duration: var(--press-in);
}

.cs-option__radio {
    display: grid;
    place-items: center;
    width: 1.1875rem;
    height: 1.1875rem;
    margin-top: 0.1875rem;
    border: 1.5px solid var(--cs-engage-radio);
    border-radius: 50%;
}

.cs-option[aria-selected="true"] .cs-option__radio {
    border-color: var(--cs-engage-radio-on);
}

.cs-option[aria-selected="true"] .cs-option__radio::after {
    content: "";
    width: 0.5625rem;
    height: 0.5625rem;
    border-radius: 50%;
    background: var(--cs-engage-radio-on);
}

.cs-option__words {
    min-width: 0;
}

.cs-option__name {
    display: block;
    color: inherit;
}

.cs-option__line {
    display: block;
    margin-top: 0.125rem;
    color: var(--cs-engage-text);
}

.cs-responses {
    padding-top: 1rem;
}

.cs-response {
    margin: 0;
    color: var(--cs-engage-text);
}

.cs-response strong {
    color: var(--cs-engage-ink);
}

.cs-response:not([hidden]) ~ .cs-response:not([hidden]) {
    margin-top: var(--gap-max);
}

/* ------------------------------------------------------------------ */
/* The technologies                                                    */
/* ------------------------------------------------------------------ */

.cs-stack {
    margin-top: var(--gap-max);
    padding-block: 1.25rem;
    border-block: 1px solid var(--cs-line);
}

.cs-stack__inner {
    display: grid;
    gap: 0.75rem;
    align-items: center;
}

.cs-stack__title {
    max-width: 16rem;
    margin: 0;
    color: var(--cs-ink);
}

.cs-stack__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem var(--gap-max);
    margin: 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    color: var(--cs-muted);
}

.cs-stack__item {
    position: relative;
}

/* A dot in the gap before each item, said by no screen reader (an empty text alternative where the browser knows one).
   The one before the first item of a line lies outside the list, which clips it: a line that wraps never begins with one. */
.cs-stack__item::before {
    content: "·";
    content: "·" / "";
    position: absolute;
    left: calc(var(--gap-max) / -2);
    translate: -50% 0;
    color: var(--cs-line-strong);
}

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

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

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

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

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

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

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

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

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

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

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

.cs-faq__answer {
    padding-bottom: 1.25rem;
    color: var(--cs-ink);
}

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

@supports (interpolate-size: allow-keywords) {
    .cs-faq__item {
        interpolate-size: allow-keywords;
    }

    .cs-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;
    }

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

/* ------------------------------------------------------------------ */
/* The closing call                                                    */
/* ------------------------------------------------------------------ */

.cs-closing {
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    background: var(--cs-closing);
}

.cs-closing__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: center;
}

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

.cs-closing .cs-btn {
    justify-self: start;
}

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

/* a page without a script has every stage and every way to work 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) .cs-stage:not(:first-child),
    [data-tabs]:not(.is-ready) .cs-response:not(:first-child) {
        display: none;
    }
}

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

@media (min-width: 40rem) {
    .cs-btn {
        white-space: nowrap;
    }

    .cs-track {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .cs-app {
        grid-template-columns: 9.25rem minmax(0, 1fr);
    }

    .cs-app__side {
        display: block;
        padding: 1rem 0.75rem;
        border-right: 1px solid var(--cs-window-edge);
        background: var(--cs-side);
    }

    .cs-app__logo {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        margin: 0 0 1rem 0.5rem;
        color: var(--cs-ink);
    }

    .cs-app__k {
        color: var(--cs-eyebrow);
    }

    .cs-app__nav {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin: 0;
        padding: 0.4rem 0.5rem;
        border-radius: 0.4375rem;
        color: var(--cs-muted);
    }

    .cs-app__nav .icon {
        width: 0.9375rem;
        height: 0.9375rem;
    }

    .cs-app__nav--active {
        background: var(--cs-blue-soft);
        color: var(--cs-eyebrow);
    }

    .cs-app__main {
        padding: 1.25rem;
    }

    .cs-chart {
        display: block;
    }
}

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

@media (min-width: 48rem) {
    .cs-values__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
    }

    .cs-value + .cs-value {
        padding-left: 1.5rem;
        border-left: 1px solid var(--cs-line);
    }

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

    .cs-process__top {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
        align-items: end;
    }

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

    .cs-engage {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        padding: 2rem 2rem;
    }

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

    .cs-closing__inner {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--gap-max);
    }

    .cs-closing .cs-btn {
        justify-self: end;
    }

    .cs-track__step {
        padding-left: 0.3125rem;
    }
}

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

@media (min-width: 64rem) {
    /* the heading stays in view beside the list that opens and closes */
    .cs-what__intro {
        position: sticky;
        top: calc(var(--top-bar-h) + 1.5rem);
    }

    .cs-engage {
        padding: 2.5rem 2.75rem;
    }

    /* the list is as wide as its words and stands at the right; where they do not fit it wraps within its own column, whose left
       edge is where the dots are clipped */
    .cs-stack__inner {
        grid-template-columns: minmax(0, 16rem) minmax(0, max-content);
        justify-content: space-between;
        gap: var(--gap-max);
    }
}

/* ------------------------------------------------------------------ */
/* From 72rem: the hero in two columns                                  */
/* ------------------------------------------------------------------ */

@media (min-width: 72rem) {
    .cs-hero__grid {
        grid-template-columns: minmax(0, 0.91fr) minmax(0, 1.09fr);
    }
}

/* ------------------------------------------------------------------ */
/* Materials for a visitor who asks for more contrast                   */
/* ------------------------------------------------------------------ */

@media (prefers-contrast: more) {
    .cs-window,
    .cs-chip,
    .cs-acc__plus,
    .cs-btn--outlined {
        border-color: var(--cs-ink);
    }

    .cs-hero {
        background: var(--cs-surface);
    }

    .cs-hero::before,
    .cs-hero::after {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* 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 workspace rises into place. */
@media (prefers-reduced-motion: no-preference) {
    .cs-hero__title,
    .cs-hero__lead {
        animation: hero-settle var(--spring-slow) var(--ease-spring) both;
    }

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

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

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

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

    .cs-preview {
        animation: cs-rise var(--spring-slow) var(--ease-spring) 200ms both;
    }

    .cs-stage:not([hidden]),
    .cs-response:not([hidden]) {
        animation: cs-swap var(--spring) var(--ease-spring) both;
    }
}

@keyframes cs-rise {
    from {
        opacity: 0;
        translate: 0 1rem;
    }
    to {
        opacity: 1;
        translate: 0 0;
    }
}

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

@media print {
    .cs-hero,
    .cs-process,
    .cs-closing {
        background: none;
    }

    .cs-engage {
        background: none;
        color: inherit;
    }

    .cs-hero::before,
    .cs-hero::after,
    .cs-engage::before,
    .cs-engage::after {
        display: none;
    }
}