/*! ------------------------------------------------
 * Project Name: Rayo - Digital Agency & Personal Portfolio Next.Js Template
 * Project Description: Elevate your digital presence with Rayo - dynamic and stylish Next.Js template designed for creative agencies and personal brands. With modern layouts, smooth interactions and a polished aesthetic, Rayo template helps showcase projects, services and expertise with clarity and impact.
 * Tags: ib-themes, resume, portfolio, personal page, cv, template, one page, responsive, Next.js, css3, creative, clean, agency, studio 
 * Version: 1.0.0
 * Build Date: October 2025
 * Last Update: November 06 2025
 * This product is available exclusively on Themeforest
 * Author: ib-themes
 * Author URI: https://themeforest.net/user/ib-themes  /*! File name: plugins.css
 * ------------------------------------------------
 *
 * ------------------------------------------------
 * Table of Contents
 * ------------------------------------------------
 *  01. custom css for Nextjs
 * ------------------------------------------------
 * Table of Contents End
 * ------------------------------------------------ */

@import url("./plugins.min.css") layer(vendor);
@import url("./main.min.css") layer(vendor);
@import url("https://fonts.googleapis.com/css2?family=Iosevka+Charon+Mono:wght@400;500;600&display=swap");

@layer vendor {

html {
  scroll-behavior: auto;
}
.mxd-nav__wrap {
  display: block;
  pointer-events: none;
}
@media only screen and (max-width: 1199px) {
  /* Hamburger lives in nav wrap; header + CTAs paint later in DOM at the same z-index */
  .mxd-nav__wrap,
  html.home-cinematic .mxd-nav__wrap {
    z-index: 210;
  }

  /* Keep Try/App left of the hamburger slot */
  .mxd-header__floating-controls {
    right: calc(3rem + 4.6rem + 1rem);
  }

  /* Burger over video: light lines on a subtle dark pad */
  html.home-cinematic:not(.home-cinematic-scrolled) .mxd-nav__contain .hamburger__line {
    background: #fff;
  }

  html.home-cinematic:not(.home-cinematic-scrolled) .mxd-nav__hamburger .hamburger__base {
    background-color: rgba(0, 0, 0, 0.42);
  }

}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .mxd-header__floating-controls {
    right: calc(6rem + 5.6rem + 1rem);
  }
}
.mxd-nav__wrap.active_menu {
  pointer-events: all;
}
.mxd-nav__wrap.active_menu ~ .mxd-header__floating-controls,
.mxd-nav__wrap.active_menu ~ .mxd-header__floating-left {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
@media only screen and (min-width: 1200px) {
  .mxd-nav__contain {
    display: none;
  }
  .mxd-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    width: calc(100% - 12rem);
  }
}
@media only screen and (min-width: 1600px) {
  .mxd-header {
    width: calc(100% - 18rem);
  }
}
.mxd-menu__wrapper {
  display: block;
  pointer-events: none;
}
.mxd-menu__wrapper.active_menu {
  pointer-events: all;
}

.mxd-menu__wrapper .fade-in-elm {
  transition: all 0.6s ease;
  visibility: hidden;
  opacity: 0;
}
.mxd-menu__wrapper.active_menu .fade-in-elm {
  visibility: visible;
  opacity: 1;
}
.mxd-menu__wrapper .fade-in-up-elm {
  transition: all 0.6s ease;
  visibility: hidden;
  opacity: 0;
  transform: translateY(25px);
}
.mxd-menu__wrapper.active_menu .fade-in-up-elm {
  visibility: visible;
  opacity: 1;
  transform: translateY(0px);
}
.submenu {
  display: block;
  height: 0px;
  overflow: hidden;
  padding-top: 0px;
}

/* Locks page scroll while modal is open */
.videoModal__bodyOpen {
  overflow: hidden;
}

/* Fullscreen overlay, centered content, no overlay scrolling */
.videoModal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: grid;
  place-items: center;
  overflow: hidden; /* prevent overlay scrollbar */
  z-index: 111;
}

/* Transparent content, no internal scroll */
.videoModal__content {
  background: transparent;
  border: none;
  outline: none;
  overflow: hidden; /* prevent content scrollbar */
}

/* Responsive 16:9 player that never exceeds viewport */
.videoModal__playerWrap {
  max-width: 1200px;
  width: min(90vw, 1600px);
  aspect-ratio: 16 / 9; /* modern browsers */
  position: relative;
  border-radius: var(--_radius-m);
  overflow: hidden;
}
.swiper-navigation-icon {
  display: none;
}
.hamburger__line {
  transition: all 0.3s ease;
}
.nav-open .hamburger__line:first-child {
  translate: none;
  rotate: none;
  scale: none;
  transform: translate(0px, 5px) rotate(45deg);
}
.nav-open .hamburger__line:last-child {
  translate: none;
  rotate: none;
  scale: none;
  transform: translate(0px, -5px) rotate(-45deg);
}

/* Floating left group (logo + demo button) on scroll */
.mxd-header__floating-left {
  position: fixed;
  top: 3rem;
  left: 3rem;
  z-index: 101;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: opacity var(--_animspeed-medium) var(--_animbezier),
              visibility var(--_animspeed-medium) var(--_animbezier);
}
@media only screen and (min-width: 768px) {
  .mxd-header__floating-left {
    top: 4rem;
    left: 6rem;
    gap: 2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mxd-header__floating-left {
    top: 4.8rem;
  }
}
@media only screen and (min-width: 1600px) {
  .mxd-header__floating-left {
    left: 9rem;
  }
}
.mxd-header__floating-left .btn {
  font-family: var(--font-vt323), monospace;
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

/* Sticky header — scroll-up reveal */
.mxd-header.is-sticky {
  position: fixed;
  z-index: 102;
}

/* Glass pill around the nav links on scroll-up */
.header-nav {
  transition: background var(--_animspeed-medium) var(--_animbezier),
              box-shadow var(--_animspeed-medium) var(--_animbezier),
              padding var(--_animspeed-medium) var(--_animbezier);
}
.mxd-header.is-sticky .header-nav {
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
  border-radius: 10rem;
  padding: 0.8rem 2.4rem;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

/* Floating controls - persist on scroll */
.mxd-header__floating-controls {
  position: fixed;
  top: 3rem;
  right: 8.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  z-index: 103;
}
.mxd-header__floating-controls.is-scrolled .btn-outline {
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  backdrop-filter: blur(12px) saturate(180%);
}
@media only screen and (min-width: 768px) {
  .mxd-header__floating-controls {
    top: 4rem;
    right: 13.6rem;
    gap: 1rem;
  }
}
@media only screen and (min-width: 1200px) {
  .mxd-header__floating-controls {
    top: 4.8rem;
    right: 6rem;
  }
}
@media only screen and (min-width: 1600px) {
  .mxd-header__floating-controls {
    right: 9rem;
  }
}
.mxd-header__floating-controls .btn-opposite {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.no-touch .mxd-header__floating-controls .btn-opposite:hover {
  background-color: transparent;
  border-color: var(--st-bright);
  color: var(--t-bright);
}

/* Keep text visible on mobile for specific buttons */
@media only screen and (max-width: 767px) {
  .btn-mobile-icon.btn-mobile-show-text {
    width: auto;
    height: 3.6rem;
    padding: 0 1.2rem;
    border-radius: 1.8rem;
  }
  .btn-mobile-icon.btn-mobile-show-text .btn-caption {
    display: block !important;
  }
}

/* VT323 font for floating header buttons */
.mxd-header__floating-controls .btn {
  font-family: var(--font-vt323), monospace;
}

/* Header controls on mobile */
@media only screen and (max-width: 767px) {
  .mxd-header__floating-left .btn {
    display: none !important;
  }
  .header-app-desktop {
    display: none !important;
  }
}
@media only screen and (min-width: 768px) {
  .header-app-mobile {
    display: none !important;
  }
}

/* Pixel-art icon inside buttons */
.btn-pixel-icon {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  image-rendering: pixelated;
  filter: var(--icon-invert, invert(0));
}
@media only screen and (min-width: 768px) {
  .btn-pixel-icon {
    width: 2.2rem;
    height: 2.2rem;
  }
}
.btn-opposite .btn-pixel-icon,
.btn-accent .btn-pixel-icon {
  filter: invert(1);
  transition: filter 0.3s ease;
}
.no-touch .btn-opposite:hover .btn-pixel-icon {
  filter: invert(0);
}

/* Crisp rendering for pixel-art logos */
img.mxd-logo__image {
  image-rendering: pixelated;
}

/* ===== Desktop header navigation ===== */
.header-nav {
  display: none;
  align-items: center;
}
@media only screen and (min-width: 1200px) {
  .header-nav {
    display: flex;
    justify-self: center;
  }
}

/* Invisible spacer to balance the nav against the floating controls */
.mxd-header__nav-spacer {
  display: none;
}
@media only screen and (min-width: 1200px) {
  .mxd-header__nav-spacer {
    display: flex;
    justify-self: end;
    gap: 2rem;
    visibility: hidden;
    pointer-events: none;
    width: 16rem;
  }
}
.header-nav__list {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.header-nav__trigger,
.header-nav__link,
.header-nav__link--bold {
  display: inline-flex;
  align-items: center;
}

/* Top-level nav links — VT323, faux-bold */
.header-nav__link {
  font-family: var(--font-vt323), monospace;
  font-size: 2rem;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--t-muted);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  text-shadow: 0.4px 0 0 currentColor;
  transition: color 0.2s ease;
  padding-bottom: 4px;
}
.no-touch .header-nav__link:hover,
.header-nav__item.active .header-nav__link {
  color: var(--t-bright);
}
/* Pixelated underline for active nav link */
.header-nav__item.active .header-nav__link {
  background-image: linear-gradient(
    to right,
    currentColor 3px,
    transparent 3px
  );
  background-size: 5px 2px;
  background-repeat: repeat-x;
  background-position: bottom;
}

/* Dropdown trigger */
.header-nav__dropdown {
  position: relative;
}
.header-nav__trigger {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}
.header-nav__chevron {
  font-size: 1rem;
  color: var(--t-muted-extra);
  transition: transform 0.3s cubic-bezier(0.76, 0, 0.024, 1);
  flex-shrink: 0;
}
.header-nav__item:hover .header-nav__chevron {
  transform: rotate(180deg);
  color: var(--t-muted);
}

/* ===== Dropdown panel ===== */
.header-nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.8rem;
  padding: 0.6rem;
  background: #fff;
  border: 1px solid #eae8e6;
  border-radius: 1.4rem;
  opacity: 0;
  visibility: hidden;
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.03),
    0 12px 28px rgba(0, 0, 0, 0.08);
  transition:
    opacity 0.18s ease,
    visibility 0.18s ease;
  z-index: 10;
}
.header-nav__panel--right {
  left: auto;
  right: 0;
}
.header-nav__panel::before {
  content: "";
  position: absolute;
  top: -1rem;
  left: 0;
  width: 100%;
  height: 1rem;
}
.header-nav__item:hover .header-nav__panel {
  opacity: 1;
  visibility: visible;
}

/* Panel sizing per column count */
.header-nav__panel--cols-1 {
  min-width: 24rem;
}
.header-nav__panel--cols-2 {
  width: 44rem;
}
.header-nav__panel--cols-3 {
  width: 60rem;
}

/* ---- Grouped layout (Product) ---- */
.header-nav__groups {
  display: flex;
  position: relative;
}
.header-nav__group {
  flex: 1;
  min-width: 0;
  padding: 0.4rem 0;
}
.header-nav__group--bordered {
  border-right: 1px solid #eae8e6;
  margin-right: 0.2rem;
  padding-right: 0.2rem;
}
.header-nav__group-label {
  font-family: var(--font-vt323), monospace;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--t-muted-extra);
  padding: 0.5rem 1rem 0.4rem;
  white-space: nowrap;
}

/* Decorative mascot image — floats in bottom-right corner */
.header-nav__decor {
  position: absolute;
  bottom: 0;
  right: 0.4rem;
  opacity: 0.1;
  pointer-events: none;
}
.header-nav__decor img {
  width: 36px;
  height: 36px;
  image-rendering: pixelated;
}

/* ---- Flat grid layout (Specialties, Resources) ---- */
.header-nav__grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 2), 1fr);
}

/* ---- Card links ---- */
.header-nav__card {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.65rem 0.9rem;
  border-radius: 0.8rem;
  text-decoration: none;
  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}
.header-nav__card-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.header-nav__card-title {
  font-family: var(--font-vt323), monospace;
  font-size: 1.7rem;
  line-height: 1.2;
  color: var(--t-muted);
  white-space: nowrap;
  transition: color 0.15s ease;
}
.header-nav__card-desc {
  font-size: 1.15rem;
  line-height: 1.35;
  color: var(--t-muted-extra);
}
.header-nav__card-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  opacity: 0.25;
  image-rendering: pixelated;
  margin-top: 0.3rem;
  transition: opacity 0.15s ease;
}
.header-nav__card-pill {
  flex-shrink: 0;
  height: 2.2rem;
  line-height: 2.2rem;
  padding: 0 0.8rem;
  font-size: 1.1rem;
  margin-top: 0.2rem;
}

/* Card hover */
.no-touch .header-nav__card:hover {
  background: rgba(0, 0, 0, 0.03);
}
.no-touch .header-nav__card:hover .header-nav__card-title {
  color: var(--t-bright);
}
.no-touch .header-nav__card:hover .header-nav__card-icon {
  opacity: 0.5;
}

/* Card active state */
.header-nav__card.active .header-nav__card-title {
  color: var(--t-bright);
}
.header-nav__card.active .header-nav__card-icon {
  opacity: 0.45;
}

/* Scroll-to-top button outline + pixel icon — sit above Chatwoot bubble */
.btn-to-top {
  border-style: solid;
  border-color: var(--nl-white);
  bottom: 9rem !important;
}
@media only screen and (min-width: 768px) {
  .btn-to-top {
    bottom: 10.5rem !important;
  }
}
.btn-to-top .btn-pixel-icon {
  filter: invert(1);
}

/* Chatwoot — keep launcher clickable above page chrome + brand color */
.woot--bubble-holder,
.woot-widget-holder {
  z-index: 10000 !important;
}

.woot-widget-bubble {
  background: var(--sb-berry-500) !important;
  background-color: var(--sb-berry-500) !important;
}

.woot--close::before,
.woot--close::after {
  background-color: #fff !important;
}

/* ===== Competitors comparison table ===== */
.mxd-cmp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.mxd-cmp-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.mxd-cmp-table th,
.mxd-cmp-table td {
  padding: 2rem 1.5rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--st-muted);
}
.mxd-cmp-table th {
  font: normal var(--fw-medium) 1.3rem/1 var(--_font-accent);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--t-muted-extra);
  text-align: center;
  white-space: nowrap;
}
.mxd-cmp-table__th-feature {
  text-align: left !important;
  width: 46%;
}
.mxd-cmp-table__td-feature {
  font: normal var(--fw-medium) 1.5rem/1.4 var(--_font-accent);
  color: var(--t-bright);
  letter-spacing: 0.02em;
  text-align: left;
}
.mxd-cmp-table td:not(.mxd-cmp-table__td-feature) {
  text-align: center;
}
.mxd-cmp-table th:nth-child(2),
.mxd-cmp-table td:nth-child(2) {
  background-color: rgba(var(--additional-rgb), 0.06);
}
.mxd-cmp-table th:nth-child(2) {
  color: var(--t-bright);
  font-weight: var(--fw-semibold);
}
.mxd-cmp-table__status {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.mxd-cmp-table__icon {
  width: 2.2rem;
  height: 2.2rem;
  image-rendering: pixelated;
  opacity: 0.7;
}
.mxd-cmp-table__status--check .mxd-cmp-table__icon {
  opacity: 1;
}
.mxd-cmp-table__status--cross .mxd-cmp-table__icon {
  opacity: 0.18;
}
.mxd-cmp-table__note {
  display: block;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--t-muted);
  max-width: 20rem;
  text-align: center;
}
.mxd-cmp-table tfoot td {
  border-bottom: none;
  border-top: 2px solid var(--st-bright);
  background-color: var(--base-tint);
}
.mxd-cmp-table tfoot td:nth-child(2) {
  background-color: rgba(var(--additional-rgb), 0.12);
}
.mxd-cmp-table tfoot tr:first-child td {
  padding-top: 2.4rem;
}
.mxd-cmp-table tfoot tr:last-child td {
  padding-bottom: 2.4rem;
}
.mxd-cmp-table__summary-val {
  font: normal var(--fw-medium) 1.8rem/1.3 var(--_font-accent);
  color: var(--t-muted);
}
.mxd-cmp-table__summary-val--highlight {
  font-size: 2.4rem;
  font-weight: var(--fw-bold);
  color: var(--t-bright);
}
@media only screen and (max-width: 767px) {
  .mxd-cmp-table {
    table-layout: auto;
    min-width: 60rem;
  }
}


/* Pricing comparison table: sticky headers */
.mxd-cmp-table--pricing {
  border-collapse: separate;
  border-spacing: 0;
}
.mxd-cmp-table--pricing thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background-color: var(--base);
}
.mxd-cmp-table-wrap:has(.mxd-cmp-table--pricing) {
  overflow-x: clip;
}
@media only screen and (max-width: 767px) {
  .mxd-cmp-table-wrap:has(.mxd-cmp-table--pricing) {
    overflow-x: auto;
  }
}
/* Category separator row */
.mxd-cmp-table__td-category {
  padding-top: 3rem !important;
  padding-bottom: 1rem !important;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--t-muted);
  border-bottom-color: transparent !important;
}

/* Inline trial link in cells */
.mxd-cmp-table__trial-link {
  display: block;
  margin-top: 0.5rem;
  font-size: 1.2rem;
  font-weight: var(--fw-medium);
  color: var(--t-bright);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  letter-spacing: 0.02em;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}
.mxd-cmp-table__trial-link:hover {
  opacity: 1;
}
/* tfoot action button */
.mxd-cmp-table__action-btn {
  display: inline-block;
  font: normal var(--fw-semibold) 1.3rem/1 var(--_font-accent);
  letter-spacing: 0.04em;
  padding: 1rem 2rem;
  border-radius: 0.6rem;
  text-decoration: none;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}
.mxd-cmp-table__action-btn:hover {
  opacity: 0.85;
}
.mxd-cmp-table__action-btn--primary {
  background-color: var(--base-opp);
  color: var(--base);
}
.mxd-cmp-table__action-btn--outline {
  background-color: transparent;
  border: 1px solid var(--st-bright);
  color: var(--t-bright);
}

/* Pricing table: highlight Pro column (3rd) instead of 2nd */
table.mxd-cmp-table.mxd-cmp-table--pricing th:nth-child(2),
table.mxd-cmp-table.mxd-cmp-table--pricing td:nth-child(2) {
  background-color: transparent !important;
}
table.mxd-cmp-table.mxd-cmp-table--pricing th:nth-child(2) {
  color: var(--t-muted-extra) !important;
  font-weight: var(--fw-medium) !important;
}
table.mxd-cmp-table.mxd-cmp-table--pricing th:nth-child(3),
table.mxd-cmp-table.mxd-cmp-table--pricing td:nth-child(3) {
  background-color: rgba(var(--additional-rgb), 0.06) !important;
}
table.mxd-cmp-table.mxd-cmp-table--pricing th:nth-child(3) {
  color: var(--t-bright) !important;
  font-weight: var(--fw-semibold) !important;
}
table.mxd-cmp-table.mxd-cmp-table--pricing tfoot td:nth-child(2) {
  background-color: transparent !important;
}
table.mxd-cmp-table.mxd-cmp-table--pricing tfoot td:nth-child(3) {
  background-color: rgba(var(--additional-rgb), 0.12) !important;
}

/* ===================================================================
   MatrixTimer — kept for MatrixTimer.tsx component
   =================================================================== */

/* ---- Streaming note cursor ---- */

.streaming-cursor {
  display: inline-block;
  width: 3px;
  height: 1.1em;
  background: var(--accent);
  border-radius: 2px;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: streamCursorBlink 0.6s steps(2, jump-none) infinite;
}

@keyframes streamCursorBlink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* ---- Matrix timer ---- */
.dm__matrix { display: flex; align-items: center; }
.dm__matrix-svg { width: 120px; height: auto; }
.dm__matrix-blink { animation: dmColonBlink 1s step-end infinite; }
@keyframes dmColonBlink { 0%,100%{opacity:1} 50%{opacity:.1} }
.dm__matrix--warn .dm__matrix-blink { animation: none; }
.dm__matrix--warn { animation: dmMatrixPulse 1s ease-in-out infinite; }
@keyframes dmMatrixPulse { 0%,100%{opacity:1} 50%{opacity:.5} }

.mxd-hero-01__bottom {
  display: none;
}
.mxd-hero-03__top {
  position: relative;
  overflow: hidden;
}
@media only screen and (max-width: 767px) {
  .hero-wave-mobile {
    min-height: 100svh;
    min-height: 100dvh;
  }
  .mxd-hero-03__top {
    height: calc(100svh - 7.6rem);
  }
}
@media only screen and (min-width: 1200px) {
  .mxd-hero-03__top {
    height: calc(100vh - 9.6rem - 20rem);
  }
  .mxd-hero-01__bottom {
    display: flex;
    height: 20rem;
    padding-bottom: 4rem;
  }
}
.mxd-hero-03__headline {
  bottom: 2rem;
  mix-blend-mode: normal;
  transform: translateX(-50%) translateY(0) scale(1);
  transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1), opacity 400ms ease;
  will-change: transform, opacity;
}
@media only screen and (min-width: 992px) {
  .mxd-hero-03__headline {
    bottom: -1rem;
  }
}
@media only screen and (min-width: 1600px) {
  .mxd-hero-03__top {
    height: calc(100vh - 9.6rem - 24rem);
  }
  .mxd-hero-01__bottom {
    height: 24rem;
  }
}

.hero-03-marquee__video {
  width: 95vw;
  height: 95vw;
  border-radius: 0;
}
.hero-03-marquee__image {
  width: 95vw;
}
.mxd-hero-03__marquee .marquee__item {
  margin-right: 4rem;
}
@media only screen and (min-width: 768px) {
  .hero-03-marquee__video {
    width: 48vw;
    height: 48vw;
  }
  .hero-03-marquee__image {
    width: 48vw;
  }
  .mxd-hero-03__marquee .marquee__item {
    margin-right: 5rem;
  }
}
@media only screen and (min-width: 1200px) {
  .hero-03-marquee__video {
    width: 17vw;
    height: 17vw;
  }
  .hero-03-marquee__image {
    width: 17vw;
  }
  .mxd-hero-03__marquee .marquee__item {
    margin-right: 3.5rem;
  }
}
@media only screen and (min-width: 1600px) {
  .hero-03-marquee__video {
    width: 14vw;
    height: 14vw;
  }
  .hero-03-marquee__image {
    width: 14vw;
  }
}

/* Wide (landscape) variant for ~1.94:1 aspect-ratio videos */
.hero-03-marquee__video--wide {
  width: 95vw;
  height: 49vw;
  border-radius: 50% 50% 0 0 / 80% 80% 0 0;
}
@media only screen and (min-width: 768px) {
  .hero-03-marquee__video--wide {
    width: 48vw;
    height: 24.7vw;
  }
}
@media only screen and (min-width: 1200px) {
  .hero-03-marquee__video--wide {
    width: 27vw;
    height: 13.9vw;
  }
}
@media only screen and (min-width: 1600px) {
  .hero-03-marquee__video--wide {
    width: 22vw;
    height: 11.3vw;
  }
}

.marquee__item.item-partners {
  height: 160px;
}

.mxd-divider--bordered::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 6px solid #000;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}

.btn-rotating-120-160 .btn-rotating__image {
  width: 7.5rem;
}
@media only screen and (min-width: 1600px) {
  .btn-rotating-120-160 .btn-rotating__image {
    width: 8.5rem;
  }
}

} /* end @layer vendor */

/* =============================================
   Brand Design Tokens
   Override vendor font + color tokens from
   main.min.css without modifying the vendor file.
   ============================================= */

:root {
  --_font-default: var(--font-inter), "Inter", sans-serif;
  --_font-accent: var(--font-lora), "Lora", serif;
  --font-tech: "Iosevka Charon Mono", monospace;
  --font-pixel: var(--font-vt323), monospace;

  --sb-berry-50:  #FFF0F3;
  --sb-berry-100: #FFE0E8;
  --sb-berry-200: #FFC1D1;
  --sb-berry-300: #FF8DA8;
  --sb-berry-400: #F0507A;
  --sb-berry-500: #D91548;
  --sb-berry-600: #B8103D;
  --sb-berry-700: #9A0D33;
  --sb-berry-800: #7E0A2A;
  --sb-berry-900: #5C0720;

  --accent--light: var(--sb-berry-500);
  --accent-rgb--light: 217, 21, 72;
  --accent--dark: var(--sb-berry-400);
  --accent-rgb--dark: 240, 80, 122;
}

/* =============================================
   Brand Font Overrides
   Switch navigation chrome from VT323 to the
   default UI font for professional clarity.
   ============================================= */

.mxd-header__floating-left .btn,
.mxd-header__floating-controls .btn {
  font-family: var(--_font-default);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 4rem;
  line-height: 1;
  padding: 0 1.5rem;
  border-radius: 2rem;
  font-size: 1.35rem;
  gap: 0.6rem;
  border-width: 1.5px;
  border-style: solid;
  border-color: var(--st-bright);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.mxd-header__floating-left .btn {
  padding-left: 1.8rem;
  padding-right: 1.8rem;
}
.mxd-header__floating-controls .btn .btn-caption,
.mxd-header__floating-controls .header-try-btn__label {
  display: inline-flex;
  align-items: center;
  height: auto;
  line-height: 1.2;
}
.mxd-header__floating-controls .btn-anim .btn-caption {
  display: flex;
  align-items: center;
  height: 1.8rem;
  line-height: 1.8rem;
}
.mxd-header__floating-left .btn-anim .btn-caption {
  display: flex;
  align-items: center;
  height: 1.8rem;
  line-height: 1.8rem;
}
.mxd-header__floating-controls .btn-pixel-icon,
.mxd-header__floating-left .btn-pixel-icon {
  width: 1.5rem;
  height: 1.5rem;
}
/* Tablet: match 5.6rem hamburger/logo so all controls align */
@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .mxd-header__floating-left .btn,
  .mxd-header__floating-controls .btn {
    height: 5.6rem;
    line-height: 1;
    min-width: 5.6rem;
    padding: 0 2rem;
    border-radius: 2.8rem;
    font-size: 1.5rem;
  }
  .mxd-header__floating-controls .btn-anim .btn-caption,
  .mxd-header__floating-left .btn-anim .btn-caption {
    height: 2rem;
    line-height: 2rem;
  }
  .mxd-header__floating-controls .btn-pixel-icon,
  .mxd-header__floating-left .btn-pixel-icon {
    width: 1.8rem;
    height: 1.8rem;
  }
}

/* Phone: match 4.6rem hamburger, text-only (no icons) */
@media only screen and (max-width: 767px) {
  .mxd-header__floating-controls .btn {
    height: 4.6rem;
    line-height: 1;
    min-width: 4.6rem;
    padding: 0 1.4rem;
    border-radius: 2.3rem;
    font-size: 1.5rem;
    gap: 0.5rem;
  }
  .mxd-header__floating-controls .btn-pixel-icon {
    display: none;
  }
  .mxd-header__floating-controls .btn-anim .btn-caption {
    height: 1.6rem;
    line-height: 1.6rem;
  }
}

.header-nav__link {
  font-family: var(--_font-default);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-shadow: none;
}

.header-nav__item.active .header-nav__link {
  background-image: none;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
}

.header-nav__card-title {
  font-family: var(--_font-default);
  font-size: 1.45rem;
  font-weight: 500;
}

.header-nav__group-label {
  font-family: var(--font-tech);
  font-size: 1.05rem;
  letter-spacing: 0.12em;
}

.footer-socials__link--vt323 {
  font-family: var(--_font-default) !important;
}

/* =============================================
   Layout & Typography Overrides
   Constrain content width, widen gutters, scale
   down headings, and reduce section spacing for
   healthcare-audience readability.
   ============================================= */

/* ---- Container width ---- */
.mxd-container {
  max-width: 1440px;
}
.mxd-container.fullwidth-container {
  max-width: none;
}

/* ---- Layout tokens for fluid rhythm ---- */
/* Gutter tokens calibrated for max-width: 1440px container.
   The max-width already prevents content from stretching too wide on
   ultrawide screens, so internal padding only needs to provide
   comfortable breathing room — not act as a secondary width constraint. */
:root {
  --layout-gutter-md: clamp(4.5rem, 5vw, 6rem);
  --layout-gutter-lg: clamp(5.5rem, 4.5vw, 7rem);
  --layout-gutter-xl: clamp(6.5rem, 4.5vw, 7.5rem);

  --layout-space-default: clamp(10rem, 8vw, 15rem);
  --layout-space-pre-grid: clamp(8rem, 7vw, 13rem);
  --layout-space-pre-title: clamp(9.5rem, 7.5vw, 14rem);
}

/* ---- Content-section gutters ---- */
/* Fluid gutters scoped to grid-container so fullwidth hero/marquee/footer stay unaffected. */
@media only screen and (min-width: 768px) {
  .mxd-container.grid-container {
    padding-inline: var(--layout-gutter-md);
  }
}
@media only screen and (min-width: 1200px) {
  .mxd-container.grid-container {
    padding-inline: var(--layout-gutter-lg);
  }
}
@media only screen and (min-width: 1600px) {
  .mxd-container.grid-container {
    padding-inline: var(--layout-gutter-xl);
  }
}

/* ---- Heading typography ---- */
/* Line-heights: unitless per MDN; headings 1.2–1.35, body 1.5+ (W3C C21) */
h1 { font-size: 4rem; line-height: 1.15; letter-spacing: -0.02em; }
h2 { font-size: 3.2rem; line-height: 1.2; letter-spacing: -0.02em; }
h3 { font-size: 2.6rem; line-height: 1.25; letter-spacing: -0.01em; }
h4 { font-size: 2.2rem; line-height: 1.25; }

/* Services cards: headings a bit larger to match About section scale */
.mxd-services-cards-s__title h3 {
  font-size: 3.2rem;
}

/* Services cards: pills use technical mono, all caps (brand: badge/pill labels) */
.mxd-services-cards-s__tags .tag {
  font-family: var(--font-tech);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Services cards: first row (items 1–2) shorter; second row (items 3–5) taller, equal height, to avoid text over images */
@media only screen and (min-width: 768px) {
  .mxd-services-cards-s__item:nth-child(1),
  .mxd-services-cards-s__item:nth-child(2) {
    height: 300px;
  }
  .mxd-services-cards-s__item:nth-child(3),
  .mxd-services-cards-s__item:nth-child(4),
  .mxd-services-cards-s__item:nth-child(5) {
    height: 420px;
  }
}
@media only screen and (min-width: 1200px) {
  .mxd-services-cards-s__item:nth-child(1),
  .mxd-services-cards-s__item:nth-child(2) {
    height: 380px;
  }
  .mxd-services-cards-s__item:nth-child(3),
  .mxd-services-cards-s__item:nth-child(4),
  .mxd-services-cards-s__item:nth-child(5) {
    height: 520px;
  }
}
@media only screen and (min-width: 1600px) {
  .mxd-services-cards-s__item:nth-child(1),
  .mxd-services-cards-s__item:nth-child(2) {
    height: 420px;
  }
  .mxd-services-cards-s__item:nth-child(3),
  .mxd-services-cards-s__item:nth-child(4),
  .mxd-services-cards-s__item:nth-child(5) {
    height: 580px;
  }
}

/* Second row: extra spacing so description doesn’t sit on bottom illustrations */
.mxd-services-cards-s__item:nth-child(n+3) .mxd-services-cards-s__info {
  padding-bottom: 1.5rem;
}
@media only screen and (min-width: 1200px) {
  .mxd-services-cards-s__item:nth-child(n+3) .mxd-services-cards-s__info {
    padding-bottom: 2rem;
  }
}

/* Manifest headlines (About, Competitors): 1.3 vs theme default 1.6 */
.mxd-block__manifest .mxd-manifest {
  line-height: 1.3;
}
h5 { font-size: 2rem; }
h6 { font-size: 1.8rem; }

@media only screen and (min-width: 768px) {
  h1 { font-size: 4.8rem; }
  h1.h1-small { font-size: 4.4rem; }
  h2 { font-size: 3.8rem; }
  h2.h2-large { font-size: 4.4rem; }
  h3 { font-size: 3rem; }
  .mxd-services-cards-s__title h3 { font-size: 3.8rem; }
  h4 { font-size: 2.4rem; }
  h5 { font-size: 2.2rem; }
  h6 { font-size: 2rem; }
}

@media only screen and (min-width: 1200px) {
  h1 { font-size: 5.4rem; }
  h1.h1-small { font-size: 5rem; }
  h2 { font-size: 4.2rem; }
  h2.h2-large { font-size: 5rem; }
  h3 { font-size: 3.2rem; }
  .mxd-services-cards-s__title h3 { font-size: 4.2rem; }
  h4 { font-size: 2.6rem; }
}

@media only screen and (min-width: 1600px) {
  h1 { font-size: 6rem; }
  h1.h1-small { font-size: 5.4rem; }
  h2 { font-size: 4.4rem; }
  h2.h2-large { font-size: 5.6rem; }
  h3 { font-size: 3.4rem; }
  .mxd-services-cards-s__title h3 { font-size: 4.5rem; }
  .mxd-divider:has(.mxd-divider__video),
  .mxd-divider__video {
    height: 700px;
  }
}

/*
 * Semantic heading level changed to close outline gaps (h1→h2→h3).
 * Selectors include the element so they beat the global h1–h6 scale
 * and keep the previous tag's size.
 */
h2.sb-keep-h4,
h3.sb-keep-h4,
h4.sb-keep-h4 {
  font-family: var(--_font-accent);
  font-weight: var(--fw-medium);
  font-size: 2.2rem;
  line-height: 1.25;
  letter-spacing: normal;
  color: var(--t-bright);
}
h2.sb-keep-h5,
h3.sb-keep-h5,
h5.sb-keep-h5 {
  font-family: var(--_font-accent);
  font-weight: var(--fw-medium);
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--t-bright);
}
h2.sb-keep-h6,
h3.sb-keep-h6,
h6.sb-keep-h6 {
  font-family: var(--_font-accent);
  font-weight: var(--fw-medium);
  font-size: 1.8rem;
  line-height: 1.2;
  letter-spacing: normal;
  color: var(--t-bright);
}
@media only screen and (min-width: 768px) {
  h2.sb-keep-h4,
  h3.sb-keep-h4,
  h4.sb-keep-h4 { font-size: 2.4rem; }
  h2.sb-keep-h5,
  h3.sb-keep-h5,
  h5.sb-keep-h5 { font-size: 2.2rem; }
  h2.sb-keep-h6,
  h3.sb-keep-h6,
  h6.sb-keep-h6 { font-size: 2rem; }
}
@media only screen and (min-width: 1200px) {
  h2.sb-keep-h4,
  h3.sb-keep-h4,
  h4.sb-keep-h4 { font-size: 2.6rem; }
}

/* ---- Per-route headline avatar (overrides vendor fillers) ---- */
.inner-headline__title[data-avatar].headline-img-before::before,
.inner-headline__title[data-avatar].headline-img-after::after {
  background-image: var(--sb-headline-image);
}

/* ---- Inner-page hero: line-aware avatar sizing ---- */
.inner-headline__title[data-avatar] {
  --sb-avatar-width: 14rem;
  --sb-avatar-width-boost: 3.2rem;
  --sb-avatar-gap: 2rem;
  --sb-avatar-lines: 1;
  --sb-avatar-effective-width: calc(
    var(--sb-avatar-width) +
      (var(--sb-avatar-lines) - 1) * var(--sb-avatar-width-boost)
  );
}
@media only screen and (min-width: 768px) {
  .inner-headline__title[data-avatar].headline-img-before,
  .inner-headline__title[data-avatar].headline-img-after {
    overflow: hidden;
  }
}
.inner-headline__title[data-avatar].headline-img-before::before {
  float: left;
  width: var(--sb-avatar-effective-width);
  height: calc(var(--sb-avatar-lines) * 1lh + 0.15em);
  margin-right: var(--sb-avatar-gap);
  margin-bottom: 0.6rem;
}
.inner-headline__title[data-avatar].headline-img-after::after {
  float: right;
  width: var(--sb-avatar-effective-width);
  height: calc(var(--sb-avatar-lines) * 1lh + 0.15em);
  margin-left: var(--sb-avatar-gap);
  margin-bottom: 0.6rem;
}
@supports not (height: 1lh) {
  .inner-headline__title[data-avatar].headline-img-before::before,
  .inner-headline__title[data-avatar].headline-img-after::after {
    height: calc(var(--sb-avatar-lines) * 1.15em + 0.15em);
  }
}

/* Mobile (<768px): stack avatar above title, reduce h1 size */
@media only screen and (max-width: 767px) {
  .mxd-block__name.name-inner-headline {
    margin-bottom: 1.2rem;
    margin-top: 0;
  }
  .mxd-point-subtitle {
    font-size: 1.8rem;
    line-height: 1.15;
  }
  .inner-headline__title[data-avatar] {
    --sb-avatar-width: 8rem;
    --sb-avatar-width-boost: 0rem;
    --sb-avatar-gap: 0rem;
    --sb-avatar-lines: 1;
    font-size: clamp(2rem, 8vw, 2.4rem) !important;
    line-height: 1.14;
    letter-spacing: -0.01em;
    overflow: visible;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    text-wrap: balance;
  }
  .inner-headline__title.specialty-hero-title[data-avatar] {
    font-size: clamp(1.9rem, 7.4vw, 2.2rem) !important;
  }
  .inner-headline__title[data-avatar].headline-img-before::before,
  .inner-headline__title[data-avatar].headline-img-after::after {
    float: none;
    display: block;
    width: var(--sb-avatar-width);
    height: calc(var(--sb-avatar-width) * 0.52);
    margin: 0 0 1.6rem 0;
  }
  .inner-headline__title[data-avatar].headline-img-before + .inner-headline__text {
    text-indent: 0;
  }
  .inner-headline__text {
    margin-top: 1.4rem;
  }
  .mxd-section-inner-headline.padding-headline-pre-grid {
    padding-bottom: 3.6rem;
  }
  .specialty-tags-section {
    padding-bottom: 2.8rem !important;
  }
}

/* Tablet–desktop: float with description indent */
@media only screen and (min-width: 768px) {
  .mxd-block__name.name-inner-headline {
    margin-bottom: 0.8rem;
    margin-top: 0;
  }
  .inner-headline__title[data-avatar] {
    --sb-avatar-width: 12.5rem;
    --sb-avatar-width-boost: 2.8rem;
    --sb-avatar-gap: 1.8rem;
    font-size: 4.1rem !important;
    line-height: 1.1;
  }
  .inner-headline__title[data-avatar].headline-img-before + .inner-headline__text {
    text-indent: calc(var(--sb-avatar-effective-width) + var(--sb-avatar-gap));
  }
  .mxd-section-inner-headline.padding-headline-pre-grid {
    padding-bottom: 5rem;
  }
  .specialty-tags-section {
    padding-bottom: 3.4rem !important;
  }
}
@media only screen and (min-width: 1200px) {
  .inner-headline__title[data-avatar] {
    --sb-avatar-width: 19rem;
    --sb-avatar-width-boost: 4.2rem;
    --sb-avatar-gap: 2.6rem;
    font-size: 5.4rem !important;
    line-height: 1.15;
  }
  .mxd-section-inner-headline.padding-headline-pre-grid {
    padding-bottom: 7rem;
  }
  .specialty-tags-section {
    padding-bottom: 4.6rem !important;
  }
}
@media only screen and (min-width: 1600px) {
  .inner-headline__title[data-avatar] {
    --sb-avatar-width: 21rem;
    --sb-avatar-width-boost: 4.8rem;
    --sb-avatar-gap: 3rem;
    font-size: 6rem !important;
  }
  .specialty-tags-section {
    padding-bottom: 5.4rem !important;
  }
}

/* Specialty slug page: keep hero/chips rhythm tighter than generic content blocks */
.specialty-hero-section.padding-headline-pre-grid {
  padding-bottom: 2.6rem;
}
@media only screen and (min-width: 768px) {
  .specialty-hero-section.padding-headline-pre-grid {
    padding-bottom: 3.6rem;
  }
}
@media only screen and (min-width: 1200px) {
  .specialty-hero-section.padding-headline-pre-grid {
    padding-bottom: 4.8rem;
  }
}
@media only screen and (min-width: 1600px) {
  .specialty-hero-section.padding-headline-pre-grid {
    padding-bottom: 5.8rem;
  }
}

/* Specialty page: tighten rhythm between features, note types, and FAQ */
.specialty-features-section {
  padding-bottom: 4.2rem !important;
}
.specialty-note-types-section {
  padding-bottom: 4.4rem !important;
}
.specialty-note-types-section .mxd-section-title,
.specialty-faq-section .mxd-section-title {
  margin-bottom: 2.6rem;
}
.specialty-note-type-card__title {
  font-style: italic;
}
.specialty-note-type-card__meta {
  margin-top: 0.6rem;
  font-family: var(--font-tech), var(--_font-default), monospace;
  font-size: 1.3rem;
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t-medium);
}
@media only screen and (min-width: 768px) {
  .specialty-features-section {
    padding-bottom: 5rem !important;
  }
  .specialty-note-types-section {
    padding-bottom: 5.4rem !important;
  }
  .specialty-note-types-section .mxd-section-title,
  .specialty-faq-section .mxd-section-title {
    margin-bottom: 3rem;
  }
}
@media only screen and (min-width: 1200px) {
  .specialty-features-section {
    padding-bottom: 5.6rem !important;
  }
  .specialty-note-types-section {
    padding-bottom: 6rem !important;
  }
  .specialty-note-type-card__meta {
    font-size: 1.4rem;
  }
}
@media only screen and (min-width: 1600px) {
  .specialty-features-section {
    padding-bottom: 6.2rem !important;
  }
  .specialty-note-types-section {
    padding-bottom: 6.8rem !important;
  }
}

/* Guides detail pages: align spacing/cards with specialty rhythm */
.guide-detail-content-section {
  padding-bottom: 7.2rem !important;
}
.guide-detail-toc {
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-m);
  background-color: var(--base-tint);
  padding: 1.2rem;
  margin-bottom: 2.2rem;
}
.guide-detail-toc--sticky {
  position: sticky;
  top: 15.2rem;
}
.guide-detail-toc__link {
  display: block;
  padding: 0.9rem 0.8rem;
  font: normal var(--fw-regular) 1.5rem/1.35 var(--_font-accent);
  color: var(--t-muted);
  border-radius: 0.8rem;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.no-touch .guide-detail-toc__link:hover {
  color: var(--t-bright);
  background-color: var(--base);
}
.guide-detail-section--spaced {
  margin-top: 4.2rem;
}
.guide-detail-section__heading {
  font-size: 2.8rem;
  line-height: 1.22;
  scroll-margin-top: 12rem;
}
.guide-detail-section__lead-card {
  margin-top: 1.4rem;
  border: 1px solid var(--st-muted);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.guide-detail-section__lead-card p {
  margin: 0;
}
.guide-detail-section__paragraph {
  margin-top: 1.4rem;
}
.guide-detail-blogs {
  margin-top: 2.6rem;
}
/* Guides blog strip: tighter rhythm and stable thumbnails */
.guide-detail-blogs .mxd-section.padding-blog {
  padding-bottom: 7.2rem;
}
.guide-detail-blogs .mxd-section-title.pre-grid {
  margin-bottom: 2.8rem;
}
.guide-detail-blogs .mxd-blog-preview .row {
  row-gap: 2.6rem;
}
.guide-detail-blogs .mxd-blog-preview__item {
  padding-bottom: 0;
}
.guide-detail-blogs .mxd-blog-preview__media {
  height: 280px;
  margin-bottom: 1.6rem;
  border-radius: var(--_radius-m);
}
.guide-detail-blogs .mxd-blog-preview__data a {
  display: block;
}
.guide-detail-blogs .mxd-blog-preview__media--fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    140deg,
    rgba(217, 21, 72, 0.14),
    rgba(20, 184, 166, 0.12) 55%,
    rgba(0, 0, 0, 0.06)
  );
  pointer-events: none;
}
@media only screen and (max-width: 1199px) {
  .guide-detail-toc {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding: 0.8rem;
    scrollbar-width: thin;
  }
  .guide-detail-toc__link {
    white-space: nowrap;
    border: 1px solid var(--st-muted);
    background-color: var(--base);
    border-radius: 999px;
    padding: 0.8rem 1.3rem;
    font-size: 1.35rem;
  }
  .guide-detail-section__heading {
    font-size: 2.5rem;
  }
  .guide-detail-toc--sticky {
    position: static;
    top: auto;
  }
  .guide-detail-blogs .mxd-blog-preview__media {
    height: 220px;
  }
  .guide-detail-blogs .mxd-blog-preview__data {
    padding: 0 1.2rem;
  }
  .guide-detail-blogs .mxd-blog-preview__data a {
    font-size: 1.95rem;
    line-height: 1.28;
    word-spacing: 0.03em;
  }
}
@media only screen and (min-width: 768px) {
  .guide-detail-content-section {
    padding-bottom: 8rem !important;
  }
  .guide-detail-section--spaced {
    margin-top: 4.8rem;
  }
  .guide-detail-section__heading {
    font-size: 3rem;
  }
  .guide-detail-blogs .mxd-blog-preview__media {
    height: 260px;
  }
  .guide-detail-blogs .mxd-blog-preview__data {
    padding: 0 2rem;
  }
  .guide-detail-blogs .mxd-blog-preview__data a {
    font-size: 2.1rem;
  }
}
@media only screen and (min-width: 1200px) {
  .guide-detail-content-section {
    padding-bottom: 8.8rem !important;
  }
  .guide-detail-toc {
    padding: 1.4rem;
    max-height: calc(100vh - 16rem);
    overflow-y: auto;
    margin-right: 2.2rem;
    margin-top: 0.8rem;
  }
  .guide-detail-toc__link {
    font-size: 1.6rem;
    padding: 1rem;
  }
  .guide-detail-section--spaced {
    margin-top: 5.4rem;
  }
  .guide-detail-section__lead-card {
    margin-top: 1.6rem;
  }
  .guide-detail-blogs {
    margin-top: 3.2rem;
  }
  .guide-detail-blogs .mxd-blog-preview .row {
    row-gap: 0;
  }
  .guide-detail-blogs .mxd-blog-preview__media {
    height: 300px;
  }
}
@media only screen and (min-width: 1600px) {
  .guide-detail-content-section {
    padding-bottom: 10rem !important;
  }
  .guide-detail-blogs .mxd-blog-preview__media {
    height: 340px;
  }
}

/* ---- Inner-page hero: tighten h1-to-subtitle gap ---- */
.inner-headline__text { margin-top: 2rem; }
@media only screen and (min-width: 768px) {
  .inner-headline__text { margin-top: 2.8rem; }
}
@media only screen and (min-width: 1200px) {
  .inner-headline__text { margin-top: 2.6rem; }
}
@media only screen and (min-width: 1600px) {
  .inner-headline__text { margin-top: 3rem; }
}

/* ---- Inner-page hero: reduce section top + bottom padding ---- */
.mxd-section-inner-headline { padding-top: 10rem; }
@media only screen and (min-width: 768px) {
  .mxd-section-inner-headline { padding-top: 11rem; }
}
@media only screen and (min-width: 1200px) {
  .mxd-section-inner-headline { padding-top: 10rem; }
}
@media only screen and (min-width: 1600px) {
  .mxd-section-inner-headline { padding-top: 12rem; }
}

.mxd-section-inner-headline.padding-headline-pre-grid { padding-bottom: 6rem; }
.mxd-section-inner-headline.padding-headline-pre-block { padding-bottom: 8rem; }
@media only screen and (min-width: 768px) {
  .mxd-section-inner-headline.padding-headline-pre-grid { padding-bottom: 7rem; }
  .mxd-section-inner-headline.padding-headline-pre-block { padding-bottom: 9rem; }
}
@media only screen and (min-width: 1200px) {
  .mxd-section-inner-headline.padding-headline-pre-grid { padding-bottom: 7rem; }
  .mxd-section-inner-headline.padding-headline-pre-block { padding-bottom: 9rem; }
}
@media only screen and (min-width: 1600px) {
  .mxd-section-inner-headline.padding-headline-pre-grid { padding-bottom: 9rem; }
  .mxd-section-inner-headline.padding-headline-pre-block { padding-bottom: 11rem; }
}

/* ---- Inner-page hero: re-align left column label ---- */
@media only screen and (min-width: 1200px) {
  .mxd-block__name.name-inner-headline { margin-top: 0.6rem; }
}
@media only screen and (min-width: 1600px) {
  .mxd-block__name.name-inner-headline { margin-top: 0.8rem; }
}

/* ---- Inner-page hero: reduce subtitle text size ---- */
p.t-large { font-size: 2.2rem; }
@media only screen and (min-width: 1600px) {
  p.t-large { font-size: 2.6rem; }
}

/* ---- Section titles: tighten spacing to match reduced heading scale ---- */
.mxd-section-title {
  margin-bottom: 4rem;
  gap: 2.4rem;
}
.mxd-section-title.h2-only { margin-bottom: 3.6rem; }
.mxd-section-title.no-controls { margin-bottom: 3.6rem; }
.mxd-section-title.pre-grid { margin-bottom: 2.8rem; }
.mxd-section-title.pre-block { margin-bottom: 3rem; }
@media only screen and (min-width: 768px) {
  .mxd-section-title { margin-bottom: 4.6rem; }
  .mxd-section-title.h2-only { margin-bottom: 4rem; }
  .mxd-section-title.no-controls { margin-bottom: 4rem; }
  .mxd-section-title.pre-grid { margin-bottom: 3.2rem; }
}
@media only screen and (min-width: 1200px) {
  .mxd-section-title { margin-bottom: 4.2rem; }
  .mxd-section-title.no-controls { margin-bottom: 4.2rem; }
}
@media only screen and (min-width: 1600px) {
  .mxd-section-title { margin-bottom: 4.2rem; gap: 2.8rem; }
}

.mxd-section-title__descr { margin-top: 1.4rem; }
@media only screen and (min-width: 768px) {
  .mxd-section-title__descr { margin-top: 1.2rem; }
}
@media only screen and (min-width: 1200px) {
  .mxd-section-title__descr { margin-top: 1.8rem; }
}
@media only screen and (min-width: 1600px) {
  .mxd-section-title__descr { margin-top: 1.6rem; }
}

/* ---- Reduce section vertical spacing (~25-30%) ---- */
.mxd-section.padding-default { padding-bottom: var(--layout-space-default); }
.mxd-section.padding-pre-grid { padding-bottom: var(--layout-space-pre-grid); }
.mxd-section.padding-pre-title { padding-bottom: var(--layout-space-pre-title); }

/* ---- Prose max-width for readability ---- */
.mxd-article__content,
.ghost-content {
  max-width: 72ch;
}

/* =============================================
   Ghost CMS Content Overrides
   The Rayo theme sets .mxd-article__content to
   display:flex; gap:6rem which creates huge spacing
   between every Ghost HTML element. We override that
   to use normal block flow, then let ghost-cards.min.css
   handle kg-* card styling.
   ============================================= */

.ghost-content {
  display: block !important;
  gap: 0 !important;
  line-height: 1.75;
  word-break: break-word;
}

.ghost-content h2 {
  font-size: 2.6rem;
  margin: 2.8rem 0 0.8rem;
}

.ghost-content h3 {
  font-size: 2rem;
  margin: 2rem 0 0.6rem;
}

.ghost-content h4,
.ghost-content h5 {
  font-size: 1.7rem;
  margin: 1.6rem 0 0.4rem;
}

.ghost-content p {
  margin: 0 0 1.4rem;
}

.ghost-content a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.ghost-content strong {
  font-weight: 600;
}

.ghost-content blockquote {
  border-left: 3px solid var(--text-bright, #000);
  padding-left: 1.8rem;
  margin: 1.6rem 0;
  font-style: italic;
}

.ghost-content ul,
.ghost-content ol {
  padding-left: 2.2rem;
  margin: 0 0 1.4rem;
}

.ghost-content li {
  margin-bottom: 0.3rem;
}

.ghost-content li > ul,
.ghost-content li > ol {
  margin-top: 0.3rem;
  margin-bottom: 0;
}

.ghost-content hr {
  border: none;
  border-top: 1px solid var(--base-tint, #eee);
  margin: 2rem 0;
}

.ghost-content pre {
  background: var(--base-tint, #f5f5f5);
  border-radius: 0.6rem;
  padding: 1.6rem;
  overflow-x: auto;
  margin: 1.4rem 0;
  font-size: 1.4rem;
  line-height: 1.5;
}

.ghost-content code {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.88em;
}

.ghost-content :not(pre) > code {
  background: var(--base-tint, #f5f5f5);
  padding: 0.15em 0.35em;
  border-radius: 0.3rem;
}

.ghost-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0;
}

.ghost-content th,
.ghost-content td {
  border: 1px solid var(--base-tint, #eee);
  padding: 0.8rem 1.2rem;
  text-align: left;
}

.ghost-content th {
  font-weight: 600;
  background: var(--base-tint, #f5f5f5);
}

/* ---- Ghost card overrides (on top of cards.min.css) ---- */

.ghost-content figure {
  margin: 1.6rem 0;
}

.ghost-content figure img {
  border-radius: 0.6rem;
  height: auto;
}

.ghost-content figcaption {
  font-size: 1.3rem;
  opacity: 0.65;
}

.ghost-content .kg-image-card,
.ghost-content .kg-gallery-card,
.ghost-content .kg-embed-card,
.ghost-content .kg-code-card,
.ghost-content .kg-video-card {
  margin: 1.6rem 0;
}

/* Callout card color overrides */
.ghost-content .kg-callout-card {
  border-radius: 0.6rem;
}

.ghost-content .kg-callout-card-blue {
  background: #e8f0fe;
  color: #1a3a5c;
}

.ghost-content .kg-callout-card-green {
  background: #e6f4ea;
  color: #1e4620;
}

.ghost-content .kg-callout-card-yellow {
  background: #fef7e0;
  color: #594300;
}

.ghost-content .kg-callout-card-red {
  background: #fce8e6;
  color: #5f2120;
}

.ghost-content .kg-callout-card-pink {
  background: #fce4ec;
  color: #6a1b3d;
}

.ghost-content .kg-callout-card-purple {
  background: #f3e8fd;
  color: #3b1f6e;
}

.ghost-content .kg-callout-card a {
  font-weight: 600;
}

/* Button card overrides */
.ghost-content .kg-btn-accent {
  background: var(--text-bright, #000) !important;
  color: var(--base, #fff) !important;
}

.ghost-content .kg-btn {
  border-radius: 0.6rem;
  text-decoration: none;
}

.ghost-content .kg-btn:hover {
  opacity: 0.85;
}

/* Video card border radius */
.ghost-content .kg-video-container {
  border-radius: 0.6rem;
  overflow: hidden;
}

/* Width overrides for wide/full images */
.ghost-content .kg-width-wide {
  margin-left: -8%;
  margin-right: -8%;
  max-width: none;
}

.ghost-content .kg-width-full {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  max-width: none;
}

/* ---- Blog preview image wrapper (Blogs.tsx homepage cards) ---- */

.mxd-blog-preview__image-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
}

@media only screen and (max-width: 767px) {
  .ghost-content .kg-width-wide {
    margin-left: 0;
    margin-right: 0;
  }
}

/* ---- Footer socials: pixelarticon + VT323 overrides ---- */

.footer-socials__item {
  display: flex !important;
  align-items: center;
  gap: 1rem;
}

.footer-socials__pixel-icon {
  width: 18px;
  height: 18px;
  image-rendering: pixelated;
  flex-shrink: 0;
}

.footer-socials__link--vt323 {
  font-family: var(--font-vt323), monospace !important;
}

/* ---- Footer 1 (demo footer) Scribeberry overrides ---- */

.mxd-demo-footer .mxd-block {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
@media only screen and (min-width: 768px) {
  .mxd-demo-footer .mxd-block {
    padding-left: 4.5rem;
    padding-right: 4.5rem;
  }
}
@media only screen and (min-width: 1600px) {
  .mxd-demo-footer .mxd-block {
    padding-left: 7.5rem;
    padding-right: 7.5rem;
  }
}

.mxd-demo-footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.mxd-demo-footer__contact-list a {
  text-decoration: none;
  transition: opacity 0.2s;
}
.mxd-demo-footer__contact-list a:hover {
  opacity: 0.7;
}

.footer-socials--compact {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  list-style: none;
  padding: 0;
  margin: 0;
}

.mxd-demo-footer__copyright {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1em;
  padding-top: 2em;
}

.mxd-demo-footer__copyright .footer-blocks__links {
  display: flex;
  align-items: center;
  gap: 1.5em;
}

/* ---- Ask AI bar (inside footer copyright) ---- */

.ask-ai-bar {
  gap: 0.8em;
}

.ask-ai-bar__label {
  font-size: 1.2rem;
  opacity: 0.55;
  white-space: nowrap;
}

.ask-ai-bar__btn {
  display: inline-flex;
  color: inherit;
  opacity: 0.45;
  transition: opacity 0.2s, color 0.2s, transform 0.2s;
}

.ask-ai-bar__btn:hover {
  opacity: 1;
  color: var(--accent);
  transform: scale(1.12);
}

.ask-ai-bar__btn:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.ask-ai-bar__btn svg {
  width: 16px;
  height: 16px;
}

/* ---- Hero video play button ---- */

.mxd-hero-01__video-btn {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  padding: 0;
}

.hero-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  border: 3px solid #fff;
  background-color: #c41818;
  box-shadow: 4px 4px 0 0 #000;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hero-play-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 0 #000;
}

.hero-play-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 #000;
}

.hero-play-btn__icon {
  width: 2.2rem;
  height: 2.2rem;
  image-rendering: pixelated;
  filter: invert(1);
  margin-left: 0.3rem;
}

/* ---- Hero socials: pixelarticon sizing ---- */

.mxd-hero-01__data-socials ul li img {
  width: 1.5rem;
  height: 1.5rem;
  image-rendering: pixelated;
}

@media only screen and (min-width: 1200px) {
  .mxd-hero-01__data-socials ul li img {
    width: 1.9rem;
    height: 1.9rem;
  }
}

/* =============================================
   Hero V2 — Trust-first product hero
   ============================================= */

.hero-v2 {
  overflow: visible;
}

.hero-v2__container {
  padding-top: 6rem;
  padding-bottom: 3rem;
}

@media only screen and (min-width: 1200px) {
  .hero-v2__container {
    padding-top: 7rem;
  }
}
@media only screen and (min-width: 1600px) {
  .hero-v2__container {
    padding-inline: 6rem;
  }
}

/* ---- Trust badges (below video) ---- */

.hero-v2__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1rem;
}

.hero-v2__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--st-muted);
  border-radius: 10rem;
  font-family: var(--font-tech);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-muted);
  white-space: nowrap;
}

.hero-v2__badge-icon {
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
  opacity: 0.4;
  flex-shrink: 0;
}

/* ---- Grid ---- */

.hero-v2__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.6rem;
  align-items: center;
}

@media only screen and (min-width: 1200px) {
  .hero-v2__grid {
    grid-template-columns: 5fr 8fr;
    gap: 4.5rem;
    align-items: center;
  }
  .hero-v2__visual {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-v2__grid {
    grid-template-columns: 4fr 8fr;
    gap: 6rem;
  }
}

/* ---- Content column ---- */

.hero-v2__eyebrow {
  font-family: var(--font-tech);
  font-size: 1.15rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.6rem;
  font-weight: 500;
}

.hero-v2__headline {
  font-family: var(--_font-default);
  font-size: 4.4rem;
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--t-bright);
  margin-bottom: 2rem;
}

.hero-v2__headline-accent {
  color: var(--accent);
}

@media only screen and (min-width: 768px) {
  .hero-v2__headline {
    font-size: 5.6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .hero-v2__headline {
    font-size: 6.4rem;
    margin-bottom: 2.8rem;
  }
}

@media only screen and (min-width: 1600px) {
  .hero-v2__headline {
    font-size: 7.2rem;
  }
}

.hero-v2__subhead {
  font-size: 1.55rem;
  line-height: 1.65;
  color: var(--t-muted);
  max-width: 52ch;
  margin-bottom: 3.2rem;
}

@media only screen and (min-width: 1200px) {
  .hero-v2__subhead {
    font-size: 1.7rem;
  }
}

/* ---- CTAs ---- */

.hero-v2__ctas {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
.hero-v2__ctas .btn {
  font-family: var(--_font-accent);
  font-weight: var(--fw-medium);
}

/* ---- Visual column ---- */

.hero-v2__visual {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.hero-v2__frame {
  position: relative;
  border-radius: var(--_radius-m);
  overflow: hidden;
  border: 3px solid var(--base-opp);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    0 24px 48px rgba(0, 0, 0, 0.1);
}

.hero-v2__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--base-shade);
}

.hero-v2__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* ---- Header: "Try It" button with shimmer ---- */

.header-try-btn {
  position: relative;
  overflow: hidden;
  font-family: var(--_font-default);
}
.header-try-btn__text--full {
  display: none;
}
@media only screen and (min-width: 768px) {
  .header-try-btn__text--short {
    display: none !important;
  }
  .header-try-btn__text--full {
    display: inline !important;
    height: auto;
    line-height: normal;
  }
}
.header-try-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  animation: headerTryShimmer 3s ease-in-out 2s infinite;
  pointer-events: none;
}
@keyframes headerTryShimmer {
  0% { left: -100%; }
  40% { left: 150%; }
  100% { left: 150%; }
}

/* ---- Header: "Try It" mic icon brand color ---- */

.header-try-btn__mic {
  filter: invert(1);
}

/* ---- Nav: bold "Chat with us" link ---- */

.header-nav__link--bold {
  font-family: var(--_font-default);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--t-bright);
  background: none;
  border: none;
  padding: 0 0 4px;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.02em;
  transition: color 0.2s ease;
  appearance: none;
  -webkit-appearance: none;
}
.no-touch .header-nav__link--bold:hover {
  color: var(--accent);
}

/* ---- Hero: social proof ---- */

.hero-v2__social-proof {
  display: inline-flex;
  text-decoration: none;
  color: inherit;
  margin-top: 2.8rem;
  transition: opacity 0.2s ease;
}
.no-touch .hero-v2__social-proof:hover {
  opacity: 0.8;
}
.hero-v2__social-proof-link {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1.5px;
  color: var(--t-bright);
  font-weight: 600;
}

/* Hero trusted-by avatars: fill circle, face at top, outline matching underline */
.hero-v2__social-proof .hero-v2__avatar {
  border: 1.5px solid #000;
  box-sizing: border-box;
}
.hero-v2__social-proof .hero-v2__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

/* =============================================
   Cinematic hero — Tandem-style full-bleed video
   ============================================= */

/* Header — Tandem: transparent + light nav at top, solid white bar on scroll */
html.home-cinematic .mxd-header,
html.home-cinematic .mxd-header__floating-controls {
  z-index: 200;
}

/* At the very top over the hero video — white nav, no frosted pill. Once the
   user scrolls (home-cinematic-scrolled), the nav reverts to the site default
   frosted-pill + hide/show behavior. */
html.home-cinematic:not(.home-cinematic-scrolled) .mxd-header .header-nav__link {
  color: #fff;
  font-weight: 500;
}

html.home-cinematic:not(.home-cinematic-scrolled) .mxd-header .header-nav__link--bold {
  color: #fff;
  font-weight: 700;
}

html.home-cinematic:not(.home-cinematic-scrolled) .mxd-header .header-nav__chevron {
  color: rgba(255, 255, 255, 0.65);
}

@media only screen and (min-width: 1200px) {
  html.home-cinematic:not(.home-cinematic-scrolled) .mxd-nav__contain .hamburger__line {
    background: #fff;
    transition: background 0.2s ease;
  }
}

html.home-cinematic:not(.home-cinematic-scrolled) .mxd-header__floating-controls .btn-opposite {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.home-cinematic:not(.home-cinematic-scrolled)
  .mxd-header__floating-controls
  .btn-opposite
  .btn-pixel-icon {
  filter: invert(1);
}

/* Once scrolled, the homepage nav uses the site default frosted-pill +
   hide/show behavior. Only the hamburger color needs to switch back to dark. */
@media only screen and (min-width: 1200px) {
  html.home-cinematic.home-cinematic-scrolled .mxd-nav__contain .hamburger__line {
    background: var(--t-bright);
  }
}

.hero-cinematic {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.hero-cinematic__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-cinematic__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Inline autoplay clips — hide native iOS/Android controls */
.autoplay-video {
  pointer-events: none;
  object-fit: cover;
  -webkit-touch-callout: none;
}

/* iOS shows a large play glyph on paused inline video — hide via opacity once playing */
.autoplay-video:not([data-playing="true"]) {
  background: transparent;
}

.autoplay-video::-webkit-media-controls,
.hero-cinematic__video::-webkit-media-controls {
  display: none !important;
}

.autoplay-video::-webkit-media-controls-enclosure,
.hero-cinematic__video::-webkit-media-controls-enclosure {
  display: none !important;
}

.autoplay-video::-webkit-media-controls-panel,
.hero-cinematic__video::-webkit-media-controls-panel {
  display: none !important;
}

.autoplay-video::-webkit-media-controls-play-button,
.autoplay-video::-webkit-media-controls-start-playback-button,
.hero-cinematic__video::-webkit-media-controls-play-button,
.hero-cinematic__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

.product-demo__frame.is-playing .product-demo__play,
.feature-videos__frame.is-playing .feature-videos__play {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.hero-cinematic__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(6, 8, 12, 0.26) 0%,
      rgba(6, 8, 12, 0.16) 30%,
      rgba(6, 8, 12, 0.54) 70%,
      rgba(6, 8, 12, 0.96) 100%
    ),
    rgba(6, 8, 12, 0.14);
  pointer-events: none;
}

.hero-cinematic__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  padding-bottom: clamp(2.4rem, 4vh, 3.6rem);
  padding-top: clamp(10rem, 18vh, 14rem);
  color: #fff;
}

.hero-cinematic__headline {
  font-family: var(--font-petrona), "Petrona", var(--_font-accent);
  font-size: clamp(2.8rem, 4.8vw, 5.4rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: 0 0 1.4rem;
  color: #fff;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.hero-cinematic__headline-line {
  display: inline;
}

.hero-cinematic__headline-nowrap {
  white-space: nowrap;
}

.hero-cinematic__subhead {
  font-family: var(--_font-default);
  font-size: clamp(1.3rem, 1.55vw, 1.5rem);
  font-weight: 400;
  font-style: normal;
  line-height: 1.65;
  letter-spacing: -0.012em;
  max-width: 40ch;
  margin: 0 0 2.2rem;
  color: rgba(255, 255, 255, 0.92);
  -webkit-font-smoothing: antialiased;
}

.hero-cinematic__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem 2rem;
  margin-bottom: 3rem;
}

.hero-cinematic__cta-primary {
  font-family: var(--_font-default);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hero-cinematic__demo-link {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--_font-default);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.24em;
  text-decoration-thickness: 1px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.no-touch .hero-cinematic__demo-link:hover {
  opacity: 0.82;
}

.hero-cinematic__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem 2.4rem;
}

.hero-cinematic__social {
  display: inline-flex;
  text-decoration: none;
  color: inherit;
}

.hero-cinematic__social .mxd-avatars-group__text p,
.hero-cinematic__social .mxd-avatars-group__text a {
  font-family: var(--_font-default);
  font-size: 1.35rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.88);
}

.hero-cinematic__social-link {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.hero-cinematic__avatar {
  border: 1.5px solid rgba(255, 255, 255, 0.5);
}

.hero-cinematic__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.hero-cinematic__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero-cinematic__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 10rem;
  font-family: var(--font-tech);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-bright);
  white-space: nowrap;
  background: #fff;
}

.hero-cinematic__badge-icon {
  width: 14px;
  height: 14px;
  image-rendering: pixelated;
  opacity: 0.55;
  flex-shrink: 0;
  filter: none;
}

.hero-cinematic__badge-text--short {
  display: none;
}

@media only screen and (max-width: 767px) {
  .hero-cinematic__badges {
    flex-wrap: nowrap;
    gap: 0.35rem;
    max-width: 100%;
  }

  .hero-cinematic__badge {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    padding: 0.22rem 0.5rem;
    gap: 0.3rem;
  }

  .hero-cinematic__badge-icon {
    width: 10px;
    height: 10px;
  }

  .hero-cinematic__badge-text--full {
    display: none;
  }

  .hero-cinematic__badge-text--short {
    display: inline;
  }
}

/* Tandem-style partner strip at hero bottom */
.hero-cinematic__partners {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.2rem 2rem;
  width: 100%;
  padding: 1.1rem 0;
  /* Matches the partner row section below the hero. */
  background: var(--base);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.hero-cinematic__partners-marquee {
  min-width: 0;
  overflow: hidden;
}

/* Height-normalized logos: every logo is the same height with natural width.
   Narrow logos get more trailing gap so they don't look cramped; wider logos
   also get extra gap (see --narrow/--wide/--xwide). */
.hero-cinematic__partner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 8rem;
  margin-right: 4.4rem;
}

.hero-cinematic__partner--narrow {
  margin-right: 7.2rem;
}

.hero-cinematic__partner--wide {
  margin-right: 5.6rem;
}

.hero-cinematic__partner--xwide {
  margin-right: 6.8rem;
}

.hero-cinematic__partner img {
  display: block;
  height: 3.6rem;
  width: auto;
  opacity: 0.85;
  filter: grayscale(1);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

/* Logos whose artwork has little internal padding read too big at the shared
   height, so they render a touch shorter. */
.hero-cinematic__partner--sm img {
  height: 3rem;
}

.no-touch .hero-cinematic__partner:hover img {
  opacity: 1;
  filter: grayscale(0);
}

.hero-cinematic__partners-link {
  flex-shrink: 0;
  /* Extra right clearance so the fixed Chatwoot launcher (~64px bubble +
     20px offset, bottom-right) never covers the pill while the strip sits
     at the bottom of the 100svh hero. */
  margin-right: calc(clamp(2.4rem, 5vw, 6rem) + 8.4rem);
  padding: 0.55rem 1.25rem;
  border-radius: 10rem;
  font-family: var(--_font-default);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  background: var(--base-opp);
  transition: opacity 0.2s ease;
}

.no-touch .hero-cinematic__partners-link:hover {
  opacity: 0.82;
  color: #fff;
}

@media only screen and (max-width: 767px) {
  .hero-cinematic__partners {
    display: block;
    padding: 0.85rem 0 1rem;
  }

  /* The hero's "Trusted by 30,000+ providers" block links to /testimonials
     already, and the fixed chat launcher covers this corner on phones, so
     the pill is desktop/tablet-only. Logos run edge to edge instead. */
  .hero-cinematic__partners-link {
    display: none;
  }

  .hero-cinematic__partner {
    height: 6rem;
    margin-right: 3.2rem;
  }

  .hero-cinematic__partner--narrow {
    margin-right: 5.4rem;
  }

  .hero-cinematic__partner--wide {
    margin-right: 4.2rem;
  }

  .hero-cinematic__partner--xwide {
    margin-right: 5rem;
  }

  .hero-cinematic__partner img {
    height: 2.8rem;
  }

  .hero-cinematic__partner--sm img {
    height: 2.3rem;
  }
}

/* Compact partner strip variant. Not currently rendered: the homepage keeps all
   partner logos in the hero strip (see HeroPartnerStrip). */
.partners-home {
  padding: clamp(2.4rem, 4vw, 3.6rem) 0 clamp(2rem, 3vw, 3rem);
  background: var(--base);
  border-bottom: 1px solid var(--st-muted);
}

/* Smaller than the standalone partners section, but still large enough to read. */
.partners-home .marquee__item.item-partners {
  width: clamp(180px, 20vw, 240px);
  height: clamp(84px, 9vw, 110px);
}

/* Vendor item-partners paints a rounded tinted card via ::before. */
.partners-home .marquee__item.item-partners::before {
  display: none;
}

.partners-home .marquee__item.item-partners img {
  max-height: 4.8rem;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
  filter: grayscale(1);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.no-touch .partners-home .marquee__item.item-partners:hover img {
  opacity: 1;
  filter: grayscale(0);
}

/* Feature videos — /product/features */
.feature-videos {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(4rem, 7vw, 6rem);
  background: var(--base);
  border-bottom: 1px solid var(--stroke-elements);
}

.feature-videos__header {
  max-width: 52ch;
  margin-bottom: clamp(2.4rem, 4vw, 3.6rem);
}

.feature-videos__title {
  font-family: var(--_font-accent);
  font-size: clamp(2.8rem, 4vw, 3.8rem);
  font-weight: 500;
  font-style: normal;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  color: var(--t-bright);
}

.feature-videos__lead {
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--t-muted);
  margin: 0;
}

.feature-videos__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3rem);
}

@media only screen and (min-width: 992px) {
  .feature-videos__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.feature-videos__card {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.feature-videos__frame {
  position: relative;
  border-radius: var(--_radius-m);
  overflow: hidden;
  background: var(--base-shade);
  aspect-ratio: 16 / 9;
}

.feature-videos__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature-videos__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 40%,
    rgba(0, 0, 0, 0.35) 100%
  );
  pointer-events: none;
}

.feature-videos__play-btn {
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: 5.6rem;
  height: 5.6rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.no-touch .feature-videos__play-btn:hover {
  background: #fff;
  transform: scale(1.04);
}

.feature-videos__card-title {
  font-family: var(--_font-accent);
  font-size: clamp(2rem, 2.8vw, 2.6rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 0.6rem;
  color: var(--t-bright);
}

.feature-videos__card-lead {
  font-size: 1.45rem;
  line-height: 1.55;
  color: var(--t-muted);
  margin: 0;
}

.feature-videos__link {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.no-touch .feature-videos__link:hover {
  opacity: 0.82;
}

/* Product demo — below cinematic hero */
.product-demo {
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(5rem, 9vw, 8rem);
  background: var(--base);
}

.product-demo__inner {
  display: grid;
  gap: 2.8rem;
}

@media only screen and (min-width: 992px) {
  .product-demo__inner {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
    align-items: center;
    gap: 4rem;
  }
}

.product-demo__title {
  font-family: var(--_font-accent);
  font-size: clamp(3rem, 4.5vw, 4.4rem);
  font-weight: 500;
  font-style: normal;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 1.2rem;
  color: var(--t-bright);
}

.product-demo__lead {
  font-size: 1.55rem;
  line-height: 1.6;
  color: var(--t-muted);
  margin: 0;
  max-width: 42ch;
}

.product-demo__frame {
  position: relative;
  border-radius: var(--_radius-m);
  overflow: hidden;
  background: var(--base-shade);
  aspect-ratio: 16 / 9;
}

.product-demo__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-demo__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.08);
}

.product-demo__play-btn {
  display: grid;
  place-items: center;
  width: 5.6rem;
  height: 5.6rem;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.no-touch .product-demo__play-btn:hover {
  background: #fff;
  transform: scale(1.04);
}

.product-demo__play-btn .hero-play-btn__icon {
  width: 2rem;
  height: 2rem;
}

/* Human moments — interspersed footage */
.human-moment {
  padding: clamp(3.6rem, 7vw, 6rem) 0;
  background: var(--base);
}

.human-moment__inner {
  display: grid;
  gap: 2.4rem;
  align-items: center;
}

@media only screen and (min-width: 992px) {
  .human-moment--split-left .human-moment__inner,
  .human-moment--split-right .human-moment__inner {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }

  .human-moment--split-right .human-moment__media {
    order: 2;
  }
}

.human-moment--wide .human-moment__inner {
  gap: 2rem;
}

.human-moment__media {
  position: relative;
  border-radius: var(--_radius-m);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--base-shade);
}

.human-moment--wide .human-moment__media {
  aspect-ratio: 21 / 9;
  min-height: clamp(220px, 42vh, 480px);
  border-radius: 0;
  margin-inline: calc(-1 * var(--mxd-container-padding, 3rem));
  width: calc(100% + 2 * var(--mxd-container-padding, 3rem));
  max-width: 100vw;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

@media only screen and (min-width: 768px) {
  .human-moment--wide .human-moment__media {
    margin-inline: calc(-1 * 6rem);
    width: calc(100% + 12rem);
  }
}

.human-moment__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.human-moment__headline {
  font-family: var(--_font-accent);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(2.6rem, 4vw, 3.6rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  color: var(--t-bright);
}

.human-moment__caption {
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--t-muted);
  margin: 0;
  max-width: 44ch;
}

.human-moment--wide .human-moment__copy {
  max-width: 62ch;
}

/* ---- Hero Demo Orb ---- */

.hero-demo-orb {
  position: absolute;
  top: 36%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

@media only screen and (min-width: 992px) {
  .hero-demo-orb {
    top: 30%;
  }
}

.hero-demo-orb__inner {
  width: clamp(160px, 26vh, 230px);
  height: clamp(160px, 26vh, 230px);
}

@media only screen and (min-width: 992px) {
  .hero-demo-orb__inner {
    width: clamp(120px, 18vh, 160px);
    height: clamp(120px, 18vh, 160px);
  }
}

@media only screen and (min-width: 1600px) {
  .hero-demo-orb__inner {
    width: clamp(140px, 20vh, 190px);
    height: clamp(140px, 20vh, 190px);
  }
}

/* ---- Hero Orb Pulse Rings ---- */

.hero-demo-orb__pulse {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1.5px solid rgba(217, 21, 72, 0.18);
  animation: heroOrbPulse 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}

@keyframes heroOrbPulse {
  0% { transform: scale(1); opacity: 0.6; }
  70% { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* ---- Inline Hero Dictation Card ---- */

@property --glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.hero-demo-orb--hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) scale(0.8);
  transition: opacity 250ms ease-out, visibility 250ms ease-out, transform 250ms ease-out !important;
}

.hero-dictation-panel {
  position: absolute;
  top: clamp(3.8rem, 6.8vh, 5.1rem);
  left: 50%;
  width: min(97vw, 820px);
  bottom: clamp(8.4rem, 16vh, 11.6rem);
  min-height: 280px;
  border-radius: var(--_radius-m);
  border: 2px solid #000;
  background: #fff;
  box-shadow: 6px 6px 0 0 #000;
  overflow: hidden;
  z-index: 20;
  outline: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) scaleY(0.96);
  transition:
    opacity 380ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 380ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 380ms;
  will-change: transform, opacity;
}

.hero-dictation-panel--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) scaleY(1);
  border-color: #000;
  box-shadow: 6px 6px 0 0 #000;
}

@media only screen and (min-width: 768px) {
  .hero-dictation-panel {
    top: clamp(4.1rem, 7.2vh, 5.4rem);
    width: min(94vw, 900px);
    bottom: clamp(9rem, 17vh, 12.2rem);
  }
}

@media only screen and (min-width: 992px) {
  .hero-dictation-panel {
    top: clamp(4.2rem, 7.4vh, 5.6rem);
    width: min(92vw, 980px);
    bottom: clamp(9.6rem, 17.6vh, 13rem);
  }
}

@media only screen and (min-width: 1400px) {
  .hero-dictation-panel {
    width: min(88vw, 1040px);
    bottom: clamp(10rem, 18vh, 13.6rem);
  }
}

.hero-dictation-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(0, 0, 0, 0.01) 36%,
    rgba(255, 255, 255, 0.6) 49%,
    rgba(0, 0, 0, 0.01) 62%,
    transparent 100%
  );
  transform: translateX(-120%);
  z-index: 2;
}

.hero-dictation-panel--visible::before {
  animation: heroCardShimmer 700ms ease-out 80ms forwards;
}

.mxd-hero-03__headline--demo-expanded {
  transform: translateX(-20%) translateY(5rem) scale(0.34) !important;
  opacity: 0.1;
}

@keyframes heroGlowCycle {
  from { --glow-angle: 0deg; }
  to { --glow-angle: 360deg; }
}

@keyframes heroCardShimmer {
  0% {
    transform: translateX(-120%);
    opacity: 0.7;
  }
  100% {
    transform: translateX(130%);
    opacity: 0;
  }
}

@media only screen and (max-width: 767px) {
  .hero-dictation-panel {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-dictation-panel,
  .hero-dictation-panel--visible,
  .hero-demo-orb--hidden {
    transition: none !important;
    animation: none !important;
  }

  .hero-dictation-panel--visible {
    box-shadow: 6px 6px 0 0 #000;
    border-color: #000;
  }

  .hero-dictation-panel::before {
    animation: none !important;
    transform: none;
    opacity: 0;
  }

  .hero-demo-orb__pulse {
    animation: none !important;
    opacity: 0;
  }

  .mxd-hero-03__headline,
  .mxd-hero-03__headline--demo-expanded {
    transition: none !important;
  }
}

/* ---- Home FAQ (condensed) ---- */

.home-faq {
  margin-top: 6rem;
}

@media only screen and (min-width: 1200px) {
  .home-faq {
    margin-top: 7.2rem;
  }
}

@media only screen and (min-width: 1200px) {
  .home-faq .mxd-accordion__item:first-child .mxd-accordion__title {
    padding-top: 1.5rem;
  }
}

.home-faq__controls {
  margin-top: 2.4rem;
  display: flex;
  justify-content: flex-end;
}

/* =============================================
   Sitewide CTA — static layered gradients only (no animation).
   Non-essential motion is omitted so users do not need to disable
   animation (see WCAG 2.2 Understanding 2.3.3 Animation from Interactions:
   https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html).
   Gradients: CSS Images Module Level 3 — linear-gradient, radial-gradient
   https://www.w3.org/TR/css-images-3/
   ============================================= */

.sb-cta {
  position: relative;
  overflow: hidden;
  background-color: #080808 !important;
  background-image:
    radial-gradient(
      ellipse 95% 125% at 100% 35%,
      rgba(217, 21, 72, 0.09) 0%,
      transparent 52%
    ),
    radial-gradient(
      ellipse 85% 90% at 0% 85%,
      rgba(255, 255, 255, 0.035) 0%,
      transparent 48%
    ),
    radial-gradient(
      ellipse 70% 55% at 50% 0%,
      rgba(255, 255, 255, 0.025) 0%,
      transparent 52%
    ),
    linear-gradient(
      158deg,
      #050505 0%,
      #161616 34%,
      #0c0c0c 68%,
      #060606 100%
    ) !important;
}

.sb-cta__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
  padding: 4rem 0;
}

@media only screen and (min-width: 480px) {
  .sb-cta__inner {
    gap: 2.4rem;
    padding: 5rem 0;
  }
}

@media only screen and (min-width: 768px) {
  .sb-cta__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2rem 2.4rem;
    padding: 5.5rem 0;
  }
}

@media only screen and (min-width: 1200px) {
  .sb-cta__inner {
    gap: 2rem 3rem;
    padding: 6rem 0;
  }
}

/* White display type on dark — contrast >> 7:1 on #0a0a0a */
.sb-cta__headline {
  font: normal var(--fw-semibold) 2.8rem/1.1 var(--_font-accent);
  letter-spacing: -0.04rem;
  color: #fff;
  margin: 0;
  flex: 1;
  min-width: 0;
  width: 100%;
}

@media only screen and (min-width: 480px) {
  .sb-cta__headline {
    font-size: 3.4rem;
  }
}

@media only screen and (min-width: 768px) {
  .sb-cta__headline {
    font-size: 4.6rem;
    letter-spacing: -0.05rem;
  }
}

@media only screen and (min-width: 1200px) {
  .sb-cta__headline {
    font-size: 5.4rem;
  }
}

.sb-cta__actions {
  flex-shrink: 0;
}

/* ===================================================================
   Contact Page
   =================================================================== */

.contact-page .specialty-hero-section {
  padding-bottom: 2.4rem !important;
}

.contact-hero-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.2rem;
  margin-top: 2rem;
}

.contact-hero-action {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.3rem 1rem;
  align-items: center;
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-m, 1.2rem);
  background: var(--base-tint);
  padding: 1.3rem 1.5rem;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

button.contact-hero-action {
  width: 100%;
  appearance: none;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.contact-hero-action--primary {
  border-color: rgba(217, 21, 72, 0.18);
}

.contact-hero-action__label {
  grid-column: 1 / 2;
  font: normal var(--fw-medium, 500) 1.2rem/1.2 var(--font-tech), monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--t-muted);
}

.contact-hero-action__value {
  grid-column: 1 / 2;
  font: normal var(--fw-medium, 500) 1.7rem/1.3 var(--_font-accent);
  color: var(--t-bright);
  overflow-wrap: anywhere;
}

.contact-hero-action i {
  grid-column: 2 / 3;
  grid-row: 1 / span 2;
  color: var(--sb-berry-500, #D91548);
}

.no-touch .contact-hero-action:hover {
  border-color: rgba(217, 21, 72, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
}

.contact-form-section {
  padding-top: 0 !important;
  padding-bottom: 3.2rem !important;
}

.contact-divider-section {
  padding-bottom: 3rem !important;
}

.contact-divider-image {
  background-image: url("/img/illustrations/contact-divider-provider.png");
  background-position: center 30%;
}

.contact-marquee-section {
  padding-bottom: 3.2rem !important;
}

.contact-socials-section {
  padding-bottom: 3.2rem !important;
}

.contact-locations-section {
  padding-bottom: 4rem !important;
}

.contact-form-section__grid {
  row-gap: 2rem;
}

.contact-form-intro {
  height: 100%;
  border: 1px solid var(--st-muted);
  padding: 2.4rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.contact-form-intro__tag {
  width: fit-content;
}

.contact-form-intro__title {
  margin: 0;
}

.contact-form-intro__text {
  margin: 0;
  max-width: 30ch;
}

.contact-form-intro__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.contact-form-intro__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  color: var(--t-medium);
  font: normal var(--fw-regular, 400) 1.5rem/1.45 var(--_font-default);
}

.contact-form-intro__list i {
  color: var(--sb-berry-500, #D91548);
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.contact-form-card {
  border: 1px solid var(--st-muted);
  padding: 2.4rem 2rem;
}

.contact-form-modern label {
  display: block;
  margin-bottom: 0.7rem;
  font: normal var(--fw-medium, 500) 1.5rem/1.3 var(--_font-default);
  color: var(--t-bright);
}

.contact-form-modern .contact-form__required {
  color: var(--sb-berry-500, #D91548);
}

.contact-form-modern input,
.contact-form-modern textarea {
  border: 1px solid var(--st-muted);
  background-color: var(--base);
  border-radius: 0.8rem;
  color: var(--t-bright);
  width: 100%;
  font: normal var(--fw-regular, 400) 1.6rem/1.4 var(--_font-default);
  padding: 1.1rem 1.2rem;
  min-height: 5rem;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.contact-form-modern input::placeholder,
.contact-form-modern textarea::placeholder {
  color: var(--t-muted);
}

.contact-form-modern input:focus,
.contact-form-modern textarea:focus {
  border-color: rgba(217, 21, 72, 0.5);
  box-shadow: 0 0 0 3px rgba(217, 21, 72, 0.12);
}

.contact-form-modern textarea {
  min-height: 15rem;
  resize: vertical;
}

.contact-form__error {
  margin: 0.6rem 0 0;
  color: var(--sb-berry-500, #D91548);
  font: normal var(--fw-regular, 400) 1.3rem/1.35 var(--_font-default);
}

@media only screen and (min-width: 768px) {
  .contact-page .specialty-hero-section {
    padding-bottom: 3rem !important;
  }

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

  .contact-form-section__grid {
    row-gap: 2.4rem;
  }

  .contact-form-section {
    padding-bottom: 4rem !important;
  }

  .contact-divider-section,
  .contact-marquee-section,
  .contact-socials-section {
    padding-bottom: 4rem !important;
  }

  .contact-locations-section {
    padding-bottom: 5rem !important;
  }

  .contact-form-intro,
  .contact-form-card {
    padding: 3rem 2.6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .contact-page .specialty-hero-section {
    padding-bottom: 3.4rem !important;
  }

  .contact-form-section__grid {
    row-gap: 0;
  }

  .contact-form-section {
    padding-bottom: 4.8rem !important;
  }

  .contact-divider-section,
  .contact-marquee-section,
  .contact-socials-section {
    padding-bottom: 4.6rem !important;
  }

  .contact-locations-section {
    padding-bottom: 5.6rem !important;
  }

  .contact-form-intro,
  .contact-form-card {
    padding: 3.4rem 3rem;
  }
}

/* ===================================================================
   Enterprise Page
   =================================================================== */

/* -- Metrics: section spacing ---------------------------------------- */
.enterprise-metrics {
  padding-top: 0 !important;
  padding-bottom: 4rem !important;
  margin-top: -4rem;
}

@media only screen and (min-width: 768px) {
  .enterprise-metrics {
    padding-bottom: 5rem !important;
    margin-top: -6rem;
  }
}

.enterprise-metrics__card {
  text-align: center;
  padding: 2.4rem 1.6rem;
  border-radius: var(--_radius-m, 1.2rem);
  background: var(--bg-base-tint);
  border: 1px solid var(--st-muted);
}

.enterprise-metrics__number,
.enterprise-metrics__number span {
  font: normal var(--fw-bold, 700) 4.2rem/1.1 var(--_font-accent);
  letter-spacing: -0.04rem;
  color: var(--sb-berry-500, #D91548);
  margin: 0;
}

@media only screen and (min-width: 768px) {
  .enterprise-metrics__number,
  .enterprise-metrics__number span {
    font-size: 5rem;
  }
}

.enterprise-metrics__label {
  font: normal var(--fw-regular, 400) 1.4rem/1.4 var(--_font-default);
  color: var(--t-medium);
  margin: 0.6rem 0 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Anchor target for /enterprise#enterprise-contact (native scroll fallback) */
#enterprise-contact {
  scroll-margin-top: 5.5rem;
}

/* -- Enterprise CTA: split layout with form ------------------------- */
.enterprise-cta .enterprise-cta__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding: 4rem 0;
}

@media only screen and (min-width: 1200px) {
  .enterprise-cta .enterprise-cta__grid {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
    padding: 6rem 0;
    align-items: start;
  }
}

.enterprise-cta__copy {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.enterprise-cta__sub {
  font: normal var(--fw-regular, 400) 1.8rem/1.6 var(--_font-accent);
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 48ch;
}

.enterprise-cta__checklist {
  list-style: none;
  padding: 0;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.enterprise-cta__checklist li {
  display: flex;
  align-items: center;
  gap: 1rem;
  font: normal var(--fw-regular, 400) 1.6rem/1.4 var(--_font-default);
  color: rgba(255, 255, 255, 0.85);
}

.enterprise-cta__checklist li svg {
  flex-shrink: 0;
  color: var(--sb-berry-500, #D91548);
}

/* -- Enterprise form styling on dark background --------------------- */
.enterprise-cta__form .form-container {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--_radius-m, 1.2rem);
  padding: 3rem 2.4rem;
}

@media only screen and (min-width: 768px) {
  .enterprise-cta__form .form-container {
    padding: 3.6rem 3rem;
  }
}

.enterprise-contact-form input,
.enterprise-contact-form textarea,
.enterprise-contact-form select {
  background-color: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
  color: #fff;
  font: normal var(--fw-regular) 1.8rem var(--_font-accent);
  padding: 1.2rem 0.2rem;
  width: 100%;
  height: 5.4rem;
  outline: 0;
  transition: border-color 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}

.enterprise-contact-form input:focus,
.enterprise-contact-form textarea:focus,
.enterprise-contact-form select:focus {
  border-bottom-color: var(--sb-berry-500, #D91548);
}

.enterprise-contact-form input::placeholder,
.enterprise-contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.enterprise-contact-form textarea {
  height: 12rem;
  line-height: 1.6;
  resize: none;
}

.enterprise-form__select {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.4);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='rgba(255,255,255,0.5)' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  padding-right: 2rem;
}

.enterprise-form__select:valid {
  color: #fff;
}

.enterprise-form__select option {
  background: #1a1a1a;
  color: #fff;
}

.enterprise-form__error {
  font-size: 1.3rem;
  color: var(--sb-berry-500, #D91548);
  margin: 0.4rem 0 0;
}

/* =============================================
   Blog Article — Author line, TOC, Share bar
   ============================================= */

.blog-post-headline {
  width: 100%;
  text-align: left;
  margin-bottom: 3rem;
}

.blog-post-headline .mxd-article__breadcrumbs {
  justify-content: flex-start;
  margin-bottom: 1.4rem;
}

.blog-post-headline__tag {
  margin-bottom: 1rem;
}

.blog-post-headline__title {
  font: normal var(--fw-medium, 500) 3.2rem/1.2 var(--_font-accent);
  color: var(--t-bright);
  margin: 0 0 1.4rem;
  max-width: 72ch;
}

@media only screen and (min-width: 768px) {
  .blog-post-headline__title {
    font-size: 4rem;
  }
}

@media only screen and (min-width: 1200px) {
  .blog-post-headline__title {
    font-size: 4.6rem;
  }
}

.blog-post-headline__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--st-muted);
}

.blog-post-headline__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  font: normal var(--fw-regular, 400) 1.4rem/1.2 var(--_font-default);
  color: var(--t-muted);
}

.blog-post-headline__author {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: var(--fw-medium, 500);
  color: var(--t-bright);
}

.blog-post-headline__sep {
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--t-muted);
  opacity: 0.5;
  flex-shrink: 0;
}

.blog-post-headline__date,
.blog-post-headline__read {
  white-space: nowrap;
}

.blog-article-author-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--base-tint);
  color: var(--t-bright);
  font: normal var(--fw-semibold, 600) 1.3rem/1 var(--_font-accent);
  flex-shrink: 0;
}

.blog-article-author-initial--sm {
  width: 28px;
  height: 28px;
  font-size: 1.2rem;
}

.blog-author-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--base-tint);
  color: var(--t-bright);
  font: normal var(--fw-semibold, 600) 4rem/1 var(--_font-accent);
}

.blog-share-bar {
  display: flex;
  gap: 0.8rem;
}

.blog-share-bar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 1px solid var(--st-muted);
  border-radius: 999px;
  cursor: pointer;
  font: normal var(--fw-regular, 400) 1.25rem/1 var(--_font-default);
  color: var(--t-muted);
  padding: 0.5rem 1rem;
  transition: color 0.15s, border-color 0.15s;
}

.no-touch .blog-share-bar__btn:hover {
  color: var(--t-bright);
  border-color: var(--st-bright);
}

.blog-article-body {
  position: relative;
  width: 100%;
}

.blog-article-body .mxd-article__content,
.blog-article-body .ghost-content {
  max-width: none;
}

.blog-toc-column {
  display: none;
}

@media only screen and (min-width: 1200px) {
  .blog-toc-column {
    display: block;
  }
}

.blog-toc {
  position: sticky;
  top: 12rem;
  max-height: calc(100vh - 14rem);
  overflow-y: auto;
  scrollbar-width: thin;
  border: none;
  border-left: 2px solid var(--st-muted);
  border-radius: 0;
  background: transparent;
  padding: 0 0 0 1.6rem;
  margin-right: 1.6rem;
  box-shadow: none;
}

.blog-toc__header {
  padding: 0 0 1rem;
  margin-bottom: 0.6rem;
}

.blog-toc__eyebrow {
  margin: 0;
  font: normal var(--fw-medium, 500) 1.15rem/1 var(--_font-default);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--t-muted);
}

.blog-toc__count {
  display: none;
}

.blog-toc .guide-detail-toc__link {
  padding: 0.6rem 0.8rem;
  font-size: 1.4rem;
  line-height: 1.4;
  border-radius: 0.6rem;
  background: transparent;
  border: none;
}

.blog-toc__link {
  position: relative;
  transition: color 0.15s, background-color 0.15s;
}

.blog-toc__link--level3 {
  padding-left: 1.6rem !important;
  font-size: 1.3rem;
}

.blog-toc__link--active {
  color: var(--t-bright);
  background-color: var(--base-tint);
}

.blog-toc__link--active::before {
  content: "";
  position: absolute;
  left: -1.8rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  border-radius: 999px;
  background: var(--sb-berry-500, #D91548);
}

.blog-article-page .mxd-article-area {
  padding-top: 8rem;
}

@media only screen and (min-width: 768px) {
  .blog-article-page .mxd-article-area {
    padding-top: 10rem;
  }
}

@media only screen and (min-width: 1200px) {
  .blog-article-page .mxd-article-area {
    padding-top: 6rem;
  }
}

.blog-article-page .mxd-article__headline {
  margin-bottom: 0;
}

.blog-article-page .mxd-article__thumb {
  height: clamp(16rem, 20vw, 30rem);
  margin-bottom: 3rem;
}

@media only screen and (min-width: 768px) {
  .blog-article-page .mxd-article__thumb {
    height: clamp(18rem, 22vw, 34rem);
    margin-bottom: 3.6rem;
  }
}

@media only screen and (min-width: 1200px) {
  .blog-article-page .mxd-article__thumb {
    height: clamp(20rem, 24vw, 38rem);
    margin-bottom: 4rem;
  }
}

.ghost-content h2,
.ghost-content h3 {
  scroll-margin-top: 10rem;
}

/* Dark-mode callout card overrides */
[color-scheme="dark"] .ghost-content .kg-callout-card-blue {
  background: rgba(56, 96, 150, 0.25);
  color: #a8c7f5;
}

[color-scheme="dark"] .ghost-content .kg-callout-card-green {
  background: rgba(46, 100, 60, 0.25);
  color: #8fd4a0;
}

[color-scheme="dark"] .ghost-content .kg-callout-card-yellow {
  background: rgba(130, 100, 30, 0.25);
  color: #e4c97a;
}

[color-scheme="dark"] .ghost-content .kg-callout-card-red {
  background: rgba(130, 50, 50, 0.25);
  color: #f0a0a0;
}

[color-scheme="dark"] .ghost-content .kg-callout-card-pink {
  background: rgba(130, 50, 80, 0.25);
  color: #f0a0c0;
}

[color-scheme="dark"] .ghost-content .kg-callout-card-purple {
  background: rgba(80, 50, 130, 0.25);
  color: #c0a0f0;
}

/* =============================================
   Blog Index — Toolbar, Cards, Inline CTA
   ============================================= */

.blog-toolbar-section {
  padding-top: 0 !important;
  padding-bottom: 2rem !important;
}

.blog-toolbar-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  align-items: center;
}

.blog-toolbar-search {
  margin-top: 1.2rem;
}

@media only screen and (min-width: 1200px) {
  .blog-toolbar-search {
    margin-top: 0;
  }
}

.blog-toolbar-search .widget-search__form {
  width: 100%;
}

.blog-toolbar-search .search-form {
  position: relative;
  width: 100%;
}

.blog-toolbar-search .search-form input {
  width: 100%;
  height: 4.8rem;
  padding: 0 4.8rem 0 1.4rem;
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-s);
  background: var(--base-tint);
  color: var(--t-bright);
}

.blog-toolbar-search .search-form input::placeholder {
  color: var(--t-muted);
}

.blog-toolbar-search .search-form button {
  position: absolute;
  top: 50%;
  right: 0.6rem;
  transform: translateY(-50%);
}

.blog-active-filter {
  margin-top: 1.2rem;
}

.blog-active-filter__clear {
  color: var(--t-bright);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.no-touch .blog-active-filter__clear:hover {
  opacity: 0.7;
}

/* -- Blog Index Grid — scoped overrides on Rayo preview cards -- */

.blog-index-grid .mxd-blog-preview__item {
  padding-bottom: 0;
}

.blog-index-grid .mxd-grid-item {
  margin-top: 0;
}

.blog-index-grid .row {
  row-gap: 4.4rem;
}

.blog-index-grid .mxd-blog-preview__media {
  height: 168px;
  margin-bottom: 1.2rem;
  border-radius: var(--_radius-m);
}

.blog-index-grid .mxd-blog-preview__data {
  padding: 0 0.4rem;
}

.blog-index-grid .mxd-blog-preview__data a {
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 1.5rem;
  line-height: 1.28;
  background: none !important;
}

.blog-index-grid .mxd-blog-preview__tags {
  padding: 1rem 1.2rem;
  gap: 0.5rem;
}

.blog-index-grid .mxd-blog-preview__media--fallback {
  background: linear-gradient(
    140deg,
    rgba(217, 21, 72, 0.10),
    rgba(20, 184, 166, 0.08) 55%,
    rgba(0, 0, 0, 0.04)
  );
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
  font: normal var(--fw-regular, 400) 1.1rem / 1.4 var(--_font-default);
  color: var(--t-muted);
}

.blog-meta-dot {
  user-select: none;
}

.blog-card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 0.7rem;
  margin-bottom: 0;
  font: normal var(--fw-regular, 400) 1.25rem / 1.5 var(--_font-default);
  color: var(--t-medium);
}

/* -- Magazine hero row -- */

.blog-hero-row {
  row-gap: 3.6rem;
  margin-bottom: 4rem;
}

.blog-hero-row > .mxd-grid-item {
  margin-top: 0;
}

.blog-hero-featured .mxd-blog-preview__media {
  height: 224px;
}

.blog-hero-featured .mxd-blog-preview__data a {
  font-size: 1.8rem;
  -webkit-line-clamp: 2;
}

.blog-hero-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.blog-sidebar-card .mxd-blog-preview__media {
  height: 108px;
  margin-bottom: 1rem;
}

.blog-sidebar-card .mxd-blog-preview__data a {
  font-size: 1.35rem;
}

/* -- Filter toolbar: active state -- */

.blog-toolbar-filters .tag-link-outline.active {
  background-color: var(--base-opp);
  border-color: var(--base-opp);
  color: var(--t-opp-bright);
}

@media only screen and (min-width: 768px) {
  .blog-index-grid .mxd-blog-preview__media {
    height: 178px;
  }
  .blog-hero-featured .mxd-blog-preview__media {
    height: 260px;
  }
  .blog-hero-featured .blog-card-excerpt {
    -webkit-line-clamp: 3;
  }
}

@media only screen and (min-width: 1200px) {
  .blog-index-grid .mxd-grid-item {
    margin-top: 0;
  }
  .blog-index-grid .mxd-blog-preview__media {
    height: 184px;
    margin-bottom: 1.3rem;
  }
  .blog-index-grid .mxd-blog-preview__data {
    padding: 0 0.6rem;
  }
  .blog-index-grid .mxd-blog-preview__data a {
    font-size: 1.6rem;
  }
  .blog-hero-featured .mxd-blog-preview__media {
    height: 296px;
  }
  .blog-hero-featured .mxd-blog-preview__data a {
    font-size: 2rem;
  }
  .blog-hero-sidebar {
    height: 100%;
  }
  .blog-sidebar-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .blog-sidebar-card .mxd-blog-preview__media {
    flex: 1;
    height: auto;
    min-height: 82px;
  }
  .blog-sidebar-card .mxd-blog-preview__data a {
    font-size: 1.45rem;
  }
}

@media only screen and (min-width: 1600px) {
  .blog-index-grid .mxd-blog-preview__media {
    height: 204px;
  }
  .blog-hero-featured .mxd-blog-preview__media {
    height: 332px;
  }
  .blog-index-grid .mxd-blog-preview__data a {
    font-size: 1.7rem;
  }
  .blog-hero-featured .mxd-blog-preview__data a {
    font-size: 2.2rem;
  }
}

.blog-inline-cta {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 4rem 0;
}

@media only screen and (min-width: 768px) {
  .blog-inline-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.blog-inline-cta :is(h2, h4) {
  margin-bottom: 0.4rem;
}

.blog-inline-cta p {
  margin-bottom: 0;
  max-width: 56ch;
}

/* -- Features section: spacing after metrics ------------------------- */
.enterprise-features-section {
  padding-top: 6rem !important;
}

/* -- Features: two-column grid -------------------------------------- */
.enterprise-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
}

@media only screen and (min-width: 768px) {
  .enterprise-features {
    grid-template-columns: 1fr 1fr;
    gap: 0 3rem;
  }
}

.enterprise-features li {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--st-muted);
  font: normal var(--fw-regular, 400) 1.6rem/1.5 var(--_font-default);
  color: var(--t-bright);
}

.enterprise-features li svg {
  flex-shrink: 0;
  color: var(--sb-berry-500, #D91548);
}

/* -- Trusted-by label + marquee override ----------------------------- */
.enterprise-trusted__label {
  text-align: center;
  font: normal var(--fw-medium, 500) 1.3rem/1 var(--_font-default);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--t-muted);
  margin: 0;
}

.enterprise-marquee-wrap .mxd-section {
  padding-top: 1.6rem !important;
  padding-bottom: 0 !important;
}

/* Trusted-by label block — must NOT use .enterprise-metrics (negative margin) */
.enterprise-trusted-by {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ── Download page ─────────────────────────────────────────── */

.sb-download-featured {
  border: 2px solid var(--sb-berry-500, #D91548);
  padding: 2.2rem 2.8rem !important;
}

.sb-download-featured-section {
  padding-top: 0 !important;
  padding-bottom: 2rem !important;
}

.sb-download-featured__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2.2rem;
  flex-wrap: wrap;
}

.sb-download-featured__info {
  flex: 1;
  min-width: 24rem;
}

.sb-download-featured__info p {
  max-width: 50ch;
  margin-bottom: 0;
}

.sb-download-featured__title-row {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 0.5rem;
}

.sb-download-featured__info h3 {
  margin: 0;
}

.sb-download-featured__actions {
  flex-shrink: 0;
  text-align: center;
}

.sb-download-featured__support {
  margin-top: 0.6rem !important;
  margin-bottom: 0;
  font-size: 1.2rem;
}

@media only screen and (max-width: 767px) {
  .sb-download-featured__inner {
    flex-direction: column;
    text-align: center;
  }

  .sb-download-featured__info {
    min-width: 0;
  }

  .sb-download-featured {
    padding: 2rem 2rem !important;
  }

  .sb-download-featured__title-row {
    justify-content: center;
  }
}

.sb-recommended-badge {
  display: inline-block;
  padding: 0.35rem 1.4rem;
  font: normal var(--fw-semibold, 600) 1.1rem/1.4 var(--_font-default);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2rem;
  background: var(--sb-berry-500, #D91548);
  color: #fff;
  margin-bottom: 1rem;
}

.sb-download-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
}

.sb-download-platforms {
  padding-top: 1.6rem !important;
  padding-bottom: 7rem !important;
}

.sb-download-card__icon {
  margin-bottom: 1rem;
}

.sb-download-card__title {
  margin-bottom: 0.8rem;
}

.sb-download-card__meta {
  min-height: 2.6rem;
  margin-bottom: 0.6rem;
}

.sb-download-card__description {
  margin-bottom: 0;
  flex: 1;
}

.sb-download-card__actions {
  margin-top: 1.5rem;
  min-height: 4.9rem;
}

.sb-download-card__actions--empty {
  margin-top: 1.5rem;
  min-height: 4.9rem;
}

.sb-download-card__footer {
  min-height: 2.1rem;
  margin-top: 1rem;
}

.sb-download-card__footer--empty {
  margin-top: 1rem;
  min-height: 2.1rem;
}

.sb-store-badge {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem 1.8rem 0.8rem 1.2rem;
  background: #000;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.8rem;
  color: #fff;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  white-space: nowrap;
}

.sb-store-badge:hover {
  background: #1a1a1a;
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.sb-store-badge svg {
  flex-shrink: 0;
}

.sb-store-badge__text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  text-align: left;
}

.sb-store-badge__label {
  font: normal var(--fw-regular, 400) 1rem/1.2 var(--_font-default);
  letter-spacing: 0.03em;
  opacity: 0.85;
}

.sb-store-badge__store {
  font: normal var(--fw-semibold, 600) 1.7rem/1.2 var(--_font-default);
  letter-spacing: -0.01em;
}

.sb-invite-badge {
  display: inline-block;
  padding: 0.35rem 1rem;
  font: normal var(--fw-semibold, 600) 1.1rem/1.4 var(--_font-default);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 0.5rem;
  background: rgba(217, 21, 72, 0.1);
  color: var(--sb-berry-400, #D91548);
  margin-bottom: 0;
}

.sb-invite-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.2rem;
  font: normal var(--fw-medium, 500) 1.35rem/1 var(--_font-default);
  color: var(--sb-berry-400, #D91548);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.sb-invite-link:hover {
  opacity: 0.75;
  text-decoration: underline;
  color: var(--sb-berry-400, #D91548);
}

/* ── Service card image sizing overrides ──
   image-right: vendor has no max-width — cap the stethoscope.
   bg-accent image-top: push clipboard to the right to match other cards. */
@media only screen and (min-width: 1200px) {
  .mxd-services-cards-s__image.image-right {
    width: 100%;
    max-width: 300px;
    right: 2rem;
  }
  .bg-accent .mxd-services-cards-s__image.image-top {
    right: -3rem;
    top: -80px;
    max-width: 240px;
  }
  .bg-accent .mxd-services-cards-s__title,
  .bg-accent .mxd-services-cards-s__info {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  }
}
@media only screen and (min-width: 1600px) {
  .mxd-services-cards-s__image.image-right {
    max-width: 400px;
  }
  .bg-accent .mxd-services-cards-s__image.image-top {
    right: -3rem;
    top: -60px;
    max-width: 470px;
  }
}

/* ── Testimonials page ── */

.sb-stats-bar {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.6rem;
  margin-top: 3.2rem;
}
@media only screen and (min-width: 768px) {
  .sb-stats-bar {
    grid-template-columns: repeat(4, 1fr);
    gap: 2.4rem;
    margin-top: 4rem;
  }
}
.sb-stats-bar__item {
  text-align: center;
}
.sb-stats-bar__value {
  font: normal var(--fw-bold, 700) clamp(2.4rem, 4vw, 3.6rem)/1.1 var(--_font-default);
  color: var(--sb-berry-500, #D91548);
  letter-spacing: -0.02em;
}
.sb-stats-bar__label {
  font: normal var(--fw-medium, 500) 1.2rem/1.4 var(--_font-default);
  color: var(--t-medium);
  margin-top: 0.3rem;
  letter-spacing: 0.02em;
}

/* Hero video spotlight */
.sb-video-spotlight {
  position: relative;
  border-radius: var(--radius-m);
  overflow: hidden;
  aspect-ratio: 16/9;
}
.sb-video-spotlight__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sb-video-spotlight__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.sb-video-spotlight__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.15) 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
  z-index: 1;
}
.sb-video-spotlight__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem 2.4rem;
  z-index: 2;
  color: #fff;
}
.sb-video-spotlight__caption h4 {
  color: #fff;
  margin-bottom: 0.2rem;
}
.sb-video-spotlight__caption p {
  color: rgba(255, 255, 255, 0.75);
}

/* Featured testimonial cards */
.sb-featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.6rem;
}
@media only screen and (min-width: 768px) {
  .sb-featured-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}
@media only screen and (min-width: 1200px) {
  .sb-featured-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem;
  }
}

.sb-featured-card {
  background: var(--bg-tint);
  border-radius: var(--radius-m);
  padding: 2.8rem 2.4rem;
  border-left: 3px solid var(--sb-berry-500, #D91548);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.sb-featured-card__quote-mark {
  font: normal var(--fw-bold, 700) 4rem/1 var(--_font-accent);
  color: var(--sb-berry-400, #F0507A);
  user-select: none;
  margin-bottom: 0.4rem;
}
.sb-featured-card__text {
  font: normal var(--fw-regular, 400) clamp(1.5rem, 1.8vw, 1.7rem)/1.6 var(--_font-default);
  color: var(--t-bright);
  flex: 1;
}
.sb-featured-card__author {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--border-light, rgba(0,0,0,0.06));
}
.sb-featured-card__name {
  font: normal var(--fw-semibold, 600) 1.35rem/1.3 var(--_font-default);
  color: var(--t-bright);
}
.sb-featured-card__role {
  font: normal var(--fw-regular, 400) 1.15rem/1.4 var(--_font-default);
  color: var(--t-medium);
  margin-top: 0.15rem;
}

/* Video testimonial cards */
.sb-video-card {
  position: relative;
  border-radius: var(--radius-m);
  overflow: hidden;
  aspect-ratio: 16/9;
}
.sb-video-card__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.sb-video-card:hover .sb-video-card__thumb {
  transform: scale(1.03);
}
.sb-video-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.02) 100%
  );
  z-index: 1;
}
.sb-video-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.sb-video-card__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.6rem 2rem;
  z-index: 2;
  color: #fff;
}
.sb-video-card__caption h5 {
  color: #fff;
  margin-bottom: 0.15rem;
}
.sb-video-card__caption p {
  color: rgba(255, 255, 255, 0.7);
}

/* Written testimonials masonry */
.sb-testimonials-masonry {
  columns: 1;
  column-gap: 2rem;
}
@media only screen and (min-width: 768px) {
  .sb-testimonials-masonry {
    columns: 2;
  }
}
@media only screen and (min-width: 1200px) {
  .sb-testimonials-masonry {
    columns: 3;
  }
}

.sb-written-card {
  break-inside: avoid;
  margin-bottom: 2rem;
  background: var(--bg-tint);
  border-radius: var(--radius-m);
  padding: 2.4rem;
}
.sb-written-card--highlight {
  border-left: 3px solid var(--sb-berry-400, #F0507A);
}
.sb-written-card__quote-mark {
  font: normal var(--fw-bold, 700) 3.2rem/1 var(--_font-accent);
  color: var(--sb-berry-400, #F0507A);
  user-select: none;
  margin-bottom: 0.2rem;
}
.sb-written-card__text {
  font: normal var(--fw-regular, 400) 1.4rem/1.65 var(--_font-default);
  color: var(--t-bright);
}
.sb-written-card__author {
  font: normal var(--fw-medium, 500) 1.2rem/1.4 var(--_font-default);
  color: var(--t-medium);
  margin-top: 1.2rem;
}

/* Testimonials page section spacing */
.sb-testimonials-hero.padding-headline-pre-grid {
  padding-bottom: 2rem;
}
@media only screen and (min-width: 768px) {
  .sb-testimonials-hero.padding-headline-pre-grid {
    padding-bottom: 2.8rem;
  }
}
@media only screen and (min-width: 1200px) {
  .sb-testimonials-hero.padding-headline-pre-grid {
    padding-bottom: 3.6rem;
  }
}
@media only screen and (min-width: 1600px) {
  .sb-testimonials-hero.padding-headline-pre-grid {
    padding-bottom: 4.4rem;
  }
}

/* Legal pages (Privacy Policy, Terms & Conditions) */
.sb-legal-content h2 {
  font: normal var(--fw-bold, 700) 2rem/1.35 var(--_font-accent);
  color: var(--t-bright);
  margin-top: 3.2rem;
  margin-bottom: 1rem;
}
.sb-legal-content h3 {
  font: normal var(--fw-semibold, 600) 1.6rem/1.4 var(--_font-accent);
  color: var(--t-bright);
  margin-top: 2.4rem;
  margin-bottom: 0.8rem;
}
.sb-legal-content p {
  font: normal var(--fw-regular, 400) 1.4rem/1.75 var(--_font-default);
  color: var(--t-medium);
  margin-bottom: 1.2rem;
}
.sb-legal-content a {
  color: var(--sb-berry-500, #D91548);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.sb-legal-content a:hover {
  color: var(--sb-berry-700, #9E0F35);
}
.sb-legal-content ol,
.sb-legal-content ul {
  margin: 0 0 1.2rem 2rem;
  padding: 0;
}
.sb-legal-content li {
  font: normal var(--fw-regular, 400) 1.4rem/1.75 var(--_font-default);
  color: var(--t-medium);
  margin-bottom: 0.6rem;
}
.sb-legal-content .sb-legal-emphasis {
  font-weight: var(--fw-semibold, 600);
  color: var(--t-bright);
}
.sb-legal-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 4rem 0;
}

.article-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.6rem;
}

.article-template,
.article-example,
.article-callout {
  margin-top: 1.6rem;
  border: 1px solid var(--st-muted);
  border-radius: var(--_radius-m);
  background-color: var(--base-tint);
  padding: 1.6rem 1.8rem;
}

.article-template__label,
.article-example__title,
.article-callout__title,
.article-table__caption {
  font: normal var(--fw-semibold) 1.4rem/1.35 var(--_font-accent);
  color: var(--t-bright);
  margin: 0 0 0.8rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.article-example__setting {
  font: normal var(--fw-regular) 1.4rem/1.5 var(--_font-default);
  color: var(--t-muted);
  margin: 0 0 1rem;
}

.article-template__body,
.article-example__body {
  margin: 0;
  white-space: pre-wrap;
  font: normal var(--fw-regular) 1.45rem/1.65 var(--_font-accent);
  color: var(--t-bright);
  overflow-x: auto;
}

.article-callout p:last-child {
  margin: 0;
}

.article-list {
  margin: 1.4rem 0 0 1.8rem;
  padding: 0;
}

.article-list li {
  margin-bottom: 0.7rem;
  line-height: 1.55;
}

.article-cta-inline {
  margin-top: 2rem;
  border: 1px solid var(--st-muted);
}

.article-cta-inline :is(h3, h4) {
  margin-bottom: 0.8rem;
}

.article-cta-inline p {
  margin-bottom: 1.4rem;
}

.article-table-wrap {
  margin-top: 1.6rem;
  overflow-x: auto;
}

.article-table {
  width: 100%;
  border-collapse: collapse;
  font: normal var(--fw-regular) 1.45rem/1.5 var(--_font-default);
}

.article-table th,
.article-table td {
  text-align: left;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--st-muted);
  vertical-align: top;
  color: var(--t-bright);
}

.article-table th {
  font-weight: var(--fw-semibold);
  color: var(--t-muted);
}

.article-hub-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2rem;
}

.gag-landing .gag-hero {
  min-height: 0;
  display: block;
  padding-top: 2rem;
  padding-bottom: 0;
}

.gag-hero__split {
  display: grid;
  gap: 2.4rem;
  align-items: center;
  padding-bottom: 2.4rem;
}

@media (min-width: 992px) {
  .gag-hero__split {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.18fr);
    gap: 4.8rem;
    padding-bottom: 2.8rem;
  }
}

.gag-hero__eyebrow {
  margin: 0 0 1.4rem;
}

.gag-landing h1.gag-hero__title {
  font-family: var(--_font-accent);
  font-size: clamp(2.6rem, 4.2vw, 4rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 0.8rem;
}

.gag-hero__body {
  margin: 0 0 1.4rem;
  font-size: 1.5rem;
  line-height: 1.45;
  max-width: 36ch;
}

.gag-hero__badges {
  margin: 0.4rem 0 0.2rem;
}

.gag-hero__actions {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1.6rem;
  max-width: 42rem;
}

.gag-hero__cta {
  width: 100%;
  justify-content: center;
}

@media (min-width: 576px) {
  .gag-hero__actions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
  }

  .gag-hero__cta {
    flex: 1 1 0;
    min-width: 0;
  }
}

.gag-hero__signin {
  margin-top: 1rem;
}

.gag-hero__terms {
  margin-top: 0.6rem;
}

.gag-landing--sticky-cta {
  padding-bottom: calc(5.8rem + env(safe-area-inset-bottom, 0px));
}

.gag-sticky-claim {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 120;
  padding: 0.75rem clamp(1.2rem, 3vw, 2.4rem);
  padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--bg-base-tint) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid color-mix(in srgb, var(--t-muted) 22%, transparent);
  box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.08);
  transform: translateY(110%);
  opacity: 0;
  transition:
    transform 0.28s ease,
    opacity 0.28s ease;
  pointer-events: none;
}

.gag-sticky-claim.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.gag-sticky-claim__inner {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-width: 42rem;
}

@media (min-width: 576px) {
  .gag-sticky-claim__inner {
    flex-direction: row;
    align-items: stretch;
    max-width: min(52rem, 100%);
    margin-inline: auto;
  }
}

.gag-sticky-claim__btn {
  width: 100%;
  justify-content: center;
}

@media (min-width: 576px) {
  .gag-sticky-claim__btn {
    flex: 1 1 0;
    min-width: 0;
  }
}

.gag-landing-foot {
  padding-top: 0;
  padding-bottom: clamp(2.4rem, 5vw, 4rem);
}

.gag-landing-foot__signin {
  margin: 0 0 0.6rem;
}

.gag-landing-foot__terms {
  margin: 0;
}

.gag-hero__demo {
  width: 100%;
}

.gag-partner-strip .hero-cinematic__partners-link {
  margin-right: clamp(1.6rem, 3vw, 3.2rem);
}

.gag-section-head {
  margin-bottom: 2rem;
}

.gag-section-head--row {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.6rem;
}

.gag-landing .gag-section-head__title {
  font-size: clamp(2.2rem, 3vw, 3rem);
  margin: 0 0 0.6rem;
}

.gag-section-head--row .gag-section-head__title {
  margin-bottom: 0;
}

.gag-section-head__lead {
  margin: 0;
  font-size: 1.45rem;
  max-width: 42rem;
}

.gag-inline-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gag-stats {
  padding-top: 2.4rem;
  padding-bottom: 4rem;
}

.gag-stats .sb-stats-bar {
  margin: 0;
}

.gag-testimonials {
  padding-top: 2rem;
  padding-bottom: 2.4rem;
}

.gag-landing .gag-testimonials__grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 1fr;
}

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

@media (min-width: 1200px) {
  .gag-landing .gag-testimonials__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.gag-quote-card {
  margin: 0;
  padding: 1.6rem;
  border: 1px solid var(--st-muted);
  border-radius: var(--radius-m, 12px);
  background: var(--base);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 100%;
}

.gag-quote-card__text {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--t-bright);
  flex: 1;
}

.gag-quote-card__footer {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.gag-quote-card__author {
  font-style: normal;
  font-weight: var(--fw-semibold);
  font-size: 1.3rem;
}

.gag-quote-card__role {
  font-size: 1.2rem;
  color: var(--t-muted);
}

.gag-compare {
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
}

.gag-forms {
  display: grid;
  gap: 1.6rem;
  align-items: center;
  margin-bottom: 2.4rem;
}

@media (min-width: 992px) {
  .gag-forms {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 3.2rem;
    margin-bottom: 3.2rem;
  }
}

.gag-forms__media {
  position: relative;
  border-radius: var(--_radius-m);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--base-shade);
}

.gag-forms__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gag-landing h3.gag-forms__headline {
  font-family: var(--_font-accent);
  font-weight: 500;
  font-size: clamp(2.2rem, 3.2vw, 3.2rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.8rem;
  color: var(--t-bright);
}

.gag-forms__caption {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.5;
  color: var(--t-muted);
}

.gag-compare-table {
  font-size: 1.25rem;
  line-height: 1.4;
}

.gag-compare-table td:not(.mxd-cmp-table__td-feature) {
  max-width: 22rem;
}

@media (max-width: 767px) {
  .gag-compare .mxd-cmp-table-wrap {
    margin-inline: -1.2rem;
    padding-bottom: 0.4rem;
  }

  .gag-compare-table {
    min-width: 68rem;
    table-layout: auto;
  }

  .gag-compare-table td:not(.mxd-cmp-table__td-feature) {
    max-width: none;
  }
}

.gag-clinician {
  padding-top: 2.4rem;
  padding-bottom: 2.4rem;
}

.gag-clinician__card {
  display: grid;
  gap: 2rem;
  align-items: center;
}

@media (min-width: 768px) {
  .gag-clinician__card {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 3.2rem;
  }
}

.gag-clinician__media {
  position: relative;
  border-radius: var(--_radius-m);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--base-shade);
}

.gag-clinician__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gag-clinician__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.18);
}

.gag-clinician__eyebrow {
  margin: 0 0 0.6rem;
  font-size: 1.25rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-muted);
}

.gag-clinician__subtitle {
  margin: 0.6rem 0 0;
  font-size: 1.45rem;
}

.gag-faq {
  padding-top: 2.4rem;
  padding-bottom: 4rem;
}

@media (max-width: 767px) {
  .gag-landing .gag-hero {
    padding-top: 1.2rem;
  }

  .gag-hero__split {
    gap: 1.8rem;
    padding-bottom: 1.6rem;
  }

  .gag-landing h1.gag-hero__title {
    font-size: clamp(2.4rem, 8vw, 3.2rem);
  }

  .gag-hero__body {
    max-width: none;
  }

  .gag-hero__actions {
    max-width: none;
  }

  .gag-stats {
    padding-top: 1.6rem;
  }

  .gag-testimonials,
  .gag-compare,
  .gag-clinician,
  .gag-faq {
    padding-top: 1.8rem;
    padding-bottom: 1.8rem;
  }
}