@layer components {
  /* 9.3 — finish the approved Talkable composition; keep its layout and palette. */
  :root {
    --purple: var(--tk-color-purple);
    --accent-ink: #7650a9;
    --copy-action: var(--orange);
    --copy-action-hover: var(--orange);
    --copy-icon-gap: var(--tk-size-12);
  }
  .header-inner {
    height: var(--tk-size-84);
  }
  .brand {
    gap: var(--tk-space-16);
  }
  .brand > span {
    border: 0;
    padding: var(--tk-space-0);
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-bold);
    letter-spacing: var(--tk-tracking-tight);
    color: #cbd3df;
  }
  #site-nav {
    font-size: var(--tk-type-label);
    gap: var(--tk-space-28);
  }
  #site-nav > a {
    font-weight: var(--tk-weight-bold);
  }
  #site-nav .nav-cta {
    background: var(--orange);
    border: 0;
    border-radius: var(--tk-size-8);
    color: #152037;
    padding: var(--tk-space-12) var(--tk-space-20) !important;
    gap: var(--copy-icon-gap);
    justify-content: center;
    text-decoration: none;
    transition:
      background 0.16s,
      box-shadow 0.16s;
  }
  #site-nav .nav-cta:hover {
    background: #ff663b;
    box-shadow: 0 0 0 var(--tk-size-3) #fc501e22;
  }
  .page-history .site-header .brand > span {
    color: inherit;
    opacity: 0.76;
  }
  .page-history .site-header .nav-cta {
    border: 0;
    background: var(--orange);
    color: #152037;
  }
  .hero {
    padding: var(--tk-space-64) var(--tk-space-0) var(--tk-space-64);
  }
  .hero h1 {
    letter-spacing: var(--tk-tracking-tight);
  }
  .hero-accent {
    margin-left: var(--tk-relative-0-04-em);
  }
  .hero-description {
    margin-top: var(--tk-space-28);
    margin-bottom: var(--tk-space-32);
  }
  /* A fine star-shaped glint, with a steady source and a slowly breathing halo. */
  .hero .release-dot {
    position: relative;
    isolation: isolate;
    flex-shrink: 0;
    width: var(--tk-size-8);
    height: var(--tk-size-8);
    background: none;
    box-shadow: none;
    opacity: 1;
    animation: none;
  }
  .hero .release-dot::before {
    content: '';
    position: absolute;
    inset: var(--tk-size-2);
    border-radius: var(--tk-relative-50-percent);
    background: #95e8b3;
    filter: blur(var(--tk-size-0-3));
    opacity: 0.9;
    pointer-events: none;
  }
  .hero .release-dot::after {
    content: '';
    position: absolute;
    inset: calc(var(--tk-size-2) * -1);
    border-radius: var(--tk-relative-50-percent);
    background: #6be99b;
    filter: blur(var(--tk-size-4));
    opacity: 0.3;
    animation: release-light 4.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    pointer-events: none;
  }
  @keyframes release-light {
    0%,
    100% {
      opacity: 0.18;
    }
    48% {
      opacity: 0.52;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero .release-dot::after {
      animation: none;
      opacity: 0.3;
    }
  }
  .prompt-box {
    max-width: var(--tk-size-680);
    background: #fff;
    color: var(--navy);
    border: 0;
    border-radius: var(--tk-size-12);
    box-shadow: 0 var(--tk-size-16) var(--tk-size-44) #080f2026;
    overflow: hidden;
    --focus-color: #7650a9;
  }
  .prompt-top {
    padding: var(--tk-space-24) var(--tk-space-28) var(--tk-space-0);
    border: 0;
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-bold);
    color: #586171;
  }
  .prompt-availability {
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-regular);
    color: #586171;
  }
  .prompt-readable {
    padding: var(--tk-space-16) var(--tk-space-28) var(--tk-space-24);
    color: var(--navy);
    font-size: var(--tk-type-body);
    line-height: var(--tk-leading-body);
    letter-spacing: var(--tk-tracking-tight);
  }
  .prompt-actions {
    padding: var(--tk-space-0) var(--tk-space-28);
    gap: var(--tk-space-24);
    align-items: center;
  }
  .prompt-actions .button {
    min-height: var(--tk-size-48);
    font-size: var(--tk-type-label);
    border-radius: var(--tk-size-8);
    padding: var(--tk-space-12) var(--tk-space-20);
    gap: var(--copy-icon-gap);
  }
  .prompt-detail {
    flex: 0 1 auto;
    min-width: 0;
  }
  .prompt-detail summary {
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-bold);
    min-height: var(--tk-size-44);
    gap: var(--tk-space-8);
    color: var(--navy);
    text-decoration: none;
    list-style: none;
  }
  .prompt-detail summary::-webkit-details-marker {
    display: none;
  }
  .prompt-detail summary:before,
  .prompt-detail[open] summary:before {
    content: none;
  }
  .prompt-detail summary svg {
    transition: transform 0.16s;
  }
  .prompt-detail[open] summary svg {
    transform: rotate(180deg);
  }
  .prompt-detail summary:hover {
    text-decoration: underline;
    text-underline-offset: var(--tk-size-4);
  }
  .prompt-detail[open] {
    flex-basis: var(--tk-relative-100-percent);
    order: 2;
    margin-top: calc(var(--tk-space-4) * -1);
  }
  .prompt-full p {
    color: #39465b;
    background: #f4f6f8;
    border: 0;
    padding: var(--tk-space-16);
    border-radius: var(--tk-size-8);
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
    margin-top: var(--tk-space-8);
  }
  .prompt-foot {
    font-size: var(--tk-type-label);
    padding: var(--tk-space-16) var(--tk-space-28) var(--tk-space-24);
    color: #586171;
  }
  .hero-notes {
    margin-top: var(--tk-space-20);
  }
  .button {
    border-radius: var(--tk-size-8);
  }
  .button svg {
    width: var(--tk-size-20);
    height: var(--tk-size-20);
  }
  .experience-stage {
    border: var(--tk-size-1) solid #e9e0d7;
    border-radius: var(--tk-size-16);
    background: var(--cream);
  }
  .demo-toolbar {
    height: var(--tk-size-64);
    padding: var(--tk-space-0) var(--tk-space-32);
    font-size: var(--tk-type-label);
    letter-spacing: var(--tk-tracking-tight);
    border-color: #e4dacf;
  }
  .demo-toolbar > div {
    gap: var(--tk-space-12);
  }
  .demo-toolbar > div > svg {
    color: #6e567f;
    width: var(--tk-size-20);
    height: var(--tk-size-20);
  }
  .demo-product {
    border: 0;
    margin: var(--tk-space-0);
    padding-left: var(--tk-space-12);
    font-size: var(--tk-type-label);
    color: #6a6470;
  }
  .demo-badge {
    border: 0;
    background: transparent;
    padding: var(--tk-space-0);
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-regular);
    color: #6a6470;
  }
  .demo-grid {
    grid-template-columns: 1fr var(--tk-size-76) 1fr;
    align-items: stretch;
    padding: var(--tk-space-36) var(--tk-space-40) var(--tk-space-32);
  }
  .invite-card {
    padding: var(--tk-space-28);
    border-color: #e6e4e8;
    border-radius: var(--tk-size-12);
    box-shadow: 0 var(--tk-size-12) var(--tk-size-32) #3a2e2710;
    min-height: var(--tk-size-412);
  }
  .card-topline {
    margin-bottom: var(--tk-space-24);
    font-size: var(--tk-type-label);
    gap: var(--tk-space-12);
  }
  .card-topline .avatar {
    width: var(--tk-size-36);
    height: var(--tk-size-36);
    font-size: var(--tk-type-label);
  }
  .invite-card h3 {
    font-size: var(--tk-type-title);
    line-height: var(--tk-leading-display);
    letter-spacing: var(--tk-tracking-tight);
    scroll-margin-top: var(--tk-space-112);
  }
  .invite-card h3:focus {
    outline: none;
  }
  .invite-card h3:focus-visible {
    outline: var(--tk-size-2) solid #7650a9;
    outline-offset: var(--tk-size-8);
    border-radius: var(--tk-size-3);
  }
  .invite-card > p {
    font-size: var(--tk-type-label);
  }
  .invite-count {
    margin: var(--tk-space-24) var(--tk-space-0) var(--tk-space-20);
    padding-top: var(--tk-space-20);
  }
  .invite-count > strong {
    font-size: var(--tk-type-heading-sm);
    font-weight: var(--tk-weight-bold);
  }
  .invite-count b {
    font-size: var(--tk-type-label);
  }
  .invite-count span {
    font-size: var(--tk-type-label);
  }
  .invite-dots {
    gap: var(--tk-space-4);
  }
  .invite-dots i {
    height: var(--tk-size-8);
    width: var(--tk-size-20);
    border-radius: var(--tk-size-3);
  }
  .demo-link {
    border-radius: var(--tk-size-8);
    background: #f4f6f8;
    border-color: #e1e5ec;
    padding-left: var(--tk-space-12);
    min-height: var(--tk-size-48);
  }
  .demo-link > span {
    font-size: var(--tk-type-label);
    letter-spacing: var(--tk-tracking-tight);
  }
  .demo-link button {
    min-height: var(--tk-size-48);
  }
  .code-row {
    margin-top: var(--tk-space-8);
    font-size: var(--tk-type-label);
  }
  .demo-connection {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    gap: var(--tk-space-8);
    color: #6a587b;
  }
  .demo-connection:before {
    content: '';
    position: absolute;
    top: var(--tk-relative-50-percent);
    left: 0;
    width: var(--tk-relative-100-percent);
    height: var(--tk-size-1);
    background: #d4c5df;
    z-index: 0;
  }
  .demo-connection .connection-symbol {
    display: grid;
    place-items: center;
    width: var(--tk-size-36);
    height: var(--tk-size-36);
    border-radius: var(--tk-relative-50-percent);
    background: #fff;
    border: var(--tk-size-1) solid #ddcfe7;
    position: relative;
    z-index: 1;
  }
  .connection-symbol svg {
    width: var(--tk-size-20);
    height: var(--tk-size-20);
  }
  .connection-caption {
    position: absolute;
    top: calc(var(--tk-relative-50-percent) + var(--tk-size-24));
    font-size: var(--tk-type-label) !important;
    line-height: var(--tk-leading-body);
    white-space: nowrap;
  }
  .friend-side {
    display: flex;
  }
  .friend-card {
    width: var(--tk-relative-100-percent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #eee4f7;
    border: var(--tk-size-1) solid #dac9e8;
    transform: none !important;
    border-radius: var(--tk-size-12);
    padding: var(--tk-space-28);
    min-height: var(--tk-size-412);
    box-shadow: 0 var(--tk-size-12) var(--tk-size-32) #3a2e2708;
  }
  .tiny-title {
    font-size: var(--tk-type-label);
    letter-spacing: var(--tk-tracking-wide);
  }
  .friend-avatars {
    margin: var(--tk-space-20) var(--tk-space-0) var(--tk-space-16);
  }
  .friend-avatars .avatar {
    width: var(--tk-size-48);
    height: var(--tk-size-48);
    border-color: #eee4f7;
    font-size: var(--tk-type-label);
  }
  .friend-card h3,
  .invites-complete .friend-card h3 {
    font-size: var(--tk-type-title);
    line-height: var(--tk-leading-display);
    letter-spacing: var(--tk-tracking-tight);
  }
  .friend-card > p {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    max-width: var(--tk-size-272);
  }
  .friend-card .demo-helper {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    max-width: var(--tk-relative-100-percent);
    margin-top: var(--tk-space-12);
    color: #655370;
  }
  .demo-button {
    min-height: var(--tk-size-48);
    border-radius: var(--tk-size-8);
    margin-top: var(--tk-space-20);
    font-size: var(--tk-type-label);
    gap: var(--tk-space-12);
  }
  .demo-receipt {
    min-height: var(--tk-size-72);
    padding: var(--tk-space-12) var(--tk-space-28);
    gap: var(--tk-space-12);
    border-top: var(--tk-size-1) solid #e4dacf;
    background: #fffaf4;
    font-size: var(--tk-type-label);
  }
  .receipt-mark {
    display: grid;
    place-items: center;
    color: #7650a9;
  }
  .receipt-mark svg {
    width: var(--tk-size-20);
    height: var(--tk-size-20);
  }
  .demo-receipt .text-button {
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-regular);
  }
  .figure-note {
    font-size: var(--tk-type-label);
  }
  .invite-complete {
    margin-top: var(--tk-space-24);
    padding-top: var(--tk-space-24);
  }
  .completed-names {
    font-size: var(--tk-type-label);
  }
  .invite-complete > p {
    font-size: var(--tk-type-label);
  }
  .experience-stage.just-redeemed .friend-card {
    animation: invite-received 0.25s ease-out;
  }
  @keyframes invite-received {
    from {
      opacity: 0.6;
    }
    to {
      opacity: 1;
    }
  }
  .engine-diagram {
    grid-template-columns: 1fr 1fr;
    overflow: visible;
    border-radius: var(--tk-size-8);
  }
  .engine-node {
    min-height: var(--tk-size-220);
    padding: var(--tk-space-36) var(--tk-space-48);
  }
  .engine-node:first-child {
    border-radius: var(--tk-size-8) 0 0 var(--tk-size-8);
  }
  .engine-plus {
    position: absolute;
    left: var(--tk-relative-50-percent);
    top: var(--tk-relative-50-percent);
    transform: translate(
      calc(var(--tk-relative-50-percent) * -1),
      calc(var(--tk-relative-50-percent) * -1)
    );
    width: var(--tk-size-48);
    height: var(--tk-size-48);
    margin: var(--tk-space-0);
    padding: var(--tk-space-0);
    display: grid;
    place-items: center;
    line-height: var(--tk-leading-display);
  }
  .engine-plus svg {
    display: block;
    width: var(--tk-size-24);
    height: var(--tk-size-24);
  }
  .platform-section h2 span {
    color: var(--accent-ink);
  }
  .story-teaser {
    background: #8c60c7;
  }
  .story-window.middle .yc-logo {
    float: left;
    margin: var(--tk-space-0) var(--tk-space-8) var(--tk-space-0) var(--tk-space-0);
    width: var(--tk-size-24);
    height: var(--tk-size-24);
  }
  .story-window.middle p {
    min-height: var(--tk-size-24);
    line-height: var(--tk-leading-label);
  }
  .story-window.middle strong {
    clear: both;
  }
  .story-window.middle strong span {
    display: none;
  }
  .proof {
    padding-top: var(--tk-space-40);
    padding-bottom: var(--tk-space-40);
  }
  .proof-label {
    font-size: var(--tk-type-label);
    color: var(--muted);
    margin-bottom: var(--tk-space-16);
  }
  .proof-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--tk-space-40);
  }
  .proof-link {
    display: flex;
    align-items: center;
    gap: var(--tk-space-16);
    min-width: 0;
    padding: var(--tk-space-16) var(--tk-space-0);
    border-top: var(--tk-size-1) solid var(--line);
  }
  .proof-link > span {
    flex: 1;
    min-width: 0;
  }
  .proof-link strong {
    display: block;
    font-size: var(--tk-type-body);
    line-height: var(--tk-leading-heading);
    letter-spacing: var(--tk-tracking-tight);
  }
  .proof-link small {
    display: block;
    margin-top: var(--tk-space-4);
    font-size: var(--tk-type-label);
    color: var(--muted);
    overflow-wrap: anywhere;
    line-height: var(--tk-leading-body);
  }
  .proof-link > svg {
    width: var(--tk-size-20);
    height: var(--tk-size-20);
    transition: transform 0.16s;
  }
  .proof-link:hover strong {
    text-decoration: underline;
    text-underline-offset: var(--tk-size-4);
  }
  .proof-link:hover > svg {
    transform: translateX(var(--tk-size-3));
  }
  .proof-link > img {
    width: var(--tk-size-28);
    height: var(--tk-size-28);
  }
  .closing {
    padding-block: var(--tk-space-96);
  }
  .closing h2 {
    max-width: var(--tk-size-760);
  }
  .closing-inner > p:not(.eyebrow) {
    max-width: var(--tk-size-600);
  }
  .closing .button {
    margin-top: var(--tk-space-28);
  }
  .closing .inline-link {
    font-size: var(--tk-type-label);
  }
  .closing:before,
  .closing:after {
    content: none;
  }
  .expanded-footer {
    gap: var(--tk-space-36);
  }
  .footer-top.expanded-footer h2 {
    font-size: var(--tk-type-label);
    letter-spacing: var(--tk-tracking-wide);
    margin-bottom: var(--tk-space-16);
    color: #cbd3df;
  }
  .footer-top.expanded-footer a:not(.brand):not(.yc-credential) {
    font-size: var(--tk-type-label);
    min-height: var(--tk-size-40);
    padding: var(--tk-space-8) var(--tk-space-0);
  }
  .footer-bottom {
    gap: var(--tk-space-28);
    align-items: start;
  }
  .footer-bottom > p {
    padding-top: var(--tk-space-4);
    white-space: nowrap;
  }
  .footer-bottom .legal-links {
    gap: var(--tk-space-16) var(--tk-space-28);
  }
  .footer-bottom .legal-link {
    display: flex;
    flex-direction: column;
    gap: var(--tk-space-4);
    line-height: var(--tk-leading-body);
    text-decoration: none;
    min-height: var(--tk-size-44);
  }
  .legal-link > span {
    color: #e3e8f0;
    font-size: var(--tk-type-label);
  }
  .legal-link > small {
    font-size: var(--tk-type-label);
    color: #b8c2d2;
    overflow-wrap: anywhere;
  }
  .legal-link:hover > span {
    text-decoration: underline;
    text-underline-offset: var(--tk-size-4);
  }
  /* Keep the intro readable independently of the active scroll theme. */
  .page-history .history-intro {
    background: #fff;
    color: var(--navy);
  }
  .history-intro > p:not(.eyebrow) {
    color: #586171;
  }
  .history-intro h1 span {
    color: #7650a9;
  }
  @media (max-width: 1024px) {
    #site-nav {
      gap: var(--tk-space-20);
    }
    .demo-grid {
      padding: var(--tk-space-28);
      grid-template-columns: 1fr var(--tk-size-52) 1fr;
    }
    .invite-card,
    .friend-card {
      padding: var(--tk-space-24);
    }
    .demo-link > span {
      font-size: var(--tk-type-label);
    }
    .connection-caption {
      display: none;
    }
  }
  @media (max-width: 1024px) {
    .header-inner {
      height: var(--tk-size-72);
    }
    .brand > span {
      font-size: var(--tk-type-label);
    }
    .menu-toggle {
      font-weight: var(--tk-weight-bold);
    }
    #site-nav .nav-cta {
      justify-content: center;
      margin-top: var(--tk-space-8);
    }
    .hero {
      padding-top: var(--tk-space-48);
      padding-bottom: var(--tk-space-48);
    }
    .demo-grid {
      grid-template-columns: 1fr;
      gap: var(--tk-space-12);
      padding: var(--tk-space-28);
    }
    .invite-card,
    .friend-card {
      min-height: 0;
    }
    .friend-side {
      display: block;
    }
    .demo-connection {
      min-height: var(--tk-size-36);
      flex-direction: row;
      gap: var(--tk-space-8);
    }
    .demo-connection:before {
      display: none;
    }
    .connection-caption {
      display: block;
      position: static;
      font-size: var(--tk-type-label) !important;
    }
    .engine-diagram {
      grid-template-columns: 1fr;
    }
    .engine-diagram:before {
      width: var(--tk-relative-100-percent);
      height: var(--tk-relative-50-percent);
      bottom: auto;
    }
    .engine-node {
      min-height: var(--tk-size-180);
      padding: var(--tk-space-28);
      align-items: center;
      text-align: center;
    }
    .engine-node:first-child {
      border-radius: var(--tk-size-8) var(--tk-size-8) 0 0;
    }
    .engine-plus {
      top: var(--tk-relative-50-percent);
    }
    .proof-links {
      gap: var(--tk-space-24);
    }
    .proof-link strong {
      font-size: var(--tk-type-label);
    }
    .closing {
      padding-block: var(--tk-space-72);
    }
    .footer-bottom {
      flex-direction: column;
      gap: var(--tk-space-20);
    }
    .footer-bottom .legal-links {
      width: var(--tk-relative-100-percent);
      justify-content: space-between;
    }
  }
  @media (max-width: 520px) {
    .header-inner {
      width: calc(var(--tk-relative-100-percent) - var(--tk-size-40));
    }
    .brand {
      gap: var(--tk-space-12);
    }
    .brand img {
      width: var(--tk-size-120);
    }
    .brand > span {
      font-size: var(--tk-type-label);
    }
    .hero {
      padding-top: var(--tk-space-40);
    }
    .hero h1 {
      letter-spacing: var(--tk-tracking-tight);
    }
    .hero-description {
      font-size: var(--tk-type-label);
      margin-top: var(--tk-space-24);
      margin-bottom: var(--tk-space-28);
    }
    .prompt-top {
      padding: var(--tk-space-20) var(--tk-space-20) var(--tk-space-0);
      gap: var(--tk-space-12);
      font-size: var(--tk-type-label);
    }
    .prompt-availability {
      font-size: var(--tk-type-label);
    }
    .prompt-readable {
      padding: var(--tk-space-16) var(--tk-space-20) var(--tk-space-20);
      font-size: var(--tk-type-label);
      line-height: var(--tk-leading-body);
    }
    .prompt-readable br {
      display: none;
    }
    .prompt-actions {
      padding: var(--tk-space-0) var(--tk-space-20);
      gap: var(--tk-space-12);
      display: grid;
      grid-template-columns: 1fr;
    }
    .prompt-actions .button {
      width: var(--tk-relative-100-percent);
      font-size: var(--tk-type-label);
      min-height: var(--tk-size-48);
    }
    .prompt-detail {
      justify-self: center;
      width: var(--tk-relative-100-percent);
    }
    .prompt-detail summary {
      justify-content: center;
      font-size: var(--tk-type-label);
    }
    .prompt-detail[open] {
      margin: var(--tk-space-0);
    }
    .prompt-foot {
      font-size: var(--tk-type-label);
      padding: var(--tk-space-8) var(--tk-space-20) var(--tk-space-20);
      text-align: center;
    }
    .hero-notes {
      font-size: var(--tk-type-label);
      gap: var(--tk-space-8);
      margin-top: var(--tk-space-20);
    }
    .hero-notes a {
      font-size: var(--tk-type-label);
    }
    .hero-notes .yc-logo {
      width: var(--tk-size-20);
      height: var(--tk-size-20);
    }
    .demo-toolbar {
      height: var(--tk-size-56);
      padding: var(--tk-space-0) var(--tk-space-20);
      gap: var(--tk-space-8);
      font-size: var(--tk-type-label);
    }
    .demo-product {
      display: none;
    }
    .demo-badge {
      font-size: var(--tk-type-label);
    }
    .demo-grid {
      padding: var(--tk-space-20) var(--tk-space-20);
      gap: var(--tk-space-12);
    }
    .invite-card,
    .friend-card {
      padding: var(--tk-space-24) var(--tk-space-20);
    }
    .invite-card h3,
    .friend-card h3,
    .invites-complete .friend-card h3 {
      font-size: var(--tk-type-title);
    }
    .card-topline {
      margin-bottom: var(--tk-space-20);
    }
    .invite-count {
      margin-top: var(--tk-space-20);
      padding-top: var(--tk-space-16);
    }
    .invite-card > p {
      font-size: var(--tk-type-label);
    }
    .demo-link > span {
      font-size: var(--tk-type-label);
    }
    .friend-card {
      min-height: var(--tk-size-356);
    }
    .demo-button {
      margin-top: var(--tk-space-20);
    }
    .demo-receipt {
      padding: var(--tk-space-12) var(--tk-space-20);
      display: grid;
      grid-template-columns: var(--tk-size-20) 1fr;
      gap: var(--tk-space-8) var(--tk-space-8);
      font-size: var(--tk-type-label);
    }
    .demo-receipt #reset-demo {
      grid-column: 2;
      justify-self: start;
      margin: var(--tk-space-0);
      padding: var(--tk-space-4) var(--tk-space-0);
      min-height: var(--tk-size-36);
    }
    .figure-note {
      font-size: var(--tk-type-label);
    }
    .platform-section .section-heading {
      gap: var(--tk-space-28);
    }
    .engine-node {
      min-height: var(--tk-size-176);
      padding: var(--tk-space-24);
    }
    .engine-node h3 {
      font-size: var(--tk-type-label);
      margin-top: var(--tk-space-16);
    }
    .engine-node p {
      font-size: var(--tk-type-label);
    }
    .engine-plus {
      width: var(--tk-size-44);
      height: var(--tk-size-44);
    }
    .engine-plus svg {
      width: var(--tk-size-20);
      height: var(--tk-size-20);
    }
    .proof {
      padding-block: var(--tk-space-28);
    }
    .proof-label {
      font-size: var(--tk-type-label);
      margin-bottom: var(--tk-space-8);
    }
    .proof-links {
      grid-template-columns: 1fr;
      gap: var(--tk-space-0);
    }
    .proof-link {
      padding: var(--tk-space-16) var(--tk-space-0);
      gap: var(--tk-space-12);
      min-height: var(--tk-size-80);
    }
    .proof-link strong {
      font-size: var(--tk-type-label);
    }
    .proof-link small {
      font-size: var(--tk-type-label);
    }
    .proof-link > img {
      width: var(--tk-size-24);
      height: var(--tk-size-24);
    }
    .closing {
      padding-block: var(--tk-space-64);
    }
    .closing h2 {
      font-size: var(--tk-type-heading-sm);
      max-width: var(--tk-size-360);
    }
    .closing-inner > p:not(.eyebrow) {
      font-size: var(--tk-type-label);
      max-width: var(--tk-size-332);
    }
    .closing .button {
      margin-top: var(--tk-space-24);
    }
    .closing .inline-link {
      font-size: var(--tk-type-label);
    }
    .footer-top.expanded-footer {
      grid-template-columns: 1fr 1fr;
      gap: var(--tk-space-28) var(--tk-space-20);
      padding-block: var(--tk-space-40);
    }
    .footer-brand {
      grid-column: 1/-1;
    }
    .footer-agents {
      grid-column: 1/-1;
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: var(--tk-space-20);
    }
    .footer-agents h2 {
      grid-column: 1/-1;
      margin-bottom: var(--tk-space-8) !important;
    }
    .footer-top.expanded-footer a:not(.brand):not(.yc-credential) {
      font-size: var(--tk-type-label);
      min-height: var(--tk-size-40);
    }
    .footer-credential {
      margin-top: var(--tk-space-16);
    }
    .footer-bottom .legal-links {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--tk-space-16);
    }
    .footer-bottom .legal-link small {
      font-size: var(--tk-type-label);
    }
    .footer-bottom {
      padding-block: var(--tk-space-24);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .experience-stage.just-redeemed .friend-card {
      animation: none;
    }
    .proof-link > svg,
    .prompt-detail summary svg {
      transition: none;
    }
  }

  /* The visible prompt is the exact text copied, without a second disclosure. */
  .prompt-readable {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
    overflow-wrap: anywhere;
  }
  .prompt-foot {
    padding-top: var(--tk-space-16);
  }
  .prompt-actions {
    display: flex;
  }
  .prompt-actions .button {
    min-width: var(--tk-size-184);
  }
  @media (max-width: 520px) {
    .prompt-readable {
      font-size: var(--tk-type-label);
      line-height: var(--tk-leading-prose);
    }
    .prompt-actions .button {
      width: var(--tk-relative-100-percent);
    }
    .prompt-foot {
      padding-top: var(--tk-space-12);
    }
  }

  .prompt-url {
    font-size: var(--tk-type-label);
    text-decoration: underline;
    text-decoration-color: #aeb7c5;
    text-underline-offset: var(--tk-size-3);
  }
  .prompt-url:hover {
    text-decoration-color: currentColor;
  }
  @media (max-width: 520px) {
    .prompt-url {
      font-size: var(--tk-type-label);
    }
  }

  /* Copy confirmation belongs to its action, with space reserved to avoid jumps. */
  .prompt-copy-control {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tk-space-8) var(--tk-space-12);
    max-width: var(--tk-relative-100-percent);
    vertical-align: middle;
  }
  .copy-feedback {
    display: inline-block;
    min-width: var(--tk-size-100);
    min-height: var(--tk-size-20);
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-label);
    color: inherit;
    white-space: nowrap;
  }
  .closing .prompt-copy-control {
    margin-top: var(--tk-space-28);
  }
  .closing .prompt-copy-control .button {
    margin: var(--tk-space-0);
  }
  .era-agents .prompt-copy-control {
    margin-top: var(--tk-space-28);
  }
  .era-agents .prompt-copy-control .button {
    margin: var(--tk-space-0);
  }
  .footer-bottom .legal-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tk-space-12) var(--tk-space-28);
  }
  .footer-bottom .legal-link {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    min-height: var(--tk-size-44);
    font-size: var(--tk-type-label);
    color: #e3e8f0;
  }
  .footer-bottom .legal-link:hover {
    text-decoration: underline;
    text-underline-offset: var(--tk-size-4);
  }
  @media (max-width: 520px) {
    .prompt-actions .prompt-copy-control {
      width: var(--tk-relative-100-percent);
      justify-content: center;
      row-gap: var(--tk-space-8);
    }
    .closing .prompt-copy-control {
      margin-top: var(--tk-space-24);
    }
    .footer-bottom .legal-links {
      display: flex;
      justify-content: flex-start;
      gap: var(--tk-space-8) var(--tk-space-24);
    }
  }

  .footer-bottom {
    align-items: center;
  }
  .footer-bottom > p {
    padding-top: var(--tk-space-0);
  }
  @media (max-width: 1024px) {
    .footer-bottom {
      align-items: flex-start;
      gap: var(--tk-space-12);
    }
  }

  .copy-feedback {
    display: grid;
    width: var(--tk-size-260);
    max-width: var(--tk-relative-100-percent);
    min-width: 0;
    white-space: normal;
  }
  .copy-feedback::before {
    content: 'Prompt copied. Paste it into your agent.';
    visibility: hidden;
    grid-area: 1/1;
  }
  .copy-feedback-message {
    grid-area: 1/1;
  }
  .footer-bottom .legal-links {
    justify-content: flex-end;
  }
  @media (max-width: 1024px) {
    .footer-bottom .legal-links {
      justify-content: flex-start;
    }
  }

  /* A single typed request, framed like the coding-agent surface it belongs in. */
  .agent-terminal {
    background: #131f32;
    color: #f5f7fb;
    border: var(--tk-size-1) solid #40506a;
    box-shadow: 0 var(--tk-size-20) var(--tk-size-44) #080f2033;
    --focus-color: #d0b7ed;
  }
  .agent-terminal .prompt-top {
    padding: var(--tk-space-16) var(--tk-space-24);
    border-bottom: var(--tk-size-1) solid #36445b;
    background: #1b2a41;
    color: #e1e7f1;
    font-size: var(--tk-type-label);
  }
  .terminal-window-dots {
    display: inline-flex;
    gap: var(--tk-space-4);
    margin-right: var(--tk-space-0);
  }
  .terminal-window-dots i {
    width: var(--tk-size-8);
    height: var(--tk-size-8);
    background: #76859d;
    border-radius: var(--tk-relative-50-percent);
  }
  .agent-terminal .prompt-availability {
    color: #c3cddd;
    font-size: var(--tk-type-label);
  }
  .agent-terminal .prompt-readable {
    padding: var(--tk-space-24) var(--tk-space-28) var(--tk-space-20);
    color: #e1e7f1;
  }
  .terminal-command {
    display: grid;
    position: relative;
    padding-left: var(--tk-space-24);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
    letter-spacing: var(--tk-tracking-tight);
    color: #fff;
  }
  .terminal-command::before {
    content: attr(data-command) ' ';
    visibility: hidden;
    grid-area: 1/1;
    padding-right: var(--tk-space-8);
    white-space: pre-wrap;
  }
  .terminal-render {
    grid-area: 1/1;
    min-width: 0;
    overflow-wrap: normal;
  }
  .terminal-prompt-mark {
    position: absolute;
    top: 0;
    left: 0;
    color: #ff875e;
    font-size: var(--tk-type-body);
    line-height: var(--tk-leading-heading);
  }
  .terminal-cursor {
    display: inline-block;
    width: var(--tk-size-8);
    height: var(--tk-relative-1-05-em);
    background: #fc734c;
    vertical-align: calc(var(--tk-relative-0-16-em) * -1);
    margin-left: var(--tk-space-0);
    opacity: 0;
  }
  .terminal-command .terminal-cursor {
    opacity: 1;
    animation: terminal-caret 1.1s steps(1, end) infinite;
  }
  .agent-terminal:has(.terminal-playback[data-paused='true']) .terminal-cursor {
    animation: none;
    opacity: 1;
  }
  .terminal-guidance {
    display: block;
    margin-top: var(--tk-space-16);
    color: #c0ccdd;
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
    letter-spacing: var(--tk-tracking-normal);
  }
  .agent-terminal .prompt-url {
    font-size: inherit;
    text-decoration-color: #7889a5;
  }
  .agent-terminal .prompt-foot {
    color: #b7c5d8;
  }
  .agent-terminal .copy-feedback {
    color: #d8e2ef;
  }
  .sr-only {
    position: absolute !important;
    width: var(--tk-size-1);
    height: var(--tk-size-1);
    padding: var(--tk-space-0);
    margin: calc(var(--tk-space-0) * -1);
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  @keyframes terminal-caret {
    0%,
    49% {
      opacity: 1;
    }
    50%,
    100% {
      opacity: 0;
    }
  }
  @media (max-width: 520px) {
    .agent-terminal .prompt-top {
      padding: var(--tk-space-16) var(--tk-space-20);
      font-size: var(--tk-type-label);
      gap: var(--tk-space-8);
    }
    .agent-terminal .prompt-top > span:first-child {
      gap: var(--tk-space-8);
    }
    .agent-terminal .prompt-availability {
      font-size: var(--tk-type-label);
    }
    .agent-terminal .prompt-readable {
      padding: var(--tk-space-24) var(--tk-space-20) var(--tk-space-20);
    }
    .terminal-command {
      font-size: var(--tk-type-label);
      padding-left: var(--tk-space-20);
      line-height: var(--tk-leading-body);
    }
    .terminal-prompt-mark {
      font-size: var(--tk-type-body);
    }
    .terminal-guidance {
      font-size: var(--tk-type-label);
      line-height: var(--tk-leading-prose);
      margin-top: var(--tk-space-16);
    }
    .terminal-window-dots {
      gap: var(--tk-space-4);
    }
    .terminal-window-dots i {
      width: var(--tk-size-4);
      height: var(--tk-size-4);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .terminal-cursor {
      animation: none !important;
      opacity: 1 !important;
    }
  }

  .terminal-window-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--tk-space-12);
    flex-shrink: 0;
  }
  .terminal-playback {
    display: inline-grid;
    place-items: center;
    width: var(--tk-size-32);
    height: var(--tk-size-32);
    padding: var(--tk-space-0);
    border: 0;
    border-radius: var(--tk-size-4);
    color: #c3cddd;
    background: transparent;
    cursor: pointer;
    margin-block: calc(var(--tk-space-8) * -1);
  }
  .terminal-playback:hover {
    background: #314159;
    color: #fff;
  }
  .terminal-playback[hidden] {
    display: none;
  }
  .terminal-playback .terminal-play-icon {
    display: none;
  }
  .terminal-playback[data-paused='true'] .terminal-play-icon {
    display: block;
  }
  .terminal-playback[data-paused='true'] .terminal-pause-icon {
    display: none;
  }
  @media (max-width: 520px) {
    .terminal-window-actions {
      gap: var(--tk-space-4);
    }
    .terminal-playback {
      width: var(--tk-size-28);
      height: var(--tk-size-32);
    }
  }
  @media (max-width: 360px) {
    .terminal-window-dots {
      display: none;
    }
    .agent-terminal .prompt-top {
      padding-inline: var(--tk-space-16);
    }
  }

  /* 9.5: preserve the composition; clarify the invitation's value and finish details. */
  .hero {
    min-height: calc(var(--tk-relative-100-svh) - var(--tk-size-84));
    display: grid;
    align-content: center;
  }
  .invite-rationale p {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
    color: var(--muted);
  }
  .invite-rationale p + p {
    margin-top: var(--tk-space-16);
  }
  .invite-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--tk-space-36);
    margin: var(--tk-space-0) var(--tk-space-0) var(--tk-space-48);
  }
  .invite-benefits article {
    border-top: var(--tk-size-1) solid var(--line);
    padding-top: var(--tk-space-20);
  }
  .invite-benefits h3 {
    font-size: var(--tk-type-body);
    line-height: var(--tk-leading-heading);
    letter-spacing: var(--tk-tracking-tight);
    margin-bottom: var(--tk-space-12);
  }
  .invite-benefits p {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
    color: var(--muted);
  }
  .engine-diagram {
    overflow: hidden;
  }
  .engine-diagram:before {
    border-radius: inherit;
  }
  .engine-node h3 {
    max-width: var(--tk-size-340);
  }
  .story-teaser h2,
  .story-teaser h2 > span {
    color: #fff;
  }
  .faq-list ul {
    padding-left: var(--tk-space-20);
    margin: var(--tk-space-16) var(--tk-space-0) var(--tk-space-24);
    color: var(--muted);
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
  }
  .faq-list li + li {
    margin-top: var(--tk-space-8);
  }
  .faq-list p > a {
    text-decoration: underline;
    text-underline-offset: var(--tk-size-4);
  }
  .prompt-copy-control {
    display: inline-block;
    position: relative;
    vertical-align: top;
    padding-bottom: var(--tk-space-36);
  }
  .copy-feedback {
    display: block;
    position: absolute;
    top: calc(var(--tk-relative-100-percent) - var(--tk-size-32));
    left: 0;
    width: var(--tk-size-284);
    max-width: calc(var(--tk-relative-100-vw) - var(--tk-size-80));
    min-height: 0;
    line-height: var(--tk-leading-label);
    font-size: var(--tk-type-label);
    white-space: normal;
  }
  .copy-feedback::before {
    content: none;
  }
  .copy-feedback-message {
    display: block;
  }
  .agent-terminal .prompt-actions {
    padding-bottom: var(--tk-space-16);
  }
  .closing-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--tk-space-16) var(--tk-space-28);
    margin-top: var(--tk-space-28);
  }
  .closing-actions .prompt-copy-control {
    margin: var(--tk-space-0);
  }
  .closing-actions .inline-link {
    margin: var(--tk-space-12) var(--tk-space-0) var(--tk-space-0);
  }
  @media (max-width: 1024px) {
    .hero {
      min-height: calc(var(--tk-relative-100-svh) - var(--tk-size-72));
    }
    .invite-benefits {
      gap: var(--tk-space-24);
    }
    .invite-benefits h3 {
      font-size: var(--tk-type-body);
    }
    .engine-diagram:before {
      border-radius: 0;
    }
  }
  @media (max-width: 640px) {
    .invite-benefits {
      grid-template-columns: 1fr;
      gap: var(--tk-space-24);
      margin-bottom: var(--tk-space-32);
    }
    .invite-benefits article {
      padding-top: var(--tk-space-20);
    }
    .invite-benefits h3 {
      font-size: var(--tk-type-body);
      margin-bottom: var(--tk-space-8);
    }
    .invite-rationale p {
      font-size: var(--tk-type-label);
    }
    .invite-benefits p {
      font-size: var(--tk-type-label);
    }
    .faq-list ul {
      font-size: var(--tk-type-label);
    }
    .closing-actions {
      gap: var(--tk-space-4);
    }
    .closing-actions .inline-link {
      margin: var(--tk-space-4) var(--tk-space-0) var(--tk-space-0);
    }
  }
  @media (max-width: 520px) {
    .agent-terminal .copy-feedback {
      width: var(--tk-relative-100-percent);
      text-align: center;
    }
    .agent-terminal .prompt-actions {
      padding-bottom: var(--tk-space-8);
    }
    .copy-feedback {
      max-width: calc(var(--tk-relative-100-vw) - var(--tk-size-64));
    }
  }
  .menu-icon {
    display: block;
    flex-shrink: 0;
  }
  .menu-icon path {
    transform-origin: var(--tk-size-12) var(--tk-size-12);
    transition: transform 0.16s ease;
  }
  .menu-line-top {
    transform: translateY(calc(var(--tk-size-4) * -1));
  }
  .menu-line-bottom {
    transform: translateY(var(--tk-size-4));
  }
  .menu-toggle[aria-expanded='true'] .menu-line-top {
    transform: rotate(45deg);
  }
  .menu-toggle[aria-expanded='true'] .menu-line-bottom {
    transform: rotate(-45deg);
  }
  @media (prefers-reduced-motion: reduce) {
    .menu-icon path {
      transition: none;
    }
  }
  /* The hero copy action is the start CTA; center it below the readable prompt. */
  .agent-terminal .prompt-actions {
    justify-content: center;
    text-align: center;
  }
  .agent-terminal .prompt-copy-control {
    width: auto;
  }
  .agent-terminal .copy-feedback {
    left: var(--tk-relative-50-percent);
    transform: translateX(calc(var(--tk-relative-50-percent) * -1));
    width: var(--tk-size-300);
    max-width: calc(var(--tk-relative-100-vw) - var(--tk-size-84));
    text-align: center;
  }
  @media (max-width: 520px) {
    .agent-terminal .prompt-copy-control {
      width: var(--tk-relative-100-percent);
    }
    .agent-terminal .copy-feedback {
      width: var(--tk-relative-100-percent);
      max-width: var(--tk-relative-100-percent);
    }
  }

  /* 9.6: copy-led refinement of the same composition. */
  .agent-terminal {
    max-width: var(--tk-size-600);
  }
  .agent-terminal .prompt-readable {
    padding-top: var(--tk-space-28);
    padding-bottom: var(--tk-space-24);
  }
  .agent-terminal .terminal-command {
    width: auto;
    max-width: none;
    margin: var(--tk-space-0);
    text-align: left;
  }
  .agent-terminal .copy-feedback {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-label);
  }
  .agent-terminal .prompt-actions {
    padding-bottom: var(--tk-space-16);
  }

  @media (min-width: 520px) {
    .agent-terminal .terminal-command {
      font-size: var(--tk-type-body);
    }
  }
  /* Keep the builder's payoff calm and continuous with the supporting copy. */
  .platform-section .section-heading p.builder-focus {
    margin-top: var(--tk-space-20);
    color: var(--navy);
    font-size: var(--tk-type-body);
    line-height: var(--tk-leading-body);
    letter-spacing: var(--tk-tracking-tight);
    font-weight: var(--tk-weight-regular);
    text-wrap: balance;
  }
  /* Source disclosures must not re-center the artwork when the text column grows. */
  .era-grid {
    align-items: start;
  }
  .agent-story-card .agent-story-top {
    height: var(--tk-size-24);
    font-size: var(--tk-type-label);
    letter-spacing: var(--tk-tracking-wide);
  }
  .agent-story-top > .story-window-dots {
    display: flex;
    gap: var(--tk-space-4);
  }
  .story-window-dots i {
    display: block;
    width: var(--tk-size-4);
    height: var(--tk-size-4);
    border-radius: var(--tk-relative-50-percent);
    background: #8593a9;
  }
  .agent-story-card > p.story-terminal-command {
    display: flex;
    gap: var(--tk-space-12);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
    letter-spacing: var(--tk-tracking-tight);
    text-wrap: initial;
    margin: var(--tk-space-24) calc(var(--tk-space-12) * -1) var(--tk-space-28);
    padding: var(--tk-space-20) var(--tk-space-16);
    background: #142237;
    border: var(--tk-size-1) solid #46546d;
    border-radius: var(--tk-size-8);
  }
  .story-command-mark {
    color: var(--orange);
    font-size: var(--tk-type-lead);
    line-height: var(--tk-leading-heading);
  }
  .story-command-cursor {
    display: inline-block;
    vertical-align: calc(var(--tk-relative-0-08-em) * -1);
    width: var(--tk-size-8);
    height: var(--tk-relative-1-05-em);
    margin-left: var(--tk-space-4);
    background: #ee8967;
  }
  .agent-story-flow {
    gap: var(--tk-space-0);
  }
  .story-agent-node {
    display: flex;
    align-items: center;
    gap: var(--tk-space-12);
    padding: var(--tk-space-12) var(--tk-space-16);
    border: var(--tk-size-1) solid #59647d;
    border-radius: var(--tk-size-8);
    background: #213047;
    min-width: var(--tk-size-224);
  }
  .story-agent-icon {
    display: grid;
    place-items: center;
    width: var(--tk-size-40);
    height: var(--tk-size-40);
    border-radius: var(--tk-size-8);
    color: #d6b9ee;
    background: #3b405b;
  }
  .story-agent-node strong,
  .story-agent-node small {
    display: block;
  }
  .story-agent-node strong {
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-bold);
    letter-spacing: var(--tk-tracking-tight);
  }
  .story-agent-node small {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    color: #c2cbda;
    margin-top: var(--tk-space-4);
  }
  .agent-story-flow > .story-flow-line {
    display: block;
    height: var(--tk-size-32);
    width: var(--tk-size-1);
    position: relative;
    background: #9c86b6;
    margin: var(--tk-space-8) var(--tk-space-0);
  }
  .story-flow-line::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: calc(var(--tk-size-3) * -1);
    width: var(--tk-size-8);
    height: var(--tk-size-8);
    border-right: var(--tk-size-1) solid #9c86b6;
    border-bottom: var(--tk-size-1) solid #9c86b6;
    transform: rotate(45deg);
  }
  .story-platform-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tk-space-8);
    padding: var(--tk-space-4) var(--tk-space-0);
  }
  .story-platform-node > span {
    font-size: var(--tk-type-label);
    color: #c2cbda;
  }
  .story-people-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tk-space-20);
    width: var(--tk-relative-100-percent);
    padding: var(--tk-space-16) var(--tk-space-0) var(--tk-space-0);
  }
  .story-people-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--tk-space-12);
  }
  .story-people-group strong {
    font-size: var(--tk-type-label);
    font-weight: var(--tk-weight-bold);
    letter-spacing: var(--tk-tracking-normal);
    white-space: nowrap;
  }
  .story-avatar-group {
    display: flex;
    padding-left: var(--tk-space-8);
  }
  .story-avatar-group svg {
    width: var(--tk-size-36);
    height: var(--tk-size-36);
    border-radius: var(--tk-relative-50-percent);
    border: var(--tk-size-2) solid #26354d;
    background: #b1a0cc;
    color: #71608a;
    fill: currentColor;
    margin-left: calc(var(--tk-space-8) * -1);
    padding: var(--tk-space-4) var(--tk-space-4) var(--tk-space-0);
  }
  .story-avatar-group svg:nth-child(2) {
    background: #cbd8d5;
    color: #778c8c;
  }
  .story-avatar-group.new-members svg:first-child {
    background: #edc6a9;
    color: #a67d65;
  }
  .story-avatar-group.new-members svg:nth-child(3) {
    background: #bdc9e1;
    color: #7f8cab;
  }
  .story-people-connector {
    align-self: flex-start;
    width: var(--tk-size-44);
    margin-top: var(--tk-space-8);
    color: #b69bcf;
  }
  .story-people-connector svg {
    display: block;
    width: var(--tk-relative-100-percent);
    height: var(--tk-size-24);
  }
  .agent-story-bottom {
    margin-top: var(--tk-space-24);
  }
  .retro-title {
    align-items: center;
  }
  .retro-window-controls {
    display: flex;
    align-items: center;
    gap: var(--tk-space-4);
    height: var(--tk-size-20);
  }
  .retro-window-controls svg {
    display: block;
    width: var(--tk-size-16);
    height: var(--tk-size-16);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.3;
    stroke-linecap: square;
  }
  .retro-content {
    padding-bottom: var(--tk-space-28);
  }
  @media (max-width: 520px) {
    .platform-section .section-heading p.builder-focus {
      font-size: var(--tk-type-body);
      margin-top: var(--tk-space-20);
    }
    .agent-story-card > p.story-terminal-command {
      font-size: var(--tk-type-label);
      margin: var(--tk-space-20) calc(var(--tk-space-8) * -1) var(--tk-space-24);
      padding: var(--tk-space-16) var(--tk-space-12);
      gap: var(--tk-space-8);
    }
    .agent-story-card .agent-story-top {
      font-size: var(--tk-type-label);
    }
    .story-agent-node {
      min-width: 0;
      width: var(--tk-relative-100-percent);
      max-width: var(--tk-size-240);
      padding: var(--tk-space-12);
    }
    .story-agent-node strong {
      font-size: var(--tk-type-label);
    }
    .story-people-flow {
      gap: var(--tk-space-12);
    }
    .story-avatar-group svg {
      width: var(--tk-size-32);
      height: var(--tk-size-32);
    }
    .story-people-connector {
      width: var(--tk-size-28);
    }
    .story-people-group strong {
      font-size: var(--tk-type-label);
    }
  }

  /* Successive waves of invitations, using the established people illustration. */
  .story-growth {
    width: var(--tk-relative-100-percent);
    max-width: var(--tk-size-420);
    margin: var(--tk-space-4) auto var(--tk-space-0);
    position: relative;
  }
  .growth-root-label {
    display: block;
    text-align: center;
    color: #d4dceb;
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    margin-bottom: var(--tk-space-8);
  }
  .growth-network {
    display: block;
    width: var(--tk-relative-100-percent);
    height: auto;
    overflow: visible;
  }
  .growth-enhanced .growth-level {
    opacity: 0;
  }
  .growth-enhanced .growth-links path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
  }
  .growth-active .growth-level {
    animation: growth-people 0.55s ease-out var(--wave-delay) both;
  }
  .growth-active .growth-links path {
    animation: growth-connection 0.8s ease-out var(--wave-delay) both;
  }
  @keyframes growth-people {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes growth-connection {
    from {
      stroke-dashoffset: 1;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  .agent-story-flow:has(.story-growth) + .agent-story-bottom {
    margin-top: var(--tk-space-8);
  }
  @media (prefers-reduced-motion: reduce) {
    .story-growth .growth-level {
      opacity: 1;
      animation: none;
    }
    .story-growth .growth-links path {
      stroke-dashoffset: 0;
      animation: none;
    }
  }

  /* Underlines identify the current page and inline reading links, not arrow CTAs. */
  #site-nav a:hover {
    text-decoration: none;
  }
  #site-nav .nav-current,
  #site-nav .nav-current:hover,
  #site-nav a[aria-current='page'],
  #site-nav a[aria-current='page']:hover {
    text-decoration: underline;
    text-underline-offset: var(--tk-size-8);
  }
  .inline-link {
    border-bottom: 0;
  }
  .story-art,
  .story-art * {
    cursor: pointer;
  }

  /* Company details stay quiet and useful in the existing footer. */
  .footer-bottom .footer-company {
    display: block;
    line-height: var(--tk-leading-prose);
  }
  .footer-company p {
    margin: var(--tk-space-0);
    font-size: var(--tk-type-label);
  }
  .footer-company address {
    font-style: normal;
    font-size: var(--tk-type-label);
    color: #b2bed0;
    margin-top: var(--tk-space-8);
  }
  .footer-company address span {
    display: block;
  }
  .footer-bottom .legal-links {
    gap: var(--tk-space-8) var(--tk-space-24);
  }

  /* Match Talkable's Inter supporting-copy hierarchy; keep small UI text subordinate. */
  .hero-description {
    font-size: var(--tk-type-body);
    line-height: var(--tk-leading-body);
    letter-spacing: var(--tk-tracking-tight);
    max-width: var(--tk-size-940);
    color: #d9dee7;
  }
  .hero-notes,
  .hero-notes a {
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    letter-spacing: var(--tk-tracking-tight);
  }
  .closing-inner > p:not(.eyebrow) {
    font-size: var(--tk-type-body);
    line-height: var(--tk-leading-body);
    letter-spacing: var(--tk-tracking-tight);
  }
  .agent-terminal .prompt-availability {
    display: inline-flex;
    align-items: center;
    padding: var(--tk-space-4) var(--tk-space-8);
    border-radius: var(--tk-size-4);
    background: #d0b7ed12;
    box-shadow: inset 0 0 0 var(--tk-size-1) #d0b7ed26;
    color: #e0d1f0;
    white-space: nowrap;
    line-height: var(--tk-leading-body);
  }
  /* Section boundaries meet the sticky header exactly. Docs keeps its own reading offset. */
  html:not(:has(.docs-shell)) {
    scroll-padding-top: var(--tk-space-80);
  }
  .page-home main > section[id] {
    scroll-margin-top: var(--tk-space-0);
  }
  @media (max-width: 1024px) {
    html:not(:has(.docs-shell)) {
      scroll-padding-top: var(--tk-space-72);
    }
  }
  /* Commands use ordinary word wrapping, never balanced text or a forced phrase block. */
  .agent-story-card > p.story-terminal-command {
    font-size: var(--tk-type-label);
    letter-spacing: var(--tk-tracking-normal);
    text-align: left;
    white-space: normal;
    text-wrap: wrap;
    overflow-wrap: normal;
  }
  .story-terminal-command > span:last-child {
    min-width: 0;
  }
  .story-command-mark {
    flex-shrink: 0;
  }
  .story-command-cursor {
    width: var(--tk-size-8);
  }
  /* Align the action labels to the same button-height row; helper text is below it. */
  .closing-actions {
    display: flex;
    align-items: flex-start;
    column-gap: var(--tk-space-24);
    row-gap: var(--tk-space-12);
  }
  .closing-actions .inline-link {
    min-height: var(--tk-size-56);
    margin: var(--tk-space-0);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: var(--tk-leading-body);
  }
  .closing-actions .button {
    margin-top: var(--tk-space-0);
    min-height: var(--tk-size-56);
  }
  .closing-actions .prompt-copy-control {
    padding-bottom: var(--tk-space-48);
  }
  .closing-actions .copy-feedback {
    top: calc(var(--tk-relative-100-percent) - var(--tk-size-40));
    width: var(--tk-size-252);
  }
  @media (max-width: 1024px) {
    .hero-description {
      font-size: var(--tk-type-body);
    }
    .hero-notes,
    .hero-notes a {
      font-size: var(--tk-type-label);
    }
  }
  @media (max-width: 640px) {
    .closing-actions {
      flex-direction: column;
      align-items: center;
      gap: var(--tk-space-0);
    }
    .closing-actions .prompt-copy-control {
      width: var(--tk-relative-100-percent);
      max-width: var(--tk-size-300);
      text-align: center;
    }
    .closing-actions .button {
      width: var(--tk-relative-100-percent);
    }
    .closing-actions .copy-feedback {
      width: var(--tk-relative-100-percent);
      max-width: var(--tk-relative-100-percent);
    }
    .closing-actions .inline-link {
      margin: var(--tk-space-0);
      max-width: var(--tk-relative-100-percent);
      min-height: var(--tk-size-48);
    }
  }
  @media (max-width: 520px) {
    .hero-description {
      font-size: var(--tk-type-label);
      line-height: var(--tk-leading-body);
    }
    .hero-notes,
    .hero-notes a {
      font-size: var(--tk-type-label);
    }
    .closing-inner > p:not(.eyebrow) {
      font-size: var(--tk-type-label);
    }
    .agent-story-card > p.story-terminal-command {
      font-size: var(--tk-type-label);
      line-height: var(--tk-leading-prose);
    }
    .agent-terminal .prompt-availability {
      padding: var(--tk-space-4) var(--tk-space-4);
    }
    .terminal-window-actions {
      gap: var(--tk-space-4);
    }
  }

  .story-command-word {
    white-space: nowrap;
  }
  .era-agents .era-copy {
    container-type: inline-size;
  }
  @container (max-width: 520px) {
    .closing-actions {
      flex-direction: column;
      align-items: center;
      gap: var(--tk-space-0);
    }
    .closing-actions .prompt-copy-control {
      width: var(--tk-relative-100-percent);
      max-width: var(--tk-size-300);
      text-align: center;
    }
    .closing-actions .button {
      width: var(--tk-relative-100-percent);
    }
    .closing-actions .copy-feedback {
      width: var(--tk-relative-100-percent);
      max-width: var(--tk-relative-100-percent);
    }
    .closing-actions .inline-link {
      margin: var(--tk-space-0);
      max-width: var(--tk-relative-100-percent);
      min-height: var(--tk-size-48);
    }
  }
  @media (max-width: 360px) {
    .agent-story-card > p.story-terminal-command {
      padding-inline: var(--tk-space-8);
      gap: var(--tk-space-4);
      font-size: var(--tk-type-label);
    }
    .story-command-cursor {
      width: var(--tk-size-4);
      margin-left: var(--tk-space-0);
    }
  }

  /* Bring the section content closer to its boundary below the sticky header. */
  .page-home #experience,
  .page-home #story {
    padding-top: clamp(var(--tk-space-40), var(--tk-relative-4-5-vw), var(--tk-space-64));
  }
  .experience .section-heading {
    align-items: start;
  }
  .page-history .history-intro {
    padding-top: clamp(var(--tk-space-40), var(--tk-relative-4-vw), var(--tk-space-56));
  }
  .story-teaser h2 > span {
    display: block;
    margin-top: var(--tk-space-20);
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-heading);
    letter-spacing: var(--tk-tracking-tight);
  }

  /* Reuse the invite-flow illustration alongside the existing platform copy. */
  .platform-overview .platform-copy > p:not(.eyebrow) {
    margin-top: var(--tk-space-24);
  }
  .platform-section .platform-overview {
    column-gap: clamp(var(--tk-space-28), var(--tk-relative-4-5-vw), var(--tk-space-64));
  }
  .platform-overview .agent-story-card {
    color: #fff;
    min-width: 0;
    align-self: center;
  }
  .platform-overview .agent-story-card > p.story-terminal-command {
    color: #fff;
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-prose);
    max-width: none;
  }
  .platform-overview .agent-story-card .story-terminal-command {
    margin-top: var(--tk-space-24);
  }
  .platform-overview .story-agent-node {
    text-align: left;
  }
  @media (width > 1024px) {
    .platform-section .platform-overview {
      grid-template-columns: 1fr 1fr;
    }
  }

  /* Commands wrap at word boundaries, like the hero; never make visitors scroll a sentence. */
  .story-command-text {
    display: block;
    min-width: 0;
    white-space: normal;
    text-wrap: wrap;
    overflow-wrap: normal;
    padding-bottom: var(--tk-space-4);
  }
  .story-command-mark {
    flex-shrink: 0;
  }
  @media (max-width: 1024px) {
    .platform-overview .agent-story-card {
      width: var(--tk-relative-100-percent);
      max-width: var(--tk-size-540);
      justify-self: center;
      margin-top: var(--tk-space-16);
    }
  }
  @media (max-width: 520px) {
    .platform-overview .agent-story-card > p.story-terminal-command {
      font-size: var(--tk-type-label);
    }
    .story-teaser h2 > span {
      margin-top: var(--tk-space-16);
      font-size: var(--tk-type-label);
    }
  }
  /* A light illustration belongs in the white platform section; its command remains dark. */
  .platform-overview .agent-story-card {
    background: #f5f3f8;
    color: var(--navy);
    border-color: #dfd9e7;
    box-shadow: 0 var(--tk-size-16) var(--tk-size-40) #1c294010;
  }
  .platform-overview .agent-story-top {
    color: #79658d;
  }
  .platform-overview .story-window-dots i {
    background: #a4aabb;
  }
  .platform-overview .story-terminal-command {
    border-color: #36465e;
  }
  .platform-overview .story-agent-node {
    background: #fff;
    border-color: #dbd5e4;
  }
  .platform-overview .story-agent-icon {
    background: #eee7f5;
    color: #7650a9;
  }
  .platform-overview .story-agent-node small,
  .platform-overview .story-platform-node > span,
  .platform-overview .growth-root-label,
  .platform-overview .agent-story-bottom {
    color: #5f687a;
  }
  .platform-overview .growth-level > g > circle {
    stroke: #f5f3f8;
  }
  .platform-overview .growth-links:not(.growth-burst) path {
    stroke: #9c7bb7;
  }

  /* Copy actions stay in place and confirm inline, without changing button color. */
  .header-copy-control {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
  }
  #site-nav .nav-cta {
    font-size: inherit;
    line-height: var(--tk-leading-label);
    min-height: var(--tk-size-48);
    white-space: nowrap;
  }
  .header-copy-control > .copy-feedback-message {
    position: absolute;
    top: calc(var(--tk-relative-100-percent) + var(--tk-size-2));
    right: 0;
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-label);
    white-space: nowrap;
    color: inherit;
    opacity: 0.85;
  }
  .terminal-copy-control {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  .terminal-copy-button {
    display: grid;
    place-items: center;
    width: var(--tk-size-44);
    height: var(--tk-size-44);
    padding: var(--tk-space-0);
    background: transparent;
    color: #b9c4d6;
    border-radius: var(--tk-size-4);
    transition:
      background 0.15s,
      color 0.15s;
  }
  .terminal-copy-button:hover {
    color: #fff;
    background: #ffffff0d;
  }
  .terminal-copy-control > .copy-feedback-message {
    position: absolute;
    top: calc(var(--tk-relative-100-percent) - var(--tk-size-1));
    left: var(--tk-relative-50-percent);
    transform: translateX(calc(var(--tk-relative-50-percent) * -1));
    color: #d9dfe8;
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    font-weight: var(--tk-weight-regular);
    font-family: Inter, Arial, sans-serif;
    white-space: nowrap;
  }
  .agent-story-card > p.story-terminal-command {
    align-items: flex-start;
    gap: var(--tk-space-8);
    padding-block: var(--tk-space-12);
    padding-right: var(--tk-space-8);
  }
  .story-command-text {
    flex: 1;
    padding-bottom: var(--tk-space-0);
  }
  .story-command-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    font-size: var(--tk-type-body);
    line-height: var(--tk-leading-display);
    width: var(--tk-size-12);
  }
  .platform-section .platform-overview .platform-copy > p.platform-responsibility {
    color: var(--navy);
    font-size: var(--tk-type-body);
    line-height: var(--tk-leading-body);
  }
  .platform-section .platform-overview .platform-copy > p.builder-focus {
    margin-top: var(--tk-space-12);
    text-wrap: pretty;
  }
  @media (max-width: 1024px) {
    .header-copy-control {
      display: flex;
      flex-direction: column;
      padding-bottom: var(--tk-space-16);
    }
    .header-copy-control > .copy-feedback-message {
      top: auto;
      bottom: 0;
      left: 0;
      text-align: center;
      font-size: var(--tk-type-label);
    }
    .terminal-copy-button {
      width: var(--tk-size-44);
    }
    .platform-section .platform-overview .platform-copy > p.platform-responsibility {
      font-size: var(--tk-type-label);
    }
  }

  /* Confirm within the copy action; supporting instructions remain steady. */
  .primary[data-copy-prompt],
  #site-nav .nav-cta[data-copy-prompt] {
    /* Match the main site's white-on-brand-orange primary action. */
    background: var(--copy-action);
    color: #fff;
  }
  .primary[data-copy-prompt]:hover,
  #site-nav .nav-cta[data-copy-prompt]:hover {
    background: var(--copy-action-hover);
  }
  [data-copy-prompt] {
    gap: var(--copy-icon-gap);
  }
  .prompt-copy-control .button[data-copy-prompt] {
    gap: var(--copy-icon-gap);
    justify-content: center;
  }
  [data-copy-prompt] .button-label {
    display: inline-grid;
    text-align: center;
  }
  [data-copy-prompt] .copy-state-icon {
    display: block;
    width: var(--tk-size-20);
    height: var(--tk-size-20);
    flex: 0 0 var(--tk-size-20);
  }
  .button[data-copy-prompt] .copy-state-icon,
  #site-nav .nav-cta[data-copy-prompt] .copy-state-icon {
    /* Optical alignment with Inter's lettering, rather than its full line box. */
    transform: translateY(var(--tk-size-1));
  }
  .header-copy-control > .copy-feedback-message,
  .terminal-copy-control > .copy-feedback-message {
    display: none;
  }
  @media (max-width: 1024px) {
    .header-copy-control {
      padding-bottom: var(--tk-space-0);
    }
  }

  /* Keep the platform section's introduction close to its navigation landing point. */
  .page-home #why-talkable {
    padding-top: clamp(var(--tk-space-40), var(--tk-relative-4-vw), var(--tk-space-56));
  }
  .platform-section .platform-overview {
    margin-bottom: var(--tk-space-32);
  }
  .platform-section .capabilities {
    margin-top: var(--tk-space-32);
  }

  /* JavaScript handles only explicit homepage section links; never stack native easing. */
  html[data-section-navigation] {
    scroll-behavior: auto;
  }

  /* Retain the keyboard handoff without outlining an entire non-interactive section. */
  [data-section-navigation] [data-navigation-focus]:focus {
    outline: none;
  }

  .staging-analytics-notice {
    margin: var(--tk-space-24) var(--tk-space-0) var(--tk-space-0);
    font-size: var(--tk-type-label);
    line-height: var(--tk-leading-body);
    color: inherit;
    opacity: 0.8;
  }
}