@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

/* LeLoop brand colors, sampled from the logo (docs/brand/le-loop-logo.webp):
   ink is the wordmark's letters, the purples its infinity mark, paper-dim
   its lavender background. --accent is a little deeper than the mark so
   white button text stays readable (5.5:1). */
:root {
  --ink: #311E67;
  --ink-soft: #5D5677;
  --paper: #FFFFFF;
  --paper-dim: #F5F1FD;
  --accent: #7C4FC4;
  --accent-dark: #5F38A6;
  --accent-soft: #F0E9FC;
  --accent-light: #C29BF8;
  --tagline: #6E4FB0;
  --success: #1F9D6C;
  --success-soft: #E4F5EC;
  --rule: #E8E2F4;
  --charcoal: #1F1247;
  --charcoal-soft: #2A1C5A;
  --red-flag: #C4432F;

  --brass: var(--accent);
  --brass-dark: var(--accent-dark);
  --ledger-green: var(--success);
  --ledger-green-soft: var(--success-soft);

  --font-display: 'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.95rem + 0.2vw, 1.05rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.35rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.8vw, 1.8rem);
  --step-3: clamp(2rem, 1.6rem + 1.6vw, 2.75rem);
  --step-4: clamp(2.6rem, 1.9rem + 2.8vw, 4.2rem);

  --radius-sm: 6px;
  --radius-md: 12px;
  --shadow-card: 0 1px 2px rgba(49, 30, 103, 0.04), 0 8px 24px rgba(49, 30, 103, 0.07);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--font-display); color: var(--ink); line-height: 1.12;
  margin: 0 0 0.5em; font-weight: 700; letter-spacing: -0.01em;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
p { margin: 0 0 1em; max-width: 62ch; }
a { color: inherit; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.rule { border: none; border-top: 1px solid var(--rule); margin: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--radius-sm); font-weight: 600;
  font-size: var(--step--1); text-decoration: none; border: 1px solid transparent;
  cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 4px 14px rgba(124,79,196,0.28); }
.btn-primary:hover { background: var(--accent-dark); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--ink); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--charcoal); }

.tally { display: inline-flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.tally .num { font-family: var(--font-display); font-size: 1.4em; font-weight: 700; }
.tally .label { font-size: var(--step--1); color: var(--ink-soft); }

/* The LeLoop wordmark: "LeL", the infinity mark as the "oo", then "p".
   Letters are live text in Sora, so they follow the color they sit on; the
   mark is assets/le-loop-mark.svg. Markup:
   <a class="wordmark" aria-label="LeLoop">LeL<img class="oo" src=".../le-loop-mark.svg" alt="">p</a> */
.wordmark { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; text-decoration: none; color: var(--ink); }
/* Proportions measured on the logo: the mark is 0.92 of the cap height,
   dips just below the baseline and almost touches the L. */
.wordmark .oo { display: inline-block; width: 1.48em; height: 0.68em; vertical-align: -0.035em; margin: 0 0.02em 0 -0.05em; }
.tagline { font-family: var(--font-display); font-weight: 500; letter-spacing: 0.04em; color: var(--tagline); }

/* Live site vs local demo (assets/site-mode.js marks <html class="beta-site">). */
.beta-site [data-demo] { display: none !important; }
.beta-only { display: none; }
.beta-site .beta-only { display: block; }

.text-soft { color: var(--ink-soft); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}