/* =========================================================================
   NeuroViz for Business — page-specific stylesheet
   Pairs with shared: ai-jewelry-retoucher.css (site chrome: header, page-nav,
   hero, buttons, section shells, cards, FAQ, final CTA, footer, fonts).

   REBUILD 2026-07-30 — this page previously ran a parallel `fb-*` component
   system (own hero, own cards, own FAQ, own type scale, own light-mode
   tokens) that didn't match the rest of the site. That system is deleted.
   Every component that exists in ai-jewelry-retoucher.css is now used
   directly in for-business.html: .hero, .hero-badge, .hero-title-main,
   .hero-stats, .page-nav, .section-tag, .section-intro, .steps-grid,
   .step-card, .products-grid, .product-card, .fix-list, .faq-list,
   .final-cta, .btn / .btn-outline, .badge.

   REVISION 2026-07-30 (same day) — Quality/API/Smart-retry were left as a
   lone text column beside an empty half after the placeholder screenshots
   were pulled. Paired each with a canonical card grid (reusing the exact
   sentences already in the copy, redistributed into cards — no new
   marketing language written). Consistency/Licensing got a canonical
   callout frame instead of floating unstyled. Hero diagram enlarged to
   the sibling pages' before/after-slider footprint. Pricing-teaser
   savings pill switched from blue to the canonical conversion orange.

   What's left below is ONLY what has no canonical equivalent:
   1. Header 8-item nav fit (this page adds "For Business" to the main nav)
   2. Hero H1 second-line accent color (orange, per approved H1 copy)
   3. Hero pipeline diagram — stands in for the not-yet-captured workflow
      canvas screenshot; a designed diagram, not a canonical component
   4. Real-screenshot frame (.shot-card) — thin wrapper using canonical
      surface/border/radius/shadow tokens, for the 2 real captures we have
   5. Problem-section process comparison + .card-grid-2 — reuses .step-card
      for the outer card; only the 2-up grid wrapper and the numbered-list
      -with-counter styling are new (.card-grid-2 also used by Quality and
      Smart-retry, each needing exactly two side-by-side .step-cards)
   6. MCP code block — small dark card by design decision (kept, per spec)
   7. "Coming soon" roadmap pill — kept, per spec
   8. Pricing-slider visual — kept, per spec (no per-credit rates on it)
   9. Final-CTA secondary button — this page is the only one whose final
      CTA needs a second (Enterprise) button, so it needs a readable
      outline style on the final-cta's dark gradient
   10. Small utility bits: compact section padding, footnote text,
      .link-row (API docs links as canonical outline buttons instead of a
      bare <ul>), .callout-compact (frames Consistency/Licensing as a
      single centered .step-card), .section-emphasis (Quality's pull line)
   ========================================================================= */

body.page-for-business {
  --code-bg: #0D1B2A; /* Deep Navy — brand guide's rare "extra-deep contrast panel" exception, used only for the MCP code block */
}

/* -------------------------------------------------------------------------
   1. Header nav fit — 1024–1279px
   The shared header nav already runs tight at 1024px with 7 items (logo
   and first nav item sit with near-zero gap on every other landing page).
   This page's 8th item, "For Business," pushed that over into real
   breakage: nav disappearing / overlapping the header CTAs at the review
   window width (~1205px). Fix: shrink nav gap/font and CTA padding only
   in the range where .site-nav is visible but not yet roomy (1024–1279px).
   At 1280px+ the shared header's normal spacing has enough room again.
   ------------------------------------------------------------------------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .page-for-business .site-nav { gap: 14px; }
  .page-for-business .site-nav a { font-size: 0.8rem; }
  .page-for-business .header-ctas { gap: 8px; }
  .page-for-business .header-ctas .btn { padding: 10px 14px; font-size: 0.82rem; }
}

/* -------------------------------------------------------------------------
   2. Hero H1 — second line in orange
   Approved H1 is two full-size lines, not a headline+subtitle pair, so
   .hero-title-sub (smaller, lighter weight) doesn't apply. Both lines use
   .hero-title-main (navy, 800 weight); this one rule recolors line 2.
   ------------------------------------------------------------------------- */
.page-for-business .hero-title-accent { color: var(--orange); }
/* Keep the accent line whole — "One workflow." breaking across two lines
   reads as a typo. Falls back to normal wrapping under 480px.
   QC fix 2026-07-30: the original 400px threshold left a real overflow
   window. "One workflow." at the pinned 2.4rem/38.4px floor of the hero
   H1's clamp() measures 425px unwrapped (font-size is flat across
   ~400-960px viewports — 4vw only overtakes the 2.4rem floor above
   ~960px). Available content width below the 768px container-padding
   breakpoint is viewport minus 40px, so anything narrower than ~465px
   (425 + 40) genuinely overflowed horizontally — reproducible on real
   400-465px-wide phones (e.g. iPhone Pro Max class devices at 428-430px)
   even though it wasn't visible in this environment's headless-Chrome
   checks (viewport clamps to a 500px floor, which sits above the broken
   window). Moved to 480px, ~15px of margin above the 465px break-even. */
@media (min-width: 480px) {
  .page-for-business .hero-title-accent { white-space: nowrap; }
}
/* Both hero CTAs on one row at desktop: canonical btn-lg padding (32px)
   puts the pair 10px over the 550px hero column. Trimmed on the secondary
   only, so the primary keeps full canonical weight. */
@media (min-width: 1024px) {
  .page-for-business .hero-cta-row .btn-outline.btn-lg { padding-left: 22px; padding-right: 22px; }
}

/* -------------------------------------------------------------------------
   3. (removed 31.07) Hero pipeline diagram — the designed stand-in for the
   workflow canvas. Alex delivered the real capture, so the hero now shows
   the actual canvas through .shot-card-hero and the diagram CSS is gone.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   4. Real-screenshot frame — thin wrapper around the 2 real captures we
   have (batch upload, team accounts). Same tokens as every canonical card.
   ------------------------------------------------------------------------- */
.shot-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--surface-border);
  background: var(--surface-bg);
  box-shadow: var(--card-shadow);
}
.shot-caption {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-top: 12px;
}

/* -------------------------------------------------------------------------
   5. Problem-section process comparison — outer card is the canonical
   .step-card (reused as-is). Only the numbered list needs new rules.
   .card-grid-2 is the same 2-up grid, generalized for any section that
   needs exactly two .step-cards side by side (Quality, Smart-retry).
   ------------------------------------------------------------------------- */
.process-compare,
.card-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 32px;
}
@media (min-width: 700px) {
  .process-compare, .card-grid-2 { grid-template-columns: 1fr 1fr; }
}
/* A .fix-list nested inside a .step-card is always in a column narrower
   than its own 640px/1024px multi-column breakpoints — force single
   column so it doesn't try to split into 2-3 columns inside a half-width
   card. Specificity (0,2,0) beats the canonical media-query rules
   (0,1,0) regardless of source order, so no !important needed. */
.step-card .fix-list { grid-template-columns: 1fr; gap: 10px; margin-top: 20px; }
.process-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: process-step;
  display: grid;
  gap: 10px;
}
.process-list li {
  counter-increment: process-step;
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 0.98rem;
  color: var(--text-primary);
  margin: 0;
}
.process-list li::before {
  content: counter(process-step);
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.75rem;
  color: #FFFFFF;
  background: var(--text-headline); /* var(--text-secondary) measures ~4.3:1 for white text at this size — under the 4.5:1 AA floor. text-headline clears it easily. */
}
.process-list-accent li::before { background: var(--blue); }

/* -------------------------------------------------------------------------
   6. MCP code block — kept as a small dark card by design decision (spec
   5.8 / task instruction), using the brand guide's Deep Navy exception.
   ------------------------------------------------------------------------- */
.code-block {
  background: var(--code-bg);
  border: 1px solid rgba(28, 166, 175, 0.3);
  border-radius: var(--radius-card);
  padding: 22px 28px;
  margin-top: 24px;
  font-family: ui-monospace, SFMono-Regular, "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 14px;
  line-height: 1.9;
  overflow-x: auto;
}
.code-line { white-space: pre; }
.code-label { color: var(--blue-light); margin-right: 10px; }
.code-value { color: #FFFFFF; }
.code-comment { color: rgba(255, 255, 255, 0.4); }

/* Documentation links row (API section) — canonical small outline
   buttons in a row, replacing a bare bulleted <ul>. */
.link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* -------------------------------------------------------------------------
   7. "Coming soon" roadmap pill — kept per spec 5.8. Margin bumped from
   24px to 40px: it now follows the 3-card API/MCP/n8n grid instead of a
   single paragraph, and needs more breathing room off the card row.
   ------------------------------------------------------------------------- */
.roadmap-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 9px 18px;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 0.82rem;
  border: 1.5px solid var(--blue-light);
  color: var(--blue);
  background: rgba(28, 166, 175, 0.08);
  margin-top: 40px;
  max-width: 100%;
}
.roadmap-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--blue-light); flex: 0 0 auto; }

/* -------------------------------------------------------------------------
   8. Pricing-slider visual — designed, no per-credit rates. Kept per spec
   5.12 / task instruction.
   ------------------------------------------------------------------------- */
.pricing-slider-visual { margin-top: 40px; max-width: 560px; }
.pricing-slider-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  background: rgba(49, 88, 124, 0.14);
}
.pricing-slider-fill {
  position: absolute;
  inset: 0;
  width: 82%;
  border-radius: 999px;
  background: var(--blue);
}
.pricing-slider-handle {
  position: absolute;
  top: 50%;
  left: 82%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid var(--blue);
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 8px rgba(26, 43, 60, 0.2);
}
.pricing-slider-labels {
  display: flex;
  justify-content: space-between;
  margin-top: 14px;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-headline);
}
.pricing-slider-labels span:last-child { color: var(--blue); }
/* Orange, not blue: volume savings is a conversion moment, and orange is
   the site's reserved conversion color (brand guide — teal/blue are
   structural, orange is action). White-on-orange text at bold weight
   follows the same accepted UI-component contrast pattern already used
   sitewide on every .btn-primary label. */
.pricing-slider-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  background: var(--orange);
  color: #FFFFFF;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 10px 18px;
  border-radius: 999px;
}

/* -------------------------------------------------------------------------
   9. Final-CTA secondary button — this page's final CTA is the only one
   with a second (Enterprise) button, so the default .btn-outline (blue
   text, light-gray border — tuned for white/soft backgrounds) needs a
   readable variant on the dark final-cta gradient.
   ------------------------------------------------------------------------- */
.final-cta .btn-outline {
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.35);
}
.final-cta .btn-outline:hover {
  border-color: var(--orange);
  background: rgba(255, 102, 0, 0.12);
  color: #FFFFFF;
}

/* -------------------------------------------------------------------------
   10. Small utilities
   ------------------------------------------------------------------------- */
.footnote { font-size: 0.85rem; color: var(--text-secondary); }

#consistency, #licensing { padding: 56px 0; }
@media (max-width: 767px) { #consistency, #licensing { padding: 48px 0; } }

/* Consistency / Licensing bands: framed as a single canonical .step-card
   so the compact copy reads as a deliberate callout, not orphaned text
   floating in a wide empty section. Centered and width-capped — stays
   compact, never grows into a full pillar section. */
.callout-compact { max-width: 940px; margin: 0 auto; padding: 32px 36px; }
@media (max-width: 767px) { .callout-compact { padding: 24px 22px; } }

/* Quality section emphasis line — size/weight/color only, no border or
   left-accent stripe (brand guide: no decorative dividers). */
.section-emphasis {
  margin-top: 32px;
  font-size: 1.05rem;
  color: var(--text-headline);
  max-width: 760px;
}

/* Mobile hero order: text first, diagram second — page-scoped exception.
   Sibling pages put the visual first on mobile because it is a finished
   before/after product photo that sells on sight. This page's visual is a
   process diagram: it means nothing until the headline explains it, and
   leading with it pushes the H1 and primary CTA below the fold. */
@media (max-width: 1023px) {
  .page-for-business .hero-text { order: 1; }
  .page-for-business .hero-visual { order: 2; margin-top: 32px; }
}

/* -------------------------------------------------------------------------
   Screenshot layout (31.07 — real captures from Alex replaced the
   placeholders). .shot-card already exists above; these add the grid,
   figure/caption pairing, the hero framing and the small inline variant.
   ------------------------------------------------------------------------- */
.shot-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-top: 32px;
}
@media (min-width: 900px) { .shot-grid-2 { grid-template-columns: 1fr 1fr; gap: 32px; } }

.shot-figure { margin: 0; }
.shot-figure .shot-card { margin: 0; }
.shot-figure .shot-caption { margin-top: 12px; }

/* Hero capture: fills the visual column, floats sit over its corners.
   .hero-shot-wrap is the positioning context so the badges hug the image
   itself rather than the column (which also holds the caption). */
.hero-shot-wrap { position: relative; }
.shot-card-hero { width: 100%; }
.shot-card-hero img { display: block; width: 100%; height: auto; }
.shot-caption-hero { margin-top: 14px; }

/* Small capture placed inside a card, under that card's copy. */
.shot-card-inline { margin-top: 18px; max-width: 340px; }
.shot-card-inline img { display: block; width: 100%; height: auto; }

/* -------------------------------------------------------------------------
   Enterprise contact form (owner + Alex, 31.07: a form on the page replaces
   the mailto Enterprise CTA). Canonical tokens only; no new colors.
   ------------------------------------------------------------------------- */
.contact-form { max-width: 760px; margin-top: 32px; }
.form-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media (min-width: 700px) { .form-grid { grid-template-columns: 1fr 1fr; } }

.form-field { display: flex; flex-direction: column; margin-bottom: 20px; }
.form-grid .form-field { margin-bottom: 0; }
.form-field label {
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-headline);
  margin-bottom: 8px;
}
.form-req { color: var(--orange); margin-left: 3px; }

.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: var(--body-font);
  font-size: 1rem;
  color: var(--text-primary);
  background: var(--surface-bg);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-btn);
  padding: 12px 14px;
  width: 100%;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--blue-light);
  box-shadow: 0 0 0 3px rgba(28, 166, 175, 0.18);
}

/* Honeypot: hidden from people, still reachable for bots that fill everything. */
.form-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.form-note { font-size: 0.9rem; color: var(--text-secondary); margin: 0; }

/* -------------------------------------------------------------------------
   Owner feedback 31.07 — section eyebrow in orange.
   Matched to the LIVE site rather than invented: neuroviz.ai's own
   .section-tag (Next.js bundle, checked 31.07) is plain brand orange with no
   pill — color: var(--orange), letter-spacing .1em, margin-bottom 12px, no
   padding, no background. The static landing-page stylesheet in this repo
   still carries the older blue pill version, so this page overrides it to
   match what actually ships.

   (An earlier attempt at a wider text measure was reverted: every other page
   on the site keeps the canonical 640px measure, and consistency wins.)
   ------------------------------------------------------------------------- */
.page-for-business .section-tag {
  color: var(--orange);
  background: none;
  padding: 0;
  border-radius: 0;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

/* Portrait captures (Smart-retry result view) — capped so a tall screenshot
   does not dominate the section. */
.shot-figure-narrow { max-width: 720px; margin-top: 32px; }

/* -------------------------------------------------------------------------
   Screenshot lightbox (owner 31.07: captures in two-up grids are too small
   to read in place). Sits above the header (z-index 100) and page-nav (90).
   ------------------------------------------------------------------------- */
.shot-card img { cursor: zoom-in; }
.shot-card img:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 24px 32px;
  background: rgba(26, 43, 60, 0.90);
}
.lightbox[hidden] { display: none; }
body.lightbox-open { overflow: hidden; }

.lightbox-figure { margin: 0; max-width: 100%; }
.lightbox-img {
  display: block;
  max-width: min(1600px, 94vw);
  max-height: 78vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
.lightbox-caption {
  margin: 16px auto 0;
  max-width: 780px;
  text-align: center;
  font-family: var(--body-font);
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.6); }
.lightbox-close:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
@media (max-width: 767px) {
  .lightbox { padding: 64px 12px 20px; }
  .lightbox-img { max-height: 70vh; }
}

/* ── Contact form submission status ──────────────────────────────────
   Rendered in place of navigating away, so the visitor never leaves the
   page. Populated by the handler at the end of the #contact section. */
.form-status {
  margin-top: 20px;
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.6;
}
.form-status--ok {
  background: rgba(28, 166, 175, 0.10);
  border: 1px solid rgba(28, 166, 175, 0.35);
  color: var(--text-headline, #1a2b3c);
}
.form-status--err {
  background: rgba(255, 102, 0, 0.08);
  border: 1px solid rgba(255, 102, 0, 0.35);
  color: var(--text-headline, #1a2b3c);
}
.form-status a { color: var(--orange, #ff6600); font-weight: 600; }