/* =====================================================================
   v2-funnel.css — AGENT-FUNNEL layer (2026-06-09).
   Pricing gateway banner + First Lesson money-page layout.
   Enqueued site-wide after pages.css; every selector is namespaced under
   .v2-gateway / .v2-fl- / .v2-book- / .v2-pkg- / .v2-whatbox- classes that
   exist ONLY in page-pricing.php and page-trial.php. Brand palette only;
   no animation (sticky is not motion); AA-checked text colors:
   - gold #E1B778 used as TEXT only on navy #2B3F58 (5.7:1, AA pass);
     never on cream/white.
   ===================================================================== */

/* ---------------------------------------------------------------------
   PRICING · Stage 1 gateway banner (Gemini move 3).
   Full-width editorial banner, gold hairline frame, seal + refund lockup.
   Deliberately NOT a card: no shadow, no badge, no price-anchoring grid.
   --------------------------------------------------------------------- */
.v2-gateway {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  border: 1px solid var(--gold);
  border-radius: 4px; /* near-square: editorial frame, not a SaaS card */
  padding: clamp(2.2rem, 5vw, 4rem) clamp(1.6rem, 5vw, 4rem);
  margin-bottom: var(--breath-sm);
  background: var(--cream);
}
.v2-gateway__body h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.06;
  margin: 0.4rem 0 1.2rem;
}
.v2-gateway__lede {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink-60);
  line-height: 1.6;
  margin: 0 0 1.1rem;
  max-width: 52ch;
}
.v2-gateway__meta {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-60);
  letter-spacing: 0.02em;
  margin: 0 0 1.8rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
  max-width: 56ch;
}
/* Guarantee lockup: seal (hanko) + price + 100%-refundable line */
.v2-gateway__lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.35rem;
  padding: 1.4rem 1rem;
  border-left: 1px solid var(--hairline);
}
.v2-gateway__seal {
  width: 60px;
  height: 60px;
  object-fit: contain;
  opacity: 0.92;
  margin-bottom: 0.5rem;
}
.v2-gateway__price {
  font-family: var(--serif);
  font-size: clamp(3.6rem, 6vw, 5.2rem);
  font-weight: 500;
  line-height: 1;
  color: var(--navy);
  letter-spacing: -0.02em;
}
.v2-gateway__price sup { font-size: 0.38em; vertical-align: super; font-weight: 600; }
.v2-gateway__per {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-60);
}
.v2-gateway__refund {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--navy);
  margin-top: 0.6rem;
  max-width: 24ch;
  line-height: 1.45;
}
@media (max-width: 920px) {
  .v2-gateway { grid-template-columns: 1fr; gap: 1.8rem; }
  .v2-gateway__lockup {
    border-left: 0;
    border-top: 1px solid var(--hairline);
    padding: 1.6rem 0 0.2rem;
  }
}

/* ---------------------------------------------------------------------
   FIRST LESSON · compact offer card (VERDICT DELTA 5, 2026-06-10).
   The what's-included card now ALSO sits above the calendar as a tight,
   CTA-less strip (the calendar is directly below it). Mobile is deliberately
   dense so the calendar lands within ~2 screens at 390px.
   --------------------------------------------------------------------- */
/* NOTE: .what-box/.what-box h3 are declared in page-trial.php's inline <style>,
   which loads AFTER this enqueued file — so the compact overrides below use
   the compound .what-box.v2-offer selector to win on specificity, not order. */
section.v2-offer-blk { padding: clamp(2.2rem, 5vh, 3.5rem) 0 clamp(1.8rem, 4vh, 3rem); }
.what-box.v2-offer { padding: 1.8rem 2.2rem 2rem; }
.what-box.v2-offer h3 { font-size: 1.35rem; margin: 0 0 1.1rem; }
@media (min-width: 921px) {
  .what-box.v2-offer .what-list { grid-template-columns: 1fr 1fr; gap: 0.8rem 2.4rem; }
}
@media (max-width: 920px) {
  .what-box.v2-offer { padding: 1.4rem 1.2rem 1.5rem; }
  .what-box.v2-offer .what-list { gap: 0.6rem; }
  .what-box.v2-offer .what-list li { font-size: 0.95rem; }
}

/* ---------------------------------------------------------------------
   FIRST LESSON · two-column walkthrough with sticky value box
   (Gemini move 7). Sticky lives on the aside grid item, bounded by the
   .v2-fl-cols row height — it can never reach the footer (footer-safe).
   DELTA 5 reorder: this section now sits BELOW the calendar; the sticky
   value column rides alongside the long-read, keeping the offer + a route
   back to #book in view for desktop scrollers. On mobile the aside is
   hidden — its content is fully present in the offer card above the
   calendar, and stacking it again after the walkthrough would just
   duplicate the list a screen later.
   --------------------------------------------------------------------- */
.v2-fl-cols { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.v2-fl-after { margin-top: 3.2rem; }
@media (min-width: 921px) {
  .v2-fl-cols {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
  }
  /* walkthrough steps stack vertically inside the narrower left column */
  .v2-fl-cols .lesson-detail { grid-template-columns: 1fr; gap: 2.6rem; margin: 3rem 0; }
  .v2-fl-aside {
    position: sticky;
    top: 96px; /* clears the fixed header (~81px) with breathing room */
  }
}
@media (max-width: 920px) {
  .v2-fl-aside { display: none; } /* content lives in .v2-offer above #book */
}
.v2-whatbox-cta {
  width: 100%;
  justify-content: center;
  margin-top: 1.6rem;
}

/* ---------------------------------------------------------------------
   FIRST LESSON · booking section header (Gemini copy #2)
   --------------------------------------------------------------------- */
.v2-book-guarantee {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--gold); /* gold on navy band: 5.7:1, AA pass */
  margin: 0 0 1.1rem;
}
/* Package-mode context line (?pkg=5|10) — honest wayfinding, no urgency */
.v2-pkg-note {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--cream);
  background: rgba(244, 241, 232, 0.08);
  border-left: 2px solid var(--gold);
  padding: 0.7rem 1rem;
  margin: 0 0 1.2rem;
  max-width: 46ch;
}

/* Quiz-result greeting (VERDICT DELTA 7) — quiet, on the navy band only.
   #cfd6df on navy #2B3F58 ≈ 7.1:1 (the band's standard body tint, AA pass). */
.v2-lvl-note {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.5;
  color: #cfd6df;
  margin: 0 0 1.1rem;
  max-width: 46ch;
}

/* ---------------------------------------------------------------------
   FIRST LESSON · risk-objection FAQs directly under the calendar
   (VERDICT DELTA 5b). Cream card on the navy band; the .faq-* components
   inside render exactly as on light pages (navy text on cream, AA).
   Kicker inside uses --gold-text (gold-on-light AA rule).
   --------------------------------------------------------------------- */
.v2-book-faqs {
  background: var(--cream);
  border-radius: 14px;
  padding: 1.8rem 2rem 2rem;
  max-width: 860px;
  margin: 3.2rem auto 0;
}
.v2-book-faqs .kicker { color: var(--gold-text); margin-bottom: 1rem; }
@media (max-width: 920px) {
  .v2-book-faqs { padding: 1.3rem 1.1rem 1.4rem; margin-top: 2.2rem; }
}

/* ARIA accordion enhancement (same pattern as page-faq.php's inline CSS),
   scoped to the .v2-faq lists that exist only on page-trial.php.
   .faq-enhanced is added by v2-trial.js ONLY after the JS enhancement
   succeeded; without JS the components.css display toggle still applies. */
.v2-faq.faq-enhanced .faq-a { display: grid; grid-template-rows: 0fr; padding-top: 0; padding-bottom: 0; }
.v2-faq.faq-enhanced .faq-item.open .faq-a { display: grid; grid-template-rows: 1fr; padding-bottom: 1.4rem; }
.v2-faq.faq-enhanced .faq-a-inner { overflow: hidden; min-height: 0; visibility: hidden; }
.v2-faq.faq-enhanced .faq-item.open .faq-a-inner { visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .v2-faq.faq-enhanced .faq-a { transition: grid-template-rows 0.38s var(--ease-out), padding-bottom 0.38s var(--ease-out); }
  .v2-faq.faq-enhanced .faq-a-inner { transition: visibility 0s 0.38s; }
  .v2-faq.faq-enhanced .faq-item.open .faq-a-inner { transition: visibility 0s; }
}
html.no-js .v2-faq .faq-a { display: block; }