/* V3 CIS system: one palette across every section, from discovery to consultation. */
:root {
  --cis-cream: #fff9eb;
  --cis-mint: #b9e5d9;
  --cis-green: #9bcb8a;
  --cis-green-deep: #39744a;
  --cis-yellow: #ffd53d;
  --cis-yellow-deep: #b77b10;
  --cis-navy: #273447;
  /* Auxiliary only: charts, active states, interaction details and small status accents. */
  --cis-mist-indigo: var(--mist-indigo, #3e697a);
  --cis-navy-soft: #34445a;
  --cis-copy: #4e6170;
  --cis-line: rgba(39, 52, 71, .18);
}

body,
.section-light,
.proof,
.updates-editorial,
.site-header { background: var(--cis-cream); color: var(--cis-navy); }

.section-dark,
.transform,
.transform-v3,
.pricing,
.contact { background: var(--cis-navy); color: var(--cis-cream); }

.footer { background: var(--cis-navy-soft); color: var(--cis-mint); }
.footer .back-top { color: var(--cis-yellow); }

/* Hero remains the light CIS scene; all type sits on the same navy-and-green hierarchy. */
.hero.section-dark {
  background: linear-gradient(90deg, var(--cis-mint) 0%, var(--cis-mint) 34%, var(--cis-cream) 74%, var(--cis-cream) 100%);
}
.hero-refresh h1,
.hero-refresh__description,
.hero-refresh__regions b { color: var(--cis-navy); }
.hero-refresh h1 span,
.hero-refresh__eyebrow,
.hero-refresh__lead,
.hero-refresh__proof b { color: var(--cis-green-deep); }
.hero-refresh__proof small { color: var(--cis-copy); }
.hero-proof-icon--years svg rect { fill: var(--cis-green-deep); }
.hero-proof-icon--hosts svg,
.hero-proof-icon--fans svg { stroke: var(--cis-green-deep); }

/* Editorial content: cream surfaces, mint structure, navy authority and yellow only for action. */
.updates-editorial__frame {
  background: linear-gradient(135deg, rgba(185, 229, 217, .46), var(--cis-cream) 46%, rgba(155, 203, 138, .2));
  border: 1px solid rgba(39, 52, 71, .08);
}
.updates-editorial__intro {
  background: linear-gradient(150deg, rgba(185, 229, 217, .72), var(--cis-cream));
  border-color: var(--cis-line);
}
.updates-editorial__intro::after,
.updates-editorial__eyebrow::before { background: var(--cis-yellow); }
.updates-editorial__eyebrow,
.updates-editorial__topic p,
.updates-editorial__heading h2 .updates-editorial__heading-kicker { color: var(--cis-green-deep); }
.updates-editorial__intro h2,
.updates-editorial__topic h3,
.updates-editorial__heading h2,
.article-preview h3 { color: var(--cis-navy); }
.updates-editorial__intro > p:last-child,
.updates-editorial__topic small,
.article-preview__meta time { color: var(--cis-copy); }
.updates-editorial__topic {
  background: var(--cis-cream);
  border-color: var(--cis-line);
}
.updates-editorial__topic-icon,
.updates-editorial__heading h2 .updates-editorial__heading-kicker {
  background: var(--cis-mint);
  border-color: rgba(39, 52, 71, .12);
  color: var(--cis-green-deep);
}
.updates-editorial__topic-icon--live i { background: var(--cis-yellow); border-color: var(--cis-cream); }
.updates-editorial__facebook {
  background: linear-gradient(105deg, var(--cis-navy), var(--cis-navy-soft));
  color: var(--cis-cream);
}
.updates-editorial__facebook h3 { color: var(--cis-cream); }
.updates-editorial__facebook p { color: var(--cis-mint); }
.updates-editorial__facebook small { color: rgba(255, 249, 235, .78); }
.updates-editorial__facebook a { background: var(--cis-yellow); color: var(--cis-navy); }
.updates-editorial__facebook a:hover { background: var(--cis-mint); color: var(--cis-navy); }
.updates-editorial__facebook a b { background: #315cbd; color: #fff; }
.article-preview { background: var(--cis-cream); border: 1px solid rgba(39, 52, 71, .1); }
.article-preview__meta span { background: var(--cis-mint); border-color: var(--cis-line); border-left-color: var(--cis-green-deep); color: var(--cis-green-deep); }

/* The live-growth animation now belongs to the same navy, mint and yellow scene. */
.transform-v3__stage { border-color: rgba(185, 229, 217, .42); }
.transform-v3__bridge,
.transform-v3__replay { background: linear-gradient(135deg, rgba(39, 52, 71, .96), rgba(52, 68, 90, .94)); border-color: rgba(185, 229, 217, .48); }
.transform-v3__bridge > p,
.transform-v3__replay { color: var(--cis-cream); }
.transform-v3__steps > span,
.transform-v3__steps small { color: rgba(255, 249, 235, .76); }
.transform-v3__steps i { background: rgba(185, 229, 217, .16); border-color: rgba(185, 229, 217, .5); color: var(--cis-mint); }
.transform-v3__stage.is-playing .transform-v3__steps > span { color: var(--cis-cream); }
.transform-v3__replay:hover,
.transform-v3__replay:focus-visible { background: var(--cis-yellow); color: var(--cis-navy); }

/* Motion demo: the dark chapter uses the same navy panel language as the rest
   of the site, while mint and yellow only indicate progression and results. */
.transform-v3 {
  background:
    radial-gradient(ellipse 42% 66% at 5% 50%, rgba(185, 229, 217, .08), transparent 70%),
    radial-gradient(ellipse 36% 54% at 96% 8%, rgba(255, 213, 61, .055), transparent 72%),
    var(--cis-navy);
}
.transform-v3__stage {
  background: #223147;
  border-color: rgba(185, 229, 217, .38);
  box-shadow: 0 22px 56px rgba(13, 23, 36, .38);
}
.transform-v3__stage::before {
  background: linear-gradient(135deg, rgba(39, 52, 71, .74) 0%, rgba(39, 52, 71, .22) 52%, rgba(52, 68, 90, .58) 100%);
  content: "";
  inset: 0;
  mix-blend-mode: color;
  opacity: .62;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}
.transform-v3__frame { filter: brightness(1.03) contrast(.97) saturate(.78); }
.transform-v3__focus {
  background: radial-gradient(ellipse at center, rgba(185, 229, 217, .30) 0%, rgba(185, 229, 217, .1) 42%, transparent 74%);
  mix-blend-mode: normal;
}
.transform-v3__focus--batch-two-phone,
.transform-v3__focus--batch-two-flow {
  background: radial-gradient(ellipse at center, rgba(255, 213, 61, .28) 0%, rgba(255, 213, 61, .09) 42%, transparent 74%);
}
.transform-v3__focus--batch-three-copy,
.transform-v3__focus--batch-three-flow {
  background: radial-gradient(ellipse at center, rgba(185, 229, 217, .26) 0%, rgba(255, 213, 61, .10) 43%, transparent 74%);
}
.transform-v3__path-dot {
  box-shadow: 0 0 0 4px rgba(255, 213, 61, .14), 0 0 12px rgba(255, 213, 61, .55);
}
.transform-v3__chat-message span {
  background: linear-gradient(145deg, #fff9eb 0%, #eaf4df 58%, #d2e7c6 100%);
  border-color: rgba(255, 249, 235, .9);
  box-shadow: 0 3px 8px rgba(13, 23, 36, .22);
  color: var(--cis-navy);
}
.transform-v3__chat-message:nth-child(2) span,
.transform-v3__chat-message:nth-child(4) span {
  background: linear-gradient(145deg, #f6faed 0%, #d9ecd0 58%, #c1dcba 100%);
}
.transform-v3__chat-input {
  background: rgba(39, 52, 71, .88);
  border-color: rgba(185, 229, 217, .38);
  color: rgba(255, 249, 235, .58);
}
.transform-v3__live-reaction {
  -webkit-text-stroke: .2px rgba(255, 249, 235, .55);
  background: linear-gradient(135deg, #fff9eb 0%, var(--cis-yellow) 56%, #e5b832 100%);
  filter: drop-shadow(0 2px 2px rgba(39, 52, 71, .35));
  text-shadow: none;
}
.transform-v3__live-reaction--two {
  background-image: linear-gradient(135deg, #f4fff8 0%, var(--cis-mint) 56%, #81bca5 100%);
}
.transform-v3__live-reaction--four {
  background-image: linear-gradient(135deg, #fff9eb 0%, var(--cis-yellow) 56%, #e5b832 100%);
}
.transform-v3__metrics {
  /* The result strip takes over the former blank interval without a hard panel edge. */
  background: linear-gradient(90deg, rgba(39, 52, 71, .72), rgba(39, 52, 71, .93) 12%, rgba(39, 52, 71, .93) 88%, rgba(39, 52, 71, .72));
  border-bottom-color: rgba(185, 229, 217, .19);
  border-top-color: rgba(185, 229, 217, .26);
}
.transform-v3__metric + .transform-v3__metric { border-left-color: rgba(185, 229, 217, .19); }
.transform-v3__metric-title { color: var(--cis-cream); }
.transform-v3__metric small { color: rgba(255, 249, 235, .76); }
.transform-v3__cta {
  background: var(--cis-navy-soft);
  border-color: rgba(255, 213, 61, .76);
  box-shadow: 0 6px 16px rgba(13, 23, 36, .24);
  color: var(--cis-yellow);
}
.transform-v3__cta:hover,
.transform-v3__cta:focus-visible { background: var(--cis-yellow); color: var(--cis-navy); }
.transform-v3__bridge {
  backdrop-filter: none;
  background: linear-gradient(135deg, rgba(39, 52, 71, .98), rgba(52, 68, 90, .97));
  border-color: rgba(185, 229, 217, .42);
  box-shadow: 0 16px 34px rgba(13, 23, 36, .24);
}
.transform-v3__steps i { background: rgba(185, 229, 217, .14); }
.transform-v3__replay {
  backdrop-filter: none;
  background: rgba(52, 68, 90, .96);
  border-color: rgba(185, 229, 217, .44);
  box-shadow: 0 8px 18px rgba(13, 23, 36, .2);
}

/* Compact the outcome sequence: no dead band between the proposition and proof. */
.transform-v3__results-kicker { top: 54.25%; }
.transform-v3__metrics { top: 56.5%; }
.transform-v3__cta { top: 75.4%; }
.transform-v3__focus--batch-three-copy { height: 32%; }

/* Repeated conversion surfaces share the same approved light/dark rhythm. */
.pain-card { background: var(--cis-cream); border-color: var(--cis-navy); box-shadow: 7px 7px 0 var(--cis-mint); }
.pain-card:hover { box-shadow: 10px 10px 0 var(--cis-yellow); }
.pain-card p,
.service-row p,
.insight-card p { color: var(--cis-copy); }
.pain-card a,
.service-number,
.insight-card > span { color: var(--cis-green-deep); }
.service-list { border-color: var(--cis-navy); }
.service-row { border-color: var(--cis-line); }
.service-row:hover { background: var(--cis-mint); }
.service-icon { border-color: var(--cis-navy); color: var(--cis-navy); }
.service-row:hover .service-icon { background: var(--cis-yellow); }

/* Pain points: one continuous three-scene visual, followed by readable problem copy. */
.problem-showcase {
  background:
    radial-gradient(ellipse 46% 44% at -6% 76%, rgba(185, 229, 217, .54) 0 53%, transparent 54%),
    radial-gradient(ellipse 42% 37% at 101% 48%, rgba(155, 203, 138, .18) 0 52%, transparent 53%),
    linear-gradient(135deg, #fffdf5 0%, var(--cis-cream) 62%, #fffdf5 100%);
  overflow: hidden;
  padding: clamp(62px, 4.8vw, 88px) 0 clamp(56px, 4.4vw, 80px);
  position: relative;
}
.problem-showcase .container { position: relative; }
.problem-showcase__heading { min-height: 154px; position: relative; z-index: 1; }
.problem-showcase__eyebrow {
  align-items: center;
  color: var(--cis-green-deep);
  display: flex;
  font-size: 22px;
  font-weight: 800;
  gap: 12px;
  letter-spacing: .08em;
  margin: 0 0 22px;
}
.problem-showcase__eyebrow .pulse-dot { flex: 0 0 auto; height: 18px; width: 18px; }
.problem-showcase h2 {
  color: var(--cis-navy);
  font-size: clamp(48px, 4.75vw, 76px);
  font-weight: 900;
  letter-spacing: -.075em;
  line-height: 1.14;
  margin: 0;
  max-width: 860px;
}
.problem-showcase h2 span { color: var(--cis-green-deep); }
.problem-showcase__intro {
  color: var(--cis-copy);
  font-size: clamp(18px, 1.45vw, 22px);
  line-height: 1.65;
  margin: 19px 0 0;
  max-width: 900px;
}
.problem-showcase__mascot {
  height: auto;
  position: absolute;
  right: clamp(8px, 2.4vw, 54px);
  top: -14px;
  width: clamp(156px, 14vw, 246px);
}
.problem-showcase__cards { gap: 38px; margin-top: 4px; position: relative; z-index: 1; }
.problem-showcase .pain-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: grid;
  grid-template-columns: 66px 1fr;
  grid-template-rows: clamp(230px, 18vw, 300px) auto auto;
  min-height: 0;
  padding: 0 20px;
  transition: transform .25s ease;
}
.problem-showcase .pain-card:hover { box-shadow: none; transform: translateY(-5px); }
.problem-showcase__scene { grid-column: 1 / -1; grid-row: 1; height: 100%; margin: 0 0 13px; }
.problem-showcase__scene img { display: block; height: 100%; object-fit: contain; width: 100%; }
.problem-showcase__number {
  align-items: center;
  align-self: start;
  background: var(--cis-yellow);
  border-radius: 50%;
  color: var(--cis-navy);
  display: flex;
  font-size: 25px;
  font-weight: 900;
  grid-column: 1;
  grid-row: 2;
  height: 66px;
  justify-content: center;
  letter-spacing: -.04em;
  line-height: 1;
  margin-right: 18px;
  width: 66px;
}
.problem-showcase .pain-card:nth-child(2) .problem-showcase__number { background: var(--cis-mint); }
.problem-showcase .pain-card:nth-child(3) .problem-showcase__number { background: var(--cis-green); }
.problem-showcase .pain-card h3 {
  color: var(--cis-navy);
  font-size: 28px;
  grid-column: 2;
  grid-row: 2;
  letter-spacing: -.055em;
  line-height: 1.32;
  margin: 1px 0 17px;
}
.problem-showcase .pain-card p {
  color: var(--cis-copy);
  font-size: 20px;
  grid-column: 1 / -1;
  grid-row: 3;
  line-height: 1.75;
  margin: 0;
  padding-left: 104px;
  position: relative;
}
.problem-showcase .pain-card p::before {
  background: var(--cis-green);
  border-radius: 50%;
  content: "";
  height: 9px;
  left: 84px;
  position: absolute;
  top: .7em;
  width: 9px;
}
.problem-showcase__cta {
  align-items: center;
  border-top: 1px solid var(--cis-line);
  display: flex;
  gap: 30px;
  justify-content: space-between;
  margin-top: 56px;
  padding: 34px 20px 0;
}
.problem-showcase__cta > p {
  color: var(--cis-copy);
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}
.problem-showcase__cta > div { align-items: center; display: flex; flex: 0 0 auto; gap: 28px; }
.problem-showcase__cta .text-button { color: var(--cis-navy); font-size: 21px; }
.problem-showcase__cta .text-button span { color: var(--cis-green-deep); }

@media (max-width: 850px) {
  .problem-showcase { padding: 72px 0 68px; }
  .problem-showcase__heading { min-height: 140px; }
  .problem-showcase__mascot { right: 0; top: -8px; width: 160px; }
  .problem-showcase__cards { gap: 38px; margin-top: 0; }
  .problem-showcase .pain-card { grid-template-rows: 270px auto auto; max-width: 660px; padding: 0; }
  .problem-showcase__cta { align-items: flex-start; flex-direction: column; margin-top: 45px; padding-left: 0; padding-right: 0; }
}

@media (max-width: 560px) {
  .problem-showcase { padding: 68px 0; }
  .problem-showcase__eyebrow { font-size: 20px; margin-bottom: 16px; }
  .problem-showcase__eyebrow .pulse-dot { height: 15px; width: 15px; }
  .problem-showcase h2 { font-size: clamp(43px, 12vw, 58px); line-height: 1.16; max-width: calc(100% - 110px); }
  .problem-showcase__intro { font-size: 18px; line-height: 1.65; margin-top: 15px; max-width: 100%; }
  .problem-showcase__heading { min-height: 134px; }
  .problem-showcase__mascot { right: -3px; top: 0; width: 114px; }
  .problem-showcase .pain-card { grid-template-columns: 55px 1fr; grid-template-rows: 210px auto auto; }
  .problem-showcase__number { font-size: 22px; height: 55px; margin-right: 14px; width: 55px; }
  .problem-showcase .pain-card h3 { font-size: 25px; }
  .problem-showcase .pain-card p { padding-left: 89px; }
  .problem-showcase .pain-card p::before { left: 69px; }
  .problem-showcase__cta > p { font-size: 20px; }
  .problem-showcase__cta > div { align-items: flex-start; flex-direction: column; gap: 20px; }
}

.price-card { background: var(--cis-navy-soft); border-color: rgba(255, 249, 235, .28); }
.price-card.featured {
  background: var(--cis-mint);
  border-color: var(--cis-mint);
  box-shadow: none;
  isolation: isolate;
  z-index: 1;
}
.price-card.featured::after {
  background: var(--cis-yellow);
  border-radius: inherit;
  content: "";
  inset: 10px -10px -10px 10px;
  position: absolute;
  z-index: -1;
}
.plan-title,
.price-card ul,
.price-card a { border-color: rgba(255, 249, 235, .28); }
.plan-title > span,
.price-card a,
.plan-outcome { color: var(--cis-cream); }
.plan-title > strong,
.pricing-accent { color: var(--cis-yellow); }
.popular {
  background: var(--cis-yellow);
  border-color: var(--cis-navy);
  color: var(--cis-navy);
}
.plan-title small,
.price-card ul,
.plan-includes { color: var(--cis-mint); }
.price-card.featured .plan-title > span,
.price-card.featured .plan-title > strong,
.price-card.featured .plan-title small,
.price-card.featured .plan-includes,
.price-card.featured .plan-outcome,
.price-card.featured a,
.price-card.featured ul,
.price-card.featured li { color: var(--cis-navy); }
.price-card.featured .plan-title,
.price-card.featured ul,
.price-card.featured a { border-color: var(--cis-line); }
.price-card.featured .popular { color: var(--cis-navy); }

.insight-card { border-top-color: var(--cis-green); }
.insight-card:nth-child(2) { border-top-color: var(--cis-mint); }
.insight-card:nth-child(3) { border-top-color: var(--cis-yellow); }
.insight-card:nth-child(4) { border-top-color: var(--cis-navy); }
.cta-section { background: var(--cis-yellow); }
.cta-section::before { border-color: var(--cis-green); }
.cta-section::after { background: var(--cis-mint); }
.cta-inner .eyebrow,
.cta-inner h2 em { color: var(--cis-green-deep); }

.faq-item { border-color: var(--cis-line); }
.faq-item summary { color: var(--cis-navy); }
.faq-item p { color: var(--cis-copy); }
.contact-options,
.contact-options a { border-color: rgba(255, 249, 235, .24); }
.contact-options > a > span { background: var(--cis-mint); color: var(--cis-navy); }

/* Lock foregrounds to their surface so later component styles cannot erase labels. */
.button-primary,
.button-dark,
.nav-links .nav-cta { background: var(--cis-navy); color: var(--cis-yellow); }
.button-primary:hover,
.button-dark:hover,
.nav-links .nav-cta:hover { background: var(--cis-navy-soft); color: var(--cis-yellow); }
.icon-purple,
.icon-blue,
.icon-pink { color: var(--cis-navy); }
.price-card.featured,
.price-card.featured .plan-for { color: var(--cis-navy); }
.price-card:not(.featured) .plan-for { color: var(--cis-cream); }

.promo-modal__content { background: var(--cis-cream); border-color: var(--cis-navy); box-shadow: 11px 11px 0 var(--cis-yellow); }
.promo-modal__offer { background: var(--cis-mint); border-color: var(--cis-navy); color: var(--cis-navy); }
.promo-modal__close,
.promo-modal__timer span { background: var(--cis-navy); color: var(--cis-yellow); }

/* Readability remains part of the system: all displayed supporting copy stays at 20px or above. */
.updates-editorial__eyebrow,
.updates-editorial__intro > p:last-child,
.updates-editorial__topic p,
.updates-editorial__topic small,
.updates-editorial__facebook p,
.updates-editorial__facebook small,
.updates-editorial__facebook a,
.updates-editorial__heading h2 .updates-editorial__heading-kicker,
.article-preview__meta span,
.article-preview__meta time,
.transform-v3__bridge > p,
.transform-v3__steps > span,
.transform-v3__steps small,
.transform-v3__replay { font-size: 20px; }

@media (max-width: 560px) {
  .updates-editorial__intro > p:last-child,
  .updates-editorial__topic p,
  .updates-editorial__topic small,
  .updates-editorial__facebook p,
  .updates-editorial__facebook small,
  .article-preview__meta span,
  .article-preview__meta time,
  .transform-v3__replay { font-size: 20px; }
}

/* Desktop composition: use the available canvas, then keep a calm one-screen rhythm. */
@media (min-width: 861px) {
  .container { width: min(1600px, calc(100% - clamp(64px, 7vw, 160px))); }

  .section-light,
  .pricing,
  .transform,
  .contact,
  .cta-section { padding-block: clamp(64px, 4.8vw, 92px); }

  .updates-editorial { padding-block: clamp(64px, 4.4vw, 84px); }
  .updates-editorial__frame { padding: clamp(34px, 2.8vw, 48px); }
  .updates-editorial__top { gap: clamp(24px, 2.6vw, 42px); }
  .updates-editorial__cards { gap: clamp(16px, 1.5vw, 24px); }
  .article-preview__image { height: clamp(145px, 10vw, 174px); }

  .transform-v3 { padding-block: clamp(64px, 4.8vw, 92px); }
  .transform-grid { gap: clamp(52px, 5vw, 80px); }
  .section-title { margin-bottom: clamp(34px, 2.8vw, 46px); }
  .service-row { padding-block: clamp(18px, 1.55vw, 26px); }
  .center-action { margin-top: 30px; }
  .pricing-heading > p:last-child { margin-bottom: 34px; }
  .pricing-note { margin-top: 20px; }
}

@media (min-width: 861px) and (min-height: 760px) {
  .problem-showcase,
  .transform-v3,
  .services,
  .pricing,
  .insights,
  .cta-section,
  #faq { min-height: calc(100svh - 82px); }
}

/*
 * Type hierarchy: the homepage Hero is the site's one visual headline.
 * Every section title intentionally stays below that live Hero scale at
 * desktop, tablet and phone breakpoints.
 */
.problem-showcase h2 { font-size: clamp(46px, 4vw, 66px); }
.cta-inner h2,
.contact h2 { font-size: clamp(44px, 3.6vw, 62px); }
.transform-copy h2,
.pricing-heading h2 { font-size: clamp(40px, 3.35vw, 56px); }

@media (min-width: 851px) and (max-width: 1450px) {
  /* Hero: clamp(48px, 5.1vw, 61px) */
  .problem-showcase h2 { font-size: clamp(44px, 4.75vw, 60px); }
  .cta-inner h2,
  .contact h2 { font-size: clamp(41px, 4.35vw, 57px); }
  .transform-copy h2,
  .pricing-heading h2 { font-size: clamp(38px, 3.65vw, 52px); }
}

@media (max-width: 850px) {
  /* Hero: clamp(45px, 7vw, 61px) */
  .problem-showcase h2 { font-size: clamp(42px, 6.2vw, 58px); }
  .cta-inner h2,
  .contact h2 { font-size: clamp(40px, 5.8vw, 53px); }
  .transform-copy h2,
  .pricing-heading h2 { font-size: clamp(36px, 5vw, 48px); }
}

@media (max-width: 560px) {
  /* Hero: clamp(42px, 11.5vw, 55px) */
  .problem-showcase h2 { font-size: clamp(40px, 10.5vw, 53px); }
  .cta-inner h2,
  .contact h2 { font-size: clamp(38px, 9.5vw, 50px); }
  .transform-copy h2,
  .pricing-heading h2 { font-size: clamp(34px, 8.7vw, 46px); }
}

/*
 * CTA polarity on non-yellow surfaces:
 * use the CIS yellow as the button surface and navy as its foreground.
 * Yellow chapters (for example .brand-story-home and .cta-section) keep
 * their original navy button so the action remains distinct from the page.
 */
.site-header .nav-links .nav-cta,
.hero .button.button-primary,
.problem .button.button-primary,
.services .button.button-primary,
.insights .button.button-dark {
  background: var(--cis-yellow);
  border-color: var(--cis-yellow);
  color: var(--cis-navy);
}

.site-header .nav-links .nav-cta:hover,
.hero .button.button-primary:hover,
.problem .button.button-primary:hover,
.services .button.button-primary:hover,
.insights .button.button-dark:hover {
  background: var(--cis-mint);
  border-color: var(--cis-mint);
  color: var(--cis-navy);
}

.site-header .nav-links .nav-cta:focus-visible,
.hero .button.button-primary:focus-visible,
.problem .button.button-primary:focus-visible,
.services .button.button-primary:focus-visible,
.insights .button.button-dark:focus-visible {
  outline: 3px solid var(--cis-navy);
  outline-offset: 3px;
}