/* ── PAGE HERO / SECTION COMPACTING — services.html packs a hero, a
       discovery banner, and a 4-card grid before any scrolling. Trimmed here
       (page-unique spacing only, per CLAUDE.md CSS ownership rule) so the
       package cards land in the first viewport instead of below the fold. ── */
    .page-hero-compact { padding: 12px 0 12px; }
    .page-hero-compact .eyebrow { margin-bottom: 6px; }
    .page-hero-compact h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom: 8px; }
    .page-hero-compact p { margin-bottom: 0; }
    .pricing-section { padding-top: 14px; }

    /* ── BOUNDARY NOTE — "coaching is not therapy" is significant enough
       that visitors should see it upfront, not as a muted footnote. Same
       linen + gold-left-border language as .legal-highlight on
       disclaimer.html, scaled down to sit inside the compact hero. ── */
    .services-boundary-note {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      background: var(--color-linen);
      border-left: 3px solid var(--color-gold);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      padding: 12px 16px;
      margin-top: 14px;
      max-width: 700px;
    }
    .services-boundary-note svg {
      flex-shrink: 0;
      width: 17px;
      height: 17px;
      margin-top: 2px;
      color: var(--color-gold);
    }
    .services-boundary-note p {
      margin: 0;
      font-size: 0.82rem;
      color: var(--color-oud);
      line-height: 1.55;
    }
    .services-boundary-note p strong { color: var(--color-oud); }

    /* ── DISCOVERY CALL STRIP — Seeker's call is a lead-in, not a package,
       so it sits above the pkg-ov-card grid as a lightweight banner. Gold
       treatment mirrors .pkg-ov-featured so it reads as an inviting first
       step, not just another dashed-border notice box. ── */
    .pkg-discovery-strip {
      display: flex;
      align-items: center;
      gap: 22px;
      background: linear-gradient(135deg, #FFFCF3 0%, var(--color-linen) 100%);
      border: 1.5px solid var(--color-gold);
      border-radius: 16px;
      padding: 12px 28px;
      box-shadow: 0 8px 28px rgba(201,168,76,0.16);
    }
    .pkg-discovery-icon {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      color: var(--color-gold);
    }
    .pkg-discovery-icon svg { width: 100%; height: 100%; }
    .pkg-discovery-copy { flex: 1; min-width: 0; }
    .pkg-discovery-badge {
      display: inline-block;
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--color-oud);
      background: var(--color-gold);
      padding: 4px 12px;
      border-radius: 20px;
      margin-bottom: 6px;
    }
    .pkg-discovery-copy p { font-size: 1rem; color: var(--color-oud); margin: 0; line-height: 1.5; }
    .pkg-discovery-copy p strong { font-family: var(--font-brand); font-weight: 600; }
    .pkg-discovery-cta { width: auto; flex-shrink: 0; padding: 14px 32px; }
    @media (max-width: 600px) {
      .pkg-discovery-strip { flex-direction: column; align-items: flex-start; }
      .pkg-discovery-icon { display: none; }
      .pkg-discovery-cta { width: 100%; }
    }

    /* ── PACKAGE CARDS ── */
    .pkg-overview-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
      margin-top: 32px;
      padding-top: 4px;
      align-items: stretch;
    }
    /* .pkg-ov-compact — was a density pass to help the 4-card grid clear
       the fold underneath the old discovery-call strip (now removed). Kept
       scoped to this page via the .pkg-ov-compact wrapper class (still on
       the grid div in services.html) rather than bare .pkg-ov-card, since
       that selector is shared with index.html's pricing teaser — per
       CLAUDE.md CSS ownership rule, shared selectors' own spacing must stay
       owned by style.css, page CSS may only override via a scoped class.
       Values below are now MORE generous than style.css's own defaults,
       for a more elegant, readable card on this page specifically. ── */
    .pkg-ov-compact .pkg-ov-card { padding: 26px 24px 24px; }
    .pkg-ov-compact .pkg-ov-meta { margin-bottom: 20px; }
    .pkg-ov-compact .pkg-ov-desc { margin-bottom: 16px; line-height: 1.7; }
    .pkg-ov-compact .pkg-ov-features { gap: 10px; margin-bottom: 20px; }
    .pkg-ov-compact .pkg-ov-features li { line-height: 1.55; }
    .pkg-ov-compact .pkg-ov-cta { padding: 15px 0; }

    /* .pkg-ov-card / .pkg-ov-rim-badge / .pkg-ov-featured / .pkg-ov-premium
       and all card-internal typography live in style.css (shared component). */

    /* Page-specific card density (4-col comparison grid is tighter than the 3-col teaser) */
    .pkg-ov-price-sub { margin-bottom: 14px; }
    .pkg-ov-divider { margin: 12px 0 10px; }
    .pkg-ov-actions { gap: 10px; }

    /* ── COMPARE TOGGLE ── */
    .compare-toggle-row {
      text-align: center;
      margin-top: 28px;
    }
    .compare-panel[hidden] { display: none; }
    .compare-panel { margin-top: 20px; }

    /* Fixed layout so the longer "Discovery Conversation" header wraps
       onto two lines instead of stretching its column wider than the
       other four (Awakening/Explorer/Alchemist/Sage stay equal width). */
    .compare-table { table-layout: fixed; }
    .compare-table th { white-space: normal; word-wrap: break-word; }

    /* ── TABLE SHARED ── */
    .seeker-head-sub {
      display: block;
      font-size: 0.62rem;
      font-weight: 400;
      margin-top: 3px;
      font-family: var(--font-body);
      color: rgba(250,247,242,0.55);
    }
    .col-popular-head-sub,
    .col-best-head-sub {
      display: block;
      font-size: 0.6rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-top: 4px;
      font-family: var(--font-body);
      font-weight: 500;
      opacity: 0.75;
    }
    .check { color: var(--color-cognac); font-size: 1.1em; }
    .dash { opacity: 0.35; }
    .table-note {
      font-size: 0.78rem;
      color: var(--color-muted);
      text-align: center;
      margin-top: 20px;
    }

    /* ── WHAT'S INCLUDED ── */
    .what-included {
      background: var(--color-linen);
      border-radius: var(--card-radius);
      padding: 48px;
      margin-top: 64px;
      border: var(--border-default);
    }
    .what-included h3 { margin-bottom: 6px; }
    .included-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
    .included-item { display: flex; gap: 14px; align-items: flex-start; }
    .included-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: var(--color-ivory);
      border: var(--border-default);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }
    .included-icon svg { width: 16px; height: 16px; stroke: var(--color-cognac); fill: none; stroke-width: 1.5; stroke-linecap: round; }
    .included-text h4 { font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; color: var(--color-oud); margin-bottom: 3px; }
    .included-text p { font-size: 0.78rem; color: var(--color-muted); line-height: 1.6; }

    /* Solid gold CTA */
    .btn-gold-solid      { background: var(--color-gold) !important; color: var(--color-oud) !important; border: none !important; }
    .btn-gold-solid:hover { filter: brightness(0.9); color: var(--color-oud) !important; transform: translateY(-1px); }

    @media (max-width: 900px) {
      .pkg-overview-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
      .included-grid { grid-template-columns: 1fr 1fr; }
      .compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    }
    @media (max-width: 480px) {
      .pkg-overview-grid { grid-template-columns: 1fr; }
      .included-grid { grid-template-columns: 1fr; }
    }