/* Milestone 2: shared product accents and responsive commercial sections. */
.milestone-two .solution-outline-icon > * {
  fill: none;
  stroke: currentColor;
  stroke-width: inherit;
  stroke-linecap: round;
  stroke-linejoin: round;
  paint-order: normal;
}
:root,
[data-theme="coral"] {
  --brand-logo-width: calc(clamp(54px, 5.5vw, 94px) * 923 / 366);
  --product-accent: #e06a50;
  --product-ink: #fa8072;
  --product-icon: var(--logo-orange);
  --product-focus: var(--logo-orange);
  --product-tint: #fff3ed;
}
[data-theme="magenta"] {
  --product-accent: #c947a6;
  --product-ink: #9b287c;
  --product-icon: var(--product-accent);
  --product-focus: #9b287c;
  --product-tint: #fbf0f8;
}
[data-theme="blue"] {
  --product-accent: #22648f;
  --product-ink: #22648f;
  --product-icon: var(--product-accent);
  --product-focus: #22648f;
  --product-tint: #eef7fc;
}
[data-theme="light-blue"] {
  --product-accent: #72bee7;
  /* Light-blue branding, with darker text and focus indicators for readability. */
  --product-ink: #22648f;
  --product-icon: var(--product-accent);
  --product-focus: #22648f;
  --product-tint: #f0f9fe;
}
[hidden] {
  display: none !important;
}
.milestone-two .id24-brand-mark {
  display: block;
  stroke: none;
}
.detail-slideshow,
.detail-fraud-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
}
.detail-slideshow:focus-visible {
  outline: 3px solid var(--product-focus);
  outline-offset: -4px;
}

.navigation {
  height: auto;
  padding-top: clamp(32px, 6vh, 64px);
}
.navigation .inner_container {
  margin: 0 auto;
  padding: 0 !important;
}
.navigation .nav__logo img {
  display: block;
  width: var(--brand-logo-width);
  height: auto;
  object-fit: contain;
}
.hero_body {
  /* Override the legacy mobile padding shorthand, which removes this gap. */
  padding-top: clamp(48px, 6vh, 72px) !important;
  padding-bottom: clamp(64px, 8vh, 96px) !important;
}
.hero__section_inner {
  min-height: 0;
}
.hero__title {
  margin: 0;
}
.hero__title > span {
  display: block;
}
.solution__result-banner__text {
  margin-top: 0;
  margin-bottom: 24px;
}
.expertise-support {
  color: #fff;
  font: 400 clamp(17px, 1.5vw, 22px)/1.6 var(--font-body);
}

.milestone-two .use-case-card {
  --coral-dark: var(--product-accent);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.milestone-two .use-case-card__content {
  display: flex;
  flex-direction: column;
  padding: 24px;
}
.milestone-two .use-case-card__icon {
  justify-content: flex-start;
  color: var(--product-icon);
}
.milestone-two .use-case-card__icon .id24-brand-mark {
  /* The tight SVG viewBox aligns the visible arrow with the heading below. */
  width: auto;
  height: 40px;
}
.milestone-two .use-case-card__title {
  font-size: 22px;
  line-height: 1.2;
}
.milestone-two .use-case-card__description {
  font-size: 17px;
  line-height: 1.55;
}
.use-case-tags {
  display: flex;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin: auto 0 18px;
  padding: 20px 0 0;
  list-style: none;
}
.use-case-tags li {
  border: 1px solid #bfc0c5;
  border-radius: 999px;
  padding: 4px 10px;
  font: 600 15px/1.45 var(--font-body);
  color: #55565a;
}
.use-case-read-more {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--muc-border);
  padding: 16px 0 0;
  color: var(--product-ink);
  background: transparent;
  text-align: left;
  font: 700 17px/1.4 var(--font-body);
  cursor: pointer;
}
.use-case-read-more:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.use-case-read-more > span {
  color: inherit;
}
.use-case-read-more:focus-visible,
.detail-product-link:focus-visible {
  outline: 2px solid var(--product-focus);
  outline-offset: 5px;
}
.milestone-two .use-case-card__visual {
  aspect-ratio: 1;
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
  width: 100%;
  border-left: 0;
  border-radius: 0 0 calc(var(--muc-radius) - 1px) calc(var(--muc-radius) - 1px);
}
.milestone-two .use-case-visual--photo img {
  position: absolute;
  inset: 0;
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  padding: 0;
  border-radius: inherit;
}
/* Keep the emergency-services jacket in frame, including in the detail panel. */
.milestone-two #use-case-targeted-audiences .use-case-visual--photo img,
.milestone-two [data-solution="targeted-audiences"] [data-detail-image] {
  object-position: left center;
}
.milestone-two .solution-detail__visual[data-fit="cover"] img {
  object-fit: cover;
  padding: 0;
  transform: none;
}
.milestone-two .solution-detail__visual[data-fit="contain"] img {
  padding: 0;
  transform: none;
}
.milestone-two .use-case-visual--fraud {
  background: #281e2f;
}
.milestone-two .solution-category__toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px;
  gap: 12px;
  padding: 22px 16px;
}
.milestone-two .solution-category__name {
  width: auto;
  max-width: none;
  padding: 0;
  font-size: 17px;
  line-height: 1.35;
  white-space: normal;
}
.milestone-two .solution-category__name small {
  white-space: nowrap;
  font-size: 15px;
}
.milestone-two .solution-category__chevron {
  position: static;
  margin: 0;
  justify-self: end;
}
.milestone-two .solution-item {
  font-size: 17px;
}
.milestone-two .solution-detail {
  --coral-dark: var(--product-accent);
  scroll-margin-top: 24px;
}
.milestone-two .solution-detail__header {
  align-items: center;
  background: linear-gradient(100deg, var(--product-tint), #fff 65%);
}
.milestone-two .solution-detail__icon {
  justify-content: flex-start;
  background: none;
  border-radius: 0;
  color: var(--product-icon);
  width: 56px;
  height: 56px;
}
.milestone-two .solution-detail__icon svg {
  width: auto;
  height: 46px;
}
.milestone-two .solution-detail__category {
  color: var(--product-ink);
}
.milestone-two .solution-detail__body {
  align-items: start;
}
@media (min-width: 1001px) {
  .milestone-two .solution-detail__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  }
  .milestone-two .solution-detail__body > * {
    padding-inline: 16px;
  }
  .milestone-two .solution-detail__body > *:first-child {
    padding-left: 0;
  }
  .milestone-two .solution-detail__body > *:last-child {
    padding-right: 0;
  }
}
@media (min-width: 768px) and (max-width: 1000px) {
  .milestone-two .solution-detail__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .milestone-two .solution-detail__summary {
    grid-column: 1 / -1;
  }
  .milestone-two .solution-detail__body > * {
    padding: 0;
    border: 0;
  }
}
.detail-product-link {
  display: inline-block;
  margin-top: 18px;
  color: var(--product-ink);
  font: 700 17px/1.5 var(--font-body);
  text-underline-offset: 4px;
}
.solution-detail__scoreboard {
  min-width: 0;
}
.solution-detail__scoreboard .scoreboard-preview {
  width: 100%;
  max-width: none;
  transform: none;
  padding: 18px;
  border-radius: 14px;
}
.solution-detail__scoreboard .scoreboard-preview__eyebrow {
  font-size: 15px;
}
.solution-detail__scoreboard .scoreboard-preview__title {
  font-size: 22px;
}
.scoreboard-instruction {
  font: 400 17px/1.5 var(--font-body);
  color: #555;
  margin: 12px 0;
}
.solution-detail__scoreboard .scoreboard-preview__row {
  padding: 14px 8px 20px;
  font-size: 17px;
}
.solution-detail__scoreboard .scoreboard-preview__row strong {
  font-size: 19px;
}
.solution-detail__scoreboard .scoreboard-preview__summary,
.solution-detail__scoreboard .scoreboard-preview__summary strong {
  font-size: 17px;
}

.commercial-case {
  padding: calc(var(--section-space) / 2) 0;
  background:
    linear-gradient(90deg, rgba(21, 21, 27, 0.04) 1px, transparent 1px),
    linear-gradient(0deg, rgba(21, 21, 27, 0.04) 1px, transparent 1px), #f3f4f2;
  background-size: 48px 48px;
}
/* One shared panel treatment for Membership, Duo Input, Our Story and Deviatiq. */
.commercial-case__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 56px);
  padding: clamp(28px, 3vw, 40px) clamp(16px, 2.5vw, 32px);
  border: 1px solid #d7d7dc;
  border-radius: 24px;
  background: #fff;
}
.commercial-case__copy {
  min-width: 0;
  color: var(--text-body);
  font: 400 17px/1.6 var(--font-body);
}
.commercial-case__title {
  color: #15151b;
  font: 700 clamp(36px, 4.1vw, 58px)/1.04 var(--font-heading);
  text-transform: uppercase;
  margin: 0 0 28px;
}
.commercial-case__copy p {
  margin-bottom: 20px;
}
.commercial-case__copy strong {
  font-weight: 700;
  color: #24242a;
}
.commercial-case__copy .text-accent {
  color: var(--product-ink);
}
.commercial-case--fraud .commercial-case__copy strong {
  color: var(--product-ink);
}
.commercial-case__closing {
  margin-top: 28px;
}
.commercial-case__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  overflow: hidden;
  margin: 0;
  background: #fff;
}
.commercial-case__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* A centred 4:5 crop removes only floor/ceiling space, keeping both people. */
.commercial-case--story .commercial-case__visual img {
  object-fit: cover;
  object-position: center;
}
.commercial-case__pattern {
  background: radial-gradient(ellipse at top left, #59344f, #211b2b 80%);
}
.commercial-case__pattern #particles-deviatiq {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
}
.commercial-case__pattern-label {
  position: absolute;
  z-index: 2;
  inset: auto 28px 28px;
  color: #f9eff6;
  pointer-events: none;
}
.commercial-case__pattern-label span {
  display: block;
  font: 400 17px/1.5 var(--font-body);
}
.commercial-case__pattern-label strong {
  font: 700 clamp(36px, 4vw, 56px)/1.2 var(--font-heading);
}
.commercial-case__visual {
  grid-column: 2;
  grid-row: 1;
}
.commercial-case__copy {
  grid-column: 1;
  grid-row: 1;
}
.commercial-case__demo {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.commercial-case__demo .duo-input-section__image-wrap {
  width: 100%;
}
.commercial-case__demo .signature-screen {
  max-width: 100%;
}
/* Alternate these sections; Membership and Our Story use text on the left. */
@media (min-width: 768px) {
  .commercial-case--duo .commercial-case__copy,
  .commercial-case--fraud .commercial-case__copy {
    grid-column: 2;
  }
  .commercial-case--fraud .commercial-case__visual {
    grid-column: 1;
  }
  .commercial-case__visual,
  .commercial-case__demo {
    /* Measured from the actual H2 so wrapped eyebrows also align correctly. */
    margin-top: var(
      --commercial-visual-offset,
      calc(var(--type-eyebrow) * 1.2 + var(--space-eyebrow-heading))
    );
  }
}
.keep-together {
  white-space: nowrap;
}
.case-slideshow__viewport,
.membership-comparison__viewport {
  appearance: none;
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  cursor: grab;
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}
.case-slideshow__viewport.is-dragging,
.membership-comparison__viewport.is-dragging {
  cursor: grabbing;
}
.case-slideshow button:focus-visible,
.membership-comparison button:focus-visible {
  outline: 3px solid var(--product-focus);
  outline-offset: -4px;
}
.case-slideshow__viewport img,
.membership-comparison__viewport img {
  -webkit-user-drag: none;
}
[data-case-slideshow] img[hidden] {
  display: none;
}
.membership-comparison__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.membership-comparison__slide {
  display: block;
}
.membership-comparison__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-radius: 100px;
  background: #fff;
  box-shadow: 0 2px 12px #0002;
  font: 700 14px/1.25 var(--font-body);
}
.membership-comparison__badge--sms {
  color: #b42332;
}
.membership-comparison__badge--onscreen {
  color: #17663b;
}
.membership-comparison__badge svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.case-slideshow__dots,
.membership-comparison__dots {
  position: absolute;
  bottom: 12px;
  left: 50%;
  z-index: 2;
  display: flex;
  transform: translateX(-50%);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 2px 12px #0002;
}
.case-slideshow__dot,
.membership-comparison__dot {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.case-slideshow__dot::before,
.membership-comparison__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border: 1px solid #282d31;
  border-radius: 50%;
}
.case-slideshow__dot.is-active::before,
.membership-comparison__dot.is-active::before {
  background: #282d31;
}
/* Compact galleries keep a smaller visual pill and a taller touch target. */
.case-slideshow__dots {
  bottom: 2px;
  width: clamp(56px, 24%, 72px);
  background: transparent;
  box-shadow: none;
}
.case-slideshow__dots::before {
  content: "";
  position: absolute;
  inset: 8px 0;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 2px 8px #0002;
  pointer-events: none;
}
.case-slideshow__dot {
  position: relative;
  flex: 1;
  width: auto;
}
.case-slideshow__dot::before {
  width: 6px;
  height: 6px;
}
.use-case-title-line {
  display: block;
}
.milestone-two .use-case-card:hover {
  transform: none;
}
.milestone-two .use-case-card__content {
  flex: 0 0 auto;
}
.solution-detail__summary strong {
  color: var(--product-ink);
}
.solution-detail__summary [data-detail-paragraphs] p {
  margin-top: 16px;
}
.footer .footer__logo {
  display: inline-block;
  width: min(100%, var(--brand-logo-width));
}
.footer__top > div:first-child {
  min-width: var(--brand-logo-width);
}
.footer .footer__logo img {
  width: 100%;
  height: auto;
  max-height: none;
}
.contact-email-image {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Prioritise the longer category names over the short Core software label. */
@media (min-width: 1101px) {
  .milestone-two .solution-categories {
    grid-template-columns: minmax(0, 0.92fr) repeat(3, minmax(0, 1.1fr));
  }
  .milestone-two .solution-category__toggle {
    gap: 10px;
    padding-inline: 14px;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  .milestone-two .use-case-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .milestone-two .solution-categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .milestone-two .solution-category:nth-child(2) {
    border-right: 0;
  }
  .milestone-two .solution-category:nth-child(n + 3) {
    border-top: 1px solid var(--muc-border);
  }
}
/* Let the next eyebrow peek into the first mobile screen to invite scrolling.
   Small viewport units keep browser-toolbar changes from resizing the intro. */
@media (max-width: 768px) {
  :root {
    --mobile-intro-unit: 1vh;
    --mobile-intro-top-space: clamp(
      40px,
      calc(7 * var(--mobile-intro-unit)),
      72px
    );
    --mobile-intro-logo-height: 54px;
    --brand-logo-width: calc(54px * 923 / 366);
    --mobile-next-section-peek: 94px;
    --mobile-intro-gutter: clamp(24px, 6vw, 40px);
  }
  @supports (height: 100svh) {
    :root {
      --mobile-intro-unit: 1svh;
    }
  }
  .navigation {
    padding-top: var(--mobile-intro-top-space);
    padding-right: 0;
  }
  .navigation .section__inner,
  .hero__section_inner {
    width: calc(100% - var(--mobile-intro-gutter) * 2);
  }
  .navigation .nav__logo img {
    height: var(--mobile-intro-logo-height);
  }
  .hero_body {
    min-height: calc(
      100 * var(--mobile-intro-unit) - var(--mobile-intro-top-space) -
        var(--mobile-intro-logo-height) - var(--mobile-next-section-peek)
    );
    padding-top: clamp(
      48px,
      calc(8 * var(--mobile-intro-unit)),
      80px
    ) !important;
    padding-bottom: clamp(
      48px,
      calc(8 * var(--mobile-intro-unit)),
      80px
    ) !important;
  }
  .solution__result-banner {
    padding-top: 48px;
  }
  .solution__result-banner__label {
    margin-top: 0;
  }
  /* This is the scroll cue, so it must not wait for the scroll-reveal threshold. */
  .solution__result-banner__label[data-reveal] {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 767px) {
  .milestone-two .solution-categories {
    grid-template-columns: minmax(0, 1fr);
  }
  .commercial-case__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .commercial-case__copy {
    grid-column: 1;
    grid-row: 1;
  }
  .commercial-case__visual {
    grid-column: 1;
    grid-row: 2;
  }
  .commercial-case__demo {
    grid-column: 1;
    grid-row: 2;
  }
  .commercial-case__title {
    font-size: clamp(32px, 8.5vw, 48px);
  }
  .milestone-two .solution-detail__icon {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 639px) {
  .milestone-two .solution-detail__header {
    grid-template-columns: 40px minmax(0, 1fr) 44px;
  }
  .milestone-two .solution-detail__header > div {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
  }
  .milestone-two .solution-detail__close {
    grid-column: 3;
    grid-row: 1;
    width: 44px;
    height: 44px;
  }
  .milestone-two .solution-detail__title {
    overflow-wrap: anywhere;
  }
}