/* =========================================================================
   QPN Catalyst — Home hero · top-strip rail + kicker.
   Layered ON TOP of qpn-email-mock.css. The hero is a slim horizontal rail
   strip (brand + positioning tagline, no ordinal) above a two-column copy +
   compose-card grid; the kicker is a sentence-case gold lead-in above the H1.

   Reuses the native --qpn-* tokens and the existing .qpn-chero__cta /
   .qpn-chero__legitimacy classes from qpn-cards.css. No new color literals —
   the only raw value is the system gold tint rgba(138,107,46,*), derived from
   --qpn-accent (#8A6B2E).

   Load order: qpn-shared.css → qpn-cards.css → qpn-email-mock.css → THIS.
   ========================================================================= */

/* The compose mock sits in the right column; keep its caption flow intact. */
.qpn-email-hero--strip .qpn-email-hero__mock {
  align-self: start;
}

/* ── Kicker — the hook, softened from heavy all-caps ────────────────────── */
/* Sentence-case, gold, semibold body — reads as a quiet lead-in, not a
   shouted label. Replaces the .qpn-email-hero__eyebrow uppercase treatment. */
.qpn-hero-kicker {
  font-family: var(--qpn-font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  line-height: 1.4;
  color: var(--qpn-accent);
  margin: 0 0 var(--qpn-sp-4);
  max-width: none;   /* uncapped so the phrase sits on one line; the 30ch cap was forcing a wrap. Still wraps naturally on mobile, where the column is narrower. */
}

/* Hairline gold tick before the kicker — echoes the rail rule at text scale. */
.qpn-hero-kicker__tick {
  display: inline-block;
  width: 14px;
  height: 2px;
  margin-right: 9px;
  vertical-align: middle;
  background: var(--qpn-accent);
}

/* ── "New to QPN?" orientation line ────────────────────────────────────── */
/* One muted line after the legitimacy signal pointing first-time visitors
   at the QPN front door (webshield.io/start — reading paths, full story).
   Deliberately secondary: it must not compete with the primary CTA. */
.qpn-chero__orientation {
  font-family: var(--qpn-font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--qpn-ink-faint);
  margin: var(--qpn-sp-4) 0 0;
}
.qpn-chero__orientation a {
  color: var(--qpn-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.qpn-chero__orientation a:hover,
.qpn-chero__orientation a:focus-visible {
  color: var(--qpn-link-hover);
}

/* ── Slim horizontal rail strip across the top ─────────────────────────── */
.qpn-email-hero--strip .qpn-email-hero__wrap {
  display: block;          /* wrap becomes a vertical stack: strip + main */
  padding: 40px var(--qpn-sp-7) 56px;
}

.qpn-railstrip {
  display: flex;
  align-items: center;
  gap: var(--qpn-sp-4);
  padding-bottom: 14px;
  margin-bottom: 36px;
  border-bottom: var(--qpn-rule-hair) solid var(--qpn-rule);
}

.qpn-railstrip__tick {
  width: 2px;
  height: 18px;
  background: var(--qpn-accent);
  flex: none;
}

.qpn-railstrip__brand {
  font-family: var(--qpn-font-display);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--qpn-ink);
  white-space: nowrap;
  flex: none;
}

.qpn-railstrip__div {
  width: 1px;
  height: 15px;
  background: var(--qpn-rule);
  flex: none;
}

.qpn-railstrip__tagline {
  font-family: var(--qpn-font-mono);
  font-size: var(--qpn-fs-micro);
  letter-spacing: var(--qpn-tracking-mono);
  text-transform: uppercase;
  color: var(--qpn-ink-muted);
}

/* The content below the strip is the familiar 2-column copy + mock. */
.qpn-email-hero__main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
  gap: var(--qpn-sp-8);
  align-items: start;
}

/* ── Responsive — stacks to one column under 860px ─────────────────────── */
@media (max-width: 860px) {
  .qpn-email-hero--strip .qpn-email-hero__wrap {
    padding: 36px var(--qpn-sp-5);
  }
  .qpn-railstrip {
    flex-wrap: wrap;
    gap: var(--qpn-sp-3);
    margin-bottom: 28px;
  }
  .qpn-email-hero__main {
    grid-template-columns: 1fr;
    gap: var(--qpn-sp-6);
  }
}

@media (max-width: 480px) {
  .qpn-email-hero--strip .qpn-email-hero__wrap {
    padding: 32px var(--qpn-sp-4);
  }
  /* Let the tagline break its lines naturally on the narrowest screens. */
  .qpn-railstrip__tagline { flex-basis: 100%; }
}