/* The support and maintenance page (services/pages/support-and-maintenance.html), after its own design (2026-10-28: "new design
   for support-and-maintenance page"). Until then the page was drawn to the landing design (css/pages/landing.css), which has no
   rule for it now.

   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 console in 10 to 13px: the console is set in the roles'
   sizes, so it is larger, and its three figures stand one under the other where it is narrow). Mobile first: one column, the
   steps and the report under their headings on a phone and a tablet and beside them from 64rem, the picture over its choice and
   beside it from 64rem, the hero in two columns from 72rem. Where the page asks for a script (the state of the console, the
   sample deliverable, the starting point) every answer is in the markup, and what chooses is `hidden`, or a link to what it
   means, until site.js makes it work; the accordion and the questions need none.

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

:root {
    --sup-surface: #ffffff;
    /* the text: headings and body text in typography.md's primary colour, small text in its secondary */
    --sup-ink: var(--text-primary);
    --sup-muted: var(--text-secondary);
    --sup-eyebrow: #0a4ce9;
    --sup-crumb-chevron: #8790a8;
    --sup-blue: #0154e5;
    --sup-blue-hover: #0043bd;
    --sup-on-blue: #ffffff;
    --sup-blue-soft: #e8f1ff;
    --sup-blue-soft-edge: #cbdcff;
    --sup-outline: #b4c9e8;
    --sup-outline-ink: #0f47a8;
    --sup-outline-bg: rgb(255 255 255 / 0.74);
    --sup-outline-hover: #eef6ff;
    /* the hero: a pale blue light at its right over a white that goes to blue at its foot, and two rings */
    --sup-hero-bg: radial-gradient(ellipse 70% 80% at 85% 28%, #dceafe 0, #eaf2ff 38%, rgb(244 248 254 / 0) 72%),
        linear-gradient(180deg, #f4f8fe 0%, #ffffff 97%);
    --sup-hero-ring: #c9dbf4;
    --sup-hero-ring-2: #d9e6f6;
    --sup-hero-edge: #e4ebf5;
    --sup-line: #e4eaf2;
    --sup-line-strong: #d3deec;
    --sup-card: #ffffff;
    --sup-card-edge: #cddcee;
    --sup-card-shadow: 0 18px 56px rgb(29 65 112 / 0.12), 0 4px 14px rgb(16 50 101 / 0.05);
    --sup-dot: #1766ed;
    /* the marks of the technologies it supports, in the brands' own colours (the landing design's) */
    --sup-brand-ink: #1b1f2a;
    --sup-brand-java: #e76f00;
    --sup-brand-spring: #6db33f;
    --sup-brand-react: #149eca;
    --sup-brand-android: #3ddc84;
    --sup-brand-oracle: #c74634;
    --sup-brand-postgres: #336791;
    --sup-brand-aws: #232f3e;
    --sup-brand-aws-smile: #ff9900;
    --sup-brand-azure: #0078d4;
    --sup-brand-azure-2: #50e6ff;
    /* the sample console: a dark window, on both themes */
    --sup-scene-glow: radial-gradient(circle at center, #c8e0ff 4%, rgb(200 224 255 / 0) 67%);
    --sup-console-bg: #091731;
    --sup-console-edge: #24365b;
    --sup-console-shadow: 0 34px 75px rgb(14 30 73 / 0.22), 0 7px 20px rgb(14 30 73 / 0.13);
    --sup-console-ink: #eaf3ff;
    --sup-console-text: #c6d3ea;
    --sup-console-muted: #a3b4d2;
    --sup-console-rule: #263852;
    --sup-console-grid: #20324c;
    --sup-console-foot: #102143;
    --sup-console-demo-edge: #435b82;
    --sup-console-orb: #36d7a7;
    --sup-console-orb-ring: rgb(54 215 167 / 0.14);
    --sup-console-ok: #79e7bf;
    --sup-console-warn: #ffcf85;
    --sup-console-line: #28dfb2;
    --sup-console-fill: rgb(33 217 170 / 0.16);
    --sup-console-line-warn: #ffb65b;
    --sup-console-fill-warn: rgb(255 174 71 / 0.16);
    --sup-console-icon-bg: #1e3551;
    --sup-console-icon: #74e7bc;
    --sup-console-warn-bg: #413322;
    --sup-console-action: #2467e7;
    --sup-console-action-hover: #3679f9;
    --sup-console-action-edge: #4d89fb;
    --sup-note-tick-bg: #dcf8ec;
    --sup-note-tick: #0b7a57;
    /* the strips and the bands */
    --sup-band: #eef4fd;
    --sup-band-edge: #dde7f5;
    --sup-band-soft: #f6f9fd;
    --sup-engage-bg: linear-gradient(140deg, #fafdff 0%, #eef5ff 100%);
    /* the sample deliverable's choice and its report */
    --sup-chip-edge: #b4c4dc;
    --sup-chip-ink: #35496a;
    --sup-chip-on: #0b2761;
    --sup-chip-on-ink: #ffffff;
    --sup-report-kicker: #3a609e;
    --sup-tick-bg: #d3f4e5;
    --sup-tick: #0b7a57;
    /* the picture */
    --sup-photo-shadow: 0 24px 58px rgb(20 54 104 / 0.14);
    --sup-photo-filter: none;
    /* the closing card */
    /* the card's blue: deeper at its far end where the card is narrow and its words reach across it (3.3:1 for them over the
       design's #1259ed on a phone), the design's from 72rem, where its words stay in its dark left */
    --sup-closing: linear-gradient(115deg, #091b3c 5%, #10378a 70%, #1245a8 100%);
    --sup-closing-wide: linear-gradient(115deg, #091b3c 5%, #123f9a 74%, #1259ed 100%);
    --sup-closing-ring: rgb(125 165 255 / 0.55);
    --sup-closing-ring-2: rgb(95 140 235 / 0.5);
    --sup-closing-eyebrow: #b9d3ff;
    --sup-closing-text: #d2e0fb;
    --sup-light-ink: #0b2a63;
    --sup-light-hover: #e8f1ff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --sup-surface: #131314;
        --sup-ink: var(--text-primary);
        --sup-muted: var(--text-secondary);
        --sup-eyebrow: #a8c7fa;
        --sup-crumb-chevron: #7f889c;
        --sup-blue: #a8c7fa;
        --sup-blue-hover: #c2d8fc;
        --sup-on-blue: #062e6f;
        --sup-blue-soft: rgb(168 199 250 / 0.14);
        --sup-blue-soft-edge: rgb(168 199 250 / 0.42);
        --sup-outline: #5d7fbf;
        --sup-outline-ink: #a8c7fa;
        --sup-outline-bg: transparent;
        --sup-outline-hover: rgb(168 199 250 / 0.1);
        --sup-hero-bg: radial-gradient(ellipse 70% 80% at 85% 28%, rgb(120 160 255 / 0.15) 0, rgb(120 160 255 / 0.05) 50%, rgb(120 160 255 / 0) 80%),
            linear-gradient(180deg, #121620 0%, #131314 97%);
        --sup-hero-ring: rgb(168 199 250 / 0.16);
        --sup-hero-ring-2: rgb(168 199 250 / 0.1);
        --sup-hero-edge: rgb(255 255 255 / 0.08);
        --sup-line: rgb(255 255 255 / 0.1);
        --sup-line-strong: rgb(168 199 250 / 0.3);
        --sup-card: #1b1c1f;
        --sup-card-edge: rgb(255 255 255 / 0.12);
        --sup-card-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 28px 56px -28px rgb(0 0 0 / 0.7);
        --sup-dot: #6f9cf0;
        --sup-brand-ink: #e3e3e3;
        --sup-brand-aws: #e3e3e3;
        --sup-brand-postgres: #8fb5dd;
        --sup-scene-glow: radial-gradient(circle at center, rgb(90 140 235 / 0.22) 4%, rgb(90 140 235 / 0) 67%);
        --sup-console-edge: #35507f;
        --sup-console-shadow: 0 30px 62px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(120 160 235 / 0.1);
        --sup-note-tick-bg: rgb(109 213 140 / 0.18);
        --sup-note-tick: #6dd58c;
        --sup-band: #17181b;
        --sup-band-edge: rgb(255 255 255 / 0.08);
        --sup-band-soft: #161719;
        --sup-engage-bg: linear-gradient(140deg, #141619 0%, #121a26 100%);
        --sup-chip-edge: rgb(168 199 250 / 0.4);
        --sup-chip-ink: #c6d4ee;
        --sup-chip-on: #a8c7fa;
        --sup-chip-on-ink: #062e6f;
        --sup-report-kicker: #9cbcf0;
        --sup-tick-bg: rgb(109 213 140 / 0.16);
        --sup-tick: #6dd58c;
        --sup-photo-shadow: 0 24px 58px rgb(0 0 0 / 0.5);
        --sup-photo-filter: brightness(0.9);
        --sup-closing: linear-gradient(115deg, #070f23 5%, #0c2760 74%, #0d3a9a 100%);
        --sup-closing-wide: linear-gradient(115deg, #070f23 5%, #0c2760 74%, #0d3a9a 100%);
        --sup-closing-ring: rgb(125 165 255 / 0.4);
        --sup-closing-ring-2: rgb(95 140 235 / 0.35);
        --sup-closing-eyebrow: #b9d3ff;
        --sup-closing-text: #cfdcf2;
        --sup-light-ink: #0b2a63;
        --sup-light-hover: #dbe8ff;
    }
}

:root[data-theme="dark"] {
    --sup-surface: #131314;
    --sup-ink: var(--text-primary);
    --sup-muted: var(--text-secondary);
    --sup-eyebrow: #a8c7fa;
    --sup-crumb-chevron: #7f889c;
    --sup-blue: #a8c7fa;
    --sup-blue-hover: #c2d8fc;
    --sup-on-blue: #062e6f;
    --sup-blue-soft: rgb(168 199 250 / 0.14);
    --sup-blue-soft-edge: rgb(168 199 250 / 0.42);
    --sup-outline: #5d7fbf;
    --sup-outline-ink: #a8c7fa;
    --sup-outline-bg: transparent;
    --sup-outline-hover: rgb(168 199 250 / 0.1);
    --sup-hero-bg: radial-gradient(ellipse 70% 80% at 85% 28%, rgb(120 160 255 / 0.15) 0, rgb(120 160 255 / 0.05) 50%, rgb(120 160 255 / 0) 80%),
        linear-gradient(180deg, #121620 0%, #131314 97%);
    --sup-hero-ring: rgb(168 199 250 / 0.16);
    --sup-hero-ring-2: rgb(168 199 250 / 0.1);
    --sup-hero-edge: rgb(255 255 255 / 0.08);
    --sup-line: rgb(255 255 255 / 0.1);
    --sup-line-strong: rgb(168 199 250 / 0.3);
    --sup-card: #1b1c1f;
    --sup-card-edge: rgb(255 255 255 / 0.12);
    --sup-card-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 28px 56px -28px rgb(0 0 0 / 0.7);
    --sup-dot: #6f9cf0;
    --sup-brand-ink: #e3e3e3;
    --sup-brand-aws: #e3e3e3;
    --sup-brand-postgres: #8fb5dd;
    --sup-scene-glow: radial-gradient(circle at center, rgb(90 140 235 / 0.22) 4%, rgb(90 140 235 / 0) 67%);
    --sup-console-edge: #35507f;
    --sup-console-shadow: 0 30px 62px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(120 160 235 / 0.1);
    --sup-note-tick-bg: rgb(109 213 140 / 0.18);
    --sup-note-tick: #6dd58c;
    --sup-band: #17181b;
    --sup-band-edge: rgb(255 255 255 / 0.08);
    --sup-band-soft: #161719;
    --sup-engage-bg: linear-gradient(140deg, #141619 0%, #121a26 100%);
    --sup-chip-edge: rgb(168 199 250 / 0.4);
    --sup-chip-ink: #c6d4ee;
    --sup-chip-on: #a8c7fa;
    --sup-chip-on-ink: #062e6f;
    --sup-report-kicker: #9cbcf0;
    --sup-tick-bg: rgb(109 213 140 / 0.16);
    --sup-tick: #6dd58c;
    --sup-photo-shadow: 0 24px 58px rgb(0 0 0 / 0.5);
    --sup-photo-filter: brightness(0.9);
    --sup-closing: linear-gradient(115deg, #070f23 5%, #0c2760 74%, #0d3a9a 100%);
    --sup-closing-wide: linear-gradient(115deg, #070f23 5%, #0c2760 74%, #0d3a9a 100%);
    --sup-closing-ring: rgb(125 165 255 / 0.4);
    --sup-closing-ring-2: rgb(95 140 235 / 0.35);
    --sup-closing-eyebrow: #b9d3ff;
    --sup-closing-text: #cfdcf2;
    --sup-light-ink: #0b2a63;
    --sup-light-hover: #dbe8ff;
}

/* ------------------------------------------------------------------ */
/* 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 */
.sup-console__title,
.sup-metric__value,
.sup-step__title,
.sup-desc__title,
.sup-report__title,
.sup-acc__name,
.sup-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: sans 500 (the console's figure) */
.sup-count__n {
    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 */
.sup-lead,
.sup-hero__lead,
.sup-step__text,
.sup-desc__text,
.sup-acc__text,
.sup-panel__text,
.sup-faq__answer,
.sup-closing__text {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    line-height: var(--lh-body);
    letter-spacing: 0;
}

/* Small, captions: sans 400 */
.sup-points,
.sup-console__sub,
.sup-console__subtitle,
.sup-count__unit,
.sup-chart__label,
.sup-metric__label,
.sup-log__sub,
.sup-event,
.sup-console__caption,
.sup-note__words,
.sup-pillar,
.sup-proof__note,
.sup-report__summary,
.sup-entry,
.sup-report__foot,
.sup-acc__output,
.sup-panel__list {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-regular);
    line-height: var(--lh-small);
    letter-spacing: 0;
}

/* Form labels: sans 500 (the console's names, the choice of deliverable, the steps and the technologies) */
.sup-console__name,
.sup-log__title,
.sup-report__name,
.sup-chip,
.sup-note__words strong,
.sup-strip__item,
.sup-stack__item {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    line-height: var(--lh-small);
    letter-spacing: 0;
}

/* Buttons and navigation links: sans 500 */
.sup-btn,
.sup-crumbs__list,
.sup-mode,
.sup-console__action {
    font-family: var(--font-sans);
    font-size: var(--fs-button);
    font-weight: var(--fw-medium);
    line-height: var(--lh-button);
    letter-spacing: 0;
}

/* Eyebrow labels and tags: mono 500, uppercase */
.sup-eyebrow,
.sup-tag,
.sup-state {
    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                                                            */
/* ------------------------------------------------------------------ */

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

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

.sup-tag {
    margin: 0;
}

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

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

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

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

/* paragraphs that are rows of their own words are as wide as their rows, not as the base's 70ch */
.sup-note,
.sup-report__foot,
.sup-log__head,
.sup-console__brand {
    max-width: none;
}

.sup .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 */
.sup .sup-icon {
    fill: none;
}

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

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

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

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

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

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

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

/* on the closing card: a white pill, and one with a white line */
.sup-btn--light {
    background: #ffffff;
    color: var(--sup-light-ink);
}

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

.sup-btn--ghost {
    border-color: rgb(255 255 255 / 0.5);
    background: transparent;
    color: #ffffff;
}

.sup-btn--ghost:hover {
    background: rgb(255 255 255 / 0.14);
    color: #ffffff;
}

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

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

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

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

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

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

.sup-hero::before {
    top: -24rem;
    right: -18rem;
    width: 51rem;
    height: 51rem;
}

.sup-hero::after {
    top: -33rem;
    right: -29rem;
    width: 70rem;
    height: 70rem;
    border-color: var(--sup-hero-ring-2);
}

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

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

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

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

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

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

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

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

.sup-hero__words,
.sup-scene {
    min-width: 0;
}

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

/* the title is two sentences, each on a line of its own */
.sup-line {
    display: block;
}

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

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

/* what it covers, three short phrases with a dot between each two */
.sup-points {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem var(--gap-max);
    margin: 1rem 0 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    color: var(--sup-muted);
}

.sup-points__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.
   (The technologies have marks before their names instead.) */
.sup-points__item::before {
    content: "•";
    content: "•" / "";
    position: absolute;
    left: calc(var(--gap-max) / -2);
    translate: -50% 0;
    color: var(--sup-dot);
}

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

.sup-scene {
    position: relative;
    isolation: isolate;
}

.sup-scene::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 6% -9% 2% 7%;
    background: var(--sup-scene-glow);
    pointer-events: none;
}

/* what the console wears while it is handling an incident: amber where it was green */
.sup-scene[data-state="incident"] {
    --sup-state-ink: var(--sup-console-warn);
    --sup-console-line: var(--sup-console-line-warn);
    --sup-console-fill: var(--sup-console-fill-warn);
}

.sup-console {
    container: sup-console / inline-size;
    border: 1px solid var(--sup-console-edge);
    border-radius: 1.375rem;
    background: var(--sup-console-bg);
    color: var(--sup-console-ink);
    box-shadow: var(--sup-console-shadow);
    overflow: hidden;
}

.sup-console__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--sup-console-rule);
}

.sup-console__brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}

.sup-orb {
    flex: none;
    width: 0.5625rem;
    height: 0.5625rem;
    border-radius: 50%;
    background: var(--sup-console-orb);
    box-shadow: 0 0 0 5px var(--sup-console-orb-ring);
}

.sup-console__name,
.sup-console__sub {
    display: block;
}

.sup-console__sub {
    color: var(--sup-console-muted);
}

.sup-console__demo {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--sup-console-demo-edge);
    border-radius: 0.375rem;
    overflow-wrap: anywhere;
    color: var(--sup-console-muted);
}

.sup-console__body {
    padding: 1.25rem 1.25rem 0.75rem;
}

.sup-status-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.sup-status-row__words {
    min-width: 0;
}

.sup-state {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--sup-state-ink, var(--sup-console-ok));
}

.sup-state::before {
    content: "";
    flex: none;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: currentColor;
}

.sup-console__title {
    margin: 0.5rem 0 0;
    color: var(--sup-console-ink);
}

.sup-console__subtitle {
    margin: 0.125rem 0 0;
    color: var(--sup-console-muted);
}

.sup-count {
    flex: none;
    margin: 0;
    text-align: right;
    color: var(--sup-console-ink);
}

.sup-count__n,
.sup-count__unit {
    display: block;
}

.sup-count__unit {
    color: var(--sup-console-muted);
}

/* the response time over the last day: a line on a grid, and the dot where it ends */
.sup-chart {
    position: relative;
    height: 9rem;
    margin-top: 1rem;
    border-bottom: 1px solid var(--sup-console-rule);
    background: repeating-linear-gradient(to bottom, transparent 0, transparent 2.1875rem,
        var(--sup-console-grid) 2.1875rem, var(--sup-console-grid) calc(2.1875rem + 1px));
}

.sup-chart__label {
    position: absolute;
    top: 0.375rem;
    left: 0.125rem;
    margin: 0;
    color: var(--sup-console-muted);
}

.sup-chart__svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.sup-chart__fill {
    fill: var(--sup-console-fill);
}

.sup-chart__line {
    stroke: var(--sup-console-line);
}

.sup-chart__dot {
    position: absolute;
    top: 52%;
    left: 87.8%;
    width: 0.5625rem;
    height: 0.5625rem;
    border-radius: 50%;
    background: var(--sup-console-line);
    box-shadow: 0 0 0 5px var(--sup-console-fill);
    translate: -50% -50%;
}

.sup-scene[data-state="incident"] .sup-chart__dot {
    top: 29%;
}

/* three figures: a line each where the console is narrow, side by side where it is not */
.sup-metrics {
    margin: 0;
    padding: 0;
}

.sup-metric {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--sup-console-rule);
}

.sup-metric__label {
    min-width: 0;
    margin: 0;
    color: var(--sup-console-muted);
}

.sup-metric__value {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    text-align: right;
    color: var(--sup-console-ink);
}

@container sup-console (min-width: 30rem) {
    .sup-console__body {
        padding: 1.25rem 1.5rem 0.75rem;
    }

    .sup-metrics {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-bottom: 1px solid var(--sup-console-rule);
    }

    /* as the design has them: the figure over what it is about, though the markup says the term first */
    .sup-metric {
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        gap: 0.25rem;
        padding: 1rem 0.75rem 1rem 1.25rem;
        border-bottom: 0;
        border-left: 1px solid var(--sup-console-rule);
    }

    .sup-metric:first-child {
        padding-left: 0;
        border-left: 0;
    }

    .sup-metric__value {
        text-align: left;
    }
}

.sup-log {
    padding-top: 1rem;
}

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

.sup-log__title {
    color: var(--sup-console-ink);
}

.sup-log__sub {
    color: var(--sup-console-muted);
}

.sup-log__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.sup-event {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0;
    border-top: 1px solid var(--sup-console-rule);
    color: var(--sup-console-text);
}

.sup-event__icon {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 0.4375rem;
    background: var(--sup-console-icon-bg);
    color: var(--sup-console-icon);
}

.sup-event__icon .icon {
    width: 0.875rem;
    height: 0.875rem;
}

.sup-event--warning .sup-event__icon {
    background: var(--sup-console-warn-bg);
    color: var(--sup-console-warn);
}

.sup-event__text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sup-event__time {
    color: var(--sup-console-muted);
    white-space: nowrap;
}

.sup-console__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    background: var(--sup-console-foot);
}

.sup-console__caption {
    min-width: 0;
    margin: 0;
    color: var(--sup-console-muted);
}

.sup-console__action {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    max-width: 100%;
    padding: 0.5rem 1rem;
    border: 1px solid var(--sup-console-action-edge);
    border-radius: 0.5rem;
    background: var(--sup-console-action);
    color: #ffffff;
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.sup-console__action[hidden] {
    display: none;
}

.sup-console__action:hover {
    background: var(--sup-console-action-hover);
}

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

.sup-console__action .icon {
    width: 1rem;
    height: 1rem;
    flex: none;
}

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

.sup-scene[data-state="ok"] .sup-v[data-v="ok"],
.sup-scene[data-state="incident"] .sup-v[data-v="incident"],
.sup-proof[data-sample="incident"] .sup-v[data-v="incident"],
.sup-proof[data-sample="security"] .sup-v[data-v="security"],
.sup-proof[data-sample="recovery"] .sup-v[data-v="recovery"] {
    display: inline;
}

.sup-scene[data-state="ok"] .sup-vb[data-v="ok"],
.sup-scene[data-state="incident"] .sup-vb[data-v="incident"],
.sup-proof[data-sample="incident"] .sup-vb[data-v="incident"],
.sup-proof[data-sample="security"] .sup-vb[data-v="security"],
.sup-proof[data-sample="recovery"] .sup-vb[data-v="recovery"] {
    display: block;
}

/* the note under the console */
.sup-note {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0.75rem 0 0;
    color: var(--sup-muted);
}

.sup-note__tick {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--sup-note-tick-bg);
    color: var(--sup-note-tick);
}

.sup-note__tick .icon {
    width: 0.75rem;
    height: 0.75rem;
}

.sup-note__words {
    min-width: 0;
}

.sup-note__words strong {
    display: block;
    color: var(--sup-ink);
}

/* ------------------------------------------------------------------ */
/* How we work: a strip of four steps under the hero                    */
/* ------------------------------------------------------------------ */

.sup-strip {
    border-bottom: 1px solid var(--sup-line);
}

.sup-strip__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem var(--gap-max);
    padding-block: 1rem;
}

.sup-strip__label {
    color: var(--sup-muted);
    white-space: nowrap;
}

.sup-strip__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem var(--gap-max);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sup-strip__item {
    color: var(--sup-ink);
}

.sup-strip__no {
    color: var(--sup-eyebrow);
}

/* ------------------------------------------------------------------ */
/* The approach: the heading beside four steps                          */
/* ------------------------------------------------------------------ */

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

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

/* what the scope depends on, under a rule */
.sup-pillar {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 24rem;
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--sup-line-strong);
    color: var(--sup-muted);
}

.sup-pillar__icon {
    flex: none;
    color: var(--sup-eyebrow);
}

.sup-pillar__icon .icon {
    width: 1.75rem;
    height: 1.75rem;
}

/* the steps are ruled apart from one another, with no rule above the first or under the last (2026-10-28: asked for, "remove the
   top and bottom lines"), so that the list begins and ends where its words do */
.sup-steps {
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sup-step {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0 0.75rem;
    padding-block: 1.25rem;
    border-bottom: 1px solid var(--sup-line-strong);
}

.sup-step:first-child {
    padding-top: 0;
}

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

.sup-step__no {
    padding-top: 0.25rem;
    color: var(--sup-eyebrow);
}

.sup-step__words {
    min-width: 0;
}

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

.sup-step__text {
    max-width: 38rem;
    margin: 0.5rem 0 0;
    color: var(--sup-muted);
    text-wrap: pretty;
}

/* ------------------------------------------------------------------ */
/* What a client is shown: a choice of three sample deliverables and a report */
/* ------------------------------------------------------------------ */

.sup-proof {
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    border-block: 1px solid var(--sup-band-edge);
    background: var(--sup-band);
}

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

.sup-proof__words,
.sup-report {
    min-width: 0;
}

.sup-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.sup-chips[hidden] {
    display: none;
}

.sup-chip {
    min-height: 2.75rem;
    max-width: 100%;
    padding: 0.375rem 1rem;
    border: 1px solid var(--sup-chip-edge);
    border-radius: 999px;
    overflow-wrap: anywhere;
    background: transparent;
    color: var(--sup-chip-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);
}

.sup-chip:hover {
    border-color: var(--sup-blue);
}

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

.sup-chip[aria-pressed="true"] {
    border-color: var(--sup-chip-on);
    background: var(--sup-chip-on);
    color: var(--sup-chip-on-ink);
}

.sup-desc {
    margin-top: 1rem;
    max-width: 30rem;
}

.sup-desc__title {
    margin: 0;
    color: var(--sup-ink);
}

.sup-desc__text {
    margin: 0.25rem 0 0;
    color: var(--sup-muted);
    text-wrap: pretty;
}

.sup-proof__note {
    max-width: 30rem;
    margin: 0.75rem 0 0;
    color: var(--sup-muted);
}

/* the report: a white card with what the deliverable records */
.sup-report {
    padding: 1.25rem;
    border: 1px solid var(--sup-card-edge);
    border-radius: 1.125rem;
    background: var(--sup-card);
    box-shadow: var(--sup-card-shadow);
}

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

.sup-report__name {
    margin: 0;
    color: var(--sup-ink);
}

.sup-report__tag {
    color: var(--sup-muted);
}

.sup-report__body {
    padding-top: 1rem;
}

.sup-report__kicker {
    color: var(--sup-report-kicker);
}

.sup-report__title {
    margin: 0.375rem 0 0;
    color: var(--sup-ink);
}

.sup-report__summary {
    max-width: 30rem;
    margin: 0.5rem 0 0;
    color: var(--sup-muted);
}

.sup-report__lines {
    margin: 1rem 0 0;
    padding: 0;
    border-top: 1px solid var(--sup-line);
    list-style: none;
}

.sup-entry {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--sup-line);
    color: var(--sup-ink);
}

.sup-entry__tick {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--sup-tick-bg);
    color: var(--sup-tick);
}

.sup-entry__tick .icon,
.sup-tick .icon {
    width: 0.75rem;
    height: 0.75rem;
}

.sup-entry__text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.sup-entry__status {
    color: var(--sup-muted);
}

.sup-report__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    margin: 0;
    padding-top: 0.75rem;
    color: var(--sup-muted);
}

.sup-report__foot .icon {
    display: inline-block;
    width: 0.875rem;
    height: 0.875rem;
    vertical-align: -0.125em;
}

/* ------------------------------------------------------------------ */
/* What it takes care of: the heading and six things that open          */
/* ------------------------------------------------------------------ */

.sup-what__head {
    display: grid;
    gap: 1rem var(--gap-max);
    align-items: end;
}

.sup-what__words {
    min-width: 0;
}

.sup-what__head .sup-btn {
    justify-self: start;
}

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

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

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

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

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

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

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

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

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

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

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

.sup-acc__detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem var(--gap-max);
    max-width: 62rem;
    padding: 0 0.125rem 1.25rem 3rem;
}

/* a long word breaks rather than push the page sideways, at 200% text on a small screen */
.sup-acc__text,
.sup-acc__output {
    min-width: 0;
    overflow-wrap: anywhere;
}

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

/* what a client has at the end of it, under a line in the blue */
.sup-acc__output {
    display: grid;
    align-content: start;
    gap: 0.25rem;
    margin: 0;
    padding-left: 1rem;
    border-left: 2px solid var(--sup-blue-soft-edge);
    color: var(--sup-muted);
}

.sup-acc__output .sup-tag {
    color: var(--sup-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) {
    .sup-acc__item {
        interpolate-size: allow-keywords;
    }

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

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

/* ------------------------------------------------------------------ */
/* The company's picture beside a choice of three starting points        */
/* ------------------------------------------------------------------ */

.sup-engage {
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    background: var(--sup-engage-bg);
}

.sup-engage__head {
    max-width: 52rem;
}

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

.sup-photo,
.sup-engage__side {
    min-width: 0;
    margin: 0;
}

.sup-photo {
    overflow: hidden;
    border-radius: 1rem;
    background: var(--sup-blue-soft);
    box-shadow: var(--sup-photo-shadow);
    aspect-ratio: 775 / 605;
}

.sup-photo picture,
.sup-photo img {
    display: block;
    width: 100%;
    height: 100%;
}

.sup-photo img {
    object-fit: cover;
    object-position: center;
    filter: var(--sup-photo-filter);
}

.sup-engage__label {
    color: var(--sup-report-kicker);
}

/* the choice: three rows between rules, the one chosen in the blue with an arrow */
.sup-modes {
    display: flex;
    flex-direction: column;
    margin-top: 0.75rem;
    border-top: 1px solid var(--sup-line-strong);
}

.sup-mode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.5rem;
    padding: 0.5rem 0.125rem;
    border-bottom: 1px solid var(--sup-line-strong);
    color: var(--sup-muted);
    overflow-wrap: anywhere;
    text-decoration: none;
    transition: color 200ms var(--ease-standard);
}

.sup-mode:hover,
.sup-mode[aria-selected="true"] {
    color: var(--sup-eyebrow);
}

.sup-mode .icon {
    flex: none;
    opacity: 0;
    transition: opacity 200ms var(--ease-standard);
}

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

.sup-panel {
    padding-top: 1.25rem;
}

.sup-panel__label {
    color: var(--sup-eyebrow);
}

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

.sup-panel__text {
    max-width: 32rem;
    margin: 0.5rem 0 0;
    color: var(--sup-muted);
    text-wrap: pretty;
}

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

.sup-panel__list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
}

.sup-tick {
    display: grid;
    flex: none;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    border-radius: 50%;
    background: var(--sup-tick-bg);
    color: var(--sup-tick);
}

/* ------------------------------------------------------------------ */
/* The technologies it supports                                        */
/* ------------------------------------------------------------------ */

.sup-stack {
    padding-block: 1.25rem;
    border-block: 1px solid var(--sup-line);
    background: var(--sup-band-soft);
}

/* the label and the list share a row where the list's one line fits beside the label, and the list has a row of its own, as wide
   as the column, where it does not (the marks make each name wider than it was) */
.sup-stack__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem var(--gap-max);
}

.sup-stack__label {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--sup-muted);
}

.sup-stack__list {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--sup-ink);
}

/* each technology is its marks and its name (2026-10-28: asked for, "add svg icons or sylbols of these"): the marks are the
   brands' own, in their own colours, one for each product its name stands for ("Java / Spring" has two) */
.sup-stack__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.sup-marks {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.25rem;
}

.sup-mark {
    display: inline-flex;
    color: var(--sup-mark, var(--sup-ink));
}

.sup-mark .icon {
    width: 1.5rem;
    height: 1.5rem;
}

.sup-mark--java { --sup-mark: var(--sup-brand-java); }
.sup-mark--spring { --sup-mark: var(--sup-brand-spring); }
.sup-mark--react { --sup-mark: var(--sup-brand-react); }
.sup-mark--android { --sup-mark: var(--sup-brand-android); }
.sup-mark--oracle { --sup-mark: var(--sup-brand-oracle); }
.sup-mark--postgres { --sup-mark: var(--sup-brand-postgres); }
.sup-mark--aws { --sup-mark: var(--sup-brand-aws); }
.sup-mark--azure { --sup-mark: var(--sup-brand-azure); }
.sup-mark--ink { --sup-mark: var(--sup-brand-ink); }
.sup-mark--blue { --sup-mark: var(--sup-eyebrow); }

/* the marks the landing design's icons draw in parts, which they colour by class */
.sup .lp-b--azure { fill: var(--sup-brand-azure); }
.sup .lp-b--azure-2 { fill: var(--sup-brand-azure-2); }
.sup .lp-s--aws { stroke: var(--sup-brand-aws); }
.sup .lp-s--aws-smile { stroke: var(--sup-brand-aws-smile); }

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

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

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

.sup-faq__head .sup-btn {
    margin-top: 1rem;
}

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

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

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

.sup-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 */
.sup-faq__question > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

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

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

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

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

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

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

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

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

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

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

.sup-closing {
    position: relative;
    isolation: isolate;
    padding: 1.75rem 1.25rem;
    overflow: hidden;
    border-radius: clamp(1rem, 1.5vw, 1.5rem);
    background: var(--sup-closing);
    color: #ffffff;
}

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

.sup-closing::before {
    top: -14rem;
    right: -15rem;
    width: 38rem;
    height: 38rem;
    border-color: var(--sup-closing-ring-2);
}

.sup-closing::after {
    top: -8rem;
    right: -6rem;
    width: 27rem;
    height: 27rem;
}

.sup-closing__eyebrow {
    color: var(--sup-closing-eyebrow);
}

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

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

.sup-closing__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

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

/* a page without a script has every starting point 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) .sup-panel ~ .sup-panel {
        display: none;
    }
}

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

@media (min-width: 40rem) {
    .sup-btn {
        overflow-wrap: normal;
    }

    .sup-note {
        justify-content: flex-end;
    }

    .sup-report {
        padding: 1.5rem;
    }
}

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

@media (min-width: 48rem) {
    .sup-strip__inner {
        justify-content: space-between;
        gap: 0.5rem var(--gap-max);
    }

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

    .sup-acc__detail {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.85fr);
    }

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

    .sup-closing {
        padding: 2.25rem clamp(1.5rem, 4.8vw, 4.7rem);
    }

    .sup-photo {
        border-radius: 1.375rem;
        aspect-ratio: 1075 / 630;
    }
}

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

@media (min-width: 64rem) {
    /* the heading stays in view beside the steps */
    .sup-approach__words {
        position: sticky;
        top: calc(var(--top-bar-h) + 1.5rem);
    }

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

    .sup-proof__inner {
        grid-template-columns: minmax(0, 0.87fr) minmax(0, 1.13fr);
    }

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

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

@media (min-width: 72rem) {
    .sup-hero__grid {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    }

    .sup-closing {
        background: var(--sup-closing-wide);
    }

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

/* the picture on a phone is the one made for it, cut upright; its box follows the picture's own shape */
@media (max-width: 37.5rem) {
    .sup-photo {
        border-radius: 1rem;
        aspect-ratio: 775 / 605;
    }
}

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

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

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

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

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

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

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

    .sup-points {
        animation-delay: 220ms;
    }

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

    .sup-panel:not([hidden]) {
        animation: sup-swap var(--spring) var(--ease-spring) both;
    }
}

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

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

@media print {
    .sup-hero,
    .sup-proof,
    .sup-engage,
    .sup-stack {
        background: none;
    }

    .sup-closing,
    .sup-console {
        background: none;
        color: inherit;
    }

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