/* ── assets/css/landing.css ──────────────────────────────────────────
   Shared landing-page styles for the conversion-focused templates:
   includes/vertical-page.php (specialist book types, /book-printing-services/<slug>)
   includes/market-page.php   (audience markets,        /markets/<slug>)

   All classes are vp- prefixed and were previously inlined in
   vertical-page.php. Extracted 2026-06-05 so both templates share one
   source of truth. Loaded after base.css; before any per-page <style>. */

/* ── Hero ──────────────────────────────────────────────────────── */
.vp-hero{background:var(--ink);position:relative;overflow:hidden;padding-top:60px}
.vp-hero-glow{position:absolute;top:-200px;right:-200px;width:700px;height:700px;border-radius:50%;background:radial-gradient(circle,rgba(167,1,42,.14) 0%,transparent 65%);pointer-events:none}
.vp-hero-grid{max-width:1240px;margin:0 auto;padding:64px 56px 56px;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;position:relative;z-index:1}
.vp-hero-text{color:#fff}
.vp-hero-eyebrow{display:inline-block;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--red-lt);font-family:var(--fb);font-weight:600;margin-bottom:18px}
.vp-hero h1{font-family:var(--fd);font-size:clamp(40px,5vw,64px);font-weight:300;color:#fff;letter-spacing:-1.2px;line-height:1.02;margin:0 0 22px}
.vp-hero h1 em{font-style:italic;color:var(--red-lt)}
.vp-hero-lede{font-size:17px;color:rgba(255,255,255,.72);line-height:1.65;font-family:var(--fb);margin:0 0 32px;max-width:540px}
.vp-hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.vp-hero-actions .btn-primary,
.vp-hero-actions .btn-ghost{display:inline-flex;align-items:center;gap:8px}
.vp-hero-image{position:relative}
.vp-hero-image img{width:100%;height:auto;max-height:480px;object-fit:cover;display:block;border-radius:0;box-shadow:0 20px 60px rgba(0,0,0,.35)}

/* ── Spec chip strip ──────────────────────────────────────────── */
.vp-chips{background:var(--paper);border-bottom:.5px solid var(--rule-lt);padding:22px 56px}
.vp-chips-in{max-width:1240px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px 14px;justify-content:center;align-items:center}
.vp-chip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink);font-family:var(--fb);font-weight:500;letter-spacing:.1px;line-height:1.2}
.vp-chip-dot{width:5px;height:5px;border-radius:50%;background:var(--red);flex-shrink:0}

/* ── Body ─────────────────────────────────────────────────────── */
.vp-body{background:var(--white);padding:72px 56px 80px}
.vp-body-in{max-width:780px;margin:0 auto}
.vp-prose{font-family:var(--fb);color:var(--ink);font-size:16px;line-height:1.75}
.vp-prose h2{font-family:var(--fd);font-size:30px;font-weight:400;color:var(--ink);letter-spacing:-.3px;line-height:1.2;margin:48px 0 18px}
.vp-prose h2:first-child{margin-top:0}
.vp-prose h3{font-family:var(--fd);font-size:22px;font-weight:500;color:var(--ink);letter-spacing:-.1px;line-height:1.3;margin:36px 0 14px}
.vp-prose h4{font-family:var(--fb);font-size:14px;font-weight:600;color:var(--ink);letter-spacing:.2px;text-transform:uppercase;margin:32px 0 12px}
.vp-prose p{margin:0 0 18px;color:#3a3a3a}
.vp-prose a{color:var(--red);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.vp-prose a:hover{color:var(--red-dk)}
.vp-prose strong{font-weight:600;color:var(--ink)}
.vp-prose ul,.vp-prose ol{margin:0 0 22px;padding-left:24px;color:#3a3a3a}
.vp-prose li{margin-bottom:8px;line-height:1.7}
.vp-prose img{max-width:100%;height:auto;display:block;margin:28px auto}
.vp-prose figure{margin:28px 0;text-align:center}
.vp-prose hr{border:none;border-top:.5px solid var(--rule-lt);margin:40px 0}
.vp-prose table{border-collapse:collapse;width:100%;margin:24px 0;font-size:14.5px}
.vp-prose th,.vp-prose td{border-bottom:.5px solid var(--rule-lt);padding:10px 12px;text-align:left}
.vp-prose th{font-family:var(--fb);font-weight:600;color:var(--ink);background:var(--paper);font-size:12px;letter-spacing:.4px;text-transform:uppercase}

/* ── Related types ────────────────────────────────────────────── */
.vp-related{background:var(--paper);padding:64px 56px;border-top:.5px solid var(--rule-lt)}
.vp-related-in{max-width:1080px;margin:0 auto}
.vp-helpful{background:var(--paper-2,#ede8d9);padding:48px 56px;border-top:.5px solid var(--rule-lt)}
.vp-helpful-in{max-width:1080px;margin:0 auto;text-align:center}
.vp-helpful-eyebrow{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--red);font-family:var(--fb);font-weight:600;margin-bottom:24px}
.vp-helpful-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vp-helpful-card{background:#fff;border:.5px solid var(--rule-lt);padding:24px 22px;text-decoration:none;color:inherit;text-align:left;transition:border-color .15s,background .15s}
.vp-helpful-card:hover{border-color:rgba(167,1,42,.3);background:rgba(167,1,42,.02)}
.vp-helpful-card h3{font-family:var(--fd);font-size:18px;font-weight:500;color:var(--ink);margin:0 0 8px;letter-spacing:-.2px;line-height:1.25}
.vp-helpful-card p{font-size:13px;color:var(--mute);line-height:1.6;margin:0;font-family:var(--fb)}
.vp-faq-foot{font-family:var(--fb);font-size:14.5px;color:var(--mute);line-height:1.7;text-align:center;margin:32px auto 0;max-width:680px}
.vp-faq-foot a{color:var(--red);font-weight:600;text-decoration:none}
.vp-faq-foot a:hover{text-decoration:underline}
.vp-related-eyebrow{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--red);font-family:var(--fb);font-weight:600;margin-bottom:14px;text-align:center}
.vp-related-h{font-family:var(--fd);font-size:32px;font-weight:300;color:var(--ink);text-align:center;margin:0 0 36px;letter-spacing:-.3px}
.vp-related-h em{font-style:italic;color:var(--red-lt)}
.vp-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:.5px solid var(--rule-lt);background:var(--white)}
.vp-related-card{display:block;padding:30px 26px;text-decoration:none;color:inherit;border-right:.5px solid var(--rule-lt);transition:background .15s}
.vp-related-card:last-child{border-right:none}
.vp-related-card:hover{background:var(--paper)}
.vp-related-card h3{font-family:var(--fd);font-size:22px;font-weight:500;color:var(--ink);margin:0 0 10px;letter-spacing:-.2px;line-height:1.25}
.vp-related-card p{font-size:13.5px;color:var(--mute);line-height:1.6;margin:0 0 14px;font-family:var(--fb)}
.vp-related-cta{font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--red);font-family:var(--fb);font-weight:600;display:inline-flex;align-items:center;gap:6px}
.vp-related-cta svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}

/* ── Final CTA band ───────────────────────────────────────────── */
.vp-cta{background:var(--ink);padding:72px 56px;text-align:center;color:#fff}
.vp-cta h2{font-family:var(--fd);font-size:36px;font-weight:300;color:#fff;letter-spacing:-.4px;line-height:1.15;margin:0 0 16px}
.vp-cta h2 em{font-style:italic;color:var(--red-lt)}
.vp-cta p{font-size:15px;color:rgba(255,255,255,.62);line-height:1.65;margin:0 0 30px;max-width:560px;margin-left:auto;margin-right:auto}
.vp-cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

@media(max-width:980px){
  .vp-hero-grid{grid-template-columns:1fr;gap:40px}
  .vp-hero-image{order:-1}
  .vp-hero-image img{max-height:340px}
}
@media(max-width:640px){
  .vp-hero-grid{padding:40px 22px 40px}
  .vp-chips{padding:18px 22px}
  .vp-body{padding:48px 22px 56px}
  .vp-related{padding:48px 22px}
  .vp-helpful{padding:36px 22px}
  .vp-helpful-grid{grid-template-columns:1fr;gap:10px}
  .vp-related-grid{grid-template-columns:1fr}
  .vp-related-card{border-right:none;border-bottom:.5px solid var(--rule-lt)}
  .vp-related-card:last-child{border-bottom:none}
  .vp-cta{padding:56px 22px}
}

/* ── Intro band — short paragraphs, max-width 680, white bg ──────── */
.vp-intro{background:var(--white);padding:64px 56px 36px}
.vp-intro-in{max-width:720px;margin:0 auto}
.vp-intro p{font-family:var(--fb);font-size:17px;line-height:1.7;color:var(--ink);margin:0 0 18px}
.vp-intro p:last-child{margin-bottom:0}
.vp-intro p strong{font-weight:600}

/* ── Use-case grid — paper bg, 3-4 cards in a row ──────────────── */
.vp-cases{background:var(--paper);padding:64px 56px;border-top:.5px solid var(--rule-lt)}
.vp-cases-in{max-width:1080px;margin:0 auto}
.vp-section-head{text-align:center;margin-bottom:36px}
.vp-section-eyebrow{display:inline-block;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--red);font-family:var(--fb);font-weight:600;margin-bottom:14px}
.vp-section-h{font-family:var(--fd);font-size:34px;font-weight:300;color:var(--ink);letter-spacing:-.4px;line-height:1.15;margin:0;max-width:680px;margin-left:auto;margin-right:auto}
.vp-section-h em{font-style:italic;color:var(--red-lt)}
.vp-cases-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.vp-cases-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.vp-case{background:var(--white);border:.5px solid var(--rule-lt);padding:26px 24px;transition:transform .15s,border-color .15s}
.vp-case:hover{transform:translateY(-2px);border-color:rgba(167,1,42,.25)}
.vp-case-num{font-family:var(--fb);font-size:10.5px;letter-spacing:1.8px;color:var(--red-lt);font-weight:600;margin-bottom:14px}
.vp-case h3{font-family:var(--fd);font-size:21px;font-weight:500;color:var(--ink);letter-spacing:-.15px;margin:0 0 10px;line-height:1.25}
.vp-case p{font-family:var(--fb);font-size:13.5px;color:var(--mute);line-height:1.65;margin:0}

/* ── Showcase strip — 3 photos / placeholders ──────────────────── */
.vp-showcase{background:var(--white);padding:20px 56px 64px;border-top:none}
.vp-showcase-in{max-width:1180px;margin:0 auto}
.vp-showcase-grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:14px}
.vp-showcase-item{position:relative;aspect-ratio:4/3;background:var(--paper);overflow:hidden;border:.5px solid var(--rule-lt)}
.vp-showcase-item img{width:100%;height:100%;object-fit:cover;display:block}
.vp-showcase-caption{position:absolute;bottom:0;left:0;right:0;padding:10px 14px;background:linear-gradient(to top,rgba(17,17,17,.78),transparent);color:#fff;font-family:var(--fb);font-size:12.5px;letter-spacing:.1px}

/* Image placeholder — kraft-paper feel with a subtle camera icon. Used
   anywhere a real image is supposed to land but hasn't been supplied
   yet. Stays clearly intentional (not "broken") while in dev. */
.vp-img-placeholder{
  position:relative;width:100%;height:100%;
  background:
    repeating-linear-gradient(45deg,transparent 0,transparent 14px,rgba(0,0,0,.025) 14px,rgba(0,0,0,.025) 15px),
    var(--paper-2,#ede8d9);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  color:var(--mute);
}
.vp-img-placeholder svg{width:36px;height:36px;opacity:.45;stroke:currentColor;fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.vp-img-placeholder span{font-family:var(--fb);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;color:rgba(0,0,0,.42)}

/* ── Specs grid — what's included; 4 themed cards ───────────────── */
.vp-specs{background:var(--white);padding:64px 56px;border-top:.5px solid var(--rule-lt)}
.vp-specs-in{max-width:1080px;margin:0 auto}
.vp-specs-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:.5px solid var(--rule-lt)}
.vp-specs-card{padding:28px 30px;border-right:.5px solid var(--rule-lt);border-bottom:.5px solid var(--rule-lt)}
.vp-specs-card:nth-child(2n){border-right:none}
.vp-specs-card:nth-last-child(-n+2){border-bottom:none}
.vp-specs-card h3{font-family:var(--fd);font-size:14px;font-weight:600;color:var(--ink);letter-spacing:.5px;text-transform:uppercase;margin:0 0 14px}
.vp-specs-card ul{list-style:none;padding:0;margin:0}
.vp-specs-card li{font-family:var(--fb);font-size:13.5px;color:#3a3a3a;line-height:1.6;padding:6px 0 6px 18px;position:relative}
.vp-specs-card li::before{content:'';position:absolute;left:0;top:14px;width:6px;height:6px;border-radius:50%;background:var(--red);opacity:.6}
.vp-specs-card li strong{font-weight:600;color:var(--ink)}

/* ── Mid-page CTA — soft inset band ─────────────────────────────── */
.vp-mid-cta{background:var(--paper-2,#ede8d9);padding:48px 56px;text-align:center;border-top:.5px solid var(--rule-lt);border-bottom:.5px solid var(--rule-lt)}
.vp-mid-cta-in{max-width:680px;margin:0 auto}
.vp-mid-cta h2{font-family:var(--fd);font-size:26px;font-weight:400;color:var(--ink);letter-spacing:-.2px;margin:0 0 10px;line-height:1.25}
.vp-mid-cta h2 em{font-style:italic;color:var(--red)}
.vp-mid-cta p{font-family:var(--fb);font-size:14px;color:var(--mute);line-height:1.6;margin:0 0 22px}
.vp-mid-cta-actions{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* ── Process timeline — horizontal numbered steps ───────────────── */
.vp-process{background:var(--white);padding:64px 56px;border-top:.5px solid var(--rule-lt)}
.vp-process-in{max-width:1080px;margin:0 auto}
.vp-process-strip{display:grid;grid-template-columns:repeat(var(--cols,6),1fr);gap:0;position:relative;margin-top:8px}
.vp-process-strip::before{content:'';position:absolute;top:24px;left:6%;right:6%;height:.5px;background:rgba(167,1,42,.2);z-index:0}
.vp-step{position:relative;text-align:center;padding:0 10px;z-index:1}
.vp-step-num{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--white);border:.5px solid rgba(167,1,42,.4);color:var(--red);font-family:var(--fd);font-size:18px;font-weight:500;margin:0 auto 16px}
.vp-step h3{font-family:var(--fb);font-size:13.5px;font-weight:600;color:var(--ink);letter-spacing:.1px;margin:0 0 8px;line-height:1.3}
.vp-step p{font-family:var(--fb);font-size:12.5px;color:var(--mute);line-height:1.6;margin:0}

/* ── Pricing block (renders when $pricing['examples'] is supplied) ── */
.vp-pricing{background:var(--white);padding:64px 56px;border-top:.5px solid var(--rule-lt)}
.vp-pricing-in{max-width:1080px;margin:0 auto}
.vp-pricing-intro{max-width:680px;margin:18px auto 0;text-align:center;font-size:15px;color:var(--mute);line-height:1.7;font-family:var(--fb)}
.vp-price-table-wrap{margin-top:36px;background:#fff;border:.5px solid var(--rule-lt);overflow:hidden}
.vp-price-table{width:100%;border-collapse:collapse;font-family:var(--fb)}
.vp-price-table thead th{font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;font-weight:600;color:#888;text-align:left;padding:14px 22px;border-bottom:.5px solid var(--rule-lt);background:var(--paper)}
.vp-price-table thead th.num{text-align:right}
.vp-price-table tbody td{padding:18px 22px;border-bottom:.5px solid var(--rule-lt);font-size:14px;color:var(--ink);line-height:1.5}
.vp-price-table tbody tr:last-child td{border-bottom:none}
.vp-price-table tbody tr:hover{background:rgba(167,1,42,.02)}
.vp-price-label{font-weight:600;color:var(--ink);font-size:14.5px;letter-spacing:-.1px}
.vp-price-detail{font-size:12px;color:var(--mute);margin-top:3px;line-height:1.5}
.vp-price-qty{font-size:14px;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.vp-price-num{font-family:var(--fd);font-size:18px;font-weight:500;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.vp-price-num em{font-size:11px;color:var(--mute);font-style:normal;letter-spacing:.3px;display:block;margin-top:2px}
.vp-price-note{font-size:13px;color:var(--mute);line-height:1.7;margin:18px 4px 0;font-family:var(--fb);text-align:center}
.vp-price-note a{color:var(--red);font-weight:600;text-decoration:none}
.vp-price-note a:hover{text-decoration:underline}
@media(max-width:640px){
  .vp-price-table thead th:nth-child(2),
  .vp-price-table tbody td:nth-child(2){display:none}
  .vp-price-table thead th,.vp-price-table tbody td{padding:14px 16px}
}

/* ── Trust strip (trade body badges, applies to every page) ──────── */
.vp-trust{background:var(--paper);padding:48px 56px;border-top:.5px solid var(--rule-lt)}
.vp-trust-in{max-width:880px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:24px}
.vp-trust-label{font-family:var(--fb);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--mute);font-weight:500;text-align:center}
.vp-trust-badges{display:flex;flex-wrap:wrap;gap:48px;justify-content:center;align-items:center}
.vp-trust-badges img{height:64px;width:auto;opacity:.75;filter:grayscale(100%);transition:opacity .2s,filter .2s}
.vp-trust-badges a:hover img{opacity:1;filter:grayscale(0%)}
@media(max-width:640px){.vp-trust{padding:36px 22px}.vp-trust-badges{gap:32px}.vp-trust-badges img{height:48px}}

/* ── FAQ accordion (uses native <details>) ──────────────────────── */
.vp-faq{background:var(--paper);padding:64px 56px;border-top:.5px solid var(--rule-lt)}
.vp-faq-in{max-width:760px;margin:0 auto}
.vp-faq-list{margin-top:8px}
.vp-faq-item{background:var(--white);border:.5px solid var(--rule-lt);margin-bottom:10px;overflow:hidden}
.vp-faq-item[open]{border-color:rgba(167,1,42,.3);box-shadow:0 6px 18px -10px rgba(0,0,0,.12)}
.vp-faq-q{padding:18px 22px;cursor:pointer;font-family:var(--fb);font-size:15.5px;font-weight:600;color:var(--ink);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;transition:background .12s}
.vp-faq-q::-webkit-details-marker{display:none}
.vp-faq-q:hover{background:var(--paper)}
.vp-faq-q::after{content:'+';font-size:22px;color:var(--red);font-weight:300;flex-shrink:0;transition:transform .2s,content .2s;line-height:1}
.vp-faq-item[open] .vp-faq-q::after{content:'−'}
.vp-faq-a{padding:0 22px 20px;font-family:var(--fb);font-size:14.5px;line-height:1.7;color:#3a3a3a}
.vp-faq-a p{margin:0 0 12px}
.vp-faq-a p:last-child{margin-bottom:0}
.vp-faq-a a{color:var(--red);text-decoration:underline;text-underline-offset:3px}

@media(max-width:980px){
  .vp-cases-grid,.vp-cases-grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .vp-showcase-grid{grid-template-columns:repeat(2,1fr)}
  .vp-process-strip{grid-template-columns:1fr;gap:18px}
  .vp-process-strip::before{display:none}
  .vp-step{display:flex;text-align:left;gap:18px;align-items:flex-start;padding:0}
  .vp-step-num{margin:0;flex-shrink:0}
  .vp-step-text{flex:1}
}
@media(max-width:640px){
  .vp-intro{padding:48px 22px 28px}
  .vp-cases,.vp-specs,.vp-process,.vp-faq,.vp-showcase{padding:48px 22px}
  .vp-mid-cta{padding:40px 22px}
  .vp-cases-grid,.vp-cases-grid.cols-3{grid-template-columns:1fr}
  .vp-showcase-grid{grid-template-columns:1fr}
  .vp-specs-grid{grid-template-columns:1fr}
  .vp-specs-card{border-right:none}
  .vp-specs-card:nth-child(2n){border-right:none}
  .vp-specs-card:not(:last-child){border-bottom:.5px solid var(--rule-lt)}
  .vp-section-h{font-size:28px}
}