/* WeCology-style typographic/component layer for GeoDataTrack (v2).
   Uses GDT palette only; does NOT touch page background (background.css). */
:root{
  --font-heading:'Fraunces', serif;
  --font-body:'DM Sans', sans-serif;
  --wc-radius-card:24px; --wc-radius-tile:16px; --wc-radius-pill:50px;
  --wc-card-bg:rgba(255,255,255,0.72);
  --wc-card-border:1px solid rgba(45,80,22,0.12);   /* GDT primary, translucent */
  --section-padding:8rem;
}
body{font-family:var(--font-body);line-height:1.7;}
h1,h2,h3,h4{font-family:var(--font-heading);font-weight:600;line-height:1.2;}
h1{font-size:clamp(2.8rem,6vw,4.5rem);}
h2{font-size:clamp(2rem,4vw,3rem);}
h3{font-size:1.4rem;}
h1 em,h2 em{font-style:italic;color:var(--color-primary-light);}

/* Eyebrow labels: small, uppercase, 0.15em tracking, leading rule */
.section-label,.feature-tagline,.example-label,.measures-label,.card-label{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-body);
  font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.15em;
  color:var(--color-primary-light);
}
.section-label::before{content:'';width:30px;height:2px;background:currentColor;display:inline-block;}
.section-label.text-center{justify-content:center;}
.stat-label,.outcome-label,.metric-label,.hero-stat-label{text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;}

/* Centred section headings */
section > .container > h2, .section-header, .section-intro{ text-align:center; }
.section-intro{max-width:700px;margin-left:auto;margin-right:auto;}

/* Section spacing */
section{padding-top:var(--section-padding);padding-bottom:var(--section-padding);}
.header + section, .header ~ .hero{padding-top:6rem;}

/* Nav: logo left, links centred, pill CTA right */
.header .container{display:flex;align-items:center;justify-content:space-between;gap:2rem;}
.header .nav{display:flex;flex:1;justify-content:center;gap:2rem;align-items:center;}
.header .nav a{font-family:var(--font-body);font-size:.95rem;font-weight:500;color:var(--color-text);position:relative;white-space:nowrap;}
.header .nav a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--color-primary-light);transition:width .3s ease;}
.header .nav a:hover::after{width:100%;}

/* Pill buttons */
.btn,.btn-primary,.btn-secondary,.submit-button,.btn-side,.plan-cta a{border-radius:var(--wc-radius-pill)!important;font-family:var(--font-body);font-weight:600;transition:all .3s ease;}
.btn{padding:1rem 2rem;}
.btn-small{padding:.8rem 1.8rem;}
.btn-primary{background:var(--color-primary-dark);border-color:var(--color-primary-dark);color:#fff;}
.btn-primary:hover{background:var(--color-primary-light);border-color:var(--color-primary-light);transform:translateY(-3px);box-shadow:0 12px 35px rgba(45,80,22,.25);}
.btn-secondary{border:2px solid var(--color-secondary);}
.btn-secondary:hover{background:var(--color-secondary);color:#fff;}

/* Cards: rounded, translucent, thin border, lift on hover */
.problem-card,.feature-card,.pricing-card,.pricing-card-large,.service-card,.example-card,
.diff-card,.convergence-card,.mapping-feature-card,.eov-process-card,.success-card{
  border-radius:var(--wc-radius-card)!important;border:var(--wc-card-border);
  padding:2.5rem;transition:all .4s ease;
}
.feature-card,.service-card,.example-card,.diff-card,.convergence-card,.mapping-feature-card,.eov-process-card{
  background:var(--wc-card-bg);backdrop-filter:blur(6px);
}
.feature-card:hover,.service-card:hover,.example-card:hover,.diff-card:hover,
.convergence-card:hover,.mapping-feature-card:hover,.eov-process-card:hover{
  transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.08);border-color:var(--color-primary-light);
}

/* Icon tiles */
.card-icon,.feature-icon,.problem-icon,.eov-card-icon,.success-icon{
  width:60px;height:60px;border-radius:var(--wc-radius-tile)!important;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));color:#fff;margin-bottom:1.5rem;
}

@media (max-width:900px){
  :root{--section-padding:5rem;}
  .header .nav{gap:1.25rem;}
}
@media (max-width:640px){
  :root{--section-padding:4rem;}
  .problem-card,.feature-card,.pricing-card,.pricing-card-large,.service-card,.example-card,
  .diff-card,.convergence-card,.mapping-feature-card,.eov-process-card,.success-card{padding:1.75rem;}
}

/* Dark-section cards keep their own translucent-on-dark bg/border */
.problem-card:hover{transform:translateY(-5px);}

/* v3 polish */
/* Header CTA: dark green pill on every page (overrides home page amber inline style) */
.header .header-cta .btn-primary,.header .header-cta a.btn.btn-primary{background:#1A3009!important;border-color:#1A3009!important;color:#fff!important;border-radius:var(--wc-radius-pill)!important;}
.header .header-cta .btn-primary:hover,.header .header-cta a.btn.btn-primary:hover{background:#2D5016!important;border-color:#2D5016!important;}
/* Mobile: restore original behaviour (nav hidden below 768px; site has no menu toggle) */
@media (max-width:767px){
  .header .nav{display:none!important;}
  .header .container{gap:1rem;}
  .header-cta .btn-small{padding:.6rem 1.2rem;font-size:.9rem;}
  h1{font-size:clamp(2rem,9vw,2.8rem);}
  h2{font-size:clamp(1.6rem,7vw,2rem);}
  img{max-width:100%;height:auto;}
}
/* Tablet: tighten nav so long menus fit */
@media (min-width:768px) and (max-width:1100px){
  .header .container{gap:1rem;}
  .header .nav{gap:.9rem!important;flex-wrap:wrap;row-gap:.3rem;}
  .header .nav a{font-size:.85rem;}
  .header-cta{gap:.6rem!important;}
  .header-cta .btn-link{display:none!important;}
  .header-cta .btn-small{padding:.6rem 1.1rem;font-size:.85rem;white-space:nowrap;}
}
html,body{overflow-x:clip;}
.header-cta .btn{white-space:nowrap;}