/* Reverbs design-system layer
 * Shared tokens and responsive guardrails for the archived Webflow pages.
 * Breakpoints intentionally match Webflow: 991px, 767px, and 479px.
 */
:root {
  --white-smoke: #f0efeb;
  --black: #070013;
  --rev-pink: #9b6cff;
  --rev-blue: #6577ff;
  --shadow-plum: #503c72;
  --color-surface: #ffffff;
  --color-text-muted: #5d5d5d;
  --color-border: rgb(7 0 19 / 16%);
  --color-focus: #6577ff;

  --font-display: "Jost", sans-serif;
  --font-body: "Barlow", sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-h3: clamp(1.25rem, 1.5vw + 0.85rem, 1.5rem);
  --text-h2: clamp(1.75rem, 2.3vw + 0.75rem, 3rem);
  --text-page-title: clamp(2.25rem, 2.5vw + 0.75rem, 3.5rem);
  --text-h1: clamp(2.25rem, 4vw + 0.75rem, 5rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  --page-gutter: 2rem;
  --content-max: 80rem;
  --content-reading: 48rem;
  --container-padding: 1rem;
  --shell-width: min(calc(100% - (2 * var(--page-gutter))), var(--content-max));
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 12px rgb(7 0 19 / 10%);
  --shadow-md: 0 12px 32px rgb(7 0 19 / 14%);

  /* Preserve the variables consumed by the archived Webflow stylesheet. */
  --max-width: var(--content-max);
  --title-font: var(--font-display);
  --text-regular: var(--text-base);
  --text-medium: var(--text-xl);
  --text-hero: var(--text-h1);
}

html {
  font-size: 100%;
  scroll-behavior: smooth;
  text-size-adjust: 100%;
}

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

body {
  min-width: 20rem;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

p,
li,
input,
textarea,
select,
button {
  font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  font-family: var(--font-display);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-page-title);
  line-height: 1.05;
}

h2 {
  font-size: var(--text-h2);
  line-height: 1.1;
}

h3 {
  font-size: var(--text-h3);
  line-height: 1.2;
}

p {
  text-wrap: pretty;
}

/* One container contract across legacy, blog, product, and utility pages. */
:is(
  .w-container,
  .container-small,
  .container-main,
  .container-3,
  .blog-container,
  .footer-container,
  .uui-container-large,
  .uui-container-large-2,
  .uui-container-large-3,
  .uui-container-large-4,
  .uui-container-large-5,
  .uui-container-large-6,
  .f-container-regular,
  .w-commerce-commercelayoutcontainer
) {
  width: var(--shell-width);
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

:is(.blog_main_container.wrapper, .blog_main_container._2, .blog_main_container._3) {
  width: 100%;
  max-width: var(--content-max);
  margin-inline: auto;
}

:is(.navbar-logo-left-container-2, .navbar-logo-center-container) {
  width: var(--shell-width);
  max-width: var(--content-max);
  margin-inline: auto;
}

:is(
  .spark-square-menu-with-mega-dropdown-listing-links,
  .spark-square-menu-with-mega-dropdown-listing-links-2
) {
  padding-inline: 0;
}

:is(.spark-square-menu-inner-2, .spark-square-menu-inner) {
  width: var(--shell-width);
  max-width: var(--content-max);
  margin-inline: auto;
}

.rev-section {
  width: var(--shell-width);
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.rev-section > .container-small {
  width: 100%;
  padding-inline: 0;
}

/* Consistent type roles while retaining each page's visual identity. */
:is(.rev-h1, .hero-heading-title.h1, .text-3) {
  font-family: var(--font-display);
  font-size: var(--text-h1);
  line-height: 1.05;
  letter-spacing: -0.035em;
}

body .hero-heading-title.h1.center.blog_bold {
  font-size: var(--text-page-title);
  line-height: 1.05;
}

:is(.rev-h3, .lynx-heading, .blog-heading, .text-17) {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

:is(.lynx-heading-features-large, .brix---heading-h3-size) {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: 1.2;
}

:is(
  .paragraph-2,
  .paragraph-5,
  .paragraph-7,
  .paragraph-9,
  .lynx-paragraph-features-2,
  .uui-text-size-medium,
  .uui-text-size-medium-2,
  .uui-text-size-medium-3,
  .uui-text-size-medium-4
) {
  font-size: var(--text-lg);
  line-height: 1.6;
}

:is(.uui-text-size-small-2, .footer-copyright, .footer-legal-link) {
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* Shared interactive component contract. */
:is(button, .w-button, input[type="button"], input[type="submit"], [role="button"]) {
  min-height: 2.75rem;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease,
    border-color 160ms ease;
}

:is(button, .w-button, input[type="button"], input[type="submit"], [role="button"]):not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

:is(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

:is(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  min-height: 2.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  line-height: 1.4;
}

textarea {
  min-height: 8rem;
  resize: vertical;
}

:is(.faq-item, .uui-contact13_item, .brix---card) {
  border-color: var(--color-border);
  border-radius: var(--radius-md);
}

.footer {
  padding-bottom: calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
}

.clients-wrapper-three._2x3 {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  align-items: stretch;
}

.clients-wrapper-three._2x3 > .div-block-3 {
  width: 100%;
  min-width: 0;
  height: auto;
  aspect-ratio: 1;
}

@media screen and (max-width: 991px) {
  :root {
    --page-gutter: 1.5rem;
    --space-24: 5rem;
  }

  :is(.uui-container-large.flex-hor) {
    max-width: var(--content-max);
  }

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

@media screen and (max-width: 767px) {
  :root {
    --page-gutter: 1.25rem;
    --space-16: 3rem;
    --space-24: 4rem;
  }

  body {
    line-height: 1.55;
  }

  :is(.blog-container) {
    gap: var(--space-6);
    padding-top: 8rem;
    padding-bottom: var(--space-12);
  }

  :is(.blog_main_container._2, .blog_main_container._3) {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }

  :is(.footer-wrapper-three, .footer-bottom) {
    gap: var(--space-6);
  }
}

@media screen and (max-width: 479px) {
  :root {
    --page-gutter: 1rem;
  }

  :is(button, .w-button, input[type="button"], input[type="submit"], [role="button"]) {
    min-height: 3rem;
  }

  :is(.footer-container) {
    padding-inline: var(--page-gutter);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}