/*
 * Minimal product-page reference.
 *
 * This route deliberately borrows the app's flat surfaces, compact controls,
 * quiet borders, and restrained blurple accent. It is intentionally scoped so
 * the remaining marketing page families can migrate after visual approval.
 */
.product-page-v2 {
  overflow-x: hidden;
  margin: 0;
  background: var(--color-base-100);
  color: var(--color-base-content);
  font-family: var(--font-sans);
  letter-spacing: 0;
}

.product-page-v2 .seo-shell {
  width: min(980px, calc(100% - 48px));
}

.product-page-v2 .seo-breadcrumb {
  padding-top: 26px;
  color: var(--color-content-50);
  font-size: 13px;
}

.product-page-v2 .seo-breadcrumb a {
  text-decoration: none;
}

.product-page-v2 .seo-breadcrumb a:hover,
.product-page-v2 .seo-breadcrumb a:focus-visible {
  color: var(--color-base-content);
}

.product-page-v2 .seo-eyebrow {
  color: var(--color-content-50);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-page-v2 .product-hero {
  padding: clamp(72px, 9vw, 112px) 0 clamp(76px, 9vw, 116px);
  border-bottom: 1px solid var(--color-base-300);
}

.product-page-v2 .product-hero-copy {
  max-width: 900px;
}

.product-page-v2 .product-hero .seo-eyebrow {
  color: var(--color-primary);
}

.product-page-v2 .product-hero h1 {
  max-width: 880px;
  margin: 18px 0 22px;
  color: var(--color-base-content);
  font-size: clamp(3.25rem, 6.15vw, 4.7rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.052em;
}

.product-page-v2 .product-hero .lead {
  max-width: 730px;
  margin: 0;
  color: var(--color-content-60);
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 500;
  line-height: 1.62;
}

.product-page-v2 .seo-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 30px;
}

.product-page-v2 .seo-button {
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-field);
  background: transparent;
  color: var(--color-base-content) !important;
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  transform: none;
  transition: background 0.16s ease, color 0.16s ease;
}

.product-page-v2 .seo-button.primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-primary-content) !important;
}

.product-page-v2 .seo-button.secondary {
  min-height: auto;
  padding: 5px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-content-70) !important;
}

.product-page-v2 .seo-button.primary:hover {
  background: #2634da;
  transform: none;
}

.product-page-v2 .seo-button.secondary:hover {
  color: var(--color-base-content) !important;
  text-decoration: underline;
  text-underline-offset: 4px;
  transform: none;
}

.product-page-v2 .seo-button:focus-visible,
.product-page-v2 a:focus-visible {
  outline: 2px solid rgba(56, 71, 254, 0.42);
  outline-offset: 3px;
}

.product-page-v2 .seo-proofline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin-top: 24px;
  color: var(--color-content-50);
  font-size: 13px;
}

.product-page-v2 .seo-proofline span {
  display: inline;
}

.product-page-v2 .seo-proofline span::before {
  content: "·";
  margin: 0 10px;
  color: var(--color-content-40);
}

.product-page-v2 .seo-proofline span:first-child::before {
  content: none;
}

.product-page-v2 .seo-section {
  padding: 62px 0;
  border-top: 1px solid var(--color-base-300);
  border-bottom: 0;
  background: var(--color-base-100);
}

.product-page-v2 .product-hero + .product-workflow {
  border-top: 0;
}

.product-page-v2 .seo-section-head {
  max-width: 760px;
  margin-bottom: 30px;
}

.product-page-v2 .seo-section h2 {
  margin: 8px 0 0;
  color: var(--color-base-content);
  font-size: clamp(1.75rem, 2.8vw, 2.25rem);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.032em;
}

.product-page-v2 .seo-section h3 {
  color: var(--color-base-content);
}

.product-page-v2 .seo-section p,
.product-page-v2 .seo-section li {
  color: var(--color-content-60);
  font-size: 16px;
  line-height: 1.72;
}

/* A single workflow list, not a grid of promotional cards. */
.product-page-v2 .product-workflow {
  background: var(--color-base-200);
}

.product-page-v2 .product-workflow .seo-grid {
  display: block;
  border-top: 1px solid var(--color-base-300);
}

.product-page-v2 .product-workflow .seo-card {
  display: grid;
  grid-template-columns: 42px minmax(220px, 0.75fr) minmax(0, 1.25fr);
  gap: 20px;
  align-items: baseline;
  padding: 24px 0;
  border: 0;
  border-bottom: 1px solid var(--color-base-300);
  border-radius: 0;
  background: transparent;
}

.product-page-v2 .product-workflow .number {
  display: inline;
  width: auto;
  height: auto;
  margin: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 800;
}

.product-page-v2 .product-workflow h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
}

.product-page-v2 .product-workflow p {
  max-width: none;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}

/* Long-form SEO copy stays visible in a calm, repeatable editorial rhythm. */
.product-page-v2 .product-editorial > .seo-shell {
  display: grid;
  grid-template-columns: minmax(190px, 0.55fr) minmax(0, 1.45fr);
  column-gap: clamp(48px, 8vw, 104px);
  align-items: start;
}

.product-page-v2 .product-editorial .seo-section-head {
  margin: 0;
}

.product-page-v2 .product-editorial > .seo-shell > p {
  grid-column: 2;
  max-width: 690px;
  margin: 2px 0 0;
}

.product-page-v2 .product-editorial > .seo-shell > p + p {
  margin-top: 18px;
}

/* FAQs are open, indexable rows with no card chrome. */
.product-page-v2 .product-faq {
  background: var(--color-base-200);
}

.product-page-v2 .product-faq .seo-grid.two {
  display: block;
  border-top: 1px solid var(--color-base-300);
}

.product-page-v2 .product-faq .seo-card {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(36px, 7vw, 90px);
  padding: 23px 0;
  border: 0;
  border-bottom: 1px solid var(--color-base-300);
  border-radius: 0;
  background: transparent;
}

.product-page-v2 .product-faq h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}

.product-page-v2 .product-faq p {
  max-width: none;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
}

/* The final conversion point remains, but no longer becomes a visual billboard. */
.product-page-v2 .product-final-cta {
  margin: 0 auto;
  padding: 68px 0;
  border: 0;
  border-radius: 0;
  background: var(--color-base-100);
  color: var(--color-base-content);
}

.product-page-v2 .product-final-cta h2 {
  max-width: 680px;
  margin: 10px 0 12px;
  color: var(--color-base-content);
  font-size: clamp(1.75rem, 3vw, 2.35rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.product-page-v2 .product-final-cta p {
  max-width: 650px;
  margin: 0;
  color: var(--color-content-60);
  font-size: 16px;
  line-height: 1.65;
}

.product-page-v2 .product-final-cta .seo-actions {
  margin-top: 24px;
}

.product-page-v2 .seo-footer {
  margin-top: 0;
  border-color: var(--color-base-300);
  background: var(--color-base-200);
}

.product-page-v2 .seo-footer a,
.product-page-v2 .seo-footer p {
  color: var(--color-content-60);
}

@media (max-width: 720px) {
  .product-page-v2 .seo-shell {
    width: min(100% - 32px, 980px);
  }

  .product-page-v2 .seo-breadcrumb {
    padding-top: 18px;
  }

  .product-page-v2 .product-hero {
    padding: 64px 0 72px;
  }

  .product-page-v2 .product-hero h1 {
    font-size: clamp(2.45rem, 10.4vw, 3.25rem);
    line-height: 1.02;
    letter-spacing: -0.047em;
  }

  .product-page-v2 .product-hero .lead {
    font-size: 18px;
  }

  .product-page-v2 .seo-proofline {
    display: grid;
    gap: 6px;
  }

  .product-page-v2 .seo-proofline span::before,
  .product-page-v2 .seo-proofline span:first-child::before {
    content: "·";
    margin: 0 8px 0 0;
  }

  .product-page-v2 .seo-section {
    padding: 52px 0;
  }

  .product-page-v2 .product-workflow .seo-card {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 4px 14px;
    padding: 22px 0;
  }

  .product-page-v2 .product-workflow .number {
    grid-row: 1 / span 2;
  }

  .product-page-v2 .product-workflow p {
    grid-column: 2;
    margin-top: 5px;
  }

  .product-page-v2 .product-editorial > .seo-shell,
  .product-page-v2 .product-faq .seo-card {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .product-page-v2 .product-editorial > .seo-shell > p {
    grid-column: 1;
  }

  .product-page-v2 .product-editorial > .seo-shell > p + p {
    margin-top: -4px;
  }

  .product-page-v2 .product-faq .seo-card {
    gap: 8px;
  }

  .product-page-v2 .product-final-cta {
    padding: 58px 0;
  }
}

@media (max-width: 460px) {
  .product-page-v2 .seo-actions {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .product-page-v2 .product-hero h1 {
    font-size: clamp(2.35rem, 10vw, 2.75rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-page-v2 *,
  .product-page-v2 *::before,
  .product-page-v2 *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}