/* ============================================================
   Test Dossier — design system for marketing & public surfaces.
   Single source of truth for tokens, typography, components.
   ============================================================ */

:root {
  /* Color — neutrals tuned for paper-like calm, not stock blue-gray */
  --bg: #fbfbfd;
  --surface: #ffffff;
  --surface-2: #f4f5f7;
  --surface-3: #eaecef;
  --border: #e6e8ec;
  --border-strong: #d4d7dd;
  --text: #0c1118;
  --text-2: #424a57;
  --text-3: #6f7785;
  --text-4: #9aa0aa;

  /* Accent — electric indigo-violet, distinctive against the SaaS-blue field */
  --accent: #4435e8;
  --accent-hover: #392bcc;
  --accent-active: #2e22a8;
  --accent-soft: #eeecfe;
  --accent-ring: rgba(68, 53, 232, 0.22);
  --accent-glow: rgba(68, 53, 232, 0.32);

  /* Semantic */
  --success: #047857;
  --success-soft: #e6f5ec;
  --danger: #dc2626;
  --danger-soft: #fdecec;
  --warning: #c2410c;
  --warning-soft: #fdeee0;

  /* Typography */
  --font-sans: "InterVariable", "Inter", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Menlo", "Consolas",
    ui-monospace, monospace;
  --feat: "cv02", "cv03", "cv04", "cv11", "ss01";

  /* Type scale — modular, capped at 64 for h1 */
  --text-xs: 12px;
  --text-sm: 13px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 40px;
  --text-5xl: 56px;
  --text-6xl: 64px;

  /* Line heights paired with sizes for vertical rhythm */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-base: 1.5;
  --lh-loose: 1.7;

  /* Spacing — 4px base, geometric */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* Radii */
  --r-sm: 4px;
  --r: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 999px;

  /* Shadows — layered for depth without heaviness */
  --shadow-xs: 0 1px 2px 0 rgba(15, 20, 25, 0.04);
  --shadow-sm: 0 1px 2px 0 rgba(15, 20, 25, 0.05),
               0 1px 3px 0 rgba(15, 20, 25, 0.04);
  --shadow:    0 2px 4px -1px rgba(15, 20, 25, 0.06),
               0 4px 6px -2px rgba(15, 20, 25, 0.04);
  --shadow-md: 0 4px 6px -2px rgba(15, 20, 25, 0.06),
               0 10px 15px -3px rgba(15, 20, 25, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(15, 20, 25, 0.08),
               0 20px 25px -5px rgba(15, 20, 25, 0.06);

  /* Transitions */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.0, 0, 0.2, 1);
  --t-fast: 120ms;
  --t: 200ms;
  --t-slow: 320ms;

  /* Layout */
  --content-w: 1140px;
  --prose-w: 720px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0a0c10;
    --surface: #11141b;
    --surface-2: #161a22;
    --surface-3: #1c2030;
    --border: #232836;
    --border-strong: #303749;
    --text: #e7e9ee;
    --text-2: #a4abba;
    --text-3: #767e8d;
    --text-4: #535a69;
    --accent: #9388ff;
    --accent-hover: #aaa1ff;
    --accent-active: #c0baff;
    --accent-soft: #1c1740;
    --accent-ring: rgba(147, 136, 255, 0.26);
    --accent-glow: rgba(147, 136, 255, 0.4);
    --success-soft: #0e2a1f;
    --danger-soft: #2c1418;
    --warning-soft: #2d1d0f;
    --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4),
                 0 1px 3px 0 rgba(0, 0, 0, 0.3);
    --shadow:    0 2px 4px -1px rgba(0, 0, 0, 0.45),
                 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -2px rgba(0, 0, 0, 0.5),
                 0 10px 15px -3px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55),
                 0 20px 25px -5px rgba(0, 0, 0, 0.4);
  }
}

[data-theme="dark"] {
  --bg: #0a0c10;
  --surface: #11141b;
  --surface-2: #161a22;
  --surface-3: #1c2030;
  --border: #232836;
  --border-strong: #303749;
  --text: #e7e9ee;
  --text-2: #a4abba;
  --text-3: #767e8d;
  --text-4: #535a69;
  --accent: #9388ff;
  --accent-hover: #aaa1ff;
  --accent-active: #c0baff;
  --accent-soft: #1c1740;
  --accent-ring: rgba(147, 136, 255, 0.26);
  --accent-glow: rgba(147, 136, 255, 0.4);
  --success-soft: #0e2a1f;
  --danger-soft: #2c1418;
  --warning-soft: #2d1d0f;
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4),
               0 1px 3px 0 rgba(0, 0, 0, 0.3);
  --shadow:    0 2px 4px -1px rgba(0, 0, 0, 0.45),
               0 4px 6px -2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -2px rgba(0, 0, 0, 0.5),
               0 10px 15px -3px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.55),
               0 20px 25px -5px rgba(0, 0, 0, 0.4);
}

/* ============================================================
   Base
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-feature-settings: var(--feat);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@supports (font-variation-settings: normal) {
  body { font-family: "InterVariable", var(--font-sans); }
}

::selection { background: var(--accent-soft); color: var(--text); }

a { color: var(--accent); text-decoration: none; transition: color var(--t-fast) var(--ease-out); }
a:hover { color: var(--accent-hover); }

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

h1, h2, h3, h4 {
  margin: 0 0 var(--s-4);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: var(--lh-tight);
  color: var(--text);
}
h1 { font-size: var(--text-5xl); letter-spacing: -0.034em; }
h2 { font-size: var(--text-3xl); letter-spacing: -0.024em; }
h3 { font-size: var(--text-xl); letter-spacing: -0.014em; }
h4 { font-size: var(--text-md); letter-spacing: -0.01em; }

/* Container */
.container {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--s-6);
}
.container--prose { max-width: var(--prose-w); }

/* ============================================================
   Header / nav
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 96%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--border);
}
/* Dark mode: near-opaque — the saturated accent wash on the share-page
   hero bleeds through aggressively, making the nav row look like it's
   lying on top of the title. */
[data-theme="dark"] .site-header {
  background: color-mix(in srgb, var(--bg) 98%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header {
    background: color-mix(in srgb, var(--bg) 98%, transparent);
  }
}
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}
.site-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: -0.01em;
  color: var(--text);
}
.site-logo:hover { color: var(--text); }
.site-logo svg { display: block; flex: none; }
.site-nav__links {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.site-nav__links a {
  padding: var(--s-2) var(--s-3);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--text-2);
  border-radius: var(--r);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.site-nav__links a:hover { background: var(--surface-2); color: var(--text); }
.site-nav__links a.is-cta {
  background: var(--text);
  color: var(--bg);
  padding: var(--s-2) var(--s-4);
  font-weight: 600;
}
.site-nav__links a.is-cta:hover { background: var(--text-2); color: var(--bg); }

/* Shared theme-toggle button (used in site-header across marketing,
   share, app surfaces). The <button> wraps two <svg> icons; theme.js
   shows the one that matches the OPPOSITE of the current theme so
   clicking flips to it. */
.theme-toggle {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text-2);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
  padding: 0;
}
.theme-toggle:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border-strong);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
}

@media (max-width: 540px) {
  .site-nav { height: 56px; }
  /* Keep Pricing visible — it's the primary conversion path. The earlier
     "hide everything except the CTA" rule cost the Pricing link entirely
     on phones, so visitors had no way to compare plans before opening
     the app. Compress padding instead and let the theme toggle drop. */
  .site-nav__links { gap: 4px; }
  .site-nav__links a:not(.is-cta) { padding: var(--s-1) var(--s-2); font-size: var(--text-xs); }
  .site-nav__links .theme-toggle { display: none; }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: 40px;
  padding: 0 var(--s-5);
  border-radius: var(--r);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--t-fast) var(--ease-out),
    border-color var(--t-fast) var(--ease-out),
    color var(--t-fast) var(--ease-out),
    transform var(--t-fast) var(--ease-out),
    box-shadow var(--t-fast) var(--ease-out);
  white-space: nowrap;
  user-select: none;
}
.btn:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
.btn--lg { height: 48px; padding: 0 var(--s-6); font-size: var(--text-md); }
.btn--sm { height: 32px; padding: 0 var(--s-3); font-size: var(--text-xs); }
.btn--block { width: 100%; }

.btn--primary {
  background: var(--text);
  color: var(--bg);
}
.btn--primary:hover { background: var(--text-2); color: var(--bg); }
.btn--primary:active { transform: translateY(0.5px); }

.btn--accent {
  background: var(--accent);
  color: white;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.08) inset,
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 6px 14px -6px var(--accent-glow),
    var(--shadow-sm);
}
.btn--accent:hover {
  background: var(--accent-hover);
  color: white;
  transform: translateY(-1px);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.08) inset,
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 14px 28px -10px var(--accent-glow),
    var(--shadow);
}
.btn--accent:active {
  background: var(--accent-active);
  transform: translateY(0);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.1) inset,
    0 4px 10px -6px var(--accent-glow);
}

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

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

/* ============================================================
   Inputs
   ============================================================ */
.input,
.select,
.textarea {
  width: 100%;
  height: 40px;
  padding: 0 var(--s-3);
  border-radius: var(--r);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--text-sm);
  line-height: 1.4;
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.input:focus,
.select:focus,
.textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.textarea { padding: var(--s-2) var(--s-3); height: auto; min-height: 96px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }

/* ============================================================
   Cards / surfaces
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
}
.card--padded { padding: var(--s-6); }
.card--clickable { cursor: pointer; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.card--clickable:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

.kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text-2);
  letter-spacing: 0;
}
.kicker--accent {
  background: var(--accent-soft);
  border-color: transparent;
  color: var(--accent);
}

/* ============================================================
   Pricing-card primitives
   ============================================================ */
.plan {
  display: flex;
  flex-direction: column;
  padding: var(--s-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-xs);
  /* Center the header zone (name + price + billed + toggle) and CTA. The
     feature list overrides this back to left-aligned so the checkmark
     column stays consistent. Standard pricing-card pattern. */
  text-align: center;
}
.plan--featured {
  border-color: var(--accent);
  background:
    linear-gradient(180deg, var(--accent-soft) 0%, transparent 30%),
    var(--surface);
  box-shadow: var(--shadow);
  position: relative;
}
.plan--featured::after {
  content: "Most popular";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: white;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border-radius: var(--r-full);
  white-space: nowrap;
  box-shadow: 0 4px 10px -3px var(--accent-glow);
}
.plan__name { font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); font-weight: 600; }
.plan__price { font-size: var(--text-5xl); font-weight: 700; letter-spacing: -0.026em; line-height: 1; margin-top: var(--s-3); }
.plan__price small { font-size: var(--text-md); color: var(--text-3); font-weight: 500; }
.plan__billed { font-size: var(--text-sm); color: var(--text-3); margin-top: var(--s-2); min-height: 20px; }
.plan__features { list-style: none; padding: 0; margin: var(--s-6) 0; flex: 1; display: block; text-align: left; }
/* Block layout with floated icon — content after the SVG is regular
   inline flow, so any number of <strong>s, <span>s, plain text, or
   <small>s all wrap as a single line of text without splitting into
   columns. Each li gets its own row via display:block + margin. */
.plan__features li { display: block; padding-left: 26px; position: relative; font-size: var(--text-sm); color: var(--text-2); line-height: 1.55; margin-bottom: var(--s-3); }
.plan__features li:last-child { margin-bottom: 0; }
.plan__features li.muted { color: var(--text-3); }
.plan__features li > svg { position: absolute; left: 0; top: 5px; color: var(--success); }
.plan__features li.muted > svg { color: var(--text-4); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  margin-top: var(--s-24);
  padding: var(--s-12) 0;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.site-footer__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-4);
}
.site-footer__links { display: flex; gap: var(--s-5); }
.site-footer__links a { color: var(--text-3); font-size: var(--text-sm); }
.site-footer__links a:hover { color: var(--text); }
.site-footer__copy { color: var(--text-3); font-size: var(--text-sm); }

/* ============================================================
   Utilities
   ============================================================ */
.muted { color: var(--text-3); }
.text-center { text-align: center; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}
.lead { font-size: var(--text-lg); color: var(--text-2); line-height: var(--lh-base); }
.eyebrow {
  display: inline-block;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--s-4);
}

@media (max-width: 700px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-2xl); }
  .container { padding: 0 var(--s-4); }
  .plan { padding: var(--s-6); }
}

/* Scrollbars — thin, reveal-on-hover. Applied site-wide via this stylesheet.
   Note: macOS "Always show scrollbars" overrides browser-styled scrollbars. */
html { scrollbar-width: thin; scrollbar-color: transparent transparent; }
html:hover { scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px;
  transition: background 0.15s ease; }
*:hover::-webkit-scrollbar-thumb { background: var(--border-strong); }
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); }