/* Built from src/styles/*.css by src/lib/builder.js. Do not edit dist/. */
/* ---- 00-tokens.css ---- */
/* ==========================================================================
   Design tokens. Every colour, font, radius and spacing value used by the
   site is defined here. Change a token and every component follows.
   The palette comes from the Webflow site this replaced.
   ========================================================================== */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-variable.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;
}

:root {
  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Neutrals */
  --c-ink: #0a0a0b;          /* headings, primary buttons */
  --c-text: #333336;         /* body copy on light backgrounds */
  --c-muted: #6b6d74;        /* secondary copy, captions */
  --c-line: #e7e7ea;         /* hairlines on light backgrounds */
  --c-bg: #ffffff;
  --c-bg-soft: #f6f6f6;      /* "grey" sections */
  --c-bg-smoke: #f3f3f3;
  --c-dark: #1a1b20;         /* nav, footer, dark sections */
  --c-dark-2: #25262d;       /* cards on dark sections */
  --c-dark-line: rgba(255, 255, 255, 0.14);
  --c-on-dark: #ffffff;
  --c-on-dark-muted: rgba(255, 255, 255, 0.68);

  /* Brand accents */
  --c-blue: #175bff;
  --c-blue-light: #5683f0;
  --c-purple: #6442d9;
  --c-pink: #c071af;
  --c-red: #d36470;
  --c-orange: #dd883d;
  --c-tint-blue: #eaf6fd;    /* pastel panels */
  --c-tint-purple: #f1edfc;
  --c-tint-peach: #fdf1e8;
  --c-success: #1f9d55;
  --c-danger: #d64545;

  /* Brand gradients (headline highlight words, CTA banner, orbs) */
  --g-brand: linear-gradient(100deg, #f5a142 0%, #e8577e 45%, #8f5cf5 100%);
  --g-numbers: linear-gradient(100deg, #f08a3c 0%, #d9577c 50%, #5d7df5 100%);
  --g-voice: linear-gradient(100deg, #f3934a 0%, #e05a86 40%, #7556f0 100%);
  --g-sms: linear-gradient(100deg, #e86aa0 0%, #b05ce0 55%, #6d5cf3 100%);
  --g-flow: linear-gradient(100deg, #f4c44d 0%, #f08a5d 45%, #d75ca8 100%);
  --g-analytics: linear-gradient(100deg, #f06e8e 0%, #b760e6 55%, #6a5cf4 100%);
  --g-cta: linear-gradient(115deg, #3a1d5c 0%, #b8397a 50%, #f08a3c 100%);

  /* Radius & shadow */
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-xl: 36px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(10, 10, 11, 0.06), 0 1px 2px rgba(10, 10, 11, 0.04);
  --shadow: 0 10px 30px rgba(10, 10, 11, 0.08), 0 2px 6px rgba(10, 10, 11, 0.04);
  --shadow-lg: 0 24px 60px rgba(10, 10, 11, 0.14);

  /* Layout */
  --container: 1280px;
  --container-narrow: 820px;
  --gutter: clamp(20px, 4vw, 48px);
  --section-y: clamp(64px, 9vw, 120px);
  --nav-h: var(--chrome-h, 72px);   /* header height, owned by 50-chrome.css */

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---- 10-base.css ---- */
/* ==========================================================================
   Base: reset and default element styles. Page content inherits these, so
   plain <h2>, <p>, <ul> and <table> look right without any classes.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

main {
  flex: 1 0 auto;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Links in running text (including SEO cross-links): the text's own colour with a thin,
   faint underline that turns solid on hover. Quiet in dense copy, but still visibly a link
   without relying on colour alone. Components (buttons, cards, nav) set their own styles. */
a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: rgba(128, 128, 128, 0.45);
  text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
  transition: text-decoration-color 0.15s ease, color 0.15s ease;
}

a:hover {
  text-decoration-color: currentColor;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.5em;
  color: var(--c-ink);
  font-weight: 500;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.4rem, 1.6rem + 3.2vw, 3.6rem);
  line-height: 1.1;
}

h2 {
  font-size: clamp(1.9rem, 1.35rem + 2.2vw, 3rem);
  line-height: 1.15;
}

h3 {
  font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.75rem);
  line-height: 1.25;
}

h4 {
  font-size: 1.2rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

h5,
h6 {
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0;
}

p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0 0 1.1em;
  padding-left: 1.3em;
}

li + li {
  margin-top: 0.35em;
}

strong,
b {
  font-weight: 600;
  color: inherit;
}

hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: 2rem 0;
}

blockquote {
  margin: 0 0 1.5em;
  padding-left: 1.2em;
  border-left: 3px solid var(--c-purple);
  font-size: 1.15rem;
  color: var(--c-ink);
}

code,
kbd,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

pre {
  overflow-x: auto;
  padding: 1.2em 1.4em;
  border-radius: var(--radius);
  background: var(--c-dark);
  color: #e8e8ee;
  line-height: 1.55;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

th,
td {
  padding: 0.85em 1em;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--c-line);
}

th {
  font-weight: 600;
  color: var(--c-ink);
  font-size: 0.85rem;
}

::selection {
  background: rgba(100, 66, 217, 0.18);
}

:focus-visible {
  outline: 3px solid var(--c-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 1000;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--c-on-dark);
  color: var(--c-ink);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow);
}

.skip-link:focus {
  top: 12px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- 20-layout.css ---- */
/* ==========================================================================
   Layout: sections, containers, grids and two-column splits.

   Every page is a stack of <section class="section"> blocks. Inside each,
   a .container sets the max width and side gutters.

     <section class="section section--soft">
       <div class="container"> ... </div>
     </section>
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-width: calc(var(--container-narrow) + var(--gutter) * 2);
}

.container--wide {
  max-width: calc(1440px + var(--gutter) * 2);
}

/* Sections ---------------------------------------------------------------- */
.section {
  position: relative;
  padding-block: var(--section-y);
}

.section--tight {
  padding-block: calc(var(--section-y) * 0.6);
}

.section--flush-top {
  padding-top: 0;
}

.section--flush-bottom {
  padding-bottom: 0;
}

.section--soft {
  background: var(--c-bg-soft);
}

.section--tint {
  background: var(--c-tint-blue);
}

.section--dark {
  background: var(--c-dark);
  color: var(--c-on-dark-muted);
}

.section--dark :is(h1, h2, h3, h4, h5, h6, strong) {
  color: var(--c-on-dark);
}

.section--dark a:not(.btn) {
  color: var(--c-on-dark);
}

/* Soft purple/orange glow behind a dark section */
.section--glow {
  overflow: hidden;
  isolation: isolate;
}

.section--glow::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto auto;
  width: min(900px, 90vw);
  aspect-ratio: 1;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(143, 92, 245, 0.35), rgba(232, 87, 126, 0.18) 55%, transparent 75%);
  filter: blur(20px);
  pointer-events: none;
}

.section--glow-left::before {
  inset: auto auto -30% -15%;
}

/* A hairline between two white sections */
.section + .section--divided::after,
.section--divided::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: min(var(--container), calc(100% - var(--gutter) * 2));
  border-top: 1px solid var(--c-line);
}

/* Section headings -------------------------------------------------------- */
.section-head {
  max-width: 860px;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

.section-head > :last-child {
  margin-bottom: 0;
}

/* Grids --------------------------------------------------------------------
   .grid          auto-fit columns with a 260px minimum
   .grid--2/3/4   fixed column counts that collapse on smaller screens     */
.grid {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

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

.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--gap-lg {
  gap: clamp(32px, 5vw, 64px);
}

@media (max-width: 991px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Split: text on one side, media on the other ------------------------------
   <div class="split">
     <div class="split__text">...</div>
     <div class="split__media"><img ...></div>
   </div>
   Add .split--reverse to put the media first on desktop.              */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}

.split--top {
  align-items: start;
}

.split--wide-text {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

.split--reverse .split__media {
  order: -1;
}

.split__text > :last-child {
  margin-bottom: 0;
}

.split__media img,
.split__media video {
  width: 100%;
}

@media (max-width: 860px) {
  .split,
  .split--wide-text {
    grid-template-columns: minmax(0, 1fr);
  }

  .split--reverse .split__media {
    order: 0;
  }
}

/* Stack: consistent vertical rhythm between arbitrary children */
.stack > * + * {
  margin-top: var(--stack-gap, 1rem);
}

.stack--lg {
  --stack-gap: 2rem;
}

/* ---- 30-typography.css ---- */
/* ==========================================================================
   Typography helpers.

   .eyebrow         small coloured label above a heading ("Product summary")
   .lead            larger intro paragraph
   .text-gradient   gradient-filled highlight words in a heading
   ========================================================================== */

.eyebrow {
  display: block;
  margin: 0 0 0.9rem;
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.15rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--c-blue);
}

.eyebrow--orange { color: var(--c-orange); }
.eyebrow--purple { color: var(--c-purple); }
.eyebrow--pink { color: var(--c-pink); }
.eyebrow--red { color: var(--c-red); }
.eyebrow--light-blue { color: var(--c-blue-light); }
.eyebrow--white { color: var(--c-on-dark); }

/* Uppercase variant used on panel labels ("FOR ENTERPRISE & GOVERNMENT") */
.eyebrow--caps {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lead {
  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.25rem);
  line-height: 1.6;
  color: var(--c-text);
}

.section--dark .lead,
.hero--dark .lead {
  color: var(--c-on-dark-muted);
}

.muted {
  color: var(--c-muted);
}

.small {
  font-size: 0.875rem;
}

.fine-print {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--c-muted);
}

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

.text-right {
  text-align: right;
}

.text-balance {
  text-wrap: balance;
}

.nowrap {
  white-space: nowrap;
}

/* Gradient highlight ------------------------------------------------------
   <h1><span class="text-gradient text-gradient--voice">Take control</span> &amp; ...</h1> */
.text-gradient {
  background: var(--g-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.text-gradient--numbers { background-image: var(--g-numbers); }
.text-gradient--voice { background-image: var(--g-voice); }
.text-gradient--sms { background-image: var(--g-sms); }
.text-gradient--flow { background-image: var(--g-flow); }
.text-gradient--analytics { background-image: var(--g-analytics); }

/* Prose: long-form text blocks (policies, articles, FAQs) */
.prose {
  max-width: 72ch;
}

.prose h2 {
  margin-top: 2.2em;
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
}

.prose h3 {
  margin-top: 1.8em;
}

.prose a {
  color: var(--c-blue);
}

.prose img {
  border-radius: var(--radius);
  margin: 1.5em 0;
}

/* Inline text link with an arrow, e.g. "Learn more about Flow ->" */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: 500;
  color: var(--c-ink);
  text-decoration: none;
}

.link-arrow::after {
  content: "";
  width: 0.7em;
  height: 0.7em;
  background: currentColor;
  -webkit-mask: url("/assets/img/icons/arrow-up-right.svg") center / contain no-repeat;
  mask: url("/assets/img/icons/arrow-up-right.svg") center / contain no-repeat;
  transition: transform 0.2s var(--ease);
}

.link-arrow:hover::after {
  transform: translate(2px, -2px);
}

.section--dark .link-arrow,
.card--dark .link-arrow {
  color: var(--c-on-dark);
}

.link-arrow--blue {
  color: var(--c-blue);
}

/* ---- 40-buttons.css ---- */
/* ==========================================================================
   Buttons.

   <a class="btn btn--primary" href="/sales">Talk to sales</a>
   <a class="btn btn--light" href="...">...</a>      white pill (on dark / gradient backgrounds)
   <a class="btn btn--ghost" href="...">...</a>      outlined
   <a class="btn btn--text" href="...">...</a>       text only, same size as a button
   Wrap several in <div class="btn-row">.
   ========================================================================== */

.btn {
  --btn-bg: var(--c-ink);
  --btn-fg: #fff;
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 52px;
  padding: 0.9rem 1.75rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(10, 10, 11, 0.16);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  --btn-bg: var(--c-ink);
  --btn-fg: #fff;
}

.btn--light {
  --btn-bg: #fff;
  --btn-fg: var(--c-ink);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--c-ink);
  --btn-border: rgba(10, 10, 11, 0.2);
}

.btn--ghost:hover {
  --btn-border: var(--c-ink);
  box-shadow: none;
}

.section--dark .btn--ghost,
.hero--dark .btn--ghost,
.card--dark .btn--ghost {
  --btn-fg: #fff;
  --btn-border: rgba(255, 255, 255, 0.35);
}

.btn--text {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  padding-inline: 0.5rem;
}

.btn--text:hover {
  box-shadow: none;
  text-decoration: underline;
}

.btn--small {
  min-height: 42px;
  padding: 0.6rem 1.25rem;
  font-size: 0.925rem;
}

.btn--block {
  width: 100%;
}

.btn[disabled],
.btn[aria-busy="true"] {
  opacity: 0.6;
  pointer-events: none;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin-top: 2rem;
}

.btn-row--center {
  justify-content: center;
}

@media (max-width: 479px) {
  .btn-row .btn:not(.btn--text) {
    flex: 1 1 100%;
  }
}

/* ---- 50-chrome.css ---- */
/* ==========================================================================
   SITE CHROME (shared): identical in the www and blog repos. Change both together.
     www:  src/styles/50-chrome.css      blog: src/assets/css/chrome.css
   Header (dark / light glass, switches with the section beneath it), products
   mega menu, mobile menu and footer. Self-contained: it relies on nothing from
   either site's own stylesheet except a box-sizing reset.
   Markup: partials/chrome-header.njk, chrome-footer.njk. Behaviour: chrome.js.
   ========================================================================== */

:root {
  --chrome-h: 72px;
  --chrome-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --chrome-ink: #0a0a0b;
  --chrome-dark: #1a1b20;
  --chrome-footer-bg: #131418;
  --chrome-muted: #6b6d74;
  --chrome-line: rgba(10, 10, 11, 0.08);
  --chrome-line-dark: rgba(255, 255, 255, 0.1);
  --chrome-blue: #175bff;
  --chrome-max: 1440px;
  --chrome-gutter: clamp(20px, 4vw, 48px);
  --chrome-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (min-width: 992px) {
  :root {
    --chrome-h: 80px;
  }
}

html {
  scroll-padding-top: calc(var(--chrome-h) + 16px);
}

/* Header ------------------------------------------------------------------ */
.site-header {
  --ch-fg: #fff;
  --ch-fg-soft: rgba(255, 255, 255, 0.78);
  --ch-hover: rgba(255, 255, 255, 0.09);
  --ch-cta-bg: #fff;
  --ch-cta-fg: var(--chrome-ink);
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--chrome-h);
  border-bottom: 1px solid var(--chrome-line-dark);
  background: rgba(26, 27, 32, 0.97);
  color: var(--ch-fg);
  font-family: var(--chrome-font);
  transition: background-color 0.35s var(--chrome-ease), border-color 0.35s var(--chrome-ease), color 0.35s var(--chrome-ease);
}

.site-header[data-theme="light"] {
  --ch-fg: var(--chrome-ink);
  --ch-fg-soft: #3a3b41;
  --ch-hover: rgba(10, 10, 11, 0.06);
  --ch-cta-bg: var(--chrome-ink);
  --ch-cta-fg: #fff;
  border-bottom-color: var(--chrome-line);
  background: rgba(255, 255, 255, 0.96);
}

/* The header floats over the top of the page, like frosted glass laid on the first
   section: it takes no layout space, and the first section extends up behind it (a
   transparent top border the section's own background paints into). Its content still
   starts below the header. */
.site-header {
  margin-bottom: calc(var(--chrome-h) * -1);
}

.site-header ~ main > :first-child {
  border-top: var(--chrome-h) solid transparent;
  background-origin: border-box;
}

/* Frosted glass where the browser supports it */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: rgba(22, 23, 28, 0.82);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
  }

  .site-header[data-theme="light"] {
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
  }
}

.site-header__inner {
  display: flex;
  align-items: stretch;
  gap: 20px;
  height: 100%;
  max-width: calc(var(--chrome-max) + var(--chrome-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--chrome-gutter);
}

/* Logo: both versions are stacked and cross-fade with the theme */
.site-header__logo {
  position: relative;
  flex: none;
  align-self: center;
  width: 148px;
  height: 37px;
}

.site-header__logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  transition: opacity 0.35s var(--chrome-ease);
}

.site-header__logo-img--light-bg,
.site-header[data-theme="light"] .site-header__logo-img--dark-bg {
  opacity: 0;
}

.site-header[data-theme="light"] .site-header__logo-img--light-bg {
  opacity: 1;
}

/* Navigation links */
.site-nav {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin-inline: auto;
}

.site-nav__item {
  display: flex;
  align-items: center;
}

.site-nav > .site-nav__link {
  align-self: center;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ch-fg-soft);
  font: 500 15px/1.2 var(--chrome-font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s, color 0.18s;
}

.site-nav__link:hover,
.site-nav__link[aria-expanded="true"] {
  background: var(--ch-hover);
  color: var(--ch-fg);
}

.site-nav__link[aria-current="page"] {
  color: var(--ch-fg);
  background: var(--ch-hover);
}

.site-nav__chevron {
  opacity: 0.7;
  transition: transform 0.25s var(--chrome-ease);
}

.site-nav__link[aria-expanded="true"] .site-nav__chevron {
  transform: rotate(180deg);
}

.site-header__actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.site-nav ~ .site-header__actions {
  margin-left: 0;
}

.site-header__cta {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--ch-cta-bg);
  color: var(--ch-cta-fg);
  font: 500 15px/1 var(--chrome-font);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.35s var(--chrome-ease), color 0.35s var(--chrome-ease), transform 0.18s var(--chrome-ease), box-shadow 0.18s;
}

.site-header__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(10, 10, 11, 0.22);
}

.site-header__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ch-fg);
  cursor: pointer;
}

.site-header__burger:hover {
  background: var(--ch-hover);
}

.site-header__burger svg {
  display: block;
}

.site-header__burger-close,
.site-header__burger[aria-expanded="true"] .site-header__burger-open {
  display: none;
}

.site-header__burger[aria-expanded="true"] .site-header__burger-close {
  display: block;
}

.site-header :focus-visible,
.mobile-menu :focus-visible,
.site-footer :focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Products mega menu ---------------------------------------------------------
   Opens 10px below the header. ::before is an invisible bridge over that gap and
   the lower part of the header, so the pointer can travel from "Products" to any
   item (even diagonally, across the other links) without the menu closing. */
.mega {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  width: min(1080px, calc(100vw - var(--chrome-gutter) * 2));
  padding: 10px;
  border: 1px solid rgba(10, 10, 11, 0.06);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(10, 10, 11, 0.18), 0 4px 14px rgba(10, 10, 11, 0.06);
  color: #45464d;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity 0.2s var(--chrome-ease), transform 0.2s var(--chrome-ease), visibility 0s linear 0.2s;
}

.mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 32px;
}

.mega[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}

.mega__inner {
  display: grid;
  grid-template-columns: minmax(240px, 0.9fr) minmax(0, 2.2fr);
  gap: 10px;
}

.mega__intro {
  display: flex;
  flex-direction: column;
  padding: 26px;
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 100% 100%, rgba(232, 87, 126, 0.12), transparent 60%),
    radial-gradient(120% 90% at 0% 0%, rgba(143, 92, 245, 0.14), transparent 60%),
    #f7f7fa;
}

.mega__heading {
  margin: 0 0 12px;
  color: var(--chrome-ink);
  font: 500 20px/1.3 var(--chrome-font);
  letter-spacing: -0.01em;
}

.mega__text {
  margin: 0 0 20px;
  font: 400 14px/1.6 var(--chrome-font);
  color: var(--chrome-muted);
}

.mega__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  color: var(--chrome-blue);
  font: 500 14px/1.4 var(--chrome-font);
  text-decoration: none;
}

.mega__link svg {
  transition: transform 0.18s var(--chrome-ease);
}

.mega__link:hover svg {
  transform: translateX(3px);
}

.mega__products {
  padding: 16px 8px 8px;
}

.mega__group {
  margin: 0 0 8px 12px;
  color: var(--chrome-muted);
  font: 600 11px/1.4 var(--chrome-font);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mega__grid li {
  margin: 0;
}

.mega__item {
  display: flex;
  gap: 14px;
  padding: 12px;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color 0.15s;
}

.mega__item:hover,
.mega__item:focus-visible,
.mega__item[aria-current="page"] {
  background: #f4f5f8;
}

.mega__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f0f2f7;
  transition: background-color 0.15s, transform 0.15s var(--chrome-ease);
}

.mega__item:hover .mega__icon {
  background: #fff;
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(10, 10, 11, 0.08);
}

.mega__icon img {
  display: block;
  width: 22px;
  height: 22px;
}

.mega__item-name {
  display: block;
  color: var(--chrome-ink);
  font: 600 15px/1.35 var(--chrome-font);
}

.mega__item-text {
  display: block;
  margin-top: 2px;
  color: var(--chrome-muted);
  font: 400 13px/1.45 var(--chrome-font);
}

/* Mobile menu ------------------------------------------------------------------ */
.mobile-menu {
  position: fixed;
  inset: var(--chrome-h) 0 0 0;
  z-index: 99;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px var(--chrome-gutter) 40px;
  background: var(--chrome-dark);
  color: #fff;
  font-family: var(--chrome-font);
  animation: chrome-menu-in 0.25s var(--chrome-ease);
}

.mobile-menu[hidden] {
  display: none;
}

@keyframes chrome-menu-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.mobile-menu__nav {
  max-width: 640px;
  margin-inline: auto;
}

.mobile-menu__link,
.mobile-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 58px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--chrome-line-dark);
  background: none;
  color: #fff;
  font: 500 19px/1.3 var(--chrome-font);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.mobile-menu__toggle svg {
  opacity: 0.7;
  transition: transform 0.25s var(--chrome-ease);
}

.mobile-menu__toggle[aria-expanded="true"] svg {
  transform: rotate(45deg);
}

.mobile-menu__sub {
  margin: 0;
  padding: 6px 0 14px;
  list-style: none;
  border-bottom: 1px solid var(--chrome-line-dark);
}

.mobile-menu__sub[hidden] {
  display: none;
}

.mobile-menu__sub li {
  margin: 0;
}

.mobile-menu__sub a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.75);
  font: 400 16px/1.4 var(--chrome-font);
  text-decoration: none;
}

.mobile-menu__sub a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
}

.mobile-menu__sub img {
  width: 20px;
  height: 20px;
  padding: 6px;
  box-sizing: content-box;
  border-radius: 8px;
  background: #fff;
}

.mobile-menu__actions {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.mobile-menu__cta,
.mobile-menu__login {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  border-radius: 999px;
  font: 500 16px/1 var(--chrome-font);
  text-decoration: none;
}

.mobile-menu__cta {
  background: #fff;
  color: var(--chrome-ink);
}

.mobile-menu__login {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}

body.menu-open {
  overflow: hidden;
}

/* Header responsiveness */
@media (max-width: 1180px) {
  .site-nav__link {
    padding-inline: 10px;
    font-size: 14px;
  }
}

@media (max-width: 991px) {
  .site-nav,
  .site-header__login {
    display: none;
  }

  .site-header__actions {
    margin-left: auto;
  }

  .site-header__burger {
    display: inline-flex;
  }
}

@media (max-width: 479px) {
  .site-header__inner {
    gap: 8px;
  }

  .site-header__cta {
    display: none;
  }

  .site-header--minimal .site-header__cta {
    display: inline-flex;
    height: 40px;
    padding: 0 16px;
    font-size: 14px;
  }

  .site-header__logo {
    width: 128px;
    height: 32px;
  }
}

/* Footer ------------------------------------------------------------------------ */
.site-footer {
  position: relative;
  padding: clamp(56px, 7vw, 88px) 0 28px;
  background: var(--chrome-footer-bg);
  color: rgba(255, 255, 255, 0.62);
  font: 400 15px/1.5 var(--chrome-font);
}

/* Brand-gradient hairline across the top */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, #8f5cf5 30%, #e8577e 55%, #f5a142 75%, transparent 95%);
  opacity: 0.7;
}

.site-footer__inner {
  max-width: calc(var(--chrome-max) + var(--chrome-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--chrome-gutter);
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px 64px;
}

.site-footer__logo {
  display: inline-block;
}

.site-footer__logo img {
  display: block;
  width: 148px;
  height: auto;
}

.site-footer__tagline {
  max-width: 300px;
  margin: 18px 0 24px;
  font-size: 14px;
  line-height: 1.6;
}

.site-footer__social {
  display: flex;
  gap: 10px;
}

.site-footer__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}

.site-footer__social a:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 40px clamp(40px, 6vw, 96px);
}

.site-footer__heading {
  margin: 0 0 18px;
  color: #fff;
  font: 600 14px/1.4 var(--chrome-font);
}

.site-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__list li {
  margin: 0;
}

.site-footer__list li + li {
  margin-top: 11px;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s;
}

.site-footer__list a:hover,
.site-footer__legal a:hover {
  color: #fff;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--chrome-line-dark);
  font-size: 13px;
}

.site-footer__copyright {
  margin: 0;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__legal li {
  margin: 0;
}

.site-footer--minimal {
  padding-top: 8px;
}

.site-footer--minimal .site-footer__bottom {
  margin-top: 0;
  border-top: 0;
}

@media (max-width: 900px) {
  .site-footer__top {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  .site-footer__columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header *,
  .mega,
  .mobile-menu {
    transition: none !important;
    animation: none !important;
  }
}

@media print {
  .site-header,
  .mobile-menu {
    display: none !important;
  }
}

/* ---- 60-hero.css ---- */
/* ==========================================================================
   Hero: the first block on most pages. Holds the page's single <h1>.

   <section class="hero hero--dark hero--tall" style="--hero-image: url('/assets/img/backgrounds/earth.webp')">
     <div class="container hero__inner">
       <div class="hero__content">
         <span class="eyebrow">Cloud Voice</span>
         <h1>...</h1>
         <p class="lead">...</p>
         <div class="btn-row">...</div>
       </div>
       <div class="hero__media"><img ...></div>   (optional)
     </div>
   </section>

   Modifiers:
     hero--dark     dark background, white text (use with --hero-image)
     hero--soft     light grey background
     hero--center   centred text, no media column
     hero--tall     fills most of the viewport (home page)
     hero--compact  less vertical padding (utility pages)
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(64px, 9vw, 128px);
  background-color: var(--c-bg);
  background-image: var(--hero-image, none);
  background-size: cover;
  background-position: var(--hero-position, center);
  background-repeat: no-repeat;
}

/* Optional darkening layer over a background image:
   style="--hero-overlay: rgba(0, 0, 0, 0.3)" */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hero-overlay, transparent);
  pointer-events: none;
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.hero__content {
  max-width: 640px;
}

.hero__content > :last-child {
  margin-bottom: 0;
}

.hero h1 {
  margin-bottom: 0.4em;
}

.hero .lead {
  max-width: 560px;
}

.hero__media img,
.hero__media video {
  width: 100%;
  height: auto;
}

.hero__media--bleed {
  margin-right: calc(var(--gutter) * -1);
}

/* Variants */
.hero--soft {
  background-color: var(--c-bg-soft);
}

.hero--dark {
  background-color: var(--c-dark);
  color: var(--c-on-dark-muted);
}

.hero--dark h1,
.hero--dark h2,
.hero--dark strong {
  color: var(--c-on-dark);
}

.hero--dark .lead {
  color: rgba(255, 255, 255, 0.86);
}

.hero--center .hero__inner {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}

.hero--center .hero__content,
.hero--center .lead {
  max-width: 820px;
  margin-inline: auto;
}

.hero--center .btn-row {
  justify-content: center;
}

.hero--tall {
  display: flex;
  align-items: center;
  min-height: clamp(600px, 70vh, 800px);
}

.hero--tall h1 {
  font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.25rem);
}

.hero--tall > .container {
  width: 100%;
}

/* Sub-page hero: the full 800px-tall hero used across the site on desktop (the height
   includes the header band), content centred vertically. Collapses to its content on
   tablets and phones. Product pages add .product-hero for the half-width illustration. */
.hero--sub {
  display: flex;
  align-items: center;
}

.hero--sub > .container {
  width: 100%;
}

@media (min-width: 992px) {
  .hero--sub {
    min-height: 800px;
  }
}

.hero--compact {
  padding-block: clamp(48px, 6vw, 80px);
}

@media (max-width: 860px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero__media {
    max-width: 560px;
  }

  .hero__media--bleed {
    margin-right: 0;
  }

  .hero--tall {
    min-height: 0;
    padding-block: 96px 120px;
    background-position: var(--hero-position-mobile, 70% center);
  }
}

/* ---- 70-components.css ---- */
/* ==========================================================================
   Content components. Each one is documented with example markup on the
   live component library at /style-guide (content/pages/style-guide).
   ========================================================================== */

/* Card ---------------------------------------------------------------------
   <div class="card">...</div>          white, bordered
   .card--soft  grey fill  .card--tint  pastel blue  .card--dark  dark
   .card--link  whole card is an <a>, lifts on hover                     */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: #fff;
}

.card > :last-child {
  margin-bottom: 0;
}

.card h3,
.card h4 {
  margin-bottom: 0.5em;
}

.card--soft {
  border-color: transparent;
  background: var(--c-bg-soft);
}

.card--tint {
  border-color: transparent;
  background: var(--c-tint-blue);
}

.card--dark {
  border-color: var(--c-dark-line);
  background: var(--c-dark-2);
  color: var(--c-on-dark-muted);
}

.card--dark :is(h2, h3, h4, strong) {
  color: var(--c-on-dark);
}

.card--link {
  text-decoration: none;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), border-color 0.2s;
}

.card--link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.card__meta {
  display: block;
  margin-top: -0.25em;
  margin-bottom: 1em;
  font-size: 0.87rem;
  color: var(--c-blue-light);
}

.card__footer {
  margin-top: auto;
  padding-top: 1.25rem;
}

/* Feature: icon + title + text, used in grids ------------------------------
   <div class="feature">
     <img class="feature__icon" src="/assets/img/icons/speed.png" alt="" width="48" height="48">
     <h3 class="feature__title">Low latency</h3>
     <p>...</p>
   </div>                                                                  */
.feature {
  display: flex;
  flex-direction: column;
}

.feature__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  object-fit: contain;
}

.feature__title {
  margin-bottom: 0.4em;
  font-size: 1.2rem;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.feature p {
  margin-bottom: 0;
  font-size: 0.95rem;
  color: var(--c-muted);
}

.section--dark .feature p {
  color: var(--c-on-dark-muted);
}

/* Panel: large rounded pastel box that holds a split -----------------------
   <div class="panel panel--tint"> <div class="split">...</div> </div>    */
.panel {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 5vw, 72px);
  border-radius: var(--radius-xl);
  background: var(--c-bg-soft);
}

.panel--tint { background: var(--c-tint-blue); }
.panel--purple { background: var(--c-tint-purple); }
.panel--peach { background: var(--c-tint-peach); }

.panel--dark {
  background: var(--c-dark);
  color: var(--c-on-dark-muted);
}

.panel--dark :is(h2, h3, h4, strong) {
  color: var(--c-on-dark);
}

.panel + .panel,
.panel + .testimonial {
  margin-top: clamp(24px, 4vw, 40px);
}

/* Media frame: rounded image with optional shadow */
.media {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.media--shadow {
  box-shadow: var(--shadow-lg);
}

/* Testimonial -------------------------------------------------------------
   <figure class="testimonial">
     <img class="testimonial__logo" src="..." alt="Q&A Market Research" width="120" height="61">
     <blockquote><p>"..."</p></blockquote>
     <figcaption><strong>Michael Harding</strong> Managing Director</figcaption>
   </figure>
   .testimonial--large  big centred quote on a dark section               */
.testimonial {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px 28px;
  align-items: start;
  margin: 0;
}

/* A fixed height (width follows the aspect ratio) so logos without an intrinsic
   size, such as SVGs with only a viewBox, never collapse to nothing. */
.testimonial__logo {
  grid-row: span 2;
  width: auto;
  height: 52px;
  max-width: 150px;
  object-fit: contain;
  object-position: left center;
}

.testimonial blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--c-ink);
}

.testimonial blockquote p {
  margin: 0;
}

.testimonial figcaption {
  font-size: 0.87rem;
  color: var(--c-muted);
}

.testimonial figcaption strong {
  color: var(--c-ink);
  font-weight: 500;
}

.testimonial--large {
  display: block;
  max-width: 1040px;
  margin-inline: auto;
}

.testimonial--large blockquote {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem);
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-weight: 500;
}

.testimonial--large figcaption {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}

.testimonial--large .testimonial__logo {
  height: 40px;
}

.section--dark .testimonial blockquote,
.panel--dark .testimonial blockquote {
  color: var(--c-on-dark);
}

.section--dark .testimonial figcaption,
.section--dark .testimonial figcaption strong {
  color: var(--c-blue-light);
}

@media (max-width: 560px) {
  .testimonial {
    grid-template-columns: minmax(0, 1fr);
  }

  .testimonial__logo {
    grid-row: auto;
  }
}

/* Logo wall ----------------------------------------------------------------
   <ul class="logo-wall"><li><img src="..." alt="Vocus" width="160" height="72"></li>...</ul> */
.logo-wall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 56px) clamp(28px, 5vw, 72px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo-wall li {
  margin: 0;
}

.logo-wall img {
  width: auto;
  max-width: var(--logo-w, 170px);
  max-height: var(--logo-h, 48px);
  object-fit: contain;
}

.logo-wall--grey img {
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.2s, opacity 0.2s;
}

.logo-wall--grey img:hover {
  filter: none;
  opacity: 1;
}

.logo-wall--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.logo-wall--grid li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: 20px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--c-line);
}

/* Check list ---------------------------------------------------------------
   <ul class="checklist"><li><strong>No-nonsense.</strong> ...</li></ul>   */
.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  position: relative;
  padding-left: 34px;
}

.checklist li + li {
  margin-top: 0.9em;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-blue) url("/assets/img/icons/check-white.svg") center / 13px no-repeat;
}

.checklist--plain li::before {
  display: none;
}

.checklist--plain li {
  padding-left: 0;
}

/* Link list: product/solution links with an arrow (e.g. "Cloud SIP ->")   */
.link-list {
  display: grid;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.link-list li {
  margin: 0;
}

/* Stats --------------------------------------------------------------------
   <div class="stats"><div class="stat"><span class="stat__value">99.99%</span><span class="stat__label">...</span></div></div> */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
}

.stat__value {
  display: block;
  font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-ink);
}

.stat__label {
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--c-muted);
}

/* Tabs ---------------------------------------------------------------------
   <div class="tabs" data-tabs>
     <div class="tabs__list" role="tablist" aria-label="Industries">
       <button class="tabs__tab" role="tab" aria-selected="true" aria-controls="tab-insurance" id="tab-insurance-btn">Insurance</button>
       ...
     </div>
     <div class="tabs__panel" role="tabpanel" id="tab-insurance" aria-labelledby="tab-insurance-btn">...</div>
     <div class="tabs__panel" role="tabpanel" id="tab-finance" aria-labelledby="tab-finance-btn" hidden>...</div>
   </div>
   Without JavaScript every panel is shown, one after another.
   Wrap the panels in <div class="tabs__panels"> to keep a steady height: the panels share
   one grid cell, so the box is always as tall as the tallest panel and switching (or
   data-tabs-rotate) never moves the content below. Always do this for rotating tabs.  */
.tabs__list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 32px;
  padding: 5px;
  border-radius: var(--radius-pill);
  background: var(--c-bg-smoke);
}

.tabs__tab,
.tabs__list a {
  padding: 0.6rem 1.2rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--c-muted);
  font-size: 0.93rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.tabs__tab:hover {
  color: var(--c-ink);
}

.tabs__tab[aria-selected="true"] {
  background: #fff;
  color: var(--c-ink);
  box-shadow: var(--shadow-sm);
}

.section--dark .tabs__list {
  background: rgba(255, 255, 255, 0.08);
}

.section--dark .tabs__tab {
  color: var(--c-on-dark-muted);
}

.section--dark .tabs__tab[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.section--dark .tabs__list a {
  color: var(--c-on-dark);
}

.tabs__panel[hidden] {
  display: none;
}

.js .tabs__panels {
  display: grid;
}

.js .tabs__panels > .tabs__panel {
  grid-area: 1 / 1;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}

.js .tabs__panels > .tabs__panel[hidden] {
  display: block;
  visibility: hidden;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .js .tabs__panels > .tabs__panel {
    transition: none;
  }
}

.tabs__panel:focus-visible {
  outline-offset: 8px;
}

@media (max-width: 640px) {
  .tabs__list {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    border-radius: var(--radius);
    scrollbar-width: none;
  }

  .tabs__tab,
  .tabs__list a {
    flex: none;
  }
}

/* FAQ (native accordion; generates FAQPage structured data automatically) ---
   <div class="faq">
     <details><summary>Question?</summary><div class="faq__answer"><p>Answer.</p></div></details>
   </div>                                                                  */
.faq {
  border-top: 1px solid var(--c-line);
}

.faq details {
  border-bottom: 1px solid var(--c-line);
}

.faq summary {
  position: relative;
  padding: 22px 48px 22px 0;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--c-ink);
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 18px;
  height: 18px;
  translate: 0 -50%;
  background: currentColor;
  -webkit-mask: url("/assets/img/icons/plus.svg") center / contain no-repeat;
  mask: url("/assets/img/icons/plus.svg") center / contain no-repeat;
  transition: transform 0.2s var(--ease);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq__answer {
  padding: 0 48px 20px 0;
  color: var(--c-text);
}

.faq__answer > :last-child {
  margin-bottom: 0;
}

.section--dark .faq,
.section--dark .faq details {
  border-color: var(--c-dark-line);
}

.section--dark .faq summary {
  color: var(--c-on-dark);
}

.section--dark .faq__answer {
  color: var(--c-on-dark-muted);
}

/* CTA banner: gradient card near the bottom of most pages -------------------
   Use the shared block: {% include "blocks/cta-banner.njk" %}               */
.cta-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  min-height: 420px;
  padding: clamp(32px, 5vw, 64px);
  border-radius: var(--radius-xl);
  background: var(--c-dark) var(--cta-image, none) center / cover no-repeat;
  color: rgba(255, 255, 255, 0.9);
}

.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg, rgba(20, 10, 30, 0.55) 0%, rgba(20, 10, 30, 0) 60%);
}

.cta-banner h2 {
  color: #fff;
}

.cta-banner__content {
  max-width: 520px;
}

.cta-banner__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .cta-banner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 360px;
    align-content: end;
  }

  .cta-banner::before {
    background: linear-gradient(0deg, rgba(20, 10, 30, 0.75) 0%, rgba(20, 10, 30, 0.1) 80%);
  }
}

/* Code window: a dark editor-style block for API samples ------------------ */
.code-window {
  overflow: hidden;
  border-radius: var(--radius);
  background: #111216;
  box-shadow: var(--shadow-lg);
}

.code-window__bar {
  display: flex;
  gap: 7px;
  padding: 14px 16px;
  background: #1c1d23;
}

.code-window__bar span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #3a3b44;
}

.code-window pre {
  margin: 0;
  border-radius: 0;
  background: transparent;
  font-size: 0.85rem;
}

/* Table: pricing and comparison tables ------------------------------------
   Wide tables scroll horizontally on phones automatically.               */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5em;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: #fff;
}

.table-scroll table {
  min-width: 560px;
}

.table-scroll tr:last-child td {
  border-bottom: 0;
}

.table-scroll thead th {
  background: var(--c-bg-soft);
}

.price {
  font-weight: 600;
  color: var(--c-ink);
  white-space: nowrap;
}

.price small {
  font-weight: 400;
  color: var(--c-muted);
}

/* Pills / badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: var(--c-tint-blue);
  color: var(--c-blue);
  font-size: 0.8rem;
  font-weight: 600;
}

.badge--dark {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Steps: numbered process ---------------------------------------------------
   <ol class="steps"><li><h3>..</h3><p>..</p></li></ol>                   */
.steps {
  counter-reset: step;
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.steps > li {
  counter-increment: step;
  position: relative;
  margin: 0;
  padding-top: 56px;
}

.steps > li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-ink);
  color: #fff;
  font-weight: 600;
}

.steps h3 {
  font-size: 1.2rem;
}

/* Video that behaves like a background (muted, looped, no controls) */
.video-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lottie container keeps its aspect ratio until the animation loads */
[data-lottie] {
  width: 100%;
  aspect-ratio: var(--lottie-ratio, 1);
}

[data-lottie] > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Icon list: small icon beside a bold title and a line of text ------------------
   <ul class="icon-list">
     <li><img src="/assets/img/icons/product-flow.svg" alt="">
         <div><strong>Flow</strong><p>Build IVRs with drag and drop.</p></div></li>
   </ul>                                                                   */

.icon-list {
  display: grid;
  gap: 22px;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.icon-list li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 0;
}

.icon-list img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.icon-list strong {
  display: block;
  font-weight: 600;
  color: var(--c-ink);
}

.icon-list strong a {
  color: inherit;
  text-decoration: none;
}

.icon-list strong a:hover {
  color: var(--c-blue);
}

.icon-list p {
  margin: 0.2em 0 0;
  color: var(--c-muted);
}

/* ---- 75-blocks.css ---- */
/* ==========================================================================
   Styles for the shared content blocks in content/blocks/.
   ========================================================================== */

/* Heading-size helpers: keep the right semantic level, borrow another size */
.h1 { font-size: clamp(2.4rem, 1.6rem + 3.2vw, 3.6rem); line-height: 1.1; }
.h2 { font-size: clamp(1.9rem, 1.35rem + 2.2vw, 3rem); line-height: 1.15; }
.h3 { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.75rem); line-height: 1.25; }
.h4 { font-size: clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem); line-height: 1.3; }

/* Use cases (blocks/use-cases.njk) */
.use-cases__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 40px;
  margin-bottom: clamp(32px, 5vw, 72px);
}

.use-cases__head h2 {
  max-width: 620px;
}

.use-cases__head .tabs__list {
  margin-bottom: 0;
}

.use-cases .section--dark .tabs__list,
.section--dark.use-cases .tabs__list {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
}

.use-case-card {
  min-height: 260px;
}

@media (max-width: 640px) {
  .use-case-card {
    min-height: 0;
  }
}

.section--dark .use-case-card {
  border-color: transparent;
  background: #15161b;
}

/* Testimonial with the vertical rule used on the Webflow site */
.testimonial--rule blockquote,
.testimonial--rule figcaption {
  padding-left: 24px;
  border-left: 1px solid var(--c-line);
}

.testimonial--rule figcaption {
  padding-top: 12px;
}

.section--dark .testimonial--rule blockquote,
.section--dark .testimonial--rule figcaption {
  border-color: var(--c-dark-line);
}

@media (max-width: 560px) {
  .testimonial--rule blockquote,
  .testimonial--rule figcaption {
    padding-left: 0;
    border-left: 0;
  }
}

/* Feature panel ------------------------------------------------------------------
   A tinted panel with copy on one side and a large illustration that starts inside the
   panel and hangs out below it; an optional testimonial sits under the panel, beside the
   hanging image (the home page's "For enterprise" and "For SaaS" sections).

   <div class="feature-panel">                        add feature-panel--reverse for image-left
     <div class="feature-panel__bg" aria-hidden="true"></div>
     <div class="feature-panel__text">eyebrow, h2, p, btn-row</div>
     <div class="feature-panel__media"><img src="images/x.webp" alt="..."></div>
     <figure class="feature-panel__quote testimonial testimonial--rule">...</figure>
   </div>
   Stacks on tablets and phones: copy, then the image inside the panel, then the quote. */
.feature-panel {
  --fp-pad: clamp(28px, 4.5vw, 64px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-rows: auto auto;
  column-gap: clamp(24px, 3vw, 40px);
  position: relative;
  isolation: isolate;
}

.feature-panel__bg {
  grid-column: 1 / -1;
  grid-row: 1;
  z-index: -1;
  border-radius: clamp(28px, 4vw, 56px);
  background: var(--c-tint-blue);
}

.feature-panel__text {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  padding: var(--fp-pad) 0 var(--fp-pad) var(--fp-pad);
}

.feature-panel__text > :last-child {
  margin-bottom: 0;
}

.feature-panel__media {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  display: flex;
  justify-content: center;
  padding: clamp(32px, 4vw, 56px) calc(var(--fp-pad) / 2) 0 0;
}

.feature-panel__media img {
  width: 100%;
  max-width: 580px;
  height: auto;
  filter: drop-shadow(0 30px 40px rgba(26, 27, 32, 0.18));
}

.feature-panel__quote {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  padding: clamp(28px, 3vw, 44px) 0 0 var(--fp-pad);
}

.feature-panel--reverse {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
}

.feature-panel--reverse .feature-panel__text {
  grid-column: 2;
  padding: var(--fp-pad) var(--fp-pad) var(--fp-pad) 0;
}

.feature-panel--reverse .feature-panel__media {
  grid-column: 1;
  padding: clamp(32px, 4vw, 56px) 0 0 calc(var(--fp-pad) / 2);
}

.feature-panel--reverse .feature-panel__quote {
  grid-column: 2;
  padding: clamp(28px, 3vw, 44px) var(--fp-pad) 0 0;
}

@media (max-width: 860px) {
  .feature-panel,
  .feature-panel--reverse {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
  }

  .feature-panel__bg {
    grid-row: 1 / span 2;
  }

  .feature-panel__text,
  .feature-panel--reverse .feature-panel__text {
    grid-column: 1;
    grid-row: 1;
    padding: var(--fp-pad) var(--fp-pad) 8px;
  }

  .feature-panel__media,
  .feature-panel--reverse .feature-panel__media {
    grid-column: 1;
    grid-row: 2;
    padding: 16px var(--fp-pad) var(--fp-pad);
  }

  .feature-panel__media img {
    max-width: 380px;
  }

  .feature-panel__quote,
  .feature-panel--reverse .feature-panel__quote {
    grid-column: 1;
    grid-row: 3;
    padding: 36px 0 0;
  }
}

/* Glow: a soft brand-colour halo behind an illustration.
   <div class="split__media media-glow"><img ...></div>   (media-glow--warm for orange/pink) */
.media-glow {
  position: relative;
  isolation: isolate;
}

.media-glow::before {
  content: "";
  position: absolute;
  inset: 8% 4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(143, 92, 245, 0.3), rgba(90, 131, 240, 0.16) 55%, transparent 78%);
  filter: blur(28px);
  pointer-events: none;
}

.media-glow--warm::before {
  background: radial-gradient(closest-side, rgba(245, 161, 66, 0.32), rgba(232, 87, 126, 0.18) 55%, transparent 78%);
}

/* Float: a slow, gentle bob for hero-style illustrations (off for reduced motion) */
.float {
  animation: float 7s ease-in-out infinite;
}

@keyframes float {
  50% {
    transform: translateY(-10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .float {
    animation: none;
  }
}

/* Home page audience splits: bigger illustrations, copy column slightly wider */
.audience-split {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(40px, 6vw, 96px);
}

.audience-split .split__media img {
  width: 100%;
  max-width: 520px;
  margin-inline: auto;
}

.audience-split .split__media {
  display: flex;
  justify-content: center;
}

@media (max-width: 860px) {
  .audience-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .audience-split .split__media img {
    max-width: 400px;
  }
}

/* Carrier / network logos */
.network-logos {
  --logo-h: 40px;
  --logo-w: 250px;
  margin-top: clamp(32px, 5vw, 56px);
}

/* The Vocus wordmark is heavy; shrink it so it balances with the other carriers */
.network-logos .network-logos__vocus {
  max-height: calc(var(--logo-h) * 0.8);
}

/* Four carriers: one row on desktop, a balanced 2 x 2 grid on tablets and phones */
@media (max-width: 991px) {
  .network-logos {
    --logo-h: 34px;
    --logo-w: min(100%, 220px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-items: center;
    gap: 32px 24px;
    max-width: 560px;
    margin-inline: auto;
  }
}

@media (max-width: 480px) {
  .network-logos {
    --logo-h: 26px;
  }
}

/* CTA banner with animated gradient video + product UI art (blocks/cta-banner.njk) */
.cta-banner--video {
  background: linear-gradient(115deg, #e0566f 0%, #c75bd2 55%, #7c8cf0 100%);
}

.cta-banner--video::before {
  background: linear-gradient(100deg, rgba(40, 10, 40, 0.35) 0%, rgba(40, 10, 40, 0) 55%);
}

.cta-banner__art {
  position: absolute;
  z-index: -1;
  right: 0;
  top: 0;
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  object-position: left center;
  pointer-events: none;
}

@media (max-width: 1100px) {
  .cta-banner__art {
    right: -25%;
    opacity: 0.85;
  }
}

@media (max-width: 767px) {
  .cta-banner__art {
    right: auto;
    left: 10%;
    height: 55%;
    opacity: 0.9;
  }
}

/* Testimonial slider (blocks/testimonial-slider.njk) */
.testimonial-slider {
  background-image: var(--slider-bg, none);
  background-size: cover;
  background-position: 50% 70%;
}

.testimonial-slider__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(24px, 8vw, 160px);
  align-items: center;
}

.testimonial-slider__dots {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 8px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-pill);
}

.testimonial-slider__dots button {
  width: 14px;
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: background-color 0.2s;
}

.testimonial-slider__dots button[aria-selected="true"] {
  background: #fff;
}

/* Shorter quotes sit in the middle of the (tallest-quote) box, level with the dots */
.testimonial-slider .tabs__panel {
  align-self: center;
}

.testimonial-slider .testimonial--large blockquote {
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.75rem);
}

.testimonial-slider figcaption {
  flex-wrap: wrap;
  color: var(--c-blue-light);
}

.testimonial-slider figcaption img {
  max-height: 40px;
  max-width: 160px;
}

@media (max-width: 640px) {
  .testimonial-slider__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .testimonial-slider__dots {
    flex-direction: row;
    justify-self: start;
    order: 2;
  }
}

/* Pricing plans (blocks/pricing-plans.njk); the cards themselves are in 78-pricing.css */
.pricing-plans {
  background-image: url("/assets/img/backgrounds/pricing-gradient.webp");
  background-size: cover;
  background-position: center;
}

.pricing-plans__footer {
  max-width: 820px;
  margin: 40px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--c-dark-line);
}

.section--dark .fine-print {
  color: var(--c-on-dark-muted);
}

/* Product links (blocks/platform-products.njk) */
.product-link {
  text-decoration: none;
}

.product-link__icon {
  width: 32px;
  height: 32px;
  margin-bottom: 16px;
}

.product-link:hover .link-arrow::after {
  transform: translate(2px, -2px);
}

/* Forms: field stack */
.form__fields {
  display: grid;
  gap: 20px;
}

/* Product page patterns ------------------------------------------------------ */

/* Product hero ---------------------------------------------------------------
   Copy on the left; the product illustration fills the whole right half of the
   800px hero, bleeding off the top (behind the header), right and bottom edges.
   On tablets and phones it becomes a full-width band under the copy.

   <section class="hero hero--soft product-hero">
     <div class="container hero__inner">
       <div class="hero__content">...</div>
       <div class="hero__media"><img src="images/illustration.webp" alt="..."></div>
     </div>
   </section>

   Illustrations are square, 1600px, on a light background. Adjust the crop with
   style="--hero-media-position: 0 70%" (desktop) / "--hero-media-position-mobile: 0 0". */
.product-hero {
  display: flex;
  align-items: center;
  padding-block: 64px;
}

.product-hero > .container {
  width: 100%;
}

@media (min-width: 992px) {
  .product-hero {
    min-height: 800px;
  }

  .product-hero .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .product-hero .hero__content {
    max-width: 580px;
  }

  .product-hero .hero__media {
    position: absolute;
    z-index: -1;
    top: calc(var(--nav-h) * -1);
    right: 0;
    bottom: 0;
    width: 50%;
    max-width: none;
    margin: 0;
    /* Fade the left edge into the hero so the image never shows a seam */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 14%);
    mask-image: linear-gradient(to right, transparent, #000 14%);
  }

  .product-hero .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--hero-media-position, 0 70%);
  }
}

@media (max-width: 991px) {
  .product-hero {
    display: block;
    padding-bottom: 0;
  }

  .product-hero .hero__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .product-hero .hero__media {
    max-width: none;
    height: clamp(360px, 68vw, 560px);
    margin: 8px calc(var(--gutter) * -1) 0;
  }

  .product-hero .hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--hero-media-position-mobile, 0 0);
  }
}

@media (max-width: 767px) {
  .product-hero .hero__media {
    height: min(420px, 100vw);
  }
}

/* Paragraphs that open with a coloured bold phrase ("Hello cloud telephony.") */
.lead-in {
  font-weight: 500;
  color: var(--c-purple);
}

.lead-ins--blue .lead-in { color: var(--c-blue); }
.lead-ins--orange .lead-in { color: var(--c-orange); }
.lead-ins--pink .lead-in { color: var(--c-pink); }

/* Features-at-a-glance lists */
.feature-lists .checklist li {
  color: var(--c-muted);
}

.feature-lists .checklist a {
  color: inherit;
}

.feature-lists h3 {
  margin-bottom: 1rem;
}

.cta-banner .lead {
  color: rgba(255, 255, 255, 0.92);
}

/* Compatibility logos (blocks/integration-logos.njk): keep wide logos inside their boxes */
.integration-logos img {
  max-width: 100%;
}

/* Customer logo scroller (blocks/logo-marquee.njk) ---------------------------------
   Two copies of the logo list side by side; the track slides left by exactly one copy
   and loops, so the scroll is seamless. */
.logo-marquee {
  padding-block: clamp(22px, 3vw, 32px);
  background: var(--c-bg-soft);
  overflow: hidden;
}

.logo-marquee__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.logo-marquee__track {
  display: flex;
  align-items: center;
  gap: clamp(48px, 6vw, 88px);
  width: max-content;
  margin: 0;
  padding: 0 0 0 clamp(48px, 6vw, 88px);
  list-style: none;
  animation: logo-marquee 55s linear infinite;
}

.logo-marquee__track li {
  flex: none;
  margin: 0;
}

.logo-marquee__track img {
  display: block;
  width: auto;
  height: var(--h, 34px);
  max-width: none;
  filter: grayscale(1) contrast(0.9);
  opacity: 0.55;
  transition: filter 0.3s, opacity 0.3s;
}

.logo-marquee__track img:hover {
  filter: none;
  opacity: 1;
}

.logo-marquee:hover .logo-marquee__track {
  animation-play-state: paused;
}

@keyframes logo-marquee {
  to {
    /* one full copy: half the track (the gap after the last logo is the leading padding) */
    transform: translateX(-50%);
  }
}

@media (max-width: 640px) {
  .logo-marquee__track img {
    height: calc(var(--h, 34px) * 0.8);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    padding: 0 var(--gutter);
    row-gap: 24px;
    animation: none;
  }

  .logo-marquee__track [aria-hidden="true"] {
    display: none;
  }

  .logo-marquee__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ---- 78-pricing.css ---- */
/* ==========================================================================
   Live pricing (src/widgets/pricing.js). The widget renders this markup from
   the billing API; pages only place the containers:

   <div data-pricing="plans"></div>     picker + plan cards, on a dark section
   <div data-pricing="details"></div>   sticky nav + pricing tables (/pricing)
   ========================================================================== */

/* ---- Country picker --------------------------------------------------------- */

.price-picker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.price-picker__label {
  font-size: 0.95rem;
  color: var(--c-on-dark-muted);
}

.price-picker__button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 260px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  color: var(--c-on-dark);
  font: inherit;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color 0.2s, border-color 0.2s;
}

.price-picker__button:hover,
.price-picker__button[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
}

.price-picker__value {
  flex: 1;
}

.price-picker__chevron {
  flex: none;
  opacity: 0.7;
  transition: transform 0.2s var(--ease);
}

.price-picker__button[aria-expanded="true"] .price-picker__chevron {
  transform: rotate(180deg);
}

.price-picker__flag {
  flex: none;
  width: 24px;
  height: 16px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.price-picker__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  z-index: 30;
  width: min(340px, calc(100vw - 32px));
  padding: 8px;
  transform: translateX(-50%);
  border-radius: var(--radius);
  background: var(--c-bg);
  color: var(--c-ink);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(10, 10, 11, 0.06);
  text-align: left;
}

.price-picker__panel[hidden] {
  display: none;
}

.price-picker__search {
  width: 100%;
  padding: 10px 12px 10px 38px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-sm);
  background: var(--c-bg-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6d74' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center / 16px;
  color: var(--c-ink);
  font: inherit;
}

.price-picker__search:focus {
  outline: 2px solid var(--c-blue);
  outline-offset: -1px;
  background-color: var(--c-bg);
}

.price-picker__list {
  position: relative; /* offsetParent for keeping the active option in view */
  max-height: 300px;
  margin: 8px 0 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
}

.price-picker__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.price-picker__list li[hidden] {
  display: none;
}

.price-picker__list li.is-active {
  background: var(--c-bg-soft);
}

.price-picker__list li[aria-selected="true"] {
  font-weight: 600;
}

.price-picker__list li[aria-selected="true"]::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: auto;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23175bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8.5 3 3 7-7'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Between the pinned countries (Australia, New Zealand) and the A-Z list */
.price-picker__sep {
  height: 1px;
  margin: 6px 10px !important;
  padding: 0 !important;
  background: var(--c-line);
  cursor: default !important;
}

.price-picker__empty {
  margin: 12px 10px;
  color: var(--c-muted);
  font-size: 0.95rem;
}

/* Compact: the light pill in the sticky pricing nav */
.price-picker--compact {
  flex-direction: row;
}

.price-picker--compact .price-picker__label {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.price-picker--compact .price-picker__button {
  min-width: 0;
  gap: 10px;
  padding: 7px 12px;
  border-color: var(--c-line);
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: 0.95rem;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.price-picker--compact .price-picker__button:hover,
.price-picker--compact .price-picker__button[aria-expanded="true"] {
  background: var(--c-bg-soft);
  border-color: rgba(10, 10, 11, 0.2);
}

.price-picker--compact .price-picker__value {
  white-space: nowrap;
}

.price-picker--compact .price-picker__panel {
  left: 0;
  transform: none;
}

/* ---- Plan cards (dark) ------------------------------------------------------- */

.price-plans-widget {
  width: 100%;
}

.price-note {
  margin: 16px 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--c-on-dark-muted);
}

.price-plans-widget__results {
  margin-top: clamp(32px, 4vw, 48px);
  transition: opacity 0.2s;
}

.price-plans-widget__results.is-loading,
.price-details__body.is-loading {
  opacity: 0.45;
  pointer-events: none;
}

.price-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
  justify-content: center;
  gap: 16px;
  text-align: left;
}

.price-card {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 28px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: var(--c-on-dark-muted);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.price-card--highlight {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
}

.price-card__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--c-on-dark);
}

.price-card__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 6px;
  margin: 14px 0 12px;
}

.price-card__from {
  width: 100%;
  font-size: 0.85rem;
}

.price-card__amount {
  font-size: clamp(2.5rem, 2rem + 1.2vw, 3.25rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--c-on-dark);
  font-variant-numeric: tabular-nums;
}

.price-card__period {
  font-size: 1.15rem;
  font-weight: 500;
}

.price-card__desc {
  min-height: 4.8em;
  margin: 0 0 20px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.price-card__fees-title {
  margin: 0 0 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.85rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

.price-card__fees {
  display: grid;
  gap: 6px;
  margin: 0;
  font-size: 0.9rem;
}

.price-card__fees div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.price-card__fees dt {
  font-weight: 400;
}

.price-card__fees dd {
  margin: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.price-card__fees strong {
  font-weight: 600;
  color: var(--c-on-dark);
}

.price-card__unit {
  margin-left: 1px;
}

.price-card--from .price-card__desc {
  min-height: 0;
  margin-bottom: 0;
}

.price-card--skeleton {
  min-height: 330px;
  gap: 16px;
}

.price-card--skeleton span {
  display: block;
  height: 14px;
  width: 40%;
  border-radius: 7px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.06)) 0 0 / 200% 100%;
  animation: price-shimmer 1.4s linear infinite;
}

.price-card--skeleton span:nth-child(2) {
  height: 44px;
  width: 60%;
}

.price-card--skeleton span:nth-child(3) {
  width: 90%;
}

.price-card--skeleton span:nth-child(4) {
  width: 75%;
  margin-top: auto;
}

@keyframes price-shimmer {
  to { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .price-card--skeleton span,
  .price-skeleton {
    animation: none;
  }
}

.price-plans__footnote {
  max-width: 720px;
  margin: 28px auto 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--c-on-dark-muted);
}

.price-plans__footnote a {
  color: var(--c-on-dark);
}

.section--dark .price-message,
.hero--dark .price-message {
  color: var(--c-on-dark-muted);
}

.section--dark .price-message .btn--ghost,
.hero--dark .price-message .btn--ghost {
  --btn-fg: var(--c-on-dark);
  --btn-border: rgba(255, 255, 255, 0.35);
}

.price-message {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 991px) {
  .price-plans {
    grid-template-columns: repeat(auto-fit, minmax(240px, 340px));
  }
}

@media (max-width: 560px) {
  .price-picker__button {
    min-width: 0;
    width: 100%;
    max-width: 340px;
  }

  .price-plans {
    grid-template-columns: minmax(0, 1fr);
  }

  .price-card__desc {
    min-height: 0;
  }

  .price-card--skeleton {
    min-height: 280px;
  }
}

/* ---- Pricing page: hero ------------------------------------------------------ */

.pricing-hero {
  background-position: center top;
}

.pricing-hero .hero__inner {
  justify-items: stretch;
}

.pricing-hero .hero__content {
  justify-self: center;
}

.pricing-hero .hero__inner {
  row-gap: clamp(28px, 3vw, 40px);
}

/* ---- Pricing page: sticky section nav ---------------------------------------- */

.price-nav {
  position: sticky;
  top: var(--chrome-h, 72px);
  z-index: 50;
  border-bottom: 1px solid var(--c-line);
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
}

.price-nav__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
}

.price-nav__links {
  display: flex;
  flex: 1;
  gap: 2px;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.price-nav__links::-webkit-scrollbar {
  display: none;
}

.price-nav__links li {
  flex: none;
  margin: 0;
}

.price-nav__links li[hidden] {
  display: none;
}

.price-nav__links a {
  display: block;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  color: var(--c-text);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s, color 0.2s;
}

.price-nav__links a:hover {
  background: var(--c-bg-soft);
  color: var(--c-ink);
}

.price-nav__links .is-current a {
  background: var(--c-ink);
  color: #fff;
}

.price-nav__csv {
  flex: none;
}

@media (max-width: 1100px) {
  .price-nav__csv {
    display: none;
  }
}

@media (max-width: 640px) {
  .price-nav__inner {
    gap: 8px;
    min-height: 56px;
  }

  .price-nav__links {
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent);
    mask-image: linear-gradient(to right, #000 85%, transparent);
  }

  .price-nav__links a {
    padding: 7px 11px;
    font-size: 0.9rem;
  }

  .price-picker--compact .price-picker__value {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
}

/* ---- Pricing page: tables ---------------------------------------------------- */

.price-details {
  padding-top: clamp(48px, 6vw, 80px);
}

.price-details [id] {
  scroll-margin-top: 72px; /* the sticky nav, on top of the header's scroll padding */
}

.price-details__body {
  transition: opacity 0.2s;
}

.price-skeleton {
  height: 900px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--c-bg), #fbfbfb, var(--c-bg)) 0 0 / 200% 100%;
  animation: price-shimmer 1.6s linear infinite;
}

.price-group + .price-group {
  margin-top: clamp(48px, 6vw, 72px);
}

.price-section-head {
  max-width: 720px;
  margin: 0 auto 24px;
  text-align: center;
}

.price-section-head h2 {
  margin-bottom: 8px;
}

.price-section-head p {
  margin: 0;
  color: var(--c-muted);
}

.price-section-head--left {
  max-width: none;
  margin-inline: 0;
  text-align: left;
}

.price-section-head--left h2 {
  font-size: clamp(1.5rem, 1.2rem + 0.9vw, 2rem);
}

.price-table-card {
  padding: 4px 28px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg);
  box-shadow: var(--shadow-sm);
}

.price-table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 1rem;
}

.price-table th,
.price-table td {
  padding: 18px 16px 18px 0;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: middle;
}

.price-table tr > :last-child {
  padding-right: 0;
}

.price-table tbody tr:last-child > * {
  border-bottom: 0;
}

.price-table thead th {
  padding-block: 16px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--c-muted);
  white-space: nowrap;
}

.price-table tbody th {
  width: 42%;
  font-weight: 400;
}

.price-table--rates tbody th {
  width: 62%;
}

.price-table--rates .price-table__name {
  font-weight: 500;
}

.price-table__name {
  display: block;
  font-weight: 600;
  color: var(--c-ink);
}

.price-table__desc {
  display: block;
  max-width: 460px;
  margin-top: 2px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--c-muted);
}

.price {
  display: inline-flex;
  flex-direction: column;
  line-height: 1.35;
}

.price__super,
.price__secondary {
  font-size: 0.8rem;
  color: var(--c-muted);
}

.price__amount {
  font-weight: 600;
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}

.price__unit {
  margin-left: 2px;
  font-size: 0.85rem;
  color: var(--c-muted);
}

.price--included {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: #e6f5ec;
  color: #177a42;
  font-size: 0.85rem;
  font-weight: 600;
}

.price--na {
  color: var(--c-muted);
}

.price-rates {
  margin-top: clamp(72px, 9vw, 112px);
}

.price-rates__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 24px;
}

.price-rates__grid--single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 640px;
  margin-inline: auto;
}

.price-rates__col {
  display: grid;
  gap: 12px;
}

.price-rates__title {
  margin: 0;
  font-size: 1.25rem;
}

.price-rates__group {
  margin: 12px 0 0;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.price-rates__title + .price-rates__group {
  margin-top: 0;
}

.price-details .price-message {
  padding: 48px 0;
  color: var(--c-muted);
}

/* Committed use discounts card (content/pages/pricing/page.html) */
.price-commit {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 920px;
  margin: 0 auto;
  padding: 28px 32px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: var(--c-bg);
  box-shadow: var(--shadow-sm);
}

.price-commit__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--c-tint-blue);
  color: var(--c-blue);
}

.price-commit__text {
  flex: 1;
}

.price-commit__text h2 {
  margin: 0 0 4px;
  font-size: 1.25rem;
}

.price-commit__text p {
  margin: 0;
  color: var(--c-muted);
}

.price-footnote {
  max-width: 820px;
  margin: 40px auto 0;
  text-align: center;
}

@media (max-width: 860px) {
  .price-rates__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .price-table-card {
    padding: 4px 18px;
  }

  /* Each row becomes a small card: the name on top, labelled prices below */
  .price-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .price-table,
  .price-table tbody {
    display: block;
  }

  .price-table tr {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 10px 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--c-line);
  }

  .price-table tbody tr:last-child {
    border-bottom: 0;
  }

  .price-table th,
  .price-table td {
    width: auto !important;
    padding: 0;
    border: 0;
  }

  .price-table tbody th {
    grid-column: 1 / -1;
  }

  .price-table td:empty {
    display: none;
  }

  .price-table td[data-label]:not([data-label=""])::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-size: 0.78rem;
    color: var(--c-muted);
  }

  .price-table--rates tr {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .price-table--rates tbody th {
    grid-column: auto;
  }

  .price-table--rates td::before {
    display: none !important;
  }

  .price-table--rates td {
    text-align: right;
  }

  .price-table--rates .price {
    align-items: flex-end;
  }

  .price-commit {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }
}

/* ---- 79-style-guide.css ---- */
/* ==========================================================================
   The component library page (/style-guide). Not used anywhere else.
   ========================================================================== */

.sg-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 40px;
}

.sg-toc a {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--c-bg-smoke);
  color: var(--c-ink);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.sg-toc a:hover {
  background: var(--c-line);
}

.sg-heading {
  margin: 0 0 28px;
  padding-top: 8px;
}

.sg-example {
  margin-bottom: 36px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

.sg-example__head {
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--c-line);
}

.sg-example__head h3 {
  margin: 0 0 4px;
}

.sg-example__demo {
  padding: 28px 24px;
}

.sg-example__demo > :last-child {
  margin-bottom: 0;
}

.sg-example__demo .eyebrow {
  display: inline-block;
  margin-right: 20px;
}

.sg-example__demo--dark {
  background: var(--c-dark);
  color: var(--c-on-dark-muted);
}

.sg-example__code summary {
  padding: 10px 24px;
  border-top: 1px solid var(--c-line);
  background: var(--c-bg-soft);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.sg-example__code pre,
.sg-example__pre {
  margin: 0;
  border-radius: 0;
  font-size: 0.8rem;
  white-space: pre;
}

.sg-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.sg-swatch {
  display: flex;
  align-items: flex-end;
  min-height: 90px;
  padding: 10px;
  border-radius: var(--radius-sm);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.sg-swatch--light {
  color: var(--c-ink);
  box-shadow: inset 0 0 0 1px var(--c-line);
}

/* ---- 80-forms.css ---- */
/* ==========================================================================
   Forms. Use the shared block rather than writing a form by hand:
     {% set form = { id: "sales", button: "Send message" } %}
     {% include "blocks/contact-form.njk" %}
   Submissions POST to /api/forms/<id> and become Zendesk tickets.
   ========================================================================== */

.form {
  display: grid;
  gap: 20px;
}

.form__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

@media (max-width: 560px) {
  .form__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.field {
  display: grid;
  gap: 6px;
}

.field__label {
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--c-ink);
}

.field__label .req {
  color: var(--c-red);
}

.field__input {
  width: 100%;
  min-height: 50px;
  padding: 12px 16px;
  border: 1px solid #d6d6dc;
  border-radius: 12px;
  background: #fff;
  color: var(--c-ink);
  font-size: 1rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

textarea.field__input {
  min-height: 140px;
  resize: vertical;
}

.field__input::placeholder {
  color: #9a9ca3;
}

.field__input:focus {
  outline: none;
  border-color: var(--c-blue);
  box-shadow: 0 0 0 4px rgba(23, 91, 255, 0.14);
}

.field__input:user-invalid {
  border-color: var(--c-danger);
}

/* Glass card variant used on dark sections (sales, partners, support) */
.form-card {
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

.form-card .field__label {
  color: var(--c-on-dark);
}

.form-card .field__input {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.form-card .field__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.form-card .field__input:focus {
  border-color: #fff;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.14);
}

.form__honeypot {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__status {
  margin: 0;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 0.95rem;
}

.form__status[hidden] {
  display: none;
}

.form__status--success {
  background: rgba(31, 157, 85, 0.12);
  color: #137a3f;
}

.form__status--error {
  background: rgba(214, 69, 69, 0.12);
  color: #b02f2f;
}

.form-card .form__status--success {
  background: rgba(31, 157, 85, 0.22);
  color: #c9f5d9;
}

.form-card .form__status--error {
  background: rgba(214, 69, 69, 0.25);
  color: #ffd6d6;
}

.form__note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--c-muted);
}

.form-card .form__note {
  color: var(--c-on-dark-muted);
}

.form[data-state="sent"] .form__fields {
  display: none;
}

/* ---- 81-product-pages.css ---- */
/* ==========================================================================
   Product page patterns (/products/*) and the porting timeline (/porting).
   Small additions on top of the shared components.
   ========================================================================== */

/* Timeline: a vertical, connected sequence of coloured step cards with
   pill-shaped markers between them (porting process on /porting).

   <div class="timeline">
     <p class="timeline__marker">Getting started</p>
     <div class="timeline__step timeline__step--green">
       <h3><span class="timeline__num">1</span> Submit your request</h3>
       <p>...</p>
     </div>
     ...
   </div>
   Step colours: --green, --amber, --purple, --cyan, --yellow, --red.      */
.timeline {
  --timeline-gap: clamp(36px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 540px;
  margin-inline: auto;
}

.timeline > * {
  position: relative;
  margin: 0;
}

.timeline > * + * {
  margin-top: var(--timeline-gap);
}

/* Connector line between consecutive items */
.timeline > * + *::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  height: calc(var(--timeline-gap) + 1px);
  border-left: 1px solid var(--c-ink);
}

.timeline__marker {
  padding: 0.55rem 1.75rem;
  border: 1px solid var(--c-ink);
  border-radius: var(--radius-pill);
  background: #fff;
  font-size: 0.95rem;
  color: var(--c-text);
  text-align: center;
}

.timeline__step {
  --step: #28ca94;
  width: 100%;
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid var(--c-ink);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--step) 18%, #fff);
}

.timeline__step h3 {
  margin-bottom: 0.35em;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
}

.timeline__step p {
  margin: 0;
}

.timeline__num {
  display: block;
  margin-bottom: 0.2em;
  font-size: clamp(3rem, 2.4rem + 2.4vw, 4.25rem);
  font-weight: 600;
  line-height: 1;
  color: color-mix(in srgb, var(--step) 85%, #000);
}

.timeline__step--green { --step: #28ca94; }
.timeline__step--amber { --step: #ca8428; }
.timeline__step--purple { --step: #af28ca; }
.timeline__step--cyan { --step: #28b2ca; }
.timeline__step--yellow { --step: #cab228; }
.timeline__step--red { --step: #ca2836; }

/* /porting hero: centred text with a wide Console screenshot below */
.porting-hero .hero__media {
  width: 100%;
  max-width: none;
  margin-top: clamp(8px, 2vw, 24px);
}

.porting-hero .hero__media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

/* Teams Direct Routing: keep the channel pricing illustration a sensible size */
.teams-costs__media img {
  max-width: 560px;
  margin-inline: auto;
}

/* ---- Cloud SMS, SMS Marketing, Flow, Analytics ---------------------------- */

/* Lead-in colour for the Flow page (the others use lead-ins--pink / default purple)
   <div class="split__text lead-ins lead-ins--red"><p><strong class="lead-in">..</strong> ..</p></div> */
.lead-ins--red .lead-in { color: var(--c-red); }

/* Section with a faint dotted world map behind it (Cloud SMS "Global delivery")
   <section class="section section--map" style="--section-bg: url('images/world-map.webp')"> */
.section--map {
  background-image: var(--section-bg, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

@media (max-width: 860px) {
  .section--map {
    background-size: 180% auto;
    background-position: 30% 20%;
  }
}

/* Product illustration in a split, kept near its natural size instead of
   stretching to the column width.
   <div class="split__media product-media"><img ...></div> */
.product-media {
  width: 100%;
  max-width: var(--product-media-max, 560px);
  margin-inline: auto;
}

.product-media > img {
  width: 100%;
  height: auto;
}

/* Full-width product animation under a section heading (Flow builder) */
.product-demo {
  max-width: 1280px;
  margin: clamp(40px, 6vw, 72px) auto 0;
}

/* Grid of short feature blurbs without icons (Cloud SMS features) */
.feature-grid .feature__title {
  margin-bottom: 0.5em;
}

/* ---- 83-company-pages.css ---- */
/* ==========================================================================
   Page styles for /about, /partners, /use-cases and /support.
   Scoped with each page's bodyClass (page.json) so nothing leaks elsewhere.

   ========================================================================== */

/* Gradient-arc heroes (/about, /use-cases): light background, arc rising from the bottom */
.page-about .about-hero,
.page-use-cases .use-cases-hero {
  --hero-position: center 20%;
  display: flex;
  align-items: center;
  min-height: 800px;
  padding-bottom: clamp(140px, 16vw, 240px);
}

.about-hero > .container,
.use-cases-hero > .container {
  width: 100%;
}

.page-about .about-hero .hero__content,
.page-use-cases .use-cases-hero .hero__content {
  max-width: 1040px;
}

@media (max-width: 860px) {
  .page-about .about-hero,
  .page-use-cases .use-cases-hero {
    min-height: 0;
    padding-block: 80px 180px;
    background-position: center 30%;
  }
}

/* /about: Brisbane office photo and careers line */
.about-office__img {
  width: 100%;
  aspect-ratio: 1354 / 500;
  object-fit: cover;
  object-position: center 60%;
  border-radius: var(--radius-lg);
}

.about-office__careers {
  max-width: 860px;
  margin: 2rem auto 0;
  text-align: center;
}

@media (max-width: 640px) {
  .about-office__img {
    aspect-ratio: 4 / 3;
  }
}

/* /partners */

.partner-option .checklist {
  margin-block: 0.5rem 1.5rem;
}

.partner-option__note {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--c-line);
  font-weight: 500;
  color: var(--c-ink);
}

.white-label-image {
  display: block;
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
}

/* Branded SIP FQDN heading over the integration logos */
.page-partners section:has(.integration-logos) h2 {
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 0.9rem + 2.4vw, 3rem);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.page-partners #salesformdark {
  scroll-margin-top: var(--nav-h);
}

/* /use-cases: industry jump links, sticky intro column, colour blob backgrounds */
.use-case-jump .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.use-case-jump h2 {
  margin: 0;
}

.use-case-jump .tabs__list {
  margin: 0;
  border: 1px solid rgba(10, 10, 11, 0.5);
  background: transparent;
}

.use-case-jump .tabs__list a:hover {
  color: var(--c-ink);
}

@media (max-width: 640px) {
  .use-case-jump .tabs__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    overflow: visible;
    border-radius: var(--radius);
  }

  .use-case-jump .tabs__list a {
    text-align: center;
  }
}

.use-case-industry {
  scroll-margin-top: var(--nav-h);
  background-image: var(--uc-blob, none);
  background-repeat: no-repeat;
  background-size: min(100%, 1400px) auto;
  background-position: left top;
}

.use-case-industry--right {
  background-position: right top;
}

.use-case-industry__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.use-case-industry__intro {
  position: sticky;
  top: calc(var(--nav-h) + 32px);
}

.use-case-industry__intro p {
  color: var(--c-text);
}

.page-use-cases .use-case-card {
  min-height: 0;
  border-color: transparent;
}

.page-use-cases .use-case-card .card__meta {
  margin-bottom: 1.25em;
}

@media (max-width: 991px) {
  .use-case-industry__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .use-case-industry__intro {
    position: static;
    max-width: 640px;
  }
}

/* /support: five product guides in a row, and the two CTA cards */
.support-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  .support-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 480px) {
  .support-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.support-ctas .cta-banner {
  grid-template-columns: minmax(0, 1fr);
  min-height: 460px;
}

.support-ctas .cta-banner::before {
  display: none;
}

@media (max-width: 767px) {
  .support-ctas .cta-banner {
    min-height: 320px;
    align-content: center;
  }
}

/* ---- 84-contact-and-landing-pages.css ---- */
/* ==========================================================================
   Contact pages and campaign landing pages:
     - .contact-page      blocks/contact-page.njk (/sales, /contact-support)
     - .landing-*         /go/phone-blacklist-1 and /go/voice-sales-a-1

   Contact page markup (see the block for options):
     <section class="hero hero--dark contact-page" style="--hero-image: url('...')">
       <div class="container">
         <div class="contact-page__head"><span class="eyebrow">..</span><h1>..</h1></div>
         <div class="contact-page__grid">
           <div class="contact-page__form">(contact form block)</div>
           <div class="contact-page__promise">..</div>
         </div>
       </div>
     </section>
   ========================================================================== */

/* Contact page ------------------------------------------------------------- */
.contact-page {
  padding-block: clamp(64px, 9vw, 120px) clamp(56px, 7vw, 96px);
  --hero-position: center bottom;
  /* Fade the gradient art into the dark privacy strip below */
  --hero-overlay: linear-gradient(to bottom, transparent 60%, var(--c-dark));
}

.contact-page__head {
  max-width: 760px;
  margin: 0 auto clamp(48px, 7vw, 96px);
  text-align: center;
}

.contact-page__head h1 {
  margin-bottom: 0;
}

.contact-page__head .lead {
  margin: 1.25rem auto 0;
}

.contact-page__head .lead a {
  color: var(--c-on-dark);
}

.contact-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 56px);
  align-items: stretch;
}

.contact-page__promise {
  display: flex;
  flex-direction: column;
  color: rgba(255, 255, 255, 0.8);
}

.contact-page__promise h2 {
  margin-bottom: 1.25rem;
}

.contact-page__promise p {
  margin-bottom: 1.1em;
}

.contact-page .contact-page__footnote {
  margin: auto 0 0;
  padding-top: 1.5rem;
  font-size: 0.9rem;
  color: var(--c-on-dark-muted);
}

.contact-page__privacy {
  padding-block: 0 clamp(48px, 6vw, 80px);
  text-align: center;
  font-size: 0.95rem;
}

.contact-page__privacy .container {
  padding-top: clamp(32px, 4vw, 44px);
  border-top: 1px solid var(--c-dark-line);
}

.contact-page__privacy p {
  margin: 0;
}

.contact-page__privacy a {
  font-weight: 500;
}

@media (max-width: 991px) {
  /* Keep the colour glows in view when the hero is taller than it is wide */
  .contact-page {
    --hero-position: left bottom;
    /* The glow sits behind the heading here: darken it so white text stays readable */
    --hero-overlay: linear-gradient(to bottom, rgba(10, 10, 11, 0.4), rgba(10, 10, 11, 0.2) 55%, var(--c-dark));
  }
}

@media (max-width: 860px) {
  .contact-page__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-page .contact-page__footnote {
    margin-top: 0;
  }
}

/* Landing pages ------------------------------------------------------------ */

/* Hero call-to-action with a phone number beside the button */
.landing-call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.landing-call p {
  margin: 0;
  color: var(--c-on-dark-muted);
}

.landing-call a:not(.btn) {
  color: var(--c-on-dark);
  font-size: 1.2rem;
  font-weight: 500;
  white-space: nowrap;
}

/* Rounded photo beside a text column */
.landing-photo img {
  width: 100%;
  border-radius: var(--radius-lg);
}

.landing-photo--narrow img {
  max-width: 300px;
  margin-inline: auto;
}

/* Keep the image before its text on phones when the split puts it second */
@media (max-width: 860px) {
  .landing-split--media-first-mobile .split__media {
    order: -1;
  }

  .split__media.landing-photo {
    max-width: 560px;
  }
}

/* Numbered points written as short lines */
.landing-points {
  margin: 0 0 1.25em;
  padding-left: 1.4em;
}

.landing-points li + li {
  margin-top: 0.3em;
}

/* Customer logos on a grey band */
.landing-logos .logo-wall {
  justify-content: space-around;
}

/* Four icon features beside an illustration (/go/voice-sales-a-1) */
.landing-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 44px) clamp(24px, 3vw, 40px);
}

.landing-features .feature__icon {
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
}

@media (max-width: 560px) {
  .landing-features {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- 90-utilities.css ---- */
/* ==========================================================================
   Utilities and scroll-reveal. Keep this list short; prefer a component.
   ========================================================================== */

/* Reveal on scroll: add data-reveal to any element. It fades up when it
   enters the viewport. Without JavaScript it is simply visible.           */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* Spacing */
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mt-3 { margin-top: 2rem !important; }
.mt-4 { margin-top: 3rem !important; }
.mt-5 { margin-top: clamp(3rem, 6vw, 5rem) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 2rem !important; }
.mb-4 { margin-bottom: 3rem !important; }
.mx-auto { margin-inline: auto !important; }

/* Width */
.max-w-sm { max-width: 480px; }
.max-w-md { max-width: 640px; }
.max-w-lg { max-width: 860px; }

/* Alignment */
.center-block { margin-inline: auto; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }

/* Visibility by breakpoint (mobile < 768px) */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .show-mobile { display: none !important; }
}

.rounded { border-radius: var(--radius-lg); }
.shadow { box-shadow: var(--shadow-lg); }

/* Keep a phrase on one line: <span class="nowrap">Pay-as-you-go</span> pricing */
.nowrap { white-space: nowrap; }

/* Keep original letter case inside an uppercase label: For SME<span class="nocase">s</span> */
.nocase { text-transform: none; }