/* /neubie — B1 Refined Dark variant
   Overrides the light-mode defaults from shared/brand.css + shared/components.css.
   All rules are scoped to .page-neubie to avoid bleeding into other pages.
   Do NOT add /coaching styles here — Bundle 3 owns those.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Base dark surface ───────────────────────────────────────────────────── */
body.page-neubie {
  background: var(--dark-bg);
  color: var(--text-light);
}

/* ── 01. HERO ────────────────────────────────────────────────────────────── */
.page-neubie .hero {
  background:
    linear-gradient(rgba(10, 10, 10, 0.78), rgba(10, 10, 10, 0.92)),
    url('../assets/hero-intensity.webp') center / cover no-repeat,
    var(--dark-bg-pure);
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 5rem);
  border-bottom: 2px solid var(--brand-red);
}

/* Wordmark: "BUILT BY BLACK" — "BLACK" in brand-red-hover to match Jeff's social */
.page-neubie .wordmark {
  color: #fff;
  font-size: 1.4rem;
  letter-spacing: 0.18em;
}
.page-neubie .wordmark__accent {
  color: var(--brand-red-hover);
}

/* Tagline below wordmark */
.page-neubie .hero__tagline {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-top: 0.4rem;
  margin-bottom: 1.75rem;
  opacity: 0.65;
  font-family: var(--font-body);
  font-weight: 500;
}

/* Hero h1 — white display; <em> gets red italic per Jeff's "RETRAIN YOUR BODY." style */
.page-neubie .hero .head-hero {
  color: var(--text-light);
  line-height: 0.92;
  margin-bottom: 0.25rem;
}

/* Red brush-stroke accent behind the italic word "Reeducation."
   Approximated with a skewed red bar: solid red block, slight rotation,
   organic border-radius to evoke a hand-painted look.
   Known gap: not a true brush texture — polish step for later. */
.page-neubie .hero__em {
  font-style: italic;
  color: #fff;
  display: inline-block;
  position: relative;
  isolation: isolate;
  padding: 0 0.15em;
}
.page-neubie .hero__em::before {
  content: '';
  position: absolute;
  inset: 0.06em -0.1em 0.02em -0.12em;
  background: var(--brand-red);
  border-radius: 4px 60px 8px 100px; /* uneven corners = brush stroke approximation */
  transform: rotate(-1.5deg);
  z-index: -1;
}

.page-neubie .hero__sub {
  font-size: 1.15rem;
  margin-top: 1.25rem;
  max-width: 36rem;
  color: var(--text-muted-light);
  line-height: 1.55;
}
.page-neubie .hero .btn {
  margin-top: 1.5rem;
}
.page-neubie .hero__proof {
  margin-top: 1.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.5;
  line-height: 1.6;
  font-family: var(--font-body);
  font-weight: 500;
}

/* ── Section rhythm — alternating dark surfaces ───────────────────────────── */
/* Base: all sections use --dark-bg (#141414) */
.page-neubie .section {
  background: var(--dark-bg);
}
/* Even sections lift slightly to #1a1a1a for visual rhythm without color break */
.page-neubie .section:nth-of-type(even) {
  background: #1a1a1a;
}
/* Final CTA: return to pure black with red top border — strong close */
.page-neubie .section--final {
  background: var(--dark-bg-pure);
  border-top: 2px solid var(--brand-red);
}

/* ── Global text overrides for dark surface ─────────────────────────────── */
.page-neubie .head-section,
.page-neubie h3 {
  color: var(--text-light);
}
.page-neubie p,
.page-neubie li {
  color: var(--text-muted-light);
}

/* Eyebrow on dark:
   WCAG note — brand-red (#b20000) fails AA on #141414 (2.54:1, needs 4.5:1).
   Using brand-red-hover (#d51a1d) is slightly better (≈3.5:1) but still short of AA.
   Eyebrow is decorative/label-scale uppercase text, not body content — treated as
   acceptable trade-off for brand fidelity. Document here so it's visible at review. */
.page-neubie .eyebrow {
  color: var(--brand-red-hover);
}

/* ── 02. CAPABILITIES — 6-card icon grid ─────────────────────────────────── */
.page-neubie .capabilities-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  margin: 2.5rem 0 2rem;
}
@media (min-width: 700px) {
  .page-neubie .capabilities-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }
}

.page-neubie .capability {
  padding: 1.5rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  /* Subtle bottom-left red accent stripe to echo Jeff's social card style */
  border-bottom: 2px solid rgba(178, 0, 0, 0.35);
}
.page-neubie .capability__icon {
  font-size: 2rem;
  line-height: 1;
  /* icon slot: decorative unicode glyph; swap with SVG icon in polish pass */
  color: var(--brand-red-hover);
  margin-bottom: 0.65rem;
  display: block;
}
.page-neubie .capability__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--text-light);
  margin-bottom: 0.4rem;
  letter-spacing: 0.025em;
  line-height: 1.1;
}
.page-neubie .capability__body {
  font-size: 0.92rem;
  color: var(--text-muted-light);
  line-height: 1.55;
  margin: 0; /* reset shared p margin */
}

/* "Powered by Neubie." closing statement — red display type, centered */
.page-neubie .capabilities-closer {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  text-align: center;
  color: var(--brand-red-hover);
  letter-spacing: 0.04em;
  margin-top: 2rem;
  line-height: 1.2;
}

/* ── 03. TRUST STRIP ─────────────────────────────────────────────────────── */
/* Invert logo images to white for dark surface; real logos added in polish pass */
.page-neubie .trust-strip img {
  filter: brightness(0) invert(1);
  opacity: 0.45;
}

/* ── 04. HOW IT WORKS — steps on dark ───────────────────────────────────── */
/* Step numbers on dark:
   WCAG note — same contrast trade-off as .eyebrow above (brand-red-hover ≈ 3.5:1 on #141414).
   Step numbers rendered at 2.5rem display scale — treated as decorative/non-body element.
   Trade-off is acceptable at this visual weight; document here for review visibility. */
.page-neubie .step__num {
  color: var(--brand-red-hover);
}
.page-neubie .step__title {
  color: var(--text-light);
}
.page-neubie .step__body {
  color: var(--text-muted-light);
}

/* ── 05. PRICING ─────────────────────────────────────────────────────────── */
.page-neubie .price {
  color: var(--text-light);
  margin-top: 0.5rem;
}
.page-neubie .pricing__note {
  margin-top: 0.5rem;
  opacity: 0.6;
  font-size: 0.92rem;
}

/* ── 06. CALENDLY PLACEHOLDER ────────────────────────────────────────────── */
.page-neubie .calendly-embed {
  margin-top: 1.5rem;
}
.page-neubie .calendly-placeholder {
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  padding: 4rem 2rem;
  text-align: center;
  color: var(--text-muted-light);
  font-size: 0.9rem;
  font-style: italic;
}

/* ── 07. FAQ — dark surface overrides ────────────────────────────────────── */
.page-neubie .faq {
  border-top-color: rgba(255, 255, 255, 0.1);
}
.page-neubie .faq__item {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.page-neubie .faq__item summary {
  color: var(--text-light);
}
.page-neubie .faq__item summary::after {
  color: var(--brand-red-hover);
  opacity: 1; /* override the 0.4 opacity from shared; red shows through better on dark */
}
.page-neubie .faq__item p {
  color: var(--text-muted-light);
}

/* ── 08. FINAL CTA ───────────────────────────────────────────────────────── */
.page-neubie .section--final .head-section {
  margin-bottom: 1.5rem;
  color: var(--text-light);
}