@layer cm-ds-priority {

  html body :is(
    .cmo-button:not(.cmo-button--outline, .cmo-button--ghost, .cmo-button--light, .cmo-button--secondary, .secondary, .outline, .dark-button),
    .cmo-button--primary,
    a[data-design-button="primary"],
    .n39-button:not(.n39-button--outline),
    .c38-button:not(.c38-button--outline),
    .cal29-button, .v111-btn, .v112-btn,
    a[data-reference-testimonials-button]
  ) {
    background: #006097 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
    border: 2px solid #006097 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }
  html body :is(
    .cmo-button:not(.cmo-button--outline, .cmo-button--ghost, .cmo-button--light, .cmo-button--secondary, .secondary, .outline, .dark-button),
    .cmo-button--primary,
    a[data-design-button="primary"],
    .n39-button:not(.n39-button--outline),
    .c38-button:not(.c38-button--outline),
    .cal29-button, .v111-btn, .v112-btn,
    a[data-reference-testimonials-button]
  ):hover {
    background: #004470 !important;
    border-color: #004470 !important;
    color: #ffffff !important;
  }

  html body :is(
    .cmo-button--outline, .cmo-button--ghost, .cmo-button--light, .cmo-button--secondary,
    .cmo-button.secondary, .cmo-button.outline, .cmo-button.dark-button,
    a[data-design-button="outline"], a[data-design-button="secondary"],
    .n39-button--outline, .c38-button--outline
  ) {
    background: #ffffff !important;
    background-image: none !important;
    color: #006097 !important;
    -webkit-text-fill-color: currentColor !important;
    border: 2px solid #006097 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }
  html body :is(
    .cmo-button--outline, .cmo-button--ghost, .cmo-button--light, .cmo-button--secondary,
    .cmo-button.secondary, .cmo-button.outline, .cmo-button.dark-button,
    a[data-design-button="outline"], a[data-design-button="secondary"],
    .n39-button--outline, .c38-button--outline
  ):hover {
    background: #004470 !important;
    border-color: #004470 !important;
    color: #ffffff !important;
  }

  html body :is(.cmo-button, a[data-design-button], .n39-button, .c38-button, .cal29-button, .v111-btn, .v112-btn, a[data-reference-testimonials-button]):focus-visible {
    outline: 3px solid #006097 !important;
    outline-offset: 3px !important;
  }

  html body #main-content :is(.cmo-ref-quote, .customer-testimonial),
  html body main :is(.cmo-ref-quote, .customer-testimonial) {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: #001c32 !important;
    text-align: left !important;
  }
  html body #main-content :is(.cmo-ref-quote, .customer-testimonial)::before,
  html body main :is(.cmo-ref-quote, .customer-testimonial)::before,
  html body main blockquote.proof-quote::before,
  html body main .quote-card blockquote::before {
    content: "" !important;
    display: block !important;
    width: 40px !important;
    height: 3px !important;
    margin: 0 0 16px !important;
    background: #006097 !important;
    order: -1 !important;
  }
  html body #main-content :is(.cmo-ref-quote, .customer-testimonial) > :is(blockquote, p),
  html body main :is(.cmo-ref-quote, .customer-testimonial) > :is(blockquote, p),
  html body main blockquote.proof-quote,
  html body main .quote-card blockquote {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    color: #001c32 !important;
    -webkit-text-fill-color: currentColor !important;
    font: 400 16px/1.55 Roboto, Helvetica, Arial, sans-serif !important;
    font-style: normal !important;
    text-align: left !important;
  }
  html body main :is(.cmo-ref-quote, .customer-testimonial) blockquote :is(p, q),
  html body main blockquote.proof-quote :is(p, q),
  html body main .quote-card blockquote :is(p, q) {
    margin: 0 !important;
    font: inherit !important;
    font-style: normal !important;
    color: inherit !important;
  }
  html body main :is(.cmo-ref-quote, .customer-testimonial) > figcaption {
    width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    color: #59595a !important;
    -webkit-text-fill-color: currentColor !important;
    font: 400 14px/1.45 Roboto, Helvetica, Arial, sans-serif !important;
    text-align: left !important;
  }
  html body main :is(.cmo-ref-quote, .customer-testimonial) > figcaption strong {
    display: block !important;
    margin: 0 !important;
    color: #001c32 !important;
    font: 600 14px/1.45 Roboto, Helvetica, Arial, sans-serif !important;
  }
  html body main :is(.cmo-ref-quote, .customer-testimonial) > figcaption span {
    display: block !important;
    margin: 0 !important;
    color: #59595a !important;
    font: 400 14px/1.45 Roboto, Helvetica, Arial, sans-serif !important;
  }
  html body main .customer-testimonial > .customer-testimonial__logo {
    align-self: flex-start !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
  }

  html body .site-footer .site-footer__inner {
    width: min(var(--content-width, 1110px), calc(100% - 2 * var(--content-gutter, 24px))) !important;
    max-width: var(--cmo-content-max, 1110px) !important;
    margin-inline: auto !important;
  }

  html body #cmo-contact-shortcut {
    opacity: 1 !important;
    visibility: visible !important;
    animation: none !important;
  }
  html body #cmo-contact-shortcut .cmo-contact-tab {
    background: linear-gradient(120deg, #0a9edf 0%, #41baec 100%) !important;
    color: #001c32 !important;
    -webkit-text-fill-color: currentColor !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 0 !important;
    box-shadow: 0 6px 18px rgba(0, 28, 50, 0.18) !important;
    transform: skewX(-12deg) !important;
    font-family: Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  html body #cmo-contact-shortcut .cmo-contact-tab > * {
    transform: skewX(12deg) !important;
  }
  html body #cmo-contact-shortcut .cmo-contact-tab:hover {
    background: #006097 !important;
    color: #ffffff !important;
  }
  html body #cmo-contact-shortcut .cmo-contact-tab:focus-visible {
    outline: 3px solid #001c32 !important;
    outline-offset: 3px !important;
  }

  @media (min-width: 768px) and (min-height: 540px), (min-width: 768px) and (pointer: fine) {
    html body main :is(h1, h2) {
      font-family: "Roboto Slab", Roboto, Helvetica, Arial, sans-serif !important;
      font-weight: 400 !important;
      letter-spacing: -0.01em !important;
    }
  }

  @media (max-width: 1099px) {
    html body [data-micro-responsive-hero] img {
      width: 100% !important;
      height: auto !important;
      max-height: 420px !important;
      object-fit: contain !important;
    }
  }
}


@layer cm-ds-priority {
  @media (max-width: 1099.98px) {
    html body #main-content :is([data-fullbleed-hero]:not([data-hero-flow="overlay"]), [data-v182-width-hero="detail"]) > .cmo-hero-layout {
      background: transparent !important;
      color: #ffffff !important;
    }
    html body #main-content :is([data-fullbleed-hero]:not([data-hero-flow="overlay"]), [data-v182-width-hero="detail"]) > .cmo-hero-layout :is(h1, h2) {
      color: #ffffff !important;
      -webkit-text-fill-color: currentColor !important;
    }
    html body #main-content :is([data-fullbleed-hero]:not([data-hero-flow="overlay"]), [data-v182-width-hero="detail"]) > .cmo-hero-layout :where(p, li, dd, dt):not(.cmo-eyebrow) {
      color: #ededed !important;
      -webkit-text-fill-color: currentColor !important;
    }
    html body #main-content :is([data-fullbleed-hero]:not([data-hero-flow="overlay"]), [data-v182-width-hero="detail"]) > .cmo-hero-layout .cmo-eyebrow {
      color: #0a9edf !important;
      -webkit-text-fill-color: currentColor !important;
    }
    html body #main-content :is([data-fullbleed-hero]:not([data-hero-flow="overlay"]), [data-v182-width-hero="detail"]) > .cmo-hero-layout a:not(.cmo-button, [data-design-button], [class*="button"], [class*="btn"]) {
      color: #ffffff !important;
      -webkit-text-fill-color: currentColor !important;
      text-decoration-color: #41baec !important;
    }
  }
}

@layer cm-ds-priority {
  html body #main-content [data-v213-wide-hero="micro"] {
    background: linear-gradient(120deg, #001c32, #004470) !important;
  }
  html body #main-content [data-micro-responsive-hero] {
    background: transparent !important;
  }
}

@layer cm-ds-priority {
  html body [data-design-link-card][data-cmo-link-card]:not(:has(a:not([data-cmo-card-title-link]))) {
    position: relative !important;
    cursor: pointer !important;
  }
  html body [data-design-link-card][data-cmo-link-card]:not(:has(a:not([data-cmo-card-title-link]))) a[data-cmo-card-title-link]::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
  }
  html body :is(a[data-design-link-card]:is(:hover, :focus-visible),
                [data-design-link-card][data-cmo-link-card]:not(:has(a:not([data-cmo-card-title-link]))):is(:hover, :focus-within),
                [data-design-link-card][data-cmo-link-card]:has(a:not([data-cmo-card-title-link])):has(a:hover, a:focus-visible)) {
    background: #ededed !important;
    background-image: none !important;
    color: #001c32 !important;
    -webkit-text-fill-color: currentColor !important;
    border-color: #006097 !important;
  }
  html body :is(a[data-design-link-card]:is(:hover, :focus-visible),
                [data-design-link-card][data-cmo-link-card]:not(:has(a:not([data-cmo-card-title-link]))):is(:hover, :focus-within),
                [data-design-link-card][data-cmo-link-card]:has(a:not([data-cmo-card-title-link])):has(a:hover, a:focus-visible))
                :is([data-design-label], [data-design-prose], p, li, span:not([class*="icon"])) {
    color: #001c32 !important;
    -webkit-text-fill-color: currentColor !important;
  }
  html body :is(a[data-design-link-card]:is(:hover, :focus-visible),
                [data-design-link-card][data-cmo-link-card]:not(:has(a:not([data-cmo-card-title-link]))):is(:hover, :focus-within),
                [data-design-link-card][data-cmo-link-card]:has(a:not([data-cmo-card-title-link])):has(a:hover, a:focus-visible))
                :is([data-design-link-title], [data-cmo-card-title-link], h3) {
    color: #006097 !important;
    -webkit-text-fill-color: currentColor !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
  }
  html body [class*="related-links"] > a:is(:hover, :focus-visible) {
    background: #ededed !important;
    background-image: none !important;
    color: #001c32 !important;
    -webkit-text-fill-color: currentColor !important;
    border-color: #006097 !important;
  }
}

@layer cm-ds-priority {
  @media (min-width: 1100px) {
    html body #cmo-contact-shortcut .cmo-contact-tab {
      margin-right: -28px !important;
      padding-right: 46px !important;
      border-right: 0 !important;
    }
  }
}

@layer cm-ds-priority {
  html body main[data-brand="comframe"] section:is([data-design-hero], [data-page-hero]) {
    border-style: solid !important;
    border-width: 0 0 6px 0 !important;
    border-image: linear-gradient(90deg, #0a9edf 0%, #59c1d8 35%, #ffdd00 100%) 1 !important;
  }
  html body main[data-brand="comframe"] section[data-design-surface="dark"] .cmo-eyebrow {
    color: #ffdd00 !important;
    -webkit-text-fill-color: currentColor !important;
  }
}

@layer cm-ds-priority {
  html body main:not(.hp) section:not([data-design-hero], [data-page-hero], .v85-final-cta, .cmo-newsletter, .cmo-proof-strip)
    :is(p, ul, ol, h2, h3, h4, .g197-section-intro) {
    max-width: none !important;
  }

  html body main:not(.hp) section:is([data-design-surface="light"], [data-design-surface="white"], [data-design-surface="mist"], [data-design-surface="grey"])
    + section[data-design-surface="dark"]:not([data-design-hero], [data-page-hero], .cmo-proof-strip) {
    --cm-slant: clamp(24px, 4vw, 64px);
    position: relative !important;
    border-top: var(--cm-slant) solid transparent !important;
    background-origin: border-box !important;
  }
  html body main:not(.hp) section:is([data-design-surface="light"], [data-design-surface="white"], [data-design-surface="mist"], [data-design-surface="grey"])
    + section[data-design-surface="dark"]:not([data-design-hero], [data-page-hero], .cmo-proof-strip)::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(-1 * var(--cm-slant) - 2px) !important;
    height: calc(var(--cm-slant) + 2px) !important;
    background: #ffffff !important;
    clip-path: polygon(0 0, 100% 0, 100% 2px, 0 100%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }
  html body main:not(.hp) section:is([data-design-surface="mist"], [data-design-surface="grey"])
    + section[data-design-surface="dark"]:not([data-design-hero], [data-page-hero], .cmo-proof-strip)::before {
    background: #ededed !important;
  }
  html body main:not(.hp) section:is([data-design-surface="light"], [data-design-surface="white"], [data-design-surface="mist"], [data-design-surface="grey"]):has(+ section[data-design-surface="dark"]:not([data-design-hero], [data-page-hero], .cmo-proof-strip)) {
    border-bottom: 0 !important;
  }
  html body main:not(.hp) section:is([data-design-surface="light"], [data-design-surface="white"], [data-design-surface="mist"], [data-design-surface="grey"])
    + section[data-design-surface="dark"]:not([data-design-hero], [data-page-hero], .cmo-proof-strip) + * {
    border-top: 0 !important;
  }
}

:where(strong, b, h3, h4, h5, h6, th, dt, summary) { font-weight: 600; }
:where(h1, h2) { font-weight: 600; }

@media (min-width: 768px) and (min-height: 540px), (min-width: 768px) and (pointer: fine) {
  @font-face {
    font-family: "Roboto Slab";
    src: url("/assets/fonts/roboto-slab-latin-wght-100-900-50cf7d32c18e.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
  }
}

:root {
  --dark-blue: #001c32; --mid-blue: #004470; --blue: #006097; --sky: #0a9edf; --light-blue: #41baec;
  --turquoise: #59c1d8; --teal: #18b0cc; --white: #ffffff; --silver-white: #ededed; --light-grey: #c8c8c8;
  --grey: #a5a5a5; --mid-grey: #808080; --dark-grey: #59595a; --black: #000000; --yellow: #ffdd00;
  --green: #3fa534; --red: #e30512; --marker: #ee7203; --spot: #e6007e;
  --ink: var(--dark-blue); --muted: var(--dark-grey); --line-dark: rgba(255, 255, 255, 0.24); --logo-blue: #3671c1;
  --font-sans: Roboto, Helvetica, Arial, sans-serif;
  --font-slab: "Roboto Slab", Roboto, Helvetica, Arial, sans-serif;
  --space-4: 4px; --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-24: 24px;
  --space-32: 32px; --space-40: 40px; --space-56: 56px; --space-72: 72px; --space-96: 96px;
  --radius-0: 0; --radius-round: 50%;
  --shadow-overlay: 0 6px 18px rgba(0, 28, 50, 0.12);
  --container-max: 1110px; --container-inset-lg: 44px; --container-inset-md: 32px; --container-inset-sm: 18px;
  --text-measure: 72ch; --target-min: 44px;
}

.cm-root { font-family: var(--font-sans); color: var(--ink); background: var(--white); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.cm-root *, .cm-root *::before, .cm-root *::after { box-sizing: border-box; }
.cm-container { width: min(var(--container-max), calc(100% - 2 * var(--container-inset-lg))); margin-inline: auto; }
@media (max-width: 1180px) { .cm-container { width: calc(100% - 2 * var(--container-inset-md)); } }
@media (max-width: 620px) { .cm-container { width: calc(100% - 2 * var(--container-inset-sm)); } }

.cm-h1 { font-size: 48px; line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; margin: 0; }
.cm-h2 { font-size: 36px; line-height: 1.12; font-weight: 600; letter-spacing: -0.025em; margin: 0; max-width: 30ch; }
.cm-h3 { font-size: 28px; line-height: 1.18; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.cm-card-title { font-size: 22px; line-height: 1.25; font-weight: 600; letter-spacing: -0.015em; margin: 0; }
.cm-lead { font-size: 18px; line-height: 1.5; margin: 0; }
.cm-body { font-size: 16px; line-height: 1.6; margin: 0; }
.cm-meta { font-size: 14px; line-height: 1.5; margin: 0; color: var(--muted); }
.cm-label { font-size: 14px; line-height: 1.4; font-weight: 600; margin: 0; color: var(--blue); }
@media (max-width: 720px) {
  .cm-h1 { font-size: 32px; }
  .cm-h2 { font-size: 28px; }
  .cm-h3 { font-size: 24px; }
}

.cm-dark { background: var(--dark-blue); color: var(--white); }
.cm-dark .cm-label { color: var(--sky); }
.cm-dark .cm-meta { color: var(--silver-white); }

.cm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--target-min); padding: 12px 22px;
  border: 2px solid var(--blue); border-radius: var(--radius-0);
  font: 600 16px/1.3 var(--font-sans); text-decoration: none; cursor: pointer;
  transition: background-color .18s cubic-bezier(.22, 1, .36, 1), border-color .18s cubic-bezier(.22, 1, .36, 1), color .18s cubic-bezier(.22, 1, .36, 1);
}
.cm-btn--primary { background: var(--blue); color: var(--white); }
.cm-btn--primary:hover { background: var(--mid-blue); border-color: var(--mid-blue); }
.cm-btn--secondary { background: var(--white); color: var(--blue); }
.cm-btn--secondary:hover { background: var(--mid-blue); border-color: var(--mid-blue); color: var(--white); }
.cm-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.cm-dark .cm-btn:focus-visible, .cm-band .cm-btn:focus-visible { outline-color: var(--sky); }
.cm-btn-row { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }

.cm-link {
  color: var(--blue); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--light-blue);
}
.cm-link:hover { text-decoration-color: var(--blue); color: var(--mid-blue); }
.cm-link:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.cm-dark .cm-link, .cm-band .cm-link { color: var(--white); text-decoration-color: var(--sky); }
.cm-dark .cm-link:focus-visible, .cm-band .cm-link:focus-visible { outline-color: var(--sky); }
.cm-link--external::after { content: " \2197"; }

.cm-hero { background: var(--dark-blue); color: var(--white); padding-block: var(--space-72) var(--space-56); }
.cm-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-56); align-items: center; }
.cm-hero__copy { display: grid; gap: var(--space-16); max-width: 40rem; }
.cm-hero__copy .cm-label { color: var(--sky); }
.cm-hero__copy .cm-h1 { max-width: 15em; }
.cm-hero__copy .cm-lead { color: var(--white); max-width: 38em; }
.cm-hero__copy .cm-body { color: var(--silver-white); max-width: 38em; }
.cm-hero__copy .cm-btn-row { margin-top: var(--space-8); }
.cm-hero__media { margin: 0; background: var(--dark-blue); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; }
.cm-hero__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 900px) { .cm-hero__grid { grid-template-columns: 1fr; gap: var(--space-32); } }

.cm-facts { background: var(--mid-blue); color: var(--white); }
.cm-facts__list { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cm-facts__item { display: grid; gap: var(--space-4); padding: var(--space-24); }
.cm-facts__item:first-child { padding-left: 0; }
.cm-facts__item + .cm-facts__item { border-left: 1px solid var(--line-dark); }
.cm-facts__value { font-size: 22px; line-height: 1.2; font-weight: 600; }
.cm-facts__text { font-size: 14px; line-height: 1.45; color: var(--silver-white); }
@media (max-width: 980px) {
  .cm-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cm-facts__item:nth-child(3) { border-left: 0; padding-left: 0; }
  .cm-facts__item:nth-child(n + 3) { border-top: 1px solid var(--line-dark); }
}

.cm-anchor { background: var(--blue); color: var(--white); }
.cm-anchor__inner { display: flex; align-items: center; gap: var(--space-24); min-height: 56px; overflow-x: auto; }
.cm-anchor__back { font-size: 14px; font-weight: 600; color: var(--white); text-decoration: none; white-space: nowrap; padding-right: var(--space-24); border-right: 1px solid var(--line-dark); }
.cm-anchor__label { font-size: 14px; color: var(--silver-white); white-space: nowrap; }
.cm-anchor__links { display: flex; gap: var(--space-24); list-style: none; margin: 0; padding: 0; }
.cm-anchor__links a { display: inline-flex; align-items: center; min-height: var(--target-min); font-size: 14px; font-weight: 600; color: var(--white); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; }
.cm-anchor__links a:hover, .cm-anchor__links a[aria-current="true"] { border-bottom-color: var(--sky); }
.cm-anchor a:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

.cm-section { padding-block: var(--space-96); }
.cm-section--silver-white { background: var(--silver-white); }
@media (max-width: 980px) { .cm-section { padding-block: var(--space-72); } }
@media (max-width: 720px) { .cm-section { padding-block: var(--space-56); } }
.cm-heading { display: grid; gap: var(--space-16); max-width: 68ch; margin-bottom: var(--space-40); }
.cm-heading .cm-label { margin-bottom: calc(var(--space-8) * -1); }
.cm-heading .cm-lead { color: var(--muted); }
.cm-dark .cm-heading .cm-lead { color: var(--silver-white); }

.cm-grid { display: grid; gap: var(--space-24); }
.cm-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cm-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .cm-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .cm-grid--2, .cm-grid--3 { grid-template-columns: 1fr; } }
.cm-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--light-grey); border-radius: var(--radius-0); color: var(--ink); height: 100%; }
.cm-card__media { margin: 0; aspect-ratio: 16 / 9; background: var(--silver-white); overflow: hidden; }
.cm-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cm-card__media--product img { object-fit: contain; padding: var(--space-16); }
.cm-card__body { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-32); flex: 1; }
.cm-card__foot { margin-top: auto; padding-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-12) var(--space-24); align-items: center; }
.cm-card--text { border-top: 3px solid var(--blue); }
@media (max-width: 720px) { .cm-card__body { padding: var(--space-24); } }

.cm-quote { margin: 0; padding: 0; border: 0; max-width: 64ch; }
.cm-quote::before { content: ""; display: block; width: 40px; height: 3px; margin-bottom: var(--space-16); background: var(--blue); }
.cm-quote blockquote { margin: 0; padding: 0; border: 0; }
.cm-quote blockquote p { margin: 0; font-size: 16px; line-height: 1.55; font-style: normal; color: var(--ink); }
.cm-quote--lead blockquote p { font-size: 18px; line-height: 1.5; }
.cm-quote figcaption { margin-top: var(--space-12); font-size: 14px; line-height: 1.45; color: var(--muted); }
.cm-quote figcaption strong { display: block; color: var(--ink); font-weight: 600; }
.cm-quote figcaption span { display: block; }
.cm-dark .cm-quote::before { background: var(--sky); }
.cm-dark .cm-quote blockquote p { color: var(--white); }
.cm-dark .cm-quote figcaption { color: var(--silver-white); }
.cm-dark .cm-quote figcaption strong { color: var(--white); }

.cm-table-wrap { overflow-x: auto; border: 1px solid var(--light-grey); background: var(--white); }
.cm-table { border-collapse: collapse; width: 100%; font-size: 16px; line-height: 1.5; color: var(--ink); }
.cm-table caption { text-align: left; padding: var(--space-12) var(--space-16); font-size: 14px; color: var(--muted); caption-side: bottom; border-top: 1px solid var(--light-grey); }
.cm-table th, .cm-table td { text-align: left; vertical-align: top; padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--light-grey); }
.cm-table thead th { background: var(--silver-white); font-size: 14px; font-weight: 600; white-space: nowrap; }
.cm-table tbody th { font-weight: 600; }
.cm-table tbody tr:last-child > * { border-bottom: 0; }

.cm-close { background: var(--dark-blue); color: var(--white); padding-block: var(--space-72); }
.cm-close__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-32) var(--space-56); align-items: end; }
.cm-close .cm-lead { color: var(--silver-white); max-width: 52ch; margin-top: var(--space-16); }
@media (max-width: 980px) { .cm-close__grid { grid-template-columns: 1fr; } }

.cm-footnote { border-top: 1px solid var(--light-grey); padding-block: var(--space-24) var(--space-40); }
.cm-footnote p { margin: 0; max-width: 100ch; font-size: 14px; line-height: 1.6; color: var(--muted); }
.cm-footnote a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) { .cm-btn { transition: none; } }

@media (min-width: 768px) and (min-height: 540px), (min-width: 768px) and (pointer: fine) {
  .cm-h1, .cm-h2 { font-family: var(--font-slab); font-weight: 400; letter-spacing: -0.01em; }
}

.cm-tab { position: relative; display: inline-flex; align-items: center; padding: 4px 14px; font: 600 14px/1.4 var(--font-sans); color: var(--dark-blue); isolation: isolate; }
.cm-tab::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, var(--sky), var(--light-blue)); transform: skewX(-12deg); }
.cm-tab--blue { color: var(--white); }
.cm-tab--blue::before { background: linear-gradient(120deg, var(--mid-blue), var(--blue)); }

.cm-contact-flag {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--target-min); padding: 10px 18px;
  font: 600 14px/1.2 var(--font-sans); color: var(--dark-blue); text-decoration: none; cursor: pointer;
  background: linear-gradient(120deg, var(--sky), var(--light-blue)); border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 0; box-shadow: var(--shadow-overlay); transform: skewX(-12deg);
}
.cm-contact-flag > * { transform: skewX(12deg); }
.cm-contact-flag svg { width: 20px; height: 20px; }
.cm-contact-flag:hover { background: var(--blue); color: var(--white); }
.cm-contact-flag:focus-visible { outline: 3px solid var(--dark-blue); outline-offset: 3px; }

.cm-dark.cm-comframe .cm-label, .cm-dark .cm-comframe-accent { color: var(--yellow); }
.cm-dark.cm-comframe .cm-quote::before { background: var(--yellow); }