/*
 * Final spacing and alignment audit
 *
 * This file intentionally loads after the component-level styles. It resolves
 * overlapping rhythm rules into one consistent desktop and mobile system.
 */

:root {
  --audit-section-rhythm: clamp(112px, 10vw, 156px);
  --audit-column-gap: clamp(64px, 7.5vw, 116px);
  --audit-card-gap: clamp(12px, 1.35vw, 18px);
}

/* Global section cadence */
.product-demo-section .section-shell,
.metrics-section .section-shell,
.workflow-section-complete .section-shell,
.pricing-section .section-shell,
.launch-section .section-shell {
  padding-block: var(--audit-section-rhythm);
}

.product-intro .section-shell {
  padding-top: clamp(124px, 11vw, 170px);
  padding-bottom: clamp(118px, 10.5vw, 160px);
}

.record-section .section-shell {
  padding-block: clamp(120px, 11vw, 170px);
}

.section-header-split,
.product-demo-heading,
.pricing-header,
.launch-layout,
.metrics-section .section-shell,
.workflow-layout,
.record-layout {
  column-gap: var(--audit-column-gap);
}

.section-intro-copy,
.launch-copy {
  padding-top: clamp(22px, 2.4vw, 34px);
}

.product-demo-shell {
  gap: clamp(52px, 6vw, 84px);
}

/* Metrics: compact vertical cards aligned beside the editorial heading */
.metrics-section .section-shell,
.workflow-layout {
  grid-template-columns: minmax(290px, 0.74fr) minmax(0, 1.26fr);
}

.metrics-heading {
  top: 108px;
}

.metric-rail {
  gap: var(--audit-card-gap);
}

.metric-row {
  min-height: 188px;
  padding: 24px clamp(24px, 2.5vw, 32px);
  border-radius: 18px;
}

.metric-row > div {
  margin-top: 18px;
}

.metric-row h3 {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1;
}

.metric-row p {
  max-width: 38ch;
  margin-top: 8px;
  line-height: 1.55;
}

.metric-row > strong {
  margin-top: auto;
  padding-top: 14px;
}

/* Workflow mirrors the metric-column geometry */
.workflow-intro {
  top: 108px;
}

.workflow-steps {
  row-gap: 8px;
}

.workflow-steps li {
  padding-block: clamp(30px, 3.4vw, 44px);
}

/* The phone and copy should share a clear optical centre */
.record-layout {
  grid-template-columns: minmax(360px, 1.04fr) minmax(320px, 0.96fr);
  align-items: center;
}

.record-phone-shell {
  min-height: clamp(560px, 54vw, 720px);
}

.record-copy .section-lead {
  margin-top: 28px;
}

.record-points {
  margin-top: 32px;
}

/* Pricing stays spacious without reading as three oversized empty panels */
.pricing-shell {
  gap: clamp(52px, 6vw, 80px);
}

.pricing-header {
  column-gap: var(--audit-column-gap);
}

.pricing-ledger {
  gap: clamp(14px, 1.45vw, 20px);
}

.pricing-plan {
  min-height: 552px;
  padding: clamp(28px, 2.6vw, 36px);
}

.pricing-identity {
  min-height: 96px;
}

.pricing-price {
  min-height: 80px;
  margin-top: 26px;
}

.pricing-details {
  margin-top: 22px;
}

.pricing-summary {
  min-height: 66px;
}

.pricing-features {
  margin-top: 22px;
  padding-top: 22px;
}

.pricing-cta {
  margin-top: 28px;
}

/* Closing sections share the same left/right alignment language */
.launch-layout {
  align-items: start;
}

.waitlist-section-complete {
  min-height: min(820px, 86svh);
  padding-block: clamp(108px, 10.5vw, 154px);
}

.waitlist-form {
  margin-top: 38px;
}

.site-footer-complete {
  column-gap: clamp(44px, 6vw, 86px);
  row-gap: 48px;
}

@media (max-width: 1080px) {
  .pricing-plan {
    min-height: 530px;
    padding: 28px;
  }
}

@media (max-width: 980px) {
  :root {
    --audit-section-rhythm: clamp(96px, 12vw, 132px);
  }

  .section-header-split,
  .product-demo-heading,
  .pricing-header,
  .launch-layout,
  .metrics-section .section-shell,
  .workflow-layout,
  .record-layout {
    row-gap: clamp(44px, 6vw, 64px);
  }

  .metrics-section .section-shell,
  .workflow-layout,
  .record-layout {
    grid-template-columns: 1fr;
  }

  .metrics-heading,
  .workflow-intro {
    position: static;
    max-width: 760px;
  }

  .metric-rail {
    grid-column: 1;
  }

  .metric-row {
    min-height: 174px;
  }

  .record-phone-shell {
    min-height: clamp(540px, 80vw, 690px);
  }

  .pricing-plan,
  .pricing-plan.is-featured,
  .pricing-plan.is-featured:hover {
    min-height: 0;
  }
}

@media (max-width: 820px) {
  :root {
    --audit-section-rhythm: 92px;
  }

  .product-intro .section-shell,
  .record-section .section-shell {
    padding-block: 100px;
  }

  .metric-row {
    min-height: 164px;
    padding: 22px 24px;
  }

  .metric-row > div {
    margin-top: 16px;
  }

  .workflow-steps li {
    padding-block: 30px;
  }

  .pricing-shell {
    gap: 46px;
  }
}

@media (max-width: 560px) {
  :root {
    --audit-section-rhythm: 80px;
  }

  .section-header-split,
  .product-demo-heading,
  .pricing-header,
  .launch-layout,
  .metrics-section .section-shell,
  .workflow-layout,
  .record-layout {
    row-gap: 36px;
  }

  .product-intro .section-shell,
  .record-section .section-shell {
    padding-block: 84px;
  }

  .metric-rail {
    gap: 10px;
  }

  .metric-row {
    min-height: 154px;
    padding: 20px;
    border-radius: 16px;
  }

  .metric-row h3 {
    font-size: 29px;
  }

  .metric-row p {
    font-size: 13px;
  }

  .metric-row > strong {
    padding-top: 12px;
  }

  .record-phone-shell {
    min-height: min(620px, 128vw);
  }

  .pricing-plan {
    padding: 26px 22px;
  }

  .waitlist-section-complete {
    min-height: auto;
    padding-block: 88px;
  }

  .site-footer-complete {
    row-gap: 38px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .metric-row,
  .pricing-plan {
    transition: none;
  }
}