/*
Theme Name: BuildersLink
Theme URI: https://builderslink.co.nz
Author: BuildersLink Team
Author URI: https://builderslink.co.nz
Description: Modern marketing theme for BuildersLink — NZ tradie-customer marketplace
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: builderslink
Tags: business, marketplace, clean, modern
*/

/* ── Variables ───────────────────────────────────────────── */
:root {
  --bl-primary: #2F5D62;
  --bl-primary-dark: #254a4e;
  --bl-primary-soft: #E6EEF0;
  --bl-accent: #F59E0B;
  --bl-accent-hover: #D97706;
  --bl-bg: #F4F6F8;
  --bl-surface: #FFFFFF;
  --bl-border: #D1D5DB;
  --bl-text: #111827;
  --bl-text-muted: #6B7280;
  --bl-success: #15803D;
  --bl-radius: 12px;
  --bl-radius-sm: 8px;
  --bl-shadow-card: 0 1px 3px rgba(0,0,0,.08);
  --bl-shadow-elevated: 0 4px 20px rgba(0,0,0,.12);
  --bl-font: 'Inter', system-ui, -apple-system, sans-serif;
  --max-w: 1200px;
}

/* ── Reset & Base ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--bl-font);
  color: var(--bl-text);
  background: var(--bl-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem 1.75rem;
  border-radius: var(--bl-radius-sm);
  font-weight: 600;
  font-size: .95rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all .2s ease;
  text-decoration: none;
  line-height: 1.4;
}

.btn-primary {
  background: var(--bl-accent);
  color: #fff;
  border-color: var(--bl-accent);
}
.btn-primary:hover {
  background: var(--bl-accent-hover);
  border-color: var(--bl-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245,158,11,.3);
}

.btn-outline {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.5);
}
.btn-outline:hover {
  background: rgba(255,255,255,.1);
  border-color: #fff;
}

.btn-teal {
  background: var(--bl-primary);
  color: #fff;
  border-color: var(--bl-primary);
}
.btn-teal:hover {
  background: var(--bl-primary-dark);
  border-color: var(--bl-primary-dark);
  transform: translateY(-1px);
}

.btn-lg {
  padding: 1rem 2.25rem;
  font-size: 1.1rem;
}

.btn-sm {
  padding: .5rem 1.25rem;
  font-size: .85rem;
}

/* ── Header ──────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bl-primary);
}

.nav-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}

.site-logo-mark {
  display: block;
  flex-shrink: 0;
}

.main-navigation .menu {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.main-navigation .menu li a {
  color: rgba(255,255,255,.8);
  font-size: .9rem;
  font-weight: 500;
  transition: color .2s;
}
.main-navigation .menu li a:hover { color: #fff; }
.main-navigation .menu li a.btn { color: #fff; }

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: .5rem;
  flex-direction: column;
  gap: 5px;
}
.mobile-menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all .3s;
}
.mobile-menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-menu-toggle.active span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

@media (max-width: 768px) {
  .mobile-menu-toggle { display: flex; }
  .main-navigation {
    display: none;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--bl-primary);
    border-top: 1px solid rgba(255,255,255,.15);
    padding: 1rem 1.5rem 1.5rem;
  }
  .main-navigation.open { display: block; }
  .main-navigation .menu {
    flex-direction: column;
    gap: .75rem;
    align-items: stretch;
  }
  .main-navigation .menu li a {
    display: block;
    padding: .5rem 0;
  }
  .main-navigation .menu li a.btn {
    text-align: center;
    margin-top: .5rem;
  }
}

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  background: var(--bl-primary);
  color: rgba(255,255,255,.7);
  padding: 3rem 0 1.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-brand p { margin-top: .75rem; font-size: .85rem; line-height: 1.7; }

.footer-col h4 {
  color: #fff;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .75rem;
}
.footer-col ul li { margin-bottom: .5rem; }
.footer-col ul li a {
  font-size: .85rem;
  transition: color .2s;
}
.footer-col ul li a:hover { color: #fff; }

/* Company/legal bar — links wrap centered, never scatter at any width */
.footer-legal ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem 2rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 1.25rem 0;
  border-top: 1px solid rgba(255,255,255,.15);
}
.footer-legal ul li { margin: 0; }
.footer-legal ul li a {
  font-size: .85rem;
  transition: color .2s;
}
.footer-legal ul li a:hover { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: 1.5rem;
  text-align: center;
  font-size: .8rem;
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: linear-gradient(135deg, rgba(47,93,98,.92), rgba(47,93,98,.82)),
              url('assets/images/hero-bg.jpg') center/cover no-repeat;
  color: #fff;
  padding: 5rem 0;
  text-align: center;
  min-height: 520px;
  display: flex;
  align-items: center;
}

.hero h1 {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.15;
  max-width: 800px;
  margin: 0 auto;
}

.hero p.hero-sub {
  font-size: 1.2rem;
  margin-top: 1.25rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  opacity: .9;
  line-height: 1.7;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

.hero-stats {
  display: flex;
  gap: 3rem;
  justify-content: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.2);
}
.hero-stat strong {
  display: block;
  font-size: 1.75rem;
  font-weight: 800;
}
.hero-stat span {
  font-size: .8rem;
  opacity: .8;
}

@media (max-width: 768px) {
  .hero { padding: 3rem 0; min-height: auto; }
  .hero h1 { font-size: 2rem; }
  .hero p.hero-sub { font-size: 1rem; }
  .hero-stats { gap: 1.5rem; flex-wrap: wrap; }
}

/* ── Section Utilities ───────────────────────────────────── */
.section {
  padding: 5rem 0;
}
.section-light { background: var(--bl-surface); }
.section-gray { background: var(--bl-bg); }

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}
.section-header h2 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--bl-text);
}
.section-header p {
  margin-top: .75rem;
  font-size: 1.05rem;
  color: var(--bl-text-muted);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .section { padding: 3rem 0; }
  .section-header h2 { font-size: 1.5rem; }
}

/* ── Value Props ─────────────────────────────────────────── */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.value-card {
  background: var(--bl-surface);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius);
  padding: 2rem;
  text-align: center;
  transition: transform .2s, box-shadow .2s;
}
.value-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bl-shadow-elevated);
}

.value-card .icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--bl-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  font-size: 1.5rem;
}

.value-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: .5rem;
}

.value-card p {
  font-size: .9rem;
  color: var(--bl-text-muted);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .value-grid { grid-template-columns: 1fr; gap: 1rem; }
}

/* ── How It Works ────────────────────────────────────────── */
.hiw-tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.hiw-track h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 2rem;
  color: var(--bl-primary);
}

.hiw-step {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.hiw-step-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bl-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
}

.hiw-step-content h4 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: .25rem;
}
.hiw-step-content p {
  font-size: .9rem;
  color: var(--bl-text-muted);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .hiw-tracks { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ── Pricing ─────────────────────────────────────────────── */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.pricing-card {
  background: var(--bl-surface);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius);
  padding: 2.5rem 2rem;
  position: relative;
}

.pricing-card.featured {
  border: 2px solid var(--bl-accent);
  box-shadow: var(--bl-shadow-elevated);
}

.pricing-badge {
  position: absolute;
  top: -12px;
  right: 1.5rem;
  background: var(--bl-accent);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: .3rem .75rem;
  border-radius: 20px;
}

.pricing-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: .25rem;
}
.pricing-card .price-subtitle {
  font-size: .85rem;
  color: var(--bl-text-muted);
  margin-bottom: 1rem;
}

.pricing-price {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: .25rem;
}
.pricing-price span {
  font-size: .9rem;
  font-weight: 400;
  color: var(--bl-text-muted);
}
.pricing-yearly {
  font-size: .8rem;
  color: var(--bl-text-muted);
  margin-bottom: 1.5rem;
}

.pricing-features {
  margin-bottom: 2rem;
}
.pricing-features li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 0;
  font-size: .9rem;
}
.pricing-features li .check { color: var(--bl-success); font-weight: 700; }
.pricing-features li .cross { color: var(--bl-border); font-weight: 700; }
.pricing-features li .detail {
  color: var(--bl-text-muted);
  font-size: .8rem;
  margin-left: auto;
}

.pricing-note {
  max-width: 700px;
  margin: 3rem auto 0;
  background: var(--bl-primary-soft);
  border-radius: var(--bl-radius);
  padding: 1.5rem 2rem;
  text-align: center;
}
.pricing-note h4 { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }
.pricing-note p { font-size: .9rem; color: var(--bl-text-muted); }

@media (max-width: 768px) {
  .pricing-grid { grid-template-columns: 1fr; }
}

/* ── CTA Section ─────────────────────────────────────────── */
.cta-section {
  background: linear-gradient(135deg, rgba(47,93,98,.93), rgba(47,93,98,.85)),
              url('assets/images/cta-bg.jpg') center/cover no-repeat;
  color: #fff;
  text-align: center;
  padding: 5rem 0;
}
.cta-section h2 { font-size: 2rem; font-weight: 700; margin-bottom: .75rem; }
.cta-section p { font-size: 1.05rem; opacity: .9; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; }
.cta-section .cta-fine { font-size: .85rem; opacity: .7; margin-top: 1.25rem; }

@media (max-width: 768px) {
  .cta-section { padding: 3rem 0; }
  .cta-section h2 { font-size: 1.5rem; }
}

/* ── Blog ────────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.blog-card {
  background: var(--bl-surface);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bl-shadow-elevated);
}

.blog-card-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.blog-card-body {
  padding: 1.5rem;
}

.blog-card-meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .8rem;
  color: var(--bl-text-muted);
  margin-bottom: .75rem;
}
.blog-card-meta .cat {
  background: var(--bl-primary-soft);
  color: var(--bl-primary);
  padding: .15rem .5rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: .7rem;
  text-transform: uppercase;
}

.blog-card-body h3 {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: .5rem;
}
.blog-card-body h3 a { color: var(--bl-text); transition: color .2s; }
.blog-card-body h3 a:hover { color: var(--bl-primary); }

.blog-card-body p {
  font-size: .85rem;
  color: var(--bl-text-muted);
  line-height: 1.6;
}

.blog-card-footer {
  padding: 0 1.5rem 1.5rem;
}
.blog-card-footer a {
  font-size: .85rem;
  font-weight: 600;
  color: var(--bl-primary);
  transition: color .2s;
}
.blog-card-footer a:hover { color: var(--bl-accent); }

@media (max-width: 768px) {
  .blog-grid { grid-template-columns: 1fr; }
}

/* ── Single Post ─────────────────────────────────────────── */
.post-header { margin-bottom: 2rem; }
.post-header h1 { font-size: 2rem; font-weight: 700; line-height: 1.3; margin-bottom: 1rem; }
.post-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: .85rem;
  color: var(--bl-text-muted);
}

.post-content {
  max-width: 720px;
  margin: 0 auto;
}
.post-content p { margin-bottom: 1.25rem; line-height: 1.8; font-size: 1.05rem; }
.post-content h2 { font-size: 1.5rem; font-weight: 700; margin: 2rem 0 .75rem; }
.post-content h3 { font-size: 1.2rem; font-weight: 600; margin: 1.5rem 0 .5rem; }
.post-content ul, .post-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.post-content ul { list-style: disc; }
.post-content ol { list-style: decimal; }
.post-content li { margin-bottom: .5rem; line-height: 1.7; }
.post-content img { border-radius: var(--bl-radius-sm); margin: 1.5rem 0; }
.post-content blockquote {
  border-left: 3px solid var(--bl-primary);
  padding-left: 1.25rem;
  margin: 1.5rem 0;
  color: var(--bl-text-muted);
  font-style: italic;
}

.post-featured-img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: var(--bl-radius);
  margin-bottom: 2rem;
}

/* ── Referral Landing (/referral/{code}) ──────────────────── */
.referral-hero {
  text-align: center;
  padding: 4rem 0 2rem;
}
.referral-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(245,158,11,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.75rem;
}
.referral-code {
  display: inline-block;
  background: var(--bl-primary);
  color: #fff;
  padding: .25rem .75rem;
  border-radius: 6px;
  font-weight: 700;
  font-family: monospace;
  font-size: 1.1rem;
}
.referral-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  margin: 2.5rem 0;
}
.referral-card {
  background: var(--bl-surface);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius);
  padding: 1.5rem;
  text-align: center;
}
.referral-card .rc-icon { font-size: 1.5rem; margin-bottom: .5rem; }
.referral-card h4 { font-size: .95rem; font-weight: 600; margin-bottom: .4rem; }
.referral-card p { font-size: .85rem; color: var(--bl-text-muted); line-height: 1.6; }
.tier-list { max-width: 520px; margin: 0 auto 2.5rem; }
.tier-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius-sm);
  padding: .75rem 1.25rem;
  margin-bottom: .5rem;
  background: var(--bl-surface);
}
.tier-item .pct { font-weight: 700; color: var(--bl-accent); }

@media (max-width: 768px) {
  .referral-cards { grid-template-columns: 1fr; }
}

/* ── How Referrals Work — Hero ───────────────────────────── */
.ref-hero {
  position: relative;
  background: linear-gradient(135deg, rgba(47,93,98,.94), rgba(37,74,78,.88)),
              url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=1400&h=500&fit=crop&crop=center') center/cover no-repeat;
  color: #fff;
  padding: 5rem 0;
  text-align: center;
}
.ref-hero-inner { max-width: 700px; margin: 0 auto; }
.ref-badge {
  display: inline-block;
  background: rgba(245,158,11,.2);
  color: var(--bl-accent);
  font-weight: 700;
  font-size: .75rem;
  padding: .4rem 1rem;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 1.25rem;
}
.ref-hero h1 {
  font-size: 2.75rem;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1rem;
}
.ref-hero p {
  font-size: 1.15rem;
  opacity: .9;
  line-height: 1.7;
  max-width: 580px;
  margin: 0 auto;
}
.ref-hero p strong { color: var(--bl-accent); }
.ref-hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  .ref-hero { padding: 3rem 0; }
  .ref-hero h1 { font-size: 1.85rem; }
  .ref-hero p { font-size: 1rem; }
}

/* ── Proof strip ─────────────────────────────────────────── */
.ref-proof-strip {
  background: var(--bl-primary-dark);
  color: #fff;
  padding: 1.25rem 0;
}
.ref-proof-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
}
.ref-proof-item { text-align: center; }
.ref-proof-item strong {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
}
.ref-proof-item span { font-size: .78rem; opacity: .75; }
.ref-proof-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,.2);
}

@media (max-width: 768px) {
  .ref-proof-inner { gap: 1.25rem; flex-wrap: wrap; }
  .ref-proof-divider { display: none; }
  .ref-proof-item strong { font-size: 1.1rem; }
}

/* ── Two reward paths ────────────────────────────────────── */
.ref-paths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.ref-path-card {
  background: var(--bl-surface);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.ref-path-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--bl-shadow-elevated);
}
.ref-path-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.ref-path-body { padding: 1.75rem; }
.ref-path-label {
  display: inline-block;
  background: rgba(245,158,11,.1);
  color: var(--bl-accent-hover);
  font-weight: 700;
  font-size: .7rem;
  padding: .3rem .75rem;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .75rem;
}
.ref-path-label-teal {
  background: rgba(47,93,98,.08);
  color: var(--bl-primary);
}
.ref-path-body h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: .75rem;
}
.ref-path-reward {
  margin-bottom: 1.25rem;
  font-size: .95rem;
  color: var(--bl-text-muted);
}
.ref-reward-tag {
  display: inline-block;
  background: rgba(245,158,11,.12);
  color: var(--bl-accent-hover);
  font-weight: 700;
  font-size: .85rem;
  padding: .3rem .75rem;
  border-radius: 6px;
}
.ref-reward-tag-teal {
  background: rgba(47,93,98,.08);
  color: var(--bl-primary);
}
.ref-path-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ref-step {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}
.ref-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bl-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  margin-top: 2px;
}
.ref-step-num-teal { background: var(--bl-primary); }
.ref-step strong {
  display: block;
  font-size: .9rem;
  margin-bottom: .1rem;
}
.ref-step p {
  font-size: .82rem;
  color: var(--bl-text-muted);
  line-height: 1.5;
}
.ref-bonus-tag {
  margin-top: 1.25rem;
  background: #F0FDFA;
  border: 1px solid #CCFBF1;
  border-radius: var(--bl-radius-sm);
  padding: .75rem 1rem;
  font-size: .82rem;
  color: #0F766E;
}
.ref-bonus-tag strong { color: #065F46; }

@media (max-width: 768px) {
  .ref-paths-grid { grid-template-columns: 1fr; }
}

/* ── Stacking section ────────────────────────────────────── */
.ref-stacking-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.ref-stacking-text h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
.ref-stacking-text > p {
  font-size: 1.05rem;
  color: var(--bl-text-muted);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}
.ref-stacking-example {
  background: var(--bl-surface);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.ref-stack-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .6rem 0;
  font-size: .9rem;
}
.ref-stack-row + .ref-stack-row { border-top: 1px solid var(--bl-border); }
.ref-stack-total {
  border-top: 2px solid var(--bl-primary) !important;
  font-weight: 700;
  color: var(--bl-primary);
}
.ref-stack-value { font-weight: 600; color: var(--bl-accent-hover); }
.ref-stack-total .ref-stack-value { color: var(--bl-primary); }
.ref-stacking-note {
  font-size: .82rem;
  color: var(--bl-text-muted);
  line-height: 1.5;
}
.ref-stacking-img img {
  width: 100%;
  border-radius: var(--bl-radius);
  box-shadow: var(--bl-shadow-elevated);
}

@media (max-width: 768px) {
  .ref-stacking-layout { grid-template-columns: 1fr; gap: 2rem; }
  .ref-stacking-img { order: -1; }
  .ref-stacking-text h2 { font-size: 1.5rem; }
}

/* ── Track section ───────────────────────────────────────── */
.ref-track-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.ref-track-img img {
  width: 100%;
  border-radius: var(--bl-radius);
  box-shadow: var(--bl-shadow-elevated);
}
.ref-track-text h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: .75rem;
}
.ref-track-text > p {
  font-size: 1.05rem;
  color: var(--bl-text-muted);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.ref-track-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.ref-track-list li {
  display: flex;
  align-items: center;
  gap: .65rem;
  font-size: .92rem;
  line-height: 1.5;
}
.ref-track-list li svg { flex-shrink: 0; }

@media (max-width: 768px) {
  .ref-track-layout { grid-template-columns: 1fr; gap: 2rem; }
  .ref-track-text h2 { font-size: 1.5rem; }
}

/* ── FAQ accordion ───────────────────────────────────────── */
.ref-faq-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.ref-faq-item {
  background: var(--bl-surface);
  border: 1px solid var(--bl-border);
  border-radius: var(--bl-radius-sm);
  overflow: hidden;
  transition: box-shadow .2s;
}
.ref-faq-item[open] { box-shadow: var(--bl-shadow-card); }
.ref-faq-item summary {
  padding: 1rem 1.25rem;
  font-weight: 600;
  font-size: .95rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ref-faq-item summary::-webkit-details-marker { display: none; }
.ref-faq-item summary::after {
  content: '+';
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--bl-text-muted);
  transition: transform .2s;
}
.ref-faq-item[open] summary::after { content: '−'; }
.ref-faq-item p {
  padding: 0 1.25rem 1.25rem;
  font-size: .9rem;
  color: var(--bl-text-muted);
  line-height: 1.7;
}

/* ── Terms strip ─────────────────────────────────────────── */
.ref-terms {
  background: #FFFBEB;
  border: 1px solid #FDE68A;
  border-radius: var(--bl-radius);
  padding: 1.75rem 2rem;
}
.ref-terms h3 {
  font-size: .95rem;
  font-weight: 700;
  color: #92400E;
  margin-bottom: .5rem;
}
.ref-terms p {
  font-size: .82rem;
  color: #92400E;
  line-height: 1.7;
}

/* ── Homepage referral section ───────────────────────────── */
.ref-home-section {
  background: linear-gradient(135deg, #F0FDFA 0%, #E6EEF0 100%);
  padding: 5rem 0;
}
.ref-home-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}
.ref-home-badge {
  display: inline-block;
  background: rgba(47,93,98,.1);
  color: var(--bl-primary);
  font-weight: 700;
  font-size: .75rem;
  padding: .35rem .9rem;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 1rem;
}
.ref-home-text h2 {
  font-size: 2.25rem;
  font-weight: 800;
  margin-bottom: 1rem;
}
.ref-home-text > p {
  font-size: 1.05rem;
  color: var(--bl-text-muted);
  line-height: 1.7;
  margin-bottom: 1.75rem;
}
.ref-home-text > p strong { color: var(--bl-text); }
.ref-home-perks {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}
.ref-home-perk {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.ref-home-perk-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--bl-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: var(--bl-shadow-card);
}
.ref-home-perk strong {
  display: block;
  font-size: .92rem;
  margin-bottom: .1rem;
}
.ref-home-perk span {
  font-size: .82rem;
  color: var(--bl-text-muted);
}
.ref-home-img img {
  width: 100%;
  border-radius: var(--bl-radius);
  box-shadow: var(--bl-shadow-elevated);
}

@media (max-width: 768px) {
  .ref-home-section { padding: 3rem 0; }
  .ref-home-layout { grid-template-columns: 1fr; gap: 2rem; }
  .ref-home-text h2 { font-size: 1.65rem; }
  .ref-home-img { order: -1; }
}

/* ── Referral popup ──────────────────────────────────────── */
.ref-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.ref-popup-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
.ref-popup {
  background: var(--bl-surface);
  border-radius: var(--bl-radius);
  overflow: hidden;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  transform: translateY(20px);
  transition: transform .3s;
  position: relative;
}
.ref-popup-overlay.active .ref-popup { transform: translateY(0); }
.ref-popup-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  background: rgba(0,0,0,.4);
  color: #fff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  transition: background .2s;
}
.ref-popup-close:hover { background: rgba(0,0,0,.6); }
.ref-popup-img img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
.ref-popup-body {
  padding: 1.5rem;
  text-align: center;
}
.ref-popup-badge {
  display: inline-block;
  background: rgba(47,93,98,.08);
  color: var(--bl-primary);
  font-weight: 700;
  font-size: .7rem;
  padding: .3rem .75rem;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: .75rem;
}
.ref-popup-body h3 {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: .5rem;
}
.ref-popup-body p {
  font-size: .92rem;
  color: var(--bl-text-muted);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}
.ref-popup-body p strong { color: var(--bl-text); }
.ref-popup-dismiss {
  display: block;
  margin: .75rem auto 0;
  background: none;
  border: none;
  color: var(--bl-text-muted);
  font-size: .82rem;
  cursor: pointer;
  padding: .25rem;
  transition: color .2s;
}
.ref-popup-dismiss:hover { color: var(--bl-text); }

/* ── Referral Pricing Banner ─────────────────────────────── */
.referral-pricing-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  background: linear-gradient(135deg, #E6EEF0 0%, #F0FDFA 100%);
  border: 1px solid #CCFBF1;
  border-radius: var(--bl-radius);
  padding: 1.5rem 2rem;
  margin-top: 2rem;
}
.rpb-content {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.rpb-icon { font-size: 2rem; flex-shrink: 0; }
.rpb-content h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--bl-primary);
  margin-bottom: .25rem;
}
.rpb-content p {
  font-size: .9rem;
  color: var(--bl-text-muted);
  line-height: 1.5;
}
.rpb-content p strong { color: var(--bl-text); }

@media (max-width: 768px) {
  .referral-pricing-banner {
    flex-direction: column;
    text-align: center;
  }
  .rpb-content {
    flex-direction: column;
    align-items: center;
  }
}
/* ── 404 ─────────────────────────────────────────────────── */
.error-404 {
  text-align: center;
  padding: 6rem 0;
}
.error-404 h1 { font-size: 5rem; font-weight: 800; color: var(--bl-primary); }
.error-404 p { font-size: 1.1rem; color: var(--bl-text-muted); margin: 1rem 0 2rem; }

/* ── Pagination ──────────────────────────────────────────── */
.pagination {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 3rem;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--bl-radius-sm);
  border: 1px solid var(--bl-border);
  font-size: .9rem;
  font-weight: 500;
  transition: all .2s;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
  background: var(--bl-primary);
  color: #fff;
  border-color: var(--bl-primary);
}

/* ── Utilities ───────────────────────────────────────────── */
.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.mb-2 { margin-bottom: 1rem; }

/* ── BETA badge (next to site-logo) ────────────────────────── */
.beta-badge {
    display: inline-block;
    margin-left: .4rem;
    padding: 2px 6px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    background: #F59E0B;
    color: #2F5D62;
    border-radius: 3px;
    vertical-align: top;
    line-height: 1;
}

/* ── Early Adopters pricing (beta) ─────────────────────────── */
.ea-pricing-wrap { max-width: 720px; margin: 0 auto; }
.ea-card {
    background: linear-gradient(135deg, #FFF7ED 0%, #FFFBEB 100%);
    border: 2px solid #F59E0B;
    border-radius: 1.25rem;
    padding: 2.5rem 2rem;
    position: relative;
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.15);
    text-align: center;
}
.ea-card-ribbon {
    display: inline-block;
    background: #2F5D62;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .35rem .85rem;
    border-radius: 999px;
    margin-bottom: 1rem;
}
.ea-card h2 { font-size: 2rem; margin: .25rem 0 .5rem; }
.ea-card .ea-price {
    font-size: 2.75rem;
    font-weight: 800;
    color: #2F5D62;
    margin: 1rem 0 .5rem;
}
.ea-card .ea-price-post {
    font-size: .95rem;
    color: #6B7280;
    margin-bottom: 1.5rem;
}
.ea-card .ea-price-post strong { color: #111827; }
.ea-features {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    text-align: left;
    display: inline-block;
}
.ea-features li {
    padding: .5rem 0;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .95rem;
    color: #1F2937;
}
.ea-features .tick { color: #10B981; font-weight: 700; flex-shrink: 0; }
.ea-lock-box {
    background: #FEF3C7;
    border-left: 3px solid #F59E0B;
    padding: 1rem 1.25rem;
    border-radius: .5rem;
    text-align: left;
    font-size: .85rem;
    color: #92400E;
    margin: 1.5rem 0;
}
.ea-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 2rem 0;
    text-align: left;
}
.ea-comparison-col {
    padding: 1rem;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: .5rem;
}
.ea-comparison-col h4 {
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6B7280;
    margin-bottom: .5rem;
}
.ea-comparison-col strong { font-size: 1.15rem; color: #111827; display: block; margin-bottom: .25rem; }
.ea-comparison-col.today { border-color: #F59E0B; background: #FFFBEB; }
.ea-comparison-col.later { border-color: #2F5D62; background: #F0FDFA; }
.ea-note-small { font-size: .8rem; color: #6B7280; margin-top: 1rem; }

/* Beta: single-path centered grid */
.ref-paths-grid-single {
    grid-template-columns: 1fr !important;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Early Adopter pricing — beta hero & marketing ─────────── */

/* Hero ------------------------------------------------------ */
.ea-hero {
    background:
        radial-gradient(1200px 600px at 90% 10%, rgba(245,158,11,.18), transparent 60%),
        radial-gradient(800px 500px at 0% 80%, rgba(47,93,98,.12), transparent 60%),
        linear-gradient(180deg, #FFFBF2 0%, #FFFFFF 100%);
    padding: 4.5rem 0 3.5rem;
    position: relative;
    overflow: hidden;
}
.ea-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 3.5rem;
    align-items: center;
}
.ea-hero-copy h1 {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    margin: .75rem 0 1.25rem;
    color: var(--bl-text);
}
.ea-hero-accent {
    color: var(--bl-accent);
    background: linear-gradient(180deg, transparent 60%, rgba(245,158,11,.18) 60%);
    padding: 0 .15em;
}
.ea-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #FEF3C7;
    color: #92400E;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .35rem .85rem;
    border-radius: 999px;
    border: 1px solid #FBBF24;
}
.ea-hero-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #F59E0B;
    box-shadow: 0 0 0 4px rgba(245,158,11,.25);
    animation: ea-pulse 1.8s ease-in-out infinite;
}
@keyframes ea-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.45); }
    50%      { box-shadow: 0 0 0 6px rgba(245,158,11,0); }
}
.ea-hero-sub {
    font-size: 1.1rem;
    color: var(--bl-text-muted);
    line-height: 1.65;
    max-width: 520px;
}
.ea-hero-cta {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-wrap: wrap;
    margin: 2rem 0 2rem;
}
.ea-hero-fine { font-size: .85rem; color: var(--bl-text-muted); }
.ea-hero-perks {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1.25rem;
}
.ea-hero-perks li {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .9rem;
    color: #1F2937;
    background: #fff;
    border: 1px solid #E5E7EB;
    padding: .5rem .85rem;
    border-radius: 999px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.ea-hero-perk-icon { font-size: 1rem; }

/* Hero image ------------------------------------------------- */
.ea-hero-img {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    aspect-ratio: 4/5;
    box-shadow: 0 30px 60px -20px rgba(47,93,98,.35);
}
.ea-hero-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.ea-hero-img-badge {
    position: absolute;
    bottom: 1.25rem;
    left: 1.25rem;
    right: 1.25rem;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(6px);
    border-radius: .85rem;
    padding: .85rem 1.1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    display: flex;
    flex-direction: column;
}
.ea-hero-img-badge strong {
    color: var(--bl-primary);
    font-size: 1rem;
    line-height: 1;
}
.ea-hero-img-badge span {
    color: var(--bl-text-muted);
    font-size: .8rem;
    margin-top: .2rem;
}

/* Founder Lock timeline ------------------------------------- */
.ea-timeline {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 1.25rem;
    align-items: stretch;
    margin-top: 2rem;
}
.ea-timeline-step { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }
.ea-timeline-marker {
    align-self: flex-start;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: #E5E7EB; color: #374151;
}
.ea-timeline-marker.today    { background: #FEF3C7; color: #92400E; }
.ea-timeline-marker.locked   { background: #FED7AA; color: #9A3412; }
.ea-timeline-marker.optional { background: #DBEAFE; color: #1E40AF; }

.ea-timeline-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: var(--bl-radius);
    padding: 1.4rem 1.25rem;
    box-shadow: var(--bl-shadow-card);
    flex: 1;
}
.ea-timeline-card.highlight {
    border: 2px solid var(--bl-accent);
    background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 70%);
    box-shadow: 0 12px 28px -10px rgba(245,158,11,.35);
    transform: translateY(-4px);
}
.ea-timeline-card h4 {
    font-size: 1.05rem;
    margin: 0 0 .35rem;
    color: var(--bl-text);
}
.ea-tag {
    font-size: .7rem;
    background: #E5E7EB; color: #374151;
    padding: .12rem .5rem; border-radius: 999px;
    font-weight: 600; letter-spacing: .04em;
    margin-left: .35rem;
    vertical-align: middle;
}
.ea-timeline-price {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--bl-primary);
    margin: .35rem 0 .85rem;
    line-height: 1;
}
.ea-timeline-price span {
    font-size: .85rem;
    font-weight: 500;
    color: var(--bl-text-muted);
    margin-left: .15rem;
}
.ea-timeline-card ul { padding: 0; }
.ea-timeline-card li {
    font-size: .88rem;
    color: #374151;
    padding: .25rem 0;
    line-height: 1.5;
}
.ea-timeline-arrow {
    display: flex; align-items: center;
    color: var(--bl-accent);
    font-size: 1.5rem; font-weight: 700;
    padding: 0 .25rem;
}
.ea-timeline-foot {
    margin-top: 2rem;
    background: #F4F6F8;
    border-left: 4px solid var(--bl-primary);
    padding: 1rem 1.25rem;
    border-radius: .5rem;
    display: flex;
    gap: 1rem;
    align-items: center;
}
.ea-timeline-foot p { margin: 0; color: #374151; font-size: .95rem; }
.ea-timeline-foot-pill {
    flex-shrink: 0;
    background: var(--bl-primary);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .3rem .7rem;
    border-radius: 999px;
}

/* Refresh existing EA card hero treatment ------------------- */
.ea-card-tagline { color: #6B7280; margin: 0 0 .25rem; }
.ea-price-suffix { font-size: 1rem; color: #6B7280; font-weight: 400; }

/* Founder benefits row -------------------------------------- */
.ea-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
    margin-top: 2rem;
}
.ea-benefit {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: var(--bl-radius);
    overflow: hidden;
    box-shadow: var(--bl-shadow-card);
    transition: transform .25s ease, box-shadow .25s ease;
    display: flex; flex-direction: column;
}
.ea-benefit:hover {
    transform: translateY(-4px);
    box-shadow: var(--bl-shadow-elevated);
}
.ea-benefit-img {
    aspect-ratio: 16/10;
    overflow: hidden;
    background: #F4F6F8;
}
.ea-benefit-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.ea-benefit:hover .ea-benefit-img img { transform: scale(1.04); }
.ea-benefit-body { padding: 1.25rem 1.4rem 1.5rem; }
.ea-benefit-tag {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .25rem .65rem;
    border-radius: 999px;
    margin-bottom: .65rem;
}
.ea-benefit-body h3 {
    font-size: 1.15rem;
    margin: 0 0 .5rem;
    color: var(--bl-text);
}
.ea-benefit-body p {
    color: var(--bl-text-muted);
    font-size: .94rem;
    line-height: 1.6;
    margin: 0;
}

/* Side-by-side comparison ----------------------------------- */
.ea-vs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}
.ea-vs-col {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: var(--bl-radius);
    padding: 1.75rem 1.6rem;
    box-shadow: var(--bl-shadow-card);
    position: relative;
}
.ea-vs-col.winner {
    border: 2px solid var(--bl-accent);
    background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 60%);
    box-shadow: 0 16px 36px -16px rgba(245,158,11,.4);
}
.ea-vs-flag {
    display: inline-block;
    background: var(--bl-accent);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .3rem .75rem;
    border-radius: 999px;
    margin-bottom: .85rem;
}
.ea-vs-flag.muted { background: #E5E7EB; color: #4B5563; }
.ea-vs-col h3 { font-size: 1.25rem; margin: 0 0 1rem; }
.ea-vs-col ul { padding: 0; }
.ea-vs-col li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .65rem 0;
    border-bottom: 1px dashed #E5E7EB;
    font-size: .94rem;
}
.ea-vs-col li:last-child { border-bottom: none; }
.ea-vs-col li span { color: var(--bl-text-muted); }
.ea-vs-col li strong { color: var(--bl-text); text-align: right; }
.ea-vs-col.winner li strong { color: var(--bl-primary); }

/* Final CTA tweak ------------------------------------------- */
.ea-cta { background: linear-gradient(135deg, var(--bl-primary) 0%, #1f4145 100%); }

/* Responsive ------------------------------------------------- */
@media (max-width: 960px) {
    .ea-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
    .ea-hero-img { aspect-ratio: 16/11; max-width: 560px; margin: 0 auto; }
    .ea-timeline {
        grid-template-columns: 1fr;
        gap: .85rem;
    }
    .ea-timeline-arrow { transform: rotate(90deg); justify-content: center; }
    .ea-timeline-card.highlight { transform: none; }
    .ea-benefits { grid-template-columns: 1fr; }
    .ea-vs { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .ea-hero { padding: 3rem 0 2.5rem; }
    .ea-hero-perks { gap: .5rem; }
    .ea-hero-perks li { font-size: .82rem; padding: .4rem .7rem; }
}

/* Strike-through helper inside the Founder-Lock timeline */
.ea-timeline-price-strike {
    margin: -.4rem 0 .85rem;
    font-size: .8rem;
    color: var(--bl-text-muted);
}
.ea-timeline-price-strike .ea-strike {
    text-decoration: line-through;
    color: #9CA3AF;
    margin-right: .35rem;
}

/* Post-beta two-option choice inside Founder Lock middle card */
.ea-timeline-sub {
    font-size: .82rem;
    color: var(--bl-text-muted);
    margin: .25rem 0 .9rem;
    line-height: 1.5;
}
.ea-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .65rem;
    margin-top: .5rem;
}
.ea-choice-option {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: .65rem;
    padding: .75rem .85rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    text-align: left;
    position: relative;
}
.ea-choice-option.recommended {
    border: 2px solid var(--bl-accent);
    background: #FFFBEB;
    box-shadow: 0 6px 14px -8px rgba(245,158,11,.55);
}
.ea-choice-option strong {
    font-size: .92rem;
    color: var(--bl-text);
}
.ea-choice-option .ea-choice-tag {
    align-self: flex-start;
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: var(--bl-accent);
    color: #fff;
    padding: .15rem .5rem;
    border-radius: 999px;
    margin-bottom: .25rem;
}
.ea-choice-option .ea-choice-tag.muted {
    background: #E5E7EB;
    color: #4B5563;
}
.ea-choice-price {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--bl-primary);
    line-height: 1;
    margin: .15rem 0;
}
.ea-choice-option small {
    font-size: .72rem;
    color: var(--bl-text-muted);
    line-height: 1.45;
}
@media (max-width: 480px) {
    .ea-choice { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────── */
/* ── Pricing v2 — refreshed cards, packs, refund, FAQ ─────── */
/* ─────────────────────────────────────────────────────────── */

/* Generic pricing helpers */
.section-fine {
    text-align: center;
    color: var(--bl-text-muted);
    font-size: .9rem;
    margin-top: 1.5rem;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.btn-block { width: 100%; justify-content: center; }
.btn-secondary {
    background: #fff;
    color: var(--bl-primary);
    border-color: var(--bl-primary);
}
.btn-secondary:hover {
    background: var(--bl-primary);
    color: #fff;
}

/* Hero trust avatars (tiny strip under CTAs) */
.pricing-hero-trust {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-top: 1.5rem;
    color: var(--bl-text-muted);
    font-size: .9rem;
}
.pricing-hero-trust-avatars {
    display: inline-flex;
}
.pricing-hero-trust-avatars img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid #fff;
    object-fit: cover;
    margin-left: -10px;
    box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.pricing-hero-trust-avatars img:first-child { margin-left: 0; }
.pricing-hero-trust strong { color: var(--bl-text); }

/* ── How it works (split layout) ───────────────────────────── */
.how-split {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 3rem;
    align-items: center;
    margin-top: 2rem;
}
.how-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}
.how-step {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: var(--bl-radius);
    padding: 1.4rem 1.25rem;
    box-shadow: var(--bl-shadow-card);
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
}
.how-step:hover {
    transform: translateY(-3px);
    box-shadow: var(--bl-shadow-elevated);
}
.how-step-num {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--bl-accent) 0%, #D97706 100%);
    color: #fff;
    font-weight: 800;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .75rem;
    box-shadow: 0 4px 12px -2px rgba(245,158,11,.5);
}
.how-step h4 {
    font-size: 1.05rem;
    margin: 0 0 .4rem;
    color: var(--bl-text);
}
.how-step p {
    color: var(--bl-text-muted);
    font-size: .92rem;
    line-height: 1.6;
    margin: 0;
}
.how-image {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    aspect-ratio: 4/5;
    box-shadow: 0 24px 50px -18px rgba(47,93,98,.35);
}
.how-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.how-image-tag {
    position: absolute;
    top: 1rem; left: 1rem;
    background: rgba(255,255,255,.95);
    backdrop-filter: blur(6px);
    color: var(--bl-primary);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .35rem .7rem;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}

/* ── Plans grid ─────────────────────────────────────────── */
.plans-grid {
    display: grid;
    gap: 1.5rem;
    margin-top: 2rem;
}
.plans-grid-3 { grid-template-columns: repeat(3, 1fr); }
.plans-grid-beta {
    grid-template-columns: minmax(0, 480px);
    justify-content: center;
}
.plan-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: var(--bl-radius);
    padding: 2rem 1.75rem 1.75rem;
    box-shadow: var(--bl-shadow-card);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
}
.plan-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bl-shadow-elevated);
}
.plan-card-feature {
    border: 2px solid var(--bl-accent);
    background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 60%);
    box-shadow: 0 18px 38px -16px rgba(245,158,11,.4);
}
.plan-card-eyebrow {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bl-accent);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .35rem .85rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px -2px rgba(245,158,11,.55);
    white-space: nowrap;
}
.plan-card h3 {
    font-size: 1.4rem;
    margin: 0 0 .4rem;
    color: var(--bl-text);
}
.plan-price {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--bl-primary);
    line-height: 1;
    margin: .25rem 0 .25rem;
    letter-spacing: -.02em;
}
.plan-price span {
    font-size: .9rem;
    font-weight: 500;
    color: var(--bl-text-muted);
    margin-left: .15rem;
    letter-spacing: 0;
}
.plan-credits {
    font-size: .95rem;
    color: var(--bl-text);
    background: var(--bl-primary-soft);
    border-radius: .5rem;
    padding: .55rem .8rem;
    margin: .85rem 0 1.25rem;
    display: inline-block;
    align-self: flex-start;
}
.plan-credits strong {
    color: var(--bl-primary);
    font-weight: 800;
}
.plan-features {
    padding: 0;
    margin: 0 0 1.5rem;
    flex: 1;
}
.plan-features li {
    font-size: .92rem;
    color: #374151;
    padding: .35rem 0;
    line-height: 1.5;
}
.plan-card .btn { margin-top: auto; }

/* ── Top-up packs ───────────────────────────────────────── */
.packs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}
.pack-card {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: var(--bl-radius);
    padding: 1.75rem 1.5rem 1.5rem;
    box-shadow: var(--bl-shadow-card);
    text-align: center;
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
}
.pack-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--bl-shadow-elevated);
}
.pack-card-featured {
    border: 2px solid var(--bl-primary);
    background: linear-gradient(180deg, var(--bl-primary-soft) 0%, #FFFFFF 70%);
}
.pack-ribbon {
    position: absolute;
    top: -12px;
    right: 1rem;
    background: var(--bl-primary);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .3rem .7rem;
    border-radius: 999px;
    box-shadow: 0 4px 10px -2px rgba(47,93,98,.45);
}
.pack-card h4 {
    font-size: 1rem;
    color: var(--bl-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    margin: 0 0 .5rem;
}
.pack-price {
    font-size: 2.1rem;
    font-weight: 800;
    color: var(--bl-primary);
    line-height: 1;
    margin: 0 0 .35rem;
    letter-spacing: -.02em;
}
.pack-price span {
    font-size: .82rem;
    font-weight: 500;
    color: var(--bl-text-muted);
    margin-left: .1rem;
}
.pack-per {
    font-size: .85rem;
    color: var(--bl-accent);
    font-weight: 700;
    margin: .25rem 0 .5rem;
}
.pack-fine {
    font-size: .78rem;
    color: var(--bl-text-muted);
    margin: .35rem 0 0;
}

/* ── Refund grid (traffic light rows) ───────────────────── */
.refund-grid {
    margin-top: 2rem;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: var(--bl-radius);
    overflow: hidden;
    box-shadow: var(--bl-shadow-card);
}
.refund-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1.5rem;
    padding: 1.1rem 1.5rem;
    align-items: center;
    border-bottom: 1px solid #F3F4F6;
}
.refund-row:last-child { border-bottom: none; }
.refund-row:nth-child(odd) { background: #FAFBFC; }
.refund-scenario {
    font-size: .95rem;
    color: var(--bl-text);
    line-height: 1.5;
}
.refund-result {
    font-size: .9rem;
    font-weight: 600;
    padding: .5rem .85rem;
    border-radius: .5rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    justify-self: end;
}
.refund-yes {
    background: #DCFCE7;
    color: #166534;
}
.refund-review {
    background: #FEF3C7;
    color: #92400E;
}

/* ── "Built for Kiwi tradies" trust strip ─────────────── */
.pricing-trust {
    text-align: center;
}
.pricing-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin: 2rem auto 0;
    max-width: 760px;
}
.pricing-trust-card {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 1/1;
    box-shadow: 0 8px 22px -10px rgba(47,93,98,.35);
    transition: transform .25s ease;
}
.pricing-trust-card:hover { transform: translateY(-3px); }
.pricing-trust-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.pricing-trust-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.45) 100%);
}
.pricing-trust-card-trade {
    position: absolute;
    bottom: .65rem; left: .65rem;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-shadow: 0 1px 4px rgba(0,0,0,.4);
    z-index: 1;
}
.pricing-trust-line {
    margin-top: 1.5rem;
    color: var(--bl-text-muted);
    font-size: .92rem;
}
.pricing-trust-line strong { color: var(--bl-text); }

/* ── FAQ accordion ──────────────────────────────────────── */
.pricing-faq {
    max-width: 820px;
    margin: 2rem auto 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.pricing-faq-item {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: var(--bl-radius);
    box-shadow: var(--bl-shadow-card);
    overflow: hidden;
}
.pricing-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 1.1rem 1.4rem;
    font-weight: 600;
    color: var(--bl-text);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: 1rem;
}
.pricing-faq-item summary::-webkit-details-marker { display: none; }
.pricing-faq-item summary::after {
    content: '+';
    font-size: 1.4rem;
    color: var(--bl-accent);
    font-weight: 700;
    transition: transform .2s ease;
    line-height: 1;
}
.pricing-faq-item[open] summary::after {
    content: '−';
}
.pricing-faq-item[open] summary {
    border-bottom: 1px solid #F3F4F6;
}
.pricing-faq-body {
    padding: 1rem 1.4rem 1.25rem;
    color: var(--bl-text-muted);
    font-size: .94rem;
    line-height: 1.65;
}
.pricing-faq-body p { margin: 0 0 .65rem; }
.pricing-faq-body p:last-child { margin: 0; }

/* ── CTA banner (gradient) ─────────────────────────────── */
.cta-banner {
    background: linear-gradient(135deg, var(--bl-primary) 0%, #1f4145 100%);
    color: #fff;
    border-radius: 1.25rem;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 24px 50px -20px rgba(47,93,98,.45);
    position: relative;
    overflow: hidden;
}
.cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(600px 300px at 90% 0%, rgba(245,158,11,.18), transparent 60%),
      radial-gradient(500px 250px at 0% 100%, rgba(255,255,255,.08), transparent 60%);
    pointer-events: none;
}
.cta-banner > * { position: relative; }
.cta-banner h2 {
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    font-weight: 800;
    margin: 0 0 .65rem;
    letter-spacing: -.01em;
}
.cta-banner p {
    color: rgba(255,255,255,.85);
    font-size: 1.05rem;
    margin: 0 0 1.75rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
}

/* ── Pricing v2 responsive ─────────────────────────────── */
@media (max-width: 1024px) {
    .how-split { grid-template-columns: 1fr; gap: 2rem; }
    .how-image { aspect-ratio: 16/10; max-width: 620px; margin: 0 auto; }
    .plans-grid-3 { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
    .plan-card-feature { transform: none; }
}
@media (max-width: 720px) {
    .how-grid { grid-template-columns: 1fr; }
    .packs-grid { grid-template-columns: 1fr; max-width: 380px; margin-left: auto; margin-right: auto; }
    .pricing-trust-strip { grid-template-columns: repeat(2, 1fr); max-width: 420px; }
    .refund-row {
        grid-template-columns: 1fr;
        gap: .5rem;
        padding: 1rem 1.1rem;
    }
    .refund-result { justify-self: start; }
    .cta-banner { padding: 2.25rem 1.25rem; }
    .pricing-hero-trust { flex-wrap: wrap; gap: .5rem; }
}
@media (max-width: 480px) {
    .plan-card { padding: 1.75rem 1.25rem 1.5rem; }
    .plan-price { font-size: 2rem; }
    .pack-card { padding: 1.5rem 1.1rem; }
    .pack-price { font-size: 1.85rem; }
    .pricing-faq-item summary { font-size: .94rem; padding: .95rem 1.1rem; }
    .pricing-faq-body { padding: .85rem 1.1rem 1.1rem; font-size: .9rem; }
}