/* ============================================================
   PodBulk 2026 REDESIGN LAYER
   Loaded LAST (after podbulk.css + style.css) so these rules win.
   Bold, playful, green/white/black + lighter green. Mascot-forward.
   Everything here is additive — delete this file to revert instantly.
   ============================================================ */

:root{
  --green:#1FD877;
  --green-2:#12b866;
  --green-3:#0a8f4e;
  --green-ink:#04140b;
  --lime:#7bf0ac;
  --mint:#eafbf1;
  --mint-2:#d6f8e4;
  --mint-3:#c4f6d8;
  --gold:#FFC107;
  --gold-2:#FFA000;
  --ink:#0b110d;
  --body:#1e2823;
  --line:#e5eae6;
}

/* ---- Bolder, more readable text sitewide ---- */
body{font-weight:500;color:var(--body);}
p{font-weight:500;}
.hero .sub,.block-head p,.split p,.page-hero p{font-weight:500;color:#2b352e;}
.split .ticks li{font-weight:600;color:#1c241f;}

/* Heavier, tighter headings + gradient highlight */
.hero h1,.block-head h2,.split h2,.page-hero h1,.dark-cta h2{
  font-weight:700;letter-spacing:-1.5px;color:var(--ink);
}
.hero h1{font-size:60px;line-height:1.02;letter-spacing:-2.4px;}
.hero h1 .hl{
  background:linear-gradient(120deg,var(--green) 0%,var(--green-2) 55%,var(--green-3) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--green-2);
  position:relative;white-space:nowrap;
}
/* hand-drawn underline under the highlight, like the reference */
.hero h1 .hl:after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:12px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='12' viewBox='0 0 240 12'><path d='M2 8 C 60 2, 120 12, 238 4' stroke='%231FD877' stroke-width='4' fill='none' stroke-linecap='round'/></svg>") no-repeat center/100% 100%;
}

/* ============ HERO: two-column collage ============ */
.hero{
  padding:96px 0 84px;overflow:hidden;position:relative;
  background:
    radial-gradient(760px 420px at 12% 6%,rgba(31,216,119,.16),transparent 60%),
    radial-gradient(680px 520px at 92% 30%,rgba(123,240,172,.20),transparent 62%),
    linear-gradient(180deg,#ffffff 0%,var(--mint) 100%);
}
.hero .inner{max-width:var(--maxw);width:100%;text-align:left;}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:48px;align-items:center;}
.hero-copy{position:relative;z-index:3;}
.hero .pill{margin-bottom:20px;background:#fff;font-weight:700;box-shadow:0 6px 18px rgba(16,21,16,.06);}
.hero .btn-row{justify-content:flex-start;}
.hero .micro{text-align:left;font-weight:600;}

/* Social proof — stars + 20+ happy customers */
.home-social-proof{flex-direction:row!important;align-items:center;justify-content:flex-start;gap:16px;margin:28px 0 0!important;text-align:left;}
.hsp-stars{display:flex;gap:2px;}
.hsp-stars svg{width:22px;height:22px;filter:drop-shadow(0 1px 1px rgba(255,160,0,.35));}
.hsp-text{display:flex;flex-direction:column;line-height:1.15;}
.hsp-text .n{font-family:var(--font);font-weight:700;font-size:19px;color:var(--ink);letter-spacing:-.3px;}
.hsp-text .l{font-family:var(--mono);font-size:12px;color:#5a655e;letter-spacing:.3px;}
.home-social-proof .sp-num,.home-social-proof .sp-label{display:none;}

/* Right-side collage */
.hero-art{position:relative;z-index:2;min-height:440px;}
.hero-art .browser{
  border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden;
  box-shadow:0 30px 70px rgba(10,60,35,.16),0 8px 20px rgba(10,60,35,.08);
  transform:rotate(-1.4deg);position:relative;z-index:2;
}
.hero-art .browser .bar{display:flex;gap:6px;align-items:center;padding:12px 15px;border-bottom:1px solid var(--line);background:var(--mint);}
.hero-art .browser .bar i{width:11px;height:11px;border-radius:50%;background:#cfe9da;display:block;}
.hero-art .browser .bar i:first-child{background:#ff5f57;}
.hero-art .browser .bar i:nth-child(2){background:#febc2e;}
.hero-art .browser .bar i:nth-child(3){background:#28c840;}
.hero-art .browser img{display:block;width:100%;height:auto;}

/* Floating cards */
.float-card{position:absolute;background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 40px rgba(10,60,35,.16);padding:14px 16px;z-index:4;}
.fc-review{left:-26px;bottom:44px;width:216px;transform:rotate(-3deg);}
.fc-review .stars{display:flex;gap:1px;margin-bottom:7px;}
.fc-review .stars svg{width:16px;height:16px;}
.fc-review p{font-size:12.5px;font-weight:600;color:#28332b;line-height:1.45;margin:0;}
.fc-review .who{font-family:var(--mono);font-size:10.5px;color:#7c877f;margin-top:8px;}
.fc-badge{right:-14px;top:22px;display:flex;align-items:center;gap:9px;transform:rotate(3deg);padding:11px 15px;}
.fc-badge .big{font-weight:700;font-size:22px;color:var(--green-2);letter-spacing:-.5px;}
.fc-badge .sm{font-family:var(--mono);font-size:10.5px;color:#5a655e;line-height:1.2;}

/* Mascot floating in hero */
.hero-mascot{position:absolute;width:150px;height:auto;right:-30px;bottom:-34px;z-index:5;
  filter:drop-shadow(0 14px 24px rgba(10,60,35,.22));animation:podfloat 6s ease-in-out infinite;}
@keyframes podfloat{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-12px) rotate(-2deg);}}

/* Decorative shapes */
.deco{position:absolute;pointer-events:none;z-index:1;}
.deco.ring{width:74px;height:74px;border:6px solid rgba(31,216,119,.35);border-radius:50%;left:6%;top:20%;}
.deco.ring2{width:38px;height:38px;border:5px solid rgba(255,193,7,.55);border-radius:50%;right:40%;top:8%;}
.deco.dot-grid{right:3%;bottom:6%;width:120px;height:80px;
  background-image:radial-gradient(rgba(18,184,102,.32) 2.4px,transparent 2.6px);background-size:16px 16px;}
.deco.blob{width:200px;height:200px;border-radius:46% 54% 60% 40%/52% 44% 56% 48%;
  background:radial-gradient(circle at 35% 35%,rgba(123,240,172,.5),rgba(31,216,119,.12));left:-70px;bottom:-40px;filter:blur(2px);}
.deco.squig{left:44%;bottom:2%;width:90px;height:22px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='22' viewBox='0 0 90 22'><path d='M2 12 q 10 -12 20 0 t 20 0 t 20 0 t 20 0' stroke='%23FFC107' stroke-width='3.5' fill='none' stroke-linecap='round'/></svg>") no-repeat center/contain;}

/* ============ Stat row — bolder chips ============ */
.stat-row{margin-top:64px;}
.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px 14px;box-shadow:0 8px 22px rgba(10,60,35,.05);}
.stat .n{font-size:28px;font-weight:700;}
.stat .n span{background:linear-gradient(120deg,var(--green),var(--green-3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.stat .l{font-weight:700;color:#4b564f;}

/* ============ Section headers ============ */
.block.tint{background:linear-gradient(180deg,var(--mint) 0%,#f4fbf7 100%);}
.block-head h2{font-size:38px;letter-spacing:-1.4px;}
.kicker{color:var(--green-3);font-weight:700;}
.split h2 .hl,.block-head h2 .hl{background:linear-gradient(120deg,var(--green),var(--green-3));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* Cards get bolder */
.step-card,.benefit,.ba,.frame{border-color:var(--line);}
.step-card{border-radius:18px;box-shadow:0 10px 26px rgba(10,60,35,.05);}
.step-card:hover{box-shadow:0 18px 40px rgba(10,60,35,.12);}
.step-card .num{background:linear-gradient(135deg,var(--green),var(--green-2));font-size:15px;box-shadow:0 6px 16px rgba(31,216,119,.4);}
.step-card h3,.benefit h3{font-weight:700;color:var(--ink);}
.benefit .ic{background:var(--mint-2);}
.benefit .ic svg{stroke:var(--green-3);}

/* Buttons punchier */
.btn-green{background:linear-gradient(135deg,var(--green) 0%,var(--green-2) 100%);color:#032312;font-weight:700;box-shadow:0 10px 24px rgba(31,216,119,.42);}
.btn-green:hover{box-shadow:0 16px 34px rgba(31,216,119,.55);}
.btn-lg{padding:17px 32px;font-size:15.5px;}
.header-cta .btn-green{color:#032312;}

/* Section-tag mascot accent */
.mascot-inline{width:54px;height:54px;vertical-align:middle;margin-right:8px;filter:drop-shadow(0 6px 10px rgba(10,60,35,.18));}

/* ============ Before/After punch ============ */
.ba{border-radius:18px;box-shadow:0 12px 30px rgba(10,60,35,.07);}
.ba.after{border-color:var(--mint-3);}
.ba.after .tag{background:var(--mint);font-weight:700;}
.ba-arrow{display:flex;align-items:center;justify-content:center;}
.ba-arrow svg{width:46px;height:46px;fill:none;stroke:var(--green-2);stroke-width:2.4;}

/* ============ Comparison ============ */
table.cmp thead th.pod{background:var(--mint);color:var(--green-3);font-weight:700;}
table.cmp .yes{color:var(--green-3);font-weight:700;}

/* ============ REVIEWS (gold stars) ============ */
.reviews-wrap{max-width:1000px;margin:0 auto;}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.review-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 24px;
  box-shadow:0 10px 30px rgba(10,60,35,.06);display:flex;flex-direction:column;transition:transform .15s ease,box-shadow .15s ease;}
.review-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(10,60,35,.12);}
.review-card .stars{display:flex;gap:2px;margin-bottom:14px;}
.review-card .stars svg{width:20px;height:20px;filter:drop-shadow(0 1px 1px rgba(255,160,0,.3));}
.review-card p{font-size:15.5px;font-weight:500;color:#242e28;line-height:1.6;flex:1;margin:0;}
.review-card .rv-who{display:flex;align-items:center;gap:11px;margin-top:20px;}
.review-card .rv-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--green-2));
  display:flex;align-items:center;justify-content:center;font-weight:700;color:#032312;font-size:16px;flex-shrink:0;}
.review-card .rv-meta{line-height:1.25;}
.review-card .rv-meta .nm{font-weight:700;font-size:14px;color:var(--ink);}
.review-card .rv-meta .vf{font-family:var(--mono);font-size:11px;color:var(--green-3);display:flex;align-items:center;gap:4px;}
.review-card .rv-meta .vf svg{width:12px;height:12px;fill:var(--green-2);}
.reviews-summary{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 auto 40px;flex-wrap:wrap;}
.reviews-summary .big{font-size:44px;font-weight:700;letter-spacing:-1.5px;color:var(--ink);}
.reviews-summary .stars{display:flex;gap:3px;}
.reviews-summary .stars svg{width:26px;height:26px;}
.reviews-summary .rs-sub{font-family:var(--mono);font-size:13px;color:#5a655e;}

/* ============ Dark CTAs — bolder glow ============ */
.dark-cta{border-radius:22px;}
.dark-cta:before{background:radial-gradient(circle,rgba(31,216,119,.34),transparent 62%);}
.dark-cta .btn-onblack{background:linear-gradient(135deg,var(--green),var(--green-2));color:#032312;font-weight:700;}

/* ============ Responsive ============ */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:56px;}
  .hero .inner{text-align:center;}
  .hero .btn-row,.home-social-proof{justify-content:center!important;}
  .home-social-proof{margin-left:auto!important;margin-right:auto!important;}
  .hero .micro{text-align:center;}
  .hero-art{max-width:520px;margin:0 auto;}
  .reviews-grid{grid-template-columns:1fr;}
}
@media(max-width:640px){
  .hero{padding:64px 0 60px;}
  .hero h1{font-size:36px;letter-spacing:-1.2px;}
  .hero-mascot{width:104px;right:-6px;bottom:-20px;}
  .fc-review{left:-8px;width:180px;}
  .fc-badge{right:-4px;}
  .block-head h2{font-size:28px;}
  /* keep decorative shapes off the text on small screens */
  .deco.ring,.deco.ring2,.deco.blob{display:none;}
  .mascot-inline{width:40px;}
}

/* ============================================================
   V2 — BIGGER FONTS + MORE GREEN/BLACK COLOR
   (later rules win; this is the "louder" pass)
   ============================================================ */
:root{--display:"Bricolage Grotesque","Space Grotesk",sans-serif;}

/* Heavy display typeface + much larger headings */
.hero h1,.block-head h2,.split h2,.page-hero h1,.dark-cta h2,
.reviews-summary .big,.hsp-text .n,.brand .name{
  font-family:var(--display);font-weight:800;
}
.hero h1{font-size:74px;line-height:.96;letter-spacing:-3px;}
.block-head h2{font-size:48px;letter-spacing:-2px;line-height:1.05;}
.split h2{font-size:42px;letter-spacing:-1.6px;}
.dark-cta h2{font-size:36px;}
.reviews-summary .big{font-size:56px;}
.hsp-text .n{font-size:22px;}
.step-card h3,.benefit h3,.review-card .rv-meta .nm{font-family:var(--display);font-weight:700;}
.kicker,.stat .l{font-weight:700;}

/* More saturated hero wash */
.hero{
  background:
    radial-gradient(720px 400px at 10% 2%,rgba(31,216,119,.24),transparent 58%),
    radial-gradient(640px 520px at 96% 26%,rgba(31,216,119,.20),transparent 60%),
    radial-gradient(520px 400px at 78% 96%,rgba(255,193,7,.10),transparent 60%),
    linear-gradient(180deg,#ffffff 0%,#e9fbf1 100%);
}
.hero .pill{background:var(--mint);border-color:var(--mint-3);color:var(--green-3);font-weight:700;}

/* Colorful stat chips — green top accent + bolder numbers */
.stat{border-top:4px solid var(--green);}
.stat:nth-child(2){border-top-color:var(--ink);}
.stat:nth-child(3){border-top-color:var(--green-2);}
.stat:nth-child(4){border-top-color:var(--gold);}
.stat .n{font-size:32px;}

/* ---- BLACK BAND: "How it works" becomes a green-on-black section ---- */
#how{background:linear-gradient(180deg,#0a0f0c 0%,#0e1712 100%);position:relative;overflow:hidden;}
#how:before{content:"";position:absolute;top:-30%;right:-6%;width:420px;height:420px;
  background:radial-gradient(circle,rgba(31,216,119,.28),transparent 62%);pointer-events:none;}
#how .kicker{color:var(--green);}
#how .block-head h2{color:#fff;}
#how .block-head p{color:rgba(255,255,255,.72);}
#how .step-card{background:#111c16;border-color:rgba(255,255,255,.09);box-shadow:0 14px 34px rgba(0,0,0,.35);}
#how .step-card h3{color:#fff;}
#how .step-card p{color:rgba(255,255,255,.66);}
#how .step-card .num{box-shadow:0 6px 18px rgba(31,216,119,.5);}
#how .mascot-inline{filter:drop-shadow(0 6px 12px rgba(31,216,119,.4));}

/* Reviews summary — bigger, bolder, greener */
.reviews-summary .big{color:var(--green-3);}
.reviews-summary .stars svg{width:30px;height:30px;}

/* Bigger, punchier buttons */
.btn-lg{font-size:16px;padding:18px 34px;letter-spacing:.4px;}
.hero h1 .hl:after{bottom:-10px;height:14px;}

@media(max-width:980px){
  .hero h1{font-size:56px;letter-spacing:-2px;}
}
@media(max-width:640px){
  .hero h1{font-size:40px;letter-spacing:-1.4px;line-height:1.02;}
  .block-head h2{font-size:32px;letter-spacing:-1.2px;}
  .split h2{font-size:30px;}
  .reviews-summary .big{font-size:44px;}
}

/* ============================================================
   V3 — DE-SQUEEZE (more room) + TOOLS SHOWCASE + VIDEO
   ============================================================ */
:root{--maxw:1180px;}
.container{padding:0 32px;}
.block{padding:96px 0;}
.hero{padding:104px 0 96px;}
.hero .inner{padding:0 32px;}
.hero-grid{gap:66px;}
.block-head{margin-bottom:58px;max-width:720px;}
.split{gap:62px;}
.steps{gap:26px;}
.benefits{gap:22px;}
.stat-row{gap:22px;margin-top:74px;padding:0 32px;}
.reviews-grid{gap:26px;}
.reviews-summary{margin-bottom:46px;}
.mini-faq{gap:14px;}
.cmp-wrap{max-width:900px;}

/* Video living inside the split (What PodBulk does) */
.split-video{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#000;
  box-shadow:0 22px 54px rgba(10,60,35,.14);}
.split-video .video-frame{border-radius:0;border:0;aspect-ratio:16/9;}

/* ---- TOOLS SHOWCASE ---- */
.tools-band{background:linear-gradient(180deg,#ffffff 0%,#eefaf3 100%);}
.tools-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1060px;margin:0 auto;}
.tool-card{position:relative;display:flex;gap:15px;background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:24px 22px;box-shadow:0 10px 26px rgba(10,60,35,.05);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.tool-card:hover{transform:translateY(-4px);box-shadow:0 20px 44px rgba(10,60,35,.13);border-color:var(--mint-3);}
.tool-card .t-ic{flex-shrink:0;width:50px;height:50px;border-radius:14px;
  background:linear-gradient(135deg,var(--mint-2),var(--mint-3));display:flex;align-items:center;justify-content:center;}
.tool-card .t-ic svg{width:26px;height:26px;stroke:var(--green-3);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.tool-card h3{font-family:var(--display);font-weight:700;font-size:17px;color:var(--ink);margin:0 0 5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.2;}
.tool-card p{font-size:13.5px;font-weight:500;color:#586359;line-height:1.5;margin:0;}
.tool-tag{font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.5px;padding:3px 7px;border-radius:6px;text-transform:uppercase;line-height:1;}
.tool-tag.free{background:var(--green);color:#032312;}
.tool-tag.new{background:var(--ink);color:#fff;}
.tools-cta{text-align:center;margin-top:44px;}
@media(max-width:940px){.tools-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.tools-grid{grid-template-columns:1fr;}.container{padding:0 22px;}}

/* ============================================================
   V4 — BEFORE/AFTER REBUILD + DARK-CTA HEADING FIX
   ============================================================ */

/* Dark CTAs: the display-font rule forced h2 to --ink (black on black).
   Restore white so "From free to 8,000 mockups a month" is visible again. */
.dark-cta h2,.dark-cta h3{color:#fff;}
.price-cta .line{color:var(--green);}

/* Before/After: two identical panels, no green tint or glow anywhere */
.ba-grid{gap:26px;align-items:stretch;}
.ba{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;
  overflow:hidden;box-shadow:0 12px 30px rgba(10,60,35,.07);}
.ba.after{border-color:var(--line);box-shadow:0 12px 30px rgba(10,60,35,.07);}
.ba .tag{background:#fff;border-bottom:1px solid var(--line);font-weight:700;font-size:11px;letter-spacing:1.4px;color:var(--muted);}
.ba.before .tag{color:var(--muted);}
.ba.after .tag{background:#fff;color:var(--green-3);}
/* show the WHOLE image on both sides (both source images are 750x666, so panels match) */
.ba .img.has-img{padding:0;display:block;overflow:hidden;background:#111;line-height:0;}
.ba .img.has-img img{width:100%;height:auto;display:block;}
/* caption below the image */
.ba-cap{padding:16px 20px 0;font-family:var(--font);font-size:14px;font-weight:500;color:#3a453e;line-height:1.55;}
/* stat line — see V5 below for the loud banner treatment */
@media(max-width:640px){.ba-cap{font-size:13.5px;}}

/* ============================================================
   V5 — LOUD BEFORE/AFTER STAT BANNERS + PC-SPEED NOTE
   Big, high-contrast, impossible to ignore. Existing tokens only.
   ============================================================ */
.ba-stat{
  margin:18px 20px 8px;align-self:stretch;display:flex;flex-direction:column;gap:5px;
  border:0;border-radius:14px;padding:16px 18px;text-align:center;
  font-family:var(--display);font-weight:800;letter-spacing:-.3px;
}
.ba-stat .ba-stat-line{font-size:21px;line-height:1.15;}
.ba-stat .ba-stat-tag{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;}
.ba.before .ba-stat{background:var(--ink);color:#fff;box-shadow:0 10px 26px rgba(10,20,12,.28);}
.ba.before .ba-stat .ba-stat-tag{color:var(--gold);}
.ba.after .ba-stat{background:linear-gradient(135deg,var(--green),var(--green-2));color:var(--green-ink);box-shadow:0 12px 28px rgba(10,60,35,.22);}
.ba.after .ba-stat .ba-stat-tag{color:var(--green-ink);opacity:.72;}
.ba-note{margin:6px 20px 20px;font-family:var(--mono);font-size:11.5px;color:var(--muted);line-height:1.55;}
.ba-note strong{color:var(--green-3);font-weight:700;}
@media(max-width:640px){.ba-stat .ba-stat-line{font-size:18px;}}

/* ============================================================
   V6 — TYPOGRAPHY: Bebas Neue (titles) + Oswald (writing)
   Applies on every page via the theme font variables.
   ============================================================ */
:root{
  --font:"Oswald",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Oswald",-apple-system,"Segoe UI",sans-serif;
  --display:"Bebas Neue","Oswald",sans-serif;
}
body{font-family:var(--font);font-weight:400;color:var(--body);font-size:16.5px;line-height:1.65;letter-spacing:.2px;}
p{font-weight:400;}

/* All titles -> Bebas Neue (condensed all-caps: one weight, needs positive tracking) */
h1,h2,h3,
.reviews-summary .big,.hsp-text .n,.brand .name,
.ba-stat .ba-stat-line,.stat .n,
.step-card h3,.benefit h3,.tool-card h3,.review-card .rv-meta .nm,.dark-cta h2,.dark-cta h3{
  font-family:var(--display);font-weight:400;letter-spacing:.5px;
}

/* Size bumps so condensed caps keep their presence */
.hero h1{font-size:86px;line-height:.94;letter-spacing:1px;}
.block-head h2{font-size:54px;line-height:1;letter-spacing:.5px;}
.split h2{font-size:46px;line-height:1.02;letter-spacing:.5px;}
.page-hero h1{font-size:54px;line-height:1;letter-spacing:.5px;}
.dark-cta h2,.dark-cta h3{font-size:44px;line-height:1;}
.reviews-summary .big{font-size:66px;letter-spacing:0;}
.stat .n{font-size:34px;letter-spacing:0;}
.hsp-text .n{font-size:24px;}
.step-card h3,.tool-card h3,.benefit h3{font-size:22px;letter-spacing:.4px;}
.ba-stat .ba-stat-line{font-size:27px;letter-spacing:.5px;}
.post>h1,.legal h1{font-size:52px;letter-spacing:.5px;line-height:1;}
.post-body h2,.legal h2,.prose-wrap h2{font-size:34px;letter-spacing:.4px;line-height:1.05;}

/* Oswald body: relaxed for the condensed face */
.hero .sub{font-size:19px;font-weight:400;}
.block-head p,.split p{font-weight:400;}
.btn{font-weight:600;letter-spacing:1px;}

@media(max-width:640px){
  .hero h1{font-size:52px;letter-spacing:.5px;}
  .block-head h2{font-size:36px;}
  .split h2{font-size:32px;}
  .page-hero h1,.post>h1,.legal h1{font-size:38px;}
}

/* ============================================================
   V7 — 5-COLUMN COMPARISON TABLE
   PodBulk column green (with a star on wins / "Equal" on ties);
   competitor columns muted; four exclusive-win rows highlighted.
   ============================================================ */
.cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.cmp5{min-width:820px;font-size:14px;}
table.cmp5 th,table.cmp5 td{padding:13px 14px;vertical-align:middle;text-align:left;}
table.cmp5 thead th{background:var(--soft);font-family:var(--mono);font-size:11.5px;letter-spacing:.3px;color:var(--sub);white-space:nowrap;}
table.cmp5 thead th.pod{background:var(--mint);color:var(--green-3);font-weight:700;}
/* competitor cells: muted gray */
table.cmp5 tbody td{color:var(--muted);}
table.cmp5 td.feat{font-weight:700;color:var(--ink);}
/* PodBulk winning cells: green */
table.cmp5 td.pod-cell{background:var(--mint);color:var(--green-3);font-weight:700;}
.cmp-star{color:var(--gold);font-size:13px;margin-left:2px;vertical-align:middle;}
.cmp-eq{display:inline-block;margin-left:6px;font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.5px;
  color:var(--muted);background:#eaeeeb;border-radius:5px;padding:2px 6px;text-transform:uppercase;vertical-align:middle;}
/* four exclusive-win rows: stronger highlight */
table.cmp5 tr.win-row td{background:#eafaf1;}
table.cmp5 tr.win-row td.feat{color:var(--green-3);}
table.cmp5 tr.win-row td.pod-cell{background:linear-gradient(135deg,var(--green),var(--green-2));color:var(--green-ink);}
table.cmp5 tr.win-row td.pod-cell .cmp-star{color:#04310f;}
/* the small note row under Rendering speed */
table.cmp5 tr.cmp-note-row td{background:#fbfdfb;color:var(--muted);font-family:var(--mono);font-size:11px;
  line-height:1.5;padding:9px 14px;font-style:italic;}
@media(max-width:640px){table.cmp5{font-size:12.5px;}table.cmp5 th,table.cmp5 td{padding:10px 11px;}}

/* Hero H1 is now a longer multi-line keyword headline — drop the hand-drawn
   underline so it can't overlap the wrapped line beneath it. */
.hero h1 .hl:after{display:none;}

/* ============================================================
   V9 — ACCESSIBILITY: WCAG AA color contrast (colors only).
   Darken muted/faint/green-3 and move green text off the too-light
   --green-2 so all text passes 4.5:1 (3:1 large). No layout changes.
   ============================================================ */
:root{
  --muted:#5b665f;    /* was #6b766f — failed 4.5:1 on tinted backgrounds */
  --faint:#5f6963;    /* was #9aa49d — 2.57:1 on white */
  --green-3:#0a7a40;  /* was #0a8f4e — accent-text green now passes on white + mint */
}
/* Green text/links that used the lighter --green-2 (2.6:1 on white) → darker accent green */
.center-link a,
.fc-badge .big,
table.cmp thead th.pod,
.faq-answer a,
.post-body a, .post-body .step, .post-body td b, .post-body td strong,
.post-card .cat, .post-card .more,
.post .crumb, .post .crumb a,
.section-label,
.vid,
.legal a,
.form-success h3{
  color:var(--green-3);
}
.center-link a svg,.vid svg{stroke:var(--green-3);fill:var(--green-3);}
/* hardcoded low-contrast reviewer line in the hero float card */
.fc-review .who{color:var(--muted);}

/* Footer column titles moved from <h4> to <h3> (heading-order); keep their look
   (bright green on the near-black footer = high contrast). */
.footer-col h3{
  font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--green);margin-bottom:16px;font-weight:700;line-height:1.2;
}

/* lite-youtube facade fills the video wrapper (replaces the raw iframe) */
.split-video lite-youtube{max-width:100%;width:100%;display:block;}

/* ============================================================
   V8 — HEADER REFRESH — match the bold Bebas/Oswald green look
   ============================================================ */
.site-header{
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(16,21,16,.02);
}
.site-header .bar{padding:16px 32px;gap:26px;}
.brand .logo-img{height:34px;}
.brand{transition:transform .15s ease;}
.brand:hover{transform:translateY(-1px);}

/* Primary nav — uppercase Oswald with an animated green underline */
.nav{gap:30px;}
.nav a{
  font-family:var(--font);
  font-size:14px;
  font-weight:600;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:#26302a;
  padding:6px 1px;
  position:relative;
  transition:color .15s ease;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0; right:100%;
  bottom:-3px;
  height:2.5px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--green),var(--green-2));
  transition:right .24s cubic-bezier(.4,0,.2,1);
}
.nav a:hover{color:var(--green-3);}
.nav a:hover::after{right:0;}
.nav a.active{color:var(--green-3);font-weight:700;}
.nav a.active::after{right:0;}

/* Header CTA buttons — tighter, uppercase, on-brand */
.header-cta{gap:10px;}
.header-cta .btn{
  font-family:var(--font);
  font-size:13px;
  font-weight:700;
  letter-spacing:.7px;
  text-transform:uppercase;
  padding:11px 20px;
  border-radius:11px;
}
.header-cta .btn-ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink);}
.header-cta .btn-ghost:hover{border-color:var(--green);color:var(--green-3);transform:translateY(-1px);}
.header-cta .btn-green{box-shadow:0 8px 20px rgba(31,216,119,.34);}

.nav-toggle{border:1.5px solid var(--line);border-radius:11px;}
.nav-toggle:hover{border-color:var(--green);}

/* Mobile: drop the underline animation; make the stacked menu clean */
@media(max-width:900px){
  .site-header .bar{padding:13px 22px;}
  .nav a::after{display:none;}
  .nav a{padding:14px 22px;letter-spacing:.5px;color:#26302a;}
  .nav a.active{color:var(--green-3);background:var(--mint);}
  .header-cta .btn{justify-content:center;}
}