/*
 * Sprint 010 — Founder-Directed Homepage Phase 1
 * Scope: hero, connected capability strip, revenue-gap section ONLY.
 * Enqueued only on the front page (see leadsscape_phase1_homepage_assets()
 * in functions.php) so nothing here can affect any other page.
 * Committed to the draft branch; NOT approved. Pending Founder rendered review.
 *
 * Brand typography is self-hosted and web-optimized: Manrope for headings,
 * Inter for body text, and IBM Plex Mono for compact technical labels.
 * No third-party font request or raw desktop-font payload is made.
 */

@font-face {
  font-family: 'Manrope Variable';
  src: url('../fonts/manrope-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Variable';
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/ibm-plex-mono-600-latin.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Phase 1 palette (Founder spec, 2026-07-22).
     Mapping against existing --ls-premium-* tokens in premium-experience.css
     (documented per the "do not create competing duplicate colour
     variables" instruction):
       --ls-ink-950   ~= --ls-premium-navy-deep (#071d33) - visually
                         equivalent (RGB 7,24,46 vs 7,29,51); new name kept
                         because this phase's spec calls it out as a
                         distinct semantic role (primary ink vs panel navy).
       --ls-navy-900  ~= --ls-premium-navy (#0a2540) - visually equivalent.
       --ls-cyan-500  ~= --ls-premium-blue-bright (#11a8e8) - close, kept
                         distinct per spec's exact hex.
       --ls-slate-600 ~= --ls-premium-muted (#53657a) - functionally the
                         same muted-text role.
       --ls-surface   =  --ls-premium-white (#fff) - identical.
     --ls-blue-600/700 are NOT aliased to --ls-premium-blue (#0073aa): that
     is a teal-leaning blue, meaningfully different hue/saturation from the
     more saturated royal blue this phase specifies for CTA emphasis. Per
     the instruction ("if an existing token is within a visually equivalent
     range, preserve it; otherwise introduce it"), this one is genuinely
     new rather than force-fit onto an unrelated existing token. */
  --ls-ink-950: #111827;
  --ls-navy-900: #0A2540;
  --ls-blue-600: #0073AA;
  --ls-blue-700: #005F8F;
  --ls-cyan-500: #65B9D6;
  --ls-canvas: #F3F4F6;
  --ls-surface: #FFFFFF;
  --ls-blue-050: #EAF4F8;
  --ls-slate-100: #E6EBF2;
  --ls-slate-300: #B7C2D0;
  --ls-slate-600: #526174;
  --ls-slate-700: #39495D;
  --ls-warm-050: #F7F5F0;
  --ls-success-600: #147A68;

  --ls-p1-font-display: 'Manrope Variable', Manrope, 'Helvetica Neue', Arial, sans-serif;
  --ls-p1-font-body: 'Inter Variable', Inter, 'Helvetica Neue', Arial, sans-serif;
  --ls-p1-font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --ls-container-max: 1280px;
  --ls-gutter-desktop: 48px;
  --ls-gutter-tablet: 32px;
  --ls-gutter-mobile: 20px;
  --ls-page-gutter: var(--ls-gutter-mobile);

  /* Phase 2 homepage vertical rhythm (2026-07-22). Applied to .ls-p1/.ls-p2
     sections only - the shared .ls-premium-section token (used by every
     other page) is untouched, so nothing outside the homepage is affected. */
  /* Sprint 010 spacing correction (2026-07-24): was 96px. Drives
     .ls-p2-system/.ls-p2-solutions/.ls-p2-pathway top+bottom padding, so each
     transition combined two 96px paddings (plus the eyebrow-to-heading gap)
     into a ~230px content-to-content distance - above the 104-152px target.
     First pass reduced this to 80px (standard range), which brought each
     section's own internal spacing (CTA-to-bottom, top-padding-to-heading)
     into target but still left the combined cross-section transition at
     ~199px measured post-fix - improved but still above the 104-152px
     target. Second pass: 64px (compact range) reduced the transition to
     ~167px, still ~15px over the 152px ceiling. Third pass: 56px, the
     documented floor of the compact range (56-72px) - not an arbitrary
     undershoot, the lowest value the mandate's own spacing scale still
     calls "compact" rather than "tight". Combined with the ~39px fixed
     eyebrow-to-heading offset, 56+56+39=151px lands inside the
     104-152px cross-section target. */
  --ls-section-space-wide: 56px;
  --ls-section-space-desktop: 88px;
  --ls-section-space-tablet: 72px;
  --ls-section-space-mobile: 56px;
  --ls-heading-to-copy: 22px;
  --ls-copy-to-content: 36px;
  --ls-content-to-cta: 28px;
}

@media (min-width: 600px) { :root { --ls-page-gutter: var(--ls-gutter-tablet); } }
@media (min-width: 1025px) { :root { --ls-page-gutter: var(--ls-gutter-desktop); } }

/* The front-page root wraps every homepage section, including the legacy
   premium walkthrough, assessment, FAQ, and closing CTA blocks. Scope the
   brand typography here so the full page is consistent while mono labels
   retain their more-specific overrides below. */
.ls-premium { font-family: var(--ls-p1-font-body); }
.ls-premium h1,
.ls-premium h2,
.ls-premium h3,
.ls-premium h4 { font-family: var(--ls-p1-font-display); }
.ls-p1-container { width: min(calc(100% - (2 * var(--ls-page-gutter))), var(--ls-container-max)); margin-inline: auto; }
.ls-p1-eyebrow { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; font-family: var(--ls-p1-font-mono); font-size: 12px; line-height: 1.4; letter-spacing: .11em; font-weight: 600; text-transform: uppercase; color: var(--ls-blue-600); }
.ls-p1-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ls-cyan-500); }

/* ---------- Hero ---------- */
/* Sprint 010 spacing correction (2026-07-24): top padding was clamp(72px, 7vw, 104px),
   which resolved to 104px at desktop widths and, combined with the header, pushed the
   hero eyebrow ~104px below the header divider (target: 64-80px). Tightened the clamp
   so desktop resolves within that range while mobile/tablet keep comparable breathing room. */
.ls-p1-hero { position: relative; overflow: hidden; padding: clamp(56px, 5vw, 80px) 0 48px; background: var(--ls-canvas); }
.ls-p1-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 32%, rgba(36,87,245,0.10), transparent 38%);
  pointer-events: none;
}
.ls-p1-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.ls-p1-hero-copy { max-width: 620px; }
.ls-p1-hero h1 {
  max-width: 760px;
  margin: 0;
  color: var(--ls-ink-950);
  font-family: var(--ls-p1-font-display);
  font-size: clamp(52px, 5.15vw, 78px);
  line-height: 1.02;
  letter-spacing: -.04em;
  font-weight: 660;
  font-variation-settings: 'wght' 660;
}
.ls-p1-hero-copy > p { max-width: 620px; margin: 20px 0 0; color: var(--ls-slate-600); font-size: clamp(18px, 1.35vw, 21px); line-height: 1.55; }

/* ---------- CTA group ---------- */
.ls-p1-ctas { margin-top: 32px; }
.ls-p1-cta-row { display: flex; align-items: center; gap: 12px; }
.ls-p1-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 54px; padding-inline: 26px; border-radius: 10px;
  font-family: var(--ls-p1-font-display); font-size: 16px; font-weight: 620; letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
  transition: background-color .18s cubic-bezier(.2,.8,.2,1), border-color .18s cubic-bezier(.2,.8,.2,1), transform .18s cubic-bezier(.2,.8,.2,1), box-shadow .18s cubic-bezier(.2,.8,.2,1);
}
.ls-p1-btn svg { width: 17px; height: 17px; flex: none; transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.ls-p1-btn--primary { background: var(--ls-blue-600); color: #fff; border: 1px solid var(--ls-blue-600); box-shadow: 0 1px 2px rgba(7,24,46,.10), 0 8px 22px rgba(36,87,245,.17); }
.ls-p1-btn--primary:hover { background: var(--ls-blue-700); border-color: var(--ls-blue-700); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(7,24,46,.12), 0 12px 26px rgba(36,87,245,.20); }
.ls-p1-btn--primary:hover svg { transform: translateX(3px); }
.ls-p1-btn--secondary { background: rgba(255,255,255,.72); color: var(--ls-ink-950); border: 1px solid rgba(11,35,66,.20); box-shadow: 0 1px 2px rgba(7,24,46,.04); }
.ls-p1-btn--secondary:hover { background: var(--ls-blue-050); border-color: rgba(36,87,245,.38); transform: translateY(-1px); }

/* Shared contextual text-link CTA component (Founder correction, 2026-07-22):
   one consistent treatment for every in-flow text CTA on the homepage -
   "See How It Works", "Find the gaps in your lead system", and any later
   equivalents. Brand blue, not ink, so it reads as an action rather than
   body text; ordinary nav/body links are untouched by this class. */
.ls-p1-tertiary { display: inline-flex; align-items: baseline; gap: 8px; margin-top: 15px; color: var(--ls-blue-600); font-family: var(--ls-p1-font-display); font-size: 15px; font-weight: 620; text-decoration: none; }
.ls-p1-tertiary span { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .18s cubic-bezier(.2,.8,.2,1); }
.ls-p1-tertiary:hover span { background-size: 100% 1px; }
.ls-p1-tertiary svg { position: relative; top: 1px; width: 15px; height: 15px; transition: transform .18s cubic-bezier(.2,.8,.2,1); }
.ls-p1-tertiary:hover svg { transform: translateX(3px); }

.ls-p1 a.ls-p1-btn:focus-visible,
.ls-p1 a.ls-p1-tertiary:focus-visible,
.ls-p1-strip a:focus-visible,
.ls-p1-gap a:focus-visible { outline: 3px solid rgba(36,87,245,.28); outline-offset: 3px; }

/* ---------- Hero visual ---------- */
.ls-p1-hero-visual { position: relative; }
.ls-p1-flow-panel {
  position: relative; margin-inline: auto; max-width: 540px; aspect-ratio: 4 / 4.6;
  border-radius: 22px; padding: 30px 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%),
    var(--ls-navy-900);
  box-shadow: 0 34px 80px rgba(7,24,46,.28);
  display: flex; flex-direction: column;
}
.ls-p1-flow-panel::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .35;
  pointer-events: none;
}
.ls-p1-flow-head { position: relative; display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.ls-p1-flow-head strong { color: #fff; font-size: 14px; font-weight: 620; letter-spacing: -.01em; }
.ls-p1-flow-status { display: inline-flex; align-items: center; gap: 6px; font-family: var(--ls-p1-font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ls-cyan-500); }
.ls-p1-flow-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ls-cyan-500); box-shadow: 0 0 0 3px rgba(46,183,211,.22); }
.ls-p1-flow-list { position: relative; display: grid; gap: 0; margin: 18px 0 0; padding: 0; list-style: none; flex: 1; }
.ls-p1-flow-list li { position: relative; display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 14px 0; }
.ls-p1-flow-list li:not(:last-child)::after { content: ""; position: absolute; left: 12px; top: calc(100% - 3px); width: 1px; height: 12px; background: rgba(255,255,255,.16); }
.ls-p1-flow-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.55); font-family: var(--ls-p1-font-mono); font-size: 10px; }
.ls-p1-flow-list li.is-active .ls-p1-flow-dot { background: var(--ls-blue-600); border-color: var(--ls-blue-600); color: #fff; }
.ls-p1-flow-list li strong { display: block; color: #fff; font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.ls-p1-flow-list li small { display: block; margin-top: 2px; color: rgba(255,255,255,.55); font-size: 12.5px; }

/* ---------- Connected capability strip: Option 3 (2026-07-22) ---------- */
/* Founder review compared three states: (1) the first Phase 1 build - open
   min-height, no column-gap, generous but visually thin (icon + number +
   label with no real "node" weight); (2) the corrected/compressed build -
   136-158px, tight, but read as cramped rather than premium; (3) this
   version - a deliberate middle ground with MORE visual presence than
   either: 40px circular icon badges (a real system "node", not a bare
   icon), a continuous background rail connecting all five badges (visible
   only in the gaps between them, since each badge has a solid fill), and
   content-aware column widths so "Coordinated Follow-Up" and "Intelligent
   Intake" (the two longest labels) get proportionally more room instead of
   forcing all five into equal-width columns and wrapping/cramping. Rounded
   lower corners retained (flush attachment to the hero above). */
.ls-p1-strip-wrap { padding-block: 0; background: var(--ls-canvas); }
.ls-p1-strip { position: relative; margin-top: -22px; padding: 28px 28px 32px; background: var(--ls-blue-050); border: 1px solid rgba(36,87,245,.12); border-radius: 0 0 16px 16px; }
.ls-p1-strip-label { display: block; margin-bottom: 28px; font-family: var(--ls-p1-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ls-slate-700); }
/* Content-aware widths: Lead Acquisition/Lead Qualification/Revenue
   Visibility (1fr) are shorter than Intelligent Intake (1.18fr) and
   Coordinated Follow-Up (1.3fr), the two labels most prone to wrapping. */
.ls-p1-strip-row { display: grid; grid-template-columns: 1fr 1.18fr 1fr 1.3fr 1fr; column-gap: 18px; align-items: center; }
.ls-p1-strip-item { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 6px; border-radius: 10px; transition: background-color .18s ease; }
.ls-p1-strip-item:hover { background: rgba(255,255,255,.70); }
/* Continuous rail: one line spanning the full row, positioned behind the
   badges (z-index 0) and centred on the badge, so it visually connects all
   five nodes but is only ever seen in the gaps between them. */
.ls-p1-strip-row::before {
  content: ""; position: absolute; left: 28px; right: 28px; top: 49px; height: 1px;
  background: rgba(36,87,245,.22); z-index: 0;
}
.ls-p1-strip-badge { position: relative; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--ls-surface); border: 1px solid rgba(36,87,245,.22); color: var(--ls-blue-600); box-shadow: 0 2px 6px rgba(11,35,66,.06); transition: background-color .18s ease, border-color .18s ease, color .18s ease; }
.ls-p1-strip-badge svg { width: 19px; height: 19px; }
.ls-p1-strip-item:hover .ls-p1-strip-badge { background: var(--ls-blue-600); border-color: var(--ls-blue-600); color: #fff; }
/* WCAG AA fix (2026-07-22): --ls-slate-300 on --ls-blue-050 measured only
   1.62:1. --ls-slate-600 measures 5.68:1 against the same background. */
.ls-p1-strip-num { display: block; margin-bottom: 2px; font-family: var(--ls-p1-font-mono); font-size: 11px; font-weight: 600; color: var(--ls-slate-600); }
.ls-p1-strip-item:hover .ls-p1-strip-num { color: var(--ls-blue-600); }
/* min-width: 0 overrides the flex-item default (min-width: auto), which
   otherwise refuses to shrink below the text's unwrapped width and clips
   it mid-word instead of wrapping. */
.ls-p1-strip-label-text { display: flex; flex-direction: column; min-width: 0; }
.ls-p1-strip-label-text strong { font-size: 14.5px; font-weight: 620; color: var(--ls-ink-950); letter-spacing: -.01em; white-space: nowrap; }
@media (max-width: 1180px) {
  .ls-p1-strip-label-text strong { white-space: normal; }
}

/* ---------- Revenue-gap section ---------- */
/* Sprint 010 spacing correction (2026-07-24): was 96px, widened to 104px at
   >=1440px - both above the 72-88px desktop standard-section target and the
   direct cause of the excess empty band below the five diagnostic rows.
   Consolidated to one desktop value; the >=1440px override is removed since
   padding should not grow at wider viewports. Mobile override (line ~485,
   64px) is unchanged - not rendered-verified at mobile width this session. */
.ls-p1-gap { padding: 80px 0; }
.ls-p1-gap--warm { background: var(--ls-warm-050); }
.ls-p1-gap--navy { background: var(--ls-navy-900); }
.ls-p1-gap-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 88px; align-items: start; }
/* Founder correction (2026-07-22): position:sticky removed. In a full-page
   render (and for any visitor whose viewport is taller than the section)
   the shorter intro column simply stopped short, leaving a tall blank
   band under it beside rows 3-5 - read as "missing content" rather than a
   deliberate composition. Static keeps both columns predictable. */
.ls-p1-gap-intro { position: static; }
.ls-p1-gap h2 { margin: 0; max-width: 680px; font-family: var(--ls-p1-font-display); font-size: clamp(38px, 3.7vw, 58px); line-height: 1.04; letter-spacing: -.035em; font-weight: 640; color: var(--ls-ink-950); }
.ls-p1-gap--navy h2 { color: #fff; }
.ls-p1-gap-intro p { margin: 24px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.6; color: var(--ls-slate-600); }
.ls-p1-gap--navy .ls-p1-gap-intro p { color: rgba(255,255,255,.72); }
.ls-p1-gap--navy .ls-p1-eyebrow { color: var(--ls-cyan-500); }
.ls-p1-gap-intro .ls-p1-tertiary { margin-top: 30px; }
.ls-p1-gap--navy .ls-p1-gap-intro .ls-p1-tertiary { color: var(--ls-cyan-500); }
.ls-p1-gap-rows { position: relative; margin: 0; padding: 0; list-style: none; }
.ls-p1-gap-row { position: relative; display: grid; grid-template-columns: 48px minmax(180px,220px) 1fr; gap: 20px; align-items: start; padding-block: 26px; border-top: 1px solid rgba(11,35,66,.14); }
.ls-p1-gap--navy .ls-p1-gap-row { border-top-color: rgba(255,255,255,.14); }
.ls-p1-gap-rows li:last-child .ls-p1-gap-row { border-bottom: 1px solid rgba(11,35,66,.14); }
.ls-p1-gap--navy .ls-p1-gap-rows li:last-child .ls-p1-gap-row { border-bottom-color: rgba(255,255,255,.14); }
.ls-p1-gap-row-num { position: relative; font-family: var(--ls-p1-font-mono); font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--ls-blue-600); padding-top: 2px; }
.ls-p1-gap--navy .ls-p1-gap-row-num { color: var(--ls-cyan-500); }
/* Quiet vertical rail beside the numbers - echoes the hero flow panel's
   connector language without becoming a thick timeline. A single line
   spanning the full list (inset from the first/last number) rather than
   per-row segments, so it stays continuous regardless of each row's
   actual height (rows 1-5 wrap to different numbers of lines). */
.ls-p1-gap-rows::before {
  /* 34px clears the widest 2-digit mono number (~18px) inside the 48px
     number column with room to spare - the rail never runs through text. */
  content: ""; position: absolute; left: 34px; top: 44px; bottom: 44px; width: 1px;
  background: rgba(36,87,245,.16);
}
.ls-p1-gap--navy .ls-p1-gap-rows::before { background: rgba(46,183,211,.20); }
.ls-p1-gap-row-title { margin: 0; font-size: 19px; line-height: 1.25; font-weight: 620; color: var(--ls-ink-950); letter-spacing: -.01em; }
.ls-p1-gap--navy .ls-p1-gap-row-title { color: #fff; }
.ls-p1-gap-row-text { margin: 0; font-size: 16px; line-height: 1.6; max-width: 54ch; color: var(--ls-slate-600); }
.ls-p1-gap--navy .ls-p1-gap-row-text { color: rgba(255,255,255,.68); }
/* Closing bridge (Founder correction, 2026-07-22): a full-width top border
   read as just another row. Replaced with a short accent rule (anchor, not
   a divider) and a deliberate gap so it reads as the section's conclusion,
   plus its own CTA so the diagnostic list ends with a direct next step. */
.ls-p1-gap-bridge-wrap { margin-top: 36px; max-width: 720px; }
.ls-p1-gap-bridge-rule { width: 40px; height: 2px; margin: 0 0 20px; background: var(--ls-blue-600); border: 0; }
.ls-p1-gap--navy .ls-p1-gap-bridge-rule { background: var(--ls-cyan-500); }
.ls-p1-gap-bridge { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ls-ink-950); }
.ls-p1-gap--navy .ls-p1-gap-bridge { color: rgba(255,255,255,.86); }
.ls-p1-gap-bridge-wrap .ls-p1-tertiary { margin-top: 18px; }
.ls-p1-gap--navy .ls-p1-gap-bridge-wrap .ls-p1-tertiary { color: var(--ls-cyan-500); }

/* ================================================================
   PHASE 2 — The Leadsscape System / Core Solutions / Find Your
   Starting Point (2026-07-22). .ls-p2 prefix per phase-specific
   BEM naming; homepage-scoped only, same isolation as .ls-p1.
   ================================================================ */
.ls-p2 { font-family: var(--ls-p1-font-body); }

/* ---------- Section 4: The Leadsscape System ---------- */
.ls-p2-system { padding: var(--ls-section-space-wide) 0; background: var(--ls-navy-900); color: #fff; }
.ls-p2-system-intro { max-width: 640px; margin-bottom: var(--ls-copy-to-content); }
.ls-p2-system-intro h2 { margin: var(--ls-heading-to-copy) 0 0; font-family: var(--ls-p1-font-display); font-size: clamp(32px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -.03em; font-weight: 640; color: #fff; }
.ls-p2-system-intro p { margin: var(--ls-heading-to-copy) 0 0; max-width: 56ch; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.68); }

.ls-p2-zones { display: grid; grid-template-columns: 1fr 32px 1.6fr 32px 1fr; align-items: stretch; }
.ls-p2-zone { display: flex; flex-direction: column; padding: 26px 24px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(255,255,255,.035); }
/* Founder correction (2026-07-22): stretched to match the four-stage
   Execution zone's height, the single-stage Intelligence zone read as an
   emptier version of the same box rather than a deliberately different
   one. A cyan-tinted surface reframes it as a distinct "insight" zone
   instead of a sparse leftover, and the note is pinned to the bottom so
   the zone still feels intentionally composed at full stretched height. */
.ls-p2-zone--intelligence { background: rgba(46,183,211,.06); border-color: rgba(46,183,211,.22); }
.ls-p2-zone--intelligence .ls-p2-zone-stages { margin-bottom: 22px; }
.ls-p2-zone--intelligence .ls-p2-zone-note { margin-top: auto; }
.ls-p2-zone-label { display: block; margin-bottom: 18px; font-family: var(--ls-p1-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ls-cyan-500); }
.ls-p2-zone-stages { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.ls-p2-zone--execution .ls-p2-zone-stages { grid-template-columns: 1fr 1fr; }
.ls-p2-zone-stages li { display: flex; align-items: baseline; gap: 10px; }
/* WCAG AA fix (2026-07-22): rgba(255,255,255,.4) on --ls-navy-900 measured
   3.66:1, below the 4.5:1 minimum for this 11px text. .55 measures 5.65:1. */
.ls-p2-stage-num { font-family: var(--ls-p1-font-mono); font-size: 11px; font-weight: 600; color: rgba(255,255,255,.55); }
.ls-p2-zone-stages strong { font-size: 16px; font-weight: 620; letter-spacing: -.01em; color: #fff; }
.ls-p2-zone-note { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13px; color: rgba(255,255,255,.6); }
.ls-p2-zone-note svg { flex: none; width: 14px; height: 14px; color: var(--ls-cyan-500); }

/* Zone connector: a short horizontal rail with a directional chevron,
   communicating flow between zones without a full circular diagram. */
.ls-p2-zone-connector { position: relative; align-self: center; height: 1px; background: rgba(46,183,211,.28); }
.ls-p2-zone-connector::after {
  content: ""; position: absolute; top: 50%; right: 0; width: 7px; height: 7px;
  border-top: 1.5px solid var(--ls-cyan-500); border-right: 1.5px solid var(--ls-cyan-500);
  transform: translateY(-50%) rotate(45deg);
}

/* Founder correction (2026-07-22): tightened from --ls-content-to-cta
   (28px) so the assessment CTA reads as part of the system composition
   rather than a separately spaced element below it. */
.ls-p2-system-cta { margin-top: 22px; }

/* ---------- Section 5: Core Solutions ---------- */
.ls-p2-solutions { padding: var(--ls-section-space-wide) 0; background: var(--ls-canvas); }
.ls-p2-solutions-intro { max-width: 640px; margin-bottom: var(--ls-copy-to-content); }
.ls-p2-solutions-intro h2 { margin: var(--ls-heading-to-copy) 0 0; font-family: var(--ls-p1-font-display); font-size: clamp(32px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -.03em; font-weight: 640; color: var(--ls-ink-950); }
.ls-p2-solutions-intro p { margin: var(--ls-heading-to-copy) 0 0; max-width: 60ch; font-size: 17px; line-height: 1.6; color: var(--ls-slate-600); }

/* Founder correction (2026-07-22): align-items:stretch + margin-top:auto on
   the featured panel's CTA (removed below) stretched the dark panel to
   match the taller 2x2 modules grid, then pinned the CTA to the very
   bottom of that extra height - reading as a large block of unused space
   above an artificially bottom-anchored link. align-items:start lets the
   featured panel size to its own content instead. The section-level CTA
   also moved out of the featured panel entirely (see .ls-p2-solutions-cta
   in the markup) so it visibly applies to all five solutions, not only
   Lead Generation Systems. */
.ls-p2-solutions-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); gap: 24px; align-items: start; }
.ls-p2-solution-tag { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-family: var(--ls-p1-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ls-blue-600); }
/* WCAG AA fix (2026-07-22): --ls-slate-300 on white measured 1.80:1;
   --ls-slate-600 measures 6.32:1. rgba(255,255,255,.4) on navy-900
   measured 3.66:1 (same failure as the earlier stage-num fix); .55
   measures 5.65:1. */
.ls-p2-solution-tag-num { color: var(--ls-slate-600); }
.ls-p2-solution-featured .ls-p2-solution-tag-num { color: rgba(255,255,255,.55); }
.ls-p2-solution-featured { padding: 34px; border-radius: 20px; background: var(--ls-navy-900); color: #fff; }
.ls-p2-solution-featured .ls-p2-solution-tag { color: var(--ls-cyan-500); }
.ls-p2-solution-featured h3 { margin: 0; font-size: 26px; line-height: 1.15; letter-spacing: -.02em; font-weight: 640; color: #fff; }
/* WCAG AA pass already (6.46:1) but bumped for stronger visual read on a
   panel this prominent, not merely to clear the legal minimum. */
.ls-p2-solution-problem { margin: 16px 0 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.7); }
.ls-p2-solution-outcome { margin: 12px 0 0; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.92); }

.ls-p2-solution-modules { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ls-p2-solution-module { padding: 24px; border: 1px solid var(--ls-slate-100); border-radius: 16px; background: var(--ls-surface); transition: border-color .18s ease, box-shadow .18s ease; }
.ls-p2-solution-module:hover { border-color: rgba(36,87,245,.28); box-shadow: 0 12px 30px rgba(11,35,66,.06); }
.ls-p2-solution-module h3 { margin: 0; font-size: 18px; line-height: 1.2; letter-spacing: -.01em; font-weight: 620; color: var(--ls-ink-950); }
.ls-p2-solution-module p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ls-slate-600); }

.ls-p2-solutions-cta { margin-top: var(--ls-content-to-cta); }

/* ---------- Section 6: Find Your Starting Point — navigator (2026-07-22) ---------- */
/* Founder review: the divided-rectangle "diagnostic quadrant" still read as
   a polished table. Redesigned as a hub-and-pathway navigator: a navy
   "Your Revenue Challenge" focal panel, with four pathway cards connected
   to it by a short vertical rail + node (the same connector language as
   the System zones and capability strip, applied vertically), each headed
   by an action-oriented marker so the section reads as one connected
   diagnostic instrument, not four independent cards. */
.ls-p2-pathway {
  position: relative;
  padding: var(--ls-section-space-wide) 0;
  background: var(--ls-blue-050);
  overflow: hidden;
}
.ls-p2-pathway::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 12% 8%, rgba(36,87,245,.08), transparent 42%), radial-gradient(circle at 92% 92%, rgba(46,183,211,.07), transparent 38%);
  pointer-events: none;
}
.ls-p2-pathway-intro { position: relative; max-width: 680px; margin-bottom: var(--ls-copy-to-content); }
.ls-p2-pathway-intro h2 { margin: var(--ls-heading-to-copy) 0 0; font-family: var(--ls-p1-font-display); font-size: clamp(32px, 3.2vw, 46px); line-height: 1.08; letter-spacing: -.03em; font-weight: 640; color: var(--ls-ink-950); }
.ls-p2-pathway-intro p { margin: var(--ls-heading-to-copy) 0 0; max-width: 68ch; font-size: 17px; line-height: 1.6; color: var(--ls-slate-600); }

.ls-p2-nav { position: relative; }
.ls-p2-nav-hub { position: relative; z-index: 1; max-width: 560px; margin: 0 auto 44px; padding: 22px 30px; text-align: center; border-radius: 16px; background: var(--ls-navy-900); box-shadow: 0 18px 40px rgba(11,35,66,.16); }
.ls-p2-nav-hub-label { display: block; font-family: var(--ls-p1-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ls-cyan-500); }
.ls-p2-nav-hub p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.82); }

.ls-p2-nav-paths { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.ls-p2-nav-path { position: relative; padding: 26px 22px; border: 1px solid rgba(11,35,66,.12); border-radius: 16px; background: var(--ls-surface); box-shadow: 0 10px 26px rgba(11,35,66,.05); }
/* Connector: a short rail dropping from the hub above into each path card,
   terminating in a small node right at the card's top edge - never
   crossing into the card body or its text. */
.ls-p2-nav-path::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 22px;
  background: rgba(36,87,245,.28); transform: translateX(-50%);
}
.ls-p2-nav-path::after {
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 18px); width: 7px; height: 7px;
  border-radius: 50%; background: var(--ls-blue-600); transform: translateX(-50%);
}
.ls-p2-nav-path-marker { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; font-family: var(--ls-p1-font-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ls-blue-600); }
.ls-p2-nav-path-marker svg { width: 13px; height: 13px; }
/* WCAG AA fix (2026-07-22): --ls-slate-300 on white measured 1.80:1;
   --ls-slate-600 measures 6.32:1. */
.ls-p2-nav-path-num { display: block; margin-bottom: 10px; font-family: var(--ls-p1-font-mono); font-size: 12px; font-weight: 600; color: var(--ls-slate-600); }
.ls-p2-nav-path h3 { margin: 0; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; font-weight: 620; color: var(--ls-ink-950); }
.ls-p2-nav-path p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ls-slate-600); }

.ls-p2-pathway-ctas { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: var(--ls-content-to-cta); }
.ls-p2-pathway-ctas .ls-p1-tertiary { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .ls-p1 *, .ls-p1-strip *, .ls-p1-gap *, .ls-p2 *, .ls-p2-solution-module { animation: none !important; transition: none !important; }
}

/* ---------- Tablet (768-1024) ---------- */
@media (max-width: 1024px) {
  .ls-p1-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .ls-p1-flow-panel { max-width: 460px; }
  .ls-p1-strip-row { grid-template-columns: repeat(3, 1fr); row-gap: 22px; column-gap: 14px; }
  .ls-p1-strip-row::before { display: none; }
  .ls-p1-gap-grid { grid-template-columns: 1fr; gap: 48px; }
  .ls-p1-gap-intro { position: static; }
  .ls-p1-gap-row { grid-template-columns: 40px 1fr; }
  .ls-p1-gap-row-title { grid-column: 2; }
  .ls-p1-gap-row-text { grid-column: 1 / -1; margin-top: 4px; max-width: none; }
  /* The explanation wraps full-width beneath the number at this layout,
     so the desktop-only number rail (which assumes a clear number column)
     is hidden rather than left to run behind wrapped text. */
  .ls-p1-gap-rows::before { display: none; }

  .ls-p2-system { padding: var(--ls-section-space-tablet) 0; }
  .ls-p2-zones { grid-template-columns: 1fr; gap: 16px; }
  .ls-p2-zone-connector { display: none; }
  .ls-p2-solutions { padding: var(--ls-section-space-tablet) 0; }
  .ls-p2-solutions-grid { grid-template-columns: 1fr; }
  .ls-p2-solution-featured { padding: 28px; }
  .ls-p2-pathway { padding: var(--ls-section-space-tablet) 0; }
  .ls-p2-nav-paths { grid-template-columns: 1fr 1fr; row-gap: 40px; }
  .ls-p2-nav-hub { max-width: none; }
}

/* ---------- Mobile (<600) ---------- */
@media (max-width: 599px) {
  .ls-p1-hero { padding: 56px 0 32px; }
  .ls-p1-hero h1 { font-size: clamp(40px, 11vw, 52px); line-height: 1.02; letter-spacing: -.035em; }
  .ls-p1-hero-copy > p { font-size: 17px; line-height: 1.55; }
  .ls-p1-hero-visual { margin-top: 36px; }
  .ls-p1-cta-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .ls-p1-btn { width: 100%; height: 54px; }
  .ls-p1-tertiary { margin-top: 16px; }
  .ls-p1-strip { margin-top: 24px; }
  /* Rendered a scroll-snap row, a 2-column grid, and this single-column
     list at 375px (2026-07-22). The 2-column grid forced "Coordinated
     Follow-Up" (the longest label) into a half-width cell and wrapped it
     to three lines at the hyphen - not clipped or truncated, but not
     clean either. A single column gives every label its full row width,
     so all five stay to two lines or fewer without a scroll affordance. */
  .ls-p1-strip-row { display: grid; grid-template-columns: 1fr; gap: 8px; min-height: 0; }
  .ls-p1-strip-row::before { display: none; }
  .ls-p1-strip-item { background: rgba(255,255,255,.6); border: 1px solid rgba(36,87,245,.10); padding: 12px 14px; }
  .ls-p1-strip-badge { width: 34px; height: 34px; }
  .ls-p1-strip-badge svg { width: 16px; height: 16px; }
  .ls-p1-gap { padding: 64px 0; }
  .ls-p1-gap h2 { font-size: clamp(34px, 9vw, 42px); line-height: 1.08; }
  .ls-p1-gap-intro p { margin-top: 18px; }
  .ls-p1-gap-row { padding-block: 20px; grid-template-columns: 34px 1fr; gap: 14px; }
  .ls-p1-gap-row-title { grid-column: 2; font-size: 18px; }
  .ls-p1-gap-row-text { grid-column: 1 / -1; margin-top: 6px; }
  .ls-p1-gap-bridge-wrap { margin-top: 28px; }

  .ls-p2-system { padding: var(--ls-section-space-mobile) 0; }
  .ls-p2-system-intro h2 { font-size: clamp(28px, 8vw, 36px); }
  .ls-p2-zone { padding: 22px 20px; }
  .ls-p2-zone--execution .ls-p2-zone-stages { grid-template-columns: 1fr; }
  .ls-p2-solutions { padding: var(--ls-section-space-mobile) 0; }
  .ls-p2-solutions-intro h2 { font-size: clamp(28px, 8vw, 36px); }
  .ls-p2-solution-modules { grid-template-columns: 1fr; }
  .ls-p2-pathway { padding: var(--ls-section-space-mobile) 0; }
  .ls-p2-pathway-intro h2 { font-size: clamp(28px, 8vw, 36px); }
  .ls-p2-nav-hub { margin-bottom: 34px; padding: 20px 22px; }
  .ls-p2-nav-paths { grid-template-columns: 1fr; gap: 30px; }
  .ls-p2-nav-path::before { height: 18px; }
  .ls-p2-nav-path::after { bottom: calc(100% + 14px); }
}


/* Sprint 011 enterprise-luxury visual refinement — 2026-09-22 */
/*
 * Restrained rather than decorative: authoritative brand colors, editorial
 * spacing, squared instrument-panel geometry, and hairline structure replace
 * the rounded-card/gradient language common to generic generated websites.
 * Existing semantic markup and accessibility behavior remain unchanged.
 */
.ls-p1-hero {
  border-bottom: 1px solid rgba(10,37,64,.12);
  background: #F3F4F6;
}
.ls-p1-hero::before {
  background:
    linear-gradient(90deg, transparent 0 62%, rgba(0,115,170,.035) 62% 100%),
    linear-gradient(rgba(10,37,64,.035) 1px, transparent 1px);
  background-size: 100% 100%, 100% 36px;
}
.ls-p1-hero-copy {
  position: relative;
  padding-left: clamp(18px, 2.2vw, 30px);
}
.ls-p1-hero-copy::before {
  content: "";
  position: absolute;
  inset: .35rem auto .3rem 0;
  width: 2px;
  background: linear-gradient(180deg, #0073AA 0 58%, rgba(10,37,64,.14) 58%);
}
.ls-p1-hero h1 {
  max-width: 780px;
  color: #0A2540;
  font-weight: 650;
  letter-spacing: -.052em;
}
.ls-p1-hero-copy > p { color: #526174; max-width: 58ch; }
.ls-p1-btn { border-radius: 4px; box-shadow: none; }
.ls-p1-btn--primary {
  border-color: #0073AA;
  background: #0073AA;
  box-shadow: 0 12px 28px rgba(0,115,170,.16);
}
.ls-p1-btn--primary:hover { border-color: #005F8F; background: #005F8F; }
.ls-p1-btn--secondary { border-color: rgba(10,37,64,.28); border-radius: 4px; background: transparent; }
.ls-p1-flow-panel {
  max-width: 510px;
  border: 1px solid rgba(101,185,214,.2);
  border-radius: 6px;
  background: #0A2540;
  box-shadow: 24px 30px 0 rgba(0,115,170,.08), 0 32px 70px rgba(10,37,64,.24);
}
.ls-p1-flow-panel::before { border-radius: 6px; opacity: .16; }
.ls-p1-flow-status,
.ls-p1-flow-list li small { color: rgba(255,255,255,.68); }
.ls-p1-flow-status::before { background: #65B9D6; box-shadow: 0 0 0 3px rgba(101,185,214,.16); }
.ls-p1-flow-list li.is-active .ls-p1-flow-dot { border-color: #0073AA; background: #0073AA; }
.ls-p1-strip { margin-top: 0; border: 0; border-bottom: 1px solid rgba(10,37,64,.12); border-radius: 0; background: #FFFFFF; }
.ls-p1-strip-badge { border-radius: 4px; border-color: rgba(0,115,170,.22); box-shadow: none; }
.ls-p1-strip-item:hover { background: #F3F4F6; }
.ls-p1-strip-item:hover .ls-p1-strip-badge { border-color: #0073AA; background: #0073AA; }
.ls-p1-gap--warm { background: #F7F7F5; }
.ls-p1-gap-row { border-color: rgba(10,37,64,.14); }
@media (max-width: 1024px) {
  .ls-p1-flow-panel { box-shadow: 14px 18px 0 rgba(0,115,170,.07), 0 24px 54px rgba(10,37,64,.2); }
}
@media (max-width: 599px) {
  .ls-p1-hero-copy { padding-left: 16px; }
  .ls-p1-flow-panel { border-radius: 4px; box-shadow: 8px 10px 0 rgba(0,115,170,.07); }
}