/* Real interface captures on public pages. */
.product-showcase { min-width: 0; margin: 0; }
.seo-hero__grid > .product-showcase { align-self: start; }
.product-setup-preview { margin: 0; min-width: 0; }
.product-setup-preview a { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elevated); }
.product-setup-preview img { display: block; width: 100%; height: auto; }
.product-setup-preview a:focus-visible { outline: 3px solid var(--primary); outline-offset: 5px; }
.docs-hero__visual { display: grid; gap: 18px; }
.docs-hero__grid .docs-hero__note { width: 100%; margin-top: 24px; }
.product-editorial { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 48px; }
.product-editorial h2 { margin: 14px 0; }
.product-editorial p { color: var(--text-soft); font-size: 14px; line-height: 1.8; margin: 0 0 24px; }
@media (max-width: 760px) {
  .product-editorial { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* Shared emphasis follows wrapped text instead of forcing a single long line. */
.seo-body h1 { overflow-wrap: anywhere; }
.seo-body .title-mark,
.seo-body :is(h1, h2) .text-gradient {
  display: inline; color: var(--text); -webkit-text-fill-color: currentColor;
  padding-bottom: .09em;
  background: url('title-marker.svg') left bottom / 100% .24em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.seo-body .public-product-preview { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-elevated); }
.seo-body .story-capture { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); }
.seo-body .story-capture img { display: block; width: 100%; height: auto; }
.seo-body .story-capture:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
.seo-body .implementation-delivery > .public-product-preview { padding: 0; border: 0; border-radius: 0; }
.seo-body .implementation-delivery .story-capture { border: 0; border-radius: 0; }
.seo-body .product-app-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; width: min(100%, 520px); margin-inline: auto; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-elevated); }
.seo-body .product-app-gallery > div { min-width: 0; }
.seo-body .product-app-gallery > div > span { display: block; margin-top: 12px; font-size: 12px; color: var(--text-soft); text-align: center; }
@media (max-width: 760px) {
  .seo-body .public-product-preview { padding: 8px; border-radius: 12px; }
  .seo-body .product-app-gallery { gap: 12px; padding: 12px; }
}

@media (max-width: 760px) {
  .seo-body :is(.seo-hero__content, .implementation-hero__copy, .docs-hero__grid, .contact-pitch) h1 {
    font-size: clamp(32px, 9vw, 48px);
    line-height: 1.07;
    overflow-wrap: anywhere;
  }
  .seo-body .docs-hero__grid > div { min-width: 0; }
}

/* One composition: headline and copy on the left, larger product on the right. */
.seo-body .public-first-screen {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-h) - 1px);
  min-height: calc(100svh - var(--header-h) - 1px);
}
.seo-body .public-first-screen > :is(.seo-hero, .implementation-hero) {
  display: flex;
  flex: 1;
  align-items: flex-start;
  min-height: 0;
  padding: clamp(40px, 7svh, 72px) 0;
  border-bottom: 0;
}
.seo-body .public-hero-heading { margin-bottom: clamp(28px, 3svh, 40px); }
.seo-body .public-hero-heading h1 {
  max-width: none;
  margin: 20px 0 0;
  font-size: clamp(38px, 3.6vw, 60px);
  font-weight: 610;
  line-height: 1.12;
  letter-spacing: -.055em;
  overflow-wrap: normal;
  text-wrap: wrap;
}
.seo-body .public-first-screen :is(.seo-hero__grid, .implementation-hero__grid),
.seo-body .docs-hero__grid {
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr);
  align-items: start;
  gap: clamp(40px, 5vw, 88px);
  padding-top: 0;
}
.seo-body .public-first-screen :is(.seo-hero__content, .implementation-hero__copy) { min-width: 0; }
.seo-body .public-first-screen :is(.seo-hero__lead, .implementation-hero__lead) {
  max-width: 660px;
  margin: 0;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.8;
}
.seo-body .public-first-screen :is(.seo-hero__actions, .implementation-hero__actions) { margin-top: 32px; }
.seo-body .public-first-screen .seo-highlights { margin-top: 28px; }
.seo-body .public-first-screen :is(.seo-hero__grid, .implementation-hero__grid) > :nth-child(2),
.seo-body .docs-hero__visual { margin-top: 32px; }
.seo-body .public-first-screen .public-product-preview--portrait { width: min(100%, 260px); justify-self: center; }
.seo-body .public-first-screen .product-app-gallery { width: min(100%, 560px); padding: 18px; gap: 18px; }
.seo-body .public-first-screen .partner-program-card { min-height: 0; align-self: start; padding: 24px; border-radius: 16px; }
.seo-body .public-first-screen .partner-program-card__reward { margin-top: 22px; }
.seo-body .public-first-screen .partner-program-card__reward strong b { font-size: 64px; }
.seo-body .public-first-screen .partner-program-card__exchange { margin-top: 22px; }
.seo-body .public-first-screen .partner-program-card__exchange article { padding: 10px 12px; border-radius: 10px; }
.seo-body .public-first-screen .partner-program-card__status { margin-top: 14px; }
.seo-body .public-first-screen .story-capture--portrait img {
  width: 100%;
  height: clamp(270px, 42svh, 400px);
  object-fit: contain;
}
.seo-body .implementation-hero__visual figcaption { padding: 14px 4px 2px; font-size: 12px; color: var(--text-soft); }
.seo-body .public-first-screen > :is(.seo-facts, .implementation-rail) { flex: none; }
.seo-body .public-first-screen .seo-facts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seo-body .public-first-screen .seo-facts__grid > div { min-height: 84px; padding: 18px 20px; border-bottom: 0; border-right: 1px solid var(--line); }
.seo-body .public-first-screen .seo-facts__grid > div:first-child { padding-left: 0; }
.seo-body .public-first-screen .seo-facts__grid > div:last-child { border-right: 0; }
.seo-body .public-first-screen .seo-facts__grid b { font-size: 13px; }
.seo-body .public-first-screen .implementation-rail .container { grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; }
.seo-body .public-first-screen .implementation-rail span { min-height: 84px; padding: 16px; }
.seo-body .implementation-result { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 64px; }
.seo-body .implementation-result .section-heading { margin: 0; }
.seo-body .section-heading { max-width: none; text-align: left; }
.seo-body .section-heading h2 { max-width: none; font-size: clamp(28px, 3.5vw, 44px); line-height: 1.15; text-wrap: wrap; }
.seo-body .docs-hero { min-height: calc(100svh - var(--header-h) - 1px); display: grid; align-items: start; padding: clamp(40px, 7svh, 72px) 0; }
.seo-body .docs-hero__grid > div:first-child > p { margin-top: 0; }
.seo-body .docs-hero__grid > div:first-child > p { font-size: clamp(17px, 1.25vw, 20px); line-height: 1.8; }

/* Small, readable interactions; all information stays on the face of each card. */
.seo-body :is(.seo-card, .seo-benefit, .seo-related__card, .docs-card, .implementation-scope article, .implementation-process li),
.product-story-home .story-launch article,
.seo-body .public-first-screen .public-product-preview {
  transition: transform 240ms ease, border-color 200ms ease, box-shadow 240ms ease;
}
.seo-body :is(.seo-related__card, .docs-card):focus-visible { border-color: var(--primary); }
.seo-body :is(.seo-card, .seo-benefit, .seo-related__card, .docs-card, .implementation-scope article, .implementation-process li, .public-product-preview).reveal.is-visible {
  /* Release the reveal transform after entrance so hover can lift the card. */
  animation-fill-mode: backwards;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .seo-body :is(.seo-card, .seo-benefit, .seo-related__card, .docs-card, .implementation-scope article, .implementation-process li):hover,
  .product-story-home .story-launch article:hover {
    transform: translateY(-4px);
    border-color: var(--primary);
    box-shadow: 0 12px 28px rgba(var(--primary-rgb), .09);
  }
  .seo-body .public-first-screen .public-product-preview:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: var(--shadow-soft); }
}
@media (min-width: 901px) and (max-height: 800px) {
  .seo-body .public-hero-heading { margin-bottom: 26px; }
  .seo-body .public-hero-heading h1 { font-size: clamp(34px, 3.5vw, 48px); }
  .seo-body .public-first-screen > :is(.seo-hero, .implementation-hero),
  .seo-body .docs-hero { padding-block: 26px; }
  .seo-body .public-first-screen .story-capture--portrait img { height: 260px; }
  .seo-body .public-first-screen :is(.seo-hero__lead, .implementation-hero__lead) { font-size: 16px; line-height: 1.7; }
  .seo-body .public-first-screen :is(.seo-hero__actions, .implementation-hero__actions) { margin-top: 24px; }
  .seo-body .public-first-screen :is(.seo-highlights, .implementation-hero__assurances) { margin-top: 20px; }
}
@media (min-width: 901px) and (max-width: 1200px) and (max-height: 800px) {
  .seo-body .public-first-screen > :is(.seo-hero, .implementation-hero),
  .seo-body .docs-hero { padding-block: 18px; }
}
@media (max-width: 900px) {
  .seo-body .public-first-screen :is(.seo-hero__grid, .implementation-hero__grid),
  .seo-body .docs-hero__grid,
  .seo-body .implementation-result { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .seo-body .public-first-screen :is(.public-product-preview, .partner-program-card) { width: min(100%, 620px); margin-inline: auto; }
  .seo-body .public-first-screen .public-product-preview--portrait { width: min(100%, 260px); }
  .seo-body .public-first-screen :is(.seo-hero__grid, .implementation-hero__grid) > :nth-child(2),
  .seo-body .docs-hero__visual { margin-top: 0; }
  .seo-body .public-first-screen .implementation-rail .container { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .seo-body .public-first-screen .implementation-rail span { min-height: 68px; border-bottom: 1px solid var(--line); }
  .seo-body .public-first-screen .implementation-rail span:nth-of-type(3n) { border-right: 0; }
  .seo-body .public-first-screen .implementation-rail span:nth-last-of-type(-n+3) { border-bottom: 0; }
}
@media (max-width: 600px) {
  .seo-body .public-hero-heading { margin-bottom: 26px; }
  .seo-body .public-hero-heading h1 { font-size: clamp(28px, 7.5vw, 42px); letter-spacing: -.045em; margin-top: 16px; }
  .seo-body .public-first-screen > :is(.seo-hero, .implementation-hero),
  .seo-body .docs-hero { padding-block: 32px; }
  .seo-body .public-first-screen .seo-facts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-body .public-first-screen .seo-facts__grid > div,
  .seo-body .public-first-screen .seo-facts__grid > div:first-child { padding: 16px 12px; min-height: 78px; }
  .seo-body .public-first-screen .seo-facts__grid > div:nth-child(2n) { border-right: 0; }
  .seo-body .public-first-screen .seo-facts__grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .seo-body .public-first-screen .implementation-rail .container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seo-body .public-first-screen .implementation-rail span { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 12px; }
  .seo-body .public-first-screen .implementation-rail span:nth-of-type(3n) { border-right: 1px solid var(--line); }
  .seo-body .public-first-screen .implementation-rail span:nth-of-type(2n) { border-right: 0; }
  .seo-body .public-first-screen .implementation-rail span:nth-last-of-type(-n+3) { border-bottom: 1px solid var(--line); }
  .seo-body .public-first-screen .implementation-rail span:nth-last-of-type(-n+2) { border-bottom: 0; }
  .seo-body .public-first-screen .story-capture--portrait img { height: clamp(230px, 38svh, 300px); }
}
@media (prefers-reduced-motion: reduce) {
  .seo-body :is(.seo-card, .seo-benefit, .seo-related__card, .docs-card, .implementation-scope article, .implementation-process li),
  .product-story-home .story-launch article,
  .seo-body .public-first-screen .public-product-preview { transition: none; }
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .seo-body :is(.seo-card, .seo-benefit, .seo-related__card, .docs-card, .implementation-scope article, .implementation-process li):hover,
  .product-story-home .story-launch article:hover,
  .seo-body .public-first-screen .public-product-preview:hover { transform: none; }
}
