/* BrilliantOS — Calm Premium Editorial
   Design tokens + global styles */

:root {
  /* Palette: Coral (default) — bright, modern, clean */
  --bg:        oklch(0.990 0.004 250);
  --bg-2:      oklch(0.970 0.006 250);
  --bg-3:      oklch(0.940 0.008 250);
  --ink:       oklch(0.180 0.020 260);
  --ink-2:     oklch(0.320 0.020 260);
  --muted:     oklch(0.540 0.018 260);
  --faint:     oklch(0.740 0.014 260);
  --rule:      oklch(0.920 0.008 250);
  --rule-2:    oklch(0.860 0.010 250);
  --accent:    oklch(0.685 0.190 28);
  --accent-2:  oklch(0.580 0.205 28);
  --accent-soft: oklch(0.955 0.045 35);
  --ok:        oklch(0.660 0.140 160);
  --warn:      oklch(0.700 0.165 45);

  /* Type */
  --display: 'Instrument Serif', 'Newsreader', Georgia, serif;
  --sans:    'Geist', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Scale */
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px;
  --pad: 120px;
  --maxw: 1320px;
}

[data-palette="forest"] {
  --accent:    oklch(0.680 0.155 168);
  --accent-2:  oklch(0.560 0.165 168);
  --accent-soft: oklch(0.950 0.045 168);
}
[data-palette="ink"] {
  --accent:    oklch(0.620 0.180 265);
  --accent-2:  oklch(0.520 0.200 265);
  --accent-soft: oklch(0.955 0.030 265);
}

[data-theme="dark"] {
  --bg:        oklch(0.165 0.020 265);
  --bg-2:      oklch(0.215 0.020 265);
  --bg-3:      oklch(0.260 0.020 265);
  --ink:       oklch(0.970 0.006 250);
  --ink-2:     oklch(0.880 0.008 250);
  --muted:     oklch(0.680 0.015 250);
  --faint:     oklch(0.480 0.018 250);
  --rule:      oklch(0.300 0.020 265);
  --rule-2:    oklch(0.360 0.020 265);
  --accent:    oklch(0.780 0.175 32);
  --accent-2:  oklch(0.840 0.140 32);
  --accent-soft: oklch(0.300 0.080 30);
}
[data-theme="dark"][data-palette="forest"] {
  --accent:    oklch(0.800 0.140 168);
  --accent-2:  oklch(0.870 0.110 168);
  --accent-soft: oklch(0.280 0.060 168);
}
[data-theme="dark"][data-palette="ink"] {
  --accent:    oklch(0.780 0.150 265);
  --accent-2:  oklch(0.860 0.120 265);
  --accent-soft: oklch(0.300 0.080 265);
}

[data-display="sans"] {
  --display: 'Geist', ui-sans-serif, system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body[data-density="compact"] { --pad: 88px; }
body[data-density="comfy"]   { --pad: 160px; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Layout primitives */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 40px;
}
.section { padding: var(--pad) 0; border-top: 0.5px solid var(--rule); }
.section.no-rule { border-top: 0; }
.section.tight { padding: calc(var(--pad) * 0.6) 0; }

/* Typography */
.eyebrow {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 10px;
  border: 0.5px solid var(--rule-2);
  border-radius: 999px;
  background: var(--bg-2);
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
}
.display {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: balance;
}
.h1 { font-size: clamp(56px, 8.2vw, 128px); }
.h2 { font-size: clamp(40px, 5.6vw, 80px); }
.h3 { font-size: clamp(28px, 3.4vw, 48px); }
.lede {
  font-size: 20px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 56ch;
  text-wrap: pretty;
}
.italic { font-style: italic; }

.mono { font-family: var(--mono); }
.small { font-size: 13px; }
.tiny  { font-size: 11px; }

.muted { color: var(--muted); }
.faint { color: var(--faint); }
.accent { color: var(--accent); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  border: 0.5px solid transparent;
  transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn.primary {
  background: var(--ink);
  color: var(--bg);
}
.btn.primary:hover {
  background: var(--accent-2);
}
.btn.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-2);
}
.btn.secondary:hover {
  border-color: var(--ink);
}
.btn .arrow {
  display: inline-block;
  transition: transform .2s ease;
}
.btn:hover .arrow { transform: translateX(3px); }

/* Nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklch, var(--bg) 88%, transparent);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border-bottom: 0.5px solid var(--rule);
}
.nav-inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: -0.02em;
}
.brand-mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--accent), var(--ink) 80%);
  position: relative;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  background: var(--bg);
}
.nav-links {
  display: flex;
  gap: 28px;
  font-size: 14px;
  color: var(--ink-2);
}
.nav-links a:hover { color: var(--accent); }

/* Hero grid backdrop */
.grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--rule) .5px, transparent .5px);
  background-size: calc(100% / 12) 100%;
  mask-image: linear-gradient(to bottom, transparent, black 20%, black 80%, transparent);
  opacity: .35;
}

/* Cards & rules */
.card {
  background: var(--bg-2);
  border: 0.5px solid var(--rule);
  border-radius: var(--r-3);
}
.divider {
  height: 0.5px;
  background: var(--rule);
  width: 100%;
}

/* Terminal */
.terminal {
  background: oklch(0.180 0.020 265);
  color: oklch(0.940 0.008 250);
  border-radius: var(--r-3);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
  overflow: hidden;
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.04) inset;
}
.terminal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 0.5px solid rgba(255,255,255,.08);
}
.terminal-head .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.18);
}
.terminal-head .dot.r { background: oklch(0.62 0.13 30); }
.terminal-head .dot.y { background: oklch(0.78 0.13 80); }
.terminal-head .dot.g { background: oklch(0.68 0.11 150); }
.terminal-body {
  padding: 18px 20px;
  min-height: 280px;
}
.terminal .prompt { color: oklch(0.65 0.13 60); }
.terminal .ok     { color: oklch(0.72 0.11 150); }
.terminal .key    { color: oklch(0.78 0.10 220); }
.terminal .str    { color: oklch(0.82 0.12 80); }
.terminal .dim    { color: oklch(0.55 0.012 75); }
.terminal .cursor {
  display: inline-block;
  width: 7px; height: 14px;
  background: oklch(0.92 0.008 75);
  vertical-align: -2px;
  animation: blink 1s steps(2,end) infinite;
  margin-left: 2px;
}
@keyframes blink { 50% { opacity: 0; } }

/* Generic in-view reveal */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* Marquee */
.marquee {
  display: flex;
  overflow: hidden;
  gap: 60px;
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.marquee-track {
  display: flex;
  gap: 60px;
  animation: marquee 40s linear infinite;
  flex-shrink: 0;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* Tag chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 0.5px solid var(--rule-2);
  background: var(--bg-2);
  font-size: 12px;
  color: var(--ink-2);
  font-family: var(--mono);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Pricing tier Roman numeral — mono so it reads as I/II/III, not slashes */
.tier-roman {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.chip .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}

/* Use-case detail flow strip */
.uc-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 8px;
}
.uc-flow-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-2);
  border: 0.5px solid var(--rule);
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
}
.uc-flow-step[data-final="true"] {
  background: var(--accent-soft);
  border-color: color-mix(in oklch, var(--accent) 50%, var(--rule));
  color: var(--ink);
}
.uc-flow-arrow {
  color: var(--faint);
  font-size: 14px;
  font-family: var(--mono);
}

/* How it works — phase meta (Roman numeral + span). Mobile only. */
.phase-meta {
  display: none;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.phase-numeral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.phase-numeral[data-partner="true"] {
  border-color: var(--ink);
  color: var(--ink);
}

/* Scrollbar (subtle) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
/* MOBILE                                                                  */
/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 820px) {
  :root {
    --pad: 56px;
    --maxw: 100%;
  }
  body { font-size: 15px; }
  body[data-density="compact"] { --pad: 44px; }
  body[data-density="comfy"]   { --pad: 72px; }

  .container { padding: 0 20px; }
  .section { padding: var(--pad) 0; }

  /* Typography */
  .h1 { font-size: clamp(40px, 11vw, 64px) !important; }
  .h2 { font-size: clamp(34px, 8vw, 52px) !important; }
  .h3 { font-size: clamp(24px, 6vw, 36px) !important; }
  .lede { font-size: 17px; max-width: 100%; }

  /* Nav — hide the menu links, keep brand + book button */
  .nav-inner { height: 56px; }
  .nav-links { display: none; }
  .nav-inner > div:last-child > a:first-child { display: none; } /* hide "Sign in" */
  .nav .btn { padding: 10px 14px; font-size: 13px; }
  .brand { font-size: 18px; }

  /* Universal: collapse any inline grid layout to single column inside main sections */
  main [style*="grid-template-columns"]:not(.no-collapse) {
    grid-template-columns: 1fr !important;
  }
  main [style*="gridTemplateColumns"]:not(.no-collapse) {
    grid-template-columns: 1fr !important;
  }
  /* Cap gaps on collapsed grids */
  main [style*="gap: 60"], main [style*="gap:60"],
  main [style*="gap: 80"], main [style*="gap:80"],
  main [style*="gap: 48"], main [style*="gap:48"] {
    gap: 32px !important;
  }

  /* Hero CTA row — keep horizontal but allow wrap, full-width buttons */
  .btn { padding: 12px 18px; font-size: 13px; }
  .btn.primary, .btn.secondary {
    width: 100%;
    justify-content: center;
  }
  .nav .btn { width: auto; }
  /* Inline button groups inside <Reveal><div style="flex...> rows */
  main div[style*="display: flex"][style*="gap: 12"] > .btn,
  main div[style*="display: flex"][style*="gap: 14"] > .btn {
    flex: 1 1 auto;
  }

  /* Grid lines backdrop — looks busy on mobile */
  .grid-lines { opacity: .15; background-size: calc(100% / 6) 100%; }

  /* Marquee — smaller, less scroll */
  .marquee, .marquee-track { gap: 28px; }
  .marquee .display { font-size: 18px !important; }

  /* Terminal hero block */
  .terminal { font-size: 11px; }
  .terminal-body { padding: 14px 14px; min-height: 200px; }
  .terminal-head { padding: 8px 10px; }

  /* Automate grid (4-col on desktop) → 2-col on mobile */
  #automate > .container > div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr 1fr !important;
  }
  /* Pipeline-snapshot 6-col → 3-col */
  main div[style*="grid-template-columns: repeat(6"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* How it works phases — already collapsed to 1col by universal rule. Restore borders */
  .phase-cell {
    border-right: none !important;
    border-bottom: 0.5px solid var(--rule);
    padding: 28px 0 !important;
  }
  .phase-cell:last-child { border-bottom: none; }
  .phase-cell h3.display {
    font-size: 28px !important;
    margin: 0 0 10px !important;
  }
  .phase-cell ul { margin-top: 18px !important; }
  /* Hide the horizontal desktop journey track on mobile; the meta row in each card replaces it */
  .how-journey { display: none !important; }
  .phase-meta { display: flex !important; }

  /* Use-case detail flow — tighten on mobile */
  .uc-detail { gap: 24px !important; margin-top: 32px !important; padding-top: 28px !important; }
  .uc-flow { gap: 8px 6px !important; }
  .uc-flow-step { padding: 8px 12px !important; font-size: 12px !important; }
  .uc-flow-arrow { font-size: 12px !important; }

  /* Pricing tiers — restore vertical dividers */
  #pricing div[style*="grid-template-columns: repeat(3"] > * {
    border-right: none !important;
    border-bottom: 0.5px solid var(--rule);
  }
  #pricing div[style*="grid-template-columns: repeat(3"] > *:last-child {
    border-bottom: none;
  }
  /* Smaller tier padding */
  #pricing div[style*="grid-template-columns: repeat(3"] > div {
    padding: 28px 22px !important;
  }
  #pricing div[style*="grid-template-columns: repeat(3"] .display[style*="font-size: 40"] {
    font-size: 32px !important;
  }
  #pricing div[style*="grid-template-columns: repeat(3"] .display[style*="font-size: 44"] {
    font-size: 32px !important;
  }
  #pricing div[style*="grid-template-columns: repeat(3"] .display[style*="font-size: 36"] {
    font-size: 28px !important;
  }
  /* Cohort banner — wrap nicely */
  #pricing > .container > div[style*="background: var(--ink)"] {
    flex-wrap: wrap !important;
    padding: 20px 22px !important;
    gap: 16px !important;
  }
  #pricing > .container > div[style*="background: var(--ink)"] .btn {
    width: 100% !important;
  }

  /* Comparison table on pricing.html — display as cards */
  section[style*="bg-2"] div[style*="grid-template-columns: 1.2fr 1.4fr 1.2fr 1.4fr"] {
    grid-template-columns: 1fr !important;
    padding: 18px 18px !important;
    gap: 6px !important;
  }
  section[style*="bg-2"] div[style*="grid-template-columns: 1.2fr 1.4fr 1.2fr 1.4fr"]:first-child {
    background: var(--ink) !important;
  }

  /* AutomateGrid + similar: cells collapse */
  .uc-cell {
    border-right: none !important;
    border-bottom: 0.5px solid var(--rule) !important;
    min-height: auto !important;
    padding: 20px 18px 22px !important;
  }
  .uc-cell .display {
    font-size: 22px !important;
    margin-top: 10px !important;
  }

  /* Use cases page — long rows stack cleanly */
  section[id="erp"] > .container > div,
  section[id="quotes"] > .container > div,
  section[id="crm"] > .container > div,
  section[id="finance"] > .container > div,
  section[id="pm"] > .container > div,
  section[id="hr"] > .container > div,
  section[id="leads"] > .container > div {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  section[id="erp"], section[id="quotes"], section[id="crm"],
  section[id="finance"], section[id="pm"], section[id="hr"], section[id="leads"] {
    padding: 56px 0 !important;
  }
  section[id="erp"] h2.display,
  section[id="quotes"] h2.display,
  section[id="crm"] h2.display,
  section[id="finance"] h2.display,
  section[id="pm"] h2.display,
  section[id="hr"] h2.display,
  section[id="leads"] h2.display {
    font-size: 36px !important;
  }

  /* Inside-use-case dual lists (replaces / does) → 1-col */
  main div[style*="grid-template-columns: 1fr 1fr"][style*="gap: 40"] {
    gap: 24px !important;
  }

  /* Before/After timeline rows: tighten the 3-col tracks */
  .card div[style*="grid-template-columns: 90px 110px 1fr"] {
    grid-template-columns: 70px 90px 1fr !important;
    gap: 10px !important;
    padding: 12px 16px !important;
    font-size: 12px;
  }
  .card div[style*="grid-template-columns: 90px 110px 1fr"] .small {
    font-size: 12px !important;
  }
  /* Before/After mode toggle — wider buttons */
  div[style*="border-radius: 999"][style*="0.5px solid var(--rule-2)"] button {
    padding: 8px 14px !important;
    font-size: 11px !important;
  }

  /* ROI calculator inner padding */
  #roi .card > div { padding: 24px 20px !important; }
  #roi .card .display[style*="font-size: 56"] { font-size: 40px !important; }
  #roi .card .display[style*="font-size: 30"] { font-size: 22px !important; }

  /* Metric rows in Before/After + ROI */
  .card div[style*="grid-template-columns: 1fr auto"] {
    grid-template-columns: 1fr auto !important;
  }

  /* Live preview — hide URL bar, simplify chrome */
  #preview div[style*="border: 1px solid var(--rule-2)"][style*="border-radius: 16"] > div:first-child > div[style*="font-family: var(--mono)"] {
    font-size: 10px;
  }

  /* Hide desktop iframe demo entirely on mobile — the React component already detects this,
     but if any leftover desktop iframe slips through, force-hide it on narrow screens */
  #preview iframe[src="erp-demo.html"] { display: none; }

  /* Footer */
  footer[class*="section"] > .container > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  footer[class*="section"] > .container > div:last-child {
    flex-direction: column !important;
    gap: 12px;
    text-align: left;
    align-items: flex-start !important;
  }

  /* CaseStudies / Why BrilliantOS 2-col grid → 1-col */
  #cases > .container > div[style*="grid-template-columns: 1fr 1fr"][style*="border-radius: 16"] > div {
    border-right: none !important;
    border-bottom: 0.5px solid var(--rule);
    padding: 28px 22px !important;
  }
  #cases > .container > div[style*="grid-template-columns: 1fr 1fr"][style*="border-radius: 16"] > div:last-child {
    border-bottom: none;
  }
  #cases h3.display { font-size: 22px !important; max-width: none !important; }

  /* Founding-cohort footer strip on Why BrilliantOS */
  #cases > .container > div[style*="border-radius: 14"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 18px 20px !important;
  }
  #cases > .container > div[style*="border-radius: 14"] > div {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  #cases > .container > div[style*="border-radius: 14"] .btn { width: 100% !important; }

  /* Inverted CTA section */
  #cta { padding: 64px 0 !important; }
  #cta .display { font-size: clamp(40px, 11vw, 72px) !important; }
  #cta div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  #cta > .container > div[style*="grid-template-columns"] { gap: 28px !important; }

  /* FAQ section on pricing — sticky title becomes static */
  section .container > div[style*="grid-template-columns: 1fr 2fr"] > div:first-child {
    position: static !important;
  }
  section .container > div[style*="grid-template-columns: 1fr 2fr"] {
    gap: 24px !important;
  }
  /* FAQ buttons */
  button[style*="padding: '28px 0'"] .display,
  button[style*="padding: '24px 28px'"] .display,
  button[style*="padding:'28px 0'"] .display {
    font-size: 17px !important;
  }

  /* Hero stat rows */
  main div[style*="grid-template-columns: 1fr auto"][style*="border-bottom: 0.5px solid var(--rule)"] {
    grid-template-columns: 1fr auto !important;
  }

  /* Book page: form panel padding */
  div[style*="background: var(--bg-2)"][style*="border-radius: 18"] {
    padding: 28px 22px !important;
  }

  /* Tweaks panel — keep but smaller on mobile */
  .twk-panel {
    right: 12px !important;
    bottom: 12px !important;
    width: 240px !important;
    transform: scale(0.92);
    transform-origin: bottom right;
  }

  /* Section reveals — disable transform on mobile so layout doesn't jiggle */
  .reveal { transform: none; transition: opacity .5s ease; }
  .reveal:not(.in) { opacity: .6; }

  /* Big italic accent spans in headings shouldn't break-line awkwardly */
  .display.italic { display: inline; }
}

/* Smaller phones — squeeze further */
@media (max-width: 420px) {
  .container { padding: 0 16px; }
  :root { --pad: 44px; }
  .h1 { font-size: clamp(36px, 12vw, 56px) !important; }
  .h2 { font-size: clamp(30px, 9vw, 44px) !important; }
  .terminal { font-size: 10.5px; line-height: 1.5; }
  .marquee .display { font-size: 16px !important; }
  /* Automate grid back to 1-col on tiny */
  #automate > .container > div[style*="grid-template-columns: repeat(4"] {
    grid-template-columns: 1fr !important;
  }
  /* Pipeline snapshot 6 → 2 */
  main div[style*="grid-template-columns: repeat(6"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}