/* Public site: home, pricing, outbound, articles and legal pages (DESIGN.md, audit M-1 to D-3).
   Components come from ui.css; this file lays pages out. */
body.site {
  background: var(--bg-marketing);
}
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
html {
  scroll-padding-top: calc(var(--topbar) + var(--space-4));
}

/* Header ----------------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-marketing) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(16px);
}
.site-header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: 64px;
}
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text);
  font-size: var(--text-title-3);
  font-weight: var(--weight-display);
  letter-spacing: -0.03em;
  text-decoration: none;
}
.site-brand:hover {
  text-decoration: none;
}
.site-brand img {
  border-radius: var(--radius-md);
}
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.site-nav a {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-ui);
  text-decoration: none;
}
.site-nav a:hover,
.site-nav a[aria-current='page'] {
  color: var(--text);
  background: var(--surface-hover);
}
.site-nav .site-nav-signin,
.site-nav .site-nav-primary {
  display: none;
}
.site-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}
.nav-toggle {
  display: none;
}
@media (max-width: 1023px) {
  .site-header-inner {
    gap: var(--space-3);
  }
  .nav-toggle {
    display: inline-flex;
  }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--gutter) var(--space-4);
    border-bottom: 1px solid var(--border);
    background: var(--bg-marketing);
    box-shadow: var(--shadow-2);
  }
  .site-nav.is-open {
    display: flex;
  }
  .site-nav a {
    padding: var(--space-3);
    font-size: var(--text-body);
  }
}
/* Below 600 px Sign in and the primary action move from the header into the menu. */
@media (max-width: 599px) {
  .site-signin,
  .site-action {
    display: none;
  }
  .site-nav .site-nav-signin {
    display: block;
  }
  .site-nav .site-nav-primary {
    display: flex;
    margin-top: var(--space-2);
    color: var(--on-action);
  }
  .site-nav .site-nav-primary:hover {
    color: var(--on-action);
    background: var(--action-hover);
  }
}

/* Bands and type ------------------------------------------------------------------------------ */
.band {
  padding-block: var(--space-16);
}
@media (min-width: 1024px) {
  .band {
    padding-block: var(--space-24);
  }
}
.band-subtle {
  background: var(--surface-subtle);
}
.night {
  background: var(--surface-night);
  color: var(--text-on-night);
}
.night h1,
.night h2,
.night h3 {
  color: var(--text-on-night);
}
.night p {
  color: var(--text-on-night-muted);
}
.night a:not(.btn) {
  color: var(--accent-on-night);
}
.eyebrow {
  margin-bottom: var(--space-3);
  color: var(--accent);
  font-size: var(--text-micro);
  font-weight: var(--weight-title);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.night .eyebrow {
  color: var(--accent-on-night);
}
.band-heading {
  display: grid;
  gap: var(--space-4);
  max-width: 720px;
  margin-bottom: var(--space-12);
}
.band-heading.centered {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}
.band-heading h2,
.display-2 {
  font-size: var(--text-display-2);
  font-weight: var(--weight-display);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.lead {
  color: var(--text-muted);
  font-size: var(--text-body-lg);
  line-height: 1.6;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--accent);
  font-weight: var(--weight-strong);
}
.text-link .icon {
  width: 16px;
  height: 16px;
  transition: translate var(--duration-fast) var(--ease-out);
}
.text-link:hover .icon {
  translate: 2px 0;
}

/* Hero ----------------------------------------------------------------------------------- */
.hero {
  padding-block: var(--space-16) var(--space-12);
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 1024px) {
  .hero {
    padding-block: var(--space-24) var(--space-16);
  }
  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }
}
.hero-copy {
  display: grid;
  gap: var(--space-6);
  justify-items: start;
}
.hero h1 {
  font-size: var(--text-display-1);
  font-weight: var(--weight-display);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.hero-lead {
  max-width: 34rem;
  font-size: var(--text-body-lg);
  line-height: 1.6;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
.hero-note {
  font-size: var(--text-caption);
}
.announce {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border: 1px solid var(--border-night);
  border-radius: var(--radius-full);
  color: var(--text-on-night);
  font-size: var(--text-caption);
  font-weight: var(--weight-ui);
  text-decoration: none;
}
.announce:hover {
  background: var(--surface-night-raised);
  text-decoration: none;
}
.announce .badge {
  border-color: transparent;
  background: var(--accent-on-night);
  color: var(--surface-night);
}
.night .announce {
  color: var(--text-on-night);
}
.announce .icon {
  width: 14px;
  height: 14px;
}

/* Product illustration: real component styles in a framed example. */
.product-shot {
  position: relative;
  margin: 0;
  border: 1px solid var(--border-night);
  border-radius: var(--radius-xl);
  background: var(--surface-night-raised);
  box-shadow: var(--shadow-3);
  overflow: hidden;
}
.product-shot-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-night);
  color: var(--text-on-night-muted);
  font-size: var(--text-caption);
}
.product-shot-bar .dots {
  display: flex;
  gap: 6px;
  margin-right: var(--space-2);
}
.product-shot-bar .dots span {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--border-night);
}
.product-shot-bar .badge {
  margin-left: auto;
}
.product-shot-body {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
}
.shot-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
}
.shot-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.shot-card-head > div {
  display: grid;
  min-width: 0;
}
.shot-card-head strong {
  font-size: var(--text-body-sm);
}
.shot-card-head .mono {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}
.shot-card-head .badge {
  margin-left: auto;
}
.shot-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--text-caption);
}
.shot-row .direction {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--surface-subtle);
  color: var(--text-muted);
}
.shot-row .direction.inbound {
  background: var(--info-bg);
  color: var(--info-text);
}
.shot-row .direction .icon {
  width: 14px;
  height: 14px;
}
.shot-row > span:nth-child(2) {
  display: grid;
  min-width: 0;
}
.shot-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-strong);
}
.shot-row small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-muted);
}
.shot-caption {
  padding: 0 var(--space-4) var(--space-4);
  color: var(--text-on-night-muted);
  font-size: var(--text-caption);
}
.night .shot-card p {
  color: var(--text-muted);
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4) var(--space-8);
  margin: var(--space-16) auto 0;
  padding: var(--space-6) 0 0;
  border-top: 1px solid var(--border-night);
  list-style: none;
}
.facts li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-on-night);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-ui);
}
.facts .icon {
  color: var(--accent-on-night);
}

/* How it works ------------------------------------------------------------------------------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
  align-items: center;
}
@media (min-width: 1024px) {
  .split {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: var(--space-16);
  }
  .split.reverse > :first-child {
    order: 2;
  }
}
.split-copy {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}
.numbered {
  display: grid;
  gap: var(--space-5);
  margin: var(--space-2) 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.numbered li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--space-4);
  counter-increment: step;
}
.numbered li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--surface-selected);
  color: var(--accent);
  font-size: var(--text-caption);
  font-weight: var(--weight-title);
}
.numbered strong {
  display: block;
  font-size: var(--text-body);
  font-weight: var(--weight-strong);
}
.numbered p {
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-body-sm);
}
.code-card {
  overflow: hidden;
  border: 1px solid var(--code-border);
  border-radius: var(--radius-xl);
  background: var(--code-bg);
  color: var(--code-text);
  box-shadow: var(--shadow-3);
}
.code-card .code-tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-2) 0;
  overflow-x: auto;
  border-bottom: 1px solid var(--code-border);
}
.code-card .code-tab {
  position: relative;
  padding: var(--space-3) var(--space-3);
  border: 0;
  background: none;
  color: var(--code-muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-strong);
  white-space: nowrap;
}
.code-card .code-tab[aria-selected='true'] {
  color: var(--code-text);
}
.code-card .code-tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: -1px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--code-accent);
}
.code-card .code-block-header {
  border-bottom: 0;
}
.code-card pre {
  min-height: 210px;
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
  overflow-x: auto;
  font-size: var(--text-code);
  line-height: 1.7;
}
.code-response {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--code-border);
  color: var(--code-accent);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
}
.code-caption {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-caption);
}

/* Reasons, capabilities, trust ------------------------------------------------------------------ */
.reasons {
  display: grid;
  gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.reason,
.capability {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.reason h3,
.capability h3 {
  font-size: var(--text-title-3);
  font-weight: var(--weight-strong);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.reason p,
.capability p {
  color: var(--text-muted);
}
.feature-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: var(--surface-selected);
  color: var(--accent);
}
.band-subtle .feature-icon {
  background: var(--surface);
  box-shadow: var(--shadow-1);
}

/* Conversation and MCP ------------------------------------------------------------------------- */
.thread {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-2);
}
.thread-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
  font-size: var(--text-body-sm);
}
.thread-head span {
  color: var(--text-muted);
  font-size: var(--text-caption);
}
.thread-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border);
}
.thread-item:last-child {
  border-bottom: 0;
}
.thread-item strong {
  font-size: var(--text-body-sm);
}
.thread-item p {
  color: var(--text-muted);
  font-size: var(--text-body-sm);
}
.thread-item small {
  display: block;
  margin-top: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-caption);
}
.check-list {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.check-list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--space-3);
}
.check-list .icon {
  color: var(--success-text);
}
.client-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.client-list li {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  font-size: var(--text-caption);
  font-weight: var(--weight-strong);
}

/* Cards ------------------------------------------------------------------------------------ */
.card-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Closing ---------------------------------------------------------------------------------- */
.closing {
  padding-block: var(--space-20);
  text-align: center;
}
.closing-inner {
  display: grid;
  justify-items: center;
  gap: var(--space-5);
}
.closing h2 {
  font-size: var(--text-display-2);
  font-weight: var(--weight-display);
  line-height: 1.08;
  letter-spacing: -0.03em;
}

/* Footer ----------------------------------------------------------------------------------- */
.site-footer {
  padding-block: var(--space-16) var(--space-8);
  border-top: 1px solid var(--border);
  background: var(--bg-marketing);
  font-size: var(--text-body-sm);
}
.footer-grid {
  display: grid;
  gap: var(--space-10);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
@media (min-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.6fr repeat(3, 1fr);
  }
}
.footer-brand {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  justify-items: start;
}
.footer-brand p {
  color: var(--text-muted);
}
.footer-status {
  font-size: var(--text-caption);
}
.site-footer nav h2 {
  margin-bottom: var(--space-3);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-strong);
}
.site-footer nav:not(.legal-nav) {
  display: grid;
  gap: var(--space-2);
  align-content: start;
}
.site-footer nav a {
  color: var(--text-muted);
}
.site-footer nav a:hover {
  color: var(--text);
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--text-caption);
}
.footer-bottom .legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.footer-bottom .legal-nav a {
  text-decoration: underline;
}
.site-footer .theme-menu .theme-panel {
  top: auto;
  bottom: calc(100% + var(--space-2));
  left: 0;
  right: auto;
}

/* Pricing ---------------------------------------------------------------------------------- */
.page-hero {
  padding-block: var(--space-16) var(--space-10);
  text-align: center;
}
.page-hero .container {
  display: grid;
  justify-items: center;
  gap: var(--space-4);
}
.page-hero h1 {
  max-width: 18ch;
  font-size: var(--text-display-2);
  font-weight: var(--weight-display);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.page-hero .eyebrow {
  color: var(--accent);
}
.page-hero p:not(.eyebrow) {
  max-width: 40rem;
  color: var(--text-muted);
  font-size: var(--text-body-lg);
}
.plans-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.pricing-region-control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-left: auto;
}
.pricing-region-control label {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-strong);
}
.pricing-region-control select {
  width: auto;
  min-height: var(--control-sm);
}
.pricing-region-control p {
  flex-basis: 100%;
  margin: 0;
  color: var(--text-muted);
  font-size: var(--text-caption);
  text-align: right;
}
/* One column until three fit side by side, so no plan is left alone on a second row. */
.plans-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}
@media (min-width: 1024px) {
  .plans-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.plan {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto auto 1fr;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
}
.plan.featured {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.plan-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.plan h2 {
  font-size: var(--text-title-2);
  font-weight: var(--weight-title);
  letter-spacing: -0.015em;
}
.plan-description {
  margin-top: calc(var(--space-3) * -1);
  color: var(--text-muted);
  font-size: var(--text-body-sm);
}
.plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-2);
}
.plan-price [data-price] {
  font-size: var(--text-display-2);
  font-weight: var(--weight-display);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.plan-price small {
  color: var(--text-muted);
  font-size: var(--text-body-sm);
}
.plan-period {
  margin-top: calc(var(--space-3) * -1);
  color: var(--text-muted);
  font-size: var(--text-caption);
}
.plan-features {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  margin: 0;
  padding: var(--space-5) 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
  font-size: var(--text-body-sm);
}
.plan-features li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--space-3);
}
.plan-features .icon {
  width: 18px;
  height: 18px;
  color: var(--success-text);
}
.plan-features .includes {
  display: block;
  color: var(--text-muted);
  font-weight: var(--weight-strong);
}
.plan-features strong {
  font-weight: var(--weight-strong);
}
.plan-footnote {
  margin-top: var(--space-5);
  color: var(--text-muted);
  font-size: var(--text-caption);
}
.availability {
  margin-top: var(--space-10);
}
.comparison-scroll {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}
.comparison {
  width: 100%;
  min-width: 620px;
  font-size: var(--text-body-sm);
}
.comparison th,
.comparison td {
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.comparison thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  font-size: var(--text-body-sm);
}
.comparison thead small {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-caption);
  font-weight: var(--weight-ui);
}
.comparison tbody th {
  font-weight: var(--weight-ui);
}
.comparison .group th {
  padding-top: var(--space-5);
  background: var(--surface-subtle);
  color: var(--text-muted);
  font-size: var(--text-micro);
  font-weight: var(--weight-strong);
}
.comparison .icon {
  color: var(--success-text);
}
.comparison tr:last-child > * {
  border-bottom: 0;
}
.faq {
  max-width: 760px;
  margin-inline: auto;
}
.faq-list {
  border-top: 1px solid var(--border);
}
.faq-list details {
  border-bottom: 1px solid var(--border);
}
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  font-size: var(--text-body);
  font-weight: var(--weight-strong);
  list-style: none;
  cursor: pointer;
}
.faq-list summary::-webkit-details-marker {
  display: none;
}
.faq-list summary .icon {
  color: var(--text-muted);
  transition: rotate var(--duration-base) var(--ease-out);
}
.faq-list details[open] summary .icon {
  rotate: 45deg;
}
.faq-list details > div {
  padding-bottom: var(--space-5);
  color: var(--text-muted);
}
.faq-list details a {
  text-decoration: underline;
}

/* Outbound --------------------------------------------------------------------------------- */
.outbound-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-12);
  align-items: start;
}
@media (min-width: 1024px) {
  .outbound-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-16);
  }
}
.outbound-copy {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}
.outbound-copy h1 {
  font-size: var(--text-display-1);
  font-weight: var(--weight-display);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.outbound-boundary {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
.outbound-boundary h2 {
  font-size: var(--text-title-2);
  font-weight: var(--weight-title);
  line-height: 1.25;
}
.outbound-boundary p {
  color: var(--text-muted);
}
.waitlist-panel {
  display: grid;
  gap: var(--space-4);
}
.waitlist-panel h2 {
  font-size: var(--text-title-2);
  font-weight: var(--weight-title);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.waitlist-panel > p {
  color: var(--text-muted);
}
#outbound-waitlist {
  display: grid;
  gap: var(--space-4);
}
#waitlist-status:empty {
  display: none;
}
.waitlist-privacy {
  color: var(--text-muted);
  font-size: var(--text-caption);
}
.waitlist-privacy a {
  text-decoration: underline;
}

/* Articles --------------------------------------------------------------------------------- */
.article-hero {
  padding-block: var(--space-12) var(--space-10);
  border-bottom: 1px solid var(--border);
  background: var(--surface-subtle);
}
.article-hero .container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* Leads quote long addresses such as assistant@agents.yourcompany.com; "anywhere" also
     lowers the min-content width that justify-items: start sizes items to. */
  overflow-wrap: anywhere;
  gap: var(--space-4);
  justify-items: start;
}
.article-hero h1 {
  max-width: 22ch;
  font-size: var(--text-display-2);
  font-weight: var(--weight-display);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.article-lead {
  max-width: var(--reading);
  color: var(--text-muted);
  font-size: var(--text-body-lg);
}
.article-byline {
  color: var(--text-muted);
  font-size: var(--text-caption);
}
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-caption);
}
.breadcrumbs a {
  color: var(--text-muted);
}
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-10);
  padding-block: var(--space-12) var(--space-20);
}
@media (min-width: 1024px) {
  .article-layout {
    grid-template-columns: 220px minmax(0, var(--reading));
    gap: var(--space-16);
  }
}
.article-toc {
  display: grid;
  gap: var(--space-3);
  align-content: start;
  font-size: var(--text-body-sm);
}
@media (min-width: 1024px) {
  .article-toc {
    position: sticky;
    top: calc(64px + var(--space-6));
    max-height: calc(100vh - 64px - var(--space-12));
    overflow-y: auto;
  }
}
.article-toc > strong {
  color: var(--text-muted);
  font-size: var(--text-micro);
  font-weight: var(--weight-strong);
}
.article-toc nav {
  display: grid;
  border-left: 1px solid var(--border);
}
.article-toc nav a {
  margin-left: -1px;
  padding: var(--space-1) var(--space-3);
  border-left: 2px solid transparent;
  color: var(--text-muted);
  line-height: 1.45;
}
.article-toc nav a:hover {
  color: var(--text);
  text-decoration: none;
}
.article-toc nav a[aria-current='true'] {
  border-left-color: var(--accent);
  color: var(--text);
  font-weight: var(--weight-strong);
}
.toc-api {
  font-weight: var(--weight-strong);
}
/* Collapsed only once marketing.js adds the toggle; without JavaScript the list stays visible. */
@media (max-width: 1023px) {
  .article-toc:has(.toc-toggle) nav {
    display: none;
  }
  .article-toc.is-open nav {
    display: grid;
  }
}
.article-body {
  max-width: var(--reading);
}
.article-body > section + section {
  margin-top: var(--space-12);
}
.article-body section > h2 {
  margin-bottom: var(--space-4);
  font-size: var(--text-title-2);
  font-weight: var(--weight-title);
  line-height: 1.25;
  letter-spacing: -0.015em;
}
.article-body section > * + * {
  margin-top: var(--space-4);
}
.article-body p,
.article-body li {
  line-height: 1.7;
}
.article-body a:not(.btn, .link-card) {
  text-decoration: underline;
}
.article-body :not(pre) > code {
  padding: 0.12em 0.36em;
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  font-size: var(--text-code-inline);
  overflow-wrap: anywhere;
}
.article-body pre {
  margin: 0;
  padding: var(--space-4);
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background: var(--code-bg);
  color: var(--code-text);
  font-size: var(--text-code);
  line-height: 1.6;
}
.article-body .code-block pre {
  border-radius: 0;
}
.article-note {
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--info-border);
  border-radius: var(--radius-lg);
  background: var(--info-bg);
}
.article-note strong {
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-body-sm);
}
.article-note p {
  font-size: var(--text-body-sm);
}
.article-table {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.article-table table {
  width: 100%;
  min-width: 560px;
  font-size: var(--text-body-sm);
}
.article-table th,
.article-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.article-table th {
  background: var(--surface-subtle);
  font-weight: var(--weight-strong);
}
.article-table tr:last-child > * {
  border-bottom: 0;
}
.workflow-list {
  padding-left: var(--space-6);
}
.workflow-list li + li {
  margin-top: var(--space-3);
}
/* Integrations: app choices are navigation; the numbered walkthrough stays in each guide. */
.integration-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-6);
}
.article-body .integration-directory a {
  display: grid;
  align-content: start;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--text-body-sm);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.article-body .integration-directory a:hover {
  border-color: var(--border-control);
}
.integration-directory strong {
  color: var(--text);
  font-size: var(--text-title-3);
  font-weight: var(--weight-strong);
}
.integration-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.article-body .integration-actions a {
  text-decoration: none;
}
@media (max-width: 599px) {
  .integration-directory {
    grid-template-columns: minmax(0, 1fr);
  }
  .integration-actions .btn {
    width: 100%;
  }
}
.article-related {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
}
.article-related h2 {
  margin-bottom: var(--space-5);
  font-size: var(--text-title-3);
  font-weight: var(--weight-strong);
}
.article-related .card-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Legal ------------------------------------------------------------------------------------ */
.legal-page {
  padding-block: var(--space-12) var(--space-20);
}
.legal-page .container {
  max-width: var(--reading);
}
.legal-page .context {
  color: var(--text-muted);
  font-size: var(--text-caption);
}
.legal-page h1 {
  margin-top: var(--space-3);
  font-size: var(--text-display-2);
  font-weight: var(--weight-display);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.legal-lead {
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-body-lg);
}
.legal-page .setup-notice {
  margin-top: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-lg);
  background: var(--warning-bg);
  font-size: var(--text-body-sm);
}
.legal-page > .container > .legal-nav {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-8);
  overflow-x: auto;
  border-bottom: 1px solid var(--border);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-strong);
}
.legal-page > .container > .legal-nav a {
  position: relative;
  padding: var(--space-3) 0;
  color: var(--text-muted);
  white-space: nowrap;
  text-decoration: none;
}
.legal-page > .container > .legal-nav a[aria-current='page'] {
  color: var(--text);
}
.legal-page > .container > .legal-nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: var(--radius-full);
  background: var(--accent);
}
.legal-page article {
  margin-top: var(--space-8);
}
.legal-page article h2 {
  margin-top: var(--space-10);
  font-size: var(--text-title-2);
  font-weight: var(--weight-title);
  line-height: 1.25;
}
.legal-page article h3 {
  margin-top: var(--space-6);
  font-size: var(--text-title-3);
  font-weight: var(--weight-strong);
}
.legal-page article p,
.legal-page article li {
  margin-top: var(--space-3);
  line-height: 1.7;
}
.legal-page article a {
  text-decoration: underline;
}
.legal-page article table {
  width: 100%;
  margin-top: var(--space-4);
  font-size: var(--text-body-sm);
  border: 1px solid var(--border);
}
.legal-page article th,
.legal-page article td {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  line-height: 1.55;
}
.legal-page article th {
  background: var(--surface-subtle);
  font-weight: var(--weight-strong);
}
@media (max-width: 599px) {
  .legal-page article table,
  .legal-page article tbody,
  .legal-page article tr,
  .legal-page article td,
  .legal-page article th {
    display: block;
  }
  /* Hidden visually only; each cell shows its column header from data-label (src/legal.ts). */
  .legal-page article thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .legal-page article td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-1);
    color: var(--text-muted);
    font-size: var(--text-caption);
    font-weight: var(--weight-strong);
  }
  .legal-page article tr {
    border-bottom: 1px solid var(--border);
  }
  .legal-page article td,
  .legal-page article th {
    border: 0;
  }
}

/* Details ---------------------------------------------------------------------------------- */
.why-more {
  margin-top: var(--space-10);
}
.billing-callout {
  margin-bottom: var(--space-5);
}
.mcp-steps {
  display: grid;
  gap: var(--space-6);
}
.mcp-steps code {
  padding: 0.12em 0.36em;
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  font-size: var(--text-code-inline);
  overflow-wrap: anywhere;
}
.legal-version {
  margin-top: var(--space-10);
}
.toc-toggle {
  display: none;
  justify-self: start;
}
@media (max-width: 1023px) {
  .article-toc:has(.toc-toggle) > strong {
    display: none;
  }
  .toc-toggle {
    display: inline-flex;
  }
}
.availability h2 {
  font-size: var(--text-body);
}
.availability a {
  text-decoration: underline;
}