/* ============================================================
   Jewekle — shared design system
   ============================================================
   Loaded by every page. Single source of truth for tokens,
   layout primitives, and component classes. Adding a page = new
   HTML file that imports this file and composes existing classes.

   Tokens are defined as CSS custom properties so the same
   stylesheet powers both the marketing site and (eventually)
   investor pages, the waitlist, feature showcases, etc.
   ============================================================ */

/* -- Reset & base ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* -- Design tokens ------------------------------------------ */
:root {
  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Dark theme (default) — matches the app's #0F172A but with a
     subtly deeper, more "Vercel-black" feel for premium contrast */
  --bg:           #0a0f1a;
  --bg-elevated: #0f172a;
  --surface:     rgba(255, 255, 255, 0.03);
  --surface-hi:  rgba(255, 255, 255, 0.05);
  --border:      rgba(255, 255, 255, 0.08);
  --border-hi:   rgba(255, 255, 255, 0.14);
  --text:        #f1f5f9;
  --text-dim:    #94a3b8;
  --text-faint:  #64748b;
  --accent:      #2dd4bf;
  --accent-hi:   #5eead4;
  --accent-soft: rgba(45, 212, 191, 0.10);

  /* Hero gradient — extremely subtle, used as a glow behind h1 */
  --gradient-glow:
    radial-gradient(ellipse 800px 400px at top,
      rgba(45, 212, 191, 0.10), transparent 60%);
}

@media (prefers-color-scheme: light) {
  /* Light-mode mirror. Site stays readable for users who prefer
     light system themes; the tokens flip but layout is identical. */
  :root {
    --bg:           #ffffff;
    --bg-elevated: #f8fafc;
    --surface:     #f8fafc;
    --surface-hi:  #f1f5f9;
    --border:      #e2e8f0;
    --border-hi:   #cbd5e1;
    --text:        #0f172a;
    --text-dim:    #475569;
    --text-faint:  #94a3b8;
    --accent:      #0d9488;
    --accent-hi:   #14b8a6;
    --accent-soft: rgba(13, 148, 136, 0.08);
    --gradient-glow:
      radial-gradient(ellipse 800px 400px at top,
        rgba(13, 148, 136, 0.06), transparent 60%);
  }
}

/* -- Layout primitives -------------------------------------- */
.page {
  background: var(--bg);
  background-image: var(--gradient-glow);
  background-repeat: no-repeat;
  min-height: 100vh;
}
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
}
.container--narrow { max-width: 720px; }
.section { padding: 96px 0; }
.section--lg { padding: 144px 0 96px; }

@media (max-width: 640px) {
  .section { padding: 64px 0; }
  .section--lg { padding: 96px 0 64px; }
}

/* -- Nav ----------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 16px 0;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: color-mix(in srgb, var(--bg) 70%, transparent);
  border-bottom: 1px solid var(--border);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__brand {
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.4px;
  color: var(--text);
}
.nav__brand .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 10px;
  vertical-align: middle;
  transform: translateY(-1px);
  box-shadow: 0 0 12px var(--accent-soft);
}
.nav__links {
  display: flex;
  gap: 4px;
  align-items: center;
}
.nav__link {
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav__link:hover { color: var(--text); background: var(--surface); }
.nav__link--active { color: var(--text); }

@media (max-width: 640px) {
  .nav__links { gap: 0; }
  .nav__link { padding: 8px 8px; font-size: 13px; }
}

/* -- Typography --------------------------------------------- */
.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.h-hero {
  font-size: clamp(40px, 7vw, 72px);
  font-weight: 800;
  letter-spacing: -2px;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 24px;
  max-width: 18ch;
}
.h-hero .h-accent {
  background: linear-gradient(135deg, var(--accent), var(--accent-hi));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.h-hero--narrow { max-width: none; }

.h-section {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 16px;
}
.h-block {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text);
  margin: 48px 0 12px;
}
.h-block--sm {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 28px 0 8px;
}

.lede {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  color: var(--text-dim);
  max-width: 60ch;
  margin-bottom: 40px;
}
.body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
}
.body p, .body ul, .body ol { margin-bottom: 16px; }
.body ul, .body ol { padding-left: 22px; }
.body li { margin-bottom: 6px; }
.body strong { color: var(--text); font-weight: 600; }
.body a {
  color: var(--accent);
  border-bottom: 1px solid var(--border-hi);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.body a:hover { color: var(--accent-hi); border-color: var(--accent); }
.body code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--surface);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border);
}

.meta {
  font-size: 14px;
  color: var(--text-faint);
  font-feature-settings: "tnum" 1;
}

/* -- Card / glass ------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
}
.card--lg { padding: 40px; }
.card--hi {
  background: var(--surface-hi);
  border-color: var(--border-hi);
}

@media (max-width: 640px) {
  .card { padding: 24px; }
  .card--lg { padding: 28px; }
}

/* -- Pillars (3-up trust grid) ------------------------------ */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.pillar { display: flex; flex-direction: column; gap: 8px; }
.pillar__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--accent-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  color: var(--accent);
}
.pillar__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}
.pillar__body {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.55;
}

@media (max-width: 800px) {
  .pillars { grid-template-columns: 1fr; gap: 12px; }
}

/* -- TLDR (plain-English summary block on legal pages) ------ */
.tldr {
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 16px;
  padding: 28px 32px;
  margin: 0 0 48px;
}
.tldr__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.tldr h2 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.3px;
  margin-bottom: 16px;
  color: var(--text);
}
.tldr p { font-size: 15px; color: var(--text-dim); line-height: 1.65; margin-bottom: 12px; }
.tldr p:last-child { margin-bottom: 0; }
.tldr strong { color: var(--text); font-weight: 600; }
.tldr a { color: var(--accent); border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }

@media (max-width: 640px) { .tldr { padding: 22px 24px; } }

/* -- CTA / button ------------------------------------------- */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: 10px;
  background: var(--accent);
  color: #0a0f1a;
  border: 1px solid transparent;
  transition: transform 0.15s ease, background 0.15s ease;
}
.cta:hover { background: var(--accent-hi); transform: translateY(-1px); }
.cta--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-hi);
}
.cta--ghost:hover { background: var(--surface); transform: none; }

/* -- Footer ------------------------------------------------- */
.footer {
  border-top: 1px solid var(--border);
  padding: 48px 0;
  color: var(--text-dim);
}
.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}
.footer__brand { font-weight: 800; color: var(--text); margin-bottom: 8px; }
.footer__brand-line { font-size: 13px; color: var(--text-dim); max-width: 28ch; line-height: 1.55; }
.footer__col-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 16px;
}
.footer__link {
  display: block;
  font-size: 14px;
  color: var(--text-dim);
  padding: 4px 0;
  transition: color 0.15s ease;
}
.footer__link:hover { color: var(--text); }
.footer__base {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-faint);
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

@media (max-width: 800px) {
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__brand-col { grid-column: 1 / -1; }
  .footer__base { flex-direction: column; gap: 8px; }
}

/* -- Legal document layout ---------------------------------- */
.legal { padding: 48px 0 96px; }
.legal__header { margin-bottom: 48px; }
.legal__toc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 48px;
}
.legal__toc-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 12px;
}
.legal__toc ol {
  /* CSS columns flow items top-to-bottom in column 1 first, then
     overflow into column 2 — so the order reads 1,2,3...N down
     the left, N+1...end down the right. Works for any item count
     without hardcoding row totals. */
  column-count: 2;
  column-gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: toc;
}
.legal__toc li {
  counter-increment: toc;
  font-size: 14px;
  /* Reserve a fixed-width gutter so 1-digit and 2-digit numbers
     ("1." vs "10.") line up the trailing text at the same x. */
  padding-left: 28px;
  position: relative;
  font-feature-settings: "tnum" 1;
  /* Keep each item on a single column — never split mid-line. */
  break-inside: avoid;
  margin-bottom: 6px;
}
.legal__toc li::before {
  content: counter(toc) ".";
  color: var(--text-faint);
  position: absolute;
  left: 0;
  width: 22px;
  text-align: right;
}
.legal__toc a {
  color: var(--text-dim);
  transition: color 0.15s ease;
}
.legal__toc a:hover { color: var(--accent); }

@media (max-width: 640px) {
  .legal__toc ol { column-count: 1; }
}

/* -- Steps (numbered list with cards, used on deletion) ---- */
.steps { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; }
.step {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
}
.step__num {
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 10px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step__title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.step__body { font-size: 14px; color: var(--text-dim); line-height: 1.55; }

/* -- Stat row (used on security page) ---------------------- */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.stat__num {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.4px;
  margin-bottom: 4px;
  font-feature-settings: "tnum" 1;
}
.stat__label { font-size: 13px; color: var(--text-dim); }
@media (max-width: 800px) { .stats { grid-template-columns: 1fr 1fr; } }

/* -- Utilities --------------------------------------------- */
.text-dim { color: var(--text-dim); }
.text-accent { color: var(--accent); }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: 32px; }
.mt-6 { margin-top: 48px; }
.no-underline { border-bottom: 0; }