/* ==========================================================================
   SPEARPOINT ADVISORS — How It Works Page Stylesheet
   ==========================================================================
   Page-specific rules only. Loaded after style.css, so it can rely on all
   design tokens (--color-*, --space-*, --fs-*, --radius-*, --shadow-*,
   --transition-*) and shared components already defined there.

   Reuses as-is (no rules needed here): .hero-decor, .hero__cta-group,
   .eyebrow,
   .about-section__header, .risk-section__header/.risk-grid/.risk-item,
   .drivers-list/.drivers-list__item, .stats-grid--outcomes/.value-card
   (the homepage's service-card grid, reused for "The Services That Power
   the Process"), .founder-section__grid/__image-wrap/
   __image/__content, .achievement, .credentials/.credential-tag,
   .trades-tabs/.trades-tab/.trade-panel (the three detailed Gate sections
   are tabbed using the homepage's existing tabs engine, driven generically
   by initTradesTabs() in app.js — no JS changes needed), .cta-section,
   .btn — only the pieces below are new.
   ========================================================================== */

/* --- Hero — centered like the Services hero, with a row of three "gate
   preview" badges instead of Services' icon row or About's photo, so it
   reads as its own distinct moment while still previewing the framework
   the rest of the page walks through. --- */
.how-hero {
  padding-top: calc(var(--nav-height) + var(--space-12));
  position: relative;
  z-index: 1;
  background-color: var(--color-bg);
}

.how-hero__content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.how-hero__content h1 {
  margin-bottom: var(--space-6);
}

.how-hero__content p {
  margin: 0 auto var(--space-8);
}

.how-hero__content .hero__cta-group {
  justify-content: center;
}

.how-hero__gates {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-12);
}

.how-hero__gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.how-hero__gate-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: var(--fw-black);
  background: linear-gradient(135deg, var(--color-orange), var(--color-orange-hover));
  color: var(--color-white);
  box-shadow: 0 6px 18px rgba(232, 83, 14, 0.25);
}

.how-hero__gate-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-3);
}

.how-hero__gate-connector {
  width: 56px;
  height: 2px;
  margin-bottom: var(--space-6);
  background: linear-gradient(90deg, var(--color-orange), var(--color-border));
  flex-shrink: 0;
}

/* .trades-tabs (style.css) is a left-hugging flex row sized for the
   homepage's 6 scrollable trade tabs. This page only has 3 gate tabs, so
   left-hugging leaves a lot of empty space — make each tab flex-grow to
   fill the row evenly instead. Scoped to this page only; the homepage's
   6-tab scrollable row is unaffected. */
.gate-tabs-section .trades-tabs {
  overflow-x: visible;
  /* style.css's own padding-bottom + border-bottom on the container sits
     below each tab's border-bottom, so the active tab's orange underline
     reads as detached from the gray baseline under it. Drop both here and
     let every tab draw its own full-width border-bottom instead — active
     and inactive segments then form one continuous line. */
  padding-bottom: 0;
  border-bottom: none;
}

.gate-tabs-section .trades-tab {
  flex: 1;
  text-align: center;
  border-bottom: 2px solid var(--color-border);
}

/* .trades-tab.is-active (style.css) only sets border-bottom-color, but it
   has the same specificity (two classes) as the rule above and loads
   earlier, so the cascade let this file's gray border-bottom win even on
   the active tab. Re-assert the color here with one more class to break
   the tie. */
.gate-tabs-section .trades-tab.is-active {
  border-bottom-color: var(--color-orange);
}

/* --- "Who This Is For" owner profiles — the MD's four "The owner who..."
   sentences, one per card, instead of run-on prose. Breaks up what was
   reading as a wall of centered paragraphs. --- */
/* This page's "Who This Is Built For" header overrides the shared
   .section-header--split (heading left / text right) to stack centered
   instead, matching the centered card grid below it. */
.owner-profile-header {
  display: block;
  text-align: center;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.owner-profile-header .section-header__heading {
  margin-bottom: var(--space-4);
}

.owner-profile-header p {
  margin: 0 auto;
  max-width: none;
}

.owner-profile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  max-width: 1200px;
  margin: 0 auto var(--space-8);
}

/* Reuses the homepage 5 D's .risk-quote pull-quote treatment; just fixes
   this instance's width so it doesn't stretch full-bleed under the grid. */
.owner-profile-quote {
  max-width: 1100px;
  margin-top: var(--space-20);
  margin-bottom: var(--space-20);
}

.owner-profile-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.owner-profile-card:hover {
  border-color: var(--color-orange);
  transform: translateY(-3px);
}

.owner-profile-card__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: rgba(232, 83, 14, 0.1);
  color: var(--color-orange);
  font-size: var(--fs-md);
}

.owner-profile-card p {
  font-size: var(--fs-sm);
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
  margin-bottom: 0;
  text-align: left;
}

/* --- Narrative block — a side icon rail instead of another centered
   heading-plus-paragraph column, so this section reads differently from
   the ones around it. --- */
.narrative-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-8);
  align-items: start;
  max-width: 800px;
  margin: 0 auto;
}

.narrative-block__rail {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, var(--color-orange), var(--color-orange-hover));
  color: var(--color-white);
  font-size: var(--fs-xl);
  box-shadow: 0 8px 24px rgba(232, 83, 14, 0.25);
}

.narrative-block__content h3 {
  margin-bottom: var(--space-5);
}

.narrative-block__content p {
  margin-bottom: var(--space-5);
  text-align: left;
}

.narrative-block__content p:last-child {
  margin-bottom: 0;
}

/* --- Quote card — a heavier, more deliberate pull-quote treatment than
   the plain .risk-quote border-bar, used for the two narrative quotes on
   this page so they land as a distinct visual beat, not another paragraph. --- */
.quote-card {
  position: relative;
  max-width: 760px;
  margin: var(--space-10) auto 0;
  padding: var(--space-8) var(--space-10);
  background: linear-gradient(160deg, rgba(232, 83, 14, 0.07), transparent);
  border: 1px solid rgba(232, 83, 14, 0.2);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.quote-card__mark {
  position: absolute;
  top: var(--space-4);
  left: var(--space-6);
  font-size: 3rem;
  color: rgba(232, 83, 14, 0.15);
  z-index: 0;
}

.quote-card blockquote {
  position: relative;
  z-index: 1;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  font-style: italic;
  color: var(--color-text);
  line-height: var(--lh-relaxed);
  text-align: center;
}

/* --- Gate detail sections (the three full "Discover / Prepare / Decide"
   write-ups). Each carries a large faint gate-number mark in the corner,
   same visual idea as the About/Services corner-mark pattern, reimplemented
   locally here per the per-page-CSS convention. --- */
.gate-section {
  position: relative;
  z-index: 1;
}

.gate-section__mark {
  position: absolute;
  top: var(--space-10);
  right: var(--space-10);
  line-height: 1;
  color: rgba(232, 83, 14, 0.07);
  pointer-events: none;
  z-index: -1;
  user-select: none;
}

.gate-section__mark--number {
  font-size: 11rem;
  font-weight: var(--fw-black);
}

.gate-section__header {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto var(--space-10);
  text-align: center;
}

.gate-section__header h2 {
  margin: var(--space-2) 0 var(--space-3);
}

/* Overrides style.css's global `p { max-width: 65ch }` readability cap,
   which otherwise shrinks this <p> to a narrower box than its centered
   980px parent — leaving it flush left instead of centered under the h2. */
.gate-section__subheading {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: var(--color-text-3);
  font-style: italic;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.gate-section__content {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
}

/* Same global 65ch cap applies here — without this, each paragraph shrinks
   to its own narrower box instead of filling the 980px content column. */
.gate-section__content p {
  max-width: none;
  margin-bottom: var(--space-5);
}

/* --- Key Outcomes line — label + the MD's own inline "·"-separated text
   run, not converted into a bulleted list (matches the source formatting). --- */
.gate-outcomes {
  margin: var(--space-8) 0;
  padding: var(--space-6);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.gate-outcomes__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: var(--space-3);
}

.gate-outcomes__text {
  font-size: var(--fs-sm);
  color: var(--color-text-2);
  line-height: var(--lh-relaxed);
  max-width: none;
  margin-bottom: 0;
}

/* --- Pull quotes outside the narrow homepage teaser card — same visual
   language as .process-step__quote (italic, orange border-left) sized for
   full-width prose instead of a 340px card column. --- */
.gate-quote {
  max-width: 900px;
  margin: var(--space-8) auto;
  padding-left: var(--space-6);
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  font-style: italic;
  color: var(--color-text);
  line-height: var(--lh-relaxed);
  border-left: 3px solid var(--color-orange);
}

/* Extra breathing room above this instance — sits right under the
   timeline's last item and otherwise reads as stuck to it. */
#timeline .gate-quote {
  margin-top: var(--space-16);
}

.gate-section__pills-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-3);
  margin-bottom: var(--space-3);
}

/* --- Coaching-methodology comparison — this page's key differentiator
   argument, rebuilt as a single row-by-row comparison table instead of two
   blocks of prose. Each row pairs one "old way" line against its direct
   "Spearpoint way" counterpart with an x/check mark, so the contrast reads
   point-for-point rather than as two paragraphs the reader has to
   cross-reference themselves. The right column carries a continuous
   orange tint down the whole table so the eye tracks it as one column,
   not five separate highlighted cells. --- */
.difference-section .about-section__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--space-16);
}

.comparison-table {
  max-width: 1100px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.comparison-table__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.comparison-table__header-label {
  padding: var(--space-5) var(--space-8);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

.comparison-table__header-label--before {
  background-color: var(--color-surface);
  color: var(--color-text-4);
}

.comparison-table__header-label--after {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: linear-gradient(135deg, var(--color-orange), var(--color-orange-hover));
  color: var(--color-white);
}

.comparison-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--color-border);
}

.comparison-row__cell {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-8);
  transition: background-color var(--transition-base);
}

.comparison-row__cell i {
  flex-shrink: 0;
  margin-top: 5px;
  font-size: var(--fs-md);
}

.comparison-row__cell p {
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  max-width: none;
  margin-bottom: 0;
}

.comparison-row__cell--before {
  background-color: var(--color-bg);
}

.comparison-row__cell--before i {
  color: var(--color-text-4);
}

.comparison-row__cell--before p {
  color: var(--color-text-2);
}

.comparison-row__cell--after {
  background-color: rgba(232, 83, 14, 0.06);
  border-left: 1px solid rgba(232, 83, 14, 0.15);
}

.comparison-row__cell--after i {
  color: var(--color-orange);
}

.comparison-row__cell--after p {
  color: var(--color-text);
  font-weight: var(--fw-semibold);
}

.comparison-row:hover .comparison-row__cell--after {
  background-color: rgba(232, 83, 14, 0.11);
}

/* Icon-badge variant of .drivers-list__number, reused for "The Services
   That Power the Process" (icons instead of digits) — same override as
   services.css uses for its own icon-badge drivers-list instance. */
.drivers-list__number i {
  font-size: var(--fs-md);
}

/* --- "What a Typical Process Looks Like Over Time" — a vertical timeline
   variant of .drivers-list instead of the default 2-col icon+text grid: a
   left-hand spine with each step's number marker sitting on the line and
   its write-up to the right of it. Scoped to .timeline-list so the other
   .drivers-list instances on this page (Services That Power the Process)
   keep their default layout. --- */
.timeline-list {
  position: relative;
  display: block;
  max-width: 1000px;
}

.timeline-list::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 22px;
  width: 2px;
  background: linear-gradient(180deg, var(--color-orange) 0%, var(--color-orange) 88%, rgba(232, 83, 14, 0) 100%);
}

.timeline-list .drivers-list__item {
  position: relative;
  display: block;
  padding-left: var(--space-16);
  padding-bottom: var(--space-16);
}

.timeline-list .drivers-list__item:last-child {
  padding-bottom: 0;
}

/* Overrides style.css's global `p { max-width: 65ch }` readability cap,
   which otherwise shrinks this text narrower than the widened timeline
   column instead of filling it. */
.timeline-list .drivers-list__text {
  max-width: none;
}

.timeline-list .drivers-list__number {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  border: 4px solid var(--color-surface);
}

/* "The Services That Power the Process" reuses the homepage's .value-card
   grid as-is (same markup, same tilt hover), but that card's default
   background is var(--color-surface) — identical to this section's own
   .section--charcoal tone, so cards would blend into the section instead
   of standing off it. Give them the section--dark tone instead for
   contrast, without changing the section's own background. */
#services-power .value-card {
  background-color: var(--color-bg);
}

/* --- Adjust the split-panel visual size to match content height on desktop --- */
@media (min-width: 769px) {
  #advisor-vs-process .split-panel__visual {
    align-self: stretch;
    height: 100%;
    aspect-ratio: auto;
  }
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .gate-section__mark--number {
    font-size: 8rem;
  }

  .owner-profile-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  /* Centered by design on tablet/desktop (see base rules above);
     left-aligned on phones only. */
  .how-hero__content,
  .gate-tabs-section .trades-tab,
  .owner-profile-header,
  .quote-card blockquote,
  .gate-section__header,
  .difference-section .about-section__header {
    text-align: left;
  }

  .timeline-list .drivers-list__item {
    padding-bottom: var(--space-10);
  }

  .comparison-table__header {
    grid-template-columns: 1fr;
  }

  .comparison-table__header-label--before {
    display: none;
  }

  .comparison-row {
    grid-template-columns: 1fr;
  }

  .comparison-row__cell--before {
    border-bottom: 1px solid var(--color-border);
  }

  .comparison-row__cell--after {
    border-left: none;
  }

  .gate-section__mark {
    top: var(--space-6);
    right: var(--space-6);
  }

  .gate-section__mark--number {
    font-size: 5.5rem;
  }

  .how-hero__gates {
    gap: var(--space-2);
  }

  .how-hero__gate-connector {
    width: 24px;
  }

  .how-hero__gate-num {
    width: 40px;
    height: 40px;
  }

  .narrative-block {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: left;
  }

  .owner-profile-grid {
    grid-template-columns: 1fr;
  }

  .narrative-block__content p {
    text-align: left;
  }

  .quote-card {
    padding: var(--space-6);
  }
}