/**
 * SIZING SYSTEM
 * Comprehensive sizing utilities and component-specific overrides
 * Applies design system tokens to inline-styled components
 */

/* ===== HERO SECTION SIZING ===== */

/* Hero Headline - Using original inline styles from index.html */

/* Hero Subheadline - Clear hierarchy */
.sv-subheadline {
  font-size: var(--text-lg) !important;
  line-height: var(--leading-relaxed) !important;
  margin-top: var(--space-lg) !important;
  margin-bottom: var(--space-xl) !important;
  max-width: 90% !important;
}

@media (max-width: 767px) {
  .sv-subheadline {
    font-size: var(--text-base) !important;
    max-width: 100% !important;
  }
}

/* Hero Container Spacing */
.sv-hero-container {
  padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 1.5rem) !important;
}

@media (max-width: 767px) {
  .sv-hero-container {
    padding: 3rem 1.25rem !important;
  }
}

/* ===== STATS SECTION SIZING ===== */

/* Stat Values - Keep prominent but not competing with headline */
.sv-stat-value,
.sv-stat-counter {
  font-size: var(--text-4xl) !important;
  line-height: var(--leading-none) !important;
  font-weight: var(--weight-bold) !important;
}

@media (max-width: 767px) {
  .sv-stat-value,
  .sv-stat-counter {
    font-size: var(--text-3xl) !important;
  }
}

/* Stat Labels - Increase from 13.6px to 16px for readability */
.sv-stat-label {
  font-size: var(--text-base) !important;
  letter-spacing: 0.02em !important;
  margin-top: var(--space-sm) !important;
}

@media (max-width: 767px) {
  .sv-stat-label {
    font-size: var(--text-sm) !important;
  }
}

/* Stat Cards - More breathing room */
.sv-stat-card {
  padding: var(--space-lg) !important;
}

.sv-stats-row {
  gap: var(--space-lg) !important;
  margin-bottom: var(--space-md) !important;
}

@media (max-width: 767px) {
  .sv-stat-card {
    padding: var(--space-md) !important;
  }

  .sv-stats-row {
    gap: var(--space-md) !important;
  }
}

/* ===== CTA BUTTONS SIZING ===== */

/* Primary CTA - Make it big and bold */
.sv-primary-btn {
  font-size: var(--text-xl) !important;
  padding: 1.25rem 3rem !important;
  font-weight: var(--weight-semibold) !important;
  min-height: 56px !important;
  border-radius: var(--border-radius-md) !important;
}

@media (max-width: 767px) {
  .sv-primary-btn {
    font-size: var(--text-lg) !important;
    padding: 1rem 2rem !important;
    min-height: 50px !important;
    width: 100% !important;
  }
}

/* Secondary CTA */
.sv-secondary-btn {
  font-size: var(--text-lg) !important;
  padding: 1.125rem 2rem !important;
  font-weight: var(--weight-medium) !important;
  min-height: 52px !important;
  border-radius: var(--border-radius-md) !important;
}

@media (max-width: 767px) {
  .sv-secondary-btn {
    font-size: var(--text-base) !important;
    padding: 1rem 1.75rem !important;
    min-height: 48px !important;
    width: 100% !important;
  }
}

/* Navbar CTA - Appropriately sized for header */
.sv-cta-button {
  font-size: var(--text-sm) !important;
  padding: 0.625rem 1.5rem !important;
  height: 44px !important;
  font-weight: var(--weight-semibold) !important;
}

/* ===== PRICING CARDS SIZING ===== */

/* Pricing Card Container */
.sv-pricing-card,
.pricing__card {
  padding: var(--space-xl) !important;
  border-radius: var(--border-radius-lg) !important;
}

@media (max-width: 767px) {
  .sv-pricing-card,
  .pricing__card {
    padding: var(--space-lg) !important;
  }
}

/* Pricing Plan Names */
.sv-plan-name,
.pricing__card-title {
  font-size: var(--text-2xl) !important;
  font-weight: var(--weight-bold) !important;
  margin-bottom: var(--space-md) !important;
}

/* Pricing Amounts */
.sv-price-amount,
.pricing__card-amount {
  font-size: var(--text-5xl) !important;
  font-weight: var(--weight-bold) !important;
  line-height: var(--leading-none) !important;
}

@media (max-width: 767px) {
  .sv-price-amount,
  .pricing__card-amount {
    font-size: var(--text-4xl) !important;
  }
}

/* Pricing Features */
.sv-feature-item,
.pricing__feature {
  font-size: var(--text-base) !important;
  line-height: var(--leading-relaxed) !important;
  padding: var(--space-sm) 0 !important;
}

@media (max-width: 767px) {
  .sv-feature-item,
  .pricing__feature {
    font-size: var(--text-sm) !important;
  }
}

/* ===== TRACK RECORD CARDS SIZING ===== */

/* Track Record Cards */
.sv-track-card,
.track-record__card {
  padding: var(--space-xl) !important;
  border-radius: var(--border-radius-lg) !important;
}

@media (max-width: 767px) {
  .sv-track-card,
  .track-record__card {
    padding: var(--space-lg) !important;
  }
}

/* Track Record Stats */
.sv-track-stat {
  font-size: var(--text-3xl) !important;
  font-weight: var(--weight-bold) !important;
}

@media (max-width: 767px) {
  .sv-track-stat {
    font-size: var(--text-2xl) !important;
  }
}

/* ===== FAQ SECTION SIZING ===== */

/* FAQ Questions */
.sv-faq-question,
.faq__question {
  font-size: var(--text-lg) !important;
  font-weight: var(--weight-semibold) !important;
  padding: var(--space-lg) !important;
}

@media (max-width: 767px) {
  .sv-faq-question,
  .faq__question {
    font-size: var(--text-base) !important;
    padding: var(--space-md) !important;
  }
}

/* FAQ Answers */
.sv-faq-answer,
.faq__answer-content {
  font-size: var(--text-base) !important;
  line-height: var(--leading-relaxed) !important;
  padding: 0 var(--space-lg) var(--space-lg) !important;
}

@media (max-width: 767px) {
  .sv-faq-answer,
  .faq__answer-content {
    font-size: var(--text-sm) !important;
    padding: 0 var(--space-md) var(--space-md) !important;
  }
}

/* ===== SECTION HEADERS SIZING ===== */

/* Section Titles */
.sv-section-title,
h2 {
  font-size: var(--text-4xl) !important;
  font-weight: var(--weight-bold) !important;
  line-height: var(--leading-tight) !important;
  margin-bottom: var(--space-xl) !important;
}

@media (max-width: 767px) {
  .sv-section-title,
  h2 {
    font-size: var(--text-3xl) !important;
    margin-bottom: var(--space-lg) !important;
  }
}

/* Section Subtitles */
.sv-section-subtitle {
  font-size: var(--text-lg) !important;
  line-height: var(--leading-relaxed) !important;
  margin-bottom: var(--space-xl) !important;
}

@media (max-width: 767px) {
  .sv-section-subtitle {
    font-size: var(--text-base) !important;
    margin-bottom: var(--space-lg) !important;
  }
}

/* ===== GUARANTEE CARD SIZING ===== */

.sv-guarantee-card {
  padding: var(--space-xl) !important;
  border-radius: var(--border-radius-lg) !important;
}

.sv-guarantee-title {
  font-size: var(--text-2xl) !important;
  font-weight: var(--weight-bold) !important;
  margin-bottom: var(--space-md) !important;
}

.sv-guarantee-text {
  font-size: var(--text-base) !important;
  line-height: var(--leading-relaxed) !important;
}

@media (max-width: 767px) {
  .sv-guarantee-card {
    padding: var(--space-lg) !important;
  }

  .sv-guarantee-title {
    font-size: var(--text-xl) !important;
  }

  .sv-guarantee-text {
    font-size: var(--text-sm) !important;
  }
}

/* ===== VIDEO SECTION SIZING ===== */

.sv-video-container {
  border-radius: var(--border-radius-lg) !important;
}

.sv-video-title {
  font-size: var(--text-lg) !important;
  font-weight: var(--weight-semibold) !important;
}

@media (max-width: 767px) {
  .sv-video-title {
    font-size: var(--text-base) !important;
  }
}

/* ===== GENERAL TEXT SIZING ===== */

/* Body text minimum size enforcement */
body,
p,
.sv-body-text {
  font-size: var(--text-base) !important;
  line-height: var(--leading-normal) !important;
}

@media (max-width: 767px) {
  body,
  p,
  .sv-body-text {
    font-size: var(--text-sm) !important;
  }
}

/* Small text (but never below 14px for readability) */
.sv-small-text,
small {
  font-size: var(--text-sm) !important;
}

@media (max-width: 767px) {
  .sv-small-text,
  small {
    font-size: var(--text-xs) !important;
  }
}

/* ===== SPACING UTILITIES ===== */

/* Section spacing */
.sv-section {
  padding: clamp(3rem, 6vw, 6rem) 0 !important;
}

@media (max-width: 767px) {
  .sv-section {
    padding: var(--space-3xl) 0 !important;
  }
}

/* Container max-width consistency */
.sv-container,
.container {
  max-width: var(--container-width) !important;
  padding-left: var(--container-padding) !important;
  padding-right: var(--container-padding) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== TOUCH TARGET SIZING (Mobile Accessibility) ===== */

@media (max-width: 767px) {
  /* Ensure all interactive elements are min 44px */
  button,
  a.sv-button,
  .sv-cta-button,
  .sv-primary-btn,
  .sv-secondary-btn,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Increase tap target padding */
  .sv-nav-link,
  .sv-mobile-link {
    padding: var(--space-md) var(--space-sm) !important;
  }
}

/* ===== RESPONSIVE GRID GAPS ===== */

.sv-grid,
.sv-cards-grid {
  gap: var(--space-xl) !important;
}

@media (max-width: 767px) {
  .sv-grid,
  .sv-cards-grid {
    gap: var(--space-lg) !important;
  }
}

/* ===== BORDER RADIUS CONSISTENCY ===== */

.sv-card,
.sv-pricing-card,
.sv-track-card,
.sv-guarantee-card {
  border-radius: var(--border-radius-lg) !important;
}

.sv-button,
.sv-cta-button {
  border-radius: var(--border-radius-md) !important;
}

/* ===== FONT WEIGHT ADJUSTMENTS ===== */

/* Headlines should be bold */
h1,
h2,
h3,
.sv-headline,
.sv-section-title {
  font-weight: var(--weight-bold) !important;
}

/* Subheadings medium weight */
h4,
h5,
.sv-subheadline {
  font-weight: var(--weight-medium) !important;
}

/* CTAs semi-bold for emphasis */
.sv-primary-btn,
.sv-cta-button,
button.sv-button {
  font-weight: var(--weight-semibold) !important;
}