/*
 * theme.css — FlowAI. Swiss grid system: square corners, hairline borders,
 * no shadow, one signal red reserved for large-scale moments. Warm paper
 * neutrals (never pure white/black) carry the rest.
 */

:root {
  --canvas: #fafafa;
  --surface: #fdfdfd;
  --surface-2: #f0f0ec;
  --border: #dcdcd5;
  --border-strong: #b6b6ac;
  --ink: #14140f;
  --muted: #676764;
  --accent: #14140f;
  --accent-hover: #2c2c24;
  --accent-ink: #fafafa;
  --accent-text: #c43725;
  --accent-strong: #14140f;
  --accent-soft: #f4e6e2;
  --accent-border: #e0bcb2;
  --success: #146c43;
  --success-ink: #ffffff;
  --success-soft: #e1ece4;
  --success-strong: #12613c;
  --warning: #a1580c;
  --warning-ink: #ffffff;
  --warning-soft: #f0e4d8;
  --warning-strong: #914e09;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f2dfdd;
  --danger-strong: #a81919;
  --chart-1: #c43725;
  --chart-2: #14140f;
  --chart-3: #676764;
  --chart-4: #8a6a5c;
  --chart-5: #5d6b5a;
  --chart-6: #4a5a6b;

  --font-display: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 800;
  --display-tracking: -0.03em;
  --eyebrow-tracking: 0.08em;

  --radius-btn: 0px;
  --radius-card: 0px;
  --radius-input: 0px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --shadow-card: none;
  --shadow-raised: 0 1px 0 0 var(--border);
  --shadow-btn: none;
  --card-pad: 1.75rem;
  --caps: uppercase;
  --caps-tracking: 0.06em;
  --btn-weight: 600;
  --measure: 62ch;

  /* A fixed brand constant for the closing statement band — deliberately
     the same in both modes, never the themed canvas/ink pair. */
  --x-band-bg: #14140f;
  --x-band-ink: #fafaf7;
  --x-band-muted: #8f8f86;
  --x-band-accent: #e0593f;
  --x-band-border: #2c2c22;
}

html[data-theme="dark"] {
  --canvas: #14140f;
  --surface: #1b1b15;
  --surface-2: #232319;
  --border: #34342a;
  --border-strong: #4c4c3e;
  --ink: #fafaf7;
  --muted: #a4a49c;
  --accent: #fafaf7;
  --accent-hover: #e6e6e0;
  --accent-ink: #14140f;
  --accent-text: #e35a44;
  --accent-strong: #fafaf7;
  --accent-soft: #2e211d;
  --accent-border: #533b33;
  --success: #3fa878;
  --success-ink: #0c1f16;
  --success-soft: #1b2e24;
  --success-strong: #6fc79c;
  --warning: #cf8a4a;
  --warning-ink: #221202;
  --warning-soft: #332412;
  --warning-strong: #e0a670;
  --danger: #d5665b;
  --danger-ink: #250c0a;
  --danger-soft: #35201d;
  --danger-strong: #e28a80;
  --chart-1: #e35a44;
  --chart-2: #fafaf7;
  --chart-3: #a4a49c;
  --chart-4: #b79485;
  --chart-5: #8ea28a;
  --chart-6: #7e93a8;

  /* Same fixed values as :root — the band never themes. */
  --x-band-bg: #14140f;
  --x-band-ink: #fafaf7;
  --x-band-muted: #8f8f86;
  --x-band-accent: #e0593f;
  --x-band-border: #2c2c22;
}

/*
 * app.css — FlowAI's own styling. The strict 12-column hairline frame, the
 * plate index labels, the workspace mockup in the hero, the fixed dark
 * statement band, the how-it-works connector, and the capability-row
 * stagger. Everything else is primitives + utilities. Tokens only.
 */

/* ---- The frame ---------------------------------------------------------
   A hairline rail runs the full height of the page on wide screens; every
   section sits inside it and is separated from the next by a single
   hairline (the "plate" boundary), so the grid reads as one strict column
   from the hero to the footer. */
.rail {
  max-width: 90rem;
  margin-inline: auto;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
@media (max-width: 64rem) {
  .rail { border-left: 0; border-right: 0; }
}

.plate { border-top: 1px solid var(--border); }
.plate-index {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}

/* ---- Hero workspace mockup ---------------------------------------------
   The product itself: a reordered task list, alive with plausible data.
   No screenshot — drawn from the design tokens so it always matches. */
.workspace-mock {
  border: 1px solid var(--border);
  background: var(--surface);
}
.workspace-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-top: 1px solid var(--border);
  padding: 0.9rem 1.25rem;
}
.workspace-row:first-of-type { border-top: 0; }
.workspace-row .wr-i { font-family: var(--font-mono); font-size: 0.75rem; color: var(--muted); width: 1.25rem; flex-shrink: 0; }
.workspace-row .wr-name { flex: 1 1 auto; font-size: 0.9rem; font-weight: 500; min-width: 0; }
.workspace-row .wr-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}
.workspace-row .wr-flag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  flex-shrink: 0;
}
.workspace-row .wr-dot {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--ink);
  margin-right: 0.4rem;
  flex-shrink: 0;
}

/* ---- How-it-works connector ---------------------------------------------
   A single hairline runs behind the four steps on wide screens; on narrow
   screens it turns vertical. */
.step-row { position: relative; }
.step-row::before {
  content: "";
  position: absolute;
  top: 0.65rem;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}
@media (max-width: 48rem) {
  .step-row::before { left: 0.65rem; top: 0; bottom: 0; right: auto; width: 1px; height: auto; }
}

/* ---- Fixed dark statement band -------------------------------------------
   The closing CTA is deliberately the same ink in both colour modes — a
   brand constant, not a themed surface — so it reads from its own --x-band-*
   tokens (declared in theme.css, identical in both modes) rather than the
   palette tokens, which stay untouched here for the mode that is on screen. */
.band-dark {
  background: var(--x-band-bg);
  color: var(--x-band-ink);
}
.band-dark.plate { border-top-color: var(--x-band-border); }
.band-dark .accent-band { color: var(--x-band-accent); }

/* The closing CTA's own filled button — not .btn, so the band never has to
   re-point the shared --accent tokens the rest of the page relies on. */
.band-btn {
  display: inline-flex;
  height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-inline: 1.5rem;
  border: 1px solid var(--x-band-ink);
  background: var(--x-band-ink);
  color: var(--x-band-bg);
  font-size: 1rem;
  font-weight: var(--btn-weight, 600);
  text-transform: var(--caps, none);
  letter-spacing: var(--caps-tracking, 0);
  text-decoration: none;
  transition: opacity 150ms;
}
.band-btn:hover { opacity: 0.82; }

/* ---- Pricing billing toggle ----------------------------------------------
   One designed device on an otherwise plain table: a switch, not a pair of
   tabs, so both prices can be read at a glance. */
#pricing-table:not(.is-annual) [data-annual] { display: none; }
#pricing-table.is-annual [data-monthly] { display: none; }

/* ---- Capability-row stagger (the ONE grid that moves) --------------------
   Rows rest fully visible; app.js adds .stagger-play once the block enters
   view, and that class alone owns the keyframe — a script failure never
   hides anything. */
.cap-row { opacity: 1; transform: none; }
.cap-row.stagger-play {
  animation: cap-fade-up 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}
@keyframes cap-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
html.reduced-motion .cap-row.stagger-play { animation: none; }

/* ---- Mono figures ---------------------------------------------------------- */
.metric-figure {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--accent-text);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

/* ---- Nav mobile menu ------------------------------------------------------- */
.nav-menu { min-width: 14rem; }