/**
 * Page-specific styles
 * ====================
 * Contains styles for individual page types and layouts
 */

/* ==========================================================================
   Footer - Mirrors React footer.tsx
   ========================================================================== */

.footer {
  position: relative;
}

.footer--light {
  /* Transparent background on light theme */
}

.footer--light .footer__copyright {
  color: var(--color-neutral-300);
}

.footer--light .footer__icon-logo {
  color: var(--color-neutral-100);
}

.footer--light .footer__wordmark-svg {
  fill: var(--color-neutral-100);
}

.footer--dark {
  /* Transparent background on dark theme */
}

.footer--dark .footer__copyright {
  color: var(--color-primary-700);
}

.footer--dark .footer__icon-logo {
  color: var(--color-primary-800);
}

.footer--dark .footer__wordmark-svg {
  fill: var(--color-primary-800);
}

.footer__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 24px 24px;
  position: relative;
  z-index: 10;
}

/* Main row: copyright left, links right */
.footer__main-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  padding-bottom: 64px;
  gap: 48px;
}

@media (max-width: 768px) {
  .footer__main-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

.footer__copyright {
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 1;
}

.footer__legal-links {
  display: flex;
  flex-direction: row;
  gap: 16px;
  flex-shrink: 1;
}

@media (max-width: 768px) {
  .footer__legal-links {
    flex-direction: column;
    gap: 16px;
    padding-top: 16px;
  }
}

.footer__legal-link {
  text-decoration: none;
  color: inherit;
  font-size: 14px;
  transition: opacity 0.2s ease;
}

.footer__legal-link:hover {
  opacity: 0.7;
}

/* Centered "O" icon logo */
.footer__icon-logo {
  width: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .footer__icon-logo {
    width: 64px;
  }
}

.footer__icon-logo svg {
  width: 100%;
}

/* Large wordmark with translateY overlap effect */
.footer__wordmark-wrapper {
  width: 100%;
  overflow: hidden;
}

.footer__wordmark {
  width: 100%;
  transform: translateY(50%);
  margin-top: -50px;
}

@media (max-width: 768px) {
  .footer__wordmark {
    transform: translateY(25%);
    margin-top: -15px;
  }
}

.footer__wordmark-svg {
  width: 100%;
  display: block;
}

/* Optional footer columns (not in React original, but kept for flexibility) */
.footer__content {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-bottom: var(--space-8);
  width: 100%;
}

.footer__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-8);
  width: 100%;
}

.footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__column-title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 var(--space-2) 0;
  opacity: 0.7;
}

.footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer__link {
  text-decoration: none;
  color: inherit;
  font-size: var(--font-size-sm);
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.footer__link:hover {
  opacity: 1;
}

/* ==========================================================================
   op-website-footer Component Styling
   ========================================================================== */

/* The op-website-footer component uses shadow DOM and handles all styling internally.
   The wordmark SVG is a decorative background element.
   
   Note: The component uses :host{display:contents}, so the host element doesn't render.
   All styling is handled by the component's internal shadow DOM structure.
   
   If the wordmark appears too prominent, it may need to be addressed in the
   component source code or by updating to a newer version of DesignBase. */

/* ==========================================================================
   Separator
   ========================================================================== */

.separator {
  height: 1px;
  background-color: var(--color-neutral-200);
}

.separator--dark {
  background-color: var(--color-neutral-700);
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero {
  padding: var(--space-16) 0;
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.hero--light {
  background-color: var(--op-white);
  color: var(--op-charcoal);
}

.hero--dark {
  background-color: var(--op-charcoal);
  color: var(--op-white);
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 768px) {
  .hero__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.hero--image-left .hero__grid {
  direction: rtl;
}

.hero--image-left .hero__grid > * {
  direction: ltr;
}

.hero__content {
  max-width: 600px;
}

.hero__headline {
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: var(--space-4);
}

@media (min-width: 768px) {
  .hero__headline {
    font-size: var(--text-5xl);
  }
}

.hero__description {
  font-size: var(--text-lg);
  color: var(--op-gray-600);
  margin-bottom: var(--space-6);
  line-height: 1.6;
}

.hero--dark .hero__description {
  color: var(--op-gray-300);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__image-wrapper {
  position: relative;
}

.hero__image {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

/* Hero with background image */
.hero--image-background {
  position: relative;
  min-height: 70vh;
}

.hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__background-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__background-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.3));
}

.hero--image-background .hero__container {
  position: relative;
  z-index: 1;
}

/* Hero Showcase Container - matches React hero with animated container */
.hero--showcase {
  padding: var(--space-16) 0 0 0;
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero--showcase .hero__content {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.hero--showcase .hero__headline {
  font-size: 64px;
  font-weight: 900;
  line-height: 64px;
  color: var(--color-black, #000);
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .hero--showcase .hero__headline {
    font-size: 40px;
    line-height: 44px;
  }
}

.hero--showcase .hero__description {
  font-size: 20px;
  line-height: 24px;
  color: var(--color-neutral-600, #525252);
  max-width: 480px;
  margin-bottom: 0;
}

.hero--showcase .hero__actions {
  margin-top: var(--space-4);
}

/* Hero showcase container with gradient and animation */
.hero__showcase-wrapper {
  width: 100%;
  margin-top: var(--space-8);
  height: 650px;
}

@media (max-width: 768px) {
  .hero__showcase-wrapper {
    height: 320px;
  }
}

.hero__showcase-container {
  width: 100%;
  border-radius: 48px;
  box-shadow: 0 24px 64px 12px rgba(16, 162, 103, 0.1);
}

.hero__showcase-inner {
  width: 100%;
  aspect-ratio: 1440 / 900;
  border-radius: 48px;
  overflow: hidden;
  padding: 48px 48px 0 48px;
  background: linear-gradient(135deg, var(--color-primary-500, #10a267) 0%, var(--color-primary-700, #0a7a4d) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .hero__showcase-inner {
    padding: 32px 32px 0 32px;
  }
}

.hero__showcase-image-wrapper {
  background-color: white;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  filter: contrast(102.5%) brightness(100%);
  flex-shrink: 1;
}

.hero__showcase-image {
  width: 100%;
  height: auto;
  display: block;
}

/* ==========================================================================
   Bottom CTA Section
   ========================================================================== */

.bottom-cta {
  padding: var(--space-16) 0;
  text-align: center;
}

.bottom-cta--light {
  background-color: var(--op-gray-50);
  color: var(--op-charcoal);
}

.bottom-cta--dark {
  background-color: var(--op-charcoal);
  color: var(--op-white);
}

.bottom-cta__content {
  max-width: 700px;
  margin: 0 auto;
}

/* Bottom CTA title - React: 56px/64px weight 900, white text */
.bottom-cta__title {
  color: var(--color-white);
  font-size: 56px;
  font-weight: 900;
  line-height: 64px;
  text-align: center;
  margin: 0;
}

/* Bottom CTA title - light background variant */
.bottom-cta__title--light {
  color: var(--color-primary-900);
}

/* Bottom CTA description - React: 20px/24px opacity 0.75, white text */
.bottom-cta__description {
  line-height: 24px;
  color: var(--color-white);
  font-size: 20px;
  opacity: 0.75;
  text-align: center;
  max-width: 640px;
  margin: 0;
}

/* Bottom CTA description - light background variant */
.bottom-cta__description--light {
  color: var(--color-primary-900);
}

.bottom-cta--dark .bottom-cta__description {
  color: var(--op-gray-300);
}

/* Mobile responsive for bottom CTA */
@media (max-width: 1000px) {
  .bottom-cta__title {
    font-size: 36px;
    line-height: 44px;
  }

  .bottom-cta__description {
    font-size: 16px;
    line-height: 22px;
  }
}

.bottom-cta__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
}

/* ==========================================================================
   CTA Block
   ========================================================================== */

.cta-block {
  padding: var(--space-12) 0;
  text-align: center;
}

.cta-block--light {
  background-color: var(--op-gray-50);
}

.cta-block--dark {
  background-color: var(--op-charcoal);
  color: var(--op-white);
}

.cta-block--bg-gradient {
  background: linear-gradient(135deg, var(--op-primary) 0%, var(--op-primary-dark) 100%);
  color: var(--op-white);
}

.cta-block__content {
  max-width: 600px;
  margin: 0 auto;
}

.cta-block__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.cta-block__description {
  margin-bottom: var(--space-5);
  opacity: 0.9;
}

.cta-block__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ==========================================================================
   Feature Section
   ========================================================================== */

.feature-section {
  padding: var(--space-16) 0;
}

.feature-section--light {
  background-color: var(--op-white);
}

.feature-section--dark {
  background-color: var(--op-charcoal);
  color: var(--op-white);
}

.feature-section__header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-12);
}

.feature-section__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.feature-section__subtitle {
  font-size: var(--text-lg);
  color: var(--op-gray-600);
}

.feature-section--dark .feature-section__subtitle {
  color: var(--op-gray-300);
}

.feature-section__content--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-8);
}

.feature-section__content--list {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 800px;
  margin: 0 auto;
}

/* Feature Item */
.feature-item {
  display: flex;
  gap: var(--space-4);
}

.feature-section__content--grid .feature-item {
  flex-direction: column;
  text-align: center;
}

.feature-item__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--op-primary-light);
  border-radius: var(--radius-md);
  color: var(--op-primary);
}

.feature-section__content--grid .feature-item__icon {
  margin: 0 auto var(--space-3);
}

.feature-item__icon-svg,
.feature-item__icon-image {
  width: 24px;
  height: 24px;
}

.feature-item__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.feature-item__description {
  color: var(--op-gray-600);
  line-height: 1.6;
}

.feature-section--dark .feature-item__description {
  color: var(--op-gray-300);
}

.feature-item__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--op-primary);
  font-weight: 500;
  margin-top: var(--space-2);
  transition: gap 0.2s ease;
}

.feature-item__link:hover {
  gap: var(--space-2);
}

.feature-item__arrow {
  width: 16px;
  height: 16px;
}

/* Feature Grid (simple) */
.feature-grid {
  display: grid;
  gap: var(--space-6);
}

.feature-grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.feature-grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.feature-grid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
  .feature-grid--cols-3,
  .feature-grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Blog Styles - DesignBase Compatible
   Uses op-container, op-tag, op-button, op-image, op-aspect-ratio components
   ========================================================================== */

/* Blog Container - Main page wrapper */
.blog-container {
  /* Desktop padding handled via _stringified-props */
}

@media (max-width: 1000px) {
  .blog-container {
    padding: var(--padding-nav-top) var(--padding-page-x) 64px var(--padding-page-x) !important;
  }
}

/* Blog Featured Container - responsive direction */
.blog-featured-container {
  /* Direction handled by data-responsive JS */
  gap: 64px;
}

@media (max-width: 1000px) {
  .blog-featured-container {
    gap: 32px !important;
    padding: 32px !important;
  }
}

/* Blog Grid Container - use CSS Grid for equal height cards */
.blog-grid-container,
op-container.blog-grid-container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
}

/* Blog Card Link - wrapper that controls width in grid */
.blog-card-link {
  text-decoration: none;
  color: inherit;
  display: flex;
  width: 100%;
}

/* Blog Card - individual card in grid */
.blog-card {
  width: 100%;
  height: 100%;
  /* Hover effects like docs-card */
  border: 1px solid var(--color-neutral-200, #e5e5e5);
  border-radius: 32px;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  cursor: pointer;
}

/* Push Read More button to bottom of card */
.blog-card h4 {
  flex-grow: 1;
}

.blog-card:hover {
  border-color: var(--color-primary-500, #10a267);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.blog-card-read-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background-color: var(--color-primary-500, #10a267);
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.blog-card:hover .blog-card-read-more {
  background-color: var(--color-primary-600, #0d8a56);
}

/* Tablet: 2 columns */
@media (max-width: 1000px) and (min-width: 601px) {
  .blog-grid-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile: single column */
@media (max-width: 600px) {
  .blog-grid-container {
    grid-template-columns: 1fr !important;
  }
}

/* Blog Post Container - article page wrapper */
.blog-post-container {
  /* Desktop padding handled via _stringified-props */
}

@media (max-width: 1000px) {
  .blog-post-container {
    padding: var(--padding-nav-top) var(--padding-page-x) 64px var(--padding-page-x) !important;
  }
}

/* Blog Post Title */
.blog-post__title {
  margin: 0 0 24px;
  text-align: left;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-neutral-900);
}

/* Blog Post Meta */
.blog-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 32px;
}

.blog-post__meta-author {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-neutral-600);
}

.blog-post__meta-date {
  font-size: 14px;
  color: var(--color-neutral-500);
}

/* Blog Post Tags */
.blog-post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
  margin-bottom: 32px;
}

/* Blog Post Body - article content styling */
.blog-post__body {
  width: 100%;
  font-size: 18px;
  line-height: 1.8;
  color: var(--color-neutral-700);
  text-align: left;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Override rich_text_block template constraints for blog posts */
.blog-post__body op-website-section {
  width: 100% !important;
}

.blog-post__body op-website-section > div {
  max-width: 100% !important;
  text-align: left !important;
}

.blog-post__body h1,
.blog-post__body h2,
.blog-post__body h3,
.blog-post__body h4,
.blog-post__body h5,
.blog-post__body h6 {
  text-align: left;
}

.blog-post__body h2 {
  font-size: 28px;
  font-weight: 700;
  margin-top: 48px;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-neutral-200);
  color: var(--color-neutral-900);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.blog-post__body h3 {
  font-size: 22px;
  font-weight: 600;
  margin-top: 36px;
  margin-bottom: 12px;
  color: var(--color-neutral-900);
  line-height: 1.35;
}

.blog-post__body h4 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 28px;
  margin-bottom: 8px;
  color: var(--color-neutral-900);
  line-height: 1.4;
}

.blog-post__body p {
  margin-bottom: 20px;
  line-height: 1.8;
  text-align: left;
}

.blog-post__body ul,
.blog-post__body ol {
  margin-bottom: 20px;
  padding-left: 24px;
  text-align: left;
}

.blog-post__body li {
  margin-bottom: 10px;
  line-height: 1.75;
  text-align: left;
}

.blog-post__body li > ul,
.blog-post__body li > ol {
  margin-top: 8px;
  margin-bottom: 0;
}

.blog-post__body blockquote {
  margin: 32px 0;
  padding: 20px 24px;
  border-left: 4px solid var(--color-primary-500);
  background-color: var(--color-primary-50, #ecfdf5);
  border-radius: 0 12px 12px 0;
}

.blog-post__body blockquote p {
  margin: 0;
  font-style: italic;
  color: var(--color-neutral-600);
}

.blog-post__body pre {
  margin: 28px 0;
  padding: 20px;
  background-color: var(--color-neutral-900);
  border-radius: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.blog-post__body code {
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Consolas', monospace;
  font-size: 0.9em;
}

.blog-post__body pre code {
  color: var(--color-neutral-100);
  font-size: 14px;
  line-height: 1.6;
}

.blog-post__body :not(pre) > code {
  padding: 2px 6px;
  background-color: var(--color-neutral-100);
  border-radius: 4px;
  color: var(--color-primary-700);
  overflow-wrap: break-word;
  word-break: break-word;
}

.blog-post__body a {
  color: var(--color-primary-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.2s;
  overflow-wrap: break-word;
  word-break: break-word;
}

.blog-post__body a:hover {
  color: var(--color-primary-600);
}

.blog-post__body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 28px 0;
  border: 1px solid var(--color-neutral-200);
}

.blog-post__body table {
  width: 100%;
  margin: 28px 0;
  border-collapse: collapse;
  font-size: 15px;
}

.blog-post__body th,
.blog-post__body td {
  padding: 12px 16px;
  border: 1px solid var(--color-neutral-200);
  text-align: left;
}

.blog-post__body th {
  background-color: var(--color-neutral-50);
  font-weight: 600;
  color: var(--color-neutral-900);
}

.blog-post__body tr:hover td {
  background-color: var(--color-neutral-50);
}

.blog-post__body hr {
  margin: 40px 0;
  border: none;
  border-top: 1px solid var(--color-neutral-200);
}

/* Blog Post - strong text */
.blog-post__body strong {
  font-weight: 600;
  color: var(--color-neutral-800);
}

/* Blog Post - Responsive */
@media (max-width: 1000px) {
  .blog-post__title {
    font-size: 32px;
  }

  .blog-post__body {
    font-size: 16px;
  }

  .blog-post__body h2 {
    font-size: 24px;
    margin-top: 36px;
  }

  .blog-post__body h3 {
    font-size: 20px;
    margin-top: 28px;
  }

  .blog-post__body pre {
    margin-left: -16px;
    margin-right: -16px;
    border-radius: 0;
    padding: 16px;
  }

  .blog-post__body table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  .blog-post__title {
    font-size: 26px;
    letter-spacing: -0.01em;
  }

  .blog-post__meta {
    gap: 8px;
  }

  .blog-post__body {
    font-size: 15px;
  }

  .blog-post__body h2 {
    font-size: 22px;
    margin-top: 32px;
  }

  .blog-post__body h3 {
    font-size: 18px;
    margin-top: 24px;
  }

  .blog-post__body blockquote {
    margin: 20px 0;
    padding: 16px 18px;
  }
}

/* ==========================================================================
   Pricing Page
   ========================================================================== */

.pricing {
  padding: var(--space-12) 0;
}

.pricing__header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.pricing__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.pricing__intro {
  max-width: 600px;
  margin: 0 auto;
  color: var(--op-gray-600);
}

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--space-6);
  max-width: 1200px;
  margin: 0 auto;
}

/* Pricing Card */
.pricing-card {
  background: var(--op-white);
  border: 1px solid var(--op-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  position: relative;
}

.pricing-card--highlighted {
  border-color: var(--op-primary);
  box-shadow: var(--shadow-lg);
}

.pricing-card__badge {
  position: absolute;
  top: calc(-1 * var(--space-3));
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-3);
  background: var(--op-primary);
  color: var(--op-white);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  border-radius: var(--radius-full);
}

.pricing-card__header {
  margin-bottom: var(--space-4);
}

.pricing-card__name {
  font-size: var(--text-xl);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.pricing-card__tagline {
  color: var(--op-gray-600);
  font-size: var(--text-sm);
}

.pricing-card__price {
  margin-bottom: var(--space-4);
}

.pricing-card__amount {
  font-size: var(--text-4xl);
  font-weight: 700;
}

.pricing-card__amount--custom {
  font-size: var(--text-2xl);
}

.pricing-card__period {
  color: var(--op-gray-500);
}

.pricing-card__description {
  color: var(--op-gray-600);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.pricing-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  flex-grow: 1;
}

.pricing-card__feature {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
}

.pricing-card__check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--op-success);
}

.pricing-card__cta {
  margin-top: auto;
}

/* ==========================================================================
   Contact Page
   ========================================================================== */

.contact {
  padding: var(--space-12) 0;
}

.contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10);
}

@media (min-width: 768px) {
  .contact__grid {
    grid-template-columns: 1fr 1.2fr;
  }
}

.contact__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.contact__intro {
  color: var(--op-gray-600);
  margin-bottom: var(--space-6);
}

.contact__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.contact__info-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.contact__icon {
  width: 24px;
  height: 24px;
  color: var(--op-primary);
}

.contact__link {
  color: var(--op-charcoal);
  transition: color 0.2s ease;
}

.contact__link:hover {
  color: var(--op-primary);
}

.contact__address {
  font-style: normal;
}

/* Contact Form */
.contact-form {
  background: var(--op-white);
  border: 1px solid var(--op-gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.contact-form__group {
  margin-bottom: var(--space-4);
}

.contact-form__label {
  display: block;
  font-weight: 500;
  margin-bottom: var(--space-1);
  font-size: var(--text-sm);
}

.contact-form__submit {
  margin-top: var(--space-6);
}

/* ==========================================================================
   Thank You Page
   ========================================================================== */

.thank-you {
  padding: var(--space-16) 0;
  text-align: center;
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.thank-you__icon {
  margin-bottom: var(--space-6);
}

.thank-you__check {
  width: 80px;
  height: 80px;
  color: var(--op-success);
  margin: 0 auto;
}

.thank-you__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  margin-bottom: var(--space-4);
}

.thank-you__message {
  color: var(--op-gray-600);
  max-width: 500px;
  margin: 0 auto var(--space-6);
}

.thank-you__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ==========================================================================
   Legal Pages
   ========================================================================== */

.legal {
  padding: var(--space-12) 0;
}

.legal__header {
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--op-gray-200);
}

.legal__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  color: var(--op-gray-500);
  font-size: var(--text-sm);
}

/* Table of Contents */
.legal__toc {
  background: var(--op-gray-50);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-8);
}

.legal__toc-title {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--op-gray-500);
  margin-bottom: var(--space-3);
}

.legal__toc-list {
  list-style-position: inside;
  padding: 0;
  margin: 0;
}

.legal__toc-list li {
  padding: var(--space-1) 0;
}

.legal__toc-link {
  color: var(--op-primary);
  transition: color 0.2s ease;
}

.legal__toc-link:hover {
  text-decoration: underline;
}

.legal__body {
  margin-bottom: var(--space-10);
}

/* Legal document rich text typography */
.legal__body h2 {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-top: var(--space-8);
  margin-bottom: var(--space-4);
}

.legal__body h3 {
  font-size: var(--text-xl);
  font-weight: 600;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.legal__body h4 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.legal__body p {
  margin-bottom: var(--space-4);
  line-height: 1.7;
}

/* Highlighted callout boxes for important notices */
.legal__body .callout,
.legal__body blockquote {
  background-color: var(--op-gray-100);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin: var(--space-6) 0;
  color: var(--op-gray-700);
  border-left: none;
  font-style: normal;
}

.legal__body .callout p:last-child,
.legal__body blockquote p:last-child {
  margin-bottom: 0;
}

/* Strong text in uppercase disclaimers */
.legal__body strong {
  font-weight: 600;
}

.legal__footer {
  padding-top: var(--space-6);
  border-top: 1px solid var(--op-gray-200);
  color: var(--op-gray-500);
  font-size: var(--text-sm);
}

.legal__updated {
  margin-bottom: var(--space-2);
}

/* ==========================================================================
   Checkout Page (New Two-Column Layout)
   Matches React get-started/free and get-started/clinical-pro pages
   ========================================================================== */

.page-checkout,
.page-checkout--free,
.page-checkout--clinical-pro {
  /* Page-level styles */
}

/* Checkout container - desktop padding */
.checkout-container {
  padding: 160px 120px 64px 120px;
}

/* Free & Enterprise use plain <div> containers (not op-container) for full CSS control */
.checkout-container--free,
.checkout-container--enterprise {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 160px 120px 64px 120px;
  position: relative;
  z-index: 2;
  box-sizing: border-box;
}

.checkout-container--clinical-pro {
  padding: 160px 120px 64px 120px;
}

@media (max-width: 1000px) {
  /* Override DesignBase op-container padding for mobile (matches React PageWrapper breakpoint) */
  .checkout-container {
    padding: var(--padding-nav-top) var(--padding-page-x) 64px var(--padding-page-x) !important;
  }

  /* Plain div containers get direct padding */
  .checkout-container--free,
  .checkout-container--enterprise {
    padding: 120px 32px 48px 32px;
  }

  /* Hide wizard on mobile for cleaner UI */
  .checkout-wizard {
    display: none;
  }

  /* Adjust heading sizes for mobile */
  .checkout-info-panel h2 {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  /* Even smaller padding on very small screens */
  .checkout-container {
    padding: 100px 16px 48px 16px !important;
  }

  .checkout-container--free,
  .checkout-container--enterprise {
    padding: 90px 16px 40px 16px;
  }

  /* Smaller info panel padding on very small screens */
  .checkout-info-panel {
    padding: 24px;
  }

  .checkout-form-panel--clinical-pro {
    padding: 24px;
  }

  /* Stack quantity selectors full width on small screens */
  .checkout-product-row {
    flex-direction: column;
    align-items: stretch;
  }

  .checkout-quantity-selector {
    justify-content: flex-end;
    margin-top: 12px;
  }
}

/* Wizard - non-interactive display */
.checkout-wizard {
  pointer-events: none;
  max-width: 640px;
  width: 100%;
  padding-bottom: 32px;
}

/* Form Container - Two Column Layout */
.checkout-form-container {
  display: flex;
  flex-direction: row-reverse;
  width: 100%;
  border-radius: 48px;
  background-color: var(--color-white, #ffffff);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.03),
    0 2px 4px rgba(0, 0, 0, 0.02),
    0 8px 16px rgba(0, 0, 0, 0.04),
    0 24px 48px rgba(0, 0, 0, 0.06);
}

.checkout-form-container--clinical-pro {
  /* Specific styles for clinical pro if needed */
}

.checkout-form-container--enterprise {
  /* Enterprise uses similar layout but with HubSpot form */
}

.checkout-form-panel--enterprise {
  padding: 8px;
  display: flex;
  flex-direction: column;
}

@media (max-width: 1000px) {
  .checkout-form-panel--enterprise {
    padding: 0;
  }
}

@media (max-width: 1000px) {
  .checkout-form-container {
    flex-direction: column;
    overflow: visible;
    gap: 16px;
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
  }

  .checkout-form-panel {
    flex: none;
    min-height: auto;
    overflow: visible;
    border-radius: 24px;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.03),
      0 2px 4px rgba(0, 0, 0, 0.02),
      0 8px 16px rgba(0, 0, 0, 0.04);
  }

  .checkout-info-panel {
    border-radius: 24px;
  }
}

@media (max-width: 480px) {
  .checkout-form-container {
    gap: 12px;
  }

  .checkout-form-panel {
    border-radius: 16px;
  }

  .checkout-info-panel {
    border-radius: 16px;
  }
}

@media (max-width: 360px) {
  .checkout-form-panel {
    border-radius: 12px;
  }

  .checkout-info-panel {
    border-radius: 12px;
  }
}

/* Mobile-only header — hidden on desktop, shown when info panel is hidden */
.checkout-container--free .checkout-mobile-header,
.checkout-container--enterprise .checkout-mobile-header {
  display: none;
}

/* Hide info panel on phones — form gets full space */
@media (max-width: 768px) {
  .checkout-container--free .checkout-info-panel,
  .checkout-container--enterprise .checkout-info-panel {
    display: none;
  }

  .checkout-container--free .checkout-mobile-header,
  .checkout-container--enterprise .checkout-mobile-header {
    display: block;
    padding: 24px 24px 0 24px;
  }

  .checkout-mobile-header h2 {
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--color-neutral-900, #171717);
    line-height: 1.3;
  }

  .checkout-mobile-header p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-neutral-600, #525252);
  }

  .checkout-mobile-header__note {
    margin-top: 12px;
    font-size: 12px;
    color: var(--color-neutral-400, #a3a3a3);
  }
}

@media (max-width: 480px) {
  .checkout-container--free .checkout-mobile-header,
  .checkout-container--enterprise .checkout-mobile-header {
    padding: 20px 16px 0 16px;
  }

  .checkout-mobile-header h2 {
    font-size: 20px;
  }

  .checkout-mobile-header p {
    font-size: 13px;
  }
}

@media (max-width: 360px) {
  .checkout-container--free .checkout-mobile-header,
  .checkout-container--enterprise .checkout-mobile-header {
    padding: 16px 14px 0 14px;
  }

  .checkout-mobile-header h2 {
    font-size: 18px;
  }
}

/* Info Panel - Left Side (appears on right in row-reverse) */
.checkout-info-panel {
  flex: 1;
  background: linear-gradient(160deg, var(--color-primary-700, #0a7a4d) 0%, var(--color-primary-900, #064e31) 100%);
  color: var(--color-white, #ffffff);
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
  overflow: hidden;
}

.checkout-info-panel::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

.checkout-info-panel--summary {
  flex: 0 0 380px;
}

@media (max-width: 1000px) {
  .checkout-info-panel {
    padding: 32px;
  }

  .checkout-info-panel--summary {
    flex: none;
  }
}

.checkout-info-panel h2 {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}

.checkout-info-panel h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.checkout-info-panel h5 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-white, #ffffff);
}

.checkout-info-panel__description {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-primary-100, #d1fae5);
}

/* Features List */
.checkout-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkout-feature-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.checkout-feature-item span {
  font-size: 14px;
  color: var(--color-primary-100, #d1fae5);
}

/* Order Summary */
.checkout-order-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkout-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--color-primary-100, #d1fae5);
  font-size: 14px;
}

.checkout-summary-row--total h5 {
  color: var(--color-white, #ffffff);
}

.checkout-summary-label--white {
  color: var(--color-white, #ffffff);
}

/* Separator */
.checkout-separator {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.08) 100%);
  margin: 10px 0;
}

/* Availability Note */
.checkout-availability-note {
  margin: 0;
  font-size: 12px;
  color: var(--color-primary-100, #d1fae5);
  opacity: 0.5;
}

/* Form Panel - Right Side */
.checkout-form-panel {
  flex: 1;
  padding: 8px;
  background-color: var(--color-white, #ffffff);
  min-height: 400px;
}

.checkout-form-panel--clinical-pro {
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

@media (max-width: 1000px) {
  .checkout-form-panel {
    padding: 0;
  }

  .checkout-form-panel--clinical-pro {
    padding: 32px;
    gap: 32px;
  }
}

/* HubSpot Form Styling */
.checkout-form-panel .hs-form-frame {
  width: 100%;
  min-height: 400px;
}

/* HubSpot form embed overrides */
.checkout-form-panel .hs-form {
  padding: 24px;
}

.checkout-form-panel .hs-form .hs-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-neutral-300, #d4d4d4);
  border-radius: 8px;
  font-size: 14px;
}

.checkout-form-panel .hs-form .hs-input:focus {
  outline: none;
  border-color: var(--color-primary-500, #10a267);
  box-shadow: 0 0 0 2px rgba(16, 162, 103, 0.2);
}

.checkout-form-panel .hs-form .hs-button {
  background-color: var(--color-primary-500, #10a267);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.checkout-form-panel .hs-form .hs-button:hover {
  background-color: var(--color-primary-600, #0d8a56);
}

.checkout-form-panel .hs-form label {
  font-weight: 500;
  margin-bottom: 4px;
  display: block;
  font-size: 14px;
}

@media (max-width: 1000px) {
  .checkout-form-panel .hs-form {
    padding: 16px;
  }

  .checkout-form-panel .hs-form .hs-button {
    width: 100%;
  }
}

/* Form Sections */
.checkout-form-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.checkout-form-section h5 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-neutral-900, #171717);
}

/* Product Row - align quantity selector to bottom so it lines up with the badge in both cards */
.checkout-product-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 16px;
  border-radius: 12px;
  background-color: var(--color-neutral-50, #fafafa);
  border: 1px solid var(--color-neutral-200, #e5e5e5);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.checkout-product-row:hover {
  border-color: var(--color-neutral-300, #d4d4d4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

@media (max-width: 600px) {
  .checkout-product-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

.checkout-product-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checkout-product-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-neutral-900, #171717);
}

.checkout-product-price {
  font-size: 12px;
  color: var(--color-neutral-500, #737373);
}

/* Badges */
.checkout-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  width: fit-content;
}

.checkout-badge--primary {
  background-color: rgba(16, 162, 103, 0.1);
  color: var(--color-primary-600, #0d8a56);
  border: 1px solid rgba(16, 162, 103, 0.2);
}

.checkout-badge--neutral {
  background-color: var(--color-neutral-100, #f5f5f5);
  color: var(--color-neutral-600, #525252);
  border: 1px solid var(--color-neutral-200, #e5e5e5);
}

/* Quantity Selector */
.checkout-quantity-selector {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 36px;
}

.checkout-quantity-selector > * {
  vertical-align: middle;
}

.checkout-qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: 1px solid var(--color-neutral-200, #e5e5e5);
  background-color: var(--color-white, #ffffff);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--color-neutral-600, #525252);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  padding: 0;
  line-height: 0;
}

.checkout-qty-btn op-icon {
  display: block;
}

.checkout-qty-btn:hover {
  background-color: var(--color-neutral-100, #f5f5f5);
  border-color: var(--color-neutral-300, #d4d4d4);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.checkout-qty-btn:active {
  background-color: var(--color-neutral-200, #e5e5e5);
  box-shadow: none;
  transform: scale(0.96);
}

.checkout-qty-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 36px;
  line-height: 1;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-600, #525252);
}

.checkout-qty-max {
  display: inline-flex;
  align-items: center;
  height: 36px;
  line-height: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-neutral-400, #a3a3a3);
  margin-left: -2px;
}

/* Form Fields */
.checkout-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.checkout-field label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-neutral-700, #404040);
}

.checkout-field input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-neutral-300, #d4d4d4);
  border-radius: 10px;
  font-size: 14px;
  background-color: var(--color-white, #ffffff);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.checkout-field input:focus {
  outline: none;
  border-color: var(--color-primary-500, #10a267);
  box-shadow: 0 0 0 3px rgba(16, 162, 103, 0.12);
}

.checkout-field input::placeholder {
  color: var(--color-neutral-400, #a3a3a3);
}

.checkout-field select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-neutral-300, #d4d4d4);
  border-radius: 10px;
  font-size: 14px;
  background-color: var(--color-white, #ffffff);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23737373' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

.checkout-field select:focus {
  outline: none;
  border-color: var(--color-primary-500, #10a267);
  box-shadow: 0 0 0 3px rgba(16, 162, 103, 0.12);
}

@media (max-width: 600px) {
  .checkout-field input {
    font-size: 16px;
    padding: 14px 14px;
  }

  .checkout-field select {
    font-size: 16px;
    padding: 14px 14px;
    background-position: right 12px center;
  }
}

.checkout-field-row {
  display: flex;
  gap: 16px;
}

@media (max-width: 600px) {
  .checkout-field-row {
    flex-direction: column;
    gap: 16px;
  }
}

.checkout-field-row .checkout-field {
  flex: 1;
}

/* Submit Button */
.checkout-submit-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px;
  background: linear-gradient(180deg, var(--color-primary-500, #10a267) 0%, var(--color-primary-600, #0d8a56) 100%);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 4px 12px rgba(16, 162, 103, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.checkout-submit-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--color-primary-400, #34d399) 0%, var(--color-primary-500, #10a267) 100%);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.1),
    0 8px 20px rgba(16, 162, 103, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.checkout-submit-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.1),
    0 2px 8px rgba(16, 162, 103, 0.2);
}

.checkout-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* Native form layout (direct API submission) */
.checkout-native-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px;
}

@media (max-width: 1000px) {
  .checkout-native-form {
    padding: 32px;
  }
}

@media (max-width: 768px) {
  .checkout-native-form {
    padding: 24px;
    gap: 18px;
  }
}

@media (max-width: 480px) {
  .checkout-native-form {
    padding: 20px 16px;
    gap: 16px;
  }
}

@media (max-width: 360px) {
  .checkout-native-form {
    padding: 16px 14px;
  }
}

/* Required field asterisk */
.checkout-required {
  color: var(--color-error, #e14d13);
}

/* Inline field validation error text */
.checkout-field-error {
  font-size: 12px;
  color: var(--color-error, #e14d13);
  min-height: 0;
  line-height: 1.4;
}

.checkout-field-error:empty {
  display: none;
}

/* Invalid input state (red border) */
.checkout-input-invalid {
  border-color: var(--color-error, #e14d13) !important;
  box-shadow: 0 0 0 3px rgba(225, 77, 19, 0.1) !important;
}

/* Error Message */
.checkout-error {
  padding: 12px 16px;
  background-color: rgba(225, 77, 19, 0.08);
  color: var(--color-error, #e14d13);
  border-radius: 10px;
  font-size: 14px;
  border: 1px solid rgba(225, 77, 19, 0.15);
}

/* Form Message */
.checkout-message {
  padding: 16px;
  background-color: var(--color-neutral-50, #fafafa);
  border-radius: 12px;
  font-size: 14px;
  color: var(--color-neutral-500, #737373);
  text-align: center;
  border: 1px solid var(--color-neutral-200, #e5e5e5);
}

/* Payment subtitle */
.checkout-payment-subtitle {
  font-size: 13px;
  color: var(--color-neutral-500, #737373);
  margin: -8px 0 8px 0;
}

/* Payment section animation */
#payment-section {
  animation: checkoutFadeIn 0.3s ease-out;
}

@keyframes checkoutFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   CHECKOUT PAGES - ENHANCED MOBILE RESPONSIVE
   ============================================ */

/* Tablet breakpoint - 1000px */
@media (max-width: 1000px) {
  /* Better container padding for tablets (op-container needs !important) */
  .checkout-container--clinical-pro {
    padding: 120px 32px 48px 32px !important;
  }

  /* Info panel adjustments */
  .checkout-info-panel {
    padding: 32px;
    gap: 20px;
  }

  .checkout-info-panel h2 {
    font-size: 24px;
  }

  .checkout-info-panel__description {
    font-size: 15px;
  }

  .checkout-form-panel .hs-form {
    padding: 24px;
  }

  /* Form fields */
  .checkout-field input {
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  /* Quantity buttons - larger touch targets */
  .checkout-qty-btn {
    width: 44px;
    height: 44px;
  }

  .checkout-qty-value,
  .checkout-qty-max {
    height: 44px;
    line-height: 44px;
  }

  .checkout-qty-value {
    min-width: 40px;
    font-size: 16px;
  }
}

/* Mobile breakpoint - 768px */
@media (max-width: 768px) {
  .checkout-container--free,
  .checkout-container--enterprise {
    padding: 100px 24px 48px 24px;
  }

  .checkout-container--clinical-pro {
    padding: 100px 24px 48px 24px !important;
  }

  /* Info panel */
  .checkout-info-panel {
    padding: 28px;
    gap: 16px;
  }

  .checkout-info-panel h2 {
    font-size: 22px;
    line-height: 1.3;
  }

  .checkout-info-panel__description {
    font-size: 14px;
    line-height: 1.5;
  }

  /* Features list */
  .checkout-feature-item {
    gap: 10px;
  }

  .checkout-feature-item span {
    font-size: 13px;
  }

  /* HubSpot form styling */
  .checkout-form-panel .hs-form {
    padding: 20px;
  }

  .checkout-form-panel .hs-form .hs-input {
    padding: 14px 16px;
    font-size: 16px; /* Prevents iOS zoom */
  }

  .checkout-form-panel .hs-form .hs-button {
    width: 100%;
    padding: 14px 24px;
    font-size: 15px;
  }

  .checkout-form-panel .hs-form label {
    font-size: 13px;
    margin-bottom: 6px;
  }

  /* Clinical Pro form panel */
  .checkout-form-panel--clinical-pro {
    padding: 28px;
    gap: 28px;
  }

  /* Form sections */
  .checkout-form-section {
    gap: 14px;
  }

  .checkout-form-section h5 {
    font-size: 15px;
  }

  /* Form fields */
  .checkout-field {
    gap: 6px;
  }

  .checkout-field label {
    font-size: 13px;
  }

  .checkout-field input {
    padding: 14px 16px;
    font-size: 16px; /* Prevents iOS zoom */
    border-radius: 10px;
  }

  /* Product rows */
  .checkout-product-row {
    padding: 14px;
    border-radius: 12px;
    gap: 12px;
  }

  .checkout-product-label {
    font-size: 13px;
  }

  .checkout-product-price {
    font-size: 11px;
  }

  /* Badges */
  .checkout-badge {
    padding: 3px 6px;
    font-size: 11px;
  }

  /* Submit button */
  .checkout-submit-btn {
    padding: 16px 24px;
    font-size: 15px;
    border-radius: 10px;
  }

  /* Messages */
  .checkout-message {
    padding: 14px;
    font-size: 13px;
    border-radius: 10px;
  }

  .checkout-error {
    padding: 12px 14px;
    font-size: 13px;
  }
}

/* Small mobile breakpoint - 480px */
@media (max-width: 480px) {
  .checkout-container--clinical-pro {
    padding: 90px 16px 40px 16px !important;
  }

  /* Info panel - more compact */
  .checkout-info-panel {
    padding: 24px 20px;
    gap: 14px;
  }

  .checkout-info-panel h2 {
    font-size: 20px;
  }

  .checkout-info-panel__description {
    font-size: 13px;
  }

  .checkout-info-panel h4 {
    font-size: 14px;
  }

  .checkout-info-panel h5 {
    font-size: 13px;
  }

  /* Order summary */
  .checkout-summary-row {
    font-size: 13px;
  }

  /* Features */
  .checkout-feature-item span {
    font-size: 12px;
  }

  /* Separator */
  .checkout-separator {
    margin: 6px 0;
  }

  /* Availability note */
  .checkout-availability-note {
    font-size: 11px;
  }

  /* HubSpot form */
  .checkout-form-panel .hs-form {
    padding: 16px;
  }

  .checkout-form-panel .hs-form .hs-input {
    padding: 12px 14px;
  }

  .checkout-form-panel .hs-form .hs-button {
    padding: 14px 20px;
  }

  /* Clinical Pro form panel */
  .checkout-form-panel--clinical-pro {
    padding: 20px 16px;
    gap: 24px;
  }

  /* Form fields */
  .checkout-field input {
    padding: 12px 14px;
  }

  /* Product rows - stack on very small screens */
  .checkout-product-row {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px;
    gap: 12px;
  }

  .checkout-product-info {
    width: 100%;
  }

  .checkout-quantity-selector {
    align-self: flex-end;
    margin-top: 4px;
  }

  /* Quantity buttons */
  .checkout-qty-btn {
    width: 40px;
    height: 40px;
  }

  .checkout-qty-value,
  .checkout-qty-max {
    height: 40px;
    line-height: 40px;
  }

  .checkout-qty-value {
    min-width: 36px;
  }

  /* Submit button */
  .checkout-submit-btn {
    padding: 14px 20px;
  }

  /* Messages */
  .checkout-message {
    padding: 12px;
    font-size: 12px;
  }
}

/* Very small screens - 360px */
@media (max-width: 360px) {
  .checkout-container--free,
  .checkout-container--enterprise {
    padding: 85px 12px 32px 12px;
  }

  .checkout-container--clinical-pro {
    padding: 85px 12px 32px 12px !important;
  }

  .checkout-info-panel {
    padding: 20px 16px;
  }

  .checkout-info-panel h2 {
    font-size: 18px;
  }

  .checkout-form-panel--clinical-pro {
    padding: 16px 14px;
    gap: 20px;
  }

  .checkout-product-row {
    padding: 10px;
  }

  .checkout-qty-btn {
    width: 36px;
    height: 36px;
  }

  .checkout-qty-value,
  .checkout-qty-max {
    height: 36px;
    line-height: 36px;
  }

  .checkout-qty-value {
    min-width: 28px;
    font-size: 14px;
  }
}

/* HubSpot form iframe mobile fixes */
.checkout-form-panel .hs-form-frame,
.checkout-form-panel iframe[id^="hs-form-iframe"] {
  width: 100% !important;
  max-width: 100% !important;
}

@media (max-width: 1000px) {
  .checkout-form-panel .hs-form-frame {
    overflow: visible;
    min-height: 1300px;
  }

  /* Force HubSpot iframe to expand — overrides inline height set by HS JS */
  .checkout-form-panel .hs-form-frame iframe,
  .checkout-form-panel iframe[id^="hs-form-iframe"] {
    overflow: visible;
    height: 1300px !important;
    min-height: 1300px !important;
  }
}

@media (max-width: 480px) {
  .checkout-form-panel .hs-form-frame {
    min-height: 2050px;
  }

  .checkout-form-panel .hs-form-frame iframe,
  .checkout-form-panel iframe[id^="hs-form-iframe"] {
    height: 2050px !important;
    min-height: 2050px !important;
  }
}

/* HubSpot form field spacing on mobile */
@media (max-width: 768px) {
  .checkout-form-panel .hs-form .hs-form-field {
    margin-bottom: 16px;
  }

  .checkout-form-panel .hs-form .hs-fieldtype-text,
  .checkout-form-panel .hs-form .hs-fieldtype-email,
  .checkout-form-panel .hs-form .hs-fieldtype-textarea {
    width: 100%;
  }

  /* Multi-column form rows should stack */
  .checkout-form-panel .hs-form .form-columns-2,
  .checkout-form-panel .hs-form .form-columns-3 {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .checkout-form-panel .hs-form .form-columns-2 > .hs-form-field,
  .checkout-form-panel .hs-form .form-columns-3 > .hs-form-field {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
  }

  /* Error messages */
  .checkout-form-panel .hs-form .hs-error-msgs {
    font-size: 12px;
    margin-top: 6px;
  }

  /* Checkbox and radio alignment */
  .checkout-form-panel .hs-form .hs-fieldtype-booleancheckbox label,
  .checkout-form-panel .hs-form .hs-fieldtype-radio label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
  }

  .checkout-form-panel .hs-form .hs-fieldtype-booleancheckbox input,
  .checkout-form-panel .hs-form .hs-fieldtype-radio input {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
  }
}

/* Ensure touch-friendly spacing */
@media (max-width: 768px) {
  .checkout-form-panel .hs-form .hs-submit {
    margin-top: 24px;
  }

  .checkout-form-panel .hs-form .hs-richtext {
    font-size: 13px;
    line-height: 1.5;
  }

  /* Legal text */
  .checkout-form-panel .hs-form .legal-consent-container {
    font-size: 12px;
    line-height: 1.4;
  }
}

/* ==========================================================================
   Account Details Page (Free Checkout Step 2)
   Credential verification page with HubSpot form + info sidebar
   ========================================================================== */

/* Hero - Teal gradient */
.acct-details-hero {
  padding: 160px 24px 80px 24px;
  text-align: center;
  width: 100%;
}

.acct-details-hero__inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.acct-details-hero h1 {
  color: #ffffff;
  font-size: 44px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 16px 0;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.acct-details-hero p {
  color: rgba(255, 255, 255, 0.95);
  font-size: 20px;
  line-height: 1.5;
  margin: 0;
  max-width: 600px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* Wizard - non-interactive display, force white text on dark bg */
.acct-details-wizard {
  pointer-events: none;
}

.acct-details-wizard op-wizard-item span {
  color: rgba(255, 255, 255, 0.85) !important;
}

.acct-details-wizard op-wizard-item[active] span {
  color: #ffffff !important;
  font-weight: 600;
}

.acct-details-wizard op-wizard-item[completed] span {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* Card - Two column layout */
.acct-details-card {
  display: flex;
  flex-direction: row;
  max-width: 1200px;
  width: calc(100% - 48px);
  margin: -40px auto 64px auto;
  border-radius: 24px;
  background-color: var(--color-white, #ffffff);
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.03),
    0 2px 4px rgba(0, 0, 0, 0.02),
    0 8px 16px rgba(0, 0, 0, 0.04),
    0 24px 48px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--color-neutral-200, #e5e5e5);
  position: relative;
  z-index: 2;
}

/* Left column - Form */
.acct-details-form {
  flex: 3;
  padding: 48px;
  min-width: 0;
}

.acct-details-form h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-neutral-900, #171717);
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.acct-details-form__description {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-neutral-600, #525252);
  margin: 0 0 24px 0;
}

.acct-details-form .hs-form-frame {
  width: 100%;
  min-height: 400px;
}

/* Right column - Sidebar */
.acct-details-sidebar {
  flex: 2;
  background-color: var(--color-neutral-50, #fafafa);
  border-left: 1px solid var(--color-neutral-200, #e5e5e5);
  padding: 64px 40px 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Sidebar blocks */
.acct-details-sidebar__block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.acct-details-sidebar__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-neutral-900, #171717);
  display: flex;
  align-items: center;
  gap: 8px;
}

.acct-details-sidebar__title svg {
  color: var(--color-primary-500, #10a267);
  flex-shrink: 0;
}

.acct-details-sidebar__text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-neutral-600, #525252);
  margin: 0;
}

/* Steps list */
.acct-details-sidebar__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.acct-details-sidebar__steps li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-neutral-600, #525252);
  padding-left: 20px;
  position: relative;
}

.acct-details-sidebar__steps li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-primary-500, #10a267);
}

/* Compliance badge */
.acct-details-sidebar__badge {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--color-neutral-200, #e5e5e5);
  background-color: var(--color-white, #ffffff);
}

.acct-details-sidebar__badge svg {
  color: var(--color-primary-500, #10a267);
  flex-shrink: 0;
  margin-top: 2px;
}

.acct-details-sidebar__badge strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-900, #171717);
  margin-bottom: 2px;
}

.acct-details-sidebar__badge span {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-neutral-600, #525252);
}

/* HubSpot form styling within account details */
.acct-details-form .hs-form .hs-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-neutral-300, #d4d4d4);
  border-radius: 8px;
  font-size: 14px;
}

.acct-details-form .hs-form .hs-input:focus {
  outline: none;
  border-color: var(--color-primary-500, #10a267);
  box-shadow: 0 0 0 2px rgba(16, 162, 103, 0.2);
}

.acct-details-form .hs-form .hs-button {
  background-color: var(--color-primary-500, #10a267);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.acct-details-form .hs-form .hs-button:hover {
  background-color: var(--color-primary-600, #0d8a56);
}

.acct-details-form .hs-form label {
  font-weight: 500;
  margin-bottom: 4px;
  display: block;
  font-size: 14px;
}

/* --- Account Details Mobile Responsive --- */

/* Tablet - 1000px */
@media (max-width: 1000px) {
  .acct-details-hero {
    padding: 120px 24px 56px 24px;
  }

  .acct-details-hero h1 {
    font-size: 36px;
  }

  .acct-details-hero p {
    font-size: 18px;
  }

  .acct-details-wizard {
    display: none;
  }

  .acct-details-card {
    flex-direction: column;
    width: calc(100% - 48px);
    margin: -24px auto 48px auto;
    border-radius: 20px;
  }

  .acct-details-form {
    padding: 32px;
  }

  .acct-details-sidebar {
    border-left: none;
    border-top: 1px solid var(--color-neutral-200, #e5e5e5);
    padding: 32px;
    gap: 24px;
  }
}

/* Mobile - 768px */
@media (max-width: 768px) {
  .acct-details-hero {
    padding: 100px 20px 48px 20px;
  }

  .acct-details-hero h1 {
    font-size: 28px;
  }

  .acct-details-hero p {
    font-size: 16px;
  }

  .acct-details-card {
    width: calc(100% - 32px);
    margin: -24px auto 40px auto;
    border-radius: 16px;
  }

  .acct-details-form {
    padding: 24px;
  }

  .acct-details-form h2 {
    font-size: 20px;
  }

  .acct-details-form__description {
    font-size: 14px;
  }

  .acct-details-sidebar {
    padding: 24px;
    gap: 20px;
  }

  .acct-details-form .hs-form .hs-input {
    font-size: 16px; /* Prevents iOS zoom */
    padding: 14px 16px;
  }

  .acct-details-form .hs-form .hs-button {
    width: 100%;
    padding: 14px 24px;
  }

  /* HubSpot form iframe */
  .acct-details-form .hs-form-frame,
  .acct-details-form .hs-form-frame iframe {
    overflow: visible;
    min-height: 700px;
  }

  /* Multi-column form rows should stack */
  .acct-details-form .hs-form .form-columns-2,
  .acct-details-form .hs-form .form-columns-3 {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .acct-details-form .hs-form .form-columns-2 > .hs-form-field,
  .acct-details-form .hs-form .form-columns-3 > .hs-form-field {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
  }
}

/* Small mobile - 480px */
@media (max-width: 480px) {
  .acct-details-hero {
    padding: 90px 16px 40px 16px;
  }

  .acct-details-hero h1 {
    font-size: 24px;
  }

  .acct-details-hero p {
    font-size: 15px;
  }

  .acct-details-card {
    width: calc(100% - 24px);
    margin: -20px auto 32px auto;
    border-radius: 14px;
  }

  .acct-details-form {
    padding: 20px 16px;
  }

  .acct-details-form h2 {
    font-size: 18px;
  }

  .acct-details-sidebar {
    padding: 20px 16px;
    gap: 16px;
  }

  .acct-details-sidebar__title {
    font-size: 15px;
  }

  .acct-details-sidebar__text {
    font-size: 13px;
  }

  .acct-details-sidebar__steps li {
    font-size: 13px;
  }

  .acct-details-form .hs-form-frame,
  .acct-details-form .hs-form-frame iframe {
    min-height: 800px;
  }
}

/* iPhone 14 and very small screens - 390px */
@media (max-width: 390px) {
  .acct-details-hero {
    padding: 85px 12px 36px 12px;
  }

  .acct-details-card {
    width: calc(100% - 16px);
    margin: -16px auto 24px auto;
    border-radius: 12px;
  }

  .acct-details-form {
    padding: 16px 14px;
  }

  .acct-details-sidebar {
    padding: 16px 14px;
  }
}

/* HubSpot form iframe width fix */
.acct-details-form .hs-form-frame,
.acct-details-form iframe[id^="hs-form-iframe"] {
  width: 100% !important;
  max-width: 100% !important;
}

/* ==========================================================================
   Free Thank You Page (Checkout Step 3)
   Credential verification progress page with 3-step "What Happens Next"
   ========================================================================== */

/* Hero - uses dark wrapper background (bg_theme="dark") */
.free-thankyou-hero {
  padding: 160px 24px 80px 24px;
  text-align: center;
  width: 100%;
}

.free-thankyou-hero__inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Check icon */
.free-thankyou-icon {
  width: 72px;
  height: 72px;
  margin-bottom: 24px;
}

.free-thankyou-icon svg {
  width: 100%;
  height: 100%;
}

.free-thankyou-hero h1 {
  color: #ffffff;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.free-thankyou-subtitle {
  color: rgba(255, 255, 255, 0.95);
  font-size: 20px;
  line-height: 1.5;
  margin: 0 0 16px 0;
  font-weight: 600;
}

.free-thankyou-description {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 1.6;
  margin: 0;
  max-width: 600px;
}

/* Wizard */
.free-thankyou-wizard {
  pointer-events: none;
}

.free-thankyou-wizard op-wizard-item span {
  color: rgba(255, 255, 255, 0.85) !important;
}

.free-thankyou-wizard op-wizard-item[active] span {
  color: #ffffff !important;
  font-weight: 600;
}

.free-thankyou-wizard op-wizard-item[completed] span {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* What Happens Next Section */
.free-thankyou-steps {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px 80px 24px;
  text-align: center;
}

.free-thankyou-steps h2 {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-white, #ffffff);
  margin: 0 0 48px 0;
}

/* 3-column grid */
.free-thankyou-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* Individual step card */
.free-thankyou-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  border-radius: 16px;
  background-color: var(--color-white, #ffffff);
  border: 1px solid var(--color-neutral-200, #e5e5e5);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Step icon */
.free-thankyou-step__icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--color-primary-600, #0d8a56);
  background-color: var(--color-primary-50, #ecfdf5);
}

/* Step number */
.free-thankyou-step__number {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary-500, #10a267);
  margin-bottom: 8px;
}

.free-thankyou-step h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-neutral-900, #171717);
  margin: 0 0 8px 0;
}

.free-thankyou-step p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-neutral-600, #525252);
  margin: 0;
}

/* Support footer */
.free-thankyou-support {
  margin: 40px 0 0 0;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.8);
}

.free-thankyou-support a {
  color: var(--color-white, #ffffff);
  text-decoration: underline;
  font-weight: 500;
}

.free-thankyou-support a:hover {
  color: var(--color-white, #ffffff);
  text-decoration: underline;
}

/* --- Free Thank You Mobile Responsive --- */

/* Tablet - 1000px */
@media (max-width: 1000px) {
  .free-thankyou-hero {
    padding: 120px 24px 56px 24px;
  }

  .free-thankyou-hero h1 {
    font-size: 32px;
  }

  .free-thankyou-subtitle {
    font-size: 18px;
  }

  .free-thankyou-wizard {
    display: none;
  }

  .free-thankyou-steps {
    padding: 48px 24px 64px 24px;
  }

  .free-thankyou-steps__grid {
    gap: 24px;
  }
}

/* Mobile - 768px */
@media (max-width: 768px) {
  .free-thankyou-hero {
    padding: 100px 20px 48px 20px;
  }

  .free-thankyou-hero h1 {
    font-size: 28px;
  }

  .free-thankyou-subtitle {
    font-size: 16px;
  }

  .free-thankyou-description {
    font-size: 15px;
  }

  .free-thankyou-icon {
    width: 60px;
    height: 60px;
  }

  .free-thankyou-steps h2 {
    font-size: 24px;
    margin-bottom: 32px;
  }

  .free-thankyou-steps__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 480px;
    margin: 0 auto;
  }

  .free-thankyou-step {
    padding: 24px 20px;
  }
}

/* Small mobile - 480px */
@media (max-width: 480px) {
  .free-thankyou-hero {
    padding: 90px 16px 40px 16px;
  }

  .free-thankyou-hero h1 {
    font-size: 24px;
  }

  .free-thankyou-subtitle {
    font-size: 15px;
  }

  .free-thankyou-description {
    font-size: 14px;
  }

  .free-thankyou-icon {
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
  }

  .free-thankyou-steps {
    padding: 40px 16px 48px 16px;
  }

  .free-thankyou-steps h2 {
    font-size: 22px;
    margin-bottom: 24px;
  }

  .free-thankyou-step {
    padding: 20px 16px;
  }

  .free-thankyou-step h3 {
    font-size: 16px;
  }

  .free-thankyou-step p {
    font-size: 13px;
  }

  .free-thankyou-support {
    font-size: 14px;
  }
}

/* iPhone 14 - 390px */
@media (max-width: 390px) {
  .free-thankyou-hero {
    padding: 85px 12px 36px 12px;
  }

  .free-thankyou-hero h1 {
    font-size: 22px;
  }
}

/* Get Started Index - Plan Selection Grid */
.page-get-started-index h1 {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 32px 0;
  text-align: center;
  color: var(--color-neutral-900, #171717);
}

.get-started-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  width: 100%;
}

.get-started-option {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: 16px;
  background-color: var(--color-white, #ffffff);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.get-started-option:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.get-started-option h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-neutral-900, #171717);
}

@media (max-width: 1000px) {
  .page-get-started-index h1 {
    font-size: 24px;
    margin-bottom: 24px;
  }

  .get-started-options {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .get-started-option {
    padding: 24px;
  }
}

/* Legacy checkout styles (for backwards compatibility) */
.checkout {
  padding: var(--space-12) 0;
}

.checkout__header {
  text-align: center;
  margin-bottom: var(--space-8);
}

.checkout__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.checkout__summary {
  background: var(--op-gray-50);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   Comparison Table
   ========================================================================== */

.comparison-block {
  /* Padding now handled by op-website-section wrapper */
  width: 100%;
}

.comparison-block__container {
  width: 100%;
  max-width: 100%;
}

.comparison-block__title {
  text-align: center;
  font-size: var(--text-2xl);
  font-weight: 700;
  margin-bottom: var(--space-8);
}

.comparison-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.comparison-table th,
.comparison-table td {
  padding: var(--space-3) var(--space-4);
  text-align: center;
  border-bottom: 1px solid var(--op-gray-200);
}

.comparison-table__feature-header {
  text-align: left;
  font-weight: 600;
}

.comparison-table__plan-header {
  font-weight: 600;
  background: var(--op-gray-50);
}

.comparison-table__feature {
  text-align: left;
  color: var(--op-gray-700);
}

.comparison-table__check {
  width: 20px;
  height: 20px;
  color: var(--op-success);
}

.comparison-table__x {
  width: 20px;
  height: 20px;
  color: var(--op-gray-400);
}

.comparison-table__partial {
  width: 20px;
  height: 20px;
  color: var(--op-warning);
}

/* ==========================================================================
   Masonry Grid
   ========================================================================== */

.masonry-block {
  padding: var(--space-10) 0;
}

.masonry-grid {
  display: grid;
}

.masonry-grid--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.masonry-grid--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.masonry-grid--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.masonry-grid--gap-small {
  gap: var(--space-3);
}

.masonry-grid--gap-medium {
  gap: var(--space-5);
}

.masonry-grid--gap-large {
  gap: var(--space-8);
}

@media (max-width: 768px) {
  .masonry-grid--cols-3,
  .masonry-grid--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .masonry-grid {
    grid-template-columns: 1fr;
  }
}

.masonry-item {
  background: var(--op-white);
  border: 1px solid var(--op-gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.masonry-item--clickable {
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.masonry-item--clickable:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.masonry-item__link {
  display: block;
}

.masonry-item__image img {
  width: 100%;
  height: auto;
}

.masonry-item__content {
  padding: var(--space-4);
}

.masonry-item__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.masonry-item__text {
  color: var(--op-gray-600);
  font-size: var(--text-sm);
  margin-bottom: var(--space-3);
}

.masonry-item__author {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.masonry-item__author-name {
  font-weight: 500;
  font-size: var(--text-sm);
}

.masonry-item__author-role {
  color: var(--op-gray-500);
  font-size: var(--text-xs);
}

/* ==========================================================================
   Heading & Text Blocks
   ========================================================================== */

.heading-block {
  margin-bottom: var(--space-6);
}

.heading-block--center {
  text-align: center;
}

.heading-block--right {
  text-align: right;
}

.heading-block__title {
  margin-bottom: var(--space-2);
}

.heading-block__subtitle {
  color: var(--op-gray-600);
  font-size: var(--text-lg);
}

.text-block {
  margin-bottom: var(--space-4);
}

.text-block--center {
  text-align: center;
}

.text-block--right {
  text-align: right;
}

.rich-text-block {
  margin-bottom: var(--space-6);
}

/* ==========================================================================
   Flexible Page
   ========================================================================== */

.flexible-page {
  /* Container for StreamField blocks */
}

.flexible-page > * {
  /* Each block may have its own container */
}

/* Dark theme: Change grey text to white in flexible page blocks */
/* When page has green_background (dark theme), grey text should be white */
/* Target elements with inline styles containing neutral-600 color (various formats) */
.page-flexible--dark [style*="var(--color-neutral-600)"],
.page-flexible--dark [style*="var(--color-neutral-600);"],
.page-flexible--dark [style*="color: var(--color-neutral-600)"],
.page-flexible--dark [style*="color:var(--color-neutral-600)"] {
  color: var(--color-white) !important;
}

/* More specific targeting for common block elements with grey text */
.page-flexible--dark op-website-section > div[style*="neutral-600"],
.page-flexible--dark op-website-section > span[style*="neutral-600"],
.page-flexible--dark op-website-section > p[style*="neutral-600"],
.page-flexible--dark .text-block__content,
.page-flexible--dark .feature-grid__description {
  color: var(--color-white) !important;
}

/* ==========================================================================
   Flexible Comparison Block
   ========================================================================== */

/* Match CTA container width and behavior */
/* Break out of parent container padding, then constrain to match CTA container */
.page-flexible .flexible-comparison-block {
  margin-left: -120px;
  margin-right: -120px;
  width: calc(100% + 240px);
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* Match CTA container padding - responsive like CTA container */
.page-flexible .flexible-comparison-block__container {
  padding-left: 120px;
  padding-right: 120px;
}

@media (max-width: 768px) {
  .page-flexible .flexible-comparison-block {
    margin-left: -24px;
    margin-right: -24px;
    width: calc(100% + 48px);
    max-width: 100%;
  }
  
  .page-flexible .flexible-comparison-block__container {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ==========================================================================
   Hero Showcase (Animated)
   Matches: src/components/hero/hero.tsx
   Reusable hero component with "Boing" entrance animation
   ========================================================================== */

.hero-showcase {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    width: 100%;
    padding-top: 24px;
}

.hero-showcase__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.hero-showcase__headline {
    color: var(--color-black, #000);
    font-size: 64px;
    font-weight: 900;
    line-height: 64px;
    max-width: 800px;
    text-align: center;
    margin: 0;
}

.hero-showcase__description {
    line-height: 24px;
    color: var(--color-neutral-600, #525252);
    font-size: 20px;
    max-width: 480px;
    text-align: center;
    margin: 0;
}

.hero-showcase__cta {
    text-decoration: none;
}

.hero-showcase__wrapper {
    width: 100%;
    height: 650px;
    overflow: visible;
}

.hero-showcase__animated {
    width: 100%;
    height: 100%;
}

/* Boing Animation */
.hero-showcase__animated--boing {
    animation: heroBoingIn 600ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 100ms;
    opacity: 0;
}

@keyframes heroBoingIn {
    0% {
        opacity: 0;
        transform: scale(0.25) translateY(50%) rotate(-15deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.05) translateY(-2%) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0) rotate(0deg);
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .hero-showcase__animated--boing {
        animation: heroFadeIn 300ms ease-out forwards;
    }

    @keyframes heroFadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}

.hero-showcase__frame {
    width: 100%;
    aspect-ratio: 1440 / 900;
    border-radius: 48px;
    box-shadow: 0 24px 64px 12px rgba(16, 162, 103, 0.1);
}

.hero-showcase__gradient {
    width: 100%;
    height: 100%;
    border-radius: 48px;
    padding: 48px 48px 0 48px;
    background: linear-gradient(135deg, var(--color-primary-500, #10a267) 0%, var(--color-primary-700, #0a7a4d) 100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.hero-showcase__screenshot {
    width: 100%;
    background-color: white;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
    filter: contrast(102.5%) brightness(100%);
}

.hero-showcase__image,
.hero-showcase__video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.hero-showcase__video {
    background-color: var(--color-neutral-100, #f5f5f5);
}

/* Responsive */
@media (max-width: 768px) {
    .hero-showcase {
        padding-top: 12px;
        gap: 24px;
    }

    .hero-showcase__headline {
        font-size: 40px;
        line-height: 44px;
    }

    .hero-showcase__description {
        font-size: 16px;
        line-height: 22px;
    }

    .hero-showcase__wrapper {
        height: auto;
    }

    .hero-showcase__frame {
        border-radius: 24px;
    }

    .hero-showcase__gradient {
        border-radius: 24px;
        padding: 20px 20px 0 20px;
    }

    .hero-showcase__screenshot {
        border-radius: 8px 8px 0 0;
    }
}

@media (max-width: 480px) {
    .hero-showcase {
        gap: 20px;
        padding-top: 24px;
    }

    .hero-showcase__headline {
        font-size: 32px;
        line-height: 36px;
    }

    .hero-showcase__description {
        font-size: 15px;
        line-height: 21px;
    }

    .hero-showcase__wrapper {
        height: auto;
    }

    .hero-showcase__frame {
        border-radius: 20px;
    }

    .hero-showcase__gradient {
        border-radius: 20px;
        padding: 16px 16px 0 16px;
    }

    .hero-showcase__screenshot {
        border-radius: 6px 6px 0 0;
    }
}

@media (max-width: 390px) {
    .hero-showcase {
        gap: 16px;
        padding-top: 20px;
    }
}

/* ==========================================================================
   DEPRECATED: Get Started Free/Clinical Pro Page
   These styles have been consolidated into the .checkout-* classes above.
   See "Checkout Page (New Two-Column Layout)" section.
   ========================================================================== */