/* ============================================================
   RR WEB SERVICES — rr-pages.css
   Shared styles for all inner pages (non-homepage)
   Loaded on: SEO Clarity, Let's Talk, Services, About,
              all service landing pages, Results, Blog, etc.
   ============================================================ */

/* ── REVEAL (same as rr-main.css, available on inner pages) ── */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
.d4{transition-delay:.32s}.d5{transition-delay:.40s}

/* ── PAGE HERO — inner pages ── */
.page-hero{
  background:linear-gradient(155deg,#0C1B36 0%,#0A1628 50%,#071020 100%);
  padding:0 60px;
  position:relative;overflow:hidden;min-height:520px;
  display:grid;grid-template-columns:1fr 500px;gap:64px;align-items:center;
  box-sizing:border-box;
}

.page-hero-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.page-hero-bg::before{
  content:'';position:absolute;width:700px;height:700px;
  top:-150px;right:-150px;border-radius:50%;
  background:radial-gradient(circle,rgba(212,130,10,0.10) 0%,transparent 65%);
  filter:blur(80px);
}
.page-hero-bg::after{
  content:'';position:absolute;width:500px;height:500px;
  bottom:-100px;left:5%;border-radius:50%;
  background:radial-gradient(circle,rgba(26,58,107,0.40) 0%,transparent 65%);
  filter:blur(70px);
}
.hero-accent-top{position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(212,130,10,0.30),transparent);pointer-events:none}
.hero-accent-right{position:absolute;top:0;right:0;width:45%;height:3px;background:linear-gradient(90deg,transparent,rgba(212,130,10,0.35));pointer-events:none}
.hero-grain{position:absolute;inset:0;pointer-events:none;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:160px}
.hero-l{position:relative;z-index:1;padding:calc(var(--nav-h) + 60px) 0 80px 0}
.hero-r{position:relative;z-index:1;padding:calc(var(--nav-h) + 40px) 0 60px 0;align-self:stretch;display:flex;align-items:center}
.page-hero-inner{max-width:var(--max-w);margin:0 auto;position:relative;z-index:1}
.page-hero-inner.centered{text-align:center;display:flex;flex-direction:column;align-items:center}
.page-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--gold) !important;margin-bottom:18px;
}
.page-eyebrow::before,.page-eyebrow::after{content:'';display:block;width:28px;height:1px;background:var(--gold);opacity:.6}
.page-eyebrow::before,.page-eyebrow::after{
  content:'';display:block;width:28px;height:1px;background:var(--gold);opacity:.6;
}
.page-hero-inner.centered .page-eyebrow::before,
.page-hero-inner.centered .page-eyebrow::after{display:block}
.page-h1{
  font-family:var(--font-display);
  font-size:clamp(42px,5vw,72px);
  font-weight:900;line-height:1.0;
  letter-spacing:-.04em;
  color:#FFFFFF !important;
  margin-bottom:24px;
}
.page-h1 em{font-style:italic;font-weight:300;color:var(--accent)}
.page-hero-sub{
  font-size:16px;line-height:1.80;
  color:rgba(240,244,250,0.65) !important;
  max-width:520px;margin-bottom:36px;
  font-weight:400;
}
.page-hero-acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.page-hero-inner.centered .page-hero-acts{justify-content:center}

/* ── PAGE SECTIONS ── */
.pg-section{padding:80px var(--gutter)}
.pg-section.alt{background:var(--surface)}
/* Collapse double-padding when same-bg sections are adjacent */
.pg-section + .pg-section:not(.alt):not(.dark) { padding-top: 0 }
.pg-section.alt + .pg-section.alt { padding-top: 0 }
.pg-section.dark{
  background:linear-gradient(160deg,#0C1B36 0%,#0E2248 55%,#071228 100%);
  color:#F0F4FA;
}
.pg-section.dark .section-title{color:#F0F4FA}
.pg-section.dark .section-title em{color:var(--gold)}
.pg-section.dark .eyebrow-text{color:var(--gold)}
.pg-section.dark .eyebrow-line{background:var(--gold)}
.pg-section.dark p{color:rgba(240,244,250,0.70)}
.pg-inner{max-width:var(--max-w);margin:0 auto}
.pg-inner.narrow{max-width:800px}
.pg-inner.mid{max-width:1060px}

/* ── TWO-COL SPLIT ── */
.pg-split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.pg-split.flip .pg-split-visual{order:-1}
.pg-split-visual{border-radius:var(--r-lg);overflow:hidden;position:relative}

/* ── CARD GRID ── */
.pg-cards{display:grid;gap:24px}
.pg-cards.cols-3{grid-template-columns:repeat(3,1fr)}
.pg-cards.cols-2{grid-template-columns:repeat(2,1fr)}
.pg-card{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-lg);
  padding:32px 28px;
  transition:border-color .25s,box-shadow .25s,transform .25s;
}
.pg-card:hover{
  border-color:rgba(26,58,107,0.30);
  box-shadow:var(--shadow-md);
  transform:translateY(-3px);
}
.pg-card-ico{
  width:48px;height:48px;border-radius:var(--r-md);
  background:var(--accent-dim);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;margin-bottom:18px;
  flex-shrink:0;
}
.pg-card-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:8px}
.pg-card-title{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.025em;color:var(--text-primary);margin-bottom:10px;line-height:1.2}
.pg-card-body{font-size:14px;color:var(--text-body);line-height:1.75;font-weight:400}

/* Dark card variant */
.pg-section.dark .pg-card{
  background:rgba(255,255,255,0.04);
  border-color:rgba(255,255,255,0.10);
}
.pg-section.dark .pg-card:hover{
  border-color:rgba(196,127,10,0.35);
  background:rgba(255,255,255,0.06);
  box-shadow:0 8px 40px rgba(0,0,0,0.30);
}
.pg-section.dark .pg-card-title{color:#F0F4FA}
.pg-section.dark .pg-card-body{color:rgba(240,244,250,0.65)}
.pg-section.dark .pg-card-ico{background:rgba(196,127,10,0.15)}

/* ── STAT ROW ── */
.pg-stats{display:flex;gap:0;border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.pg-stat{flex:1;padding:28px 24px;text-align:center;border-right:1px solid var(--border)}
.pg-stat:last-child{border-right:none}
.pg-stat-n{font-family:var(--font-display);font-size:clamp(32px,3.5vw,52px);font-weight:900;letter-spacing:-.04em;color:var(--accent);line-height:1;display:block}
.pg-stat-l{font-size:13px;color:var(--text-muted);margin-top:6px;font-weight:400;line-height:1.4;display:block}

/* ── PROCESS STEPS ── */
.pg-steps{display:flex;flex-direction:column;gap:0}
.pg-step{
  display:grid;grid-template-columns:64px 1fr;gap:0 28px;
  padding:32px 0;border-bottom:1px solid var(--border);
  position:relative;
}
.pg-step:last-child{border-bottom:none}
.pg-step-num{
  font-family:var(--font-display);font-size:48px;font-weight:900;
  letter-spacing:-.05em;color:var(--accent);opacity:.15;
  line-height:1;padding-top:4px;
}
.pg-step-content{padding-top:4px}
.pg-step-title{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--text-primary);margin-bottom:8px}
.pg-step-body{font-size:14.5px;color:var(--text-body);line-height:1.75;font-weight:400}

/* ── Steps on dark sections ── */
.pg-section.dark .pg-step{border-bottom-color:rgba(255,255,255,0.08)}
.pg-section.dark .pg-step:last-child{border-bottom:none}
.pg-section.dark .pg-step-num{color:#FFFFFF;opacity:.12}
.pg-section.dark .pg-step-title{color:#FFFFFF}
.pg-section.dark .pg-step-body{color:rgba(240,244,250,0.65)}

/* ── INLINE CTA BAND ── */
.pg-cta-band{
  background:linear-gradient(135deg,var(--accent) 0%,#0E2248 100%);
  border-radius:var(--r-lg);
  padding:56px 56px;
  display:flex;align-items:center;justify-content:space-between;
  gap:32px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.pg-cta-band::before{
  content:'';position:absolute;
  top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,rgba(196,127,10,0.6),transparent);
}
.pg-cta-title{font-family:var(--font-display);font-size:clamp(22px,2.5vw,32px);font-weight:700;letter-spacing:-.03em;color:#fff;max-width:480px;line-height:1.15}
.pg-cta-title em{font-style:italic;font-weight:300;color:var(--gold)}
.pg-cta-acts{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0}

/* ── FAQ (inner pages) ── */
.pg-faq{display:flex;flex-direction:column;gap:0;border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.pg-faq-item{border-bottom:1px solid var(--border)}
.pg-faq-item:last-child{border-bottom:none}
.pg-faq-q{
  width:100%;background:none;border:none;
  display:flex;align-items:center;justify-content:space-between;
  padding:22px 28px;gap:16px;
  font-family:var(--font-body);font-size:15px;font-weight:600;
  color:var(--text-primary);text-align:left;cursor:pointer;
  transition:background .2s;
}
.pg-faq-q:hover{background:var(--canvas)}
.pg-faq-q[aria-expanded="true"]{background:var(--accent-dim)}
.pg-faq-icon{
  width:28px;height:28px;border-radius:50%;
  border:1.5px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;font-weight:300;color:var(--text-muted);
  flex-shrink:0;transition:transform .3s,background .2s,border-color .2s;
}
.pg-faq-q[aria-expanded="true"] .pg-faq-icon{
  transform:rotate(45deg);
  background:var(--accent-dim);border-color:rgba(26,58,107,0.30);color:var(--accent);
}
.pg-faq-body{
  max-height:0;overflow:hidden;
  transition:max-height .38s var(--ease);
}
.pg-faq-body.open{max-height:600px}
.pg-faq-a{padding:0 28px 22px;font-size:14.5px;color:var(--text-body);line-height:1.78;font-weight:400}
.pg-faq-a a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* ── TESTIMONIAL STRIP ── */
.pg-testi{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--r-lg);padding:36px 32px;
  position:relative;
}
.pg-testi::before{
  content:'\201C';
  font-family:var(--font-display);font-size:80px;line-height:.8;
  color:var(--gold);opacity:.25;
  position:absolute;top:20px;left:24px;
}
.pg-testi-text{font-size:16px;color:var(--text-body);line-height:1.78;font-weight:400;font-style:italic;padding-top:28px;margin-bottom:20px}
.pg-testi-auth{display:flex;align-items:center;gap:12px}
.pg-testi-avatar{width:40px;height:40px;border-radius:50%;background:var(--accent-dim);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--accent);flex-shrink:0}
.pg-testi-name{font-size:13.5px;font-weight:700;color:var(--text-primary)}
.pg-testi-role{font-size:12px;color:var(--text-muted);font-weight:400}

/* ── PAGE BREADCRUMB ── */
.pg-breadcrumb{
  display:flex;align-items:center;gap:8px;
  font-size:12px;color:var(--text-muted);
  margin-bottom:24px;flex-wrap:wrap;
}
.pg-breadcrumb a{color:rgba(255,255,255,0.40);transition:color .15s}
.pg-breadcrumb a:hover{color:rgba(255,255,255,0.80)}
.pg-breadcrumb-sep{color:var(--text-faint)}
.pg-breadcrumb-cur{color:var(--text-primary);font-weight:500}

/* ── CONTACT FORM ── */
.pg-form{display:flex;flex-direction:column;gap:16px}
.pg-field{display:flex;flex-direction:column;gap:6px}
.pg-field label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}
.pg-field input,
.pg-field textarea,
.pg-field select{
  width:100%;
  padding:13px 16px;
  background:var(--canvas);
  border:1.5px solid var(--border);
  border-radius:var(--r-md);
  font-family:var(--font-body);font-size:14.5px;
  color:var(--text-primary);
  transition:border-color .2s,box-shadow .2s;
  outline:none;
  -webkit-appearance:none;
}
.pg-field input:focus,
.pg-field textarea:focus,
.pg-field select:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(26,58,107,0.10);
  background:var(--surface);
}
.pg-field textarea{resize:vertical;min-height:120px}
.pg-field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pg-form-note{font-size:12px;color:var(--text-muted);line-height:1.6}
.pg-form-note a{color:var(--accent)}

/* ── PRICING CARD ── */
.pg-price-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
.pg-price-card{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-lg);
  overflow:hidden;
  transition:box-shadow .25s,transform .25s;
}
.pg-price-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.pg-price-card.featured{
  border-color:var(--accent);
  box-shadow:0 0 0 1px var(--accent),var(--shadow-md);
}
.pg-price-header{padding:28px 28px 20px;border-bottom:1px solid var(--border)}
.pg-price-card.featured .pg-price-header{background:var(--accent);border-bottom:none}
.pg-price-badge{
  display:inline-block;padding:3px 10px;
  background:rgba(196,127,10,0.15);border:1px solid rgba(196,127,10,0.25);
  border-radius:100px;font-size:10px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--gold);
  margin-bottom:12px;
}
.pg-price-card.featured .pg-price-badge{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.25);color:#fff}
.pg-price-name{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.025em;color:var(--text-primary);margin-bottom:8px}
.pg-price-card.featured .pg-price-name{color:#fff}
.pg-price-desc{font-size:13.5px;color:var(--text-muted);line-height:1.6}
.pg-price-card.featured .pg-price-desc{color:rgba(255,255,255,0.75)}
.pg-price-amount{padding:20px 28px;border-bottom:1px solid var(--border)}
.pg-price-n{font-family:var(--font-display);font-size:42px;font-weight:900;letter-spacing:-.04em;color:var(--accent);line-height:1}
.pg-price-card.featured .pg-price-n{color:var(--accent)}
.pg-price-period{font-size:13px;color:var(--text-muted)}
.pg-price-body{padding:24px 28px}
.pg-price-features{display:flex;flex-direction:column;gap:11px;margin-bottom:24px}
.pg-price-feature{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;color:var(--text-body);line-height:1.5}
.pg-price-feature::before{
  content:'✓';font-size:11px;font-weight:800;
  color:var(--green);flex-shrink:0;margin-top:2px;
}

/* ── TRUST LOGOS (inner pages) ── */
.pg-trust{
  display:flex;align-items:center;gap:12px;
  padding:20px 0;border-top:1px solid var(--border);margin-top:32px;
  flex-wrap:wrap;
}
.pg-trust-label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);flex-shrink:0}
.pg-trust-avatars{display:flex;gap:0}
.pg-trust-avatar{
  width:34px;height:34px;border-radius:50%;
  border:2.5px solid var(--surface);
  background:var(--accent-dim);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:11px;font-weight:700;
  color:var(--accent);
  margin-left:-10px;
}
.pg-trust-avatar:first-child{margin-left:0}
.pg-trust-note{font-size:13px;color:var(--text-muted);font-weight:400}

/* ── RESPONSIVE — Inner pages ── */
@media(max-width:1100px){
  .pg-section{padding:80px var(--gutter)}
  .pg-split{grid-template-columns:1fr;gap:48px}
  .pg-split.flip .pg-split-visual{order:0}
  .pg-cards.cols-3{grid-template-columns:1fr 1fr}
  .pg-price-cards{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .page-hero{
    display:flex;
    flex-direction:column;
    padding:calc(var(--nav-h) + 32px) 20px 40px;
    min-height:auto;
    overflow:visible;
  }
  .hero-l{padding:0 0 24px;width:100%}
  .pg-trust{display:none}
  .hero-r{width:100%;max-width:100%;padding:0}
  .svc-slider{width:100%;max-width:100%}
  .svc-slider-track{width:100%}
  .svc-slide-vp{min-height:280px}
  .pg-section{padding:64px 24px}
  .pg-cta-band{padding:40px 32px;flex-direction:column;gap:24px}
  .pg-cta-acts{width:100%}
  .pg-cta-acts .btn-p,.pg-cta-acts .btn-c{flex:1;justify-content:center}
  .pg-stats{flex-direction:row;flex-wrap:wrap}
  .pg-stat{flex:1 1 40%}
  .pg-price-cards{grid-template-columns:1fr}
}
@media(max-width:600px){
  .page-hero{padding:0 18px;grid-template-columns:1fr}
  .pg-section{padding:52px 18px}
  .page-h1{font-size:38px}
  .page-hero-acts{flex-direction:column;align-items:stretch}
  .page-hero-acts .btn-p,.page-hero-acts .btn-c,.page-hero-acts .btn-g{justify-content:center}
  .pg-cards.cols-3,.pg-cards.cols-2{grid-template-columns:1fr}
  .pg-field-row{grid-template-columns:1fr}
  .pg-cta-band{padding:32px 24px}
  .pg-stats{flex-direction:column}
  .pg-stat{border-right:none;border-bottom:1px solid var(--border)}
  .pg-stat:last-child{border-bottom:none}
  .pg-faq-q{padding:18px 20px}
  .pg-faq-a{padding:0 20px 18px}
}

/* ================================================================
   TIER 3 PAGE STYLES
   Results · Pricing · Blog · FAQs · Strategy · Answers
   ================================================================ */

/* ── FAQ / ANSWERS TABS ── */
.faqs-tabs,.answers-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.faqs-tab{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-full);padding:8px 18px;font-size:13px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all .2s}
.faqs-tab:hover{border-color:var(--accent);color:var(--accent)}
.faqs-tab.active{background:var(--accent);border-color:var(--accent);color:#fff}
/* ══ BLOG ARCHIVE ══════════════════════════════════════════════ */

/* Filter section */
.blog-filter-section{padding:24px var(--gutter);border-bottom:1px solid var(--border);background:var(--surface)}
.faqs-filter-section,.answers-filter-section{padding:32px var(--gutter);border-bottom:1px solid var(--border)}

/* ── FAQ ITEMS (shared — FAQs page + Pricing page) ── */
.faq-item{border-bottom:1px solid var(--border)}
.faq-item:first-child{border-top:1px solid var(--border)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;background:none;border:none;text-align:left;font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--text-primary);cursor:pointer;letter-spacing:-.02em;line-height:1.3}
.faq-q:hover{color:var(--accent)}
.faq-ico{flex-shrink:0;transition:transform .3s var(--ease)}
.faq-q[aria-expanded="true"] .faq-ico{transform:rotate(180deg)}
.pg-faq-a{padding:0 0 22px}
.pg-faq-a p{font-size:15px;color:var(--text-body);line-height:1.8;margin:0}
.faq-item[hidden]{display:none}

/* ── RESULTS PAGE ── */
.results-case{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:40px;margin-bottom:32px;transition:box-shadow .2s}
.results-case:hover{box-shadow:0 8px 32px rgba(26,58,107,0.10)}
.results-case-head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.results-case-ico{font-size:28px;width:52px;height:52px;background:var(--canvas);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.results-case-tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);background:rgba(212,130,10,.1);border-radius:var(--r-full);padding:4px 10px;margin-bottom:4px}
.results-case-sector{display:block;font-size:13px;color:var(--text-muted);font-weight:400}
.results-case-headline{font-family:var(--font-display);font-size:clamp(18px,2vw,24px);font-weight:700;color:var(--text-primary);letter-spacing:-.03em;line-height:1.25;margin-bottom:28px}
.results-case-body{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
.results-case-text{display:flex;flex-direction:column;gap:20px}
.results-case-block-label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.results-case-block p{font-size:14px;color:var(--text-body);line-height:1.8;margin:0}
.results-metrics{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.results-metric{background:var(--canvas);border-radius:var(--r-md);padding:20px 16px;text-align:center;border:1px solid var(--border)}
.results-metric-n{display:block;font-family:var(--font-display);font-size:clamp(22px,2.5vw,32px);font-weight:900;color:var(--accent);letter-spacing:-.04em;line-height:1;margin-bottom:6px}
.results-metric-l{display:block;font-size:12px;color:var(--text-muted);line-height:1.4;font-weight:400}
@media(max-width:900px){.results-case-body{grid-template-columns:1fr}.results-metrics{grid-template-columns:repeat(4,1fr)}}
@media(max-width:600px){.results-metrics{grid-template-columns:repeat(2,1fr)}.results-case{padding:24px}}

/* ── PRICING PAGE ── */
.pricing-clarity{background:var(--surface);border:2px solid var(--accent);border-radius:var(--r-xl);overflow:hidden;position:relative}
.pricing-clarity-badge{background:var(--accent);color:#fff;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:8px 20px;text-align:center}
.pricing-clarity-inner{display:grid;grid-template-columns:1fr 280px;gap:0}
.pricing-clarity-left{padding:40px}
.pricing-clarity-tag{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.pricing-clarity-name{font-family:var(--font-display);font-size:clamp(22px,2.5vw,30px);font-weight:900;color:var(--text-primary);letter-spacing:-.04em;margin-bottom:12px}
.pricing-clarity-sub{font-size:15px;color:var(--text-body);line-height:1.75;margin-bottom:24px}
.pricing-clarity-list{list-style:none;margin:0 0 32px;padding:0;display:flex;flex-direction:column;gap:10px}
.pricing-clarity-list li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--text-body)}
.pricing-clarity-list svg{flex-shrink:0;margin-top:2px;color:var(--green)}
.pricing-clarity-right{background:var(--accent);color:#fff;padding:40px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:24px}
.pricing-clarity-price{display:flex;align-items:flex-start;gap:4px}
.pricing-price-currency{font-size:24px;font-weight:700;margin-top:8px;opacity:.8}
.pricing-price-amount{font-family:var(--font-display);font-size:72px;font-weight:900;letter-spacing:-.05em;line-height:1}
.pricing-price-note{font-size:13px;opacity:.7;margin-top:auto;padding-bottom:4px;align-self:flex-end}
.pricing-clarity-deliver{font-size:13px;opacity:.8}
.pricing-clarity-stat{background:rgba(255,255,255,.12);border-radius:var(--r-md);padding:16px;width:100%}
.pricing-clarity-stat-n{display:block;font-family:var(--font-display);font-size:36px;font-weight:900;letter-spacing:-.04em;line-height:1;margin-bottom:6px}
.pricing-clarity-stat-l{display:block;font-size:12px;opacity:.75;line-height:1.4}

.pricing-model-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1.5px solid var(--border);border-radius:var(--r-xl);overflow:hidden}
.pricing-factor{display:flex;align-items:flex-start;gap:16px;padding:28px 32px;border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
.pricing-factor:nth-child(even){border-right:none}
.pricing-factor:nth-last-child(-n+2){border-bottom:none}
.pricing-factor-ico{font-size:22px;flex-shrink:0;margin-top:2px}
.pricing-factor-title{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:6px}
.pricing-factor-body{font-size:13px;color:var(--text-body);line-height:1.75;margin:0}
.pricing-quote-cta{background:var(--canvas);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:40px;text-align:center;margin-top:32px}
.pricing-quote-cta p{font-size:16px;color:var(--text-body);line-height:1.75;max-width:580px;margin:0 auto}

.pricing-agency-visual{display:flex;align-items:center;justify-content:center}
.pricing-agency-block{background:var(--accent);border-radius:var(--r-xl);padding:36px;color:#fff;width:100%}
.pricing-agency-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:20px}
.pricing-agency-items{display:flex;flex-direction:column;gap:12px}
.pricing-agency-item{font-size:15px;font-weight:500;opacity:.9}

@media(max-width:900px){.pricing-clarity-inner{grid-template-columns:1fr}.pricing-clarity-right{padding:32px;flex-direction:row;flex-wrap:wrap;gap:16px}.pricing-tiers{grid-template-columns:1fr}}
@media(max-width:600px){.pricing-clarity-left{padding:24px}}

/* ── BLOG PAGE ── */
/* Filter bar */
.blog-filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.blog-tag-btn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1.5px solid var(--border);border-radius:var(--r-full);padding:7px 16px;font-size:12px;font-weight:600;color:var(--text-muted);cursor:pointer;transition:all .2s;text-decoration:none;white-space:nowrap}
.blog-tag-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.blog-tag-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.blog-tag-count{font-size:10px;opacity:.7;font-weight:500}

/* Featured post */
.blog-featured-section{padding:0 0 0;background:var(--surface);border-bottom:1px solid var(--border)}
.blog-featured-section .pg-inner{padding-top:48px;padding-bottom:48px}
.blog-featured-card{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;text-decoration:none;color:inherit;border-radius:var(--r-xl);overflow:hidden}
.blog-featured-img{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:16/9}
.blog-featured-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.blog-featured-card:hover .blog-featured-img img{transform:scale(1.03)}
.blog-featured-img-placeholder{width:100%;height:100%;background:linear-gradient(135deg,var(--canvas-mid),var(--canvas-light))}
.blog-featured-badge{position:absolute;top:16px;left:16px;background:var(--gold);color:#fff;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 12px;border-radius:var(--r-full)}
.blog-featured-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.blog-meta-sep{color:var(--border);font-size:14px}
.blog-readtime{font-size:12px;color:var(--text-muted)}
.blog-featured-title{font-family:var(--font-display);font-size:clamp(24px,2.8vw,38px);font-weight:700;letter-spacing:-.035em;line-height:1.1;color:var(--text-primary);margin-bottom:16px}
.blog-featured-excerpt{font-size:15px;line-height:1.80;color:var(--text-body);margin-bottom:28px;max-width:480px}
.blog-featured-cta{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--accent);transition:gap .2s}
.blog-featured-card:hover .blog-featured-cta{gap:12px}

/* Results bar */
.blog-results-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.blog-results-count{font-size:13px;color:var(--text-muted)}
.blog-results-count strong{color:var(--text-primary)}
.blog-results-page{font-size:12px;color:var(--text-muted)}

/* Grid */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.blog-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-xl);overflow:hidden;transition:box-shadow .25s,border-color .25s,transform .25s;display:flex;flex-direction:column}
.blog-card:hover{box-shadow:0 8px 32px rgba(26,58,107,.10);border-color:rgba(26,58,107,.18);transform:translateY(-2px)}
.blog-card-thumb{display:block;overflow:hidden;aspect-ratio:16/9;background:var(--canvas)}
.blog-card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.blog-card:hover .blog-card-thumb img{transform:scale(1.05)}
.blog-card-thumb--empty{background:linear-gradient(135deg,var(--canvas-mid) 0%,var(--canvas-light) 100%);display:flex;align-items:center;justify-content:center}
.blog-card-no-img{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);opacity:.6}
.blog-card-body{padding:22px 24px;display:flex;flex-direction:column;flex:1}
.blog-card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.blog-card-cat{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);background:rgba(212,130,10,.10);padding:3px 9px;border-radius:var(--r-full);text-decoration:none;transition:all .2s}
.blog-card-cat:hover{background:var(--gold);color:#fff}
.blog-card-coming-tag{font-size:11px;color:var(--text-muted);font-style:italic}
.blog-card-title{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--text-primary);letter-spacing:-.025em;line-height:1.28;margin-bottom:10px}
.blog-card-title a{color:inherit;text-decoration:none}
.blog-card-title a:hover{color:var(--accent)}
.blog-card-excerpt{font-size:13px;color:var(--text-body);line-height:1.75;margin-bottom:0;flex:1}
.blog-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.blog-card-author{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-muted)}
.blog-card-avatar{width:22px;height:22px;border-radius:50%;object-fit:cover}
.blog-card-author-name{font-weight:600;color:var(--text-body)}
.blog-card-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--accent);text-decoration:none;transition:gap .2s,color .2s;flex-shrink:0}
.blog-card-link:hover{color:var(--gold);gap:8px}
.blog-card--placeholder{opacity:.55;pointer-events:none}

/* Pagination */
.blog-pagination{display:flex;gap:8px;justify-content:center;margin-top:56px;flex-wrap:wrap}
.blog-pagination a,.blog-pagination span{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--r-md);border:1.5px solid var(--border);font-size:13px;font-weight:600;color:var(--text-body);text-decoration:none;transition:all .2s;background:var(--surface)}
.blog-pagination .current{background:var(--accent);border-color:var(--accent);color:#fff}
.blog-pagination a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.blog-pagination .prev,.blog-pagination .next{font-size:13px}

/* Empty state */
.blog-empty{text-align:center}
.blog-empty-inner{max-width:520px;margin:0 auto 64px}
.blog-empty-ico{font-size:40px;margin-bottom:16px}
.blog-empty-inner h2{font-family:var(--font-display);font-size:26px;font-weight:700;letter-spacing:-.03em;margin-bottom:12px}
.blog-empty-inner p{font-size:15px;color:var(--text-body);line-height:1.75;margin-bottom:28px}
.blog-grid--placeholder .blog-card{pointer-events:none}

/* Topics grid */
.blog-topics-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.blog-topic-card{display:flex;flex-direction:column;gap:8px;padding:28px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-xl);text-decoration:none;color:inherit;transition:all .25s}
.blog-topic-card:hover{border-color:var(--accent);box-shadow:0 6px 24px rgba(26,58,107,.09);transform:translateY(-2px)}
.blog-topic-ico{font-size:24px}
.blog-topic-title{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--text-primary);letter-spacing:-.02em}
.blog-topic-body{font-size:13px;color:var(--text-body);line-height:1.7;flex:1}
.blog-topic-arrow{font-size:12px;font-weight:700;color:var(--accent);margin-top:4px;transition:gap .2s}
.blog-topic-card:hover .blog-topic-arrow{color:var(--gold)}

/* Responsive */
@media(max-width:1024px){
  .blog-featured-card{grid-template-columns:1fr;gap:28px}
  .blog-featured-title{font-size:clamp(22px,3vw,30px)}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .blog-topics-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .blog-grid{grid-template-columns:1fr}
  .blog-topics-grid{grid-template-columns:1fr}
  .blog-featured-img{aspect-ratio:16/10}
  .blog-results-bar{flex-direction:column;align-items:flex-start;gap:4px}
}

/* ── STRATEGY PAGE ── */
.strategy-layer{display:grid;grid-template-columns:80px 1fr;gap:32px;padding:40px 0;border-bottom:1px solid var(--border);align-items:start}
.strategy-layer:first-of-type{border-top:1px solid var(--border)}
.strategy-layer-num{font-family:var(--font-display);font-size:clamp(36px,4vw,56px);font-weight:900;color:var(--canvas-light);letter-spacing:-.05em;line-height:1;padding-top:4px}
.strategy-layer-tag{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.strategy-layer-title{font-family:var(--font-display);font-size:clamp(20px,2vw,26px);font-weight:700;color:var(--text-primary);letter-spacing:-.03em;margin-bottom:12px}
.strategy-layer-body{font-size:15px;color:var(--text-body);line-height:1.8;margin-bottom:16px}
.strategy-layer-links{display:flex;gap:12px;flex-wrap:wrap}
.strategy-layer-link{font-size:13px;font-weight:600;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border:1.5px solid var(--accent);border-radius:var(--r-full);transition:all .2s}
.strategy-layer-link:hover{background:var(--accent);color:#fff}

.strategy-aeo-visual{display:flex;align-items:center;justify-content:center}
.strategy-aeo-block{background:var(--canvas);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:32px;width:100%}
.strategy-aeo-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:20px}
.strategy-aeo-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
.strategy-aeo-row:last-child{border-bottom:none}
.strategy-aeo-signal{font-size:13px;font-weight:600;color:var(--text-primary)}
.strategy-aeo-desc{font-size:12px;color:var(--text-muted);text-align:right}

.strategy-timeline{display:flex;flex-direction:column;gap:0;position:relative}
.strategy-timeline::before{content:'';position:absolute;left:140px;top:0;bottom:0;width:2px;background:rgba(240,244,250,0.15)}
.strategy-tl-item{display:grid;grid-template-columns:120px 32px 1fr;gap:0 20px;padding:28px 0;align-items:flex-start;position:relative}
.strategy-tl-period{font-size:12px;font-weight:700;color:rgba(240,244,250,0.5);text-align:right;padding-top:4px}
.strategy-tl-dot{width:12px;height:12px;background:var(--gold);border-radius:50%;margin:4px auto 0;flex-shrink:0;position:relative;z-index:1}
.strategy-tl-phase{font-family:var(--font-display);font-size:17px;font-weight:700;color:#F0F4FA;letter-spacing:-.02em;margin-bottom:6px}
.strategy-tl-desc{font-size:14px;color:rgba(240,244,250,0.65) !important;line-height:1.7;margin:0}

/* ── ANSWERS PAGE ── */
.answer-item{padding:36px 0;border-bottom:1px solid var(--border)}
.answer-item:first-of-type{border-top:1px solid var(--border)}
.answer-q{font-family:var(--font-display);font-size:clamp(17px,2vw,20px);font-weight:700;color:var(--text-primary);letter-spacing:-.025em;margin-bottom:14px;line-height:1.3}
.answer-a p{font-size:15px;color:var(--text-body);line-height:1.85;margin:0}

/* ── CARD LINK VARIANT ── */
.pg-card--link{text-decoration:none;cursor:pointer}
.pg-card--link .pg-card-title{color:var(--text-primary);transition:color .2s}
.pg-card--link:hover .pg-card-title{color:var(--accent)}

@media(max-width:900px){
  .strategy-layer{grid-template-columns:60px 1fr;gap:20px}
  .strategy-timeline::before{left:110px}
  .strategy-tl-item{grid-template-columns:90px 28px 1fr}
}
@media(max-width:600px){
  .strategy-layer{grid-template-columns:1fr}
  .strategy-layer-num{display:none}
  .strategy-timeline::before{display:none}
  .strategy-tl-item{grid-template-columns:1fr}
  .strategy-tl-dot{display:none}
  .strategy-tl-period{text-align:left;font-size:11px;color:var(--gold)}
}

/* ================================================================

/* ================================================================
   SINGLE POST — From rr-blog-aeo-refined.html
   ================================================================ */


/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --canvas:       #F2F4F7;
  --canvas-mid:   #E4E8F0;
  --canvas-light: #D4DAE8;
  --surface:      #FFFFFF;
  --border:       rgba(30,40,60,0.16);
  --border-mid:   rgba(30,40,60,0.10);
  --accent:       #1A3A6B;
  --accent-hover: #14305A;
  --accent-dim:   rgba(26,58,107,0.09);
  --gold:         #D4820A;
  --green:        #1E6B4A;
  --red:          #C0392B;
  --text-primary: #0E1520;
  --text-body:    rgba(14,21,32,0.82);
  --text-muted:   rgba(14,21,32,0.55);
  --text-faint:   rgba(14,21,32,0.32);
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
  --ease: cubic-bezier(0.22,1,0.36,1);
  --nav-h: 68px;
  --content-w: 720px;
  --sidebar-w: 260px;
}

/* ── SCROLL REVEALS ──────────────────────────────────────── */
.sr { opacity:0; transform:translateY(16px); transition:opacity .55s var(--ease), transform .55s var(--ease) }
.sr.in { opacity:1; transform:none }
/* Safety: if JS fails, still show content */
@media (prefers-reduced-motion: reduce) { .sr { opacity:1 !important; transform:none !important } }
.sr-d1{transition-delay:.06s}.sr-d2{transition-delay:.13s}.sr-d3{transition-delay:.20s}

/* ── RESET ──────────────────────────────────────────────── */
/* box-sizing scoped — no global margin/padding reset */
.article-hero *, .article-wrap * { box-sizing:border-box; }

/* ── ARTICLE HERO — light, refined ──────────────────────── */
.article-hero {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: calc(var(--nav-h) + 48px) 0 52px;
  position: relative;
  overflow: hidden;
  width: 100%;
}
/* Full width accent line at very top */
.article-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(26,58,107,0.15) 60%, transparent 100%);
}
/* Dot texture fading to bottom-right */
.article-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(26,58,107,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom right, transparent 30%, rgba(0,0,0,0.4) 100%);
  -webkit-mask-image: linear-gradient(to bottom right, transparent 30%, rgba(0,0,0,0.4) 100%);
}
.article-hero-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 60px;
  position: relative;
  z-index: 1;
}

/* Breadcrumb */
.breadcrumb { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-muted); flex-wrap:wrap; margin-bottom:24px }
.breadcrumb a { color:var(--text-muted); transition:color .2s }
.breadcrumb a:hover { color:var(--accent) }
.breadcrumb-sep { color:var(--text-faint); font-size:10px }
/* Hide old standalone bar */
.breadcrumb-bar { display:none }
.article-header { display:none }

/* article-header hidden — replaced by article-hero */
.article-cats { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:22px }
.article-cat { display:inline-flex; align-items:center; gap:6px; padding:5px 14px; border-radius:100px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; transition:all .2s }
.article-cat.primary { background:var(--accent); color:#FFFFFF; border:1.5px solid var(--accent); text-shadow:none }
.article-cat.secondary { background:var(--canvas-mid); color:var(--text-muted); border:1px solid var(--border) }
.article-h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 60px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--text-primary);
  margin-bottom: 22px;
  max-width: 760px;
}
.article-h1 em { font-style:italic; font-weight:300; color:var(--accent) }
.article-deck { font-size:18.5px; color:var(--text-body); line-height:1.75; font-weight:400; max-width:600px; margin-bottom:36px }
.article-meta { display:flex; align-items:center; gap:24px; flex-wrap:wrap; padding-top:24px; border-top:1px solid var(--border) }
.meta-author { display:flex; align-items:center; gap:12px }
.meta-avatar { width:40px; height:40px; border-radius:50%; background:var(--canvas-mid); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:15px; font-weight:900; color:var(--accent); flex-shrink:0 }
.meta-author-info { display:flex; flex-direction:column; gap:1px }
.meta-author-name { font-size:13.5px; font-weight:600; color:var(--text-primary) }
.meta-author-role { font-size:11.5px; color:var(--text-muted) }
.meta-divider { width:1px; height:28px; background:var(--border) }
.meta-item { display:flex; flex-direction:column; gap:2px }
.meta-label { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--text-faint); font-weight:600 }
.meta-value { font-size:13px; color:var(--text-muted); font-weight:400 }
.meta-updated { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--green); font-weight:500; background:rgba(30,107,74,0.08); padding:4px 10px; border-radius:100px; border:1px solid rgba(30,107,74,0.18) }
.meta-updated::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green); flex-shrink:0 }

/* ── READING PROGRESS BAR ───────────────────────────────── */
.progress-bar { position:fixed; top:var(--nav-h); left:0; right:0; height:2px; background:transparent; z-index:800 }
.progress-fill { height:100%; background:linear-gradient(90deg, var(--accent) 0%, rgba(26,58,107,0.45) 100%); width:0%; transition:width .12s linear; border-radius:0 2px 2px 0; box-shadow:0 0 6px rgba(26,58,107,0.35) }

/* ── LAYOUT ─────────────────────────────────────────────── */
.article-wrap { display:grid; grid-template-columns:minmax(0,720px) 260px; gap:60px; max-width:1100px; margin:0 auto; padding:48px 60px 80px; align-items:start; width:100%; box-sizing:border-box }

/* ── FEATURED IMAGE ─────────────────────────────────────── */
.article-featured-img { width:100%; aspect-ratio:16/7; background:linear-gradient(135deg,var(--canvas-mid),var(--canvas-light)); border-radius:var(--r-lg); margin-bottom:48px; overflow:hidden; position:relative; border:1px solid var(--border) }
.article-featured-img img { width:100%; height:100%; object-fit:cover }
.article-featured-placeholder { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px }
.afp-icon { font-size:40px; opacity:.3 }
.afp-text { font-size:12px; color:var(--text-faint); letter-spacing:.1em; text-transform:uppercase }

/* ── KEY TAKEAWAYS ──────────────────────────────────────── */
.takeaways {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 28px 32px;
  margin-bottom: 48px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(30,40,60,0.06);
}
.takeaways::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 0;
}
.takeaways::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, rgba(26,58,107,0.025));
  pointer-events: none;
}
.takeaways-title { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:14px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:18px }
.takeaways-title svg { flex-shrink:0 }
.takeaways-list { list-style:none; display:flex; flex-direction:column; gap:12px }
.takeaways-list li { display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color:var(--text-body); line-height:1.6 }
.takeaways-list li::before { content:''; width:18px; height:18px; border-radius:50%; background:rgba(26,58,107,0.10); border:1.5px solid rgba(26,58,107,0.25); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:2px; background-image:url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4L3.5 6.5L9 1' stroke='%231A3A6B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center }

/* ── ARTICLE BODY ───────────────────────────────────────── */
.article-body { font-size:16.5px; line-height:1.84; color:var(--text-body); min-width:0; overflow-wrap:break-word; word-break:break-word }
/* Drop cap on first paragraph */
.article-body > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 4.4em;
  font-weight: 900;
  line-height: 0.80;
  float: left;
  margin: 5px 10px -2px 0;
  color: var(--accent);
  letter-spacing: -.03em;
}
.article-body h2 {
  font-family: var(--font-display);
  font-size: clamp(24px,2.8vw,33px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.025em;
  color: var(--text-primary);
  margin: 64px 0 18px;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
  padding-top: 4px;
  padding-bottom: 4px;
}
.article-body h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.018em;
  color: var(--text-primary);
  margin: 44px 0 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.article-body h3::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  opacity: .55;
}
.article-body h4 { font-family:var(--font-body); font-size:16px; font-weight:700; color:var(--text-primary); margin:32px 0 10px; letter-spacing:.01em }
.article-body p { margin-bottom:24px }
.article-body p:last-child { margin-bottom:0 }
.article-body a { color:var(--accent); text-decoration:none; border-bottom:1.5px solid rgba(26,58,107,0.25); transition:border-color .2s }
.article-body a:hover { border-color:var(--accent) }
.article-body strong { font-weight:700; color:var(--text-primary) }
.article-body em { font-style:italic }
.article-body ul, .article-body ol { margin:0 0 24px 0; padding-left:0; list-style:none }
.article-body ul li, .article-body ol li { padding:6px 0 6px 26px; position:relative; font-size:16px; color:var(--text-body); line-height:1.7 }
.article-body ul li::before { content:''; position:absolute; left:0; top:15px; width:6px; height:6px; border-radius:50%; background:var(--accent); opacity:.6 }
.article-body ol { counter-reset:ol-counter }
.article-body ol li { counter-increment:ol-counter }
.article-body ol li::before { content:counter(ol-counter); position:absolute; left:0; top:6px; width:18px; height:18px; border-radius:50%; background:var(--accent-dim); border:1px solid rgba(26,58,107,0.2); font-size:10px; font-weight:700; color:var(--accent); display:flex; align-items:center; justify-content:center; line-height:1 }

/* Pull quote */
.article-body blockquote {
  margin: 44px 0;
  padding: 28px 32px 28px 28px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
  position: relative;
  box-shadow: 0 2px 16px rgba(30,40,60,0.06);
}
.article-body blockquote::before {
  content: '“';
  position: absolute;
  top: 8px; right: 24px;
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1;
  color: var(--accent-dim);
  font-weight: 900;
  pointer-events: none;
  user-select: none;
}
.article-body blockquote p {
  font-family: var(--font-display);
  font-size: clamp(17px,1.8vw,20px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-primary);
  margin: 0;
  max-width: 560px;
}
.article-body blockquote cite {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  font-style: normal;
  margin-top: 14px;
  font-weight: 500;
  letter-spacing: .04em;
}

/* Callout boxes */
.callout {
  margin: 36px 0;
  padding: 20px 22px 20px 18px;
  border-radius: var(--r-md);
  display: flex;
  gap: 14px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.callout::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
}
.callout.info { background:rgba(26,58,107,0.05); border:1px solid rgba(26,58,107,0.14) }
.callout.info::before { background: var(--accent) }
.callout.warning { background:rgba(212,130,10,0.05); border:1px solid rgba(212,130,10,0.15) }
.callout.warning::before { background: var(--gold) }
.callout.success { background:rgba(30,107,74,0.05); border:1px solid rgba(30,107,74,0.14) }
.callout.success::before { background: var(--green) }
.callout-icon { font-size:18px; flex-shrink:0; margin-top:1px }
.callout-body { flex:1 }
.callout-title { font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-bottom:6px }
.callout.info .callout-title { color:var(--accent) }
.callout.warning .callout-title { color:var(--gold) }
.callout.success .callout-title { color:var(--green) }
.callout-body p { font-size:14.5px; color:var(--text-body); line-height:1.65; margin:0 }

/* Stat highlight */
.stat-highlight {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 0;
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 44px 0;
  box-shadow: 0 2px 20px rgba(30,40,60,0.07);
}
.stat-highlight-item {
  background: var(--surface);
  padding: 28px 22px;
  text-align: center;
  position: relative;
  transition: background .25s;
}
.stat-highlight-item:hover { background: var(--canvas) }
.stat-highlight-item + .stat-highlight-item { border-left: 1px solid var(--border) }
/* Top accent line per item */
.stat-highlight-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  opacity: 0;
  transition: opacity .25s;
}
.stat-highlight-item:hover::before { opacity: 1 }
.sh-num { font-family:var(--font-display); font-size:42px; font-weight:900; letter-spacing:-.04em; color:var(--accent); line-height:1; display:flex; align-items:flex-start; justify-content:center; gap:2px }
.sh-sup { font-size:22px; padding-top:5px; color:var(--accent); opacity:.7 }
.sh-label { font-size:12px; color:var(--text-muted); margin-top:10px; line-height:1.5; font-weight:400 }

/* Code / tag */
.article-body code { font-family:'SF Mono','Fira Code',monospace; font-size:13.5px; background:var(--canvas-mid); padding:2px 7px; border-radius:4px; color:var(--accent); border:1px solid var(--border) }

/* Divider */
.article-body hr { border:none; border-top:1px solid var(--border); margin:48px 0 }

/* ── EDITORIAL NOTE ─────────────────────────────────────── */
.editorial-note {
  background: var(--canvas-mid);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin: 56px 0 48px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  position: relative;
}
.editorial-note::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--border) 40%, transparent 100%);
}
.en-icon { width:32px; height:32px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0 }
.en-body { flex:1 }
.en-title { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:6px }
.en-text { font-size:13.5px; color:var(--text-body); line-height:1.65 }
.en-text a { color:var(--accent); border-bottom:1px solid rgba(26,58,107,0.25) }

/* ── TWITTER / X SHARE CARD ─────────────────────────────── */
.share-card { border:1.5px solid var(--border); border-radius:var(--r-lg); overflow:hidden; margin:56px 0; background:var(--surface) }
.share-card-header { padding:20px 24px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px }
.share-card-platform { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text-primary) }
.share-card-platform-icon { width:28px; height:28px; background:#000; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#FFF; font-size:14px; font-weight:900; font-family:serif; flex-shrink:0 }
.share-card-body { padding:20px 24px }
.share-card-quote { font-family:var(--font-display); font-size:17px; font-weight:400; line-height:1.55; color:var(--text-primary); margin-bottom:14px; font-style:italic }
.share-card-meta { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px }
.share-card-tags { display:flex; gap:8px; flex-wrap:wrap }
.share-tag { font-size:13px; color:var(--accent); font-weight:500 }
.share-btn { display:inline-flex; align-items:center; gap:8px; padding:9px 20px; background:#000; color:#FFF; border:none; border-radius:var(--r-sm); font-size:13px; font-weight:600; cursor:pointer; transition:all .2s; text-decoration:none }
.share-btn:hover { background:#222; transform:translateY(-1px) }
.share-btn svg { flex-shrink:0 }
.share-actions { padding:16px 24px; background:var(--canvas); border-top:1px solid var(--border); display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.share-actions-label { font-size:12px; color:var(--text-muted); font-weight:500; margin-right:4px }
.share-pill { display:inline-flex; align-items:center; gap:6px; padding:7px 16px; border:1.5px solid var(--border); border-radius:100px; font-size:12.5px; color:var(--text-body); background:var(--surface); cursor:pointer; transition:all .2s; font-weight:500 }
.share-pill:hover { border-color:var(--accent); color:var(--accent) }

/* ── ARTICLE FOOTER ─────────────────────────────────────── */
.article-footer-meta { padding:32px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin:56px 0 48px; display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap }
.article-tags { display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.article-tags-label { font-size:12px; color:var(--text-muted); font-weight:600; letter-spacing:.06em; text-transform:uppercase }
.article-tag { display:inline-flex; padding:5px 12px; background:var(--canvas-mid); border:1px solid var(--border); border-radius:100px; font-size:12px; color:var(--text-muted); transition:all .2s; font-weight:500 }
.article-tag:hover { background:var(--accent-dim); border-color:rgba(26,58,107,0.25); color:var(--accent) }
.article-updated { font-size:12.5px; color:var(--text-muted) }
.article-updated strong { color:var(--text-body) }

/* ── AUTHOR BOX ─────────────────────────────────────────── */
.author-box {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  padding: 32px;
  margin-bottom: 56px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(30,40,60,0.06);
}
.author-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent) 0%, rgba(26,58,107,0.15) 100%);
}
.author-box-avatar { width:64px; height:64px; border-radius:50%; background:var(--canvas-mid); border:2px solid var(--border); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:24px; font-weight:900; color:var(--accent); flex-shrink:0 }
.author-box-body { flex:1 }
.author-box-label { font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--text-muted); font-weight:700; margin-bottom:6px }
.author-box-name { font-family:var(--font-display); font-size:20px; font-weight:700; color:var(--text-primary); margin-bottom:10px }
.author-box-bio { font-size:14px; color:var(--text-body); line-height:1.7; margin-bottom:16px }
.author-box-links { display:flex; gap:10px }
.author-link { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border:1.5px solid var(--border); border-radius:var(--r-sm); font-size:12px; color:var(--text-muted); transition:all .2s; font-weight:500 }
.author-link:hover { border-color:var(--accent); color:var(--accent) }

/* ── SEO CLARITY CTA ────────────────────────────────────── */
.article-cta { background:var(--accent); border-radius:var(--r-lg); padding:44px 48px; margin-bottom:56px; position:relative; overflow:hidden }
.article-cta::before { content:''; position:absolute; top:-80px; right:-80px; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,0.06); z-index:0; pointer-events:none }
.article-cta::after { content:''; position:absolute; bottom:-60px; left:-40px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,0.04); z-index:0; pointer-events:none }
.article-cta-inner { position:relative; z-index:2 }
.article-cta-label { font-size:10px; text-transform:uppercase; letter-spacing:.14em; color:rgba(255,255,255,0.70); font-weight:700; margin-bottom:12px }
.article-cta-title { font-family:var(--font-display); font-size:clamp(22px,2.5vw,30px); font-weight:700; color:#FFFFFF; line-height:1.15; letter-spacing:-.02em; margin-bottom:14px }
.article-cta-title em { font-style:italic; font-weight:300; color:rgba(255,255,255,0.85) }
.article-cta-desc { font-size:15px; color:rgba(255,255,255,0.80); line-height:1.65; margin-bottom:28px; max-width:480px }
.article-cta-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.btn-cta-primary { display:inline-flex; align-items:center; gap:8px; padding:13px 26px; background:#FFF; color:var(--accent); border:none; border-radius:var(--r-sm); font-size:14px; font-weight:700; cursor:pointer; transition:all .22s; text-decoration:none }
.btn-cta-primary:hover { background:var(--canvas); transform:translateY(-1px) }
.btn-cta-secondary { display:inline-flex; align-items:center; gap:8px; padding:13px 22px; background:transparent; color:rgba(255,255,255,0.80); border:1.5px solid rgba(255,255,255,0.28); border-radius:var(--r-sm); font-size:14px; font-weight:500; cursor:pointer; transition:all .22s; text-decoration:none }
.btn-cta-secondary:hover { border-color:rgba(255,255,255,0.60); color:#FFF }

/* ── RELATED POSTS ──────────────────────────────────────── */
.related-posts { margin-bottom:56px }
.related-label { display:flex; align-items:center; gap:10px; margin-bottom:24px }
.related-line { flex:1; height:1px; background:var(--border) }
.related-text { font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); white-space:nowrap }
.related-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px }
.related-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px 22px 36px;
  transition: all .28s var(--ease);
  text-decoration: none;
  display: block;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 8px rgba(30,40,60,0.05);
}
.related-card::after {
  content: '→';
  position: absolute;
  bottom: 16px; right: 18px;
  font-size: 14px;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: all .25s var(--ease);
}
.related-card:hover {
  border-color: rgba(26,58,107,0.25);
  box-shadow: 0 6px 24px rgba(30,40,60,0.10);
  transform: translateY(-2px);
}
.related-card:hover::after { opacity:1; transform:translateX(0) }
.related-card-cat { font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:8px }
.related-card-title { font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--text-primary); line-height:1.3; margin-bottom:10px; letter-spacing:-.01em }
.related-card-meta { font-size:12px; color:var(--text-muted) }

/* ── SIDEBAR ────────────────────────────────────────────── */
.sidebar { position:sticky; top:calc(var(--nav-h) + 24px) }
.toc {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 14px rgba(30,40,60,0.06);
}
.toc-header {
  padding: 14px 18px;
  background: var(--canvas);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.toc-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}
/* Reading percentage badge */
.toc-pct-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid rgba(26,58,107,0.15);
  padding: 2px 8px;
  border-radius: 100px;
  min-width: 40px;
  text-align: center;
  transition: all .3s;
}
/* Mini progress track inside TOC */
.toc-progress-track {
  height: 2px;
  background: var(--canvas-mid);
  position: relative;
  overflow: hidden;
}
.toc-progress-fill {
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width .15s linear;
  border-radius: 0 2px 2px 0;
}
.toc-body { padding: 8px 0 10px }
.toc-list { list-style:none; display:flex; flex-direction:column; gap:1px }
.toc-item a {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: var(--text-muted);
  padding: 6px 18px;
  transition: all .2s;
  line-height: 1.4;
  border-left: 2px solid transparent;
  text-decoration: none;
}
.toc-item a::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--border);
  flex-shrink: 0;
  transition: all .22s;
}
.toc-item a:hover { color: var(--accent); background: var(--accent-dim); border-left-color: rgba(26,58,107,0.25) }
.toc-item a:hover::before { background: var(--accent) }
.toc-item a.active { color: var(--accent); font-weight: 600; border-left-color: var(--accent) }
.toc-item a.active::before { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim) }
.toc-item.h3 a { padding-left: 32px; font-size: 12px }
.toc-item.h3 a::before { width: 3px; height: 3px }

/* Sidebar share widget */
.sidebar-share { background:var(--surface); border:1.5px solid var(--border); border-radius:var(--r-lg); padding:20px 24px; margin-bottom:20px }
.sidebar-share-title { font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); margin-bottom:14px }
.share-icons { display:flex; gap:8px }
.share-icon-btn { width:36px; height:36px; border-radius:var(--r-sm); border:1.5px solid var(--border); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--text-muted); cursor:pointer; transition:all .2s; background:var(--surface) }
.share-icon-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-dim) }

/* Sidebar CTA */
.sidebar-cta { background:var(--accent); border-radius:var(--r-lg); padding:24px; text-align:center }
.sidebar-cta-icon { font-size:28px; margin-bottom:10px }
.sidebar-cta-title { font-family:var(--font-display); font-size:17px; font-weight:700; color:#FFF; line-height:1.2; margin-bottom:8px; letter-spacing:-.01em }
.sidebar-cta-desc { font-size:12.5px; color:rgba(255,255,255,0.65); line-height:1.55; margin-bottom:18px }
.sidebar-cta-btn { display:block; padding:10px 16px; background:#FFF; color:var(--accent); border-radius:var(--r-sm); font-size:13px; font-weight:700; text-decoration:none; transition:all .2s }
.sidebar-cta-btn:hover { background:var(--canvas); transform:translateY(-1px) }
.sidebar-cta-note { font-size:11px; color:rgba(255,255,255,0.45); margin-top:10px }

/* ── RESPONSIVE ─────────────────────────────────────────── */
/* ── TABLET ── */
@media (max-width:1100px) {
  :root { --content-w:100%; --sidebar-w:100% }
  .breadcrumb-bar,
  .article-header { padding-left:24px; padding-right:24px; max-width:100% }
  .article-wrap { grid-template-columns:1fr; gap:0; padding:0 20px 60px; max-width:100% }
  .article-hero { padding-left:24px; padding-right:24px; }
  .sidebar { position:static; display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:40px; order:-1 }
  .toc { display:none }
  .article-h1 { max-width:100% }
}

/* ── MOBILE ── */
@media (max-width:768px) {
  :root { --nav-h:62px }

  /* Global overflow guard — targeted, not universal */
  html, body { overflow-x:hidden }
  img, video, iframe, embed, object { max-width:100% !important }
  table { max-width:100%; overflow-x:auto; display:block }
  pre, code { max-width:100%; overflow-x:auto }

  /* Nav */
  .nav { padding:0 20px }
  .nav-links, .nav-clarity, .nav-cta { display:none }
  .nav-ham { display:flex }

  /* Hero */
  .article-hero { padding: calc(var(--nav-h) + 32px) 20px 44px }
  .article-hero::before { left: 20px }
  .article-h1 { font-size: clamp(28px,7vw,40px) }
  .article-deck { font-size: 16px }

  /* Article title */
  .article-h1 { font-size:clamp(26px,7vw,38px); max-width:100%; word-break:break-word }
  .article-deck { font-size:15px; max-width:100% }

  /* Meta row — compact on mobile */
  .article-meta { gap:0; flex-direction:column; align-items:flex-start; padding-top:16px }
  .meta-author { margin-bottom:10px }
  .meta-divider { display:none }
  .meta-item { flex-direction:row; gap:6px; align-items:center; display:inline-flex }
  .meta-label { display:none }
  /* Show read time and word count inline */
  .article-meta .meta-item { margin-right:16px }
  .article-meta { flex-direction:row; flex-wrap:wrap; gap:8px 16px }

  /* Main layout */
  .article-wrap { grid-template-columns:1fr; padding:0 20px 48px; gap:0; max-width:100% }

  /* Featured image - limit height on mobile */
  .article-featured-img { aspect-ratio: 16/9; max-height: 220px; }
  .article-featured-img img { height: 220px; object-fit: cover; }

  /* Sidebar collapses fully */
  .sidebar { grid-template-columns:1fr; order:2; margin-top:32px }
  .toc { display:none }

  /* Article body */
  .article-body { font-size:16px; word-break:break-word; overflow-wrap:break-word }
  .article-body > p:first-of-type::first-letter { float:none; font-size:inherit; margin:0; color:inherit; line-height:inherit }
  .article-body h2 { padding-left:14px }
  .article-body blockquote { padding:20px 20px 20px 18px }
  .article-body blockquote::before { font-size:52px; top:4px; right:14px }
  .article-body h2 { font-size:clamp(20px,5.5vw,26px); margin:40px 0 16px; word-break:break-word }
  .article-body h3 { font-size:18px; margin:28px 0 12px }
  .article-body p { margin-bottom:20px }
  .article-body blockquote { padding:20px 20px 20px 18px }
  .article-body blockquote p { font-size:17px }
  .article-body code { font-size:12px; word-break:break-all }

  /* Takeaways box */
  .takeaways { padding:20px 20px }

  /* Callout boxes */
  .callout { padding:16px 18px; gap:12px }

  /* Stat highlight — stack to single column */
  .stat-highlight { grid-template-columns:1fr }
  .stat-highlight-item + .stat-highlight-item { border-top:1px solid var(--border) }

  /* Featured image */
  .article-featured-img { aspect-ratio:16/9; margin-bottom:32px }

  /* Share card */
  .share-card-header { padding:14px 16px 12px }
  .share-card-body { padding:14px 16px }
  .share-card-quote { font-size:15px }
  .share-card-meta { flex-direction:column; align-items:flex-start; gap:14px }
  .share-actions { padding:12px 16px; flex-wrap:wrap }

  /* Author box */
  .author-box { flex-direction:column; padding:24px 20px; gap:16px }
  .author-box-links { flex-wrap:wrap }

  /* Newsletter block */
  .newsletter-block { grid-template-columns:1fr; gap:20px; padding:24px 20px }
  .newsletter-form { min-width:unset }

  /* SEO Clarity CTA */
  .article-cta { padding:28px 20px }
  .article-cta-actions { flex-direction:column }
  .btn-cta-primary, .btn-cta-secondary { justify-content:center; width:100%; text-align:center }

  /* Article footer meta */
  .article-footer-meta { flex-direction:column; gap:16px }
  .article-tags { flex-wrap:wrap }

  /* Related posts */
  .related-grid { grid-template-columns:1fr }

  /* Footer */
  .footer-topband { flex-direction:column; align-items:flex-start; padding:28px 20px }
  .footer-topctas { flex-direction:column; width:100% }
  .footer-topctas .btn-p,
  .footer-topctas .btn-g { justify-content:center; width:100%; box-sizing:border-box }
  .footer .btn-g { color:rgba(244,245,247,0.85) !important; background:transparent !important; border-color:rgba(244,245,247,0.30) !important }
  .footer-bot { padding:16px 20px; flex-direction:column; align-items:flex-start; gap:10px }
}

/* ── SMALL PHONES (< 400px) ── */
@media (max-width:400px) {
  .article-h1 { font-size:24px }
  .article-wrap { padding:0 16px 40px }
  .breadcrumb-bar, .article-header { padding-left:16px; padding-right:16px }
  .article-body { font-size:15px }
  .sh-num { font-size:30px }
}

/* ── Quick Answer box ── */
.quick-answer{background:var(--surface);border-left:3px solid var(--gold);border-radius:0 var(--r-md) var(--r-md) 0;padding:16px 20px;margin-bottom:32px;box-shadow:0 2px 8px rgba(14,21,32,0.06)}
.qa-label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:7px}
.qa-text{font-size:15px;font-weight:600;color:var(--text-primary);line-height:1.65}

/* ── Click to tweet ── */
.ctt-btn{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--text-primary);text-decoration:none;background:var(--surface);border:1.5px solid var(--border);border-radius:100px;padding:5px 14px;transition:all .2s;cursor:pointer;font-family:var(--font-body);margin-top:12px}
.ctt-btn:hover{background:#000;color:#fff;border-color:#000}

/* ── Steps ── */
.rr-steps{list-style:none;padding:0;margin:20px 0}
.rr-step{display:flex;gap:18px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--border)}
.rr-step:last-child{border-bottom:none}
.rr-step-n{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--border);line-height:1;flex-shrink:0;width:32px;padding-top:2px}
.rr-step-text{font-size:15px;color:var(--text-body);line-height:1.65;padding-top:3px}

/* ── Inline CTA ── */
.rr-inline-cta{background:var(--accent);border-radius:var(--r-lg);padding:22px 24px;margin:28px 0;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.rr-inline-cta-copy{flex:1;min-width:180px}
.rr-inline-cta-copy strong{display:block;font-size:15px;font-weight:700;color:#fff;margin-bottom:4px}
.rr-inline-cta-copy span{font-size:13px;color:rgba(255,255,255,0.65);line-height:1.55}
.rr-inline-cta-btn{background:var(--gold);color:#fff;text-decoration:none;font-weight:700;font-size:13px;padding:10px 22px;border-radius:var(--r-sm);white-space:nowrap;flex-shrink:0;display:inline-block;transition:opacity .2s}
.rr-inline-cta-btn:hover{opacity:.85}

/* ── FAQ Accordion ── */
.rr-faq-block{margin:32px 0;border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.rr-faq-item{border-bottom:1px solid var(--border)}
.rr-faq-item:last-child{border-bottom:none}
.rr-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;background:var(--surface);border:none;cursor:pointer;font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--text-primary);text-align:left;transition:background .2s}
.rr-faq-q:hover{background:var(--canvas)}
.rr-faq-item.open .rr-faq-q{background:var(--accent-dim);color:var(--accent)}
.rr-faq-icon{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border);flex-shrink:0;position:relative;transition:all .25s;background:transparent}
.rr-faq-icon::before,.rr-faq-icon::after{content:'';position:absolute;background:var(--text-muted);transition:all .25s}
.rr-faq-icon::before{width:8px;height:1.5px;top:50%;left:50%;transform:translate(-50%,-50%)}
.rr-faq-icon::after{width:1.5px;height:8px;top:50%;left:50%;transform:translate(-50%,-50%)}
.rr-faq-item.open .rr-faq-icon{border-color:var(--accent);background:var(--accent)}
.rr-faq-item.open .rr-faq-icon::before{background:#fff}
.rr-faq-item.open .rr-faq-icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.rr-faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.rr-faq-a-inner{padding:4px 22px 20px;font-size:14.5px;color:var(--text-body);line-height:1.75}

/* ── Inline TOC for mobile ── */
.toc-inline-list{list-style:none;display:flex;flex-direction:column;gap:2px}
.toc-inline-list .toc-item a{display:block;font-size:13px;color:var(--text-muted);padding:6px 10px;border-radius:var(--r-sm);transition:all .2s;line-height:1.4;border-left:2px solid transparent;text-decoration:none}
.toc-inline-list .toc-item.h3 a{padding-left:20px;font-size:12px}
.toc-inline-list .toc-item a:hover{color:var(--accent);background:var(--accent-dim);border-left-color:var(--accent)}
@media(min-width:1101px){.article-main .takeaways:has(.toc-inline-list){display:none}}

/* ── Post nav ── */
.single-post-nav{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.single-nav-item{display:flex;flex-direction:column;gap:6px;padding:24px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);text-decoration:none;transition:all .2s}
.single-nav-item:hover{border-color:var(--accent)}
.single-nav-next{text-align:right}
.single-nav-dir{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.single-nav-title{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--text-primary);letter-spacing:-.02em;line-height:1.3}
@media(max-width:600px){.single-post-nav{grid-template-columns:1fr}}

/* ── Single post mobile overflow guard ── */
.article-wrap,.article-main,.article-body{overflow-x:hidden;box-sizing:border-box}

/* ── Newsletter block ── */
.newsletter-block{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:36px 40px;margin-bottom:56px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;position:relative;overflow:hidden}
.newsletter-block::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),rgba(212,130,10,0.3))}
.newsletter-tag{display:inline-flex;align-items:center;gap:7px;padding:4px 12px;background:rgba(212,130,10,0.10);border:1px solid rgba(212,130,10,0.22);border-radius:100px;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.newsletter-title{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--text-primary);line-height:1.25;letter-spacing:-.02em;margin-bottom:10px}
.newsletter-title em{font-style:italic;font-weight:300;color:var(--gold)}
.newsletter-title br{display:none}
.newsletter-desc{font-size:14px;color:var(--text-body);line-height:1.65;max-width:420px}
.newsletter-form{display:flex;flex-direction:column;gap:10px;min-width:280px}
.newsletter-input{width:100%;padding:13px 16px;font-family:var(--font-body);font-size:14px;color:var(--text-primary);background:var(--canvas);border:1.5px solid var(--border);border-radius:var(--r-sm);outline:none;transition:border-color .2s;box-sizing:border-box}
.newsletter-input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,130,10,0.10)}
.newsletter-input::placeholder{color:var(--text-faint)}
.newsletter-btn{padding:13px 22px;background:var(--gold);color:#FFF;border:none;border-radius:var(--r-sm);font-family:var(--font-body);font-size:14px;font-weight:700;cursor:pointer;transition:all .22s;white-space:nowrap;box-shadow:0 3px 12px rgba(212,130,10,0.28)}
.newsletter-btn:hover{background:#B86E08;transform:translateY(-1px)}
.newsletter-note{font-size:11.5px;color:var(--text-faint)}
@media(max-width:900px){.newsletter-block{grid-template-columns:1fr;gap:20px;padding:28px 24px}.newsletter-form{min-width:unset}}
@media(max-width:600px){.newsletter-block{padding:24px 18px}}
/* ── SVC SLIDER — service page hero right panel ── */
@keyframes svcSlideFadeIn{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}
.svc-slider{width:100%;max-width:500px;position:relative;user-select:none}
.svc-slider-track{position:relative;overflow:hidden;border-radius:16px;border:1.5px solid rgba(255,255,255,0.14);box-shadow:0 10px 56px rgba(0,0,0,0.55);background:rgba(10,18,36,0.92)}
.svc-slide{display:none;animation:svcSlideFadeIn .6s cubic-bezier(0.22,1,0.36,1) both}
.svc-slide.active{display:block}
.svc-slide-vp{background:rgba(12,22,48,0.88);position:relative;overflow:hidden;min-height:380px;display:flex;flex-direction:column;justify-content:flex-end;padding:36px 32px 28px}
.svc-slide-vp::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--slide-accent),rgba(200,150,30,.5));z-index:2}
.svc-slide-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.svc-slide-deco{position:absolute;top:0;right:0;width:100%;height:100%;opacity:.6}
.svc-slide-num{font-family:var(--font-display);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--slide-accent,rgba(255,255,255,0.35));margin-bottom:12px;position:relative;z-index:1}
.svc-slide-inner{position:relative;z-index:1}
.svc-slide-eyebrow{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--slide-accent,rgba(255,255,255,0.50));margin-bottom:10px}
.svc-slide-h{font-family:var(--font-display);font-size:clamp(22px,2.2vw,30px);font-weight:700;color:#FFFFFF;line-height:1.15;letter-spacing:-.03em;margin-bottom:14px}
.svc-slide-h em{font-style:italic;font-weight:300;color:var(--slide-accent,rgba(255,255,255,0.80))}
.svc-slide-body{font-size:14px;color:rgba(240,244,250,0.65);line-height:1.72;margin-bottom:20px}
.svc-slide-proof{display:flex;align-items:center;gap:0;border-top:1px solid rgba(255,255,255,0.08);padding-top:18px}
.svc-slide-proof-item{flex:1;text-align:center}
.svc-slide-proof-n{display:block;font-family:var(--font-display);font-size:26px;font-weight:900;letter-spacing:-.04em;color:var(--slide-accent,#FFFFFF);line-height:1;margin-bottom:4px}
.svc-slide-proof-l{display:block;font-size:11px;color:rgba(240,244,250,0.45);line-height:1.4}
.svc-slide-proof-div{width:1px;height:40px;background:rgba(255,255,255,0.08);flex-shrink:0}
.svc-slide-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.svc-slide-chip{font-size:11px;font-weight:600;color:var(--slide-accent,rgba(255,255,255,0.70));background:var(--slide-accent-dim,rgba(255,255,255,0.06));border:1px solid var(--slide-accent,rgba(255,255,255,0.15));border-radius:100px;padding:4px 12px}
.svc-slider-dots-bar{display:flex;align-items:center;gap:8px;padding:10px 20px 4px;background:rgba(8,15,30,0.92);border-top:1px solid rgba(255,255,255,0.08)}
.svc-slider-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,0.20);border:none;cursor:pointer;transition:all .28s;padding:0;flex-shrink:0}
.svc-slider-dot.active{background:#FFFFFF;width:24px;border-radius:4px}
.svc-slider-progress{height:3px;background:rgba(255,255,255,0.08);overflow:hidden;width:100%}
.svc-slider-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--gold));width:0%;transition:width 5s linear}

/* Centered hero on mobile (pages without slider) */
@media(max-width:900px){
  .page-hero-inner.centered { text-align:center; }
  .page-hero-inner.centered .page-hero-acts { justify-content:center; }
  .page-hero-inner.centered .pg-breadcrumb { justify-content:center; }
}

/* ── FAQ ACCORDION fix ── */
.rr-faq-icon{width:18px;height:18px;flex-shrink:0;border:1.5px solid var(--border);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:16px;line-height:1;transition:transform .25s,background .2s;color:var(--text-muted)}
.rr-faq-icon::after{content:'+';font-size:14px;font-weight:300}
.rr-faq-item.open .rr-faq-icon{background:var(--accent);border-color:var(--accent);color:#fff;transform:rotate(45deg)}
.rr-faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.rr-faq-a-inner{padding:4px 22px 20px;font-size:14.5px;color:var(--text-body);line-height:1.78}
.rr-faq-item.open .rr-faq-a{max-height:800px}