@layer components {
  /* 9.2 keeps Talkable's approved type, colors and shapes. New surfaces share those tokens. */
  .current-agent-path .guide-prompt .full-prompt-text {
    color: #fff;
  }
  .current-agent-path .guide-prompt .figure-note {
    color: #d1d8e5;
  }
  .preview-rail {
    background: #f4f0f8;
    color: var(--navy);
    font-size: var(--tk-type-label);
    border-bottom: var(--tk-size-1) solid #ddd5e7;
  }
  .preview-rail > div {
    width: min(var(--tk-size-1320), calc(var(--tk-relative-100-percent) - var(--tk-size-80)));
    margin: auto;
    min-height: var(--tk-size-36);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tk-space-20);
  }
  .preview-rail nav {
    display: flex;
    gap: var(--tk-space-20);
    align-items: center;
  }
  .preview-rail a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tk-size-36);
  }
  .preview-rail .active {
    font-weight: var(--tk-weight-bold);
    text-decoration: underline;
    text-underline-offset: var(--tk-size-4);
  }
  .expanded-footer {
    grid-template-columns: 1.35fr 1fr 1fr 1fr;
    gap: var(--tk-space-48);
  }
  .footer-top.expanded-footer > div {
    min-width: 0;
  }
  .footer-top.expanded-footer a:not(.brand) {
    display: block;
    min-height: var(--tk-size-40);
    line-height: var(--tk-leading-body);
    padding: var(--tk-space-8) var(--tk-space-0);
    font-size: var(--tk-type-label);
    overflow-wrap: anywhere;
  }
  .footer-top.expanded-footer h2 {
    font-size: var(--tk-type-label);
    margin-bottom: var(--tk-space-16);
  }
  .expanded-footer .footer-brand > p {
    font-size: var(--tk-type-title);
    line-height: var(--tk-leading-heading);
    letter-spacing: var(--tk-tracking-tight);
  }
  .footer-credential {
    display: block;
    margin-top: var(--tk-space-28);
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    color: #c5cddd;
  }
  .footer-bottom .legal-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tk-space-8) var(--tk-space-24);
  }
  .footer-bottom .legal-links a {
    font-size: var(--tk-type-label) !important;
    min-height: var(--tk-size-32);
  }
  .footer-bottom {
    align-items: center;
  }
  .closing h2 {
    max-width: var(--tk-size-760);
  }
  .closing-inner > p:not(.eyebrow) {
    max-width: var(--tk-size-540);
  }
  .nav-current {
    text-decoration: underline;
    text-underline-offset: var(--tk-size-8);
  }
  .resource-hero {
    padding-top: var(--tk-space-96);
    padding-bottom: var(--tk-space-72);
  }
  .resource-hero h1 {
    font-size: var(--tk-type-display-sm);
    max-width: var(--tk-size-1020);
  }
  .resource-hero h1 span {
    color: #7950ad;
  }
  .resource-hero > p:not(.eyebrow) {
    font-size: var(--tk-type-body);
    line-height: var(--tk-leading-body);
    max-width: var(--tk-size-712);
    color: var(--muted);
    margin: var(--tk-space-28) var(--tk-space-0);
  }
  .resource-hero > .button {
    margin-top: var(--tk-space-8);
  }
  .resource-section {
    padding-bottom: var(--tk-space-96);
    scroll-margin-top: var(--tk-space-112);
  }
  .small-section-heading {
    margin: var(--tk-space-12) var(--tk-space-0) var(--tk-space-36);
    display: flex;
    gap: var(--tk-space-40);
    justify-content: space-between;
    align-items: end;
  }
  .small-section-heading h2 {
    font-size: var(--tk-type-heading);
    max-width: var(--tk-size-660);
  }
  .small-section-heading > p {
    color: var(--muted);
    max-width: var(--tk-size-360);
  }
  .resource-rows {
    border-top: var(--tk-size-1) solid var(--line);
  }
  .resource-row {
    display: flex;
    align-items: center;
    gap: var(--tk-space-28);
    padding: var(--tk-space-24) var(--tk-space-0);
    border-bottom: var(--tk-size-1) solid var(--line);
    transition: background-color 0.16s;
  }
  .resource-row:hover {
    background: var(--mist);
  }
  .resource-row > span {
    flex: 1;
    min-width: 0;
  }
  .resource-row strong {
    display: block;
    font-size: var(--tk-type-body);
    letter-spacing: var(--tk-tracking-tight);
  }
  .resource-row small {
    display: block;
    font-size: var(--tk-type-label);
    color: var(--muted);
    margin-top: var(--tk-space-4);
  }
  .resource-row code {
    font-size: var(--tk-type-label);
    color: #6e479e;
  }
  .resource-row svg {
    width: var(--tk-size-20);
  }
  .current-agent-path {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tk-space-80);
    padding-bottom: var(--tk-space-96);
  }
  .current-agent-path h2 {
    font-size: var(--tk-type-heading);
  }
  .current-agent-path > div > p:not(.eyebrow) {
    margin: var(--tk-space-24) var(--tk-space-0);
    color: var(--muted);
  }
  .current-agent-path .guide-prompt {
    margin: var(--tk-space-0);
  }
  .current-agent-path .full-prompt-text {
    font-size: var(--tk-type-label);
  }
  .agent-installer {
    max-width: var(--tk-size-760);
    margin: var(--tk-space-0) auto;
    background: #26354d;
    border: var(--tk-size-1) solid #56627a;
    text-align: left;
    border-radius: var(--tk-size-8);
    box-shadow: 0 var(--tk-size-20) var(--tk-size-48) #09102028;
    overflow: hidden;
    scroll-margin-top: var(--tk-space-112);
  }
  .installer-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--tk-space-16) var(--tk-space-24);
    font-size: var(--tk-type-label);
  }
  .install-tabs {
    display: flex;
    padding: var(--tk-space-0) var(--tk-space-16);
    gap: var(--tk-space-0);
    border-block: var(--tk-size-1) solid #4b5970;
    background: #202e46;
    flex-wrap: wrap;
  }
  .install-tabs button {
    background: transparent;
    color: #d4dbe6;
    font-size: var(--tk-type-label);
    padding: var(--tk-space-12) var(--tk-space-12);
    min-height: var(--tk-size-48);
    border-bottom: var(--tk-size-2) solid transparent;
    position: relative;
  }
  .install-tabs button[aria-selected='true'] {
    color: #fff;
    border-bottom-color: var(--orange);
    background: #ffffff07;
  }
  .install-tabs button:hover {
    background: #ffffff0b;
  }
  .install-panel {
    padding: var(--tk-space-24);
    min-height: var(--tk-size-224);
  }
  .install-prompt {
    font-size: var(--tk-type-body);
    line-height: var(--tk-leading-body);
    letter-spacing: var(--tk-tracking-tight);
    color: #fff;
    margin: var(--tk-space-0) var(--tk-space-0) var(--tk-space-24);
  }
  .installer-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--tk-space-12) var(--tk-space-24);
  }
  .installer-actions .inline-link {
    font-size: var(--tk-type-label);
    border: 0;
    color: #eee7f6;
  }
  .installer-foot {
    font-size: var(--tk-type-label);
    color: #c5cddd;
    margin: var(--tk-space-20) var(--tk-space-0) var(--tk-space-0);
  }
  .installer-more {
    border-top: var(--tk-size-1) solid #4b5970;
    padding: var(--tk-space-12) var(--tk-space-24);
    font-size: var(--tk-type-label);
    color: #ddd5e9;
  }
  .installer-more a {
    display: flex;
    justify-content: space-between;
    gap: var(--tk-space-24);
    align-items: center;
    min-height: var(--tk-size-32);
  }
  .code-line {
    display: flex;
    background: #18243a;
    border: var(--tk-size-1) solid #56627a;
    border-radius: var(--tk-size-3);
    align-items: center;
    margin-bottom: var(--tk-space-8);
  }
  .code-line code {
    font-size: var(--tk-type-label);
    padding: var(--tk-space-16);
    overflow-wrap: anywhere;
    min-width: 0;
    flex: 1;
  }
  .code-line button {
    background: transparent;
    color: #e2d4ef;
    min-width: var(--tk-size-48);
    min-height: var(--tk-size-48);
    display: grid;
    place-items: center;
  }
  .agent-section {
    background: #f4f6f8;
  }
  .agent-section .section-heading {
    gap: var(--tk-space-72);
  }
  .host-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tk-space-20);
  }
  .host-card {
    min-width: 0;
    border: var(--tk-size-1) solid var(--line);
    background: #fff;
    padding: var(--tk-space-28);
    scroll-margin-top: var(--tk-space-112);
    display: flex;
    flex-direction: column;
    align-items: start;
  }
  .host-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tk-space-12);
    width: var(--tk-relative-100-percent);
    margin-bottom: var(--tk-space-24);
  }
  .host-mark {
    display: grid;
    place-items: center;
    min-width: var(--tk-size-44);
    height: var(--tk-size-44);
    font-size: var(--tk-type-lead);
    font-weight: var(--tk-weight-bold);
    letter-spacing: var(--tk-tracking-tight);
    background: #f4f0f8;
    color: #5c3b86;
    border-radius: var(--tk-size-4);
  }
  .integration-type {
    font-size: var(--tk-type-label);
    color: var(--muted);
  }
  .host-card h3 {
    font-size: var(--tk-type-lead);
  }
  .host-card > p {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
    color: var(--muted);
    margin: var(--tk-space-12) var(--tk-space-0) var(--tk-space-20);
    flex: 1;
  }
  .host-card > .text-button {
    display: flex;
    gap: var(--tk-space-12);
    align-items: center;
    min-height: var(--tk-size-44);
    font-weight: var(--tk-weight-bold);
    background: transparent;
    padding: var(--tk-space-0);
  }
  .host-card details {
    font-size: var(--tk-type-label);
    width: var(--tk-relative-100-percent);
    margin-top: var(--tk-space-12);
    border-top: var(--tk-size-1) solid var(--line);
    padding-top: var(--tk-space-8);
  }
  .host-card summary {
    cursor: pointer;
    min-height: var(--tk-size-36);
    align-content: center;
    color: var(--muted);
  }
  .host-card details p {
    margin-top: var(--tk-space-8);
  }
  .host-card details code {
    display: block;
    padding: var(--tk-space-12);
    background: var(--mist);
    margin-top: var(--tk-space-12);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .section-end {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--tk-space-20);
    margin-top: var(--tk-space-36);
  }
  .section-end > p {
    font-size: var(--tk-type-label);
    color: var(--muted);
  }
  .stack-section {
    background: var(--cream);
  }
  .stack-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tk-space-0) var(--tk-space-48);
    border-top: var(--tk-size-1) solid #d7cbbf;
  }
  .stack-card {
    display: flex;
    align-items: center;
    gap: var(--tk-space-20);
    min-width: 0;
    padding: var(--tk-space-28) var(--tk-space-0);
    border-bottom: var(--tk-size-1) solid #d7cbbf;
  }
  .stack-card > div {
    flex: 1;
    min-width: 0;
  }
  .stack-card h3 {
    font-size: var(--tk-type-lead);
  }
  .stack-card p {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    color: var(--muted);
    margin-top: var(--tk-space-8);
  }
  .stack-card:hover h3 {
    text-decoration: underline;
    text-underline-offset: var(--tk-size-4);
  }
  .stack-mark {
    display: grid;
    place-items: center;
    width: var(--tk-size-48);
    height: var(--tk-size-48);
    flex-shrink: 0;
    background: #fff;
    border: var(--tk-size-1) solid #d7cbbf;
    border-radius: var(--tk-relative-50-percent);
    font-weight: var(--tk-weight-bold);
    font-size: var(--tk-type-label);
  }
  .layer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tk-space-36);
  }
  .layer-grid article {
    border-top: var(--tk-size-1) solid var(--line);
    padding-top: var(--tk-space-24);
  }
  .layer-grid article > span {
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-bold);
    letter-spacing: var(--tk-tracking-wide);
    color: #6e479e;
  }
  .layer-grid h3 {
    font-size: var(--tk-type-lead);
    margin-top: var(--tk-space-16);
  }
  .layer-grid p {
    margin: var(--tk-space-16) var(--tk-space-0);
    color: var(--muted);
  }
  .layer-grid .inline-link {
    font-size: var(--tk-type-label);
  }
  .doc-search {
    max-width: var(--tk-size-632);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--tk-space-8);
    margin-top: var(--tk-space-36);
  }
  .doc-search label {
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-bold);
  }
  .doc-search input {
    grid-column: 1/-1;
    grid-row: 2;
    min-height: var(--tk-size-56);
    border: var(--tk-size-1) solid #a2aab7;
    border-radius: var(--tk-size-4);
    padding: var(--tk-space-12) var(--tk-space-16);
    width: var(--tk-relative-100-percent);
    color: var(--navy);
    background: #fff;
  }
  .doc-search input:focus-visible {
    outline: var(--tk-size-3) solid #7650a9;
    outline-offset: var(--tk-size-3);
  }
  .doc-search > span {
    font-size: var(--tk-type-label);
    color: var(--muted);
  }
  .docs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tk-space-20);
  }
  .doc-card {
    border: var(--tk-size-1) solid var(--line);
    padding: var(--tk-space-28);
    display: flex;
    flex-direction: column;
    align-items: start;
    min-width: 0;
    transition:
      background-color 0.16s,
      border-color 0.16s;
  }
  .doc-card:hover {
    background: #f8f5fc;
    border-color: #b7a0ce;
  }
  .doc-card .eyebrow {
    font-size: var(--tk-type-label);
    letter-spacing: var(--tk-tracking-wide);
    color: #6e479e;
    margin-bottom: var(--tk-space-24);
  }
  .doc-card h2 {
    font-size: var(--tk-type-lead);
    line-height: var(--tk-leading-heading);
    text-wrap: initial;
    letter-spacing: var(--tk-tracking-tight);
  }
  .doc-card p {
    font-size: var(--tk-type-label);
    color: var(--muted);
    line-height: var(--tk-leading-prose);
    margin: var(--tk-space-12) var(--tk-space-0) var(--tk-space-20);
    flex: 1;
  }
  .doc-card svg {
    width: var(--tk-size-24);
  }
  .empty-search {
    grid-column: 1/-1;
    padding: var(--tk-space-48) var(--tk-space-0);
    color: var(--muted);
  }
  .docs-callout {
    background: var(--cream);
    padding: var(--tk-space-40);
    display: flex;
    justify-content: space-between;
    gap: var(--tk-space-40);
    align-items: center;
  }
  .docs-callout h2 {
    font-size: var(--tk-type-heading-sm);
  }
  .docs-callout .eyebrow {
    font-size: var(--tk-type-label);
    margin-bottom: var(--tk-space-16);
  }
  .docs-callout > div:last-child {
    display: flex;
    flex-direction: column;
    gap: var(--tk-space-8);
    flex-shrink: 0;
  }
  .docs-callout p:not(.eyebrow) {
    margin-top: var(--tk-space-20);
    max-width: var(--tk-size-652);
    color: var(--muted);
  }
  .article-top {
    padding-top: var(--tk-space-56);
    padding-bottom: var(--tk-space-56);
  }
  .back-link {
    display: inline-flex;
    min-height: var(--tk-size-44);
    font-size: var(--tk-type-label);
    margin-bottom: var(--tk-space-28);
    text-decoration: underline;
    text-underline-offset: var(--tk-size-4);
  }
  .article-top h1 {
    font-size: var(--tk-type-display-sm);
    max-width: var(--tk-size-960);
  }
  .article-top > p:not(.eyebrow) {
    font-size: var(--tk-type-body);
    color: var(--muted);
    max-width: var(--tk-size-700);
    margin-top: var(--tk-space-24);
  }
  .article-actions {
    display: flex;
    gap: var(--tk-space-24);
    align-items: center;
    flex-wrap: wrap;
    margin-top: var(--tk-space-28);
  }
  .article-actions .text-button {
    display: flex;
    gap: var(--tk-space-12);
    align-items: center;
    min-height: var(--tk-size-44);
    background: transparent;
  }
  .article-actions .inline-link {
    font-size: var(--tk-type-label);
  }
  .doc-layout {
    border-top: var(--tk-size-1) solid var(--line);
    padding-top: var(--tk-space-16);
  }
  .doc-side-links {
    border-top: var(--tk-size-1) solid var(--line);
    margin-top: var(--tk-space-24);
    padding-top: var(--tk-space-16);
  }
  .doc-layout .guide-content h2 {
    font-size: var(--tk-type-heading-sm);
  }
  .doc-layout .guide-content > section {
    scroll-margin-top: var(--tk-space-112);
  }
  .code-sample {
    background: var(--navy);
    color: #e5ddf1;
    padding: var(--tk-space-24);
    border-radius: var(--tk-size-4);
    line-height: var(--tk-leading-prose);
    font-size: var(--tk-type-label);
    max-width: var(--tk-relative-100-percent);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    tab-size: 2;
    margin-top: var(--tk-space-24);
  }
  .integration-detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tk-space-80);
  }
  .integration-detail h2 {
    font-size: var(--tk-type-heading-sm);
  }
  .integration-steps {
    padding-left: var(--tk-space-24);
    line-height: var(--tk-leading-prose);
    margin: var(--tk-space-28) var(--tk-space-0);
  }
  .integration-steps li {
    padding-left: var(--tk-space-8);
    margin: var(--tk-space-16) var(--tk-space-0);
  }
  .integration-detail .code-sample {
    margin-top: var(--tk-space-0);
  }
  #install-dialog {
    max-width: var(--tk-size-572);
    width: calc(var(--tk-relative-100-percent) - var(--tk-size-32));
    max-height: calc(var(--tk-relative-100-dvh) - var(--tk-size-32));
    overflow: auto;
  }
  #install-dialog h2 {
    font-size: var(--tk-type-heading-sm);
  }
  #install-description {
    font-size: var(--tk-type-label);
    color: var(--muted);
    margin: var(--tk-space-20) var(--tk-space-0);
  }
  .install-workspace {
    background: #f4f0f8;
    padding: var(--tk-space-16) var(--tk-space-20);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--tk-space-4);
    font-size: var(--tk-type-label);
  }
  .install-workspace small {
    grid-column: 1/-1;
    color: var(--muted);
  }
  .install-scopes {
    padding-left: var(--tk-space-20);
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
    margin: var(--tk-space-20) var(--tk-space-0);
  }
  .install-scopes li {
    padding: var(--tk-space-4) var(--tk-space-0);
  }
  .install-approval {
    font-size: var(--tk-type-label);
    color: var(--muted);
    margin-bottom: var(--tk-space-24);
  }
  #install-result {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    color: var(--muted);
    margin-top: var(--tk-space-20);
  }
  #install-dialog .inline-link {
    font-size: var(--tk-type-label);
    margin-top: var(--tk-space-16);
  }
  #install-dialog > .eyebrow {
    font-size: var(--tk-type-label);
    letter-spacing: var(--tk-tracking-wide);
  }
  #install-dialog .button:disabled {
    opacity: 0.85;
  }
  .review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tk-space-28);
  }
  .review-grid article {
    padding: var(--tk-space-40);
    border: var(--tk-size-1) solid var(--line);
  }
  .review-grid h2 {
    font-size: var(--tk-type-heading-sm);
  }
  .review-grid p:not(.eyebrow) {
    color: var(--muted);
    margin: var(--tk-space-24) var(--tk-space-0);
  }
  .review-outline {
    list-style: none;
    counter-reset: review;
    padding: var(--tk-space-0);
    border-top: var(--tk-size-1) solid var(--line);
  }
  .review-outline li {
    counter-increment: review;
    display: grid;
    grid-template-columns: var(--tk-size-40) 0.9fr 1.1fr;
    gap: var(--tk-space-24);
    border-bottom: var(--tk-size-1) solid var(--line);
    padding: var(--tk-space-24) var(--tk-space-0);
  }
  .review-outline li:before {
    content: '0' counter(review);
    color: #7950ad;
    font-size: var(--tk-type-label);
  }
  .review-outline strong {
    font-size: var(--tk-type-body);
    line-height: var(--tk-leading-body);
  }
  .review-outline span {
    color: var(--muted);
    font-size: var(--tk-type-label);
  }
  .review-table {
    overflow-x: auto;
    max-width: var(--tk-relative-100-percent);
  }
  table {
    border-collapse: collapse;
    width: var(--tk-relative-100-percent);
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
  }
  th,
  td {
    text-align: left;
    vertical-align: top;
    border-bottom: var(--tk-size-1) solid var(--line);
    padding: var(--tk-space-20) var(--tk-space-16);
  }
  th {
    background: var(--mist);
  }
  td:first-child {
    font-weight: var(--tk-weight-bold);
  }
  .research-sources article {
    padding: var(--tk-space-24) var(--tk-space-0);
    border-top: var(--tk-size-1) solid var(--line);
  }
  .research-sources p {
    font-size: var(--tk-type-label);
    color: var(--muted);
    margin-top: var(--tk-space-16);
    max-width: var(--tk-size-900);
  }
  @media (width > 1024px) and (max-width: 1100px) {
    #site-nav {
      gap: var(--tk-space-16);
      font-size: var(--tk-type-label);
    }
    .header-inner {
      width: calc(var(--tk-relative-100-percent) - var(--tk-size-48));
      gap: var(--tk-space-16);
    }
    .brand > span {
      display: none;
    }
    .nav-cta {
      gap: var(--tk-space-8) !important;
      padding: var(--tk-space-8) var(--tk-space-12) !important;
    }
  }
  @media (max-width: 1024px) {
    .expanded-footer {
      grid-template-columns: 1.1fr 1fr 1fr;
      gap: var(--tk-space-36);
    }
    .expanded-footer .footer-brand {
      grid-column: 1/-1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--tk-space-0) var(--tk-space-24);
    }
    .expanded-footer .footer-brand > p {
      grid-row: 1/3;
      grid-column: 2;
    }
    .footer-credential {
      margin-top: var(--tk-space-20);
    }
    .host-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .agent-section .host-grid .host-card:last-child {
      grid-column: 1/-1;
    }
    .docs-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .current-agent-path,
    .integration-detail {
      gap: var(--tk-space-40);
    }
    .resource-hero {
      padding-top: var(--tk-space-64);
    }
    .layer-grid {
      gap: var(--tk-space-20);
    }
    .review-outline li {
      grid-template-columns: var(--tk-size-32) 0.9fr 1.1fr;
      gap: var(--tk-space-16);
    }
  }
  @media (max-width: 1024px) {
    .preview-rail > div {
      width: calc(var(--tk-relative-100-percent) - var(--tk-size-48));
    }
    .preview-rail nav {
      gap: var(--tk-space-12);
    }
    .current-agent-path,
    .integration-detail {
      grid-template-columns: 1fr;
    }
    .current-agent-path h2 {
      font-size: var(--tk-type-heading-sm);
    }
    .resource-section {
      padding-bottom: var(--tk-space-72);
    }
    .small-section-heading {
      display: block;
    }
    .small-section-heading > p {
      margin-top: var(--tk-space-20);
    }
    .stack-grid {
      grid-template-columns: 1fr;
    }
    .stack-card {
      padding: var(--tk-space-24) var(--tk-space-0);
    }
    .layer-grid {
      grid-template-columns: 1fr;
    }
    .layer-grid article {
      padding-bottom: var(--tk-space-20);
    }
    .docs-callout {
      padding: var(--tk-space-28);
      align-items: start;
      flex-direction: column;
      gap: var(--tk-space-24);
    }
    .docs-callout > div:last-child {
      flex-wrap: wrap;
      flex-direction: row;
      gap: var(--tk-space-24);
    }
    .docs-callout h2 {
      font-size: var(--tk-type-title);
    }
    .doc-layout .guide-content h2 {
      font-size: var(--tk-type-title);
    }
    .section-end {
      align-items: start;
      flex-direction: column;
    }
    .review-grid {
      grid-template-columns: 1fr;
    }
    .review-outline li {
      grid-template-columns: var(--tk-size-32) 1fr;
      gap: var(--tk-space-8) var(--tk-space-16);
    }
    .review-outline span {
      grid-column: 2;
    }
    .hero[data-track='ideal'] {
      padding-top: var(--tk-space-64);
    }
  }
  @media (max-width: 520px) {
    .preview-rail > div {
      width: calc(var(--tk-relative-100-percent) - var(--tk-size-40));
      min-height: var(--tk-size-44);
      gap: var(--tk-space-8);
      font-size: var(--tk-type-label);
    }
    .preview-rail nav {
      gap: var(--tk-space-12);
    }
    .preview-rail nav a {
      min-height: var(--tk-size-44);
    }
    .preview-rail nav a:last-child {
      display: none;
    }
    .expanded-footer {
      grid-template-columns: 1fr 1fr;
      gap: var(--tk-space-32) var(--tk-space-16);
    }
    .expanded-footer .footer-brand {
      display: block;
      grid-column: 1/-1;
    }
    .expanded-footer .footer-brand > p {
      font-size: var(--tk-type-lead);
      margin-top: var(--tk-space-24);
    }
    .footer-top.expanded-footer > div > a:not(.brand) {
      font-size: var(--tk-type-label);
      min-height: var(--tk-size-44);
    }
    .footer-top.expanded-footer h2 {
      font-size: var(--tk-type-label);
      margin-bottom: var(--tk-space-12);
    }
    .footer-credential {
      font-size: var(--tk-type-label);
    }
    .footer-bottom .legal-links {
      display: grid;
      gap: var(--tk-space-16);
    }
    .footer-bottom .legal-links a {
      font-size: var(--tk-type-label) !important;
    }
    .resource-hero {
      padding-top: var(--tk-space-48);
      padding-bottom: var(--tk-space-48);
    }
    .resource-hero h1 {
      font-size: var(--tk-type-heading);
      line-height: var(--tk-leading-display);
    }
    .resource-hero > p:not(.eyebrow) {
      font-size: var(--tk-type-label);
      margin: var(--tk-space-24) var(--tk-space-0);
    }
    .resource-section {
      padding-bottom: var(--tk-space-56);
    }
    .resource-row {
      gap: var(--tk-space-12);
      flex-wrap: wrap;
      align-items: start;
      padding: var(--tk-space-20) var(--tk-space-0);
    }
    .resource-row > span {
      flex-basis: calc(var(--tk-relative-100-percent) - var(--tk-size-40));
    }
    .resource-row small {
      font-size: var(--tk-type-label);
    }
    .resource-row > code {
      order: 3;
      font-size: var(--tk-type-label);
    }
    .resource-row > svg {
      margin-top: var(--tk-space-4);
    }
    .current-agent-path {
      padding-bottom: var(--tk-space-64);
      gap: var(--tk-space-28);
    }
    .current-agent-path h2 {
      font-size: var(--tk-type-heading-sm);
    }
    .agent-installer {
      border-radius: var(--tk-size-8);
    }
    .installer-heading {
      padding: var(--tk-space-16) var(--tk-space-16);
    }
    .install-tabs {
      padding: var(--tk-space-0) var(--tk-space-8);
      gap: var(--tk-space-0);
    }
    .install-tabs button {
      padding: var(--tk-space-12) var(--tk-space-8);
      font-size: var(--tk-type-label);
      flex: 1 0 auto;
    }
    .install-panel {
      padding: var(--tk-space-20) var(--tk-space-16);
      min-height: var(--tk-size-268);
    }
    .install-prompt {
      font-size: var(--tk-type-body);
      margin-bottom: var(--tk-space-20);
    }
    .installer-actions {
      gap: var(--tk-space-8) var(--tk-space-16);
      align-items: start;
    }
    .installer-actions .button {
      font-size: var(--tk-type-label);
      padding-inline: var(--tk-space-16);
    }
    .installer-foot {
      font-size: var(--tk-type-label);
      line-height: var(--tk-leading-body);
      margin-top: var(--tk-space-16);
    }
    .installer-more {
      padding: var(--tk-space-12) var(--tk-space-16);
      font-size: var(--tk-type-label);
    }
    .installer-more a {
      gap: var(--tk-space-12);
      line-height: var(--tk-leading-body);
    }
    .code-line code {
      font-size: var(--tk-type-label);
      padding: var(--tk-space-12);
    }
    .code-line button {
      min-width: var(--tk-size-40);
    }
    .host-grid {
      grid-template-columns: 1fr;
      gap: var(--tk-space-16);
    }
    .host-card {
      padding: var(--tk-space-24);
    }
    .host-top {
      margin-bottom: var(--tk-space-20);
    }
    .host-card > p {
      font-size: var(--tk-type-label);
    }
    .host-card details {
      font-size: var(--tk-type-label);
    }
    .host-card summary {
      min-height: var(--tk-size-44);
    }
    .agent-section .section-heading {
      gap: var(--tk-space-24);
    }
    .stack-card {
      gap: var(--tk-space-16);
    }
    .stack-card h3 {
      font-size: var(--tk-type-lead);
    }
    .stack-card p {
      font-size: var(--tk-type-label);
    }
    .stack-mark {
      width: var(--tk-size-44);
      height: var(--tk-size-44);
      font-size: var(--tk-type-label);
    }
    .section-end > p {
      font-size: var(--tk-type-label);
    }
    .small-section-heading h2 {
      font-size: var(--tk-type-title);
    }
    .docs-grid {
      grid-template-columns: 1fr;
      gap: var(--tk-space-16);
    }
    .doc-card {
      padding: var(--tk-space-24);
    }
    .doc-card h2 {
      font-size: var(--tk-type-lead);
    }
    .doc-card .eyebrow {
      font-size: var(--tk-type-label);
      margin-bottom: var(--tk-space-16);
    }
    .doc-search {
      margin-top: var(--tk-space-28);
    }
    .doc-search input {
      font-size: var(--tk-type-label);
    }
    .article-top {
      padding-top: var(--tk-space-36);
      padding-bottom: var(--tk-space-40);
    }
    .article-top h1 {
      font-size: var(--tk-type-heading-sm);
    }
    .article-top > p:not(.eyebrow) {
      font-size: var(--tk-type-label);
    }
    .article-top > .eyebrow {
      margin-bottom: var(--tk-space-20);
    }
    .article-actions {
      gap: var(--tk-space-16);
    }
    .article-actions .button {
      font-size: var(--tk-type-label);
    }
    .doc-layout .guide-content h2 {
      font-size: var(--tk-type-title);
    }
    .code-sample {
      padding: var(--tk-space-20);
      font-size: var(--tk-type-label);
    }
    .integration-detail h2 {
      font-size: var(--tk-type-title);
    }
    .integration-steps {
      font-size: var(--tk-type-label);
    }
    .integration-detail {
      gap: var(--tk-space-24);
    }
    .review-grid article {
      padding: var(--tk-space-24);
    }
    .review-grid h2 {
      font-size: var(--tk-type-title);
    }
    .review-outline strong {
      font-size: var(--tk-type-label);
    }
    .review-outline span {
      font-size: var(--tk-type-label);
    }
    .review-table table {
      min-width: var(--tk-size-640);
    }
    .research-sources p {
      font-size: var(--tk-type-label);
    }
    .closing h2 {
      font-size: var(--tk-type-heading-sm);
      max-width: var(--tk-size-340);
    }
    .closing p:not(.eyebrow) {
      font-size: var(--tk-type-label);
      max-width: var(--tk-size-280);
    }
    .install-workspace {
      grid-template-columns: 1fr;
    }
    #install-dialog h2 {
      font-size: var(--tk-type-title);
    }
  }
  @media (max-width: 360px) {
    .resource-hero h1 {
      font-size: var(--tk-type-heading-sm);
    }
    .resource-hero > p:not(.eyebrow) {
      font-size: var(--tk-type-label);
    }
    .preview-rail > div {
      width: calc(var(--tk-relative-100-percent) - var(--tk-size-32));
      font-size: var(--tk-type-label);
    }
    .installer-heading {
      font-size: var(--tk-type-label);
      gap: var(--tk-space-8);
    }
    .install-tabs button {
      font-size: var(--tk-type-label);
      padding-inline: var(--tk-space-8);
    }
    .install-prompt {
      font-size: var(--tk-type-label);
    }
    .installer-more {
      font-size: var(--tk-type-label);
    }
    .closing h2 {
      font-size: var(--tk-type-heading-sm);
    }
    .article-top h1 {
      font-size: var(--tk-type-title);
    }
    .expanded-footer {
      gap: var(--tk-space-28) var(--tk-space-16);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .host-card,
    .resource-row,
    .doc-card {
      transition: none;
    }
  }
  @media (max-width: 520px) {
    .install-tabs {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      padding-inline: var(--tk-space-8);
    }
    .install-tabs button {
      padding-inline: var(--tk-space-4);
      min-width: 0;
    }
    .install-tabs button[aria-selected='true'] {
      background: #ffffff0b;
    }
  }
  /* Compact agent connections: an installation control, not a feature card. */
  .connection-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--tk-space-0) var(--tk-space-36);
    border-top: var(--tk-size-1) solid var(--line);
  }
  .connection-item {
    padding: var(--tk-space-20) var(--tk-space-0);
    border-bottom: var(--tk-size-1) solid var(--line);
    min-width: 0;
    scroll-margin-top: var(--tk-space-112);
  }
  .connection-main {
    display: flex;
    align-items: center;
    gap: var(--tk-space-16);
  }
  .connection-main > div {
    flex: 1;
    min-width: 0;
  }
  .connection-main h3 {
    font-size: var(--tk-type-body);
    line-height: var(--tk-leading-heading);
    letter-spacing: var(--tk-tracking-tight);
  }
  .connection-main > div > span {
    font-size: var(--tk-type-label);
    color: var(--muted);
  }
  .connection-mark {
    width: var(--tk-size-40);
    height: var(--tk-size-40);
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: #eee8f5;
    color: #5c3b86;
    border-radius: var(--tk-size-4);
    font-size: var(--tk-type-body);
    font-weight: var(--tk-weight-bold);
    letter-spacing: var(--tk-tracking-tight);
  }
  .connection-main > button {
    min-height: var(--tk-size-40);
    border: var(--tk-size-1) solid #aeb6c3;
    border-radius: var(--tk-size-4);
    background: #fff;
    display: flex;
    align-items: center;
    gap: var(--tk-space-8);
    padding: var(--tk-space-8) var(--tk-space-12);
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-bold);
  }
  .connection-main > button:hover {
    border-color: #7650a9;
    background: #faf7fd;
  }
  .connection-main > button svg {
    width: var(--tk-size-16);
    height: var(--tk-size-16);
  }
  .connection-item details {
    margin-left: var(--tk-space-56);
    font-size: var(--tk-type-label);
  }
  .connection-item summary {
    cursor: pointer;
    min-height: var(--tk-size-40);
    align-content: center;
    color: var(--muted);
  }
  .connection-item details p {
    color: var(--muted);
    margin-top: var(--tk-space-12);
    font-size: var(--tk-type-label);
  }
  .connection-item details code {
    display: block;
    background: var(--mist);
    padding: var(--tk-space-12);
    margin-top: var(--tk-space-12);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: var(--tk-type-label);
  }
  .connection-rail {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--tk-space-0);
    border-top: 0;
    background: #fff;
    border: var(--tk-size-1) solid var(--line);
    border-radius: var(--tk-size-4);
  }
  .connection-rail .connection-item {
    padding: var(--tk-space-24) var(--tk-space-20);
    border-bottom: 0;
  }
  .connection-rail .connection-item + .connection-item {
    border-left: var(--tk-size-1) solid var(--line);
  }
  .connection-rail .connection-main {
    gap: var(--tk-space-12);
  }
  .connection-rail .connection-main h3 {
    font-size: var(--tk-type-label);
  }
  .agent-section {
    padding-block: var(--tk-space-80);
  }
  .agent-section .section-heading {
    margin-bottom: var(--tk-space-36);
  }
  .agent-section .section-end {
    margin-top: var(--tk-space-20);
  }
  .invite-complete {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--tk-space-24) var(--tk-space-12) var(--tk-space-12);
    border-top: var(--tk-size-1) solid #e6dfeb;
    text-align: center;
    position: relative;
    margin-top: var(--tk-space-28);
  }
  .completion-mark {
    width: var(--tk-size-32);
    height: var(--tk-size-32);
    border-radius: var(--tk-relative-50-percent);
    background: #eee7f6;
    color: #694695;
    display: grid;
    place-items: center;
    position: absolute;
    top: calc(var(--tk-size-16) * -1);
    left: calc(var(--tk-relative-50-percent) - var(--tk-size-16));
    font-weight: var(--tk-weight-bold);
  }
  .completed-avatars {
    display: flex;
    justify-content: center;
    margin: var(--tk-space-12) var(--tk-space-0);
  }
  .completed-avatars .avatar {
    border: var(--tk-size-3) solid white;
    width: var(--tk-size-48);
    height: var(--tk-size-48);
    background: #d8c3ec;
    color: #49355d;
  }
  .completed-avatars .avatar + .avatar {
    margin-left: calc(var(--tk-space-8) * -1);
  }
  .completed-avatars .avatar:nth-child(2) {
    background: #efd0bd;
    color: #542c1d;
  }
  .completed-avatars .avatar:nth-child(3) {
    background: #dce2ee;
    color: #324461;
  }
  .completed-names {
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-bold);
    line-height: var(--tk-leading-body);
  }
  .invite-complete > p {
    font-size: var(--tk-type-label);
    color: #586171;
    margin-top: var(--tk-space-8);
  }
  .invites-complete .invite-card {
    border-color: #b59bcc;
  }
  .invites-complete .demo-connection span {
    font-size: var(--tk-type-label);
  }
  .invites-complete .friend-card h3 {
    font-size: var(--tk-type-title);
  }
  .invites-complete .demo-button {
    font-size: var(--tk-type-label);
  }
  .build-choice-note {
    border-top: var(--tk-size-1) solid #cbd1da;
    margin-top: var(--tk-space-56);
    padding-top: var(--tk-space-32);
    display: flex;
    gap: var(--tk-space-48);
    justify-content: space-between;
    align-items: center;
  }
  .build-choice-note > div {
    max-width: var(--tk-size-680);
  }
  .build-choice-note .eyebrow {
    font-size: var(--tk-type-label);
    margin-bottom: var(--tk-space-16);
  }
  .build-choice-note h3 {
    font-size: var(--tk-type-title);
    line-height: var(--tk-leading-heading);
  }
  .build-choice-note p:not(.eyebrow) {
    color: var(--muted);
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
    margin-top: var(--tk-space-16);
  }
  .build-choice-note > .inline-link {
    flex-shrink: 0;
    font-size: var(--tk-type-label);
  }
  .build-choice-hero h1 {
    font-size: var(--tk-type-display-sm);
    max-width: var(--tk-size-1140);
  }
  .build-choice-hero > .choice-foot {
    font-size: var(--tk-type-label) !important;
    margin-top: var(--tk-space-20) !important;
  }
  .choice-diagram {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: var(--tk-size-1) solid #d4c6e1;
    border-radius: var(--tk-size-8);
    overflow: hidden;
  }
  .choice-visible {
    background: var(--navy);
    color: #fff;
    padding: var(--tk-space-48);
  }
  .choice-visible .eyebrow {
    color: #d9c8ed;
    font-size: var(--tk-type-label);
  }
  .choice-link {
    display: block;
    font-family: monospace;
    overflow-wrap: anywhere;
    font-size: var(--tk-type-body);
    background: #2b3a52;
    border: var(--tk-size-1) solid #647089;
    border-radius: var(--tk-size-4);
    padding: var(--tk-space-20);
  }
  .choice-visible > p {
    font-size: var(--tk-type-label);
    color: #d1d8e5;
    margin-top: var(--tk-space-24);
  }
  .choice-underneath {
    padding: var(--tk-space-40);
    background: #f4f0f8;
  }
  .choice-underneath .eyebrow {
    font-size: var(--tk-type-label);
  }
  .choice-underneath ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tk-space-8);
    list-style: none;
    padding: var(--tk-space-0);
    margin: var(--tk-space-20) var(--tk-space-0) var(--tk-space-28);
  }
  .choice-underneath li {
    background: #fff;
    border: var(--tk-size-1) solid #d0c2df;
    padding: var(--tk-space-8) var(--tk-space-12);
    font-size: var(--tk-type-label);
    border-radius: var(--tk-size-4);
  }
  .choice-engine {
    display: flex;
    gap: var(--tk-space-24);
    align-items: center;
    border-top: var(--tk-size-1) solid #d0c2df;
    padding-top: var(--tk-space-24);
    font-size: var(--tk-type-label);
    color: var(--muted);
  }
  .choice-engine img {
    width: var(--tk-size-116);
    height: auto;
  }
  .comparison-table {
    border-top: var(--tk-size-1) solid var(--line);
  }
  .comparison-table th {
    width: var(--tk-relative-24-percent);
    background: #f4f6f8;
  }
  .comparison-table td {
    width: var(--tk-relative-38-percent);
    font-size: var(--tk-type-label);
  }
  .comparison-table thead th {
    font-size: var(--tk-type-label);
  }
  .comparison-table th:last-child,
  .comparison-table td:last-child {
    background: #f7f3fb;
  }
  .ownership-section {
    background: var(--cream);
    margin-bottom: var(--tk-space-96);
  }
  .ownership-section .section-heading h2 {
    font-size: var(--tk-type-heading);
  }
  .choice-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tk-space-56);
  }
  .choice-options article {
    border-top: var(--tk-size-1) solid #d7cbbf;
    padding-top: var(--tk-space-24);
  }
  .choice-options h3 {
    font-size: var(--tk-type-lead);
  }
  .choice-options p {
    color: var(--muted);
    margin-top: var(--tk-space-20);
    line-height: var(--tk-leading-prose);
  }
  .choice-try h2 {
    font-size: var(--tk-type-heading);
  }
  .choice-try > p:not(.eyebrow) {
    font-size: var(--tk-type-body);
    color: var(--muted);
    max-width: var(--tk-size-760);
    margin-top: var(--tk-space-24);
  }
  .choice-try .button {
    margin-top: var(--tk-space-28);
  }
  .choice-try .inline-link {
    margin-left: var(--tk-space-24);
    font-size: var(--tk-type-label);
  }
  @media (max-width: 1100px) {
    .connection-rail {
      grid-template-columns: 1fr;
    }
    .connection-rail .connection-item {
      padding: var(--tk-space-16) var(--tk-space-20);
    }
    .connection-rail .connection-item + .connection-item {
      border-left: 0;
      border-top: var(--tk-size-1) solid var(--line);
    }
    .connection-rail .connection-main > button {
      margin-left: auto;
    }
    .build-choice-note {
      display: block;
    }
    .build-choice-note > .inline-link {
      margin-top: var(--tk-space-20);
    }
    .choice-diagram {
      grid-template-columns: 1fr;
    }
    .choice-options {
      gap: var(--tk-space-36);
    }
  }
  @media (max-width: 640px) {
    .connection-list {
      grid-template-columns: 1fr;
    }
    .connection-main > button {
      min-height: var(--tk-size-44);
    }
    .connection-main h3 {
      font-size: var(--tk-type-body);
    }
    .connection-main > div > span {
      font-size: var(--tk-type-label);
    }
    .connection-item details {
      font-size: var(--tk-type-label);
    }
    .connection-item summary {
      min-height: var(--tk-size-44);
    }
    .agent-section {
      padding-block: var(--tk-space-64);
    }
    .connection-rail .connection-item {
      padding: var(--tk-space-16);
    }
    .choice-visible,
    .choice-underneath {
      padding: var(--tk-space-28);
    }
    .choice-link {
      font-size: var(--tk-type-label);
      padding: var(--tk-space-16);
    }
    .choice-engine {
      flex-wrap: wrap;
      gap: var(--tk-space-16);
    }
    .comparison-table table,
    .comparison-table tbody {
      display: block;
    }
    .comparison-table thead {
      position: absolute;
      width: var(--tk-size-1);
      height: var(--tk-size-1);
      overflow: hidden;
      clip-path: inset(var(--tk-relative-50-percent));
    }
    .comparison-table tr {
      display: block;
      border-bottom: var(--tk-size-1) solid var(--line);
      padding-bottom: var(--tk-space-20);
    }
    .comparison-table th,
    .comparison-table td {
      display: block;
      width: var(--tk-relative-100-percent);
      border: 0;
    }
    .comparison-table th {
      font-size: var(--tk-type-label);
      padding: var(--tk-space-20);
      background: #fff;
    }
    .comparison-table td {
      padding: var(--tk-space-16) var(--tk-space-20);
      font-size: var(--tk-type-label);
    }
    .comparison-table td:before {
      content: attr(data-label);
      font-size: var(--tk-type-label);
      font-weight: var(--tk-weight-bold);
      display: block;
      color: #5c3b86;
      margin-bottom: var(--tk-space-8);
    }
    .choice-options {
      grid-template-columns: 1fr;
    }
    .ownership-section {
      margin-bottom: var(--tk-space-64);
    }
    .ownership-section .section-heading h2 {
      font-size: var(--tk-type-heading-sm);
    }
    .choice-try h2 {
      font-size: var(--tk-type-heading-sm);
    }
    .choice-try > p:not(.eyebrow) {
      font-size: var(--tk-type-label);
    }
    .choice-try .inline-link {
      margin: var(--tk-space-20) var(--tk-space-0) var(--tk-space-0);
      display: flex;
      width: fit-content;
    }
    .build-choice-note {
      margin-top: var(--tk-space-36);
      padding-top: var(--tk-space-24);
    }
    .build-choice-note h3 {
      font-size: var(--tk-type-lead);
    }
    .invites-complete .friend-card h3 {
      font-size: var(--tk-type-title);
    }
    .build-choice-hero h1 {
      font-size: var(--tk-type-heading-sm);
    }
  }
  @media (max-width: 360px) {
    .connection-main {
      gap: var(--tk-space-12);
    }
    .connection-mark {
      width: var(--tk-size-36);
      height: var(--tk-size-36);
      font-size: var(--tk-type-label);
    }
    .connection-main > button {
      padding-inline: var(--tk-space-8);
      gap: var(--tk-space-4);
    }
    .connection-rail .connection-main h3 {
      font-size: var(--tk-type-label);
    }
    .connection-main h3 {
      font-size: var(--tk-type-label);
    }
    .build-choice-hero h1 {
      font-size: var(--tk-type-heading-sm);
    }
    .choice-visible,
    .choice-underneath {
      padding: var(--tk-space-20);
    }
    .choice-link {
      font-size: var(--tk-type-label);
    }
  }

  /* Official YC mark: a supporting credential, linked to Talkable’s profile. */
  .yc-logo {
    display: inline-block;
    width: var(--tk-size-24);
    height: var(--tk-size-24);
    flex-shrink: 0;
    vertical-align: middle;
  }
  .yc-wordmark {
    display: flex;
    align-items: center;
    gap: var(--tk-space-12);
  }
  .yc-wordmark img {
    width: var(--tk-size-36);
    height: var(--tk-size-36);
    flex-shrink: 0;
  }
  .footer-top.expanded-footer a.yc-credential {
    display: inline-flex;
    align-items: center;
    gap: var(--tk-space-8);
    padding: var(--tk-space-8) var(--tk-space-0);
    min-height: var(--tk-size-52);
    overflow-wrap: normal;
    color: #fff;
    margin-top: var(--tk-space-4);
    width: fit-content;
  }
  .yc-credential img {
    width: var(--tk-size-28);
    height: var(--tk-size-28);
    flex-shrink: 0;
  }
  .yc-credential > span {
    display: flex;
    flex-direction: column;
    gap: var(--tk-space-0);
  }
  .yc-credential small {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-heading);
    color: #c5cddd;
  }
  .yc-credential strong {
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-bold);
    line-height: var(--tk-leading-body);
  }
  .yc-credential:hover strong {
    text-decoration: underline;
    text-underline-offset: var(--tk-size-4);
  }
  .closing h2 {
    text-wrap: balance;
  }
  .closing-inner > p:not(.eyebrow) {
    max-width: var(--tk-size-512);
  }
  @media (max-width: 520px) {
    .yc-wordmark {
      font-size: var(--tk-type-title);
    }
    .yc-wordmark img {
      width: var(--tk-size-32);
      height: var(--tk-size-32);
    }
    .closing-inner > p:not(.eyebrow) {
      max-width: var(--tk-size-312);
    }
  }

  .footer-credential > span {
    display: block;
  }
}