/* =====================================================
   Sutton Wealth v2 — Impeccable Design Principles
   =====================================================

   Design decisions explained:
   - Fonts: Playfair Display (headline) + DM Sans (body)
     → Impeccable anti-pattern: "Don't use overused fonts (Inter, system defaults)"
   - Colors: Warm-tinted neutrals, never pure black/gray
     → Impeccable anti-pattern: "Don't use pure black/gray (always tint)"
   - Layout: Full-width, no card wrapper
     → Impeccable anti-pattern: "Don't wrap everything in cards"
   - Easing: cubic-bezier curves only, no ease-in-out defaults
     → Impeccable anti-pattern: "Don't use bounce/elastic easing (feels dated)"
   - Spacing: strict 8px grid (8, 16, 24, 32, 48, 64px)
     → /polish: "Final pass for alignment, spacing, consistency"
   ===================================================== */

/* --- Design tokens --- */
:root {
  /* Brand */
  --red:          #C8102E;
  --red-hover:    #a50d26;
  --red-glow:     rgba(200, 16, 46, 0.12);
  --red-glow-btn: rgba(200, 16, 46, 0.28);

  /* Backgrounds — tinted warm, not cold/pure black */
  --bg:           #0c0a0b;
  --bg-input:     #130e0f;
  --bg-toggle:    #180d0f;

  /* Borders — warm dark red, not neutral gray */
  --border:       #2b1e1f;
  --border-light: #3a2528;

  /* Text — warm white and warm muted, never pure gray */
  --text:         #f0ebe8;
  --text-muted:   #8a7470;
  --text-faint:   #4a3c3e;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

  /* Spacing (8px grid) */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-8: 64px;

  /* Border radius system */
  --r-sm: 6px;
  --r-md: 10px;
  --r-pill: 100px;

  /* Easing — precise cubic-bezier, never ease-in-out defaults */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Reset --- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- Base --- */
html, body {
  height: 100%;
}

body {
  /* /colorize: subtle warm radial gradient — not a flat background */
  background-color: var(--bg);
  /* /colorize: pushed from 7% to 13% — now actually visible as depth */
  background-image: radial-gradient(
    ellipse 100% 55% at 50% -5%,
    rgba(200, 16, 46, 0.13) 0%,
    transparent 100%
  );
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  /* 100dvh accounts for mobile browser toolbars (Safari, Chrome on iOS/Android) */
  /* 100vh as fallback for older browsers that don't support dvh */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-6) var(--sp-3);

  /* Prevent invisible text during font load */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Page container (no card — full-width editorial) --- */
.page {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0; /* spacing handled per-element for /polish precision */
}

/* --- Logo --- */
.logo-wrap {
  margin-bottom: var(--sp-4);
}

.logo {
  height: 44px;
  width: auto;
}

/* --- Divider: thin red rule (/polish — one intentional detail) --- */
.divider {
  width: 40px;
  height: 1px;
  background: var(--red);
  border: none;
  margin-bottom: var(--sp-4);
}

/* --- Headline (/bolder — Playfair Display, large, owning) --- */
.headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 6vw, 3.25rem); /* fluid — no fixed breakpoints needed */
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: var(--sp-3);
  max-width: 440px;
  /* /polish: automatically distributes line lengths — no manual <br> needed */
  text-wrap: balance;
}

/* --- Subheadline --- */
.subheadline {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 380px;
  margin-bottom: var(--sp-5);
  letter-spacing: 0.01em;
  /* /polish: prevents orphaned last words and awkward em-dash line starts */
  text-wrap: pretty;
}

/* --- Form (/polish — 8px grid, consistent spacing) --- */
.form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  text-align: left;
}

/* --- Inputs (/delight — glow on focus, not just border color) --- */
.form input[type="text"],
.form input[type="email"] {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.9375rem;   /* 15px — /polish: not arbitrary rem, intentional scale */
  font-weight: 400;
  line-height: 1.5;
  padding: 14px var(--sp-2); /* 14px top/bottom — /polish: symmetrical */
  outline: none;
  transition:
    border-color 180ms var(--ease-in-out),
    box-shadow 180ms var(--ease-in-out);
}

.form input[type="text"]:focus,
.form input[type="email"]:focus {
  border-color: var(--red);
  /* /delight: box-shadow glow, not just border color change */
  box-shadow: 0 0 0 3px var(--red-glow);
}

.form input::placeholder {
  color: var(--text-faint);
  font-weight: 300;
}

/* --- Role toggle (/animate /delight — sliding pill) --- */
.role-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--bg-toggle);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 4px;
  gap: 0;
  overflow: hidden; /* clip the pill */
}

/* The pill slides behind the buttons — this is the sliding animation */
.toggle-pill {
  position: absolute;
  top: 4px;
  left: 4px;
  /* Width = 50% of the container minus the 4px left padding */
  width: calc(50% - 4px);
  height: calc(100% - 8px); /* full height minus 4px padding top+bottom */
  background: var(--red);
  border-radius: var(--r-sm);
  opacity: 0; /* hidden until first selection */
  /* /animate: cubic-bezier, not default ease */
  transition:
    transform 220ms var(--ease-out-expo),
    opacity 150ms var(--ease-in-out);
  pointer-events: none; /* don't block button clicks */
}

/* JS adds .active to selected button and sets pill translateX */
.toggle-btn {
  position: relative;
  z-index: 1; /* sit above the pill */
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.5;
  padding: 11px var(--sp-2);
  text-align: center;
  transition: color 180ms var(--ease-in-out);
  white-space: nowrap;
}

.toggle-btn.active {
  color: #fff;
  font-weight: 500;
}

.toggle-btn:not(.active):hover {
  color: var(--text);
}

/* --- Error message --- */
.error-msg {
  font-size: 0.8125rem; /* 13px */
  line-height: 1.5;
  color: var(--red);
  text-align: center;
  padding: 0 var(--sp-1);
}

/* --- Submit button (/delight /polish — scale + glow on hover) --- */
.btn-submit {
  width: 100%;
  background: var(--red);
  border: none;
  border-radius: var(--r-md);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 15px var(--sp-3);  /* /polish: 15px gives optical balance with inputs */
  margin-top: var(--sp-1);
  transition:
    background 180ms var(--ease-in-out),
    transform 180ms var(--ease-out-expo),
    box-shadow 180ms var(--ease-in-out);
}

.btn-submit:hover:not(:disabled) {
  background: var(--red-hover);
  /* /delight: lift + glow — makes the button feel alive */
  transform: scale(1.02);
  box-shadow: 0 8px 24px var(--red-glow-btn);
}

.btn-submit:active:not(:disabled) {
  transform: scale(0.99);
}

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

/* --- Thank you state (/animate — slides up into view) --- */
.thank-you {
  width: 100%;
  text-align: center;
  margin-top: var(--sp-5);
  animation: slideUp 500ms var(--ease-out-expo) both;
}

.check-icon {
  width: 40px;
  height: 40px;
  color: var(--red);
  margin-bottom: var(--sp-2);
  stroke-width: 1.5;
}

.ty-heading {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: var(--sp-1);
}

.ty-sub {
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--text-muted);
  line-height: 1.6;
}

/* --- Footer note (/simplify — present but invisible at a glance) --- */
.footer-note {
  font-size: 0.75rem;  /* 12px */
  font-weight: 300;
  color: var(--text-faint);
  letter-spacing: 0.03em;
  margin-top: var(--sp-6);
  text-align: center;
}

/* ===========================================
   /animate — Staggered fade-up on page load
   Elements appear in sequence, not all at once
   =========================================== */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* All animated elements start invisible */
.animate {
  opacity: 0;
  animation: fadeUp 500ms var(--ease-out-expo) both;
}

/* Stagger delays — each 80ms apart, not all at once */
.delay-1 { animation-delay: 60ms; }
.delay-2 { animation-delay: 140ms; }
.delay-3 { animation-delay: 220ms; }
.delay-4 { animation-delay: 300ms; }

/* ===========================================
   Responsive — mobile-first polish
   =========================================== */

@media (max-width: 520px) {
  body {
    /* Top-align on mobile so content isn't vertically clipped on short phones */
    align-items: flex-start;
    /* Explicit padding — 64px top, 20px sides, 48px bottom */
    padding: var(--sp-8) 20px var(--sp-6);
  }

  .logo {
    height: 40px; /* slightly smaller on mobile — logo doesn't need to dominate */
  }

  .logo-wrap {
    margin-bottom: var(--sp-3); /* tighten up on small screens */
  }

  .headline {
    font-size: 2rem; /* still strong, just slightly tighter */
  }

  .subheadline {
    font-size: 0.9375rem;
    margin-bottom: var(--sp-4);
  }

  /* Touch targets: iOS/Android guideline is 44px minimum.
     13px top+bottom + ~21px line-height = ~47px — meets the standard */
  .toggle-btn {
    font-size: 0.875rem;
    padding: 13px var(--sp-2);
  }

  /* Remove grey tap flash on iOS — cleaner feel on mobile */
  .toggle-btn,
  .btn-submit {
    -webkit-tap-highlight-color: transparent;
  }

  /* Ensure the submit button is always easy to tap */
  .btn-submit {
    padding: 16px var(--sp-3);
  }
}

/* Respect reduced motion preferences — never animate against user's will */
@media (prefers-reduced-motion: reduce) {
  .animate,
  .thank-you,
  .toggle-pill,
  .btn-submit,
  .form input {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}