@import url("https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@500,700,800&f[]=satoshi@400,500,700&display=swap");

:root,
[data-theme="light"] {
  --font-display: "Cabinet Grotesk", "Inter", sans-serif;
  --font-body: "Satoshi", "Inter", sans-serif;
  --color-bg: #eef4ff;
  --color-surface: #ffffff;
  --color-surface-2: #f7fbff;
  --color-surface-offset: #edf4ff;
  --color-border: #c7d5ea;
  --color-text: #0c1728;
  --color-text-muted: #51627a;
  --color-text-faint: #8b9ab0;
  --color-primary: #1457ff;
  --color-primary-hover: #0f3fc0;
  --color-primary-active: #0c2d86;
  --color-primary-highlight: #dce8ff;
  --color-accent: #00a884;
  --color-accent-strong: #057a63;
  --color-gold: #f5a524;
  --color-gold-highlight: #fff0d1;
  --shadow-soft: 0 18px 50px rgba(21, 65, 145, 0.16);
  --shadow-lift: 0 28px 80px rgba(20, 87, 255, 0.22);
}

[data-theme="dark"] {
  --color-bg: #07101f;
  --color-surface: #0d1829;
  --color-surface-2: #111f33;
  --color-surface-offset: #12233a;
  --color-border: #253957;
  --color-text: #edf5ff;
  --color-text-muted: #a5b5cd;
  --color-text-faint: #65758e;
  --color-primary: #7ca6ff;
  --color-primary-hover: #a8c2ff;
  --color-primary-active: #d1deff;
  --color-primary-highlight: #172b4b;
  --color-accent: #35d5b2;
  --color-gold: #f5c36a;
  --color-gold-highlight: #45351b;
}

body {
  background:
    radial-gradient(circle at 12% -6%, rgba(20, 87, 255, 0.18), transparent 32rem),
    radial-gradient(circle at 86% 4%, rgba(0, 168, 132, 0.15), transparent 30rem),
    linear-gradient(180deg, #f6f9ff 0%, var(--color-bg) 42%, #f4f8ff 100%);
}

[data-theme="dark"] body {
  background:
    radial-gradient(circle at 10% -4%, rgba(124, 166, 255, 0.18), transparent 34rem),
    radial-gradient(circle at 86% 0%, rgba(53, 213, 178, 0.12), transparent 30rem),
    #07101f;
}

.brand {
  padding: var(--space-3) var(--space-4);
  border: 1px solid rgba(20, 87, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.64);
  backdrop-filter: blur(18px);
  box-shadow: 0 14px 34px rgba(15, 38, 85, 0.08);
}

.brand h1,
.intro-title,
.document-callout strong,
.pricing-card-price,
.erisa-help-card h2,
.input-card h2 {
  font-family: var(--font-display);
}

.brand-tagline {
  letter-spacing: 0.02em;
}

.app-shell {
  max-width: 1480px;
}

.intro-panel {
  border: 1px solid rgba(20, 87, 255, 0.14);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(245, 249, 255, 0.88)),
    radial-gradient(circle at 80% 18%, rgba(20, 87, 255, 0.14), transparent 24rem);
  box-shadow: var(--shadow-soft);
}

.intro-panel::before {
  opacity: 0.18;
}

.eyebrow,
.step-kicker,
.included-package-kicker,
.pricing-card-kicker {
  color: var(--color-primary);
  letter-spacing: 0.12em;
}

.intro-title {
  color: #071832;
  letter-spacing: -0.055em;
}

[data-theme="dark"] .intro-title {
  color: #f8fbff;
}

.document-callout {
  border-color: rgba(20, 87, 255, 0.22);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(236, 244, 255, 0.92)),
    radial-gradient(circle at 100% 100%, rgba(20, 87, 255, 0.2), transparent 8rem);
  box-shadow: 0 18px 44px rgba(20, 87, 255, 0.16);
}

.document-callout-secondary {
  border-color: rgba(0, 168, 132, 0.26);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(235, 255, 250, 0.9)),
    radial-gradient(circle at 100% 100%, rgba(0, 168, 132, 0.18), transparent 8rem);
}

.document-callout-label,
.hero-actions b,
.step-number {
  background: #1457ff;
  color: #ffffff;
}

.document-callout-secondary .document-callout-label {
  background: #00a884;
  color: #ffffff;
}

.pricing-card {
  border: 1px solid rgba(20, 87, 255, 0.2);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(238, 246, 255, 0.94)),
    radial-gradient(circle at 90% 0%, rgba(0, 168, 132, 0.16), transparent 16rem);
  box-shadow: var(--shadow-lift);
}

.pricing-card-price {
  color: #071832;
  text-shadow: 0 8px 30px rgba(20, 87, 255, 0.18);
}

.pricing-card-button,
.primary-button,
.compact-review-button,
.status-review-link {
  background: #1457ff;
  border-color: #1457ff;
  color: #ffffff;
  box-shadow: 0 14px 32px rgba(20, 87, 255, 0.24);
}

.pricing-card-button:hover,
.primary-button:hover,
.compact-review-button:hover,
.status-review-link:hover {
  background: #0f3fc0;
  border-color: #0f3fc0;
  transform: translateY(-1px);
}

.generator-grid {
  gap: clamp(var(--space-5), 3vw, var(--space-10));
}

.input-card,
.preview-card,
.erisa-help-card,
.attorney-review-card,
.binder-request-card {
  border: 1px solid rgba(20, 87, 255, 0.14);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 20px 55px rgba(10, 35, 80, 0.12);
  backdrop-filter: blur(14px);
}

.input-card {
  border-top: 5px solid #1457ff;
}

.step-pill {
  border-color: rgba(20, 87, 255, 0.2);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 26px rgba(20, 87, 255, 0.08);
}

.step-pill.is-active {
  background: #0c1728;
  border-color: #0c1728;
  color: #ffffff;
}

input,
textarea,
select {
  border-color: rgba(20, 87, 255, 0.18);
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

input:focus,
textarea:focus,
select:focus {
  border-color: #1457ff;
  box-shadow: 0 0 0 4px rgba(20, 87, 255, 0.14);
}

.document-preview {
  border-color: rgba(20, 87, 255, 0.16);
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(20, 87, 255, 0.04);
}

.disclaimer-modal {
  border: 1px solid rgba(20, 87, 255, 0.18);
  box-shadow: 0 40px 120px rgba(7, 16, 31, 0.3);
}

.seo-content-section {
  margin-top: clamp(var(--space-10), 8vw, var(--space-16));
}

.seo-content-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(20, 87, 255, 0.14);
  border-radius: var(--radius-2xl);
  background:
    radial-gradient(circle at 10% 0%, rgba(20, 87, 255, 0.12), transparent 30%),
    radial-gradient(circle at 90% 10%, rgba(39, 190, 173, 0.14), transparent 34%),
    rgba(255, 255, 255, 0.88);
  box-shadow: 0 24px 70px rgba(10, 35, 80, 0.12);
  padding: clamp(var(--space-6), 5vw, var(--space-10));
}

.seo-content-card > p {
  max-width: 74ch;
}

.seo-content-card h2 {
  margin: var(--space-2) 0 var(--space-4);
  max-width: 780px;
  color: #07101f;
  font-size: clamp(2rem, 5vw, 4.25rem);
  line-height: 0.96;
  letter-spacing: -0.07em;
}

.seo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.seo-grid article,
.seo-faq details {
  border: 1px solid rgba(20, 87, 255, 0.12);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 14px 34px rgba(10, 35, 80, 0.08);
}

.seo-grid article {
  padding: var(--space-5);
}

.seo-grid h3 {
  margin: 0 0 var(--space-3);
  color: #07101f;
  font-size: 1rem;
  letter-spacing: -0.03em;
}

.seo-grid p,
.seo-faq p {
  margin: 0;
  color: #4a5872;
  font-size: 0.95rem;
  line-height: 1.7;
}

.seo-faq {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.seo-faq details {
  padding: var(--space-4) var(--space-5);
}

.seo-faq summary {
  cursor: pointer;
  color: #07101f;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.seo-faq summary::marker {
  color: #1457ff;
}

.seo-faq details[open] summary {
  margin-bottom: var(--space-3);
}

@media (max-width: 760px) {
  .brand {
    border-radius: var(--radius-xl);
  }

  .intro-panel {
    border-radius: var(--radius-xl);
  }

  .seo-grid {
    grid-template-columns: 1fr;
  }

  .seo-content-card h2 {
    font-size: clamp(2rem, 12vw, 3.25rem);
  }
}