/*fern-site-stylesheet*/@font-face {
    font-family: 'Nunito';
    src: url('/_fern-files/commify.docs.buildwithfern.com/707f6b338cfd21e95f05a88169ef7647d01ad8da76623846c092f3118f762a08/assets/fonts/Nunito.ttf') format('ttf');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Nunito';
    src: url('/_fern-files/commify.docs.buildwithfern.com/707f6b338cfd21e95f05a88169ef7647d01ad8da76623846c092f3118f762a08/assets/fonts/Nunito.ttf') format('ttf');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

:root {
  --header-height: 64px;
  --header-height-real: 64px;
  --mobile-header-height-real: 64px;
  --content-width: 640px;
  --sidebar-width: 288px;
  --page-width: 1504px;
  --logo-height: 40px;
  --font-body: 'Nunito', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-heading: 'Nunito', 'Nunito', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --font-code: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

:root {
  --typography-body-font-family: var(--font-body);
  --typography-heading-font-family: var(--font-heading);
  --typography-code-font-family: var(--font-code);
}


.light, :root {
  --accent-1: #fafdfe;
  --accent-2: #f3fafb;
  --accent-3: #e3f5f9;
  --accent-4: #d2eff4;
  --accent-5: #c1e6ed;
  --accent-6: #acdae3;
  --accent-7: #91cad6;
  --accent-8: #64b5c4;
  --accent-9: #007f90;
  --accent-10: #007182;
  --accent-11: #007c8d;
  --accent-12: #1b3c43;

  --accent-a1: #0099cc05;
  --accent-a2: #0095aa0c;
  --accent-a3: #00a4c91c;
  --accent-a4: #00a5c12d;
  --accent-a5: #0099b53e;
  --accent-a6: #008ea953;
  --accent-a7: #0085a06e;
  --accent-a8: #00869e9b;
  --accent-a9: #007f90;
  --accent-a10: #007182;
  --accent-a11: #007c8d;
  --accent-a12: #00252de4;

  --accent-contrast: #fff;
  --accent-surface: #f0f9facc;
  --accent-indicator: #007f90;
  --accent-track: #007f90;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --accent-1: oklch(99.2% 0.0031 211);
      --accent-2: oklch(98% 0.007 211);
      --accent-3: oklch(95.9% 0.0199 211);
      --accent-4: oklch(93.3% 0.0308 211);
      --accent-5: oklch(90% 0.0402 211);
      --accent-6: oklch(86% 0.0494 211);
      --accent-7: oklch(80.5% 0.0611 211);
      --accent-8: oklch(72.7% 0.0822 211);
      --accent-9: oklch(54.7% 0.095 211);
      --accent-10: oklch(50.1% 0.095 211);
      --accent-11: oklch(53.7% 0.095 211);
      --accent-12: oklch(33.5% 0.0408 211);

      --accent-a1: color(display-p3 0.0235 0.5137 0.7569 / 0.016);
      --accent-a2: color(display-p3 0.0196 0.5569 0.6471 / 0.044);
      --accent-a3: color(display-p3 0.0118 0.5647 0.7255 / 0.099);
      --accent-a4: color(display-p3 0.0039 0.5647 0.6941 / 0.153);
      --accent-a5: color(display-p3 0.0039 0.5294 0.6588 / 0.216);
      --accent-a6: color(display-p3 0.0039 0.4902 0.6118 / 0.291);
      --accent-a7: color(display-p3 0.0039 0.4392 0.5647 / 0.385);
      --accent-a8: color(display-p3 0 0.4392 0.549 / 0.53);
      --accent-a9: color(display-p3 0 0.349 0.4353 / 0.785);
      --accent-a10: color(display-p3 0 0.3059 0.3882 / 0.812);
      --accent-a11: color(display-p3 0 0.3412 0.4275 / 0.793);
      --accent-a12: color(display-p3 0 0.1098 0.1412 / 0.863);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.9529 0.9765 0.9804 / 0.8);
      --accent-indicator: oklch(54.7% 0.095 211);
      --accent-track: oklch(54.7% 0.095 211);
    }
  }
}


.light, :root {
  --grayscale-1: #fbfdfc;
  --grayscale-2: #f7f9f8;
  --grayscale-3: #eef1f0;
  --grayscale-4: #e6e9e8;
  --grayscale-5: #dfe2e0;
  --grayscale-6: #d7dad9;
  --grayscale-7: #cbcfcd;
  --grayscale-8: #b8bcba;
  --grayscale-9: #868e8b;
  --grayscale-10: #7c8481;
  --grayscale-11: #5f6563;
  --grayscale-12: #1a211e;

  --grayscale-a1: #00804004;
  --grayscale-a2: #00402008;
  --grayscale-a3: #002d1e11;
  --grayscale-a4: #001f1519;
  --grayscale-a5: #00180820;
  --grayscale-a6: #00140d28;
  --grayscale-a7: #00140a34;
  --grayscale-a8: #000f0847;
  --grayscale-a9: #00110b79;
  --grayscale-a10: #00100a83;
  --grayscale-a11: #000a07a0;
  --grayscale-a12: #000805e5;

  --grayscale-contrast: #000;
  --grayscale-surface: #ffffffcc;
  --grayscale-indicator: #868e8b;
  --grayscale-track: #868e8b;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .light, :root {
      --grayscale-1: color(display-p3 0.986 0.992 0.988);
      --grayscale-2: color(display-p3 0.97 0.977 0.974);
      --grayscale-3: color(display-p3 0.935 0.944 0.94);
      --grayscale-4: color(display-p3 0.904 0.913 0.909);
      --grayscale-5: color(display-p3 0.875 0.885 0.88);
      --grayscale-6: color(display-p3 0.844 0.854 0.849);
      --grayscale-7: color(display-p3 0.8 0.811 0.806);
      --grayscale-8: color(display-p3 0.725 0.738 0.732);
      --grayscale-9: color(display-p3 0.531 0.556 0.546);
      --grayscale-10: color(display-p3 0.492 0.515 0.506);
      --grayscale-11: color(display-p3 0.377 0.395 0.389);
      --grayscale-12: color(display-p3 0.107 0.129 0.118);

      --grayscale-a1: #00804004;
      --grayscale-a2: #00402008;
      --grayscale-a3: #002d1e11;
      --grayscale-a4: #001f1519;
      --grayscale-a5: #00180820;
      --grayscale-a6: #00140d28;
      --grayscale-a7: #00140a34;
      --grayscale-a8: #000f0847;
      --grayscale-a9: #00110b79;
      --grayscale-a10: #00100a83;
      --grayscale-a11: #000a07a0;
      --grayscale-a12: #000805e5;

      --grayscale-contrast: #000;
      --grayscale-surface: color(display-p3 1 1 1 / 80%);
      --grayscale-indicator: color(display-p3 0.531 0.556 0.546);
      --grayscale-track: color(display-p3 0.531 0.556 0.546);
    }
  }
}


.dark {
  --accent-1: #0e1919;
  --accent-2: #101d1e;
  --accent-3: #052e2f;
  --accent-4: #003b3d;
  --accent-5: #00484b;
  --accent-6: #005759;
  --accent-7: #096a6d;
  --accent-8: #088386;
  --accent-9: #4cc5c9;
  --accent-10: #3ebabe;
  --accent-11: #57cfd3;
  --accent-12: #b8eff0;

  --accent-a1: #ed2e000c;
  --accent-a2: #f074000e;
  --accent-a3: #18f95419;
  --accent-a4: #00fda127;
  --accent-a5: #00ffc535;
  --accent-a6: #00fed346;
  --accent-a7: #14fee45b;
  --accent-a8: #0dfdee77;
  --accent-a9: #64fffebf;
  --accent-a10: #57fffcb3;
  --accent-a11: #6cfefecb;
  --accent-a12: #c5fefeee;

  --accent-contrast: #fff;
  --accent-surface: #1d221280;
  --accent-indicator: #4cc5c9;
  --accent-track: #4cc5c9;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --accent-1: oklch(20.3% 0.016 198.2);
      --accent-2: oklch(22% 0.0181 198.2);
      --accent-3: oklch(27.5% 0.043 198.2);
      --accent-4: oklch(31.6% 0.0618 198.2);
      --accent-5: oklch(36.2% 0.0684 198.2);
      --accent-6: oklch(41.3% 0.072 198.2);
      --accent-7: oklch(47.6% 0.0789 198.2);
      --accent-8: oklch(55.3% 0.0925 198.2);
      --accent-9: oklch(75.8% 0.1063 198.2);
      --accent-10: oklch(72.3% 0.1063 198.2);
      --accent-11: oklch(78.8% 0.1063 198.2);
      --accent-12: oklch(91.5% 0.0555 198.2);

      --accent-a1: color(display-p3 0.9843 0.2157 0 / 0.033);
      --accent-a2: color(display-p3 0.9922 0.5333 0 / 0.045);
      --accent-a3: color(display-p3 0.4627 1 0.3804 / 0.091);
      --accent-a4: color(display-p3 0.4039 0.9961 0.6431 / 0.148);
      --accent-a5: color(display-p3 0.4196 1 0.7804 / 0.204);
      --accent-a6: color(display-p3 0.4275 0.9961 0.8353 / 0.269);
      --accent-a7: color(display-p3 0.4627 1 0.9137 / 0.347);
      --accent-a8: color(display-p3 0.4627 1 0.949 / 0.455);
      --accent-a9: color(display-p3 0.5804 1 1 / 0.738);
      --accent-a10: color(display-p3 0.5569 1 0.9961 / 0.689);
      --accent-a11: color(display-p3 0.5882 0.9961 1 / 0.785);
      --accent-a12: color(display-p3 0.8235 0.9961 1 / 0.925);

      --accent-contrast: #fff;
      --accent-surface: color(display-p3 0.1176 0.1333 0.0627 / 0.5);
      --accent-indicator: oklch(75.8% 0.1063 198.2);
      --accent-track: oklch(75.8% 0.1063 198.2);
    }
  }
}


.dark {
  --grayscale-1: #121113;
  --grayscale-2: #1a191b;
  --grayscale-3: #232225;
  --grayscale-4: #2b292d;
  --grayscale-5: #323035;
  --grayscale-6: #3c393f;
  --grayscale-7: #49474e;
  --grayscale-8: #625f69;
  --grayscale-9: #6f6d78;
  --grayscale-10: #7c7a85;
  --grayscale-11: #b5b2bc;
  --grayscale-12: #eeeef0;

  --grayscale-a1: #00000000;
  --grayscale-a2: #f5f4f609;
  --grayscale-a3: #ebeaf814;
  --grayscale-a4: #eee5f81d;
  --grayscale-a5: #efe6fe25;
  --grayscale-a6: #f1e6fd30;
  --grayscale-a7: #eee9ff40;
  --grayscale-a8: #eee7ff5d;
  --grayscale-a9: #eae6fd6e;
  --grayscale-a10: #ece9fd7c;
  --grayscale-a11: #f5f1ffb7;
  --grayscale-a12: #fdfdffef;

  --grayscale-contrast: #fff;
  --grayscale-surface: rgba(0, 0, 0, 0.05);
  --grayscale-indicator: #6f6d78;
  --grayscale-track: #6f6d78;
}

@supports (color: color(display-p3 1 1 1)) {
  @media (color-gamut: p3) {
    .dark {
      --grayscale-1: color(display-p3 0.07 0.067 0.074);
      --grayscale-2: color(display-p3 0.101 0.098 0.105);
      --grayscale-3: color(display-p3 0.138 0.134 0.144);
      --grayscale-4: color(display-p3 0.167 0.161 0.175);
      --grayscale-5: color(display-p3 0.196 0.189 0.206);
      --grayscale-6: color(display-p3 0.232 0.225 0.245);
      --grayscale-7: color(display-p3 0.286 0.277 0.302);
      --grayscale-8: color(display-p3 0.383 0.373 0.408);
      --grayscale-9: color(display-p3 0.434 0.428 0.467);
      --grayscale-10: color(display-p3 0.487 0.48 0.519);
      --grayscale-11: color(display-p3 0.707 0.7 0.735);
      --grayscale-12: color(display-p3 0.933 0.933 0.94);

      --grayscale-a1: #00000000;
      --grayscale-a2: #f5f4f609;
      --grayscale-a3: #ebeaf814;
      --grayscale-a4: #eee5f81d;
      --grayscale-a5: #efe6fe25;
      --grayscale-a6: #f1e6fd30;
      --grayscale-a7: #eee9ff40;
      --grayscale-a8: #eee7ff5d;
      --grayscale-a9: #eae6fd6e;
      --grayscale-a10: #ece9fd7c;
      --grayscale-a11: #f5f1ffb7;
      --grayscale-a12: #fdfdffef;

      --grayscale-contrast: #fff;
      --grayscale-surface: color(display-p3 0 0 0 / 5%);
      --grayscale-indicator: color(display-p3 0.434 0.428 0.467);
      --grayscale-track: color(display-p3 0.434 0.428 0.467);
    }
  }
}

.light, :root {
  color-scheme: light;
  --accent: rgba(0, 127, 144, 1);
  --background: rgba(255, 255, 255, 1);
  --border: rgba(225, 232, 239, 1);
  --sidebar-background: rgba(249, 251, 253, 1);
  --header-background: rgba(255, 255, 255, 1);
  --card-background: rgba(243, 249, 255, 1);
  --theme-color: #fff;
}

.dark {
  color-scheme: dark;
  --accent: rgba(76, 197, 201, 1);
  --background: rgba(3, 24, 43, 1);
  --border: rgba(28, 53, 73, 1);
  --sidebar-background: rgba(3, 24, 43, 1);
  --header-background: rgba(3, 24, 43, 1);
  --card-background: rgba(10, 35, 56, 1);
  --theme-color: #03182b;
}

:root {
  --commify-teal: #0096aa;
  --commify-teal-bright: #1bb0b0;
  --commify-aqua: #8aced7;
  --commify-navy: #03182b;
  --commify-slate: #3e4f60;
}

.fern-header {
  border-bottom: 1px solid var(--grayscale-a4);
}

.fern-button,
#fern-header button,
.cm-button {
  border-radius: 0 !important;
}

.fern-button.filled {
  background-color: var(--commify-teal-bright);
  border-radius: 0;
  font-weight: 700;
}

.fern-button.filled:hover {
  background-color: var(--commify-teal);
}
.fern-button.filled:focus-visible {
  background-color: var(--commify-teal); outline: none;
}

/* Landing page */

body:has(.cm-home) .fern-sidebar-desktop,
body:has(.cm-home) #fern-sidebar-spacer,
body:has(.cm-home) .fern-header-search-bar,
body:has(.cm-home) #fern-ask-ai-button,
body:has(.cm-home) .fern-header-tabs,
.fern-layout-overview:has(.cm-home) > article > header,
.fern-layout-overview:has(.cm-home) .fern-layout-footer-toolbar,
.fern-layout-overview:has(.cm-home) .fern-footer-nav,
.fern-layout-overview:has(.cm-home) .grow {
  display: none !important;
}

body:has(.cm-home) {
  overflow-x: hidden;
}

.fern-layout-overview:has(.cm-home) {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.fern-layout-overview:has(.cm-home) .fern-layout-footer {
  margin: clamp(3rem, 6vw, 4.5rem) auto 2rem;
  width: min(1240px, calc(100% - 4rem));
}

.fern-layout-overview:has(.cm-home) > article {
  max-width: none !important;
  width: 100%;
}

main.fern-main:has(.cm-home),
.fern-layout-content-wrapper:has(.cm-home),
.fern-layout-overview:has(.cm-home),
.fern-layout-overview:has(.cm-home) > article {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.cm-home {
  --cm-ink: var(--commify-navy);
  --cm-muted: var(--commify-slate);
  --cm-accent: var(--commify-teal);
  --cm-surface: #ffffff;
  --cm-soft: #f3f9ff;
  --cm-line: #e1e8ef;
  color: var(--cm-ink);
  width: 100%;
}

.dark .cm-home {
  --cm-ink: #ffffff;
  --cm-muted: #b8c7d4;
  --cm-accent: #4cc5c9;
  --cm-surface: #03182b;
  --cm-soft: #0a2338;
  --cm-line: #1c3549;
}

.cm-home h2,
.cm-home h3 {
  color: var(--cm-ink);
  margin: 0;
}

.cm-home a {
  text-decoration: none !important;
}

.cm-hero {
  align-items: center;
  background:
    radial-gradient(circle at 85% 20%, rgba(76, 197, 201, 0.16), transparent 45%),
    linear-gradient(180deg, var(--cm-surface) 0%, var(--cm-soft) 100%);
  border-bottom: 1px solid var(--cm-line);
  display: flex;
  gap: clamp(2rem, 6vw, 7rem);
  justify-content: space-between;
  min-height: min(600px, calc(100vh - 6rem));
  overflow: hidden;
  padding: clamp(3rem, 6vw, 5rem) max(2rem, calc((100% - 1240px) / 2));
}

.cm-hero__content {
  max-width: 680px;
}

.cm-eyebrow {
  color: var(--cm-accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.cm-hero__title {
  color: var(--cm-ink);
  font-size: clamp(2.2rem, 3.6vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

.cm-hero__title p {
  margin: 0;
}

.cm-accent {
  background: linear-gradient(90deg, #0096aa, #4cc5c9);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cm-hero__lede {
  color: var(--cm-muted);
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 1.25rem 0 0;
  max-width: 560px;
}

.cm-hero__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 2rem;
}

.cm-button {
  align-items: center;
  display: inline-flex;
  font-size: 0.95rem;
  font-weight: 700;
  gap: 0.5rem;
  min-height: 2.9rem;
  padding: 0.7rem 1.35rem;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.cm-button:hover {
  transform: translateY(-2px);
}
.cm-button:focus-visible {
  transform: translateY(-2px); outline: none;
}

.cm-button--primary {
  background: var(--commify-teal-bright);
  box-shadow: 0 10px 22px rgba(0, 150, 170, 0.22);
  color: #ffffff !important;
}

.cm-button--primary:hover {
  background: var(--commify-teal);
}
.cm-button--primary:focus-visible {
  background: var(--commify-teal); outline: none;
}

.cm-button--primary:hover .cm-button__icon {
  transform: translateX(3px);
}
.cm-button--primary:focus-within .cm-button__icon {
  transform: translateX(3px); outline: none;
}

.cm-button__icon {
  transition: transform 0.2s ease;
}

.cm-button--ghost {
  background: var(--cm-surface);
  border: 1px solid var(--cm-line);
  color: var(--cm-ink) !important;
}

.cm-button--ghost:hover {
  border-color: var(--cm-accent);
}
.cm-button--ghost:focus-visible {
  border-color: var(--cm-accent); outline: none;
}

.cm-search {
  align-items: center;
  background: var(--cm-surface);
  border: 1px solid var(--cm-line);
  border-radius: 0;
  box-shadow: 0 12px 36px rgba(3, 24, 43, 0.08);
  color: var(--cm-muted);
  cursor: pointer;
  display: flex;
  gap: 0.75rem;
  margin-top: 1.75rem;
  max-width: 520px;
  min-height: 2.9rem;
  padding: 0.3rem 0.3rem 0.3rem 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.cm-search:hover,
.cm-search:focus-visible {
  border-color: var(--cm-accent);
  box-shadow: 0 16px 42px rgba(0, 150, 170, 0.16);
  outline: none;
  transform: translateY(-2px);
}

.cm-search > span:first-of-type {
  flex: 1;
  font-size: 0.95rem;
}

.cm-ask-ai {
  align-items: center;
  background: rgba(76, 197, 201, 0.16);
  border-radius: 0;
  color: var(--cm-accent);
  display: inline-flex;
  font-size: 0.8rem;
  font-weight: 700;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  white-space: nowrap;
}

.cm-ask-ai p {
  margin: 0;
}

.cm-ask-ai:hover,
.cm-ask-ai:focus-visible {
  background: var(--commify-teal);
  color: #ffffff;
  outline: none;
}

.cm-hero__visual {
  flex: 0 0 380px;
  height: 500px;
  position: relative;
}

.cm-glow {
  background: radial-gradient(circle, rgba(76, 197, 201, 0.35), transparent 65%);
  border-radius: 50%;
  inset: 10% -10%;
  position: absolute;
}

.cm-phone {
  background: #ffffff;
  border: 10px solid var(--commify-navy);
  border-radius: 36px;
  box-shadow: 0 30px 60px rgba(3, 24, 43, 0.25);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  left: 50%;
  padding: 2.2rem 1rem 1rem;
  position: absolute;
  top: 10px;
  transform: translateX(-50%) rotate(-3deg);
  width: 240px;
}

.cm-phone__notch {
  background: var(--commify-navy);
  border-radius: 0 0 12px 12px;
  height: 18px;
  left: 50%;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 90px;
}

.cm-phone__header {
  align-items: center;
  border-bottom: 1px solid #e1e8ef;
  display: flex;
  gap: 0.6rem;
  padding-bottom: 0.6rem;
}

.cm-phone__avatar {
  align-items: center;
  background: var(--commify-teal);
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  font-weight: 800;
  height: 32px;
  justify-content: center;
  width: 32px;
}

.cm-phone__name {
  color: var(--commify-navy);
  font-size: 0.85rem;
  font-weight: 800;
}

.cm-phone__meta {
  color: var(--commify-teal);
  font-size: 0.7rem;
  font-weight: 700;
}

.cm-bubble {
  border-radius: 14px;
  font-size: 0.78rem;
  line-height: 1.4;
  max-width: 85%;
  padding: 0.55rem 0.75rem;
}

.cm-bubble--in {
  align-self: flex-start;
  background: #eef3f7;
  border-bottom-left-radius: 4px;
  color: var(--commify-navy);
}

.cm-bubble--out {
  align-self: flex-end;
  background: var(--commify-teal);
  border-bottom-right-radius: 4px;
  color: #ffffff;
}

.cm-bubble--rcs {
  align-self: flex-start;
  background: #ffffff;
  border: 1px solid #e1e8ef;
  padding: 0;
  overflow: hidden;
  width: 92%;
}

.cm-bubble__media {
  background: linear-gradient(120deg, #03182b 0%, #004b58 60%, #0096aa 100%);
  height: 70px;
}

.cm-bubble__title {
  color: var(--commify-navy);
  font-weight: 800;
  padding: 0.5rem 0.75rem 0.25rem;
}

.cm-bubble__chips {
  display: flex;
  gap: 0.35rem;
  padding: 0 0.75rem 0.6rem;
}

.cm-bubble__chips span {
  border: 1px solid var(--commify-teal);
  border-radius: 999px;
  color: var(--commify-teal);
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
}

.cm-chip,
.cm-status {
  background: #ffffff;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(3, 24, 43, 0.14);
  color: var(--commify-navy);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.45rem 0.9rem;
  position: absolute;
  animation: cm-float 6s ease-in-out infinite;
}

.cm-chip--sms { left: -10px; top: 70px; }
.cm-chip--rcs { right: -20px; top: 150px; animation-delay: -2s; }
.cm-chip--email { left: -30px; bottom: 110px; animation-delay: -4s; }

.cm-status {
  align-items: center;
  bottom: -4px;
  display: flex;
  gap: 0.45rem;
  left: 0;
  animation-delay: -3s;
}

.cm-status__dot {
  background: #1bb0b0;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(27, 176, 176, 0.2);
  height: 8px;
  width: 8px;
}

@keyframes cm-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.cm-section {
  margin: 0 auto;
  width: min(1240px, calc(100% - 4rem));
  padding: clamp(3rem, 6vw, 4.5rem) 0 0;
}

.cm-section-heading {
  margin-bottom: 2rem;
}

.cm-section-heading h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
  max-width: 32ch;
}

.cm-grid {
  display: grid;
  gap: 1.25rem;
}

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

.cm-card,
.cm-step {
  background: var(--cm-surface);
  border: 1px solid var(--cm-line);
  border-radius: 0;
  color: var(--cm-ink) !important;
  display: block;
  padding: 1.5rem;
  position: relative;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.cm-card:hover,
.cm-step:hover {
  border-color: var(--cm-accent);
  box-shadow: 0 16px 36px rgba(0, 150, 170, 0.12);
  transform: translateY(-3px);
}
.cm-card:focus-visible,
.cm-step:focus-visible {
  border-color: var(--cm-accent);
  box-shadow: 0 16px 36px rgba(0, 150, 170, 0.12);
  transform: translateY(-3px); outline: none;
}

.cm-card h3,
.cm-step h3 {
  font-size: 1.1rem;
  font-weight: 800;
}

.cm-card p,
.cm-step p {
  color: var(--cm-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0.5rem 0 0;
}

.cm-card__icon {
  align-items: center;
  background: rgba(0, 150, 170, 0.1);
  border-radius: 0;
  color: var(--cm-accent);
  display: flex;
  height: 44px;
  justify-content: center;
  margin-bottom: 1.1rem;
  width: 44px;
}

.cm-card__arrow {
  color: var(--cm-accent);
  font-weight: 800;
  position: absolute;
  right: 1.5rem;
  top: 1.5rem;
  transition: transform 0.2s ease;
}

.cm-card:hover .cm-card__arrow {
  transform: translateX(4px);
}
.cm-card:focus-within .cm-card__arrow {
  transform: translateX(4px); outline: none;
}

.cm-step {
  background: var(--cm-soft);
}

.cm-step__num {
  color: var(--cm-accent);
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin-bottom: 0.75rem;
}

.cm-step code {
  font-size: 0.85em;
}

/* Image tiles */

.cm-tile {
  align-items: center;
  aspect-ratio: 440 / 200;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.cm-tile::after {
  background: rgba(0, 150, 170, 0.55);
  content: "";
  inset: 0;
  position: absolute;
  transition: background-color 0.25s ease;
}

.cm-tile:hover::after {
  background: rgba(0, 150, 170, 0.35);
}
.cm-tile:focus-visible::after {
  background: rgba(0, 150, 170, 0.35);
}

.cm-tile__img {
  border-radius: 0 !important;
  filter: grayscale(100%);
  height: 100%;
  inset: 0;
  margin: 0 !important;
  object-fit: cover;
  pointer-events: none;
  position: absolute;
  transition: transform 0.4s ease;
  width: 100%;
}

.cm-tile:hover .cm-tile__img {
  transform: scale(1.04);
}
.cm-tile:focus-within .cm-tile__img {
  transform: scale(1.04); outline: none;
}

.cm-tile__label {
  align-items: center;
  background: #ffffff;
  color: var(--commify-navy) !important;
  display: inline-flex;
  font-size: 1rem;
  font-weight: 800;
  gap: 0.75rem;
  letter-spacing: 0.06em;
  padding: 1rem 1.5rem;
  position: relative;
  text-transform: uppercase;
  z-index: 1;
}

.cm-tile__label svg {
  color: var(--commify-teal);
  transition: transform 0.2s ease;
}

.cm-tile:hover .cm-tile__label svg {
  transform: translateX(3px);
}
.cm-tile:focus-within .cm-tile__label svg {
  transform: translateX(3px); outline: none;
}

@media (max-width: 1100px) {

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

}

@media (max-width: 900px) {

  .cm-hero { flex-direction: column; align-items: flex-start; }
  .cm-hero__visual { display: none; }
  .cm-grid--3 { grid-template-columns: 1fr; }

}

@media (max-width: 600px) {

  .cm-grid--4 { grid-template-columns: 1fr; }

}

@media (prefers-reduced-motion: reduce) {

  .cm-chip, .cm-status { animation: none; }
  .cm-button, .cm-search, .cm-card, .cm-step, .cm-tile__img { transition: none; }

}

/* Site footer */

.cm-site-footer {
  background: #333333;
  color: #cccccc;
  font-family: Nunito, sans-serif;
  padding: 20px 2rem;
  width: 100%;
}

.cm-site-footer__inner {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1160px;
}

.cm-site-footer__copyright {
  font-size: 0.8rem;
}

.cm-site-footer__links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.cm-site-footer a {
  color: #cccccc !important;
  font-size: 1rem;
  text-decoration: none;
}

.cm-site-footer a:hover {
  color: #ffffff !important;
}
.cm-site-footer a:focus-visible {
  color: #ffffff !important; outline: none;
}

.cm-site-footer__socials {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  margin-left: 0.25rem;
}

.cm-site-footer__socials a {
  display: inline-flex;
}

.cm-site-footer__socials svg {
  fill: currentColor;
  height: 16px;
  width: 16px;
}

@media (max-width: 600px) {

  .cm-site-footer__inner { flex-direction: column; align-items: flex-start; }

}