/* Webflow custom-embed CSS (site-wide) — globalized from the ported page
   bodies so the shared nav/mega-menu/footer chrome is styled on EVERY (webflow)
   page, including reskinned ones. Home is the CSS superset (pricing/about are
   subsets); page-specific rules (.pricing_plans, .ww-*) are inert
   where they do not match. */

  * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -o-font-smoothing: antialiased;
}



  /* Rotating hero ending */
  /* Pricing: 4 self-serve cards on desktop */
  .pricing_plans { grid-template-columns: 1fr 1fr 1fr 1fr; }
  @media screen and (max-width: 991px) { .pricing_plans { grid-template-columns: 1fr 1fr; } }
  @media screen and (max-width: 479px) { .pricing_plans { grid-template-columns: 1fr; } }
  /* Price row: big price, unit on its own line below (keeps narrow card tidy) */
  .pricing_plan .row { flex-wrap: wrap; column-gap: .5rem; row-gap: .125rem; align-items: baseline; }
  .pricing_plan .row .text-size-medium { flex: 0 0 100%; margin-top: .125rem; }
  /* Shared content rows keep every plan aligned without stretching the cards.
     The placeholder cadence row on Free and the fixed note row below the CTA
     absorb copy differences while letting the summary size itself naturally. */
  .pricing_plan .custom-top-card { box-sizing: border-box; min-height: 20.625rem; display: grid; grid-template-rows: auto auto minmax(1.875rem, auto) auto; align-content: start; }
  .pricing_plan .custom-top-card > .margin-top.margin-medium { margin-top: .75rem; padding-top: 0; }
  .pricing_plan .custom-top-card .info-wrapper { min-height: 2.75rem; align-items: flex-start; }
  /* Monthly / Annual period toggle */
  .pricing_period { display: flex; justify-content: center; margin-bottom: 2.5rem; }
  .period-toggle { display: inline-flex; gap: .25rem; padding: .3125rem; border-radius: 999px; background: #eef1f5; border: 1px solid rgba(20,20,43,.06); }
  .period-toggle .pt { display: inline-flex; align-items: center; gap: .375rem; border: 0; background: transparent; border-radius: 999px; padding: .5rem 1.125rem; font-size: .9375rem; font-weight: 600; color: #667085; cursor: pointer; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
  .period-toggle .pt.is-active { background: #fff; color: #101828; box-shadow: 0 1px 3px rgba(16,24,40,.14); }
  .period-toggle .pt:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(16,103,254,.35); }
  .period-toggle .pt-save { font-size: .75rem; font-weight: 700; color: #1067fe; }
  /* Rolling price number — tabular figures keep width constant while it tweens */
  .roll { font-variant-numeric: tabular-nums; }
  /* Save badge + billing cadence under the price. Solid badge bg (not a tint over
     the gradient) + dark green text so it clears WCAG AA (~4.9:1) on every card. */
  .price-note { display: flex; align-items: center; gap: .5rem; margin-top: .625rem; min-height: 1.25rem; }
  .price-note-placeholder { visibility: hidden; }
  .save-badge { display: inline-block; font-size: .75rem; font-weight: 700; color: #0a6b33; background: #e0f2e7; border-radius: 999px; padding: .15rem .55rem; }
  .save-badge[hidden] { display: none; }
  .billed { font-size: .8125rem; color: #667085; }
  /* On the "Most popular" gradient card, muted grays lose contrast against the
     orange/blue wash — darken to a slate that clears AA (>6:1) on the gradient. */
  .custom-top-card.position-relative .text-style-muted,
  .custom-top-card.position-relative .billed { color: #344054; }
  @media (prefers-reduced-motion: reduce) { .period-toggle .pt { transition: none; } }
  /* Enterprise & Agency full-width banner card */
  .pricing_enterprise { margin-top: 1rem; }
  .pricing_enterprise .enterprise-grid { display: grid; grid-template-columns: 1.2fr 2fr; gap: 2rem; align-items: center; }
  @media screen and (max-width: 767px) { .pricing_enterprise .enterprise-grid { grid-template-columns: 1fr; } }
  .enterprise-feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem 1.5rem; }
  @media screen and (max-width: 479px) { .enterprise-feature-list { grid-template-columns: 1fr; } }
  /* AI setup: one Resend-like icon rail and one stable three-step canvas. */
  .ww-tabs { display: flex; flex-direction: column; align-items: center; margin: 0; }
  /* Segmented toggle — matches the hero Claude/ChatGPT/Slack pill: one rounded track,
     segments share it, the active one lifts to white. Horizontal-scrolls if it overflows. */
  .ww-bar-wrap { width: 100%; max-width: 72rem; display: flex; justify-content: safe center; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none; padding: 2px 1rem; }
  .ww-bar-wrap::-webkit-scrollbar { display: none; }
  .ww-bar { display: inline-flex; align-items: center; gap: 3px; width: max-content; margin: 0 auto; padding: 4px;
    border-radius: 999px; background: #eef1f5; border: 1px solid rgba(20,20,43,.06); }
  /* Icon-only segments — logo per tool (name comes from aria-label/title, not visible). */
  .ww-seg { display: inline-flex; align-items: center; justify-content: center; min-width: 3.4rem; min-height: 2.4rem;
    padding: 0; border: 0; border-radius: 999px; background: transparent; color: #101828; cursor: pointer;
    opacity: .5; box-shadow: none; transition: opacity .16s ease, background .16s ease; }
  .ww-seg::after { content: none; }
  .ww-seg:hover { opacity: .85; }
  .ww-seg-ico { display: inline-flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; flex: 0 0 auto; color: #101828; }
  .ww-seg-ico svg { width: 22px; height: 22px; display: block; }
  .ww-seg[aria-selected="true"] { opacity: 1; color: #fff; background: #1067fe; box-shadow: 0 2px 8px -2px rgba(16,103,254,.5); }
  /* Logos vary — some (Codex, Open Claw) carry their own background/detail, so show
     the active logo in natural colour on a white chip rather than force-whitening it
     (which blobbed those two). */
  .ww-seg[aria-selected="true"] .ww-seg-ico { background: #fff; border-radius: 6px; box-shadow: 0 0 0 3px #fff; }
  .ww-seg:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(91,141,255,.35); }

  .ww-panel { position: relative; width: 100%; max-width: 58rem; margin: 1.15rem auto 0; overflow: hidden; border: 1px solid rgba(20,20,43,.12); border-radius: 1rem; background: rgba(255,255,255,.72); box-shadow: 0 24px 70px -52px rgba(16,24,40,.5); text-align: left; }
  .ww-doc-content { padding: clamp(1.15rem, 2vw, 1.5rem); }
  .ww-guide-kicker { margin: 0 0 .42rem; color: #d97757; font-size: .67rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
  .ww-guide-title { margin: 0 0 1rem; color: #101828; font-family: var(--font-geist), sans-serif; font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.18; }
  .ww-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .ww-step { display: flex; align-items: flex-start; gap: .85rem; min-width: 0; padding: .78rem 0; }
  .ww-step:first-child { padding-top: .25rem; }
  .ww-step:last-child { padding-bottom: .2rem; }
  .ww-step:not(:last-child) { border-bottom: 1px solid #e4e7ec; }
  .ww-step-num { width: 1.65rem; height: 1.65rem; flex: 0 0 auto; border: 1px solid #e4e7ec; border-radius: 50%; background: #fff; color: #344054; display: inline-flex; align-items: center; justify-content: center; font-weight: 650; font-size: .68rem; }
  .ww-step-title { margin: 0 0 .25rem; font-size: .9rem; font-weight: 650; color: #101828; }
  .ww-step-desc { max-width: 46rem; margin: 0; font-size: .8rem; line-height: 1.5; color: #667085; }
  .ww-snippet { display: grid; grid-template-columns: max-content minmax(0, 1fr); align-items: center; gap: .8rem; margin-top: .9rem; padding: .72rem .85rem; border: 1px solid #e4e7ec; border-radius: .7rem; background: #f8fafc; }
  .ww-snippet-label { color: #667085; font-size: .67rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
  .ww-snippet-code { min-width: 0; overflow-x: auto; color: #1d2939; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .76rem; line-height: 1.45; white-space: nowrap; scrollbar-width: thin; }

  .ww-doc-footer { min-height: 3rem; display: flex; align-items: center; justify-content: flex-end; padding: .42rem clamp(1.15rem, 2vw, 1.5rem); border-top: 1px solid rgba(20,20,43,.09); background: rgba(255,255,255,.4); }
  .ww-docs-link { display: inline-flex; align-items: center; height: 2.35rem; padding: 0 .9rem; border: 1px solid #d0d5dd; border-radius: .55rem; background: #fff; color: #344054; font-size: .75rem; font-weight: 600; text-decoration: none; transition: color .15s ease, border-color .15s ease, background .15s ease; }
  .ww-docs-link:hover { color: #101828; border-color: #98a2b3; background: #f9fafb; }
  .ww-docs-arrow { margin-left: .5rem; transition: transform .15s ease; }
  .ww-docs-link:hover .ww-docs-arrow { transform: translateX(3px); }
  @media screen and (max-width: 991px) {
    .ww-bar { grid-template-columns: repeat(9, 5.4rem); }
  }
  @media screen and (max-width: 767px) {
    .ww-panel { border-radius: .95rem; margin-top: 1.15rem; }
  }
  @media screen and (max-width: 479px) {
    .ww-tabs { gap: 3rem; }
    .ww-bar { grid-template-columns: repeat(9, 4.8rem); gap: .55rem; }
    .ww-seg { min-width: 4.8rem; min-height: 4.8rem; padding: .45rem .3rem; font-size: .64rem; }
    .ww-seg-ico { width: 1.4rem; height: 1.4rem; }
    .ww-seg-ico svg { width: 20px; height: 20px; }
    .ww-doc-content { padding: 1rem; }
    .ww-guide-title { margin-bottom: .8rem; }
    .ww-step { gap: .72rem; padding: .7rem 0; }
    .ww-snippet { grid-template-columns: 1fr; gap: .35rem; padding: .65rem .72rem; }
    .ww-snippet-code { font-size: .7rem; }
    .ww-doc-footer { padding: .42rem 1rem; }
  }
  @media (prefers-reduced-motion: reduce) { .ww-seg, .ww-docs-link, .ww-docs-arrow { transition: none; } }
  /* Setup: three-step getting started */
  .setup-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  @media screen and (max-width: 767px) { .setup-steps { grid-template-columns: 1fr; } }
  .setup-step { border: 1px solid rgba(20,20,43,.08); border-radius: 1rem; padding: 2rem; background: rgba(255,255,255,.5); display: flex; flex-direction: column; gap: .75rem; text-align: left; }
  .setup-step h3.heading-style-h4 { text-align: left; }
  .setup-num { width: 2.5rem; height: 2.5rem; flex: 0 0 auto; border-radius: .75rem; background: #101828; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
  /* Extensive footer: 5 link columns on desktop */
  .list-link-footer { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
  @media screen and (max-width: 991px) { .list-link-footer { grid-template-columns: 1fr 1fr 1fr; } }
  @media screen and (max-width: 479px) { .list-link-footer { grid-template-columns: 1fr 1fr; } }
  .footer-legal { opacity: .6; font-size: .875rem; margin-top: 1rem; }
  /* Footer reveal: fires only when scrolled into view (replaces flaky Webflow trigger) */
  /* Footer reveals — gated on html.wf-fx (added by WebflowRuntime on every page
     when IO is supported + motion allowed), so with JS off / reduced motion the
     footer just shows. The runtime adds .is-in on scroll-into-view.
     .reveal-up = fade + rise 28px (grid-top-footer, footer-center);
     .reveal-zoom = fade + scale 1.2->1 + de-blur (the big ADSPIRER wordmark, a-190). */
  html.wf-fx .reveal-up { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
  html.wf-fx .reveal-up.is-delayed { transition-delay: .1s; }
  html.wf-fx .reveal-zoom { opacity: 0; transform: scale(1.2); filter: blur(10px); transform-origin: center center;
    transition: opacity 1s cubic-bezier(.165,.84,.44,1), transform 1s cubic-bezier(.165,.84,.44,1), filter 1s cubic-bezier(.165,.84,.44,1); }
  html.wf-fx .reveal-up.is-in, html.wf-fx .reveal-zoom.is-in { opacity: 1; transform: none; filter: blur(0); }

  /* ===================== Top-nav mega-menu — one morphing surface (Resend-style) ===================== */
  @media (min-width: 992px) { .navbar_menu[data-mm-group] { position: relative; } }
  .navbar_menu-button { border: 0; background: transparent; color: inherit; font: inherit; }
  .nav-mm-trigger {
    display: inline-flex; align-items: center; gap: .3rem; border: 0; background: transparent;
    color: #222; font: inherit; font-size: .9rem; cursor: pointer;
  }
  .nav-mm-trigger:hover { transform: none; }               /* cancel the .navbar_link scale(.96) */
  .nav-mm-trigger:focus { outline: none; }
  .nav-mm-trigger:focus-visible { border-radius: .45rem; box-shadow: 0 0 0 2px rgba(16, 24, 40, .12); }
  .nav-mm-caret { width: .65rem; height: .65rem; flex: 0 0 auto; opacity: .5; transition: transform .2s ease, opacity .2s ease; }
  .nav-mm-trigger.is-open .nav-mm-caret { transform: rotate(180deg); opacity: 1; }

  /* The single shared surface: JS sets width/height/translateX; CSS transitions them → it morphs
     between menus instead of closing/reopening. Content panels crossfade inside it. */
  .nav-mega {
    position: absolute; top: 100%; left: 0; margin-top: 8px;
    width: 0; height: 0; transform: translateX(0);
    background: rgba(255,255,255,.96); border: 1px solid rgba(20,20,43,.09); border-radius: 1rem;
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    box-shadow: 0 24px 60px -24px rgba(16,24,40,.3), 0 8px 20px -14px rgba(16,24,40,.16);
    overflow: hidden; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .2s;
    z-index: 60;
  }
  .nav-mega.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease, visibility 0s; }
  /* invisible hover-bridge across the gap so the cursor never leaves the menu subtree */
  .nav-mega::before { content: ""; position: absolute; left: -32px; right: -32px; top: -14px; height: 14px; }
  .nav-mega-panel {
    position: absolute; top: 0; left: 0; width: max-content; max-width: calc(100vw - 4rem); padding: 1rem;
    opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility 0s linear .16s;
  }
  .nav-mega-panel.is-active { opacity: 1; visibility: visible; transition: opacity .16s ease .04s; }

  .nav-mm-eyebrow { margin: 0 0 .6rem; font-size: .64rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #98a2b3; }
  .nav-mm-foot { display: flex; justify-content: flex-end; margin-top: .65rem; padding-top: .65rem; border-top: 1px solid rgba(20,20,43,.08); }
  .nav-mm-more { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; color: #1067fe; text-decoration: none; }
  .nav-mm-more:hover { color: #0b4fd6; }
  .nav-mm-more svg { width: .8rem; height: .8rem; transition: transform .15s ease; }
  .nav-mm-more:hover svg { transform: translateX(2px); }
  /* Ad-platforms grid — brand logo lockups */
  .nav-mm-ads { display: grid; grid-template-columns: 1fr 1fr; gap: .125rem; width: 26rem; max-width: 100%; }
  .nav-mm-ads a { display: flex; align-items: center; padding: .5rem .625rem; border-radius: .625rem; text-decoration: none; transition: background .15s ease; }
  .nav-mm-ads a:hover { background: #f4f6f9; }
  .nav-mm-ads img { height: 23px; width: auto; display: block; }
  /* AI-platforms grid — icon tile + name */
  .nav-mm-ai { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; width: 22rem; max-width: 100%; }
  .nav-mm-ai a { display: flex; flex-direction: column; align-items: center; gap: .4rem; padding: .7rem .4rem; border-radius: .7rem; text-decoration: none; transition: background .15s ease; }
  .nav-mm-ai a:hover { background: #f4f6f9; }
  .nav-mm-tile { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; background: transparent; flex: 0 0 auto; }
  .nav-mm-tile img { width: 24px; height: 24px; display: block; }
  .nav-mm-name { font-size: .8rem; font-weight: 500; color: #344054; text-align: center; }
  /* Documentation panel — link rail + connect grid */
  .nav-mm-docs { display: flex; gap: 1.25rem; width: 32rem; max-width: 100%; }
  .nav-mm-rail { display: flex; flex-direction: column; gap: .0625rem; min-width: 8.5rem; }
  .nav-mm-rail a { display: block; padding: .4rem .5rem; border-radius: .5rem; font-size: .8rem; font-weight: 500; color: #344054; text-decoration: none; transition: background .15s ease, color .15s ease; }
  .nav-mm-rail a:hover { background: #f4f6f9; color: #101828; }
  .nav-mm-connect { flex: 1; }
  .nav-mm-connect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .15rem; }
  .nav-mm-connect-grid a { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .55rem .35rem; border-radius: .625rem; text-decoration: none; text-align: center; transition: background .15s ease; }
  .nav-mm-connect-grid a:hover { background: #f4f6f9; }
  .nav-mm-connect-grid .nav-mm-name { font-size: .72rem; font-weight: 500; color: #344054; line-height: 1.2; }
  .nav-mm-connect-grid .nav-mm-tile { width: 2rem; height: 2rem; }
  .nav-mm-connect-grid .nav-mm-tile img { width: 22px; height: 22px; }
  /* Pricing panel — 4-tier preview */
  .nav-mm-price { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; width: 33rem; max-width: 100%; }
  .nav-mm-tier { position: relative; display: flex; flex-direction: column; gap: .1rem; padding: .8rem .75rem .85rem; border: 1px solid rgba(20,20,43,.1); border-radius: .8rem; text-decoration: none; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; }
  .nav-mm-tier:hover { border-color: rgba(20,20,43,.28); box-shadow: 0 6px 16px -10px rgba(16,24,40,.3); }
  .nav-mm-tier.is-best { border-color: rgba(16,103,254,.45); background: rgba(16,103,254,.05); }
  .nmt-name { font-size: .82rem; font-weight: 600; color: #101828; }
  .nmt-price { font-size: 1.1rem; font-weight: 700; color: #101828; line-height: 1.15; }
  .nmt-price span { font-size: .7rem; font-weight: 500; color: #667085; }
  .nmt-quota { font-size: .72rem; color: #667085; margin-top: .1rem; }
  .nmt-badge { position: absolute; top: -.55rem; right: .5rem; font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; background: #1067fe; border-radius: 999px; padding: .12rem .4rem; }

  @media (prefers-reduced-motion: reduce) { .nav-mega, .nav-mega-panel, .nav-mm-caret, .nav-mm-more svg { transition: none !important; } }
  .mobile-nav-shell { display: none; }

  @keyframes mobile-nav-enter {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
  }

  /* Resend-style mobile navigation: a dedicated full-screen flow instead of
     trying to stretch the desktop mega-menu into a Webflow overlay. */
  @media screen and (max-width: 991px) {
    .navbar { padding-inline: 5%; position: relative; z-index: 1000; background: transparent; }
    .navbar_container {
      display: flex !important; grid-template-columns: none; min-height: 4.5rem;
      padding-block: .75rem; gap: 1rem; background: transparent;
    }
    /* Pull the clipped mobile hero gradient underneath the transparent header.
       The compensating padding keeps the hero content in its original position. */
    #hero { margin-top: -4.5rem; padding-top: 4.5rem; }
    .navbar_container > .nav-desktop { display: none !important; }
    .navbar_logo-link { display: block; flex: 0 1 auto; }
    .navbar_logo-link .navbar2_logo { width: clamp(9.5rem, 24vw, 12rem); height: auto; }
    .navbar_button-wrapper { margin-left: auto; align-items: center; }
    .navbar_button-wrapper > a { display: none !important; }
    .navbar_menu-button { display: block !important; }
    .navbar_menu-button .menu-icon2 {
      width: 2.75rem; height: 2.75rem; margin-right: 0; border: 0;
      border-radius: 0; background: transparent; box-shadow: none;
    }
    .nav-mega { display: none !important; }
    .nav-mm-caret { display: none; }

    .mobile-nav-shell {
      position: fixed; inset: 0; z-index: 2200; display: flex; flex-direction: column;
      color: #101828;
      background:
        radial-gradient(circle at 12% 0%, rgba(165,190,255,.24), transparent 34rem),
        radial-gradient(circle at 92% 8%, rgba(255,211,183,.22), transparent 30rem),
        rgba(248,249,252,.985);
      -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
      animation: mobile-nav-enter .24s cubic-bezier(.22,1,.36,1) both;
    }
    .mobile-nav-topbar {
      width: min(100%, 48rem); min-height: 4.75rem; margin: 0 auto; padding: .875rem 1.25rem;
      display: flex; align-items: center; justify-content: space-between;
    }
    .mobile-nav-logo { display: inline-flex; align-items: center; }
    .mobile-nav-logo img { width: 10.5rem; height: auto; display: block; }
    .mobile-nav-icon-button {
      width: 2.75rem; height: 2.75rem; padding: 0; display: inline-flex; align-items: center; justify-content: center;
      border: 1px solid rgba(16,24,40,.12); border-radius: .75rem; background: rgba(255,255,255,.58);
      color: #101828; box-shadow: 0 8px 24px -16px rgba(16,24,40,.45); cursor: pointer;
    }
    .mobile-nav-icon-button svg { width: 1.35rem; height: 1.35rem; }
    .mobile-nav-icon-button:focus-visible {
      outline: none; box-shadow: 0 0 0 3px rgba(16,103,254,.16), 0 8px 24px -16px rgba(16,24,40,.45);
    }
    .mobile-nav-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
    .mobile-nav-root, .mobile-nav-detail {
      width: min(100%, 42rem); margin: 0 auto; padding: 1rem 1.5rem 3rem;
    }
    .mobile-nav-actions { display: grid; gap: .75rem; margin: .5rem 0 2rem; }
    .mobile-nav-primary-cta, .mobile-nav-secondary-cta {
      min-height: 3.25rem; display: inline-flex; align-items: center; justify-content: center;
      border-radius: .75rem; font-size: .9375rem; font-weight: 600; text-decoration: none;
    }
    .mobile-nav-primary-cta {
      color: #fff; background: #101828; box-shadow: 0 14px 30px -18px rgba(16,24,40,.75);
    }
    .mobile-nav-secondary-cta { color: #344054; background: transparent; }
    .mobile-nav-root-links { border-top: 1px solid rgba(16,24,40,.1); }
    .mobile-nav-root-link, .mobile-nav-list-link {
      width: 100%; min-height: 3.6rem; padding: 0; display: flex; align-items: center; justify-content: space-between;
      border: 0; border-bottom: 1px solid rgba(16,24,40,.1); background: transparent;
      color: #344054; font: inherit; font-size: 1rem; font-weight: 500; text-align: left; text-decoration: none; cursor: pointer;
    }
    .mobile-nav-root-link svg, .mobile-nav-list-link svg, .mobile-nav-view-all svg {
      width: .9rem; height: .9rem; flex: 0 0 auto; transition: transform .16s ease;
    }
    .mobile-nav-root-link:hover svg, .mobile-nav-list-link:hover svg, .mobile-nav-view-all:hover svg { transform: translateX(3px); }
    .mobile-nav-back {
      display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 0; border: 0; background: transparent;
      color: #667085; font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
    }
    .mobile-nav-back svg { width: 1.1rem; height: 1.1rem; }
    .mobile-nav-back:focus-visible { outline: none; border-radius: .4rem; box-shadow: 0 0 0 2px rgba(16,103,254,.16); }
    .mobile-nav-detail-heading { margin: 1.25rem 0 1.5rem; }
    .mobile-nav-detail-heading p, .mobile-nav-section-label {
      margin: 0 0 .4rem; color: #98a2b3; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    }
    .mobile-nav-detail-heading h2 { margin: 0; color: #101828; font-size: clamp(1.75rem, 5vw, 2.25rem); line-height: 1.08; letter-spacing: -.035em; }
    .mobile-nav-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.25rem; }
    .mobile-nav-preview-card {
      min-height: 9rem; padding: 1rem; display: flex; flex-direction: column; align-items: flex-start;
      border: 1px solid rgba(16,24,40,.1); border-radius: 1rem; color: #101828; text-decoration: none;
      background: linear-gradient(145deg, rgba(255,255,255,.82), rgba(255,255,255,.42));
      box-shadow: 0 18px 38px -28px rgba(16,24,40,.45); transition: transform .16s ease, border-color .16s ease;
    }
    .mobile-nav-preview-card:hover { transform: translateY(-2px); border-color: rgba(16,24,40,.22); }
    .mobile-nav-preview-card img { width: 1.8rem; height: 1.8rem; object-fit: contain; margin-bottom: auto; display: block; }
    .mobile-nav-preview-title { margin-top: 1rem; font-size: .95rem; font-weight: 650; line-height: 1.2; }
    .mobile-nav-preview-description { margin-top: .3rem; color: #667085; font-size: .72rem; line-height: 1.35; }
    .mobile-nav-list { border-top: 1px solid rgba(16,24,40,.1); }
    .mobile-nav-doc-list { margin-bottom: 2rem; }
    .mobile-nav-view-all {
      display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.25rem;
      color: #1067fe; font-size: .875rem; font-weight: 650; text-decoration: none;
    }
    .mobile-nav-client-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
    .mobile-nav-client-grid a {
      min-height: 5.75rem; padding: .75rem .4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem;
      border: 1px solid rgba(16,24,40,.08); border-radius: .8rem; background: rgba(255,255,255,.5);
      color: #475467; font-size: .72rem; font-weight: 550; text-align: center; text-decoration: none;
    }
    .mobile-nav-client-grid img { width: 1.5rem; height: 1.5rem; object-fit: contain; display: block; }
  }

  @media screen and (max-width: 479px) {
    .mobile-nav-root, .mobile-nav-detail { padding-inline: 1.25rem; }
    .mobile-nav-topbar { padding-inline: 1.25rem; }
    .mobile-nav-logo img { width: 9.75rem; }
    .mobile-nav-preview-card { min-height: 8.5rem; padding: .875rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-nav-shell { animation: none; }
    .mobile-nav-root-link svg, .mobile-nav-list-link svg, .mobile-nav-view-all svg, .mobile-nav-preview-card { transition: none; }
  }

  /* ===================== Footer type hierarchy ===================== */
  /* Was muddy: 18px column headers barely above 16px links and identical to the email/URL.
     Re-establish a clear scale — brand block > links > label-style column headers > legal. */
  .left-item-footer .heading-style-h5 { font-size: 1.0625rem; line-height: 1.3; color: #101828; }
  .item-footer > .heading-style-h5 {
    font-size: .75rem; line-height: 1.2; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: #98a2b3; margin-bottom: .375rem;
  }
  /* Tighten the link rows — the Webflow default (1rem row-gap) left the columns
     airy; ~.625rem reads compact-but-not-cramped, matching a dense modern footer. */
  .list-footer { grid-row-gap: .625rem; row-gap: .625rem; }
  /* Header → first link gap (was 1.125rem via .item-footer) pulled in to match. */
  .item-footer { grid-row-gap: .75rem; row-gap: .75rem; }
  .list-footer a { font-size: .9375rem; line-height: 1.3; color: #475467; transition: color .15s ease; }
  .list-footer a:hover { color: #101828; }
  /* Left brand block (logo / email / url) was very airy — 1.125rem row-gap plus
     .5rem link padding stacked to ~30px between rows. Pull the rows together. */
  .left-item-footer { grid-row-gap: .5rem; row-gap: .5rem; }
  .left-item-footer .link { padding-block: .125rem; }

  /* ===================== Display type (calibrated to a dense, confident scale) ===================== */
  /* Tighten tracking + leading on the big display headings so short lines read as statements. */
  .heading-style-h1 { letter-spacing: -.035em; }
  .hero-display { letter-spacing: -.045em; line-height: 1.04; }
  @media screen and (max-width: 767px) { .hero-display br { display: none; } }

  /* ===================== Hero eyebrow badge ===================== */
  /* Lovable-style "New" tag + label (replaces the avatars + arrow CTA). The base
     .badge is a fixed 22rem pill; let it hug its content and pull the gap in. */
  /* Transparent — the faint white fill + blur read as a "streak" on the hero gradient.
     Just the blue New tag + label, no pill container. */
  #hero .badge { width: auto; max-width: 100%; grid-column-gap: .5rem; gap: .5rem; padding: 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .badge-new {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    background: #1067fe; color: #fff; border-radius: 999px;
    font-size: .75rem; font-weight: 600; line-height: 1; letter-spacing: .01em;
    padding: .3125rem .5625rem;
  }
  /* Keep the hero subtext from running wider than the title (longest line ~616px)
     so the headline + subtext read as one tight block. */
  #hero .max-width-large { max-width: 38rem; }

  /* ===================== Hero skill CTA (stacked, skill-forward) ===================== */
  /* The copyable "skill" is the star: a prominent block (the whole thing copies +
     flashes "Copied"), then its proof (copy-count + where it runs), then the primary
     CTA below. Copy wired in WebflowRuntime; full prompt in data-skill-text. */
  /* Order: prominent primary CTA on top, then the smaller, quieter secondary "skill"
     with its proof (copy-count + compatibility) tucked beneath it. */
  .skill-hero { display: flex; flex-direction: column; align-items: center; gap: 1.375rem; }
  #hero .skill-hero-cta { font-size: 1rem; padding: .8125rem 2rem; }
  .skill-secondary { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
  .skill-block {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    width: auto; max-width: 100%; appearance: none; -webkit-appearance: none;
    cursor: pointer; font-family: inherit;
    background: #fff; border: 1px solid #e4e7ec; border-radius: 10px;
    padding: .5rem .875rem;
    transition: border-color .15s ease, background .15s ease;
  }
  .skill-block:hover { border-color: #d0d5dd; background: #fcfcfd; }
  .skill-text { font-size: .875rem; font-weight: 500; color: #344054; white-space: nowrap; }
  .skill-copy-icon { flex: 0 0 auto; color: #667085; }
  .skill-block:hover .skill-copy-icon { color: #475467; }
  .skill-block.is-copied { border-color: #a6f4c5; background: #ecfdf3; }
  .skill-block.is-copied .skill-text,
  .skill-block.is-copied .skill-copy-icon { color: #067647; }
  /* Proof of the skill: copy-count + compatibility, one muted line under the block. */
  .skill-proof {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: .3125rem .5625rem; font-size: .8125rem; color: #667085;
  }
  .skill-proof-count { font-weight: 600; color: #475467; }
  .skill-proof-dot { color: #d0d5dd; }
  .hero-works-item { display: inline-flex; align-items: center; gap: .3125rem; font-weight: 500; color: #667085; }
  .hero-works-item img { width: 15px; height: 15px; display: block; }

/* ============================================================================
   Legal / long-form text pages (privacy, terms) reskinned into the (webflow)
   world. Content keeps its semantic HTML; these element rules give it the
   Webflow look (Geist headings, Inter body, dark-on-light). Any leftover
   Tailwind classes on the content are inert here (Tailwind isn't loaded).
   ============================================================================ */
.legal-body { max-width: 48rem; margin: 0 auto; color: #2a2a2f;
  font-family: var(--font-inter), sans-serif; font-size: 1.0625rem; line-height: 1.7; }
.legal-body h1 { font-family: var(--font-geist), sans-serif; font-weight: 500;
  font-size: clamp(2rem, 5vw, 3rem); line-height: 1.08; letter-spacing: -0.02em;
  margin: 0 0 0.5rem; color: #0d0d12; }
.legal-body h2 { font-family: var(--font-geist), sans-serif; font-weight: 500;
  font-size: 1.5rem; line-height: 1.2; margin: 3rem 0 1rem; color: #0d0d12; }
.legal-body h3 { font-family: var(--font-geist), sans-serif; font-weight: 500;
  font-size: 1.15rem; line-height: 1.3; margin: 2rem 0 0.6rem; color: #0d0d12; }
.legal-body p { margin: 0 0 1rem; }
.legal-body ul { margin: 0 0 1.25rem; padding-left: 1.25rem; list-style: disc; }
.legal-body li { margin: 0.4rem 0; }
.legal-body strong { color: #0d0d12; font-weight: 600; }
.legal-body a { color: #2b5cff; text-decoration: underline; text-underline-offset: 2px; }
.legal-body a:hover { opacity: 0.75; }
.legal-body hr { border: 0; border-top: 1px solid rgba(13,13,18,0.1); margin: 2.5rem 0; }
.legal-body .lead { font-size: 1.2rem; color: #0d0d12; margin-bottom: 1.25rem; }
.legal-updated { color: #7a7a85; font-size: 0.95rem; margin: 0 0 2.5rem !important; }

/* Reuse the homepage's blue/orange hero atmosphere on primary conversion pages.
   The fixed-height surface fades naturally into the rest of longer pages. */
.shared-hero-background { position: relative; isolation: isolate; overflow: hidden; }
.shared-hero-background::before { content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -18rem 0 auto; height: 64rem; opacity: .16;
  background-image:
    url("../images/gradient-blur-hero01_1gradient-blur-hero01.avif"),
    url("../images/gradient-blur-hero03_1gradient-blur-hero03.avif"),
    url("../images/gradient-blur-hero02_1gradient-blur-hero02.avif");
  background-repeat: no-repeat;
  background-position: left -42rem top -8rem, right -31rem top -10rem, left -23rem top 14rem;
  background-size: 88rem auto, 55rem auto, 42rem auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%); }

/* Book a demo — compact hero so the booking calendar is visible above the fold. */
.book-demo-section { padding-top: 2.25rem; padding-bottom: 5rem; }
.book-demo-head { text-align: center; max-width: 58rem; margin: 0 auto 1.5rem; }
.book-demo-eyebrow { margin-bottom: 0.75rem; }
/* Enterprise & Agency badge — its own accent (violet) like the pricing page's badge. */
.section-badge.book-demo-badge { margin: 0 auto 1rem; background-color: rgba(124, 58, 237, 0.10); }
.book-demo-badge .text-style-tagline { color: #7c3aed; }
.book-demo-head h1 { margin: 0 0 1rem; text-wrap: balance; }
.book-demo-head > p.text-size-medium { max-width: 52rem; margin-inline: auto; text-wrap: balance; }
.book-demo-card { background: #fff; border: 1px solid rgba(13,13,18,0.08);
  border-radius: 20px; box-shadow: 0 24px 70px rgba(13,13,18,0.07); overflow: hidden;
  padding: 0.5rem; max-width: 64rem; margin-inline: auto; }
.book-demo-cal { width: 100%; min-height: 680px; border-radius: 16px; overflow: hidden; }
.book-demo-empty { padding: 3rem 2rem; text-align: center; }
.book-demo-contact { text-align: center; margin-top: 2rem; }
@media screen and (max-width: 767px) {
  .shared-hero-background::before { top: -12rem; opacity: .13;
    background-position: left -52rem top 0, right -38rem top 0, left -30rem top 14rem; }
  .book-demo-section { padding-top: 1.5rem; padding-bottom: 3rem; }
  .book-demo-head { margin-bottom: 1.25rem; }
}

/* Newsroom list cards + doc back-link + rich-article extras (reuses .legal-body). */
.news-wrap { max-width: 48rem; margin: 0 auto; }
.news-head { margin-bottom: 3rem; }
.news-head h1 { margin: 0.75rem 0 1rem; }
.news-list { display: flex; flex-direction: column; gap: 1rem; }
.news-card { display: block; padding: 1.5rem 1.75rem; background: #fff;
  border: 1px solid rgba(13,13,18,0.08); border-radius: 16px; text-decoration: none;
  transition: border-color .2s, box-shadow .2s, transform .2s; }
.news-card:hover { border-color: rgba(43,92,255,0.4);
  box-shadow: 0 12px 40px rgba(13,13,18,0.06); transform: translateY(-2px); }
.news-meta { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem;
  color: #7a7a85; margin-bottom: 0.5rem; }
.news-cat { color: #2b5cff; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.news-card h2 { font-family: var(--font-geist), sans-serif; font-weight: 500; font-size: 1.4rem;
  color: #0d0d12; margin: 0 0 0.5rem; }
.news-excerpt { color: #4a4a52; margin: 0 0 0.75rem; }
.news-more { color: #2b5cff; font-size: 0.9rem; font-weight: 600; }
.doc-back { display: inline-block; color: #7a7a85; text-decoration: none; margin-bottom: 1.5rem; font-size: 0.95rem; }
.doc-back:hover { color: #0d0d12; }

/* Markdown-rich-article extras layered onto .legal-body */
.legal-body table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.95rem; }
.legal-body th, .legal-body td { border: 1px solid rgba(13,13,18,0.12); padding: 0.5rem 0.75rem; text-align: left; }
.legal-body th { background: rgba(13,13,18,0.03); font-weight: 600; color: #0d0d12; }
.legal-body blockquote { border-left: 3px solid #2b5cff; background: rgba(43,92,255,0.04);
  padding: 1rem 1.25rem; border-radius: 0 8px 8px 0; margin: 1.5rem 0; }
.legal-body code { background: rgba(13,13,18,0.06); padding: 0.15em 0.4em; border-radius: 4px; font-size: 0.9em; }
.legal-body pre { background: #0d0d12; color: #e8e8ea; padding: 1rem 1.25rem; border-radius: 12px; overflow-x: auto; margin: 1.5rem 0; }
.legal-body pre code { background: none; padding: 0; }
.legal-body img { max-width: 100%; border-radius: 12px; }

/* Alternatives hub + comparison pages (content ported to the Webflow look). */
.alt-wrap { max-width: 56rem; margin: 0 auto; }
.alt-head { margin-bottom: 3rem; }
.alt-head h1 { margin: 0.75rem 0 1rem; }
.alt-section { margin-bottom: 3rem; }
.alt-section-title { font-family: var(--font-geist), sans-serif; font-weight: 500;
  font-size: 1.15rem; color: #0d0d12; margin: 0 0 1rem; }
.alt-card, .alt-glance, .alt-cta { background: #fff; border: 1px solid rgba(13,13,18,0.08);
  border-radius: 20px; padding: 1.75rem; }
.alt-glance-list { display: grid; grid-template-columns: 1fr; gap: 0.5rem 2rem;
  list-style: none; padding: 0; margin: 0; font-size: 0.95rem; color: #4a4a52; }
.alt-glance-list li span { color: #0d0d12; font-weight: 600; }
.alt-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.alt-card { display: block; text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s; }
.alt-card:hover { border-color: rgba(43,92,255,0.4); box-shadow: 0 12px 40px rgba(13,13,18,0.06); transform: translateY(-2px); }
.alt-card-eyebrow { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: #7a7a85; margin-bottom: 0.5rem; }
.alt-card-title { font-family: var(--font-geist), sans-serif; font-weight: 500; font-size: 1.15rem; color: #0d0d12; margin-bottom: 0.5rem; }
.alt-card p { color: #4a4a52; font-size: 0.95rem; margin: 0; }
.alt-card-more { display: inline-block; margin-top: 1rem; color: #2b5cff; font-size: 0.9rem; font-weight: 600; }
.alt-note { margin-top: 2.5rem; font-size: 0.85rem; color: #7a7a85; line-height: 1.6; }
.alt-note span { color: #0d0d12; font-weight: 600; }
.alt-cta { text-align: center; margin-top: 3rem; padding: 2.5rem; }
.alt-cta h2 { font-family: var(--font-geist), sans-serif; font-weight: 500; font-size: 1.5rem; color: #0d0d12; margin: 0 0 0.75rem; }
.alt-cta p { color: #4a4a52; margin: 0 0 1.5rem; }
.alt-btn { display: inline-block; background: #0d0d12; color: #fff; border-radius: 999px; padding: 0.75rem 1.5rem; font-weight: 500; text-decoration: none; }
.alt-btn:hover { opacity: 0.9; }
@media (min-width: 640px) {
  .alt-glance-list { grid-template-columns: 1fr 1fr; }
  .alt-glance-list li.wide { grid-column: 1 / -1; }
  .alt-grid { grid-template-columns: 1fr 1fr; }
}

/* Alternatives comparison [slug]: fact table + verdict badges + prose. */
.alt-positioning { color: #4a4a52; line-height: 1.7; margin-bottom: 2.5rem; font-size: 1.05rem; }
.alt-table-wrap { overflow-x: auto; border: 1px solid rgba(13,13,18,0.1); border-radius: 16px; }
.alt-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.alt-table th { padding: 0.85rem 1rem; text-align: left; font-weight: 600; color: #7a7a85; border-bottom: 1px solid rgba(13,13,18,0.1); }
.alt-table th.right, .alt-table td.right { text-align: right; }
.alt-table td { padding: 0.85rem 1rem; vertical-align: top; border-bottom: 1px solid rgba(13,13,18,0.06); color: #4a4a52; }
.alt-table tr:last-child td { border-bottom: 0; }
.alt-table td.factor { font-weight: 600; color: #0d0d12; }
.alt-badge { display: inline-block; border-radius: 999px; padding: 0.25rem 0.6rem; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.alt-badge.win { background: rgba(16,185,129,0.14); color: #0a7a54; }
.alt-badge.even { background: rgba(13,13,18,0.06); color: #5a5a62; }
.alt-badge.concede { background: rgba(245,158,11,0.16); color: #a06a06; }
.alt-source { margin-top: 1rem; border: 1px solid rgba(13,13,18,0.08); background: rgba(13,13,18,0.02); border-radius: 12px; padding: 1rem; font-size: 0.8rem; color: #7a7a85; line-height: 1.6; }
.alt-source span { color: #0d0d12; font-weight: 600; }
.alt-prose h2 { font-family: var(--font-geist), sans-serif; font-weight: 500; font-size: 1.25rem; color: #0d0d12; margin: 2.5rem 0 0.6rem; }
.alt-prose p { color: #4a4a52; line-height: 1.7; margin: 0 0 1rem; }
.alt-faq h3 { font-weight: 600; color: #0d0d12; margin: 0 0 0.25rem; font-size: 1rem; }
.alt-faq p { color: #4a4a52; font-size: 0.95rem; line-height: 1.6; margin: 0 0 1.25rem; }

/* About page — rebuilt as components using the Webflow look (no template inject). */
.about-hero { text-align: center; max-width: 46rem; margin: 0 auto; }
.about-hero h1 { margin: 1rem 0 1.25rem; }
.about-cta-row { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.75rem; }
.about-section-head { max-width: 42rem; margin: 0 auto 2.5rem; text-align: center; }
.about-section-head h2 { margin: 0.75rem 0 0.5rem; }
.about-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.about-card { background: #fff; border: 1px solid rgba(13,13,18,0.08); border-radius: 20px; padding: 1.75rem; }
.about-card-title { font-family: var(--font-geist), sans-serif; font-weight: 500; font-size: 1.25rem; color: #0d0d12; margin: 0 0 0.6rem; }
.about-card p { color: #4a4a52; margin: 0; line-height: 1.6; }
.about-prose { max-width: 44rem; margin: 0 auto; text-align: center; }
.about-prose p { color: #4a4a52; line-height: 1.75; font-size: 1.1rem; }
.about-quote { background: #fff; border: 1px solid rgba(13,13,18,0.08); border-radius: 20px; padding: 1.75rem; display: flex; flex-direction: column; }
.about-quote p { color: #0d0d12; font-size: 1.05rem; line-height: 1.5; margin: 0 0 1.25rem; }
.about-quote cite { color: #7a7a85; font-style: normal; font-size: 0.9rem; margin-top: auto; }
.about-divider { border: 0; border-top: 1px solid rgba(13,13,18,0.08); margin: 0; }
@media (min-width: 768px) {
  .about-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .about-grid.cols-2 { grid-template-columns: 1fr 1fr; }
}

/* How it works — step cards with platform-icon rows. */
.hiw-icons { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 1.25rem; }
.hiw-icons img { width: 40px; height: 40px; object-fit: contain; }
.hiw-step-num { font-size: 0.8rem; font-weight: 600; color: #2b5cff; letter-spacing: 0.04em; }

/* Developers — hero badge, stat band, code, buttons. */
.dev-hero { max-width: 46rem; }
.dev-badge { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: #2b5cff; margin-bottom: 1rem; }
.dev-cta-row { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.75rem; }
.dev-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; text-align: center;
  border-top: 1px solid rgba(13,13,18,0.08); border-bottom: 1px solid rgba(13,13,18,0.08); padding: 2.5rem 0; }
.dev-stat-v { font-family: var(--font-geist), sans-serif; font-weight: 500; font-size: 1.75rem; color: #0d0d12; margin: 0 0 0.25rem; }
.dev-stat-l { font-size: 0.9rem; font-weight: 600; color: #4a4a52; margin: 0 0 0.15rem; }
.dev-stat-s { font-size: 0.78rem; color: #7a7a85; margin: 0; }
.dev-icon { display: inline-flex; padding: 0.6rem; border-radius: 10px; background: rgba(43,92,255,0.08); color: #2b5cff; margin-bottom: 0.85rem; }
@media (min-width: 768px) { .dev-stats { grid-template-columns: repeat(4, 1fr); } }

  /* ======================================================================
     Ported Webflow IX2 scroll animations (homepage) — 1:1 with the POC
     ----------------------------------------------------------------------
     Every selector below maps to a specific element the original Webflow site
     animated (extracted from its IX2 data), with the SAME preset and the SAME
     fixed delay. Nothing else animates (feature cards, pricing plans, setup
     steps and individual testimonials are STATIC in the original).

       a-187 "view 0.1"   -> rise  @100ms   translateY 15px + fade + de-blur, 1000ms
       a-188 "view 0.2"   -> rise  @200ms   (same motion, later delay)
       a-189 "button"     -> pop   @100ms   scale 1.2->1 + fade + de-blur,     800ms
       a-190 "image"      -> zoom  @100ms   scale 1.2->1 + fade + de-blur,    1000ms
       a-168 "Logo [Loop]"-> marquee        infinite translateX, 30s linear
       a-155 "CTA heading"-> parallax       two halves slide ∓40px -> 0 (JS)
       a-111 "layout408"  -> img scrub      scale pulse on scroll (JS)
     Easing = outQuart = cubic-bezier(.165,.84,.44,1).

     Gated on html.wfx (set pre-paint in the layout, homepage only, and only when
     IntersectionObserver is supported + motion allowed) so targets paint hidden
     with NO flash and reduced-motion users never get html.wfx at all. The runtime
     adds .wfx-in on scroll-into-view. Keep this list in sync with WebflowRuntime. */

  /* rise @100 (a-187) — section-leading headings.
     (#hero is NOT here — it is a page-LOAD animation below, not a scroll reveal.) */
  html.wfx #platforms .text-align-center,
  html.wfx #featured h2.heading-style-h1,
  html.wfx #agents .margin-bottom.margin-small,
  html.wfx #benefit h2.heading-style-h1,
  html.wfx #setup .margin-bottom.margin-small,
  /* rise @200 (a-188) — supporting text / whole header blocks */
  html.wfx #featured .header_content-right,
  html.wfx #agents p.text-size-medium,
  html.wfx #benefit p.text-size-medium,
  html.wfx #setup p.text-size-medium,
  html.wfx #pricing .max-width-large.align-center,
  html.wfx #testimonial .text-align-center,
  html.wfx #cta p.text-size-medium {
    opacity: 0;
    /* Webflow's "view" move is 15% of the element's OWN height (NOT a fixed 15px),
       so tall header blocks travel ~40px and single lines ~8px. translateY(%) is
       relative to the element's own box, which reproduces this exactly. */
    transform: translateY(15%);
    /* No filter:blur on scroll reveals — animating blur repaints every frame and
       competes with scroll/INP. The de-blur is kept only on the one-time hero/footer
       load animations (below), where it costs nothing during scrolling. */
    transition: opacity 1000ms cubic-bezier(.165,.84,.44,1),
                transform 1000ms cubic-bezier(.165,.84,.44,1);
    transition-delay: 100ms;
    will-change: transform, opacity;
  }
  html.wfx #featured .header_content-right,
  html.wfx #agents p.text-size-medium,
  html.wfx #benefit p.text-size-medium,
  html.wfx #setup p.text-size-medium,
  html.wfx #pricing .max-width-large.align-center,
  html.wfx #testimonial .text-align-center,
  html.wfx #cta p.text-size-medium { transition-delay: 200ms; }

  /* pop @100 (a-189) — buttons + logo tracks (hero buttons are load-animated below) */
  html.wfx #platforms .logo_list,
  html.wfx #benefit .button-group,
  html.wfx #cta .button-group {
    opacity: 0;
    transform: scale(1.2);
    transition: opacity 800ms cubic-bezier(.165,.84,.44,1),
                transform 800ms cubic-bezier(.165,.84,.44,1);
    transition-delay: 100ms;
    transform-origin: center center;
    will-change: transform, opacity;
  }

  /* zoom @100 (a-190) — benefit card content + image (one-time zoom-in on enter,
     NOT a continuous scrub) + testimonial grid. */
  html.wfx #benefit .card-content-top,
  html.wfx #benefit .layout_image,
  html.wfx #testimonial .testimonial_list {
    opacity: 0;
    transform: scale(1.2);
    transition: opacity 1000ms cubic-bezier(.165,.84,.44,1),
                transform 1000ms cubic-bezier(.165,.84,.44,1);
    transition-delay: 100ms;
    transform-origin: center center;
    will-change: transform, opacity;
  }

  /* revealed state — wins over every preset above, and releases the compositor
     hint (will-change was held indefinitely otherwise, on dozens of elements). */
  html.wfx #main-content .wfx-in {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }

  /* a-168 — infinite logo marquee (two identical tracks, translate one width) */
  /* Static fallback (reduced-motion / no-JS): show only the 6 canonical logos in a
     centered row; the duplicate group + repeat copies used for the seamless loop stay hidden. */
  #platforms .logo_list { justify-content: center; }
  #platforms .logo_list[aria-hidden="true"],
  #platforms .logo_wrapper[aria-hidden="true"] { display: none; }
  /* Marquee (html.wfx): two identical flex groups; translate exactly one group width
     (-50%) so the loop never jumps. Each group repeats the 6 logos to exceed the
     viewport, so the strip is always full — no gap at the seam. */
  html.wfx #platforms .logo_component { width: max-content; animation: wfx-marquee 40s linear infinite; will-change: transform; }
  html.wfx #platforms .logo_list { display: flex; flex: 0 0 auto; flex-wrap: nowrap; grid-template-columns: none; align-items: center; column-gap: 4rem; padding: 0 2rem; }
  html.wfx #platforms .logo_list[aria-hidden="true"],
  html.wfx #platforms .logo_wrapper[aria-hidden="true"] { display: flex; }
  html.wfx #platforms .logo_wrapper { flex: 0 0 auto; padding: 0; }
  @keyframes wfx-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  /* ===================== #1 Social proof — greyscale brand marquee =====================
     Reuses the seamless wfx-marquee loop. Greyscale by default, colour (grey -> ink, or
     de-saturate <img>) on hover. Static wrapped fallback for reduced-motion / no-JS.
     Placeholder wordmarks now; the .brand-logo img rules already handle real logo SVGs. */
  .section_social-proof { background: var(--color-scheme-1--background, #f7f7fb); }
  .social-proof-label { margin: 0 0 2.25rem; text-align: center; font-size: .8125rem; font-weight: 600;
    letter-spacing: .09em; text-transform: uppercase; color: #8a909c; }
  .brand-marquee { width: 100%; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  .brand-marquee__track { display: flex; width: max-content; margin: 0 auto; }
  .brand-track { display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; justify-content: center;
    column-gap: 4rem; row-gap: 1.25rem; padding: 0 2rem; }
  .brand-logo { flex: 0 0 auto; white-space: nowrap; font-family: var(--font-geist), sans-serif;
    font-weight: 600; font-size: 1.4rem; line-height: 1; letter-spacing: -.01em; color: #b0b6c1;
    transition: color .25s ease; }
  .brand-logo:hover { color: #101828; }
  .brand-logo img { height: 1.85rem; width: auto; display: block; filter: grayscale(1); opacity: .55;
    transition: filter .25s ease, opacity .25s ease; }
  .brand-logo:hover img { filter: none; opacity: 1; }
  /* Static fallback: only the 6 canonical brands, wrapping/centred (no duplicate group). */
  .brand-track[aria-hidden="true"], .brand-logo[aria-hidden="true"] { display: none; }
  /* Marquee (html.wfx): single-row groups, reveal duplicates, scroll one group width (-50%). */
  html.wfx .brand-track { flex-wrap: nowrap; }
  html.wfx .brand-marquee__track { animation: wfx-marquee 45s linear infinite; will-change: transform; }
  html.wfx .brand-track[aria-hidden="true"] { display: flex; }
  html.wfx .brand-logo[aria-hidden="true"] { display: inline-block; }

  /* ===================== #4 Ask AI about Adspirer =====================
     Purple-gradient card; buttons deep-link the suggested prompt into each assistant.
     Mobile-first: stacked; row from md. */
  .section_ask-ai { background: var(--color-scheme-1--background, #f7f7fb); }
  .ask-ai-card { position: relative; overflow: hidden; border-radius: 1.75rem; padding: 2.25rem 1.5rem;
    color: #fff; background: radial-gradient(130% 150% at 0% 0%, #4a86ff 0%, #1067fe 48%, #0b45c4 100%);
    display: flex; flex-direction: column; gap: 1.75rem; }
  .ask-ai-heading { font-family: var(--font-geist), sans-serif; font-weight: 500;
    font-size: clamp(1.75rem, 4.5vw, 2.75rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 .75rem; color: #fff; }
  .ask-ai-sub { margin: 0 0 1.5rem; max-width: 30rem; font-size: 1.05rem; line-height: 1.5; color: rgba(255,255,255,.85); }
  .ask-ai-buttons { display: flex; flex-wrap: wrap; gap: .625rem; }
  .ask-ai-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .7rem 1.3rem;
    border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); color: #fff;
    font-weight: 600; font-size: .95rem; text-decoration: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: background .18s ease, color .18s ease, transform .18s ease; }
  .ask-ai-btn:hover { background: #fff; color: #1067fe; transform: translateY(-1px); }
  .ask-ai-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.6); }
  .ask-ai-prompt { border-radius: 1.15rem; padding: 1.35rem 1.5rem; background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .ask-ai-prompt-label { display: block; margin-bottom: .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: rgba(255,255,255,.72); }
  .ask-ai-prompt-text { margin: 0; font-size: 1.02rem; line-height: 1.55; color: #fff; }
  @media (min-width: 768px) {
    .ask-ai-card { flex-direction: row; align-items: center; padding: 3.5rem 3.25rem; gap: 3rem; }
    .ask-ai-left { flex: 1 1 54%; }
    .ask-ai-right { flex: 1 1 46%; }
  }
  @media (prefers-reduced-motion: reduce) { .ask-ai-btn { transition: none; } .ask-ai-btn:hover { transform: none; } }

  /* /book-demo — reserved-height skeleton shown until the Cal.com embed lazy-mounts (#6). */
  .cal-skeleton { display: flex; align-items: center; justify-content: center; min-height: 700px;
    border-radius: 1rem; background: linear-gradient(180deg, rgba(20,20,43,.025), rgba(20,20,43,.05)); }
  .cal-skeleton-label { font-size: .9rem; color: #8a909c; }

  /* ===================== #5 How it works — 3 connection cards (Viktor treatment) ===================== */
  .section_how-it-works { background: var(--color-scheme-1--background, #f7f7fb); }
  .hiw-head { max-width: 40rem; margin: 0 auto 3rem; text-align: center; }
  .hiw-eyebrow { margin: 0 0 .75rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1067fe; }
  .hiw-title { margin: 0 0 1rem; font-family: var(--font-geist), sans-serif; font-weight: 500; letter-spacing: -.02em;
    font-size: clamp(2rem, 5vw, 3rem); line-height: 1.08; color: #101828; }
  .hiw-sub { margin: 0; font-size: 1.1rem; line-height: 1.5; color: #667085; }
  .hiw-cards { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
  @media (min-width: 768px) { .hiw-cards { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; } }
  .hiw-step { display: flex; flex-direction: column; }
  .hiw-card { position: relative; overflow: hidden; border-radius: 1.5rem; aspect-ratio: 4 / 3;
    background: radial-gradient(130% 150% at 0% 0%, #4a86ff 0%, #1067fe 48%, #0b45c4 100%);
    display: flex; align-items: center; justify-content: center; padding: 1.75rem; }
  .hiw-foot { padding: 1.5rem .25rem 0; }
  .hiw-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem;
    border-radius: .55rem; background: linear-gradient(135deg, #1067fe, #0b45c4); color: #fff; font-weight: 700;
    font-size: .95rem; margin-bottom: .85rem; }
  .hiw-step-title { margin: 0 0 .5rem; font-family: var(--font-geist), sans-serif; font-weight: 500; font-size: 1.35rem;
    letter-spacing: -.01em; color: #101828; }
  .hiw-step-desc { margin: 0; font-size: 1rem; line-height: 1.55; color: #667085; }
  .hiw-cta { margin-top: 3rem; text-align: center; }
  /* mock 1 — connect rows */
  .hiw-mock--rows { display: flex; flex-direction: column; gap: .6rem; width: 100%; max-width: 15rem; }
  .hiw-row { display: flex; align-items: center; gap: .6rem; background: #fff; border-radius: .7rem; padding: .55rem .75rem;
    box-shadow: 0 6px 20px -12px rgba(16,24,40,.5); }
  .hiw-row img { width: 22px; height: 22px; flex: 0 0 auto; }
  .hiw-row-name { font-size: .82rem; font-weight: 600; color: #101828; }
  .hiw-row-check { margin-left: auto; color: #12b76a; font-weight: 700; }
  /* mock 2 — constellation */
  .hiw-mock--constellation { position: relative; width: 100%; height: 100%; }
  .hiw-mock--constellation::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 72%; height: 72%; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.32); }
  .hiw-node { position: absolute; display: inline-flex; align-items: center; justify-content: center; background: #fff;
    border-radius: 1rem; box-shadow: 0 8px 24px -14px rgba(16,24,40,.6); }
  .hiw-node img { width: 26px; height: 26px; }
  .hiw-node--center { top: 50%; left: 50%; transform: translate(-50%, -50%); width: 4rem; height: 4rem; border-radius: 1.25rem; z-index: 2; }
  .hiw-node--center img { width: 40px; height: 40px; }
  .hiw-node--a { top: 12%; left: 14%; width: 3rem; height: 3rem; }
  .hiw-node--b { top: 16%; right: 12%; width: 3rem; height: 3rem; }
  .hiw-node--c { bottom: 12%; left: 50%; transform: translateX(-50%); width: 3rem; height: 3rem; }
  /* mock 3 — chat */
  .hiw-mock--chat { display: flex; flex-direction: column; gap: .5rem; width: 100%; }
  .hiw-bubble { border-radius: .8rem; padding: .6rem .8rem; font-size: .8rem; line-height: 1.4; }
  .hiw-bubble--user { align-self: flex-end; background: rgba(255,255,255,.92); color: #101828; max-width: 85%; }
  .hiw-bubble--bot { align-self: flex-start; background: #fff; color: #101828; max-width: 94%; display: flex;
    flex-direction: column; gap: .2rem; box-shadow: 0 8px 24px -16px rgba(16,24,40,.7); }
  .hiw-bubble--bot strong { font-size: .85rem; }
  .hiw-bubble--bot span { color: #667085; }

  /* a-111 — "How it works" sticky stack: each .benefit_card recedes (scale 1->0.8,
     center origin) as the NEXT card scrolls up to pin; the last card stays 1. The
     per-card scale is scroll-scrubbed by WebflowRuntime; this is just the perf hint. */
  html.wfx #benefit .benefit_card { will-change: transform; }

  /* ======================================================================
     Page-LOAD entrance animations REMOVED (2026-07-21) for perceived speed.
     The navbar, homepage #hero, and #pricing hero previously faded/rose/popped
     in on first paint (wfx-load-rise / wfx-load-pop keyframes with a 340-540ms
     start delay + filter:blur on the largest text). That made the top of the
     page feel jittery and delayed, so the nav and heroes now render IMMEDIATELY
     and fully visible on load — matching the "hero shows instantly" goal (only
     Cal.com, a heavy third-party embed, still loads slightly deferred).
     Below-the-fold scroll reveals (html.wfx .wfx-in, .reveal-up / .reveal-zoom)
     are intentionally untouched — those fire as you scroll, not on load. */

  /* Desktop nav: center the link menu to the PAGE (not just space-between the
     three items, which pushes it left of center). 1fr | auto | 1fr keeps the
     logo hard-left and the buttons hard-right while the menu column is centered. */
  @media (min-width: 992px) {
    .navbar { padding-inline: 6%; }
    .navbar_container { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
    .navbar_container > .navbar_logo-link { justify-self: start; }
    .navbar_container > .navbar_menu { justify-self: center; }
    .navbar_container > .navbar_button-wrapper { justify-self: end; }
    .navbar_menu[data-mm-group] > .navbar_link { font-size: .9rem; }
    .navbar_button-wrapper { gap: .75rem; margin-left: 1.25rem; }
    .navbar_button-wrapper > a { padding: .65rem 1.1rem !important; white-space: nowrap; }
  }

  /* ===================================================================
     Enterprise landing page (/enterprise)
     =================================================================== */
  .ent-section-head { max-width: 42rem; margin: 0 auto 3rem; text-align: center; }
  .ent-section-head h2 { margin: 0 0 1rem; }
  .ent-badge, .ent-cta-badge { margin-bottom: 1.25rem; }

  /* A2 hero — typographic. There is deliberately no product mock here: a screenshot
     of a chat window frames this as software, and the page is selling a hire. */
  /* Blue hero accent — deliberately brand-blue (not the homepage's orange .text-span)
     to differentiate the Enterprise page from the main site. */
  .ent-accent { color: #1067fe; }
  /* Keep the accent phrase from orphaning a word onto its own line. */
  .ent-hero-h1, .ent-hero-sub, .ent-cta-h2 { text-wrap: balance; }
  .ent-cta-h2 { margin: 0 0 1rem; }

  /* .bg-blur-hero-1 ships as `inset: -10% auto auto 0%` — its top offset is a
     PERCENTAGE OF THE HERO'S HEIGHT. Above 479px the hero does not clip, so the
     bloom is meant to bleed up behind the transparent 97px navbar. The homepage
     hero is tall enough that -10% clears it; this hero is typographic and much
     shorter, so -10% resolved to ~-70px and left the bloom's hard top edge
     visible as a band across the nav, right above the logo. Pin it to a fixed
     offset that clears the navbar regardless of how tall this hero ends up. */
  @media (min-width: 480px) {
    .ent-hero .bg-blur-hero-1 { top: -8rem; }
  }

  /* "Works in" strip — the surfaces the agent shows up on, stated plainly under the
     CTA, with the plan-coverage claim as a note beneath. Replaces the old chip row.
     Separated by spacing rather than hairline rules: the list wraps at most widths,
     and CSS cannot tell that an item has wrapped, so a drawn separator would orphan
     to the left of the first item on each new row. */
  .ent-works-in { margin: 2.75rem auto 0; padding-top: 1.5rem; max-width: 46rem;
    border-top: 1px solid rgba(16,24,40,.10); text-align: center;
    font-size: .9rem; line-height: 1.6; color: #667085; text-wrap: balance; }
  .ent-works-in strong { font-weight: 600; color: #344054; }
  @media (max-width: 767px) {
    .ent-works-in { margin-top: 2.25rem; padding-top: 1.25rem; font-size: .875rem; }
  }

  /* A4 brand marquee (standalone — works off the homepage) */
  .ent-brands { padding: 2.5rem 0; background: var(--color-scheme-1--background, #f7f7fb); }
  .ent-brands-label { text-align: center; margin: 0 0 2rem; font-size: .8125rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #667085; }
  .ent-marquee { width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
  .ent-marquee-track { display: flex; width: max-content; align-items: center; column-gap: 4rem; padding: 0 2rem; animation: ent-scroll 45s linear infinite; }
  .ent-marquee:hover .ent-marquee-track { animation-play-state: paused; }
  .ent-logo { flex: 0 0 auto; white-space: nowrap; font-family: var(--font-geist), sans-serif; font-weight: 600; font-size: 1.4rem; letter-spacing: -.01em; color: #b0b6c1; transition: color .25s ease; }
  .ent-logo:hover { color: #101828; }
  @keyframes ent-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  @media (prefers-reduced-motion: reduce) { .ent-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 1.25rem; } .ent-marquee { -webkit-mask-image: none; mask-image: none; } }

  /* A3 capability + A6 security grids */
  .ent-caps { background: var(--color-scheme-1--background, #f7f7fb); }
  .ent-cap-grid, .ent-sec-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
  @media (min-width: 640px) { .ent-cap-grid, .ent-sec-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 992px) { .ent-cap-grid { grid-template-columns: repeat(3, 1fr); } .ent-sec-grid { grid-template-columns: repeat(4, 1fr); } }
  .ent-cap, .ent-sec-tile { border: 1px solid rgba(20,20,43,.08); border-radius: 1.1rem; padding: 1.6rem; background: #fff; }
  .ent-cap-ico, .ent-sec-ico { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: .7rem; background: rgba(16,103,254,.08); color: #1067fe; margin-bottom: 1rem; }
  .ent-cap-ico svg, .ent-sec-ico svg { width: 1.4rem; height: 1.4rem; }
  .ent-cap-title, .ent-sec-title { margin: 0 0 .45rem; font-family: var(--font-geist), sans-serif; font-weight: 500; font-size: 1.2rem; letter-spacing: -.01em; color: #101828; }
  .ent-cap-desc, .ent-sec-desc { margin: 0; font-size: 1rem; line-height: 1.55; color: #667085; }
  /* Capability titles run one or two lines depending on viewport width. Grid already
     stretches every card in a row to equal height, so anchoring the description to
     the bottom keeps descriptions aligned when a title wraps — and costs nothing
     when none of them do (unlike a fixed title min-height, which always reserves
     the second line). Descriptions are copy-capped at ~80 chars = two lines. */
  .ent-cap-title { line-height: 1.3; }
  @media (min-width: 640px) {
    .ent-cap { display: flex; flex-direction: column; }
    .ent-cap-desc { margin-top: auto; padding-top: .35rem; }
  }
  .ent-sec-tile { padding: 1.4rem; }
  .ent-sec-title { font-size: 1.05rem; }
  .ent-sec-link { display: inline-flex; align-items: center; min-height: 44px; color: #1067fe; font-weight: 600; white-space: nowrap; }

  /* A5 testimonials */
  /* A5 testimonials — enterprise-outcome tiles, Viktor-style photo treatment. */
  .ent-tst-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; max-width: 56rem; margin: 0 auto; }
  @media (min-width: 768px) { .ent-tst-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } }
  .ent-tst { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 1.75rem; padding: 2.25rem; border: 1px solid rgba(16,24,40,.09); border-radius: 1.25rem; background: #fff; box-shadow: 0 1px 2px #1018280f, 0 1px 3px #1018281a; }
  .ent-tst-quote { margin: 0; border: 0; padding: 0; font-family: var(--font-geist), sans-serif; font-size: 1.35rem; line-height: 1.45; letter-spacing: -.01em; color: #101828; }
  .ent-tst-foot { display: flex; align-items: center; gap: .875rem; text-align: left; }
  .ent-tst-photo { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%; overflow: hidden; background: #eef2f7; display: inline-flex; align-items: center; justify-content: center; }
  .ent-tst-photo svg, img.ent-tst-photo { width: 100%; height: 100%; display: block; }
  img.ent-tst-photo { object-fit: cover; }
  .ent-tst-id { display: flex; flex-direction: column; min-width: 0; }
  .ent-tst-name { color: #101828; font-size: 1rem; font-weight: 600; }
  .ent-tst-role { color: #667085; font-size: .875rem; overflow-wrap: anywhere; }
  .ent-tst-logo { margin-left: auto; align-self: center; font-family: var(--font-geist), sans-serif; font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; color: #b0b6c1; white-space: nowrap; }
  /* Enterprise — mobile overflow guard. */
  main.ent { overflow-x: clip; }