/* ============================================================================
   bright skin — theme overrides (built from scratch, mirrors spurtest.com)
   Loaded last, after the base stylesheets, so it wins the cascade.
   Design tokens taken from the spurtest.com landing page:
     page cream  #fffdf8    ink #1b1919    hairline #ece4d6
     accent blue #0435dd    dark surface #1b1919
   ========================================================================== */

/* Real display serif from spurtest.com (Medium/500 — the weight all headings
   use), replacing the earlier Fraunces stand-in. */
@font-face {
  font-family: 'Martinaplantijn';
  src: url('fonts/MartinaPlantijn-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --s2-page:   #fffdf8;
  --s2-ink:    #1b1919;
  --s2-muted:  rgba(27, 25, 25, 0.62);
  --s2-line:   #ece4d6;
  --s2-blue:   #0435dd;
  --s2-coral:  #fa626c;
  --s2-cta:    #1b1919;
  --s2-cta-hover: #0435dd;
  --s2-nav-h:  74px;
  --s2-font:   'Geist', 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --s2-serif:  'Martinaplantijn', 'Fraunces', Georgia, 'Times New Roman', serif;
}

body {
  font-family: var(--s2-font) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ------------------------------- TOP MENU -------------------------------- */
.s2-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  transform: translateY(0);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease, background-color .3s ease;
}
.s2-header.s2-hidden { transform: translateY(-100%); }
.s2-header.s2-scrolled .s2-nav {
  box-shadow: 0 1px 0 var(--s2-line), 0 6px 24px -18px rgba(27, 25, 25, .45);
}

.s2-nav {
  background-color: rgba(255, 253, 248, 0.86);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  /* No divider at rest — matches spurtest.com (the subtle shadow still
     appears on scroll via .s2-scrolled). */
  border-bottom: 1px solid transparent;
}

.s2-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--s2-nav-h);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

/* left cluster: logo + links */
.s2-nav-left { display: flex; align-items: center; gap: 44px; min-width: 0; }
.s2-logo-link { display: inline-flex; align-items: center; flex: none; }
.s2-logo { height: 30px; width: auto; display: block; }

.s2-nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
  margin: 0; padding: 0;
  list-style: none;
}

.s2-nav-link {
  color: var(--s2-ink);
  font-family: var(--s2-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  transition: opacity .2s ease;
}
/* spurtest hover: hovering one link dims the OTHER links to 0.5 opacity while
   the hovered one stays full (no color change). Scoped to the links group so
   it never touches the Log In / CTA cluster. */
.s2-nav-links:has(.s2-nav-link:hover) .s2-nav-link:not(:hover) { opacity: 0.5; }

/* right cluster: sign-in + CTA */
.s2-nav-actions { display: flex; align-items: center; gap: 22px; flex: none; }
.s2-signin { font-weight: 500; }

/* CTA — exact match to spurtest.com's .button_main_wrap (primary):
   bg #1b1919, radius 9px, padding 1.38rem/1.44rem (~20x21px, ~51px tall),
   Geist 500 @ 16px, letter-spacing -0.216px, 1px same-color border,
   hover flips bg + border to blue #0435dd (no lift, no shadow). */
.s2-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  background-color: var(--s2-cta);
  background-clip: padding-box;
  color: #fff;
  font-family: var(--s2-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  letter-spacing: -0.014em;
  text-align: center;
  padding: 16.5px 21px;
  border: 1px solid transparent;
  border-radius: 9px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
/* Colored gradient border ring, exactly like spurtest's .button_main_border:
   a full coral ring (::before) with a blue ring on top (::after) masked to
   fade in left->right, giving a coral->blue two-tone edge. */
.s2-cta::before,
.s2-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid;
  border-radius: inherit;
  pointer-events: none;
}
.s2-cta::before { border-color: var(--s2-coral); }
.s2-cta::after {
  border-color: var(--s2-blue);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0), #000);
}
.s2-cta:hover {
  background-color: var(--s2-cta-hover);
  color: #fff;
}

/* hamburger (mobile only) */
.s2-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
  border-radius: 10px;
}
.s2-burger span {
  display: block; width: 22px; height: 2px;
  background: var(--s2-ink);
  transition: transform .25s ease, opacity .2s ease;
}
.s2-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.s2-burger.is-open span:nth-child(2) { opacity: 0; }
.s2-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* mobile drop panel */
.s2-mobile {
  border-bottom: 1px solid var(--s2-line);
  background: var(--s2-page);
  padding: 12px 24px 22px;
}
.s2-mobile[hidden] { display: none; }
.s2-mobile-links { list-style: none; margin: 0; padding: 8px 0; display: flex; flex-direction: column; gap: 4px; }
.s2-mobile-links li { border-bottom: 1px solid var(--s2-line); }
.s2-mobile-links a { display: block; padding: 14px 2px; font-size: 17px; }
.s2-mobile-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.s2-cta--block { width: 100%; padding: 15px 22px; font-size: 16px; }

/* responsive: collapse to hamburger below 1024px */
@media (max-width: 1023px) {
  .s2-nav-links, .s2-nav-actions { display: none; }
  .s2-burger { display: inline-flex; }
}
@media (min-width: 1024px) {
  .s2-mobile { display: none !important; }
  /* Center the primary links in the bar (spurtest.com-style):
     logo pinned left, links dead-center, actions pinned right.
     Equal 1fr side tracks keep the center track at the true page center. */
  .s2-nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .s2-nav-left { justify-self: start; }
  .s2-nav-links { justify-self: center; }
  .s2-nav-actions { justify-self: end; }
}

/* nudge page content clear of the fixed header (base body sections start
   with their own top spacer; this guarantees no overlap on short screens) */
.s2-header + div { padding-top: var(--s2-nav-h); }

/* -------------------------------- HERO ---------------------------------- */
/* root.html prepends a 144px top spacer (<div class="mb-36">) before every
   section; with the fixed nav clearance + hero padding that doubles the gap
   above the headline. Neutralise it for bright so the hero owns its top space. */
.min-h-screen > .mb-36:first-child { margin-bottom: 0; }

.s2-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* ~101px gap from the nav to the headline, matching the original */
  padding: 100px 24px 0;
  /* clip the oversized watercolor bg horizontally without a page scrollbar,
     while letting the decorative graphics overflow upward (overflow-y visible) */
  overflow-x: clip;
}
/* Headline — exact match to spurtest's .hero_main_title:
   serif (Martina Plantijn -> Fraunces), 57.6px / 500 / line-height 1 /
   letter-spacing -0.432px (-0.0075em), #232323. Responsive down on mobile. */
.s2-hero-title {
  font-family: var(--s2-serif);
  font-weight: 500;
  /* match the original: it renders 57.6px on desktop (its root is 14.4px, so
     4rem = 57.6px). At our 16px root that's 3.6rem. */
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.6rem);
  line-height: 1.0;
  letter-spacing: -0.0075em;
  color: #232323;
  max-width: 56rem;
  margin: 0 0 22px;
  text-wrap: balance;
}
/* Sub / value proposition — .hero_main_text: Geist 18.9px / 600 /
   line-height 1.4 / letter-spacing -0.216px (-0.0114em), #232323. */
.s2-hero-sub {
  font-family: var(--s2-font);
  font-weight: 600;
  font-size: 1.18rem;
  line-height: 1.4;
  letter-spacing: -0.0114em;
  color: #232323;
  max-width: 540px;
  margin: 0;
}
/* prompt-row CTA (inside the rounded input pill): dark round button */
.s2-hero-prompt-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 24px;
  border-radius: 9999px;
  background-color: var(--s2-cta);
  color: #fff;
  font-family: var(--s2-font);
  font-weight: 600;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background-color .2s ease;
}
.s2-hero-prompt-cta:hover { background-color: var(--s2-cta-hover); color: #fff; }

/* ---- Hero showcase: decorative graphics, watercolor bg, tabbed Lottie ----
   Faithful reproduction of spurtest.com's hero (.hero_main_* / .div-block-149
   / .hero-tab* / .hero-animation_lottie), values resolved from the original
   Webflow stylesheet. */
.s2h-header { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.s2h-content {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(2rem, 1.9rem + 0.5vw, 2.5rem);
}
.s2h-inner { position: relative; }

/* floating badge/cursor graphics around the headline */
.s2h-graphic { position: absolute; pointer-events: none; z-index: 2; height: auto; }
.s2h-graphic-1 { width: 13.75rem; top: 0; left: 0; transform: translate(-100%, -60%); }
.s2h-graphic-2 { width: 12.1rem; top: 0; right: 0; transform: translate(113%, -9%); }

/* watercolor bg + tabs/lottie */
.s2h-showcase {
  position: relative; width: 100%; margin-top: 2.5rem;
  display: flex; flex-direction: column; align-items: center;
}
.s2h-bg {
  position: absolute; z-index: 0; left: 50%; top: 50%;
  /* match the original: bg spans the content container (~1400px), not 175% */
  width: 100%; max-width: 100%; transform: translate(-50%, -50%);
  pointer-events: none;
}
/* product illustration (data-sources chat) as a floating browser window */
.s2h-illus {
  position: relative; z-index: 1; width: 100%; max-width: 64rem;
  margin: 2.5rem auto 0; height: clamp(440px, 50vw, 640px);
  border-radius: 16px; overflow: hidden; background: #fff;
  border: 1px solid #e7e7ea;
  box-shadow: 0 1px 2px rgba(21, 21, 21, .05), 0 24px 60px rgba(21, 21, 21, .14);
}
.s2h-illus-frame { display: block; width: 100%; height: 100%; border: 0; }
/* fade the clipped conversation into the card's white bottom edge */
.s2h-illus::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}

/* entrance cascade (mirrors the original's fadeSlideUp timing) */
@keyframes s2hFadeUp { from { opacity: 0; transform: translateY(3rem); } to { opacity: 1; transform: translateY(0); } }
@keyframes s2hFade   { from { opacity: 0; } to { opacity: 1; } }
.s2-hero .s2-hero-title { opacity: 0; animation: s2hFadeUp .6s ease 0s forwards; }
.s2-hero .s2-hero-sub   { opacity: 0; animation: s2hFadeUp .6s ease .2s forwards; }
.s2h-illus              { opacity: 0; animation: s2hFadeUp .6s ease .4s forwards; }
.s2h-bg                 { opacity: 0; animation: s2hFade   .6s ease .6s forwards; }

@media (max-width: 991px) {
  .s2h-graphic-1 { width: 9rem; transform: translate(-30%, -75%); }
  .s2h-graphic-2 { width: 9rem; transform: translate(30%, -20%); }
}
@media (max-width: 700px) {
  .s2h-graphic { display: none; }
}

/* ---- "Trusted by the world's leading brands" logo strip ----
   Mirrors the original .logo_grid section: centered faded title + a 5-up
   grid of contained, monochrome logos. */
.s2-trusted { max-width: 87.5rem; margin: 0 auto; padding: 72px 24px; }
.s2-trusted-title {
  text-align: center; color: rgba(27, 25, 25, 0.5);
  font-family: var(--s2-font); font-weight: 500; font-size: 1.3125rem; line-height: 1.3;
  letter-spacing: -0.01em; margin: 0 0 48px;
}
.s2-trusted-logos {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 48px 24px; align-items: center; justify-items: center;
}
.s2-trusted-item { display: flex; align-items: center; justify-content: center; width: 100%; }
.s2-trusted-item img {
  height: 2rem; max-width: 120px; width: auto; object-fit: contain; display: block;
}
@media (max-width: 991px) { .s2-trusted-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .s2-trusted-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; } }

/* ---- Product tabs — restyle to the original "Customers with real
   applications" card design: pill selector + white rounded card. ---- */
.s2-tabs { max-width: 80rem; margin: 0 auto; padding: 40px 24px 72px; }
.s2-tabs-heading {
  text-align: center; font-family: var(--s2-serif); font-weight: 500;
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.6rem); line-height: 1.05;
  letter-spacing: -0.02em; color: var(--s2-ink); margin: 0 0 32px;
}

/* tab toolbar bar (white rounded container: pills left, CTA button right) */
.s2-tabs-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: #fff; border: 1px solid #ece4d6; border-radius: 18px;
  box-shadow: 0 1px 2px rgba(27, 25, 25, 0.06);
  padding: 10px; margin-bottom: 32px;
}
/* the tab CTA reuses .s2-cta (identical border to "Book a Demo"); only add the arrow gap */
.s2-tabs-cta { flex: none; gap: 9px; }

/* pill tab selector */
.s2-tabs-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.s2-tabs-pill {
  /* match the original: rounded-rectangle (9px) chip, bold (700) Geist,
     solid #232323 label + a themed 22px icon badge; active turns blue */
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid transparent; background: #f2f2f0; color: #232323;
  font-family: var(--s2-font); font-weight: 700; font-size: 16px; line-height: 1;
  padding: 10px 14px; border-radius: 9px; cursor: pointer; white-space: nowrap;
  transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}
.s2-tabs-pill-icon { width: 22px; height: 22px; flex: none; display: block; }
.s2-tabs-pill:hover { background: #ececea; }
.s2-tabs-pill.is-active { border-color: var(--s2-blue); color: var(--s2-blue); background: #ecf0fe; }

/* white rounded card, media left + content right */
.s2-tabs-card { display: none; }
.s2-tabs-card.is-active {
  display: grid; grid-template-columns: 1fr 1fr; align-items: center;
  background: #fff; border: 1.5px solid #d9d9d9; border-radius: 30px; padding: 2rem;
}
.s2-tabs-card-media { border-radius: 12px; overflow: hidden; align-self: stretch; }
.s2-tabs-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.s2-tabs-card-content {
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  padding: 1.5rem 1rem 1.5rem 3rem;
}
.s2-tabs-card-title {
  font-family: var(--s2-serif); font-weight: 500;
  font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.25rem); line-height: 1.12;
  letter-spacing: -0.015em; color: var(--s2-ink); margin: 0;
}
.s2-tabs-card-body {
  font-family: var(--s2-font); font-size: 1.0625rem; line-height: 1.5;
  color: rgba(27, 25, 25, 0.68); margin: 0;
}
@media (max-width: 860px) {
  .s2-tabs-bar { flex-direction: column; align-items: stretch; border-radius: 20px; }
  .s2-tabs-menu { justify-content: center; }
  .s2-tabs-cta { justify-content: center; }
  .s2-tabs-card.is-active { grid-template-columns: 1fr; }
  .s2-tabs-card-media img { aspect-ratio: 16 / 9; }
  .s2-tabs-card-content { padding: 1.5rem 0.5rem 0.5rem; }
}

/* Agents section (id_agents) reuses the .s2-tabs* card system; content left,
   HTML-illustration iframe right. */
.s2-agents {
  max-width: 80rem; margin: 32px auto; padding: 44px 48px 56px;
  /* bordered box + dashed-line grid background, like the original section */
  border: 1px solid #d9d9d9; border-radius: 18px;
  background-color: #fffefb;
  background-image:
    linear-gradient(rgba(255, 251, 244, 0.5), rgba(255, 251, 244, 0.5)),
    url('hero/background-grid.svg');
  background-size: auto, 50.4px;
  background-repeat: repeat, repeat;
}
/* agent icon next to the card title (like the original), + soft blue shadow
   on all blue agent icons (pills + title), matching the checkbox depth */
.s2-agents-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.s2-agents-title-icon { flex: none; width: 34px; height: 34px; display: block; }
/* The illustrations are oversized HTML "posters" (~1500px, 68px base font),
   so render the iframe at its native size and scale the whole thing down to
   fit the media box (scale refined by JS from the box width). */
.s2-tabs-card-media--frame {
  aspect-ratio: 3 / 2; align-self: center; background: #fff;
  position: relative; overflow: hidden;
  /* thin black border around the illustration (like the original) */
  border: 1px solid #1b1919;
}
/* blue-checkmark "Core Objectives" list (Covers Every Use-Case style):
   1.5px #d9d9d9 divider under each row, check.png marker (shadow baked in). */
.s2-agents-objectives { list-style: none; margin: 0; padding: 0; }
.s2-agents-objectives li {
  display: flex; gap: 14px; align-items: center;
  padding: 0.9rem 0; border-bottom: 1.5px solid #d9d9d9;
  font-family: var(--s2-font); font-weight: 500; font-size: 1.0625rem; line-height: 1.4;
  color: var(--s2-ink);
}
.s2-agents-check { flex: none; width: 22px; height: 22px; display: block; }
/* per-agent customer quote under the objectives (mirrors spurtest .card-testimonial) */
.s2-agents-quote { margin: 24px 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.s2-agents-quote-text {
  margin: 0; padding: 0; border: 0;
  font-family: var(--s2-font); font-weight: 500; font-size: 1.1875rem; line-height: 1.4;
  letter-spacing: -0.01em; color: var(--s2-ink); text-wrap: pretty;
}
.s2-agents-quote-author { display: flex; align-items: center; gap: 0.75rem; }
.s2-agents-quote-avatar { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 10px; object-fit: cover; display: block; }
.s2-agents-quote-meta { display: flex; flex-direction: column; }
.s2-agents-quote-name { font-family: var(--s2-font); font-weight: 600; font-size: 0.9375rem; color: var(--s2-ink); }
.s2-agents-quote-role { font-family: var(--s2-font); font-size: 0.9375rem; color: rgba(27, 25, 25, 0.55); }
.s2-tabs-card-media--frame iframe {
  position: absolute; top: 0; left: 0;
  width: 1500px; height: 1000px; border: 0;
  transform-origin: top left; transform: scale(0.38);
}

/* Solution: 3 high-level section tabs; each tab = a clickable blue-checkbox
   itemized list (left) + the selected item's illustration (right). */
#id_solution .s2-tabs-card.is-active,
#id_howitworks .s2-tabs-card.is-active { display: block; }
.s2-solution-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; }
.s2-solution-list { list-style: none; margin: 0; padding: 0; }
.s2-solution-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 15px 12px; border-bottom: 1.5px solid #d9d9d9;
  cursor: pointer; border-radius: 8px; transition: background-color .15s ease;
}
.s2-solution-item:hover { background: rgba(27, 25, 25, 0.035); }
.s2-solution-item.is-active { background: #ecf0fe; border-bottom-color: transparent; }
.s2-solution-item-text { display: flex; flex-direction: column; gap: 3px; }
.s2-solution-item-text strong {
  font-family: var(--s2-font); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; color: var(--s2-ink);
}
.s2-solution-item-text span {
  font-family: var(--s2-font); font-size: 0.97rem; line-height: 1.45; color: rgba(27, 25, 25, 0.66);
}
.s2-solution-media { position: relative; }
.s2-solution-frame { display: none; }
.s2-solution-frame.is-active { display: block; }
/* active tab (section) title, shown left above the list */
.s2-solution-tab-title { margin: 0 0 20px; }

/* ---- Testimonials carousel (spurtest.com style): big centered serif quote
   + author, navigated by dots, faint radial glow behind. ---- */
.s2-quotes {
  max-width: 62rem; margin: 56px auto; padding: 40px 24px; text-align: center; position: relative;
  background: radial-gradient(60% 70% at 50% 42%, rgba(250, 98, 108, 0.06), rgba(255, 253, 248, 0) 70%);
}
.s2-quotes-track { position: relative; }
.s2-quote { display: none; }
.s2-quote.is-active { display: block; }
.s2-quote-text {
  /* reset Webflow's default blockquote border/padding */
  border: 0; padding: 0;
  font-family: var(--s2-serif); font-weight: 500;
  font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.45rem); line-height: 1.28;
  letter-spacing: -0.01em; color: var(--s2-ink); margin: 0 0 34px; text-wrap: balance;
}
.s2-quote-name { font-family: var(--s2-font); font-weight: 600; font-size: 1.0625rem; color: var(--s2-ink); }
.s2-quote-role { font-family: var(--s2-font); font-size: 0.97rem; color: rgba(27, 25, 25, 0.6); margin-top: 4px; }
.s2-quotes-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }
.s2-quotes-dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(27, 25, 25, 0.2); transition: background-color .2s ease, width .2s ease;
}
.s2-quotes-dot:hover { background: rgba(27, 25, 25, 0.4); }
.s2-quotes-dot.is-active { width: 26px; background: var(--s2-ink); }

/* ---- Results / KPI card (spurtest.com "95% …" style) ---- */
.s2-kpi { max-width: 80rem; margin: 32px auto; padding: 0 24px; }
.s2-kpi-card { border: 1px solid #d9d9d9; border-radius: 30px; background: #fffefb; padding: clamp(32px, 3.2vw, 64px); }
.s2-kpi-hero { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 3vw, 56px); align-items: center; }
.s2-kpi-hero-num {
  font-family: var(--s2-serif); font-weight: 500; line-height: 0.95; color: var(--s2-ink); white-space: nowrap;
  font-size: clamp(3rem, 1.8rem + 5.5vw, 5.5rem);
}
.s2-kpi-hero-text {
  font-family: var(--s2-serif); font-weight: 500; line-height: 1.25; color: var(--s2-ink);
  font-size: clamp(1.35rem, 1rem + 1.3vw, 2rem);
}
.s2-kpi-squiggle { display: block; width: min(260px, 65%); height: 12px; margin-top: 10px; }
.s2-kpi-divider { border: 0; border-top: 1px solid #d9d9d9; margin: clamp(28px, 3vw, 44px) 0; }
.s2-kpi-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.s2-kpi-stat-num {
  font-family: var(--s2-serif); font-weight: 500; line-height: 1; color: var(--s2-ink); margin-bottom: 12px;
  font-size: clamp(2rem, 1.4rem + 2vw, 3rem);
}
.s2-kpi-stat-label { font-family: var(--s2-font); font-size: 1rem; line-height: 1.4; color: rgba(27, 25, 25, 0.62); }
.s2-kpi-cta-row { display: flex; justify-content: flex-end; margin-top: clamp(28px, 3vw, 44px); }

/* ---- Footer (spurtest.com-style light card) ---- */
.s2-footer { max-width: 80rem; margin: 40px auto 48px; padding: 0 24px; }
.s2-footer-card { border: 1px solid #d9d9d9; border-radius: 30px; background: #fffefb; padding: clamp(32px, 3.5vw, 64px); }
.s2-footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; margin-bottom: 48px; }
.s2-footer-tagline {
  font-family: var(--s2-serif); font-weight: 500; line-height: 1.15; color: var(--s2-ink);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); margin: 0 0 24px; max-width: 20ch;
}
.s2-footer-brand { display: flex; flex-direction: column; align-items: flex-end; gap: 20px; }
.s2-footer-logo { height: 30px; width: auto; display: block; }
.s2-footer-cols { display: flex; flex-wrap: wrap; gap: 36px 28px; margin-bottom: 44px; }
.s2-footer-col { width: 120px; min-width: 0; flex: 0 0 auto; }
.s2-footer-col-title { font-family: var(--s2-font); font-weight: 600; font-size: 16px; color: #232323; margin-bottom: 16px; }
.s2-footer-col-title a { color: inherit; text-decoration: none; transition: color .15s ease; }
.s2-footer-col-title a:hover { color: var(--s2-blue); }
.s2-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.s2-footer-col a { font-family: var(--s2-font); font-size: 15px; color: #232323; text-decoration: none; transition: color .15s ease; }
.s2-footer-col a:hover { color: var(--s2-blue); }
.s2-footer-copy { font-family: var(--s2-font); font-size: 14px; color: rgba(27, 25, 25, 0.5); }
@media (max-width: 640px) {
  .s2-footer-brand { align-items: flex-start; }
}
@media (max-width: 760px) {
  .s2-kpi-hero { grid-template-columns: 1fr; gap: 12px; }
  .s2-kpi-stats { grid-template-columns: 1fr; gap: 28px; }
  .s2-kpi-cta-row { justify-content: stretch; }
  .s2-kpi-cta-row .s2-cta { width: 100%; }
}
@media (max-width: 860px) { .s2-solution-layout { grid-template-columns: 1fr; } }

/* ---- "Schedule A Demo" section (mirrors spurtest.com .demo_contain) ---- */
.s2-demo { max-width: 80rem; margin: clamp(72px, 9vw, 128px) auto; padding: 0 24px; }
.s2-demo-inner {
  position: relative; max-width: 34ch; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.s2-demo-title {
  font-family: var(--s2-serif); font-weight: 500;
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.6rem); /* ~57.6px, matches original h1 */
  line-height: 1; letter-spacing: -0.0075em; color: #232323; margin: 0;
}
.s2-demo-sub {
  font-family: var(--s2-font); font-size: 1.125rem; line-height: 1.4;
  color: rgba(35, 35, 35, 0.62); max-width: 30ch; margin: 24px auto 32px;
}
.s2-demo-actions { display: flex; justify-content: center; margin-top: 32px; }
.s2-demo-cta { display: inline-flex; align-items: center; gap: 8px; }
/* floating decorative pill/cursor graphics, positioned like the original
   .demo_visual (top-left) / .demo_visual.is-4 (bottom-right) */
.s2-demo-visual { position: absolute; width: 13rem; height: auto; pointer-events: none; }
.s2-demo-visual--tl { top: 0; left: 0; transform: translate(-140%, -70%); }
.s2-demo-visual--br { bottom: 0; right: 0; width: 15.4rem; transform: translate(110%, 20%); }
@media (max-width: 1200px) { .s2-demo-visual { display: none; } }