/* =====================================================
   GrowthFollo — Design System
   Swiss-inspired editorial. Navy / Paper / Stone / Chartreuse.
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  /* --- color tokens --- */
  --navy:      #101B33;
  --navy-ink:  #0C1428;
  --paper:     #F6F1E6;
  --paper-soft:#FBF8F2;
  --stone:     #E7DFCC;
  --stone-line:#CFC5A9;
  --chartreuse:#D7F34B;
  --chartreuse-dim: #c9e83f;
  --ink-70:    rgba(16,27,51,0.68);
  --ink-45:    rgba(16,27,51,0.45);
  --paper-70:  rgba(246,241,230,0.72);
  --paper-45:  rgba(246,241,230,0.45);
  --rule:      #CDC4A9;
  --rule-on-navy: rgba(246,241,230,0.18);

  /* --- type --- */
  --f-display: 'Fraunces', Georgia, serif;
  --f-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- scale --- */
  --container: 1220px;
  --gutter: clamp(20px, 4vw, 64px);
  --radius: 2px;

  /* --- motion --- */
  --ease: cubic-bezier(.16,.84,.32,1);
  --fast: 200ms;
  --med: 300ms;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  margin:0;
  background: var(--paper);
  color: var(--navy);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }

h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.05;
  margin: 0;
  letter-spacing: -0.01em;
}
h1{ font-weight: 400; }
em, .ital{ font-style: italic; font-weight: 500; }

p{ margin: 0 0 1em; }
p:last-child{ margin-bottom: 0; }

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

.eyebrow{
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-45);
}
.on-navy .eyebrow{ color: var(--paper-45); }
.eyebrow.signal{ color: var(--navy); }
.eyebrow.signal::before{
  content:"";
  display:inline-block;
  width:6px; height:6px;
  background: var(--chartreuse);
  margin-right:8px;
  border-radius: 1px;
  transform: translateY(-1px);
}

.rule{ border:0; border-top: 1px solid var(--rule); margin: 0; }
.on-navy .rule{ border-top-color: var(--rule-on-navy); }

/* Visually-hidden but focusable skip link */
.skip-link{
  position:absolute; left:-9999px; top:0;
  background: var(--chartreuse); color: var(--navy);
  padding: 10px 16px; font-weight:600; z-index: 999;
}
.skip-link:focus{ left: var(--gutter); top: var(--gutter); }

:focus-visible{
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}
.on-navy :focus-visible, .btn.chartreuse:focus-visible{
  outline-color: var(--chartreuse);
}

/* =====================================================
   Buttons
   ===================================================== */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 14px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform var(--fast) var(--ease), background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
  white-space: nowrap;
}
.btn.chartreuse{ background: var(--chartreuse); color: var(--navy); }
.btn.chartreuse:hover{ background: var(--navy); color: var(--chartreuse); transform: translateY(-2px); }
.btn.outline{ background: transparent; border-color: currentColor; color: var(--navy); }
.on-navy .btn.outline{ color: var(--paper); }
.btn.outline:hover{ background: var(--navy); color: var(--paper); transform: translateY(-2px); }
.on-navy .btn.outline:hover{ background: var(--paper); color: var(--navy); }

.text-link{
  display:inline-flex; align-items:center; gap:8px;
  font-weight: 600; font-size: 14px;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
.text-link:hover{ gap: 12px; }
.text-link svg{ transition: transform var(--fast) var(--ease); }
.text-link:hover svg{ transform: translateX(2px); }

/* =====================================================
   Header
   ===================================================== */
.announce{
  background: var(--chartreuse);
  color: var(--navy);
}
.announce .container{
  display:flex; justify-content: space-between; align-items:center;
  padding-top: 8px; padding-bottom: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.announce .right{ color: rgba(16,27,51,0.62); }

.site-header{
  position: sticky; top:0; z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.nav-row{
  display:flex; align-items:center; justify-content: space-between;
  padding: 18px 0;
}
.logo{ display:flex; align-items:center; gap:12px; font-family: var(--f-display); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; }
.logo svg{ width:30px; height:30px; flex-shrink:0; }

.main-nav{ display:flex; align-items:center; gap: 36px; }
.main-nav ul{ list-style:none; display:flex; gap:28px; margin:0; padding:0; }
.main-nav a{
  font-size: 13px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase;
  position: relative; padding-bottom: 4px;
}
.main-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:2px; background: var(--chartreuse);
  transition: right var(--fast) var(--ease);
}
.main-nav a:hover::after, .main-nav a[aria-current="page"]::after{ right:0; }
.main-nav a[aria-current="page"]{ color: var(--navy); }

.nav-cta{ display:flex; align-items:center; gap:24px; }

.menu-toggle{
  display:none; background:none; border:1px solid var(--navy); border-radius: var(--radius);
  width:42px; height:42px; align-items:center; justify-content:center; cursor:pointer;
}
.menu-toggle svg{ width:18px; height:18px; }

@media (max-width: 900px){
  .main-nav ul{ display:none; }
  .nav-cta .btn.chartreuse{ padding: 10px 16px; font-size: 12px; }
  .menu-toggle{ display:flex; }
}

.mobile-nav{
  display:none;
  background: var(--navy); color: var(--paper);
}
.mobile-nav.open{ display:block; }
.mobile-nav ul{ list-style:none; margin:0; padding: 16px var(--gutter) 28px; }
.mobile-nav li + li{ border-top: 1px solid var(--rule-on-navy); }
.mobile-nav a{ display:block; padding: 14px 0; font-size: 18px; font-family: var(--f-display); }

/* =====================================================
   Ticker
   ===================================================== */
.ticker{
  background: var(--navy); color: var(--paper);
  overflow: hidden;
  border-top: 1px solid var(--rule-on-navy);
  border-bottom: 1px solid var(--rule-on-navy);
}
.ticker-track{
  display:flex; width: max-content;
  animation: ticker 28s linear infinite;
}
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation: none; overflow-x:auto; } }
.ticker-track span{
  display:flex; align-items:center;
  font-family: var(--f-display); font-style: italic; font-weight: 500;
  font-size: 15px; letter-spacing: 0.02em;
  padding: 11px 28px; white-space: nowrap;
}
.ticker-track span::after{
  content:"◆"; color: var(--chartreuse); font-size:8px; margin-left: 28px;
}
@keyframes ticker{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* =====================================================
   Sections / layout helpers
   ===================================================== */
section{ padding: clamp(56px, 9vw, 128px) 0; }
.on-navy{ background: var(--navy); color: var(--paper); }
.on-stone{ background: var(--stone); }
.on-paper-soft{ background: var(--paper-soft); }

.section-head{ max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head h2{ font-size: clamp(30px, 4vw, 46px); margin-top: 14px; }
.section-head p{ margin-top: 18px; font-size: 17px; color: var(--ink-70); max-width: 560px; }
.on-navy .section-head p{ color: var(--paper-70); }

.rail{
  display:flex; gap: clamp(24px, 6vw, 72px);
  align-items: flex-start;
}
.rail-label{
  flex: 0 0 auto;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 12px; font-weight:700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-45); padding-top: 6px;
}
.on-navy .rail-label{ color: var(--paper-45); }
.rail-body{ flex: 1 1 auto; min-width: 0; }

@media (max-width: 760px){
  .rail{ flex-direction: column; gap: 16px; }
  .rail-label{ writing-mode: horizontal-tb; transform:none; }
}

/* reveal-on-scroll */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* =====================================================
   Hero
   ===================================================== */
.hero{ padding-top: clamp(56px, 8vw, 108px); padding-bottom: clamp(56px, 8vw, 108px); }
.hero-grid{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 72px);
  align-items: center;
}
.hero h1{ font-size: clamp(40px, 6.4vw, 78px); margin-top: 18px; }
.hero .eyebrow{ display:block; }
.hero-copy{ font-size: 18px; color: var(--ink-70); max-width: 480px; margin-top: 22px; }
.hero-ctas{ display:flex; align-items:center; gap: 26px; margin-top: 34px; flex-wrap: wrap; }
.hero-trust{
  margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule);
  font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-45);
}
.hero-art{ position: relative; aspect-ratio: 1/1.02; }
.hero-art figcaption{ position:absolute; font-family: var(--f-body); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color: var(--paper-70); }
@media (max-width: 860px){
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-art{ order:-1; max-width: 420px; margin: 0 auto; }
}

/* =====================================================
   Flow diagram (signature element)
   ===================================================== */
.flow{
  display:flex; align-items:center; justify-content: space-between;
  gap: 8px; margin-top: 12px; position: relative; flex-wrap: wrap;
}
.flow-line{
  position:absolute; left:24px; right:24px; top:19px; height:1px;
  background: var(--rule-on-navy);
  overflow:hidden;
}
.on-paper-soft .flow-line, .flow.on-paper .flow-line{ background: var(--rule); }
.flow-line span{
  display:block; height:100%; width:0%;
  background: var(--chartreuse);
  transition: width 1400ms var(--ease);
}
.flow-line.in span{ width:100%; }
.flow-node{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  flex: 1 1 0; min-width: 130px; text-align:center;
}
.flow-dot{
  width:38px; height:38px; border-radius:50%;
  background: var(--navy); border: 1px solid var(--rule-on-navy);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-display); font-size: 13px; font-weight:600;
  color: var(--paper-70);
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.flow.on-paper .flow-dot{ background: var(--paper); border-color: var(--rule); color: var(--ink-45); }
.flow-node.in .flow-dot{ background: var(--chartreuse); color: var(--navy); transform: scale(1.06); }
.flow-node span.label{ font-size: 13px; font-weight:600; color: var(--paper-70); }
.flow.on-paper .flow-node span.label{ color: var(--ink-70); }

/* =====================================================
   Cards — capability grid
   ===================================================== */
.cap-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border:1px solid var(--rule); }
.on-navy .cap-grid{ background: var(--rule-on-navy); border-color: var(--rule-on-navy); }
.cap-card{
  background: var(--paper); padding: 32px 28px;
  position: relative; overflow:hidden;
  display:flex; flex-direction:column; gap: 16px;
  transition: background var(--med) var(--ease);
}
.on-navy .cap-card{ background: var(--navy); }
.cap-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: var(--chartreuse); transform: scaleY(0); transform-origin: top;
  transition: transform var(--med) var(--ease);
}
.cap-card:hover, .cap-card:focus-within{ background: var(--stone); transform: translateX(4px); }
.on-navy .cap-card:hover, .on-navy .cap-card:focus-within{ background: rgba(215,243,75,0.06); }
.cap-card:hover::before, .cap-card:focus-within::before{ transform: scaleY(1); }
.cap-card.active{ background: var(--chartreuse); }
.cap-card.active .cap-num, .cap-card.active .cap-label{ color: var(--navy); }

.cap-card{ transition: transform var(--med) var(--ease), background var(--med) var(--ease); }
.cap-top{ display:flex; justify-content: space-between; align-items:flex-start; }
.cap-num{ font-family: var(--f-display); font-size: 13px; color: var(--ink-45); }
.on-navy .cap-num{ color: var(--paper-45); }
.cap-icon{
  width:34px; height:34px;
  transition: transform var(--med) var(--ease);
}
.cap-card:hover .cap-icon, .cap-card:focus-within .cap-icon{ transform: translateY(-3px) rotate(-4deg); }
.cap-label{ font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color: var(--ink-45); }
.on-navy .cap-label{ color: var(--paper-45); }
.cap-card h3{ font-size: 21px; font-weight:500; }
.cap-card p{ font-size: 14px; color: var(--ink-70); }
.on-navy .cap-card p{ color: var(--paper-70); }
.cap-arrow{
  margin-top:auto; display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600;
}
.cap-arrow svg{ transition: transform var(--fast) var(--ease); }
.cap-card:hover .cap-arrow svg, .cap-card:focus-within .cap-arrow svg{ transform: translateX(5px); }

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

/* =====================================================
   Industry / generic content cards
   ===================================================== */
.grid-4{ display:grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.grid-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
@media (max-width: 900px){ .grid-4{ grid-template-columns: repeat(2,1fr); } .grid-3{ grid-template-columns: 1fr; } }
@media (max-width: 560px){ .grid-4{ grid-template-columns: 1fr; } }

.card{
  border: 1px solid var(--rule); padding: 28px; background: var(--paper-soft);
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.card:hover{ border-color: var(--navy); transform: translateY(-3px); }
.card .eyebrow{ margin-bottom: 10px; }
.card h3{ font-size: 20px; margin-bottom: 10px; }
.card p{ font-size: 14px; color: var(--ink-70); }

/* =====================================================
   Method / approach steps
   ===================================================== */
.steps{ display:flex; flex-direction:column; }
.step{ display:grid; grid-template-columns: 90px 1fr; gap: 28px; padding: 30px 0; }
.step + .step{ border-top: 1px solid var(--rule); }
.on-navy .step + .step{ border-top-color: var(--rule-on-navy); }
.step-num{ font-family: var(--f-display); font-size: 15px; font-weight:500; color: var(--ink-45); }
.on-navy .step-num{ color: var(--chartreuse); }
.step h3{ font-size: 24px; font-style: italic; font-weight:500; margin-bottom: 8px; }
.step p{ font-size:15px; color: var(--ink-70); max-width: 560px; }
.on-navy .step p{ color: var(--paper-70); }
@media (max-width: 560px){ .step{ grid-template-columns: 1fr; gap:8px; } }

/* =====================================================
   Featured band
   ===================================================== */
.featured-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,6vw,80px); align-items:center; }
@media (max-width: 860px){ .featured-grid{ grid-template-columns: 1fr; } }
.featured-grid figcaption{ margin-top:18px; font-size:13px; color: var(--paper-70); font-style: italic; }

/* =====================================================
   Proof / empty state
   ===================================================== */
.empty-state{
  border: 1px dashed var(--rule-line, var(--rule));
  padding: clamp(36px, 6vw, 64px);
  text-align:center;
}
.empty-state .eyebrow{ justify-content:center; display:flex; }
.empty-state h3{ font-size: 26px; margin: 14px 0 10px; }
.empty-state p{ color: var(--ink-70); max-width: 460px; margin: 0 auto; }

.diff-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: var(--rule); border:1px solid var(--rule); }
@media (max-width: 860px){ .diff-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .diff-grid{ grid-template-columns: 1fr; } }
.diff-item{ background: var(--paper); padding: 28px 24px; }
.diff-item h4{ font-size:16px; font-weight:600; margin-bottom:8px; font-family: var(--f-body); }
.diff-item p{ font-size:13px; color: var(--ink-70); }

.wont-do-list{ list-style:none; margin:32px 0 0; padding:0; max-width:640px; }
.wont-do-list li{
  display:flex; align-items:flex-start; gap:16px;
  padding:18px 0; font-family: var(--f-display); font-size:19px; font-style:italic;
  color: var(--paper-70); border-top:1px solid var(--rule-on-navy);
}
.wont-do-list li:last-child{ border-bottom:1px solid var(--rule-on-navy); }
.wont-mark{ font-family: var(--f-body); font-style:normal; font-weight:700; font-size:18px; color:#C97B6E; flex-shrink:0; line-height:1.4; }
.section-head.on-navy p{ color: var(--paper-70); }

/* =====================================================
   Final CTA
   ===================================================== */
.final-cta{ text-align:center; }
.final-cta .mark{ width:34px; height:34px; margin: 0 auto 22px; }
.final-cta h2{ font-size: clamp(32px,5.5vw,58px); }
.final-cta p{ font-size:17px; color: var(--paper-70); max-width: 460px; margin: 18px auto 0; }
.final-cta .hero-ctas{ justify-content:center; margin-top: 32px; }
.final-cta .fine-print{ margin-top:20px; font-size:13px; color: var(--paper-45); }

/* =====================================================
   Footer
   ===================================================== */
.site-footer{ background: var(--navy); color: var(--paper); padding: 64px 0 28px; }
.footer-top{ display:grid; grid-template-columns: 1.4fr repeat(4,1fr); gap: 32px; padding-bottom: 48px; border-bottom: 1px solid var(--rule-on-navy); }
.footer-brand .logo{ color: var(--paper); }
.footer-brand p{ margin-top: 14px; font-size: 14px; color: var(--paper-70); max-width: 220px; }
.footer-col h5{ font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color: var(--paper-45); margin: 0 0 16px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ font-size:14px; color: var(--paper-70); transition: color var(--fast) var(--ease); }
.footer-col a:hover{ color: var(--chartreuse); }
.footer-soon{ font-size:14px; color: var(--paper-45); cursor: default; }
.footer-bottom{ display:flex; justify-content:space-between; padding-top: 24px; font-size:12px; color: var(--paper-45); flex-wrap:wrap; gap:10px; }
@media (max-width: 900px){ .footer-top{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .footer-top{ grid-template-columns: 1fr; } }

/* =====================================================
   Breadcrumb / page hero (inner pages)
   ===================================================== */
.page-hero{ padding-top: clamp(48px,7vw,84px); padding-bottom: clamp(40px,6vw,64px); }
.breadcrumb{ display:flex; gap:8px; align-items:center; font-size:12px; color: var(--ink-45); margin-bottom: 22px; text-transform:uppercase; letter-spacing:0.06em; }
.breadcrumb a:hover{ color: var(--navy); }
.page-hero h1{ font-size: clamp(34px,5.5vw,58px); max-width: 780px; }
.page-hero .lede{ font-size:18px; color: var(--ink-70); max-width: 620px; margin-top:18px; }

.included-list{ list-style:none; margin: 0; padding:0; display:grid; gap:1px; background: var(--rule); border:1px solid var(--rule); }
.included-list li{ background: var(--paper); padding: 18px 22px; display:flex; gap:14px; align-items:baseline; font-size:15px; }
.included-list li::before{ content:"—"; color: var(--chartreuse-dim); font-weight:700; }

.spotlight{ border:1px solid var(--rule); padding: 32px; display:flex; justify-content: space-between; align-items:center; gap:24px; flex-wrap:wrap; }

/* FAQ accordion — native <details>, no JS needed */
.faq-list{ display:flex; flex-direction:column; }
.faq-item{ border-top:1px solid var(--rule); }
.faq-item:last-child{ border-bottom:1px solid var(--rule); }
.faq-item summary{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  padding:20px 0; cursor:pointer; font-family:var(--f-display); font-size:17px; font-weight:500;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-size:22px; line-height:1; color: var(--chartreuse-dim); flex-shrink:0;
}
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item .faq-answer{ padding:0 0 22px; font-size:15px; color:var(--ink-70); max-width:640px; }

/* =====================================================
   Contact form
   ===================================================== */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items:start; }
@media (max-width: 800px){ .form-grid{ grid-template-columns: 1fr; } }
form.contact-form{ display:flex; flex-direction:column; gap: 20px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:12px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color: var(--ink-45); }
.field label span{ color: var(--chartreuse-dim); }
.field input:invalid:not(:placeholder-shown), .field textarea:invalid:not(:placeholder-shown){ border-color: #B5453A; }
.field input, .field textarea{
  font-family: var(--f-body); font-size:15px; padding: 14px 16px;
  border: 1px solid var(--rule); background: var(--paper-soft); color: var(--navy);
  border-radius: var(--radius);
  transition: border-color var(--fast) var(--ease);
}
.field input:focus, .field textarea:focus{ border-color: var(--navy); outline: none; }
.field textarea{ resize: vertical; min-height: 120px; }
.form-note{ font-size:13px; color: var(--ink-45); }
.form-success{
  display:none; border:1px solid var(--navy); padding: 24px; margin-top:8px;
}
.form-success.show{ display:block; }
.form-success h4{ font-family: var(--f-display); font-size:20px; margin-bottom:6px; }

.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }

.form-error{
  display:none; border:1px solid #B5453A; color:#B5453A; padding:14px 16px; font-size:14px; margin:0;
}
.form-error.show{ display:block; }

/* =====================================================
   Article body (blog posts) + case study stats
   ===================================================== */
.post-meta{ display:flex; gap:16px; align-items:center; font-size:12px; color: var(--ink-45); text-transform:uppercase; letter-spacing:0.06em; margin-top:14px; }
.post-meta .dot{ width:4px; height:4px; background: var(--chartreuse-dim); display:inline-block; }

.article-body{ max-width: 680px; }
.article-body p{ font-size:16px; color: var(--ink-70); margin-bottom: 20px; }
.article-body h3{ font-size:24px; font-style:italic; font-weight:500; margin: 36px 0 14px; }
.article-body ul{ margin: 0 0 20px; padding-left: 20px; }
.article-body li{ font-size:16px; color: var(--ink-70); margin-bottom: 8px; }
.article-body li::marker{ color: var(--chartreuse-dim); }

.related-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:20px; }
@media (max-width:700px){ .related-grid{ grid-template-columns:1fr; } }

.stat-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:1px; background: var(--rule); border:1px solid var(--rule); margin-top:28px; }
@media (max-width:900px){ .stat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .stat-grid{ grid-template-columns:1fr; } }
.stat-item{ background: var(--paper-soft); padding: 22px 22px 26px; border-top: 3px solid var(--chartreuse); transition: background var(--fast) var(--ease); }
.stat-item:hover{ background: var(--stone); }
.stat-tag{ display:block; font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color: var(--ink-45); margin-bottom:10px; }
.stat-number{ font-family: var(--f-display); font-size: 32px; font-weight:500; }
.stat-label{ font-size:13px; color: var(--ink-70); margin-top:6px; }

.testimonial{ border-left:3px solid var(--chartreuse); padding: 4px 0 4px 22px; margin: 28px 0; }
.testimonial p{ font-family: var(--f-display); font-style:italic; font-size:20px; color: var(--navy); }
.testimonial cite{ display:block; font-style:normal; font-size:13px; color: var(--ink-45); margin-top:10px; }

.cs-meta{ display:flex; gap:10px; flex-wrap:wrap; margin-top:18px; }
.cs-tag{ font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; border:1px solid var(--rule); padding:6px 12px; }

/* Utility */
.mt-0{ margin-top:0; }
.center{ text-align:center; }