/* wandkit subpages.

   Loaded after the bundled sheet on the twelve subpages. The tokens, buttons
   and footer come from site.css. This sheet holds the subpage chrome (a bare
   nav, the veil the page dissolves under) and 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. */

/* ---------- chrome ---------- */
/* brand and button, nothing behind them, at any scroll position */
.nav--bare .nav__shell {
    grid-template-columns: 1fr auto;
}
/* outranks the glass rule in site.css whatever order the sheets load in */
.nav.nav--bare.is-scrolled .nav__shell {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* The page dissolves under a blurred veil at the top: a strong blur held to
   the top edge and a white wash fading out under it, so what scrolls up
   softens before it goes. */
.veil {
    position: fixed;
    inset: 0 0 auto;
    height: 168px;
    z-index: 50;
    pointer-events: none;
}
.veil::before,
.veil::after {
    content: '';
    position: absolute;
    inset: 0;
}
.veil::before {
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 26%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 26%, transparent 100%);
}
.veil::after {
    background: linear-gradient(
        to bottom,
        #fff 0,
        rgba(255, 255, 255, 0.88) 28%,
        rgba(255, 255, 255, 0.4) 62%,
        rgba(255, 255, 255, 0) 100%
    );
}

/* ---------- page ---------- */
.page {
    padding-top: clamp(140px, 15vw, 184px);
}
.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;
}
@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;
}
@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 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;
    overflow-wrap: anywhere;
}
.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);
    text-align: right;
    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;
        text-align: left;
    }
}

/* ---------- 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);
}
/* inline labels inside body copy sit in a row, separated by hairlines; inside a
   sentence they keep their case, an address in capitals is not an address */
.page-body .tag {
    line-height: 1.8;
}
.page-body p .tag,
.page-body li .tag {
    text-transform: none;
    letter-spacing: 0.04em;
    white-space: normal;
    display: inline;
}
.page-body p .tag + .tag,
.page-body li .tag + .tag {
    margin-left: 10px;
    padding-left: 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;
}