/* The dedicated teams page (services/pages/dedicated-teams.html), after its own design (2026-10-28: "/dedicated-teams page designs").
   Until then the page was drawn to the landing design (css/pages/landing.css), which has no rule for it now. Its hero is the
   company's photograph of three engineers at a workstation, in a frame with one large corner; the company's panorama, which the
   page had, is left, unused.

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

:root {
    --ded-surface: #ffffff;
    /* the text: headings and body text in typography.md's primary colour, small text in its secondary */
    --ded-ink: var(--text-primary);
    --ded-muted: var(--text-secondary);
    --ded-eyebrow: #0a4ce9;
    --ded-crumb-chevron: #8790a8;
    --ded-blue: #0154e5;
    --ded-blue-hover: #0043bd;
    --ded-on-blue: #ffffff;
    --ded-blue-soft: #e8f1ff;
    --ded-blue-soft-edge: #cbdcff;
    --ded-outline: #9bbcff;
    --ded-outline-ink: #0f47a8;
    --ded-outline-bg: #ffffff;
    --ded-outline-hover: #eef6ff;
    --ded-line: #e2eaf4;
    --ded-line-strong: #d3deec;
    --ded-green-dot: #17b982;
    --ded-wash: #f3f7fd;
    --ded-arrow: #6f86a3;
    /* the hero: a pale sky from the top left to a light blue, a glow over it and a ring behind the photograph */
    --ded-hero-bg: linear-gradient(116deg, #f7faff 0%, #edf5ff 50%, #d9eaff 100%);
    --ded-hero-glow: rgb(255 255 255 / 0.7);
    --ded-orbit: #aacfff;
    --ded-photo-bg: #cce9f9;
    --ded-photo-shadow: 0 35px 76px rgb(12 63 122 / 0.16);
    /* the sample team: a pale card, its tag green, its steppers outlined in blue */
    --ded-studio: #f7faff;
    --ded-studio-edge: #d9e6f7;
    --ded-studio-shadow: 0 18px 50px rgb(15 56 108 / 0.06);
    --ded-studio-rule: #dce6f2;
    --ded-tag-bg: #e4f8f0;
    --ded-tag-edge: #bcebd9;
    --ded-tag-ink: #0a6b51;
    --ded-step-edge: #b9cae2;
    --ded-step-ink: #124ca4;
    --ded-step-hover: #e5effe;
    /* the deep blue band, and what is on it */
    --ded-night: #071a41;
    --ded-night-glow: rgb(10 93 244 / 0.36);
    --ded-night-eyebrow: #9fc8ff;
    --ded-night-text: #b9cbe4;
    --ded-night-tick: #36deb1;
    --ded-code-bg: #0d2856;
    --ded-code-edge: #49628f;
    --ded-code-rule: #355384;
    --ded-code-ink: #d5e9ff;
    --ded-code-muted: #adc0de;
    --ded-code-prompt: #bba9ff;
    --ded-code-ok: #64ebd0;
    --ded-code-pr: #6dacff;
    --ded-code-tag: #4ee6b8;
    --ded-code-shadow: 0 23px 58px rgb(0 17 52 / 0.44);
    --ded-dot: #6687b9;
    --ded-chip-bg: #ffffff;
    --ded-chip-ink: #11335d;
    --ded-chip-tick: #0a7d58;
    --ded-chip-shadow: 0 19px 42px rgb(0 0 0 / 0.2);
    /* the stage that is shown: a pale blue panel with rings */
    --ded-panel: #eaf3ff;
    --ded-panel-ring: #a6c9fc;
    --ded-panel-rule: #b6d0f0;
    --ded-panel-ink: #0c429b;
    --ded-week-line: #cfe0f8;
    --ded-week-dot-ring: #bad2fa;
    --ded-light-ink: #0b48c8;
    --ded-light-hover: #dbe8ff;
    --ded-closing: #0757e8;
    --ded-closing-ring: rgb(255 255 255 / 0.28);
    --ded-closing-text: #e5edff;
    --ded-closing-eyebrow: #e3efff;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --ded-surface: #131314;
        --ded-eyebrow: #a8c7fa;
        --ded-crumb-chevron: #7f889c;
        --ded-blue: #a8c7fa;
        --ded-blue-hover: #c2d7fb;
        --ded-on-blue: #062e6f;
        --ded-blue-soft: rgb(168 199 250 / 0.14);
        --ded-blue-soft-edge: rgb(168 199 250 / 0.3);
        --ded-outline: rgb(255 255 255 / 0.22);
        --ded-outline-ink: #a8c7fa;
        --ded-outline-bg: rgb(255 255 255 / 0.04);
        --ded-outline-hover: rgb(168 199 250 / 0.12);
        --ded-line: rgb(255 255 255 / 0.08);
        --ded-line-strong: rgb(255 255 255 / 0.14);
        --ded-green-dot: #4cd9a0;
        --ded-wash: #1a1b1e;
        --ded-arrow: #8a9bb5;
        --ded-hero-bg: linear-gradient(116deg, #131722 0%, #131720 50%, #121a2b 100%);
        --ded-hero-glow: rgb(168 199 250 / 0.07);
        --ded-orbit: rgb(168 199 250 / 0.26);
        --ded-photo-bg: #1d2a38;
        --ded-photo-shadow: 0 35px 76px rgb(0 0 0 / 0.5);
        --ded-studio: #1c1f25;
        --ded-studio-edge: rgb(255 255 255 / 0.12);
        --ded-studio-shadow: 0 18px 50px rgb(0 0 0 / 0.4);
        --ded-studio-rule: rgb(255 255 255 / 0.1);
        --ded-tag-bg: rgb(109 213 168 / 0.14);
        --ded-tag-edge: rgb(109 213 168 / 0.32);
        --ded-tag-ink: #7fe0b8;
        --ded-step-edge: rgb(255 255 255 / 0.24);
        --ded-step-ink: #a8c7fa;
        --ded-step-hover: rgb(168 199 250 / 0.14);
        --ded-panel: #1a2538;
        --ded-panel-ring: rgb(168 199 250 / 0.28);
        --ded-panel-rule: rgb(168 199 250 / 0.24);
        --ded-panel-ink: #a8c7fa;
        --ded-week-line: rgb(168 199 250 / 0.28);
        --ded-week-dot-ring: rgb(168 199 250 / 0.4);
    }
}

:root[data-theme="dark"] {
    --ded-surface: #131314;
    --ded-eyebrow: #a8c7fa;
    --ded-crumb-chevron: #7f889c;
    --ded-blue: #a8c7fa;
    --ded-blue-hover: #c2d7fb;
    --ded-on-blue: #062e6f;
    --ded-blue-soft: rgb(168 199 250 / 0.14);
    --ded-blue-soft-edge: rgb(168 199 250 / 0.3);
    --ded-outline: rgb(255 255 255 / 0.22);
    --ded-outline-ink: #a8c7fa;
    --ded-outline-bg: rgb(255 255 255 / 0.04);
    --ded-outline-hover: rgb(168 199 250 / 0.12);
    --ded-line: rgb(255 255 255 / 0.08);
    --ded-line-strong: rgb(255 255 255 / 0.14);
    --ded-green-dot: #4cd9a0;
    --ded-wash: #1a1b1e;
    --ded-arrow: #8a9bb5;
    --ded-hero-bg: linear-gradient(116deg, #131722 0%, #131720 50%, #121a2b 100%);
    --ded-hero-glow: rgb(168 199 250 / 0.07);
    --ded-orbit: rgb(168 199 250 / 0.26);
    --ded-photo-bg: #1d2a38;
    --ded-photo-shadow: 0 35px 76px rgb(0 0 0 / 0.5);
    --ded-studio: #1c1f25;
    --ded-studio-edge: rgb(255 255 255 / 0.12);
    --ded-studio-shadow: 0 18px 50px rgb(0 0 0 / 0.4);
    --ded-studio-rule: rgb(255 255 255 / 0.1);
    --ded-tag-bg: rgb(109 213 168 / 0.14);
    --ded-tag-edge: rgb(109 213 168 / 0.32);
    --ded-tag-ink: #7fe0b8;
    --ded-step-edge: rgb(255 255 255 / 0.24);
    --ded-step-ink: #a8c7fa;
    --ded-step-hover: rgb(168 199 250 / 0.14);
    --ded-panel: #1a2538;
    --ded-panel-ring: rgb(168 199 250 / 0.28);
    --ded-panel-rule: rgb(168 199 250 / 0.24);
    --ded-panel-ink: #a8c7fa;
    --ded-week-line: rgb(168 199 250 / 0.28);
    --ded-week-dot-ring: rgb(168 199 250 / 0.4);
}

/* ------------------------------------------------------------------ */
/* Type roles (typography.md, 3)                                        */
/* ------------------------------------------------------------------ */

/* The page's texts take typography.md's roles (section 3) here, and only here: the rules below set none of their family, size,
   weight, line height, letter spacing or case. A heading's tag gives it its role (site.css's base) unless it is listed here,
   taking another level's style; the rest are listed by their roles; and the lines of the window are its code. */

/* H4 (card title): sans 500 */
.ded-mode__name,
.ded-step__name,
.ded-studio__title,
.ded-beat__title,
.ded-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;
}

/* Stat: mono 700 (the number of engineers in the sample team) */
.ded-total__n {
    font-family: var(--font-mono);
    font-size: var(--fs-stat);
    font-weight: var(--fw-bold);
    line-height: var(--lh-stat);
    font-variant-numeric: tabular-nums;
}

/* Body: sans 400 */
.ded-lead,
.ded-hero__lead,
.ded-studio__desc,
.ded-band__text,
.ded-tick,
.ded-stage__body,
.ded-beat__text,
.ded-faq__answer,
.ded-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 */
.ded-points,
.ded-hint,
.ded-mode__lead,
.ded-role__desc,
.ded-total,
.ded-stepper__count,
.ded-studio__note,
.ded-stage__output,
.ded-stack__text,
.ded-code__bar,
.ded-code__foot {
    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 promises, the roles' names, the rows of what it uses, the note over the window) */
.ded-promise,
.ded-role__name,
.ded-stack__label,
.ded-chip {
    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 */
.ded-btn,
.ded-crumbs__list,
.ded-more__link {
    font-family: var(--font-sans);
    font-size: var(--fs-button);
    font-weight: var(--fw-medium);
    line-height: var(--lh-button);
    letter-spacing: 0;
}

/* Eyebrow labels and tags: mono 500, uppercase */
.ded-eyebrow,
.ded-tag {
    font-family: var(--font-mono);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-medium);
    line-height: var(--lh-eyebrow);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
}

/* Code: mono 400 */
.ded-code__line {
    font-family: var(--font-mono);
    font-size: var(--fs-code);
    font-weight: var(--fw-regular);
    line-height: var(--lh-code);
    letter-spacing: 0;
}

/* ------------------------------------------------------------------ */
/* The page                                                            */
/* ------------------------------------------------------------------ */

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

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

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

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

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

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

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

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

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

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

/* paragraphs that are rows of their own words are as wide as their rows, not as the base's 70ch */
.ded-points,
.ded-hint,
.ded-role__desc,
.ded-total,
.ded-studio__note,
.ded-stage__output,
.ded-code__foot,
.ded-more__label {
    max-width: none;
}

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

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

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

.ded-btn--small {
    min-height: 2.75rem;
    padding: 0.5rem 1rem;
}

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

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

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

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

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

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

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

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

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

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

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

/* a pale glow over the sky, as the design draws it */
.ded-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 19%;
    top: -55%;
    width: 54rem;
    height: 40rem;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--ded-hero-glow), transparent);
    pointer-events: none;
}

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

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

.ded-hero__words,
.ded-visual {
    min-width: 0;
}

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

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

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

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

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

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

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

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

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

/* what it stands for: three short points under a rule, each after a green dot */
.ded-points {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    margin: 1.25rem 0 0;
    padding: 1rem 0 0;
    list-style: none;
    border-top: 1px solid var(--ded-line-strong);
    color: var(--ded-muted);
}

.ded-points__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

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

/* the photograph: in the shape of the picture each width is given, a large corner at its foot, a ring behind it */
.ded-visual {
    position: relative;
    isolation: isolate;
}

.ded-photo {
    margin: 0;
    aspect-ratio: 1677 / 1032;
    overflow: hidden;
    border-radius: 1.75rem 1.75rem 1.75rem 5.9rem;
    background: var(--ded-photo-bg);
    box-shadow: var(--ded-photo-shadow);
}

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

.ded-photo img {
    object-fit: cover;
}

/* the picture a phone is given has its own shape, as the source in the markup has (up to 37.5rem) */
@media (max-width: 37.5rem) {
    .ded-photo {
        aspect-ratio: 1203 / 1000;
        border-radius: 1.375rem 1.375rem 1.375rem 3.5rem;
    }
}

/* ------------------------------------------------------------------ */
/* What it promises: a strip                                            */
/* ------------------------------------------------------------------ */

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

.ded-promises__list {
    display: grid;
    margin: 0 auto;
    padding-block: 0.25rem;
    list-style: none;
}

.ded-promise {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 3.5rem;
    padding-block: 0.5rem;
    color: var(--ded-ink);
}

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

.ded-promise .icon {
    flex: none;
    width: 1.375rem;
    height: 1.375rem;
    color: var(--ded-eyebrow);
}

.ded-promise > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

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

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

.ded-split__head,
.ded-studio {
    min-width: 0;
}

.ded-hint {
    margin: 1rem 0 0;
    color: var(--ded-muted);
}

/* ------------------------------------------------------------------ */
/* Shape your team: the way of working, and a sample team of five roles */
/* ------------------------------------------------------------------ */

/* the choice: two rows, one pressed, the other way of working's words in the page for a script to show */
.ded-modes {
    margin-top: 1rem;
    border-top: 1px solid var(--ded-line-strong);
}

.ded-mode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 4rem;
    padding: 0.75rem 0.25rem;
    border: 0;
    border-bottom: 1px solid var(--ded-line-strong);
    background: transparent;
    color: var(--ded-muted);
    text-align: left;
    cursor: pointer;
    transition: color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

/* before the script it is two words, not two buttons that do nothing: their colour is their own, not a disabled button's */
.ded-mode:disabled {
    color: var(--ded-muted);
    cursor: default;
}

.ded-mode[aria-pressed="true"],
.ded-mode[aria-pressed="true"]:disabled {
    color: var(--ded-eyebrow);
}

.ded-mode__words {
    display: grid;
    min-width: 0;
}

.ded-mode__name,
.ded-mode__lead {
    overflow-wrap: anywhere;
}

.ded-mode .icon {
    flex: none;
    color: var(--ded-arrow);
    transition: translate var(--spring) var(--ease-spring), color 200ms var(--ease-standard);
}

.ded-mode[aria-pressed="true"] .icon {
    color: var(--ded-eyebrow);
}

.ded-mode:enabled:hover {
    color: var(--ded-eyebrow);
}

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

/* the card: a pale window of the sample team */
.ded-studio {
    padding: 1.25rem 1rem;
    border: 1px solid var(--ded-studio-edge);
    border-radius: 1.5rem;
    background: var(--ded-studio);
    box-shadow: var(--ded-studio-shadow);
}

.ded-studio__top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--ded-studio-rule);
}

.ded-studio__words {
    flex: 1 1 14rem;
    min-width: 0;
}

.ded-studio__title {
    margin: 0.25rem 0 0;
    color: var(--ded-ink);
}

.ded-studio__desc {
    margin: 0.25rem 0 0;
    max-width: 30rem;
    color: var(--ded-muted);
    text-wrap: pretty;
}

/* shown where a script will make the card work */
.ded-studio__tag {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--ded-tag-edge);
    border-radius: 1rem;
    background: var(--ded-tag-bg);
    color: var(--ded-tag-ink);
}

.ded-roles {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ded-role {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--ded-studio-rule);
}

.ded-role__words {
    flex: 1 1 11rem;
    min-width: 0;
}

.ded-role__name,
.ded-role__desc {
    margin: 0;
    overflow-wrap: anywhere;
}

.ded-role__name {
    color: var(--ded-ink);
}

.ded-role__desc {
    color: var(--ded-muted);
}

/* the stepper: a number between two buttons as tall as a fingertip */
.ded-stepper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.ded-stepper__count {
    min-width: 2rem;
    text-align: center;
    color: var(--ded-ink);
    font-variant-numeric: tabular-nums;
}

.ded-stepper__btn {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 1px solid var(--ded-step-edge);
    border-radius: 0.75rem;
    background: var(--ded-studio);
    color: var(--ded-step-ink);
    cursor: pointer;
    transition: background-color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.ded-stepper__btn:hover {
    background: var(--ded-step-hover);
}

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

/* a button that cannot go further stays where it is for the keyboard, and says so (aria-disabled, not disabled) */
.ded-stepper__btn[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
}

.ded-stepper__btn[aria-disabled="true"]:hover {
    background: var(--ded-studio);
}

.ded-studio__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem var(--gap-max);
    padding-top: 1rem;
}

.ded-total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.625rem;
    margin: 0;
    color: var(--ded-muted);
}

.ded-total__n {
    color: var(--ded-ink);
}

.ded-studio__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ded-studio__note {
    margin: 0.75rem 0 0;
    color: var(--ded-muted);
    overflow-wrap: anywhere;
}

/* What changes with the way of working is in the markup once for each (a .ded-v, with its data-v); the one that the section's
   data-model names is shown, and the first until a visitor chooses the other. */
.ded-v {
    display: none;
}

.ded-split[data-model="dedicated"] .ded-v[data-v="dedicated"],
.ded-split[data-model="embedded"] .ded-v[data-v="embedded"] {
    display: inline;
}

/* ------------------------------------------------------------------ */
/* How we collaborate: a deep blue band, and a window of a shared workflow */
/* ------------------------------------------------------------------ */

.ded-band {
    position: relative;
    isolation: isolate;
    margin-top: var(--gap-max);
    padding-block: 1.75rem;
    overflow: clip;
    background: var(--ded-night);
    color: #ffffff;
}

/* a light at its top right, as the design draws it */
.ded-band::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -12rem;
    top: -18rem;
    width: 44rem;
    height: 44rem;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--ded-night-glow), transparent);
    pointer-events: none;
}

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

.ded-band__words,
.ded-diagram {
    min-width: 0;
}

.ded-band__text {
    margin: 0.75rem 0 0;
    max-width: 32rem;
    color: var(--ded-night-text);
    text-wrap: pretty;
}

.ded-ticks {
    display: grid;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.ded-tick {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: #eaf2ff;
}

.ded-tick .icon {
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: calc((1lh - 1.125rem) / 2);
    color: var(--ded-night-tick);
}

.ded-tick > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ded-diagram {
    position: relative;
}

/* the window: a repository's name and its branch, lines as a terminal prints them, a foot */
.ded-code {
    border: 1px solid var(--ded-code-edge);
    border-radius: 1rem;
    background: var(--ded-code-bg);
    box-shadow: var(--ded-code-shadow);
    overflow: hidden;
}

.ded-code__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    padding: 0.625rem 1rem;
    border-bottom: 1px solid var(--ded-code-rule);
    color: var(--ded-code-muted);
}

.ded-code__where {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ded-dots {
    display: inline-flex;
    flex: none;
    gap: 0.375rem;
}

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

.ded-code__lines {
    padding: 1rem 1rem 0.75rem;
}

.ded-code__line {
    margin: 0;
    max-width: none;
    color: var(--ded-code-ink);
    overflow-wrap: anywhere;
}

.ded-t--prompt {
    color: var(--ded-code-prompt);
}

.ded-t--ok {
    color: var(--ded-code-ok);
}

.ded-t--pr {
    color: var(--ded-code-pr);
}

.ded-code__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem 0.75rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--ded-code-rule);
    color: var(--ded-code-muted);
}

.ded-code__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--ded-code-tag);
}

.ded-code__tag .icon {
    width: 1rem;
    height: 1rem;
}

/* a note over the window's foot corner, as the design has it, over its bottom padding and no text */
.ded-chip {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
    max-width: calc(100% - 1rem);
    margin: -0.625rem 0.5rem 0 auto;
    padding: 0.625rem 0.875rem;
    border-radius: 0.75rem;
    background: var(--ded-chip-bg);
    color: var(--ded-chip-ink);
    box-shadow: var(--ded-chip-shadow);
}

.ded-chip .icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    color: var(--ded-chip-tick);
}

.ded-chip > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------ */
/* A simple way to start: four stages, one chosen at a time               */
/* ------------------------------------------------------------------ */

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

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

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

.ded-process {
    display: grid;
    gap: var(--gap-max);
    align-items: start;
    margin-top: var(--gap-max);
}

/* the choice: four rows, each a number and a name, the chosen one in the blue */
.ded-process__nav {
    min-width: 0;
    border-top: 1px solid var(--ded-line-strong);
}

.ded-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 3.75rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--ded-line-strong);
    color: var(--ded-muted);
    text-decoration: none;
    transition: color 200ms var(--ease-standard), scale var(--spring-quick) var(--ease-spring);
}

.ded-step__words {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    min-width: 0;
}

.ded-step__no {
    flex: none;
    color: var(--ded-muted);
}

.ded-step__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ded-step .icon {
    flex: none;
    color: var(--ded-arrow);
    transition: translate var(--spring) var(--ease-spring), color 200ms var(--ease-standard);
}

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

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

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

/* the stages are one under another (all of them without a script, the chosen one with it): the room between them is a grid's gap,
   which a stage that is `hidden` leaves out, and not a margin that the chosen one would keep */
.ded-process__panels {
    display: grid;
    gap: var(--gap-max);
    min-width: 0;
}

/* the stage: a pale panel, a ring in its corner, what the client leaves with under a rule */
.ded-stage {
    position: relative;
    isolation: isolate;
    min-width: 0;
    padding: 1.25rem 1rem;
    overflow: hidden;
    border-radius: 1.5rem;
    background: var(--ded-panel);
}

.ded-stage::after {
    content: "";
    display: none;
    position: absolute;
    z-index: -1;
    right: -6rem;
    bottom: -10rem;
    width: 24rem;
    height: 24rem;
    border: 1px solid var(--ded-panel-ring);
    border-radius: 50%;
    pointer-events: none;
}

.ded-stage__num {
    color: var(--ded-eyebrow);
}

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

.ded-stage__body {
    margin: 0.75rem 0 0;
    max-width: 32rem;
    color: var(--ded-muted);
    text-wrap: pretty;
}

.ded-stage__output {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin: var(--gap-max) 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ded-panel-rule);
    color: var(--ded-muted);
}

.ded-stage__output > * {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ded-stage__output strong {
    color: var(--ded-panel-ink);
}

/* ------------------------------------------------------------------ */
/* Day-to-day delivery: what it uses, and how a week goes                 */
/* ------------------------------------------------------------------ */

.ded-stack {
    margin: 1rem 0 0;
    padding: 0.25rem 1rem;
    border-radius: 1.25rem;
    background: var(--ded-wash);
}

.ded-stack__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.125rem 0.75rem;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--ded-line);
}

.ded-stack__row:last-child {
    border-bottom: 0;
}

.ded-stack__label {
    margin: 0;
    color: var(--ded-ink);
}

.ded-stack__text {
    flex: 1 1 12rem;
    min-width: 0;
    margin: 0;
    color: var(--ded-muted);
    overflow-wrap: anywhere;
}

/* the week: a line down the left, a dot on it for each part */
.ded-week {
    display: grid;
    gap: var(--gap-max);
    min-width: 0;
    margin: 0;
    padding: 0 0 0 1.5rem;
    list-style: none;
    border-left: 2px solid var(--ded-week-line);
}

.ded-beat {
    position: relative;
}

.ded-beat::before {
    content: "";
    position: absolute;
    left: calc(-1.5rem - 1px);
    top: calc((var(--fs-h4) * var(--lh-h4) - 1.0625rem) / 2);
    translate: -50% 0;
    width: 0.6875rem;
    height: 0.6875rem;
    border: 3px solid var(--ded-surface);
    border-radius: 50%;
    background: var(--ded-blue);
    box-shadow: 0 0 0 2px var(--ded-week-dot-ring);
    box-sizing: content-box;
}

.ded-beat__title {
    margin: 0;
    color: var(--ded-ink);
}

.ded-beat__text {
    margin: 0.25rem 0 0;
    max-width: 32rem;
    color: var(--ded-muted);
    overflow-wrap: anywhere;
}

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

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

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

/* The rules lie between two questions and nowhere else (2026-10-29: asked for, "remove the top and bottom ____________ lines"): none
   over the first question, none under the last. The room each of them held went with it (as the support and maintenance page's
   steps did), so that the list begins and ends where its words do. */
.ded-faq__list {
    min-width: 0;
}

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

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

/* the first question has no room over its words and the last none under them, and each is still 44px high to press */
.ded-faq__item:first-child > .ded-faq__question {
    min-height: 2.75rem;
    padding-top: 0;
}

.ded-faq__item:last-child > .ded-faq__question {
    min-height: 2.75rem;
    padding-bottom: 0;
}

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

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

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

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

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

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

/* the last answer ends the list: the room a question held under its words, between them and the answer, is the answer's own */
.ded-faq__item:last-child .ded-faq__answer {
    padding-block: 1rem 0;
}

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

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

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

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

/* ------------------------------------------------------------------ */
/* Where it leads on to: a strip of links                                */
/* ------------------------------------------------------------------ */

.ded-more {
    margin-top: var(--gap-max);
    border-top: 1px solid var(--ded-line);
}

.ded-more__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1.25rem;
    padding-block: 0.5rem;
}

.ded-more__label {
    color: var(--ded-muted);
}

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

.ded-more__link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 2.75rem;
    color: var(--ded-eyebrow);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.ded-more__link:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.ded-more__link .icon {
    flex: none;
    width: 1rem;
    height: 1rem;
    transition: translate var(--spring) var(--ease-spring);
}

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

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

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

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

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

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

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

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

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

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

/* a page without a script has every stage one after another; where a script will make the choice, only the first, until it has
   (the markup has no `hidden` on them, which a page without a script could not undo) */
@media (scripting: enabled) {
    [data-tabs]:not(.is-ready) .ded-stage ~ .ded-stage {
        display: none;
    }
}

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

@media (min-width: 40rem) {
    .ded-studio {
        padding: 1.5rem 1.5rem;
    }

    .ded-stage {
        padding: 1.5rem;
    }

    .ded-stage::after {
        display: block;
    }

    .ded-visual::before {
        content: "";
        position: absolute;
        z-index: -1;
        right: -9%;
        bottom: -14%;
        width: 21.25rem;
        height: 21.25rem;
        border: 1px solid var(--ded-orbit);
        border-radius: 50%;
        pointer-events: none;
    }
}

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

@media (min-width: 48rem) {
    .ded-promises__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        padding-block: 0;
    }

    .ded-promise {
        min-height: 4.5rem;
        padding-block: 0.75rem;
    }

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

    .ded-intro {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.6fr);
    }
}

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

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

    .ded-hero__grid {
        grid-template-columns: minmax(0, 0.93fr) minmax(0, 1.07fr);
    }

    .ded-photo {
        border-radius: 2.25rem 2.25rem 2.25rem 7.2rem;
    }

    .ded-split {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    }

    .ded-split--rhythm {
        grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
        align-items: center;
    }

    /* the heading of the sample team stays in view while the team is changed */
    .ded-split--builder > .ded-split__head {
        position: sticky;
        top: calc(var(--top-bar-h) + var(--gap-max));
    }

    .ded-band__inner {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    }

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

    .ded-faq__inner {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    }

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

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

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

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

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

    .ded-studio,
    .ded-stepper__btn,
    .ded-btn--outlined,
    .ded-code {
        border-color: var(--md-outline);
    }
}

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

/* As the page opens the hero's words settle (the title and the lead only rise, so that they are painted at once), the rest comes
   in after them, and the photograph last. */
@media (prefers-reduced-motion: no-preference) {
    .ded-hero__title,
    .ded-hero__lead {
        animation: hero-settle var(--spring-slow) var(--ease-spring) both;
    }

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

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

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

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

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

    .ded-stage:not([hidden]) .ded-stage__num,
    .ded-stage:not([hidden]) .ded-stage__title,
    .ded-stage:not([hidden]) .ded-stage__body,
    .ded-stage:not([hidden]) .ded-stage__output {
        animation: ded-swap var(--spring) var(--ease-spring) both;
    }
}

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

@media print {
    .ded-hero,
    .ded-promises {
        background: none;
    }

    .ded-band,
    .ded-closing {
        background: none;
        color: inherit;
    }

    .ded-hero::before,
    .ded-visual::before,
    .ded-band::before,
    .ded-stage::after,
    .ded-closing::before {
        display: none;
    }
}

/* what a script makes work is `hidden` until it has, whatever display the rules above gave it: the steppers, the tag and the
   button of the sample team */
.ded [hidden] {
    display: none;
}