/*
 * luv77 spacing system
 *
 * Every surface uses the same small rhythm. Page-specific styles can still
 * create character, but layout decisions should land on this scale instead
 * of accumulating one-off gaps and margins.
 */

:root {
  --luv-space-1: 4px;
  --luv-space-2: 8px;
  --luv-space-3: 12px;
  --luv-space-4: 16px;
  --luv-space-5: 24px;
  --luv-space-6: 32px;
  --luv-space-7: 40px;
  --luv-space-8: 48px;
  --luv-space-9: 64px;
  --luv-space-10: 80px;
  --luv-page-gutter: clamp(16px, 4vw, 56px);
  --luv-section-space: clamp(72px, 10vw, 128px);
  --luv-card-gap: clamp(12px, 1.8vw, 20px);
  --luv-control-gap: var(--luv-space-3);
  --luv-workspace-gutter: clamp(18px, 3vw, 44px);
  --luv-dashboard-rail-width: 258px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ---------- shared page rhythm ---------- */

body {
  min-width: 320px;
}

button,
a,
input,
select,
textarea {
  min-width: 0;
}

/* ---------- landing ---------- */

.section-wrap {
  width: min(
    calc(100% - var(--luv-page-gutter) - var(--luv-page-gutter)),
    1240px
  );
}

.site-header {
  padding-inline: var(--luv-page-gutter);
}

.header-actions {
  gap: var(--luv-space-4);
}

.hero {
  gap: clamp(var(--luv-space-6), 5vw, var(--luv-space-9));
  padding-block: clamp(var(--luv-space-8), 5.5vw, var(--luv-space-9));
}

.hero-lede {
  width: 100%;
  margin-top: var(--luv-space-5);
}

.hero h1 {
  overflow-wrap: break-word;
  text-wrap: balance;
}

.hero-actions {
  gap: var(--luv-space-5);
  margin-top: var(--luv-space-6);
}

.hero-trust {
  gap: var(--luv-space-3) var(--luv-space-5);
  margin-top: var(--luv-space-7);
}

.clarity-bar {
  gap: var(--luv-space-6);
  margin-top: var(--luv-space-4);
  padding: var(--luv-space-5) var(--luv-space-6);
}

.steps-section {
  padding-block: var(--luv-section-space);
}

.steps-grid,
.prepare-grid {
  gap: var(--luv-card-gap);
  margin-top: var(--luv-space-7);
}

.prepare-inner,
.why-section {
  padding-block: var(--luv-section-space);
}

.why-section {
  gap: clamp(var(--luv-space-9), 9vw, 140px);
}

.final-cta {
  padding-bottom: var(--luv-section-space);
}

.site-footer {
  gap: var(--luv-space-4);
  padding-block: var(--luv-space-5);
}

/* ---------- responsive rhythm ---------- */

@media (max-width: 780px) {
  .section-wrap {
    width: min(
      calc(100% - var(--luv-page-gutter) - var(--luv-page-gutter)),
      600px
    );
  }

  .hero {
    padding-block: var(--luv-space-8) var(--luv-space-7);
  }

  .hero-actions {
    gap: var(--luv-space-4);
  }

  .hero-trust {
    margin-top: var(--luv-space-6);
  }

  .clarity-bar {
    padding: var(--luv-space-5);
  }

  .steps-section,
  .prepare-inner,
  .why-section {
    padding-block: var(--luv-space-9);
  }

  .steps-grid,
  .prepare-grid {
    margin-top: var(--luv-space-6);
  }

  .why-section {
    gap: var(--luv-space-9);
  }
}

@media (max-width: 480px) {
  .hero-visual {
    margin-inline: 0;
  }

  .hero-actions {
    gap: var(--luv-space-3);
  }
}

@media (max-width: 980px) {
  :root {
    --luv-dashboard-rail-width: 226px;
  }
}