/* Design system v1 (Superhuman-inspired typography + reveal). Loaded after the Webflow CSS
   and migration.css on migrated templates; see scripts/hero/apply-design.py. */

/* Inter 4 variable (wght 100–900, opsz 14–32 = Inter Display at large sizes), latin + latin-ext.
   Same family name as the Webflow rules, so every `font-family: Inter` picks it up. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/InterVariable.woff2?v=ba7228f987") format("woff2") tech("variations"),
    url("/assets/fonts/InterVariable.woff2?v=ba7228f987") format("woff2-variations");
}

:where(:root) {
  /* fluid scale (Superhuman tokens) */
  --fs-display-l: clamp(48px, 16px + 5vw, 88px);
  --fs-display-m: clamp(44px, 18.4px + 4vw, 76px);
  --fs-display-s: clamp(36px, 16px + 3.125vw, 61px);
  --fs-heading-l: clamp(34px, 20px + 2.4vw, 54px);
  --fs-heading-m: clamp(26px, 18px + 1.4vw, 40px);
  --fs-heading-s: clamp(24px, 18.4px + 0.875vw, 31px);
  --fs-heading-xs: clamp(20px, 16px + 0.625vw, 25px);
  --fs-text-l: clamp(18px, 16.4px + 0.25vw, 20px);
  --fs-text-m: 18px;
  --fs-text-s: 16px;
  --fs-text-xs: 14px;
  --lh-display: 1.1;
  --lh-heading: 1.2;
  --lh-text: 1.5;
  --track-display: -0.0275em;
  --track-heading: -0.03em;
  --fw-heading: 450;
  --brand: #2563eb;
  --track-text: -0.0075em;
  --fw-book: 400;
  --fw-regular: 450;
  --fw-medium: 500;
  --fw-semibold: 600;
}

html {
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
body {
  font-size: var(--fs-text-s);
  line-height: var(--lh-text);
  letter-spacing: var(--track-text);
}

/* ---- Prose ---- */
.vsec p,
.vsec .p-xl,
.vsec .p-xl.dark,
.vsec .p-xl.white,
.vsec p.dark,
.vsec p.white {
  font-size: var(--fs-text-m);
  font-weight: var(--fw-book);
  line-height: var(--lh-text);
  letter-spacing: var(--track-text);
}
.vsec .w-richtext p,
.vsec .faq-answer p,
.vsec .text-block-196 {
  font-size: var(--fs-text-s);
}

/* ---- Hero ---- */
.h1-hero-w.top-m,
.h1-hero-w.top-m.adjust-cz {
  font-size: var(--fs-display-l);
  font-weight: var(--fw-medium);
  line-height: 1.05;
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.h1-hero-w.top-m.subsize {
  font-size: var(--fs-display-m);
}
.vsec p.hero-text,
.hero-text {
  font-size: var(--fs-text-l);
  font-weight: var(--fw-book);
  line-height: var(--lh-text);
  letter-spacing: var(--track-text);
  text-wrap: pretty;
}
.vsec .text-block-196,
.text-block-196 {
  font-size: var(--fs-text-xs);
  font-weight: var(--fw-regular);
  letter-spacing: var(--track-text);
  opacity: 0.92;
  text-shadow: 0 1px 2px rgba(10, 8, 20, 0.45); /* the trust line sits on the lit cloud band */
}
.ls-cta.button-v2-main {
  font-weight: var(--fw-medium);
  letter-spacing: var(--track-text);
}

/* ---- Section headings ---- */
.h2-section,
.h2-section.white,
.h2-section.dark {
  font-size: var(--fs-heading-l);
  font-weight: var(--fw-heading);
  line-height: 1.05;
  letter-spacing: var(--track-heading);
  text-wrap: balance;
  max-width: 24ch;
}
/* one face, one colour: no bold or coloured word inside a heading */
.h2-section ._600,
.h2-section .block.black,
.h2-section .text-span-22 {
  font-weight: inherit;
  color: inherit;
}
@media (max-width: 767px) {
  .h2-section br { display: none; }
}
.h2-section .question-title-5 {
  font-size: inherit;
}
.h1-size.white {
  font-size: var(--fs-display-m);
  font-weight: var(--fw-medium);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}
.bottom-banner {
  font-size: var(--fs-display-s);
  font-weight: var(--fw-book);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
.bottom-banner .text-span-22 {
  font-weight: var(--fw-medium);
}
#lpStack h2.lpK__h2,
#lpStack .lpK__h2.lpK__h2 {
  font-size: var(--fs-heading-l);
  font-weight: var(--fw-heading);
  line-height: 1.05;
  letter-spacing: var(--track-heading);
}
#lpStack p.lpK__sub,
#lpStack .lpK__sub.lpK__sub {
  font-size: var(--fs-text-m);
  line-height: var(--lh-text);
  letter-spacing: var(--track-text);
}

/* ---- Eyebrows: sentence case, no tracking, a small brand-blue square instead of the dot ---- */
.text-badge,
.text-badge.dark,
.text-badge.white,
.badge-white {
  font-size: var(--fs-text-xs);
  font-weight: var(--fw-medium);
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
}
.the-badge-w-dot {
  display: flex;
  align-items: center;
  gap: 10px;
}
.the-badge-w-dot .div-block-875,
.the-badge-w-dot .div-block-875.w {
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: var(--brand);
}
/* "Learn more →" links (Superhuman / Intercom): plain text, arrow nudges on hover */
a.lp-more,
.vsec a.lp-more {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: var(--fs-text-s);
  font-weight: var(--fw-medium);
  color: var(--brand);
  text-decoration: none;
}
a.lp-more::after { content: "\2192"; transition: translate 0.2s; }
a.lp-more:hover { text-decoration: underline; text-underline-offset: 0.2em; }
a.lp-more:hover::after { translate: 3px 0; }

/* ---- Platform blocks ---- */
.tabs-content h3.dark {
  font-size: var(--fs-heading-m);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-display);
  text-wrap: pretty;
}
.vsec .tabs-content p,
.vsec .tabs-content .w-richtext li {
  font-size: var(--fs-text-s);
  line-height: var(--lh-text);
  letter-spacing: var(--track-text);
}
.tabs-link {
  font-size: var(--fs-text-s);
  font-weight: var(--fw-regular);
  letter-spacing: var(--track-text);
}

h3.heading-170 {
  font-size: var(--fs-heading-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-text);
}
h2.question-title-5 {
  font-size: var(--fs-text-l);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-text);
}
#lpTry h3.lpTry__title,
#lpTry .lpTry__title.lpTry__title {
  font-size: var(--fs-heading-s);
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-display);
}

/* ---- Reveal: content is visible without JS; design.js adds html.lp-js ---- */
html.lp-js [data-rv] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--ease) calc(var(--rv-i, 0) * 70ms),
    transform 0.5s var(--ease) calc(var(--rv-i, 0) * 70ms);
  will-change: opacity, transform;
}
html.lp-js [data-rv].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  html.lp-js [data-rv] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Measure, edges, Stack eyebrows (inspector fixes) ---- */
.vsec p.hero-text,
.hero-text {
  max-width: 58ch;
  margin-left: auto;
  margin-right: auto;
}
#lpStack .lpS__eye.lpS__eye {
  font-family: inherit;
  font-size: var(--fs-text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  text-transform: none;
}
@media (max-width: 479px) {
  .vsec .text-block-196,
  .text-block-196 {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }
  .h1-hero-w.top-m.adjust-cz {
    font-size: 42px;
  }
}
/* the hero paragraph wraps naturally inside its 58ch measure; the Webflow hard break is dropped */
.hero-text .block {
  display: inline;
}
/* Sales Intelligence stat captions: text face instead of the never-loaded Geist Mono */
#lpHorizon .horizon__facts .hfact span {
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  text-transform: none;
}
@media (max-width: 479px) {
  /* the connector demo is wider than a phone: let the column shrink and scale the demo */
  .grid-165 > .flex-v-20 {
    min-width: 0;
  }
  #lpMcpV {
    max-width: 100%;
  }
  #lpMcpV .mcp__visual {
    zoom: 0.78;
    justify-content: flex-start;
  }
}

/* ---- Navigation embedded in the hero (Superhuman): the sky runs under the bar, the bar is
   transparent at the top of the page and turns into the usual auto-contrast bar once you scroll.
   design.js sets html.lp-nav-embed on pages with .hero-mountains-wrap and html.lp-nav-top while
   scrollY is near 0. The auto-contrast logic (data-nav-theme) is untouched. ---- */
:where(:root) {
  --nav-h: 71px; /* .navigation-wrap 70px + 1px border */
}
html.lp-nav-embed .hero-mountains-wrap {
  margin-top: calc(-1 * var(--nav-h));
  padding-top: var(--nav-h);
}
html.lp-nav-top:not(:has(.w-nav-button.w--open)) .navbar.w-nav {
  background-color: transparent;
  border-bottom-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
@media (max-width: 991px) {
  :where(:root) {
    --nav-h: 61px;
  }
}