/* ==========================================================================
   webfusionpit.com — "Poster Press"
   Logo-derived: magenta press ink + teal counterweight, on soft newsprint.
   Header/footer sit on a warm neutral so the logo never matches its background. Oversized display type, heavy rules.
   Type: Chivo (display) / Barlow (text)
   ========================================================================== */

:root{
  --cream:#faf7f4;
  --cream-2:#efe8ec;
  --ink:#16171d;
  --shell:#fbfaf7;
  --ink-2:#2c2e3c;
  --navy:#0f7a6d;
  --press:#c21b7a;
  --press-dk:#96125c;
  --muted:#5f5a66;
  --hair:#e2d8de;
}

*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:"Barlow",system-ui,sans-serif;font-size:17.5px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--press)}
h1,h2,h3{font-family:"Chivo",system-ui,sans-serif;font-weight:900;letter-spacing:-.022em;line-height:1.1;margin:0}
p{margin:0 0 1.1em}
ul{margin:0 0 1.1em;padding-left:1.15em}
li{margin:.35em 0}

.wrap{width:min(1240px,92vw);margin-inline:auto}
.section{padding:clamp(60px,7.5vw,110px) 0}

/* ---------- topbar / header ---------- */
.topbar{
  background:var(--press);color:#fff;
  font-family:"Barlow",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.38em;text-transform:uppercase;text-align:center;padding:10px 12px;
}
.site-header{position:static;background:var(--shell);border-bottom:5px solid var(--ink)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0}
.logo-img{height:52px;width:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:"Barlow",sans-serif;font-weight:700;font-size:14.5px;line-height:1;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  padding:16px 30px;border-radius:0;border:2px solid var(--ink);
  transition:transform .16s ease,background .16s ease,color .16s ease;
}
.btn:hover{transform:translate(-2px,-2px)}
.btn-primary{background:var(--press);color:#fff;border-color:var(--press)}
.btn-primary:hover{background:var(--press-dk);border-color:var(--press-dk)}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-ink:hover{background:var(--navy);border-color:var(--navy)}
.btn-lg{padding:19px 40px;font-size:16px}

/* ---------- HERO — copy first, full-width banner below ---------- */
.hero{background:var(--cream);border-bottom:5px solid var(--ink)}
.hero-top{padding:clamp(40px,5vw,72px) 0 clamp(30px,4vw,52px)}
.hero-pub{
  font-family:"Barlow",sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;color:var(--press);
  padding-bottom:14px;margin-bottom:20px;border-bottom:3px solid var(--ink);
}
.hero h1{font-size:clamp(32px,4.4vw,58px);letter-spacing:-.028em}
.hero h1 .hl{display:block;color:var(--press)}
.hero-row{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:end;
  margin-top:30px;padding-top:26px;border-top:2px solid var(--ink);
}
.hero-sub{font-size:19px;color:var(--ink-2);margin:0}
.hero-cta-row{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.hero-note{font-size:13px;letter-spacing:.04em;color:var(--muted)}
.hero-banner{width:100%;height:clamp(260px,38vw,440px);overflow:hidden;border-top:5px solid var(--ink)}
.hero-banner img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(.9)}

/* ---------- ARTICLE — poster measure ---------- */
.article-band{background:var(--cream);padding:clamp(54px,7vw,96px) 0}
.article-reader{max-width:1000px;margin-inline:auto}
.article-reader h2{
  font-size:clamp(23px,2.8vw,34px);
  margin:1.9em 0 .5em;padding-bottom:.2em;
  border-bottom:5px solid var(--ink);
  column-span:all;
}
.article-reader h2:first-child{margin-top:0}
.article-reader h3{font-size:20px;margin:0 0 .5em;column-span:all}
.article-lead{
  font-size:20px;line-height:1.6;font-weight:500;color:var(--ink);
  max-width:60ch;
}
.article-lead::first-letter{
  float:left;font-family:"Chivo",system-ui,sans-serif;font-weight:900;
  font-size:62px;line-height:.82;padding:8px 14px 0 0;color:var(--press);
}
.stripe-list{
  list-style:none;padding:0;margin:0 0 1.5em;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
  border-top:3px solid var(--ink);border-left:3px solid var(--ink);
}
.stripe-list-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.stripe-list li{
  margin:0;padding:16px 16px;font-size:15px;font-weight:500;line-height:1.4;
  border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);
}
.stripe-list li:nth-child(odd){background:var(--cream-2)}
.press-2col{columns:2;column-gap:44px;column-rule:3px solid var(--ink)}
.press-3col{columns:3;column-gap:32px;font-size:16px}
.press-2col p,.press-3col p,.press-2col ul,.press-3col ul{break-inside:avoid}
.press-3col ul{padding-left:1em}

.poster-note{
  position:relative;overflow:hidden;
  margin:44px 0;padding:32px 34px;
  background:var(--cream-2);border:3px solid var(--ink);
}
.poster-note-dark{background:var(--ink);color:var(--cream)}
.poster-note-dark h3{color:#fff}
.pn-rule{display:block;width:70px;height:8px;background:var(--press);margin-bottom:18px}
.poster-note h3{font-size:21px;margin-bottom:.5em}
.poster-note p{margin:0;max-width:76ch}
.pn-mark{
  position:absolute;right:-24px;top:-24px;width:190px;height:190px;
  color:var(--ink);opacity:.06;pointer-events:none;
}

.article-figure{margin:46px 0}
.figure-bleed{width:min(1180px,94vw);margin-left:50%;transform:translateX(-50%)}
.article-figure img{width:100%;border:3px solid var(--ink)}
.article-figcaption{
  font-size:13.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  background:var(--ink);color:var(--cream);padding:11px 16px;
}

/* ---------- section heads ---------- */
.section-head{max-width:820px;margin-bottom:clamp(34px,4vw,56px)}
.section-head h2{font-size:clamp(26px,3.2vw,40px)}
.section-head p{margin-top:16px;color:var(--muted);font-size:17.5px;text-transform:none}

/* ---------- FEATURES — poster grid with index letters ---------- */
.features-section{background:var(--cream-2);border-top:5px solid var(--ink)}
.poster-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:3px solid var(--ink);border-left:3px solid var(--ink);
}
.pcard{
  position:relative;overflow:hidden;
  padding:34px 30px 36px;background:var(--cream);
  border-right:3px solid var(--ink);border-bottom:3px solid var(--ink);
}
.pcard-wide{grid-column:span 2}
.pcard-dark{background:var(--ink);color:var(--cream)}
.pcard-dark h3{color:#fff}
.pcard-red{background:var(--press);color:#fff}
.pcard-red h3{color:#fff}
.pcard-index{
  position:absolute;right:16px;top:2px;
  font-family:"Chivo",system-ui,sans-serif;font-weight:900;font-size:74px;line-height:1;
  color:var(--ink);opacity:.09;pointer-events:none;
}
.pcard-dark .pcard-index,.pcard-red .pcard-index{color:#fff;opacity:.18}
.ico-watermark{
  position:absolute;left:-30px;bottom:-30px;width:180px;height:180px;
  color:var(--ink);opacity:.06;pointer-events:none;
}
.pcard-dark .ico-watermark,.pcard-red .ico-watermark{color:#fff;opacity:.12}
.pcard-ico{
  position:relative;display:grid;place-items:center;width:52px;height:52px;
  margin-bottom:20px;background:var(--press);color:#fff;
}
.pcard-red .pcard-ico{background:#fff;color:var(--press)}
.pcard-dark .pcard-ico{background:var(--press);color:#fff}
.pcard-ico svg{width:25px;height:25px}
.pcard h3{position:relative;font-size:19.5px;margin-bottom:.55em;line-height:1.1}
.pcard p{position:relative;font-size:15.5px;margin-bottom:.8em;text-transform:none}
.pcard p:last-child{margin-bottom:0}
.pcard ul{position:relative;font-size:15px}

/* ---------- STEPS — full-bleed numbered bands ---------- */
.steps-section{background:var(--cream);border-top:5px solid var(--ink);padding:clamp(60px,7.5vw,110px) 0 0}
.bands{list-style:none;margin:0;padding:0}
.band{border-top:3px solid var(--ink)}
.band:last-child{border-bottom:5px solid var(--ink)}
.band:nth-child(even){background:var(--cream-2)}
.band-inner{
  display:grid;grid-template-columns:auto 60px minmax(0,340px) minmax(0,1fr);
  gap:clamp(16px,3vw,42px);align-items:center;padding:30px 0;
}
.band-no{
  font-family:"Chivo",system-ui,sans-serif;font-weight:900;font-size:clamp(32px,3.8vw,54px);line-height:.95;
  color:var(--press);
}
.band-ico{
  display:grid;place-items:center;width:56px;height:56px;
  border:3px solid var(--ink);color:var(--ink);
}
.band-ico svg{width:26px;height:26px}
.band h3{font-size:clamp(18px,1.9vw,23px);line-height:1.18}
.band p{margin:0;font-size:16px;color:var(--muted);text-transform:none}

/* ---------- TESTIMONIALS — poster pull-quote ---------- */
.testi-band{background:var(--navy);color:#fff;border-top:5px solid var(--ink)}
.testi-band .section-head h2{color:#fff}
.poster-quote{
  position:relative;overflow:hidden;margin:0 0 24px;
  background:var(--press);border:3px solid var(--ink);
  padding:clamp(32px,4.5vw,60px);
}
.poster-quote p{
  position:relative;
  font-family:"Chivo",system-ui,sans-serif;font-weight:900;letter-spacing:-.02em;
  font-size:clamp(20px,2.4vw,30px);line-height:1.22;color:#fff;
  max-width:22ch;margin:0 0 26px;
}
.bigquote{
  position:absolute;right:20px;top:-56px;
  font-family:"Chivo",system-ui,sans-serif;font-weight:900;font-size:168px;line-height:1;
  color:rgba(255,255,255,.16);pointer-events:none;
}
.testi-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.tcard{
  margin:0;padding:28px 28px 26px;
  background:var(--cream);color:var(--ink);border:3px solid var(--ink);
}
.tcard p{margin:0 0 18px;font-size:16.5px}
.testi-band footer{display:flex;align-items:center;gap:11px}
.testi-av{
  width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;
  border:2px solid currentColor;color:inherit;
}
.testi-av svg{width:18px;height:18px}
.attr{
  font-family:"Barlow",sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
}
.poster-quote .attr{color:rgba(255,255,255,.85)}

/* ---------- REVIEWS — rating band + card row ---------- */
.reviews-section{background:var(--cream);border-top:5px solid var(--ink)}
.review-summary{
  display:flex;flex-wrap:wrap;align-items:center;gap:18px;
  background:var(--ink);color:var(--cream);
  border:3px solid var(--ink);padding:22px 28px;margin-bottom:24px;
}
.summary-stars{color:#f2b705;font-size:24px;letter-spacing:3px}
.review-summary p{margin:0;font-size:15.5px;max-width:72ch;color:var(--cream-2)}
.review-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.review{
  background:var(--cream-2);border:3px solid var(--ink);padding:24px 24px 26px;
}
.review:nth-child(3n+1){background:var(--cream);border-top:10px solid var(--press)}
.review-meta{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.avatar{
  width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;
  background:var(--navy);color:#fff;
  font-family:"Chivo",system-ui,sans-serif;font-weight:900;font-size:17px;
}
.rn{font-weight:700;font-size:15.5px}
.rr{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.stars{color:#c58c00;letter-spacing:2px;font-size:14px;display:block;margin-bottom:10px}
.star-off{color:var(--hair)}
.review p{margin:0;font-size:15.5px;color:var(--ink-2)}
#reviewPager{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.pager-btn{
  font-family:"Barlow",sans-serif;font-size:13.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  min-width:44px;padding:12px 14px;cursor:pointer;
  background:var(--cream);color:var(--ink);border:3px solid var(--ink);
}
.pager-btn:hover:not(:disabled){background:var(--navy);color:#fff}
.pager-btn.is-current{background:var(--press);color:#fff;border-color:var(--press)}
.pager-btn:disabled{opacity:.35;cursor:default}

/* ---------- PRICING — blocky slabs ---------- */
.pricing-section{background:var(--cream-2);border-top:5px solid var(--ink)}
.slabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.slab{
  background:var(--cream);border:3px solid var(--ink);
  padding:34px 32px 36px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 30px),calc(100% - 30px) 100%,0 100%);
}
.slab-hi{background:var(--ink);color:var(--cream);clip-path:polygon(0 0,100% 0,100% 100%,30px 100%,0 calc(100% - 30px))}
.slab-hi h3{color:#fff}
.slab-tag{
  display:inline-block;font-family:"Barlow",sans-serif;font-size:11px;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;
  background:var(--press);color:#fff;padding:6px 12px;margin-bottom:16px;
}
.slab h3{font-size:24px;margin-bottom:.35em}
.slab-price{font-size:15.5px;color:var(--muted);padding-bottom:22px;border-bottom:3px solid var(--ink)}
.slab-hi .slab-price{color:var(--cream-2);border-bottom-color:rgba(250,246,239,.3)}
.slab ul{list-style:none;padding:0;margin:22px 0 30px}
.slab li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;margin:.75em 0}
.slab li svg{width:17px;height:17px;flex:0 0 17px;margin-top:5px;color:var(--press)}
.slab-hi li svg{color:#ff8fc4}
.slab .btn{width:100%}
.pricing-fine{
  margin-top:34px;font-size:13.5px;line-height:1.7;color:var(--muted);max-width:92ch;
  border-top:3px solid var(--ink);padding-top:18px;
}

/* ---------- FAQ — bold full-width rows ---------- */
.faq-section{background:var(--cream);border-top:5px solid var(--ink)}
.faq-rows{border-top:3px solid var(--ink)}
.faq-item{border-bottom:3px solid var(--ink)}
.faq-item[open]{background:var(--cream-2)}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 0;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-q{
  font-family:"Chivo",system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;
  font-size:clamp(16px,1.7vw,20px);line-height:1.3;
}
.faq-plus{
  flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;
  border:3px solid var(--ink);color:var(--press);transition:transform .18s ease;
}
.faq-plus svg{width:20px;height:20px}
.faq-item[open] .faq-plus{transform:rotate(45deg);background:var(--press);color:#fff;border-color:var(--press)}
.faq-a{padding:0 70px 26px 0;max-width:88ch}
.faq-a p{margin:0;font-size:16.5px;color:var(--ink-2)}

/* ---------- BOTTOM CTA — dark poster band ---------- */
.cta-section{
  background:var(--ink);color:var(--cream);
  border-top:5px solid var(--press);
  padding:clamp(60px,8vw,112px) 0;
}
.cta-inner{text-align:center}
.cta-section h2{font-size:clamp(26px,3.4vw,44px);color:#fff;max-width:17ch;margin-inline:auto;line-height:1}
.cta-sub{margin:26px auto 32px;max-width:76ch;color:#c6c3ba;font-size:16.5px}
.cta-disclaimer{
  margin:34px auto 0;max-width:92ch;font-size:12.5px;line-height:1.75;color:#8f8d87;
  padding-top:26px;border-top:3px solid rgba(250,246,239,.2);
}
.cta-disclaimer a{color:#ff8fc4}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--shell);border-top:8px solid var(--press);padding:52px 0 42px}
.footer-inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px}
.footer-logo-img{height:46px;width:auto}
.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px}
.footer-nav a{
  font-family:"Barlow",sans-serif;font-size:12.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:none;
}
.footer-nav a:hover{color:var(--press)}
.footer-rule{width:100%;height:3px;background:var(--ink)}
.footer-company p{margin:.25em 0;font-size:13.5px;color:var(--muted)}
.footer-copy{margin-top:16px !important;font-size:12.5px !important}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .stripe-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stripe-list-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .poster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pcard-wide{grid-column:span 2}
  .review-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .testi-trio{grid-template-columns:1fr}
  .press-3col{columns:2}
  .band-inner{grid-template-columns:auto 56px minmax(0,1fr);row-gap:12px}
  .band p{grid-column:1 / -1}
}
@media (max-width:740px){
  body{font-size:16.5px}
  .hero-row{grid-template-columns:1fr}
  .stripe-list,.stripe-list-3{grid-template-columns:1fr}
  .press-2col,.press-3col{columns:1;column-rule:none}
  .figure-bleed{width:100%;margin-left:0;transform:none}
  .poster-grid{grid-template-columns:1fr}
  .pcard-wide{grid-column:span 1}
  .review-list{grid-template-columns:1fr}
  .slabs{grid-template-columns:1fr}
  .slab,.slab-hi{clip-path:none}
  .band-inner{grid-template-columns:auto minmax(0,1fr)}
  .band-ico{display:none}
  .faq-a{padding-right:0}
  .header-inner{flex-wrap:wrap;justify-content:center}
}