/* The AI and automation page (services/pages/ai-and-automation.html), after its second design (2026-10-28: "redesign the
   ai and automation page ... only the body, leave footer and header alone"). 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. Mobile first: one column, the example's three columns one
   under another, then two columns for the hero from 72rem, the example's three side by side from 48rem, the choice of
   solutions beside its words from 48rem, and the five stages on their wave from 80rem. Where the page asks for a
   script (the choice of example, of solution and of stage, the button that runs the example) every one of them is in
   the markup, shown one after another, and the buttons are `hidden` until site.js makes them work; the outcome's three
   states (waiting, running, done) are all in the markup, and only the one that holds is in the layout (a shorter one
   would leave room in the middle of the card, which the limit counts as a gap).

   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. The illustration of the team (ai-page-approach-team.avif) is the company's, as it gave it: its
   edges are feathered into the section in the light theme (a mask) and it is a dimmed card in the dark one. Everything
   is scoped to .ai; its colours are the --ai-* tokens, set again for the dark theme, and its text takes typography.md's
   two text colours through them. */

:root {
    --ai-surface: #ffffff;
    /* the text: headings and body text in typography.md's primary colour, small text in its secondary */
    --ai-ink: var(--text-primary);
    --ai-muted: var(--text-secondary);
    --ai-eyebrow: #0a4ce9;
    --ai-crumb-chevron: #8790a8;
    --ai-blue: #0154e5;
    --ai-blue-hover: #0043bd;
    --ai-on-blue: #ffffff;
    --ai-blue-soft: #e8f0fe;
    --ai-blue-soft-edge: #aecbfa;
    --ai-outline: #8db4fd;
    --ai-outline-ink: #0a46d8;
    --ai-outline-bg: rgb(255 255 255 / 0.55);
    --ai-outline-hover: #ffffff;
    --ai-hero-bg: linear-gradient(180deg, #eef4ff 0%, #f6f9ff 58%, #ffffff 100%);
    --ai-hero-glow: radial-gradient(52rem 30rem at 92% 0%, rgb(1 84 229 / 0.1), rgb(1 84 229 / 0) 70%);
    --ai-tint: #f6f9fd;
    --ai-tint-edge: #e6edf6;
    --ai-card: #ffffff;
    --ai-card-edge: #dfe7f2;
    --ai-card-shadow: 0 1px 2px rgb(16 40 90 / 0.04), 0 24px 44px -28px rgb(16 40 90 / 0.3);
    --ai-line: #e3e9f2;
    /* the hairline as a ground, for a grid whose gap shows it (a translucent one reads as no ground at all) */
    --ai-line-solid: #e3e9f2;
    --ai-line-strong: #c3d0e6;
    /* the workspace's top bar: a deep blue, its words light */
    --ai-bar: linear-gradient(120deg, #0d2146 0%, #12305f 58%, #1a4180 100%);
    --ai-bar-ink: #ffffff;
    --ai-bar-muted: #c9d8f2;
    --ai-bar-tile: rgb(255 255 255 / 0.12);
    --ai-bar-tile-edge: rgb(255 255 255 / 0.2);
    --ai-bar-sparkle: #b9d9ff;
    --ai-live: #3ddc97;
    --ai-check: #0b7a4b;
    --ai-check-bg: #dcf4e7;
    --ai-done: #0b7a4b;
    --ai-wait: #6b7280;
    --ai-visual: #e8f0fe;
    --ai-visual-ink: #0a58f0;
    --ai-cut: #ffffff;
    --ai-explorer-glow: radial-gradient(18rem 14rem at 88% 6%, rgb(1 84 229 / 0.08), rgb(1 84 229 / 0) 72%);
    /* the approach: a pale ground the illustration melts into, the curve's colours, the node's ring */
    --ai-approach: linear-gradient(180deg, #f1f6ff 0%, #f8fbff 100%);
    --ai-art-filter: none;
    --ai-art-mask: linear-gradient(90deg, rgb(0 0 0 / 0) 0%, #000 26%, #000 90%, rgb(0 0 0 / 0) 100%),
        linear-gradient(0deg, rgb(0 0 0 / 0) 0%, #000 12%, #000 90%, rgb(0 0 0 / 0) 100%);
    --ai-art-radius: 0;
    --ai-art-edge: transparent;
    --ai-wave-1: #8fd3f5;
    --ai-wave-2: #5b7df2;
    --ai-wave-3: #52b3ef;
    --ai-wave-4: #1d4fe0;
    --ai-wave-ring: #ffffff;
    --ai-tone-blue-bg: #e1ecfd;
    --ai-tone-blue: #0b57e3;
    --ai-tone-purple-bg: #ece6fd;
    --ai-tone-purple: #6a35d9;
    --ai-tone-green-bg: #dcf4e6;
    --ai-tone-green: #0c7f48;
    --ai-tone-orange-bg: #fdebdc;
    --ai-tone-orange: #b9510a;
    /* the closing card: a deep blue, darkest at its left, with rings of light at its right */
    --ai-cta: linear-gradient(110deg, #071a42 0%, #0a2a66 46%, #0b49c9 100%);
    --ai-cta-ring: rgb(255 255 255 / 0.05);
    --ai-cta-ring-2: rgb(255 255 255 / 0.035);
    --ai-cta-eyebrow: #9fc4ff;
    --ai-cta-ink: #ffffff;
    --ai-cta-text: #e3ebfb;
    --ai-cta-button: #ffffff;
    --ai-cta-button-ink: #0a3a9e;
    --ai-cta-button-hover: #e8eefc;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ai-surface: #131314;
        --ai-ink: var(--text-primary);
        --ai-muted: var(--text-secondary);
        --ai-eyebrow: #a8c7fa;
        --ai-crumb-chevron: #7f889c;
        --ai-blue: #a8c7fa;
        --ai-blue-hover: #c2d8fc;
        --ai-on-blue: #062e6f;
        --ai-blue-soft: rgb(168 199 250 / 0.14);
        --ai-blue-soft-edge: rgb(168 199 250 / 0.42);
        --ai-outline: #5d7fbf;
        --ai-outline-ink: #a8c7fa;
        --ai-outline-bg: transparent;
        --ai-outline-hover: rgb(168 199 250 / 0.1);
        --ai-hero-bg: linear-gradient(180deg, #121a2c 0%, #13171f 58%, #131314 100%);
        --ai-hero-glow: radial-gradient(52rem 30rem at 92% 0%, rgb(120 160 255 / 0.1), rgb(120 160 255 / 0) 70%);
        --ai-tint: #17181b;
        --ai-tint-edge: rgb(255 255 255 / 0.08);
        --ai-card: #1b1c1f;
        --ai-card-edge: rgb(255 255 255 / 0.1);
        --ai-card-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 24px 44px -28px rgb(0 0 0 / 0.7);
        --ai-line: rgb(255 255 255 / 0.1);
    --ai-line-solid: #2b2d31;
        --ai-line-strong: rgb(168 199 250 / 0.3);
        --ai-bar: linear-gradient(120deg, #0b1a36 0%, #0f2548 58%, #15325f 100%);
        --ai-bar-tile: rgb(255 255 255 / 0.1);
        --ai-live: #6dd58c;
        --ai-check: #6dd58c;
        --ai-check-bg: rgb(109 213 140 / 0.16);
        --ai-done: #6dd58c;
        --ai-wait: #9aa0a6;
        --ai-visual: rgb(168 199 250 / 0.12);
        --ai-visual-ink: #a8c7fa;
        --ai-cut: #062e6f;
        --ai-explorer-glow: radial-gradient(18rem 14rem at 88% 6%, rgb(120 160 255 / 0.12), rgb(120 160 255 / 0) 72%);
        --ai-approach: linear-gradient(180deg, #121a2c 0%, #14171d 100%);
        --ai-art-filter: brightness(0.66) saturate(0.85);
        --ai-art-mask: linear-gradient(#000, #000);
        --ai-art-radius: 1.25rem;
        --ai-art-edge: rgb(255 255 255 / 0.1);
        --ai-wave-1: #4d86b3;
        --ai-wave-2: #7d96ee;
        --ai-wave-3: #5aa9d6;
        --ai-wave-4: #a8c7fa;
        --ai-wave-ring: #131314;
        --ai-tone-blue-bg: rgb(168 199 250 / 0.14);
        --ai-tone-blue: #a8c7fa;
        --ai-tone-purple-bg: rgb(208 188 255 / 0.14);
        --ai-tone-purple: #d0bcff;
        --ai-tone-green-bg: rgb(109 213 140 / 0.14);
        --ai-tone-green: #6dd58c;
        --ai-tone-orange-bg: rgb(255 184 112 / 0.14);
        --ai-tone-orange: #ffb870;
        --ai-cta: linear-gradient(110deg, #050d24 0%, #081a45 46%, #0c2b6c 100%);
        --ai-cta-ring: rgb(255 255 255 / 0.04);
        --ai-cta-ring-2: rgb(255 255 255 / 0.03);
        --ai-cta-eyebrow: #a8c7fa;
        --ai-cta-text: #dde3ee;
        --ai-cta-button: #e3e3e3;
        --ai-cta-button-ink: #0b2a6b;
        --ai-cta-button-hover: #ffffff;
    }
}

:root[data-theme="dark"] {
    --ai-surface: #131314;
    --ai-ink: var(--text-primary);
    --ai-muted: var(--text-secondary);
    --ai-eyebrow: #a8c7fa;
    --ai-crumb-chevron: #7f889c;
    --ai-blue: #a8c7fa;
    --ai-blue-hover: #c2d8fc;
    --ai-on-blue: #062e6f;
    --ai-blue-soft: rgb(168 199 250 / 0.14);
    --ai-blue-soft-edge: rgb(168 199 250 / 0.42);
    --ai-outline: #5d7fbf;
    --ai-outline-ink: #a8c7fa;
    --ai-outline-bg: transparent;
    --ai-outline-hover: rgb(168 199 250 / 0.1);
    --ai-hero-bg: linear-gradient(180deg, #121a2c 0%, #13171f 58%, #131314 100%);
    --ai-hero-glow: radial-gradient(52rem 30rem at 92% 0%, rgb(120 160 255 / 0.1), rgb(120 160 255 / 0) 70%);
    --ai-tint: #17181b;
    --ai-tint-edge: rgb(255 255 255 / 0.08);
    --ai-card: #1b1c1f;
    --ai-card-edge: rgb(255 255 255 / 0.1);
    --ai-card-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 24px 44px -28px rgb(0 0 0 / 0.7);
    --ai-line: rgb(255 255 255 / 0.1);
    --ai-line-solid: #2b2d31;
    --ai-line-strong: rgb(168 199 250 / 0.3);
    --ai-bar: linear-gradient(120deg, #0b1a36 0%, #0f2548 58%, #15325f 100%);
    --ai-bar-tile: rgb(255 255 255 / 0.1);
    --ai-live: #6dd58c;
    --ai-check: #6dd58c;
    --ai-check-bg: rgb(109 213 140 / 0.16);
    --ai-done: #6dd58c;
    --ai-wait: #9aa0a6;
    --ai-visual: rgb(168 199 250 / 0.12);
    --ai-visual-ink: #a8c7fa;
    --ai-cut: #062e6f;
    --ai-explorer-glow: radial-gradient(18rem 14rem at 88% 6%, rgb(120 160 255 / 0.12), rgb(120 160 255 / 0) 72%);
    --ai-approach: linear-gradient(180deg, #121a2c 0%, #14171d 100%);
    --ai-art-filter: brightness(0.66) saturate(0.85);
    --ai-art-mask: linear-gradient(#000, #000);
    --ai-art-radius: 1.25rem;
    --ai-art-edge: rgb(255 255 255 / 0.1);
    --ai-wave-1: #4d86b3;
    --ai-wave-2: #7d96ee;
    --ai-wave-3: #5aa9d6;
    --ai-wave-4: #a8c7fa;
    --ai-wave-ring: #131314;
    --ai-tone-blue-bg: rgb(168 199 250 / 0.14);
    --ai-tone-blue: #a8c7fa;
    --ai-tone-purple-bg: rgb(208 188 255 / 0.14);
    --ai-tone-purple: #d0bcff;
    --ai-tone-green-bg: rgb(109 213 140 / 0.14);
    --ai-tone-green: #6dd58c;
    --ai-tone-orange-bg: rgb(255 184 112 / 0.14);
    --ai-tone-orange: #ffb870;
    --ai-cta: linear-gradient(110deg, #050d24 0%, #081a45 46%, #0c2b6c 100%);
    --ai-cta-ring: rgb(255 255 255 / 0.04);
    --ai-cta-ring-2: rgb(255 255 255 / 0.03);
    --ai-cta-eyebrow: #a8c7fa;
    --ai-cta-text: #dde3ee;
    --ai-cta-button: #e3e3e3;
    --ai-cta-button-ink: #0b2a6b;
    --ai-cta-button-hover: #ffffff;
}

/* ------------------------------------------------------------------ */
/* 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 */
.ai-demo__title,
.ai-scn__title,
.ai-col__title,
.ai-point__name,
.ai-option__name,
.ai-wave__name,
.ai-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 */
.ai-lead,
.ai-hero__lead,
.ai-point__text,
.ai-pane__copy,
.ai-pane__example,
.ai-detail__text,
.ai-faq__answer,
.ai-cta__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 */
.ai-demo__sub,
.ai-scn__note,
.ai-col__text,
.ai-fact,
.ai-step__text,
.ai-out__status,
.ai-demo__note,
.ai-trust__item,
.ai-hint,
.ai-option__line,
.ai-note,
.ai-wave__caption,
.ai-stepper__hint {
    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 chips, the names of what it connects to, the steps' marks and flow, the stages' names) */
.ai-chip,
.ai-tag,
.ai-cell,
.ai-fact dd,
.ai-step__mark,
.ai-flow__pill,
.ai-track__name {
    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 */
.ai-btn,
.ai-crumbs__list {
    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 */
.ai-eyebrow,
.ai-demo__tag,
.ai-demo__label,
.ai-scn__note,
.ai-col__label,
.ai-explorer__label,
.ai-point__no,
.ai-option__no,
.ai-wave__no,
.ai-track__no,
.ai-stepper__count {
    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                                                            */
/* ------------------------------------------------------------------ */

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

/* a label in capitals over a heading, in the brand's blue */
.ai-eyebrow {
    margin: 0;
    color: var(--ai-eyebrow);
}

.ai-eyebrow--quiet {
    color: var(--ai-muted);
}

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

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

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

.ai-hint,
.ai-note {
    color: var(--ai-muted);
}

.ai-note {
    margin: 0.75rem 0 0;
}

.ai-tone--blue { --ai-tone-bg: var(--ai-tone-blue-bg); --ai-tone: var(--ai-tone-blue); }
.ai-tone--purple { --ai-tone-bg: var(--ai-tone-purple-bg); --ai-tone: var(--ai-tone-purple); }
.ai-tone--green { --ai-tone-bg: var(--ai-tone-green-bg); --ai-tone: var(--ai-tone-green); }
.ai-tone--orange { --ai-tone-bg: var(--ai-tone-orange-bg); --ai-tone: var(--ai-tone-orange); }

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

/* this page's icons are lines (site.css's .icon fills with currentColor, which the shapes drawn solid say again for
   themselves); the site's own icons, in the trail, are left as they are */
.ai .ai-icon {
    fill: none;
}

/* the cut in a solid shape takes the colour of what is behind it */
.ai .ai-cut {
    stroke: var(--ai-cut);
}

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

.ai-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;
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
    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);
}

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

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

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

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

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

.ai-btn--light {
    background: var(--ai-cta-button);
    color: var(--ai-cta-button-ink);
}

.ai-btn--light:hover {
    background: var(--ai-cta-button-hover);
    color: var(--ai-cta-button-ink);
}

/* the button that runs the example stays where it is while it runs, and ignores the press */
.ai-btn[aria-disabled="true"] {
    cursor: default;
}

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

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

.ai-hero {
    position: relative;
    padding-block: 0.75rem var(--gap-max);
    background: var(--ai-hero-glow), var(--ai-hero-bg);
}

.ai-hero__inner {
    display: grid;
    gap: var(--gap-max);
}

.ai-hero__words,
.ai-demo {
    min-width: 0;
}

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

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

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

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

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

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

.ai-hero__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: var(--gap-max);
}

/* the short line before the label, as the design draws it */
.ai-hero__eyebrow::before {
    content: "";
    width: 1.5rem;
    height: 1px;
    background: currentColor;
}

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

.ai-hero__line {
    display: block;
}

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

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

.ai-trust {
    display: grid;
    gap: 0.5rem;
    margin: var(--gap-max) 0 0;
    padding: 1rem 0 0;
    border-top: 1px solid var(--ai-line);
    list-style: none;
}

.ai-trust__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--ai-muted);
}

.ai-trust__tick {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--ai-check-bg);
    color: var(--ai-check);
}

.ai-trust__tick .icon {
    width: 0.75rem;
    height: 0.75rem;
}

/* ------------------------------------------------------------------ */
/* The workspace: an example automation that a visitor runs             */
/* ------------------------------------------------------------------ */

.ai-demo {
    border: 1px solid var(--ai-card-edge);
    border-radius: 1.25rem;
    background: var(--ai-card);
    box-shadow: var(--ai-card-shadow);
    overflow: hidden;
}

.ai-demo__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 1rem 1.25rem;
    background: var(--ai-bar);
    color: var(--ai-bar-ink);
}

.ai-demo__logo {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--ai-bar-tile-edge);
    border-radius: 0.625rem;
    background: var(--ai-bar-tile);
    color: var(--ai-bar-sparkle);
}

.ai-demo__heading {
    flex: 1 1 11rem;
    min-width: 0;
}

.ai-demo__title {
    margin: 0;
    color: var(--ai-bar-ink);
}

.ai-demo__sub {
    margin: 0;
    color: var(--ai-bar-muted);
}

.ai-demo__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--ai-bar-ink);
}

.ai-demo__dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ai-live);
}

.ai-demo__choose {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ai-line);
    background: var(--ai-tint);
}

.ai-demo__label {
    margin: 0 0 0.5rem;
    color: var(--ai-muted);
}

.ai-demo__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* the choice of example: pills, the chosen one in the brand's blue; a target as tall as a fingertip */
.ai-chip {
    min-height: 2.75rem;
    padding: 0.25rem 1rem;
    border: 1px solid var(--ai-card-edge);
    border-radius: 999px;
    background: var(--ai-card);
    color: var(--ai-ink);
    cursor: pointer;
    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);
}

.ai-chip:hover {
    border-color: var(--ai-blue-soft-edge);
}

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

.ai-chip[aria-selected="true"] {
    border-color: var(--ai-blue-soft-edge);
    background: var(--ai-blue-soft);
    color: var(--ai-eyebrow);
}

/* only the example that is chosen is in the layout (the others are `hidden`), so that the card is as high as it needs to be and
   leaves no room under a shorter one; the card is the height of the example it shows */
.ai-scn {
    min-width: 0;
    padding: 1.25rem;
}

.ai-scn__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
}

.ai-scn__title {
    margin: 0;
    color: var(--ai-ink);
}

.ai-scn__note {
    margin: 0;
    color: var(--ai-muted);
}

.ai-scn__cols {
    display: grid;
    margin-top: 1rem;
}

.ai-col {
    min-width: 0;
    padding-block: 1rem;
    border-top: 1px solid var(--ai-line);
}

.ai-col__label {
    margin: 0 0 0.75rem;
    color: var(--ai-muted);
}

.ai-col__icon,
.ai-out__visual {
    display: grid;
    place-items: center;
    border-radius: 0.75rem;
    background: var(--ai-blue-soft);
    color: var(--ai-eyebrow);
}

.ai-col__icon {
    width: 2.5rem;
    height: 2.5rem;
}

.ai-col__icon .icon {
    width: 1.25rem;
    height: 1.25rem;
}

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

.ai-col__text {
    margin: 0;
    color: var(--ai-muted);
}

.ai-facts {
    margin: 1rem 0 0;
    padding: 0;
    border-top: 1px solid var(--ai-line);
}

.ai-fact {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.5rem;
    border-bottom: 1px solid var(--ai-line);
    color: var(--ai-muted);
}

.ai-fact dt,
.ai-fact dd {
    margin: 0;
}

.ai-fact dd {
    color: var(--ai-ink);
    text-align: right;
}

.ai-steps {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ai-step {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.625rem;
    border-bottom: 1px solid var(--ai-line);
    color: var(--ai-muted);
}

.ai-step:last-child {
    border-bottom: 0;
}

.ai-step__text {
    min-width: 0;
}

.ai-step__mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--ai-line-strong);
    border-radius: 50%;
    background: var(--ai-card);
    color: var(--ai-muted);
    transition: background-color 200ms var(--ease-standard), border-color 200ms var(--ease-standard),
        color 200ms var(--ease-standard);
}

/* a step's mark is its number until it is done, and then a tick: both are in it, one over the other */
.ai-step__mark > * {
    grid-area: 1 / 1;
}

.ai-step__mark .icon {
    width: 0.875rem;
    height: 0.875rem;
    visibility: hidden;
}

.ai-step.is-active .ai-step__mark {
    border-color: var(--ai-blue);
    color: var(--ai-eyebrow);
}

.ai-step.is-active .ai-step__text {
    color: var(--ai-ink);
}

.ai-step.is-done .ai-step__mark {
    border-color: var(--ai-blue);
    background: var(--ai-blue);
    color: var(--ai-on-blue);
}

.ai-step.is-done .ai-step__number {
    visibility: hidden;
}

.ai-step.is-done .ai-step__mark .icon {
    visibility: visible;
}

.ai-step.is-done .ai-step__text {
    color: var(--ai-ink);
}

/* the outcome: a picture of the result, its title and its sentence, and where the example stands */
.ai-out__visual {
    height: 5.5rem;
}

.ai-out__visual .icon {
    width: 2.75rem;
    height: 2.75rem;
    color: var(--ai-visual-ink);
}

/* the outcome's three states (the words of each are in the markup): only the one that holds is in the layout, so that the room
   a shorter sentence would leave is not left in the middle of the card; the button's label and icon, each one line, lie one over
   another instead, so that the button does not change its width as the example runs */
.ai-col--out .ai-when {
    display: none;
}

.ai-out__status .ai-when {
    align-items: center;
    gap: 0.5rem;
}

.ai-demo[data-state="idle"] .ai-col--out .ai-when--idle,
.ai-demo[data-state="running"] .ai-col--out .ai-when--running,
.ai-demo[data-state="done"] .ai-col--out .ai-when--done {
    display: inline;
}

.ai-demo[data-state="idle"] .ai-out__status .ai-when--idle,
.ai-demo[data-state="running"] .ai-out__status .ai-when--running,
.ai-demo[data-state="done"] .ai-out__status .ai-when--done {
    display: inline-flex;
}

.ai-demo__run-icon,
.ai-demo__run-label {
    display: grid;
}

.ai-demo__run .ai-when {
    grid-area: 1 / 1;
    visibility: hidden;
}

.ai-demo[data-state="idle"] .ai-demo__run .ai-when--idle,
.ai-demo[data-state="running"] .ai-demo__run .ai-when--running,
.ai-demo[data-state="done"] .ai-demo__run .ai-when--done {
    visibility: visible;
}

/* a page without a script has the first example as it ends (the others are `hidden`), and no button to run it */
@media (scripting: none) {
    .ai-demo[data-state] .ai-col--out .ai-when--idle,
    .ai-demo[data-state] .ai-col--out .ai-when--running {
        display: none;
    }

    .ai-demo[data-state] .ai-col--out .ai-when--done {
        display: inline;
    }

    .ai-demo[data-state] .ai-out__status .ai-when--done {
        display: inline-flex;
    }

    .ai-demo .ai-scn:not([hidden]) .ai-step__mark {
        border-color: var(--ai-blue);
        background: var(--ai-blue);
        color: var(--ai-on-blue);
    }

    .ai-demo .ai-scn:not([hidden]) .ai-step__number {
        visibility: hidden;
    }

    .ai-demo .ai-scn:not([hidden]) .ai-step__mark .icon {
        visibility: visible;
    }

    .ai-demo .ai-scn:not([hidden]) .ai-step__text {
        color: var(--ai-ink);
    }
}

.ai-out__status {
    margin: 0.75rem 0 0;
    color: var(--ai-muted);
}

.ai-out__dot {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ai-wait);
}

.ai-out__status .ai-when--running {
    color: var(--ai-eyebrow);
}

.ai-out__status .ai-when--running .ai-out__dot {
    background: var(--ai-blue);
}

.ai-out__status .ai-when--done {
    color: var(--ai-done);
}

.ai-out__status .ai-when--done .ai-out__dot {
    background: var(--ai-done);
}

.ai-demo__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--ai-line);
    background: var(--ai-tint);
}

.ai-demo__note {
    flex: 1 1 18rem;
    margin: 0;
    color: var(--ai-muted);
}

.ai-demo__run {
    min-height: 2.75rem;
    padding: 0.5rem 1.25rem;
}

.ai-demo__run[hidden] {
    display: none;
}

.ai-demo__run-icon .icon {
    width: 1rem;
    height: 1rem;
}

.ai-demo__run[aria-disabled="true"] {
    opacity: 0.85;
}

/* ------------------------------------------------------------------ */
/* A better way to work, and the questions: a heading beside a list     */
/* ------------------------------------------------------------------ */

.ai-split {
    display: grid;
    gap: var(--gap-max);
}

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

.ai-points,
.ai-faq__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--ai-line);
}

.ai-point {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    padding-block: 1.25rem;
    border-bottom: 1px solid var(--ai-line);
}

.ai-point__no {
    margin: 0;
    padding-top: 0.25rem;
    color: var(--ai-muted);
}

.ai-point__name {
    margin: 0;
    color: var(--ai-ink);
}

.ai-point__text {
    margin: 0.25rem 0 0;
    color: var(--ai-ink);
}

/* ------------------------------------------------------------------ */
/* What we build: a choice of four solutions                            */
/* ------------------------------------------------------------------ */

.ai-solutions,
.ai-approach {
    margin-top: var(--gap-max);
    background: var(--ai-tint);
}

.ai-solutions {
    padding-block: 1.75rem;
    border-block: 1px solid var(--ai-tint-edge);
}

.ai-head {
    display: grid;
    gap: 0.75rem;
}

.ai-head__words {
    min-width: 0;
}

.ai-hint {
    margin: 0;
    color: var(--ai-muted);
    white-space: nowrap;
}

.ai-hint .icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.2em;
}

.ai-explorer {
    display: grid;
    margin-top: var(--gap-max);
    border: 1px solid var(--ai-card-edge);
    border-radius: 1.25rem;
    background: var(--ai-card);
    box-shadow: var(--ai-card-shadow);
    overflow: hidden;
}

.ai-explorer__list {
    padding: 1rem 0.75rem;
    border-bottom: 1px solid var(--ai-line);
}

.ai-explorer__label {
    margin: 0 0 0.5rem 0.5rem;
    color: var(--ai-muted);
}

.ai-options {
    display: grid;
}

.ai-option {
    position: relative;
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr);
    column-gap: 0.5rem;
    width: 100%;
    padding: 0.875rem 0.75rem;
    border: 0;
    border-radius: 0.75rem;
    background: transparent;
    color: var(--ai-muted);
    text-align: left;
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), color 200ms var(--ease-standard),
        scale var(--spring-quick) var(--ease-spring);
}

/* the hairline over each option but the first; the chosen one and the one after it have none, since the chosen one has
   its own ground */
.ai-option + .ai-option::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0.75rem;
    left: 0.75rem;
    height: 1px;
    background: var(--ai-line);
}

.ai-option[aria-selected="true"]::before,
.ai-option[aria-selected="true"] + .ai-option::before {
    background: transparent;
}

.ai-option:hover {
    color: var(--ai-ink);
}

.ai-option:active {
    scale: var(--press-scale-card);
    transition-duration: 200ms, 200ms, var(--press-in);
}

.ai-option__no {
    grid-row: 1;
    align-self: center;
    color: var(--ai-muted);
}

.ai-option__name {
    grid-column: 2;
    color: inherit;
}

.ai-option__line {
    grid-column: 2;
    color: var(--ai-muted);
}

.ai-option[aria-selected="true"] {
    background: var(--ai-blue-soft);
    color: var(--ai-eyebrow);
}

.ai-option[aria-selected="true"] .ai-option__no {
    color: var(--ai-eyebrow);
}

.ai-explorer__panes {
    display: grid;
    min-width: 0;
    background: var(--ai-explorer-glow);
}

.ai-pane {
    padding: 1.5rem 1.25rem;
}

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

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

.ai-pane__copy {
    margin: 0.75rem 0 0;
    max-width: 34rem;
    color: var(--ai-ink);
    text-wrap: pretty;
}

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

.ai-flow__step {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ai-flow__step .icon {
    width: 1rem;
    height: 1rem;
    color: var(--ai-eyebrow);
}

.ai-flow__pill {
    display: inline-block;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--ai-blue-soft-edge);
    border-radius: 0.625rem;
    background: var(--ai-card);
    color: var(--ai-ink);
    white-space: nowrap;
}

.ai-pane__example {
    margin: 1.25rem 0 0;
    max-width: 34rem;
    padding-left: 1rem;
    border-left: 3px solid var(--ai-blue);
    color: var(--ai-ink);
    text-wrap: pretty;
}

/* the choice at work: the list beside the panes from 48rem, and only the chosen pane is shown */
.ai-explorer.is-ready .ai-pane + .ai-pane {
    border-top: 0;
}

/* a page without a script shows every solution and 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) .ai-pane:not(:first-child),
    [data-tabs]:not(.is-ready) .ai-detail:not(:first-child) {
        display: none;
    }
}

/* ------------------------------------------------------------------ */
/* Who it is for                                                       */
/* ------------------------------------------------------------------ */

.ai-head--split {
    align-items: end;
}

/* the head's grid has the gap between its words and the lead beside or under them: the lead has no room of its own */
.ai-head--split > .ai-lead {
    margin-top: 0;
}

.ai-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin: 1.25rem 0 0;
    padding: 0;
    list-style: none;
}

.ai-tag {
    padding: 0.5rem 1rem;
    border: 1px solid var(--ai-card-edge);
    border-radius: 999px;
    background: var(--ai-card);
    color: var(--ai-ink);
    white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* How we work: the illustration, the five stages on a wave, a choice   */
/* ------------------------------------------------------------------ */

.ai-approach {
    background: var(--ai-approach);
    border-top: 1px solid var(--ai-tint-edge);
}

.ai-approach__stage {
    padding-block: 1.75rem 0;
}

.ai-approach__inner {
    display: grid;
    gap: var(--gap-max);
}

.ai-approach__words {
    min-width: 0;
}

.ai-approach__art {
    min-width: 0;
}

.ai-approach__art img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--ai-art-edge);
    border-radius: 1.25rem;
    filter: var(--ai-art-filter);
}

/* the wave is drawn from 80rem; below it the choice of stages says the same in words */
.ai-wave {
    display: none;
}

.ai-stepper {
    padding-block: var(--gap-max) 1.75rem;
}

.ai-stepper__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.25rem 1rem;
}

.ai-stepper__words {
    min-width: 0;
}

.ai-stepper__hint {
    margin: 0.25rem 0 0;
    color: var(--ai-muted);
}

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

.ai-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin-top: 0.75rem;
}

/* the line the dots stand on */
.ai-track::before {
    content: "";
    position: absolute;
    top: 1.125rem;
    right: 0;
    left: 0;
    height: 1px;
    background: var(--ai-line-strong);
}

.ai-track[hidden] {
    display: none;
}

.ai-track__step {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: start;
    min-height: 4.5rem;
    padding: 0.75rem 0 0.5rem;
    border: 0;
    background: none;
    color: var(--ai-ink);
    cursor: pointer;
    transition: color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

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

.ai-track__dot {
    width: 0.75rem;
    height: 0.75rem;
    border: 1px solid var(--ai-line-strong);
    border-radius: 50%;
    background: var(--ai-surface);
    transition: background-color 200ms var(--ease-standard), border-color 200ms var(--ease-standard),
        box-shadow 250ms var(--ease-standard);
}

.ai-track__no {
    margin-top: 0.5rem;
    color: var(--ai-muted);
}

.ai-track__name {
    margin-top: 0.125rem;
    color: inherit;
}

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

.ai-track__step[aria-selected="true"] .ai-track__dot {
    border-color: var(--ai-blue);
    background: var(--ai-blue);
    box-shadow: 0 0 0 4px var(--ai-blue-soft);
}

.ai-details {
    display: grid;
    margin-top: 0.75rem;
}

.ai-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--ai-card-edge);
    border-left: 4px solid var(--ai-blue);
    border-radius: 0.75rem;
    background: var(--ai-card);
    box-shadow: var(--ai-card-shadow);
}

.ai-detail[hidden] {
    display: none;
}

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

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

.ai-detail .icon {
    flex: none;
    color: var(--ai-eyebrow);
}

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

.ai-integrations {
    padding-block: 1.75rem;
    border-block: 1px solid var(--ai-tint-edge);
    background: var(--ai-tint);
}

.ai-head--base .ai-hint {
    justify-self: start;
}

/* the cells are one grid with a hairline between each two (a gap of 1px over a ground of the line's colour) */
.ai-cells {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin: var(--gap-max) 0 0;
    padding: 0;
    border-block: 1px solid var(--ai-line-solid);
    background: var(--ai-line-solid);
    list-style: none;
}

.ai-cell {
    display: grid;
    place-items: center;
    min-height: 4.5rem;
    padding: 0.75rem 0.5rem;
    background: var(--ai-tint);
    color: var(--ai-ink);
    text-align: center;
}

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

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

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

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

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

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

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

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

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

/* where the browser can animate a disclosure's content, an answer opens to its height and closes back, on the
   site's spring: a click while it moves sends it back from where it is */
@supports (interpolate-size: allow-keywords) {
    .ai-faq__item {
        interpolate-size: allow-keywords;
    }

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

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

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

.ai-cta-wrap {
    padding-block: var(--gap-max);
}

.ai-cta {
    position: relative;
    isolation: isolate;
    display: grid;
    gap: 1.25rem;
    align-items: center;
    padding: 1.75rem 1.5rem;
    border-radius: clamp(1rem, 1.23vw, 1.5rem);
    background: var(--ai-cta);
    color: var(--ai-cta-ink);
    overflow: hidden;
}

/* rings of light at the right, one inside another */
.ai-cta::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -9rem;
    bottom: -14rem;
    width: 22rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--ai-cta-ring);
    box-shadow: 0 0 0 3.5rem var(--ai-cta-ring-2), 0 0 0 7rem var(--ai-cta-ring-2);
}

.ai-cta__words {
    min-width: 0;
}

.ai-cta__eyebrow {
    color: var(--ai-cta-eyebrow);
}

.ai-cta__title {
    margin: 0.5rem 0 0;
    color: var(--ai-cta-ink);
    text-wrap: balance;
}

.ai-cta__text {
    margin: 0.75rem 0 0;
    max-width: 46rem;
    color: var(--ai-cta-text);
    text-wrap: pretty;
}

.ai-cta .ai-btn {
    justify-self: start;
}

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

@media (min-width: 40rem) {
    .ai-cells {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ai-scn,
    .ai-demo__bar,
    .ai-demo__choose,
    .ai-demo__foot {
        padding-inline: 1.5rem;
    }
}

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

@media (min-width: 48rem) {
    /* the example's three columns side by side, a hairline between each two */
    .ai-scn__cols {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr) minmax(0, 1fr);
    }

    .ai-col {
        padding-block: 0;
        padding-inline: 1rem;
        border-top: 0;
        border-left: 1px solid var(--ai-line);
    }

    .ai-col:first-child {
        padding-left: 0;
        border-left: 0;
    }

    .ai-col:last-child {
        padding-right: 0;
    }

    .ai-split {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        align-items: center;
    }

    .ai-faq__inner {
        align-items: start;
    }

    .ai-head--split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .ai-head--split > .ai-lead,
    .ai-head--split > .ai-hint {
        justify-self: end;
    }

    .ai-head:not(.ai-head--split) {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    /* the choice of solutions at work: the list beside the panes */
    .ai-explorer.is-ready {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    }

    .ai-explorer__list {
        padding: 1.25rem 1rem;
        border-right: 1px solid var(--ai-line);
        border-bottom: 0;
    }

    .ai-pane {
        padding: 1.75rem 2rem;
    }

    .ai-approach__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
        align-items: center;
    }

    /* in the light theme the illustration's four edges are feathered into the section (a mask); in the dark one it is a
       dimmed card (a rounded corner and a hairline), which the dark tokens say */
    .ai-approach__art img {
        border-radius: var(--ai-art-radius);
        -webkit-mask-image: var(--ai-art-mask);
        mask-image: var(--ai-art-mask);
        -webkit-mask-composite: source-in;
        mask-composite: intersect;
    }

    /* below 80rem the five stages are a list under the lead, beside the illustration: each an icon on its colour, its name
       and its line (from 80rem they stand on a wave) */
    .ai-wave {
        display: block;
        margin-top: var(--gap-max);
    }

    .ai-wave__curve,
    .ai-wave__tip,
    .ai-wave__no,
    .ai-wave__node {
        display: none;
    }

    .ai-wave__stages {
        display: grid;
        gap: 0.75rem;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .ai-wave__stage {
        display: grid;
        grid-template-columns: 3rem minmax(0, 1fr);
        column-gap: 1rem;
        align-items: center;
    }

    .ai-wave__badge {
        display: grid;
        place-items: center;
        grid-row: 1 / span 2;
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        background: var(--ai-tone-bg);
        color: var(--ai-tone);
    }

    .ai-wave__badge .icon {
        width: 1.375rem;
        height: 1.375rem;
    }

    .ai-wave__name {
        margin: 0;
        align-self: end;
        color: var(--ai-ink);
    }

    .ai-wave__caption {
        margin: 0;
        align-self: start;
        color: var(--ai-muted);
    }

    .ai-cta {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--gap-max);
        padding: 2rem 2.5rem;
    }

    .ai-cta .ai-btn {
        justify-self: end;
    }

    .ai-track__step {
        justify-items: start;
        padding-left: 0;
    }

    .ai-track__dot {
        margin-left: 0;
    }

    .ai-cta::before {
        right: -4rem;
        bottom: auto;
        top: 50%;
        translate: 0 -50%;
    }
}

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

@media (min-width: 64rem) {
    .ai-cells {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .ai-pane {
        padding: 2rem 2.5rem;
    }

    .ai-cta {
        padding: 2.25rem 3rem;
    }
}

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

@media (min-width: 72rem) {
    .ai-hero__inner {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        align-items: center;
    }
}

/* ------------------------------------------------------------------ */
/* From 80rem: the five stages on their wave                            */
/* ------------------------------------------------------------------ */

@media (min-width: 80rem) {
    .ai-approach__inner {
        grid-template-columns: minmax(0, 1fr) clamp(22rem, 34vw, 38rem);
        align-items: stretch;
    }

    .ai-approach__art {
        position: relative;
    }

    /* the illustration fills the row beside the words, whatever its height */
    .ai-approach__art img {
        position: absolute;
        inset: 0;
        height: 100%;
        object-fit: cover;
        object-position: 30% 50%;
    }

    /* the wave: a curve in a box 1000 wide and 120 high (a pixel high is 1/16 rem), stretched across the list, and the
       five stages, each a fifth of the width, standing on it at the heights the curve has at the middle of its fifth */
    .ai-wave {
        position: relative;
        display: block;
        margin-top: var(--gap-max);
    }

    .ai-wave__curve {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        height: 7.5rem;
        overflow: visible;
        pointer-events: none;
    }

    .ai-wave__path {
        stroke-width: 2px;
        stroke-linecap: round;
    }

    .ai-wave__stop--1 { stop-color: var(--ai-wave-1); }
    .ai-wave__stop--2 { stop-color: var(--ai-wave-2); }
    .ai-wave__stop--3 { stop-color: var(--ai-wave-3); }
    .ai-wave__stop--4 { stop-color: var(--ai-wave-4); }

    /* the arrow at the curve's end, turned the way the curve is going */
    .ai-wave__tip {
        position: absolute;
        display: block;
        top: calc(42rem / 16 - 0.5rem);
        right: -0.375rem;
        width: 1rem;
        height: 1rem;
        rotate: -25deg;
        fill: var(--ai-wave-4);
    }

    .ai-wave__stages {
        position: relative;
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .ai-wave__stage {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: calc(var(--ai-y) * 1rem / 16) 0.375rem 0;
        text-align: center;
    }

    .ai-wave__stage--1 { --ai-y: 0; }
    .ai-wave__stage--2 { --ai-y: 36; }
    .ai-wave__stage--3 { --ai-y: 70; }
    .ai-wave__stage--4 { --ai-y: 22; }
    .ai-wave__stage--5 { --ai-y: 68; }

    .ai-wave__no {
        display: block;
        height: 1.25rem;
        margin-bottom: 0.375rem;
        color: var(--ai-muted);
    }

    /* the node stands on the curve: a label 1.25rem high over it, 0.375rem of room (so that the curve, which comes into
       the node at a slant, does not touch the label's digits) and half its own height to its middle */
    .ai-wave__node {
        display: block;
        flex: none;
        width: 0.625rem;
        height: 0.625rem;
        border: 2px solid var(--ai-blue);
        border-radius: 50%;
        background: var(--ai-wave-ring);
        box-sizing: border-box;
    }

    .ai-wave__badge {
        position: relative;
        display: grid;
        place-items: center;
        flex: none;
        width: 3.5rem;
        height: 3.5rem;
        margin-top: 1.25rem;
        border-radius: 50%;
        background: var(--ai-tone-bg);
        box-shadow: 0 0 0 0.375rem color-mix(in srgb, var(--ai-tone-bg) 55%, transparent);
        color: var(--ai-tone);
    }

    .ai-wave__badge .icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* the dotted line from the node to its badge */
    .ai-wave__badge::before {
        content: "";
        position: absolute;
        bottom: calc(100% + 0.375rem);
        left: 50%;
        height: 0.625rem;
        border-left: 1px dotted var(--ai-line-strong);
    }

    .ai-wave__name {
        align-self: auto;
        margin-top: 0.75rem;
    }

    .ai-wave__caption {
        align-self: auto;
        margin-top: 0.25rem;
        text-wrap: balance;
    }

    .ai-track__step {
        min-height: 4.75rem;
    }
}

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

@media (prefers-contrast: more) {
    .ai-demo,
    .ai-explorer,
    .ai-detail,
    .ai-tag,
    .ai-chip,
    .ai-flow__pill {
        border-color: var(--ai-ink);
    }

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

    .ai-approach__art img {
        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) {
    .ai-hero__title,
    .ai-hero__lead {
        animation: hero-settle var(--spring-slow) var(--ease-spring) both;
    }

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

    .ai-crumbs,
    .ai-hero__eyebrow,
    .ai-hero__actions,
    .ai-trust {
        animation: hero-enter var(--spring-slow) var(--ease-spring) both;
    }

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

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

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

    /* the step that is being worked on pulses, the example's dot too, and the arrow turns while it runs */
    .ai-step.is-active .ai-step__mark {
        animation: ai-pulse 900ms ease-in-out infinite;
    }

    .ai-demo[data-state="running"] .ai-out__status .ai-when--running .ai-out__dot {
        animation: ai-pulse 900ms ease-in-out infinite;
    }

    .ai-demo[data-state="running"] .ai-demo__run-icon .icon {
        animation: ai-turn 900ms linear infinite;
    }

    .ai-pane:not([hidden]),
    .ai-detail:not([hidden]) {
        animation: ai-swap var(--spring) var(--ease-spring) both;
    }
}

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

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

@keyframes ai-pulse {
    50% {
        opacity: 0.45;
    }
}

@keyframes ai-turn {
    to {
        rotate: 360deg;
    }
}

@media print {
    .ai-hero,
    .ai-approach,
    .ai-solutions,
    .ai-integrations {
        background: none;
    }

    .ai-cta {
        background: none;
        color: inherit;
    }

    .ai-cta::before,
    .ai-approach__art {
        display: none;
    }
}