/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* ---- Marketing — Blazer brand tokens (distinct from product-app amber) ---- */
:root {
  --bz-orange: #FF9900;
  --bz-orange-light: #FFB84D;
  --bz-orange-dark: #A85C00;
  --bz-navy: #0D172B;
  --bz-navy-mid: #14213d;
  --bz-surface: #fafaf9;
  --bz-card: #ffffff;
  --bz-border: #e7e5e4;
  --bz-text: #1c1917;
  --bz-text-muted: #78716c;
  --bz-text-body: #3f4857;
  --bz-slate-100: #cbd5e1;
  --bz-slate-200: #94a3b8;
  --bz-slate-300: #64748b;
  --bz-slate-400: #475569;
  --bz-slate-500: #334155;

  /* Breakpoints (reference values for JS/media-query authoring) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* Container gutter — scales from 20px on phones to 32px on desktop */
  --gutter: clamp(20px, 4vw, 32px);

  /* Marketing section vertical rhythm — 64px on mobile, 120px on desktop */
  --section-py: clamp(64px, 10vw, 120px);

  /* Fluid marketing type scale — min / preferred / max */
  --fs-hero-xl:        clamp(40px, 7.5vw, 78px);
  --fs-hero-lg:        clamp(36px, 6.5vw, 68px);
  --fs-hero-md:        clamp(34px, 6vw,   62px);
  --fs-marketing-h2:   clamp(30px, 4.2vw, 46px);
  --fs-marketing-h3:   clamp(26px, 3.6vw, 40px);
  --fs-marketing-lead: clamp(16px, 1.6vw, 19px);
}

/* ---- Responsive utilities — marketing surfaces must behave down to 360px.
   minmax(0, 1fr) is load-bearing: without it, children with long mono
   strings (commands, IDs, file paths) blow out grid tracks and cause
   horizontal page scroll on narrow viewports. */
.ds-container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  box-sizing: border-box;
}

.ds-grid-split,
.ds-grid-2col,
.ds-grid-3col {
  display: grid;
  gap: 20px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .ds-grid-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ds-grid-3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ds-grid-split {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }
}

/* Belt-and-braces — page never scrolls sideways. Any overflow is a bug;
   this contains it gracefully. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Marketing headlines balance + never force overflow on narrow viewports */
.ds-headline {
  text-wrap: balance;
  overflow-wrap: break-word;
  word-break: break-word;
}

img, svg, video, canvas { max-width: 100%; height: auto; }

/* The user-agent [hidden] rule loses to inline `display: flex/grid/inline-block`,
   which leaks initial-hidden panels (e.g. the waitlist confirmation card) onto
   the page. Force it so `hidden` stays reliable regardless of inline style. */
[hidden] { display: none !important; }

/* ---- Marketing animations (shared across terminal demos & agent switcher) ---- */
@keyframes bzFade { from { opacity: 0; transform: translateY(2px);} to { opacity: 1; transform: none;} }
@keyframes bzBlink { 50% { opacity: 0; } }
@keyframes bzDiffSlide { from { opacity: 0; transform: translateX(-4px);} to { opacity: 1; transform: none;} }

.bz-fade-in { opacity: 0; animation: bzFade 0.25s ease-out forwards; }
.bz-blink { animation: bzBlink 1s step-end infinite; }
.bz-diff-slide { opacity: 0; animation: bzDiffSlide 0.3s ease-out forwards; }

/* Hover lift on marketing CTAs — applied via class so inline-style pages can opt-in. */
.bz-lift { transition: transform 0.15s ease, box-shadow 0.15s ease; }
.bz-lift:hover { transform: translateY(-1px); }

/* ---- Agent switcher tabs — active state driven by data-active attribute
       so the Stimulus controller can toggle it without touching inline styles. */
.bz-agent-tab { background: transparent; color: #cbd5e1; }
.bz-agent-tab[data-active="true"] { background: #fff; color: #0D172B; }
.bz-agent-tab[data-active="true"] .bz-agent-mark-inactive,
.bz-agent-tab[data-active="false"] .bz-agent-mark-active { display: none; }
.bz-agent-tab[data-active="true"] .bz-agent-status-live { background: rgba(22,163,74,0.12); }
.bz-agent-tab[data-active="false"] .bz-agent-status-live { background: rgba(22,163,74,0.16); }
.bz-agent-tab[data-active="true"] .bz-agent-status-soon { background: rgba(255,153,0,0.15); }
.bz-agent-tab[data-active="false"] .bz-agent-status-soon { background: rgba(255,153,0,0.14); }

/* ---- Install command block — click-to-copy card with wave + toast ---- */
.bz-install-row {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  width: 100%;
  cursor: pointer;
  user-select: none;
  background: transparent;
  transition: background 120ms ease;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
}
.bz-install-row[data-theme="light"]:hover,
.bz-install-row[data-theme="light"]:focus-visible { background: rgba(255,153,0,0.05); }
.bz-install-row[data-theme="dark"]:hover,
.bz-install-row[data-theme="dark"]:focus-visible { background: rgba(255,153,0,0.06); }
.bz-install-row:focus-visible { outline: 2px solid rgba(255,153,0,0.5); outline-offset: -2px; }
.bz-install-row .bz-install-label { opacity: 0.45; transition: opacity 150ms ease; }
.bz-install-row:hover .bz-install-label,
.bz-install-row:focus-visible .bz-install-label { opacity: 1; }
.bz-install-label-resting,
.bz-install-label-pressed { display: inline-flex; align-items: center; gap: 5px; }
.bz-install-row[data-pressed="true"] .bz-install-label-resting,
.bz-install-row[data-pressed="false"] .bz-install-label-pressed { display: none; }

@keyframes cmdWave {
  0%   { transform: translateY(0) scale(1); filter: brightness(1); }
  35%  { transform: translateY(-1.5px) scale(1.008); filter: brightness(1.15); }
  65%  { transform: translateY(0) scale(1.004); filter: brightness(1.08); }
  100% { transform: translateY(0) scale(1); filter: brightness(1); }
}
@keyframes copyToastFly {
  0%   { opacity: 0; transform: translate(-50%, -90%); }
  15%  { opacity: 1; transform: translate(-50%, -100%); }
  70%  { opacity: 1; transform: translate(-50%, -115%); }
  100% { opacity: 0; transform: translate(-50%, -130%); }
}
.bz-cmd-wave { animation: cmdWave 1100ms cubic-bezier(0.22, 1, 0.36, 1); }

@media (prefers-reduced-motion: reduce) {
  .bz-cmd-wave,
  .bz-copy-toast { animation: none !important; }
  .bz-install-row { transition: none; }
  .bz-install-row .bz-install-label { transition: none; }
}

/* Visually-hidden live region for screen-reader announcements. */
.bz-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;
}

/* ---- Pipeline diagram (How It Works) — node/connector state driven by
       the wrapper's data-step so a Stimulus controller can advance it. ---- */
.bz-pipeline-node .bz-pipeline-chip {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.1);
  color: #60748D;
}
.bz-pipeline-node .bz-pipeline-label { color: #64748b; }
.bz-pipeline-node .bz-pipeline-sub { color: #475569; }
.bz-pipeline-node .bz-pipeline-connector { background: rgba(255,255,255,0.1); }
.bz-pipeline-node .bz-pipeline-connector-sweep { display: none; }

/* Completed steps: orange outline + dim orange fill */
.bz-pipeline[data-step="1"] .bz-pipeline-node[data-index="0"] .bz-pipeline-chip,
.bz-pipeline[data-step="2"] .bz-pipeline-node[data-index="0"] .bz-pipeline-chip,
.bz-pipeline[data-step="2"] .bz-pipeline-node[data-index="1"] .bz-pipeline-chip,
.bz-pipeline[data-step="3"] .bz-pipeline-node[data-index="0"] .bz-pipeline-chip,
.bz-pipeline[data-step="3"] .bz-pipeline-node[data-index="1"] .bz-pipeline-chip,
.bz-pipeline[data-step="3"] .bz-pipeline-node[data-index="2"] .bz-pipeline-chip,
.bz-pipeline[data-step="4"] .bz-pipeline-node[data-index="0"] .bz-pipeline-chip,
.bz-pipeline[data-step="4"] .bz-pipeline-node[data-index="1"] .bz-pipeline-chip,
.bz-pipeline[data-step="4"] .bz-pipeline-node[data-index="2"] .bz-pipeline-chip,
.bz-pipeline[data-step="4"] .bz-pipeline-node[data-index="3"] .bz-pipeline-chip {
  background: rgba(255,153,0,0.08);
  border: 1px solid rgba(255,153,0,0.3);
  color: #FF9900;
}

/* Completed connector fills orange */
.bz-pipeline[data-step="1"] .bz-pipeline-node[data-index="0"] .bz-pipeline-connector,
.bz-pipeline[data-step="2"] .bz-pipeline-node[data-index="0"] .bz-pipeline-connector,
.bz-pipeline[data-step="2"] .bz-pipeline-node[data-index="1"] .bz-pipeline-connector,
.bz-pipeline[data-step="3"] .bz-pipeline-node[data-index="0"] .bz-pipeline-connector,
.bz-pipeline[data-step="3"] .bz-pipeline-node[data-index="1"] .bz-pipeline-connector,
.bz-pipeline[data-step="3"] .bz-pipeline-node[data-index="2"] .bz-pipeline-connector,
.bz-pipeline[data-step="4"] .bz-pipeline-node[data-index="0"] .bz-pipeline-connector,
.bz-pipeline[data-step="4"] .bz-pipeline-node[data-index="1"] .bz-pipeline-connector,
.bz-pipeline[data-step="4"] .bz-pipeline-node[data-index="2"] .bz-pipeline-connector,
.bz-pipeline[data-step="4"] .bz-pipeline-node[data-index="3"] .bz-pipeline-connector { background: #FF9900; }

.bz-pipeline[data-step="1"] .bz-pipeline-node[data-index="0"] .bz-pipeline-label,
.bz-pipeline[data-step="2"] .bz-pipeline-node[data-index="0"] .bz-pipeline-label,
.bz-pipeline[data-step="2"] .bz-pipeline-node[data-index="1"] .bz-pipeline-label,
.bz-pipeline[data-step="3"] .bz-pipeline-node[data-index="0"] .bz-pipeline-label,
.bz-pipeline[data-step="3"] .bz-pipeline-node[data-index="1"] .bz-pipeline-label,
.bz-pipeline[data-step="3"] .bz-pipeline-node[data-index="2"] .bz-pipeline-label,
.bz-pipeline[data-step="4"] .bz-pipeline-node[data-index="0"] .bz-pipeline-label,
.bz-pipeline[data-step="4"] .bz-pipeline-node[data-index="1"] .bz-pipeline-label,
.bz-pipeline[data-step="4"] .bz-pipeline-node[data-index="2"] .bz-pipeline-label,
.bz-pipeline[data-step="4"] .bz-pipeline-node[data-index="3"] .bz-pipeline-label { color: #cbd5e1; }

.bz-pipeline[data-step="1"] .bz-pipeline-node[data-index="0"] .bz-pipeline-sub,
.bz-pipeline[data-step="2"] .bz-pipeline-node[data-index="0"] .bz-pipeline-sub,
.bz-pipeline[data-step="2"] .bz-pipeline-node[data-index="1"] .bz-pipeline-sub,
.bz-pipeline[data-step="3"] .bz-pipeline-node[data-index="0"] .bz-pipeline-sub,
.bz-pipeline[data-step="3"] .bz-pipeline-node[data-index="1"] .bz-pipeline-sub,
.bz-pipeline[data-step="3"] .bz-pipeline-node[data-index="2"] .bz-pipeline-sub,
.bz-pipeline[data-step="4"] .bz-pipeline-node[data-index="0"] .bz-pipeline-sub,
.bz-pipeline[data-step="4"] .bz-pipeline-node[data-index="1"] .bz-pipeline-sub,
.bz-pipeline[data-step="4"] .bz-pipeline-node[data-index="2"] .bz-pipeline-sub,
.bz-pipeline[data-step="4"] .bz-pipeline-node[data-index="3"] .bz-pipeline-sub { color: #94a3b8; }

/* Active step: bright orange ring + glow + sweeping connector */
.bz-pipeline[data-step="0"] .bz-pipeline-node[data-index="0"] .bz-pipeline-chip,
.bz-pipeline[data-step="1"] .bz-pipeline-node[data-index="1"] .bz-pipeline-chip,
.bz-pipeline[data-step="2"] .bz-pipeline-node[data-index="2"] .bz-pipeline-chip,
.bz-pipeline[data-step="3"] .bz-pipeline-node[data-index="3"] .bz-pipeline-chip,
.bz-pipeline[data-step="4"] .bz-pipeline-node[data-index="4"] .bz-pipeline-chip {
  background: rgba(255,153,0,0.15);
  border: 1.5px solid #FF9900;
  color: #FF9900;
  box-shadow: 0 0 30px rgba(255,153,0,0.35), 0 0 0 6px rgba(255,153,0,0.1);
}
.bz-pipeline[data-step="0"] .bz-pipeline-node[data-index="0"] .bz-pipeline-label,
.bz-pipeline[data-step="1"] .bz-pipeline-node[data-index="1"] .bz-pipeline-label,
.bz-pipeline[data-step="2"] .bz-pipeline-node[data-index="2"] .bz-pipeline-label,
.bz-pipeline[data-step="3"] .bz-pipeline-node[data-index="3"] .bz-pipeline-label,
.bz-pipeline[data-step="4"] .bz-pipeline-node[data-index="4"] .bz-pipeline-label { color: #fff; }

.bz-pipeline[data-step="0"] .bz-pipeline-node[data-index="0"] .bz-pipeline-connector-sweep,
.bz-pipeline[data-step="1"] .bz-pipeline-node[data-index="1"] .bz-pipeline-connector-sweep,
.bz-pipeline[data-step="2"] .bz-pipeline-node[data-index="2"] .bz-pipeline-connector-sweep,
.bz-pipeline[data-step="3"] .bz-pipeline-node[data-index="3"] .bz-pipeline-connector-sweep {
  display: block;
  animation: bzPipeFlow 1.6s linear infinite;
}

@keyframes bzPipeFlow {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ---- Persona switcher (HIW) — active pill swaps via data-active ---- */
.bz-persona-pill {
  padding: 8px 16px; border-radius: 100px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: #cbd5e1; font-size: 13.5px; font-weight: 500;
  font-family: inherit; cursor: pointer;
  letter-spacing: -0.005em; transition: all 0.15s;
}
.bz-persona-pill[data-active="true"] {
  background: #FF9900; border-color: transparent;
  color: #0D172B; font-weight: 600;
}

/* Persona-specific DOM regions; toggled by PersonaSwitcher controller. */
.bz-persona-content[data-persona]:not([data-active="true"]) { display: none; }

/* ---- FAQ (HIW) — toggle handled via data-open on each item ---- */
.bz-faq-item[data-open="true"] .bz-faq-toggle { background: #FF9900; color: #0D172B; }
.bz-faq-item[data-open="false"] .bz-faq-toggle { background: #fafaf9; color: #78716c; }
.bz-faq-item[data-open="true"] .bz-faq-toggle-plus,
.bz-faq-item[data-open="false"] .bz-faq-toggle-minus { display: none; }
.bz-faq-item[data-open="false"] .bz-faq-answer { display: none; }

/* ---- Consent modal (new-user sign-up interrupt) ---- */
@keyframes dsFadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to   { opacity: 1; transform: scale(1); }
}
.bz-consent-modal { animation: dsFadeIn 240ms ease-out; }

/* Checkbox: visually replaced. Hide native input, draw a custom square,
   and key the checked state off :checked so no JS is needed to paint. */
.bz-consent-checkbox {
  appearance: none;
  -webkit-appearance: none;
  margin: 2px 0 0;
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
  position: relative;
  flex-shrink: 0;
}
.bz-consent-checkbox:focus-visible {
  outline: 2px solid rgba(255,153,0,0.5);
  outline-offset: 2px;
}
.bz-consent-checkbox:checked {
  background: #FF9900;
  border-color: #FF9900;
}
.bz-consent-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 3px; top: 4px;
  width: 11px; height: 7px;
  border-left: 2.5px solid #0D172B;
  border-bottom: 2.5px solid #0D172B;
  transform: rotate(-45deg);
}

.bz-consent-submit {
  padding: 11px 22px;
  border: none; border-radius: 8px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  letter-spacing: -0.005em;
  transition: all 0.15s ease;
  background: rgba(255,255,255,0.08);
  color: #475569;
  cursor: not-allowed;
}
.bz-consent-submit[data-ready="true"] {
  background: #FF9900;
  color: #0D172B;
  box-shadow: 0 6px 20px rgba(255,153,0,0.35);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .bz-consent-modal { animation: none; }
}

/* Grid overlay helper (used in hero + pipeline) */
.bz-grid-overlay {
  position: absolute; inset: 0; opacity: 0.04; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.6) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* Marketing grids: below bp-md, collapse to a single column. The
   marketing pages currently ship inline grid-template-columns values
   (e.g. "1.05fr 1fr"); !important is needed to override them without
   touching every inline style. */
@media (max-width: 767px) {
  .bz-hero-grid,
  .bz-feature-grid,
  .bz-persona-grid,
  .bz-receipt-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .bz-section-pad { padding-top: 64px !important; padding-bottom: 64px !important; }
  .bz-section-pad[style*="padding: 120px"],
  .bz-section-pad[style*="padding: 100px"],
  .bz-section-pad[style*="padding: 96px"] { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
}

/* Cursor agent demo: below sm the 140px file-tree column eats too
   much room; collapse to one column and hide the tree. */
@media (max-width: 479px) {
  .bz-cursor-demo { grid-template-columns: minmax(0, 1fr) !important; }
  .bz-cursor-tree { display: none !important; }
  .bz-nav-hide-sm { display: none !important; }
}

/* Pipeline diagram: the five-node horizontal flow doesn't fit below
   bp-md. Drop the connectors (decorative) and wrap the chips. */
@media (max-width: 767px) {
  .bz-pipeline-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; }
  .bz-pipeline-connector { display: none !important; }
}

/* Hero headlines: fluid type supersedes fixed pixel sizes. Landing /
   how-it-works pages set bz-hero-h1 inline at 62-64px; let clamp() take
   over below the cap so the headline fits a 375px viewport. */
.bz-hero-h1 {
  font-size: var(--fs-hero-md) !important;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Install command row: the command text is truncated with ellipsis by
   default, but we let it wrap on very narrow viewports to stay tappable. */
@media (max-width: 479px) {
  .bz-install-row [data-install-command-target="command"] {
    white-space: normal !important;
    word-break: break-all !important;
    text-overflow: clip !important;
  }
}