/* ---------- Fonts ----------
   Self-hosted rather than loaded from fonts.googleapis.com. The Google
   stylesheet was render-blocking and cost two extra cross-origin handshakes
   (googleapis for the CSS, gstatic for the files) before any text could
   paint. These are the same faces — both families ship as variable fonts, so
   one file each covers every weight the site uses.

   font-display: swap keeps text visible while the file loads; the fallback
   stacks in the tokens below are what shows in that window. */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* SnowDust — single stylesheet.
   Merged from style.css, homepage.css, pricing.css, solution.css.
   Layer order is declared once, here; within a layer, source order wins. */

@layer base, components, pages, utilities;

/* Design tokens — unlayered, so they resolve for every layer */
:root {
  --bg: #FAF6F0;
  --text: #303030;
  /* #6b7280 cleared 4.5:1 on white but not on the cream surfaces this site
     actually uses it on — 4.49 on --bg, 4.20 on --soft. This is the nearest
     value that passes on all of them, so muted text meets WCAG AA everywhere
     rather than only on the pages with a white ground. */
  --muted: #646B77;
  --border: #e5e7eb;
  --dark: #303030;
  --footer-start: #27354c;
  --footer-end: #6d5356;
  --white: #ffffff;
  --accent: #FE3F00;
  /* Accessible companions to the brand orange. #FE3F00 and #FF5C00 are below
     4.5:1 against every surface used here, so they stay for large text, icons
     and fills, and these take over for body-sized text. */
  --accent-on-light: #BA4300;  /* >=4.5:1 on white, cream and peach */
  --accent-on-dark:  #FF6712;  /* >=4.5:1 on #303030 */
  --accent-strong:   #DE3700;  /* >=4.5:1 behind white text */
  --muted-on-dark:   #979797;  /* >=4.5:1 on #303030 */
  --neo-org: #FF5C00;
  --color-purple: #6810a8;
  --color-purple-light: #9a5caa;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-heading: "Plus Jakarta Sans", "DM Sans", system-ui, sans-serif;
  --pill-bg: #ffffff;
  --pill-border: #e7e7e7;
  --card: #ffffff;
  --line: #e8e2d9;
  --accent-soft: #ffd7c4;
  --shadow: 0 12px 30px rgba(28, 28, 28, 0.08);
  --faq-bg: #f5f5f3;
  --faq-text: #1f1f1f;
  --faq-border: rgba(48, 48, 48, 0.20);
  --faq-accent: #ffcf2e;
  --tag-border: #FE3F00;
  --surface: #ffffff;
  --scale-bg: #5b0aa3;
  --scale-bg-2: #8b3cc4;
  --scale-bg-3: #c58bd8;
  --scale-muted: rgba(255, 255, 255, 0.82);
  --scale-button: #ffffff;
  --scale-button-text: #1f1f1f;
  --text-light: #ffffff;
  --soft: #f5eee5;
}

@layer base {

body {
  margin: 0;
  font-family: var(--font-body);
  font-size-adjust: from-font;
  background: var(--white);
  line-height: 1.5;
  color: var(--faq-text);
}

/* ========== style.css ========== */
*, *::before, *::after {
  box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-size-adjust: from-font;
  letter-spacing: -0.01em;
}

/* Let the browser pick nicer line breaks: no single-word last line on a
   heading, no orphan at the end of a paragraph. Purely a rendering hint —
   browsers without support ignore it and wrap exactly as they do today.
   Applied globally here rather than per-component so new pages inherit it. */
h1, h2, h3, h4, h5, h6, p, li, blockquote, figcaption, dd {
  text-wrap: pretty;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.container-full {
  width: min(100% - 2.5rem, 1680px);
  margin-inline: auto;
}
.container {
  width: min(100% - 2.5rem, 1400px);
  margin-inline: auto;
}
/* Top bar */
.topbar {
	background: #303030;
	color: var(--white);
	text-align: center;
	padding: 0.5rem 1.5rem;
	font-size: 1rem;
	font-weight: 500;
}
.topbar p {
	margin: 0;
}
/* Header */
.site-header {
  position: relative;
  background: var(--bg);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  flex-wrap: wrap;
}
.site-header .logo {
  display: flex;
  height: 26px;
  align-items: center;
}
.footer-logo {
  display: flex;
  height: 45px;
  align-items: center;
}
.nav-toggle {
  border: none;
  background: none;
  padding: 0.6rem 0.63rem;
  font-size: 1.125rem;
  cursor: pointer;
}
.site-nav {
  width: 100%;
  order: 3;
}
.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20px;
  border-top: 1px solid #E6E6E6;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index: 1000;
}
.site-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-list { 
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-list li { 
  padding: 0.5rem 0;
  border-bottom: 1px solid #ececec;
}
.nav-list a {
    color: #303030;
    font-size: 20px;
    font-weight: 600;
    position: relative;
    text-decoration: none;
}
.nav-list a::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 2px;
    background: #303030;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}
.nav-list a.has-link::before {
    width: calc(100% - 24px);
}
.nav-list a:hover::before {
    transform: scaleX(1);
}
.has-link, .has-acc {
	position: relative;
	padding-right: 1.5rem;
}
.has-link:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 13px;
  height: 13px;
  transform: translateY(-50%);
  background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M1.4 13L11 3.4V12H13V0H1V2H9.6L0 11.6L1.4 13Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M1.4 13L11 3.4V12H13V0H1V2H9.6L0 11.6L1.4 13Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
}
.has-acc::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 40px;
  height: 40px;
  transform: translateY(-50%);
  background-color: #ffffff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M19.5 21.4997L27.1667 13.833L29.5 16.1663L19.5 26.1663L9.5 16.1663L11.8333 13.833L19.5 21.4997Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M19.5 21.4997L27.1667 13.833L29.5 16.1663L19.5 26.1663L9.5 16.1663L11.8333 13.833L19.5 21.4997Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s ease;
}
.header-actions {
  display: none;
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.82rem 2rem;
    border-radius: 30px;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.5;
    transition: 0.2s ease;
}
.btn-outline {
  font-weight: 600;
  border: 2px solid #303030;
  background: transparent;
}
.btn-outline:hover {
  background: #303030;
  color: var(--white);
}
.btn-primary {
  border: 1px solid #303030;
  background: #303030;
  color: var(--white);
}
.btn-primary:hover {
  background: transparent;
  color: #303030;
}
.btn-link {
  gap: 0.9rem;
}
.btn-link:after {
  content: "";
  width: 13px;
  height: 13px;
  background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M1.4 13L11 3.4V12H13V0H1V2H9.6L0 11.6L1.4 13Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M1.4 13L11 3.4V12H13V0H1V2H9.6L0 11.6L1.4 13Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.25s ease;
}
.btn-link:hover::after {
  transform: translateX(4px);
}
.is-orange {
  color: var(--white);
  border: 1px solid var(--accent);
  background: var(--accent);
}
.is-neo-orange {
  color: var(--white);
  border: 1px solid var(--neo-org);
  background: var(--neo-org);
}
.carousel-nav--mobile {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.5rem;
}
.carousel-nav--desktop {
  display: none;
}
.carousel-prev, .carousel-next {
  width: 48px;
  height: 48px;
  border: 2px solid #303030;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.carousel-prev:hover, .carousel-prev:focus, .carousel-prev:focus-visible, .carousel-next:hover, .carousel-next:focus, .carousel-next:focus-visible {
  background: #FE3F00;
  border: 2px solid #FE3F00;
}
.carousel-prev:hover path, .carousel-prev:focus path, .carousel-prev:focus-visible path, .carousel-next:hover path, .carousel-next:focus path, .carousel-next:focus-visible path {
  fill: #fff;
}
/* Footer */
.site-footer {
  background: linear-gradient(135deg, var(--footer-start), var(--footer-end));
  color: rgba(255, 255, 255, 0.92);
  padding: 3.8rem 0;
}
.footer-grid {
  display: grid;
  gap: 1rem;
}
.footer-brand {
  display: grid;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.footer-desc {
  margin: 0;
  color: #FFF;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
}
.social-list {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.social-list a {
  width: 2.75rem;
  height: 2.75rem;
  margin-inline-start: -0.625rem;
  border-radius: 50%;
  color: var(--white);
  display: grid;
  place-items: center;
  opacity: 0.82;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}
.social-list a:hover,
.social-list a:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, 0.12);
}
.footer-column {
  display: grid;
  gap: 1rem;
  align-content: start;
}
.footer-column h2 {
  color: var(--white);
  position: relative;
  padding-top: 1rem;
  font-size: 1.13rem;
  margin: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.20);
  text-transform: uppercase;
}
.footer-subheading.has-acc {
  cursor: pointer;
}
.footer-subheading.has-acc::after {
    top: 70%;
}
.footer-subheading.has-acc.is-open::after {
  transform: translateY(-50%) rotate(180deg);
}
.footer-links {
  display: none;
}
.footer-links.is-open {
  display: grid;
  gap: 1rem;
  margin-top: 0.4rem;
}
.footer-grid .footer-column:last-child {
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.20);
}
.footer-column a {
  color: #FFF;
  font-size: 1.13rem;
}
.footer-column a:hover {
  color: var(--white);
}
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2.5rem;
}
.footer-bottom .copyright {
  margin: 0;
  color: #FFF;
  font-size: 1rem;
}
.footer-coverage {
  margin: 0;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9375rem;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Tablet */
@media (min-width: 48rem) {
  .header-inner {
	  flex-wrap: nowrap;
  }
}
/* Desktop */
@media (min-width: 1100px) {
	.topbar {
		padding: 1rem 1.56rem;
	}

  .site-header .logo {
    height: 45px;
  }

  .nav-toggle {
	  display: none;
  }

  .site-nav {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: transparent;
    padding: 0;
    border-top: 0;
    box-shadow: none;
    width: auto;
    order: 0;
    margin-inline: auto;
  }

  .nav-list {
    display: flex;
    align-items: center;
    gap: 2rem;
  }

  .nav-list li {
    border-bottom: 0;
  }

  .nav-list {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    padding-top: 0;
  }

  .header-actions {
    display: flex;
    gap: 0.75rem;
  }

  .carousel-nav--mobile {
    display: none;
  }

  .site-footer {
    padding: 7.5rem 0;
  }

  .footer-grid {
    align-items: start;
    grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
    gap: 3.5rem;
    margin-bottom: 5rem;
  }

  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 2.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
  }

  .footer-column {
    gap: 2.5rem;
  }

  .footer-grid .footer-column:last-child {
    padding-bottom: 0;
    border: none;
  }

  .footer-column h2 {
    border-top: none;
  }

  .footer-column h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -50%;
    width: 2.5rem;
    height: 1px;
    background: #fff;
  }

  .footer-subheading.has-acc {
    cursor: default;
  }

  .footer-subheading.has-acc::after {
    display: none;
  }

  .footer-links {
    display: grid;
    gap: 1.5rem;
  }

  .nav-list {
		gap: 2rem;
  }

  .social-list {
    gap: 0.5rem;
  }

  .hd-center-desk {
    text-align: center;
  }
}
@media (min-width: 1600px) {
}

}

@layer components {

/* ========== homepage.css ========== */
.ai-prompts {
  background: #fff;
  overflow: hidden;
  padding: 1.9rem 0;
}
.ai-prompts__header {
  width: 100%;
  max-width: 1400px;
  margin-bottom: 1.5rem;
}
.ai-prompts__header h2 {
   color: #303030;
   font-size: 2rem;
   line-height: 1.2;
   margin: 0;
}
.ai-prompts__ticker {
  display: grid;
  gap: 1rem;
}
.ticker {
  overflow: hidden;
}
.ticker__track {
  --ticker-gap: 1rem;
  display: flex;
  align-items: center;
  width: max-content;
  animation: ticker-scroll var(--ticker-duration, 40s) linear infinite;
}
/* The spacing is a trailing margin on every item rather than flex `gap`, and
   that is what makes the loop exact. The track holds two identical copies, so
   with the gap carried by the items one copy *including its own trailing gap*
   is precisely half the track, and translateX(-50%) lands the second copy
   exactly where the first began.

   With `gap` it could not: the offset had to be written as half the width
   plus half a gap, which is a constant that has to be kept in step with the
   gap by hand — it was not, and the band jumped 42px a cycle — and even once
   corrected it landed on -2625.5px, so every wrap shifted the row half a
   pixel and the thin wordmarks shimmered. */
.ticker__track > * {
  flex: 0 0 auto;
  margin-inline-end: var(--ticker-gap);
}
.ticker--right .ticker__track {
  animation-direction: reverse;
}
@keyframes ticker-scroll {
  to {
    transform: translateX(-50%);
  }
}
/* Speeds carried over from the old script's data-speed values. */
.ticker[data-speed="0.8"]  { --ticker-duration: 30s; }
.ticker[data-speed="0.60"] { --ticker-duration: 40s; }
.ticker[data-speed="0.45"] { --ticker-duration: 53s; }
.ticker[data-speed="0.40"] { --ticker-duration: 60s; }
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
  }
  .ticker {
    overflow-x: auto;
  }
}
.prompt-pill {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text);
  background: var(--pill-bg);
  border: 1px solid var(--pill-border);
  border-radius: 30px;
  padding: 1rem 2rem;
  font-weight: 400;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.prompt-pill::after {
  content: "+ Track Prompt";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #222;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.prompt-pill:hover {
    color: transparent;
    text-shadow:
        0 0 4px rgba(34, 34, 34, 0.1),
        0 0 8px rgba(34, 34, 34, 0.25);
}
.prompt-pill:hover::after {
    opacity: 1;
}
.prompt-pill::before {
    content: "";
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    display: block;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.prompt-pill.is-gemini::before {
    background-image: url(./assets/Ai-Icon-Gemeni.svg);
}
.prompt-pill.is-meta::before {
    background-image: url(./assets/Ai-Icon-Meta.svg);
}
.prompt-pill.is-perpex::before {
    background-image: url(./assets/Ai-Icon-Perplexity.svg);
}
.prompt-pill.is-chatgpt::before {
    background-image: url(./assets/Ai-Icon-Chatgpt.svg);
}
.prompt-pill.is-deepseek::before {
    background-image: url(./assets/Ai-Icon-Deepseek.svg);
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
  }
}
@media (min-width: 768px) {
  .ai-prompts {
    padding: 3.75rem 0;
  }
  .ai-prompts__header {
    text-align: center;
    margin-inline: auto;
    margin-bottom: 3.75rem;
  }
  .ai-prompts__ticker .ticker__track {
    --ticker-gap: 1.5rem;
  }
  .prompt-pill {
    font-size: 1.25rem;
    font-weight: 500;
  }
}
@media (min-width: 1200px) {
  .ai-prompts__ticker {
    gap: 1.75rem;
  }
  .ai-prompts__header h2 {
    font-size: 3rem;
    text-align: center;
  }
}
.hero {
	position: relative;
	overflow: hidden;
	padding: 2.5rem 0 1.5rem;
  background: linear-gradient(180deg, #FAF6F0 0%, rgba(250, 246, 240, 0.00) 100%);
}
.hero .container {
  position: relative;
  z-index: 2;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(./assets/ai-index-bg.svg) center 39rem no-repeat;
  background-size: 100% auto;
  opacity: 0.55;
  pointer-events: none;
  z-index: 1;
}
.hero__header {
	text-align: center;
}
.hero__title {
	margin: 0;
  color: #303030;
  text-align: center;
  /* "everywhere" is 10 unbreakable characters; at a flat 3.5rem it runs past
     the gutter on a 320px screen. */
  font-size: clamp(2.25rem, 11vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
}
.hero__title span {
	display: block;
}
.hero__description {
  max-width: 560px;
	margin: 1.5rem auto 0;
  color: #303030;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
}
/* Hero call-to-action pair. Replaced the site-audit search field, which
   submitted nowhere; the primary button starts a trial in the app and the
   secondary routes to /contact. */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 2rem auto 0;
}
.hero-actions .btn {
  min-height: 3.5rem;
  padding-inline: 2rem;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-weight: 700;
}
.hero-actions__cta {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.15);
}
.hero-actions__cta:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}
.hero-actions__secondary {
  border: 2px solid var(--text);
  background: transparent;
  color: var(--text);
}
.hero-actions__secondary:hover {
  background: var(--text);
  color: #fff;
}
.hero__video {
  position: relative;
  margin: 3rem 1.25rem 0;
  overflow: hidden;
  z-index: 2;
}
.hero__video-media {
	width: 100%;
	height: auto;
	/* No aspect-ratio here on purpose. It used to be 16/11, and 16/9 above
	   1100px, both with object-fit: cover — which cropped the hero image to
	   fit. That was survivable for the old line graph but not for the
	   dashboard mockup that replaced it, whose floating cards sit 8px from
	   the edge: 16/11 cut 12% off the sides and 16/9 cut 7% off the top and
	   bottom, clipping them. The <img> width/height attributes reserve the
	   right box and keep it correct if the image is ever swapped for one
	   with different proportions. */
}
@media (max-width: 639px) {
  /* Full-width stacked buttons rather than two cramped pills. */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn {
    width: 100%;
  }
}
@media (min-width: 640px) {
	.hero {
		padding-top: 4rem;
	}
}
@media (min-width: 1100px) {
	.hero {
		padding: 5rem 1.5rem 3rem;
	}

  .hero-actions {
    gap: 1rem;
    margin-top: 2.5rem;
  }

  .hero__video {
    max-width: 1400px;
    margin: 3rem auto 0;
	}

  .hero::before {
    background-position-y: 11rem;
  }
}
/*hero*/
/**/
.partners-section {
    padding: 1.9rem 0;
    overflow: hidden;
}
.partners-section .ticker__track {
  --ticker-gap: 6.25rem;
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
}

/* One optical height for every mark, whatever its own aspect ratio, with
   width left auto so nothing is stretched — the same rule the client wall on
   the Cronix site uses.

   No max-width here on purpose. The marks are all exported on a 220px-wide
   canvas, so width is already bounded; and a max-width in this layer would
   not apply anyway — `img, svg { max-width: 100% }` sits in the pages layer,
   which outranks components whatever the specificity. */
.partners-logo img {
  width: auto;
  height: auto;
  max-height: 2.5rem;
  object-fit: contain;
  /* The marks arrive in their own brand colours — navy, teal, gold, a blue
     gradient. The band only reads as one row if they are all neutral. */
  filter: grayscale(1);
}
@media (min-width: 768px) {
  .partners-section {
    padding: 3.75rem 0;
  }
}
.ai-index {
  position: relative;
  overflow: hidden;
  padding: 3.75rem 0 2.5rem;
  background: #FAF6F0;
}
.ai-index::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(./assets/ai-index-bg.svg) center 24rem no-repeat;
  background-size: 100% auto;
  opacity: 0.55;
  pointer-events: none;
}
.ai-index .container {
  position: relative;
}
.ai-index__header {
  display: flex;
  gap: 1.5rem;
  flex-direction: column;
  text-align: center;
  max-width: 400px;
  margin-inline: auto;
}
.ai-index__header h2 {
  color: #303030;
  font-size: 3rem;
  line-height: 1;
  margin: 0;
}
.ai-index__header p {
  color: #303030;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}
.ai-index__card {
  margin-top: 2.5rem;
  overflow: hidden;
  border-radius: 4.571px;
  border: 0.571px solid #FFF;
  background: rgba(255, 255, 255, 0.10);
}
.card-top {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.63rem;
  background: linear-gradient(90deg, rgba(255, 186, 163, 0.30) 0%, rgba(254, 63, 0, 0.30) 100%);
}
.dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
}
.dot--red {
  background: #ff5f57;
}
.dot--yellow {
  background: #febc2e;
}
.dot--green {
  background: #28c840;
}
.ai-index .card-label {
  margin-left: auto;
  white-space: nowrap;
  color: #303030;
  text-align: right;
  font-size: 0.5rem;
  font-weight: 400;
  line-height: 1.5;
}
.card-body {
  margin: 0.5rem 0.65rem 0.2rem;
  padding: 0.7rem;
  border-radius: 4.571px;
  background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
}
.table-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding-bottom: 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: #6d6d6d;
  border-bottom: 1px solid #f2f2f2;
}
.brand-list {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0 0;
}
.brand-row {
  display: grid;
  grid-template-columns: 6.75rem 2.5rem minmax(0, 1fr);
  grid-template-areas: "name count bar";
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.8rem 0;
}
.brand-name {
  grid-area: name;
  font-size: 0.95rem;
  color: #343434;
}
.brand-count {
  grid-area: count;
  font-size: 0.9rem;
  color: #5e5e5e;
}
.bar {
  grid-area: bar;
  height: 0.42rem;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  position: relative;
}
.bar span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent) 0%, #ff8a57 100%);
  animation: grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--delay);
}
.bar span::after {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 30%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.55),
    transparent
  );
  animation: shimmer 2.8s ease-in-out infinite;
  animation-delay: calc(var(--delay) + 0.8s);
}
@keyframes grow {
  to {
    width: var(--value);
  }
}
@keyframes shimmer {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    transform: translateX(430%);
    opacity: 0;
  }
}
@media (min-width: 48rem) {
  .ai-index {
    padding: 5.5rem 1.5rem;
  }
  .ai-index__card {
    border-radius: 1.75rem;
  }
  .card-body {
    padding: 1.5rem 1.75rem 1.75rem;
  }
  .brand-row {
    grid-template-columns: 11rem 4.5rem 1fr;
    gap: 1rem;
  }
  .table-head {
    grid-template-columns: 11rem 4.5rem 1fr;
  }
  .table-head span:last-child {
    visibility: hidden;
  }
}
@media (min-width: 70rem) {
  .ai-index {
    padding: 7rem 2rem;
  }
  .ai-index__card {
    margin-top: 3rem;
  }
  .card-body {
    padding: 2rem 2.25rem 2.25rem;
  }
  .ai-index__header {
    max-width: 1400px;
  }
  .ai-index__header .btn {
    margin-top: 1.5rem;
    margin-inline: auto;
  }
  .ai-index::before {
    background-position-y: 10rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bar span,
  .bar span::after,
  .btn-primary {
    animation: none;
    transition: none;
  }
  .bar span {
    width: var(--value);
  }
}
.faq-section {
  background: #fff;
  padding: 1.875rem 0;
}
/* Header */
.faq-header {
  padding-bottom: 1.5rem;
}
.faq-eyebrow {
  color: #303030;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}
.faq-title {
  margin: 0;
  color: #303030;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}
.faq-desc {
  margin: 1rem 0 0;
  color: #303030;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
}
.faq-note {
  display: none;
}
.faq-card__number {
  color: #303030;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}
.faq-card__context {
  color: #303030;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  margin-top: 0.5rem;
}
.faq-card__context strong {
  color: var(--neo-org);
}
.faq-item {
  border-bottom: 1px solid var(--faq-border);
}
.faq-list .faq-item:first-child {
  border-top: 1px solid var(--faq-border);
}
.faq-item summary {
    list-style: none;
}
.faq-item summary::-webkit-details-marker {
    display: none;
}
/* Question */
.faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1rem 0;
    cursor: pointer;
    font-size: 1.13rem;
    font-weight: 500;
    line-height: 1.5;
}
/* Plus / Minus icon */
.faq-icon {
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M18.333 21.6663H8.33301V18.333H18.333V8.33301H21.6663V18.333H31.6663V21.6663H21.6663V31.6663H18.333V21.6663Z' fill='%23303030'/%3E%3C/svg%3E");
}
.faq-item[open] .faq-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40' fill='none'%3E%3Cpath d='M18.333 21.6663H8.33301V18.333H18.333L21.6663 18.3331L31.6663 18.333V21.6663H21.6663H18.333Z' fill='%23303030'/%3E%3C/svg%3E");
}
/* Answer */
.faq-answer {
  padding: 0 0 1.25rem;
}
.faq-answer p {
  margin: 0;
  color: #303030;
  font-size: 1rem;
  line-height: 1.5;
}
.faq-grid {
  display: grid;
  gap: 1rem;
  text-align: left;
  margin-bottom: 1.5rem;
}
.faq-card {
  padding: 1.875rem 1.25rem;
  background: #FAF6F0;
  border-radius: 1rem;
}
/* Desktop */
@media (min-width: 1200px) {
    .faq-section {
      padding: 3.75rem 0;
    }

    .faq-header {
      padding-bottom: 3.75rem;
    }

    .faq-eyebrow {
      font-size: 1.25rem;
      margin-bottom: 1.5rem;
    }

    .faq-title {
      font-size: 3rem;
    }

    .hd-center-desk .faq-title {
      max-width: 1200px;
      margin-inline: auto;
    }

    .faq-desc {
      font-size: 1.25rem;
      margin-top: 1.5rem;
    }

    .faq-question {
      font-size: 1.25rem;
    }

    .faq-answer p {
      font-size: 1.15rem;
    }

    .faq-answer {
      padding-right: 8rem;
    }

    .faq-note {
      display: block;
      text-align: center;
      font-size: 1.25rem;
      font-weight: 500;
      line-height: 1.5;
      margin: 3.75rem 0 0;
    }

    .faq-note a {
      color: #FF5C00;
      text-decoration: underline;
    }

    .faq-grid {
      grid-template-columns: repeat(3, 1fr);
      margin-bottom: 3.75rem;
    }

    .faq-card {
      padding: 2.5rem 1.875rem;
    }

    .faq-card__number {
      font-size: 1.75rem;
    }

    .faq-card__context {
      font-size: 1.25rem;
      margin-top: 1rem;
    }
}
.solutions-section {
  background: #fff;
  padding: 1.9rem 0 3.75rem;
}
.solutions-container {
  width: 100%;
}
.solutions-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.solutions-eyebrow {
  color: #303030;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 1rem;
  text-transform: uppercase;
}
.solutions-title {
  margin: 0;
  color: #303030;
  font-size: 2rem;
  line-height: 1.2;
}
/* Swiper */
.solutions-carousel .carousel__item {
  height: auto;
}
.solutions-carousel-wrap { overflow: visible; }
/* The solutions heading sits in a nested .container, so its cards take one
   extra gutter to line up with it. */
.solutions-carousel { overflow: visible; }
.solutions-carousel.carousel--inset {
  --carousel-inset: max(2.5rem, (100% - 1400px) / 2 + 1.25rem);
  --carousel-inset-end: max(2.5rem, (100vw - 1400px) / 2 + 1.25rem);
}
.solutions-carousel .carousel__item {
  width: 100%;
}
@media (min-width: 768px) {
  .solutions-carousel .carousel__item {
    width: 420px;
  }
}
/* Card */
.solution-card {
  height: 100%;
  padding: 1.9rem 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-radius: 1rem;
  min-height: 560px;
  justify-content: space-between;
  background: linear-gradient(145deg, #FFDBE6 0%, #F3B5C7 23.56%, #D27DD6 52.88%, #CC89FC 100%);
}
.solution-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.solution-tag {
  display: inline-flex;
  align-items: center;
  padding: .5rem 1.5rem;
  font-weight: 700;
  color: var(--tag-border);
  line-height: 1.5;
  border-radius: 30px;
  background: #FFF;
  border: 1px solid var(--tag-border);
}
.solution-card__title {
  max-width: 360px;
  margin: 0;
  color: #303030;
  font-size: 1.75rem;
  line-height: 1.2;
}
.solution-card__text {
  margin: 0;
  color: #303030;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
}
.solution-card__media {
  margin-inline: -1.25rem;
  width: auto;
  aspect-ratio: 3 / 2;
  margin-top: 1.5rem;
  border-radius: 0 0 1rem 1rem;
  overflow: hidden;
}
.scale-media__title {
  color: #FFF;
  font-size: 2rem;
  line-height: 1.2;
  margin: 0 0 1.5rem;
}
.solution-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (min-width: 1100px) {
  .solutions-section {
    padding: 3.75rem 0 7.5rem;
  }

  .solutions-container {
    width: 100%;
  }

  .scale-media__title {
    display: none;
  }

  .solutions-carousel .carousel__item {
    width: 439px; height: auto; flex-shrink: 0;
  }

  .solutions-header {
    margin-bottom: 3.75rem;
  }

  .solutions-eyebrow {
    font-size: 1.25rem;
    margin-bottom: 1.13rem;
  }

  .solutions-title {
    font-size: 3rem;
  }

  .carousel-nav--desktop {
    display: flex;
    gap: 12px;
    align-items: flex-end;
  }

  .solution-card {
    padding: 1.9rem 1.9rem 0;
  }

  .solution-card__title {
    font-size: 1.75rem;
  }
}
.testimonials {
  padding: 1.9rem 0;
  background: #fff;
}
.resources {
  padding: 1.9rem 0;
  background: #fff;
}
.testimonials .section-header {
  margin-bottom: 1.5rem;
}
.section-header--split {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  text-align: left;
  margin-bottom: 1.5rem;
}
.testimonials .section-eyebrow {
  margin: 0 0 1rem;
  color: #303030;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
}
.resources-eyebrow {
  font-size: 1.15rem;
  font-weight: 500;
  margin: 0 0 1rem;
}
.resources-title {
  color: #303030;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}
.testimonials .section-title {
  margin: 0;
  color: #303030;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}
.resource-card, .testimonial-card {
  height: 100%;
}
.testimonials .testimonial-card {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  padding: 1.85rem 1.25rem;
  border-radius: 16px;
  border: 2px solid rgba(48, 48, 48, 0.10);
}
.testimonial-card__header {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.testimonial-card__header img {
  width: 3.9rem;
  height: 3.75rem;
  border-radius: 50%;
  object-fit: cover;
}
.testimonial-card__author {
    color: #303030;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
}
.testimonial-card h3 {
  margin: 0;
}
.testimonial-card__header p {
  margin: 0;
  font-weight: 500;
  color: #303030;
}
.testimonial-card__text {
  margin: 0;
  color: #303030;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.5;
}
.testimonial-card time {
  color: #303030;
  text-align: right;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.5;
}
.testimonials-container,
.resources-container {
  width: 100%;
}
/* One card per view on mobile, as every other carousel does. Without an
   explicit width the flex items size to their text and overrun the viewport. */
.testimonials-carousel .carousel__item {
  width: 100%;
}
.resources-carousel .carousel__item {
  width: 100%;
}
.resource-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none;
}
.resource-card__media {
  height: 300px;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(145deg, #CC89FC 0%, #D27DD6 23.56%, #F3B5C7 52.88%, #FFDBE6 100%);
}
.resource-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Post heroes are 1200x630 diagrams, and cropping one to a 4:3 card cuts the
   labels off the sides. These sit whole on the cream ground instead; the
   gradient above stays as the backdrop for a card with no image. */
.resource-card__media--contain {
  background: var(--bg);
  border: 1px solid var(--line);
}
.resource-card__media--contain img {
  object-fit: contain;
}
.resource-card__content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.5rem;
}
.resource-card h3 {
  margin: 0;
  color: #303030;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}
.resource-card p {
  margin: 0;
  color: #303030;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.5;
}
.resource-card__meta {
  display: flex;
  gap: 1rem;
  color: var(--accent-on-light);
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.5;
}
@media (min-width: 640px) {
  .testimonials-carousel .carousel__item {
    width: 48%;
  }
  .resources-carousel .carousel__item {
    width: 48%;
  }
}
@media (min-width: 1100px) {
  .testimonials {
    padding: 3.75rem 0;
  }

  .resources {
    padding: 3.75rem 0;
  }

  .testimonials-container {
    width: 100%;
  }

  .resources-container {
    width: 100%;
  }

  .testimonials .section-eyebrow {
    font-size: 1.25rem;
  }

  .testimonials .section-title {
    font-size: 3rem;
  }

  .testimonials .section-header {
    text-align: center;
    max-width: 750px;
    margin-inline: auto;
    margin-bottom: 3.75rem;
  }

  .testimonials-carousel .carousel__item {
    width: 400px;
    min-height: 457px;
    padding: 2.5rem 1.9rem;
  }

  .resources-carousel .carousel__item {
    width: 440px;
    min-height: 574px;
  }

  .resource-card h3 {
    font-size: 1.75rem;
  }

  .resource-card p {
    font-size: 1.25rem;
  }

  .resource-card__meta {
    font-size: 1.25rem;
  }

   .section-header--split {
    margin-bottom: 3.75rem;
  }
}
/*resources*/
/*ai edge*/
.ai-edge {
  padding: 1.9rem 0;
}
.ai-edge__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.75fr;
  gap: 2.5rem;
  transition: grid-template-columns .45s cubic-bezier(.22,.61,.36,1);
}
.ai-edge__grid.is-right-active {
  grid-template-columns: 0.75fr 1.4fr;
}
.feature-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: 600px;
  background: #FAF6F0;
  padding: 1.9rem 1.25rem;
}
.feature-card--dark {
  background: #1f1f1f;
  color: #fff;
}
.feature-card__base {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 400px;
  margin-bottom: 1.5rem;
}
.feature-card h3 {
  margin: 0;
  color: #303030;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}
.feature-card p {
  margin: 0;
  color: #303030;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
}
.feature-card.feature-card--dark h3 {
  color: #fff;
}
.feature-card.feature-card--dark p {
  color: #fff;
}
.feature-card__base p, .feature-card__base .btn {
    display: none;
}
.btn--outline {
  border: 2px solid #303030;
  color: #303030;
  background: transparent;
}
.btn--light {
  background: #fff;
  color: #303030;
}
.overlay-card {
  height: 360px;
}
.overlay-card video {
  /* Without an explicit width the video sizes to its intrinsic aspect and
     spills out of the card — 360px wide inside a 240px card on a phone. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.feature-card__info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.feature-card__info p {
  font-size: 1.125rem;
  font-weight: 400;
}
.feature-card__info .btn {
  align-self: flex-start;
}
@media (max-width: 900px) {
  .ai-edge__grid,
  .ai-edge__grid.is-right-active {
    grid-template-columns: 1fr;
  }

  .feature-card {
    min-height: 360px;
  }
}
@media (min-width: 1100px) {

  .ai-edge {
    padding: 3.75rem 0;
  }

  .feature-card {
    padding: 3.75rem 0 3.75rem 2.5rem;
  }

  .feature-card__base {
    height: 100%;
  }

  .feature-card__base h3 {
    font-size: 3rem;
  }

  .feature-card__base .btn {
    margin-top: auto;
    align-self: flex-start;
  }

  .feature-card__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    transition: transform .45s cubic-bezier(.22,.61,.36,1);
  }

  .feature-card__info {
    display: none;
  }

  .feature-card__base p, .feature-card__base .btn {
    display: block;
  }

  /* Left overlay starts outside right */
  .feature-card--left .feature-card__overlay {
    transform: translateX(105%);
  }

  /* Right overlay starts outside left */

  .feature-card.is-active .feature-card__overlay {
    transform: translateX(0);
  }

  .feature-card--left .overlay-card {
    right: 0;
  }

  .overlay-card {
    position: absolute;
    top: 3.75rem;
    bottom: 3.75rem;
    border-radius: 16px;
    max-width: 416px;
    height: 480px;
  }
}
.scale-section {
  padding: 1.9rem 0;
}
.scale-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 1.5rem;
  padding: 1.9rem 1.25rem;
  border-radius: 16px;
  background:
    linear-gradient(
      90deg,
      var(--scale-bg) 0%,
      var(--scale-bg-2) 58%,
      var(--scale-bg-3) 100%
    );
  isolation: isolate;
}
/* Vertical line pattern */
.scale-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,0.08) 0,
      rgba(255,255,255,0.08) 2px,
      transparent 2px,
      transparent 14px
    );
  mask-image: linear-gradient(to top, #000 40%, transparent 100%);
  z-index: -1;
}
.scale-card__content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  order: 2;
}
.scale-card__title {
  display: none;
}
.scale-card__text {
  margin: 0;
  color: #FFF;
  font-size: 1.15rem;
  font-weight: 400;
  line-height: 1.5;
}
.scale-card__btn {
  align-self: flex-start;
  transition: transform 0.2s ease;
}
.scale-card__btn:hover {
  transform: translateY(-1px);
}
.scale-card__media {
  position: relative;
  min-height: 320px;
  display: flex;
  justify-content: center;
  flex-direction: column;
  order: 1;
}
.dashboard-frame {
  position: relative;
  width: 100%;
  max-width: 360px;
  overflow: hidden;
  height: 239px;
  border-radius: 16px;
  background: lightgray;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.15);
}
.dashboard-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 768px) {
  .scale-card {
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
    padding: 2.5rem;
  }

  .scale-card__media {
    min-height: 420px;
    justify-content: flex-end;
  }
}
@media (min-width: 1100px) {
  .scale-section {
    padding: 3.75rem 0;
  }

  .scale-card {
    padding: 3.75rem 0 3.75rem 2.5rem;
  }

  .scale-card__content {
    order: 1;
  }

  .scale-card__media {
    min-height: 480px;
  }

  .scale-card__title {
    display: block;
    color: #FFF;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
  }

  .scale-card__btn {
    margin-top: 1.5rem;
  }

  .dashboard-frame {
    max-width: 722px;
    height: 480px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
.ai-shift {
	padding: 1.9rem 0;
  background: #fff;
}
.ai-shift__top {
	display: grid;
	gap: 1.5rem;
	margin-bottom: 1rem;
}
.ai-shift__intro {
	background: #ffffff;
}
.ai-shift__eyebrow {
	margin: 0 0 0.5rem;
  color: #303030;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
}
.ai-shift__title {
  margin: 0 0 1rem;
  color: #303030;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}
.ai-shift__description {
  margin: 0;
  color: #303030;
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.5;
}
.ai-card {
	background: #303030;
	color: var(--text-light);
	border-radius: 16px;
	padding: 1.9rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-height: 100%;
}
.ai-shift__stats .ai-card {
  padding: 1.25rem;
  gap: 0.5rem;
}
.ai-card__value {
  margin: 0;
  color: #FFF;
  /* Two stat cards per row on mobile leave ~92px of measure at 320px, which
     "2.5B+" overruns at a flat 3rem. */
  font-size: clamp(1.75rem, 8vw, 3rem);
  font-weight: 700;
  line-height: 1;
}
.ai-card__title {
  margin: 0;
  color: #FFF;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}
.ai-card__text {
	margin: 0;
  color: #FFF;
  /* "transactional" is wider than the 92px measure two stat cards leave at
     320px; break it rather than let it escape the card. */
  overflow-wrap: break-word;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
}
.ai-shift__top .ai-card__text {
	margin: 0.75rem 0;
}
.ai-shift__stats .ai-card__text {
  margin: 0 0 0.5rem;
}
.ai-card__source {
  margin: auto 0 0;
  /* These cards are #303030, so this needs the dark-surface companion:
     --accent-on-light is 2.45:1 here, --accent-on-dark is 4.53:1. */
  color: var(--accent-on-dark);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
}
.ai-card--featured {
	justify-content: flex-start;
}
.ai-shift__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}
@media (min-width: 768px) {
	.ai-shift {
		padding: 3.75rem 0;
	}

	.ai-shift__top {
    gap: 4.25rem;
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
    margin-bottom: 2.5rem;
	}

	.ai-card--featured {
		padding: 2.2rem 2.5rem;
	}

	.ai-shift__stats {
    gap: 2.5rem;
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	/* Four-up cards are narrower here than two-up were on a phone, so the
	   value needs its own ceiling until the 1200px padding bump. */
	.ai-shift__stats .ai-card__value {
		font-size: clamp(1.75rem, 4.5vw, 3rem);
	}
}
@media (min-width: 1200px) {
  .ai-shift__eyebrow {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
  }
	.ai-shift__title {
    max-width: 660px;
    font-size: 3rem;
	}
  .ai-shift__description {
    font-size: 1.25rem;
  }
  .ai-card__value {
    font-size: 3.5rem;
    line-height: 1.2;
  }
  .ai-card__title {
    line-height: 1.5;
  }
  .ai-card__text {
    font-size: 1.15rem;
  }
  .ai-card__source {
    font-size: 1.15rem;
    font-weight: 500;
  }
  .ai-shift__stats .ai-card {
    padding: 2.85rem 2.5rem;
  }
  .ai-shift__stats .ai-card__text {
    margin-top: 0.5rem;
  }
}

/* ---------- Carousel ----------
   Native scroll-snap; replaces Swiper. The gap reproduces Swiper's old
   spaceBetween breakpoints (16 / 24 / 40px). */
.carousel {
  --carousel-gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel::-webkit-scrollbar {
  display: none;
}
.carousel__track {
  display: flex;
  gap: var(--carousel-gap);
  align-items: stretch;
}
/* Drag-to-scroll affordance. Only shown where a mouse is the pointer: on
   touch there is nothing to grab and the cursor is never seen anyway. */
@media (hover: hover) and (pointer: fine) {
  .carousel {
    cursor: grab;
  }
  .carousel.is-dragging {
    cursor: grabbing;
  }
  /* Text selection would otherwise fight the drag mid-swipe. */
  .carousel.is-dragging,
  .carousel.is-dragging * {
    user-select: none;
  }
}
.carousel__item {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
/* Edge-bleeding carousels: the track scrolls to the viewport edge, but the
   first and last cards line up with the .container gutter, not the edge. */
.carousel--inset {
  --carousel-inset: max(1.25rem, (100% - 1400px) / 2);
  /* Viewport-based twin of the inset: percentages inside the track resolve
     against the track, not the scroll port, so the spacer needs its own. */
  --carousel-inset-end: max(1.25rem, (100vw - 1400px) / 2);
  padding-inline: var(--carousel-inset);
  scroll-padding-inline: var(--carousel-inset);
}
/* A scroll container's end padding is not part of its scrollable area, so the
   trailing gutter is a spacer flex item instead. */
.carousel--inset .carousel__track::after {
  content: '';
  flex: 0 0 var(--carousel-inset-end);
}
@media (min-width: 768px) {
  .carousel {
    --carousel-gap: 1.5rem;
  }
}
@media (min-width: 1200px) {
  .carousel {
    --carousel-gap: 2.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .carousel {
    scroll-behavior: auto;
  }
}
/* Dots are generated by the carousel script */
.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding-top: 1rem;
}
.carousel__dot {
  /* 24x24 hit area (WCAG 2.5.8) with an 8px visible dot inside it */
  inline-size: 24px;
  block-size: 24px;
  padding: 8px;
  border: 0;
  border-radius: 50%;
  background: var(--faq-border);
  background-clip: content-box;
  cursor: pointer;
}
.carousel__dot[aria-current="true"] {
  background: var(--accent);
}
}

@layer pages {

/* ========== pricing.css ========== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}
img, svg {
  max-width: 100%;
}
.price-hero {
  position: relative;
  overflow: hidden;
  padding: 1.875rem 0 3.5rem;
  text-align: center;
  background: var(--bg);
}
.price-hero h1 {
  margin: 0 auto 1.5rem;
  color: #303030;
  text-align: center;
  font-family: var(--font-heading);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
}
.price-hero .eyebrow {
  margin: 0 0 1rem;
  color: #303030;
  font-family: "DM Sans";
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
}
.price-hero .intro {
  margin: 0 auto;
  color: #303030;
  text-align: center;
  font-family: "DM Sans";
  font-size: 20px;
  font-weight: 500;
  line-height: 1.5;
}
.price-hero__cta {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  z-index: 2;
  position: relative;
  padding: 24px 20px;
  margin: 1.5rem auto 0;
  border-radius: 54px;
  border: 2px solid #FFF;
  background: rgba(255, 255, 255, 0.10);
}
.price-hero__cta .btn-outline {
  background: #ffffff;
  color: var(--accent);
  border: 1px solid var(--accent);
}
.pricing-note {
  margin: 1.5rem 0 0;
  color: #303030;
  text-align: center;
  font-family: "DM Sans";
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
}
.hero-wave {
  position: absolute;
  z-index: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 215px;
  background: url("assets/hero-wave-mob.svg") center bottom / 100% 100% no-repeat;
  pointer-events: none;
}
/* Pricing card */
.step-card li::after {
  position: absolute;
  right: 50%;
  bottom: 0;
  left: 50%;
  width: 100%;
  border-bottom: 1px solid rgba(255, 92, 0, 0.24);
  content: "";
  transform: translateX(-50%);
}
/* Compare / how it works */
.compare-section {
  padding: 1.875rem 0px;
}
.compare-section .eyebrow {
    color: #303030;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    text-transform: uppercase;
    margin: 0 0 0.5rem;
}
.compare-section h2 {
  margin: 0 auto 1rem;
  color: #303030;
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}
.compare-section .intro {
  margin: 0 auto 1.5rem;
  color: #303030;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
}
.compare-section a {
  color: var(--accent-on-light);
  font-weight: 700;
}
.steps-grid {
  display: grid;
  gap: 1rem;
  text-align: left;
}
.step-card {
  padding: 1.875rem 1.25rem;
  background: #FAF6F0;
  border-radius: 1rem;
}
.step-card .step-number {
  color: var(--accent-on-light);
  font-family: "DM Sans";
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
  margin-bottom: 0.25rem;
  text-transform: uppercase;
}
.step-card__title {
  color: #303030;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
}
.step-lead {
  margin: 1rem 0;
  color: #303030;
  font-family: "DM Sans";
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
}
.step-card li {
  position: relative;
  padding: 1rem 0 1rem 3.5rem;
  color: #FFF;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

.step-card li:last-child::after {
  border: none;
}

.step-card li::before {
  position: absolute;
  top: 1.25em;
  left: 0;
  width: 2.5rem;
  height: 2.5rem;
  content: "";
  background: url("assets/check-icon.svg") no-repeat center / contain;
}

.step-card li {
  color: #303030;
}
.step-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 24px;
  font-size: 0.75rem;
  color: var(--accent-on-light);
  font-family: "DM Sans";
  font-weight: 700;
  border-radius: 30px;
  width: fit-content;
  border: 1px solid #FF5C00;
  background: rgba(255, 92, 0, 0.10);
  margin-top: 1rem;
  text-transform: uppercase;
  line-height: 1.35;
}
.step-card__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #303030;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 92, 0, 0.24);
}
.step-card__toggle > span {
    display: flex;
    flex-direction: column;
    /* A flex item's automatic minimum is its min-content width, which pushed
       the label past the button next to the fixed-size chevron. */
    min-width: 0;
    overflow-wrap: break-word;
}
.step-card__icon {
    flex: 0 0 auto;
    transition: transform 0.3s ease, color 0.3s ease;
}
.step-card__toggle[aria-expanded="true"] {
    color: #ff5c00;
}
.step-card__toggle[aria-expanded="true"] .step-card__icon {
    transform: rotate(180deg);
}
.step-card .step-card__lists {
  display: none;
}
.step-card__toggle[aria-expanded="true"] + .step-card__lists {
  display: block;
}
.pricing-plans {
  margin: 1.875rem 0;
  padding: 3.75rem 0;
  background: #FAF6F0;
}
.pricing-plans .eyebrow {
  margin: 0 0 1rem;
  color: #303030;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
}
.pricing-plans__header {
  max-width: 1200px;
  margin-inline: auto;
}
.pricing-plans__header h2 {
  margin: 0;
  color: #303030;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}
.pricing-plans__intro {
  margin: 1.5rem 0 1.5rem;
  color: #303030;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
}
/* ---------- Billing switch ----------
   Monthly / Annual on /pricing. Styled after .intelligence-tabs, which is the
   site's existing two-option control, with one change: the active option sits
   on --accent-strong rather than --neo-org, because white on #FF5C00 is 2.9:1
   and this is body-sized text needing 4.5:1 (WCAG 1.4.3). --accent-strong
   clears it.

   It wraps rather than scrolls: "Annual — save $120 a year" is a long label
   and at 320px the pair does not fit on one line. */
/* An author `display` beats the user-agent's `[hidden] { display: none }`, so
   the switch shipped visible-but-inert to anyone with the script blocked —
   the one thing it was written with `hidden` to avoid. Any rule here that
   sets display on an element that also toggles `hidden` needs this guard. */
.billing-toggle[hidden] {
  display: none;
}
.billing-toggle {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.56rem;
  margin: 0 0 2rem;
}
.billing-toggle__option {
  padding: 0.75rem 1.5rem;
  border: 2px solid var(--neo-org);
  border-radius: 4px;
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5;
  cursor: pointer;
  transition:
    color 300ms ease,
    background-color 300ms ease;
}
.billing-toggle__option:hover {
  background: rgba(255, 92, 0, 0.10);
}
.billing-toggle__option.is-active {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: #fff;
}
.billing-toggle__option:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

/* The price a card is not currently leading with, named underneath the one it
   is. Present in both states so the annual rate is visible with the script
   blocked and the monthly rate is still visible once annual is chosen. */
.pricing-card__billing {
  margin: -0.5rem 0 1rem;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.pricing-carousel {
    width: 100%;
    padding-bottom: 30px;
}
.pricing-carousel__track {
  align-items: stretch;
}
/* Mobile: one card per view; the desktop grid takes over at 960px. */
.pricing-carousel .carousel__item {
  width: 100%;
}
.pricing-plan__card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 467px;
  padding: 5.2rem 1.25rem 1.875rem;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 1rem;
}

.pricing-card--featured {
  background: rgba(255, 92, 0, 0.10);
  border-color: var(--neo-org);
}
/* Popular badge */
.pricing-card__badge {
  position: absolute;
  top: 30px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0.5rem 1.5rem;
  color: #FFF;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  border-radius: 30px;
  border: 1px solid #FE3F00;
  background: #FE3F00;
  text-transform: uppercase;
}
/* Card category */
.pricing-card__category {
  margin: 0 0 1.5rem;
  color: var(--neo-org);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
/* Card title */
.pricing-card__name {
  margin: 0 0 1rem;
  color: #303030;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}
/* Price */
.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  font-weight: 700;
  line-height: 1.2;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #FE3F00;
}
.pricing-card--featured .pricing-card__price {
  border-bottom: 1px solid #303030;
}
.pricing-card__amount {
  color: #303030;
  font-size: 3rem;
}
.pricing-card__unit {
  color: rgba(48, 48, 48, 0.60);
  font-size: 1.25rem;
}
.pricing-plan__card .btn {
  width: 100%;
}
.pricing-card__description {
  margin: 0 0 1rem;
  color: #303030;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}
.pricing-card__description strong {
  color: var(--neo-org);
}
.pricing-plan__card .btn {
    margin-top: auto;
}
.pricing-carousel .carousel-prev, .pricing-carousel .carousel-next {
  background: transparent;
}
.pricing-carousel .carousel-prev:hover, .pricing-carousel .carousel-prev:focus, .pricing-carousel .carousel-prev:focus-visible, .pricing-carousel .carousel-next:hover, .pricing-carousel .carousel-next:focus, .pricing-carousel .carousel-next:focus-visible {
  background: #FE3F00;
}
.comparison-table__note {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.5;
  overflow-wrap: break-word;
}
/* comparison plan */
.plan-comparison__header {
  margin: 3.75rem 0 1.5rem;
}
.plan-comparison__header h2 {
  margin: 0 0 1.5rem;
  color: #303030;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}
.plan-comparison__header p {
  margin: 0;
  color: #303030;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
}
.comparison-table-wrapper {
    width: 100%;
    /* The table cannot shrink below its min-content width, so on narrow
       screens it scrolls in place instead of widening the page. */
    overflow-x: auto;
}
.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 10px;
}
.comparison-table tr:first-child td {
  font-weight: 700;
}
.comparison-table thead th, .comparison-table thead td {
  border-bottom: 1px solid #FF5C00;
}
.comparison-table th, .comparison-table td {
  padding: 1rem 0.375rem 1rem 0.375rem;
  border-bottom: 1px solid rgba(255, 92, 0, 0.40);
  text-align: left;
  vertical-align: middle;
}
.comparison-table thead th {
  padding-top: 0;
  color: var(--neo-org);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
}
.comparison-table tbody th {
  width: 24%;
  padding-inline: 0 0.625rem;
  color: #303030;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
}
.comparison-table tbody td {
  color: #303030;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
}
.discovery-cta {
  padding: 1.875rem 0;
  background: #ffffff;
}
.discovery-cta__inner {
    position: relative;
    overflow: hidden;
    padding: 3.75rem 1.25rem;
    border-radius: 1rem;
    background:
        linear-gradient(
            115deg,
            #c979e9 0%,
            #d86fc4 38%,
            #ef5e76 68%,
            #ff4a17 100%
        );
    color: #ffffff;
    text-align: center;
}
.discovery-cta__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(./assets/discovery-cover-img.svg) center 15rem no-repeat;
  background-size: 100% auto;
  opacity: 0.1;
  pointer-events: none;
}
.discovery-cta__eyebrow, .discovery-cta__title, .discovery-cta__description, .discovery-cta__actions {
    position: relative;
    z-index: 1;
}
.discovery-cta__eyebrow {
  margin: 0 0 1.5rem;
  color: #FFF;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  text-transform: uppercase;
}
.discovery-cta__title {
  margin: 0;
  color: #FFF;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}
.discovery-cta__description {
  margin: 1.5rem 0 0;
  color: #FFF;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
}
.discovery-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;
  margin-top: 2.5rem;
}
/* Primary */
.discovery-cta .btn {
    padding: 0.9rem 1.5rem;
}
.discovery-cta .btn--primary {
  background: #ffffff;
  color: #FE3F00;
  border: 1px solid #FE3F00;
}
.discovery-cta .btn--primary:hover {
  background: #f8f8f8;
}
.discovery-cta .btn--outline {
  border: 1px solid rgba(255, 255, 255, 0.9);
  color: #ffffff;
}
.discovery-cta .btn--outline:hover {
    background: rgba(255, 255, 255, 0.12);
}
@media (max-width: 639px) {
  .price-hero .container {
    max-width: 400px;
  }
  .price-hero__cta .btn {
    font-size: 1.125rem;
  }
}
/* Tablet */
@media (min-width: 640px) {

  .price-hero {
    padding-top: 3rem;
  }

  .steps-grid {
    /* minmax(0,...): a bare 1fr floors at the column's min-content width, and
       the feature list items push the three-up grid past the container. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .step-card {
    padding: 2.5rem 1.875rem;
  }

  .discovery-cta {
    padding: 2rem 0;
  }

  .discovery-cta__inner {
    padding: 65px 40px;
  }

  .discovery-cta__actions {
    flex-direction: row;
    align-items: center;
    justify-content: center;

    max-width: none;
  }

  .discovery-cta .btn {
    width: auto;
    min-width: 0;
  }
}
/* Desktop */
@media (min-width: 960px) {

  .price-hero {
    padding: 6.4rem 0 9.35rem;
  }

  .price-hero h1 {
    font-size: 3.5rem;
  }

  .price-hero .hero-wave {
    height: 350px;
    background-image: url(assets/hero-wave-img.svg);
  }

  .price-hero .eyebrow {
    font-size: 2rem;
    margin-bottom: 1.5rem;
  }

  .price-hero .intro {
    font-size: 1.5rem;
  }

  .pricing-note {
    font-size: 2rem;
    font-weight: 600;
  }

  .pricing-card .card-label,
  .step-card li {
    max-width: 380px;
    padding: 1rem 0 1rem 4rem;
    font-size: 1rem;
  }

  .compare-section {
    text-align: center;
    padding: 3.75rem 0;
  }

  .compare-section .eyebrow {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
  }

  .compare-section h2 {
    margin-bottom: 1.5rem;
    font-size: 3rem;
    line-height: 1;
  }

  .compare-section .intro {
    max-width: 1200px;
    font-size: 1.25rem;
    margin-bottom: 3rem;
  }

  .step-card .step-number {
    font-size: 1.25rem;
    font-weight: 600;
  }

  .step-card__title {
    font-size: 1.75rem;
  }

  .step-lead {
    margin: 0.5rem 0 1.5rem;
    font-size: 1.25rem;
  }

  .steps-grid {
    gap: 2.5rem;
  }

  .step-card__toggle {
    cursor: default;
  }

  .step-card__icon {
    display: none;
  }

  .step-card .step-card__lists {
    display: block;
  }

  .pricing-plans {
    margin: 3.75rem 0;
    padding: 7.5rem 0;
  }

  .pricing-plans__header {
    text-align: center;
  }

  .pricing-carousel {
      overflow: visible;
      padding-bottom: 0;
  }

  .pricing-carousel__track.carousel__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }

  .pricing-carousel .carousel__item {
      width: auto;
      margin: 0;
  }

  .pricing-carousel__dots {
      display: none;
  }

  .discovery-cta {
    padding: 3.75rem 0;
  }

  .discovery-cta__inner {
    padding: 58px 50px;
  }

  .discovery-cta__title {
    font-size: 2.5rem;
  }

  .discovery-cta__description {
    font-size: 1.25rem;
  }

  .discovery-cta__actions {
    margin-top: 3rem;
  }
}
@media (min-width: 1100px) {
  .price-hero__cta {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin-top: 3rem;
  }

  .pricing-plans .eyebrow {
    margin: 0 0 1.5rem;
    font-size: 1.25rem;
    line-height: 1.5;
  }

  .pricing-plans__header h2 {
    font-size: 3.5rem;
    line-height: 1;
  }

  .pricing-plans__intro {
    font-size: 1.25rem;
    margin-bottom: 3.75rem;
  }

  .pricing-plan__card {
    min-height: 569px;
    padding: 5.2rem 1.875rem 2.5rem;
  }

  .pricing-card__badge {
    top: 20px;
    left: 30px;
  }

  .pricing-card__category {
    font-size: 1.25rem;
    margin-bottom: 2.5rem;
  }

  .pricing-card__name {
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
  }

  .pricing-card__price {
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .pricing-card__amount {
    font-size: 3.5rem;
  }

  .pricing-card__unit {
    font-size: 1.5rem;
  }

  .pricing-card__description {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
  }

  .plan-comparison__header {
    max-width: 1048px;
    margin: 7.5rem auto 3.75rem;
    text-align: center;
  }

  .plan-comparison__header h2 {
    font-size: 3rem;
    line-height: 1;
  }

  .plan-comparison__header p {
    font-size: 1.25rem;
  }

  .comparison-table {
    min-width: 0;
    font-size: 11px;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 1.5rem 1.25rem;
  }

  .comparison-table thead th {
    font-size: 1.5rem;
  }

  .comparison-table tbody th{
    font-size: 1.25rem;
    padding-inline: 0 1.25rem;
  }

  .comparison-table tbody td {
    font-size: 1.25rem;
  }

  .discovery-cta__eyebrow {
    font-size: 1.25rem;
  }

  .discovery-cta__inner {
    padding: 5.25rem 5rem;
  }

  .discovery-cta__title {
    max-width: 1200px;
    margin-inline: auto;
    font-size: 3rem;
  }

  .discovery-cta__inner::after {
    background-image: url(./assets/discovery-cover-bg.svg);
    background-position-y: 0;
  }
}
/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ========== solution.css ========== */
body.solution-page .pricing-note, body.solution-page .intro:not(.mob) {
    display: none;
}
.intelligence-section {
    --intelligence-orange: #FE3F00;
    --intelligence-bg: #FAF6F0;
    --intelligence-card-bg: #ffffff;
    --intelligence-text: #303030;
    --intelligence-muted: #555;
    position: relative;
    overflow: hidden;
    padding: 3.75rem 0;
    background: var(--intelligence-bg);
    color: var(--intelligence-text);
}
.intelligence-section__header {
    text-align: center;
}
.intelligence-section .eyebrow {
    margin: 0 0 1.5rem;
    color: #303030;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    text-transform: uppercase;
}
.intelligence-section__header h2 {
    margin: 0;
    color: #303030;
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.2;
}
.intelligence-section__intro {
    margin: 1.25rem auto 0;
    color: #303030;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
}
.intelligence-tabs {
    position: relative;
    display: flex;
    gap: 0.56rem;
    margin: 2.5rem 0 1rem;
}
.intelligence-tabs__button {
    position: relative;
    padding: 0.75rem 1.875rem;
    border: 2px solid var(--neo-org);
    border-radius: 2px;
    background: transparent;
    color: var(--neo-org);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.5;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition:
        color 300ms ease,
        background-color 300ms ease,
        transform 300ms ease;
}
.intelligence-tabs__button::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--neo-org);
    transform: translateY(101%);
    transition: transform 350ms cubic-bezier(.16, 1, .3, 1);
}
.intelligence-tabs__button:hover {
    transform: translateY(-2px);
}
.intelligence-tabs__button.is-active {
    color: #fff;
}
.intelligence-tabs__button.is-active::before {
    transform: translateY(0);
}
.intelligence-tabs__button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
.intelligence-card-wrap {
    position: relative;
    margin-top: 0.25rem;
    perspective: 1400px;
}
.intelligence-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.875rem 1.25rem;
    border-top: 4px solid var(--intelligence-orange);
    border-radius: 16px;
    background: var(--intelligence-card-bg);
    transform-origin: center center;
    overflow: hidden;
}
.intelligence-card[hidden] {
    display: none !important;
}
.intelligence-card::before {
    content: "";
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    left: -10%;
    width: 1px;
    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--intelligence-orange),
            transparent
        );
    opacity: 0;
    transform: translateX(0);
}
.intelligence-card.is-animating::before {
    animation: intelligence-light-sweep 900ms ease;
}
.intelligence-card::after {
    content: "";
    position: absolute;
    z-index: 0;

    width: 300px;
    height: 300px;

    right: -180px;
    bottom: -200px;

    border-radius: 50%;

    background: var(--intelligence-orange);
    opacity: 0.035;

    filter: blur(40px);
    pointer-events: none;
}
.intelligence-card__content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.intelligence-card__eyebrow {
    margin: 0 0 0.5rem;
    color: var(--intelligence-orange);
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase;
}
.intelligence-card__title {
    margin: 0;
    color: #303030;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}
.intelligence-card__content .intelligence-card__desc, .intelligence-card__content .btn {
    display: none;
}
.intelligence-card__desc {
    margin: 1.5rem 0 0;
    color: #303030;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
}
.intelligence-card__mob .btn {
    margin-top: 1.5rem;
    padding: 0.725rem 1.875rem;
}
.intelligence-card__visual {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
.intelligence-card__image-wrap {
    position: relative;
    width: 100%;
    max-width: 360px;
    height: 360px;
    overflow: hidden;
    border-radius: 16px;
    transform-style: preserve-3d;
    transition:
        transform 500ms cubic-bezier(.16, 1, .3, 1);
}
.intelligence-card__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transform: scale(1.01);
    transition:
        transform 900ms cubic-bezier(.16, 1, .3, 1);
}
.intelligence-card__image-wrap:hover .intelligence-card__image {
    transform: scale(1.06);
}
.agency-services {
    padding: 3.75rem 0;
    background-color: #fff;
}
.agency-services__header {
    margin-bottom: 1.5rem;
}
.agency-services__header h2 {
    margin: 0;
    color: #303030;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}
/* Cards */
.agency-services__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
.service-card {
    display: flex;
    flex-direction: column;
    padding: 1.875rem 1.25rem;
    color: #fff;
    background-color: #303030;
    border-radius: 16px;
}
.service-card__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 1rem;
}
.service-card__icon svg {
    width: 100%;
    height: auto;
}
.service-card__eyebrow {
    margin: 0 0 0.25rem;
    color: #FFF;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-transform: uppercase;
}
.service-card__title {
    margin: 0 0 1rem;
    color: #FFF;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}
.service-card__description {
    margin: 0;
    color: #FFF;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
}
.ai-discovery-cta {
    position: relative;
    padding: 3.75rem 0;
    color: #fff;
    background:
        linear-gradient(
            110deg,
            var(--color-purple) 0%,
            #7814a7 50%,
            var(--color-purple-light) 100%
        );
}
.ai-discovery-cta__content {
    text-align: center;
}
.ai-discovery-cta h2 {
    margin: 0 0 1.5rem;
    color: #FFF;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}
.ai-discovery-cta p {
    margin: 0 0 2.5rem;
    color: #FFF;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
}
.ai-discovery-cta .btn--primary {
    background: #ffffff;
    color: #FE3F00;
    border: 1px solid #FE3F00;
    padding: 0.82rem 3.75rem;
}
.ai-discovery {
    padding: 3.75rem 0 1.875rem;
    background-color: #fff;
}
.ai-discovery__intro {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ai-discovery__card {
    display: grid;
    /* minmax(0,...) rather than a bare auto/1fr: a grid track's automatic
       minimum is its content's min-content width, which pushed the card past
       the viewport on narrow phones. */
    grid-template-columns: minmax(0, 1fr);
    padding: 3.75rem 1.25rem;
    background-color: #FAF6F0;
    border-radius: 16px;
}
.ai-discovery__eyebrow {
    margin: 0 0 0.5rem;
    color: #303030;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    text-transform: uppercase;
}
.ai-discovery__intro h2 {
    margin: 0 0 1.5rem;
    color: #303030;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}
.ai-discovery__description {
    margin: 0 0 1.5rem;
    color: #303030;
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.5;
}
.ai-discovery__steps {
    display: flex;
    flex-direction: column;
}
.ai-discovery-step {
    display: grid;
    /* Stacked below 400px: the 116px number column leaves the prose too little
       measure for its longest words, which then escape the card. */
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid #FF5C00;
}
@media (min-width: 400px) {
    .ai-discovery-step {
        grid-template-columns: minmax(0, 116px) minmax(0, 1fr);
        gap: 1rem;
    }
}
.ai-discovery-step:first-child {
    padding-top: 0;
}
.ai-discovery-step:last-of-type {
    padding-bottom: 2.5rem;
    border-bottom: 0;
}
.ai-discovery__intro .btn {
    display: none;
}
.ai-discovery-step__number {
    color: #303030;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5;
    text-transform: uppercase;
}
.ai-discovery-step h3 {
    margin: 0 0 0.5rem;
    color: var(--neo-org);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}
.ai-discovery-step__content > p:last-child {
    margin: 0;
    color: #303030;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
}
.funnel-shift {
    padding-block: 3.75rem 1.875rem;
}
.funnel-shift .eyebrow {
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}
.funnel-shift h2 {
    max-width: 600px;
    margin: 0;
    color: #303030;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}
.funnel-shift__inner {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.funnel-shift__content p {
    margin: 1rem 0 0;
    color: #303030;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
}
.funnel-shift__callout {
    position: relative;
    display: flex;
    align-items: center;
    padding: 2.5rem 1.25rem;
    overflow: hidden;
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            #d18cf1 0%,
            #db69a8 45%,
            #ff4218 100%
        );
}
.funnel-shift__callout::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url(./assets/funnel-shift-img.svg) center 60px no-repeat;
    background-size: 100% auto;
    opacity: 0.2;
    pointer-events: none;
}
.funnel-shift__callout p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #FFF;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
}
.growth-metric {
    padding: 1.875rem 0;
}
.growth-metric p {
    margin: 0;
    color: #303030;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.5;
}
.growth-metric .eyebrow {
    margin: 0 0 0.5rem;
    text-transform: uppercase;
}
.growth-metric h2 {
    margin: 0 0 1rem;
    color: #303030;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}
.signal-grid {
    display: grid;
    gap: 16px;
    margin-top: 1.5rem;
}
.signal-card {
    padding: 1.875rem;
    border-radius: 16px;
    background: #DFB2FF;
}
.signal-card__number {
    margin: 0;
    color: #303030;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    text-transform: uppercase;
}
.signal-card h3 {
    margin: 0.25rem 0 1rem;
    color: #303030;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}
.signal-card p {
    margin: 0;
    color: #303030;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
}
.revenue-case {
    padding: 1.875rem 0 3.875rem;
}
.revenue-case .section-header p {
    margin: 0;
    color: #303030;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
}
.revenue-case .section-header .eyebrow {
    text-transform: uppercase;
}
.revenue-case h2 {
    margin: 0.5rem 0 1rem;
    color: #303030;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
}
.revenue-grid {
    display: grid;
    gap: 16px;

    margin-block-start: 32px;
}
.revenue-card {
    padding: 1.875rem 1.25rem;
    border-radius: 16px;
    background: #303030;
    color: #fff;
}
.revenue-card__value {
    margin: 0;
    color: #FFF;
    font-size: 3rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
}
.revenue-card > p:last-child {
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0;
}
.revenue-card strong {
    color: var(--neo-org);
}
.revenue-case__sources {
    margin: 1.5rem 0 0;
    color: #303030;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
}
@media (min-width: 768px) {

    body.solution-page .pricing-note {
        margin-bottom: 1.5rem;
    }

    body.solution-page .pricing-note, body.solution-page .intro:not(.mob) {
        display: block;
    }

    body.solution-page .intro.mob {
        display: none;
    }

    .intelligence-card {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(300px, 0.85fr);

        align-items: center;
        gap: 3rem;

        border-top: none;
        border-left: 4px solid var(--intelligence-orange);
        padding: 2.5rem 2rem;
    }

    .intelligence-card__visual {
        justify-content: flex-end;
    }

    .intelligence-card__content .btn {
        margin-top: 2.5rem;
    }

    .intelligence-card__content .intelligence-card__desc, .intelligence-card__content .btn {
        display: block;
    }

    .intelligence-card__mob {
        display: none;
    }

    .agency-services__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ai-discovery {
        padding: 7.5rem 0 3.75rem;
    }

    .ai-discovery__card {
        gap: 30px;
        margin-inline: auto;
        padding: 3.75rem;
    }

    .ai-discovery__intro h2 {
        font-size: 3rem;
    }

    .ai-discovery__description {
        font-size: 1.25rem;
        margin-bottom: 3rem;
    }

    .ai-discovery__intro .btn {
        display: inline-flex;
        align-self: flex-start;
    }

    .ai-discovery__steps .btn {
        display: none;
    }

    .ai-discovery-step {
        grid-template-columns: minmax(0, 130px) minmax(0, 1fr);
        gap: 1.5rem;
        padding: 1.5rem 0;
    }

    .ai-discovery-step__number {
        font-size: 1.25rem;
    }

    .ai-discovery-step h3 {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }

    .ai-discovery-step__content > p:last-child {
        font-size: 1rem;
    }

    .ai-discovery-step:last-of-type {
        padding-bottom: 0;
    }

    .funnel-shift__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 68px;
    }

    .revenue-grid {
        gap: 40px;
        grid-template-columns: repeat(3, 1fr);
    }

    .growth-metric .section-header {
        text-align: center;
    }

    .growth-metric p {
        font-size: 1.25rem;
    }

    .growth-metric h2 {
        margin-bottom: 1.5rem;
        font-size: 3rem;
        line-height: 1;
    }

    .growth-metric .eyebrow {
        margin-bottom: 1rem;
    }

    .signal-grid {
        gap: 40px;
        margin-top: 3rem;
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (min-width: 1100px) {

    .intelligence-section {
        padding: 7.5rem 0;
    }

    .intelligence-section .eyebrow {
        font-size: 1.25rem;
    }

    .intelligence-section__header h2 {
        max-width: 1024px;
        margin-inline: auto;
        font-size: 3.5rem;
        line-height: 1;
    }

    .intelligence-section__intro {
        max-width: 1150px;
        font-size: 1.25rem;
    }

    .intelligence-tabs {
        margin: 3.75rem 0 0.5rem;
    }

    .intelligence-card {
        grid-template-columns: 1fr 0.9fr;
        padding: 3.75rem;
    }

    .intelligence-card__content {
        padding-left: 0.25rem;
    }

    .intelligence-card__title {
        font-size: 3rem;
    }

    .intelligence-card__desc {
        font-size: 1.25rem;
    }

    .intelligence-card__eyebrow {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }

    .intelligence-card__visual {
        padding-right: 0.25rem;
    }

    .intelligence-card__image-wrap {
        max-width: 100%;
        height: 480px;
    }

    .agency-services {
        padding: 7.5rem 0;
    }

    .agency-services__header {
        margin-bottom: 3.75rem;
        text-align: center;
    }

    .agency-services__header h2 {
        font-size: 3rem;
        line-height: 1;
    }

    .agency-services__grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 2.5rem;
    }

    .service-card {
        padding: 2.5rem 1.875rem;
    }

    .service-card:nth-child(1),
    .service-card:nth-child(2),
    .service-card:nth-child(3) {
        grid-column: span 2;
    }

    .service-card:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .service-card:nth-child(5) {
        grid-column: 4 / span 2;
    }

    .service-card__icon {
        width: 80px;
        height: 80px;
        margin-bottom: 1.5rem;
    }

    .service-card__eyebrow {
        font-weight: 500;
    }

    .service-card__title {
        font-size: 1.75rem;
    }

    .service-card__description {
        font-size: 1.25rem;
        font-weight: 500;
    }

    .ai-discovery-cta {
        padding: 4.1rem 0;
    }

    .ai-discovery-cta h2 {
        font-size: 3rem;
    }

    .ai-discovery-cta p {
        font-size: 1.25rem;
    }

    .ai-discovery__card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 60px;
    }

    .ai-discovery__eyebrow {
        font-size: 1.25rem;
        font-weight: 600;
        margin-bottom: 1rem;
    }

    .funnel-shift {
        padding: 7.5rem 0 3.75rem;
    }

    .funnel-shift .eyebrow {
        margin-bottom: 1rem;        
    }

    .funnel-shift__content p {
        font-size: 1.25rem;
    }

    .funnel-shift h2 {
        font-size: 3rem;
    }

    .funnel-shift__callout {
        padding: 3.5rem 2.5rem;
    }

    .funnel-shift__callout p {
        font-size: 2.5rem;
    }

    .growth-metric {
        padding: 3.75rem 0;
    }

    .signal-card {
        padding: 3.5rem 1.875rem 2.5rem;
    }

    .signal-card h3 {
        font-size: 1.75rem;
    }

    .revenue-case .section-header p {
        font-size: 1.25rem;
    }

    .revenue-grid {
        margin-top: 3rem;
    }

    .revenue-case h2 {
        margin: 1.5rem 0;
        font-size: 3rem;
        line-height: 1;
    }

    .revenue-card {
        padding: 2.75rem 1.875rem 2.7rem;
    }

    .revenue-card__value {
        font-size: 3.5rem;
    }

    .revenue-card > p:last-child {
        font-size: 1.125rem;
    }

    .revenue-card strong {
        font-weight: 800;
    }

    .revenue-case__sources {
        max-width: 1024px;
        margin: 3rem auto 0;
        margin-top: 3rem;
        font-size: 1rem;
        text-align: center;
    }
}
@keyframes intelligence-light-sweep {

    0% {
        opacity: 0;
        transform: translateX(0);
    }

    20% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateX(1100px);
    }
}

}

@layer utilities {

  /* ---------- Anchor scrolling ----------
     Replaces the scrollIntoView script the pricing page used to run. */
  html {
    scroll-behavior: smooth;
  }
  :target {
    scroll-margin-top: 6rem;
  }

  /* ---------- Focus ----------
     One visible ring everywhere, drawn with outline so it survives Windows
     High Contrast (where box-shadow is stripped). */
  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* ---------- Touch targets ----------
     WCAG 2.5.8: 24x24 minimum. Set as a minimum so content can grow the
     target but never shrink it. */
  button,
  a.btn,
  .carousel-prev,
  .carousel-next,
  .nav-toggle {
    min-block-size: 24px;
    min-inline-size: 24px;
  }
  @media (pointer: coarse) {
    button,
    a.btn,
    .carousel-prev,
    .carousel-next,
    .nav-toggle {
      min-block-size: 44px;
      min-inline-size: 44px;
    }
  }

  /* A disabled carousel control is at an end of the track, not broken. */
  .carousel-prev:disabled,
  .carousel-next:disabled {
    opacity: 0.35;
    cursor: default;
  }

  /* ---------- Skip link ---------- */
  .skip-link {
    position: absolute;
    inset-inline-start: 1rem;
    inset-block-start: -100%;
    z-index: 999;
    padding: 0.75rem 1.25rem;
    background: var(--white);
    color: var(--dark);
    border-radius: 0 0 6px 6px;
    font-weight: 600;
  }
  .skip-link:focus {
    inset-block-start: 0;
  }

  /* ---------- Footer disclosure ----------
     The control is a real button inside the heading, so it needs the
     heading's typography rather than the browser's button styling. */
  .footer-subheading__toggle {
    all: unset;
    display: block;
    inline-size: 100%;
    font: inherit;
    color: inherit;
    text-transform: inherit;
    cursor: pointer;
  }
  .footer-subheading__toggle:disabled {
    cursor: default;
  }
  .footer-subheading__toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  /* ---------- Card tilt ----------
     Was a pointermove handler writing inline transforms on every move. */
  .intelligence-card__image-wrap {
    transition: transform 0.35s ease;
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .intelligence-card__image-wrap:hover {
      transform: perspective(900px) rotateY(3deg) rotateX(-3deg) translateZ(8px);
    }
  }

  /* ---------- Text contrast ----------
     Each selector below was failing WCAG 1.4.3 at body text size. The brand
     orange is unchanged everywhere it is used for fills, icons and large
     display type; only small text moves to an accessible companion. */

  /* Orange text on light surfaces */
  .solution-tag,
  .resource-card__meta span,
  .faq-note a,
  .faq-card__context strong,
  .pricing-card__category,
  .pricing-card__description strong,
  .ai-discovery-step__content h3,
  .price-hero__cta .btn-outline,
  .comparison-table th[scope="col"],
  .intro a,
  .step-card .step-number {
    color: var(--accent-on-light);
  }

  /* Orange text on the dark panels */
  .ai-card__source,
  .revenue-card strong {
    color: var(--accent-on-dark);
  }

  /* White text needs a deeper orange behind it */
  .pricing-card__badge,
  .is-orange {
    background-color: var(--accent-strong);
  }

  /* ---------- Motion preference ---------- */
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }
}

/* ---------- Coming-soon placeholders ---------- */
/* ---------- Product page ----------
   Fourteen features in a row is a lot of the same card. Each group gets a
   different treatment from the vocabulary the site already uses: the dark
   cards from /solution, the orange-hairline rows from the AI Discovery
   engine block, and the cream cards from the pricing steps. The order runs
   heaviest to lightest, which also matches how the page reads — measure,
   act, connect. */

.feature-block {
    padding: 3.75rem 0;
    background-color: #fff;
}
.feature-block--alt {
    background-color: #FAF6F0;
}
.feature-block__header {
    margin-bottom: 1.5rem;
}
.feature-block__eyebrow {
    margin: 0 0 0.5rem;
    color: var(--accent-on-light);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.feature-block__header h2 {
    margin: 0;
    color: #303030;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}
.feature-block__lead {
    margin: 1rem 0 0;
    color: #303030;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
}

/* Rows — no card chrome at all, just the orange hairline used by
   .ai-discovery-step. The long descriptions read better on a wide measure
   than boxed into a third of the row. */
.feature-row {
    display: grid;
    gap: 0.75rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid #FF5C00;
}
.feature-rows .feature-row:first-child {
    border-top: 1px solid #FF5C00;
}
.feature-row__lead {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.feature-row__icon {
    flex: none;
    width: 40px;
    height: 40px;
}
.feature-row__icon svg {
    width: 100%;
    height: auto;
}
.feature-row__eyebrow {
    margin: 0 0 0.125rem;
    color: var(--accent-on-light);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.feature-row__title {
    margin: 0;
    color: #303030;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}
.feature-row__description {
    margin: 0;
    color: #303030;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
}

/* Tiles — the lightest of the three. These are the integrations, and a
   quieter card suits a block whose point is that it plugs into what you
   already run. */
.feature-tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.feature-tile {
    padding: 1.875rem 1.25rem;
    background: #FAF6F0;
    border: 1px solid #EADFD0;
    border-radius: 1rem;
}
.feature-tile__icon {
    width: 40px;
    height: 40px;
    margin-bottom: 1rem;
}
.feature-tile__icon svg {
    width: 100%;
    height: auto;
}
.feature-tile__eyebrow {
    margin: 0 0 0.25rem;
    color: var(--accent-on-light);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.feature-tile__title {
    margin: 0 0 0.75rem;
    color: #303030;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
}
.feature-tile__description {
    margin: 0;
    color: #303030;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
}

/* The how-it-works cards list feature names, not benefit copy, so they take a
   tighter marker than the pricing steps: the shared one is a 40px starburst
   badge drawn from a 35×33 source, which at this size reads as oversized and
   slightly different on every row. This is a square glyph, sized to the text
   and centred on the line. */
.steps-grid--features .step-card li {
    padding: 0.75rem 0 0.75rem 2rem;
}
.steps-grid--features .step-card li::before {
    top: 50%;
    width: 1.25rem;
    height: 1.25rem;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='10' cy='10' r='9' stroke='%23FF5C00' stroke-width='2'/%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' stroke='%23FF5C00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

@media (min-width: 768px) {
    .feature-tiles {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .feature-block {
        padding: 7.5rem 0;
    }
    .feature-block__header {
        margin-bottom: 3.75rem;
        text-align: center;
    }
    .feature-block__header h2 {
        font-size: 3rem;
        line-height: 1;
    }
    .feature-block__lead {
        max-width: 46rem;
        margin: 1.5rem auto 0;
        font-size: 1.125rem;
    }

    /* The label column is fixed so every title starts on the same line and
       the descriptions share one left edge down the block. */
    .feature-row {
        grid-template-columns: 24rem 1fr;
        gap: 2.5rem;
        align-items: start;
        padding: 2rem 0;
    }
    .feature-row__icon {
        width: 56px;
        height: 56px;
    }
    .feature-row__title {
        font-size: 1.75rem;
    }
    .feature-row__description {
        font-size: 1.125rem;
        font-weight: 500;
    }

    .feature-tiles {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
    .feature-tile {
        padding: 2.5rem 1.875rem;
    }
    .feature-tile__icon {
        width: 56px;
        height: 56px;
        margin-bottom: 1.5rem;
    }
}

/* ---------- Enterprise ----------
   Two blocks this page needs that nothing else on the site had: the rollout
   sequence, and the security section, which is a statement plus a short list
   of the right mailbox to use. Both are built from existing tokens. */

.rollout-steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 2.5rem 0 0;
    counter-reset: rollout;
}
.rollout-step {
    counter-increment: rollout;
    position: relative;
    padding: 1.875rem 1.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1rem;
}
.rollout-step::before {
    content: counter(rollout);
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 700;
}
.rollout-step__label {
    display: block;
    margin-bottom: 0.375rem;
    color: var(--accent-on-light);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.rollout-step__title {
    margin: 0 0 0.5rem;
    color: #303030;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}
.rollout-step__body {
    margin: 0;
    color: #303030;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
}

.enterprise-security {
    padding: 3.75rem 0;
    background: var(--dark);
    color: #fff;
}
.enterprise-security__inner {
    display: grid;
    gap: 2rem;
}
.enterprise-security h2 {
    margin: 0 0 1rem;
    color: #fff;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
}
.enterprise-security .feature-block__eyebrow {
    color: var(--accent-on-dark);
}
.enterprise-security__lead {
    margin: 0 0 1rem;
    color: #fff;
    font-size: 1rem;
    line-height: 1.65;
}
.enterprise-security__contacts {
    padding: 1.875rem 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 1rem;
}
.enterprise-security__contacts-title {
    margin: 0 0 1rem;
    color: var(--accent-on-dark);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.enterprise-security__contacts ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}
.enterprise-security__contacts li {
    display: grid;
    gap: 0.25rem;
}
.enterprise-security__contacts span {
    color: var(--muted-on-dark);
    font-size: 0.9375rem;
}
.enterprise-security__contacts a {
    color: #fff;
    font-weight: 700;
    word-break: break-word;
}

@media (min-width: 768px) {
    .rollout-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .rollout-steps {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        margin-top: 3.75rem;
    }
    .rollout-step {
        padding: 2.5rem 1.875rem;
    }
    .enterprise-security {
        padding: 7.5rem 0;
    }
    .enterprise-security__inner {
        grid-template-columns: 1.35fr 1fr;
        gap: 4rem;
        align-items: start;
    }
    .enterprise-security h2 {
        font-size: 3rem;
        line-height: 1.05;
    }
    .enterprise-security__lead {
        font-size: 1.125rem;
    }
    .enterprise-security__contacts {
        padding: 2.5rem 1.875rem;
    }
}

/* ---------- About ----------
   A numbered list of commitments. Distinct from .rollout-steps: those are a
   sequence you move through, these are things held at once, so they read as
   a plain grid with the numeral as a quiet marker rather than a filled pill. */

.principles {
    padding: 3.75rem 0;
    background: var(--bg);
}
.principles__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: principle;
}
.principle {
    counter-increment: principle;
    padding: 1.875rem 1.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 1rem;
}
.principle::before {
    content: "0" counter(principle);
    display: block;
    margin-bottom: 0.75rem;
    color: var(--accent-on-light);
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}
.principle__title {
    margin: 0 0 0.5rem;
    color: #303030;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.25;
}
.principle__body {
    margin: 0;
    color: #303030;
    font-size: 1rem;
    line-height: 1.65;
}

@media (min-width: 768px) {
    .principles__list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1100px) {
    .principles {
        padding: 7.5rem 0;
    }
    .principles__list {
        gap: 1.5rem;
    }
    .principle {
        padding: 2.5rem 1.875rem;
    }
    .principle__title {
        font-size: 1.5rem;
    }
    .principle__body {
        font-size: 1.0625rem;
    }
}

/* ---------- Contact ----------
   Two columns above 1100px: the mailbox list, and an aside carrying either
   the form or the Snapshot card. Form controls get a 44px minimum height and
   a visible focus ring — the site-wide ring is defined in the utilities
   layer, so these only set the shape. */

.contact-section {
    padding: 3.75rem 0 5rem;
    background: #fff;
}
.contact-grid {
    display: grid;
    gap: 2.5rem;
}
.contact-heading {
    margin: 0 0 0.75rem;
    color: #303030;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
}
.contact-lead {
    margin: 0 0 2rem;
    color: #303030;
    font-size: 1rem;
    line-height: 1.65;
}
.contact-routes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.25rem;
}
.contact-route {
    padding: 1.25rem 0;
    border-top: 1px solid var(--line);
}
.contact-route__label {
    margin: 0 0 0.25rem;
    color: #303030;
    font-weight: 700;
}
.contact-route__email {
    color: var(--accent-on-light);
    font-weight: 700;
    word-break: break-word;
}
.contact-route__body {
    margin: 0.375rem 0 0;
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}

.contact-aside {
    display: grid;
    gap: 1.5rem;
    align-content: start;
}
.contact-form {
    padding: 1.875rem 1.25rem;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 1rem;
}

.contact-form__intro {
    margin: 0 0 1.5rem;
    color: var(--muted);
    font-size: 0.9375rem;
    line-height: 1.6;
}
.contact-form .field {
    display: grid;
    gap: 0.375rem;
    margin-bottom: 1.125rem;
}
.contact-form label {
    color: #303030;
    font-size: 0.9375rem;
    font-weight: 700;
}
.field__req {
    color: var(--accent-on-light);
}
.field__optional {
    color: var(--muted);
    font-weight: 400;
}
.field__hint {
    margin: 0;
    color: var(--muted);
    font-size: 0.8125rem;
}
.field__error {
    margin: 0;
    color: var(--accent-strong);
    font-size: 0.8125rem;
    font-weight: 500;
}
.contact-form input,
.contact-form textarea {
    min-height: 44px;
    padding: 0.625rem 0.875rem;
    font: inherit;
    color: #303030;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0.5rem;
}
.contact-form textarea {
    resize: vertical;
    min-height: 120px;
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
    border-color: var(--accent);
}
.field--invalid input,
.field--invalid textarea {
    border-color: var(--accent-strong);
}
/* Hidden from people but not from bots, which is the point. Kept out of the
   layout and the tab order without display:none, which some bots skip. */
.field--trap {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.contact-form__submit {
    width: 100%;
    margin-top: 0.5rem;
}
.contact-form__submit[disabled] {
    opacity: 0.6;
    cursor: progress;
}
.contact-form__status {
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}
.contact-form__status.is-success {
    color: #1c4d2c;
    background: #e7f5ec;
    border: 1px solid #b6ddc4;
}
.contact-form__status.is-error {
    color: var(--accent-strong);
    background: #fff1ec;
    border: 1px solid var(--accent-soft);
}
.contact-form__note {
    margin: 1rem 0 0;
    font-size: 0.875rem;
    color: var(--muted);
}

@media (min-width: 1100px) {
    .contact-section {
        padding: 5rem 0 7.5rem;
    }
    .contact-grid {
        grid-template-columns: 1.1fr 1fr;
        gap: 4rem;
    }
    .contact-heading {
        font-size: 1.75rem;
    }
    .contact-form {
        padding: 2.5rem 1.875rem;
    }
}

/* /faq stacks several FAQ blocks; alternating the ground keeps the groups
   visually separate without adding a divider. */
.faq-section--alt {
    background: var(--bg);
}

/* ---------- Legal pages ----------
   A measured reading column. 68ch is the same line length the blog uses, for
   the same reason: these are long documents and a full-width line is unusable. */

.legal-section {
    padding: 3.75rem 0 5rem;
    background: #fff;
}
.legal {
    max-width: 68ch;
    color: #303030;
    font-size: 1.0625rem;
    line-height: 1.75;
}
.legal__updated {
    margin: 0 0 2.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.9375rem;
}
.legal h2 {
    margin: 2.5rem 0 0.75rem;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    scroll-margin-top: 6rem;
}
.legal h3 {
    margin: 2rem 0 0.5rem;
    font-family: var(--font-heading);
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.3;
}
.legal p {
    margin: 0 0 1.125rem;
}
.legal ul,
.legal ol {
    margin: 0 0 1.125rem;
    padding-left: 1.5rem;
}
.legal li + li {
    margin-top: 0.5rem;
}
.legal a {
    color: var(--accent-on-light);
    /* WCAG 1.4.1: the global `a { text-decoration: none }` left links in body
       copy distinguishable by colour alone, and the orange only reaches
       2.44:1 against the surrounding text — under the 3:1 the criterion asks
       for. Underlining is the distinguisher, and it is what a reader expects
       in a long document anyway. */
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

@media (min-width: 1100px) {
    .legal-section {
        padding: 5rem 0 7.5rem;
    }
    .legal h2 {
        font-size: 1.75rem;
        margin-top: 3rem;
    }
}

/* The resources carousel links each card to its post; this is the way to the
   hub itself. Sits with the carousel arrows on desktop and above the track on
   mobile, where those arrows move to the foot of the section. */
.resources-header__actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.resources-all {
    color: var(--accent-on-light);
    font-weight: 700;
    white-space: nowrap;
}
.resources-all::after {
    content: " →";
}