/* One self-hosted family for Taploop text, with component sizes kept local. */
@font-face {
  font-family: "Geist Variable";
  src: url("/assets/fonts/geist-19f9c92546aa.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

html:root {
  --font-sans: "Geist Variable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font: var(--font-sans);
  --public-font: var(--font-sans);
  --account-font: var(--font-sans);
  --soul-display: var(--font-sans);
}

html:root body,
html .examples-page,
html .marketing-pilot {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

html .public-site-shell,
html #blog-root {
  --soul-display: var(--font-sans);
}

/* Static pages share the same face as React pages, including their footer. */
html .examples-page .company-footer {
  font-family: var(--font-sans);
}

html .marketing-pilot h1,
html .examples-page .ex-hero h1 {
  font-weight: 720;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

html .marketing-pilot h2,
html .examples-page :is(.ex-section-heading h2, .ex-team-section h2, .ex-cta h2) {
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.14;
}

html .examples-page .ex-card h3 {
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

/* Shared public type rhythm. Component diagrams retain their own label sizes. */
html .soul-home :is(h1, h2, h3), html .public-site-shell :is(h1, h2, h3, .public-brand), html .public-site-shell .how-reference h2, html .public-site-shell .how-reference__workflow-card h3, html .public-site-shell .how-reference__responsibility-card h3, html .hn-taploop__word, html .ed-site :is(h1, h2, h3), html #blog-root :is(h1, h2, h3) {
  font-family: var(--font-sans);
}

html .soul-home .simple-hero h1,
html .public-site-shell :is(
  .public-hero h1,
  .showcase-route-hero__copy h1,
  .capabilities-reference h1,
  .integrations-reference h1,
  .creator-workflow-showcase__heading h1,
  .developer-install-showcase__copy h1,
  .pricing-showcase__header h1,
  .legal-hero h1,
  .how-page-hero__title
),
html .ed-site :is(.ed-about-hero h1, .ed-blog-hero h1, .ed-article-hero h1),
html #blog-root .hero-copy h1,
html .account-intro h1 {
  font-family: var(--font-sans);
  font-weight: 720;
  letter-spacing: -0.045em;
  line-height: 1.08;
  text-transform: none;
  text-wrap: balance;
}

html .campaign-copy h1,
html .public-site-shell .agent-execution .agent-execution__title {
  font-family: var(--font-sans);
  font-weight: 720;
  letter-spacing: -0.045em;
  line-height: 1.08;
  text-transform: none;
}

html .public-site-shell .agent-execution .agent-execution__title > span {
  transform: none;
}

html .public-site-shell .how-reference .how-reference__heading h2 {
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.14;
}

html .public-site-shell .how-reference__workflow-card h3 {
  font-weight: 650;
  font-size: 1.5em;
  letter-spacing: -0.035em;
  white-space: normal;
  line-height: 1.2;
}

html .soul-home .simple-hero h1 {
  max-width: 720px;
  font-size: clamp(52px, 4.7vw, 76px);
}

html .soul-home :is(.simple-capabilities h2, .simple-closing h2), html .public-site-shell :is(
  .public-section__heading h2,
  .public-callout h2,
  .understand-showcase__intro h2,
  .human-routing-copy h2,
  .integration-catalog-showcase__heading h2,
  .permission-showcase > h2,
  .contract-showcase__copy h2,
  .pricing-controls-showcase__header h2
), html .ed-site :is(.ed-mission h2, .ed-section-heading h2, .ed-vision h2, .ed-build h2, .ed-pilot h2), html #blog-root :is(.section-intro h2, .guide-header h2, .closing-inner h2) {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.14;
  text-transform: none;
  text-wrap: balance;
}

html .soul-home .simple-capabilities h2,
html .soul-home .simple-closing h2 {
  font-size: clamp(34px, 3.7vw, 52px);
}

html .soul-home .simple-capabilities .execution-flow h2 {
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.14;
}

html .soul-home .execution-flow h3 {
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

html .soul-home .simple-capabilities__grid h3,
html .soul-home .simple-capabilities__foundation h3 {
  font-family: var(--font-sans);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.18;
  text-wrap: balance;
}

html .soul-home :is(.simple-hero__eyebrow, .simple-capabilities > header > p, .simple-closing > p), html .public-site-shell :is(.public-eyebrow, .showcase-eyebrow, .pricing-showcase__eyebrow, .public-callout__eyebrow), html .public-site-shell :is(.capabilities-reference__eyebrow, .integrations-reference__eyebrow), html .account-page :is(.account-eyebrow, .card-kicker) {
  font-weight: 650;
  letter-spacing: 0.1em;
  line-height: 1.4;
}

/* These heroes previously stretched a condensed font into fixed, unbroken lines. */
html .public-site-shell .capabilities-reference h1,
html .public-site-shell .integrations-reference h1 {
  max-width: 100%;
  font-size: clamp(36px, 3.55vw, 60px);
}

html .public-site-shell .capabilities-reference h1 > span,
html .public-site-shell .integrations-reference h1 > span {
  display: inline;
  width: auto;
  max-width: none;
  white-space: normal;
  transform: none;
  font-size: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

html .public-site-shell .how-page-hero__title > span {
  white-space: normal;
}

html .ed-site :is(.ed-about-hero h1, .ed-blog-hero h1) {
  font-size: clamp(42px, 4.5vw, 64px);
}

html .ed-site .ed-article-hero h1 {
  font-size: clamp(36px, 4.2vw, 60px);
  line-height: 1.12;
}

html .ed-site .ed-article-copy h2 {
  font-family: var(--font-sans);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.22;
}

html .ed-site .ed-article-copy h3,
html .ed-site .ed-capabilities h3 {
  font-family: var(--font-sans);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

html .ed-site .ed-loop__goal strong {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: -0.025em;
}

html #blog-root .hero-copy h1 {
  font-size: clamp(42px, 4.4vw, 62px);
}

html .account-intro h1 {
  font-size: clamp(44px, 4.35vw, 62px);
}

html .visitor-guide h2 {
  font-family: var(--font-sans);
  font-size: clamp(30px, 3.5vw, 40px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
  max-width: 16ch;
  text-wrap: balance;
}

@media (min-width: 1200px) {
  /* The more readable heading needs room above these fixed diagram cards. */
  html .public-site-shell .how-reference--responsibilities {
    aspect-ratio: 1717 / 986;
  }

  html .how-reference--responsibilities .how-reference__responsibility-cards {
    top: 29.5%;
    height: 50.2%;
  }
}

@media (max-width: 1120px) {
  html .soul-home .simple-hero h1 {
    max-width: 590px;
    font-size: clamp(44px, 5.3vw, 60px);
  }
}

@media (max-width: 1100px) {
  html .public-site-shell .capabilities-reference h1,
  html .public-site-shell .integrations-reference h1 {
    max-width: 720px;
    font-size: clamp(44px, 6.8vw, 64px);
  }
}

@media (max-width: 760px) {
  html .soul-home .simple-hero h1 {
    font-size: clamp(36px, 7.3vw, 52px);
  }

  html .soul-home .simple-capabilities h2,
  html .soul-home .simple-closing h2 {
    font-size: clamp(32px, 6.8vw, 44px);
  }
}

@media (max-width: 640px) {
  html .soul-home .simple-hero h1 {
    font-size: clamp(34px, 9.3vw, 48px);
    letter-spacing: -0.04em;
  }

  html .public-site-shell .capabilities-reference h1,
  html .public-site-shell .integrations-reference h1 {
    font-size: clamp(34px, 8.8vw, 48px);
    letter-spacing: -0.04em;
    line-height: 1.1;
  }

  html .ed-site :is(.ed-about-hero h1, .ed-blog-hero h1), html #blog-root .hero-copy h1, html .account-intro h1 {
    font-size: clamp(34px, 9vw, 44px);
    letter-spacing: -0.04em;
  }

  html .ed-site .ed-article-hero h1 {
    font-size: clamp(32px, 8vw, 42px);
    letter-spacing: -0.035em;
  }
}