/* ============================================================
   WEB VENTURES — CONCEPT 2 · MOBILE CLEAN (additive layer)
   Loaded LAST, after refined.css. All new CSS for this stage
   lives here. Existing tokens only (--bg/--accent/--violet…).
   Height is saved by content + spacing discipline — never by
   shrinking type below the base sizes or tap targets <44px.
   ============================================================ */

/* ---------- spacing discipline (overrides refined.css values) ---------- */
.p2-section{padding:88px 0}
.p2-partner{padding:60px 0}
section.cta{padding:84px 0}
footer{padding-top:44px}
.p2-section .p2-head{margin-bottom:38px;padding-top:8px}
.p2-section .p2-head p.p2-lede{margin-top:16px}
.p2-next{margin-top:26px}
footer a{padding-top:4px;padding-bottom:4px}
.foot{gap:28px}

/* ---------- hero: room to breathe, especially on mobile ---------- */
.hero .eyebrow{margin-bottom:20px}
.hero-sub{margin:26px 0 30px}
@media(max-width:640px){
  .hero{padding:132px 0 88px;min-height:0}
  .hero-sub{margin:30px 0 38px}
  .hero-ctas{gap:16px}
}

/* ---------- chapter openings: number + service name at display scale ---------- */
.mc-chapter{display:flex;align-items:center;gap:20px;margin-bottom:24px}
.mc-chapter-num{font-family:var(--font-d);font-weight:700;font-size:clamp(52px,7.5vw,84px);line-height:.9;letter-spacing:-.03em;color:var(--accent)}
.p2-a .mc-chapter-num{color:var(--violet)}
.p2-b .mc-chapter-num{color:var(--accent)}
.p2-c .mc-chapter-num{color:var(--accent2)}
.p2-d .mc-chapter-num{color:var(--violet)}
.p2-e .mc-chapter-num{color:var(--accent)}
.mc-chapter-name{font-family:var(--font-d);font-weight:700;font-size:clamp(42px,6.2vw,72px);line-height:.98;letter-spacing:-.02em;color:var(--text)}
/* C's kept headline sentence, set as a statement under the H2 */
.mc-statement{font-family:var(--font-s);font-style:italic;color:var(--accent2)}

/* ---------- A · employee trio: elegant rows, line icons, chips ---------- */
.mc-trio{margin-top:28px;border-top:1px solid var(--line)}
.mc-emp{display:flex;gap:16px;align-items:flex-start;padding:15px 2px;border-bottom:1px solid var(--line)}
.mc-ico{width:26px;height:26px;flex:none;color:var(--accent);margin-top:2px}
.mc-emp-body{flex:1;min-width:0}
.mc-emp-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.mc-emp b{color:#fff;font-size:16px}
.mc-emp p{font-size:14.5px;margin-top:3px}
.mc-chip{font-family:var(--font-m);font-size:9.5px;letter-spacing:.13em;color:var(--violet);border:1px solid rgba(139,124,246,.5);padding:4px 8px;border-radius:999px;text-transform:uppercase;white-space:nowrap}

/* ---------- A · pricing: three scannable cards + Plan details ---------- */
.mc-plans{display:grid;gap:12px;margin-top:26px}
.mc-plan{border:1px solid var(--line2);border-radius:16px;padding:18px;background:linear-gradient(180deg,var(--card2),var(--card))}
.mc-plan h4{margin:0;color:#fff;font-size:17px}
.mc-price{font-size:38px;font-weight:700;color:#fff;line-height:1.05;margin-top:6px}
.mc-price span{font-size:15px;font-weight:500;color:var(--muted)}
.mc-setup{color:var(--accent);font-family:var(--font-m);font-size:12.5px;letter-spacing:.04em;margin-top:4px}
.mc-inc{font-size:14.5px;margin-top:8px}
.mc-plan-cta{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;color:#fff;font-weight:600;font-size:14px;text-decoration:none}
.mc-plan-cta:hover{color:var(--accent2)}
.mc-details{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:0 16px;background:rgba(255,255,255,.02)}
.mc-details summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:#fff;font-weight:600;font-size:14.5px}
.mc-details-body{padding:2px 0 16px;font-size:14px}
.mc-details-body p + p{margin-top:8px}

/* ---------- A · console: labeled stages at the top ---------- */
.mc-stages{display:flex;gap:10px 16px;flex-wrap:wrap;padding:14px 20px 2px}
.mc-stage{display:flex;align-items:center;gap:8px;font-family:var(--font-m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mc-stage i{width:26px;height:4px;border-radius:2px;background:rgba(255,255,255,.14);flex:none}
.mc-stage i.on{background:var(--accent)}
.mc-stage:has(> i.on){color:var(--accent2)}

/* ---------- A · transcript progressive disclosure ---------- */
.mc-tbar{margin:10px 20px 0}
.mc-tbar-btn{width:100%;min-height:44px;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:8px 14px;border-radius:12px;border:1px dashed rgba(168,200,255,.35);background:rgba(168,200,255,.05);color:var(--muted);font-family:var(--font-m);font-size:11px;letter-spacing:.06em;cursor:pointer;text-align:left}
.mc-tbar-action{color:var(--accent);white-space:nowrap}
.p2-line.mc-old{display:none}

/* ---------- E · illuminated nodes, depth, selection pulses ---------- */
.p2-diagram .p2-node circle{filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.p2-diagram .p2-node.sel circle{fill:#1a2745;stroke:var(--accent);filter:drop-shadow(0 0 16px rgba(168,200,255,.65))}
.p2-diagram .p2-link.hot{filter:drop-shadow(0 0 6px rgba(168,200,255,.7))}
.mc-pulse{fill:var(--accent);opacity:0;pointer-events:none}
.mc-pulse.hot{opacity:.95}

/* ---------- footer: two link columns side by side on mobile ---------- */
@media(max-width:800px){
  .foot{grid-template-columns:1fr 1fr}
  .foot > div:first-child{grid-column:1/-1}
}

/* ---------- tablet / mobile internal gaps ---------- */
@media(max-width:900px){
  .p2-section{padding:76px 0}
  .p2-map{min-height:280px}
}
@media(max-width:720px){
  .p2-section .p2-head{margin-bottom:34px}
  .p2-section .p2-call-grid{gap:34px}
  .p2-section .p2-vs{margin-top:36px}
  .p2-section .p2-board{gap:20px}
  .p2-section .p2-search-grid{gap:20px}
  .p2-section .p2-screener{margin-top:22px;padding:22px}
  .p2-device-cap{margin-top:36px}
  .p2-caption{margin-top:18px;padding:20px 22px}
  .p2-effort{margin-top:20px}
  .p2-progress{display:grid;grid-template-columns:1fr 1fr}
  .p2-progress div{border-bottom:1px solid var(--line)}
  .p2-sys-steps{display:grid;grid-template-columns:1fr 1fr}
  .p2-sys-steps div{min-width:0}
}
@media(max-width:640px){
  .p2-section{padding:52px 0}
  .p2-partner{padding:52px 0}
  section.cta{padding:64px 0}
  .p2-post-img{height:104px}
  .mc-chapter{gap:14px}
}

/* ---------- reduced motion: diagram static and complete ---------- */
@media(prefers-reduced-motion:reduce){
  .mc-pulse{display:none}
  .p2-diagram .p2-node.sel circle{filter:none}
  .p2-diagram .p2-link.hot{filter:none}
}

/* ---------- round 2: height discipline (measured, see BUILD-NOTES) ---------- */
.mc-plan{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:start}
.mc-plan h4{grid-column:1}
.mc-price{grid-column:1;font-size:34px}
.mc-setup{font-size:12.5px}
.mc-inc{grid-column:1/-1}
.mc-plan-cta{grid-column:2;grid-row:1/3;align-self:center;margin-top:0}
.mc-stages{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mc-stage{flex-direction:column;align-items:stretch;gap:6px;text-align:center}
.mc-stage i{width:auto}
footer a{line-height:1.35}
.legal{margin-top:22px;padding-top:16px}
@media(max-width:720px){
  .p2-section .p2-head{margin-bottom:26px}
  .mc-chapter{margin-bottom:18px}
  .p2-section .p2-call-grid{gap:28px}
  .p2-section .p2-vs{margin-top:28px}
  .p2-section .p2-screener{margin-top:16px}
  .p2-progress{grid-template-columns:repeat(4,1fr);margin-top:22px}
  .p2-progress div{padding:13px 10px}
  .p2-effort{margin-top:16px}
  .p2-node-chips{margin-top:12px}
  .p2-node-chips button{padding:0 12px}
  .p2-site-chips{gap:8px}
  .p2-site-chips button{padding:0 13px}
  .p2-qchips button{padding:0 12px}
  .p2-device-cap{margin-top:30px}
}
@media(max-width:640px){
  .p2-section{padding:40px 0}
  .p2-partner{padding:44px 0}
  section.cta{padding:56px 0}
  .hero{padding-bottom:72px}
  .p2-wave{height:52px;padding-top:6px}
  .p2-console-head{padding-top:12px;padding-bottom:12px}
  .mc-stages{padding-top:10px}
  .p2-callmeta{padding-top:10px}
  .p2-capgrid{grid-template-columns:repeat(2,1fr);gap:8px 14px}
  .p2-captured{padding:14px 16px}
  .p2-sales{margin:12px 20px 16px;padding:16px}
  .p2-trio,.mc-trio{margin-top:22px}
  .mc-emp{padding:12px 2px}
  .p2-demo-call{padding:18px 20px}
  .p2-screener{padding:20px}
  .p2-search-panel{padding:22px;gap:12px}
  .p2-result{padding:13px 15px}
  .p2-map{min-height:250px}
  .p2-work{padding:18px}
  .p2-post-img{height:92px}
  .p2-sys-steps div{padding:13px 15px}
  .p2-caption{padding:18px 20px}
  .p2-partner .p2-partner-in{gap:24px}
}
@media(max-width:480px){
  .p2-progress div{padding:12px 8px}
  .p2-progress b{font-size:14.5px}
}

/* ---------- round 3: final height trim (measured, see BUILD-NOTES) ---------- */
@media(max-width:720px){
  .p2-section .p2-head{margin-bottom:22px}
  .p2-next{margin-top:20px}
  .p2-vs-panels{margin-top:20px}
  .p2-head p.p2-lede + p.p2-lede{margin-top:8px}
}
@media(max-width:640px){
  .p2-section{padding:36px 0}
  .hero{padding-bottom:64px}
  .mc-plan{padding:15px 16px}
  .mc-plans{gap:10px}
  .p2-demo-call{margin-top:24px}
  .p2-console-foot{padding:10px 20px 14px}
  .p2-bubbles{min-height:120px}
  .p2-chat{padding:20px}
  .p2-searchbar{padding:12px 18px}
  .p2-map{min-height:230px}
  .p2-post-img{height:84px}
  .p2-effort{padding:18px 20px}
  .p2-work .p2-work-k{margin-bottom:10px}
  .p2-queue-item{padding:10px 12px}
  .p2-partner p{margin-top:10px}
  footer{padding-bottom:28px}
  .foot{gap:22px}
}

/* ---------- round 4: margin of safety under the height ceiling ---------- */
@media(max-width:720px){
  .mc-chapter{margin-bottom:16px}
  .p2-section .p2-head{padding-top:4px}
  .p2-section .p2-head p.p2-lede{margin-top:12px}
}
@media(max-width:640px){
  .p2-section{padding:32px 0}
  .p2-partner{padding:40px 0}
  section.cta{padding:52px 0}
  section.cta p{margin-top:14px;margin-bottom:22px}
  .hero{padding-top:124px}
  .p2-wave{height:48px}
  .mc-details{margin-top:10px}
  .p2-device-cap{margin-top:26px}
  #searchProgress{margin-top:18px}
  .p2-caption{margin-top:14px}
  .p2-sys-steps{margin-top:24px}
  .legal{margin-top:18px}
}

/* ---------- round 5: card price row + anchor landing ---------- */
.p2-section{scroll-margin-top:64px}
.mc-plan-cta{grid-row:1}
.mc-price{grid-column:1/-1}
.mc-setup{white-space:nowrap}
