/* Zyntropio Clair — marketing site + user guide.
 *
 * PORTED FROM _visual_design/soloprenuer/ZyntropioClair_MarketingSite.html, not
 * referenced from it. The design file pulls two things this cannot ship:
 * lucide from a CDN, and the design-system bundle by absolute path. The lucide
 * rule was settled for Wedding (ARCHITECTURE §9 item 89) and repeated for Clair
 * (item 118) — a third-party script tag earns its place or it does not go in,
 * and on a page with no dynamic content it does not. So the handful of glyphs
 * the page uses are inline SVG, and the design system's tokens are copied here.
 *
 * THE TOKENS ARE A HAND-MIRROR, like every other palette pair in this repo
 * (CLAUDE.md: app + marketing site share one palette, "not enforced, mirror by
 * hand"). The clair block below is verbatim from the app's own clair.css; the
 * base block is the subset of mindmap/src/index.css this page actually reads.
 * If one moves, move the other.
 */

:root {
  --color-ink: #26272b;
  --color-sub: #5B6470;
  --color-muted: #8a8b93;
  --color-line: #eee0e8;
  /* The chrome family. --color-chrome-sub was already mirrored here; the other
     three and --shadow-clay-button arrived with the guide's sidebar, which is
     the app's own sidebar in document form — same hairline, same hover fill,
     same gradient on the active item. All four are mindmap/src/index.css's, the
     file products/solopreneur/web/clair.css reads them from. */
  --color-chrome-line: #ece9e2;
  --color-chrome-sub: #6b6d76;
  --color-chrome-item: #f5f3ee;
  --color-chrome-hint: #a29e91;
  --shadow-clay-button: 0 8px 16px -6px color-mix(in srgb, var(--color-clay) 47%, transparent);
  --color-status-not-started: #94A3B8;
  --color-status-done: #22C55E;
  --color-status-escalated: #EF4444;
  --color-status-blocked: #F97316;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --shadow-glass-card: 0 12px 26px -12px rgba(30, 20, 40, .18);
  --shadow-glass-raise: 0 20px 40px -14px rgba(20, 20, 30, .28);
}

:root[data-theme="clair"], [data-theme="clair"] {
  --color-clay: #3F6FD8;
  --color-clay-lite: #5B8DEF;
  --color-clay-bg: #E8EEFB;
  --color-grad-a: #5B8DEF;
  --color-grad-b: #3F6FD8;
  --color-grad: linear-gradient(135deg, #5B8DEF, #3F6FD8);
  --color-bg: #F5F7FB;
  --color-panel: #FFFFFF;
  --color-soft: #EEF2F9;
  --color-aurora-1: rgba(63, 111, 216, .30);
  --color-aurora-2: rgba(126, 200, 227, .34);
  --color-aurora-3: rgba(255, 180, 101, .28);
}

html { scroll-behavior: smooth; }
html, body { margin: 0; background: #F5F7FB; }
a { color: #3F6FD8; text-decoration: none; }
a:hover { color: #2F5BB8; }
button { font-family: inherit; }

.cl { font-family: var(--font-body); color: var(--color-ink); position: relative; overflow: hidden; }
.cl-wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; position: relative; z-index: 1; }
.cl-eyebrow { font: 800 10.5px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: #3F6FD8; }
.cl-h2 { font: 700 clamp(26px, 3.4vw, 38px)/1.15 var(--font-display); letter-spacing: -.015em; margin: 14px 0 0; text-wrap: pretty; }
.cl-lede { font: 400 16px/1.6 var(--font-body); color: var(--color-sub); margin: 16px 0 0; max-width: 620px; text-wrap: pretty; }
.cl-sec { padding-top: 96px; }
.cl-card { background: #fff; border: 1px solid var(--color-line); border-radius: 16px; box-shadow: var(--shadow-glass-card); }
.cl-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border-radius: 10px; border: none; cursor: pointer; font: 700 13.5px var(--font-body); color: #fff; background: linear-gradient(135deg, #5B8DEF, #3F6FD8); box-shadow: 0 10px 22px -10px rgba(63, 111, 216, .6); }
.cl-cta:hover { filter: brightness(1.05); color: #fff; }
.cl-cta[disabled] { opacity: .6; cursor: default; filter: none; }
.cl-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 10px; border: none; cursor: pointer; font: 700 13.5px var(--font-body); color: var(--color-ink); background: rgba(38, 39, 43, .05); }
.cl-ghost:hover { background: rgba(38, 39, 43, .09); color: var(--color-ink); }
.cl-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.cl-row { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--color-line); font: 700 12.5px var(--font-body); }
.cl-row:last-child { border-bottom: none; }
.cl-row small { display: block; font: 500 11px/1.4 var(--font-body); color: var(--color-sub); margin-top: 2px; }
.cl-row b { margin-left: auto; font: 600 10.5px var(--font-mono); color: var(--color-muted); white-space: nowrap; }
.cl-step { display: flex; gap: 16px; align-items: flex-start; padding: 22px 0; border-top: 1px solid var(--color-line); }
.cl-step:first-child { border-top: none; padding-top: 0; }
.cl-num { font: 600 12px var(--font-mono); color: #3F6FD8; padding-top: 3px; flex: none; min-width: 24px; white-space: nowrap; }
.cl-step h3 { font: 700 15px/1.3 var(--font-body); margin: 0; }
.cl-step p { font: 400 13.5px/1.55 var(--font-body); color: var(--color-sub); margin: 6px 0 0; }
.cl-label { font: 800 9.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); }
.cl-faq { border-top: 1px solid var(--color-line); }
.cl-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font: 700 14.5px var(--font-body); color: var(--color-ink); }
.cl-faq summary::-webkit-details-marker { display: none; }
.cl-faq summary::after { content: "+"; font: 400 20px var(--font-body); color: var(--color-muted); }
.cl-faq[open] summary::after { content: "–"; }
.cl-faq p { font: 400 14px/1.6 var(--font-body); color: var(--color-sub); margin: 0 0 18px; max-width: 640px; }
.cl-field { display: flex; flex-direction: column; gap: 6px; }
.cl-field label { font: 700 9.5px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); }
.cl-field input, .cl-field textarea { font: 500 13px var(--font-body); color: var(--color-ink); background: #fff; border: 1px solid var(--color-line); border-radius: 14px; padding: 11px 14px; outline: none; width: 100%; box-sizing: border-box; resize: vertical; }
.cl-field input:focus, .cl-field textarea:focus { outline: 2px solid #5B8DEF; outline-offset: 1px; }
.cl-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.cl-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cl-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.cl-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 72px; }
.cl-quote { padding: 18px 20px; border-radius: 16px; background: #E8EEFB; border-left: 3px solid #3F6FD8; }
.cl-quote__who { display: flex; align-items: center; gap: 10px; }
.cl-quote__who img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px #fff; }
.cl-quote__body { font: 600 14px/1.5 var(--font-body); margin-top: 12px; }
.cl-signal { padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--color-line); }
.cl-signal h4 { font: 700 13.5px/1.3 var(--font-body); margin: 10px 0 0; }
.cl-signal p { font: 400 12.5px/1.55 var(--font-body); color: var(--color-sub); margin: 6px 0 0; }

/* The aurora. ONE absolute element per page, never one blob per card and never
   nested — the design system's keep-rule 8, the same one the app obeys. */
.cl-aurora { position: absolute; inset: 0; height: 900px; pointer-events: none; overflow: hidden; }
.cl-aurora i { position: absolute; display: block; border-radius: 50%; filter: blur(38px); }

@media (max-width: 900px) {
  .cl-hero, .cl-2 { grid-template-columns: minmax(0, 1fr); }
  .cl-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-3 { grid-template-columns: minmax(0, 1fr); }
  .cl-sec { padding-top: 72px; }
  .cl-req { grid-template-columns: minmax(0, 1fr) !important; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }