/* Talk-to-an-expert page — page-specific styles only.
   Base tokens, typography, .btn, .container, nav and footer live in base.css. */

/* ── HERO ─────────────────────────────────────────────── */
.talk-hero {
  padding: 80px 0 48px;
  position: relative;
  overflow: hidden;
  text-align: center;
}
.talk-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--mist-04) 1px, transparent 1px),
    linear-gradient(90deg, var(--mist-04) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, black 30%, transparent 80%);
  pointer-events: none;
  z-index: 0;
}
.talk-hero-mesh {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 80% 30%, rgba(0, 212, 170, 0.15), transparent 60%),
    radial-gradient(ellipse 40% 30% at 15% 75%, rgba(59, 130, 246, 0.12), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.talk-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.talk-hero-inner .eyebrow { display: inline-block; }
.talk-hero h1 { margin-bottom: 20px; }
.talk-hero-sub {
  font-size: 19px;
  line-height: 1.55;
  color: var(--mist-80);
  max-width: 600px;
  margin: 0 auto;
}

/* ── SCHEDULER + FALLBACK ─────────────────────────────── */
.talk-scheduler {
  padding: 16px 0 96px;
}
.talk-scheduler-heading {
  text-align: center;
  margin-bottom: 32px;
}

/* HubSpot's loader script injects an iframe inside this div and resizes
   it via postMessage. The min-height stops the page from collapsing
   while the iframe boots. */
.meetings-iframe-container {
  max-width: 920px;
  margin: 0 auto;
  min-height: 720px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--mist-04);
  border: 1px solid var(--mist-08);
}
.meetings-iframe-container iframe {
  width: 100%;
  border: 0;
  display: block;
}

.talk-fallback {
  margin: 56px auto 0;
  max-width: 640px;
  text-align: center;
  padding-top: 32px;
  border-top: 1px solid var(--mist-08);
}
.talk-fallback p {
  margin: 0 auto;
  color: var(--mist-60);
  font-size: 15px;
  line-height: 1.6;
}
.talk-fallback-link {
  color: var(--flow-teal);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
  cursor: pointer;
  transition: color 200ms var(--ease), border-bottom-style 200ms var(--ease);
}
.talk-fallback-link:hover,
.talk-fallback-link:focus-visible {
  color: var(--mist);
  border-bottom-style: solid;
  outline: none;
}
.talk-fallback-noscript {
  margin-top: 8px;
  font-size: 13px;
  color: var(--mist-40);
}