/* =========================================================
   The Doggo Scoop — styles.css (FULL UPDATED FILE)
   - Pricing band is now warm/light (no “emo” dark section)
   - Pricing note line uses pill chips + no weird “Bi-weekly” wrap
   - Dog count labels ALWAYS stay pills (min-width + nowrap)
   - Why Us has stronger orange personality + unique card treatment
   ========================================================= */

:root{
  --bg: #fbfaf7;
  --card: #ffffff;
  --text: #1c1c1c;
  --muted: #5b5b5b;

  --brand: #2e7d32;  /* grass green */
  --brand2: #1b1f2a; /* deep charcoal/navy */
  --orange: #FFA726; /* hero orange */

  --border: rgba(28,28,28,.10);
  --shadow: 0 10px 25px rgba(0,0,0,.08);
  --radius: 18px;
  --max: 1120px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background: #f5f7f4; /* soft outdoor neutral */
  line-height: 1.45;
}

a{ color: inherit; text-decoration: none; }
.container{ width: min(100%, var(--max)); margin: 0 auto; padding: 0 20px; }

/* =========================
   TOP BAR
   ========================= */
header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(251,250,247,.78);
  border-bottom: 1px solid var(--border);
}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 14px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.logo{
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--brand);
  display:grid;
  place-items:center;
  color: white;
  font-size: 18px;
}
.logo span{ font-size: 18px; }

.navlinks{
  display:flex;
  align-items:center;
  gap: 18px;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
}
.navlinks a:hover{ color: var(--text); }
.navcta{ display:flex; gap: 10px; align-items:center; }

/* =========================
   BUTTONS
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  font-weight: 800;
  font-size: 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease, background .08s ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 24px rgba(0,0,0,.07); }
.btn:active{ transform: translateY(0px); box-shadow: 0 8px 18px rgba(0,0,0,.05); }

.btn.primary{
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  box-shadow: 0 8px 18px rgba(46,125,50,.25);
}
.btn.primary:hover{
  background: #256628;
  box-shadow: 0 12px 22px rgba(46,125,50,.35);
}

/* =========================
   GENERIC CARD + SECTIONS
   ========================= */
.card{
  background: rgba(255,255,255,.75);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

section{ padding: 34px 0; }

.sectionHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.sectionHead h2{
  margin: 0;
  font-size: 24px;
  letter-spacing: -.02em;
}
.sectionHead p{
  margin: 0;
  color: var(--muted);
  font-weight: 650;
  font-size: 14px;
  max-width: 60ch;
}

/* Feature grids */
.grid3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.grid2{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.tile{ padding: 16px; }
.tile h3{
  margin: 0 0 6px;
  font-size: 16px;
  letter-spacing: -.015em;
}
.tile p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

/* =========================
   FORMS
   ========================= */
.quoteCard{ padding: 18px; }
.quoteCard h3{
  margin: 0 0 6px;
  font-size: 18px;
  letter-spacing: -.02em;
}
.quoteCard p{
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
}

form{ display:grid; gap: 10px; }
.row2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
label{
  font-size: 12px;
  font-weight: 800;
  color: rgba(28,28,28,.75);
  display:block;
  margin-bottom: 6px;
}
input, select, textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.92);
  font-size: 14px;
  outline: none;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(46,125,50,.55);
  box-shadow: 0 0 0 4px rgba(46,125,50,.14);
}
textarea{ min-height: 88px; resize: vertical; }
.small{
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* =========================================================
   HERO (Orange + Cutout)
   ========================================================= */
.heroOrange{
  background: var(--orange);
  padding: 36px 0 0;
  overflow: hidden; /* crisp seam */
}

.heroOrangeInner{
  display: grid;
  grid-template-columns: 1.00fr 0.85fr;
  gap: 34px;
  align-items: end;
  min-height: 420px;
}

.heroDogWrap{
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  align-self: stretch;
}

.heroDog{
  display: block;
  width: min(1200px, 130%);
  max-width: none;
  height: auto;
  margin-bottom: -42px;
  filter: drop-shadow(0 22px 34px rgba(0,0,0,.22));
}

.heroCopy{
  color: var(--brand2);
  padding: 6px 0;
  padding-left: 80px;
  max-width: 540px;
  align-self: center;
  margin-bottom: 30px;
}

.heroEyebrow{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 900;
  letter-spacing: .02em;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.08);
}

.heroHeadline{
  margin: 16px 0 12px;
  font-size: clamp(40px, 4.8vw, 62px);
  line-height: 1.02;
  letter-spacing: -0.04em;
  font-weight: 950;
}

.heroSub{
  margin: 0 0 18px;
  font-size: 16.5px;
  max-width: 56ch;
  color: rgba(27,31,42,.82);
  font-weight: 600;
}

.heroCtas{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}

.heroBtnPrimary{
  background: var(--brand2);
  border-color: rgba(0,0,0,.08);
  color: #fff;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.heroBtnPrimary:hover{ background: #11141c; }

.heroBtnGhost{
  background: rgba(255,255,255,.55);
  border-color: rgba(0,0,0,.10);
  color: var(--brand2);
}

.heroMicro{
  margin-top: 14px;
  font-size: 13px;
  font-weight: 800;
  color: rgba(27,31,42,.78);
}

@media (max-width: 920px){
  .heroOrange{ padding: 28px 0 70px; }
  .heroOrangeInner{
    align-items: center;
    min-height: auto;
    grid-template-columns: 1fr;
  }
  .heroDogWrap{ order: 0; }
  .heroCopy{ order: 1; padding-left: 0; margin-bottom: 0; }
  .heroDog{
    width: min(520px, 120%);
    transform: translateY(10px);
    margin-bottom: 0;
  }
}

/* =========================================================
   HOW IT WORKS (Warm + Playful)
   ========================================================= */
#how{
  padding: 54px 0;
  background: radial-gradient(900px 260px at 50% -80px,
    rgba(255,167,38,.18),
    rgba(255,167,38,0)
  );
}

#how .sectionHead h2{
  font-size: 28px;
  font-weight: 950;
  letter-spacing: -0.03em;
}

#how .sectionHead p{
  font-size: 15px;
  color: rgba(27,31,42,.70);
  font-weight: 650;
}

#how .grid3{ gap: 16px; }

#how .card.tile{
  position: relative;
  padding: 18px 18px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 30px rgba(0,0,0,.06);
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

#how .card.tile::before{
  content:"";
  position:absolute;
  inset: 0;
  background: radial-gradient(600px 220px at 30% 0%,
    rgba(255,167,38,.18),
    rgba(255,167,38,0)
  );
  pointer-events:none;
}

#how .card.tile:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,.09);
  border-color: rgba(255,167,38,.35);
}

#how .icon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
  margin-bottom: 12px;
}

#how .tile h3{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

#how .tile p{
  margin: 0;
  color: rgba(27,31,42,.72);
  font-weight: 650;
  line-height: 1.45;
}

/* =========================================================
   PRICING BAND (Warm + Brand) — FULL
   ========================================================= */
.pricingBand{
  padding: 74px 0;
  background:
    var(--orange);
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.pricingTop{
  max-width: 760px;
  margin: 0 auto 18px;
  text-align: center;
}

.pricingPill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  letter-spacing: .02em;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.08);
  color: rgba(27,31,42,.88);
}

.pricingTitle{
  margin: 14px 0 10px;
  font-size: clamp(30px, 3.8vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 950;
}

.pricingSub{
  margin: 0 auto 16px;
  max-width: 64ch;
  color: rgba(27,31,42,.72);
  font-weight: 650;
  font-size: 15px;
}

/* Frequency toggle */
.freqToggle{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
  margin-top: 10px;
}

.freqBtn{
  appearance: none;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  color: rgba(27,31,42,.86);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  cursor: pointer;
  transition: transform .08s ease, background .08s ease, border-color .08s ease, box-shadow .08s ease;
}

.freqBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
}

.freqBtn.isActive{
  background: rgba(46,125,50,.92);
  border-color: rgba(46,125,50,.92);
  color: #fff;
  box-shadow: 0 14px 26px rgba(46,125,50,.18);
}

/* Note line */
.pricingNote{
  margin: 14px auto 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
  max-width: 820px;
}

.noteDot{
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: rgba(46,125,50,.95);
  box-shadow: 0 0 0 4px rgba(46,125,50,.16);
  margin-top: 6px;
  flex: 0 0 9px;
}

.pricingNoteText{
  margin: 0;
  color: rgba(27,31,42,.74);
  font-weight: 650;
  line-height: 1.4;
}

.pricingNoteText strong{
  color: rgba(27,31,42,.92);
  font-weight: 900;
}

.noteChoice{
  display: inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(46,125,50,.10);
  border: 1px solid rgba(46,125,50,.18);
  color: rgba(46,125,50,.95);
  font-weight: 900;
  white-space: nowrap; /* prevents Bi-weekly from wrapping */
  margin: 0 2px;
}

.noteSep{
  margin: 0 6px;
  color: rgba(27,31,42,.55);
  font-weight: 800;
}

.noteDivider{
  margin: 0 8px;
  color: rgba(27,31,42,.35);
  font-weight: 900;
}

@media (max-width: 520px){
  .pricingNote{ align-items: center; }
  .noteDivider{ display: none; }
  .pricingNoteText{ font-size: 14px; }
}

/* Price cards */
.priceGrid{
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.priceMiniCard{
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  transition: transform .10s ease, box-shadow .10s ease, border-color .10s ease;
}

.priceMiniCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  border-color: rgba(46,125,50,.22);
}

.dogTop{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

/* ALWAYS pill (no circles) */
.dogPill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 999px;
  min-width: 74px;     /* keeps “1 dog” from becoming a circle */
  white-space: nowrap; /* never wrap */
  background: rgba(27,31,42,.06);
  border: 1px solid rgba(0,0,0,.08);
  color: rgba(27,31,42,.82);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .01em;
}

.dogPrice{
  font-weight: 950;
  letter-spacing: -0.02em;
  font-size: 28px;
  line-height: 1;
  color: var(--brand2);
}

.dogMeta{
  margin-top: 8px;
  color: rgba(27,31,42,.62);
  font-weight: 650;
  font-size: 13px;
}

/* Bottom row */
.pricingBottom{
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 16px;
}

.pricingFine{
  color: rgba(27,31,42,.70);
  font-weight: 650;
  max-width: 70ch;
}

.pricingCtas{
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Buttons in pricing */
.pricingBand .btn{
  border-color: rgba(0,0,0,.10);
  background: rgba(255,255,255,.85);
  color: rgba(27,31,42,.92);
  box-shadow: 0 12px 26px rgba(0,0,0,.07);
}
.pricingBand .btn:hover{ background: rgba(255,255,255,.95); }

.pricingBand .btn.primary{
  background: rgba(46,125,50,.92);
  border-color: rgba(46,125,50,.92);
  color: #fff;
  box-shadow: 0 18px 34px rgba(46,125,50,.18);
}
.pricingBand .btn.primary:hover{ background: rgba(46,125,50,1); }

@media (max-width: 920px){
  .pricingBand{ padding: 58px 0; }
  .priceGrid{ grid-template-columns: 1fr 1fr; }
  .pricingBottom{ justify-content: center; text-align: center; }
}

/* =========================================================
   WHY US (Orange Personality)
   ========================================================= */
.whyBand{
  padding: 76px 0;
  background:
    radial-gradient(900px 320px at 50% -120px,
      rgba(255,167,38,.26),
      rgba(255,167,38,0)
    ),
    linear-gradient(180deg,
      rgba(255,167,38,.08),
      rgba(255,167,38,0) 42%
    ),
    var(--bg);
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.whyHead{
  max-width: 760px;
  margin: 0 auto 20px;
  text-align: center;
}

.whyPill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  letter-spacing: .02em;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,167,38,.16);
  border: 1px solid rgba(255,167,38,.28);
  color: rgba(27,31,42,.86);
}

.whyTitle{
  margin: 14px 0 10px;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 950;
  color: var(--brand2);
}

.whySub{
  margin: 0 auto;
  max-width: 66ch;
  color: rgba(27,31,42,.74);
  font-weight: 650;
  font-size: 15px;
}

.whyGrid{
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.whyCard{
  position: relative;
  padding: 18px 16px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 30px rgba(0,0,0,.06);
  overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.whyCard::before{
  content:"";
  position:absolute;
  inset: 0;
  background: radial-gradient(700px 240px at 30% -10%,
    rgba(255,167,38,.20),
    rgba(255,167,38,0)
  );
  pointer-events:none;
}

.whyCard:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,.09);
  border-color: rgba(255,167,38,.35);
}

.whyIcon{
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 18px;
  background: rgba(255,167,38,.16);
  border: 1px solid rgba(255,167,38,.26);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
  margin-bottom: 12px;
}

.whyCard h3{
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: var(--brand2);
}

.whyCard p{
  margin: 0;
  color: rgba(27,31,42,.72);
  font-weight: 650;
  line-height: 1.45;
  font-size: 14px;
}

.whyFooter{
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.whyNote{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(27,31,42,.72);
  font-weight: 700;
}

.whyStar{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255,167,38,.16);
  border: 1px solid rgba(255,167,38,.26);
  color: rgba(27,31,42,.88);
  font-weight: 950;
  font-size: 14px;
}

.whyCtas{
  display: flex;
  gap: 10px;
  align-items: center;
}

@media (max-width: 920px){
  .whyBand{ padding: 58px 0; }
  .whyGrid{ grid-template-columns: 1fr 1fr; }
  .whyHead{ text-align: left; margin-bottom: 14px; }
}
@media (max-width: 560px){
  .whyGrid{ grid-template-columns: 1fr; }
}

/* =========================================================
   SERVICE AREA (Doggo Scoop Personality)
   ========================================================= */
.areasBand{
  padding: 76px 0;
  background:
    radial-gradient(900px 320px at 50% -120px,
      rgba(46,125,50,.12),
      rgba(46,125,50,0)
    ),
    radial-gradient(800px 260px at 15% 10%,
      rgba(255,167,38,.20),
      rgba(255,167,38,0)
    ),
    var(--bg);
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.areasHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.areasPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  letter-spacing: .02em;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(46,125,50,.10);
  border: 1px solid rgba(46,125,50,.18);
  color: rgba(27,31,42,.86);
}

.areasTitle{
  margin: 12px 0 8px;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 950;
  color: var(--brand2);
}

.areasSub{
  margin: 0;
  max-width: 70ch;
  color: rgba(27,31,42,.74);
  font-weight: 650;
  font-size: 15px;
}

.areasCtas{
  display:flex;
  gap: 10px;
  align-items:center;
  flex-wrap: wrap;
}

.areasGrid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 14px;
}

.areasCard{
  padding: 18px 18px 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 30px rgba(0,0,0,.06);
  overflow: hidden;
  position: relative;
}

.areasCard::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(700px 240px at 25% 0%,
    rgba(255,167,38,.18),
    rgba(255,167,38,0)
  );
  pointer-events:none;
}

.areasCardTop{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  margin-bottom: 12px;
}

.areasIcon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  font-size: 18px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
  flex: 0 0 46px;
}

.areasCard h3{
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: var(--brand2);
}
.areasCard p{
  margin: 0;
  color: rgba(27,31,42,.70);
  font-weight: 650;
  font-size: 14px;
}

/* chips */
.areasChips{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.areasChip{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(27,31,42,.06);
  border: 1px solid rgba(0,0,0,.08);
  color: rgba(27,31,42,.82);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .01em;
  white-space: nowrap;
  transition: transform .10s ease, box-shadow .10s ease, border-color .10s ease;
}
.areasChip:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
  border-color: rgba(46,125,50,.22);
}

/* little note line */
.areasMiniNote{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
  color: rgba(27,31,42,.74);
  font-weight: 650;
  font-size: 14px;
}

.miniDot{
  width: 9px;
  height: 9px;
  border-radius: 99px;
  background: rgba(255,167,38,.95);
  box-shadow: 0 0 0 4px rgba(255,167,38,.18);
  margin-top: 6px;
  flex: 0 0 9px;
}

/* pin card */
.areasPinCard::before{
  background: radial-gradient(700px 240px at 15% 0%,
    rgba(46,125,50,.14),
    rgba(46,125,50,0)
  );
}

.areasPinTop{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  margin-bottom: 12px;
}

.pinBadge{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  font-size: 18px;
  background: rgba(46,125,50,.12);
  border: 1px solid rgba(46,125,50,.18);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
  flex: 0 0 46px;
}

.areasRules{
  list-style: none;
  padding: 0;
  margin: 0;
  display:grid;
  gap: 10px;
}

.areasRules li{
  display:grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items:start;
  color: rgba(27,31,42,.80);
  font-weight: 650;
  font-size: 14px;
}

.ruleCheck{
  width: 18px;
  height: 18px;
  display:grid;
  place-items:center;
  border-radius: 6px;
  background: rgba(46,125,50,.12);
  border: 1px solid rgba(46,125,50,.18);
  color: rgba(46,125,50,.95);
  font-size: 12px;
  font-weight: 950;
  margin-top: 2px;
}

/* mini map placeholder */
.areasMap{
  margin-top: 14px;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,.08);
  background:
    radial-gradient(circle at 25% 25%, rgba(255,167,38,.20), transparent 55%),
    radial-gradient(circle at 78% 38%, rgba(46,125,50,.14), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.46));
  height: 160px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 26px rgba(0,0,0,.06);
}

.mapBlob{
  position:absolute;
  border-radius: 999px;
  filter: blur(0px);
  opacity: .9;
}
.mapBlob1{
  width: 220px; height: 220px;
  left: -70px; top: -90px;
  background: rgba(255,167,38,.18);
}
.mapBlob2{
  width: 240px; height: 240px;
  right: -90px; bottom: -120px;
  background: rgba(46,125,50,.14);
}

.mapPin{
  position:absolute;
  left: 50%;
  top: 52%;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: rgba(27,31,42,.92);
  box-shadow: 0 0 0 6px rgba(27,31,42,.10);
}
.mapText{
  position:absolute;
  left: 50%;
  top: calc(52% + 18px);
  transform: translateX(-50%);
  font-weight: 950;
  color: rgba(27,31,42,.82);
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.08);
}

.areasBottomCta{
  margin-top: 14px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* responsive */
@media (max-width: 920px){
  .areasBand{ padding: 58px 0; }
  .areasGrid{ grid-template-columns: 1fr; }
  .areasHead{ align-items: flex-start; }
}


/* =========================================================
   FAQ
   ========================================================= */
details{
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  padding: 14px 14px;
}
details summary{
  cursor:pointer;
  font-weight: 900;
  letter-spacing: -.01em;
  list-style: none;
}
details summary::-webkit-details-marker{ display:none; }
details p{
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* =========================================================
   FOOTER — SOCIAL UPGRADE
   ========================================================= */

footer{
  border-top: 1px solid var(--border);
  padding: 28px 0 26px;
  background: var(--orange);
  color: white;
  font-size: 14px;
}

.footerGrid{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.footerLogo{
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -.01em;
}

.footerHeading{
  font-weight: 900;
  margin-bottom: 8px;
  letter-spacing: -.01em;
}

.footerLinks{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.footerLinks a{
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-weight: 600;
}

.footerLinks a:hover{
  color: #fff;
  text-decoration: underline;
}

/* Social icons */
.footerSocial{
  display:flex;
  gap: 10px;
  margin-top: 4px;
}

.socialIcon{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
}

.socialIcon svg{
  width: 18px;
  height: 18px;
  fill: white;
  opacity: .95;
  transition: transform .12s ease, opacity .12s ease;
}

.socialIcon:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.28);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}

.socialIcon:hover svg{
  opacity: 1;
  transform: scale(1.08);
}

.footerBottom{
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.25);
  text-align: center;
  color: rgba(255,255,255,.75);
  font-size: 13px;
}

.footerBottom a{
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-weight: 600;
  margin: 0 6px;
}

.footerBottom a:hover{
  color: #fff;
  text-decoration: underline;
}

.footerDivider{
  color: rgba(255,255,255,.4);
  margin: 0 4px;
}

/* Responsive */
@media (max-width: 720px){
  .footerGrid{
    flex-direction: column;
    gap: 22px;
  }
}
/*REspoNSIVE GLOBAL
   ========================================================= */
@media (max-width: 920px){
  .navlinks{ display:none; }
  .grid3{ grid-template-columns: 1fr; }
  .grid2{ grid-template-columns: 1fr; }
  .row2{ grid-template-columns: 1fr; }
}