/* ──────────────────────────────────────────────────────────────────────────
   Core Close — marketing site styles
   ──────────────────────────────────────────────────────────────────────────
   Self-contained stylesheet for the public marketing pages (/, /features,
   /pricing, /about, /privacy, /terms). Deliberately decoupled from the app's
   style.css: marketing pages load ONLY this file plus the self-hosted Lucide
   script, so they stay lean (good for Lighthouse) and the app's dense UI rules
   never leak onto the marketing surface.

   The palette, fonts, radii and spacing are copied from style.css so the two
   surfaces share one brand. Accent is indigo-600 (#4f46e5), matching the app.
   Everything is self-hosted — no CDNs — to satisfy the strict CSP
   (default-src 'self').
   ────────────────────────────────────────────────────────────────────────── */

/* ── Self-hosted webfonts (mirrors style.css) ───────────────────────────── */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/jetbrains-mono-500.woff2') format('woff2'); }

/* ── Tokens (subset of style.css :root, plus marketing-only additions) ───── */
:root {
  /* Accent (indigo) */
  --accent:        #4f46e5;
  --accent-hover:  #4338ca;
  --accent-soft:   #eef2ff;
  --accent-text:   #3730a3;

  /* Surfaces */
  --bg:            #ffffff;
  --bg-soft:       #fafafa;
  --surface:       #ffffff;
  --surface-alt:   #f4f4f5;

  /* Borders */
  --border:        #e4e4e7;
  --border-strong: #d4d4d8;

  /* Text */
  --text:          #18181b;
  --text-body:     #3f3f46;
  --text-muted:    #71717a;
  --text-subtle:   #a1a1aa;

  /* Status (used sparingly on marketing) */
  --success:       #16a34a;
  --success-bg:    #dcfce7;
  --success-text:  #166534;
  --warn-bg:       #fef3c7;
  --warn-text:     #92400e;

  /* Dark footer (mirrors the app sidebar's near-black) */
  --footer-bg:     #18181b;
  --footer-text:   #d4d4d8;
  --footer-muted:  #a1a1aa;
  --footer-divider: rgba(255, 255, 255, 0.10);

  /* Radius */
  --radius-sm:   6px;
  --radius:      8px;
  --radius-lg:   12px;
  --radius-xl:   16px;

  /* Marketing layout */
  --header-h:      64px;
  --container-w:   1120px;
  --container-pad: 24px;

  /* Shadows — soft, Stripe/Linear-style */
  --shadow-sm:  0 1px 2px rgba(24, 24, 27, 0.04), 0 1px 3px rgba(24, 24, 27, 0.06);
  --shadow:     0 4px 12px rgba(24, 24, 27, 0.06), 0 2px 4px rgba(24, 24, 27, 0.04);
  --shadow-lg:  0 12px 32px rgba(24, 24, 27, 0.10), 0 4px 8px rgba(24, 24, 27, 0.05);
}

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

html { scroll-behavior: smooth; }

/* Anchor targets clear the sticky header when jumped to via #hash. */
[id] { scroll-margin-top: 84px; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--text-body);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 { color: var(--text); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }

/* Lucide icons render as inline SVGs; give them a sane default size. */
[data-lucide] { width: 22px; height: 22px; stroke-width: 2; }

/* ── Layout helpers ─────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-w);
  margin: 0 auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.section { padding: 80px 0; }
.section--tight { padding: 56px 0; }
.section--soft { background: var(--bg-soft); }

.section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.section-head h2 { font-size: 36px; margin-bottom: 16px; }
.section-head p { font-size: 18px; color: var(--text-muted); }

.eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  border-radius: var(--radius);
  border: 1px solid transparent;
  padding: 12px 20px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .05s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn [data-lucide] { width: 18px; height: 18px; }

.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-hover); color: #fff; }

.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-alt); color: var(--text); }

.btn-ghost { background: transparent; color: var(--text-body); }
.btn-ghost:hover { background: var(--surface-alt); color: var(--text); }

.btn-lg { font-size: 16px; padding: 15px 28px; border-radius: var(--radius); }

/* On a coloured/dark band, an inverted primary reads better. */
.btn-invert { background: #fff; color: var(--accent); }
.btn-invert:hover { background: #f4f4f5; color: var(--accent-hover); }

/* ── Header / top nav ───────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--text); }
.brand:hover { color: var(--text); }
.brand__name { font-weight: 700; font-size: 18px; letter-spacing: -0.02em; }

/* Larger logo in the top nav (header only; footer keeps its smaller mark). */
.site-header__inner .brand svg { width: 38px; height: 38px; }
.site-header__inner .brand .brand__name { font-size: 22px; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  color: var(--text-body);
  font-weight: 500;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.nav__link:hover { color: var(--text); background: var(--surface-alt); }

.header-actions { display: flex; align-items: center; gap: 8px; }

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px;
  cursor: pointer;
  color: var(--text);
}

/* Mobile menu panel (toggled by marketing.js). */
.mobile-nav {
  display: none;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.mobile-nav.open { display: block; }
.mobile-nav__inner { padding: 12px 0 20px; display: flex; flex-direction: column; gap: 4px; }
.mobile-nav__link { padding: 12px 8px; font-weight: 500; color: var(--text-body); border-radius: var(--radius-sm); }
.mobile-nav__link:hover { background: var(--surface-alt); color: var(--text); }
.mobile-nav__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.mobile-nav__actions .btn { width: 100%; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.hero { padding: 96px 0 72px; text-align: center; position: relative; overflow: hidden; }
.hero__inner { max-width: 800px; margin: 0 auto; position: relative; z-index: 1; }
.hero h1 { font-size: 56px; line-height: 1.05; margin-bottom: 20px; }
.hero__sub { font-size: 20px; color: var(--text-muted); max-width: 640px; margin: 0 auto 32px; }
.hero__cta { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.hero__note { margin-top: 16px; font-size: 14px; color: var(--text-subtle); }

/* Soft indigo glow behind the hero. */
.hero__glow {
  position: absolute;
  top: -120px; left: 50%;
  width: 720px; height: 420px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(79, 70, 229, 0.12), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ── Card grids ─────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.card--hover { transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.card--hover:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--border-strong); }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  margin-bottom: 16px;
}
.card__icon [data-lucide] { width: 22px; height: 22px; }
.card h3 { font-size: 19px; margin-bottom: 8px; }
.card p { color: var(--text-muted); font-size: 15px; }
.card__link { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-weight: 600; font-size: 14px; }
.card__link [data-lucide] { width: 16px; height: 16px; }

/* ── CTA band ───────────────────────────────────────────────────────────── */
.cta-band { background: var(--accent); color: #fff; border-radius: var(--radius-xl); padding: 56px 40px; text-align: center; }
.cta-band h2 { color: #fff; font-size: 34px; margin-bottom: 12px; }
.cta-band p { color: rgba(255, 255, 255, 0.85); font-size: 18px; margin-bottom: 28px; }

/* ── Narrative / About story column ─────────────────────────────────────── */
.narrative { max-width: 720px; margin: 0 auto; }
.narrative h2 { font-size: 30px; margin-bottom: 16px; }
.narrative p { font-size: 17px; color: var(--text-body); margin-bottom: 16px; }
.narrative p:last-child { margin-bottom: 0; }

.contact-list { list-style: none; display: grid; gap: 14px; max-width: 440px; margin: 28px auto 0; }
.contact-list li { display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--text-body); font-size: 15px; }
.contact-list li [data-lucide] { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }

/* ── Pricing plan card (Pricing page) ───────────────────────────────────── */
.plan { max-width: 460px; margin: 0 auto; text-align: center; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-xl); padding: 40px 36px; box-shadow: var(--shadow-lg); }
.plan .price-figure { font-size: 56px; }
.plan-includes { list-style: none; text-align: left; display: grid; gap: 12px; margin: 26px 0 28px; }
.plan-includes li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-body); font-size: 15px; }
.plan-includes li [data-lucide] { width: 18px; height: 18px; color: var(--success); flex-shrink: 0; margin-top: 3px; }
.plan .btn { width: 100%; }
.plan-note { margin-top: 12px; font-size: 13px; color: var(--text-subtle); }

.overage { max-width: 620px; margin: 0 auto; text-align: center; }
.overage h2 { font-size: 26px; margin-bottom: 10px; }
.overage p { color: var(--text-muted); }
.overage .example { margin-top: 18px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; }

/* ── FAQ (native details/summary, no JS) ────────────────────────────────── */
.faq { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 0 18px; }
.faq summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0; font-weight: 600; font-size: 15px; color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary [data-lucide] { width: 18px; height: 18px; color: var(--text-muted); flex-shrink: 0; transition: transform .15s ease; }
.faq details[open] summary [data-lucide] { transform: rotate(180deg); }
.faq__answer { padding: 0 0 16px; color: var(--text-body); font-size: 15px; }
.faq__answer p { margin-bottom: 10px; }
.faq__answer p:last-child { margin-bottom: 0; }

/* ── Cross-cutting capabilities strip ───────────────────────────────────── */
.subhead { max-width: 680px; margin: 64px auto 32px; text-align: center; }
.subhead h2 { font-size: 28px; margin-bottom: 12px; }
.subhead p { color: var(--text-muted); font-size: 17px; }

.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.cap h3 { font-size: 17px; margin: 14px 0 6px; }
.cap p { color: var(--text-muted); font-size: 15px; }

/* ── Feature rows (Features page) ───────────────────────────────────────── */
.feature { padding: 72px 0; border-top: 1px solid var(--border); scroll-margin-top: 80px; }
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.feature-row--reverse .feature-text { order: 2; }
.feature-row--reverse .feature-media { order: 1; }

.feature h2 { font-size: 30px; margin: 16px 0 12px; }
.feature-lead { font-size: 17px; color: var(--text-muted); margin-bottom: 20px; }

.feature-list { list-style: none; display: grid; gap: 11px; margin-bottom: 26px; }
.feature-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-body); font-size: 15px; }
.feature-list li [data-lucide] { width: 18px; height: 18px; color: var(--success); flex-shrink: 0; margin-top: 3px; }

/* Product mock — a styled UI snapshot with dummy data, framed like an app
   window. Stands in for real screenshots until clean captures are available. */
.feature-media { display: flex; align-items: center; justify-content: center; padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(160deg, #f4f4f5 0%, #eef2ff 100%); }

.mock { width: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); overflow: hidden; }
.mock__bar { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.mock__mark { width: 18px; height: 18px; flex-shrink: 0; }
.mock__title { font-weight: 600; font-size: 13px; color: var(--text); }
.mock__period { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--text-muted); background: var(--surface-alt); padding: 3px 9px; border-radius: 999px; }
.mock__body { padding: 13px 16px 16px; }

.mock-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.mock-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-subtle); font-weight: 600; padding: 0 14px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.mock-table td { padding: 8px 14px; border-bottom: 1px solid var(--border-subtle); color: var(--text-body); }
.mock-table th:first-child, .mock-table td:first-child { padding-left: 0; }
.mock-table th:last-child, .mock-table td:last-child { padding-right: 0; }
.mock-table tbody tr:last-child td { border-bottom: 0; }
.mock-table .num { text-align: right; font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mock-table .neg { color: var(--text-muted); }

/* Tighter variant for the wider intercompany table (5 columns). */
.mock-table--tight { font-size: 11.5px; }
.mock-table--tight th { padding: 0 9px 8px; }
.mock-table--tight td { padding: 7px 9px; }
.mock-table--tight th:first-child, .mock-table--tight td:first-child { padding-left: 0; }
.mock-table--tight th:last-child, .mock-table--tight td:last-child { padding-right: 0; }

.mock-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px; line-height: 1.5; }
.mock-badge--ok { background: var(--success-bg); color: var(--success-text); }
.mock-badge--warn { background: var(--warn-bg); color: var(--warn-text); }

.mock-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--text); }
.mock-foot .ok { display: inline-flex; align-items: center; gap: 5px; color: var(--success); }
.mock-foot .ok [data-lucide] { width: 15px; height: 15px; }
.mock-foot .num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

.mock-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mock-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--text-body); border: 1px solid var(--border); border-radius: 999px; padding: 3px 9px; }
.mock-chip [data-lucide] { width: 12px; height: 12px; color: var(--success); }

/* ── Pricing teaser / figure (reused on /pricing) ───────────────────────── */
.price-teaser { max-width: 540px; margin: 0 auto; text-align: center; }
.price-figure { font-size: 48px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; margin-top: 6px; }
.price-figure .per { display: block; font-size: 15px; font-weight: 500; color: var(--text-muted); letter-spacing: normal; margin-top: 8px; }
.price-teaser .price-note { color: var(--text-muted); margin: 14px 0 24px; }

/* Module card whose "Learn more" link should sit at the bottom edge. */
.card--module { display: flex; flex-direction: column; }
.card--module .card__link { margin-top: auto; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { background: var(--footer-bg); color: var(--footer-text); padding: 56px 0 32px; }
.site-footer a { color: var(--footer-text); }
.site-footer a:hover { color: #fff; }

.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--footer-divider); }
.footer-brand .brand__name { color: #fff; }
.footer-brand p { color: var(--footer-muted); font-size: 14px; margin-top: 12px; max-width: 280px; }

.footer-col h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 14px; font-weight: 600; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 14px; color: var(--footer-muted); }
.footer-col a:hover { color: #fff; }

.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; flex-wrap: wrap; }
.footer-bottom p { color: var(--footer-muted); font-size: 13px; }
.footer-bottom a { color: var(--footer-muted); font-size: 13px; }

/* ── Long-form / legal pages (privacy, terms) ───────────────────────────── */
.prose { max-width: 760px; margin: 0 auto; }
.prose h1 { font-size: 40px; margin-bottom: 12px; }
.prose .updated { color: var(--text-subtle); font-size: 14px; margin-bottom: 40px; }
.prose h2 { font-size: 24px; margin: 40px 0 12px; }
.prose h3 { font-size: 18px; margin: 28px 0 8px; }
.prose p { margin-bottom: 16px; color: var(--text-body); }
.prose ul, .prose ol { margin: 0 0 16px 22px; }
.prose li { margin-bottom: 8px; color: var(--text-body); }
.prose a { text-decoration: underline; }

.callout {
  background: var(--accent-soft);
  border: 1px solid #c7d2fe;
  border-radius: var(--radius);
  padding: 16px 18px;
  font-size: 14px;
  color: var(--accent-text);
  margin: 24px 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .grid--3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .cap-grid { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 860px) {
  .feature { padding: 48px 0; }
  .feature-row { grid-template-columns: 1fr; gap: 28px; }
  .feature-row--reverse .feature-text,
  .feature-row--reverse .feature-media { order: 0; }
  .feature h2 { font-size: 26px; }
}

@media (max-width: 720px) {
  .nav, .header-actions { display: none; }
  .nav-toggle { display: inline-flex; }
  .section { padding: 56px 0; }
  .hero { padding: 64px 0 48px; }
  .hero h1 { font-size: 38px; }
  .hero__sub { font-size: 18px; }
  .section-head h2 { font-size: 28px; }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .cta-band { padding: 40px 24px; }
  .cta-band h2 { font-size: 26px; }
  .footer-top { grid-template-columns: 1fr; }
}