/* Marvey subpages.

   Loaded after the bundled sheet on the twelve subpages. The tokens, buttons,
   nav and footer come from the bundled sheets, the same as the homepage's.
   This sheet holds the components the page bodies in pages.json are built
   from: a split header, code in windows, ledgers, numbered steps, callouts,
   and the pieces one page owns (the fit panels, the roadmap columns, the
   changelog timeline, the compose window, the roles table). White, ink, one yellow, hairlines, and no grey text anywhere. */

/* ---------- page ---------- */
.page {
    padding-top: clamp(140px, 15vw, 184px);
}
/* Room before the footer, the same as the room the closing card takes above
   itself, so the yellow does not sit on the black. The 404 sets its own. */
.page > .wrap {
    padding-bottom: clamp(72px, 9vw, 120px);
}
.page-body,
.doc {
    margin-top: clamp(60px, 7vw, 96px);
}
.page-body > * + * {
    margin-top: clamp(56px, 7vw, 88px);
}
.page-body > .sh + *,
.page-body > .strip + * {
    margin-top: 28px;
}
/* the head's rule is the list's top edge; a second one 28px under it doubled it */
.page-body > .sh + :is(.steps, .ledger, .keys, .roles, .principles, .ep) {
    border-top: 0;
}
/* a window on its own shows the passage above it, so it sits closer to that
   than the next section does */
.page-body > * + .win,
.page-body > .win + .prose {
    margin-top: 32px;
}
@media (max-width: 600px) {
    .page {
        padding-top: 116px;
    }
    .page-body,
    .doc {
        margin-top: 44px;
    }
    .page-body > * + * {
        margin-top: 48px;
    }
}

/* ---------- header: eyebrow, the title left, the lede and the facts right ---------- */
.ph {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 28px 64px;
    align-items: end;
}
.ph__eyebrow {
    grid-column: 1 / -1;
    justify-self: start;
}
.ph__title {
    margin: 0;
    max-width: 12ch;
    font-family: var(--display);
    font-size: clamp(36px, 4.8vw, 66px);
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: -0.03em;
    color: var(--ink);
    text-wrap: balance;
}
.ph__aside {
    padding-bottom: 6px;
}
.ph__lede {
    margin: 0;
    max-width: 44ch;
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.5;
    color: var(--ink);
    text-wrap: pretty;
}
.ph__mail {
    display: inline-block;
    margin-top: 18px;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--brand);
    font-family: var(--f-mono);
    font-size: clamp(20px, 2.4vw, 32px);
    letter-spacing: -0.02em;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.ph__meta {
    margin-top: 18px;
    overflow-wrap: anywhere;
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: 0.06em;
    line-height: 1.6;
    color: var(--ink);
}
@media (max-width: 900px) {
    .ph {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }
    .ph__title {
        max-width: none;
    }
}

/* ---------- the rail, on pages long enough to lose your place ---------- */
.doc {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}
.rail {
    position: sticky;
    top: 120px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.rail__group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rail__label {
    margin: 0 0 8px 10px;
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
}
.rail a {
    padding: 7px 10px;
    border-radius: 9px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--ink);
    transition: background-color var(--t-fast) var(--ease-out);
}
.rail a:hover {
    background: var(--paper-3);
}
.rail a[aria-current='page'] {
    background: var(--paper-3);
    font-weight: 600;
}
.doc__body {
    min-width: 0;
    margin: 0;
}
/* the rail's targets land clear of the bar, level with the rail itself */
.doc__body h2[id] {
    scroll-margin-top: 120px;
}
@media (max-width: 960px) {
    .doc {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }
    .rail {
        position: static;
        flex-flow: row wrap;
        gap: 20px 40px;
    }
    .rail__group {
        flex-flow: row wrap;
        gap: 4px;
    }
    .rail__label {
        width: 100%;
        margin-left: 0;
    }
    .rail a {
        padding: 6px 10px;
        border: 1px solid var(--line-2);
        border-radius: 999px;
        font-size: 13px;
    }
}

/* ---------- section head: title left, its one line right ---------- */
.sh {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 48px;
    align-items: end;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line-2);
}
.sh__title {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(23px, 2.3vw, 30px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.08;
    color: var(--ink);
}
.sh__sub {
    margin: 0;
    max-width: 52ch;
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink);
}
@media (max-width: 760px) {
    .sh {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- lead: copy on the left, the object it talks about on the right ---------- */
.lead {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 32px 56px;
    align-items: start;
}
.lead__copy h2 {
    margin: 0 0 14px;
    font-family: var(--display);
    font-size: clamp(23px, 2.3vw, 30px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.08;
    color: var(--ink);
}
.lead__copy h3 {
    margin: 0 0 12px;
    font-family: var(--display);
    font-size: clamp(20px, 1.8vw, 23px);
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--ink);
}
.lead__copy p + h2 {
    margin-top: 36px;
}
.lead__copy p {
    margin: 0 0 14px;
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--ink);
}
.lead__copy > :last-child {
    margin-bottom: 0;
}
.lead__copy .strip {
    margin-top: 22px;
}
.lead__note {
    margin: 14px 6px 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink);
}
@media (max-width: 900px) {
    .lead {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- code in a window: the tray from the hero, a bar, the code on white ---------- */
.win {
    margin: 0;
    padding: 8px;
    border-radius: 22px;
    background: linear-gradient(180deg, #f6f8fb, #eef1f6);
    border: 1px solid rgba(28, 36, 52, 0.1);
    box-shadow:
        0 30px 70px -44px rgba(16, 24, 40, 0.24),
        0 12px 30px -20px rgba(16, 24, 40, 0.08);
}
.win__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 10px 12px;
}
.win__dots {
    display: flex;
    gap: 6px;
}
.win__dots span {
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #ff5f57;
}
.win__dots span:nth-child(2) {
    background: #febc2e;
}
.win__dots span:nth-child(3) {
    background: #28c840;
}
.win__name {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    color: var(--ink);
}
.code {
    margin: 16px 0;
    padding: 18px 22px;
    border-radius: 14px;
    background: var(--paper-3);
    color: var(--ink);
    font-family: var(--f-mono);
    font-size: 12.5px;
    line-height: 1.7;
    overflow-x: auto;
    white-space: pre;
}
.win__code {
    margin: 0;
    background: var(--paper-2);
    border: 1px solid var(--line);
}
.code .k {
    color: var(--amber-ink);
    font-weight: 500;
}
.code .s {
    color: var(--tag-green-fg);
}
.code .c {
    color: var(--ink);
    font-style: italic;
}
.code .p {
    color: var(--tag-blue-fg);
}
/* a name in running text */
.page-body code {
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--paper-3);
    font-family: var(--f-mono);
    font-size: 0.9em;
    /* kept whole: a flag or a path broken at its hyphen or slash reads as two.
       The longest in any body is 34 characters, which fits a 320px screen */
    white-space: nowrap;
}
.page-body .code code {
    padding: 0;
    background: none;
    font-size: inherit;
}

/* ---------- ledger: a label, the entry, a note on the right ---------- */
.ledger {
    border-top: 1px solid var(--line-2);
}
.ledger__row {
    display: grid;
    grid-template-columns: minmax(120px, 0.3fr) minmax(0, 1fr) minmax(0, 0.34fr);
    gap: 12px 40px;
    padding: 24px 0;
    border-bottom: 1px solid var(--line);
}
.ledger__k {
    padding-top: 5px;
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.ledger__t {
    margin: 0;
    font-family: var(--display);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: -0.012em;
    line-height: 1.2;
    color: var(--ink);
}
.ledger__p {
    margin: 0;
    max-width: 66ch;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ink);
}
.ledger__t + .ledger__p {
    margin-top: 8px;
}
.ledger__f {
    padding-top: 5px;
    font-family: var(--f-mono);
    font-size: 11.5px;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--ink);
    /* set from the left: most notes run to three or four lines, and a ragged
       left edge on mono reads as a mistake */
    text-wrap: pretty;
    overflow-wrap: anywhere;
}
/* rows that open on a sentence rather than a label */
.ledger--lead .ledger__row {
    grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr);
}
.ledger--lead .ledger__k {
    padding-top: 0;
    font-family: var(--display);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.008em;
    line-height: 1.35;
    text-transform: none;
}
@media (max-width: 760px) {
    .ledger__row,
    .ledger--lead .ledger__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }
    .ledger__f {
        padding-top: 0;
    }
}

/* ---------- steps: the quickstart, copy beside its code ---------- */
.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line-2);
}
.step {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 20px 48px;
    align-items: start;
    padding: 36px 0;
    border-bottom: 1px solid var(--line);
}
.step__n {
    display: block;
    margin-bottom: 14px;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    color: var(--ink);
}
.step__t {
    margin: 0 0 10px;
    font-family: var(--display);
    font-size: 21px;
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.15;
    color: var(--ink);
}
.step__copy p {
    margin: 0 0 12px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ink);
}
.step__copy p:last-child {
    margin-bottom: 0;
}
@media (max-width: 900px) {
    .step {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- callout: a passage set apart on the soft ground ---------- */
.callout {
    padding: clamp(28px, 4vw, 44px);
    border-radius: 22px;
    background: var(--paper-3);
}
.callout h2 {
    margin: 0 0 12px;
    font-family: var(--display);
    font-size: clamp(22px, 2vw, 26px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--ink);
}
.callout h3 {
    margin: 24px 0 8px;
    font-family: var(--display);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.008em;
    color: var(--ink);
}
.callout p {
    margin: 0 0 12px;
    max-width: 70ch;
    font-size: 16px;
    line-height: 1.65;
    color: var(--ink);
}
.callout > :last-child {
    margin-bottom: 0;
}

/* ---------- prose ---------- */
.prose {
    max-width: 68ch;
}
.prose h2 {
    margin: 44px 0 12px;
    font-family: var(--display);
    font-size: 23px;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--ink);
}
.prose h2:first-child {
    margin-top: 0;
}
.prose h3 {
    margin: 28px 0 8px;
    font-family: var(--display);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.008em;
    color: var(--ink);
}
.prose p {
    margin: 0 0 14px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink);
}
.page-body strong {
    font-weight: 600;
}
.page-body a:not(.btn) {
    border-bottom: 1px solid var(--brand-deep);
}
.bullets {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bullets li {
    position: relative;
    padding-left: 22px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
}
.bullets li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 11px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--brand-deep);
}
/* inside a sentence a label keeps its case, an address in capitals is not an
   address. A run of them (.tags) sits in a row, separated by hairlines; labels
   the sentence goes on between get none, which `.tag + .tag` alone would give
   them, since it cannot see the words */
.page-body .tag {
    line-height: 1.8;
}
.page-body p .tag,
.page-body li .tag {
    text-transform: none;
    letter-spacing: 0.04em;
    display: inline;
}
/* Every label carries its hairline and the row is drawn 11px to the left with
   that first pixel clipped, so the one that opens each line, after a wrap as
   well as at the start, shows none. */
.page-body .tags {
    display: flex;
    flex-wrap: wrap;
    margin-left: -11px;
    clip-path: inset(0 0 0 1px);
}
.page-body .tags .tag {
    padding: 0 10px;
    border-left: 1px solid var(--line-2);
}

/* ---------- strip: the facts as pills, in their own colours ---------- */
.strip {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
:is(.strip, .road, .col__head, .fit__head) > .tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 10.5px;
    letter-spacing: 0.14em;
    line-height: 1;
    background: var(--paper-3);
}
:is(.strip, .road, .col__head, .fit__head) > .tag--purple {
    background: var(--tag-purple-bg);
    color: var(--tag-purple-fg);
}
:is(.strip, .road, .col__head, .fit__head) > .tag--blue {
    background: var(--tag-blue-bg);
    color: var(--tag-blue-fg);
}
:is(.strip, .road, .col__head, .fit__head) > .tag--pink {
    background: var(--tag-pink-bg);
    color: var(--tag-pink-fg);
}
:is(.strip, .road, .col__head, .fit__head) > .tag--green {
    background: var(--tag-green-bg);
    color: var(--tag-green-fg);
}
:is(.strip, .road, .col__head, .fit__head) > .tag--orange {
    background: var(--tag-orange-bg);
    color: var(--tag-orange-fg);
}
:is(.strip, .road, .col__head, .fit__head) > .tag--cyan {
    background: var(--tag-cyan-bg);
    color: var(--tag-cyan-fg);
}
:is(.strip, .road, .col__head, .fit__head) > .tag--yellow {
    background: var(--tag-yellow-bg);
    color: var(--tag-yellow-fg);
}
:is(.strip, .road, .col__head, .fit__head) > .tag--rose {
    background: var(--tag-rose-bg);
    color: var(--tag-rose-fg);
}

/* ---------- keys: the three credentials, prefix first ---------- */
.keys {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line-2);
}
.key {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 8px 24px;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
}
.key__pre {
    font-family: var(--f-mono);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.key__t {
    margin: 2px 0 6px;
    font-family: var(--display);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.012em;
    color: var(--ink);
}
.key__p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink);
}
.key__f {
    display: block;
    margin-top: 8px;
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: var(--ink);
}
@media (max-width: 600px) {
    .key {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- endpoint: the method and path, the copy, the request beside it ---------- */
.ep {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 20px 48px;
    align-items: start;
    padding-top: 28px;
    border-top: 1px solid var(--line-2);
}
.ep + .ep {
    margin-top: 40px;
}
.ep__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.method {
    padding: 4px 9px;
    border-radius: 6px;
    font-family: var(--f-mono);
    font-size: 11px;
    font-weight: 540;
    letter-spacing: 0.04em;
}
.method--get {
    background: var(--tag-green-bg);
    color: var(--tag-green-fg);
}
.method--post {
    background: var(--tag-blue-bg);
    color: var(--tag-blue-fg);
}
.ep__path {
    font-family: var(--f-mono);
    font-size: 14px;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.ep__copy h3 {
    margin: 0 0 10px;
    font-family: var(--display);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: -0.012em;
    color: var(--ink);
}
.ep__copy p {
    margin: 0 0 12px;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ink);
}
@media (max-width: 900px) {
    .ep {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- fit: the two lists face each other ---------- */
.fit {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 16px;
}
.fit__panel {
    padding: clamp(24px, 3vw, 36px);
    border: 1px solid var(--line-2);
    border-radius: 22px;
}
.fit__panel--no {
    background: var(--paper-3);
    border-color: transparent;
}
.fit__head {
    margin: 0 0 14px;
}
.fit__head > .tag {
    font-size: 12px;
}
.fit__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.fit__list li {
    position: relative;
    padding: 14px 0 14px 24px;
    border-top: 1px solid var(--line);
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--ink);
}
.fit__list li::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 22px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--success);
}
.fit__panel--no .fit__list li::before {
    background: var(--destructive);
}
@media (max-width: 860px) {
    .fit {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- columns: the roadmap, each column an honest state ---------- */
.cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}
.col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.col__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 4px;
    padding: 0 4px 14px;
    border-bottom: 1px solid var(--line-2);
}
.col__sub {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink);
}
.road {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px;
    border: 1px solid var(--line-2);
    border-radius: 18px;
    background: var(--paper-2);
}
.road__t {
    margin: 4px 0 0;
    font-family: var(--display);
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--ink);
}
.road__p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ink);
}
.road__f {
    margin-top: 6px;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.04em;
    line-height: 1.5;
    color: var(--ink);
}
@media (max-width: 960px) {
    .cols {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- timeline: the changelog, one honest entry at a time. (.entry, not
   .tl: the hero dashboard's timeline rows own that name in prototype.css) ---------- */
.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}
.entry {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 24px 40px;
    padding-bottom: 56px;
}
.entry:last-child {
    padding-bottom: 0;
}
.entry__rail {
    position: relative;
    padding-left: 26px;
}
.entry__rail::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 5px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--brand);
    box-shadow: 0 0 0 4px var(--brand-soft);
}
.entry:not(:last-child) .entry__rail::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 22px;
    bottom: -56px;
    width: 1px;
    background: var(--line-2);
}
.entry__when {
    display: block;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1.6;
    color: var(--ink);
}
.entry__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.two {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px 40px;
}
.two h3 {
    margin: 0 0 12px;
    font-family: var(--display);
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.008em;
    color: var(--ink);
}
.two .bullets li {
    font-size: 15px;
}
@media (max-width: 860px) {
    .entry {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }
    .entry:not(:last-child) .entry__rail::after {
        display: none;
    }
    .two {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- compose: the mail, ready to send ---------- */
.compose__hdr {
    margin-bottom: 8px;
    padding: 2px 6px 0;
}
.compose__row {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 16px;
    padding: 10px 8px;
    border-bottom: 1px solid var(--line-2);
    font-size: 14px;
    color: var(--ink);
}
.compose__k {
    padding-top: 2px;
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.compose__body {
    white-space: pre-wrap;
    font-family: var(--f-body);
    font-size: 14.5px;
    line-height: 1.7;
}

/* ---------- roles: the table, and what is in it ---------- */
.roles {
    border-top: 1px solid var(--line-2);
}
.roles__head,
.roles__empty {
    display: grid;
    grid-template-columns: minmax(0, 0.35fr) minmax(0, 1fr);
    gap: 16px 32px;
}
.roles__head {
    padding: 14px 0;
    border-bottom: 1px solid var(--line-2);
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
}
.roles__empty {
    padding: 32px 0 36px;
    border-bottom: 1px solid var(--line);
}
.roles__k {
    font-family: var(--display);
    font-size: 21px;
    font-weight: 400;
    letter-spacing: -0.015em;
    line-height: 1.2;
    color: var(--ink);
}
.roles__empty p {
    margin: 0 0 10px;
    max-width: 62ch;
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
}
.roles__empty p:last-child {
    margin-bottom: 0;
}
@media (max-width: 600px) {
    .roles__head,
    .roles__empty {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- principles: the loop in three words ---------- */
.principles {
    border-top: 1px solid var(--line-2);
}
.pr {
    display: grid;
    grid-template-columns: minmax(0, 0.32fr) minmax(0, 1fr);
    gap: 12px 40px;
    padding: 32px 0;
    border-bottom: 1px solid var(--line);
}
.pr__k {
    font-family: var(--display);
    font-size: clamp(25px, 2.5vw, 34px);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1;
    color: var(--ink);
}
.pr__t {
    margin: 0 0 8px;
    font-family: var(--display);
    font-size: 19px;
    font-weight: 400;
    letter-spacing: -0.012em;
    color: var(--ink);
}
.pr__p {
    margin: 0;
    max-width: 62ch;
    font-size: 15.5px;
    line-height: 1.6;
    color: var(--ink);
}
.pr__f {
    display: block;
    margin-top: 12px;
    font-family: var(--f-mono);
    font-size: 11.5px;
    letter-spacing: 0.04em;
    color: var(--ink);
}
@media (max-width: 600px) {
    .pr {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- the call to action, on yellow like the demo panel ---------- */
.cta-band {
    max-width: 1100px;
    margin: clamp(72px, 9vw, 120px) auto 0;
    padding: clamp(32px, 5vw, 56px);
    border-radius: var(--r-tray);
    text-align: center;
    background: var(--brand);
    color: var(--ink);
}
.cta-band h2 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(25px, 3vw, 37px);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.05;
    text-wrap: balance;
}
.cta-band p {
    margin: 14px auto 26px;
    max-width: 46ch;
    font-size: 16px;
    line-height: 1.55;
}