/* ============================================================
   WEB VENTURES — CONCEPT 2 · FINAL REFINEMENT LAYER
   Loaded last, after phase2.css. Scoped strictly to the
   below-the-fold markup: .p2-section, .p2-partner,
   section.cta, footer — and their descendants only.
   Palette: existing :root tokens from style.css only.
   No new animations; reveal behavior is untouched.
   ============================================================ */

/* ---------- chaptering: roomier sections, alternating tone ---------- */
/* Coordinator correction (post-QA): the first pass spent the copy savings
   on desktop padding and desktop height grew +7.2% vs baseline. Desktop
   chapter padding is trimmed back toward (still above) the Phase 2 base
   so BOTH viewports end shorter; mobile values below are unchanged —
   mobile was already shorter and is the owner's review surface. */
.p2-section{padding:112px 0}
.p2-section.p2-a{background-color:var(--bg)}
.p2-section.p2-b{background-color:var(--bg2)}
.p2-section.p2-c{background-color:var(--bg)}
.p2-section.p2-d{background-color:var(--bg2)}
.p2-section.p2-e{background-color:var(--bg)}
.p2-partner{padding:84px 0}
section.cta{padding:120px 0}
footer{padding-top:72px}

/* ---------- section headlines: big, balanced, confident ---------- */
.p2-section h2{
  font-size:clamp(2.3rem, 5.2vw + .9rem, 4.6rem);
  line-height:1.04;
  letter-spacing:-.025em;
  text-wrap:balance;
}
/* secondary headlines stay clearly secondary */
.p2-partner h2{
  font-size:clamp(2rem, 3.8vw + .6rem, 3.15rem);
  line-height:1.06;
  text-wrap:balance;
}
section.cta h2{
  font-size:clamp(2.4rem, 5vw + .5rem, 3.9rem);
  line-height:1.05;
  text-wrap:balance;
}

/* ---------- labels stay labels: small mono, clear contrast ---------- */
.p2-section .eyebrow,
.p2-partner .eyebrow,
section.cta .eyebrow{
  font-size:11.5px;
  letter-spacing:.22em;
  color:var(--accent);
}

/* ---------- section entrances: space + a faint light, no dividers ---------- */
.p2-section .p2-head{
  margin-bottom:54px;
  padding-top:26px;
  background:radial-gradient(640px 240px at 16% 0%, rgba(168,200,255,.055), transparent 70%);
}

/* ---------- readability: shorter lines, calmer prose ---------- */
.p2-section .p2-head p.p2-lede{
  font-size:17.5px;
  line-height:1.65;
  max-width:62ch;
  margin-top:22px;
}
.p2-partner p{max-width:68ch}
.p2-section .p2-trad p{max-width:68ch}
.p2-section p.p2-screen-note{font-size:16px;line-height:1.6}
.p2-section .p2-effort p{font-size:16px}
section.cta p{line-height:1.65}

/* ---------- motion: one quiet hover fade, reduced-motion safe ---------- */
@media (prefers-reduced-motion: no-preference){
  .p2-section .btn,
  .p2-partner .btn,
  section.cta .btn{transition:opacity .25s ease}
}

/* ---------- tablet ---------- */
@media (max-width:900px){
  .p2-section{padding:136px 0}
  section.cta{padding:120px 0}
}

/* ---------- mobile: separation between text and demo panels ---------- */
@media (max-width:720px){
  .p2-section .p2-head{margin-bottom:46px}
  .p2-section .p2-call-grid{gap:42px}
  .p2-section .p2-vs{margin-top:52px}
  .p2-section .p2-board{gap:26px}
  .p2-section .p2-search-grid{gap:26px}
  .p2-section .p2-screener{margin-top:34px}
}
@media (max-width:640px){
  .p2-section{padding:118px 0}
  .p2-partner{padding:84px 0}
  section.cta{padding:110px 0}
}

/* ---------- small phones: per-headline tuning so nothing overflows ---------- */
@media (max-width:480px){
  .p2-section h2{font-size:2.24rem}
  .p2-section.p2-a h2{font-size:2.16rem}
  .p2-section.p2-d h2{font-size:2.08rem;line-height:1.08}
}