/* ==========================================================================
   Bloomod — design tokens + components
   Spec: ../../design.md  ·  Light-first, dark theme via html.dark
   ========================================================================== */

:root {
  /* =========================================================
     ACCENT COLOR PRESETS (change only the four values below):
     1. Emerald (Default): #059669 | #ecfdf5 | #a7f3d0 | #047857
     2. Indigo:            #4f46e5 | #e0e7ff | #c7d2fe | #3730a3
     3. Teal:              #0d9488 | #ccfbf1 | #99f6e4 | #0f766e
     4. Violet:            #7c3aed | #f3e8ff | #ddd6fe | #6d28d9
     5. Amber:             #d97706 | #fef3c7 | #fde68a | #b45309
     ========================================================= */
  --accent-color:#059669; --accent-bg:#ecfdf5;
  --accent-border:#a7f3d0; --accent-text:#047857;

  --brand:#0B6E62; --brand-ink:#08554B; --brand-lift:#0E8C7C; --brand-wash:#E6F2F0;
  --ink-900:#0A0C10; --ink-800:#14181F; --ink-700:#39414F; --ink-500:#646D7E; --ink-400:#8A93A3;
  --paper:#FFFFFF; --paper-2:#FAFAFB; --paper-3:#F3F4F7; --paper-4:#EAECF1;
  --line:#E5E7EE; --line-strong:#D2D6E0;
  --ok:#0B6E62; --ok-wash:#E6F2F0; --warn:#9A5B00; --warn-wash:#FBF1E3;
  --bad:#B3261E; --bad-wash:#FBEAE8; --info:#39414F;

  --font-display:"Open Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-sans:"Open Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --fs-display:clamp(2.75rem,1.6rem + 4.6vw,5rem);
  --fs-h1:clamp(2.25rem,1.5rem + 2.8vw,3.5rem);
  --fs-h2:clamp(1.875rem,1.3rem + 2vw,2.75rem);
  --fs-h2-ui:clamp(1.5rem,1.2rem + 1vw,1.875rem);
  --fs-h3:clamp(1.125rem,1rem + .4vw,1.25rem);
  --fs-lede:clamp(1.0625rem,1rem + .3vw,1.1875rem);
  --fs-metric:clamp(1.5rem,1.2rem + 1.2vw,2.125rem);

  --section-y:clamp(4rem,2.5rem + 6vw,7.5rem);
  --container:1200px; --container-wide:1320px; --gutter:clamp(1.25rem,4vw,2rem);

  --r-sm:8px; --r-md:10px; --r-lg:14px; --r-xl:20px; --r-2xl:28px; --r-pill:999px;

  --shadow-xs:0 1px 2px rgba(10,12,16,.05);
  --shadow-sm:0 1px 3px rgba(10,12,16,.06),0 1px 2px rgba(10,12,16,.04);
  --shadow-md:0 4px 12px rgba(10,12,16,.07),0 1px 3px rgba(10,12,16,.05);
  --shadow-lg:0 12px 32px rgba(10,12,16,.09),0 2px 8px rgba(10,12,16,.05);

  --ease-out:cubic-bezier(.16,1,.3,1); --ease-in-out:cubic-bezier(.4,0,.2,1);
  --dur-fast:150ms; --dur:240ms; --dur-slow:480ms;

  --nav-h:68px;
}

html.dark {
  --ink-900:#F2F4F8; --ink-800:#E6E9EF; --ink-700:#C3C9D4; --ink-500:#8F98A6; --ink-400:#6C7583;
  --paper:#0B0D11; --paper-2:#101318; --paper-3:#161A21; --paper-4:#1D222B;
  --line:#20262F; --line-strong:#2C333E;
  --brand:#37B39F; --brand-ink:#5BC9B7; --brand-lift:#2A9C8A; --brand-wash:#122622;
  --ok:#37B39F; --ok-wash:#122622; --warn:#E0A64A; --warn-wash:#2A2113;
  --bad:#F0857C; --bad-wash:#2D1614; --info:#C3C9D4;
  --shadow-xs:0 1px 0 rgba(255,255,255,.04);
  --shadow-sm:0 1px 0 rgba(255,255,255,.04);
  --shadow-md:0 1px 0 rgba(255,255,255,.04);
  --shadow-lg:0 16px 40px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.04);
}

/* --- base ---------------------------------------------------------------- */

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

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }

body {
  margin:0; background:var(--paper); color:var(--ink-700);
  font-family:var(--font-sans); font-size:1rem; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
html.theme-ready body { transition:background-color var(--dur) var(--ease-in-out), color var(--dur) var(--ease-in-out); }

h1,h2,h3,h4 { color:var(--ink-900); margin:0; }
p { margin:0; }
a { color:var(--brand); text-decoration:none; }
a:hover { color:var(--brand-ink); }
img,svg { display:block; max-width:100%; }
button { font:inherit; color:inherit; }
hr { border:0; border-top:1px solid var(--line); margin:0; }

:focus-visible { outline:2px solid var(--brand); outline-offset:2px; border-radius:4px; }

::selection { background:var(--brand-wash); color:var(--ink-900); }

.skip-link {
  position:absolute; left:var(--gutter); top:-100px; z-index:100;
  background:var(--ink-900); color:#fff; padding:.75rem 1rem;
  border-radius:var(--r-md); font-size:.875rem; font-weight:500;
  transition:top var(--dur-fast) var(--ease-out);
}
.skip-link:focus { top:12px; color:#fff; }

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* --- layout -------------------------------------------------------------- */

.container { width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.container-wide { width:100%; max-width:var(--container-wide); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-block:var(--section-y); }
.section-sm { padding-block:clamp(2.5rem,1.5rem + 4vw,4.5rem); }
.band { background:var(--paper-2); }
.band-3 { background:var(--paper-3); }
.rule-top { border-top:1px solid var(--line); }
.prose-measure { max-width:68ch; }

/* Grid and flex children default to min-width:auto, so a wide child (the mock
   tables are min-width:640px) forces its track past the viewport even though the
   wrapper scrolls. Reset it, then let .table-wrap own the overflow. */
.grid > *, .flex > * { min-width:0; }
.table-wrap, .card-data, .card-outline, .card-flat, .code-panel, .preview-frame { max-width:100%; }

.dotgrid {
  background-image:radial-gradient(var(--line-strong) 1px, transparent 1px);
  background-size:22px 22px; background-position:-1px -1px;
}
.dotgrid-fade { position:relative; }
.dotgrid-fade::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 0%,var(--paper) 92%);
}

/* --- type ---------------------------------------------------------------- */

.h-display { font-family:var(--font-display); font-weight:400; font-size:var(--fs-display); line-height:1.02; letter-spacing:-.02em; }
.h1 { font-family:var(--font-display); font-weight:400; font-size:var(--fs-h1); line-height:1.06; letter-spacing:-.015em; }
.h2 { font-family:var(--font-display); font-weight:400; font-size:var(--fs-h2); line-height:1.1; letter-spacing:-.01em; }
.h2-ui { font-family:var(--font-sans); font-weight:600; font-size:var(--fs-h2-ui); line-height:1.2; letter-spacing:-.02em; }
.h3 { font-family:var(--font-sans); font-weight:600; font-size:var(--fs-h3); line-height:1.3; letter-spacing:-.01em; }
.h4 { font-family:var(--font-sans); font-weight:600; font-size:1rem; line-height:1.4; letter-spacing:-.005em; }
.lede { font-size:var(--fs-lede); line-height:1.65; color:var(--ink-500); }
.small { font-size:.875rem; line-height:1.55; }
.micro { font-size:.8125rem; line-height:1.45; }
.muted { color:var(--ink-500); }
.dim { color:var(--ink-400); }
.serif-em { font-family:var(--font-display); font-style:italic; font-weight:400; }
.calligraphy-accent {
  font-family:'Instrument Serif',Georgia,serif; font-style:italic; font-weight:400;
  font-size:1.08em; letter-spacing:-.01em; display:inline-block; padding:0 .04em;
  color:var(--accent-color); transition:color .3s ease;
}
.mono { font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

.metric {
  font-family:var(--font-mono); font-weight:500; font-size:var(--fs-metric);
  line-height:1.1; letter-spacing:-.02em; color:var(--ink-900);
  font-variant-numeric:tabular-nums;
}
/* headline value that is words, not a number — mono is for numerals only */
.metric-word {
  font-family:var(--font-display); font-weight:400; font-size:var(--fs-metric);
  line-height:1.1; letter-spacing:-.015em; color:var(--ink-900);
}

.eyebrow {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.75rem; font-weight:500;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-500);
  background:var(--paper); border:1px solid var(--line);
  padding:.3rem .7rem; border-radius:var(--r-pill);
}

/* --- accent options ------------------------------------------------------ */

.accent-option {
  --swatch:#059669; display:inline-flex; align-items:center; gap:.35rem;
  padding:.3rem .45rem; border:1px solid transparent; border-radius:var(--r-pill);
  background:transparent; color:var(--ink-500); cursor:pointer;
  font-family:var(--font-mono); font-size:.6875rem; font-weight:500; line-height:1.2;
  transition:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.accent-option > span { width:.625rem; height:.625rem; border-radius:50%; background:var(--swatch); flex:none; }
.accent-option[data-accent-choice="indigo"] { --swatch:#4f46e5; }
.accent-option[data-accent-choice="teal"] { --swatch:#0d9488; }
.accent-option[data-accent-choice="violet"] { --swatch:#7c3aed; }
.accent-option[data-accent-choice="amber"] { --swatch:#d97706; }
.accent-option[aria-pressed="true"] { background:var(--accent-bg); border-color:var(--accent-border); color:var(--accent-text); }
.accent-option:hover { background:var(--paper-3); color:var(--ink-900); }
.accent-option[aria-pressed="true"]:hover { background:var(--accent-bg); color:var(--accent-text); }

/* --- buttons ------------------------------------------------------------- */

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  height:44px; padding:0 1.25rem; border-radius:var(--r-md);
  font-size:.9375rem; font-weight:500; letter-spacing:-.005em;
  border:1px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background-color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out),
             transform var(--dur-fast) var(--ease-out);
}
.btn-lg { height:52px; padding:0 1.5rem; font-size:1rem; }
.btn-sm { height:36px; padding:0 .875rem; font-size:.875rem; }

.btn-primary { background:var(--ink-900); color:var(--paper); }
.btn-primary:hover { background:var(--ink-800); color:var(--paper); transform:translateY(-1px); }
.btn-primary:active { transform:translateY(0); }

.btn-secondary { background:var(--paper); color:var(--ink-900); border-color:var(--line-strong); box-shadow:var(--shadow-xs); }
.btn-secondary:hover { background:var(--paper-3); border-color:var(--ink-400); color:var(--ink-900); }

.btn-ghost { background:transparent; color:var(--ink-700); }
.btn-ghost:hover { background:var(--paper-3); color:var(--ink-900); }

.btn-brand { background:var(--brand); color:#fff; }
.btn-brand:hover { background:var(--brand-ink); color:#fff; }
html.dark .btn-brand { color:#04140F; }
html.dark .btn-brand:hover { color:#04140F; }

.btn[disabled],.btn[aria-disabled="true"] { background:var(--paper-4); color:var(--ink-400); border-color:transparent; pointer-events:none; box-shadow:none; }

/* The invite-preview CTA is intentionally non-interactive, but should retain its
   branded, legible appearance in both themes. */
.preview-frame .btn-brand[aria-disabled="true"] { background:var(--brand); color:#fff; border-color:var(--brand); opacity:1; }
html.dark .preview-frame .btn-brand[aria-disabled="true"] { color:#04140F; }

.btn-block { width:100%; }

.link-arrow { display:inline-flex; align-items:center; gap:.4rem; font-weight:500; color:var(--brand); }
.link-arrow::after { content:"→"; transition:transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover::after { transform:translateX(3px); }
.link-quiet { color:var(--ink-700); font-weight:500; }
.link-quiet:hover { color:var(--ink-900); text-decoration:underline; text-underline-offset:3px; }

/* --- badges -------------------------------------------------------------- */

.badge {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase;
  padding:.25rem .625rem; border-radius:var(--r-pill); border:1px solid transparent;
  flex:none; white-space:nowrap;
}
.badge::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; flex:none; }
.badge-plain::before { display:none; }
.badge-ok { background:var(--ok-wash); color:var(--ok); }
.accent-badge, .badge-success, [data-accent-pill] {
  background-color:var(--accent-bg) !important;
  color:var(--accent-text) !important;
  border:1px solid var(--accent-border) !important;
}
.badge-warn { background:var(--warn-wash); color:var(--warn); }
.badge-bad { background:var(--bad-wash); color:var(--bad); }
.badge-neutral { background:var(--paper-3); color:var(--ink-500); border-color:var(--line); }
.badge-dark { background:var(--ink-900); color:var(--paper); }

/* --- cards --------------------------------------------------------------- */

.card-flat {
  background:var(--paper-3); border-radius:var(--r-xl); padding:1.5rem;
  transition:background-color var(--dur-fast) var(--ease-out);
}
.card-flat:hover { background:var(--paper-4); }
.card-flat .card-icon { color:var(--ink-900); margin-bottom:2.5rem; }

.card-outline { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); padding:1.75rem; }
.card-outline-featured { border-color:var(--ink-900); box-shadow:var(--shadow-md); }

.card-data { background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-lg); overflow:hidden; }
.card-data-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:56px; padding:.875rem 1.25rem; border-bottom:1px solid var(--line); }
.card-data-body { padding:1.25rem; }

.stat { border-top:1px solid var(--line); padding-top:1.25rem; }
.stat-label { font-size:.8125rem; color:var(--ink-500); margin-top:.35rem; }

.icon-tile {
  width:38px; height:38px; border-radius:var(--r-md);
  display:grid; place-items:center; background:var(--paper); border:1px solid var(--line);
  color:var(--ink-900); flex:none;
}
.card-flat .icon-tile { background:var(--paper); }

/* --- callouts ------------------------------------------------------------ */

.callout {
  border-left:2px solid var(--brand); background:var(--brand-wash);
  border-radius:0 var(--r-md) var(--r-md) 0; padding:1rem 1.25rem;
  color:var(--ink-700); font-size:.9375rem;
}
.disclaimer {
  border-left:2px solid var(--line-strong); background:var(--paper-3);
  border-radius:0 var(--r-md) var(--r-md) 0; padding:.875rem 1.125rem;
  color:var(--ink-500); font-size:.8125rem; line-height:1.6;
}

/* --- header / nav -------------------------------------------------------- */

.site-header {
  position:sticky; top:0; z-index:50; height:var(--nav-h);
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:blur(12px) saturate(140%);
  -webkit-backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.site-header.is-stuck { border-bottom-color:var(--line); box-shadow:var(--shadow-md); }
.nav { display:flex; align-items:center; gap:1.5rem; height:var(--nav-h); }
.brand { display:inline-flex; align-items:center; gap:.625rem; color:var(--ink-900); font-weight:600; font-size:1.0625rem; letter-spacing:-.02em; }
.brand:hover { color:var(--ink-900); }
.brand-name { font-family:'Avenir Next', Avenir, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight:500; letter-spacing:-.03em; }
.nav-links { display:none; align-items:center; gap:.25rem; margin-left:.75rem; }
.nav-link {
  position:relative; padding:.5rem .7rem; border-radius:var(--r-sm);
  font-size:.9375rem; color:var(--ink-700); font-weight:400;
  background:none; border:0; cursor:pointer; -webkit-appearance:none; appearance:none;
  font-family:inherit; line-height:1.5;
}
.nav-link:hover { color:var(--ink-900); background:var(--paper-3); }
.nav-link[aria-current="page"] { color:var(--brand); font-weight:500; }
.nav-link[aria-current="page"]::after {
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:-2px; height:2px;
  background:var(--brand); border-radius:2px;
}
.nav-right { display:flex; align-items:center; gap:.5rem; margin-left:auto; }
.icon-btn {
  width:36px; height:36px; border-radius:var(--r-sm); border:1px solid transparent;
  background:transparent; color:var(--ink-700); display:grid; place-items:center; cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background:var(--paper-3); color:var(--ink-900); }
.nav-signin { display:none; }
@media (min-width:1024px) {
  .nav-links { display:flex; }
  .nav-signin { display:inline-flex; }
  .nav-burger { display:none; }
}

/* mega/dropdown */
.has-menu { position:relative; }
.nav-menu {
  position:absolute; top:calc(100% + 10px); left:0; min-width:280px;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:.5rem; display:none;
}
.has-menu[data-open="true"] .nav-menu { display:block; }
.nav-menu a { display:block; padding:.6rem .7rem; border-radius:var(--r-sm); color:var(--ink-700); font-size:.9375rem; }
.nav-menu a:hover { background:var(--paper-3); color:var(--ink-900); }
.nav-menu .nm-desc { display:block; font-size:.8125rem; color:var(--ink-400); margin-top:.1rem; }

/* drawer */
.drawer-backdrop {
  position:fixed; inset:0; z-index:60; background:rgba(10,12,16,.4);
  opacity:0; pointer-events:none; transition:opacity 180ms var(--ease-out);
}
.drawer-backdrop[data-open="true"] { opacity:1; pointer-events:auto; }
.drawer {
  position:fixed; top:0; right:0; z-index:61; height:100dvh; width:86vw; max-width:380px;
  background:var(--paper); border-left:1px solid var(--line); box-shadow:var(--shadow-lg);
  transform:translateX(100%); transition:transform var(--dur) var(--ease-out);
  display:flex; flex-direction:column; overflow-y:auto;
}
.drawer[data-open="true"] { transform:translateX(0); }
.drawer-head { display:flex; align-items:center; justify-content:space-between; height:var(--nav-h); padding:0 1.25rem; border-bottom:1px solid var(--line); flex:none; }
.drawer-body { padding:1rem 1.25rem 2rem; }
.drawer-group + .drawer-group { margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--line); }
.drawer-group-title { font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-400); margin-bottom:.5rem; }
.drawer-link { display:flex; align-items:center; min-height:52px; color:var(--ink-700); font-size:1rem; }
.drawer-link:hover { color:var(--ink-900); }
.drawer-link[aria-current="page"] { color:var(--brand); font-weight:500; }

/* --- footer -------------------------------------------------------------- */

.site-footer { background:var(--paper-2); border-top:1px solid var(--line); padding:4rem 0 1.5rem; }
.footer-grid { display:grid; gap:2.5rem; grid-template-columns:1fr; }
@media (min-width:640px) { .footer-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .footer-grid { grid-template-columns:1.6fr repeat(4,1fr); gap:2rem; } }
.footer-title { font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-400); margin-bottom:.9rem; }
.footer-list { list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.footer-list a { font-size:.875rem; color:var(--ink-500); }
.footer-list a:hover { color:var(--ink-900); }
.footer-bottom {
  margin-top:3rem; padding-top:1.5rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.75rem 1.5rem; justify-content:space-between;
  font-size:.8125rem; color:var(--ink-400);
}

/* --- forms --------------------------------------------------------------- */

.field { display:block; }
.label { display:block; font-size:.8125rem; font-weight:500; color:var(--ink-700); margin-bottom:.375rem; }
.input,.select,.textarea {
  width:100%; height:44px; padding:0 .875rem; border-radius:var(--r-md);
  background:var(--paper); border:1px solid var(--line-strong); color:var(--ink-900);
  font-size:.9375rem; font-family:inherit;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.textarea { height:auto; min-height:120px; padding:.75rem .875rem; line-height:1.6; }
.input::placeholder,.textarea::placeholder { color:var(--ink-400); }
.input:focus,.select:focus,.textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-wash); }
.help { font-size:.8125rem; color:var(--ink-500); margin-top:.375rem; }
.check { display:flex; gap:.625rem; align-items:flex-start; font-size:.875rem; color:var(--ink-700); }
.check input { width:18px; height:18px; margin:.2rem 0 0; accent-color:var(--brand); flex:none; }
.divider-or { display:flex; align-items:center; gap:1rem; color:var(--ink-400); font-size:.75rem; font-family:var(--font-mono); letter-spacing:.08em; text-transform:uppercase; }
.divider-or::before,.divider-or::after { content:""; flex:1; height:1px; background:var(--line); }

/* --- accordion ----------------------------------------------------------- */

.acc-item { border-bottom:1px solid var(--line); }
.acc-btn {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  background:none; border:0; padding:1.25rem 0; cursor:pointer; text-align:left;
  font-size:1.0625rem; font-weight:500; color:var(--ink-900);
}
.acc-icon { font-family:var(--font-mono); font-size:1.25rem; color:var(--ink-400); transition:transform var(--dur) var(--ease-out); flex:none; }
.acc-btn[aria-expanded="true"] .acc-icon { transform:rotate(45deg); }
.acc-panel { display:grid; grid-template-rows:0fr; transition:grid-template-rows 220ms var(--ease-out); }
.acc-panel[data-open="true"] { grid-template-rows:1fr; }
.acc-panel > div { overflow:hidden; }
.acc-panel p { max-width:68ch; color:var(--ink-500); font-size:.9375rem; padding-bottom:1.25rem; }

/* --- pipeline rail (signature) ------------------------------------------- */

.rail { display:grid; gap:.75rem; }
.rail-track { display:flex; align-items:center; }
.rail-node { width:10px; height:10px; border-radius:50%; background:var(--line-strong); flex:none; position:relative; }
.rail-node.is-done { background:var(--ok); }
.rail-node.is-now { background:var(--paper); border:2px solid var(--ok); width:12px; height:12px; box-shadow:0 0 0 4px var(--ok-wash); }
.rail-seg { flex:1; height:2px; background:var(--line); transform-origin:left center; }
.rail-seg.is-done { background:var(--ok); }
.rail-labels { display:flex; }
.rail-labels span { flex:1; font-family:var(--font-mono); font-size:.625rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-400); }
.rail-labels span:first-child { text-align:left; }
.rail-labels span:last-child { text-align:right; }
.rail-labels span.is-now { color:var(--ink-900); }
@media (max-width:639px) {
  .rail-track { flex-direction:column; align-items:flex-start; gap:0; }
  .rail-seg { width:2px; height:22px; flex:none; margin-left:4px; }
  .rail-labels { display:none; }
  .rail-vertical-labels { display:grid; gap:.75rem; }
}
.rail-steps { list-style:none; margin:0; padding:0; display:grid; gap:0; }
.rail-step { display:flex; gap:.875rem; align-items:flex-start; padding:.875rem 0; border-bottom:1px solid var(--line); }
.rail-step:last-child { border-bottom:0; }
.rail-step-num { font-family:var(--font-mono); font-size:.75rem; color:var(--ink-400); width:1.5rem; flex:none; padding-top:.15rem; }

/* --- mock table ---------------------------------------------------------- */

.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-mock { width:100%; border-collapse:collapse; min-width:640px; }
.table-mock thead th {
  background:var(--paper-3); height:40px; padding:0 1rem; text-align:left;
  font-family:var(--font-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-500);
  border-bottom:1px solid var(--line); white-space:nowrap;
}
.table-mock tbody td { height:52px; padding:0 1rem; border-bottom:1px solid var(--line); font-size:.8125rem; color:var(--ink-500); white-space:nowrap; }
.table-mock tbody tr:last-child td { border-bottom:0; }
.table-mock tbody tr:hover td { background:var(--paper-2); }
.table-mock td:first-child { font-weight:600; color:var(--ink-900); }

/* comparison table (pricing) */
.cmp { width:100%; border-collapse:collapse; min-width:720px; }
.cmp th,.cmp td { padding:.875rem 1rem; border-bottom:1px solid var(--line); font-size:.875rem; text-align:center; }
.cmp th:first-child,.cmp td:first-child { text-align:left; color:var(--ink-700); }
.cmp thead th { vertical-align:bottom; border-bottom:1px solid var(--line-strong); }
.cmp .cmp-group td { background:var(--paper-2); font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-500); }
.cmp .col-hl { background:var(--paper-2); }
.cmp-yes,.cmp-no { display:inline-grid; place-items:center; width:20px; height:20px; border-radius:5px; font-size:.75rem; }
.cmp-yes { background:var(--ink-900); color:var(--paper); }
.cmp-no { background:var(--paper-3); color:var(--ink-400); }

/* --- code panel ---------------------------------------------------------- */

.code-panel { background:var(--paper-3); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.code-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.625rem .875rem; border-bottom:1px solid var(--line); }
.code-tabs { display:flex; gap:.25rem; }
.code-tab { font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-500); background:none; border:0; padding:.3rem .55rem; border-radius:var(--r-sm); cursor:pointer; }
.code-tab[aria-selected="true"] { background:var(--paper); color:var(--ink-900); box-shadow:var(--shadow-xs); }
.code-panel pre { margin:0; padding:1.125rem; overflow-x:auto; font-family:var(--font-mono); font-size:.8125rem; line-height:1.65; color:var(--ink-700); }
.code-panel pre b { color:var(--ink-900); font-weight:500; }
.code-panel pre .s { color:var(--brand); }
.code-panel pre .c { color:var(--ink-400); }
.copy-btn { font-size:.75rem; color:var(--ink-500); background:none; border:1px solid var(--line); border-radius:var(--r-sm); padding:.25rem .5rem; cursor:pointer; }
.copy-btn:hover { color:var(--ink-900); background:var(--paper); }

/* --- misc components ---------------------------------------------------- */

.provider-chip { display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .875rem; border:1px solid var(--line); border-radius:var(--r-pill); font-size:.8125rem; color:var(--ink-700); background:var(--paper); }
.growth-rail { display:grid; grid-template-columns:repeat(4,1fr); gap:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.growth-cell { padding:1.25rem; border-right:1px solid var(--line); }
.growth-cell:last-child { border-right:0; }
.growth-cell.is-now { background:var(--brand-wash); }
@media (max-width:639px) { .growth-rail { grid-template-columns:repeat(2,1fr); } .growth-cell:nth-child(2) { border-right:0; } .growth-cell:nth-child(-n+2) { border-bottom:1px solid var(--line); } }

.bar-row { display:grid; grid-template-columns:minmax(88px,auto) 1fr auto; gap:.875rem; align-items:center; }
.bar-track { display:block; height:8px; background:var(--paper-3); border-radius:var(--r-pill); overflow:hidden; }
.bar-fill { display:block; height:100%; border-radius:var(--r-pill); background:var(--ink-900); transform-origin:left center; }
.bar-fill.is-ok { background:var(--ok); }
.bar-fill.is-warn { background:var(--warn); }
.bar-fill.is-bad { background:var(--bad); }
.bar-fill.is-mute { background:var(--line-strong); }

.preview-frame { border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); overflow:hidden; }
.preview-bar { display:flex; align-items:center; gap:.4rem; padding:.6rem .875rem; border-bottom:1px solid var(--line); background:var(--paper-2); }
.preview-dot { width:8px; height:8px; border-radius:50%; background:var(--line-strong); }

.kv { display:grid; gap:0; }
.kv-row { display:flex; justify-content:space-between; gap:1rem; padding:.7rem 0; border-bottom:1px solid var(--line); font-size:.875rem; }
.kv-row:last-child { border-bottom:0; }
.kv-row dt { color:var(--ink-500); }
.kv-row dd { margin:0; color:var(--ink-900); font-weight:500; text-align:right; }

.check-list { list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.check-list li { display:flex; gap:.625rem; align-items:flex-start; font-size:.9375rem; color:var(--ink-700); }
.check-list li::before {
  content:"✓"; flex:none; width:18px; height:18px; border-radius:50%;
  background:var(--ok-wash); color:var(--ok); font-size:.625rem;
  display:grid; place-items:center; margin-top:.28rem;
}
.limit-list li::before { content:"!"; background:var(--warn-wash); color:var(--warn); font-weight:600; }

/* legal / prose page */
.legal-prose { max-width:68ch; }
.legal-prose h2 { font-family:var(--font-sans); font-weight:600; font-size:1.25rem; letter-spacing:-.015em; margin:2.5rem 0 .75rem; }
.legal-prose h3 { font-size:1rem; margin:1.75rem 0 .5rem; }
.legal-prose p,.legal-prose ul,.legal-prose ol { margin:0 0 1rem; color:var(--ink-700); }
.legal-prose ul,.legal-prose ol { padding-left:1.25rem; }
.legal-prose li { margin-bottom:.5rem; }
.legal-prose strong { color:var(--ink-900); font-weight:600; }
.toc { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.toc a { font-size:.875rem; color:var(--ink-500); }
.toc a:hover { color:var(--ink-900); }

/* --- motion -------------------------------------------------------------- */

.reveal { opacity:0; transform:translateY(12px); }
.reveal.is-in { opacity:1; transform:none; transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal-stagger > * { opacity:0; transform:translateY(12px); }
.reveal-stagger.is-in > * { opacity:1; transform:none; transition:opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
.reveal-stagger.is-in > *:nth-child(2) { transition-delay:60ms; }
.reveal-stagger.is-in > *:nth-child(3) { transition-delay:120ms; }
.reveal-stagger.is-in > *:nth-child(4) { transition-delay:180ms; }
.reveal-stagger.is-in > *:nth-child(5) { transition-delay:240ms; }
.reveal-stagger.is-in > *:nth-child(6) { transition-delay:300ms; }

@keyframes railPulse { 0%,100% { box-shadow:0 0 0 4px var(--ok-wash); } 50% { box-shadow:0 0 0 7px var(--ok-wash); } }
.rail.is-in .rail-node.is-now { animation:railPulse 1.4s var(--ease-in-out) 2; }
.rail .rail-seg.is-done { transform:scaleX(0); }
/* segments sit at even child positions: node,seg,node,seg,… */
.rail.is-in .rail-seg.is-done { transform:scaleX(1); transition:transform 600ms var(--ease-out); }
.rail.is-in .rail-track > :nth-child(4).is-done { transition-delay:120ms; }
.rail.is-in .rail-track > :nth-child(6).is-done { transition-delay:240ms; }
.rail.is-in .rail-track > :nth-child(8).is-done { transition-delay:360ms; }
.rail.is-in .rail-track > :nth-child(10).is-done { transition-delay:480ms; }

.bar-fill { transform:scaleX(0); }
.is-in .bar-fill { transform:scaleX(1); transition:transform 700ms var(--ease-out); }

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal,.reveal-stagger > * { opacity:1 !important; transform:none !important; }
  .rail-seg.is-done,.bar-fill { transform:scaleX(1) !important; }
}

/* --- touch targets ------------------------------------------------------- */
/* Icon buttons and footer links are visually small; on touch devices give them
   a 44px hit area without changing how they look. */
@media (pointer:coarse) {
  .icon-btn { width:44px; height:44px; }
  .footer-list a, .toc a { display:inline-block; padding-block:.35rem; }
  .copy-btn { padding:.5rem .75rem; }
}

/* --- print --------------------------------------------------------------- */

@media print {
  .site-header,.site-footer,.drawer,.drawer-backdrop,.skip-link { display:none !important; }
  body { color:#000; background:#fff; }
  .card-data,.card-outline { box-shadow:none; border-color:#ccc; }
}

/* Appearance menu */
.theme-menu { min-width:280px; padding:.55rem; }
.theme-menu-title { margin:.2rem .45rem .45rem; color:var(--ink-500); font-size:.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.theme-option { width:100%; display:grid; grid-template-columns:32px 1fr 20px; align-items:center; gap:.65rem; padding:.65rem .6rem; border:0; border-radius:10px; background:transparent; color:var(--ink-700); cursor:pointer; font:inherit; text-align:left; transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.theme-option:hover { background:var(--paper-3); color:var(--ink-900); }
.theme-option[aria-checked="true"] { background:var(--brand-wash); color:var(--brand-ink); }
.theme-option-icon { width:32px; height:32px; display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; background:var(--paper); color:var(--ink-700); }
.theme-option[aria-checked="true"] .theme-option-icon { border-color:color-mix(in srgb, var(--brand) 28%, var(--line)); background:var(--paper); color:var(--brand); }
.theme-option-copy { display:grid; gap:.08rem; }
.theme-option-copy strong { font-size:.875rem; font-weight:600; line-height:1.2; }
.theme-option-copy small { color:var(--ink-500); font-size:.75rem; line-height:1.3; }
.theme-option-check { opacity:0; color:var(--brand); }
.theme-option[aria-checked="true"] .theme-option-check { opacity:1; }
.theme-accent-group { margin-top:.4rem; padding:.65rem .45rem .1rem; border-top:1px solid var(--line); }
.theme-accent-group .theme-menu-title { margin:.1rem 0 .45rem; }
.theme-accent-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.35rem; }
.theme-accent-options .accent-option { width:100%; text-align:left; }
/* Early access */
.early-access-section { min-height:calc(100dvh - var(--nav-h) - 180px); display:grid; align-items:center; }
.early-access-grid { display:grid; gap:3rem; align-items:center; max-width:1050px; margin-inline:auto; }
.early-access-card { max-width:510px; width:100%; justify-self:center; }
.early-access-form { margin-top:1.75rem; }
.early-access-input { width:100%; margin-top:.55rem; padding:.82rem .95rem; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--paper); color:var(--ink-900); font:inherit; outline:0; transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.early-access-input::placeholder { color:var(--ink-400); }
.early-access-input:focus { border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.early-access-input.is-invalid { border-color:var(--bad); }
.early-access-error { margin:.55rem 0 0; color:var(--bad); font-size:.8125rem; }
.early-access-success { margin-bottom:1.35rem; padding:.8rem .9rem; border:1px solid color-mix(in srgb, var(--brand) 28%, var(--line)); border-radius:var(--r-sm); background:var(--brand-wash); color:var(--brand-ink); font-size:.875rem; line-height:1.5; }
@media (min-width:900px) { .early-access-grid { grid-template-columns:1.05fr .95fr; gap:5rem; } .early-access-card { justify-self:end; } }
/* Early Access card alignment */
.early-access-card .card-data-head { align-items:flex-start; }
.early-access-card .badge { flex:0 0 auto; white-space:nowrap; }
.early-access-form { margin-top:0; }
.early-access-success + .early-access-form { margin-top:1rem; }
.early-access-form label { display:block; margin:0; }
.early-access-form .early-access-input { margin-top:.4rem; }
/* Bloomod logo */
.brand-logo-wrap { width:32px; height:32px; display:block; flex:none; }
.brand-logo { display:block; width:100%; height:100%; object-fit:contain; }
.brand-logo-on-dark { display:none; }
html.dark .brand-logo-on-light { display:none; }
html.dark .brand-logo-on-dark { display:block; }
.site-footer .brand-logo-wrap { width:40px; height:40px; }