@layer components {
  /* Role-based refinements. All type, geometry and spacing come from tokens.css. */
  body {
    font-family: var(--tk-font-body);
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
  }
  .wrap {
    width: min(var(--tk-layout-page), calc(var(--tk-relative-100-percent) - var(--tk-gutter) * 2));
  }
  .hero-inner {
    padding-top: var(--tk-space-64);
    padding-bottom: var(--tk-space-64);
  }
  .hero h1 {
    font-size: var(--tk-type-display);
    line-height: var(--tk-leading-display);
    letter-spacing: var(--tk-tracking-tight);
  }
  .hero-description {
    font-size: var(--tk-type-body);
    line-height: var(--tk-leading-body);
    max-width: var(--tk-layout-prose);
    margin: var(--tk-space-24) auto var(--tk-space-32);
  }
  .hero .agent-terminal {
    max-width: var(--tk-layout-terminal);
  }
  .hero-notes {
    margin-top: var(--tk-space-24);
  }
  .section {
    padding-top: var(--tk-section-space);
    padding-bottom: var(--tk-section-space);
  }
  .section h2 {
    font-size: var(--tk-type-display-sm);
    line-height: var(--tk-leading-display);
  }
  .story-teaser h2 span {
    font-size: var(--tk-type-heading-sm);
  }
  #why-talkable {
    padding-top: var(--tk-space-56);
  }
  .prompt-top {
    gap: var(--tk-space-12);
    padding: var(--tk-space-16) var(--tk-space-24);
  }
  .prompt-top > span:first-child {
    min-width: var(--tk-space-0);
  }
  .prompt-top .terminal-window-dots {
    display: inline-flex;
  }
  .prompt-availability {
    white-space: nowrap;
  }
  .agent-terminal .prompt-readable {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
  }
  .agent-terminal .prompt-actions {
    margin-top: var(--tk-space-24);
  }
  .button,
  .nav-cta,
  .menu-button {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-label);
  }
  :root {
    --copy-icon-gap: var(--tk-space-12);
  }
  .proof-links {
    grid-template-columns: minmax(0, 1fr);
  }
  .proof-link small {
    overflow-wrap: anywhere;
  }
  .site-footer p,
  .footer-legal,
  .footer-contact,
  .site-footer a,
  .site-footer small {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
  }
  .docs-article p,
  .legal-document p {
    max-width: var(--tk-layout-prose);
  }
  .docs-article pre,
  .agent-terminal .terminal-command {
    font-size: var(--tk-type-label);
  }
  @media (max-width: 1024px) {
    .hero h1 {
      font-size: var(--tk-type-display-sm);
    }
    .section h2 {
      font-size: var(--tk-type-heading);
    }
    .header-inner {
      gap: var(--tk-space-16);
    }
  }
  @media (max-width: 520px) {
    .wrap {
      width: calc(var(--tk-relative-100-percent) - var(--tk-gutter-small) * 2);
    }
    .hero-inner {
      padding-top: var(--tk-space-48);
      padding-bottom: var(--tk-space-48);
    }
    .hero h1 {
      font-size: var(--tk-type-heading);
    }
    .section {
      padding-top: var(--tk-section-space-small);
      padding-bottom: var(--tk-section-space-small);
    }
    .section h2 {
      font-size: var(--tk-type-heading-sm);
    }
    .hero-description {
      font-size: var(--tk-type-label);
    }
    .prompt-top {
      padding: var(--tk-space-12);
      gap: var(--tk-space-8);
      flex-wrap: wrap;
    }
    .prompt-top > span:first-child {
      flex: 1 1 auto;
    }
    .terminal-window-actions {
      gap: var(--tk-space-8);
    }
    .agent-terminal .prompt-actions {
      padding-inline: var(--tk-space-16);
    }
    .hero-notes {
      font-size: var(--tk-type-label);
    }
    .story-teaser h2 span {
      font-size: var(--tk-type-title);
    }
  }
  @media (max-width: 520px) {
    .startup-card h3 {
      font-size: var(--tk-type-heading-sm);
    }
    .startup-card {
      padding: var(--tk-space-24);
    }
  }

  /* Include the header border in same-page anchor alignment. */
  html:has(.page-home) {
    scroll-padding-top: calc(var(--tk-size-84) + var(--tk-size-1));
  }
  @media (max-width: 1024px) {
    html:has(.page-home) {
      scroll-padding-top: calc(var(--tk-size-72) + var(--tk-size-1));
    }
  }
  @media (max-width: 520px) {
    .prompt-top .terminal-window-dots {
      display: none;
    }
  }

  .story-layout > div > p:not(.eyebrow) {
    font-size: var(--tk-type-body);
    line-height: var(--tk-leading-body);
  }
  @media (max-width: 520px) {
    .story-layout > div > p:not(.eyebrow) {
      font-size: var(--tk-type-label);
    }
  }

  /* Helpers support the action. Historical heading faces remain intentional. */
  .copy-feedback,
  .copy-feedback-message {
    color: var(--tk-color-helper-light);
  }
  .hero .copy-feedback,
  .hero .copy-feedback-message,
  .era-agents .copy-feedback,
  .era-agents .copy-feedback-message {
    color: var(--tk-color-helper-dark);
  }
  .eyebrow .preserve-case {
    text-transform: none;
  }
  .closing-actions .copy-feedback {
    text-wrap: balance;
  }

  /* Preserve the stacked-card offsets, but let the final card determine caption placement. */
  .story-art {
    padding-top: var(--tk-size-276);
  }
  .story-window.new {
    position: relative;
    top: auto;
  }
  .story-art-caption {
    position: relative;
    display: block;
    bottom: auto;
    margin-top: var(--tk-space-24);
  }
  @media (max-width: 520px) {
    .story-art {
      padding-top: var(--tk-size-236);
    }
  }
}