/**
 * 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 */
.blog-grid-container {
  /* Direction handled by data-responsive JS */
}

/* Blog Card - individual card in grid */
.blog-card {
  /* Desktop: calc((100% - 24px * 2) / 3) for 3 columns */
  width: calc((100% - 48px) / 3);
  flex-shrink: 0;
  /* 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;
}

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

@media (max-width: 1000px) {
  .blog-card {
    width: 100% !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 Body - article content styling */
.blog-post__body {
  width: 100%;
  font-size: 18px;
  line-height: 1.8;
  color: var(--color-neutral-700);
}

.blog-post__body h2 {
  font-size: 28px;
  font-weight: 700;
  margin-top: 48px;
  margin-bottom: 16px;
  color: var(--color-neutral-900);
}

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

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

.blog-post__body p {
  margin-bottom: 16px;
  line-height: 1.8;
}

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

.blog-post__body li {
  margin-bottom: 8px;
  line-height: 1.8;
}

.blog-post__body blockquote {
  margin: 24px 0;
  padding: 16px 24px;
  border-left: 4px solid var(--color-primary-500);
  background-color: var(--color-neutral-50);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--color-neutral-600);
}

.blog-post__body pre {
  margin: 24px 0;
  padding: 16px;
  background-color: var(--color-neutral-900);
  border-radius: 8px;
  overflow-x: auto;
}

.blog-post__body code {
  font-family: 'SF Mono', Monaco, 'Courier New', monospace;
  font-size: 14px;
}

.blog-post__body pre code {
  color: var(--color-neutral-100);
}

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

.blog-post__body a {
  color: var(--color-primary-500);
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

.blog-post__body img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin: 24px 0;
}

.blog-post__body table {
  width: 100%;
  margin: 24px 0;
  border-collapse: collapse;
}

.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;
}

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

@media (max-width: 1000px) {
  .blog-post__body {
    font-size: 16px;
  }

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

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

/* ==========================================================================
   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;
}

.checkout-container--free,
.checkout-container--enterprise,
.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;
  }

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

  /* Reduce border radius on mobile for better fit */
  .checkout-form-container {
    border-radius: 24px;
  }

  /* 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;
  }

  /* Smaller border radius on very small screens */
  .checkout-form-container {
    border-radius: 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;
}

/* 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 4px 24px rgba(0, 0, 0, 0.08);
}

.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-reverse;
  }
}

/* Info Panel - Left Side (appears on right in row-reverse) */
.checkout-info-panel {
  flex: 1;
  background-color: var(--color-primary-800, #0a5e3c);
  color: var(--color-white, #ffffff);
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.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-color: var(--color-primary-100, #d1fae5);
  opacity: 0.125;
  margin: 8px 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 */
.checkout-product-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-radius: 8px;
  background-color: var(--color-neutral-50, #fafafa);
  box-shadow: inset 0 0 0 1px rgba(18, 20, 19, 0.08);
}

@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 8px;
  border-radius: 6px;
  font-size: 12px;
  width: fit-content;
}

.checkout-badge--primary {
  background-color: rgba(16, 162, 103, 0.25);
  color: var(--color-primary-500, #10a267);
}

.checkout-badge--neutral {
  background-color: rgba(115, 115, 115, 0.25);
  color: var(--color-neutral-500, #737373);
}

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

.checkout-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-neutral-200, #e5e5e5);
  background-color: var(--color-white, #ffffff);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--color-neutral-600, #525252);
}

.checkout-qty-btn:hover {
  background-color: var(--color-neutral-100, #f5f5f5);
  border-color: var(--color-neutral-300, #d4d4d4);
}

.checkout-qty-btn:active {
  background-color: var(--color-neutral-200, #e5e5e5);
}

.checkout-qty-value {
  min-width: 32px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-600, #525252);
}

/* 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: none;
  border-radius: 8px;
  font-size: 14px;
  box-shadow: inset 0 0 0 1px rgba(18, 20, 19, 0.15),
              inset 0 2px 4px 0 rgba(18, 20, 19, 0.05);
  transition: box-shadow 0.2s ease;
}

.checkout-field input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--color-primary-500, #10a267);
}

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

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

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

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

/* Submit Button */
.checkout-submit-btn {
  width: 100%;
  padding: 14px 24px;
  background-color: var(--color-primary-500, #10a267);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.checkout-submit-btn:hover:not(:disabled) {
  background-color: var(--color-primary-600, #0d8a56);
}

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

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

/* Form Message */
.checkout-message {
  padding: 16px;
  background-color: var(--color-neutral-50, #fafafa);
  border-radius: 8px;
  font-size: 14px;
  color: var(--color-neutral-600, #525252);
  text-align: center;
}

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

/* Tablet breakpoint - 1000px */
@media (max-width: 1000px) {
  /* Better container padding for tablets */
  .checkout-container,
  .checkout-container--enterprise {
    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;
  }

  /* HubSpot form panel */
  .checkout-form-panel {
    min-height: 350px;
  }

  .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 {
    min-width: 40px;
    font-size: 16px;
  }
}

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

  /* Form container */
  .checkout-form-container {
    border-radius: 24px;
  }

  /* 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,
  .checkout-container--enterprise {
    padding: 90px 16px 40px 16px !important;
  }

  /* Form container */
  .checkout-form-container {
    border-radius: 16px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  }

  /* 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;
  }

  /* 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,
  .checkout-container--enterprise {
    padding: 85px 12px 32px 12px !important;
  }

  .checkout-form-container {
    border-radius: 12px;
  }

  .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 {
    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;
}

/* 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;
  }
}

/* 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;
    }

    .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;
    }
}

/* ==========================================================================
   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.
   ========================================================================== */