/* ============================================================
   promote.css  —  Promote With Us page
   Builds on css/index.css (uses the same :root variables).
   Load AFTER index.css.
   ============================================================ */

/* ---------- Page hero ---------- */
.pwu-hero{
  background:linear-gradient(180deg,#FFCCA3 0%, #fbfbfb 100%);
  border-radius:14px;
  padding:48px 40px;
  margin-top:8px;
}
.pwu-hero .eyebrow{ margin-bottom:12px; }
.pwu-hero h1{
  font-family:var(--font-body);
  font-weight:800;
  font-size:clamp(1.6rem,3.4vw,2.5rem);
  line-height:1.15;
  color:#1c1c1c;
  max-width:780px;
  margin-bottom:16px;
}
.pwu-hero .lead{
  font-size:1.05rem;
  color:#3a3a3a;
  max-width:680px;
  line-height:1.6;
  font-weight: 400;
}
.pwu-hero .lead strong{ color:var(--orange-dark); }

/* ---------- Generic section heading ---------- */
.pwu-block{ padding-block:34px; }
.pwu-h2{
  font-family:var(--font-body);
  font-weight:700;
  font-size:clamp(1.4rem,2.6vw,2rem);
  color:#1c1c1c;
  margin-bottom:8px;
}
.pwu-sub{color:var(--muted);font-size: 1rem;max-width:680px;margin-bottom:24px;}

/* ---------- Pain points (quotes) ---------- */
.pain-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.pain-card{
  background:var(--peach-light);
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px;
}
.pain-card .pq{
  font-family:var(--font-serif);
  font-style:italic;
  font-size:1.05rem;
  color:#1c1c1c;
  line-height:1.35;
  margin-bottom:10px;
}
.pain-card p{ font-size:.9rem; color:#555; line-height:1.5; margin:0; }

/* ---------- Stats strip ---------- */
.pwu-stats{
  background:linear-gradient(180deg,#FFC167 0%,#FF7301 100%);
  border-radius:14px;
  padding:34px 30px;
  color:#fff;
}
.pwu-stats h3{ font-family:var(--font-body); font-weight:700; font-size:1.3rem; margin-bottom:6px; }
.pwu-stats p{ font-size:.95rem; color:#fff; opacity:.95; max-width:680px; margin-bottom:22px; }
.pwu-stats .row > div{ text-align:center; }
.pwu-stats .num{ font-family:var(--font-body); font-weight:800; font-size:2rem; line-height:1; }
.pwu-stats .lbl{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; margin-top:6px; }

/* ---------- Value props ---------- */
.value-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; }
.value-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:22px;
  box-shadow:rgba(0,0,0,.05) 0px 1px 8px;
}
.value-card .ic{
  width:42px; height:42px; border-radius:10px;
  background:var(--peach);
  color:var(--orange);
  display:flex; align-items:center; justify-content:center;
  font-size:1.2rem; margin-bottom:12px;
}
.value-card h4{ font-family:var(--font-body); font-weight:700; font-size:1.05rem; margin-bottom:6px; color:#1c1c1c; }
.value-card p{ font-size:.88rem; color:#666; line-height:1.5; margin:0; }

/* ---------- Editorial promise note ---------- */
.promise-note{
  border-left:4px solid var(--orange);
  background:var(--peach-light);
  border-radius:0 10px 10px 0;
  padding:18px 22px;
  font-size:.95rem;
  color:#3a3a3a;
  line-height:1.55;
}
.promise-note strong{ color:#1c1c1c; }

/* ---------- Pricing tabs ---------- */
.pkg-tabs{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:26px; }
.pkg-tab{
  border:1.5px solid var(--line);
  background:#fff;
  color:#444;
  border-radius:30px;
  padding:9px 20px;
  font-weight:600;
  font-size:.9rem;
  cursor:pointer;
  transition:all .2s ease;
}
.pkg-tab:hover{ border-color:var(--orange); color:var(--orange); }
.pkg-tab.active{ background:var(--orange); border-color:var(--orange); color:#fff; }

.pkg-group{ display:none; }
.pkg-group.active{ display:block; }
.pkg-group-sub{ color:var(--muted); font-size:.95rem; margin-bottom:20px; }

/* ---------- Pricing cards ---------- */
.pkg-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; }
.pkg-card{
  position:relative;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:24px 22px;
  display:flex; flex-direction:column;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pkg-card:hover{ box-shadow:rgba(0,0,0,.10) 0px 8px 24px; transform:translateY(-2px); }
.pkg-card.popular{ border-color:var(--orange); box-shadow:rgba(255,115,1,.14) 0px 8px 26px; }
.pkg-card.selected{ border-color:var(--orange-dark); box-shadow:0 0 0 3px rgba(255,115,1,.18); }

.pkg-badges{ display:flex; gap:8px; align-items:center; margin-bottom:10px; }
.pkg-badge{
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  background:var(--peach); color:var(--orange-dark);
  padding:4px 10px; border-radius:20px;
}
.pkg-badge.pop{ background:var(--orange); color:#fff; }

.pkg-name{ font-family:var(--font-body); font-weight:700; font-size:1.3rem; color:#1c1c1c; margin-bottom:4px; }
.pkg-tagline{ font-size:.85rem; color:#777; line-height:1.4; margin-bottom:16px; min-height:38px; }

.pkg-price{ font-family:var(--font-body); font-weight:800; font-size:2rem; color:#1c1c1c; line-height:1; }
.pkg-price .cur{ font-size:1.3rem; vertical-align:top; }
.pkg-billing{ font-size:.8rem; color:var(--muted); margin:6px 0 18px; }

.pkg-features{ list-style:none; padding:0; margin:0 0 20px; flex:1; }
.pkg-features li{display:flex;gap:10px;align-items:flex-start;font-size: .9rem;color:#444;padding:5px 0;line-height:1.35;}
.pkg-features li i{ font-size:.95rem; margin-top:1px; flex:none; }
.pkg-features li .yes{ color:#1e9e57; }
.pkg-features li .no{ color:#d0c9bf; }
.pkg-features li.off{ color:#aaa; }

.pkg-select{
  width:100%;
  background:#fff; color:var(--orange);
  border:1.5px solid var(--orange);
  border-radius:6px; font-weight:700; font-size:.85rem;
  text-transform:uppercase; letter-spacing:.06em;
  padding:11px; cursor:pointer; transition:all .2s ease;
}
.pkg-select:hover{ background:var(--orange); color:#fff; }
.pkg-card.selected .pkg-select{ background:var(--orange-dark); border-color:var(--orange-dark); color:#fff; }
.pkg-card.selected .pkg-select::before{ content:"\2713  "; }

/* ---------- Pre-form intro ---------- */
.preform{
  background:var(--peach-light);
  border-radius:14px;
  padding:30px;
  text-align:center;
  margin-bottom:26px;
}
.preform h3{ font-family:var(--font-body); font-weight:800; font-size:1.4rem; color:#1c1c1c; margin-bottom:10px; }
.preform p{ color:#555; max-width:620px; margin:0 auto; font-size:.96rem; line-height:1.55; }

/* ---------- Form ---------- */
.pwu-form-wrap{ max-width:640px; margin-inline:auto; }
.pwu-form{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:30px;
  box-shadow:rgba(0,0,0,.06) 0px 4px 18px;
}
.pwu-field{ margin-bottom:18px; }
.pwu-field label{ display:block; font-weight:700; font-size:.85rem; color:#1c1c1c; margin-bottom:6px; }
.pwu-field label .req{ color:var(--orange); }
.pwu-field input,
.pwu-field select{
  width:100%;
  border:1.5px solid var(--line);
  border-radius:8px;
  padding:11px 14px;
  font-family:var(--font-body);
  font-size:.95rem;
  color:#2b2b2b;
  background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.pwu-field input:focus,
.pwu-field select:focus{
  outline:none; border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,115,1,.12);
}
.pwu-field.invalid input,
.pwu-field.invalid select{ border-color:#d83a34; }
.pwu-field .err{ color:#d83a34; font-size:.78rem; margin-top:5px; display:none; }
.pwu-field.invalid .err{ display:block; }

/* phone group */
.phone-group{ display:flex; gap:8px; }
.phone-group .cc{ flex:none; width:92px; }

.pay-btn{
  width:100%;
  background:var(--orange); color:#fff; border:none;
  border-radius:8px; font-weight:700; font-size:1rem;
  letter-spacing:.04em; padding:14px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .2s ease;
}
.pay-btn:hover{ background:var(--orange-dark); }
.pay-btn:disabled{ opacity:.6; cursor:not-allowed; }
.pay-summary{ text-align:center; font-size:.9rem; color:#555; margin:14px 0 4px; }
.pay-summary b{ color:var(--orange-dark); }

.form-note{ font-size:.78rem; color:var(--muted); text-align:center; margin-top:14px; line-height:1.5; }

/* ---------- Closing copy ---------- */
.whats-next{
  border:1px solid var(--line);
  border-radius:14px;
  padding:28px 30px;
  background:#fff;
  max-width: 640px;
  margin-inline:auto;
}
.whats-next h3{ font-family:var(--font-body); font-weight:700; font-size:1.2rem; color:#1c1c1c; margin-bottom:10px; }
.whats-next p{ font-size:.95rem; color:#555; line-height:1.6; margin-bottom:8px; }
.whats-next a{ color:var(--orange); font-weight:600; }

/* ---------- Toast ---------- */
.pwu-toast{
  position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(20px);
  background:#1c1c1c; color:#fff; padding:14px 22px; border-radius:10px;
  font-size:.9rem; box-shadow:0 10px 30px rgba(0,0,0,.25);
  opacity:0; pointer-events:none; transition:all .3s ease; z-index:9999; max-width:90vw;
}
.pwu-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.pwu-toast.ok{ background:#1e7a45; }
.pwu-toast.err{ background:#c0392b; }

/* ---------- Success screen ---------- */
.pwu-success{ display:none; text-align:center; padding:40px 20px; }
.pwu-success.show{ display:block; }
.pwu-success .tick{
  width:74px; height:74px; border-radius:50%;
  background:#1e9e57; color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; margin:0 auto 18px;
}
.pwu-success h3{ font-family:var(--font-body); font-weight:800; font-size:1.5rem; color:#1c1c1c; margin-bottom:10px; }
.pwu-success p{ color:#555; max-width:520px; margin:0 auto 6px; line-height:1.6; }

@media (max-width:575px){
  .pwu-hero{ padding:28px 18px; }
  .pwu-form{ padding:22px 18px; }
}

/* ============================================================
   Creative banner above "Choose your package"
   ============================================================ */
.pkg-banner{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  margin-bottom:30px;
  min-height:300px;
  display:flex;
  isolation:isolate;
}
.pkg-banner-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  transform:scale(1.02);
  transition:transform 1.2s ease;
}
.pkg-banner:hover .pkg-banner-bg{ transform:scale(1.08); }
.pkg-banner-shade{
  position:absolute; inset:0;
  background:
    linear-gradient(95deg, rgba(28,16,8,.94) 0%, rgba(40,20,8,.82) 42%, rgba(255,115,1,.30) 78%, rgba(255,168,80,.10) 100%);
}
/* thin orange rule along the bottom, like a printed page edge */
.pkg-banner::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:5px;
  background:linear-gradient(90deg, var(--orange) 0%, var(--orange-amber) 100%);
  z-index:3;
}
.pkg-banner-inner{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  gap:30px; width:100%;
  padding:44px 46px;
}
.pkg-banner-copy{ max-width:620px; }
.pkg-banner-title{
  font-family:var(--font-serif);
  font-weight:700;
  color:#fff;
  font-size:clamp(2rem, 4.4vw, 3.2rem);
  line-height:1.05;
  margin:10px 0 14px;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.pkg-banner-title em{
  font-style:italic;
  color:var(--orange-amber);
  position:relative;
}
.pkg-banner-title em::after{
  content:""; position:absolute; left:0; right:0; bottom:.04em; height:.10em;
  background:var(--orange); opacity:.85; border-radius:2px;
}
.pkg-banner-sub{
  color:#f0e3d8; font-size:1rem; line-height:1.6; max-width:520px; margin-bottom:18px;
}
.pkg-banner-points{ display:flex; flex-wrap:wrap; gap:10px 18px; }
.pkg-banner-points span{
  display:inline-flex; align-items:center; gap:7px;
  color:#fff; font-size:.85rem; font-weight:600;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  padding:7px 13px; border-radius:30px;
  backdrop-filter:blur(2px);
}
.pkg-banner-points i{ color:var(--orange-amber); font-size:1rem; }

/* ---- Imprimatur seal (signature element) ---- */
.pkg-seal{
  position:relative; flex:none;
  width:160px; height:160px;
  display:grid; place-items:center;
}
.pkg-seal-svg{
  position:absolute; inset:0; width:100%; height:100%;
  animation:sealspin 22s linear infinite;
}
.pkg-seal-text{
  fill:#FFE6CC;
  font-family:var(--font-display);
  font-size:11px; font-weight:700; letter-spacing:1.5px;
}
.pkg-seal-core{
  width:104px; height:104px; border-radius:50%;
  background:radial-gradient(circle at 30% 25%, #FF8A2B 0%, var(--orange) 55%, var(--orange-dark) 100%);
  color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; line-height:1.15;
  box-shadow:0 10px 26px rgba(255,115,1,.45), inset 0 0 0 3px rgba(255,255,255,.28);
}
.pkg-seal-core i{ font-size:1.5rem; margin-bottom:3px; }
.pkg-seal-core span{ font-size:.74rem; font-weight:700; letter-spacing:.04em; }

@keyframes sealspin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .pkg-seal-svg{ animation:none; }
  .pkg-banner-bg, .pkg-banner:hover .pkg-banner-bg{ transition:none; transform:none; }
}

@media (max-width: 860px){
  .pkg-banner-inner{ flex-direction:column; align-items:flex-start; padding:32px 26px; }
  .pkg-seal{ align-self:center; }
}
@media (max-width: 575px){
  .pkg-banner-inner{ padding:26px 20px; }
  .pkg-banner-points span{ font-size:.78rem; padding:6px 11px; }
  .pkg-seal{ width:128px; height:128px; }
  .pkg-seal-core{ width:84px; height:84px; }
}

/* ============================================================
   EDITORIAL SYSTEM  (hero, pain, stats, value props)
   Shared devices: serif headlines, kicker rule, drop cap,
   pull-quote marks, indexed cards.
   ============================================================ */

/* shared section head */
.pwu-head{max-width: 100%;margin-bottom:26px;}
.pwu-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: .9rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--orange);
  margin-bottom:12px;
}
.pwu-kicker::before{ content:""; width:30px; height:2px; background:var(--orange); display:inline-block; }

/* override: section H2 now editorial serif */
.pwu-h2{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:clamp(1.7rem, 3vw, 2.4rem);
  line-height:1.12;
  color:#1c1c1c;
  margin-bottom:8px;
}
.pwu-h2 em{ font-style:italic; color:var(--orange-dark); }

/* ---------- HERO (editorial split + drop cap) ---------- */
.pwu-hero{ position:relative; overflow:hidden; }
.pwu-hero-grid{ display:grid; grid-template-columns:1.2fr .85fr; gap:38px; align-items:center; }
.pwu-hero h1{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:clamp(2rem, 4.4vw, 3.25rem);
  line-height:1.05;
  color:#1c1c1c;
  margin:8px 0 16px;
}
.pwu-hero h1 em{ font-style:italic; color:var(--orange-dark); }
/* drop cap on the lead */
.pwu-hero .lead{ font-size:1.05rem; }
.pwu-hero .lead.dropcap::first-letter{
  font-family:var(--font-serif);
  font-weight:700;
  float:left;
  font-size:3.4rem;
  line-height:.82;
  padding:6px 12px 0 0;
  color:var(--orange);
}
.pwu-hero-figure{ position:relative; }
.pwu-hero-figure img{
  width:100%; height:300px; object-fit:cover;
  border-radius:14px;
  box-shadow:0 22px 44px rgba(120,60,10,.22);
}
/* magazine-style folded corner */

.pwu-hero-credit{
  position:absolute; left:14px; bottom:14px;
  background:rgba(28,16,8,.72); color:#fff;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  padding:5px 11px; border-radius:20px;
}

/* ---------- PAIN POINTS (pull quotes) ---------- */
.pain-card{ position:relative; padding-top:30px; overflow:hidden; }
.pain-card::before{
  content:"\201C";               /* big opening quote */
  position:absolute; top:-14px; left:14px;
  font-family:var(--font-serif);
  font-size:4.4rem; line-height:1; color:var(--orange);
  opacity:.18;
}
.pain-card::after{                /* growing accent bar */
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--orange); transform:scaleY(0); transform-origin:top;
  transition:transform .3s ease;
}
.pain-card:hover::after{ transform:scaleY(1); }
.pain-card:hover{ box-shadow:0 10px 26px rgba(0,0,0,.08); }
.pain-card .pq{ font-family:var(--font-serif); }

/* ---------- STATS  (editorial "by the numbers" band) ---------- */
.statband{
  background:linear-gradient(120deg,#FF7301 0%, #FF9438 55%, #FFC167 100%);
  border-radius:18px;
  padding:38px 40px;
  color:#fff;
  display:grid;
  grid-template-columns:1.05fr 1.2fr;
  gap:36px;
  align-items:center;
  position:relative;
  overflow:hidden;
}
.statband::before{          /* faint oversized serif ampersand watermark */
  content:"&"; position:absolute; right:-10px; bottom:-46px;
  font-family:var(--font-serif); font-style:italic; font-weight:700;
  font-size:18rem; line-height:1; color:rgba(255,255,255,.10);
  pointer-events:none;
}
.statband .pwu-kicker{ color:#fff; }
.statband .pwu-kicker::before{ background:#fff; }
.statband h3{ font-family:var(--font-serif); font-weight:700; font-size:1.55rem; line-height:1.15; margin-bottom:10px; }
.statband p{ font-size:.95rem; color:#fff; opacity:.95; margin:0; max-width:430px; }
.statband-figs{ display:flex; position:relative; z-index:2; }
.statband-figs .fig{ flex:1; padding:0 22px; }
.statband-figs .fig + .fig{ border-left:1px solid rgba(255,255,255,.35); }
.statband-figs .n{
  font-family:var(--font-serif); font-style:italic; font-weight:700;
  font-size:2.6rem; line-height:1; font-variant-numeric:tabular-nums;
}
.statband-figs .l{
  font-size:.74rem; letter-spacing:.1em; text-transform:uppercase;
  margin-top:8px; opacity:.92; line-height:1.3;
}

/* ---------- VALUE PROPS (indexed contents) ---------- */
.value-card{ position:relative; padding-top:26px; }
.value-card::before{                 /* top accent rule */
  content:""; position:absolute; top:0; left:22px; right:22px; height:3px;
  background:linear-gradient(90deg,var(--orange),var(--orange-amber));
  border-radius:0 0 3px 3px; opacity:0; transition:opacity .25s ease;
}
.value-card:hover::before{ opacity:1; }
.value-card .vc-no{
  position:absolute; top:16px; right:20px;
  font-family:var(--font-serif); font-style:italic; font-weight:700;
  font-size:1.15rem; color:var(--line);
}
.value-card:hover .vc-no{ color:var(--orange); }
.value-card .ic{ margin-bottom:14px; }
.value-card h4{ font-size:1.08rem; }

@media (max-width: 860px){
  .pwu-hero-grid{ grid-template-columns:1fr; }
  .pwu-hero-figure{ order:-1; }
  .pwu-hero-figure img{ height:220px; }
  .statband{ grid-template-columns:1fr; gap:24px; padding:30px 24px; }
  .statband::before{ font-size:12rem; bottom:-30px; }
}
@media (max-width: 575px){
  .statband-figs .fig{ padding:0 12px; }
  .statband-figs .n{ font-size:2rem; }
  .pwu-hero .lead.dropcap::first-letter{ font-size:2.8rem; }
}

/* ============================================================
   PAIN SECTION — image-led editorial spread (quote list)
   ============================================================ */
.painspread-grid{
  display:grid;
  grid-template-columns:0.92fr 1.08fr;
  gap:40px;
  align-items:start;
}
.painspread-feature{
  position:sticky;
  top:24px;
  border-radius:16px;
  overflow:hidden;
  min-height: 580px;
  display:flex;
  align-items:flex-end;
  box-shadow:0 18px 40px rgba(120,60,10,.22);
}
.painspread-feature .psf-img{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:grayscale(.15);
}
.painspread-feature::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,12,6,.92) 0%, rgba(28,16,8,.55) 45%, rgba(255,115,1,.18) 100%);
}
.psf-cap{position:relative;z-index:2;color:#fff;padding:28px 26px;width: 100%;}
.psf-kicker{
  font-family:var(--font-serif); font-style:italic; font-weight:700;
  font-size:1.6rem; line-height:1.1; margin-bottom:8px;
}
.psf-cap p{font-size:.92rem;color:#f0e3d8;line-height:1.55;margin:0;max-width: 100%;}

.painlist{ list-style:none; margin:0; padding:0; counter-reset:pain; }
.painlist li{
  position:relative;
  padding:20px 8px 20px 54px;
  border-bottom:1px solid var(--line);
  transition:padding-left .25s ease;
}
.painlist li:first-child{ padding-top:4px; }
.painlist li::before{
  counter-increment:pain;
  content:counter(pain, decimal-leading-zero);
  position:absolute; left:8px; top:21px;
  font-family:var(--font-serif); font-style:italic; font-weight:700;
  font-size:1.05rem; color:var(--orange);
}
.painlist li:first-child::before{ top:5px; }
.painlist li:hover{ padding-left:62px; }
.pl-q{
  font-family:var(--font-serif); font-style:italic; font-weight:600;
  font-size:1.12rem; line-height:1.3; color:#1c1c1c; margin:0 0 6px;
}
.pl-d{font-size: .9rem;color:#666;line-height:1.5;margin:0;}

/* ============================================================
   VALUE SECTION — image-topped feature cards on a peach band
   ============================================================ */
.tintband{ background:var(--peach-light); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.vcard-grid{display:grid;grid-template-columns: repeat(auto-fit,minmax(310px,1fr));gap:22px;}
.vcard{
  background:#fff; border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease;
}
.vcard:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.12); }
.vcard-img{
  position:relative; height:150px;
  background-size:cover; background-position:center;
}
.vcard:hover .vcard-img{ }
.vcard-img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(20,12,6,.55) 0%, rgba(20,12,6,.05) 55%);
}
.vcard-no{
  position:absolute; top:12px; left:14px; z-index:2;
  font-family:var(--font-serif); font-style:italic; font-weight:700;
  font-size:1.4rem; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.vcard-ic{
  position:absolute; right:16px; bottom:-22px; z-index:3;
  width:46px; height:46px; border-radius:12px;
  background:var(--orange); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem; box-shadow:0 8px 18px rgba(255,115,1,.4);
}
.vcard-body{ padding:30px 20px 22px; }
.vcard-body h4{font-family:var(--font-body);font-weight:700;font-size: 1.2rem;color:#1c1c1c;margin-bottom:8px;}
.vcard-body p{font-size: 1rem;color:#666;line-height:1.5;margin:0;}

@media (max-width: 860px){
  .painspread-grid{ grid-template-columns:1fr; gap:24px; }
  .painspread-feature{ position:relative; top:0; min-height:260px; }
} 
.book-launch-box{
  width:418px;
}
@media (min-width:1200px) and (max-width:1399px) {
  .painlist li {
    padding: 10px 8px 10px 54px;
  }
  .painlist li::before {
    top: 8px;
  }
}

/* =====================================================================
   promote-nav.css  —  HEADER ONLY.
   These are the navbar dropdown + rich-card styles taken verbatim from
   the homepage's home.css. Nothing else from that file is included.
   Link this AFTER css/index.css and css/promote.css so it wins.
   ===================================================================== */

/* ---- old-navigation submenu design, ported into the new navbar ---- */
.nav-wrap {
  --fl-accent: #ff7601; /* brand orange (active text, underline, hover-flip reveal) */
  --fl-ink: #000;       /* nav + dropdown item text */
  --fl-pill: #f0f0f2;   /* grey pill behind an open dropdown parent */
}

.main-nav .nav-item > a {
  position: relative;
  display: inline-block;
  padding: 0px 8px;
  color: var(--black);
  font-size: 15px;
  border-radius: 22px;
  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}
.main-nav .nav-item > a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -23px;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--fl-accent);
  transition: width 0.25s ease;
}
.main-nav .nav-item > a:hover,
.main-nav .nav-item > a:focus,
.main-nav .nav-item > a.active {
  color: var(--fl-accent);
}
.main-nav .nav-item > a:hover::after,
.main-nav .nav-item > a:focus::after,
.main-nav .nav-item > a.active::after {
  width: calc(100% - 24px);
}

.main-nav .nav-item.dropdown {
  position: relative;
}
.main-nav .nav-item.dropdown:hover > a::after,
.main-nav .nav-item.dropdown:focus-within > a::after,
.main-nav .nav-item.dropdown.fl-open > a::after {
  width: calc(100% - 24px);
}

.main-nav .dropdown-menu {
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  min-width: 224px;
  margin-top: 0px;
  padding: 10px 0;
  border: 0;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1);
  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    visibility 0.22s ease;
}
.main-nav .nav-item.dropdown:hover > .dropdown-menu,
.main-nav .nav-item.dropdown:focus-within > .dropdown-menu,
.main-nav .nav-item.dropdown.fl-open > .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.main-nav .dropdown-menu .dropdown-item {
  padding: 9px 24px;
  color: var(--fl-ink);
  font-weight: 500;
  background: transparent;
}
.main-nav .dropdown-menu .dropdown-item:hover,
.main-nav .dropdown-menu .dropdown-item:focus {
  background: transparent;
}

.main-nav .hover-flip-item-wrapper {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.main-nav .hover-flip-item {
  display: block;
  transition: transform 0.35s cubic-bezier(0.3, 1, 0.35, 1);
}
.main-nav .hover-flip-item > span {
  display: block;
  position: relative;
  font-size: 15px;
}
.main-nav .hover-flip-item > span::after {
  content: attr(data-text);
  position: absolute;
  top: 100%;
  left: 0;
  color: var(--fl-accent);
}
.nav-item {
  height: 70px;
  display: flex;
  align-items: center;
}
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
    top: 70px;
  }
}
.main-nav .dropdown-item:hover .hover-flip-item,
.main-nav .dropdown-item:focus .hover-flip-item {
  transform: translateY(-100%);
}

/* --- mobile (collapsed navbar): static accordion, tap to open ----- */
@media (max-width: 991.98px) {
    .nav-wrap{
        padding:20px 0;
    }
  .main-nav .nav-item > a {
    border-radius: 8px;
  }
  .main-nav .nav-item > a::after {
    display: none;
  }
  .main-nav .dropdown-menu {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    display: none;
    margin: 4px 0 4px 12px;
    padding: 4px 0;
    box-shadow: none;
    min-width: 0;
  }
  .main-nav .nav-item.dropdown:hover > .dropdown-menu,
  .main-nav .nav-item.dropdown:focus-within > .dropdown-menu {
    display: none;
  }
  .main-nav .nav-item.dropdown.fl-open > .dropdown-menu {
    display: block;
  }
  .main-nav .nav-item.dropdown:hover > a,
  .main-nav .nav-item.dropdown:focus-within > a {
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main-nav .nav-item > a,
  .main-nav .nav-item > a::after,
  .main-nav .dropdown-menu,
  .main-nav .hover-flip-item {
    transition: none;
  }
}

@media (min-width: 992px) {
  .main-nav .dropdown:hover > .dropdown-menu {
    display: block;
  }
}

/* =====================================================================
   MOBILE submenu styling + fix (append-only, wins by source order)
   ===================================================================== */
@media (max-width: 991.98px){
  .nav-wrap{
    --flm-ink:    #000;
    --flm-accent: #FF7601;
    --flm-line:   #F0F2F5;
    --flm-pad-x:  10px;
    --flm-indent: 32px;
  }

  /* undo the 70px flex-row nav item on mobile so submenus stack below */
  .main-nav .nav-item{
    display: block;
    height: auto;
    align-items: stretch;
  }

  .main-nav.navbar-nav{
    gap: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  .main-nav .nav-item{ border-bottom: 1px solid var(--flm-line); }

  .main-nav .nav-item > a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    color: var(--black);
    background: transparent;
    border-radius: 0;
  }
  .main-nav .nav-item > a:hover,
  .main-nav .nav-item > a:focus{ color: var(--flm-ink); background: transparent; }

  .main-nav .nav-item > a::after{ display: none; }

  .main-nav .nav-item.dropdown > a::after,
  .main-nav .nav-item.dropdown:hover > a::after,
  .main-nav .nav-item.dropdown:focus-within > a::after,
  .main-nav .nav-item.dropdown.fl-open > a::after{
    display: inline-block;
    content: "";
    position: static;
    left: auto; bottom: auto;
    flex: 0 0 auto;
    width: 8px; height: 8px;
    margin: -3px 2px 0 12px;
    border: 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-radius: 0;
    background: transparent;
    transform: rotate(45deg);
    transition: transform .25s ease;
  }

  .main-nav .nav-item.dropdown.fl-open > a{
    color: var(--flm-accent);
    background: transparent;
  }
  .main-nav .nav-item.dropdown.fl-open > a::after{
    transform: rotate(-135deg);
    margin-top: 3px;
  }

  .main-nav .dropdown-menu{
    position: static;
    display: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    min-width: 0;
    margin: 0;
    padding: 0 0 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .main-nav .nav-item.dropdown:hover > .dropdown-menu,
  .main-nav .nav-item.dropdown:focus-within > .dropdown-menu{ display: none; }
  .main-nav .nav-item.dropdown.fl-open > .dropdown-menu{ display: block; }

  .main-nav .dropdown-menu .dropdown-item{
    padding: 8px var(--flm-pad-x) 8px var(--flm-indent);
    color: var(--black);
    font-weight: 500;
    font-size: 14px;
  }

  .main-nav .dropdown-item:hover .hover-flip-item,
  .main-nav .dropdown-item:focus .hover-flip-item{ transform: none; }
}

/* =====================================================================
   Rich dropdown cards (PVLF + E-Magazine)
   ===================================================================== */
.nav-wrap{
  --flc-card:  #f4f4f5;
  --flc-edge:  #e7e7e9;
  --flc-label: #9b9b9b;
  --flc-title: #2b2b2b;
  --flc-desc:  #9a9a9a;
  --flc-sep:   #bcbcbc;
}

.main-nav .dropdown-menu.fl-card{
  min-width: 300px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--flc-edge);
  border-radius: 12px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .12);
}
.main-nav .dropdown-menu.fl-card-emag{ min-width: 264px; }

.fl-card-sec{ padding: 4px 2px; }
.fl-card-sec + .fl-card-sec{
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--flc-edge);
}
.fl-card-label{
  display: block;
  font-size: 9.6px;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--flc-label);
  padding: 2px 10px 6px;
}

.main-nav .fl-card-item{
  display: block;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--flc-title);
  transition: background-color .15s ease, color .15s ease;
}
.main-nav .fl-card-item:hover,
.main-nav .fl-card-item:focus{ background: rgba(255, 255, 255, .8); }
.fl-card-title{
  display: block;
  font-weight: 600;
  font-size: 14.72px;
  line-height: 1.3;
  color: var(--flc-title);
  transition: color .15s ease;
}
.main-nav .fl-card-item:hover .fl-card-title,
.main-nav .fl-card-item:focus .fl-card-title{ color: var(--fl-accent, #ff7601); }
.fl-card-desc{
  display: block;
  font-size: 12.16px;
  line-height: 1.3;
  color: var(--flc-desc);
  margin-top: 1px;
}

.fl-card-pair{ display: flex; align-items: center; flex-wrap: wrap; }
.fl-card-pair .fl-card-item{ flex: 0 0 auto; }
.fl-card-sep{ color: var(--flc-sep); padding: 0 2px; user-select: none; }

.fl-card-divider{ height: 1px; background: var(--flc-edge); margin: 6px 8px; }

@media (max-width: 991.98px){
  .main-nav .dropdown-menu.fl-card{
    min-width: 0;
    padding: 0 0 6px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .fl-card-sec{ padding: 0; }
  .fl-card-sec + .fl-card-sec{ margin-top: 2px; padding-top: 6px; border-top: 0; }
  .fl-card-label{ padding: 8px 10px 2px 24px; }

  .main-nav .fl-card-item{
    padding: 7px 10px 7px 32px;
    border-radius: 0;
  }
  .main-nav .fl-card-item:hover,
  .main-nav .fl-card-item:focus{ background: transparent; }

  .fl-card-pair{ padding-left: 0; }
  .fl-card-pair .fl-card-item{ padding-right: 4px; }
  .fl-card-divider{ margin: 4px 10px 4px 24px; }
}
.nav-item{
    margin:0;
}

/* =====================================================================
   promote-footer.css  —  FOOTER ONLY (self-contained).
   Full styling for the footer so it renders correctly on this standalone
   page. This page's index.css does NOT ship the AxilThemes footer styles,
   so everything the footer needs is here. Colours are hardcoded (no theme
   variables required). Load AFTER index.css / promote.css.

   NOTE: if you earlier pasted a small "promote-footer.css" block into
   promote.css (just the hover-flip rules), replace that block with this
   full version.
   ===================================================================== */

/* ---- shell ---- */
.axil-footer-area{ background:#fff; }
.axil-footer-style-1{ padding:40px 0; }
.axil-footer-style-1 .footer-top .inner{
  padding-bottom:20px;
  border-bottom:1px solid #CED0D4;
  margin-bottom:20px;
}
.axil-footer-area .follow-title{
  font-size:18px;
  line-height:1.24;
  font-weight:700;
  color:#000;
  margin:0;
}

/* ---- Follow Us social icons ---- */
.axil-footer-area ul.social-icon{
  margin:-5px;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
}
.axil-footer-area ul.social-icon li{ margin:5px; }
.axil-footer-area ul.social-icon li a{
  width:50px; height:50px; line-height:50px;
  border-radius:100%;
  background:#F0F2F5;
  display:block; text-align:center;
  font-size:14px;
}
.axil-footer-area ul.social-icon li a:hover{
  background:#ff7601 !important;
  color:#fff !important;
}
.axil-footer-area ul.social-icon.color-tertiary li a{ color:#050505; }
.axil-footer-area ul.social-icon.color-tertiary li a:hover{ color:#fff; }
.axil-footer-area ul.social-icon.md-size li a{
  width:40px; height:40px; line-height:40px;
}

/* ---- copyright row: logo + menu + text ---- */
.axil-footer-area .copyright-area .copyright-left{
  display:flex; align-items:center; flex-wrap:wrap;
}
.axil-footer-area .copyright-area .copyright-left .logo{ margin-right:53px; }
.axil-footer-area .copyright-area .copyright-left .logo img{ max-height:37px; }

.axil-footer-area .copyright-area ul.mainmenu{
  display:flex; flex-wrap:wrap;
  padding:0; margin:0 0 -10px;
  list-style:none;
}
.axil-footer-area .copyright-area ul.mainmenu li{ margin:0 10px 10px; }
.axil-footer-area .copyright-area ul.mainmenu li:first-child{ margin-left:0; }
.axil-footer-area .copyright-area ul.mainmenu li a{
  color:#878787;
  font-size:16px;
  line-height:22px;
  display:block;
  font-weight:500;
  height:auto;
}
.axil-footer-area .copyright-area .copyright-right p{
  color:#878787;
  font-size:14px;
  line-height:1.6;
  margin:0;
}

/* ---- footer menu hover-flip animation ---- */
.axil-footer-area .hover-flip-item-wrapper{
  display:inline-block; overflow:hidden; vertical-align:top;
}
.axil-footer-area .hover-flip-item{
  display:block;
  transition:transform .35s cubic-bezier(.3,1,.35,1);
}
.axil-footer-area .hover-flip-item > span{ display:block; position:relative; }
.axil-footer-area .hover-flip-item > span::after{
  content:attr(data-text);
  position:absolute; top:100%; left:0;
  color:#ff7601;
}
.axil-footer-area .mainmenu li a:hover .hover-flip-item,
.axil-footer-area .mainmenu li a:focus .hover-flip-item{
  transform:translateY(-100%);
}

/* ---- responsive ---- */
@media (max-width:767px){
  .axil-footer-area .copyright-area .copyright-left .logo{
    flex-basis:100%; margin-right:0; margin-bottom:20px;
  }
  .axil-footer-area .copyright-area ul.mainmenu li{ margin:0 5px 10px; }
}
@media (prefers-reduced-motion: reduce){
  .axil-footer-area .hover-flip-item{ transition:none; }
}

.mr--20 {
    margin-right: 20px !important;
}
.mb--0 {
    margin-bottom: 0 !important;
}
.follow-title{
    font-weight:700;
}
.emag-banner a{
    color:#fff;
}